diff --git a/.bazelrc b/.bazelrc
new file mode 100644
index 0000000000..7b35f14ca3
--- /dev/null
+++ b/.bazelrc
@@ -0,0 +1,6 @@
+# Disable sandboxing because it's too slow.
+# https://github.com/bazelbuild/bazel/issues/2424
+build --spawn_strategy=standalone
+
+# Performance: avoid stat'ing input files
+build --watchfs
diff --git a/.circleci/config.yml b/.circleci/config.yml
new file mode 100644
index 0000000000..7efbf2cb79
--- /dev/null
+++ b/.circleci/config.yml
@@ -0,0 +1,56 @@
+# Configuration file for https://circleci.com/gh/angular/angular
+
+# Note: YAML anchors allow an object to be re-used, reducing duplication.
+# The ampersand declares an alias for an object, then later the `<<: *name`
+# syntax dereferences it.
+# See http://blog.daemonl.com/2016/02/yaml.html
+# To validate changes, use an online parser, eg.
+# http://yaml-online-parser.appspot.com/
+
+# Settings common to each job
+anchor_1: &job_defaults
+  working_directory: ~/ng
+  docker:
+    - image: angular/ngcontainer
+
+# After checkout, rebase on top of master.
+# Similar to travis behavior, but not quite the same.
+# See https://discuss.circleci.com/t/1662
+anchor_2: &post_checkout
+  post: git pull --ff-only origin "refs/pull/${CI_PULL_REQUEST//*pull\//}/merge"
+
+version: 2
+jobs:
+  lint:
+    <<: *job_defaults
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
+
+      - run: npm install
+      - run: npm run postinstall
+      - run: ./node_modules/.bin/gulp lint
+
+  build:
+    <<: *job_defaults
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
+
+      - run: bazel run @build_bazel_rules_typescript_node//:bin/npm install
+      - run: bazel build packages/...
+      - save_cache:
+          key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
+          paths:
+            - "node_modules"
+
+workflows:
+  version: 2
+  default_workflow:
+    jobs:
+      - lint
+      - build
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index c7b68e6234..3c9805e95a 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,39 +1,57 @@
 <!--
-IF YOU DON'T FILL OUT THE FOLLOWING INFORMATION WE MIGHT CLOSE YOUR ISSUE WITHOUT INVESTIGATING
+PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.
+
+ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
 -->
 
-**I'm submitting a ...**  (check one with "x")
-```
-[ ] bug report => search github for a similar issue or PR before submitting
-[ ] feature request
-[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
-```
+## I'm submitting a...
+<!-- Check one of the following options with "x" -->
+<pre><code>
+[ ] Regression (a behavior that used to work and stopped working in a new release)
+[ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
+[ ] Feature request
+[ ] Documentation issue or request
+[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
+</code></pre>
 
-**Current behavior**
-<!-- Describe how the bug manifests. -->
+## Current behavior
+<!-- Describe how the issue manifests. -->
 
-**Expected behavior**
-<!-- Describe what the behavior would be without the bug. -->
 
-**Minimal reproduction of the problem with instructions**
+## Expected behavior
+<!-- Describe what the desired behavior would be. -->
+
+
+## Minimal reproduction of the problem with instructions
 <!--
-If the current behavior is a bug or you can illustrate your feature request better with an example, 
-please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
+For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
 https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
 -->
 
-**What is the motivation / use case for changing the behavior?**
-<!-- Describe the motivation or the concrete use case -->
+## What is the motivation / use case for changing the behavior?
+<!-- Describe the motivation or the concrete use case. -->
 
-**Please tell us about your environment:**
-<!-- Operating system, IDE, package manager, HTTP server, ... -->
 
-* **Angular version:** 2.0.X
+## Environment
+
+<pre><code>
+Angular version: X.Y.Z
 <!-- Check whether this is still an issue in the most recent Angular version -->
 
-* **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
-<!-- All browsers where this could be reproduced -->
+Browser:
+- [ ] Chrome (desktop) version XX
+- [ ] Chrome (Android) version XX
+- [ ] Chrome (iOS) version XX
+- [ ] Firefox version XX
+- [ ] Safari (desktop) version XX
+- [ ] Safari (iOS) version XX
+- [ ] IE version XX
+- [ ] Edge version XX
  
-* **Language:** [all | TypeScript X.X | ES6/7 | ES5]
+For Tooling issues:
+- Node version: XX  <!-- run `node --version` -->
+- Platform:  <!-- Mac, Linux, Windows -->
 
-* **Node (for AoT issues):** `node --version` =   
+Others:
+<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
+</code></pre>
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 70ac9a510f..b74eed5b08 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,10 +1,15 @@
-**Please check if the PR fulfills these requirements**
+## PR Checklist
+Please check if your PR fulfills the following requirements:
+
 - [ ] The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
 - [ ] Tests for the changes have been added (for bug fixes / features)
 - [ ] Docs have been added / updated (for bug fixes / features)
 
 
-**What kind of change does this PR introduce?** (check one with "x")
+## PR Type
+What kind of change does this PR introduce?
+
+<!-- Please check the one that applies to this PR using "x". -->
 ```
 [ ] Bugfix
 [ ] Feature
@@ -12,25 +17,27 @@
 [ ] Refactoring (no functional changes, no api changes)
 [ ] Build related changes
 [ ] CI related changes
+[ ] Documentation content changes
+[ ] angular.io application / infrastructure changes
 [ ] Other... Please describe:
 ```
 
-**What is the current behavior?** (You can also link to an open issue here)
+## What is the current behavior?
+<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
+
+Issue Number: N/A
 
 
-
-**What is the new behavior?**
+## What is the new behavior?
 
 
-
-**Does this PR introduce a breaking change?** (check one with "x")
+## Does this PR introduce a breaking change?
 ```
 [ ] Yes
 [ ] No
 ```
 
-If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...
+<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
 
 
-**Other information**:
-
+## Other information
diff --git a/.gitignore b/.gitignore
index 6899818c96..fc1c7b2330 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,8 @@
 .DS_STORE
 
 /dist/
+bazel-*
+e2e_test.*
 node_modules
 bower_components
 
diff --git a/.pullapprove.yml b/.pullapprove.yml
index 9a14cbbc35..9c9be7ca20 100644
--- a/.pullapprove.yml
+++ b/.pullapprove.yml
@@ -8,9 +8,11 @@
 # alexeagle - Alex Eagle
 # alxhub - Alex Rickabaugh
 # chuckjaz - Chuck Jazdzewski
+# Foxandxss - Jesús Rodríguez
 # gkalpak - George Kalpakas
 # IgorMinar - Igor Minar
 # jasonaden - Jason Aden
+# juleskremer - Jules Kremer
 # kara - Kara Erickson
 # matsko - Matias Niemelä
 # mhevery - Misko Hevery
@@ -18,10 +20,11 @@
 # pkozlowski-opensource - Pawel Kozlowski
 # robwormald - Rob Wormald
 # tbosch - Tobias Bosch
+# tinayuangao - Tina Gao
 # vicb - Victor Berchet
 # vikerman - Vikram Subramanian
 # wardbell - Ward Bell
-# tinayuangao - Tina Gao
+
 
 version: 2
 
@@ -66,8 +69,8 @@ groups:
           - "*.lock"
           - "tools/*"
         exclude:
-          - "tools/@angular/tsc-wrapped/*"
           - "tools/public_api_guard/*"
+          - "tools/ngc-wrapped/*"
           - "aio/*"
     users:
       - IgorMinar #primary
@@ -93,19 +96,21 @@ groups:
         - "packages/core/*"
     users:
       - tbosch #primary
+      - chuckjaz
       - mhevery
       - vicb
       - IgorMinar #fallback
 
-  compiler/animations:
+  animations:
     conditions:
       files:
-        - "packages/compiler/src/animation/*"
+        - "packages/animation/*"
+        - "packages/platform-browser/animations/*"
     users:
       - matsko #primary
-      - tbosch
-      - IgorMinar #fallback
+      - chuckjaz #fallback
       - mhevery #fallback
+      - IgorMinar #fallback
 
   compiler/i18n:
     conditions:
@@ -131,11 +136,13 @@ groups:
   compiler-cli:
     conditions:
       files:
-        - "tools/@angular/tsc-wrapped/*"
+        - "packages/tsc-wrapped/*"
         - "packages/compiler-cli/*"
+        - "tools/ngc-wrapped/*"
     users:
       - alexeagle
       - chuckjaz
+      - vicb
       - tbosch
       - IgorMinar #fallback
       - mhevery #fallback
@@ -248,10 +255,46 @@ groups:
   angular.io:
     conditions:
       files:
-        - "aio/*"
+        include:
+          - "aio/*"
+        exclude:
+          - "aio/content/*"
     users:
-      - IgorMinar #primary
-      - petebacondarwin #secondary
+      - petebacondarwin #primary
+      - IgorMinar
       - gkalpak
-      - wardbell
+      - mhevery #fallback
+
+  angular.io-guide-and-tutorial:
+    conditions:
+      files:
+        include:
+          - "aio/content/*"
+        exclude:
+          - "aio/content/marketing/*"
+          - "aio/content/navigation.json"
+          - "aio/content/license.md"
+    users:
+      - juleskremer #primary
+      - Foxandxss
+      - stephenfluin
+      - wardbell
+      - petebacondarwin
+      - gkalpak
+      - IgorMinar #fallback
+      - mhevery #fallback
+
+  angular.io-marketing:
+    conditions:
+      files:
+        include:
+          - "aio/content/marketing/*"
+          - "aio/content/navigation.json"
+          - "aio/content/license.md"
+    users:
+      - juleskremer #primary
+      - stephenfluin
+      - petebacondarwin
+      - gkalpak
+      - IgorMinar #fallback
       - mhevery #fallback
diff --git a/.travis.yml b/.travis.yml
index 82afb15d56..d574adc770 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,9 +1,12 @@
 language: node_js
 sudo: false
+# force trusty as Google Chrome addon is not supported on Precise
+dist: trusty
 node_js:
   - '6.9.5'
 
 addons:
+  chrome: stable
 #  firefox: "38.0"
   apt:
     sources:
@@ -32,11 +35,15 @@ env:
   global:
     # GITHUB_TOKEN_ANGULAR=<github token, a personal access token of the angular-builds account, account access in valentine>
     # This is needed for the e2e Travis matrix task to publish packages to github for continuous packages delivery.
-    - secure: "rNqXoy2gqjbF5tBXlRBy+oiYntO3BtzcxZuEtlLMzNaTNzC4dyMOFub0GkzIPWwOzkARoEU9Kv+bC97fDVbCBUKeyzzEqxqddUKhzRxeaYjsefJ6XeTvBvDxwo7wDwyxZSuWdBeGAe4eARVHm7ypsd+AlvqxtzjyS27TK2BzdL4="
+    - secure: "aCdHveZuY8AT4Jr1JoJB4LxZsnGWRe/KseZh1YXYe5UtufFCtTVHvUcLn0j2aLBF0KpdyS+hWf0i4np9jthKu2xPKriefoPgCMpisYeC0MFkwbmv+XlgkUbgkgVZMGiVyX7DCYXVahxIoOUjVMEDCbNiHTIrfEuyq24U3ok2tHc="
     # FIREBASE_TOKEN
-    # This is needed for publishing builds to the "aio-staging" firebase site.
-    # TODO(i): the token was generated using the iminar@google account, we should switch to a shared/role-base account.
-    - secure: "MPx3UM77o5IlhT75PKHL0FXoB5tSXDc3vnCXCd1sRy4XUTZ9vjcV6nNuyqEf+SOw659bGbC1FI4mACGx1Q+z7MQDR85b1mcA9uSgHDkh+IR82CnCVdaX9d1RXafdJIArahxfmorbiiPPLyPIKggo7ituRm+2c+iraoCkE/pXxYg="
+    # This is needed for publishing builds to the "aio-staging" and "angular-io" firebase projects.
+    # This token was generated using the aio-deploy@angular.io account using `firebase login:ci` and password from valentine
+    - secure: "L5CyQmpwWtoR4Qi4xlWQh/cL1M6ZeJL4W4QAr4HdKFMgYt9h+Whqkymyh2NxwmCbPvWa7yUd+OiLQUDCY7L2VIg16hTwoe2CgYDyQA0BEwLzxtRrJXl93TfwMlrUx5JSIzAccD6D4sjtz8kSFMomK2Nls33xOXOukwyhVMjd0Cg="
+    # ANGULAR_PAYLOAD_FIREBASE_TOKEN
+    # This is for payload size data to "angular-payload-size" firebase project
+    # This token was generated using the payload@angular.io account using `firebase login:ci` and password from valentine
+    - secure: "SxotP/ymNy6uWAVbfwM9BlwETPEBpkRvU/F7fCtQDDic99WfQHzzUSQqHTk8eKk3GrGAOSL09vT0WfStQYEIGEoS5UHWNgOnelxhw+d5EnaoB8vQ0dKQBTK092hQg4feFprr+B/tCasyMV6mVwpUzZMbIJNn/Rx7H5g1bp+Gkfg="
   matrix:
     # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
     - CI_MODE=e2e
@@ -48,6 +55,9 @@ env:
     - CI_MODE=browserstack_optional
     - CI_MODE=docs_test
     - CI_MODE=aio
+    - CI_MODE=aio_e2e AIO_SHARD=0
+    - CI_MODE=aio_e2e AIO_SHARD=1
+    - CI_MODE=bazel
 
 matrix:
   fast_finish: true
diff --git a/BUILD.bazel b/BUILD.bazel
new file mode 100644
index 0000000000..3ad279d7aa
--- /dev/null
+++ b/BUILD.bazel
@@ -0,0 +1,25 @@
+package(default_visibility = ["//visibility:public"])
+exports_files(["tsconfig.json"])
+
+# This rule belongs in node_modules/BUILD
+# It's here as a workaround for
+# https://github.com/bazelbuild/bazel/issues/374#issuecomment-296217940
+filegroup(
+    name = "node_modules",
+    srcs = glob([
+        # Performance workaround: list individual files
+        # This won't scale in the general case.
+        # TODO(alexeagle): figure out what to do
+        "node_modules/typescript/**",
+        "node_modules/zone.js/**",
+        "node_modules/rxjs/**/*.d.ts",
+        "node_modules/rxjs/**/*.js",
+        "node_modules/@types/**/*.d.ts",
+        "node_modules/tsickle/**",
+        "node_modules/hammerjs/**/*.d.ts",
+        "node_modules/protobufjs/**",
+        "node_modules/bytebuffer/**",
+        "node_modules/reflect-metadata/**",
+        "node_modules/minimist/**/*.js",
+    ]),
+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2319b6adea..5c0e3ab0a3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,572 @@
+<a name="5.0.0-beta.1"></a>
+# [5.0.0-beta.1](https://github.com/angular/angular/compare/5.0.0-beta.0...5.0.0-beta.1) (2017-07-27)
+
+
+### Bug Fixes
+
+* **animations:** export BrowserModule as apart of BrowserAnimationsModule ([#18263](https://github.com/angular/angular/issues/18263)) ([fd0cc01](https://github.com/angular/angular/commit/fd0cc01))
+* **compiler:** add equiv & disp attributes to Xliff2 ICU placeholders ([#18283](https://github.com/angular/angular/issues/18283)) ([38ec05f](https://github.com/angular/angular/commit/38ec05f)), closes [#17344](https://github.com/angular/angular/issues/17344)
+* **compiler:** allow numbers for ICU message cases in lexer ([#18095](https://github.com/angular/angular/issues/18095)) ([a3a5429](https://github.com/angular/angular/commit/a3a5429)), closes [#17799](https://github.com/angular/angular/issues/17799)
+* **core:** invoke error handler outside of the Angular Zone ([#18269](https://github.com/angular/angular/issues/18269)) ([7ae7573](https://github.com/angular/angular/commit/7ae7573)), closes [#17073](https://github.com/angular/angular/issues/17073) [#7774](https://github.com/angular/angular/issues/7774)
+* **platform-server:** don't clobber parse5 properties when setting ([#18237](https://github.com/angular/angular/issues/18237)) ([a094769](https://github.com/angular/angular/commit/a094769)), closes [#17050](https://github.com/angular/angular/issues/17050)
+* **router:** child CanActivate guard should wait for parent to complete ([#18110](https://github.com/angular/angular/issues/18110)) ([086f4aa](https://github.com/angular/angular/commit/086f4aa)), closes [#15670](https://github.com/angular/angular/issues/15670)
+* **router:** should throw when lazy loaded module doesn't define any routes ([#15001](https://github.com/angular/angular/issues/15001)) ([82923a3](https://github.com/angular/angular/commit/82923a3)), closes [#14596](https://github.com/angular/angular/issues/14596)
+* **upgrade:** ensure downgraded components are created in the Angular zone ([#18209](https://github.com/angular/angular/issues/18209)) ([43c33d5](https://github.com/angular/angular/commit/43c33d5))
+* **upgrade:** throw error if trying to get injector before setting ([#18209](https://github.com/angular/angular/issues/18209)) ([d31dc7b](https://github.com/angular/angular/commit/d31dc7b))
+
+
+### Features
+
+* **compiler:** add representation of placeholders to xliff & xmb ([b3085e9](https://github.com/angular/angular/commit/b3085e9)), closes [#17345](https://github.com/angular/angular/issues/17345)
+
+
+### Performance Improvements
+
+* latest tsickle to tree shake: abstract class methods & interfaces ([#18236](https://github.com/angular/angular/issues/18236)) ([b7a6f52](https://github.com/angular/angular/commit/b7a6f52))
+* **core:** use native addEventListener for faster rendering. ([#18107](https://github.com/angular/angular/issues/18107)) ([6279e50](https://github.com/angular/angular/commit/6279e50))
+
+
+
+<a name="4.3.2"></a>
+## [4.3.2](https://github.com/angular/angular/compare/4.3.1...4.3.2) (2017-07-26)
+
+
+### Bug Fixes
+
+* **animations:** export BrowserModule as apart of BrowserAnimationsModule ([#18263](https://github.com/angular/angular/issues/18263)) ([cbeb197](https://github.com/angular/angular/commit/cbeb197))
+* **compiler:** add equiv & disp attributes to Xliff2 ICU placeholders ([#18283](https://github.com/angular/angular/issues/18283)) ([a084619](https://github.com/angular/angular/commit/a084619)), closes [#17344](https://github.com/angular/angular/issues/17344)
+* **compiler:** allow numbers for ICU message cases in lexer ([#18095](https://github.com/angular/angular/issues/18095)) ([a8ac77b](https://github.com/angular/angular/commit/a8ac77b)), closes [#17799](https://github.com/angular/angular/issues/17799)
+* **core:** invoke error handler outside of the Angular Zone ([#18269](https://github.com/angular/angular/issues/18269)) ([a1bb9c2](https://github.com/angular/angular/commit/a1bb9c2)), closes [#17073](https://github.com/angular/angular/issues/17073) [#7774](https://github.com/angular/angular/issues/7774)
+* **platform-server:** don't clobber parse5 properties when setting ([#18237](https://github.com/angular/angular/issues/18237)) ([97135e8](https://github.com/angular/angular/commit/97135e8)), closes [#17050](https://github.com/angular/angular/issues/17050)
+* **router:** child CanActivate guard should wait for parent to complete ([#18110](https://github.com/angular/angular/issues/18110)) ([b9e32c8](https://github.com/angular/angular/commit/b9e32c8)), closes [#15670](https://github.com/angular/angular/issues/15670)
+* **router:** should throw when lazy loaded module doesn't define any routes ([#15001](https://github.com/angular/angular/issues/15001)) ([be49e0e](https://github.com/angular/angular/commit/be49e0e)), closes [#14596](https://github.com/angular/angular/issues/14596)
+* **upgrade:** throw error if trying to get injector before setting ([#18209](https://github.com/angular/angular/issues/18209)) ([1f106d7](https://github.com/angular/angular/commit/1f106d7))
+
+
+
+<a name="5.0.0-beta.0"></a>
+# [5.0.0-beta.0](https://github.com/angular/angular/compare/4.3.0...5.0.0-beta.0) (2017-07-19)
+
+
+### Bug Fixes
+
+* **animations:** always camelcase style property names that contain auto styles ([d22f8f5](https://github.com/angular/angular/commit/d22f8f5)), closes [#17938](https://github.com/angular/angular/issues/17938)
+* **animations:** capture cancelled animation styles within grouped animations ([23146c9](https://github.com/angular/angular/commit/23146c9)), closes [#17170](https://github.com/angular/angular/issues/17170)
+* **animations:** do not crash animations if a nested component fires CD during CD ([5db6f38](https://github.com/angular/angular/commit/5db6f38)), closes [#18193](https://github.com/angular/angular/issues/18193)
+* **animations:** make sure @.disabled works in non-animation components ([5344be5](https://github.com/angular/angular/commit/5344be5))
+* **common:** send flushed body as error instead of null ([5c62e30](https://github.com/angular/angular/commit/5c62e30)), closes [#18181](https://github.com/angular/angular/issues/18181)
+* **compiler:** ensure jit external id arguments names are unique ([95635c1](https://github.com/angular/angular/commit/95635c1))
+* **compiler-cli:** don't generate empty <target/> when extracting xliff ([65c9e13](https://github.com/angular/angular/commit/65c9e13)), closes [#15754](https://github.com/angular/angular/issues/15754)
+* **platform-server:** provide XhrFactory for HttpClient ([8076482](https://github.com/angular/angular/commit/8076482))
+* **router:** canDeactivate guards should run from bottom to top ([e20cfe1](https://github.com/angular/angular/commit/e20cfe1)), closes [#15657](https://github.com/angular/angular/issues/15657)
+* **router:** should navigate to the same url when config changes ([eb6fb5f](https://github.com/angular/angular/commit/eb6fb5f)), closes [#15535](https://github.com/angular/angular/issues/15535)
+* **router:** should run resolvers for the same route concurrently ([ad3029e](https://github.com/angular/angular/commit/ad3029e)), closes [#14279](https://github.com/angular/angular/issues/14279)
+* **router:** terminal route in custom matcher ([b399cb2](https://github.com/angular/angular/commit/b399cb2))
+* **upgrade:** allow accessing AngularJS injector from downgraded module ([a5205c6](https://github.com/angular/angular/commit/a5205c6))
+
+
+### Features
+
+* **animations:** support :increment and :decrement transition aliases ([6f45519](https://github.com/angular/angular/commit/6f45519))
+* **upgrade:** propagate touched state of NgModelController ([59c23c7](https://github.com/angular/angular/commit/59c23c7))
+* **upgrade:** support lazy-loading Angular module into AngularJS app ([30e76fc](https://github.com/angular/angular/commit/30e76fc))
+
+
+
+<a name="4.3.1"></a>
+## [4.3.1](https://github.com/angular/angular/compare/4.3.0...4.3.1) (2017-07-19)
+
+
+### Bug Fixes
+
+* **animations:** always camelcase style property names that contain auto styles ([383d896](https://github.com/angular/angular/commit/383d896)), closes [#17938](https://github.com/angular/angular/issues/17938)
+* **animations:** capture cancelled animation styles within grouped animations ([333ffd8](https://github.com/angular/angular/commit/333ffd8)), closes [#17170](https://github.com/angular/angular/issues/17170)
+* **animations:** do not crash animations if a nested component fires CD during CD ([4c1f32b](https://github.com/angular/angular/commit/4c1f32b)), closes [#18193](https://github.com/angular/angular/issues/18193)
+* **animations:** make sure @.disabled works in non-animation components ([a5c4bb5](https://github.com/angular/angular/commit/a5c4bb5))
+* **common:** send flushed body as error instead of null ([17b7bc3](https://github.com/angular/angular/commit/17b7bc3)), closes [#18181](https://github.com/angular/angular/issues/18181)
+* **compiler:** ensure jit external id arguments names are unique ([4671168](https://github.com/angular/angular/commit/4671168))
+* **compiler-cli:** don't generate empty `<target/>` when extracting xliff ([f0476fc](https://github.com/angular/angular/commit/f0476fc)), closes [#15754](https://github.com/angular/angular/issues/15754)
+* **platform-server:** provide XhrFactory for HttpClient ([4ce29f3](https://github.com/angular/angular/commit/4ce29f3))
+* **router:** canDeactivate guards should run from bottom to top ([1ac78bf](https://github.com/angular/angular/commit/1ac78bf)), closes [#15657](https://github.com/angular/angular/issues/15657)
+* **router:** should navigate to the same url when config changes ([4340bea](https://github.com/angular/angular/commit/4340bea)), closes [#15535](https://github.com/angular/angular/issues/15535)
+* **router:** should run resolvers for the same route concurrently ([ec89f37](https://github.com/angular/angular/commit/ec89f37)), closes [#14279](https://github.com/angular/angular/issues/14279)
+* **router:** terminal route in custom matcher ([5d275e9](https://github.com/angular/angular/commit/5d275e9))
+
+
+
+<a name="4.3.0"></a>
+# [4.3.0](https://github.com/angular/angular/compare/4.3.0-rc.0...4.3.0) (2017-07-14)
+
+
+### Bug Fixes
+
+* **animations:** do not delay style() values before a stagger() runs ([34f3832](https://github.com/angular/angular/commit/34f3832)), closes [#17412](https://github.com/angular/angular/issues/17412)
+* **animations:** do not remove container nodes when children are queried by a parent animation ([d699c35](https://github.com/angular/angular/commit/d699c35)), closes [#17746](https://github.com/angular/angular/issues/17746)
+* **animations:** do not validate style overlap errors in different transitions ([f2ee1dc](https://github.com/angular/angular/commit/f2ee1dc))
+* **animations:** properly collect :enter nodes that exist within multi-level DOM trees ([40f77cb](https://github.com/angular/angular/commit/40f77cb)), closes [#17632](https://github.com/angular/angular/issues/17632)
+* **animations:** compute removal node height correctly ([185075d](https://github.com/angular/angular/commit/185075d))
+* **animations:** do not treat a `0` animation state as `void` ([451257a](https://github.com/angular/angular/commit/451257a))
+* **animations:** properly collect :enter nodes in a partially updated collection ([6ca4692](https://github.com/angular/angular/commit/6ca4692)), closes [#17440](https://github.com/angular/angular/issues/17440)
+* **animations:** remove duplicate license header ([e096a85](https://github.com/angular/angular/commit/e096a85))
+* **common/http:** document HttpClient, fixing a few other issues ([1855989](https://github.com/angular/angular/commit/1855989))
+* **common/http:** don't guess Content-Type for FormData bodies ([#18104](https://github.com/angular/angular/issues/18104)) ([4f1e4ff](https://github.com/angular/angular/commit/4f1e4ff)), closes [#18096](https://github.com/angular/angular/issues/18096)
+* **common/http:** expose reportProgress option on HttpClient API ([#18083](https://github.com/angular/angular/issues/18083)) ([9f28e83](https://github.com/angular/angular/commit/9f28e83))
+* **common/http:** rename HttpXsrfModule to HttpClientXsrfModule ([3ecc5e5](https://github.com/angular/angular/commit/3ecc5e5))
+* **compiler:** avoid emitting self importing factories ([4352dd2](https://github.com/angular/angular/commit/4352dd2))
+* **compiler-cli:** find lazy routes in nested module import arrays ([8c89cc4](https://github.com/angular/angular/commit/8c89cc4))
+* **core:** add needed closure compiler warning suppression ([e80851d](https://github.com/angular/angular/commit/e80851d))
+* **core:** argument destructuring sometimes breaks strictNullChecks ([c59c390](https://github.com/angular/angular/commit/c59c390))
+* **language-service:** infer `any` `ngForOf` of type `any` ([f194f18](https://github.com/angular/angular/commit/f194f18))
+* **language-service:** rollup `tslib` into the language service package ([4e6be15](https://github.com/angular/angular/commit/4e6be15))
+* **router:** fix outdated homepage url in NPM package ([#17899](https://github.com/angular/angular/issues/17899)) ([df06e8b](https://github.com/angular/angular/commit/df06e8b))
+* **router:** update the version placeholder so that it gets replaced during the build ([d3c92a3](https://github.com/angular/angular/commit/d3c92a3)), closes [#17403](https://github.com/angular/angular/issues/17403)
+* **tsc-wrapped:** report errors for invalid ast forms ([#17994](https://github.com/angular/angular/issues/17994)) ([ce0f4f0](https://github.com/angular/angular/commit/ce0f4f0))
+* **tsc-wrapped:** support as and class expressions ([#16904](https://github.com/angular/angular/issues/16904)) ([45ffe54](https://github.com/angular/angular/commit/45ffe54))
+* **tsc-wrapped:** skip collecting metadata for default functions ([46ddf50](https://github.com/angular/angular/commit/46ddf50))
+* **upgrade:** bring the dynamic version closer to the static one ([11db3bd](https://github.com/angular/angular/commit/11db3bd)), closes [#16627](https://github.com/angular/angular/issues/16627) [#11044](https://github.com/angular/angular/issues/11044)
+
+
+
+### Features
+
+* **animations:** support disabling animations for sub elements ([8e28382](https://github.com/angular/angular/commit/8e28382)), closes [#16483](https://github.com/angular/angular/issues/16483)
+* **common/http:** new HttpClient API ([37797e2](https://github.com/angular/angular/commit/37797e2))
+* **common/http:** on-by-default XSRF support in HttpClient ([#18108](https://github.com/angular/angular/issues/18108)) ([dd04f09](https://github.com/angular/angular/commit/dd04f09)), closes [#18100](https://github.com/angular/angular/issues/18100)
+* **compiler:** adds support for quoted object keys in the parser ([798947e](https://github.com/angular/angular/commit/798947e))
+* **compiler:** do not evaluate metadata expressions that can use references ([#18001](https://github.com/angular/angular/issues/18001)) ([ddb766e](https://github.com/angular/angular/commit/ddb766e))
+* **compiler:** update the schema by extracting from latest chrome ([#17858](https://github.com/angular/angular/issues/17858)) ([dd7c113](https://github.com/angular/angular/commit/dd7c113))
+* **compiler:** add support `::ng-deep` ([b754e60](https://github.com/angular/angular/commit/b754e60))
+* **compiler-cli:** add parameters to ngc main needed by bazel rules ([#17885](https://github.com/angular/angular/issues/17885)) ([c1474f3](https://github.com/angular/angular/commit/c1474f3))
+* **compiler-cli:** new compiler api and command-line using TypeScript transformers ([3097083](https://github.com/angular/angular/commit/3097083))
+* **core:** update zone.js to 0.8.12 ([5ac3919](https://github.com/angular/angular/commit/5ac3919))
+* **router:** add router-level events for GuardsCheck and Resolve ([#17601](https://github.com/angular/angular/issues/17601)) ([8a1a989](https://github.com/angular/angular/commit/8a1a989))
+* **upgrade:** fix support for `directive.link` in upgraded components ([0193be7](https://github.com/angular/angular/commit/0193be7))
+
+
+
+
+<a name="4.2.6"></a>
+## [4.2.6](https://github.com/angular/angular/compare/4.2.5...4.2.6) (2017-07-08)
+
+
+### Bug Fixes
+
+* **animations:** ensure `:animating` queries collect previous animation elements properly ([d48b7d3](https://github.com/angular/angular/commit/d48b7d3))
+* **animations:** properly cleanup query artificats when animation construction fails ([00de9ff](https://github.com/angular/angular/commit/00de9ff))
+* **animations:** properly detect state transition changes for object literals ([00c9741](https://github.com/angular/angular/commit/00c9741))
+* **animations:** properly handle cancelled animation style application ([cf57527](https://github.com/angular/angular/commit/cf57527))
+* **compiler:** emits quoted keys only if they are quoted in the original template ([45ae14c](https://github.com/angular/angular/commit/45ae14c)), closes [#14292](https://github.com/angular/angular/issues/14292)
+* **compiler:** fix merge error ([6307581](https://github.com/angular/angular/commit/6307581))
+* **compiler:** fix types ([5ea9b62](https://github.com/angular/angular/commit/5ea9b62))
+* **compiler:** remove i18n markup even if no translations ([#17999](https://github.com/angular/angular/issues/17999)) ([2763577](https://github.com/angular/angular/commit/2763577)), closes [#11042](https://github.com/angular/angular/issues/11042)
+* **compiler-cli:** fix relative source paths on windows for extracted msg ([#17915](https://github.com/angular/angular/issues/17915)) ([991f8ad](https://github.com/angular/angular/commit/991f8ad)), closes [#16639](https://github.com/angular/angular/issues/16639)
+* **core:** fix re-insertions in the iterable differ ([#17891](https://github.com/angular/angular/issues/17891)) ([a318093](https://github.com/angular/angular/commit/a318093)), closes [#17852](https://github.com/angular/angular/issues/17852)
+* **language-service:** do not crash when hovering over a label definitions ([#17974](https://github.com/angular/angular/issues/17974)) ([2ab9057](https://github.com/angular/angular/commit/2ab9057))
+* **language-service:** ignore hover of symbols not in the TypeScript program ([#17969](https://github.com/angular/angular/issues/17969)) ([fe09e10](https://github.com/angular/angular/commit/fe09e10))
+* **router:** encode URLs the same way AngularJS did (closer to spec) ([#17890](https://github.com/angular/angular/issues/17890)) ([8f7cce3](https://github.com/angular/angular/commit/8f7cce3)), closes [#16067](https://github.com/angular/angular/issues/16067)
+* **router:** export missing UrlMatcher and UrlMatchResult types ([12a2099](https://github.com/angular/angular/commit/12a2099)), closes [#15140](https://github.com/angular/angular/issues/15140)
+* **tsc-wrapped:** emit exports metadata in flat modules ([#17893](https://github.com/angular/angular/issues/17893)) ([ee7d134](https://github.com/angular/angular/commit/ee7d134))
+* **upgrade:** fix transclusion on upgraded components ([#17971](https://github.com/angular/angular/issues/17971)) ([5337874](https://github.com/angular/angular/commit/5337874)), closes [#13271](https://github.com/angular/angular/issues/13271)
+* **upgrade:** fix transclusion on upgraded components ([#17971](https://github.com/angular/angular/issues/17971)) ([30beb52](https://github.com/angular/angular/commit/30beb52)), closes [#13271](https://github.com/angular/angular/issues/13271)
+
+
+### Performance Improvements
+
+* **core:** refactor NgZone, decrease size by 1.2Kb ([#17773](https://github.com/angular/angular/issues/17773)) ([6d55a80](https://github.com/angular/angular/commit/6d55a80))
+
+
+
+<a name="4.2.5"></a>
+## [4.2.5](https://github.com/angular/angular/compare/4.2.4...4.2.5) (2017-06-29)
+
+
+### Bug Fixes
+
+* **animations:** do not delay style() values before a stagger() runs ([7559b78](https://github.com/angular/angular/commit/7559b78)), closes [#17412](https://github.com/angular/angular/issues/17412)
+* **animations:** do not remove container nodes when children are queried by a parent animation ([ec4ae60](https://github.com/angular/angular/commit/ec4ae60)), closes [#17746](https://github.com/angular/angular/issues/17746)
+* **animations:** do not validate style overlap errors in different transitions ([6909171](https://github.com/angular/angular/commit/6909171))
+* **animations:** properly collect :enter nodes that exist within multi-level DOM trees ([79b6346](https://github.com/angular/angular/commit/79b6346)), closes [#17632](https://github.com/angular/angular/issues/17632)
+* **core:** add needed closure compiler warning suppression ([f31b0d6](https://github.com/angular/angular/commit/f31b0d6))
+
+
+
+<a name="4.2.4"></a>
+## [4.2.4](https://github.com/angular/angular/compare/4.2.3...4.2.4) (2017-06-21)
+
+
+### Bug Fixes
+
+* **compiler:** avoid emitting self importing factories ([c112232](https://github.com/angular/angular/commit/c112232))
+* **compiler-cli:** find lazy routes in nested module import arrays ([59299de](https://github.com/angular/angular/commit/59299de))
+* **core**: argument destructuring sometimes breaks strictNullChecks ([77860a0](https://github.com/angular/angular/commit/77860a0))
+* **forms:** roll back breaking change with min/max directives ([4ab7353](https://github.com/angular/angular/commit/4ab7353)), closes [#17491](https://github.com/angular/angular/issues/17491)
+* **language-service:** infer `any` `ngForOf` of type `any` ([63a5f33](https://github.com/angular/angular/commit/63a5f33))
+* **language-service:** rollup `tslib` into the language service package ([20eb5cf](https://github.com/angular/angular/commit/20eb5cf))
+* **router:** update the version placeholder so that it gets replaced during the build ([7de1ae2](https://github.com/angular/angular/commit/7de1ae2)), closes [#17403](https://github.com/angular/angular/issues/17403)
+* **tsc-wrapped:** skip collecting metadata for default functions ([3390648](https://github.com/angular/angular/commit/3390648))
+
+
+
+<a name="4.2.3"></a>
+## [4.2.3](https://github.com/angular/angular/compare/4.2.1...4.2.3) (2017-06-16)
+
+
+### Bug Fixes
+
+* **animations:** compute removal node height correctly ([185075d](https://github.com/angular/angular/commit/185075d))
+* **animations:** do not treat a `0` animation state as `void` ([451257a](https://github.com/angular/angular/commit/451257a))
+* **animations:** properly collect :enter nodes in a partially updated collection ([6ca4692](https://github.com/angular/angular/commit/6ca4692)), closes [#17440](https://github.com/angular/angular/issues/17440)
+* **animations:** remove duplicate license header ([b192dd5](https://github.com/angular/angular/commit/b192dd5))
+* **forms:** temp roll back breaking change with min/max directives ([b8c39cd](https://github.com/angular/angular/commit/b8c39cd)), closes [#17491](https://github.com/angular/angular/issues/17491)
+
+
+
+<a name="4.2.2"></a>
+## [4.2.2](https://github.com/angular/angular/compare/4.2.1...4.2.2) (2017-06-12)
+
+
+### Bug Fixes
+
+* **animations:** compute removal node height correctly ([185075d](https://github.com/angular/angular/commit/185075d))
+* **animations:** do not treat a `0` animation state as `void` ([451257a](https://github.com/angular/angular/commit/451257a))
+* **animations:** properly collect :enter nodes in a partially updated collection ([6ca4692](https://github.com/angular/angular/commit/6ca4692)), closes [#17440](https://github.com/angular/angular/issues/17440)
+* **compiler:** don’t always compile `.ngfactory.ts` files by default ([ed73d4f](https://github.com/angular/angular/commit/ed73d4f3ac6b542bf5ea3eb73fbe91e2ceabcdb4))
+
+
+
+<a name="4.2.1"></a>
+## [4.2.1](https://github.com/angular/angular/compare/4.2.0-rc.2...4.2.1) (2017-06-09)
+
+
+### Bug Fixes
+
+
+* **compiler:** don’t write summaries for jit by default ([d3a5f1a](https://github.com/angular/angular/commit/d3a5f1a))
+* **http:** move destructuring inside {Request,Response}Options ctor ([c2d31fb](https://github.com/angular/angular/commit/c2d31fb)), closes [#16663](https://github.com/angular/angular/issues/16663)
+
+
+
+<a name="4.2.0"></a>
+# [4.2.0](https://github.com/angular/angular/compare/4.2.0-rc.2...4.2.0) salubrious-stratagem (2017-06-08)
+
+
+### Bug Fixes
+
+* **animations:** ensure web-animations understands a numeric CSS perspective value ([819514a](https://github.com/angular/angular/commit/819514a)), closes [#14007](https://github.com/angular/angular/issues/14007)
+* **animations:** evaluate substitutions on option param values ([e9886d7](https://github.com/angular/angular/commit/e9886d7))
+* **forms:** fix min and max validator behavior on non-numbers ([a222c3e](https://github.com/angular/angular/commit/a222c3e))
+* **router:** opening links in new window ([4c32cb9](https://github.com/angular/angular/commit/4c32cb9))
+* **upgrade:** call setInterval outside the Angular zone ([269bbe0](https://github.com/angular/angular/commit/269bbe0))
+
+
+### Features
+
+* **compiler-cli:** introduce synchronous codegen API ([b00b80a](https://github.com/angular/angular/commit/b00b80a))
+
+
+### Performance Improvements
+
+* **animations:** do not create a closure each time a node is removed ([fe6b39d](https://github.com/angular/angular/commit/fe6b39d))
+* **animations:** only apply `:leave` flags if animations are set to run ([b55adee](https://github.com/angular/angular/commit/b55adee))
+
+
+
+<a name="4.2.0-rc.2"></a>
+# [4.2.0-rc.2](https://github.com/angular/angular/compare/4.2.0-rc.1...4.2.0-rc.2) (2017-06-01)
+
+### Bug Fixes
+
+* **animations:** always change to desired animation state even if no transition fires ([#17025](https://github.com/angular/angular/issues/17025)) ([665e707](https://github.com/angular/angular/commit/665e707)), closes [#16947](https://github.com/angular/angular/issues/16947)
+* **animations:** do not retain deleted nodes during an non-removal animation ([#17153](https://github.com/angular/angular/issues/17153)) ([068133e](https://github.com/angular/angular/commit/068133e)), closes [#17086](https://github.com/angular/angular/issues/17086)
+* **common:** always use 'other' case for locales with no plural rules ([#16990](https://github.com/angular/angular/issues/16990)) ([535d9da](https://github.com/angular/angular/commit/535d9da))
+* **compiler:** enableLegacyTemplate should not be ignored ([#17051](https://github.com/angular/angular/issues/17051)) ([8ffa483](https://github.com/angular/angular/commit/8ffa483)), closes [#15555](https://github.com/angular/angular/issues/15555)
+* **router:** make remove trailing slash consistent with URL params ([c20f60b](https://github.com/angular/angular/commit/c20f60b)), closes [#16069](https://github.com/angular/angular/issues/16069)
+
+### Features
+
+* **compiler:** emit typescript nodes from an output ast ([#16823](https://github.com/angular/angular/issues/16823)) ([18bf772](https://github.com/angular/angular/commit/18bf772))
+* **compiler-cli:** produce template diagnostics error messages ([#17125](https://github.com/angular/angular/issues/17125)) ([230255f](https://github.com/angular/angular/commit/230255f))
+* **tsc-wrapped:** always convert shorthand imports ([#16898](https://github.com/angular/angular/issues/16898)) ([ea8a43d](https://github.com/angular/angular/commit/ea8a43d))
+
+### Performance Improvements
+
+* **animations:** do not place enterId values on elements for querying purposes ([#17150](https://github.com/angular/angular/issues/17150)) ([ad6a57e](https://github.com/angular/angular/commit/ad6a57e))
+
+<a name="4.2.0-rc.1"></a>
+# [4.2.0-rc.1](https://github.com/angular/angular/compare/4.2.0-rc.0...4.2.0-rc.1) (2017-05-26)
+
+### Bug Fixes
+
+* **animations:** repair flicker issues with WA polyfill ([#16937](https://github.com/angular/angular/issues/16937)) ([e7d9fd8](https://github.com/angular/angular/commit/e7d9fd8)), closes [#16919](https://github.com/angular/angular/issues/16919) [#16918](https://github.com/angular/angular/issues/16918)
+* **animations:** use a lightweight renderer for non-animation components ([#17003](https://github.com/angular/angular/issues/17003)) ([3ab86bd](https://github.com/angular/angular/commit/3ab86bd))
+* **compiler:** compile `.ngfactory.ts` files even if nobody references them. ([#16899](https://github.com/angular/angular/issues/16899)) ([573b861](https://github.com/angular/angular/commit/573b861)), closes [#16741](https://github.com/angular/angular/issues/16741)
+* **compiler:** do not report type errors for arguments with `@Inject` ([#16222](https://github.com/angular/angular/issues/16222)) ([27761b4](https://github.com/angular/angular/commit/27761b4)), closes [#15424](https://github.com/angular/angular/issues/15424)
+* **core:** make decorators closure safe ([#16905](https://github.com/angular/angular/issues/16905)) ([a80ac0a](https://github.com/angular/angular/commit/a80ac0a)), closes [#16889](https://github.com/angular/angular/issues/16889)
+* **tsc-wrapped:** ignore `|null` and `|undefined` when collecting types ([#16222](https://github.com/angular/angular/issues/16222)) ([1651a8f](https://github.com/angular/angular/commit/1651a8f))
+* **tsc-wrapped:** resolve short-hand literal values to locals ([#16873](https://github.com/angular/angular/issues/16873)) ([11c10b2](https://github.com/angular/angular/commit/11c10b2))
+
+
+### Features
+
+* **compiler:** add location note to extracted xliff2 files ([#16791](https://github.com/angular/angular/issues/16791)) ([08dfe91](https://github.com/angular/angular/commit/08dfe91)), closes [#16531](https://github.com/angular/angular/issues/16531)
+* **core:** update zone.js to 0.8.10 and expose the flush method ([#16860](https://github.com/angular/angular/issues/16860)) ([85d4c4b](https://github.com/angular/angular/commit/85d4c4b))
+* **tsc-wrapped:** support template literals in metadata collection ([#16880](https://github.com/angular/angular/issues/16880)) ([6e41add](https://github.com/angular/angular/commit/6e41add))
+
+
+
+<a name="4.2.0-rc.0"></a>
+# [4.2.0-rc.0](https://github.com/angular/angular/compare/4.2.0-beta.0...4.2.0-rc.0) (2017-05-19)
+
+
+### Bug Fixes
+
+* **animations:** make sure reusable animation substitutions work without default params ([#16875](https://github.com/angular/angular/issues/16875)) ([7d9f96a](https://github.com/angular/angular/commit/7d9f96a))
+* **animations:** only require one flushMicrotasks call when testing animations ([6cb93c1](https://github.com/angular/angular/commit/6cb93c1))
+* **compiler:** avoid a `...null` spread in extraction ([#16547](https://github.com/angular/angular/issues/16547)) ([e0a8376](https://github.com/angular/angular/commit/e0a8376))
+* **compiler-cli:** allow '==' to compare nullable types ([#16731](https://github.com/angular/angular/issues/16731)) ([d761059](https://github.com/angular/angular/commit/d761059))
+* **core:** detach projected views when a parent view is destroyed ([#16592](https://github.com/angular/angular/issues/16592)) ([f0f6544](https://github.com/angular/angular/commit/f0f6544)), closes [#15578](https://github.com/angular/angular/issues/15578)
+* **core:** projected views should be dirty checked when the declaring component is dirty checked. ([#16592](https://github.com/angular/angular/issues/16592)) ([fcc91d8](https://github.com/angular/angular/commit/fcc91d8)), closes [#14321](https://github.com/angular/angular/issues/14321)
+* **http:** flatten metadata for [@angular](https://github.com/angular)/http/testing ([9da6340](https://github.com/angular/angular/commit/9da6340)), closes [#15521](https://github.com/angular/angular/issues/15521)
+* **http:** honor RequestArgs.search and RequestArgs.params map type ([aef5245](https://github.com/angular/angular/commit/aef5245)), closes [#15761](https://github.com/angular/angular/issues/15761) [#16392](https://github.com/angular/angular/issues/16392)
+* **http:** introduce encodingHint for text() for better ArrayBuffer support ([7ae7a84](https://github.com/angular/angular/commit/7ae7a84)), closes [#15932](https://github.com/angular/angular/issues/15932) [#16420](https://github.com/angular/angular/issues/16420)
+* **router:** fix redirect to a URL with a param having multiple values ([#16376](https://github.com/angular/angular/issues/16376)) ([5d4b36f](https://github.com/angular/angular/commit/5d4b36f)), closes [#16310](https://github.com/angular/angular/issues/16310)
+
+
+### Features
+
+* **animations:** introduce a wave of new animation features ([16c8167](https://github.com/angular/angular/commit/16c8167))
+* **animations:** introduce routable animation support ([f1a9e3c](https://github.com/angular/angular/commit/f1a9e3c))
+* add .ngsummary.ts files to support AOT unit tests ([547c363](https://github.com/angular/angular/commit/547c363))
+* introduce `TestBed.overrideProvider` ([#16725](https://github.com/angular/angular/issues/16725)) ([39b92f7](https://github.com/angular/angular/commit/39b92f7))
+* **compiler:** support a non-null postfix assert ([#16672](https://github.com/angular/angular/issues/16672)) ([b9521b5](https://github.com/angular/angular/commit/b9521b5))
+* **core:** introduce fixture.whenRenderingDone for testing ([#16732](https://github.com/angular/angular/issues/16732)) ([38c524d](https://github.com/angular/angular/commit/38c524d))
+
+
+### Performance Improvements
+
+* **animations:** reduce size of animations bundle ([712630c](https://github.com/angular/angular/commit/712630c))
+
+
+
+<a name="4.1.3"></a>
+## [4.1.3](https://github.com/angular/angular/compare/4.1.2...4.1.3) (2017-05-17)
+
+
+### Bug Fixes
+
+* add typescript 2.3.2 typings test ([#16738](https://github.com/angular/angular/issues/16738)) ([a5bdbed](https://github.com/angular/angular/commit/a5bdbed)), closes [#16663](https://github.com/angular/angular/issues/16663)
+* **compiler-cli:** import routing module with forRoot ([#16438](https://github.com/angular/angular/issues/16438)) ([b7f8581](https://github.com/angular/angular/commit/b7f8581))
+* **platform-server:** wait for async app initializers to complete before removing server side styles ([#16712](https://github.com/angular/angular/issues/16712)) ([0a82f7d](https://github.com/angular/angular/commit/0a82f7d)), closes [#15716](https://github.com/angular/angular/issues/15716)
+* **router:** Wrap Promise-like instances in native Promises ([#16759](https://github.com/angular/angular/issues/16759)) ([883ca28](https://github.com/angular/angular/commit/883ca28))
+* **upgrade:** Prevent renaming of $inject property ([#16706](https://github.com/angular/angular/issues/16706)) ([afb7540](https://github.com/angular/angular/commit/afb7540))
+* **upgrade:** use quote to prevent ClossureCompiler obfuscating $event. ([#16724](https://github.com/angular/angular/issues/16724)) ([47df3d6](https://github.com/angular/angular/commit/47df3d6))
+
+
+
+<a name="4.2.0-beta.1"></a>
+# [4.2.0-beta.1](https://github.com/angular/angular/compare/4.2.0-beta.0...4.2.0-beta.1) (2017-05-10)
+
+
+### Features
+
+* add .ngsummary.ts files to support AOT unit tests ([547c363](https://github.com/angular/angular/commit/547c363))
+
+
+
+<a name="4.1.2"></a>
+## [4.1.2](https://github.com/angular/angular/compare/4.1.1...4.1.2) (2017-05-10)
+
+
+### Bug Fixes
+
+* **compiler:** avoid a `...null` spread in extraction ([#16547](https://github.com/angular/angular/issues/16547)) ([d0e1688](https://github.com/angular/angular/commit/d0e1688))
+* **core:** detach projected views when a parent view is destroyed ([#16592](https://github.com/angular/angular/issues/16592)) ([ee6705a](https://github.com/angular/angular/commit/ee6705a)), closes [#15578](https://github.com/angular/angular/issues/15578)
+* **core:** projected views should be dirty checked when the declaring component is dirty checked. ([#16592](https://github.com/angular/angular/issues/16592)) ([9218812](https://github.com/angular/angular/commit/9218812)), closes [#14321](https://github.com/angular/angular/issues/14321)
+* **http:** flatten metadata for [@angular](https://github.com/angular)/http/testing ([9c70a3c](https://github.com/angular/angular/commit/9c70a3c)), closes [#15521](https://github.com/angular/angular/issues/15521)
+* **http:** honor RequestArgs.search and RequestArgs.params map type ([63066f7](https://github.com/angular/angular/commit/63066f7)), closes [#15761](https://github.com/angular/angular/issues/15761) [#16392](https://github.com/angular/angular/issues/16392)
+* **http:** introduce encodingHint for text() for better ArrayBuffer support ([ec3b6e9](https://github.com/angular/angular/commit/ec3b6e9)), closes [#15932](https://github.com/angular/angular/issues/15932) [#16420](https://github.com/angular/angular/issues/16420)
+* **router:** fix redirect to a URL with a param having multiple values ([#16376](https://github.com/angular/angular/issues/16376)) ([915eae5](https://github.com/angular/angular/commit/915eae5)), closes [#16310](https://github.com/angular/angular/issues/16310)
+
+
+
+<a name="4.2.0-beta.0"></a>
+# [4.2.0-beta.0](https://github.com/angular/angular/compare/4.1.0...4.2.0-beta.0) (2017-05-04)
+
+
+### Bug Fixes
+
+* **core**: strictNullCheck support. ([#16389](https://github.com/angular/angular/issues/16389)) ([#16389](https://github.com/angular/angular/issues/16389)) ([8c09d10](https://github.com/angular/angular/commit/8c09d10)), closes [#16357](https://github.com/angular/angular/issues/16357)
+* **core:** allow directives to inject the component’s `ChangeDetectorRef`. ([#16394](https://github.com/angular/angular/issues/16394)) ([392d584](https://github.com/angular/angular/commit/392d584)), closes [#12816](https://github.com/angular/angular/issues/12816)
+* **core:** allow to detach `OnPush` components ([#16394](https://github.com/angular/angular/issues/16394)) ([aa8bba4](https://github.com/angular/angular/commit/aa8bba4)), closes [#9720](https://github.com/angular/angular/issues/9720)
+* **core:** don’t set `ng-version` for dynamically created components ([#16394](https://github.com/angular/angular/issues/16394)) ([a4de214](https://github.com/angular/angular/commit/a4de214)), closes [#15880](https://github.com/angular/angular/issues/15880)
+* **core:** don’t stop change detection because of errors ([e263e19](https://github.com/angular/angular/commit/e263e19)), closes [#9531](https://github.com/angular/angular/issues/9531) [#2413](https://github.com/angular/angular/issues/2413) [#15925](https://github.com/angular/angular/issues/15925)
+* **language-service:** remove asserts for non-null expressions ([#16422](https://github.com/angular/angular/issues/16422)) ([253345c](https://github.com/angular/angular/commit/253345c))
+* **upgrade:** initialize all inputs in time for `ngOnChanges()` ([b3e63c0](https://github.com/angular/angular/commit/b3e63c0)), closes [#16212](https://github.com/angular/angular/issues/16212)
+
+
+### Features
+
+* **compiler-cli:** add param to set MissingTranslationStrategy on ngc ([#15987](https://github.com/angular/angular/issues/15987)) ([6e2abcd](https://github.com/angular/angular/commit/6e2abcd)), closes [#15808](https://github.com/angular/angular/issues/15808)
+* **core:** add `begin` and `end` renderer methods to track change detection ([7f9c589](https://github.com/angular/angular/commit/7f9c589))
+* **core:** allow custom selector when bootstrapping components ([#15668](https://github.com/angular/angular/issues/15668)) ([900a88b](https://github.com/angular/angular/commit/900a88b)), closes [#7136](https://github.com/angular/angular/issues/7136)
+* **core:** upgrade dep on zone.js to 0.8.9 ([#16401](https://github.com/angular/angular/issues/16401)) ([065b76d](https://github.com/angular/angular/commit/065b76d))
+* **forms:** introduce min and max validators ([#15813](https://github.com/angular/angular/issues/15813)) ([81925fa](https://github.com/angular/angular/commit/81925fa))
+* **language-service:** provide external file list to TypeScript ([#16417](https://github.com/angular/angular/issues/16417)) ([f4b771a](https://github.com/angular/angular/commit/f4b771a))
+
+
+
+<a name="4.1.1"></a>
+## [4.1.1](https://github.com/angular/angular/compare/4.1.0...4.1.1) (2017-05-04)
+
+
+### Bug Fixes
+
+* **core**: strictNullCheck support. ([#16389](https://github.com/angular/angular/issues/16389)) ([#16389](https://github.com/angular/angular/issues/16389)) ([427d63a](https://github.com/angular/angular/commit/427d63a)), closes [#16357](https://github.com/angular/angular/issues/16357)
+* **core:** allow directives to inject the component’s `ChangeDetectorRef`. ([#16394](https://github.com/angular/angular/issues/16394)) ([f66e59e](https://github.com/angular/angular/commit/f66e59e)), closes [#12816](https://github.com/angular/angular/issues/12816)
+* **core:** allow to detach `OnPush` components ([#16394](https://github.com/angular/angular/issues/16394)) ([acf83b9](https://github.com/angular/angular/commit/acf83b9)), closes [#9720](https://github.com/angular/angular/issues/9720)
+* **core:** don’t set `ng-version` for dynamically created components ([#16394](https://github.com/angular/angular/issues/16394)) ([85a1b54](https://github.com/angular/angular/commit/85a1b54)), closes [#15880](https://github.com/angular/angular/issues/15880)
+* **core:** don’t stop change detection because of errors ([07cef36](https://github.com/angular/angular/commit/07cef36)), closes [#9531](https://github.com/angular/angular/issues/9531) [#2413](https://github.com/angular/angular/issues/2413) [#15925](https://github.com/angular/angular/issues/15925)
+* **language-service:** remove asserts for non-null expressions ([#16422](https://github.com/angular/angular/issues/16422)) ([c060110](https://github.com/angular/angular/commit/c060110))
+* **upgrade:** initialize all inputs in time for `ngOnChanges()` ([dd4e501](https://github.com/angular/angular/commit/dd4e501)), closes [#16212](https://github.com/angular/angular/issues/16212)
+
+
+
+<a name="4.1.0"></a>
+# [4.1.0](https://github.com/angular/angular/compare/4.1.0-rc.0...4.1.0) (2017-04-26)
+
+
+### Bug Fixes
+
+* **router:** forward the query parameters in the ng1 -> ng2 url sync ([#16249](https://github.com/angular/angular/issues/16249)) ([2f97731](https://github.com/angular/angular/commit/2f97731)), closes [#16067](https://github.com/angular/angular/issues/16067)
+* **upgrade:** use correct attribute name for upgraded component's bindings ([#16128](https://github.com/angular/angular/issues/16128)) ([d1fb066](https://github.com/angular/angular/commit/d1fb066)), closes [#8856](https://github.com/angular/angular/issues/8856)
+
+
+<a name="4.1.0-rc.0"></a>
+# [4.1.0-rc.0](https://github.com/angular/angular/compare/4.1.0-beta.0...4.1.0-rc.0) (2017-04-21)
+
+
+### Bug Fixes
+
+* **benchpress:** chrome - prevent trace buffer overflow ([2f44206](https://github.com/angular/angular/commit/2f44206))
+* **benchpress:** Update types for TypeScript nullability support ([14669f2](https://github.com/angular/angular/commit/14669f2))
+* **common:** Update types for TypeScript nullability support ([d8b73e4](https://github.com/angular/angular/commit/d8b73e4))
+* **compiler:** fix build error in xliff2 ([bd704c9](https://github.com/angular/angular/commit/bd704c9))
+* **compiler:** fix inheritance for AOT with summaries ([#15583](https://github.com/angular/angular/issues/15583)) ([8ef621a](https://github.com/angular/angular/commit/8ef621a))
+* **compiler:** ignore calls to unresolved symbols in metadata ([38a7e0d](https://github.com/angular/angular/commit/38a7e0d)), closes [#15969](https://github.com/angular/angular/issues/15969)
+* **compiler:** ignore calls to unresolved symbols in metadata ([#15970](https://github.com/angular/angular/issues/15970)) ([ce47d33](https://github.com/angular/angular/commit/ce47d33)), closes [#15969](https://github.com/angular/angular/issues/15969)
+* **compiler:** Inform user where Quoted error was thrown ([a77b126](https://github.com/angular/angular/commit/a77b126))
+* **compiler:** make I18NHtmlParser provider AoT-compliant ([#15980](https://github.com/angular/angular/issues/15980)) ([745731e](https://github.com/angular/angular/commit/745731e))
+* **compiler:** support `<ng-container>` whatever the namespace ([5b141fb](https://github.com/angular/angular/commit/5b141fb)), closes [#14257](https://github.com/angular/angular/issues/14257)
+* **compiler:** suppress another closure warning ([#16137](https://github.com/angular/angular/issues/16137)) ([11b0213](https://github.com/angular/angular/commit/11b0213))
+* **compiler:** Update types for TypeScript nullability support ([09d9f5f](https://github.com/angular/angular/commit/09d9f5f))
+* **core:** benchmarks - enable ng1 benchmark again ([bccfaa4](https://github.com/angular/angular/commit/bccfaa4))
+* **core:** distribute externs for testability API ([#16179](https://github.com/angular/angular/issues/16179)) ([da66884](https://github.com/angular/angular/commit/da66884))
+* **core:** key-value differ changes iteration ([#15968](https://github.com/angular/angular/issues/15968)) ([cb5a7ef](https://github.com/angular/angular/commit/cb5a7ef)), closes [#14997](https://github.com/angular/angular/issues/14997)
+* **forms:** Update types for TypeScript nullability support ([6649743](https://github.com/angular/angular/commit/6649743))
+* **forms:** Update types for TypeScript nullability support ([57bc245](https://github.com/angular/angular/commit/57bc245))
+* **forms:** Update types for TypeScript nullability support ([#15859](https://github.com/angular/angular/issues/15859)) ([6a2e08d](https://github.com/angular/angular/commit/6a2e08d))
+* **http:** Update types for TypeScript nullability support ([c36ec9b](https://github.com/angular/angular/commit/c36ec9b))
+* **http:** Update types for TypeScript nullability support ([ec028b8](https://github.com/angular/angular/commit/ec028b8))
+* **language-service:** avoid throwing exceptions when reporting metadata errors ([7764c5c](https://github.com/angular/angular/commit/7764c5c))
+* **language-service:** detect when there isn't a tsconfig.json ([258d539](https://github.com/angular/angular/commit/258d539)), closes [#15874](https://github.com/angular/angular/issues/15874)
+* **language-service:** improve resilience to incomplete information ([71a8627](https://github.com/angular/angular/commit/71a8627))
+* **language-service:** infer correct type of `?.` expressions ([0a3a9af](https://github.com/angular/angular/commit/0a3a9af)), closes [#15885](https://github.com/angular/angular/issues/15885)
+* **language-service:** initialize static reflector correctly ([fe0d02f](https://github.com/angular/angular/commit/fe0d02f)), closes [#15768](https://github.com/angular/angular/issues/15768)
+* **language-service:** look for type constructors on canonical symbol ([2ddf3bc](https://github.com/angular/angular/commit/2ddf3bc))
+* **language-service:** only use canonical symbols ([5a88d2f](https://github.com/angular/angular/commit/5a88d2f))
+* **language-service:** parse extended i18n forms ([bde9771](https://github.com/angular/angular/commit/bde9771))
+* **language-service:** resolve any parameter types to any result ([5fbb0d0](https://github.com/angular/angular/commit/5fbb0d0))
+* **language-service:** respect baseUrl compiler option ([f21ff90](https://github.com/angular/angular/commit/f21ff90)), closes [#15974](https://github.com/angular/angular/issues/15974)
+* **language-service:** Update types for TypeScript nullability support ([540581d](https://github.com/angular/angular/commit/540581d))
+* **packaging:** increased buffer size ([#15840](https://github.com/angular/angular/issues/15840)) ([65af964](https://github.com/angular/angular/commit/65af964))
+* **platform-browser:** Update types for TypeScript nullability support ([728c9d0](https://github.com/angular/angular/commit/728c9d0)), closes [#15898](https://github.com/angular/angular/issues/15898)
+* **platform-server:** handle innerText ([#15818](https://github.com/angular/angular/issues/15818)) ([9394835](https://github.com/angular/angular/commit/9394835))
+* **router:** fix query param parsing ([a487563](https://github.com/angular/angular/commit/a487563))
+* **router:** prevent `RouterLinkActive` from causing an infinite CD loop ([82417b3](https://github.com/angular/angular/commit/82417b3)), closes [#15825](https://github.com/angular/angular/issues/15825)
+* **router:** relax nullability requirements ([a0d124b](https://github.com/angular/angular/commit/a0d124b))
+* turn on nullability in the code base. ([5293794](https://github.com/angular/angular/commit/5293794))
+* Update types for TypeScript nullability support in examples ([6f5fccf](https://github.com/angular/angular/commit/6f5fccf))
+* **router:** the preloader use the module from the loaded config ([6d12aa9](https://github.com/angular/angular/commit/6d12aa9))
+* **router:** Update types for TypeScript nullability support ([56c46d7](https://github.com/angular/angular/commit/56c46d7))
+* **router:** Update types for TypeScript nullability support ([bc43188](https://github.com/angular/angular/commit/bc43188))
+* **tsc-wrapped:** collect new expressions with no arguments ([#15908](https://github.com/angular/angular/issues/15908)) ([70b1d6d](https://github.com/angular/angular/commit/70b1d6d)), closes [#15906](https://github.com/angular/angular/issues/15906)
+* **tsc-wrapped:** ensure valid path separators in metadata ([96aa236](https://github.com/angular/angular/commit/96aa236))
+* **upgrade:** Update types for TypeScript nullability support ([01d93f3](https://github.com/angular/angular/commit/01d93f3)), closes [#15897](https://github.com/angular/angular/issues/15897)
+
+
+### Features
+
+* **animations:** Update types for TypeScript nullability support ([38d75d4](https://github.com/angular/angular/commit/38d75d4)), closes [#15870](https://github.com/angular/angular/issues/15870)
+* **compiler:** add source files to xmb/xliff translations ([#14705](https://github.com/angular/angular/issues/14705)) ([4054055](https://github.com/angular/angular/commit/4054055)), closes [#14190](https://github.com/angular/angular/issues/14190)
+* **compiler:** Implement i18n XLIFF 2.0 serializer ([#14185](https://github.com/angular/angular/issues/14185)) ([09c4cb2](https://github.com/angular/angular/commit/09c4cb2)), closes [#11735](https://github.com/angular/angular/issues/11735)
+* **upgrade:** allow setting the angularjs lib at runtime ([#15168](https://github.com/angular/angular/issues/15168)) ([e927aea](https://github.com/angular/angular/commit/e927aea))
+* **upgrade:** allow setting the angularjs lib at runtime ([#15168](https://github.com/angular/angular/issues/15168)) ([8ad464d](https://github.com/angular/angular/commit/8ad464d))
+* **upgrade:** fixes for allow setting the angularjs lib at runtime ([90814e4](https://github.com/angular/angular/commit/90814e4))
+* add support for TS 2.2 ([3c8a61e](https://github.com/angular/angular/commit/3c8a61e))
+* add support for TS 2.3 ([014594f](https://github.com/angular/angular/commit/014594f))
+
+
+
+<a name="4.0.3"></a>
+## [4.0.3](https://github.com/angular/angular/compare/4.0.2...4.0.3) (2017-04-21)
+
+
+### Bug Fixes
+
+* **benchpress:** chrome - prevent trace buffer overflow ([d216f94](https://github.com/angular/angular/commit/d216f94))
+* **compiler:** fix build error in xliff2 ([1870347](https://github.com/angular/angular/commit/1870347))
+* **compiler:** ignore calls to unresolved symbols in metadata ([d4038ab](https://github.com/angular/angular/commit/d4038ab)), closes [#15969](https://github.com/angular/angular/issues/15969)
+* **compiler:** ignore calls to unresolved symbols in metadata ([#15970](https://github.com/angular/angular/issues/15970)) ([db25f08](https://github.com/angular/angular/commit/db25f08)), closes [#15969](https://github.com/angular/angular/issues/15969)
+* **compiler:** Inform user where Quoted error was thrown ([3184cc5](https://github.com/angular/angular/commit/3184cc5))
+* **compiler:** suppress another closure warning ([#16137](https://github.com/angular/angular/issues/16137)) ([72e240a](https://github.com/angular/angular/commit/72e240a))
+* **core:** benchmarks - enable ng1 benchmark again ([ccac4c6](https://github.com/angular/angular/commit/ccac4c6))
+* **core:** distribute externs for testability API ([#16179](https://github.com/angular/angular/issues/16179)) ([e377d9d](https://github.com/angular/angular/commit/e377d9d))
+* **core:** key-value differ changes iteration ([#15968](https://github.com/angular/angular/issues/15968)) ([a8600dc](https://github.com/angular/angular/commit/a8600dc)), closes [#14997](https://github.com/angular/angular/issues/14997)
+* **language-service:** only use canonical symbols ([786093a](https://github.com/angular/angular/commit/786093a))
+* **packaging:** increased buffer size ([#15840](https://github.com/angular/angular/issues/15840)) ([88ad490](https://github.com/angular/angular/commit/88ad490))
+* **platform-server:** handle innerText ([#15818](https://github.com/angular/angular/issues/15818)) ([7de340d](https://github.com/angular/angular/commit/7de340d))
+* **router:** prevent `RouterLinkActive` from causing an infinite CD loop ([4479c42](https://github.com/angular/angular/commit/4479c42)), closes [#15825](https://github.com/angular/angular/issues/15825)
+* **tsc-wrapped:** collect new expressions with no arguments ([#15908](https://github.com/angular/angular/issues/15908)) ([41cac9e](https://github.com/angular/angular/commit/41cac9e)), closes [#15906](https://github.com/angular/angular/issues/15906)
+
+
+### Features
+
+* **compiler:** Implement i18n XLIFF 2.0 serializer ([#14185](https://github.com/angular/angular/issues/14185)) ([a7d8edd](https://github.com/angular/angular/commit/a7d8edd)), closes [#11735](https://github.com/angular/angular/issues/11735)
+* **upgrade:** allow setting the angularjs lib at runtime ([#15168](https://github.com/angular/angular/issues/15168)) ([a75d056](https://github.com/angular/angular/commit/a75d056))
+* **upgrade:** allow setting the angularjs lib at runtime ([#15168](https://github.com/angular/angular/issues/15168)) ([4f172b0](https://github.com/angular/angular/commit/4f172b0))
+* **upgrade:** fixes for allow setting the angularjs lib at runtime ([bb6932d](https://github.com/angular/angular/commit/bb6932d))
+* add support for TS 2.3 ([5cf101f](https://github.com/angular/angular/commit/5cf101f))
+
+
+
+<a name="4.1.0-beta.1"></a>
+# [4.1.0-beta.1](https://github.com/angular/angular/compare/4.1.0-beta.0...4.1.0-beta.1) (2017-04-12)
+
+
+### Bug Fixes
+
+* **compiler:** fix inheritance for AOT with summaries ([#15583](https://github.com/angular/angular/issues/15583)) ([8ef621a](https://github.com/angular/angular/commit/8ef621a))
+* **language-service:** avoid throwing exceptions when reporting metadata errors ([7764c5c](https://github.com/angular/angular/commit/7764c5c))
+* **language-service:** detect when there isn't a tsconfig.json ([258d539](https://github.com/angular/angular/commit/258d539)), closes [#15874](https://github.com/angular/angular/issues/15874)
+* **language-service:** improve resilience to incomplete information ([71a8627](https://github.com/angular/angular/commit/71a8627))
+* **language-service:** initialize static reflector correctly ([fe0d02f](https://github.com/angular/angular/commit/fe0d02f)), closes [#15768](https://github.com/angular/angular/issues/15768)
+* **language-service:** parse extended i18n forms ([bde9771](https://github.com/angular/angular/commit/bde9771))
+* **language-service:** resolve any parameter types to any result ([5fbb0d0](https://github.com/angular/angular/commit/5fbb0d0))
+* **router:** fix query param parsing ([a487563](https://github.com/angular/angular/commit/a487563))
+* **router:** the preloader use the module from the loaded config ([6d12aa9](https://github.com/angular/angular/commit/6d12aa9))
+* **tsc-wrapped:** ensure valid path separators in metadata ([96aa236](https://github.com/angular/angular/commit/96aa236))
+
+
+### Features
+
+* **animations:** Update types for TypeScript nullability support ([38d75d4](https://github.com/angular/angular/commit/38d75d4)), closes [#15870](https://github.com/angular/angular/issues/15870)
+* **benchpress:** Update types for TypeScript nullability support ([14669f2](https://github.com/angular/angular/commit/14669f2))
+* **common:** Update types for TypeScript nullability support ([d8b73e4](https://github.com/angular/angular/commit/d8b73e4))
+* **compiler:** Update types for TypeScript nullability support ([09d9f5f](https://github.com/angular/angular/commit/09d9f5f))
+* **language-service:** Update types for TypeScript nullability support ([540581d](https://github.com/angular/angular/commit/540581d))
+
+
+
 <a name="4.0.2"></a>
 ## [4.0.2](https://github.com/angular/angular/compare/4.0.1...4.0.2) (2017-04-11)
 
@@ -67,7 +636,9 @@ Note: 4.1.0-beta.0 release also contains all the changes present in the 4.0.1 re
 * **router:** should pass new data to Observable when query params change ([#15387](https://github.com/angular/angular/issues/15387)) ([08f2f08](https://github.com/angular/angular/commit/08f2f08)), closes [#15290](https://github.com/angular/angular/issues/15290)
 * prevent strictNullChecks support until [#15432](https://github.com/angular/angular/issues/15432) is fixed ([#15434](https://github.com/angular/angular/issues/15434)) ([b800a0c](https://github.com/angular/angular/commit/b800a0c))
 
+### BREAKING CHANGES
 
+From 4.0.0 @angular/core uses a [`WeakMap`](https://github.com/angular/angular/commit/52b21275f4c2c26c46627f5648b41a33bb5c8283), a polyfill needs to be included for [browsers that do not support it natively](http://kangax.github.io/compat-table/es6/#test-WeakMap).
 
 <a name="4.0.0-rc.6"></a>
 # [4.0.0-rc.6](https://github.com/angular/angular/compare/4.0.0-rc.5...4.0.0-rc.6) (2017-03-23)
@@ -289,7 +860,7 @@ Please give this RC a try and test it with your projects! We have spent a signif
 ## What’s New
 
 ### View Engine
-We’ve made changes under to hood to what AOT generated code looks like. These changes should reduce the size of the generated code for your components by more than half in some cases. Read the [Design Doc](https://docs.google.com/document/d/195L4WaDSoI_kkW094LlShH6gT3B7K1GZpSBnnLkQR-g/preview) for the View Engine updates.
+We’ve made changes under the hood to what AOT generated code looks like. These changes should reduce the size of the generated code for your components by more than half in some cases. Read the [Design Doc](https://docs.google.com/document/d/195L4WaDSoI_kkW094LlShH6gT3B7K1GZpSBnnLkQR-g/preview) for the View Engine updates.
 
 
 ### Enhanced `*ngIf` syntax
@@ -1487,4092 +2058,3 @@ Note: 2.1.0-beta.0 release also contains all the changes present in the 2.0.1 re
 
 <a name="2.0.0"></a>
 # [2.0.0 proprioception-reinforcement](https://github.com/angular/angular/compare/2.0.0-rc.7...2.0.0) (2016-09-14)
-
-
-### Bug Fixes
-
-* **platform-browser:** provide Title service as part of the module ([#11605](https://github.com/angular/angular/issues/11605)) ([85d9db6](https://github.com/angular/angular/commit/85d9db6)), closes [#11600](https://github.com/angular/angular/issues/11600)
-* **upgrade:** correct the main entry path in package.json ([a2519c6](https://github.com/angular/angular/commit/a2519c6))
-
-
-
-<a name="2.0.0-rc.7"></a>
-# [2.0.0-rc.7](https://github.com/angular/angular/compare/2.0.0-rc.6...2.0.0-rc.7) (2016-09-13)
-
-
-### Bug Fixes
-
-* **core:** allow `group()` to be used as entry point for an animation trigger ([#11419](https://github.com/angular/angular/issues/11419)) ([6a2bbff](https://github.com/angular/angular/commit/6a2bbff)), closes [#11312](https://github.com/angular/angular/issues/11312)
-* **core:** ensure parent animations are triggered before children ([#11201](https://github.com/angular/angular/issues/11201)) ([c9e5b59](https://github.com/angular/angular/commit/c9e5b59))
-* **core:** correctly type event handler proxy functions ([aa9b617](https://github.com/angular/angular/commit/aa9b617))
-* **core:** fix error when `NgModule.bootstrap` contains `undefined` or `null` ([ea95c39](https://github.com/angular/angular/commit/ea95c39))
-* **core:** fix an issue with webpack and lazy loader. ([#11387](https://github.com/angular/angular/issues/11387)) ([d26a827](https://github.com/angular/angular/commit/d26a827))
-* **core:** BCP47 uses hyphens as separator ([#11514](https://github.com/angular/angular/issues/11514)) ([7b82877](https://github.com/angular/angular/commit/7b82877))
-* **compiler:** fix `CssSelector#getMatchingElementTemplate()` for void tags ([077e0be](https://github.com/angular/angular/commit/077e0be)), closes [#11407](https://github.com/angular/angular/issues/11407)
-* **compiler:** add missing elements to DOMSchema ([d309f77](https://github.com/angular/angular/commit/d309f77)), closes [#11219](https://github.com/angular/angular/issues/11219)
-* **compiler:** fix perf regression in ShadowCss ([#11420](https://github.com/angular/angular/issues/11420)) ([78ad9ad](https://github.com/angular/angular/commit/78ad9ad)), closes [#11371](https://github.com/angular/angular/issues/11371)
-* **compiler-cli:** prepend a rootDir when assuming a file exists ([#11291](https://github.com/angular/angular/issues/11291)) ([c315359](https://github.com/angular/angular/commit/c315359))
-* **compiler-cli:** propagate errors to main ([#11214](https://github.com/angular/angular/issues/11214)) ([5e5ae3c](https://github.com/angular/angular/commit/5e5ae3c))
-* **compiler-cli:** use the compilerHost to detect file existence ([#11418](https://github.com/angular/angular/issues/11418)) ([9e2ec7a](https://github.com/angular/angular/commit/9e2ec7a))
-* **forms:** clear errors on disable ([#11463](https://github.com/angular/angular/issues/11463)) ([673de00](https://github.com/angular/angular/commit/673de00)), closes [#11287](https://github.com/angular/angular/issues/11287)
-* **forms:** disabled controls should never be invalid ([#11257](https://github.com/angular/angular/issues/11257)) ([043493c](https://github.com/angular/angular/commit/043493c)), closes [#11253](https://github.com/angular/angular/issues/11253)
-* **forms:** fix disabled support for empty form containers ([#11427](https://github.com/angular/angular/issues/11427)) ([7b24028](https://github.com/angular/angular/commit/7b24028)), closes [#11386](https://github.com/angular/angular/issues/11386)
-* **forms:** fix resetting radios ([#11546](https://github.com/angular/angular/issues/11546)) ([61aad79](https://github.com/angular/angular/commit/61aad79)), closes [#11516](https://github.com/angular/angular/issues/11516)
-* **forms:** rename validator change fn due to conflict ([#11492](https://github.com/angular/angular/issues/11492)) ([53f0c22](https://github.com/angular/angular/commit/53f0c22)), closes [#11479](https://github.com/angular/angular/issues/11479)
-* **forms:** support dots in control names in contains ([#11542](https://github.com/angular/angular/issues/11542)) ([79055f7](https://github.com/angular/angular/commit/79055f7)), closes [#11535](https://github.com/angular/angular/issues/11535)
-* **forms:** support rebinding nested controls ([#11210](https://github.com/angular/angular/issues/11210)) ([8c09933](https://github.com/angular/angular/commit/8c09933))
-
-
-### Code Refactoring
-
-* **core:** remove `…Metadata` for all decorators and use the decorator directly. ([63e15ff](https://github.com/angular/angular/commit/63e15ff))
-
-
-### PEER-DEPENDENCY UPDATES ###
-
-* **core**: zone.js@0.6.21
-* **core**: rxjs@5.0.0-beta.12
-
-
-### BREAKING CHANGES
-
-* core: - all `…Metadata` classes have been removed. Use the corresponding decorator
-  as constructor or for `instanceof` checks instead.
-- Example:
-  * Before: `new ComponentMetadata(…)`
-  * After: `new Component(…)`
-- Note: `new Component(…)` worked before as well.
-
-
-
-<a name="2.0.0-rc.6"></a>
-# [2.0.0-rc.6](https://github.com/angular/angular/compare/2.0.0-rc.5...2.0.0-rc.6) (2016-08-31)
-
-
-### Bug Fixes
-
-* **compiler:** allow tsc-wrapped to be compile with TypeScript 2.0 ([#11086](https://github.com/angular/angular/issues/11086)) ([fc2fe00](https://github.com/angular/angular/commit/fc2fe00))
-* **compiler:** correctly handles references to static methods ([#11013](https://github.com/angular/angular/issues/11013)) ([14a30f3](https://github.com/angular/angular/commit/14a30f3))
-* **compiler:** do not autoinclude components declared as entry points ([#10898](https://github.com/angular/angular/issues/10898)) ([c56f3f2](https://github.com/angular/angular/commit/c56f3f2))
-* **compiler:** generate temporary variables for guarded expressions ([#10657](https://github.com/angular/angular/issues/10657)) ([2d520ae](https://github.com/angular/angular/commit/2d520ae))
-* **compiler:** handle invalid host bindings and events ([#11101](https://github.com/angular/angular/issues/11101)) ([f25c976](https://github.com/angular/angular/commit/f25c976))
-* **compiler:** make ShadowCSS shim work on Android browser ([#11139](https://github.com/angular/angular/issues/11139)) ([38069ab](https://github.com/angular/angular/commit/38069ab)), closes [#11123](https://github.com/angular/angular/issues/11123)
-* **compiler:** no longer use assetCacheKey and Function#name for token identity. ([51877ef](https://github.com/angular/angular/commit/51877ef)), closes [#10545](https://github.com/angular/angular/issues/10545) [#10538](https://github.com/angular/angular/issues/10538)
-* **compiler:** only emit metadata for exported enums ([#10957](https://github.com/angular/angular/issues/10957)) ([a7b7682](https://github.com/angular/angular/commit/a7b7682))
-* **compiler:** throw descriptive error message for invalid NgModule providers ([#10947](https://github.com/angular/angular/issues/10947)) ([aa5c8ca](https://github.com/angular/angular/commit/aa5c8ca)), closes [#10714](https://github.com/angular/angular/issues/10714)
-* **compiler:** detect invalid elements in templates via DomSchemaRegistry ([1df69cb](https://github.com/angular/angular/commit/1df69cb))
-* **compiler:** ExtractorMerger returns return errors together with nodes (as a ParseTreeResult)  ([39c0f9e](https://github.com/angular/angular/commit/39c0f9e))
-* **compiler:** throw better errors when components are passed to imports or modules are passed to declarations. ([#10888](https://github.com/angular/angular/issues/10888)) ([c4fd862](https://github.com/angular/angular/commit/c4fd862)), closes [#10823](https://github.com/angular/angular/issues/10823)
-* **compiler:** properly shim selectors after :host and :host-context ([#10997](https://github.com/angular/angular/issues/10997)) ([af63378](https://github.com/angular/angular/commit/af63378)), closes [#5390](https://github.com/angular/angular/issues/5390)
-* **compiler:** disallow event-property binding even with the NO_ERRORS_SCHEMA ([1818056](https://github.com/angular/angular/commit/1818056)), closes [#11026](https://github.com/angular/angular/issues/11026)
-* **compiler-cli:** make ngc to work on Windows ([#10919](https://github.com/angular/angular/issues/10919)) ([6c77d71](https://github.com/angular/angular/commit/6c77d71)), closes [#10792](https://github.com/angular/angular/issues/10792)
-* **compiler-cli:** treat empty array of metadata like absent file ([#10610](https://github.com/angular/angular/issues/10610)) ([9a11ec2](https://github.com/angular/angular/commit/9a11ec2))
-* **compiler-cli:** codegen allows --strictNullChecks ([#10991](https://github.com/angular/angular/issues/10991)) ([01111b0](https://github.com/angular/angular/commit/01111b0))
-* **compiler-cli:** comment out a private keyword in codegen. ([#10949](https://github.com/angular/angular/issues/10949)) ([8560e1e](https://github.com/angular/angular/commit/8560e1e))
-* **compiler-cli:** don't codegen foo.d.ngfactory.ts from foo.d.ts ([#10833](https://github.com/angular/angular/issues/10833)) ([cd8cbd3](https://github.com/angular/angular/commit/cd8cbd3))
-* **compiler-cli:** don't quote properties in literal maps ([#11110](https://github.com/angular/angular/issues/11110)) ([abad667](https://github.com/angular/angular/commit/abad667)), closes [#11050](https://github.com/angular/angular/issues/11050)
-* **common:** allow float for DatePipe input ([#10687](https://github.com/angular/angular/issues/10687)) ([712c7d5](https://github.com/angular/angular/commit/712c7d5))
-* **common:** remove bidi control chars in DatePipe output ([#10870](https://github.com/angular/angular/issues/10870)) ([9198038](https://github.com/angular/angular/commit/9198038)), closes [#10080](https://github.com/angular/angular/issues/10080)
-* **core:** report errors for missing host-level referenced animations ([#10650](https://github.com/angular/angular/issues/10650)) ([f12d519](https://github.com/angular/angular/commit/f12d519))
-* **core:** assign an overriden name to constructor named constructor ([#11043](https://github.com/angular/angular/issues/11043)) ([bd510cc](https://github.com/angular/angular/commit/bd510cc)), closes [#10545](https://github.com/angular/angular/issues/10545)
-* **core:** don't strip sourceMappingURL in shimmed stylesheets ([#9664](https://github.com/angular/angular/issues/9664)) ([bc6d1c8](https://github.com/angular/angular/commit/bc6d1c8))
-* **core:** FactoryProvider's deps property should be optional ([eb7d8c7](https://github.com/angular/angular/commit/eb7d8c7))
-* **core/testing:** have fakeAsync use Proxy zone. ([#10797](https://github.com/angular/angular/issues/10797)) ([8a5eb08](https://github.com/angular/angular/commit/8a5eb08)), closes [#10503](https://github.com/angular/angular/issues/10503)
-* **forms:** fix conflicting getter name ([#11081](https://github.com/angular/angular/issues/11081)) ([ce08982](https://github.com/angular/angular/commit/ce08982))
-* **forms:** fully support rebinding form group directive ([#11051](https://github.com/angular/angular/issues/11051)) ([515ff61](https://github.com/angular/angular/commit/515ff61))
-* **forms:** remove deprecated form provider functions ([#10741](https://github.com/angular/angular/issues/10741)) ([79afcf0](https://github.com/angular/angular/commit/79afcf0))
-* **forms:** remove deprecated forms APIs ([#10624](https://github.com/angular/angular/issues/10624)) ([7606c96](https://github.com/angular/angular/commit/7606c96))
-* **forms:** support radio buttons with same name but diff parent ([#11152](https://github.com/angular/angular/issues/11152)) ([e8a1566](https://github.com/angular/angular/commit/e8a1566)), closes [#10065](https://github.com/angular/angular/issues/10065)
-* **forms:** update validity when validator dir changes ([d2ad871](https://github.com/angular/angular/commit/d2ad871)), closes [#11116](https://github.com/angular/angular/issues/11116)
-* **http:** deep copy for constructor using existing Headers ([#10679](https://github.com/angular/angular/issues/10679)) ([654ff61](https://github.com/angular/angular/commit/654ff61)), closes [#6845](https://github.com/angular/angular/issues/6845)
-* **http:** encode correct value for %3D ([#9790](https://github.com/angular/angular/issues/9790)) ([7555320](https://github.com/angular/angular/commit/7555320))
-* **http:** expose jsonpFactory for AoT compilation ([#10730](https://github.com/angular/angular/issues/10730)) ([203b2ba](https://github.com/angular/angular/commit/203b2ba))
-* **http:** inline HTTP_PROVIDERS and JSONP_PROVIDERS until the metadata collector can do it automatically. ([#10928](https://github.com/angular/angular/issues/10928)) ([477e425](https://github.com/angular/angular/commit/477e425))
-* **http:** restructure exports so that we don't leak private factory functions ([#11016](https://github.com/angular/angular/issues/11016)) ([7dfcaac](https://github.com/angular/angular/commit/7dfcaac))
-* **http:** return empty string if no body is present ([#10668](https://github.com/angular/angular/issues/10668)) ([7cd4741](https://github.com/angular/angular/commit/7cd4741))
-* **i18n:** change default locale from `en_US` to `en-US` ([#11103](https://github.com/angular/angular/issues/11103)) ([b9647b7](https://github.com/angular/angular/commit/b9647b7))
-* **i18n:** Currency/Date/Number pipe use injected locale ([#11093](https://github.com/angular/angular/issues/11093)) ([0a053a4](https://github.com/angular/angular/commit/0a053a4))
-* **i18n:** ICU placeholders are replaced by their translations ([#10586](https://github.com/angular/angular/issues/10586)) ([43512aa](https://github.com/angular/angular/commit/43512aa))
-* **i18n:** update NgLocalLocalization ([#10771](https://github.com/angular/angular/issues/10771)) ([4df48b2](https://github.com/angular/angular/commit/4df48b2))
-* **platform-browser:** remove export for private symbol _WORKER_UI_PLATFORM_PROVIDERS. ([#11018](https://github.com/angular/angular/issues/11018)) ([05bbb8e](https://github.com/angular/angular/commit/05bbb8e))
-* **router:** use encodeUri/decodeUri to encode fragment ([bb9dfbc](https://github.com/angular/angular/commit/bb9dfbc))
-* **router:** add an option to disable initial navigation ([a2deafc](https://github.com/angular/angular/commit/a2deafc))
-* **router:** canLoad should cancel a navigation instead of failing it ([#11001](https://github.com/angular/angular/issues/11001)) ([f1ce760](https://github.com/angular/angular/commit/f1ce760))
-* **router:** do not use rx/add/operator ([c350ba2](https://github.com/angular/angular/commit/c350ba2))
-* **router:** fix the order of guards, so canActivateChild runs before canActivate ([0bb516f](https://github.com/angular/angular/commit/0bb516f))
-* **router:** lazy loading keeps refetching modules ([#10707](https://github.com/angular/angular/issues/10707)) ([cc6749c](https://github.com/angular/angular/commit/cc6749c))
-* **router:** location changes and redirects break the back button ([#10742](https://github.com/angular/angular/issues/10742)) ([04c6b2f](https://github.com/angular/angular/commit/04c6b2f))
-* **router:** make routerLinkActiveOptions public ([#10758](https://github.com/angular/angular/issues/10758)) ([73c0a9d](https://github.com/angular/angular/commit/73c0a9d))
-* **router:** support guards navigating synchronously ([#11150](https://github.com/angular/angular/issues/11150)) ([e2241a2](https://github.com/angular/angular/commit/e2241a2))
-* **router:** support relative param-only navigation ([#10613](https://github.com/angular/angular/issues/10613)) ([c7f3aa7](https://github.com/angular/angular/commit/c7f3aa7))
-* **router:** update the location before activating components ([2ffecc0](https://github.com/angular/angular/commit/2ffecc0))
-* **router:** fix type ([#11181](https://github.com/angular/angular/issues/11181)) ([0f68351](https://github.com/angular/angular/commit/0f68351))
-* **router:** merge artifacts ([fc1e45d](https://github.com/angular/angular/commit/fc1e45d)), closes [#11063](https://github.com/angular/angular/issues/11063) [#11102](https://github.com/angular/angular/issues/11102)
-* **compiler/testing:** override metadata subclasses properly ([#10767](https://github.com/angular/angular/issues/10767)) ([87fe477](https://github.com/angular/angular/commit/87fe477))
-* **bundles:** correct RxJS mapping in rollup config for umd/es5 bundles ([174c016](https://github.com/angular/angular/commit/174c016))
-* **closure:** prevent closure renaming of testability interface ([#11146](https://github.com/angular/angular/issues/11146)) ([875e664](https://github.com/angular/angular/commit/875e664))
-* **closure:** replace property accesses ([#11078](https://github.com/angular/angular/issues/11078)) ([dc6f72e](https://github.com/angular/angular/commit/dc6f72e))
-
-
-### Code Refactoring
-
-* **common:** remove deprecated ReplacePipe ([#10772](https://github.com/angular/angular/issues/10772)) ([33ced70](https://github.com/angular/angular/commit/33ced70))
-* **core:** remove all previously deprecated ApplicationRef apis ([f84c3fd](https://github.com/angular/angular/commit/f84c3fd))
-* **core:** remove deprecated NgZoneError ([#10822](https://github.com/angular/angular/issues/10822)) ([3f5331b](https://github.com/angular/angular/commit/3f5331b))
-* **core:** remove deprecated @Component.directives and @Component.pipes ([4a740f2](https://github.com/angular/angular/commit/4a740f2))
-* **core:** remove deprecated coreBootstrap and coreLoadAndBootstrap ([3329977](https://github.com/angular/angular/commit/3329977))
-* **core:** remove deprecated DynamicComponentLoader ([#10759](https://github.com/angular/angular/issues/10759)) ([4a9745e](https://github.com/angular/angular/commit/4a9745e))
-* **core:** remove deprecated SystemJsComponentResolver and SystemJsCmpFactoryResolver ([b238414](https://github.com/angular/angular/commit/b238414))
-* **core:** remove deprecated DebugNode.inject() ([#10751](https://github.com/angular/angular/issues/10751)) ([a235ae1](https://github.com/angular/angular/commit/a235ae1))
-* **core:** remove deprecated properties and events from metadata ([#10753](https://github.com/angular/angular/issues/10753)) ([156a52e](https://github.com/angular/angular/commit/156a52e))
-* **core:** remove deprecated Query and ViewQuery ([#10820](https://github.com/angular/angular/issues/10820)) ([48751cc](https://github.com/angular/angular/commit/48751cc))
-* **core:** remove deprecated lockRunMode ([#10763](https://github.com/angular/angular/issues/10763)) ([2eb4ee8](https://github.com/angular/angular/commit/2eb4ee8))
-* **core:** remove deprecated ComponentResolver (#10858) ([73a9ee4](https://github.com/angular/angular/commit/73a9ee4))
-* **core:** remove deprecated PlatformRef#registerDisposeListener, #disposed, #dispose() ([44e1b23](https://github.com/angular/angular/commit/44e1b23))
-* **core:** remove deprecated provider/bind API ([#10652](https://github.com/angular/angular/issues/10652)) ([bec5c5f](https://github.com/angular/angular/commit/bec5c5f)), closes [#9751](https://github.com/angular/angular/issues/9751)
-* **core:** remove supporter deprecated `var` / `#` ([#11084](https://github.com/angular/angular/issues/11084)) ([b867764](https://github.com/angular/angular/commit/b867764))
-* **core:** removed deprecated disposePlatform ([d282507](https://github.com/angular/angular/commit/d282507))
-* **core:** merge Type and ConcreteType<?> into Type<?> ([#10616](https://github.com/angular/angular/issues/10616)) ([b96869a](https://github.com/angular/angular/commit/b96869a)), closes [#9729](https://github.com/angular/angular/issues/9729)
-* **core:** remove deprecated animations trigger APIs ([#10825](https://github.com/angular/angular/issues/10825)) ([9adf803](https://github.com/angular/angular/commit/9adf803))
-* **core:** rename Exception to Error; remove from public API ([86ba072](https://github.com/angular/angular/commit/86ba072)), ([7c07bff](https://github.com/angular/angular/commit/7c07bff))
-* **core/testing:** remove deprecated TestComponentBuilder ([a29f9f3](https://github.com/angular/angular/commit/a29f9f3))
-* **http:** remove deprecated HTTP_PROVIDERS and JSONP_PROVIDERS ([#10864](https://github.com/angular/angular/issues/10864)) ([675e582](https://github.com/angular/angular/commit/675e582))
-* **platform-browser-dynamic:** Rename CACHED_TEMPLATE_PROVIDER to RESOURCE_CACHE_PROVIDER ([#10866](https://github.com/angular/angular/issues/10866)) ([40e160c](https://github.com/angular/angular/commit/40e160c)), closes [#9741](https://github.com/angular/angular/issues/9741)
-* **upgrade:** remove deprecated addProvider ([12b0a3d](https://github.com/angular/angular/commit/12b0a3d))
-* **webworkers:** move webworkers to separate @angular/platform-webworker and @angular/platform-webworker-dynamic packages ([71ae2c4](https://github.com/angular/angular/commit/71ae2c4))
-* **core & platform-browser:** rename SanitizationService to Sanitizer and DomSanitizationService to DomSanitizer ([#11085](https://github.com/angular/angular/issues/11085)) ([811962b](https://github.com/angular/angular/commit/811962b))
-
-
-### Features
-
-* **npm packages:** use ES modules for primary build ([#11120](https://github.com/angular/angular/issues/11120)) ([9796579](https://github.com/angular/angular/commit/9796579))
-* **compiler:** Add an error message when the locale is not provided ([#11104](https://github.com/angular/angular/issues/11104)) ([e220a80](https://github.com/angular/angular/commit/e220a80))
-* **compiler:** Added "strictMetadataEmit" option to ngc ([#10951](https://github.com/angular/angular/issues/10951)) ([39a2c39](https://github.com/angular/angular/commit/39a2c39))
-* **compiler-cli:** allow ngc implementations to provide XHR ([#10708](https://github.com/angular/angular/issues/10708)) ([6e842fc](https://github.com/angular/angular/commit/6e842fc))
-* **compiler-cli:** support pathmapping using a separate reflector ([#10985](https://github.com/angular/angular/issues/10985)) ([e0fbca9](https://github.com/angular/angular/commit/e0fbca9))
-* **core:** support animation trigger template callbacks ([45e8e73](https://github.com/angular/angular/commit/45e8e73670b96387fc109921fad299742d3f7cbf))
-* **core:** make sure animation callback reports the totalTime ([#11022](https://github.com/angular/angular/issues/11022)) ([4f8f8cf](https://github.com/angular/angular/commit/4f8f8cf))
-* **core:** add NO_ERRORS_SCHEMA that allows any properties to be set on any element ([#10956](https://github.com/angular/angular/issues/10956)) ([c631cfc](https://github.com/angular/angular/commit/c631cfc))
-* **core:** make ngprobe tokens pluggable ([f48142e](https://github.com/angular/angular/commit/f48142e))
-* **core:** throw a descriptive error when BrowserModule is installed a second time (via lazy loading). ([#10899](https://github.com/angular/angular/issues/10899)) ([628d06c](https://github.com/angular/angular/commit/628d06c))
-* **core:** update public api ([951ecb4](https://github.com/angular/angular/commit/951ecb4))
-* **core:** allow configurable module prefixes and suffixes. ([#11049](https://github.com/angular/angular/issues/11049)) ([8b78281](https://github.com/angular/angular/commit/8b78281))
-* **core/testing:** add TestBed.get ([4648b3e](https://github.com/angular/angular/commit/4648b3e))
-* **forms:** add control status classes to form groups ([#10667](https://github.com/angular/angular/issues/10667)) ([2291929](https://github.com/angular/angular/commit/2291929))
-* **forms:** add NgForm method that resets submit state ([#10715](https://github.com/angular/angular/issues/10715)) ([97f3571](https://github.com/angular/angular/commit/97f3571))
-* **forms:** add support for disabled controls ([#10994](https://github.com/angular/angular/issues/10994)) ([2b313e4](https://github.com/angular/angular/commit/2b313e4))
-* **forms:** add support to bind validation attributes ([0b665c0](https://github.com/angular/angular/commit/0b665c0))
-* **i18n:** add an HtmlParser decorator ([#10645](https://github.com/angular/angular/issues/10645)) ([50345b8](https://github.com/angular/angular/commit/50345b8))
-* **i18n:** Add NgLocaleLocalization which returns plural cases given a locale ([#10744](https://github.com/angular/angular/issues/10744)) ([161a4dd](https://github.com/angular/angular/commit/161a4dd))
-* **i18n:** pass translation config directly into ngc ([#10622](https://github.com/angular/angular/issues/10622)) ([6580d67](https://github.com/angular/angular/commit/6580d67))
-* **i18n:** provide LOCALE_ID and NgLocalization ([ce4eae6](https://github.com/angular/angular/commit/ce4eae6))
-* **i18n:** xliff ([72bb38f](https://github.com/angular/angular/commit/72bb38f))
-* **i18n:** xliff integration  ([f6a7d65](https://github.com/angular/angular/commit/f6a7d65))
-* **router:** add support for custom error handlers ([2fc5c57](https://github.com/angular/angular/commit/2fc5c57))
-* **router:** add syntax sugar for confuguring RouterTestingModule ([#10906](https://github.com/angular/angular/issues/10906)) ([53c99cf](https://github.com/angular/angular/commit/53c99cf))
-* **router:** extend support for lazy loading children ([#10705](https://github.com/angular/angular/issues/10705)) ([6b26102](https://github.com/angular/angular/commit/6b26102))
-* **router:** make router.config public ([947f9c3](https://github.com/angular/angular/commit/947f9c3))
-* **router:** throw a helpful error when misusing forRoot() from a lazy module. ([#10996](https://github.com/angular/angular/issues/10996)) ([5ddecb1](https://github.com/angular/angular/commit/5ddecb1))
-
-
-### PEER-DEPENDENCY UPDATES ###
-
-* **core**: zone.js@0.6.17
-* **core**: rxjs@5.0.0-beta.11
-* **core**: reflect-metadata dependency is now optional when in AOT mode
-* **compiler-cli**: typescript@2.0.2
-
-
-### BREAKING CHANGES
-
-* npm packages: code in ESM (ES6 Modules) format is now published at the default location in the npm package with `package.json`'s `main` entry pointing to an UMD bundle (primarily for node, and webpack 1 users).
-
-  If you are using SystemJS to load Angular, you should adjust your SystemJS configuration to point to the UMD bundles (present in the npm package).
-
-  Please see this [example SystemJS config](https://github.com/angular/quickstart/blob/3b7452cc444c49c139ea39523ced0468c2362c16/systemjs.config.js#L17-L34).
-
-* testing config: due to zone.js peer-dependency upgrade, the order in which various zone specs are loaded has changed.
-
-  Please see this [example Karma config](https://github.com/angular/quickstart/blob/3b7452cc444c49c139ea39523ced0468c2362c16/karma.conf.js#L31-L38).
-
-* core: `Type` is now `Type<T>` which means that in most cases you have to
-use `Type<any>` in place of `Type`.
-
-  We don't expect that any user applications use the `Type` type directly.
-
-* core: Previously inconsistently named APIs SanitizationService and DomSanitizationService were renamed to Sanitizer and DomSanitizer
-
-* core: previously deprecated @Component.directives and @Component.pipes support was removed.
-
-  All the components and pipes now must be declared via an NgModule. NgModule is the basic compilation block passed into the Angular compiler via Compiler#compileModuleSync or #compileModuleAsync.
-
-  Because of this change, the Compiler#compileComponentAsync and #compileComponentSync were removed as well - any code doing compilation should compile module instead using the APIs mentioned above.
-
-  Lastly, since modules are the basic compilation unit, the ngUpgrade module was modified to always require an NgModule to be passed into the UpgradeAdapter's constructor - previously this was optional.
-
-* core: deprecated ComponentResolver was removed. Please use ComponentFactoryResolver instead.
-
-* core: animations defined using an at-symbol prefix that are not property bound are now invalid.
-
-  ```html
-  <!-- this is now invalid -->
-  <div @flip="flipState"></div>
-
-  <!-- change that to -->
-  <div [@flip]="flipState"></div>
-  ```
-
-* core: Animations that are not bound using the at-symbol
-prefix using `animate-` must now be preixed using `bind-animate-`.
-
-```html
-<!-- this is now invalid -->
-<div animate-flip="flipState"></div>
-
-<!-- is valid now -->
-<div bind-animate-flip="flipState"></div>
-```
-
-* core: These forms of providers are no longer accepted:
-  ```
-  bind(MyClass).toFactory(...)
-  new Provider(MyClass, toFactory: ...)
-  ```
-
-  We now only accept:
-  ```
-  {provide: MyClass, useFactory: ...}
-  ```
-
-* core: previously deprecated NgZoneError has been removed
-
-* core: Exceptions are no longer part of the public API. We don't expect that anyone should be referring to the Exception types.
-
-  ```
-  ExceptionHandler.call(exception: any, stackTrace?: any, reason?: string): void;
-  ```
-  change to:
-  ```
-  ErrorHandler.handleError(error: any): void;
-  ```
-
-* core: deprecated DynamicComponentLoader was removed; see deprecation notice for migration instructions.
-
-* core: deprecated SystemJsComponentResolver and SystemJsCmpFactoryResolver have been removed.
-
-* core: previously deprecated coreBootstrap and coreLoadAndBootstrap have been removed.
-
-* core: all previously deprecated ApplicationRef apis have been removed.
-
-* core: deprecated PlatformRef#registerDisposeListener, #disposed, #dispose() - follow deprecation instructions to upgrade
-
-* core: deprecated disposePlatform was removed; see deprecation notice for migration instructions.
-
-* core: deprecated DirectiveMetadataType#properties and DirectiveMetadataType#events were removed; see deprecation notice for migration instructions.
-
-* core: deprecated lockRunMode was removed; see deprecation notice for migration instructions.
-
-* core: deprecated DebugNode#inject was removed, see deprecation notice for migration instructions.
-
-* core: deprecated Query and ViewQuery  were removed; see deprecation notice for migration instructions.
-
-* core/testing: deprecated TestComponentBuilder was removed, please use TestBed instead
-
-* compiler: Previously deprecated`#` and `var` are not supported any more in expressions within templates, use `let`:
-  - `var-<name>` cannot be used any more on templates, use `let-<name>`
-  - `var-<name>` cannot be used any more to create a reference, use `ref-<name>`
-
-* http: any code which relies on the fact that a newly created Headers object is referencing an existing Headers map is now broken, but that should normally not be the case since this behavior is not documented and not in accordance with the spec.
-
-* http: previously deprecated HTTP_PROVIDERS and JSONP_PROVIDERS were removed; see deprecation notice for migration instructions.
-
-* platform-browser-dynamic: `CACHED_TEMPLATE_PROVIDER` is now renamed to `RESOURCE_CACHE_PROVIDER`
-
-  Before:
-
-  ```js
-  import {CACHED_TEMPLATE_PROVIDER} from '@angular/platform-browser-dynamic';
-  ```
-
-  After:
-
-  ```js
-  import {RESOURCE_CACHE_PROVIDER} from '@angular/platform-browser-dynamic';
-  ```
-
-* common: previously deprecated NgSwitchWhen directive was removed, use NgSwitchCase instead
-
-* common: previously deprecated ReplacePipe was removed
-
-* upgrade: deprecated UpgradeAdapter#addProvider was removed, see deprecation notice for migration instructions.
-
-* forms: deprecated `provideForms()` and `disableDeprecatedForms()` functions have been removed. Please import the `FormsModule` or the `ReactiveFormsModule` from @angular/forms instead.
-
-* forms: deprecated forms APIs in @angular/common have been removed. Please update to the new forms API in @angular/forms. See angular.io for more information.
-
-* webworkers: web worker platform is now exported via separate packages.
-
-  Please use @angular/platform-webworker and @angular/platform-webworker-dynamic
-
-
-
-<a name="2.0.0-rc.5"></a>
-# [2.0.0-rc.5](https://github.com/angular/angular/compare/2.0.0-rc.4...2.0.0-rc.5) (2016-08-09)
-
-
-### Bug Fixes
-
-* **animations:** change trigger binding syntax to function as a property binding [] ([7f4954b](https://github.com/angular/angular/commit/7f4954b))
-* **animations:** ensure a null easing value is never used with web-animations ([9cc3b2c](https://github.com/angular/angular/commit/9cc3b2c)), closes [#9780](https://github.com/angular/angular/issues/9780) [#9752](https://github.com/angular/angular/issues/9752)
-* **animations:** ensure all child elements are rendered before running animations ([c3bdd50](https://github.com/angular/angular/commit/c3bdd50)), closes [#9402](https://github.com/angular/angular/issues/9402) [#9775](https://github.com/angular/angular/issues/9775) [#9887](https://github.com/angular/angular/issues/9887)
-* **animations:** ensure animation detection doesn't rely on the body node ([0d1bf81](https://github.com/angular/angular/commit/0d1bf81)), closes [#10230](https://github.com/angular/angular/issues/10230) [#10191](https://github.com/angular/angular/issues/10191) [#10273](https://github.com/angular/angular/issues/10273)
-* **animations:** throw errors when duplicate component trigger names are registered ([5af1e89](https://github.com/angular/angular/commit/5af1e89))
-* **compiler:** allow to use pipes inside of `*ngIf` ([#10452](https://github.com/angular/angular/issues/10452)) ([8efbcc9](https://github.com/angular/angular/commit/8efbcc9)), closes [#9746](https://github.com/angular/angular/issues/9746)
-* **compiler:** auto declare `entryComponents` recursively ([a32c4ad](https://github.com/angular/angular/commit/a32c4ad)), closes [#10348](https://github.com/angular/angular/issues/10348)
-* **compiler:** Collector collects enum values. ([#9967](https://github.com/angular/angular/issues/9967)) ([e6b2443](https://github.com/angular/angular/commit/e6b2443))
-* **compiler:** Fixed ?. operator to short-circut execution ([#9965](https://github.com/angular/angular/issues/9965)) ([4ec2a30](https://github.com/angular/angular/commit/4ec2a30)), closes [#9965](https://github.com/angular/angular/issues/9965)
-* **compiler:** Generates function expressions as returning any ([#9980](https://github.com/angular/angular/issues/9980)) ([eb5763c](https://github.com/angular/angular/commit/eb5763c))
-* **compiler:** Ignore references to declared modules and unneeded types ([#9776](https://github.com/angular/angular/issues/9776)) ([4ef8689](https://github.com/angular/angular/commit/4ef8689))
-* **compiler:** Missing metadata files should result in  undefined ([#9704](https://github.com/angular/angular/issues/9704)) ([30bec78](https://github.com/angular/angular/commit/30bec78)), closes [#9678](https://github.com/angular/angular/issues/9678)
-* **compiler:** No longer writes 0 length files outside of genDir ([#10023](https://github.com/angular/angular/issues/10023)) ([6518ff8](https://github.com/angular/angular/commit/6518ff8))
-* **compiler:** Query expression lambdas should have dynamic type ([961c9d4](https://github.com/angular/angular/commit/961c9d4))
-* **compiler:** report better error messages for `host` bindings ([fb3608a](https://github.com/angular/angular/commit/fb3608a)), closes [#10346](https://github.com/angular/angular/issues/10346)
-* **compiler:** Report references to non-exported symbols. ([9925aa8](https://github.com/angular/angular/commit/9925aa8))
-* **compiler:** StaticReflect now resolves re-exported symbols ([#10453](https://github.com/angular/angular/issues/10453)) ([82e7ecd](https://github.com/angular/angular/commit/82e7ecd)), closes [#10453](https://github.com/angular/angular/issues/10453)
-* **compiler:** treat custom elements as unknown elements by default ([fc83bbb](https://github.com/angular/angular/commit/fc83bbb)), closes [#10300](https://github.com/angular/angular/issues/10300)
-* **compiler:** Catch exceptions in the logging of binding update ([2743627](https://github.com/angular/angular/commit/2743627)), closes [#9994](https://github.com/angular/angular/issues/9994)
-* **compiler:** Better error message in case of unknown property binding ([a55d796](https://github.com/angular/angular/commit/a55d796))
-* **compiler:** String.split(str, n) stops after n separator ([#10408](https://github.com/angular/angular/issues/10408)) ([13c8211](https://github.com/angular/angular/commit/13c8211))
-* **compiler-cli:** put all `ngc` files into a single directory ([#10486](https://github.com/angular/angular/issues/10486)) ([790362e](https://github.com/angular/angular/commit/790362e))
-* **compiler-cli:** support trailing slash in basePath ([#10533](https://github.com/angular/angular/issues/10533)) ([0d1f3c3](https://github.com/angular/angular/commit/0d1f3c3))
-* **core:** allow module providers to overwrite providers from `ModuleWithProviders` ([5533447](https://github.com/angular/angular/commit/5533447)), closes [#10313](https://github.com/angular/angular/issues/10313) [#10317](https://github.com/angular/angular/issues/10317)
-* **core:** Don't use ES6 spread operator when undefined is allowed. ([2ff8332](https://github.com/angular/angular/commit/2ff8332))
-* **core:** ensure ngFor only inserts/moves/removes elements when necessary ([#10287](https://github.com/angular/angular/issues/10287)) ([e18626b](https://github.com/angular/angular/commit/e18626b)), closes [#9960](https://github.com/angular/angular/issues/9960) [#7239](https://github.com/angular/angular/issues/7239) [#9672](https://github.com/angular/angular/issues/9672) [#9454](https://github.com/angular/angular/issues/9454) [#10287](https://github.com/angular/angular/issues/10287)
-* **core:** fix offline detection in ng_module_factory_loader ([915a666](https://github.com/angular/angular/commit/915a666))
-* **core:** only warn and auto declare undeclared `entryComponents`. ([e44e866](https://github.com/angular/angular/commit/e44e866)), closes [#10316](https://github.com/angular/angular/issues/10316)
-* **core:** support components without a selector ([#10331](https://github.com/angular/angular/issues/10331)) ([9b39e49](https://github.com/angular/angular/commit/9b39e49)), closes [#3464](https://github.com/angular/angular/issues/3464) [#10216](https://github.com/angular/angular/issues/10216)
-* **CurrencyPipe:** use default Intl formatting options when none provided ([d455942](https://github.com/angular/angular/commit/d455942)), closes [#10189](https://github.com/angular/angular/issues/10189)
-* **datePipe:** short timezone not displayed, closes [#9812](https://github.com/angular/angular/issues/9812) ([#9816](https://github.com/angular/angular/issues/9816)) ([f29457f](https://github.com/angular/angular/commit/f29457f)), closes [#9812](https://github.com/angular/angular/issues/9812) [#9816](https://github.com/angular/angular/issues/9816)
-* **DirectiveResolver:** throw on duplicate Input & Output names ([d1a3e3a](https://github.com/angular/angular/commit/d1a3e3a))
-* **docs:** typo in comments ([#9743](https://github.com/angular/angular/issues/9743)) ([afb7216](https://github.com/angular/angular/commit/afb7216))
-* **ExpressionParser:** undefined is undefined (was null)   ([b4613ab](https://github.com/angular/angular/commit/b4613ab))
-* **fake_async:** share zone between `beforeEach` and `it` ([16cc9b4](https://github.com/angular/angular/commit/16cc9b4))
-* **forms:** allow arrays as parents ([#10440](https://github.com/angular/angular/issues/10440)) ([d6d4568](https://github.com/angular/angular/commit/d6d4568)), closes [#10432](https://github.com/angular/angular/issues/10432)
-* **forms:** export AbstractFormGroupDirective ([6195a45](https://github.com/angular/angular/commit/6195a45))
-* **forms:** export form directive arrays for offline compile ([#9893](https://github.com/angular/angular/issues/9893)) ([93025d1](https://github.com/angular/angular/commit/93025d1))
-* **forms:** improve ngModel error messages ([#10314](https://github.com/angular/angular/issues/10314)) ([43349dd](https://github.com/angular/angular/commit/43349dd))
-* **forms:** improve no value accessor error message ([#10051](https://github.com/angular/angular/issues/10051)) ([34feecf](https://github.com/angular/angular/commit/34feecf))
-* **forms:** mark control containers as touched when child controls are touched ([#9735](https://github.com/angular/angular/issues/9735)) ([77dc6ef](https://github.com/angular/angular/commit/77dc6ef))
-* **forms:** normalize written value in NumberValueAccessor ([b48f7bc](https://github.com/angular/angular/commit/b48f7bc)), closes [#10379](https://github.com/angular/angular/issues/10379)
-* **forms:** re-enable form provider functions for easier migration ([#9972](https://github.com/angular/angular/issues/9972)) ([e68252a](https://github.com/angular/angular/commit/e68252a))
-* **forms:** throw error if wrong control container for reactive forms ([#10286](https://github.com/angular/angular/issues/10286)) ([0aba42a](https://github.com/angular/angular/commit/0aba42a))
-* **forms:** update dirty before emitting value change ([#10362](https://github.com/angular/angular/issues/10362)) ([7c76a75](https://github.com/angular/angular/commit/7c76a75)), closes [#5328](https://github.com/angular/angular/issues/5328)
-* **forms:** missing export for validators ([91c64d2](https://github.com/angular/angular/commit/91c64d2))
-* **forms:** use change event for select multiple ([#9713](https://github.com/angular/angular/issues/9713)) ([3cbded6](https://github.com/angular/angular/commit/3cbded6))
-* **HtmlParser:** correctly propagate the interpolation config across layers ([25e070d](https://github.com/angular/angular/commit/25e070d))
-* **http:** convert objects passed to requests into a string ([#10124](https://github.com/angular/angular/issues/10124)) ([83bc5c9](https://github.com/angular/angular/commit/83bc5c9)), closes [#10073](https://github.com/angular/angular/issues/10073)
-* **http:** headers should be case-insensitive. ([7f64782](https://github.com/angular/angular/commit/7f64782)), closes [#9452](https://github.com/angular/angular/issues/9452)
-* **http:** URLSearchParams.clone propagate the QueryEncoder ([#9900](https://github.com/angular/angular/issues/9900)) ([2519532](https://github.com/angular/angular/commit/2519532))
-* **i18n extractor:** array manipulation ([df44e3e](https://github.com/angular/angular/commit/df44e3e))
-* **KeyValueDiffer:** check for changes ([3f08efa](https://github.com/angular/angular/commit/3f08efa)), closes [#9115](https://github.com/angular/angular/issues/9115)
-* **linker:** prevent pollution of empty embeddedView context ([#10548](https://github.com/angular/angular/issues/10548)) ([46bbcef](https://github.com/angular/angular/commit/46bbcef)), closes [#10045](https://github.com/angular/angular/issues/10045)
-* **linker/compiler:** rename const to avoid duplicate declaration ([#10457](https://github.com/angular/angular/issues/10457)) ([2b704f0](https://github.com/angular/angular/commit/2b704f0))
-* **metadata:** fix typechecking with typescript[@next](https://github.com/next) ([0a46f37](https://github.com/angular/angular/commit/0a46f37))
-* **ng upgrade:** do not compile ng2 components until after ng1 bootstrap ([#10084](https://github.com/angular/angular/issues/10084)) ([9edea0b](https://github.com/angular/angular/commit/9edea0b)), closes [#9407](https://github.com/angular/angular/issues/9407) [angular/protractor#2944](https://github.com/angular/protractor/issues/2944)
-* **ngc:** gather metadata for OpaqueToken ([c8d53d7](https://github.com/angular/angular/commit/c8d53d7)), closes [#10482](https://github.com/angular/angular/issues/10482)
-* **ngClass:** do not deconstruct classes on element removal ([#10303](https://github.com/angular/angular/issues/10303)) ([ba88db5](https://github.com/angular/angular/commit/ba88db5)), closes [#10008](https://github.com/angular/angular/issues/10008) [#10303](https://github.com/angular/angular/issues/10303)
-* **NgPlural:** expression inside cases ([#9883](https://github.com/angular/angular/issues/9883)) ([b7e69bc](https://github.com/angular/angular/commit/b7e69bc)), closes [#9868](https://github.com/angular/angular/issues/9868)
-* **NgStyle:** remove duplicate input declaration ([#9978](https://github.com/angular/angular/issues/9978)) ([94dc632](https://github.com/angular/angular/commit/94dc632)), closes [#9977](https://github.com/angular/angular/issues/9977)
-* **ngUpgrade:** to work with [@NgModule](https://github.com/NgModule) ([d21331e](https://github.com/angular/angular/commit/d21331e))
-* **platform-browser:** IEMobile is badly detected when testing ([#10382](https://github.com/angular/angular/issues/10382)) ([43c71ae](https://github.com/angular/angular/commit/43c71ae))
-* **platform-browser:** remove testing_e2e target ([#10029](https://github.com/angular/angular/issues/10029)) ([4a96505](https://github.com/angular/angular/commit/4a96505))
-* **platform-browser:** throw useful error on missing platform module. ([73f02c7](https://github.com/angular/angular/commit/73f02c7))
-* **platform-browser-dynamic:** Add [@Injectable](https://github.com/Injectable)() annotation to XHRImpl. ([7b31178](https://github.com/angular/angular/commit/7b31178))
-* **static_reflector:** report methods with decorators in `propMetadata` as well ([367f0fd](https://github.com/angular/angular/commit/367f0fd)), closes [#10308](https://github.com/angular/angular/issues/10308) [#10318](https://github.com/angular/angular/issues/10318)
-* **static_reflector:** resolve values of functions in the function context ([d6b65db](https://github.com/angular/angular/commit/d6b65db))
-* **SyncAsyncResult:** fix default async value ([#10013](https://github.com/angular/angular/issues/10013)) ([6d02d2f](https://github.com/angular/angular/commit/6d02d2f)), closes [#10013](https://github.com/angular/angular/issues/10013)
-* **TemplateParser:** add support for data-template attribute ([d84a43c](https://github.com/angular/angular/commit/d84a43c)), closes [#9904](https://github.com/angular/angular/issues/9904)
-* **TemplateParser:** report empty expression ([#10391](https://github.com/angular/angular/issues/10391)) ([e73d051](https://github.com/angular/angular/commit/e73d051)), closes [#3754](https://github.com/angular/angular/issues/3754)
-* **testing:** add an explicit doAsyncPrecompilation step ([#10015](https://github.com/angular/angular/issues/10015)) ([b43f954](https://github.com/angular/angular/commit/b43f954)), closes [#9975](https://github.com/angular/angular/issues/9975) [#9593](https://github.com/angular/angular/issues/9593)
-* **testing:** Add platform directives to the shim that keeps setBaseTestProviders running ([#10154](https://github.com/angular/angular/issues/10154)) ([979946c](https://github.com/angular/angular/commit/979946c))
-* **testing:** ComponentFixture - Avoid extra scheduleMicrotask ([#10223](https://github.com/angular/angular/issues/10223)) ([e34eb45](https://github.com/angular/angular/commit/e34eb45))
-* **testing:** correctly import NgMatchers ([#10077](https://github.com/angular/angular/issues/10077)) ([64fc464](https://github.com/angular/angular/commit/64fc464))
-* **testing:** Fix error message in test bed ([3b690b6](https://github.com/angular/angular/commit/3b690b6))
-* **testing:** reintroduce and deprecate setBaseTestProviders ([#9905](https://github.com/angular/angular/issues/9905)) ([2923187](https://github.com/angular/angular/commit/2923187))
-* **testing:** remove deprecated testing APIs ([#9923](https://github.com/angular/angular/issues/9923)) ([9af2d8b](https://github.com/angular/angular/commit/9af2d8b))
-* **typescript:** make router compile with typescript[@next](https://github.com/next) ([73f017b](https://github.com/angular/angular/commit/73f017b)), closes [#9731](https://github.com/angular/angular/issues/9731)
-* **UrlParser:** stop setting default value 'true' ([#10399](https://github.com/angular/angular/issues/10399)) ([0d6cc17](https://github.com/angular/angular/commit/0d6cc17))
-
-
-### Code Refactoring
-
-* **core:** change bootstrap of modules and names of platforms ([5a21f16](https://github.com/angular/angular/commit/5a21f16))
-* **core:** change module semantics ([46b2127](https://github.com/angular/angular/commit/46b2127)), closes [#10164](https://github.com/angular/angular/issues/10164)
-* **core:** clean up platform bootstrap and initTestEnvironment ([fa47890](https://github.com/angular/angular/commit/fa47890)), closes [#9922](https://github.com/angular/angular/issues/9922)
-* **core:** deprecate `coreBootstrap`, `PLATFORM_PIPES/DIRECTIVES` providers and `ComponentResolver` ([daa9da4](https://github.com/angular/angular/commit/daa9da4)), closes [#9726](https://github.com/angular/angular/issues/9726)
-* **core:** deprecate old methods on `ApplicationRef` ([34624b2](https://github.com/angular/angular/commit/34624b2))
-* **core:** introduce `APP_BOOTSTRAP_LISTENER` multi provider ([af2e80e](https://github.com/angular/angular/commit/af2e80e))
-* **core:** Introduce `AppInitStatus` ([6300283](https://github.com/angular/angular/commit/6300283))
-* **core:** introduce `NgModule.schemas` ([00b726f](https://github.com/angular/angular/commit/00b726f))
-* **core:** make `lockRunMode` a noop and deprecate it. ([98d49d4](https://github.com/angular/angular/commit/98d49d4)), closes [#9878](https://github.com/angular/angular/issues/9878)
-* **core:** remove `ViewResolver` and `ViewResolverMock` ([0988cc8](https://github.com/angular/angular/commit/0988cc8))
-* **core:** rename `precompile` into `entryComponents`. ([6f4e49e](https://github.com/angular/angular/commit/6f4e49e))
-* **core:** use `ngOnDestroy` in providers ([8e6091d](https://github.com/angular/angular/commit/8e6091d))
-* **testing:** introduce new testing api to support ng modules ([d0a95e3](https://github.com/angular/angular/commit/d0a95e3)), closes [#10354](https://github.com/angular/angular/issues/10354)
-
-
-### Features
-
-* **animations:** allow animation integration support into host params ([806a254](https://github.com/angular/angular/commit/806a254)), closes [#9044](https://github.com/angular/angular/issues/9044) [#9933](https://github.com/angular/angular/issues/9933)
-* **browser:** use AppModules for bootstrap in the browser ([3f55aa6](https://github.com/angular/angular/commit/3f55aa6))
-* **compiler:** add `MockPipeResolver` ([4ad6bcc](https://github.com/angular/angular/commit/4ad6bcc))
-* **compiler:** Added support for conditional expressions. ([#10366](https://github.com/angular/angular/issues/10366)) ([20b03ba](https://github.com/angular/angular/commit/20b03ba))
-* **compiler:** Added support for references to static fields. ([#10334](https://github.com/angular/angular/issues/10334)) ([b58e9ea](https://github.com/angular/angular/commit/b58e9ea))
-* **compiler:** Allow calls to simple static methods ([#10289](https://github.com/angular/angular/issues/10289)) ([b449467](https://github.com/angular/angular/commit/b449467))
-* **compiler:** Expression span information and error correction ([#9772](https://github.com/angular/angular/issues/9772)) ([9a04fcd](https://github.com/angular/angular/commit/9a04fcd))
-* **compiler:** introduce `MockDirectiveResolver.setDirective` ([acc6c8d](https://github.com/angular/angular/commit/acc6c8d))
-* **compiler:** Support default parameters in static reflector ([#10370](https://github.com/angular/angular/issues/10370)) ([763ca60](https://github.com/angular/angular/commit/763ca60))
-* **core:** add AddModuleFactoryLoader ([6fcf962](https://github.com/angular/angular/commit/6fcf962))
-* **core:** allow to add precompiled tokens via a provider ([7073cf7](https://github.com/angular/angular/commit/7073cf7)), closes [#9874](https://github.com/angular/angular/issues/9874)
-* **core:** introduce `[@AppModule](https://github.com/AppModule)` ([17e4cfc](https://github.com/angular/angular/commit/17e4cfc)), closes [#9730](https://github.com/angular/angular/issues/9730)
-* **core:** introduce `ModuleWithProviders`. ([f02da4e](https://github.com/angular/angular/commit/f02da4e))
-* **core:** introduce `NgModuleRef.destroy` and call `ngOnDestroy` on all providers ([ecdaded](https://github.com/angular/angular/commit/ecdaded))
-* **core:** support `ngOnDestroy` on providers of a directive. ([c161ed4](https://github.com/angular/angular/commit/c161ed4))
-* **ExpressionChangedAfterItHasBeenCheckedException:** more meaningful error message ([2de8364](https://github.com/angular/angular/commit/2de8364)), closes [#9882](https://github.com/angular/angular/issues/9882)
-* **ExpressionParser:** add support for `this` ([0ca05ee](https://github.com/angular/angular/commit/0ca05ee))
-* **facade:** add support for all thenables ([#10278](https://github.com/angular/angular/issues/10278)) ([58d9e7f](https://github.com/angular/angular/commit/58d9e7f))
-* **forms:** add ability to reset forms ([#9974](https://github.com/angular/angular/issues/9974)) ([da8eb9f](https://github.com/angular/angular/commit/da8eb9f)), closes [#4914](https://github.com/angular/angular/issues/4914) [#4933](https://github.com/angular/angular/issues/4933)
-* **forms:** add get method for easy access to child controls ([#10428](https://github.com/angular/angular/issues/10428)) ([8d44999](https://github.com/angular/angular/commit/8d44999))
-* **forms:** add invalid prop to abstract controls ([#10439](https://github.com/angular/angular/issues/10439)) ([e0eea6c](https://github.com/angular/angular/commit/e0eea6c))
-* **forms:** add modules for forms and deprecatedForms ([#9859](https://github.com/angular/angular/issues/9859)) ([9d265b6](https://github.com/angular/angular/commit/9d265b6)), closes [#9732](https://github.com/angular/angular/issues/9732)
-* **forms:** allow both patching and strict setting of values ([#10537](https://github.com/angular/angular/issues/10537)) ([fcafdff](https://github.com/angular/angular/commit/fcafdff))
-* **forms:** updateValue() for form groups and form arrays ([#9901](https://github.com/angular/angular/issues/9901)) ([30a332e](https://github.com/angular/angular/commit/30a332e)), closes [#9553](https://github.com/angular/angular/issues/9553)
-* **HtmlLexer:** better hint on unclosed ICU message errors ([4117836](https://github.com/angular/angular/commit/4117836)), closes [#10227](https://github.com/angular/angular/issues/10227)
-* **http:** add content-type override support for http request ([#10211](https://github.com/angular/angular/issues/10211)) ([bdb5912](https://github.com/angular/angular/commit/bdb5912))
-* **http:** add options method to Http ([#10540](https://github.com/angular/angular/issues/10540)) ([0bd97ec](https://github.com/angular/angular/commit/0bd97ec)), closes [#10500](https://github.com/angular/angular/issues/10500) [#7918](https://github.com/angular/angular/issues/7918)
-* **http:** add support for ArrayBuffer ([1266460](https://github.com/angular/angular/commit/1266460))
-* **http:** add support for blob as a response type ([#10190](https://github.com/angular/angular/issues/10190)) ([76b8a49](https://github.com/angular/angular/commit/76b8a49))
-* **i18n:** merge translations ([7a8ef1e](https://github.com/angular/angular/commit/7a8ef1e))
-* **i18n:** xmb serializer ([cc5cfe8](https://github.com/angular/angular/commit/cc5cfe8))
-* **i18n:** xtb serializer ([0eee1d5](https://github.com/angular/angular/commit/0eee1d5))
-* **I18nAst:** introduce an intermediate AST ([48f230a](https://github.com/angular/angular/commit/48f230a))
-* **ICU:** enable ICU extraction even when when in is not used ([3050ae1](https://github.com/angular/angular/commit/3050ae1))
-* **ICU:** extract ICU messages ([28e8b2f](https://github.com/angular/angular/commit/28e8b2f))
-* **NgStyle:** add support for the style.unit notation ([#10496](https://github.com/angular/angular/issues/10496)) ([8b18ef4](https://github.com/angular/angular/commit/8b18ef4)), closes [#10326](https://github.com/angular/angular/issues/10326)
-* **ngUpgrade:** add support for NgModules ([6b564ec](https://github.com/angular/angular/commit/6b564ec))
-* **NumberPipe:** add string support ([#10163](https://github.com/angular/angular/issues/10163)) ([f3dd91e](https://github.com/angular/angular/commit/f3dd91e)), closes [#10159](https://github.com/angular/angular/issues/10159)
-* **security:** categorize <track src> as a regular URL. ([a441b5b](https://github.com/angular/angular/commit/a441b5b)), closes [#10089](https://github.com/angular/angular/issues/10089)
-* **security:** only warn when actually sanitizing HTML. ([#10272](https://github.com/angular/angular/issues/10272)) ([482c019](https://github.com/angular/angular/commit/482c019)), closes [#10206](https://github.com/angular/angular/issues/10206)
-* **security:** trust resource URLs as URLs. ([#10220](https://github.com/angular/angular/issues/10220)) ([51f3d22](https://github.com/angular/angular/commit/51f3d22))
-* **testing:** add implicit test module ([8d746e3](https://github.com/angular/angular/commit/8d746e3)), closes [#9846](https://github.com/angular/angular/issues/9846)
-* **xmb/xtb:** support dtd ([e34a04d](https://github.com/angular/angular/commit/e34a04d))
-
-
-### BREAKING CHANGES
-
-* core:
-
-  ## Bootstrap changes
-  ```
-  import {NgModule} from '@angular/core';
-
-  @NgModule({
-    declarations: […], // directives, components, and pipes owned by this NgModule
-    imports: [BrowserModule],
-    providers: […], // additional providers
-    bootstrap: [MainComponent],
-  })
-  class MyAppModule {}
-
-  // Ahead of Time compile
-  import {platformBrowser} from ‘@angular/platform-browser’;
-
-  platformBrowser().bootstrapModuleFactory(MyAppModuleNgFactory);
-
-  // JIT compile long form
-  import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’;
-
-  platformBrowserDynamic().bootstrapModule(MyAppModule);
-  ```
-* browser:
-  - short form bootstrap does no longer allow
-    to inject compiler internals (i.e. everything
-    from `@angular/compiler`). Inject `Compiler` instead.
-* core:
-  - `ApplicationRef.waitForAsyncInitializers` is deprecated. Use
-  `AppInitStatus.donePromise` / `AppInitStatus.done` instead.
-* core:
-  - `ApplicationRef.registerBootstrapListener` is deprecated. Provide a multi
-  provider for the new token `APP_BOOTSTRAP_LISTENER` instead.
-* core:
-  - `ApplicationRef.dispose` is deprecated. Destroy the module that was
-    created during bootstrap instead by calling `NgModuleRef.destroy`.
-  - `ApplicationRef.registerDisposeListener` is deprecated.
-    Use the `ngOnDestroy` lifecycle hook for providers or
-    `NgModuleRef.onDestroy` instead.
-  - `disposePlatform` is deprecated. Use `destroyPlatform` instead.
-  - `PlatformRef.dipose()` is deprecated. Use `PlatformRef.destroy()`
-    instead.
-  - `PlatformRef.registerDisposeListener` is deprecated. Use
-    `PlatformRef.onDestroy` instead.
-  - `PlaformRef.diposed` is deprecated. Use `PlatformRef.destroyed`
-    instead.
-* testing:
-  * `withProviders`, use `TestBed.withModule` instead
-  * `addProviders`, use `TestBed.configureTestingModule` instead
-  * `TestComponentBuilder`, use `TestBed.configureTestModule` / `TestBed.override...` / `TestBed.createComponent` instead.
-* core:
-  - ES5 users can no longer use the `View(…)` function to provide `ViewMetadata`.
-  This mirrors the removal of the `@View` decorator a while ago.
-* core:
-  - `bootstrapModule` and `bootstrapModuleFactory` have been moved to be members of `PlaformRef`.
-    E.g. `platformBrowserDynamic().bootstrapModule(MyModule)`.
-* core:
-  - By default, Angular will error during parsing
-  on unknown properties,
-  even if they are on elements with a `-` in their name
-  (aka custom elements). If you application is using
-  custom elements, fill the new parameter `@NgModule.schemas`
-  with the value `[CUSTOM_ELEMENTS_SCHEMA]`.
-
-  E.g. :
-  ```
-    @NgModule({
-      declarations: [MyComponentThatUsesAWebComponent],
-      imports: [BrowserModule],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      bootstrap:  [MyComponentThatUsesAWebComponent],
-    })
-    export class MyAppModule{}
-  ```
-* core:
-  - `coreLoadAndBootstrap` and `coreBootstrap` can't be used any more (without migration support).
-    Use `bootstrapModule` / `bootstrapModuleFactory` instead.
-  - All Components listed in routes have to be part of the `declarations` of an NgModule.
-    Either directly on the bootstrap module / lazy loaded module, or in an NgModule imported by them.
-* core:
-  - `ApplicationRef.run` is deprecated. Use `NgZone.run` directly
-  - `ApplicationRef.injector` is deprecated. Inject an `Injector` or
-    use `NgModuleRef.injector` instead
-  - `ApplicationRef.zone` is deprecated. Inject `NgZone` instead.
-* testing: `TestInjector` is now renamed to `TestBed`
-
-  Before:
-
-  ```js
-  import {TestInjector, getTestInjector} from '@angular/core/testing';
-  ```
-
-  After:
-
-  ```js
-  import {TestBed, getTestBed} from '@angular/core/testing';
-  ```
-* http: The behavior in this commit is the same as before PR 7260 : the objects sent with the request are converted to a string, therefore there is no need for the user to take care of the serialization.
-* platform-browser: The following API was never intended to be public and is removed:
-
-  ```js
-  import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
-  ```
-
-  Consider using Protractor's console plugin: https://github.com/angular/protractor-console-plugin
-* ICU:
-
-  "{" is used a a delimiter for ICU messages then it could not be used in text nodes.
-  "{" should be escaped as "{{ '{' }}"
-
-  Before:
-
-      <span>some { valid } text</span>
-
-  After:
-
-      <span>some { invalid } text<span> <!-- throw parse error -->
-      <span>some {{ '{' }} valid } text</span>
-* core: (deprecations)
-
-  - Instead of `coreBootstrap`, create an `@NgModule` and use `bootstrapModule`.
-  - Instead of `coreLoadAndBootstarp`, create an `@NgModule` and use `bootstrapModuleFactory`.
-  - Instead of `bootstrapWorkerApp`, create an `@NgModule` that includes the `WorkerAppModule` and use `bootstrapModule` with the `workerAppPlatform()`.
-  - Instead of `bootstrapWorkerUi`, create an @AppModule that includes the `WorkerUiModule` and use `bootstrapModule` with the `workerUiPlatform()` instead.
-  - Instead of `serverBootstrap`, create an @AppModule and use `bootstrapModule` with the `serverDynamicPlatform()` instead.
-  - Instead of `PLATFORM_PIPES` and `PLATFORM_DIRECTIVES`, provide platform directives/pipes via an `@NgModule`.
-  - Instead of `ComponentResolver`:
-    - use `ComponentFactoryResolver` together with `@NgModule.entryComponents` or `ANALYZE_FOR_ENTRY_COMPONENTS` provider for dynamic component creation.
-    - use `NgModuleFactoryLoader` for lazy loading.
-  - Instead of `SystemJsComponentResolver`, create an `@NgModule` and use `SystemJsNgModuleLoader`.
-  - Instead of `SystemJsCmpFactoryResolver`, create an `@NgModule` and use `SystemJsNgModuleFactoryLoader`
-* core:
-  - `lockRunMode` is deprecated and no more needed.
-* animations:
-  - animation trigger expressions within the template that are assigned as
-  an element attribute (e.g. `@prop`) are deprecated. Please use the
-  Angular2 property binding syntax (e.g. `[@prop]`) when assigning
-  properties.
-
-  ```ts
-  // this is now deprecated
-  <div @trigger="expression"></div>
-
-  // do this instead
-  <div [@trigger]="expression"></div>
-  ```
-
-* forms:
-
-  We have removed the deprecated form directives from the built-in platform directive list, so apps are not required to package forms with their app. This also makes forms friendly to offline compilation.
-
-  Instead, we have exposed three modules:
-
-  OLD API:
-  - `DeprecatedFormsModule`
-
-  NEW API:
-  - `FormsModule`
-  - `ReactiveFormsModule`
-
-  If you provide one of these modules, the default forms directives and providers from that module will be available to you app-wide.  Note: You can provide both the `FormsModule` and the `ReactiveFormsModule` together if you like, but they are fully-functional separately.
-
-  **Before:**
-  ```ts
-  import {disableDeprecatedForms, provideForms} from @angular/forms;
-
-  bootstrap(App, [
-    disableDeprecatedForms(),
-    provideForms()
-  ]);
-  ```
-
-  **After:**
-
-  ```ts
-  import {DeprecatedFormsModule} from @angular/common;
-
-  @NgModule({
-    declarations: [MyComponent],
-    imports: [BrowserModule, DeprecatedFormsModule],
-    bootstrap:  [MyComponent],
-  })
-  export class MyAppModule{}
-  ```
-* testing:
-  - Application providers can no longer inject compiler internals (i.e. everything
-  from `@angular/compiler`). Inject `Compiler` instead. This reflects the
-  changes to `bootstrap` for module support (3f55aa609f60f130f1d69188ed057214b1267cb3).
-  - Compiler providers can no longer be added via `addProviders` / `withProviders`.
-    Use the new method `configureCompiler` instead.
-  - Platform directives / pipes need to be provided via
-    `configureModule` and can no longer be provided via the
-    `PLATFORM_PIPES` / `PLATFORM_DIRECTIVES` tokens.
-  - `setBaseTestProviders()` was renamed into `initTestEnvironment` and
-    now takes a `PlatformRef` and a factory for a
-    `Compiler`.
-  - E.g. for the browser platform:
-
-    BEFORE:
-    ```
-    import {setBaseTestProviders} from ‘@angular/core/testing’;
-    import {TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-        TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS} from ‘@angular/platform-browser-dynamic/testing’;
-
-    setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-        TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
-    ```
-
-    AFTER:
-    ```
-    import {TestBed} from ‘@angular/core/testing’;
-    import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from ‘@angular/platform-browser-dynamic/testing’;
-
-    TestBed.initTestEnvironment(
-        BrowserDynamicTestingModule,
-        platformBrowserDynamicTesting()
-        );
-
-    ```
-  - E.g. for the server platform:
-
-    BEFORE:
-    ```
-    import {setBaseTestProviders} from ‘@angular/core/testing’;
-    import {TEST_SERVER_PLATFORM_PROVIDERS,
-        TEST_SERVER_APPLICATION_PROVIDERS} from ‘@angular/platform-server/testing/server’;
-
-    setBaseTestProviders(TEST_SERVER_PLATFORM_PROVIDERS,
-        TEST_SERVER_APPLICATION_PROVIDERS);
-    ```
-
-    AFTER:
-    ```
-    import {TestBed} from ‘@angular/core/testing’;
-    import {ServerTestingModule, serverTestingPlatform} from ‘@angular/platform-browser-dynamic/testing’;
-
-    TestBed.initTestEnvironment(
-        ServerTestingModule,
-        serverTestingPlatform()
-        );
-    ```
-
-  Related to #9726
-* ngUpgrade: UpgradeAdapter.addProvider are now deprecated in favor of passing in an NgModule into the adapter's constructor
-
-  Before:
-
-  ```
-  let upgradeAdapter = new UpgradeAdapter();
-  upgradeAdapter.addProviders([myProvidersArray);
-  ```
-
-  After:
-
-  ```
-  @NgModule({
-    providers: myProvidersArray
-  })
-  class MyModule {}
-
-  let upgradeAdapter = new UpgradeAdapter(MyModule);
-  ```
-
-  * ngModel: `ngModel` is now always asynchronous when updating. This means that in tests, instead of calling `ComponentFixture.detectChanges`, you'll need to use `ComponentFixture.whenStable`, which is asynchronous.
-
-  Before:
-
-  ```js
-      let fixture = TestBed.createComponent(InputComp);
-      fixture.detectChanges();
-
-      let inputBox = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
-      expect(inputBox.value).toEqual('Original Name');
-  ```
-
-  After:
-  ```js
-      let fixture = TedBed.createComponent(InputComp);
-      fixture.whenStable().then(() => {
-        let inputBox = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
-        expect(inputBox.value).toEqual('Original Name');
-     });
-  ```
-
-### ROUTER CHANGE LOG
-
-[You can find the router changelog here.](https://github.com/angular/angular/blob/master/packages/router/CHANGELOG.md)
-
-<a name="2.0.0-rc.4"></a>
-# [2.0.0-rc.4](https://github.com/angular/angular/compare/2.0.0-rc.3...2.0.0-rc.4) (2016-06-30)
-
-
-### Bug Fixes
-
-* **animations:** ensure void => * animations are triggered when an expression is omitted ([e0b0a59](https://github.com/angular/angular/commit/e0b0a59)), closes [#9327](https://github.com/angular/angular/issues/9327) [#9381](https://github.com/angular/angular/issues/9381)
-* **animations:** make sure the easing value is passed into the web-animations player ([c43aec2](https://github.com/angular/angular/commit/c43aec2)), closes [#9517](https://github.com/angular/angular/issues/9517) [#9523](https://github.com/angular/angular/issues/9523)
-* **common:** add license header to localization.ts ([5150344](https://github.com/angular/angular/commit/5150344))
-* **common/testing:** remove internal MockLocationStrategy from common/testing ([#9562](https://github.com/angular/angular/issues/9562)) ([dcf7512](https://github.com/angular/angular/commit/dcf7512))
-* **compiler:** don't inject `viewProviders` into content child elements ([9ed8f2d](https://github.com/angular/angular/commit/9ed8f2d))
-* **compiler:** make code easier to type check ([51d4c9d](https://github.com/angular/angular/commit/51d4c9d)), closes [#9701](https://github.com/angular/angular/issues/9701)
-* **compiler:** report not existing files as errors ([e81dea6](https://github.com/angular/angular/commit/e81dea6)), closes [#9690](https://github.com/angular/angular/issues/9690)
-* **Compiler:** relax childIsRecursive check ([#8705](https://github.com/angular/angular/issues/8705)) ([3d5bb23](https://github.com/angular/angular/commit/3d5bb23))
-* **core:** improve error message for broken bindings ([df759b8](https://github.com/angular/angular/commit/df759b8)), closes [#6820](https://github.com/angular/angular/issues/6820) [#9536](https://github.com/angular/angular/issues/9536)
-* **core:** properly report missing providers and viewProviders ([#9411](https://github.com/angular/angular/issues/9411)) ([f114dd3](https://github.com/angular/angular/commit/f114dd3)), closes [#8237](https://github.com/angular/angular/issues/8237)
-* **core:** report duplicate template bindings in templates ([098b461](https://github.com/angular/angular/commit/098b461)), closes [#7315](https://github.com/angular/angular/issues/7315) [#9462](https://github.com/angular/angular/issues/9462)
-* **core/testing:** clean up the core testing public API ([#9466](https://github.com/angular/angular/issues/9466)) ([8a9e9c7](https://github.com/angular/angular/commit/8a9e9c7))
-* **core/testing:** move ComponentFixture to core ([#9386](https://github.com/angular/angular/issues/9386)) ([1143b03](https://github.com/angular/angular/commit/1143b03))
-* **core/testing compiler/testing:** move TestComponentBuilder to core/testing ([#9590](https://github.com/angular/angular/issues/9590)) ([a33195d](https://github.com/angular/angular/commit/a33195d)), closes [#9585](https://github.com/angular/angular/issues/9585)
-* **forms:** add select multiple accessor as built-in accessor ([9f00a1b](https://github.com/angular/angular/commit/9f00a1b))
-* **forms:** async validator-directives process Observables correctly ([#8186](https://github.com/angular/angular/issues/8186)) ([eef9512](https://github.com/angular/angular/commit/eef9512))
-* **forms:** emit statusChange when child controls have async validator ([#9652](https://github.com/angular/angular/issues/9652)) ([797914e](https://github.com/angular/angular/commit/797914e))
-* **forms:** make radio button selection logic more flexible ([#9646](https://github.com/angular/angular/issues/9646)) ([ed0ade6](https://github.com/angular/angular/commit/ed0ade6)), closes [#9558](https://github.com/angular/angular/issues/9558)
-* **forms:** ngModel should emit valueChanges and statusChanges asynchronously ([97a2119](https://github.com/angular/angular/commit/97a2119))
-* **http:** add search param escaping for keys ([#9166](https://github.com/angular/angular/issues/9166)) ([a5f2e20](https://github.com/angular/angular/commit/a5f2e20))
-* **http:** don't encode values that are allowed in query ([#9651](https://github.com/angular/angular/issues/9651)) ([1620426](https://github.com/angular/angular/commit/1620426)), closes [#9348](https://github.com/angular/angular/issues/9348)
-* **ngc:** correct dependencies for compiler-cli ([826f89f](https://github.com/angular/angular/commit/826f89f)), closes [#9540](https://github.com/angular/angular/issues/9540)
-* **ngc:** work with typescript[@next](https://github.com/next) ([f463e09](https://github.com/angular/angular/commit/f463e09))
-* **NgSwitch:** display deprecation message only once ([398060d](https://github.com/angular/angular/commit/398060d))
-* **platform-browser/testing:** clean up public api for platform-browser/testing ([#9519](https://github.com/angular/angular/issues/9519)) ([3d8eb8c](https://github.com/angular/angular/commit/3d8eb8c))
-* **platform-browser/testing-e2e:** clean up unused exports from e2e testing helpers ([#9387](https://github.com/angular/angular/issues/9387)) ([894747c](https://github.com/angular/angular/commit/894747c))
-* **public API:** update golden files ([ae4fa56](https://github.com/angular/angular/commit/ae4fa56))
-* **security:** allow empty CSS values. ([#9675](https://github.com/angular/angular/issues/9675)) ([2d9d7f1](https://github.com/angular/angular/commit/2d9d7f1))
-* **security:** no warning when sanitizing escaped html ([#9392](https://github.com/angular/angular/issues/9392)) ([#9413](https://github.com/angular/angular/issues/9413)) ([98cef76](https://github.com/angular/angular/commit/98cef76))
-* **testing:** remove the `toMatchPattern` matcher (jasmine has `toMatch`) ([6420f75](https://github.com/angular/angular/commit/6420f75))
-* public api surface fixes + stability markers ([24eb838](https://github.com/angular/angular/commit/24eb838)), closes [#9236](https://github.com/angular/angular/issues/9236) [#9235](https://github.com/angular/angular/issues/9235)
-* support *directive on `<template>` ([#9691](https://github.com/angular/angular/issues/9691)) ([3fec279](https://github.com/angular/angular/commit/3fec279)), closes [#7315](https://github.com/angular/angular/issues/7315)
-* **testing:** remove the `toThrowErrorWith` matcher (jasmine has `toThrowError`) ([e1e5c40](https://github.com/angular/angular/commit/e1e5c40))
-* **typings:** don't test compiler-cli typings on TS 1.8 ([54dbed4](https://github.com/angular/angular/commit/54dbed4))
-* **upgrade:** add peerDependency on platform-browser-dynamic ([#9674](https://github.com/angular/angular/issues/9674)) ([e2116c5](https://github.com/angular/angular/commit/e2116c5)), closes [#9623](https://github.com/angular/angular/issues/9623)
-
-
-### Features
-
-* **compiler:** support sync runtime compile ([bf598d6](https://github.com/angular/angular/commit/bf598d6)), closes [#7084](https://github.com/angular/angular/issues/7084) [#9594](https://github.com/angular/angular/issues/9594)
-* **core:** add `[@Component](https://github.com/Component).precompile` and `ComponentFactoryResolver` ([6c5b653](https://github.com/angular/angular/commit/6c5b653)), closes [#9543](https://github.com/angular/angular/issues/9543)
-* **core:** split ChangeDetectorStrategy into ChangeDetectionStrategy and ChangeDetectorStatus ([e12b127](https://github.com/angular/angular/commit/e12b127))
-* **DomRenderer:** Adding support for document fragments in SVG foreign objects ([#9458](https://github.com/angular/angular/issues/9458)) ([3644eef](https://github.com/angular/angular/commit/3644eef))
-* **forms:** add support for formArrayName ([c03e1f2](https://github.com/angular/angular/commit/c03e1f2)), closes [#9251](https://github.com/angular/angular/issues/9251)
-* **forms:** add support for standalone ngModel dirs inside forms ([6edf047](https://github.com/angular/angular/commit/6edf047)), closes [#9230](https://github.com/angular/angular/issues/9230)
-* **forms:** expose ValidatorFn and AsyncValidatorFn ([17dcbf6](https://github.com/angular/angular/commit/17dcbf6)), closes [#8834](https://github.com/angular/angular/issues/8834)
-* **forms:** make valueChanges and statusChanges available on abstract control directives ([de12710](https://github.com/angular/angular/commit/de12710))
-* **forms:** support updating of validators on exiting controls ([#9516](https://github.com/angular/angular/issues/9516)) ([638fd74](https://github.com/angular/angular/commit/638fd74))
-* **forms:** use formControlName on radio buttons when name is absent ([#9681](https://github.com/angular/angular/issues/9681)) ([0961bd1](https://github.com/angular/angular/commit/0961bd1))
-* **QueryList:** implement some() ([#9464](https://github.com/angular/angular/issues/9464)) ([f6a410a](https://github.com/angular/angular/commit/f6a410a)), closes [#9443](https://github.com/angular/angular/issues/9443)
-* **router:** add pathMatch property to replace terminal ([fcfddbf](https://github.com/angular/angular/commit/fcfddbf))
-* **router:** implement data and resolve ([f2f1ec0](https://github.com/angular/angular/commit/f2f1ec0))
-* **router:** use componentFactoryResolver ([dc64e90](https://github.com/angular/angular/commit/dc64e90))
-* **security:** allow more HTML5 elements and attributes in sanitizers ([6605eb3](https://github.com/angular/angular/commit/6605eb3)), closes [#9438](https://github.com/angular/angular/issues/9438)
-
-
-### BREAKING CHANGES
-
-* http: The changes to Http's URLSearchParams serialization now
-  prevent encoding of these characters inside query parameters
-  which were previously converted to percent-encoded values `@ : $ , ; + ; ? /`
-
-  The default encoding behavior can be overridden by extending
-  QueryEncoder, as documented in the URLSearchParams service.
-* Previously multiple template bindings on one element
-  (ex. `<div *ngIf='..' *ngFor='...'>`) were allowed but most of the time
-  were leading to undesired result. It is possible that a small number
-  of applications will see template parse errors that should be fixed by
-  nesting elements or using `<template>` tags explicitly.
-* DomEventsPlugin and KeyEventsPlugin previously exported from core are no longer public - these classes are implementation detail.
-
-  Previously deprecated BROWSER_PROVIDERS was completely removed from platform-browser.
-* core/testing compiler/testing: `TestComponentBuilder` is now imported from `@angular/core/testing`. Imports
-  from `@angular/compiler/testing` are deprecated.
-
-  Before:
-
-  ```
-  import {TestComponentBuilder, TestComponentRenderer, ComponentFixtureAutoDetect} from '@angular/compiler/testing';
-  ```
-
-  After:
-  ```
-  import {TestComponentBuilder, TestComponentRenderer, ComponentFixtureAutoDetect} from '@angular/core/testing';
-  ```
-* common/testing: MockLocationStrategy was intended to be internal only and is now removed
-  from the `@angular/common/testing` public api.
-
-  Use `SpyLocation` from `@angular/common/testing` for location testing.
-* compiler: `TestComponentBuilder.createSync` now takes a component type
-  and throws if not all templates are either inlined
-  are compiled before via `createAsync`.
-* core/testing: Remove the following APIs from `@angular/core/testing`, which have been deprecated or were
-  never intended to be publicly exported:
-
-  ```
-  injectAsync
-  clearPendingTimers
-  Log
-  MockAppliacationHref
-  MockNgZone
-  clearPendingTimers
-  getTypeOf
-  instantiateType
-  ```
-
-  Instead of `injectAsync`, use `async(inject())`.
-
-  `clearPendingTimers` is no longer required.
-* platform-browser/testing: The following are no longer publicly exported APIs. They were intended as internal
-  utilities and you should use your own util:
-
-  ```
-  browserDetection,
-  dispatchEvent,
-  el,
-  normalizeCSS,
-  stringifyElement,
-  expect (and custom matchers for Jasmine)
-  ```
-* testing:
-
-  Before:
-
-      expect(...).toThrowErrorWith(msg);
-
-  After:
-
-      expect(...).toThrowError(msg);
-
-  Before:
-
-      expect(...).toMatchPattern(pattern);
-
-  After:
-
-      expect(...).toMatch(pattern);
-* core/testing: `ComponentFixture` will be moving out of `@angular/compiler/testing` to `@angular/core/testing` in
-  this release. For now, it is deprecated from `@angular/compiler/testing`.
-
-
-* The async function now determines whether it should return a promise
-  or instead call a done function parameter. Importing Jasmine functions
-  from `@angular/core/testing` is no longer necessary and is now deprecated.
-
-  Additionally, beforeEachProviders is also deprecated, as it is specific
-  to the testing framework. Instead, use the new addProviders method directly.
-
-  Before:
-  ```js
-  import {beforeEachProviders, it, describe, inject} from '@angular/core/testing';
-
-  describe('my code', () => {
-    beforeEachProviders(() => [MyService]);
-
-    it('does stuff', inject([MyService], (service) => {
-      // actual test
-    });
-  });
-  ```
-
-  After:
-  ```js
-  import {addProviders, inject} from '@angular/core/testing';
-
-  describe('my code', () => {
-    beforeEach(() => {
-      addProviders([MyService]);
-    });
-
-    it('does stuff', inject([MyService], (service) => {
-      // actual test
-    }));
-  });
-  ```
-
-<a name="2.0.0-rc.3"></a>
-# 2.0.0-rc.3 (2016-06-21)
-
-
-### Bug Fixes
-
-* **animations:** ensure starting styles are applied when a delay is present ([ba46ca6](https://github.com/angular/angular/commit/ba46ca6)), closes [#9326](https://github.com/angular/angular/issues/9326) [#9328](https://github.com/angular/angular/issues/9328)
-* **BrowserUtil:** fix `supportsIntlApi()`  ([76a4187](https://github.com/angular/angular/commit/76a4187))
-* **change_detection:** ChangeDetectorRef reattach should restore original mode ([773c349](https://github.com/angular/angular/commit/773c349)), closes [#7078](https://github.com/angular/angular/issues/7078) [#7080](https://github.com/angular/angular/issues/7080)
-* **compiler:** codegen view query generic types ([e157a06](https://github.com/angular/angular/commit/e157a06))
-* **compiler:** properly report unresolved dependencies ([fdf6bc1](https://github.com/angular/angular/commit/fdf6bc1)), closes [#9332](https://github.com/angular/angular/issues/9332) [#9341](https://github.com/angular/angular/issues/9341)
-* **compiler:** StaticReflector ignores unregistered decorators. (#9266) ([791153c](https://github.com/angular/angular/commit/791153c)), closes [#9265](https://github.com/angular/angular/issues/9265)
-* **core/testing:** show full error ([297f0fd](https://github.com/angular/angular/commit/297f0fd))
-* **forms:** ngModel should export as ngModel ([8e6e90e](https://github.com/angular/angular/commit/8e6e90e))
-* **guards:** Cancel in-flight guards if one returns false ([97cf0e4](https://github.com/angular/angular/commit/97cf0e4))
-* **HtmlParser:** add missing ; ([c60ef45](https://github.com/angular/angular/commit/c60ef45))
-* **HtmlParser:** consider `<ng-container>` when adding required parents ([9ba400d](https://github.com/angular/angular/commit/9ba400d))
-* **HtmlParser:** do not add required parents to template root elements ([e484c62](https://github.com/angular/angular/commit/e484c62)), closes [#5967](https://github.com/angular/angular/issues/5967)
-* **HTTP/XhrBackend:** correctly set the status code on errors (#9355) ([12c4904](https://github.com/angular/angular/commit/12c4904)), closes [angular/http#54](https://github.com/angular/http/issues/54)
-* **NumberPipe:** fix broken RegExp ([49bf3f5](https://github.com/angular/angular/commit/49bf3f5))
-* **partition:** fix partition when `<!-- i18n -->` is the only child ([58b18d7](https://github.com/angular/angular/commit/58b18d7))
-* **perf:** support prod mode again ([c0f2a22](https://github.com/angular/angular/commit/c0f2a22)), closes [#9318](https://github.com/angular/angular/issues/9318) [#8508](https://github.com/angular/angular/issues/8508) [#9318](https://github.com/angular/angular/issues/9318)
-* **platform-server:** cleanup public api of platform-server ([8675b8d](https://github.com/angular/angular/commit/8675b8d)), closes [#9237](https://github.com/angular/angular/issues/9237) [#9205](https://github.com/angular/angular/issues/9205)
-* **upgrade:** fix bundling issue and fix e2e test ([8c076d5](https://github.com/angular/angular/commit/8c076d5)), closes [#9244](https://github.com/angular/angular/issues/9244)
-* **XmbSerializer:** add meaning attribute, escape attribute values ([c9c81e1](https://github.com/angular/angular/commit/c9c81e1))
-
-### Features
-
-* **benchpress:** add custom user metric to benchpress ([6686bc6](https://github.com/angular/angular/commit/6686bc6)), closes [#9229](https://github.com/angular/angular/issues/9229)
-* **compiler:** make interpolation symbols configurable (`@Component` config) (#9367) ([1b28cf7](https://github.com/angular/angular/commit/1b28cf7)), closes [#9158](https://github.com/angular/angular/issues/9158)
-* **compiler-cli:** add a `debug` option to control the output ([1eaa193](https://github.com/angular/angular/commit/1eaa193)), closes [#9208](https://github.com/angular/angular/issues/9208)
-* **core:** ensure CSS parser tracks start/end values and understands complex pseudo selecto ([935c39a](https://github.com/angular/angular/commit/935c39a))
-* **datePipe:** numeric string support ([5c8d315](https://github.com/angular/angular/commit/5c8d315))
-* **DomElementSchemaRegistry:** add support for `<ng-content>` and `<ng-container>` ([b620f4f](https://github.com/angular/angular/commit/b620f4f))
-* **I18N Expander:** do not add extra `<ul>` & `<li>` around ICU messages (#9283) ([721f53f](https://github.com/angular/angular/commit/721f53f)), closes [#9072](https://github.com/angular/angular/issues/9072)
-* **MessageExtractor:** do not expand ICU messages before extraction ([04a50f5](https://github.com/angular/angular/commit/04a50f5))
-* **QueryList:** support index in callbacks ([5fe6075](https://github.com/angular/angular/commit/5fe6075)), closes [#9278](https://github.com/angular/angular/issues/9278)
-* **radio:** support radio button sharing a control ([39e0b49](https://github.com/angular/angular/commit/39e0b49))
-* **security:** fail more detectably when using a safe value in an interpolation. ([8879aa1](https://github.com/angular/angular/commit/8879aa1))
-
-
-### BREAKING CHANGES
-
-* Parse5Adapter is no longer exported as public API, use serverBootstrap()
-Parse5Adapter is an implementation detail not a public API
-
-* `containsRegexp` is no more exported from `@angular/core/testing`. It should not have been part of the public API in the first place.
-
-
-<a name="2.0.0-rc.2"></a>
-# 2.0.0-rc.2 (2016-06-15)
-
-
-### Bug Fixes
-
-* **Animation:** Problem with decimals using commas as decimal separation ([5f3d02b](https://github.com/angular/angular/commit/5f3d02b)), closes [#6335](https://github.com/angular/angular/issues/6335) [#6338](https://github.com/angular/angular/issues/6338)
-* **animations:** Ensure AUTO styles are cleared at the end of the state-change animation ([55860e1](https://github.com/angular/angular/commit/55860e1)), closes [#9014](https://github.com/angular/angular/issues/9014) [#9015](https://github.com/angular/angular/issues/9015)
-* **animations:** Ensure the web-animations driver converts style props to camel-case ([4d51158](https://github.com/angular/angular/commit/4d51158)), closes [#9111](https://github.com/angular/angular/issues/9111) [#9112](https://github.com/angular/angular/issues/9112)
-* **bootstrap:** Swap coreBootstrap() and coreLoadAndBootstrap() arguments ([f95a604](https://github.com/angular/angular/commit/f95a604))
-* **browser:** Platform code cleanup ([75e6dfb](https://github.com/angular/angular/commit/75e6dfb))
-* **build:** Change publish-build-artifacts.sh to work with new packaging system ([d414734](https://github.com/angular/angular/commit/d414734))
-* **build:** Declare the secure GITHUB_TOKEN_ANGULAR for package publishing from Travis ([ff40072](https://github.com/angular/angular/commit/ff40072))
-* **build:** Fix an error in package publishing step where the script errors when a UMD bundl ([bac1a6e](https://github.com/angular/angular/commit/bac1a6e))
-* **build:** Fix broken e2e test Travis task by running the right variation of sed on Travis ([267d864](https://github.com/angular/angular/commit/267d864))
-* **build:** Force a compatible baseURL for systemjs-builder ([e0c83f6](https://github.com/angular/angular/commit/e0c83f6)), closes [#7167](https://github.com/angular/angular/issues/7167) [#7360](https://github.com/angular/angular/issues/7360)
-* **build:** Hook up publish-build-artifacts to Travis ([97a1084](https://github.com/angular/angular/commit/97a1084))
-* **build:** Release compiler_cli packages along with rest of @angular packages and use ANGUL ([9a05ca9](https://github.com/angular/angular/commit/9a05ca9))
-* **build:** update API spec to include the return value. ([b60eecf](https://github.com/angular/angular/commit/b60eecf))
-* **ci:** extra API in public_api_spec ([f154e2c](https://github.com/angular/angular/commit/f154e2c))
-* **ci:** incorrect import ([cb980d3](https://github.com/angular/angular/commit/cb980d3))
-* **ci:** make ci fail when compiler integration test fails ([5941c92](https://github.com/angular/angular/commit/5941c92a31aee3b7e0300f5ab91acb3c68b95171))
-* **codegen:** codegen all files in the program, not just roots ([0d71345](https://github.com/angular/angular/commit/0d71345)), closes [#8475](https://github.com/angular/angular/issues/8475)
-* **compiler:** Support for comment finishing with multiple dashes ([60a2ba8](https://github.com/angular/angular/commit/60a2ba8)), closes [#7119](https://github.com/angular/angular/issues/7119)
-* **compiler:** Added support for '* as m' style imports. (#9077) ([e178ee4](https://github.com/angular/angular/commit/e178ee4))
-* **compiler:** Added unit test to ReflectorHost and fixed issues (#9052) ([0658eb4](https://github.com/angular/angular/commit/0658eb4)), closes [(#9052](https://github.com/(/issues/9052)
-* **compiler:** allow --noImplicitAny ([817ddfa](https://github.com/angular/angular/commit/817ddfa))
-* **compiler:** allow decorators defined in the same file ([c1154b3](https://github.com/angular/angular/commit/c1154b3))
-* **compiler:** emit correct types for literal arrays and maps. ([a81923b](https://github.com/angular/angular/commit/a81923b))
-* **compiler:** have CSS parser support nested parentheses inside functions ([ceac045](https://github.com/angular/angular/commit/ceac045)), closes [#7580](https://github.com/angular/angular/issues/7580)
-* **compiler:** Improved error reporting of the static reflector. ([cf3548a](https://github.com/angular/angular/commit/cf3548a)), closes [#8978](https://github.com/angular/angular/issues/8978) [#9011](https://github.com/angular/angular/issues/9011)
-* **compiler:** properly report missing DI tokens (#9065) ([3aca5ff](https://github.com/angular/angular/commit/3aca5ff)), closes [#8245](https://github.com/angular/angular/issues/8245)
-* **compiler:** Reflector generates imports for '..' relative modules. ([35ea02f](https://github.com/angular/angular/commit/35ea02f)), closes [#9003](https://github.com/angular/angular/issues/9003) [#9004](https://github.com/angular/angular/issues/9004)
-* **compiler:** report errors for queries without selectors (#9018) ([057abef](https://github.com/angular/angular/commit/057abef)), closes [#4489](https://github.com/angular/angular/issues/4489)
-* **compiler:** support lifecycle hooks in compiler_cli ([7150ace](https://github.com/angular/angular/commit/7150ace))
-* **compiler:** support string tokens with `.` inside. ([67c80fb](https://github.com/angular/angular/commit/67c80fb)), closes [#8178](https://github.com/angular/angular/issues/8178)
-* **compiler:** throw an error if variable with the same name is already defined. (#7209) ([9036f78](https://github.com/angular/angular/commit/9036f78))
-* **compiler_cli:** allow to use builtin directives like `NgIf`, … ([edec158](https://github.com/angular/angular/commit/edec158)), closes [#8454](https://github.com/angular/angular/issues/8454)
-* **compiler_cli:** normalize used directives ([ff36b03](https://github.com/angular/angular/commit/ff36b03)), closes [#8677](https://github.com/angular/angular/issues/8677)
-* **Control:** Support select multiple with Control class (#8069) ([84f859d](https://github.com/angular/angular/commit/84f859d))
-* **core:** accurate dev mode message for dart (#8403) ([19e6538](https://github.com/angular/angular/commit/19e6538))
-* **core:** don’t detach nested view containers when destroying a view ([e2b1e15](https://github.com/angular/angular/commit/e2b1e15)), closes [#8458](https://github.com/angular/angular/issues/8458) [#8471](https://github.com/angular/angular/issues/8471)
-* **core:** fix build ([3ff20cd](https://github.com/angular/angular/commit/3ff20cd))
-* **core:** fix type of `DebugNode.properties` (#8964) ([ddd2ac4](https://github.com/angular/angular/commit/ddd2ac4)), closes [(#8964](https://github.com/(/issues/8964)
-* **core:** Keep core exports separate from core/testing exports. ([f4f6b87](https://github.com/angular/angular/commit/f4f6b87))
-* **core:** Keep core exports separate from core/testing exports. (#8930) ([21fc1bb](https://github.com/angular/angular/commit/21fc1bb))
-* **core:** remove @internal annotation from PLATFORM_CORE_PROVIDERS ([2ab1085](https://github.com/angular/angular/commit/2ab1085)), closes [#8819](https://github.com/angular/angular/issues/8819)
-* **core:** QueryList documentation (#8976) ([b160ada](https://github.com/angular/angular/commit/b160ada))
-* **di:** type error in InvalidProviderError ([c43636f](https://github.com/angular/angular/commit/c43636f)), closes [#7729](https://github.com/angular/angular/issues/7729)
-* **doc:** Add missing comma in example (#8769) ([00475f2](https://github.com/angular/angular/commit/00475f2))
-* **docs:** Fix a missing opening bracket (#8331) ([d75f928](https://github.com/angular/angular/commit/d75f928)), closes [(#8331](https://github.com/(/issues/8331)
-* **DomRegistry:** fix svg support ([307d105](https://github.com/angular/angular/commit/307d105))
-* **facade:** change EventEmitter to be sync by default (#8761) ([e5904f4](https://github.com/angular/angular/commit/e5904f4))
-* **forms:** radio buttons with different names should not share state ([6dc88f5](https://github.com/angular/angular/commit/6dc88f5)), closes [#7051](https://github.com/angular/angular/issues/7051)
-* **forms:** rename old forms folder to forms-deprecated ([515a8e0](https://github.com/angular/angular/commit/515a8e0))
-* **forms:** update accessor value when native select value changes ([7a2ce7f](https://github.com/angular/angular/commit/7a2ce7f)), closes [#8710](https://github.com/angular/angular/issues/8710)
-* **forms:** update value and validity when controls are added ([50acb96](https://github.com/angular/angular/commit/50acb96)), closes [#8826](https://github.com/angular/angular/issues/8826)
-* **forms:** separate ngModelGroup from formGroupName ([5c0cfde](https://github.com/angular/angular/commit/5c0cfdee48ba5aa48528a1c20ffd99318ee716ae))
-* **HTMLParser:** properly report errors for not properly closed tags (#8999) ([6f281ab](https://github.com/angular/angular/commit/6f281ab)), closes [(#8999](https://github.com/(/issues/8999) [#7849](https://github.com/angular/angular/issues/7849)
-* **http:** remove peerDep on @angular/common ([29c2dcf](https://github.com/angular/angular/commit/29c2dcf))
-* **http:** respect custom Content-Type header in XHRConnection (#9131) ([537e99b](https://github.com/angular/angular/commit/537e99b)), closes [#9130](https://github.com/angular/angular/issues/9130)
-* **http:** Set response.ok ([9234035](https://github.com/angular/angular/commit/9234035)), closes [#6390](https://github.com/angular/angular/issues/6390) [#6503](https://github.com/angular/angular/issues/6503)
-* **Location:** make Location#platformStrategy:LocationStrategy property private ([e93b3d2](https://github.com/angular/angular/commit/e93b3d2))
-* **metadata:** Allow spacing in multiple selectors (#7418) ([b2e804c](https://github.com/angular/angular/commit/b2e804c))
-* **ngc:** depend on correct tsc-wrapped package ([16ef21d](https://github.com/angular/angular/commit/16ef21d))
-* **ngSwitch:** use switchCase instead of switchWhen (#9076) ([e1fcab7](https://github.com/angular/angular/commit/e1fcab7))
-* **ngUpgrade:** prevent digest already in progress (#9054) ([7cefec7](https://github.com/angular/angular/commit/7cefec7))
-* **pipes:** handle undefined value in slice ([83c19a1](https://github.com/angular/angular/commit/83c19a1)), closes [#7152](https://github.com/angular/angular/issues/7152)
-* **platform-browser:** fix rollup config ([f4b9728](https://github.com/angular/angular/commit/f4b9728))
-* **platform-browser:** split dynamic bits in platform-browser into platform-browser-dynamic ([6fc267f](https://github.com/angular/angular/commit/6fc267f22ccb392f2df9808d0415bc690b77a82f))
-* **platform-server:** should declare it's dependency on parse5 via package.json ([9485f5a](https://github.com/angular/angular/commit/9485f5a))
-* **platform-server:** correctly import private DOMTestComponentRenderer ([7afee97](https://github.com/angular/angular/commit/7afee97d1b837cdc808b0a5e5206c306f5700263))
-* **playground:** fix WebWorker single_thread example ([29c77df](https://github.com/angular/angular/commit/29c77df))
-* **query:** set fixed `@ViewChild` / `@ContentChild` right after the view is created ([c3d2459](https://github.com/angular/angular/commit/c3d2459)), closes [#9040](https://github.com/angular/angular/issues/9040)
-* **renderer:** remove unecessary setElementStyles method ([e504d4e](https://github.com/angular/angular/commit/e504d4e)), closes [#9000](https://github.com/angular/angular/issues/9000) [#9009](https://github.com/angular/angular/issues/9009)
-* **Renderer:** update signatures to make RenderDebugInfo optional ([b7b5678](https://github.com/angular/angular/commit/b7b5678)), closes [#8466](https://github.com/angular/angular/issues/8466) [#8859](https://github.com/angular/angular/issues/8859)
-* **Request:** Change Request.text's return type to string ([b2e0946](https://github.com/angular/angular/commit/b2e0946)), closes [#8138](https://github.com/angular/angular/issues/8138)
-* **router:** Added pushState fallback for IE 9 browser. ([bab6023](https://github.com/angular/angular/commit/bab6023)), closes [#6506](https://github.com/angular/angular/issues/6506) [#7929](https://github.com/angular/angular/issues/7929)
-* **router:** browser back and forward buttons not working correctly. ([595bcdd](https://github.com/angular/angular/commit/595bcdd)), closes [#8524](https://github.com/angular/angular/issues/8524) [#8532](https://github.com/angular/angular/issues/8532)
-* **router:** don't mark the RouterOutletMap as internal ([45de65b](https://github.com/angular/angular/commit/45de65b))
-* **router:** ensuring MatchedUrl pass query params ([7d853dd](https://github.com/angular/angular/commit/7d853dd))
-* **router:** openning links in new tab ([fa2ce81](https://github.com/angular/angular/commit/fa2ce81)), closes [#5908](https://github.com/angular/angular/issues/5908) [#6806](https://github.com/angular/angular/issues/6806) [#7749](https://github.com/angular/angular/issues/7749) [#8806](https://github.com/angular/angular/issues/8806) [#8821](https://github.com/angular/angular/issues/8821)
-* **router:** provide a top-level route segment for injection ([b8136cc](https://github.com/angular/angular/commit/b8136cc))
-* **router:** replace state when path is equal to current path (#8766) ([b2a7fd0](https://github.com/angular/angular/commit/b2a7fd0))
-* **Router:** do not kill event-emitter on navigation failure ([cbeeff2](https://github.com/angular/angular/commit/cbeeff2)), closes [#7692](https://github.com/angular/angular/issues/7692) [#7532](https://github.com/angular/angular/issues/7532) [#7692](https://github.com/angular/angular/issues/7692)
-* **Router:** replace state when normalized path is equal to current normalized path ([2bf21e1](https://github.com/angular/angular/commit/2bf21e1)), closes [#7829](https://github.com/angular/angular/issues/7829) [#7897](https://github.com/angular/angular/issues/7897)
-* **scripts:** fix: correct failing to push into builds repo on rerun  ([17f317d](https://github.com/angular/angular/commit/17f317d31efbd68bc6bec73f56c8ce039825d23b))
-* **security:** support XSSI prefixes with and without commas. ([729dc3b](https://github.com/angular/angular/commit/729dc3b))
-* **test-runner:** make karma internal reporter compatible with 0.13.20 (#8977) ([fe8a7b0](https://github.com/angular/angular/commit/fe8a7b0))
-* **testing:**  add discardPeriodicTasks to be used with fakeAsync (#8629) ([0cb93a4](https://github.com/angular/angular/commit/0cb93a4)), closes [#8616](https://github.com/angular/angular/issues/8616)
-* **tests:** Execute the security specs only once ([9634e8d](https://github.com/angular/angular/commit/9634e8d))
-* **travis:** pin the version of tsickle for offline_compiler_test ([7aa1790](https://github.com/angular/angular/commit/7aa1790))
-* **tsickle:** put the tsickle support code at EOF ([3cfe281](https://github.com/angular/angular/commit/3cfe281))
-* **typings:** remove rxjs workaround ([798bfac](https://github.com/angular/angular/commit/798bfac)), closes [#7198](https://github.com/angular/angular/issues/7198)
-* **upgrade:** allow deeper nesting of ng2 components/directives (#8949) ([48bf349](https://github.com/angular/angular/commit/48bf349))
-* **upgrade:** allow functions for template and templateUrl (#9022) ([a19c4e8](https://github.com/angular/angular/commit/a19c4e8))
-* **upgrade:** Ensure upgrade adapter works on angular.js 1.2 (#8647) ([cbc8d0a](https://github.com/angular/angular/commit/cbc8d0a))
-* **upgrade:** fallback to root ng2 injector when element is compiled outside the document (#86 ([db82906](https://github.com/angular/angular/commit/db82906))
-* **upgrade:** make bindings available on $scope in controller & link function (#8645) ([6cdc53c](https://github.com/angular/angular/commit/6cdc53c))
-
-### Features
-
-* **animations:** provide support for offline compilation ([fa0718b](https://github.com/angular/angular/commit/fa0718b))
-* **animations:** support styling of the default animation state ([36d25f2](https://github.com/angular/angular/commit/36d25f2)), closes [#9013](https://github.com/angular/angular/issues/9013)
-* **build:** Added a version stamp in .metadata.json files. ([2d8f776](https://github.com/angular/angular/commit/2d8f776)), closes [#8974](https://github.com/angular/angular/issues/8974) [#8981](https://github.com/angular/angular/issues/8981)
-* **ChangeDetectorRef:** make detectChanges() correct ([6028368](https://github.com/angular/angular/commit/6028368)), closes [#8599](https://github.com/angular/angular/issues/8599)
-* **common:** DatePipe supports ISO string ([abc266f](https://github.com/angular/angular/commit/abc266f)), closes [#7794](https://github.com/angular/angular/issues/7794)
-* **common/datePipe:** change date formatter to use correct pattern closes #7008 (#8154) ([324f014](https://github.com/angular/angular/commit/324f014)), closes [#7008](https://github.com/angular/angular/issues/7008) [(#8154](https://github.com/(/issues/8154)
-* **compiler:** Add support for limited function calls in metadata ([5504ca1](https://github.com/angular/angular/commit/5504ca1e389f7bfd74604b8573ddaab3e9f07b0d))
-* **compiler:** Add support for `<ng-container>` ([0dbff55](https://github.com/angular/angular/commit/0dbff55bc6750653c5f8decc06d07e7269e3d6a5))
-* **ComponentResolver:** Add a SystemJS resolver for compiled apps (#9145) ([a6e5ddc](https://github.com/angular/angular/commit/a6e5ddc))
-* **core:** add a component resolver that can load components lazily using system.js ([1a0aea6](https://github.com/angular/angular/commit/1a0aea6))
-* **core:** introduce support for animations ([5e0f8cf](https://github.com/angular/angular/commit/5e0f8cf)), closes [#8734](https://github.com/angular/angular/issues/8734)
-* **core/linker:** add SimpleChanges type to lifecycle_hooks to simplify OnChanges signature ([0a872ff](https://github.com/angular/angular/commit/0a872ff)), closes [#8557](https://github.com/angular/angular/issues/8557)
-* **debug:** collect styles and classes for the DebugElement ([155b882](https://github.com/angular/angular/commit/155b882))
-* **enableDebugTools:** return ComponentRef ([4086b49](https://github.com/angular/angular/commit/4086b49))
-* **forms:** add new forms folder ([4c39eac](https://github.com/angular/angular/commit/4c39eac))
-* **forms:** add the submitted flag to NgForm and NgFormModel directives ([420e83a](https://github.com/angular/angular/commit/420e83a)), closes [#2960](https://github.com/angular/angular/issues/2960) [#7449](https://github.com/angular/angular/issues/7449)
-* **forms:** allow ngModel to register with parent form ([4ed6cf7](https://github.com/angular/angular/commit/4ed6cf7))
-* **forms:** compose validator fns automatically if arrays ([61960c5](https://github.com/angular/angular/commit/61960c51a3b21d1cfba523f53016f6284182d4e3))
-* **forms:** support setting control name in ngModelOptions ([a191e96](https://github.com/angular/angular/commit/a191e9697c32062eda06cd1f1cfd856d89c16026))
-* **forms:** add easy way to switch between forms modules ([22916bb](https://github.com/angular/angular/commit/22916bb5d1abf2818d7d8d99d39605af251f42e4))
-* **HtmlLexer:** add support for alphabetic cases ([43148d8](https://github.com/angular/angular/commit/43148d8))
-* **http:** added withCredentials support ([95af14b](https://github.com/angular/angular/commit/95af14b)), closes [#7281](https://github.com/angular/angular/issues/7281) [#7281](https://github.com/angular/angular/issues/7281)
-* **http:** automatically set request Content-Type header based on body type ([0f0a8ad](https://github.com/angular/angular/commit/0f0a8ad)), closes [#7310](https://github.com/angular/angular/issues/7310)
-* **http:** implement Response.prototype.toString() to make for a nicer error message ([89f6108](https://github.com/angular/angular/commit/89f6108)), closes [#7511](https://github.com/angular/angular/issues/7511)
-* **http:** set the statusText property from the XMLHttpRequest instance ([3019140](https://github.com/angular/angular/commit/3019140)), closes [#4162](https://github.com/angular/angular/issues/4162)
-* **i18n:** extract messages ([ac11567](https://github.com/angular/angular/commit/ac11567))
-* **i18n:** support implicit tags/attributes ([3e5716e](https://github.com/angular/angular/commit/3e5716e))
-* **i18n:** generate error on unknown cases ([5267115](https://github.com/angular/angular/commit/5267115)), closes [#9094](https://github.com/angular/angular/issues/9094)
-* **i18n:** Add file paths to error messages ([fe01e2e](https://github.com/angular/angular/commit/fe01e2efb7e21ed0331e403a7508ac7fca946108))
-* **metadata:** emit all methods ([29700aa](https://github.com/angular/angular/commit/29700aa))
-* **NgTemplateOutlet:** add context to NgTemplateOutlet ([164a091](https://github.com/angular/angular/commit/164a091)), closes [#9042](https://github.com/angular/angular/issues/9042)
-* **NgZone:** isStable ([587c119](https://github.com/angular/angular/commit/587c119)), closes [#8108](https://github.com/angular/angular/issues/8108)
-* **platform-browser-dynamic:** re-add a deprecated platform-browser-dynamic ([172a566](https://github.com/angular/angular/commit/172a566))
-* **platform-browser-dynamic:** fix public exports for web-worker related symbols ([6e62217](https://github.com/angular/angular/commit/6e62217))
-* **regex_url_paths:** add `regex_group_names` to handle consistency with serializers ([ce013a3](https://github.com/angular/angular/commit/ce013a3)), closes [#7554](https://github.com/angular/angular/issues/7554) [#7694](https://github.com/angular/angular/issues/7694)
-* **renderer:** add a `setElementStyles` method ([1ac38bd](https://github.com/angular/angular/commit/1ac38bd))
-* **router:** export RouterLink and RouterOutlet (#8912) ([1c92903](https://github.com/angular/angular/commit/1c92903))
-* **router:** update router to support lazy loading ([0f1465b](https://github.com/angular/angular/commit/0f1465b))
-* **SchemaRegistry:** add Node.textContent ([3b80ab5](https://github.com/angular/angular/commit/3b80ab5)), closes [#8413](https://github.com/angular/angular/issues/8413)
-* **security:** add an HTML sanitizer. ([f86edae](https://github.com/angular/angular/commit/f86edae))
-* **security:** add tests for style sanitisation. ([7b6c4d5](https://github.com/angular/angular/commit/7b6c4d5))
-* **security:** add tests for URL sanitization. ([7a524e3](https://github.com/angular/angular/commit/7a524e3))
-* **security:** allow data: URLs for images and videos. ([dd50124](https://github.com/angular/angular/commit/dd50124))
-* **security:** allow url(...) style values. ([15ae710](https://github.com/angular/angular/commit/15ae710)), closes [#8514](https://github.com/angular/angular/issues/8514)
-* **security:** Automatic XSRF handling. ([4d793c4](https://github.com/angular/angular/commit/4d793c4))
-* **security:** complete DOM security schema. ([040b101](https://github.com/angular/angular/commit/040b101))
-* **security:** document iframe src to be TRUSTED_URL. ([3463047](https://github.com/angular/angular/commit/3463047))
-* add minified bundles ([9175a04](https://github.com/angular/angular/commit/9175a04))
-* **security:** expose the safe value types. ([50c9bed](https://github.com/angular/angular/commit/50c9bed)), closes [#8568](https://github.com/angular/angular/issues/8568)
-* **security:** fill in missing security contexts. ([67ed2e2](https://github.com/angular/angular/commit/67ed2e2))
-* **security:** strip XSSI prefix from XHR responses. ([df1b1f6](https://github.com/angular/angular/commit/df1b1f6))
-* **security:** support transform CSS functions for sanitization. ([8b1b427](https://github.com/angular/angular/commit/8b1b427)), closes [#8514](https://github.com/angular/angular/issues/8514)
-* **security:** warn users when sanitizing in dev mode. ([3e68b7e](https://github.com/angular/angular/commit/3e68b7e)), closes [#8522](https://github.com/angular/angular/issues/8522)
-* **shadow_css:** add encapsulation support for CSS @supports at-rule ([cb84cbf](https://github.com/angular/angular/commit/cb84cbf)), closes [#7944](https://github.com/angular/angular/issues/7944)
-* **ViewEncapsulation:** default ViewEncapsulation to configurable ([f93512b](https://github.com/angular/angular/commit/f93512b)), closes [#7883](https://github.com/angular/angular/issues/7883)
-
-
-### BREAKING CHANGES
-* Location#platformStrategy property was previously accidentally exported as public
-If any application requires access to the current location strategy, it should be accessed via DI instead
-by injecting the LocationStrategy token.
-The likelihood of anyone actually depending on this property is very low.
-
-* DirectiveNormalizer takes new constructor arguments, `config:CompilerConfig`.
-
-* `Parser` constructor required new parameter `config: CompilerConfig` as second argument.
-
-* Bundles are now in the bundles/ subdirectory within each package
-
-* HTML, style values, and URLs are now automatically sanitized. Values that do not match are escaped
-  or ignored. When binding a URL or style property that would get ignored, bind to a value
-  explicitly marked as safe instead by injection the DOM sanitization service:
-
-  ```
-  class MyComponent {
-    constructor(sanitizer: DomSanitizationService) {
-      // ONLY DO THIS FOR VALUES YOU KNOW TO BE SAFE! NEVER ALLOW USER DATA IN THIS!
-      this.safeStyleValue = sanitizer.bypassSecurityTrustStyle('rotate(90deg)');
-      // then bind to `safeStyleValue` in your template.
-    }
-  }
-  ```
-
-* `PLATFORM_PIPES` and `PLATFORM_DIRECTIVES` now are fields on `CompilerConfig`.
-  Instead of providing a binding to these tokens, provide a binding for `CompilerConfig` instead.
-
-* `CompilerConfig` used to take positional arguments and now takes named arguments.
-
-### Deprecation
-
-* `Parse5DomAdapter` will no longer be exported from `@angular/platform-server` as a public API as of RC.3.
-  A new function called `serverBootstrap()` will be provided, which will automatically set the correct
-  `document` during platform initialization.
-
-### Reverts
-
-* Revert fix(compiler): support string tokens with `.` inside. ([cc86fee](https://github.com/angular/angular/commit/cc86fee))
-
-<a name="2.0.0-rc.1"></a>
-# 2.0.0-rc.1 (2016-05-03)
-
-### Known Issues
-
-*** SECURITY WARNING ***
-Contextual escaping is not yet implemented in Angular. This will be fixed in the upcoming RC.
-In the meantime make sure to correctly escape all values that go into the DOM.
-*** SECURITY WARNING ***
-
-- source maps for umd bundles are missing
-- `Ruler` service is not being reexported via `@angular/platform-browser`
-
-
-### Bug Fixes
-
-* **compiler:** calculate the right moduleUrl ([3a40cb1](https://github.com/angular/angular/commit/3a40cb1))
-* **compiler:** don’t emit metadata for generated files ([43e0fa5](https://github.com/angular/angular/commit/43e0fa5))
-* **compiler:** fix where pipes live ([dd6e0cf](https://github.com/angular/angular/commit/dd6e0cf)), closes [#8408](https://github.com/angular/angular/issues/8408)
-* **compiler:** use absolute paths for comparing module urls ([52a6ba7](https://github.com/angular/angular/commit/52a6ba7))
-* **compiler:** use rootDirs compilerOption to affect genDir layout. ([a033f83](https://github.com/angular/angular/commit/a033f83))
-* **docs:** upgrade deprecated ngFor-Syntax ([27a7b51](https://github.com/angular/angular/commit/27a7b51))
-* **router:** add support for ../ ([89704e0](https://github.com/angular/angular/commit/89704e0))
-* **testing:** Check for pending macrotasks in ComponentFixture.whenStable() and ComponentFixtu ([509f4ec](https://github.com/angular/angular/commit/509f4ec)), closes [#8389](https://github.com/angular/angular/issues/8389)
-* **router-deprecated:** inheriting from RouterOutlet works now
-
-### Features
-
-* **router:** make RouterLink accept single values ([b625f24](https://github.com/angular/angular/commit/b625f24))
-
-
-
-<a name="2.0.0-rc.0"></a>
-# 2.0.0-rc.0 (2016-05-02)
-
-This is the first release candidate that contains repackaging of Angular into individual packages one per each feature area.
-
-All of the packages are now distributed under the @angular npm scope. This changes how Angular is installed via npm and how you import the code.
-
-To install Angular for a browser application please use:
-
-```
-npm install --save @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic rxjs@5.0.0-beta.6 zone.js@0.6.12
-```
-
-To import various symbols please adjust the paths in the following way:
-
-- `angular2/core` -> `@angular/core`
-- `angular2/compiler` -> `@angular/compiler`
-- `angular2/common` -> `@angular/common`
-- `angular2/platform/browser` -> `@angular/platform-browser` (applications with precompiled templates) + `@angular/platform-browser-dynamic` (applications that compile templates on the fly)
-- `angular2/platform/server` -> `@angular/platform-server`
-- `angular2/testing` -> `@angular/core/testing` (it/describe/..) + `@angular/compiler/testing` (TestComponentBuilder) + `@angular/platform-browser/testing`
-- `angular2/upgrade` -> `@angular/upgrade`
-- `angular2/http` -> `@angular/http`
-- `angular2/router` -> `@angular/router-deprecated` (snapshot of the component router from beta.17 for backwards compatibility)
-- new package: `@angular/router` - component router with several [breaking changes](https://docs.google.com/document/d/1WLSNV3V1AKdwLwRiLuN7JqbPBKQ_S5quRlcT5LPIldw/edit#heading=h.blfh5ya9sf5r)
-
-
-
-### Features
-
-* **core:** introduce template context ([cacdead](https://github.com/angular/angular/commit/cacdead)), closes [#8321](https://github.com/angular/angular/issues/8321)
-* **core:** support the decorator data that tsickle produces ([b6fd811](https://github.com/angular/angular/commit/b6fd811))
-* **di:** support map literals as providers ([46cd868](https://github.com/angular/angular/commit/46cd868))
-* **offline compiler:** a replacement for tsc that compiles templates ([78946fe](https://github.com/angular/angular/commit/78946fe))
-* **offline compiler:** add metadata emit ([072446a](https://github.com/angular/angular/commit/072446a))
-* **router:** add CanDeactivate ([deba804](https://github.com/angular/angular/commit/deba804))
-* **router:** add link that support only absolute urls ([fa5bfe4](https://github.com/angular/angular/commit/fa5bfe4))
-* **router:** add Router and RouterOutlet to support aux routes ([6e1fed4](https://github.com/angular/angular/commit/6e1fed4))
-* **router:** add RouterLink ([de56dd5](https://github.com/angular/angular/commit/de56dd5))
-* **router:** add RouterUrlSerializer ([79830f1](https://github.com/angular/angular/commit/79830f1))
-* **router:** add RouteTree and UrlTree as aliases to Tree<RouteSegment> and Tree<UrlSegment> ([277b1fc](https://github.com/angular/angular/commit/277b1fc))
-* **router:** add support for wildcards ([8836219](https://github.com/angular/angular/commit/8836219))
-* **router:** adds an example app using the new router ([602641d](https://github.com/angular/angular/commit/602641d))
-* **router:** change location when navigating ([560cc14](https://github.com/angular/angular/commit/560cc14))
-* **router:** implement relative navigation ([e5b87e5](https://github.com/angular/angular/commit/e5b87e5))
-* **router:** implements support for router-link-active ([ec4ca0e](https://github.com/angular/angular/commit/ec4ca0e))
-* **router:** listen to location changes ([62a0809](https://github.com/angular/angular/commit/62a0809)), closes [#8362](https://github.com/angular/angular/issues/8362)
-* **router:** set router-link-active when RouterLink is active ([4fe0f1f](https://github.com/angular/angular/commit/4fe0f1f)), closes [#8376](https://github.com/angular/angular/issues/8376)
-* **router:** update recognize to handle matrix parameters ([446657b](https://github.com/angular/angular/commit/446657b))
-* **router:** update recognize to support aux routes ([d35c109](https://github.com/angular/angular/commit/d35c109))
-* **router:** update url parser to handle aux routes ([fad3b64](https://github.com/angular/angular/commit/fad3b64))
-* **testing:** Use NgZone in TestComponentBuilder. ([769835e](https://github.com/angular/angular/commit/769835e)), closes [#8301](https://github.com/angular/angular/issues/8301)
-* **tests:** add ROUTER_FAKE_PROVIDERS to angular2/alt_router/router_testing_providers ([0f1b370](https://github.com/angular/angular/commit/0f1b370))
-
-### Bug Fixes
-
-* **metadata:** Preserve Provider expressions ([7c0d497](https://github.com/angular/angular/commit/7c0d497))
-* **codegen:** event handler has boolean return type ([ca40ef5](https://github.com/angular/angular/commit/ca40ef5))
-* **compiler:** fix cross view references and providers with `useValue`. ([f114d6c](https://github.com/angular/angular/commit/f114d6c)), closes [#8366](https://github.com/angular/angular/issues/8366)
-* **compiler:** project using the right directive as component. ([0f774df](https://github.com/angular/angular/commit/0f774df)), closes [#8344](https://github.com/angular/angular/issues/8344)
-* **compiler:** support css stylesheets in offline compiler ([00d3b60](https://github.com/angular/angular/commit/00d3b60))
-* **compiler:** support empty array and map literals. ([11955f9](https://github.com/angular/angular/commit/11955f9)), closes [#8336](https://github.com/angular/angular/issues/8336)
-* **compiler_cli:** make sure the generated code gets compiled via tic ([163d80a](https://github.com/angular/angular/commit/163d80a))
-* **core:** check components if an event handler inside of an embedded view fires. ([4d691b6](https://github.com/angular/angular/commit/4d691b6)), closes [#8242](https://github.com/angular/angular/issues/8242)
-* **core:** return the ChangeDetectorRef of the component also for embedded views. ([351f24e](https://github.com/angular/angular/commit/351f24e))
-* **metadata:** expose Providers in metadata ([8bf6ef6](https://github.com/angular/angular/commit/8bf6ef6))
-* **perf:** don’t use `try/catch` in production mode ([b1a9e44](https://github.com/angular/angular/commit/b1a9e44)), closes [#8338](https://github.com/angular/angular/issues/8338)
-* **router:** canDeactivate should not change the url when returns false ([76d6f5f](https://github.com/angular/angular/commit/76d6f5f)), closes [#8360](https://github.com/angular/angular/issues/8360)
-* **router:** create a route tree when creating the router service ([ca13f1c](https://github.com/angular/angular/commit/ca13f1c)), closes [#8365](https://github.com/angular/angular/issues/8365)
-* **typescript:** strip abstract keyword from properties in .d.ts ([a84c2d7](https://github.com/angular/angular/commit/a84c2d7)), closes [#8339](https://github.com/angular/angular/issues/8339)
-
-
-
-### OTHER BREAKING CHANGES
-
-
-* - ViewRef.changeDetectorRef was removed as using ChangeDetectorRefs
-  for EmbeddedViewRefs does not make sense. Use ComponentRef.changeDetectorRef
-  or inject ChangeDetectorRef instead.
-
-* - Before, a `EmbeddedViewRef` used to have methods for
-  setting variables. Now, a user has to pass in a context
-  object that represents all variables when an `EmbeddedViewRef`
-  should be created.
-- `ViewContainerRef.createEmbeddedViewRef` now takes
-   a context object as 2nd argument.
-- `EmbeddedViewRef.setLocal` and `getLocal` have been removed.
-  Use `EmbeddedViewRef.context` to access the context.
-- `DebugNode.locals` has been removed. Use the new methods `DebugElement.references`
-  to get the references that are present on this element,
-  or `DebugElement.context` to get the context of the `EmbeddedViewRef` or the component to which the element belongs.
-* - Depending on if you are using precompiled templates or you are compiling templates on the fly, the setup for the base test providers has changed:
-
-Before:
-```js
-// Somewhere in test setup
-import {setBaseTestProviders} from 'angular2/testing';
-import {
-  TEST_BROWSER_PLATFORM_PROVIDERS,
-  TEST_BROWSER_APPLICATION_PROVIDERS
-} from 'angular2/platform/testing/browser';
-setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS,
-                     TEST_BROWSER_APPLICATION_PROVIDERS);
-```
-After (applications that compile templates on the fly):
-```js
-// Somewhere in the test setup
-import {setBaseTestProviders} from '@angular/core/testing';
-import {
-  TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-  TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
-} from '@angular/platform-browser-dynamic/testing';
-setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-                     TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
-```
-
-After (applications with precompiled templates):
-```js
-// Somewhere in the test setup
-import {setBaseTestProviders} from '@angular/core/testing';
-import {
-  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
-  TEST_BROWSER_STATIC_APPLICATION_PROVIDERS
-} from '@angular/platform-browser/testing';
-setBaseTestProviders(TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
-                     TEST_BROWSER_STATIC_APPLICATION_PROVIDERS);
-```
-
-
-<a name="2.0.0-beta.17"></a>
-# 2.0.0-beta.17 (2016-04-28)
-
-
-### Bug Fixes
-
-* **changelog:** fix changelog script. ([c209836](https://github.com/angular/angular/commit/c209836))
-* **compiler:** Allow templates to access variables that are declared afterwards. ([1e8864c](https://github.com/angular/angular/commit/1e8864c)), closes [#8261](https://github.com/angular/angular/issues/8261)
-* **core:** properly evaluate expressions with conditional and boolean operators ([1ad2a02](https://github.com/angular/angular/commit/1ad2a02)), closes [#8235](https://github.com/angular/angular/issues/8235) [#8244](https://github.com/angular/angular/issues/8244) [#8282](https://github.com/angular/angular/issues/8282)
-* **metadata:** Do not attach module names to metadata. ([d964888](https://github.com/angular/angular/commit/d964888)), closes [#8225](https://github.com/angular/angular/issues/8225) [#8082](https://github.com/angular/angular/issues/8082) [#8256](https://github.com/angular/angular/issues/8256)
-* **testing:** allow test component builder to override directives from lists ([ff2ae7a](https://github.com/angular/angular/commit/ff2ae7a)), closes [#7397](https://github.com/angular/angular/issues/7397) [#8217](https://github.com/angular/angular/issues/8217)
-
-### Features
-
-* **compiler:** ElementSchema now has explicit DOM schema information ([d327ac4](https://github.com/angular/angular/commit/d327ac4)), closes [#8179](https://github.com/angular/angular/issues/8179)
-* **core:** separate refs from vars. ([d2efac1](https://github.com/angular/angular/commit/d2efac1)), closes [#7158](https://github.com/angular/angular/issues/7158) [#8264](https://github.com/angular/angular/issues/8264)
-
-
-### BREAKING CHANGES
-
-The reference `#...` now always means `ref-`.
-
-**Before:**
-- Outside of `ngFor`, a `#...` meant a reference.
-- Inside of `ngFor`, it meant a local variable.
-
-This pattern was confusing.
-
-**After:**
-
-- `<template #abc>` now defines a reference to a TemplateRef, instead of an input variable used inside of the template.
-- Inside of structural directives that declare local variables, such as `*ngFor`, usage of `#...` is deprecated. Use `let` instead.
-  - `<div *ngFor="#item of items">` now becomes `<div *ngFor="let item of items">`
-- `var-...` is deprecated.
-  - use `#` or a `ref-` outside of `*ngFor`
-  - for `ngFor`, use the syntax:  `<template ngFor let-... [ngForOf]="...">`
-
-
-<a name="2.0.0-beta.16"></a>
-# 2.0.0-beta.16 (2016-04-26)
-
-
-### Bug Fixes
-
-* **angular_1_router:** Removed arrow function from module template ([d094a85](https://github.com/angular/angular/commit/d094a85)), closes [#8076](https://github.com/angular/angular/issues/8076)
-* **build:** ignore Dart warnings for external code. ([4140405](https://github.com/angular/angular/commit/4140405))
-* **codegen:** add explicit any to class fields ([c8d00dc](https://github.com/angular/angular/commit/c8d00dc)), closes [#8204](https://github.com/angular/angular/issues/8204) [#8205](https://github.com/angular/angular/issues/8205)
-* **compiler:** only call pure pipes if their input changed. ([8db6215](https://github.com/angular/angular/commit/8db6215))
-* **compiler:** properly implement pure pipes and change pipe syntax ([152a117](https://github.com/angular/angular/commit/152a117))
-* **compiler:** support string tokens with `.` inside. ([cc86fee](https://github.com/angular/angular/commit/cc86fee))
-* **compiler:** use DI order for change detection order. ([67d05eb](https://github.com/angular/angular/commit/67d05eb)), closes [#8198](https://github.com/angular/angular/issues/8198)
-* **core:** various minor compiler fixes ([2f70457](https://github.com/angular/angular/commit/2f70457)), closes [#8162](https://github.com/angular/angular/issues/8162)
-* **forms:** ensure select model updates in firefox and ie ([c3daccd](https://github.com/angular/angular/commit/c3daccd)), closes [#6573](https://github.com/angular/angular/issues/6573) [#8148](https://github.com/angular/angular/issues/8148)
-* **forms:** improve error message when ngFormModel is missing a form ([12837e1](https://github.com/angular/angular/commit/12837e1)), closes [#8136](https://github.com/angular/angular/issues/8136) [#8143](https://github.com/angular/angular/issues/8143)
-* **forms:** number input should report null when blank ([e69cb40](https://github.com/angular/angular/commit/e69cb40)), closes [#6932](https://github.com/angular/angular/issues/6932) [#8141](https://github.com/angular/angular/issues/8141)
-* **metadata:** emit metadata rooted at 'angular2' ([9889c21](https://github.com/angular/angular/commit/9889c21)), closes [#8144](https://github.com/angular/angular/issues/8144) [#8147](https://github.com/angular/angular/issues/8147)
-* **release:** Fix the package.json zone.js requirement to 0.6.12 ([6103aa0](https://github.com/angular/angular/commit/6103aa0))
-* **tests:** remove payload size check ([22c05b0](https://github.com/angular/angular/commit/22c05b0))
-* **transformers:** support `query.read` ([386cc5d](https://github.com/angular/angular/commit/386cc5d)), closes [#8172](https://github.com/angular/angular/issues/8172)
-* **upgrade:** clean up scope when element is destroyed ([0fc9ec2](https://github.com/angular/angular/commit/0fc9ec2)), closes [#8102](https://github.com/angular/angular/issues/8102)
-
-### Features
-
-* **codegen:** produce `.ngfactory.dart/ts` files instead of `.template.dart/ts` files. ([c06b0a2](https://github.com/angular/angular/commit/c06b0a2))
-* **core:** add `Query.read` and remove `DynamicComponentLoader.loadIntoLocation`. ([efbd446](https://github.com/angular/angular/commit/efbd446))
-* **core:** introduce ComponentFactory. ([0c600cf](https://github.com/angular/angular/commit/0c600cf))
-* **core:** separate reflective injector from Injector interface ([0a7d10b](https://github.com/angular/angular/commit/0a7d10b))
-* **core:** support importUri in StaticReflector ([3e11422](https://github.com/angular/angular/commit/3e11422)), closes [#8195](https://github.com/angular/angular/issues/8195)
-* **core:** support non reflective bootstrap. ([9092ac7](https://github.com/angular/angular/commit/9092ac7))
-* **html_lexer:** support special forms used by i18n { exp, plural, =0 {} } ([7f29766](https://github.com/angular/angular/commit/7f29766))
-* **html_parser:** support special forms used by i18n { exp, plural, =0 {} } ([7c9717b](https://github.com/angular/angular/commit/7c9717b))
-* **i18n:** add custom placeholder names ([bb9fb21](https://github.com/angular/angular/commit/bb9fb21)), closes [#7799](https://github.com/angular/angular/issues/7799) [#8057](https://github.com/angular/angular/issues/8057)
-* **i18n:** add support for nested expansion forms ([c6244d1](https://github.com/angular/angular/commit/c6244d1)), closes [#7977](https://github.com/angular/angular/issues/7977)
-* **i18n:** support plural and gender special forms ([88b0a23](https://github.com/angular/angular/commit/88b0a23))
-* **Location:** out of router and into platform/common ([b602bd8](https://github.com/angular/angular/commit/b602bd8)), closes [#7962](https://github.com/angular/angular/issues/7962)
-* **NgTemplateOutlet:** add NgTemplateOutlet directive ([f4e6994](https://github.com/angular/angular/commit/f4e6994)), closes [#7615](https://github.com/angular/angular/issues/7615) [#8021](https://github.com/angular/angular/issues/8021)
-* **router:** add Router and RouterOutlet ([5a897cf](https://github.com/angular/angular/commit/5a897cf)), closes [#8173](https://github.com/angular/angular/issues/8173)
-* **router:** add router metadata ([ef67a0c](https://github.com/angular/angular/commit/ef67a0c))
-* **router:** add UrlSegment, RouteSegment, and Tree ([90a1f7d](https://github.com/angular/angular/commit/90a1f7d))
-* **router:** implement recognizer ([ef6163e](https://github.com/angular/angular/commit/ef6163e))
-* **router:** implement RouterUrlParser ([f698567](https://github.com/angular/angular/commit/f698567))
-* **test:** Implement fakeAsync using the FakeAsyncTestZoneSpec from zone.js. ([bab81a9](https://github.com/angular/angular/commit/bab81a9)), closes [#8142](https://github.com/angular/angular/issues/8142)
-* **tests:** manage asynchronous tests using zones ([8490921](https://github.com/angular/angular/commit/8490921)), closes [#7735](https://github.com/angular/angular/issues/7735)
-* **view_compiler:** codegen DI and Queries ([2b34c88](https://github.com/angular/angular/commit/2b34c88)), closes [#6301](https://github.com/angular/angular/issues/6301) [#6567](https://github.com/angular/angular/issues/6567)
-
-
-### BREAKING CHANGES
-
-* - pipes now take a variable number of arguments, and not an array that contains all arguments.
-
-* inject can no longer wrap fakeAsync while fakeAsync can wrap inject. So the order in existing tests with inject and fakeAsync has to be switched as follows:
-Before:
-```
-inject([...], fakeAsync((...) => {...}))
-```
-After:
-```
-fakeAsync(inject([...], (...) => {...}))
-```
-You will also need to add the dependency
-`'node_modules/zone.js/dist/fake-async-test.js'`
-as a served file in your Karma or other test configuration.
-
-* - Injector was renamed into `ReflectiveInjector`,
-  as `Injector` is only an abstract class with one method on it
-- `Injector.getOptional()` was changed into `Injector.get(token, notFoundValue)`
-  to make implementing injectors simpler
-- `ViewContainerRef.createComponent` now takes an `Injector`
-  instead of `ResolvedProviders`. If a reflective injector
-  should be used, create one before calling this method.
-  (e.g. via `ReflectiveInjector.resolveAndCreate(…)`.
-
-* - `DynamicComponentLoader.loadIntoLocation` has been removed. Use `@ViewChild(‘myVar’, {read: ViewContainerRef})` to get hold of a `ViewContainerRef` at an element with variable `myVar`. Then call `DynamicComponentLoader.loadNextToLocation`.
-- `DynamicComponentLoader.loadNextToLocation` now takes a `ViewContainerRef` instead of an `ElementRef`.
-- `AppViewManager` is renamed into `ViewUtils` and is a mere private utility service.
-
-* - `Compiler` is renamed to `ComponentResolver`,
-  `Compiler.compileInHost` has been renamed to `ComponentResolver.resolveComponent`.
-- `ComponentRef.dispose` is renamed to `ComponentRef.destroy`
-- `ViewContainerRef.createHostView` is renamed to `ViewContainerRef.createComponent`
-- `ComponentFixture_` has been removed, the class `ComponentFixture`
-  can now be created directly as it is no more using private APIs.
-
-* `Location` and other related providers have been moved out of `router` and into `platform/common`. `BrowserPlatformLocation` is not meant to be used directly however advanced configurations may use it via the following import change.
-Before:
-```
-import {
-  PlatformLocation,
-  Location,
-  LocationStrategy,
-  HashLocationStrategy,
-  PathLocationStrategy,
-  APP_BASE_HREF}
-from 'angular2/router';
-import {BrowserPlatformLocation} from 'angular2/src/router/location/browser_platform_location';
-```
-After:
-```
-import {
-  PlatformLocation,
-  Location,
-  LocationStrategy,
-  HashLocationStrategy,
-  PathLocationStrategy,
-  APP_BASE_HREF}
-from 'angular2/platform/common';
-import {BrowserPlatformLocation} from 'angular2/src/platform/browser/location/browser_platform_location';
-```
-
-* `injectAsync` is now deprecated. Instead, use the `async` function
-to wrap any asynchronous tests.
-
-You will also need to add the dependency
-`'node_modules/zone.js/dist/async-test.js'`
-as a served file in your Karma or other test configuration.
-
-Before:
-```
-it('should wait for returned promises', injectAsync([FancyService], (service) => {
-  return service.getAsyncValue().then((value) => { expect(value).toEqual('async value'); });
-}));
-it('should wait for returned promises', injectAsync([], () => {
-  return somePromise.then(() => { expect(true).toEqual(true); });
-}));
-```
-After:
-```
-it('should wait for returned promises', async(inject([FancyService], (service) => {
-  service.getAsyncValue().then((value) => { expect(value).toEqual('async value'); });
-})));
-// Note that if there is no injection, we no longer need `inject` OR `injectAsync`.
-it('should wait for returned promises', async(() => {
-  somePromise.then(() => { expect(true).toEqual(true); });
-}));
-```
-
-* - Renderer:
-  * renderComponent method is removed form `Renderer`, only present on `RootRenderer`
-  * Renderer.setDebugInfo is removed. Renderer.createElement / createText / createTemplateAnchor
-    now take the DebugInfo directly.
-- Query semantics:
-  * Queries don't work with dynamically loaded components.
-  * e.g. for router-outlet: loaded components can't be queries via @ViewQuery,
-    but router-outlet emits an event `activate` now that emits the activated component
-- Exception classes and the context inside changed (renamed fields)
-- DebugElement.attributes is an Object and not a Map in JS any more
-- ChangeDetectorGenConfig was renamed into CompilerConfig
-- AppViewManager.createEmbeddedViewInContainer / AppViewManager.createHostViewInContainer
-  are removed, use the methods in ViewContainerRef instead
-- Change detection order changed:
-  * 1. dirty check component inputs
-  * 2. dirty check content children
-  * 3. update render nodes
-
-
-
-<a name="2.0.0-beta.15"></a>
-# 2.0.0-beta.15 (2016-04-13)
-
-
-### Bug Fixes
-
-* **7837:** MetadataCollector takes no parameters for the constructor. ([c17dc1c](https://github.com/angular/angular/commit/c17dc1c)), closes [#7838](https://github.com/angular/angular/issues/7838)
-* **7987:** Incremental build works with new trees ([08b2956](https://github.com/angular/angular/commit/08b2956)), closes [#7989](https://github.com/angular/angular/issues/7989)
-* **build:** ignore dart warnings `The name … is shown, but not used` ([01e6b8c](https://github.com/angular/angular/commit/01e6b8c)), closes [#8045](https://github.com/angular/angular/issues/8045)
-* **payload:** increase payload size limit temporarily ([28e657d](https://github.com/angular/angular/commit/28e657d))
-* **RouterLink:** ignore optional parameters when checking for active routes ([5e2bc5c](https://github.com/angular/angular/commit/5e2bc5c)), closes [#6459](https://github.com/angular/angular/issues/6459) [#7834](https://github.com/angular/angular/issues/7834)
-* **select:** set value individually from ngModel ([e1e44a9](https://github.com/angular/angular/commit/e1e44a9)), closes [#7975](https://github.com/angular/angular/issues/7975) [#7978](https://github.com/angular/angular/issues/7978)
-* **upgrade:** make upgradeAdapter upgrade AngularJS components correctly ([247964a](https://github.com/angular/angular/commit/247964a)), closes [#7951](https://github.com/angular/angular/issues/7951)
-
-### Features
-
-* **compiler:** Add an implementation for XHR that uses a template cache to load template files. ([a596b88](https://github.com/angular/angular/commit/a596b88)), closes [#7940](https://github.com/angular/angular/issues/7940)
-* **gestures:** allow override of Hammer default configuration ([6cbf990](https://github.com/angular/angular/commit/6cbf990)), closes [#7924](https://github.com/angular/angular/issues/7924)
-* **ngFor:** Support convenience  view local in ngFor ([ccff175](https://github.com/angular/angular/commit/ccff175)), closes [#8013](https://github.com/angular/angular/issues/8013)
-* **parser:** TemplateParser.tryParse() returns both the AST and errors ([226e662](https://github.com/angular/angular/commit/226e662)), closes [#7858](https://github.com/angular/angular/issues/7858)
-* **transformers:** changes transformers to collect information about providers and resolve identifi ([3b60503](https://github.com/angular/angular/commit/3b60503))
-* **transformers:** special case Profiler ([83b8f59](https://github.com/angular/angular/commit/83b8f59))
-* **typescript:** update to 1.9 nightly. ([3412aba](https://github.com/angular/angular/commit/3412aba)), closes [#8003](https://github.com/angular/angular/issues/8003)
-
-### BREAKING CHANGES
-
-* In Dart files, `import 'package:angular2/bootstrap.dart'` no longer works.
-  Instead, use `import 'package:angular2/platform/browser.dart'`.
-
-### Reverts
-
-* Revert "chore(format): update to latest formatter" ([60727c4](https://github.com/angular/angular/commit/60727c4))
-
-
-
-<a name="2.0.0-beta.14"></a>
-# 2.0.0-beta.14 (2016-04-07)
-
-
-### Bug Fixes
-
-* **forms:** support both value and ng-value ([8db97b0](https://github.com/angular/angular/commit/8db97b0))
-* **router:** allow forward slashes in query parameters ([4902244](https://github.com/angular/angular/commit/4902244)), closes [#7824](https://github.com/angular/angular/issues/7824)
-* **select:** support objects as select values ([74e2bd7](https://github.com/angular/angular/commit/74e2bd7)), closes [#4843](https://github.com/angular/angular/issues/4843) [#7842](https://github.com/angular/angular/issues/7842)
-* **select:** update name from ng-value to ngValue ([3ca6df8](https://github.com/angular/angular/commit/3ca6df8)), closes [#7939](https://github.com/angular/angular/issues/7939)
-* **upgrade:** leak when angular1 destroys element ([9be04f8](https://github.com/angular/angular/commit/9be04f8)), closes [#6401](https://github.com/angular/angular/issues/6401) [#7935](https://github.com/angular/angular/issues/7935)
-
-### Features
-
-* **dart/transform:** Avoid `print` in transformer code. ([e310bee](https://github.com/angular/angular/commit/e310bee)), closes [#7855](https://github.com/angular/angular/issues/7855)
-* **static-reflector:** Added StaticReflector ([0dbf959](https://github.com/angular/angular/commit/0dbf959))
-
-
-
-
-
-<a name="2.0.0-beta.13"></a>
-# 2.0.0-beta.13 (2016-03-31)
-
-
-### Bug Fixes
-
-* **build:** MetadataCollector correctly collects property metadata ([111afcd](https://github.com/angular/angular/commit/111afcd)), closes [#7772](https://github.com/angular/angular/issues/7772) [#7773](https://github.com/angular/angular/issues/7773)
-* **codegen:** stringify using an opaque ID when toString contains parens. ([90c87fa](https://github.com/angular/angular/commit/90c87fa)), closes [#7825](https://github.com/angular/angular/issues/7825)
-* **ngFor:** give more instructive error when binding to non-iterable ([49527ab](https://github.com/angular/angular/commit/49527ab))
-* **Router:** handling of special chars in dynamic segments ([0bcfcde](https://github.com/angular/angular/commit/0bcfcde)), closes [#7804](https://github.com/angular/angular/issues/7804)
-* **upgrade:** make ngUpgrade work with testability API ([430f367](https://github.com/angular/angular/commit/430f367)), closes [#7603](https://github.com/angular/angular/issues/7603)
-
-### Features
-
-* **build:** Persisting decorator metadata ([ae876d1](https://github.com/angular/angular/commit/ae876d1))
-* **compiler:** assert that Component.style is an array ([6de68e2](https://github.com/angular/angular/commit/6de68e2)), closes [#7559](https://github.com/angular/angular/issues/7559)
-* **compiler:** Resolvers now use DI to create reflector ([506f4ce](https://github.com/angular/angular/commit/506f4ce)), closes [#7762](https://github.com/angular/angular/issues/7762)
-* **Compiler:** Allow overriding the projection selector ([aa966f5](https://github.com/angular/angular/commit/aa966f5)), closes [#6303](https://github.com/angular/angular/issues/6303) [#7742](https://github.com/angular/angular/issues/7742)
-* **dart:** Add a dev-mode check for undeclared lifecycle interfaces ([1c20a62](https://github.com/angular/angular/commit/1c20a62)), closes [#6849](https://github.com/angular/angular/issues/6849)
-* **facade:** add ListWrapper.flatten ([a1880c3](https://github.com/angular/angular/commit/a1880c3))
-* **facade:** add RegExpWrapper.replaceAll to replace all matches using the provided function ([91999e0](https://github.com/angular/angular/commit/91999e0))
-* **html_parser:** change HtmlElementAst to store both the start and the end positions ([17c8ec8](https://github.com/angular/angular/commit/17c8ec8))
-* **i18n:** implement an i18n-aware html parser ([d272f96](https://github.com/angular/angular/commit/d272f96)), closes [#7738](https://github.com/angular/angular/issues/7738)
-* **i18n:** implement xmb deserialization ([d7e1175](https://github.com/angular/angular/commit/d7e1175))
-* **i18n:** reexport I18nHtmlParser through the i18n barrel ([d2ca7d8](https://github.com/angular/angular/commit/d2ca7d8))
-* **i18n:** update I18nHtmlParser to accept parsed messages ([756121a](https://github.com/angular/angular/commit/756121a))
-* **i18n:** update transformers to read a xmb file when provided and use I18nHtmlParser in t ([8430927](https://github.com/angular/angular/commit/8430927)), closes [#7790](https://github.com/angular/angular/issues/7790)
-
-
-### BREAKING CHANGES
-
-* For static content projection, elements with *-directives are now matched against the element itself vs the template before.
-
-`<p *ngIf="condition" foo></p>`
-
-Before:
-```html
-    // Use the implicit template for projection
-    <ng-content select="template"></ng-content>
-```
-
-After:
-```html
-    // Use the actual element for projection
-    <ng-content select="p[foo]"></ng-content>
-```
-
-<a name="2.0.0-beta.12"></a>
-# 2.0.0-beta.12 (2016-03-23)
-
-
-### Bug Fixes
-
-* **angular_1_router:** ng-link is generating wrong hrefs ([69c1405](https://github.com/angular/angular/commit/69c1405)), closes [#7423](https://github.com/angular/angular/issues/7423)
-* **angular1_router:** support link generation with custom hashPrefixes ([0f8efce](https://github.com/angular/angular/commit/0f8efce))
-* **package.json:** remove es6-promise from the peerDependency list ([8b67b07](https://github.com/angular/angular/commit/8b67b07))
-
-### Features
-
-* **dart/transform:** Use angular2/platform/browser as bootstrap lib ([b6507e3](https://github.com/angular/angular/commit/b6507e3)), closes [#7647](https://github.com/angular/angular/issues/7647)
-
-
-<a name="2.0.0-beta.11"></a>
-# 2.0.0-beta.11 (2016-03-18)
-
-
-### Bug Fixes
-
-* make sure that Zone does not show up in angular2.d.ts ([d4e9b55](https://github.com/angular/angular/commit/d4e9b55fb69d87f948d02905d34fc78221adb11a))
-* **common:** remove @internal annotation on SwitchView ([967ae3e](https://github.com/angular/angular/commit/967ae3e)), closes [#7657](https://github.com/angular/angular/issues/7657)
-* **router:** RouterOutlet loads component twice in a race condition ([2f581ff](https://github.com/angular/angular/commit/2f581ff)), closes [#7497](https://github.com/angular/angular/issues/7497) [#7545](https://github.com/angular/angular/issues/7545)
-
-### Features
-
-* **i18n:** add a simple dart script extracting all i18n messages from a package ([8326ab3](https://github.com/angular/angular/commit/8326ab3)), closes [#7620](https://github.com/angular/angular/issues/7620)
-* **i18n:** create i18n barrel ([a7fe983](https://github.com/angular/angular/commit/a7fe983))
-* **i18n:** implement xmb serializer ([e1f8e54](https://github.com/angular/angular/commit/e1f8e54))
-
-### BREAKING CHANGES
-
-`@View()` annotation (previously deprecated) has been removed. Apps should use the `@Component()` decorator instead.
-
-
-<a name="2.0.0-beta.10"></a>
-# 2.0.0-beta.10 (2016-03-17)
-
-
-### Bug Fixes
-
-* **change_detection:** fix a memory leak ([128acbb](https://github.com/angular/angular/commit/128acbb))
-* **closure:** don't throw from top-level ([5824866](https://github.com/angular/angular/commit/5824866))
-* **router:** handle URL that does not match a route ([8e3e450](https://github.com/angular/angular/commit/8e3e450)), closes [#7349](https://github.com/angular/angular/issues/7349) [#7203](https://github.com/angular/angular/issues/7203)
-* **router/instruction:** ensure toLinkUrl includes extra params ([0d58b13](https://github.com/angular/angular/commit/0d58b13)), closes [#7367](https://github.com/angular/angular/issues/7367)
-
-### Features
-
-* **compiler:** change html parser to preserve comments ([70d18b5](https://github.com/angular/angular/commit/70d18b5))
-* **core:** introduce a CSS lexer/parser ([b72bab4](https://github.com/angular/angular/commit/b72bab4))
-* **core:** introduce a CSS lexer/parser ([293fa55](https://github.com/angular/angular/commit/293fa55))
-* **facade:** add .values to StringMapWrapper ([f1796d6](https://github.com/angular/angular/commit/f1796d6))
-* **i18n:** add ngPlural directive ([df1f78e](https://github.com/angular/angular/commit/df1f78e))
-* **i18n:** implement a simple version of message extractor ([095db67](https://github.com/angular/angular/commit/095db67)), closes [#7454](https://github.com/angular/angular/issues/7454)
-* **shadow_css:** support `/deep/` and `>>>` ([cb38d72](https://github.com/angular/angular/commit/cb38d72)), closes [#7562](https://github.com/angular/angular/issues/7562) [#7563](https://github.com/angular/angular/issues/7563)
-* **TAG_DEFINITIONS:** include `<meta>` and `<base>` ([2c7c3e3](https://github.com/angular/angular/commit/2c7c3e3)), closes [#7455](https://github.com/angular/angular/issues/7455)
-
-### BREAKING CHANGES
-
-Removed deprecated API from NgZone
-- `NgZone.overrideOnTurnStart`
-- `NgZone.overrideOnTurnDone`
-- `NgZone.overrideOnEventDone`
-- `NgZone.overrideOnErrorHandler`
-
-Rename NgZone API
-- `NgZone.onTurnStart` => `NgZone.onUnstable`
-- `NgZone.onTurnDone` => `NgZone.onMicrotaskEmpty`
-- `NgZone.onEventDone` => `NgZone.onStable`
-
-
-<a name="2.0.0-beta.9"></a>
-# 2.0.0-beta.9 (2016-03-09)
-
-
-### Bug Fixes
-
-* **angular_1_router:** Renamed require statements after TypeScript files are transpiled ([ae49085](https://github.com/angular/angular/commit/ae49085)), closes [#7049](https://github.com/angular/angular/issues/7049)
-* **angular1_router:** rename `router` component binding to `$router` ([2548ce8](https://github.com/angular/angular/commit/2548ce8))
-* **angular1_router:** rename `router` component binding to `$router` ([1174473](https://github.com/angular/angular/commit/1174473))
-* **angular1_router:** support templateUrl components ([5586c29](https://github.com/angular/angular/commit/5586c29))
-* **build:** Use fixed version of Chromium Canary that will be updated manually instead of au ([1d49b3e](https://github.com/angular/angular/commit/1d49b3e))
-* **router:** support outlets within dynamic components ([7d44b82](https://github.com/angular/angular/commit/7d44b82))
-
-### Features
-
-* **angular1_router:** Add ng-link-active class to active ng-link ([11e8aa2](https://github.com/angular/angular/commit/11e8aa2)), closes [#6882](https://github.com/angular/angular/issues/6882)
-* **compiler:** Added spans to HTML parser errors ([19a08f3](https://github.com/angular/angular/commit/19a08f3))
-* **dart:** Add a dev-mode check for undeclared lifecycle interfaces ([a3d7629](https://github.com/angular/angular/commit/a3d7629)), closes [#6849](https://github.com/angular/angular/issues/6849)
-* **dart/transform:** Create standalone transformers for phases ([15e1614](https://github.com/angular/angular/commit/15e1614))
-* **iterable_differ:** support immutable lists ([a10c02c](https://github.com/angular/angular/commit/a10c02c)), closes [#7127](https://github.com/angular/angular/issues/7127)
-* **router:** add regex matchers ([75343eb](https://github.com/angular/angular/commit/75343eb)), closes [#7325](https://github.com/angular/angular/issues/7325) [#7126](https://github.com/angular/angular/issues/7126)
-* **router:** Added method to get current instruction ([6dce4f4](https://github.com/angular/angular/commit/6dce4f4))
-* **transformers:** change 'Missing Identifier' to be an error ([45fd6f0](https://github.com/angular/angular/commit/45fd6f0)), closes [#7403](https://github.com/angular/angular/issues/7403)
-* **transformers:** collect provider information ([81beb1c](https://github.com/angular/angular/commit/81beb1c))
-
-
-### BREAKING CHANGES
-
-* The recently added binding of the current router to the current component
-has been renamed from `router` to `$router`.
-So now the recommended set up for your bindings in your routed component
-is:
-```js
-{
-  ...
-  bindings: {
-    $router: '<'
-  }
-}
-```
-
-
-
-
-<a name="2.0.0-beta.8"></a>
-# 2.0.0-beta.8 (2016-03-02)
-
-
-### Bug Fixes
-
-* **angular1_router:** rename `$route` service to `$rootRouter` ([a1c3be2](https://github.com/angular/angular/commit/a1c3be2))
-* **angular1_router:** rename `router` component binding to `$router` ([edad8e3](https://github.com/angular/angular/commit/edad8e3))
-* **angular1_router:** support templateUrl components ([d4a4d81](https://github.com/angular/angular/commit/d4a4d81))
-* **change_detection:** allow to destroy `OnPush` components inside of a host event. ([280b86e](https://github.com/angular/angular/commit/280b86e))
-* **change_detection:** allow to destroy `OnPush` components inside of a host event. ([ebd438f](https://github.com/angular/angular/commit/ebd438f)), closes [#7192](https://github.com/angular/angular/issues/7192)
-* **core:** support `ngFor` that has an `ngIf` as last node ([1779caf](https://github.com/angular/angular/commit/1779caf)), closes [#6304](https://github.com/angular/angular/issues/6304) [#6878](https://github.com/angular/angular/issues/6878)
-* **dart/payload:** Fix runtime error in hello_world payload app ([eeb594c](https://github.com/angular/angular/commit/eeb594c)), closes [#7358](https://github.com/angular/angular/issues/7358)
-* **differ:** clean up stale identity change refs ([ab36ea0](https://github.com/angular/angular/commit/ab36ea0)), closes [#7193](https://github.com/angular/angular/issues/7193)
-* **DomRenderer:** correctly handle namespaced attributes ([c6afea6](https://github.com/angular/angular/commit/c6afea6))
-* **Router:** Query strings are copied for HashLocationStrategy ([b47f80e](https://github.com/angular/angular/commit/b47f80e)), closes [#7298](https://github.com/angular/angular/issues/7298)
-* **test:** fix a broken test ([9aedef2](https://github.com/angular/angular/commit/9aedef2))
-* **transformers:** record reflection info about abstract classes ([05c185a](https://github.com/angular/angular/commit/05c185a)), closes [#7347](https://github.com/angular/angular/issues/7347)
-* **transformers:** replace an error with a warning when cannot resolve a symbol ([ee3c580](https://github.com/angular/angular/commit/ee3c580))
-* **transformers:** special case types some built-in types, so they can be resolved ([331b9c1](https://github.com/angular/angular/commit/331b9c1))
-* **web_worker:** wait for bindings in kitchen sink spec ([4a93f58](https://github.com/angular/angular/commit/4a93f58))
-* **web_workers:** make waitForElementText function more stable ([f6a8d04](https://github.com/angular/angular/commit/f6a8d04))
-* **WebWorker:** Fix PostMessageBusSink and Source undefined error. ([01fe7f5](https://github.com/angular/angular/commit/01fe7f5)), closes [#7156](https://github.com/angular/angular/issues/7156)
-* **WebWorker:** Make MessageBus EventEmitter synchronous ([69c1694](https://github.com/angular/angular/commit/69c1694))
-
-### Features
-
-* **core:** Add `QueryList.forEach` to public api. ([e7470d5](https://github.com/angular/angular/commit/e7470d5))
-* **core:** Add `QueryList#forEach` ([b634a25](https://github.com/angular/angular/commit/b634a25))
-* **core:** add more debug APIs to inspect the application form a browser ([b5e6319](https://github.com/angular/angular/commit/b5e6319)), closes [#7045](https://github.com/angular/angular/issues/7045) [#7161](https://github.com/angular/angular/issues/7161)
-* **core:** drop `ChangeDetectionStrategy.OnPushObserve` ([f60fa14](https://github.com/angular/angular/commit/f60fa14))
-* **di:** drop support for injecting types with generics in Dart ([c9a3df9](https://github.com/angular/angular/commit/c9a3df9)), closes [#7262](https://github.com/angular/angular/issues/7262)
-* **forms/validators:** pattern validator ([38cb526](https://github.com/angular/angular/commit/38cb526)), closes [#5561](https://github.com/angular/angular/issues/5561)
-* **i18n:** added i18nPlural and i18nSelect pipes ([59629a0](https://github.com/angular/angular/commit/59629a0)), closes [#7268](https://github.com/angular/angular/issues/7268)
-* **pipes:** add ReplacePipe for string manipulation ([6ef2121](https://github.com/angular/angular/commit/6ef2121))
-* **test:** add withProviders for per test providers ([c1a0af5](https://github.com/angular/angular/commit/c1a0af5)), closes [#5128](https://github.com/angular/angular/issues/5128)
-* **transformers:** collect data needed for the template compiler ([ebe531b](https://github.com/angular/angular/commit/ebe531b)), closes [#7299](https://github.com/angular/angular/issues/7299)
-* **transformers:** collect information for CompileDiDependencyMetadata ([39b6e0e](https://github.com/angular/angular/commit/39b6e0e))
-* **transformers:** makes the map of resolved identifiers configurable ([0bb10d6](https://github.com/angular/angular/commit/0bb10d6)), closes [#7359](https://github.com/angular/angular/issues/7359)
-
-
-### BREAKING CHANGES
-
-* `OnPushObserve` was an experimental
-feature for Dart and had
-conceptual performance problems,
-as setting up observables is slow.
-Use `OnPush` instead.
-
-* In Dart we used to support injecting types with generics. As this feature is hard to implement with the upcoming codegen we are dropping it.
-Merge cl/115454020 in G3 with this change.
-
-* The `$router` injectable service has been renamed to `$rootRouter`
-
-* The recently added binding of the current router to the current component
-has been renamed from `router` to `$router`.
-So now the recommended set up for your bindings in your routed component
-is:
-```js
-{
-  ...
-  bindings: {
-    $router: '<'
-  }
-}
-```
-
-<a name="2.0.0-beta.7"></a>
-# 2.0.0-beta.7 (2016-02-18)
-
-
-### Bug Fixes
-
-* **angular_1_router:** Added DI string tokens ([3478d5d](https://github.com/angular/angular/commit/3478d5d)), closes [#4269](https://github.com/angular/angular/issues/4269) [#7031](https://github.com/angular/angular/issues/7031)
-* **typing:** Remove re-export of the Promise built-in type. ([265703b](https://github.com/angular/angular/commit/265703b)), closes [#6468](https://github.com/angular/angular/issues/6468)
-
-<a name="2.0.0-beta.6"></a>
-# 2.0.0-beta.6 (2016-02-11)
-
-
-### Bug Fixes
-
-* **angular1-router:** add missing wrapper methods ([55122cd](https://github.com/angular/angular/commit/55122cd)), closes [#6763](https://github.com/angular/angular/issues/6763) [#6861](https://github.com/angular/angular/issues/6861) [#6861](https://github.com/angular/angular/issues/6861)
-* **angular1-router:** add support for using the component helper ([d86be24](https://github.com/angular/angular/commit/d86be24)), closes [angular/angular.js#13860](https://github.com/angular/angular.js/issues/13860) [#6076](https://github.com/angular/angular/issues/6076) [#5278](https://github.com/angular/angular/issues/5278)
-* **async:** handle synchronous initial value in async pipe ([26e60d6](https://github.com/angular/angular/commit/26e60d6)), closes [#5996](https://github.com/angular/angular/issues/5996)
-* **build:** don't try to copy .d.ts files into the npm distro ([16b5217](https://github.com/angular/angular/commit/16b5217)), closes [#6921](https://github.com/angular/angular/issues/6921)
-* **compiler:** fix interpolation regexp ([9b0e10e](https://github.com/angular/angular/commit/9b0e10e)), closes [#6056](https://github.com/angular/angular/issues/6056)
-* **compiler:** use event names for matching directives ([231773e](https://github.com/angular/angular/commit/231773e)), closes [#6870](https://github.com/angular/angular/issues/6870)
-* **core:** add detail to dehydrated detector exception ([e7ad03c](https://github.com/angular/angular/commit/e7ad03c)), closes [#6939](https://github.com/angular/angular/issues/6939)
-* **core:** mute mode printing in console in prod mode ([74be3d3](https://github.com/angular/angular/commit/74be3d3)), closes [#6873](https://github.com/angular/angular/issues/6873)
-* **di:** throw if a token uses more than 20 dependencies. ([de77700](https://github.com/angular/angular/commit/de77700)), closes [#6690](https://github.com/angular/angular/issues/6690) [#6869](https://github.com/angular/angular/issues/6869)
-* **forms:** add RadioButtonValueAccessor to the list of default value accessors ([8f47aa3](https://github.com/angular/angular/commit/8f47aa3))
-* **forms:** add support for radio buttons ([e725542](https://github.com/angular/angular/commit/e725542)), closes [#6877](https://github.com/angular/angular/issues/6877)
-* **forms:** use strict runtimeType checks instead of instanceof ([50548fb](https://github.com/angular/angular/commit/50548fb)), closes [#6981](https://github.com/angular/angular/issues/6981)
-* **Headers:** serializable toJSON ([b55f176](https://github.com/angular/angular/commit/b55f176)), closes [#6073](https://github.com/angular/angular/issues/6073) [#6714](https://github.com/angular/angular/issues/6714)
-* **ngFor:** update view locals if identity changes ([0f10624](https://github.com/angular/angular/commit/0f10624)), closes [#6923](https://github.com/angular/angular/issues/6923)
-* **router:** Added route data to normalized async route ([df7885c](https://github.com/angular/angular/commit/df7885c)), closes [#6802](https://github.com/angular/angular/issues/6802)
-* **router:** don't prepend `/` unnecessarily to Location paths ([c603643](https://github.com/angular/angular/commit/c603643)), closes [#6729](https://github.com/angular/angular/issues/6729) [#5502](https://github.com/angular/angular/issues/5502)
-* **router:** fix incorrect url param value coercion of 1 to true ([995a9e0](https://github.com/angular/angular/commit/995a9e0)), closes [#5346](https://github.com/angular/angular/issues/5346) [#6286](https://github.com/angular/angular/issues/6286)
-* **router:** fix url path for star segment in path recognizer ([6f1ef33](https://github.com/angular/angular/commit/6f1ef33)), closes [#6976](https://github.com/angular/angular/issues/6976)
-* **router:** fixed the location wrapper for angular1 ([e73fee7](https://github.com/angular/angular/commit/e73fee7)), closes [#6943](https://github.com/angular/angular/issues/6943)
-* **typings:** Don't expose typing dependencies to users. ([2a70f4e](https://github.com/angular/angular/commit/2a70f4e)), closes [#5973](https://github.com/angular/angular/issues/5973) [#5807](https://github.com/angular/angular/issues/5807) [#6266](https://github.com/angular/angular/issues/6266) [#5242](https://github.com/angular/angular/issues/5242) [#6817](https://github.com/angular/angular/issues/6817) [#6267](https://github.com/angular/angular/issues/6267)
-* **upgrade:** fix infinite $rootScope.$digest() ([7e0f02f](https://github.com/angular/angular/commit/7e0f02f)), closes [#6385](https://github.com/angular/angular/issues/6385) [#6386](https://github.com/angular/angular/issues/6386)
-* **Validators:** fix Validators.required marking number zero as invalid ([c2ceb7f](https://github.com/angular/angular/commit/c2ceb7f)), closes [#6617](https://github.com/angular/angular/issues/6617)
-* **WebWorkers:** Fix flaky WebWorker test ([da1fcfd](https://github.com/angular/angular/commit/da1fcfd)), closes [#6851](https://github.com/angular/angular/issues/6851)
-
-### Features
-
-* **angular1_router:** allow component to bind to router ([0f22dce](https://github.com/angular/angular/commit/0f22dce))
-* **typings:** install es6-shim typings to a location users can reference. ([f1f5b45](https://github.com/angular/angular/commit/f1f5b45))
-
-### BREAKING CHANGES
-
-Transitive typings are no longer included in the distribution.
-
-If you use `--target=es5`, you will need to add a line somewhere in your
-application (for example, at the top of the `.ts` file where you call `bootstrap`):
-```
-///<reference path="node_modules/angular2/typings/browser.d.ts"/>
-```
-(Note that if your file is not in the same directory as `node_modules`, you'll
-need to add one or more `../` to the start of that path.)
-
-If you have unit tests, you need to install typings in your project using
-http://github.com/typings/typings
-And install typings such as `jasmine`, `angular-protractor`, or `selenium-webdriver`
-to satisfy the type-checker.
-
-If you rely on es6 APIs other than Promises and Collections, you will need to
-install the es6-shim typing instead of using the `<reference>` tag above.
-Angular previously exposed typings for the entire ES6 API.
-
-<a name="2.0.0-beta.5"></a>
-# 2.0.0-beta.5 (2016-02-10)
-
-This release was incorrect; replaced with beta.6.
-
-<a name="2.0.0-beta.4"></a>
-# 2.0.0-beta.4 (2016-02-10)
-
-This release was incorrect; replaced with beta.6.
-
-<a name="2.0.0-beta.3"></a>
-# 2.0.0-beta.3 (2016-02-03)
-
-
-### Bug Fixes
-
-* **bundle:** add angular2/platform/testing/browser to SystemJS testing bundle ([ae7d2ab](https://github.com/angular/angular/commit/ae7d2ab))
-* **circle:** pre-dependencies `npm install npm` ([36a0e04](https://github.com/angular/angular/commit/36a0e04)), closes [#6777](https://github.com/angular/angular/issues/6777)
-* **dart/transform:** Handle edge cases in ReflectionRemover ([3e9b532](https://github.com/angular/angular/commit/3e9b532)), closes [#6749](https://github.com/angular/angular/issues/6749)
-* **docs:** `rxjs/add/operators/map` -> `rxjs/add/operator/map` (no 's'). ([2a302aa](https://github.com/angular/angular/commit/2a302aa))
-* **karma:** fix running karma via gulp ([27daeaf](https://github.com/angular/angular/commit/27daeaf))
-* **query:** don’t cross component boundaries ([c6adbf6](https://github.com/angular/angular/commit/c6adbf6)), closes [#6759](https://github.com/angular/angular/issues/6759)
-* **query:** update view queries that query directives in embedded views ([1f7a41c](https://github.com/angular/angular/commit/1f7a41c)), closes [#6747](https://github.com/angular/angular/issues/6747)
-* **WebWorkers:** Add support for transitionend events. ([c2a38c0](https://github.com/angular/angular/commit/c2a38c0)), closes [#6649](https://github.com/angular/angular/issues/6649)
-* **zone:** correct incorrect calls to zone ([3211938](https://github.com/angular/angular/commit/3211938))
-
-### Features
-
-* **change_detection:** allow all legal programs in the dev mode ([42231f5](https://github.com/angular/angular/commit/42231f5))
-* **dart/transform:** Generate all code into `<file>.template.dart` ([8c36aa8](https://github.com/angular/angular/commit/8c36aa8))
-* **debug:** replace DebugElement with new Debug DOM ([e1bf3d3](https://github.com/angular/angular/commit/e1bf3d3))
-* **ngFor:** add custom trackBy function support ([cee2318](https://github.com/angular/angular/commit/cee2318)), closes [#6779](https://github.com/angular/angular/issues/6779)
-* **upgrade:** support bindToController with binding definitions ([99e6500](https://github.com/angular/angular/commit/99e6500)), closes [#4784](https://github.com/angular/angular/issues/4784)
-* **WebWorker:** Add Router Support for WebWorker Apps ([8bea667](https://github.com/angular/angular/commit/8bea667)), closes [#3563](https://github.com/angular/angular/issues/3563)
-
-### Performance Improvements
-
-* **dart/transform:** Only process deferred libs when necessary ([f56df65](https://github.com/angular/angular/commit/f56df65)), closes [#6745](https://github.com/angular/angular/issues/6745)
-
-### BREAKING CHANGES
-
-This is a breaking change for unit tests. The API for the DebugElement
-has changed. Now, there is a DebugElement or DebugNode for every node
-in the DOM, not only nodes with an ElementRef. `componentViewChildren` is
-removed, and `childNodes` is a list of ElementNodes corresponding to every
-child in the DOM. `query` no longer takes a scope parameter, since
-the entire rendered DOM is included in the `childNodes`.
-
-Before:
-
-```
-componentFixture.debugElement.componentViewChildren[0];
-```
-
-After
-```
-// Depending on the DOM structure of your component, the
-// index may have changed or the first component child
-// may be a sub-child.
-componentFixture.debugElement.children[0];
-```
-
-Before:
-
-```
-debugElement.query(By.css('div'), Scope.all());
-```
-
-After:
-
-```
-debugElement.query(By.css('div'));
-```
-
-Before:
-
-```
-componentFixture.debugElement.elementRef;
-```
-
-After:
-
-```
-componentFixture.elementRef;
-```
-
-<a name="2.0.0-beta.2"></a>
-# 2.0.0-beta.2 (2016-01-28)
-
-
-### Bug Fixes
-
-* **bundles:** testing bundle should include browser platform ([4a41442](https://github.com/angular/angular/commit/4a41442)), closes [#6626](https://github.com/angular/angular/issues/6626)
-* **ChangeDetection:** chain expressions evaluate to the last expression (codegen) ([933a911](https://github.com/angular/angular/commit/933a911)), closes [#4782](https://github.com/angular/angular/issues/4782) [#5892](https://github.com/angular/angular/issues/5892)
-* **core:** always remove DOM listeners and stream subscriptions ([0ae7775](https://github.com/angular/angular/commit/0ae7775))
-* **Dart:** make some playground samples run with Dart Dev Compiler ([3e65d14](https://github.com/angular/angular/commit/3e65d14)), closes [#6441](https://github.com/angular/angular/issues/6441)
-* **dart/transform:** Ensure template codegen is completed sync ([5f0baaa](https://github.com/angular/angular/commit/5f0baaa)), closes [#6603](https://github.com/angular/angular/issues/6603)
-* **ddc:** router, compiler, web worker fixes for DDC ([db87bae](https://github.com/angular/angular/commit/db87bae)), closes [#6693](https://github.com/angular/angular/issues/6693)
-* **ddc:** type fixes necessary to bring DDC severe count to 0 ([4282297](https://github.com/angular/angular/commit/4282297))
-* **ddc:** use dynamic types in reflection typedefs ([c785a1e](https://github.com/angular/angular/commit/c785a1e)), closes [#6437](https://github.com/angular/angular/issues/6437)
-* **directive:** throw if output the same event more than once ([8c37b7e](https://github.com/angular/angular/commit/8c37b7e))
-* **HtmlLexer:** fix for unicode chars ([a24ee6a](https://github.com/angular/angular/commit/a24ee6a)), closes [#6036](https://github.com/angular/angular/issues/6036) [#6061](https://github.com/angular/angular/issues/6061)
-* **perf:** faster looseIdentical implementation ([761c6d0](https://github.com/angular/angular/commit/761c6d0)), closes [#6364](https://github.com/angular/angular/issues/6364)
-* **template_compiler:** Fix erroneous cycle detection ([eda4c3e](https://github.com/angular/angular/commit/eda4c3e)), closes [#6404](https://github.com/angular/angular/issues/6404) [#6474](https://github.com/angular/angular/issues/6474)
-* **testing:** remove test zone for now and rely on returned promises ([c72ed99](https://github.com/angular/angular/commit/c72ed99)), closes [#6359](https://github.com/angular/angular/issues/6359) [#6601](https://github.com/angular/angular/issues/6601)
-* **transformer:** record HostBinding annotations applied to getters ([a593ffa](https://github.com/angular/angular/commit/a593ffa)), closes [#6283](https://github.com/angular/angular/issues/6283)
-* **web_workers:** support @AngularEntrypoint in web workers ([ac85cbb](https://github.com/angular/angular/commit/ac85cbb)), closes [#6013](https://github.com/angular/angular/issues/6013)
-
-### Features
-
-* **core/application_ref:** Allow asyncronous app initializers. ([df3074f](https://github.com/angular/angular/commit/df3074f)), closes [#5929](https://github.com/angular/angular/issues/5929) [#6063](https://github.com/angular/angular/issues/6063)
-* **dart/transform:** DirectiveProcessor: do not process generated files ([78bfdf7](https://github.com/angular/angular/commit/78bfdf7)), closes [#6517](https://github.com/angular/angular/issues/6517)
-* **dart/transform:** Promote missing Directive warning to error ([47a3b4d](https://github.com/angular/angular/commit/47a3b4d)), closes [#6519](https://github.com/angular/angular/issues/6519) [#6568](https://github.com/angular/angular/issues/6568)
-* **test:** allow tests to specify the platform and application providers used ([b0cebdb](https://github.com/angular/angular/commit/b0cebdb)), closes [#5351](https://github.com/angular/angular/issues/5351) [#5585](https://github.com/angular/angular/issues/5585) [#5975](https://github.com/angular/angular/issues/5975)
-* **testability:** Expose function frameworkStabilizers ([69ae363](https://github.com/angular/angular/commit/69ae363)), closes [#5485](https://github.com/angular/angular/issues/5485)
-
-### BREAKING CHANGES
-
-* `Renderer.listen` now has to return a function that
-  removes the event listener.
-
-* TemplateRef.elementRef is now read-only.
-
-* Tests are now required to use `setBaseTestProviders`
-to set up. Assuming your tests are run on a browser, setup would change
-as follows.
-Before:
-```js
-// Somewhere in test setup
-import {BrowserDomAdapter} from 'angular2/src/platform/browser/browser_adapter';
-BrowserDomAdapter.makeCurrent
-```
-After:
-```js
-// Somewhere in the test setup
-import {setBaseTestProviders} from 'angular2/testing';
-import {
-  TEST_BROWSER_PLATFORM_PROVIDERS,
-  TEST_BROWSER_APPLICATION_PROVIDERS
-} from 'angular2/platform/testing/browser';
-setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS,
-                     TEST_BROWSER_APPLICATION_PROVIDERS);
-```
-
-
-<a name="2.0.0-beta.1"></a>
-# 2.0.0-beta.1 catamorphic-involution (2016-01-08)
-
-
-### Bug Fixes
-
-* **benchpress:** fix flake ([9d28147](https://github.com/angular/angular/commit/9d28147)), closes [#6161](https://github.com/angular/angular/issues/6161)
-* **CHANGELOG:** typo ([d116861](https://github.com/angular/angular/commit/d116861)), closes [#6075](https://github.com/angular/angular/issues/6075) [#6078](https://github.com/angular/angular/issues/6078)
-* **code size:** revert previous devMode change to restore size targets ([c47d85b](https://github.com/angular/angular/commit/c47d85b))
-* **core:** IE only supports parentNode ([630d931](https://github.com/angular/angular/commit/630d931)), closes [#5994](https://github.com/angular/angular/issues/5994)
-* **docs:** fix an import in TOOLS_DART.md ([3524946](https://github.com/angular/angular/commit/3524946)), closes [#5923](https://github.com/angular/angular/issues/5923)
-* **forms:** fix SelectControlValueAccessor not to call onChange twice ([b44d36c](https://github.com/angular/angular/commit/b44d36c)), closes [#5969](https://github.com/angular/angular/issues/5969)
-* **router:** correctly sort route matches with children by specificity ([b2bc50d](https://github.com/angular/angular/commit/b2bc50d)), closes [#5848](https://github.com/angular/angular/issues/5848) [#6011](https://github.com/angular/angular/issues/6011)
-* **router:** preserve specificity for redirects ([a038bb9](https://github.com/angular/angular/commit/a038bb9)), closes [#5933](https://github.com/angular/angular/issues/5933)
-* **TemplateParser:** do not match on attrs that are bindings ([9a70f1a](https://github.com/angular/angular/commit/9a70f1a)), closes [#5914](https://github.com/angular/angular/issues/5914)
-
-### Features
-
-* **core:** improve NoAnnotationError message ([197cf09](https://github.com/angular/angular/commit/197cf09)), closes [#4866](https://github.com/angular/angular/issues/4866) [#5927](https://github.com/angular/angular/issues/5927)
-* **core:** improve stringify for dart to handle closures ([e67ebb7](https://github.com/angular/angular/commit/e67ebb7))
-* **core:** speed up view creation via code gen for view factories. ([7ae23ad](https://github.com/angular/angular/commit/7ae23ad)), closes [#5993](https://github.com/angular/angular/issues/5993)
-* **router:** support links with just auxiliary routes ([2a2f9a9](https://github.com/angular/angular/commit/2a2f9a9)), closes [#5930](https://github.com/angular/angular/issues/5930)
-
-### Performance Improvements
-
-* **dart/transform:** Avoid unnecessary reads for files with no view ([89f32f8](https://github.com/angular/angular/commit/89f32f8)), closes [#6183](https://github.com/angular/angular/issues/6183)
-
-
-### BREAKING CHANGES
-
-* Platform pipes can only contain types and arrays of types,
-  but no bindings any more.
-* When using transformers, platform pipes need to be specified explicitly
-  in the pubspec.yaml via the new config option
-  `platform_pipes`.
-* `Compiler.compileInHost` now returns a `HostViewFactoryRef`
-* Component view is not yet created when component constructor is called.
-  -> use `ngOnInit` lifecycle callback to access the view of a component
-* `ViewRef#setLocal` has been moved to new type `EmbeddedViewRef`
-* `internalView` is gone, use `EmbeddedViewRef.rootNodes` to access
-  the root nodes of an embedded view
-* `renderer.setElementProperty`, `..setElementStyle`, `..setElementAttribute` now
-  take a native element instead of an ElementRef
-* `Renderer` interface now operates on plain native nodes,
-  instead of `RenderElementRef`s or `RenderViewRef`s
-
-<a name="2.0.0-beta.0"></a>
-# 2.0.0-beta.0 somnambulant-inauguration (2015-12-15)
-
-**Enjoy!**
-
-
-<a name="2.0.0-alpha.55"></a>
-# 2.0.0-alpha.55 (2015-12-15)
-
-
-### Bug Fixes
-
-* **router:** export ROUTER_LINK_DSL_PROVIDER and hide MockPopStateEvent ([fc75220](https://github.com/angular/angular/commit/fc75220))
-
-### Features
-
-* **core:** enable dev mode by default ([3dca9d5](https://github.com/angular/angular/commit/3dca9d5))
-
-
-### BREAKING CHANGES
-
-* Previously, Angular would run in dev prod mode by default, and you could enable the dev mode by calling enableDevMode. Now, Angular runs in the dev mode by default, and you can enable the prod mode by calling enableProdMode.
-
-
-
-<a name="2.0.0-alpha.54"></a>
-# 2.0.0-alpha.54 (2015-12-15)
-
-
-### Bug Fixes
-
-* **bundles:** don't include RxJS in System.register bundles ([77b7cae](https://github.com/angular/angular/commit/77b7cae))
-* **bundles:** remove ngUpgrade from the angular2.js bundle ([283962f](https://github.com/angular/angular/commit/283962f)), closes [#5739](https://github.com/angular/angular/issues/5739) [#5854](https://github.com/angular/angular/issues/5854)
-* **bundles:** remove polyfills from angular2.js bundle ([2983558](https://github.com/angular/angular/commit/2983558)), closes [#5881](https://github.com/angular/angular/issues/5881)
-* **bundles:** rename the testing.js bundle to testing.dev.js ([d55655f](https://github.com/angular/angular/commit/d55655f)), closes [#5899](https://github.com/angular/angular/issues/5899) [#5776](https://github.com/angular/angular/issues/5776)
-* **bundles:** rename UMD bundles ([61b9468](https://github.com/angular/angular/commit/61b9468)), closes [#5898](https://github.com/angular/angular/issues/5898)
-
-
-### BREAKING CHANGES
-
-* System.register testing bundle was renamed:
-`testing.js` -> `testing.dev.js`
-
-* UMD bundles were renamed:
-  * `angular2.umd.js` -> `angular2-all.umd.js`
-  * `angular2-testing.umd.js` -> `angular2-all-testing.umd.js`
-
-* RxJS used to be bundled with Angular code and this is not the case
-any more. RxJS needs to be loaded explicitly.
-
-* Previously `angular2.js`, `angular2.min.js` and `angular2.dev.js` bundles
-would have zone.js and reflect-metadata pre-appended. New bundles don't
-contain zone.js nor reflect-metadata - those external dependencies can
-be easily loaded into a browser using `angular2-polyfills.js`
-
-* `ngUpgrade` related symbols are no longer part of the `angular2.js`
-bundle. `ngUpgrade` has a dedicated `upgrade.js` bundle now.
-
-
-
-
-<a name="2.0.0-alpha.53"></a>
-# 2.0.0-alpha.53 (2015-12-13)
-
-
-### Bug Fixes
-
-* **angular2:** don't export compiler bits as public API ([20c6eeb](https://github.com/angular/angular/commit/20c6eeb)), closes [#5815](https://github.com/angular/angular/issues/5815) [#5797](https://github.com/angular/angular/issues/5797)
-* **angular2:** remove `angular2.ts` module ([200dc00](https://github.com/angular/angular/commit/200dc00)), closes [#5815](https://github.com/angular/angular/issues/5815) [#5844](https://github.com/angular/angular/issues/5844)
-* **animate:** ensure transition properties are removed once the animation is over ([b8e69a2](https://github.com/angular/angular/commit/b8e69a2))
-* **async:** improve Rx support in ObservableWrapper ([4a17e69](https://github.com/angular/angular/commit/4a17e69))
-* **async:** support BehaviorSubjects in async pipe ([398f024](https://github.com/angular/angular/commit/398f024))
-* **bundles:** don't use angular2/angular2 in config of System.register bundles ([8c69497](https://github.com/angular/angular/commit/8c69497))
-* **changelog:** fix ngFor on template ([3190c59](https://github.com/angular/angular/commit/3190c59)), closes [#5785](https://github.com/angular/angular/issues/5785)
-* **compiler:** remove AppRootUrl ([ed2c25e](https://github.com/angular/angular/commit/ed2c25e))
-* **core:** workaround for typescript@1.7.3 breakage #5784 ([30e25ac](https://github.com/angular/angular/commit/30e25ac)), closes [#5784](https://github.com/angular/angular/issues/5784)
-* **dom_renderer:** moveNodeAfterSiblings should not detach the reference node ([edcb34d](https://github.com/angular/angular/commit/edcb34d)), closes [#5077](https://github.com/angular/angular/issues/5077) [#5759](https://github.com/angular/angular/issues/5759)
-* **HtmlParser:** allow ng-content elements regardless the namespace ([080469f](https://github.com/angular/angular/commit/080469f)), closes [#5745](https://github.com/angular/angular/issues/5745)
-* **parse5:** support comment nodes with getText and setText ([693d9dc](https://github.com/angular/angular/commit/693d9dc)), closes [#5805](https://github.com/angular/angular/issues/5805)
-* **public_spec:** check exports of barrels instead of angular2/angular2 ([979162d](https://github.com/angular/angular/commit/979162d)), closes [#5841](https://github.com/angular/angular/issues/5841)
-* **styles:** Escape \r characters in compiled text ([92ddc62](https://github.com/angular/angular/commit/92ddc62)), closes [#5772](https://github.com/angular/angular/issues/5772) [#5835](https://github.com/angular/angular/issues/5835)
-* **TemplateParser:** match element and attributes regardless the namespace ([7c13372](https://github.com/angular/angular/commit/7c13372))
-* **upgrade:** allow directives with empty template ([2ca5e38](https://github.com/angular/angular/commit/2ca5e38))
-* **web_workers:** remove unnecessary setup module and AppRootUrl ([a885f37](https://github.com/angular/angular/commit/a885f37)), closes [#5820](https://github.com/angular/angular/issues/5820)
-
-### Features
-
-* **benchpress:** add receivedData + requestCount to PerflogMetric ([fe1dd77](https://github.com/angular/angular/commit/fe1dd77)), closes [#5750](https://github.com/angular/angular/issues/5750)
-* **dom_renderer:** add setBindingDebugInfo method ([79399e1](https://github.com/angular/angular/commit/79399e1)), closes [#5227](https://github.com/angular/angular/issues/5227)
-* **facade:** do not reexport Observable from angular2/core ([43f42d9](https://github.com/angular/angular/commit/43f42d9))
-* **Headers:** implement `toJSON` ([0cb32c2](https://github.com/angular/angular/commit/0cb32c2))
-* **renderer:** use a comment instead of an element when stamping out template>` elements ([194dc7d](https://github.com/angular/angular/commit/194dc7d)), closes [#4805](https://github.com/angular/angular/issues/4805)
-
-
-### BREAKING CHANGES
-
-* `Observable` are no more re-exported from `angular2/core`
-
-    Before
-    ```
-    import {Observable} from 'angular2/core'
-    ```
-    After
-    ```
-    import {Observable} from 'rxjs/Observable';
-    ```
-
-* The setupWebWorker function exported from
-angular2/platform/worker_app  no longer returns a promise of providers,
-but instead synchronously returns providers.
-Related to #5815
-
-* `angular2/angular2` was removed. Use the correct import from one of the barrels. E.g. `angular2/core`, `angular2/platform/browser`,  `angular2/common`, …
-Note: This only applies to JavaScript, Dart is not changed.
-
-* The following symbols are not exported from angular2/angular2 any more:
-`UrlResolver`, `AppRootUrl`, `getUrlScheme`, `DEFAULT_PACKAGE_URL_PROVIDER`.
-Use imports from `angular2/compiler` instead.
-
-
-
-<a name="2.0.0-alpha.52"></a>
-# 2.0.0-alpha.52 (2015-12-10)
-
-
-### Features
-
-* **core:** case-sensitive camelCase templates (kebab-case removal) ([da9b46a](https://github.com/angular/angular/commit/da9b46a))
-
-
-### BREAKING CHANGES
-
-* Angular templates are now case-sensitive and use camelCase instead of kebab-case (dash-case).
-
-  Before:
-
-  ```
-      <p *ng-if="cond">
-      <my-cmp [my-prop]="exp">
-      <my-cmp (my-event)="action()">
-      <my-cmp [(my-prop)]="prop">
-      <input #my-input>
-      <template ng-for #my-item [ng-for-of]=items #my-index="index">
-  ```
-
-  After:
-
-  ```
-      <p *ngIf="cond">
-      <my-cmp [myProp]="exp">
-      <my-cmp (myEvent)="action()">
-      <my-cmp [(myProp)]="prop">
-      <input #myInput>`,
-      <template ngFor "#myItem" [ngForOf]=items #myIndex="index">
-  ```
-
-  The full migration instruction can be found at [angular2/docs/migration/kebab-case.md](https://github.com/angular/angular/blob/master/modules/angular2/docs/migration/kebab-case.md).
-
-
-
-<a name="2.0.0-alpha.51"></a>
-# 2.0.0-alpha.51 (2015-12-10)
-
-
-### Features
-
-* **bundles:** add angular2-testing UMD bundle ([d6d759d](https://github.com/angular/angular/commit/d6d759d)), closes [#5581](https://github.com/angular/angular/issues/5581) [#5734](https://github.com/angular/angular/issues/5734)
-* **core:** provide support for relative assets for components ([28860d3](https://github.com/angular/angular/commit/28860d3)), closes [#5634](https://github.com/angular/angular/issues/5634)
-* **core:** typescript 1.7.3 compatibility ([#5758](https://github.com/angular/angular/pull/5758))
-
-
-
-<a name="2.0.0-alpha.50"></a>
-# 2.0.0-alpha.50 (2015-12-09)
-
-
-### Bug Fixes
-
-* **http:** fix syntax error in package.json ([869a392](https://github.com/angular/angular/commit/869a3923574de9ed34b953e84e1744cc007ca629)), closes [#5636](https://github.com/angular/angular/issues/5636) [#5726](https://github.com/angular/angular/issues/5726)
-* **http:** use `any` for res.json() return ([cbf7888](https://github.com/angular/angular/commit/cbf7888)), closes [#5636](https://github.com/angular/angular/issues/5636) [#5646](https://github.com/angular/angular/issues/5646)
-* **testing:** remove Symbol dummy shim ([c1ae49d](https://github.com/angular/angular/commit/c1ae49d)), closes [#5067](https://github.com/angular/angular/issues/5067) [#5719](https://github.com/angular/angular/issues/5719)
-* **package:** update RxJS to alpha.14 ([4432cf5](https://github.com/angular/angular/commit/4432cf5438b8c615d297e8965f0ad69f0188169e)), closes [#5722](https://github.com/angular/angular/issues/5722)
-
-### Features
-
-* **testing:** package angular2_testing to prepare it for publishing ([cc8f1f9](https://github.com/angular/angular/commit/cc8f1f9)), closes [#5682](https://github.com/angular/angular/issues/5682)
-
-<a name="2.0.0-alpha.49"></a>
-# 2.0.0-alpha.49 (2015-12-09)
-
-
-### Bug Fixes
-
-* **bootstrap:** fix the configuration of ExceptionHandler ([0d9a1de](https://github.com/angular/angular/commit/0d9a1de))
-* **build:** lock down version of package:code_transformers ([85d89ba](https://github.com/angular/angular/commit/85d89ba))
-* **bundles:** clean-up and re-organize UMD bundles ([fb4f1e8](https://github.com/angular/angular/commit/fb4f1e8)), closes [#5593](https://github.com/angular/angular/issues/5593) [#5697](https://github.com/angular/angular/issues/5697)
-* **bundles:** remove SFX bundle ([a4ba46c](https://github.com/angular/angular/commit/a4ba46c)), closes [#5665](https://github.com/angular/angular/issues/5665) [#5712](https://github.com/angular/angular/issues/5712)
-* **bundles:** rename external-dependencies to angular-polyfills ([b3c91b1](https://github.com/angular/angular/commit/b3c91b1)), closes [#5714](https://github.com/angular/angular/issues/5714) [#5716](https://github.com/angular/angular/issues/5716)
-* **changelog:** add RxJS imports breaking change ([ad48169](https://github.com/angular/angular/commit/ad48169)), closes [#5678](https://github.com/angular/angular/issues/5678)
-* **changelog:** correct import path ([86c74cf](https://github.com/angular/angular/commit/86c74cf)), closes [#5681](https://github.com/angular/angular/issues/5681)
-* **compiler:** support properties on SVG elements ([daaa8ee](https://github.com/angular/angular/commit/daaa8ee)), closes [#5653](https://github.com/angular/angular/issues/5653)
-* **dynamic_component_loader:** leave the view tree in a consistent state when hydration fails ([0df8bc4](https://github.com/angular/angular/commit/0df8bc4)), closes [#5718](https://github.com/angular/angular/issues/5718)
-* **form:** Form directives are exportedAs 'ngForm' (was 'form') ([8657ca4](https://github.com/angular/angular/commit/8657ca4)), closes [#5658](https://github.com/angular/angular/issues/5658) [#5709](https://github.com/angular/angular/issues/5709)
-* **HtmlLexer:** handle CR in input stream per HTML spec ([9850e68](https://github.com/angular/angular/commit/9850e68)), closes [#5618](https://github.com/angular/angular/issues/5618) [#5629](https://github.com/angular/angular/issues/5629)
-* **HtmlLexer:** tag name must follow "<" without space ([47f1d12](https://github.com/angular/angular/commit/47f1d12))
-* **HtmlParser:** Do not add parent element for template children ([3a43861](https://github.com/angular/angular/commit/3a43861)), closes [#5638](https://github.com/angular/angular/issues/5638)
-* **HtmlParser:** ignore LF immediately following pre, textarea & listing ([eb0ea93](https://github.com/angular/angular/commit/eb0ea93)), closes [#5630](https://github.com/angular/angular/issues/5630) [#5688](https://github.com/angular/angular/issues/5688)
-* **HtmlParser:** mark `<source>` elements as void ([50490b5](https://github.com/angular/angular/commit/50490b5)), closes [#5663](https://github.com/angular/angular/issues/5663) [#5668](https://github.com/angular/angular/issues/5668)
-* **npm:** move es6-shim from devDependencies to dependencies ([21542ed](https://github.com/angular/angular/commit/21542ed))
-* **package:** relock RxJS to alpha.11 ([4b1618c](https://github.com/angular/angular/commit/4b1618c)), closes [#5643](https://github.com/angular/angular/issues/5643) [#5644](https://github.com/angular/angular/issues/5644)
-* **router:** set correct redirect/default URL from hashchange ([aa85856](https://github.com/angular/angular/commit/aa85856)), closes [#5590](https://github.com/angular/angular/issues/5590) [#5683](https://github.com/angular/angular/issues/5683)
-
-### Features
-
-* **HtmlLexer:** allow "<" in text tokens ([aecf681](https://github.com/angular/angular/commit/aecf681)), closes [#5550](https://github.com/angular/angular/issues/5550)
-* **TemplateParser:** allow template elements regardless the namespace  ([1f35048](https://github.com/angular/angular/commit/1f35048)), closes [#5703](https://github.com/angular/angular/issues/5703)
-
-
-### BREAKING CHANGES
-
-* The existing sfx bundle (angular2.sfx.dev.js) is replaced by UMD bundles:
-angular2.umd.js and angular2.umd.dev.js. The new UMD bundles dont have
-polyfills (zone.js, reflect-metadata) pre-appended. Those polyfills
-can be easily loaded by including the angular-polyfills.js bundle.
-
-* The `external-dependencies.js` bundle was removed.
-Use `angular-polyfills.js` instead.
-
-* Number and content of UMD bundles have changed:
-- we only publish one bundle that contains: core, common, platform/browser, http, router, instrumentation and upgrade
-- exported names have changed and now:
-  - core is exported as `ng.core`
-  - common is exported as `ng.common`
-  - platform/browser is exported as `ng.platform.browser`
-  - http is exported as `ng.http`
-  - router is exported as `ng.router`
-  - instrumentation is exported as `ng.instrumentation`
-  - upgrade is exported as `ng.upgrade`
-
-* Form directives are exportedAs 'ngForm' (was 'form')
-
-    Before:
-      ```html
-        <form #f="form">
-      ```
-
-    After:
-      ```html
-        <form #f="ngForm">
-      ```
-* rxjs, reflect-metadata, zone.js and es6-shims now must be specified as
-  explicit dependencies of each angular app that uses npm for package management.
-
-  To migrate, please add the following into the "dependencies" section of your package.json:
-
-  ```
-  "dependencies": {
-      ...
-
-      "es6-promise": "^3.0.2",
-      "es6-shim": "^0.33.3",
-      "reflect-metadata": "0.1.2",
-      "rxjs": "5.0.0-alpha.11",
-      "zone.js": "0.5.8"
-
-      ...
-  }
-  ```
-
-  or [check angular2's package.json](https://github.com/angular/angular/blob/master/package.json) for the latest `dependencies`
-
-
-<a name="2.0.0-alpha.48"></a>
-# 2.0.0-alpha.48 (2015-12-05)
-
-
-### Bug Fixes
-
-* **build:** change npm publish script not to remove angular folder when building benchpress ([47d0942](https://github.com/angular/angular/commit/47d0942))
-* **build:** include benchpress into browser_tree ([87ac36f](https://github.com/angular/angular/commit/87ac36f))
-* **core/forms:**  input[type=text] .valueChanges fires unexpectedly ([680f7e0](https://github.com/angular/angular/commit/680f7e0)), closes [#4768](https://github.com/angular/angular/issues/4768) [#5284](https://github.com/angular/angular/issues/5284) [#5401](https://github.com/angular/angular/issues/5401)
-* **dart/reflection:** Fix `NoReflectionCapabilities` interface ([0a3a17f](https://github.com/angular/angular/commit/0a3a17f)), closes [#5559](https://github.com/angular/angular/issues/5559) [#5578](https://github.com/angular/angular/issues/5578)
-* **HtmlParser:** close void elements on all node types ([9c6b929](https://github.com/angular/angular/commit/9c6b929)), closes [#5528](https://github.com/angular/angular/issues/5528)
-* **HtmlParser:** do not add a tbody parent for tr inside thead & tfoot ([c58e7e0](https://github.com/angular/angular/commit/c58e7e0)), closes [#5403](https://github.com/angular/angular/issues/5403)
-* **HtmlParser:** ng-content is not a void element ([e67e195](https://github.com/angular/angular/commit/e67e195)), closes [#5563](https://github.com/angular/angular/issues/5563) [#5586](https://github.com/angular/angular/issues/5586)
-* **WebWorker:** Add @AngularEntrypoint to worker_app bundle ([5e50859](https://github.com/angular/angular/commit/5e50859)), closes [#5588](https://github.com/angular/angular/issues/5588)
-
-### Features
-
-* **core:** remove typings from package.json to disallow 'import * as n from 'angular2''' ([9a65ea7](https://github.com/angular/angular/commit/9a65ea7))
-* **dart/transform:** Add quick_transformer ([f77ca7b](https://github.com/angular/angular/commit/f77ca7b)), closes [#5484](https://github.com/angular/angular/issues/5484)
-* **dart/transform:** Introduce @AngularEntrypoint() ([6b2ef25](https://github.com/angular/angular/commit/6b2ef25))
-* **HtmlParser:** add most common named character references ([d90a226](https://github.com/angular/angular/commit/d90a226)), closes [#5546](https://github.com/angular/angular/issues/5546) [#5579](https://github.com/angular/angular/issues/5579)
-* **HtmlParser:** better error message when a void tag has content ([62c2ed7](https://github.com/angular/angular/commit/62c2ed7))
-* **HtmlParser:** enforce no end tag for void elements ([5660446](https://github.com/angular/angular/commit/5660446))
-* **HtmlParser:** enforce only void & foreign elts can be self closed ([d388c0a](https://github.com/angular/angular/commit/d388c0a)), closes [#5591](https://github.com/angular/angular/issues/5591)
-* **mocks:** Mark mock objects @Injectable() ([35e32bb](https://github.com/angular/angular/commit/35e32bb)), closes [#5576](https://github.com/angular/angular/issues/5576)
-* **router:** implement router link DSL ([4ea5b6e](https://github.com/angular/angular/commit/4ea5b6e)), closes [#5557](https://github.com/angular/angular/issues/5557) [#5562](https://github.com/angular/angular/issues/5562)
-* **sourcemaps:** use inline source maps and inline sources in node_tree ([7e18d4c](https://github.com/angular/angular/commit/7e18d4c)), closes [#5617](https://github.com/angular/angular/issues/5617)
-* **test:** add angular2_testing dart library ([93a1ec2](https://github.com/angular/angular/commit/93a1ec2)), closes [#3289](https://github.com/angular/angular/issues/3289)
-* **testing:** export useful properties from componentFixture ([e9f873a](https://github.com/angular/angular/commit/e9f873a))
-* **typings:** import global-es6.d.ts in core ([22e9590](https://github.com/angular/angular/commit/22e9590))
-
-
-### BREAKING CHANGES
-
-* `<whatever />` used to be expanded to `<whatever></whatever>`.
-The parser now follows the HTML5 spec more closely.
-Only void and foreign elements can be self closed.
-
-* End tags used to be tolerated for void elements with no content.
-They are no more allowed so that we more closely follow the HTML5 spec.
-
-* Before
-import * as ng from 'angular2';
-After
-import * as core from 'angular2/core';
-
-* Http's MockBackend is no longer exported from the `angular2/http` module. It's now available at `angular2/http/testing`
-
-* Operators and Observables from RxJS (e.g. .map(), .toArray(), .toPromise(), etc ) now need to be explicitly imported (once per operator in your app)
-  ```
-  import {Observable} from 'rxjs/Observable';
-  import 'rxjs/add/operator/map';
-  import 'rxjs/add/observable/interval';
-
-  Observable.interval(1000).subscribe(...);
-
-  http.get('foos.json').map(res => res.json()).subscribe(...);
-  ```
-
-<a name="2.0.0-alpha.47"></a>
-# 2.0.0-alpha.47 (2015-12-01)
-
-
-### Bug Fixes
-
-* **build:** do not reexport compiler from angular2/angular2 ([30d35b5](https://github.com/angular/angular/commit/30d35b5)), closes [#5422](https://github.com/angular/angular/issues/5422)
-* **build:** fix npm install not to depend on minimist ([6d70cd7](https://github.com/angular/angular/commit/6d70cd7)), closes [#5282](https://github.com/angular/angular/issues/5282)
-* **build:** fix source maps ([87d56ac](https://github.com/angular/angular/commit/87d56ac)), closes [#5444](https://github.com/angular/angular/issues/5444)
-* **build:** increase memory limit ([2cd0f07](https://github.com/angular/angular/commit/2cd0f07))
-* **compiler:** dedup directives in template compiler ([87ddc8f](https://github.com/angular/angular/commit/87ddc8f)), closes [#5311](https://github.com/angular/angular/issues/5311) [#5464](https://github.com/angular/angular/issues/5464)
-* **core:** Export dev mode API in Dart. ([a3e6406](https://github.com/angular/angular/commit/a3e6406)), closes [#5233](https://github.com/angular/angular/issues/5233)
-* **core:** reexport PLATFORM_DIRECTIVES and PLATFORM_PIPES in dart ([01ebff4](https://github.com/angular/angular/commit/01ebff4))
-* **core:** Run component disposal before destroyRootHostView() to avoid crash if change det ([b22eddf](https://github.com/angular/angular/commit/b22eddf)), closes [#5226](https://github.com/angular/angular/issues/5226)
-* **core:** various dart-specific fixes for core and facades ([4a43230](https://github.com/angular/angular/commit/4a43230))
-* **dart:** fix the static_browser platform not to include compiler ([ad6fb06](https://github.com/angular/angular/commit/ad6fb06)), closes [#5321](https://github.com/angular/angular/issues/5321)
-* **dart/transform:** Consider of line numbers in inliner_for_test ([a31e2f5](https://github.com/angular/angular/commit/a31e2f5)), closes [#5281](https://github.com/angular/angular/issues/5281) [#5285](https://github.com/angular/angular/issues/5285)
-* **dart/transform:** Omit bootstrap.dart in ng_deps ([0db0252](https://github.com/angular/angular/commit/0db0252)), closes [#5315](https://github.com/angular/angular/issues/5315) [#5348](https://github.com/angular/angular/issues/5348)
-* **EventEmitter:** resolve onError and onComplete asynchronously ([019cb41](https://github.com/angular/angular/commit/019cb41)), closes [#4443](https://github.com/angular/angular/issues/4443)
-* **examples:** Don't generate Dart code for TS examples in nested directories. ([b571baa](https://github.com/angular/angular/commit/b571baa))
-* **forms:** scope value accessors, validators, and async validators to self ([ba64b5e](https://github.com/angular/angular/commit/ba64b5e)), closes [#5440](https://github.com/angular/angular/issues/5440)
-* **http:** error on non-200 status codes ([201f189](https://github.com/angular/angular/commit/201f189)), closes [#5130](https://github.com/angular/angular/issues/5130)
-* **http:** Fix all requests defaulting to Get ([e1d7bdc](https://github.com/angular/angular/commit/e1d7bdc)), closes [#5309](https://github.com/angular/angular/issues/5309) [#5397](https://github.com/angular/angular/issues/5397)
-* **http:** refactor 'require' statements to 'import' declarations for Rx ([bcd926a](https://github.com/angular/angular/commit/bcd926a)), closes [#5287](https://github.com/angular/angular/issues/5287)
-* **http:** return Response headers ([4332ccf](https://github.com/angular/angular/commit/4332ccf)), closes [#5237](https://github.com/angular/angular/issues/5237)
-* **http:** return URL in Response ([46fc153](https://github.com/angular/angular/commit/46fc153)), closes [#5165](https://github.com/angular/angular/issues/5165)
-* **parser:** do not crash on untokenizable quote prefixes ([b90de66](https://github.com/angular/angular/commit/b90de66)), closes [#5486](https://github.com/angular/angular/issues/5486)
-* **publish:** syntax fix ([9985968](https://github.com/angular/angular/commit/9985968))
-* **renderer:** apply host element encapsulation also if the parent component is not encapsulate ([344776f](https://github.com/angular/angular/commit/344776f)), closes [#5240](https://github.com/angular/angular/issues/5240)
-* **router:** apply APP_BASE_HREF when using PathLocationStrategy ([ac38812](https://github.com/angular/angular/commit/ac38812)), closes [#5028](https://github.com/angular/angular/issues/5028)
-* **router:** fix a typing issue ([4215afc](https://github.com/angular/angular/commit/4215afc)), closes [#5518](https://github.com/angular/angular/issues/5518)
-* **transformers:** Fix @Input/@Output annotations with setters/getters ([d9f362a](https://github.com/angular/angular/commit/d9f362a)), closes [#5251](https://github.com/angular/angular/issues/5251) [#5259](https://github.com/angular/angular/issues/5259)
-* **transformers:** use BarbackMode instead of assertionEnabled to enable debug info generation ([7f3223b](https://github.com/angular/angular/commit/7f3223b)), closes [#5245](https://github.com/angular/angular/issues/5245) [#5466](https://github.com/angular/angular/issues/5466)
-* **typings:** two errors not reported by our build: ([7f6289c](https://github.com/angular/angular/commit/7f6289c))
-* **web worker:** remove usages of deprecated zone API ([d59c20c](https://github.com/angular/angular/commit/d59c20c)), closes [#5425](https://github.com/angular/angular/issues/5425)
-
-### Features
-
-* **bootstrap:** add platform and app initializers ([3c43a8c](https://github.com/angular/angular/commit/3c43a8c)), closes [#5355](https://github.com/angular/angular/issues/5355)
-* **build:** add an option to disable type checks when running tests ([4e585bc](https://github.com/angular/angular/commit/4e585bc)), closes [#5299](https://github.com/angular/angular/issues/5299)
-* **bundles:** publish UMD bundles ([fa725b4](https://github.com/angular/angular/commit/fa725b4)), closes [#5223](https://github.com/angular/angular/issues/5223)
-* **Compiler:** case sensitive html parser ([86aeb8b](https://github.com/angular/angular/commit/86aeb8b))
-* **Compiler:** case sensitive html parser ([a8edc1e](https://github.com/angular/angular/commit/a8edc1e)), closes [#4417](https://github.com/angular/angular/issues/4417) [#5264](https://github.com/angular/angular/issues/5264)
-* **Compiler:** case sensitive html parser ([36a423f](https://github.com/angular/angular/commit/36a423f)), closes [#4417](https://github.com/angular/angular/issues/4417) [#5264](https://github.com/angular/angular/issues/5264)
-* **Compiler:** case sensitive html parser ([adb8756](https://github.com/angular/angular/commit/adb8756))
-* **core:** extract platforms out of core ([3f4628c](https://github.com/angular/angular/commit/3f4628c)), closes [#5219](https://github.com/angular/angular/issues/5219)
-* **core:** extract platforms out of core ([0eab4fc](https://github.com/angular/angular/commit/0eab4fc)), closes [#5219](https://github.com/angular/angular/issues/5219) [#5280](https://github.com/angular/angular/issues/5280)
-* **dart/transform:** Bail early for files with no deferred libraries ([f80321f](https://github.com/angular/angular/commit/f80321f))
-* **dart/transform:** Do not re-process generated files ([8f91ff8](https://github.com/angular/angular/commit/8f91ff8))
-* **parser:** allows users install custom AST transformers ([a43ed79](https://github.com/angular/angular/commit/a43ed79)), closes [#5382](https://github.com/angular/angular/issues/5382)
-* **router:** add support for APP_BASE_HREF to HashLocationStrategy ([1bec4f6](https://github.com/angular/angular/commit/1bec4f6)), closes [#4935](https://github.com/angular/angular/issues/4935) [#5368](https://github.com/angular/angular/issues/5368) [#5451](https://github.com/angular/angular/issues/5451)
-* **router:** allow linking to auxiliary routes ([0b1ff2d](https://github.com/angular/angular/commit/0b1ff2d)), closes [#4694](https://github.com/angular/angular/issues/4694)
-* **templates:** introduce quoted expressions to support 3rd-party expression languages ([b6ec238](https://github.com/angular/angular/commit/b6ec238))
-* **testing:** use zones to avoid the need for injectAsync ([0c9596a](https://github.com/angular/angular/commit/0c9596a))
-
-
-### BREAKING CHANGES
-
-* Previously http would only error on network errors to match the fetch
-specification. Now status codes less than 200 and greater than 299 will
-cause Http's Observable to error.
-
-* A few private helpers (e.g., platformCommon or applicationCommon) were removed or replaced with other helpers. Look at PLATFORM_COMMON_PROVIDERS, APPLICATION_COMMON_PROVIDERS, BROWSER_PROVIDERS, BROWSER_APP_PROVIDERS to see if they export the providers you need.
-
-* Previously, components that would implement lifecycle interfaces would include methods
-like "onChanges" or "afterViewInit." Given that components were at risk of using such
-names without realizing that Angular would call the methods at different points of
-the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
-far reducing the risk of an accidental name collision.
-
-  To fix, just rename these methods:
-  * onInit
-  * onDestroy
-  * doCheck
-  * onChanges
-  * afterContentInit
-  * afterContentChecked
-  * afterViewInit
-  * afterViewChecked
-  * _Router Hooks_
-  * onActivate
-  * onReuse
-  * onDeactivate
-  * canReuse
-  * canDeactivate
-
-  To:
-  * ngOnInit,
-  * ngOnDestroy,
-  * ngDoCheck,
-  * ngOnChanges,
-  * ngAfterContentInit,
-  * ngAfterContentChecked,
-  * ngAfterViewInit,
-  * ngAfterViewChecked
-  * _Router Hooks_
-  * routerOnActivate
-  * routerOnReuse
-  * routerOnDeactivate
-  * routerCanReuse
-  * routerCanDeactivate
-
-  The names of lifecycle interfaces and enums have not changed, though interfaces
-  have been updated to reflect the new method names.
-
-<a name="2.0.0-alpha.46"></a>
-# 2.0.0-alpha.46 (2015-11-11)
-
-
-### Bug Fixes
-
-* **core:** Export dev mode API in Dart. ([a3e6406](https://github.com/angular/angular/commit/a3e6406)), closes [#5233](https://github.com/angular/angular/issues/5233)
-* **core:** reexport PLATFORM_DIRECTIVES and PLATFORM_PIPES in dart ([01ebff4](https://github.com/angular/angular/commit/01ebff4))
-* **core:** various dart-specific fixes for core and facades ([4a43230](https://github.com/angular/angular/commit/4a43230))
-* **renderer:** apply host element encapsulation also if the parent component is not encapsulate ([344776f](https://github.com/angular/angular/commit/344776f)), closes [#5240](https://github.com/angular/angular/issues/5240)
-* **analyzer:** fix dart analyzer errors ([56e7364](https://github.com/angular/angular/commit/56e7364)), closes [#4992](https://github.com/angular/angular/issues/4992)
-* **benchmarks:** fix tracing categories to work with Dartium ([64bd963](https://github.com/angular/angular/commit/64bd963)), closes [#5209](https://github.com/angular/angular/issues/5209)
-* **build:** EMFILE error on Windows when executing JS unit tests ([1dc8a0a](https://github.com/angular/angular/commit/1dc8a0a)), closes [#4525](https://github.com/angular/angular/issues/4525) [#4796](https://github.com/angular/angular/issues/4796)
-* **build:** reorder bundling step ([5fecb3b](https://github.com/angular/angular/commit/5fecb3b)), closes [#5208](https://github.com/angular/angular/issues/5208)
-* **compiler:** don’t lowercase attributes to support svg ([6133f2c](https://github.com/angular/angular/commit/6133f2c)), closes [#5166](https://github.com/angular/angular/issues/5166)
-* **compiler:** remove style when [style.foo]='exp' evaluates to null ([f1989e7](https://github.com/angular/angular/commit/f1989e7)), closes [#5110](https://github.com/angular/angular/issues/5110) [#5114](https://github.com/angular/angular/issues/5114)
-* **core:** Add an error state for ChangeDetectors that is set when bindings or lifecycle ev ([d1b54d6](https://github.com/angular/angular/commit/d1b54d6)), closes [#4323](https://github.com/angular/angular/issues/4323) [#4953](https://github.com/angular/angular/issues/4953)
-* **core:** Provide setDevMode() to enable/disable development mode in Javascript. ([4bb9c46](https://github.com/angular/angular/commit/4bb9c46))
-* **core:** Unload components when individually disposed. ([1ff1792](https://github.com/angular/angular/commit/1ff1792))
-* **dart/transform:** Gracefully handle empty .ng_meta.json files ([a87c5d9](https://github.com/angular/angular/commit/a87c5d9))
-* **forms:** Export the NG_VALUE_ACCESSOR binding token. ([fee5dea](https://github.com/angular/angular/commit/fee5dea))
-* **forms:** update compose to handle null validators ([9d58f46](https://github.com/angular/angular/commit/9d58f46))
-* **http:** use Observable<Response> on Http methods ([a9b1270](https://github.com/angular/angular/commit/a9b1270)), closes [#5017](https://github.com/angular/angular/issues/5017)
-* **http:** use Response for JSONP errors ([31687ef](https://github.com/angular/angular/commit/31687ef))
-* **JsonPipe:** marks json pipe as not pure Marked json pipe as not pure so that it runs all the ([fc016b5](https://github.com/angular/angular/commit/fc016b5)), closes [#4821](https://github.com/angular/angular/issues/4821)
-* **material:** Disable md-grid-list tests until #5132 is fixed. ([0b11051](https://github.com/angular/angular/commit/0b11051))
-* **ng-content:** wildcard ng-content has to go last. ([39626a9](https://github.com/angular/angular/commit/39626a9)), closes [#5016](https://github.com/angular/angular/issues/5016)
-* **NgFor:** allow default templates with ng-for-template ([2d0c8f1](https://github.com/angular/angular/commit/2d0c8f1)), closes [#5161](https://github.com/angular/angular/issues/5161)
-* **Pipe:** pure is an optional argument ([7ba426c](https://github.com/angular/angular/commit/7ba426c))
-* **Pipes:** mark date & slice as non-pure ([2f1f83a](https://github.com/angular/angular/commit/2f1f83a))
-* **playground:** fix the inbox example ([6240245](https://github.com/angular/angular/commit/6240245))
-* remove deprecated zone API usage in testability ([3593d85](https://github.com/angular/angular/commit/3593d85)), closes [#5084](https://github.com/angular/angular/issues/5084)
-* **router:** properly serialize aux routes ([23784a2](https://github.com/angular/angular/commit/23784a2))
-* remove internal usages of deprecated overrideOnTurnDone ([c814dfb](https://github.com/angular/angular/commit/c814dfb)), closes [#5079](https://github.com/angular/angular/issues/5079)
-* **router:** respond to hashchange events ([53bddec](https://github.com/angular/angular/commit/53bddec)), closes [#5013](https://github.com/angular/angular/issues/5013)
-* **RouterLink:** do not prevent default behavior if target set on anchor element ([a69e7fe](https://github.com/angular/angular/commit/a69e7fe)), closes [#4233](https://github.com/angular/angular/issues/4233) [#5082](https://github.com/angular/angular/issues/5082)
-* **setup:** set tsconfig so that it works in editors ([fb8b815](https://github.com/angular/angular/commit/fb8b815))
-* **shadow_css:** strip comments and fix logic for parsing rules. ([d8775e0](https://github.com/angular/angular/commit/d8775e0)), closes [#5037](https://github.com/angular/angular/issues/5037) [#5011](https://github.com/angular/angular/issues/5011)
-* **test:** "integration tests svg should support svg elements" fails in non-Chrome browsers ([c4964e7](https://github.com/angular/angular/commit/c4964e7)), closes [#4987](https://github.com/angular/angular/issues/4987) [#5000](https://github.com/angular/angular/issues/5000)
-* **test:** Android browser does not support calc() a CSS unit value ([e37799a](https://github.com/angular/angular/commit/e37799a)), closes [#5001](https://github.com/angular/angular/issues/5001)
-* **WebWorker:** Don't send messages when the buffer is empty ([8485ef9](https://github.com/angular/angular/commit/8485ef9)), closes [#4138](https://github.com/angular/angular/issues/4138)
-* **WebWorker:** Fix bug causing multi browser demo to crash ([eba7073](https://github.com/angular/angular/commit/eba7073)), closes [#4839](https://github.com/angular/angular/issues/4839)
-
-### Features
-
-* **change_detect:** Guard `checkNoChanges` behind `assertionsEnabled` ([63e853d](https://github.com/angular/angular/commit/63e853d)), closes [#4560](https://github.com/angular/angular/issues/4560)
-* **ChangeDetector:** Add support for short-circuiting ([7e92d2e](https://github.com/angular/angular/commit/7e92d2e))
-* **core:** add support for ambient directives ([5948aba](https://github.com/angular/angular/commit/5948aba))
-* **core:** add support for ambient directives to dart transformers ([4909fed](https://github.com/angular/angular/commit/4909fed)), closes [#5129](https://github.com/angular/angular/issues/5129)
-* **core:** make transformers handle @Input/@Output/@HostBinding/@HostListener ([16bc238](https://github.com/angular/angular/commit/16bc238)), closes [#5080](https://github.com/angular/angular/issues/5080)
-* **core:** renam AMBIENT_DIRECTIVES and AMBIENT_PIPES into PLATFORM_DIRECTIVES and PLATFORM ([e27665c](https://github.com/angular/angular/commit/e27665c)), closes [#5201](https://github.com/angular/angular/issues/5201)
-* **dart:** Support forcing dev mode via enableDevMode in Dart. ([a8d9dbf](https://github.com/angular/angular/commit/a8d9dbf)), closes [#5193](https://github.com/angular/angular/issues/5193)
-* **dart/transform:** Simplify dependency imports ([9d0b61b](https://github.com/angular/angular/commit/9d0b61b))
-* **facade:** add a way to convert observables into promises ([2c201d3](https://github.com/angular/angular/commit/2c201d3))
-* **facade:** add a way to detect if an object is a Promise ([fc50829](https://github.com/angular/angular/commit/fc50829))
-* **facade:** add ObservableWrapper.fromPromise ([53bd6e1](https://github.com/angular/angular/commit/53bd6e1))
-* **facade:** add support for async validators returning observables ([4439106](https://github.com/angular/angular/commit/4439106)), closes [#5032](https://github.com/angular/angular/issues/5032)
-* **forms:** add support for adding async validators via template ([31c12af](https://github.com/angular/angular/commit/31c12af))
-* **forms:** add support for async validations ([bb2b961](https://github.com/angular/angular/commit/bb2b961))
-* **forms:** implements a combinator for composing async validators ([cf449dd](https://github.com/angular/angular/commit/cf449dd))
-* **forms:** remove controlsErrors ([7343ef0](https://github.com/angular/angular/commit/7343ef0)), closes [#5102](https://github.com/angular/angular/issues/5102)
-* **forms:** update FormBuilder to support async validations ([1c322f1](https://github.com/angular/angular/commit/1c322f1)), closes [#5020](https://github.com/angular/angular/issues/5020)
-* **forms:** Use the DefaultValueAccessor for controls with an ng-default-control attribute. ([f21e782](https://github.com/angular/angular/commit/f21e782)), closes [#5076](https://github.com/angular/angular/issues/5076)
-* **router:** provide RouteConfig object for AuxRoute ([0ebe283](https://github.com/angular/angular/commit/0ebe283)), closes [#4319](https://github.com/angular/angular/issues/4319)
-
-### Performance Improvements
-
-* **dart/transform:** Restrict visibility/mutability of codegen ([45b33c5](https://github.com/angular/angular/commit/45b33c5)), closes [#5009](https://github.com/angular/angular/issues/5009)
-
-
-### BREAKING CHANGES
-
-* AMBIENT_DIRECTIVES -> PLATFORM_DIRECTIVES
-* AMBIENT_PIPES -> PLATFORM_PIPES
-
-* Previously, the controlsErrors getter of ControlGroup and ControlArray returned the errors of their direct children. This was confusing because the result did not include the errors of nested children (ControlGroup -> ControlGroup -> Control). Making controlsErrors to include such errors would require inventing some custom serialization format, which applications would have to understand.
-Since controlsErrors was just a convenience method, and it was causing confusing, we are removing it. If you want to get the errors of the whole form serialized into a single object, you can manually traverse the form and accumulate the errors. This way you have more control over how the errors are serialized.
-
-<a name="2.0.0-alpha.45"></a>
-# 2.0.0-alpha.45 (2015-10-29)
-
-
-### Bug Fixes
-
-* **benchmarks:** update react and polymer benchmarks and get tree update numbers for all of the b ([bc10dc3](https://github.com/angular/angular/commit/bc10dc3)), closes [#4709](https://github.com/angular/angular/issues/4709)
-* **benchpress:** increase sampling frequency ([127d6b6](https://github.com/angular/angular/commit/127d6b6)), closes [#4985](https://github.com/angular/angular/issues/4985)
-* **ChangeDetector:** support for NaN ([1316c3e](https://github.com/angular/angular/commit/1316c3e)), closes [#4853](https://github.com/angular/angular/issues/4853)
-* **compiler:** create literal property bindings for empty *… directives. ([b2dc5c2](https://github.com/angular/angular/commit/b2dc5c2)), closes [#4916](https://github.com/angular/angular/issues/4916)
-* **compiler:** do not match directives to variable names ([711dbf4](https://github.com/angular/angular/commit/711dbf4))
-* **compiler:** load style urls in runtime mode correctly ([27dbd2d](https://github.com/angular/angular/commit/27dbd2d)), closes [#4952](https://github.com/angular/angular/issues/4952)
-* **compiler:** support events on a template element that are consumed via a direct expression ([3118d5c](https://github.com/angular/angular/commit/3118d5c)), closes [#4883](https://github.com/angular/angular/issues/4883)
-* **core:** Fix typo ([485c85b](https://github.com/angular/angular/commit/485c85b)), closes [#4803](https://github.com/angular/angular/issues/4803)
-* **dart/transform:** Fix issue with deferred in .ng_deps ([6be95ae](https://github.com/angular/angular/commit/6be95ae))
-* **debug_element:** don’t descend into merged embedded views on `componentChildren`. ([60bedb4](https://github.com/angular/angular/commit/60bedb4)), closes [#4920](https://github.com/angular/angular/issues/4920)
-* **default_value_accessor:** support custom input elements that fire custom change events. ([56a9b02](https://github.com/angular/angular/commit/56a9b02)), closes [#4878](https://github.com/angular/angular/issues/4878)
-* **di:** allow dependencies as flat array ([6514b8c](https://github.com/angular/angular/commit/6514b8c))
-* **facades:** reduce node count by 1 in assertionsEnabled ([edfa35b](https://github.com/angular/angular/commit/edfa35b))
-* **forms:** handle control change in NgFormControl ([d29a9a9](https://github.com/angular/angular/commit/d29a9a9))
-* **lang:** avoid infinite loop when calling assert() ([5c48236](https://github.com/angular/angular/commit/5c48236)), closes [#4981](https://github.com/angular/angular/issues/4981) [#4983](https://github.com/angular/angular/issues/4983)
-* **lint:** enforce that module-private members have @internal. ([098201d](https://github.com/angular/angular/commit/098201d)), closes [#4645](https://github.com/angular/angular/issues/4645) [#4989](https://github.com/angular/angular/issues/4989)
-* **ng_class:** support sets correctly ([2957b0b](https://github.com/angular/angular/commit/2957b0b)), closes [#4910](https://github.com/angular/angular/issues/4910)
-* **render:** create svg elements with the right namespace ([ac52bfd](https://github.com/angular/angular/commit/ac52bfd)), closes [#4506](https://github.com/angular/angular/issues/4506) [#4949](https://github.com/angular/angular/issues/4949)
-* **renderer:** support `xlink:href` attribute in svg ([540b8c2](https://github.com/angular/angular/commit/540b8c2)), closes [#4956](https://github.com/angular/angular/issues/4956)
-* **router:** fix error message text ([280cd33](https://github.com/angular/angular/commit/280cd33))
-* **router:** respect LocationStrategy when constructing hrefs in links ([2a3e11d](https://github.com/angular/angular/commit/2a3e11d)), closes [#4333](https://github.com/angular/angular/issues/4333)
-* **style_url_resolver:** include `asset:` urls into precompiled stylesheets. ([d8b3601](https://github.com/angular/angular/commit/d8b3601)), closes [#4926](https://github.com/angular/angular/issues/4926)
-* **typings:** don't expose RootTestComponent_ ([05d29a9](https://github.com/angular/angular/commit/05d29a9)), closes [#4776](https://github.com/angular/angular/issues/4776) [#4777](https://github.com/angular/angular/issues/4777)
-* **url_resolver:** always replace `package:` in Dart, even if it came from `baseUrl`. ([fd9b675](https://github.com/angular/angular/commit/fd9b675)), closes [#4775](https://github.com/angular/angular/issues/4775)
-* **WebWorker:** Serialize scroll events ([84d1f93](https://github.com/angular/angular/commit/84d1f93)), closes [#4836](https://github.com/angular/angular/issues/4836) [#4840](https://github.com/angular/angular/issues/4840)
-
-### Features
-
-* **change detection:** remove support for "if" ([0a94021](https://github.com/angular/angular/commit/0a94021)), closes [#4616](https://github.com/angular/angular/issues/4616)
-* **core:** PlatformRef and ApplicationRef support registration of disposal functions. ([8dd3082](https://github.com/angular/angular/commit/8dd3082))
-* **dart/transform:** Add getters, setters, methods to NgDepsModel ([d68955a](https://github.com/angular/angular/commit/d68955a))
-* **dart/transform:** Avoid overwriting assets ([ca5e31b](https://github.com/angular/angular/commit/ca5e31b))
-* **dart/transform:** Do not declare outputs ([27ead8c](https://github.com/angular/angular/commit/27ead8c))
-* **dart/transform:** Match runtime semantics for template values ([bdd031a](https://github.com/angular/angular/commit/bdd031a))
-* **dart/transform:** Parse `directives` dependencies from the Dart ast ([2604402](https://github.com/angular/angular/commit/2604402))
-* **forms:** add support for Validator ([547e011](https://github.com/angular/angular/commit/547e011))
-* **forms:** Export NumberValueAccessor ([25ddd87](https://github.com/angular/angular/commit/25ddd87))
-* **forms:** Implement a way to manually set errors on a control ([ed4826b](https://github.com/angular/angular/commit/ed4826b)), closes [#4917](https://github.com/angular/angular/issues/4917)
-* **forms:** support adding validators to ControlGroup via template ([7580628](https://github.com/angular/angular/commit/7580628)), closes [#4954](https://github.com/angular/angular/issues/4954)
-* **ngUpgrade:** simple example ([9d0d33f](https://github.com/angular/angular/commit/9d0d33f))
-* move NgZone to Stream/Observable-based callback API ([491e1fd](https://github.com/angular/angular/commit/491e1fd))
-* upgrade clang-format to 1.0.32. ([4a1b873](https://github.com/angular/angular/commit/4a1b873))
-* **Parser:** associate pipes right to left ([4639f44](https://github.com/angular/angular/commit/4639f44)), closes [#4605](https://github.com/angular/angular/issues/4605) [#4716](https://github.com/angular/angular/issues/4716)
-* **router:** add support for route links with no leading slash ([07cdc2f](https://github.com/angular/angular/commit/07cdc2f)), closes [#4623](https://github.com/angular/angular/issues/4623)
-* **router:** Make RootRouter disposable to allow cleanup of Location subscription. ROUTER_PRO ([2e059dc](https://github.com/angular/angular/commit/2e059dc)), closes [#4915](https://github.com/angular/angular/issues/4915)
-* **router:** Support unsubscription from Location by returning the subscription. ([2674eac](https://github.com/angular/angular/commit/2674eac))
-* **validators:** Add a pending state to AbstractControl ([c9fba3f](https://github.com/angular/angular/commit/c9fba3f))
-* **validators:** Allow errors at both the group/array level or their children ([28d88c5](https://github.com/angular/angular/commit/28d88c5))
-
-
-### BREAKING CHANGES
-
-#### ControlGroup.errors and ControlArray.errors have changed
-
-* Before: ControlGroup.errors and ControlArray.errors returned a reduced value of their children controls' errors.
-* After: ControlGroup.errors and ControlArray.errors return the errors of the group and array, and ControlGroup.controlsErrors and ControlArray.controlsErrors return the reduce value of their children controls' errors.
-
-#### Errors format has changed from validators
-
-Now errors from a control or an array's children are prefixed with 'controls' while errors from the object itself are left at the root level.
-
-**Example:**
-Given a Control group as follows:
-```
-var group = new ControlGroup({
-  login: new Control("", required),
-  password: new Control("", required),
-  passwordConfirm: new Control("", required)
-});
-```
-
-*Before:*
-```
-group.errors
-{
-  login: {required: true},
-  password: {required: true},
-  passwordConfirm: {required: true},
-}
-```
-
-*After:*
-```
-group.errors
-{
-  controls: {
-    login: {required: true},
-    password: {required: true},
-    passwordConfirm: {required: true},
-  }
-}
-```
-
-#### Pipes are now associated right to left
-
-* Before: `1 + 1 | pipe:a | pipe:b` was parsed as `(1 + 1) | pipe:(a | pipe:b)`
-* After: `1 + 1 | pipe:a | pipe:b` is parsed as `((1 + 1) | pipe:a) | pipe:b`
-
-#### NgZone Moved to Stream/Observable-based callback API
-
-* deprecates these methods in NgZone: overrideOnTurnStart, overrideOnTurnDone, overrideOnEventDone, overrideOnErrorHandler
-* introduces new API in NgZone that may shadow other API used by existing applications.
-
-#### Directives no longer match to variable names
-
-You can no longer use a #foo or a var-foo to apply directive [foo], although it didn't work properly anyway.
-This commit is fixing breakage caused by the switch to pre-compiler (exact SHA unknown).
-
-#### Actions no longer support if statements
-
-<a name="2.0.0-alpha.44"></a>
-# 2.0.0-alpha.44 (2015-10-15)
-
-
-### Bug Fixes
-
-* **compiler:** attribute case in IE9 ([b89c5bc](https://github.com/angular/angular/commit/b89c5bc)), closes [#4743](https://github.com/angular/angular/issues/4743)
-* **compiler:** explicitly support event bindings also on `<template>` elements ([cec8b58](https://github.com/angular/angular/commit/cec8b58)), closes [#4712](https://github.com/angular/angular/issues/4712)
-* **dart/transform:** Handle empty .ng_deps.dart files ([5a50597](https://github.com/angular/angular/commit/5a50597))
-* **dart/transform:** Parse directives agnostic of annotation order ([efddc90](https://github.com/angular/angular/commit/efddc90))
-* **forms:** emit value changes after errors and status are set ([b716d23](https://github.com/angular/angular/commit/b716d23)), closes [#4714](https://github.com/angular/angular/issues/4714)
-* **style_compiler:** don’t resolve absolute urls that start with a `/` during compilation ([a941fb0](https://github.com/angular/angular/commit/a941fb0)), closes [#4763](https://github.com/angular/angular/issues/4763)
-* **style_compiler:** don’t touch urls in stylesheets and keep stylesheets with absolute urls in templ ([7dde18b](https://github.com/angular/angular/commit/7dde18b)), closes [#4740](https://github.com/angular/angular/issues/4740)
-* **testing:** let DOM adapter dictate XHR implementation for tests ([d7ab5d4](https://github.com/angular/angular/commit/d7ab5d4))
-* **transformers:** show nice error message when an invalid uri is found ([6436f96](https://github.com/angular/angular/commit/6436f96)), closes [#4731](https://github.com/angular/angular/issues/4731)
-
-### Features
-
-* **forms:** add input[type=number] value accessor ([65c737f](https://github.com/angular/angular/commit/65c737f)), closes [#4014](https://github.com/angular/angular/issues/4014) [#4761](https://github.com/angular/angular/issues/4761)
-* **ngUpgrade:** add support for upgrade/downgrade of injectables ([d896e43](https://github.com/angular/angular/commit/d896e43)), closes [#4766](https://github.com/angular/angular/issues/4766)
-* **ngUpgrade:** faster ng2->ng1 adapter by only compiling ng1 once ([053b7a5](https://github.com/angular/angular/commit/053b7a5))
-* **query:** add filter and reduce to QueryList ([bfbf18d](https://github.com/angular/angular/commit/bfbf18d)), closes [#4710](https://github.com/angular/angular/issues/4710)
-
-<a name="2.0.0-alpha.42"></a>
-# 2.0.0-alpha.42 (2015-10-13)
-
-This is a quick follow-up release to 41 to fix the d.ts distribution with our
-npm package. See [#4706](https://github.com/angular/angular/issues/4706) for more info.
-
-### Bug Fixes
-
-* **build:** Fix serve.js.dev to build bundles ([3b03660](https://github.com/angular/angular/commit/3b03660)), closes [#4700](https://github.com/angular/angular/issues/4700)
-* **docs:** minor @link fixes. ([3a801c1](https://github.com/angular/angular/commit/3a801c1)), closes [#4696](https://github.com/angular/angular/issues/4696)
-* **publish:** emit type declarations with CJS build ([57649d1](https://github.com/angular/angular/commit/57649d1)), closes [#4706](https://github.com/angular/angular/issues/4706) [#4708](https://github.com/angular/angular/issues/4708)
-* **test:** command compiler attr merge test in IE ([e15e242](https://github.com/angular/angular/commit/e15e242))
-
-### Features
-
-* **build:** add tasks to watch and recompile js and dart ([50e922f](https://github.com/angular/angular/commit/50e922f))
-* **forms:** add minlength and maxlength validators ([e82a35d](https://github.com/angular/angular/commit/e82a35d)), closes [#4705](https://github.com/angular/angular/issues/4705)
-
-### BREAKING CHANGES
-
-- TypeScript typings are now included in the distribution. If you have installed external typings
-  (eg. using tsd to fetch files from DefinitelyTyped), you need to remove them. TypeScript will give
-  a `Duplicate identifier` error if the same type definition appears twice.
-
-<a name="2.0.0-alpha.41"></a>
-# 2.0.0-alpha.41 (2015-10-13)
-
-
-### Bug Fixes
-
-* **compiler:** merge `class` and `style` attributes from the element with the host attributes ([eacc8e3](https://github.com/angular/angular/commit/eacc8e3)), closes [#4583](https://github.com/angular/angular/issues/4583) [#4680](https://github.com/angular/angular/issues/4680)
-* **compiler:** shadow CSS @import test in some browsers ([0def28e](https://github.com/angular/angular/commit/0def28e)), closes [#4629](https://github.com/angular/angular/issues/4629)
-* **docs:** Updated docs for default router location strategy ([075011f](https://github.com/angular/angular/commit/075011f)), closes [#4517](https://github.com/angular/angular/issues/4517)
-* **router:** properly read and serialize query params ([8bc40d3](https://github.com/angular/angular/commit/8bc40d3)), closes [#3957](https://github.com/angular/angular/issues/3957) [#4225](https://github.com/angular/angular/issues/4225) [#3784](https://github.com/angular/angular/issues/3784)
-* **test_lib:** don't mock out XHR via MockXHR by default in tests ([6abed8d](https://github.com/angular/angular/commit/6abed8d)), closes [#4539](https://github.com/angular/angular/issues/4539) [#4682](https://github.com/angular/angular/issues/4682)
-* **typings:** add more missing typings. ([aab0c57](https://github.com/angular/angular/commit/aab0c57)), closes [#4636](https://github.com/angular/angular/issues/4636)
-* **typings:** fix typings which were previously unchecked ([c178ad4](https://github.com/angular/angular/commit/c178ad4)), closes [#4625](https://github.com/angular/angular/issues/4625)
-* **typings:** missing types in ListWrapper typings ([597f79e](https://github.com/angular/angular/commit/597f79e))
-
-### Features
-
-* **typings**: `*.d.ts` files are now bundled with npm package, `tsd link` or `tsd install` no longer needed ([95f9846](https://github.com/angular/angular/commit/95f9846))
-* **core:** desugar [()] to [prop] and (prop-change) ([7c6130c](https://github.com/angular/angular/commit/7c6130c)), closes [#4658](https://github.com/angular/angular/issues/4658)
-* **di:** change the params of Provider and provide to start with "use" ([1aeafd3](https://github.com/angular/angular/commit/1aeafd3)), closes [#4684](https://github.com/angular/angular/issues/4684)
-* **di:** rename Binding into Provider ([1eb0162](https://github.com/angular/angular/commit/1eb0162)), closes [#4416](https://github.com/angular/angular/issues/4416) [#4654](https://github.com/angular/angular/issues/4654)
-* **ngFor:** support a custom template ([6207b1a](https://github.com/angular/angular/commit/6207b1a)), closes [#4637](https://github.com/angular/angular/issues/4637)
-* **ngUpgrade:** support for content project from ng1->ng2 ([cd90e6e](https://github.com/angular/angular/commit/cd90e6e))
-* **ngUpgrade:** transclude content from ng2->ng1 ([19c1bd7](https://github.com/angular/angular/commit/19c1bd7)), closes [#4640](https://github.com/angular/angular/issues/4640)
-
-
-### BREAKING CHANGES
-
-- `angular2/test_lib` is now called `angular2/testing`
-  - `test_lib.js` -> `testing.js`
-  - `import {...} from 'angular2/test_lib'` -> `import {...} from 'angular2/testing'`
-- [()] desugaring changed:
-
-  Before:
-  ```
-  <cmp [(prop)]="field"> was desugared to <cmp [prop]="field" (prop)="field=$event">
-  ```
-  After:
-  ```
-  <cmp [(prop)]="field"> is desugared to <cmp [prop]="field" (prop-change)="field=$event">
-  ```
-
-### API DEPRECATION
-
-- "DI Binding" terminology has changed to "DI Providers" to avoid conflicts/confusion with data-binding. All commonly used apis that use "bind" or "binding" in the name still work but are deprecated and will be removed in future alpha releases. Please update your code:
-  - `bind` -> `provide`
-  - `@Component(bindings: ...)` -> `@Component(providers: ...)`
-  - `@Component(viewBindings: ...)` -> `@Component(viewProviders: ...)`
-  - `HTTP_BINDINGS` -> `HTTP_PROVIDERS`
-  - `JSONP_BINDINGS` -> `JSONP_PROVIDERS`
-  - `ROUTER_BINDINGS` -> `ROUTER_PROVIDERS`
-  - `FORM_BINDINGS` -> `FORM_PROVIDERS`
-  - `ELEMENT_PROBE_BINDINGS` -> `ELEMENT_PROBE_PROVIDERS`
-  - `NoBindingError` -> `NoProviderError`
-  - `AbstractBindingError` -> `AbstractProviderError`
-  - `InvalidBindingError` -> `InvalidProviderError`
-  - `beforeEachBindings` -> `beforeEachProviders`
-  - `Binding` -> `Provider`
-
-
-
-<a name="2.0.0-alpha.40"></a>
-# 2.0.0-alpha.40 (2015-10-09)
-
-
-### Bug Fixes
-
-* **analyzer:** fix dart analyzer errors ([14fa007](https://github.com/angular/angular/commit/14fa007))
-* **core:** make .toRx() return Subject ([4a36fd8](https://github.com/angular/angular/commit/4a36fd8)), closes [#4521](https://github.com/angular/angular/issues/4521) [#4540](https://github.com/angular/angular/issues/4540)
-* **core:** remove NgZone_ and use NgZone instead ([bba0248](https://github.com/angular/angular/commit/bba0248))
-* **css:** when compiling CSS, leave absolute imports alone ([04b3dee](https://github.com/angular/angular/commit/04b3dee)), closes [#4592](https://github.com/angular/angular/issues/4592)
-* **dart/transform:** Run DeferredRewriter in the correct phase ([811d4c0](https://github.com/angular/angular/commit/811d4c0))
-* **dart/transform:** Sanitize generated library names ([ba6e0e1](https://github.com/angular/angular/commit/ba6e0e1))
-* **dart/transform:** Write correct ng_deps without deferred imports ([c94f239](https://github.com/angular/angular/commit/c94f239)), closes [#4587](https://github.com/angular/angular/issues/4587)
-* **location:** improve the 'No base href set' error message ([15ab6f6](https://github.com/angular/angular/commit/15ab6f6))
-* **render:** recurse into components/embedded templates not until all elements in a view have ([6d4bd5d](https://github.com/angular/angular/commit/6d4bd5d)), closes [#4551](https://github.com/angular/angular/issues/4551) [#4601](https://github.com/angular/angular/issues/4601)
-* **tests:** fix tests ([8b725c7](https://github.com/angular/angular/commit/8b725c7))
-* **tests:** fixes public api spec ([d60c7a9](https://github.com/angular/angular/commit/d60c7a9))
-* **typings:** update test.typings for abstract superclasses ([5458036](https://github.com/angular/angular/commit/5458036))
-* **web-workers:** fix bindings ([1100c9b](https://github.com/angular/angular/commit/1100c9b))
-* **XhrBackend:** setRequestHeader takes a string arg ([6b00b60](https://github.com/angular/angular/commit/6b00b60)), closes [#4597](https://github.com/angular/angular/issues/4597)
-
-### Features
-
-* **core:** add syntax sugar to make @View optional ([bd31b01](https://github.com/angular/angular/commit/bd31b01))
-* **dart/transform:** Track timing of transform tasks ([0757265](https://github.com/angular/angular/commit/0757265))
-* **router:** allow async routes to be defined with "loader" ([ee32b1b](https://github.com/angular/angular/commit/ee32b1b))
-* **transformers:** update transformers to handle components without @View ([a2e7ae5](https://github.com/angular/angular/commit/a2e7ae5))
-* **upgrade:** support binding of Ng1 form Ng2 ([8e1d2fb](https://github.com/angular/angular/commit/8e1d2fb)), closes [#4542](https://github.com/angular/angular/issues/4542)
-
-<a name="2.0.0-alpha.39"></a>
-# 2.0.0-alpha.39 (2015-10-06)
-
-
-### Bug Fixes
-
-* **core:** keep styles for `ViewEncapsulation.Native` isolated per component ([0299d4a](https://github.com/angular/angular/commit/0299d4a)), closes [#4513](https://github.com/angular/angular/issues/4513) [#4524](https://github.com/angular/angular/issues/4524)
-* **core:** set `ViewEncapsulation.Emulated` as the default again ([a9aef8e](https://github.com/angular/angular/commit/a9aef8e)), closes [#4494](https://github.com/angular/angular/issues/4494)
-* **dart/transformer:** Correctly handle const object annotations ([decdbea](https://github.com/angular/angular/commit/decdbea)), closes [#4481](https://github.com/angular/angular/issues/4481)
-* **gulp:** use the new karma.Server api ([758efba](https://github.com/angular/angular/commit/758efba)), closes [#4375](https://github.com/angular/angular/issues/4375)
-* **http:** add missing semicolon ([150cc22](https://github.com/angular/angular/commit/150cc22))
-* **karma:** socket.io 1.x transport is now called 'polling' instead of 'xhr-polling' ([39e9bb6](https://github.com/angular/angular/commit/39e9bb6))
-* add test_lib.d.ts to type definitions in generated package.json ([4ebb1a9](https://github.com/angular/angular/commit/4ebb1a9))
-* **karma-dart-evalcache:** make the code compatible with karma 0.13.x ([a649992](https://github.com/angular/angular/commit/a649992))
-* **npm_publish:** update transitive typings provided in npm distribution ([2ebc74d](https://github.com/angular/angular/commit/2ebc74d))
-* **render:** keep bindings of components in content and view in the right order ([6fe8b85](https://github.com/angular/angular/commit/6fe8b85)), closes [#4522](https://github.com/angular/angular/issues/4522) [#4523](https://github.com/angular/angular/issues/4523)
-* **shims:** Don't rely on prefixed requestAnimationFrame ([9679fc9](https://github.com/angular/angular/commit/9679fc9)), closes [#4394](https://github.com/angular/angular/issues/4394)
-* **tslint:** fix d.ts file paths for node_modules dependencies ([2628631](https://github.com/angular/angular/commit/2628631))
-* **typings:** repair broken type-checking for StringMap ([208f3d4](https://github.com/angular/angular/commit/208f3d4)), closes [#4487](https://github.com/angular/angular/issues/4487)
-* **typings:** repair broken typechecks ([6093e28](https://github.com/angular/angular/commit/6093e28)), closes [#4507](https://github.com/angular/angular/issues/4507) [#4508](https://github.com/angular/angular/issues/4508)
-
-### Features
-
-* **upgrade:** support binding of Ng2 form Ng1 ([09371a3](https://github.com/angular/angular/commit/09371a3)), closes [#4458](https://github.com/angular/angular/issues/4458)
-
-
-### BREAKING CHANGES
-
-* `Renderer.registerComponent` now takes an additional argument ([0299d4a](https://github.com/angular/angular/commit/0299d4a)).
-
-
-<a name="2.0.0-alpha.38"></a>
-# 2.0.0-alpha.38 (2015-10-03)
-
-
-### Bug Fixes
-
-* **annotation_matcher:** fix typo with Directive matchers ([841aa1a](https://github.com/angular/angular/commit/841aa1a))
-* **api:** align dart/js APIs ([af2cd4d](https://github.com/angular/angular/commit/af2cd4d))
-* **api:** remove animation from public API ([f7d46e7](https://github.com/angular/angular/commit/f7d46e7))
-* **api:** remove DomRenderer from public API ([105db02](https://github.com/angular/angular/commit/105db02)), closes [#4187](https://github.com/angular/angular/issues/4187)
-* **api:** remove RecordViewTuple / cleanup NgFor ([61b6a47](https://github.com/angular/angular/commit/61b6a47))
-* **api:** remove UNDEFINED ([6db9f90](https://github.com/angular/angular/commit/6db9f90))
-* **benchpress:** fix benchpress overreporting in chrome45 ([0653b82](https://github.com/angular/angular/commit/0653b82)), closes [#4011](https://github.com/angular/angular/issues/4011) [#4101](https://github.com/angular/angular/issues/4101)
-* **benchpress:** make benchpress fit for chrome 45 ([67b9414](https://github.com/angular/angular/commit/67b9414)), closes [#3411](https://github.com/angular/angular/issues/3411) [#3982](https://github.com/angular/angular/issues/3982)
-* **benchpress:** update build step, read and config ([6ae9686](https://github.com/angular/angular/commit/6ae9686)), closes [#4419](https://github.com/angular/angular/issues/4419)
-* **browser:** make Firefox to work with es6-shim ([e166f6f](https://github.com/angular/angular/commit/e166f6f))
-* **bug:** reflect Dart interfaces from superclass as well ([577ee37](https://github.com/angular/angular/commit/577ee37)), closes [#4221](https://github.com/angular/angular/issues/4221) [#4222](https://github.com/angular/angular/issues/4222)
-* **build:** add config for outputting the missing test_lib.d.ts file ([f6108c5](https://github.com/angular/angular/commit/f6108c5))
-* **build:** lazy-require es6-shim in the a1 router to prevent npm/gulp issues ([e4f94f0](https://github.com/angular/angular/commit/e4f94f0))
-* **build:** lock dart dev version ([43cca2d](https://github.com/angular/angular/commit/43cca2d))
-* **build:** switch to cjs output for es5. ([e9ad100](https://github.com/angular/angular/commit/e9ad100)), closes [#3974](https://github.com/angular/angular/issues/3974)
-* **build:** temporarily test dart with dart2js instead of pub serve ([eb7839e](https://github.com/angular/angular/commit/eb7839e))
-* **build:** Use Angular's testability API to wait for end of e2e tests ([33593cf](https://github.com/angular/angular/commit/33593cf)), closes [#3911](https://github.com/angular/angular/issues/3911)
-* **bundles:** add explicit format: cjs for empty files. ([ef61b81](https://github.com/angular/angular/commit/ef61b81))
-* **change_detection:** _throwError should not mask the original exception ([cec4b36](https://github.com/angular/angular/commit/cec4b36))
-* **code size:** do not rely on Uri in BrowserDomAdapter ([9dc1d6a](https://github.com/angular/angular/commit/9dc1d6a)), closes [#4182](https://github.com/angular/angular/issues/4182)
-* **compiler:** const is not supported in IE9 and IE10 ([b44c13b](https://github.com/angular/angular/commit/b44c13b)), closes [#4465](https://github.com/angular/angular/issues/4465)
-* **compiler:** Implement Token#toString for Operator ([3b9c086](https://github.com/angular/angular/commit/3b9c086)), closes [#4049](https://github.com/angular/angular/issues/4049)
-* **compiler:** minor cleanups and fixes ([0ed6fc4](https://github.com/angular/angular/commit/0ed6fc4))
-* **compiler:** remove attributes when expression in [attr.foo]='exp' evaluates to null ([045cc82](https://github.com/angular/angular/commit/045cc82)), closes [#4150](https://github.com/angular/angular/issues/4150) [#4163](https://github.com/angular/angular/issues/4163)
-* **core:** Document the new bootstrap APIs. Also rename rootBindings() to platformBindings( ([06f8330](https://github.com/angular/angular/commit/06f8330)), closes [#4218](https://github.com/angular/angular/issues/4218)
-* **core:** export bootstrap from core exports for JS ([4fd9cc2](https://github.com/angular/angular/commit/4fd9cc2)), closes [#4097](https://github.com/angular/angular/issues/4097)
-* **dart/transform:** Fix transformer output declaration ([1f2302e](https://github.com/angular/angular/commit/1f2302e))
-* **dart/transform:** Handle export cycles ([e7d65ad](https://github.com/angular/angular/commit/e7d65ad)), closes [#4370](https://github.com/angular/angular/issues/4370)
-* **debug:** make debug tools take ComponentRef ([70586b6](https://github.com/angular/angular/commit/70586b6)), closes [#4203](https://github.com/angular/angular/issues/4203)
-* **DirectiveResolver:** Synced with latest changes ([86bda28](https://github.com/angular/angular/commit/86bda28)), closes [#3928](https://github.com/angular/angular/issues/3928)
-* **dist:** don't distribute the HTML dart api docs ([be6d92c](https://github.com/angular/angular/commit/be6d92c)), closes [#4115](https://github.com/angular/angular/issues/4115) [#4211](https://github.com/angular/angular/issues/4211)
-* **dts generation:** add support for type aliases ([d782616](https://github.com/angular/angular/commit/d782616)), closes [#3952](https://github.com/angular/angular/issues/3952)
-* **dts generation:** rewrite the d.ts file code generator to fix bugs and apply type remap correctly ([ad3b9cf](https://github.com/angular/angular/commit/ad3b9cf))
-* **exception_handler:** fix error messages of wrapped exceptions ([f6cc573](https://github.com/angular/angular/commit/f6cc573)), closes [#4117](https://github.com/angular/angular/issues/4117)
-* **exceptions:** NoAnnotationError message is not displayed ([eaa20f6](https://github.com/angular/angular/commit/eaa20f6)), closes [#4215](https://github.com/angular/angular/issues/4215) [#4223](https://github.com/angular/angular/issues/4223)
-* **facade:** workaround for lack of Symbol.iterator in es6-shim ([390aacd](https://github.com/angular/angular/commit/390aacd)), closes [#4219](https://github.com/angular/angular/issues/4219) [#4216](https://github.com/angular/angular/issues/4216)
-* **fake_async:** remove unused variable ([ddde711](https://github.com/angular/angular/commit/ddde711))
-* **forms:** Also update viewModel in NgFormControl ([70f6a46](https://github.com/angular/angular/commit/70f6a46))
-* **forms:** avoid issues with nulls checking on validation status and other form states. ([7714d6a](https://github.com/angular/angular/commit/7714d6a)), closes [#4338](https://github.com/angular/angular/issues/4338)
-* **forms:** Update NgModel's viewModel when model changes ([e36966b](https://github.com/angular/angular/commit/e36966b)), closes [#3627](https://github.com/angular/angular/issues/3627)
-* **http:** change http interfaces to types ([3d6e3c2](https://github.com/angular/angular/commit/3d6e3c2)), closes [#4024](https://github.com/angular/angular/issues/4024)
-* **http:** throw if url is not string or Request ([3525d8a](https://github.com/angular/angular/commit/3525d8a)), closes [#4245](https://github.com/angular/angular/issues/4245) [#4257](https://github.com/angular/angular/issues/4257)
-* **ListWrapper:** make list slice in dart return empty list if start and end are inverted like JS ([bced3aa](https://github.com/angular/angular/commit/bced3aa))
-* **NgClass:** ignore empty and blank class names ([73351ac](https://github.com/angular/angular/commit/73351ac)), closes [#4033](https://github.com/angular/angular/issues/4033) [#4173](https://github.com/angular/angular/issues/4173)
-* **pipes:** add triple ticks around async_pipe code sample ([7b3161a](https://github.com/angular/angular/commit/7b3161a)), closes [#4110](https://github.com/angular/angular/issues/4110)
-* **query:** clean-up queryref during dehydration ([01cdd31](https://github.com/angular/angular/commit/01cdd31)), closes [#3944](https://github.com/angular/angular/issues/3944) [#3948](https://github.com/angular/angular/issues/3948)
-* **reflector:** merge prop metadata from getters and setters ([15164a8](https://github.com/angular/angular/commit/15164a8)), closes [#4006](https://github.com/angular/angular/issues/4006)
-* **router:** do not reuse common children with different parents ([77e8304](https://github.com/angular/angular/commit/77e8304))
-* **router:** load route config from async instructions ([5e49d7e](https://github.com/angular/angular/commit/5e49d7e)), closes [#4146](https://github.com/angular/angular/issues/4146)
-* **router:** recognize child components with empty segments ([3099449](https://github.com/angular/angular/commit/3099449)), closes [#4178](https://github.com/angular/angular/issues/4178)
-* **router:** throw when generating non-terminal link ([8aec215](https://github.com/angular/angular/commit/8aec215)), closes [#3979](https://github.com/angular/angular/issues/3979) [#4092](https://github.com/angular/angular/issues/4092)
-* **router:** use StringWrapper.startsWith ([6e0ca7f](https://github.com/angular/angular/commit/6e0ca7f))
-* **services:** export title service ([e2f5d87](https://github.com/angular/angular/commit/e2f5d87)), closes [#4271](https://github.com/angular/angular/issues/4271)
-* **sfx:** Include ngHttp in SFX bundle ([283415b](https://github.com/angular/angular/commit/283415b)), closes [#3933](https://github.com/angular/angular/issues/3933)
-* **shims:** add requestAnimationFrame shim for IE9 and Android ([4f56a01](https://github.com/angular/angular/commit/4f56a01)), closes [#4209](https://github.com/angular/angular/issues/4209)
-* **shims:** function.name to return empty string when no name ([3a7b50f](https://github.com/angular/angular/commit/3a7b50f))
-* **test:** Android browser does not support element.click() ([c83207f](https://github.com/angular/angular/commit/c83207f))
-* **test:** AngularProfiler should check before using modern APIs ([abc4ef3](https://github.com/angular/angular/commit/abc4ef3))
-* **test:** do not set ng.probe when ng is null or undefined ([df7f59b](https://github.com/angular/angular/commit/df7f59b))
-* **test:** make `evalModule` faster by caching spawned modules in the browser ([67c79ba](https://github.com/angular/angular/commit/67c79ba))
-* **test:** PostMessageBusSink tests failing in slow browsers ([55290b9](https://github.com/angular/angular/commit/55290b9))
-* **test:** StyleCompiler tests failing in Android browsers ([d646463](https://github.com/angular/angular/commit/d646463))
-* **test:** StyleCompiler tests failing in Android browsers ([9c97690](https://github.com/angular/angular/commit/9c97690)), closes [#4351](https://github.com/angular/angular/issues/4351)
-* **test_lib:** add missing types ([34deda5](https://github.com/angular/angular/commit/34deda5))
-* **test_lib:** reexport fake_async via angular/test ([687e7b5](https://github.com/angular/angular/commit/687e7b5))
-* **Typings:** Output public constructors in .d.ts files ([1926335](https://github.com/angular/angular/commit/1926335)), closes [#3926](https://github.com/angular/angular/issues/3926) [#3963](https://github.com/angular/angular/issues/3963)
-* **Typings & Test API:**
-  - Remove public exports added in 1926335b85af6c1fe56f4e36d0b95dcc92bb5c42 ([787d1f9](https://github.com/angular/angular/commit/787d1f9))
-  - closes [#4147](https://github.com/angular/angular/issues/4147)
-  - BREAKING CHANGE: `RootTestComponent` is no longer `DebugElement`; to get to component instance use `testComp.debugElement.componentInstance`
-* **upgrade:** assert correct interleaving of evaluation. ([a562230](https://github.com/angular/angular/commit/a562230)), closes [#4436](https://github.com/angular/angular/issues/4436)
-* **WebWorker:** Add zone support to MessageBus ([f3da37c](https://github.com/angular/angular/commit/f3da37c)), closes [#4053](https://github.com/angular/angular/issues/4053)
-* **WebWorker:** Fix Todo Server demo and add test to ensure the demo can bootstrap. ([696edde](https://github.com/angular/angular/commit/696edde)), closes [#3970](https://github.com/angular/angular/issues/3970)
-
-### Features
-
-* **angular_1_router:** add ngRouteShim module ([aed34e1](https://github.com/angular/angular/commit/aed34e1)), closes [#4266](https://github.com/angular/angular/issues/4266)
-* **animate:** adds basic support for CSS animations on enter and leave ([39ce9d3](https://github.com/angular/angular/commit/39ce9d3)), closes [#3876](https://github.com/angular/angular/issues/3876)
-* **animate:** cross-browser compatibility ([bffa2cb](https://github.com/angular/angular/commit/bffa2cb)), closes [#4243](https://github.com/angular/angular/issues/4243)
-* **Binding:** improve errors ([0319417](https://github.com/angular/angular/commit/0319417)), closes [#4358](https://github.com/angular/angular/issues/4358) [#4360](https://github.com/angular/angular/issues/4360)
-* **change detection:** export SimpleChange ([0a88e7b](https://github.com/angular/angular/commit/0a88e7b)), closes [#4337](https://github.com/angular/angular/issues/4337)
-* **change_detection:** allow triggering CD form ChangeDetectorRef ([63e7859](https://github.com/angular/angular/commit/63e7859)), closes [#4144](https://github.com/angular/angular/issues/4144)
-* **code size:** make assertionsEnabled() statically computable by dart2js ([241632a](https://github.com/angular/angular/commit/241632a)), closes [#4198](https://github.com/angular/angular/issues/4198)
-* **compiler:** add change detector generation ([12dd44f](https://github.com/angular/angular/commit/12dd44f)), closes [#4057](https://github.com/angular/angular/issues/4057)
-* **compiler:** add stylesheet compiler ([2384082](https://github.com/angular/angular/commit/2384082)), closes [#3891](https://github.com/angular/angular/issues/3891)
-* **compiler:** add TemplateCompiler ([457b689](https://github.com/angular/angular/commit/457b689)), closes [#4220](https://github.com/angular/angular/issues/4220)
-* **compiler:** allow to create ChangeDetectors from parsed templates ([2fea0c2](https://github.com/angular/angular/commit/2fea0c2)), closes [#3950](https://github.com/angular/angular/issues/3950)
-* **compiler:** support creating template commands ([0246b2a](https://github.com/angular/angular/commit/0246b2a)), closes [#4142](https://github.com/angular/angular/issues/4142)
-* **core:** Add a long-form syntax for Angular bootstrapping. ([97d1844](https://github.com/angular/angular/commit/97d1844)), closes [#3852](https://github.com/angular/angular/issues/3852)
-* **core:** add sugar to use ContentChildren and ViewChildren as prop decorators ([2e9de0b](https://github.com/angular/angular/commit/2e9de0b)), closes [#4237](https://github.com/angular/angular/issues/4237)
-* **core:** add support for @ContentChild and @ViewChild ([c2a60f1](https://github.com/angular/angular/commit/c2a60f1)), closes [#4251](https://github.com/angular/angular/issues/4251)
-* **core:** add support for @HostBinding and @HostListener ([df8e15c](https://github.com/angular/angular/commit/df8e15c)), closes [#3996](https://github.com/angular/angular/issues/3996)
-* **core:** add support for @Property and @Event decorators ([896add7](https://github.com/angular/angular/commit/896add7)), closes [#3992](https://github.com/angular/angular/issues/3992)
-* **core:** add support for ContentChildren and ViewChildren ([5dbe292](https://github.com/angular/angular/commit/5dbe292))
-* **core:** renames Property into Input and Event into Output ([adbfd29](https://github.com/angular/angular/commit/adbfd29))
-* **core:** Support multiple ChangeDetectors in a single LifeCycle. ([4f57990](https://github.com/angular/angular/commit/4f57990))
-* **core:** support properties and events in addition to inputs and outputs to make transiti ([c9901c5](https://github.com/angular/angular/commit/c9901c5)), closes [#4482](https://github.com/angular/angular/issues/4482)
-* **CORE_DIRECTIVES:** add NgStyle to CORE_DIRECTIVES ([5f15363](https://github.com/angular/angular/commit/5f15363)), closes [#4096](https://github.com/angular/angular/issues/4096) [#4161](https://github.com/angular/angular/issues/4161)
-* **dart/transform:** Declare transformer outputs ([2acc1ad](https://github.com/angular/angular/commit/2acc1ad))
-* **dart/transform:** Record property metadata ([64e8f93](https://github.com/angular/angular/commit/64e8f93)), closes [#1800](https://github.com/angular/angular/issues/1800) [#3267](https://github.com/angular/angular/issues/3267) [#4003](https://github.com/angular/angular/issues/4003)
-* **di:** add support for multi bindings ([7736964](https://github.com/angular/angular/commit/7736964))
-* **docs:** document change detection profiler ([4ec4dca](https://github.com/angular/angular/commit/4ec4dca))
-* **forms:** make NgControl -> NgValueAccessor dependency unidirectional ([00a4b2e](https://github.com/angular/angular/commit/00a4b2e)), closes [#4421](https://github.com/angular/angular/issues/4421)
-* **http:** Add support for strings as http method names ([34518f0](https://github.com/angular/angular/commit/34518f0)), closes [#4331](https://github.com/angular/angular/issues/4331)
-* **ng_for:** Add Even and Odd variables to ng_for ([a15b679](https://github.com/angular/angular/commit/a15b679)), closes [#4181](https://github.com/angular/angular/issues/4181)
-* **NgFor:** $last property support ([be95411](https://github.com/angular/angular/commit/be95411)), closes [#3991](https://github.com/angular/angular/issues/3991)
-* **perf:** change detection profiler ([8dd6c46](https://github.com/angular/angular/commit/8dd6c46)), closes [#4000](https://github.com/angular/angular/issues/4000)
-* **pipes:** add slice pipe that supports start and end indexes ([c2043ec](https://github.com/angular/angular/commit/c2043ec))
-* **pipes:** add support for pure pipes ([a8bdb69](https://github.com/angular/angular/commit/a8bdb69)), closes [#3966](https://github.com/angular/angular/issues/3966)
-* **query:** implement query update mechanism based on views. ([5ebeaf7](https://github.com/angular/angular/commit/5ebeaf7)), closes [#3973](https://github.com/angular/angular/issues/3973)
-* **query:** make QueryList notify on changes via an observable ([3aa2047](https://github.com/angular/angular/commit/3aa2047)), closes [#4395](https://github.com/angular/angular/issues/4395)
-* **query:** remove the 3-query-per-element limit ([4efc4a5](https://github.com/angular/angular/commit/4efc4a5)), closes [#4336](https://github.com/angular/angular/issues/4336)
-* **render:** add generic view factory based on the template commands ([1cf4575](https://github.com/angular/angular/commit/1cf4575)), closes [#4367](https://github.com/angular/angular/issues/4367)
-* **router:** enforce convention of CamelCase names in route aliases ([5298eb0](https://github.com/angular/angular/commit/5298eb0)), closes [#4083](https://github.com/angular/angular/issues/4083)
-* **router:** introduce new navigate method ([d9036c6](https://github.com/angular/angular/commit/d9036c6)), closes [#4040](https://github.com/angular/angular/issues/4040) [#4074](https://github.com/angular/angular/issues/4074)
-* **StringWrapper:** add support for JS slice method to string ([0808eea](https://github.com/angular/angular/commit/0808eea))
-* **TestComponentBuilder:** add #overrideBindings and #overrideViewBindings ([f91c087](https://github.com/angular/angular/commit/f91c087)), closes [#4052](https://github.com/angular/angular/issues/4052)
-* **tests:** add helper to eval a module ([2a126f7](https://github.com/angular/angular/commit/2a126f7))
-* **transformers:** record setters for query fields ([589ce31](https://github.com/angular/angular/commit/589ce31)), closes [#4344](https://github.com/angular/angular/issues/4344)
-* **upgrade:** Allow including ng2/1 components in ng1/2 ([8427863](https://github.com/angular/angular/commit/8427863)), closes [#3539](https://github.com/angular/angular/issues/3539)
-
-
-### BREAKING CHANGES
-
-#### Query
-
-[make QueryList notify on changes via an observable](https://github.com/angular/angular/commit/3aa2047)
-
-* Before: query.onChange(() => ...);
-* After: query.changes.subscribe((iterable) => {});
-
-#### Router
-
-[introduce new navigate method](https://github.com/angular/angular/commit/d9036c6)
-
-Previously, `router.navigate` took a string representing the URL.
-Now, it accepts an array that mirrors the link DSL.
-The old `navigate` method has been renamed to `router.navigateByUrl`.
-Either change your navigation calls to use the DSL (preferred) or
-call `router.navigateByUrl` instead.
-
-* Before:
-router.navigate
-
-* After:
-router.navigateUrl
-
-
-#### Pipes
-
-[add support for pure pipes](https://github.com/angular/angular/commit/a8bdb69)
-By default, pipes are pure. This means that an instance of a pipe will be reused and the pipe will be called only when its arguments change.
-
-Before:
-
-@Pipe({name: 'date'}) class DatePipe {} defines an impure pipe.
-
-After:
-
-@Pipe({name: 'date'}) class DatePipe {} defines a pure pipe.
-@Pipe({name: 'date', pure: false}) class DatePipe {} defines an impure pipe.
-
-* Before:
-@Pipe({name: 'date'}) class DatePipe {} defines an impure pipe.
-* After:
-@Pipe({name: 'date'}) class DatePipe {} defines a pure pipe.
-@Pipe({name: 'date', pure: false}) class DatePipe {} defines an impure pipe.
-
-#### ViewQuery
-
-[Implement query update mechanism based on views.](https://github.com/angular/angular/commit/5ebeaf7c9bdab8de6d11c7b4c4d0954553196903)
-
-* ViewQuery no longer supports the descendants flag. It queries the whole
-component view by default.
-
-Instead of working with finer grained element injectors, queries now
-iterate through the views as static units of modification of the
-application structure. Views already contain element injectors in the
-correct depth-first preorder.
-
-This allows us to remove children linked lists on element injectors and a
-lot of book keeping that is already present at the view level.
-
-Queries are recalculated using the afterContentChecked and
-afterViewChecked hooks, only during init and after a view container has
-changed.
-
-* Before:
-@ViewQuery(SomeDirective, {descendants: true})) someDirective
-* After:
-@ViewQuery(SomeDirective) someDirective
-
-#### DI
-
-[add support for multi bindings](https://github.com/angular/angular/commit/7736964a37d17cf0f1e5381c9a95a33ee863f02f)
-Previously a content binding of a component was visible to the directives in its view with the host constraint.
-This is not the case any more. To access that binding, remove the constraint.
-
-#### Core
-[remove the (^ syntax and make all DOM events bubbling)](https://github.com/angular/angular/commit/60ce8846710338228bc7db3d3c808c166e15e931)
-
-* Before
-```html
-<div (^click)="onEventHandler()">
-  <button></button>
-</div>
-```
-* After
-```html
-<div (click)="onEventHandler()">
-  <button></button>
-</div>
-```
-
-#### Properties/Events (Inputs/Outputs)
-
-[Rename Property into Input and Event into Output](https://github.com/angular/angular/commit/adbfd29fd761135d51985564edcb4db7f8b6a26a)
-
-* Before:
-@Directive({properties: ['one'], events: ['two']})
-* After:
-@Directive({inputs: ['one'], outputs: ['two']})
-
-* Before:
-@Component({properties: ['one'], events: ['two']})
-* After:
-@Componet({inputs: ['one'], outputs: ['two']})
-
-* Before:
-class A {@Property() one; @Event() two;}
-* After:
-class A {@Input() one; @Output() two;}
-
-#### Compiler
-
-With a [new compiler](https://github.com/angular/angular/commit/76247b70973e3266e504e05381fbd7d85d4de5c6) `NgNonBindable`
- is not a directive but rather a special attribute (`ng-non-bindable`) recognized by the compiler. This means that you
-can't import / use the `NgNonBindable` as a directive. You should remove all the imports for the the `NgNonBindable`
-directive and all the references to it in the `directives` section of the `@View` decorator.
-
-
-
-<a name="2.0.0-alpha.37"></a>
-# 2.0.0-alpha.37 (2015-09-09)
-
-
-### Bug Fixes
-
-* **build:** delete unreferenced typings on npm install ([42e1b07](https://github.com/angular/angular/commit/42e1b07)), closes [#1636](https://github.com/angular/angular/issues/1636) [#3940](https://github.com/angular/angular/issues/3940)
-* **bundle:** don't include System.config in dev bundle ([a94f051](https://github.com/angular/angular/commit/a94f051)), closes [#3826](https://github.com/angular/angular/issues/3826) [#3862](https://github.com/angular/angular/issues/3862)
-* **ComponentUrlMapper:** support relative template URLs in Dartium ([7c7888d](https://github.com/angular/angular/commit/7c7888d)), closes [#2771](https://github.com/angular/angular/issues/2771) [#3743](https://github.com/angular/angular/issues/3743)
-* **core:** Fix type error ([6c3c606](https://github.com/angular/angular/commit/6c3c606))
-* **http:** change type declarations to interfaces and export EventEmitter ([10437ab](https://github.com/angular/angular/commit/10437ab))
-* **router:** re-export of Type ([b8be4bf](https://github.com/angular/angular/commit/b8be4bf)), closes [#3632](https://github.com/angular/angular/issues/3632) [#3704](https://github.com/angular/angular/issues/3704)
-* **RouteRegistry:** initialize RouteParams.params ([3791c4a](https://github.com/angular/angular/commit/3791c4a)), closes [#3755](https://github.com/angular/angular/issues/3755)
-* **test:** error in karma when systemjs imports fail ([7820086](https://github.com/angular/angular/commit/7820086)), closes [#3846](https://github.com/angular/angular/issues/3846)
-* **typings:** emit spread parameters ([a34d4c6](https://github.com/angular/angular/commit/a34d4c6)), closes [#3875](https://github.com/angular/angular/issues/3875)
-* **WebWorker:** Return boolean from `dispatchRenderEvent` ([457eb5d](https://github.com/angular/angular/commit/457eb5d))
-* **WebWorker:** WebWorkerRenderer removes views after they're destroyed ([9619636](https://github.com/angular/angular/commit/9619636)), closes [#3240](https://github.com/angular/angular/issues/3240) [#3894](https://github.com/angular/angular/issues/3894)
-
-### Features
-
-* **compile:** add HtmlParser, TemplateParser, ComponentMetadataLoader ([9f576b0](https://github.com/angular/angular/commit/9f576b0)), closes [#3839](https://github.com/angular/angular/issues/3839)
-* **compiler:** add full directive metadata and validation logic ([f93cd9c](https://github.com/angular/angular/commit/f93cd9c)), closes [#3880](https://github.com/angular/angular/issues/3880)
-* **core:** added afterContentInit, afterViewInit, and afterViewChecked hooks ([d49bc43](https://github.com/angular/angular/commit/d49bc43)), closes [#3897](https://github.com/angular/angular/issues/3897)
-* **core:** remove the (^ syntax and make all DOM events bubbling ([60ce884](https://github.com/angular/angular/commit/60ce884)), closes [#3864](https://github.com/angular/angular/issues/3864)
-* **docs:** document code size management tools for Dart ([6532171](https://github.com/angular/angular/commit/6532171))
-* **docs:** document unused reflection info tracking ([46f751b](https://github.com/angular/angular/commit/46f751b))
-* **exception_handler:** changed ExceptionHandler to use console.error instead of console.log ([3bb27de](https://github.com/angular/angular/commit/3bb27de)), closes [#3812](https://github.com/angular/angular/issues/3812)
-* **router:** hash-cons ComponentInstructions ([e1a7e03](https://github.com/angular/angular/commit/e1a7e03))
-* **router:** implement Router.isRouteActive ([de37729](https://github.com/angular/angular/commit/de37729))
-* **router:** router-link-active CSS class support ([36eb9d3](https://github.com/angular/angular/commit/36eb9d3)), closes [#3209](https://github.com/angular/angular/issues/3209)
-* **WebWorker:** Expose MessageBroker API ([358908e](https://github.com/angular/angular/commit/358908e)), closes [#3942](https://github.com/angular/angular/issues/3942)
-* **WebWorkers:** Add WebSocket MessageBuses for debugging apps ([4ba4427](https://github.com/angular/angular/commit/4ba4427)), closes [#3858](https://github.com/angular/angular/issues/3858)
-
-
-### BREAKING CHANGES
-
-#### Events
-
-* Before
-
-```html
-<div (^click)="onEventHandler()">
-  <button></button>
-</div>
-```
-
-* After
-
-```html
-<div (click)="onEventHandler()">
-  <button></button>
-</div>
-```
-
-#### Lifecycle
-
-* Before (ES5)
-
-```js
-var HelloCmp = ng.
-  Component({
-    selector: 'hello-cmp',
-    lifecycle: [LifecycleEvent.onInit]
-  })
-  .View({
-    template: `<h1>hello, there!</h1>`
-  })
-  .Class({
-    onInit: function() {
-      console.log('hello-cmp init');
-    }
-  });
-```
-
-* Before (ES6)
-
-```js
-import {Component, View, LifecycleEvent} from 'angular2/angular2';
-
-@Component({
-  selector: 'hello-cmp',
-  lifecycle: [LifecycleEvent.onInit]
-})
-@View({
-  template: `<h1>hello, there!</h1>`
-})
-class HelloCmp {
-  onInit() {
-    console.log('hello-cmp init');
-  }
-}
-```
-
-* After (ES5)
-
-```js
-var HelloCmp = ng.
-  Component({
-    selector: 'hello-cmp'
-  })
-  .View({
-    template: `<h1>hello, there!</h1>`
-  })
-  .Class({
-    onInit: function() {
-      console.log('hello-cmp init');
-    }
-  });
-```
-
-* After (ES6)
-
-```js
-import {Component, View, OnInit} from 'angular2/angular2';
-
-@Component({
-  selector: 'hello-cmp'
-})
-@View({
-  template: `<h1>hello, there!</h1>`
-})
-class HelloCmp implements OnInit {
-  onInit() {
-    console.log('hello-cmp init');
-  }
-}
-```
-
-
-<a name="2.0.0-alpha.36"></a>
-# 2.0.0-alpha.36 (2015-08-31)
-
-
-### Bug Fixes
-
-* **.d.ts:** show unknown fields as ‘any’ not ‘void’. ([a0b2408](https://github.com/angular/angular/commit/a0b2408)), closes [#3637](https://github.com/angular/angular/issues/3637)
-* **build:** do not run build/pubbuild.dart twice ([e72305e](https://github.com/angular/angular/commit/e72305e)), closes [#3831](https://github.com/angular/angular/issues/3831)
-* **build:** error when running `npm test` locally ([bf4b75e](https://github.com/angular/angular/commit/bf4b75e)), closes [#3806](https://github.com/angular/angular/issues/3806)
-* **build:** make e2e tests faster ([c2279dd](https://github.com/angular/angular/commit/c2279dd)), closes [#3822](https://github.com/angular/angular/issues/3822)
-* **change_detection:** fixed reflect properties as attributes ([a9ce454](https://github.com/angular/angular/commit/a9ce454)), closes [#3761](https://github.com/angular/angular/issues/3761)
-* **change_detection:** update the right change detector when using ON_PUSH mode ([195c5c2](https://github.com/angular/angular/commit/195c5c2))
-* **compiler:** detect and report error for views with empty templateUrl ([215c4aa](https://github.com/angular/angular/commit/215c4aa)), closes [#3762](https://github.com/angular/angular/issues/3762) [#3768](https://github.com/angular/angular/issues/3768)
-* **dart:** bad export in core.dart ([984e7b8](https://github.com/angular/angular/commit/984e7b8))
-* **examples:** Modifies web worker examples to be compatible with systemjs 0.18.10. ([675cb87](https://github.com/angular/angular/commit/675cb87)), closes [#3630](https://github.com/angular/angular/issues/3630)
-* **http:** allow using JSONP_INJECTABLES and HTTP_INJECTABLES in same injector ([5725f71](https://github.com/angular/angular/commit/5725f71)), closes [#3365](https://github.com/angular/angular/issues/3365) [#3390](https://github.com/angular/angular/issues/3390)
-* **http/http:** allow for commonjs as ngHttp ([16eb8ce](https://github.com/angular/angular/commit/16eb8ce)), closes [#3633](https://github.com/angular/angular/issues/3633)
-* **injector:** support getRootInjectors on dehydrated injectors. ([92da543](https://github.com/angular/angular/commit/92da543)), closes [#3760](https://github.com/angular/angular/issues/3760)
-* **injectors:** reset the construction counter in dynamic strategy. ([272ad61](https://github.com/angular/angular/commit/272ad61)), closes [#3635](https://github.com/angular/angular/issues/3635)
-* `<template>` tag for browsers that do not suppor them ([ddcfd46](https://github.com/angular/angular/commit/ddcfd46)), closes [#3636](https://github.com/angular/angular/issues/3636)
-* **karma:** corrected race condition with RX loading ([8dc509f](https://github.com/angular/angular/commit/8dc509f))
-* **parser:** detect and report interpolation in expressions ([b039ec3](https://github.com/angular/angular/commit/b039ec3)), closes [#3645](https://github.com/angular/angular/issues/3645) [#3750](https://github.com/angular/angular/issues/3750)
-* **router:** allow router-link to link to redirects ([72e0b8f](https://github.com/angular/angular/commit/72e0b8f)), closes [#3335](https://github.com/angular/angular/issues/3335) [#3624](https://github.com/angular/angular/issues/3624)
-* **router:** subscribe should return subscription ([5c95b37](https://github.com/angular/angular/commit/5c95b37)), closes [#3491](https://github.com/angular/angular/issues/3491) [#3695](https://github.com/angular/angular/issues/3695)
-* **typings:** include static members ([894af28](https://github.com/angular/angular/commit/894af28)), closes [#3175](https://github.com/angular/angular/issues/3175) [#3780](https://github.com/angular/angular/issues/3780)
-* **ViewLoader:** provide componentId in missing template / templateUrl errors ([3871f89](https://github.com/angular/angular/commit/3871f89))
-* **wtf:** fix NgZone.run instrumentation ([5f0a0fd](https://github.com/angular/angular/commit/5f0a0fd)), closes [#3788](https://github.com/angular/angular/issues/3788)
-* wtf paramater passing on scope ([9afcb00](https://github.com/angular/angular/commit/9afcb00)), closes [#3726](https://github.com/angular/angular/issues/3726)
-
-### Features
-
-* track unused reflection data ([8336881](https://github.com/angular/angular/commit/8336881))
-* **browser:** support Edge ([3b49652](https://github.com/angular/angular/commit/3b49652)), closes [#3667](https://github.com/angular/angular/issues/3667)
-* **build:** added a temporary fix to make test.unit.dart work ([85ec34d](https://github.com/angular/angular/commit/85ec34d))
-* **change_detection:** added support for observable components and directives ([e8e430e](https://github.com/angular/angular/commit/e8e430e))
-* **change_detection:** do not reparse AST when using generated detectors ([d2d0715](https://github.com/angular/angular/commit/d2d0715))
-* **docs:** export type info for var and const exports ([9262727](https://github.com/angular/angular/commit/9262727)), closes [#3700](https://github.com/angular/angular/issues/3700)
-* **facade:** add maximum method for ListWrapper ([b5c4d8b](https://github.com/angular/angular/commit/b5c4d8b))
-* **http:** xhr error listener invokes throw on EventEmitter ([f2d3bdb](https://github.com/angular/angular/commit/f2d3bdb)), closes [#2667](https://github.com/angular/angular/issues/2667)
-* **router:** add AngularJS router ([fde026a](https://github.com/angular/angular/commit/fde026a))
-* **router:** add reuse support for AngularJS router ([ddb62fe](https://github.com/angular/angular/commit/ddb62fe)), closes [#3698](https://github.com/angular/angular/issues/3698)
-* **url_resolver:** Allow a developer to customize their package prefix ([9cc1cd2](https://github.com/angular/angular/commit/9cc1cd2)), closes [#3794](https://github.com/angular/angular/issues/3794)
-
-
-
-<a name="2.0.0-alpha.35"></a>
-# 2.0.0-alpha.35 (2015-08-19)
-
-
-### Bug Fixes
-
-* **benchmarks:** remove reference to String.prototype.contains() ([b6ee208](https://github.com/angular/angular/commit/b6ee208)), closes [#3570](https://github.com/angular/angular/issues/3570)
-* **browser_adapter.ts:** baseElement.getAttribute ([235dec2](https://github.com/angular/angular/commit/235dec2)), closes [#3214](https://github.com/angular/angular/issues/3214)
-* **compiler:** strip script tag from templates ([748c2d6](https://github.com/angular/angular/commit/748c2d6)), closes [#2766](https://github.com/angular/angular/issues/2766) [#3486](https://github.com/angular/angular/issues/3486)
-* **CSSClass:** change selector to ng-class ([ff1b110](https://github.com/angular/angular/commit/ff1b110)), closes [#3498](https://github.com/angular/angular/issues/3498)
-* **dart:** @proxy is a value, not a factory ([b4a0629](https://github.com/angular/angular/commit/b4a0629)), closes [#3494](https://github.com/angular/angular/issues/3494)
-* **docs:** export bootstrap in core.ts but not in core.dart ([5f7d4fa](https://github.com/angular/angular/commit/5f7d4fa))
-* **docs:** ng-non-bindable ([f2f4b90](https://github.com/angular/angular/commit/f2f4b90)), closes [#3607](https://github.com/angular/angular/issues/3607)
-* **exception_handler:** log errors that are thrown by the compiler ([07b9be7](https://github.com/angular/angular/commit/07b9be7))
-* **NgClass:** take initial classes into account during cleanup ([ed25a29](https://github.com/angular/angular/commit/ed25a29)), closes [#3557](https://github.com/angular/angular/issues/3557)
-* **presubmit:** uses proper branch instead of hard coded ([96e34c1](https://github.com/angular/angular/commit/96e34c1)), closes [#3552](https://github.com/angular/angular/issues/3552)
-* **query:** do not visit dehydrated injectors. ([6c9e712](https://github.com/angular/angular/commit/6c9e712))
-* **router:** fix regression with generating links to async routes ([26d2ea8](https://github.com/angular/angular/commit/26d2ea8)), closes [#3650](https://github.com/angular/angular/issues/3650)
-* **router:** throw when component in route config is not defined ([903a0f0](https://github.com/angular/angular/commit/903a0f0)), closes [#3265](https://github.com/angular/angular/issues/3265) [#3569](https://github.com/angular/angular/issues/3569)
-* **test_lib:** run unit tests in default Documnent ([a37de36](https://github.com/angular/angular/commit/a37de36)), closes [#3501](https://github.com/angular/angular/issues/3501) [#3475](https://github.com/angular/angular/issues/3475)
-* **testability:** properly throw when no testability available ([841206c](https://github.com/angular/angular/commit/841206c))
-* **testability:** throw if no testability available ([08dbe87](https://github.com/angular/angular/commit/08dbe87))
-* **Testability:** fix type error in getAllAngularTestability (dart) ([574bbea](https://github.com/angular/angular/commit/574bbea))
-* **transformers:** be more specific in the imports to rewrite ([86eb46a](https://github.com/angular/angular/commit/86eb46a)), closes [#3473](https://github.com/angular/angular/issues/3473) [#3523](https://github.com/angular/angular/issues/3523)
-* improper use package name in facade ([64ebf27](https://github.com/angular/angular/commit/64ebf27)), closes [#3613](https://github.com/angular/angular/issues/3613)
-* **typescript:** update to typescript with fixed system emit ([ac31191](https://github.com/angular/angular/commit/ac31191)), closes [#3594](https://github.com/angular/angular/issues/3594)
-* **UrlResolver:** encode URLs before resolving ([4f5e405](https://github.com/angular/angular/commit/4f5e405)), closes [#3543](https://github.com/angular/angular/issues/3543) [#3545](https://github.com/angular/angular/issues/3545)
-* **WebWorkers:** Run XHR requests on the UI ([2968517](https://github.com/angular/angular/commit/2968517)), closes [#3652](https://github.com/angular/angular/issues/3652)
-
-### Features
-
-* **change_detection:** added an example demonstrating how to use observable models ([52da220](https://github.com/angular/angular/commit/52da220)), closes [#3684](https://github.com/angular/angular/issues/3684)
-* **change_detection:** added an experimental support for observables ([cbfc9cb](https://github.com/angular/angular/commit/cbfc9cb))
-* **change_detection:** request a change detection check when  an event happens ([5e6317f](https://github.com/angular/angular/commit/5e6317f)), closes [#3679](https://github.com/angular/angular/issues/3679)
-* **compiler:** allow binding to className using class alias ([a7a1851](https://github.com/angular/angular/commit/a7a1851)), closes [#2364](https://github.com/angular/angular/issues/2364)
-* **coreDirectives:** add NgClass to coreDirectives ([6bd95c1](https://github.com/angular/angular/commit/6bd95c1)), closes [#3534](https://github.com/angular/angular/issues/3534)
-* **dart/transform:** Support `part` directives ([aa480fe](https://github.com/angular/angular/commit/aa480fe)), closes [#1817](https://github.com/angular/angular/issues/1817)
-* **di:** added resolveAndInstantiate and instantiateResolved to Injector ([06da60f](https://github.com/angular/angular/commit/06da60f))
-* **http:** serialize search parameters from request options ([77d3668](https://github.com/angular/angular/commit/77d3668)), closes [#2417](https://github.com/angular/angular/issues/2417) [#3020](https://github.com/angular/angular/issues/3020)
-* **npm:** add typescript block to package.json ([b5fb05b](https://github.com/angular/angular/commit/b5fb05b)), closes [#3590](https://github.com/angular/angular/issues/3590) [#3609](https://github.com/angular/angular/issues/3609)
-* **npm:** publish bundles and their typings in npm distribution ([7b3cca2](https://github.com/angular/angular/commit/7b3cca2)), closes [#3555](https://github.com/angular/angular/issues/3555)
-* **pipe:** added the Pipe decorator and the pipe property to View ([5b5d31f](https://github.com/angular/angular/commit/5b5d31f)), closes [#3572](https://github.com/angular/angular/issues/3572)
-* **pipes:** changed PipeTransform to make onDestroy optional ([839edaa](https://github.com/angular/angular/commit/839edaa))
-* **PropertyBindingParser:** support onbubble-event as an alternate syntax for (^event) ([1f54e64](https://github.com/angular/angular/commit/1f54e64)), closes [#3448](https://github.com/angular/angular/issues/3448) [#3616](https://github.com/angular/angular/issues/3616)
-* **query:** allow to query for `TemplateRef` ([585ea5d](https://github.com/angular/angular/commit/585ea5d)), closes [#3202](https://github.com/angular/angular/issues/3202)
-* **query:** view query is properly updated when dom changes. ([2150a8f](https://github.com/angular/angular/commit/2150a8f)), closes [#3033](https://github.com/angular/angular/issues/3033) [#3439](https://github.com/angular/angular/issues/3439)
-* **query_list:** delegate `toString` to `_results` array ([35a83b4](https://github.com/angular/angular/commit/35a83b4)), closes [#3004](https://github.com/angular/angular/issues/3004)
-* **refactor:** replaced ObservablePipe and PromisePipe with AsyncPipe ([106a28b](https://github.com/angular/angular/commit/106a28b))
-* **router:** auxiliary routes ([ac6227e](https://github.com/angular/angular/commit/ac6227e)), closes [#2775](https://github.com/angular/angular/issues/2775)
-* **router:** user metadata in route configs ([ed81cb9](https://github.com/angular/angular/commit/ed81cb9)), closes [#2777](https://github.com/angular/angular/issues/2777) [#3541](https://github.com/angular/angular/issues/3541)
-* **test:** find testabilities across dart js applications ([1d65b38](https://github.com/angular/angular/commit/1d65b38)), closes [#3611](https://github.com/angular/angular/issues/3611)
-* **testability:** option to disable tree walking ([8f5360c](https://github.com/angular/angular/commit/8f5360c))
-* **typings:** allow declaration of reference paths ([1f692ae](https://github.com/angular/angular/commit/1f692ae)), closes [#3540](https://github.com/angular/angular/issues/3540)
-* **typings:** allow defining custom namespace for bundle ([dfa5103](https://github.com/angular/angular/commit/dfa5103)), closes [#2948](https://github.com/angular/angular/issues/2948) [#3544](https://github.com/angular/angular/issues/3544)
-
-
-### BREAKING CHANGES
-
-* rename all constants to UPPER_CASE names
-
-  - `appComponentTypeToken` => `APP_COMPONENT`
-  - `coreDirectives` => `CORE_DIRECTIVES`
-  - `formDirectives` => `FORM_DIRECTIVES`
-  - `formInjectables` => `FORM_BINDINGS`
-  - `httpInjectables` => `HTTP_BINDINGS`
-  - `jsonpInjectables` => `JSONP_BINDINGS`
-  - `PROTO_CHANGE_DETECTOR_KEY` => `PROTO_CHANGE_DETECTOR`
-  - `appComponentRefPromiseToken` => `APP_COMPONENT_REF_PROMISE`
-  - `appComponentTypeToken` => `APP_COMPONENT`
-  - `undefinedValue` => `UNDEFINED`
-  - `formDirectives` => `FORM_DIRECTIVES`
-  - `DOCUMENT_TOKEN` => `DOCUMENT`
-  - `APP_ID_TOKEN` => `APP_ID`
-  - `MAX_IN_MEMORY_ELEMENTS_PER_TEMPLATE_TOKEN` => `MAX_IN_MEMORY_ELEMENTS_PER_TEMPLATE`
-  - `appBaseHrefToken` => `APP_BASE_HREF`
-
-* renamed DI visibility flags
-
-  - `PRIVATE` => `Visibility.Private`
-  - `PUBLIC` => `Visibility.Public`
-  - `PUBLIC_AND_PRIVATE` => `Visibility.PublicAndPrivate`
-
-* renamed all "annotation" references to "metadata"
-
-  - *Annotations => *Metadata
-  - renderer.DirectiveMetadata => renderer.RendererDirectiveMetadata
-  - renderer.ElementBinder => renderer.RendererElementBinder
-  - impl.Directive => impl.DirectiveMetadata
-  - impl.Component => impl.ComponentMetadata
-  - impl.View => impl.ViewMetadata
-
-
-* `IS_DARTIUM` constant is no longer exported/supported
-
-* The HTTP package is no longer supported in Dart (use standard library apis instead)
-
-* Remove IRequestOptions / IResponseOptions / IQueryList interfaces
-
-* Pipe factories have been removed and Pipe names to pipe implementations are 1-to-1  instead of 1-to-*
-
-  Before:
-  <code><pre>
-   class DateFormatter {
-       transform(date, args){}
-   }
-
-   class DateFormatterFactory {
-     supporst(obj) { return true; }
-     create(cdRef) { return new DateFormatter(); }
-   }
-   new Pipes({date: [new DateFormatterFactory()]})
-  </pre></code>
-
-  After:
-  <code><pre>
-  class DateFormatter {
-    transform(date, args){}
-  }
-  new Pipes({date: DateFormatter})
-  </pre></code>
-
-
-* Previously Angular called onDestroy on all pipes. Now Angular calls onDestroy only on pipes that have the onDestroy method.
-
-* Instead of configuring pipes via a Pipes object, now you can configure them by providing the pipes property to the View decorator.
-
-  <code><pre>
-    @Pipe({
-      name: 'double'
-    })
-    class DoublePipe {
-      transform(value, args) { return value * 2; }
-    }
-    @View({
-      template: '{{ 10 | double}}'
-      pipes: [DoublePipe]
-    })
-    class CustomComponent {}
-  </pre></code>
-
-
-* The router was previously exported as ng.router in the
-    angular.sfx.dev.js bundle, but now it is exported as ngRouter.
-
-* The selector for the CSSClass directive was changed
-from [class] to [ng-class]. The directive itself was
-renamed from CSSClass to NgClass
-
-
-
-<a name="2.0.0-alpha.34"></a>
-# 2.0.0-alpha.34 (2015-08-07)
-
-
-### Bug Fixes
-
-* **XHRConnection:** use xhr status code ([96eefdf](https://github.com/angular/angular/commit/96eefdf)), closes [#2841](https://github.com/angular/angular/issues/2841)
-* **bootstrap:** fix expressions containing bootstrap (fixes #3309) ([2909576](https://github.com/angular/angular/commit/2909576)), closes [#3309](https://github.com/angular/angular/issues/3309)
-* **browser_adapter:** fix clearNodes() in IE ([70bc485](https://github.com/angular/angular/commit/70bc485)), closes [#3295](https://github.com/angular/angular/issues/3295) [#3355](https://github.com/angular/angular/issues/3355)
-* **collection:** MapIterator.next() is not supported (Safari) ([12e4c73](https://github.com/angular/angular/commit/12e4c73)), closes [#3015](https://github.com/angular/angular/issues/3015) [#3389](https://github.com/angular/angular/issues/3389)
-* **compiler:** Allow components to use any style of selector. Fixes #1602 ([c20a5d6](https://github.com/angular/angular/commit/c20a5d6)), closes [#1602](https://github.com/angular/angular/issues/1602)
-* **core:** export LifeCycle at top-level modules ([4e76cac](https://github.com/angular/angular/commit/4e76cac)), closes [#3395](https://github.com/angular/angular/issues/3395)
-* **dart/transform:** Remove malfunctioning zone error handler ([68a581a](https://github.com/angular/angular/commit/68a581a)), closes [#3368](https://github.com/angular/angular/issues/3368)
-* **decorators:** stop directives inheriting parent class decorators. ([f7d7789](https://github.com/angular/angular/commit/f7d7789)), closes [#2291](https://github.com/angular/angular/issues/2291)
-* **docs:** add ViewDefinition, DirectiveMetadata to public API ([d4ded1a](https://github.com/angular/angular/commit/d4ded1a)), closes [#3346](https://github.com/angular/angular/issues/3346)
-* remove unused imports ([39b0286](https://github.com/angular/angular/commit/39b0286))
-* **parser:** detect empty expression in strings to interpolate ([4422819](https://github.com/angular/angular/commit/4422819)), closes [#3412](https://github.com/angular/angular/issues/3412) [#3451](https://github.com/angular/angular/issues/3451)
-* **query:** view query should not be updated when subviews are attached. ([34acef5](https://github.com/angular/angular/commit/34acef5))
-* **render:** allow to configure when templates are serialized to strings ([dd06a87](https://github.com/angular/angular/commit/dd06a87)), closes [#3418](https://github.com/angular/angular/issues/3418) [#3433](https://github.com/angular/angular/issues/3433)
-* **router:** ensure navigation via back button works ([7bf7ec6](https://github.com/angular/angular/commit/7bf7ec6)), closes [#2201](https://github.com/angular/angular/issues/2201)
-* **style_url_resolver:** fix data: url resolution ([73b7d99](https://github.com/angular/angular/commit/73b7d99))
-* **testing:** Fixed race condition in WebWorker and Routing tests ([eee2146](https://github.com/angular/angular/commit/eee2146))
-
-### Features
-
-* **WebWorkers:** Add WebWorker Todo Example. Add support for more DOM events. ([d44827a](https://github.com/angular/angular/commit/d44827a))
-* **WebWorkers:** Add WebWorker Todo Example. Add support for more DOM events. ([c5cb700](https://github.com/angular/angular/commit/c5cb700))
-* implement web-tracing-framework support ([77875a2](https://github.com/angular/angular/commit/77875a2)), closes [#2610](https://github.com/angular/angular/issues/2610)
-* **compiler:** introduce schema for elements ([d894aa9](https://github.com/angular/angular/commit/d894aa9)), closes [#3353](https://github.com/angular/angular/issues/3353)
-* **core:** made directives shadow native element properties ([3437d56](https://github.com/angular/angular/commit/3437d56))
-* **md-button:** enhance button focus appearance. ([6d280ea](https://github.com/angular/angular/commit/6d280ea))
-* **pipes:** replaces iterable and key value diffing pipes with services ([392de4a](https://github.com/angular/angular/commit/392de4a))
-* enable the decorators compiler option. ([0bb78b7](https://github.com/angular/angular/commit/0bb78b7))
-* export a proper promise type. ([861be30](https://github.com/angular/angular/commit/861be30))
-* upgrade ts2dart to 0.7.1. ([a62a6ba](https://github.com/angular/angular/commit/a62a6ba))
-* **router:** add `back()` support to `MockLocationStrategy` ([60f38ea](https://github.com/angular/angular/commit/60f38ea))
-* **testability:** Expose function getAllAngularTestabilities ([7b94bbf](https://github.com/angular/angular/commit/7b94bbf))
-* **transformers:** add more information to factory debug reflection ([be79942](https://github.com/angular/angular/commit/be79942))
-
-### Performance Improvements
-
-* **change_detection:** do not check intermediate results ([c1ee943](https://github.com/angular/angular/commit/c1ee943))
-* **change_detection:** do not generate onAllChangesDone when not needed ([adc2739](https://github.com/angular/angular/commit/adc2739))
-* **change_detection:** removed the currentProto property ([71ea199](https://github.com/angular/angular/commit/71ea199))
-
-
-### BREAKING CHANGES
-
-*     Directives that previously injected Pipes to get iterableDiff or keyvalueDiff, now should inject IterableDiffers and KeyValueDiffers.
-
-*     Previously, if an element had a property, Angular would update that property even if there was a directive placed on the same element with the same property. Now, the directive would have to explicitly update the native elmement by either using hostProperties or the renderer.
-
-
-
-<a name"2.0.0-alpha.33"></a>
-### 2.0.0-alpha.33 (2015-07-30)
-
-
-#### Bug Fixes
-
-* addresses a couple ddc type errors ([f1e42920](https://github.com/angular/angular/commit/f1e42920))
-* **.d.ts:** Correct new Type interface return type ([78fdf9a1](https://github.com/angular/angular/commit/78fdf9a1), closes [#2399](https://github.com/angular/angular/issues/2399), [#3316](https://github.com/angular/angular/issues/3316))
-* **build:** don't trigger travis on g3sync branch ([61b77034](https://github.com/angular/angular/commit/61b77034))
-* **change_detection:** convert interpolated null values to empty strings ([345fa521](https://github.com/angular/angular/commit/345fa521), closes [#3007](https://github.com/angular/angular/issues/3007), [#3271](https://github.com/angular/angular/issues/3271))
-* **class:**
-  * allow class names with mixed case ([a8b57256](https://github.com/angular/angular/commit/a8b57256), closes [#3001](https://github.com/angular/angular/issues/3001), [#3264](https://github.com/angular/angular/issues/3264))
-  * correctly clean up on destroy ([1438922f](https://github.com/angular/angular/commit/1438922f), closes [#3249](https://github.com/angular/angular/issues/3249), [#3256](https://github.com/angular/angular/issues/3256))
-* **compiler:** prevent race conditions ([5ec67ee2](https://github.com/angular/angular/commit/5ec67ee2), closes [#3206](https://github.com/angular/angular/issues/3206), [#3211](https://github.com/angular/angular/issues/3211))
-* **core:** fix type error in setElementProperty ([448264be](https://github.com/angular/angular/commit/448264be), closes [#3279](https://github.com/angular/angular/issues/3279))
-* **element_injector:** do not throw when cannot find element when trying to report an error ([03c8e742](https://github.com/angular/angular/commit/03c8e742))
-* **presubmit:** corrected user/email for git push ([e40ff368](https://github.com/angular/angular/commit/e40ff368))
-* **projection:**
-  * allow more bound render elements than app elements. ([46502e4d](https://github.com/angular/angular/commit/46502e4d), closes [#3236](https://github.com/angular/angular/issues/3236), [#3247](https://github.com/angular/angular/issues/3247))
-  * allow to project to a non text node ([b44b06c2](https://github.com/angular/angular/commit/b44b06c2), closes [#3230](https://github.com/angular/angular/issues/3230), [#3241](https://github.com/angular/angular/issues/3241))
-* **query:** the view should not be visible to @Query. ([1d450294](https://github.com/angular/angular/commit/1d450294))
-* **transformer:**
-  * Fix generation of `annotations` argument when registering functions. ([2faa8985](https://github.com/angular/angular/commit/2faa8985))
-  * Don't throw on annotations that don't match a descriptor. ([f575ba60](https://github.com/angular/angular/commit/f575ba60), closes [#3280](https://github.com/angular/angular/issues/3280))
-  * Loggers now are per zone and each transform runs in its own zone ([bd65b63c](https://github.com/angular/angular/commit/bd65b63c))
-* **typings:** test our .d.ts with --noImplicitAny ([19d8b221](https://github.com/angular/angular/commit/19d8b221))
-* **url_resolver:** in Dart make package urls relative to AppRootUrl ([469afda5](https://github.com/angular/angular/commit/469afda5))
-
-
-#### Features
-
-* **benchmark:** add static_tree benchmark ([854b5b7d](https://github.com/angular/angular/commit/854b5b7d), closes [#3196](https://github.com/angular/angular/issues/3196))
-* **bootstrap:** remove the need for explicit reflection setup in bootstrap code ([3531bb71](https://github.com/angular/angular/commit/3531bb71))
-* **build:** initial SauceLabs setup ([eebd736c](https://github.com/angular/angular/commit/eebd736c), closes [#2347](https://github.com/angular/angular/issues/2347))
-* **change_detection:**
-  * generate checkNoChanges only in dev mode ([71bb4b3e](https://github.com/angular/angular/commit/71bb4b3e))
-  * provide error context for change detection errors ([c2bbda02](https://github.com/angular/angular/commit/c2bbda02))
-* **core:** provide an error context when an exception happens in an error handler ([8543c347](https://github.com/angular/angular/commit/8543c347))
-* **di:** added context to runtime DI errors ([5a86f859](https://github.com/angular/angular/commit/5a86f859))
-* **exception_handler:**
-  * print originalException and originalStack for all exceptions ([e744409c](https://github.com/angular/angular/commit/e744409c))
-  * change ExceptionHandler to output context ([fdf226ab](https://github.com/angular/angular/commit/fdf226ab))
-* **http:** call complete on request complete ([6fac9011](https://github.com/angular/angular/commit/6fac9011), closes [#2635](https://github.com/angular/angular/issues/2635))
-* **http.ts:** export BrowserXHR ([8a91d716](https://github.com/angular/angular/commit/8a91d716), closes [#2641](https://github.com/angular/angular/issues/2641))
-* **lang:** added "context" to BaseException ([8ecb632d](https://github.com/angular/angular/commit/8ecb632d))
-* **router:** use querystring params for top-level routes ([fdffcaba](https://github.com/angular/angular/commit/fdffcaba), closes [#3017](https://github.com/angular/angular/issues/3017))
-* **testability:** hook zone into whenstable api with async support ([a8b75c3d](https://github.com/angular/angular/commit/a8b75c3d))
-* **transformers:** directive aliases in Dart transformers (fix #1747) ([fd46b49e](https://github.com/angular/angular/commit/fd46b49e))
-* **url_resolver:** support package: urls () ([408618b8](https://github.com/angular/angular/commit/408618b8), closes [#2991](https://github.com/angular/angular/issues/2991))
-
-
-#### Breaking Changes
-
-* View renderer used to take normalized CSS class names (ex. fooBar for foo-bar).
-With this change a rendered implementation gets a calss name as specified in a
-template, without any transformations / normalization. This change only affects
-custom view renderers that should be updated accordingly.
-
-Closes #3264
-
- ([a8b57256](https://github.com/angular/angular/commit/a8b57256))
-
-<a name="2.0.0-alpha.32"></a>
-# 2.0.0-alpha.32 (2015-07-29)
-
-
-### Bug Fixes
-
-* **.d.ts:** Correct new Type interface return type ([78fdf9a](https://github.com/angular/angular/commit/78fdf9a)), closes [#2399](https://github.com/angular/angular/issues/2399) [#3316](https://github.com/angular/angular/issues/3316)
-* **build:** don't trigger travis on g3sync branch ([61b7703](https://github.com/angular/angular/commit/61b7703))
-* **change_detection:** convert interpolated null values to empty strings ([345fa52](https://github.com/angular/angular/commit/345fa52)), closes [#3007](https://github.com/angular/angular/issues/3007) [#3271](https://github.com/angular/angular/issues/3271)
-* **class:** allow class names with mixed case ([a8b5725](https://github.com/angular/angular/commit/a8b5725)), closes [#3001](https://github.com/angular/angular/issues/3001) [#3264](https://github.com/angular/angular/issues/3264)
-* **class:** correctly clean up on destroy ([1438922](https://github.com/angular/angular/commit/1438922)), closes [#3249](https://github.com/angular/angular/issues/3249) [#3256](https://github.com/angular/angular/issues/3256)
-* **compiler:** prevent race conditions ([5ec67ee](https://github.com/angular/angular/commit/5ec67ee)), closes [#3206](https://github.com/angular/angular/issues/3206) [#3211](https://github.com/angular/angular/issues/3211)
-* **core:** fix type error in setElementProperty ([448264b](https://github.com/angular/angular/commit/448264b)), closes [#3279](https://github.com/angular/angular/issues/3279)
-* **dart/transform:** Handle mixed lifecycle specs ([23cd385](https://github.com/angular/angular/commit/23cd385)), closes [#3276](https://github.com/angular/angular/issues/3276)
-* **element_injector:** do not throw when cannot find element when trying to report an error ([03c8e74](https://github.com/angular/angular/commit/03c8e74))
-* **lowercase,uppercase:** make stateless pipes ([4dc6d74](https://github.com/angular/angular/commit/4dc6d74)), closes [#3173](https://github.com/angular/angular/issues/3173) [#3189](https://github.com/angular/angular/issues/3189)
-* **presubmit:** corrected user/email for git push ([e40ff36](https://github.com/angular/angular/commit/e40ff36))
-* **projection:** allow more bound render elements than app elements. ([46502e4](https://github.com/angular/angular/commit/46502e4)), closes [#3236](https://github.com/angular/angular/issues/3236) [#3247](https://github.com/angular/angular/issues/3247)
-* **projection:** allow to project to a non text node ([b44b06c](https://github.com/angular/angular/commit/b44b06c)), closes [#3230](https://github.com/angular/angular/issues/3230) [#3241](https://github.com/angular/angular/issues/3241)
-* **query:** the view should not be visible to @Query. ([1d45029](https://github.com/angular/angular/commit/1d45029))
-* **style_url_resolver:** fix data: url resolution ([73b7d99](https://github.com/angular/angular/commit/73b7d99))
-* **transformer:** Don't throw on annotations that don't match a descriptor. ([f575ba6](https://github.com/angular/angular/commit/f575ba6)), closes [#3280](https://github.com/angular/angular/issues/3280)
-* **transformer:** Fix generation of `annotations` argument when registering functions. ([2faa898](https://github.com/angular/angular/commit/2faa898))
-* **transformer:** Loggers now are per zone and each transform runs in its own zone ([bd65b63](https://github.com/angular/angular/commit/bd65b63))
-* **typings:** test our .d.ts with --noImplicitAny ([19d8b22](https://github.com/angular/angular/commit/19d8b22))
-* **url_resolver:** in Dart make package urls relative to AppRootUrl ([469afda](https://github.com/angular/angular/commit/469afda))
-* addresses a couple ddc type errors ([f1e4292](https://github.com/angular/angular/commit/f1e4292))
-
-### Features
-
-* **benchmark:** add static_tree benchmark ([854b5b7](https://github.com/angular/angular/commit/854b5b7)), closes [#3196](https://github.com/angular/angular/issues/3196)
-* **bootstrap:** remove the need for explicit reflection setup in bootstrap code ([3531bb7](https://github.com/angular/angular/commit/3531bb7))
-* **build:** initial SauceLabs setup ([eebd736](https://github.com/angular/angular/commit/eebd736)), closes [#2347](https://github.com/angular/angular/issues/2347)
-* **change_detection:** generate checkNoChanges only in dev mode ([71bb4b3](https://github.com/angular/angular/commit/71bb4b3))
-* **change_detection:** provide error context for change detection errors ([c2bbda0](https://github.com/angular/angular/commit/c2bbda0))
-* **compiler:** introduce schema for elements ([d894aa9](https://github.com/angular/angular/commit/d894aa9)), closes [#3353](https://github.com/angular/angular/issues/3353)
-* **core:** provide an error context when an exception happens in an error handler ([8543c34](https://github.com/angular/angular/commit/8543c34))
-* **dart/transform:** Populate `lifecycle` from lifecycle interfaces ([8ad4ad5](https://github.com/angular/angular/commit/8ad4ad5)), closes [#3181](https://github.com/angular/angular/issues/3181)
-* **di:** added context to runtime DI errors ([5a86f85](https://github.com/angular/angular/commit/5a86f85))
-* **exception_handler:** change ExceptionHandler to output context ([fdf226a](https://github.com/angular/angular/commit/fdf226a))
-* **exception_handler:** print originalException and originalStack for all exceptions ([e744409](https://github.com/angular/angular/commit/e744409))
-* **http:** call complete on request complete ([6fac901](https://github.com/angular/angular/commit/6fac901)), closes [#2635](https://github.com/angular/angular/issues/2635)
-* **http.ts:** export BrowserXHR ([8a91d71](https://github.com/angular/angular/commit/8a91d71)), closes [#2641](https://github.com/angular/angular/issues/2641)
-* **lang:** added "context" to BaseException ([8ecb632](https://github.com/angular/angular/commit/8ecb632))
-* **router:** use querystring params for top-level routes ([fdffcab](https://github.com/angular/angular/commit/fdffcab)), closes [#3017](https://github.com/angular/angular/issues/3017)
-* **testability:** hook zone into whenstable api with async support ([a8b75c3](https://github.com/angular/angular/commit/a8b75c3))
-* **transformers:** directive aliases in Dart transformers (fix #1747) ([fd46b49](https://github.com/angular/angular/commit/fd46b49)), closes [#1747](https://github.com/angular/angular/issues/1747)
-* **url_resolver:** support package: urls (fixes #2991) ([408618b](https://github.com/angular/angular/commit/408618b)), closes [#2991](https://github.com/angular/angular/issues/2991)
-
-### Reverts
-
-* style(ngFor): add whitespace to `Directive` annotation ([74b311a](https://github.com/angular/angular/commit/74b311a))
-
-
-### BREAKING CHANGES
-
-* View renderer used to take normalized CSS class names (ex. fooBar for foo-bar).
-With this change a rendered implementation gets a calss name as specified in a
-template, without any transformations / normalization. This change only affects
-custom view renderers that should be updated accordingly.
-
-* S:
-Dart applications and TypeScript applications meant to transpile to Dart must now
-import `package:angular2/bootstrap.dart` instead of `package:angular2/angular2.dart`
-in their bootstrap code. `package:angular2/angular2.dart` no longer export the
-bootstrap function. The transformer rewrites imports of `bootstrap.dart` and calls
-to `bootstrap` to `bootstrap_static.dart` and `bootstrapStatic` respectively.
-
-
-
-<a name="2.0.0-alpha.32"></a>
-# 2.0.0-alpha.32 (2015-07-21)
-
-
-### Bug Fixes
-
-* **api_docs:** slightly more accurate description of Dart overrideOnEventDone ([a4915ad](https://github.com/angular/angular/commit/a4915ad))
-* **api_docs:** slightly more accurate description of TS overrideOnEventDone ([fe3a559](https://github.com/angular/angular/commit/fe3a559))
-* **build:** clang-format ([66ec4d1](https://github.com/angular/angular/commit/66ec4d1))
-* **change_detect:** Handle '$' in change detector strings ([f1e8176](https://github.com/angular/angular/commit/f1e8176))
-* **change_detect:** Sort `DirectiveMetadata` properties during processing ([b2a0be8](https://github.com/angular/angular/commit/b2a0be8))
-* **content_projection:** allow to project text nodes to a place without bindings ([a472eac](https://github.com/angular/angular/commit/a472eac)), closes [#3163](https://github.com/angular/angular/issues/3163) [#3179](https://github.com/angular/angular/issues/3179)
-* **di:** do not rely on the fact that types are canonicalized ([2147ce4](https://github.com/angular/angular/commit/2147ce4))
-* **di:** fixed dynamic component loading of components created in child injector ([5749692](https://github.com/angular/angular/commit/5749692))
-* **di:** fixed types ([2f08ed8](https://github.com/angular/angular/commit/2f08ed8))
-* **di:** instatiate services lazily ([7531b48](https://github.com/angular/angular/commit/7531b48))
-* **element_injector:** inject the containing change detector ref to directives ([7879761](https://github.com/angular/angular/commit/7879761))
-* **examples:** add a couple entrypoints, adjust pubspec, fix change detector bug in Dart ([b03560b](https://github.com/angular/angular/commit/b03560b))
-* **facade:** use base element to get base href ([8296dce](https://github.com/angular/angular/commit/8296dce))
-* **forms:** default the initial value of Control to null ([5b597de](https://github.com/angular/angular/commit/5b597de))
-* **forms:** do not reset the value of the input when it came from the view ([b123159](https://github.com/angular/angular/commit/b123159))
-* **html_adapter:** Implement hasAttribute and getAttribute. ([e988f59](https://github.com/angular/angular/commit/e988f59))
-* **ng_for:** fixed ng_for to pass a change detector ref to the pipe registry ([583c5ff](https://github.com/angular/angular/commit/583c5ff))
-* **publish:** add force flag for pub publish script ([621604d](https://github.com/angular/angular/commit/621604d)), closes [#3077](https://github.com/angular/angular/issues/3077)
-* **renderer:** handle empty fragments correctly ([61c7357](https://github.com/angular/angular/commit/61c7357)), closes [#3100](https://github.com/angular/angular/issues/3100)
-* **router:** improve error for missing base href ([011fab3](https://github.com/angular/angular/commit/011fab3)), closes [#3096](https://github.com/angular/angular/issues/3096)
-* **router:** improve error messages for routes with no config ([8bdca5c](https://github.com/angular/angular/commit/8bdca5c)), closes [#2323](https://github.com/angular/angular/issues/2323)
-* **router:** throw when reserved characters used in route definition ([c6409cb](https://github.com/angular/angular/commit/c6409cb)), closes [#3021](https://github.com/angular/angular/issues/3021)
-* **transformers:** fix sort order for reflective imports ([762a94f](https://github.com/angular/angular/commit/762a94f))
-* **view_manager:** allow to create host views even if there is an embedded view at the same place. ([116b64d](https://github.com/angular/angular/commit/116b64d))
-
-### Features
-
-* FunctionWithParamTokens.execute now returns the value of the function ([3dd05ef](https://github.com/angular/angular/commit/3dd05ef))
-* **compiler:** attach components and project light dom during compilation. ([b1df545](https://github.com/angular/angular/commit/b1df545)), closes [#2529](https://github.com/angular/angular/issues/2529)
-* upgrade ts2dart to 0.6.9. ([3810e4b](https://github.com/angular/angular/commit/3810e4b))
-* **build:** require parameter types ([de18da2](https://github.com/angular/angular/commit/de18da2)), closes [#2833](https://github.com/angular/angular/issues/2833)
-* **change_detection:** added support for ObservableList from package:observe ([d449ea5](https://github.com/angular/angular/commit/d449ea5))
-* **compiler:** Support $baseUrl in HTML attributes when loading a template. ([e942709](https://github.com/angular/angular/commit/e942709))
-* **core:** add ability to reflect DOM properties as attributes ([903ff90](https://github.com/angular/angular/commit/903ff90)), closes [#2910](https://github.com/angular/angular/issues/2910)
-* **facade:** add getTypeNameForDebugging function ([ccb4163](https://github.com/angular/angular/commit/ccb4163))
-* **forms:** Export NgSelectOption directive ([f74d97e](https://github.com/angular/angular/commit/f74d97e))
-* **http:** add support for JSONP requests ([81abc39](https://github.com/angular/angular/commit/81abc39)), closes [#2905](https://github.com/angular/angular/issues/2905) [#2818](https://github.com/angular/angular/issues/2818)
-* **pipes:** changed .append to .extend ([4c8ea12](https://github.com/angular/angular/commit/4c8ea12))
-* **router:** add interfaces for route definitions in RouteConfig ([4d28167](https://github.com/angular/angular/commit/4d28167)), closes [#2261](https://github.com/angular/angular/issues/2261)
-* **transformers:** expose DI transformer for use by packages ([2bc1217](https://github.com/angular/angular/commit/2bc1217)), closes [#2814](https://github.com/angular/angular/issues/2814)
-* **transformers:** implement initializing deferred libraries ([5cc84ed](https://github.com/angular/angular/commit/5cc84ed))
-
-### Performance Improvements
-
-* **dom:** Only send values for existing properties to js interior ([153660f](https://github.com/angular/angular/commit/153660f)), closes [#3149](https://github.com/angular/angular/issues/3149)
-
-
-### BREAKING CHANGES
-
-*     Pipes.append has been renamed into Pipes.extend.
-    Pipes.extend prepends pipe factories instead of appending them.
-
-* S:
-- shadow dom emulation no longer
-  supports the `<content>` tag. Use the new `<ng-content>` instead
-  (works with all shadow dom strategies).
-- removed `DomRenderer.setViewRootNodes` and `AppViewManager.getComponentView`
-  -> use `DomRenderer.getNativeElementSync(elementRef)` and change shadow dom directly
-- the `Renderer` interface has changed:
-  * `createView` now also has to support sub views
-  * the notion of a container has been removed. Instead, the renderer has
-    to implement methods to attach views next to elements or other views.
-  * a RenderView now contains multiple RenderFragments. Fragments
-    are used to move DOM nodes around.
-Internal changes / design changes:
-- Introduce notion of view fragments on render side
-- DomProtoViews and DomViews on render side are merged,
-  AppProtoViews are not merged, AppViews are partially merged
-  (they share arrays with the other merged AppViews but we keep
-  individual AppView instances for now).
-- DomProtoViews always have a `<template>` element as root
-  * needed for storing subviews
-  * we have less chunks of DOM to clone now
-- remove fake ElementBinder / Bound element for root text bindings
-  and model them explicitly. This removes a lot of special cases we had!
-- AppView shares data with nested component views
-- some methods in AppViewManager (create, hydrate, dehydrate) are iterative now
-  * now possible as we have all child AppViews / ElementRefs already in an array!
-
-
-
-<a name="2.0.0-alpha.31"></a>
-# 2.0.0-alpha.31 (2015-07-14)
-
-
-### Bug Fixes
-
-* **build:** clang-format ([df877a7](https://github.com/angular/angular/commit/df877a7))
-* **build:** reduce the deploy upload. ([4264bd3](https://github.com/angular/angular/commit/4264bd3))
-* **build:** remove the travis deploy step, which is broken. ([206c9bd](https://github.com/angular/angular/commit/206c9bd))
-* **compiler:** keep `DOM.hasProperty` in sync between browser and transformer. ([b3a763a](https://github.com/angular/angular/commit/b3a763a)), closes [#2984](https://github.com/angular/angular/issues/2984) [#2981](https://github.com/angular/angular/issues/2981)
-* **css_shim:** fixes multiple uses of polyfill-unscoped-rule. ([749d043](https://github.com/angular/angular/commit/749d043))
-* **di:** do not use exceptions to detect if reflection is enabled ([a621046](https://github.com/angular/angular/commit/a621046))
-* **di:** hostInjector and viewInjector support nested arrays ([0ed5dd0](https://github.com/angular/angular/commit/0ed5dd0))
-* **di:** removed default visibility ([04baa46](https://github.com/angular/angular/commit/04baa46))
-* **example:** add missing todo ([1427d73](https://github.com/angular/angular/commit/1427d73))
-* **package.json:** move some deps into dev deps. ([546a8f9](https://github.com/angular/angular/commit/546a8f9)), closes [#2448](https://github.com/angular/angular/issues/2448)
-* **router:** ensure that page refresh with hash URLs works ([c177d88](https://github.com/angular/angular/commit/c177d88)), closes [#2920](https://github.com/angular/angular/issues/2920)
-* **router:** export lifecycle hooks in bundle ([97ef1c2](https://github.com/angular/angular/commit/97ef1c2))
-* **router:** fix broken `HashLocationStrategy` string issue for dart ([d6dadc6](https://github.com/angular/angular/commit/d6dadc6))
-* **transform:** handle multiple interfaces in directive processor ([ac50ffc](https://github.com/angular/angular/commit/ac50ffc)), closes [#2941](https://github.com/angular/angular/issues/2941)
-* **transformer:** Event getters now use property name not event name ([cf103de](https://github.com/angular/angular/commit/cf103de))
-* **transformer:** fix 'pub build' in examples ([6258929](https://github.com/angular/angular/commit/6258929))
-* **tsconfig:** target should be lower case ([0792f1a](https://github.com/angular/angular/commit/0792f1a)), closes [#2938](https://github.com/angular/angular/issues/2938)
-
-### Features
-
-* **build:** Allow building in windows without admin priviledges ([f1f5784](https://github.com/angular/angular/commit/f1f5784)), closes [#2873](https://github.com/angular/angular/issues/2873)
-* **forms:** changed all form directives to have basic control attributes ([3f7ebde](https://github.com/angular/angular/commit/3f7ebde))
-* **license:** include license files in dev and dev.sfx bundles ([1eab4f5](https://github.com/angular/angular/commit/1eab4f5))
-* **pipes:** add date pipe ([b716046](https://github.com/angular/angular/commit/b716046)), closes [#2877](https://github.com/angular/angular/issues/2877)
-* **pipes:** add number (decimal, percent, currency) pipes ([3143d18](https://github.com/angular/angular/commit/3143d18))
-* **pipes:** add static append method to Pipes ([1eebcea](https://github.com/angular/angular/commit/1eebcea)), closes [#2901](https://github.com/angular/angular/issues/2901)
-* upgrade clang-format to v1.0.28. ([45994a5](https://github.com/angular/angular/commit/45994a5))
-* **query:** initial implementation of view query. ([7ee6963](https://github.com/angular/angular/commit/7ee6963)), closes [#1935](https://github.com/angular/angular/issues/1935)
-* **router:** introduce matrix params ([5677bf7](https://github.com/angular/angular/commit/5677bf7)), closes [#2774](https://github.com/angular/angular/issues/2774) [#2989](https://github.com/angular/angular/issues/2989)
-* **router:** lifecycle hooks ([a9a552c](https://github.com/angular/angular/commit/a9a552c)), closes [#2640](https://github.com/angular/angular/issues/2640)
-* **test:** add test bundle ([71c65b4](https://github.com/angular/angular/commit/71c65b4))
-* **zone:** add "on event done" zone hook ([0e28297](https://github.com/angular/angular/commit/0e28297))
-
-
-### BREAKING CHANGES
-
-*     Directives will use the Unbounded visibility by default, whereas before the change they used Self
-
-
-
-<a name="2.0.0-alpha.30"></a>
-# 2.0.0-alpha.30 (2015-07-08)
-
-
-### Bug Fixes
-
-* **.d.ts:** correct ComponentAnnotation inheritance ([12a427e](https://github.com/angular/angular/commit/12a427e)), closes [#2356](https://github.com/angular/angular/issues/2356)
-* **Http:** add support for headers ([883b506](https://github.com/angular/angular/commit/883b506))
-* **angular2.d.ts:** show typing for Component, etc ([b10d7a2](https://github.com/angular/angular/commit/b10d7a2))
-* **change_detection:** do not coalesce records with different directive indices ([d277442](https://github.com/angular/angular/commit/d277442))
-* **change_detection:** throw ChangeDetectionError in JIT mode ([c2efa23](https://github.com/angular/angular/commit/c2efa23))
-* **compiler:** detect and strip data- prefix from bindings ([cd65fc2](https://github.com/angular/angular/commit/cd65fc2)), closes [#2687](https://github.com/angular/angular/issues/2687) [#2719](https://github.com/angular/angular/issues/2719)
-* **di:** injecting null causes a cyclic dependency ([d1393b0](https://github.com/angular/angular/commit/d1393b0))
-* handle errors w/o file information. ([e69af1a](https://github.com/angular/angular/commit/e69af1a))
-* **forms:** Remove cyclic dependency ([e5405e4](https://github.com/angular/angular/commit/e5405e4)), closes [#2856](https://github.com/angular/angular/issues/2856)
-* **router:** allow generating links with numeric params ([d828664](https://github.com/angular/angular/commit/d828664))
-* **router:** child routers should delegate navigation to the root router ([1c94c32](https://github.com/angular/angular/commit/1c94c32))
-* **transformer:** Fix string interpolation for bindings. ([311b477](https://github.com/angular/angular/commit/311b477))
-* **transformer:** Put paramater data in the same order as the reflected version. ([2b45bd2](https://github.com/angular/angular/commit/2b45bd2))
-* **transformer:** Support prefixed annotations in the transformer. ([9e1158d](https://github.com/angular/angular/commit/9e1158d))
-
-### Features
-
-* upgrade t2dart to 0.6.8. ([d381c5f](https://github.com/angular/angular/commit/d381c5f))
-* **NgStyle:** Export NgStyle in angular2/directives ([edf5053](https://github.com/angular/angular/commit/edf5053)), closes [#2878](https://github.com/angular/angular/issues/2878)
-* **router:** support deep-linking to siblings ([286a249](https://github.com/angular/angular/commit/286a249)), closes [#2807](https://github.com/angular/angular/issues/2807)
-* **transformer:** Support @Injectable() on static functions ([7986e7c](https://github.com/angular/angular/commit/7986e7c))
-* **typings:** mark void methods in angular2.d.ts ([a56d33d](https://github.com/angular/angular/commit/a56d33d))
-
-
-
-<a name="2.0.0-alpha.29"></a>
-# 2.0.0-alpha.29 (2015-07-01)
-
-
-### Bug Fixes
-
-* **Router:** mark Pipeline and RouteRegistry as Injectable ([eea989b](https://github.com/angular/angular/commit/eea989b)), closes [#2755](https://github.com/angular/angular/issues/2755)
-* **build:** Reduce rx typings to what we actually require. ([8bab6dd](https://github.com/angular/angular/commit/8bab6dd))
-* **build:** add missing return types now enforced by linter ([4489199](https://github.com/angular/angular/commit/4489199))
-* **build:** fix paths in `test.typings` task ([1c8a589](https://github.com/angular/angular/commit/1c8a589))
-* **bundle:** don’t bundle traceur/reflect into benchpress ([da4de21](https://github.com/angular/angular/commit/da4de21))
-* **bundle:** don’t bundle traceur/reflect into benchpress - amended change ([d629ed7](https://github.com/angular/angular/commit/d629ed7))
-* **change detectors:** Fix deduping of protos in transformed dart mode. ([73a939e](https://github.com/angular/angular/commit/73a939e))
-* **compiler:** don't trigger duplicated directives ([0598226](https://github.com/angular/angular/commit/0598226)), closes [#2756](https://github.com/angular/angular/issues/2756) [#2568](https://github.com/angular/angular/issues/2568)
-* export top-level pipe factories as const ([393f703](https://github.com/angular/angular/commit/393f703))
-* **docs:** link to clang-format ([f1cf529](https://github.com/angular/angular/commit/f1cf529))
-* **docs:** to run js test 'gulp docs' is needed ([3e65037](https://github.com/angular/angular/commit/3e65037)), closes [#2762](https://github.com/angular/angular/issues/2762)
-* **dynamic_component_loader:** check whether the dynamically loaded component has already been destroyed ([d6cef88](https://github.com/angular/angular/commit/d6cef88)), closes [#2748](https://github.com/angular/angular/issues/2748) [#2767](https://github.com/angular/angular/issues/2767)
-* **transformer:** Add getters for `events`. ([5a21dc5](https://github.com/angular/angular/commit/5a21dc5))
-* **transformer:** Don't hang on bad urls and log better errors ([d037c08](https://github.com/angular/angular/commit/d037c08))
-* **transformer:** Fix annotation_matcher for NgForm directive. ([9c76850](https://github.com/angular/angular/commit/9c76850))
-* **typings:** Minor issues preventing angular2.d.ts from working in TS 1.4. ([7a4a3c8](https://github.com/angular/angular/commit/7a4a3c8))
-
-### Features
-
-* **NgStyle:** add new NgStyle directive ([b50edfd](https://github.com/angular/angular/commit/b50edfd)), closes [#2665](https://github.com/angular/angular/issues/2665)
-* **async:** added PromiseWrapper.wrap ([b688dee](https://github.com/angular/angular/commit/b688dee))
-* **benchpress:** initial support for firefox ([0949a4b](https://github.com/angular/angular/commit/0949a4b)), closes [#2419](https://github.com/angular/angular/issues/2419)
-* **build:** add tslint to the build. ([bc585f2](https://github.com/angular/angular/commit/bc585f2))
-* upgrade clang-format and gulp-clang-format. ([1f7296c](https://github.com/angular/angular/commit/1f7296c))
-* **di:** changed InstantiationError to print the original stack ([eb0fd79](https://github.com/angular/angular/commit/eb0fd79))
-* **di:** removed app injector ([f0e962c](https://github.com/angular/angular/commit/f0e962c))
-* **facade:** add ListWrapper.toJSON method ([2335075](https://github.com/angular/angular/commit/2335075))
-* **http:** refactor library to work in dart ([55bf0e5](https://github.com/angular/angular/commit/55bf0e5)), closes [#2415](https://github.com/angular/angular/issues/2415)
-* **lang:** added originalException and originalStack to BaseException ([56245c6](https://github.com/angular/angular/commit/56245c6))
-* **pipes:** add limitTo pipe ([0b50258](https://github.com/angular/angular/commit/0b50258))
-* **pipes:** support arguments in transform function ([600d53c](https://github.com/angular/angular/commit/600d53c))
-* **router:** support deep-linking to anywhere in the app ([f66ce09](https://github.com/angular/angular/commit/f66ce09)), closes [#2642](https://github.com/angular/angular/issues/2642)
-* **transformers:** provide a flag to disable inlining views ([dcdd730](https://github.com/angular/angular/commit/dcdd730)), closes [#2658](https://github.com/angular/angular/issues/2658)
-
-### Performance Improvements
-
-* **Compiler:** do not resolve bindings for cached ProtoViews ([7a7b3a6](https://github.com/angular/angular/commit/7a7b3a6))
-
-
-### BREAKING CHANGES
-
-* THe appInjector property has been removed. Instead use viewInjector or hostInjector.
-
-
-
-<a name="2.0.0-alpha.28"></a>
-# 2.0.0-alpha.28 (2015-06-24)
-
-
-### Bug Fixes
-
-* **ShadowDomStrategy:** always inline import rules ([1c4d233](https://github.com/angular/angular/commit/1c4d233)), closes [#1694](https://github.com/angular/angular/issues/1694)
-* **XHRImpl:** file:/// and IE9 bugs ([cd735c4](https://github.com/angular/angular/commit/cd735c4))
-* **annotations:** swap DirectiveArgs & ComponentArgs ([dcc4bc2](https://github.com/angular/angular/commit/dcc4bc2))
-* **benchmarks:** add waits for naive scrolling benchmark to ensure loading ([d8929c1](https://github.com/angular/angular/commit/d8929c1)), closes [#1706](https://github.com/angular/angular/issues/1706)
-* **benchpress:** do not throw on unkown frame timestamp event ([ed3af5f](https://github.com/angular/angular/commit/ed3af5f)), closes [#2622](https://github.com/angular/angular/issues/2622)
-* **change detection:** preserve memoized results from pure functions ([5beaf6d](https://github.com/angular/angular/commit/5beaf6d))
-* **compiler:** make text interpolation more robust ([9d4111d](https://github.com/angular/angular/commit/9d4111d)), closes [#2591](https://github.com/angular/angular/issues/2591)
-* **docs:** Fix docs for Directive.compileChildren ([9700e80](https://github.com/angular/angular/commit/9700e80))
-* **injectors:** sync injector tree with dom element tree. ([d800d2f](https://github.com/angular/angular/commit/d800d2f))
-* **parse5:** do not try to insert empty text node ([0a2f6dd](https://github.com/angular/angular/commit/0a2f6dd))
-* **render:** fix failing tests in dynamic_component_loader.ts ([6149ce2](https://github.com/angular/angular/commit/6149ce2))
-* **router:** return promise with error handler ([bc798b1](https://github.com/angular/angular/commit/bc798b1))
-* **transformer:** Throw unimplemented errors in HtmlAdapter. ([f9d72bd](https://github.com/angular/angular/commit/f9d72bd)), closes [#2624](https://github.com/angular/angular/issues/2624) [#2627](https://github.com/angular/angular/issues/2627)
-* **views:** remove dynamic component views, free host views, free embedded views ([5dee8e2](https://github.com/angular/angular/commit/5dee8e2)), closes [#2472](https://github.com/angular/angular/issues/2472) [#2339](https://github.com/angular/angular/issues/2339)
-
-### Features
-
-* **CSSClass:** add support for string and array expresions ([8c993dc](https://github.com/angular/angular/commit/8c993dc)), closes [#2025](https://github.com/angular/angular/issues/2025)
-* **compiler:** detect dangling property bindings ([d7b9345](https://github.com/angular/angular/commit/d7b9345)), closes [#2598](https://github.com/angular/angular/issues/2598)
-* **element_injector:** support multiple injectables with the same token ([c899b0a](https://github.com/angular/angular/commit/c899b0a))
-* **host:** limits host properties to renames ([92ffc46](https://github.com/angular/angular/commit/92ffc46))
-* **mock:** add mock module and bundle ([2932377](https://github.com/angular/angular/commit/2932377)), closes [#2325](https://github.com/angular/angular/issues/2325)
-* **query:** added support for querying by var bindings ([b0e2ebd](https://github.com/angular/angular/commit/b0e2ebd))
-* **render:** don’t use the reflector for setting properties ([0a51ccb](https://github.com/angular/angular/commit/0a51ccb)), closes [#2637](https://github.com/angular/angular/issues/2637)
-* add constructors without type arguments. ([35e882e](https://github.com/angular/angular/commit/35e882e))
-* remove MapWrapper.clear(). ([9413620](https://github.com/angular/angular/commit/9413620))
-* remove MapWrapper.contains(). ([dfd3091](https://github.com/angular/angular/commit/dfd3091))
-* remove MapWrapper.create()/get()/set(). ([be7ac9f](https://github.com/angular/angular/commit/be7ac9f))
-* **router:** add support for hash-based location ([a67f231](https://github.com/angular/angular/commit/a67f231)), closes [#2555](https://github.com/angular/angular/issues/2555)
-* update clang-format to 1.0.21. ([254e58c](https://github.com/angular/angular/commit/254e58c))
-* upgrade ts2dart to 0.6.4. ([58b38c9](https://github.com/angular/angular/commit/58b38c9))
-* **router:** enforce usage of ... syntax for parent to child component routes ([2d2ae9b](https://github.com/angular/angular/commit/2d2ae9b))
-* **transformers:** inline styleUrls to view directive ([f2ef90b](https://github.com/angular/angular/commit/f2ef90b)), closes [#2566](https://github.com/angular/angular/issues/2566)
-* **typings:** add typing specs ([24646e7](https://github.com/angular/angular/commit/24646e7))
-
-
-### BREAKING CHANGES
-
-* S:
-- host actions don't take an expression as value any more but only a method name,
-  and assumes to get an array via the EventEmitter with the method arguments.
-- Renderer.setElementProperty does not take `style.`/... prefixes any more.
-  Use the new methods `Renderer.setElementAttribute`, ... instead
-Part of #2476
-
-* compiler will throw on binding to non-existing properties.
-Till now it was possible to have a binding to a non-existing property,
-ex.: `<div [foo]="exp">`. From now on this is compilation error - any
-property binding needs to have at least one associated property:
-eaither on an HTML element or on any directive associated with a
-given element (directives' properites need to be declared using the
-`properties` field in the `@Directive` / `@Component` annotation).
-
-* - `Compiler.compile` has been removed, the only way to compile
-  components dynamically is via `Compiler.compileInHost`
-- `DynamicComponentLoader.loadIntoExistingLocation` has changed:
-  * renamed into `loadIntoLocation`
-  * will always create the host element as well
-  * requires an element with a variable inside of the host component view
-    next to which it will load new component.
-- `DynamicComponentLoader.loadNextToExistingLocation` was renamed into
-  `DynamicComponentLoader.loadNextToLocation`
-- `DynamicComponentLoader.loadIntoNewLocation` is removed
-  * use `DynamicComponentLoader.loadNextToLocation` instead
-    and then move the view nodes
-    manually around via `DomRenderer.getRootNodes()`
-- `AppViewManager.{create,destroy}Free{Host,Embedded}View` was removed
-  * use `AppViewManager.createViewInContainer` and then move the view nodes
-    manually around via `DomRenderer.getRootNodes()`
-- `Renderer.detachFreeView` was removed. Use `DomRenderer.getRootNodes()`
-  to get the root nodes of a view and detach them manually.
-
-
-
-<a name="2.0.0-alpha.27"></a>
-# 2.0.0-alpha.27 (2015-06-17)
-
-
-### Bug Fixes
-
-* **Compiler:** fix text nodes after content tags ([d599fd3](https://github.com/angular/angular/commit/d599fd3)), closes [#2095](https://github.com/angular/angular/issues/2095)
-* **DirectiveMetadata:** add support for events, changeDetection ([b4e82b8](https://github.com/angular/angular/commit/b4e82b8))
-* **JsonPipe:** always transform to json ([e77710a](https://github.com/angular/angular/commit/e77710a))
-* **Parser:** Parse pipes in arguments ([f974532](https://github.com/angular/angular/commit/f974532)), closes [#1680](https://github.com/angular/angular/issues/1680)
-* **ShadowDom:** fix emulation integration spec to test all 3 strategies ([6e38515](https://github.com/angular/angular/commit/6e38515)), closes [#2546](https://github.com/angular/angular/issues/2546)
-* **analzyer:** removed unused imports ([902759e](https://github.com/angular/angular/commit/902759e))
-* **benchmarks:** Do not apply the angular transformer to e2e tests ([cee2682](https://github.com/angular/angular/commit/cee2682)), closes [#2454](https://github.com/angular/angular/issues/2454)
-* **bootstrap:** temporary disable jit change detection because of a bug in handling pure functio ([9908def](https://github.com/angular/angular/commit/9908def))
-* **broccoli:** ensure that inputTrees are stable ([928ec1c](https://github.com/angular/angular/commit/928ec1c))
-* **build:** Minify files for angular2.min.js bundle ([76797df](https://github.com/angular/angular/commit/76797df))
-* **build:** ensure that asset files are copied over to example directories ([60b97b2](https://github.com/angular/angular/commit/60b97b2))
-* **build:** only pass ts files to ts2dart transpilation. ([b5431e4](https://github.com/angular/angular/commit/b5431e4))
-* **bundle:** makes interfaces.ts non-empty when transpiled. ([83e99fc](https://github.com/angular/angular/commit/83e99fc))
-* **change detect:** Fix bug in JIT change detectors ([e0fbd4b](https://github.com/angular/angular/commit/e0fbd4b))
-* **ci:** remove non-existent gulp task from test_e2e_dart ([1cf807c](https://github.com/angular/angular/commit/1cf807c)), closes [#2509](https://github.com/angular/angular/issues/2509)
-* **dart/transform:** Don't set ReflectionCapabilities over an async gap ([d1b35f9](https://github.com/angular/angular/commit/d1b35f9))
-* **dartfmt:** don't break win32 command line limit ([617d693](https://github.com/angular/angular/commit/617d693)), closes [#2420](https://github.com/angular/angular/issues/2420) [#1875](https://github.com/angular/angular/issues/1875)
-* **diffing-broccoli-plugin:** wrapped trees are always stable ([7611f92](https://github.com/angular/angular/commit/7611f92))
-* **docs:** Working generated angular2.d.ts ([7141c15](https://github.com/angular/angular/commit/7141c15))
-* **docs:** ensure no duplicates in alias names of docs ([05d02fa](https://github.com/angular/angular/commit/05d02fa))
-* **docs:** order class members in order of declaration ([ea27704](https://github.com/angular/angular/commit/ea27704)), closes [#2569](https://github.com/angular/angular/issues/2569)
-* **docs:** update link paths in annotations ([dd23bab](https://github.com/angular/angular/commit/dd23bab)), closes [#2452](https://github.com/angular/angular/issues/2452) [#2475](https://github.com/angular/angular/issues/2475)
-* **dynamic_component_loader:** Fix for ts2dart issue ([bbfb4e1](https://github.com/angular/angular/commit/bbfb4e1))
-* **dynamic_component_loader:** implemented dispose for dynamically-loaded components ([21dcfc8](https://github.com/angular/angular/commit/21dcfc8))
-* **element_injector:** changed visibility rules to expose hostInjector of the component to its shadow d ([c51aef9](https://github.com/angular/angular/commit/c51aef9))
-* **forms:** fixed the handling of the select element ([f1541e6](https://github.com/angular/angular/commit/f1541e6))
-* **forms:** fixed the selector of NgRequiredValidator ([35197ac](https://github.com/angular/angular/commit/35197ac))
-* **forms:** getError does not work without path ([a858f6a](https://github.com/angular/angular/commit/a858f6a))
-* **forms:** updated form examples to contain select elements ([c34cb01](https://github.com/angular/angular/commit/c34cb01))
-* **life_cycle:** throw when recursively reentering LifeCycle.tick ([af35ab5](https://github.com/angular/angular/commit/af35ab5))
-* **locals:** improved an error message ([4eb8c9b](https://github.com/angular/angular/commit/4eb8c9b))
-* Class factory now adds annotations ([bc9e482](https://github.com/angular/angular/commit/bc9e482))
-* Improve error message on missing dependency ([2ccc65d](https://github.com/angular/angular/commit/2ccc65d))
-* add types for ts2dart's façade handling. ([f3d7418](https://github.com/angular/angular/commit/f3d7418))
-* compare strings with StringWrapper.equals ([633cf63](https://github.com/angular/angular/commit/633cf63))
-* corrected var/# parsing in template ([a418397](https://github.com/angular/angular/commit/a418397)), closes [#2084](https://github.com/angular/angular/issues/2084)
-* declare var global. ([1346660](https://github.com/angular/angular/commit/1346660))
-* improve type of TreeNode.children. ([c3c2ad1](https://github.com/angular/angular/commit/c3c2ad1))
-* improve type safety by typing `refs`. ([4ae7df2](https://github.com/angular/angular/commit/4ae7df2))
-* include error message in the stack trace ([8d081ea](https://github.com/angular/angular/commit/8d081ea))
-* increase the stack frame size for tests ([ab8eb4f](https://github.com/angular/angular/commit/ab8eb4f))
-* makes NgModel work in strict mode ([eb3586d](https://github.com/angular/angular/commit/eb3586d))
-* **ng_zone:** updated zone not to run onTurnDown when invoking run synchronously from onTurnDo ([15dab7c](https://github.com/angular/angular/commit/15dab7c))
-* **npm:** update scripts and readme for npm packages. ([8923103](https://github.com/angular/angular/commit/8923103)), closes [#2377](https://github.com/angular/angular/issues/2377)
-* **router:** avoid two slash values between the baseHref and the path ([cdc7b03](https://github.com/angular/angular/commit/cdc7b03))
-* rename FORWARD_REF to forwardRef in the Angular code base. ([c4ecbf0](https://github.com/angular/angular/commit/c4ecbf0))
-* **router:** do not prepend the root URL with a starting slash ([e372cc7](https://github.com/angular/angular/commit/e372cc7))
-* **router:** ensure that root URL redirect doesn't redirect non-root URLs ([73d1525](https://github.com/angular/angular/commit/73d1525)), closes [#2221](https://github.com/angular/angular/issues/2221)
-* **router:** rethrow exceptions ([5782f06](https://github.com/angular/angular/commit/5782f06)), closes [#2391](https://github.com/angular/angular/issues/2391)
-* **selector:** select by attribute independent of value and order ([9bad70b](https://github.com/angular/angular/commit/9bad70b)), closes [#2513](https://github.com/angular/angular/issues/2513)
-* **shadow_dom:** moves the imported nodes into the correct location. ([92d5658](https://github.com/angular/angular/commit/92d5658))
-* **shrinkwrap:** restore fsevents dependency ([833048f](https://github.com/angular/angular/commit/833048f)), closes [#2511](https://github.com/angular/angular/issues/2511)
-* **view:** local variables override local variables set by ng-for ([d8e2795](https://github.com/angular/angular/commit/d8e2795))
-
-### Features
-
-* **AstTranformer:** add support for missing nodes ([da60381](https://github.com/angular/angular/commit/da60381))
-* **BaseRequestOptions:** add merge method to make copies of options ([93596df](https://github.com/angular/angular/commit/93596df))
-* **Directive:** Have a single Directive.host which mimics HTML ([f3b4937](https://github.com/angular/angular/commit/f3b4937)), closes [#2268](https://github.com/angular/angular/issues/2268)
-* **ElementInjector:** throw if multiple directives define the same host injectable ([6a6b43d](https://github.com/angular/angular/commit/6a6b43d))
-* **Events:** allow a different event vs field name ([29c72ab](https://github.com/angular/angular/commit/29c72ab)), closes [#2272](https://github.com/angular/angular/issues/2272) [#2344](https://github.com/angular/angular/issues/2344)
-* **FakeAsync:** check pending timers at the end of fakeAsync in Dart ([53694eb](https://github.com/angular/angular/commit/53694eb))
-* **Http:** add Http class ([b68e561](https://github.com/angular/angular/commit/b68e561)), closes [#2530](https://github.com/angular/angular/issues/2530)
-* **Parser:** implement Unparser ([331a051](https://github.com/angular/angular/commit/331a051)), closes [#1949](https://github.com/angular/angular/issues/1949) [#2395](https://github.com/angular/angular/issues/2395)
-* **Parser:** support if statements in actions ([7d32879](https://github.com/angular/angular/commit/7d32879)), closes [#2022](https://github.com/angular/angular/issues/2022)
-* **View:** add support for styleUrls and styles ([ac3e624](https://github.com/angular/angular/commit/ac3e624)), closes [#2382](https://github.com/angular/angular/issues/2382)
-* **benchpress:** add mean frame time metric ([6834c49](https://github.com/angular/angular/commit/6834c49)), closes [#2474](https://github.com/angular/angular/issues/2474)
-* **benchpress:** more smoothness metrics ([35589a6](https://github.com/angular/angular/commit/35589a6))
-* **broccoli:** add diffing MergeTrees plugin ([4ee3fda](https://github.com/angular/angular/commit/4ee3fda)), closes [#1815](https://github.com/angular/angular/issues/1815) [#2064](https://github.com/angular/angular/issues/2064)
-* **broccoli:** improve merge-trees plugin and add "overwrite" option ([dc8dac7](https://github.com/angular/angular/commit/dc8dac7))
-* **build:** add `test.unit.dartvm` for a faster roundtrip of dartvm tests ([46eeee6](https://github.com/angular/angular/commit/46eeee6))
-* **change detect:** Throw on attempts to use dehydrated detector ([b6e95bb](https://github.com/angular/angular/commit/b6e95bb))
-* **dart/change_detect:** Add type to ChangeDetector context ([5298055](https://github.com/angular/angular/commit/5298055)), closes [#2070](https://github.com/angular/angular/issues/2070)
-* **dart/transform:** Add onInit and onCheck hooks in Dart ([17c6d6a](https://github.com/angular/angular/commit/17c6d6a))
-* **dart/transform:** Allow absolute urls in templates ([a187c78](https://github.com/angular/angular/commit/a187c78))
-* **dart/transform:** Record Type interfaces ([dc6e7eb](https://github.com/angular/angular/commit/dc6e7eb)), closes [#2204](https://github.com/angular/angular/issues/2204)
-* **dart/transform:** Use the best available Change Detectors ([8e3bf39](https://github.com/angular/angular/commit/8e3bf39)), closes [#502](https://github.com/angular/angular/issues/502)
-* **diffing-broccoli-plugin:** support multiple inputTrees ([41ae8e7](https://github.com/angular/angular/commit/41ae8e7)), closes [#1815](https://github.com/angular/angular/issues/1815) [#2064](https://github.com/angular/angular/issues/2064)
-* **e2e:** added e2e tests for forms ([552d1ed](https://github.com/angular/angular/commit/552d1ed))
-* **facade:** add isMap method ([548f3dd](https://github.com/angular/angular/commit/548f3dd))
-* **forms:** added hasError and getError methods to all controls ([1a4d237](https://github.com/angular/angular/commit/1a4d237))
-* **forms:** changed forms to capture submit events and fires synthetic ng-submit events ([5fc23ca](https://github.com/angular/angular/commit/5fc23ca))
-* **forms:** export validator directives as part of formDirectives ([73bce40](https://github.com/angular/angular/commit/73bce40))
-* **forms:** set exportAs to form for all form related directives ([e7e82cb](https://github.com/angular/angular/commit/e7e82cb))
-* **forms.ts:** formInjectables with FormBuilder ([a6cb86b](https://github.com/angular/angular/commit/a6cb86b)), closes [#2367](https://github.com/angular/angular/issues/2367)
-* adjust formatting for clang-format v1.0.19. ([a6e7123](https://github.com/angular/angular/commit/a6e7123))
-* allow Type.annotations = Component(...).View(...) ([b2c6694](https://github.com/angular/angular/commit/b2c6694)), closes [#2577](https://github.com/angular/angular/issues/2577)
-* support decorator chaining and class creation in ES5 ([c3ae34f](https://github.com/angular/angular/commit/c3ae34f)), closes [#2534](https://github.com/angular/angular/issues/2534)
-* update ts2dart to 0.6.1. ([9613772](https://github.com/angular/angular/commit/9613772))
-* **http:** add basic http service ([2156810](https://github.com/angular/angular/commit/2156810)), closes [#2028](https://github.com/angular/angular/issues/2028)
-* **query:** adds support for descendants and more list apis. ([355ab5b](https://github.com/angular/angular/commit/355ab5b))
-* **query:** notify on changes ([5bfcca2](https://github.com/angular/angular/commit/5bfcca2))
-* **router:** add routing to async components ([cd95e07](https://github.com/angular/angular/commit/cd95e07))
-* **router:** allow configuring app base href via token ([cab1d0e](https://github.com/angular/angular/commit/cab1d0e))
-* **transform:** update for Directive.host ([591f742](https://github.com/angular/angular/commit/591f742))
-* **transformers:** updated transformers ([e5419fe](https://github.com/angular/angular/commit/e5419fe))
-* **view:** added support for exportAs, so any directive can be assigned to a variable ([69b75b7](https://github.com/angular/angular/commit/69b75b7))
-* upgrade to clang-format v1.0.19. ([1c2abbc](https://github.com/angular/angular/commit/1c2abbc))
-
-### Performance Improvements
-
-* **RouterLink:** use hostListeners for click ([92f1af8](https://github.com/angular/angular/commit/92f1af8)), closes [#2401](https://github.com/angular/angular/issues/2401)
-* **render:** don't create property setters if not needed ([4f27611](https://github.com/angular/angular/commit/4f27611))
-* **render:** don’t create an intermediate element array in renderer ([9cd510a](https://github.com/angular/angular/commit/9cd510a))
-* **render:** only create `LightDom` instances if the element has children ([ca09701](https://github.com/angular/angular/commit/ca09701))
-* **render:** precompute # bound text nodes and root nodes in `DomProtoView` ([24e647e](https://github.com/angular/angular/commit/24e647e))
-
-
-### BREAKING CHANGES
-
-* By default Query only queries direct children.
-
-* Before
-    @Directive({
-      hostListeners: {'event': 'statement'},
-      hostProperties: {'expression': 'hostProp'},
-      hostAttributes: {'attr': 'value'},
-      hostActions: {'action': 'statement'}
-    })
-After
-    @Directive({
-      host: {
-        '(event)': 'statement',
-        '[hostProp]': 'expression'  // k & v swapped
-        'attr': 'value',
-        '@action': 'statement'
-      }
-    })
-
-* no longer cache ref
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 434dd9aa4a..9819baeb6d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -17,15 +17,15 @@ Help us keep Angular open and inclusive. Please read and follow our [Code of Con
 
 ## <a name="question"></a> Got a Question or Problem?
 
-Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [StackOverflow](https://stackoverflow.com/questions/tagged/angular) where the questions should be tagged with tag `angular`.
+Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [Stack Overflow](https://stackoverflow.com/questions/tagged/angular) where the questions should be tagged with tag `angular`.
 
-StackOverflow is a much better place to ask questions since:
+Stack Overflow is a much better place to ask questions since:
 
-- there are thousands of people willing to help on StackOverflow
+- there are thousands of people willing to help on Stack Overflow
 - questions and answers stay available for public viewing so your question / answer might help someone else
-- StackOverflow's voting system assures that the best answers are prominently visible.
+- Stack Overflow's voting system assures that the best answers are prominently visible.
 
-To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
+To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Overflow.
 
 If you would like to chat about the question in real-time, you can reach out via [our gitter channel][gitter].
 
@@ -198,8 +198,7 @@ Must be one of the following:
 * **fix**: A bug fix
 * **perf**: A code change that improves performance
 * **refactor**: A code change that neither fixes a bug nor adds a feature
-* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
-  semi-colons, etc)
+* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 * **test**: Adding missing tests or correcting existing tests
 
 ### Scope
@@ -207,6 +206,7 @@ The scope should be the name of the npm package affected (as perceived by person
 
 The following is the list of supported scopes:
 
+* **animations**
 * **common**
 * **compiler**
 * **compiler-cli**
@@ -223,7 +223,7 @@ The following is the list of supported scopes:
 * **upgrade**
 * **tsc-wrapped**
 
-There is currently few exception to the "use package name" rule:
+There are currently a few exceptions to the "use package name" rule:
 
 * **packaging**: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc.
 * **changelog**: used for updating the release notes in CHANGELOG.md
diff --git a/README.md b/README.md
index 86542919b2..8929d18552 100644
--- a/README.md
+++ b/README.md
@@ -3,22 +3,21 @@
 [![Join the chat at https://gitter.im/angular/angular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular/angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Issue Stats](http://issuestats.com/github/angular/angular/badge/pr?style=flat)](http://issuestats.com/github/angular/angular)
 [![Issue Stats](http://issuestats.com/github/angular/angular/badge/issue?style=flat)](http://issuestats.com/github/angular/angular)
-[![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://badge.fury.io/js/%40angular%2Fcore)
+[![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://www.npmjs.com/@angular/core)
+
 
 [![Sauce Test Status](https://saucelabs.com/browser-matrix/angular2-ci.svg)](https://saucelabs.com/u/angular2-ci)
+
 *Safari (7+), iOS (7+), Edge (14) and IE mobile (11) are tested on [BrowserStack][browserstack].*
 
-Angular
-=========
-
-Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript (JS) and other languages.
+# Angular
 
+Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages.
 
 ## Quickstart
 
 [Get started in 5 minutes][quickstart].
 
-
 ## Want to help?
 
 Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our
diff --git a/WORKSPACE b/WORKSPACE
new file mode 100644
index 0000000000..ba15d08389
--- /dev/null
+++ b/WORKSPACE
@@ -0,0 +1,17 @@
+load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
+
+git_repository(
+   name = "build_bazel_rules_typescript",
+   remote = "https://github.com/bazelbuild/rules_typescript.git",
+   tag = "0.0.5",
+)
+
+load("@build_bazel_rules_typescript//:defs.bzl", "node_repositories")
+
+node_repositories(package_json = "//:package.json")
+
+git_repository(
+    name = "build_bazel_rules_angular",
+    remote = "https://github.com/bazelbuild/rules_angular.git",
+    tag = "0.0.1",
+)
\ No newline at end of file
diff --git a/aio/.angular-cli.json b/aio/.angular-cli.json
index 8c73878547..6b3ef2df2f 100644
--- a/aio/.angular-cli.json
+++ b/aio/.angular-cli.json
@@ -9,10 +9,11 @@
       "outDir": "dist",
       "assets": [
         "assets",
-        "content",
+        "generated",
         "app/search/search-worker.js",
         "favicon.ico",
-        "pwa-manifest.json"
+        "pwa-manifest.json",
+        "google385281288605d160.html"
       ],
       "index": "index.html",
       "main": "main.ts",
@@ -21,16 +22,16 @@
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "aio",
-      "serviceWorker": true,
+      "serviceWorker": false,
       "styles": [
         "styles.scss"
       ],
       "scripts": [
-
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
+        "stage": "environments/environment.stage.ts",
         "prod": "environments/environment.prod.ts"
       }
     }
diff --git a/aio/.firebaserc b/aio/.firebaserc
deleted file mode 100644
index a44c716187..0000000000
--- a/aio/.firebaserc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "projects": {
-    "staging": "aio-staging"
-  }
-}
diff --git a/aio/.gitignore b/aio/.gitignore
index 268ac3aa39..4ac6ca5434 100644
--- a/aio/.gitignore
+++ b/aio/.gitignore
@@ -3,7 +3,7 @@
 # compiled output
 /dist
 /out-tsc
-/src/content
+/src/generated
 /tmp
 
 # dependencies
@@ -38,7 +38,11 @@ yarn-error.log
 # e2e
 /e2e/*.js
 /e2e/*.map
+protractor-results*.txt
 
 # System Files
 .DS_Store
 Thumbs.db
+
+# copied dependencies
+src/assets/js/lunr*
\ No newline at end of file
diff --git a/aio/README.md b/aio/README.md
index 36aaa07df5..b00ed4b115 100644
--- a/aio/README.md
+++ b/aio/README.md
@@ -1,31 +1,113 @@
-# Site
+# Angular documentation project (https://angular.io)
 
-This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.26.
+Everything in this folder is part of the documentation project. This includes
 
-## Development server
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+* the web site for displaying the documentation
+* the dgeni configuration for converting source files to rendered files that can be viewed in the web site.
+* the tooling for setting up examples for development; and generating plunkers and zip files from the examples.
 
-## Code scaffolding
+## Developer tasks
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+We use `yarn` to manage the dependencies and to run build tasks.
+You should run all these tasks from the `angular/aio` folder.
+Here are the most important tasks you might need to use:
 
-## Build
+* `yarn` - install all the dependencies.
+* `yarn setup` - Install all the dependencies, boilerplate, plunkers, zips and runs dgeni on the docs.
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+* `yarn start` - run a development web server that watches the files; then builds the doc-viewer and reloads the page, as necessary.
+* `yarn serve-and-sync` - run both the `docs-watch` and `start` in the same console.
+* `yarn lint` - check that the doc-viewer code follows our style rules.
+* `yarn test` - watch all the source files, for the doc-viewer, and run all the unit tests when any change.
+* `yarn e2e` - run all the e2e tests for the doc-viewer.
 
-## Running unit tests
+* `yarn docs` - generate all the docs from the source files.
+* `yarn docs-watch` - watch the Angular source and the docs files and run a short-circuited doc-gen for the docs that changed.
+* `yarn docs-lint` - check that the doc gen code follows our style rules.
+* `yarn docs-test` - run the unit tests for the doc generation code.
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally.
+* `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
+* `yarn generate-plunkers` - generate the plunker files that are used by the `live-example` tags in the docs.
+* `yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs.
 
-## Running end-to-end tests
+* `yarn example-e2e` - run all e2e tests for examples
+  - `yarn example-e2e -- --setup` - force webdriver update & other setup, then run tests
+  - `yarn example-e2e -- --filter=foo` - limit e2e tests to those containing the word "foo"
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
+* `yarn build-ie-polyfills` - generates a js file of polyfills that can be loaded in Internet Explorer.
 
-## Deploying to GitHub Pages
+## Using ServiceWorker locally
 
-Run `ng github-pages:deploy` to deploy to GitHub Pages.
+Since abb36e3cb, running `yarn start -- --prod` will no longer set up the ServiceWorker, which
+would require manually running `yarn sw-manifest` and `yarn sw-copy` (something that is not possible
+with webpack serving the files from memory).
 
-## Further help
+If you want to test ServiceWorker locally, you can use `yarn build` and serve the files in `dist/`
+with `yarn http-server -- dist -p 4200`.
 
-To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+For more details see #16745.
+
+
+## Guide to authoring
+
+There are two types of content in the documentatation:
+
+* **API docs**: descriptions of the modules, classes, interfaces, decorators, etc that make up the Angular platform.
+API docs are generated directly from the source code.
+The source code is contained in TypeScript files, located in the `angular/packages` folder.
+Each API item may have a preceding comment, which contains JSDoc style tags and content.
+The content is written in markdown.
+
+* **Other content**: guides, tutorials, and other marketing material.
+All other content is written using markdown in text files, located in the `angular/aio/content` folder.
+More specifically, there are sub-folders that contain particular types of content: guides, tutorial and marketing.
+
+We use the [dgeni](https://github.com/angular/dgeni) tool to convert these files into docs that can be viewed in the doc-viewer.
+
+The [Authors Style Guide](https://angular.io/guide/docs-style-guide) prescribes guidelines for
+writing guide pages, explains how to use the documentation classes and components, and how to markup sample source code to produce code snippets.
+
+### Generating the complete docs
+
+The main task for generating the docs is `yarn docs`. This will process all the source files (API and other),
+extracting the documentation and generating JSON files that can be consumed by the doc-viewer.
+
+### Partial doc generation for editors
+
+Full doc generation can take up to one minute. That's too slow for efficient document creation and editing.
+
+You can make small changes in a smart editor that displays formatted markdown:
+>In VS Code, _Cmd-K, V_ opens markdown preview in side pane; _Cmd-B_ toggles left sidebar
+
+You also want to see those changes displayed properly in the doc viewer
+with a quick, edit/view cycle time.
+
+For this purpose, use the `yarn docs-watch` task, which watches for changes to source files and only
+re-processes the the files necessary to generate the docs that are related to the file that has changed.
+Since this task takes shortcuts, it is much faster (often less than 1 second) but it won't produce full
+fidelity content. For example, links to other docs and code examples may not render correctly. This is
+most particularly noticed in links to other docs and in the embedded examples, which may not always render
+correctly.
+
+The general setup is as follows:
+
+* Open a terminal, ensure the dependencies are installed; run an initial doc generation; then start the doc-viewer:
+
+```bash
+yarn
+yarn docs
+yarn start
+```
+
+* Open a second terminal and start watching the docs
+
+```bash
+yarn docs-watch
+```
+
+* Open a browser at https://localhost:4200/ and navigate to the document on which you want to work.
+You can automatically open the browser by using `yarn start -- -o` in the first terminal.
+
+* Make changes to the page's associated doc or example files. Every time a file is saved, the doc will
+be regenerated, the app will rebuild and the page will reload.
diff --git a/aio/aio-builds-setup/dockerbuild/Dockerfile b/aio/aio-builds-setup/dockerbuild/Dockerfile
index e75e104940..b45f9c220d 100644
--- a/aio/aio-builds-setup/dockerbuild/Dockerfile
+++ b/aio/aio-builds-setup/dockerbuild/Dockerfile
@@ -29,6 +29,8 @@ ARG      AIO_NGINX_PORT_HTTPS=443
 ARG TEST_AIO_NGINX_PORT_HTTPS=4433
 ARG      AIO_REPO_SLUG=angular/angular
 ARG TEST_AIO_REPO_SLUG=test-repo/test-slug
+ARG      AIO_TRUSTED_PR_LABEL="aio: preview"
+ARG TEST_AIO_TRUSTED_PR_LABEL="aio: preview"
 ARG      AIO_UPLOAD_HOSTNAME=upload.localhost
 ARG TEST_AIO_UPLOAD_HOSTNAME=upload.localhost
 ARG      AIO_UPLOAD_MAX_SIZE=20971520
@@ -48,9 +50,11 @@ ENV AIO_BUILDS_DIR=$AIO_BUILDS_DIR                     TEST_AIO_BUILDS_DIR=$TEST
     AIO_REPO_SLUG=$AIO_REPO_SLUG                       TEST_AIO_REPO_SLUG=$TEST_AIO_REPO_SLUG                       \
     AIO_SCRIPTS_JS_DIR=/usr/share/aio-scripts-js                                                                    \
     AIO_SCRIPTS_SH_DIR=/usr/share/aio-scripts-sh                                                                    \
+    AIO_TRUSTED_PR_LABEL=$AIO_TRUSTED_PR_LABEL         TEST_AIO_TRUSTED_PR_LABEL=$TEST_AIO_TRUSTED_PR_LABEL         \
     AIO_UPLOAD_HOSTNAME=$AIO_UPLOAD_HOSTNAME           TEST_AIO_UPLOAD_HOSTNAME=$TEST_AIO_UPLOAD_HOSTNAME           \
     AIO_UPLOAD_MAX_SIZE=$AIO_UPLOAD_MAX_SIZE           TEST_AIO_UPLOAD_MAX_SIZE=$TEST_AIO_UPLOAD_MAX_SIZE           \
     AIO_UPLOAD_PORT=$AIO_UPLOAD_PORT                   TEST_AIO_UPLOAD_PORT=$TEST_AIO_UPLOAD_PORT                   \
+    AIO_WWW_USER=www-data                                                                                           \
     NODE_ENV=production
 
 
@@ -63,6 +67,7 @@ RUN apt-get update -y && apt-get install -y curl
 RUN curl --silent --show-error --location https://deb.nodesource.com/setup_6.x | bash -
 RUN curl --silent --show-error https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
 RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
+RUN echo "deb http://ftp.debian.org/debian jessie-backports main" | tee /etc/apt/sources.list.d/backports.list
 
 
 # Install packages
@@ -71,14 +76,19 @@ RUN apt-get update -y && apt-get install -y \
     cron \
     dnsmasq \
     nano \
-    nginx \
     nodejs \
     openssl \
     rsyslog \
     yarn
+RUN apt-get install -t jessie-backports -y nginx
 RUN yarn global add pm2@2
 
 
+# Set up log rotation
+COPY logrotate/* /etc/logrotate.d/
+RUN chmod 0644 /etc/logrotate.d/*
+
+
 # Set up cronjobs
 COPY cronjobs/aio-builds-cleanup /etc/cron.d/
 RUN chmod 0744 /etc/cron.d/aio-builds-cleanup
@@ -104,31 +114,31 @@ RUN update-ca-certificates
 
 
 # Set up nginx (for production and testing)
-RUN rm /etc/nginx/sites-enabled/*
+RUN sed -i -E "s|^user\s+\S+;|user $AIO_WWW_USER;|" /etc/nginx/nginx.conf
+RUN rm -f /etc/nginx/conf.d/*
+RUN rm -f /etc/nginx/sites-enabled/*
 
-COPY nginx/aio-builds.conf /etc/nginx/sites-available/aio-builds-prod.conf
-RUN sed -i "s|{{\$AIO_BUILDS_DIR}}|$AIO_BUILDS_DIR|g" /etc/nginx/sites-available/aio-builds-prod.conf
-RUN sed -i "s|{{\$AIO_DOMAIN_NAME}}|$AIO_DOMAIN_NAME|g" /etc/nginx/sites-available/aio-builds-prod.conf
-RUN sed -i "s|{{\$AIO_LOCALCERTS_DIR}}|$AIO_LOCALCERTS_DIR|g" /etc/nginx/sites-available/aio-builds-prod.conf
-RUN sed -i "s|{{\$AIO_NGINX_LOGS_DIR}}|$AIO_NGINX_LOGS_DIR|g" /etc/nginx/sites-available/aio-builds-prod.conf
-RUN sed -i "s|{{\$AIO_NGINX_PORT_HTTP}}|$AIO_NGINX_PORT_HTTP|g" /etc/nginx/sites-available/aio-builds-prod.conf
-RUN sed -i "s|{{\$AIO_NGINX_PORT_HTTPS}}|$AIO_NGINX_PORT_HTTPS|g" /etc/nginx/sites-available/aio-builds-prod.conf
-RUN sed -i "s|{{\$AIO_UPLOAD_HOSTNAME}}|$AIO_UPLOAD_HOSTNAME|g" /etc/nginx/sites-available/aio-builds-prod.conf
-RUN sed -i "s|{{\$AIO_UPLOAD_MAX_SIZE}}|$AIO_UPLOAD_MAX_SIZE|g" /etc/nginx/sites-available/aio-builds-prod.conf
-RUN sed -i "s|{{\$AIO_UPLOAD_PORT}}|$AIO_UPLOAD_PORT|g" /etc/nginx/sites-available/aio-builds-prod.conf
-RUN ln -s /etc/nginx/sites-available/aio-builds-prod.conf /etc/nginx/sites-enabled/aio-builds-prod.conf
+COPY nginx/aio-builds.conf /etc/nginx/conf.d/aio-builds-prod.conf
+RUN sed -i "s|{{\$AIO_BUILDS_DIR}}|$AIO_BUILDS_DIR|g" /etc/nginx/conf.d/aio-builds-prod.conf
+RUN sed -i "s|{{\$AIO_DOMAIN_NAME}}|$AIO_DOMAIN_NAME|g" /etc/nginx/conf.d/aio-builds-prod.conf
+RUN sed -i "s|{{\$AIO_LOCALCERTS_DIR}}|$AIO_LOCALCERTS_DIR|g" /etc/nginx/conf.d/aio-builds-prod.conf
+RUN sed -i "s|{{\$AIO_NGINX_LOGS_DIR}}|$AIO_NGINX_LOGS_DIR|g" /etc/nginx/conf.d/aio-builds-prod.conf
+RUN sed -i "s|{{\$AIO_NGINX_PORT_HTTP}}|$AIO_NGINX_PORT_HTTP|g" /etc/nginx/conf.d/aio-builds-prod.conf
+RUN sed -i "s|{{\$AIO_NGINX_PORT_HTTPS}}|$AIO_NGINX_PORT_HTTPS|g" /etc/nginx/conf.d/aio-builds-prod.conf
+RUN sed -i "s|{{\$AIO_UPLOAD_HOSTNAME}}|$AIO_UPLOAD_HOSTNAME|g" /etc/nginx/conf.d/aio-builds-prod.conf
+RUN sed -i "s|{{\$AIO_UPLOAD_MAX_SIZE}}|$AIO_UPLOAD_MAX_SIZE|g" /etc/nginx/conf.d/aio-builds-prod.conf
+RUN sed -i "s|{{\$AIO_UPLOAD_PORT}}|$AIO_UPLOAD_PORT|g" /etc/nginx/conf.d/aio-builds-prod.conf
 
-COPY nginx/aio-builds.conf /etc/nginx/sites-available/aio-builds-test.conf
-RUN sed -i "s|{{\$AIO_BUILDS_DIR}}|$TEST_AIO_BUILDS_DIR|g" /etc/nginx/sites-available/aio-builds-test.conf
-RUN sed -i "s|{{\$AIO_DOMAIN_NAME}}|$TEST_AIO_DOMAIN_NAME|g" /etc/nginx/sites-available/aio-builds-test.conf
-RUN sed -i "s|{{\$AIO_LOCALCERTS_DIR}}|$TEST_AIO_LOCALCERTS_DIR|g" /etc/nginx/sites-available/aio-builds-test.conf
-RUN sed -i "s|{{\$AIO_NGINX_LOGS_DIR}}|$TEST_AIO_NGINX_LOGS_DIR|g" /etc/nginx/sites-available/aio-builds-test.conf
-RUN sed -i "s|{{\$AIO_NGINX_PORT_HTTP}}|$TEST_AIO_NGINX_PORT_HTTP|g" /etc/nginx/sites-available/aio-builds-test.conf
-RUN sed -i "s|{{\$AIO_NGINX_PORT_HTTPS}}|$TEST_AIO_NGINX_PORT_HTTPS|g" /etc/nginx/sites-available/aio-builds-test.conf
-RUN sed -i "s|{{\$AIO_UPLOAD_HOSTNAME}}|$TEST_AIO_UPLOAD_HOSTNAME|g" /etc/nginx/sites-available/aio-builds-test.conf
-RUN sed -i "s|{{\$AIO_UPLOAD_MAX_SIZE}}|$TEST_AIO_UPLOAD_MAX_SIZE|g" /etc/nginx/sites-available/aio-builds-test.conf
-RUN sed -i "s|{{\$AIO_UPLOAD_PORT}}|$TEST_AIO_UPLOAD_PORT|g" /etc/nginx/sites-available/aio-builds-test.conf
-RUN ln -s /etc/nginx/sites-available/aio-builds-test.conf /etc/nginx/sites-enabled/aio-builds-test.conf
+COPY nginx/aio-builds.conf /etc/nginx/conf.d/aio-builds-test.conf
+RUN sed -i "s|{{\$AIO_BUILDS_DIR}}|$TEST_AIO_BUILDS_DIR|g" /etc/nginx/conf.d/aio-builds-test.conf
+RUN sed -i "s|{{\$AIO_DOMAIN_NAME}}|$TEST_AIO_DOMAIN_NAME|g" /etc/nginx/conf.d/aio-builds-test.conf
+RUN sed -i "s|{{\$AIO_LOCALCERTS_DIR}}|$TEST_AIO_LOCALCERTS_DIR|g" /etc/nginx/conf.d/aio-builds-test.conf
+RUN sed -i "s|{{\$AIO_NGINX_LOGS_DIR}}|$TEST_AIO_NGINX_LOGS_DIR|g" /etc/nginx/conf.d/aio-builds-test.conf
+RUN sed -i "s|{{\$AIO_NGINX_PORT_HTTP}}|$TEST_AIO_NGINX_PORT_HTTP|g" /etc/nginx/conf.d/aio-builds-test.conf
+RUN sed -i "s|{{\$AIO_NGINX_PORT_HTTPS}}|$TEST_AIO_NGINX_PORT_HTTPS|g" /etc/nginx/conf.d/aio-builds-test.conf
+RUN sed -i "s|{{\$AIO_UPLOAD_HOSTNAME}}|$TEST_AIO_UPLOAD_HOSTNAME|g" /etc/nginx/conf.d/aio-builds-test.conf
+RUN sed -i "s|{{\$AIO_UPLOAD_MAX_SIZE}}|$TEST_AIO_UPLOAD_MAX_SIZE|g" /etc/nginx/conf.d/aio-builds-test.conf
+RUN sed -i "s|{{\$AIO_UPLOAD_PORT}}|$TEST_AIO_UPLOAD_PORT|g" /etc/nginx/conf.d/aio-builds-test.conf
 
 
 # Set up pm2
diff --git a/aio/aio-builds-setup/dockerbuild/logrotate/aio-misc b/aio/aio-builds-setup/dockerbuild/logrotate/aio-misc
new file mode 100644
index 0000000000..165009cd55
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/logrotate/aio-misc
@@ -0,0 +1,9 @@
+/var/log/aio/clean-up.log /var/log/aio/init.log /var/log/aio/verify-setup.log {
+  compress
+  create
+  delaycompress
+  missingok
+  monthly
+  notifempty
+  rotate 6
+}
diff --git a/aio/aio-builds-setup/dockerbuild/logrotate/aio-nginx b/aio/aio-builds-setup/dockerbuild/logrotate/aio-nginx
new file mode 100644
index 0000000000..59d434243e
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/logrotate/aio-nginx
@@ -0,0 +1,13 @@
+/var/log/aio/nginx/*.log /var/log/aio/nginx-test/*.log {
+  compress
+  create
+  delaycompress
+  missingok
+  monthly
+  notifempty
+  rotate 6
+  sharedscripts
+  postrotate
+    service nginx rotate >/dev/null 2>&1
+  endscript
+}
diff --git a/aio/aio-builds-setup/dockerbuild/logrotate/aio-upload-server b/aio/aio-builds-setup/dockerbuild/logrotate/aio-upload-server
new file mode 100644
index 0000000000..d3f2fc6188
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/logrotate/aio-upload-server
@@ -0,0 +1,9 @@
+/var/log/aio/upload-server-*.log {
+  compress
+  copytruncate
+  delaycompress
+  missingok
+  monthly
+  notifempty
+  rotate 6
+}
diff --git a/aio/aio-builds-setup/dockerbuild/nginx/aio-builds.conf b/aio/aio-builds-setup/dockerbuild/nginx/aio-builds.conf
index 65f38a633c..ec2a244f48 100644
--- a/aio/aio-builds-setup/dockerbuild/nginx/aio-builds.conf
+++ b/aio/aio-builds-setup/dockerbuild/nginx/aio-builds.conf
@@ -15,18 +15,24 @@ server {
 
 # Serve PR-preview requests
 server {
-  server_name "~^pr(?<pr>[1-9][0-9]*)-(?<sha>[0-9a-f]{40})\.";
+  server_name "~^pr(?<pr>[1-9][0-9]*)-(?<sha>[0-9a-f]{7,40})\.";
 
-  listen {{$AIO_NGINX_PORT_HTTPS}} ssl;
-  listen [::]:{{$AIO_NGINX_PORT_HTTPS}} ssl;
+  listen {{$AIO_NGINX_PORT_HTTPS}} ssl http2;
+  listen [::]:{{$AIO_NGINX_PORT_HTTPS}} ssl http2;
 
-  ssl_certificate     {{$AIO_LOCALCERTS_DIR}}/{{$AIO_DOMAIN_NAME}}.crt;
-  ssl_certificate_key {{$AIO_LOCALCERTS_DIR}}/{{$AIO_DOMAIN_NAME}}.key;
+  ssl_certificate           {{$AIO_LOCALCERTS_DIR}}/{{$AIO_DOMAIN_NAME}}.crt;
+  ssl_certificate_key       {{$AIO_LOCALCERTS_DIR}}/{{$AIO_DOMAIN_NAME}}.key;
+  ssl_prefer_server_ciphers on;
+  ssl_ciphers               EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
 
   root             {{$AIO_BUILDS_DIR}}/$pr/$sha;
   disable_symlinks on from=$document_root;
   index            index.html;
 
+  gzip            on;
+  gzip_comp_level 7;
+  gzip_types      *;
+
   access_log {{$AIO_NGINX_LOGS_DIR}}/access.log;
   error_log  {{$AIO_NGINX_LOGS_DIR}}/error.log;
 
@@ -43,11 +49,13 @@ server {
 server {
   server_name _;
 
-  listen {{$AIO_NGINX_PORT_HTTPS}} ssl default_server;
-  listen [::]:{{$AIO_NGINX_PORT_HTTPS}} ssl;
+  listen {{$AIO_NGINX_PORT_HTTPS}} ssl http2 default_server;
+  listen [::]:{{$AIO_NGINX_PORT_HTTPS}} ssl http2;
 
-  ssl_certificate     {{$AIO_LOCALCERTS_DIR}}/{{$AIO_DOMAIN_NAME}}.crt;
-  ssl_certificate_key {{$AIO_LOCALCERTS_DIR}}/{{$AIO_DOMAIN_NAME}}.key;
+  ssl_certificate           {{$AIO_LOCALCERTS_DIR}}/{{$AIO_DOMAIN_NAME}}.crt;
+  ssl_certificate_key       {{$AIO_LOCALCERTS_DIR}}/{{$AIO_DOMAIN_NAME}}.key;
+  ssl_prefer_server_ciphers on;
+  ssl_ciphers               EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
 
   access_log {{$AIO_NGINX_LOGS_DIR}}/access.log;
   error_log  {{$AIO_NGINX_LOGS_DIR}}/error.log;
@@ -80,6 +88,21 @@ server {
     resolver 127.0.0.1;
   }
 
+  # Notify about PR changes
+  location "~^/pr-updated/?$" {
+    if ($request_method != "POST") {
+      add_header Allow "POST";
+      return 405;
+    }
+
+    proxy_pass_request_headers on;
+    proxy_redirect             off;
+    proxy_method               POST;
+    proxy_pass                 http://{{$AIO_UPLOAD_HOSTNAME}}:{{$AIO_UPLOAD_PORT}}$request_uri;
+
+    resolver 127.0.0.1;
+  }
+
   # Everything else
   location / {
     return 404;
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/clean-up/build-cleaner.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/clean-up/build-cleaner.ts
index 64e2a33f7e..3a23b19096 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/clean-up/build-cleaner.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/clean-up/build-cleaner.ts
@@ -2,6 +2,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as shell from 'shelljs';
+import {HIDDEN_DIR_PREFIX} from '../common/constants';
 import {GithubPullRequests} from '../common/github-pull-requests';
 import {assertNotMissingOrEmpty} from '../common/utils';
 
@@ -31,8 +32,9 @@ export class BuildCleaner {
         }
 
         const buildNumbers = files.
-          map(Number).       // Convert string to number
-          filter(Boolean);   // Ignore NaN (or 0), because they are not builds
+          map(name => name.replace(HIDDEN_DIR_PREFIX, '')).   // Remove the "hidden dir" prefix
+          map(Number).                                        // Convert string to number
+          filter(Boolean);                                    // Ignore NaN (or 0), because they are not builds
 
         resolve(buildNumbers);
       });
@@ -49,9 +51,11 @@ export class BuildCleaner {
 
   protected removeDir(dir: string) {
     try {
-      // Undocumented signature (see https://github.com/shelljs/shelljs/pull/663).
-      (shell as any).chmod('-R', 'a+w', dir);
-      shell.rm('-rf', dir);
+      if (shell.test('-d', dir)) {
+        // Undocumented signature (see https://github.com/shelljs/shelljs/pull/663).
+        (shell as any).chmod('-R', 'a+w', dir);
+        shell.rm('-rf', dir);
+      }
     } catch (err) {
       console.error(`ERROR: Unable to remove '${dir}' due to:`, err);
     }
@@ -64,8 +68,14 @@ export class BuildCleaner {
     console.log(`Open pull requests: ${openPrNumbers.length}`);
     console.log(`Removing ${toRemove.length} build(s): ${toRemove.join(', ')}`);
 
+    // Try removing public dirs.
     toRemove.
       map(num => path.join(this.buildsDir, String(num))).
       forEach(dir => this.removeDir(dir));
+
+    // Try removing hidden dirs.
+    toRemove.
+      map(num => path.join(this.buildsDir, HIDDEN_DIR_PREFIX + String(num))).
+      forEach(dir => this.removeDir(dir));
   }
 }
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/constants.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/constants.ts
new file mode 100644
index 0000000000..c5064c5dfc
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/constants.ts
@@ -0,0 +1,3 @@
+// Constants
+export const HIDDEN_DIR_PREFIX = 'hidden--';
+export const SHORT_SHA_LEN = 7;
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-api.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-api.ts
index aec1ad74af..820944cb5f 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-api.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-api.ts
@@ -63,7 +63,7 @@ export class GithubApi {
         return items;
       }
 
-      return this.getPaginated(pathname, baseParams, currentPage + 1).then(moreItems => [...items, ...moreItems]);
+      return this.getPaginated<T>(pathname, baseParams, currentPage + 1).then(moreItems => [...items, ...moreItems]);
     });
   }
 
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-pull-requests.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-pull-requests.ts
index 3a53259774..0075b17f98 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-pull-requests.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-pull-requests.ts
@@ -6,6 +6,7 @@ import {GithubApi} from './github-api';
 export interface PullRequest  {
   number: number;
   user: {login: string};
+  labels: {name: string}[];
 }
 
 export type PullRequestState = 'all' | 'closed' | 'open';
@@ -30,7 +31,8 @@ export class GithubPullRequests extends GithubApi {
   }
 
   public fetch(pr: number): Promise<PullRequest> {
-    return this.get<PullRequest>(`/repos/${this.repoSlug}/pulls/${pr}`);
+    // Using the `/issues/` URL, because the `/pulls/` one does not provide labels.
+    return this.get<PullRequest>(`/repos/${this.repoSlug}/issues/${pr}`);
   }
 
   public fetchAll(state: PullRequestState = 'all'): Promise<PullRequest[]> {
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts
index 4197da7ab3..183bf9a196 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts
@@ -4,8 +4,9 @@ import {EventEmitter} from 'events';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as shell from 'shelljs';
+import {HIDDEN_DIR_PREFIX, SHORT_SHA_LEN} from '../common/constants';
 import {assertNotMissingOrEmpty} from '../common/utils';
-import {CreatedBuildEvent} from './build-events';
+import {ChangedPrVisibilityEvent, CreatedBuildEvent} from './build-events';
 import {UploadError} from './upload-error';
 
 // Classes
@@ -17,16 +18,21 @@ export class BuildCreator extends EventEmitter {
   }
 
   // Methods - Public
-  public create(pr: string, sha: string, archivePath: string): Promise<any> {
-    const prDir = path.join(this.buildsDir, pr);
+  public create(pr: string, sha: string, archivePath: string, isPublic: boolean): Promise<void> {
+    // Use only part of the SHA for more readable URLs.
+    sha = sha.substr(0, SHORT_SHA_LEN);
+
+    const {newPrDir: prDir} = this.getCandidatePrDirs(pr, isPublic);
     const shaDir = path.join(prDir, sha);
     let dirToRemoveOnError: string;
 
-    return Promise.
-      all([this.exists(prDir), this.exists(shaDir)]).
+    return Promise.resolve().
+      // If the same PR exists with different visibility, update the visibility first.
+      then(() => this.updatePrVisibility(pr, isPublic)).
+      then(() => Promise.all([this.exists(prDir), this.exists(shaDir)])).
       then(([prDirExisted, shaDirExisted]) => {
         if (shaDirExisted) {
-          throw new UploadError(403, `Request to overwrite existing directory: ${shaDir}`);
+          throw new UploadError(409, `Request to overwrite existing directory: ${shaDir}`);
         }
 
         dirToRemoveOnError = prDirExisted ? shaDir : prDir;
@@ -34,7 +40,8 @@ export class BuildCreator extends EventEmitter {
         return Promise.resolve().
           then(() => shell.mkdir('-p', shaDir)).
           then(() => this.extractArchive(archivePath, shaDir)).
-          then(() => this.emit(CreatedBuildEvent.type, new CreatedBuildEvent(+pr, sha)));
+          then(() => this.emit(CreatedBuildEvent.type, new CreatedBuildEvent(+pr, sha, isPublic))).
+          then(() => undefined);
       }).
       catch(err => {
         if (dirToRemoveOnError) {
@@ -49,6 +56,36 @@ export class BuildCreator extends EventEmitter {
       });
   }
 
+  public updatePrVisibility(pr: string, makePublic: boolean): Promise<boolean> {
+    const {oldPrDir: otherVisPrDir, newPrDir: targetVisPrDir} = this.getCandidatePrDirs(pr, makePublic);
+
+    return Promise.
+      all([this.exists(otherVisPrDir), this.exists(targetVisPrDir)]).
+      then(([otherVisPrDirExisted, targetVisPrDirExisted]) => {
+        if (!otherVisPrDirExisted) {
+          // No visibility change: Either the visibility is up-to-date or the PR does not exist.
+          return false;
+        } else if (targetVisPrDirExisted) {
+          // Error: Directories for both visibilities exist.
+          throw new UploadError(409, `Request to move '${otherVisPrDir}' to existing directory '${targetVisPrDir}'.`);
+        }
+
+        // Visibility change: Moving `otherVisPrDir` to `targetVisPrDir`.
+        return Promise.resolve().
+          then(() => shell.mv(otherVisPrDir, targetVisPrDir)).
+          then(() => this.listShasByDate(targetVisPrDir)).
+          then(shas => this.emit(ChangedPrVisibilityEvent.type, new ChangedPrVisibilityEvent(+pr, shas, makePublic))).
+          then(() => true);
+      }).
+      catch(err => {
+        if (!(err instanceof UploadError)) {
+          err = new UploadError(500, `Error while making PR ${pr} ${makePublic ? 'public' : 'hidden'}.\n${err}`);
+        }
+
+        throw err;
+      });
+  }
+
   // Methods - Protected
   protected exists(fileOrDir: string): Promise<boolean> {
     return new Promise(resolve => fs.access(fileOrDir, err => resolve(!err)));
@@ -78,4 +115,26 @@ export class BuildCreator extends EventEmitter {
       });
     });
   }
+
+  protected getCandidatePrDirs(pr: string, isPublic: boolean) {
+    const hiddenPrDir = path.join(this.buildsDir, HIDDEN_DIR_PREFIX + pr);
+    const publicPrDir = path.join(this.buildsDir, pr);
+
+    const oldPrDir = isPublic ? hiddenPrDir : publicPrDir;
+    const newPrDir = isPublic ? publicPrDir : hiddenPrDir;
+
+    return {oldPrDir, newPrDir};
+  }
+
+  protected listShasByDate(inputDir: string): Promise<string[]> {
+    return Promise.resolve().
+      then(() => shell.ls('-l', inputDir) as any as Promise<(fs.Stats & {name: string})[]>).
+      // Keep directories only.
+      // (Also, convert to standard Array - ShellJS provides custom `sort()` method for sorting file contents.)
+      then(items => items.filter(item => item.isDirectory())).
+      // Sort by modification date.
+      then(items => items.sort((a, b) => a.mtime.getTime() - b.mtime.getTime())).
+      // Return directory names.
+      then(items => items.map(item => item.name));
+  }
 }
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-events.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-events.ts
index b1d8b17bbf..39dcbf10eb 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-events.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-events.ts
@@ -1,15 +1,16 @@
 // Classes
-export class BuildEvent {
+export class ChangedPrVisibilityEvent {
+  // Properties - Public, Static
+  public static type = 'pr.changedVisibility';
+
   // Constructor
-  constructor(public type: string, public pr: number, public sha: string) {}
+  constructor(public pr: number, public shas: string[], public isPublic: boolean) {}
 }
 
-export class CreatedBuildEvent extends BuildEvent {
+export class CreatedBuildEvent {
   // Properties - Public, Static
   public static type = 'build.created';
 
   // Constructor
-  constructor(pr: number, sha: string) {
-    super(CreatedBuildEvent.type, pr, sha);
-  }
+  constructor(public pr: number, public sha: string, public isPublic: boolean) {}
 }
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-verifier.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-verifier.ts
index 59c0d9f19a..bfabb47525 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-verifier.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-verifier.ts
@@ -1,6 +1,6 @@
 // Imports
 import * as jwt from 'jsonwebtoken';
-import {GithubPullRequests} from '../common/github-pull-requests';
+import {GithubPullRequests, PullRequest} from '../common/github-pull-requests';
 import {GithubTeams} from '../common/github-teams';
 import {assertNotMissingOrEmpty} from '../common/utils';
 import {UploadError} from './upload-error';
@@ -11,6 +11,12 @@ interface JwtPayload {
   'pull-request': number;
 }
 
+// Enums
+export enum BUILD_VERIFICATION_STATUS {
+  verifiedAndTrusted,
+  verifiedNotTrusted,
+}
+
 // Classes
 export class BuildVerifier {
   // Properties - Protected
@@ -19,27 +25,27 @@ export class BuildVerifier {
 
   // Constructor
   constructor(protected secret: string, githubToken: string, protected repoSlug: string, organization: string,
-              protected allowedTeamSlugs: string[]) {
+              protected allowedTeamSlugs: string[], protected trustedPrLabel: string) {
     assertNotMissingOrEmpty('secret', secret);
     assertNotMissingOrEmpty('githubToken', githubToken);
     assertNotMissingOrEmpty('repoSlug', repoSlug);
     assertNotMissingOrEmpty('organization', organization);
     assertNotMissingOrEmpty('allowedTeamSlugs', allowedTeamSlugs && allowedTeamSlugs.join(''));
+    assertNotMissingOrEmpty('trustedPrLabel', trustedPrLabel);
 
     this.githubPullRequests = new GithubPullRequests(githubToken, repoSlug);
     this.githubTeams = new GithubTeams(githubToken, organization);
   }
 
   // Methods - Public
-  public getPrAuthorTeamMembership(pr: number): Promise<{author: string, isMember: boolean}> {
+  public getPrIsTrusted(pr: number): Promise<boolean> {
     return Promise.resolve().
       then(() => this.githubPullRequests.fetch(pr)).
-      then(prInfo => prInfo.user.login).
-      then(author => this.githubTeams.isMemberBySlug(author, this.allowedTeamSlugs).
-        then(isMember => ({author, isMember})));
+      then(prInfo => this.hasLabel(prInfo, this.trustedPrLabel) ||
+                     this.githubTeams.isMemberBySlug(prInfo.user.login, this.allowedTeamSlugs));
   }
 
-  public verify(expectedPr: number, authHeader: string): Promise<void> {
+  public verify(expectedPr: number, authHeader: string): Promise<BUILD_VERIFICATION_STATUS> {
     return Promise.resolve().
       then(() => this.extractJwtString(authHeader)).
       then(jwtString => this.verifyJwt(expectedPr, jwtString)).
@@ -52,9 +58,13 @@ export class BuildVerifier {
     return input.replace(/^token +/i, '');
   }
 
+  protected hasLabel(prInfo: PullRequest, label: string) {
+    return prInfo.labels.some(labelObj => labelObj.name === label);
+  }
+
   protected verifyJwt(expectedPr: number, token: string): Promise<JwtPayload> {
     return new Promise((resolve, reject) => {
-      jwt.verify(token, this.secret, {issuer: 'Travis CI, GmbH'}, (err, payload) => {
+      jwt.verify(token, this.secret, {issuer: 'Travis CI, GmbH'}, (err, payload: JwtPayload) => {
         if (err) {
           reject(err.message || err);
         } else if (payload.slug !== this.repoSlug) {
@@ -68,11 +78,10 @@ export class BuildVerifier {
     });
   }
 
-  protected verifyPr(pr: number): Promise<void> {
-    return this.getPrAuthorTeamMembership(pr).
-      then(({author, isMember}) => isMember ? Promise.resolve() : Promise.reject(
-        `User '${author}' is not an active member of any of the following teams: ` +
-        `${this.allowedTeamSlugs.join(', ')}`,
-      ));
+  protected verifyPr(pr: number): Promise<BUILD_VERIFICATION_STATUS> {
+    return this.getPrIsTrusted(pr).
+      then(isTrusted => Promise.resolve(isTrusted ?
+          BUILD_VERIFICATION_STATUS.verifiedAndTrusted :
+          BUILD_VERIFICATION_STATUS.verifiedNotTrusted));
   }
 }
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index-preverify-pr.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index-preverify-pr.ts
index cedae675c4..6cc058e61b 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index-preverify-pr.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index-preverify-pr.ts
@@ -12,28 +12,28 @@ function _main() {
   const repoSlug = getEnvVar('AIO_REPO_SLUG');
   const organization = getEnvVar('AIO_GITHUB_ORGANIZATION');
   const allowedTeamSlugs = getEnvVar('AIO_GITHUB_TEAM_SLUGS').split(',');
+  const trustedPrLabel = getEnvVar('AIO_TRUSTED_PR_LABEL');
   const pr = +getEnvVar('AIO_PREVERIFY_PR');
 
-  const buildVerifier = new BuildVerifier(secret, githubToken, repoSlug, organization, allowedTeamSlugs);
+  const buildVerifier = new BuildVerifier(secret, githubToken, repoSlug, organization, allowedTeamSlugs,
+                                          trustedPrLabel);
 
   // Exit codes:
-  // - 0: The PR author is a member.
-  // - 1: The PR author is not a member.
-  // - 2: An error occurred.
-  buildVerifier.getPrAuthorTeamMembership(pr).
-    then(({author, isMember}) => {
-      if (isMember) {
-        process.exit(0);
-      } else {
-        const errorMessage = `User '${author}' is not an active member of any of the following teams: ` +
-                             `${allowedTeamSlugs.join(', ')}`;
-        onError(errorMessage, 1);
+  // - 0: The PR can be automatically trusted (i.e. author belongs to trusted team or PR has the "trusted PR" label).
+  // - 1: An error occurred.
+  // - 2: The PR cannot be automatically trusted.
+  buildVerifier.getPrIsTrusted(pr).
+    then(isTrusted => {
+      if (!isTrusted) {
+        console.warn(
+            `The PR cannot be automatically verified, because it doesn't have the "${trustedPrLabel}" label and the ` +
+            `the author is not an active member of any of the following teams: ${allowedTeamSlugs.join(', ')}`);
       }
-    }).
-    catch(err => onError(err, 2));
-}
 
-function onError(err: string, exitCode: number) {
-  console.error(err);
-  process.exit(exitCode || 1);
+      process.exit(isTrusted ? 0 : 2);
+    }).
+    catch(err => {
+      console.error(err);
+      process.exit(1);
+    });
 }
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index-test.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index-test.ts
deleted file mode 100644
index c9f874671e..0000000000
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index-test.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Imports
-import {GithubPullRequests} from '../common/github-pull-requests';
-import {BuildVerifier} from './build-verifier';
-
-// Run
-// TODO(gkalpak): Add e2e tests to cover these interactions as well.
-GithubPullRequests.prototype.addComment = () => Promise.resolve();
-BuildVerifier.prototype.verify = () => Promise.resolve();
-// tslint:disable-next-line: no-var-requires
-require('./index');
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index.ts
index b442c4c8b2..2fa8275695 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index.ts
@@ -1,6 +1,3 @@
-// TODO(gkalpak): Find more suitable way to run as `www-data`.
-process.setuid('www-data');
-
 // Imports
 import {getEnvVar} from '../common/utils';
 import {uploadServerFactory} from './upload-server-factory';
@@ -13,10 +10,13 @@ const AIO_GITHUB_TEAM_SLUGS = getEnvVar('AIO_GITHUB_TEAM_SLUGS');
 const AIO_GITHUB_TOKEN = getEnvVar('AIO_GITHUB_TOKEN');
 const AIO_PREVIEW_DEPLOYMENT_TOKEN = getEnvVar('AIO_PREVIEW_DEPLOYMENT_TOKEN');
 const AIO_REPO_SLUG = getEnvVar('AIO_REPO_SLUG');
+const AIO_TRUSTED_PR_LABEL = getEnvVar('AIO_TRUSTED_PR_LABEL');
 const AIO_UPLOAD_HOSTNAME = getEnvVar('AIO_UPLOAD_HOSTNAME');
 const AIO_UPLOAD_PORT = +getEnvVar('AIO_UPLOAD_PORT');
+const AIO_WWW_USER = getEnvVar('AIO_WWW_USER');
 
 // Run
+process.setuid(AIO_WWW_USER);   // TODO(gkalpak): Find more suitable way to run as `www-data`.
 _main();
 
 // Functions
@@ -30,6 +30,7 @@ function _main() {
       githubToken: AIO_GITHUB_TOKEN,
       repoSlug: AIO_REPO_SLUG,
       secret: AIO_PREVIEW_DEPLOYMENT_TOKEN,
+      trustedPrLabel: AIO_TRUSTED_PR_LABEL,
     }).
     listen(AIO_UPLOAD_PORT, AIO_UPLOAD_HOSTNAME);
 }
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/upload-server-factory.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/upload-server-factory.ts
index 7f174be45a..48e60e3cc1 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/upload-server-factory.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/upload-server-factory.ts
@@ -1,11 +1,12 @@
 // Imports
+import * as bodyParser from 'body-parser';
 import * as express from 'express';
 import * as http from 'http';
 import {GithubPullRequests} from '../common/github-pull-requests';
 import {assertNotMissingOrEmpty} from '../common/utils';
 import {BuildCreator} from './build-creator';
-import {CreatedBuildEvent} from './build-events';
-import {BuildVerifier} from './build-verifier';
+import {ChangedPrVisibilityEvent, CreatedBuildEvent} from './build-events';
+import {BUILD_VERIFICATION_STATUS, BuildVerifier} from './build-verifier';
 import {UploadError} from './upload-error';
 
 // Constants
@@ -21,6 +22,7 @@ interface UploadServerConfig {
   githubToken: string;
   repoSlug: string;
   secret: string;
+  trustedPrLabel: string;
 }
 
 // Classes
@@ -34,14 +36,16 @@ class UploadServerFactory {
     githubToken,
     repoSlug,
     secret,
+    trustedPrLabel,
   }: UploadServerConfig): http.Server {
     assertNotMissingOrEmpty('domainName', domainName);
 
-    const buildVerifier = new BuildVerifier(secret, githubToken, repoSlug, githubOrganization, githubTeamSlugs);
+    const buildVerifier = new BuildVerifier(secret, githubToken, repoSlug, githubOrganization, githubTeamSlugs,
+                                            trustedPrLabel);
     const buildCreator = this.createBuildCreator(buildsDir, githubToken, repoSlug, domainName);
 
     const middleware = this.createMiddleware(buildVerifier, buildCreator);
-    const httpServer = http.createServer(middleware);
+    const httpServer = http.createServer(middleware as any);
 
     httpServer.on('listening', () => {
       const info = httpServer.address();
@@ -56,12 +60,24 @@ class UploadServerFactory {
                                domainName: string): BuildCreator {
     const buildCreator = new BuildCreator(buildsDir);
     const githubPullRequests = new GithubPullRequests(githubToken, repoSlug);
+    const postPreviewsComment = (pr: number, shas: string[]) => {
+      const body = shas.
+        map(sha => `You can preview ${sha} at https://pr${pr}-${sha}.${domainName}/.`).
+        join('\n');
 
-    buildCreator.on(CreatedBuildEvent.type, ({pr, sha}: CreatedBuildEvent) => {
-      const body = `The angular.io preview for ${sha.slice(0, 7)} is available [here][1].\n\n` +
-                   `[1]: https://pr${pr}-${sha}.${domainName}/`;
+      return githubPullRequests.addComment(pr, body);
+    };
 
-      githubPullRequests.addComment(pr, body);
+    buildCreator.on(CreatedBuildEvent.type, ({pr, sha, isPublic}: CreatedBuildEvent) => {
+      if (isPublic) {
+        postPreviewsComment(pr, [sha]);
+      }
+    });
+
+    buildCreator.on(ChangedPrVisibilityEvent.type, ({pr, shas, isPublic}: ChangedPrVisibilityEvent) => {
+      if (isPublic && shas.length) {
+        postPreviewsComment(pr, shas);
+      }
     });
 
     return buildCreator;
@@ -69,6 +85,7 @@ class UploadServerFactory {
 
   protected createMiddleware(buildVerifier: BuildVerifier, buildCreator: BuildCreator): express.Express {
     const middleware = express();
+    const jsonParser = bodyParser.json();
 
     middleware.get(/^\/create-build\/([1-9][0-9]*)\/([0-9a-f]{40})\/?$/, (req, res) => {
       const pr = req.params[0];
@@ -80,17 +97,33 @@ class UploadServerFactory {
         this.throwRequestError(401, `Missing or empty '${AUTHORIZATION_HEADER}' header`, req);
       } else if (!archive) {
         this.throwRequestError(400, `Missing or empty '${X_FILE_HEADER}' header`, req);
+      } else {
+        Promise.resolve().
+          then(() => buildVerifier.verify(+pr, authHeader)).
+          then(verStatus => verStatus === BUILD_VERIFICATION_STATUS.verifiedAndTrusted).
+          then(isPublic => buildCreator.create(pr, sha, archive, isPublic).
+            then(() => res.sendStatus(isPublic ? 201 : 202))).
+          catch(err => this.respondWithError(res, err));
       }
-
-      buildVerifier.
-        verify(+pr, authHeader).
-        then(() => buildCreator.create(pr, sha, archive)).
-        then(() => res.sendStatus(201)).
-        catch(err => this.respondWithError(res, err));
     });
     middleware.get(/^\/health-check\/?$/, (_req, res) => res.sendStatus(200));
-    middleware.get('*', req => this.throwRequestError(404, 'Unknown resource', req));
-    middleware.all('*', req => this.throwRequestError(405, 'Unsupported method', req));
+    middleware.post(/^\/pr-updated\/?$/, jsonParser, (req, res) => {
+      const {action, number: prNo}: {action?: string, number?: number} = req.body;
+      const visMayHaveChanged = !action || (action === 'labeled') || (action === 'unlabeled');
+
+      if (!visMayHaveChanged) {
+        res.sendStatus(200);
+      } else if (!prNo) {
+        this.throwRequestError(400, `Missing or empty 'number' field`, req);
+      } else {
+        Promise.resolve().
+          then(() => buildVerifier.getPrIsTrusted(prNo)).
+          then(isPublic => buildCreator.updatePrVisibility(String(prNo), isPublic)).
+          then(() => res.sendStatus(200)).
+          catch(err => this.respondWithError(res, err));
+      }
+    });
+    middleware.all('*', req => this.throwRequestError(404, 'Unknown resource', req));
     middleware.use((err: any, _req: any, res: express.Response, _next: any) => this.respondWithError(res, err));
 
     return middleware;
@@ -109,7 +142,10 @@ class UploadServerFactory {
   }
 
   protected throwRequestError(status: number, error: string, req: express.Request) {
-    throw new UploadError(status, `${error} in request: ${req.method} ${req.originalUrl}`);
+    const message = `${error} in request: ${req.method} ${req.originalUrl}` +
+                    (!req.body ? '' : ` ${JSON.stringify(req.body)}`);
+
+    throw new UploadError(status, message);
   }
 }
 
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/constants.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/constants.ts
new file mode 100644
index 0000000000..92e7f15a31
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/constants.ts
@@ -0,0 +1,16 @@
+// Using the values below, we can fake the response of the corresponding methods in tests. This is
+// necessary, because the test upload-server will be running as a separate node process, so we will
+// not have direct access to the code (e.g. for mocking).
+// (See also 'lib/verify-setup/start-test-upload-server.ts'.)
+
+/* tslint:disable: variable-name */
+
+// Special values to be used as `authHeader` in `BuildVerifier#verify()`.
+export const BV_verify_error = 'FAKE_VERIFICATION_ERROR';
+export const BV_verify_verifiedNotTrusted = 'FAKE_VERIFIED_NOT_TRUSTED';
+
+// Special values to be used as `pr` in `BuildVerifier#getPrIsTrusted()`.
+export const BV_getPrIsTrusted_error = 32203;
+export const BV_getPrIsTrusted_notTrusted = 72457;
+
+/* tslint:enable: variable-name */
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/helper.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/helper.ts
index ae119395dd..2fcbb05960 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/helper.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/helper.ts
@@ -4,10 +4,10 @@ import * as fs from 'fs';
 import * as http from 'http';
 import * as path from 'path';
 import * as shell from 'shelljs';
+import {HIDDEN_DIR_PREFIX, SHORT_SHA_LEN} from '../common/constants';
 import {getEnvVar} from '../common/utils';
 
 // Constans
-const SERVER_USER = 'www-data';
 const TEST_AIO_BUILDS_DIR = getEnvVar('TEST_AIO_BUILDS_DIR');
 const TEST_AIO_NGINX_HOSTNAME = getEnvVar('TEST_AIO_NGINX_HOSTNAME');
 const TEST_AIO_NGINX_PORT_HTTP = +getEnvVar('TEST_AIO_NGINX_PORT_HTTP');
@@ -15,6 +15,7 @@ const TEST_AIO_NGINX_PORT_HTTPS = +getEnvVar('TEST_AIO_NGINX_PORT_HTTPS');
 const TEST_AIO_UPLOAD_HOSTNAME = getEnvVar('TEST_AIO_UPLOAD_HOSTNAME');
 const TEST_AIO_UPLOAD_MAX_SIZE = +getEnvVar('TEST_AIO_UPLOAD_MAX_SIZE');
 const TEST_AIO_UPLOAD_PORT = +getEnvVar('TEST_AIO_UPLOAD_PORT');
+const WWW_USER = getEnvVar('AIO_WWW_USER');
 
 // Interfaces - Types
 export interface CmdResult { success: boolean; err: Error; stdout: string; stderr: string; }
@@ -31,10 +32,10 @@ class Helper {
   public get nginxHostname() { return TEST_AIO_NGINX_HOSTNAME; }
   public get nginxPortHttp() { return TEST_AIO_NGINX_PORT_HTTP; }
   public get nginxPortHttps() { return TEST_AIO_NGINX_PORT_HTTPS; }
-  public get serverUser() { return SERVER_USER; }
   public get uploadHostname() { return TEST_AIO_UPLOAD_HOSTNAME; }
   public get uploadPort() { return TEST_AIO_UPLOAD_PORT; }
   public get uploadMaxSize() { return TEST_AIO_UPLOAD_MAX_SIZE; }
+  public get wwwUser() { return WWW_USER; }
 
   // Properties - Protected
   protected cleanUpFns: CleanUpFn[] = [];
@@ -46,10 +47,16 @@ class Helper {
   // Constructor
   constructor() {
     shell.mkdir('-p', this.buildsDir);
-    shell.exec(`chown -R ${this.serverUser} ${this.buildsDir}`);
+    shell.exec(`chown -R ${this.wwwUser} ${this.buildsDir}`);
   }
 
   // Methods - Public
+  public buildExists(pr: string, sha = '', isPublic = true, legacy = false): boolean {
+    const prDir = this.getPrDir(pr, isPublic);
+    const dir = !sha ? prDir : this.getShaDir(prDir, sha, legacy);
+    return fs.existsSync(dir);
+  }
+
   public cleanUp() {
     while (this.cleanUpFns.length) {
       // Clean-up fns remove themselves from the list.
@@ -62,11 +69,11 @@ class Helper {
   }
 
   public createDummyArchive(pr: string, sha: string, archivePath: string): CleanUpFn {
-    const inputDir = path.join(this.buildsDir, 'uploaded', pr, sha);
+    const inputDir = this.getShaDir(this.getPrDir(`uploaded/${pr}`, true), sha);
     const cmd1 = `tar --create --gzip --directory "${inputDir}" --file "${archivePath}" .`;
-    const cmd2 = `chown ${this.serverUser} ${archivePath}`;
+    const cmd2 = `chown ${this.wwwUser} ${archivePath}`;
 
-    const cleanUpTemp = this.createDummyBuild(`uploaded/${pr}`, sha, true);
+    const cleanUpTemp = this.createDummyBuild(`uploaded/${pr}`, sha, true, true);
     shell.exec(cmd1);
     shell.exec(cmd2);
     cleanUpTemp();
@@ -74,21 +81,21 @@ class Helper {
     return this.createCleanUpFn(() => shell.rm('-rf', archivePath));
   }
 
-  public createDummyBuild(pr: string, sha: string, force = false): CleanUpFn {
-    const prDir = path.join(this.buildsDir, pr);
-    const shaDir = path.join(prDir, sha);
+  public createDummyBuild(pr: string, sha: string, isPublic = true, force = false, legacy = false): CleanUpFn {
+    const prDir = this.getPrDir(pr, isPublic);
+    const shaDir = this.getShaDir(prDir, sha, legacy);
     const idxPath = path.join(shaDir, 'index.html');
     const barPath = path.join(shaDir, 'foo', 'bar.js');
 
     this.writeFile(idxPath, {content: `PR: ${pr} | SHA: ${sha} | File: /index.html`}, force);
     this.writeFile(barPath, {content: `PR: ${pr} | SHA: ${sha} | File: /foo/bar.js`}, force);
-    shell.exec(`chown -R ${this.serverUser} ${prDir}`);
+    shell.exec(`chown -R ${this.wwwUser} ${prDir}`);
 
     return this.createCleanUpFn(() => shell.rm('-rf', prDir));
   }
 
-  public deletePrDir(pr: string) {
-    const prDir = path.join(this.buildsDir, pr);
+  public deletePrDir(pr: string, isPublic = true) {
+    const prDir = this.getPrDir(pr, isPublic);
 
     if (fs.existsSync(prDir)) {
       // Undocumented signature (see https://github.com/shelljs/shelljs/pull/663).
@@ -97,8 +104,22 @@ class Helper {
     }
   }
 
-  public readBuildFile(pr: string, sha: string, relFilePath: string): string {
-    const absFilePath = path.join(this.buildsDir, pr, sha, relFilePath);
+  public getPrDir(pr: string, isPublic: boolean): string {
+    const prDirName = isPublic ? pr : HIDDEN_DIR_PREFIX + pr;
+    return path.join(this.buildsDir, prDirName);
+  }
+
+  public getShaDir(prDir: string, sha: string, legacy = false): string {
+    return path.join(prDir, legacy ? sha : this.getShordSha(sha));
+  }
+
+  public getShordSha(sha: string): string {
+    return sha.substr(0, SHORT_SHA_LEN);
+  }
+
+  public readBuildFile(pr: string, sha: string, relFilePath: string, isPublic = true, legacy = false): string {
+    const shaDir = this.getShaDir(this.getPrDir(pr, isPublic), sha, legacy);
+    const absFilePath = path.join(shaDir, relFilePath);
     return fs.readFileSync(absFilePath, 'utf8');
   }
 
@@ -129,7 +150,8 @@ class Helper {
       const [headers, body] = result.stdout.
         split(/(?:\r?\n){2,}/).
         map(s => s.trim()).
-        slice(-2);
+        slice(-2);   // In case of redirect, discard the previous headers.
+                     // Only keep the last to sections (final headers and body).
 
       if (!result.success) {
         console.log('Stdout:', result.stdout);
@@ -143,8 +165,10 @@ class Helper {
     };
   }
 
-  public writeBuildFile(pr: string, sha: string, relFilePath: string, content: string): CleanUpFn {
-    const absFilePath = path.join(this.buildsDir, pr, sha, relFilePath);
+  public writeBuildFile(pr: string, sha: string, relFilePath: string, content: string, isPublic = true,
+                        legacy = false): CleanUpFn {
+    const shaDir = this.getShaDir(this.getPrDir(pr, isPublic), sha, legacy);
+    const absFilePath = path.join(shaDir, relFilePath);
     return this.writeFile(absFilePath, {content}, true);
   }
 
@@ -166,7 +190,7 @@ class Helper {
       // Create a file with the specified content.
       fs.writeFileSync(filePath, content || '');
     }
-    shell.exec(`chown ${this.serverUser} ${filePath}`);
+    shell.exec(`chown ${this.wwwUser} ${filePath}`);
 
     return this.createCleanUpFn(() => shell.rm('-rf', cleanUpTarget));
   }
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/nginx.e2e.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/nginx.e2e.ts
index 99959c2e44..a3e15992f3 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/nginx.e2e.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/nginx.e2e.ts
@@ -31,111 +31,184 @@ describe(`nginx`, () => {
   });
 
 
-  h.runForAllSupportedSchemes((scheme, port) => describe(`nginx (on ${scheme.toUpperCase()})`, () => {
+  h.runForAllSupportedSchemes((scheme, port) => describe(`(on ${scheme.toUpperCase()})`, () => {
     const hostname = h.nginxHostname;
     const host = `${hostname}:${port}`;
     const pr = '9';
     const sha9 = '9'.repeat(40);
     const sha0 = '0'.repeat(40);
+    const shortSha9 = h.getShordSha(sha9);
+    const shortSha0 = h.getShordSha(sha0);
 
 
     describe(`pr<pr>-<sha>.${host}/*`, () => {
 
-      beforeEach(() => {
-        h.createDummyBuild(pr, sha9);
-        h.createDummyBuild(pr, sha0);
+      describe('(for public builds)', () => {
+
+        beforeEach(() => {
+          h.createDummyBuild(pr, sha9);
+          h.createDummyBuild(pr, sha0);
+        });
+
+
+        it('should return /index.html', done => {
+          const origin = `${scheme}://pr${pr}-${shortSha9}.${host}`;
+          const bodyRegex = new RegExp(`^PR: ${pr} | SHA: ${sha9} | File: /index\\.html$`);
+
+          Promise.all([
+            h.runCmd(`curl -iL ${origin}/index.html`).then(h.verifyResponse(200, bodyRegex)),
+            h.runCmd(`curl -iL ${origin}/`).then(h.verifyResponse(200, bodyRegex)),
+            h.runCmd(`curl -iL ${origin}`).then(h.verifyResponse(200, bodyRegex)),
+          ]).then(done);
+        });
+
+
+        it('should return /index.html (for legacy builds)', done => {
+          const origin = `${scheme}://pr${pr}-${sha9}.${host}`;
+          const bodyRegex = new RegExp(`^PR: ${pr} | SHA: ${sha9} | File: /index\\.html$`);
+
+          h.createDummyBuild(pr, sha9, true, false, true);
+
+          Promise.all([
+            h.runCmd(`curl -iL ${origin}/index.html`).then(h.verifyResponse(200, bodyRegex)),
+            h.runCmd(`curl -iL ${origin}/`).then(h.verifyResponse(200, bodyRegex)),
+            h.runCmd(`curl -iL ${origin}`).then(h.verifyResponse(200, bodyRegex)),
+          ]).then(done);
+        });
+
+
+        it('should return /foo/bar.js', done => {
+          const bodyRegex = new RegExp(`^PR: ${pr} | SHA: ${sha9} | File: /foo/bar\\.js$`);
+
+          h.runCmd(`curl -iL ${scheme}://pr${pr}-${shortSha9}.${host}/foo/bar.js`).
+            then(h.verifyResponse(200, bodyRegex)).
+            then(done);
+        });
+
+
+        it('should return /foo/bar.js (for legacy builds)', done => {
+          const origin = `${scheme}://pr${pr}-${sha9}.${host}`;
+          const bodyRegex = new RegExp(`^PR: ${pr} | SHA: ${sha9} | File: /foo/bar\\.js$`);
+
+          h.createDummyBuild(pr, sha9, true, false, true);
+
+          h.runCmd(`curl -iL ${origin}/foo/bar.js`).
+            then(h.verifyResponse(200, bodyRegex)).
+            then(done);
+        });
+
+
+        it('should respond with 403 for directories', done => {
+          Promise.all([
+            h.runCmd(`curl -iL ${scheme}://pr${pr}-${shortSha9}.${host}/foo/`).then(h.verifyResponse(403)),
+            h.runCmd(`curl -iL ${scheme}://pr${pr}-${shortSha9}.${host}/foo`).then(h.verifyResponse(403)),
+          ]).then(done);
+        });
+
+
+        it('should respond with 404 for unknown paths to files', done => {
+          h.runCmd(`curl -iL ${scheme}://pr${pr}-${shortSha9}.${host}/foo/baz.css`).
+            then(h.verifyResponse(404)).
+            then(done);
+        });
+
+
+        it('should rewrite to \'index.html\' for unknown paths that don\'t look like files', done => {
+          const origin = `${scheme}://pr${pr}-${shortSha9}.${host}`;
+          const bodyRegex = new RegExp(`^PR: ${pr} | SHA: ${sha9} | File: /index\\.html$`);
+
+          Promise.all([
+            h.runCmd(`curl -iL ${origin}/foo/baz`).then(h.verifyResponse(200, bodyRegex)),
+            h.runCmd(`curl -iL ${origin}/foo/baz/`).then(h.verifyResponse(200, bodyRegex)),
+          ]).then(done);
+        });
+
+
+        it('should respond with 404 for unknown PRs/SHAs', done => {
+          const otherPr = 54321;
+          const otherShortSha = h.getShordSha('8'.repeat(40));
+
+          Promise.all([
+            h.runCmd(`curl -iL ${scheme}://pr${pr}9-${shortSha9}.${host}`).then(h.verifyResponse(404)),
+            h.runCmd(`curl -iL ${scheme}://pr${otherPr}-${shortSha9}.${host}`).then(h.verifyResponse(404)),
+            h.runCmd(`curl -iL ${scheme}://pr${pr}-${shortSha9}9.${host}`).then(h.verifyResponse(404)),
+            h.runCmd(`curl -iL ${scheme}://pr${pr}-${otherShortSha}.${host}`).then(h.verifyResponse(404)),
+          ]).then(done);
+        });
+
+
+        it('should respond with 404 if the subdomain format is wrong', done => {
+          Promise.all([
+            h.runCmd(`curl -iL ${scheme}://xpr${pr}-${shortSha9}.${host}`).then(h.verifyResponse(404)),
+            h.runCmd(`curl -iL ${scheme}://prx${pr}-${shortSha9}.${host}`).then(h.verifyResponse(404)),
+            h.runCmd(`curl -iL ${scheme}://xx${pr}-${shortSha9}.${host}`).then(h.verifyResponse(404)),
+            h.runCmd(`curl -iL ${scheme}://p${pr}-${shortSha9}.${host}`).then(h.verifyResponse(404)),
+            h.runCmd(`curl -iL ${scheme}://r${pr}-${shortSha9}.${host}`).then(h.verifyResponse(404)),
+            h.runCmd(`curl -iL ${scheme}://${pr}-${shortSha9}.${host}`).then(h.verifyResponse(404)),
+            h.runCmd(`curl -iL ${scheme}://pr${pr}${shortSha9}.${host}`).then(h.verifyResponse(404)),
+            h.runCmd(`curl -iL ${scheme}://pr${pr}_${shortSha9}.${host}`).then(h.verifyResponse(404)),
+          ]).then(done);
+        });
+
+
+        it('should reject PRs with leading zeros', done => {
+          h.runCmd(`curl -iL ${scheme}://pr0${pr}-${shortSha9}.${host}`).
+            then(h.verifyResponse(404)).
+            then(done);
+        });
+
+
+        it('should accept SHAs with leading zeros (but not trim the zeros)', done => {
+          const bodyRegex9 = new RegExp(`^PR: ${pr} | SHA: ${sha9} | File: /index\\.html$`);
+          const bodyRegex0 = new RegExp(`^PR: ${pr} | SHA: ${sha0} | File: /index\\.html$`);
+
+          Promise.all([
+            h.runCmd(`curl -iL ${scheme}://pr${pr}-0${shortSha9}.${host}`).then(h.verifyResponse(404)),
+            h.runCmd(`curl -iL ${scheme}://pr${pr}-${shortSha9}.${host}`).then(h.verifyResponse(200, bodyRegex9)),
+            h.runCmd(`curl -iL ${scheme}://pr${pr}-${shortSha0}.${host}`).then(h.verifyResponse(200, bodyRegex0)),
+          ]).then(done);
+        });
+
       });
 
 
-      it('should return /index.html', done => {
-        const origin = `${scheme}://pr${pr}-${sha9}.${host}`;
-        const bodyRegex = new RegExp(`^PR: ${pr} | SHA: ${sha9} | File: /index\\.html$`);
+      describe('(for hidden builds)', () => {
 
-        Promise.all([
-          h.runCmd(`curl -iL ${origin}/index.html`).then(h.verifyResponse(200, bodyRegex)),
-          h.runCmd(`curl -iL ${origin}/`).then(h.verifyResponse(200, bodyRegex)),
-          h.runCmd(`curl -iL ${origin}`).then(h.verifyResponse(200, bodyRegex)),
-        ]).then(done);
-      });
+        it('should respond with 404 for any file or directory', done => {
+          const origin = `${scheme}://pr${pr}-${shortSha9}.${host}`;
+          const assert404 = h.verifyResponse(404);
+
+          h.createDummyBuild(pr, sha9, false);
+          expect(h.buildExists(pr, sha9, false)).toBe(true);
+
+          Promise.all([
+            h.runCmd(`curl -iL ${origin}/index.html`).then(assert404),
+            h.runCmd(`curl -iL ${origin}/`).then(assert404),
+            h.runCmd(`curl -iL ${origin}`).then(assert404),
+            h.runCmd(`curl -iL ${origin}/foo/bar.js`).then(assert404),
+            h.runCmd(`curl -iL ${origin}/foo/`).then(assert404),
+            h.runCmd(`curl -iL ${origin}/foo`).then(assert404),
+          ]).then(done);
+        });
 
 
-      it('should return /foo/bar.js', done => {
-        const bodyRegex = new RegExp(`^PR: ${pr} | SHA: ${sha9} | File: /foo/bar\\.js$`);
+        it('should respond with 404 for any file or directory (for legacy builds)', done => {
+          const origin = `${scheme}://pr${pr}-${sha9}.${host}`;
+          const assert404 = h.verifyResponse(404);
 
-        h.runCmd(`curl -iL ${scheme}://pr${pr}-${sha9}.${host}/foo/bar.js`).
-          then(h.verifyResponse(200, bodyRegex)).
-          then(done);
-      });
+          h.createDummyBuild(pr, sha9, false, false, true);
+          expect(h.buildExists(pr, sha9, false, true)).toBe(true);
 
+          Promise.all([
+            h.runCmd(`curl -iL ${origin}/index.html`).then(assert404),
+            h.runCmd(`curl -iL ${origin}/`).then(assert404),
+            h.runCmd(`curl -iL ${origin}`).then(assert404),
+            h.runCmd(`curl -iL ${origin}/foo/bar.js`).then(assert404),
+            h.runCmd(`curl -iL ${origin}/foo/`).then(assert404),
+            h.runCmd(`curl -iL ${origin}/foo`).then(assert404),
+          ]).then(done);
+        });
 
-      it('should respond with 403 for directories', done => {
-        Promise.all([
-          h.runCmd(`curl -iL ${scheme}://pr${pr}-${sha9}.${host}/foo/`).then(h.verifyResponse(403)),
-          h.runCmd(`curl -iL ${scheme}://pr${pr}-${sha9}.${host}/foo`).then(h.verifyResponse(403)),
-        ]).then(done);
-      });
-
-
-      it('should respond with 404 for unknown paths to files', done => {
-        h.runCmd(`curl -iL ${scheme}://pr${pr}-${sha9}.${host}/foo/baz.css`).
-          then(h.verifyResponse(404)).
-          then(done);
-      });
-
-
-      it('should rewrite to \'index.html\' for unknown paths that don\'t look like files', done => {
-        const bodyRegex = new RegExp(`^PR: ${pr} | SHA: ${sha9} | File: /index\\.html$`);
-
-        Promise.all([
-          h.runCmd(`curl -iL ${scheme}://pr${pr}-${sha9}.${host}/foo/baz`).then(h.verifyResponse(200, bodyRegex)),
-          h.runCmd(`curl -iL ${scheme}://pr${pr}-${sha9}.${host}/foo/baz/`).then(h.verifyResponse(200, bodyRegex)),
-        ]).then(done);
-      });
-
-
-      it('should respond with 404 for unknown PRs/SHAs', done => {
-        const otherPr = 54321;
-        const otherSha = '8'.repeat(40);
-
-        Promise.all([
-          h.runCmd(`curl -iL ${scheme}://pr${pr}9-${sha9}.${host}`).then(h.verifyResponse(404)),
-          h.runCmd(`curl -iL ${scheme}://pr${otherPr}-${sha9}.${host}`).then(h.verifyResponse(404)),
-          h.runCmd(`curl -iL ${scheme}://pr${pr}-${sha9}9.${host}`).then(h.verifyResponse(404)),
-          h.runCmd(`curl -iL ${scheme}://pr${pr}-${otherSha}.${host}`).then(h.verifyResponse(404)),
-        ]).then(done);
-      });
-
-
-      it('should respond with 404 if the subdomain format is wrong', done => {
-        Promise.all([
-          h.runCmd(`curl -iL ${scheme}://xpr${pr}-${sha9}.${host}`).then(h.verifyResponse(404)),
-          h.runCmd(`curl -iL ${scheme}://prx${pr}-${sha9}.${host}`).then(h.verifyResponse(404)),
-          h.runCmd(`curl -iL ${scheme}://xx${pr}-${sha9}.${host}`).then(h.verifyResponse(404)),
-          h.runCmd(`curl -iL ${scheme}://p${pr}-${sha9}.${host}`).then(h.verifyResponse(404)),
-          h.runCmd(`curl -iL ${scheme}://r${pr}-${sha9}.${host}`).then(h.verifyResponse(404)),
-          h.runCmd(`curl -iL ${scheme}://${pr}-${sha9}.${host}`).then(h.verifyResponse(404)),
-          h.runCmd(`curl -iL ${scheme}://pr${pr}${sha9}.${host}`).then(h.verifyResponse(404)),
-          h.runCmd(`curl -iL ${scheme}://pr${pr}_${sha9}.${host}`).then(h.verifyResponse(404)),
-        ]).then(done);
-      });
-
-
-      it('should reject PRs with leading zeros', done => {
-        h.runCmd(`curl -iL ${scheme}://pr0${pr}-${sha9}.${host}`).
-          then(h.verifyResponse(404)).
-          then(done);
-      });
-
-
-      it('should accept SHAs with leading zeros (but not trim the zeros)', done => {
-        const bodyRegex9 = new RegExp(`^PR: ${pr} | SHA: ${sha9} | File: /index\\.html$`);
-        const bodyRegex0 = new RegExp(`^PR: ${pr} | SHA: ${sha0} | File: /index\\.html$`);
-
-        Promise.all([
-          h.runCmd(`curl -iL ${scheme}://pr${pr}-0${sha9}.${host}`).then(h.verifyResponse(404)),
-          h.runCmd(`curl -iL ${scheme}://pr${pr}-${sha9}.${host}`).then(h.verifyResponse(200, bodyRegex9)),
-          h.runCmd(`curl -iL ${scheme}://pr${pr}-${sha0}.${host}`).then(h.verifyResponse(200, bodyRegex0)),
-        ]).then(done);
       });
 
     });
@@ -244,9 +317,54 @@ describe(`nginx`, () => {
     });
 
 
+    describe(`${host}/pr-updated`, () => {
+      const url = `${scheme}://${host}/pr-updated`;
+
+
+      it('should disallow non-POST requests', done => {
+        Promise.all([
+          h.runCmd(`curl -iLX GET ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
+          h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
+          h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
+          h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
+        ]).then(done);
+      });
+
+
+      it('should pass requests through to the upload server', done => {
+        const cmdPrefix = `curl -iLX POST --header "Content-Type: application/json"`;
+
+        const cmd1 = `${cmdPrefix} ${url}`;
+        const cmd2 = `${cmdPrefix} --data '{"number":${pr}}' ${url}`;
+        const cmd3 = `${cmdPrefix} --data '{"number":${pr},"action":"foo"}' ${url}`;
+
+        Promise.all([
+          h.runCmd(cmd1).then(h.verifyResponse(400, /Missing or empty 'number' field/)),
+          h.runCmd(cmd2).then(h.verifyResponse(200)),
+          h.runCmd(cmd3).then(h.verifyResponse(200)),
+        ]).then(done);
+      });
+
+
+      it('should respond with 404 for unknown paths', done => {
+        const cmdPrefix = `curl -iLX POST ${scheme}://${host}`;
+
+        Promise.all([
+          h.runCmd(`${cmdPrefix}/foo/pr-updated`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/foo-pr-updated`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/foonpr-updated`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/pr-updated/foo`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/pr-updated-foo`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/pr-updatednfoo`).then(h.verifyResponse(404)),
+        ]).then(done);
+      });
+
+    });
+
+
     describe(`${host}/*`, () => {
 
-      it('should respond with 404 for unkown URLs (even if the resource exists)', done => {
+      it('should respond with 404 for unknown URLs (even if the resource exists)', done => {
         ['index.html', 'foo.js', 'foo/index.html'].forEach(relFilePath => {
           const absFilePath = path.join(h.buildsDir, relFilePath);
           h.writeFile(absFilePath, {content: `File: /${relFilePath}`});
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/server-integration.e2e.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/server-integration.e2e.ts
index 93ad1fcb88..6e9467e837 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/server-integration.e2e.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/server-integration.e2e.ts
@@ -1,5 +1,6 @@
 // Imports
 import * as path from 'path';
+import * as c from './constants';
 import {helper as h} from './helper';
 
 // Tests
@@ -12,73 +13,307 @@ h.runForAllSupportedSchemes((scheme, port) => describe(`integration (on ${scheme
   const archivePath = path.join(h.buildsDir, 'snapshot.tar.gz');
 
   const getFile = (pr: string, sha: string, file: string) =>
-    h.runCmd(`curl -iL ${scheme}://pr${pr}-${sha}.${host}/${file}`);
-  const uploadBuild = (pr: string, sha: string, archive: string) => {
-    const curlPost = 'curl -iLX POST --header "Authorization: Token FOO"';
+    h.runCmd(`curl -iL ${scheme}://pr${pr}-${h.getShordSha(sha)}.${host}/${file}`);
+  const uploadBuild = (pr: string, sha: string, archive: string, authHeader = 'Token FOO') => {
+    const curlPost = `curl -iLX POST --header "Authorization: ${authHeader}"`;
     return h.runCmd(`${curlPost} --data-binary "@${archive}" ${scheme}://${host}/create-build/${pr}/${sha}`);
   };
+  const prUpdated = (pr: number, action?: string) => {
+    const url = `${scheme}://${host}/pr-updated`;
+    const payloadStr = JSON.stringify({number: pr, action});
+    return h.runCmd(`curl -iLX POST --header "Content-Type: application/json" --data '${payloadStr}' ${url}`);
+  };
 
   beforeEach(() => jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000);
   afterEach(() => {
     h.deletePrDir(pr9);
+    h.deletePrDir(pr9, false);
     h.cleanUp();
   });
 
 
-  it('should be able to upload and serve a build for a new PR', done => {
-    const regexPrefix9 = `^PR: uploaded\\/${pr9} \\| SHA: ${sha9} \\| File:`;
-    const idxContentRegex9 = new RegExp(`${regexPrefix9} \\/index\\.html$`);
-    const barContentRegex9 = new RegExp(`${regexPrefix9} \\/foo\\/bar\\.js$`);
+  describe('for a new/non-existing PR', () => {
 
-    h.createDummyArchive(pr9, sha9, archivePath);
+    it('should be able to upload and serve a public build', done => {
+      const regexPrefix9 = `^PR: uploaded\\/${pr9} \\| SHA: ${sha9} \\| File:`;
+      const idxContentRegex9 = new RegExp(`${regexPrefix9} \\/index\\.html$`);
+      const barContentRegex9 = new RegExp(`${regexPrefix9} \\/foo\\/bar\\.js$`);
+
+      h.createDummyArchive(pr9, sha9, archivePath);
+
+      uploadBuild(pr9, sha9, archivePath).
+        then(() => Promise.all([
+          getFile(pr9, sha9, 'index.html').then(h.verifyResponse(200, idxContentRegex9)),
+          getFile(pr9, sha9, 'foo/bar.js').then(h.verifyResponse(200, barContentRegex9)),
+        ])).
+        then(done);
+    });
+
+
+    it('should be able to upload but not serve a hidden build', done => {
+      const regexPrefix9 = `^PR: uploaded\\/${pr9} \\| SHA: ${sha9} \\| File:`;
+      const idxContentRegex9 = new RegExp(`${regexPrefix9} \\/index\\.html$`);
+      const barContentRegex9 = new RegExp(`${regexPrefix9} \\/foo\\/bar\\.js$`);
+
+      h.createDummyArchive(pr9, sha9, archivePath);
+
+      uploadBuild(pr9, sha9, archivePath, c.BV_verify_verifiedNotTrusted).
+        then(() => Promise.all([
+          getFile(pr9, sha9, 'index.html').then(h.verifyResponse(404)),
+          getFile(pr9, sha9, 'foo/bar.js').then(h.verifyResponse(404)),
+        ])).
+        then(() => {
+          expect(h.buildExists(pr9, sha9)).toBe(false);
+          expect(h.buildExists(pr9, sha9, false)).toBe(true);
+          expect(h.readBuildFile(pr9, sha9, 'index.html', false)).toMatch(idxContentRegex9);
+          expect(h.readBuildFile(pr9, sha9, 'foo/bar.js', false)).toMatch(barContentRegex9);
+        }).
+        then(done);
+    });
+
+
+    it('should reject an upload if verification fails', done => {
+      const errorRegex9 = new RegExp(`Error while verifying upload for PR ${pr9}: Test`);
+
+      h.createDummyArchive(pr9, sha9, archivePath);
+
+      uploadBuild(pr9, sha9, archivePath, c.BV_verify_error).
+        then(h.verifyResponse(403, errorRegex9)).
+        then(() => {
+          expect(h.buildExists(pr9)).toBe(false);
+          expect(h.buildExists(pr9, '', false)).toBe(false);
+        }).
+        then(done);
+    });
+
+
+    it('should be able to notify that a PR has been updated (and do nothing)', done => {
+      prUpdated(+pr9).
+        then(h.verifyResponse(200)).
+        then(() => {
+          // The PR should still not exist.
+          expect(h.buildExists(pr9, '', false)).toBe(false);
+          expect(h.buildExists(pr9, '', true)).toBe(false);
+        }).
+        then(done);
+    });
 
-    uploadBuild(pr9, sha9, archivePath).
-      then(() => Promise.all([
-        getFile(pr9, sha9, 'index.html').then(h.verifyResponse(200, idxContentRegex9)),
-        getFile(pr9, sha9, 'foo/bar.js').then(h.verifyResponse(200, barContentRegex9)),
-      ])).
-      then(done);
   });
 
 
-  it('should be able to upload and serve a build for an existing PR', done => {
-    const regexPrefix0 = `^PR: ${pr9} \\| SHA: ${sha0} \\| File:`;
-    const idxContentRegex0 = new RegExp(`${regexPrefix0} \\/index\\.html$`);
-    const barContentRegex0 = new RegExp(`${regexPrefix0} \\/foo\\/bar\\.js$`);
+  describe('for an existing PR', () => {
 
-    const regexPrefix9 = `^PR: uploaded\\/${pr9} \\| SHA: ${sha9} \\| File:`;
-    const idxContentRegex9 = new RegExp(`${regexPrefix9} \\/index\\.html$`);
-    const barContentRegex9 = new RegExp(`${regexPrefix9} \\/foo\\/bar\\.js$`);
+    it('should be able to upload and serve a public build', done => {
+      const regexPrefix0 = `^PR: ${pr9} \\| SHA: ${sha0} \\| File:`;
+      const idxContentRegex0 = new RegExp(`${regexPrefix0} \\/index\\.html$`);
+      const barContentRegex0 = new RegExp(`${regexPrefix0} \\/foo\\/bar\\.js$`);
 
-    h.createDummyBuild(pr9, sha0);
-    h.createDummyArchive(pr9, sha9, archivePath);
+      const regexPrefix9 = `^PR: uploaded\\/${pr9} \\| SHA: ${sha9} \\| File:`;
+      const idxContentRegex9 = new RegExp(`${regexPrefix9} \\/index\\.html$`);
+      const barContentRegex9 = new RegExp(`${regexPrefix9} \\/foo\\/bar\\.js$`);
 
-    uploadBuild(pr9, sha9, archivePath).
-      then(() => Promise.all([
-        getFile(pr9, sha0, 'index.html').then(h.verifyResponse(200, idxContentRegex0)),
-        getFile(pr9, sha0, 'foo/bar.js').then(h.verifyResponse(200, barContentRegex0)),
-        getFile(pr9, sha9, 'index.html').then(h.verifyResponse(200, idxContentRegex9)),
-        getFile(pr9, sha9, 'foo/bar.js').then(h.verifyResponse(200, barContentRegex9)),
-      ])).
-      then(done);
-  });
+      h.createDummyBuild(pr9, sha0);
+      h.createDummyArchive(pr9, sha9, archivePath);
+
+      uploadBuild(pr9, sha9, archivePath).
+        then(() => Promise.all([
+          getFile(pr9, sha0, 'index.html').then(h.verifyResponse(200, idxContentRegex0)),
+          getFile(pr9, sha0, 'foo/bar.js').then(h.verifyResponse(200, barContentRegex0)),
+          getFile(pr9, sha9, 'index.html').then(h.verifyResponse(200, idxContentRegex9)),
+          getFile(pr9, sha9, 'foo/bar.js').then(h.verifyResponse(200, barContentRegex9)),
+        ])).
+        then(done);
+    });
 
 
-  it('should not be able to overwrite a build', done => {
-    const regexPrefix9 = `^PR: ${pr9} \\| SHA: ${sha9} \\| File:`;
-    const idxContentRegex9 = new RegExp(`${regexPrefix9} \\/index\\.html$`);
-    const barContentRegex9 = new RegExp(`${regexPrefix9} \\/foo\\/bar\\.js$`);
+    it('should be able to upload but not serve a hidden build', done => {
+      const regexPrefix0 = `^PR: ${pr9} \\| SHA: ${sha0} \\| File:`;
+      const idxContentRegex0 = new RegExp(`${regexPrefix0} \\/index\\.html$`);
+      const barContentRegex0 = new RegExp(`${regexPrefix0} \\/foo\\/bar\\.js$`);
 
-    h.createDummyBuild(pr9, sha9);
-    h.createDummyArchive(pr9, sha9, archivePath);
+      const regexPrefix9 = `^PR: uploaded\\/${pr9} \\| SHA: ${sha9} \\| File:`;
+      const idxContentRegex9 = new RegExp(`${regexPrefix9} \\/index\\.html$`);
+      const barContentRegex9 = new RegExp(`${regexPrefix9} \\/foo\\/bar\\.js$`);
+
+      h.createDummyBuild(pr9, sha0, false);
+      h.createDummyArchive(pr9, sha9, archivePath);
+
+      uploadBuild(pr9, sha9, archivePath, c.BV_verify_verifiedNotTrusted).
+        then(() => Promise.all([
+          getFile(pr9, sha0, 'index.html').then(h.verifyResponse(404)),
+          getFile(pr9, sha0, 'foo/bar.js').then(h.verifyResponse(404)),
+          getFile(pr9, sha9, 'index.html').then(h.verifyResponse(404)),
+          getFile(pr9, sha9, 'foo/bar.js').then(h.verifyResponse(404)),
+        ])).
+        then(() => {
+          expect(h.buildExists(pr9, sha9)).toBe(false);
+          expect(h.buildExists(pr9, sha9, false)).toBe(true);
+          expect(h.readBuildFile(pr9, sha0, 'index.html', false)).toMatch(idxContentRegex0);
+          expect(h.readBuildFile(pr9, sha0, 'foo/bar.js', false)).toMatch(barContentRegex0);
+          expect(h.readBuildFile(pr9, sha9, 'index.html', false)).toMatch(idxContentRegex9);
+          expect(h.readBuildFile(pr9, sha9, 'foo/bar.js', false)).toMatch(barContentRegex9);
+        }).
+        then(done);
+    });
+
+
+    it('should reject an upload if verification fails', done => {
+      const errorRegex9 = new RegExp(`Error while verifying upload for PR ${pr9}: Test`);
+
+      h.createDummyBuild(pr9, sha0);
+      h.createDummyArchive(pr9, sha9, archivePath);
+
+      uploadBuild(pr9, sha9, archivePath, c.BV_verify_error).
+        then(h.verifyResponse(403, errorRegex9)).
+        then(() => {
+          expect(h.buildExists(pr9)).toBe(true);
+          expect(h.buildExists(pr9, sha0)).toBe(true);
+          expect(h.buildExists(pr9, sha9)).toBe(false);
+        }).
+        then(done);
+
+    });
+
+
+    it('should not be able to overwrite an existing public build', done => {
+      const regexPrefix9 = `^PR: ${pr9} \\| SHA: ${sha9} \\| File:`;
+      const idxContentRegex9 = new RegExp(`${regexPrefix9} \\/index\\.html$`);
+      const barContentRegex9 = new RegExp(`${regexPrefix9} \\/foo\\/bar\\.js$`);
+
+      h.createDummyBuild(pr9, sha9);
+      h.createDummyArchive(pr9, sha9, archivePath);
+
+      uploadBuild(pr9, sha9, archivePath).
+        then(h.verifyResponse(409)).
+        then(() => Promise.all([
+          getFile(pr9, sha9, 'index.html').then(h.verifyResponse(200, idxContentRegex9)),
+          getFile(pr9, sha9, 'foo/bar.js').then(h.verifyResponse(200, barContentRegex9)),
+        ])).
+        then(done);
+    });
+
+
+    it('should not be able to overwrite an existing hidden build', done => {
+      const regexPrefix9 = `^PR: ${pr9} \\| SHA: ${sha9} \\| File:`;
+      const idxContentRegex9 = new RegExp(`${regexPrefix9} \\/index\\.html$`);
+      const barContentRegex9 = new RegExp(`${regexPrefix9} \\/foo\\/bar\\.js$`);
+
+      h.createDummyBuild(pr9, sha9, false);
+      h.createDummyArchive(pr9, sha9, archivePath);
+
+      uploadBuild(pr9, sha9, archivePath, c.BV_verify_verifiedNotTrusted).
+        then(h.verifyResponse(409)).
+        then(() => {
+          expect(h.readBuildFile(pr9, sha9, 'index.html', false)).toMatch(idxContentRegex9);
+          expect(h.readBuildFile(pr9, sha9, 'foo/bar.js', false)).toMatch(barContentRegex9);
+        }).
+        then(done);
+    });
+
+
+    it('should be able to request re-checking visibility (if outdated)', done => {
+      const publicPr = pr9;
+      const hiddenPr = String(c.BV_getPrIsTrusted_notTrusted);
+
+      h.createDummyBuild(publicPr, sha9, false);
+      h.createDummyBuild(hiddenPr, sha9, true);
+
+      // PR visibilities are outdated (i.e. the opposte of what the should).
+      expect(h.buildExists(publicPr, '', false)).toBe(true);
+      expect(h.buildExists(publicPr, '', true)).toBe(false);
+      expect(h.buildExists(hiddenPr, '', false)).toBe(false);
+      expect(h.buildExists(hiddenPr, '', true)).toBe(true);
+
+      Promise.
+        all([
+          prUpdated(+publicPr).then(h.verifyResponse(200)),
+          prUpdated(+hiddenPr).then(h.verifyResponse(200)),
+        ]).
+        then(() => {
+          // PR visibilities should have been updated.
+          expect(h.buildExists(publicPr, '', false)).toBe(false);
+          expect(h.buildExists(publicPr, '', true)).toBe(true);
+          expect(h.buildExists(hiddenPr, '', false)).toBe(true);
+          expect(h.buildExists(hiddenPr, '', true)).toBe(false);
+        }).
+        then(() => {
+          h.deletePrDir(publicPr, true);
+          h.deletePrDir(hiddenPr, false);
+        }).
+        then(done);
+    });
+
+
+    it('should be able to request re-checking visibility (if up-to-date)', done => {
+      const publicPr = pr9;
+      const hiddenPr = String(c.BV_getPrIsTrusted_notTrusted);
+
+      h.createDummyBuild(publicPr, sha9, true);
+      h.createDummyBuild(hiddenPr, sha9, false);
+
+      // PR visibilities are already up-to-date.
+      expect(h.buildExists(publicPr, '', false)).toBe(false);
+      expect(h.buildExists(publicPr, '', true)).toBe(true);
+      expect(h.buildExists(hiddenPr, '', false)).toBe(true);
+      expect(h.buildExists(hiddenPr, '', true)).toBe(false);
+
+      Promise.
+        all([
+          prUpdated(+publicPr).then(h.verifyResponse(200)),
+          prUpdated(+hiddenPr).then(h.verifyResponse(200)),
+        ]).
+        then(() => {
+          // PR visibilities are still up-to-date.
+          expect(h.buildExists(publicPr, '', false)).toBe(false);
+          expect(h.buildExists(publicPr, '', true)).toBe(true);
+          expect(h.buildExists(hiddenPr, '', false)).toBe(true);
+          expect(h.buildExists(hiddenPr, '', true)).toBe(false);
+        }).
+        then(done);
+    });
+
+
+    it('should reject a request if re-checking visibility fails', done => {
+      const errorPr = String(c.BV_getPrIsTrusted_error);
+
+      h.createDummyBuild(errorPr, sha9, true);
+
+      expect(h.buildExists(errorPr, '', false)).toBe(false);
+      expect(h.buildExists(errorPr, '', true)).toBe(true);
+
+      prUpdated(+errorPr).
+        then(h.verifyResponse(500, /Test/)).
+        then(() => {
+          // PR visibility should not have been updated.
+          expect(h.buildExists(errorPr, '', false)).toBe(false);
+          expect(h.buildExists(errorPr, '', true)).toBe(true);
+        }).
+        then(done);
+    });
+
+
+    it('should reject a request if updating visibility fails', done => {
+      // One way to cause an error is to have both a public and a hidden directory for the same PR.
+      h.createDummyBuild(pr9, sha9, false);
+      h.createDummyBuild(pr9, sha9, true);
+
+      const hiddenPrDir = h.getPrDir(pr9, false);
+      const publicPrDir = h.getPrDir(pr9, true);
+      const bodyRegex = new RegExp(`Request to move '${hiddenPrDir}' to existing directory '${publicPrDir}'`);
+
+      expect(h.buildExists(pr9, '', false)).toBe(true);
+      expect(h.buildExists(pr9, '', true)).toBe(true);
+
+      prUpdated(+pr9).
+        then(h.verifyResponse(409, bodyRegex)).
+        then(() => {
+          // PR visibility should not have been updated.
+          expect(h.buildExists(pr9, '', false)).toBe(true);
+          expect(h.buildExists(pr9, '', true)).toBe(true);
+        }).
+        then(done);
+    });
 
-    uploadBuild(pr9, sha9, archivePath).
-      then(h.verifyResponse(403)).
-      then(() => Promise.all([
-        getFile(pr9, sha9, 'index.html').then(h.verifyResponse(200, idxContentRegex9)),
-        getFile(pr9, sha9, 'foo/bar.js').then(h.verifyResponse(200, barContentRegex9)),
-      ])).
-      then(done);
   });
 
 }));
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/start-test-upload-server.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/start-test-upload-server.ts
new file mode 100644
index 0000000000..3450d1bc0c
--- /dev/null
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/start-test-upload-server.ts
@@ -0,0 +1,38 @@
+// Imports
+import {GithubPullRequests} from '../common/github-pull-requests';
+import {BUILD_VERIFICATION_STATUS, BuildVerifier} from '../upload-server/build-verifier';
+import {UploadError} from '../upload-server/upload-error';
+import * as c from './constants';
+
+// Run
+// TODO(gkalpak): Add e2e tests to cover these interactions as well.
+GithubPullRequests.prototype.addComment = () => Promise.resolve();
+BuildVerifier.prototype.getPrIsTrusted = (pr: number) => {
+  switch (pr) {
+    case c.BV_getPrIsTrusted_error:
+      // For e2e tests, fake an error.
+      return Promise.reject('Test');
+    case c.BV_getPrIsTrusted_notTrusted:
+      // For e2e tests, fake an untrusted PR (`false`).
+      return Promise.resolve(false);
+    default:
+      // For e2e tests, default to trusted PRs (`true`).
+      return Promise.resolve(true);
+  }
+};
+BuildVerifier.prototype.verify = (expectedPr: number, authHeader: string) => {
+  switch (authHeader) {
+    case c.BV_verify_error:
+      // For e2e tests, fake a verification error.
+      return Promise.reject(new UploadError(403, `Error while verifying upload for PR ${expectedPr}: Test`));
+    case c.BV_verify_verifiedNotTrusted:
+      // For e2e tests, fake a `verifiedNotTrusted` verification status.
+      return Promise.resolve(BUILD_VERIFICATION_STATUS.verifiedNotTrusted);
+    default:
+      // For e2e tests, default to `verifiedAndTrusted` verification status.
+      return Promise.resolve(BUILD_VERIFICATION_STATUS.verifiedAndTrusted);
+  }
+};
+
+// tslint:disable-next-line: no-var-requires
+require('../upload-server/index');
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts
index 84ea36d8f7..6191a495f4 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts
@@ -1,6 +1,7 @@
 // Imports
 import * as fs from 'fs';
 import * as path from 'path';
+import * as c from './constants';
 import {CmdResult, helper as h} from './helper';
 
 // Tests
@@ -19,18 +20,19 @@ describe('upload-server (on HTTP)', () => {
   describe(`${host}/create-build/<pr>/<sha>`, () => {
     const authorizationHeader = `--header "Authorization: Token FOO"`;
     const xFileHeader = `--header "X-File: ${h.buildsDir}/snapshot.tar.gz"`;
-    const curl = `curl -iL ${authorizationHeader} ${xFileHeader}`;
+    const defaultHeaders = `${authorizationHeader} ${xFileHeader}`;
+    const curl = (url: string, headers = defaultHeaders) => `curl -iL ${headers} ${url}`;
 
 
     it('should disallow non-GET requests', done => {
       const url = `http://${host}/create-build/${pr}/${sha9}`;
-      const bodyRegex = /^Unsupported method/;
+      const bodyRegex = /^Unknown resource/;
 
       Promise.all([
-        h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX POST ${url}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse(405, bodyRegex)),
+        h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX POST ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse(404, bodyRegex)),
       ]).then(done);
     });
 
@@ -42,8 +44,8 @@ describe('upload-server (on HTTP)', () => {
       const bodyRegex = /^Missing or empty 'AUTHORIZATION' header/;
 
       Promise.all([
-        h.runCmd(`curl -iL ${headers1} ${url}`).then(h.verifyResponse(401, bodyRegex)),
-        h.runCmd(`curl -iL  ${headers2} ${url}`).then(h.verifyResponse(401, bodyRegex)),
+        h.runCmd(curl(url, headers1)).then(h.verifyResponse(401, bodyRegex)),
+        h.runCmd(curl(url, headers2)).then(h.verifyResponse(401, bodyRegex)),
       ]).then(done);
     });
 
@@ -55,14 +57,25 @@ describe('upload-server (on HTTP)', () => {
       const bodyRegex = /^Missing or empty 'X-FILE' header/;
 
       Promise.all([
-        h.runCmd(`curl -iL ${headers1} ${url}`).then(h.verifyResponse(400, bodyRegex)),
-        h.runCmd(`curl -iL ${headers2} ${url}`).then(h.verifyResponse(400, bodyRegex)),
+        h.runCmd(curl(url, headers1)).then(h.verifyResponse(400, bodyRegex)),
+        h.runCmd(curl(url, headers2)).then(h.verifyResponse(400, bodyRegex)),
       ]).then(done);
     });
 
 
+    it('should reject requests for which the PR verification fails', done => {
+      const headers = `--header "Authorization: ${c.BV_verify_error}" ${xFileHeader}`;
+      const url = `http://${host}/create-build/${pr}/${sha9}`;
+      const bodyRegex = new RegExp(`Error while verifying upload for PR ${pr}: Test`);
+
+      h.runCmd(curl(url, headers)).
+        then(h.verifyResponse(403, bodyRegex)).
+        then(done);
+    });
+
+
     it('should respond with 404 for unknown paths', done => {
-      const cmdPrefix = `${curl} http://${host}`;
+      const cmdPrefix = curl(`http://${host}`);
 
       Promise.all([
         h.runCmd(`${cmdPrefix}/foo/create-build/${pr}/${sha9}`).then(h.verifyResponse(404)),
@@ -78,7 +91,7 @@ describe('upload-server (on HTTP)', () => {
 
 
     it('should reject PRs with leading zeros', done => {
-      h.runCmd(`${curl} http://${host}/create-build/0${pr}/${sha9}`).
+      h.runCmd(curl(`http://${host}/create-build/0${pr}/${sha9}`)).
         then(h.verifyResponse(404)).
         then(done);
     });
@@ -86,129 +99,253 @@ describe('upload-server (on HTTP)', () => {
 
     it('should accept SHAs with leading zeros (but not trim the zeros)', done => {
       Promise.all([
-        h.runCmd(`${curl} http://${host}/create-build/${pr}/0${sha9}`).then(h.verifyResponse(404)),
-        h.runCmd(`${curl} http://${host}/create-build/${pr}/${sha9}`).then(h.verifyResponse(500)),
-        h.runCmd(`${curl} http://${host}/create-build/${pr}/${sha0}`).then(h.verifyResponse(500)),
+        h.runCmd(curl(`http://${host}/create-build/${pr}/0${sha9}`)).then(h.verifyResponse(404)),
+        h.runCmd(curl(`http://${host}/create-build/${pr}/${sha9}`)).then(h.verifyResponse(500)),
+        h.runCmd(curl(`http://${host}/create-build/${pr}/${sha0}`)).then(h.verifyResponse(500)),
       ]).then(done);
     });
 
 
-    it('should not overwrite existing builds', done => {
-      h.createDummyBuild(pr, sha9);
-      expect(h.readBuildFile(pr, sha9, 'index.html')).toContain('index.html');
-
-      h.writeBuildFile(pr, sha9, 'index.html', 'My content');
-      expect(h.readBuildFile(pr, sha9, 'index.html')).toBe('My content');
-
-      h.runCmd(`${curl} http://${host}/create-build/${pr}/${sha9}`).
-        then(h.verifyResponse(403, /^Request to overwrite existing directory/)).
-        then(() => expect(h.readBuildFile(pr, sha9, 'index.html')).toBe('My content')).
-        then(done);
-    });
+    [true, false].forEach(isPublic => describe(`(for ${isPublic ? 'public' : 'hidden'} builds)`, () => {
+      const authorizationHeader2 = isPublic ?
+        authorizationHeader : `--header "Authorization: ${c.BV_verify_verifiedNotTrusted}"`;
+      const cmdPrefix = curl('', `${authorizationHeader2} ${xFileHeader}`);
 
 
-    it('should delete the PR directory on error (for new PR)', done => {
-      const prDir = path.join(h.buildsDir, pr);
+      it('should not overwrite existing builds', done => {
+        h.createDummyBuild(pr, sha9, isPublic);
+        expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toContain('index.html');
 
-      h.runCmd(`${curl} http://${host}/create-build/${pr}/${sha9}`).
-        then(h.verifyResponse(500)).
-        then(() => expect(fs.existsSync(prDir)).toBe(false)).
-        then(done);
-    });
+        h.writeBuildFile(pr, sha9, 'index.html', 'My content', isPublic);
+        expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
 
-
-    it('should only delete the SHA directory on error (for existing PR)', done => {
-      const prDir = path.join(h.buildsDir, pr);
-      const shaDir = path.join(prDir, sha9);
-
-      h.createDummyBuild(pr, sha0);
-
-      h.runCmd(`${curl} http://${host}/create-build/${pr}/${sha9}`).
-        then(h.verifyResponse(500)).
-        then(() => {
-          expect(fs.existsSync(shaDir)).toBe(false);
-          expect(fs.existsSync(prDir)).toBe(true);
-        }).
-        then(done);
-    });
-
-
-    describe('on successful upload', () => {
-      const archivePath = path.join(h.buildsDir, 'snapshot.tar.gz');
-      let uploadPromise: Promise<CmdResult>;
-
-      beforeEach(() => {
-        h.createDummyArchive(pr, sha9, archivePath);
-        uploadPromise = h.runCmd(`${curl} http://${host}/create-build/${pr}/${sha9}`);
-      });
-      afterEach(() => h.deletePrDir(pr));
-
-
-      it('should respond with 201', done => {
-        uploadPromise.then(h.verifyResponse(201)).then(done);
+        h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9}`).
+          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+          then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
+          then(done);
       });
 
 
-      it('should extract the contents of the uploaded file', done => {
-        uploadPromise.
+      it('should not overwrite existing builds (even if the SHA is different)', done => {
+        // Since only the first few characters of the SHA are used, it is possible for two different
+        // SHAs to correspond to the same directory. In that case, we don't want the second SHA to
+        // overwrite the first.
+
+        const sha9Almost = sha9.replace(/.$/, '8');
+        expect(sha9Almost).not.toBe(sha9);
+
+        h.createDummyBuild(pr, sha9, isPublic);
+        expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toContain('index.html');
+
+        h.writeBuildFile(pr, sha9, 'index.html', 'My content', isPublic);
+        expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
+
+        h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9Almost}`).
+          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+          then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
+          then(done);
+      });
+
+
+      it('should delete the PR directory on error (for new PR)', done => {
+        h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9}`).
+          then(h.verifyResponse(500)).
+          then(() => expect(h.buildExists(pr, '', isPublic)).toBe(false)).
+          then(done);
+      });
+
+
+      it('should only delete the SHA directory on error (for existing PR)', done => {
+        h.createDummyBuild(pr, sha0, isPublic);
+
+        h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9}`).
+          then(h.verifyResponse(500)).
           then(() => {
-            expect(h.readBuildFile(pr, sha9, 'index.html')).toContain(`uploaded/${pr}`);
-            expect(h.readBuildFile(pr, sha9, 'foo/bar.js')).toContain(`uploaded/${pr}`);
+            expect(h.buildExists(pr, sha9, isPublic)).toBe(false);
+            expect(h.buildExists(pr, '', isPublic)).toBe(true);
           }).
           then(done);
       });
 
 
-      it(`should create files/directories owned by '${h.serverUser}'`, done => {
-        const shaDir = path.join(h.buildsDir, pr, sha9);
-        const idxPath = path.join(shaDir, 'index.html');
-        const barPath = path.join(shaDir, 'foo', 'bar.js');
+      describe('on successful upload', () => {
+        const archivePath = path.join(h.buildsDir, 'snapshot.tar.gz');
+        const statusCode = isPublic ? 201 : 202;
+        let uploadPromise: Promise<CmdResult>;
+
+        beforeEach(() => {
+          h.createDummyArchive(pr, sha9, archivePath);
+          uploadPromise = h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9}`);
+        });
+        afterEach(() => h.deletePrDir(pr, isPublic));
+
+
+        it(`should respond with ${statusCode}`, done => {
+          uploadPromise.then(h.verifyResponse(statusCode)).then(done);
+        });
+
+
+        it('should extract the contents of the uploaded file', done => {
+          uploadPromise.
+            then(() => {
+              expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toContain(`uploaded/${pr}`);
+              expect(h.readBuildFile(pr, sha9, 'foo/bar.js', isPublic)).toContain(`uploaded/${pr}`);
+            }).
+            then(done);
+        });
+
+
+        it(`should create files/directories owned by '${h.wwwUser}'`, done => {
+          const prDir = h.getPrDir(pr, isPublic);
+          const shaDir = h.getShaDir(prDir, sha9);
+          const idxPath = path.join(shaDir, 'index.html');
+          const barPath = path.join(shaDir, 'foo', 'bar.js');
+
+          uploadPromise.
+            then(() => Promise.all([
+              h.runCmd(`find ${shaDir}`),
+              h.runCmd(`find ${shaDir} -user ${h.wwwUser}`),
+            ])).
+            then(([{stdout: allFiles}, {stdout: userFiles}]) => {
+              expect(userFiles).toBe(allFiles);
+              expect(userFiles).toContain(shaDir);
+              expect(userFiles).toContain(idxPath);
+              expect(userFiles).toContain(barPath);
+            }).
+            then(done);
+        });
+
+
+        it('should delete the uploaded file', done => {
+          expect(fs.existsSync(archivePath)).toBe(true);
+          uploadPromise.
+            then(() => expect(fs.existsSync(archivePath)).toBe(false)).
+            then(done);
+        });
+
+
+        it('should make the build directory non-writable', done => {
+          const prDir = h.getPrDir(pr, isPublic);
+          const shaDir = h.getShaDir(prDir, sha9);
+          const idxPath = path.join(shaDir, 'index.html');
+          const barPath = path.join(shaDir, 'foo', 'bar.js');
+
+          // See https://github.com/nodejs/node-v0.x-archive/issues/3045#issuecomment-4862588.
+          const isNotWritable = (fileOrDir: string) => {
+            const mode = fs.statSync(fileOrDir).mode;
+            // tslint:disable-next-line: no-bitwise
+            return !(mode & parseInt('222', 8));
+          };
+
+          uploadPromise.
+            then(() => {
+              expect(isNotWritable(shaDir)).toBe(true);
+              expect(isNotWritable(idxPath)).toBe(true);
+              expect(isNotWritable(barPath)).toBe(true);
+            }).
+            then(done);
+        });
+
+
+        it('should ignore a legacy 40-chars long build directory (even if it starts with the same chars)', done => {
+          // It is possible that 40-chars long build directories exist, if they had been deployed
+          // before implementing the shorter build directory names. In that case, we don't want the
+          // second (shorter) name to be considered the same as the old one (even if they originate
+          // from the same SHA).
+
+          h.createDummyBuild(pr, sha9, isPublic, false, true);
+          expect(h.readBuildFile(pr, sha9, 'index.html', isPublic, true)).toContain('index.html');
+
+          h.writeBuildFile(pr, sha9, 'index.html', 'My content', isPublic, true);
+          expect(h.readBuildFile(pr, sha9, 'index.html', isPublic, true)).toBe('My content');
+
+          h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9}`).
+            then(h.verifyResponse(statusCode)).
+            then(() => {
+              expect(h.buildExists(pr, sha9, isPublic)).toBe(true);
+              expect(h.buildExists(pr, sha9, isPublic, true)).toBe(true);
+              expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toContain('index.html');
+              expect(h.readBuildFile(pr, sha9, 'index.html', isPublic, true)).toBe('My content');
+            }).
+            then(done);
+        });
 
-        uploadPromise.
-          then(() => Promise.all([
-            h.runCmd(`find ${shaDir}`),
-            h.runCmd(`find ${shaDir} -user ${h.serverUser}`),
-          ])).
-          then(([{stdout: allFiles}, {stdout: userFiles}]) => {
-            expect(userFiles).toBe(allFiles);
-            expect(userFiles).toContain(shaDir);
-            expect(userFiles).toContain(idxPath);
-            expect(userFiles).toContain(barPath);
-          }).
-          then(done);
       });
 
 
-      it('should delete the uploaded file', done => {
-        expect(fs.existsSync(archivePath)).toBe(true);
-        uploadPromise.
-          then(() => expect(fs.existsSync(archivePath)).toBe(false)).
-          then(done);
-      });
+      describe('when the PR\'s visibility has changed', () => {
+        const archivePath = path.join(h.buildsDir, 'snapshot.tar.gz');
+        const statusCode = isPublic ? 201 : 202;
 
-
-      it('should make the build directory non-writable', done => {
-        const shaDir = path.join(h.buildsDir, pr, sha9);
-        const idxPath = path.join(shaDir, 'index.html');
-        const barPath = path.join(shaDir, 'foo', 'bar.js');
-
-        // See https://github.com/nodejs/node-v0.x-archive/issues/3045#issuecomment-4862588.
-        const isNotWritable = (fileOrDir: string) => {
-          const mode = fs.statSync(fileOrDir).mode;
-          // tslint:disable-next-line: no-bitwise
-          return !(mode & parseInt('222', 8));
+        const checkPrVisibility = (isPublic2: boolean) => {
+          expect(h.buildExists(pr, '', isPublic2)).toBe(true);
+          expect(h.buildExists(pr, '', !isPublic2)).toBe(false);
+          expect(h.buildExists(pr, sha0, isPublic2)).toBe(true);
+          expect(h.buildExists(pr, sha0, !isPublic2)).toBe(false);
         };
+        const uploadBuild = (sha: string) => h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha}`);
+
+        beforeEach(() => {
+          h.createDummyBuild(pr, sha0, !isPublic);
+          h.createDummyArchive(pr, sha9, archivePath);
+          checkPrVisibility(!isPublic);
+        });
+        afterEach(() => h.deletePrDir(pr, isPublic));
+
+
+        it('should update the PR\'s visibility', done => {
+          uploadBuild(sha9).
+            then(h.verifyResponse(statusCode)).
+            then(() => {
+              checkPrVisibility(isPublic);
+              expect(h.buildExists(pr, sha9, isPublic)).toBe(true);
+              expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toContain(`uploaded/${pr}`);
+              expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toContain(sha9);
+            }).
+            then(done);
+        });
+
+
+        it('should not overwrite existing builds (but keep the updated visibility)', done => {
+          expect(h.buildExists(pr, sha0, isPublic)).toBe(false);
+
+          uploadBuild(sha0).
+            then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+            then(() => {
+              checkPrVisibility(isPublic);
+              expect(h.readBuildFile(pr, sha0, 'index.html', isPublic)).toContain(pr);
+              expect(h.readBuildFile(pr, sha0, 'index.html', isPublic)).not.toContain(`uploaded/${pr}`);
+              expect(h.readBuildFile(pr, sha0, 'index.html', isPublic)).toContain(sha0);
+              expect(h.readBuildFile(pr, sha0, 'index.html', isPublic)).not.toContain(sha9);
+            }).
+            then(done);
+        });
+
+
+        it('should reject the request if it fails to update the PR\'s visibility', done => {
+          // One way to cause an error is to have both a public and a hidden directory for the same PR.
+          h.createDummyBuild(pr, sha0, isPublic);
+
+          expect(h.buildExists(pr, sha0, isPublic)).toBe(true);
+          expect(h.buildExists(pr, sha0, !isPublic)).toBe(true);
+
+          const errorRegex = new RegExp(`^Request to move '${h.getPrDir(pr, !isPublic)}' ` +
+                                        `to existing directory '${h.getPrDir(pr, isPublic)}'.`);
+
+          uploadBuild(sha9).
+            then(h.verifyResponse(409, errorRegex)).
+            then(() => {
+              expect(h.buildExists(pr, sha0, isPublic)).toBe(true);
+              expect(h.buildExists(pr, sha0, !isPublic)).toBe(true);
+              expect(h.buildExists(pr, sha9, isPublic)).toBe(false);
+              expect(h.buildExists(pr, sha9, !isPublic)).toBe(false);
+            }).
+            then(done);
+        });
 
-        uploadPromise.
-          then(() => {
-            expect(isNotWritable(shaDir)).toBe(true);
-            expect(isNotWritable(idxPath)).toBe(true);
-            expect(isNotWritable(barPath)).toBe(true);
-          }).
-          then(done);
       });
 
-    });
+    }));
 
   });
 
@@ -237,27 +374,194 @@ describe('upload-server (on HTTP)', () => {
   });
 
 
+  describe(`${host}/pr-updated`, () => {
+    const url = `http://${host}/pr-updated`;
+
+    // Helpers
+    const curl = (payload?: {number: number, action?: string}) => {
+      const payloadStr = payload && JSON.stringify(payload) || '';
+      return `curl -iLX POST --header "Content-Type: application/json" --data '${payloadStr}' ${url}`;
+    };
+
+
+    it('should disallow non-POST requests', done => {
+      const bodyRegex = /^Unknown resource in request/;
+
+      Promise.all([
+        h.runCmd(`curl -iLX GET ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse(404, bodyRegex)),
+      ]).then(done);
+    });
+
+
+    it('should respond with 400 for requests without a payload', done => {
+      const bodyRegex = /^Missing or empty 'number' field in request/;
+
+      h.runCmd(curl()).
+        then(h.verifyResponse(400, bodyRegex)).
+        then(done);
+    });
+
+
+    it('should respond with 400 for requests without a \'number\' field', done => {
+      const bodyRegex = /^Missing or empty 'number' field in request/;
+
+      Promise.all([
+        h.runCmd(curl({} as any)).then(h.verifyResponse(400, bodyRegex)),
+        h.runCmd(curl({number: null} as any)).then(h.verifyResponse(400, bodyRegex)),
+      ]).then(done);
+    });
+
+
+    it('should reject requests for which checking the PR visibility fails', done => {
+      h.runCmd(curl({number: c.BV_getPrIsTrusted_error})).
+        then(h.verifyResponse(500, /Test/)).
+        then(done);
+    });
+
+
+    it('should respond with 404 for unknown paths', done => {
+      const mockPayload = JSON.stringify({number: +pr});
+      const cmdPrefix = `curl -iLX POST --data "${mockPayload}" http://${host}`;
+
+      Promise.all([
+        h.runCmd(`${cmdPrefix}/foo/pr-updated`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/foo-pr-updated`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/foonpr-updated`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/pr-updated/foo`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/pr-updated-foo`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/pr-updatednfoo`).then(h.verifyResponse(404)),
+      ]).then(done);
+    });
+
+
+    it('should do nothing if PR\'s visibility is already up-to-date', done => {
+      const publicPr = pr;
+      const hiddenPr = String(c.BV_getPrIsTrusted_notTrusted);
+      const checkVisibilities = () => {
+        // Public build is already public.
+        expect(h.buildExists(publicPr, '', false)).toBe(false);
+        expect(h.buildExists(publicPr, '', true)).toBe(true);
+        // Hidden build is already hidden.
+        expect(h.buildExists(hiddenPr, '', false)).toBe(true);
+        expect(h.buildExists(hiddenPr, '', true)).toBe(false);
+      };
+
+      h.createDummyBuild(publicPr, sha9, true);
+      h.createDummyBuild(hiddenPr, sha9, false);
+      checkVisibilities();
+
+      Promise.
+        all([
+          h.runCmd(curl({number: +publicPr, action: 'foo'})).then(h.verifyResponse(200)),
+          h.runCmd(curl({number: +hiddenPr, action: 'foo'})).then(h.verifyResponse(200)),
+        ]).
+        // Visibilities should not have changed, because the specified action could not have triggered a change.
+        then(checkVisibilities).
+        then(done);
+    });
+
+
+    it('should do nothing if \'action\' implies no visibility change', done => {
+      const publicPr = pr;
+      const hiddenPr = String(c.BV_getPrIsTrusted_notTrusted);
+      const checkVisibilities = () => {
+        // Public build is hidden atm.
+        expect(h.buildExists(publicPr, '', false)).toBe(true);
+        expect(h.buildExists(publicPr, '', true)).toBe(false);
+        // Hidden build is public atm.
+        expect(h.buildExists(hiddenPr, '', false)).toBe(false);
+        expect(h.buildExists(hiddenPr, '', true)).toBe(true);
+      };
+
+      h.createDummyBuild(publicPr, sha9, false);
+      h.createDummyBuild(hiddenPr, sha9, true);
+      checkVisibilities();
+
+      Promise.
+        all([
+          h.runCmd(curl({number: +publicPr, action: 'foo'})).then(h.verifyResponse(200)),
+          h.runCmd(curl({number: +hiddenPr, action: 'foo'})).then(h.verifyResponse(200)),
+        ]).
+        // Visibilities should not have changed, because the specified action could not have triggered a change.
+        then(checkVisibilities).
+        then(done);
+    });
+
+
+    describe('when the visiblity has changed', () => {
+      const publicPr = pr;
+      const hiddenPr = String(c.BV_getPrIsTrusted_notTrusted);
+
+      beforeEach(() => {
+        // Create initial PR builds with opposite visibilities as the ones that will be reported:
+        // - The now public PR was previously hidden.
+        // - The now hidden PR was previously public.
+        h.createDummyBuild(publicPr, sha9, false);
+        h.createDummyBuild(hiddenPr, sha9, true);
+
+        expect(h.buildExists(publicPr, '', false)).toBe(true);
+        expect(h.buildExists(publicPr, '', true)).toBe(false);
+        expect(h.buildExists(hiddenPr, '', false)).toBe(false);
+        expect(h.buildExists(hiddenPr, '', true)).toBe(true);
+      });
+      afterEach(() => {
+        // Expect PRs' visibility to have been updated:
+        // - The public PR should be actually public (previously it was hidden).
+        // - The hidden PR should be actually hidden (previously it was public).
+        expect(h.buildExists(publicPr, '', false)).toBe(false);
+        expect(h.buildExists(publicPr, '', true)).toBe(true);
+        expect(h.buildExists(hiddenPr, '', false)).toBe(true);
+        expect(h.buildExists(hiddenPr, '', true)).toBe(false);
+
+        h.deletePrDir(publicPr, true);
+        h.deletePrDir(hiddenPr, false);
+      });
+
+
+      it('should update the PR\'s visibility (action: undefined)', done => {
+        Promise.all([
+          h.runCmd(curl({number: +publicPr})).then(h.verifyResponse(200)),
+          h.runCmd(curl({number: +hiddenPr})).then(h.verifyResponse(200)),
+        ]).then(done);
+      });
+
+
+      it('should update the PR\'s visibility (action: labeled)', done => {
+        Promise.all([
+          h.runCmd(curl({number: +publicPr, action: 'labeled'})).then(h.verifyResponse(200)),
+          h.runCmd(curl({number: +hiddenPr, action: 'labeled'})).then(h.verifyResponse(200)),
+        ]).then(done);
+      });
+
+
+      it('should update the PR\'s visibility (action: unlabeled)', done => {
+        Promise.all([
+          h.runCmd(curl({number: +publicPr, action: 'unlabeled'})).then(h.verifyResponse(200)),
+          h.runCmd(curl({number: +hiddenPr, action: 'unlabeled'})).then(h.verifyResponse(200)),
+        ]).then(done);
+      });
+
+    });
+
+  });
+
+
   describe(`${host}/*`, () => {
 
-    it('should respond with 404 for GET requests to unknown URLs', done => {
+    it('should respond with 404 for requests to unknown URLs', done => {
       const bodyRegex = /^Unknown resource/;
 
       Promise.all([
         h.runCmd(`curl -iL http://${host}/index.html`).then(h.verifyResponse(404, bodyRegex)),
         h.runCmd(`curl -iL http://${host}/`).then(h.verifyResponse(404, bodyRegex)),
         h.runCmd(`curl -iL http://${host}`).then(h.verifyResponse(404, bodyRegex)),
-      ]).then(done);
-    });
-
-
-    it('should respond with 405 for non-GET requests to any URL', done => {
-      const bodyRegex = /^Unsupported method/;
-
-      Promise.all([
-        h.runCmd(`curl -iLX PUT http://${host}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX POST http://${host}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX PATCH http://${host}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX DELETE http://${host}`).then(h.verifyResponse(405, bodyRegex)),
+        h.runCmd(`curl -iLX PUT http://${host}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX POST http://${host}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX PATCH http://${host}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX DELETE http://${host}`).then(h.verifyResponse(404, bodyRegex)),
       ]).then(done);
     });
 
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/package.json b/aio/aio-builds-setup/dockerbuild/scripts-js/package.json
index 589a7df1e0..bd9ee17b04 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/package.json
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/package.json
@@ -6,26 +6,28 @@
   "author": "Angular",
   "license": "MIT",
   "scripts": {
-    "prebuild": "yarn run clean",
+    "prebuild": "yarn clean-dist",
     "build": "tsc",
-    "build-watch": "yarn run tsc -- --watch",
-    "clean": "node --eval \"require('shelljs').rm('-rf', 'dist')\"",
-    "dev": "concurrently --kill-others --raw --success first \"yarn run build-watch\" \"yarn run test-watch\"",
+    "build-watch": "yarn tsc -- --watch",
+    "clean-dist": "node --eval \"require('shelljs').rm('-rf', 'dist')\"",
+    "dev": "concurrently --kill-others --raw --success first \"yarn build-watch\" \"yarn test-watch\"",
     "lint": "tslint --project tsconfig.json",
-    "pre~~test-only": "yarn run lint",
+    "pre~~test-only": "yarn lint",
     "~~test-only": "node dist/test",
-    "pretest": "yarn run build",
-    "test": "yarn run ~~test-only",
-    "pretest-watch": "yarn run build",
-    "test-watch": "nodemon --exec \"yarn run ~~test-only\" --watch dist"
+    "pretest": "yarn build",
+    "test": "yarn ~~test-only",
+    "pretest-watch": "yarn build",
+    "test-watch": "nodemon --exec \"yarn ~~test-only\" --watch dist"
   },
   "dependencies": {
+    "body-parser": "^1.17.2",
     "express": "^4.14.1",
     "jasmine": "^2.5.3",
     "jsonwebtoken": "^7.3.0",
     "shelljs": "^0.7.6"
   },
   "devDependencies": {
+    "@types/body-parser": "^1.16.4",
     "@types/express": "^4.0.35",
     "@types/jasmine": "^2.5.43",
     "@types/jsonwebtoken": "^7.2.0",
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/clean-up/build-cleaner.spec.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/clean-up/build-cleaner.spec.ts
index d326edb844..d6e7f262d5 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/test/clean-up/build-cleaner.spec.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/clean-up/build-cleaner.spec.ts
@@ -1,7 +1,9 @@
 // Imports
 import * as fs from 'fs';
+import * as path from 'path';
 import * as shell from 'shelljs';
 import {BuildCleaner} from '../../lib/clean-up/build-cleaner';
+import {HIDDEN_DIR_PREFIX} from '../../lib/common/constants';
 import {GithubPullRequests} from '../../lib/common/github-pull-requests';
 
 // Tests
@@ -114,7 +116,7 @@ describe('BuildCleaner', () => {
 
     it('should resolve with the value returned by \'removeUnnecessaryBuilds()\'', done => {
       promise.then(result => {
-        expect(result).toBe('Test');
+        expect(result as any).toBe('Test');
         done();
       });
 
@@ -170,6 +172,16 @@ describe('BuildCleaner', () => {
     });
 
 
+    it('should remove `HIDDEN_DIR_PREFIX` from the filenames', done => {
+      promise.then(result => {
+        expect(result).toEqual([12, 34, 56]);
+        done();
+      });
+
+      readdirCb(null, [`${HIDDEN_DIR_PREFIX}12`, '34', `${HIDDEN_DIR_PREFIX}56`]);
+    });
+
+
     it('should ignore files with non-numeric (or zero) names', done => {
       promise.then(result => {
         expect(result).toEqual([12, 34, 56]);
@@ -230,10 +242,22 @@ describe('BuildCleaner', () => {
   describe('removeDir()', () => {
     let shellChmodSpy: jasmine.Spy;
     let shellRmSpy: jasmine.Spy;
+    let shellTestSpy: jasmine.Spy;
 
     beforeEach(() => {
       shellChmodSpy = spyOn(shell, 'chmod');
       shellRmSpy = spyOn(shell, 'rm');
+      shellTestSpy = spyOn(shell, 'test').and.returnValue(true);
+    });
+
+
+    it('should test if the directory exists (and return if is does not)', () => {
+      shellTestSpy.and.returnValue(false);
+      (cleaner as any).removeDir('/foo/bar');
+
+      expect(shellTestSpy).toHaveBeenCalledWith('-d', '/foo/bar');
+      expect(shellChmodSpy).not.toHaveBeenCalled();
+      expect(shellRmSpy).not.toHaveBeenCalled();
     });
 
 
@@ -287,17 +311,28 @@ describe('BuildCleaner', () => {
     it('should construct full paths to directories (by prepending \'buildsDir\')', () => {
       (cleaner as any).removeUnnecessaryBuilds([1, 2, 3], []);
 
-      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith('/foo/bar/1');
-      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith('/foo/bar/2');
-      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith('/foo/bar/3');
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize('/foo/bar/1'));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize('/foo/bar/2'));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize('/foo/bar/3'));
+    });
+
+
+    it('should try removing hidden directories as well', () => {
+      (cleaner as any).removeUnnecessaryBuilds([1, 2, 3], []);
+
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize(`/foo/bar/${HIDDEN_DIR_PREFIX}1`));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize(`/foo/bar/${HIDDEN_DIR_PREFIX}2`));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize(`/foo/bar/${HIDDEN_DIR_PREFIX}3`));
     });
 
 
     it('should remove the builds that do not correspond to open PRs', () => {
       (cleaner as any).removeUnnecessaryBuilds([1, 2, 3, 4], [2, 4]);
-      expect(cleanerRemoveDirSpy).toHaveBeenCalledTimes(2);
-      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith('/foo/bar/1');
-      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith('/foo/bar/3');
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledTimes(4);
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize('/foo/bar/1'));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize('/foo/bar/3'));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize(`/foo/bar/${HIDDEN_DIR_PREFIX}1`));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize(`/foo/bar/${HIDDEN_DIR_PREFIX}3`));
       cleanerRemoveDirSpy.calls.reset();
 
       (cleaner as any).removeUnnecessaryBuilds([1, 2, 3, 4], [1, 2, 3, 4]);
@@ -305,11 +340,15 @@ describe('BuildCleaner', () => {
       cleanerRemoveDirSpy.calls.reset();
 
       (cleaner as any).removeUnnecessaryBuilds([1, 2, 3, 4], []);
-      expect(cleanerRemoveDirSpy).toHaveBeenCalledTimes(4);
-      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith('/foo/bar/1');
-      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith('/foo/bar/2');
-      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith('/foo/bar/3');
-      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith('/foo/bar/4');
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledTimes(8);
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize('/foo/bar/1'));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize('/foo/bar/2'));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize('/foo/bar/3'));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize('/foo/bar/4'));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize(`/foo/bar/${HIDDEN_DIR_PREFIX}1`));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize(`/foo/bar/${HIDDEN_DIR_PREFIX}2`));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize(`/foo/bar/${HIDDEN_DIR_PREFIX}3`));
+      expect(cleanerRemoveDirSpy).toHaveBeenCalledWith(path.normalize(`/foo/bar/${HIDDEN_DIR_PREFIX}4`));
       cleanerRemoveDirSpy.calls.reset();
     });
 
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-api.spec.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-api.spec.ts
index 04e93da42d..3b9bb61ec0 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-api.spec.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-api.spec.ts
@@ -292,7 +292,7 @@ describe('GithubApi', () => {
 
 
     describe('onResponse', () => {
-      let promise: Promise<void>;
+      let promise: Promise<Object>;
       let respond: (statusCode: number) => IncomingMessage;
 
       beforeEach(() => {
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-pull-requests.spec.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-pull-requests.spec.ts
index b01beeead8..a7469c13ea 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-pull-requests.spec.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-pull-requests.spec.ts
@@ -66,7 +66,7 @@ describe('GithubPullRequests', () => {
 
     it('should resolve with the returned response', done => {
       prs.addComment(42, 'body').then(data => {
-        expect(data).toEqual('Test');
+        expect(data as any).toBe('Test');
         done();
       });
 
@@ -76,6 +76,30 @@ describe('GithubPullRequests', () => {
   });
 
 
+  describe('fetch()', () => {
+    let prs: GithubPullRequests;
+    let prsGetSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      prs = new GithubPullRequests('12345', 'foo/bar');
+      prsGetSpy = spyOn(prs as any, 'get');
+    });
+
+
+    it('should call \'get()\' with the correct pathname', () => {
+      prs.fetch(42);
+      expect(prsGetSpy).toHaveBeenCalledWith('/repos/foo/bar/issues/42');
+    });
+
+
+    it('should forward the value returned by \'get()\'', () => {
+      prsGetSpy.and.returnValue('Test');
+      expect(prs.fetch(42) as any).toBe('Test');
+    });
+
+  });
+
+
   describe('fetchAll()', () => {
     let prs: GithubPullRequests;
     let prsGetPaginatedSpy: jasmine.Spy;
@@ -109,7 +133,7 @@ describe('GithubPullRequests', () => {
 
     it('should forward the value returned by \'getPaginated()\'', () => {
       prsGetPaginatedSpy.and.returnValue('Test');
-      expect(prs.fetchAll()).toBe('Test');
+      expect(prs.fetchAll() as any).toBe('Test');
     });
 
   });
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-teams.spec.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-teams.spec.ts
index cb1195dd0d..a9b03517c0 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-teams.spec.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-teams.spec.ts
@@ -38,7 +38,7 @@ describe('GithubTeams', () => {
 
     it('should forward the value returned by \'getPaginated()\'', () => {
       teamsGetPaginatedSpy.and.returnValue('Test');
-      expect(teams.fetchAll()).toBe('Test');
+      expect(teams.fetchAll() as any).toBe('Test');
     });
 
   });
@@ -50,12 +50,16 @@ describe('GithubTeams', () => {
 
     beforeEach(() => {
       teams = new GithubTeams('12345', 'foo');
-      teamsGetSpy = spyOn(teams, 'get');
+      teamsGetSpy = spyOn(teams, 'get').and.returnValue(Promise.resolve(null));
     });
 
 
-    it('should return a promise', () => {
-      expect(teams.isMemberById('user', [1])).toEqual(jasmine.any(Promise));
+    it('should return a promise', done => {
+      const promise = teams.isMemberById('user', [1]);
+      promise.then(done);   // Do not complete the test (and release the spies) synchronously
+                            // to avoid running the actual `get()`.
+
+      expect(promise).toEqual(jasmine.any(Promise));
     });
 
 
@@ -69,7 +73,6 @@ describe('GithubTeams', () => {
 
 
     it('should call \'get()\' with the correct pathname', done => {
-      teamsGetSpy.and.returnValue(Promise.resolve(null));
       teams.isMemberById('user', [1]).then(() => {
         expect(teamsGetSpy).toHaveBeenCalledWith('/teams/1/memberships/user');
         done();
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts
index 329b41b2e4..6125205ba3 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts
@@ -2,9 +2,11 @@
 import * as cp from 'child_process';
 import {EventEmitter} from 'events';
 import * as fs from 'fs';
+import * as path from 'path';
 import * as shell from 'shelljs';
+import {SHORT_SHA_LEN} from '../../lib/common/constants';
 import {BuildCreator} from '../../lib/upload-server/build-creator';
-import {CreatedBuildEvent} from '../../lib/upload-server/build-events';
+import {ChangedPrVisibilityEvent, CreatedBuildEvent} from '../../lib/upload-server/build-events';
 import {UploadError} from '../../lib/upload-server/upload-error';
 import {expectToBeUploadError} from './helpers';
 
@@ -12,10 +14,13 @@ import {expectToBeUploadError} from './helpers';
 describe('BuildCreator', () => {
   const pr = '9';
   const sha = '9'.repeat(40);
+  const shortSha = sha.substr(0, SHORT_SHA_LEN);
   const archive = 'snapshot.tar.gz';
   const buildsDir = 'builds/dir';
-  const prDir = `${buildsDir}/${pr}`;
-  const shaDir = `${prDir}/${sha}`;
+  const hiddenPrDir = path.join(buildsDir, `hidden--${pr}`);
+  const publicPrDir = path.join(buildsDir, pr);
+  const hiddenShaDir = path.join(hiddenPrDir, shortSha);
+  const publicShaDir = path.join(publicPrDir, shortSha);
   let bc: BuildCreator;
 
   beforeEach(() => bc = new BuildCreator(buildsDir));
@@ -42,6 +47,7 @@ describe('BuildCreator', () => {
     let bcEmitSpy: jasmine.Spy;
     let bcExistsSpy: jasmine.Spy;
     let bcExtractArchiveSpy: jasmine.Spy;
+    let bcUpdatePrVisibilitySpy: jasmine.Spy;
     let shellMkdirSpy: jasmine.Spy;
     let shellRmSpy: jasmine.Spy;
 
@@ -49,13 +55,214 @@ describe('BuildCreator', () => {
       bcEmitSpy = spyOn(bc, 'emit');
       bcExistsSpy = spyOn(bc as any, 'exists');
       bcExtractArchiveSpy = spyOn(bc as any, 'extractArchive');
+      bcUpdatePrVisibilitySpy = spyOn(bc, 'updatePrVisibility');
       shellMkdirSpy = spyOn(shell, 'mkdir');
       shellRmSpy = spyOn(shell, 'rm');
     });
 
 
+    [true, false].forEach(isPublic => {
+      const prDir = isPublic ? publicPrDir : hiddenPrDir;
+      const shaDir = isPublic ? publicShaDir : hiddenShaDir;
+
+
+      it('should return a promise', done => {
+        const promise = bc.create(pr, sha, archive, isPublic);
+        promise.then(done);   // Do not complete the test (and release the spies) synchronously
+                              // to avoid running the actual `extractArchive()`.
+
+        expect(promise).toEqual(jasmine.any(Promise));
+      });
+
+
+      it('should update the PR\'s visibility first if necessary', done => {
+        bcUpdatePrVisibilitySpy.and.callFake(() => expect(shellMkdirSpy).not.toHaveBeenCalled());
+
+        bc.create(pr, sha, archive, isPublic).
+          then(() => {
+            expect(bcUpdatePrVisibilitySpy).toHaveBeenCalledWith(pr, isPublic);
+            expect(shellMkdirSpy).toHaveBeenCalled();
+          }).
+          then(done);
+      });
+
+
+      it('should create the build directory (and any parent directories)', done => {
+        bc.create(pr, sha, archive, isPublic).
+          then(() => expect(shellMkdirSpy).toHaveBeenCalledWith('-p', shaDir)).
+          then(done);
+      });
+
+
+      it('should extract the archive contents into the build directory', done => {
+        bc.create(pr, sha, archive, isPublic).
+          then(() => expect(bcExtractArchiveSpy).toHaveBeenCalledWith(archive, shaDir)).
+          then(done);
+      });
+
+
+      it('should emit a CreatedBuildEvent on success', done => {
+        let emitted = false;
+
+        bcEmitSpy.and.callFake((type: string, evt: CreatedBuildEvent) => {
+          expect(type).toBe(CreatedBuildEvent.type);
+          expect(evt).toEqual(jasmine.any(CreatedBuildEvent));
+          expect(evt.pr).toBe(+pr);
+          expect(evt.sha).toBe(shortSha);
+          expect(evt.isPublic).toBe(isPublic);
+
+          emitted = true;
+        });
+
+        bc.create(pr, sha, archive, isPublic).
+          then(() => expect(emitted).toBe(true)).
+          then(done);
+      });
+
+
+      describe('on error', () => {
+        let existsValues: {[dir: string]: boolean};
+
+        beforeEach(() => {
+          existsValues = {
+            [prDir]: false,
+            [shaDir]: false,
+          };
+
+          bcExistsSpy.and.callFake((dir: string) => existsValues[dir]);
+        });
+
+
+        it('should abort and skip further operations if changing the PR\'s visibility fails', done => {
+          const mockError = new UploadError(543, 'Test');
+          bcUpdatePrVisibilitySpy.and.returnValue(Promise.reject(mockError));
+
+          bc.create(pr, sha, archive, isPublic).catch(err => {
+            expect(err).toBe(mockError);
+
+            expect(bcExistsSpy).not.toHaveBeenCalled();
+            expect(shellMkdirSpy).not.toHaveBeenCalled();
+            expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+
+            done();
+          });
+        });
+
+
+        it('should abort and skip further operations if the build does already exist', done => {
+          existsValues[shaDir] = true;
+          bc.create(pr, sha, archive, isPublic).catch(err => {
+            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
+            expect(shellMkdirSpy).not.toHaveBeenCalled();
+            expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+            done();
+          });
+        });
+
+
+        it('should detect existing build directory after visibility change', done => {
+          bcUpdatePrVisibilitySpy.and.callFake(() => existsValues[prDir] = existsValues[shaDir] = true);
+
+          expect(bcExistsSpy(prDir)).toBe(false);
+          expect(bcExistsSpy(shaDir)).toBe(false);
+
+          bc.create(pr, sha, archive, isPublic).catch(err => {
+            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
+            expect(shellMkdirSpy).not.toHaveBeenCalled();
+            expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+            done();
+          });
+        });
+
+
+        it('should abort and skip further operations if it fails to create the directories', done => {
+          shellMkdirSpy.and.throwError('');
+          bc.create(pr, sha, archive, isPublic).catch(() => {
+            expect(shellMkdirSpy).toHaveBeenCalled();
+            expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+            done();
+          });
+        });
+
+
+        it('should abort and skip further operations if it fails to extract the archive', done => {
+          bcExtractArchiveSpy.and.throwError('');
+          bc.create(pr, sha, archive, isPublic).catch(() => {
+            expect(shellMkdirSpy).toHaveBeenCalled();
+            expect(bcExtractArchiveSpy).toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+            done();
+          });
+        });
+
+
+        it('should delete the PR directory (for new PR)', done => {
+          bcExtractArchiveSpy.and.throwError('');
+          bc.create(pr, sha, archive, isPublic).catch(() => {
+            expect(shellRmSpy).toHaveBeenCalledWith('-rf', prDir);
+            done();
+          });
+        });
+
+
+        it('should delete the SHA directory (for existing PR)', done => {
+          existsValues[prDir] = true;
+          bcExtractArchiveSpy.and.throwError('');
+
+          bc.create(pr, sha, archive, isPublic).catch(() => {
+            expect(shellRmSpy).toHaveBeenCalledWith('-rf', shaDir);
+            done();
+          });
+        });
+
+
+        it('should reject with an UploadError', done => {
+          shellMkdirSpy.and.callFake(() => { throw 'Test'; });
+          bc.create(pr, sha, archive, isPublic).catch(err => {
+            expectToBeUploadError(err, 500, `Error while uploading to directory: ${shaDir}\nTest`);
+            done();
+          });
+        });
+
+
+        it('should pass UploadError instances unmodified', done => {
+          shellMkdirSpy.and.callFake(() => { throw new UploadError(543, 'Test'); });
+          bc.create(pr, sha, archive, isPublic).catch(err => {
+            expectToBeUploadError(err, 543, 'Test');
+            done();
+          });
+        });
+
+      });
+
+    });
+
+  });
+
+
+  describe('updatePrVisibility()', () => {
+    let bcEmitSpy: jasmine.Spy;
+    let bcExistsSpy: jasmine.Spy;
+    let bcListShasByDate: jasmine.Spy;
+    let shellMvSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      bcEmitSpy = spyOn(bc, 'emit');
+      bcExistsSpy = spyOn(bc as any, 'exists');
+      bcListShasByDate = spyOn(bc as any, 'listShasByDate');
+      shellMvSpy = spyOn(shell, 'mv');
+
+      bcExistsSpy.and.returnValues(Promise.resolve(true), Promise.resolve(false));
+      bcListShasByDate.and.returnValue([]);
+    });
+
+
     it('should return a promise', done => {
-      const promise = bc.create(pr, sha, archive);
+      const promise = bc.updatePrVisibility(pr, true);
       promise.then(done);   // Do not complete the test (and release the spies) synchronously
                             // to avoid running the actual `extractArchive()`.
 
@@ -63,106 +270,157 @@ describe('BuildCreator', () => {
     });
 
 
-    it('should throw if the build does already exist', done => {
-      bcExistsSpy.and.returnValue(true);
-      bc.create(pr, sha, archive).catch(err => {
-        expectToBeUploadError(err, 403, `Request to overwrite existing directory: ${shaDir}`);
-        done();
-      });
-    });
+    [true, false].forEach(makePublic => {
+      const oldPrDir = makePublic ? hiddenPrDir : publicPrDir;
+      const newPrDir = makePublic ? publicPrDir : hiddenPrDir;
 
 
-    it('should create the build directory (and any parent directories)', done => {
-      bc.create(pr, sha, archive).
-        then(() => expect(shellMkdirSpy).toHaveBeenCalledWith('-p', shaDir)).
-        then(done);
-    });
-
-
-    it('should extract the archive contents into the build directory', done => {
-      bc.create(pr, sha, archive).
-        then(() => expect(bcExtractArchiveSpy).toHaveBeenCalledWith(archive, shaDir)).
-        then(done);
-    });
-
-
-    it('should emit a CreatedBuildEvent on success', done => {
-      let emitted = false;
-
-      bcEmitSpy.and.callFake((type: string, evt: CreatedBuildEvent) => {
-        expect(type).toBe(CreatedBuildEvent.type);
-        expect(evt).toEqual(jasmine.any(CreatedBuildEvent));
-        expect(evt.pr).toBe(+pr);
-        expect(evt.sha).toBe(sha);
-
-        emitted = true;
+      it('should rename the directory', done => {
+        bc.updatePrVisibility(pr, makePublic).
+          then(() => expect(shellMvSpy).toHaveBeenCalledWith(oldPrDir, newPrDir)).
+          then(done);
       });
 
-      bc.create(pr, sha, archive).
-        then(() => expect(emitted).toBe(true)).
-        then(done);
-    });
 
+      describe('when the visibility is updated', () => {
 
-    describe('on error', () => {
-
-      it('should abort and skip further operations if it fails to create the directories', done => {
-        shellMkdirSpy.and.throwError('');
-        bc.create(pr, sha, archive).catch(() => {
-          expect(shellMkdirSpy).toHaveBeenCalled();
-          expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
-          expect(bcEmitSpy).not.toHaveBeenCalled();
-          done();
+        it('should resolve to true', done => {
+          bc.updatePrVisibility(pr, makePublic).
+            then(result => expect(result).toBe(true)).
+            then(done);
         });
+
+
+        it('should rename the directory', done => {
+          bc.updatePrVisibility(pr, makePublic).
+            then(() => expect(shellMvSpy).toHaveBeenCalledWith(oldPrDir, newPrDir)).
+            then(done);
+        });
+
+
+        it('should emit a ChangedPrVisibilityEvent on success', done => {
+          let emitted = false;
+
+          bcEmitSpy.and.callFake((type: string, evt: ChangedPrVisibilityEvent) => {
+            expect(type).toBe(ChangedPrVisibilityEvent.type);
+            expect(evt).toEqual(jasmine.any(ChangedPrVisibilityEvent));
+            expect(evt.pr).toBe(+pr);
+            expect(evt.shas).toEqual(jasmine.any(Array));
+            expect(evt.isPublic).toBe(makePublic);
+
+            emitted = true;
+          });
+
+          bc.updatePrVisibility(pr, makePublic).
+            then(() => expect(emitted).toBe(true)).
+            then(done);
+        });
+
+
+        it('should include all shas in the emitted event', done => {
+          const shas = ['foo', 'bar', 'baz'];
+          let emitted = false;
+
+          bcListShasByDate.and.returnValue(Promise.resolve(shas));
+          bcEmitSpy.and.callFake((type: string, evt: ChangedPrVisibilityEvent) => {
+            expect(bcListShasByDate).toHaveBeenCalledWith(newPrDir);
+
+            expect(type).toBe(ChangedPrVisibilityEvent.type);
+            expect(evt).toEqual(jasmine.any(ChangedPrVisibilityEvent));
+            expect(evt.pr).toBe(+pr);
+            expect(evt.shas).toBe(shas);
+            expect(evt.isPublic).toBe(makePublic);
+
+            emitted = true;
+          });
+
+          bc.updatePrVisibility(pr, makePublic).
+            then(() => expect(emitted).toBe(true)).
+            then(done);
+        });
+
       });
 
 
-      it('should abort and skip further operations if it fails to extract the archive', done => {
-        bcExtractArchiveSpy.and.throwError('');
-        bc.create(pr, sha, archive).catch(() => {
-          expect(shellMkdirSpy).toHaveBeenCalled();
-          expect(bcExtractArchiveSpy).toHaveBeenCalled();
-          expect(bcEmitSpy).not.toHaveBeenCalled();
-          done();
-        });
+      it('should do nothing if the visibility is already up-to-date', done => {
+        bcExistsSpy.and.callFake((dir: string) => dir === newPrDir);
+        bc.updatePrVisibility(pr, makePublic).
+          then(result => {
+            expect(result).toBe(false);
+            expect(shellMvSpy).not.toHaveBeenCalled();
+            expect(bcListShasByDate).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+          }).
+          then(done);
       });
 
 
-      it('should delete the PR directory (for new PR)', done => {
-        bcExtractArchiveSpy.and.throwError('');
-        bc.create(pr, sha, archive).catch(() => {
-          expect(shellRmSpy).toHaveBeenCalledWith('-rf', prDir);
-          done();
-        });
+      it('should do nothing if the PR directory does not exist', done => {
+        bcExistsSpy.and.returnValue(false);
+        bc.updatePrVisibility(pr, makePublic).
+          then(result => {
+            expect(result).toBe(false);
+            expect(shellMvSpy).not.toHaveBeenCalled();
+            expect(bcListShasByDate).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+          }).
+          then(done);
       });
 
 
-      it('should delete the SHA directory (for existing PR)', done => {
-        bcExistsSpy.and.callFake((path: string) => path !== shaDir);
-        bcExtractArchiveSpy.and.throwError('');
+      describe('on error', () => {
 
-        bc.create(pr, sha, archive).catch(() => {
-          expect(shellRmSpy).toHaveBeenCalledWith('-rf', shaDir);
-          done();
+        it('should abort and skip further operations if both directories exist', done => {
+          bcExistsSpy.and.returnValue(true);
+          bc.updatePrVisibility(pr, makePublic).catch(err => {
+            expectToBeUploadError(err, 409, `Request to move '${oldPrDir}' to existing directory '${newPrDir}'.`);
+            expect(shellMvSpy).not.toHaveBeenCalled();
+            expect(bcListShasByDate).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+            done();
+          });
         });
-      });
 
 
-      it('should reject with an UploadError', done => {
-        shellMkdirSpy.and.callFake(() => {throw 'Test'; });
-        bc.create(pr, sha, archive).catch(err => {
-          expectToBeUploadError(err, 500, `Error while uploading to directory: ${shaDir}\nTest`);
-          done();
+        it('should abort and skip further operations if it fails to rename the directory', done => {
+          shellMvSpy.and.throwError('');
+          bc.updatePrVisibility(pr, makePublic).catch(() => {
+            expect(shellMvSpy).toHaveBeenCalled();
+            expect(bcListShasByDate).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+            done();
+          });
         });
-      });
 
 
-      it('should pass UploadError instances unmodified', done => {
-        shellMkdirSpy.and.callFake(() => { throw new UploadError(543, 'Test'); });
-        bc.create(pr, sha, archive).catch(err => {
-          expectToBeUploadError(err, 543, 'Test');
-          done();
+        it('should abort and skip further operations if it fails to list the SHAs', done => {
+          bcListShasByDate.and.throwError('');
+          bc.updatePrVisibility(pr, makePublic).catch(() => {
+            expect(shellMvSpy).toHaveBeenCalled();
+            expect(bcListShasByDate).toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+            done();
+          });
         });
+
+
+        it('should reject with an UploadError', done => {
+          shellMvSpy.and.callFake(() => { throw 'Test'; });
+          bc.updatePrVisibility(pr, makePublic).catch(err => {
+            expectToBeUploadError(err, 500, `Error while making PR ${pr} ${makePublic ? 'public' : 'hidden'}.\nTest`);
+            done();
+          });
+        });
+
+
+        it('should pass UploadError instances unmodified', done => {
+          shellMvSpy.and.callFake(() => { throw new UploadError(543, 'Test'); });
+          bc.updatePrVisibility(pr, makePublic).catch(err => {
+            expectToBeUploadError(err, 543, 'Test');
+            done();
+          });
+        });
+
       });
 
     });
@@ -317,4 +575,101 @@ describe('BuildCreator', () => {
 
   });
 
+
+  describe('listShasByDate()', () => {
+    let shellLsSpy: jasmine.Spy;
+    const lsResult = (name: string, mtimeMs: number, isDirectory = true) => ({
+      isDirectory: () => isDirectory,
+      mtime: new Date(mtimeMs),
+      name,
+    });
+
+    beforeEach(() => {
+      shellLsSpy = spyOn(shell, 'ls').and.returnValue([]);
+    });
+
+
+    it('should return a promise', done => {
+      const promise = (bc as any).listShasByDate('input/dir');
+      promise.then(done);   // Do not complete the test (and release the spies) synchronously
+                            // to avoid running the actual `ls()`.
+
+      expect(promise).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should `ls()` files with their metadata', done => {
+      (bc as any).listShasByDate('input/dir').
+        then(() => expect(shellLsSpy).toHaveBeenCalledWith('-l', 'input/dir')).
+        then(done);
+    });
+
+
+    it('should reject if listing files fails', done => {
+      shellLsSpy.and.returnValue(Promise.reject('Test'));
+      (bc as any).listShasByDate('input/dir').catch((err: string) => {
+        expect(err).toBe('Test');
+        done();
+      });
+    });
+
+
+    it('should return the filenames', done => {
+      shellLsSpy.and.returnValue(Promise.resolve([
+        lsResult('foo', 100),
+        lsResult('bar', 200),
+        lsResult('baz', 300),
+      ]));
+
+      (bc as any).listShasByDate('input/dir').
+        then((shas: string[]) => expect(shas).toEqual(['foo', 'bar', 'baz'])).
+        then(done);
+    });
+
+
+    it('should sort by date', done => {
+      shellLsSpy.and.returnValue(Promise.resolve([
+        lsResult('foo', 300),
+        lsResult('bar', 100),
+        lsResult('baz', 200),
+      ]));
+
+      (bc as any).listShasByDate('input/dir').
+        then((shas: string[]) => expect(shas).toEqual(['bar', 'baz', 'foo'])).
+        then(done);
+    });
+
+
+    it('should not break with ShellJS\' custom `sort()` method', done => {
+      const mockArray = [
+        lsResult('foo', 300),
+        lsResult('bar', 100),
+        lsResult('baz', 200),
+      ];
+      mockArray.sort = jasmine.createSpy('sort');
+
+      shellLsSpy.and.returnValue(Promise.resolve(mockArray));
+      (bc as any).listShasByDate('input/dir').
+        then((shas: string[]) => {
+          expect(shas).toEqual(['bar', 'baz', 'foo']);
+          expect(mockArray.sort).not.toHaveBeenCalled();
+        }).
+        then(done);
+    });
+
+
+    it('should only include directories', done => {
+      shellLsSpy.and.returnValue(Promise.resolve([
+        lsResult('foo', 100),
+        lsResult('bar', 200, false),
+        lsResult('baz', 300),
+      ]));
+
+      (bc as any).listShasByDate('input/dir').
+        then((shas: string[]) => expect(shas).toEqual(['foo', 'baz'])).
+        then(done);
+    });
+
+  });
+
 });
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-events.spec.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-events.spec.ts
index 868e6ce352..73214f3d9e 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-events.spec.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-events.spec.ts
@@ -1,15 +1,15 @@
 // Imports
-import {BuildEvent, CreatedBuildEvent} from '../../lib/upload-server/build-events';
+import {ChangedPrVisibilityEvent, CreatedBuildEvent} from '../../lib/upload-server/build-events';
 
 // Tests
-describe('BuildEvent', () => {
-  let evt: BuildEvent;
+describe('ChangedPrVisibilityEvent', () => {
+  let evt: ChangedPrVisibilityEvent;
 
-  beforeEach(() => evt = new BuildEvent('foo', 42, 'bar'));
+  beforeEach(() => evt = new ChangedPrVisibilityEvent(42, ['foo', 'bar'], true));
 
 
-  it('should have a \'type\' property', () => {
-    expect(evt.type).toBe('foo');
+  it('should have a static \'type\' property', () => {
+    expect(ChangedPrVisibilityEvent.type).toBe('pr.changedVisibility');
   });
 
 
@@ -18,8 +18,13 @@ describe('BuildEvent', () => {
   });
 
 
-  it('should have a \'sha\' property', () => {
-    expect(evt.sha).toBe('bar');
+  it('should have a \'shas\' property', () => {
+    expect(evt.shas).toEqual(['foo', 'bar']);
+  });
+
+
+  it('should have an \'isPublic\' property', () => {
+    expect(evt.isPublic).toBe(true);
   });
 
 });
@@ -28,7 +33,7 @@ describe('BuildEvent', () => {
 describe('CreatedBuildEvent', () => {
   let evt: CreatedBuildEvent;
 
-  beforeEach(() => evt = new CreatedBuildEvent(42, 'bar'));
+  beforeEach(() => evt = new CreatedBuildEvent(42, 'bar', true));
 
 
   it('should have a static \'type\' property', () => {
@@ -36,19 +41,6 @@ describe('CreatedBuildEvent', () => {
   });
 
 
-  it('should extend BuildEvent', () => {
-    expect(evt).toEqual(jasmine.any(CreatedBuildEvent));
-    expect(evt).toEqual(jasmine.any(BuildEvent));
-
-    expect(Object.getPrototypeOf(evt)).toBe(CreatedBuildEvent.prototype);
-  });
-
-
-  it('should automatically set the \'type\'', () => {
-    expect(evt.type).toBe(CreatedBuildEvent.type);
-  });
-
-
   it('should have a \'pr\' property', () => {
     expect(evt.pr).toBe(42);
   });
@@ -58,4 +50,9 @@ describe('CreatedBuildEvent', () => {
     expect(evt.sha).toBe('bar');
   });
 
+
+  it('should have an \'isPublic\' property', () => {
+    expect(evt.isPublic).toBe(true);
+  });
+
 });
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-verifier.spec.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-verifier.spec.ts
index 9cb37c12dc..aa8f501aa3 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-verifier.spec.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-verifier.spec.ts
@@ -1,8 +1,8 @@
 // Imports
 import * as jwt from 'jsonwebtoken';
-import {GithubPullRequests} from '../../lib/common/github-pull-requests';
+import {GithubPullRequests, PullRequest} from '../../lib/common/github-pull-requests';
 import {GithubTeams} from '../../lib/common/github-teams';
-import {BuildVerifier} from '../../lib/upload-server/build-verifier';
+import {BUILD_VERIFICATION_STATUS, BuildVerifier} from '../../lib/upload-server/build-verifier';
 import {expectToBeUploadError} from './helpers';
 
 // Tests
@@ -13,14 +13,15 @@ describe('BuildVerifier', () => {
     organization: 'organization',
     repoSlug: 'repo/slug',
     secret: 'secret',
+    trustedPrLabel: 'trusted: pr-label',
   };
   let bv: BuildVerifier;
 
   // Helpers
   const createBuildVerifier = (partialConfig: Partial<typeof defaultConfig> = {}) => {
-    const cfg = {...defaultConfig, ...partialConfig};
+    const cfg = {...defaultConfig, ...partialConfig} as typeof defaultConfig;
     return new BuildVerifier(cfg.secret, cfg.githubToken, cfg.repoSlug, cfg.organization,
-                             cfg.allowedTeamSlugs);
+                             cfg.allowedTeamSlugs, cfg.trustedPrLabel);
   };
 
   beforeEach(() => bv = createBuildVerifier());
@@ -28,12 +29,13 @@ describe('BuildVerifier', () => {
 
   describe('constructor()', () => {
 
-    ['secret', 'githubToken', 'repoSlug', 'organization', 'allowedTeamSlugs'].forEach(param => {
-      it(`should throw if '${param}' is missing or empty`, () => {
-        expect(() => createBuildVerifier({[param]: ''})).
-          toThrowError(`Missing or empty required parameter '${param}'!`);
+    ['secret', 'githubToken', 'repoSlug', 'organization', 'allowedTeamSlugs', 'trustedPrLabel'].
+      forEach(param => {
+        it(`should throw if '${param}' is missing or empty`, () => {
+          expect(() => createBuildVerifier({[param]: ''})).
+            toThrowError(`Missing or empty required parameter '${param}'!`);
+        });
       });
-    });
 
 
     it('should throw if \'allowedTeamSlugs\' is an empty array', () => {
@@ -44,6 +46,122 @@ describe('BuildVerifier', () => {
   });
 
 
+  describe('getPrIsTrusted()', () => {
+    const pr = 9;
+    let mockPrInfo: PullRequest;
+    let prsFetchSpy: jasmine.Spy;
+    let teamsIsMemberBySlugSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      mockPrInfo = {
+        labels: [
+          {name: 'foo'},
+          {name: 'bar'},
+        ],
+        number: 9,
+        user: {login: 'username'},
+      };
+
+      prsFetchSpy = spyOn(GithubPullRequests.prototype, 'fetch').
+        and.returnValue(Promise.resolve(mockPrInfo));
+
+      teamsIsMemberBySlugSpy = spyOn(GithubTeams.prototype, 'isMemberBySlug').
+        and.returnValue(Promise.resolve(true));
+    });
+
+
+    it('should return a promise', done => {
+      const promise = bv.getPrIsTrusted(pr);
+      promise.then(done);   // Do not complete the test (and release the spies) synchronously
+                            // to avoid running the actual `GithubTeams#isMemberBySlug()`.
+
+      expect(promise).toEqual(jasmine.any(Promise));
+    });
+
+
+    it('should fetch the corresponding PR', done => {
+      bv.getPrIsTrusted(pr).then(() => {
+        expect(prsFetchSpy).toHaveBeenCalledWith(pr);
+        done();
+      });
+    });
+
+
+    it('should fail if fetching the PR errors', done => {
+      prsFetchSpy.and.callFake(() => Promise.reject('Test'));
+      bv.getPrIsTrusted(pr).catch(err => {
+        expect(err).toBe('Test');
+        done();
+      });
+    });
+
+
+    describe('when the PR has the "trusted PR" label', () => {
+
+      beforeEach(() => mockPrInfo.labels.push({name: 'trusted: pr-label'}));
+
+
+      it('should resolve to true', done => {
+        bv.getPrIsTrusted(pr).then(isTrusted => {
+          expect(isTrusted).toBe(true);
+          done();
+        });
+      });
+
+
+      it('should not try to verify the author\'s membership status', done => {
+        bv.getPrIsTrusted(pr).then(() => {
+          expect(teamsIsMemberBySlugSpy).not.toHaveBeenCalled();
+          done();
+        });
+      });
+
+    });
+
+
+    describe('when the PR does not have the "trusted PR" label', () => {
+
+      it('should verify the PR author\'s membership in the specified teams', done => {
+        bv.getPrIsTrusted(pr).then(() => {
+          expect(teamsIsMemberBySlugSpy).toHaveBeenCalledWith('username', ['team1', 'team2']);
+          done();
+        });
+      });
+
+
+      it('should fail if verifying membership errors', done => {
+        teamsIsMemberBySlugSpy.and.callFake(() => Promise.reject('Test'));
+        bv.getPrIsTrusted(pr).catch(err => {
+          expect(err).toBe('Test');
+          done();
+        });
+      });
+
+
+      it('should resolve to true if the PR\'s author is a member', done => {
+        teamsIsMemberBySlugSpy.and.returnValue(Promise.resolve(true));
+
+        bv.getPrIsTrusted(pr).then(isTrusted => {
+          expect(isTrusted).toBe(true);
+          done();
+        });
+      });
+
+
+      it('should resolve to false if the PR\'s author is not a member', done => {
+        teamsIsMemberBySlugSpy.and.returnValue(Promise.resolve(false));
+
+        bv.getPrIsTrusted(pr).then(isTrusted => {
+          expect(isTrusted).toBe(false);
+          done();
+        });
+      });
+
+    });
+
+  });
+
+
   describe('verify()', () => {
     const pr = 9;
     const defaultJwt = {
@@ -53,22 +171,21 @@ describe('BuildVerifier', () => {
       'pull-request': pr,
       'slug': defaultConfig.repoSlug,
     };
-    let bvGetPrAuthorTeamMembership: jasmine.Spy;
+    let bvGetPrIsTrusted: jasmine.Spy;
 
     // Heleprs
     const createAuthHeader = (partialJwt: Partial<typeof defaultJwt> = {}, secret: string = defaultConfig.secret) =>
       `Token ${jwt.sign({...defaultJwt, ...partialJwt}, secret)}`;
 
     beforeEach(() => {
-      bvGetPrAuthorTeamMembership = spyOn(bv, 'getPrAuthorTeamMembership').
-        and.returnValue(Promise.resolve({author: 'some-author', isMember: true}));
+      bvGetPrIsTrusted = spyOn(bv, 'getPrIsTrusted').and.returnValue(Promise.resolve(true));
     });
 
 
     it('should return a promise', done => {
       const promise = bv.verify(pr, createAuthHeader());
       promise.then(done);   // Do not complete the test (and release the spies) synchronously
-                            // to avoid running the actual `bvGetPrAuthorTeamMembership()`.
+                            // to avoid running the actual `bvGetPrIsTrusted()`.
 
       expect(promise).toEqual(jasmine.any(Promise));
     });
@@ -148,16 +265,16 @@ describe('BuildVerifier', () => {
     });
 
 
-    it('should call \'getPrAuthorTeamMembership()\' if the token is valid', done => {
+    it('should call \'getPrIsTrusted()\' if the token is valid', done => {
       bv.verify(pr, createAuthHeader()).then(() => {
-        expect(bvGetPrAuthorTeamMembership).toHaveBeenCalledWith(pr);
+        expect(bvGetPrIsTrusted).toHaveBeenCalledWith(pr);
         done();
       });
     });
 
 
-    it('should fail if \'getPrAuthorTeamMembership()\' rejects', done => {
-      bvGetPrAuthorTeamMembership.and.callFake(() => Promise.reject('Test'));
+    it('should fail if \'getPrIsTrusted()\' rejects', done => {
+      bvGetPrIsTrusted.and.callFake(() => Promise.reject('Test'));
       bv.verify(pr, createAuthHeader()).catch(err => {
         expectToBeUploadError(err, 403, `Error while verifying upload for PR ${pr}: Test`);
         done();
@@ -165,97 +282,22 @@ describe('BuildVerifier', () => {
     });
 
 
-    it('should fail if \'getPrAuthorTeamMembership()\' reports no membership', done => {
-      const errorMessage = `Error while verifying upload for PR ${pr}: User 'test' is not an active member of any of ` +
-                           'the following teams: team1, team2';
-
-      bvGetPrAuthorTeamMembership.and.returnValue(Promise.resolve({author: 'test', isMember: false}));
-      bv.verify(pr, createAuthHeader()).catch(err => {
-        expectToBeUploadError(err, 403, errorMessage);
+    it('should resolve to `verifiedNotTrusted` if \'getPrIsTrusted()\' returns false', done => {
+      bvGetPrIsTrusted.and.returnValue(Promise.resolve(false));
+      bv.verify(pr, createAuthHeader()).then(value => {
+        expect(value).toBe(BUILD_VERIFICATION_STATUS.verifiedNotTrusted);
         done();
       });
     });
 
 
-    it('should succeed if everything checks outs', done => {
-      bv.verify(pr, createAuthHeader()).then(done);
-    });
-
-  });
-
-
-  describe('getPrAuthorTeamMembership()', () => {
-    const pr = 9;
-    let prsFetchSpy: jasmine.Spy;
-    let teamsIsMemberBySlugSpy: jasmine.Spy;
-
-    beforeEach(() => {
-      prsFetchSpy = spyOn(GithubPullRequests.prototype, 'fetch').
-        and.returnValue(Promise.resolve({user: {login: 'username'}}));
-
-      teamsIsMemberBySlugSpy = spyOn(GithubTeams.prototype, 'isMemberBySlug').
-        and.returnValue(Promise.resolve(true));
-    });
-
-
-    it('should return a promise', done => {
-      const promise = bv.getPrAuthorTeamMembership(pr);
-      promise.then(done);   // Do not complete the test (and release the spies) synchronously
-                            // to avoid running the actual `GithubTeams#isMemberBySlug()`.
-
-      expect(promise).toEqual(jasmine.any(Promise));
-    });
-
-
-    it('should fetch the corresponding PR', done => {
-      bv.getPrAuthorTeamMembership(pr).then(() => {
-        expect(prsFetchSpy).toHaveBeenCalledWith(pr);
+    it('should resolve to `verifiedAndTrusted` if \'getPrIsTrusted()\' returns true', done => {
+      bv.verify(pr, createAuthHeader()).then(value => {
+        expect(value).toBe(BUILD_VERIFICATION_STATUS.verifiedAndTrusted);
         done();
       });
     });
 
-
-    it('should fail if fetching the PR errors', done => {
-      prsFetchSpy.and.callFake(() => Promise.reject('Test'));
-      bv.getPrAuthorTeamMembership(pr).catch(err => {
-        expect(err).toBe('Test');
-        done();
-      });
-    });
-
-
-    it('should verify the PR author\'s membership in the specified teams', done => {
-      bv.getPrAuthorTeamMembership(pr).then(() => {
-        expect(teamsIsMemberBySlugSpy).toHaveBeenCalledWith('username', ['team1', 'team2']);
-        done();
-      });
-    });
-
-
-    it('should fail if verifying membership errors', done => {
-      teamsIsMemberBySlugSpy.and.callFake(() => Promise.reject('Test'));
-      bv.getPrAuthorTeamMembership(pr).catch(err => {
-        expect(err).toBe('Test');
-        done();
-      });
-    });
-
-
-    it('should return the PR\'s author and whether they are members', done => {
-      teamsIsMemberBySlugSpy.and.returnValues(Promise.resolve(true), Promise.resolve(false));
-
-      Promise.all([
-        bv.getPrAuthorTeamMembership(pr).then(({author, isMember}) => {
-          expect(author).toBe('username');
-          expect(isMember).toBe(true);
-        }),
-        bv.getPrAuthorTeamMembership(pr).then(({author, isMember}) => {
-          expect(author).toBe('username');
-          expect(isMember).toBe(false);
-        }),
-      ]).then(done);
-    });
-
   });
 
 });
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/upload-server-factory.spec.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/upload-server-factory.spec.ts
index 3784b747a2..c2b406b3e0 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/upload-server-factory.spec.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/upload-server-factory.spec.ts
@@ -4,8 +4,8 @@ import * as http from 'http';
 import * as supertest from 'supertest';
 import {GithubPullRequests} from '../../lib/common/github-pull-requests';
 import {BuildCreator} from '../../lib/upload-server/build-creator';
-import {CreatedBuildEvent} from '../../lib/upload-server/build-events';
-import {BuildVerifier} from '../../lib/upload-server/build-verifier';
+import {ChangedPrVisibilityEvent, CreatedBuildEvent} from '../../lib/upload-server/build-events';
+import {BUILD_VERIFICATION_STATUS, BuildVerifier} from '../../lib/upload-server/build-verifier';
 import {uploadServerFactory as usf} from '../../lib/upload-server/upload-server-factory';
 
 // Tests
@@ -18,11 +18,12 @@ describe('uploadServerFactory', () => {
     githubToken: '12345',
     repoSlug: 'repo/slug',
     secret: 'secret',
+    trustedPrLabel: 'trusted: pr-label',
   };
 
   // Helpers
   const createUploadServer = (partialConfig: Partial<typeof defaultConfig> = {}) =>
-    usf.create({...defaultConfig, ...partialConfig});
+    usf.create({...defaultConfig, ...partialConfig} as typeof defaultConfig);
 
 
   describe('create()', () => {
@@ -75,6 +76,12 @@ describe('uploadServerFactory', () => {
     });
 
 
+    it('should throw if \'trustedPrLabel\' is missing or empty', () => {
+      expect(() => createUploadServer({trustedPrLabel: ''})).
+        toThrowError('Missing or empty required parameter \'trustedPrLabel\'!');
+    });
+
+
     it('should return an http.Server', () => {
       const httpCreateServerSpy = spyOn(http, 'createServer').and.callThrough();
       const server = createUploadServer();
@@ -141,26 +148,71 @@ describe('uploadServerFactory', () => {
     });
 
 
-    it('should post a comment on GitHub on \'build.created\'', () => {
-      const prsAddCommentSpy = spyOn(GithubPullRequests.prototype, 'addComment');
-      const commentBody = 'The angular.io preview for 1234567 is available [here][1].\n\n' +
-                          '[1]: https://pr42-1234567890.domain.name/';
+    describe('on \'build.created\'', () => {
+      let prsAddCommentSpy: jasmine.Spy;
 
-      buildCreator.emit(CreatedBuildEvent.type, {pr: 42, sha: '1234567890'});
+      beforeEach(() => prsAddCommentSpy = spyOn(GithubPullRequests.prototype, 'addComment'));
+
+
+      it('should post a comment on GitHub for public previews', () => {
+        const commentBody = 'You can preview 1234567890 at https://pr42-1234567890.domain.name/.';
+
+        buildCreator.emit(CreatedBuildEvent.type, {pr: 42, sha: '1234567890', isPublic: true});
+        expect(prsAddCommentSpy).toHaveBeenCalledWith(42, commentBody);
+      });
+
+
+      it('should not post a comment on GitHub for non-public previews', () => {
+        buildCreator.emit(CreatedBuildEvent.type, {pr: 42, sha: '1234567890', isPublic: false});
+        expect(prsAddCommentSpy).not.toHaveBeenCalled();
+      });
+
+    });
+
+
+    describe('on \'pr.changedVisibility\'', () => {
+      let prsAddCommentSpy: jasmine.Spy;
+
+      beforeEach(() => prsAddCommentSpy = spyOn(GithubPullRequests.prototype, 'addComment'));
+
+
+      it('should post a comment on GitHub (for all SHAs) for PRs made public', () => {
+        const commentBody = 'You can preview 12345 at https://pr42-12345.domain.name/.\n' +
+                            'You can preview 67890 at https://pr42-67890.domain.name/.';
+
+        buildCreator.emit(ChangedPrVisibilityEvent.type, {pr: 42, shas: ['12345', '67890'], isPublic: true});
+        expect(prsAddCommentSpy).toHaveBeenCalledWith(42, commentBody);
+      });
+
+
+      it('should not post a comment on GitHub if no SHAs were affected', () => {
+        buildCreator.emit(ChangedPrVisibilityEvent.type, {pr: 42, shas: [], isPublic: true});
+        expect(prsAddCommentSpy).not.toHaveBeenCalled();
+      });
+
+
+      it('should not post a comment on GitHub for PRs made non-public', () => {
+        buildCreator.emit(ChangedPrVisibilityEvent.type, {pr: 42, shas: ['12345', '67890'], isPublic: false});
+        expect(prsAddCommentSpy).not.toHaveBeenCalled();
+      });
 
-      expect(prsAddCommentSpy).toHaveBeenCalledWith(42, commentBody);
     });
 
 
     it('should pass the correct \'githubToken\' and \'repoSlug\' to GithubPullRequests', () => {
       const prsAddCommentSpy = spyOn(GithubPullRequests.prototype, 'addComment');
 
-      buildCreator.emit(CreatedBuildEvent.type, {pr: 42, sha: '1234567890'});
-      const prs = prsAddCommentSpy.calls.mostRecent().object;
+      buildCreator.emit(CreatedBuildEvent.type, {pr: 42, sha: '1234567890', isPublic: true});
+      buildCreator.emit(ChangedPrVisibilityEvent.type, {pr: 42, shas: ['12345', '67890'], isPublic: true});
 
+      const allCalls = prsAddCommentSpy.calls.all();
+      const prs = allCalls[0].object;
+
+      expect(prsAddCommentSpy).toHaveBeenCalledTimes(2);
+      expect(prs).toBe(allCalls[1].object);
       expect(prs).toEqual(jasmine.any(GithubPullRequests));
-      expect((prs as any).repoSlug).toBe('repo/slug');
-      expect((prs as any).requestHeaders.Authorization).toContain('12345');
+      expect(prs.repoSlug).toBe('repo/slug');
+      expect(prs.requestHeaders.Authorization).toContain('12345');
     });
 
   });
@@ -184,6 +236,7 @@ describe('uploadServerFactory', () => {
         defaultConfig.repoSlug,
         defaultConfig.githubOrganization,
         defaultConfig.githubTeamSlugs,
+        defaultConfig.trustedPrLabel,
       );
       buildCreator = new BuildCreator(defaultConfig.buildsDir);
       agent = supertest.agent((usf as any).createMiddleware(buildVerifier, buildCreator));
@@ -199,17 +252,18 @@ describe('uploadServerFactory', () => {
       let buildCreatorCreateSpy: jasmine.Spy;
 
       beforeEach(() => {
-        buildVerifierVerifySpy = spyOn(buildVerifier, 'verify').and.returnValue(Promise.resolve());
+        const verStatus = BUILD_VERIFICATION_STATUS.verifiedAndTrusted;
+        buildVerifierVerifySpy = spyOn(buildVerifier, 'verify').and.returnValue(Promise.resolve(verStatus));
         buildCreatorCreateSpy = spyOn(buildCreator, 'create').and.returnValue(Promise.resolve());
       });
 
 
-      it('should respond with 405 for non-GET requests', done => {
+      it('should respond with 404 for non-GET requests', done => {
         verifyRequests([
-          agent.put(`/create-build/${pr}/${sha}`).expect(405),
-          agent.post(`/create-build/${pr}/${sha}`).expect(405),
-          agent.patch(`/create-build/${pr}/${sha}`).expect(405),
-          agent.delete(`/create-build/${pr}/${sha}`).expect(405),
+          agent.put(`/create-build/${pr}/${sha}`).expect(404),
+          agent.post(`/create-build/${pr}/${sha}`).expect(404),
+          agent.patch(`/create-build/${pr}/${sha}`).expect(404),
+          agent.delete(`/create-build/${pr}/${sha}`).expect(404),
         ], done);
       });
 
@@ -284,14 +338,17 @@ describe('uploadServerFactory', () => {
 
 
       it('should call \'BuildCreator#create()\' with the correct arguments', done => {
-        const req = agent.
-          get(`/create-build/${pr}/${sha}`).
-          set('AUTHORIZATION', 'foo').
-          set('X-FILE', 'bar');
+        buildVerifierVerifySpy.and.returnValues(
+            Promise.resolve(BUILD_VERIFICATION_STATUS.verifiedAndTrusted),
+            Promise.resolve(BUILD_VERIFICATION_STATUS.verifiedNotTrusted));
 
-        promisifyRequest(req).
-          then(() => expect(buildCreatorCreateSpy).toHaveBeenCalledWith(pr, sha, 'bar')).
-          then(done, done.fail);
+        const req1 = agent.get(`/create-build/${pr}/${sha}`).set('AUTHORIZATION', 'foo').set('X-FILE', 'bar');
+        const req2 = agent.get(`/create-build/${pr}/${sha}`).set('AUTHORIZATION', 'foo').set('X-FILE', 'bar');
+
+        Promise.all([
+          promisifyRequest(req1).then(() => expect(buildCreatorCreateSpy).toHaveBeenCalledWith(pr, sha, 'bar', true)),
+          promisifyRequest(req2).then(() => expect(buildCreatorCreateSpy).toHaveBeenCalledWith(pr, sha, 'bar', false)),
+        ]).then(done, done.fail);
       });
 
 
@@ -307,7 +364,7 @@ describe('uploadServerFactory', () => {
       });
 
 
-      it('should respond with 201 on successful upload', done => {
+      it('should respond with 201 on successful upload (for public builds)', done => {
         const req = agent.
           get(`/create-build/${pr}/${sha}`).
           set('AUTHORIZATION', 'foo').
@@ -318,6 +375,18 @@ describe('uploadServerFactory', () => {
       });
 
 
+      it('should respond with 202 on successful upload (for hidden builds)', done => {
+        buildVerifierVerifySpy.and.returnValue(Promise.resolve(BUILD_VERIFICATION_STATUS.verifiedNotTrusted));
+        const req = agent.
+          get(`/create-build/${pr}/${sha}`).
+          set('AUTHORIZATION', 'foo').
+          set('X-FILE', 'bar').
+          expect(202, http.STATUS_CODES[202]);
+
+        verifyRequests([req], done);
+      });
+
+
       it('should reject PRs with leading zeros', done => {
         verifyRequests([agent.get(`/create-build/0${pr}/${sha}`).expect(404)], done);
       });
@@ -349,12 +418,12 @@ describe('uploadServerFactory', () => {
       });
 
 
-      it('should respond with 405 for non-GET requests', done => {
+      it('should respond with 404 for non-GET requests', done => {
         verifyRequests([
-          agent.put('/health-check').expect(405),
-          agent.post('/health-check').expect(405),
-          agent.patch('/health-check').expect(405),
-          agent.delete('/health-check').expect(405),
+          agent.put('/health-check').expect(404),
+          agent.post('/health-check').expect(404),
+          agent.patch('/health-check').expect(404),
+          agent.delete('/health-check').expect(404),
         ], done);
       });
 
@@ -373,11 +442,141 @@ describe('uploadServerFactory', () => {
     });
 
 
-    describe('GET *', () => {
+    describe('POST /pr-updated', () => {
+      const pr = '9';
+      const url = '/pr-updated';
+      let bvGetPrIsTrustedSpy: jasmine.Spy;
+      let bcUpdatePrVisibilitySpy: jasmine.Spy;
+
+      // Helpers
+      const createRequest = (num: number, action?: string) =>
+        agent.post(url).send({number: num, action});
+
+      beforeEach(() => {
+        bvGetPrIsTrustedSpy = spyOn(buildVerifier, 'getPrIsTrusted');
+        bcUpdatePrVisibilitySpy = spyOn(buildCreator, 'updatePrVisibility');
+      });
+
+
+      it('should respond with 404 for non-POST requests', done => {
+        verifyRequests([
+          agent.get(url).expect(404),
+          agent.put(url).expect(404),
+          agent.patch(url).expect(404),
+          agent.delete(url).expect(404),
+        ], done);
+      });
+
+
+      it('should respond with 400 for requests without a payload', done => {
+        const responseBody = `Missing or empty 'number' field in request: POST ${url} {}`;
+
+        const request1 = agent.post(url);
+        const request2 = agent.post(url).send();
+
+        verifyRequests([
+          request1.expect(400, responseBody),
+          request2.expect(400, responseBody),
+        ], done);
+      });
+
+
+      it('should respond with 400 for requests without a \'number\' field', done => {
+        const responseBodyPrefix = `Missing or empty 'number' field in request: POST ${url}`;
+
+        const request1 = agent.post(url).send({});
+        const request2 = agent.post(url).send({number: null});
+
+        verifyRequests([
+          request1.expect(400, `${responseBodyPrefix} {}`),
+          request2.expect(400, `${responseBodyPrefix} {"number":null}`),
+        ], done);
+      });
+
+
+      it('should call \'BuildVerifier#gtPrIsTrusted()\' with the correct arguments', done => {
+        const req = createRequest(+pr);
+
+        promisifyRequest(req).
+          then(() => expect(bvGetPrIsTrustedSpy).toHaveBeenCalledWith(9)).
+          then(done, done.fail);
+      });
+
+
+      it('should propagate errors from BuildVerifier', done => {
+        bvGetPrIsTrustedSpy.and.callFake(() => Promise.reject('Test'));
+
+        const req = createRequest(+pr).expect(500, 'Test');
+
+        promisifyRequest(req).
+          then(() => {
+            expect(bvGetPrIsTrustedSpy).toHaveBeenCalledWith(9);
+            expect(bcUpdatePrVisibilitySpy).not.toHaveBeenCalled();
+          }).
+          then(done, done.fail);
+      });
+
+
+      it('should call \'BuildCreator#updatePrVisibility()\' with the correct arguments', done => {
+        bvGetPrIsTrustedSpy.and.callFake((pr2: number) => Promise.resolve(pr2 === 42));
+
+        const req1 = createRequest(24);
+        const req2 = createRequest(42);
+
+        Promise.all([
+          promisifyRequest(req1).then(() => expect(bcUpdatePrVisibilitySpy).toHaveBeenCalledWith('24', false)),
+          promisifyRequest(req2).then(() => expect(bcUpdatePrVisibilitySpy).toHaveBeenCalledWith('42', true)),
+        ]).then(done, done.fail);
+      });
+
+
+      it('should propagate errors from BuildCreator', done => {
+        bcUpdatePrVisibilitySpy.and.callFake(() => Promise.reject('Test'));
+
+        const req = createRequest(+pr).expect(500, 'Test');
+        verifyRequests([req], done);
+      });
+
+
+      describe('on success', () => {
+
+        it('should respond with 200 (action: undefined)', done => {
+          bvGetPrIsTrustedSpy.and.returnValues(Promise.resolve(true), Promise.resolve(false));
+
+          const reqs = [4, 2].map(num => createRequest(num).expect(200, http.STATUS_CODES[200]));
+          verifyRequests(reqs, done);
+        });
+
+
+        it('should respond with 200 (action: labeled)', done => {
+          bvGetPrIsTrustedSpy.and.returnValues(Promise.resolve(true), Promise.resolve(false));
+
+          const reqs = [4, 2].map(num => createRequest(num, 'labeled').expect(200, http.STATUS_CODES[200]));
+          verifyRequests(reqs, done);
+        });
+
+
+        it('should respond with 200 (action: unlabeled)', done => {
+          bvGetPrIsTrustedSpy.and.returnValues(Promise.resolve(true), Promise.resolve(false));
+
+          const reqs = [4, 2].map(num => createRequest(num, 'unlabeled').expect(200, http.STATUS_CODES[200]));
+          verifyRequests(reqs, done);
+        });
+
+
+        it('should respond with 200 (and do nothing) if \'action\' implies no visibility change', done => {
+          const promises = ['foo', 'notlabeled'].
+            map(action => createRequest(+pr, action).expect(200, http.STATUS_CODES[200])).
+            map(promisifyRequest);
+
+          Promise.all(promises).
+            then(() => {
+              expect(bvGetPrIsTrustedSpy).not.toHaveBeenCalled();
+              expect(bcUpdatePrVisibilitySpy).not.toHaveBeenCalled();
+            }).
+            then(done, done.fail);
+        });
 
-      it('should respond with 404', done => {
-        const responseBody = 'Unknown resource in request: GET /some/url';
-        verifyRequests([agent.get('/some/url').expect(404, responseBody)], done);
       });
 
     });
@@ -385,14 +584,15 @@ describe('uploadServerFactory', () => {
 
     describe('ALL *', () => {
 
-      it('should respond with 405', done => {
-        const responseFor = (method: string) => `Unsupported method in request: ${method.toUpperCase()} /some/url`;
+      it('should respond with 404', done => {
+        const responseFor = (method: string) => `Unknown resource in request: ${method.toUpperCase()} /some/url`;
 
         verifyRequests([
-          agent.put('/some/url').expect(405, responseFor('put')),
-          agent.post('/some/url').expect(405, responseFor('post')),
-          agent.patch('/some/url').expect(405, responseFor('patch')),
-          agent.delete('/some/url').expect(405, responseFor('delete')),
+          agent.get('/some/url').expect(404, responseFor('get')),
+          agent.put('/some/url').expect(404, responseFor('put')),
+          agent.post('/some/url').expect(404, responseFor('post')),
+          agent.patch('/some/url').expect(404, responseFor('patch')),
+          agent.delete('/some/url').expect(404, responseFor('delete')),
         ], done);
       });
 
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock b/aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock
index 2374aedd41..37590de7f2 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock
@@ -2,38 +2,43 @@
 # yarn lockfile v1
 
 
+"@types/body-parser@^1.16.4":
+  version "1.16.4"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.16.4.tgz#96f3660e6f88a677fee7250f5a5e6d6bda3c76bb"
+  dependencies:
+    "@types/express" "*"
+    "@types/node" "*"
+
 "@types/express-serve-static-core@*":
-  version "4.0.40"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.0.40.tgz#168e82978bffc81ee7737bc60728d64733a4f37b"
+  version "4.0.48"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.0.48.tgz#b4fa06b0fce282e582b4535ff7fac85cc90173e9"
   dependencies:
     "@types/node" "*"
 
-"@types/express@^4.0.35":
-  version "4.0.35"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.0.35.tgz#6267c7b60a51fac473467b3c4a02cd1e441805fe"
+"@types/express@*", "@types/express@^4.0.35":
+  version "4.0.36"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.0.36.tgz#14eb47de7ecb10319f0a2fb1cf971aa8680758c2"
   dependencies:
     "@types/express-serve-static-core" "*"
     "@types/serve-static" "*"
 
 "@types/jasmine@^2.5.43":
-  version "2.5.43"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.43.tgz#6328a8c26082f2fd84f043c802c9ed7fa110b2dd"
-  dependencies:
-    typescript ">=2.1.4"
+  version "2.5.52"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.52.tgz#6ea5435d5c71562296e63ef27a4718f94f2fbb13"
 
 "@types/jsonwebtoken@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@types/jsonwebtoken/-/jsonwebtoken-7.2.0.tgz#0fed32c8501da80ac9839d2d403a65c83d776ffd"
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/@types/jsonwebtoken/-/jsonwebtoken-7.2.1.tgz#44a0282b48d242d0760eab0ce6cf570a62eabf96"
   dependencies:
     "@types/node" "*"
 
 "@types/mime@*":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-0.0.29.tgz#fbcfd330573b912ef59eeee14602bface630754b"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.0.tgz#d24ffac7d1006fe68517202fb2aeba3dbe48284b"
 
 "@types/node@*", "@types/node@^7.0.5":
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.5.tgz#96a0f0a618b7b606f1ec547403c00650210bfbb7"
+  version "7.0.31"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.31.tgz#80ea4d175599b2a00149c29a10a4eb2dff592e86"
 
 "@types/serve-static@*":
   version "1.7.31"
@@ -43,20 +48,20 @@
     "@types/mime" "*"
 
 "@types/shelljs@^0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.7.0.tgz#229c157c6bc1e67d6b990e6c5e18dbd2ff58cff0"
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.7.2.tgz#c2bdb3fe80cd7a3da08750ca898ae44c589671f3"
   dependencies:
     "@types/node" "*"
 
 "@types/superagent@*":
-  version "2.0.36"
-  resolved "https://registry.yarnpkg.com/@types/superagent/-/superagent-2.0.36.tgz#e8eec10771d9dbc0f7ec47b8f9993476e4a501c1"
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@types/superagent/-/superagent-3.5.0.tgz#53935c564616998b24846c0e60c792c0fd827334"
   dependencies:
     "@types/node" "*"
 
 "@types/supertest@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/supertest/-/supertest-2.0.0.tgz#4687deaff4950b63e4611536d6fd44665ee11bb7"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/supertest/-/supertest-2.0.1.tgz#66e8d84a274ad4bbbeb97d77329e53d90b82f112"
   dependencies:
     "@types/superagent" "*"
 
@@ -77,30 +82,30 @@ acorn-jsx@^3.0.0:
   dependencies:
     acorn "^3.0.4"
 
-acorn@4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"
-
 acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
+acorn@^5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d"
+
 ajv-keywords@^1.0.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
 
-ajv@^4.7.0:
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.3.tgz#ce30bdb90d1254f762c75af915fb3a63e7183d22"
+ajv@^4.7.0, ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
   dependencies:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ansi-align@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-1.1.0.tgz#2f0c1658829739add5ebb15e6b0c6e3423f016ba"
+ansi-align@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
   dependencies:
-    string-width "^1.0.1"
+    string-width "^2.0.0"
 
 ansi-escapes@^1.1.0:
   version "1.4.0"
@@ -130,15 +135,15 @@ anymatch@^1.3.0:
     micromatch "^2.1.5"
 
 aproba@^1.0.3:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.1.1.tgz#95d3600f07710aa0e9298c726ad5ecf2eacbabab"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.1.2.tgz#45c6629094de4e96f693ef7eab74ae079c240fc1"
 
 are-we-there-yet@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
   dependencies:
     delegates "^1.0.0"
-    readable-stream "^2.0.0 || ^1.1.13"
+    readable-stream "^2.0.6"
 
 argparse@^1.0.7:
   version "1.0.9"
@@ -153,8 +158,8 @@ arr-diff@^2.0.0:
     arr-flatten "^1.0.1"
 
 arr-flatten@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.3.tgz#a274ed85ac08849b6bd7847c4580745dc51adfb1"
 
 array-flatten@1.1.1:
   version "1.1.1"
@@ -182,14 +187,14 @@ asn1@~0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
 
+assert-plus@1.0.0, assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+
 assert-plus@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
 
-assert-plus@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
-
 async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
@@ -214,9 +219,9 @@ babel-code-frame@^6.16.0, babel-code-frame@^6.20.0:
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-balanced-match@^0.4.1:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
 
 base64url@2.0.0, base64url@^2.0.0:
   version "2.0.0"
@@ -238,31 +243,44 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
+body-parser@^1.17.2:
+  version "1.17.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.17.2.tgz#f8892abc8f9e627d42aedafbca66bf5ab99104ee"
+  dependencies:
+    bytes "2.4.0"
+    content-type "~1.0.2"
+    debug "2.6.7"
+    depd "~1.1.0"
+    http-errors "~1.6.1"
+    iconv-lite "0.4.15"
+    on-finished "~2.3.0"
+    qs "6.4.0"
+    raw-body "~2.2.0"
+    type-is "~1.6.15"
+
 boom@2.x.x:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
   dependencies:
     hoek "2.x.x"
 
-boxen@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-0.6.0.tgz#8364d4248ac34ff0ef1b2f2bf49a6c60ce0d81b6"
+boxen@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.1.0.tgz#b1b69dd522305e807a99deee777dbd6e5167b102"
   dependencies:
-    ansi-align "^1.1.0"
-    camelcase "^2.1.0"
+    ansi-align "^2.0.0"
+    camelcase "^4.0.0"
     chalk "^1.1.1"
     cli-boxes "^1.0.0"
-    filled-array "^1.0.0"
-    object-assign "^4.0.1"
-    repeating "^2.0.0"
-    string-width "^1.0.1"
+    string-width "^2.0.0"
+    term-size "^0.1.0"
     widest-line "^1.0.0"
 
-brace-expansion@^1.0.0:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
   dependencies:
-    balanced-match "^0.4.1"
+    balanced-match "^1.0.0"
     concat-map "0.0.1"
 
 braces@^1.8.2:
@@ -277,9 +295,9 @@ buffer-equal-constant-time@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
 
-buffer-shims@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+bytes@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
 
 caller-path@^0.1.0:
   version "0.1.0"
@@ -291,17 +309,17 @@ callsites@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
 
-camelcase@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+camelcase@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
 
-caseless@~0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
 
 chalk@0.5.1:
   version "0.5.1"
@@ -324,8 +342,8 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     supports-color "^2.0.0"
 
 chokidar@^1.4.3:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   dependencies:
     anymatch "^1.3.0"
     async-each "^1.0.0"
@@ -378,12 +396,6 @@ commander@2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
 
-commander@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
-  dependencies:
-    graceful-readlink ">= 1.0.0"
-
 component-emitter@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
@@ -392,7 +404,7 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
-concat-stream@^1.4.6:
+concat-stream@^1.5.2:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
   dependencies:
@@ -401,8 +413,8 @@ concat-stream@^1.4.6:
     typedarray "^0.0.6"
 
 concurrently@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.3.0.tgz#d8eb7a9765fdf0b28d12220dc058e14d03c7dd4f"
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.4.0.tgz#60662b3defde07375bae19aac0ab780ec748ba79"
   dependencies:
     chalk "0.5.1"
     commander "2.6.0"
@@ -426,19 +438,16 @@ configstore@^1.0.0:
     write-file-atomic "^1.1.2"
     xdg-basedir "^2.0.0"
 
-configstore@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-2.1.0.tgz#737a3a7036e9886102aa6099e47bb33ab1aba1a1"
+configstore@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.0.tgz#45df907073e26dfa1cf4b2d52f5b60545eaa11d1"
   dependencies:
-    dot-prop "^3.0.0"
+    dot-prop "^4.1.0"
     graceful-fs "^4.1.2"
-    mkdirp "^0.5.0"
-    object-assign "^4.0.1"
-    os-tmpdir "^1.0.0"
-    osenv "^0.1.0"
-    uuid "^2.0.1"
-    write-file-atomic "^1.1.2"
-    xdg-basedir "^2.0.0"
+    make-dir "^1.0.0"
+    unique-string "^1.0.0"
+    write-file-atomic "^2.0.0"
+    xdg-basedir "^3.0.0"
 
 console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   version "1.1.0"
@@ -461,30 +470,41 @@ cookie@0.3.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
 cookiejar@^2.0.6:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.0.tgz#86549689539b6d0e269b6637a304be508194d898"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.1.tgz#41ad57b1b555951ec171412a81942b1e8200d34a"
 
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-create-error-class@^3.0.1:
+create-error-class@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
   dependencies:
     capture-stack-trace "^1.0.0"
 
+cross-spawn-async@^2.1.1:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
+  dependencies:
+    lru-cache "^4.0.0"
+    which "^1.2.8"
+
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
   dependencies:
     boom "2.x.x"
 
-d@^0.1.1, d@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
+crypto-random-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
+
+d@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
   dependencies:
-    es5-ext "~0.10.2"
+    es5-ext "^0.10.9"
 
 dashdash@^1.12.0:
   version "1.14.1"
@@ -493,18 +513,18 @@ dashdash@^1.12.0:
     assert-plus "^1.0.0"
 
 date-fns@^1.23.0:
-  version "1.27.2"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.27.2.tgz#ce82f420bc028356cc661fc55c0494a56a990c9c"
+  version "1.28.5"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.28.5.tgz#257cfc45d322df45ef5658665967ee841cd73faf"
 
-debug@^2.1.1, debug@^2.2.0, debug@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+debug@2.6.7, debug@^2.1.1, debug@^2.2.0:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
   dependencies:
-    ms "0.7.1"
+    ms "2.0.0"
 
 deep-extend@~0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
 
 deep-is@~0.1.3:
   version "0.1.3"
@@ -530,7 +550,7 @@ delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
 
-depd@~1.1.0:
+depd@1.1.0, depd@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
 
@@ -542,24 +562,22 @@ diff@^3.0.1:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
 
-doctrine@^1.2.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+doctrine@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
   dependencies:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-dot-prop@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
+dot-prop@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.1.1.tgz#a8493f0b7b5eeec82525b5c7587fa7de7ca859c1"
   dependencies:
     is-obj "^1.0.0"
 
-duplexer2@^0.1.4:
+duplexer3@^0.1.4:
   version "0.1.4"
-  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
-  dependencies:
-    readable-stream "^2.0.2"
+  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
 
 duplexer@~0.1.1:
   version "0.1.1"
@@ -601,67 +619,61 @@ end-of-stream@1.0.0:
   dependencies:
     once "~1.3.0"
 
-error-ex@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.0.tgz#e67b43f3e82c96ea3a584ffee0b9fc3325d802d9"
-  dependencies:
-    is-arrayish "^0.2.1"
-
-es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.10.7:
-  version "0.10.12"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
+es5-ext@^0.10.14, es5-ext@^0.10.9, es5-ext@~0.10.14:
+  version "0.10.23"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.23.tgz#7578b51be974207a5487821b56538c224e4e7b38"
   dependencies:
     es6-iterator "2"
     es6-symbol "~3.1"
 
-es6-iterator@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
+es6-iterator@2, es6-iterator@^2.0.1, es6-iterator@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.1.tgz#8e319c9f0453bf575d374940a655920e59ca5512"
   dependencies:
-    d "^0.1.1"
-    es5-ext "^0.10.7"
-    es6-symbol "3"
+    d "1"
+    es5-ext "^0.10.14"
+    es6-symbol "^3.1"
 
 es6-map@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.4.tgz#a34b147be224773a4d7da8072794cefa3632b897"
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
   dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
-    es6-iterator "2"
-    es6-set "~0.1.3"
-    es6-symbol "~3.1.0"
-    event-emitter "~0.3.4"
+    d "1"
+    es5-ext "~0.10.14"
+    es6-iterator "~2.0.1"
+    es6-set "~0.1.5"
+    es6-symbol "~3.1.1"
+    event-emitter "~0.3.5"
 
 es6-promise@^3.0.2:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
 
-es6-set@~0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"
+es6-set@~0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
   dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
-    es6-iterator "2"
-    es6-symbol "3"
-    event-emitter "~0.3.4"
+    d "1"
+    es5-ext "~0.10.14"
+    es6-iterator "~2.0.1"
+    es6-symbol "3.1.1"
+    event-emitter "~0.3.5"
 
-es6-symbol@3, es6-symbol@~3.1, es6-symbol@~3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
+es6-symbol@3.1.1, es6-symbol@^3.1, es6-symbol@^3.1.1, es6-symbol@~3.1, es6-symbol@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
   dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
+    d "1"
+    es5-ext "~0.10.14"
 
 es6-weak-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.1.tgz#0d2bbd8827eb5fb4ba8f97fbfea50d43db21ea81"
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
   dependencies:
-    d "^0.1.1"
-    es5-ext "^0.10.8"
-    es6-iterator "2"
-    es6-symbol "3"
+    d "1"
+    es5-ext "^0.10.14"
+    es6-iterator "^2.0.1"
+    es6-symbol "^3.1.1"
 
 escape-html@~1.0.3:
   version "1.0.3"
@@ -681,20 +693,21 @@ escope@^3.6.0:
     estraverse "^4.1.1"
 
 eslint-plugin-jasmine@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jasmine/-/eslint-plugin-jasmine-2.2.0.tgz#7135879383c39a667c721d302b9f20f0389543de"
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jasmine/-/eslint-plugin-jasmine-2.3.1.tgz#22ba073937cf1b6d9f2cbafeb8cede8c88f21420"
 
 eslint@^3.15.0:
-  version "3.16.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.16.1.tgz#9bc31fc7341692cf772e80607508f67d711c5609"
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.19.0.tgz#c8fc6201c7f40dd08941b87c085767386a679acc"
   dependencies:
     babel-code-frame "^6.16.0"
     chalk "^1.1.3"
-    concat-stream "^1.4.6"
+    concat-stream "^1.5.2"
     debug "^2.1.1"
-    doctrine "^1.2.2"
+    doctrine "^2.0.0"
     escope "^3.6.0"
     espree "^3.4.0"
+    esquery "^1.0.0"
     estraverse "^4.2.0"
     esutils "^2.0.2"
     file-entry-cache "^2.0.0"
@@ -724,16 +737,22 @@ eslint@^3.15.0:
     user-home "^2.0.0"
 
 espree@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.4.0.tgz#41656fa5628e042878025ef467e78f125cb86e1d"
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.4.3.tgz#2910b5ccd49ce893c2ffffaab4fd8b3a31b82374"
   dependencies:
-    acorn "4.0.4"
+    acorn "^5.0.1"
     acorn-jsx "^3.0.0"
 
 esprima@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
 
+esquery@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  dependencies:
+    estraverse "^4.0.0"
+
 esrecurse@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
@@ -741,7 +760,7 @@ esrecurse@^4.1.0:
     estraverse "~4.1.0"
     object-assign "^4.0.1"
 
-estraverse@^4.1.1, estraverse@^4.2.0:
+estraverse@^4.0.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
@@ -753,16 +772,16 @@ esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
 
-etag@~1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
+etag@~1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051"
 
-event-emitter@~0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5"
+event-emitter@~0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
   dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.7"
+    d "1"
+    es5-ext "~0.10.14"
 
 event-stream@~3.3.0:
   version "3.3.4"
@@ -776,6 +795,17 @@ event-stream@~3.3.0:
     stream-combiner "~0.0.4"
     through "~2.3.1"
 
+execa@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.4.0.tgz#4eb6467a36a095fabb2970ff9d5e3fb7bce6ebc3"
+  dependencies:
+    cross-spawn-async "^2.1.1"
+    is-stream "^1.1.0"
+    npm-run-path "^1.0.0"
+    object-assign "^4.0.1"
+    path-key "^1.0.0"
+    strip-eof "^1.0.0"
+
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -797,8 +827,8 @@ expand-range@^1.8.1:
     fill-range "^2.1.0"
 
 express@^4.14.1:
-  version "4.14.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.14.1.tgz#646c237f766f148c2120aff073817b9e4d7e0d33"
+  version "4.15.3"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.15.3.tgz#bab65d0f03aa80c358408972fc700f916944b662"
   dependencies:
     accepts "~1.3.3"
     array-flatten "1.1.1"
@@ -806,30 +836,32 @@ express@^4.14.1:
     content-type "~1.0.2"
     cookie "0.3.1"
     cookie-signature "1.0.6"
-    debug "~2.2.0"
+    debug "2.6.7"
     depd "~1.1.0"
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
-    etag "~1.7.0"
-    finalhandler "0.5.1"
-    fresh "0.3.0"
+    etag "~1.8.0"
+    finalhandler "~1.0.3"
+    fresh "0.5.0"
     merge-descriptors "1.0.1"
     methods "~1.1.2"
     on-finished "~2.3.0"
     parseurl "~1.3.1"
     path-to-regexp "0.1.7"
-    proxy-addr "~1.1.3"
-    qs "6.2.0"
+    proxy-addr "~1.1.4"
+    qs "6.4.0"
     range-parser "~1.2.0"
-    send "0.14.2"
-    serve-static "~1.11.2"
-    type-is "~1.6.14"
+    send "0.15.3"
+    serve-static "1.12.3"
+    setprototypeof "1.0.3"
+    statuses "~1.3.1"
+    type-is "~1.6.15"
     utils-merge "1.0.0"
-    vary "~1.1.0"
+    vary "~1.1.1"
 
 extend@^3.0.0, extend@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
 
 extglob@^0.3.1:
   version "0.3.2"
@@ -860,8 +892,8 @@ file-entry-cache@^2.0.0:
     object-assign "^4.0.1"
 
 filename-regex@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
 
 fill-range@^2.1.0:
   version "2.2.3"
@@ -873,17 +905,15 @@ fill-range@^2.1.0:
     repeat-element "^1.1.2"
     repeat-string "^1.5.2"
 
-filled-array@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/filled-array/-/filled-array-1.1.0.tgz#c3c4f6c663b923459a9aa29912d2d031f1507f84"
-
-finalhandler@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.1.tgz#2c400d8d4530935bc232549c5fa385ec07de6fcd"
+finalhandler@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.3.tgz#ef47e77950e999780e86022a560e3217e0d0cc89"
   dependencies:
-    debug "~2.2.0"
+    debug "2.6.7"
+    encodeurl "~1.0.1"
     escape-html "~1.0.3"
     on-finished "~2.3.0"
+    parseurl "~1.3.1"
     statuses "~1.3.1"
     unpipe "~1.0.0"
 
@@ -902,23 +932,31 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
-for-in@^0.1.5:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8"
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
 for-own@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.4.tgz#0149b41a39088c7515f51ebe1c1386d45f935072"
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
   dependencies:
-    for-in "^0.1.5"
+    for-in "^1.0.1"
 
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
 
-form-data@^2.1.1, form-data@~2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.2.tgz#89c3534008b97eada4cbb157d58f6f5df025eae4"
+form-data@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.2.0.tgz#9a5e3b9295f980b2623cf64fa238b14cebca707b"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+form-data@~2.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.5"
@@ -932,26 +970,26 @@ forwarded@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
 
-fresh@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+fresh@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
 
 from@~0:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/from/-/from-0.1.3.tgz#ef63ac2062ac32acf7862e0d40b44b896f22f3bc"
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
 
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
 fsevents@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.1.tgz#f19fd28f43eeaf761680e519a203c4d0b3d31aff"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
   dependencies:
     nan "^2.3.0"
-    node-pre-gyp "^0.6.29"
+    node-pre-gyp "^0.6.36"
 
-fstream-ignore@~1.0.5:
+fstream-ignore@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
   dependencies:
@@ -959,18 +997,18 @@ fstream-ignore@~1.0.5:
     inherits "2"
     minimatch "^3.0.0"
 
-fstream@^1.0.0, fstream@^1.0.2, fstream@~1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.10.tgz#604e8a92fe26ffd9f6fae30399d4984e1ab22822"
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
   dependencies:
     graceful-fs "^4.1.2"
     inherits "~2.0.0"
     mkdirp ">=0.5 0"
     rimraf "2"
 
-gauge@~2.7.1:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.3.tgz#1c23855f962f17b3ad3d0dc7443f304542edfe09"
+gauge@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
   dependencies:
     aproba "^1.0.3"
     console-control-strings "^1.0.0"
@@ -991,9 +1029,13 @@ generate-object-property@^1.1.0:
   dependencies:
     is-property "^1.0.0"
 
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
 getpass@^0.1.1:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
   dependencies:
     assert-plus "^1.0.0"
 
@@ -1011,13 +1053,13 @@ glob-parent@^2.0.0:
     is-glob "^2.0.0"
 
 glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.2"
+    minimatch "^3.0.4"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
@@ -1032,8 +1074,8 @@ glob@~5.0.0:
     path-is-absolute "^1.0.0"
 
 globals@^9.14.0:
-  version "9.16.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.16.0.tgz#63e903658171ec2d9f51b1d31de5e2b8dc01fb80"
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
 globby@^5.0.0:
   version "5.0.0"
@@ -1061,42 +1103,36 @@ got@^3.2.0:
     read-all-stream "^3.0.0"
     timed-out "^2.0.0"
 
-got@^5.0.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35"
+got@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
   dependencies:
-    create-error-class "^3.0.1"
-    duplexer2 "^0.1.4"
+    create-error-class "^3.0.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
     is-redirect "^1.0.0"
     is-retry-allowed "^1.0.0"
     is-stream "^1.0.0"
     lowercase-keys "^1.0.0"
-    node-status-codes "^1.0.0"
-    object-assign "^4.0.1"
-    parse-json "^2.1.0"
-    pinkie-promise "^2.0.0"
-    read-all-stream "^3.0.0"
-    readable-stream "^2.0.5"
-    timed-out "^3.0.0"
-    unzip-response "^1.0.2"
+    safe-buffer "^5.0.1"
+    timed-out "^4.0.0"
+    unzip-response "^2.0.1"
     url-parse-lax "^1.0.0"
 
 graceful-fs@^4.1.11, graceful-fs@^4.1.2:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
-"graceful-readlink@>= 1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
 
-har-validator@~2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
   dependencies:
-    chalk "^1.1.1"
-    commander "^2.9.0"
-    is-my-json-valid "^2.12.4"
-    pinkie-promise "^2.0.0"
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
 
 has-ansi@^0.1.0:
   version "0.1.0"
@@ -1131,12 +1167,13 @@ hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
 
-http-errors@~1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
+http-errors@~1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.1.tgz#5f8b8ed98aca545656bf572997387f904a722257"
   dependencies:
+    depd "1.1.0"
     inherits "2.0.3"
-    setprototypeof "1.0.2"
+    setprototypeof "1.0.3"
     statuses ">= 1.3.1 < 2"
 
 http-signature@~1.1.0:
@@ -1147,13 +1184,21 @@ http-signature@~1.1.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
+iconv-lite@0.4.15:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+
 ignore-by-default@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
 
 ignore@^3.2.0:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.4.tgz#4055e03596729a8fabe45a43c100ad5ed815c4e8"
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
+
+import-lazy@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
 
 imurmurhash@^0.1.4:
   version "0.1.4"
@@ -1197,16 +1242,12 @@ inquirer@^0.12.0:
     through "^2.3.6"
 
 interpret@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
 
-ipaddr.js@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.2.0.tgz#8aba49c9192799585bdd643e0ccb50e8ae777ba4"
-
-is-arrayish@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+ipaddr.js@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.3.0.tgz#1e03a52fdad83a8bbb2b25cbf4998b4cffcd3dec"
 
 is-binary-path@^1.0.0:
   version "1.0.1"
@@ -1214,13 +1255,13 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.0.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.4.tgz#cfc86ccd5dc5a52fa80489111c6920c457e2d98b"
+is-buffer@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
 
 is-dotfile@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
 
 is-equal-shallow@^0.1.3:
   version "0.1.3"
@@ -1258,9 +1299,9 @@ is-glob@^2.0.0, is-glob@^2.0.1:
   dependencies:
     is-extglob "^1.0.0"
 
-is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
+is-my-json-valid@^2.10.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.0.tgz#f079dd9bfdae65ee2038aae8acbc86ab109e3693"
   dependencies:
     generate-function "^2.0.0"
     generate-object-property "^1.1.0"
@@ -1271,12 +1312,18 @@ is-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
 
-is-number@^2.0.2, is-number@^2.1.0:
+is-number@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
   dependencies:
     kind-of "^3.0.2"
 
+is-number@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  dependencies:
+    kind-of "^3.0.2"
+
 is-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
@@ -1323,7 +1370,7 @@ is-retry-allowed@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
 
-is-stream@^1.0.0:
+is-stream@^1.0.0, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
@@ -1339,6 +1386,10 @@ isemail@1.x.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/isemail/-/isemail-1.2.0.tgz#be03df8cc3e29de4d2c5df6501263f1fa4595e9a"
 
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@@ -1349,23 +1400,17 @@ isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
-jasmine-core@~2.5.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.5.2.tgz#6f61bd79061e27f43e6f9355e44b3c6cab6ff297"
+jasmine-core@~2.6.0:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.6.4.tgz#dec926cd0a9fa287fb6db5c755fa487e74cecac5"
 
 jasmine@^2.5.3:
-  version "2.5.3"
-  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.5.3.tgz#5441f254e1fc2269deb1dfd93e0e57d565ff4d22"
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.6.0.tgz#6b22e70883e8e589d456346153b4d206ddbe217f"
   dependencies:
     exit "^0.1.2"
     glob "^7.0.6"
-    jasmine-core "~2.5.2"
-
-jodid25519@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/jodid25519/-/jodid25519-1.0.2.tgz#06d4912255093419477d425633606e0e90782967"
-  dependencies:
-    jsbn "~0.1.0"
+    jasmine-core "~2.6.0"
 
 joi@^6.10.1:
   version "6.10.1"
@@ -1381,8 +1426,8 @@ js-tokens@^3.0.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
 
 js-yaml@^3.5.1:
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.8.1.tgz#782ba50200be7b9e5a8537001b7804db3ad02628"
+  version "3.8.4"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.8.4.tgz#520b4564f86573ba96662af85a8cafa7b4b5a6f6"
   dependencies:
     argparse "^1.0.7"
     esprima "^3.1.1"
@@ -1414,19 +1459,20 @@ jsonpointer@^4.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
 
 jsonwebtoken@^7.3.0:
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-7.3.0.tgz#85118d6a70e3fccdf14389f4e7a1c3f9c8a9fbba"
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-7.4.1.tgz#7ca324f5215f8be039cd35a6c45bb8cb74a448fb"
   dependencies:
     joi "^6.10.1"
     jws "^3.1.4"
     lodash.once "^4.0.0"
-    ms "^0.7.1"
+    ms "^2.0.0"
     xtend "^4.0.1"
 
 jsprim@^1.2.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.3.1.tgz#2a7256f70412a29ee3670aaca625994c4dcff252"
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.0.tgz#a3b87e40298d8c380552d8cc7628a0bb95a22918"
   dependencies:
+    assert-plus "1.0.0"
     extsprintf "1.0.2"
     json-schema "0.2.3"
     verror "1.3.6"
@@ -1449,10 +1495,16 @@ jws@^3.1.4:
     safe-buffer "^5.0.1"
 
 kind-of@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
   dependencies:
-    is-buffer "^1.0.2"
+    is-buffer "^1.1.5"
+
+kind-of@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  dependencies:
+    is-buffer "^1.1.5"
 
 latest-version@^1.0.0:
   version "1.0.1"
@@ -1460,15 +1512,11 @@ latest-version@^1.0.0:
   dependencies:
     package-json "^1.0.0"
 
-latest-version@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-2.0.0.tgz#56f8d6139620847b8017f8f1f4d78e211324168b"
+latest-version@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
   dependencies:
-    package-json "^2.0.0"
-
-lazy-req@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-1.1.0.tgz#bdaebead30f8d824039ce0ce149d4daa07ba1fac"
+    package-json "^4.0.0"
 
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
@@ -1555,6 +1603,19 @@ lowercase-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
 
+lru-cache@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
+make-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.0.0.tgz#97a011751e91dd87cfadef58832ebb04936de978"
+  dependencies:
+    pify "^2.3.0"
+
 map-stream@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194"
@@ -1589,25 +1650,25 @@ micromatch@^2.1.5:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
-mime-db@~1.26.0:
-  version "1.26.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.26.0.tgz#eaffcd0e4fc6935cf8134da246e2e6c35305adff"
+mime-db@~1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.27.0.tgz#820f572296bbd20ec25ed55e5b5de869e5436eb1"
 
-mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.13, mime-types@~2.1.7:
-  version "2.1.14"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.14.tgz#f7ef7d97583fcaf3b7d282b6f8b5679dab1e94ee"
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.7:
+  version "2.1.15"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.15.tgz#a4ebf5064094569237b8cf70046776d09fc92aed"
   dependencies:
-    mime-db "~1.26.0"
+    mime-db "~1.27.0"
 
 mime@1.3.4, mime@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
 
-"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   dependencies:
-    brace-expansion "^1.0.0"
+    brace-expansion "^1.1.7"
 
 minimist@0.0.8, minimist@~0.0.1:
   version "0.0.8"
@@ -1617,31 +1678,27 @@ minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
-"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
+"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
     minimist "0.0.8"
 
 moment@2.x.x:
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.17.1.tgz#fed9506063f36b10f066c8b59a144d7faebe1d82"
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
 
-ms@0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
-
-ms@0.7.2, ms@^0.7.1:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
+ms@2.0.0, ms@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
 
 mute-stream@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
 
 nan@^2.3.0:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.1.tgz#d5b01691253326a97a2bbee9e61c55d8d60351e2"
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45"
 
 natural-compare@^1.4.0:
   version "1.4.0"
@@ -1657,23 +1714,19 @@ nested-error-stacks@^1.0.0:
   dependencies:
     inherits "~2.0.1"
 
-node-pre-gyp@^0.6.29:
-  version "0.6.33"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.33.tgz#640ac55198f6a925972e0c16c4ac26a034d5ecc9"
+node-pre-gyp@^0.6.36:
+  version "0.6.36"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.36.tgz#db604112cb74e0d477554e9b505b17abddfab786"
   dependencies:
-    mkdirp "~0.5.1"
-    nopt "~3.0.6"
-    npmlog "^4.0.1"
-    rc "~1.1.6"
-    request "^2.79.0"
-    rimraf "~2.5.4"
-    semver "~5.3.0"
-    tar "~2.2.1"
-    tar-pack "~3.3.0"
-
-node-status-codes@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "^2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.0"
 
 nodemon@^1.11.0:
   version "1.11.0"
@@ -1690,29 +1743,38 @@ nodemon@^1.11.0:
     undefsafe "0.0.3"
     update-notifier "0.5.0"
 
+nopt@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
+  dependencies:
+    abbrev "1"
+    osenv "^0.1.4"
+
 nopt@~1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
   dependencies:
     abbrev "1"
 
-nopt@~3.0.6:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  dependencies:
-    abbrev "1"
-
 normalize-path@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.0.1.tgz#47886ac1662760d4261b7d979d241709d3ce3f7a"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  dependencies:
+    remove-trailing-separator "^1.0.1"
 
-npmlog@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"
+npm-run-path@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-1.0.0.tgz#f5c32bf595fe81ae927daec52e82f8b000ac3c8f"
+  dependencies:
+    path-key "^1.0.0"
+
+npmlog@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.0.tgz#dc59bee85f64f00ed424efb2af0783df25d1c0b5"
   dependencies:
     are-we-there-yet "~1.1.2"
     console-control-strings "~1.1.0"
-    gauge "~2.7.1"
+    gauge "~2.7.3"
     set-blocking "~2.0.0"
 
 number-is-nan@^1.0.0:
@@ -1744,13 +1806,13 @@ on-finished@~2.3.0:
   dependencies:
     ee-first "1.1.1"
 
-once@^1.3.0:
+once@^1.3.0, once@^1.3.3:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   dependencies:
     wrappy "1"
 
-once@~1.3.0, once@~1.3.3:
+once@~1.3.0:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
   dependencies:
@@ -1786,7 +1848,7 @@ os-tmpdir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
-osenv@^0.1.0:
+osenv@^0.1.0, osenv@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
   dependencies:
@@ -1800,11 +1862,11 @@ package-json@^1.0.0:
     got "^3.2.0"
     registry-url "^3.0.0"
 
-package-json@^2.0.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/package-json/-/package-json-2.4.0.tgz#0d15bd67d1cbbddbb2ca222ff2edb86bcb31a8bb"
+package-json@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
   dependencies:
-    got "^5.0.0"
+    got "^6.7.1"
     registry-auth-token "^3.0.1"
     registry-url "^3.0.3"
     semver "^5.1.0"
@@ -1818,12 +1880,6 @@ parse-glob@^3.0.4:
     is-extglob "^1.0.0"
     is-glob "^2.0.0"
 
-parse-json@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
-  dependencies:
-    error-ex "^1.2.0"
-
 parseurl@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
@@ -1836,6 +1892,10 @@ path-is-inside@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
 
+path-key@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-1.0.0.tgz#5d53d578019646c0d68800db4e146e6bdc2ac7af"
+
 path-parse@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
@@ -1850,7 +1910,11 @@ pause-stream@0.0.11:
   dependencies:
     through "~2.3"
 
-pify@^2.0.0:
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
@@ -1888,12 +1952,12 @@ progress@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
 
-proxy-addr@~1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.3.tgz#dc97502f5722e888467b3fa2297a7b1ff47df074"
+proxy-addr@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
   dependencies:
     forwarded "~0.1.0"
-    ipaddr.js "1.2.0"
+    ipaddr.js "1.3.0"
 
 ps-tree@^1.0.1:
   version "1.1.0"
@@ -1901,32 +1965,40 @@ ps-tree@^1.0.1:
   dependencies:
     event-stream "~3.3.0"
 
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
 punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
-qs@6.2.0, qs@^6.1.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
-
-qs@~6.3.0:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.1.tgz#918c0b3bcd36679772baf135b1acb4c1651ed79d"
+qs@6.4.0, qs@^6.1.0, qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
 randomatic@^1.1.3:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
   dependencies:
-    is-number "^2.0.2"
-    kind-of "^3.0.2"
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
 
 range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
 
-rc@^1.0.1, rc@^1.1.6, rc@~1.1.6:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.7.tgz#c5ea564bb07aff9fd3a5b32e906c1d3a65940fea"
+raw-body@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.2.0.tgz#994976cf6a5096a41162840492f0bdc5d6e7fb96"
+  dependencies:
+    bytes "2.4.0"
+    iconv-lite "0.4.15"
+    unpipe "1.0.0"
+
+rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
   dependencies:
     deep-extend "~0.4.0"
     ini "~1.3.0"
@@ -1940,28 +2012,16 @@ read-all-stream@^3.0.0:
     pinkie-promise "^2.0.0"
     readable-stream "^2.0.0"
 
-readable-stream@^2.0.0, "readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.2.2:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.3.tgz#9cf49463985df016c8ae8813097a9293a9b33729"
+readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2:
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.11.tgz#0796b31f8d7688007ff0b93a8088d34aa17c0f72"
   dependencies:
-    buffer-shims "^1.0.0"
     core-util-is "~1.0.0"
     inherits "~2.0.1"
     isarray "~1.0.0"
     process-nextick-args "~1.0.6"
-    string_decoder "~0.10.x"
-    util-deprecate "~1.0.1"
-
-readable-stream@~2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
-  dependencies:
-    buffer-shims "^1.0.0"
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
-    string_decoder "~0.10.x"
+    safe-buffer "~5.0.1"
+    string_decoder "~1.0.0"
     util-deprecate "~1.0.1"
 
 readdirp@^2.0.0:
@@ -1995,10 +2055,11 @@ regex-cache@^0.4.2:
     is-primitive "^2.0.0"
 
 registry-auth-token@^3.0.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.1.0.tgz#997c08256e0c7999837b90e944db39d8a790276b"
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.1.tgz#fb0d3289ee0d9ada2cbb52af5dfe66cb070d3006"
   dependencies:
     rc "^1.1.6"
+    safe-buffer "^5.0.1"
 
 registry-url@^3.0.0, registry-url@^3.0.3:
   version "3.1.0"
@@ -2006,6 +2067,10 @@ registry-url@^3.0.0, registry-url@^3.0.3:
   dependencies:
     rc "^1.0.1"
 
+remove-trailing-separator@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.0.2.tgz#69b062d978727ad14dc6b56ba4ab772fd8d70511"
+
 repeat-element@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
@@ -2020,24 +2085,18 @@ repeating@^1.1.2:
   dependencies:
     is-finite "^1.0.0"
 
-repeating@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
-  dependencies:
-    is-finite "^1.0.0"
-
-request@^2.79.0:
-  version "2.79.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+request@^2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
   dependencies:
     aws-sign2 "~0.6.0"
     aws4 "^1.2.1"
-    caseless "~0.11.0"
+    caseless "~0.12.0"
     combined-stream "~1.0.5"
     extend "~3.0.0"
     forever-agent "~0.6.1"
     form-data "~2.1.1"
-    har-validator "~2.0.6"
+    har-validator "~4.2.1"
     hawk "~3.1.3"
     http-signature "~1.1.0"
     is-typedarray "~1.0.0"
@@ -2045,10 +2104,12 @@ request@^2.79.0:
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.7"
     oauth-sign "~0.8.1"
-    qs "~6.3.0"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
     stringstream "~0.0.4"
     tough-cookie "~2.3.0"
-    tunnel-agent "~0.4.1"
+    tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
 require-uncached@^1.0.2:
@@ -2063,8 +2124,8 @@ resolve-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
 
 resolve@^1.1.6, resolve@^1.1.7:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.1.tgz#5d0a1632609b6b00a22284293db1d5d973676314"
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
   dependencies:
     path-parse "^1.0.5"
 
@@ -2075,18 +2136,12 @@ restore-cursor@^1.0.1:
     exit-hook "^1.0.0"
     onetime "^1.0.0"
 
-rimraf@2, rimraf@^2.2.8:
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
   dependencies:
     glob "^7.0.5"
 
-rimraf@~2.5.1, rimraf@~2.5.4:
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
-  dependencies:
-    glob "^7.0.5"
-
 run-async@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
@@ -2102,6 +2157,10 @@ rx@2.3.24:
   resolved "https://registry.yarnpkg.com/rx/-/rx-2.3.24.tgz#14f950a4217d7e35daa71bbcbe58eff68ea4b2b7"
 
 safe-buffer@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.0.tgz#fe4c8460397f9eaaaa58e73be46273408a45e223"
+
+safe-buffer@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
 
@@ -2111,36 +2170,36 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-semver@^5.0.3, semver@^5.1.0, semver@~5.3.0:
+semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
-send@0.14.2:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.14.2.tgz#39b0438b3f510be5dc6f667a11f71689368cdeef"
+send@0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.3.tgz#5013f9f99023df50d1bd9892c19e3defd1d53309"
   dependencies:
-    debug "~2.2.0"
+    debug "2.6.7"
     depd "~1.1.0"
     destroy "~1.0.4"
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
-    etag "~1.7.0"
-    fresh "0.3.0"
-    http-errors "~1.5.1"
+    etag "~1.8.0"
+    fresh "0.5.0"
+    http-errors "~1.6.1"
     mime "1.3.4"
-    ms "0.7.2"
+    ms "2.0.0"
     on-finished "~2.3.0"
     range-parser "~1.2.0"
     statuses "~1.3.1"
 
-serve-static@~1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.2.tgz#2cf9889bd4435a320cc36895c9aa57bd662e6ac7"
+serve-static@1.12.3:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.3.tgz#9f4ba19e2f3030c547f8af99107838ec38d5b1e2"
   dependencies:
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
     parseurl "~1.3.1"
-    send "0.14.2"
+    send "0.15.3"
 
 set-blocking@~2.0.0:
   version "2.0.0"
@@ -2150,13 +2209,13 @@ set-immediate-shim@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
 
-setprototypeof@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.2.tgz#81a552141ec104b88e89ce383103ad5c66564d08"
+setprototypeof@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
 
 shelljs@^0.7.5, shelljs@^0.7.6:
-  version "0.7.6"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.6.tgz#379cccfb56b91c8601e4793356eb5382924de9ad"
+  version "0.7.8"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
   dependencies:
     glob "^7.0.0"
     interpret "^1.0.0"
@@ -2195,8 +2254,8 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
 
 sshpk@^1.7.0:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.2.tgz#d5a804ce22695515638e798dbe23273de070a5fa"
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
   dependencies:
     asn1 "~0.2.3"
     assert-plus "^1.0.0"
@@ -2205,7 +2264,6 @@ sshpk@^1.7.0:
   optionalDependencies:
     bcrypt-pbkdf "^1.0.0"
     ecc-jsbn "~0.1.1"
-    jodid25519 "^1.0.0"
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
@@ -2229,7 +2287,7 @@ string-length@^1.0.0:
   dependencies:
     strip-ansi "^3.0.0"
 
-string-width@^1.0.1:
+string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
   dependencies:
@@ -2244,9 +2302,11 @@ string-width@^2.0.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^3.0.0"
 
-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+string_decoder@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.2.tgz#b29e1f4e1125fa97a10382b8a533737b7491e179"
+  dependencies:
+    safe-buffer "~5.0.1"
 
 stringstream@~0.0.4:
   version "0.0.5"
@@ -2268,13 +2328,17 @@ strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
 
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
 superagent@^3.0.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/superagent/-/superagent-3.5.0.tgz#56872b8e1ee6de994035ada2e53266899af95a6d"
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/superagent/-/superagent-3.5.2.tgz#3361a3971567504c351063abeaae0faa23dbf3f8"
   dependencies:
     component-emitter "^1.2.0"
     cookiejar "^2.0.6"
@@ -2319,20 +2383,20 @@ table@^3.7.8:
     slice-ansi "0.0.4"
     string-width "^2.0.0"
 
-tar-pack@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.3.0.tgz#30931816418f55afc4d21775afdd6720cee45dae"
+tar-pack@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
   dependencies:
-    debug "~2.2.0"
-    fstream "~1.0.10"
-    fstream-ignore "~1.0.5"
-    once "~1.3.3"
-    readable-stream "~2.1.4"
-    rimraf "~2.5.1"
-    tar "~2.2.1"
-    uid-number "~0.0.6"
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
 
-tar@~2.2.1:
+tar@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
   dependencies:
@@ -2340,6 +2404,12 @@ tar@~2.2.1:
     fstream "^1.0.2"
     inherits "2"
 
+term-size@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-0.1.1.tgz#87360b96396cab5760963714cda0d0cbeecad9ca"
+  dependencies:
+    execa "^0.4.0"
+
 text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -2352,9 +2422,9 @@ timed-out@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-2.0.0.tgz#f38b0ae81d3747d628001f41dafc652ace671c0a"
 
-timed-out@^3.0.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-3.1.3.tgz#95860bfcc5c76c277f8f8326fd0f5b2e20eba217"
+timed-out@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
 
 topo@1.x.x:
   version "1.1.0"
@@ -2383,8 +2453,8 @@ tryit@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
 
 tslint@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/tslint/-/tslint-4.4.2.tgz#b14cb79ae039c72471ab4c2627226b940dda19c6"
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-4.5.1.tgz#05356871bef23a434906734006fc188336ba824b"
   dependencies:
     babel-code-frame "^6.20.0"
     colors "^1.1.2"
@@ -2393,11 +2463,18 @@ tslint@^4.4.2:
     glob "^7.1.1"
     optimist "~0.6.0"
     resolve "^1.1.7"
-    update-notifier "^1.0.2"
+    tsutils "^1.1.0"
+    update-notifier "^2.0.0"
 
-tunnel-agent@~0.4.1:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+tsutils@^1.1.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-1.9.1.tgz#b9f9ab44e55af9681831d5f28d0aeeaf5c750cb0"
+
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  dependencies:
+    safe-buffer "^5.0.1"
 
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
@@ -2409,22 +2486,22 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-is@~1.6.14:
-  version "1.6.14"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.14.tgz#e219639c17ded1ca0789092dd54a03826b817cb2"
+type-is@~1.6.15:
+  version "1.6.15"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
   dependencies:
     media-typer "0.3.0"
-    mime-types "~2.1.13"
+    mime-types "~2.1.15"
 
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@>=2.1.4, typescript@^2.1.6:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.2.1.tgz#4862b662b988a4c8ff691cc7969622d24db76ae9"
+typescript@^2.1.6:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.0.tgz#aef5a8d404beba36ad339abf079ddddfffba86dd"
 
-uid-number@~0.0.6:
+uid-number@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
 
@@ -2432,13 +2509,19 @@ undefsafe@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-0.0.3.tgz#ecca3a03e56b9af17385baac812ac83b994a962f"
 
-unpipe@~1.0.0:
+unique-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
+  dependencies:
+    crypto-random-string "^1.0.0"
+
+unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
 
-unzip-response@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"
+unzip-response@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
 
 update-notifier@0.5.0:
   version "0.5.0"
@@ -2452,18 +2535,18 @@ update-notifier@0.5.0:
     semver-diff "^2.0.0"
     string-length "^1.0.0"
 
-update-notifier@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-1.0.3.tgz#8f92c515482bd6831b7c93013e70f87552c7cf5a"
+update-notifier@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.2.0.tgz#1b5837cf90c0736d88627732b661c138f86de72f"
   dependencies:
-    boxen "^0.6.0"
+    boxen "^1.0.0"
     chalk "^1.0.0"
-    configstore "^2.0.0"
+    configstore "^3.0.0"
+    import-lazy "^2.1.0"
     is-npm "^1.0.0"
-    latest-version "^2.0.0"
-    lazy-req "^1.1.0"
+    latest-version "^3.0.0"
     semver-diff "^2.0.0"
-    xdg-basedir "^2.0.0"
+    xdg-basedir "^3.0.0"
 
 url-parse-lax@^1.0.0:
   version "1.0.0"
@@ -2490,12 +2573,12 @@ uuid@^2.0.1:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
 
 uuid@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
 
-vary@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140"
+vary@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
 
 verror@1.3.6:
   version "1.3.6"
@@ -2503,11 +2586,17 @@ verror@1.3.6:
   dependencies:
     extsprintf "1.0.2"
 
-wide-align@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
+which@^1.2.8:
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
   dependencies:
-    string-width "^1.0.1"
+    isexe "^2.0.0"
+
+wide-align@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
+  dependencies:
+    string-width "^1.0.2"
 
 widest-line@^1.0.0:
   version "1.0.0"
@@ -2528,8 +2617,16 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
 
 write-file-atomic@^1.1.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.1.tgz#7d45ba32316328dd1ec7d90f60ebc0d845bb759a"
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.4.tgz#f807a4f0b1d9e913ae7a48112e6cc3af1991b45f"
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    slide "^1.1.5"
+
+write-file-atomic@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.1.0.tgz#1769f4b551eedce419f0505deae2e26763542d37"
   dependencies:
     graceful-fs "^4.1.11"
     imurmurhash "^0.1.4"
@@ -2547,6 +2644,14 @@ xdg-basedir@^2.0.0:
   dependencies:
     os-homedir "^1.0.0"
 
+xdg-basedir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
+
 xtend@^4.0.0, xtend@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-sh/clean-up.sh b/aio/aio-builds-setup/dockerbuild/scripts-sh/clean-up.sh
index 18189629c3..951f88f1c1 100755
--- a/aio/aio-builds-setup/dockerbuild/scripts-sh/clean-up.sh
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/clean-up.sh
@@ -1,5 +1,5 @@
 #!/bin/bash
-set -e -o pipefail
+set -eu -o pipefail
 
 # Set up env variables
 export AIO_GITHUB_TOKEN=$(head -c -1 /aio-secrets/GITHUB_TOKEN 2>/dev/null)
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-sh/health-check.sh b/aio/aio-builds-setup/dockerbuild/scripts-sh/health-check.sh
index de08632ace..d61ddada65 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-sh/health-check.sh
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/health-check.sh
@@ -1,5 +1,6 @@
 #!/bin/bash
-set +e -o pipefail
+# Using `+e` so that all checks are run and we get a complete report (even if some checks failed).
+set +e -u -o pipefail
 
 
 # Variables
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-sh/init.sh b/aio/aio-builds-setup/dockerbuild/scripts-sh/init.sh
index 7162b9223b..9e888e0c3d 100755
--- a/aio/aio-builds-setup/dockerbuild/scripts-sh/init.sh
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/init.sh
@@ -1,5 +1,5 @@
 #!/bin/bash
-set -e -o pipefail
+set -eu -o pipefail
 
 exec >> /var/log/aio/init.log
 exec 2>&1
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-prod.sh b/aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-prod.sh
index b660d2da5c..d061ce9439 100755
--- a/aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-prod.sh
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-prod.sh
@@ -1,9 +1,9 @@
 #!/bin/bash
-set -e -o pipefail
+set -eu -o pipefail
 
 # Set up env variables for production
-export AIO_GITHUB_TOKEN=$(head -c -1 /aio-secrets/GITHUB_TOKEN 2>/dev/null)
-export AIO_PREVIEW_DEPLOYMENT_TOKEN=$(head -c -1 /aio-secrets/PREVIEW_DEPLOYMENT_TOKEN 2>/dev/null)
+export AIO_GITHUB_TOKEN=$(head -c -1 /aio-secrets/GITHUB_TOKEN 2>/dev/null || echo "MISSING_GITHUB_TOKEN")
+export AIO_PREVIEW_DEPLOYMENT_TOKEN=$(head -c -1 /aio-secrets/PREVIEW_DEPLOYMENT_TOKEN 2>/dev/null || echo "MISSING_PREVIEW_DEPLOYMENT_TOKEN")
 
 # Start the upload-server instance
 # TODO(gkalpak): Ideally, the upload server should be run as a non-privileged user.
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-test.sh b/aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-test.sh
index 33cd3975ac..469e01c532 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-test.sh
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-test.sh
@@ -1,13 +1,13 @@
 #!/bin/bash
-set -e -o pipefail
+set -eu -o pipefail
 
 # Set up env variables for testing
 export AIO_BUILDS_DIR=$TEST_AIO_BUILDS_DIR
 export AIO_DOMAIN_NAME=$TEST_AIO_DOMAIN_NAME
 export AIO_GITHUB_ORGANIZATION=$TEST_AIO_GITHUB_ORGANIZATION
 export AIO_GITHUB_TEAM_SLUGS=$TEST_AIO_GITHUB_TEAM_SLUGS
-export AIO_PREVIEW_DEPLOYMENT_TOKEN=$TEST_AIO_PREVIEW_DEPLOYMENT_TOKEN
 export AIO_REPO_SLUG=$TEST_AIO_REPO_SLUG
+export AIO_TRUSTED_PR_LABEL=$TEST_AIO_TRUSTED_PR_LABEL
 export AIO_UPLOAD_HOSTNAME=$TEST_AIO_UPLOAD_HOSTNAME
 export AIO_UPLOAD_PORT=$TEST_AIO_UPLOAD_PORT
 
@@ -21,7 +21,7 @@ appName=aio-upload-server-test
 if [[ "$1" == "stop" ]]; then
   pm2 delete $appName
 else
-  pm2 start $AIO_SCRIPTS_JS_DIR/dist/lib/upload-server/index-test.js \
+  pm2 start $AIO_SCRIPTS_JS_DIR/dist/lib/verify-setup/start-test-upload-server.js \
     --log /var/log/aio/upload-server-test.log \
     --name $appName \
     --no-autorestart \
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-sh/verify-setup.sh b/aio/aio-builds-setup/dockerbuild/scripts-sh/verify-setup.sh
index ccb4e43a01..0011d7fcd9 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-sh/verify-setup.sh
+++ b/aio/aio-builds-setup/dockerbuild/scripts-sh/verify-setup.sh
@@ -1,5 +1,5 @@
 #!/bin/bash
-set -e -o pipefail
+set -eu -o pipefail
 
 logFile=/var/log/aio/verify-setup.log
 uploadServerLogFile=/var/log/aio/upload-server-verify-setup.log
diff --git a/aio/aio-builds-setup/docs/_TOC.md b/aio/aio-builds-setup/docs/_TOC.md
index d9c0b03780..ebf1a4e84c 100644
--- a/aio/aio-builds-setup/docs/_TOC.md
+++ b/aio/aio-builds-setup/docs/_TOC.md
@@ -4,7 +4,8 @@
 ## Overview
 - [General overview](overview--general.md)
 - [Security model](overview--security-model.md)
-- [Available Commands](overview--scripts-and-commands.md)
+- [Available scripts and commands](overview--scripts-and-commands.md)
+- [HTTP status codes](overview--http-status-codes.md)
 
 
 ## Setting up the VM
@@ -20,7 +21,11 @@
 
 
 ## Starting the docker container
-- [Create docker image](vm-setup--start-docker-container.md)
+- [Start docker container](vm-setup--start-docker-container.md)
+
+
+## Updating the docker container
+- [Update docker container](vm-setup--update-docker-container.md)
 
 
 ## Miscellaneous
diff --git a/aio/aio-builds-setup/docs/image-config--environment-variables.md b/aio/aio-builds-setup/docs/image-config--environment-variables.md
index a64a9700f8..4584b15596 100644
--- a/aio/aio-builds-setup/docs/image-config--environment-variables.md
+++ b/aio/aio-builds-setup/docs/image-config--environment-variables.md
@@ -17,7 +17,7 @@ you don't need to specify values for those.
   The domain name of the server.
 
 - `AIO_GITHUB_ORGANIZATION`:
-  The GitHub organization whose teams arew whitelisted for accepting uploads.
+  The GitHub organization whose teams are whitelisted for accepting uploads.
   See also `AIO_GITHUB_TEAM_SLUGS`.
 
 - `AIO_GITHUB_TEAM_SLUGS`:
@@ -39,6 +39,11 @@ you don't need to specify values for those.
 - `AIO_REPO_SLUG`:
   The repository slug (in the form `<user>/<repo>`) for which PRs will be uploaded.
 
+- `AIO_TRUSTED_PR_LABEL`:
+  The PR whose presence indicates the PR has been manually verified and is allowed to have its
+  build artifacts publicly served. This is useful for enabling previews for any PR (not only those
+  from trusted authors).
+
 - `AIO_UPLOAD_HOSTNAME`:
   The internal hostname for accessing the Node.js upload-server. This is used by nginx for
   delegating upload requests and also for performing a periodic health-check.
diff --git a/aio/aio-builds-setup/docs/misc--integrate-with-ci.md b/aio/aio-builds-setup/docs/misc--integrate-with-ci.md
index 25d6bb90f9..352c977876 100644
--- a/aio/aio-builds-setup/docs/misc--integrate-with-ci.md
+++ b/aio/aio-builds-setup/docs/misc--integrate-with-ci.md
@@ -3,10 +3,9 @@
 
 TODO (gkalpak): Add docs. Mention:
 - Travis' JWT addon (+ limitations).
-  Relevant files: `.travis.yml`
+  Relevant files: `.travis.yml`, `scripts/ci/env.sh`
 - Testing on CI.
-  Relevant files: `ci/test-aio.sh`, `aio/aio-builds-setup/scripts/test.sh`
-- Preverifying on CI.
-  Relevant files: `ci/deploy.sh`, `aio/aio-builds-setup/scripts/travis-preverify-pr.sh`
+  Relevant files: `scripts/ci/test-aio.sh`, `aio/aio-builds-setup/scripts/test.sh`
 - Deploying from CI.
-  Relevant files: `ci/deploy.sh`, `aio/scripts/deploy-preview.sh`
+  Relevant files: `scripts/ci/deploy.sh`, `aio/scripts/deploy-preview.sh`,
+                  `aio/scripts/deploy-to-firebase.sh`
diff --git a/aio/aio-builds-setup/docs/overview--general.md b/aio/aio-builds-setup/docs/overview--general.md
index 6bca73ccd0..0637e5235c 100644
--- a/aio/aio-builds-setup/docs/overview--general.md
+++ b/aio/aio-builds-setup/docs/overview--general.md
@@ -33,36 +33,69 @@ container:
 
 
 ### On CI (Travis)
-- Build job completes successfully (i.e. build succeeds and tests pass).
+- Build job completes successfully.
 - The CI script checks whether the build job was initiated by a PR against the angular/angular
   master branch.
-- The CI script checks whether the PR has touched any files inside the angular.io project directory
-  (currently `aio/`).
-- The CI script checks whether the author of the PR is a member of one of the whitelisted GitHub
-  teams (and therefore allowed to upload).
+- The CI script checks whether the PR has touched any files that might affect the angular.io app
+  (currently the `aio/` or `packages/` directories, ignoring spec files).
+- Optionally, the CI script can check whether the PR can be automatically verified (i.e. if the
+  author of the PR is a member of one of the whitelisted GitHub teams or the PR has the specified
+  "trusted PR" label).
   **Note:**
   For security reasons, the same checks will be performed on the server as well. This is an optional
-  step with the purpose of:
-  1. Avoiding the wasted overhead associated with uploads that are going to be rejected (e.g.
-     building the artifacts, sending them to the server, running checks on the server, etc).
-  2. Avoiding failing the build (due to an error response from the server) or requiring additional
-     logic for detecting the reasons of the failure.
-- The CI script gzip and upload the build artifacts to the server.
+  step that can be used in case one wants to apply special logic depending on the outcome of the
+  pre-verification. For example:
+  1. One might want to deploy automatically verified PRs only. In that case, the pre-verification
+     helps avoid the wasted overhead associated with uploads that are going to be rejected (e.g.
+     building the artifacts, sending them to the server, running checks on the server, detecting the
+     reasons of deployment failure and whether to fail the build, etc).
+  2. One might want to apply additional logic (e.g. different tests) depending on whether the PR is
+     automatically verified or not).
+- The CI script gzips and uploads the build artifacts to the server.
 
 More info on how to set things up on CI can be found [here](misc--integrate-with-ci.md).
 
 
 ### Uploading build artifacts
-- nginx receives upload request.
+- nginx receives the upload request.
 - nginx checks that the uploaded gzip archive does not exceed the specified max file size, stores it
   in a temporary location and passes the filepath to the Node.js upload-server.
-- The upload-server verifies that the uploaded file is not trying to overwrite an existing build,
-  and runs several checks to determine whether the request should be accepted (more details can be
+- The upload-server runs several checks to determine whether the request should be accepted and
+  whether it should be publicly accessible or stored for later verification (more details can be
   found [here](overview--security-model.md)).
-- The upload-server deploys the artifacts to a sub-directory named after the PR number and SHA:
-  `<PR>/<SHA>/`
-- The upload-server posts a comment on the corresponding PR on GitHub mentioning the SHA and the
-  the link where the preview can be found.
+- The upload-server changes the "visibility" of the associated PR, if necessary. For example, if
+  builds for the same PR had been previously deployed as non-public and the current build has been
+  automatically verified, all previous builds are made public as well.
+  If the PR transitions from "non-public" to "public", the upload-server posts a comment on the
+  corresponding PR on GitHub mentioning the SHAs and the links where the previews can be found.
+- The upload-server verifies that the uploaded file is not trying to overwrite an existing build.
+- The upload-server deploys the artifacts to a sub-directory named after the PR number and the first
+  few characters of the SHA: `<PR>/<SHA>/`
+  (Non-publicly accessible PRs will be stored in a different location, but again derived from the PR
+  number and SHA.)
+- If the PR is publicly accessible, the upload-server posts a comment on the corresponding PR on
+  GitHub mentioning the SHA and the link where the preview can be found.
+
+More info on the possible HTTP status codes and their meaning can be found
+[here](overview--http-status-codes.md).
+
+
+### Updating PR visibility
+- nginx receives a natification that a PR has been updated and passes it through to the
+  upload-server. This could, for example, be sent by a GitHub webhook every time a PR's labels
+  change.
+  E.g.: `ngbuilds.io/pr-updated` (payload: `{"number":<PR>,"action":"labeled"}`)
+- The request contains the PR number (as `number`) and optionally the action that triggered the
+  request (as `action`) in the payload.
+- The upload-server verifies the payload and determines whether the `action` (if specified) could
+  have led to PR visibility changes. Only requests that omit the `action` field altogether or
+  specify an action that can affect visibility are further processed.
+  (Currently, the only actions that are considered capable of affecting visibility are `labeled` and
+  `unlabeled`.)
+- The upload-server re-checks and if necessary updates the PR's visibility.
+
+More info on the possible HTTP status codes and their meaning can be found
+[here](overview--http-status-codes.md).
 
 
 ### Serving build artifacts
@@ -71,6 +104,9 @@ More info on how to set things up on CI can be found [here](misc--integrate-with
 - nginx maps the subdomain to the correct sub-directory and serves the resource.
   E.g.: `/<PR>/<SHA>/path/to/resource`
 
+More info on the possible HTTP status codes and their meaning can be found
+[here](overview--http-status-codes.md).
+
 
 ### Removing obsolete artifacts
 In order to avoid flooding the disk with unnecessary build artifacts, there is a cronjob that runs a
diff --git a/aio/aio-builds-setup/docs/overview--http-status-codes.md b/aio/aio-builds-setup/docs/overview--http-status-codes.md
new file mode 100644
index 0000000000..54b06f66e8
--- /dev/null
+++ b/aio/aio-builds-setup/docs/overview--http-status-codes.md
@@ -0,0 +1,84 @@
+# Overview - HTTP Status Codes
+
+
+This is a list of all the possible HTTP status codes returned by the nginx anf upload servers, along
+with a bried explanation of what they mean:
+
+
+## `http://*.ngbuilds.io/*`
+
+- **307 (Temporary Redirect)**:
+  All non-HTTPS requests. 308 (Permanent Redirect) would be more appropriate, but is not supported
+  by all agents (e.g. cURL).
+
+
+## `https://pr<pr>-<sha>.ngbuilds.io/*`
+
+- **200 (OK)**:
+  File was found or URL was rewritten to `/index.html` (i.e. all paths that have no `.` in final
+  segment).
+
+- **403 (Forbidden)**:
+  Trying to access a sub-directory.
+
+- **404 (Not Found)**:
+  File not found.
+
+
+## `https://ngbuilds.io/create-build/<pr>/<sha>`
+
+- **201 (Created)**:
+  Build deployed successfully and is publicly available.
+
+- **202 (Accepted)**:
+  Build not automatically verifiable. Stored for later deployment (after re-verification).
+
+- **400 (Bad Request)**:
+  No payload.
+
+- **401 (Unauthorized)**:
+  No `AUTHORIZATION` header.
+
+- **403 (Forbidden)**:
+  Unable to verify build (e.g. invalid JWT token, or unable to talk to 3rd-party APIs, etc).
+
+- **405 (Method Not Allowed)**:
+  Request method other than POST.
+
+- **409 (Conflict)**:
+  Request to overwrite existing directory (e.g. deploy existing build or change PR visibility when
+  the destination directory does already exist).
+
+- **413 (Payload Too Large)**:
+  Payload larger than size specified in `AIO_UPLOAD_MAX_SIZE`.
+
+
+## `https://ngbuilds.io/health-check`
+
+- **200 (OK)**:
+  The server is healthy (i.e. up and running and processing requests).
+
+
+## `https://ngbuilds.io/pr-updated`
+
+- **200 (OK)**:
+  Request processed successfully. Processing may or may not have resulted in further actions.
+
+- **400 (Bad Request)**:
+  No payload or no `number` field in payload.
+
+- **405 (Method Not Allowed)**:
+  Request method other than POST.
+
+- **409 (Conflict)**:
+  Request to overwrite existing directory (i.e. directories for both visibilities exist).
+  (Normally, this should not happen.)
+
+
+## `https://*.ngbuilds.io/*`
+
+- **404 (Not Found)**:
+  Request not matched by the above rules.
+
+- **500 (Internal Server Error)**:
+  Error while processing a request matched by the above rules.
diff --git a/aio/aio-builds-setup/docs/overview--scripts-and-commands.md b/aio/aio-builds-setup/docs/overview--scripts-and-commands.md
index a083deabc8..4260fe3b96 100644
--- a/aio/aio-builds-setup/docs/overview--scripts-and-commands.md
+++ b/aio/aio-builds-setup/docs/overview--scripts-and-commands.md
@@ -8,19 +8,17 @@ This is an overview of the available scripts and commands.
 The scripts are located inside `<aio-builds-setup-dir>/scripts/`. The following scripts are
 available:
 
-- `build.sh`:
+- `create-image.sh`:
   Can be used for creating a preconfigured docker image.
   See [here](vm-setup--create-docker-image.md) for more info.
 
-- `test.sh`
+- `test.sh`:
   Can be used for running the tests for `<aio-builds-setup-dir>/dockerbuild/scripts-js/`. This is
   useful for CI integration. See [here](misc--integrate-with-ci.md) for more info.
 
-- `travis-preverify-pr.sh`
-  Can be used for "preverifying" a PR before uploading the artifacts to the server. It checks that
-  the author of the PR a member of one of the specified GitHub teams and therefore allowed to upload
-  build artifacts. This is useful for CI integration. See [here](misc--integrate-with-ci.md) for
-  more info.
+- `update-preview-server.sh`:
+  Can be used for updating the docker container (and image) based on the latest changes checked out
+  from a git repository. See [here](vm-setup--update-docker-container.md) for more info.
 
 
 ## Commands
diff --git a/aio/aio-builds-setup/docs/overview--security-model.md b/aio/aio-builds-setup/docs/overview--security-model.md
index 03e6645e87..c616958f4a 100644
--- a/aio/aio-builds-setup/docs/overview--security-model.md
+++ b/aio/aio-builds-setup/docs/overview--security-model.md
@@ -41,12 +41,13 @@ part of the CI setup and serving them publicly.
 The implemented approach can be broken up to the following sub-tasks:
 
 1. Verify which PR the uploaded artifacts correspond to.
-2. Determine the author of the PR.
-3. Check whether the PR author is a member of some whitelisted GitHub team.
-4. Deploy the artifacts to the corresponding PR's directory.
-5. Prevent overwriting previously deployed artifacts (which ensures that the guarantees established
+2. Fetch the PR's metadata, including author and labels.
+3. Check whether the PR can be automatically verified as "trusted" (based on its author or labels).
+4. If necessary, update the corresponding PR's verification status.
+5. Deploy the artifacts to the corresponding PR's directory.
+6. Prevent overwriting previously deployed artifacts (which ensures that the guarantees established
    during deployment will remain valid until the artifacts are removed).
-6. Prevent uploaded files from accessing anything outside their directory.
+7. Prevent uploaded files from accessing anything outside their directory.
 
 
 ### Implementation details
@@ -65,35 +66,51 @@ This section describes how each of the aforementioned sub-tasks is accomplished:
    _There are currently certain limitation in the implementation of the JWT addon._
    _See the next section for more details._
 
-2. **Determine the author of the PR.**
+2. **Fetch the PR's metadata, including author and labels**.
 
-   Once we have securely associated the uploaded artifaacts to a PR, we retrieve the PR's metadata -
-   including the author's username - using the [GitHub API](https://developer.github.com/v3/).
+   Once we have securely associated the uploaded artifacts to a PR, we retrieve the PR's metadata -
+   including the author's username and the labels - using the
+   [GitHub API](https://developer.github.com/v3/).
    To avoid rate-limit restrictions, we use a Personal Access Token (issued by
    [@mary-poppins](https://github.com/mary-poppins)).
 
-3. **Check whether the PR author is a member of some whitelisted GitHub team.**
+3. **Check whether the PR can be automatically verified as "trusted"**.
 
-   Again using the GitHub API, we can verify the author's membership in one of the
-   whitelisted/trusted GitHub teams. For this operation, we need a PErsonal Access Token with the
-   `read:org` scope issued by a user that can "see" the specified GitHub organization.
-   Here too, we use token by @mary-poppins.
+   "Trusted" means that we are confident that the build artifacts are suitable for being deployed
+   and publicly accessible on the preview server. There are two ways to check that:
+   1. We can verify that the PR has a pre-determined label, which marks it as "safe for preview".
+      Such a label can only have been added by a maintainer (with the necessary rights) and
+      designates that they have manually verified the PR contents.
+   2. We can verify (again using the GitHub API) the author's membership in one of the
+      whitelisted/trusted GitHub teams. For this operation, we need a Personal Access Token with the
+      `read:org` scope issued by a user that can "see" the specified GitHub organization.
+      Here too, we use the token by @mary-poppins.
 
-4. **Deploy the artifacts to the corresponding PR's directory.**
+4. **If necessary update the corresponding PR's verification status**.
 
-   With the preceeding steps, we have verified that the uploaded artifacts have been uploaded by
-   Travis and correspond to a PR whose author is a member of a trusted team. Essentially, as long as
-   sub-tasks 1, 2 and 3 can be securely accomplished, it is possible to "project" the trust we have
-   in a team's members through the PR and Travis to the build artifacts.
+   Once we have determined whether the PR is considered "trusted", we update its "visibility" (i.e.
+   whether it is publicly accessible or not), based on the new verification status. For example, if
+   a PR was initially considered "not trusted" but the check triggered by a new build determined
+   otherwise, the PR (and all the previously uploaded previews) are made public. It works the same
+   way if a PR has gone from "trusted" to "not trusted".
 
-5. **Prevent overwriting previously deployed artifacts**.
+5. **Deploy the artifacts to the corresponding PR's directory.**
 
-   In order to enforce this restriction (and ensure that the deployed artifacts validity is
+   With the preceding steps, we have verified that the uploaded artifacts have been uploaded by
+   Travis. Additionally, we have determined whether the PR can be trusted to have its previews
+   publicly accessible or whether further verification is necessary. The artifacts will be stored to
+   the PR's directory, but will not be publicly accessible unless the PR has been verified.
+   Essentially, as long as sub-tasks 1, 2 and 3 can be securely accomplished, it is possible to
+   "project" the trust we have in a team's members through the PR and Travis to the build artifacts.
+
+6. **Prevent overwriting previously deployed artifacts**.
+
+   In order to enforce this restriction (and ensure that the deployed artifacts' validity is
    preserved throughout their "lifetime"), the server that handles the upload (currently a Node.js
    Express server) rejects uploads that target an existing directory.
    _Note: A PR can contain multiple uploads; one for each SHA that was built on Travis._
 
-6. **Prevent uploaded files from accessing anything outside their directory.**
+7. **Prevent uploaded files from accessing anything outside their directory.**
 
    Nginx (which is used to serve the uploaded artifacts) has been configured to not follow symlinks
    outside of the directory where the build artifacts are stored.
@@ -104,6 +121,11 @@ This section describes how each of the aforementioned sub-tasks is accomplished:
 - Each trusted PR author has full control over the content that is uploaded for their PRs. Part of
   the security model relies on the trustworthiness of these authors.
 
+- Adding the specified label on a PR and marking it as trusted, gives the author full control over
+  the content that is uploaded for the specific PR (e.g. by pushing more commits to it). The user
+  adding the label is responsible for ensuring that this control is not abused and that the PR is
+  either closed (one way of another) or the access is revoked.
+
 - If anyone gets access to the `PREVIEW_DEPLOYMENT_TOKEN` (a.k.a. `NGBUILDS_IO_KEY` on
   angular/angular) variable generated for each Travis job, they will be able to impersonate the
   corresponding PR's author on the preview server for as long as the token is valid (currently 90
diff --git a/aio/aio-builds-setup/docs/vm-setup--create-docker-image.md b/aio/aio-builds-setup/docs/vm-setup--create-docker-image.md
index 4a0c240536..273cb7ba1c 100644
--- a/aio/aio-builds-setup/docs/vm-setup--create-docker-image.md
+++ b/aio/aio-builds-setup/docs/vm-setup--create-docker-image.md
@@ -6,11 +6,11 @@
 
 
 ## Build docker image
-- `<aio-builds-setup-dir>/scripts/build.sh [<name>[:<tag>] [--build-arg <NAME>=<value> ...]]`
+- `<aio-builds-setup-dir>/scripts/create-image.sh [<name>[:<tag>] [--build-arg <NAME>=<value> ...]]`
 - You can overwrite the default environment variables inside the image, by passing new values using
   `--build-arg`.
 
-**Note:** The build script has to execute docker commands with `sudo`.
+**Note:** The script has to execute docker commands with `sudo`.
 
 
 ## Example
@@ -25,7 +25,7 @@ The following commands would create a docker image from GitHub repo `foo/bar` to
     --build-arg AIO_REPO_SLUG=foo/bar \
     --build-arg AIO_DOMAIN_NAME=foobar-builds.io \
     --build-arg AIO_GITHUB_ORGANIZATION=foo \
-    --build-arg AIO_GITHUB_TEMA_SLUGS=bar-core,bar-docs-authors
+    --build-arg AIO_GITHUB_TEAM_SLUGS=bar-core,bar-docs-authors
   ```
 
 A full list of the available environment variables can be found
diff --git a/aio/aio-builds-setup/docs/vm-setup--create-host-dirs-and-files.md b/aio/aio-builds-setup/docs/vm-setup--create-host-dirs-and-files.md
index d3b4df8a42..423904954b 100644
--- a/aio/aio-builds-setup/docs/vm-setup--create-host-dirs-and-files.md
+++ b/aio/aio-builds-setup/docs/vm-setup--create-host-dirs-and-files.md
@@ -41,9 +41,10 @@ certificate covering both the domain and subdomains.
 ## Create directory for logs (Optional)
 Optionally, a logs directory can pe passed to the docker container for storing non-system-related
 logs. If not provided, the logs are kept locally on the container and will be lost whenever the
-container is replaced (e.g. when updating to use a newer version of the docker image).
+container is replaced (e.g. when updating to use a newer version of the docker image). Log files are
+rotated and retained for 6 months.
 
-The following files log files are kept in this directory:
+The following log files are kept in this directory:
 
 - `clean-up.log`:
   Output of the `aio-clean-up` command, run as a cronjob for cleaning up the build artifacts of
diff --git a/aio/aio-builds-setup/docs/vm-setup--start-docker-container.md b/aio/aio-builds-setup/docs/vm-setup--start-docker-container.md
index 8628664f21..880624a907 100644
--- a/aio/aio-builds-setup/docs/vm-setup--start-docker-container.md
+++ b/aio/aio-builds-setup/docs/vm-setup--start-docker-container.md
@@ -7,16 +7,16 @@ command:
 
 ```
 sudo docker run \
-  -d \
+  --detach \
   --dns 127.0.0.1 \
   --name <instance-name> \
-  -p 80:80 \
-  -p 443:443 \
+  --publish 80:80 \
+  --publish 443:443 \
   --restart unless-stopped \
- [-v <host-cert-dir>:/etc/ssl/localcerts:ro] \
-  -v <host-secrets-dir>:/aio-secrets:ro \
-  -v <host-builds-dir>:/var/www/aio-builds \
- [-v <host-logs-dir>:/var/log/aio] \
+ [--volume <host-cert-dir>:/etc/ssl/localcerts:ro] \
+  --volume <host-secrets-dir>:/aio-secrets:ro \
+  --volume <host-builds-dir>:/var/www/aio-builds \
+ [--volume <host-logs-dir>:/var/log/aio] \
   <name>[:<tag>]
 ```
 
@@ -27,7 +27,7 @@ can be found [here](https://docs.docker.com/engine/reference/run/).
 sudo docker run \
 
   # Start as a daemon.
-  -d \
+  --detach \
 
   # Use the local DNS server.
   # (This is necessary for mapping internal URLs, e.g. for the Node.js upload-server.)
@@ -37,9 +37,9 @@ sudo docker run \
   # Useful for running `docker` commands, e.g.: `docker stop <instance-name>`
   --name <instance-name> \
 
-  # Map ports of the hosr VM (left) to ports of the docker container (right)
-  -p 80:80 \
-  -p 443:443 \
+  # Map ports of the host VM (left) to ports of the docker container (right)
+  --publish 80:80 \
+  --publish 443:443 \
 
   # Automatically restart the container (unless it was explicitly stopped by the user).
   # (This ensures that the container will be automatically started on boot.)
@@ -48,22 +48,22 @@ sudo docker run \
   # The directory the contains the SSL certificates.
   # (See [here](vm-setup--create-host-dirs-and-files.md) for more info.)
   # If not provided, the container will use self-signed certificates.
- [-v <host-cert-dir>:/etc/ssl/localcerts:ro] \
+ [--volume <host-cert-dir>:/etc/ssl/localcerts:ro] \
 
   # The directory the contains the secrets (e.g. GitHub token, JWT secret, etc).
   # (See [here](vm-setup--set-up-secrets.md) for more info.)
-  -v <host-secrets-dir>:/aio-secrets:ro \
+  --volume <host-secrets-dir>:/aio-secrets:ro \
 
   # The uploaded build artifacts will stored to and served from this directory.
   # (If you are using a persistent disk - as described [here](vm-setup--attach-persistent-disk.md) -
   #  this will be a directory inside the disk.)
-  -v <host-builds-dir>:/var/www/aio-builds \
+  --volume <host-builds-dir>:/var/www/aio-builds \
 
   # The directory where the logs are being kept.
   # (See [here](vm-setup--create-host-dirs-and-files.md) for more info.)
   # If not provided, the logs will be kept inside the container, which means they will be lost
   # whenever a new container is created.
- [-v <host-logs-dir>:/var/log/aio] \
+ [--volume <host-logs-dir>:/var/log/aio] \
 
   # The name of the docker image to use (and an optional tag; defaults to `latest`).
   # (See [here](vm-setup--create-docker-image.md) for instructions on how to create the iamge.)
@@ -78,15 +78,15 @@ by the container for accesing secrets and SSL certificates and keeping the build
 
 ```
 sudo docker run \
-  -d \
+  --detach \
   --dns 127.0.0.1 \
   --name foobar-builds-1 \
-  -p 80:80 \
-  -p 443:443 \
+  --publish 80:80 \
+  --publish 443:443 \
   --restart unless-stopped \
-  -v /etc/ssl/localcerts:/etc/ssl/localcerts:ro \
-  -v /foobar-secrets:/aio-secrets:ro \
-  -v /mnt/disks/foobar-builds:/var/www/aio-builds \
-  -v /foobar-logs:/var/log/aio \
+  --volume /etc/ssl/localcerts:/etc/ssl/localcerts:ro \
+  --volume /foobar-secrets:/aio-secrets:ro \
+  --volume /mnt/disks/foobar-builds:/var/www/aio-builds \
+  --volume /foobar-logs:/var/log/aio \
   foobar-builds
 ```
diff --git a/aio/aio-builds-setup/docs/vm-setup--update-docker-container.md b/aio/aio-builds-setup/docs/vm-setup--update-docker-container.md
new file mode 100644
index 0000000000..47fd61ac6a
--- /dev/null
+++ b/aio/aio-builds-setup/docs/vm-setup--update-docker-container.md
@@ -0,0 +1,52 @@
+# VM setup - Update docker container
+
+
+## Overview
+Assuming you have cloned the repository containing the preview server code (as described
+[here](vm-setup--create-docker-image.md)), you can use the `update-preview-server.sh` script on the
+VM host to update the preview server based on changes in the source code.
+
+The script will pull the latest changes from the origin's master branch and examine if there have
+been any changes in files inside the preview server source code directory (see below). If there are,
+it will create a new image and verify that is works as expected. Finally, it will stop and remove
+the old docker container and image, create and new container based on the new image and start it.
+
+The script assumes that the preview server source code is in the repository's
+`aio/aio-builds-setup/` directory and expects the following inputs:
+
+- **$1**: `HOST_REPO_DIR`
+- **$2**: `HOST_LOCALCERTS_DIR`
+- **$3**: `HOST_SECRETS_DIR`
+- **$4**: `HOST_BUILDS_DIR`
+- **$5**: `HOST_LOGS_DIR`
+
+See [here](vm-setup--create-host-dirs-and-files.md) for more info on what each input directory is
+used for.
+
+**Note 1:** The script has to execute docker commands with `sudo`.
+
+**Note 2:** Make sure the user that executes the script has access to update the repository
+
+
+## Run the script manually
+You may choose to manually run the script, when necessary. Example:
+
+```
+update-preview-server.sh \
+    /path/to/repo \
+    /path/to/localcerts \
+    /path/to/secrets \
+    /path/to/builds \
+    /path/to/logs
+```
+
+
+## Run the script automatically
+You may choose to automatically trigger the script, e.g. using a cronjob. For example, the following
+cronjob entry would run the script every hour and update the preview server (assuming the user has
+the necessary permissions):
+
+```
+# Periodically check for changes and update the preview server (if necessary)
+*/30 *  * * *   /path/to/update-preview-server.sh /path/to/repo /path/to/localcerts /path/to/secrets /path/to/builds /path/to/logs
+```
diff --git a/aio/aio-builds-setup/scripts/env.sh b/aio/aio-builds-setup/scripts/_env.sh
similarity index 100%
rename from aio/aio-builds-setup/scripts/env.sh
rename to aio/aio-builds-setup/scripts/_env.sh
diff --git a/aio/aio-builds-setup/scripts/build.sh b/aio/aio-builds-setup/scripts/create-image.sh
similarity index 62%
rename from aio/aio-builds-setup/scripts/build.sh
rename to aio/aio-builds-setup/scripts/create-image.sh
index 3d1fce9695..86c6905bcf 100755
--- a/aio/aio-builds-setup/scripts/build.sh
+++ b/aio/aio-builds-setup/scripts/create-image.sh
@@ -2,14 +2,16 @@
 set -eux -o pipefail
 
 # Set up env
-source "`dirname $0`/env.sh"
+source "`dirname $0`/_env.sh"
 readonly defaultImageNameAndTag="aio-builds:latest"
 
 # Build `scripts-js/`
-cd "$SCRIPTS_JS_DIR"
-yarn install
-yarn run build
-cd -
+# (Necessary, because only `scripts-js/dist/` is copied to the docker image.)
+(
+  cd "$SCRIPTS_JS_DIR"
+  yarn install
+  yarn build
+)
 
 # Create docker image
 readonly nameAndOptionalTag=${1:-$defaultImageNameAndTag}
diff --git a/aio/aio-builds-setup/scripts/test.sh b/aio/aio-builds-setup/scripts/test.sh
index 1fbe75298f..06a9fb76b1 100755
--- a/aio/aio-builds-setup/scripts/test.sh
+++ b/aio/aio-builds-setup/scripts/test.sh
@@ -2,10 +2,11 @@
 set -eux -o pipefail
 
 # Set up env
-source "`dirname $0`/env.sh"
+source "`dirname $0`/_env.sh"
 
 # Test `scripts-js/`
-cd "$SCRIPTS_JS_DIR"
-yarn install
-yarn test
-cd -
+(
+  cd "$SCRIPTS_JS_DIR"
+  yarn install
+  yarn test
+)
diff --git a/aio/aio-builds-setup/scripts/travis-preverify-pr.sh b/aio/aio-builds-setup/scripts/travis-preverify-pr.sh
deleted file mode 100755
index a0a45716c4..0000000000
--- a/aio/aio-builds-setup/scripts/travis-preverify-pr.sh
+++ /dev/null
@@ -1,13 +0,0 @@
-#!/bin/bash
-set -eux -o pipefail
-
-# Set up env
-source "`dirname $0`/env.sh"
-
-# Preverify PR
-AIO_GITHUB_ORGANIZATION="angular" \
-AIO_GITHUB_TEAM_SLUGS="angular-core,aio-contributors" \
-AIO_GITHUB_TOKEN=$(echo ${GITHUB_TEAM_MEMBERSHIP_CHECK_KEY} | rev) \
-AIO_REPO_SLUG=$TRAVIS_REPO_SLUG \
-AIO_PREVERIFY_PR=$TRAVIS_PULL_REQUEST \
-node "$SCRIPTS_JS_DIR/dist/lib/upload-server/index-preverify-pr"
diff --git a/aio/aio-builds-setup/scripts/update-preview-server.sh b/aio/aio-builds-setup/scripts/update-preview-server.sh
new file mode 100755
index 0000000000..1fd6bf6a9d
--- /dev/null
+++ b/aio/aio-builds-setup/scripts/update-preview-server.sh
@@ -0,0 +1,70 @@
+#!/usr/bin/env bash
+
+set -eux -o pipefail
+exec 3>&1
+
+echo "[`date`] - Updating the preview server..."
+
+# Input
+readonly HOST_REPO_DIR=$1
+readonly HOST_LOCALCERTS_DIR=$2
+readonly HOST_SECRETS_DIR=$3
+readonly HOST_BUILDS_DIR=$4
+readonly HOST_LOGS_DIR=$5
+
+# Constants
+readonly PROVISIONAL_IMAGE_NAME=aio-builds:provisional
+readonly LATEST_IMAGE_NAME=aio-builds:latest
+readonly CONTAINER_NAME=aio
+
+# Run
+(
+  cd "$HOST_REPO_DIR"
+
+  readonly lastDeployedCommit=$(git rev-parse HEAD)
+  echo "Currently at commit $lastDeployedCommit."
+
+  # Pull latest master from origin.
+  git pull origin master
+
+  # Do not update the server unless files inside `aio-builds-setup/` have changed
+  # or the last attempt failed (identified by the provisional image still being around).
+  readonly relevantChangedFilesCount=$(git diff --name-only $lastDeployedCommit...HEAD | grep -P "^aio/aio-builds-setup/" | wc -l)
+  readonly lastAttemptFailed=$(sudo docker rmi "$PROVISIONAL_IMAGE_NAME" >> /dev/fd/3 && echo "true" || echo "false")
+  if [[ $relevantChangedFilesCount -eq 0 ]] && [[ "$lastAttemptFailed" != "true" ]]; then
+    echo "Skipping update because no relevant files have been touched."
+    exit 0
+  fi
+
+  # Create and verify a new docker image.
+  aio/aio-builds-setup/scripts/create-image.sh "$PROVISIONAL_IMAGE_NAME"
+  readonly imageVerified=$(sudo docker run --dns 127.0.0.1 --rm --volume $HOST_SECRETS_DIR:/aio-secrets:ro "$PROVISIONAL_IMAGE_NAME" /bin/bash -c "aio-init && aio-health-check && aio-verify-setup" >> /dev/fd/3 && echo "true" || echo "false")
+
+  if [[ "$imageVerified" != "true" ]]; then
+    echo "Failed to verify new docker image. Aborting update!"
+    exit 1
+  fi
+
+  # Remove the old container and replace the docker image.
+  sudo docker stop "$CONTAINER_NAME" || true
+  sudo docker rm "$CONTAINER_NAME" || true
+  sudo docker rmi "$LATEST_IMAGE_NAME" || true
+  sudo docker tag "$PROVISIONAL_IMAGE_NAME" "$LATEST_IMAGE_NAME"
+  sudo docker rmi "$PROVISIONAL_IMAGE_NAME"
+
+  # Create and start a docker container based on the new image.
+  sudo docker run \
+      --detach \
+      --dns 127.0.0.1 \
+      --name "$CONTAINER_NAME" \
+      --publish 80:80 \
+      --publish 443:443 \
+      --restart unless-stopped \
+      --volume $HOST_LOCALCERTS_DIR:/etc/ssl/localcerts:ro \
+      --volume $HOST_SECRETS_DIR:/aio-secrets:ro \
+      --volume $HOST_BUILDS_DIR:/var/www/aio-builds \
+      --volume $HOST_LOGS_DIR:/var/log/aio \
+      "$LATEST_IMAGE_NAME"
+
+  echo "The new docker image has been successfully deployed."
+)
diff --git a/aio/content/examples/.gitignore b/aio/content/examples/.gitignore
index 4352bbcdf1..3a57bb712c 100644
--- a/aio/content/examples/.gitignore
+++ b/aio/content/examples/.gitignore
@@ -36,34 +36,35 @@ dist/
 *.3.js.map
 !systemjs.config.*.js
 !karma-test-shim.*.js
+!copy-dist-files.js
 
 # AngularJS files
 !**/*.ajs.js
+**/app/**/*.ajs.js
 
 # aot
-**/*.ngfactory.ts
-**/*.ngsummary.json
-**/*.shim.ngstyle.ts
-**/*.metadata.json
-!aot/bs-config.json
-!aot/index.html
-!copy-dist-files.js
+*/aot/**/*
+!*/aot/bs-config.json
+!*/aot/index.html
 !rollup-config.js
 
+# i18n
+!i18n/src/systemjs-text-plugin.js
+
 # testing
 !testing/src/browser-test-shim.js
 !testing/karma*.js
 
 # TS to JS
-!cb-ts-to-js/js*/**/*.js
-cb-ts-to-js/js*/**/system*.js
+!ts-to-js/js*/**/*.js
+ts-to-js/js*/**/system*.js
 
 # webpack
 !webpack/**/config/*.js
 !webpack/**/*webpack*.js
 
-# style-guide
-!style-guide/src/systemjs.custom.js
+# styleguide
+!styleguide/src/systemjs.custom.js
 
 # plunkers
 *plnkr.no-link.html
diff --git a/aio/content/examples/cb-ajs-quick-reference/e2e-spec.ts b/aio/content/examples/ajs-quick-reference/e2e-spec.ts
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/e2e-spec.ts
rename to aio/content/examples/ajs-quick-reference/e2e-spec.ts
diff --git a/aio/content/examples/cb-ajs-quick-reference/example-config.json b/aio/content/examples/ajs-quick-reference/example-config.json
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/example-config.json
rename to aio/content/examples/ajs-quick-reference/example-config.json
diff --git a/aio/content/examples/cb-ajs-quick-reference/plnkr.json b/aio/content/examples/ajs-quick-reference/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/plnkr.json
rename to aio/content/examples/ajs-quick-reference/plnkr.json
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/app-routing.module.ts b/aio/content/examples/ajs-quick-reference/src/app/app-routing.module.ts
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/app-routing.module.ts
rename to aio/content/examples/ajs-quick-reference/src/app/app-routing.module.ts
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/app.component.css b/aio/content/examples/ajs-quick-reference/src/app/app.component.css
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/app.component.css
rename to aio/content/examples/ajs-quick-reference/src/app/app.component.css
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/app.component.html b/aio/content/examples/ajs-quick-reference/src/app/app.component.html
similarity index 93%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/app.component.html
rename to aio/content/examples/ajs-quick-reference/src/app/app.component.html
index 72fd3de86f..82eaf9339b 100644
--- a/aio/content/examples/cb-ajs-quick-reference/src/app/app.component.html
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.component.html
@@ -14,13 +14,13 @@
 <h1>Example Snippets</h1>
 
 <!-- #docregion ngClass -->
-<div [ngClass]="{active: isActive}">
+<div [ngClass]="{'active': isActive}">
 <!-- #enddocregion ngClass -->
   [ngClass] active
 </div>
 <!-- #docregion ngClass -->
-<div [ngClass]="{active: isActive,
-                 shazam: isImportant}">
+<div [ngClass]="{'active': isActive,
+                 'shazam': isImportant}">
 <!-- #enddocregion ngClass -->
   [ngClass] active and boldly important
 </div>
@@ -57,7 +57,7 @@
 
 <p></p>
 <!-- #docregion ngStyle -->
-<div [ngStyle]="{color: colorPreference}">
+<div [ngStyle]="{'color': colorPreference}">
 <!-- #enddocregion ngStyle -->
   color preference #1
 </div>
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/app.component.ts b/aio/content/examples/ajs-quick-reference/src/app/app.component.ts
similarity index 92%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/app.component.ts
rename to aio/content/examples/ajs-quick-reference/src/app/app.component.ts
index e1b71e37dc..91091026ad 100644
--- a/aio/content/examples/cb-ajs-quick-reference/src/app/app.component.ts
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.component.ts
@@ -19,7 +19,7 @@ export class AppComponent {
   movie: IMovie = null;
   movies: IMovie[] = [];
   showImage = true;
-  title: string = 'AngularJS to Angular Quick Ref Cookbook';
+  title = 'AngularJS to Angular Quick Ref Cookbook';
   toggleImage(event: UIEvent) {
     this.showImage = !this.showImage;
     this.eventType = (event && event.type) || 'not provided';
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/app.module.1.ts b/aio/content/examples/ajs-quick-reference/src/app/app.module.1.ts
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/app.module.1.ts
rename to aio/content/examples/ajs-quick-reference/src/app/app.module.1.ts
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/app.module.ts b/aio/content/examples/ajs-quick-reference/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/app.module.ts
rename to aio/content/examples/ajs-quick-reference/src/app/app.module.ts
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/date.pipe.ts b/aio/content/examples/ajs-quick-reference/src/app/date.pipe.ts
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/date.pipe.ts
rename to aio/content/examples/ajs-quick-reference/src/app/date.pipe.ts
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.css b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.css
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.css
rename to aio/content/examples/ajs-quick-reference/src/app/movie-list.component.css
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.html b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.html
rename to aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.ts b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
similarity index 97%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.ts
rename to aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
index b0b57f018c..fa71f7a7ab 100644
--- a/aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.ts
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
@@ -19,7 +19,7 @@ import { MovieService } from './movie.service';
 export class MovieListComponent {
 // #enddocregion class
   favoriteHero: string;
-  showImage: boolean = false;
+  showImage = false;
   movies: IMovie[];
 
 // #docregion di
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/movie.service.ts b/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/movie.service.ts
rename to aio/content/examples/ajs-quick-reference/src/app/movie.service.ts
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/movie.ts b/aio/content/examples/ajs-quick-reference/src/app/movie.ts
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/app/movie.ts
rename to aio/content/examples/ajs-quick-reference/src/app/movie.ts
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/images/hero.png b/aio/content/examples/ajs-quick-reference/src/images/hero.png
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/images/hero.png
rename to aio/content/examples/ajs-quick-reference/src/images/hero.png
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/images/ng-logo.png b/aio/content/examples/ajs-quick-reference/src/images/ng-logo.png
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/images/ng-logo.png
rename to aio/content/examples/ajs-quick-reference/src/images/ng-logo.png
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/images/villain.png b/aio/content/examples/ajs-quick-reference/src/images/villain.png
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/images/villain.png
rename to aio/content/examples/ajs-quick-reference/src/images/villain.png
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/index.html b/aio/content/examples/ajs-quick-reference/src/index.html
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/index.html
rename to aio/content/examples/ajs-quick-reference/src/index.html
diff --git a/aio/content/examples/cb-ajs-quick-reference/src/main.ts b/aio/content/examples/ajs-quick-reference/src/main.ts
similarity index 100%
rename from aio/content/examples/cb-ajs-quick-reference/src/main.ts
rename to aio/content/examples/ajs-quick-reference/src/main.ts
diff --git a/aio/content/examples/animations/.gitignore b/aio/content/examples/animations/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/aio/content/examples/animations/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/aio/content/examples/animations/src/app/hero-list-timings.component.ts b/aio/content/examples/animations/src/app/hero-list-timings.component.ts
index 3218609b4a..a300012e23 100644
--- a/aio/content/examples/animations/src/app/hero-list-timings.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-timings.component.ts
@@ -44,7 +44,7 @@ import { Heroes } from './hero.service';
         animate('0.2s ease-in')
       ]),
       transition('* => void', [
-        animate('0.2s 10 ease-out', style({
+        animate('0.2s 0.1s ease-out', style({
           opacity: 0,
           transform: 'translateX(100%)'
         }))
diff --git a/aio/content/examples/animations/src/index.html b/aio/content/examples/animations/src/index.html
index 6c4a13adb2..74a397e7d1 100644
--- a/aio/content/examples/animations/src/index.html
+++ b/aio/content/examples/animations/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
     <meta charset="UTF-8">
     <title>Animations</title>
diff --git a/aio/content/examples/cb-aot-compiler/e2e-spec.ts b/aio/content/examples/aot-compiler/e2e-spec.ts
similarity index 100%
rename from aio/content/examples/cb-aot-compiler/e2e-spec.ts
rename to aio/content/examples/aot-compiler/e2e-spec.ts
diff --git a/aio/content/examples/cb-aot-compiler/example-config.json b/aio/content/examples/aot-compiler/example-config.json
similarity index 100%
rename from aio/content/examples/cb-aot-compiler/example-config.json
rename to aio/content/examples/aot-compiler/example-config.json
diff --git a/aio/content/examples/cb-aot-compiler/rollup-config.js b/aio/content/examples/aot-compiler/rollup-config.js
similarity index 85%
rename from aio/content/examples/cb-aot-compiler/rollup-config.js
rename to aio/content/examples/aot-compiler/rollup-config.js
index 1cd25515ba..37a41a5e6f 100644
--- a/aio/content/examples/cb-aot-compiler/rollup-config.js
+++ b/aio/content/examples/aot-compiler/rollup-config.js
@@ -1,8 +1,7 @@
 // #docregion
-import rollup      from 'rollup'
-import nodeResolve from 'rollup-plugin-node-resolve'
+import nodeResolve from 'rollup-plugin-node-resolve';
 import commonjs    from 'rollup-plugin-commonjs';
-import uglify      from 'rollup-plugin-uglify'
+import uglify      from 'rollup-plugin-uglify';
 
 // #docregion config
 export default {
@@ -30,5 +29,5 @@ export default {
       uglify()
       // #enddocregion uglify
   ]
-}
+};
 // #enddocregion config
diff --git a/aio/content/examples/cb-aot-compiler/src/app/app.component.html b/aio/content/examples/aot-compiler/src/app/app.component.html
similarity index 100%
rename from aio/content/examples/cb-aot-compiler/src/app/app.component.html
rename to aio/content/examples/aot-compiler/src/app/app.component.html
diff --git a/aio/content/examples/cb-aot-compiler/src/app/app.component.ts b/aio/content/examples/aot-compiler/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/cb-aot-compiler/src/app/app.component.ts
rename to aio/content/examples/aot-compiler/src/app/app.component.ts
diff --git a/aio/content/examples/cb-aot-compiler/src/app/app.module.ts b/aio/content/examples/aot-compiler/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/cb-aot-compiler/src/app/app.module.ts
rename to aio/content/examples/aot-compiler/src/app/app.module.ts
diff --git a/aio/content/examples/cb-aot-compiler/src/index-jit.html b/aio/content/examples/aot-compiler/src/index-jit.html
similarity index 100%
rename from aio/content/examples/cb-aot-compiler/src/index-jit.html
rename to aio/content/examples/aot-compiler/src/index-jit.html
diff --git a/aio/content/examples/cb-aot-compiler/src/index.html b/aio/content/examples/aot-compiler/src/index.html
similarity index 100%
rename from aio/content/examples/cb-aot-compiler/src/index.html
rename to aio/content/examples/aot-compiler/src/index.html
diff --git a/aio/content/examples/cb-aot-compiler/src/main-jit.ts b/aio/content/examples/aot-compiler/src/main-jit.ts
similarity index 100%
rename from aio/content/examples/cb-aot-compiler/src/main-jit.ts
rename to aio/content/examples/aot-compiler/src/main-jit.ts
diff --git a/aio/content/examples/cb-aot-compiler/src/main.ts b/aio/content/examples/aot-compiler/src/main.ts
similarity index 100%
rename from aio/content/examples/cb-aot-compiler/src/main.ts
rename to aio/content/examples/aot-compiler/src/main.ts
diff --git a/aio/content/examples/cb-aot-compiler/tsconfig-aot.json b/aio/content/examples/aot-compiler/tsconfig-aot.json
similarity index 80%
rename from aio/content/examples/cb-aot-compiler/tsconfig-aot.json
rename to aio/content/examples/aot-compiler/tsconfig-aot.json
index d0a3d00ad4..ea56eb7067 100644
--- a/aio/content/examples/cb-aot-compiler/tsconfig-aot.json
+++ b/aio/content/examples/aot-compiler/tsconfig-aot.json
@@ -8,7 +8,10 @@
     "experimentalDecorators": true,
     "lib": ["es2015", "dom"],
     "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "./node_modules/@types/"
+    ]
   },
 
   "files": [
diff --git a/aio/content/examples/architecture/e2e-spec.ts b/aio/content/examples/architecture/e2e-spec.ts
index e967804483..a5aa78f4fc 100644
--- a/aio/content/examples/architecture/e2e-spec.ts
+++ b/aio/content/examples/architecture/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { protractor, browser, element, by, ElementFinder } from 'protractor';
 
diff --git a/aio/content/examples/architecture/src/app/backend.service.ts b/aio/content/examples/architecture/src/app/backend.service.ts
index e47cfc8ace..e3e21a6ff4 100644
--- a/aio/content/examples/architecture/src/app/backend.service.ts
+++ b/aio/content/examples/architecture/src/app/backend.service.ts
@@ -6,7 +6,7 @@ import { Hero } from './hero';
 const HEROES = [
         new Hero('Windstorm', 'Weather mastery'),
         new Hero('Mr. Nice', 'Killing them with kindness'),
-        new Hero('Magneta', 'Manipulates metalic objects')
+        new Hero('Magneta', 'Manipulates metallic objects')
       ];
 
 @Injectable()
diff --git a/aio/content/examples/attribute-directives/e2e-spec.ts b/aio/content/examples/attribute-directives/e2e-spec.ts
index 79425d7923..fd033ce32f 100644
--- a/aio/content/examples/attribute-directives/e2e-spec.ts
+++ b/aio/content/examples/attribute-directives/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
index 4696132f64..6778e7e46c 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
@@ -28,7 +28,7 @@ export class HighlightDirective {
   private highlight(color: string) {
     this.el.nativeElement.style.backgroundColor = color;
   }
-  // #enddocregion mouse-methods, 
+  // #enddocregion mouse-methods,
 
   // #docregion color
   @Input() highlightColor: string;
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
index 97b1497013..2269cbbe39 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
@@ -1,5 +1,5 @@
 /* tslint:disable:member-ordering */
-// #docregion imports, 
+// #docregion imports,
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 // #enddocregion imports
 
diff --git a/aio/content/examples/cb-aot-compiler/.gitignore b/aio/content/examples/cb-aot-compiler/.gitignore
deleted file mode 100644
index 91da4c79a2..0000000000
--- a/aio/content/examples/cb-aot-compiler/.gitignore
+++ /dev/null
@@ -1,7 +0,0 @@
-**/*.ngfactory.ts
-**/*.ngsummary.json
-**/*.shim.ngstyle.ts
-**/*.metadata.json
-dist
-!app/tsconfig.json
-!rollup-config.js
diff --git a/aio/content/examples/cb-component-communication/.gitignore b/aio/content/examples/cb-component-communication/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/aio/content/examples/cb-component-communication/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/aio/content/examples/cb-i18n/.gitignore b/aio/content/examples/cb-i18n/.gitignore
deleted file mode 100644
index d38bb50aa9..0000000000
--- a/aio/content/examples/cb-i18n/.gitignore
+++ /dev/null
@@ -1,6 +0,0 @@
-**/*.ngfactory.ts
-**/*.metadata.json
-dist
-!app/tsconfig.json
-!rollup.js
-!src/systemjs-text-plugin.js
diff --git a/aio/content/examples/cb-i18n/src/app/app.component.1.html b/aio/content/examples/cb-i18n/src/app/app.component.1.html
deleted file mode 100644
index cc7d4f1155..0000000000
--- a/aio/content/examples/cb-i18n/src/app/app.component.1.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--#docregion greeting-->
-<h1>Hello i18n!</h1>
-<!--#enddocregion greeting-->
-
-<!--#docregion i18n-attribute-->
-<h1 i18n>Hello i18n!</h1>
-<!--#enddocregion i18n-attribute-->
-
-<!--#docregion i18n-attribute-desc-->
-<h1 i18n="An introduction header for this sample">Hello i18n!</h1>
-<!--#enddocregion i18n-attribute-desc-->
-
-<!--#docregion i18n-title-->
-<img [src]="logo" title="Angular logo">
-<!--#enddocregion i18n-title-->
diff --git a/aio/content/examples/cb-visual-studio-2015/.gitignore b/aio/content/examples/cb-visual-studio-2015/.gitignore
deleted file mode 100644
index ca3f2dbd5e..0000000000
--- a/aio/content/examples/cb-visual-studio-2015/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-!tsconfig.json
diff --git a/aio/content/examples/cli-quickstart/.gitignore b/aio/content/examples/cli-quickstart/.gitignore
deleted file mode 100644
index 04a48dc643..0000000000
--- a/aio/content/examples/cli-quickstart/.gitignore
+++ /dev/null
@@ -1,45 +0,0 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# compiled output
-/dist
-/tmp
-
-# dependencies
-/node_modules
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-
-# misc
-/.sass-cache
-/connect.lock
-/coverage/*
-/libpeerconnection.log
-npm-debug.log
-testem.log
-/typings
-
-# e2e
-/e2e/*.js
-/e2e/*.map
-
-#System Files
-.DS_Store
-Thumbs.db
-
-!src/styles.css
-!karma.conf.js
-!protractor.conf.js
diff --git a/aio/content/examples/cli-quickstart/e2e-spec.ts b/aio/content/examples/cli-quickstart/e2e-spec.ts
index 59816e13c2..3f0760b56e 100644
--- a/aio/content/examples/cli-quickstart/e2e-spec.ts
+++ b/aio/content/examples/cli-quickstart/e2e-spec.ts
@@ -9,6 +9,6 @@ describe('cli-quickstart App', () => {
 
   it('should display message saying app works', () => {
     let pageTitle = element(by.css('app-root h1')).getText();
-    expect(pageTitle).toEqual('My First Angular App');
+    expect(pageTitle).toEqual('Welcome to My First Angular App!!');
   });
 });
diff --git a/aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts b/aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts
index 4346d120c8..eea51018bd 100644
--- a/aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts
+++ b/aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts
@@ -9,6 +9,6 @@ describe('my-app App', function() {
 
   it('should display message saying app works', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('app works!');
+    expect(page.getParagraphText()).toEqual('Welcome to app!!');
   });
 });
diff --git a/aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json b/aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json
index 74c2bca131..39b800f789 100644
--- a/aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json
+++ b/aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json
@@ -1,18 +1,12 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [
-      "es2016"
-    ],
-    "outDir": "../dist/out-tsc-e2e",
+    "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es6",
-    "types":[
+    "target": "es5",
+    "types": [
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }
diff --git a/aio/content/examples/cli-quickstart/src/app/app.component.html b/aio/content/examples/cli-quickstart/src/app/app.component.html
index b6931b538a..1a1d09dc78 100644
--- a/aio/content/examples/cli-quickstart/src/app/app.component.html
+++ b/aio/content/examples/cli-quickstart/src/app/app.component.html
@@ -1,3 +1,20 @@
-<h1>
-  {{title}}
-</h1>
+<!--The content below is only a placeholder and can be replaced.-->
+<div style="text-align:center">
+  <h1>
+    Welcome to {{title}}!!
+  </h1>
+  <img width="300" alt="Angular logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
+</div>
+<h2>Here are some links to help you start: </h2>
+<ul>
+  <li>
+    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
+  </li>
+</ul>
+
diff --git a/aio/content/examples/cli-quickstart/src/app/app.component.spec.ts b/aio/content/examples/cli-quickstart/src/app/app.component.spec.ts
index c740bcd745..7d2799ceb6 100644
--- a/aio/content/examples/cli-quickstart/src/app/app.component.spec.ts
+++ b/aio/content/examples/cli-quickstart/src/app/app.component.spec.ts
@@ -17,16 +17,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it(`should have as title 'app works!'`, async(() => {
+  it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app works!');
+    expect(app.title).toEqual('app');
   }));
 
   it('should render title in a h1 tag', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
   }));
 });
diff --git a/aio/content/examples/cli-quickstart/src/app/app.module.ts b/aio/content/examples/cli-quickstart/src/app/app.module.ts
index 67ae49119b..f65716351a 100644
--- a/aio/content/examples/cli-quickstart/src/app/app.module.ts
+++ b/aio/content/examples/cli-quickstart/src/app/app.module.ts
@@ -1,7 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 
@@ -10,9 +8,7 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule,
-    FormsModule,
-    HttpModule
+    BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/aio/content/examples/cli-quickstart/src/index.html b/aio/content/examples/cli-quickstart/src/index.html
index 8a1a7b32b3..0450fa57c3 100644
--- a/aio/content/examples/cli-quickstart/src/index.html
+++ b/aio/content/examples/cli-quickstart/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>MyApp</title>
@@ -9,6 +9,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root>Loading...</app-root>
+  <app-root></app-root>
 </body>
 </html>
diff --git a/aio/content/examples/cli-quickstart/src/polyfills.ts b/aio/content/examples/cli-quickstart/src/polyfills.ts
index 53bdaf1b86..7831e97b79 100644
--- a/aio/content/examples/cli-quickstart/src/polyfills.ts
+++ b/aio/content/examples/cli-quickstart/src/polyfills.ts
@@ -31,21 +31,21 @@
 // import 'core-js/es6/array';
 // import 'core-js/es6/regexp';
 // import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
 // import 'core-js/es6/set';
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following to support `@angular/animation`. */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
 /** Evergreen browsers require these. **/
 import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
 
 
-/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+/**
+ * Required to support Web Animations `@angular/animation`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 
@@ -66,3 +66,7 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
  */
 // import 'intl';  // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';
diff --git a/aio/content/examples/cli-quickstart/src/styles.css b/aio/content/examples/cli-quickstart/src/styles.css
deleted file mode 100644
index d81835d0cd..0000000000
--- a/aio/content/examples/cli-quickstart/src/styles.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/* #docregion , quickstart, toh */
-/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-/* #enddocregion quickstart */
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-/* #enddocregion toh */
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* #docregion toh */
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}
diff --git a/aio/content/examples/cli-quickstart/src/tsconfig.app.json b/aio/content/examples/cli-quickstart/src/tsconfig.app.json
index 9f12c4b849..5e2507db58 100644
--- a/aio/content/examples/cli-quickstart/src/tsconfig.app.json
+++ b/aio/content/examples/cli-quickstart/src/tsconfig.app.json
@@ -1,16 +1,7 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [
-      "es2016",
-      "dom"
-    ],
     "outDir": "../out-tsc/app",
-    "target": "es5",
     "module": "es2015",
     "baseUrl": "",
     "types": []
diff --git a/aio/content/examples/cli-quickstart/src/tsconfig.spec.json b/aio/content/examples/cli-quickstart/src/tsconfig.spec.json
index 6c5160e12e..510e3f1fda 100644
--- a/aio/content/examples/cli-quickstart/src/tsconfig.spec.json
+++ b/aio/content/examples/cli-quickstart/src/tsconfig.spec.json
@@ -1,16 +1,9 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [
-      "es2016"
-    ],
     "outDir": "../out-tsc/spec",
     "module": "commonjs",
-    "target": "es6",
+    "target": "es5",
     "baseUrl": "",
     "types": [
       "jasmine",
@@ -21,6 +14,7 @@
     "test.ts"
   ],
   "include": [
-    "**/*.spec.ts"
+    "**/*.spec.ts",
+    "**/*.d.ts"
   ]
 }
diff --git a/aio/content/examples/cli-quickstart/src/typings.d.ts b/aio/content/examples/cli-quickstart/src/typings.d.ts
new file mode 100644
index 0000000000..ef5c7bd620
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
diff --git a/aio/content/examples/cli-quickstart/tsconfig.json b/aio/content/examples/cli-quickstart/tsconfig.json
index cde5e35054..a35a8ee3a4 100644
--- a/aio/content/examples/cli-quickstart/tsconfig.json
+++ b/aio/content/examples/cli-quickstart/tsconfig.json
@@ -2,13 +2,19 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
     "lib": [
-      "es2016"
+      "es2016",
+      "dom"
     ]
   }
 }
diff --git a/aio/content/examples/cb-component-communication/e2e-spec.ts b/aio/content/examples/component-interaction/e2e-spec.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/e2e-spec.ts
rename to aio/content/examples/component-interaction/e2e-spec.ts
diff --git a/aio/content/examples/cb-component-communication/example-config.json b/aio/content/examples/component-interaction/example-config.json
similarity index 100%
rename from aio/content/examples/cb-component-communication/example-config.json
rename to aio/content/examples/component-interaction/example-config.json
diff --git a/aio/content/examples/cb-component-communication/plnkr.json b/aio/content/examples/component-interaction/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-component-communication/plnkr.json
rename to aio/content/examples/component-interaction/plnkr.json
diff --git a/aio/content/examples/cb-component-communication/src/app/app.component.html b/aio/content/examples/component-interaction/src/app/app.component.html
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/app.component.html
rename to aio/content/examples/component-interaction/src/app/app.component.html
diff --git a/aio/content/examples/cb-component-communication/src/app/app.component.ts b/aio/content/examples/component-interaction/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/app.component.ts
rename to aio/content/examples/component-interaction/src/app/app.component.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/app.module.ts b/aio/content/examples/component-interaction/src/app/app.module.ts
similarity index 95%
rename from aio/content/examples/cb-component-communication/src/app/app.module.ts
rename to aio/content/examples/component-interaction/src/app/app.module.ts
index a008fc5486..7a27465ff8 100644
--- a/aio/content/examples/cb-component-communication/src/app/app.module.ts
+++ b/aio/content/examples/component-interaction/src/app/app.module.ts
@@ -39,7 +39,7 @@ if (!/e2e/.test(location.search)) {
   directives.push(CountdownLocalVarParentComponent);
   directives.push(CountdownViewChildParentComponent);
 } else {
-  // In e2e test use CUSTOM_ELEMENTS_SCHEMA to supress unknown element errors
+  // In e2e test use CUSTOM_ELEMENTS_SCHEMA to suppress unknown element errors
   schemas.push(CUSTOM_ELEMENTS_SCHEMA);
 }
 
diff --git a/aio/content/examples/cb-component-communication/src/app/astronaut.component.ts b/aio/content/examples/component-interaction/src/app/astronaut.component.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/astronaut.component.ts
rename to aio/content/examples/component-interaction/src/app/astronaut.component.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/countdown-parent.component.ts b/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/countdown-parent.component.ts
rename to aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/countdown-timer.component.ts b/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/countdown-timer.component.ts
rename to aio/content/examples/component-interaction/src/app/countdown-timer.component.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/hero-child.component.ts b/aio/content/examples/component-interaction/src/app/hero-child.component.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/hero-child.component.ts
rename to aio/content/examples/component-interaction/src/app/hero-child.component.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/hero-parent.component.ts b/aio/content/examples/component-interaction/src/app/hero-parent.component.ts
similarity index 93%
rename from aio/content/examples/cb-component-communication/src/app/hero-parent.component.ts
rename to aio/content/examples/component-interaction/src/app/hero-parent.component.ts
index bf3861c455..19ceda7bac 100644
--- a/aio/content/examples/cb-component-communication/src/app/hero-parent.component.ts
+++ b/aio/content/examples/component-interaction/src/app/hero-parent.component.ts
@@ -15,6 +15,6 @@ import { HEROES } from './hero';
 })
 export class HeroParentComponent {
   heroes = HEROES;
-  master: string = 'Master';
+  master = 'Master';
 }
 // #enddocregion
diff --git a/aio/content/examples/cb-component-communication/src/app/hero.ts b/aio/content/examples/component-interaction/src/app/hero.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/hero.ts
rename to aio/content/examples/component-interaction/src/app/hero.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/mission.service.ts b/aio/content/examples/component-interaction/src/app/mission.service.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/mission.service.ts
rename to aio/content/examples/component-interaction/src/app/mission.service.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/missioncontrol.component.ts b/aio/content/examples/component-interaction/src/app/missioncontrol.component.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/missioncontrol.component.ts
rename to aio/content/examples/component-interaction/src/app/missioncontrol.component.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/name-child.component.ts b/aio/content/examples/component-interaction/src/app/name-child.component.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/name-child.component.ts
rename to aio/content/examples/component-interaction/src/app/name-child.component.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/name-parent.component.ts b/aio/content/examples/component-interaction/src/app/name-parent.component.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/name-parent.component.ts
rename to aio/content/examples/component-interaction/src/app/name-parent.component.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/version-child.component.ts b/aio/content/examples/component-interaction/src/app/version-child.component.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/version-child.component.ts
rename to aio/content/examples/component-interaction/src/app/version-child.component.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/version-parent.component.ts b/aio/content/examples/component-interaction/src/app/version-parent.component.ts
similarity index 92%
rename from aio/content/examples/cb-component-communication/src/app/version-parent.component.ts
rename to aio/content/examples/component-interaction/src/app/version-parent.component.ts
index bbc9101702..5a8d904c72 100644
--- a/aio/content/examples/cb-component-communication/src/app/version-parent.component.ts
+++ b/aio/content/examples/component-interaction/src/app/version-parent.component.ts
@@ -11,8 +11,8 @@ import { Component } from '@angular/core';
   `
 })
 export class VersionParentComponent {
-  major: number = 1;
-  minor: number = 23;
+  major = 1;
+  minor = 23;
 
   newMinor() {
     this.minor++;
diff --git a/aio/content/examples/cb-component-communication/src/app/voter.component.ts b/aio/content/examples/component-interaction/src/app/voter.component.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/voter.component.ts
rename to aio/content/examples/component-interaction/src/app/voter.component.ts
diff --git a/aio/content/examples/cb-component-communication/src/app/votetaker.component.ts b/aio/content/examples/component-interaction/src/app/votetaker.component.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/app/votetaker.component.ts
rename to aio/content/examples/component-interaction/src/app/votetaker.component.ts
diff --git a/aio/content/examples/cb-component-communication/src/demo.css b/aio/content/examples/component-interaction/src/demo.css
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/demo.css
rename to aio/content/examples/component-interaction/src/demo.css
diff --git a/aio/content/examples/cb-component-communication/src/index.html b/aio/content/examples/component-interaction/src/index.html
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/index.html
rename to aio/content/examples/component-interaction/src/index.html
diff --git a/aio/content/examples/cb-component-communication/src/main.ts b/aio/content/examples/component-interaction/src/main.ts
similarity index 100%
rename from aio/content/examples/cb-component-communication/src/main.ts
rename to aio/content/examples/component-interaction/src/main.ts
diff --git a/aio/content/examples/cb-dependency-injection/e2e-spec.ts b/aio/content/examples/dependency-injection-in-action/e2e-spec.ts
similarity index 98%
rename from aio/content/examples/cb-dependency-injection/e2e-spec.ts
rename to aio/content/examples/dependency-injection-in-action/e2e-spec.ts
index 8c9d163d5e..520d2d187e 100644
--- a/aio/content/examples/cb-dependency-injection/e2e-spec.ts
+++ b/aio/content/examples/dependency-injection-in-action/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
diff --git a/aio/content/examples/cb-dependency-injection/example-config.json b/aio/content/examples/dependency-injection-in-action/example-config.json
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/example-config.json
rename to aio/content/examples/dependency-injection-in-action/example-config.json
diff --git a/aio/content/examples/cb-dependency-injection/plnkr.json b/aio/content/examples/dependency-injection-in-action/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/plnkr.json
rename to aio/content/examples/dependency-injection-in-action/plnkr.json
diff --git a/aio/content/examples/cb-dependency-injection/src/app/app-routing.module.ts b/aio/content/examples/dependency-injection-in-action/src/app/app-routing.module.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/app-routing.module.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/app-routing.module.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/app.component.html b/aio/content/examples/dependency-injection-in-action/src/app/app.component.html
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/app.component.html
rename to aio/content/examples/dependency-injection-in-action/src/app/app.component.html
diff --git a/aio/content/examples/cb-dependency-injection/src/app/app.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
similarity index 96%
rename from aio/content/examples/cb-dependency-injection/src/app/app.component.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
index 3045893c58..250103124a 100644
--- a/aio/content/examples/cb-dependency-injection/src/app/app.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
@@ -16,7 +16,7 @@ import { UserService }        from './user.service';
 export class AppComponent {
 // #enddocregion import-services
 
-  private userId: number = 1;
+  private userId = 1;
 
   // #docregion ctor
   constructor(logger: LoggerService, public userContext: UserContextService) {
diff --git a/aio/content/examples/cb-dependency-injection/src/app/app.module.ts b/aio/content/examples/dependency-injection-in-action/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/app.module.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/app.module.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/date-logger.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts
similarity index 92%
rename from aio/content/examples/cb-dependency-injection/src/app/date-logger.service.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts
index 875779be40..465e16cf9b 100644
--- a/aio/content/examples/cb-dependency-injection/src/app/date-logger.service.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts
@@ -1,4 +1,4 @@
-/* tslint:disable:one-line:check-open-brace*/
+/* tslint:disable:one-line*/
 // #docregion
 import { Injectable }    from '@angular/core';
 
diff --git a/aio/content/examples/cb-dependency-injection/src/app/hero-bio.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/hero-bio.component.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/hero-bios.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/hero-bios.component.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/hero-cache.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/hero-cache.service.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/hero-contact.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/hero-contact.component.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/hero-data.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-data.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/hero-data.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/hero-data.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/hero-of-the-month.component.1.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/hero-of-the-month.component.1.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/hero-of-the-month.component.html b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.html
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/hero-of-the-month.component.html
rename to aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.html
diff --git a/aio/content/examples/cb-dependency-injection/src/app/hero-of-the-month.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
similarity index 97%
rename from aio/content/examples/cb-dependency-injection/src/app/hero-of-the-month.component.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
index 90ad13d639..ff8e5a24e8 100644
--- a/aio/content/examples/cb-dependency-injection/src/app/hero-of-the-month.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
@@ -1,4 +1,4 @@
-/* tslint:disable:one-line:check-open-brace*/
+/* tslint:disable:one-line*/
 // #docplaster
 // #docregion injection-token
 import { InjectionToken } from '@angular/core';
diff --git a/aio/content/examples/cb-dependency-injection/src/app/hero.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/hero.service.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/hero.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/hero.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/hero.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/highlight.directive.ts b/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/highlight.directive.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/logger.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/logger.service.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/logger.service.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/logger.service.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/minimal-logger.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/minimal-logger.service.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/parent-finder.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/parent-finder.component.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/runners-up.ts b/aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/runners-up.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/sorted-heroes.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/sorted-heroes.component.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/user-context.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/user-context.service.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/app/user.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/user.service.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/app/user.service.ts
rename to aio/content/examples/dependency-injection-in-action/src/app/user.service.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/index.html b/aio/content/examples/dependency-injection-in-action/src/index.html
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/index.html
rename to aio/content/examples/dependency-injection-in-action/src/index.html
diff --git a/aio/content/examples/cb-dependency-injection/src/main.ts b/aio/content/examples/dependency-injection-in-action/src/main.ts
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/main.ts
rename to aio/content/examples/dependency-injection-in-action/src/main.ts
diff --git a/aio/content/examples/cb-dependency-injection/src/sample.css b/aio/content/examples/dependency-injection-in-action/src/sample.css
similarity index 100%
rename from aio/content/examples/cb-dependency-injection/src/sample.css
rename to aio/content/examples/dependency-injection-in-action/src/sample.css
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts b/aio/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts
index 79a91dc03a..a836faa1bd 100644
--- a/aio/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts
+++ b/aio/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts
@@ -1,7 +1,7 @@
 // #docregion
 import { Hero } from './hero';
 
-export var HEROES: Hero[] = [
+export const HEROES: Hero[] = [
   { id: 11, isSecret: false, name: 'Mr. Nice' },
   { id: 12, isSecret: false, name: 'Narco' },
   { id: 13, isSecret: false, name: 'Bombasto' },
diff --git a/aio/content/examples/dependency-injection/src/app/providers.component.ts b/aio/content/examples/dependency-injection/src/app/providers.component.ts
index a96bfce99e..589de212ed 100644
--- a/aio/content/examples/dependency-injection/src/app/providers.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/providers.component.ts
@@ -117,7 +117,7 @@ class OldLogger {
 export class Provider6aComponent {
   log: string;
   constructor(newLogger: NewLogger, oldLogger: OldLogger) {
-    if (newLogger === oldLogger){
+    if (newLogger === oldLogger) {
       throw new Error('expected the two loggers to be different instances');
     }
     oldLogger.log('Hello OldLogger (but we want NewLogger)');
@@ -140,7 +140,7 @@ export class Provider6aComponent {
 export class Provider6bComponent {
   log: string;
   constructor(newLogger: NewLogger, oldLogger: OldLogger) {
-    if (newLogger !== oldLogger){
+    if (newLogger !== oldLogger) {
       throw new Error('expected the two loggers to be the same instance');
     }
     oldLogger.log('Hello from NewLogger (via aliased OldLogger)');
diff --git a/aio/content/examples/deployment/.gitignore b/aio/content/examples/deployment/.gitignore
deleted file mode 100644
index 7f794a0b16..0000000000
--- a/aio/content/examples/deployment/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-!systemjs.config.server.js
diff --git a/aio/content/examples/docs-style-guide/e2e-spec.ts b/aio/content/examples/docs-style-guide/e2e-spec.ts
new file mode 100644
index 0000000000..68cf02313b
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/e2e-spec.ts
@@ -0,0 +1,15 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Docs Style Guide', function () {
+  let _title = 'Authors Style Guide Sample';
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should display correct title: ' + _title, function () {
+    expect(element(by.css('h1')).getText()).toEqual(_title);
+  });
+});
diff --git a/aio/content/examples/cb-dynamic-component-loader/example-config.json b/aio/content/examples/docs-style-guide/example-config.json
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/example-config.json
rename to aio/content/examples/docs-style-guide/example-config.json
diff --git a/aio/content/examples/docs-style-guide/package.1.json b/aio/content/examples/docs-style-guide/package.1.json
new file mode 100644
index 0000000000..8e5d6c6ec3
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/package.1.json
@@ -0,0 +1,7 @@
+{
+  "scripts": {
+    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
+    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
+    "lint": "tslint ./src/**/*.ts -t verbose"
+  }
+}
diff --git a/aio/content/examples/docs-style-guide/plnkr.json b/aio/content/examples/docs-style-guide/plnkr.json
new file mode 100644
index 0000000000..155da3e479
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/plnkr.json
@@ -0,0 +1,10 @@
+{
+  "description": "Authors style guide",
+  "basePath": "src/",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2,3].*"
+  ],
+  "tags": ["author", "style guide"]
+}
diff --git a/aio/content/examples/docs-style-guide/second.plnkr.json b/aio/content/examples/docs-style-guide/second.plnkr.json
new file mode 100644
index 0000000000..2d3735e21c
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/second.plnkr.json
@@ -0,0 +1,9 @@
+{
+  "description": "Second authors style guide plunker (non-executing)",
+  "basePath": "src/",
+  "files": [
+    "index.2.html"
+  ],
+  "main": "index.2.html",
+  "tags": ["author", "style guide"]
+}
diff --git a/aio/content/examples/docs-style-guide/src/app/app.component.css b/aio/content/examples/docs-style-guide/src/app/app.component.css
new file mode 100644
index 0000000000..cc999f8458
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/src/app/app.component.css
@@ -0,0 +1,51 @@
+/* #docregion heroes */
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+/* #enddocregion heroes */
+
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.heroes .text {
+  position: relative;
+  top: -3px;
+}
+.heroes .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
diff --git a/aio/content/examples/docs-style-guide/src/app/app.component.html b/aio/content/examples/docs-style-guide/src/app/app.component.html
new file mode 100644
index 0000000000..924599f6e9
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/src/app/app.component.html
@@ -0,0 +1,21 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<h1>{{title}}</h1>
+<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}} details!</h2>
+  <div><label>id: </label>{{selectedHero.id}}</div>
+  <div>
+    <label>name: </label>
+    <!-- #docregion selected-hero -->
+    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
+    <!-- #enddocregion selected-hero -->
+  </div>
+</div>
diff --git a/aio/content/examples/docs-style-guide/src/app/app.component.ts b/aio/content/examples/docs-style-guide/src/app/app.component.ts
new file mode 100644
index 0000000000..1551e57e6c
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/src/app/app.component.ts
@@ -0,0 +1,23 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+import { Hero, HEROES } from './hero';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+// #docregion class, class-skeleton
+export class AppComponent {
+// #enddocregion class-skeleton
+  title = 'Authors Style Guide Sample';
+  heroes = HEROES;
+  selectedHero: Hero;
+
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+// #docregion class-skeleton
+}
+// #enddocregion class, class-skeleton
diff --git a/aio/content/examples/docs-style-guide/src/app/app.module.ts b/aio/content/examples/docs-style-guide/src/app/app.module.ts
new file mode 100644
index 0000000000..cbcb090547
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/src/app/app.module.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+
+import { AppComponent }  from './app.component';
+
+// #docregion class
+@NgModule({
+  imports:      [ BrowserModule, FormsModule ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion class
diff --git a/aio/content/examples/docs-style-guide/src/app/hero.ts b/aio/content/examples/docs-style-guide/src/app/hero.ts
new file mode 100644
index 0000000000..fadbdbf9ed
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/src/app/hero.ts
@@ -0,0 +1,11 @@
+export class Hero {
+  id: number;
+  name: string;
+}
+
+export const HEROES: Hero[] = [
+  { id: 11, name: 'Mr. Nice' },
+  { id: 12, name: 'Narco' },
+  { id: 13, name: 'Bombasto' },
+  { id: 14, name: 'Celeritas' }
+];
diff --git a/aio/content/examples/docs-style-guide/src/index.2.html b/aio/content/examples/docs-style-guide/src/index.2.html
new file mode 100644
index 0000000000..d261a18f4a
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/src/index.2.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Second Authors Style Guide</title>
+  </head>
+  <body>
+    <h1>Second Authors Style Guide</h1>
+    <p>Placeholder. Does nothing at all.</p>
+  </body>
+</html>
diff --git a/aio/content/examples/style-guide/src/index.html b/aio/content/examples/docs-style-guide/src/index.html
similarity index 81%
rename from aio/content/examples/style-guide/src/index.html
rename to aio/content/examples/docs-style-guide/src/index.html
index 188c2c26a1..78f8977d8b 100644
--- a/aio/content/examples/style-guide/src/index.html
+++ b/aio/content/examples/docs-style-guide/src/index.html
@@ -2,12 +2,14 @@
 <!-- #docregion -->
 <html>
   <head>
+    <title>Docs Style Guide</title>
     <base href="/">
-
-    <title>Style Guide Sample</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
+     <!-- #docregion styles -->
     <link rel="stylesheet" href="styles.css">
+     <!-- #enddocregion styles -->
 
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
@@ -16,15 +18,13 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
-    <script src="systemjs.custom.js"></script>
     <script>
       System.import('main.js').catch(function(err){ console.error(err); });
     </script>
   </head>
 
   <body>
-    <my-app>loading...</my-app>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
-<!-- #enddocregion -->
diff --git a/aio/content/examples/docs-style-guide/src/main.ts b/aio/content/examples/docs-style-guide/src/main.ts
new file mode 100644
index 0000000000..7cecd2600e
--- /dev/null
+++ b/aio/content/examples/docs-style-guide/src/main.ts
@@ -0,0 +1,4 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/cb-dynamic-component-loader/e2e-spec.ts b/aio/content/examples/dynamic-component-loader/e2e-spec.ts
similarity index 91%
rename from aio/content/examples/cb-dynamic-component-loader/e2e-spec.ts
rename to aio/content/examples/dynamic-component-loader/e2e-spec.ts
index 5036ac2a88..b04412c28b 100644
--- a/aio/content/examples/cb-dynamic-component-loader/e2e-spec.ts
+++ b/aio/content/examples/dynamic-component-loader/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
diff --git a/aio/content/examples/cb-dynamic-form/example-config.json b/aio/content/examples/dynamic-component-loader/example-config.json
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/example-config.json
rename to aio/content/examples/dynamic-component-loader/example-config.json
diff --git a/aio/content/examples/cb-dynamic-component-loader/plnkr.json b/aio/content/examples/dynamic-component-loader/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/plnkr.json
rename to aio/content/examples/dynamic-component-loader/plnkr.json
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/app/ad-banner.component.ts b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
similarity index 88%
rename from aio/content/examples/cb-dynamic-component-loader/src/app/ad-banner.component.ts
rename to aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
index 8489fce5b2..6df4720836 100644
--- a/aio/content/examples/cb-dynamic-component-loader/src/app/ad-banner.component.ts
+++ b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
@@ -24,7 +24,7 @@ export class AdBannerComponent implements AfterViewInit, OnDestroy {
   subscription: any;
   interval: any;
 
-  constructor(private _componentFactoryResolver: ComponentFactoryResolver) { }
+  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
 
   ngAfterViewInit() {
     this.loadComponent();
@@ -39,7 +39,7 @@ export class AdBannerComponent implements AfterViewInit, OnDestroy {
     this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length;
     let adItem = this.ads[this.currentAddIndex];
 
-    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(adItem.component);
+    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
 
     let viewContainerRef = this.adHost.viewContainerRef;
     viewContainerRef.clear();
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/app/ad-item.ts b/aio/content/examples/dynamic-component-loader/src/app/ad-item.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/src/app/ad-item.ts
rename to aio/content/examples/dynamic-component-loader/src/app/ad-item.ts
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/app/ad.component.ts b/aio/content/examples/dynamic-component-loader/src/app/ad.component.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/src/app/ad.component.ts
rename to aio/content/examples/dynamic-component-loader/src/app/ad.component.ts
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/app/ad.directive.ts b/aio/content/examples/dynamic-component-loader/src/app/ad.directive.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/src/app/ad.directive.ts
rename to aio/content/examples/dynamic-component-loader/src/app/ad.directive.ts
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/app/ad.service.ts b/aio/content/examples/dynamic-component-loader/src/app/ad.service.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/src/app/ad.service.ts
rename to aio/content/examples/dynamic-component-loader/src/app/ad.service.ts
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/app/app.component.ts b/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/src/app/app.component.ts
rename to aio/content/examples/dynamic-component-loader/src/app/app.component.ts
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/app/app.module.ts b/aio/content/examples/dynamic-component-loader/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/src/app/app.module.ts
rename to aio/content/examples/dynamic-component-loader/src/app/app.module.ts
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/app/hero-job-ad.component.ts b/aio/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/src/app/hero-job-ad.component.ts
rename to aio/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/app/hero-profile.component.ts b/aio/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/src/app/hero-profile.component.ts
rename to aio/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/index.html b/aio/content/examples/dynamic-component-loader/src/index.html
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/src/index.html
rename to aio/content/examples/dynamic-component-loader/src/index.html
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/main.ts b/aio/content/examples/dynamic-component-loader/src/main.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/src/main.ts
rename to aio/content/examples/dynamic-component-loader/src/main.ts
diff --git a/aio/content/examples/cb-dynamic-component-loader/src/sample.css b/aio/content/examples/dynamic-component-loader/src/sample.css
similarity index 100%
rename from aio/content/examples/cb-dynamic-component-loader/src/sample.css
rename to aio/content/examples/dynamic-component-loader/src/sample.css
diff --git a/aio/content/examples/cb-dynamic-form/e2e-spec.ts b/aio/content/examples/dynamic-form/e2e-spec.ts
similarity index 94%
rename from aio/content/examples/cb-dynamic-form/e2e-spec.ts
rename to aio/content/examples/dynamic-form/e2e-spec.ts
index 408ac75766..6535e3e0c5 100644
--- a/aio/content/examples/cb-dynamic-form/e2e-spec.ts
+++ b/aio/content/examples/dynamic-form/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
diff --git a/aio/content/examples/cb-form-validation/example-config.json b/aio/content/examples/dynamic-form/example-config.json
similarity index 100%
rename from aio/content/examples/cb-form-validation/example-config.json
rename to aio/content/examples/dynamic-form/example-config.json
diff --git a/aio/content/examples/cb-dynamic-form/plnkr.json b/aio/content/examples/dynamic-form/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/plnkr.json
rename to aio/content/examples/dynamic-form/plnkr.json
diff --git a/aio/content/examples/cb-dynamic-form/src/app/app.component.ts b/aio/content/examples/dynamic-form/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/app/app.component.ts
rename to aio/content/examples/dynamic-form/src/app/app.component.ts
diff --git a/aio/content/examples/cb-dynamic-form/src/app/app.module.ts b/aio/content/examples/dynamic-form/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/app/app.module.ts
rename to aio/content/examples/dynamic-form/src/app/app.module.ts
diff --git a/aio/content/examples/cb-dynamic-form/src/app/dynamic-form-question.component.html b/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.html
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/app/dynamic-form-question.component.html
rename to aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.html
diff --git a/aio/content/examples/cb-dynamic-form/src/app/dynamic-form-question.component.ts b/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/app/dynamic-form-question.component.ts
rename to aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
diff --git a/aio/content/examples/cb-dynamic-form/src/app/dynamic-form.component.html b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.html
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/app/dynamic-form.component.html
rename to aio/content/examples/dynamic-form/src/app/dynamic-form.component.html
diff --git a/aio/content/examples/cb-dynamic-form/src/app/dynamic-form.component.ts b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/app/dynamic-form.component.ts
rename to aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts
diff --git a/aio/content/examples/cb-dynamic-form/src/app/question-base.ts b/aio/content/examples/dynamic-form/src/app/question-base.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/app/question-base.ts
rename to aio/content/examples/dynamic-form/src/app/question-base.ts
diff --git a/aio/content/examples/cb-dynamic-form/src/app/question-control.service.ts b/aio/content/examples/dynamic-form/src/app/question-control.service.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/app/question-control.service.ts
rename to aio/content/examples/dynamic-form/src/app/question-control.service.ts
diff --git a/aio/content/examples/cb-dynamic-form/src/app/question-dropdown.ts b/aio/content/examples/dynamic-form/src/app/question-dropdown.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/app/question-dropdown.ts
rename to aio/content/examples/dynamic-form/src/app/question-dropdown.ts
diff --git a/aio/content/examples/cb-dynamic-form/src/app/question-textbox.ts b/aio/content/examples/dynamic-form/src/app/question-textbox.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/app/question-textbox.ts
rename to aio/content/examples/dynamic-form/src/app/question-textbox.ts
diff --git a/aio/content/examples/cb-dynamic-form/src/app/question.service.ts b/aio/content/examples/dynamic-form/src/app/question.service.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/app/question.service.ts
rename to aio/content/examples/dynamic-form/src/app/question.service.ts
diff --git a/aio/content/examples/cb-dynamic-form/src/index.html b/aio/content/examples/dynamic-form/src/index.html
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/index.html
rename to aio/content/examples/dynamic-form/src/index.html
diff --git a/aio/content/examples/cb-dynamic-form/src/main.ts b/aio/content/examples/dynamic-form/src/main.ts
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/main.ts
rename to aio/content/examples/dynamic-form/src/main.ts
diff --git a/aio/content/examples/cb-dynamic-form/src/sample.css b/aio/content/examples/dynamic-form/src/sample.css
similarity index 100%
rename from aio/content/examples/cb-dynamic-form/src/sample.css
rename to aio/content/examples/dynamic-form/src/sample.css
diff --git a/aio/content/examples/cb-form-validation/e2e-spec.ts b/aio/content/examples/form-validation/e2e-spec.ts
similarity index 97%
rename from aio/content/examples/cb-form-validation/e2e-spec.ts
rename to aio/content/examples/form-validation/e2e-spec.ts
index 8ffc01e250..1e9788956a 100644
--- a/aio/content/examples/cb-form-validation/e2e-spec.ts
+++ b/aio/content/examples/form-validation/e2e-spec.ts
@@ -1,10 +1,9 @@
 'use strict'; // necessary for node!
 
 import { browser, element, by, protractor, ElementFinder, ElementArrayFinder } from 'protractor';
-import { appLang, describeIf } from '../protractor-helpers';
 
 // THESE TESTS ARE INCOMPLETE
-describeIf(appLang.appIsTs || appLang.appIsJs, 'Form Validation Tests', function () {
+describe('Form Validation Tests', function () {
 
   beforeAll(function () {
     browser.get('');
diff --git a/aio/content/examples/cb-i18n/example-config.json b/aio/content/examples/form-validation/example-config.json
similarity index 100%
rename from aio/content/examples/cb-i18n/example-config.json
rename to aio/content/examples/form-validation/example-config.json
diff --git a/aio/content/examples/cb-form-validation/plnkr.json b/aio/content/examples/form-validation/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-form-validation/plnkr.json
rename to aio/content/examples/form-validation/plnkr.json
diff --git a/aio/content/examples/cb-form-validation/src/app/app.component.ts b/aio/content/examples/form-validation/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/app.component.ts
rename to aio/content/examples/form-validation/src/app/app.component.ts
diff --git a/aio/content/examples/cb-form-validation/src/app/app.module.ts b/aio/content/examples/form-validation/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/app.module.ts
rename to aio/content/examples/form-validation/src/app/app.module.ts
diff --git a/aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.component.html b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.component.html
rename to aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
diff --git a/aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.component.ts b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.component.ts
rename to aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
diff --git a/aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.module.ts b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.module.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.module.ts
rename to aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.module.ts
diff --git a/aio/content/examples/cb-form-validation/src/app/shared/forbidden-name.directive.ts b/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/shared/forbidden-name.directive.ts
rename to aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
diff --git a/aio/content/examples/cb-form-validation/src/app/shared/hero.ts b/aio/content/examples/form-validation/src/app/shared/hero.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/shared/hero.ts
rename to aio/content/examples/form-validation/src/app/shared/hero.ts
diff --git a/aio/content/examples/cb-form-validation/src/app/shared/shared.module.ts b/aio/content/examples/form-validation/src/app/shared/shared.module.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/shared/shared.module.ts
rename to aio/content/examples/form-validation/src/app/shared/shared.module.ts
diff --git a/aio/content/examples/cb-form-validation/src/app/shared/submitted.component.ts b/aio/content/examples/form-validation/src/app/shared/submitted.component.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/shared/submitted.component.ts
rename to aio/content/examples/form-validation/src/app/shared/submitted.component.ts
diff --git a/aio/content/examples/cb-form-validation/src/app/template/hero-form-template.module.ts b/aio/content/examples/form-validation/src/app/template/hero-form-template.module.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/template/hero-form-template.module.ts
rename to aio/content/examples/form-validation/src/app/template/hero-form-template.module.ts
diff --git a/aio/content/examples/cb-form-validation/src/app/template/hero-form-template1.component.html b/aio/content/examples/form-validation/src/app/template/hero-form-template1.component.html
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/template/hero-form-template1.component.html
rename to aio/content/examples/form-validation/src/app/template/hero-form-template1.component.html
diff --git a/aio/content/examples/cb-form-validation/src/app/template/hero-form-template1.component.ts b/aio/content/examples/form-validation/src/app/template/hero-form-template1.component.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/template/hero-form-template1.component.ts
rename to aio/content/examples/form-validation/src/app/template/hero-form-template1.component.ts
diff --git a/aio/content/examples/cb-form-validation/src/app/template/hero-form-template2.component.html b/aio/content/examples/form-validation/src/app/template/hero-form-template2.component.html
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/template/hero-form-template2.component.html
rename to aio/content/examples/form-validation/src/app/template/hero-form-template2.component.html
diff --git a/aio/content/examples/cb-form-validation/src/app/template/hero-form-template2.component.ts b/aio/content/examples/form-validation/src/app/template/hero-form-template2.component.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/app/template/hero-form-template2.component.ts
rename to aio/content/examples/form-validation/src/app/template/hero-form-template2.component.ts
diff --git a/aio/content/examples/cb-form-validation/src/forms.css b/aio/content/examples/form-validation/src/forms.css
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/forms.css
rename to aio/content/examples/form-validation/src/forms.css
diff --git a/aio/content/examples/cb-form-validation/src/index.html b/aio/content/examples/form-validation/src/index.html
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/index.html
rename to aio/content/examples/form-validation/src/index.html
diff --git a/aio/content/examples/cb-form-validation/src/main.ts b/aio/content/examples/form-validation/src/main.ts
similarity index 100%
rename from aio/content/examples/cb-form-validation/src/main.ts
rename to aio/content/examples/form-validation/src/main.ts
diff --git a/aio/content/examples/forms/e2e-spec.ts b/aio/content/examples/forms/e2e-spec.ts
index 2afd370103..d3d3cff970 100644
--- a/aio/content/examples/forms/e2e-spec.ts
+++ b/aio/content/examples/forms/e2e-spec.ts
@@ -1,7 +1,6 @@
 import { browser, element, by } from 'protractor';
-import { appLang, describeIf } from '../protractor-helpers';
 
-describeIf(appLang.appIsTs || appLang.appIsJs, 'Forms Tests', function () {
+describe('Forms Tests', function () {
 
   beforeEach(function () {
     browser.get('');
diff --git a/aio/content/examples/forms/js/example-config.json b/aio/content/examples/forms/js/example-config.json
deleted file mode 100644
index 81f31aaf0d..0000000000
--- a/aio/content/examples/forms/js/example-config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "build": "build:babel"
-}
diff --git a/aio/content/examples/forms/js/plnkr.json b/aio/content/examples/forms/js/plnkr.json
deleted file mode 100644
index 946cbb88f6..0000000000
--- a/aio/content/examples/forms/js/plnkr.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "description": "Forms",
-  "basePath": "src/",
-  "files":["app/**/*.js", "**/*.html", "**/*.css"]
-}
diff --git a/aio/content/examples/forms/js/src/app/hero-form.component.html b/aio/content/examples/forms/js/src/app/hero-form.component.html
deleted file mode 100644
index 279ded0866..0000000000
--- a/aio/content/examples/forms/js/src/app/hero-form.component.html
+++ /dev/null
@@ -1,196 +0,0 @@
-<!-- #docplaster -->
-<!-- #docregion final -->
-<div class="container">
- <!-- #docregion edit-div -->
- <div [hidden]="submitted">
-   <h1>Hero Form</h1>
-   <!-- #docregion ngSubmit -->
-   <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
-   <!-- #enddocregion ngSubmit -->
- <!-- #enddocregion edit-div -->
-     <div class="form-group">
-       <label for="name">Name</label>
-        <!-- #docregion name-with-error-msg -->
-       <input type="text" class="form-control" required
-         [(ngModel)]="model.name"
-           name="name"  #name="ngModel" >
-       <div [hidden]="name.valid" class="alert alert-danger">
-         Name is required
-       </div>
-       <!-- #enddocregion name-with-error-msg -->
-     </div>
-
-     <div class="form-group">
-       <label for="alterEgo">Alter Ego</label>
-       <input type="text" class="form-control"
-         [(ngModel)]="model.alterEgo"
-           name="alterEgo" >
-     </div>
-
-     <div class="form-group">
-       <label for="power">Hero Power</label>
-       <select class="form-control" required
-         [(ngModel)]="model.power"
-           name="power" #power="ngModel" >
-         <option *ngFor="let p of powers" [value]="p">{{p}}</option>
-       </select>
-       <div [hidden]="power.valid" class="alert alert-danger">
-         Power is required
-       </div>
-     </div>
-
-  <!-- #docregion submit-button -->
-     <button type="submit" class="btn btn-default"
-             [disabled]="!heroForm.form.valid">Submit</button>
- <!-- #enddocregion submit-button -->
-   </form>
- </div>
-
- <!-- #docregion submitted -->
- <div [hidden]="!submitted">
-   <h2>You submitted the following:</h2>
-   <div class="row">
-     <div class="col-xs-3">Name</div>
-     <div class="col-xs-9  pull-left">{{ model.name }}</div>
-   </div>
-   <div class="row">
-     <div class="col-xs-3">Alter Ego</div>
-     <div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
-   </div>
-   <div class="row">
-     <div class="col-xs-3">Power</div>
-     <div class="col-xs-9 pull-left">{{ model.power }}</div>
-   </div>
-   <br>
-   <button class="btn btn-default" (click)="submitted=false">Edit</button>
- </div>
- <!-- #enddocregion submitted -->
-</div>
-<!-- #enddocregion final -->
-
-<!-- ====================================================  -->
- <div>
-   <form>
-<!-- #docregion edit-div -->
-
-      <!-- ... all of the form ... -->
-
-   </form>
- </div>
-<!-- #enddocregion edit-div -->
-
-<!-- ====================================================  -->
-<hr>
-<!-- #docregion  phase1-->
-<style>
- .no-style .ng-valid {
- border-left: 1px  solid #CCC
-}
-
- .no-style .ng-invalid {
- border-left: 1px  solid #CCC
-}
-</style>
-<div class="no-style" style="margin-left: 4px">
-  <!-- #docregion start -->
- <div class="container">
-     <h1>Hero Form</h1>
-     <form>
-       <div class="form-group">
-         <label for="name">Name</label>
-         <input type="text" class="form-control" required>
-       </div>
-
-       <div class="form-group">
-         <label for="alterEgo">Alter Ego</label>
-         <input type="text" class="form-control">
-       </div>
-
-   <!-- #enddocregion start -->
-       <!-- #docregion powers -->
-       <div class="form-group">
-         <label for="power">Hero Power</label>
-         <select class="form-control" required>
-           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
-         </select>
-       </div>
-
-       <!-- #enddocregion powers -->
-   <!-- #docregion start -->
-       <button type="submit" class="btn btn-default">Submit</button>
-     </form>
- </div>
-   <!-- #enddocregion start -->
- <!-- #enddocregion  phase1-->
-
- <!-- ====================================================  -->
- <hr>
- <!-- #docregion phase2-->
- <div class="container">
-     <h1>Hero Form</h1>
-     <form>
-   <!-- #docregion ngModel-2-->
-       {{diagnostic()}}
-       <div class="form-group">
-         <label for="name">Name</label>
-         <input type="text" class="form-control" required
-           [(ngModel)]="model.name" name="name" >
-       </div>
-
-       <div class="form-group">
-         <label for="alterEgo">Alter Ego</label>
-         <input type="text"  class="form-control"
-           [(ngModel)]="model.alterEgo" name="alterEgo">
-       </div>
-
-       <div class="form-group">
-         <label for="power">Hero Power</label>
-         <select class="form-control"  required
-           [(ngModel)]="model.power" name="power">
-           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
-         </select>
-       </div>
-
-   <!-- #enddocregion ngModel-2-->
-       <button type="submit" class="btn btn-default">Submit</button>
-
-     </form>
- </div>
- <!-- #enddocregion  phase2-->
-
- <!-- EXTRA MATERIAL FOR DOCUMENTATION -->
- <hr>
- <!-- #docregion ngModel-1-->
-   <input type="text"  class="form-control" required
-     [(ngModel)]="model.name" >
-     TODO: remove this: {{model.name}}
- <!-- #enddocregion ngModel-1-->
- <hr>
- <!-- #docregion ngModel-3-->
-   <input type="text" class="form-control" required
-     [ngModel]="model.name"
-     (ngModelChange)="model.name = $event" >
-     TODO: remove this: {{model.name}}
- <!-- #enddocregion ngModel-3-->
- <hr>
- <form>
- <!-- #docregion ngModelName-1 -->
-      <input type="text" class="form-control" required
-        [(ngModel)]="model.name"
-        name="name" >
- <!-- #enddocregion ngModelName-1 -->
- <hr>
- <!-- #docregion ngModelName-2 -->
-      <input type="text" class="form-control" required
-        [(ngModel)]="model.name"
-        name="name"  #spy >
-      <br>TODO: remove this: {{spy.className}}
- <!-- #enddocregion ngModelName-2 -->
- </form>
-
- <div>
- <hr>
- Name via form.controls = {{showFormControls(heroForm)}}
- </div>
-
-</div>
diff --git a/aio/content/examples/forms/js/src/forms.css b/aio/content/examples/forms/js/src/forms.css
deleted file mode 100644
index d7e11405b1..0000000000
--- a/aio/content/examples/forms/js/src/forms.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* #docregion */
-.ng-valid[required] {
-  border-left: 5px solid #42A948; /* green */
-}
-
-.ng-invalid {
-  border-left: 5px solid #a94442; /* red */
-}
-/* #enddocregion */
\ No newline at end of file
diff --git a/aio/content/examples/forms/js/src/index.html b/aio/content/examples/forms/js/src/index.html
deleted file mode 100644
index 3a41d74a3b..0000000000
--- a/aio/content/examples/forms/js/src/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<!-- #docplaster -->
-<!-- #docregion -->
-<html>
-  <head>
-    <title>Hero Form</title>
-    <base href="/">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- #docregion bootstrap -->
-    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
-    <!-- #enddocregion bootstrap -->
-    <!-- #docregion styles -->
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="forms.css">
-    <!-- #enddocregion styles -->
-
-   <!-- IE required polyfill -->
-   <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/rxjs/bundles/Rx.js"></script>
-   <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
-   <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
-   <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
-   <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
-   <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
-   <script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>
-
-    <!-- #docregion scripts-hero, scripts-hero-form -->
-    <script src='app/hero.js'></script>
-    <!-- #enddocregion scripts-hero -->
-    <script src='app/hero-form.component.js'></script>
-    <!-- #enddocregion scripts-hero-form -->
-    <!-- #docregion scripts, scripts-hero, scripts-hero-form -->
-    <script src='app/app.component.js'></script>
-    <script src='app/app.module.js'></script>
-    <script src='main.js'></script>
-    <!-- #enddocregion scripts, scripts-hero, scripts-hero-form -->
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-
-</html>
diff --git a/aio/content/examples/hierarchical-dependency-injection/plnkr.json b/aio/content/examples/hierarchical-dependency-injection/plnkr.json
index ca92b93b06..2bddf49a33 100644
--- a/aio/content/examples/hierarchical-dependency-injection/plnkr.json
+++ b/aio/content/examples/hierarchical-dependency-injection/plnkr.json
@@ -1,5 +1,5 @@
 {
-  "description": "Hierachical Dependency Injection",
+  "description": "Hierarchical Dependency Injection",
   "basePath": "src/",
   "files":[
     "!**/*.d.ts",
diff --git a/aio/content/examples/server-communication/e2e-spec.ts b/aio/content/examples/http/e2e-spec.ts
similarity index 100%
rename from aio/content/examples/server-communication/e2e-spec.ts
rename to aio/content/examples/http/e2e-spec.ts
diff --git a/aio/content/examples/cb-set-document-title/example-config.json b/aio/content/examples/http/example-config.json
similarity index 100%
rename from aio/content/examples/cb-set-document-title/example-config.json
rename to aio/content/examples/http/example-config.json
diff --git a/aio/content/examples/server-communication/plnkr.json b/aio/content/examples/http/plnkr.json
similarity index 100%
rename from aio/content/examples/server-communication/plnkr.json
rename to aio/content/examples/http/plnkr.json
diff --git a/aio/content/examples/server-communication/src/app/app.component.ts b/aio/content/examples/http/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/app.component.ts
rename to aio/content/examples/http/src/app/app.component.ts
diff --git a/aio/content/examples/server-communication/src/app/app.module.1.ts b/aio/content/examples/http/src/app/app.module.1.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/app.module.1.ts
rename to aio/content/examples/http/src/app/app.module.1.ts
diff --git a/aio/content/examples/server-communication/src/app/app.module.ts b/aio/content/examples/http/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/app.module.ts
rename to aio/content/examples/http/src/app/app.module.ts
diff --git a/aio/content/examples/server-communication/src/app/default-request-options.service.ts b/aio/content/examples/http/src/app/default-request-options.service.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/default-request-options.service.ts
rename to aio/content/examples/http/src/app/default-request-options.service.ts
diff --git a/aio/content/examples/server-communication/src/app/hero-data.ts b/aio/content/examples/http/src/app/hero-data.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/hero-data.ts
rename to aio/content/examples/http/src/app/hero-data.ts
diff --git a/aio/content/examples/server-communication/src/app/heroes.json b/aio/content/examples/http/src/app/heroes.json
similarity index 100%
rename from aio/content/examples/server-communication/src/app/heroes.json
rename to aio/content/examples/http/src/app/heroes.json
diff --git a/aio/content/examples/server-communication/src/app/toh/hero-list.component.html b/aio/content/examples/http/src/app/toh/hero-list.component.html
similarity index 100%
rename from aio/content/examples/server-communication/src/app/toh/hero-list.component.html
rename to aio/content/examples/http/src/app/toh/hero-list.component.html
diff --git a/aio/content/examples/server-communication/src/app/toh/hero-list.component.promise.ts b/aio/content/examples/http/src/app/toh/hero-list.component.promise.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/toh/hero-list.component.promise.ts
rename to aio/content/examples/http/src/app/toh/hero-list.component.promise.ts
diff --git a/aio/content/examples/server-communication/src/app/toh/hero-list.component.ts b/aio/content/examples/http/src/app/toh/hero-list.component.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/toh/hero-list.component.ts
rename to aio/content/examples/http/src/app/toh/hero-list.component.ts
diff --git a/aio/content/examples/server-communication/src/app/toh/hero.service.promise.ts b/aio/content/examples/http/src/app/toh/hero.service.promise.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/toh/hero.service.promise.ts
rename to aio/content/examples/http/src/app/toh/hero.service.promise.ts
diff --git a/aio/content/examples/server-communication/src/app/toh/hero.service.ts b/aio/content/examples/http/src/app/toh/hero.service.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/toh/hero.service.ts
rename to aio/content/examples/http/src/app/toh/hero.service.ts
diff --git a/aio/content/examples/server-communication/src/app/toh/hero.ts b/aio/content/examples/http/src/app/toh/hero.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/toh/hero.ts
rename to aio/content/examples/http/src/app/toh/hero.ts
diff --git a/aio/content/examples/server-communication/src/app/wiki/wiki-smart.component.ts b/aio/content/examples/http/src/app/wiki/wiki-smart.component.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/wiki/wiki-smart.component.ts
rename to aio/content/examples/http/src/app/wiki/wiki-smart.component.ts
diff --git a/aio/content/examples/server-communication/src/app/wiki/wiki.component.ts b/aio/content/examples/http/src/app/wiki/wiki.component.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/wiki/wiki.component.ts
rename to aio/content/examples/http/src/app/wiki/wiki.component.ts
diff --git a/aio/content/examples/server-communication/src/app/wiki/wikipedia.service.1.ts b/aio/content/examples/http/src/app/wiki/wikipedia.service.1.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/wiki/wikipedia.service.1.ts
rename to aio/content/examples/http/src/app/wiki/wikipedia.service.1.ts
diff --git a/aio/content/examples/server-communication/src/app/wiki/wikipedia.service.ts b/aio/content/examples/http/src/app/wiki/wikipedia.service.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/app/wiki/wikipedia.service.ts
rename to aio/content/examples/http/src/app/wiki/wikipedia.service.ts
diff --git a/aio/content/examples/server-communication/src/index.html b/aio/content/examples/http/src/index.html
similarity index 100%
rename from aio/content/examples/server-communication/src/index.html
rename to aio/content/examples/http/src/index.html
diff --git a/aio/content/examples/server-communication/src/main.ts b/aio/content/examples/http/src/main.ts
similarity index 100%
rename from aio/content/examples/server-communication/src/main.ts
rename to aio/content/examples/http/src/main.ts
diff --git a/aio/content/examples/cb-i18n/e2e-spec.ts b/aio/content/examples/i18n/e2e-spec.ts
similarity index 87%
rename from aio/content/examples/cb-i18n/e2e-spec.ts
rename to aio/content/examples/i18n/e2e-spec.ts
index 3dcca5a670..f1d6686e77 100644
--- a/aio/content/examples/cb-i18n/e2e-spec.ts
+++ b/aio/content/examples/i18n/e2e-spec.ts
@@ -30,4 +30,8 @@ describe('i18n E2E Tests', () => {
     expect(element.all(by.css('span')).get(1).getText()).toBe('El heroe es mujer');
   });
 
+  it('should display the nested expression', function() {
+    expect(element.all(by.css('span')).get(2).getText()).toBe('Aquí tenemos: 3 mujeres');
+  });
+
 });
diff --git a/aio/content/examples/cb-ts-to-js/ts/example-config.json b/aio/content/examples/i18n/example-config.json
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/example-config.json
rename to aio/content/examples/i18n/example-config.json
diff --git a/aio/content/examples/cb-i18n/messages.xlf b/aio/content/examples/i18n/messages.xlf
similarity index 83%
rename from aio/content/examples/cb-i18n/messages.xlf
rename to aio/content/examples/i18n/messages.xlf
index dee8b65aca..50f99d2820 100644
--- a/aio/content/examples/cb-i18n/messages.xlf
+++ b/aio/content/examples/i18n/messages.xlf
@@ -2,8 +2,10 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
   <file source-language="en" datatype="plaintext" original="ng2.template">
     <body>
-      <trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2" datatype="html">
-        <source>Hello i18n!</source>
+      <trans-unit id="introductionHeader" datatype="html">
+        <source>
+  Hello i18n!
+</source>
         <target/>
         <note priority="1" from="description">An introduction header for this sample</note>
         <note priority="1" from="meaning">User welcome</note>
@@ -24,12 +26,6 @@ I don&apos;t output any element either
         <source>Angular logo</source>
         <target/>
       </trans-unit>
-      <trans-unit id="2579611bfcccd75bcd41fac90150d27d6ebb30b8" datatype="html">
-        <source>
-<x id="START_TAG_SPAN" ctype="x-span"/><x id="ICU"/><x id="CLOSE_TAG_SPAN" ctype="x-span"/>
-</source>
-        <target/>
-      </trans-unit>
       <trans-unit id="6e22e74e8cbd3095560cfe08993c4fdfa3c50eb0" datatype="html">
         <source/>
         <target/>
@@ -42,6 +38,14 @@ I don&apos;t output any element either
         <source/>
         <target/>
       </trans-unit>
+      <trans-unit id="2cf9a08c5b6e3612572a2a36dd46563013848382" datatype="html">
+        <source>Here we have: <x id="ICU"/></source>
+        <target/>
+      </trans-unit>
+      <trans-unit id="db1b921b55301ce3957e382090729562002da036" datatype="html">
+        <source/>
+        <target/>
+      </trans-unit>
     </body>
   </file>
 </xliff>
diff --git a/aio/content/examples/cb-i18n/plnkr.json b/aio/content/examples/i18n/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-i18n/plnkr.json
rename to aio/content/examples/i18n/plnkr.json
diff --git a/aio/content/examples/i18n/src/app/app.component.1.html b/aio/content/examples/i18n/src/app/app.component.1.html
new file mode 100644
index 0000000000..ef8c968d31
--- /dev/null
+++ b/aio/content/examples/i18n/src/app/app.component.1.html
@@ -0,0 +1,32 @@
+<!--#docregion greeting-->
+<h1>Hello i18n!</h1>
+<!--#enddocregion greeting-->
+
+<!--#docregion i18n-attribute-->
+<h1 i18n>Hello i18n!</h1>
+<!--#enddocregion i18n-attribute-->
+
+<!--#docregion i18n-attribute-desc-->
+<h1 i18n="An introduction header for this sample">Hello i18n!</h1>
+<!--#enddocregion i18n-attribute-desc-->
+
+<!--#docregion i18n-attribute-meaning-->
+<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>
+<!--#enddocregion i18n-attribute-meaning-->
+
+<!--#docregion i18n-attribute-id-->
+<h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
+<!--#enddocregion i18n-attribute-id-->
+
+<!--#docregion i18n-attribute-meaning-and-id-->
+<h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
+<!--#enddocregion i18n-attribute-meaning-and-id-->
+
+<!--#docregion i18n-attribute-solo-id-->
+<h1 i18n="@@introductionHeader">Hello i18n!</h1>
+<!--#enddocregion i18n-attribute-solo-id-->
+
+<!--#docregion i18n-title-->
+<img [src]="logo" title="Angular logo">
+<!--#enddocregion i18n-title-->
+Contact GitHub API Training Shop Blog About
diff --git a/aio/content/examples/cb-i18n/src/app/app.component.html b/aio/content/examples/i18n/src/app/app.component.html
similarity index 74%
rename from aio/content/examples/cb-i18n/src/app/app.component.html
rename to aio/content/examples/i18n/src/app/app.component.html
index 39ace24f79..36d0188982 100644
--- a/aio/content/examples/cb-i18n/src/app/app.component.html
+++ b/aio/content/examples/i18n/src/app/app.component.html
@@ -1,6 +1,8 @@
 <!--#docregion-->
 <!--#docregion i18n-attribute-meaning-->
-<h1 i18n="User welcome|An introduction header for this sample">Hello i18n!</h1>
+<h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">
+  Hello i18n!
+</h1>
 <!--#enddocregion i18n-attribute-meaning-->
 
 <!--#docregion i18n-ng-container-->
@@ -31,4 +33,11 @@ I don't output any element either
 <!--#docregion i18n-select-->
 <span i18n>The hero is {gender, select, m {male} f {female}}</span>
 <!--#enddocregion i18n-select-->
-<br>
+<br><br>
+<!--#docregion i18n-nested-->
+<span i18n>Here we have: {count, plural,
+  =0 {no one}
+  =1 {one {gender, select, male {man} female {woman}}}
+  other {{{heroes.length}} {gender, select, male {men} female {women}}}
+}</span>
+<!--#enddocregion i18n-nested-->
diff --git a/aio/content/examples/cb-i18n/src/app/app.component.ts b/aio/content/examples/i18n/src/app/app.component.ts
similarity index 71%
rename from aio/content/examples/cb-i18n/src/app/app.component.ts
rename to aio/content/examples/i18n/src/app/app.component.ts
index 09b8722e9b..60106263a0 100644
--- a/aio/content/examples/cb-i18n/src/app/app.component.ts
+++ b/aio/content/examples/i18n/src/app/app.component.ts
@@ -9,7 +9,9 @@ export class AppComponent {
   wolves = 0;
   gender = 'f';
   fly = true;
-  logo = 'https://angular.io/resources/images/logos/angular/angular.png';
+  logo = 'https://angular.io/assets/images/logos/angular/angular.png';
+  count = 3;
+  heroes: string[] = ['Magneta', 'Celeritas', 'Dynama'];
   inc(i: number) {
     this.wolves = Math.min(5, Math.max(0, this.wolves + i));
   }
diff --git a/aio/content/examples/cb-i18n/src/app/app.module.ts b/aio/content/examples/i18n/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/cb-i18n/src/app/app.module.ts
rename to aio/content/examples/i18n/src/app/app.module.ts
diff --git a/aio/content/examples/cb-i18n/src/app/i18n-providers.ts b/aio/content/examples/i18n/src/app/i18n-providers.ts
similarity index 60%
rename from aio/content/examples/cb-i18n/src/app/i18n-providers.ts
rename to aio/content/examples/i18n/src/app/i18n-providers.ts
index f0bb662dc3..0e820bbcfd 100644
--- a/aio/content/examples/cb-i18n/src/app/i18n-providers.ts
+++ b/aio/content/examples/i18n/src/app/i18n-providers.ts
@@ -1,5 +1,7 @@
-// #docregion
-import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
+// #docplaster
+// #docregion without-missing-translation
+import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID, MissingTranslationStrategy } from '@angular/core';
+import { CompilerConfig } from '@angular/compiler';
 
 export function getTranslationProviders(): Promise<Object[]> {
 
@@ -17,13 +19,18 @@ export function getTranslationProviders(): Promise<Object[]> {
   // Ex: 'locale/messages.es.xlf`
   const translationFile = `./locale/messages.${locale}.xlf`;
 
+  // #docregion missing-translation
   return getTranslationsWithSystemJs(translationFile)
     .then( (translations: string ) => [
       { provide: TRANSLATIONS, useValue: translations },
       { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
-      { provide: LOCALE_ID, useValue: locale }
+      { provide: LOCALE_ID, useValue: locale },
+      // #enddocregion without-missing-translation
+      { provide: CompilerConfig, useValue: new CompilerConfig({ missingTranslation: MissingTranslationStrategy.Error }) }
+      // #docregion without-missing-translation
     ])
     .catch(() => noProviders); // ignore if file not found
+    // #enddocregion missing-translation
 }
 
 declare var System: any;
@@ -31,3 +38,4 @@ declare var System: any;
 function getTranslationsWithSystemJs(file: string) {
   return System.import(file + '!text'); // relies on text plugin
 }
+// #enddocregion without-missing-translation
diff --git a/aio/content/examples/cb-i18n/src/index.html b/aio/content/examples/i18n/src/index.html
similarity index 100%
rename from aio/content/examples/cb-i18n/src/index.html
rename to aio/content/examples/i18n/src/index.html
diff --git a/aio/content/examples/cb-i18n/src/locale/messages.es.xlf b/aio/content/examples/i18n/src/locale/messages.es.xlf
similarity index 75%
rename from aio/content/examples/cb-i18n/src/locale/messages.es.xlf
rename to aio/content/examples/i18n/src/locale/messages.es.xlf
index 7b813c38dd..f2d454b5e6 100644
--- a/aio/content/examples/cb-i18n/src/locale/messages.es.xlf
+++ b/aio/content/examples/i18n/src/locale/messages.es.xlf
@@ -2,7 +2,7 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
   <file source-language="en" datatype="plaintext" original="ng2.template">
     <body>
-      <trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2" datatype="html">
+      <trans-unit id="introductionHeader" datatype="html">
         <source>Hello i18n!</source>
         <target>¡Hola i18n!</target>
         <note priority="1" from="description">An introduction header for this sample</note>
@@ -36,6 +36,20 @@ I don&apos;t output any element either
         <source/>
         <target>{gender, select, m {hombre} f {mujer}}</target>
       </trans-unit>
+      <trans-unit id="2cf9a08c5b6e3612572a2a36dd46563013848382" datatype="html">
+        <source>Here we have: <x id="ICU"/></source>
+        <target>Aquí tenemos: <x id="ICU"/></target>
+      </trans-unit>
+      <trans-unit id="db1b921b55301ce3957e382090729562002da036" datatype="html">
+        <source/>
+        <target>
+          {count, plural,
+            =0 { nadie }
+            =1 {{gender, select, m {un hombre} f {una mujer}}}
+            other {{{heroes.length}} {gender, select, m {hombres} f {mujeres}}}
+          }
+        </target>
+      </trans-unit>
     </body>
   </file>
 </xliff>
diff --git a/aio/content/examples/cb-i18n/src/locale/messages.es.xlf.html b/aio/content/examples/i18n/src/locale/messages.es.xlf.html
similarity index 65%
rename from aio/content/examples/cb-i18n/src/locale/messages.es.xlf.html
rename to aio/content/examples/i18n/src/locale/messages.es.xlf.html
index a6cdccc6c1..1c94311234 100644
--- a/aio/content/examples/cb-i18n/src/locale/messages.es.xlf.html
+++ b/aio/content/examples/i18n/src/locale/messages.es.xlf.html
@@ -5,7 +5,9 @@
   <file source-language="en" datatype="plaintext" original="ng2.template">
     <body>
       <!-- #docregion translated-hello -->
-      <trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2" datatype="html">
+      <!-- #docregion custom-id -->
+      <trans-unit id="introductionHeader" datatype="html">
+      <!-- #enddocregion custom-id -->
         <source>Hello i18n!</source>
         <target>¡Hola i18n!</target>
         <note priority="1" from="description">An introduction header for this sample</note>
@@ -13,7 +15,9 @@
       </trans-unit>
       <!-- #enddocregion translated-hello -->
       <!-- #docregion translated-other-nodes -->
+      <!-- #docregion generated-id -->
       <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
+      <!-- #enddocregion generated-id -->
         <source>I don&apos;t output any element</source>
         <target>No genero ningún elemento</target>
       </trans-unit>
@@ -48,6 +52,34 @@
       </trans-unit>
       <!-- #enddocregion translate-select-2 -->
       <!-- #enddocregion translated-select -->
+      <trans-unit id="db04527df562d12c8607eab2b5723ef6e2066ba0" datatype="html">
+        <source>Here we have: <x id="ICU"/></source>
+        <target/>
+      </trans-unit>
+      <trans-unit id="000058be4e6f08b685d1d0a70f9da68067df7379" datatype="html">
+        <source/>
+        <target/>
+      </trans-unit>
+      <!-- #docregion translate-nested -->
+      <!-- #docregion translate-nested-1 -->
+      <trans-unit id="2cf9a08c5b6e3612572a2a36dd46563013848382" datatype="html">
+        <source>Here we have: <x id="ICU"/></source>
+        <target>Aquí tenemos: <x id="ICU"/></target>
+      </trans-unit>
+      <!-- #enddocregion translate-nested-1 -->
+      <!-- #docregion translate-nested-2 -->
+      <trans-unit id="db1b921b55301ce3957e382090729562002da036" datatype="html">
+        <source/>
+        <target>
+          {count, plural,
+            =0 { nadie }
+            =1 {{gender, select, m {un hombre} f {una mujer}}}
+            other {{{heroes.length}} {gender, select, m {hombres} f {mujeres}}}
+          }
+        </target>
+      </trans-unit>
+      <!-- #enddocregion translate-nested-2 -->
+      <!-- #enddocregion translate-nested -->
     </body>
   </file>
 </xliff>
diff --git a/aio/content/examples/cb-i18n/src/main.1.ts b/aio/content/examples/i18n/src/main.1.ts
similarity index 100%
rename from aio/content/examples/cb-i18n/src/main.1.ts
rename to aio/content/examples/i18n/src/main.1.ts
diff --git a/aio/content/examples/cb-i18n/src/main.ts b/aio/content/examples/i18n/src/main.ts
similarity index 100%
rename from aio/content/examples/cb-i18n/src/main.ts
rename to aio/content/examples/i18n/src/main.ts
diff --git a/aio/content/examples/i18n/src/systemjs-text-plugin.js b/aio/content/examples/i18n/src/systemjs-text-plugin.js
new file mode 100644
index 0000000000..581f87db1a
--- /dev/null
+++ b/aio/content/examples/i18n/src/systemjs-text-plugin.js
@@ -0,0 +1,14 @@
+// #docregion
+/*
+  SystemJS Text plugin from
+  https://github.com/systemjs/plugin-text/blob/master/text.js
+*/
+exports.translate = function (load) {
+  if (this.builder && this.transpiler) {
+    load.metadata.format = 'esm';
+    return 'exp' + 'ort var __useDefault = true; exp' + 'ort default ' + JSON.stringify(load.source) + ';';
+  }
+
+  load.metadata.format = 'amd';
+  return 'def' + 'ine(function() {\nreturn ' + JSON.stringify(load.source) + ';\n});';
+}
diff --git a/aio/content/examples/lifecycle-hooks/e2e-spec.ts b/aio/content/examples/lifecycle-hooks/e2e-spec.ts
index 8e9acb1c76..003f8f68f2 100644
--- a/aio/content/examples/lifecycle-hooks/e2e-spec.ts
+++ b/aio/content/examples/lifecycle-hooks/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
@@ -101,7 +101,10 @@ describe('Lifecycle hooks', function () {
       expect(commentEle.getText()).toContain('long name');
       return logEles.count();
     }).then(function(count: number) {
-      expect(logCount + 7).toEqual(count, '7 additional log messages should have been added');
+      expect(logCount + 7).toBeGreaterThan(count - 3,
+        '7 additional log messages should have been added');
+      expect(logCount + 7).toBeLessThan(count + 3,
+        '7 additional log messages should have been added');
       logCount = count;
       return buttonEle.click();
     }).then(function() {
diff --git a/aio/content/examples/ngmodule/e2e-spec.ts b/aio/content/examples/ngmodule/e2e-spec.ts
index 0fbce1213d..6113584626 100644
--- a/aio/content/examples/ngmodule/e2e-spec.ts
+++ b/aio/content/examples/ngmodule/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
diff --git a/aio/content/examples/ngmodule/src/app/crisis/crisis-detail.component.ts b/aio/content/examples/ngmodule/src/app/crisis/crisis-detail.component.ts
index 9749029d62..30a1d0e7bf 100644
--- a/aio/content/examples/ngmodule/src/app/crisis/crisis-detail.component.ts
+++ b/aio/content/examples/ngmodule/src/app/crisis/crisis-detail.component.ts
@@ -14,6 +14,6 @@ export class CrisisDetailComponent implements OnInit {
   constructor(private route: ActivatedRoute) {  }
 
   ngOnInit() {
-    this.id = parseInt(this.route.snapshot.params['id'], 10);
+    this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
   }
 }
diff --git a/aio/content/examples/ngmodule/src/app/hero/hero-detail.component.ts b/aio/content/examples/ngmodule/src/app/hero/hero-detail.component.ts
index 1478ad350c..3685cbfde5 100644
--- a/aio/content/examples/ngmodule/src/app/hero/hero-detail.component.ts
+++ b/aio/content/examples/ngmodule/src/app/hero/hero-detail.component.ts
@@ -25,7 +25,7 @@ export class HeroDetailComponent implements OnInit {
     private heroService: HeroService) { }
 
   ngOnInit() {
-    let id = parseInt(this.route.snapshot.params['id'], 10);
+    let id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
     this.heroService.getHero(id).then(hero => this.hero = hero);
   }
 }
diff --git a/aio/content/examples/ngmodule/src/app/title.component.ts b/aio/content/examples/ngmodule/src/app/title.component.ts
index 9a2ef1c4b8..05bbb64aae 100644
--- a/aio/content/examples/ngmodule/src/app/title.component.ts
+++ b/aio/content/examples/ngmodule/src/app/title.component.ts
@@ -12,7 +12,7 @@ import { UserService } from './user.service';
 })
 export class TitleComponent {
   @Input() subtitle = '';
-  title = 'Angular Modules';
+  title = 'NgModules';
 // #enddocregion v1
   user = '';
 
diff --git a/aio/content/examples/pipes/e2e-spec.ts b/aio/content/examples/pipes/e2e-spec.ts
index 00277e3657..0aa5f09a57 100644
--- a/aio/content/examples/pipes/e2e-spec.ts
+++ b/aio/content/examples/pipes/e2e-spec.ts
@@ -85,7 +85,7 @@ describe('Pipes', function () {
       return resetEle.click();
     })
     .then(function() {
-       expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore orginal flying heroes');
+       expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes');
     });
   });
 
diff --git a/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts b/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts
index 0a703d7016..d277483853 100644
--- a/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts
+++ b/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts
@@ -6,7 +6,7 @@ import { Pipe, PipeTransform } from '@angular/core';
  * Usage:
  *   value | exponentialStrength:exponent
  * Example:
- *   {{ 2 |  exponentialStrength:10}}
+ *   {{ 2 | exponentialStrength:10 }}
  *   formats to: 1024
 */
 @Pipe({name: 'exponentialStrength'})
diff --git a/aio/content/examples/quickstart/js/bs-config.1.json b/aio/content/examples/quickstart/js/bs-config.1.json
deleted file mode 100644
index 4e58595267..0000000000
--- a/aio/content/examples/quickstart/js/bs-config.1.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "server": {
-    "baseDir": "src",
-    "routes": {
-      "/node_modules": "node_modules"
-    }
-  }
-}
diff --git a/aio/content/examples/quickstart/js/example-config.json b/aio/content/examples/quickstart/js/example-config.json
deleted file mode 100644
index 81f31aaf0d..0000000000
--- a/aio/content/examples/quickstart/js/example-config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "build": "build:babel"
-}
diff --git a/aio/content/examples/quickstart/js/package.1.json b/aio/content/examples/quickstart/js/package.1.json
deleted file mode 100644
index 28aee2b92e..0000000000
--- a/aio/content/examples/quickstart/js/package.1.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "name": "angular-quickstart",
-  "version": "1.0.0",
-  "scripts": {
-    "start": "npm run lite",
-    "lite": "lite-server"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@angular/common": "~2.4.0",
-    "@angular/compiler": "~2.4.0",
-    "@angular/core": "~2.4.0",
-    "@angular/forms": "~2.4.0",
-    "@angular/http": "~2.4.0",
-    "@angular/platform-browser": "~2.4.0",
-    "@angular/platform-browser-dynamic": "~2.4.0",
-    "@angular/router": "~3.4.0",
-    "@angular/upgrade": "~2.4.0",
-
-    "angular-in-memory-web-api": "~0.3.1",
-    "core-js": "^2.4.1",
-    "rxjs": "5.0.1",
-    "zone.js": "^0.8.4"
-  },
-  "devDependencies": {
-    "concurrently": "^3.0.0",
-    "lite-server": "^2.2.2"
-  }
-}
diff --git a/aio/content/examples/quickstart/js/plnkr.json b/aio/content/examples/quickstart/js/plnkr.json
deleted file mode 100644
index 5e24ad9790..0000000000
--- a/aio/content/examples/quickstart/js/plnkr.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "description": "QuickStart",
-  "basePath": "src/",
-  "files": [
-    "!**/*.[1].*"
-  ],
-  "tags": ["quickstart"]
-}
diff --git a/aio/content/examples/quickstart/js/src/index.html b/aio/content/examples/quickstart/js/src/index.html
deleted file mode 100644
index 43d63e9c83..0000000000
--- a/aio/content/examples/quickstart/js/src/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<!-- #docregion -->
-<html>
-  <head>
-    <title>Angular QuickStart JS</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- 1. Load libraries -->
-    <!-- #docregion libraries -->
-    <!-- #docregion ie-polyfills -->
-    <!-- IE required polyfill -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <!-- #enddocregion ie-polyfills -->
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-
-    <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
-    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
-    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
-    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
-    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
-    <!-- #enddocregion libraries -->
-
-    <!-- 2. Load our 'modules' -->
-    <!-- #docregion modules -->
-    <script src='app/app.component.js'></script>
-    <script src='app/app.module.js'></script>
-    <script src='main.js'></script>
-    <!-- #enddocregion modules -->
-
-  </head>
-
-  <!-- 3. Display the application -->
-  <!-- #docregion my-app -->
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-  <!-- #enddocregion my-app -->
-
-</html>
diff --git a/aio/content/examples/quickstart/js/src/styles.1.css b/aio/content/examples/quickstart/js/src/styles.1.css
deleted file mode 100644
index fbc30e2c9e..0000000000
--- a/aio/content/examples/quickstart/js/src/styles.1.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/* #docregion */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-body {
-  margin: 2em;
-}
-
- /*
-  * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
-  * for the full set of master styles used by the documentation samples
-  */
diff --git a/aio/content/examples/reactive-forms/src/app/app.module.ts b/aio/content/examples/reactive-forms/src/app/app.module.ts
index b9f2ea8f99..a965cece94 100644
--- a/aio/content/examples/reactive-forms/src/app/app.module.ts
+++ b/aio/content/examples/reactive-forms/src/app/app.module.ts
@@ -16,7 +16,7 @@ import { HeroService }         from './hero.service'; //  <-- #1 import service
 @NgModule({
   imports: [
     BrowserModule,
-    ReactiveFormsModule // <-- #2 add to Angular module imports
+    ReactiveFormsModule // <-- #2 add to @NgModule imports
   ],
   declarations: [
     AppComponent,
diff --git a/aio/content/examples/router/e2e-spec.ts b/aio/content/examples/router/e2e-spec.ts
index 2e9c6bafeb..e7a882f83c 100644
--- a/aio/content/examples/router/e2e-spec.ts
+++ b/aio/content/examples/router/e2e-spec.ts
@@ -151,11 +151,11 @@ describe('Router', () => {
     await buttonEle.click();
     crisisEle = page.crisisList.get(index);
     if (save) {
-      expect(crisisEle.getText()).toEqual(crisisText + '-foo');
+      expect(crisisEle.getText()).toContain(crisisText + '-foo');
     } else {
       await browser.wait(EC.alertIsPresent(), 4000);
       await browser.switchTo().alert().accept();
-      expect(crisisEle.getText()).toEqual(crisisText);
+      expect(crisisEle.getText()).toContain(crisisText);
     }
   }
 
diff --git a/aio/content/examples/router/src/app.css b/aio/content/examples/router/src/app.css
new file mode 100644
index 0000000000..26e161dd30
--- /dev/null
+++ b/aio/content/examples/router/src/app.css
@@ -0,0 +1,47 @@
+/* items class */
+.items {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 24em;
+}
+.items li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.items li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.items li.selected {
+  background-color: #CFD8DC;
+  color: white;
+}
+.items li.selected:hover {
+  background-color: #BBD8DC;
+}
+.items .text {
+  position: relative;
+  top: -3px;
+}
+.items .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
diff --git a/aio/content/examples/router/src/app/admin/admin-dashboard.component.2.ts b/aio/content/examples/router/src/app/admin/admin-dashboard.component.2.ts
index 8c8e481643..ca9ec37bb9 100644
--- a/aio/content/examples/router/src/app/admin/admin-dashboard.component.2.ts
+++ b/aio/content/examples/router/src/app/admin/admin-dashboard.component.2.ts
@@ -22,8 +22,8 @@ export class AdminDashboardComponent implements OnInit {
   ngOnInit() {
     // Capture the session ID if available
     this.sessionId = this.route
-      .queryParams
-      .map(params => params['session_id'] || 'None');
+      .queryParamMap
+      .map(params => params.get('session_id') || 'None');
 
     // Capture the fragment if available
     this.token = this.route
diff --git a/aio/content/examples/router/src/app/admin/admin-dashboard.component.ts b/aio/content/examples/router/src/app/admin/admin-dashboard.component.ts
index b3fc839616..1602319c08 100644
--- a/aio/content/examples/router/src/app/admin/admin-dashboard.component.ts
+++ b/aio/content/examples/router/src/app/admin/admin-dashboard.component.ts
@@ -36,8 +36,8 @@ export class AdminDashboardComponent implements OnInit {
   ngOnInit() {
     // Capture the session ID if available
     this.sessionId = this.route
-      .queryParams
-      .map(params => params['session_id'] || 'None');
+      .queryParamMap
+      .map(params => params.get('session_id') || 'None');
 
     // Capture the fragment if available
     this.token = this.route
diff --git a/aio/content/examples/router/src/app/app-routing.module.1.ts b/aio/content/examples/router/src/app/app-routing.module.1.ts
index 8146e54671..436291f499 100644
--- a/aio/content/examples/router/src/app/app-routing.module.1.ts
+++ b/aio/content/examples/router/src/app/app-routing.module.1.ts
@@ -17,7 +17,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   exports: [
     RouterModule
diff --git a/aio/content/examples/router/src/app/app-routing.module.2.ts b/aio/content/examples/router/src/app/app-routing.module.2.ts
index 42ac84a481..c4df89d7f8 100644
--- a/aio/content/examples/router/src/app/app-routing.module.2.ts
+++ b/aio/content/examples/router/src/app/app-routing.module.2.ts
@@ -15,7 +15,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   exports: [
     RouterModule
diff --git a/aio/content/examples/router/src/app/app-routing.module.3.ts b/aio/content/examples/router/src/app/app-routing.module.3.ts
index 538ff9aafc..354ca6e740 100644
--- a/aio/content/examples/router/src/app/app-routing.module.3.ts
+++ b/aio/content/examples/router/src/app/app-routing.module.3.ts
@@ -22,7 +22,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   exports: [
     RouterModule
diff --git a/aio/content/examples/router/src/app/app-routing.module.4.ts b/aio/content/examples/router/src/app/app-routing.module.4.ts
index 6835d24a85..9c0d7bb928 100644
--- a/aio/content/examples/router/src/app/app-routing.module.4.ts
+++ b/aio/content/examples/router/src/app/app-routing.module.4.ts
@@ -18,7 +18,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   exports: [
     RouterModule
diff --git a/aio/content/examples/router/src/app/app-routing.module.5.ts b/aio/content/examples/router/src/app/app-routing.module.5.ts
index 2badf7f593..a12bd2cc7e 100644
--- a/aio/content/examples/router/src/app/app-routing.module.5.ts
+++ b/aio/content/examples/router/src/app/app-routing.module.5.ts
@@ -33,7 +33,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   exports: [
     RouterModule
diff --git a/aio/content/examples/router/src/app/app-routing.module.6.ts b/aio/content/examples/router/src/app/app-routing.module.6.ts
index df2c8c097d..83a6ab3521 100644
--- a/aio/content/examples/router/src/app/app-routing.module.6.ts
+++ b/aio/content/examples/router/src/app/app-routing.module.6.ts
@@ -37,9 +37,12 @@ const appRoutes: Routes = [
   imports: [
     // #docregion forRoot
     RouterModule.forRoot(
-      appRoutes
+      appRoutes,
       // #enddocregion preload-v1
-      , { preloadingStrategy: PreloadAllModules }
+      {
+        enableTracing: true, // <-- debugging purposes only
+        preloadingStrategy: PreloadAllModules
+      }
       // #docregion preload-v1
     )
     // #enddocregion forRoot
diff --git a/aio/content/examples/router/src/app/app-routing.module.ts b/aio/content/examples/router/src/app/app-routing.module.ts
index cc01ced890..17ba610edc 100644
--- a/aio/content/examples/router/src/app/app-routing.module.ts
+++ b/aio/content/examples/router/src/app/app-routing.module.ts
@@ -36,7 +36,11 @@ const appRoutes: Routes = [
   imports: [
     RouterModule.forRoot(
       appRoutes,
-      { preloadingStrategy: SelectivePreloadingStrategy }
+      {
+        enableTracing: true, // <-- debugging purposes only
+        preloadingStrategy: SelectivePreloadingStrategy,
+
+      }
     )
   ],
   exports: [
diff --git a/aio/content/examples/router/src/app/app.module.0.ts b/aio/content/examples/router/src/app/app.module.0.ts
index a195dbdd7a..5d14073b1b 100644
--- a/aio/content/examples/router/src/app/app.module.0.ts
+++ b/aio/content/examples/router/src/app/app.module.0.ts
@@ -26,7 +26,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
     // other imports here
   ],
 // #enddocregion
diff --git a/aio/content/examples/router/src/app/app.module.1.ts b/aio/content/examples/router/src/app/app.module.1.ts
index 32f93b8f79..e83e299a16 100644
--- a/aio/content/examples/router/src/app/app.module.1.ts
+++ b/aio/content/examples/router/src/app/app.module.1.ts
@@ -33,7 +33,10 @@ const appRoutes: Routes = [
   imports: [
     BrowserModule,
     FormsModule,
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   declarations: [
     AppComponent,
diff --git a/aio/content/examples/router/src/app/auth.service.ts b/aio/content/examples/router/src/app/auth.service.ts
index f86a80ebfe..908a4ae18b 100644
--- a/aio/content/examples/router/src/app/auth.service.ts
+++ b/aio/content/examples/router/src/app/auth.service.ts
@@ -8,7 +8,7 @@ import 'rxjs/add/operator/delay';
 
 @Injectable()
 export class AuthService {
-  isLoggedIn: boolean = false;
+  isLoggedIn = false;
 
   // store the URL so we can redirect after logging in
   redirectUrl: string;
diff --git a/aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts b/aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts
index 0b7c8247cf..78520372a9 100644
--- a/aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts
+++ b/aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts
@@ -15,7 +15,7 @@ export class CanDeactivateGuard implements CanDeactivate<CrisisDetailComponent>
     state: RouterStateSnapshot
   ): Promise<boolean> | boolean {
     // Get the Crisis Center ID
-    console.log(route.params['id']);
+    console.log(route.paramMap.get('id'));
 
     // Get the current URL
     console.log(state.url);
diff --git a/aio/content/examples/router/src/app/compose-message.component.ts b/aio/content/examples/router/src/app/compose-message.component.ts
index 17a0953378..6e83e3502b 100644
--- a/aio/content/examples/router/src/app/compose-message.component.ts
+++ b/aio/content/examples/router/src/app/compose-message.component.ts
@@ -15,7 +15,7 @@ export class ComposeMessageComponent {
   @HostBinding('style.position')  position = 'absolute';
 
   details: string;
-  sending: boolean = false;
+  sending = false;
 
   constructor(private router: Router) {}
 
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts
index a71d485c02..0edc35bc6e 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts
@@ -1,13 +1,9 @@
 // #docregion
-// #docplaster
 import { Component } from '@angular/core';
 
-// #docregion minus-imports
 @Component({
   template: `
     <p>Welcome to the Crisis Center</p>
   `
 })
 export class CrisisCenterHomeComponent { }
-// #enddocregion minus-imports
-// #enddocregion
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts
index e646f467d1..8ef60e68a1 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts
@@ -31,6 +31,7 @@ const crisisCenterRoutes: Routes = [
     ]
   }
 ];
+// #enddocregion routes
 
 @NgModule({
   imports: [
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts
index 31d1790f45..c7d7fe412d 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts
@@ -1,8 +1,6 @@
 // #docregion
-// #docplaster
 import { Component } from '@angular/core';
 
-// #docregion minus-imports
 @Component({
   template:  `
     <h2>CRISIS CENTER</h2>
@@ -10,5 +8,3 @@ import { Component } from '@angular/core';
   `
 })
 export class CrisisCenterComponent { }
-// #enddocregion minus-imports
-// #enddocregion
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts b/aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts
index 94b4cd33e7..e6782166ef 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts
@@ -10,7 +10,7 @@ export class CrisisDetailResolver implements Resolve<Crisis> {
   constructor(private cs: CrisisService, private router: Router) {}
 
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {
-    let id = route.params['id'];
+    let id = route.paramMap.get('id');
 
     return this.cs.getCrisis(id).then(crisis => {
       if (crisis) {
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts
index d6fa27f629..6f25040a27 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts
@@ -2,7 +2,7 @@
 // #docregion
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit, HostBinding } from '@angular/core';
-import { ActivatedRoute, Router, Params } from '@angular/router';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
 
 import { slideInDownAnimation }   from '../animations';
 import { Crisis, CrisisService }  from './crisis.service';
@@ -44,8 +44,8 @@ export class CrisisDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params
-      .switchMap((params: Params) => this.service.getCrisis(params['id']))
+    this.route.paramMap
+      .switchMap((params: ParamMap) => this.service.getCrisis(params.get('id')))
       .subscribe((crisis: Crisis) => {
         if (crisis) {
           this.editName = crisis.name;
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts
index 0000dde082..50d27afc48 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts
@@ -1,7 +1,7 @@
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }              from '@angular/core';
-import { ActivatedRoute, Router, Params } from '@angular/router';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
 import { Observable }            from 'rxjs/Observable';
@@ -31,9 +31,9 @@ export class CrisisListComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.crises = this.route.params
-      .switchMap((params: Params) => {
-        this.selectedId = +params['id'];
+    this.crises = this.route.paramMap
+      .switchMap((params: ParamMap) => {
+        this.selectedId = +params.get('id');
         return this.service.getCrises();
       });
   }
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-list.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-list.component.ts
index 4498a55c0f..b26d9e33aa 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-list.component.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-list.component.ts
@@ -1,7 +1,7 @@
 // #docregion
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }      from '@angular/core';
-import { ActivatedRoute, Router, Params } from '@angular/router';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
 
 import { Observable }            from 'rxjs/Observable';
 
@@ -38,9 +38,9 @@ export class CrisisListComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.crises = this.route.params
-      .switchMap((params: Params) => {
-        this.selectedId = +params['id'];
+    this.crises = this.route.paramMap
+      .switchMap((params: ParamMap) => {
+        this.selectedId = +params.get('id');
         return this.service.getCrises();
       });
   }
diff --git a/aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts b/aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts
index 93f0efaf0b..e5ad0b12fe 100644
--- a/aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts
@@ -5,7 +5,7 @@ import 'rxjs/add/operator/switchMap';
 // #enddocregion rxjs-operator-import
 import { Component, OnInit } from '@angular/core';
 // #docregion imports
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 // #enddocregion imports
 
 import { Hero, HeroService } from './hero.service';
@@ -40,9 +40,9 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params
-      // (+) converts string 'id' to a number
-      .switchMap((params: Params) => this.service.getHero(+params['id']))
+    this.route.paramMap
+      .switchMap((params: ParamMap) =>
+        this.service.getHero(params.get('id')))
       .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit
diff --git a/aio/content/examples/router/src/app/heroes/hero-detail.component.2.ts b/aio/content/examples/router/src/app/heroes/hero-detail.component.2.ts
index c3b69be965..de5633344d 100644
--- a/aio/content/examples/router/src/app/heroes/hero-detail.component.2.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-detail.component.2.ts
@@ -33,8 +33,7 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion snapshot
   ngOnInit() {
-    // (+) converts string 'id' to a number
-    let id = +this.route.snapshot.params['id'];
+    let id = this.route.snapshot.paramMap.get('id');
 
     this.service.getHero(id)
       .then((hero: Hero) => this.hero = hero);
diff --git a/aio/content/examples/router/src/app/heroes/hero-detail.component.ts b/aio/content/examples/router/src/app/heroes/hero-detail.component.ts
index 8135d37d32..09dfdce1c8 100644
--- a/aio/content/examples/router/src/app/heroes/hero-detail.component.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-detail.component.ts
@@ -4,7 +4,7 @@
 import 'rxjs/add/operator/switchMap';
 // #enddocregion rxjs-operator-import
 import { Component, OnInit, HostBinding } from '@angular/core';
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 
 import { slideInDownAnimation } from '../animations';
 
@@ -47,9 +47,9 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params
-      // (+) converts string 'id' to a number
-      .switchMap((params: Params) => this.service.getHero(+params['id']))
+    this.route.paramMap
+      .switchMap((params: ParamMap) =>
+        this.service.getHero(params.get('id')))
       .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit
diff --git a/aio/content/examples/router/src/app/heroes/hero-list.component.ts b/aio/content/examples/router/src/app/heroes/hero-list.component.ts
index c7dcc3877e..68266337ac 100644
--- a/aio/content/examples/router/src/app/heroes/hero-list.component.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-list.component.ts
@@ -7,7 +7,7 @@ import { Observable } from 'rxjs/Observable';
 // #enddocregion rxjs-imports
 import { Component, OnInit } from '@angular/core';
 // #docregion import-router
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 // #enddocregion import-router
 
 import { Hero, HeroService }  from './hero.service';
@@ -41,9 +41,10 @@ export class HeroListComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.heroes = this.route.params
-      .switchMap((params: Params) => {
-        this.selectedId = +params['id'];
+    this.heroes = this.route.paramMap
+      .switchMap((params: ParamMap) => {
+        // (+) before `params.get()` turns the string into a number
+        this.selectedId = +params.get('id');
         return this.service.getHeroes();
       });
   }
diff --git a/aio/content/examples/router/src/app/heroes/hero.service.ts b/aio/content/examples/router/src/app/heroes/hero.service.ts
index 6e4e7bee60..b689a3586a 100644
--- a/aio/content/examples/router/src/app/heroes/hero.service.ts
+++ b/aio/content/examples/router/src/app/heroes/hero.service.ts
@@ -22,6 +22,7 @@ export class HeroService {
 
   getHero(id: number | string) {
     return heroesPromise
+      // (+) before `id` turns the string into a number
       .then(heroes => heroes.find(hero => hero.id === +id));
   }
 }
diff --git a/aio/content/examples/router/src/app/login.component.ts b/aio/content/examples/router/src/app/login.component.ts
index 41c88f4068..1a6fae162f 100644
--- a/aio/content/examples/router/src/app/login.component.ts
+++ b/aio/content/examples/router/src/app/login.component.ts
@@ -38,7 +38,7 @@ export class LoginComponent {
         // Set our navigation extras object
         // that passes on our global query params and fragment
         let navigationExtras: NavigationExtras = {
-          preserveQueryParams: true,
+          queryParamsHandling: 'preserve',
           preserveFragment: true
         };
 
diff --git a/aio/content/examples/router/src/index.html b/aio/content/examples/router/src/index.html
index 0fa6453c36..e1bdab0d53 100644
--- a/aio/content/examples/router/src/index.html
+++ b/aio/content/examples/router/src/index.html
@@ -10,6 +10,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="app.css">
 
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
diff --git a/aio/content/examples/security/e2e-spec.ts b/aio/content/examples/security/e2e-spec.ts
index 23d11cd12b..8ebad58f21 100644
--- a/aio/content/examples/security/e2e-spec.ts
+++ b/aio/content/examples/security/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, By } from 'protractor';
 
diff --git a/aio/content/examples/cb-set-document-title/e2e-spec.ts b/aio/content/examples/set-document-title/e2e-spec.ts
similarity index 84%
rename from aio/content/examples/cb-set-document-title/e2e-spec.ts
rename to aio/content/examples/set-document-title/e2e-spec.ts
index 801b732995..b86deb9aa6 100644
--- a/aio/content/examples/cb-set-document-title/e2e-spec.ts
+++ b/aio/content/examples/set-document-title/e2e-spec.ts
@@ -1,8 +1,7 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by, ElementFinder } from 'protractor';
 
-// gulp run-e2e-tests --filter=cb-set-document-title
 describe('Set Document Title', function () {
 
     beforeAll(function () {
diff --git a/aio/content/examples/server-communication/example-config.json b/aio/content/examples/set-document-title/example-config.json
similarity index 100%
rename from aio/content/examples/server-communication/example-config.json
rename to aio/content/examples/set-document-title/example-config.json
diff --git a/aio/content/examples/cb-set-document-title/plnkr.json b/aio/content/examples/set-document-title/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-set-document-title/plnkr.json
rename to aio/content/examples/set-document-title/plnkr.json
diff --git a/aio/content/examples/cb-set-document-title/src/app/app.component.ts b/aio/content/examples/set-document-title/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/cb-set-document-title/src/app/app.component.ts
rename to aio/content/examples/set-document-title/src/app/app.component.ts
diff --git a/aio/content/examples/cb-set-document-title/src/app/app.module.ts b/aio/content/examples/set-document-title/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/cb-set-document-title/src/app/app.module.ts
rename to aio/content/examples/set-document-title/src/app/app.module.ts
diff --git a/aio/content/examples/cb-set-document-title/src/index.html b/aio/content/examples/set-document-title/src/index.html
similarity index 100%
rename from aio/content/examples/cb-set-document-title/src/index.html
rename to aio/content/examples/set-document-title/src/index.html
diff --git a/aio/content/examples/cb-set-document-title/src/main.ts b/aio/content/examples/set-document-title/src/main.ts
similarity index 100%
rename from aio/content/examples/cb-set-document-title/src/main.ts
rename to aio/content/examples/set-document-title/src/main.ts
diff --git a/aio/content/examples/setup/src/app/app.component.spec.ts b/aio/content/examples/setup/src/app/app.component.spec.ts
index 7769024464..4998dec904 100644
--- a/aio/content/examples/setup/src/app/app.component.spec.ts
+++ b/aio/content/examples/setup/src/app/app.component.spec.ts
@@ -27,7 +27,7 @@ describe('AppComponent', function () {
   it('should have expected <h1> text', () => {
     fixture.detectChanges();
     const h1 = de.nativeElement;
-    expect(h1.innerText).toMatch(/angular/i,
+    expect(h1.textContent).toMatch(/angular/i,
       '<h1> should say something about "Angular"');
   });
 });
diff --git a/aio/content/examples/structural-directives/src/app/app.component.html b/aio/content/examples/structural-directives/src/app/app.component.html
index 49c4928aad..9f5de0b8f4 100644
--- a/aio/content/examples/structural-directives/src/app/app.component.html
+++ b/aio/content/examples/structural-directives/src/app/app.component.html
@@ -213,10 +213,10 @@
 <h2 id="myUnless">UnlessDirective</h2>
 <p>
   The condition is currently
-  <span [ngClass]="{ a: !condition, b: condition, unless: true }">{{condition}}</span>.
+  <span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
   <button
     (click)="condition = !condition"
-    [ngClass] = "{ a: condition, b: !condition }" >
+    [ngClass] = "{ 'a': condition, 'b': !condition }" >
     Toggle condition to {{condition ? 'false' : 'true'}}
   </button>
 </p>
diff --git a/aio/content/examples/style-guide/.gitignore b/aio/content/examples/style-guide/.gitignore
deleted file mode 100644
index bd6423cecb..0000000000
--- a/aio/content/examples/style-guide/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-*.js
-!systemjs.custom.js
diff --git a/aio/content/examples/style-guide/e2e-spec.ts b/aio/content/examples/style-guide/e2e-spec.ts
deleted file mode 100644
index d143ae5573..0000000000
--- a/aio/content/examples/style-guide/e2e-spec.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-'use strict'; // necessary for es6 output in node 
-
-import { browser, element, by } from 'protractor';
-
-describe('Style Guide', function () {
-  it('01-01', function () {
-    browser.get('#/01-01');
-
-    let pre = element(by.tagName('toh-heroes > pre'));
-    expect(pre.getText()).toContain('Bombasto');
-    expect(pre.getText()).toContain('Tornado');
-    expect(pre.getText()).toContain('Magneta');
-  });
-
-  it('02-07', function () {
-    browser.get('#/02-07');
-
-    let hero = element(by.tagName('toh-hero > div'));
-    let users = element(by.tagName('admin-users > div'));
-
-    expect(hero.getText()).toBe('hero component');
-    expect(users.getText()).toBe('users component');
-  });
-
-  it('02-08', function () {
-    browser.get('#/02-08');
-
-    let input = element(by.tagName('input[tohvalidate]'));
-    expect(input.isPresent()).toBe(true);
-  });
-
-  it('03-01', function () {
-    browser.get('#/03-01');
-
-    let div = element(by.tagName('sg-app > div'));
-    expect(div.getText()).toBe('The expected error is 42');
-  });
-
-  it('03-02', function () {
-    browser.get('#/03-02');
-
-    let divs = element.all(by.tagName('sg-app > div'));
-    expect(divs.get(0).getText()).toBe('Heroes url: api/heroes');
-    expect(divs.get(1).getText()).toBe('Villains url: api/villains');
-  });
-
-  it('03-03', function () {
-    browser.get('#/03-03');
-
-    let div = element(by.tagName('sg-app > div'));
-    expect(div.getText()).toBe('Our hero is RubberMan and He is so elastic');
-  });
-
-  it('03-04', function () {
-    browser.get('#/03-04');
-
-    let buttons = element.all(by.tagName('sg-app > button'));
-    expect(buttons.get(0).getText()).toBe('Show toast');
-    expect(buttons.get(1).getText()).toBe('Hide toast');
-  });
-
-  it('03-06', function () {
-    browser.get('#/03-06');
-
-    let div = element(by.tagName('sg-app > div'));
-    expect(div.getText()).toBe('Actual favorite: Windstorm');
-
-    let lis = element.all(by.tagName('sg-app > ul > li'));
-    expect(lis.get(0).getText()).toBe('Windstorm');
-    expect(lis.get(1).getText()).toBe('Bombasto');
-    expect(lis.get(2).getText()).toBe('Magneta');
-    expect(lis.get(3).getText()).toBe('Tornado');
-  });
-
-  it('04-10', function () {
-    browser.get('#/04-10');
-
-    let div = element(by.tagName('sg-app > toh-heroes > div'));
-    expect(div.getText()).toBe('This is heroes component');
-  });
-
-  it('05-02', function () {
-    browser.get('#/05-02');
-
-    let button = element(by.tagName('sg-app > toh-hero-button > button'));
-    expect(button.getText()).toBe('Hero button');
-  });
-
-  it('05-03', function () {
-    browser.get('#/05-03');
-
-    let button = element(by.tagName('sg-app > toh-hero-button > button'));
-    expect(button.getText()).toBe('Hero button');
-  });
-
-  it('05-04', function () {
-    browser.get('#/05-04');
-
-    let h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
-    expect(h2.getText()).toBe('My Heroes');
-  });
-
-  it('05-12', function () {
-    browser.get('#/05-12');
-
-    let button = element(by.tagName('sg-app > toh-hero-button > button'));
-    expect(button.getText()).toBe('OK');
-  });
-
-  it('05-13', function () {
-    browser.get('#/05-13');
-
-    let button = element(by.tagName('sg-app > toh-hero-button > button'));
-    expect(button.getText()).toBe('OK');
-  });
-
-  it('05-14', function () {
-    browser.get('#/05-14');
-
-    let toast = element(by.tagName('sg-app > toh-toast'));
-    expect(toast.getText()).toBe('...');
-  });
-
-  it('05-15', function () {
-    browser.get('#/05-15');
-
-    let heroList = element(by.tagName('sg-app > toh-hero-list'));
-    expect(heroList.getText()).toBe('...');
-  });
-
-  it('05-16', function () {
-    browser.get('#/05-16');
-
-    let hero = element(by.tagName('sg-app > toh-hero'));
-    expect(hero.getText()).toBe('...');
-  });
-
-  it('05-17', function () {
-    browser.get('#/05-17');
-
-    let section = element(by.tagName('sg-app > toh-hero-list > section'));
-    expect(section.getText()).toContain('Our list of heroes');
-    expect(section.getText()).toContain('Total powers');
-    expect(section.getText()).toContain('Average power');
-  });
-
-  it('06-01', function () {
-    browser.get('#/06-01');
-
-    let div = element(by.tagName('sg-app > div[tohhighlight]'));
-    expect(div.getText()).toBe('Bombasta');
-  });
-
-  it('06-03', function () {
-    browser.get('#/06-03');
-
-    let input = element(by.tagName('input[tohvalidator]'));
-    expect(input.isPresent()).toBe(true);
-  });
-
-  it('07-01', function () {
-    browser.get('#/07-01');
-
-    let lis = element.all(by.tagName('sg-app > ul > li'));
-    expect(lis.get(0).getText()).toBe('Windstorm');
-    expect(lis.get(1).getText()).toBe('Bombasto');
-    expect(lis.get(2).getText()).toBe('Magneta');
-    expect(lis.get(3).getText()).toBe('Tornado');
-  });
-
-  it('07-03', function () {
-    browser.get('#/07-03');
-
-    let pre = element(by.tagName('toh-heroes > pre'));
-    expect(pre.getText()).toContain('[]');
-  });
-
-  it('07-04', function () {
-    browser.get('#/07-04');
-
-    let pre = element(by.tagName('toh-app > pre'));
-    expect(pre.getText()).toContain('[]');
-  });
-
-  it('09-01', function () {
-    browser.get('#/09-01');
-
-    let button = element(by.tagName('sg-app > toh-hero-button > button'));
-    expect(button.getText()).toBe('OK');
-  });
-});
diff --git a/aio/content/examples/style-guide/src/app/app.component.ts b/aio/content/examples/style-guide/src/app/app.component.ts
deleted file mode 100644
index 7556beb1ff..0000000000
--- a/aio/content/examples/style-guide/src/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-app',
-  templateUrl: './app.component.html'
-})
-export class AppComponent { }
diff --git a/aio/content/examples/style-guide/src/main.ts b/aio/content/examples/style-guide/src/main.ts
deleted file mode 100644
index 5b4c98ba69..0000000000
--- a/aio/content/examples/style-guide/src/main.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { NgModule } from '@angular/core';
-import { platformBrowserDynamic }   from '@angular/platform-browser-dynamic';
-import { BrowserModule }            from '@angular/platform-browser';
-
-import { HttpModule }           from '@angular/http';
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
-
-import { RouterModule } from '@angular/router';
-
-import { HashLocationStrategy,
-         LocationStrategy } from '@angular/common';
-
-import 'rxjs/add/operator/map';
-
-import { HeroData }     from './app/hero-data';
-import { AppComponent } from './app/app.component';
-
-import * as s0101 from './01-01/app/app.module';
-import * as s0205 from './02-05/app/app.module';
-import * as s0207 from './02-07/app/app.module';
-import * as s0208 from './02-08/app/app.module';
-import * as s0301 from './03-01/app/app.module';
-import * as s0302 from './03-02/app/app.module';
-import * as s0303 from './03-03/app/app.module';
-import * as s0304 from './03-04/app/app.module';
-import * as s0306 from './03-06/app/app.module';
-import * as s0408 from './04-08/app/app.module';
-import * as s0410 from './04-10/app/app.module';
-import * as s0411 from './04-11/app/app.module';
-import * as s0412 from './04-12/app/app.module';
-import * as s0502 from './05-02/app/app.module';
-import * as s0503 from './05-03/app/app.module';
-import * as s0504 from './05-04/app/app.module';
-import * as s0512 from './05-12/app/app.module';
-import * as s0513 from './05-13/app/app.module';
-import * as s0514 from './05-14/app/app.module';
-import * as s0515 from './05-15/app/app.module';
-import * as s0516 from './05-16/app/app.module';
-import * as s0517 from './05-17/app/app.module';
-import * as s0601 from './06-01/app/app.module';
-import * as s0603 from './06-03/app/app.module';
-import * as s0701 from './07-01/app/app.module';
-import * as s0703 from './07-03/app/app.module';
-import * as s0704 from './07-04/app/app.module';
-import * as s0901 from './09-01/app/app.module';
-
-///////////////////
-const moduleMetadata = {
-  imports: [
-    BrowserModule,
-    HttpModule,
-    InMemoryWebApiModule.forRoot(HeroData),
-
-    s0101.AppModule,
-    s0205.AppModule,
-    s0207.AppModule,
-    s0208.AppModule,
-    s0301.AppModule,
-    s0302.AppModule,
-    s0303.AppModule,
-    s0304.AppModule,
-    s0306.AppModule,
-    s0408.AppModule,
-    s0410.AppModule,
-    s0411.AppModule,
-    s0412.AppModule,
-    s0502.AppModule,
-    s0503.AppModule,
-    s0504.AppModule,
-    s0512.AppModule,
-    s0513.AppModule,
-    s0514.AppModule,
-    s0515.AppModule,
-    s0516.AppModule,
-    s0517.AppModule,
-    s0601.AppModule,
-    s0603.AppModule,
-    s0701.AppModule,
-    s0703.AppModule,
-    s0704.AppModule,
-    s0901.AppModule,
-
-    RouterModule.forRoot([
-      { path: '', redirectTo: '/01-01', pathMatch: 'full' }
-    ], {/* enableTracing: true */}),
-  ],
-  providers: [
-    { provide: LocationStrategy, useClass: HashLocationStrategy }
-  ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
-};
-
-@NgModule(moduleMetadata)
-class MainModule { }
-
-platformBrowserDynamic().bootstrapModule(MainModule);
-
-
diff --git a/aio/content/examples/styleguide/e2e-spec.ts b/aio/content/examples/styleguide/e2e-spec.ts
index af10d2b71d..e740495858 100644
--- a/aio/content/examples/styleguide/e2e-spec.ts
+++ b/aio/content/examples/styleguide/e2e-spec.ts
@@ -1,16 +1,191 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
-describe('Documentation StyleGuide E2E Tests', function() {
+describe('Style Guide', function () {
+  it('01-01', function () {
+    browser.get('#/01-01');
 
-  let expectedMsg = 'My First Angular App';
-
-  beforeEach(function () {
-    browser.get('');
+    let pre = element(by.tagName('toh-heroes > pre'));
+    expect(pre.getText()).toContain('Bombasto');
+    expect(pre.getText()).toContain('Tornado');
+    expect(pre.getText()).toContain('Magneta');
   });
 
-  it('should display: ' + expectedMsg, function() {
-    expect(element(by.id('output')).getText()).toEqual(expectedMsg);
+  it('02-07', function () {
+    browser.get('#/02-07');
+
+    let hero = element(by.tagName('toh-hero > div'));
+    let users = element(by.tagName('admin-users > div'));
+
+    expect(hero.getText()).toBe('hero component');
+    expect(users.getText()).toBe('users component');
+  });
+
+  it('02-08', function () {
+    browser.get('#/02-08');
+
+    let input = element(by.tagName('input[tohvalidate]'));
+    expect(input.isPresent()).toBe(true);
+  });
+
+  it('03-01', function () {
+    browser.get('#/03-01');
+
+    let div = element(by.tagName('sg-app > div'));
+    expect(div.getText()).toBe('The expected error is 42');
+  });
+
+  it('03-02', function () {
+    browser.get('#/03-02');
+
+    let divs = element.all(by.tagName('sg-app > div'));
+    expect(divs.get(0).getText()).toBe('Heroes url: api/heroes');
+    expect(divs.get(1).getText()).toBe('Villains url: api/villains');
+  });
+
+  it('03-03', function () {
+    browser.get('#/03-03');
+
+    let div = element(by.tagName('sg-app > div'));
+    expect(div.getText()).toBe('Our hero is RubberMan and He is so elastic');
+  });
+
+  it('03-04', function () {
+    browser.get('#/03-04');
+
+    let buttons = element.all(by.tagName('sg-app > button'));
+    expect(buttons.get(0).getText()).toBe('Show toast');
+    expect(buttons.get(1).getText()).toBe('Hide toast');
+  });
+
+  it('03-06', function () {
+    browser.get('#/03-06');
+
+    let div = element(by.tagName('sg-app > div'));
+    expect(div.getText()).toBe('Actual favorite: Windstorm');
+
+    let lis = element.all(by.tagName('sg-app > ul > li'));
+    expect(lis.get(0).getText()).toBe('Windstorm');
+    expect(lis.get(1).getText()).toBe('Bombasto');
+    expect(lis.get(2).getText()).toBe('Magneta');
+    expect(lis.get(3).getText()).toBe('Tornado');
+  });
+
+  it('04-10', function () {
+    browser.get('#/04-10');
+
+    let div = element(by.tagName('sg-app > toh-heroes > div'));
+    expect(div.getText()).toBe('This is heroes component');
+  });
+
+  it('05-02', function () {
+    browser.get('#/05-02');
+
+    let button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('Hero button');
+  });
+
+  it('05-03', function () {
+    browser.get('#/05-03');
+
+    let button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('Hero button');
+  });
+
+  it('05-04', function () {
+    browser.get('#/05-04');
+
+    let h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
+    expect(h2.getText()).toBe('My Heroes');
+  });
+
+  it('05-12', function () {
+    browser.get('#/05-12');
+
+    let button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('OK');
+  });
+
+  it('05-13', function () {
+    browser.get('#/05-13');
+
+    let button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('OK');
+  });
+
+  it('05-14', function () {
+    browser.get('#/05-14');
+
+    let toast = element(by.tagName('sg-app > toh-toast'));
+    expect(toast.getText()).toBe('...');
+  });
+
+  it('05-15', function () {
+    browser.get('#/05-15');
+
+    let heroList = element(by.tagName('sg-app > toh-hero-list'));
+    expect(heroList.getText()).toBe('...');
+  });
+
+  it('05-16', function () {
+    browser.get('#/05-16');
+
+    let hero = element(by.tagName('sg-app > toh-hero'));
+    expect(hero.getText()).toBe('...');
+  });
+
+  it('05-17', function () {
+    browser.get('#/05-17');
+
+    let section = element(by.tagName('sg-app > toh-hero-list > section'));
+    expect(section.getText()).toContain('Our list of heroes');
+    expect(section.getText()).toContain('Total powers');
+    expect(section.getText()).toContain('Average power');
+  });
+
+  it('06-01', function () {
+    browser.get('#/06-01');
+
+    let div = element(by.tagName('sg-app > div[tohhighlight]'));
+    expect(div.getText()).toBe('Bombasta');
+  });
+
+  it('06-03', function () {
+    browser.get('#/06-03');
+
+    let input = element(by.tagName('input[tohvalidator]'));
+    expect(input.isPresent()).toBe(true);
+  });
+
+  it('07-01', function () {
+    browser.get('#/07-01');
+
+    let lis = element.all(by.tagName('sg-app > ul > li'));
+    expect(lis.get(0).getText()).toBe('Windstorm');
+    expect(lis.get(1).getText()).toBe('Bombasto');
+    expect(lis.get(2).getText()).toBe('Magneta');
+    expect(lis.get(3).getText()).toBe('Tornado');
+  });
+
+  it('07-03', function () {
+    browser.get('#/07-03');
+
+    let pre = element(by.tagName('toh-heroes > pre'));
+    expect(pre.getText()).toContain('[]');
+  });
+
+  it('07-04', function () {
+    browser.get('#/07-04');
+
+    let pre = element(by.tagName('toh-app > pre'));
+    expect(pre.getText()).toContain('[]');
+  });
+
+  it('09-01', function () {
+    browser.get('#/09-01');
+
+    let button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('OK');
   });
 });
diff --git a/aio/content/examples/styleguide/foo.dart b/aio/content/examples/styleguide/foo.dart
deleted file mode 100644
index aeea7eb657..0000000000
--- a/aio/content/examples/styleguide/foo.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-library angular2.src.core.application_static;
-
-// #docregion import
-import 'dart:async';
-import 'application_common.dart';
-import 'package:angular2/src/core/linker/dynamic_component_loader.dart' show ComponentRef;
-// #enddocregion import
-/// Starts an application from a root component.
-///
-/// See [commonBootstrap] for detailed documentation.
-Future<ComponentRef> bootstrapStatic(Type appComponentType,
-                                     [List componentInjectableBindings, void initReflector()]) {
-  if (initReflector != null) {
-    initReflector();
-  }
-  return commonBootstrap(appComponentType, componentInjectableBindings);
-}
diff --git a/aio/content/examples/styleguide/foo.yaml b/aio/content/examples/styleguide/foo.yaml
deleted file mode 100644
index 37f8b7ab22..0000000000
--- a/aio/content/examples/styleguide/foo.yaml
+++ /dev/null
@@ -1,21 +0,0 @@
-name: benchpress
-version: <%= packageJson.version %>
-authors:
-<%= Object.keys(packageJson.contributors).map(function(name) {
-  return '- '+name+' <'+packageJson.contributors[name]+'>';
-}).join('\n') %>
-description: Benchpress - a framework for e2e performance tests
-homepage: <%= packageJson.homepage %>
-environment:
-  sdk: '>=1.10.0 <2.0.0'
-# #docregion dependencies
-dependencies:
-  angular2: '^<%= packageJson.version %>'
-  stack_trace: '^1.1.1'
-  webdriver: '^0.9.0'
-dev_dependencies:
-  guinness: '^0.1.17'
-dependency_overrides:
-  angular2:
-    path: ../angular2
-# #enddocregion
diff --git a/aio/content/examples/styleguide/js/example-config.json b/aio/content/examples/styleguide/js/example-config.json
deleted file mode 100644
index 81f31aaf0d..0000000000
--- a/aio/content/examples/styleguide/js/example-config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "build": "build:babel"
-}
diff --git a/aio/content/examples/styleguide/js/src/index.html b/aio/content/examples/styleguide/js/src/index.html
deleted file mode 100644
index ac2d34ba5d..0000000000
--- a/aio/content/examples/styleguide/js/src/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- #docregion -->
-<html>
-  <head>
-    <title>Documentation Style</title>
-    <base href="/">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <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/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
-    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
-    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
-    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
-    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
-
-    <script src='app.js'></script>
-  </head>
-
-  <body>
-    <my-app>foo2</my-app>
-  </body>
-
-</html>
diff --git a/aio/content/examples/styleguide/jsonly.zipconfig.json b/aio/content/examples/styleguide/jsonly.zipconfig.json
deleted file mode 100644
index 118c776bdc..0000000000
--- a/aio/content/examples/styleguide/jsonly.zipconfig.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "files": ["**/*.js"]
-}
\ No newline at end of file
diff --git a/aio/content/examples/styleguide/package.1.json b/aio/content/examples/styleguide/package.1.json
deleted file mode 100644
index 481f99fb12..0000000000
--- a/aio/content/examples/styleguide/package.1.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "angular2-quickstart",
-  "version": "1.0.0",
-  "scripts": {
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "lite": "lite-server",
-    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
-  },
-  "license": "MIT",
-  "dependencies": {
-    "angular2": "2.0.0-beta.0",
-    "systemjs": "0.19.6",
-    "core-js": "^2.4.0",
-    "rxjs": "5.0.0-beta.0",
-    "zone.js": "0.5.10"
-  },
-  "devDependencies": {
-    "concurrently": "^1.0.0",
-    "lite-server": "^1.3.1",
-    "typescript": "^1.7.3"
-  }
-}
diff --git a/aio/content/examples/style-guide/plnkr.json b/aio/content/examples/styleguide/plnkr.json
similarity index 100%
rename from aio/content/examples/style-guide/plnkr.json
rename to aio/content/examples/styleguide/plnkr.json
diff --git a/aio/content/examples/style-guide/src/01-01/app/app.component.css b/aio/content/examples/styleguide/src/01-01/app/app.component.css
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/app/app.component.css
rename to aio/content/examples/styleguide/src/01-01/app/app.component.css
diff --git a/aio/content/examples/style-guide/src/01-01/app/app.component.ts b/aio/content/examples/styleguide/src/01-01/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/app/app.component.ts
rename to aio/content/examples/styleguide/src/01-01/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/01-01/app/app.module.ts b/aio/content/examples/styleguide/src/01-01/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/app/app.module.ts
rename to aio/content/examples/styleguide/src/01-01/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/01-01/app/heroes/hero.component.avoid.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/app/heroes/hero.component.avoid.ts
rename to aio/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/01-01/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/app/heroes/heroes.component.ts
rename to aio/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts
diff --git a/aio/content/examples/style-guide/src/01-01/app/heroes/index.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/01-01/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/01-01/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/app/heroes/shared/hero.model.ts
rename to aio/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts
diff --git a/aio/content/examples/style-guide/src/01-01/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/app/heroes/shared/hero.service.ts
rename to aio/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts
diff --git a/aio/content/examples/style-guide/src/01-01/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/01-01/app/heroes/shared/mock-heroes.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/app/heroes/shared/mock-heroes.ts
rename to aio/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts
diff --git a/aio/content/examples/style-guide/src/01-01/app/index.ts b/aio/content/examples/styleguide/src/01-01/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/app/index.ts
rename to aio/content/examples/styleguide/src/01-01/app/index.ts
diff --git a/aio/content/examples/style-guide/src/01-01/main.ts b/aio/content/examples/styleguide/src/01-01/main.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/01-01/main.ts
rename to aio/content/examples/styleguide/src/01-01/main.ts
diff --git a/aio/content/examples/style-guide/src/02-05/app/app.component.ts b/aio/content/examples/styleguide/src/02-05/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-05/app/app.component.ts
rename to aio/content/examples/styleguide/src/02-05/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/02-05/app/app.module.ts b/aio/content/examples/styleguide/src/02-05/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-05/app/app.module.ts
rename to aio/content/examples/styleguide/src/02-05/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/02-05/main.ts b/aio/content/examples/styleguide/src/02-05/main.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-05/main.ts
rename to aio/content/examples/styleguide/src/02-05/main.ts
diff --git a/aio/content/examples/style-guide/src/02-07/app/app.component.ts b/aio/content/examples/styleguide/src/02-07/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-07/app/app.component.ts
rename to aio/content/examples/styleguide/src/02-07/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/02-07/app/app.module.ts b/aio/content/examples/styleguide/src/02-07/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-07/app/app.module.ts
rename to aio/content/examples/styleguide/src/02-07/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/02-07/app/heroes/hero.component.avoid.ts b/aio/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-07/app/heroes/hero.component.avoid.ts
rename to aio/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/02-07/app/heroes/hero.component.ts b/aio/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-07/app/heroes/hero.component.ts
rename to aio/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts
diff --git a/aio/content/examples/style-guide/src/02-07/app/heroes/index.ts b/aio/content/examples/styleguide/src/02-07/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-07/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/02-07/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/02-07/app/index.ts b/aio/content/examples/styleguide/src/02-07/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-07/app/index.ts
rename to aio/content/examples/styleguide/src/02-07/app/index.ts
diff --git a/aio/content/examples/style-guide/src/02-07/app/users/index.ts b/aio/content/examples/styleguide/src/02-07/app/users/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-07/app/users/index.ts
rename to aio/content/examples/styleguide/src/02-07/app/users/index.ts
diff --git a/aio/content/examples/style-guide/src/02-07/app/users/users.component.avoid.ts b/aio/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-07/app/users/users.component.avoid.ts
rename to aio/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/02-07/app/users/users.component.ts b/aio/content/examples/styleguide/src/02-07/app/users/users.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-07/app/users/users.component.ts
rename to aio/content/examples/styleguide/src/02-07/app/users/users.component.ts
diff --git a/aio/content/examples/style-guide/src/02-08/app/app.component.ts b/aio/content/examples/styleguide/src/02-08/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-08/app/app.component.ts
rename to aio/content/examples/styleguide/src/02-08/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/02-08/app/app.module.ts b/aio/content/examples/styleguide/src/02-08/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-08/app/app.module.ts
rename to aio/content/examples/styleguide/src/02-08/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/02-08/app/index.ts b/aio/content/examples/styleguide/src/02-08/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-08/app/index.ts
rename to aio/content/examples/styleguide/src/02-08/app/index.ts
diff --git a/aio/content/examples/style-guide/src/02-08/app/shared/index.ts b/aio/content/examples/styleguide/src/02-08/app/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-08/app/shared/index.ts
rename to aio/content/examples/styleguide/src/02-08/app/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/02-08/app/shared/input-highlight.directive.ts b/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-08/app/shared/input-highlight.directive.ts
rename to aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts
diff --git a/aio/content/examples/style-guide/src/02-08/app/shared/validate.directive.avoid.ts b/aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-08/app/shared/validate.directive.avoid.ts
rename to aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts
diff --git a/aio/content/examples/style-guide/src/02-08/app/shared/validate.directive.ts b/aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/02-08/app/shared/validate.directive.ts
rename to aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts
diff --git a/aio/content/examples/style-guide/src/03-01/app/app.component.ts b/aio/content/examples/styleguide/src/03-01/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-01/app/app.component.ts
rename to aio/content/examples/styleguide/src/03-01/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/03-01/app/app.module.ts b/aio/content/examples/styleguide/src/03-01/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-01/app/app.module.ts
rename to aio/content/examples/styleguide/src/03-01/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/03-01/app/core/exception.service.avoid.ts b/aio/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-01/app/core/exception.service.avoid.ts
rename to aio/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts
diff --git a/aio/content/examples/style-guide/src/03-01/app/core/exception.service.ts b/aio/content/examples/styleguide/src/03-01/app/core/exception.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-01/app/core/exception.service.ts
rename to aio/content/examples/styleguide/src/03-01/app/core/exception.service.ts
diff --git a/aio/content/examples/style-guide/src/03-01/app/core/index.ts b/aio/content/examples/styleguide/src/03-01/app/core/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-01/app/core/index.ts
rename to aio/content/examples/styleguide/src/03-01/app/core/index.ts
diff --git a/aio/content/examples/style-guide/src/03-01/app/index.ts b/aio/content/examples/styleguide/src/03-01/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-01/app/index.ts
rename to aio/content/examples/styleguide/src/03-01/app/index.ts
diff --git a/aio/content/examples/style-guide/src/03-02/app/app.component.ts b/aio/content/examples/styleguide/src/03-02/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-02/app/app.component.ts
rename to aio/content/examples/styleguide/src/03-02/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/03-02/app/app.module.ts b/aio/content/examples/styleguide/src/03-02/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-02/app/app.module.ts
rename to aio/content/examples/styleguide/src/03-02/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/03-02/app/core/data.service.ts b/aio/content/examples/styleguide/src/03-02/app/core/data.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-02/app/core/data.service.ts
rename to aio/content/examples/styleguide/src/03-02/app/core/data.service.ts
diff --git a/aio/content/examples/style-guide/src/03-02/app/core/index.ts b/aio/content/examples/styleguide/src/03-02/app/core/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-02/app/core/index.ts
rename to aio/content/examples/styleguide/src/03-02/app/core/index.ts
diff --git a/aio/content/examples/style-guide/src/03-02/app/index.ts b/aio/content/examples/styleguide/src/03-02/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-02/app/index.ts
rename to aio/content/examples/styleguide/src/03-02/app/index.ts
diff --git a/aio/content/examples/style-guide/src/03-03/app/app.component.ts b/aio/content/examples/styleguide/src/03-03/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-03/app/app.component.ts
rename to aio/content/examples/styleguide/src/03-03/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/03-03/app/app.module.ts b/aio/content/examples/styleguide/src/03-03/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-03/app/app.module.ts
rename to aio/content/examples/styleguide/src/03-03/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/03-03/app/core/hero-collector.service.avoid.ts b/aio/content/examples/styleguide/src/03-03/app/core/hero-collector.service.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-03/app/core/hero-collector.service.avoid.ts
rename to aio/content/examples/styleguide/src/03-03/app/core/hero-collector.service.avoid.ts
diff --git a/aio/content/examples/style-guide/src/03-03/app/core/hero-collector.service.ts b/aio/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-03/app/core/hero-collector.service.ts
rename to aio/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts
diff --git a/aio/content/examples/style-guide/src/03-03/app/core/hero.model.avoid.ts b/aio/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-03/app/core/hero.model.avoid.ts
rename to aio/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts
diff --git a/aio/content/examples/style-guide/src/03-03/app/core/hero.model.ts b/aio/content/examples/styleguide/src/03-03/app/core/hero.model.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-03/app/core/hero.model.ts
rename to aio/content/examples/styleguide/src/03-03/app/core/hero.model.ts
diff --git a/aio/content/examples/style-guide/src/03-03/app/core/index.ts b/aio/content/examples/styleguide/src/03-03/app/core/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-03/app/core/index.ts
rename to aio/content/examples/styleguide/src/03-03/app/core/index.ts
diff --git a/aio/content/examples/style-guide/src/03-03/app/index.ts b/aio/content/examples/styleguide/src/03-03/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-03/app/index.ts
rename to aio/content/examples/styleguide/src/03-03/app/index.ts
diff --git a/aio/content/examples/style-guide/src/03-04/app/app.component.ts b/aio/content/examples/styleguide/src/03-04/app/app.component.ts
similarity index 90%
rename from aio/content/examples/style-guide/src/03-04/app/app.component.ts
rename to aio/content/examples/styleguide/src/03-04/app/app.component.ts
index 555c9e9441..5aaf3402e1 100644
--- a/aio/content/examples/style-guide/src/03-04/app/app.component.ts
+++ b/aio/content/examples/styleguide/src/03-04/app/app.component.ts
@@ -22,6 +22,6 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.toastService.activate('Hello style-guide!');
+    this.toastService.activate('Hello Style Guide!');
   }
 }
diff --git a/aio/content/examples/style-guide/src/03-04/app/app.module.ts b/aio/content/examples/styleguide/src/03-04/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-04/app/app.module.ts
rename to aio/content/examples/styleguide/src/03-04/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/03-04/app/core/index.ts b/aio/content/examples/styleguide/src/03-04/app/core/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-04/app/core/index.ts
rename to aio/content/examples/styleguide/src/03-04/app/core/index.ts
diff --git a/aio/content/examples/style-guide/src/03-04/app/core/toast.service.avoid.ts b/aio/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-04/app/core/toast.service.avoid.ts
rename to aio/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts
diff --git a/aio/content/examples/style-guide/src/03-04/app/core/toast.service.ts b/aio/content/examples/styleguide/src/03-04/app/core/toast.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-04/app/core/toast.service.ts
rename to aio/content/examples/styleguide/src/03-04/app/core/toast.service.ts
diff --git a/aio/content/examples/style-guide/src/03-04/app/index.ts b/aio/content/examples/styleguide/src/03-04/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-04/app/index.ts
rename to aio/content/examples/styleguide/src/03-04/app/index.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/app.component.html b/aio/content/examples/styleguide/src/03-06/app/app.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/app.component.html
rename to aio/content/examples/styleguide/src/03-06/app/app.component.html
diff --git a/aio/content/examples/style-guide/src/03-06/app/app.component.ts b/aio/content/examples/styleguide/src/03-06/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/app.component.ts
rename to aio/content/examples/styleguide/src/03-06/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/app.module.ts b/aio/content/examples/styleguide/src/03-06/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/app.module.ts
rename to aio/content/examples/styleguide/src/03-06/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/core/exception.service.ts b/aio/content/examples/styleguide/src/03-06/app/core/exception.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/core/exception.service.ts
rename to aio/content/examples/styleguide/src/03-06/app/core/exception.service.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/core/index.ts b/aio/content/examples/styleguide/src/03-06/app/core/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/core/index.ts
rename to aio/content/examples/styleguide/src/03-06/app/core/index.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/core/spinner/index.ts b/aio/content/examples/styleguide/src/03-06/app/core/spinner/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/core/spinner/index.ts
rename to aio/content/examples/styleguide/src/03-06/app/core/spinner/index.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/core/spinner/spinner.component.ts b/aio/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/core/spinner/spinner.component.ts
rename to aio/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/core/spinner/spinner.service.ts b/aio/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/core/spinner/spinner.service.ts
rename to aio/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/core/toast/index.ts b/aio/content/examples/styleguide/src/03-06/app/core/toast/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/core/toast/index.ts
rename to aio/content/examples/styleguide/src/03-06/app/core/toast/index.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/core/toast/toast.component.ts b/aio/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/core/toast/toast.component.ts
rename to aio/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/core/toast/toast.service.ts b/aio/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/core/toast/toast.service.ts
rename to aio/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/heroes/index.ts b/aio/content/examples/styleguide/src/03-06/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/03-06/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.model.ts
rename to aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.service.avoid.ts b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.service.avoid.ts
rename to aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.service.ts
rename to aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/index.ts b/aio/content/examples/styleguide/src/03-06/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/index.ts
rename to aio/content/examples/styleguide/src/03-06/app/index.ts
diff --git a/aio/content/examples/style-guide/src/03-06/app/shared/toast/toast.component.ts b/aio/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/03-06/app/shared/toast/toast.component.ts
rename to aio/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts
diff --git a/aio/content/examples/style-guide/src/04-08/app/app.component.ts b/aio/content/examples/styleguide/src/04-08/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-08/app/app.component.ts
rename to aio/content/examples/styleguide/src/04-08/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/04-08/app/app.module.ts b/aio/content/examples/styleguide/src/04-08/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-08/app/app.module.ts
rename to aio/content/examples/styleguide/src/04-08/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/04-08/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/04-08/app/heroes/heroes.component.html
rename to aio/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html
diff --git a/aio/content/examples/style-guide/src/04-08/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-08/app/heroes/heroes.component.ts
rename to aio/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts
diff --git a/aio/content/examples/style-guide/src/04-10/app/app.component.ts b/aio/content/examples/styleguide/src/04-10/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-10/app/app.component.ts
rename to aio/content/examples/styleguide/src/04-10/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/04-10/app/app.module.ts b/aio/content/examples/styleguide/src/04-10/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-10/app/app.module.ts
rename to aio/content/examples/styleguide/src/04-10/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/04-10/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/04-10/app/heroes/heroes.component.html
rename to aio/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html
diff --git a/aio/content/examples/style-guide/src/04-10/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-10/app/heroes/heroes.component.ts
rename to aio/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts
diff --git a/aio/content/examples/style-guide/src/04-10/app/shared/filter-text/filter-text.component.ts b/aio/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-10/app/shared/filter-text/filter-text.component.ts
rename to aio/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts
diff --git a/aio/content/examples/style-guide/src/04-10/app/shared/filter-text/filter-text.service.ts b/aio/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-10/app/shared/filter-text/filter-text.service.ts
rename to aio/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts
diff --git a/aio/content/examples/style-guide/src/04-10/app/shared/init-caps.pipe.ts b/aio/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-10/app/shared/init-caps.pipe.ts
rename to aio/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts
diff --git a/aio/content/examples/style-guide/src/04-10/app/shared/shared.module.ts b/aio/content/examples/styleguide/src/04-10/app/shared/shared.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-10/app/shared/shared.module.ts
rename to aio/content/examples/styleguide/src/04-10/app/shared/shared.module.ts
diff --git a/aio/content/examples/style-guide/src/04-11/app/app.component.ts b/aio/content/examples/styleguide/src/04-11/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/app.component.ts
rename to aio/content/examples/styleguide/src/04-11/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/04-11/app/app.module.ts b/aio/content/examples/styleguide/src/04-11/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/app.module.ts
rename to aio/content/examples/styleguide/src/04-11/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/04-11/app/core/core.module.ts b/aio/content/examples/styleguide/src/04-11/app/core/core.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/core/core.module.ts
rename to aio/content/examples/styleguide/src/04-11/app/core/core.module.ts
diff --git a/aio/content/examples/style-guide/src/04-11/app/core/index.ts b/aio/content/examples/styleguide/src/04-11/app/core/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/core/index.ts
rename to aio/content/examples/styleguide/src/04-11/app/core/index.ts
diff --git a/aio/content/examples/style-guide/src/04-11/app/core/logger.service.ts b/aio/content/examples/styleguide/src/04-11/app/core/logger.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/core/logger.service.ts
rename to aio/content/examples/styleguide/src/04-11/app/core/logger.service.ts
diff --git a/aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.css b/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.css
rename to aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css
diff --git a/aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.html b/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.html
rename to aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html
diff --git a/aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.ts b/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.ts
rename to aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts
diff --git a/aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.css b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.css
rename to aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css
diff --git a/aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.html b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.html
rename to aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html
diff --git a/aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.ts b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.ts
rename to aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts
diff --git a/aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.service.ts b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.service.ts
rename to aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts
diff --git a/aio/content/examples/style-guide/src/04-11/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/heroes/heroes.component.html
rename to aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html
diff --git a/aio/content/examples/style-guide/src/04-11/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-11/app/heroes/heroes.component.ts
rename to aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts
diff --git a/aio/content/examples/style-guide/src/04-12/app/app.component.ts b/aio/content/examples/styleguide/src/04-12/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-12/app/app.component.ts
rename to aio/content/examples/styleguide/src/04-12/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/04-12/app/app.module.ts b/aio/content/examples/styleguide/src/04-12/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-12/app/app.module.ts
rename to aio/content/examples/styleguide/src/04-12/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/04-12/app/core/core.module.ts b/aio/content/examples/styleguide/src/04-12/app/core/core.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-12/app/core/core.module.ts
rename to aio/content/examples/styleguide/src/04-12/app/core/core.module.ts
diff --git a/aio/content/examples/style-guide/src/04-12/app/core/index.ts b/aio/content/examples/styleguide/src/04-12/app/core/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-12/app/core/index.ts
rename to aio/content/examples/styleguide/src/04-12/app/core/index.ts
diff --git a/aio/content/examples/style-guide/src/04-12/app/core/logger.service.ts b/aio/content/examples/styleguide/src/04-12/app/core/logger.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-12/app/core/logger.service.ts
rename to aio/content/examples/styleguide/src/04-12/app/core/logger.service.ts
diff --git a/aio/content/examples/style-guide/src/04-12/app/core/module-import-guard.ts b/aio/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-12/app/core/module-import-guard.ts
rename to aio/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts
diff --git a/aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.css b/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css
similarity index 100%
rename from aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.css
rename to aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css
diff --git a/aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.html b/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.html
rename to aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html
diff --git a/aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.ts b/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.ts
rename to aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts
diff --git a/aio/content/examples/style-guide/src/04-12/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/04-12/app/heroes/heroes.component.html
rename to aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html
diff --git a/aio/content/examples/style-guide/src/04-12/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/04-12/app/heroes/heroes.component.ts
rename to aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts
diff --git a/aio/content/examples/style-guide/src/05-02/app/app.component.html b/aio/content/examples/styleguide/src/05-02/app/app.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/05-02/app/app.component.html
rename to aio/content/examples/styleguide/src/05-02/app/app.component.html
diff --git a/aio/content/examples/style-guide/src/05-02/app/app.component.ts b/aio/content/examples/styleguide/src/05-02/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-02/app/app.component.ts
rename to aio/content/examples/styleguide/src/05-02/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/05-02/app/app.module.ts b/aio/content/examples/styleguide/src/05-02/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-02/app/app.module.ts
rename to aio/content/examples/styleguide/src/05-02/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/05-02/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-02/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-02/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/05-02/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
rename to aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html b/aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html
rename to aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html
diff --git a/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts
rename to aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts
diff --git a/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/index.ts b/aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/index.ts
rename to aio/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/index.ts
diff --git a/aio/content/examples/style-guide/src/05-02/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-02/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/05-02/app/index.ts b/aio/content/examples/styleguide/src/05-02/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-02/app/index.ts
rename to aio/content/examples/styleguide/src/05-02/app/index.ts
diff --git a/aio/content/examples/style-guide/src/05-03/app/app.component.avoid.html b/aio/content/examples/styleguide/src/05-03/app/app.component.avoid.html
similarity index 100%
rename from aio/content/examples/style-guide/src/05-03/app/app.component.avoid.html
rename to aio/content/examples/styleguide/src/05-03/app/app.component.avoid.html
diff --git a/aio/content/examples/style-guide/src/05-03/app/app.component.html b/aio/content/examples/styleguide/src/05-03/app/app.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/05-03/app/app.component.html
rename to aio/content/examples/styleguide/src/05-03/app/app.component.html
diff --git a/aio/content/examples/style-guide/src/05-03/app/app.component.ts b/aio/content/examples/styleguide/src/05-03/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-03/app/app.component.ts
rename to aio/content/examples/styleguide/src/05-03/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/05-03/app/app.module.ts b/aio/content/examples/styleguide/src/05-03/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-03/app/app.module.ts
rename to aio/content/examples/styleguide/src/05-03/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/05-03/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-03/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-03/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/05-03/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
rename to aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html b/aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html
rename to aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html
diff --git a/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts
rename to aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts
diff --git a/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/index.ts b/aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/index.ts
rename to aio/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/index.ts
diff --git a/aio/content/examples/style-guide/src/05-03/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-03/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/05-03/app/index.ts b/aio/content/examples/styleguide/src/05-03/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-03/app/index.ts
rename to aio/content/examples/styleguide/src/05-03/app/index.ts
diff --git a/aio/content/examples/style-guide/src/05-04/app/app.component.ts b/aio/content/examples/styleguide/src/05-04/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-04/app/app.component.ts
rename to aio/content/examples/styleguide/src/05-04/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/05-04/app/app.module.ts b/aio/content/examples/styleguide/src/05-04/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-04/app/app.module.ts
rename to aio/content/examples/styleguide/src/05-04/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.avoid.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.avoid.ts
rename to aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.css b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
similarity index 100%
rename from aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.css
rename to aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
diff --git a/aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.html
rename to aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
diff --git a/aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.ts
rename to aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts
diff --git a/aio/content/examples/style-guide/src/05-04/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-04/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/05-04/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/05-04/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-04/app/heroes/shared/hero.model.ts
rename to aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts
diff --git a/aio/content/examples/style-guide/src/05-04/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-04/app/heroes/shared/hero.service.ts
rename to aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts
diff --git a/aio/content/examples/style-guide/src/05-04/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-04/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/05-04/app/index.ts b/aio/content/examples/styleguide/src/05-04/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-04/app/index.ts
rename to aio/content/examples/styleguide/src/05-04/app/index.ts
diff --git a/aio/content/examples/style-guide/src/05-12/app/app.component.ts b/aio/content/examples/styleguide/src/05-12/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-12/app/app.component.ts
rename to aio/content/examples/styleguide/src/05-12/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/05-12/app/app.module.ts b/aio/content/examples/styleguide/src/05-12/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-12/app/app.module.ts
rename to aio/content/examples/styleguide/src/05-12/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/05-12/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-12/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-12/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/05-12/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts
rename to aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts
rename to aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts
diff --git a/aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/index.ts b/aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/index.ts
rename to aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/index.ts
diff --git a/aio/content/examples/style-guide/src/05-12/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-12/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/05-12/app/index.ts b/aio/content/examples/styleguide/src/05-12/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-12/app/index.ts
rename to aio/content/examples/styleguide/src/05-12/app/index.ts
diff --git a/aio/content/examples/style-guide/src/05-13/app/app.component.avoid.html b/aio/content/examples/styleguide/src/05-13/app/app.component.avoid.html
similarity index 100%
rename from aio/content/examples/style-guide/src/05-13/app/app.component.avoid.html
rename to aio/content/examples/styleguide/src/05-13/app/app.component.avoid.html
diff --git a/aio/content/examples/style-guide/src/05-13/app/app.component.html b/aio/content/examples/styleguide/src/05-13/app/app.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/05-13/app/app.component.html
rename to aio/content/examples/styleguide/src/05-13/app/app.component.html
diff --git a/aio/content/examples/style-guide/src/05-13/app/app.component.ts b/aio/content/examples/styleguide/src/05-13/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-13/app/app.component.ts
rename to aio/content/examples/styleguide/src/05-13/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/05-13/app/app.module.ts b/aio/content/examples/styleguide/src/05-13/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-13/app/app.module.ts
rename to aio/content/examples/styleguide/src/05-13/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/05-13/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-13/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/05-13/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts
rename to aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts
rename to aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts
diff --git a/aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/index.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/index.ts
rename to aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/index.ts
diff --git a/aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-highlight.directive.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-highlight.directive.ts
rename to aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts
diff --git a/aio/content/examples/style-guide/src/05-13/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-13/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/05-13/app/index.ts b/aio/content/examples/styleguide/src/05-13/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-13/app/index.ts
rename to aio/content/examples/styleguide/src/05-13/app/index.ts
diff --git a/aio/content/examples/style-guide/src/05-14/app/app.component.ts b/aio/content/examples/styleguide/src/05-14/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-14/app/app.component.ts
rename to aio/content/examples/styleguide/src/05-14/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/05-14/app/app.module.ts b/aio/content/examples/styleguide/src/05-14/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-14/app/app.module.ts
rename to aio/content/examples/styleguide/src/05-14/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/05-14/app/index.ts b/aio/content/examples/styleguide/src/05-14/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-14/app/index.ts
rename to aio/content/examples/styleguide/src/05-14/app/index.ts
diff --git a/aio/content/examples/style-guide/src/05-14/app/shared/index.ts b/aio/content/examples/styleguide/src/05-14/app/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-14/app/shared/index.ts
rename to aio/content/examples/styleguide/src/05-14/app/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/05-14/app/shared/toast/index.ts b/aio/content/examples/styleguide/src/05-14/app/shared/toast/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-14/app/shared/toast/index.ts
rename to aio/content/examples/styleguide/src/05-14/app/shared/toast/index.ts
diff --git a/aio/content/examples/style-guide/src/05-14/app/shared/toast/toast.component.avoid.ts b/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-14/app/shared/toast/toast.component.avoid.ts
rename to aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/05-14/app/shared/toast/toast.component.ts b/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-14/app/shared/toast/toast.component.ts
rename to aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts
diff --git a/aio/content/examples/style-guide/src/05-15/app/app.component.ts b/aio/content/examples/styleguide/src/05-15/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-15/app/app.component.ts
rename to aio/content/examples/styleguide/src/05-15/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/05-15/app/app.module.ts b/aio/content/examples/styleguide/src/05-15/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-15/app/app.module.ts
rename to aio/content/examples/styleguide/src/05-15/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts
rename to aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/hero-list.component.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/hero-list.component.ts
rename to aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts
diff --git a/aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/index.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/index.ts
rename to aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts
diff --git a/aio/content/examples/style-guide/src/05-15/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-15/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/05-15/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/05-15/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-15/app/heroes/shared/hero.model.ts
rename to aio/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts
diff --git a/aio/content/examples/style-guide/src/05-15/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-15/app/heroes/shared/hero.service.ts
rename to aio/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts
diff --git a/aio/content/examples/style-guide/src/05-15/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-15/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/05-15/app/index.ts b/aio/content/examples/styleguide/src/05-15/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-15/app/index.ts
rename to aio/content/examples/styleguide/src/05-15/app/index.ts
diff --git a/aio/content/examples/style-guide/src/05-16/app/app.component.avoid.html b/aio/content/examples/styleguide/src/05-16/app/app.component.avoid.html
similarity index 100%
rename from aio/content/examples/style-guide/src/05-16/app/app.component.avoid.html
rename to aio/content/examples/styleguide/src/05-16/app/app.component.avoid.html
diff --git a/aio/content/examples/style-guide/src/05-16/app/app.component.html b/aio/content/examples/styleguide/src/05-16/app/app.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/05-16/app/app.component.html
rename to aio/content/examples/styleguide/src/05-16/app/app.component.html
diff --git a/aio/content/examples/style-guide/src/05-16/app/app.component.ts b/aio/content/examples/styleguide/src/05-16/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-16/app/app.component.ts
rename to aio/content/examples/styleguide/src/05-16/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/05-16/app/app.module.ts b/aio/content/examples/styleguide/src/05-16/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-16/app/app.module.ts
rename to aio/content/examples/styleguide/src/05-16/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/05-16/app/heroes/hero.component.avoid.ts b/aio/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-16/app/heroes/hero.component.avoid.ts
rename to aio/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/05-16/app/heroes/hero.component.ts b/aio/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-16/app/heroes/hero.component.ts
rename to aio/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts
diff --git a/aio/content/examples/style-guide/src/05-16/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-16/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-16/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/05-16/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/05-16/app/index.ts b/aio/content/examples/styleguide/src/05-16/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-16/app/index.ts
rename to aio/content/examples/styleguide/src/05-16/app/index.ts
diff --git a/aio/content/examples/style-guide/src/05-17/app/app.component.ts b/aio/content/examples/styleguide/src/05-17/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-17/app/app.component.ts
rename to aio/content/examples/styleguide/src/05-17/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/05-17/app/app.module.ts b/aio/content/examples/styleguide/src/05-17/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-17/app/app.module.ts
rename to aio/content/examples/styleguide/src/05-17/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts
rename to aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/hero-list.component.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/hero-list.component.ts
rename to aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts
diff --git a/aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/index.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/index.ts
rename to aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts
diff --git a/aio/content/examples/style-guide/src/05-17/app/heroes/hero/hero.component.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-17/app/heroes/hero/hero.component.ts
rename to aio/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts
diff --git a/aio/content/examples/style-guide/src/05-17/app/heroes/hero/index.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-17/app/heroes/hero/index.ts
rename to aio/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts
diff --git a/aio/content/examples/style-guide/src/05-17/app/heroes/index.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-17/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/05-17/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/05-17/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-17/app/heroes/shared/hero.model.ts
rename to aio/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts
diff --git a/aio/content/examples/style-guide/src/05-17/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-17/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/05-17/app/index.ts b/aio/content/examples/styleguide/src/05-17/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/05-17/app/index.ts
rename to aio/content/examples/styleguide/src/05-17/app/index.ts
diff --git a/aio/content/examples/style-guide/src/06-01/app/app.component.html b/aio/content/examples/styleguide/src/06-01/app/app.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/06-01/app/app.component.html
rename to aio/content/examples/styleguide/src/06-01/app/app.component.html
diff --git a/aio/content/examples/style-guide/src/06-01/app/app.component.ts b/aio/content/examples/styleguide/src/06-01/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/06-01/app/app.component.ts
rename to aio/content/examples/styleguide/src/06-01/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/06-01/app/app.module.ts b/aio/content/examples/styleguide/src/06-01/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/06-01/app/app.module.ts
rename to aio/content/examples/styleguide/src/06-01/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/06-01/app/index.ts b/aio/content/examples/styleguide/src/06-01/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/06-01/app/index.ts
rename to aio/content/examples/styleguide/src/06-01/app/index.ts
diff --git a/aio/content/examples/style-guide/src/06-01/app/shared/highlight.directive.ts b/aio/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/06-01/app/shared/highlight.directive.ts
rename to aio/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts
diff --git a/aio/content/examples/style-guide/src/06-01/app/shared/index.ts b/aio/content/examples/styleguide/src/06-01/app/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/06-01/app/shared/index.ts
rename to aio/content/examples/styleguide/src/06-01/app/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/06-03/app/app.component.ts b/aio/content/examples/styleguide/src/06-03/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/06-03/app/app.component.ts
rename to aio/content/examples/styleguide/src/06-03/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/06-03/app/app.module.ts b/aio/content/examples/styleguide/src/06-03/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/06-03/app/app.module.ts
rename to aio/content/examples/styleguide/src/06-03/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/06-03/app/index.ts b/aio/content/examples/styleguide/src/06-03/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/06-03/app/index.ts
rename to aio/content/examples/styleguide/src/06-03/app/index.ts
diff --git a/aio/content/examples/style-guide/src/06-03/app/shared/index.ts b/aio/content/examples/styleguide/src/06-03/app/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/06-03/app/shared/index.ts
rename to aio/content/examples/styleguide/src/06-03/app/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/06-03/app/shared/validator.directive.ts b/aio/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/06-03/app/shared/validator.directive.ts
rename to aio/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts
diff --git a/aio/content/examples/style-guide/src/06-03/app/shared/validator2.directive.ts b/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts
similarity index 90%
rename from aio/content/examples/style-guide/src/06-03/app/shared/validator2.directive.ts
rename to aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts
index 7936a83cb1..05a0f9f07f 100644
--- a/aio/content/examples/style-guide/src/06-03/app/shared/validator2.directive.ts
+++ b/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts
@@ -4,7 +4,7 @@ import { Directive } from '@angular/core';
 @Directive({
   selector: '[tohValidator2]',
   host: {
-    'attr.role': 'button',
+    '[attr.role]': 'role',
     '(mouseenter)': 'onMouseEnter()'
   }
 })
diff --git a/aio/content/examples/style-guide/src/07-01/app/app.component.html b/aio/content/examples/styleguide/src/07-01/app/app.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/07-01/app/app.component.html
rename to aio/content/examples/styleguide/src/07-01/app/app.component.html
diff --git a/aio/content/examples/style-guide/src/07-01/app/app.component.ts b/aio/content/examples/styleguide/src/07-01/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-01/app/app.component.ts
rename to aio/content/examples/styleguide/src/07-01/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/07-01/app/app.module.ts b/aio/content/examples/styleguide/src/07-01/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-01/app/app.module.ts
rename to aio/content/examples/styleguide/src/07-01/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/07-01/app/heroes/index.ts b/aio/content/examples/styleguide/src/07-01/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-01/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/07-01/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/07-01/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-01/app/heroes/shared/hero.model.ts
rename to aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts
diff --git a/aio/content/examples/style-guide/src/07-01/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-01/app/heroes/shared/hero.service.ts
rename to aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts
diff --git a/aio/content/examples/style-guide/src/07-01/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-01/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/07-01/app/index.ts b/aio/content/examples/styleguide/src/07-01/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-01/app/index.ts
rename to aio/content/examples/styleguide/src/07-01/app/index.ts
diff --git a/aio/content/examples/style-guide/src/07-03/app/app.component.ts b/aio/content/examples/styleguide/src/07-03/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-03/app/app.component.ts
rename to aio/content/examples/styleguide/src/07-03/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/07-03/app/app.module.ts b/aio/content/examples/styleguide/src/07-03/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-03/app/app.module.ts
rename to aio/content/examples/styleguide/src/07-03/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/07-03/app/heroes/hero-list/hero-list.component.ts b/aio/content/examples/styleguide/src/07-03/app/heroes/hero-list/hero-list.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-03/app/heroes/hero-list/hero-list.component.ts
rename to aio/content/examples/styleguide/src/07-03/app/heroes/hero-list/hero-list.component.ts
diff --git a/aio/content/examples/style-guide/src/07-03/app/heroes/hero-list/index.ts b/aio/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-03/app/heroes/hero-list/index.ts
rename to aio/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts
diff --git a/aio/content/examples/style-guide/src/07-03/app/heroes/index.ts b/aio/content/examples/styleguide/src/07-03/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-03/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/07-03/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/07-03/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-03/app/heroes/shared/hero.model.ts
rename to aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts
diff --git a/aio/content/examples/style-guide/src/07-03/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-03/app/heroes/shared/hero.service.ts
rename to aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts
diff --git a/aio/content/examples/style-guide/src/07-03/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-03/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/07-03/app/index.ts b/aio/content/examples/styleguide/src/07-03/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-03/app/index.ts
rename to aio/content/examples/styleguide/src/07-03/app/index.ts
diff --git a/aio/content/examples/style-guide/src/07-04/app/app.component.ts b/aio/content/examples/styleguide/src/07-04/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-04/app/app.component.ts
rename to aio/content/examples/styleguide/src/07-04/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/07-04/app/app.module.ts b/aio/content/examples/styleguide/src/07-04/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-04/app/app.module.ts
rename to aio/content/examples/styleguide/src/07-04/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/07-04/app/heroes/index.ts b/aio/content/examples/styleguide/src/07-04/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-04/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/07-04/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts
rename to aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts
diff --git a/aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero-arena.service.ts b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero-arena.service.ts
rename to aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts
diff --git a/aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero.model.ts b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero.model.ts
rename to aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts
diff --git a/aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero.service.ts
rename to aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts
diff --git a/aio/content/examples/style-guide/src/07-04/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-04/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/07-04/app/index.ts b/aio/content/examples/styleguide/src/07-04/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/07-04/app/index.ts
rename to aio/content/examples/styleguide/src/07-04/app/index.ts
diff --git a/aio/content/examples/style-guide/src/09-01/app/app.component.ts b/aio/content/examples/styleguide/src/09-01/app/app.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/09-01/app/app.component.ts
rename to aio/content/examples/styleguide/src/09-01/app/app.component.ts
diff --git a/aio/content/examples/style-guide/src/09-01/app/app.module.ts b/aio/content/examples/styleguide/src/09-01/app/app.module.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/09-01/app/app.module.ts
rename to aio/content/examples/styleguide/src/09-01/app/app.module.ts
diff --git a/aio/content/examples/style-guide/src/09-01/app/heroes/index.ts b/aio/content/examples/styleguide/src/09-01/app/heroes/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/09-01/app/heroes/index.ts
rename to aio/content/examples/styleguide/src/09-01/app/heroes/index.ts
diff --git a/aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts
rename to aio/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts
diff --git a/aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts
rename to aio/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts
diff --git a/aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/index.ts b/aio/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/index.ts
rename to aio/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/index.ts
diff --git a/aio/content/examples/style-guide/src/09-01/app/heroes/shared/index.ts b/aio/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/09-01/app/heroes/shared/index.ts
rename to aio/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts
diff --git a/aio/content/examples/style-guide/src/09-01/app/index.ts b/aio/content/examples/styleguide/src/09-01/app/index.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/09-01/app/index.ts
rename to aio/content/examples/styleguide/src/09-01/app/index.ts
diff --git a/aio/content/examples/style-guide/src/app/app.component.html b/aio/content/examples/styleguide/src/app/app.component.html
similarity index 100%
rename from aio/content/examples/style-guide/src/app/app.component.html
rename to aio/content/examples/styleguide/src/app/app.component.html
diff --git a/aio/content/examples/styleguide/src/app/app.component.ts b/aio/content/examples/styleguide/src/app/app.component.ts
index 8b71f6ddc4..7556beb1ff 100644
--- a/aio/content/examples/styleguide/src/app/app.component.ts
+++ b/aio/content/examples/styleguide/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
+
 @Component({
   selector: 'my-app',
-  template: '<h1 id="output">My First Angular App</h1>'
+  templateUrl: './app.component.html'
 })
 export class AppComponent { }
-
diff --git a/aio/content/examples/styleguide/src/app/app.module.ts b/aio/content/examples/styleguide/src/app/app.module.ts
deleted file mode 100644
index 0a9ee6adf7..0000000000
--- a/aio/content/examples/styleguide/src/app/app.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/aio/content/examples/style-guide/src/app/app.routes.ts b/aio/content/examples/styleguide/src/app/app.routes.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/app/app.routes.ts
rename to aio/content/examples/styleguide/src/app/app.routes.ts
diff --git a/aio/content/examples/style-guide/src/app/hero-data.ts b/aio/content/examples/styleguide/src/app/hero-data.ts
similarity index 100%
rename from aio/content/examples/style-guide/src/app/hero-data.ts
rename to aio/content/examples/styleguide/src/app/hero-data.ts
diff --git a/aio/content/examples/styleguide/src/index.html b/aio/content/examples/styleguide/src/index.html
index 5cb8919509..188c2c26a1 100644
--- a/aio/content/examples/styleguide/src/index.html
+++ b/aio/content/examples/styleguide/src/index.html
@@ -1,9 +1,10 @@
-<!-- #docregion -->
 <!DOCTYPE html>
+<!-- #docregion -->
 <html>
   <head>
-    <title>Documentation Style</title>
     <base href="/">
+
+    <title>Style Guide Sample</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
@@ -15,11 +16,15 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
+    <script src="systemjs.custom.js"></script>
     <script>
       System.import('main.js').catch(function(err){ console.error(err); });
     </script>
   </head>
+
   <body>
-    <my-app></my-app>
+    <my-app>loading...</my-app>
   </body>
+
 </html>
+<!-- #enddocregion -->
diff --git a/aio/content/examples/styleguide/src/main.ts b/aio/content/examples/styleguide/src/main.ts
index 6b6532d428..5b4c98ba69 100644
--- a/aio/content/examples/styleguide/src/main.ts
+++ b/aio/content/examples/styleguide/src/main.ts
@@ -1,5 +1,99 @@
-// #docregion
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic }   from '@angular/platform-browser-dynamic';
+import { BrowserModule }            from '@angular/platform-browser';
+
+import { HttpModule }           from '@angular/http';
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+
+import { RouterModule } from '@angular/router';
+
+import { HashLocationStrategy,
+         LocationStrategy } from '@angular/common';
+
+import 'rxjs/add/operator/map';
+
+import { HeroData }     from './app/hero-data';
+import { AppComponent } from './app/app.component';
+
+import * as s0101 from './01-01/app/app.module';
+import * as s0205 from './02-05/app/app.module';
+import * as s0207 from './02-07/app/app.module';
+import * as s0208 from './02-08/app/app.module';
+import * as s0301 from './03-01/app/app.module';
+import * as s0302 from './03-02/app/app.module';
+import * as s0303 from './03-03/app/app.module';
+import * as s0304 from './03-04/app/app.module';
+import * as s0306 from './03-06/app/app.module';
+import * as s0408 from './04-08/app/app.module';
+import * as s0410 from './04-10/app/app.module';
+import * as s0411 from './04-11/app/app.module';
+import * as s0412 from './04-12/app/app.module';
+import * as s0502 from './05-02/app/app.module';
+import * as s0503 from './05-03/app/app.module';
+import * as s0504 from './05-04/app/app.module';
+import * as s0512 from './05-12/app/app.module';
+import * as s0513 from './05-13/app/app.module';
+import * as s0514 from './05-14/app/app.module';
+import * as s0515 from './05-15/app/app.module';
+import * as s0516 from './05-16/app/app.module';
+import * as s0517 from './05-17/app/app.module';
+import * as s0601 from './06-01/app/app.module';
+import * as s0603 from './06-03/app/app.module';
+import * as s0701 from './07-01/app/app.module';
+import * as s0703 from './07-03/app/app.module';
+import * as s0704 from './07-04/app/app.module';
+import * as s0901 from './09-01/app/app.module';
+
+///////////////////
+const moduleMetadata = {
+  imports: [
+    BrowserModule,
+    HttpModule,
+    InMemoryWebApiModule.forRoot(HeroData),
+
+    s0101.AppModule,
+    s0205.AppModule,
+    s0207.AppModule,
+    s0208.AppModule,
+    s0301.AppModule,
+    s0302.AppModule,
+    s0303.AppModule,
+    s0304.AppModule,
+    s0306.AppModule,
+    s0408.AppModule,
+    s0410.AppModule,
+    s0411.AppModule,
+    s0412.AppModule,
+    s0502.AppModule,
+    s0503.AppModule,
+    s0504.AppModule,
+    s0512.AppModule,
+    s0513.AppModule,
+    s0514.AppModule,
+    s0515.AppModule,
+    s0516.AppModule,
+    s0517.AppModule,
+    s0601.AppModule,
+    s0603.AppModule,
+    s0701.AppModule,
+    s0703.AppModule,
+    s0704.AppModule,
+    s0901.AppModule,
+
+    RouterModule.forRoot([
+      { path: '', redirectTo: '/01-01', pathMatch: 'full' }
+    ], {/* enableTracing: true */}),
+  ],
+  providers: [
+    { provide: LocationStrategy, useClass: HashLocationStrategy }
+  ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+};
+
+@NgModule(moduleMetadata)
+class MainModule { }
+
+platformBrowserDynamic().bootstrapModule(MainModule);
+
 
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/style-guide/src/systemjs.custom.js b/aio/content/examples/styleguide/src/systemjs.custom.js
similarity index 100%
rename from aio/content/examples/style-guide/src/systemjs.custom.js
rename to aio/content/examples/styleguide/src/systemjs.custom.js
diff --git a/aio/content/examples/styleguide/zipconfig.json b/aio/content/examples/styleguide/zipconfig.json
deleted file mode 100644
index 74ca947f2b..0000000000
--- a/aio/content/examples/styleguide/zipconfig.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "zipRegion": "class",
-  "files": ["**/*.*", "!**/*zipconfig.json"]
-}
\ No newline at end of file
diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html
index 760fa3a367..73f1186035 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.html
+++ b/aio/content/examples/template-syntax/src/app/app.component.html
@@ -36,6 +36,7 @@
 <a href="#inputs-and-outputs">Inputs and outputs</a><br>
 <a href="#pipes">Pipes</a><br>
 <a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
+<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
 <a href="#enums">Enums</a><br>
 
 <!-- Interpolation and expressions -->
@@ -160,7 +161,7 @@
   <!-- #docregion property-binding-syntax-1 -->
   <img [src]="heroImageUrl">
   <hero-detail [hero]="currentHero"></hero-detail>
-  <div [ngClass]="{special: isSpecial}"></div>
+  <div [ngClass]="{'special': isSpecial}"></div>
   <!-- #enddocregion property-binding-syntax-1 -->
 </div>
 <br><br>
@@ -495,7 +496,7 @@ bindon-ngModel
 <div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
 
 <div class="bad curly special">Bad curly special</div>
-<div [ngClass]="{bad:false, curly:true, special:true}">Curly special</div>
+<div [ngClass]="{'bad':false, 'curly':true, 'special':true}">Curly special</div>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -803,6 +804,21 @@ The null hero's name is {{nullHero && nullHero.name}}
   <!-- #enddocregion safe-6 -->
 </div>
 
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr><h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
+
+<div>
+  <!-- #docregion non-null-assertion-1 -->
+  <!--No hero, no text -->
+  <div *ngIf="hero">
+    The hero's name is {{hero!.name}}
+  </div>
+  <!-- #enddocregion non-null-assertion-1 -->
+</div>
+
 <a class="to-toc" href="#toc">top</a>
 
 <!-- TODO: discuss this in the Style binding section -->
diff --git a/aio/content/examples/template-syntax/src/app/app.component.ts b/aio/content/examples/template-syntax/src/app/app.component.ts
index f0fa2a2d23..2e474dd04a 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.ts
+++ b/aio/content/examples/template-syntax/src/app/app.component.ts
@@ -111,7 +111,7 @@ export class AppComponent implements AfterViewInit, OnInit {
   }
 
   onSave(event: KeyboardEvent) {
-    let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerText : '';
+    let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).textContent : '';
     this.alert('Saved.' + evtMsg);
     if (event) { event.stopPropagation(); }
   }
@@ -127,6 +127,7 @@ export class AppComponent implements AfterViewInit, OnInit {
   resetHeroes() {
     this.heroes = Hero.heroes.map(hero => hero.clone());
     this.currentHero = this.heroes[0];
+    this.hero = this.currentHero;
     this.heroesWithTrackByCountReset = 0;
   }
 
@@ -139,9 +140,9 @@ export class AppComponent implements AfterViewInit, OnInit {
   setCurrentClasses() {
     // CSS classes: added/removed per current state of component properties
     this.currentClasses =  {
-      saveable: this.canSave,
-      modified: !this.isUnchanged,
-      special:  this.isSpecial
+      'saveable': this.canSave,
+      'modified': !this.isUnchanged,
+      'special':  this.isSpecial
     };
   }
   // #enddocregion setClasses
@@ -172,8 +173,8 @@ function trackChanges(views: QueryList<ElementRef>, changed: () => void) {
   let oldRefs = views.toArray();
   views.changes.subscribe((changes: QueryList<ElementRef>) => {
       const changedRefs = changes.toArray();
-      // Is every changed ElemRef the same as old and in the same position
-      const isSame = oldRefs.every((v, i) => v === changedRefs[i]);
+      // Check if every changed Element is the same as old and in the same position
+      const isSame = oldRefs.every((v, i) => v.nativeElement === changedRefs[i].nativeElement);
       if (!isSame) {
         oldRefs = changedRefs;
         // wait a tick because called after views are constructed
diff --git a/aio/content/examples/template-syntax/src/app/click.directive.ts b/aio/content/examples/template-syntax/src/app/click.directive.ts
index 09757bfeaf..22b63955ea 100644
--- a/aio/content/examples/template-syntax/src/app/click.directive.ts
+++ b/aio/content/examples/template-syntax/src/app/click.directive.ts
@@ -1,4 +1,4 @@
-/* tslint:disable use-output-property-decorator */
+/* tslint:disable use-output-property-decorator directive-class-suffix */
 // #docplaster
 import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
 
diff --git a/aio/content/examples/testing/.gitignore b/aio/content/examples/testing/.gitignore
deleted file mode 100644
index 5374943421..0000000000
--- a/aio/content/examples/testing/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-!src/browser-test-shim.js
diff --git a/aio/content/examples/testing/src/app/bag/bag.no-testbed.spec.ts b/aio/content/examples/testing/src/app/bag/bag.no-testbed.spec.ts
index f29672ecf6..4cb60a8d50 100644
--- a/aio/content/examples/testing/src/app/bag/bag.no-testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/bag/bag.no-testbed.spec.ts
@@ -3,7 +3,7 @@ import { DependentService, FancyService } from './bag';
 
 ///////// Fakes /////////
 export class FakeFancyService extends FancyService {
-  value: string = 'faked value';
+  value = 'faked value';
 }
 ////////////////////////
 // #docregion FancyService
diff --git a/aio/content/examples/testing/src/app/bag/bag.spec.ts b/aio/content/examples/testing/src/app/bag/bag.spec.ts
index d6fea7ca94..503ae96c51 100644
--- a/aio/content/examples/testing/src/app/bag/bag.spec.ts
+++ b/aio/content/examples/testing/src/app/bag/bag.spec.ts
@@ -677,5 +677,5 @@ class FakeGrandchildComponent { }
 
 @Injectable()
 class FakeFancyService extends FancyService {
-  value: string = 'faked value';
+  value = 'faked value';
 }
diff --git a/aio/content/examples/testing/src/app/bag/bag.ts b/aio/content/examples/testing/src/app/bag/bag.ts
index cbf1c21136..526b793b76 100644
--- a/aio/content/examples/testing/src/app/bag/bag.ts
+++ b/aio/content/examples/testing/src/app/bag/bag.ts
@@ -20,7 +20,7 @@ export class Hero {
 // #docregion FancyService
 @Injectable()
 export class FancyService {
-  protected value: string = 'real value';
+  protected value = 'real value';
 
   getValue() { return this.value; }
   setValue(value: string) { this.value = value; }
@@ -163,7 +163,7 @@ export class InputComponent {
 //   valueChange: EventEmitter<any> = new EventEmitter();
 // }
 
-// As the style-guide recommends
+// As the styleguide recommends
 @Directive({ selector: 'input[value]' })
 export class InputValueBinderDirective {
   @HostBinding()
@@ -273,7 +273,7 @@ export class InnerCompWithExternalTemplateComponent { }
 
 @Component({
   selector: 'bad-template-comp',
-  templateUrl: './non-existant.html'
+  templateUrl: './non-existent.html'
 })
 export class BadTemplateUrlComponent { }
 
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
index 422dae6f77..9dffe6f9de 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
@@ -15,7 +15,7 @@ describe('HeroDetailComponent - no TestBed', () => {
   beforeEach((done: any) => {
     expectedHero = new Hero(42, 'Bubba');
     activatedRoute = new ActivatedRouteStub();
-    activatedRoute.testParams = { id: expectedHero.id };
+    activatedRoute.testParamMap = { id: expectedHero.id };
 
     router = jasmine.createSpyObj('router', ['navigate']);
 
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
index 80b6450ac5..050fe46eec 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
@@ -53,7 +53,7 @@ function overrideSetup() {
   // #enddocregion hds-spy
 
   // the `id` value is irrelevant because ignored by service stub
-  beforeEach(() => activatedRoute.testParams = { id: 99999 } );
+  beforeEach(() => activatedRoute.testParamMap = { id: 99999 } );
 
   // #docregion setup-override
   beforeEach( async(() => {
@@ -158,7 +158,7 @@ function heroModuleSetup() {
 
     beforeEach( async(() => {
       expectedHero = firstHero;
-      activatedRoute.testParams = { id: expectedHero.id };
+      activatedRoute.testParamMap = { id: expectedHero.id };
       createComponent();
     }));
 
@@ -227,9 +227,9 @@ function heroModuleSetup() {
   // #enddocregion route-no-id
 
   // #docregion route-bad-id
-  describe('when navigate to non-existant hero id', () => {
+  describe('when navigate to non-existent hero id', () => {
     beforeEach( async(() => {
-      activatedRoute.testParams = { id: 99999 };
+      activatedRoute.testParamMap = { id: 99999 };
       createComponent();
     }));
 
@@ -279,7 +279,7 @@ function formsModuleSetup() {
 
   it('should display 1st hero\'s name', fakeAsync(() => {
     const expectedHero = firstHero;
-    activatedRoute.testParams = { id: expectedHero.id };
+    activatedRoute.testParamMap = { id: expectedHero.id };
     createComponent().then(() => {
       expect(page.nameDisplay.textContent).toBe(expectedHero.name);
     });
@@ -307,7 +307,7 @@ function sharedModuleSetup() {
 
   it('should display 1st hero\'s name', fakeAsync(() => {
     const expectedHero = firstHero;
-    activatedRoute.testParams = { id: expectedHero.id };
+    activatedRoute.testParamMap = { id: expectedHero.id };
     createComponent().then(() => {
       expect(page.nameDisplay.textContent).toBe(expectedHero.name);
     });
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
index 25f13b0cd5..d989badbf3 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
@@ -29,7 +29,7 @@ export class HeroDetailComponent implements OnInit {
   // #docregion ng-on-init
   ngOnInit(): void {
     // get hero when `id` param changes
-    this.route.params.subscribe(p => this.getHero(p && p['id']));
+    this.route.paramMap.subscribe(p => this.getHero(p.has('id') && p.get('id')));
   }
   // #enddocregion ng-on-init
 
diff --git a/aio/content/examples/testing/src/app/model/test-heroes.ts b/aio/content/examples/testing/src/app/model/test-heroes.ts
index d40ce5d564..2dc0f92502 100644
--- a/aio/content/examples/testing/src/app/model/test-heroes.ts
+++ b/aio/content/examples/testing/src/app/model/test-heroes.ts
@@ -1,7 +1,7 @@
 // #docregion
 import { Hero } from './hero';
 
-export var HEROES: Hero[] = [
+export const HEROES: Hero[] = [
   new Hero(11, 'Mr. Nice'),
   new Hero(12, 'Narco'),
   new Hero(13, 'Bombasto'),
diff --git a/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts b/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts
index 79a865cc44..02e1484df4 100644
--- a/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts
+++ b/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts
@@ -5,7 +5,7 @@ export { HeroService } from '../hero.service';
 import { Hero }        from '../hero';
 import { HeroService } from '../hero.service';
 
-export var HEROES: Hero[] = [
+export const HEROES: Hero[] = [
   new Hero(41, 'Bob'),
   new Hero(42, 'Carol'),
   new Hero(43, 'Ted'),
diff --git a/aio/content/examples/testing/src/testing/router-stubs.ts b/aio/content/examples/testing/src/testing/router-stubs.ts
index 75a2858f65..880302c7be 100644
--- a/aio/content/examples/testing/src/testing/router-stubs.ts
+++ b/aio/content/examples/testing/src/testing/router-stubs.ts
@@ -30,28 +30,29 @@ export class RouterStub {
 }
 
 
-// Only implements params and part of snapshot.params
+// Only implements params and part of snapshot.paramMap
 // #docregion activated-route-stub
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { convertToParamMap, ParamMap } from '@angular/router';
 
 @Injectable()
 export class ActivatedRouteStub {
 
-  // ActivatedRoute.params is Observable
-  private subject = new BehaviorSubject(this.testParams);
-  params = this.subject.asObservable();
+  // ActivatedRoute.paramMap is Observable
+  private subject = new BehaviorSubject(convertToParamMap(this.testParamMap));
+  paramMap = this.subject.asObservable();
 
   // Test parameters
-  private _testParams: {};
-  get testParams() { return this._testParams; }
-  set testParams(params: {}) {
-    this._testParams = params;
-    this.subject.next(params);
+  private _testParamMap: ParamMap;
+  get testParamMap() { return this._testParamMap; }
+  set testParamMap(params: {}) {
+    this._testParamMap = convertToParamMap(params);
+    this.subject.next(this._testParamMap);
   }
 
-  // ActivatedRoute.snapshot.params
+  // ActivatedRoute.snapshot.paramMap
   get snapshot() {
-    return { params: this.testParams };
+    return { paramMap: this.testParamMap };
   }
 }
 // #enddocregion activated-route-stub
diff --git a/aio/content/examples/toh-1/dart-snippets/app_component_snippets_pt1.dart b/aio/content/examples/toh-1/dart-snippets/app_component_snippets_pt1.dart
deleted file mode 100644
index 3bfa89762d..0000000000
--- a/aio/content/examples/toh-1/dart-snippets/app_component_snippets_pt1.dart
+++ /dev/null
@@ -1,37 +0,0 @@
-// #docregion show-hero
-template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
-// #enddocregion show-hero
-
-// #docregion show-hero-2
-template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
-// #enddocregion show-hero-2
-
-// #docregion show-hero-properties
-template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'
-// #enddocregion show-hero-properties
-
-// #docregion multi-line-strings
-template: '''
-  <h1>{{title}}</h1>
-  <h2>{{hero.name}} details!</h2>
-  <div><label>id: </label>{{hero.id}}</div>
-  <div><label>name: </label>{{hero.name}}</div>'''
-// #enddocregion multi-line-strings
-
-// #docregion editing-Hero
-template: '''
-  <h1>{{title}}</h1>
-  <h2>{{hero.name}} details!</h2>
-  <div><label>id: </label>{{hero.id}}</div>
-  <div>
-    <label>name: </label>
-    <input value="{{hero.name}}" placeholder="name">
-  </div>'''
-// #enddocregion editing-Hero
-
-// #docregion app-component-1
-class AppComponent {
-  String title = 'Tour of Heroes';
-  var hero = 'Windstorm';
-}
-// #enddocregion app-component-1
diff --git a/aio/content/examples/toh-2/dart-snippets/app_component_snippets_pt2.dart b/aio/content/examples/toh-2/dart-snippets/app_component_snippets_pt2.dart
deleted file mode 100644
index 9f805c5bc5..0000000000
--- a/aio/content/examples/toh-2/dart-snippets/app_component_snippets_pt2.dart
+++ /dev/null
@@ -1,69 +0,0 @@
-// #docregion ng-for
-<li *ngFor="let hero of heroes">
-  <span class="badge">{{hero.id}}</span> {{hero.name}}
-</li>
-// #enddocregion ng-for
-
-// #docregion heroes-styled
-<h2>My Heroes</h2>
-<ul class="heroes">
-  <li *ngFor="let hero of heroes">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
-  </li>
-</ul>
-// #enddocregion heroes-styled
-
-// #docregion selectedHero-click
-<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
-  <span class="badge">{{hero.id}}</span> {{hero.name}}
-</li>
-// #enddocregion selectedHero-click
-
-// #docregion selectedHero-details
-<h2>{{selectedHero.name}} details!</h2>
-<div><label>id: </label>{{selectedHero.id}}</div>
-<div>
-    <label>name: </label>
-    <input [(ngModel)]="selectedHero.name" placeholder="name">
-</div>
-// #enddocregion selectedHero-details
-
-// #docregion ng-if
-<div *ngIf="selectedHero != null">
-  <h2>{{selectedHero.name}} details!</h2>
-  <div><label>id: </label>{{selectedHero.id}}</div>
-  <div>
-    <label>name: </label>
-    <input [(ngModel)]="selectedHero.name" placeholder="name">
-  </div>
-</div>
-// #enddocregion ng-if
-
-// #docregion hero-array-1
-final List<Hero> heroes = mockHeroes;
-// #enddocregion hero-array-1
-
-// #docregion heroes-template-1
-<h2>My Heroes</h2>
-<ul class="heroes">
-  <li>
-    <!-- each hero goes here -->
-  </li>
-</ul>
-// #enddocregion heroes-template-1
-
-// #docregion heroes-ngfor-1
-<li *ngFor="let hero of heroes">
-// #enddocregion heroes-ngfor-1
-
-// #docregion class-selected-1
-[class.selected]="hero == selectedHero"
-// #enddocregion class-selected-1
-
-// #docregion class-selected-2
-<li *ngFor="let hero of heroes"
-  [class.selected]="hero == selectedHero"
-  (click)="onSelect(hero)">
-  <span class="badge">{{hero.id}}</span> {{hero.name}}
-</li>
-// #enddocregion class-selected-2
diff --git a/aio/content/examples/toh-4/src/app/mock-heroes.ts b/aio/content/examples/toh-4/src/app/mock-heroes.ts
deleted file mode 100644
index 6f7c5d83a0..0000000000
--- a/aio/content/examples/toh-4/src/app/mock-heroes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Hero } from './hero';
-
-export const 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/aio/content/examples/toh-5/src/app/mock-heroes.ts b/aio/content/examples/toh-5/src/app/mock-heroes.ts
deleted file mode 100644
index 69afde3d34..0000000000
--- a/aio/content/examples/toh-5/src/app/mock-heroes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-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/aio/content/examples/toh-6/.gitignore b/aio/content/examples/toh-6/.gitignore
deleted file mode 100644
index 804879d44a..0000000000
--- a/aio/content/examples/toh-6/.gitignore
+++ /dev/null
@@ -1,8 +0,0 @@
-aot/**/*.ts
-**/*.ngfactory.ts
-**/*.ngsummary.json
-**/*.metadata.json
-**/*.js
-dist
-!app/tsconfig.json
-!rollup-config.js
diff --git a/aio/content/examples/toh-6/aot/styles.css b/aio/content/examples/toh-6/aot/styles.css
deleted file mode 100644
index d81835d0cd..0000000000
--- a/aio/content/examples/toh-6/aot/styles.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/* #docregion , quickstart, toh */
-/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-/* #enddocregion quickstart */
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-/* #enddocregion toh */
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* #docregion toh */
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}
diff --git a/aio/content/examples/toh-6/src/app/in-memory-data.service.ts b/aio/content/examples/toh-6/src/app/in-memory-data.service.ts
deleted file mode 100644
index c915955e22..0000000000
--- a/aio/content/examples/toh-6/src/app/in-memory-data.service.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion , init
-import { InMemoryDbService } from 'angular-in-memory-web-api';
-export class InMemoryDataService implements InMemoryDbService {
-  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/aio/content/examples/toh-1/app/app.component.1.ts b/aio/content/examples/toh-pt1/app/app.component.1.ts
similarity index 100%
rename from aio/content/examples/toh-1/app/app.component.1.ts
rename to aio/content/examples/toh-pt1/app/app.component.1.ts
diff --git a/aio/content/examples/toh-1/e2e-spec.ts b/aio/content/examples/toh-pt1/e2e-spec.ts
similarity index 97%
rename from aio/content/examples/toh-1/e2e-spec.ts
rename to aio/content/examples/toh-pt1/e2e-spec.ts
index 75f99788a6..b684a358fd 100644
--- a/aio/content/examples/toh-1/e2e-spec.ts
+++ b/aio/content/examples/toh-pt1/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';
diff --git a/aio/content/examples/style-guide/example-config.json b/aio/content/examples/toh-pt1/example-config.json
similarity index 100%
rename from aio/content/examples/style-guide/example-config.json
rename to aio/content/examples/toh-pt1/example-config.json
diff --git a/aio/content/examples/toh-1/plnkr.json b/aio/content/examples/toh-pt1/plnkr.json
similarity index 100%
rename from aio/content/examples/toh-1/plnkr.json
rename to aio/content/examples/toh-pt1/plnkr.json
diff --git a/aio/content/examples/toh-1/src/app/app.component.ts b/aio/content/examples/toh-pt1/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/toh-1/src/app/app.component.ts
rename to aio/content/examples/toh-pt1/src/app/app.component.ts
diff --git a/aio/content/examples/toh-1/src/app/app.module.ts b/aio/content/examples/toh-pt1/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/toh-1/src/app/app.module.ts
rename to aio/content/examples/toh-pt1/src/app/app.module.ts
diff --git a/aio/content/examples/toh-1/src/index.html b/aio/content/examples/toh-pt1/src/index.html
similarity index 100%
rename from aio/content/examples/toh-1/src/index.html
rename to aio/content/examples/toh-pt1/src/index.html
diff --git a/aio/content/examples/toh-1/src/main.ts b/aio/content/examples/toh-pt1/src/main.ts
similarity index 100%
rename from aio/content/examples/toh-1/src/main.ts
rename to aio/content/examples/toh-pt1/src/main.ts
diff --git a/aio/content/examples/toh-2/e2e-spec.ts b/aio/content/examples/toh-pt2/e2e-spec.ts
similarity index 98%
rename from aio/content/examples/toh-2/e2e-spec.ts
rename to aio/content/examples/toh-pt2/e2e-spec.ts
index 34f9fba573..53474d98b3 100644
--- a/aio/content/examples/toh-2/e2e-spec.ts
+++ b/aio/content/examples/toh-pt2/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';
diff --git a/aio/content/examples/toh-1/example-config.json b/aio/content/examples/toh-pt2/example-config.json
similarity index 100%
rename from aio/content/examples/toh-1/example-config.json
rename to aio/content/examples/toh-pt2/example-config.json
diff --git a/aio/content/examples/toh-2/plnkr.json b/aio/content/examples/toh-pt2/plnkr.json
similarity index 100%
rename from aio/content/examples/toh-2/plnkr.json
rename to aio/content/examples/toh-pt2/plnkr.json
diff --git a/aio/content/examples/toh-2/src/app/app.component.1.html b/aio/content/examples/toh-pt2/src/app/app.component.1.html
similarity index 100%
rename from aio/content/examples/toh-2/src/app/app.component.1.html
rename to aio/content/examples/toh-pt2/src/app/app.component.1.html
diff --git a/aio/content/examples/toh-2/src/app/app.component.ts b/aio/content/examples/toh-pt2/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/toh-2/src/app/app.component.ts
rename to aio/content/examples/toh-pt2/src/app/app.component.ts
diff --git a/aio/content/examples/toh-2/src/app/app.module.ts b/aio/content/examples/toh-pt2/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/toh-2/src/app/app.module.ts
rename to aio/content/examples/toh-pt2/src/app/app.module.ts
diff --git a/aio/content/examples/toh-2/src/index.html b/aio/content/examples/toh-pt2/src/index.html
similarity index 100%
rename from aio/content/examples/toh-2/src/index.html
rename to aio/content/examples/toh-pt2/src/index.html
diff --git a/aio/content/examples/toh-2/src/main.ts b/aio/content/examples/toh-pt2/src/main.ts
similarity index 100%
rename from aio/content/examples/toh-2/src/main.ts
rename to aio/content/examples/toh-pt2/src/main.ts
diff --git a/aio/content/examples/toh-3/app/app.component.1.html b/aio/content/examples/toh-pt3/app/app.component.1.html
similarity index 100%
rename from aio/content/examples/toh-3/app/app.component.1.html
rename to aio/content/examples/toh-pt3/app/app.component.1.html
diff --git a/aio/content/examples/toh-3/app/hero-detail.component.1.ts b/aio/content/examples/toh-pt3/app/hero-detail.component.1.ts
similarity index 100%
rename from aio/content/examples/toh-3/app/hero-detail.component.1.ts
rename to aio/content/examples/toh-pt3/app/hero-detail.component.1.ts
diff --git a/aio/content/examples/toh-3/e2e-spec.ts b/aio/content/examples/toh-pt3/e2e-spec.ts
similarity index 98%
rename from aio/content/examples/toh-3/e2e-spec.ts
rename to aio/content/examples/toh-pt3/e2e-spec.ts
index 842716c5fc..2699ac8ccd 100644
--- a/aio/content/examples/toh-3/e2e-spec.ts
+++ b/aio/content/examples/toh-pt3/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';
diff --git a/aio/content/examples/toh-2/example-config.json b/aio/content/examples/toh-pt3/example-config.json
similarity index 100%
rename from aio/content/examples/toh-2/example-config.json
rename to aio/content/examples/toh-pt3/example-config.json
diff --git a/aio/content/examples/toh-3/plnkr.json b/aio/content/examples/toh-pt3/plnkr.json
similarity index 100%
rename from aio/content/examples/toh-3/plnkr.json
rename to aio/content/examples/toh-pt3/plnkr.json
diff --git a/aio/content/examples/toh-3/src/app/app.component.ts b/aio/content/examples/toh-pt3/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/toh-3/src/app/app.component.ts
rename to aio/content/examples/toh-pt3/src/app/app.component.ts
diff --git a/aio/content/examples/toh-3/src/app/app.module.ts b/aio/content/examples/toh-pt3/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/toh-3/src/app/app.module.ts
rename to aio/content/examples/toh-pt3/src/app/app.module.ts
diff --git a/aio/content/examples/toh-3/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt3/src/app/hero-detail.component.ts
similarity index 100%
rename from aio/content/examples/toh-3/src/app/hero-detail.component.ts
rename to aio/content/examples/toh-pt3/src/app/hero-detail.component.ts
diff --git a/aio/content/examples/toh-3/src/app/hero.ts b/aio/content/examples/toh-pt3/src/app/hero.ts
similarity index 100%
rename from aio/content/examples/toh-3/src/app/hero.ts
rename to aio/content/examples/toh-pt3/src/app/hero.ts
diff --git a/aio/content/examples/toh-3/src/index.html b/aio/content/examples/toh-pt3/src/index.html
similarity index 100%
rename from aio/content/examples/toh-3/src/index.html
rename to aio/content/examples/toh-pt3/src/index.html
diff --git a/aio/content/examples/toh-3/src/main.ts b/aio/content/examples/toh-pt3/src/main.ts
similarity index 100%
rename from aio/content/examples/toh-3/src/main.ts
rename to aio/content/examples/toh-pt3/src/main.ts
diff --git a/aio/content/examples/toh-4/e2e-spec.ts b/aio/content/examples/toh-pt4/e2e-spec.ts
similarity index 98%
rename from aio/content/examples/toh-4/e2e-spec.ts
rename to aio/content/examples/toh-pt4/e2e-spec.ts
index d6a223dd12..3a008d27f4 100644
--- a/aio/content/examples/toh-4/e2e-spec.ts
+++ b/aio/content/examples/toh-pt4/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';
diff --git a/aio/content/examples/toh-3/example-config.json b/aio/content/examples/toh-pt4/example-config.json
similarity index 100%
rename from aio/content/examples/toh-3/example-config.json
rename to aio/content/examples/toh-pt4/example-config.json
diff --git a/aio/content/examples/toh-4/plnkr.json b/aio/content/examples/toh-pt4/plnkr.json
similarity index 100%
rename from aio/content/examples/toh-4/plnkr.json
rename to aio/content/examples/toh-pt4/plnkr.json
diff --git a/aio/content/examples/toh-4/src/app/app.component.1.ts b/aio/content/examples/toh-pt4/src/app/app.component.1.ts
similarity index 100%
rename from aio/content/examples/toh-4/src/app/app.component.1.ts
rename to aio/content/examples/toh-pt4/src/app/app.component.1.ts
diff --git a/aio/content/examples/toh-4/src/app/app.component.ts b/aio/content/examples/toh-pt4/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/toh-4/src/app/app.component.ts
rename to aio/content/examples/toh-pt4/src/app/app.component.ts
diff --git a/aio/content/examples/toh-4/src/app/app.module.ts b/aio/content/examples/toh-pt4/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/toh-4/src/app/app.module.ts
rename to aio/content/examples/toh-pt4/src/app/app.module.ts
diff --git a/aio/content/examples/toh-4/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt4/src/app/hero-detail.component.ts
similarity index 100%
rename from aio/content/examples/toh-4/src/app/hero-detail.component.ts
rename to aio/content/examples/toh-pt4/src/app/hero-detail.component.ts
diff --git a/aio/content/examples/toh-4/src/app/hero.service.1.ts b/aio/content/examples/toh-pt4/src/app/hero.service.1.ts
similarity index 100%
rename from aio/content/examples/toh-4/src/app/hero.service.1.ts
rename to aio/content/examples/toh-pt4/src/app/hero.service.1.ts
diff --git a/aio/content/examples/toh-4/src/app/hero.service.2.ts b/aio/content/examples/toh-pt4/src/app/hero.service.2.ts
similarity index 100%
rename from aio/content/examples/toh-4/src/app/hero.service.2.ts
rename to aio/content/examples/toh-pt4/src/app/hero.service.2.ts
diff --git a/aio/content/examples/toh-4/src/app/hero.service.ts b/aio/content/examples/toh-pt4/src/app/hero.service.ts
similarity index 100%
rename from aio/content/examples/toh-4/src/app/hero.service.ts
rename to aio/content/examples/toh-pt4/src/app/hero.service.ts
diff --git a/aio/content/examples/toh-4/src/app/hero.ts b/aio/content/examples/toh-pt4/src/app/hero.ts
similarity index 100%
rename from aio/content/examples/toh-4/src/app/hero.ts
rename to aio/content/examples/toh-pt4/src/app/hero.ts
diff --git a/aio/content/examples/toh-pt4/src/app/mock-heroes.ts b/aio/content/examples/toh-pt4/src/app/mock-heroes.ts
new file mode 100644
index 0000000000..1771a7103b
--- /dev/null
+++ b/aio/content/examples/toh-pt4/src/app/mock-heroes.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Hero } from './hero';
+
+export const 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/aio/content/examples/toh-4/src/index.html b/aio/content/examples/toh-pt4/src/index.html
similarity index 100%
rename from aio/content/examples/toh-4/src/index.html
rename to aio/content/examples/toh-pt4/src/index.html
diff --git a/aio/content/examples/toh-4/src/main.1.ts b/aio/content/examples/toh-pt4/src/main.1.ts
similarity index 100%
rename from aio/content/examples/toh-4/src/main.1.ts
rename to aio/content/examples/toh-pt4/src/main.1.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/main.ts b/aio/content/examples/toh-pt4/src/main.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/main.ts
rename to aio/content/examples/toh-pt4/src/main.ts
diff --git a/aio/content/examples/toh-5/e2e-spec.ts b/aio/content/examples/toh-pt5/e2e-spec.ts
similarity index 100%
rename from aio/content/examples/toh-5/e2e-spec.ts
rename to aio/content/examples/toh-pt5/e2e-spec.ts
diff --git a/aio/content/examples/toh-4/example-config.json b/aio/content/examples/toh-pt5/example-config.json
similarity index 100%
rename from aio/content/examples/toh-4/example-config.json
rename to aio/content/examples/toh-pt5/example-config.json
diff --git a/aio/content/examples/toh-5/plnkr.json b/aio/content/examples/toh-pt5/plnkr.json
similarity index 100%
rename from aio/content/examples/toh-5/plnkr.json
rename to aio/content/examples/toh-pt5/plnkr.json
diff --git a/aio/content/examples/toh-5/src/app/app-routing.module.ts b/aio/content/examples/toh-pt5/src/app/app-routing.module.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/app-routing.module.ts
rename to aio/content/examples/toh-pt5/src/app/app-routing.module.ts
diff --git a/aio/content/examples/toh-5/src/app/app.component.1.ts b/aio/content/examples/toh-pt5/src/app/app.component.1.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/app.component.1.ts
rename to aio/content/examples/toh-pt5/src/app/app.component.1.ts
diff --git a/aio/content/examples/toh-5/src/app/app.component.css b/aio/content/examples/toh-pt5/src/app/app.component.css
similarity index 100%
rename from aio/content/examples/toh-5/src/app/app.component.css
rename to aio/content/examples/toh-pt5/src/app/app.component.css
diff --git a/aio/content/examples/toh-5/src/app/app.component.ts b/aio/content/examples/toh-pt5/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/app.component.ts
rename to aio/content/examples/toh-pt5/src/app/app.component.ts
diff --git a/aio/content/examples/toh-5/src/app/app.module.1.ts b/aio/content/examples/toh-pt5/src/app/app.module.1.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/app.module.1.ts
rename to aio/content/examples/toh-pt5/src/app/app.module.1.ts
diff --git a/aio/content/examples/toh-5/src/app/app.module.2.ts b/aio/content/examples/toh-pt5/src/app/app.module.2.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/app.module.2.ts
rename to aio/content/examples/toh-pt5/src/app/app.module.2.ts
diff --git a/aio/content/examples/toh-5/src/app/app.module.3.ts b/aio/content/examples/toh-pt5/src/app/app.module.3.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/app.module.3.ts
rename to aio/content/examples/toh-pt5/src/app/app.module.3.ts
diff --git a/aio/content/examples/toh-5/src/app/app.module.ts b/aio/content/examples/toh-pt5/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/app.module.ts
rename to aio/content/examples/toh-pt5/src/app/app.module.ts
diff --git a/aio/content/examples/toh-5/src/app/dashboard.component.1.html b/aio/content/examples/toh-pt5/src/app/dashboard.component.1.html
similarity index 100%
rename from aio/content/examples/toh-5/src/app/dashboard.component.1.html
rename to aio/content/examples/toh-pt5/src/app/dashboard.component.1.html
diff --git a/aio/content/examples/toh-5/src/app/dashboard.component.1.ts b/aio/content/examples/toh-pt5/src/app/dashboard.component.1.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/dashboard.component.1.ts
rename to aio/content/examples/toh-pt5/src/app/dashboard.component.1.ts
diff --git a/aio/content/examples/toh-5/src/app/dashboard.component.css b/aio/content/examples/toh-pt5/src/app/dashboard.component.css
similarity index 100%
rename from aio/content/examples/toh-5/src/app/dashboard.component.css
rename to aio/content/examples/toh-pt5/src/app/dashboard.component.css
diff --git a/aio/content/examples/toh-5/src/app/dashboard.component.html b/aio/content/examples/toh-pt5/src/app/dashboard.component.html
similarity index 100%
rename from aio/content/examples/toh-5/src/app/dashboard.component.html
rename to aio/content/examples/toh-pt5/src/app/dashboard.component.html
diff --git a/aio/content/examples/toh-5/src/app/dashboard.component.ts b/aio/content/examples/toh-pt5/src/app/dashboard.component.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/dashboard.component.ts
rename to aio/content/examples/toh-pt5/src/app/dashboard.component.ts
diff --git a/aio/content/examples/toh-5/src/app/hero-detail.component.1.ts b/aio/content/examples/toh-pt5/src/app/hero-detail.component.1.ts
similarity index 91%
rename from aio/content/examples/toh-5/src/app/hero-detail.component.1.ts
rename to aio/content/examples/toh-pt5/src/app/hero-detail.component.1.ts
index 2f5081bdce..2895161fee 100644
--- a/aio/content/examples/toh-5/src/app/hero-detail.component.1.ts
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail.component.1.ts
@@ -5,7 +5,7 @@
 // #docregion added-imports
 // Keep the Input import for now, you'll remove it later:
 import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute, Params }   from '@angular/router';
+import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Location }                 from '@angular/common';
 
 import { HeroService } from './hero.service';
@@ -17,7 +17,7 @@ import { Hero } from './hero';
 @Component({})
 export class HeroDetailComponent implements OnInit {
   @Input() hero: Hero;
-  bogus: Params;
+  bogus: ParamMap;
 
   constructor(
     private heroService: HeroService,
diff --git a/aio/content/examples/toh-5/src/app/hero-detail.component.css b/aio/content/examples/toh-pt5/src/app/hero-detail.component.css
similarity index 100%
rename from aio/content/examples/toh-5/src/app/hero-detail.component.css
rename to aio/content/examples/toh-pt5/src/app/hero-detail.component.css
diff --git a/aio/content/examples/toh-5/src/app/hero-detail.component.html b/aio/content/examples/toh-pt5/src/app/hero-detail.component.html
similarity index 100%
rename from aio/content/examples/toh-5/src/app/hero-detail.component.html
rename to aio/content/examples/toh-pt5/src/app/hero-detail.component.html
diff --git a/aio/content/examples/toh-5/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt5/src/app/hero-detail.component.ts
similarity index 77%
rename from aio/content/examples/toh-5/src/app/hero-detail.component.ts
rename to aio/content/examples/toh-pt5/src/app/hero-detail.component.ts
index 222b6705d7..01f3a4c2db 100644
--- a/aio/content/examples/toh-5/src/app/hero-detail.component.ts
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail.component.ts
@@ -2,9 +2,9 @@
 // #docregion , v2, rxjs-import
 import 'rxjs/add/operator/switchMap';
 // #enddocregion rxjs-import
-import { Component, OnInit }      from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
-import { Location }               from '@angular/common';
+import { Component, OnInit }        from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { Location }                 from '@angular/common';
 
 import { Hero }         from './hero';
 import { HeroService }  from './hero.service';
@@ -32,8 +32,8 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   ngOnInit(): void {
-    this.route.params
-      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+    this.route.paramMap
+      .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
       .subscribe(hero => this.hero = hero);
   }
   // #enddocregion ngOnInit
diff --git a/aio/content/examples/toh-5/src/app/hero.service.ts b/aio/content/examples/toh-pt5/src/app/hero.service.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/hero.service.ts
rename to aio/content/examples/toh-pt5/src/app/hero.service.ts
diff --git a/aio/content/examples/toh-5/src/app/hero.ts b/aio/content/examples/toh-pt5/src/app/hero.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/hero.ts
rename to aio/content/examples/toh-pt5/src/app/hero.ts
diff --git a/aio/content/examples/toh-5/src/app/heroes.component.css b/aio/content/examples/toh-pt5/src/app/heroes.component.css
similarity index 100%
rename from aio/content/examples/toh-5/src/app/heroes.component.css
rename to aio/content/examples/toh-pt5/src/app/heroes.component.css
diff --git a/aio/content/examples/toh-5/src/app/heroes.component.html b/aio/content/examples/toh-pt5/src/app/heroes.component.html
similarity index 100%
rename from aio/content/examples/toh-5/src/app/heroes.component.html
rename to aio/content/examples/toh-pt5/src/app/heroes.component.html
diff --git a/aio/content/examples/toh-5/src/app/heroes.component.ts b/aio/content/examples/toh-pt5/src/app/heroes.component.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/app/heroes.component.ts
rename to aio/content/examples/toh-pt5/src/app/heroes.component.ts
diff --git a/aio/content/examples/toh-pt5/src/app/mock-heroes.ts b/aio/content/examples/toh-pt5/src/app/mock-heroes.ts
new file mode 100644
index 0000000000..1771a7103b
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/app/mock-heroes.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Hero } from './hero';
+
+export const 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/aio/content/examples/toh-5/src/index.html b/aio/content/examples/toh-pt5/src/index.html
similarity index 100%
rename from aio/content/examples/toh-5/src/index.html
rename to aio/content/examples/toh-pt5/src/index.html
diff --git a/aio/content/examples/toh-5/src/main.ts b/aio/content/examples/toh-pt5/src/main.ts
similarity index 100%
rename from aio/content/examples/toh-5/src/main.ts
rename to aio/content/examples/toh-pt5/src/main.ts
diff --git a/aio/content/examples/toh-pt5/src/styles.1.css b/aio/content/examples/toh-pt5/src/styles.1.css
new file mode 100644
index 0000000000..d01a0195db
--- /dev/null
+++ b/aio/content/examples/toh-pt5/src/styles.1.css
@@ -0,0 +1,22 @@
+/* Master Styles */
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}
+h2, h3 {
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
+}
+/* everywhere else */
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/aio/content/examples/toh-6/aot/index.html b/aio/content/examples/toh-pt6/aot/index.html
similarity index 100%
rename from aio/content/examples/toh-6/aot/index.html
rename to aio/content/examples/toh-pt6/aot/index.html
diff --git a/aio/content/examples/toh-6/bs-config.aot.json b/aio/content/examples/toh-pt6/bs-config.aot.json
similarity index 100%
rename from aio/content/examples/toh-6/bs-config.aot.json
rename to aio/content/examples/toh-pt6/bs-config.aot.json
diff --git a/aio/content/examples/toh-pt6/copy-dist-files.js b/aio/content/examples/toh-pt6/copy-dist-files.js
new file mode 100644
index 0000000000..080864e99c
--- /dev/null
+++ b/aio/content/examples/toh-pt6/copy-dist-files.js
@@ -0,0 +1,12 @@
+// #docregion
+var fs = require('fs');
+var resources = [
+  'node_modules/core-js/client/shim.min.js',
+  'node_modules/zone.js/dist/zone.min.js',
+  'src/styles.css'
+];
+resources.map(function(f) {
+  var path = f.split('/');
+  var t = 'aot/' + path[path.length-1];
+  fs.createReadStream(f).pipe(fs.createWriteStream(t));
+});
diff --git a/aio/content/examples/toh-6/e2e-spec.ts b/aio/content/examples/toh-pt6/e2e-spec.ts
similarity index 94%
rename from aio/content/examples/toh-6/e2e-spec.ts
rename to aio/content/examples/toh-pt6/e2e-spec.ts
index 80d9660263..c7208da7f9 100644
--- a/aio/content/examples/toh-6/e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e-spec.ts
@@ -5,7 +5,7 @@ import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `Angular ${expectedH1}`;
-const targetHero = { id: 15, name: 'Magneta' };
+const targetHero = { id: 14, name: 'Celeritas' };
 const targetHeroDashboardIndex = 3;
 const nameSuffix = 'X';
 const newHeroName = targetHero.name + nameSuffix;
@@ -108,7 +108,7 @@ describe('Tutorial part 6', () => {
 
     it(`cancels and shows ${targetHero.name} in Dashboard`, () => {
       element(by.buttonText('Back')).click();
-      browser.waitForAngular(); // seems necessary to gets tests to past for toh-6
+      browser.waitForAngular(); // seems necessary to gets tests to past for toh-pt6
 
       let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
       expect(targetHeroElt.getText()).toEqual(targetHero.name);
@@ -120,7 +120,7 @@ describe('Tutorial part 6', () => {
 
     it(`saves and shows ${newHeroName} in Dashboard`, () => {
       element(by.buttonText('Save')).click();
-      browser.waitForAngular(); // seems necessary to gets tests to past for toh-6
+      browser.waitForAngular(); // seems necessary to gets tests to past for toh-pt6
 
       let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
       expect(targetHeroElt.getText()).toEqual(newHeroName);
@@ -136,7 +136,7 @@ describe('Tutorial part 6', () => {
       getPageElts().myHeroesHref.click();
       let page = getPageElts();
       expect(page.myHeroes.isPresent()).toBeTruthy();
-      expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
+      expect(page.allHeroes.count()).toEqual(11, 'number of heroes');
     });
 
     it(`selects and shows ${targetHero.name} as selected in list`, () => {
@@ -164,7 +164,7 @@ describe('Tutorial part 6', () => {
 
     it(`shows ${newHeroName} in Heroes list`, () => {
       element(by.buttonText('Save')).click();
-      browser.waitForAngular(); // seems necessary to gets tests to past for toh-6
+      browser.waitForAngular(); // seems necessary to gets tests to past for toh-pt6
       let expectedHero = {id: targetHero.id, name: newHeroName};
       expect(Hero.fromLi(getHeroLiEltById(targetHero.id))).toEqual(expectedHero);
     });
@@ -176,7 +176,7 @@ describe('Tutorial part 6', () => {
 
       const page = getPageElts();
       expect(page.myHeroes.isPresent()).toBeTruthy();
-      expect(page.allHeroes.count()).toEqual(9, 'number of heroes');
+      expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
       const heroesAfter = await toHeroArray(page.allHeroes);
       const expectedHeroes =  heroesBefore.filter(h => h.name !== newHeroName);
       expect(heroesAfter).toEqual(expectedHeroes);
@@ -206,20 +206,20 @@ describe('Tutorial part 6', () => {
 
     beforeAll(() => browser.get(''));
 
-    it(`searches for 'Ma'`, async () => {
-      getPageElts().searchBox.sendKeys('Ma');
-      browser.sleep(1000);
-      expect(getPageElts().searchResults.count()).toBe(4);
-    });
-
-    it(`continues search with 'g'`, async () => {
-      getPageElts().searchBox.sendKeys('g');
+    it(`searches for 'Ce'`, async () => {
+      getPageElts().searchBox.sendKeys('Ce');
       browser.sleep(1000);
       expect(getPageElts().searchResults.count()).toBe(2);
     });
 
-    it(`continues search with 'n' and gets ${targetHero.name}`, async () => {
-      getPageElts().searchBox.sendKeys('n');
+    it(`continues search with 'l'`, async () => {
+      getPageElts().searchBox.sendKeys('l');
+      browser.sleep(1000);
+      expect(getPageElts().searchResults.count()).toBe(1);
+    });
+
+    it(`continues search with 'e' and gets ${targetHero.name}`, async () => {
+      getPageElts().searchBox.sendKeys('e');
       browser.sleep(1000);
       let page = getPageElts();
       expect(page.searchResults.count()).toBe(1);
@@ -242,7 +242,7 @@ describe('Tutorial part 6', () => {
     let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
     expect(targetHeroElt.getText()).toEqual(targetHero.name);
     targetHeroElt.click();
-    browser.waitForAngular(); // seems necessary to gets tests to past for toh-6
+    browser.waitForAngular(); // seems necessary to gets tests to past for toh-pt6
 
     let page = getPageElts();
     expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
diff --git a/aio/content/examples/toh-5/example-config.json b/aio/content/examples/toh-pt6/example-config.json
similarity index 100%
rename from aio/content/examples/toh-5/example-config.json
rename to aio/content/examples/toh-pt6/example-config.json
diff --git a/aio/content/examples/toh-6/plnkr.json b/aio/content/examples/toh-pt6/plnkr.json
similarity index 100%
rename from aio/content/examples/toh-6/plnkr.json
rename to aio/content/examples/toh-pt6/plnkr.json
diff --git a/aio/content/examples/toh-6/rollup-config.js b/aio/content/examples/toh-pt6/rollup-config.js
similarity index 100%
rename from aio/content/examples/toh-6/rollup-config.js
rename to aio/content/examples/toh-pt6/rollup-config.js
diff --git a/aio/content/examples/toh-6/src/app/app-routing.module.ts b/aio/content/examples/toh-pt6/src/app/app-routing.module.ts
similarity index 100%
rename from aio/content/examples/toh-6/src/app/app-routing.module.ts
rename to aio/content/examples/toh-pt6/src/app/app-routing.module.ts
diff --git a/aio/content/examples/toh-6/src/app/app.component.css b/aio/content/examples/toh-pt6/src/app/app.component.css
similarity index 100%
rename from aio/content/examples/toh-6/src/app/app.component.css
rename to aio/content/examples/toh-pt6/src/app/app.component.css
diff --git a/aio/content/examples/toh-6/src/app/app.component.ts b/aio/content/examples/toh-pt6/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/toh-6/src/app/app.component.ts
rename to aio/content/examples/toh-pt6/src/app/app.component.ts
diff --git a/aio/content/examples/toh-6/src/app/app.module.ts b/aio/content/examples/toh-pt6/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/toh-6/src/app/app.module.ts
rename to aio/content/examples/toh-pt6/src/app/app.module.ts
diff --git a/aio/content/examples/toh-6/src/app/dashboard.component.css b/aio/content/examples/toh-pt6/src/app/dashboard.component.css
similarity index 100%
rename from aio/content/examples/toh-6/src/app/dashboard.component.css
rename to aio/content/examples/toh-pt6/src/app/dashboard.component.css
diff --git a/aio/content/examples/toh-6/src/app/dashboard.component.html b/aio/content/examples/toh-pt6/src/app/dashboard.component.html
similarity index 100%
rename from aio/content/examples/toh-6/src/app/dashboard.component.html
rename to aio/content/examples/toh-pt6/src/app/dashboard.component.html
diff --git a/aio/content/examples/toh-6/src/app/dashboard.component.ts b/aio/content/examples/toh-pt6/src/app/dashboard.component.ts
similarity index 100%
rename from aio/content/examples/toh-6/src/app/dashboard.component.ts
rename to aio/content/examples/toh-pt6/src/app/dashboard.component.ts
diff --git a/aio/content/examples/toh-6/src/app/hero-detail.component.css b/aio/content/examples/toh-pt6/src/app/hero-detail.component.css
similarity index 100%
rename from aio/content/examples/toh-6/src/app/hero-detail.component.css
rename to aio/content/examples/toh-pt6/src/app/hero-detail.component.css
diff --git a/aio/content/examples/toh-6/src/app/hero-detail.component.html b/aio/content/examples/toh-pt6/src/app/hero-detail.component.html
similarity index 100%
rename from aio/content/examples/toh-6/src/app/hero-detail.component.html
rename to aio/content/examples/toh-pt6/src/app/hero-detail.component.html
diff --git a/aio/content/examples/toh-6/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt6/src/app/hero-detail.component.ts
similarity index 71%
rename from aio/content/examples/toh-6/src/app/hero-detail.component.ts
rename to aio/content/examples/toh-pt6/src/app/hero-detail.component.ts
index 6224f10ac1..e0222aded7 100644
--- a/aio/content/examples/toh-6/src/app/hero-detail.component.ts
+++ b/aio/content/examples/toh-pt6/src/app/hero-detail.component.ts
@@ -1,8 +1,8 @@
 // #docregion
 import 'rxjs/add/operator/switchMap';
-import { Component, OnInit }      from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
-import { Location }               from '@angular/common';
+import { Component, OnInit }        from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { Location }                 from '@angular/common';
 
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
@@ -22,8 +22,8 @@ export class HeroDetailComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.params
-      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+    this.route.paramMap
+      .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
       .subscribe(hero => this.hero = hero);
   }
 
diff --git a/aio/content/examples/toh-6/src/app/hero-search.component.css b/aio/content/examples/toh-pt6/src/app/hero-search.component.css
similarity index 100%
rename from aio/content/examples/toh-6/src/app/hero-search.component.css
rename to aio/content/examples/toh-pt6/src/app/hero-search.component.css
diff --git a/aio/content/examples/toh-6/src/app/hero-search.component.html b/aio/content/examples/toh-pt6/src/app/hero-search.component.html
similarity index 100%
rename from aio/content/examples/toh-6/src/app/hero-search.component.html
rename to aio/content/examples/toh-pt6/src/app/hero-search.component.html
diff --git a/aio/content/examples/toh-6/src/app/hero-search.component.ts b/aio/content/examples/toh-pt6/src/app/hero-search.component.ts
similarity index 100%
rename from aio/content/examples/toh-6/src/app/hero-search.component.ts
rename to aio/content/examples/toh-pt6/src/app/hero-search.component.ts
diff --git a/aio/content/examples/toh-6/src/app/hero-search.service.ts b/aio/content/examples/toh-pt6/src/app/hero-search.service.ts
similarity index 90%
rename from aio/content/examples/toh-6/src/app/hero-search.service.ts
rename to aio/content/examples/toh-pt6/src/app/hero-search.service.ts
index d24e0fba41..52bf95a158 100644
--- a/aio/content/examples/toh-6/src/app/hero-search.service.ts
+++ b/aio/content/examples/toh-pt6/src/app/hero-search.service.ts
@@ -14,7 +14,7 @@ export class HeroSearchService {
 
   search(term: string): Observable<Hero[]> {
     return this.http
-               .get(`app/heroes/?name=${term}`)
+               .get(`api/heroes/?name=${term}`)
                .map(response => response.json().data as Hero[]);
   }
 }
diff --git a/aio/content/examples/toh-6/src/app/hero.service.ts b/aio/content/examples/toh-pt6/src/app/hero.service.ts
similarity index 100%
rename from aio/content/examples/toh-6/src/app/hero.service.ts
rename to aio/content/examples/toh-pt6/src/app/hero.service.ts
diff --git a/aio/content/examples/toh-6/src/app/hero.ts b/aio/content/examples/toh-pt6/src/app/hero.ts
similarity index 100%
rename from aio/content/examples/toh-6/src/app/hero.ts
rename to aio/content/examples/toh-pt6/src/app/hero.ts
diff --git a/aio/content/examples/toh-6/src/app/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes.component.css
similarity index 100%
rename from aio/content/examples/toh-6/src/app/heroes.component.css
rename to aio/content/examples/toh-pt6/src/app/heroes.component.css
diff --git a/aio/content/examples/toh-6/src/app/heroes.component.html b/aio/content/examples/toh-pt6/src/app/heroes.component.html
similarity index 100%
rename from aio/content/examples/toh-6/src/app/heroes.component.html
rename to aio/content/examples/toh-pt6/src/app/heroes.component.html
diff --git a/aio/content/examples/toh-6/src/app/heroes.component.ts b/aio/content/examples/toh-pt6/src/app/heroes.component.ts
similarity index 100%
rename from aio/content/examples/toh-6/src/app/heroes.component.ts
rename to aio/content/examples/toh-pt6/src/app/heroes.component.ts
diff --git a/aio/content/examples/toh-pt6/src/app/in-memory-data.service.ts b/aio/content/examples/toh-pt6/src/app/in-memory-data.service.ts
new file mode 100644
index 0000000000..88c6d72931
--- /dev/null
+++ b/aio/content/examples/toh-pt6/src/app/in-memory-data.service.ts
@@ -0,0 +1,20 @@
+// #docregion , init
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+export class InMemoryDataService implements InMemoryDbService {
+  createDb() {
+    const heroes = [
+      { id: 0,  name: 'Zero' },
+      { 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/aio/content/examples/toh-6/src/index.html b/aio/content/examples/toh-pt6/src/index.html
similarity index 100%
rename from aio/content/examples/toh-6/src/index.html
rename to aio/content/examples/toh-pt6/src/index.html
diff --git a/aio/content/examples/toh-6/src/main-aot.ts b/aio/content/examples/toh-pt6/src/main-aot.ts
similarity index 100%
rename from aio/content/examples/toh-6/src/main-aot.ts
rename to aio/content/examples/toh-pt6/src/main-aot.ts
diff --git a/aio/content/examples/toh-6/src/main.ts b/aio/content/examples/toh-pt6/src/main.ts
similarity index 100%
rename from aio/content/examples/toh-6/src/main.ts
rename to aio/content/examples/toh-pt6/src/main.ts
diff --git a/aio/content/examples/toh-6/src/tsconfig.1.json b/aio/content/examples/toh-pt6/src/tsconfig.1.json
similarity index 100%
rename from aio/content/examples/toh-6/src/tsconfig.1.json
rename to aio/content/examples/toh-pt6/src/tsconfig.1.json
diff --git a/aio/content/examples/toh-6/tsconfig-aot.json b/aio/content/examples/toh-pt6/tsconfig-aot.json
similarity index 93%
rename from aio/content/examples/toh-6/tsconfig-aot.json
rename to aio/content/examples/toh-pt6/tsconfig-aot.json
index fe1e6df520..2a88388860 100644
--- a/aio/content/examples/toh-6/tsconfig-aot.json
+++ b/aio/content/examples/toh-pt6/tsconfig-aot.json
@@ -10,7 +10,7 @@
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "typeRoots": [
-      "../../node_modules/@types/"
+      "./node_modules/@types/"
     ]
   },
 
diff --git a/aio/content/examples/cb-ts-to-js/e2e-spec.ts b/aio/content/examples/ts-to-js/e2e-spec.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/e2e-spec.ts
rename to aio/content/examples/ts-to-js/e2e-spec.ts
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/example-config.json b/aio/content/examples/ts-to-js/js-es6-decorators/example-config.json
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/example-config.json
rename to aio/content/examples/ts-to-js/js-es6-decorators/example-config.json
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/plnkr.json b/aio/content/examples/ts-to-js/js-es6-decorators/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/plnkr.json
rename to aio/content/examples/ts-to-js/js-es6-decorators/plnkr.json
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/.babelrc b/aio/content/examples/ts-to-js/js-es6-decorators/src/.babelrc
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/.babelrc
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/.babelrc
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.html
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.html
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/app.module.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.module.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/app.module.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.module.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.html
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.html
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/data.service.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/data.service.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/data.service.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/data.service.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-di.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-di.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-host.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-host.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-io.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-io.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-io.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-io.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.html
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.html
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero.component.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/index.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/index.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/index.html
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/index.html
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/main.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/main.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6-decorators/src/main.es6
rename to aio/content/examples/ts-to-js/js-es6-decorators/src/main.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/example-config.json b/aio/content/examples/ts-to-js/js-es6/example-config.json
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/example-config.json
rename to aio/content/examples/ts-to-js/js-es6/example-config.json
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/plnkr.json b/aio/content/examples/ts-to-js/js-es6/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/plnkr.json
rename to aio/content/examples/ts-to-js/js-es6/plnkr.json
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/.babelrc b/aio/content/examples/ts-to-js/js-es6/src/.babelrc
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/.babelrc
rename to aio/content/examples/ts-to-js/js-es6/src/.babelrc
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/app.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/app.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/app.component.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/app.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/app.component.html b/aio/content/examples/ts-to-js/js-es6/src/app/app.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/app.component.html
rename to aio/content/examples/ts-to-js/js-es6/src/app/app.component.html
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/app.module.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/app.module.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/app.module.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/app.module.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/confirm.component.html b/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/confirm.component.html
rename to aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.html
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/data.service.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/data.service.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/data.service.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/data.service.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-di-inject.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-di-inject.component.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-di.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-di.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-di.component.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/hero-di.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-host.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-host.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-host.component.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/hero-host.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-io.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-io.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-io.component.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/hero-io.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-lifecycle.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-lifecycle.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-lifecycle.component.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/hero-lifecycle.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-queries.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-queries.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-queries.component.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/hero-queries.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-title.component.html
rename to aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.html
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero.component.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/app/hero.component.es6
rename to aio/content/examples/ts-to-js/js-es6/src/app/hero.component.es6
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/index.html b/aio/content/examples/ts-to-js/js-es6/src/index.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/index.html
rename to aio/content/examples/ts-to-js/js-es6/src/index.html
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/main.es6 b/aio/content/examples/ts-to-js/js-es6/src/main.es6
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js-es6/src/main.es6
rename to aio/content/examples/ts-to-js/js-es6/src/main.es6
diff --git a/aio/content/examples/cb-ts-to-js/js/example-config.json b/aio/content/examples/ts-to-js/js/example-config.json
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/example-config.json
rename to aio/content/examples/ts-to-js/js/example-config.json
diff --git a/aio/content/examples/cb-ts-to-js/js/plnkr.json b/aio/content/examples/ts-to-js/js/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/plnkr.json
rename to aio/content/examples/ts-to-js/js/plnkr.json
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/app.component.html b/aio/content/examples/ts-to-js/js/src/app/app.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/app.component.html
rename to aio/content/examples/ts-to-js/js/src/app/app.component.html
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/app.component.js b/aio/content/examples/ts-to-js/js/src/app/app.component.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/app.component.js
rename to aio/content/examples/ts-to-js/js/src/app/app.component.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/app.module.js b/aio/content/examples/ts-to-js/js/src/app/app.module.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/app.module.js
rename to aio/content/examples/ts-to-js/js/src/app/app.module.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/confirm.component.html b/aio/content/examples/ts-to-js/js/src/app/confirm.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/confirm.component.html
rename to aio/content/examples/ts-to-js/js/src/app/confirm.component.html
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/confirm.component.js b/aio/content/examples/ts-to-js/js/src/app/confirm.component.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/confirm.component.js
rename to aio/content/examples/ts-to-js/js/src/app/confirm.component.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/data.service.js b/aio/content/examples/ts-to-js/js/src/app/data.service.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/data.service.js
rename to aio/content/examples/ts-to-js/js/src/app/data.service.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero-di-inject-additional.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero-di-inject-additional.component.js
rename to aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero-di-inject.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero-di-inject.component.js
rename to aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero-di.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-di.component.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero-di.component.js
rename to aio/content/examples/ts-to-js/js/src/app/hero-di.component.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero-host.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-host.component.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero-host.component.js
rename to aio/content/examples/ts-to-js/js/src/app/hero-host.component.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero-io-dsl.component.html b/aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero-io-dsl.component.html
rename to aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero-io.component.html b/aio/content/examples/ts-to-js/js/src/app/hero-io.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero-io.component.html
rename to aio/content/examples/ts-to-js/js/src/app/hero-io.component.html
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero-io.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-io.component.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero-io.component.js
rename to aio/content/examples/ts-to-js/js/src/app/hero-io.component.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero-lifecycle.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero-lifecycle.component.js
rename to aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero-queries.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-queries.component.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero-queries.component.js
rename to aio/content/examples/ts-to-js/js/src/app/hero-queries.component.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/js/src/app/hero-title.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero-title.component.html
rename to aio/content/examples/ts-to-js/js/src/app/hero-title.component.html
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero-title.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-title.component.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero-title.component.js
rename to aio/content/examples/ts-to-js/js/src/app/hero-title.component.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/app/hero.component.js b/aio/content/examples/ts-to-js/js/src/app/hero.component.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/app/hero.component.js
rename to aio/content/examples/ts-to-js/js/src/app/hero.component.js
diff --git a/aio/content/examples/cb-ts-to-js/js/src/index.html b/aio/content/examples/ts-to-js/js/src/index.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/index.html
rename to aio/content/examples/ts-to-js/js/src/index.html
diff --git a/aio/content/examples/cb-ts-to-js/js/src/main.js b/aio/content/examples/ts-to-js/js/src/main.js
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/js/src/main.js
rename to aio/content/examples/ts-to-js/js/src/main.js
diff --git a/aio/content/examples/toh-6/example-config.json b/aio/content/examples/ts-to-js/ts/example-config.json
similarity index 100%
rename from aio/content/examples/toh-6/example-config.json
rename to aio/content/examples/ts-to-js/ts/example-config.json
diff --git a/aio/content/examples/cb-ts-to-js/ts/plnkr.json b/aio/content/examples/ts-to-js/ts/plnkr.json
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/plnkr.json
rename to aio/content/examples/ts-to-js/ts/plnkr.json
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/app.component.html b/aio/content/examples/ts-to-js/ts/src/app/app.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/app.component.html
rename to aio/content/examples/ts-to-js/ts/src/app/app.component.html
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/app.component.ts b/aio/content/examples/ts-to-js/ts/src/app/app.component.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/app.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/app.component.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/app.module.ts b/aio/content/examples/ts-to-js/ts/src/app/app.module.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/app.module.ts
rename to aio/content/examples/ts-to-js/ts/src/app/app.module.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/confirm.component.html b/aio/content/examples/ts-to-js/ts/src/app/confirm.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/confirm.component.html
rename to aio/content/examples/ts-to-js/ts/src/app/confirm.component.html
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/confirm.component.ts b/aio/content/examples/ts-to-js/ts/src/app/confirm.component.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/confirm.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/confirm.component.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/data.service.ts b/aio/content/examples/ts-to-js/ts/src/app/data.service.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/data.service.ts
rename to aio/content/examples/ts-to-js/ts/src/app/data.service.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-di-inject-additional.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject-additional.component.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/hero-di-inject-additional.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/hero-di-inject-additional.component.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-di-inject.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject.component.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/hero-di-inject.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/hero-di-inject.component.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-di.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-di.component.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/hero-di.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/hero-di.component.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-host-meta.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-host-meta.component.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/hero-host-meta.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/hero-host-meta.component.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-host.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-host.component.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/hero-host.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/hero-host.component.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-io.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-io.component.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/hero-io.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/hero-io.component.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-lifecycle.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-lifecycle.component.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/hero-lifecycle.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/hero-lifecycle.component.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-queries.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-queries.component.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/hero-queries.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/hero-queries.component.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/hero-title.component.html
rename to aio/content/examples/ts-to-js/ts/src/app/hero-title.component.html
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-title.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.ts
similarity index 95%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/hero-title.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/hero-title.component.ts
index 48aaae7d44..078421ecc7 100644
--- a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-title.component.ts
+++ b/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.ts
@@ -8,7 +8,7 @@ import { Attribute, Component, Inject, Optional } from '@angular/core';
 })
 // #enddocregion templateUrl
 export class HeroTitleComponent {
-  msg: string = '';
+  msg = '';
   constructor(
     @Inject('titlePrefix') @Optional() private titlePrefix: string,
     @Attribute('title') private title: string
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero.component.ts
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/app/hero.component.ts
rename to aio/content/examples/ts-to-js/ts/src/app/hero.component.ts
diff --git a/aio/content/examples/cb-ts-to-js/ts/src/index.html b/aio/content/examples/ts-to-js/ts/src/index.html
similarity index 100%
rename from aio/content/examples/cb-ts-to-js/ts/src/index.html
rename to aio/content/examples/ts-to-js/ts/src/index.html
diff --git a/aio/content/examples/toh-4/src/main.ts b/aio/content/examples/ts-to-js/ts/src/main.ts
similarity index 100%
rename from aio/content/examples/toh-4/src/main.ts
rename to aio/content/examples/ts-to-js/ts/src/main.ts
diff --git a/aio/content/examples/upgrade-phonecat-3-router/tsconfig.json b/aio/content/examples/tsconfig.json
similarity index 55%
rename from aio/content/examples/upgrade-phonecat-3-router/tsconfig.json
rename to aio/content/examples/tsconfig.json
index f267800f14..5ad933f26e 100644
--- a/aio/content/examples/upgrade-phonecat-3-router/tsconfig.json
+++ b/aio/content/examples/tsconfig.json
@@ -1,21 +1,21 @@
+// this tsconfig is used to give intellisense to
+// all the examples in this folder
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": [ "es2015", "dom" ],
+    "lib": ["es2015", "dom"],
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "typeRoots": [
-      "../../node_modules/@types/"
+      "../../tools/examples/shared/node_modules/@types"
     ]
   },
-  "compileOnSave": true,
-  "exclude": [
-    "node_modules/*",
-    "**/*-aot.ts"
+  "include": [
+    "*/e2e-spec.ts"
   ]
 }
diff --git a/aio/content/examples/tslint.json b/aio/content/examples/tslint.json
new file mode 100644
index 0000000000..2e81c99035
--- /dev/null
+++ b/aio/content/examples/tslint.json
@@ -0,0 +1,94 @@
+{
+  "rulesDirectory": [
+    "../../node_modules/codelyzer"
+  ],
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "import-destructuring-spacing": true
+  }
+}
diff --git a/aio/content/examples/universal/.gitignore b/aio/content/examples/universal/.gitignore
deleted file mode 100644
index 62993511f8..0000000000
--- a/aio/content/examples/universal/.gitignore
+++ /dev/null
@@ -1,8 +0,0 @@
-aot/**/*.ts
-**/*.ngfactory.ts
-**/*.ngsummary.json
-**/*.metadata.json
-**/*.js
-dist
-!app/tsconfig.json
-!/*.js
diff --git a/aio/content/examples/universal/src/app/hero-detail.component.ts b/aio/content/examples/universal/src/app/hero-detail.component.ts
index b3bbbd2f3d..676c4c21b0 100644
--- a/aio/content/examples/universal/src/app/hero-detail.component.ts
+++ b/aio/content/examples/universal/src/app/hero-detail.component.ts
@@ -1,7 +1,7 @@
 // #docregion
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }      from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Location }               from '@angular/common';
 
 import { Hero }        from './hero';
@@ -22,8 +22,8 @@ export class HeroDetailComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.params
-      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+    this.route.paramMap
+      .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
       .subscribe(hero => this.hero = hero);
   }
 
diff --git a/aio/content/examples/universal/src/app/hero-search.service.ts b/aio/content/examples/universal/src/app/hero-search.service.ts
index d24e0fba41..52bf95a158 100644
--- a/aio/content/examples/universal/src/app/hero-search.service.ts
+++ b/aio/content/examples/universal/src/app/hero-search.service.ts
@@ -14,7 +14,7 @@ export class HeroSearchService {
 
   search(term: string): Observable<Hero[]> {
     return this.http
-               .get(`app/heroes/?name=${term}`)
+               .get(`api/heroes/?name=${term}`)
                .map(response => response.json().data as Hero[]);
   }
 }
diff --git a/aio/content/examples/universal/tsconfig-aot.json b/aio/content/examples/universal/tsconfig-aot.json
index 023bf2fb68..fd4632d05f 100644
--- a/aio/content/examples/universal/tsconfig-aot.json
+++ b/aio/content/examples/universal/tsconfig-aot.json
@@ -10,7 +10,7 @@
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "typeRoots": [
-      "node_modules/@types/"
+      "./node_modules/@types/"
     ]
   },
 
diff --git a/aio/content/examples/upgrade-module/e2e-spec.ts b/aio/content/examples/upgrade-module/e2e-spec.ts
index 0c45fb78b8..5c32ccd347 100644
--- a/aio/content/examples/upgrade-module/e2e-spec.ts
+++ b/aio/content/examples/upgrade-module/e2e-spec.ts
@@ -1,12 +1,13 @@
 'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
-import { setProtractorToHybridMode } from '../protractor-helpers';
 
 describe('Upgrade Tests', function () {
 
   beforeAll(function () {
-    setProtractorToHybridMode();
+    // Set protractor to hybrid mode.
+    browser.rootEl = 'body';
+    browser.ng12Hybrid = true;
   });
 
   describe('AngularJS Auto-bootstrap', function() {
@@ -161,22 +162,4 @@ describe('Upgrade Tests', function () {
 
   });
 
-  describe('Dividing routes', function() {
-
-    beforeAll(function () {
-      browser.get('/index-divide-routes.html');
-    });
-
-    it('allows ng1 routes', function () {
-      browser.get('/index-divide-routes.html#/villain');
-      expect(element(by.css('h2')).getText()).toBe('Mr. Nice - No More Mr. Nice Guy');
-    });
-
-    it('allows ng2 routes', function () {
-      browser.get('/index-divide-routes.html#/hero');
-      expect(element(by.css('h2')).getText()).toBe('Windstorm - Specific powers of controlling winds');
-    });
-
-  });
-
 });
diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts
index 91235a1485..2ac7ee76bf 100644
--- a/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts
@@ -6,8 +6,9 @@ import { UpgradeModule } from '@angular/upgrade/static';
 
 import { heroDetailComponent } from './hero-detail.component';
 
-// #docregion ngmodule
+// #docregion ngmodule, register
 import { Heroes } from './heroes';
+// #enddocregion register
 
 @NgModule({
   imports: [
@@ -17,7 +18,10 @@ import { Heroes } from './heroes';
   providers: [ Heroes ]
 })
 export class AppModule {
-  ngDoBootstrap() {}
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
 }
 // #enddocregion ngmodule
 // #docregion register
@@ -28,7 +32,4 @@ angular.module('heroApp', [])
   .component('heroDetail', heroDetailComponent);
 // #enddocregion register
 
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
-});
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts
index 599e711b5e..e95104cbcc 100644
--- a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts
@@ -22,7 +22,10 @@ import { ContainerComponent } from './container.component';
   ]
 })
 export class AppModule {
-  ngDoBootstrap() {}
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
 }
 // #enddocregion heroupgrade
 
@@ -33,7 +36,4 @@ angular.module('heroApp', [])
     downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
   );
 
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
-});
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts
index a1bec385e0..9d467a5411 100644
--- a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts
+++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts
@@ -8,7 +8,8 @@ export const heroDetail = {
     <div>
       <ng-transclude></ng-transclude>
     </div>
-  `
+  `,
+  transclude: true
 };
 // #enddocregion
 
diff --git a/aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts
index 7a6b82cf92..3b8794d4de 100644
--- a/aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts
@@ -11,7 +11,10 @@ import { UpgradeModule } from '@angular/upgrade/static';
   ]
 })
 export class AppModule {
-  ngDoBootstrap() {}
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
 }
 // #enddocregion ngmodule
 angular.module('heroApp', [])
@@ -22,8 +25,5 @@ angular.module('heroApp', [])
 // #docregion bootstrap
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
-});
+platformBrowserDynamic().bootstrapModule(AppModule);
 // #enddocregion bootstrap
diff --git a/aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts
index 639b780d1b..15dc5743c2 100644
--- a/aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts
@@ -1,10 +1,12 @@
+// #docregion ng1module
 angular.module('heroApp', [])
   .controller('MainCtrl', function() {
     this.message = 'Hello world';
   });
+// #enddocregion ng1module
 
 document.addEventListener('DOMContentLoaded', function() {
   // #docregion bootstrap
-  angular.bootstrap(document.body, ['heroApp'], {strictDi: true});
+  angular.bootstrap(document.body, ['heroApp'], { strictDi: true });
   // #enddocregion bootstrap
 });
diff --git a/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts
index 080f80f0ef..ab48681354 100644
--- a/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts
@@ -20,7 +20,10 @@ import { HeroDetailComponent } from './hero-detail.component';
   ]
 })
 export class AppModule {
-  ngDoBootstrap() {}
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
 }
 
 angular.module('heroApp', [])
@@ -30,7 +33,4 @@ angular.module('heroApp', [])
     inputs: ['hero']
   }) as angular.IDirectiveFactory);
 
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
-});
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts
index 4e0eca003a..8386a995f4 100644
--- a/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts
@@ -27,7 +27,10 @@ import { heroesServiceProvider } from './ajs-upgraded-providers';
 // #docregion register
 })
 export class AppModule {
-  ngDoBootstrap() {}
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
 }
 // #enddocregion register
 
@@ -38,7 +41,4 @@ angular.module('heroApp', [])
     downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
   );
 
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
-});
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/divide-routes/app.component.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/app.component.ts
deleted file mode 100644
index 1fae3f84c6..0000000000
--- a/aio/content/examples/upgrade-module/src/app/divide-routes/app.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-app',
-  template: `
-    <router-outlet></router-outlet>
-    <div ng-view></div>
-  `,
-})
-export class AppComponent { }
diff --git a/aio/content/examples/upgrade-module/src/app/divide-routes/app.module.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/app.module.ts
deleted file mode 100644
index 7d85a23c94..0000000000
--- a/aio/content/examples/upgrade-module/src/app/divide-routes/app.module.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-// #docregion
-declare var angular: angular.IAngularStatic;
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { UpgradeModule } from '@angular/upgrade/static';
-
-import { HeroModule } from './hero.module';
-
-// #docregion router-config
-import { HashLocationStrategy, LocationStrategy } from '@angular/common';
-import { RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router';
-import { AppComponent } from './app.component';
-
-class HybridUrlHandlingStrategy implements UrlHandlingStrategy {
-  // use only process the `/hero` url
-  shouldProcessUrl(url: UrlTree) { return url.toString().startsWith('/hero'); }
-  extract(url: UrlTree) { return url; }
-  merge(url: UrlTree, whole: UrlTree) { return url; }
-}
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    UpgradeModule,
-    HeroModule,
-    RouterModule.forRoot([])
-  ],
-  providers: [
-    // use hash location strategy
-    { provide: LocationStrategy, useClass: HashLocationStrategy },
-    // use custom url handling strategy
-    { provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy }
-  ],
-  declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-// #enddocregion router-config
-
-import { Villain } from '../villain';
-
-export const villainDetail = {
-  template: `
-    <h1>Villain detail</h1>
-    <h2>{{$ctrl.villain.name}} - {{$ctrl.villain.description}}</h2>
-  `,
-  controller: function() {
-    this.villain = new Villain(1, 'Mr. Nice', 'No More Mr. Nice Guy');
-  }
-};
-
-angular.module('heroApp', ['ngRoute'])
-  .component('villainDetail', villainDetail)
-  .config(['$locationProvider', '$routeProvider',
-    function config($locationProvider: angular.ILocationProvider,
-                    $routeProvider: angular.route.IRouteProvider) {
-      // #docregion ajs-route
-      $routeProvider
-        .when('/villain', { template: '<villain-detail></villain-detail>' });
-      // #enddocregion ajs-route
-    }
-  ]);
diff --git a/aio/content/examples/upgrade-module/src/app/divide-routes/hero.module.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/hero.module.ts
deleted file mode 100644
index 33099d0a9f..0000000000
--- a/aio/content/examples/upgrade-module/src/app/divide-routes/hero.module.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-import { Hero } from '../hero';
-
-@Component({
-  template: `
-    <h1>Hero detail</h1>
-    <h2>{{hero.name}} - {{hero.description}}</h2>
-  `
-})
-export class HeroDetailComponent {
-  hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
-}
-
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    // #docregion a-route
-    RouterModule.forChild([
-      { path: 'hero', children: [
-        { path: '', component: HeroDetailComponent },
-      ] },
-    ])
-    // #enddocregion a-route
-  ],
-  declarations: [ HeroDetailComponent ]
-})
-export class HeroModule {}
diff --git a/aio/content/examples/upgrade-module/src/app/divide-routes/main.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/main.ts
deleted file mode 100644
index 9b4d37ebc3..0000000000
--- a/aio/content/examples/upgrade-module/src/app/divide-routes/main.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { UpgradeModule } from '@angular/upgrade/static';
-
-import { AppModule } from './app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
-});
diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts b/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts
index 1e836cfc9d..22dd29ae6d 100644
--- a/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts
@@ -23,21 +23,17 @@ import { HeroDetailComponent } from './hero-detail.component';
   ]
 })
 export class AppModule {
-  ngDoBootstrap() {}
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
 }
 // #docregion downgradecomponent
 
 angular.module('heroApp', [])
   .controller('MainController', MainController)
-  .directive('heroDetail', downgradeComponent({
-    component: HeroDetailComponent,
-    inputs: ['hero'],
-    outputs: ['deleted']
-  }) as angular.IDirectiveFactory);
+  .directive('heroDetail', downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory);
 
 // #enddocregion downgradecomponent
 
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
-});
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts b/aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts
index 4d621d2f03..5925082197 100644
--- a/aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts
@@ -21,7 +21,10 @@ import { HeroDetailComponent } from './hero-detail.component';
   ]
 })
 export class AppModule {
-  ngDoBootstrap() {}
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
 }
 // #enddocregion ngmodule
 // #docregion downgradecomponent
@@ -31,12 +34,9 @@ import { downgradeComponent } from '@angular/upgrade/static';
 angular.module('heroApp', [])
   .directive(
     'heroDetail',
-    downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
+    downgradeComponent({ component: HeroDetailComponent }) as angular.IDirectiveFactory
   );
 
 // #enddocregion downgradecomponent
 
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
-});
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts b/aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts
index e1b14d2dfc..23fc7853d7 100644
--- a/aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts
+++ b/aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts
@@ -8,15 +8,15 @@ export function heroDetailDirective() {
       deleted: '&'
     },
     template: `
-      <h2>{{ctrl.hero.name}} details!</h2>
-      <div><label>id: </label>{{ctrl.hero.id}}</div>
-      <button ng-click="ctrl.onDelete()">Delete</button>
+      <h2>{{$ctrl.hero.name}} details!</h2>
+      <div><label>id: </label>{{$ctrl.hero.id}}</div>
+      <button ng-click="$ctrl.onDelete()">Delete</button>
     `,
     controller: function() {
       this.onDelete = () => {
         this.deleted({hero: this.hero});
       };
     },
-    controllerAs: 'ctrl'
+    controllerAs: '$ctrl'
   };
 }
diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts b/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts
index 599e711b5e..e95104cbcc 100644
--- a/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts
@@ -22,7 +22,10 @@ import { ContainerComponent } from './container.component';
   ]
 })
 export class AppModule {
-  ngDoBootstrap() {}
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
 }
 // #enddocregion heroupgrade
 
@@ -33,7 +36,4 @@ angular.module('heroApp', [])
     downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
   );
 
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
-});
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts b/aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts
index 401963c35e..d6377ecda8 100644
--- a/aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts
@@ -24,7 +24,10 @@ import { ContainerComponent } from './container.component';
   ]
 })
 export class AppModule {
-  ngDoBootstrap() {}
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
+  }
 }
 // #enddocregion hero-detail-upgrade
 
@@ -35,7 +38,4 @@ angular.module('heroApp', [])
     downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
   );
 
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
-});
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts
index 02ddd293eb..7e649022f2 100644
--- a/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts
+++ b/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts
@@ -11,7 +11,7 @@ export const heroDetail = {
 // #enddocregion hero-detail
 
 // #docregion hero-detail-upgrade
-import { Directive, ElementRef, Injector } from '@angular/core';
+import { Directive, ElementRef, Injector, SimpleChanges } from '@angular/core';
 import { UpgradeComponent } from '@angular/upgrade/static';
 
 @Directive({
diff --git a/aio/content/examples/upgrade-module/src/index-divide-routes.html b/aio/content/examples/upgrade-module/src/index-divide-routes.html
deleted file mode 100644
index ee9a56ab36..0000000000
--- a/aio/content/examples/upgrade-module/src/index-divide-routes.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-  <head>
-    <title>Angular 2 Upgrade</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <script src="https://code.angularjs.org/1.5.5/angular.js"></script>
-    <script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
-
-    <!-- Polyfills for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.1.js"></script>
-    <script>
-    System.import('app/divide-routes/main')
-          .then(null, console.error.bind(console));
-    </script>
-  </head>
-
-  <!--#docregion body-->
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-  <!--#enddocregion body-->
-</html>
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/.gitignore b/aio/content/examples/upgrade-phonecat-1-typescript/.gitignore
deleted file mode 100644
index 448efbe632..0000000000
--- a/aio/content/examples/upgrade-phonecat-1-typescript/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-!karma.conf.ajs.js
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts
index 4598a7f6dc..ec98b44eb5 100644
--- a/aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts
@@ -1,7 +1,6 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by, ElementFinder } from 'protractor';
-import { setProtractorToNg1Mode } from '../protractor-helpers';
 
 // Angular E2E Testing Guide:
 // https://docs.angularjs.org/guide/e2e-testing
@@ -10,7 +9,8 @@ describe('PhoneCat Application', function() {
 
   beforeAll(function() {
     browser.baseUrl = 'http://localhost:8080/app/';
-    setProtractorToNg1Mode();
+    // protractor.config.js is set to ng2 mode by default, so we must manually change it
+    browser.rootEl = 'body';
   });
 
   it('should redirect `index.html` to `index.html#!/phones', function() {
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.json b/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.json
index be11d1eb49..8444d2ddea 100644
--- a/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.json
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.json
@@ -10,7 +10,7 @@
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "typeRoots": [
-      "../../node_modules/@types/"
+      "./node_modules/@types/"
     ]
   },
   "compileOnSave": true,
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/.gitignore b/aio/content/examples/upgrade-phonecat-2-hybrid/.gitignore
deleted file mode 100644
index 927d62d641..0000000000
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/.gitignore
+++ /dev/null
@@ -1,8 +0,0 @@
-aot/**/*
-!aot/index.html
-dist
-!app/tsconfig.json
-!rollup-config.js
-!karma.conf.ajs.js
-!copy-dist-files.js
-!systemjs.config.1.js
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/README.md b/aio/content/examples/upgrade-phonecat-2-hybrid/README.md
index b005739148..76eb21fc6c 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/README.md
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/README.md
@@ -6,8 +6,6 @@ The following changes from vanilla Phonecat are applied:
 * Karma config for unit tests is in karma.conf.ajs.js because the boilerplate
   Karma config is not compatible with the way AngularJS tests need to be run.
   The shell script run-unit-tests.sh can be used to run the unit tests.
-* There's a `package.ajs.json`, which is not used to run anything but only to
-  show an example of changing the PhoneCat http-server root path.
 * Also for the Karma shim, there is a `karma-test-shim.1.js` file which isn't
   used but is shown in the test appendix.
 * Instead of using Bower, AngularJS and its dependencies are fetched from a CDN
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts
index ea570e3cbf..ba8b01c246 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts
@@ -67,7 +67,10 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
 })
 export class AppModule {
   // #enddocregion bare
-  ngDoBootstrap() {}
+  constructor(private upgrade: UpgradeModule) { }
+  ngDoBootstrap() {
+    this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);
+  }
   // #docregion bare
 }
 // #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts
index 23a741c684..bbf091409d 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts
@@ -1,10 +1,6 @@
 // #docregion
 import { platformBrowser } from '@angular/platform-browser';
-import { UpgradeModule } from '@angular/upgrade/static';
 
 import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
 
-platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.documentElement, ['phonecatApp']);
-});
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/main.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/main.ts
index 886e8ffac8..2b978d046c 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/main.ts
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/main.ts
@@ -1,11 +1,6 @@
 // #docregion bootstrap
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { UpgradeModule } from '@angular/upgrade/static';
-
 import { AppModule } from './app.module';
 
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.documentElement, ['phonecatApp']);
-});
+platformBrowserDynamic().bootstrapModule(AppModule);
 // #enddocregion bootstrap
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
index 46a96d66c3..4068532de9 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
@@ -2,7 +2,7 @@
 <div *ngIf="phone">
   <div class="phone-images">
     <img [src]="img" class="phone"
-        [ngClass]="{selected: img === mainImageUrl}"
+        [ngClass]="{'selected': img === mainImageUrl}"
         *ngFor="let img of phone.images" />
   </div>
 
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts
index 1f51c6faa2..453df46d25 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts
@@ -11,7 +11,7 @@ import { Phone, PhoneData } from '../core/phone/phone.service';
 // #docregion downgrade-component
 @Component({
   selector: 'phone-list',
-  templateUrl: 'phone-list.template.html'
+  templateUrl: './phone-list.template.html'
 })
 export class PhoneListComponent {
   // #enddocregion downgrade-component
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
index 2ec8e37977..69e57d7151 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
@@ -1,20 +1,16 @@
 'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
-import { setProtractorToHybridMode } from '../protractor-helpers';
 
 // Angular E2E Testing Guide:
 // https://docs.angularjs.org/guide/e2e-testing
 
 describe('PhoneCat Application', function() {
 
-  beforeAll(function () {
-    setProtractorToHybridMode();
-  });
-
   it('should redirect `index.html` to `index.html#!/phones', function() {
     browser.get('index.html');
-    expect(browser.getLocationAbsUrl()).toBe('/phones');
+    browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine.
+    expect(browser.getCurrentUrl()).toMatch(/\/phones$/);
   });
 
   describe('View: Phone list', function() {
@@ -69,8 +65,8 @@ describe('PhoneCat Application', function() {
       query.sendKeys('nexus');
 
       element.all(by.css('.phones li a')).first().click();
-      browser.sleep(200); // Not sure why this is needed but it is. The route change works fine.
-      expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
+      browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine.
+      expect(browser.getCurrentUrl()).toMatch(/\/phones\/nexus-s$/);
     });
 
   });
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/package.ajs.json b/aio/content/examples/upgrade-phonecat-2-hybrid/package.ajs.json
deleted file mode 100644
index 54f73776dd..0000000000
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/package.ajs.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "name": "angular-phonecat",
-  "private": true,
-  "version": "0.0.0",
-  "description": "A tutorial application for AngularJS",
-  "repository": "https://github.com/angular/angular-phonecat",
-  "license": "MIT",
-  "devDependencies": {
-    "bower": "^1.7.7",
-    "http-server": "^0.9.0",
-    "jasmine-core": "^2.4.1",
-    "karma": "^0.13.22",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-firefox-launcher": "^0.1.7",
-    "karma-jasmine": "^0.3.8",
-    "protractor": "^3.2.2",
-    "shelljs": "^0.6.0"
-  },
-  "scripts": {
-    "postinstall": "bower install",
-
-    "prestart": "npm install",
-    "start": "http-server -a localhost -p 8000 -c-1 ./",
-
-    "pretest": "npm install",
-    "test": "karma start karma.conf.js",
-    "test-single-run": "karma start karma.conf.js --single-run",
-
-    "preupdate-webdriver": "npm install",
-    "update-webdriver": "webdriver-manager update",
-
-    "preprotractor": "npm run update-webdriver",
-    "protractor": "protractor e2e-tests/protractor.conf.js",
-
-    "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + sed(/sourceMappingURL=angular-loader.min.js.map/,'sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map','app/bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\""
-  }
-}
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js b/aio/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js
index 8197c44a89..199067dc0a 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js
@@ -10,6 +10,7 @@
       'npm:': '/node_modules/'
     },
     map: {
+      'ng-loader': '../src/systemjs-angular-loader.js',
       app: '/app',
       // #enddocregion paths
       // angular bundles
@@ -36,7 +37,12 @@
     packages: {
       'app': {
         main: './main.js',
-        defaultExtension: 'js'
+        defaultExtension: 'js',
+        meta: {
+          './*.js': {
+            loader: 'ng-loader'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json b/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json
index 58f9de3309..91807a25a9 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json
@@ -11,7 +11,7 @@
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "typeRoots": [
-      "../../node_modules/@types/"
+      "./node_modules/@types/"
     ]
   },
 
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig.json b/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig.json
index f267800f14..bdf16643ce 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig.json
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig.json
@@ -10,7 +10,7 @@
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "typeRoots": [
-      "../../node_modules/@types/"
+      "./node_modules/@types/"
     ]
   },
   "compileOnSave": true,
diff --git a/aio/content/examples/upgrade-phonecat-4-final/README.md b/aio/content/examples/upgrade-phonecat-3-final/README.md
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/README.md
rename to aio/content/examples/upgrade-phonecat-3-final/README.md
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/app-routing.module.ts b/aio/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/app/app-routing.module.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/app.component.ts b/aio/content/examples/upgrade-phonecat-3-final/app/app.component.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/app/app.component.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/app.component.ts
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.css b/aio/content/examples/upgrade-phonecat-3-final/app/app.css
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/app.css
rename to aio/content/examples/upgrade-phonecat-3-final/app/app.css
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/app.module.ts b/aio/content/examples/upgrade-phonecat-3-final/app/app.module.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/app/app.module.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/app.module.ts
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.spec.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.spec.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.spec.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.spec.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.ts b/aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/.gitkeep b/aio/content/examples/upgrade-phonecat-3-final/app/img/.gitkeep
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/.gitkeep
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/.gitkeep
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.1.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.1.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.1.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.2.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.2.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.2.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.3.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.3.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.3.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.3.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.4.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.4.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.4.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-streak-7.4.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-venue.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-venue.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-venue.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/dell-venue.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-2-global-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/droid-2-global-by-motorola.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-2-global-by-motorola.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/droid-2-global-by-motorola.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-pro-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/droid-pro-by-motorola.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-pro-by-motorola.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/droid-pro-by-motorola.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/lg-axis.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/lg-axis.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/lg-axis.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/lg-axis.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.1.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.1.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.1.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.2.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.2.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.2.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.3.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.3.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.3.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-atrix-4g.3.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-bravo-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-bravo-with-motoblur.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-charm-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-charm-with-motoblur.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-charm-with-motoblur.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-charm-with-motoblur.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-defy-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-defy-with-motoblur.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-defy-with-motoblur.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-defy-with-motoblur.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.1.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.2.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.3.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.4.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.5.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.1.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.1.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.1.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.2.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.2.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/motorola-xoom.2.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.1.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.1.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.1.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.1.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.2.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.2.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.2.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.2.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.3.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.3.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.3.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/nexus-s.3.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-galaxy-tab.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-galaxy-tab.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-galaxy-tab.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-galaxy-tab.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-gem.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-gem.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-gem.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-gem.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-transform.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-transform.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-transform.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/samsung-transform.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/sanyo-zio.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/sanyo-zio.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/sanyo-zio.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/sanyo-zio.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-g2.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-g2.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-g2.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-g2.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-mytouch-4g.0.jpg b/aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-mytouch-4g.0.jpg
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-mytouch-4g.0.jpg
rename to aio/content/examples/upgrade-phonecat-3-final/app/img/phones/t-mobile-mytouch-4g.0.jpg
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/main.ts b/aio/content/examples/upgrade-phonecat-3-final/app/main.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/app/main.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/main.ts
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.spec.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts
similarity index 90%
rename from aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts
index dd47f746f6..95aeca20e0 100644
--- a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.ts
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts
@@ -14,7 +14,7 @@ export class PhoneDetailComponent {
   mainImageUrl: string;
 
   constructor(activatedRoute: ActivatedRoute, phone: Phone) {
-    phone.get(activatedRoute.snapshot.params['phoneId'])
+    phone.get(activatedRoute.snapshot.paramMap.get('phoneId'))
       .subscribe((p: PhoneData) => {
         this.phone = p;
         this.setImage(p.images[0]);
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
similarity index 98%
rename from aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.template.html
rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
index 46a96d66c3..4068532de9 100644
--- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.template.html
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
@@ -2,7 +2,7 @@
 <div *ngIf="phone">
   <div class="phone-images">
     <img [src]="img" class="phone"
-        [ngClass]="{selected: img === mainImageUrl}"
+        [ngClass]="{'selected': img === mainImageUrl}"
         *ngFor="let img of phone.images" />
   </div>
 
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.spec.ts b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.spec.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.ts
rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.template.html
rename to aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/dell-streak-7.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/dell-streak-7.json
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/dell-streak-7.json
rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/dell-streak-7.json
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-atrix-4g.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-atrix-4g.json
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-atrix-4g.json
rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-atrix-4g.json
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom-with-wi-fi.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom-with-wi-fi.json
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom-with-wi-fi.json
rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom-with-wi-fi.json
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom.json
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom.json
rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom.json
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/nexus-s.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/nexus-s.json
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/nexus-s.json
rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/nexus-s.json
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phones/phones.json b/aio/content/examples/upgrade-phonecat-3-final/app/phones/phones.json
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/app/phones/phones.json
rename to aio/content/examples/upgrade-phonecat-3-final/app/phones/phones.json
diff --git a/aio/content/examples/upgrade-phonecat-4-final/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/e2e-spec.ts
rename to aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts
diff --git a/aio/content/examples/upgrade-phonecat-3-router/example-config.json b/aio/content/examples/upgrade-phonecat-3-final/example-config.json
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-3-router/example-config.json
rename to aio/content/examples/upgrade-phonecat-3-final/example-config.json
diff --git a/aio/content/examples/upgrade-phonecat-4-final/index.html b/aio/content/examples/upgrade-phonecat-3-final/index.html
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/index.html
rename to aio/content/examples/upgrade-phonecat-3-final/index.html
diff --git a/aio/content/examples/upgrade-phonecat-3-final/run-unit-tests.sh b/aio/content/examples/upgrade-phonecat-3-final/run-unit-tests.sh
new file mode 100644
index 0000000000..d90e45c2e9
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/run-unit-tests.sh
@@ -0,0 +1,6 @@
+## The boilerplate Karma configuration won't work with AngularJS tests
+## which require their own special loading configuration, `karma.conf.ng1.js`.
+## This scripts runs the AngularJS tests with that AngularJS config.
+
+PATH=$(npm bin):$PATH
+tsc && karma start karma.conf.ng1.js
diff --git a/aio/content/examples/upgrade-phonecat-4-final/systemjs.config.1.js b/aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js
similarity index 100%
rename from aio/content/examples/upgrade-phonecat-4-final/systemjs.config.1.js
rename to aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js
diff --git a/aio/content/examples/upgrade-phonecat-4-final/tsconfig.json b/aio/content/examples/upgrade-phonecat-3-final/tsconfig.json
similarity index 92%
rename from aio/content/examples/upgrade-phonecat-4-final/tsconfig.json
rename to aio/content/examples/upgrade-phonecat-3-final/tsconfig.json
index f267800f14..bdf16643ce 100644
--- a/aio/content/examples/upgrade-phonecat-4-final/tsconfig.json
+++ b/aio/content/examples/upgrade-phonecat-3-final/tsconfig.json
@@ -10,7 +10,7 @@
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "typeRoots": [
-      "../../node_modules/@types/"
+      "./node_modules/@types/"
     ]
   },
   "compileOnSave": true,
diff --git a/aio/content/examples/upgrade-phonecat-3-router/.gitignore b/aio/content/examples/upgrade-phonecat-3-router/.gitignore
deleted file mode 100644
index 7f5c313a3e..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/.gitignore
+++ /dev/null
@@ -1,7 +0,0 @@
-**/*.js
-aot/**/*
-!aot/bs-config.json
-!aot/index.html
-!copy-dist-files.js
-!rollup-config.js
-!systemjs.config.1.js
diff --git a/aio/content/examples/upgrade-phonecat-3-router/README.md b/aio/content/examples/upgrade-phonecat-3-router/README.md
deleted file mode 100644
index 4f8e4928af..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/README.md
+++ /dev/null
@@ -1,34 +0,0 @@
-This is the Angular Phonecat application adjusted to fit our boilerplate project
-structure.
-
-The following changes from vanilla Phonecat are applied:
-
-* Karma config for unit tests is in karma.conf.ng1.js because the boilerplate
-  Karma config is not compatible with the way Angular 1 tests need to be run.
-  The shell script run-unit-tests.sh can be used to run the unit tests.
-* There's a `package.ng1.json`, which is not used to run anything but only to
-  show an example of changing the PhoneCat http-server root path.
-* Also for the Karma shim, there is a `karma-test-shim.1.js` file which isn't
-  used but is shown in the test appendix.
-* Instead of using Bower, Angular 1 and its dependencies are fetched from a CDN
-  in index.html and karma.conf.ng1.js.
-* E2E tests have been moved to the parent directory, where `run-e2e-tests` can
-  discover and run them along with all the other examples.
-* Most of the phone JSON and image data removed in the interest of keeping
-  repo weight down. Keeping enough to retain testability of the app.
-
-## Running the app
-
-Start like any example
-
-    npm run start
-
-## Running unit tests
-
-    ./run-unit-tests.sh
-
-## Running E2E tests
-
-Like for any example (at the project root):
-
-    gulp run-e2e-tests --filter=phonecat-2
diff --git a/aio/content/examples/upgrade-phonecat-3-router/aot/index.html b/aio/content/examples/upgrade-phonecat-3-router/aot/index.html
deleted file mode 100644
index 0d6cf5946e..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/aot/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- #docregion -->
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-
-    <base href="/app/">
-
-    <title>Google Phone Gallery</title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="app.css" />
-    <link rel="stylesheet" href="app.animations.css" />
-
-    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
-    <script src="https://code.angularjs.org/1.5.5/angular.js"></script>
-    <script src="https://code.angularjs.org/1.5.5/angular-animate.js"></script>
-    <script src="https://code.angularjs.org/1.5.5/angular-resource.js"></script>
-    <script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
-
-    <script src="app.module.ajs.js"></script>
-    <script src="app.config.js"></script>
-    <script src="app.animations.js"></script>
-    <script src="core/core.module.js"></script>
-    <script src="core/phone/phone.module.js"></script>
-    <script src="phone-list/phone-list.module.js"></script>
-    <script src="phone-detail/phone-detail.module.js"></script>
-
-    <script src="/node_modules/core-js/client/shim.min.js"></script>
-    <script src="/node_modules/zone.js/dist/zone.min.js"></script>
-
-    <script>window.module = 'aot';</script>
-  </head>
-
-  <body>
-    <phonecat-app></phonecat-app>
-  </body>
-  <script src="/dist/build.js"></script>
-</html>
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/ajs-upgraded-providers.ts b/aio/content/examples/upgrade-phonecat-3-router/app/ajs-upgraded-providers.ts
deleted file mode 100644
index f6e1654d74..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/ajs-upgraded-providers.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-export abstract class RouteParams {
-  [key: string]: string;
-}
-
-export function routeParamsFactory(i: any) {
-  return i.get('$routeParams');
-}
-
-export const routeParamsProvider = {
-  provide: RouteParams,
-  useFactory: routeParamsFactory,
-  deps: ['$injector']
-};
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app-routing.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app-routing.module.ts
deleted file mode 100644
index 0485b1848d..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/app-routing.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router';
-import { APP_BASE_HREF, HashLocationStrategy, LocationStrategy } from '@angular/common';
-
-import { PhoneListComponent }   from './phone-list/phone-list.component';
-
-export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
-  shouldProcessUrl(url: UrlTree) {
-    return url.toString() === '/' || url.toString() === '/phones';
-  }
-  extract(url: UrlTree) { return url; }
-  merge(url: UrlTree, whole: UrlTree) { return url; }
-}
-
-const routes: Routes = [
-  { path: '', redirectTo: 'phones', pathMatch: 'full' },
-  { path: 'phones', component: PhoneListComponent }
-];
-
-@NgModule({
-  imports: [ RouterModule.forRoot(routes) ],
-  exports: [ RouterModule ],
-  providers: [
-    { provide: APP_BASE_HREF, useValue: '!' },
-    { provide: LocationStrategy, useClass: HashLocationStrategy },
-    { provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
-  ]
-})
-export class AppRoutingModule { }
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.css b/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.css
deleted file mode 100644
index 175320b509..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.css
+++ /dev/null
@@ -1,67 +0,0 @@
-/* Animate `ngRepeat` in `phoneList` component */
-.phone-list-item.ng-enter,
-.phone-list-item.ng-leave,
-.phone-list-item.ng-move {
-  overflow: hidden;
-  transition: 0.5s linear all;
-}
-
-.phone-list-item.ng-enter,
-.phone-list-item.ng-leave.ng-leave-active,
-.phone-list-item.ng-move {
-  height: 0;
-  margin-bottom: 0;
-  opacity: 0;
-  padding-bottom: 0;
-  padding-top: 0;
-}
-
-.phone-list-item.ng-enter.ng-enter-active,
-.phone-list-item.ng-leave,
-.phone-list-item.ng-move.ng-move-active {
-  height: 120px;
-  margin-bottom: 20px;
-  opacity: 1;
-  padding-bottom: 4px;
-  padding-top: 15px;
-}
-
-/* Animate view transitions with `ngView` */
-.view-container {
-  position: relative;
-}
-
-.view-frame {
-  margin-top: 20px;
-}
-
-.view-frame.ng-enter,
-.view-frame.ng-leave {
-  background: white;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.view-frame.ng-enter {
-  animation: 1s fade-in;
-  z-index: 100;
-}
-
-.view-frame.ng-leave {
-  animation: 1s fade-out;
-  z-index: 99;
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-@keyframes fade-out {
-  from { opacity: 1; }
-  to   { opacity: 0; }
-}
-
-/* Older browsers might need vendor-prefixes for keyframes and animation! */
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.ts
deleted file mode 100644
index f0739b6405..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-'use strict';
-
-angular.
-  module('phonecatApp').
-  animation('.phone', function phoneAnimationFactory() {
-    return {
-      addClass: animateIn,
-      removeClass: animateOut
-    };
-
-    function animateIn(element: JQuery, className: string, done: () => void) {
-      if (className !== 'selected') { return; }
-
-      element.css({
-        display: 'block',
-        position: 'absolute',
-        top: 500,
-        left: 0
-      }).animate({
-        top: 0
-      }, done);
-
-      return function animateInEnd(wasCanceled: boolean) {
-        if (wasCanceled) { element.stop(); }
-      };
-    }
-
-    function animateOut(element: JQuery, className: string, done: () => void) {
-      if (className !== 'selected') { return; }
-
-      element.css({
-        position: 'absolute',
-        top: 0,
-        left: 0
-      }).animate({
-        top: -500
-      }, done);
-
-      return function animateOutEnd(wasCanceled: boolean) {
-        if (wasCanceled) { element.stop(); }
-      };
-    }
-  });
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.component.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.component.ts
deleted file mode 100644
index 6ecd19ab80..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/app.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'phonecat-app',
-  template: `
-    <router-outlet></router-outlet>
-    <div class="view-container">
-      <div ng-view class="view-frame"></div>
-    </div>
-  `
-})
-export class AppComponent { }
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.config.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.config.ts
deleted file mode 100644
index 51a5d82422..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/app.config.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-'use strict';
-
-angular.
-  module('phonecatApp').
-  config(['$locationProvider', '$routeProvider',
-    function config($locationProvider: angular.ILocationProvider,
-                    $routeProvider: angular.route.IRouteProvider) {
-      $locationProvider.hashPrefix('!');
-      // #docregion ajs-routes
-      $routeProvider
-        .when('/phones/:phoneId', {
-          template: '<phone-detail></phone-detail>'
-        });
-      // #enddocregion ajs-routes
-    }
-  ]);
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ajs.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ajs.ts
deleted file mode 100644
index e493137966..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ajs.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-'use strict';
-
-// Define the `phonecatApp` Angular 1 module
-angular.module('phonecatApp', [
-  'ngAnimate',
-  'ngRoute',
-  'core',
-  'phoneDetail',
-  'phoneList',
-]);
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ts
deleted file mode 100644
index e0bb64f4e4..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { UpgradeModule } from '@angular/upgrade/static';
-import { HttpModule } from '@angular/http';
-import { FormsModule } from '@angular/forms';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent }     from './app.component';
-import { Phone } from './core/phone/phone.service';
-import { CheckmarkPipe } from './core/checkmark/checkmark.pipe';
-import { PhoneListComponent } from './phone-list/phone-list.component';
-import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
-import { routeParamsProvider } from './ajs-upgraded-providers';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    UpgradeModule,
-    HttpModule,
-    FormsModule,
-    AppRoutingModule
-  ],
-  declarations: [
-    AppComponent,
-    PhoneListComponent,
-    PhoneDetailComponent,
-    CheckmarkPipe
-  ],
-  entryComponents: [
-    PhoneListComponent,
-    PhoneDetailComponent
-  ],
-  providers: [
-    Phone,
-    routeParamsProvider
-  ],
-  // #docregion bootstrap
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-// #enddocregion bootstrap
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.spec.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.spec.ts
deleted file mode 100644
index f7485ec2ba..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { CheckmarkPipe } from './checkmark.pipe';
-
-describe('CheckmarkPipe', function() {
-
-  it('should convert boolean values to unicode checkmark or cross', function () {
-    const checkmarkPipe = new CheckmarkPipe();
-    expect(checkmarkPipe.transform(true)).toBe('\u2713');
-    expect(checkmarkPipe.transform(false)).toBe('\u2718');
-  });
-});
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/core.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/core.module.ts
deleted file mode 100644
index 84a91dc7a6..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/core/core.module.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-'use strict';
-
-// Define the `core` module
-angular.module('core', ['core.phone']);
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.module.ts
deleted file mode 100644
index 0b6b348899..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.module.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-'use strict';
-
-// Define the `core.phone` module
-angular.module('core.phone', ['ngResource']);
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.spec.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.spec.ts
deleted file mode 100644
index a0c1655c20..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.spec.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-// #docregion
-import { inject, TestBed } from '@angular/core/testing';
-import {
-  Http,
-  BaseRequestOptions,
-  ResponseOptions,
-  Response
-} from '@angular/http';
-import { MockBackend, MockConnection } from '@angular/http/testing';
-import { Phone, PhoneData } from './phone.service';
-
-describe('Phone', function() {
-  let phone: Phone;
-  let phonesData: PhoneData[] = [
-    {name: 'Phone X', snippet: '', images: []},
-    {name: 'Phone Y', snippet: '', images: []},
-    {name: 'Phone Z', snippet: '', images: []}
-  ];
-  let mockBackend: MockBackend;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        Phone,
-        MockBackend,
-        BaseRequestOptions,
-        { provide: Http,
-          useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options),
-          deps: [MockBackend, BaseRequestOptions]
-        }
-      ]
-    });
-  });
-
-  beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => {
-    mockBackend = _mockBackend_;
-    phone = _phone_;
-  }));
-
-  it('should fetch the phones data from `/phones/phones.json`', (done: () => void) => {
-    mockBackend.connections.subscribe((conn: MockConnection) => {
-      conn.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)})));
-    });
-    phone.query().subscribe(result => {
-      expect(result).toEqual(phonesData);
-      done();
-    });
-  });
-
-});
-
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.ts
deleted file mode 100644
index ccbd1fdd72..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { Observable } from 'rxjs/Rx';
-
-declare var angular: angular.IAngularStatic;
-import { downgradeInjectable } from '@angular/upgrade/static';
-
-import 'rxjs/add/operator/map';
-
-export interface PhoneData {
-  name: string;
-  snippet: string;
-  images: string[];
-}
-
-@Injectable()
-export class Phone {
-  constructor(private http: Http) { }
-  query(): Observable<PhoneData[]> {
-    return this.http.get(`phones/phones.json`)
-      .map((res: Response) => res.json());
-  }
-  get(id: string): Observable<PhoneData> {
-    return this.http.get(`phones/${id}.json`)
-      .map((res: Response) => res.json());
-  }
-}
-
-angular.module('core.phone')
-  .factory('phone', downgradeInjectable(Phone));
-
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/main-aot.ts b/aio/content/examples/upgrade-phonecat-3-router/app/main-aot.ts
deleted file mode 100644
index 23a741c684..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/main-aot.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { platformBrowser } from '@angular/platform-browser';
-import { UpgradeModule } from '@angular/upgrade/static';
-
-import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
-
-platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.documentElement, ['phonecatApp']);
-});
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/main.ts b/aio/content/examples/upgrade-phonecat-3-router/app/main.ts
deleted file mode 100644
index 51b8e4d2a8..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/main.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { UpgradeModule } from '@angular/upgrade/static';
-
-import { AppModule } from './app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
-  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
-  upgrade.bootstrap(document.documentElement, ['phonecatApp']);
-});
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.ts
deleted file mode 100644
index 32a3d40790..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// #docplaster
-// #docregion
-declare var angular: angular.IAngularStatic;
-import { downgradeComponent } from '@angular/upgrade/static';
-import { Component } from '@angular/core';
-
-import { Phone, PhoneData } from '../core/phone/phone.service';
-import { RouteParams } from '../ajs-upgraded-providers';
-
-@Component({
-  templateUrl: 'phone-detail.template.html',
-})
-export class PhoneDetailComponent {
-  phone: PhoneData;
-  mainImageUrl: string;
-
-  constructor(routeParams: RouteParams, phone: Phone) {
-    phone.get(routeParams['phoneId']).subscribe(phone => {
-      this.phone = phone;
-      this.setImage(phone.images[0]);
-    });
-  }
-
-  setImage(imageUrl: string) {
-    this.mainImageUrl = imageUrl;
-  }
-}
-
-angular.module('phoneDetail')
-  .directive(
-    'phoneDetail',
-    downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory
-  );
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.module.ts
deleted file mode 100644
index fd7cb3b920..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.module.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-// Define the `phoneDetail` module
-angular.module('phoneDetail', [
-  'ngRoute',
-  'core.phone'
-]);
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.spec.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.spec.ts
deleted file mode 100644
index 2bb9d2b62f..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.spec.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-/* tslint:disable */
-// #docregion
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Rx';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { SpyLocation } from '@angular/common/testing';
-
-import { PhoneListComponent } from './phone-list.component';
-import { Phone, PhoneData } from '../core/phone/phone.service';
-
-class ActivatedRouteMock {
-  constructor(public snapshot: any) {}
-}
-
-class MockPhone {
-  query(): Observable<PhoneData[]> {
-    return Observable.of([
-      {name: 'Nexus S', snippet: '', images: []},
-      {name: 'Motorola DROID', snippet: '', images: []}
-    ]);
-  }
-}
-
-let fixture: ComponentFixture<PhoneListComponent>;
-
-describe('PhoneList', () => {
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PhoneListComponent ],
-      providers: [
-        { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) },
-        { provide: Location, useClass: SpyLocation },
-        { provide: Phone, useClass: MockPhone },
-      ],
-      schemas: [ NO_ERRORS_SCHEMA ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PhoneListComponent);
-  });
-
-  it('should create "phones" model with 2 phones fetched from xhr', () => {
-    fixture.detectChanges();
-    let compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelectorAll('.phone-list-item').length).toBe(2);
-    expect(
-      compiled.querySelector('.phone-list-item:nth-child(1)').textContent
-    ).toContain('Motorola DROID');
-    expect(
-      compiled.querySelector('.phone-list-item:nth-child(2)').textContent
-    ).toContain('Nexus S');
-  });
-
-  xit('should set the default value of orderProp model', () => {
-    fixture.detectChanges();
-    let compiled = fixture.debugElement.nativeElement;
-    expect(
-      compiled.querySelector('select option:last-child').selected
-    ).toBe(true);
-  });
-
-});
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.ts
deleted file mode 100644
index 40f522bec8..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-// #docregion
-declare var angular: angular.IAngularStatic;
-import { downgradeComponent } from '@angular/upgrade/static';
-
-import { Component } from '@angular/core';
-import { Phone, PhoneData } from '../core/phone/phone.service';
-
-@Component({
-  templateUrl: 'phone-list.template.html'
-})
-export class PhoneListComponent {
-  phones: PhoneData[];
-  query: string;
-  orderProp: string;
-
-  constructor(phone: Phone) {
-    phone.query().subscribe(phones => {
-      this.phones = phones;
-    });
-    this.orderProp = 'age';
-  }
-
-  getPhones(): PhoneData[] {
-    return this.sortPhones(this.filterPhones(this.phones));
-  }
-
-  private filterPhones(phones: PhoneData[]) {
-    if (phones && this.query) {
-      return phones.filter(phone => {
-        let name = phone.name.toLowerCase();
-        let snippet = phone.snippet.toLowerCase();
-        return name.indexOf(this.query) >= 0 || snippet.indexOf(this.query) >= 0;
-      });
-    }
-    return phones;
-  }
-
-  private sortPhones(phones: PhoneData[]) {
-    if (phones && this.orderProp) {
-      return phones
-        .slice(0) // Make a copy
-        .sort((a, b) => {
-          if (a[this.orderProp] < b[this.orderProp]) {
-            return -1;
-          } else if ([b[this.orderProp] < a[this.orderProp]]) {
-            return 1;
-          } else {
-            return 0;
-          }
-        });
-    }
-    return phones;
-  }
-}
-
-angular.module('phoneList')
-  .directive(
-    'phoneList',
-    downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory
-  );
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.module.ts
deleted file mode 100644
index 8ade7c5b88..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.module.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-'use strict';
-
-// Define the `phoneList` module
-angular.module('phoneList', ['core.phone']);
diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.template.html
deleted file mode 100644
index 2678d384c2..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.template.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<div class="container-fluid">
-  <div class="row">
-    <div class="col-md-2">
-      <!--Sidebar content-->
-
-      <p>
-        Search:
-        <input [(ngModel)]="query" />
-      </p>
-
-      <p>
-        Sort by:
-        <select [(ngModel)]="orderProp">
-          <option value="name">Alphabetical</option>
-          <option value="age">Newest</option>
-        </select>
-      </p>
-
-    </div>
-    <div class="col-md-10">
-      <!--Body content-->
-
-      <!-- #docregion list -->
-      <ul class="phones">
-        <li *ngFor="let phone of getPhones()"
-            class="thumbnail phone-list-item">
-          <a [routerLink]="['/phones', phone.id]" class="thumb">
-            <img [src]="phone.imageUrl" [alt]="phone.name" />
-          </a>
-          <a [routerLink]="['/phones', phone.id]" class="name">{{phone.name}}</a>
-          <p>{{phone.snippet}}</p>
-        </li>
-      </ul>
-      <!-- #enddocregion list -->
-
-    </div>
-  </div>
-</div>
diff --git a/aio/content/examples/upgrade-phonecat-3-router/bs-config.aot.json b/aio/content/examples/upgrade-phonecat-3-router/bs-config.aot.json
deleted file mode 100644
index e59a7403a0..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/bs-config.aot.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "open": false,
-  "logLevel": "silent",
-  "port": 8080,
-  "server": {
-    "baseDir": "aot",
-    "routes": {
-      "/node_modules": "node_modules"
-    },
-    "middleware": {
-      "0": null
-    }
-  }
-}
diff --git a/aio/content/examples/upgrade-phonecat-3-router/copy-dist-files.js b/aio/content/examples/upgrade-phonecat-3-router/copy-dist-files.js
deleted file mode 100644
index a857af085c..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/copy-dist-files.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// #docregion
-var fsExtra = require('fs-extra');
-var resources = [
-  // polyfills
-  'node_modules/core-js/client/shim.min.js',
-  'node_modules/zone.js/dist/zone.min.js',
-  // css
-  'app/app.css',
-  'app/app.animations.css',
-  // images and json files
-  'app/img/',
-  'app/phones/',
-  // app files
-  'app/app.module.ajs.js',
-  'app/app.config.js',
-  'app/app.animations.js',
-  'app/core/core.module.js',
-  'app/core/phone/phone.module.js',
-  'app/phone-list/phone-list.module.js',
-  'app/phone-detail/phone-detail.module.js'
-];
-resources.map(function(sourcePath) {
-  var destPath = `aot/${sourcePath}`;
-  fsExtra.copySync(sourcePath, destPath);
-});
diff --git a/aio/content/examples/upgrade-phonecat-3-router/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-3-router/e2e-spec.ts
deleted file mode 100644
index 2ec8e37977..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/e2e-spec.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-import { setProtractorToHybridMode } from '../protractor-helpers';
-
-// Angular E2E Testing Guide:
-// https://docs.angularjs.org/guide/e2e-testing
-
-describe('PhoneCat Application', function() {
-
-  beforeAll(function () {
-    setProtractorToHybridMode();
-  });
-
-  it('should redirect `index.html` to `index.html#!/phones', function() {
-    browser.get('index.html');
-    expect(browser.getLocationAbsUrl()).toBe('/phones');
-  });
-
-  describe('View: Phone list', function() {
-
-    beforeEach(function() {
-      browser.get('index.html#!/phones');
-    });
-
-    it('should filter the phone list as a user types into the search box', function() {
-      let phoneList = element.all(by.css('.phones li'));
-      let query = element(by.css('input'));
-
-      expect(phoneList.count()).toBe(20);
-
-      query.sendKeys('nexus');
-      expect(phoneList.count()).toBe(1);
-
-      query.clear();
-      query.sendKeys('motorola');
-      expect(phoneList.count()).toBe(8);
-    });
-
-    it('should be possible to control phone order via the drop-down menu', function() {
-      let queryField = element(by.css('input'));
-      let orderSelect = element(by.css('select'));
-      let nameOption = orderSelect.element(by.css('option[value="name"]'));
-      let phoneNameColumn = element.all(by.css('.phones .name'));
-
-      function getNames() {
-        return phoneNameColumn.map(function(elem) {
-          return elem.getText();
-        });
-      }
-
-      queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
-
-      expect(getNames()).toEqual([
-        'Motorola XOOM\u2122 with Wi-Fi',
-        'MOTOROLA XOOM\u2122'
-      ]);
-
-      nameOption.click();
-
-      expect(getNames()).toEqual([
-        'MOTOROLA XOOM\u2122',
-        'Motorola XOOM\u2122 with Wi-Fi'
-      ]);
-    });
-
-    it('should render phone specific links', function() {
-      let query = element(by.css('input'));
-      query.sendKeys('nexus');
-
-      element.all(by.css('.phones li a')).first().click();
-      browser.sleep(200); // Not sure why this is needed but it is. The route change works fine.
-      expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
-    });
-
-  });
-
-  describe('View: Phone detail', function() {
-
-    beforeEach(function() {
-      browser.get('index.html#!/phones/nexus-s');
-    });
-
-    it('should display the `nexus-s` page', function() {
-      expect(element(by.css('h1')).getText()).toBe('Nexus S');
-    });
-
-    it('should display the first phone image as the main phone image', function() {
-      let mainImage = element(by.css('img.phone.selected'));
-
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
-    });
-
-    it('should swap the main image when clicking on a thumbnail image', function() {
-      let mainImage = element(by.css('img.phone.selected'));
-      let thumbnails = element.all(by.css('.phone-thumbs img'));
-
-      thumbnails.get(2).click();
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
-
-      thumbnails.get(0).click();
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
-    });
-
-  });
-
-});
diff --git a/aio/content/examples/upgrade-phonecat-3-router/index.html b/aio/content/examples/upgrade-phonecat-3-router/index.html
deleted file mode 100644
index 572c80d315..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!-- #docplaster -->
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <!-- #docregion base -->
-    <base href="/app/">
-    <!-- #enddocregion base -->
-    <title>Google Phone Gallery</title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="app.css" />
-    <link rel="stylesheet" href="app.animations.css" />
-
-    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
-    <script src="https://code.angularjs.org/1.5.5/angular.js"></script>
-    <script src="https://code.angularjs.org/1.5.5/angular-animate.js"></script>
-    <script src="https://code.angularjs.org/1.5.5/angular-resource.js"></script>
-    <script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
-
-    <script src="app.module.ajs.js"></script>
-    <script src="app.config.js"></script>
-    <script src="app.animations.js"></script>
-    <script src="core/core.module.js"></script>
-    <script src="core/phone/phone.module.js"></script>
-    <script src="phone-list/phone-list.module.js"></script>
-    <script src="phone-detail/phone-detail.module.js"></script>
-
-    <script src="/node_modules/core-js/client/shim.min.js"></script>
-    <script src="/node_modules/zone.js/dist/zone.min.js"></script>
-    <script src="/node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="/node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="/systemjs.config.1.js"></script>
-
-    <script>
-      System.import('/app');
-    </script>
-  </head>
-  <!-- #docregion appcomponent -->
-  <body>
-    <phonecat-app></phonecat-app>
-  </body>
-  <!-- #enddocregion appcomponent -->
-</html>
diff --git a/aio/content/examples/upgrade-phonecat-3-router/rollup-config.js b/aio/content/examples/upgrade-phonecat-3-router/rollup-config.js
deleted file mode 100644
index aeb227689c..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/rollup-config.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docregion
-import rollup      from 'rollup'
-import nodeResolve from 'rollup-plugin-node-resolve'
-import commonjs    from 'rollup-plugin-commonjs';
-import uglify      from 'rollup-plugin-uglify'
-
-//paths are relative to the execution path
-export default {
-  entry: 'app/main-aot.js',
-  dest: 'aot/dist/build.js', // output a single application bundle
-  sourceMap: true,
-  sourceMapFile: 'aot/dist/build.js.map',
-  format: 'iife',
-  plugins: [
-    nodeResolve({jsnext: true, module: true}),
-    commonjs({
-      include: ['node_modules/rxjs/**']
-    }),
-    uglify()
-  ]
-}
diff --git a/aio/content/examples/upgrade-phonecat-3-router/systemjs.config.1.js b/aio/content/examples/upgrade-phonecat-3-router/systemjs.config.1.js
deleted file mode 100644
index b801d42bad..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/systemjs.config.1.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * System configuration for Angular samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-  // #docregion paths
-  System.config({
-    paths: {
-      // paths serve as alias
-      'npm:': '/node_modules/'
-    },
-    map: {
-      app: '/app',
-      // #enddocregion paths
-      // angular bundles
-      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
-      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
-
-      // other libraries
-      'rxjs':                      'npm:rxjs',
-      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
-      // #docregion paths
-    },
-    // #enddocregion paths
-    // packages tells the System loader how to load when no filename and/or no extension
-    packages: {
-      'app': {
-        main: './main.js',
-        defaultExtension: 'js'
-      },
-      rxjs: {
-        defaultExtension: 'js'
-      },
-      'angular-in-memory-web-api': {
-        main: './index.js',
-        defaultExtension: 'js'
-      }
-    }
-  });
-})(this);
diff --git a/aio/content/examples/upgrade-phonecat-3-router/tsconfig-aot.json b/aio/content/examples/upgrade-phonecat-3-router/tsconfig-aot.json
deleted file mode 100644
index 58f9de3309..0000000000
--- a/aio/content/examples/upgrade-phonecat-3-router/tsconfig-aot.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es2015", "dom"],
-    "removeComments": false,
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "typeRoots": [
-      "../../node_modules/@types/"
-    ]
-  },
-
-  "files": [
-    "app/app.module.ts",
-    "app/main-aot.ts"
-  ],
-
-  "angularCompilerOptions": {
-   "genDir": "aot",
-   "skipMetadataEmit" : true
- }
-}
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/app.css b/aio/content/examples/upgrade-phonecat-4-final/app/app.css
deleted file mode 100644
index f4b45b02a5..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/app/app.css
+++ /dev/null
@@ -1,93 +0,0 @@
-body {
-  padding: 20px;
-}
-
-h1 {
-  border-bottom: 1px solid gray;
-  margin-top: 0;
-}
-
-/* View: Phone list */
-.phones {
-  list-style: none;
-}
-
-.phones li {
-  clear: both;
-  height: 115px;
-  padding-top: 15px;
-}
-
-.thumb {
-  float: left;
-  height: 100px;
-  margin: -0.5em 1em 1.5em 0;
-  padding-bottom: 1em;
-  width: 100px;
-}
-
-/* View: Phone detail */
-.phone {
-  background-color: white;
-  display: none;
-  float: left;
-  height: 400px;
-  margin-bottom: 2em;
-  margin-right: 3em;
-  padding: 2em;
-  width: 400px;
-}
-
-.phone:first-child {
-  display: block;
-}
-
-.phone-images {
-  background-color: white;
-  float: left;
-  height: 450px;
-  overflow: hidden;
-  position: relative;
-  width: 450px;
-}
-
-.phone-thumbs {
-  list-style: none;
-  margin: 0;
-}
-
-.phone-thumbs img {
-  height: 100px;
-  padding: 1em;
-  width: 100px;
-}
-
-.phone-thumbs li {
-  background-color: white;
-  border: 1px solid black;
-  cursor: pointer;
-  display: inline-block;
-  margin: 1em;
-}
-
-.specs {
-  clear: both;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.specs dt {
-  font-weight: bold;
-}
-
-.specs > li {
-  display: inline-block;
-  vertical-align: top;
-  width: 200px;
-}
-
-.specs > li > span {
-  font-size: 1.2em;
-  font-weight: bold;
-}
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.ts b/aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.ts
deleted file mode 100644
index 888017e15c..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({name: 'checkmark'})
-export class CheckmarkPipe implements PipeTransform {
-  transform(input: boolean) {
-    return input ? '\u2713' : '\u2718';
-  }
-}
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/.gitkeep b/aio/content/examples/upgrade-phonecat-4-final/app/img/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.0.jpg
deleted file mode 100644
index 7ce0dce4ee..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.1.jpg
deleted file mode 100644
index ed8cad89fb..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.1.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.2.jpg
deleted file mode 100644
index c83529e0f9..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.2.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.3.jpg
deleted file mode 100644
index cd2c30280d..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.3.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.4.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.4.jpg
deleted file mode 100644
index b4d8472da8..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.4.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-venue.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-venue.0.jpg
deleted file mode 100644
index b4cb4eb25f..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-venue.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-2-global-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-2-global-by-motorola.0.jpg
deleted file mode 100644
index 60700a2ab3..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-2-global-by-motorola.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-pro-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-pro-by-motorola.0.jpg
deleted file mode 100644
index c7710de986..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-pro-by-motorola.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/lg-axis.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/lg-axis.0.jpg
deleted file mode 100644
index 55e5a23bb2..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/lg-axis.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.0.jpg
deleted file mode 100644
index 2446159e93..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.1.jpg
deleted file mode 100644
index 867f207459..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.1.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.2.jpg
deleted file mode 100644
index 27d78338c4..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.2.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.3.jpg
deleted file mode 100644
index 29459a68a4..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.3.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg
deleted file mode 100644
index e452ae7e7c..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-charm-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-charm-with-motoblur.0.jpg
deleted file mode 100644
index 21e4b8d741..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-charm-with-motoblur.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-defy-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-defy-with-motoblur.0.jpg
deleted file mode 100644
index c7c5e3ba0c..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-defy-with-motoblur.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg
deleted file mode 100644
index a6c993291e..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg
deleted file mode 100644
index 400b89e2df..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg
deleted file mode 100644
index 86b55d28dd..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg
deleted file mode 100644
index 85ec293ae5..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg
deleted file mode 100644
index 75ef1464cb..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg
deleted file mode 100644
index 4d42db4330..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.0.jpg
deleted file mode 100644
index bf6954bbd5..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.1.jpg
deleted file mode 100644
index 659688a47d..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.1.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.2.jpg
deleted file mode 100644
index ce0ff1002e..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.2.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.0.jpg
deleted file mode 100644
index 0952bc79c2..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.1.jpg
deleted file mode 100644
index f33004dd7f..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.1.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.2.jpg
deleted file mode 100644
index c5c63621f1..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.2.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.3.jpg
deleted file mode 100644
index e51f75b0ed..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.3.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-galaxy-tab.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-galaxy-tab.0.jpg
deleted file mode 100644
index 3750377ad9..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-galaxy-tab.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-gem.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-gem.0.jpg
deleted file mode 100644
index 0d5024a026..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-gem.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg
deleted file mode 100644
index 11b8f860cb..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg
deleted file mode 100644
index 11b8f860cb..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-transform.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-transform.0.jpg
deleted file mode 100644
index 0e3107caf5..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-transform.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/sanyo-zio.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/sanyo-zio.0.jpg
deleted file mode 100644
index 9eeb9b96ed..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/sanyo-zio.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-g2.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-g2.0.jpg
deleted file mode 100644
index 6b6c09e058..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-g2.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-mytouch-4g.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-mytouch-4g.0.jpg
deleted file mode 100644
index beba1f6827..0000000000
Binary files a/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-mytouch-4g.0.jpg and /dev/null differ
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.spec.ts
deleted file mode 100644
index e3b9143a94..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.spec.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-// #docregion
-// #docregion activatedroute
-import { ActivatedRoute } from '@angular/router';
-
-// #enddocregion activatedroute
-import { Observable } from 'rxjs/Rx';
-
-import { async, TestBed } from '@angular/core/testing';
-
-import { PhoneDetailComponent } from './phone-detail.component';
-import { Phone, PhoneData } from '../core/phone/phone.service';
-import { CheckmarkPipe } from '../core/checkmark/checkmark.pipe';
-
-function xyzPhoneData(): PhoneData {
-  return {
-    name: 'phone xyz',
-    snippet: '',
-    images: ['image/url1.png', 'image/url2.png']
-  };
-}
-
-class MockPhone {
-  get(id: string): Observable<PhoneData> {
-    return Observable.of(xyzPhoneData());
-  }
-}
-
-// #docregion activatedroute
-
-class ActivatedRouteMock {
-  constructor(public snapshot: any) {}
-}
-
-// #enddocregion activatedroute
-
-describe('PhoneDetailComponent', () => {
-
-  // #docregion activatedroute
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ CheckmarkPipe, PhoneDetailComponent ],
-      providers: [
-        { provide: Phone, useClass: MockPhone },
-        { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) }
-      ]
-    })
-    .compileComponents();
-  }));
-  // #enddocregion activatedroute
-
-  it('should fetch phone detail', () => {
-    const fixture = TestBed.createComponent(PhoneDetailComponent);
-    fixture.detectChanges();
-    let compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain(xyzPhoneData().name);
-  });
-
-});
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.template.html
deleted file mode 100644
index 46a96d66c3..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.template.html
+++ /dev/null
@@ -1,120 +0,0 @@
-<!-- #docregion -->
-<div *ngIf="phone">
-  <div class="phone-images">
-    <img [src]="img" class="phone"
-        [ngClass]="{selected: img === mainImageUrl}"
-        *ngFor="let img of phone.images" />
-  </div>
-
-  <h1>{{phone.name}}</h1>
-
-  <p>{{phone.description}}</p>
-
-  <ul class="phone-thumbs">
-    <li *ngFor="let img of phone.images">
-      <img [src]="img" (click)="setImage(img)" />
-    </li>
-  </ul>
-
-  <ul class="specs">
-    <li>
-      <span>Availability and Networks</span>
-      <dl>
-        <dt>Availability</dt>
-        <dd *ngFor="let availability of phone.availability">{{availability}}</dd>
-      </dl>
-    </li>
-    <li>
-      <span>Battery</span>
-      <dl>
-        <dt>Type</dt>
-        <dd>{{phone.battery?.type}}</dd>
-        <dt>Talk Time</dt>
-        <dd>{{phone.battery?.talkTime}}</dd>
-        <dt>Standby time (max)</dt>
-        <dd>{{phone.battery?.standbyTime}}</dd>
-      </dl>
-    </li>
-    <li>
-      <span>Storage and Memory</span>
-      <dl>
-        <dt>RAM</dt>
-        <dd>{{phone.storage?.ram}}</dd>
-        <dt>Internal Storage</dt>
-        <dd>{{phone.storage?.flash}}</dd>
-      </dl>
-    </li>
-    <li>
-      <span>Connectivity</span>
-      <dl>
-        <dt>Network Support</dt>
-        <dd>{{phone.connectivity?.cell}}</dd>
-        <dt>WiFi</dt>
-        <dd>{{phone.connectivity?.wifi}}</dd>
-        <dt>Bluetooth</dt>
-        <dd>{{phone.connectivity?.bluetooth}}</dd>
-        <dt>Infrared</dt>
-        <dd>{{phone.connectivity?.infrared | checkmark}}</dd>
-        <dt>GPS</dt>
-        <dd>{{phone.connectivity?.gps | checkmark}}</dd>
-      </dl>
-    </li>
-    <li>
-      <span>Android</span>
-      <dl>
-        <dt>OS Version</dt>
-        <dd>{{phone.android?.os}}</dd>
-        <dt>UI</dt>
-        <dd>{{phone.android?.ui}}</dd>
-      </dl>
-    </li>
-    <li>
-      <span>Size and Weight</span>
-      <dl>
-        <dt>Dimensions</dt>
-        <dd *ngFor="let dim of phone.sizeAndWeight?.dimensions">{{dim}}</dd>
-        <dt>Weight</dt>
-        <dd>{{phone.sizeAndWeight?.weight}}</dd>
-      </dl>
-    </li>
-    <li>
-      <span>Display</span>
-      <dl>
-        <dt>Screen size</dt>
-        <dd>{{phone.display?.screenSize}}</dd>
-        <dt>Screen resolution</dt>
-        <dd>{{phone.display?.screenResolution}}</dd>
-        <dt>Touch screen</dt>
-        <dd>{{phone.display?.touchScreen | checkmark}}</dd>
-      </dl>
-    </li>
-    <li>
-      <span>Hardware</span>
-      <dl>
-        <dt>CPU</dt>
-        <dd>{{phone.hardware?.cpu}}</dd>
-        <dt>USB</dt>
-        <dd>{{phone.hardware?.usb}}</dd>
-        <dt>Audio / headphone jack</dt>
-        <dd>{{phone.hardware?.audioJack}}</dd>
-        <dt>FM Radio</dt>
-        <dd>{{phone.hardware?.fmRadio | checkmark}}</dd>
-        <dt>Accelerometer</dt>
-        <dd>{{phone.hardware?.accelerometer | checkmark}}</dd>
-      </dl>
-    </li>
-    <li>
-      <span>Camera</span>
-      <dl>
-        <dt>Primary</dt>
-        <dd>{{phone.camera?.primary}}</dd>
-        <dt>Features</dt>
-        <dd>{{phone.camera?.features?.join(', ')}}</dd>
-      </dl>
-    </li>
-    <li>
-      <span>Additional Features</span>
-      <dd>{{phone.additionalFeatures}}</dd>
-    </li>
-  </ul>
-</div>
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/dell-streak-7.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/dell-streak-7.json
deleted file mode 100644
index a32eb6ff98..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/dell-streak-7.json
+++ /dev/null
@@ -1,64 +0,0 @@
-{
-    "additionalFeatures": "Front Facing 1.3MP Camera", 
-    "android": {
-        "os": "Android 2.2", 
-        "ui": "Dell Stage"
-    }, 
-    "availability": [
-        "T-Mobile"
-    ], 
-    "battery": {
-        "standbyTime": "", 
-        "talkTime": "", 
-        "type": "Lithium Ion (Li-Ion) (2780 mAH)"
-    }, 
-    "camera": {
-        "features": [
-            "Flash", 
-            "Video"
-        ], 
-        "primary": "5.0 megapixels"
-    }, 
-    "connectivity": {
-        "bluetooth": "Bluetooth 2.1", 
-        "cell": "T-mobile HSPA+ @ 2100/1900/AWS/850 MHz", 
-        "gps": true, 
-        "infrared": false, 
-        "wifi": "802.11 b/g"
-    }, 
-    "description": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around. Android\u2122 2.2-based tablet with over-the-air upgrade capability for future OS releases.  A vibrant 7-inch, multitouch display with full Adobe\u00ae Flash 10.1 pre-installed.  Includes a 1.3 MP front-facing camera for face-to-face chats on popular services such as Qik or Skype.  16 GB of internal storage, plus Wi-Fi, Bluetooth and built-in GPS keeps you in touch with the world around you.  Connect on your terms. Save with 2-year contract or flexibility with prepaid pay-as-you-go plans", 
-    "display": {
-        "screenResolution": "WVGA (800 x 480)", 
-        "screenSize": "7.0 inches", 
-        "touchScreen": true
-    }, 
-    "hardware": {
-        "accelerometer": true, 
-        "audioJack": "3.5mm", 
-        "cpu": "nVidia Tegra T20", 
-        "fmRadio": false, 
-        "physicalKeyboard": false, 
-        "usb": "USB 2.0"
-    }, 
-    "id": "dell-streak-7", 
-    "images": [
-        "img/phones/dell-streak-7.0.jpg", 
-        "img/phones/dell-streak-7.1.jpg", 
-        "img/phones/dell-streak-7.2.jpg", 
-        "img/phones/dell-streak-7.3.jpg", 
-        "img/phones/dell-streak-7.4.jpg"
-    ], 
-    "name": "Dell Streak 7", 
-    "sizeAndWeight": {
-        "dimensions": [
-            "199.9 mm (w)", 
-            "119.8 mm (h)", 
-            "12.4 mm (d)"
-        ], 
-        "weight": "450.0 grams"
-    }, 
-    "storage": {
-        "flash": "16000MB", 
-        "ram": "512MB"
-    }
-}
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-atrix-4g.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-atrix-4g.json
deleted file mode 100644
index ccca00e3b2..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-atrix-4g.json
+++ /dev/null
@@ -1,62 +0,0 @@
-{
-    "additionalFeatures": "", 
-    "android": {
-        "os": "Android 2.2", 
-        "ui": "MOTOBLUR"
-    }, 
-    "availability": [
-        "AT&T"
-    ], 
-    "battery": {
-        "standbyTime": "400 hours", 
-        "talkTime": "5 hours", 
-        "type": "Lithium Ion (Li-Ion) (1930 mAH)"
-    }, 
-    "camera": {
-        "features": [
-            ""
-        ], 
-        "primary": ""
-    }, 
-    "connectivity": {
-        "bluetooth": "Bluetooth 2.1", 
-        "cell": "WCDMA 850/1900/2100, GSM 850/900/1800/1900, HSDPA 14Mbps (Category 10) Edge Class 12, GPRS Class 12, eCompass, AGPS", 
-        "gps": true, 
-        "infrared": false, 
-        "wifi": "802.11 a/b/g/n"
-    }, 
-    "description": "MOTOROLA ATRIX 4G gives you dual-core processing power and the revolutionary webtop application. With webtop and a compatible Motorola docking station, sold separately, you can surf the Internet with a full Firefox browser, create and edit docs, or access multimedia on a large screen almost anywhere.", 
-    "display": {
-        "screenResolution": "QHD (960 x 540)", 
-        "screenSize": "4.0 inches", 
-        "touchScreen": true
-    }, 
-    "hardware": {
-        "accelerometer": true, 
-        "audioJack": "3.5mm", 
-        "cpu": "1 GHz Dual Core", 
-        "fmRadio": false, 
-        "physicalKeyboard": false, 
-        "usb": "USB 2.0"
-    }, 
-    "id": "motorola-atrix-4g", 
-    "images": [
-        "img/phones/motorola-atrix-4g.0.jpg", 
-        "img/phones/motorola-atrix-4g.1.jpg", 
-        "img/phones/motorola-atrix-4g.2.jpg", 
-        "img/phones/motorola-atrix-4g.3.jpg"
-    ], 
-    "name": "MOTOROLA ATRIX\u2122 4G", 
-    "sizeAndWeight": {
-        "dimensions": [
-            "63.5 mm (w)", 
-            "117.75 mm (h)", 
-            "10.95 mm (d)"
-        ], 
-        "weight": "135.0 grams"
-    }, 
-    "storage": {
-        "flash": "", 
-        "ram": ""
-    }
-}
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom-with-wi-fi.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom-with-wi-fi.json
deleted file mode 100644
index 4ba9c8d5b5..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom-with-wi-fi.json
+++ /dev/null
@@ -1,65 +0,0 @@
-{
-    "additionalFeatures": "Sensors: proximity, ambient light, barometer, gyroscope", 
-    "android": {
-        "os": "Android 3.0", 
-        "ui": "Honeycomb"
-    }, 
-    "availability": [
-        ""
-    ], 
-    "battery": {
-        "standbyTime": "336 hours", 
-        "talkTime": "24 hours", 
-        "type": "Other ( mAH)"
-    }, 
-    "camera": {
-        "features": [
-            "Flash", 
-            "Video"
-        ], 
-        "primary": "5.0 megapixels"
-    }, 
-    "connectivity": {
-        "bluetooth": "Bluetooth 2.1", 
-        "cell": "", 
-        "gps": true, 
-        "infrared": false, 
-        "wifi": "802.11 b/g/n"
-    }, 
-    "description": "Motorola XOOM with Wi-Fi has a super-powerful dual-core processor and Android\u2122 3.0 (Honeycomb) \u2014 the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you\u2019ll enjoy HD video in a thin, light, powerful and upgradeable tablet.", 
-    "display": {
-        "screenResolution": "WXGA (1200 x 800)", 
-        "screenSize": "10.1 inches", 
-        "touchScreen": true
-    }, 
-    "hardware": {
-        "accelerometer": true, 
-        "audioJack": "3.5mm", 
-        "cpu": "1 GHz Dual Core Tegra 2", 
-        "fmRadio": false, 
-        "physicalKeyboard": false, 
-        "usb": "USB 2.0"
-    }, 
-    "id": "motorola-xoom-with-wi-fi", 
-    "images": [
-        "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
-        "img/phones/motorola-xoom-with-wi-fi.1.jpg", 
-        "img/phones/motorola-xoom-with-wi-fi.2.jpg", 
-        "img/phones/motorola-xoom-with-wi-fi.3.jpg", 
-        "img/phones/motorola-xoom-with-wi-fi.4.jpg", 
-        "img/phones/motorola-xoom-with-wi-fi.5.jpg"
-    ], 
-    "name": "Motorola XOOM\u2122 with Wi-Fi", 
-    "sizeAndWeight": {
-        "dimensions": [
-            "249.1 mm (w)", 
-            "167.8 mm (h)", 
-            "12.9 mm (d)"
-        ], 
-        "weight": "708.0 grams"
-    }, 
-    "storage": {
-        "flash": "32000MB", 
-        "ram": "1000MB"
-    }
-}
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom.json
deleted file mode 100644
index f0f0c8711d..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom.json
+++ /dev/null
@@ -1,62 +0,0 @@
-{
-    "additionalFeatures": "Front-facing camera. Sensors: proximity, ambient light, barometer, gyroscope.", 
-    "android": {
-        "os": "Android 3.0", 
-        "ui": "Android"
-    }, 
-    "availability": [
-        "Verizon"
-    ], 
-    "battery": {
-        "standbyTime": "336 hours", 
-        "talkTime": "24 hours", 
-        "type": "Other (3250 mAH)"
-    }, 
-    "camera": {
-        "features": [
-            "Flash", 
-            "Video"
-        ], 
-        "primary": "5.0 megapixels"
-    }, 
-    "connectivity": {
-        "bluetooth": "Bluetooth 2.1", 
-        "cell": "CDMA 800 /1900 LTE 700, Rx diversity in all bands", 
-        "gps": true, 
-        "infrared": false, 
-        "wifi": "802.11 a/b/g/n"
-    }, 
-    "description": "MOTOROLA XOOM has a super-powerful dual-core processor and Android\u2122 3.0 (Honeycomb) \u2014 the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you\u2019ll enjoy HD video in a thin, light, powerful and upgradeable tablet.", 
-    "display": {
-        "screenResolution": "WXGA (1200 x 800)", 
-        "screenSize": "10.1 inches", 
-        "touchScreen": true
-    }, 
-    "hardware": {
-        "accelerometer": true, 
-        "audioJack": "3.5mm", 
-        "cpu": "1 GHz Dual Core Tegra 2", 
-        "fmRadio": false, 
-        "physicalKeyboard": false, 
-        "usb": "USB 2.0"
-    }, 
-    "id": "motorola-xoom", 
-    "images": [
-        "img/phones/motorola-xoom.0.jpg", 
-        "img/phones/motorola-xoom.1.jpg", 
-        "img/phones/motorola-xoom.2.jpg"
-    ], 
-    "name": "MOTOROLA XOOM\u2122", 
-    "sizeAndWeight": {
-        "dimensions": [
-            "249.0 mm (w)", 
-            "168.0 mm (h)", 
-            "12.7 mm (d)"
-        ], 
-        "weight": "726.0 grams"
-    }, 
-    "storage": {
-        "flash": "32000MB", 
-        "ram": "1000MB"
-    }
-}
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/nexus-s.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/nexus-s.json
deleted file mode 100644
index 5e712e2ff8..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/nexus-s.json
+++ /dev/null
@@ -1,69 +0,0 @@
-{
-    "additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope, Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)", 
-    "android": {
-        "os": "Android 2.3", 
-        "ui": "Android"
-    }, 
-    "availability": [
-        "M1,", 
-        "O2,", 
-        "Orange,", 
-        "Singtel,", 
-        "StarHub,", 
-        "T-Mobile,", 
-        "Vodafone"
-    ], 
-    "battery": {
-        "standbyTime": "428 hours", 
-        "talkTime": "6 hours", 
-        "type": "Lithium Ion (Li-Ion) (1500 mAH)"
-    }, 
-    "camera": {
-        "features": [
-            "Flash", 
-            "Video"
-        ], 
-        "primary": "5.0 megapixels"
-    }, 
-    "connectivity": {
-        "bluetooth": "Bluetooth 2.1", 
-        "cell": "Quad-band GSM: 850, 900, 1800, 1900\r\nTri-band HSPA: 900, 2100, 1700\r\nHSPA type: HSDPA (7.2Mbps) HSUPA (5.76Mbps)", 
-        "gps": true, 
-        "infrared": false, 
-        "wifi": "802.11 b/g/n"
-    }, 
-    "description": "Nexus S is the next generation of Nexus devices, co-developed by Google and Samsung. The latest Android platform (Gingerbread), paired with a 1 GHz Hummingbird processor and 16GB of memory, makes Nexus S one of the fastest phones on the market. It comes pre-installed with the best of Google apps and enabled with new and popular features like true multi-tasking, Wi-Fi hotspot, Internet Calling, NFC support, and full web browsing. With this device, users will also be the first to receive software upgrades and new Google mobile apps as soon as they become available. For more details, visit http://www.google.com/nexus.", 
-    "display": {
-        "screenResolution": "WVGA (800 x 480)", 
-        "screenSize": "4.0 inches", 
-        "touchScreen": true
-    }, 
-    "hardware": {
-        "accelerometer": true, 
-        "audioJack": "3.5mm", 
-        "cpu": "1GHz Cortex A8 (Hummingbird) processor", 
-        "fmRadio": false, 
-        "physicalKeyboard": false, 
-        "usb": "USB 2.0"
-    }, 
-    "id": "nexus-s", 
-    "images": [
-        "img/phones/nexus-s.0.jpg", 
-        "img/phones/nexus-s.1.jpg", 
-        "img/phones/nexus-s.2.jpg", 
-        "img/phones/nexus-s.3.jpg"
-    ], 
-    "name": "Nexus S", 
-    "sizeAndWeight": {
-        "dimensions": [
-            "63.0 mm (w)", 
-            "123.9 mm (h)", 
-            "10.88 mm (d)"
-        ], 
-        "weight": "129.0 grams"
-    }, 
-    "storage": {
-        "flash": "16384MB", 
-        "ram": "512MB"
-    }
-}
diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phones/phones.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/phones.json
deleted file mode 100644
index 339b94fbb5..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/app/phones/phones.json
+++ /dev/null
@@ -1,155 +0,0 @@
-[
-    {
-        "age": 0, 
-        "id": "motorola-xoom-with-wi-fi", 
-        "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
-        "name": "Motorola XOOM\u2122 with Wi-Fi", 
-        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
-    }, 
-    {
-        "age": 1, 
-        "id": "motorola-xoom", 
-        "imageUrl": "img/phones/motorola-xoom.0.jpg", 
-        "name": "MOTOROLA XOOM\u2122", 
-        "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
-    }, 
-    {
-        "age": 2, 
-        "carrier": "AT&T", 
-        "id": "motorola-atrix-4g", 
-        "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", 
-        "name": "MOTOROLA ATRIX\u2122 4G", 
-        "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
-    }, 
-    {
-        "age": 3, 
-        "id": "dell-streak-7", 
-        "imageUrl": "img/phones/dell-streak-7.0.jpg", 
-        "name": "Dell Streak 7", 
-        "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
-    }, 
-    {
-        "age": 4, 
-        "carrier": "Cellular South", 
-        "id": "samsung-gem", 
-        "imageUrl": "img/phones/samsung-gem.0.jpg", 
-        "name": "Samsung Gem\u2122", 
-        "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price."
-    }, 
-    {
-        "age": 5, 
-        "carrier": "Dell", 
-        "id": "dell-venue", 
-        "imageUrl": "img/phones/dell-venue.0.jpg", 
-        "name": "Dell Venue", 
-        "snippet": "The Dell Venue; Your Personal Express Lane to Everything"
-    }, 
-    {
-        "age": 6, 
-        "carrier": "Best Buy", 
-        "id": "nexus-s", 
-        "imageUrl": "img/phones/nexus-s.0.jpg", 
-        "name": "Nexus S", 
-        "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
-    }, 
-    {
-        "age": 7, 
-        "carrier": "Cellular South", 
-        "id": "lg-axis", 
-        "imageUrl": "img/phones/lg-axis.0.jpg", 
-        "name": "LG Axis", 
-        "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens"
-    }, 
-    {
-        "age": 8, 
-        "id": "samsung-galaxy-tab", 
-        "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", 
-        "name": "Samsung Galaxy Tab\u2122", 
-        "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
-    }, 
-    {
-        "age": 9, 
-        "carrier": "Cellular South", 
-        "id": "samsung-showcase-a-galaxy-s-phone", 
-        "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", 
-        "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", 
-        "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors"
-    }, 
-    {
-        "age": 10, 
-        "carrier": "Verizon", 
-        "id": "droid-2-global-by-motorola", 
-        "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", 
-        "name": "DROID\u2122 2 Global by Motorola", 
-        "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities."
-    }, 
-    {
-        "age": 11, 
-        "carrier": "Verizon", 
-        "id": "droid-pro-by-motorola", 
-        "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", 
-        "name": "DROID\u2122 Pro by Motorola", 
-        "snippet": "The next generation of DOES."
-    }, 
-    {
-        "age": 12, 
-        "carrier": "AT&T", 
-        "id": "motorola-bravo-with-motoblur", 
-        "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", 
-        "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", 
-        "snippet": "An experience to cheer about."
-    }, 
-    {
-        "age": 13, 
-        "carrier": "T-Mobile", 
-        "id": "motorola-defy-with-motoblur", 
-        "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", 
-        "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", 
-        "snippet": "Are you ready for everything life throws your way?"
-    }, 
-    {
-        "age": 14, 
-        "carrier": "T-Mobile", 
-        "id": "t-mobile-mytouch-4g", 
-        "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", 
-        "name": "T-Mobile myTouch 4G", 
-        "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
-    }, 
-    {
-        "age": 15, 
-        "carrier": "US Cellular", 
-        "id": "samsung-mesmerize-a-galaxy-s-phone", 
-        "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", 
-        "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", 
-        "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
-    }, 
-    {
-        "age": 16, 
-        "carrier": "Sprint", 
-        "id": "sanyo-zio", 
-        "imageUrl": "img/phones/sanyo-zio.0.jpg", 
-        "name": "SANYO ZIO", 
-        "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value."
-    }, 
-    {
-        "age": 17, 
-        "id": "samsung-transform", 
-        "imageUrl": "img/phones/samsung-transform.0.jpg", 
-        "name": "Samsung Transform\u2122", 
-        "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d."
-    }, 
-    {
-        "age": 18, 
-        "id": "t-mobile-g2", 
-        "imageUrl": "img/phones/t-mobile-g2.0.jpg", 
-        "name": "T-Mobile G2", 
-        "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
-    }, 
-    {
-        "age": 19, 
-        "id": "motorola-charm-with-motoblur", 
-        "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", 
-        "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", 
-        "snippet": "Motorola CHARM fits easily in your pocket or palm.  Includes MOTOBLUR service."
-    }
-]
diff --git a/aio/content/examples/upgrade-phonecat-4-final/example-config.json b/aio/content/examples/upgrade-phonecat-4-final/example-config.json
deleted file mode 100644
index 401c14f835..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/example-config.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "build": "build:upgrade",
-  "run": "serve:upgrade",
-  "unittesting": true
-}
diff --git a/aio/content/examples/upgrade-phonecat-4-final/run-unit-tests.sh b/aio/content/examples/upgrade-phonecat-4-final/run-unit-tests.sh
deleted file mode 100644
index 00a5abb7bc..0000000000
--- a/aio/content/examples/upgrade-phonecat-4-final/run-unit-tests.sh
+++ /dev/null
@@ -1,7 +0,0 @@
-## The boilerplate Karma configuration won't work with Angular 1 tests since
-## a specific loading configuration is needed for them.
-## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with
-## that config.
-
-PATH=$(npm bin):$PATH
-tsc && karma start karma.conf.ng1.js
diff --git a/aio/content/examples/cb-visual-studio-2015/tsconfig.json b/aio/content/examples/visual-studio-2015/tsconfig.json
similarity index 100%
rename from aio/content/examples/cb-visual-studio-2015/tsconfig.json
rename to aio/content/examples/visual-studio-2015/tsconfig.json
diff --git a/aio/content/examples/webpack/.gitignore b/aio/content/examples/webpack/.gitignore
deleted file mode 100644
index 8628a5eef6..0000000000
--- a/aio/content/examples/webpack/.gitignore
+++ /dev/null
@@ -1,5 +0,0 @@
-dist
-!karma.webpack.conf.js
-!webpack.config.js
-!config/*
-!public/css/styles.css
diff --git a/aio/content/examples/webpack/config/karma.conf.js b/aio/content/examples/webpack/config/karma.conf.js
index 7bbb4617db..96387be7ff 100644
--- a/aio/content/examples/webpack/config/karma.conf.js
+++ b/aio/content/examples/webpack/config/karma.conf.js
@@ -25,7 +25,7 @@ module.exports = function (config) {
       noInfo: true
     },
 
-    reporters: ['kjhtml'],
+    reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
diff --git a/aio/content/examples/webpack/config/webpack.test.js b/aio/content/examples/webpack/config/webpack.test.js
index e668504c67..2c6a59c90f 100644
--- a/aio/content/examples/webpack/config/webpack.test.js
+++ b/aio/content/examples/webpack/config/webpack.test.js
@@ -45,7 +45,7 @@ module.exports = {
   plugins: [
     new webpack.ContextReplacementPlugin(
       // The (\\|\/) piece accounts for path separators in *nix and Windows
-      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+      /angular(\\|\/)core(\\|\/)@angular/,
       helpers.root('./src'), // location of your src
       {} // a map of your routes
     )
diff --git a/aio/content/examples/webpack/e2e-spec.ts b/aio/content/examples/webpack/e2e-spec.ts
index 9bca9810eb..b13f93552e 100644
--- a/aio/content/examples/webpack/e2e-spec.ts
+++ b/aio/content/examples/webpack/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
diff --git a/aio/content/examples/webpack/package.webpack.json b/aio/content/examples/webpack/package.webpack.json
index 8f9e3954c2..5aeb5ebf56 100644
--- a/aio/content/examples/webpack/package.webpack.json
+++ b/aio/content/examples/webpack/package.webpack.json
@@ -9,14 +9,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@angular/common": "~4.0.0",
-    "@angular/compiler": "~4.0.0",
-    "@angular/core": "~4.0.0",
-    "@angular/forms": "~4.0.0",
-    "@angular/http": "~4.0.0",
-    "@angular/platform-browser": "~4.0.0",
-    "@angular/platform-browser-dynamic": "~4.0.0",
-    "@angular/router": "~4.0.0",
+    "@angular/common": "~4.2.0",
+    "@angular/compiler": "~4.2.0",
+    "@angular/core": "~4.2.0",
+    "@angular/forms": "~4.2.0",
+    "@angular/http": "~4.2.0",
+    "@angular/platform-browser": "~4.2.0",
+    "@angular/platform-browser-dynamic": "~4.2.0",
+    "@angular/router": "~4.2.0",
     "core-js": "^2.4.1",
     "rxjs": "5.0.1",
     "zone.js": "^0.8.4"
@@ -41,7 +41,7 @@
     "raw-loader": "^0.5.1",
     "rimraf": "^2.5.2",
     "style-loader": "^0.13.1",
-    "typescript": "~2.0.10",
+    "typescript": "~2.3.1",
     "webpack": "2.2.1",
     "webpack-dev-server": "2.4.1",
     "webpack-merge": "^3.0.0"
diff --git a/aio/content/file-not-found.md b/aio/content/file-not-found.md
index 719a135b6c..46092603ce 100644
--- a/aio/content/file-not-found.md
+++ b/aio/content/file-not-found.md
@@ -1,3 +1,9 @@
-@title Document not found
 @description
-<h3>Document not found</h3>
\ No newline at end of file
+
+<div class="nf-container l-flex-wrap flex-center">
+    <img src="assets/images/support/angular-404.svg" width="300" height="300"/>
+    <div class="nf-response l-flex-wrap">
+        <h1 class="no-toc">Page Not Found</h1>
+        <p>We're sorry. The page you are looking for cannot be found.</p>
+    </div>
+</div>
diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md
index 919059381d..ff00ede93f 100644
--- a/aio/content/guide/ajs-quick-reference.md
+++ b/aio/content/guide/ajs-quick-reference.md
@@ -1,11 +1,6 @@
-@title
-从 AngularJS 到 Angular 快速参考
-
-@intro
-学习如何把 AngularJS 中的概念和技术对应到 Angular 中
-
-@description
+# AngularJS to Angular Quick Reference
 
+# 从 AngularJS 到 Angular 快速参考
 
 {@a top}
 
@@ -20,35 +15,7 @@ by mapping AngularJS syntax to the equivalent Angular syntax.
 本章提供了一个快速的参考指南，指出一些常用的AngularJS语法及其在Angular中的等价物。
 
 
-**See the Angular syntax in this <live-example name="cb-ajs-quick-reference"></live-example>**.
-
-**可到<live-example name="cb-ajs-quick-reference"></live-example>中查看Angular语法**。
-
-## Contents
-
-   内容
-
-* [Template basics](guide/ajs-quick-reference#template-basics)&mdash;binding and local variables.
-
-  [模板基础](guide/ajs-quick-reference#template-basics) - 绑定变量与局部变量。
-
-* [Template directives](guide/ajs-quick-reference#template-directives)&mdash;built-in directives `ngIf` and `ngClass`.
-
-  [模板指令](guide/ajs-quick-reference#template-directives) - 内置指令`ngIf`和`ngClass`。
-
-* [Filters/pipes](guide/ajs-quick-reference#filters-pipes)&mdash;built-in *filters*, known as *pipes* in Angular.
-
-  [过滤器/管道](guide/ajs-quick-reference#filters-pipes) - 内置*过滤器(filter)*，在Angular中叫*管道(pipe)*。
-
-* [Modules/controllers/components](guide/ajs-quick-reference#controllers-components)&mdash;*modules* in Angular are slightly different from *modules* in AngularJS, and *controllers* are *components* in Angular.
-
-  [模块/控制器/组件](guide/ajs-quick-reference#controllers-components) - Angular 中的*模块*和AngularJS 中的略有不同；而*控制器*在Angular 中叫组件。
-  
-* [Style sheets](guide/ajs-quick-reference#style-sheets)&mdash;more options for CSS than in AngularJS.
-
-  [样式表](guide/ajs-quick-reference#style-sheets) - Angular 相对AngularJS 在 CSS 方面有了更多选项。
-
-
+**See the Angular syntax in this <live-example name="ajs-quick-reference"></live-example>**.
 
 ## Template basics
 
@@ -91,7 +58,7 @@ The following table lists some of the key AngularJS template features with their
 
       ### 绑定/插值表达式
 
-      <code-example>
+      <code-example hideCopy>
         Your favorite hero is: {{vm.favoriteHero}}
       </code-example>
 
@@ -118,7 +85,7 @@ The following table lists some of the key AngularJS template features with their
 
       ### 绑定/插值表达式
 
-      <code-example path="cb-ajs-quick-reference/src/app/movie-list.component.html" region="interpolation" title="cb-ajs-quick-reference/src/app/movie-list.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="interpolation" linenums="false">
 
       </code-example>
 
@@ -151,7 +118,7 @@ The following table lists some of the key AngularJS template features with their
 
       ### 过滤器
 
-      <code-example>
+      <code-example hideCopy>
         &lt;td>{{movie.title | uppercase}}&lt;/td>
       </code-example>
 
@@ -173,7 +140,7 @@ The following table lists some of the key AngularJS template features with their
 
       ### 管道
 
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="uppercase" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="uppercase" linenums="false">
 
       </code-example>
 
@@ -201,7 +168,7 @@ The following table lists some of the key AngularJS template features with their
 
       ### 局部变量
 
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;tr ng-repeat="movie in vm.movies">
           &lt;td>{{movie.title}}&lt;/td>
         &lt;/tr>
@@ -221,7 +188,7 @@ The following table lists some of the key AngularJS template features with their
 
       ### 输入变量
 
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="local" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="local" linenums="false">
 
       </code-example>
 
@@ -289,7 +256,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ng-app
-      <code-example>
+      <code-example hideCopy>
         &lt;body ng-app="movieHunter">
       </code-example>
 
@@ -314,11 +281,11 @@ AngularJS 为模板提供了七十多个内置指令。
 
       ### 引导
 
-      <code-example path="cb-ajs-quick-reference/src/main.ts" title="main.ts" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/main.ts" title="main.ts" linenums="false">
 
       </code-example>
       <br>
-      <code-example path="cb-ajs-quick-reference/src/app/app.module.1.ts" title="app.module.ts" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" title="app.module.ts" linenums="false">
 
       </code-example>
 
@@ -344,7 +311,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ng-class
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;div ng-class="{active: isActive}">
         &lt;div ng-class="{active: isActive,
                            shazam: isImportant}">
@@ -373,7 +340,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ngClass
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="ngClass" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="ngClass" linenums="false">
 
       </code-example>
 
@@ -412,7 +379,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ng-click
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;button ng-click="vm.toggleImage()">
         &lt;button ng-click="vm.toggleImage($event)">
       </code-example>
@@ -440,7 +407,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
       ### 绑定到`click`事件
 
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="event-binding" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="event-binding" linenums="false">
 
       </code-example>
 
@@ -487,7 +454,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ng-controller
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;div ng-controller="MovieListCtrl as vm">
       </code-example>
 
@@ -508,7 +475,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
       ### Component装饰器
 
-      <code-example path="cb-ajs-quick-reference/src/app/movie-list.component.ts" region="component" title="cb-ajs-quick-reference/src/app/movie-list.component.ts" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="component" linenums="false">
 
       </code-example>
 
@@ -519,7 +486,7 @@ AngularJS 为模板提供了七十多个内置指令。
       在Angular中，模板不用再指定它相关的控制器。
       反过来，组件会在组件类的装饰器中指定与它相关的模板。
 
-      For more information, see [Architecture Overview](guide/architecture#component).
+      For more information, see [Architecture Overview](guide/architecture#components).
 
       要了解更多，请参见[架构概览](guide/architecture#component)。
 
@@ -564,7 +531,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ng-href
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;a ng-href="angularDocsUrl">Angular Docs&lt;/a>
       </code-example>
 
@@ -578,7 +545,7 @@ AngularJS 为模板提供了七十多个内置指令。
       In AngularJS, the `ng-href` is often used to activate a route as part of navigation.
 
       在AngularJS 中，`ng-href`通常用来作为导航的一部分，激活一个路由。
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;a ng-href="#movies">Movies&lt;/a>
       </code-example>
 
@@ -595,7 +562,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
       ### 绑定到`href`属性
 
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="href" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="href" linenums="false">
 
       </code-example>
 
@@ -615,7 +582,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
       在Angular中，`href`不再用作路由，而是改用第三个例子中所展示的`routerLink`指令。
 
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="router-link" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="router-link" linenums="false">
 
       </code-example>
 
@@ -635,7 +602,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ng-if
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;table ng-if="movies.length">
       </code-example>
 
@@ -654,7 +621,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### *ngIf
-      <code-example path="cb-ajs-quick-reference/src/app/movie-list.component.html" region="ngIf" title="cb-ajs-quick-reference/src/app/movie-list.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngIf" linenums="false">
 
       </code-example>
 
@@ -685,7 +652,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ng-model
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;input ng-model="vm.favoriteHero"/>
       </code-example>
 
@@ -703,7 +670,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
       ### ngModel
 
-      <code-example path="cb-ajs-quick-reference/src/app/movie-list.component.html" region="ngModel" title="cb-ajs-quick-reference/src/app/movie-list.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngModel" linenums="false">
 
       </code-example>
 
@@ -730,7 +697,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ng-repeat
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;tr ng-repeat="movie in vm.movies">
       </code-example>
 
@@ -749,7 +716,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### *ngFor
-      <code-example path="cb-ajs-quick-reference/src/app/movie-list.component.html" region="ngFor" title="cb-ajs-quick-reference/src/app/movie-list.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngFor" linenums="false">
 
       </code-example>
 
@@ -784,7 +751,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ng-show
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;h3 ng-show="vm.favoriteHero">
           Your favorite hero is: {{vm.favoriteHero}}
         &lt;/h3>
@@ -808,7 +775,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
       ### 绑定到`hidden`属性
 
-      <code-example path="cb-ajs-quick-reference/src/app/movie-list.component.html" region="hidden" title="cb-ajs-quick-reference/src/app/movie-list.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="hidden" linenums="false">
 
       </code-example>
 
@@ -844,7 +811,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
       ### ng-src
 
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;img ng-src="{{movie.imageurl}}">
 
       </code-example>
@@ -865,7 +832,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
       ### 绑定到`src`属性
 
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="src" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="src" linenums="false">
 
       </code-example>
 
@@ -892,7 +859,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
       ### ng-style
 
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;div ng-style="{color: colorPreference}">
 
       </code-example>
@@ -916,7 +883,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ngStyle
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="ngStyle" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="ngStyle" linenums="false">
 
       </code-example>
 
@@ -954,7 +921,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
       ### ng-switch
 
-      <code-example format="">
+      <code-example hideCopy format="">
         &lt;div ng-switch="vm.favoriteHero &&
                         vm.checkMovieHero(vm.favoriteHero)">
             &lt;div ng-switch-when="true">
@@ -992,7 +959,7 @@ AngularJS 为模板提供了七十多个内置指令。
 
 
       ### ngSwitch
-      <code-example path="cb-ajs-quick-reference/src/app/movie-list.component.html" region="ngSwitch" title="cb-ajs-quick-reference/src/app/movie-list.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngSwitch" linenums="false">
 
       </code-example>
 
@@ -1082,7 +1049,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### currency
-      <code-example>
+      <code-example hideCopy>
         &lt;td>{{movie.price | currency}}&lt;/td>
       </code-example>
 
@@ -1097,7 +1064,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### currency
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="currency" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="currency" linenums="false">
 
       </code-example>
 
@@ -1115,7 +1082,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### date
-      <code-example>
+      <code-example hideCopy>
         &lt;td>{{movie.releaseDate | date}}&lt;/td>
       </code-example>
 
@@ -1130,7 +1097,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### date
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="date" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="date" linenums="false">
 
       </code-example>
 
@@ -1149,7 +1116,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### filter
-      <code-example>
+      <code-example hideCopy>
         &lt;tr ng-repeat="movie in movieList | filter: {title:listFilter}">
       </code-example>
 
@@ -1181,7 +1148,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### json
-      <code-example>
+      <code-example hideCopy>
         &lt;pre>{{movie | json}}&lt;/pre>
       </code-example>
 
@@ -1196,7 +1163,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### json
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="json" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="json" linenums="false">
 
       </code-example>
 
@@ -1214,7 +1181,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### limitTo
-      <code-example>
+      <code-example hideCopy>
         &lt;tr ng-repeat="movie in movieList | limitTo:2:0">
       </code-example>
 
@@ -1229,7 +1196,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### slice
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="slice" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="slice" linenums="false">
 
       </code-example>
 
@@ -1252,7 +1219,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### lowercase
-      <code-example>
+      <code-example hideCopy>
         &lt;div>{{movie.title | lowercase}}&lt;/div>
       </code-example>
 
@@ -1267,7 +1234,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### lowercase
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="lowercase" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="lowercase" linenums="false">
 
       </code-example>
 
@@ -1285,7 +1252,8 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### number
-      <code-example>
+
+      <code-example hideCopy>
         &lt;td>{{movie.starRating | number}}&lt;/td>
       </code-example>
 
@@ -1300,7 +1268,8 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### number
-      <code-example path="cb-ajs-quick-reference/src/app/app.component.html" region="number" title="cb-ajs-quick-reference/src/app/app.component.html" linenums="false">
+      
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="number" linenums="false">
 
       </code-example>
 
@@ -1326,7 +1295,8 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 
       ### orderBy
-      <code-example>
+      
+      <code-example hideCopy>
         &lt;tr ng-repeat="movie in movieList | orderBy : 'title'">
       </code-example>
 
@@ -1371,7 +1341,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
 
 ## 模块/控制器/组件
 
-In both AngularJS and Angular, Angular modules help you organize your application into cohesive blocks of functionality.
+In both AngularJS and Angular, modules help you organize your application into cohesive blocks of functionality.
 
 无论在AngularJS还是Angular中，我们都要借助“模块”来把应用拆分成一些紧密相关的功能块。
 
@@ -1415,7 +1385,7 @@ The Angular code is shown using TypeScript.
 
 
       ### IIFE
-      <code-example>
+      <code-example hideCopy>
         (function () {
           ...
         }());
@@ -1459,7 +1429,7 @@ The Angular code is shown using TypeScript.
 
       ### Angular模块
 
-      <code-example>
+      <code-example hideCopy>
         angular.module("movieHunter", ["ngRoute"]);
       </code-example>
 
@@ -1473,13 +1443,13 @@ The Angular code is shown using TypeScript.
     <td>
 
 
-      ### Angular modules
-      <code-example path="cb-ajs-quick-reference/src/app/app.module.1.ts" title="cb-ajs-quick-reference/src/app/app.module.ts" linenums="false">
+      ### NgModules
+      <code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" linenums="false">
 
       </code-example>
 
 
-      Angular modules, defined with the `NgModule` decorator, serve the same purpose:
+      NgModules, defined with the `NgModule` decorator, serve the same purpose:
 
       Angular的模块用`NgModule`装饰器进行定义，有如下用途：
 
@@ -1491,9 +1461,9 @@ The Angular code is shown using TypeScript.
 
         `declaration`: 用于记录组件、管道和指令。
 
-      For more information on modules, see [Angular Modules](guide/ngmodule).
+      For more information on modules, see [NgModules](guide/ngmodule).
 
-      要了解关于模块的更多知识，参见[Angular Modules](guide/ngmodule)。
+      要了解关于模块的更多知识，参见[NgModules](guide/ngmodule)。
 
     </td>
 
@@ -1505,10 +1475,7 @@ The Angular code is shown using TypeScript.
 
 
       ### Controller registration
-
-      ### 控制器注册
-
-      <code-example>
+### 控制器注册      <code-examplehideCopy>
         angular
           .module("movieHunter")
           .controller("MovieListCtrl",
@@ -1536,7 +1503,7 @@ The Angular code is shown using TypeScript.
 
       ### 组件装饰器
 
-      <code-example path="cb-ajs-quick-reference/src/app/movie-list.component.ts" region="component" title="cb-ajs-quick-reference/src/app/movie-list.component.ts" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="component" linenums="false">
 
       </code-example>
 
@@ -1570,7 +1537,7 @@ The Angular code is shown using TypeScript.
 
       ### 控制器函数
 
-      <code-example>
+      <code-example hideCopy>
         function MovieListCtrl(movieService) {
         }
       </code-example>
@@ -1588,7 +1555,7 @@ The Angular code is shown using TypeScript.
 
       ### 组件类
 
-      <code-example path="cb-ajs-quick-reference/src/app/movie-list.component.ts" region="class" title="cb-ajs-quick-reference/src/app/movie-list.component.ts" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="class" linenums="false">
 
       </code-example>
 
@@ -1618,7 +1585,7 @@ The Angular code is shown using TypeScript.
 
       ### 依赖注入
 
-      <code-example>
+      <code-example hideCopy>
         MovieListCtrl.$inject = ['MovieService'];
         function MovieListCtrl(movieService) {
         }
@@ -1645,7 +1612,7 @@ The Angular code is shown using TypeScript.
 
       ### 依赖注入
 
-      <code-example path="cb-ajs-quick-reference/src/app/movie-list.component.ts" region="di" title="cb-ajs-quick-reference/src/app/movie-list.component.ts" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="di" linenums="false">
 
       </code-example>
 
@@ -1724,7 +1691,7 @@ also encapsulate a style sheet within a specific component.
 
 
       ### Link tag
-      <code-example>
+      <code-example hideCopy>
         &lt;link href="styles.css" rel="stylesheet" />
       </code-example>
 
@@ -1742,7 +1709,7 @@ also encapsulate a style sheet within a specific component.
 
       ### Link标签
 
-      <code-example path="cb-ajs-quick-reference/src/index.html" region="style" title="cb-ajs-quick-reference/src/index.html" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/index.html" region="style" linenums="false">
 
       </code-example>
 
@@ -1760,7 +1727,7 @@ also encapsulate a style sheet within a specific component.
 
       在Angular中，我们可以在`@Component`的元数据中使用`styles`或`styleUrls`属性来为一个特定的组件定义样式表。
 
-      <code-example path="cb-ajs-quick-reference/src/app/movie-list.component.ts" region="style-url" title="cb-ajs-quick-reference/src/app/movie-list.component.ts" linenums="false">
+      <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="style-url" linenums="false">
 
       </code-example>
 
@@ -1780,4 +1747,4 @@ also encapsulate a style sheet within a specific component.
 
 [Back to top](guide/ajs-quick-reference#top)
 
-[回到顶部](guide/ajs-quick-reference#top)
\ No newline at end of file
+[回到顶部](guide/ajs-quick-reference#top)
diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md
index 20fba2a478..b741ce4041 100644
--- a/aio/content/guide/animations.md
+++ b/aio/content/guide/animations.md
@@ -1,11 +1,6 @@
-@title
-动画
-
-@intro
-Angular 动画系统指南。
-
-@description
+# Animations
 
+# 动画
 
 Motion is an important aspect in the design of modern web applications. Good
 user interfaces transition smoothly between states with engaging animations
@@ -15,6 +10,9 @@ more fun but also easier to use.
 动画是现代Web应用设计中一个很重要的方面。我们希望用户界面能在不同的状态之间更平滑的转场。如果需要，还可以用适当的动画来吸引注意力。
 设计良好的动画不但会让UI更有趣，还会让它更容易使用。
 
+## Overview
+## 概述
+
 Angular's animation system lets you build animations that run with the same kind of native
 performance found in pure CSS animations. You can also tightly integrate your
 animation logic with the rest of your application code, for ease of control.
@@ -25,8 +23,6 @@ Angular的动画系统赋予了制作各种动画效果的能力，以构建出
 
 <div class="alert is-helpful">
 
-
-
 Angular animations are built on top of the standard [Web Animations API](https://w3c.github.io/web-animations/)
 and run natively on [browsers that support it](http://caniuse.com/#feat=web-animation).
 
@@ -41,57 +37,8 @@ add it to your page.
 
 </div>
 
-
-
-# Contents
-
-# 目录
-
-* [Example: Transitioning between two states](guide/animations#example-transitioning-between-states)
-
-  [范例：在两个状态之间进行转场(Transition)](guide/animations#example-transitioning-between-states)
-
-* [States and transitions](guide/animations#states-and-transitions)
-
-  [状态与转场](guide/animations#states-and-transitions)
-
-* [Example: Entering and leaving](guide/animations#example-entering-and-leaving).
-
-  [范例：进场与离场](guide/animations#example-entering-and-leaving)
-
-* [Example: Entering and leaving from different states](guide/animations#example-entering-and-leaving-from-different-states).
-
-  [范例：从其它状态进场与离场](guide/animations#example-entering-and-leaving-from-different-states)
-
-* [Animatable properties and units](guide/animations#animatable-properties-and-units).  
-
-  [可动的(Animatable)属性与单位](guide/animations#animatable-properties-and-units)
-
-* [Automatic property calculation](guide/animations#automatic-property-calculation).  
-
-  [自动属性值计算](guide/animations#automatic-property-calculation)
-
-* [Animation timing](guide/animations#animation-timing).  
-
-  [动画时间线(Timing)](guide/animations#animation-timing)
-
-* [Multi-step animations with keyframes](guide/animations#multi-step-animations-with-keyframes).  
-
-  [基于关键帧(Keyframes)的多阶段动画](guide/animations#multi-step-animations-with-keyframes)
-
-* [Parallel animation groups](guide/animations#parallel-animation-groups).  
-
-  [并行动画组(Group)](guide/animations#parallel-animation-groups)
-
-* [Animation callbacks](guide/animations#animation-callbacks).  
-
-  [动画回调](guide/animations#animation-callbacks)
-
-
 <div class="l-sub-section">
 
-
-
 The examples in this page are available as a <live-example></live-example>.
 
 本章中引用的这个例子可以到<live-example></live-example>去体验。
@@ -99,22 +46,14 @@ The examples in this page are available as a <live-example></live-example>.
 
 </div>
 
-
-
 {@a example-transitioning-between-states}
 
-
-
 ## Quickstart example: Transitioning between two states
 
 ## 快速起步范例：在两个状态间转场
 
 
-<figure>
-  <img src="assets/images/devguide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px"></img>
-</figure>
-
-
+<img src="generated/images/guide/animations/animation_basic_click.gif" alt="A simple transition animation" class="right">
 
 You can build a simple animation that transitions an element between two states
 driven by a model attribute.
@@ -126,37 +65,23 @@ to import a few animation-specific imports and functions:
 
 动画会被定义在`@Component`元数据中。在添加动画之前，先引入一些与动画有关的函数：
 
+<code-example path="animations/src/app/app.module.ts" region="animations-module" title="app.module.ts (@NgModule imports excerpt)" linenums="false"></code-example>
 
-<code-example path="animations/src/app/app.module.ts" region="animations-module" title="app.module.ts (@NgModule imports excerpt)" linenums="false">
-
-</code-example>
-
-
-
-<code-example path="animations/src/app/hero-list-basic.component.ts" region="imports" title="hero-list-basic.component.ts" linenums="false">
-
-</code-example>
-
-
+<code-example path="animations/src/app/hero-list-basic.component.ts" region="imports" title="hero-list-basic.component.ts" linenums="false"></code-example>
 
 With these, you can define an *animation trigger* called `heroState` in the component
 metadata. It uses animations to transition between two states: `active` and `inactive`. When a
 hero is active, the element appears in a slightly larger size and lighter color.
 
+
 通过这些，可以在组件元数据中定义一个名叫`heroState`的*动画触发器*。它在两个状态`active`和`inactive`之间进行转场。
-当英雄处于激活状态时，它会把该元素显示得稍微大一点、亮一点。
-
-
-<code-example path="animations/src/app/hero-list-basic.component.ts" region="animationdef" title="hero-list-basic.component.ts (@Component excerpt)" linenums="false">
+当英雄处于激活状态时，它会把该元素显示得稍微大一点、亮一点。<code-example path="animations/src/app/hero-list-basic.component.ts" region="animationdef" title="hero-list-basic.component.ts (@Component excerpt)" linenums="false">
 
 </code-example>
 
 
-
 <div class="alert is-helpful">
 
-
-
 In this example, you are defining animation styles (color and transform) inline in the
 animation metadata.
 
@@ -165,20 +90,15 @@ animation metadata.
 
 </div>
 
-
-
 Now, using the `[@triggerName]` syntax, attach the animation that you just defined to
 one or more elements in the component's template.
 
-我们刚刚定义了一个动画，但它还没有被用到任何地方。要想使用它，可以在模板中用`[@triggerName]`语法来把它附加到一个或多个元素上。
 
-
-<code-example path="animations/src/app/hero-list-basic.component.ts" region="template" title="hero-list-basic.component.ts (excerpt)" linenums="false">
+我们刚刚定义了一个动画，但它还没有被用到任何地方。要想使用它，可以在模板中用`[@triggerName]`语法来把它附加到一个或多个元素上。<code-example path="animations/src/app/hero-list-basic.component.ts" region="template" title="hero-list-basic.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
 
-
 Here, the animation trigger applies to every element repeated by an `ngFor`. Each of
 the repeated elements animates independently. The value of the
 attribute is bound to the expression `hero.state` and is always either `active` or `inactive`.
@@ -189,15 +109,12 @@ attribute is bound to the expression `hero.state` and is always either `active`
 With this setup, an animated transition appears whenever a hero object changes state.
 Here's the full component implementation:
 
-通过这些设置，一旦英雄对象的状态发生了变化，就会触发一个转场动画。下面是完整的组件实现：
 
-
-<code-example path="animations/src/app/hero-list-basic.component.ts" title="hero-list-basic.component.ts">
+通过这些设置，一旦英雄对象的状态发生了变化，就会触发一个转场动画。下面是完整的组件实现：<code-example path="animations/src/app/hero-list-basic.component.ts" title="hero-list-basic.component.ts">
 
 </code-example>
 
 
-
 ## States and transitions
 
 ## 状态与转场
@@ -220,12 +137,7 @@ We can define *styles* for each animation state:
 
 我们可以为每个动画状态定义了*一组样式*：
 
-
-<code-example path="animations/src/app/hero-list-basic.component.ts" region="states" title="src/app/hero-list-basic.component.ts" linenums="false">
-
-</code-example>
-
-
+<code-example path="animations/src/app/hero-list-basic.component.ts" region="states" title="src/app/hero-list-basic.component.ts" linenums="false"></code-example>
 
 These `state` definitions specify the *end styles* of each state.
 They are applied to the element once it has transitioned to that state, and stay
@@ -239,59 +151,43 @@ controls the timing of switching between one set of styles and the next:
 
 定义完状态，就能定义在状态之间的各种*转场*了。每个转场都会控制一条在一组样式和下一组样式之间切换的时间线：
 
+<code-example path="animations/src/app/hero-list-basic.component.ts" region="transitions" title="src/app/hero-list-basic.component.ts" linenums="false"></code-example>
 
-<code-example path="animations/src/app/hero-list-basic.component.ts" region="transitions" title="src/app/hero-list-basic.component.ts" linenums="false">
-
-</code-example>
-
-
-
-<figure class='image-display'>
-  <img src="assets/images/devguide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400"></img>
+<figure>
+  <img src="generated/images/guide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400">
 </figure>
 
-
-
 If several transitions have the same timing configuration, you can combine
 them into the same `transition` definition:
 
-如果多个转场都有同样的时间线配置，就可以把它们合并进同一个`transition`定义中：
 
-
-<code-example path="animations/src/app/hero-list-combined-transitions.component.ts" region="transitions" title="src/app/hero-list-combined-transitions.component.ts" linenums="false">
+如果多个转场都有同样的时间线配置，就可以把它们合并进同一个`transition`定义中：<code-example path="animations/src/app/hero-list-combined-transitions.component.ts" region="transitions" title="src/app/hero-list-combined-transitions.component.ts" linenums="false">
 
 </code-example>
 
 
-
 When both directions of a transition have the same timing, as in the previous
 example, you can use the shorthand syntax `<=>`:
 
-如果要对同一个转场的两个方向都使用相同的时间线（就像前面的例子中那样），就可以使用`<=>`这种简写语法：
 
-
-<code-example path="animations/src/app/hero-list-twoway.component.ts" region="transitions" title="src/app/hero-list-twoway.component.ts" linenums="false">
+如果要对同一个转场的两个方向都使用相同的时间线（就像前面的例子中那样），就可以使用`<=>`这种简写语法：<code-example path="animations/src/app/hero-list-twoway.component.ts" region="transitions" title="src/app/hero-list-twoway.component.ts" linenums="false">
 
 </code-example>
 
 
-
 You can also apply a style during an animation but not keep it around
 after the animation finishes. You can define such styles inline, in the `transition`. In this example,
 the element receives one set of styles immediately and is then animated to the next.
 When the transition finishes, none of these styles are kept because they're not
 defined in a `state`.
 
+
 有时希望一些样式只在动画期间生效，但在结束后并不保留它们。这时可以把这些样式内联在`transition`中进行定义。
-在这个例子中，该元素会立刻获得一组样式，然后动态转场到下一个状态。当转场结束时，这些样式并不会被保留，因为它们并没有被定义在`state`中。
-
-
-<code-example path="animations/src/app/hero-list-inline-styles.component.ts" region="transitions" title="src/app/hero-list-inline-styles.component.ts" linenums="false">
+在这个例子中，该元素会立刻获得一组样式，然后动态转场到下一个状态。当转场结束时，这些样式并不会被保留，因为它们并没有被定义在`state`中。<code-example path="animations/src/app/hero-list-inline-styles.component.ts" region="transitions" title="src/app/hero-list-inline-styles.component.ts" linenums="false">
 
 </code-example>
 
 
-
 ### The wildcard state `*`
 
 ### `*`(通配符)状态
@@ -307,15 +203,11 @@ transitions that apply regardless of which state the animation is in. For exampl
 
 * The `* => *` transition applies when *any* change between two states takes place.
 
-  当在*任意*两个状态之间切换时，`* => *`转场都会生效。
 
-
-<figure class='image-display'>
-  <img src="assets/images/devguide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400"></img>
+当在*任意*两个状态之间切换时，`* => *`转场都会生效。<figure >
+  <img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400">
 </figure>
 
-
-
 ### The `void` state
 
 ### `void`状态
@@ -331,15 +223,11 @@ leave animations.
 For example the `* => void` transition applies when the element leaves the view,
 regardless of what state it was in before it left.
 
-比如当一个元素离开视图时，`* => void`转场就会生效，而不管它在离场以前是什么状态。
 
-
-<figure class='image-display'>
-  <img src="assets/images/devguide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400"></img>
+比如当一个元素离开视图时，`* => void`转场就会生效，而不管它在离场以前是什么状态。<figure >
+  <img src="generated/images/guide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400">
 </figure>
 
-
-
 The wildcard state `*` also matches `void`.
 
 `*`通配符状态也能匹配`void`。
@@ -349,11 +237,7 @@ The wildcard state `*` also matches `void`.
 ## 例子：进场与离场  
 
 
-<figure>
-  <img src="assets/images/devguide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;"></img>
-</figure>
-
-
+<img src="generated/images/guide/animations/animation_enter_leave.gif" alt="Enter and leave animations" class="right" width="250">
 
 Using the `void` and `*` states you can define transitions that animate the
 entering and leaving of elements:
@@ -368,17 +252,13 @@ entering and leaving of elements:
 
   离场：`* => void`
 
-For example, in the `animations` array below there are two transitions that use 
+For example, in the `animations` array below there are two transitions that use
 the `void => *` and `* => void` syntax to animate the element in and out of the view.
 
 例如，在下面的`animations`数组中，这两个转场语句使用`void => *`和`* => void`语法来让该元素以动画形式进入和离开当前视图。
 
 
-<code-example path="animations/src/app/hero-list-enter-leave.component.ts" region="animationdef" title="hero-list-enter-leave.component.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
+<code-example path="animations/src/app/hero-list-enter-leave.component.ts" region="animationdef" title="hero-list-enter-leave.component.ts (excerpt)" linenums="false"></code-example>
 
 Note that in this case the styles are applied to the void state directly in the
 transition definitions, and not in a separate `state(void)` definition. Thus, the transforms
@@ -391,8 +271,6 @@ and leaves to the right.
 
 <div class="l-sub-section">
 
-
-
 These two common animations have their own aliases:
 
 这两个常见的动画有自己的别名：
@@ -400,25 +278,16 @@ These two common animations have their own aliases:
 <code-example language="typescript">
   transition(':enter', [ ... ]); // void => *
   transition(':leave', [ ... ]); // * => void
-
 </code-example>
 
-
-
 </div>
 
-
-
 ## Example: Entering and leaving from different states
 
 ## 范例：从不同的状态下进场和离场
 
 
-<figure>
-  <img src="assets/images/devguide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px"></img>
-</figure>
-
-
+<img src="generated/images/guide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" class="right" width="200">
 
 You can also combine this animation with the earlier state transition animation by
 using the hero state as the animation state. This lets you configure
@@ -445,20 +314,12 @@ is:
 
 This gives you fine-grained control over each transition:
 
-现在就对每一种转场都有了细粒度的控制：
 
-
-<figure class='image-display'>
-  <img src="assets/images/devguide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400"></img>
+现在就对每一种转场都有了细粒度的控制：<figure >
+  <img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400">
 </figure>
 
-
-
-<code-example path="animations/src/app/hero-list-enter-leave-states.component.ts" region="animationdef" title="hero-list-enter-leave.component.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
+<code-example path="animations/src/app/hero-list-enter-leave-states.component.ts" region="animationdef" title="hero-list-enter-leave.component.ts (excerpt)" linenums="false"></code-example>
 
 ## Animatable properties and units
 
@@ -494,11 +355,7 @@ If you don't provide a unit when specifying dimension, Angular assumes the defau
 
 ## 自动属性值计算  
 
-<figure>
-  <img src="assets/images/devguide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px"></img>
-</figure>
-
-
+<img src="generated/images/guide/animations/animation_auto.gif" alt="Animation with automated height calculation" class="right" width="220">
 
 Sometimes you don't know the value of a dimensional style property until runtime.
 For example, elements often have widths and heights that
@@ -515,15 +372,12 @@ property is computed at runtime and then plugged into the animation.
 In this example, the leave animation takes whatever height the element has before it
 leaves and animates from that height to zero:
 
-这个例子中的“离场”动画会取得该元素在离场前的高度，并且把它从这个高度用动画转场到0高度：
 
-
-<code-example path="animations/src/app/hero-list-auto.component.ts" region="animationdef" title="src/app/hero-list-auto.component.ts" linenums="false">
+这个例子中的“离场”动画会取得该元素在离场前的高度，并且把它从这个高度用动画转场到0高度：<code-example path="animations/src/app/hero-list-auto.component.ts" region="animationdef" title="src/app/hero-list-auto.component.ts" linenums="false">
 
 </code-example>
 
 
-
 ## Animation timing
 
 ## 动画时间线
@@ -590,11 +444,7 @@ and the delay (or as the *second* value when there is no delay):
   运行200毫秒，并且带缓动：`'0.2s ease-in-out'`
 
 
-<figure>
-  <img src="assets/images/devguide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px"></img>
-</figure>
-
-
+<img src="generated/images/guide/animations/animation_timings.gif" alt="Animations with specific timings" class="right" width="220">
 
 ### Example
 
@@ -605,25 +455,18 @@ Here are a couple of custom timings in action. Both enter and leave last for
 slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`:
 
 
-这里是两个自定义时间线的动态演示。“进场”和“离场”都持续200毫秒，也就是`0.2s`，但它们有不同的缓动函数。“离场”动画会在100毫秒的延迟之后开始，也就是`'0.2s 10 ease-out'`：
 
-
-<code-example path="animations/src/app/hero-list-timings.component.ts" region="animationdef" title="hero-list-timings.component.ts (excerpt)" linenums="false">
+这里是两个自定义时间线的动态演示。“进场”和“离场”都持续200毫秒，也就是`0.2s`，但它们有不同的缓动函数。“离场”动画会在100毫秒的延迟之后开始，也就是`'0.2s 10 ease-out'`：<code-example path="animations/src/app/hero-list-timings.component.ts" region="animationdef" title="hero-list-timings.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
 
-
 ## Multi-step animations with keyframes
 
 ## 基于关键帧(Keyframes)的多阶段动画
 
 
-<figure>
-  <img src="assets/images/devguide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" align="right" style="width:220px;margin-left:20px"></img>
-</figure>
-
-
+<img src="generated/images/guide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" class="right" width="220">
 
 Animation *keyframes* go beyond a simple transition to a more intricate animation
 that goes through one or more intermediate styles when transitioning between two sets of styles.
@@ -639,15 +482,12 @@ which marks the beginning of the animation, and one, which marks the end.
 This example adds some "bounce" to the enter and leave animations with
 keyframes:
 
-在这个例子中，我们使用关键帧来为进场和离场动画添加一些“反弹效果”：
 
-
-<code-example path="animations/src/app/hero-list-multistep.component.ts" region="animationdef" title="hero-list-multistep.component.ts (excerpt)" linenums="false">
+在这个例子中，我们使用关键帧来为进场和离场动画添加一些“反弹效果”：<code-example path="animations/src/app/hero-list-multistep.component.ts" region="animationdef" title="hero-list-multistep.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
 
-
 Note that the offsets are *not* defined in terms of absolute time. They are relative
 measures from zero to one. The final timeline of the animation is based on the combination
 of keyframe offsets, duration, delay, and easing.
@@ -665,11 +505,7 @@ offsets receive offsets `0`, `0.5`, and `1`.
 
 ## 并行动画组(Group)  
 
-<figure>
-  <img src="assets/images/devguide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px"></img>
-</figure>
-
-
+<img src="generated/images/guide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" class="right" width="220px">
 
 You've seen how to animate multiple style properties at the same time:
 just put all of them into the same `style()` definition.
@@ -686,16 +522,13 @@ For this you can use animation *groups*. In this example, using groups both on
 enter and leave allows for two different timing configurations. Both
 are applied to the same element in parallel, but run independently of each other:
 
+
 这种情况下就可以用动画*组*来解决了。在这个例子中，我们同时在进场和离场时使用了组，以便能让它们使用两种不同的时间线配置。
-它们被同时应用到同一个元素上，但又彼此独立运行：
-
-
-<code-example path="animations/src/app/hero-list-groups.component.ts" region="animationdef" title="hero-list-groups.component.ts (excerpt)" linenums="false">
+它们被同时应用到同一个元素上，但又彼此独立运行：<code-example path="animations/src/app/hero-list-groups.component.ts" region="animationdef" title="hero-list-groups.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
 
-
 One group animates the element transform and width; the other group animates the opacity.
 
 其中一个动画组对元素的`transform`和`width`做动画，另一个组则对`opacity`做动画。
@@ -713,18 +546,13 @@ those callbacks like this:
 
 对于例子中的这个关键帧，我们有一个叫做`@flyInOut`的`trigger`。在那里我们可以挂钩到那些回调，比如：  
 
+<code-example path="animations/src/app/hero-list-multistep.component.ts" region="template" title="hero-list-multistep.component.ts (excerpt)" linenums="false"></code-example>
 
-<code-example path="animations/src/app/hero-list-multistep.component.ts" region="template" title="hero-list-multistep.component.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
-
-The callbacks receive an `AnimationEvent` that contains contains useful properties such as 
+The callbacks receive an `AnimationEvent` that contains useful properties such as
 `fromState`, `toState` and `totalTime`.
 
 这些回调接收一个`AnimationTransitionEvent`参数，它包含一些有用的属性，例如`fromState`，`toState`和`totalTime`。
 
 Those callbacks will fire whether or not an animation is picked up.
 
-无论动画是否实际执行过，那些回调都会触发。
\ No newline at end of file
+无论动画是否实际执行过，那些回调都会触发。
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index 00ada2063e..8db383e0c1 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -1,105 +1,12 @@
-@title
-预 (AoT) 编译器
-
-@intro
-学习如何使用预编译器
-
-@description
+# Ahead-of-Time Compilation
 
+# 预 (AoT) 编译器
 
 This cookbook describes how to radically improve performance by compiling _ahead-of-time_ (AOT)
 during a build process.
 
-这个烹饪指南描述如何通过在构建过程中进行预编译（Ahead of Time - AOT）来从根本上提升性能。
-
-
-{@a toc}
-
-
-# Contents
-
-# 目录
-
-* [Overview](guide/aot-compiler#overview)
-
-  [概览](guide/aot-compiler#overview)
-  
-* [Ahead-of-time (AOT) vs just-in-time (JIT)](guide/aot-compiler#aot-jit)
-
-  [预编译(AOT) vs 即时编译(JIT)](guide/aot-compiler#aot-jit)
-  
-* [Why do AOT compilation?](guide/aot-compiler#why-aot)
-
-  [为什么需要AOT编译？](guide/aot-compiler#why-aot)
-  
-* [Compile with AOT](guide/aot-compiler#compile)
-
-  [用AOT进行编译](guide/aot-compiler#compile)
-  
-* [Bootstrap](guide/aot-compiler#bootstrap)
-   
-  [引导](guide/aot-compiler#bootstrap)
-   
-* [Tree shaking](guide/aot-compiler#tree-shaking)
-
-  [摇树优化（Tree Shaking）](guide/aot-compiler#tree-shaking)
-
-  * [Rollup](guide/aot-compiler#rollup)
-  
-  * [Rollup Plugins](guide/aot-compiler#rollup-plugins)
-  
-    [Rollup插件](guide/aot-compiler#rollup-plugins)
-    
-  * [Run Rollup](guide/aot-compiler#run-rollup)
-  
-    [运行Rollup](guide/aot-compiler#run-rollup)
-
-* [Load the bundle](guide/aot-compiler#load)
-
-  [加载捆(bundle)文件](guide/aot-compiler#load)
-  
-* [Serve the app](guide/aot-compiler#serve)
-
-  [启动开发服务器](guide/aot-compiler#serve)
-  
-* [AOT QuickStart source code](guide/aot-compiler#source-code)
-
-  [AOT 快速起步源码](guide/aot-compiler#source-code)
-  
-* [Workflow and convenience script](guide/aot-compiler#workflow)
-
-  [工作流与辅助脚本](guide/aot-compiler#workflow)
-
-  * [Develop JIT along with AOT](guide/aot-compiler#run-jit)
-  
-    [先用JIT开发，再用AOT发布](guide/aot-compiler#run-jit)
-
-* [Tour of Heroes](guide/aot-compiler#toh)
-
-  [英雄指南](guide/aot-compiler#toh)
-
-  * [JIT in development, AOT in production](guide/aot-compiler#jit-dev-aot-prod)
-  
-    [开发环境JIT，生产环境AOT](guide/aot-compiler#jit-dev-aot-prod)
-    
-  * [Tree shaking](guide/aot-compiler#shaking)
-  
-    [摇树优化](guide/aot-compiler#shaking)
-    
-  * [Running the application](guide/aot-compiler#running-app)
-  
-    [运行本应用](guide/aot-compiler#running-app)
-    
-  * [Inspect the Bundle](guide/aot-compiler#inspect-bundle)
-  
-    [审查捆(bundle)文件](guide/aot-compiler#inspect-bundle)
-
-
-
 {@a overview}
 
-
-
 ## Overview
 
 ## 概览
@@ -113,16 +20,12 @@ Angular应用主要包含组件和它们的HTML模板。
 
 <div class="l-sub-section">
 
-
-
-<a href="https://www.youtube.com/watch?v=kW9cJsvcsGo" target="_blank">Watch compiler author Tobias Bosch explain the Angular Compiler</a> at AngularConnect 2016.
+  <a href="https://www.youtube.com/watch?v=kW9cJsvcsGo">Watch compiler author Tobias Bosch explain the Angular Compiler</a> at AngularConnect 2016.
 
 观看编译器作者Tobias Bosch在AngularConnect 2016大会里，对<a href="http://v.youku.com/v_show/id_XMTc1NTE4NTkwOA==.html?from=y1.7-1.4" target="_blank">Angular编译器</a>的演讲。
 
 </div>
 
-
-
 You can compile the app in the browser, at runtime, as the application loads, using the **_just-in-time_ (JIT) compiler**.
 This is the standard development approach shown throughout the documentation.
 It's great but it has shortcomings.
@@ -155,8 +58,6 @@ by compiling at build time.
 
 {@a aot-jit}
 
-
-
 ## _Ahead-of-time_ (AOT) vs _just-in-time_ (JIT)
 ## 预编译（AOT） vs 即时编译（JIT）
 
@@ -170,7 +71,6 @@ with JIT it runs every time for every user at runtime using a different set of l
 
 {@a why-aot}
 
-
 ## Why do AOT compilation?
 
 ## 为什么需要AOT编译？
@@ -228,8 +128,6 @@ AOT编译远在HTML模版和组件被服务到客户端之前，将它们编译
 
 {@a compile}
 
-
-
 ## Compile with AOT
 
 ## 用AOT进行编译
@@ -243,19 +141,12 @@ AOT编译需要一些简单的准备步骤。我们先从<a href='../guide/setup
 
 
 <code-tabs>
-
-  <code-pane title="src/app/app.component.html" path="cb-aot-compiler/src/app/app.component.html">
-
+  <code-pane title="src/app/app.component.html" path="aot-compiler/src/app/app.component.html">
   </code-pane>
-
-  <code-pane title="src/app/app.component.ts" path="cb-aot-compiler/src/app/app.component.ts">
-
+  <code-pane title="src/app/app.component.ts" path="aot-compiler/src/app/app.component.ts">
   </code-pane>
-
 </code-tabs>
 
-
-
 Install a few new npm dependencies with the following command: 
 
 用下列命令安装少量新的npm依赖：
@@ -265,8 +156,6 @@ Install a few new npm dependencies with the following command:
   npm install @angular/compiler-cli @angular/platform-server --save
 </code-example>
 
-
-
 You will run the `ngc` compiler provided in the `@angular/compiler-cli` npm package
 instead of the TypeScript compiler (`tsc`).
 
@@ -280,16 +169,11 @@ instead of the TypeScript compiler (`tsc`).
 Copy the original `src/tsconfig.json` to a file called `tsconfig-aot.json` on the project root,
 then modify it as follows.
 
+
 `ngc`需要自己的带有AOT专用设置的`tsconfig.json`。
-把原始的`tsconfig.json`拷贝到一个名叫`tsconfig-aot.json`的文件中，然后像这样修改它：
-
-
-<code-example path="cb-aot-compiler/tsconfig-aot.json" title="tsconfig-aot.json" linenums="false">
-
+把原始的`tsconfig.json`拷贝到一个名叫`tsconfig-aot.json`的文件中，然后像这样修改它：<code-example path="aot-compiler/tsconfig-aot.json" title="tsconfig-aot.json" linenums="false">
 </code-example>
 
-
-
 The `compilerOptions` section is unchanged except for one property.
 **Set the `module` to `es2015`**.
 This is important as explained later in the [Tree Shaking](guide/aot-compiler#tree-shaking) section.
@@ -341,26 +225,18 @@ Initiate AOT compilation from the command line using the previously installed `n
   node_modules/.bin/ngc -p tsconfig-aot.json
 </code-example>
 
-
-
 <div class="l-sub-section">
 
 
 
 Windows users should surround the `ngc` command in double quotes:
 
-Windows用户应该双引号`ngc`命令：
-
-<code-example format='.'>
+Windows用户应该双引号`ngc`命令：<code-example format='.'>
   "node_modules/.bin/ngc" -p tsconfig-aot.json
 </code-example>
 
-
-
 </div>
 
-
-
 `ngc` expects the `-p` switch to point to a `tsconfig.json` file or a folder containing a `tsconfig.json` file.
 
 `ngc`希望`-p`选项指向一个`tsconfig.json`文件，或者一个包含`tsconfig.json`文件的目录。
@@ -382,14 +258,10 @@ Note that the original component class is still referenced internally by the gen
 
 <div class="l-sub-section">
 
+  The curious can open `aot/app.component.ngfactory.ts` to see the original Angular template syntax
+  compiled to TypeScript, its intermediate form.
 
-
-The curious can open `aot/app.component.ngfactory.ts` to see the original Angular template syntax
-compiled to TypeScript, its intermediate form.
-
-如果你好奇，可以打开`aot/app.component.ngfactory.ts`来看看原始Angular模板语法被编译成TypeScript时的中间结果。
-
-JIT compilation generates these same _NgFactories_ in memory where they are largely invisible.
+如果你好奇，可以打开`aot/app.component.ngfactory.ts`来看看原始Angular模板语法被编译成TypeScript时的中间结果。JIT compilation generates these same _NgFactories_ in memory where they are largely invisible.
 AOT compilation reveals them as separate, physical files.
 
 JIT编译器在内存中同样会生成这一堆*NgFactory*，但它们大部分是不可见的。
@@ -398,27 +270,17 @@ AOT编译器则会生成在单独的物理文件中。
 
 </div>
 
-
-
-
-
 <div class="alert is-important">
 
-
-
-Do not edit the _NgFactories_! Re-compilation replaces these files and all edits will be lost.
+  Do not edit the _NgFactories_! Re-compilation replaces these files and all edits will be lost.
 
 不要编辑这些*NgFactory*！重新编译时会替换这些文件，你做的所有修改都会丢失。
 
 
 </div>
 
-
-
 {@a bootstrap}
 
-
-
 ## Bootstrap
 
 ## 引导
@@ -450,27 +312,19 @@ Here is AOT bootstrap in `main.ts` next to the original JIT version:
 
 
 <code-tabs>
-
-  <code-pane title="src/main.ts" path="cb-aot-compiler/src/main.ts">
-
+  <code-pane title="src/main.ts" path="aot-compiler/src/main.ts">
   </code-pane>
-
-  <code-pane title="src/main-jit.ts" path="cb-aot-compiler/src/main-jit.ts">
-
+  <code-pane title="src/main-jit.ts" path="aot-compiler/src/main-jit.ts">
   </code-pane>
-
 </code-tabs>
 
 
 
-Be sure to [recompile](guide/aot-compiler#compiling-aot) with `ngc`!
-
+Be sure to [recompile](guide/aot-compiler#compile) with `ngc`!
 确保用`ngc`进行[重新编译](guide/aot-compiler#compiling-aot)！
 
-
 {@a tree-shaking}
 
-
 ## Tree shaking
 
 ## 摇树优化（Tree shaking）
@@ -506,7 +360,6 @@ AOT编译会把应用中的大部分都转换成JavaScript，这种转换会让
 
 {@a rollup}
 
-
 ### Rollup
 
 This cookbook illustrates a tree shaking utility called _Rollup_.
@@ -526,11 +379,9 @@ Rollup只能对`ES2015`模块摇树，因为那里有`import`和`export`语句
 
 <div class="l-sub-section">
 
-
-
-Recall that `tsconfig-aot.json` is configured to produce `ES2015` modules.
-It's not important that the code itself be written with `ES2015` syntax such as `class` and `const`.
-What matters is that the code uses ES `import` and `export` statements rather than `require` statements.
+  Recall that `tsconfig-aot.json` is configured to produce `ES2015` modules.
+  It's not important that the code itself be written with `ES2015` syntax such as `class` and `const`.
+  What matters is that the code uses ES `import` and `export` statements rather than `require` statements.
 
 回忆一下，`tsconfig-aot.json`中曾配置为生成`ES2015`的模块。
 代码本身是否用到了`ES2015`语法（例如`class`和`const`）并不重要，重要的是这些代码使用的应该是`import`和`export`语句，而不是`require`语句。
@@ -538,8 +389,6 @@ What matters is that the code uses ES `import` and `export` statements rather th
 
 </div>
 
-
-
 In the terminal window, install the Rollup dependencies with this command:
 
 通过下列命令安装Rollup依赖：
@@ -549,22 +398,15 @@ In the terminal window, install the Rollup dependencies with this command:
   npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev
 </code-example>
 
-
-
 Next, create a configuration file (`rollup-config.js`)
 in the project root directory to tell Rollup how to process the application.
 The cookbook configuration file looks like this.
 
+
 接下来，在项目根目录新建一个配置文件（`rollup-config.js`），来告诉Rollup如何处理应用。
-本烹饪书配置文件是这样的：
-
-
-<code-example path="cb-aot-compiler/rollup-config.js" title="rollup-config.js" linenums="false">
-
+本烹饪书配置文件是这样的：<code-example path="aot-compiler/rollup-config.js" title="rollup-config.js" linenums="false">
 </code-example>
 
-
-
 This config file tells Rollup that the app entry point is `src/app/main.js` .
 The `dest` attribute tells Rollup to create a bundle called `build.js` in the `dist` folder.
 It overrides the default `onwarn` method in order to skip annoying messages about the AOT compiler's use of the `this` keyword.
@@ -580,7 +422,6 @@ The next section covers the plugins in more depth.
 
 {@a rollup-plugins}
 
-
 ### Rollup Plugins
 
 ### Rollup插件
@@ -605,57 +446,42 @@ The _RxJs_ Observable library is an essential Angular dependency published as an
 
 Luckily, there is a Rollup plugin that modifies _RxJs_
 to use the ES `import` and `export` statements that Rollup requires.
-Rollup then preserves the parts of `RxJS` referenced by the application 
-in the final bundle. Using it is straigthforward. Add the following to 
+Rollup then preserves the parts of `RxJS` referenced by the application
+in the final bundle. Using it is straigthforward. Add the following to
 the `plugins` array in `rollup-config.js`:
 
+
 幸运的是，有一个Rollup插件，它会修改*RxJS*，以使用Rollup所需的ES`import`和`export`语句。
 然后Rollup就可以把该应用中用到的那部分`RxJS`代码留在“捆”文件中了。
-它的用法很简单。把下列代码添加到`rollup-config.js`的`plugins`数组中：
-
-
-<code-example path="cb-aot-compiler/rollup-config.js" region="commonjs" title="rollup-config.js (CommonJs to ES2015 Plugin)" linenums="false">
-
+它的用法很简单。把下列代码添加到`rollup-config.js`的`plugins`数组中：<code-example path="aot-compiler/rollup-config.js" region="commonjs" title="rollup-config.js (CommonJs to ES2015 Plugin)" linenums="false">
 </code-example>
 
-
-
 *Minification*
 
 *最小化*
 
 Rollup tree shaking reduces code size considerably.  Minification makes it smaller still.
-This cookbook relies on the _uglify_ Rollup plugin to minify and mangle the code. 
+This cookbook relies on the _uglify_ Rollup plugin to minify and mangle the code.
 Add the following to the `plugins` array:
 
+
 Rollup做摇树优化时会大幅减小代码体积。最小化过程则会让它更小。
 本烹饪宝典依赖于Rollup插件*uglify*来最小化并混淆代码。
-把下列代码添加到`plugins`数组中：
-
-
-<code-example path="cb-aot-compiler/rollup-config.js" region="uglify" title="rollup-config.js (CommonJs to ES2015 Plugin)" linenums="false">
-
+把下列代码添加到`plugins`数组中：<code-example path="aot-compiler/rollup-config.js" region="uglify" title="rollup-config.js (CommonJs to ES2015 Plugin)" linenums="false">
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
-In a production setting, you would also enable gzip on the web server to compress
-the code into an even smaller package going over the wire.
+  In a production setting, you would also enable gzip on the web server to compress
+  the code into an even smaller package going over the wire.
 
 在生产环境中，我们还应该打开Web服务器的gzip特性来把代码压缩得更小。
 
 
 </div>
 
-
-
 {@a run-rollup}
 
-
 ### Run Rollup
 
 ### 运行Rollup
@@ -669,33 +495,20 @@ Execute the Rollup process with this command:
   node_modules/.bin/rollup -c rollup-config.js
 </code-example>
 
-
-
 <div class="l-sub-section">
 
 
 
 Windows users should surround the `rollup` command in double quotes:
 
-Windows用户要把`rollup`命令放进双引号中：
-
-
-<code-example language="none" class="code-shell">
+Windows用户要把`rollup`命令放进双引号中：<code-example language="none" class="code-shell">
   "node_modules/.bin/rollup"  -c rollup-config.js
 </code-example>
 
-
-
 </div>
 
-
-
-
-
 {@a load}
 
-
-
 ## Load the bundle
 
 ## 加载捆文件
@@ -704,21 +517,14 @@ Loading the generated application bundle does not require a module loader like S
 Remove the scripts that concern SystemJS.
 Instead, load the bundle file using a single `<script>` tag **_after_** the `</body>` tag:
 
+
 加载所生成的应用捆文件，并不需要使用像SystemJS这样的模块加载器。
 移除与SystemJS有关的那些脚本吧。
-改用`<script>`标签来加载这些捆文件：
-
-
-<code-example path="cb-aot-compiler/src/index.html" region="bundle" title="index.html (load bundle)" linenums="false">
-
+改用`<script>`标签来加载这些捆文件：<code-example path="aot-compiler/src/index.html" region="bundle" title="index.html (load bundle)" linenums="false">
 </code-example>
 
-
-
 {@a serve}
 
-
-
 ## Serve the app
 
 ## 启动应用服务器
@@ -735,8 +541,6 @@ Use the same `lite-server` employed elsewhere in the documentation:
 
 </code-example>
 
-
-
 The server starts, launches a browser, and the app should appear.
 
 启动了服务器、打开浏览器，应用就出现了。
@@ -744,8 +548,6 @@ The server starts, launches a browser, and the app should appear.
 
 {@a source-code}
 
-
-
 ## AOT QuickStart source code
 
 ## AOT快速起步源代码
@@ -755,39 +557,22 @@ Here's the pertinent source code:
 下面是相关源代码：
 
 <code-tabs>
-
-  <code-pane title="src/app/app.component.html" path="cb-aot-compiler/src/app/app.component.html">
-
+  <code-pane title="src/app/app.component.html" path="aot-compiler/src/app/app.component.html">
   </code-pane>
-
-  <code-pane title="src/app/app.component.ts" path="cb-aot-compiler/src/app/app.component.ts">
-
+  <code-pane title="src/app/app.component.ts" path="aot-compiler/src/app/app.component.ts">
   </code-pane>
-
-  <code-pane title="src/main.ts" path="cb-aot-compiler/src/main.ts">
-
+  <code-pane title="src/main.ts" path="aot-compiler/src/main.ts">
   </code-pane>
-
-  <code-pane title="src/index.html" path="cb-aot-compiler/src/index.html">
-
+  <code-pane title="src/index.html" path="aot-compiler/src/index.html">
   </code-pane>
-
-  <code-pane title="tsconfig-aot.json" path="cb-aot-compiler/tsconfig-aot.json">
-
+  <code-pane title="tsconfig-aot.json" path="aot-compiler/tsconfig-aot.json">
   </code-pane>
-
-  <code-pane title="rollup-config.js" path="cb-aot-compiler/rollup-config.js">
-
+  <code-pane title="rollup-config.js" path="aot-compiler/rollup-config.js">
   </code-pane>
-
 </code-tabs>
 
-
-
 {@a workflow}
 
-
-
 ## Workflow and convenience script
 
 ## 工作流与便利脚本
@@ -810,14 +595,10 @@ Open a terminal window and try it.
 
 <code-example language="none" class="code-shell">
   npm run build:aot
-
 </code-example>
 
-
-
 {@a run-jit}
 
-
 ### Develop JIT along with AOT
 
 ### 先用JIT开发，再AOT发布
@@ -843,12 +624,9 @@ AOT编译和Rollup打包加起来要花好几秒钟。
   代之以如下的SystemJS脚本：
 
 
-<code-example path="cb-aot-compiler/src/index-jit.html" region="jit" title="src/index-jit.html (SystemJS scripts)" linenums="false">
-
+<code-example path="aot-compiler/src/index-jit.html" region="jit" title="src/index-jit.html (SystemJS scripts)" linenums="false">
 </code-example>
 
-
-
 Notice the slight change to the `system.import` which now specifies `src/app/main-jit`.
 That's the JIT version of the bootstrap file that we preserved [above](guide/aot-compiler#bootstrap).
 
@@ -866,8 +644,6 @@ Open a _different_ terminal window and enter `npm start`.
 
 </code-example>
 
-
-
 That compiles the app with JIT and launches the server.
 The server loads `index.html` which is still the AOT version, which you can confirm in the browser console.
 Change the address bar to `index-jit.html` and it loads the JIT version.
@@ -896,8 +672,6 @@ Now you can develop JIT and AOT, side-by-side.
 
 {@a toh}
 
-
-
 ## Tour of Heroes
 
 ## 英雄指南
@@ -912,7 +686,6 @@ to an app with more substance, the [_Tour of Heroes_](tutorial/toh-pt6) applicat
 
 {@a jit-dev-aot-prod}
 
-
 ### JIT in development, AOT in production
 
 ### 开发器使用JIT, 产品期使用AOT
@@ -939,19 +712,13 @@ Here they are for comparison:
 
 
 <code-tabs>
-
-  <code-pane title="aot/index.html (AOT)" path="toh-6/aot/index.html">
-
+  <code-pane title="aot/index.html (AOT)" path="toh-pt6/aot/index.html">
   </code-pane>
-
-  <code-pane title="src/index.html (JIT)" path="toh-6/src/index.html">
-
+  <code-pane title="src/index.html (JIT)" path="toh-pt6/src/index.html">
   </code-pane>
-
 </code-tabs>
 
 
-
 The JIT version relies on `SystemJS` to load individual modules.
 Its scripts appear in its `index.html`.
 
@@ -971,19 +738,12 @@ AOT版本用一个单独的脚本来加载整个应用 - `aot/dist/build.js`。
 
 
 <code-tabs>
-
-  <code-pane title="main-aot.ts (AOT)" path="toh-6/src/main-aot.ts">
-
+  <code-pane title="main-aot.ts (AOT)" path="toh-pt6/src/main-aot.ts">
   </code-pane>
-
-  <code-pane title="main.ts (JIT)" path="toh-6/src/main.ts">
-
+  <code-pane title="main.ts (JIT)" path="toh-pt6/src/main.ts">
   </code-pane>
-
 </code-tabs>
 
-
-
 ***TypeScript configuration***
 
 ***TypeScript配置***
@@ -1002,43 +762,28 @@ You'll need separate TypeScript configuration files such as these:
 
 
 <code-tabs>
-
-  <code-pane title="tsconfig-aot.json (AOT)" path="toh-6/tsconfig-aot.json">
-
+  <code-pane title="tsconfig-aot.json (AOT)" path="toh-pt6/tsconfig-aot.json">
   </code-pane>
-
-  <code-pane title="src/tsconfig.json (JIT)" path="toh-6/src/tsconfig.1.json">
-
+  <code-pane title="src/tsconfig.json (JIT)" path="toh-pt6/src/tsconfig.1.json">
   </code-pane>
-
 </code-tabs>
 
-
-
 <div class="callout is-helpful">
 
-
-
-<header>
-  @Types and node modules
-</header>
+  <header>
+    `@types` and node modules
+  </header>
 
 
 
 <header>
   @Types和node模块
-</header>
-
-
-
-In the file structure of _this particular sample project_,
-the `node_modules` folder happens to be two levels up from the project root. 
-Therefore, `"typeRoots"` must be set to `"../../node_modules/@types/"`. 
+</header>In the file structure of _this particular sample project_,
+the `node_modules` folder happens to be two levels up from the project root.
+Therefore, `"typeRoots"` must be set to `"../../node_modules/@types/"`.
 
 在**这个特定的示例项目**的文件结构中，`node_modules`文件恰好比项目根目录高两级。
-因此，`"typeRoots"`必须设置为`"../../node_modules/@types/"`。
-
-In a more typical project, `node_modules` would be a sibling of `tsconfig-aot.json`
+因此，`"typeRoots"`必须设置为`"../../node_modules/@types/"`。In a more typical project, `node_modules` would be a sibling of `tsconfig-aot.json`
 and `"typeRoots"` would be set to `"node_modules/@types/"`.
 Edit your `tsconfig-aot.json` to fit your project's file structure.
 
@@ -1049,29 +794,20 @@ Edit your `tsconfig-aot.json` to fit your project's file structure.
 
 </div>
 
-
-
 {@a shaking}
 
-
 ### Tree shaking
 
 ### 摇树优化
 
 Rollup does the tree shaking as before.
 
-Rollup和以前一样，仍然进行摇树优化。
-
-
-<code-example path="toh-6/rollup-config.js" title="rollup-config.js" linenums="false">
 
+Rollup和以前一样，仍然进行摇树优化。<code-example path="toh-pt6/rollup-config.js" title="rollup-config.js" linenums="false">
 </code-example>
 
-
-
 {@a running-app}
 
-
 ### Running the application
 
 ### 运行应用
@@ -1079,27 +815,18 @@ Rollup和以前一样，仍然进行摇树优化。
 
 <div class="alert is-important">
 
+  The general audience instructions for running the AOT build of the Tour of Heroes app are not ready.
+  
+  面向大众的运行AOT构建的英雄指南应用的说明还没有准备好。
 
+  The following instructions presuppose that you have downloaded the
+  <a href="generated/zips/toh-pt6/toh-pt6.zip" target="_blank">Tour of Heroes' zip</a>
+  and run `npm install` on it.
 
-The general audience instructions for running the AOT build of the Tour of Heroes app are not ready.
-
-面向大众的运行AOT构建的英雄指南应用的说明还没有准备好。
-
-The following instructions presuppose that you have cloned the
-<a href="https://github.com/angular/angular.io" target="_blank">angular.io</a>
-github repository and prepared it for development as explained in the repo's README.md.
-
-下面的说明假设你克隆了<a href="https://github.com/angular/angular.io" target="_blank">angular.io</a> Github库，并按照该库的README.md准备了开发环境。
-
-The _Tour of Heroes_ source code is in the `public/docs/_examples/toh-6/ts` folder.
-
-**英雄指南**源代码在`public/docs/_examples/toh-6/ts`目录。
-
+  // TODO: Translate
 
 </div>
 
-
-
 Run the JIT-compiled app with `npm start` as for all other JIT examples.
 
 和其他JIT例子一样，使用`npm start`命令，运行JIT编译的应用：
@@ -1109,27 +836,16 @@ Compiling with AOT presupposes certain supporting files, most of them discussed
 AOT编译假设上面介绍的一些支持文件都以准备好。
 
 <code-tabs>
-
-  <code-pane title="src/index.html" path="toh-6/src/index.html">
-
+  <code-pane title="src/index.html" path="toh-pt6/src/index.html">
   </code-pane>
-
-  <code-pane title="copy-dist-files.js" path="toh-6/copy-dist-files.js">
-
+  <code-pane title="copy-dist-files.js" path="toh-pt6/copy-dist-files.js">
   </code-pane>
-
-  <code-pane title="rollup-config.js" path="toh-6/rollup-config.js">
-
+  <code-pane title="rollup-config.js" path="toh-pt6/rollup-config.js">
   </code-pane>
-
-  <code-pane title="tsconfig-aot.json" path="toh-6/tsconfig-aot.json">
-
+  <code-pane title="tsconfig-aot.json" path="toh-pt6/tsconfig-aot.json">
   </code-pane>
-
 </code-tabs>
 
-
-
 Extend the `scripts` section of the `package.json` with these npm scripts:
 
 使用下面的npm脚本，扩展`package.json`文件的`scripts`部分：
@@ -1143,20 +859,14 @@ Copy the AOT distribution files into the `/aot` folder with the node script:
   node copy-dist-files
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
-You won't do that again until there are updates to `zone.js` or the `core-js` shim for old browsers.
+  You won't do that again until there are updates to `zone.js` or the `core-js` shim for old browsers.
 
 直到`zone.js`或者支持老版本浏览器的`core-js`垫片有更新，你不需要再这样做。
 
 </div>
 
-
-
 Now AOT-compile the app and launch it with the `lite-server`:
 
 现在AOT编译应用，并使用`lite`服务器启动它：
@@ -1164,21 +874,17 @@ Now AOT-compile the app and launch it with the `lite-server`:
 
 <code-example language="none" class="code-shell">
   npm run build:aot && npm run serve:aot
-
 </code-example>
 
-
-
 {@a inspect-bundle}
 
-
 ### Inspect the Bundle
 
 ### 检查包裹
 
 It's fascinating to see what the generated JavaScript bundle looks like after Rollup.
 The code is minified, so you won't learn much from inspecting the bundle directly.
-But the <a href="https://github.com/danvk/source-map-explorer/blob/master/README.md" target="_blank">source-map-explorer</a>
+But the <a href="https://github.com/danvk/source-map-explorer/blob/master/README.md">source-map-explorer</a>
 tool can be quite revealing.
 
 看看Rollup之后生成的JavaScript包，非常神奇。
@@ -1193,8 +899,6 @@ Install it:
   npm install source-map-explorer --save-dev
 </code-example>
 
-
-
 Run the following command to generate the map.
 
 运行下面的命令来生成源映射。
@@ -1202,21 +906,16 @@ Run the following command to generate the map.
 
 <code-example language="none" class="code-shell">
   node_modules/.bin/source-map-explorer aot/dist/build.js
-
 </code-example>
 
-
-
 The `source-map-explorer` analyzes the source map generated with the bundle and draws a map of all dependencies,
-showing exactly which application and Angular modules and classes are included in the bundle.
+showing exactly which application and NgModules and classes are included in the bundle.
 
 `source-map-explorer`分析从包生成的源映射，并画出一个依赖地图，显示包中包含哪些应用程序和Angular模块和类。
 
 Here's the map for _Tour of Heroes_.
-
-下面是英雄指南的地图：
-<a href="assets/images/cookbooks/aot-compiler/toh6-bundle.png" target="_blank" title="View larger image">
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/aot-compiler/toh6-bundle.png" alt="TOH-6-bundle"></img>
+下面是英雄指南的地图：<a href="generated/images/guide/aot-compiler/toh-pt6-bundle.png"  title="View larger image">
+<figure >
+  <img src="generated/images/guide/aot-compiler/toh-pt6-bundle-700w.png" alt="toh-pt6-bundle">
 </figure>
-</a>
\ No newline at end of file
+</a>
diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md
index e49bef8535..d18ac8a180 100644
--- a/aio/content/guide/architecture.md
+++ b/aio/content/guide/architecture.md
@@ -1,12 +1,6 @@
-@title
-架构概览
-
-@intro
-Angular 应用的基本构造块
-
-@description
-
+# Architecture Overview
 
+# 架构概览
 
 Angular is a framework for building client applications in HTML and
 either JavaScript or a language like TypeScript that compiles to JavaScript.
@@ -40,61 +34,12 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
 
 
 <figure>
-  <img src="assets/images/devguide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700"></img>
+  <img src="generated/images/guide/architecture/overview2.png" alt="overview">
 </figure>
 
-
-
-The architecture diagram identifies the eight main building blocks of an Angular application:
-
-这个架构图展现了 Angular 应用中的 8 个主要构造块：
-
-* [Modules](guide/architecture#modules)
-
-  [模块 (module)](guide/architecture#modules)
-
-* [Components](guide/architecture#components)
-
-  [组件 (component)](guide/architecture#components)
-
-* [Templates](guide/architecture#templates)
-
-  [模板 (template)](guide/architecture#templates)
-
-* [Metadata](guide/architecture#metadata)
-
-  [元数据 (metadata)](guide/architecture#metadata)
-
-* [Data binding](guide/architecture#data-binding)
-
-  [数据绑定 (data binding)](guide/architecture#data-binding)
-
-* [Directives](guide/architecture#directives)
-
-  [指令 (directive)](guide/architecture#directives)
-
-* [Services](guide/architecture#services)
-
-  [服务 (service)](guide/architecture#services)
-
-* [Dependency injection](guide/architecture#dependency-injection)
-
-  [依赖注入 (dependency injection)](guide/architecture#dependency-injection)
-
-Learn these building blocks, and you're on your way.
-
-掌握了这些构造块，你就可以出师了！
-
-
 <div class="l-sub-section">
 
-
-
-<p>
   The code referenced on this page is available as a <live-example></live-example>.
-</p>
-
-
 
 <p>
   本章所引用的代码见<live-example></live-example>。
@@ -104,55 +49,48 @@ Learn these building blocks, and you're on your way.
 
 </div>
 
-
-
-
 ## Modules
 
 ## 模块
 
 
-<figure>
-  <img src="assets/images/devguide/architecture/module.png" alt="模块" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
-</figure>
+<img src="generated/images/guide/architecture/module.png" alt="模块" class="left">
 
 
-
-Angular apps are modular and Angular has its own modularity system called _Angular modules_ or _NgModules_.
+Angular apps are modular and Angular has its own modularity system called _NgModules_.
 
 Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 _Angular 模块_或 _NgModules_。
 
-_Angular modules_ are a big deal. 
-This page introduces modules; the [Angular modules](guide/ngmodule) page covers them in depth.
+NgModules are a big deal.
+This page introduces modules; the [NgModules](guide/ngmodule) page covers them in depth.
 
 _Angular 模块_很重要。这里只是简单介绍，在 [Angular 模块](guide/ngmodule)中会做深入讲解。
-<br class="l-clear-both"><br>
 
-Every Angular app has at least one Angular module class, [the _root module_](guide/appmodule "AppModule: the root module"), 
+<br class="clear">
+
+Every Angular app has at least one NgModule class, [the _root module_](guide/bootstrapping "Bootstrapping"),  
 conventionally named `AppModule`.
 
 每个 Angular 应用至少有一个模块（[_根模块_](guide/appmodule "AppModule: 根模块")），习惯上命名为`AppModule`。
 
-While the _root module_ may be the only module in a small application, most apps have many more 
+While the _root module_ may be the only module in a small application, most apps have many more
 _feature modules_, each a cohesive block of code dedicated to an application domain,
-a workflow, or a closely related set of capabilities. 
+a workflow, or a closely related set of capabilities.
 
 _根模块_在一些小型应用中可能是唯一的模块，大多数应用会有很多_特性模块_，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
 
-An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule` decorator.
+An NgModule, whether a _root_ or _feature_, is a class with an `@NgModule` decorator.
 
 Angular 模块（无论是_根模块_还是_特性模块_）都是一个带有`@NgModule`装饰器的类。
 
 
 <div class="l-sub-section">
 
-
-
-Decorators are functions that modify JavaScript classes.
-Angular has many decorators that attach metadata to classes so that it knows
-what those classes mean and how they should work.
-<a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0" target="_blank">
-Learn more</a> about decorators on the web.
+  Decorators are functions that modify JavaScript classes.
+  Angular has many decorators that attach metadata to classes so that it knows
+  what those classes mean and how they should work.
+  <a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0">
+  Learn more</a> about decorators on the web.
 
 装饰器是用来修饰 JavaScript 类的函数。
 Angular 有很多装饰器，它们负责把元数据附加到类上，以了解那些类的设计意图以及它们应如何工作。
@@ -161,9 +99,7 @@ Angular 有很多装饰器，它们负责把元数据附加到类上，以了解
 
 </div>
 
-
-
-`NgModule` is a decorator function that takes a single metadata object whose properties describe the module. 
+`NgModule` is a decorator function that takes a single metadata object whose properties describe the module.
 The most important properties are:
 
 `NgModule`是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：
@@ -186,7 +122,7 @@ Angular has three kinds of view classes: [components](guide/architecture#compone
 
   `providers` - [服务](guide/architecture#services)的创建者，并加入到全局服务列表中，可用于应用任何部分。
   
-* `bootstrap` - the main application view, called the _root component_, 
+* `bootstrap` - the main application view, called the _root component_,
   that hosts all other app views. Only the _root module_ should set this `bootstrap` property.
 
   `bootstrap` - 指定应用的主视图（称为_根组件_），它是所有其它视图的宿主。只有_根模块_才能设置`bootstrap`属性。
@@ -196,86 +132,58 @@ Here's a simple root module:
 下面是一个简单的根模块：
   
 
-<code-example path="architecture/src/app/mini-app.ts" region="module" title="src/app/app.module.ts" linenums="false">
-
-</code-example>
-
-
+<code-example path="architecture/src/app/mini-app.ts" region="module" title="src/app/app.module.ts" linenums="false"></code-example>
 
 <div class="l-sub-section">
 
-
-
-The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module. 
+  The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module.
 
 `AppComponent`的`export`语句只是用于演示如何导出的，它在这个例子中并不是必须的。根模块不需要_导出_任何东西，因为其它组件不需要导入根模块。
 
 
 </div>
 
-
-
-Launch an application by _bootstrapping_ its root module. 
+Launch an application by _bootstrapping_ its root module.
 During development you're likely to bootstrap the `AppModule` in a `main.ts` file like this one.
 
 我们通过_引导_根模块来启动应用。
 在开发期间，你通常在一个`main.ts`文件中引导`AppModule`，就像这样：
 
 
-<code-example path="architecture/src/main.ts" title="src/main.ts" linenums="false">
+<code-example path="architecture/src/main.ts" title="src/main.ts" linenums="false"></code-example>
 
-</code-example>
+### NgModules vs. JavaScript modules
 
+The NgModule &mdash; a class decorated with `@NgModule` &mdash; is a fundamental feature of Angular.
 
-
-### Angular modules vs. JavaScript modules
-
-### Angular 模块 vs. JavaScript 模块
-  
-The Angular module &mdash; a class decorated with `@NgModule` &mdash; is a fundamental feature of Angular.
-
-Angular 模块（一个用`@NgModule`装饰的类）是 Angular 的基础特性。
+// TODO: Translate
 
 JavaScript also has its own module system for managing collections of JavaScript objects.
-It's completely different and unrelated to the Angular module system.
+It's completely different and unrelated to the NgModule system.
 
 JavaScript 也有自己的模块系统，用来管理一组 JavaScript 对象。
 它与 Angular 的模块系统完全不同且完全无关。
   
 In JavaScript each _file_ is a module and all objects defined in the file belong to that module.
-The module declares some objects to be public by marking them with the `export` key word. 
+The module declares some objects to be public by marking them with the `export` key word.
 Other JavaScript modules use *import statements* to access public objects from other modules.
 
 JavaScript 中，每个_文件_是一个模块，文件中定义的所有对象都从属于那个模块。
 通过`export`关键字，模块可以把它的某些对象声明为公共的。
 其它 JavaScript 模块可以使用*import 语句*来访问这些公共对象。
 
+<code-example path="architecture/src/app/app.module.ts" region="imports" linenums="false"></code-example>
 
-<code-example path="architecture/src/app/app.module.ts" region="imports" linenums="false">
-
-</code-example>
-
-
-
-<code-example path="architecture/src/app/app.module.ts" region="export" linenums="false">
-
-</code-example>
-
-
+<code-example path="architecture/src/app/app.module.ts" region="export" linenums="false"></code-example>
 
 <div class="l-sub-section">
 
 
 
-<a href="http://exploringjs.com/es6/ch_modules.html" target="_blank">Learn more about the JavaScript module system on the web.</a>
-
+<a href="http://exploringjs.com/es6/ch_modules.html" >Learn more about the JavaScript module system on the web.</a>
 <a href="http://exploringjs.com/es6/ch_modules.html" target="_blank">学习更多关于 JavaScript 模块的知识。</a>
-
-
 </div>
 
-
-
 These are two different and _complementary_ module systems. Use them both to write your apps.
 
 这两个模块化系统是互补的，我们在写程序时都会用到。
@@ -285,14 +193,9 @@ These are two different and _complementary_ module systems. Use them both to wri
 
 ### Angular 模块库
 
+<img src="generated/images/guide/architecture/library-module.png" alt="Component" class="left">
 
-<figure>
-  <img src="assets/images/devguide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
-</figure>
-
-
-
-Angular ships as a collection of JavaScript modules. You can think of them as library modules. 
+Angular ships as a collection of JavaScript modules. You can think of them as library modules.
 
 Angular 提供了一组 JavaScript 模块。可以把它们看做库模块。
 
@@ -301,42 +204,27 @@ Each Angular library name begins with the `@angular` prefix.
 每个 Angular 库的名字都带有`@angular`前缀。
 
 You install them with the **npm** package manager and import parts of them with JavaScript `import` statements.
-
-用 **npm** 包管理工具安装它们，用 JavaScript 的`import`语句导入其中某些部件。
-<br class="l-clear-both"><br>
+用 **npm** 包管理工具安装它们，用 JavaScript 的`import`语句导入其中某些部件。<br class="clear">
 
 For example, import Angular's `Component` decorator from the `@angular/core` library like this:
 
 例如，象下面这样，从`@angular/core`库中导入`Component`装饰器：
 
 
-<code-example path="architecture/src/app/app.component.ts" region="import" linenums="false">
+<code-example path="architecture/src/app/app.component.ts" region="import" linenums="false"></code-example>
 
-</code-example>
-
-
-
-You also import Angular _modules_ from Angular _libraries_ using JavaScript import statements:
-
-还可以使用 JavaScript 的导入语句从 Angular _库_中导入 Angular _模块_。
-
-
-<code-example path="architecture/src/app/mini-app.ts" region="import-browser-module" linenums="false">
-
-</code-example>
+You also import NgModules from Angular _libraries_ using JavaScript import statements:
 
+还可以使用 JavaScript 的导入语句从 Angular _库_中导入 Angular _模块_：
 
+<code-example path="architecture/src/app/mini-app.ts" region="import-browser-module" linenums="false"></code-example>
 
 In the example of the simple root module above, the application module needs material from within that `BrowserModule`. To access that material, add it to the `@NgModule` metadata `imports` like this.
 
 在上面那个简单的根模块的例子中，应用模块需要`BrowserModule`的某些素材。要访问这些素材，就得把它加入`@NgModule`元数据的`imports`中，就像这样：
   
 
-<code-example path="architecture/src/app/mini-app.ts" region="ngmodule-imports" linenums="false">
-
-</code-example>
-
-
+<code-example path="architecture/src/app/mini-app.ts" region="ngmodule-imports" linenums="false"></code-example>
 
 In this way you're using both the Angular and JavaScript module systems _together_.
 
@@ -352,30 +240,18 @@ Hang in there. The confusion yields to clarity with time and experience.
 
 
 
-Learn more from the [Angular modules](guide/ngmodule) page.
-
+Learn more from the [NgModules](guide/ngmodule) page.
 更多信息，见 [Angular 模块](guide/ngmodule)。
 
-
 </div>
 
-
-
 <hr/>
 
-
-
-
 ## Components
 
 ## 组件
 
-
-<figure>
-  <img src="assets/images/devguide/architecture/hero-component.png" alt="组件" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
-</figure>
-
-
+<img src="generated/images/guide/architecture/hero-component.png" alt="Component" class="left">
 
 A _component_ controls a patch of screen called a *view*.
 
@@ -404,21 +280,19 @@ The class interacts with the view through an API of properties and methods.
 组件通过一些由属性和方法组成的 API 与视图交互。
 
 {@a component-code}
+
 For example, this `HeroListComponent` has a `heroes` property that returns an array of heroes
 that it acquires from a service.
 `HeroListComponent` also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list.
 
+
 {@a component-code}
 例如，`HeroListComponent`有一个`heroes`属性，它返回一个英雄数组，这个数组从一个服务获得。
-`HeroListComponent`还有一个`selectHero()`方法，当用户从列表中点选一个英雄时，就把它/她设置到`selectedHero`属性。
-
-
-<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (class)" region="class">
+`HeroListComponent`还有一个`selectHero()`方法，当用户从列表中点选一个英雄时，就把它/她设置到`selectedHero`属性。<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (class)" region="class">
 
 </code-example>
 
 
-
 Angular creates, updates, and destroys components as the user moves through the application.
 Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](guide/lifecycle-hooks), like `ngOnInit()` declared above.
 
@@ -428,19 +302,12 @@ Your app can take action at each moment in this lifecycle through optional [life
 
 <hr/>
 
-
-
-
 ## Templates
 
 ## 模板
 
 
-<figure>
-  <img src="assets/images/devguide/architecture/template.png" alt="模板" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
-</figure>
-
-
+<img src="generated/images/guide/architecture/template.png" alt="模板" class="left">
 
 You define a component's view with its companion **template**. A template is a form of HTML
 that tells Angular how to render the component.
@@ -450,15 +317,12 @@ that tells Angular how to render the component.
 A template looks like regular HTML, except for a few differences. Here is a
 template for our `HeroListComponent`:
 
-多数情况下，模板看起来很像标准 HTML，当然也有一点不同的地方。下面是`HeroListComponent`组件的一个模板：
 
-
-<code-example path="architecture/src/app/hero-list.component.html" title="src/app/hero-list.component.html">
+多数情况下，模板看起来很像标准 HTML，当然也有一点不同的地方。下面是`HeroListComponent`组件的一个模板：<code-example path="architecture/src/app/hero-list.component.html" title="src/app/hero-list.component.html">
 
 </code-example>
 
 
-
 Although this template uses typical HTML elements like `<h2>` and  `<p>`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>` uses Angular's [template syntax](guide/template-syntax).
 
 模板除了可以使用像`<h2>`和`<p>`这样的典型的 HTML 元素，还能使用其它元素。
@@ -477,38 +341,26 @@ The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
 `HeroDetailComponent`（代码未显示）用于展现一个特定英雄的情况，这个英雄是用户从`HeroListComponent`列表中选择的。
 `HeroDetailComponent`是`HeroListComponent`的*子组件*。
 
-
-<figure>
-  <img src="assets/images/devguide/architecture/component-tree.png" alt="组件树" align="left" style="width:300px; margin-left:-40px;margin-right:10px"></img>
-</figure>
-
-
+<img src="generated/images/guide/architecture/component-tree.png" alt="Metadata" class="left">
 
 Notice how `<hero-detail>` rests comfortably among native HTML elements. Custom components mix seamlessly with native HTML in the same layouts.
 
 注意到了吗？`<hero-detail>`舒适地躺在原生 HTML 元素之间。
 自定义组件和原生 HTML 在同一布局中融合得天衣无缝。
-<br class="l-clear-both">
-
-<hr/>
-
-
 
+<hr class="clear"/>
 
 ## Metadata
 
 ## 元数据
 
 
-<figure>
-  <img src="assets/images/devguide/architecture/metadata.png" alt="元数据" align="left" style="width:150px; margin-left:-40px;margin-right:10px"></img>
-</figure>
+<img src="generated/images/guide/architecture/metadata.png" alt="元数据" class="left">
 
+Metadata tells Angular how to process a class.
 
-
-<p style="padding-top:10px">Metadata tells Angular how to process a class.</p>
 <p style="padding-top:10px">元数据告诉 Angular 如何处理一个类。</p>
-<br class="l-clear-both">
+<br class="clear">
 
 [Looking back at the code](guide/architecture#component-code) for `HeroListComponent`, you can see that it's just a class.
 There is no evidence of a framework, no "Angular" in it at all.
@@ -527,16 +379,13 @@ To tell Angular that `HeroListComponent` is a component, attach **metadata** to
 In TypeScript, you attach metadata by using a **decorator**.
 Here's some metadata for `HeroListComponent`:
 
+
 在TypeScript中，我们用**装饰器 (decorator) **来附加元数据。
-下面就是`HeroListComponent`的一些元数据。
-
-
-<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (metadata)" region="metadata">
+下面就是`HeroListComponent`的一些元数据。<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (metadata)" region="metadata">
 
 </code-example>
 
 
-
 Here is the `@Component` decorator, which identifies the class
 immediately below it as a component class.
 
@@ -568,17 +417,12 @@ Angular inserts an instance of the `HeroListComponent` view between those tags.
 
 * `providers`: array of **dependency injection providers** for services that the component requires.
 This is one way to tell Angular that the component's constructor requires a `HeroService`
-so it can get the list of heroes to display. 
+so it can get the list of heroes to display.
 
   `providers` - 组件所需服务的*依赖注入提供商*数组。
 这是在告诉 Angular：该组件的构造函数需要一个`HeroService`服务，这样组件就可以从服务中获得英雄数据。
 
-
-<figure>
-  <img src="assets/images/devguide/architecture/template-metadata-component.png" alt="元数据" align="left" style="height:200px; margin-left:-40px;margin-right:10px"></img>
-</figure>
-
-
+<img src="generated/images/guide/architecture/template-metadata-component.png" alt="Metadata" class="left">
 
 The metadata in the `@Component` tells Angular where to get the major building blocks you specify for the component.
 
@@ -589,10 +433,8 @@ The template, metadata, and component together describe a view.
 模板、元数据和组件共同描绘出这个视图。
 
 Apply other metadata decorators in a similar fashion to guide Angular behavior.
-`@Injectable`, `@Input`, and `@Output` are a few of the more popular decorators.
-
-其它元数据装饰器用类似的方式来指导 Angular 的行为。
-例如`@Injectable`、`@Input`和`@Output`等是一些最常用的装饰器。<br class="l-clear-both">
+`@Injectable`, `@Input`, and `@Output` are a few of the more popular decorators.其它元数据装饰器用类似的方式来指导 Angular 的行为。
+例如`@Injectable`、`@Input`和`@Output`等是一些最常用的装饰器。<br class="clear">
 
 The architectural takeaway is that you must add metadata to your code
 so that Angular knows what to do.
@@ -602,9 +444,6 @@ so that Angular knows what to do.
 
 <hr/>
 
-
-
-
 ## Data binding
 
 ## 数据绑定
@@ -617,34 +456,23 @@ read as any experienced jQuery programmer can attest.
 如果手工写代码来实现这些推/拉逻辑，肯定会枯燥乏味、容易出错，读起来简直是噩梦 —— 写过 jQuery 的程序员大概都对此深有体会。
 
 
-<figure>
-  <img src="assets/images/devguide/architecture/databinding.png" alt="数据绑定" style="width:220px; float:left; margin-left:-40px;margin-right:20px"></img>
-</figure>
-
-
+<img src="generated/images/guide/architecture/databinding.png" alt="数据绑定" class="left">
 
 Angular supports **data binding**,
 a mechanism for coordinating parts of a template with parts of a component.
 Add binding markup to the template HTML to tell Angular how to connect both sides.
 
 Angular 支持**数据绑定**，一种让模板的各部分与组件的各部分相互合作的机制。
-我们往模板 HTML 中添加绑定标记，来告诉 Angular 如何把二者联系起来。
-
-As the diagram shows, there are four forms of data binding syntax. Each form has a direction &mdash; to the DOM, from the DOM, or in both directions.
-
-如图所示，数据绑定的语法有四种形式。每种形式都有一个方向 —— 绑定到 DOM 、绑定自 DOM 以及双向绑定。
-<br class="l-clear-both">
+我们往模板 HTML 中添加绑定标记，来告诉 Angular 如何把二者联系起来。As the diagram shows, there are four forms of data binding syntax. Each form has a direction &mdash; to the DOM, from the DOM, or in both directions.如图所示，数据绑定的语法有四种形式。每种形式都有一个方向 —— 绑定到 DOM 、绑定自 DOM 以及双向绑定。<br class="clear">
 
 The `HeroListComponent` [example](guide/architecture#templates) template has three forms:
 
-`HeroListComponent`[示例](guide/architecture#templates)模板中有三种形式：
 
-<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (binding)" region="binding">
+`HeroListComponent`[示例](guide/architecture#templates)模板中有三种形式：<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (binding)" region="binding">
 
 </code-example>
 
 
-
 * The `{{hero.name}}` [*interpolation*](guide/displaying-data#interpolation)
 displays the component's `hero.name` property value within the `<li>` element.
 
@@ -663,16 +491,13 @@ the parent `HeroListComponent` to the `hero` property of the child `HeroDetailCo
 that combines property and event binding in a single notation, using the `ngModel` directive.
 Here's an example from the `HeroDetailComponent` template:
 
+
 **双向数据绑定**是重要的第四种绑定形式，它使用`ngModel`指令组合了属性绑定和事件绑定的功能。
-下面是`HeroDetailComponent`模板的范例：
-
-
-<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel">
+下面是`HeroDetailComponent`模板的范例：<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel">
 
 </code-example>
 
 
-
 In two-way binding, a data property value flows to the input box from the component as with property binding.
 The user's changes also flow back to the component, resetting the property to the latest value,
 as with event binding.
@@ -686,42 +511,30 @@ Angular 在每个 JavaScript 事件循环中处理*所有的*数据绑定，它
 
 
 <figure>
-  <img src="assets/images/devguide/architecture/component-databinding.png" alt="数据绑定" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
+  <img src="generated/images/guide/architecture/component-databinding.png" alt="数据绑定">
 </figure>
 
-
-
-Data binding plays an important role in communication
-between a template and its component.
+Data binding plays an important role in communication between a template and its component.
 
 数据绑定在模板与对应组件的交互中扮演了重要的角色。
 <br class="l-clear-both">
 
 <figure>
-  <img src="assets/images/devguide/architecture/parent-child-binding.png" alt="父/子绑定" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
+  <img src="generated/images/guide/architecture/parent-child-binding.png" alt="父/子绑定">
 </figure>
 
-
-
 Data binding is also important for communication between parent and child components.
 
-数据绑定在父组件与子组件的通讯中也同样重要。<br class="l-clear-both">
+数据绑定在父组件与子组件的通讯中也同样重要。
 
 <hr/>
 
-
-
-
 ## Directives
 
 ## 指令 (directive)
 
 
-<figure>
-  <img src="assets/images/devguide/architecture/directive.png" alt="父与子" style="float:left; width:150px; margin-left:-40px;margin-right:10px"></img>
-</figure>
-
-
+<img src="generated/images/guide/architecture/directive.png" alt="父与子" class="left">
 
 Angular templates are *dynamic*. When Angular renders them, it transforms the DOM
 according to the instructions given by **directives**.
@@ -733,23 +546,18 @@ A component is a *directive-with-a-template*;
 a `@Component` decorator is actually a `@Directive` decorator extended with template-oriented features.
 
 组件是一个*带模板的指令*；`@Component`装饰器实际上就是一个`@Directive`装饰器，只是扩展了一些面向模板的特性。
-<br class="l-clear-both">
 
 
 <div class="l-sub-section">
 
-
-
-While **a component is technically a directive**,
-components are so distinctive and central to Angular applications that this architectural overview  separates components from directives.
+  While **a component is technically a directive**,
+  components are so distinctive and central to Angular applications that this architectural overview separates components from directives.
 
 虽然**严格来说组件就是一个指令**，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。
 
 
 </div>
 
-
-
 Two *other* kinds of directives exist: _structural_ and _attribute_ directives.
 
 还有两种*其它*类型的指令：_结构型_指令和_属性 (attribute) 型_指令。
@@ -766,15 +574,12 @@ sometimes by name but more often as the target of an assignment or a binding.
 
 The [example template](guide/architecture#templates) uses two built-in structural directives:
 
-下面的[范例模板](guide/architecture#templates)中用到了两个内置的结构型指令：
 
-
-<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (structural)" region="structural">
+下面的[范例模板](guide/architecture#templates)中用到了两个内置的结构型指令：<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (structural)" region="structural">
 
 </code-example>
 
 
-
 * [`*ngFor`](guide/displaying-data#ngFor) tells Angular to stamp out one `<li>` per hero in the `heroes` list.
 
   [`*ngFor`](guide/displaying-data#ngFor)告诉 Angular 为`heroes`列表中的每个英雄生成一个`<li>`标签。
@@ -795,16 +600,13 @@ an example of an attribute directive. `ngModel` modifies the behavior of
 an existing element (typically an `<input>`)
 by setting its display value property and responding to change events.
 
+
 `ngModel`指令就是属性型指令的一个例子，它实现了双向数据绑定。
-`ngModel`修改现有元素（一般是`<input>`）的行为：设置其显示属性值，并响应 change 事件。
-
-
-<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel">
+`ngModel`修改现有元素（一般是`<input>`）的行为：设置其显示属性值，并响应 change 事件。<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel">
 
 </code-example>
 
 
-
 Angular has a few more directives that either alter the layout structure
 (for example, [ngSwitch](guide/template-syntax#ngSwitch))
 or modify aspects of DOM elements and components
@@ -815,6 +617,7 @@ Angular 还有少量指令，它们或者修改结构布局（例如 [ngSwitch](
 
 Of course, you can also write your own directives. Components such as
 `HeroListComponent` are one kind of custom directive.
+
 <!-- PENDING: link to where to learn more about other kinds! -->
 
 当然，我们也能编写自己的指令。像`HeroListComponent`这样的组件就是一种自定义指令。
@@ -822,28 +625,19 @@ Of course, you can also write your own directives. Components such as
 
 <hr/>
 
-
-
-
 ## Services
 
 ## 服务
 
-<figure>
-  <img src="assets/images/devguide/architecture/service.png" alt="服务" style="float:left; margin-left:-40px;margin-right:10px"></img>
-</figure>
-
-
+<img src="generated/images/guide/architecture/service.png" alt="服务" class="left">
 
 _Service_ is a broad category encompassing any value, function, or feature that your application needs.
 
 *服务*是一个广义范畴，包括：值、函数，或应用所需的特性。
 
 Almost anything can be a service.
-A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
-
-几乎任何东西都可以是一个服务。
-典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。<br class="l-clear-both">
+A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.几乎任何东西都可以是一个服务。
+典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。<br class="clear">
 
 Examples include:
 
@@ -881,28 +675,22 @@ Yet services are fundamental to any Angular application. Components are big cons
 
 Here's an example of a service class that logs to the browser console:
 
-下面是一个服务类的范例，用于把日志记录到浏览器的控制台：
 
-
-<code-example path="architecture/src/app/logger.service.ts" linenums="false" title="src/app/logger.service.ts (class)" region="class">
+下面是一个服务类的范例，用于把日志记录到浏览器的控制台：<code-example path="architecture/src/app/logger.service.ts" linenums="false" title="src/app/logger.service.ts (class)" region="class">
 
 </code-example>
 
 
-
 Here's a `HeroService` that uses a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to fetch heroes.
 The `HeroService` depends on the `Logger` service and another `BackendService` that handles the server communication grunt work.
 
+
 下面是`HeroService`类，用于获取英雄数据，并通过一个已解析的[承诺 (Promise)](http://exploringjs.com/es6/ch_promises.html) 返回它们。
-`HeroService`还依赖于`Logger`服务和另一个用于处理服务器通讯的`BackendService`服务。
-
-
-<code-example path="architecture/src/app/hero.service.ts" linenums="false" title="src/app/hero.service.ts (class)" region="class">
+`HeroService`还依赖于`Logger`服务和另一个用于处理服务器通讯的`BackendService`服务。<code-example path="architecture/src/app/hero.service.ts" linenums="false" title="src/app/hero.service.ts (class)" region="class">
 
 </code-example>
 
 
-
 Services are everywhere.
 
 服务无处不在。
@@ -936,26 +724,16 @@ Angular 帮助我们*遵循*这些原则 —— 它让我们能轻易地把应
 
 <hr/>
 
-
-
-
 ## Dependency injection
 
 ## 依赖注入
 
-<figure>
-  <img src="assets/images/devguide/architecture/dependency-injection.png" alt="服务" style="float:left; width:200px; margin-left:-40px;margin-right:10px"></img>
-</figure>
-
-
+<img src="generated/images/guide/architecture/dependency-injection.png" alt="服务" class="left">
 
 _Dependency injection_ is a way to supply a new instance of a class
 with the fully-formed dependencies it requires. Most dependencies are services.
-Angular uses dependency injection to provide new components with the services they need.
-
-“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。
-Angular 使用依赖注入来提供新组件以及组件所需的服务。
-<br class="l-clear-both">
+Angular uses dependency injection to provide new components with the services they need.“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。
+Angular 使用依赖注入来提供新组件以及组件所需的服务。<br class="clear">
 
 Angular can tell which services a component needs by looking at the types of its constructor parameters.
 For example, the constructor of your `HeroListComponent` needs a `HeroService`:
@@ -964,11 +742,7 @@ Angular 通过查看构造函数的参数类型得知组件需要哪些服务。
 例如，`HeroListComponent`组件的构造函数需要一个`HeroService`服务：
 
 
-<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (constructor)" region="ctor">
-
-</code-example>
-
-
+<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (constructor)" region="ctor"></code-example>
 
 When Angular creates a component, it first asks an **injector** for
 the services that the component requires.
@@ -993,11 +767,9 @@ The process of `HeroService` injection looks a bit like this:
 
 
 <figure>
-  <img src="assets/images/devguide/architecture/injector-injects.png" alt="服务"></img>
+  <img src="generated/images/guide/architecture/injector-injects.png" alt="服务">
 </figure>
 
-
-
 If the injector doesn't have a `HeroService`, how does it know how to make one?
 
 如果注入器还没有`HeroService`，它怎么知道该如何创建一个呢？
@@ -1014,29 +786,23 @@ You can register providers in modules or in components.
 
 我们可以在模块中或组件中注册提供商。
 
-In general, add providers to the [root module](guide/architecture#module) so that
+In general, add providers to the [root module](guide/architecture#modules) so that
 the same instance of a service is available everywhere.
 
-但通常会把提供商添加到[根模块](guide/architecture#module)上，以便在任何地方都使用服务的同一个实例。
 
-
-<code-example path="architecture/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (module providers)" region="providers">
+但通常会把提供商添加到[根模块](guide/architecture#module)上，以便在任何地方都使用服务的同一个实例。<code-example path="architecture/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (module providers)" region="providers">
 
 </code-example>
 
 
-
 Alternatively, register at a component level in the `providers` property of the `@Component` metadata:
 
-或者，也可以在`@Component`元数据中的`providers`属性中把它注册在组件层：
 
-
-<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (component providers)" region="providers">
+或者，也可以在`@Component`元数据中的`providers`属性中把它注册在组件层：<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (component providers)" region="providers">
 
 </code-example>
 
 
-
 Registering at a component level means you get a new instance of the
 service with each new instance of that component.
 
@@ -1079,9 +845,6 @@ Points to remember about dependency injection:
 
 <hr/>
 
-
-
-
 ## Wrap up
 
 ## 总结
@@ -1155,7 +918,7 @@ publishing and subscribing to events.
 
 > [**表单**](guide/forms)：通过基于 HTML 的验证和脏检查机制支持复杂的数据输入场景。
 
-> [**HTTP**](guide/server-communication): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
+> [**HTTP**](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
 
 > [**HTTP**](guide/server-communication)：通过 HTTP 客户端，可以与服务器通讯，以获得数据、保存数据和触发服务端动作。
 
@@ -1179,9 +942,7 @@ by implementing the lifecycle hook interfaces.
   
 > [**路由器**](guide/router)：在应用程序客户端的页面间导航，并且不离开浏览器。
 
-
-
 > [**Testing**](guide/testing): Run unit tests on your application parts as they interact with the Angular framework
 using the _Angular Testing Platform_.
 
-> [**测试**](guide/testing)：使用 _Angular 测试平台_，在你的应用部件与 Angular 框架交互时进行单元测试。
\ No newline at end of file
+> [**测试**](guide/testing)：使用 _Angular 测试平台_，在你的应用部件与 Angular 框架交互时进行单元测试。
diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md
index d9ffd3650a..d786208fb0 100644
--- a/aio/content/guide/attribute-directives.md
+++ b/aio/content/guide/attribute-directives.md
@@ -1,51 +1,14 @@
-@title
-属性型指令
-
-@intro
-属性型指令把行为添加到现有元素上。
-
-@description
-
+# Attribute Directives
 
+# 属性型指令
 
 An **Attribute** directive changes the appearance or behavior of a DOM element.
 
 **属性**型指令用于改变一个 DOM 元素的外观或行为。
 
-# Contents
-
-# 目录
-
-* [Directives overview](guide/attribute-directives#directive-overview)
-
-  [指令概览](guide/attribute-directives#directive-overview)
-  
-* [Build a simple attribute directive](guide/attribute-directives#write-directive)
-
-  [创建简单的属性型指令](guide/attribute-directives#write-directive)
-  
-* [Apply the attribute directive to an element in a template](guide/attribute-directives#apply-directive)
-
-  [应用属性型指令到模板中的元素](guide/attribute-directives#apply-directive)
-  
-* [Respond to user-initiated events](guide/attribute-directives#respond-to-user)
-
-  [响应用户引发的事件](guide/attribute-directives#respond-to-user)
-  
-* [Pass values into the directive with an _@Input_ data binding](guide/attribute-directives#bindings)
-
-  [使用数据绑定把值传到指令中](guide/attribute-directives#bindings)
-  
-* [Bind to a second property](guide/attribute-directives#second-property)
-
-  [绑定第二个属性](guide/attribute-directives#second-property)
-
-
 Try the <live-example title="Attribute Directive example"></live-example>.
 
-试试<live-example title="Attribute Directive example"></live-example>。
-
-
+{@a directive-overview}
 
 ## Directives overview
 
@@ -68,7 +31,7 @@ There are three kinds of directives in Angular:
    属性型指令 &mdash; 改变元素、组件或其它指令的外观和行为的指令。
 
 *Components* are the most common of the three directives.
-You saw a component for the first time in the [QuickStart](quickstart) guide.
+You saw a component for the first time in the [QuickStart](guide/quickstart) guide.
 
 *组件*是这三种指令中最常用的。
 你在[快速起步](quickstart#root-component)例子中第一次见到组件。
@@ -81,7 +44,7 @@ Learn about them in the [Structural Directives](guide/structural-directives) gui
 要了解更多，参见[结构型指令](guide/structural-directives) guide。
 
 *Attribute directives* are used as attributes of elements.
-The built-in [NgStyle](guide/template-syntax#ngStyle) directive in the 
+The built-in [NgStyle](guide/template-syntax#ngStyle) directive in the
 [Template Syntax](guide/template-syntax) guide, for example,
 can change several element styles at the same time.
 
@@ -107,12 +70,9 @@ when the user hovers over that element. You can apply it like this:
 
 本章展示了如何创建一个简单的属性型指令 _myHighlight_ ，当用户把鼠标悬停在一个元素上时，改变它的背景色。你可以这样用它：
 
+<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (applied)" region="applied"></code-example>
 
-<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (applied)" region="applied">
-
-</code-example>
-
-
+{@a write-directive}
 
 ### Write the directive code
 
@@ -125,15 +85,12 @@ named <code>attribute-directives</code>.
 
 Create the following source file in the indicated folder:
 
-在指定的文件夹下创建下列源码文件：
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.1.ts" title="src/app/highlight.directive.ts">
+在指定的文件夹下创建下列源码文件：<code-example path="attribute-directives/src/app/highlight.directive.1.ts" title="src/app/highlight.directive.ts">
 
 </code-example>
 
 
-
 The `import` statement specifies symbols from the Angular `core`:
 
 `import`语句指定了从 Angular 的`core`库导入的一些符号。  
@@ -173,8 +130,6 @@ Angular locates all elements in the template that have an attribute named `myHig
 
 <div class="l-sub-section">
 
-
-
 ### Why not call it "highlight"?
 
 ### 为什么不直接叫做 "highlight"？
@@ -189,7 +144,7 @@ This also reduces the risk of colliding with third-party directive names.
 它同时减少了与第三方指令名字发生冲突的危险。
 
 Make sure you do **not** prefix the `highlight` directive name with **`ng`** because
-that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose. 
+that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose.
 For a simple demo, the short prefix, `my`, helps distinguish your custom directive.
 
 确认你**没有**给`highlight`指令添加**`ng`**前缀。
@@ -199,8 +154,7 @@ For a simple demo, the short prefix, `my`, helps distinguish your custom directi
 </div>
 
 
-
-After the `@Directive` metadata comes the directive's controller class, 
+After the `@Directive` metadata comes the directive's controller class,
 called `HighlightDirective`, which contains the logic for the directive.
 Exporting `HighlightDirective` makes it accessible to other components.
 
@@ -217,7 +171,7 @@ Angular 会为每个匹配的元素创建一个指令控制器类的实例，并
 `ElementRef`是一个服务，它赋予我们通过它的`nativeElement`属性直接访问 DOM 元素的能力。
 `Renderer`服务允许通过代码设置元素的样式。
 
-
+{@a apply-directive}
 
 ## Apply the attribute directive
 
@@ -233,60 +187,45 @@ In Angular terms, the `<p>` element is the attribute **host**.
 Put the template in its own <code>app.component.html</code>
 file that looks like this:
 
-我们把这个模板放到它的<code>app.component.html</code>文件中，就像这样：
 
-
-<code-example path="attribute-directives/src/app/app.component.1.html" title="src/app/app.component.html">
+我们把这个模板放到它的<code>app.component.html</code>文件中，就像这样：<code-example path="attribute-directives/src/app/app.component.1.html" title="src/app/app.component.html">
 
 </code-example>
 
 
-
 Now reference this template in the `AppComponent`:
 
-现在，在`AppComponent`中引用这个模板：
 
-
-<code-example path="attribute-directives/src/app/app.component.ts" title="src/app/app.component.ts">
+现在，在`AppComponent`中引用这个模板：<code-example path="attribute-directives/src/app/app.component.ts" title="src/app/app.component.ts">
 
 </code-example>
 
 
-
 Next, add an `import` statement to fetch the `Highlight` directive and
 add that class to the `declarations` NgModule metadata. This way Angular
 recognizes the directive when it encounters `myHighlight` in the template.
 
+
 接下来，添加了一个`import`语句来获得`Highlight`指令类，并把这个类添加到 NgModule 元数据的`declarations`数组中。
-这样，当 Angular 在模板中遇到`myHighlight`时，就能认出这是指令了。
-
-
-<code-example path="attribute-directives/src/app/app.module.ts" title="src/app/app.module.ts">
+这样，当 Angular 在模板中遇到`myHighlight`时，就能认出这是指令了。<code-example path="attribute-directives/src/app/app.module.ts" title="src/app/app.module.ts">
 
 </code-example>
 
 
-
 Now when the app runs, the `myHighlight` directive highlights the paragraph text.
 
-运行应用，就会看到我们的指令确实高亮了段落中的文本。
 
-
-<figure class='image-display'>
-  <img src="assets/images/devguide/attribute-directives/first-highlight.png" alt="First Highlight"></img>
+运行应用，就会看到我们的指令确实高亮了段落中的文本。<figure >
+  <img src="generated/images/guide/attribute-directives/first-highlight.png" alt="First Highlight">
 </figure>
 
-
-
 <div class="l-sub-section">
 
-
-
-### Your directive isn't working?
+<h3 class="no-toc">Your directive isn't working?</h3>
 
 ### 你的指令没生效？
 
-Did you remember to add the directive to the  `declarations` attribute of `@NgModule`? 
+Did you remember to add the directive to the  `declarations` attribute of `@NgModule`?
 It is easy to forget!
 
 你记着设置`@NgModule`的`declarations`数组了吗？它很容易被忘掉。
@@ -299,11 +238,8 @@ Open the console in the browser tools and look for an error like this:
 <code-example format="nocode">
   EXCEPTION: Template parse errors:
     Can't bind to 'myHighlight' since it isn't a known property of 'p'.
-
 </code-example>
 
-
-
 Angular detects that you're trying to bind to *something* but it can't find this directive
 in the module's `declarations` array.
 After specifying `HighlightDirective` in the `declarations` array,
@@ -315,8 +251,6 @@ Angular 检测到你正在尝试绑定到*某些东西*，但它不认识。所
 
 </div>
 
-
-
 To summarize, Angular found the `myHighlight` attribute on the `<p>` element.
 It created an instance of the `HighlightDirective` class and
 injected a reference to the `<p>` element into the directive's constructor
@@ -327,6 +261,7 @@ which sets the `<p>` element's background style to yellow.
 在构造函数中，我们把`<p>`元素的背景设置为了黄色。
 
 
+{@a respond-to-user}
 
 ## Respond to user-initiated events
 
@@ -343,28 +278,22 @@ and respond by setting or clearing the highlight color.
 Begin by adding `HostListener` to the list of imported symbols;
 add the `Input` symbol as well because you'll need it soon.
 
-先把`HostListener`加进导入列表中，同时再添加`Input`符号，因为我们很快就要用到它。
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (imports)" region="imports">
+先把`HostListener`加进导入列表中，同时再添加`Input`符号，因为我们很快就要用到它。<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (imports)" region="imports">
 
 </code-example>
 
 
-
 Then add two eventhandlers that respond when the mouse enters or leaves,
 each adorned by the `HostListener` decorator.
 
-然后使用`HostListener`装饰器添加两个事件处理器，它们会在鼠标进入或离开时进行响应。
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-methods)" region="mouse-methods">
+然后使用`HostListener`装饰器添加两个事件处理器，它们会在鼠标进入或离开时进行响应。<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-methods)" region="mouse-methods">
 
 </code-example>
 
 
-
-The `@HostListener` decorator lets you subscribe to events of the DOM 
+The `@HostListener` decorator lets you subscribe to events of the DOM
 element that hosts an attribute directive, the `<p>` in this case.
 
 `@HostListener`装饰器引用属性型指令的宿主元素，在这个例子中就是`<p>`。
@@ -372,8 +301,6 @@ element that hosts an attribute directive, the `<p>` in this case.
 
 <div class="l-sub-section">
 
-
-
 Of course you could reach into the DOM with standard JavaScript and and attach event listeners manually.
 There are at least three problems with _that_ approach:
 
@@ -395,45 +322,34 @@ There are at least three problems with _that_ approach:
 
 </div>
 
-
-
 The handlers delegate to a helper method that sets the color on the DOM element, `el`,
 which you declare and initialize in the constructor.
 
 
-这些处理器委托给了一个辅助方法，它用于为DOM元素设置颜色，`el`就是你在构造器中声明和初始化过的。
-
-
-<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (constructor)" region="ctor">
+这些处理器委托给了一个辅助方法，它用于为DOM元素设置颜色，`el`就是你在构造器中声明和初始化过的。<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (constructor)" region="ctor">
 
 </code-example>
 
 
-
 Here's the updated directive in full:
 
-下面是修改后的指令代码：
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.2.ts" title="src/app/highlight.directive.ts">
+下面是修改后的指令代码：<code-example path="attribute-directives/src/app/highlight.directive.2.ts" title="src/app/highlight.directive.ts">
 
 </code-example>
 
 
-
 Run the app and confirm that the background color appears when the mouse hovers over the `p` and
 disappears as it moves out.We run the app and confirm that the background color appears as we move the mouse over the `p` and
 disappears as we move out.
 
 运行本应用并确认：当把鼠标移到`p`上的时候，背景色就出现了，而移开的时候，它消失了。
 
-
-<figure class='image-display'>
-  <img src="assets/images/devguide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight"></img>
+<figure>
+  <img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
 </figure>
 
-
-
+{@a bindings}
 
 ## Pass values into the directive with an _@Input_ data binding
 
@@ -447,18 +363,14 @@ In this section, you give the developer the power to set the highlight color whi
 
 Start by adding a `highlightColor` property to the directive class like this:
 
-我们先把`highlightColor`属性添加到指令类中，就像这样：
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (highlightColor)" region="color">
+我们先把`highlightColor`属性添加到指令类中，就像这样：<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (highlightColor)" region="color">
 
 </code-example>
 
 
-
 {@a input}
 
-
 ### Binding to an _@Input_ property
 
 ### 绑定到_@Input_属性
@@ -475,48 +387,36 @@ Without that input metadata, Angular rejects the binding; see [below](guide/attr
 
 Try it by adding the following directive binding variations to the `AppComponent` template:
 
-试试把下列指令绑定变量添加到`AppComponent`的模板中：
 
-
-<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-1">
+试试把下列指令绑定变量添加到`AppComponent`的模板中：<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-1">
 
 </code-example>
 
 
-
 Add a `color` property to the `AppComponent`.
 
-把`color`属性添加到`AppComponent`中：
 
-
-<code-example path="attribute-directives/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (class)" region="class">
+把`color`属性添加到`AppComponent`中：<code-example path="attribute-directives/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (class)" region="class">
 
 </code-example>
 
 
-
 Let it control the highlight color with a property binding.
 
-让它通过属性绑定来控制高亮颜色。
 
-
-<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-2">
+让它通过属性绑定来控制高亮颜色。<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-2">
 
 </code-example>
 
 
-
 That's good, but it would be nice to _simultaneously_ apply the directive and set the color _in the same attribute_ like this.
 
-很不错，但还可以更好。我们可以在应用该指令时在同一个属性中设置颜色，就像这样：
 
-
-<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
+很不错，但还可以更好。我们可以在应用该指令时在同一个属性中设置颜色，就像这样：<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
 
 </code-example>
 
 
-
 The `[myHighlight]` attribute binding both applies the highlighting directive to the `<p>` element
 and sets the directive's highlight color with a property binding.
 You're re-using the directive's attribute selector (`[myHighlight]`) to do both jobs.
@@ -528,15 +428,12 @@ That's a crisp, compact syntax.
 
 You'll have to rename the directive's `highlightColor` property to `myHighlight` because that's now the color property binding name.
 
-我们还要把该指令的`highlightColor`改名为`myHighlight`，因为它是颜色属性目前的绑定名。
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (renamed to match directive selector)" region="color-2">
+我们还要把该指令的`highlightColor`改名为`myHighlight`，因为它是颜色属性目前的绑定名。<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (renamed to match directive selector)" region="color-2">
 
 </code-example>
 
 
-
 This is disagreeable. The word, `myHighlight`, is a terrible property name and it doesn't convey the property's intent.
 
 这可不好。因为`myHighlight`是一个糟糕的属性名，而且不能反映该属性的意图。
@@ -544,7 +441,6 @@ This is disagreeable. The word, `myHighlight`, is a terrible property name and i
 
 {@a input-alias}
 
-
 ### Bind to an _@Input_ alias
 
 ### 绑定到_@Input_别名
@@ -555,15 +451,12 @@ Fortunately you can name the directive property whatever you want _and_ **_alias
 
 Restore the original property name and specify the selector as the alias in the argument to `@Input`. 
 
-恢复原始属性名，并在`@Input`的参数中把选择器`myHighlight`指定为别名。
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color property with alias)" region="color">
+恢复原始属性名，并在`@Input`的参数中把选择器`myHighlight`指定为别名。<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color property with alias)" region="color">
 
 </code-example>
 
 
-
 _Inside_ the directive the property is known as `highlightColor`.
 _Outside_ the directive, where you bind to it, it's known as `myHighlight`.
 
@@ -571,39 +464,30 @@ _Outside_ the directive, where you bind to it, it's known as `myHighlight`.
 
 You get the best of both worlds: the property name you want and the binding syntax you want:
 
-这是最好的结果：理想的内部属性名，理想的绑定语法：
 
-
-<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
+这是最好的结果：理想的内部属性名，理想的绑定语法：<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
 
 </code-example>
 
 
-
 Now that you're binding to `highlightColor`, modify the `onMouseEnter()` method to use it. 
 If someone neglects to bind to `highlightColor`, highlight in red:
 
+
 现在，我们绑定到了`highlightColor`属性，并修改`onMouseEnter()`方法来使用它。
-如果有人忘了绑定到`highlightColor`，那就用红色进行高亮。
-
-
-<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (mouse enter)" region="mouse-enter">
+如果有人忘了绑定到`highlightColor`，那就用红色进行高亮。<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (mouse enter)" region="mouse-enter">
 
 </code-example>
 
 
-
 Here's the latest version of the directive class.
 
-这是最终版本的指令类。
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (excerpt)">
+这是最终版本的指令类。<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (excerpt)">
 
 </code-example>
 
 
-
 ## Write a harness to try it
 
 ## 写个测试程序试验下
@@ -618,37 +502,28 @@ lets you pick the highlight color with a radio button and bind your color choice
 
 Update <code>app.component.html</code> as follows:
 
-把`app.component.html`修改成这样：
 
-
-<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (v2)" region="v2">
+把`app.component.html`修改成这样：<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (v2)" region="v2">
 
 </code-example>
 
 
-
 Revise the `AppComponent.color` so that it has no initial value.
 
-修改`AppComponent.color`，让它不再有初始值。
 
-
-<code-example path="attribute-directives/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (class)" region="class">
+修改`AppComponent.color`，让它不再有初始值。<code-example path="attribute-directives/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (class)" region="class">
 
 </code-example>
 
 
-
 Here are the harness and directive in action.
 
-下面是测试程序和指令的动图。
 
-
-<figure class='image-display'>
-  <img src="assets/images/devguide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2"></img>
+下面是测试程序和指令的动图。<figure >
+  <img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
 </figure>
 
-
-
+{@a second-property}
 
 ## Bind to a second property
 
@@ -666,27 +541,21 @@ Let the template developer set the default color.
 
 Add a second **input** property to `HighlightDirective` called `defaultColor`:
 
-把第二个名叫`defaultColor`的**输入**属性添加到`HighlightDirective`中：
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.ts(defaultColor)" linenums="false" title="src/app/highlight.directive.ts(defaultColor) (excerpt)">
+把第二个名叫`defaultColor`的**输入**属性添加到`HighlightDirective`中：<code-example path="attribute-directives/src/app/highlight.directive.ts(defaultColor)" linenums="false" title="src/app/highlight.directive.ts (defaultColor)(excerpt)">
 
 </code-example>
 
 
-
 Revise the directive's `onMouseEnter` so that it first tries to highlight with the `highlightColor`,
 then with the `defaultColor`, and falls back to "red" if both properties are undefined.
 
-修改该指令的`onMouseEnter`，让它首先尝试使用`highlightColor`进行高亮，然后用`defaultColor`，如果它们都没有指定，那就用红色作为后备。
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-enter)" region="mouse-enter">
+修改该指令的`onMouseEnter`，让它首先尝试使用`highlightColor`进行高亮，然后用`defaultColor`，如果它们都没有指定，那就用红色作为后备。<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-enter)" region="mouse-enter">
 
 </code-example>
 
 
-
 How do you bind to a second property when you're already binding to the `myHighlight` attribute name?
 
 当已经绑定过`myHighlight`属性时，要如何绑定到第二个属性呢？
@@ -695,16 +564,13 @@ As with components, you can add as many directive property bindings as you need
 The developer should be able to write the following template HTML to both bind to the `AppComponent.color`
 and fall back to "violet" as the default color.
 
+
 像组件一样，你也可以绑定到指令的很多属性，只要把它们依次写在模板中就行了。
-开发者可以绑定到`AppComponent.color`，并且用紫罗兰色作为默认颜色，代码如下：
-
-
-<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (defaultColor)" region="defaultColor">
+开发者可以绑定到`AppComponent.color`，并且用紫罗兰色作为默认颜色，代码如下：<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (defaultColor)" region="defaultColor">
 
 </code-example>
 
 
-
 Angular knows that the `defaultColor` binding belongs to the `HighlightDirective`
 because you made it _public_ with the `@Input` decorator.
 
@@ -712,16 +578,11 @@ Angular之所以知道`defaultColor`绑定属于`HighlightDirective`，是因为
 
 Here's how the harness should work when you're done coding.
 
-当这些代码完成时，测试程序工作时的动图如下：
 
-
-<figure class='image-display'>
-  <img src="assets/images/devguide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight"></img>
+当这些代码完成时，测试程序工作时的动图如下：<figure >
+  <img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
 </figure>
 
-
-
-
 ## Summary
 
 ## 总结
@@ -752,31 +613,12 @@ The final source code follows:
 最终的源码如下：
 
 <code-tabs>
-
-  <code-pane title="app/app.component.ts" path="attribute-directives/src/app/app.component.ts">
-
-  </code-pane>
-
-  <code-pane title="app/app.component.html" path="attribute-directives/src/app/app.component.html">
-
-  </code-pane>
-
-  <code-pane title="app/highlight.directive.ts" path="attribute-directives/src/app/highlight.directive.ts">
-
-  </code-pane>
-
-  <code-pane title="app/app.module.ts" path="attribute-directives/src/app/app.module.ts">
-
-  </code-pane>
-
-  <code-pane title="main.ts" path="attribute-directives/src/main.ts">
-
-  </code-pane>
-
-  <code-pane title="index.html" path="attribute-directives/src/index.html">
-
-  </code-pane>
-
+  <code-pane title="app/app.component.ts" path="attribute-directives/src/app/app.component.ts"></code-pane>
+  <code-pane title="app/app.component.html" path="attribute-directives/src/app/app.component.html"></code-pane>
+  <code-pane title="app/highlight.directive.ts" path="attribute-directives/src/app/highlight.directive.ts"></code-pane>
+  <code-pane title="app/app.module.ts" path="attribute-directives/src/app/app.module.ts"></code-pane>
+  <code-pane title="main.ts" path="attribute-directives/src/main.ts"></code-pane>
+  <code-pane title="index.html" path="attribute-directives/src/index.html"></code-pane>
 </code-tabs>
 
 
@@ -785,7 +627,7 @@ You can also experience and download the <live-example title="Attribute Directiv
 
 你还可以体验和下载<live-example title="属性型指令范例"></live-example>.
 
-
+{@a why-input}
 
 ### Appendix: Why add _@Input_?
 
@@ -794,26 +636,20 @@ You can also experience and download the <live-example title="Attribute Directiv
 In this demo, the `hightlightColor` property is an ***input*** property of
 the `HighlightDirective`. You've seen it applied without an alias:
 
-在这个例子中`hightlightColor`是`HighlightDirective`的一个***输入型***属性。我们见过它没有用别名时的代码：
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color">
+在这个例子中`hightlightColor`是`HighlightDirective`的一个***输入型***属性。我们见过它没有用别名时的代码：<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color">
 
 </code-example>
 
 
-
 You've seen it with an alias:
 
-也见过用别名时的代码：
 
-
-<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color">
+也见过用别名时的代码：<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color">
 
 </code-example>
 
 
-
 Either way, the `@Input` decorator tells Angular that this property is
 _public_ and available for binding by a parent component.
 Without  `@Input`, Angular refuses to bind to the property.
@@ -866,15 +702,12 @@ You can tell if `@Input` is needed by the position of the property name in a bin
 
 Now apply that reasoning to the following example:
 
-试用此原理分析下列范例：
 
-
-<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
+试用此原理分析下列范例：<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
 
 </code-example>
 
 
-
 * The `color` property in the expression on the right belongs to the template's component.
   The template and its component trust each other.
   The `color` property doesn't require the `@Input` decorator.
@@ -887,4 +720,4 @@ Now apply that reasoning to the following example:
   Therefore, the directive property must carry the `@Input` decorator.
 
   `myHighlight`属性位于左侧，它引用了`MyHighlightDirective`中一个*带别名的*属性，它不是模板所属组件的一部分，因此存在信任问题。
-所以，该属性必须带`@Input`装饰器。
\ No newline at end of file
+所以，该属性必须带`@Input`装饰器。
diff --git a/aio/content/guide/appmodule.md b/aio/content/guide/bootstrapping.md
similarity index 86%
rename from aio/content/guide/appmodule.md
rename to aio/content/guide/bootstrapping.md
index 4d998a5135..76d397b0be 100644
--- a/aio/content/guide/appmodule.md
+++ b/aio/content/guide/bootstrapping.md
@@ -1,15 +1,10 @@
-@title
-AppModule: 根模块
+# Bootstrapping
 
-@intro
-如何在根 "AppModule" 中构建和启动应用。
+# 启动过程
 
-@description
-
-
-An Angular module class describes how the application parts fit together.
-Every application has at least one Angular module, the _root_ module 
-that you [bootstrap](guide/appmodule#main) to launch the application.
+An NgModule class describes how the application parts fit together.
+Every application has at least one NgModule, the _root_ module
+that you [bootstrap](#main) to launch the application.
 You can call it anything you want. The conventional name is `AppModule`.
 
 Angular 模块类描述应用的部件是如何组合在一起的。
@@ -24,7 +19,6 @@ You'll evolve this module as your application grows.
 
 
 <code-example path="setup/src/app/app.module.ts" title="src/app/app.module.ts" linenums="false">
-
 </code-example>
 
 
@@ -34,7 +28,7 @@ After the `import` statements, you come to a class adorned with the
 
 `import`语句之后，可以看到一个**`@NgModule`**[装饰器](guide/glossary#decorator '"Decorator" explained')修饰的类。
 
-The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class).
+The `@NgModule` decorator identifies `AppModule` as an `NgModule` class.
 `@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application.
 
 `@NgModule`装饰器将`AppModule`标记为 Angular 模块类（也叫`NgModule`类）。
@@ -52,7 +46,7 @@ The `@NgModule` decorator identifies `AppModule` as an Angular module class (als
 
   **_bootstrap_** &mdash; _根_组件，Angular 创建它并插入`index.html`宿主页面。
 
-The [Angular Modules (NgModule)](guide/ngmodule) guide dives deeply into the details of Angular modules.
+The [NgModules](guide/ngmodule) guide dives deeply into the details of NgModules.
 All you need to know at the moment is a few basics about these three properties.
 
 [Angular 模块 (NgModules)](guide/ngmodule) 指南深入讲解了 Angular 模块。
@@ -64,10 +58,10 @@ All you need to know at the moment is a few basics about these three properties.
 
 ### The _imports_ array
 
-### _imports_ 数组
+### `imports`数组
 
-Angular modules are a way to consolidate features that belong together into discrete units.
-Many features of Angular itself are organized as Angular modules. 
+NgModules are a way to consolidate features that belong together into discrete units.
+Many features of Angular itself are organized as NgModules.
 HTTP services are in the `HttpModule`. The router is in the `RouterModule`.
 Eventually you may create a feature module.
 
@@ -108,14 +102,14 @@ _这个_应用和大多数其他应用一样，在浏览器中运行。
 
 
 
-The `import` statements at the top of the file and the Angular module's `imports` array
+The `import` statements at the top of the file and the NgModule's `imports` array
 are unrelated and have completely different jobs.
 
 不要将 Angular 模块的`imports`数组与文件顶部的`import`语句弄混淆了。它们的功能不同。
 
 The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
 so you can reference them within _this_ file.
-You add `import` statements to almost every application file. 
+You add `import` statements to almost every application file.
 They have nothing to do with Angular and Angular knows nothing about them.
 
 _JavaScript_ 的`import`声明允许你访问在其他文件中_导出_的符号，这样你可以在_当前_文件引用它们。
@@ -123,8 +117,8 @@ _JavaScript_ 的`import`声明允许你访问在其他文件中_导出_的符号
 它们与 Angular 毫无关系，Angular 对它们也一无所知。
 
 The _module's_ `imports` array appears _exclusively_ in the `@NgModule` metadata object.
-It tells Angular about specific _other_ Angular modules &mdash; all of them classes decorated with `@NgModule` &mdash;
-that the application needs to function properly.
+It tells Angular about specific _other_ NgModules&mdash;all of them classes decorated
+with `@NgModule`&mdash;that the application needs to function properly.
 
 _模块_的`imports`数组是`@NgModule`元数据中*独有的*。它告诉 Angular 特定 Angular 模块的信息 &mdash; 用`@NgModule`装饰的类 &mdash; 应用需要它们来正常工作。
 
@@ -145,13 +139,13 @@ As you create more components, you'll add them to `declarations`.
 通过将其列到`AppModule`模块的`declarations`数组中，可以告诉 Angular 哪个组件属于`AppModule`。
 在创建更多组件的过程中，逐步将它们添加到`declarations`中。
 
-You must declare _every_ component in an `NgModule` class. 
+You must declare _every_ component in an `NgModule` class.
 If you use a component without declaring it, you'll see a clear error message in the browser console.
 
 你必须在一个`NgModule`类声明*每一个*组件。
 否则当你使用这些组件时就会在浏览器的控制台中看到一个明显的错误信息。
 
-You'll learn to create two other kinds of classes &mdash; 
+You'll learn to create two other kinds of classes &mdash;
 [directives](guide/attribute-directives) and [pipes](guide/pipes) &mdash;
 that you must also add to the `declarations` array.
 
@@ -163,7 +157,7 @@ that you must also add to the `declarations` array.
 
 
 
-**Only _declarables_** &mdash; _components_, _directives_ and _pipes_ &mdash; belong in the `declarations` array. 
+**Only _declarables_** &mdash; _components_, _directives_ and _pipes_ &mdash; belong in the `declarations` array.
 Do not put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes.
 
 **只有*可以声明的** &mdash; _组件_、_指令_和_管道_ &mdash; 属于`declarations`数组。
@@ -181,7 +175,7 @@ Do not put any other kind of class in `declarations`; _not_ `NgModule` classes,
 
 ### _bootstrap_ 数组
 
-You launch the application by [_bootstrapping_](guide/appmodule#main) the root `AppModule`. 
+You launch the application by [_bootstrapping_](#main) the root `AppModule`.
 Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
 and inserts each one into the browser DOM.
 
@@ -195,7 +189,7 @@ Inserting a bootstrapped component usually triggers a cascade of component creat
 每个被引导的组件都是它自己的组件树的根。
 插入一个被引导的组件通常触发一系列组件的创建并形成组件树。
 
-While you can put more than one component tree on a host web page, that's not typical. 
+While you can put more than one component tree on a host web page, that's not typical.
 Most applications have only one component tree and they bootstrap a single _root_ component.
 
 虽然你可以将多个组件树插入到宿主页面，但并不普遍。
@@ -212,13 +206,6 @@ Which brings us to the _bootstrapping_ process itself.
 
 {@a main}
 
-
-<l-main-section>
-
-</l-main-section>
-
-
-
 ## Bootstrap in _main.ts_
 
 ## 在*main.ts*中引导
@@ -235,7 +222,7 @@ and you'll run it in a browser. You can learn about other options later.
 开始时，你将使用_即时 (JiT) _编译器动态编译应用。然后在浏览器中运行它。
 稍后，你可以了解其他选项。
 
-The recommended place to bootstrap a JIT-compiled browser application is in a separate file 
+The recommended place to bootstrap a JIT-compiled browser application is in a separate file
 in the `src` folder named `src/main.ts`
 
 引导即时编译的浏览器应用的推荐地点是在`src`目录中一个名为`src/main.ts`的单独文件中。
@@ -253,12 +240,12 @@ bootstraps the `AppModule` described above.
 上面的代码为动态 (JiT) 编译创建浏览器平台，并引导上面提到的`AppModule`。
 
 The _bootstrapping_ process sets up the execution environment,
-digs the _root_ `AppComponent` out of the module's `bootstrap` array, 
+digs the _root_ `AppComponent` out of the module's `bootstrap` array,
 creates an instance of the component and inserts it within the element tag identified by the component's `selector`.
 
 引导过程搭建运行环境，从模块的`bootstrap`数组中提出_根_`AppComponent`， 创建该组件的实例，并将其插入到组件`selector`标识的元素标签中。
 
-The `AppComponent` selector &mdash; here and in most documentation samples &mdash; is `my-app` 
+The `AppComponent` selector &mdash; here and in most documentation samples &mdash; is `my-app`
 so Angular looks for a `<my-app>` tag in the `index.html` like this one ...
 
 `AppComponent`选择器 &mdash; 在这里以及文档大部分例子中 &mdash; 是`my-app`，
@@ -285,7 +272,7 @@ This file is very stable. Once you've set it up, you may never change it again.
 
 
 
-## More about Angular Modules
+## More about NgModules
 
 ## 关于Angular模块的更多知识
 
@@ -296,8 +283,4 @@ to visit those features.
 
 你最初的应用只有一个单一的模块 —— *根*模块。
 当这个应用不断成长时，你就要考虑把它们拆分到多个 "特性" 模块中了。
-这些特性模块中的一部分可以稍后加载（即惰性加载），它们只会在用户访问到这些特性时才会加载。
-
-When you're ready to explore these possibilities, visit the [Angular Modules (NgModule)](guide/ngmodule) guide.
-
-如果你要了解这些知识，请访问[Angular 模块 (NgModule)](guide/ngmodule)页
\ No newline at end of file
+这些特性模块中的一部分可以稍后加载（即惰性加载），它们只会在用户访问到这些特性时才会加载。When you're ready to explore these possibilities, visit the [NgModules](guide/ngmodule) guide.如果你要了解这些知识，请访问[Angular 模块 (NgModule)](guide/ngmodule)页
\ No newline at end of file
diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md
index ea09b11696..a9915b650a 100644
--- a/aio/content/guide/browser-support.md
+++ b/aio/content/guide/browser-support.md
@@ -1,12 +1,6 @@
-@title
-浏览器支持
-
-@intro
-浏览器支持与填充 (Polyfill) 指南
-
-@description
-
+# Browser support
 
+# 浏览器支持
 
 Angular supports most recent browsers. This includes the following specific versions:
 
@@ -46,7 +40,7 @@ Angular 支持大多数常用浏览器，包括下列版本：
     </th>
 
     <th>
-      IE mobile
+      IE Mobile
     </th>
 
   </tr>
@@ -94,7 +88,7 @@ Angular 支持大多数常用浏览器，包括下列版本：
     </td>
 
     <td>
-      Marshmallow (6.0)
+      Nougat (7.0)<br>Marshmallow (6.0)
     </td>
 
     <td>
@@ -219,9 +213,9 @@ Angular 支持大多数常用浏览器，包括下列版本：
 
 
 
-Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request, 
-using <a href="https://saucelabs.com/" target="_blank">SauceLabs</a> and 
-<a href="https://www.browserstack.com" target="_blank">Browserstack</a>.
+Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request,
+using <a href="https://saucelabs.com/">SauceLabs</a> and
+<a href="https://www.browserstack.com">Browserstack</a>.
 
 Angular 在持续集成过程中，对每一个提交都会使用 <a href="https://saucelabs.com/" target="_blank">SauceLabs</a> 和
 <a href="https://www.browserstack.com" target="_blank">Browserstack</a> 在上述所有浏览器上执行单元测试。
@@ -251,7 +245,7 @@ that implement missing features in JavaScript.
 
 
 
-A particular browser may require at least one polyfill to run _any_ Angular application. 
+A particular browser may require at least one polyfill to run _any_ Angular application.
 You may need additional polyfills for specific features.
 
 要运行 Angular 应用，某些浏览器可能需要至少一个填充库。除此之外，如果要支持某些特定的特性，你可能还需要另一些填充库。
@@ -288,23 +282,22 @@ These are the polyfills required to run an Angular application on each supported
 <table>
 
   <tr style="vertical-align: top">
- 
+
     <th>
 
       <p>
-        Browsers (desktop & mobile)
+        Browsers (Desktop & Mobile)
       </p>
 
       <p>
         浏览器（桌面和移动）
       </p>
-
     </th>
 
     <th>
 
       <p>
-        Polyfills required
+        Polyfills Required
       </p>
 
       <p>
@@ -316,7 +309,7 @@ These are the polyfills required to run an Angular application on each supported
   </tr>
 
   <tr style="vertical-align: top">
- 
+
     <td>
       Chrome, Firefox, Edge, Safari 9+
     </td>
@@ -328,7 +321,7 @@ These are the polyfills required to run an Angular application on each supported
   </tr>
 
   <tr style="vertical-align: top">
- 
+
     <td>
       Safari 7 & 8, IE10 & 11, Android 4.1+
     </td>
@@ -342,7 +335,7 @@ These are the polyfills required to run an Angular application on each supported
   </tr>
 
   <tr style="vertical-align: top">
- 
+
     <td>
       IE9
     </td>
@@ -379,57 +372,37 @@ Here are the features which may require additional polyfills:
 <table>
 
   <tr style="vertical-align: top">
- 
+
     <th>
-
-      <p>
-        Feature
-      </p>
-
-      <p>
-        特性
-      </p>
-
+      Feature
+      
+      特性
+      
     </th>
 
     <th>
-
-      <p>
-        Polyfill
-      </p>
-
-      <p>
-        填充库
-      </p>
+      Polyfill
+      
+      填充库
 
     </th>
 
     <th style="width: 50%">
-
-      <p>
-        Browsers (desktop & mobile)
-      </p>
-
-      <p>
-        浏览器（桌面和移动）
-      </p>
-
+      Browsers (Desktop & Mobile)
+      
+      浏览器（桌面和移动）
+      
     </th>
 
   </tr>
 
   <tr style="vertical-align: top">
- 
+
     <td>
-
-      <p>
-         <a href="./animations.html">Animations</a>
-      </p>
-
-      <p>
-         <a href="./animations.html">动画</a>
-      </p>
-
+      [Animations](guide/animations)
+      
+      [动画](guide/animations)
+      
     </td>
 
     <td>
@@ -442,30 +415,21 @@ Here are the features which may require additional polyfills:
 
     <td>
 
-      <p>
-        All but Chrome and Firefox<br>Not supported in IE9
-      </p>
-
-      <p>
-        除 Chrome 和 Firefox 外的所有，但不支持 IE9
-      </p>
+      All but Chrome and Firefox<br>Not supported in IE9
+      
+      除 Chrome 和 Firefox 外的所有，但不支持 IE9
 
     </td>
 
   </tr>
 
   <tr style="vertical-align: top">
- 
+
     <td>
 
-      <p>
-        <a href="../api/common/index/DatePipe-pipe.html" target="_blank">Date</a>        <span>,  </span>        <a href="../api/common/index/CurrencyPipe-pipe.html" target="_blank">currency</a>        <span>, </span>        <a href="../api/common/index/DecimalPipe-pipe.html" target="_blank">decimal</a>        <span> and </span>        <a href="../api/common/index/PercentPipe-pipe.html" target="_blank">percent</a>        <span> pipes</span>
-      </p>
-
-      <p>
-        <a href="../api/common/index/DatePipe-pipe.html" target="_blank">Date</a>        <span>、</span>        <a href="../api/common/index/CurrencyPipe-pipe.html" target="_blank">currency</a>        <span>、</span>        <a href="../api/common/index/DecimalPipe-pipe.html" target="_blank">decimal</a>        <span>&nbsp;和&nbsp;</span>        <a href="../api/common/index/PercentPipe-pipe.html" target="_blank">percent</a>        <span>&nbsp;管道</span>
-      </p>
-
+    [Date](api/common/DatePipe), [currency](api/common/CurrencyPipe), [decimal](api/common/DecimalPipe) and [percent](api/common/PercentPipe) pipes
+    
+    [Date](api/common/DatePipe)、[currency](api/common/CurrencyPipe)、[decimal](api/common/DecimalPipe) 和 [percent](api/common/PercentPipe) 管道
     </td>
 
     <td>
@@ -475,35 +439,25 @@ Here are the features which may require additional polyfills:
     </td>
 
     <td>
-
-      <p>
-        All but Chrome, Firefox, Edge, IE11 and Safari 10
-      </p>
-
-      <p>
-        除了 Chrome、Firefox、Edge、IE11 和 Safari 10 外的所有浏览器
-      </p>
+      All but Chrome, Firefox, Edge, IE11 and Safari 10
+      
+      除了 Chrome、Firefox、Edge、IE11 和 Safari 10 外的所有浏览器
 
     </td>
 
   </tr>
 
   <tr style="vertical-align: top">
- 
+
     <td>
 
-      <p>
-        <a href="../api/common/index/NgClass-directive.html" target="_blank">NgClass</a>        <span>on SVG elements</span>
-      </p>
-
-      <p>
-        <span>在 SVG 元素上用&nbsp;</span>        <a href="../api/common/index/NgClass-directive.html" target="_blank">NgClass</a>
-      </p>
-
+       [NgClass](api/common/NgClass) on SVG elements
+       
+       在 SVG 元素上应用 [NgClass](api/common/NgClass)
     </td>
 
     <td>
- 
+
 
       [classList](guide/browser-support#classlist)
     </td>
@@ -515,23 +469,20 @@ Here are the features which may require additional polyfills:
   </tr>
 
   <tr style="vertical-align: top">
- 
+
     <td>
 
-      <p>
-        <a href="./server-communication.html">Http</a>        <span> when sending and receiving binary data</span>
-      </p>
-
-      <p>
-        <span>用&nbsp;</span>        <a href="./server-communication.html">Http</a>        <span>&nbsp;发送和接受二进制数据</span>
-      </p>
-
+      [Http](guide/http) when sending and receiving binary data
+      
+      用 [Http](guide/http) 发送和接收二进制数据
+      
     </td>
 
     <td>
- 
 
-      [Typed&nbsp;Array](guide/browser-support#typedarray) <br>[Blob](guide/browser-support#blob)<br>[FormData](guide/browser-support#formdata)
+      [Typed&nbsp;Array](guide/browser-support#typedarray)<br>
+      [Blob](guide/browser-support#blob)<br>
+      [FormData](guide/browser-support#formdata)
     </td>
 
     <td>
@@ -546,7 +497,7 @@ Here are the features which may require additional polyfills:
 
 ### Suggested polyfills ##
 ### 建议的填充库 ##
-Below are the polyfills which are used to test the framework itself. They are a good starting point for an application. 
+Below are the polyfills which are used to test the framework itself. They are a good starting point for an application.
 
 下表中是用来测试框架本身的填充库，它们是应用程序的优质起点。
 
@@ -596,7 +547,7 @@ Below are the polyfills which are used to test the framework itself. They are a
   <tr>
 
     <td>
-      <a id='core-es6' href="https://github.com/zloirock/core-js" target="_blank">ES6</a>
+      <a id='core-es6' href="https://github.com/zloirock/core-js">ES6</a>
     </td>
 
     <td>
@@ -612,7 +563,7 @@ Below are the polyfills which are used to test the framework itself. They are a
   <tr>
 
     <td>
-      <a id='classlist' href="https://github.com/eligrey/classList.js" target="_blank">classList</a>
+      <a id='classlist' href="https://github.com/eligrey/classList.js">classList</a>
     </td>
 
     <td>
@@ -636,7 +587,7 @@ Below are the polyfills which are used to test the framework itself. They are a
   <tr>
 
     <td>
-      <a id='intl' href="https://github.com/andyearnshaw/Intl.js" target="_blank">Intl</a>
+      <a id='intl' href="https://github.com/andyearnshaw/Intl.js">Intl</a>
     </td>
 
     <td>
@@ -652,7 +603,7 @@ Below are the polyfills which are used to test the framework itself. They are a
   <tr>
 
     <td>
-      <a id='web-animations' href="https://github.com/web-animations/web-animations-js" target="_blank">Web Animations</a>
+      <a id='web-animations' href="https://github.com/web-animations/web-animations-js">Web Animations</a>
     </td>
 
     <td>
@@ -668,7 +619,7 @@ Below are the polyfills which are used to test the framework itself. They are a
   <tr>
 
     <td>
-      <a id='typedarray' href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank">Typed Array</a>
+      <a id='typedarray' href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js">Typed Array</a>
     </td>
 
     <td>
@@ -684,7 +635,7 @@ Below are the polyfills which are used to test the framework itself. They are a
   <tr>
 
     <td>
-       <a id='blob' href="https://github.com/eligrey/Blob.js" target="_blank">Blob</a>
+       <a id='blob' href="https://github.com/eligrey/Blob.js">Blob</a>
     </td>
 
     <td>
@@ -700,7 +651,7 @@ Below are the polyfills which are used to test the framework itself. They are a
   <tr>
 
     <td>
-       <a id='formdata' href="https://github.com/francois2metz/html5-formdata" target="_blank">FormData</a>
+       <a id='formdata' href="https://github.com/francois2metz/html5-formdata">FormData</a>
     </td>
 
     <td>
@@ -718,7 +669,5 @@ Below are the polyfills which are used to test the framework itself. They are a
 
 
 \* Figures are for minified and gzipped code, 
-computed with the <a href="http://closure-compiler.appspot.com/home" target="_blank">closure compiler</a>.
-
-\* 这些指标测量的是最小化 (minify) 并且 gzip 过的代码，使用 <a href="http://closure-compiler.appspot.com/home" target="_blank">closure compiler</a>
+computed with the <a href="http://closure-compiler.appspot.com/home" >closure compiler</a>.\* 这些指标测量的是最小化 (minify) 并且 gzip 过的代码，使用 <a href="http://closure-compiler.appspot.com/home" target="_blank">closure compiler</a>
 计算出的结果。
\ No newline at end of file
diff --git a/aio/content/guide/cb-index.md b/aio/content/guide/cb-index.md
deleted file mode 100644
index a5feceec0c..0000000000
--- a/aio/content/guide/cb-index.md
+++ /dev/null
@@ -1,63 +0,0 @@
-@title
-烹饪宝典
-
-@intro
-一组常见 Angular 应用场景的“烹饪宝典”
-
-@description
-
-
-The *Cookbook* offers answers to common implementation questions.
-
-这本*“烹饪宝典”*提供了在实施中一些常见问题的答案。
-
-Each cookbook page is a collection of recipes focused on a particular Angular feature or application challenge
-such as data binding, cross-component interaction, and communicating with a remote server via HTTP.
-
-每个“烹饪宝典”章节都是一套“菜谱”，每套菜谱都聚焦于一个特定的Angular特性或者来自应用方面的挑战，比如数据绑定、跨组件通讯和通过HTTP与远程服务器交互等。
-
-
-<div class="l-sub-section">
-
-
-
-The cookbook is just getting started. Many more recipes are on the way.
-
-这本烹饪宝典只是一个开始。我们正在编写更多“菜谱”。
-
-
-</div>
-
-
-
-Each cookbook  links to a live sample with every recipe included.
-
-“烹饪宝典”中的每个章节都链接了一个在线例子，包含“菜谱”的完整代码。
-
-Recipes are deliberately brief and code-centric. 
-Each recipe links to a relevant page of the [Developer Guide](guide) or the 
-[API Reference](api)where you can learn more about the purpose, context, and design choices behind the code snippets.
-
-我们有意保持着“菜谱”的简洁，并坚持以代码为中心。
-每个“菜谱”都与[开发者指南](guide)或[API参考手册](api)里面的某个章节相关联。
-在这些相关章节里，你可以学到更多关于代码片段背后的目的、上下文和设计选择等深层知识。
-
-## Feedback
-
-## 反馈
-
-Post *documentation* requests and comments as
-<a href="https://github.com/angular/angular.io/issues" target="_blank" title="Documentation issues on github">
-<i>issues</i> on the angular.io</a> github repository.
-Fixes (small ones) are greatly appreciated as
-<a href="https://github.com/angular/angular.io/pulls" target="_blank" title="Documentation PRs on github">
-<i>pull requests</i></a>.
-
-请把对*文档*的建议和意见贴到<a href="https://github.com/angular/angular.io/issues" target="_blank" title="github上的文档问题">
-  angular.io的github <i>issues</i></a>。
-  也非常欢迎把小的修改提交为<a href="https://github.com/angular/angular.io/pulls" target="_blank" title="Documentation PRs on github">
-    <i>pull requests</i></a>。
-
-Post issues with *Angular itself* to the [angular](https://github.com/angular/angular) github repository.
-
-到[Angular仓库](https://github.com/angular/angular)提交*Angular本身*的问题。
\ No newline at end of file
diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md
index e48bb81bed..8085936435 100644
--- a/aio/content/guide/change-log.md
+++ b/aio/content/guide/change-log.md
@@ -1,10 +1,6 @@
-@title
-更新记录
+# Change Log
 
-@intro
-最新文档更新历史记录。
-
-@description
+# 变更记录
 
 
 
@@ -17,10 +13,9 @@ This log calls attention to recent significant changes.
 
 ## 更新到 Angular 4.0 。Angular 2.x 的文档在 [v2.angular.io](https://v2.angular.io) 。
 
-## All mention of moduleId removed. "Component relative paths" cookbook deleted (2017-03-13)
+## All mention of moduleId removed. "Component relative paths" guide deleted (2017-03-13)
 
 ## 移除了所有的moduleId引用。移除了“组件相对路径” 的烹饪书。(2017-03-13)
-
 We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration.
 This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.
 
@@ -62,7 +57,7 @@ Revised samples are more clear and cover all topics discussed.
 
 All documentation samples have been realigned with the default folder structure of the Angular CLI.
 That's a step along the road to basing the sample in the Angular CLI.
-But it's also good in its own right. 
+But it's also good in its own right.
 It helps clearly separate app code from setup and configuration files.
 
 所有的文档范例都已经向Angular CLI的默认文件夹结构看齐了。
@@ -70,9 +65,9 @@ It helps clearly separate app code from setup and configuration files.
 不过也不仅是为了迁移，它确实能帮我们把应用代码从环境代码和配置代码中分离出来。
 
 All samples now have a `src/` folder at the project root.
-The former `app/` folder moves under `src/`. 
-Read about moving your existing project to this structure in 
-<a href="https://github.com/angular/quickstart#updating-to-a-newer-version-of-the-quickstart-repo" target="_blank" target="Migrating samples/quickstart app to the src folder">
+The former `app/` folder moves under `src/`.
+Read about moving your existing project to this structure in
+<a href="https://github.com/angular/quickstart#updating-to-a-newer-version-of-the-quickstart-repo" target="Migrating samples/quickstart app to the src folder">
 the QuickStart repo update instructions</a>.
 
 我们已经把所有范例改成了使用项目根目录下的`src/`文件夹。
@@ -110,8 +105,8 @@ Notably:
 The new [**Reactive Forms**](guide/reactive-forms) guide explains how and why to build a "reactive form".
 "Reactive Forms" are the code-based counterpart to the declarative "Template Driven" forms approach
 introduced in the [Forms](guide/forms) guide.
-Check it out before you decide how to add forms to your app. 
-Remember also that you can use both techniques in the same app, 
+Check it out before you decide how to add forms to your app.
+Remember also that you can use both techniques in the same app,
 choosing the approach that best fits each scenario.
 
 新的[**响应式表单**](guide/reactive-forms)指南解释了如何以及何时构建“响应式表单”。
@@ -141,14 +136,9 @@ Revised samples are clearer and cover all topics discussed
 
 ## Miscellaneous (2017-01-05)
 
-## 杂项 (2017-01-05)
-
-* [Setup](guide/setup) guide: 
-    added (optional) instructions on how to remove _non-essential_ files. 
-    
-    [环境搭建](guide/setup)指南:
+## 杂项 (2017-01-05)* [Setup](guide/setup) guide: 
+added (optional) instructions on how to remove _non-essential_ files. [环境搭建](guide/setup)指南:
     添加了（可选的）步骤说明，告诉你如何移除*非核心*文件。
-
 * No longer consolidate RxJS operator imports in `rxjs-extensions` file; each file should import what it needs.
     
     不再在`rxjs-extensions`文件中统一导入RxJS的操作符，每个文件应该各自导入它自己所需的。
@@ -157,7 +147,7 @@ Revised samples are clearer and cover all topics discussed
 
     所有范例都在模板/样式的URL之前添加`./`前缀 …… 而且你在实际开发中也应该这么做。
 
-* [Style Guide](guide/style-guide): copy edits and revised rules.
+* [Style Guide](guide/styleguide): copy edits and revised rules.
 
     [风格指南](guide/style-guide)：复制了编辑过的和修改过的规则。
 
@@ -165,7 +155,7 @@ Revised samples are clearer and cover all topics discussed
 
 ## 路由：更详细 (2016-12-21)
 
-Added more information to the [Router](guide/router) guide 
+Added more information to the [Router](guide/router) guide
 including sections named outlets, wildcard routes, and preload strategies.
 
 往[路由指南](guide/router)中添加了更多信息，包括“命名出口（Outlet）”、通配符路由和预加载策略。
@@ -174,8 +164,8 @@ including sections named outlets, wildcard routes, and preload strategies.
 
 ## Http：如何设置默认的请求头（以及其它配置项） (2016-12-14)
 
-Added section on how to set default request headers (and other request options) to 
-[HTTP](guide/server-communication#override-default-request-options) guide.
+Added section on how to set default request headers (and other request options) to
+HTTP guide.
 
 往[Http指南](guide/server-communication#override-default-request-options)中添加了一节“如何设置默认的请求头（以及其它配置项）”
 
@@ -183,7 +173,7 @@ Added section on how to set default request headers (and other request options)
 
 ## 测试：添加了组件测试的plunker范例 (2016-12-02)
 
-Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own: <live-example name="setup" plnkr="quickstart-specs">one</live-example> for the QuickStart seed's `AppComponent` and <live-example name="testing" plnkr="banner-specs">another</live-example> for the Testing guide's `BannerComponent`. 
+Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own: <live-example name="setup" plnkr="quickstart-specs">one</live-example> for the QuickStart seed's `AppComponent` and <live-example name="testing" plnkr="banner-specs">another</live-example> for the Testing guide's `BannerComponent`.
 Linked to these plunkers in [Testing](guide/testing#live-examples) and [Setup anatomy](guide/setup-systemjs-anatomy) guides.
 
 添加了两个plunker例子，每个都测试一个简单的组件，以便你可以自己在plunker中写组件测试：<live-example name="setup" plnkr="quickstart-specs">一个</live-example>用于测试快速起步中的`AppComponent`，<live-example name="testing" plnkr="banner-specs">另一个</live-example>用于测试“测试”章节的`BannerComponent`。
@@ -193,7 +183,7 @@ Linked to these plunkers in [Testing](guide/testing#live-examples) and [Setup an
 
 ## 国际化：单复数和`select` (2016-11-30)  
 
-The [Internationalization (i18n)](cookbook/i18n) guide explains how to handle pluralization and 
+The [Internationalization (i18n)](guide/i18n) guide explains how to handle pluralization and 
 translation of alternative texts with `select`.
 The sample demonstrates these features too.
 
@@ -240,8 +230,8 @@ Docs and code samples updated and tested with Angular v.2.2.0 .
 
 ## 更新：用于AoT的_upgrade/static_模块NgUpgrade指南 (2016-11-14)  
 
-The updated [NgUpgrade Guide](guide/upgrade) guide covers the 
-new AOT friendly `upgrade/static` module 
+The updated [NgUpgrade Guide](guide/upgrade) guide covers the
+new AOT friendly `upgrade/static` module
 released in v.2.2.0, which is the recommended
 facility for migrating from AngularJS to Angular.
 The documentation for the version prior to v.2.2.0 has been removed.
@@ -254,7 +244,7 @@ The documentation for the version prior to v.2.2.0 has been removed.
 
 ## 在“从TypeScript到JavaScript”增加ES6的描述 (2016-11-14)  
 
-The updated [TypeScript to JavaScript](cookbook/ts-to-js) cookbook 
+The updated [TypeScript to JavaScript](guide/ts-to-js) guide
 now explains how to write apps in ES6/7
 
 更新了“[从TypeScript到JavaScript](cookbook/ts-to-js)”烹饪宝典，解释如何使用ES6/7编写应用
@@ -305,7 +295,7 @@ re-explains `[(ngModel)]` in terms of the basic `[()]` syntax.
 
 This change supports ES6 developers and aligns better with typical Angular libraries.
 It does not affect the module's API but it does affect how you load and import it.
-See the <a href="https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md#0113-2016-10-20" target="_blank">change note</a>
+See the <a href="https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md#0113-2016-10-20">change note</a>
 in the `in-memory-web-api` repo.
 
 这个变化支持ES6开发者，并与典型的Angular库看齐。
@@ -333,11 +323,11 @@ Docs and code samples updated and tested with Angular v.2.1.0 .
 
 使用Angular v.2.1.0更新和测试所有文档和代码例子。
 
-## NEW "Ahead of time (AOT) Compilation" cookbook (2016-10-11)
+## NEW "Ahead of time (AOT) Compilation" guide (2016-10-11)
 
 ## 添加了新的“预编译(AoT)"烹饪书(2016-10-11)
 
-The NEW [Ahead of time (AOT) Compilation](cookbook/aot-compiler) cookbook
+The NEW [Ahead of time (AOT) Compilation](guide/aot-compiler) guide
 explains what AOT compilation is and why you'd want it.
 It demonstrates the basics with a QuickStart app
 followed by the more advanced considerations of compiling and bundling the Tour of Heroes.
@@ -358,7 +348,7 @@ Docs and code samples updated and tested with Angular v.2.0.2 .
 ## 在“路由和导航”向导中添加**路由模块** (2016-10-5)
 
 The [Routing and Navigation](guide/router) guide now locates route configuration
-in a _Routing Module_. 
+in a _Routing Module_.
 The _Routing Module_ replaces the previous _routing object_ involving the `ModuleWithProviders`.
 
 [Routing and Navigation](guide/router)现在在**路由模块**中设置路由配置。
@@ -369,16 +359,16 @@ The _Routing Module_ replaces the previous _routing object_ involving the `Modul
 [路由与导航](guide/router)
 
 All guided samples with routing use the _Routing Module_ and prose content has been updated,
-most conspicuously in the 
-[NgModule](guide/ngmodule) guide and [NgModule FAQ](cookbook/ngmodule-faq) cookbook.
+most conspicuously in the
+[NgModule](guide/ngmodule) guide and [NgModule FAQ](guide/ngmodule-faq) guide.
 
 所有使用路由的例子都使用**路由模块**，相关内容也被更新。更新最多的是[Angular模块（NgModule）](guide/ngmodule)章和[Angular模块常见问题](cookbook/ngmodule-faq)烹饪书。
 
-## New "Internationalization" Cookbook (2016-09-30)
+## New "Internationalization" guide (2016-09-30)
 
 ## 全新“国际化”烹饪书(2016-09-30)
 
-Added a new [Internationalization (i18n)](cookbook/i18n) cookbook that shows how
+Added a new [Internationalization (i18n)](guide/i18n) guide that shows how
 to use Angular "i18n" facilities to translate template text into multiple languages.
 
 添加了新的[国际化(i18n)](cookbook/i18n)烹饪书，展示了如何使用Angular的“i18n”工具来讲模板文本翻译到多种语言。
@@ -394,8 +384,8 @@ This library is also useful to you during early development before you have a se
 这个库在你拥有服务器之前的早期开发阶段也很有用。
 
 The package name was changed from "angular2-in-memory-web-api" which is still frozen-in-time on npm.
-The new "angular-in-memory-web-api" has new features. 
-<a href="https://github.com/angular/in-memory-web-api/blob/master/README.md" target="_blank">Read about them on github</a>.
+The new "angular-in-memory-web-api" has new features.
+<a href="https://github.com/angular/in-memory-web-api/blob/master/README.md">Read about them on github</a>.
 
 这个包的名字从“angular2-in-memory-web-api”（仍然有效，但不再更新了）重新命名了。
 新的“angular-in-memory-web-api”有新的功能。
@@ -405,10 +395,9 @@ The new "angular-in-memory-web-api" has new features.
 
 ## “风格指南”中添加了_NgModules_(2016-09-27)
 
-[StyleGuide](guide/style-guide) explains recommended conventions for Angular modules (NgModule).
+[StyleGuide](guide/styleguide) explains recommended conventions for NgModules.
 
 [StyleGuide](guide/style-guide)解释了我们为Angular模块（NgModule）而推荐的约定。
-
 Barrels now are far less useful and have been removed from the style guide;
 they remain valuable but are not a matter of Angular style.
 Also relaxed the rule that discouraged use of the `@Component.host` property.
@@ -440,4 +429,4 @@ modules with SystemJS as the samples currently do.
 The [Lifecycle Hooks](guide/lifecycle-hooks) guide is shorter, simpler, and
 draws more attention to the order in which Angular calls the hooks.
 
-[生命周期钩子](guide/lifecycle-hooks)章现在更加简短，并且对强调了Angular是以什么顺序来调用钩子方法的。
\ No newline at end of file
+[生命周期钩子](guide/lifecycle-hooks)章现在更加简短，并且对强调了Angular是以什么顺序来调用钩子方法的。
diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md
index ee6b8a79af..6648a39b0b 100644
--- a/aio/content/guide/cheatsheet.md
+++ b/aio/content/guide/cheatsheet.md
@@ -1,14 +1,9 @@
-@title
-速查表
+<h1 class="no-toc">Cheat Sheet</h1>
 
-@description
-// SCSS from
-//   resources/css/module/_cheatsheet.scss
-//   resources/css/layout/_grids.scss:  grid-fluid
-//   resources/css/layout/_layout.scss: docs-content, l-content-small
-<div class="l-content-small grid-fluid docs-content cheatsheet">
+<h1 class="no-toc">速查表</h1>
 
-<table>
+<div id="cheatsheet">
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Bootstrapping</th>
 <th><p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code>
@@ -22,7 +17,7 @@
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>NgModules</th>
 <th><p><code>import { NgModule } from '@angular/core';</code>
@@ -30,100 +25,100 @@
 </th>
 </tr>
 <tr>
-<td><code>@<b>NgModule</b>({&nbsp;declarations:&nbsp;...,&nbsp;imports:&nbsp;...,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exports:&nbsp;...,&nbsp;providers:&nbsp;...,&nbsp;bootstrap:&nbsp;...})<br>class&nbsp;MyModule&nbsp;{}</code></td>
+<td><code>@<b>NgModule</b>({ declarations: ..., imports: ...,<br>     exports: ..., providers: ..., bootstrap: ...})<br>class MyModule {}</code></td>
 <td><p>Defines a module that contains components, directives, pipes, and providers.</p>
 </td>
 </tr><tr>
-<td><code><b>declarations:</b>&nbsp;[MyRedComponent,&nbsp;MyBlueComponent,&nbsp;MyDatePipe]</code></td>
+<td><code><b>declarations:</b> [MyRedComponent, MyBlueComponent, MyDatePipe]</code></td>
 <td><p>List of components, directives, and pipes that belong to this module.</p>
 </td>
 </tr><tr>
-<td><code><b>imports:</b>&nbsp;[BrowserModule,&nbsp;SomeOtherModule]</code></td>
+<td><code><b>imports:</b> [BrowserModule, SomeOtherModule]</code></td>
 <td><p>List of modules to import into this module. Everything from the imported modules
 is available to <code>declarations</code> of this module.</p>
 </td>
 </tr><tr>
-<td><code><b>exports:</b>&nbsp;[MyRedComponent,&nbsp;MyDatePipe]</code></td>
+<td><code><b>exports:</b> [MyRedComponent, MyDatePipe]</code></td>
 <td><p>List of components, directives, and pipes visible to modules that import this module.</p>
 </td>
 </tr><tr>
-<td><code><b>providers:</b>&nbsp;[MyService,&nbsp;{&nbsp;provide:&nbsp;...&nbsp;}]</code></td>
+<td><code><b>providers:</b> [MyService, { provide: ... }]</code></td>
 <td><p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>
 </td>
 </tr><tr>
-<td><code><b>bootstrap:</b>&nbsp;[MyAppComponent]</code></td>
+<td><code><b>bootstrap:</b> [MyAppComponent]</code></td>
 <td><p>List of components to bootstrap when this module is bootstrapped.</p>
 </td>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Template syntax</th>
 <th></th>
 </tr>
 <tr>
-<td><code>&lt;input&nbsp;<b>[value]</b>="firstName"&gt;</code></td>
+<td><code>&lt;input <b>[value]</b>="firstName"&gt;</code></td>
 <td><p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div&nbsp;<b>[attr.role]</b>="myAriaRole"&gt;</code></td>
+<td><code>&lt;div <b>[attr.role]</b>="myAriaRole"&gt;</code></td>
 <td><p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div&nbsp;<b>[class.extra-sparkle]</b>="isDelightful"&gt;</code></td>
+<td><code>&lt;div <b>[class.extra-sparkle]</b>="isDelightful"&gt;</code></td>
 <td><p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div&nbsp;<b>[style.width.px]</b>="mySize"&gt;</code></td>
+<td><code>&lt;div <b>[style.width.px]</b>="mySize"&gt;</code></td>
 <td><p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>
 </td>
 </tr><tr>
-<td><code>&lt;button&nbsp;<b>(click)</b>="readRainbow($event)"&gt;</code></td>
+<td><code>&lt;button <b>(click)</b>="readRainbow($event)"&gt;</code></td>
 <td><p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div&nbsp;title="Hello&nbsp;<b>{{ponyName}}</b>"&gt;</code></td>
+<td><code>&lt;div title="Hello <b>{{ponyName}}</b>"&gt;</code></td>
 <td><p>Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:
 <code>&lt;div [title]="'Hello ' + ponyName"&gt;</code></p>
 </td>
 </tr><tr>
-<td><code>&lt;p&gt;Hello&nbsp;<b>{{ponyName}}</b>&lt;/p&gt;</code></td>
+<td><code>&lt;p&gt;Hello <b>{{ponyName}}</b>&lt;/p&gt;</code></td>
 <td><p>Binds text content to an interpolated string, for example, "Hello Seabiscuit".</p>
 </td>
 </tr><tr>
-<td><code>&lt;my-cmp&nbsp;<b>[(title)]</b>="name"&gt;</code></td>
+<td><code>&lt;my-cmp <b>[(title)]</b>="name"&gt;</code></td>
 <td><p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]="name" (titleChange)="name=$event"&gt;</code></p>
 </td>
 </tr><tr>
-<td><code>&lt;video&nbsp;<b>#movieplayer</b>&nbsp;...&gt;<br>&nbsp;&nbsp;&lt;button&nbsp;<b>(click)</b>="movieplayer.play()"&gt;<br>&lt;/video&gt;</code></td>
+<td><code>&lt;video <b>#movieplayer</b> ...&gt;<br>  &lt;button <b>(click)</b>="movieplayer.play()"&gt;<br>&lt;/video&gt;</code></td>
 <td><p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>
 </td>
 </tr><tr>
-<td><code>&lt;p&nbsp;<b>*myUnless</b>="myExpression"&gt;...&lt;/p&gt;</code></td>
+<td><code>&lt;p <b>*myUnless</b>="myExpression"&gt;...&lt;/p&gt;</code></td>
 <td><p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:
 <code>&lt;template [myUnless]="myExpression"&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>
 </td>
 </tr><tr>
-<td><code>&lt;p&gt;Card&nbsp;No.:&nbsp;<b>{{cardNumber&nbsp;|&nbsp;myCardNumberFormatter}}</b>&lt;/p&gt;</code></td>
+<td><code>&lt;p&gt;Card No.: <b>{{cardNumber | myCardNumberFormatter}}</b>&lt;/p&gt;</code></td>
 <td><p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>
 </td>
 </tr><tr>
-<td><code>&lt;p&gt;Employer:&nbsp;<b>{{employer?.companyName}}</b>&lt;/p&gt;</code></td>
+<td><code>&lt;p&gt;Employer: <b>{{employer?.companyName}}</b>&lt;/p&gt;</code></td>
 <td><p>The safe navigation operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>
 </td>
 </tr><tr>
-<td><code>&lt;<b>svg:</b>rect&nbsp;x="0"&nbsp;y="0"&nbsp;width="100"&nbsp;height="100"/&gt;</code></td>
+<td><code>&lt;<b>svg:</b>rect x="0" y="0" width="100" height="100"/&gt;</code></td>
 <td><p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p>
 </td>
 </tr><tr>
-<td><code>&lt;<b>svg</b>&gt;<br>&nbsp;&nbsp;&lt;rect&nbsp;x="0"&nbsp;y="0"&nbsp;width="100"&nbsp;height="100"/&gt;<br>&lt;/<b>svg</b>&gt;</code></td>
+<td><code>&lt;<b>svg</b>&gt;<br>  &lt;rect x="0" y="0" width="100" height="100"/&gt;<br>&lt;/<b>svg</b>&gt;</code></td>
 <td><p>An <code>&lt;svg&gt;</code> root element is detected as an SVG element automatically, without the prefix.</p>
 </td>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Built-in directives</th>
 <th><p><code>import { CommonModule } from '@angular/common';</code>
@@ -131,25 +126,25 @@ is available to <code>declarations</code> of this module.</p>
 </th>
 </tr>
 <tr>
-<td><code>&lt;section&nbsp;<b>*ngIf</b>="showSection"&gt;</code></td>
+<td><code>&lt;section <b>*ngIf</b>="showSection"&gt;</code></td>
 <td><p>Removes or recreates a portion of the DOM tree based on the <code>showSection</code> expression.</p>
 </td>
 </tr><tr>
-<td><code>&lt;li&nbsp;<b>*ngFor</b>="let&nbsp;item&nbsp;of&nbsp;list"&gt;</code></td>
+<td><code>&lt;li <b>*ngFor</b>="let item of list"&gt;</code></td>
 <td><p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div&nbsp;<b>[ngSwitch]</b>="conditionExpression"&gt;<br>&nbsp;&nbsp;&lt;template&nbsp;<b>[<b>ngSwitchCase</b>]</b>="case1Exp"&gt;...&lt;/template&gt;<br>&nbsp;&nbsp;&lt;template&nbsp;<b>ngSwitchCase</b>="case2LiteralString"&gt;...&lt;/template&gt;<br>&nbsp;&nbsp;&lt;template&nbsp;<b>ngSwitchDefault</b>&gt;...&lt;/template&gt;<br>&lt;/div&gt;</code></td>
+<td><code>&lt;div <b>[ngSwitch]</b>="conditionExpression"&gt;<br>  &lt;template <b>[<b>ngSwitchCase</b>]</b>="case1Exp"&gt;...&lt;/template&gt;<br>  &lt;template <b>ngSwitchCase</b>="case2LiteralString"&gt;...&lt;/template&gt;<br>  &lt;template <b>ngSwitchDefault</b>&gt;...&lt;/template&gt;<br>&lt;/div&gt;</code></td>
 <td><p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div&nbsp;<b>[ngClass]</b>="{active:&nbsp;isActive,&nbsp;disabled:&nbsp;isDisabled}"&gt;</code></td>
+<td><code>&lt;div <b>[ngClass]</b>="{'active': isActive, 'disabled': isDisabled}"&gt;</code></td>
 <td><p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.</p>
 </td>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Forms</th>
 <th><p><code>import { FormsModule } from '@angular/forms';</code>
@@ -157,13 +152,13 @@ is available to <code>declarations</code> of this module.</p>
 </th>
 </tr>
 <tr>
-<td><code>&lt;input&nbsp;<b>[(ngModel)]</b>="userName"&gt;</code></td>
+<td><code>&lt;input <b>[(ngModel)]</b>="userName"&gt;</code></td>
 <td><p>Provides two-way data-binding, parsing, and validation for form controls.</p>
 </td>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Class decorators</th>
 <th><p><code>import { Directive, ... } from '@angular/core';</code>
@@ -171,26 +166,26 @@ is available to <code>declarations</code> of this module.</p>
 </th>
 </tr>
 <tr>
-<td><code><b>@Component({...})</b><br>class&nbsp;MyComponent()&nbsp;{}</code></td>
+<td><code><b>@Component({...})</b><br>class MyComponent() {}</code></td>
 <td><p>Declares that a class is a component and provides metadata about the component.</p>
 </td>
 </tr><tr>
-<td><code><b>@Directive({...})</b><br>class&nbsp;MyDirective()&nbsp;{}</code></td>
+<td><code><b>@Directive({...})</b><br>class MyDirective() {}</code></td>
 <td><p>Declares that a class is a directive and provides metadata about the directive.</p>
 </td>
 </tr><tr>
-<td><code><b>@Pipe({...})</b><br>class&nbsp;MyPipe()&nbsp;{}</code></td>
+<td><code><b>@Pipe({...})</b><br>class MyPipe() {}</code></td>
 <td><p>Declares that a class is a pipe and provides metadata about the pipe.</p>
 </td>
 </tr><tr>
-<td><code><b>@Injectable()</b><br>class&nbsp;MyService()&nbsp;{}</code></td>
+<td><code><b>@Injectable()</b><br>class MyService() {}</code></td>
 <td><p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
 </p>
 </td>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Directive configuration</th>
 <th><p><code>@Directive({ property1: value1, ... })</code>
@@ -198,19 +193,19 @@ is available to <code>declarations</code> of this module.</p>
 </th>
 </tr>
 <tr>
-<td><code><b>selector:</b>&nbsp;'.cool-button:not(a)'</code></td>
+<td><code><b>selector:</b> '.cool-button:not(a)'</code></td>
 <td><p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,
 <code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>
 <p>Does not support parent-child relationship selectors.</p>
 </td>
 </tr><tr>
-<td><code><b>providers:</b>&nbsp;[MyService,&nbsp;{&nbsp;provide:&nbsp;...&nbsp;}]</code></td>
+<td><code><b>providers:</b> [MyService, { provide: ... }]</code></td>
 <td><p>List of dependency injection providers for this directive and its children.</p>
 </td>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Component configuration</th>
 <th><p>
@@ -219,25 +214,25 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </th>
 </tr>
 <tr>
-<td><code><b>moduleId:</b>&nbsp;module.id</code></td>
+<td><code><b>moduleId:</b> module.id</code></td>
 <td><p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>
 </td>
 </tr><tr>
-<td><code><b>viewProviders:</b>&nbsp;[MyService,&nbsp;{&nbsp;provide:&nbsp;...&nbsp;}]</code></td>
+<td><code><b>viewProviders:</b> [MyService, { provide: ... }]</code></td>
 <td><p>List of dependency injection providers scoped to this component's view.</p>
 </td>
 </tr><tr>
-<td><code><b>template:</b>&nbsp;'Hello&nbsp;{{name}}'<br><b>templateUrl:</b>&nbsp;'my-component.html'</code></td>
+<td><code><b>template:</b> 'Hello {{name}}'<br><b>templateUrl:</b> 'my-component.html'</code></td>
 <td><p>Inline template or external template URL of the component's view.</p>
 </td>
 </tr><tr>
-<td><code><b>styles:</b>&nbsp;['.primary&nbsp;{color:&nbsp;red}']<br><b>styleUrls:</b>&nbsp;['my-component.css']</code></td>
+<td><code><b>styles:</b> ['.primary {color: red}']<br><b>styleUrls:</b> ['my-component.css']</code></td>
 <td><p>List of inline CSS styles or external stylesheet URLs for styling the component’s view.</p>
 </td>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Class field decorators for directives and components</th>
 <th><p><code>import { Input, ... } from '@angular/core';</code>
@@ -245,42 +240,42 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </th>
 </tr>
 <tr>
-<td><code><b>@Input()</b>&nbsp;myProperty;</code></td>
+<td><code><b>@Input()</b> myProperty;</code></td>
 <td><p>Declares an input property that you can update via property binding (example:
 <code>&lt;my-cmp [myProperty]="someExpression"&gt;</code>).</p>
 </td>
 </tr><tr>
-<td><code><b>@Output()</b>&nbsp;myEvent&nbsp;=&nbsp;new&nbsp;EventEmitter();</code></td>
+<td><code><b>@Output()</b> myEvent = new EventEmitter();</code></td>
 <td><p>Declares an output property that fires events that you can subscribe to with an event binding (example: <code>&lt;my-cmp (myEvent)="doSomething()"&gt;</code>).</p>
 </td>
 </tr><tr>
-<td><code><b>@HostBinding('class.valid')</b>&nbsp;isValid;</code></td>
+<td><code><b>@HostBinding('class.valid')</b> isValid;</code></td>
 <td><p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>
 </td>
 </tr><tr>
-<td><code><b>@HostListener('click',&nbsp;['$event'])</b>&nbsp;onClick(e)&nbsp;{...}</code></td>
+<td><code><b>@HostListener('click', ['$event'])</b> onClick(e) {...}</code></td>
 <td><p>Subscribes to a host element event (<code>click</code>) with a directive/component method (<code>onClick</code>), optionally passing an argument (<code>$event</code>).</p>
 </td>
 </tr><tr>
-<td><code><b>@ContentChild(myPredicate)</b>&nbsp;myChildComponent;</code></td>
+<td><code><b>@ContentChild(myPredicate)</b> myChildComponent;</code></td>
 <td><p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>
 </td>
 </tr><tr>
-<td><code><b>@ContentChildren(myPredicate)</b>&nbsp;myChildComponents;</code></td>
+<td><code><b>@ContentChildren(myPredicate)</b> myChildComponents;</code></td>
 <td><p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>
 </td>
 </tr><tr>
-<td><code><b>@ViewChild(myPredicate)</b>&nbsp;myChildComponent;</code></td>
+<td><code><b>@ViewChild(myPredicate)</b> myChildComponent;</code></td>
 <td><p>Binds the first result of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class. Not available for directives.</p>
 </td>
 </tr><tr>
-<td><code><b>@ViewChildren(myPredicate)</b>&nbsp;myChildComponents;</code></td>
+<td><code><b>@ViewChildren(myPredicate)</b> myChildComponents;</code></td>
 <td><p>Binds the results of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class. Not available for directives.</p>
 </td>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Directive and component change detection and lifecycle hooks</th>
 <th><p>(implemented as class methods)
@@ -288,65 +283,65 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </th>
 </tr>
 <tr>
-<td><code><b>constructor(myService:&nbsp;MyService,&nbsp;...)</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
+<td><code><b>constructor(myService: MyService, ...)</b> { ... }</code></td>
 <td><p>Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>
 </td>
 </tr><tr>
-<td><code><b>ngOnChanges(changeRecord)</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
+<td><code><b>ngOnChanges(changeRecord)</b> { ... }</code></td>
 <td><p>Called after every change to input properties and before processing content or child views.</p>
 </td>
 </tr><tr>
-<td><code><b>ngOnInit()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
+<td><code><b>ngOnInit()</b> { ... }</code></td>
 <td><p>Called after the constructor, initializing input properties, and the first call to <code>ngOnChanges</code>.</p>
 </td>
 </tr><tr>
-<td><code><b>ngDoCheck()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
+<td><code><b>ngDoCheck()</b> { ... }</code></td>
 <td><p>Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.</p>
 </td>
 </tr><tr>
-<td><code><b>ngAfterContentInit()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
+<td><code><b>ngAfterContentInit()</b> { ... }</code></td>
 <td><p>Called after <code>ngOnInit</code> when the component's or directive's content has been initialized.</p>
 </td>
 </tr><tr>
-<td><code><b>ngAfterContentChecked()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
+<td><code><b>ngAfterContentChecked()</b> { ... }</code></td>
 <td><p>Called after every check of the component's or directive's content.</p>
 </td>
 </tr><tr>
-<td><code><b>ngAfterViewInit()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
+<td><code><b>ngAfterViewInit()</b> { ... }</code></td>
 <td><p>Called after <code>ngAfterContentInit</code> when the component's view has been initialized. Applies to components only.</p>
 </td>
 </tr><tr>
-<td><code><b>ngAfterViewChecked()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
+<td><code><b>ngAfterViewChecked()</b> { ... }</code></td>
 <td><p>Called after every check of the component's view. Applies to components only.</p>
 </td>
 </tr><tr>
-<td><code><b>ngOnDestroy()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
+<td><code><b>ngOnDestroy()</b> { ... }</code></td>
 <td><p>Called once, before the instance is destroyed.</p>
 </td>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Dependency injection configuration</th>
 <th></th>
 </tr>
 <tr>
-<td><code>{&nbsp;<b>provide</b>:&nbsp;MyService,&nbsp;<b>useClass</b>:&nbsp;MyMockService&nbsp;}</code></td>
+<td><code>{ <b>provide</b>: MyService, <b>useClass</b>: MyMockService }</code></td>
 <td><p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p>
 </td>
 </tr><tr>
-<td><code>{&nbsp;<b>provide</b>:&nbsp;MyService,&nbsp;<b>useFactory</b>:&nbsp;myFactory&nbsp;}</code></td>
+<td><code>{ <b>provide</b>: MyService, <b>useFactory</b>: myFactory }</code></td>
 <td><p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p>
 </td>
 </tr><tr>
-<td><code>{&nbsp;<b>provide</b>:&nbsp;MyValue,&nbsp;<b>useValue</b>:&nbsp;41&nbsp;}</code></td>
+<td><code>{ <b>provide</b>: MyValue, <b>useValue</b>: 41 }</code></td>
 <td><p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p>
 </td>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Routing and navigation</th>
 <th><p><code>import { Routes, RouterModule, ... } from '@angular/router';</code>
@@ -354,42 +349,41 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </th>
 </tr>
 <tr>
-<td><code>const&nbsp;routes:&nbsp;<b>Routes</b>&nbsp;=&nbsp;[<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;'',&nbsp;component:&nbsp;HomeComponent&nbsp;},<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;'path/:routeParam',&nbsp;component:&nbsp;MyComponent&nbsp;},<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;'staticPath',&nbsp;component:&nbsp;...&nbsp;},<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;'**',&nbsp;component:&nbsp;...&nbsp;},<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;'oldPath',&nbsp;redirectTo:&nbsp;'/staticPath'&nbsp;},<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;...,&nbsp;component:&nbsp;...,&nbsp;data:&nbsp;{&nbsp;message:&nbsp;'Custom'&nbsp;}&nbsp;}<br>]);<br><br>const&nbsp;routing&nbsp;=&nbsp;RouterModule.forRoot(routes);</code></td>
+<td><code>const routes: <b>Routes</b> = [<br>  { path: '', component: HomeComponent },<br>  { path: 'path/:routeParam', component: MyComponent },<br>  { path: 'staticPath', component: ... },<br>  { path: '**', component: ... },<br>  { path: 'oldPath', redirectTo: '/staticPath' },<br>  { path: ..., component: ..., data: { message: 'Custom' } }<br>]);<br><br>const routing = RouterModule.forRoot(routes);</code></td>
 <td><p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>
 </td>
 </tr><tr>
-<td><code><br>&lt;<b>router-outlet</b>&gt;&lt;/<b>router-outlet</b>&gt;<br>&lt;<b>router-outlet</b>&nbsp;name="aux"&gt;&lt;/<b>router-outlet</b>&gt;<br></code></td>
+<td><code><br>&lt;<b>router-outlet</b>&gt;&lt;/<b>router-outlet</b>&gt;<br>&lt;<b>router-outlet</b> name="aux"&gt;&lt;/<b>router-outlet</b>&gt;<br></code></td>
 <td><p>Marks the location to load the component of the active route.</p>
 </td>
 </tr><tr>
-<td><code><br>&lt;a&nbsp;routerLink="/path"&gt;<br>&lt;a&nbsp;<b>[routerLink]</b>="[&nbsp;'/path',&nbsp;routeParam&nbsp;]"&gt;<br>&lt;a&nbsp;<b>[routerLink]</b>="[&nbsp;'/path',&nbsp;{&nbsp;matrixParam:&nbsp;'value'&nbsp;}&nbsp;]"&gt;<br>&lt;a&nbsp;<b>[routerLink]</b>="[&nbsp;'/path'&nbsp;]"&nbsp;[queryParams]="{&nbsp;page:&nbsp;1&nbsp;}"&gt;<br>&lt;a&nbsp;<b>[routerLink]</b>="[&nbsp;'/path'&nbsp;]"&nbsp;fragment="anchor"&gt;<br></code></td>
+<td><code><br>&lt;a routerLink="/path"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path', routeParam ]"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path', { matrixParam: 'value' } ]"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path' ]" [queryParams]="{ page: 1 }"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path' ]" fragment="anchor"&gt;<br></code></td>
 <td><p>Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p>
 </td>
 </tr><tr>
-<td><code>&lt;a&nbsp;[routerLink]="[&nbsp;'/path'&nbsp;]"&nbsp;routerLinkActive="active"&gt;</code></td>
+<td><code>&lt;a [routerLink]="[ '/path' ]" routerLinkActive="active"&gt;</code></td>
 <td><p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p>
 </td>
 </tr><tr>
-<td><code>class&nbsp;<b>CanActivate</b>Guard&nbsp;implements&nbsp;<b>CanActivate</b>&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;canActivate(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;route:&nbsp;ActivatedRouteSnapshot,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state:&nbsp;RouterStateSnapshot<br>&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean&nbsp;{&nbsp;...&nbsp;}<br>}<br><br>{&nbsp;path:&nbsp;...,&nbsp;canActivate:&nbsp;[<b>CanActivate</b>Guard]&nbsp;}</code></td>
+<td><code>class <b>CanActivate</b>Guard implements <b>CanActivate</b> {<br>    canActivate(<br>      route: ActivatedRouteSnapshot,<br>      state: RouterStateSnapshot<br>    ): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean { ... }<br>}<br><br>{ path: ..., canActivate: [<b>CanActivate</b>Guard] }</code></td>
 <td><p>An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
 </td>
 </tr><tr>
-<td><code>class&nbsp;<b>CanDeactivate</b>Guard&nbsp;implements&nbsp;<b>CanDeactivate</b>&lt;T&gt;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;canDeactivate(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;component:&nbsp;T,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;route:&nbsp;ActivatedRouteSnapshot,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state:&nbsp;RouterStateSnapshot<br>&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean&nbsp;{&nbsp;...&nbsp;}<br>}<br><br>{&nbsp;path:&nbsp;...,&nbsp;canDeactivate:&nbsp;[<b>CanDeactivate</b>Guard]&nbsp;}</code></td>
+<td><code>class <b>CanDeactivate</b>Guard implements <b>CanDeactivate</b>&lt;T&gt; {<br>    canDeactivate(<br>      component: T,<br>      route: ActivatedRouteSnapshot,<br>      state: RouterStateSnapshot<br>    ): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean { ... }<br>}<br><br>{ path: ..., canDeactivate: [<b>CanDeactivate</b>Guard] }</code></td>
 <td><p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
 </td>
 </tr><tr>
-<td><code>class&nbsp;<b>CanActivateChild</b>Guard&nbsp;implements&nbsp;<b>CanActivateChild</b>&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;canActivateChild(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;route:&nbsp;ActivatedRouteSnapshot,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state:&nbsp;RouterStateSnapshot<br>&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean&nbsp;{&nbsp;...&nbsp;}<br>}<br><br>{&nbsp;path:&nbsp;...,&nbsp;canActivateChild:&nbsp;[CanActivateGuard],<br>&nbsp;&nbsp;&nbsp;&nbsp;children:&nbsp;...&nbsp;}</code></td>
+<td><code>class <b>CanActivateChild</b>Guard implements <b>CanActivateChild</b> {<br>    canActivateChild(<br>      route: ActivatedRouteSnapshot,<br>      state: RouterStateSnapshot<br>    ): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean { ... }<br>}<br><br>{ path: ..., canActivateChild: [CanActivateGuard],<br>    children: ... }</code></td>
 <td><p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
 </td>
 </tr><tr>
-<td><code>class&nbsp;<b>Resolve</b>Guard&nbsp;implements&nbsp;<b>Resolve</b>&lt;T&gt;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;resolve(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;route:&nbsp;ActivatedRouteSnapshot,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state:&nbsp;RouterStateSnapshot<br>&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;Observable&lt;any&gt;|Promise&lt;any&gt;|any&nbsp;{&nbsp;...&nbsp;}<br>}<br><br>{&nbsp;path:&nbsp;...,&nbsp;resolve:&nbsp;[<b>Resolve</b>Guard]&nbsp;}</code></td>
+<td><code>class <b>Resolve</b>Guard implements <b>Resolve</b>&lt;T&gt; {<br>    resolve(<br>      route: ActivatedRouteSnapshot,<br>      state: RouterStateSnapshot<br>    ): Observable&lt;any&gt;|Promise&lt;any&gt;|any { ... }<br>}<br><br>{ path: ..., resolve: [<b>Resolve</b>Guard] }</code></td>
 <td><p>An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.</p>
 </td>
 </tr><tr>
-<td><code>class&nbsp;<b>CanLoad</b>Guard&nbsp;implements&nbsp;<b>CanLoad</b>&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;canLoad(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;route:&nbsp;Route<br>&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean&nbsp;{&nbsp;...&nbsp;}<br>}<br><br>{&nbsp;path:&nbsp;...,&nbsp;canLoad:&nbsp;[<b>CanLoad</b>Guard],&nbsp;loadChildren:&nbsp;...&nbsp;}</code></td>
+<td><code>class <b>CanLoad</b>Guard implements <b>CanLoad</b> {<br>    canLoad(<br>      route: Route<br>    ): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean { ... }<br>}<br><br>{ path: ..., canLoad: [<b>CanLoad</b>Guard], loadChildren: ... }</code></td>
 <td><p>An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
 </td>
 </tr>
 </tbody></table>
-
-</div>
\ No newline at end of file
+</div>
diff --git a/aio/content/guide/cli-quickstart.md b/aio/content/guide/cli-quickstart.md
deleted file mode 100644
index 1a08b7ea72..0000000000
--- a/aio/content/guide/cli-quickstart.md
+++ /dev/null
@@ -1,1055 +0,0 @@
-@description
-
-
-Good tools make application development quicker and easier to maintain than
-if you did everything by hand.
-
-好的工具能让开发更加简单快捷。
-
-The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool
-that can create a project, add files, and perform a variety of ongoing development tasks such 
-as testing, bundling, and deployment.
-
-[**Angular CLI**](https://cli.angular.io/)是一个**命令行界面**工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。
-
-The goal in this guide is to build and run a simple Angular 
-application in TypeScript, using the Angular CLI 
-while adhering to the [Style Guide](guide/guide/style-guide) recommendations that
-benefit _every_ Angular project.
-
-在这一章CLI快速起步中，我们的目标是构建并运行一个超级简单的Angular应用。我们会使用Angular-CLI来让每个Angular应用从[风格指南](guide/guide/style-guide)中获益。
-
-By the end of the chapter, you'll have a basic understanding of development with the CLI
-and a foundation for both these documentation samples and for real world applications.
-
-在本章的末尾，我们会通过CLI对开发过程有一个最基本的理解，并将其作为其它文档范例以及真实应用的基础。
-
-You'll pursue these ends in the following high-level steps:
-
-我们通过下列三大步来达到目的：
-
-1. [Set up](guide/cli-quickstart#devenv) the development environment.
-
-    [设置](guide/cli-quickstart#devenv)开发环境。
-
-2. [Create](guide/cli-quickstart#create-proj) a new project and skeleton application.
-
-    [创建](guide/cli-quickstart#create-proj)新项目以及应用的骨架。
-
-3. [Serve](guide/cli-quickstart#serve) the application.
-
-    启动[开发服务器](guide/cli-quickstart#serve)。
-
-4. [Edit](guide/cli-quickstart#first-component) the application.
-
-    [编辑](guide/cli-quickstart#first-component)该应用。
-
-And you can also <a href="/resources/zips/cli-quickstart/cli-quickstart.zip">download the example.</a>
-
-你还可以<a href="/resources/zips/cli-quickstart/cli-quickstart.zip">下载这个例子</a>。
-
-
-
-<h2 id='devenv'>
-  Step 1. Set up the Development Environment
-</h2>
-
-
-
-<h2 id='devenv'>
-  步骤1. 设置开发环境
-</h2>
-
-
-
-You need to set up your development environment before you can do anything.
-
-在开始工作之前，我们必须设置好开发环境。
- 
-Install **[Node.js® and npm](https://nodejs.org/en/download/)**
-if they are not already on your machine.
-
-如果你的机器上还没有**[Node.js®和npm](https://nodejs.org/en/download/)**，请先安装它们。
-
-
-<div class="l-sub-section">
-
-
-
-**Verify that you are running at least node `6.9.x` and npm `3.x.x`**
-by running `node -v` and `npm -v` in a terminal/console window.
-Older versions produce errors, but newer versions are fine.
-
-请先在终端/控制台窗口中运行命令 `node -v` 和 `npm -v`，
-**来验证一下你正在运行 node `6.9.x` 和 npm `3.x.x` 以上的版本。**
-更老的版本可能会出现错误，更新的版本则没问题。
-
-
-</div>
-
-
-
-Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally.
-
-然后全局安装 **[Angular CLI](https://github.com/angular/angular-cli)** 。
-
-
-<code-example language="sh" class="code-shell">
-  npm install -g @angular/cli
-
-</code-example>
-
-
-
-
-<h2 id='create-proj'>
-  Step 2. Create a new project
-</h2>
-
-
-
-<h2 id='create-proj'>
-  步骤2. 创建新项目
-</h2>
-
-
-
-Open a terminal window.
-
-打开终端窗口。
-
-
-Generate a new project and skeleton application by running the following commands:
-
-运行下列命令来生成一个新项目以及应用的骨架代码：
-
-
-<code-example language="sh" class="code-shell">
-  ng new my-app
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-Patience please.
-It takes time to set up a new project, most of it spent installing npm packages.
-
-请耐心等待。
-创建新项目需要花费很多时间，大多数时候都是在安装那些npm包。
-
-
-</div>
-
-
-
-
-<h2 id='serve'>
- 
-  <p>
-    Step 3: Serve the application
-  </p>
-
-  <p>
-    步骤3. 启动开发服务器
-  </p>
-
-</h2>
-
-
-
-Go to the project directory and launch the server.
-
-进入项目目录，并启动服务器。
-
-
-<code-example language="sh" class="code-shell">
-  cd my-app
-  ng serve --open
-
-</code-example>
-
-
-
-The `ng serve` command launches the server, watches your files,
-and rebuilds the app as you make changes to those files.
-
-`ng serve`命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。
-
-Using the `--open` (or just `-o`) option will automatically open your browser
-on `http://localhost:4200/`.
-
-使用`--open`（或`-o`）参数可以自动打开浏览器并访问`http://localhost:4200/`。
-
-Your app greets you with a message:
-
-本应用会用一条消息来跟你打招呼：
-
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/cli-quickstart/app-works.png' alt="The app works!"></img>
-</figure>
-
-
-
-
-<h2 id='first-component'>
-  Step 4: Edit your first Angular component
-</h2>
-
-
-
-<h2 id='first-component'>
-  步骤4. 编辑我们的第一个Angular组件
-</h2>
-
-
-
-The CLI created the first Angular component for you.
-This is the _root component_ and it is named `app-root`.
-You can find it in `./src/app/app.component.ts`.
-
-这个CLI为我们创建了第一个Angular组件。
-它就是名叫`app-root`的*根组件*。
-你可以在`./src/app/app.component.ts`目录下找到它。
-
-
-Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
-
-打开这个组件文件，并且把`title`属性从 _app works!_ 改为 _My First Angular App_ ：
-
-
-<code-example path="cli-quickstart/src/app/app.component.ts" region="title" title="src/app/app.component.ts" linenums="false">
-
-</code-example>
-
-
-
-The browser reloads automatically with the revised title. That's nice, but it could look better.
-
-浏览器会自动刷新，而我们会看到修改之后的标题。不错，不过它还可以更好看一点。
-
-Open `src/app/app.component.css` and give the component some style.
-
-打开 `src/app/app.component.css` 并给这个组件设置一些样式
-
-
-<code-example path="cli-quickstart/src/app/app.component.css" title="src/app/app.component.css" linenums="false">
-
-</code-example>
-
-
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app"></img>
-</figure>
-
-
-
-Looking good!
-
-漂亮！
-
-
-
-## What's next?
-
-## 接下来呢？
-
-That's about all you'd expect to do in a "Hello, World" app.
-
-如你所愿，我们完成了这个“Hello, World”应用。
-
-You're ready to take the [Tour of Heroes Tutorial](guide/tutorial) and build
-a small application that demonstrates the great things you can build with Angular.
-
-现在，你可以开始[英雄指南](guide/tutorial)教程，通过构建一个小型应用来学习如何用Angular构建各种大型应用了。
-
-Or you can stick around a bit longer to learn about the files in your brand new project.
-
-或者，你也可以稍等一会儿，学学在这个新项目中的文件都是干什么用的。
-
-
-
-## Project file review
-
-## 项目文件概览
-
-An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
-
-Angular CLI项目是做快速试验和开发企业解决方案的基础。
-
-The first file you should check out is `README.md`.
-It has some basic information on how to use CLI commands.
-Whenever you want to know more about how Angular CLI works make sure to visit
-[the Angular CLI repository](https://github.com/angular/angular-cli) and
-[Wiki](https://github.com/angular/angular-cli/wiki).
-
-你首先要看的文件是`README.md`。
-它提供了一些如何使用CLI命令的基础信息。
-如果你想了解 Angular CLI 的工作原理，请访问 [Angular CLI 的仓库](https://github.com/angular/angular-cli)及其 
-  [Wiki](https://github.com/angular/angular-cli/wiki)。
-
-Some of the generated files might be unfamiliar to you. 
-
-有些生成的文件你可能觉得陌生。接下来我们就讲讲它们。
-
-
-
-### The `src` folder
-
-### `src`文件夹
-
-Your app lives in the `src` folder.
-All Angular components, templates, styles, images, and anything else your app needs go here.
-Any files outside of this folder are meant to support building your app.
-
-你的应用代码位于`src`文件夹中。
-所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。
-这个文件夹之外的文件都是为构建应用提供支持用的。
-
-
-<div class='filetree'>
-
-  <div class='file'>
-    src
-  </div>
-
-  <div class='children'>
-
-    <div class='file'>
-      app
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        app.component.css
-      </div>
-
-      <div class='file'>
-        app.component.html
-      </div>
-
-      <div class='file'>
-        app.component.spec.ts
-      </div>
-
-      <div class='file'>
-        app.component.ts
-      </div>
-
-      <div class='file'>
-        app.module.ts
-      </div>
-
-    </div>
-
-    <div class='file'>
-      assets
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        .gitkeep
-      </div>
-
-    </div>
-
-    <div class='file'>
-      environments
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        environment.prod.ts
-      </div>
-
-      <div class='file'>
-        environment.ts
-      </div>
-
-    </div>
-
-    <div class='file'>
-      favicon.ico
-    </div>
-
-    <div class='file'>
-      index.html
-    </div>
-
-    <div class='file'>
-      main.ts
-    </div>
-
-    <div class='file'>
-      polyfills.ts
-    </div>
-
-    <div class='file'>
-      styles.css
-    </div>
-
-    <div class='file'>
-      test.ts
-    </div>
-
-    <div class='file'>
-      tsconfig.app.json
-    </div>
-
-    <div class='file'>
-      tsconfig.spec.json
-    </div>
-
-  </div>
-
-</div>
-
-
-
-<style>
-  td, th {vertical-align: top}
-</style>
-
-
-
-<table width="100%">
-
-  <col width="20%">
-
-  </col>
-
-  <col width="80%">
-
-  </col>
-
-  <tr>
-
-    <th>
- 
-      <p>
-        File
-      </p>
-
-      <p>
-        文件
-      </p>
-
-    </th>
-
-    <th>
- 
-      <p>
-        Purpose
-      </p>
-
-      <p>
-        用途
-      </p>
-
-    </th>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>app/app.component.{ts,html,css,spec.ts}</code>
-    </td>
-
-    <td>
-
-
-      Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test.
-      It is the **root** component of what will become a tree of nested components
-      as the application evolves. 
-
-      使用HTML模板、CSS样式和单元测试定义`AppComponent`组件。
-      它是**根**组件，随着应用的成长它会成为一棵组件树的根节点。
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>app/app.module.ts</code>
-    </td>
-
-    <td>
-
-
-      Defines `AppModule`, the [root module](guide/guide/appmodule "AppModule: the root module") 
-      that tells Angular how to assemble the application.
-      Right now it declares only the `AppComponent`. 
-      Soon there will be more components to declare. 
-
-      定义`AppModule`，这个[根模块](guide/guide/appmodule "AppModule: 根模块")会告诉Angular如何组装该应用。
-      目前，它只声明了`AppComponent`。
-      稍后它还会声明更多组件。
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>assets/*</code>
-    </td>
-
-    <td>
-
-
-      A folder where you can put images and anything else to be copied wholesale
-      when you build your application.
-
-      这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>environments/*</code>
-    </td>
-
-    <td>
-
-
-      This folder contains one file for each of your destination environments,
-      each exporting simple configuration variables to use in your application.
-      The files are replaced on-the-fly when you build your app.
-      You might use a different API endpoint for development than you do for production
-      or maybe different analytics tokens.
-      You might even use some mock services.
-      Either way, the CLI has you covered.
-
-      这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。
-      这些文件会在构建应用时被替换。
-      比如你可能在产品环境中使用不同的API端点地址，或使用不同的统计Token参数。
-      甚至使用一些模拟服务。
-      所有这些，CLI都替你考虑到了。
-
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>favicon.ico</code>
-    </td>
-
-    <td>
-
-
-      Every site wants to look good on the bookmark bar.
-      Get started with your very own Angular icon.
-
-      每个网站都希望自己在书签栏中能好看一点。
-      请把它换成你自己的图标。
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>index.html</code>
-    </td>
-
-    <td>
-
-
-      The main HTML page that is served when someone visits your site.
-      Most of the time you'll never need to edit it.
-      The CLI automatically adds all `js` and `css` files when building your app so you
-      never need to add any `&lt;script&gt;` or `&lt;link&gt;` tags here manually.
-
-      这是别人访问你的网站是看到的主页面的HTML文件。
-      大多数情况下你都不用编辑它。
-      在构建应用时，CLI会自动把所有`js`和`css`文件添加进去，所以你不必在这里手动添加任何 `<script>` 或 `<link>` 标签。
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>main.ts</code>
-    </td>
-
-    <td>
-
-
-      The main entry point for your app.
-      Compiles the application with the [JIT compiler](guide/glossary#jit)
-      and bootstraps the application's root module (`AppModule`) to run in the browser.
-      You can also use the [AOT compiler](guide/glossary#ahead-of-time-aot-compilation)
-      without changing any code by passing in `--aot` to `ng build` or `ng serve`.
-
-      这是应用的主要入口点。
-      使用[JIT compiler](guide/glossary#jit)编译器编译本应用，并[启动应用的根模块`AppModule`](guide/guide/appmodule#main "启动应用")，使其运行在浏览器中。
-      你还可以使用[AOT compiler](guide/glossary#ahead-of-time-aot-compilation)编译器，而不用修改任何代码 —— 只要给`ng build` 或 `ng serve` 传入 `--aot` 参数就可以了。
-
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>polyfills.ts</code>
-    </td>
-
-    <td>
-
-
-      Different browsers have different levels of support of the web standards.
-      Polyfills help normalize those differences.
-      You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
-      the [Browser Support guide](guide/guide/browser-support) for more information.
-
-      不同的浏览器对Web标准的支持程度也不同。
-      填充库（polyfill）能帮我们把这些不同点进行标准化。
-      你只要使用`core-js` 和 `zone.js`通常就够了，不过你也可以查看[浏览器支持指南](guide/guide/browser-support)以了解更多信息。
-
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>styles.css</code>
-    </td>
-
-    <td>
-
-
-      Your global styles go here.
-      Most of the time you'll want to have local styles in your components for easier maintenance,
-      but styles that affect all of your app need to be in a central place.
-
-      这里是你的全局样式。
-      大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。
-
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>test.ts</code>
-    </td>
-
-    <td>
-
-
-      This is the main entry point for your unit tests.
-      It has some custom configuration that might be unfamiliar, but it's not something you'll
-      need to edit.
-
-      这是单元测试的主要入口点。
-      它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
-
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>tsconfig.{app|spec}.json</code>
-    </td>
-
-    <td>
-
-
-      TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
-      and for the unit tests (`tsconfig.spec.json`).
-
-      TypeScript编译器的配置文件。`tsconfig.app.json`是为Angular应用准备的，而`tsconfig.spec.json`是为单元测试准备的。
-
-    </td>
-
-  </tr>
-
-</table>
-
-
-
-
-### The root folder
-
-### 根目录
-
-The `src/` folder is just one of the items inside the project's root folder.
-Other files help you build, test, maintain, document, and deploy the app.
-These files go in the root folder next to `src/`.
-
-`src/`文件夹是项目的根文件夹之一。
-其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和`src/`平级。
-
-
-
-<div class='filetree'>
-
-  <div class='file'>
-    my-app
-  </div>
-
-  <div class='children'>
-
-    <div class='file'>
-      e2e
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        app.e2e-spec.ts
-      </div>
-
-      <div class='file'>
-        app.po.ts
-      </div>
-
-      <div class='file'>
-        tsconfig.e2e.json
-      </div>
-
-    </div>
-
-    <div class='file'>
-      node_modules/...
-    </div>
-
-    <div class='file'>
-      src/...
-    </div>
-
-    <div class='file'>
-      .angular-cli.json
-    </div>
-
-    <div class='file'>
-      .editorconfig
-    </div>
-
-    <div class='file'>
-      .gitignore
-    </div>
-
-    <div class='file'>
-      karma.conf.js
-    </div>
-
-    <div class='file'>
-      package.json
-    </div>
-
-    <div class='file'>
-      protractor.conf.js
-    </div>
-
-    <div class='file'>
-      README.md
-    </div>
-
-    <div class='file'>
-      tsconfig.json
-    </div>
-
-    <div class='file'>
-      tslint.json
-    </div>
-
-  </div>
-
-</div>
-
-
-
-<style>
-  td, th {vertical-align: top}
-</style>
-
-
-
-<table width="100%">
-
-  <col width="20%">
-
-  </col>
-
-  <col width="80%">
-
-  </col>
-
-  <tr>
-
-    <th>
- 
-      <p>
-        File
-      </p>
-
-      <p>
-        文件
-      </p>
-
-    </th>
-
-    <th>
- 
-      <p>
-        Purpose
-      </p>
-
-      <p>
-        用途
-      </p>
-
-    </th>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>e2e/</code>
-    </td>
-
-    <td>
-
-
-      Inside `e2e/` live the End-to-End tests.
-      They shouldn't be inside `src/` because e2e tests are really a separate app that
-      just so happens to test your main app.
-      That's also why they have their own `tsconfig.e2e.json`.
-
-      在`e2e/`下是端到端（End-to-End）测试。
-      它们不在`src/`下，是因为端到端测试实际上和应用是相互独立的，它只适用于测试你的应用而已。
-      这也就是为什么它会拥有自己的`tsconfig.json`。
-
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>node_modules/</code>
-    </td>
-
-    <td>
-
-
-      `Node.js` creates this folder and puts all third party modules listed in
-      `package.json` inside of it.
-
-      `Node.js`创建了这个文件夹，并且把`package.json`中列举的所有第三方模块都放在其中。
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>.angular-cli.json</code>
-    </td>
-
-    <td>
-
-
-      Configuration for Angular CLI.
-      In this file you can set several defaults and also configure what files are included
-      when your project is build.
-      Check out the official documentation if you want to know more.
-
-      Angular CLI的配置文件。
-      在这个文件中，我们可以设置一系列默认值，还可以配置项目编译时要包含的那些文件。
-      要了解更多，请参阅它的官方文档。
-
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>.editorconfig</code>
-    </td>
-
-    <td>
-
-
-      Simple configuration for your editor to make sure everyone that uses your project
-      has the same basic configuration.
-      Most editors support an `.editorconfig` file.
-      See http://editorconfig.org for more information.
-
-      给你的编辑器看的一个简单配置文件，它用来确保参与你项目的每个人都具有基本的编辑器配置。
-      大多数的编辑器都支持`.editorconfig`文件，详情参见 http://editorconfig.org 。
-
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>.gitignore</code>
-    </td>
-
-    <td>
-
-
-      Git configuration to make sure autogenerated files are not commited to source control.
-
-      一个Git的配置文件，用来确保某些自动生成的文件不会被提交到源码控制系统中。
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>karma.conf.js</code>
-    </td>
-
-    <td>
-
-
-      Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
-      used when running `ng test`.
-
-      给[Karma](https://karma-runner.github.io)的单元测试配置，当运行`ng test`时会用到它。
-
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>package.json</code>
-    </td>
-
-    <td>
-
-
-      `npm` configuration listing the third party packages your project uses.
-      You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
-
-      `npm`配置文件，其中列出了项目使用到的第三方依赖包。
-      你还可以在这里添加自己的[自定义脚本](https://docs.npmjs.com/misc/scripts)。
-
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>protractor.conf.js</code>
-    </td>
-
-    <td>
-
-
-      End-to-end test configuration for [Protractor](http://www.protractortest.org/),
-      used when running `ng e2e`.
-
-      给[Protractor](http://www.protractortest.org/)使用的端到端测试配置文件，当运行`ng e2e`的时候会用到它。
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>README.md</code>
-    </td>
-
-    <td>
-
-
-      Basic documentation for your project, pre-filled with CLI command information.
-      Make sure to enhance it with project documentation so that anyone
-      checking out the repo can build your app!
-
-      项目的基础文档，预先写入了CLI命令的信息。
-      别忘了用项目文档改进它，以便每个查看此仓库的人都能据此构建出你的应用。
-
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>tsconfig.json</code>
-    </td>
-
-    <td>
-
-
-      TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
-
-      TypeScript编译器的配置，你的IDE会借助它来给你提供更好的帮助。
-    </td>
-
-  </tr>
-
-  <tr>
-
-    <td>
-      <code>tslint.json</code>
-    </td>
-
-    <td>
-
-
-      Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
-      [Codelyzer](http://codelyzer.com/), used when running `ng lint`.
-      Linting helps keep your code style consistent.
-
-      给[TSLint](https://palantir.github.io/tslint/)和[Codelyzer](http://codelyzer.com/)用的配置信息，当运行`ng lint`时会用到。
-      Lint功能可以帮你保持代码风格的统一。
-
-    </td>
-
-  </tr>
-
-</table>
-
-
-
-<div class="l-sub-section">
-
-
-
-### Next Step
-
-### 下一步
-
-If you're new to Angular, continue on the
-[learning path](guide/guide/learning-angular "Angular learning path").
-You can skip the "Setup" step since you're already using the Angular CLI setup.
-
-如果你刚刚开始使用Angular，我们建议你遵循这个[学习路径](guide/guide/learning-angular "Angular 学习路径")。
-你可以跳过“环境设置”一章，因为你已经在使用 Angular-CLI 设置好环境了。
-
-</div>
-
diff --git a/aio/content/guide/component-communication.md b/aio/content/guide/component-interaction.md
similarity index 78%
rename from aio/content/guide/component-communication.md
rename to aio/content/guide/component-interaction.md
index 1574f12a07..b8126236c3 100644
--- a/aio/content/guide/component-communication.md
+++ b/aio/content/guide/component-interaction.md
@@ -1,10 +1,7 @@
-@title
-组件通讯
+# Component Interaction
 
-@intro
-在不同的指令和组件之间共享信息
+# 组件之间的交互
 
-@description
 {@a top}
 
 This cookbook contains recipes for common component communication scenarios
@@ -27,33 +24,35 @@ samples in the [Component Communication]() document.
 
 {@a toc}
 
+<!--
+
 # Contents
 
 # 目录
 
-* [Pass data from parent to child with input binding](guide/component-communication#parent-to-child)
+* [Pass data from parent to child with input binding](guide/component-interaction#parent-to-child)
 
   [使用输入绑定把数据从父组件传给子组件](guide/component-communication#parent-to-child)
   
-* [Intercept input property changes with a setter](guide/component-communication#parent-to-child-setter)
+* [Intercept input property changes with a setter](guide/component-interaction#parent-to-child-setter)
 
   [使用赋值器（setter）拦截输入属性的变化](guide/component-communication#parent-to-child-setter)
   
-* [Intercept input property changes with `ngOnChanges()`](guide/component-communication#parent-to-child-on-changes)
+* [Intercept input property changes with `ngOnChanges()`](guide/component-interaction#parent-to-child-on-changes)
   
   [使用`ngOnChanges()`拦截输入属性的变化](guide/component-communication#parent-to-child-on-changes)
 
-* [Parent calls an `@ViewChild()`](guide/component-communication#parent-to-view-child)
+* [Parent calls an `@ViewChild()`](guide/component-interaction#parent-to-view-child)
 
   [在父组件中调用`@ViewChild()`](guide/component-communication#parent-to-view-child)
   
-* [Parent and children communicate via a service](guide/component-communication#bidirectional-service)
+* [Parent and children communicate via a service](guide/component-interaction#bidirectional-service)
 
   [通过服务进行父子通讯](guide/component-communication#bidirectional-service)
 
+-->
 
-
-**See the <live-example name="cb-component-communication"></live-example>**.
+**See the <live-example name="component-interaction"></live-example>**.
 
 **参见<live-example name="cb-component-communication"></live-example>**。
 
@@ -69,7 +68,7 @@ typically adorned with [@Input decorations](guide/template-syntax#inputs-outputs
 `HeroChildComponent` 有两个***输入型属性***，它们通常带[@Input装饰器](guide/template-syntax#inputs-outputs)。
 
 
-<code-example path="cb-component-communication/src/app/hero-child.component.ts" title="cb-component-communication/src/app/hero-child.component.ts">
+<code-example path="component-interaction/src/app/hero-child.component.ts" title="component-interaction/src/app/hero-child.component.ts">
 
 </code-example>
 
@@ -85,7 +84,7 @@ binding its `master` string property to the child's `master` alias, and each ite
 父组件`HeroParentComponent`把子组件的`HeroChildComponent`放到`*ngFor`循环器中，把自己的`master`字符串属性绑定到子组件的`master`别名上，并把每个循环的`hero`实例绑定到子组件的`hero`属性。
 
 
-<code-example path="cb-component-communication/src/app/hero-parent.component.ts" title="cb-component-communication/src/app/hero-parent.component.ts">
+<code-example path="component-interaction/src/app/hero-parent.component.ts" title="component-interaction/src/app/hero-parent.component.ts">
 
 </code-example>
 
@@ -96,13 +95,13 @@ The running application displays three heroes:
 运行应用程序会显示三个英雄：
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/parent-to-child.png" alt="Parent-to-child"></img>
+<figure>
+  <img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
 </figure>
 
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 ### 测试
 
@@ -111,13 +110,13 @@ E2E test that all children were instantiated and displayed as expected:
 端到端测试，用于确保所有的子组件都像所期待的那样被初始化并显示出来。
 
 
-<code-example path="cb-component-communication/e2e-spec.ts" region="parent-to-child" title="cb-component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="parent-to-child" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 [回到顶部](guide/component-communication#top)
 
@@ -137,7 +136,7 @@ trims the whitespace from a name and replaces an empty value with default text.
 子组件`NameChildComponent`的输入属性`name`上的这个setter，会trim掉名字里的空格，并把空值替换成默认字符串。
 
 
-<code-example path="cb-component-communication/src/app/name-child.component.ts" title="cb-component-communication/src/app/name-child.component.ts">
+<code-example path="component-interaction/src/app/name-child.component.ts" title="component-interaction/src/app/name-child.component.ts">
 
 </code-example>
 
@@ -148,19 +147,19 @@ Here's the `NameParentComponent` demonstrating name variations including a name
 下面的`NameParentComponent`展示了各种名字的处理方式，包括一个全是空格的名字。
 
 
-<code-example path="cb-component-communication/src/app/name-parent.component.ts" title="cb-component-communication/src/app/name-parent.component.ts">
+<code-example path="component-interaction/src/app/name-parent.component.ts" title="component-interaction/src/app/name-parent.component.ts">
 
 </code-example>
 
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/setter.png" alt="Parent-to-child-setter"></img>
+<figure>
+  <img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
 </figure>
 
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 ### 测试
 
@@ -169,13 +168,13 @@ E2E tests of input property setter with empty and non-empty names:
 端到端测试：输入属性的setter，分别使用空名字和非空名字。
 
 
-<code-example path="cb-component-communication/e2e-spec.ts" region="parent-to-child-setter" title="cb-component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="parent-to-child-setter" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 [回到顶部](guide/component-communication#top)
 
@@ -212,7 +211,7 @@ This `VersionChildComponent` detects changes to the `major` and `minor` input pr
 这个`VersionChildComponent`会监测输入属性`major`和`minor`的变化，并把这些变化编写成日志以报告这些变化。
 
 
-<code-example path="cb-component-communication/src/app/version-child.component.ts" title="cb-component-communication/src/app/version-child.component.ts">
+<code-example path="component-interaction/src/app/version-child.component.ts" title="component-interaction/src/app/version-child.component.ts">
 
 </code-example>
 
@@ -223,7 +222,7 @@ The `VersionParentComponent` supplies the `minor` and `major` values and binds b
 `VersionParentComponent`提供`minor`和`major`值，把修改它们值的方法绑定到按钮上。
 
 
-<code-example path="cb-component-communication/src/app/version-parent.component.ts" title="cb-component-communication/src/app/version-parent.component.ts">
+<code-example path="component-interaction/src/app/version-parent.component.ts" title="component-interaction/src/app/version-parent.component.ts">
 
 </code-example>
 
@@ -234,13 +233,13 @@ Here's the output of a button-pushing sequence:
 下面是点击按钮的结果。
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges"></img>
+<figure>
+  <img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
 </figure>
 
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 ### 测试
 
@@ -250,13 +249,13 @@ the expected `ngOnChanges` calls and values:
 测试确保***这两个***输入属性值都被初始化了，当点击按钮后，`ngOnChanges`应该被调用，属性的值也符合预期。
 
 
-<code-example path="cb-component-communication/e2e-spec.ts" region="parent-to-child-onchanges" title="cb-component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="parent-to-child-onchanges" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 [回到顶部](guide/component-communication#top)
 
@@ -278,7 +277,7 @@ The child's `EventEmitter` property is an ***output property***,
 子组件的`EventEmitter`属性是一个**输出属性**，通常带有[@Output装饰器](guide/template-syntax#inputs-outputs)，就像在`VoterComponent`中看到的。
 
 
-<code-example path="cb-component-communication/src/app/voter.component.ts" title="cb-component-communication/src/app/voter.component.ts">
+<code-example path="component-interaction/src/app/voter.component.ts" title="component-interaction/src/app/voter.component.ts">
 
 </code-example>
 
@@ -294,7 +293,7 @@ payload `$event` and updates a counter.
 父组件`VoteTakerComponent`绑定了一个事件处理器(`onVoted()`)，用来响应子组件的事件(`$event`)并更新一个计数器。
 
 
-<code-example path="cb-component-communication/src/app/votetaker.component.ts" title="cb-component-communication/src/app/votetaker.component.ts">
+<code-example path="component-interaction/src/app/votetaker.component.ts" title="component-interaction/src/app/votetaker.component.ts">
 
 </code-example>
 
@@ -306,13 +305,13 @@ and the method processes it:
 框架(Angular)把事件参数(用`$event`表示)传给事件处理方法，这个方法会处理：
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/child-to-parent.gif" alt="Child-to-parent"></img>
+<figure>
+  <img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
 </figure>
 
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 ### 测试
 
@@ -321,13 +320,13 @@ Test that clicking the *Agree* and *Disagree* buttons update the appropriate cou
 测试确保点击*Agree*和*Disagree*按钮时，计数器被正确更新。
 
 
-<code-example path="cb-component-communication/e2e-spec.ts" region="child-to-parent" title="cb-component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="child-to-parent" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 [回到顶部](guide/component-communication#top)
 
@@ -351,7 +350,7 @@ The following is a child `CountdownTimerComponent` that repeatedly counts down t
 子组件`CountdownTimerComponent`进行倒计时，归零时发射一个导弹。`start`和`stop`方法负责控制时钟并在模板里显示倒计时的状态信息。  
 
 
-<code-example path="cb-component-communication/src/app/countdown-timer.component.ts" title="cb-component-communication/src/app/countdown-timer.component.ts">
+<code-example path="component-interaction/src/app/countdown-timer.component.ts" title="component-interaction/src/app/countdown-timer.component.ts">
 
 </code-example>
 
@@ -362,7 +361,7 @@ The `CountdownLocalVarParentComponent` that hosts the timer componentis as follo
 让我们来看看计时器组件的宿主组件`CountdownLocalVarParentComponent`。
 
 
-<code-example path="cb-component-communication/src/app/countdown-parent.component.ts" region="lv" title="cb-component-communication/src/app/countdown-parent.component.ts">
+<code-example path="component-interaction/src/app/countdown-parent.component.ts" region="lv" title="component-interaction/src/app/countdown-parent.component.ts">
 
 </code-example>
 
@@ -389,8 +388,8 @@ Here we see the parent and child working together.
 下面是父组件和子组件一起工作时的效果。
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/countdown-timer-anim.gif" alt="countdown timer"></img>
+<figure>
+  <img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
 </figure>
 
 
@@ -398,7 +397,7 @@ Here we see the parent and child working together.
 {@a countdown-tests}
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 ### 测试
 
@@ -409,13 +408,13 @@ Test also that clicking the *Stop* button pauses the countdown timer:
 测试确保在父组件模板中显示的秒数和子组件状态信息里的秒数同步。它还会点击*Stop*按钮来停止倒计时：
 
 
-<code-example path="cb-component-communication/e2e-spec.ts" region="countdown-timer-tests" title="cb-component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="countdown-timer-tests" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 [回到顶部](guide/component-communication#top)
 
@@ -441,10 +440,10 @@ When the parent component *class* requires that kind of access,
 
 当父组件*类*需要这种访问时，可以把子组件作为*ViewChild*，***注入***到父组件里面。
 
-The following example illustrates this technique with the same 
-[Countdown Timer](guide/component-communication#countdown-timer-example) example.
+The following example illustrates this technique with the same
+[Countdown Timer](guide/component-interaction#countdown-timer-example) example.
 Neither its appearance nor its behavior will change.
-The child [CountdownTimerComponent](guide/component-communication#countdown-timer-example) is the same as well.
+The child [CountdownTimerComponent](guide/component-interaction#countdown-timer-example) is the same as well.
 
 下面的例子用与[倒计时](guide/component-communication#countdown-timer-example)相同的范例来解释这种技术。
 我们没有改变它的外观或行为。子组件[CountdownTimerComponent](guide/component-communication#countdown-timer-example)也和原来一样。
@@ -469,7 +468,7 @@ Here is the parent, `CountdownViewChildParentComponent`:
 下面是父组件`CountdownViewChildParentComponent`:
 
 
-<code-example path="cb-component-communication/src/app/countdown-parent.component.ts" region="vc" title="cb-component-communication/src/app/countdown-parent.component.ts">
+<code-example path="component-interaction/src/app/countdown-parent.component.ts" region="vc" title="component-interaction/src/app/countdown-parent.component.ts">
 
 </code-example>
 
@@ -516,17 +515,16 @@ that it takes future values from the timer component.
 
 使用`setTimeout()`来等下一轮，然后改写`seconds()`方法，这样它接下来就会从注入的这个计时器组件里获取秒数的值。
 
+<h3 class="no-toc">Test it</h3>
 
-### Test it
+<h3 class="no-toc">测试一下！</h3>
 
-### 测试
+Use [the same countdown timer tests](guide/component-interaction#countdown-tests) as before.
 
-Use [the same countdown timer tests](guide/component-communication#countdown-tests) as before.
-
-使用和之前[一样的倒计时测试](guide/component-communication#countdown-tests)。
+使用和之前[一样的倒计时测试](guide/component-interaction#countdown-tests)。
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 [回到顶部](guide/'#top')
 
@@ -550,7 +548,7 @@ This `MissionService` connects the `MissionControlComponent` to multiple `Astron
 这个`MissionService`把`MissionControlComponent`和多个`AstronautComponent`子组件连接起来。
 
 
-<code-example path="cb-component-communication/src/app/mission.service.ts" title="cb-component-communication/src/app/mission.service.ts">
+<code-example path="component-interaction/src/app/mission.service.ts" title="component-interaction/src/app/mission.service.ts">
 
 </code-example>
 
@@ -562,7 +560,7 @@ The `MissionControlComponent` both provides the instance of the service that it
 `MissionControlComponent`提供服务的实例，并将其共享给它的子组件(通过`providers`元数据数组)，子组件可以通过构造函数将该实例注入到自身。
 
 
-<code-example path="cb-component-communication/src/app/missioncontrol.component.ts" title="cb-component-communication/src/app/missioncontrol.component.ts">
+<code-example path="component-interaction/src/app/missioncontrol.component.ts" title="component-interaction/src/app/missioncontrol.component.ts">
 
 </code-example>
 
@@ -574,7 +572,7 @@ Each `AstronautComponent` is a child of the `MissionControlComponent` and theref
 `AstronautComponent`也通过自己的构造函数注入该服务。由于每个`AstronautComponent`都是`MissionControlComponent`的子组件，所以它们获取到的也是父组件的这个服务实例。
 
 
-<code-example path="cb-component-communication/src/app/astronaut.component.ts" title="cb-component-communication/src/app/astronaut.component.ts">
+<code-example path="component-interaction/src/app/astronaut.component.ts" title="component-interaction/src/app/astronaut.component.ts">
 
 </code-example>
 
@@ -609,13 +607,13 @@ facilitated by the service:
 *History*日志证明了：在父组件`MissionControlComponent`和子组件`AstronautComponent`之间，信息通过该服务实现了双向传递。
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/component-communication/bidirectional-service.gif" alt="bidirectional-service"></img>
+<figure>
+  <img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
 </figure>
 
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 ### 测试
 
@@ -625,12 +623,10 @@ and verify that the history meets expectations:
 测试确保点击父组件`MissionControlComponent`和子组件`AstronautComponent`两个的组件的按钮时，*History*日志和预期的一样。
 
 
-<code-example path="cb-component-communication/e2e-spec.ts" region="bidirectional-service" title="cb-component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="bidirectional-service" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
-
-[回到顶部](guide/component-communication#top)
\ No newline at end of file
+[Back to top](guide/component-interaction#top)[回到顶部](guide/component-communication#top)
\ No newline at end of file
diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md
index dc85e08644..edf88ba2f2 100644
--- a/aio/content/guide/component-styles.md
+++ b/aio/content/guide/component-styles.md
@@ -1,12 +1,6 @@
-@title
-组件样式
-
-@intro
-学习如何给组件应用 CSS 样式。
-
-@description
-
+# Component Styles
 
+# 组件样式
 
 Angular applications are styled with standard CSS. That means you can apply
 everything you know about CSS stylesheets, selectors, rules, and media queries
@@ -24,6 +18,8 @@ This page describes how to load and apply these component styles.
 
 在本章中，我们将学到如何加载和使用这些*组件样式*。
 
+<!--
+
 ## Table Of Contents
 
 ## 目录
@@ -52,6 +48,8 @@ This page describes how to load and apply these component styles.
 
   [附录 2：使用相对 URL 加载样式](guide/component-styles#relative-urls)
 
+-->
+
 You can run the <live-example></live-example> in Plunker and download the code from there.
 
 你可以在Plunker上运行本章这些代码的<live-example></live-example>并下载这些代码。
@@ -200,14 +198,15 @@ if some ancestor element has the CSS class `theme-light`.
 
 
 
-### /deep/
+### (deprecated) `/deep/`, `>>>`, and `::ng-deep`
 
 Component styles normally apply only to the HTML in the component's own template. 
 
 组件样式通常只会作用于组件自身的 HTML 上。
 
-Use the `/deep/` selector to force a style down through the child component tree into all the child component views.
-The `/deep/` selector works to any depth of nested components, and it applies to both the view
+Use the `/deep/` shadow-piercing descendant combinator to force a style down through the child
+component tree into all the child component views.
+The `/deep/` combinator works to any depth of nested components, and it applies to both the view
 children and content children of the component. 
   
 我们可以使用`/deep/`选择器，来强制一个样式对各级子组件的视图也生效，它*不但作用于组件的子视图，也会作用于组件的内容*。
@@ -222,18 +221,13 @@ through this component to all of its child elements in the DOM.
 
 </code-example>
 
+The `/deep/` combinator also has the aliases `>>>`, and `::ng-deep`.
 
-
-The `/deep/` selector also has the alias `>>>`. You can use either interchangeably.
-
-`/deep/`选择器还有一个别名`>>>`。我们可以任意交替使用它们。
-
+`/deep/` 组合器还有两个别名：`>>>`和`::ng-deep`。
 
 <div class="alert is-important">
 
-
-
-Use the `/deep/` and `>>>` selectors only with *emulated* view encapsulation.
+Use `/deep/`, `>>>` and `::ng-deep` only with *emulated* view encapsulation.
 Emulated is the default and most commonly used view encapsulation. For more information, see the
 [Controlling view encapsulation](guide/component-styles#view-encapsulation) section.
 
@@ -244,13 +238,17 @@ Emulated is the default and most commonly used view encapsulation. For more info
 
 </div>
 
+<div class="alert is-important">
 
+The shadow-piercing descendant combinator is deprecated and [support is being removed from major browsers](https://www.chromestatus.com/features/6750456638341120) and tools.
+As such we plan to drop support in Angular (for all 3 of `/deep/`, `>>>` and `::ng-deep`).
+Until then `::ng-deep` should be preferred for a broader compatibility with the tools.
+
+</div>
 
 {@a loading-styles}
 
-
-
-## Loading styles into components
+## Loading component styles
 
 ## 把样式加载进组件中
 
@@ -416,7 +414,7 @@ In this case, the URL is relative to the CSS file into which you're importing.
 
 
 
-## Controlling view encapsulation: native, emulated, and none
+## View encapsulation
 
 ## 控制视图的封装模式：原生 (Native)、仿真 (Emulated) 和无 (None)
 
@@ -482,7 +480,7 @@ in most cases.
 
 
 
-## Appendix 1: Inspecting the CSS generated in emulated view encapsulation
+## Appendix: Inspecting generated CSS
 
 ## 附录 1：查看仿真 (Emulated) 模式下生成的 CSS
 
@@ -560,7 +558,7 @@ These extra selectors enable the scoping rules described in this page.
 
 
 
-## Appendix 2: Loading styles with relative URLs
+## Appendix: Loading with relative URLs
 
 ## 附录 2：使用相对 URL 加载样式
 
diff --git a/aio/content/guide/cb-dependency-injection.md b/aio/content/guide/dependency-injection-in-action.md
similarity index 80%
rename from aio/content/guide/cb-dependency-injection.md
rename to aio/content/guide/dependency-injection-in-action.md
index 802d109f2e..f70fc2b8cc 100644
--- a/aio/content/guide/cb-dependency-injection.md
+++ b/aio/content/guide/dependency-injection-in-action.md
@@ -1,10 +1,6 @@
-@title
-依赖注入
+# Dependency Injection
 
-@intro
-依赖注入技术
-
-@description
+# 依赖注入
 
 
 Dependency Injection is a powerful pattern for managing code dependencies. 
@@ -13,120 +9,123 @@ This cookbook explores many of the features of Dependency Injection (DI) in Angu
 依赖注入是一个用来管理代码依赖的强大模式。在这本“烹饪宝典”中，我们会讨论Angular依赖注入的许多特性。
 {@a toc}
 
+<!--
+
 # Contents
 
 # 目录
 
-* [Application-wide dependencies](guide/cb-dependency-injection#app-wide-dependencies)
+* [Application-wide dependencies](guide/dependency-injection-in-action#app-wide-dependencies)
 
   [应用程序全局依赖](guide/cb-dependency-injection#app-wide-dependencies)
   
-* [External module configuration](guide/cb-dependency-injection#external-module-configuration)
+* [External module configuration](guide/dependency-injection-in-action#external-module-configuration)
 
   [外部模块配置](guide/cb-dependency-injection#external-module-configuration)
   
-* [`@Injectable()` and nested service dependencies](guide/cb-dependency-injection#nested-dependencies)
+* [`@Injectable()` and nested service dependencies](guide/dependency-injection-in-action#nested-dependencies)
 
   [`@Injectable()`与嵌套服务的依赖](guide/cb-dependency-injection#nested-dependencies)
 
-  * [`@Injectable()`](guide/cb-dependency-injection#injectable-1)
+  * [`@Injectable()`](guide/dependency-injection-in-action#injectable-1)
 
-* [Limit service scope to a component subtree](guide/cb-dependency-injection#service-scope)
+* [Limit service scope to a component subtree](guide/dependency-injection-in-action#service-scope)
 
   [把服务作用域限制到一个子组件树](guide/cb-dependency-injection#service-scope)
   
-* [Multiple service instances (sandboxing)](guide/cb-dependency-injection#multiple-service-instances)
+* [Multiple service instances (sandboxing)](guide/dependency-injection-in-action#multiple-service-instances)
 
   [多个服务实例(沙箱)](guide/cb-dependency-injection#multiple-service-instances)
   
-* [Qualify dependency lookup with `@Optional()` and `@Host()`](guide/cb-dependency-injection#qualify-dependency-lookup)
+* [Qualify dependency lookup with `@Optional()` and `@Host()`](guide/dependency-injection-in-action#qualify-dependency-lookup)
 
   [使用`@Optional()`和`@Host()`装饰器来限定依赖查找方式](guide/cb-dependency-injection#qualify-dependency-lookup)
 
-  * [Demonstration](guide/cb-dependency-injection#demonstration)
+  * [Demonstration](guide/dependency-injection-in-action#demonstration)
   
     [演示](guide/cb-dependency-injection#demonstration)
 
-* [Inject the component's DOM element](guide/cb-dependency-injection#component-element)
+* [Inject the component's DOM element](guide/dependency-injection-in-action#component-element)
 
   [注入组件的DOM元素](guide/cb-dependency-injection#component-element)
   
-* [Define dependencies with providers](guide/cb-dependency-injection#providers)
+* [Define dependencies with providers](guide/dependency-injection-in-action#providers)
 
   [使用提供商定义依赖](guide/cb-dependency-injection#providers)
 
-  * [Defining providers](guide/cb-dependency-injection#defining-providers)
+  * [Defining providers](guide/dependency-injection-in-action#defining-providers)
   
     [定义提供商](guide/cb-dependency-injection#defining-providers)
     
-  * [The *provide* object literal](guide/cb-dependency-injection#provide)
+  * [The *provide* object literal](guide/dependency-injection-in-action#provide)
   
     [*provide* 字面量](guide/cb-dependency-injection#provide)
   
-  * [`useValue`&mdash;the *value provider*](guide/cb-dependency-injection#usevalue)
+  * [`useValue`&mdash;the *value provider*](guide/dependency-injection-in-action#usevalue)
   
     [`useValue` - *值提供商*](guide/cb-dependency-injection#usevalue)
     
-  * [`useClass`&mdash;the *class provider*](guide/cb-dependency-injection#useclass)
+  * [`useClass`&mdash;the *class provider*](guide/dependency-injection-in-action#useclass)
   
     [`useClass` - *类提供商*](guide/cb-dependency-injection#useclass)
     
-  * [`useExisting`&mdash;the *alias provider*](guide/cb-dependency-injection#useexisting)
+  * [`useExisting`&mdash;the *alias provider*](guide/dependency-injection-in-action#useexisting)
   
     [`useExisting` - *别名提供商*](guide/cb-dependency-injection#useexisting)
     
-  * [`useFactory`&mdash;the *factory provider*](guide/cb-dependency-injection#usefactory)
+  * [`useFactory`&mdash;the *factory provider*](guide/dependency-injection-in-action#usefactory)
   
     [`useFactory` - *工厂提供商*](guide/cb-dependency-injection#usefactory)
 
-* [Provider token alternatives: the class-interface and `InjectionToken`](guide/cb-dependency-injection#tokens)
+* [Provider token alternatives: the class-interface and `InjectionToken`](guide/dependency-injection-in-action#tokens)
 
   [提供商可选令牌：类接口与`InjectionToken`](guide/cb-dependency-injection#tokens)  
   
-  * [class-interface](guide/cb-dependency-injection#class-interface)
+  * [class-interface](guide/dependency-injection-in-action#class-interface)
 
     [类-接口](guide/cb-dependency-injection#class-interface)  
     
-  * [`InjectionToken`](guide/cb-dependency-injection#injection-token)
+  * [`InjectionToken`](guide/dependency-injection-in-action#injection-token)
     
-* [Inject into a derived class](guide/cb-dependency-injection#di-inheritance)
+* [Inject into a derived class](guide/dependency-injection-in-action#di-inheritance)
 
   [注入到一个派生类](guide/cb-dependency-injection#di-inheritance)
 
-* [Find a parent component by injection](guide/cb-dependency-injection#find-parent)
+* [Find a parent component by injection](guide/dependency-injection-in-action#find-parent)
 
   [通过注入来查找父组件](guide/cb-dependency-injection#find-parent)
   
-  * [Find parent with a known component type](guide/cb-dependency-injection#known-parent)
+  * [Find parent with a known component type](guide/dependency-injection-in-action#known-parent)
 
     [通过已知组件类型查找父组件](guide/cb-dependency-injection#known-parent)
 
-  * [Cannot find a parent by its base class](guide/cb-dependency-injection#base-parent)
+  * [Cannot find a parent by its base class](guide/dependency-injection-in-action#base-parent)
 
     [无法通过自己的基类查找父组件](guide/cb-dependency-injection#base-parent)
 
-  * [Find a parent by its class-interface](guide/cb-dependency-injection#class-interface-parent)
+  * [Find a parent by its class-interface](guide/dependency-injection-in-action#class-interface-parent)
   
     [通过类-接口查找父组件](guide/cb-dependency-injection#class-interface-parent)    
     
-  * [Find a parent in a tree of parents with `@SkipSelf()`](guide/cb-dependency-injection#parent-tree)
+  * [Find a parent in a tree of parents with `@SkipSelf()`](guide/dependency-injection-in-action#parent-tree)
     
     [在父组件树里查找一个父组件(*@SkipSelf*)](guide/cb-dependency-injection#parent-tree)
     
-  * [The `Parent` class-interface](guide/cb-dependency-injection#parent-token)
+  * [The `Parent` class-interface](guide/dependency-injection-in-action#parent-token)
 
     [`Parent`类接口](guide/cb-dependency-injection#parent-token)
     
-  * [A `provideParent()` helper function](guide/cb-dependency-injection#provideparent)
+  * [A `provideParent()` helper function](guide/dependency-injection-in-action#provideparent)
 
     [`provideParent()`助手函数](guide/cb-dependency-injection#provideparent)
 
-* [Break circularities with a forward class reference (*forwardRef*)](guide/cb-dependency-injection#forwardref)
+* [Break circularities with a forward class reference (*forwardRef*)](guide/dependency-injection-in-action#forwardref)
 
 * [使用类的前向引用(*forwardRef*)打破循环依赖](guide/cb-dependency-injection#forwardref)
 
+-->
 
-See the <live-example name="cb-dependency-injection"></live-example>
+See the <live-example name="dependency-injection-in-action"></live-example>
 of the code in this cookbook.        
 
 要获取本“烹饪宝典”的代码，**参见<live-example name="cb-dependency-injection"></live-example>**。
@@ -148,7 +147,7 @@ in the `@Component` metadata `providers` array.
 在下面的例子中，通过`@Component`元数据的`providers`数组导入和注册了几个服务(`LoggerService`, `UserContext`和`UserService`)。
 
 
-<code-example path="cb-dependency-injection/src/app/app.component.ts" region="import-services" title="src/app/app.component.ts (excerpt)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/app.component.ts" region="import-services" title="src/app/app.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -167,7 +166,7 @@ is all the registration you need.
 
 A *provider* is something that can create or deliver a service.
 Angular creates a service instance from a class provider by using `new`.
-Read more about providers in the [Dependency Injection](guide/dependency-injection#!)
+Read more about providers in the [Dependency Injection](guide/dependency-injection#injector-providers)
 guide.
 
 *提供商*是用来新建或者交付服务的。
@@ -185,13 +184,13 @@ Angular can inject them into the constructor of *any* component or service, *any
 现在我们已经注册了这些服务，这样Angular就能在应用程序的*任何地方*，把它们注入到*任何*组件和服务的构造函数里。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-bios.component.ts" region="ctor" title="src/app/hero-bios.component.ts (component constructor injection)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/hero-bios.component.ts" region="ctor" title="src/app/hero-bios.component.ts (component constructor injection)" linenums="false">
 
 </code-example>
 
 
 
-<code-example path="cb-dependency-injection/src/app/user-context.service.ts" region="ctor" title="src/app/user-context.service.ts (service constructor injection)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/user-context.service.ts" region="ctor" title="src/app/user-context.service.ts (service constructor injection)" linenums="false">
 
 </code-example>
 
@@ -218,7 +217,7 @@ in the `providers` list of the `AppModule`.
 下面的例子是第二种情况，它为组件路由器配置了一个非默认的[地址策略（location strategy）](guide/router#location-strategy)，并把它加入到`AppModule`的`providers`数组中。
 
 
-<code-example path="cb-dependency-injection/src/app/app.module.ts" region="providers" title="src/app/app.module.ts (providers)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/app.module.ts" region="providers" title="src/app/app.module.ts (providers)" linenums="false">
 
 </code-example>
 
@@ -255,7 +254,7 @@ The following example shows injecting both the `LoggerService` and the `UserCont
 在下列例子中，我们往`AppComponent`里注入的`LoggerService`和`UserContext`。
 
 
-<code-example path="cb-dependency-injection/src/app/app.component.ts" region="ctor" title="src/app/app.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/app.component.ts" region="ctor" title="src/app/app.component.ts" linenums="false">
 
 </code-example>
 
@@ -267,7 +266,7 @@ a `UserService` that gathers information about a particular user.
 `UserContext`有两个依赖`LoggerService`(再一次)和负责获取特定用户信息的`UserService`。
 
 
-<code-example path="cb-dependency-injection/src/app/user-context.service.ts" region="injectables" title="user-context.service.ts (injection)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/user-context.service.ts" region="injectables" title="user-context.service.ts (injection)" linenums="false">
 
 </code-example>
 
@@ -292,8 +291,8 @@ Once all the dependencies are in place, the `AppComponent` displays the user inf
 一旦所有依赖都准备好了，`AppComponent`就会显示用户信息：
  
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/logged-in-user.png" alt="Logged In User"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
 </figure>
 
 
@@ -310,7 +309,7 @@ Notice the `@Injectable()`decorator on the `UserContextService` class.
 注意在`UserContextService`类里面的`@Injectable()`装饰器。
 
 
-<code-example path="cb-dependency-injection/src/app/user-context.service.ts" region="injectable" title="user-context.service.ts (@Injectable)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/user-context.service.ts" region="injectable" title="user-context.service.ts (@Injectable)" linenums="false">
 
 </code-example>
 
@@ -399,14 +398,14 @@ You can limit the scope of an injected service to a *branch* of the application
 by providing that service *at the sub-root component for that branch*.
 This example shows how similar providing a service to a sub-root component is
 to providing a service in the root `AppComponent`. The syntax is the same.
-Here, the `HeroService` is availble to the `HeroesBaseComponent` because it is in the `providers` array:
+Here, the `HeroService` is available to the `HeroesBaseComponent` because it is in the `providers` array:
 
 通过*在组件树的子级根组件*中提供服务，可以把一个被注入服务的作用域局限在应用程序结构中的某个*分支*中。
 这个例子中展示了为子组件和根组件`AppComponent`提供服务的相似之处，它们的语法是相同的。
 这里通过列入`providers`数组，在`HeroesBaseComponent`中提供了`HeroService`：
 
 
-<code-example path="cb-dependency-injection/src/app/sorted-heroes.component.ts" region="injection" title="src/app/sorted-heroes.component.ts (HeroesBaseComponent excerpt)">
+<code-example path="dependency-injection-in-action/src/app/sorted-heroes.component.ts" region="injection" title="src/app/sorted-heroes.component.ts (HeroesBaseComponent excerpt)">
 
 </code-example>
 
@@ -483,7 +482,7 @@ Imagine a `HeroBiosComponent` that presents three instances of the `HeroBioCompo
 想象一下，一个`HeroBiosComponent`组件显示三个`HeroBioComponent`的实例。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-bios.component.ts" region="simple" title="ap/hero-bios.component.ts">
+<code-example path="dependency-injection-in-action/src/app/hero-bios.component.ts" region="simple" title="ap/hero-bios.component.ts">
 
 </code-example>
 
@@ -495,7 +494,7 @@ A `HeroBioComponent` relies on a `HeroCacheService` to fetch, cache, and perform
 每个`HeroBioComponent`都能编辑一个英雄的生平。`HeroBioComponent`依赖`HeroCacheService`服务来对该英雄进行读取、缓存和执行其它持久化操作。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-cache.service.ts" region="service" title="src/app/hero-cache.service.ts">
+<code-example path="dependency-injection-in-action/src/app/hero-cache.service.ts" region="service" title="src/app/hero-cache.service.ts">
 
 </code-example>
 
@@ -512,7 +511,7 @@ by listing the `HeroCacheService` in its metadata `providers` array.
 通过在自己的元数据(metadata)`providers`数组里面列出`HeroCacheService`, 每个`HeroBioComponent`就能*拥有*自己独立的`HeroCacheService`实例。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-bio.component.ts" region="component" title="src/app/hero-bio.component.ts">
+<code-example path="dependency-injection-in-action/src/app/hero-bio.component.ts" region="component" title="src/app/hero-bio.component.ts">
 
 </code-example>
 
@@ -525,14 +524,14 @@ And the template displays this data-bound property.
 
 父组件`HeroBiosComponent`把一个值绑定到`heroId`。`ngOnInit`把该`id`传递到服务，然后服务获取和缓存英雄。`hero`属性的getter从服务里面获取缓存的英雄，并在模板里显示它绑定到属性值。
 
-Find this example in <live-example name="cb-dependency-injection">live code</live-example>
+Find this example in <live-example name="dependency-injection-in-action">live code</live-example>
 and confirm that the three `HeroBioComponent` instances have their own cached hero data. 
 
 到<live-example name="cb-dependency-injection">在线例子</live-example>中找到这个例子，确认三个`HeroBioComponent`实例拥有自己独立的英雄数据缓存。
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/hero-bios.png" alt="Bios"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
 </figure>
 
 
@@ -590,12 +589,12 @@ The next example covers this second case.
 
 ### 示范
 
-The `HeroBiosAndContactsComponent` is a revision of the `HeroBiosComponent` that you looked at [above](guide/cb-dependency-injection#hero-bios-component).
+The `HeroBiosAndContactsComponent` is a revision of the `HeroBiosComponent` that you looked at [above](guide/dependency-injection-in-action#hero-bios-component).
 
 `HeroBiosAndContactsComponent`是[前面](guide/cb-dependency-injection#hero-bios-component)见过的`HeroBiosComponent`的修改版。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-bios.component.ts" region="hero-bios-and-contacts" title="src/app/hero-bios.component.ts (HeroBiosAndContactsComponent)">
+<code-example path="dependency-injection-in-action/src/app/hero-bios.component.ts" region="hero-bios-and-contacts" title="src/app/hero-bios.component.ts (HeroBiosAndContactsComponent)">
 
 </code-example>
 
@@ -606,7 +605,7 @@ Focus on the template:
 注意看模板：
 
 
-<code-example path="cb-dependency-injection/src/app/hero-bios.component.ts" region="template" title="cb-dependency-injection/src/app/hero-bios.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/hero-bios.component.ts" region="template" title="dependency-injection-in-action/src/app/hero-bios.component.ts" linenums="false">
 
 </code-example>
 
@@ -620,7 +619,7 @@ placing it in the `<ng-content>` slot of the `HeroBioComponent` template:
 将它放在`HeroBioComponent`模板的`<ng-content>`标签槽里。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-bio.component.ts" region="template" title="src/app/hero-bio.component.ts (template)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/hero-bio.component.ts" region="template" title="src/app/hero-bio.component.ts (template)" linenums="false">
 
 </code-example>
 
@@ -631,8 +630,8 @@ It looks like this, with the hero's telephone number from `HeroContactComponent`
 从`HeroContactComponent`获得的英雄电话号码，被投影到上面的英雄描述里，就像这样：
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/hero-bio-and-content.png" alt="bio and contact"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
 </figure>
 
 
@@ -642,7 +641,7 @@ Here's the `HeroContactComponent` which demonstrates the qualifying decorators:
 下面的`HeroContactComponent`，示范了限定型装饰器(@Optional和@Host)：
 
 
-<code-example path="cb-dependency-injection/src/app/hero-contact.component.ts" region="component" title="src/app/hero-contact.component.ts">
+<code-example path="dependency-injection-in-action/src/app/hero-contact.component.ts" region="component" title="src/app/hero-contact.component.ts">
 
 </code-example>
 
@@ -653,7 +652,7 @@ Focus on the constructor parameters:
 注意看构造函数的参数：
 
 
-<code-example path="cb-dependency-injection/src/app/hero-contact.component.ts" region="ctor-params" title="src/app/hero-contact.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/hero-contact.component.ts" region="ctor-params" title="src/app/hero-contact.component.ts" linenums="false">
 
 </code-example>
 
@@ -683,8 +682,8 @@ Here's the `HeroBiosAndContactsComponent` in action.
 下面是`HeroBiosAndContactsComponent`的执行结果：
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/hero-bios-and-contacts.png" alt="Bios with contact into"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
 </figure>
 
 
@@ -695,8 +694,8 @@ with the gratuitous "!!!", indicating that the logger was found.
 
 如果注释掉`@Host()`装饰器，Angular就会沿着注入器树往上走，直到在`AppComponent`中找到该日志服务。日志服务的逻辑加入进来，更新了英雄的显示信息，这表明确实找到了日志服务。
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/hero-bio-contact-no-host.png" alt="Without @Host"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
 </figure>
 
 
@@ -727,7 +726,7 @@ the [Attribute Directives](guide/attribute-directives) page.
 为了说明这一点，我们在[属性型指令](guide/attribute-directives)`HighlightDirective`的基础上，编写了一个简化版本。
 
 
-<code-example path="cb-dependency-injection/src/app/highlight.directive.ts" title="src/app/highlight.directive.ts">
+<code-example path="dependency-injection-in-action/src/app/highlight.directive.ts" title="src/app/highlight.directive.ts">
 
 </code-example>
 
@@ -750,7 +749,7 @@ first without a value (yielding the default color) and then with an assigned col
 下面的代码把指令的`myHighlight`属性(Attribute)填加到两个`<div>`标签里，一个没有赋值，一个赋值了颜色。
 
 
-<code-example path="cb-dependency-injection/src/app/app.component.html" region="highlight" title="src/app/app.component.html (highlight)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/app.component.html" region="highlight" title="src/app/app.component.html (highlight)" linenums="false">
 
 </code-example>
 
@@ -761,8 +760,8 @@ The following image shows the effect of mousing over the `<hero-bios-and-contact
 下图显示了鼠标移到`<hero-bios-and-contacts>`标签的效果：
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/highlight.png" alt="Highlighted bios"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
 </figure>
 
 {@a providers}
@@ -789,7 +788,7 @@ Here's a typical example:
 Angular把该令牌传给注入器，然后把得到的结果赋给参数。下面是一个典型的例子：
 
 
-<code-example path="cb-dependency-injection/src/app/hero-bios.component.ts" region="ctor" title="src/app/hero-bios.component.ts (组件构造器注入)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/hero-bios.component.ts" region="ctor" title="src/app/hero-bios.component.ts (组件构造器注入)" linenums="false">
 
 </code-example>
 
@@ -817,7 +816,7 @@ A *provider* is a recipe for delivering a service associated with a *token*.
 
 If the injector doesn't have a provider for the requested *token*, it delegates the request
 to its parent injector, where the process repeats until there are no more injectors.
-If the search is futile, the injector throws an error&mdash;unless the request was [optional](guide/cb-dependency-injection#optional).
+If the search is futile, the injector throws an error&mdash;unless the request was [optional](guide/dependency-injection-in-action#optional).
 
 如果注入器无法根据令牌在自己内部找到对应的提供商，它便将请求移交给它的父级注入器，这个过程不断重复，直到没有更多注入器为止。
 如果没找到，注入器就抛出一个错误...除非这个请求是[可选的](guide/cb-dependency-injection#optional)。
@@ -836,7 +835,7 @@ usually in the `providers` array of the `Component` or `Directive` metadata:
 Angular会使用一些自带的提供商来初始化这些注入器。我们必须自行注册属于_自己_的提供商，通常用`组件`或者`指令`元数据中的`providers`数组进行注册。
 
 
-<code-example path="cb-dependency-injection/src/app/app.component.ts" region="providers" title="src/app/app.component.ts (提供商)">
+<code-example path="dependency-injection-in-action/src/app/app.component.ts" region="providers" title="src/app/app.component.ts (提供商)">
 
 </code-example>
 
@@ -855,7 +854,7 @@ You mention the class in the `providers` array and you're done.
 简单的类提供商是最典型的例子。只要在`providers`数值里面提到该类就可以了。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-bios.component.ts" region="class-provider" title="src/app/hero-bios.component.ts (类提供商)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/hero-bios.component.ts" region="class-provider" title="src/app/hero-bios.component.ts (类提供商)" linenums="false">
 
 </code-example>
 
@@ -869,14 +868,14 @@ You need other ways to deliver dependency values and that means you need other w
 但是，并不是所有的依赖都只要创建一个类的新实例就可以交付了。我们还需要其它的交付方式，这意味着我们也需要其它方式来指定提供商。
 
 The `HeroOfTheMonthComponent` example demonstrates many of the alternatives and why you need them.
-It's visually simple: a few properties and the logs produced by a logger. 
+It's visually simple: a few properties and the logs produced by a logger.
 
 `HeroOfTheMonthComponent`例子示范了一些替代方案，展示了为什么需要它们。
 它看起来很简单：一些属性和一个日志输出。
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/hero-of-month.png" alt="Hero of the month" width="300px"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
 </figure>
 
 
@@ -886,7 +885,7 @@ The code behind it gives you plenty to think about.
 这段代码的背后有很多值得深入思考的地方。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-of-the-month.component.ts" region="hero-of-the-month" title="hero-of-the-month.component.ts">
+<code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" region="hero-of-the-month" title="hero-of-the-month.component.ts">
 
 </code-example>
 
@@ -901,7 +900,7 @@ The code behind it gives you plenty to think about.
 #### *provide*对象
 
 The `provide` object literal takes a *token* and a *definition object*.
-The *token* is usually a class but [it doesn't have to be](guide/cb-dependency-injection#tokens).
+The *token* is usually a class but [it doesn't have to be](guide/dependency-injection-in-action#tokens).
 
 该`provide`对象需要一个*令牌*和一个*定义对象*。该*令牌*通常是一个类，但[并非一定是](guide/cb-dependency-injection#tokens)
 
@@ -936,7 +935,7 @@ the second specifies a literal string resource:
 第一个提供了一个`Hero`类的实例；第二个指定了一个字符串资源：
 
 
-<code-example path="cb-dependency-injection/src/app/hero-of-the-month.component.ts" region="use-value" title="cb-dependency-injection/src/app/hero-of-the-month.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" region="use-value" title="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" linenums="false">
 
 </code-example>
 
@@ -948,7 +947,7 @@ and the consumer of the injected hero would want the type information.
 `Hero`提供商的令牌是一个类，这很合理，因为它提供的结果是一个`Hero`实例，并且被注入该英雄的消费者也需要知道它类型信息。
 
 The `TITLE` provider token is *not a class*.
-It's a special kind of provider lookup key called an [InjectionToken](guide/cb-dependency-injection#injection-token).
+It's a special kind of provider lookup key called an [InjectionToken](guide/dependency-injection-in-action#injection-token).
 You can use an `InjectionToken` for any kind of provider but it's particular
 helpful when the dependency is a simple value like a string, a number, or a function.
 
@@ -963,7 +962,7 @@ The `someHero` variable in this example was set earlier in the file:
 该例中的`someHero`变量是以前在下面这个文件中定义的：
 
 
-<code-example path="cb-dependency-injection/src/app/hero-of-the-month.component.ts" region="some-hero" title="cb-dependency-injection/src/app/hero-of-the-month.component.ts">
+<code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" region="some-hero" title="dependency-injection-in-action/src/app/hero-of-the-month.component.ts">
 
 </code-example>
 
@@ -997,7 +996,7 @@ Here are two examples in the `HeroOfTheMonthComponent`:
 请看下面`HeroOfTheMonthComponent`里的两个例子：
 
 
-<code-example path="cb-dependency-injection/src/app/hero-of-the-month.component.ts" region="use-class" title="cb-dependency-injection/src/app/hero-of-the-month.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" region="use-class" title="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" linenums="false">
 
 </code-example>
 
@@ -1036,7 +1035,7 @@ The `DateLoggerService` inherits from `LoggerService`; it appends the current da
 `DateLoggerService`从`LoggerService`继承；它把当前的日期/时间附加到每条信息上。
 
 
-<code-example path="cb-dependency-injection/src/app/date-logger.service.ts" region="date-logger-service" title="src/app/date-logger.service.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/date-logger.service.ts" region="date-logger-service" title="src/app/date-logger.service.ts" linenums="false">
 
 </code-example>
 
@@ -1057,7 +1056,7 @@ creating ***two ways to access the same service object***.
 使用`useExisting`，提供商可以把一个令牌映射到另一个令牌上。实际上，第一个令牌是第二个令牌所对应的服务的一个***别名***，创造了***访问同一个服务对象的两种方法***。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-of-the-month.component.ts" region="use-existing" title="cb-dependency-injection/src/app/hero-of-the-month.component.ts">
+<code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" region="use-existing" title="dependency-injection-in-action/src/app/hero-of-the-month.component.ts">
 
 </code-example>
 
@@ -1070,12 +1069,12 @@ The following example shows aliasing for that purpose.
 
 Imagine that the `LoggerService` had a large API, much larger than the actual three methods and a property.
 You might want to shrink that API surface to just the members you actually need.
-Here the `MinimalLogger` [*class-interface*](guide/cb-dependency-injection#class-interface) reduces the API to two members:
+Here the `MinimalLogger` [*class-interface*](guide/dependency-injection-in-action#class-interface) reduces the API to two members:
 
 想象一下如果`LoggerService`有个很大的API接口(虽然它其实只有三个方法，一个属性)，通过使用`MinimalLogger`[*类-接口*](guide/cb-dependency-injection#class-interface)别名，就能成功的把这个API接口缩小到只暴露两个成员：
 
 
-<code-example path="cb-dependency-injection/src/app/minimal-logger.service.ts" title="src/app/minimal-logger.service.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/minimal-logger.service.ts" title="src/app/minimal-logger.service.ts" linenums="false">
 
 </code-example>
 
@@ -1086,7 +1085,7 @@ Now put it to use in a simplified version of the `HeroOfTheMonthComponent`.
 现在，在一个简化版的`HeroOfTheMonthComponent`中使用它。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-of-the-month.component.1.ts" title="src/app/hero-of-the-month.component.ts (minimal version)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts" title="src/app/hero-of-the-month.component.ts (minimal version)" linenums="false">
 
 </code-example>
 
@@ -1097,14 +1096,14 @@ The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `Mini
 `HeroOfTheMonthComponent`构造函数的`logger`参数是一个`MinimalLogger`类型，支持TypeScript的编辑器里，只能看到它的两个成员`logs`和`logInfo`：
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/minimal-logger-intellisense.png" alt="MinimalLogger受限API"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger受限API">
 </figure>
 
 
 
 Behind the scenes,Angular actually sets the `logger` parameter to the  full service registered under the `LoggingService` token 
-which happens to be the `DateLoggerService` that was [provided above](guide/cb-dependency-injection#useclass).
+which happens to be the `DateLoggerService` that was [provided above](guide/dependency-injection-in-action#useclass).
 
 实际上，Angular确实想把`logger`参数设置为注入器里`LoggerService`的完整版本。只是在之前的提供商注册里使用了`useClass`，
 所以该完整版本被`DateLoggerService`取代了。
@@ -1119,8 +1118,8 @@ The following image, which displays the logging date, confirms the point:
 在下面的图片中，显示了日志日期，可以确认这一点：
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/date-logger-entry.png" alt="DateLoggerService entry" width="300px"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
 </figure>
 
 
@@ -1143,7 +1142,7 @@ as in this example.
 `useFactory` 提供商通过调用工厂函数来新建一个依赖对象，如下例所示。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-of-the-month.component.ts" region="use-factory" title="cb-dependency-injection/src/app/hero-of-the-month.component.ts">
+<code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" region="use-factory" title="dependency-injection-in-action/src/app/hero-of-the-month.component.ts">
 
 </code-example>
 
@@ -1171,7 +1170,7 @@ The true provider factory function is the function that `runnersUpFactory` retur
 `runnersUpFactory`自身不是提供商工厂函数。真正的提供商工厂函数是`runnersUpFactory`返回的函数。
 
 
-<code-example path="cb-dependency-injection/src/app/runners-up.ts" region="factory-synopsis" title="runners-up.ts (excerpt)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/runners-up.ts" region="factory-synopsis" title="runners-up.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -1200,7 +1199,7 @@ and Angular injects it into the `runnersUp` parameter of the `HeroOfTheMonthComp
 
 The function retrieves candidate heroes from the `HeroService`,
 takes `2` of them to be the runners-up, and returns their concatenated names.
-Look at the <live-example name="cb-dependency-injection"></live-example>
+Look at the <live-example name="dependency-injection-in-action"></live-example>
 for the full source code.
 
 该函数从`HeroService`获取英雄参赛者，从中取`2`个作为亚军，并把它们的名字拼接起来。请到<live-example name="cb-dependency-injection"></live-example>查看全部原代码。
@@ -1238,7 +1237,7 @@ as the token for a provider of a `LoggerService`.
 在前面的*每月英雄*的例子中，我们用了`MinimalLogger`类作为`LoggerService` 提供商的令牌。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-of-the-month.component.ts" region="use-existing" title="cb-dependency-injection/src/app/hero-of-the-month.component.ts">
+<code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" region="use-existing" title="dependency-injection-in-action/src/app/hero-of-the-month.component.ts">
 
 </code-example>
 
@@ -1249,7 +1248,7 @@ The `MinimalLogger` is an abstract class.
 该`MinimalLogger`是一个抽象类。
 
 
-<code-example path="cb-dependency-injection/src/app/minimal-logger.service.ts" title="cb-dependency-injection/src/app/minimal-logger.service.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/minimal-logger.service.ts" title="dependency-injection-in-action/src/app/minimal-logger.service.ts" linenums="false">
 
 </code-example>
 
@@ -1262,7 +1261,7 @@ But *no class* in this application inherits from `MinimalLogger`.
 
 The `LoggerService` and the `DateLoggerService` _could_ have inherited from `MinimalLogger`.
 They could have _implemented_ it instead in the manner of an interface.
-But they did neither. 
+But they did neither.
 The `MinimalLogger` is used exclusively as a dependency injection token.
 
 `LoggerService`和`DateLoggerService`*本可以*从`MinimalLogger`中继承。
@@ -1313,7 +1312,7 @@ The `MinimalLogger` transpiles to this unoptimized, pre-minified JavaScript for
 当然，一个真实的类会占用内存。为了节省内存占用，该类应该***没有具体的实现***。`MinimalLogger`会被转译成下面这段没有优化过的，尚未最小化的JavaScript：
 
 
-<code-example path="cb-dependency-injection/src/app/minimal-logger.service.ts" region="minimal-logger-transpiled" title="cb-dependency-injection/src/app/minimal-logger.service.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/minimal-logger.service.ts" region="minimal-logger-transpiled" title="dependency-injection-in-action/src/app/minimal-logger.service.ts" linenums="false">
 
 </code-example>
 
@@ -1352,7 +1351,7 @@ in the *title* value provider and in the *runnersUp* factory provider.
 `InjectionToken`具有这些特征。在*Hero of the Month*例子中遇见它们两次，一个是*title*的值，一个是*runnersUp* 工厂提供商。
 
 
-<code-example path="cb-dependency-injection/src/app/hero-of-the-month.component.ts" region="provide-injection-token" title="cb-dependency-injection/src/app/hero-of-the-month.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" region="provide-injection-token" title="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" linenums="false">
 
 </code-example>
 
@@ -1363,7 +1362,7 @@ You created the `TITLE` token like this:
 这样创建`TITLE`令牌：
 
 
-<code-example path="cb-dependency-injection/src/app/hero-of-the-month.component.ts" region="injection-token" title="cb-dependency-injection/src/app/hero-of-the-month.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" region="injection-token" title="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" linenums="false">
 
 </code-example>
 
@@ -1397,8 +1396,8 @@ to display a *sorted* list of heroes.
 在这个生造的例子里，`SortedHeroesComponent`继承自`HeroesBaseComponent`，显示一个*被排序*的英雄列表。
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/sorted-heroes.png" alt="Sorted Heroes"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
 </figure>
 
 
@@ -1410,7 +1409,7 @@ and displays them in the order they arrive from the database.
 `HeroesBaseComponent`能自己独立运行。它在自己的实例里要求`HeroService`，用来得到英雄，并将它们按照数据库返回的顺序显示出来。
 
 
-<code-example path="cb-dependency-injection/src/app/sorted-heroes.component.ts" region="heroes-base" title="src/app/sorted-heroes.component.ts (HeroesBaseComponent)">
+<code-example path="dependency-injection-in-action/src/app/sorted-heroes.component.ts" region="heroes-base" title="src/app/sorted-heroes.component.ts (HeroesBaseComponent)">
 
 </code-example>
 
@@ -1447,7 +1446,7 @@ then pass it down to the base class inside the constructor.
 可惜，Angular不能直接在基类里直接注入`HeroService`。必须在*这个*组件里再次提供`HeroService`，然后通过构造函数传给基类。
 
 
-<code-example path="cb-dependency-injection/src/app/sorted-heroes.component.ts" region="sorted-heroes" title="src/app/sorted-heroes.component.ts (SortedHeroesComponent)">
+<code-example path="dependency-injection-in-action/src/app/sorted-heroes.component.ts" region="sorted-heroes" title="src/app/sorted-heroes.component.ts (SortedHeroesComponent)">
 
 </code-example>
 
@@ -1480,8 +1479,8 @@ These complications argue for *avoiding component inheritance*.
 ## 通过注入来找到一个父组件
 
 Application components often need to share information.
-More loosely coupled techniques such as data binding and service sharing 
-are preferable. But sometimes it makes sense for one component 
+More loosely coupled techniques such as data binding and service sharing
+are preferable. But sometimes it makes sense for one component
 to have a direct reference to another component
 perhaps to access values or call methods on that component.
 
@@ -1495,7 +1494,7 @@ there is no public API for inspecting and traversing that tree.
 在Angular里，获取一个组件的引用比较复杂。虽然Angular应用程序是一个组件树，但它没有公开的API来在该树中巡查和穿梭。
 
 There is an API for acquiring a child reference.
-Check out `Query`, `QueryList`, `ViewChildren`, and `ContentChildren` 
+Check out `Query`, `QueryList`, `ViewChildren`, and `ContentChildren`
 in the [API Reference](api/).
 
 有一个API可以获取子级的引用(请看[API参考手册](api/)中的`Query`, `QueryList`, `ViewChildren`,和`ContentChildren`)。
@@ -1527,7 +1526,7 @@ In the following example, the parent `AlexComponent` has several children includ
 {@a alex}
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="alex-1" title="parent-finder.component.ts (AlexComponent v.1)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-1" title="parent-finder.component.ts (AlexComponent v.1)" linenums="false">
 
 </code-example>
 
@@ -1539,15 +1538,15 @@ after injecting an `AlexComponent` into her constructor:
 在注入*AlexComponent`进来后，*Cathy*报告它是否对*Alex*有访问权：
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="cathy" title="parent-finder.component.ts (CathyComponent)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="cathy" title="parent-finder.component.ts (CathyComponent)" linenums="false">
 
 </code-example>
 
 
 
-Notice that even though the [@Optional](guide/cb-dependency-injection#optional) qualifier 
+Notice that even though the [@Optional](guide/dependency-injection-in-action#optional) qualifier
 is there for safety,
-the <live-example name="cb-dependency-injection"></live-example>
+the <live-example name="dependency-injection-in-action"></live-example>
 confirms that the `alex` parameter is set.
 
 安全起见，我们添加了[@Optional](guide/cb-dependency-injection#optional)装饰器，但是<live-example name="cb-dependency-injection"></live-example>显示`alex`参数确实被设置了。
@@ -1583,8 +1582,8 @@ whose API your `NewsComponent` understands.
 
 
 Looking for components that implement an interface would be better.
-That's not possible because TypeScript interfaces disappear 
-from the transpiled JavaScript, which doesn't support interfaces. 
+That's not possible because TypeScript interfaces disappear
+from the transpiled JavaScript, which doesn't support interfaces.
 There's no artifact to look for.
 
 更好的方式是通过接口来寻找实现了它的组件。但这是不可能的，因为TypeScript的接口在编译成JavaScript以后就消失了，JavaScript不支持接口。我们没有东西可查。
@@ -1594,18 +1593,17 @@ There's no artifact to look for.
 
 
 
-This isn't necessarily good design. 
-This example is examining *whether a component can inject its parent via the parent's base class*.
+This isn't necessarily good design.
+This example is examining *whether a component can 
+inject its parent via the parent's base class*.这并不是好的设计。问题是*一个组件是否能通过它父组件的基类来注入它的父组件呢*？
 
-这并不是好的设计。问题是*一个组件是否能通过它父组件的基类来注入它的父组件呢*？
-
-The sample's `CraigComponent` explores this question. [Looking back](guide/cb-dependency-injection#alex) ,
+The sample's `CraigComponent` explores this question. [Looking back](guide/dependency-injection-in-action#alex) ,
 you see that the `Alex` component *extends* (*inherits*) from a class named `Base`.
 
 `CraigComponent`例子探究了这个问题。[往回看Alex]{#alex}，我们看到`Alex`组件*扩展*(*派生*)自一个叫`Base`的类。
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="alex-class-signature" title="parent-finder.component.ts (Alex class signature)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-class-signature" title="parent-finder.component.ts (Alex class signature)" linenums="false">
 
 </code-example>
 
@@ -1616,14 +1614,14 @@ The `CraigComponent` tries to inject `Base` into its `alex` constructor paramete
 `CraigComponent`试图把`Base`注入到到它的`alex`构造函数参数，来报告是否成功。
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="craig" title="parent-finder.component.ts (CraigComponent)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="craig" title="parent-finder.component.ts (CraigComponent)" linenums="false">
 
 </code-example>
 
 
 
 Unfortunately, this does not work.
-The <live-example name="cb-dependency-injection"></live-example>
+The <live-example name="dependency-injection-in-action"></live-example>
 confirms that the `alex` parameter is null.
 *You cannot inject a parent by its base class.*
 
@@ -1638,7 +1636,7 @@ confirms that the `alex` parameter is null.
 
 ### 通过类-接口找到父组件
 
-You can find a parent component with a [class-interface](guide/cb-dependency-injection#class-interface).
+You can find a parent component with a [class-interface](guide/dependency-injection-in-action#class-interface).
 
 可以通过[类-接口](guide/cb-dependency-injection#class-interface)找到一个父组件。
 
@@ -1647,11 +1645,11 @@ The parent must cooperate by providing an *alias* to itself in the name of a *cl
 该父组件必须通过提供一个与*类-接口*令牌同名的*别名*来与之合作。
 
 Recall that Angular always adds a component instance to its own injector;
-that's why you could inject *Alex* into *Cathy* [earlier](guide/cb-dependency-injection#known-parent).
+that's why you could inject *Alex* into *Cathy* [earlier](guide/dependency-injection-in-action#known-parent).
 
 请记住Angular总是从它自己的注入器添加一个组件实例；这就是为什么在[之前](guide/cb-dependency-injection#known-parent)可以*Alex*注入到*Carol*。
 
-Write an [*alias provider*](guide/cb-dependency-injection#useexisting)&mdash;a `provide` object literal with a `useExisting` 
+Write an [*alias provider*](guide/dependency-injection-in-action#useexisting)&mdash;a `provide` object literal with a `useExisting`
 definition&mdash;that creates an *alternative* way to inject the same component instance
 and add that provider to the `providers` array of the `@Component` metadata for the `AlexComponent`:
 
@@ -1662,24 +1660,24 @@ and add that provider to the `providers` array of the `@Component` metadata for
 {@a alex-providers}
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="alex-providers" title="parent-finder.component.ts (AlexComponent providers)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-providers" title="parent-finder.component.ts (AlexComponent providers)" linenums="false">
 
 </code-example>
 
 
 
-[Parent](guide/cb-dependency-injection#parent-token) is the provider's *class-interface* token.
-The [*forwardRef*](guide/cb-dependency-injection#forwardref) breaks the circular reference you just created by having the `AlexComponent` refer to itself.
+[Parent](guide/dependency-injection-in-action#parent-token) is the provider's *class-interface* token.
+The [*forwardRef*](guide/dependency-injection-in-action#forwardref) breaks the circular reference you just created by having the `AlexComponent` refer to itself.
 
 [Parent](guide/cb-dependency-injection#parent-token)是该提供商的*类-接口*令牌。`AlexComponent`引用了自身，造成循环引用，使用[*forwardRef*](guide/cb-dependency-injection#forwardRef)打破了该循环。
 
-*Carol*, the third of *Alex*'s child components, injects the parent into its `parent` parameter, 
+*Carol*, the third of *Alex*'s child components, injects the parent into its `parent` parameter,
 the same way you've done it before:
 
 *Carol*，*Alex*的第三个子组件，把父级注入到了自己的`parent`参数，和之前做的一样：
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="carol-class" title="parent-finder.component.ts (CarolComponent class)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="carol-class" title="parent-finder.component.ts (CarolComponent class)" linenums="false">
 
 </code-example>
 
@@ -1690,8 +1688,8 @@ Here's *Alex* and family in action:
 下面是*Alex*和其家庭的运行结果：
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/alex.png" alt="Alex in action"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action">
 </figure>
 
 
@@ -1721,14 +1719,14 @@ Here's *Barry*:
 下面是*Barry*的代码：
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="barry" title="parent-finder.component.ts (BarryComponent)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="barry" title="parent-finder.component.ts (BarryComponent)" linenums="false">
 
 </code-example>
 
 
 
-*Barry*'s `providers` array looks just like [*Alex*'s](guide/cb-dependency-injection#alex-providers).
-If you're going to keep writing [*alias providers*](guide/cb-dependency-injection#useexisting) like this you should create a [helper function](guide/cb-dependency-injection#provideparent).
+*Barry*'s `providers` array looks just like [*Alex*'s](guide/dependency-injection-in-action#alex-providers).
+If you're going to keep writing [*alias providers*](guide/dependency-injection-in-action#useexisting) like this you should create a [helper function](guide/dependency-injection-in-action#provideparent).
 
 *Barry*的`providers`数组看起来很像[*Alex*的那个](guide/cb-dependency-injection#alex-providers).
 如果准备一直像这样编写[*别名提供商*](guide/cb-dependency-injection#useexisting)的话，我们应该建立一个[帮助函数](guide/cb-dependency-injection#provideparent)。
@@ -1740,11 +1738,11 @@ For now, focus on *Barry*'s constructor:
 
 <code-tabs>
 
-  <code-pane title="Barry's constructor" path="cb-dependency-injection/src/app/parent-finder.component.ts" region="barry-ctor">
+  <code-pane title="Barry's constructor" path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="barry-ctor">
 
   </code-pane>
 
-  <code-pane title="Carol's constructor" path="cb-dependency-injection/src/app/parent-finder.component.ts" region="carol-ctor">
+  <code-pane title="Carol's constructor" path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="carol-ctor">
 
   </code-pane>
 
@@ -1780,8 +1778,8 @@ Here's *Alice*, *Barry* and family in action:
 这里是*Alice*，*Barry*和该家庭的操作演示：
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dependency-injection/alice.png" alt="Alice in action"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action">
 </figure>
 
 
@@ -1793,7 +1791,7 @@ Here's *Alice*, *Barry* and family in action:
 
 ### *Parent*类-接口
 
-You [learned earlier](guide/cb-dependency-injection#class-interface) that a *class-interface* is an abstract class used as an interface rather than as a base class.
+You [learned earlier](guide/dependency-injection-in-action#class-interface) that a *class-interface* is an abstract class used as an interface rather than as a base class.
 
 我们[以前学过](guide/cb-dependency-injection#class-interface)：*类-接口*是一个抽象类，被当成一个接口使用，而非基类。
 
@@ -1802,7 +1800,7 @@ The example defines a `Parent` *class-interface*.
 我们的例子定义了一个`Parent`*类-接口*。
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="parent" title="parent-finder.component.ts (Parent class-interface)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="parent" title="parent-finder.component.ts (Parent class-interface)" linenums="false">
 
 </code-example>
 
@@ -1820,7 +1818,7 @@ A component that could serve as a parent *should* implement the *class-interface
 一个能用做父级的组件*应该*实现*类-接口*，和下面的`AliceComponent`的做法一样：
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="alice-class-signature" title="parent-finder.component.ts (AliceComponent class signature)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alice-class-signature" title="parent-finder.component.ts (AliceComponent class signature)" linenums="false">
 
 </code-example>
 
@@ -1833,7 +1831,7 @@ its class signature doesn't mention `Parent`:
 这样做可以提升代码的清晰度，但严格来说并不是必须的。虽然`AlexComponent`有一个`name`属性(来自`Base`类的要求)，但它的类签名并不需要提及`Parent`。
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="alex-class-signature" title="parent-finder.component.ts (AlexComponent class signature)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-class-signature" title="parent-finder.component.ts (AlexComponent class signature)" linenums="false">
 
 </code-example>
 
@@ -1861,12 +1859,12 @@ It doesn't in this example *only* to demonstrate that the code will compile and
 ### *provideParent()*助手函数
 
 Writing variations of the same parent *alias provider* gets old quickly,
-especially this awful mouthful with a [*forwardRef*](guide/cb-dependency-injection#forwardref):
+especially this awful mouthful with a [*forwardRef*](guide/dependency-injection-in-action#forwardref):
 
 编写父组件相同的各种*别名提供商*很快就会变得啰嗦，在用[*forwardRef](guide/cb-dependency-injection#forwardRef)的时候尤其绕口：
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="alex-providers" title="cb-dependency-injection/src/app/parent-finder.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-providers" title="dependency-injection-in-action/src/app/parent-finder.component.ts" linenums="false">
 
 </code-example>
 
@@ -1877,7 +1875,7 @@ You can extract that logic into a helper function like this:
 可以像这样把该逻辑抽取到一个助手函数里：
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="provide-the-parent" title="cb-dependency-injection/src/app/parent-finder.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="provide-the-parent" title="dependency-injection-in-action/src/app/parent-finder.component.ts" linenums="false">
 
 </code-example>
 
@@ -1888,7 +1886,7 @@ Now you can add a simpler, more meaningful parent provider to your components:
 现在就可以为组件添加一个更简单、直观的父级提供商了：
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="alice-providers" title="cb-dependency-injection/src/app/parent-finder.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alice-providers" title="dependency-injection-in-action/src/app/parent-finder.component.ts" linenums="false">
 
 </code-example>
 
@@ -1904,7 +1902,7 @@ Here's a revised version that defaults to `parent` but also accepts an optional
 下面是一个修改版本，默认接受一个`Parent`，但同时接受一个可选的第二参数，可以用来指定一个不同的父级*类-接口*。
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="provide-parent" title="cb-dependency-injection/src/app/parent-finder.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="provide-parent" title="dependency-injection-in-action/src/app/parent-finder.component.ts" linenums="false">
 
 </code-example>
 
@@ -1915,7 +1913,7 @@ And here's how you could use it with a different parent type:
 下面的代码演示了如何使它添加一个不同类型的父级：
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="beth-providers" title="cb-dependency-injection/src/app/parent-finder.component.ts" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="beth-providers" title="dependency-injection-in-action/src/app/parent-finder.component.ts" linenums="false">
 
 </code-example>
 
@@ -1964,7 +1962,7 @@ Break the circularity with `forwardRef`:
 我们使用`forwardRef`来打破这种循环：
 
 
-<code-example path="cb-dependency-injection/src/app/parent-finder.component.ts" region="alex-providers" title="parent-finder.component.ts (AlexComponent providers)" linenums="false">
+<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-providers" title="parent-finder.component.ts (AlexComponent providers)" linenums="false">
 
 </code-example>
 
diff --git a/aio/content/guide/dependency-injection.md b/aio/content/guide/dependency-injection.md
index c0b4bb912d..6d75cd7672 100644
--- a/aio/content/guide/dependency-injection.md
+++ b/aio/content/guide/dependency-injection.md
@@ -1,12 +1,6 @@
-@title
-依赖注入
-
-@intro
-Angular 的依赖注入系统能够即时地创建和交付所依赖的服务。
-
-@description
-
+# Dependency Injection
 
+# 依赖注入
 
 **Dependency injection** is an important application design pattern.
 Angular has its own dependency injection framework, and
@@ -24,116 +18,11 @@ and [how to use it](guide/dependency-injection#angular-di) in an Angular app.
   然后，将学习在 Angular 应用中该[如何使用它](guide/dependency-injection#angular-di)。
 
 
-# Contents
-
-* [Why dependency injection?](guide/dependency-injection#why-di)
-
-  [为什么需要依赖注入？](guide/dependency-injection#why-di)
-  
-* [Angular dependency injection](guide/dependency-injection#angular-dependency-injection)
-
-  [Angular的依赖注入](guide/dependency-injection#angular-dependency-injection)
-
-  * [Configuring the injector](guide/dependency-injection#injector-config)
-  
-    [配置注入器](guide/dependency-injection#injector-config)
-  
-  * [Registering providers in an `NgModule`](guide/dependency-injection#register-providers-ngmodule)
-  
-    [在`NgModule`中注册提供商](guide/dependency-injection#register-providers-ngmodule)
-    
-  * [Registering providers in a component](guide/dependency-injection#register-providers-component)
-  
-    [在组件中注册提供商](guide/dependency-injection#register-providers-component)
-  
-  * [When to use `NgModule` versus an application component](guide/dependency-injection#ngmodule-vs-comp)
-  
-    [什么时候使用`NgModule`？什么时候使用应用组件？](guide/dependency-injection#ngmodule-vs-comp)
-  
-  * [Preparing the `HeroListComponent` for injection](guide/dependency-injection#prep-for-injection)
-  
-    [为依赖注入准备`HeroListComponent`](guide/dependency-injection#prep-for-injection)
-  
-  * [Implicit injector creation](guide/dependency-injection#di-metadata)
-  
-    [隐式依赖注入](guide/dependency-injection#di-metadata)
-  
-  * [Singleton services](guide/dependency-injection#singleton-services)
-  
-    [单例服务](guide/dependency-injection#singleton-services)
-  
-  * [Testing the component](guide/dependency-injection#testing-the-component)
-  
-    [测试组件](guide/dependency-injection#testing-the-component)
-  
-  * [When the service needs a service](guide/dependency-injection#service-needs-service)
-  
-    [什么时候服务需要另一个服务](guide/dependency-injection#service-needs-service)
-  
-  * [Why `@Injectable()`?](guide/dependency-injection#injectable)
-  
-    [为什么要加`@Injectable()`？](guide/dependency-injection#injectable)
-    
-* [Creating and registering a logger service](guide/dependency-injection#logger-service)
-
-  [创建并注册日志服务](guide/dependency-injection#logger-service)
-
-* [Injector providers](guide/dependency-injection#injector-providers)
-
-  [注入器提供商](guide/dependency-injection#injector-providers)
-
-  * [The `Provider` class and `provide` object literal](guide/dependency-injection#provide)
-  
-  * [`Provider`类和`provide`对象字面量](guide/dependency-injection#provide)
-  
-  * [Alternative class providers](guide/dependency-injection#class-provider)
-  
-    [代用类提供商](guide/dependency-injection#class-provider)
-    
-  * [Class provider with dependencies](guide/dependency-injection#class-provider-dependencies)
-  
-    [带有依赖的类提供商](guide/dependency-injection#class-provider-dependencies)
-    
-  * [Aliased class providers](guide/dependency-injection#aliased-class-providers)
-  
-    [别名类提供商](guide/dependency-injection#aliased-class-providers)
-    
-  * [Value providers](guide/dependency-injection#value-provider)
-  
-    [值提供商](guide/dependency-injection#value-provider)
-  
-  * [Factory providers](guide/dependency-injection#factory-provider)
-  
-    [工厂提供商](guide/dependency-injection#factory-provider)
-  
-* [Dependency injection tokens](guide/dependency-injection#dependency-injection-tokens)
-
-  [依赖注入令牌](guide/dependency-injection#dependency-injection-tokens)
-
-  * [Non-class dependencies](guide/dependency-injection#non-class-dependencies)
-
-    [非“类”依赖](guide/dependency-injection#non-class-dependencies)
-
-  * [`InjectionToken`](guide/dependency-injection#injection-token)
-
-* [Optional dependencies](guide/dependency-injection#optional)
-
-  [可选依赖](guide/dependency-injection#optional)
-
-* [Summary](guide/dependency-injection#summary)
-
-  [总结](guide/dependency-injection#summary)
-
-* [Appendix: Working with injectors directly](guide/dependency-injection#explicit-injector)
-
-  [附录：直接使用注入器](guide/dependency-injection#explicit-injector)
-
-
 Run the <live-example></live-example>.
 
 运行<live-example></live-example>.
 
-
+{@a why-di }
 
 ## Why dependency injection?
 ## 为什么需要依赖注入？
@@ -423,6 +312,7 @@ read on to see how it is implemented in Angular.
 现在，我们知道了什么是依赖注入，以及它的优点。再来看看它在 Angular 中是怎么实现的。
 
 
+{@a angular-di}
 
 ## Angular dependency injection
 ## Angular 依赖注入
@@ -674,13 +564,12 @@ the `HeroesComponent`.
 
 
 
-Also see *"Should I add app-wide providers to the root `AppModule` or the root `AppComponent`?"* in the [NgModule FAQ](cookbook/ngmodule-faq#q-root-component-or-module).
+Also see *"Should I add app-wide providers to the root `AppModule` or the root `AppComponent`?"* in the [NgModule FAQ](guide/ngmodule-faq#q-root-component-or-module).
  
 参见 [NgModule FAQ](cookbook/ngmodule-faq#q-root-component-or-module) 一章的
   **我该把“全应用级”提供商加到根模块`AppModule`还是根组件`AppComponent`？**
 
 
-
 </div>
 
 
@@ -900,7 +789,7 @@ You call that property within the `getHeroes()` method when anyone asks for hero
 
 ### 为什么要用 _@Injectable()_?
 
-**<a href="../api/core/index/Injectable-decorator.html">@Injectable()</a>** marks a class as available to an
+**[@Injectable()](api/core/Injectable)** marks a class as available to an
 injector for instantiation. Generally speaking, an injector reports an
 error when trying to instantiate a class that is not marked as
 `@Injectable()`.
@@ -993,7 +882,7 @@ like `HeroesComponent`. So why doesn't `HeroesComponent` have
 You *can* add it if you really want to. It isn't necessary because the
 `HeroesComponent` is already marked with `@Component`, and this
 decorator class (like `@Directive` and `@Pipe`, which you learn about later)
-is a subtype of <a href="../api/core/index/Injectable-decorator.html">@Injectable()</a>.  It is in
+is a subtype of [@Injectable()](api/core/Injectable).  It is in
 fact `@Injectable()` decorators that
 identify a class as a target for instantiation by an injector.
 
@@ -1026,7 +915,7 @@ TypeScript 编译器默认忽略元数据。
 编译器就会在生成的 JavaScript 中，为_每一个至少拥有一个装饰器的类_添加元数据。
 
 While any decorator will trigger this effect, mark the service class with the
-<a href="../api/core/index/Injectable-decorator.html">@Injectable()</a> decorator
+[@Injectable()](api/core/Injectable) decorator
 to make the intent clear.
 
 当然，任何装饰器都会触发这个效果，用 <a href="../api/core/index/Injectable-decorator.html">@Injectable()</a> 来标识服务
@@ -1063,7 +952,7 @@ The application will fail mysteriously if you forget the parentheses.
 </div>
 
 
-
+{@a logger-service}
 
 ## Creating and registering a logger service
 
@@ -1134,6 +1023,7 @@ The chain of creations started with the `Logger` provider. *Providers* are the s
 这个“创建链”始于`Logger`的提供商。这个*提供商*就是下一节的主题 。
 
 
+{@a providers}
 
 ## Injector providers
 ## 注入器的提供商们
@@ -1524,7 +1414,7 @@ Here you see the new and the old implementation side-by-side:
 </code-tabs>
 
 
-
+{@a token}
 
 ## Dependency injection tokens
 ## 依赖注入令牌
@@ -1680,7 +1570,7 @@ TypeScript 接口不会出现在生成的 JavaScript 代码中。
 ### _InjectionToken_
 
 One solution to choosing a provider token for non-class dependencies is
-to define and use an <a href="../api/core/index/InjectionToken-class.html"><b>InjectionToken</b></a>.
+to define and use an [*InjectionToken*](api/core/InjectionToken).
 The definition of such a token looks like this:
 
 解决方案是为非类依赖定义和使用<a href="../api/core/index/InjectionToken-class.html"><b>InjectionToken</b></a>作为提供商令牌。
@@ -1736,15 +1626,11 @@ it supports typing of the configuration object within the class.
 
 
 
-Aternatively, you can provide and inject the configuration object in an ngModule like `AppModule`.
+Alternatively, you can provide and inject the configuration object in an ngModule like `AppModule`.
 
 或者在 ngModule 中提供并注入这个配置对象，如`AppModule`。
 
-
-<code-example path="dependency-injection/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (ngmodule-providers)" region="ngmodule-providers">
-
-</code-example>
-
+<code-example path="dependency-injection/src/app/app.module.ts" region="ngmodule-providers" title="src/app/app.module.ts (ngmodule-providers)"></code-example>
 
 
 <div id='optional'>
@@ -1805,7 +1691,7 @@ nested injectors, in
 Angular 依赖注入比前面描述的更能干。
 学习更多高级特性，如对嵌套注入器的支持，见[多级依赖注入](guide/hierarchical-dependency-injection)一章。
 
-
+{@a explicit-injector}
 
 ## Appendix: Working with injectors directly
 ## 附录：直接使用注入器
@@ -1878,8 +1764,7 @@ must acquire services generically and dynamically.
 
 </div>
 
-
-
+{@a one-class-per-file}
 
 ## Appendix: Why have one class per file
 
diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md
index 3338f43f26..d7531a14bb 100644
--- a/aio/content/guide/deployment.md
+++ b/aio/content/guide/deployment.md
@@ -1,11 +1,6 @@
-@title
-部署
-
-@intro
-如何部署Angular应用。
-
-@description
+# Deployment
 
+# 部署
 
 This page describes tools and techniques for deploy and optimize your Angular application.
 
@@ -14,71 +9,6 @@ This page describes tools and techniques for deploy and optimize your Angular ap
 
 {@a toc}
 
-
-## Table of contents
-
-## 目录
-
-* [Overview](guide/deployment#overview)
-
-  [概览](guide/deployment#overview)
-
-* [Simplest deployment possible](guide/deployment#dev-deploy)
-
-  [最简化的部署方式](guide/deployment#dev-deploy)
-
-* [Optimize for production](guide/deployment#optimize)
-
-  [为生产环境优化](guide/deployment#optimize)
-
-  * [Ahead-of-Time (AOT) compilation](guide/deployment#aot)
-
-    [预编译（AOT）](guide/deployment#aot)
-
-  * [Webpack](guide/deployment#webpack)
-
-  * [Tree shaking with _rollup_](guide/deployment#rollup)
-
-    [使用`rollup`进行摇树优化](guide/deployment#rollup)
-
-  * [Pruned libraries](guide/deployment#prune)
-
-    [库的修剪](guide/deployment#prune)
-
-  * [Measure performance first](guide/deployment#measure)
-
-    [首先，度量性能](guide/deployment#measure)
-
-* [Angular configuration](guide/deployment#angular-configuration)
-
-  [Angular配置](guide/deployment#angular-configuration)
-
-  * [The `base` tag](guide/deployment#base-tag)
-
-    [`base`标签](guide/deployment#base-tag)
-
-  * [Enable production mode](guide/deployment#enable-prod-mode)
-
-    [启用生产模式](guide/deployment#enable-prod-mode)
-
-  * [Lazy loading](guide/deployment#lazy-loading)
-
-    [惰性加载](guide/deployment#lazy-loading)
-
-* [Server configuration](guide/deployment#server-configuration)
-
-  [服务器配置](guide/deployment#server-configuration)
-
-  * [Routed apps must fallback to `index.html`](guide/deployment#fallback)
-
-    [带路由的应用必须以`index.html`作为后备页面](guide/deployment#fallback)
-
-  * [CORS: requesting services from a different server](guide/deployment#cors)
-
-    [CORS：从其它服务器请求服务](guide/deployment#cors)
-
-
-
 {@a overview}
 
 
@@ -98,7 +28,7 @@ The techniques progress from _easy but suboptimal_ to _more optimal and more inv
 
 * [_Ahead of Time_ compilation (AOT)](guide/deployment#aot "AOT Compilation") is the first of
 [several optimization strategies](guide/deployment#optimize).
-You'll also want to read the [detailed instructions in the AOT Cookbook](cookbook/aot-compiler "AOT Cookbook").
+You'll also want to read the [detailed instructions in the AOT Cookbook](guide/aot-compiler "AOT Cookbook").
 
   [*预编译*(AOT)](guide/deployment#aot "AOT Compilation")是第一种[优化策略](guide/deployment#optimize)。
 详情参见[烹饪宝典中的AOT章节](cookbook/aot-compiler "AOT Cookbook")。
@@ -261,7 +191,7 @@ Notice the `paths` key:
 
 In the standard SystemJS config, the `npm` path points to the `node_modules/`.
 In this server config, it points to
-<a href="https://unpkg.com/" target="_blank" title="unpkg.com">https://unpkg.com</a>,
+<a href="https://unpkg.com/" title="unpkg.com">https://unpkg.com</a>,
 a site that hosts _npm packages_,
 and loads them from the web directly.
 There are other service providers that do the same thing.
@@ -371,7 +301,7 @@ Although deploying directly from the development environment works, it's far fro
 
 The client makes many small requests for individual application code and template files,
 a fact you can quickly confirm by looking at the network tab in a browser's developer tools.
-Each small file download can spend more time communicating with the server than tranfering data.
+Each small file download can spend more time communicating with the server than transferring data.
 
 客户端发起了很多小的请求来取得一个个单独的应用代码和模板文件，从浏览器开发工具的Network标签中就可以确认这一点。
 每个小文件都会花费很多时间在与服务器建立通讯而不是传输内容上。
@@ -387,7 +317,7 @@ can be significantly larger than is strictly necessary to execute the applicatio
 
 The many requests and large payloads mean
 the app takes longer to launch than it would if you optimized it.
-Several seconds may pass (or worse) before the user can see or do anything userful.
+Several seconds may pass (or worse) before the user can see or do anything useful.
 
 大量请求和载荷意味着应用相对于优化过的版本会花更多时间进行启动。
 当用户看到什么或做什么有用的事情之前，就已经过去了（浪费了）很多秒。
@@ -477,7 +407,7 @@ Apps compiled with AOT launch faster for several reasons.
 
   编译器会丢弃那些摇树优化（tree-shaking）工具能排除的代码。
 
-Learn more about AOT Compilation in the [AOT Cookbook](cookbook/aot-compiler "AOT Cookbook")
+Learn more about AOT Compilation in the [AOT Cookbook](guide/aot-compiler "AOT Cookbook")
 which describes running the AOT compiler from the command line
 and using [_rollup_](guide/deployment#rollup) for bundling, minification, uglification and tree shaking.
 
@@ -492,7 +422,7 @@ and using [_rollup_](guide/deployment#rollup) for bundling, minification, uglifi
 
 ### Webpack（与AOT）
 
-<a href="https://webpack.js.org/" target="_blank" title="Webpack 2">Webpack 2</a> is another
+<a href="https://webpack.js.org/" title="Webpack 2">Webpack 2</a> is another
 great option for inlining templates and style-sheets, for bundling, minifying, and uglifying the application.
 The "[Webpack: an introduction](guide/webpack "Webpack: an introduction")" guide will get you started
 using webpack with Angular.
@@ -501,7 +431,7 @@ using webpack with Angular.
 "[Webpack简介](guide/webpack "Webpack: an introduction")"一章中将会教你如何配合Angular使用Webpack。
 
 Consider configuring _Webpack_ with the official
-<a href="https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack" target="_blank" title="Ahead-of-Time Webpack Plugin">
+<a href="https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack" title="Ahead-of-Time Webpack Plugin">
 Angular Ahead-of-Time Webpack Plugin</a>.
 This plugin transpiles the TypeScript application code,
 bundles lazy loaded `NgModules` separately,
@@ -532,10 +462,10 @@ If a library exports something that the application doesn't import, a tree shaki
 如果一个库导出了一些东西，但是应用代码没有导入过它，摇树工具就会从代码中移除它。
 
 Tree shaking was popularized by
-<a href="http://rollupjs.org/" target="_blank" title="Rollup">Rollup</a>, a popular tool with an ecosystem of
+<a href="http://rollupjs.org/" title="Rollup">Rollup</a>, a popular tool with an ecosystem of
 plugins for bundling, minification, and uglification.
 Learn more about tree shaking and dead code elmination in
-<a href="https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80#.15ih9cyvl" target="_blank" title="Tree-shaking and Dead Code Elimination">
+<a href="https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80#.15ih9cyvl" title="Tree-shaking and Dead Code Elimination">
 this post</a> by rollup-creator, Rich Harris.
 
 常用的摇树优化工具是<a href="http://rollupjs.org/" target="_blank" title="Rollup">Rollup</a>，一个带有查件的生态系统，可以完成打包、最小化和混淆。
@@ -586,7 +516,7 @@ You should measure the app's actual behavior when running in the environments th
 我们应该在那些最重要的环境中实际运行，来度量应用的实际行为。
 
 The
-<a href="https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing" target="_blank" title="Chrome DevTools Network Performance">
+<a href="https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing" title="Chrome DevTools Network Performance">
 Chrome DevTools Network Performance page</a> is a good place to start learning about measuring performance.
 
 <a href="https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing" target="_blank" title="Chrome DevTools Network Performance">
@@ -618,7 +548,7 @@ Angular configuration can make the difference between whether the app launches q
 
 ### `base`标签
 
-The HTML [_&lt;base href="..."/&gt;_](https://angular.io/docs/ts/latest/guide/router.html#!)
+The HTML [_&lt;base href="..."/&gt;_](/guide/router)
 specifies a base path for resolving relative URLs to assets such as images, scripts, and style sheets.
 For example, given the `<base href="/my/app/">`, the browser resolves a URL such as `some/place/foo.jpg`
 into a server request for `my/app/some/place/foo.jpg`.
@@ -633,7 +563,7 @@ HTML中的[_&lt;base href="..."/&gt;_](https://angular.io/docs/ts/latest/guide/r
 
 
 
-See also the [*APP_BASE_HREF*](api/common/index/APP_BASE_HREF-let "API: APP_BASE_HREF") alternative.
+See also the [*APP_BASE_HREF*](api/common/APP_BASE_HREF "API: APP_BASE_HREF") alternative.
 
 参见另一种备选方案[*APP_BASE_HREF*](api/common/index/APP_BASE_HREF-let "API: APP_BASE_HREF")。
 
@@ -686,7 +616,7 @@ Switching to production mode can make it run faster by disabling development spe
 
 切换到生产模式可以通过禁用开发环境下特有的检查（比如双重变更检测周期）来让应用运行得更快。
 
-To enable [production mode](api/core/index/enableProdMode-function) when running remotely, add the following code to the `main.ts`.
+To enable [production mode](api/core/enableProdMode) when running remotely, add the following code to the `main.ts`.
 
 要在远程运行时启用[生产模式](api/core/index/enableProdMode-function)，请把下列代码添加到`main.ts`中。
 
@@ -960,7 +890,7 @@ and to
 ### 请求来自另一个服务器的服务（CORS）
 
 Angular developers may encounter a
-<a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_blank" title="Cross-origin resource sharing">
+<a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" title="Cross-origin resource sharing">
 <i>cross-origin resource sharing</i></a> error when making a service request (typically a data service request).
 to a server other than the application's own host server.
 Browsers forbid such requests unless the server permits them explicitly.
@@ -971,7 +901,7 @@ Angular开发者在向与该应用的宿主服务器不同域的服务器发起
 There isn't anything the client application can do about these errors.
 The server must be configured to accept the application's requests.
 Read about how to enable CORS for specific servers at
-<a href="http://enable-cors.org/server.html" target="_blank" title="Enabling CORS server">enable-cors.org</a>.
+<a href="http://enable-cors.org/server.html" title="Enabling CORS server">enable-cors.org</a>.
 
 客户端应用对这种错误无能为力。
 服务器必须配置成可以接受来自该应用的请求。
@@ -983,10 +913,5 @@ Read about how to enable CORS for specific servers at
 
 
 ## Next steps
-
-## 下一步
-
-If you want to go beyond the [simple _copy-deploy_](guide/deployment#dev-deploy "Simplest deployment possible") approach,
-read the [AOT Cookbook](cookbook/aot-compiler "AOT Cookbook") next.
-
-如果我们准备超越[简单*复制*部署](guide/deployment#dev-deploy "Simplest deployment possible")的方式，请参阅[烹饪宝典中的AOT部分](cookbook/aot-compiler "AOT Cookbook")。
\ No newline at end of file
+ ## 下一步If you want to go beyond the [simple _copy-deploy_](guide/deployment#dev-deploy "Simplest deployment possible") approach,
+ read the [AOT Cookbook](guide/aot-compiler "AOT Cookbook") next.如果我们准备超越[简单*复制*部署](guide/deployment#dev-deploy "Simplest deployment possible")的方式，请参阅[烹饪宝典中的AOT部分](cookbook/aot-compiler "AOT Cookbook")。
\ No newline at end of file
diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md
index 6fcf6d8fc4..d521ac07fe 100644
--- a/aio/content/guide/displaying-data.md
+++ b/aio/content/guide/displaying-data.md
@@ -1,12 +1,6 @@
-@title
-显示数据
-
-@intro
-属性绑定机制把数据显示到用户界面上。
-
-@description
-
+# Displaying Data
 
+# 显示数据
 
 You can display data by binding controls in an HTML template to properties of an Angular component.
 
@@ -24,29 +18,10 @@ The final UI looks like this:
 最终的用户界面是这样的：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/displaying-data/final.png" alt="Final UI"></img>
+<figure>
+  <img src="generated/images/guide/displaying-data/final.png" alt="Final UI">
 </figure>
 
-
-
-# Contents
-
-# 目录
-
-* [Showing component properties with interpolation](guide/displaying-data#interpolation)
-
-  [通过插值表达式显示组件的属性](guide/displaying-data#interpolation)
-
-* [Showing an array property with NgFor](guide/displaying-data#ngFor)
-
-  [通过 NgFor 显示数组型属性](guide/displaying-data#ngFor)
-
-* [Conditional display with NgIf](guide/displaying-data#ngIf)
-
-  [通过 NgIf 实现按条件显示](guide/displaying-data#ngIf)
-
-
 <div class="l-sub-section">
 
 
@@ -60,7 +35,7 @@ snippets described in this page.
 </div>
 
 
-
+{@a interpolation}
 
 ## Showing component properties with interpolation
 
@@ -179,8 +154,8 @@ Now run the app. It should display the title and hero name:
 运行应用。它应该显示出标题和英雄名：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/displaying-data/title-and-hero.png" alt="Title and Hero"></img>
+<figure>
+  <img src="generated/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero">
 </figure>
 
 
@@ -237,6 +212,7 @@ This app uses more terse "variable assignment" style simply for brevity.
 为了让本应用更加简短，它采用了更简单的“变量赋值”风格。
 
 
+{@a ngFor}
 
 ## Showing an array property with ***ngFor**
 
@@ -331,8 +307,8 @@ Now the heroes appear in an unordered list.
 现在，英雄们出现在了一个无序列表中。
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/displaying-data/hero-names-list.png" alt="ngfor之后"></img>
+<figure>
+  <img src="generated/images/guide/displaying-data/hero-names-list.png" alt="ngfor之后">
 </figure>
 
 
@@ -407,7 +383,7 @@ That brief syntax does a lot:
 
 
 
-## Using the Hero class
+### Using the Hero class
 
 ## 使用 Hero 类
 
@@ -442,7 +418,7 @@ Our display looks the same, but now we know much better what a hero really is.
 
 从显示上看还是一样，但现在我们知道了更多英雄信息。
 
-
+{@a ngIf}
 
 ## Conditional display with NgIf
 
@@ -485,7 +461,7 @@ Read more about `ngIf` and `*` in the [ngIf section](guide/template-syntax#ngIf)
 
 
 The template expression inside the double quotes,
-`*ngIf="heros.length > 3"`, looks and behaves much like TypeScript.
+`*ngIf="heroes.length > 3"`, looks and behaves much like TypeScript.
 When the component's list of heroes has more than three items, Angular adds the paragraph
 to the DOM and the message appears. If there are three or fewer items, Angular omits the
 paragraph, so no message appears. For more information,
diff --git a/aio/content/guide/docs-style-guide.md b/aio/content/guide/docs-style-guide.md
new file mode 100644
index 0000000000..8c1b629dca
--- /dev/null
+++ b/aio/content/guide/docs-style-guide.md
@@ -0,0 +1,1262 @@
+# Authors Style Guide
+
+This page presents design and layout guidelines for Angular documentation pages.  These guidelines should be followed by all guide page authors. Deviations must be approved by the documentation editor.
+
+Most guide pages should have [accompanying sample code](#from-code-samples) with 
+[special markup](#source-code-markup) for the code snippets on the page. 
+Code samples should adhere to the 
+[style guide for Angular applications](guide/styleguide "Application Code Style Guide") 
+because readers expect consistency.
+
+For clarity and precision, every guideline on _this_ page is illustrated with a working example, 
+followed by the page markup for that example ... as shown here.
+
+```html
+  followed by the page markup for that example ... as shown here.
+```
+
+## Doc generation and tooling
+
+To make changes to the documentation pages and sample code, clone the [Angular github repository](https://github.com/angular/angular "Angular repo") and go to the `aio/` folder.
+
+The [aio/README.md](https://github.com/angular/angular/blob/master/aio/README.md "AIO ReadMe") explains how to install and use the tools to edit and test your changes. 
+
+Here are a few essential commands for guide page authors.
+
+1. `yarn setup` &mdash; installs packages; builds docs, plunkers, and zips.
+
+1. `yarn docs-watch -- --watch-only` &mdash; watches for saved content changes and refreshes the browser. The (optional) `--watch-only` flag skips the initial docs rebuild.
+
+1. `yarn start`  &mdash;  starts the doc viewer application so you can see your local changes in the browser.
+
+1.  http://localhost:4200/  &mdash;  browse to the app running locally.
+
+## Guide pages
+
+ All but a few guide pages are [markdown](https://daringfireball.net/projects/markdown/syntax "markdown") files with an `.md` extension. 
+
+Every guide page file is stored in the `content/guide` directory. Although the [side navigation](#navigation) panel displays as a hierarchy, the directory is flat with no sub-folders. 
+The flat folder approach allows us to shuffle the apparent navigation structure without moving page files or redirecting old page URLs.
+
+The doc generation process consumes the markdown files in the `content/guide` directory and produces JSON files in the `src/generated/docs/guide` directory, which is also flat. Those JSON files contain a combination of document metadata and HTML content.
+
+The reader requests a page by its Page URL. The doc viewer fetches the corresponding JSON file, interprets it, and renders it as fully-formed HTML page.
+
+Page URLs mirror the `content` file structure. The URL for the page of a guide is in the form `guide/{page-name}`. The page for _this_ "Authors Style Guide" is located at `content/guide/docs-style-guide.md` and its URL is `guide/docs-style-guide`.
+
+
+<div class="l-sub-section">
+
+_Tutorial_ pages are exactly like guide pages. The only difference is that they reside in `content/tutorial` instead of `content/guide` and have URLs like `tutorial/{page-name}`.
+
+_API_ pages are generated from Angular source code into the `src/generated/docs/api` directory.
+The doc viewer translates URLs that begin `api/` into requests for document JSON files in that directory. This style guide does not discuss creation or maintenance of API pages.
+
+_Marketing_ pages are similar to guide pages. They're located in the `content/marketing` directory. While they can be markdown files, they may be static HTML pages or dynamic HTML pages that render with JSON data. 
+
+Only a few people are authorized to write marketing pages. This style guide does not discuss creation or maintenance of marketing pages.
+
+</div>
+
+## Markdown and HTML
+
+While documentation guide pages ultimately render as HTML, almost all of them are written in [markdown](https://daringfireball.net/projects/markdown/syntax "markdown").
+
+Markdown is easier to read and to edit than HTML. Many editors (including Visual Studio Code) can render markdown as you type it.
+
+From time to time you'll have to step away from markdown and write a portion of the document in HTML. Markdown allows you to mix HTML and markdown in the same document.
+
+Standard markdown processors don't allow you to put markdown _within_ HTML tags. But the Angular documentation markdown processor **supports markdown within HTML**, as long as you follow one rule:
+
+<div class="alert is-critical">
+
+**Always** follow every opening and closing HTML tag with _a blank line_. 
+
+</div>
+
+```html
+<div class="alert is-critical">
+
+  **Always** follow every opening and closing HTML tag with _a blank line_. 
+
+</div>
+```
+
+<div class="l-sub-section">
+
+  It is customary but not required to _precede_ the _closing HTML_ tag with a blank line as well.
+
+</div>
+
+## Title
+
+Every guide document must have a title.
+
+The title should appear at the top of the physical page.
+Begin the title with the markdown `#` character. Alternatively, you can write the equivalent `<h1>`.
+
+```html
+  # Authors Style Guide
+```
+
+**Only one title (`<h1>`) per document!**
+
+Title text should be in "Title Case", which means that you use capital letters to start the first words and all _principal_ words. Use lower case letters for _secondary words such as "in", "of", and "the".
+
+```html
+  # The Meat of the Matter
+```
+
+**Always follow the title with at least one blank line.**
+
+## Sections
+
+A typical document is divided into sections. 
+
+All section heading text should be in "Sentence case", which means the first word is capitalized and all other words are lower case.
+
+**Always follow the section heading with at least one blank line.**
+
+<h2 class="no-toc">
+Main section heading
+</h2>
+There are usually one or more main sections that may be further divided into secondary sections.
+
+Begin a main section heading with the markdown `##` characters. Alternatively, you can write the equivalent `<h2>` HTML tag.  
+
+The main section heading should be followed by a blank line and then the content for that heading.
+
+```html
+  ## Sections
+
+  A typical document is divided into sections.
+```
+
+<h3 class="no-toc">
+Secondary section heading
+</h3>
+
+A secondary section heading is related to a main heading and _falls textually within_ the bounds of that main heading.
+
+Begin a secondary heading with the markdown `###` characters. Alternatively, you can write the equivalent `<h3>` HTML tag.
+
+The secondary heading should be followed by a blank line and then the content for that heading.
+
+```html
+  ### Secondary section heading
+
+  A secondary section ...
+```
+
+#### Additional section headings
+
+Try to minimize the heading depth, preferably only two. But more headings, such as this one, are permitted if they make sense.
+
+**N.B.**:  The [Table-of-contents](#table-of-contents) generator only considers main (`<h2>`) and secondary (`<h3>`) headings.
+
+```html
+  #### Additional section headings
+
+  Try to minimize ...
+```
+
+## Subsections
+
+Subsections typically present extra detail and references to other pages.
+
+Use subsections for commentary that _enriches_ the reader's understanding of the text that precedes it. 
+
+A subsection _must not_ contain anything _essential_ to that understanding. Don't put a critical instruction or a tutorial step in a subsection.
+
+A subsection is content within a `<div>` that has the `l-sub-section` CSS class. You should write the subsection content in markdown.
+
+Here is an example of a subsection `<div>` surrounding the subsection content written in markdown.
+
+<div class="l-sub-section">
+
+  You'll learn about styles for live examples in the [section below](guide/docs-style-guide#live-examples "Live examples").
+
+</div>
+
+```html
+<div class="l-sub-section">
+
+You'll learn about styles for live examples in the [section below](guide/docs-style-guide#live-examples "Live examples").
+
+</div>
+```
+
+Note that at least one blank line must follow the opening `<div>`. A blank line before the closing `</div>` is customary but not required.
+
+## Table of contents
+
+Most pages display a table of contents (TOC). The TOC appears in the right panel when the viewport is wide. When narrow, the TOC appears in an expandable/collapsible region near the top of the page.
+
+You should not create your own TOC by hand. The TOC is generated automatically from the page's main and secondary section headers. 
+
+To exclude a heading from the TOC, create the heading as an `<h2>` or `<h3>` element with a class called 'no-toc'. You can't do this with markdown.
+
+```html
+<h3 class="no-toc">
+This heading is not displayed in the TOC
+</h3>
+```
+
+You can turn off TOC generation for the _entire_ page by writing the title with an `<h1>` tag and the `no-toc` class.
+
+```html
+<h1 class="no-toc">
+A guide without a TOC
+</h1>
+```
+
+## Navigation
+
+The navigation links at the top, left, and bottom of the screen are generated from the JSON configuration file, `content/navigation.json`.
+
+The authority to change the `navigation.json` file is limited to a few core team members. 
+But for a new guide page, you should suggest a navigation title and position in the left-side navigation panel called the "side nav".
+
+Look for the `SideNav` node in `navigation.json`. The `SideNav` node is an array of navigation nodes. Each node is either an _item_ node for a single document or a _header_ node with child nodes.
+
+Find the header for your page. For example, a guide page that describes an Angular feature is probably a child of the `Fundamentals` header.
+
+```html
+{
+  "title": "Fundamentals",
+  "tooltip": "The fundamentals of Angular",
+  "children": [ ... ]
+}
+```
+
+A _header_ node child can be an _item_ node or another _header_ node. If your guide page belongs under a sub-header, find that sub-header in the JSON.
+
+Add an _item_ node for your guide page as a child of the appropriate _header_ node. It probably looks something like this one.
+
+```html
+{
+  "url": "guide/architecture",
+  "title": "Architecture",
+  "tooltip": "The basic building blocks of Angular applications."
+}
+```
+
+A navigation node has the following properties:
+
+* `url`- the URL of the guide page (_item node only_).
+
+* `title`- the text displayed in the side nav.
+
+* `tooltip` - text that appears when the reader hovers over the navigation link.
+
+* `children` - an array of child nodes (_header node only_).
+
+* `hidden` - defined and set true if this is a guide page that should _not_ be displayed in the navigation panel. Rarely needed, it is a way to hide the page from navigation while making it available to readers who should know about it. _This_ "Authors Style Guide" is a hidden page.
+
+
+<div class="alert is-critical">
+
+Do not create a node that is both a _header_ and an _item_ node. That is, do not specify the `url` property of a _header_ node.
+
+</div>
+
+
+<div class="alert is-critical">
+
+The current guidelines allow for a three-level navigation structure with two header levels. Don't add a third header level.
+
+</div>
+
+
+## Code snippets
+
+Guides are rich in examples of working Angular code. Example code can be commands entered in a terminal window, a fragment of TypeScript or HTML, or an entire code file.
+
+Whatever the source, the doc viewer renders them as "code snippets", either individually with the [_code-example_](#code-example "code-example") component or as a tabbed collection with the [_code-tabs_](#code-tabs "code-tabs") component.
+
+
+{@a code-example}
+
+### Code example
+
+You can display a simple, inline code snippet with the markdown backtick syntax.
+We generally prefer to display a code snippet with the Angular documentation _code-example_ component
+represented by the `<code-example>` tag.
+
+<h3 class="no-toc">Inline code-snippets</h3>
+
+You should source code snippets [from working sample code](#from-code-samples) when possible.
+But there are times when an inline snippet is the better choice.
+
+For terminal input and output, put the content between `<code-example>` tags, set the CSS class to `code-shell`, and set the language attribute to `sh` as in this example.
+
+<code-example language="sh" class="code-shell">
+  npm start
+</code-example>
+
+```html
+<code-example language="sh" class="code-shell">
+  npm start
+</code-example>
+```
+
+Inline, hand-coded snippets like this one are _not_ testable and, therefore, are intrinsically unreliable.
+This example belongs to the small set of pre-approved, inline snippets that includes
+user input in a command shell or the _output_ of some process. 
+
+**Do not write inline code snippets** unless you have a good reason and the editor's permission to do so.
+In all other cases, code snippets should be generated automatically from tested code samples.
+
+{@a from-code-samples}
+
+<h3 class="no-toc">Code snippets and code samples</h3>
+
+One of the documentation design goals is that guide page code snippets should be examples of real, working code.
+
+We meet this goal by displaying code snippets that are derived directly from standalone code samples, written specifically for these guide pages.
+
+The author of a guide page is responsible for the code sample that supports that page.
+The author must also write end-to-end tests for the sample.
+
+Code samples are located in sub-folders of the `content/examples` directory of the `angular/angular` repository. An example folder name should be the same as the guide page it supports.
+
+<div class="l-sub-section">
+
+A guide page might not have its own sample code. It might refer instead to a sample belonging to another page.
+
+</div>
+
+The Angular CI process runs all end-to-end tests for every Angular PR. Angular re-tests the samples after every new version of a sample and every new version of Angular itself.
+
+When possible, every snippet of code on a guide page should be derived from a code sample file. You tell the Angular documentation engine which code file - or fragment of a code file - to display by configuring `<code-example>` attributes.
+
+#### Code snippet from a file
+
+_This_ "Authors Doc Style Guide" has its own sample application, located in the `content/examples/docs-style-guide` folder.
+
+The following _code-example_ displays the sample's `app.module.ts`.
+
+<code-example path="docs-style-guide/src/app/app.module.ts" title="src/app/app.module.ts"></code-example>
+
+Here's the brief markup that produced that lengthy snippet:
+
+```html
+<code-example 
+  path="docs-style-guide/src/app/app.module.ts" 
+  title="src/app/app.module.ts">
+</code-example>
+```
+
+You identified the snippet's source file by setting the `path` attribute to sample folder's location _within_ `content/examples`.
+In this example, that path is  `docs-style-guide/src/app/app.module.ts`.  
+
+You added a header to tell the reader where to find the file by setting the `title` attribute.
+Following convention, you set the `title` attribute to the file's location within the sample's root folder.
+
+<div class="l-sub-section">
+
+Unless otherwise noted, all code snippets in this page are derived from sample source code 
+located in the `content/examples/docs-style-guide` directory.
+
+</div>
+
+#### Code-example attributes 
+
+You control the _code-example_ output by setting one or more of its attributes:
+
+* `path`- the path to the file in the `content/examples` folder.
+
+* `title`- the header of the code listing.
+
+* `region`- displays the source file fragment with that region name; regions are identified by _docregion_ markup in the source file, as explained [below](#region "Displaying a code fragment").
+
+* `linenums`- value may be `true`, `false`, or a `number`. When not specified, line numbers are automatically displayed when there are greater than 10 lines of code. The rarely used `number` option starts line numbering at the given value. `linenums=4` sets the starting line number to 4.
+
+* `class`- code snippets can be styled with the CSS classes `no-box`, `code-shell`, and `avoid`.
+
+* `hideCopy`- hides the copy button
+
+* `language`- the source code language such as `javascript`, `html`, `css`, `typescript`, `json`, or `sh`. This attribute only works for inline examples.
+
+{@a region}
+
+#### Displaying a code fragment
+
+Often you want to focus on a fragment of code within a sample code file. In this example, you focus on the `AppModule` class and its `NgModule` metadata.
+
+<code-example 
+  path="docs-style-guide/src/app/app.module.ts" 
+  region="class">
+</code-example>
+
+First you surround that fragment in the source file with a named _docregion_ as described [below](#source-code-markup).
+Then you reference that _docregion_ in the `region` attribute of the `<code-example>` like this
+
+
+```html
+<code-example 
+  path="docs-style-guide/src/app/app.module.ts" 
+  region="class">
+</code-example>
+```
+
+A couple of observations:
+
+1. The `region` value, `"class"`, is the name of the `#docregion` in the source file. Confirm that by looking at `content/examples/docs-style-guide/src/app/app.module.ts`
+
+1. Omitting the `title` is fine when the source of the fragment is obvious. We just said that this is a fragment of the `app.module.ts` file which was displayed immediately above, in full, with a header.
+There's no need to repeat the header.
+
+1. The line numbers disappeared. By default, the doc viewer omits line numbers when there are fewer than 10 lines of code; it adds line numbers after that. You can turn line numbers on or off explicitly by setting the `linenums` attribute.
+
+#### Example of bad code
+
+Sometimes you want to display an example of bad code or bad design.
+
+You should be careful. Readers don't always read carefully and are likely to copy and paste your example of bad code in their own applications. So don't display bad code often. 
+
+When you do, set the `class` to `avoid`. The code snippet will be framed in bright red to grab the reader's attention.
+
+Here's the markup for an "avoid" example in the 
+[_Angular Style Guide_](guide/styleguide#style-05-03 "Style 05-03: components as elements").
+
+```html
+<code-example 
+  path="styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts" 
+  region="example" 
+  title="app/heroes/hero-button/hero-button.component.ts">
+</code-example>
+``` 
+
+<code-example path="styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/hero-button/hero-button.component.ts">
+</code-example>
+
+{@a code-tabs}
+### Code Tabs
+
+Code tabs display code much like _code examples_ do.  The added advantage is that they can display mutiple code samples within a tabbed interface.  Each tab is displayed using _code pane_.
+
+#### Code-tabs attributes
+
+* `linenums`: The value can be `true`, `false` or a number indicating the starting line number. If not specified, line numbers are enabled only when code for a tab pane has greater than 10 lines of code.
+
+#### Code-pane attributes
+
+* `path` - a file in the content/examples folder
+* `title` - seen in the header of a tab
+* `linenums` - overrides the `linenums` property at the `code-tabs` level for this particular pane. The value can be `true`, `false` or a number indicating the starting line number. If not specified, line numbers are enabled only when the number of lines of code are greater than 10.
+
+The next example displays multiple code tabs, each with its own title.
+It demonstrates control over display of line numbers at both the `<code-tabs>` and `<code-pane>` levels.
+
+<code-tabs linenums="false">
+  <code-pane 
+    title="app.component.html" 
+    path="docs-style-guide/src/app/app.component.html">
+  </code-pane>
+  <code-pane 
+    title="app.component.ts" 
+    path="docs-style-guide/src/app/app.component.ts"
+    linenums="true">
+  </code-pane>
+  <code-pane 
+    title="app.component.css (heroes)" 
+    path="docs-style-guide/src/app/app.component.css"  
+    region="heroes">
+  </code-pane>
+  <code-pane 
+    title="package.json (scripts)" 
+    path="docs-style-guide/package.1.json">
+  </code-pane>
+</code-tabs>
+
+Here's the markup for that example.
+
+Note how the `linenums` attribute in the  `<code-tabs>` explicitly disables numbering for all panes.
+The `linenums` attribute in the second pane restores line numbering for _itself only_.
+
+```html
+<code-tabs linenums="false">
+  <code-pane 
+    title="app.component.html" 
+    path="docs-style-guide/src/app/app.component.html">
+  </code-pane>
+  <code-pane 
+    title="app.component.ts" 
+    path="docs-style-guide/src/app/app.component.ts"
+    linenums="true">
+  </code-pane>
+  <code-pane 
+    title="app.component.css (heroes)" 
+    path="docs-style-guide/src/app/app.component.css"  
+    region="heroes">
+  </code-pane>
+  <code-pane 
+    title="package.json (scripts)" 
+    path="docs-style-guide/package.1.json">
+  </code-pane>
+</code-tabs>
+```
+
+{@a source-code-markup}
+
+## Source code markup
+
+You must add special code snippet markup to sample source code files before they can be displayed by `<code-example>` and `<code-tabs>` components.
+
+<div class="l-sub-section">
+
+The sample source code for this page, located in `context/examples/docs-style-guide`, contains examples of every code snippet markup described in this section.
+
+</div>
+
+Code snippet markup is always in the form of a comment. Here's the default _docregion_ markup for a TypeScript or JavaScript file:
+
+```
+// #docregion
+... some code ...
+// #enddocregion
+```
+Different file types have different comment syntax so adjust accordingly.
+
+```html
+<!-- #docregion -->
+... some HTML ...
+<!-- #enddocregion -->
+```
+
+```
+/* #docregion */
+... some CSS ...
+/* #enddocregion */
+```
+
+The doc generation process erases these comments before displaying them in the doc viewer.
+It also strips them from plunkers and sample code downloads.
+
+<div class="alert is-important">
+
+Code snippet markup is not supported in JSON files because comments are forbidden in JSON files.
+See [below](#json-files) for details and workarounds.
+
+</div>
+
+
+#### _#docregion_
+
+The _#docregion_ is the most important kind of code snippet markup.
+
+The `<code-example>` and `<code-tabs>` components won't display a source code file unless it has a _#docregion_.
+
+The _#docregion_ comment begins a code snippet region.
+Every line of code _after_ that comment belongs in the region _until_ the code fragment processor encounters the end of the file or a closing _#enddocregion_.
+
+<div class="l-sub-section">
+
+The `src/main.ts` is a simple example of a file with a single _#docregion_ at the top of the file.
+
+<code-example 
+  path="docs-style-guide/src/main.ts" 
+  title="src/main.ts"></code-example>
+
+</div>
+
+#### Named _#docregions_
+
+You'll often display multiple snippets from different fragments within the same file.
+You distinguish among them by giving each fragment its own _#docregion name_ as follows.
+
+```
+// #docregion region-name
+... some code ...
+// #enddocregion region-name
+```
+
+Remember to refer to this region by name in the `region` attribute of the `<code-example>` or `<code-pane>` as you did in an example above like this:
+
+```html
+<code-example 
+  path="docs-style-guide/src/app/app.module.ts" 
+  region="class"></code-example>
+```
+
+The _#docregion_ with no name is the _default region_. Do _not_ set the `region` attribute when referring to the default _#docregion_.
+
+#### Nested _#docregions_
+
+You can nest _#docregions_ within _#docregions_
+```
+// #docregion 
+... some code ...
+// #docregion inner-region
+... more code ...
+// #enddocregion inner-region
+... yet more code ...
+/// #enddocregion
+```
+<div class="l-sub-section">
+
+The `src/app/app.module.ts` file has a good example of a nested region.
+
+</div>
+
+#### Combining fragments
+
+You can combine several fragments from the same file into a single code snippet by defining
+multiple _#docregions_ with the _same region name_.
+
+Examine the `src/app/app.component.ts` file which defines two nested _#docregions_.
+
+The inner, `class-skeleton` region appears twice, once to capture the code that opens the class definition and once to capture the code that closes the class definition.
+
+<code-example linenums="false">
+// #docplaster
+...
+// #docregion class, class-skeleton
+export class AppComponent {
+// #enddocregion class-skeleton
+  title = 'Authors Style Guide Sample';
+  heroes = HEROES;
+  selectedHero: Hero;
+
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+// #docregion class-skeleton
+}
+// #enddocregion class, class-skeleton
+</code-example>
+
+Here's are the two corresponding code snippets displayed side-by-side.
+
+<code-tabs>
+  <code-pane 
+    title="app.component.ts (class)" 
+    path="docs-style-guide/src/app/app.component.ts"
+    region="class">
+  </code-pane>
+  <code-pane 
+    title="app.component.ts (class-skeleton)"
+    path="docs-style-guide/src/app/app.component.ts"
+    region="class-skeleton">
+  </code-pane>
+</code-tabs>
+
+Some observations:
+
+* The `#docplaster` at the top is another bit of code snippet markup. It tells the processor how to join the fragments into a single snippet. 
+
+  In this example, we tell the processor to put the fragments together without anything in between - without any "plaster".  Most sample files define this _empty plaster_.
+
+  If we neglected to add, `#docplaster`, the processor would insert the _default_ plaster - an ellipsis comment - between the fragments. Try removing the `#docplaster` comment yourself to see the effect.
+
+* One `#docregion` comment mentions **_two_** region names as does an `#enddocregion` comment. This is a convenient way to start (or stop) multiple regions on the same code line. You could have put these comments on separate lines and many authors prefer to do so.
+
+#### JSON files
+
+Code snippet markup is not supported for JSON files because comments are forbidden in JSON files.
+
+You can display an entire JSON file by referring to it in the `src` attribute. 
+But you can't display JSON fragments because you can't add `#docregion` tags to the file.
+
+If the JSON file is too big, you could copy the nodes-of-interest into markdown backticks.
+
+Unfortunately, it's easy to mistakenly create invalid JSON that way. The preferred way is to create a JSON partial file with the fragment you want to display.
+
+You can't test this partial file and you'll never use it in the application. But at least your IDE can confirm that it is syntactically correct.
+
+Here's an example that excerpts certain scripts from `package.json` into a partial file named `package.1.json`.
+
+<code-example 
+  path="docs-style-guide/package.1.json"
+  title="package.json (selected scripts)"></code-example>
+
+```html
+<code-example 
+  path="docs-style-guide/package.1.json"
+  title="package.json (selected scripts)"></code-example>
+```
+
+#### Partial file naming
+
+Many guides tell a story. In that story, the app evolves incrementally, often with simplistic or incomplete code along the way.
+
+To tell that story in code, you'll often need to create partial files or intermediate versions of the final source code file with fragments of code that don't appear in the final app.
+
+Such partial and intermediate files need their own names.
+Follow the doc sample naming convention. Add a number before the file extension as illustrated here:
+
+```html
+package.1.json
+app.component.1.ts
+app.component.2.ts
+```
+
+You'll find many such files among the samples in the Angular documentation.
+
+Remember to exclude these files from plunkers by listing them in the `plnkr.json` as illustrated here.
+
+<code-example 
+  path="docs-style-guide/plnkr.json"
+  title="plnkr.json"></code-example>
+
+{@a live-examples}
+## Live examples
+
+By adding `<live-example>` to the page you generate links that run sample code in the Plunker live coding environment and download that code to the reader's file system.
+
+Live examples (AKA "plunkers") are defined by one or more `plnkr.json` files in the root of a code sample folder. Each sample folder usually has a single unnamed definition file, the default `plnkr.json`. 
+
+<div class="l-sub-section">
+
+You can create additional, named definition files in the form `name.plnkr.json`. See `content/examples/testing` for examples.
+
+The schema for a `plnkr.json` hasn't been documented yet but looking at the `plnkr.json` files in the example folders should tell you most of what you need to know.
+
+</div>
+
+Adding `<live-example></live-example>` to the page generates the two default links.
+
+<live-example></live-example>
+
+1. a link to the plunker defined by the default `plnkr.json` file located in the code sample folder with the same name as the guide page.
+
+2. a link that downloads that sample.
+
+Clicking the first link opens the code sample in a new browser tab in the "embedded plunker" style.
+
+You can change the appearance and behavior of the live example with attributes and classes.
+
+
+<h3 class="no-toc">Custom label and tooltip</h3> 
+
+Give the live example anchor a custom label and tooltip by setting the `title` attribute.
+
+<live-example title="Live Example with title"></live-example>
+
+```html
+<live-example title="Live Example with title"></live-example>
+```
+
+You can achieve the same effect by putting the label between the `<live-example>` tags:
+
+<live-example>Live example with content label</live-example>
+
+```html
+<live-example>Live example with content label</live-example>
+```
+
+<h3 class="no-toc">Live example from another guide</h3> 
+
+To link to a plunker in a folder whose name is not the same as the current guide page, set the `name` attribute to the name of that folder.
+
+<live-example name="router">Live Example from the Router guide</live-example>
+
+```html
+<live-example name="router">Live Example from the Router guide</live-example>
+```
+
+<h3 class="no-toc">Live Example for named plunker</h3> 
+
+To link to a plunker defined by a named `plnkr.json` file, set the `plnkr` attribute. The following example links to the plunker defined by `second.plnkr.json` in the current guide's directory.
+
+<live-example plnkr="second"></live-example>
+
+```html
+<live-example plnkr="second"></live-example>
+```
+
+<h3 class="no-toc">Live Example without download</h3> 
+
+To skip the download link, add the `noDownload` attribute.
+
+<live-example noDownload>Just the plunker</live-example>
+
+```html
+<live-example noDownload>Just the plunker</live-example>
+```
+
+<h3 class="no-toc">Live Example with download-only</h3> 
+
+To skip the live plunker link and only link to the download, add the `downloadOnly` attribute.
+
+<live-example downloadOnly>Download only</live-example>
+
+```html
+<live-example downloadOnly>Download only</live-example>
+```
+
+<h3 class="no-toc">Embedded live example</h3> 
+
+By default, a live example link opens a plunker in a separate browser tab. 
+You can embed the plunker within the guide page itself by adding the `embedded` attribute.
+
+For performance reasons, the plunker does not start right away. The reader sees an image instead. Clicking the image starts the sometimes-slow process of launching the embedded plunker within an iframe on the page.
+
+You usually replace the default plunker image with a custom image that better represents the sample.
+Store that image in the `content/images` directory in a folder with a name matching the corresponding example folder.
+
+Here's an embedded live example for this guide. It has a custom image created from a snapshot of the running app, overlayed with `content/images/plunker/unused/click-to-run.png`.
+
+```html
+<live-example embedded img="guide/docs-style-guide/docs-style-guide-plunker.png"></live-example>
+```
+
+<live-example embedded img="guide/docs-style-guide/docs-style-guide-plunker.png"></live-example>
+
+<a id="anchors"></a>
+
+## Anchors
+
+Every section header tag is also an anchor point. Another guide page could add a link to this section by writing:
+
+<div class="l-sub-section">
+
+See the ["Anchors"](guide/docs-style-guide#anchors "Style Guide - Anchors") section for details.
+
+</div>
+
+```html
+<div class="l-sub-section">
+
+See the ["Anchors"](guide/docs-style-guide#anchors "Style Guide - Anchors") section for details.
+
+</div>
+```
+
+When navigating within the page, you can omit the page URL when specifying the link that [scrolls up](#anchors "Anchors") to the beginning of this section.
+
+```html
+... the link that [scrolls up](#anchors "Anchors") to ...
+```
+
+{@a ugly-anchors}
+
+#### Ugly, long section header anchors
+
+It is often a good idea to *lock-in* a good anchor name.
+
+Sometimes the section header text makes for an unattractive anchor. [This one](#ugly-long-section-header-anchors) is pretty bad. 
+
+```html
+[This one](#ugly-long-section-header-anchors) is pretty bad. 
+```
+
+The greater danger is that **a future rewording of the header text would break** a link to this section.
+
+For these reasons, it is often wise to add a custom anchor explicitly, just above the heading or text to which it applies, using the special`{@ name}` syntax like this.
+
+<code-example  language="html">
+  &#123;@a ugly-anchors&#125;
+
+#### Ugly, long section header anchors
+</code-example>
+
+Now [link to that custom anchor name](#ugly-anchors) as you did before.
+
+```html
+Now [link to that custom anchor name](#ugly-anchors) as you did before.
+```
+
+<div class="l-sub-section">
+
+Alternatively, you can use the HTML `<a>` tag.
+
+If you do, be sure to set the `id` attribute - not the `name` attribute! The docs generator will not convert the `name` to the proper link URL.
+
+```html
+<a id="anchors"></a>
+
+## Anchors
+```
+
+</div>
+
+## Alerts
+
+Alerts draw attention to important points. Alerts should not be used for multi-line content (use callouts insteads) or stacked on top of each other.  Note that the content of an alert is indented to the right by two spaces.
+
+<div class="alert is-critical">
+A critical alert.
+</div>
+
+<div class="alert is-important">
+An important alert.
+</div>
+
+<div class="alert is-helpful">
+A helpful, informational alert.
+</div>
+
+
+Here is the markup for these alerts.
+```html
+<div class="alert is-critical">
+A critical alert.
+</div>
+
+<div class="alert is-important">
+An important alert.
+</div>
+
+<div class="alert is-helpful">
+A helpful, informational alert.
+</div>
+```
+
+Alerts are meant to grab the user's attention and should be used sparingly.
+They are not for casual asides or commentary. Use [subsections](#subsections "subsections") for commentary. 
+
+## Callouts
+
+Callouts (like alerts) are meant to draw attention to important points. Use a callout when you want a riveting header and multi-line content.
+
+<div class="callout is-critical">
+<header>A critical point</header>
+
+**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+
+</div>
+
+<div class="callout is-important">
+<header>An important point</header>
+
+**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+
+</div>
+
+<div class="callout is-helpful">
+<header>A helpful point</header>
+
+**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+
+</div>
+
+Here is the markup for the first of these callouts.
+```html
+<div class="callout is-critical">
+<header>A critical point</header>
+
+**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+
+</div>
+```
+
+Notice that
+* the callout header text is forced to all upper case.
+* the callout body can be written in markdown.
+* a blank line separates the `</header>` tag from the markdown content.
+
+Callouts are meant to grab the user's attention. They are not for casual asides. Please use them sparingly.
+
+## Trees
+
+Trees can represent hierarchical data.
+
+<div class='filetree'>
+
+  <div class='file'>
+    sample-dir
+  </div>
+
+  <div class='children'>
+
+    <div class='file'>
+      src
+    </div>
+
+    <div class='children'>
+
+      <div class='file'>
+        app
+      </div>
+
+      <div class='children'>
+
+        <div class='file'>
+          app.component.ts
+        </div>
+
+        <div class='file'>
+          app.module.ts
+        </div>
+
+      </div>
+
+      <div class='file'>
+        styles.css
+      </div>
+
+      <div class='file'>
+        tsconfig.json
+      </div>
+
+    </div>
+
+    <div class='file'>
+      node_modules ...
+    </div>
+
+    <div class='file'>
+      package.json
+    </div>
+
+  </div>
+
+</div>
+
+Here is the markup for this file tree.
+
+```html
+<div class='filetree'>
+    <div class='file'>
+        sample-dir
+    </div>
+    <div class='children'>
+        <div class='file'>
+          src
+        </div>
+        <div class='children'>
+            <div class='file'>
+              app
+            </div>
+            <div class='children'>
+                <div class='file'>
+                  app.component.ts
+                </div>
+                <div class='file'>
+                  app.module.ts
+                </div>
+            </div>
+            <div class='file'>
+              styles.css
+            </div>
+            <div class='file'>
+              tsconfig.json
+            </div>
+        </div>
+        <div class='file'>
+          node_modules ...
+        </div>
+        <div class='file'>
+          package.json
+        </div>
+    </div>
+</div>
+```
+
+
+## Tables
+
+Use HTML tables to present tabular data.
+
+
+<style>
+  td, th {vertical-align: top}
+</style>
+
+<table>
+  <tr>
+    <th>Framework</th>
+    <th>Task</th>
+    <th>Speed</th>
+  </tr>
+  <tr>
+    <td><code>AngularJS</code></td>
+    <td>Routing</td>
+    <td>Fast</td>
+  </tr>
+  <tr>
+    <td><code>Angular v2</code></td>
+    <td>Routing</td>
+    <!-- can use markdown too; remember blank lines -->
+    <td>
+
+      *Faster*
+
+    </td>
+  </tr>
+  <tr>
+    <td><code>Angular v4</code></td>
+    <td>Routing</td>
+    <td>
+
+      **Fastest :)**
+
+    </td>
+  </tr>
+</table>
+
+Here is the markup for this table.
+
+```html
+<style>
+  td, th {vertical-align: top}
+</style>
+
+<table>
+  <tr>
+    <th>Framework</th>
+    <th>Task</th>
+    <th>Speed</th>
+  </tr>
+  <tr>
+    <td><code>AngularJS</code></td>
+    <td>Routing</td>
+    <td>Fast</td>
+  </tr>
+  <tr>
+    <td><code>Angular v2</code></td>
+    <td>Routing</td>
+    <!-- can use markdown too; remember blank lines -->
+    <td>
+
+      *Faster*
+
+    </td>
+  </tr>
+  <tr>
+    <td><code>Angular v4</code></td>
+    <td>Routing</td>
+    <td>
+
+      **Fastest :)**
+
+    </td>
+  </tr>
+</table>
+```
+
+## Images
+
+<h3 class="no-toc">Image location</h3>
+
+Store images in the `content/images` directory in a folder with the same URL as the guide page.
+Images for this "Authors Style Guide" page belong in the `content/images/guide/docs-style-guide` folder.
+
+Angular doc generation copies these image folders to the _runtime_ location, `generated/images`.
+Set the image `src` attribute to begin in _that_ directory.
+
+Here's the `src` attribute for the "flying hero" image belonging to this page.
+```
+src="generated/images/guide/docs-style-guide/flying-hero.png"
+```
+
+<h3 class="no-toc">Use the HTML <i>&lt;img&gt;</i> tag</h3>
+
+**Do not use the markdown image syntax, \!\[\.\.\.\]\(\.\.\.\).**
+
+Images should be specified in an `<img>` tag. 
+
+For accessibility, always set the `alt` attribute with a meaningful description of the image. 
+
+You should nest the `<img>` tag within a `<figure>` tag, which styles the image within a drop-shadow frame. You'll need the editor's permission to skip the `<figure>` tag.
+
+Here's a conforming example
+
+<figure>
+  <img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying hero">
+</figure>
+
+```html
+<figure>
+  <img src="generated/images/guide/docs-style-guide/flying-hero.png" 
+       alt="flying hero">
+</figure>
+```
+
+_Note that the HTML image element does not have a closing tag._
+
+<h3 class="no-toc">Image dimensions</h3>
+
+The doc generator reads the image dimensions from the file and adds width and height attributes to the `img` tag automatically. If you want to control the size of the image, supply your own width and height attributes.
+
+Here's the "flying hero" at a more reasonable scale.
+
+<figure>
+ <img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying Angular hero" width="200">
+</figure>
+
+```html
+
+<figure>
+ <img src="generated/images/guide/docs-style-guide/flying-hero.png" 
+   alt="flying Angular hero" 
+   width="200">
+</figure>
+```
+
+Wide images can be a problem. Most browsers try to rescale the image but wide images may overflow the document in certain viewports. 
+
+**Do not set a width greater than 700px**. If you wish to display a larger image, provide a link to the actual image that the user can click on to see the full size image separately as in this example of `source-map-explorer` output from the "Ahead-of-time Compilation" guide:
+
+<a href="generated/images/guide/aot-compiler/toh-pt6-bundle.png" title="Click to view larger image">
+  <figure>
+    <img src="generated/images/guide/aot-compiler/toh-pt6-bundle-700w.png" alt="toh-pt6-bundle" width="300px">
+  </figure>
+</a>
+
+<h3 class="no-toc">Image compression</h3>
+
+Large image files can be slow to load, harming the user experience. Always compress the image.
+Consider using an image compression web site such as [tinypng](https://tinypng.com/ "tinypng").
+
+<h3 class="no-toc">Floating images</h3>
+
+You can float the image to the left or right of text by applying the class="left" or class="right" attributes respectively.
+
+<img src="generated/images/guide/docs-style-guide/flying-hero.png" 
+   alt="flying Angular hero" 
+   width="200"
+   class="left">
+   
+This text wraps around to the right of the floating "flying hero" image.
+
+Headings and code-examples automatically clear a floating image. If you need to force a piece of text to clear a floating image, add `<br class="clear">` where the text should break.
+
+<br class="clear">
+
+The markup for the above example is:
+
+```html
+<img src="generated/images/guide/docs-style-guide/flying-hero.png" 
+   alt="flying Angular hero" 
+   width="200"
+   class="left">
+   
+This text wraps around to the right of the floating "flying hero" image.
+
+Headings and code-examples automatically clear a floating image. If you need to force a piece of text to clear a floating image, add `<br class="clear">` where the text should break.
+
+<br class="clear">
+```
+
+Note that you generally don't wrap a floating image in a `<figure>` element.
+
+#### Floating within a subsection
+
+If you have a floating image inside an alert, callout, or a subsection, it is a good idea to apply the `clear-fix` class to the `div` to ensure that the image doesn't overflow its container. For example:
+
+<div class="l-sub-section clear-fix">
+
+  <img src="generated/images/guide/docs-style-guide/flying-hero.png" 
+    alt="flying Angular hero" 
+    width="100"
+    class="right">
+
+  A subsection with **markdown** formatted text.
+
+</div>
+
+```html
+<div class="l-sub-section clear-fix">
+
+  <img src="generated/images/guide/docs-style-guide/flying-hero.png" 
+    alt="flying Angular hero" 
+    width="100"
+    class="right">
+    
+  A subsection with **markdown** formatted text.
+
+</div>
+```
\ No newline at end of file
diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md
index 511c0043dc..e40ca47086 100644
--- a/aio/content/guide/dynamic-component-loader.md
+++ b/aio/content/guide/dynamic-component-loader.md
@@ -1,11 +1,6 @@
-@title
-动态组件加载器
-
-@intro
-如何动态加载组件
-
-@description
+# Dynamic Component Loader
 
+# 动态组件加载器
 
 Component templates are not always fixed. An application may need to load new components at runtime.
 
@@ -15,43 +10,7 @@ This cookbook shows you how to use `ComponentFactoryResolver` to add components
 
 这本烹饪书为你展示如何使用`ComponentFactoryResolver`来动态添加组件。
 
-{@a toc}
-
-# Contents
-
-# 目录
-
-   * [Dynamic component loading](guide/dynamic-component-loader#dynamic-loading)
-
-     [动态组件加载](guide/dynamic-component-loader#dynamic-loading)
-
-   * [The directive](guide/dynamic-component-loader#directive)
-
-     [指令](guide/dynamic-component-loader#directive)
-
-   * [Loading components](guide/dynamic-component-loader#loading-components)
-
-     [加载组件](guide/dynamic-component-loader#loading-components)
-
-     * [Resolving Components](guide/dynamic-component-loader#resolving-components)
-
-       [解析组件](guide/dynamic-component-loader#resolving-components)
-
-     * [Selector References](guide/dynamic-component-loader#selector-references)
-
-       [通过选择器引用](guide/dynamic-component-loader#selector-references)
-
-   * [A common _AdComponent_ interface](guide/dynamic-component-loader#common-interface)
-
-     [通用的`AdComponent`接口](guide/dynamic-component-loader#common-interface)
-
-   * [Final ad banner](guide/dynamic-component-loader#final-ad-banner)
-
-     [最终的广告Banner](guide/dynamic-component-loader#final-ad-banner)
-
-
-
-See the <live-example name="cb-dynamic-component-loader"></live-example>
+See the <live-example name="dynamic-component-loader"></live-example>
 of the code in this cookbook.
 
 到<live-example name="cb-dynamic-component-loader"></live-example>查看本烹饪书的源码。
@@ -86,7 +45,7 @@ Angular 自带的API就能支持动态加载组件。
 
 {@a directive}
 
-## The directive
+## The anchor directive
 
 ## 指令
 
@@ -101,7 +60,7 @@ mark valid insertion points in the template.
 广告条使用一个名叫`AdDirective`的辅助指令来在模板中标记出有效的插入点。
 
 
-<code-example path="cb-dynamic-component-loader/src/app/ad.directive.ts" title="src/app/ad.directive.ts" linenums="false">
+<code-example path="dynamic-component-loader/src/app/ad.directive.ts" title="src/app/ad.directive.ts" linenums="false">
 
 </code-example>
 
@@ -141,7 +100,7 @@ where to dynamically load components.
 这下，Angular就知道该把组件动态加载到哪里了。
 
 
-<code-example path="cb-dynamic-component-loader/src/app/ad-banner.component.ts" region="ad-host" title="src/app/ad-banner.component.ts (template)" linenums="false">
+<code-example path="dynamic-component-loader/src/app/ad-banner.component.ts" region="ad-host" title="src/app/ad-banner.component.ts (template)" linenums="false">
 
 </code-example>
 
@@ -156,7 +115,7 @@ because it doesn't render any additional output.
 {@a resolving-components}
 
 
-### Resolving components
+## Resolving components
 
 ### 解析组件
 
@@ -165,8 +124,8 @@ Take a closer look at the methods in `ad-banner.component.ts`.
 深入看看`ad-banner.component.ts`中的方法。
 
 `AdBannerComponent` takes an array of `AdItem` objects as input,
-which ultimately comes from `AdService`.  `AdItem` objects specify 
-the type of component to load and any data to bind to the 
+which ultimately comes from `AdService`.  `AdItem` objects specify
+the type of component to load and any data to bind to the
 component.`AdService` returns the actual ads making up the ad campaign.
 
 `AdBannerComponent`接收一个`AdItem`对象的数组作为输入，它最终来自`AdService`。
@@ -184,7 +143,7 @@ and loads a new component every 3 seconds by calling `loadComponent()`.
 通过`getAds()`方法，`AdBannerComponent`可以循环遍历`AdItems`的数组，并且每三秒调用一次`loadComponent()`来加载新组件。
 
 
-<code-example path="cb-dynamic-component-loader/src/app/ad-banner.component.ts" region="class" title="src/app/ad-banner.component.ts (excerpt)" linenums="false">
+<code-example path="dynamic-component-loader/src/app/ad-banner.component.ts" region="class" title="src/app/ad-banner.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -222,23 +181,23 @@ value to select an `adItem` from the array.
 
 
 
-After `loadComponent()` selects an ad, it uses `ComponentFactoryResolver` 
-to resolve a `ComponentFactory` for each specific component. 
+After `loadComponent()` selects an ad, it uses `ComponentFactoryResolver`
+to resolve a `ComponentFactory` for each specific component.
 The `ComponentFactory` then creates an instance of each component.
 
 在`loadComponent()`选取了一个广告之后，它使用`ComponentFactoryResolver`来为每个具体的组件解析出一个`ComponentFactory`。
 然后`ComponentFactory`会为每一个组件创建一个实例。
 
-Next, you're targeting the `viewContainerRef` that 
-exists on this specific instance of the component. How do you know it's 
-this specific instance? Because it's referring to `adHost` and `adHost` is the 
+Next, you're targeting the `viewContainerRef` that
+exists on this specific instance of the component. How do you know it's
+this specific instance? Because it's referring to `adHost` and `adHost` is the
 directive you set up earlier to tell Angular where to insert dynamic components.
 
 接下来，我们要把`viewContainerRef`指向这个组件的现有实例。但我们怎么才能找到这个实例呢？
 很简单，因为它指向了`adHost`，而这个`adHost`就是我们以前设置过的指令，用来告诉Angular该把动态组件插入到什么位置。
 
-As you may recall, `AdDirective` injects `ViewContainerRef` into its constructor. 
-This is how the directive accesses the element that you want to use to host the dynamic component. 
+As you may recall, `AdDirective` injects `ViewContainerRef` into its constructor.
+This is how the directive accesses the element that you want to use to host the dynamic component.
 
 回忆一下，`AdDirective`曾在它的构造函数中注入了一个`ViewContainerRef`。
 因此这个指令可以访问到这个被我们用作动态组件宿主的元素。
@@ -275,7 +234,7 @@ add dynamically loaded components to the `NgModule`'s `entryComponents` array:
 要想确保编译器照常生成工厂类，就要把这些动态加载的组件添加到`NgModule`的`entryComponents`数组中：
 
 
-<code-example path="cb-dynamic-component-loader/src/app/app.module.ts" region="entry-components" title="src/app/app.module.ts (entry components)" linenums="false">
+<code-example path="dynamic-component-loader/src/app/app.module.ts" region="entry-components" title="src/app/app.module.ts (entry components)" linenums="false">
 
 </code-example>
 
@@ -284,7 +243,7 @@ add dynamically loaded components to the `NgModule`'s `entryComponents` array:
 {@a common-interface}
 
 
-### A common _AdComponent_ interface
+## The _AdComponent_ interface
 
 ### 公共的`AdComponent`接口
 
@@ -300,15 +259,15 @@ Here are two sample components and the `AdComponent` interface for reference:
 
 <code-tabs>
 
-  <code-pane title="hero-job-ad.component.ts" path="cb-dynamic-component-loader/src/app/hero-job-ad.component.ts">
+  <code-pane title="hero-job-ad.component.ts" path="dynamic-component-loader/src/app/hero-job-ad.component.ts">
 
   </code-pane>
 
-  <code-pane title="hero-profile.component.ts" path="cb-dynamic-component-loader/src/app/hero-profile.component.ts">
+  <code-pane title="hero-profile.component.ts" path="dynamic-component-loader/src/app/hero-profile.component.ts">
 
   </code-pane>
 
-  <code-pane title="ad.component.ts" path="cb-dynamic-component-loader/src/app/ad.component.ts">
+  <code-pane title="ad.component.ts" path="dynamic-component-loader/src/app/ad.component.ts">
 
   </code-pane>
 
@@ -319,7 +278,7 @@ Here are two sample components and the `AdComponent` interface for reference:
 {@a final-ad-baner}
 
 
-### Final ad banner
+## Final ad banner
 
 ### 最终的广告栏
 
@@ -328,12 +287,10 @@ The final ad banner looks like this:
 最终的广告栏是这样的：
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dynamic-component-loader/ads.gif" alt="Ads"></img>
+<figure>
+  <img src="generated/images/guide/dynamic-component-loader/ads.gif" alt="Ads">
 </figure>
 
 
 
-See the <live-example name="cb-dynamic-component-loader"></live-example>.
-
-参见<live-example name="cb-dynamic-component-loader"></live-example>。
\ No newline at end of file
+See the <live-example name="dynamic-component-loader"></live-example>.参见<live-example name="cb-dynamic-component-loader"></live-example>。
\ No newline at end of file
diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md
index 5a0c48dd39..3e86086b6e 100644
--- a/aio/content/guide/dynamic-form.md
+++ b/aio/content/guide/dynamic-form.md
@@ -1,13 +1,10 @@
-@title
-动态表单
+# Dynamic Forms
 
-@intro
-用 FormGroup 渲染动态表单
+# 动态表单
 
-@description
+{@a top}
 
-
-Building handcrafted forms canbe costly and time-consuming, 
+Building handcrafted forms canbe costly and time-consuming,
 especially if you need a great number of them, they're similar to each other, and they change frequently 
 to meet rapidly changing business and regulatory requirements.
 
@@ -15,51 +12,25 @@ to meet rapidly changing business and regulatory requirements.
 
 It may be more economical to create the forms dynamically, based on metadata that describes the business object model.
 
-基于业务对象模型的元数据，动态创建表单可能会更划算。
-
-This cookbook shows you how to use `formGroup` to dynamically render a simple form with different control types and validation.
-It's a primitive start. 
+基于业务对象模型的元数据，动态创建表单可能会更划算。This cookbook shows you how to use `formGroup` to dynamically 
+render a simple form with different control types and validation.
+It's a primitive start.
 It might evolve to support a much richer variety of questions, more graceful rendering, and superior user experience.
 All such greatness has humble beginnings.
 
 在此烹饪宝典中，我们会展示如何利用`formGroup`来动态渲染一个简单的表单，包括各种控件类型和验证规则。
-这个起点很简陋，但可以在这个基础上添加丰富多彩的问卷问题、更优美的渲染以及更卓越的用户体验。
-
-The example in this cookbook is a dynamic form to build an online application experience for heroes seeking employment.
+这个起点很简陋，但可以在这个基础上添加丰富多彩的问卷问题、更优美的渲染以及更卓越的用户体验。The example in this cookbook is a dynamic form to build an 
+online application experience for heroes seeking employment.
 The agency is constantly tinkering with the application process.
 You can create the forms on the fly *without changing the application code*. 
 
 在本例中，我们使用动态表单，为正在找工作的英雄们创建一个在线申请表。英雄管理局会不断修改申请流程，我们要在*不修改应用代码*的情况下，动态创建这些表单。
+
 {@a toc}
 
-# Contents
+See the <live-example name="dynamic-form"></live-example>.
 
-# 目录
-
- * [Bootstrap](guide/dynamic-form#bootstrap)
-
-   [程序启动](guide/dynamic-form#bootstrap)
-
- * [Question model](guide/dynamic-form#object-model)
-
-   [问卷问题模型](guide/dynamic-form#object-model)
-
- * [Question form components](guide/dynamic-form#form-component)
-
-   [问卷表单组件](guide/dynamic-form#form-component)
-
- * [Questionnaire data](guide/dynamic-form#questionnaire-data)
-
-   [问卷数据](guide/dynamic-form#questionnaire-data)
-
- * [Dynamic template](guide/dynamic-form#dynamic-template)
-
-   [动态模板](guide/dynamic-form#dynamic-template)
-
-
-See the <live-example name="cb-dynamic-form"></live-example>.
-
-**参见<live-example name="cb-dynamic-form"></live-example>**。
+参见<live-example name="dynamic-form"></live-example>。
 
 
 {@a bootstrap}
@@ -76,8 +47,8 @@ This cookbook uses [reactive forms](guide/reactive-forms).
 
 这个烹饪书使用[响应式表单](guide/reactive-forms)。
 
-Reactive forms belongs to a different `NgModule` called `ReactiveFormsModule`, 
-so in order to access any reactive forms directives, you have to import 
+Reactive forms belongs to a different `NgModule` called `ReactiveFormsModule`,
+so in order to access any reactive forms directives, you have to import
 `ReactiveFormsModule` from the `@angular/forms` library.
 
 响应式表单属于另外一个叫做`ReactiveFormsModule`的`NgModule`，所以，为了使用响应式表单类的指令，我们得从`@angular/forms`库中引入`ReactiveFormsModule`模块。
@@ -89,11 +60,11 @@ Bootstrap the `AppModule` in `main.ts`.
 
 <code-tabs>
 
-  <code-pane title="app.module.ts" path="cb-dynamic-form/src/app/app.module.ts">
+  <code-pane title="app.module.ts" path="dynamic-form/src/app/app.module.ts">
 
   </code-pane>
 
-  <code-pane title="main.ts" path="cb-dynamic-form/src/main.ts">
+  <code-pane title="main.ts" path="dynamic-form/src/main.ts">
 
   </code-pane>
 
@@ -117,26 +88,26 @@ The following `QuestionBase` is a fundamental question class.
 下面是我们建立的最基础的问卷问题基类，名叫`QuestionBase`。
 
 
-<code-example path="cb-dynamic-form/src/app/question-base.ts" title="src/app/question-base.ts">
+<code-example path="dynamic-form/src/app/question-base.ts" title="src/app/question-base.ts">
 
 </code-example>
 
 
 
-From this base you can derive two new classes in `TextboxQuestion` and `DropdownQuestion` 
+From this base you can derive two new classes in `TextboxQuestion` and `DropdownQuestion`
 that represent textbox and dropdown questions.
-The idea is that the form will be bound to specific question types and render the 
+The idea is that the form will be bound to specific question types and render the
 appropriate controls dynamically.
 
 在这个基础上，我们派生出两个新类`TextboxQuestion` 和 `DropdownQuestion`，分别代表文本框和下拉框。这么做的初衷是，表单能动态绑定到特定的问卷问题类型，并动态渲染出合适的控件。
 
-`TextboxQuestion` supports multiple HTML5 types such as text, email, and url 
+`TextboxQuestion` supports multiple HTML5 types such as text, email, and url
 via the `type` property.
 
 `TextboxQuestion`可以通过`type`属性来支持多种HTML5元素类型，比如文本、邮件、网址等。
 
 
-<code-example path="cb-dynamic-form/src/app/question-textbox.ts" title="src/app/question-textbox.ts" linenums="false">
+<code-example path="dynamic-form/src/app/question-textbox.ts" title="src/app/question-textbox.ts" linenums="false">
 
 </code-example>
 
@@ -147,14 +118,14 @@ via the `type` property.
 `DropdownQuestion`表示一个带可选项列表的选择框。
 
 
-<code-example path="cb-dynamic-form/src/app/question-dropdown.ts" title="src/app/question-dropdown.ts" linenums="false">
+<code-example path="dynamic-form/src/app/question-dropdown.ts" title="src/app/question-dropdown.ts" linenums="false">
 
 </code-example>
 
 
 
 Next is `QuestionControlService`, a simple service for transforming the questions to a `FormGroup`.
-In a nutshell, the form group consumes the metadata from the question model and 
+In a nutshell, the form group consumes the metadata from the question model and
 allows you to specify default values and validation rules.
 
 接下来，我们定义了`QuestionControlService`，一个可以把问卷问题转换为`FormGroup`的服务。
@@ -162,7 +133,7 @@ allows you to specify default values and validation rules.
 
 
 
-<code-example path="cb-dynamic-form/src/app/question-control.service.ts" title="src/app/question-control.service.ts" linenums="false">
+<code-example path="dynamic-form/src/app/question-control.service.ts" title="src/app/question-control.service.ts" linenums="false">
 
 </code-example>
 
@@ -172,7 +143,7 @@ allows you to specify default values and validation rules.
 
 ## 问卷表单组件
 
-Now that you have defined the complete model you are ready 
+Now that you have defined the complete model you are ready
 to create components to represent the dynamic form.
 
 现在我们已经有一个定义好的完整模型了，接着就可以开始创建一个展现动态表单的组件。
@@ -185,11 +156,11 @@ to create components to represent the dynamic form.
 
 <code-tabs>
 
-  <code-pane title="dynamic-form.component.html" path="cb-dynamic-form/src/app/dynamic-form.component.html">
+  <code-pane title="dynamic-form.component.html" path="dynamic-form/src/app/dynamic-form.component.html">
 
   </code-pane>
 
-  <code-pane title="dynamic-form.component.ts" path="cb-dynamic-form/src/app/dynamic-form.component.ts">
+  <code-pane title="dynamic-form.component.ts" path="dynamic-form/src/app/dynamic-form.component.ts">
 
   </code-pane>
 
@@ -199,7 +170,7 @@ to create components to represent the dynamic form.
 
 It presents a list of questions, each bound to a `<df-question>` component element.
 The `<df-question>` tag matches the `DynamicFormQuestionComponent`,
-the component responsible for rendering the details of each _individual_ 
+the component responsible for rendering the details of each _individual_
 question based on values in the data-bound question object.
 
 它代表了问卷问题列表，每个问题都被绑定到一个`<df-question>`组件元素。
@@ -208,11 +179,11 @@ question based on values in the data-bound question object.
 
 <code-tabs>
 
-  <code-pane title="dynamic-form-question.component.html" path="cb-dynamic-form/src/app/dynamic-form-question.component.html">
+  <code-pane title="dynamic-form-question.component.html" path="dynamic-form/src/app/dynamic-form-question.component.html">
 
   </code-pane>
 
-  <code-pane title="dynamic-form-question.component.ts" path="cb-dynamic-form/src/app/dynamic-form-question.component.ts">
+  <code-pane title="dynamic-form-question.component.ts" path="dynamic-form/src/app/dynamic-form-question.component.ts">
 
   </code-pane>
 
@@ -231,8 +202,8 @@ underlying control objects, populated from the question model with display and v
 
 在这两个组件中，我们依赖Angular的**formGroup**来把模板HTML和底层控件对象连接起来，该对象从问卷问题模型里获取渲染和验证规则。
 
-`formControlName` and `formGroup` are directives defined in 
-`ReactiveFormsModule`. The templates can access these directives 
+`formControlName` and `formGroup` are directives defined in
+`ReactiveFormsModule`. The templates can access these directives
 directly since you imported `ReactiveFormsModule` from `AppModule`.
 
 `formControlName`和`formGroup`是在`ReactiveFormsModule`中定义的指令。我们之所以能在模板中使用它们，是因为我们往`AppModule`中导入了`ReactiveFormsModule`。
@@ -252,16 +223,16 @@ directly since you imported `ReactiveFormsModule` from `AppModule`.
 
  `QuestionService`会返回为工作申请表定义的那组问题列表。在真实的应用程序环境中，我们会从数据库里获得这些问题列表。
 
- The key point is that you control the hero job application questions 
+ The key point is that you control the hero job application questions
  entirely through the objects returned from `QuestionService`.
- Questionnaire maintenance is a simple matter of adding, updating, 
+ Questionnaire maintenance is a simple matter of adding, updating,
  and removing objects from the `questions` array.
  
  关键是，我们完全根据`QuestionService`返回的对象来控制英雄的工作申请表。
  要维护这份问卷，只要非常简单的添加、更新和删除`questions`数组中的对象就可以了。
 
 
-<code-example path="cb-dynamic-form/src/app/question.service.ts" title="src/app/question.service.ts">
+<code-example path="dynamic-form/src/app/question.service.ts" title="src/app/question.service.ts">
 
 </code-example>
 
@@ -272,18 +243,16 @@ Finally, display an instance of the form in the `AppComponent` shell.
 最后，在`AppComponent`里显示出表单。
 
 
-<code-example path="cb-dynamic-form/src/app/app.component.ts" title="app.component.ts">
+<code-example path="dynamic-form/src/app/app.component.ts" title="app.component.ts">
 
 </code-example>
 
 {@a dynamic-template}
 
 ## Dynamic Template
-
-## 动态模板   
-
-Although in this example you're modelling a job application for heroes, there are no references to any specific hero question 
-outside the objects returned by `QuestionService`. 
+## 动态模板Although in this example you're modelling a job application for heroes, there are 
+no references to any specific hero question
+outside the objects returned by `QuestionService`.
 
 在这个例子中，虽然我们是在为英雄的工作申请表建模，但是除了`QuestionService`返回的那些对象外，没有其它任何地方是与英雄有关的。
 
@@ -310,12 +279,12 @@ The final form looks like this:
 完整的表单是这样的：
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/dynamic-form/dynamic-form.png" alt="Dynamic-Form"></img>
+<figure>
+  <img src="generated/images/guide/dynamic-form/dynamic-form.png" alt="Dynamic-Form">
 </figure>
 
 
 
 [Back to top](guide/dynamic-form#top)
 
-[回到顶部](guide/dynamic-form#top)
\ No newline at end of file
+[回到顶部](guide/dynamic-form#top)
diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md
index 82c1eb6384..4fec7f570c 100644
--- a/aio/content/guide/form-validation.md
+++ b/aio/content/guide/form-validation.md
@@ -1,29 +1,22 @@
-@title
-表单验证
+# Form Validation
 
-@intro
-验证用户在表单中的输入
-
-@description
+# 表单验证
 
 
-{@a top}
 
 
 Improve overall data quality by validating user input for accuracy and completeness.
 
 我们可以通过验证用户输入的准确性和完整性，来增强整体数据质量。
 
-This cookbook shows how to validate user input in the UI and display useful validation messages
-using first the template-driven forms and then the reactive forms approach.
+This page shows how to validate user input in the UI and display useful validation messages
+using first the Template Driven Forms and then the Reactive Forms approach.
 
 在本烹饪书中，我们展示在界面中如何验证用户输入，并显示有用的验证信息，先使用模板驱动表单方式，再使用响应式表单方式。
 
 
 <div class="l-sub-section">
 
-
-
 Read more about these choices in the [Forms](guide/forms)
 and the [Reactive Forms](guide/reactive-forms) guides.
 
@@ -33,71 +26,6 @@ and the [Reactive Forms](guide/reactive-forms) guides.
 </div>
 
 
-
-{@a toc}
-
-
-## Contents
-
-## 目录
-
-  * [Simple template-driven forms](guide/form-validation#template1)
-
-    [简单的模板驱动表单](guide/form-validation#template1)
-
-  * [Template-driven forms with validation messages in code](guide/form-validation#template2)
-
-    [代码中带验证信息的模板驱动表单](guide/form-validation#template2)
-
-    * [Component Class](guide/form-validation#component-class)
-
-      [组件类](guide/form-validation#component-class)
-
-    * [The benefits of messages in code](guide/form-validation#improvement)
-
-      [在代码中写消息的优点](guide/form-validation#improvement)
-
-    * [`FormModule` and template-driven forms](guide/form-validation#formmodule)
-
-      [`FormModule`和模板驱动表单](guide/form-validation#formmodule)
-
-  * [Reactive forms with validation in code](guide/form-validation#reactive)
-
-    [代码中带验证消息的响应式表单](guide/form-validation#reactive)
-
-    * [Switch to the `ReactiveFormsModule`](guide/form-validation#reactive-forms-module)
-
-      [切换成`ReactiveFormsModule`](guide/form-validation#reactive-forms-module)
-
-    * [Component template](guide/form-validation#reactive-component-template)
-
-      [组件模板](guide/form-validation#reactive-component-template)
-
-    * [Component class](guide/form-validation#reactive-component-class)
-
-      [组件类](guide/form-validation#reactive-component-class)
-
-      * [`FormBuilder` declaration](guide/form-validation#formbuilder)
-
-        [`FormBuilder`声明](guide/form-validation#formbuilder)
-
-      * [Committing hero value changes](guide/form-validation#committing-changes)
-
-        [提交对英雄值的更改](guide/form-validation#committing-changes)
-
-  * [Custom validation](guide/form-validation#custom-validation)
-
-    [自定义验证器](guide/form-validation#custom-validation)
-
-    * [Custom validation directive](guide/form-validation#custom-validation-directive)
-
-      [自定义验证指令](guide/form-validation#custom-validation-directive)
-
-  * [Testing considerations](guide/form-validation#testing)
-
-    [测试方面的考虑](guide/form-validation#testing)
-
-
 {@a live-example}
 
 
@@ -106,28 +34,22 @@ and the [Reactive Forms](guide/reactive-forms) guides.
 **查看在线例子，并下载整个烹饪书的源代码**
 
 
-<live-example name="cb-form-validation" embedded=true img="cookbooks/form-validation/plunker.png">
+<live-example name="form-validation" embedded=true img="guide/form-validation/plunker.png">
   在线例子
 </live-example>
 
-
-
-
-{@a template1}
-
-
-## Simple template-driven forms
+## Simple Template Driven Forms
 
 ## 简单的模板驱动表单
 
-In the template-driven approach, you arrange
+In the Template Driven approach, you arrange
 [form elements](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML) in the component's template.
 
 在模板驱动表单方法中，你在组件的模板中组织[表单元素](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML)。
 
 You add Angular form directives (mostly directives beginning `ng...`) to help
 Angular construct a corresponding internal control model that implements form functionality.
-In template-drive forms, the control model is _implicit_ in the template.
+In Template Driven forms, the control model is _implicit_ in the template.
 
 你可以添加Angular表单指令（通常为以`ng`开头的指令）来帮助Angular构建对应的内部控制模型，以实现表单功能。
 控制模型在模板中是**隐式**的。
@@ -150,7 +72,7 @@ Here's an excerpt from the template HTML for a single input control bound to the
 在第一个模板验证例子中，我们添加了更多HTML，来读取控制器状态并适当更新显示。
 下面是模板HTML中提取的，一个绑定到英雄名字的输入框控制器：
 
-<code-example path="cb-form-validation/src/app/template/hero-form-template1.component.html" region="name-with-error-msg" title="template/hero-form-template1.component.html (Hero name)" linenums="false">
+<code-example path="form-validation/src/app/template/hero-form-template1.component.html" region="name-with-error-msg" title="template/hero-form-template1.component.html (Hero name)" linenums="false">
 
 </code-example>
 
@@ -182,7 +104,8 @@ to check for control states such as `valid` and `dirty`.
   我们将模板变量(`#name`)赋值为`"ngModel"` (总是 `ngModel`)。
     它为我们提供了与这个控制器关联的Angular `NgModel`指令的引用，我们在模板中使用它，以检查控制器状态，比如`valid`和`dirty`。
 
-* The `*ngIf` on the `<div>` element reveals a set of nested message `divs` but only if there are "name" errors and
+* The `*ngIf` on the `<div>` element reveals a set of nested message `divs`
+but only if there are `name` errors and
 the control is either `dirty` or `touched`.
 
   `<div>`元素的`*ngIf`揭露了一套嵌套消息`divs`，但是只在有“name”错误和控制器为`dirty`或者`touched`。
@@ -228,28 +151,28 @@ as well as other code to support the view.
 组件类管理用于数据绑定的英雄模型，它还有其他支持视图的代码。
 
 
-<code-example path="cb-form-validation/src/app/template/hero-form-template1.component.ts" region="class" title="template/hero-form-template1.component.ts (class)">
+<code-example path="form-validation/src/app/template/hero-form-template1.component.ts" region="class" title="template/hero-form-template1.component.ts (class)">
 
 </code-example>
 
 
 
-Use this template-driven validation technique when working with static forms with simple, standard validation rules.
+Use this Template Driven validation technique when working with static forms with simple, standard validation rules.
 
 在处理简单的、拥有标准验证规则的静态表单时，使用这种模板驱动验证方法。
 
-Here are the complete files for the first version of `HeroFormTemplateCompononent` in the template-driven approach:
+Here are the complete files for the first version of `HeroFormTemplateCompononent` in the Template Driven approach:
 
 下面是第一个版本的使用模板驱动方法的`HeroFormTemplateComponent`：
 
 
 <code-tabs>
 
-  <code-pane title="template/hero-form-template1.component.html" path="cb-form-validation/src/app/template/hero-form-template1.component.html">
+  <code-pane title="template/hero-form-template1.component.html" path="form-validation/src/app/template/hero-form-template1.component.html">
 
   </code-pane>
 
-  <code-pane title="template/hero-form-template1.component.ts" path="cb-form-validation/src/app/template/hero-form-template1.component.ts">
+  <code-pane title="template/hero-form-template1.component.ts" path="form-validation/src/app/template/hero-form-template1.component.ts">
 
   </code-pane>
 
@@ -258,10 +181,8 @@ Here are the complete files for the first version of `HeroFormTemplateCompononen
 
 
 
-{@a template2}
 
-
-## Template-driven forms with validation messages in code
+## Template Driven Forms with validation messages in code
 
 ## 验证消息在代码中的模板驱动表单
 
@@ -290,18 +211,17 @@ the template and component.
 
 只需要对模板和组件做出一些修改，我们可以将逻辑和消息移到组件中。
 
-Here's the hero name again, excerpted from the revised template (Template 2), next to the original version:
+Here's the hero name again, excerpted from the revised template (template 2), next to the original version:
 
 下面也是关于英雄名字的控制器，从修改后的模板（“Template 2”）中抽取出来，与原来的版本相比：
 
-
 <code-tabs>
 
-  <code-pane title="hero-form-template2.component.html (name #2)" path="cb-form-validation/src/app/template/hero-form-template2.component.html" region="name-with-error-msg">
+  <code-pane title="hero-form-template2.component.html (name #2)" path="form-validation/src/app/template/hero-form-template2.component.html" region="name-with-error-msg">
 
   </code-pane>
 
-  <code-pane title="hero-form-template1.component.html (name #1)" path="cb-form-validation/src/app/template/hero-form-template1.component.html" region="name-with-error-msg">
+  <code-pane title="hero-form-template1.component.html (name #1)" path="form-validation/src/app/template/hero-form-template1.component.html" region="name-with-error-msg">
 
   </code-pane>
 
@@ -319,7 +239,7 @@ The `<input>` element HTML is almost the same. There are noteworthy differences:
 
 * There's a new attribute, `forbiddenName`, that is actually a custom validation directive.
 It invalidates the control if the user enters "bob" in the name `<input>`([try it](guide/form-validation#live-example)).
-See the [custom validation](guide/form-validation#custom-validation) section later in this cookbook for more information
+See the [custom validation](guide/form-validation#custom-validation) section later in this page for more information
 on custom validation directives.
 
   添加了一个新属性`forbiddenName`，它实际上是一个自定义验证指令。
@@ -328,16 +248,11 @@ on custom validation directives.
 
 * The `#name` template variable is gone because the app no longer refers to the Angular control for this element.
 
-  模板变量`#name`消失了，因为我们不再需要为这个元素引用Angular控制器。
-
-* Binding to the new `formErrors.name` property is sufficent to display all name validation error messages.
-
-  绑定到新的`formErrors.name`属性，就可以处理所有名字验证错误信息了。
-
+模板变量`#name`消失了，因为我们不再需要为这个元素引用Angular控制器。* Binding to the new `formErrors.name` property is sufficient to display all name validation error messages.
+绑定到新的`formErrors.name`属性，就可以处理所有名字验证错误信息了。
 
 {@a component-class}
 
-
 ### Component class
 
 ### 组件类
@@ -359,7 +274,7 @@ Look back at the top of the component template at the
 回头看组件模板顶部，我们在`<form>`元素中设置`#heroForm`模板变量：
 
 
-<code-example path="cb-form-validation/src/app/template/hero-form-template1.component.html" region="form-tag" title="template/hero-form-template1.component.html (form tag)" linenums="false">
+<code-example path="form-validation/src/app/template/hero-form-template1.component.html" region="form-tag" title="template/hero-form-template1.component.html (form tag)" linenums="false">
 
 </code-example>
 
@@ -372,7 +287,7 @@ Tell Angular to inject that model into the component class's `currentForm` prope
 我们利用`@ViewChild`来告诉Angular注入这个模型到组件类的`currentForm`属性：
 
 
-<code-example path="cb-form-validation/src/app/template/hero-form-template2.component.ts" region="view-child" title="template/hero-form-template2.component.ts (heroForm)" linenums="false">
+<code-example path="form-validation/src/app/template/hero-form-template2.component.ts" region="view-child" title="template/hero-form-template2.component.ts (heroForm)" linenums="false">
 
 </code-example>
 
@@ -392,7 +307,7 @@ Periodically inspecting it reveals these changes.
 
   `heroForm`对象在组件的生命周期内变化了好几次，最值得注意的是当我们添加一个新英雄时的变化。我们必须定期重新检测它。
 
-* Angular calls the `ngAfterViewChecked` [lifecycle hook method](guide/lifecycle-hooks#afterview)
+* Angular calls the `ngAfterViewChecked()` [lifecycle hook method](guide/lifecycle-hooks#afterview)
 when anything changes in the view.
 That's the right time to see if there's a new `heroForm` object.
 
@@ -405,7 +320,7 @@ The `onValueChanged` handler looks for validation errors after every  keystroke.
   `onValueChanged`处理器在每次用户键入后查找验证错误。
 
 
-<code-example path="cb-form-validation/src/app/template/hero-form-template2.component.ts" region="handler" title="template/hero-form-template2.component.ts (handler)" linenums="false">
+<code-example path="form-validation/src/app/template/hero-form-template2.component.ts" region="handler" title="template/hero-form-template2.component.ts (handler)" linenums="false">
 
 </code-example>
 
@@ -444,13 +359,13 @@ For each field, the `onValueChanged` handler does the following:
   
     如果这样的控制器存在，并且它被更新过（“dirty”），**并且**它无效，处理器就会为所有控制器的错误合成一条错误消息。
 
-Next, the component needs some error messages of course&mdash;a set for each validated property with
+Next, the component needs some error messages&mdash;a set for each validated property with
 one message per validation rule:
 
 很显然，我们需要一些错误消息，每个验证的属性都需要一套，每个验证规则需要一条消息：
 
 
-<code-example path="cb-form-validation/src/app/template/hero-form-template2.component.ts" region="messages" title="template/hero-form-template2.component.ts (messages)" linenums="false">
+<code-example path="form-validation/src/app/template/hero-form-template2.component.ts" region="messages" title="template/hero-form-template2.component.ts (messages)" linenums="false">
 
 </code-example>
 
@@ -493,10 +408,6 @@ and one line per validation message.
 不管有多少个验证规则，每个控件的行数是差不多的。
 组件也按比例增长，每增加一个控件增加一行，每个验证消息一行。
 
-Both trends are manageable.
-
-两条线容易维护。
-
 Now that the messages are in code, you have more flexibility and can compose messages more efficiently.
 You can refactor the messages out of the component, perhaps to a service class that retrieves them from the server.
 In short, there are more opportunities to improve message handling now that text and logic have moved from template to code.
@@ -509,7 +420,7 @@ In short, there are more opportunities to improve message handling now that text
 {@a formmodule}
 
 
-### _FormModule_ and template-driven forms
+### _FormModule_ and Template Driven forms
 
 ### _FormModule_ 和模板驱动表单
 
@@ -521,13 +432,13 @@ from the same `@angular/forms` library package.
 Angular有两种不同的表单模块 - `FormsModule`和`ReactiveFormsModule` - 它们与表单开发的两种方法对应。
   两种模块都从同一个`@angular/forms`库。
 
-You've been reviewing the "Template-driven" approach which requires the `FormsModule`.
+You've been reviewing the Template Driven approach which requires the `FormsModule`.
 Here's how you imported it in the `HeroFormTemplateModule`.
 
 我们一直在探讨**模板驱动**方法，它需要`FormsModule`。下面是如何在`HeroFormTemplateModule`中导入它：
 
 
-<code-example path="cb-form-validation/src/app/template/hero-form-template.module.ts" title="template/hero-form-template.module.ts" linenums="false">
+<code-example path="form-validation/src/app/template/hero-form-template.module.ts" title="template/hero-form-template.module.ts" linenums="false">
 
 </code-example>
 
@@ -555,11 +466,11 @@ They're not germane to the validation story. Look at the [live example](guide/fo
 {@a reactive}
 
 
-## Reactive forms with validation in code
+## Reactive Forms with validation in code
 
 ## 在代码中验证响应式表单
 
-In the template-driven approach, you markup the template with form elements, validation attributes,
+In the Template Driven approach, you mark up the template with form elements, validation attributes,
 and `ng...` directives from the Angular `FormsModule`.
 At runtime, Angular interprets the template and derives its _form control model_.
 
@@ -591,11 +502,11 @@ This allows you to do the following:
 
   在组件内动态操纵控制器模型
   
-* [Test](guide/form-validation#testing) validation and control logic with isolated unit tests.
+* [Test](guide/form-validation#testing-considerations) validation and control logic with isolated unit tests.
 
   使用孤立单元测试来[测试](guide/form-validation#testing)验证和控制器逻辑
 
-The following cookbook sample re-writes the hero form in _reactive forms_ style.
+The following sample re-writes the hero form in Reactive Forms style.
 
 第三个烹饪书例子用**响应式表单**风格重新编写英雄表格。
 
@@ -607,20 +518,20 @@ The following cookbook sample re-writes the hero form in _reactive forms_ style.
 
 ### 切换到_ReactiveFormsModule_
 
-The reactive forms classes and directives come from the Angular `ReactiveFormsModule`, not the `FormsModule`.
-The application module for the reactive forms feature in this sample looks like this:
+The Reactive Forms classes and directives come from the Angular `ReactiveFormsModule`, not the `FormsModule`.
+The application module for the Reactive Forms feature in this sample looks like this:
 
 响应式表单类和指令来自于Angular的`ReactiveFormsModule`，不是`FormsModule`。
 本例中，应用模块的“响应式表单”特性是这样的：
 
 
-<code-example path="cb-form-validation/src/app/reactive/hero-form-reactive.module.ts" title="src/app/reactive/hero-form-reactive.module.ts" linenums="false">
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.module.ts" title="src/app/reactive/hero-form-reactive.module.ts" linenums="false">
 
 </code-example>
 
 
 
-The reactive forms feature module and component are in the `src/app/reactive` folder.
+The Reactive Forms feature module and component are in the `src/app/reactive` folder.
 Focus on the `HeroFormReactiveComponent` there, starting with its template.
 
 “响应式表单”特性模块和组件在`app/reactive`目录。
@@ -642,14 +553,14 @@ The `heroForm` is the control model that the component class builds and maintain
 `heroForm`是组件类创建和维护的控制器模型。
 
 
-<code-example path="cb-form-validation/src/app/reactive/hero-form-reactive.component.html" region="form-tag" title="cb-form-validation/src/app/reactive/hero-form-reactive.component.html" linenums="false">
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.html" region="form-tag" title="form-validation/src/app/reactive/hero-form-reactive.component.html" linenums="false">
 
 </code-example>
 
 
 
-Next, modify the template HTML elements to match the _reactive forms_ style.
-Here is the "name" portion of the template again, revised for reactive forms and compared with the template-driven version:
+Next, modify the template HTML elements to match the Reactive Forms style.
+Here is the "name" portion of the template again, revised for Reactive Forms and compared with the Template Driven version:
 
 接下来，我们修改模板HTML元素，来匹配**响应式表单**样式。
 下面又是“name”部分的模板，响应式表单修改版本和模板驱动版本的比较：
@@ -657,11 +568,11 @@ Here is the "name" portion of the template again, revised for reactive forms and
 
 <code-tabs>
 
-  <code-pane title="hero-form-reactive.component.html (name #3)" path="cb-form-validation/src/app/reactive/hero-form-reactive.component.html" region="name-with-error-msg">
+  <code-pane title="hero-form-reactive.component.html (name #3)" path="form-validation/src/app/reactive/hero-form-reactive.component.html" region="name-with-error-msg">
 
   </code-pane>
 
-  <code-pane title="hero-form-template1.component.html (name #2)" path="cb-form-validation/src/app/template/hero-form-template2.component.html" region="name-with-error-msg">
+  <code-pane title="hero-form-template1.component.html (name #2)" path="form-validation/src/app/template/hero-form-template2.component.html" region="name-with-error-msg">
 
   </code-pane>
 
@@ -686,10 +597,9 @@ but rather for css styling and accessibility.
 
 <div class="l-sub-section">
 
-
-
-A future version of reactive forms will add the `required` HTML validation attribute to the DOM element
-(and perhaps the `aria-required` attribute) when the control has the `required` validator function.
+Currently, Reactive Forms doesn't add the `required` or `aria-required`
+HTML validation attribute to the DOM element
+when the control has the `required` validator function.
 
 未来版本的响应式表单将会在控制器有`required`验证器函数时，添加`required` HTML验证属性到DOM元素（也可能添加`aria-required`属性）。 
 
@@ -716,18 +626,6 @@ That's all in code.
 响应式表单方法不使用数据绑定从表单控制器移入和移出数据。我们在代码中做这些。
 
 
-<div class="l-sub-section">
-
-
-
-The retreat from data binding is a principle of the reactive paradigm rather than a technical limitation.
-
-不适用表单数据绑定是响应式模式的原则，而非技术限制。
-
-
-</div>
-
-
 
 {@a reactive-component-class}
 
@@ -746,17 +644,17 @@ You can create the Angular form control model explicitly with the help of the `F
 Angular不再从模板衍生控制器模型，所以我们不能再查询它。
 我们利用`FormBuilder`来显式创建Angular表单控制器模型。
 
-Here's the section of code devoted to that process, paired with the template-driven code it replaces:
+Here's the section of code devoted to that process, paired with the Template Driven code it replaces:
 
 下面是负责该进程的代码部分，与被它取代的模板驱动代码相比：
 
 <code-tabs>
 
-  <code-pane title="reactive/hero-form-reactive.component.ts (FormBuilder)" path="cb-form-validation/src/app/reactive/hero-form-reactive.component.ts" region="form-builder">
+  <code-pane title="reactive/hero-form-reactive.component.ts (FormBuilder)" path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="form-builder">
 
   </code-pane>
 
-  <code-pane title="template/hero-form-template2.component.ts (ViewChild)" path="cb-form-validation/src/app/template/hero-form-template2.component.ts" region="view-child">
+  <code-pane title="template/hero-form-template2.component.ts (ViewChild)" path="form-validation/src/app/template/hero-form-template2.component.ts" region="view-child">
 
   </code-pane>
 
@@ -796,8 +694,17 @@ to set error messages for the new control model.
 然后它将相同的`onValueChanged`（有一行代码不一样）处理器附加到表单的`valueChanged`事件，
 并立刻为新的控制器模型设置错误消息。
 
+## Built-in validators
 
-{@a formbuilder}
+## 内置验证器
+
+Angular forms include a number of built-in validator functions, which are functions
+that help you check common user input in forms. In addition to the built-in
+validators covered here of `minlength`, `maxlength`,
+and `required`, there are others such as `email` and `pattern`
+for Reactive Forms.
+For a full list of built-in validators,
+see the [Validators](api/forms/Validators) API reference.
 
 
 #### _FormBuilder_ declaration
@@ -822,7 +729,7 @@ Angular has stock validators that correspond to the standard HTML validation att
 大多数验证器函数是Angular以`Validators`类的静态方法的形式提供的原装验证器。
 Angular有一些原装验证器，与标准HTML验证属性一一对应。
 
-The `forbiddenNames` validator on the `"name"` control is a custom validator,
+The `forbiddenName` validator on the `"name"` control is a custom validator,
 discussed in a separate [section below](guide/form-validation#custom-validation).
 
 `"name"`控制器上的`forbiddenNames`验证器是自定义验证器，在下面单独的[小结](guide/form-validation#custom-validation)有所讨论。
@@ -830,8 +737,6 @@ discussed in a separate [section below](guide/form-validation#custom-validation)
 
 <div class="l-sub-section">
 
-
-
 Learn more about `FormBuilder` in the [Introduction to FormBuilder](guide/reactive-forms#formbuilder) section of Reactive Forms guide.
 
 到[响应式表单]的[FormBuilder介绍](guide/reactive-forms#formbuilder)部分，学习更多关于`FormBuilder`的知识。
@@ -839,17 +744,13 @@ Learn more about `FormBuilder` in the [Introduction to FormBuilder](guide/reacti
 
 </div>
 
-
-
-{@a committing-changes}
-
-
 #### Committing hero value changes
 
 #### 提交英雄值的更新
 
 In two-way data binding, the user's changes flow automatically from the controls back to the data model properties.
-Reactive forms do not use data binding to update data model properties.
+A Reactive Forms component should not use data binding to
+automatically update data model properties.
 The developer decides _when and how_ to update the data model from control values.
 
 在双向数据绑定时，用户的修改自动从控制器流向数据模型属性。
@@ -872,33 +773,16 @@ The `onSubmit()` method simply replaces the `hero` object with the combined valu
 
 `onSubmit()`方法直接使用表单的值得合集来替换`hero`对象：
 
-<code-example path="cb-form-validation/src/app/reactive/hero-form-reactive.component.ts" region="on-submit" title="cb-form-validation/src/app/reactive/hero-form-reactive.component.ts" linenums="false">
-
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="on-submit" title="form-validation/src/app/reactive/hero-form-reactive.component.ts" linenums="false">
 </code-example>
 
 
-
-<div class="l-sub-section">
-
-
-
-This example is lucky in that the `heroForm.value` properties _just happen_ to
-correspond _exactly_ to the hero data object properties.
-
-本例非常“幸运”，因为`heroForm.value`属性**正好**与英雄数据对象属性对应。
-
-
-</div>
-
-
-
 The `addHero()` method discards pending changes and creates a brand new `hero` model object.
 
 `addHero()`方法放弃未处理的变化，并创建一个崭新的`hero`模型对象。
 
 
-<code-example path="cb-form-validation/src/app/reactive/hero-form-reactive.component.ts" region="add-hero" title="cb-form-validation/src/app/reactive/hero-form-reactive.component.ts" linenums="false">
-
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="add-hero" title="form-validation/src/app/reactive/hero-form-reactive.component.ts" linenums="false">
 </code-example>
 
 
@@ -909,21 +793,21 @@ The `<form>` tag's `[formGroup]` binding refreshes the page with the new control
 然后它再次调用`buildForm`，用一个新对象替换了之前的`heroForm`控制器模型。
 `<form>`标签的`[formGroup]`绑定使用这个新的控制器模型更新页面。
 
-Here's the complete reactive component file, compared to the two template-driven component files.
+Here's the complete reactive component file, compared to the two Template Driven component files.
 
 下面是完整的响应式表单的组件文件，与两个模板驱动组件文件对比：
 
 <code-tabs>
 
-  <code-pane title="reactive/hero-form-reactive.component.ts (#3)" path="cb-form-validation/src/app/reactive/hero-form-reactive.component.ts">
+  <code-pane title="reactive/hero-form-reactive.component.ts (#3)" path="form-validation/src/app/reactive/hero-form-reactive.component.ts">
 
   </code-pane>
 
-  <code-pane title="template/hero-form-template2.component.ts (#2)" path="cb-form-validation/src/app/template/hero-form-template2.component.ts">
+  <code-pane title="template/hero-form-template2.component.ts (#2)" path="form-validation/src/app/template/hero-form-template2.component.ts">
 
   </code-pane>
 
-  <code-pane title="template/hero-form-template1.component.ts (#1)" path="cb-form-validation/src/app/template/hero-form-template1.component.ts">
+  <code-pane title="template/hero-form-template1.component.ts (#1)" path="form-validation/src/app/template/hero-form-template1.component.ts">
 
   </code-pane>
 
@@ -933,40 +817,29 @@ Here's the complete reactive component file, compared to the two template-driven
 
 <div class="l-sub-section">
 
-
-
 Run the [live example](guide/form-validation#live-example) to see how the reactive form behaves,
-and to compare all of the files in this cookbook sample.
-
+and to compare all of the files in this  sample.
 运行[在线例子](guide/form-validation#live-example)，查看响应式表单是的行为，并与本章中的例子文件作比较。
 
-
 </div>
 
-
-
-
-{@a custom-validation}
-
-
 ## Custom validation
 
 ## 自定义验证
 
-This cookbook sample has a custom `forbiddenNamevalidator()` function that's applied to both the
-template-driven and the reactive form controls. It's in the `src/app/shared` folder
+This cookbook sample has a custom `forbiddenNameValidator()` function that's applied to both the
+Template Driven and the reactive form controls. It's in the `src/app/shared` folder
 and declared in the `SharedModule`.
 
 本烹饪书例子有一个自定义`forbiddenNameValidator`函数，在模板驱动和响应式表单中都有使用。
 它在`app/shared`目录，在`SharedModule`中被声明。
 
-Here's the `forbiddenNamevalidator()` function:
+Here's the `forbiddenNameValidator()` function:
 
 下面是`forbiddenNameValidator`函数：
 
 
-<code-example path="cb-form-validation/src/app/shared/forbidden-name.directive.ts" region="custom-validator" title="shared/forbidden-name.directive.ts (forbiddenNameValidator)" linenums="false">
-
+<code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="custom-validator" title="shared/forbidden-name.directive.ts (forbiddenNameValidator)" linenums="false">
 </code-example>
 
 
@@ -995,33 +868,29 @@ and whose value is an arbitrary dictionary of values that you could insert into
 验证错误对象通常有一个名为验证秘钥（`forbiddenName`）的属性。其值为一个任意词典，我们可以用来插入错误信息（`{name}`）。
 
 
-{@a custom-validation-directive}
-
 
 ### Custom validation directive
 
 #### 自定义验证指令
 
-In the reactive forms component, the `'name'` control's validator function list
+In the Reactive Forms component, the `'name'` control's validator function list
 has a `forbiddenNameValidator` at the bottom.
 
 在响应式表单组件中，我们在`'name'`控制器的验证函数列表的底部添加了一个配置了的`forbiddenNameValidator`。
 
 
-<code-example path="cb-form-validation/src/app/reactive/hero-form-reactive.component.ts" region="name-validators" title="reactive/hero-form-reactive.component.ts (name validators)" linenums="false">
-
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="name-validators" title="reactive/hero-form-reactive.component.ts (name validators)" linenums="false">
 </code-example>
 
 
 
-In the _template-driven_ example, the `<input>` has the selector (`forbiddenName`)
+In the Template Driven example, the `<input>` has the selector (`forbiddenName`)
 of a custom _attribute directive_, which rejects "bob".
 
 在模板驱动组件的模板中，我们在name的输入框元素中添加了自定义**属性指令**的选择器（`forbiddenName`），并配置它来拒绝“bob”。
 
 
-<code-example path="cb-form-validation/src/app/template/hero-form-template2.component.html" region="name-input" title="template/hero-form-template2.component.html (name input)" linenums="false">
-
+<code-example path="form-validation/src/app/template/hero-form-template2.component.html" region="name-input" title="template/hero-form-template2.component.html (name input)" linenums="false">
 </code-example>
 
 
@@ -1036,8 +905,7 @@ with the `NG_VALIDATORS` provider, a provider with an extensible collection of v
 Angular表单接受指令在验证流程中的作用，因为指令注册自己到`NG_VALIDATORS`提供商中，该提供商拥有可扩展的验证指令集。
 
 
-<code-example path="cb-form-validation/src/app/shared/forbidden-name.directive.ts" region="directive-providers" title="shared/forbidden-name.directive.ts (providers)" linenums="false">
-
+<code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="directive-providers" title="shared/forbidden-name.directive.ts (providers)" linenums="false">
 </code-example>
 
 
@@ -1047,8 +915,7 @@ Here is the rest of the directive to help you get an idea of how it all comes to
 指令的其它部分是为了帮你理解它们是如何合作的：
 
 
-<code-example path="cb-form-validation/src/app/shared/forbidden-name.directive.ts" region="directive" title="shared/forbidden-name.directive.ts (directive)">
-
+<code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="directive" title="shared/forbidden-name.directive.ts (directive)">
 </code-example>
 
 
@@ -1057,8 +924,6 @@ Here is the rest of the directive to help you get an idea of how it all comes to
 
 <div class="l-sub-section">
 
-
-
 If you are familiar with Angular validations, you may have noticed
 that the custom validation directive is instantiated with `useExisting`
 rather than `useClass`. The registered validator must be _this instance_ of
@@ -1071,17 +936,11 @@ To see this in action, run the example and then type “bob” in the name of He
 Notice that you get a validation error. Now change from `useExisting` to `useClass` and try again.
 This time, when you type “bob”, there's no "bob" error message.
 
-
 </div>
 
 
-
-
-
 <div class="l-sub-section">
 
-
-
 For more information on attaching behavior to elements,
 see [Attribute Directives](guide/attribute-directives).
 
@@ -1092,15 +951,11 @@ see [Attribute Directives](guide/attribute-directives).
 
 
 
-
-{@a testing}
-
-
 ## Testing Considerations
 
 ## 测试时的注意事项
 
-You can write _isolated unit tests_ of validation and control logic in _Reactive Forms_.
+You can write _isolated unit tests_ of validation and control logic in Reactive Forms.
 
 我们可以为**响应式表单**的验证器和控制器逻辑编写**孤立单元测试**。
 
@@ -1114,8 +969,8 @@ They do not require the `Angular TestBed` or asynchronous testing practices.
 
 这样的测试具有简单设置#，快速编写和容易维护的特征。它们不需要`Angular TestBed`或异步测试工序。
 
-That's not possible with _template-driven_ forms.
-The template-driven approach relies on Angular to produce the control model and
+That's not possible with Template Driven forms.
+The Template Driven approach relies on Angular to produce the control model and
 to derive validation rules from the HTML validation attributes.
 You must use the `Angular TestBed` to create component test instances,
 write asynchronous tests, and interact with the DOM.
@@ -1128,4 +983,4 @@ While not difficult, this takes more time, work and
 skill&mdash;factors that tend to diminish test code
 coverage and quality.
 
-虽然这种测试并不困难，但是它需要更多时间、工作和能力 - 这些因素往往会降低测试代码覆盖率和测试质量。
\ No newline at end of file
+虽然这种测试并不困难，但是它需要更多时间、工作和能力 - 这些因素往往会降低测试代码覆盖率和测试质量。
diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md
index 2d1d34e850..c5b2224649 100644
--- a/aio/content/guide/forms.md
+++ b/aio/content/guide/forms.md
@@ -1,11 +1,6 @@
-@title
-表单
-
-@intro
-表单创建一个有机、有效、引人注目的数据输入体验。Angular 表单协调一组数据绑定控件，跟踪变更，验证输入的有效性，并且显示错误信息。
-
-@description
+# Forms
 
+# 表单
 
 Forms are the mainstay of business applications.
 You use forms to log in, submit a help request, place an order, book a flight,
@@ -57,6 +52,7 @@ You can run the <live-example></live-example> in Plunker and download the code f
 你可以在Plunker中运行<live-example></live-example>，并且从那里下载代码。
 
 
+{@a template-driven}
 
 ## Template-driven forms
 
@@ -72,7 +68,7 @@ the form-specific directives and techniques described in this page.
 
 
 
-You can also use a reactive (or model-driven) approach to build forms. 
+You can also use a reactive (or model-driven) approach to build forms.
 However, this page focuses on template-driven forms.
 
 你还可以使用响应式（也叫模型驱动）的方式来构建表单。不过本章中只介绍模板驱动表单。
@@ -100,8 +96,8 @@ You'll learn to build a template-driven form that looks like this:
 我们将学习构建如下的“模板驱动”表单：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form"></img>
+<figure>
+  <img src="generated/images/guide/forms/hero-form-1.png" alt="Clean Form">
 </figure>
 
 
@@ -121,8 +117,8 @@ If you delete the hero name, the form displays a validation error in an attentio
 如果删除了英雄的名字，表单就会用醒目的样式把验证错误显示出来。
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/forms/hero-form-2.png" width="400px" alt="无效！名字是必填项"></img>
+<figure>
+  <img src="generated/images/guide/forms/hero-form-2.png" alt="无效！名字是必填项">
 </figure>
 
 
@@ -373,12 +369,12 @@ There are three changes:
 
    导入`FormsModule`和新组件`HeroFormComponent`。
 
-1. You add the `FormsModule` to the list of `imports` defined in the `ngModule` decorator. This gives the application
+1. You add the `FormsModule` to the list of `imports` defined in the `@NgModule` decorator. This gives the application
 access to all of the template-driven forms features, including `ngModel`.
 
    把`FormsModule`添加到`ngModule`装饰器的`imports`列表中，这样应用就能访问模板驱动表单的所有特性，包括`ngModel`。
 
-1. You add the `HeroFormComponent` to the list of `declarations` defined in the `ngModule` decorator. This makes
+1. You add the `HeroFormComponent` to the list of `declarations` defined in the `@NgModule` decorator. This makes
 the `HeroFormComponent` component visible throughout this module.
 
    把`HeroFormComponent`添加到`ngModule`装饰器的`declarations`列表中，使`HeroFormComponent`组件在整个模块中可见。
@@ -482,7 +478,7 @@ You added a *Submit* button at the bottom with some classes on it for styling.
 
 
 
-In template driven forms, if you've imported `FormsModule`, you don't have to do anything 
+In template driven forms, if you've imported `FormsModule`, you don't have to do anything
 to the `<form>` tag in order to make use of `FormsModule`. Continue on to see how this works.
 
 在模板驱动表单中，你只要导入了`FormsModule`就不用对`<form>`做任何改动来使用`FormsModule`。接下来你会看到它的原理。
@@ -575,6 +571,7 @@ you display its name using the interpolation syntax.
 模板输入变量`p`在每个迭代指向不同的超能力，使用双花括号插值表达式语法来显示它的名称。
 
 
+{@a ngModel}
 
 ## Two-way data binding with _ngModel_
 
@@ -585,8 +582,8 @@ Running the app right now would be disappointing.
 如果立即运行此应用，你将会失望。
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/forms/hero-form-3.png" width="400px" alt="没有数据绑定的早期表单"></img>
+<figure>
+  <img src="generated/images/guide/forms/hero-form-3.png" alt="没有数据绑定的早期表单">
 </figure>
 
 
@@ -644,8 +641,8 @@ Focus on the binding syntax: `[(ngModel)]="..."`.
 
 聚焦到绑定语法`[(ngModel)]="..."`上。
 
-You need one more addition to display the data. Declare 
-a template variable for the form. Update the `<form>` tag with 
+You need one more addition to display the data. Declare
+a template variable for the form. Update the `<form>` tag with
 `#heroForm="ngForm"` as follows:
 
 我们需要更多的工作来显示数据。在表单中声明一个模板变量。往`<form>`标签中加入`#heroForm="ngForm"`，代码如下：
@@ -664,14 +661,14 @@ The variable `heroForm` is now a reference to the `NgForm` directive that govern
 
 <div class="l-sub-section">
 
-
+{@a ngForm}
 
 ### The _NgForm_ directive
 
 ### `NgForm`指令
 
 What `NgForm` directive?
-You didn't add an [NgForm](api/forms/index/NgForm-directive) directive.
+You didn't add an [NgForm](api/forms/NgForm) directive.
 
 什么是`NgForm`指令？
 但我们明明没有添加过[NgForm](api/forms/index/NgForm-directive)指令啊！
@@ -704,8 +701,8 @@ At some point it might look like this:
 某一瞬间，它可能是这样的：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/forms/ng-model-in-action.png" width="400px" alt="操作中的ngModel"></img>
+<figure>
+  <img src="generated/images/guide/forms/ng-model-in-action.png" alt="操作中的ngModel">
 </figure>
 
 
@@ -801,8 +798,8 @@ If you run the app  now and change every hero model property, the form might dis
 如果现在运行本应用，修改 Hero 模型的每个属性，表单是这样的：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in action"></img>
+<figure>
+  <img src="generated/images/guide/forms/ng-model-in-action-2.png" alt="ngModel in action">
 </figure>
 
 
@@ -992,8 +989,8 @@ The actions and effects are as follows:
 动作和它对应的效果如下：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/forms/control-state-transitions-anim.gif" alt="控件状态转换"></img>
+<figure>
+  <img src="generated/images/guide/forms/control-state-transitions-anim.gif" alt="控件状态转换">
 </figure>
 
 
@@ -1003,8 +1000,8 @@ You should see the following transitions and class names:
 我们会看到下列转换及其类名：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/forms/ng-control-class-changes.png" width="500px" alt="Control state transitions"></img>
+<figure>
+  <img src="generated/images/guide/forms/ng-control-class-changes.png" alt="Control state transitions">
 </figure>
 
 
@@ -1033,8 +1030,8 @@ on the left of the input box:
 可以在输入框的左侧添加带颜色的竖条，用于标记必填字段和无效输入：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/forms/validity-required-indicator.png" width="400px" alt="无效表单"></img>
+<figure>
+  <img src="generated/images/guide/forms/validity-required-indicator.png" alt="无效表单">
 </figure>
 
 
@@ -1078,8 +1075,8 @@ When the user deletes the name, the form should look like this:
 当用户删除姓名时，应该是这样的：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/forms/name-required-error.png" width="400px" alt="必须填写姓名"></img>
+<figure>
+  <img src="generated/images/guide/forms/name-required-error.png" alt="必须填写姓名">
 </figure>
 
 
@@ -1119,7 +1116,7 @@ Here you created a variable called `name` and gave it the value "ngModel".
 
 
 Why "ngModel"?
-A directive's [exportAs](api/core/index/Directive-decorator) property
+A directive's [exportAs](api/core/Directive) property
 tells Angular how to link the reference variable to the directive.
 You set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
 
@@ -1161,7 +1158,7 @@ you'll see the error message immediately, before you've done anything.
 
 Some developers want the message to display only when the user makes an invalid change.
 Hiding the message while the control is "pristine" achieves that goal.
-You'll see the significance of this choice when you [add a new hero](guide/forms#new-hero) to the form.
+You'll see the significance of this choice when you add a new hero to the form.
 
 有些人会为这种行为感到不安。它们希望只有在用户做出无效的更改时才显示这个消息。
 如果当控件是“全新”状态时也隐藏消息，就能达到这个目的。
@@ -1270,8 +1267,8 @@ to the hero form component's `onSubmit()` method:
 
 
 
-You'd already defined a template reference variable, 
-`#heroForm`, and initialized it with the value "ngForm". 
+You'd already defined a template reference variable,
+`#heroForm`, and initialized it with the value "ngForm".
 Now, use that variable to access the form with the Submit button.
 
 我们已经定义了一个模板引用变量`#heroForm`，并且把赋值为“ngForm”。
@@ -1291,7 +1288,7 @@ using an event binding. Here's the code:
 
 
 
-If you run the application now, you find that the button is enabled&mdash;although 
+If you run the application now, you find that the button is enabled&mdash;although
 it doesn't do anything useful yet.
 
 重新运行应用。表单打开时，状态是有效的，按钮是可用的。
diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md
index 605c86e67a..4e7c35fb12 100644
--- a/aio/content/guide/glossary.md
+++ b/aio/content/guide/glossary.md
@@ -1,6 +1,4 @@
-@description
-
-
+# Angular Glossary
 
 Angular has its own vocabulary.
 Most Angular terms are common English words
@@ -20,7 +18,7 @@ unexpected definitions.
 [S](guide/glossary#S) [T](guide/glossary#T) [U](guide/glossary#U) [V](guide/glossary#V) [W](guide/glossary#W) [X](guide/glossary#X) [Y](guide/glossary#Y) [Z](guide/glossary#Z)
 
 
-
+{@a A}
 {@a aot}
 
 
@@ -28,10 +26,6 @@ unexpected definitions.
 
 ## 预 (ahead-of-time, AoT) 编译
 
-<div class="l-sub-section">
-
-
-
 You can compile Angular applications at build time.
 By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly
 to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
@@ -43,57 +37,19 @@ Ahead-of-time compiled applications also benefit from decreased load time and in
   预编译的应用程序加载迅速，具有更高的性能。
 
 
-</div>
-
-
-
-## Angular module
-
-## Angular模块
-
-
-<div class="l-sub-section">
-
-
-
-Helps you organize an application into cohesive blocks of functionality.
-An Angular module identifies the components, directives, and pipes that the application uses along with the list of external Angular modules that the application needs, such as `FormsModule`.
-
-帮助我们将一个应用程序组织成内聚的功能模块群。
-一个 Angular 模块标识应用程序使用的组件、指令和管道等，还包含应用程序需要的外部 Angular 模块的列表，例如`FormsModule`。
-
-Every Angular application has an application root-module class. By convention, the class is
-called `AppModule` and resides in a file named `app.module.ts`.
-
-每个 Angular 应用程序都有一个应用程序根模块类。按规约这个类的名字为`AppModule`，存放在名为`app.module.ts`的文件。
-
-For details and examples, see the [Angular Modules (NgModule)](guide/ngmodule) page.
-
-要了解详情和范例，参见 [Angular 模块](guide/ngmodule)。
-
 
 </div>
 
 
-
 ## Annotation
 
-## 注解（Annotation）
-
-
-<div class="l-sub-section">
-
-
+## 注解
 
 In practice, a synonym for [Decoration](guide/glossary#decorator).
 
 实际上，是[装饰 (decoration)](guide/glossary#decorator) 的同义词。
 
 
-</div>
-
-
-
 {@a attribute-directive}
 
 
@@ -102,12 +58,7 @@ In practice, a synonym for [Decoration](guide/glossary#decorator).
 
 ## Attribute directives
 
-## 属性型指令 (attribute directive)
-
-
-<div class="l-sub-section">
-
-
+## 属性型指令
 
 A category of [directive](guide/glossary#directive) that can listen to and modify the behavior of
 other HTML elements, attributes, properties, and components. They are usually represented
@@ -124,21 +75,13 @@ Learn about them in the [_Attribute Directives_](guide/attribute-directives) gui
 要了解更多信息，请参见[_属性型指令_](guide/attribute-directives)页。
 
 
-</div>
-
-
-
+{@a B}
 
 ## Barrel
 
-## 封装桶 (barrel)
+## 封装桶
 
-
-<div class="l-sub-section">
-
-
-
-A  way to *rollup exports* from several ES2015 modules into a single convenient ES2015 module.
+A way to *roll up exports* from several ES2015 modules into a single convenient ES2015 module.
 The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
 
 封装桶是把多个模块的*导出结果*汇总到单一的 ES2015 模块的一种方式。
@@ -209,7 +152,7 @@ Angular 的每个[范围化包 (scoped package)](guide/glossary#scoped-package)
 
 
 
-You can often achieve the same result using [Angular modules](guide/glossary#angular-module) instead.
+You can often achieve the same result using [NgModules](guide/glossary#ngmodule) instead.
 
 注意，你可以利用 [Angular 模块](guide/glossary#angular-module)达到同样的目的。
 
@@ -217,20 +160,10 @@ You can often achieve the same result using [Angular modules](guide/glossary#ang
 </div>
 
 
-
-</div>
-
-
-
 ## Binding
 
 ## 绑定 (binding)
 
-
-<div class="l-sub-section">
-
-
-
 Usually refers to [data binding](guide/glossary#data-binding) and the act of
 binding an HTML object property to a data object property.
 
@@ -244,20 +177,13 @@ between a "token"&mdash;also referred to as a "key"&mdash;and a dependency [prov
 这种用法很少，而且一般都会在上下文中写清楚。
 
 
-</div>
-
-
-
 ## Bootstrap
 
 ## 启动/引导 (bootstrap)
 
 
-<div class="l-sub-section">
+You launch an Angular application by "bootstrapping" it using the application root NgModule (`AppModule`).
 
-
-
-You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`).
 Bootstrapping identifies an application's top level "root" [component](guide/glossary#component),
 which is the first component that is loaded for the application.
 For more information, see the [Setup](guide/setup) page.
@@ -271,20 +197,12 @@ You can bootstrap multiple apps in the same `index.html`, each app with its own
 你可以在同一个`index.html`中引导多个应用，每个应用都有它自己的顶级根组件。
 
 
-</div>
-
-
-
+{@a C}
 
 ## camelCase
 
 ## 驼峰式命名法 (camelCase)
 
-
-<div class="l-sub-section">
-
-
-
 The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter
 _except the first letter, which is lowercase_.
 
@@ -301,10 +219,6 @@ In Angular documentation, "camelCase" always means *lower camel case*.
 在文档中提到“驼峰式命名法 (camelCase) ”的时候，我们所指的都是小驼峰命名法。
 
 
-</div>
-
-
-
 {@a component}
 
 
@@ -312,11 +226,6 @@ In Angular documentation, "camelCase" always means *lower camel case*.
 
 ## 组件 (component)
 
-
-<div class="l-sub-section">
-
-
-
 An Angular class responsible for exposing data to a [view](guide/glossary#view) and handling most of the view’s display and user-interaction logic.
 
 组件是一个 Angular 类，用于把数据展示到[视图 (view)](guide/glossary#view)，并处理几乎所有的视图显示和交互逻辑。
@@ -340,20 +249,12 @@ the component in the role of "controller" or "view model".
 
 如果你熟悉 "MVC" 和 "MVVM" 模式，就会意识到组件充当了“控制器 (controller) ”和“视图模型 (view model) ”的角色。
 
-</div>
-
-
-
+{@a D}
 
 ## dash-case
 
 ## 中线命名法 (dash-case)
 
-
-<div class="l-sub-section">
-
-
-
 The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`).
 This form is also known as kebab-case.
 
@@ -367,19 +268,10 @@ spelled in dash-case.
 [指令](guide/glossary#directive)的选择器（例如`my-app`）和文件名（例如`hero-list.component.ts`）通常是用中线命名法来命名。
 
 
-</div>
-
-
-
 ## Data binding
 
 ## 数据绑定 (data binding)
 
-
-<div class="l-sub-section">
-
-
-
 Applications display data values to a user and respond to user
 actions (such as clicks, touches, and keystrokes).
 
@@ -431,12 +323,6 @@ Angular 有一个非常强大的数据绑定框架，具有各种数据绑定操
 
    [基于 ngModel 的双向数据绑定 (Two-way data binding with ngModel)](guide/template-syntax#ngModel)
 
-
-
-</div>
-
-
-
 {@a decorator}
 
 
@@ -445,18 +331,13 @@ Angular 有一个非常强大的数据绑定框架，具有各种数据绑定操
 
 ## Decorator | decoration
 
-## 装饰器 (decorator | decoration)
+## 装饰器（decorator | decoration）
 
-
-<div class="l-sub-section">
-
-
-
-A  *function* that adds metadata to a class, its members (properties, methods) and function arguments.
+A *function* that adds metadata to a class, its members (properties, methods) and function arguments.
 
 装饰器是一个**函数**，它将元数据添加到类、类成员（属性、方法）和函数参数。
 
-Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (also known as ES7).
+Decorators are an experimental (stage 2), JavaScript language [feature](https://github.com/wycats/javascript-decorators). TypeScript adds support for decorators.
 
 装饰器是一个 JavaScript 的语言[特性](https://github.com/wycats/javascript-decorators)，装饰器在 TypeScript 里已经实现，并被推荐到了ES2016（也就是ES7）。
 
@@ -501,19 +382,9 @@ Always include parentheses `()` when applying a decorator.
 </div>
 
 
-
-</div>
-
-
-
 ## Dependency injection
 
-## 依赖注入 (dependency injection)
-
-
-<div class="l-sub-section">
-
-
+## 依赖注入（dependency injection）
 
 A design pattern and mechanism
 for creating and delivering parts of an application to other
@@ -602,10 +473,6 @@ Read more in the [Dependency Injection](guide/dependency-injection) page.
 更多信息，参见[依赖注入 (dependency injection)](guide/dependency-injection)。
 
 
-</div>
-
-
-
 {@a directive}
 
 
@@ -616,11 +483,6 @@ Read more in the [Dependency Injection](guide/dependency-injection) page.
 
 ## 指令 (directive)
 
-
-<div class="l-sub-section">
-
-
-
 An Angular class responsible for creating, reshaping, and interacting with HTML elements
 in the browser DOM. The directive is Angular's most fundamental feature.
 
@@ -672,33 +534,25 @@ elements and their children.
   [结构型指令 (structural directive)](guide/glossary#structural-directive)：负责塑造或重塑 HTML
 布局。这一般是通过添加、删除或者操作 HTML 元素及其子元素来实现的。
 
-</div>
-
-
-
+{@a E}
 
 ## ECMAScript
 
-
-<div class="l-sub-section">
-
-
-
 The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
 
 [官方 JavaScript 语言规范](https://en.wikipedia.org/wiki/ECMAScript)
 
 The latest approved version of JavaScript is
-[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)
-(also known as "ES2016" or "ES7"). Many Angular developers write their applications
-in ES7 or a dialect that strives to be
+[ECMAScript 2017](http://www.ecma-international.org/ecma-262/8.0/)
+(also known as "ES2017" or "ES8"). Many Angular developers write their applications
+in ES8 or a dialect that strives to be
 compatible with it, such as [TypeScript](guide/glossary#typescript).
 
 最新批准的 JavaScript 版本是[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)（也称“ES2016”或“ES7”）。
 Angular 的开发人员要么使用这个版本的语言，要么使用与之兼容的方言，例如 [TypeScript](guide/glossary#typesScript)。
 
 Most modern browsers only support the much older "ECMAScript 5" (also known as "ES5") standard.
-Applications written in ES2016, ES2015, or one of their dialects must be [transpiled](guide/glossary#transpile)
+Applications written in ES2017, ES2016, ES2015, or one of their dialects must be [transpiled](guide/glossary#transpile)
 to ES5 JavaScript.
 
 目前，几乎所有现代游览器只支持很老的“ECMAScript 5” （也称ES5）标准。
@@ -709,55 +563,24 @@ Angular developers can write in ES5 directly.
 Angular 的开发人员也可以选择直接使用 ES5 编程。
 
 
-</div>
-
-
-
 ## ES2015
 
-
-<div class="l-sub-section">
-
-
-
 Short hand for [ECMAScript](guide/glossary#ecmascript) 2015.
 
 [ECMAScript](guide/glossary#ecmascript) 2015 的缩写。
 
-
-</div>
-
-
-
 ## ES5
 
-<div class="l-sub-section">
-
-
-
 Short hand for [ECMAScript](guide/glossary#ecmascript) 5, the version of JavaScript run by most modern browsers.
 
 “[ECMAScript](guide/glossary#ecmascript) 5”的简写，大部分现代浏览器使用的 JavaScript 版本。
 
-
-</div>
-
-
-
 ## ES6
 
-<div class="l-sub-section">
-
-
-
 Short hand for [ECMAScript](guide/glossary#ecmascript) 2015.
 
 [ECMAScript](guide/glossary#ecmascript) 2015 的简写。
 
-</div>
-
-
-
 {@a F}
 
 
@@ -766,16 +589,12 @@ Short hand for [ECMAScript](guide/glossary#ecmascript) 2015.
 
 {@a H}
 
-
+{@a I}
 
 ## Injector
 
 ## 注入器 (injector)
 
-<div class="l-sub-section">
-
-
-
 An object in the Angular [dependency-injection system](guide/glossary#dependency-injection)
 that can find a named dependency in its cache or create a dependency
 with a registered [provider](guide/glossary#provider).
@@ -783,18 +602,10 @@ with a registered [provider](guide/glossary#provider).
 Angular [依赖注入系统 (Dependency Injection System)](guide/glossary#dependency-injection)中的一个对象，
 它可以在自己的缓存中找到一个命名的“依赖”或者利用已注册的[提供商 (provider)](guide/glossary#provider) 创建这样一个依赖。
 
-</div>
-
-
-
 ## Input
 
 ## 输入属性 (input)
 
-<div class="l-sub-section">
-
-
-
 A directive property that can be the *target* of a
 [property binding](guide/template-syntax#property-binding) (explained in detail in the [Template Syntax](guide/template-syntax) page).
 Data values flow *into* this property from the data source identified
@@ -808,19 +619,10 @@ See the [Input and output properties](guide/template-syntax#inputs-outputs) sect
 见[模板语法](guide/template-syntax)中的[输入与输出属性](guide/template-syntax#inputs-outputs)。
 
 
-</div>
-
-
-
 ## Interpolation
 
 ## 插值表达式 (interpolation)
 
-
-<div class="l-sub-section">
-
-
-
 A form of [property data binding](guide/glossary#data-binding) in which a
 [template expression](guide/glossary#template-expression) between double-curly braces
 renders as text.  That text may be concatenated with neighboring text
@@ -844,10 +646,7 @@ Read more about [interpolation](guide/template-syntax#interpolation) in the
 更多信息，见[模板语法](guide/template-syntax)中的[插值表达式](guide/template-syntax#interpolation)。
 
 
-</div>
-
-
-
+{@a J}
 
 {@a jit}
 
@@ -856,11 +655,7 @@ Read more about [interpolation](guide/template-syntax#interpolation) in the
 
 ## 即时 (just-in-time, JiT) 编译
 
-<div class="l-sub-section">
-
-
-
-A  bootstrapping method of compiling components and modules in the browser
+A bootstrapping method of compiling components and modules in the browser
 and launching the application dynamically. Just-in-time mode is a good choice during development.
 Consider using the [ahead-of-time](guide/glossary#aot) mode for production apps.
 
@@ -868,39 +663,23 @@ Angular 的即时编译在浏览器中启动并编译所有的组件和模块，
   它很适合在开发过程中使用。但是在产品发布时，推荐采用[预编译 (ahead-of-time)](guide/glossary#aot) 模式。
 
 
-</div>
-
-
-
+{@a K}
 
 ## kebab-case
 
 ## 烤串命名法 (kebab-case)
 
-
-<div class="l-sub-section">
-
-
-
 See [dash-case](guide/glossary#dash-case).
 
 见[中线命名法 (dash-case)](guide/glossary#dash-case)。
 
 
-</div>
-
-
-
+{@a L}
 
 ## Lifecycle hooks
 
 ## 生命周期钩子 (lifecycle hook)
 
-
-<div class="l-sub-section">
-
-
-
 [Directives](guide/glossary#directive) and [components](guide/glossary#component) have a lifecycle
 managed by Angular as it creates, updates, and destroys them.
 
@@ -956,33 +735,23 @@ Read more in the [Lifecycle Hooks](guide/lifecycle-hooks) page.
 
 更多信息，见[生命周期钩子 (lifecycle hook)](guide/lifecycle-hooks)。
 
-</div>
-
-
-
+{@a M}
 
 ## Module
 
 ## 模块 (module)
 
-
-<div class="l-sub-section">
-
-
-
 <div class="alert is-important">
 
 
-
 Angular has the following types of modules:
 
 Angular有下列模块类型：
 
-* [Angular modules](guide/glossary#angular-module).
-For details and examples, see the [Angular Modules](guide/ngmodule) page.
+* [NgModules](guide/glossary#ngmodule).
+For details and examples, see the [NgModules](guide/ngmodule) page.
 
   [Angular 模块](guide/glossary#angular-module)，见[Angular 模块](guide/ngmodule)。
-
 * ES2015 modules, as described in this section.
 
   本节描述的 ES2015 模块。
@@ -1010,7 +779,7 @@ a module that needs that class *imports* it.
 模块会**导出 (export) **代码中的某些值，最典型的就是类。
 模块如果需要什么东西，那就**导入 (import) **它。
   
-The structure of Angular modules and the import/export syntax
+The structure of NgModules and the import/export syntax
 is based on the [ES2015 module standard](http://www.2ality.com/2014/09/es6-modules-final.html).
   
 Angular 的模块结构和导入/导出语法是基于 [ES2015 模块标准](http://www.2ality.com/2014/09/es6-modules-final.html)的。
@@ -1026,7 +795,7 @@ Angular 不附带模块加载器，也不偏爱任何第三方库（虽然大多
 你可以选择任何与这个标准兼容的模块化库。
 
 Modules are typically named after the file in which the exported thing is defined.
-The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/date_pipe.ts)
+The Angular [DatePipe](https://github.com/angular/angular/blob/master/packages/common/src/pipes/date_pipe.ts)
 class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
 
 模块一般与它定义导出物的文件同名。例如，Angular 的 [DatePipe](https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/date_pipe.ts) 类属于名叫`date_pipe`的特性模块，位于`date_pipe.ts`文件中。
@@ -1037,15 +806,10 @@ You rarely access Angular feature modules directly. You usually import them from
 而通常会从一个 Angular [范围化包 (scoped package)](guide/glossary#scoped-package)中导入它们，例如`@angular/core`。
 
 
-</div>
-
-
-
 {@a N}
 
 
-
-## Observable
+## NgModule
 
 ## 可观察对象 (observable)
 
@@ -1054,6 +818,21 @@ You rarely access Angular feature modules directly. You usually import them from
 
 
 
+Helps you organize an application into cohesive blocks of functionality.
+An NgModule identifies the components, directives, and pipes that the application uses along with the list of external NgModules that the application needs, such as `FormsModule`.
+
+Every Angular application has an application root-module class. By convention, the class is
+called `AppModule` and resides in a file named `app.module.ts`.
+
+For details and examples, see [NgModules](guide/ngmodule).
+
+
+</div>
+
+{@a O}
+
+## Observable
+
 An array whose items arrive asynchronously over time.
 Observables help you manage asynchronous data, such as data coming from a backend service.
 Observables are used within Angular itself, including Angular's event system and its HTTP client service.
@@ -1069,19 +848,10 @@ Observables are a proposed feature for ES 2016, the next version of JavaScript.
 在下个版本的 JavaScript - ES 2016 中，`Observable`是建议的特性之一。
 
 
-</div>
-
-
-
 ## Output
 
 ## 输出属性 (output)
 
-
-<div class="l-sub-section">
-
-
-
 A directive property that can be the *target* of event binding
 (read more in the [event binding](guide/template-syntax#event-binding)
 section of the [Template Syntax](guide/template-syntax) page).
@@ -1096,20 +866,12 @@ See the [Input and output properties](guide/template-syntax#inputs-outputs) sect
 参见[模板语法](/docs/ts/latest/guide/template-syntax.html)中的[输入与输出属性](guide/template-syntax#inputs-outputs)部分。
 
 
-</div>
-
-
-
+{@a P}
 
 ## PascalCase
 
 ## Pascal 命名法 (PascalCase)
 
-
-<div class="l-sub-section">
-
-
-
 The practice of writing individual words, compound words, or phrases such that each word or abbreviation begins with a capital letter.
 Class names are typically spelled in PascalCase. For example, `Person` and `HeroDetailComponent`.
 
@@ -1123,19 +885,10 @@ In this documentation, "PascalCase" means *upper camel case* and  "camelCase" me
 在本文档中，“Pascal 命名法”都是指的*大写驼峰式命名法*，“驼峰式命名法”指的都是*小写驼峰式命名法*。
 
 
-</div>
-
-
-
 ## Pipe
 
 ## 管道 (pipe)
 
-
-<div class="l-sub-section">
-
-
-
 An Angular pipe is a function that transforms input values to output values for
 display in a [view](guide/glossary#view).
 Here's an example that uses the built-in `currency` pipe to display
@@ -1159,19 +912,10 @@ Read more in the page on [pipes](guide/pipes).
 更多信息，见[管道](guide/pipes)。
 
 
-</div>
-
-
-
 ## Provider
 
 ## 提供商 (provider)
 
-
-<div class="l-sub-section">
-
-
-
 A _provider_ creates a new instance of a dependency for the
 [dependency injection](guide/glossary#dependency-injection) system.
 It relates a lookup token to code&mdash;sometimes called a "recipe"&mdash;that can create a dependency value.
@@ -1180,23 +924,14 @@ It relates a lookup token to code&mdash;sometimes called a "recipe"&mdash;that c
 它把一个查找令牌和代码（有时也叫“配方”）关联到一起，以便创建依赖值。
 
 
-</div>
-
-
-
 {@a Q}
 
-
+{@a R}
 
 ## Reactive forms
 
 ## 响应式表单 (reactive forms)
 
-
-<div class="l-sub-section">
-
-
-
 A technique for building Angular forms through code in a component.
 The alternative technique is [template-driven forms](guide/glossary#template-driven-forms).
 
@@ -1228,19 +963,10 @@ Reactive forms are powerful, flexible, and a good choice for more complex data-e
 动态表单非常强大、灵活，它在复杂数据输入的场景下尤其好用，例如动态的生成表单控制器。
 
 
-</div>
-
-
-
 ## Router
 
 ## 路由器 (router)
 
-
-<div class="l-sub-section">
-
-
-
 Most applications consist of many screens or [views](guide/glossary#view).
 The user navigates among them by clicking links and buttons,
 and performing other similar actions that cause the application to
@@ -1274,10 +1000,6 @@ For more information, see the [Routing & Navigation](guide/router) page.
 更多信息，见[路由与导航](guide/router)。
 
 
-</div>
-
-
-
 ## Router module
 
 ## 路由器模块 (router module)
@@ -1285,9 +1007,7 @@ For more information, see the [Routing & Navigation](guide/router) page.
 
 <div class="l-sub-section">
 
-
-
-A separate [Angular module](guide/glossary#angular-module) that provides the necessary service providers and directives for navigating through application views.
+A separate [NgModule](guide/glossary#ngmodule) that provides the necessary service providers and directives for navigating through application views.
 
 一个独立的 [Angular 模块](guide/glossary#angular-module)，用来提供导航所需的服务提供商和指令。
 
@@ -1296,19 +1016,10 @@ For more information, see the [Routing & Navigation](guide/router) page.
 更多信息，见[路由与导航](guide/router)。
 
 
-</div>
-
-
-
 ## Routing component
 
 ## 路由组件 (routing component)
 
-
-<div class="l-sub-section">
-
-
-
 An Angular [component](guide/glossary#component) with a `RouterOutlet` that displays views based on router navigations.
 
 一个带有 RouterOutlet 的 Angular [组件](guide/glossary#component)，根据路由器导航来显示视图。
@@ -1318,26 +1029,18 @@ For more information, see the [Routing & Navigation](guide/router) page.
 更多信息，见[路由与导航](guide/router)。
 
 
-</div>
-
-
-
+{@a S}
 
 ## Scoped package
 
 ## 范围化包 (scoped package)
 
-
-<div class="l-sub-section">
-
-
-
 A way to group related *npm* packages.
 Read more at the [npm-scope](https://docs.npmjs.com/misc/scope) page.
 
 对相关的*npm*包进行分组的一种方式，参阅[npm-scope](https://docs.npmjs.com/misc/scope)。
 
-Angular modules are delivered within *scoped packages* such as `@angular/core`,
+NgModules are delivered within *scoped packages* such as `@angular/core`,
 `@angular/common`, `@angular/platform-browser-dynamic`, `@angular/http`, and `@angular/router`.
 
 Angular 模块是用一系列*范围化包*的形式发布的，例如`@angular/core`、`@angular/common`、`@angular/platform-browser-dynamic`、`@angular/http`和`@angular/router`。
@@ -1355,20 +1058,10 @@ is that the scoped package name begins with the Angular *scope name*, `@angular`
 </code-example>
 
 
-
-</div>
-
-
-
 ## Service
 
 ## 服务 (service)
 
-
-<div class="l-sub-section">
-
-
-
 For data or logic that is not associated
 with a specific view or that you want to share across components, build services.
 
@@ -1391,14 +1084,9 @@ Applications often require services such as a data service or a logging service.
 
 应用通常都需要服务，比如数据服务或者日志服务。
 
-For more information, see the [Services](guide/.ial/toh-pt4) page of the [Tour of Heroes](guide/.ial/) tutorial.
-
-更多信息，见[英雄指南](guide/.ial/)中的[服务](guide/.ial/toh-pt4)。
-
-
-</div>
-
+For more information, see the [Services](tutorial/toh-pt4) page of the [Tour of Heroes](tutorial) tutorial.
 
+更多信息，见[英雄指南](tutorial)中的[服务](tutorial/toh-pt4)。
 
 {@a snake-case}
 
@@ -1407,21 +1095,12 @@ For more information, see the [Services](guide/.ial/toh-pt4) page of the [Tour o
 
 ## 蛇形命名法
 
-
-<div class="l-sub-section">
-
-
-
 The practice of writing compound words or phrases such that an
 underscore (`_`) separates one word from the next. This form is also known as *underscore case*.
 
 写复合词或短语的一种方式，在多个词之间用下划线(`_`)分隔。也叫*下划线命名法*
 
 
-</div>
-
-
-
 {@a structural-directive}
 
 
@@ -1430,10 +1109,6 @@ underscore (`_`) separates one word from the next. This form is also known as *u
 
 ## Structural directives
 
-<div class="l-sub-section">
-
-
-
 A category of [directive](guide/glossary#directive) that can
 shape or reshape HTML layout, typically by adding and removing elements in the DOM.
 The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are well-known examples.
@@ -1447,20 +1122,12 @@ Read more in the [Structural Directives](guide/structural-directives) page.
 更多信息，见[结构型指令](guide/structural-directives)。
 
 
-</div>
-
-
-
+{@a T}
 
 ## Template
 
 ## 模板 (template)
 
-
-<div class="l-sub-section">
-
-
-
 A chunk of HTML that Angular uses to render a [view](guide/glossary#view) with
 the support and guidance of an Angular [directive](guide/glossary#directive),
 most notably a [component](guide/glossary#component).
@@ -1469,19 +1136,10 @@ most notably a [component](guide/glossary#component).
     的支持和持续指导下，用它来渲染[视图 (view)](guide/glossary#view)。
 
 
-</div>
-
-
-
 ## Template-driven forms
 
 ## 模板驱动表单 (template-driven forms)
 
-
-<div class="l-sub-section">
-
-
-
 A technique for building Angular forms using HTML forms and input elements in the view.
 The alternate technique is [Reactive Forms](guide/glossary#reactive-forms).
 
@@ -1518,19 +1176,10 @@ in the [Forms](guide/forms) page.
 要了解如何构建模板驱动表单的更多信息，参见[表单](guide/forms)页。
 
 
-</div>
-
-
-
 ## Template expression
 
 ## 模板表达式 (template expression)
 
-
-<div class="l-sub-section">
-
-
-
 A TypeScript-like syntax that Angular evaluates within
 a [data binding](guide/glossary#data-binding).
 
@@ -1543,36 +1192,18 @@ of the [Template Syntax](guide/template-syntax) page.
 到[模板语法](guide/template-syntax)一章的[模板表达式](guide/guide/template-syntax#template-expressions)部分了解更多模板表达式的知识。
 
 
-</div>
-
-
-
 ## Transpile
 
 ## 转译（transpile)
 
-
-<div class="l-sub-section">
-
-
-
 The process of transforming code written in one form of JavaScript
 (such as TypeScript) into another form of JavaScript  (such as [ES5](guide/glossary#es5)).
 
 把一种形式的 JavaScript（例如 TypeScript）转换成另一种形式的 JavaScript（例如 [ES5](guide/glossary#es5)）的过程。
 
 
-</div>
-
-
-
 ## TypeScript
 
-
-<div class="l-sub-section">
-
-
-
 A version of JavaScript that supports most [ECMAScript 2015](guide/glossary#es2015)
 language features such as [decorators](guide/glossary#decorator).
 
@@ -1597,23 +1228,14 @@ Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org
 更多信息，见[typescript.org](http://www.typescriptlang.org/)。
 
 
-</div>
-
-
-
 {@a U}
 
-
+{@a V}
 
 ## View
 
 ## 视图 (view)
 
-
-<div class="l-sub-section">
-
-
-
 A portion of the screen that displays information and responds
 to user actions such as clicks, mouse moves, and keystrokes.
 
@@ -1636,10 +1258,6 @@ under the control of a [router](guide/glossary#router).
 任何视图都可能被动态加载或卸载，这一般会在[路由器 (router)](guide/glossary#router) 的控制下进行。
 
 
-</div>
-
-
-
 {@a W}
 
 
@@ -1649,16 +1267,12 @@ under the control of a [router](guide/glossary#router).
 {@a Y}
 
 
+{@a Z}
 
 ## Zone
 
 ## 区域 (zone)
 
-
-<div class="l-sub-section">
-
-
-
 A mechanism for encapsulating and intercepting
 a JavaScript application's asynchronous activity.
 
@@ -1689,6 +1303,3 @@ Learn more about zones in this
   [Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
 
 更多信息，见 [Brian Ford 的视频](https://www.youtube.com/watch?v=3IqtmUscE_U)。
-
-</div>
-
diff --git a/aio/content/guide/hierarchical-dependency-injection.md b/aio/content/guide/hierarchical-dependency-injection.md
index ff6f0ca463..113c038957 100644
--- a/aio/content/guide/hierarchical-dependency-injection.md
+++ b/aio/content/guide/hierarchical-dependency-injection.md
@@ -1,12 +1,6 @@
-@title
-多级依赖注入器
-
-@intro
-Angular 的多级依赖注入系统支持与组件树并行的嵌套式注入器。
-
-@description
-
+# Hierarchical Dependency Injectors
 
+# 多级依赖注入器
 
 You learned the basics of Angular Dependency injection in the
 [Dependency Injection](guide/dependency-injection) guide.
@@ -79,8 +73,8 @@ open simultaneously.
 下图展示了当`HeroesCardComponent`的三个 `HeroTaxReturnComponent` 实例同时展开时的三级组件树状态。
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/dependency-injection/component-hierarchy.png" alt="injector tree" width="600"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection/component-hierarchy.png" alt="injector tree">
 </figure>
 
 
@@ -240,8 +234,8 @@ Each tax return component has the following characteristics:
   能把所做的修改保存到它的报税单中，或者放弃它们。
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/dependency-injection/hid-heroes-anim.gif" width="400" alt="Heroes in action"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection/hid-heroes-anim.gif" alt="Heroes in action">
 </figure>
 
 
@@ -366,8 +360,8 @@ Component (B) is the parent of another component (C) that defines its own, even
 组件B是另一个组件C的父组件，而组件C又定义了自己的，*更特殊的*`CarService`提供商。
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/dependency-injection/car-components.png" alt="car components" width="220"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection/car-components.png" alt="car components">
 </figure>
 
 
@@ -383,8 +377,8 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng
 当我们在最深层的组件C解析`Car`的实例时，它使用注入器C解析生成了一个`Car`的实例，使用注入器B解析了`Engine`，而`Tires`则是由根注入器A解析的。
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/dependency-injection/injector-tree.png" alt="car injector tree" width="600"></img>
+<figure>
+  <img src="generated/images/guide/dependency-injection/injector-tree.png" alt="car injector tree">
 </figure>
 
 
diff --git a/aio/content/guide/http.md b/aio/content/guide/http.md
new file mode 100644
index 0000000000..a21e0d821a
--- /dev/null
+++ b/aio/content/guide/http.md
@@ -0,0 +1,648 @@
+# HttpClient
+
+Most front-end applications communicate with backend services over the HTTP protocol. Modern browsers support two different APIs for making HTTP requests: the `XMLHttpRequest` interface and the `fetch()` API.
+
+With `HttpClient`, `@angular/common/http` provides a simplified API for HTTP functionality for use with Angular applications, building on top of the `XMLHttpRequest` interface exposed by browsers.
+Additional benefits of `HttpClient` include testability support, strong typing of request and response objects, request and response interceptor support, and better error handling via apis based on Observables.
+
+## Setup: installing the module
+
+Before you can use the `HttpClient`, you need to install the `HttpClientModule` which provides it. This can be done in your application module, and is only necessary once.
+
+```javascript
+// app.module.ts:
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+// Import HttpClientModule from @angular/common/http
+import {HttpClientModule} from '@angular/common/http';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    // Include it under 'imports' in your application module
+    // after BrowserModule.
+    HttpClientModule,
+  ],
+})
+export class MyAppModule {}
+```
+
+Once you import `HttpClientModule` into your app module, you can inject `HttpClient`
+into your components and services.
+
+## Making a request for JSON data
+
+The most common type of request applications make to a backend is to request JSON data. For example, suppose you have an API endpoint that lists items, `/api/items`, which returns a JSON object of the form:
+
+```json
+{
+  "results": [
+    "Item 1",
+    "Item 2",
+  ]
+}
+```
+
+The `get()` method on `HttpClient` makes accessing this data straightforward.
+
+
+```javascript
+@Component(...)
+export class MyComponent implements OnInit {
+
+  results: string[];
+
+  // Inject HttpClient into your component or service.
+  constructor(private http: HttpClient) {}
+
+  ngOnInit(): void {
+    // Make the HTTP request:
+    this.http.get('/api/items').subscribe(data => {
+      // Read the result field from the JSON response.
+      this.results = data['results'];
+    });
+  }
+}
+```
+
+
+### Typechecking the response
+
+In the above example, the `data['results']` field access stands out because you use bracket notation to access the results field. If you tried to write `data.results`, TypeScript would correctly complain that the `Object` coming back from HTTP does not have a `results` property. That's because while `HttpClient` parsed the JSON response into an `Object`, it doesn't know what shape that object is.
+
+You can, however, tell `HttpClient` what type the response will be, which is recommended.
+To do so, first you define an interface with the correct shape:
+
+```javascript
+interface ItemsResponse {
+  results: string[];
+}
+```
+
+Then, when you make the `HttpClient.get` call, pass a type parameter:
+
+```javascript
+http.get<ItemsResponse>('/api/items').subscribe(data => {
+  // data is now an instance of type ItemsResponse, so you can do this:
+  this.results = data.results;
+});
+```
+
+### Reading the full response
+
+The response body doesn't return all the data you may need. Sometimes servers return special headers or status codes to indicate certain conditions, and inspecting those can be necessary. To do this, you can tell `HttpClient` you want the full response instead of just the body with the `observe` option:
+
+```javascript
+http
+  .get<MyJsonData>('/data.json', {observe: 'response'})
+  .subscribe(resp => {
+    // Here, resp is of type HttpResponse<MyJsonData>.
+    // You can inspect its headers:
+    console.log(resp.headers.get('X-Custom-Header'));
+    // And access the body directly, which is typed as MyJsonData as requested.
+    console.log(resp.body.someField);
+  });
+```
+
+As you can see, the resulting object has a `body` property of the correct type.
+
+
+
+### Error handling
+
+What happens if the request fails on the server, or if a poor network connection prevents it from even reaching the server? `HttpClient` will return an _error_ instead of a successful response.
+
+To handle it, add an error handler to your `.subscribe()` call:
+
+```javascript
+http
+  .get<ItemsResponse>('/api/items')
+  .subscribe(
+    // Successful responses call the first callback.
+    data => {...},
+    // Errors will call this callback instead:
+    err => {
+      console.log('Something went wrong!');
+    }
+  });
+```
+
+#### Getting error details
+
+Detecting that an error occurred is one thing, but it's more useful to know what error actually occurred. The `err` parameter to the callback above is of type `HttpErrorResponse`, and contains useful information on what went wrong.
+
+There are two types of errors that can occur. If the backend returns an unsuccessful response code (404, 500, etc.), it gets returned as an error. Also, if something goes wrong client-side, such as an exception gets thrown in an RxJS operator, or if a network error prevents the request from completing successfully, an actual `Error` will be thrown.
+
+In both cases, you can look at the `HttpErrorResponse` to figure out what happened.
+
+```javascript
+http
+  .get<ItemsResponse>('/api/items')
+  .subscribe(
+  	data => {...},
+    (err: HttpErrorResponse) => {
+      if (err.error instanceof Error) {
+        // A client-side or network error occurred. Handle it accordingly.
+        console.log('An error occurred:', err.error.message);
+      } else {
+        // The backend returned an unsuccessful response code.
+        // The response body may contain clues as to what went wrong,
+        console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
+      }
+    }
+  });
+```
+
+#### `.retry()`
+
+One way to deal with errors is to simply retry the request. This strategy can be useful when the errors are transient and unlikely to repeat.
+
+RxJS has a useful operator called `.retry()`, which automatically resubscribes to an Observable, thus reissuing the request, upon encountering an error.
+
+First, import it:
+
+```js
+import 'rxjs/add/operator/retry';
+```
+
+Then, you can use it with HTTP Observables like this:
+
+```javascript
+http
+  .get<ItemsResponse>('/api/items')
+  // Retry this request up to 3 times.
+  .retry(3)
+  // Any errors after the 3rd retry will fall through to the app.
+  .subscribe(...);
+```
+
+### Requesting non-JSON data
+
+Not all APIs return JSON data. Suppose you want to read a text file on the server. You have to tell `HttpClient` that you expect a textual response:
+
+```javascript
+http
+  .get('/textfile.txt', {responseType: 'text'})
+  // The Observable returned by get() is of type Observable<string>
+  // because a text response was specified. There's no need to pass
+  // a <string> type parameter to get().
+  .subscribe(data => console.log(data));
+```
+
+## Sending data to the server
+
+In addition to fetching data from the server, `HttpClient` supports mutating requests, that is, sending data to the server in various forms.
+
+### Making a POST request
+
+One common operation is to POST data to a server; for example when submitting a form. The code for
+sending a POST request is very similar to the code for GET:
+
+```javascript
+const body = {name: 'Brad'};
+
+http
+  .post('/api/developers/add', body)
+  // See below - subscribe() is still necessary when using post().
+  .subscribe(...);
+```
+<div class="alert is-important">
+
+*Note the `subscribe()` method.* All Observables returned from `HttpClient` are _cold_, which is to say that they are _blueprints_ for making requests. Nothing will happen until you call `subscribe()`, and every such call will make a separate request. For example, this code sends a POST request with the same data twice:
+
+```javascript
+const req = http.post('/api/items/add', body);
+// 0 requests made - .subscribe() not called.
+req.subscribe();
+// 1 request made.
+req.subscribe();
+// 2 requests made.
+```
+</div>
+
+### Configuring other parts of the request
+
+Besides the URL and a possible request body, there are other aspects of an outgoing request which you may wish to configure. All of these are available via an options object, which you pass to the request.
+
+#### Headers
+
+One common task is adding an `Authorization` header to outgoing requests. Here's how you do that:
+
+```javascript
+http
+  .post('/api/items/add', body, {
+    headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
+  })
+  .subscribe();
+```
+
+The `HttpHeaders` class is immutable, so every `set()` returns a new instance and applies the changes.
+
+#### URL Parameters
+
+Adding URL parameters works in the same way. To send a request with the `id` parameter set to `3`, you would do:
+
+```javascript
+http
+  .post('/api/items/add', body, {
+    params: new HttpParams().set('id', '3'),
+  })
+  .subscribe();
+```
+
+In this way, you send the POST request to the URL `/api/items/add?id=3`.
+
+## Advanced usage
+
+The above sections detail how to use the basic HTTP functionality in `@angular/common/http`, but sometimes you need to do more than just make requests and get data back.
+
+
+### Intercepting all requests or responses
+
+A major feature of `@angular/common/http` is _interception_, the ability to declare interceptors which sit in between your application and the backend. When your application makes a request, interceptors transform it
+before sending it to the server, and the interceptors can transform the response on its way back before your application sees it. This is useful for everything from authentication to logging.
+
+#### Writing an interceptor
+
+To implement an interceptor, you declare a class that implements `HttpInterceptor`, which
+has a single `intercept()` method. Here is a simple interceptor which does nothing but forward the request through without altering it:
+
+```javascript
+import {Injectable} from '@angular/core';
+import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
+
+@Injectable()
+export class NoopInterceptor implements HttpInterceptor {
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(req);
+  }
+}
+```
+
+`intercept` is a method which transforms a request into an Observable that eventually returns the response. In this sense, each interceptor is entirely responsible for handling the request by itself.
+
+Most of the time, though, interceptors will make some minor change to the request and forward it to the rest of the chain. That's where the `next` parameter comes in. `next` is an `HttpHandler`, an interface that, similar to `intercept`, transforms a request into an Observable for the response. In an interceptor, `next` always represents the next interceptor in the chain, if any, or the final backend if there are no more interceptors. So most interceptors will end by calling `next` on the request they transformed.
+
+Our do-nothing handler simply calls `next.handle` on the original request, forwarding it without mutating it at all.
+
+This pattern is similar to those in middleware frameworks such as Express.js.
+
+##### Providing your interceptor
+
+Simply declaring the `NoopInterceptor` above doesn't cause your app to use it. You need to wire it up in your app module by providing it as an interceptor, as follows:
+
+```javascript
+import {NgModule} from '@angular/core';
+import {HTTP_INTERCEPTORS} from '@angular/common/http';
+
+@NgModule({
+  providers: [{
+    provide: HTTP_INTERCEPTORS,
+    useClass: NoopInterceptor,
+    multi: true,
+  }],
+})
+export class AppModule {}
+```
+
+Note the `multi: true` option. This is required and tells Angular that `HTTP_INTERCEPTORS` is an array of values, rather than a single value.
+
+
+##### Events
+
+You may have also noticed that the Observable returned by `intercept` and `HttpHandler.handle` is not an `Observable<HttpResponse<any>>` but an `Observable<HttpEvent<any>>`. That's because interceptors work at a lower level than the `HttpClient` interface. A single request can generate multiple events, including upload and download progress events. The `HttpResponse` class is actually an event itself, with a `type` of `HttpEventType.HttpResponseEvent`.
+
+An interceptor must pass through all events that it does not understand or intend to modify. It must not filter out events it didn't expect to process. Many interceptors are only concerned with the outgoing request, though, and will simply return the event stream from `next` without modifying it.
+
+
+##### Ordering
+
+When you provide multiple interceptors in an application, Angular applies them in the order that you
+provided them.
+
+##### Immutability
+
+Interceptors exist to examine and mutate outgoing requests and incoming responses. However, it may be surprising to learn that the `HttpRequest` and `HttpResponse` classes are largely immutable.
+
+This is for a reason: because the app may retry requests, the interceptor chain may process an individual request multiple times. If requests were mutable, a retried request would be different than the original request. Immutability ensures the interceptors see the same request for each try.
+
+There is one case where type safety cannot protect you when writing interceptors&mdash;the request body. It is invalid to mutate a request body within an interceptor, but this is not checked by the type system.
+
+If you have a need to mutate the request body, you need to copy the request body, mutate the copy, and then use `clone()` to copy the request and set the new body.
+
+Since requests are immutable, they cannot be modified directly. To mutate them, use `clone()`:
+
+```javascript
+intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+  // This is a duplicate. It is exactly the same as the original.
+  const dupReq = req.clone();
+
+  // Change the URL and replace 'http://' with 'https://'
+  const secureReq = req.clone({url: req.url.replace('http://', 'https://')});
+}
+```
+
+As you can see, the hash accepted by `clone()` allows you to mutate specific properties of the request while copying the others.
+
+#### Setting new headers
+
+A common use of interceptors is to set default headers on outgoing responses. For example, assuming you have an injectable `AuthService` which can provide an authentication token, here is how you would write an interceptor which adds it to all outgoing requests:
+
+```javascript
+import {Injectable} from '@angular/core';
+import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+  constructor(private auth: AuthService) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    // Get the auth header from the service.
+    const authHeader = this.auth.getAuthorizationHeader();
+    // Clone the request to add the new header.
+    const authReq = req.clone({headers: req.headers.set('Authorization', authHeader)});
+    // Pass on the cloned request instead of the original request.
+    return next.handle(authReq);
+  }
+}
+```
+
+The practice of cloning a request to set new headers is so common that there's actually a shortcut for it:
+
+```javascript
+const authReq = req.clone({setHeaders: {Authorization: authHeader}});
+```
+
+An interceptor that alters headers can be used for a number of different operations, including:
+
+* Authentication/authorization
+* Caching behavior; for example, If-Modified-Since
+* XSRF protection
+
+#### Logging
+
+Because interceptors can process the request and response _together_, they can do things like log or time requests. Consider this interceptor which uses `console.log` to show how long each request takes:
+
+```javascript
+import 'rxjs/add/operator/do';
+
+export class TimingInterceptor implements HttpInterceptor {
+  constructor(private auth: AuthService) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+  	const started = Date.now();
+    return next
+      .handle(req)
+      .do(event => {
+        if (event instanceof HttpResponse) {
+          const elapsed = Date.now() - started;
+          console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
+        }
+      });
+  }
+}
+```
+Notice the RxJS `do()` operator&mdash;it adds a side effect to an Observable without affecting the values on the stream. Here, it detects the `HttpResponse` event and logs the time the request took.
+
+#### Caching
+
+You can also use interceptors to implement caching. For this example, assume that you've written an HTTP cache with a simple interface:
+
+```javascript
+abstract class HttpCache {
+  /**
+   * Returns a cached response, if any, or null if not present.
+   */
+  abstract get(req: HttpRequest<any>): HttpResponse<any>|null;
+
+  /**
+   * Adds or updates the response in the cache.
+   */
+  abstract put(req: HttpRequest<any>, resp: HttpResponse<any>): void;
+}
+```
+
+An interceptor can apply this cache to outgoing requests.
+
+```javascript
+@Injectable()
+export class CachingInterceptor implements HttpInterceptor {
+  constructor(private cache: HttpCache) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+  	// Before doing anything, it's important to only cache GET requests.
+    // Skip this interceptor if the request method isn't GET.
+    if (req.method !== 'GET') {
+      return next.handle(req);
+    }
+
+    // First, check the cache to see if this request exists.
+    const cachedResponse = this.cache.get(req);
+    if (cachedResponse) {
+      // A cached response exists. Serve it instead of forwarding
+      // the request to the next handler.
+      return Observable.of(cachedResponse);
+    }
+
+    // No cached response exists. Go to the network, and cache
+    // the response when it arrives.
+    return next.handle(req).do(event => {
+      // Remember, there may be other events besides just the response.
+      if (event instanceof HttpResponse) {
+      	// Update the cache.
+      	this.cache.put(req, event);
+      }
+    });
+  }
+}
+```
+
+Obviously this example glosses over request matching, cache invalidation, etc., but it's easy to see that interceptors have a lot of power beyond just transforming requests. If desired, they can be used to completely take over the request flow.
+
+To really demonstrate their flexibility, you can change the above example to return _two_ response events if the request exists in cache&mdash;the cached response first, and an updated network response later.
+
+```javascript
+intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+  // Still skip non-GET requests.
+  if (req.method !== 'GET') {
+    return next.handle(req);
+  }
+
+  // This will be an Observable of the cached value if there is one,
+  // or an empty Observable otherwise. It starts out empty.
+  let maybeCachedResponse: Observable<HttpEvent<any>> = Observable.empty();
+
+  // Check the cache.
+  const cachedResponse = this.cache.get(req);
+  if (cachedResponse) {
+    maybeCachedResponse = Observable.of(cachedResponse);
+  }
+
+  // Create an Observable (but don't subscribe) that represents making
+  // the network request and caching the value.
+  const networkResponse = next.handle(req).do(event => {
+    // Just like before, check for the HttpResponse event and cache it.
+    if (event instanceof HttpResponse) {
+      this.cache.put(req, event);
+    }
+  });
+
+  // Now, combine the two and send the cached response first (if there is
+  // one), and the network response second.
+  return Observable.concat(maybeCachedResponse, networkResponse);
+}
+```
+
+Now anyone doing `http.get(url)` will receive _two_ responses if that URL has been cached before.
+
+### Listening to progress events
+
+Sometimes applications need to transfer large amounts of data, and those transfers can take time. It's a good user experience practice to provide feedback on the progress of such transfers; for example, uploading files&mdash;and `@angular/common/http` supports this.
+
+To make a request with progress events enabled, first create an instance of `HttpRequest` with the special `reportProgress` option set:
+
+```javascript
+const req = new HttpRequest('POST', '/upload/file', file, {
+  reportProgress: true,
+});
+```
+
+This option enables tracking of progress events. Remember, every progress event triggers
+change detection, so only turn them on if you intend to actually update the UI on each event.
+
+Next, make the request through the `request()` method of `HttpClient`. The result will be an Observable of events, just like with interceptors:
+
+```javascript
+http.request(req).subscribe(event => {
+  // Via this API, you get access to the raw event stream.
+  // Look for upload progress events.
+  if (event.type === HttpEventType.UploadProgress) {
+    // This is an upload progress event. Compute and show the % done:
+    const percentDone = Math.round(100 * event.loaded / event.total);
+    console.log(`File is ${percentDone}% uploaded.`);
+  } else if (event instanceof HttpResponse) {
+    console.log('File is completely uploaded!');
+  }
+});
+```
+
+## Security: XSRF Protection
+
+[Cross-Site Request Forgery (XSRF)](https://en.wikipedia.org/wiki/Cross-site_request_forgery) is an attack technique by which the attacker can trick an authenticated user into unknowingly executing actions on your website. `HttpClient` supports a [common mechanism](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Cookie-to-Header_Token) used to prevent XSRF attacks. When performing HTTP requests, an interceptor reads a token from a cookie, by default `XSRF-TOKEN`, and sets it as an HTTP header, `X-XSRF-TOKEN`. Since only code that runs on your domain could read the cookie, the backend can be certain that the HTTP request came from your client application and not an attacker.
+
+By default, an interceptor sends this cookie on all mutating requests (POST, etc.)
+to relative URLs but not on GET/HEAD requests or
+on requests with an absolute URL.
+
+To take advantage of this, your server needs to set a token in a JavaScript readable session cookie called `XSRF-TOKEN` on either the page load or the first GET request. On subsequent requests the server can verify that the cookie matches the `X-XSRF-TOKEN` HTTP header, and therefore be sure that only code running on your domain could have sent the request. The token must be unique for each user and must be verifiable by the server; this prevents the client from making up its own tokens. Set the token to a digest of your site's authentication
+cookie with a salt for added security.
+
+In order to prevent collisions in environments where multiple Angular apps share the same domain or subdomain, give each application a unique cookie name.
+
+<div class="alert is-important">
+*Note that `HttpClient`'s support is only the client half of the XSRF protection scheme.* Your backend service must be configured to set the cookie for your page, and to verify that the header is present on all eligible requests. If not, Angular's default protection will be ineffective.
+</div>
+
+### Configuring custom cookie/header names
+
+If your backend service uses different names for the XSRF token cookie or header, use `HttpClientXsrfModule.withConfig()` to override the defaults.
+
+```javascript
+imports: [
+  HttpClientModule,
+  HttpClientXsrfModule.withConfig({
+    cookieName: 'My-Xsrf-Cookie',
+    headerName: 'My-Xsrf-Header',
+  }),
+]
+```
+
+## Testing HTTP requests
+
+Like any external dependency, the HTTP backend needs to be mocked as part of good testing practice. `@angular/common/http` provides a testing library `@angular/common/http/testing` that makes setting up such mocking straightforward.
+
+### Mocking philosophy
+
+Angular's HTTP testing library is designed for a pattern of testing where the app executes code and makes requests first. After that, tests expect that certain requests have or have not been made, perform assertions against those requests, and finally provide responses by "flushing" each expected request, which may trigger more new requests, etc. At the end, tests can optionally verify that the app has made no unexpected requests.
+
+### Setup
+
+To begin testing requests made through `HttpClient`, import `HttpClientTestingModule` and add it to your `TestBed` setup, like so:
+
+```javascript
+
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+
+beforeEach(() => {
+  TestBed.configureTestingModule({
+    ...,
+    imports: [
+      HttpClientTestingModule,
+    ],
+  })
+});
+```
+
+That's it. Now requests made in the course of your tests will hit the testing backend instead of the normal backend.
+
+### Expecting and answering requests
+
+With the mock installed via the module, you can write a test that expects a GET Request to occur and provides a mock response. The following example does this by injecting both the `HttpClient` into the test and a class called `HttpTestingController`
+
+```javascript
+it('expects a GET request', inject([HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
+  // Make an HTTP GET request, and expect that it return an object
+  // of the form {name: 'Test Data'}.
+  http
+    .get('/data')
+    .subscribe(data => expect(data['name']).toEqual('Test Data'));
+
+  // At this point, the request is pending, and no response has been
+  // sent. The next step is to expect that the request happened.
+  const req = httpMock.expectOne('/data');
+
+  // If no request with that URL was made, or if multiple requests match,
+  // expectOne() would throw. However this test makes only one request to
+  // this URL, so it will match and return a mock request. The mock request
+  // can be used to deliver a response or make assertions against the
+  // request. In this case, the test asserts that the request is a GET.
+  expect(req.request.method).toEqual('GET');
+
+  // Next, fulfill the request by transmitting a response.
+  req.flush({name: 'Test Data'});
+
+  // Finally, assert that there are no outstanding requests.
+  httpMock.verify();
+}));
+```
+
+The last step, verifying that no requests remain outstanding, is common enough for you to move it into an `afterEach()` step:
+
+```javascript
+afterEach(inject([HttpTestingController], (httpMock: HttpTestingController) => {
+  httpMock.verify();
+}));
+```
+
+#### Custom request expectations
+
+If matching by URL isn't sufficient, it's possible to implement your own matching function. For example, you could look for an outgoing request that has an Authorization header:
+
+```javascript
+const req = httpMock.expectOne((req) => req.headers.has('Authorization'));
+```
+
+Just as with the `expectOne()` by URL in the test above, if 0 or 2+ requests match this expectation, it will throw.
+
+#### Handling more than one request
+
+If you need to respond to duplicate requests in your test, use the `match()` API instead of `expectOne()`, which takes the same arguments but returns an array of matching requests. Once returned, these requests are removed from future matching and are your responsibility to verify and flush.
+
+```javascript
+// Expect that 5 pings have been made and flush them.
+const reqs = httpMock.match('/ping');
+expect(reqs.length).toBe(5);
+reqs.forEach(req => req.flush());
+```
diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md
index a3158eb5b4..f76c761c31 100644
--- a/aio/content/guide/i18n.md
+++ b/aio/content/guide/i18n.md
@@ -1,134 +1,19 @@
-@title
-国际化 (i18n)
-
-@intro
-把应用的模板文本翻译成多种语言。
-
-@description
-
-
-{@a top}
+# Internationalization (i18n)
 
+# 国际化（i18n）
 
 Angular's _internationalization_ (_i18n_) tools help make your app available in multiple languages.
 
 Angular的*国际化*（*i18n*）工具可以帮助我们使用多个语言发布应用。
 
-# Contents
-
-# 目录
-
-  * [Angular and i18n template translation](guide/i18n#angular-i18n)
-
-    [Angular和i18n模板翻译](guide/i18n#angular-i18n)
-
-  * [Mark text with the _i18n_ attribute](guide/i18n#i18n-attribute)
-  
-    [把文本用_i18n_属性标记出来](guide/i18n#i18n-attribute)
-    
-    * [Help the translator with a description and intent](guide/i18n#help-translator)
-
-      [通过添加描述和意图来帮助翻译者](guide/i18n#help-translator)
-
-    * [Translate text without creating an element](guide/i18n#no-element)
-
-      [在不创建元素的情况下翻译文本](guide/i18n#no-element)
-
-  * [Add _i18n-..._ translation attributes](guide/i18n#translate-attributes)
-  
-      [添加 *i18n-...* 翻译属性](guide/i18n#translate-attributes)
-      
-  * [Handle singular and plural](guide/i18n#cardinality)
-  
-      [处理单数和复数](guide/i18n#cardinality)
-      
-  * [Select among alternative texts](guide/i18n#select)
-  
-      [在候选内容中做出选择](guide/i18n#select)
-      
-  * [Create a translation source file with the **_ng-xi18n_ extraction tool**](guide/i18n#ng-xi18n)
-
-    [使用_ng-xi18n_工具创建翻译源文件](guide/i18n#ng-xi18n)
-
-    * [Other translation formats](guide/i18n#other-formats)
-
-      [其它翻译格式](guide/i18n#other-formats)
-
-    * [Other options](guide/i18n#ng-xi18n-options)
-
-      [其它选项](guide/i18n#ng-xi18n-options)
-
-    * [Add an `npm` script for convenience](guide/i18n#npm-i18n-script)
-
-      [添加`npm`脚本来便捷使用](guide/i18n#npm-i18n-script)
-
-  * [Translate text messages](guide/i18n#translate)
-
-    [翻译文本信息](guide/i18n#translate)
-
-    * [Create a localization folder](guide/i18n#localization-folder)
-
-      [创建本地化文件夹](guide/i18n#localization-folder)
-
-    * [Translate text nodes](guide/i18n#translate-text-nodes)
-
-      [翻译文本节点](guide/i18n#translate-text-nodes)
-
-  * [Translate `plural` and `select`](guide/i18n#translate-plural-select)
-
-    [翻译复数形式`plural`及选择项`select`](guide/i18n#translate-plural-select)
-
-    * [Translate `plural`](guide/i18n#translate-plural)
-
-      [翻译复数形式`plural`](guide/i18n#translate-plural)
-
-    * [Translate `select`](guide/i18n#translate-select)
-
-      [翻译`select`](guide/i18n#translate-select)
-
-    * [The app before translation](guide/i18n#app-pre-translation)
-
-      [翻译之前的应用](guide/i18n#app-pre-translation)
-
-  * [Merge the completed translation file into the app](guide/i18n#merge)
-
-      [把翻译完成的文件合并到应用中](guide/i18n#merge)
-
-    * [Merge with the JIT compiler](guide/i18n#jit)
-
-      [合并到JIT编译器中](guide/i18n#jit)
-
-    * [SystemJS text plugin](guide/i18n#text-plugin)
-
-      [SystemJS的文本插件](guide/i18n#text-plugin)
-
-    * [Create translation providers](guide/i18n#create-translation-providers)
-
-      [创建翻译提供商](guide/i18n#create-translation-providers)
-
-    * [Bootstrap the app with translation providers](guide/i18n#bootstrap-the-app)
-
-      [通过翻译提供商引导应用](guide/i18n#bootstrap-the-app)
-
-    * [Internationalization with the AOT compiler](guide/i18n#aot)
-    
-        [AOT编译器的国际化](guide/i18n#aot)
-        
-  * [Translation file maintenance and _id_ changes](guide/i18n#maintenance)
-
-      [翻译文件的维护和 *id* 变更](guide/i18n#maintenance)
-
-
-Try this <live-example name="cb-i18n" title="i18n Example in Spanish">live example</live-example>
+Try this <live-example name="i18n" title="i18n Example in Spanish">live example</live-example>
 of a JIT-compiled app, translated into Spanish.
 
-**试试** 这个翻译为西班牙语版JiT编译应用的<live-example name="cb-i18n">在线例子</live-example>。
+**试试** 这个翻译为西班牙语版JiT编译应用的<live-example name="i18n">在线例子</live-example>。
 
 
 {@a angular-i18n}
 
-
-
 ## Angular and _i18n_ template translation
 
 ## Angular和_i18n_模板翻译
@@ -145,23 +30,15 @@ into multiple languages.
 
 本章描述了一些_i18n_工具，它们可以帮你把组件模板文本翻译成多种语言。
 
-
-
 <div class="l-sub-section">
 
-
-
 Practitioners of _internationalization_ refer to a translatable text as a "_message_".
-This page uses the words "_text_" and "_message_" interchangably and in the combination, "_text message_".
-
+This page uses the words "_text_" and "_message_" interchangeably and in the combination, "_text message_".
 **国际化**工作者通常将一个可翻译的文本叫作“信息”。
 本章使用了“文本”和“信息”，它们可以互换，也可以组合“文本信息”。
 
-
 </div>
 
-
-
 The _i18n_ template translation process has four phases:
 
 _i18n_模板翻译流程有四个阶段：  
@@ -189,11 +66,8 @@ You need to build and deploy a separate version of the application for each supp
 
 你可以为每种支持的语言构建和部署单独的应用程序版本。
 
-
 {@a i18n-attribute}
 
-
-
 ## Mark text with the _i18n_ attribute
 
 ## 使用_i18n_属性标记文本
@@ -207,8 +81,6 @@ Angular的`i18n`属性是可翻译内容的标记。
 
 <div class="alert is-helpful">
 
-
-
 `i18n` is not an Angular _directive_.
 It's a custom _attribute_, recognized by Angular tools and compilers.
 After translation, the compiler removes it.
@@ -217,38 +89,26 @@ After translation, the compiler removes it.
 它是一个自定义**属性**，Angular工具和编译器认识它。
 它将在完成翻译**之后**，被编译器移除。
 
-
 </div>
 
-
-
 In the accompanying sample, an `<h1>` tag displays a simple English language greeting
 that you translate into Spanish:
 
 在例子中，`<h1>`标签显示了一句简单的英文问候语，它将被翻译为西班牙语：
 
 
-<code-example path="cb-i18n/src/app/app.component.1.html" region="greeting" title="src/app/app.component.html" linenums="false">
-
+<code-example path="i18n/src/app/app.component.1.html" region="greeting" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-
-
 Add the `i18n` attribute to the tag to mark it for translation.
 
-添加`i18n`属性到该标签上，把它标记为需要翻译的文本。
-
-
-<code-example path="cb-i18n/src/app/app.component.1.html" region="i18n-attribute" title="src/app/app.component.html" linenums="false">
 
+添加`i18n`属性到该标签上，把它标记为需要翻译的文本。<code-example path="i18n/src/app/app.component.1.html" region="i18n-attribute" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-
-
 {@a help-translator}
 
-
-### Help the translator with a _description_ and _intent_
+### Help the translator with a _description_ and _meaning_
 
 ### 用描述和意图来帮助翻译人员
 
@@ -256,44 +116,99 @@ In order to translate it accurately, the translator may
 need a description of the message.
 Assign a description to the i18n attribute:
 
+
 翻译人员可能需要待翻译文本的描述才能翻译准确。
-为i18n属性添加描述：
-
-
-<code-example path="cb-i18n/src/app/app.component.1.html" region="i18n-attribute-desc" title="src/app/app.component.html" linenums="false">
-
+为i18n属性添加描述：<code-example path="i18n/src/app/app.component.1.html" region="i18n-attribute-desc" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-
-
 In order to deliver a correct translation, the translator may need to
-know your _intent_&mdash;the true _meaning_ of the text
-within _this particular_ application context.
-In front of the description, add some contextual meaning to the assigned string,
-separating it from the description with the `|` character (`<meaning>|<description>`):
+know the _meaning_ or _intent_ of the text within _this particular_ application context.
 
 为了给出正确的翻译，翻译者需要知道你这段文本在特定情境下的 *真实意图*。
 在描述的前面，为指定的字符串添加一些上下文含义，用`|`将其与描述文字隔开(`<意图>|<描述>`)。
 
+You add context by beginning the string with the _meaning_ and
+separating it from the _description_ with the `|` character (`<meaning>|<description>`):
 
-<code-example path="cb-i18n/src/app/app.component.html" region="i18n-attribute-meaning" title="src/app/app.component.html" linenums="false">
+// TODO: Translate
 
+<code-example path="i18n/src/app/app.component.1.html" region="i18n-attribute-meaning" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-
-
 While all appearances of a message with the _same_ meaning have the _same_ translation,
 a message with *a variety of possible meanings* could have different translations.
 The Angular extraction tool preserves both the _meaning_ and the _description_ in the translation source file
-to facilitiate contextually-specific translations.
+to facilitate contextually-specific translations.
 
 如果所有地方出现的文本具有**相同**含义时，它们应该有**相同**的翻译，
 但是如果在某些地方它具有**不同含义**，那么它应该有不同的翻译。
 Angular的提取工具在翻译源文件中保留**含义**和**描述**，以支持符合特定上下文的翻译。
 
 
-{@a no-element}
+{@a custom-id}
 
+### Set a custom _id_ to improve search and maintenance
+
+// TODO: Translate
+
+The angular _i18n_ extractor tool generates a file with a _translation unit_ entry for each `i18n` attribute in a template. By default, it assigns each translation unit a unique _id_ such as this one:
+
+<code-example path="i18n/src/locale/messages.es.xlf.html" region="generated-id" linenums="false">
+</code-example>
+
+This _id_ is obscure and difficult for humans to read or remember.
+
+Worse, when you change the translatable text, perhaps to fix a typo,
+the extractor tool generates a new _id_ for that translation.
+You will lose the translation unless you update it with the new _id_.
+That [complicates maintenance](#maintenance).
+
+Consider specifying your own, meaningful _id_ in the `i18n` attribute, **prefixed with `@@`**.
+
+<code-example path='i18n/src/app/app.component.1.html' region='i18n-attribute-solo-id' title='app/app.component.html' linenums="false">
+</code-example>
+
+Now the extractor tool and compiler will generate a translation unit with _your custom id_ and never change it.
+
+<code-example path="i18n/src/locale/messages.es.xlf.html" region="custom-id" linenums="false">
+</code-example>
+
+Here is the `i18n` attribute with a _definition_, followed by the custom `id`:
+
+<code-example path='i18n/src/app/app.component.1.html' region='i18n-attribute-id' title='app/app.component.html' linenums="false">
+</code-example>
+
+Here is a _meaning_ and a _description_ and the _id_ at the end:
+
+<code-example path='i18n/src/app/app.component.1.html' region='i18n-attribute-meaning-and-id' title='app/app.component.html' linenums="false">
+</code-example>
+
+<div class="l-sub-section">
+
+  Be sure to define _unique_ custom ids. If you use the same id for 2 _different_ blocks of text, only the first one will be extracted,
+  and its translation used in both blocks of text.
+
+  For example:
+
+  ```html
+    <p i18n="@@myId">Hello</p>
+    <p i18n="@@myId">Good bye</p>
+  ```
+
+  with the translation:
+
+  ```xml
+    <trans-unit id="myId" datatype="html">
+      <source>Hello</source>
+      <target state="new">Hola</target>
+    </trans-unit>
+  ```
+
+  Both `<p>` elements will contain the text `Hola`.
+
+</div>
+
+{@a no-element}
 
 ### Translate text without creating an element
 
@@ -303,58 +218,37 @@ you don't want to create a new DOM element merely to facilitate translation.
 
 Here are two techniques to try.
 
-(1) Wrap the text in an `<ng-container>` element. The `<ng-container>` is never renderered:
-
-
-<code-example path="cb-i18n/src/app/app.component.html" region="i18n-ng-container" title="src/app/app.component.html" linenums="false">
+(1) Wrap the text in an `<ng-container>` element. The `<ng-container>` is never rendered:
 
+<code-example path="i18n/src/app/app.component.html" region="i18n-ng-container" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-
-
 (2) Wrap the text in a pair of HTML comments:
 
-
-<code-example path="cb-i18n/src/app/app.component.html" region="i18n-with-comment" title="src/app/app.component.html" linenums="false">
-
+<code-example path="i18n/src/app/app.component.html" region="i18n-with-comment" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-
-
-
 {@a translate-attributes}
 
-
-## Add _i18n-..._ translation attributes
+## Add _i18n_ translation attributes
 You've added an image to your template. You care about accessibility too so you add a `title` attribute:
 
-
-<code-example path="cb-i18n/src/app/app.component.1.html" region="i18n-title" title="src/app/app.component.html" linenums="false">
-
+<code-example path="i18n/src/app/app.component.1.html" region="i18n-title" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-
-
 The `title` attribute needs to be translated.
 Angular i18n support has more translation attributes in the form,`i18n-x`, where `x` is the
 name of the attribute to translate.
 
 To translate the `title` on the `img` tag from the previous example, write:
 
-
-<code-example path="cb-i18n/src/app/app.component.html" region="i18n-title-translate" title="src/app/app.component.html" linenums="false">
-
+<code-example path="i18n/src/app/app.component.html" region="i18n-title-translate" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-
-
 You can also assign a meaning and a description with the `i18n-x="<meaning>|<description>"` syntax.
 
-
-
 {@a cardinality}
 
-
 ## Handle singular and plural
 
 Different languages have different pluralization rules.
@@ -365,13 +259,9 @@ Other languages might express the _cardinality_ differently.
 
 Here's how you could mark up the component template to display the phrase appropriate to the number of wolves:
 
-
-<code-example path="cb-i18n/src/app/app.component.html" region="i18n-plural" title="src/app/app.component.html" linenums="false">
-
+<code-example path="i18n/src/app/app.component.html" region="i18n-plural" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-
-
 * The first parameter is the key. It is bound to the component property (`wolves`)
 that determines the number of wolves.
 * The second parameter identifies this as a `plural` translation type.
@@ -380,66 +270,65 @@ categories and their matching values.
 
 Pluralization categories include:
 
-* =0
-* =1
-* =5
+* =0 (or any other number)
+* zero
+* one
+* two
 * few
+* many
 * other
 
 Put the default _English_ translation in braces (`{}`) next to the pluralization category.
+
 * When you're talking about one wolf, you could write `=1 {one wolf}`.
 
 * For zero wolves, you could write `=0 {no wolves}`.
+
 * For two wolves, you could write `=2 {two wolves}`.
 
 You could keep this up for three, four, and every other number of wolves.
 Or you could specify the **`other`** category as a catch-all for any unmatched cardinality
 and write something like: `other {a wolf pack}`.
 
-
 <div class="l-sub-section">
 
-
-
 This syntax conforms to the
-<a href="http://userguide.icu-project.org/formatparse/messages" target="_blank" title="ICU Message Format">ICU Message Format</a>
+<a href="http://userguide.icu-project.org/formatparse/messages" title="ICU Message Format">ICU Message Format</a>
 that derives from the
-<a href="http://cldr.unicode.org/" target="_blank" title="CLDR">Common Locale Data Repository (CLDR)</a>,
+<a href="http://cldr.unicode.org/" title="CLDR">Common Locale Data Repository (CLDR)</a>,
 which specifies the
-<a href="http://unicode.org/reports/tr35/tr35-numbers.html#Language_Plural_Rules" target="_blank" title="Pluralization Rules">pluralization rules</a>.
-
+<a href="http://cldr.unicode.org/index/cldr-spec/plural-rules" title="Pluralization Rules">pluralization rules</a>.
 
 </div>
 
-
-
 {@a select}
 
-
 ## Select among alternative texts
+
 The application displays different text depending upon whether the hero is male or female.
 These text alternatives require translation too.
 
 You can handle this with a `select` translation.
 A `select` also follows the
-<a href="http://userguide.icu-project.org/formatparse/messages" target="_blank" title="ICU Message Format">ICU message syntax</a>.
+<a href="http://userguide.icu-project.org/formatparse/messages" title="ICU Message Format">ICU message syntax</a>.
 You choose among alternative translation based on a string value instead of a number.
 
 The following format message in the component template binds to the component's `gender`
 property, which outputs either an "m" or an "f".
 The message maps those values to the appropriate translation:
 
-
-<code-example path="cb-i18n/src/app/app.component.html" region="i18n-select" title="src/app/app.component.html" linenums="false">
-
+<code-example path="i18n/src/app/app.component.html" region="i18n-select" title="src/app/app.component.html" linenums="false">
 </code-example>
 
+## Nesting pluralization and selection expressions
 
+You can also nest different ICU expressions together. For example:
+
+<code-example path="i18n/src/app/app.component.html" region="i18n-nested" title="src/app/app.component.html">
+</code-example>
 
 {@a ng-xi18n}
 
-
-
 ## Create a translation source file with the _ng-xi18n_ tool
 
 ## 使用_ng-xi18n_工具创建翻译源文件
@@ -455,14 +344,10 @@ If you haven't already installed the CLI and its `platform-server` peer dependen
 它是在`@angular/compiler-cli` npm包中的一个Angular CLI工具。
 如果你还没有安装这个CLI和它的 `platform-server`，安装它们：
 
-
 <code-example language="sh" class="code-shell">
   npm install @angular/compiler-cli @angular/platform-server --save
-
 </code-example>
 
-
-
 Open a terminal window at the root of the application project and enter the `ng-xi18n` command:
 
 在应用的项目根目录打开一个终端窗口，并输入`ng-xi18n`命令：
@@ -470,52 +355,39 @@ Open a terminal window at the root of the application project and enter the `ng-
 
 <code-example language="sh" class="code-shell">
   ./node_modules/.bin/ng-xi18n
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 Windows users may have to quote the command like this: `"./node_modules/.bin/ng-xi18n"`
 
-
 </div>
 
-
-
 By default, the tool generates a translation file named **`messages.xlf`** in the
-<a href="https://en.wikipedia.org/wiki/XLIFF" target="_blank">XML Localisation Interchange File Format (XLIFF, version 1.2)</a>.
-
+<a href="https://en.wikipedia.org/wiki/XLIFF" >XML Localization Interchange File Format (XLIFF, version 1.2)</a>.
 工具默认生成一个名为**`messages.xlf`**的翻译文件，格式为<a href="https://en.wikipedia.org/wiki/XLIFF" target="_blank">XML本土化互换文件格式(XLIFF, version 1.2)</a>。
 
-
 {@a other-formats}
 
-
 ### Other translation formats
 
-You can generate a file named **`messages.xmb`** in the
-<a href="http://cldr.unicode.org/development/development-process/design-proposals/xmb"  target="_blank">XML Message Bundle (XMB)</a> format
-by adding the `--i18nFormat=xmb` flag.
+Angular i18n tooling supports XLIFF 1.2 and XLIFF 2 as well as the
+<a href="http://cldr.unicode.org/development/development-process/design-proposals/xmb" >XML Message Bundle (XMB)</a>.
 
+You can specify your choice of format _explicitly_ with the `--i18nFormat` flag as illustrated in these example commands
 
 <code-example language="sh" class="code-shell">
-  ./node_modules/.bin/ng-xi18n  --i18nFormat=xmb
-
+./node_modules/.bin/ng-xi18n  --i18nFormat=xlf  --outFile=messages.xlf
+./node_modules/.bin/ng-xi18n  --i18nFormat=xlf2 --outFile=messages.xliff2.xlf
+./node_modules/.bin/ng-xi18n  --i18nFormat=xmb  --outFile=messages.xmb
 </code-example>
 
-
-
-This sample sticks with the _XLIFF_ format.
-
+The sample in _this_ guide sticks with the default _XLIFF 1.2_ format.
 
 {@a ng-xi18n-options}
 
-
 ### Other options
+
 You may have to specify additional options.
 For example, if the `tsconfig.json` TypeScript configuration
 file is located somewhere other than in the root folder,
@@ -524,15 +396,10 @@ you must identify the path to it with the `-p` option:
 <code-example language="sh" class="code-shell">
   ./node_modules/.bin/ng-xi18n -p path/to/tsconfig.json
   ./node_modules/.bin/ng-xi18n  --i18nFormat=xmb -p path/to/tsconfig.json
-
-
 </code-example>
 
-
-
 {@a npm-i18n-script}
 
-
 ### Add an _npm_ script for convenience
 
 Consider adding a convenience shortcut to the `scripts` section of the `package.json`
@@ -545,8 +412,6 @@ to make the command easier to remember and run:
   }
 </code-example>
 
-
-
 Now you can issue command variations such as these:
 
 <code-example language="sh" class="code-shell">
@@ -555,16 +420,11 @@ Now you can issue command variations such as these:
   npm run i18n -- --i18nFormat=xmb -p path/to/tsconfig.json
 </code-example>
 
-
-
 Note the `--` flag before the options.
 It tells _npm_ to pass every flag thereafter to `ng-xi18n`.
 
-
 {@a translate}
 
-
-
 ## Translate text messages
 
 ## 翻译文本信息
@@ -573,16 +433,13 @@ The `ng-xi18n` command generates a translation source file
 in the project root folder named `messages.xlf`.
 The next step is to translate the English language template
 text into the specific language translation
-files. The cookbook sample creates a Spanish translation file.
-
+files. The guide sample creates a Spanish translation file.
 `ng-xi18n`命令在项目根目录生成一个名为`messages.xlf`的翻译源文件。
 下一步是将英文模板文本翻译到目标语言的翻译文件。
 本烹饪书创建了一个西班牙语翻译文件。
 
-
 {@a localization-folder}
 
-
 ### Create a localization folder
 
 ### 新建一个本土化目录
@@ -600,20 +457,16 @@ such as internationalization files, there.
 
 <div class="l-sub-section">
 
-
-
 Localization and internationalization are
-<a href="https://en.wikipedia.org/wiki/Internationalization_and_localization" target="_blank">different but closely related terms</a>.
+<a href="https://en.wikipedia.org/wiki/Internationalization_and_localization">different but closely related terms</a>.
 
 本土化和国际化是<a href="https://en.wikipedia.org/wiki/Internationalization_and_localization" target="_blank">不同但是很相近的概念</a>。
 
 </div>
 
-
-
-This cookbook follows that suggestion. It has a `locale` folder under the `src/`.
+This guide follows that suggestion. It has a `locale` folder under `src/`.
 Assets within the folder carry a filename extension that matches a language-culture code from a
-<a href="https://msdn.microsoft.com/en-us/library/ee825488(v=cs.20).aspx" target="_blank">well-known codeset</a>.
+<a href="https://msdn.microsoft.com/en-us/library/ee825488(v=cs.20).aspx">well-known codeset</a>.
 
 Make a copy of the `messages.xlf` file, put it in the `locale` folder and
 rename it `messages.es.xlf`for the Spanish language translation.
@@ -621,74 +474,63 @@ Do the same for each target language.
 
 {@a translate-text-nodes}
 
-
 ### Translate text nodes
 In the real world, you send the `messages.es.xlf` file to a Spanish translator who fills in the translations
 using one of the
-<a href="https://en.wikipedia.org/wiki/XLIFF#Editors" target="_blank">many XLIFF file editors</a>.
+<a href="https://en.wikipedia.org/wiki/XLIFF#Editors">many XLIFF file editors</a>.
 
 在现实世界中，`messages.es.xlf`文件会被发给西班牙语翻译，他们使用<a href="https://en.wikipedia.org/wiki/XLIFF#Editors" target="_blank">这些XLIFF文件编辑器</a>中的一种来翻译它。
 
 This sample file is easy to translate without a special editor or knowledge of Spanish.
 Open `messages.es.xlf` and find the first `<trans-unit>` section:
 
+
 我们不需要任何编辑器或者西班牙语知识就可以轻易的翻译本例子文件。
-打开`messages.es.xlf`并找到`<trans-unit>`节点：
-
-
-<code-example path="cb-i18n/src/locale/messages.es.xlf.html" region="translated-hello" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
-
+打开`messages.es.xlf`并找到`<trans-unit>`节点：<code-example path="i18n/src/locale/messages.es.xlf.html" region="translated-hello" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
 </code-example>
 
-
-
 This XML element represents the translation of the `<h1>` greeting tag you marked with the `i18n` attribute. 
 
 这个XML元素代表了你使用`i18n`属性标记的`<h1>`问候语标签的翻译。
 
+<div class="l-sub-section">
+// TODO: Translate
+Note that the translation unit `id=introductionHeader` is derived from the  _custom_ `id`](#custom-id "Set a custom id") that you set earlier, but **without the `@@` prefix** required in the source HTML.
+
+</div>
+
 Using the _source_, _description_, and _meaning_ elements to guide your translation,
 replace the `<target/>` tag with the Spanish greeting:
 
 翻译中利用_source_、_description_和_meaning_元素的信息，替换`<target/>`标签为西班牙语问候语：
 
 
-<code-example path="cb-i18n/src/locale/messages.es.xlf.html" region="translated-hello" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;, after translation)" linenums="false">
-
+<code-example path="i18n/src/locale/messages.es.xlf.html" region="translated-hello" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;, after translation)" linenums="false">
 </code-example>
 
+Translate the other text nodes the same way:
 
+<code-example path="i18n/src/locale/messages.es.xlf.html" region="translated-other-nodes" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
 
 <div class="alert is-important">
 
-
-
-Note that the tool generates the `id`. **Don't touch it.**
-Its value depends on the content of the message and its assigned meaning.
+**The tool generated the `id`s for _these_ translation units. Don't touch them.**
+Each `id` depends upon the content of the message and its assigned meaning.
 Change either factor and the `id` changes as well.
 
 注意`id`是工具生成的。不要修改它。
 它的值取决于两个因素：信息的内容和其指定的含义。
 改变任何一个因素，`id`就会改变。
 
-See the **[translation file maintenance discussion](guide/i18n#maintenance)**.
+See the **[translation file maintenance discussion](#maintenance)**.
 
+This is why you should **[specify custom ids](#custom-id "Set a custom id")** and avoid tool generated ids.
 
 </div>
 
-
-
-Translate the other text nodes the same way:
-
-
-<code-example path="cb-i18n/src/locale/messages.es.xlf.html" region="translated-other-nodes" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
-
-</code-example>
-
-
-
 {@a translate-plural-select}
 
-
 ## Translate _plural_ and _select_
 Translating _plural_ and _select_ messages is a little tricky.
 
@@ -700,79 +542,66 @@ However, the `XMB` format does support the ICU rules.
 You'll just have to look for them in relation to other translation units that you recognize from elsewhere in the source template.
 In this example, you know the translation unit for the `select` must be just below the translation unit for the logo.
 
-
 {@a translate-plural}
 
-
 ### Translate _plural_
 To translate a `plural`, translate its ICU format match values:
 
-
-<code-example path="cb-i18n/src/locale/messages.es.xlf.html" region="translated-plural" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
-
+<code-example path="i18n/src/locale/messages.es.xlf.html" region="translated-plural" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
 </code-example>
 
-
-
 {@a translate-select}
 
-
 ### Translate _select_
 The `select` behaves a little differently. Here again is the ICU format message in the component template:
 
-
-<code-example path="cb-i18n/src/app/app.component.html" region="i18n-select" title="src/app/app.component.html" linenums="false">
-
+<code-example path="i18n/src/app/app.component.html" region="i18n-select" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-
-
 The extraction tool broke that into _two_ translation units.
 
 The first unit contains the text that was _outside_ the `select`.
 In place of the `select` is a placeholder, `<x id="ICU">`, that represents the `select` message.
 Translate the text and leave the placeholder where it is.
 
-
-<code-example path="cb-i18n/src/locale/messages.es.xlf.html" region="translate-select-1" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
-
+<code-example path="i18n/src/locale/messages.es.xlf.html" region="translate-select-1" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
 </code-example>
 
-
-
 The second translation unit, immediately below the first one, contains the `select` message. Translate that.
 
-
-<code-example path="cb-i18n/src/locale/messages.es.xlf.html" region="translate-select-2" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
-
+<code-example path="i18n/src/locale/messages.es.xlf.html" region="translate-select-2" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
 </code-example>
 
-
-
 Here they are together, after translation:
 
-
-<code-example path="cb-i18n/src/locale/messages.es.xlf.html" region="translated-select" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
-
+<code-example path="i18n/src/locale/messages.es.xlf.html" region="translated-select" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
 </code-example>
 
+### Translate a nested expression
 
+A nested expression is not different from the previous ones. As in the previous example, we have _two_ translation units.
 
-<div class='l-main-content'>
+The first one contains the text outside the nested expression:
 
-</div>
+<code-example path="i18n/src/locale/messages.es.xlf.html" region="translate-nested-1" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
+
+The second unit contains the complete nested expression:
+
+<code-example path="i18n/src/locale/messages.es.xlf.html" region="translate-nested-2" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
+
+And both together:
+
+<code-example path="i18n/src/locale/messages.es.xlf.html" region="translate-nested" title="src/locale/messages.es.xlf (&lt;trans-unit&gt;)" linenums="false">
+</code-example>
 
 
 
 The entire template translation is complete. It's
 time to incorporate that translation into the application.
 
-
-<div id='app-pre-translation'>
-
-</div>
-
-
+<a id='app-pre-translation'></a>
 
 ### The app before translation
 
@@ -784,35 +613,20 @@ When the previous steps finish, the sample app _and_ its translation file are as
 
 
 <code-tabs>
-
-  <code-pane title="src/app/app.component.html" path="cb-i18n/src/app/app.component.html">
-
+  <code-pane title="src/app/app.component.html" path="i18n/src/app/app.component.html">
   </code-pane>
-
-  <code-pane title="src/app/app.component.ts" path="cb-i18n/src/app/app.component.ts">
-
+  <code-pane title="src/app/app.component.ts" path="i18n/src/app/app.component.ts">
   </code-pane>
-
-  <code-pane title="src/app/app.module.ts" path="cb-i18n/src/app/app.module.ts">
-
+  <code-pane title="src/app/app.module.ts" path="i18n/src/app/app.module.ts">
   </code-pane>
-
-  <code-pane title="src/main.ts" path="cb-i18n/src/main.1.ts">
-
+  <code-pane title="src/main.ts" path="i18n/src/main.1.ts">
   </code-pane>
-
-  <code-pane title="src/locale/messages.es.xlf" path="cb-i18n/src/locale/messages.es.xlf.html">
-
+  <code-pane title="src/locale/messages.es.xlf" path="i18n/src/locale/messages.es.xlf.html">
   </code-pane>
-
 </code-tabs>
 
-
-
 {@a merge}
 
-
-
 ## Merge the completed translation file into the app
 
 ## 合并已经翻译的文件
@@ -820,7 +634,7 @@ When the previous steps finish, the sample app _and_ its translation file are as
 To merge the translated text into component templates,
 compile the application with the completed translation file.
 The process is the same whether the file is in `.xlf` format or 
-in another format  that Angular understands, such as `.xlif` or `.xtb`.
+in another format  that Angular understands, such as `.xtb`.
 
 要合并已经翻译的文件到组件模板，使用翻译过的文件编译应用。
 不管文件是`.xlf`格式还是其他Angular接受的格式（`.xlif`和`.xtb`），流程是一样的。
@@ -837,7 +651,7 @@ You provide the Angular compiler with three new pieces of information:
   
     翻译文件的格式
     
-  * The   <a href="https://en.wikipedia.org/wiki/XLIFF" target="_blank">_Locale ID_</a>
+  * The   <a href="https://en.wikipedia.org/wiki/XLIFF">_Locale ID_</a>
   (`es` or `en-US` for instance).
   
     目标<a href="https://en.wikipedia.org/wiki/XLIFF" target="_blank">_语言环境ID_</a>
@@ -859,8 +673,6 @@ the JIT (_Just-in-Time_) compiler or the AOT (_Ahead-of-Time_) compiler.
 
 {@a jit}
 
-
-
 ### Merge with the JIT compiler
 
 ### 用JiT编译器合并
@@ -892,13 +704,10 @@ Open `index.html` and revise the launch script as follows:
 打开`index.html`并这样修改加载脚本：
 
 
-<code-example path="cb-i18n/src/index.html" region="i18n" title="index.html (launch script)" linenums="false">
-
+<code-example path="i18n/src/index.html" region="i18n" title="index.html (launch script)" linenums="false">
 </code-example>
 
-
-
-In this sample, the user's language is hardcoded as a global `document.locale` variable
+In this sample, the user's language is hard-coded as a global `document.locale` variable
 in the `index.html`.
 
 在本例中，用户的语言在`index.html`中被硬编码到一个全局的`document.locale`变量中。
@@ -906,11 +715,17 @@ in the `index.html`.
 
 {@a text-plugin}
 
-
 ### SystemJS text plugin
 
 ### SystemJS文本插件
 
+<div class="alert is-important">
+// TODO: Translate
+  This plugin only applies to an application using SystemJS. If you are using the Angular CLI, please refer to their
+  [docs](https://github.com/angular/angular-cli/wiki/xi18n).
+
+</div>
+
 Notice the SystemJS mapping of `text` to a `systemjs-text-plugin.js`.
 With the help of a text plugin, SystemJS can read any file as raw text and
 return the contents as a string.
@@ -927,15 +742,11 @@ SystemJS没有自带原始文本插件，但是我们很容易添加它。
 在`src/`目录新建下面的`systemjs-text-plugin.js`文件：
 
 
-<code-example path="cb-i18n/src/systemjs-text-plugin.js" title="src/systemjs-text-plugin.js" linenums="false">
-
+<code-example path="i18n/src/systemjs-text-plugin.js" title="src/systemjs-text-plugin.js" linenums="false">
 </code-example>
 
-
-
 {@a create-translation-providers}
 
-
 ### Create translation providers
 
 ### 新建翻译提供商
@@ -949,7 +760,7 @@ while compiling the application:
 
     `TRANSLATIONS`是含有翻译文件内容的字符串。
 
-* `TRANSLATIONS_FORMAT` is the format of the file: `xlf`, `xlif`, or `xtb`.
+* `TRANSLATIONS_FORMAT` is the format of the file: `xlf`, `xlf2`, or `xtb`.
 
     `TRANSLATIONS_FORMAT`是文件的格式: `xlf`、`xlif`或`xtb`。
     
@@ -964,12 +775,9 @@ and the corresponding translation file:
 在下面的`src/app/i18n-providers.ts`文件的`getTranslationProviders()`函数中，根据用户的**语言环境**和对应的翻译文件构建这些提供商：
 
 
-<code-example path="cb-i18n/src/app/i18n-providers.ts" title="src/app/i18n-providers.ts">
-
+<code-example path="i18n/src/app/i18n-providers.ts" region="without-missing-translation" title="src/app/i18n-providers.ts">
 </code-example>
 
-
-
 1. It gets the locale from the global `document.locale` variable that was set in `index.html`.
 
     它从在`index.html`中设置的全局`document.locale`变量中获取语言环境。
@@ -1000,10 +808,15 @@ Notice that it appends `!text` to the filename, telling SystemJS to use the [tex
   最后，`getTranslationProviders()`返回以承诺的形式返回全部流程的结果。
 
 
+<div class="alert is-important">
+// TDOO: Translate
+  The `LOCALE_ID` has to be a valid locale id as explained in [here](http://userguide.icu-project.org/locale).
+
+</div>
+
 {@a bootstrap-the-app}
 
-
-### Bootstrap the app with translation providers
+### Bootstrap with translation providers
 
 ### 使用翻译提供商引导应用
 
@@ -1020,12 +833,9 @@ Open the `src/main.ts` and modify the bootstrap code as follows:
 打开`src/main.ts`并这样修改引导代码：
 
 
-<code-example path="cb-i18n/src/main.ts" title="src/main.ts" linenums="false">
-
+<code-example path="i18n/src/main.ts" title="src/main.ts" linenums="false">
 </code-example>
 
-
-
 Notice that it waits for the `getTranslationProviders()` promise to resolve before
 bootstrapping the app.
 
@@ -1039,8 +849,6 @@ more languages.
 
 {@a aot}
 
-
-
 ### _Internationalization_ with the AOT compiler
 
 ### 使用AoT编译器时的国际化
@@ -1063,7 +871,7 @@ and serve the appropriate application package.
 AoT（预先）编译器是一种构建流程，出产尺寸小、速度快和可执行的应用程序包。
 在使用Aot编译器的环境中国际化，你为每种语言预先构建一个单独的应用程序包。然后，在宿主网络页面（`index.html`）中，你再决定用户需要哪种语言，并选择合适的应用程序包。
 
-This cookbook doesn't cover how to build multiple application packages and
+This guide doesn't cover how to build multiple application packages and
 serve them according to the user's language preference.
 It does explain the few steps necessary to tell the AOT compiler to apply a translations file.
 
@@ -1074,7 +882,7 @@ Internationalization with the AOT compiler requires
 some setup specifically for AOT compilation.
 Start with the application project as shown
 [just before merging the translation file](guide/i18n#app-pre-translation)
-and refer to the [AOT cookbook](guide/aot-compiler) to make it _AOT-ready_.
+and refer to the [AOT guide](guide/aot-compiler) to make it _AOT-ready_.
 
 使用AoT编译器时的国际化，需要一些针对AoT的设置。
 以[合并翻译文件之前](guide/i18n#app-pre-translation)的应用项目开始，并参见[AoT烹饪书](guide/aot-compiler)，把它变成与AoT兼容的项目。
@@ -1108,47 +916,67 @@ For this sample, the Spanish language command would be:
 
 <code-example language="sh" class="code-shell">
   ./node_modules/.bin/ngc --i18nFile=./locale/messages.es.xlf --locale=es --i18nFormat=xlf
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 Windows users may have to quote the command:
 
 Windows用户可能需要双引号这个命令：
 
 <code-example language="sh" class="code-shell">
   "./node_modules/.bin/ngc" --i18nFile=./locale/messages.es.xlf --locale=es --i18nFormat=xlf
-
 </code-example>
 
-
-
 </div>
 
+### Report missing translations
 
+If you forgot to provide a translation, the build will succeed with a warning that you might easily overlook.
+You can configure the Angular compiler for different "missing translation" behaviors:
+
+* Error
+* Warning (default)
+* Ignore
+
+To change the behavior in JIT, you can use the following configuration:
+
+<code-example language="typescript">
+  { provide: CompilerConfig, useValue: new CompilerConfig({ missingTranslation: MissingTranslationStrategy.Error }) }
+</code-example>
+
+A good place to use it is the translation providers:
+
+<code-example path="i18n/src/app/i18n-providers.ts" region="missing-translation" title="src/app/i18n-providers.ts"></code-example>
+
+To change the behavior in AOT, add the `--missingTranslation` flag to the compilation command:
+
+<code-example language="sh" class="code-shell">
+  ./node_modules/.bin/ngc --i18nFile=./locale/messages.es.xlf --locale=es --i18nFormat=xlf --missingTranslation=error
+</code-example>
 
 {@a maintenance}
 
-
-## Translation file maintenance and _id_ changes
+## File maintenance and _id_ changes
 
 As the application evolves, you will change the _i18n_ markup
 and re-run the `ng-xi18n` extraction tool many times.
-The _new_ markup that you add is not a problem;
-but _most_ changes to existing markup trigger
-generation of new `id`s for the affected translation units.
+The _new_ markup that you add is not a problem.
+But the `id` _can be a serious problem!_
+
+If the `id` is generated by the tool, _most_ changes to _existing_ markup
+cause the tool to generate a _new_ `id` for the affected translation unit.
 
 After an `id` changes, the translation files are no longer in sync.
-**All translated versions of the application will fail** during re-compilation.
-The error messages identify the old `id`s that are no longer valid but
-they don't tell you what the new `id`s should be.
+Because of that, you get some warning messages during re-compilation.
+The warning messages identify that some translations are missing, but they don't tell you which
+old `ids` are no longer valid.
 
-**Commit all translation message files to source control**,
+If you use a [custom id](#custom-id "Set a custom id"),
+the tooling preserves the custom `id` as you make changes to the corresponding translation unit. **Use custom _ids_ unless you have a very good reason to do otherwise.**
+
+Whether you use generated or custom `ids`, **always commit all translation message files to source control**,
 especially the English source `messages.xlf`.
 The difference between the old and the new `messages.xlf` file
- help you find and update `id` changes across your translation files.
\ No newline at end of file
+will help you find and update `ids` and other changes across your translation files.
+
diff --git a/aio/content/guide/index.md b/aio/content/guide/index.md
deleted file mode 100644
index 5c2b252985..0000000000
--- a/aio/content/guide/index.md
+++ /dev/null
@@ -1,266 +0,0 @@
-@title
-文档概览
-
-@intro
-如何阅读本文档
-
-@description
-
-
-
-This page describes the Angular documentation at a high level.
-If you're new to Angular, you may want to visit "[Learning Angular](guide/learning-angular)" first.
-
-本页是 Angular 文档的概述。
-如果你刚接触 Angular，请先访问“[学习 Angular](guide/learning-angular)”。
-
-## Themes
-
-## 主题
-
-The documentation is divided into major thematic sections, each
-a collection of pages devoted to that theme.
-
-本文档分成几大主题区，每个区包含一组围绕自己主题的页面。
-
-
-
-<table width="100%">
-
-  <col width="15%">
-
-  </col>
-
-  <col>
-
-  </col>
-
-  <tr style=top>
-
-    <td>
-
-      <p>
-        <b><a href="../quickstart.html">QuickStart</a></b>
-      </p>
-
-      <p>
-        <b><a href="../quickstart.html">快速起步</a></b>
-      </p>
-
-    </td>
-
-    <td>
-
-
-      A first taste of Angular<span if-docs="ts"> with zero installation.
-      Run "Hello World" in an online code editor and start playing with live code</span>.
-
-      零配置第一次尝试 Angular 在在线代码编辑器中运行 “Hello World”，并利用在线代码开始体验。
-
-    </td>
-
-  </tr>
-
-  <tr style=top>
-
-    <td>
-
-      <p>
-        <b><a href="./">Guide</a></b>
-      </p>
-
-      <p>
-        <b><a href="./">指南</a></b>
-      </p>
-
-    </td>
-
-    <td>
-
-
-      Learn the Angular basics (you're already here!) like the setup for local development,
-      displaying data and accepting user input, injecting application services into components,
-      and building simple forms.
-
-      学习 Angular 基础知识（你已经在这儿了！），比如搭建本地开发环境、
-      显示数据和接受用户输入、注入应用程序服务到组件中，
-      以及构建简单表单。
-    </td>
-
-  </tr>
-
-  <tr style=top>
-
-    <td>
-
-      <p>
-        <b><a href="../api/">API Reference</a></b>
-      </p>
-
-      <p>
-        <b><a href="../api/">API参考手册</a></b>
-      </p>
-
-    </td>
-
-    <td>
-
-
-      Authoritative details about each of the Angular libraries.
-
-      关于 Angular 库中每一个成员的详尽、权威的资料。
-    </td>
-
-  </tr>
-
-  <tr style=top>
-
-    <td>
-
-      <p>
-        <b><a href="../tutorial/">Tutorial</a></b>
-      </p>
-
-      <p>
-        <b><a href="../tutorial/">教程</a></b>
-      </p>
-
-    </td>
-
-    <td>
-
-
-      A step-by-step, immersive approach to learning Angular that
-      introduces the major features of Angular in an application context.
-
-      按部就班、沉浸式的 Angular 学习之旅，在应用场景中介绍了 Angular 的各个主要特性。
-
-    </td>
-
-  </tr>
-
-  <tr style=top>
-
-    <td>
-
-      <p>
-        <b><a href="        ">Advanced</a></b>
-      </p>
-
-      <p>
-        <b><a href="        ">高级</a></b>
-      </p>
-
-    </td>
-
-    <td>
-
-
-      In-depth analysis of Angular features and development practices.
-
-      深入分析 Angular 的特性和开发实践。
-
-    </td>
-
-  </tr>
-
-  <tr style=top if-docs="ts">
-
-    <td>
-
-      <p>
-        <b><a href="../cookbook/">Cookbook</a></b>
-      </p>
-
-      <p>
-        <b><a href="../cookbook/">烹饪宝典</a></b>
-      </p>
-
-    </td>
-
-    <td>
-
-
-      Recipes for specific application challenges, mostly code snippets with a minimum of exposition.
-
-      一组解决实际应用中某些特定挑战的“菜谱”，大部分是代码片段随带少量的详细阐述。
-
-    </td>
-
-  </tr>
-
-</table>
-
-
-
-A few early pages are written as tutorials and are clearly marked as such.
-The rest of the pages highlight key points in code rather than explain each step necessary to build the sample.
-You can always get the full source through the #{_liveLink}s.
-
-少量早期页面是作为教程来写的，并被清晰的标注出来。
-其它页面的目的是展示代码中的关键点，而不是解释构建这个范例所需的每一个步骤。
-可以通过在线例子的链接找到完整的源代码。
-
-## Code samples
-
-## 代码例子
-
-Each page includes code snippets from a sample application that accompanies the page.
-You can reuse these snippets in your applications.
-
-每章都包含了该章附带例子应用的代码片段。可以在你的应用中重用这些代码片段。
-
-Look for a link to a running version of that sample, often near the top of the page,
-such as this <live-example nodownload name="architecture"></live-example> from the [Architecture](guide/architecture) page.
-<span if-docs="ts">
-The link launches a browser-based, code editor where you can inspect, modify, save, and download the code.
-</span>
-
-查找这些例子在线版本的链接，通常在页面的开头部分附近。
-例如[架构](guide/architecture)章的<live-example name="architecture"></live-example>。
-<span if-docs="ts">
-该链接启动浏览器代码编辑器，你可以查看、修改、保存和下载代码。
-</span>
-
-Alternatively, you can run the example locally, next to those `live-example` links you have a <a href="/resources/zips/architecture/architecture.zip">download link</a>.
-Just download, unzip, run `npm install` to install the dependencies and run it with `npm start`.
-
-不过，你也可以在本地运行这个例子，你可以点击<a href="/resources/zips/architecture/architecture.zip">下载链接</a>来下载。
-只要下载、unzip、运行`npm install`安装依赖，然后运行`npm start`就可以了。
-
-## Reference pages
-
-## 参考资料
-
-* The [Cheat Sheet](guide/cheatsheet) lists Angular syntax for common scenarios.
-
-  [速查表](guide/cheatsheet)列出了 Angular 在常见场景下的语法。
-
-* The [Glossary](guide/glossary) defines terms that Angular developers should know.
-
-  [词汇表](guide/glossary)定义了 Angular 开发人员需要知道的术语。
-
-* The [Change Log](guide/change-log) announces what's new and changed in the documentation.
-
-  [变更日志](guide/change-log)包含了文档新增与更新内容。
-
-* The [API Reference](api/) is the authority on every public-facing member of the Angular libraries.
-
-  [API 参考手册](api/)是关于 Angular 库中每一个公共成员的权威参考资料。
-
-## Feedback
-
-## 反馈
-
-We welcome feedback!
-
-我们期待您的反馈！
-
-
-* Use the <a href="!{_ngDocRepoURL}" target="_blank" title="angular docs on github">!{_angular_io} Github repository</a> for **documentation** issues and pull requests.
-
-  到 <a href="!{_ngDocRepoURL}" target="_blank" title="angular docs on github">!{_angular_io} Github 库</a>提交**文档**相关的 issues 和 pull requests。
-
-* Use the <a href="!{_ngRepoURL}" target="_blank" title="angular source on github">Angular Github repository</a> to report issues with **Angular** itself.
-
-  到 <a href="!{_ngRepoURL}" target="_blank" title="angular source on github">Angular Github 库</a>报告与 **Angular 本身**相关的 issues。
\ No newline at end of file
diff --git a/aio/content/guide/language-service.md b/aio/content/guide/language-service.md
new file mode 100644
index 0000000000..85a63c72f6
--- /dev/null
+++ b/aio/content/guide/language-service.md
@@ -0,0 +1,176 @@
+# Angular Language Service
+
+The Angular Language Service is a way to get completions, errors, 
+hints, and navigation inside your Angular templates whether they 
+are external in an HTML file or embedded in annotations/decorators 
+in a string. The Angular Language Service autodetects that you are 
+opening an Angular file, reads your `tsconfig.json` file, finds all the 
+templates you have in your application, and then provides language 
+services for any templates that you open.
+
+
+## Autocompletion
+
+Autocompletion can speed up your development time by providing you with 
+contextual possibilities and hints as you type. This example shows 
+autocomplete in an interpolation. As you type it out, 
+you can hit tab to complete.
+
+<figure>
+  <img src="generated/images/guide/language-service/language-completion.gif" alt="autocompletion">
+</figure>
+
+There are also completions within 
+elements. Any elements you have as a component selector will 
+show up in the completion list.
+
+## Error checking
+
+The Angular Language Service can also forewarn you of mistakes in your code. 
+In this example, Angular doesn't know what `orders` is or where it comes from. 
+
+<figure>
+  <img src="generated/images/guide/language-service/language-error.gif" alt="error checking">
+</figure>
+
+## Navigation
+
+Navigation allows you to hover to 
+see where a component, directive, module, etc. is from and then 
+click and press F12 to go directly to its definition.
+
+<figure>
+  <img src="generated/images/guide/language-service/language-navigation.gif" alt="navigation">
+</figure>
+
+
+## Angular Language Service in your editor
+
+Angular Language Service is currently available for [Visual Studio Code](https://code.visualstudio.com/) and 
+[WebStorm](https://www.jetbrains.com/webstorm). 
+
+### Visual Studio Code
+
+In Visual Studio Code, install Angular Language Service from the store, 
+which is accessible from the bottom icon on the left menu pane. 
+You can also use the VS Quick Open (⌘+P) to search for the extension. When you've opened it, 
+enter the following command: 
+
+```sh
+ext install ng-template
+```
+
+Then click the install button to install the Angular Language Service. 
+
+
+### WebStorm
+
+In webstorm, you have to install the language service as a dev dependency. 
+When Angular sees this dev dependency, it provides the 
+language service inside of WebStorm. Webstorm then gives you 
+colorization inside the template and autocomplete in addition to the Angular Language Service.
+
+Here's the dev dependency 
+you need to have in `package.json`:
+
+```json
+
+devDependencies {
+	"@angular/language-service": "^4.0.0"
+}
+```
+
+Then in the terminal window at the root of your project, 
+install the `devDependencies` with `npm` or `yarn`: 
+
+```sh
+npm install 
+```
+*OR* 
+
+```sh
+yarn
+```
+
+*OR* 
+
+```sh
+yarn install
+```
+
+
+### Sublime Text
+
+In [Sublime Text](https://www.sublimetext.com/), you first need an extension to allow Typescript. 
+Install the latest version of typescript in a local `node_modules` directory:
+
+```sh
+npm install --save-dev typescript
+```
+
+Then install the Angular Language Service in the same location:
+```sh
+npm install --save-dev @angular/language-service
+```
+
+Starting with TypeScript 2.3, TypeScript has a language service plugin model that the language service can use. 
+
+Next, in your user preferences (`Cmd+,` or `Ctrl+,`), add:
+
+```json
+"typescript-tsdk": "<path to your folder>/node_modules/typescript/lib"
+```
+
+
+## Installing in your project
+
+You can also install Angular Language Service in your project with the 
+following `npm` command:
+
+```sh
+npm install --save-dev @angular/language-service
+```
+Additionally, add the following to the `"compilerOptions"` section of 
+your project's `tsconfig.json`.
+
+```json
+  "plugins": [
+      {"name": "@angular/language-service"}
+  ]
+```
+Note that this only provides diagnostics and completions in `.ts` 
+files. You need a custom sublime plugin (or modifications to the current plugin) 
+for completions in HTML files.
+
+
+## How the Language Service works
+
+When you use an editor with a language service, there's an 
+editor process which starts a separate language process/service 
+to which it speaks through an [RPC](https://en.wikipedia.org/wiki/Remote_procedure_call). 
+Any time you type inside of the editor, it sends information to the other process to 
+track the state of your project. When you trigger a completion list within a template, the editor process first parses the template into an HTML AST, or [abstract syntax tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree). Then the Angular compiler interprets 
+what module the template is part of, the scope you're in, and the component selector. Then it figures out where in the template AST your cursor is. When it determines the 
+context, it can then determine what the children can be.
+
+It's a little more involved if you are in an interpolation. If you have an interpolation of `{{data.---}}` inside a `div` and need the completion list after `data.---`, the compiler can't use the HTML AST to find the answer. The HTML AST can only tell the compiler that there is some text with the characters "`{{data.---}}`". That's when the template parser produces an expression AST, which resides within the template AST. The Angular Language Services then looks at `data.---` within its context and asks the TypeScript Language Service what the members of data are. TypeScript then returns the list of possibilities.
+
+
+For more in-depth information, see the 
+[Angular Language Service API](https://github.com/angular/angular/blob/master/packages/language-service/src/types.ts)
+
+
+
+
+
+
+
+
+<hr>
+
+## More on Information
+
+For more information, see [Chuck Jazdzewski's presentation](https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s) on the Angular Language 
+Service from [ng-conf](https://www.ng-conf.org/) 2017.
+
+
diff --git a/aio/content/guide/learning-angular.md b/aio/content/guide/learning-angular.md
deleted file mode 100644
index 624d9207ed..0000000000
--- a/aio/content/guide/learning-angular.md
+++ /dev/null
@@ -1,91 +0,0 @@
-@title
-学习 Angular
-
-@intro
-Angular 初学者的推荐学习路径
-
-@description
-
-
-
-<figure>
-  <img src="assets/images/devguide/intro/people.png" width="200px" height="152px" alt="Us" align="left" style="margin-left:-40px;margin-right:10px"></img>
-</figure>
-
-
-
-Everyone learns differently.
-You don't have to read the documentation straight through.  Most pages stand on their own.
-Those new to Angular may wish to follow this popular learning path.
-<br class="l-clear-left">
-
-每个人的学习方式不一样，你不一定要通读文档，而本站的大部分页面都是可以独立阅读的。
-Angular 初学者可以遵循下面这种常见学习路径：
-
-<br class="l-clear-left">
-
-1. [Setup](guide/setup "Setup locally withe Quickstart seed") for local Angular development, if you haven't already done so.
-
-  如果你还没有这样做，[搭建](guide/setup  "利用《快速起步》种子搭建本地开发环境")本地 Angular 开发环境。
-
-1. Take the [*Tour of Heroes* tutorial](tutorial "Tour of Heroes"). 
-
-  学习[*英雄指南*教程](tutorial "Tour of Heroes")。
-  
-  The *Tour of Heroes* takes you step-by-step from [setup](guide/setup)
-  to a full-featured example that demonstrates the essential characteristics of a professional application:
-  a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
-
-  *英雄指南*从[搭建本地开发环境](guide/setup)开始，
-  带着你一步一步地开发出具有完整特征的示例程序，它包含了专业应用最基本的特征：
-  合理的项目结构、数据绑定、主从视图、服务、依赖注入、导航和远程数据访问等。
-
-1. {@a architecture}Read the [Architecture](guide/architecture) overview for the big picture.
-
-  阅读[架构](guide/architecture)了解大局。
-
-1. [The Root Module](guide/appmodule) introduces the `NgModule` class that tells Angular how to compile and run your application.
-
-  [根模块](guide/appmodule)介绍了`NgModule`类，它为 Angular 描述如何编译和运行应用。
-
-1. [Displaying Data](guide/displaying-data) shows how data binding puts component property values on screen.
-
-   [显示数据](guide/displaying-data)展示了数据绑定如何将组件属性值显示到屏幕上。
-
-1. [User Input](guide/user-input) explains how to respond to user-initiated DOM events.
-
-   [用户输入](guide/user-input)解释了如何处理用户触发的 DOM 事件。
-
-1. [Forms](guide/forms) covers data entry and validation within the UI.
-
-   [表单](guide/forms)涵盖了用户界面中数据的输入和验证。
-
-1. [Dependency Injection](guide/dependency-injection) is the way to build large, maintainable applications
-from small, single-purpose parts.
-
-   [依赖注入](guide/dependency-injection)是用小型和单用途部件来构建大型、易维护应用的途径。
-
-1. [Template Syntax](guide/template-syntax) is a comprehensive study of Angular template HTML.
-
-   [模板语法](guide/template-syntax)对 Angular 模板 HTML 进行了完整的阐述。
-
-After reading the above sections, feel free to skip around among the other pages on this site.
-
-阅读以上内容后，你可以随意挑选在本站的其他页面进行阅读。
-
-
-<div class="l-sub-section">
-
-
-
-### Next Step
-
-### 下一步
-
-Try the [tutorial](tutorial "Tour of Heroes") if you're ready to start coding or
-visit the [Architecture](guide/architecture "Basic Concepts") page if you prefer to learn the basic concepts first.
-
-如果你想开始编程，那就试试[教程](tutorial "英雄指南")。或者如果你想要先学习基本概念，那么阅读[架构](guide/architecture "基本概念")页面。
-
-</div>
-
diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md
index 614b9703f1..ede4964c3c 100644
--- a/aio/content/guide/lifecycle-hooks.md
+++ b/aio/content/guide/lifecycle-hooks.md
@@ -1,18 +1,8 @@
-@title
-生命周期钩子
-
-@intro
-Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。
-
-@description
-
-
-
-<figure>
-  <img src="assets/images/devguide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px"></img>
-</figure>
+# Lifecycle Hooks
 
+# 生命周期钩子
 
+<img src="generated/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" class="left">
 
 A component has a lifecycle managed by Angular .
 
@@ -32,80 +22,8 @@ A directive has the same set of lifecycle hooks, minus the hooks that are specif
 
 除了那些组件内容和视图相关的钩子外,指令有相同生命周期钩子。
 
-<br class="l-clear-both">
-
-
-## Contents
-
-## 目录
-
-* [Component lifecycle hooks overview](guide/lifecycle-hooks#hooks-overview)
-
-  [组件生命周期概览](guide/lifecycle-hooks#hooks-overview)
-
-* [Lifecycle sequence](guide/lifecycle-hooks#hooks-purpose-timing)
-
-  [生命周期的顺序](guide/lifecycle-hooks#hooks-purpose-timing)
-
-* [Interfaces are optional (technically)](guide/lifecycle-hooks#interface-optional)
-
-  [接口是可选的（理论上）](guide/lifecycle-hooks#interface-optional)
-
-* [Other Angular lifecycle hooks](guide/lifecycle-hooks#other-lifecycle-hooks)
-
-  [其它Angular生命周期钩子](guide/lifecycle-hooks#other-lifecycle-hooks)
-
-* [Lifecycle examples](guide/lifecycle-hooks#the-sample)
-
-  [生命周期范例](guide/lifecycle-hooks#the-sample)
-
-* [Peek-a-boo: all hooks](guide/lifecycle-hooks#peek-a-boo)
-
-  [Peek-a-boo：所有钩子](guide/lifecycle-hooks#peek-a-boo)
-
-* [Spying OnInit and OnDestroy](guide/lifecycle-hooks#spy)
-
-  [监听OnInit和OnDestroy](guide/lifecycle-hooks#spy)
-
-  * [OnInit](guide/lifecycle-hooks#oninit)
-
-  * [OnDestroy](guide/lifecycle-hooks#ondestroy)
-
-* [OnChanges](guide/lifecycle-hooks#onchanges)
-
-* [DoCheck](guide/lifecycle-hooks#docheck)
-
-* [AfterView](guide/lifecycle-hooks#afterview)
-
-  * [Abide by the unidirectional data flow rule](guide/lifecycle-hooks#wait-a-tick)
-
-    [遵循单向数据流规则](guide/lifecycle-hooks#wait-a-tick)
-
-* [AfterContent](guide/lifecycle-hooks#aftercontent)
-
-  * [Content projection](guide/lifecycle-hooks#content-projection)
-
-    [内容投影](guide/lifecycle-hooks#content-projection)
-
-  * [AfterContent hooks](guide/lifecycle-hooks#aftercontent-hooks)
-
-    [AfterContent钩子](guide/lifecycle-hooks#aftercontent-hooks)
-
-  * [No unidirectional flow worries with _AfterContent_](guide/lifecycle-hooks#no-unidirectional-flow-worries)
-
-    [非单向数据流下_AfterContent_的注意事项](guide/lifecycle-hooks#no-unidirectional-flow-worries)
-
-
-
-Try the <live-example></live-example>.
-
-试一试<live-example></live-example>。
-
-
 {@a hooks-overview}
 
-
-
 ## Component lifecycle hooks overview
 
 ## 组件生命周期钩子概览
@@ -126,11 +44,7 @@ that Angular calls shortly after creating the component:
 Angular在创建组件后立刻调用它，：
 
 
-<code-example path="lifecycle-hooks/src/app/peek-a-boo.component.ts" region="ngOnInit" title="peek-a-boo.component.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
+<code-example path="lifecycle-hooks/src/app/peek-a-boo.component.ts" region="ngOnInit" title="peek-a-boo.component.ts (excerpt)" linenums="false"></code-example>
 
 No directive or component will implement all of the lifecycle hooks and some of the hooks only make sense for components.
 Angular only calls a directive/component hook method *if it is defined*.
@@ -140,8 +54,6 @@ Angular only calls a directive/component hook method *if it is defined*.
 
 {@a hooks-purpose-timing}
 
-
-
 ## Lifecycle sequence
 
 ## 生命周期的顺序
@@ -153,22 +65,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
 
 
 <table width="100%">
-
-  <col width="20%">
-
-  </col>
-
-  <col width="80%">
-
-  </col>
-
+  <col width="20%"></col>
+  <col width="80%"></col>
   <tr>
 
     <th>
-
-      <p>
-        Hook
-      </p>
+      <p>Hook
+    </p>
 
       <p>
         钩子
@@ -177,28 +80,19 @@ calls the lifecycle hook methods in the following sequence at specific moments:
     </th>
 
     <th>
-
-      <p>
-        Purpose and Timing
-      </p>
+      <p>Purpose and Timing
+    </p>
 
       <p>
         目的和时机
-      </p>
-
-    </th>
-
+      </p></th>
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <code>ngOnChanges()</code>
     </td>
-
     <td>
 
-
       Respond when Angular (re)sets data-bound input properties.
       The method receives a `SimpleChanges` object of current and previous property values.
 
@@ -210,18 +104,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
       当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在`ngOnInit()`之前。
 
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <code>ngOnInit()</code>
     </td>
-
     <td>
 
-
       Initialize the directive/component after Angular first displays the data-bound properties
       and sets the directive/component's input properties.
 
@@ -232,18 +121,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
       在第一轮`ngOnChanges()`完成之后调用，只调用**一次**。
 
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <code>ngDoCheck()</code>
     </td>
-
     <td>
 
-
       Detect and act upon changes that Angular can't or won't detect on its own.
 
       检测，并在发生Angular无法或不愿意自己检测的变化时作出反应。
@@ -253,18 +137,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
       在每个Angular变更检测周期中调用，`ngOnChanges()`和`ngOnInit()`之后。
 
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <code>ngAfterContentInit()</code>
     </td>
-
     <td>
 
-
       Respond after Angular projects external content into the component's view.
 
       当把内容投影进组件之后调用。
@@ -278,18 +157,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
       **只适用于组件**。
 
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <code>ngAfterContentChecked()</code>
     </td>
-
     <td>
 
-
       Respond after Angular checks the content projected into the component.
 
       每次完成被投影组件内容的变更检测之后调用。
@@ -303,18 +177,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
       **只适合组件**。
 
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <code>ngAfterViewInit()</code>
     </td>
-
     <td>
 
-
       Respond after Angular initializes the component's views and child views.
 
       初始化完组件视图及其子视图之后调用。
@@ -328,18 +197,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
       **只适合组件**。
 
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <code>ngAfterViewChecked()</code>
     </td>
-
     <td>
 
-
       Respond after Angular checks the component's views and child views.
 
       每次做完组件视图和子视图的变更检测之后调用。
@@ -353,18 +217,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
       **只适合组件**。
 
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <code>ngOnDestroy</code>
     </td>
-
     <td>
 
-
       Cleanup just before Angular destroys the directive/component.
       Unsubscribe Observables and detach event handlers to avoid memory leaks.
 
@@ -376,17 +235,11 @@ calls the lifecycle hook methods in the following sequence at specific moments:
       在Angular销毁指令/组件之前调用。
 
     </td>
-
   </tr>
-
 </table>
 
-
-
 {@a interface-optional}
 
- 
-
 ## Interfaces are optional (technically)
 
 ## 接口是可选的(理论上)？
@@ -420,8 +273,6 @@ in order to benefit from strong typing and editor tooling.
 
 {@a other-lifecycle-hooks}
 
-
-
 ## Other Angular lifecycle hooks
 
 ## 其它生命周期钩子
@@ -436,7 +287,7 @@ control over how these libraries are used.
 
 第三方库也可能会实现它们自己的钩子，以便让我们这些开发者在使用时能做更多的控制。
 
-
+{@a the-sample}
 
 ## Lifecycle examples
 
@@ -457,24 +308,14 @@ Here's a brief description of each exercise:
 
 下面是每个练习简短的描述：
 
-
 <table width="100%">
-
-  <col width="20%">
-
-  </col>
-
-  <col width="80%">
-
-  </col>
-
+  <col width="20%"></col>
+  <col width="80%"></col>
   <tr>
 
     <th>
-
-      <p>
-        Component
-      </p>
+      <p>Component
+    </p>
 
       <p>
         组件
@@ -483,45 +324,32 @@ Here's a brief description of each exercise:
     </th>
 
     <th>
-
-      <p>
-        Description
-      </p>
+      <p>Description
+    </p>
 
       <p>
         描述
-      </p>
-
-    </th>
-
+      </p></th>
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <a href="#peek-a-boo">Peek-a-boo</a>
     </td>
-
     <td>
 
-
       Demonstrates every lifecycle hook.
       Each hook method writes to the on-screen log.
 
       展示每个生命周期钩子，每个钩子方法都会在屏幕上显示一条日志。
+
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <a href="#spy">Spy</a>
     </td>
-
     <td>
 
-
       Directives have lifecycle hooks too.
       A `SpyDirective` can log when the element it spies upon is
       created or destroyed using the `ngOnInit` and `ngOnDestroy` hooks.
@@ -532,19 +360,15 @@ Here's a brief description of each exercise:
       managed by the parent `SpyComponent`.
 
       本例把`SpyDirective`应用到父组件里的`ngFor`*英雄*重复器(repeater)的`<div>`里面。
+
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <a href="#onchanges">OnChanges</a>
     </td>
-
     <td>
 
-
       See how Angular calls the `ngOnChanges()` hook with a `changes` object
       every time one of the component input properties changes.
       Shows how to interpret the `changes` object.
@@ -552,68 +376,54 @@ Here's a brief description of each exercise:
       这里将会看到：每当组件的输入属性发生变化时，Angular会如何以`changes`对象作为参数去调用`ngOnChanges()`钩子。
       展示了该如何理解和使用`changes`对象。
 
+
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <a href="#docheck">DoCheck</a>
     </td>
-
     <td>
 
-
       Implements an `ngDoCheck()` method with custom change detection.
       See how often Angular calls this hook and watch it post changes to a log.
 
       实现了一个`ngDoCheck()`方法，通过它可以自定义变更检测逻辑。
       这里将会看到：Angular会用什么频度调用这个钩子，监视它的变化，并把这些变化输出成一条日志。
 
+
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <a href="#afterview">AfterView</a>
     </td>
-
     <td>
 
-
       Shows what Angular means by a *view*.
       Demonstrates the `ngAfterViewInit` and `ngAfterViewChecked` hooks.
 
       显示Angular中的*视图*所指的是什么。
       演示了`ngAfterViewInit`和`ngAfterViewChecked`钩子。
+
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
       <a href="#aftercontent">AfterContent</a>
     </td>
-
     <td>
 
-
       Shows how to project external content into a component and
       how to distinguish projected content from a component's view children.
       Demonstrates the `ngAfterContentInit` and `ngAfterContentChecked` hooks.
 
       展示如何把外部内容投影进组件中，以及如何区分“投影进来的内容”和“组件的子视图”。
       演示了`ngAfterContentInit`和`ngAfterContentChecked`钩子。
+
     </td>
-
   </tr>
-
   <tr style='vertical-align:top'>
-
     <td>
 
       <p>
@@ -625,10 +435,8 @@ Here's a brief description of each exercise:
       </p>
 
     </td>
-
     <td>
 
-
       Demonstrates a combination of a component and a directive
       each with its own hooks.
 
@@ -643,13 +451,9 @@ Here's a brief description of each exercise:
       同时，我们还把前一个例子中的`SpyDirective`用在`CounterComponent`上，来提供日志，可以同时观察到日志的创建和销毁过程。
 
     </td>
-
   </tr>
-
 </table>
 
-
-
 The remainder of this page discusses selected exercises in further detail.
 
 接下来，我们将详细讨论这些练习。
@@ -657,8 +461,6 @@ The remainder of this page discusses selected exercises in further detail.
 
 {@a peek-a-boo}
 
-
-
 ## Peek-a-boo: all hooks
 
 ## Peek-a-boo：全部钩子
@@ -678,12 +480,10 @@ This snapshot reflects the state of the log after the user clicked the *Create..
 用户点击**Create...**按钮，然后点击**Destroy...**按钮后，日志的状态如下图所示：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo"></img>
+<figure>
+  <img src="generated/images/guide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo">
 </figure>
 
-
-
 The sequence of log messages follows the prescribed hook calling order:
 `OnChanges`, `OnInit`, `DoCheck`&nbsp;(3x), `AfterContentInit`, `AfterContentChecked`&nbsp;(3x),
 `AfterViewInit`, `AfterViewChecked`&nbsp;(3x), and `OnDestroy`.
@@ -695,10 +495,8 @@ The sequence of log messages follows the prescribed hook calling order:
 
 <div class="l-sub-section">
 
-
-
-The constructor isn't an Angular hook *per se*.
-The log confirms that input properties (the `name` property in this case) have no assigned values at construction.
+  The constructor isn't an Angular hook *per se*.
+  The log confirms that input properties (the `name` property in this case) have no assigned values at construction.
 
 构造函数本质上不应该算作Angular的钩子。
 记录确认了在创建期间那些输入属性(这里是`name`属性)没有被赋值。
@@ -706,8 +504,6 @@ The log confirms that input properties (the `name` property in this case) have n
 
 </div>
 
-
-
 Had the user clicked the *Update Hero* button, the log would show another `OnChanges` and two more triplets of
 `DoCheck`, `AfterContentChecked` and `AfterViewChecked`.
 Clearly these three hooks fire *often*. Keep the logic in these hooks as lean as possible!
@@ -722,8 +518,6 @@ The next examples focus on hook details.
 
 {@a spy}
 
-
-
 ## Spying *OnInit* and *OnDestroy*
 
 ## 窥探*OnInit*和*OnDestroy*
@@ -740,17 +534,11 @@ The heroes will never know they're being watched.
 
 <div class="l-sub-section">
 
+  Kidding aside, pay attention to two key points:
 
+不开玩笑了，注意下面两个关键点：1. Angular calls hook methods for *directives* as well as components.<br><br>
 
-Kidding aside, pay attention to two key points:
-
-不开玩笑了，注意下面两个关键点：
-
-1. Angular calls hook methods for *directives* as well as components.<br><br>
-
-   就像对组件一样，Angular也会对*指令*调用这些钩子方法。
-
-2. A spy directive can provide insight into a DOM object that you cannot change directly.
+就像对组件一样，Angular也会对*指令*调用这些钩子方法。2. A spy directive can provide insight into a DOM object that you cannot change directly.
 Obviously you can't touch the implementation of a native `<div>`.
 You can't modify a third party component either.
 But you can watch both with a directive.
@@ -763,20 +551,15 @@ But you can watch both with a directive.
 
 </div>
 
-
-
 The sneaky spy directive is simple, consisting almost entirely of `ngOnInit()` and `ngOnDestroy()` hooks
 that log messages to the parent via an injected `LoggerService`.
 
-我们这个鬼鬼祟祟的侦探指令很简单，几乎完全由`ngOnInit()`和`ngOnDestroy()`钩子组成，它通过一个注入进来的`LoggerService`来把消息记录到父组件中去。
 
-
-<code-example path="lifecycle-hooks/src/app/spy.directive.ts" region="spy-directive" title="src/app/spy.directive.ts" linenums="false">
+我们这个鬼鬼祟祟的侦探指令很简单，几乎完全由`ngOnInit()`和`ngOnDestroy()`钩子组成，它通过一个注入进来的`LoggerService`来把消息记录到父组件中去。<code-example path="lifecycle-hooks/src/app/spy.directive.ts" region="spy-directive" title="src/app/spy.directive.ts" linenums="false">
 
 </code-example>
 
 
-
 You can apply the spy to any native or component element and it'll be initialized and destroyed
 at the same time as that element.
 Here it is attached to the repeated hero `<div>`:
@@ -785,24 +568,16 @@ Here it is attached to the repeated hero `<div>`:
 下面是把它附加到用来重复显示英雄数据的这个`<div>`上。
 
 
-<code-example path="lifecycle-hooks/src/app/spy.component.html" region="template" title="src/app/spy.component.html" linenums="false">
-
-</code-example>
-
-
+<code-example path="lifecycle-hooks/src/app/spy.component.html" region="template" title="src/app/spy.component.html" linenums="false"></code-example>
 
 Each spy's birth and death marks the birth and death of the attached hero `<div>`
 with an entry in the *Hook Log* as seen here:
 
-每个“侦探”的出生和死亡也同时标记出了存放英雄的那个`<div>`的出生和死亡。*钩子记录*中的结构是这样的：
 
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive"></img>
+每个“侦探”的出生和死亡也同时标记出了存放英雄的那个`<div>`的出生和死亡。*钩子记录*中的结构是这样的：<figure >
+  <img src='generated/images/guide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive">
 </figure>
 
-
-
 Adding a hero results in a new hero `<div>`. The spy's `ngOnInit()` logs that event.
 
 添加一个英雄就会产生一个新的英雄`<div>`。侦探的`ngOnInit()`记录下了这个事件。
@@ -822,7 +597,6 @@ The `ngOnInit()` and `ngOnDestroy()` methods have more vital roles to play in re
 
 {@a oninit}
 
-
 ### _OnInit()_
 
 Use `ngOnInit()` for two main reasons:
@@ -844,19 +618,15 @@ Experienced developers agree that components should be cheap and safe to constru
 
 <div class="l-sub-section">
 
-
-
-Misko Hevery, Angular team lead,
-[explains why](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/)
-you should avoid complex constructor logic.
+  Misko Hevery, Angular team lead,
+  [explains why](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/)
+  you should avoid complex constructor logic.
 
 Misko Hevery，Angular项目的头，在[这里解释](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/)了你为什么应该避免复杂的构造函数逻辑。
 
 
 </div>
 
-
-
 Don't fetch data in a component constructor.
 You shouldn't worry that a new component will try to contact a remote server when
 created under test or before you decide to display it.
@@ -867,8 +637,7 @@ Constructors should do no more than set the initial local variables to simple va
 构造函数中除了使用简单的值对局部变量进行初始化之外，什么都不应该做。
 
 An `ngOnInit()` is a good place for a component to fetch its initial data. The
-[Tour of HeroesTutorial](tutorial/toh-pt4#oninit) and [HTTPClient](guide/server-communication#oninit) 
-guidesshow how.
+[Tour of Heroes Tutorial](tutorial/toh-pt4#oninit) guideshows how.
 
 `ngOnInit()`是组件获取初始数据的好地方。[指南](tutorial/toh-pt4#oninit)和[HTTP](guide/server-communication#oninit)章讲解了如何这样做。
 
@@ -883,11 +652,9 @@ They'll have been set when `ngOnInit()` runs.
 
 <div class="l-sub-section">
 
-
-
-The `ngOnChanges()` method is your first opportunity to access those properties.
-Angular calls `ngOnChanges()` before `ngOnInit()` and many times after that.
-It only calls `ngOnInit()` once.
+  The `ngOnChanges()` method is your first opportunity to access those properties.
+  Angular calls `ngOnChanges()` before `ngOnInit()` and many times after that.
+  It only calls `ngOnInit()` once.
 
 我们访问这些属性的第一次机会，实际上是`ngOnChanges()`方法，Angular会在`ngOnInit()`之前调用它。
 但是在那之后，Angular还会调用`ngOnChanges()`很多次。而`ngOnInit()`只会被调用一次。
@@ -895,8 +662,6 @@ It only calls `ngOnInit()` once.
 
 </div>
 
-
-
 You can count on Angular to call the `ngOnInit()` method _soon_ after creating the component.
 That's where the heavy initialization logic belongs.
 
@@ -906,7 +671,6 @@ That's where the heavy initialization logic belongs.
 
 {@a ondestroy}
 
-
 ### _OnDestroy()_
 
 Put cleanup logic in `ngOnDestroy()`, the logic that *must* run before Angular destroys the directive.
@@ -930,7 +694,6 @@ You risk memory leaks if you neglect to do so.
 
 {@a onchanges}
 
-
 ## _OnChanges()_
 
 Angular calls its `ngOnChanges()` method whenever it detects changes to ***input properties*** of the component (or directive).
@@ -943,14 +706,10 @@ This example monitors the `OnChanges` hook.
 本例监控`OnChanges`钩子。
 
 
-<code-example path="lifecycle-hooks/src/app/on-changes.component.ts" region="ng-on-changes" title="on-changes.component.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
+<code-example path="lifecycle-hooks/src/app/on-changes.component.ts" region="ng-on-changes" title="on-changes.component.ts (excerpt)" linenums="false"></code-example>
 
 The `ngOnChanges()` method takes an object that maps each changed property name to a
-[SimpleChange](api/core/index/SimpleChange-class) object holding the current and previous property values.
+[SimpleChange](api/core/SimpleChange) object holding the current and previous property values.
 This hook iterates over the changed properties and logs them.
 
 `ngOnChanges()`方法获取了一个对象，它把每个发生变化的属性名都映射到了一个[SimpleChange](api/core/index/SimpleChange-class)对象，
@@ -961,34 +720,23 @@ The example component, `OnChangesComponent`, has two input properties: `hero` an
 这个例子中的`OnChangesComponent`组件有两个输入属性：`hero`和`power`。
 
 
-<code-example path="lifecycle-hooks/src/app/on-changes.component.ts" region="inputs" title="src/app/on-changes.component.ts" linenums="false">
-
-</code-example>
-
-
+<code-example path="lifecycle-hooks/src/app/on-changes.component.ts" region="inputs" title="src/app/on-changes.component.ts" linenums="false"></code-example>
 
 The host `OnChangesParentComponent` binds to them like this:
 
-宿主`OnChangesParentComponent`绑定了它们，就像这样：
 
-
-<code-example path="lifecycle-hooks/src/app/on-changes-parent.component.html" region="on-changes" title="src/app/on-changes-parent.component.html">
+宿主`OnChangesParentComponent`绑定了它们，就像这样：<code-example path="lifecycle-hooks/src/app/on-changes-parent.component.html" region="on-changes" title="src/app/on-changes-parent.component.html">
 
 </code-example>
 
 
-
 Here's the sample in action as the user makes changes.
 
-下面是此例子中的当用户做出更改时的操作演示：
 
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges"></img>
+下面是此例子中的当用户做出更改时的操作演示：<figure >
+  <img src='generated/images/guide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges">
 </figure>
 
-
-
 The log entries appear as the string value of the *power* property changes.
 But the `ngOnChanges` does not catch changes to `hero.name`
 That's surprising at first.
@@ -1011,7 +759,6 @@ Angular不会关注这个英雄对象的`name`属性的变化。
 
 {@a docheck}
 
-
 ## _DoCheck()_
 
 Use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own.
@@ -1021,43 +768,31 @@ Use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch
 
 <div class="l-sub-section">
 
-
-
-Use this method to detect a change that Angular overlooked.
+  Use this method to detect a change that Angular overlooked.
 
 用这个方法来检测那些被Angular忽略的更改。
 
 
 </div>
 
-
-
 The *DoCheck* sample extends the *OnChanges* sample with the following `ngDoCheck()` hook:
 
 *DoCheck*范例通过下面的`ngDoCheck()`实现扩展了*OnChanges*范例：
 
 
-<code-example path="lifecycle-hooks/src/app/do-check.component.ts" region="ng-do-check" title="DoCheckComponent (ngDoCheck)" linenums="false">
-
-</code-example>
-
-
+<code-example path="lifecycle-hooks/src/app/do-check.component.ts" region="ng-do-check" title="DoCheckComponent (ngDoCheck)" linenums="false"></code-example>
 
 This code inspects certain _values of interest_, capturing and comparing their current state against previous values.
 It writes a special message to the log when there are no substantive changes to the `hero` or the `power`
 so you can see how often `DoCheck` is called. The results are illuminating:
 
+
 该代码检测一些**相关的值**，捕获当前值并与以前的值进行比较。
 当英雄或它的超能力发生了非实质性改变时，我们就往日志中写一条特殊的消息。
-这样你可以看到`DoCheck`被调用的频率。结果非常显眼：
-
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck"></img>
+这样你可以看到`DoCheck`被调用的频率。结果非常显眼：<figure >
+  <img src='generated/images/guide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck">
 </figure>
 
-
-
 While the `ngDoCheck()` hook can detect when the hero's `name` has changed, it has a frightful cost.
 This hook is called with enormous frequency&mdash;after _every_
 change detection cycle no matter where the change occurred.
@@ -1077,26 +812,8 @@ Clearly our implementation must be very lightweight or the user experience suffe
 只有相对较少的调用才是由于对相关数据的修改而触发的。
 显然，我们的实现必须非常轻量级，否则将损害用户体验。
 
-
-<div class="l-sub-section">
-
-
-
-We also see that the `ngOnChanges` method is called in contradiction of the
-[incorrect API documentation](api/core/index/DoCheck-class).
-
-我们还看到，`ngOnChanges`方法的调用方式与[API文档](api/core/index/DoCheck-interface)中是不一样的，这是因为API文档过时了。
-(译注：这是经过与官方开发组沟通得到的消息，由于代码快速迭代，因此API文档现在的更新不够及时，将来会进行一次系统的梳理和更正)
-
-
-</div>
-
-
-
-
 {@a afterview}
 
-
 ## AfterView
 
 The *AfterView* sample explores the `AfterViewInit()` and `AfterViewChecked()` hooks that Angular calls
@@ -1109,54 +826,38 @@ Here's a child view that displays a hero's name in an `<input>`:
 下面是一个子视图，它用来把英雄的名字显示在一个`<input>`中：
 
 
-<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="child-view" title="ChildComponent" linenums="false">
-
-</code-example>
-
-
+<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="child-view" title="ChildComponent" linenums="false"></code-example>
 
 The `AfterViewComponent` displays this child view *within its template*:
 
 `AfterViewComponent`把这个子视图显示*在它的模板中*：
 
 
-<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="template" title="AfterViewComponent (template)" linenums="false">
-
-</code-example>
-
-
+<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="template" title="AfterViewComponent (template)" linenums="false"></code-example>
 
 The following hooks take action based on changing values *within the child view*,
 which can only be reached by querying for the child view via the property decorated with
-[@ViewChild](api/core/index/ViewChild-decorator).
+[@ViewChild](api/core/ViewChild).
 
 下列钩子基于*子视图中*的每一次数据变更采取行动，我们只能通过带[@ViewChild](api/core/index/ViewChild-decorator)装饰器的属性来访问子视图。
 
 
-<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="hooks" title="AfterViewComponent (class excerpts)" linenums="false">
-
-</code-example>
-
-
+<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="hooks" title="AfterViewComponent (class excerpts)" linenums="false"></code-example>
 
 {@a wait-a-tick}
 
-
 ### Abide by the unidirectional data flow rule
 
 ### 遵循单向数据流规则
 
 The `doSomething()` method updates the screen when the hero name exceeds 10 characters.
 
-当英雄的名字超过10个字符时，`doSomething()`方法就会更新屏幕。
 
-
-<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="do-something" title="AfterViewComponent (doSomething)" linenums="false">
+当英雄的名字超过10个字符时，`doSomething()`方法就会更新屏幕。<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="do-something" title="AfterViewComponent (doSomething)" linenums="false">
 
 </code-example>
 
 
-
 Why does the `doSomething()` method wait a tick before updating `comment`?
 
 为什么在更新`comment`属性之前，`doSomething()`方法要等上一拍(tick)？
@@ -1168,7 +869,7 @@ Angular的“单向数据流”规则禁止在一个视图已经被组合好*之
 而这两个钩子都是在组件的视图已经被组合好之后触发的。
 
 Angular throws an error if the hook updates the component's data-bound `comment` property immediately (try it!).
-The `LoggerService.tick_then()` postpones the log update 
+The `LoggerService.tick_then()` postpones the log update
 for one turn of the browser's JavaScript cycle and that's just long enough.
 
 如果我们立即更新组件中被绑定的`comment`属性，Angular就会抛出一个错误(试试!)。
@@ -1180,12 +881,10 @@ Here's *AfterView* in action:
 这里是*AfterView*的操作演示：
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/lifecycle-hooks/after-view-anim.gif' alt="AfterView"></img>
+<figure>
+  <img src='generated/images/guide/lifecycle-hooks/after-view-anim.gif' alt="AfterView">
 </figure>
 
-
-
 Notice that Angular frequently calls `AfterViewChecked()`, often when there are no changes of interest.
 Write lean hook methods to avoid performance problems.
 
@@ -1196,8 +895,8 @@ Write lean hook methods to avoid performance problems.
 
 {@a aftercontent}
 
-
 ## AfterContent
+
 The *AfterContent* sample explores the `AfterContentInit()` and `AfterContentChecked()` hooks that Angular calls
 *after* Angular projects external content into the component.
 
@@ -1206,7 +905,6 @@ The *AfterContent* sample explores the `AfterContentInit()` and `AfterContentChe
 
 {@a content-projection}
 
-
 ### Content projection
 
 ### 内容投影
@@ -1219,17 +917,13 @@ into the component's template in a designated spot.
 
 <div class="l-sub-section">
 
-
-
-AngularJS developers know this technique as *transclusion*.
+  AngularJS developers know this technique as *transclusion*.
 
 AngularJS的开发者大概知道一项叫做*transclusion*的技术，对，这就是它的马甲。
 
 
 </div>
 
-
-
 Consider this variation on the [previous _AfterView_](guide/lifecycle-hooks#afterview) example.
 This time, instead of including the child view within the template, it imports the content from
 the `AfterContentComponent`'s parent. Here's the parent's template:
@@ -1238,11 +932,7 @@ the `AfterContentComponent`'s parent. Here's the parent's template:
   这次，我们不再通过模板来把子视图包含进来，而是改从`AfterContentComponent`的父组件中导入它。下面是父组件的模板：
 
 
-<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="parent-template" title="AfterContentParentComponent (template excerpt)" linenums="false">
-
-</code-example>
-
-
+<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="parent-template" title="AfterContentParentComponent (template excerpt)" linenums="false"></code-example>
 
 Notice that the `<my-child>` tag is tucked between the `<after-content>` tags.
 Never put content between a component's element tags *unless you intend to project that content
@@ -1256,11 +946,7 @@ Now look at the component's template:
 现在来看下`<after-content>`组件的模板：
 
 
-<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="template" title="AfterContentComponent (template)" linenums="false">
-
-</code-example>
-
-
+<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="template" title="AfterContentComponent (template)" linenums="false"></code-example>
 
 The `<ng-content>` tag is a *placeholder* for the external content.
 It tells Angular where to insert that content.
@@ -1271,19 +957,13 @@ In this case, the projected content is the `<my-child>` from the parent.
 在这里，被投影进去的内容就是来自父组件的`<my-child>`标签。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content"></img>
+<figure>
+  <img src='generated/images/guide/lifecycle-hooks/projected-child-view.png' alt="Projected Content">
 </figure>
 
-
-
-
-
 <div class="l-sub-section">
 
-
-
-The telltale signs of *content projection* are twofold:
+  The telltale signs of *content projection* are twofold:
 
 下列迹象表明存在着*内容投影*：
 
@@ -1298,11 +978,8 @@ The telltale signs of *content projection* are twofold:
 
 </div>
 
-
-
 {@a aftercontent-hooks}
 
-
 ### AfterContent hooks
 
 ### AfterContent钩子  
@@ -1324,20 +1001,16 @@ projected into the component.
 
 The following *AfterContent* hooks take action based on changing values in a *content child*,
 which can only be reached by querying for them via the property decorated with
-[@ContentChild](api/core/index/ContentChild-decorator).
-
-下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](api/core/index/ContentChild-decorator)装饰器的属性来查询到“子级内容”。
+[@ContentChild](api/core/ContentChild).
 
 
-<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="hooks" title="AfterContentComponent (class excerpts)" linenums="false">
+下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](api/core/index/ContentChild-decorator)装饰器的属性来查询到“子级内容”。<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="hooks" title="AfterContentComponent (class excerpts)" linenums="false">
 
 </code-example>
 
 
-
 {@a no-unidirectional-flow-worries}
 
-
 ### No unidirectional flow worries with _AfterContent_
 
 ### 使用**AfterContent**时，无需担心单向数据流规则
@@ -1354,4 +1027,4 @@ There is a small window between the `AfterContent...` and `AfterView...` hooks t
 
 回忆一下，Angular在每次调用*AfterView*钩子之前也会同时调用*AfterContent*。
 Angular在完成当前组件的视图合成之前，就已经完成了被投影内容的合成。
-所以我们仍然有机会去修改那个视图。
\ No newline at end of file
+所以我们仍然有机会去修改那个视图。
diff --git a/aio/content/guide/ngcontainer.md b/aio/content/guide/ngcontainer.md
deleted file mode 100644
index a3143e8625..0000000000
--- a/aio/content/guide/ngcontainer.md
+++ /dev/null
@@ -1,16 +0,0 @@
-@description
-
-
-
-<style>
-  h4 {font-size: 17px !important; text-transform: none !important;}
-  .syntax { font-family: Consolas, 'Lucida Sans', Courier, sans-serif; color: black; font-size: 85%; }
-
-</style>
-
-
-
-This guide has been withdrawn. 
-The essential information about this feature
-is in the [Structural Directives](guide/structural-directives#ngcontainer) guide.
-The original draft has been retained for possible future use.
\ No newline at end of file
diff --git a/aio/content/guide/ngmodule-faq.md b/aio/content/guide/ngmodule-faq.md
index 9ade03c639..5d0415d25b 100644
--- a/aio/content/guide/ngmodule-faq.md
+++ b/aio/content/guide/ngmodule-faq.md
@@ -1,12 +1,6 @@
-@title
-Angular 模块常见问题
-
-@intro
-对 @NgModule 常见问题的解答
-
-@description
-
+# NgModule FAQs
 
+# Angular 模块常见问题
 
 NgModules help organize an application into cohesive blocks of functionality.
 
@@ -33,164 +27,6 @@ These FAQs assume that you have read the [NgModules](guide/ngmodule) page.
 
 </div>
 
-
-
-Declarations
-
-声明(declarations)
-
-* [What classes should I add to _declarations_?](guide/ngmodule-faq#q-what-to-declare)
-
-  [我应该把哪些类加到_declarations_中？](guide/ngmodule-faq#q-what-to-declare)
-  
-* [What is a _declarable_?](guide/ngmodule-faq#q-declarable)
-
-  [什么是*可声明的*？](guide/ngmodule-faq#q-declarable)
-
-* [What classes should I _not_ add to _declarations_?](guide/ngmodule-faq#q-what-not-to-declare)
-
-  [我*不应该*把哪些类加到_declarations_中？](guide/ngmodule-faq#q-what-not-to-declare)
-  
-* [Why list the same component in multiple _NgModule_ properties?](guide/ngmodule-faq#q-why-multiple-mentions)
-
-  [为什么要把同一个组件列在*NgModule*的不同属性中？](guide/ngmodule-faq#q-why-multiple-mentions)
-  
-* [What does "Can't bind to 'x' since it isn't a known property of 'y'" mean?](guide/ngmodule-faq#q-why-cant-bind-to)
-
-  ["_Can't bind to 'x' since it isn't a known property of 'y'_"是什么意思？](guide/ngmodule-faq#q-why-cant-bind-to)
-
-Imports
-
-导入(imports)
-
-* [What should I import?](guide/ngmodule-faq#q-what-to-import)
-
-  [我应该导入什么？](guide/ngmodule-faq#q-what-to-import)
-
-* [Should I import _BrowserModule_ or _CommonModule_?](guide/ngmodule-faq#q-browser-vs-common-module)
-
-  [我应该导入_BrowserModule_还是_CommonModule_？](guide/ngmodule-faq#q-browser-vs-common-module)
-  
-* [What if I import the same module twice?](guide/ngmodule-faq#q-reimport)
-
-  [如果我两次导入了同一个模块会怎么样？](guide/ngmodule-faq#q-reimport)
-
-Exports
-
-导出(exports)
-
-* [What should I export?](guide/ngmodule-faq#q-what-to-export)
-
-  [我应该导出什么？](guide/ngmodule-faq#q-what-to-export)
-
-* [What should I *not* export?](guide/ngmodule-faq#q-what-not-to-export)
-
-  [我*不*应该导出什么？](guide/ngmodule-faq#q-what-not-to-export)
-  
-* [Can I re-export imported classes and modules?](guide/ngmodule-faq#q-re-export)
-
-  [我能再次导出(re-export)所导入的类和模块吗？](guide/ngmodule-faq#q-re-export)
-  
-* [What is the _forRoot_ method?](guide/ngmodule-faq#q-for-root)
-
-  [_forRoot_方法是什么？](guide/ngmodule-faq#q-for-root)
-
-Service Providers
-
-服务提供商(providers)
-
-* [Why is a service provided in a feature module visible everywhere?](guide/ngmodule-faq#q-module-provider-visibility)
-
-  [为什么特性模块中提供的服务是到处可见的？](guide/ngmodule-faq#q-module-provider-visibility)
-
-* [Why is a service provided in a _lazy-loaded_ module visible only to that module?](guide/ngmodule-faq#q-lazy-loaded-module-provider-visibility)
-
-  [为什么*惰性加载*模块中的服务提供商只对那个模块本身可见？](guide/ngmodule-faq#q-lazy-loaded-module-provider-visibility)
-
-* [What if two modules provide the same service?](guide/ngmodule-faq#q-module-provider-duplicates)
-
-  [如果两个模块提供了*同一个*服务会怎样？](guide/ngmodule-faq#q-module-provider-duplicates)
-  
-* [How do I restrict service scope to a module?](guide/ngmodule-faq#q-component-scoped-providers)
-
-  [如何把服务的范围限制在某个模块中？](guide/ngmodule-faq#q-component-scoped-providers)
-
-* [Should I add app-wide providers to the root _AppModule_ or the root _AppComponent_?](guide/ngmodule-faq#q-root-component-or-module)
-
-  [我应该把全应用级的提供商添加到根模块*AppModule*还是根组件*AppComponent*？](guide/ngmodule-faq#q-root-component-or-module)
-
-* [Should I add other providers to a module or a component?](guide/ngmodule-faq#q-component-or-module)
-
-  [我应该把其它提供商添加到模块中还是组件中？](guide/ngmodule-faq#q-component-or-module)
-
-* [Why is it bad if _SharedModule_ provides a service to a lazy-loaded module?](guide/ngmodule-faq#q-why-bad)
-
-  [为什么让*SharedModule*为惰性加载模块提供服务是个馊主意？](guide/ngmodule-faq#q-why-bad)
-  
-* [Why does lazy loading create a child injector?](guide/ngmodule-faq#q-why-child-injector)
-
-  [为什么惰性加载模块要创建一个子注入器？](guide/ngmodule-faq#q-why-child-injector)
-
-* [How can I tell if a module or service was previously loaded?](guide/ngmodule-faq#q-is-it-loaded)
-
-  [我要怎样才能知道一个模块或服务已经被加载过？](guide/ngmodule-faq#q-is-it-loaded)
-
-
-Entry Components
-
-入口组件
-
-* [What is an _entry component_?](guide/ngmodule-faq#q-entry-component-defined)
-
-  [什么是*入口组件*？](guide/ngmodule-faq#q-entry-component-defined)
-
-* [What is the difference between a _bootstrap_ component and an _entry component_?](guide/ngmodule-faq#q-bootstrap_vs_entry_component)
-
-  [*引导*组件和*入口*组件有什么不同？](guide/ngmodule-faq#q-bootstrap_vs_entry_component)
-
-* [When do I add components to _entryComponents_?](guide/ngmodule-faq#q-when-entry-components)
-
-  [什么情况下我应该把组件添加到*entryComponent*中？](guide/ngmodule-faq#q-when-entry-components)
-
-* [Why does Angular need _entryComponents_?](guide/ngmodule-faq#q-why-entry-components)
-
-  [为什么Angular需要_entryComponents_？](guide/ngmodule-faq#q-why-entry-components)
-
-
-General
-
-一般问题
-
-* [What kinds of modules should I have and how should I use them?](guide/ngmodule-faq#q-module-recommendations)
-
-  [我需要哪些类型的模块？我应该如何使用它们？](guide/ngmodule-faq#q-module-recommendations)
-
-* [What's the difference between Angular and JavaScript Modules?](guide/ngmodule-faq#q-ng-vs-js-modules)
-
-  [Angular模块和JavaScript模块有什么不同？](guide/ngmodule-faq#q-ng-vs-js-modules)
-
-* [How does Angular find components, directives, and pipes in a template?](guide/ngmodule-faq#q-template-reference)
-
-  [Angular如何是在模板中查找组件、指令和管道的？](guide/ngmodule-faq#q-template-reference)
-
-* [What is a "template reference"?](guide/ngmodule-faq#q-template-reference)
-
-  [什么是“模板引用”？](guide/ngmodule-faq#q-template-reference)
-  
-* [What is the Angular compiler?](guide/ngmodule-faq#q-angular-compiler)
-
-  [什么是Angular编译器（Compiler）？](guide/ngmodule-faq#q-angular-compiler)
-
-* [Can you summarize the NgModule API?](guide/ngmodule-faq#q-ngmodule-api)
-
-  [你能总结一下_NgModule_ API吗？](guide/ngmodule-faq#q-ngmodule-api)
-
-
-
-<hr/>
-
-
-
 {@a q-what-to-declare}
 
 
@@ -619,7 +455,7 @@ The `forRoot` static method is a convention that makes it easy for developers to
 
 The `RouterModule.forRoot` method is a good example.
 Apps pass a `Routes` object to `RouterModule.forRoot` in order to configure the app-wide `Router` service with routes.
-`RouterModule.forRoot` returns a [ModuleWithProviders](api/core/index/ModuleWithProviders-interface).
+`RouterModule.forRoot` returns a [ModuleWithProviders](api/core/ModuleWithProviders).
 You add that result to the `imports` list of the root `AppModule`.
 
 `RouterModule.forRoot`就是一个很好的例子。
@@ -919,9 +755,9 @@ More generally, [prefer registering providers in modules](guide/ngmodule-faq#q-c
 
 更一般地说，[优先把提供商注册进模块中](guide/ngmodule-faq#q-component-or-module)，而不是组件中。
 
-### Discussion
+<h3 class="no-toc">Discussion</h3>
 
-### 讨论
+<h3 class="no-toc">讨论</h3>
 
 Angular registers all startup module providers with the application root injector.
 The services created from root injector providers are available to the entire application.
@@ -1129,7 +965,7 @@ Once the application begins, the app root injector is closed to new providers.
 
 Time passes and application logic triggers lazy loading of a module.
 Angular must add the lazy-loaded module's providers to an injector somewhere.
-It can't added them to the app root injector because that injector is closed to new providers.
+It can't add them to the app root injector because that injector is closed to new providers.
 So Angular creates a new child injector for the lazy-loaded module context.
 
 之后，应用逻辑开始惰性加载某个模块。
@@ -2471,7 +2307,7 @@ Here's an _NgModule_ class with imports, exports, and declarations.
 
 
 
-Of course you use _JavaScript_ modules to write _Angular_ modules as seen in the complete `contact.module.ts` file:
+Of course you use _JavaScript_ modules to write NgModules as seen in the complete `contact.module.ts` file:
 
 当然，我们同样得用*JavaScript*模块来写*Angular模块*，就像在最终版`contact.module.ts`文件中所见到的：
 
diff --git a/aio/content/guide/ngmodule.md b/aio/content/guide/ngmodule.md
index 27c9a16864..c44931c4f1 100644
--- a/aio/content/guide/ngmodule.md
+++ b/aio/content/guide/ngmodule.md
@@ -1,12 +1,6 @@
-@title
-Angular模块 (NgModule)
-
-@intro
-用 @NgModule 定义应用中的模块
-
-@description
-
+# NgModules
 
+# Angular模块 (NgModule)
 
 **NgModules** help organize an application into cohesive blocks of functionality.
 <!-- CF: "app" and "application" are used interchangeably throughout this page.
@@ -29,7 +23,7 @@ Angular 模块是带有 **@NgModule** 装饰器函数的_类_。
   本章还会涉及到更多选项。
 
 Before reading this page, read the
-[The Root Module](guide/appmodule) page, which introduces NgModules and the essentials
+[The Root Module](guide/bootstrapping) page, which introduces NgModules and the essentials
 of creating and maintaining a single root `AppModule` for the entire application.
 
 请先阅读[根模块](guide/appmodule)一章，那里介绍过 Angular 模块，以及如何为整个应用创建和维护单一的*根*`AppModule`类。
@@ -38,19 +32,7 @@ This page covers NgModules in greater depth.
 
 本章的解释更加详尽，正如下面的目录所示。
 
-## Table of Contents
-
-## 目录
-
-
-<!-- CF: The titling for tables of contents in the advanced chapters is inconsistent:
-
-* some are titled "Contents" while others are titled "Table of Contents" (should probably be sentence case as it's an H2
-* some headings are H2, some are H3
-* some pages don't have tables of contents
-
-I didn't make changes here as I'm not sure what the correct style is.
--->
+<!-- CF: See my comment in the "Resolve directive conflicts" section below proposing renaming or reorganizing that section.
 
 * [Angular modularity](guide/ngmodule#angular-modularity "Add structure to the app with NgModule")
 
@@ -60,9 +42,9 @@ I didn't make changes here as I'm not sure what the correct style is.
 
   [应用的根模块](guide/ngmodule#root-module "任何应用都需要的启动模块")
 
-* [Bootstrap](guide/ngmodule#bootstrap "Launch the app in a browser with the root module as the entry point") the root module
+* [Bootstrap the root module](guide/ngmodule#bootstrap "Launch the app in a browser with the root module as the entry point")
 
-  [引导](guide/ngmodule#bootstrap "在浏览器中把根模块作为入口点来启动应用")根模块
+  [引导根模块](guide/ngmodule#bootstrap "在浏览器中把根模块作为入口点来启动应用")
 
 * [Declarations](guide/ngmodule#declarations "Declare the components, directives, and pipes that belong to a module")
 
@@ -84,9 +66,9 @@ I didn't make changes here as I'm not sure what the correct style is.
 
   [特性模块](guide/ngmodule#feature-modules "把应用分割成一些特性模块")
   
-* [Lazy loaded modules](guide/ngmodule#lazy-load "Load modules asynchronously") with the router
+* [Lazy loaded modules with the router](guide/ngmodule#lazy-load "Load modules asynchronously")
 
-  通过路由器[惰性加载模块](guide/ngmodule#lazy-load "惰性加载模块")
+  [用路由器惰性加载模块](guide/ngmodule#lazy-load "惰性加载模块")
   
 * [Shared modules](guide/ngmodule#shared-module "Create modules for commonly used components, directives, and pipes")
 
@@ -104,13 +86,16 @@ I didn't make changes here as I'm not sure what the correct style is.
 
   [禁止重复导入 _CoreModule_](guide/ngmodule#prevent-reimport "如果惰性加载模块导入了核心模块，就会出问题")
 
+<!--
 * [NgModule metadata properties](guide/ngmodule#ngmodule-properties "A technical summary of the @NgModule metadata properties")
-<!-- CF: This link goes to the top of this page. I would expect it to go to an "NgModule metadata properties"
+ CF: This link goes to the top of this page. I would expect it to go to an "NgModule metadata properties"
  section at the end of this page, but that section doesn't exist. -->
 
   [NgModule 元数据的属性](guide/ngmodule#ngmodule-properties "对@NgModule元数据属性的技术性总结")
 
-### 在线例子
+#### Live examples
+
+#### 在线例子
 
 This page explains NgModules through a progression of improvements to a sample with a "Tour of Heroes" theme. Here's an index to live examples at key moments in the evolution of the sample:
 
@@ -136,7 +121,7 @@ This page explains NgModules through a progression of improvements to a sample w
 
   <live-example>最终版</live-example>
 
-### Frequently asked questions (FAQs)
+#### Frequently asked questions (FAQs)
 
 ### 常见问题
 
@@ -144,7 +129,7 @@ This page covers NgModule concepts in a tutorial fashion.
 
 本章涵盖了英雄指南下的 Angular 模块概念。
 
-The companion [NgModule FAQs](cookbook/ngmodule-faq "NgModule FAQs") cookbook
+The companion [NgModule FAQs](guide/ngmodule-faq "NgModule FAQs") guide
 offers answers to specific design and implementation questions.
 Read this page before reading those FAQs.
 
@@ -170,9 +155,9 @@ Modules are a great way to organize an application and extend it with capabiliti
 
 Many Angular libraries are modules (such as `FormsModule`, `HttpModule`, and `RouterModule`).
 Many third-party libraries are available as NgModules (such as
-<a href="https://material.angular.io/" target="_blank">Material Design</a>,
-<a href="http://ionicframework.com/" target="_blank">Ionic</a>,
-<a href="https://github.com/angular/angularfire2" target="_blank">AngularFire2</a>).
+<a href="https://material.angular.io/">Material Design</a>,
+<a href="http://ionicframework.com/">Ionic</a>,
+<a href="https://github.com/angular/angularfire2">AngularFire2</a>).
 
 很多 Angular 库都是模块，例如：`FormsModule`、`HttpModule`、`RouterModule`。
   很多第三方库也封装成了 Angular 模块，例如：<a href="https://material.angular.io/" target="_blank">Material Design</a>、
@@ -240,7 +225,7 @@ Later in this page, you'll read about this process. For now, you'll start with t
 
 
 
-## _AppModule_: the application root module
+## The root _AppModule_
 
 ## _AppModule_ - 应用的根模块
 
@@ -320,13 +305,14 @@ This page describes two options, both targeting the browser.
 针对不同的平台，Angular 提供了很多引导选项。
 本章我们只讲两个选项，都是针对浏览器平台的。
 
-### Dynamic bootstrapping with the just-in-time (JIT) compiler
+### Compile just-in-time (JIT)
 
-### 通过即时 (JiT) 编译器动态引导
-In the first, _dynamic_ option, the [Angular compiler](cookbook/ngmodule-faq#q-angular-compiler "About the Angular Compiler")
+### 即时 (JiT) 编译
+
+In the first, _dynamic_ option, the [Angular compiler](guide/ngmodule-faq#q-angular-compiler "About the Angular Compiler")
 compiles the application in the browser and then launches the app.
 
-先看看_动态_选项，[Angular 编译器](cookbook/ngmodule-faq#q-angular-compiler "关于 Angular 编译器")在浏览器中编译并引导该应用。
+先看看_动态_选项，[Angular 编译器](guide/ngmodule-faq#q-angular-compiler "关于 Angular 编译器")在浏览器中编译并引导该应用。
 
 
 <code-example path="ngmodule/src/main.ts" title="src/main.ts (dynamic)" linenums="false">
@@ -339,11 +325,11 @@ The samples in this page demonstrate the dynamic bootstrapping approach.
 
 这里的例子演示进行动态引导的方法。
 
-<live-example embedded plnkr="minimal.0" img="devguide/ngmodule/minimal-plunker.png">Try the live example.</live-example>
+<live-example embedded plnkr="minimal.0" img="guide/ngmodule/minimal-plunker.png">Try the live example.</live-example>
 
 <live-example embedded plnkr="minimal.0" img="devguide/ngmodule/minimal-plunker.png">试试在线例子。</live-example>
 
-### Static bootstrapping with the ahead-of-time (AOT) compiler
+### Compile ahead-of-time (AOT)
 
 ### 使用预编译器 (AoT - Ahead-Of-Time) 进行静态引导
 
@@ -453,12 +439,6 @@ Import the `HighlightDirective` class and add it to the module's `declarations`
 
 </code-example>
 
-
-
-### Add a component
-
-### 添加组件
-
 Refactor the title into its own `TitleComponent`.
 The component's template binds to the component's `title` and `subtitle` properties like this:
 
@@ -634,7 +614,7 @@ More accurately, `NgIf` is declared in `CommonModule` from `@angular/common`.
 
 `CommonModule`提供了很多应用程序中常用的指令，包括`NgIf`和`NgFor`等。
 
-`BrowserModule` imports `CommonModule` and [re-exports](cookbook/ngmodule-faq#q-re-export) it.
+`BrowserModule` imports `CommonModule` and [re-exports](guide/ngmodule-faq#q-re-export) it.
 The net effect is that an importer of `BrowserModule` gets `CommonModule` directives automatically.
 
 `BrowserModule`导入了`CommonModule`并且[_重新导出_](cookbook/ngmodule-faq#q-re-export)了它。
@@ -658,9 +638,9 @@ a form component that imports form support from the Angular `FormsModule`.
 
 要解释这一点，我们可以再加入`ContactComponent`组件，它是一个表单组件，从 Angular 的`FormsModule`中导入了表单支持。
 
-### Add the _ContactComponent_
+<h3 class="no-toc">Add the _ContactComponent_</h3>
 
-### 添加 _ContactComponent_
+<h3 class="no-toc">添加 _ContactComponent_</h3>
 
 [Angular forms](guide/forms) are a great way to manage user data entry.
 
@@ -676,13 +656,13 @@ implemented with Angular forms in the [template-driven form](guide/forms#templat
 
 
 
-### Angular form styles
+<h3 class="no-toc">Angular form styles</h3>
 
 ### Angular 表单的风格
 
 You can write Angular form components in
 template-driven or
-[reactive](cookbook/dynamic-form) style.
+[reactive](guide/dynamic-form) style.
 <!-- CF: this link goes to a page titled "Dynamic Forms". Should the link text be "dynamic" instead of "reactive"? -->
 
 我们写 Angular 表单组件时，可以使用[_模板驱动式表单_](guide/forms)，
@@ -786,7 +766,9 @@ form features such as validation aren't yet available.
 退一步说，即使 Angular 有办法识别`ngModel`，`ContactComponent`也不会表现的像 Angular 表单，
 因为本组件表单的表单相关的特性（例如有效性验证）还不可用。
 
-### Import the FormsModule
+<h3 class="no-toc">Import the FormsModule</h3>
+
+<h3 class="no-toc">导入 FormsModule</h3>
 
 ### 导入`FormsModule`
 
@@ -833,7 +815,7 @@ Components, directives, and pipes belong to _one module only_.
 {@a declare-pipe}
 
 
-### Declare the contact component, directive, and pipe
+<h3 class="no-toc">Declare the contact component, directive, and pipe</h3>
 
 ### 声明联系人的组件、指令和管道
 
@@ -883,9 +865,9 @@ You'll learn more about that issue later in this page, in [Resolve directive con
 
 
 
-### Provide the _ContactService_
+<h3 class="no-toc">Provide the _ContactService_</h3>
 
-### 提供 _ContactService_
+<h3 class="no-toc">提供 _ContactService_</h3>
 
 The `ContactComponent` displays contacts retrieved by the `ContactService`,
 which Angular injects into its constructor.
@@ -925,12 +907,12 @@ Now you can inject `ContactService` (like `UserService`) into any component in t
 
 
 
-#### Application-scoped providers
+<h3 class="no-toc">Application-scoped providers</h3>
 
-#### 全应用范围的提供商
+<h3 class="no-toc">全应用范围的提供商</h3>
 
-The `ContactService` provider is _application_-scoped because Angular
-registers a module's `providers` with the application's *root injector*.
+  The `ContactService` provider is _application_-scoped because Angular
+  registers a module's `providers` with the application's *root injector*.
 
 `ContactService`的提供商是_全应用_范围的，这是因为 Angular 使用该应用的**根注入器**注册模块的`providers`。
 
@@ -964,8 +946,8 @@ Only Contact components should import the `ContactService` type.
     要想注入`ContactService`，你得先导入它的_类型_。
     而只有联系人组件才会导入`ContactService`_类型_。
 
-Read more in the [How do I restrict service scope to a module?](cookbook/ngmodule-faq#q-component-scoped-providers) section
-of the [NgModule FAQs](cookbook/ngmodule-faq) page.
+Read more in the [How do I restrict service scope to a module?](guide/ngmodule-faq#q-component-scoped-providers) section
+of the [NgModule FAQs](guide/ngmodule-faq) page.
 
 在[NgModule常见问题](cookbook/ngmodule-faq)页的[如何把服务的范围限制在一个模块中](cookbook/ngmodule-faq#q-component-scoped-providers)一节中可以了解更多。
 
@@ -974,9 +956,9 @@ of the [NgModule FAQs](cookbook/ngmodule-faq) page.
 
 
 
-### Run the app
+<h3 class="no-toc">Run the app</h3>
 
-### 运行该应用
+<h3 class="no-toc">运行该应用</h3>
 
 Everything is in place to run the application with its contact editor.
 
@@ -1046,10 +1028,7 @@ The app file structure looks like this:
 
 
 Try the example:
-
-试试这个例子：
-
-<live-example embedded plnkr="contact.1b" img="devguide/ngmodule/contact-1b-plunker.png"></live-example>
+试试这个例子：<live-example embedded plnkr="contact.1b" img="guide/ngmodule/contact-1b-plunker.png"></live-example>
 
 
 {@a resolve-conflicts}
@@ -1306,8 +1285,8 @@ Before `ContactComponent` can bind with `[(ngModel)]`, its `ContactModule` must
 
 
 You also replaced `BrowserModule` by `CommonModule`, for reasons explained in the
-[Should I import BrowserModule or CommonModule?](cookbook/ngmodule-faq#q-browser-vs-common-module)
-section of the [NgModule FAQs](cookbook/ngmodule-faq) page.
+[Should I import BrowserModule or CommonModule?](guide/ngmodule-faq#q-browser-vs-common-module)
+section of the [NgModule FAQs](guide/ngmodule-faq) page.
 
 我们还用`CommonModule`替换了`BrowserModule`，其中缘由参见[这条常见问题](cookbook/ngmodule-faq#q-browser-vs-common-module)。
 
@@ -1421,7 +1400,7 @@ Try this `ContactModule` version of the sample.
 
 试试范例的`ContactModule`版。
 
-<live-example embedded plnkr="contact.2" img="devguide/ngmodule/contact-2-plunker.png">Try the live example.</live-example>
+<live-example embedded plnkr="contact.2" img="guide/ngmodule/contact-2-plunker.png">Try the live example.</live-example>
 
 <live-example embedded plnkr="contact.2" img="devguide/ngmodule/contact-2-plunker.png">试试在线例子</live-example>
 
@@ -1450,12 +1429,11 @@ Their specifics aren't important to the story and this page doesn't discuss ever
 
 
 Examine and download the complete source for this version from the
-<live-example plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">live example.</live-example>
+<live-example plnkr="pre-shared.3" img="guide/ngmodule/v3-plunker.png">live example.</live-example>
 
 到<live-example plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">在线例子</live-example>
 试用并下载当前版本的完整代码。
 
-
 </div>
 
 
@@ -1705,8 +1683,8 @@ Angular doesn't recognize them but Angular developers do.
 当需要为根模块和特性模块分别提供不同的`导入`值时，***forRoot***和***forChild***是约定俗成的方法名。
 虽然 Angular 无法识别它们，但是 Angular 开发人员可以。
 
-[Follow this convention](cookbook/ngmodule-faq#q-for-root) if you write a similar module
-that has both shared [declarables](cookbook/ngmodule-faq#q-declarable) and services.
+[Follow this convention](guide/ngmodule-faq#q-for-root) if you write a similar module
+that has both shared [declarables](guide/ngmodule-faq#q-declarable) and services.
 
 当你要写类似的模块，来为根模块和特性模块分别导出一些[_声明_](cookbook/ngmodule-faq#q-declarable)和服务时，请[遵循这个约定](cookbook/ngmodule-faq#q-for-root)。
 
@@ -1851,7 +1829,7 @@ The `CrisisModule` is much the same.
 
 `CrisisModule`和本模块非常像，我们不再赘述。
 
-<live-example embedded plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">试试在线例子。</live-example>
+<live-example embedded plnkr="pre-shared.3" img="guide/ngmodule/v3-plunker.png">试试在线例子。</live-example>
 
 
 {@a shared-module}
@@ -1986,7 +1964,7 @@ and only one provider of it.
 
 `UserService` is an application-wide singleton.
 You don't want each module to have its own separate instance.
-Yet there is [a real danger](cookbook/ngmodule-faq#q-why-it-is-bad) of that happening
+Yet there is [a real danger](guide/ngmodule-faq#q-why-bad) of that happening
 <!-- CF: This link goes to the top of the NgModule FAQs page.
 It looks like it is supposed to go to a specific question/section within the page. -->
 if the `SharedModule` provides the `UserService`.
@@ -2097,9 +2075,9 @@ whether that component is eagerly or lazily loaded.
 
 
 
-#### Why bother?
+<h3 class="no-toc">Why bother?</h3>
 
-#### 没必要？
+<h3 class="no-toc">没必要？</h3>
 
 This scenario is clearly contrived.
 The app is too small to worry about a single service file and a tiny, one-time component.
@@ -2262,7 +2240,7 @@ A module that adds providers to the application can offer a facility for configu
 
 By convention, the `forRoot` static method both provides and configures services at the same time.
 It takes a service configuration object and returns a
-[ModuleWithProviders](api/core/index/ModuleWithProviders-interface), which is
+[ModuleWithProviders](api/core/ModuleWithProviders), which is
 a simple object with the following properties:
 
 
@@ -2375,7 +2353,7 @@ Remember to _import_ the result; don't add it to any other `@NgModule` list.
 ## 禁止多次导入*CoreModule*
 
 Only the root `AppModule` should import the `CoreModule`.
-[Bad things happen](cookbook/ngmodule-faq#q-why-it-is-bad) if a lazy-loaded module imports it.
+[Bad things happen](guide/ngmodule-faq#q-why-bad) if a lazy-loaded module imports it.
 <!-- CF: Again, this link goes to the top of the NgModule FAQs page.
 It looks like it is supposed to go to a specific question/section within the page. -->
 
@@ -2436,7 +2414,7 @@ Angular 创建一个惰性加载模块，它具有自己的注入器，它是根
 该构造函数检测到存在`parentModule`，于是抛出一个错误。
 
 
-### Conclusion
+## Conclusion
 
 ### 总结
 
@@ -2444,17 +2422,17 @@ You made it! You can examine and download the complete source for this final ver
 
 完工！你可以到下面的在线例子中试验它，并下载最终版本的全部源码。
 
-<live-example embedded  img="devguide/ngmodule/final-plunker.png"></live-example>
+<live-example embedded  img="guide/ngmodule/final-plunker.png"></live-example>
 
 
-### Frequently asked questions
+## Frequently asked questions
 
 ### 常见问题 (FAQ) 
 
 Now that you understand NgModules, you may be interested
-in the companion [NgModule FAQs](cookbook/ngmodule-faq "NgModule FAQs") page
+in the companion [NgModule FAQs](guide/ngmodule-faq "NgModule FAQs") page
 with its ready answers to specific design and implementation questions.
 
 现在，你已经理解了 Angular 的模块。可能你还会对烹饪宝典中的
 [Angular 模块常见问题](cookbook/ngmodule-faq "Angular 模块常见问题")感兴趣，
-它解答了很多关于设计和实现方面的问题。
\ No newline at end of file
+它解答了很多关于设计和实现方面的问题。
diff --git a/aio/content/guide/npm-packages.md b/aio/content/guide/npm-packages.md
index f50fcb187a..9efbca402a 100644
--- a/aio/content/guide/npm-packages.md
+++ b/aio/content/guide/npm-packages.md
@@ -1,14 +1,9 @@
-@title
-npm 包
-
-@intro
-推荐的 npm 包以及如何指定所依赖的包
-
-@description
+# Npm Packages
 
+# npm 包
 
 Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages.
-These packages are maintained and installed with the Node Package Manager (<a href="https://docs.npmjs.com/" target="_blank">npm</a>).
+These packages are maintained and installed with the Node Package Manager (<a href="https://docs.npmjs.com/">npm</a>).
 
 Angular应用程序以及Angular本身都依赖于很多第三方包(包括Angular自己)提供的特性和功能。
 这些包由Node包管理器(<a href="https://docs.npmjs.com/" target="_blank">npm</a>)负责安装和维护。
@@ -22,7 +17,7 @@ Node.js and npm are essential to Angular development.
 
 Node.js和npm是做Angular开发的基础。
 
-<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
+<a href="https://docs.npmjs.com/getting-started/installing-node" title="Installing Node.js and updating npm">
 Get them now</a> if they're not already installed on your machine.
 
 如果你的电脑上还没有装过，请<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">立即获取它</a>！
@@ -45,7 +40,7 @@ you already have projects running on your machine that use other versions of nod
 
 
 
-During [Setup](guide/setup), a <a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a>
+During [Setup](guide/setup), a <a href="https://docs.npmjs.com/files/package.json">package.json</a>
 file is installed with a comprehensive starter set of
 packages as specified in the `dependencies` and `devDependencies` sections.
 
@@ -161,7 +156,7 @@ This package also includes the `bootstrapStatic()` method for bootstrapping appl
 ***@angular/platform-browser*** - 与DOM和浏览器相关的每样东西，特别是帮助往DOM中渲染的那部分。
 这个包还包含bootstrapStatic方法，用来引导那些在产品构建时需要离线预编译模板的应用程序。
 
-***@angular/platform-browser-dynamic*** : Includes [Providers](api/core/index/Provider-type-alias) and a [bootstrap](guide/ngmodule#bootstrap) method for applications that
+***@angular/platform-browser-dynamic*** : Includes [Providers](api/core/Provider) and a [bootstrap](guide/ngmodule#bootstrap) method for applications that
 compile templates on the client. Don’t use offline compilation.
 Use this package for bootstrapping during development and for bootstrapping plunker samples.
 
@@ -265,7 +260,6 @@ without waiting for Angular updates.
 ***angular-in-memory-web-api*** : An Angular-supported library that simulates a remote server's web api 
 without requiring an actual server or real HTTP calls. 
 Good for demos, samples, and early stage development (before you even have a server).
-Read about it in the [HTTP Client](guide/server-communication#in-mem-web-api) page.
 
 ***angular-in-memory-web-api*** - 一个Angular的支持库，它能模拟一个远端服务器的Web API，而不需要依赖一个真实的服务器或发起真实的HTTP调用。
 对演示、文档范例和开发的早期阶段(那时候我们可能还没有服务器呢)非常有用。
@@ -306,7 +300,7 @@ the TypeScript language server, including the *tsc* TypeScript compiler.
 
 ***[typescript](https://www.npmjs.com/package/typescript)*** - TypeScript语言的服务器，包含了TypeScript编译器*tsc*。
 
-***@types/\**** : TypeScript definition files.
+***@types/\* *** : TypeScript definition files.
 Learn more about it in the [TypeScript Configuration](guide/typescript-configuration#typings) guide.
 
 ***@types/\**** - “TypeScript定义”文件管理器。
diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md
index a7da382e74..24deb783ec 100644
--- a/aio/content/guide/pipes.md
+++ b/aio/content/guide/pipes.md
@@ -1,12 +1,6 @@
-@title
-管道
-
-@intro
-管道可以在模板中转换显示的内容。
-
-@description
-
+# Pipes
 
+# 管道
 
 Every application starts out with what seems like a simple task: get data, transform them, and show them to users.
 Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket.
@@ -41,7 +35,6 @@ You can run the <live-example></live-example> in Plunker and download the code f
 试试<live-example>在线例子</live-example>。
 
 
-
 ## Using pipes
 
 ## 使用管道
@@ -72,7 +65,7 @@ Focus on the component's template.
 
 
 Inside the interpolation expression, you flow the component's `birthday` value through the
-[pipe operator](guide/template-syntax#pipe) ( | ) to the [Date pipe](api/common/index/DatePipe-pipe)
+[pipe operator](guide/template-syntax#pipe) ( | ) to the [Date pipe](api/common/DatePipe)
 function on the right. All pipes work this way.
 
 在这个插值表达式中，我们让组件的`birthday`值通过[管道操作符](guide/template-syntax#pipe)( | )流动到
@@ -117,7 +110,7 @@ Angular内置了一些管道，比如`DatePipe`、`UpperCasePipe`、`LowerCasePi
 
 
 
-Read more about these and many other built-in pipes in the [pipes topics](api/#!?query=pipe) of the
+Read more about these and many other built-in pipes in the [pipes topics](api?type=pipe) of the
 [API Reference](api); filter for entries that include the word "pipe".
 
 要学习更多内置管道的知识，参见[API参考手册](api/#!?apiFilter=pipe)，并用“pipe”为关键词对结果进行过滤。
@@ -199,8 +192,8 @@ As you click the button, the displayed date alternates between
 当我们点击按钮的时候，显示的日志会在“**<samp>04/15/1988</samp>**”和“**<samp>Friday, April 15, 1988</samp>**”之间切换。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle"></img>
+<figure>
+  <img src='generated/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle">
 </figure>
 
 
@@ -209,7 +202,7 @@ As you click the button, the displayed date alternates between
 
 
 
-Read more about the `DatePipe` format options in the [Date Pipe](api/common/index/DatePipe-pipe)
+Read more about the `DatePipe` format options in the [Date Pipe](api/common/DatePipe)
 API Reference page.
 
 要了解更多`DatePipes`的格式选项，请参阅[API文档](api/common/index/DatePipe-class)。
@@ -303,7 +296,7 @@ Your pipe has one such parameter: the `exponent`.
 
 
 
-### The *PipeTransform* interface
+## The *PipeTransform* interface
 
 ### *PipeTransform*接口
 
@@ -318,21 +311,16 @@ Technically, it's optional; Angular looks for and executes the `transform` metho
 
 </div>
 
-
-
 Now you need a component to demonstrate the pipe.
 
 现在，我们需要一个组件来演示这个管道。
 
 
 <code-example path="pipes/src/app/power-booster.component.ts" title="src/app/power-booster.component.ts" linenums="false">
-
 </code-example>
 
-
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/pipes/power-booster.png' alt="Power Booster"></img>
+<figure>
+  <img src='generated/images/guide/pipes/power-booster.png' alt="Power Booster">
 </figure>
 
 
@@ -352,8 +340,6 @@ Note the following:
 
 <div class="callout is-helpful">
 
-
-
 <header>
   Remember the declarations array
 </header>
@@ -402,8 +388,8 @@ your pipe and two-way data binding with `ngModel`.
 
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator"></img>
+<figure>
+  <img src='generated/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator">
 </figure>
 
 
@@ -425,11 +411,9 @@ Angular通过*变更检测*过程来查找绑定值的更改，并在每一次Ja
 
 Angular picks a simpler, faster change detection algorithm when you use a pipe.
 
-当我们使用管道时，Angular选用了一种简单、快速的变更检测算法。
+<h3 class="no-toc">No pipe</h3>
 
-### No pipe
-
-### 无管道
+<h3 class="no-toc">无管道</h3>
 
 In the next example, the component uses the default, aggressive change detection strategy to monitor and update
 its display of every hero in the `heroes` array. Here's the template:
@@ -462,9 +446,9 @@ If you added the ability to remove or change a hero, Angular would detect those
 `reset`按钮会把`heroes`替换成一个由原来的英雄组成的新数组，重置完之后，Angular就会更新显示。
 如果我们提供了删除或修改英雄的能力，Angular也会检测到那些更改，并更新显示。
 
-### Flying-heroes pipe
+<h3 class="no-toc"><i>FlyingHeroesPipe</i></h3>
 
-### “会飞的英雄”管道
+<h3 class="no-toc"><i>“会飞的英雄”管道（FlyingHeroesPipe）</i></h3>
 
 Add a `FlyingHeroesPipe` to the `*ngFor` repeater that filters the list of heroes to just those heroes who can fly.
 
@@ -533,8 +517,8 @@ code with checkbox switches and additional displays to help you experience these
 这个*飞行英雄*的例子用检查框和其它显示内容扩展了原有代码，来帮我们体验这些效果。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/pipes/flying-heroes-anim.gif' alt="Flying Heroes"></img>
+<figure>
+  <img src='generated/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes">
 </figure>
 
 
@@ -590,9 +574,9 @@ Before doing that, understand the difference between pure and impure, starting w
 
 在继续往下走之前，我们先理解一下*纯*和*非纯*之间的区别，从*纯*管道开始。
 
-### Pure pipes
+<h3 class="no-toc">Pure pipes</h3>
 
-### 纯管道
+<h3 class="no-toc">纯管道</h3>
 
 Angular executes a *pure pipe* only when it detects a *pure change* to the input value.
 A pure change is either a change to a primitive input value (`String`, `Number`, `Boolean`, `Symbol`)
@@ -639,7 +623,7 @@ a point that's discussed laterin this page.
 
 
 
-### Impure pipes
+<h3 class="no-toc">Impure pipes</h3>
 
 ### 非纯管道
 
@@ -659,7 +643,7 @@ An expensive, long-running pipe could destroy the user experience.
 {@a impure-flying-heroes}
 
 
-### An impure *FlyingHeroesPipe*
+<h3 class="no-toc">An impure <i>FlyingHeroesPipe</i></h3>
 
 ### 非纯版本的*FlyingHeroesPipe*
 
@@ -721,10 +705,8 @@ display updates as you add heroes, even when you mutate the `heroes` array.
   我们可以在<live-example></live-example>中确认，当我们输入新的英雄甚至修改#[code heroes]数组时，这个#[i 会飞的英雄]的显示也跟着更新了。
 
 
-<h3 id='async-pipe'>
-  The impure   <i>AsyncPipe</i>
-</h3>
-
+{@a async-pipe}
+<h3 class="no-toc">The impure <i>AsyncPipe</i></h3>
 
 
 <h3 id='async-pipe'>
@@ -768,9 +750,9 @@ and have to unsubscribe when it's destroyed
 这个Async管道节省了组件的样板代码。
 组件不用订阅这个异步数据源，而且不用在被销毁时取消订阅(如果订阅了而忘了反订阅容易导致隐晦的内存泄露)。
 
-### An impure caching pipe
+<h3 class="no-toc">An impure caching pipe</h3>
 
-### 一个非纯而且带缓存的管道
+<h3 class="no-toc">一个非纯而且带缓存的管道</h3>
 
 Write one more impure pipe, a pipe that makes an HTTP request.
 
@@ -783,7 +765,7 @@ If you're not careful, this pipe will punish the server with requests.
 如果我们不小心点，这个管道就会发起一大堆请求“攻击”服务器。
 
 In the following code, the pipe only calls the server when the request URL changes and it caches the server response.
-The code uses the [Angular http](guide/server-communication) client to retrieve data</span>:
+The code uses the [Angular http](guide/http) client to retrieve data</span>:
 
 我们确实得小心点。
 这个管道只有当所请求的URL发生变化时才会向服务器发起请求。它会缓存服务器的响应。
@@ -813,8 +795,8 @@ The component renders as the following:
 组件渲染起来是这样的：
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/pipes/hero-list.png' alt="Hero List"></img>
+<figure>
+  <img src='generated/images/guide/pipes/hero-list.png' alt="Hero List">
 </figure>
 
 
@@ -835,7 +817,7 @@ A breakpoint on the pipe's request for data shows the following:
 
   每个管道实例都只调用一次服务器。
 
-### *JsonPipe*
+<h3 class="no-toc"><i>JsonPipe</i></h3>
 
 In the previous code sample, the second `fetch` pipe binding demonstrates more pipe chaining.
 It displays the same hero data in JSON format by chaining through to the built-in `JsonPipe`.
@@ -860,7 +842,7 @@ It displays the same hero data in JSON format by chaining through to the built-i
 
 
 
-The [JsonPipe](api/common/index/JsonPipe-pipe)
+The [JsonPipe](api/common/JsonPipe)
 provides an easy way to diagnosis a mysteriously failing data binding or
 inspect an object for future binding.
 
@@ -874,7 +856,7 @@ inspect an object for future binding.
 {@a pure-pipe-pure-fn}
 
 
-### Pure pipes and pure functions
+<h3 class="no-toc">Pure pipes and pure functions</h3>
 
 ### 纯管道与纯函数
 
@@ -915,7 +897,7 @@ of your views.
 
 管道能很好的封装和共享的通用“值-显示”转换逻辑。我们可以像样式一样使用它们，把它们扔到模板表达式中，以提升视图的表现力和可用性。
 
-Explore Angular's inventory of built-in pipes in the [API Reference](api/#!?query=pipe).
+Explore Angular's inventory of built-in pipes in the [API Reference](api?type=pipe).
 Try writing a custom pipe and perhaps contributing it to the community.
 
 要浏览Angular的所有内置管道，请到[API参考手册](api/#!?query=pipe)。
@@ -1003,4 +985,4 @@ Angular开发组和一些有经验的Angular开发者强烈建议你：把你的
 If these performance and minification considerations don't apply to you, you can always create your own such pipes
 (similar to the [FlyingHeroesPipe](guide/pipes#impure-flying-heroes)) or find them in the community.
 
-如果你不需要顾虑这些性能和最小化问题，也可以创建自己的管道来实现这些功能(参考[FlyingHeroesPipe](guide/pipes#impure-flying-heroes)中的写法)或到社区中去找找。
\ No newline at end of file
+如果你不需要顾虑这些性能和最小化问题，也可以创建自己的管道来实现这些功能(参考[FlyingHeroesPipe](guide/pipes#impure-flying-heroes)中的写法)或到社区中去找找。
diff --git a/aio/content/guide/quickstart.md b/aio/content/guide/quickstart.md
index 214480ef6b..167449700e 100644
--- a/aio/content/guide/quickstart.md
+++ b/aio/content/guide/quickstart.md
@@ -1,117 +1,617 @@
-@description
+# QuickStart
+
+Good tools make application development quicker and easier to maintain than
+if you did everything by hand.
+
+The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool
+that can create a project, add files, and perform a variety of ongoing development tasks such
+as testing, bundling, and deployment.
+
+The goal in this guide is to build and run a simple Angular
+application in TypeScript, using the Angular CLI
+while adhering to the [Style Guide](guide/styleguide) recommendations that
+benefit _every_ Angular project.
+
+By the end of the chapter, you'll have a basic understanding of development with the CLI
+and a foundation for both these documentation samples and for real world applications.
+
+<!--
+
+You'll pursue these ends in the following high-level steps:
+
+1. [Set up](guide/cli-quickstart#devenv) the development environment.
+2. [Create](guide/cli-quickstart#create-proj) a new project and skeleton application.
+3. [Serve](guide/cli-quickstart#serve) the application.
+4. [Edit](guide/cli-quickstart#first-component) the application.
+
+-->
+
+And you can also <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a>
 
 
 
-Angular applications are made up of _components_.
-  A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:
-  
-Angular 应用是由*组件*组成的。
-  *组件*由 HTML 模板和组件类组成，组件类控制视图。下面是一个显示简单字符串的组件:
+<h2 id='devenv'>
+  Step 1. Set up the Development Environment
+</h2>
 
 
-<code-example path="quickstart/src/app/app.component.ts" title="src/app/app.component.ts" linenums="false">
+
+You need to set up your development environment before you can do anything.
+
+Install **[Node.js® and npm](https://nodejs.org/en/download/)**
+if they are not already on your machine.
+
+<div class="l-sub-section">
+
+
+
+**Verify that you are running at least node `6.9.x` and npm `3.x.x`**
+by running `node -v` and `npm -v` in a terminal/console window.
+Older versions produce errors, but newer versions are fine.
+
+</div>
+
+
+
+Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally.
+
+
+<code-example language="sh" class="code-shell">
+  npm install -g @angular/cli
 
 </code-example>
 
 
 
 
+<h2 id='create-proj'>
+  Step 2. Create a new project
+</h2>
+
+
+
+Open a terminal window.
+
+
+Generate a new project and skeleton application by running the following commands:
+
+
+<code-example language="sh" class="code-shell">
+  ng new my-app
+
+</code-example>
+
+
+
 <div class="l-sub-section">
 
 
 
-Try this **<live-example noDownload>QuickStart example on Plunker</live-example>** without installing anything.
-Try it locally with the [***QuickStart seed***](guide/guide/setup "Setup for local development with the QuickStart seed")
-and prepare for development of a real Angular application.
-
-试试这个**<live-example noDownload>Plunker上的QuickStart范例</live-example>**。
-也可以在本地使用[***QuickStart种子工程***](guide/guide/setup "Setup for local development with the QuickStart seed")来为开发真实的Angular应用做好准备。
+Patience please.
+It takes time to set up a new project, most of it spent installing npm packages.
 
 
 </div>
 
 
 
-Every component begins with an `@Component` [decorator](guide/glossary#decorator '"decorator" explained')
-function that takes a _metadata_ object. The metadata object describes how the HTML template and component class work together.
 
-每个组件都以`@Component`[装饰器](guide/glossary#!{_decorator} '"!{_decorator}" explained')函数开始，它接受一个_元数据_对象参数。该元素对象描述了 HTML 模板和组件类是如何一起工作的。
-
-The `selector` property tells Angular to display the component inside a custom `<my-app>` tag in the `index.html`.
-
-`selector`属性为 Angular 指定了在`index.html`中的自定义`<my-app>`标签里显示该组件。
+<h2 id='serve'>
+  Step 3: Serve the application
+</h2>
 
 
-<code-example path="quickstart/src/index.html" region="my-app" title="index.html (inside &lt;body&gt;)" linenums="false">
+
+Go to the project directory and launch the server.
+
+
+<code-example language="sh" class="code-shell">
+  cd my-app
+  ng serve --open
 
 </code-example>
 
 
 
-The `template` property defines a message inside an `<h1>` header.
-The message starts with "Hello" and ends with `{{name}}`,
-which is an Angular [interpolation binding](guide/guide/displaying-data) expression.
-At runtime, Angular replaces `{{name}}` with the value of the component's `name` property. 
-Interpolation binding is one of many Angular features you'll discover in this documentation.
+The `ng serve` command launches the server, watches your files,
+and rebuilds the app as you make changes to those files.
 
-`template`属性定义了`<h1>`标题里的一条消息。
-该消息以 “Hello” 开始，以 Angular [插值绑定](guide/guide/displaying-data)表达式`{{name}}`结束。
-在运行时，Angular 用组件的`name`属性值替换`{{name}}`。
-插值绑定是 Angular 的特征之一。你将在本文档中探索更多 Angular 的特征。
+Using the `--open` (or just `-o`) option will automatically open your browser
+on `http://localhost:4200/`.
+
+Your app greets you with a message:
 
 
-In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens.
-
-在这个例子中，把组件类的`name`属性从`'Angular'`改为`'World'`，看看会怎么样。
-
-
-<div class="callout is-helpful">
+<figure>
+  <img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!">
+</figure>
 
 
 
-<header>
-  A word about TypeScript
-</header>
+
+<h2 id='first-component'>
+  Step 4: Edit your first Angular component
+</h2>
 
 
 
-<header>
-  关于 TypeScript
-</header>
+The CLI created the first Angular component for you.
+This is the _root component_ and it is named `app-root`.
+You can find it in `./src/app/app.component.ts`.
+
+
+Open the component file and change the `title` property from _Welcome to app!!_ to _Welcome to My First Angular App!!_:
+
+
+<code-example path="cli-quickstart/src/app/app.component.ts" region="title" title="src/app/app.component.ts" linenums="false"></code-example>
 
 
 
-<p>
-  This example is written in <a href="http://www.typescriptlang.org/" target="_blank" title="TypeScript">TypeScript</a>, a superset of JavaScript. Angular
-  uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; <a href="cookbook/ts-to-js.html">this guide</a> explains how.
+The browser reloads automatically with the revised title. That's nice, but it could look better.
 
-</p>
+Open `src/app/app.component.css` and give the component some style.
+
+
+<code-example path="cli-quickstart/src/app/app.component.css" title="src/app/app.component.css" linenums="false"></code-example>
 
 
 
-<p>
-  本例是用 JavaScript 的一个超集 <a href="http://www.typescriptlang.org/" target="_blank" title="TypeScript">TypeScript</a> 编写的。
-  Angular 使用 TypeScript 是因为它的类型可以帮助工具提高开发者效率。你也可以用 JavaScript 编写 Angular 代码，参见<a href="cookbook/ts-to-js.html">本指南</a>。
-
-</p>
+<figure>
+  <img src='generated/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app">
+</figure>
 
 
 
+Looking good!
+
+
+
+## What's next?
+That's about all you'd expect to do in a "Hello, World" app.
+
+You're ready to take the [Tour of Heroes Tutorial](tutorial) and build
+a small application that demonstrates the great things you can build with Angular.
+
+Or you can stick around a bit longer to learn about the files in your brand new project.
+
+
+
+## Project file review
+
+An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
+
+The first file you should check out is `README.md`.
+It has some basic information on how to use CLI commands.
+Whenever you want to know more about how Angular CLI works make sure to visit
+[the Angular CLI repository](https://github.com/angular/angular-cli) and
+[Wiki](https://github.com/angular/angular-cli/wiki).
+
+Some of the generated files might be unfamiliar to you.
+
+
+
+### The `src` folder
+Your app lives in the `src` folder.
+All Angular components, templates, styles, images, and anything else your app needs go here.
+Any files outside of this folder are meant to support building your app.
+
+
+<div class='filetree'>
+  <div class='file'>src</div>
+  <div class='children'>
+    <div class='file'>app</div>
+    <div class='children'>
+      <div class='file'>app.component.css</div>
+      <div class='file'>app.component.html</div>
+      <div class="file">app.component.spec.ts</div>
+      <div class="file">app.component.ts</div>
+      <div class="file">app.module.ts</div>
+    </div>
+    <div class="file">assets</div>
+    <div class='children'>
+      <div class="file">.gitkeep</div>
+    </div>
+    <div class="file">environments</div>
+    <div class='children'>
+      <div class="file">environment.prod.ts</div>
+      <div class="file">environment.ts</div>
+    </div>
+    <div class="file">favicon.ico</div>
+    <div class="file">index.html</div>
+    <div class="file">main.ts</div>
+    <div class="file">polyfills.ts</div>
+    <div class="file">styles.css</div>
+    <div class="file">test.ts</div>
+    <div class="file">tsconfig.app.json</div>
+    <div class="file">tsconfig.spec.json</div>
+  </div>
 </div>
 
 
 
+<style>
+  td, th {vertical-align: top}
+</style>
+
+
+
+<table width="100%">
+  <col width="20%">
+  </col>
+  <col width="80%">
+  </col>
+  <tr>
+    <th>
+      File
+    </th>
+    <th>
+      Purpose
+    </th>
+  </tr>
+  <tr>
+    <td>
+
+      `app/app.component.{ts,html,css,spec.ts}`
+
+    </td>
+    <td>
+
+      Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test.
+      It is the **root** component of what will become a tree of nested components
+      as the application evolves.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `app/app.module.ts`
+
+    </td>
+    <td>
+
+      Defines `AppModule`, the [root module](guide/bootstrapping "AppModule: the root module") that tells Angular how to assemble the application.
+      Right now it declares only the `AppComponent`.
+      Soon there will be more components to declare.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `assets/*`
+
+    </td>
+    <td>
+
+      A folder where you can put images and anything else to be copied wholesale
+      when you build your application.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `environments/*`
+
+    </td>
+    <td>
+
+      This folder contains one file for each of your destination environments,
+      each exporting simple configuration variables to use in your application.
+      The files are replaced on-the-fly when you build your app.
+      You might use a different API endpoint for development than you do for production
+      or maybe different analytics tokens.
+      You might even use some mock services.
+      Either way, the CLI has you covered.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `favicon.ico`
+
+    </td>
+    <td>
+
+      Every site wants to look good on the bookmark bar.
+      Get started with your very own Angular icon.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `index.html`
+
+    </td>
+    <td>
+
+      The main HTML page that is served when someone visits your site.
+      Most of the time you'll never need to edit it.
+      The CLI automatically adds all `js` and `css` files when building your app so you
+      never need to add any `<script>` or `<link>` tags here manually.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `main.ts`
+
+    </td>
+    <td>
+
+      The main entry point for your app.
+      Compiles the application with the [JIT compiler](guide/glossary#jit)
+      and bootstraps the application's root module (`AppModule`) to run in the browser.
+      You can also use the [AOT compiler](guide/glossary#ahead-of-time-aot-compilation)
+      without changing any code by passing in `--aot` to `ng build` or `ng serve`.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `polyfills.ts`
+
+    </td>
+    <td>
+
+      Different browsers have different levels of support of the web standards.
+      Polyfills help normalize those differences.
+      You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
+      the [Browser Support guide](guide/browser-support) for more information.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `styles.css`
+
+    </td>
+    <td>
+
+      Your global styles go here.
+      Most of the time you'll want to have local styles in your components for easier maintenance,
+      but styles that affect all of your app need to be in a central place.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `test.ts`
+
+    </td>
+    <td>
+
+      This is the main entry point for your unit tests.
+      It has some custom configuration that might be unfamiliar, but it's not something you'll
+      need to edit.
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `tsconfig.{app|spec}.json`
+    </td>
+    <td>
+
+      TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
+      and for the unit tests (`tsconfig.spec.json`).
+
+    </td>
+  </tr>
+</table>
+
+### The root folder
+
+The `src/` folder is just one of the items inside the project's root folder.
+Other files help you build, test, maintain, document, and deploy the app.
+These files go in the root folder next to `src/`.
+
+
+<div class='filetree'>
+  <div class="file">my-app</div>
+  <div class='children'>
+    <div class="file">e2e</div>
+    <div class='children'>
+      <div class="file">app.e2e-spec.ts</div>
+      <div class="file">app.po.ts</div>
+      <div class="file">tsconfig.e2e.json</div>
+    </div>
+    <div class="file">node_modules/...</div>
+    <div class="file">src/...</div>
+    <div class="file">.angular-cli.json</div>
+    <div class="file">.editorconfig</div>
+    <div class="file">.gitignore</div>
+    <div class="file">karma.conf.js</div>
+    <div class="file">package.json</div>
+    <div class="file">protractor.conf.js</div>
+    <div class="file">README.md</div>
+    <div class="file">tsconfig.json</div>
+    <div class="file">tslint.json</div>
+  </div>
+</div>
+
+<style>
+  td, th {vertical-align: top}
+</style>
+
+
+
+<table width="100%">
+  <col width="20%">
+  </col>
+  <col width="80%">
+  </col>
+  <tr>
+    <th>
+      File
+    </th>
+    <th>
+      Purpose
+    </th>
+  </tr>
+  <tr>
+    <td>
+
+      `e2e/`
+
+    </td>
+    <td>
+
+      Inside `e2e/` live the end-to-end tests.
+      They shouldn't be inside `src/` because e2e tests are really a separate app that
+      just so happens to test your main app.
+      That's also why they have their own `tsconfig.e2e.json`.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `node_modules/`
+
+    </td>
+    <td>
+
+      `Node.js` creates this folder and puts all third party modules listed in
+      `package.json` inside of it.
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `.angular-cli.json`
+
+    </td>
+    <td>
+
+      Configuration for Angular CLI.
+      In this file you can set several defaults and also configure what files are included
+      when your project is built.
+      Check out the official documentation if you want to know more.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `.editorconfig`
+
+    </td>
+    <td>
+
+      Simple configuration for your editor to make sure everyone that uses your project
+      has the same basic configuration.
+      Most editors support an `.editorconfig` file.
+      See http://editorconfig.org for more information.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `.gitignore`
+
+    </td>
+    <td>
+
+      Git configuration to make sure autogenerated files are not commited to source control.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `karma.conf.js`
+
+    </td>
+    <td>
+
+      Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
+      used when running `ng test`.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `package.json`
+
+    </td>
+    <td>
+
+      `npm` configuration listing the third party packages your project uses.
+      You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `protractor.conf.js`
+
+    </td>
+    <td>
+
+      End-to-end test configuration for [Protractor](http://www.protractortest.org/),
+      used when running `ng e2e`.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `README.md`
+
+    </td>
+    <td>
+
+      Basic documentation for your project, pre-filled with CLI command information.
+      Make sure to enhance it with project documentation so that anyone
+      checking out the repo can build your app!
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `tsconfig.json`
+
+    </td>
+    <td>
+
+      TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
+
+    </td>
+  </tr>
+  <tr>
+    <td>
+
+      `tslint.json`
+
+    </td>
+    <td>
+
+      Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
+      [Codelyzer](http://codelyzer.com/), used when running `ng lint`.
+      Linting helps keep your code style consistent.
+
+    </td>
+  </tr>
+</table>
+
 <div class="l-sub-section">
 
+### Next Step
 
-
-### Next step
-    
-### 下一步
-
-Start [**learning Angular**](guide/learning-angular "Learning Angular").
-    
-开始[**学习 Angular**](guide/learning-angular "学习 Angular").
+If you're new to Angular, continue with the
+[tutorial](tutorial "Tour of Heroes tutorial").
+You can skip the "Setup" step since you're already using the Angular CLI setup.
 
 </div>
-
diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md
index be4ab0204d..44093de830 100644
--- a/aio/content/guide/reactive-forms.md
+++ b/aio/content/guide/reactive-forms.md
@@ -1,11 +1,6 @@
-@title
-响应式表单
-
-@intro
-使用FormBuilder、组合数组创建响应式表单。
-
-@description
+# Reactive Forms
 
+# 响应式表单
 
 _Reactive forms_ is an Angular technique for creating forms in a _reactive_ style.
 This guide explains reactive forms as you follow the steps to build a "Hero Detail Editor" form.
@@ -16,78 +11,6 @@ This guide explains reactive forms as you follow the steps to build a "Hero Deta
 
 {@a toc}
 
-
-## Contents
-
-## 目录
-
-* [Introduction to reactive forms](guide/reactive-forms#intro)
-
-  [响应式表单简介](guide/reactive-forms#intro)
-
-* [Setup](guide/reactive-forms#setup)
-
-  [准备工作](guide/reactive-forms#setup)
-
-* [Create a data model](guide/reactive-forms#data-model)
-
-  [创建数据模型](guide/reactive-forms#data-model)
-
-* [Create a _reactive forms_ component](guide/reactive-forms#create-component)
-
-  [创建*响应式表单*组件](guide/reactive-forms#create-component)
-
-* [Create its template file](guide/reactive-forms#create-template)
-
-  [创建模板文件](guide/reactive-forms#create-template)
-
-* [Import the _ReactiveFormsModule_](guide/reactive-forms#import)
-
-  [导入`ReactiveFormsModule`](guide/reactive-forms#import)
-
-* [Display the _HeroDetailComponent_](guide/reactive-forms#update)
-
-  [显示`HeroDetailComponent`](guide/reactive-forms#update)
-
-* [Add a FormGroup](guide/reactive-forms#formgroup)
-
-  [添加FormGroup](guide/reactive-forms#formgroup)
-
-* [Taking a look at the form model](guide/reactive-forms#json)
-
-  [表单模型概览](guide/reactive-forms#json)
-
-* [Introduction to _FormBuilder_](guide/reactive-forms#formbuilder)
-
-  [`FormBuilder`简介](guide/reactive-forms#formbuilder)
-
-* [Validators.required](guide/reactive-forms#validators)
-
-* [Nested FormGroups](guide/reactive-forms#grouping)
-
-  [嵌套的FormGroup](guide/reactive-forms#grouping)
-
-* [Inspect _FormControl_ properties](guide/reactive-forms#properties)
-
-  [`FormControl`的属性](guide/reactive-forms#properties)
-
-* [Set form model data using _setValue_ and _patchValue_](guide/reactive-forms#set-data)
-
-  [用`setValue`和`patchValue`设置表单的模型数据](guide/reactive-forms#set-data)
-
-* [Use _FormArray_ to present an array of _FormGroups_](guide/reactive-forms#form-array)
-
-  [用`FormArray`来表示`FormGroup`的数组](guide/reactive-forms#form-array)
-
-* [Observe control changes](guide/reactive-forms#observe-control)
-
-  [观察控件的变化](guide/reactive-forms#observe-control)
-
-* [Save form data](guide/reactive-forms#save)
-
-  [保存表单数据](guide/reactive-forms#save)
-
-
 Try the <live-example plnkr="final" title="Reactive Forms (final) in Plunker">Reactive Forms live-example</live-example>.
 
 试试<live-example plnkr="final" title="Reactive Forms (final) in Plunker">响应式表单的在线例子</live-example>。
@@ -122,11 +45,11 @@ They even have their own modules: the `ReactiveFormsModule` and the `FormsModule
 
 ### *响应式*表单
 
-Angular _reactive_ forms facilitate a _reactive style_ of programming 
+Angular _reactive_ forms facilitate a _reactive style_ of programming
 that favors explicit management of the data flowing between
-a non-UI _data model_ (typically retrieved from a server) and a 
-UI-oriented _form model_ that retains the states 
-and values of the HTML controls on screen. Reactive forms offer the ease 
+a non-UI _data model_ (typically retrieved from a server) and a
+UI-oriented _form model_ that retains the states
+and values of the HTML controls on screen. Reactive forms offer the ease
 of using reactive patterns, testing, and validation.
 
 Angular的*响应式*表单能让实现*响应式编程风格*更容易，这种编程风格更倾向于在非UI的*数据模型*（通常接收自服务器）之间显式的管理数据流，
@@ -134,42 +57,42 @@ Angular的*响应式*表单能让实现*响应式编程风格*更容易，这种
 响应式表单可以让使用响应式编程模式、测试和校验变得更容易。
 
 With _reactive_ forms, you create a tree of Angular form control objects
-in the component class and bind them to native form control elements in the 
-component template, using techniques described in this guide. 
+in the component class and bind them to native form control elements in the
+component template, using techniques described in this guide.
 
 使用*响应式*表单，我们可以在组件中创建表单控件的对象树，并使用本章中传授的技巧把它们绑定到组件模板中的原生表单控件元素上。
 
-You create and manipulate form control objects directly in the 
-component class. As the component class has immediate access to both the data 
-model and the form control structure, you can push data model values into 
-the form controls and pull user-changed values back out. The component can 
+You create and manipulate form control objects directly in the
+component class. As the component class has immediate access to both the data
+model and the form control structure, you can push data model values into
+the form controls and pull user-changed values back out. The component can
 observe changes in form control state and react to those changes.
 
 我们可以在组件类中直接创建和维护表单控件对象。由于组件类可以同时访问数据模型和表单控件结构，
 因此我们可以把表单模型值的变化推送到表单控件中，并把变化后的值拉取回来。
 组件可以监听表单控件状态的变化，并对此做出响应。
 
-One advantage of working with form control objects directly is that value and validity updates 
-are [always synchronous and under your control](guide/reactive-forms#async-vs-sync "Async vs sync"). 
+One advantage of working with form control objects directly is that value and validity updates
+are [always synchronous and under your control](guide/reactive-forms#async-vs-sync "Async vs sync").
 You won't encounter the timing issues that sometimes plague a template-driven form
 and reactive forms can be easier to unit test.
 
 直接使用表单控件对象的优点之一是值和有效性状态的更新[总是同步的，并且在你的控制之下](guide/reactive-forms#async-vs-sync "Async vs sync")。
 我们不会遇到时序问题，这个问题有时在模板驱动表单中会成为灾难。而且响应式表单更容易进行单元测试。
 
-In keeping with the reactive paradigm, the component 
+In keeping with the reactive paradigm, the component
 preserves the immutability of the _data model_,
 treating it as a pure source of original values.
-Rather than update the data model directly, 
-the component extracts user changes and forwards them to an external component or service, 
-which does something with them (such as saving them) 
-and returns a new _data model_ to the component that reflects the updated model state. 
+Rather than update the data model directly,
+the component extracts user changes and forwards them to an external component or service,
+which does something with them (such as saving them)
+and returns a new _data model_ to the component that reflects the updated model state.
 
 在响应式编程范式中，组件会负责维护*数据模型*的不可变性，把模型当做纯粹的原始数据源。
 组件不会直接更新数据模型，而是把用户的修改提取出来，把它们转发给外部的组件或服务，外部程序才会使用这些进行处理（比如保存它们），
 并且给组件返回一个新的*数据模型*，以反映模型状态的变化。
   
-Using reactive form directives does not require you to follow all reactive priniciples, 
+Using reactive form directives does not require you to follow all reactive priniciples,
 but it does facilitate the reactive programming approach should you choose to use it.
 
 使用响应式表单的指令，并不要求你遵循所有的响应式编程原则，但它能让你更容易使用响应式编程方法，从而更愿意使用它。
@@ -182,14 +105,14 @@ _Template-driven_ forms, introduced in the [Template guide](guide/forms), take a
 
 在[模板](guide/forms)一章我们介绍过的*模板驱动*表单，是一种完全不同的方式。
 
-You place HTML form controls (such as `<input>` and `<select>`) in the component template and 
-bind them to _data model_ properties in the component, using directives 
+You place HTML form controls (such as `<input>` and `<select>`) in the component template and
+bind them to _data model_ properties in the component, using directives
 like `ngModel`.
 
 我们把HTML表单控件（比如`<input>`和`<select>`）放进组件模板中，并用`ngModel`等指令把它们绑定到组件中*数据模型*的属性上。
 
-You don't create Angular form control objects. Angular directives 
-create them for you, using the information in your data bindings. 
+You don't create Angular form control objects. Angular directives
+create them for you, using the information in your data bindings.
 You don't push and pull data values. Angular handles that for you with `ngModel`.
 Angular updates the mutable _data model_ with user changes as they happen.
 
@@ -201,9 +124,9 @@ For this reason, the `ngModel` directive is not part of the ReactiveFormsModule.
 
 因此，`ngModel`并不是`ReactiveFormsModule`模块的一部分。
 
-While this means less code in the component class, 
+While this means less code in the component class,
 [template-driven forms are asynchronous](guide/reactive-forms#async-vs-sync "Async vs sync")
-which may complicate development in more advanced scenarios. 
+which may complicate development in more advanced scenarios.
 
 虽然这意味着组件中的代码更少，但是[模板驱动表单是异步工作的](guide/reactive-forms#async-vs-sync "Async vs sync")，这可能在更高级的场景中让开发复杂化。
 
@@ -219,15 +142,15 @@ Reactive forms are synchronous. Template-driven forms are asynchronous. It's a d
 
 响应式表单是同步的。模板驱动表单是异步的。这个不同点很重要。
 
-In reactive forms, you create the entire form control tree in code. 
-You can immediately update a value or drill down through the descendents of the parent form 
+In reactive forms, you create the entire form control tree in code.
+You can immediately update a value or drill down through the descendents of the parent form
 because all controls are always available.
 
 使用响应式表单，我们会在代码中创建整个表单控件树。
 我们可以立即更新一个值或者深入到表单中的任意节点，因为所有的控件都始终是可用的。
 
 Template-driven forms delegate creation of their form controls to directives.
-To avoid "_changed after checked_" errors, 
+To avoid "_changed after checked_" errors,
 these directives take more than one cycle to build the entire control tree.
 That means you must wait a tick before manipulating any of the controls
 from within the component class.
@@ -236,7 +159,7 @@ from within the component class.
 为了消除“检查完后又变化了”的错误，这些指令需要消耗一个以上的变更检测周期来构建整个控件树。
 这意味着在从组件类中操纵任何控件之前，我们都必须先等待一个节拍。
 
-For example, if you inject the form control with a `@ViewChild(NgForm)` query and examine it in the 
+For example, if you inject the form control with a `@ViewChild(NgForm)` query and examine it in the
 [`ngAfterViewInit` lifecycle hook](guide/lifecycle-hooks#afterview "Lifecycle hooks guide: AfterView"),
 you'll discover that it has no children.
 You must wait a tick, using `setTimeout`, before you can
@@ -245,21 +168,21 @@ extract a value from a control, test its validity, or set it to a new value.
 比如，如果我们用`@ViewChild(NgForm)`查询来注入表单控件，并在[生命周期钩子`ngAfterViewInit`](guide/lifecycle-hooks#afterview "Lifecycle hooks guide: AfterView")中检查它，就会发现它没有子控件。
 我们必须使用`setTimeout`等待一个节拍才能从控件中提取值、测试有效性，或把它设置为新值。
 
-The asynchrony of template-driven forms also complicates unit testing. 
-You must wrap your test block in `async()` or `fakeAsync()` to 
-avoid looking for values in the form that aren't there yet. 
+The asynchrony of template-driven forms also complicates unit testing.
+You must wrap your test block in `async()` or `fakeAsync()` to
+avoid looking for values in the form that aren't there yet.
 With reactive forms, everything is available when you expect it to be.
 
 模板驱动表单的异步性让单元测试也变得复杂化了。
 我们必须把测试代码包裹在`async()`或`fakeAsync()`中来解决要查阅的值尚不存在的情况。
 使用响应式表单，在所期望的时机一切都是可用的。
 
-### Which is better, reactive or template-driven? 
+### Which is better, reactive or template-driven?
 
 ### 哪一个更好？响应式还是模板驱动？
 
 Neither is "better".
-They're two different architectural paradigms, 
+They're two different architectural paradigms,
 with their own strengths and weaknesses.
 Choose the approach that works best for you.
 You may decide to use both in the same application.
@@ -268,8 +191,8 @@ You may decide to use both in the same application.
 它们是两种架构范式，各有优缺点。
 请自行选择更合适的方法，甚至可以在同一个应用中同时使用它们。
 
-The balance of this _reactive forms_ guide explores the _reactive_ paradigm and 
-concentrates exclusively on reactive forms techniques. 
+The balance of this _reactive forms_ guide explores the _reactive_ paradigm and
+concentrates exclusively on reactive forms techniques.
 For information on _template-driven forms_, see the [_Forms_](guide/forms) guide.
 
 在这章*响应式表单*中，我们只专注于*响应式*范式以及响应式表单技术的详情。
@@ -288,7 +211,7 @@ Then you'll learn about the [Angular form classes](guide/reactive-forms#essentia
 
 ## 准备工作
 
-Follow the steps in the [_Setup_ guide](guide/setup "Setup guide") 
+Follow the steps in the [_Setup_ guide](guide/setup "Setup guide")
 for creating a new project folder (perhaps called `reactive-forms`)
 based on the _QuickStart seed_.
 
@@ -318,9 +241,9 @@ Create a new `data-model.ts` file in the `app` directory and copy the content be
 
 
 
-The file exports two classes and two constants. The `Address` 
-and `Hero` classes define the application _data model_. 
-The `heroes` and `states` constants supply the test data. 
+The file exports two classes and two constants. The `Address`
+and `Hero` classes define the application _data model_.
+The `heroes` and `states` constants supply the test data.
 
 这个文件导出两个类和两个常量。`Address`和`Hero`类定义应用的*数据模型*。
 `heroes`和`states`常量提供测试数据。
@@ -334,7 +257,7 @@ The `heroes` and `states` constants supply the test data.
 
 ## 创建*响应式表单*组件
 
-Make a new file called 
+Make a new file called
 `hero-detail.component.ts` in the `app` directory and import these symbols:
 
 在`app`目录下创建一个名叫`hero-detail.component.ts`的新文件，并且导入下列符号：
@@ -357,8 +280,8 @@ Now enter the `@Component` decorator that specifies the `HeroDetailComponent` me
 
 
 
-Next, create an exported `HeroDetailComponent` class with a `FormControl`. 
-`FormControl` is a directive that allows you to create and manage 
+Next, create an exported `HeroDetailComponent` class with a `FormControl`.
+`FormControl` is a directive that allows you to create and manage
 a `FormControl` instance directly.
 
 
@@ -373,20 +296,20 @@ a `FormControl` instance directly.
 
 
 
-Here you are creating a `FormControl` called `name`. 
-It will be bound in the template to an HTML `input` box for the hero name. 
+Here you are creating a `FormControl` called `name`.
+It will be bound in the template to an HTML `input` box for the hero name.
 
 这里我们创建了一个名叫`name`的`FormControl`。
 它将会绑定到模板中的一个`input`框，表示英雄的名字。
 
-A `FormControl` constructor accepts three, optional arguments: 
+A `FormControl` constructor accepts three, optional arguments:
 the initial data value, an array of validators, and an array of async validators.
 
 `FormControl`构造函数接收三个可选参数：
 初始值、验证器数组和异步验证器数组。
 
 This simple control doesn't have data or validators.
-In real apps, most form controls have both. 
+In real apps, most form controls have both.
 
 最简单的控件并不需要数据或验证器，但是在实际应用中，大部分表单控件都会同时具备它们。
 
@@ -396,7 +319,7 @@ In real apps, most form controls have both.
 
 
 This guide touches only briefly on `Validators`. For an in-depth look at them,
-read the [Form Validation](cookbook/form-validation) cookbook.
+read the [Form Validation](guide/form-validation) guide.
 
 本章中只会接触`Validators`中的一点点，要想更深入的了解它们，请阅读烹饪宝典中的[表单验证](cookbook/form-validation)一章。
 
@@ -424,9 +347,9 @@ Now create the component's template, `src/app/hero-detail.component.html`, with
 
 
 
-To let Angular know that this is the input that you want to 
-associate to the `name` `FormControl` in the class, 
-you need `[formControl]="name"` in the template on the `<input>`. 
+To let Angular know that this is the input that you want to
+associate to the `name` `FormControl` in the class,
+you need `[formControl]="name"` in the template on the `<input>`.
 
 要让Angular知道我们希望把这个输入框关联到类中的`FormControl`型属性`name`，我们需要在模板中的`<input>`上加一句`[formControl]="name"`。
 
@@ -436,8 +359,8 @@ you need `[formControl]="name"` in the template on the `<input>`.
 
 
 
-Disregard the `form-control` _CSS_ class. It belongs to the 
-<a href="http://getbootstrap.com/" target="_blank" title="Bootstrap CSS">Bootstrap CSS library</a>,
+Disregard the `form-control` _CSS_ class. It belongs to the
+<a href="http://getbootstrap.com/" title="Bootstrap CSS">Bootstrap CSS library</a>,
 not Angular.
 It _styles_ the form but in no way impacts the logic of the form.
 
@@ -456,7 +379,7 @@ It _styles_ the form but in no way impacts the logic of the form.
 
 ## 导入`ReactiveFormsModule`
 
-The HeroDetailComponent template uses `formControlName` 
+The HeroDetailComponent template uses `formControlName`
 directive from the `ReactiveFormsModule`.
 
 `HeroDetailComponent`的模板中使用了来自`ReactiveFormsModule`的`formControlName`。
@@ -466,7 +389,7 @@ Therefore, do the following three things in `app.module.ts`:
 
 在这个例子中，我们在`AppModule`中声明了`HeroDetailComponent`。因此现在`app.module.ts`中做了三件事：
 
-1. Use a JavaScript `import` statement to access 
+1. Use a JavaScript `import` statement to access
 the `ReactiveFormsModule` and the `HeroDetailComponent`.
 
   使用JavaScript的`import`语句访问`ReactiveFormsModule`和`HeroDetailComponent`。
@@ -516,22 +439,22 @@ It may be helpful to read a brief description of the core form classes.
 
 阅读一下这些核心表单类的简短描述也许会有用。
 
-* [_AbstractControl_](api/forms/index/AbstractControl-class "API Reference: AbstractControl")
-is the abstract base class for the three concrete form control classes: 
+* [_AbstractControl_](api/forms/AbstractControl "API Reference: AbstractControl")
+is the abstract base class for the three concrete form control classes:
 `FormControl`, `FormGroup`, and `FormArray`.
 It provides their common behaviors and properties, some of which are _observable_.
 
   [`AbstractControl`](api/forms/index/AbstractControl-class "API Reference: AbstractControl")是三个具体表单类的抽象基类。
   并为它们提供了一些共同的行为和属性，其中有些是*可观察对象（Observable）*。
 
-* [_FormControl_](api/forms/index/FormControl-class "API Reference: FormControl") 
+* [_FormControl_](api/forms/FormControl "API Reference: FormControl")
 tracks the value and validity status of an _individual_ form control.
 It corresponds to an HTML form control such as an input box or selector.
 
   [_FormControl_](api/forms/index/FormControl-class "API Reference: FormControl")
   用于跟踪一个*单独的*表单控件的值和有效性状态。它对应于一个HTML表单控件，比如输入框和下拉框。
 
-* [_FormGroup_](api/forms/index/FormGroup-class "API Reference: FormGroup")
+* [_FormGroup_](api/forms/FormGroup "API Reference: FormGroup")
 tracks the value and validity state of a _group_ of `AbstractControl` instances.
 The group's properties include its child controls.
 The top-level form in your component is a `FormGroup`.
@@ -541,7 +464,7 @@ The top-level form in your component is a `FormGroup`.
   该组的属性中包含了它的子控件。
   组件中的顶级表单就是一个`FormGroup`。
 
-* [_FormArray_](api/forms/index/FormArray-class "API Reference: FormArray")
+* [_FormArray_](api/forms/FormArray "API Reference: FormArray")
 tracks the value and validity state of a numerically indexed _array_ of `AbstractControl` instances.
 
   [_FormArray_](api/forms/index/FormArray-class "API Reference: FormArray")用于跟踪`AbstractControl`实例组成的有序数组的值和有效性状态。
@@ -568,13 +491,13 @@ Add the `bootstrap` _CSS stylesheet_ to the head of `index.html`:
 
 
 
-Now that everything is wired up, the browser should display something like this: 
+Now that everything is wired up, the browser should display something like this:
 
 这些做好之后，浏览器中应该显示成这样：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/just-formcontrol.png" width="400px" alt="Single FormControl"></img>
+<figure>
+  <img src="generated/images/guide/reactive-forms/just-formcontrol.png" alt="Single FormControl">
 </figure>
 
 
@@ -586,9 +509,9 @@ Now that everything is wired up, the browser should display something like this:
 
 ## 添加FormGroup
 
-Usually, if you have multiple *FormControls*, you'll want to register 
+Usually, if you have multiple *FormControls*, you'll want to register
 them within a parent `FormGroup`.
-This is simple to do. To add a `FormGroup`, add it to the imports section 
+This is simple to do. To add a `FormGroup`, add it to the imports section
 of `hero-detail.component.ts`:
 
 通常，如果有多个*FormControl*，我们会希望把它们注册进一个父`FormGroup`中。这很容易。只要把它加入`hero-detail.component.ts`的`import`区就可以了。
@@ -611,7 +534,7 @@ In the class, wrap the `FormControl` in a `FormGroup` called `heroForm` as follo
 
 
 
-Now that you've made changes in the class, they need to be reflected in the 
+Now that you've made changes in the class, they need to be reflected in the
 template. Update `hero-detail.component.html` by replacing it with the following.
 
 现在我们改完了这个类，该把它映射到模板中了。把`hero-detail.component.html`改成这样：
@@ -623,31 +546,31 @@ template. Update `hero-detail.component.html` by replacing it with the following
 
 
 
-Notice that now the single input is in a `form` element. The `novalidate` 
-attribute in the `<form>` element prevents the browser 
-from attempting native HTML validations. 
+Notice that now the single input is in a `form` element. The `novalidate`
+attribute in the `<form>` element prevents the browser
+from attempting native HTML validations.
 
 注意，现在单行输入框位于一个`form`元素中。`<form>`元素上的`novalidate`属性会阻止浏览器使用原生HTML中的表单验证器。
 
-`formGroup` is a reactive form directive that takes an existing 
-`FormGroup` instance and associates it with an HTML element. 
-In this case, it associates the `FormGroup` you saved as 
+`formGroup` is a reactive form directive that takes an existing
+`FormGroup` instance and associates it with an HTML element.
+In this case, it associates the `FormGroup` you saved as
 `heroForm` with the form element.
 
 `formGroup`是一个响应式表单的指令，它拿到一个现有`FormGroup`实例，并把它关联到一个HTML元素上。
 这种情况下，它关联到的是`form`元素上的`FormGroup`实例`heroForm`。
 
-Because the class now has a `FormGroup`, you must update the template 
-syntax for associating the input with the corresponding 
-`FormControl` in the component class. 
-Without a parent `FormGroup`, 
-`[formControl]="name"` worked earlier because that directive 
-can stand alone, that is, it works without being in a `FormGroup`. 
-With a parent `FormGroup`, the `name` input needs the syntax 
-`formControlName=name` in order to be associated 
-with the correct `FormControl` 
-in the class. This syntax tells Angular to look for the parent 
-`FormGroup`, in this case `heroForm`, and then _inside_ that group 
+Because the class now has a `FormGroup`, you must update the template
+syntax for associating the input with the corresponding
+`FormControl` in the component class.
+Without a parent `FormGroup`,
+`[formControl]="name"` worked earlier because that directive
+can stand alone, that is, it works without being in a `FormGroup`.
+With a parent `FormGroup`, the `name` input needs the syntax
+`formControlName=name` in order to be associated
+with the correct `FormControl`
+in the class. This syntax tells Angular to look for the parent
+`FormGroup`, in this case `heroForm`, and then _inside_ that group
 to look for a `FormControl` called `name`.
 
 由于现在有了一个`FormGroup`，因此我们必须修改模板语法来把输入框关联到组件类中对应的`FormControl`上。
@@ -660,10 +583,10 @@ to look for a `FormControl` called `name`.
 
 
 
-Disregard the `form-group` _CSS_ class. It belongs to the 
-<a href="http://getbootstrap.com/" target="_blank" title="Bootstrap CSS">Bootstrap CSS library</a>,
+Disregard the `form-group` _CSS_ class. It belongs to the
+<a href="http://getbootstrap.com/" title="Bootstrap CSS">Bootstrap CSS library</a>,
 not Angular.
-Like the `form-control` class, it _styles_ the form 
+Like the `form-control` class, it _styles_ the form
 but in no way impacts its logic.
 
 请无视*CSS*类`form-group`，它属于<a href="http://getbootstrap.com/" target="_blank" title="Bootstrap CSS">Bootstrap CSS library</a>而不是Angular。
@@ -674,8 +597,8 @@ but in no way impacts its logic.
 
 
 
-The form looks great. But does it work? 
-When the user enters a name, where does the value go? 
+The form looks great. But does it work?
+When the user enters a name, where does the value go?
 
 表单看起来很棒，但是它能用吗？
 当用户输入名字时，它的值去了哪里？
@@ -689,7 +612,7 @@ When the user enters a name, where does the value go?
 ## 表单模型概览
 
 The value goes into the **_form model_** that backs the group's `FormControls`.
-To see the form model, add the following line after the 
+To see the form model, add the following line after the
 closing `form` tag in the `hero-detail.component.html`:
 
 这个值进入了幕后**表单模型**中的`FormControl`构成的表单组。
@@ -709,13 +632,13 @@ Piping it through the `JsonPipe` renders the model as JSON in the browser:
 用`JsonPipe`管道把这个模型以JSON格式渲染到浏览器中。
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/json-output.png" width="400px" alt="JSON output"></img>
+<figure>
+  <img src="generated/images/guide/reactive-forms/json-output.png" alt="JSON output">
 </figure>
 
 
 
-The initial `name` property value is the empty string. 
+The initial `name` property value is the empty string.
 Type into the _name_ input box and watch the keystokes appear in the JSON.
 
 
@@ -724,11 +647,11 @@ Type into the _name_ input box and watch the keystokes appear in the JSON.
 
 
 
-Great! You have the basics of a form. 
+Great! You have the basics of a form.
 
 真棒！我们有了一个基本版表单。
 
-In real life apps, forms get big fast. 
+In real life apps, forms get big fast.
 `FormBuilder` makes form development and maintenance easier.
 
 
@@ -744,8 +667,8 @@ In real life apps, forms get big fast.
 
 ## `FormBuilder`简介
 
-The `FormBuilder` class helps reduce repetition and 
-clutter by handling details of control creation for you. 
+The `FormBuilder` class helps reduce repetition and
+clutter by handling details of control creation for you.
 
 `FormBuilder`类能通过处理控件创建的细节问题来帮我们减少重复劳动。
 
@@ -793,7 +716,7 @@ The revised `HeroDetailComponent` looks like this:
 
 
 `FormBuilder.group` is a factory method that creates a `FormGroup`. &nbsp;
-`FormBuilder.group` takes an object whose keys and values are `FormControl` names and their definitions. 
+`FormBuilder.group` takes an object whose keys and values are `FormControl` names and their definitions.
 In this example, the `name` control is defined by its initial data value, an empty string.
 
 `FormBuilder.group`是一个用来创建`FormGroup`的工厂方法，它接受一个对象，对象的键和值分别是`FormControl`的名字和它的定义。
@@ -811,8 +734,8 @@ It beats writing an equivalent series of `new FormControl(...)` statements.
 
 ### Validators.required
 
-Though this guide doesn't go deeply into validations, here is one example that 
-demonstrates the simplicity of using `Validators.required` in reactive forms. 
+Though this guide doesn't go deeply into validations, here is one example that
+demonstrates the simplicity of using `Validators.required` in reactive forms.
 
 虽然本章不会深入讲解验证机制，但还是有一个例子来示范如何简单的在响应式表单中使用`Validators.required`。
 
@@ -827,8 +750,8 @@ First, import the `Validators` symbol.
 
 
 
-To make the `name` `FormControl` required, replace the `name` 
-property in the `FormGroup` with an array. 
+To make the `name` `FormControl` required, replace the `name`
+property in the `FormGroup` with an array.
 The first item is the initial value for `name`;
 the second is the required validator, `Validators.required`.
 
@@ -846,7 +769,7 @@ the second is the required validator, `Validators.required`.
 
 
 Reactive validators are simple, composable functions.
-Configuring validation is harder in template-driven forms where you must wrap validators in a directive. 
+Configuring validation is harder in template-driven forms where you must wrap validators in a directive.
 
 响应式验证器是一些简单、可组合的函数。
 在模板驱动表单中配置验证器有些困难，因为我们必须把验证器包装进指令中。
@@ -872,14 +795,14 @@ The browser displays the following:
 浏览器会显示下列内容：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/validators-json-output.png" width="400px" alt="Single FormControl"></img>
+<figure>
+  <img src="generated/images/guide/reactive-forms/validators-json-output.png" alt="Single FormControl">
 </figure>
 
 
 
 `Validators.required` is working. The status is `INVALID` because the input box has no value.
-Type into the input box to see the status change from `INVALID` to `VALID`. 
+Type into the input box to see the status change from `INVALID` to `VALID`.
 
 `Validators.required`生效了，但状态还是`INVALID`，因为输入框中还没有值。
 在输入框中输入，就会看到这个状态从`INVALID`变成了`VALID`。
@@ -889,13 +812,13 @@ In a real app, you'd replace the diagnosic message with a user-friendly experien
 在真实的应用中，我们要把这些诊断信息替换成用户友好的信息。
 
 
-Using `Validators.required` is optional for the rest of the guide. 
+Using `Validators.required` is optional for the rest of the guide.
 It remains in each of the following examples with the same configuration.
 
 在本章的其余部分，`Validators.required`是可有可无的，但在每个与此范例配置相同的范例中都会保留它。
 
 For more on validating Angular forms, see the
-[Form Validation](cookbook/form-validation) guide. 
+[Form Validation](guide/form-validation) guide.
 
 要了解Angular表单验证器的更多知识，参见[表单验证器](cookbook/form-validation)一章。
 
@@ -904,12 +827,12 @@ For more on validating Angular forms, see the
 
 ### 更多的表单控件（FormControl）
 
-A hero has more than a name. 
-A hero has an address, a super power and sometimes a sidekick too. 
+A hero has more than a name.
+A hero has an address, a super power and sometimes a sidekick too.
 
 每个英雄可以有多个名字，还有一个住址、一项超能力，有时还会有一个副手。
 
-The address has a state property. The user will select a state with a `<select>` box and you'll populate 
+The address has a state property. The user will select a state with a `<select>` box and you'll populate
 the `<option>` elements with states. So import `states` from `data-model.ts`.
 
 住址中有一个所在州属性，用户将会从`<select>`框中选择一个州，我们会用`<option>`元素渲染各个州。我们从`data-model.ts`中导入`states`（州列表）。
@@ -921,7 +844,7 @@ the `<option>` elements with states. So import `states` from `data-model.ts`.
 
 
 
-Declare the `states` property and add some address `FormControls` to the `heroForm` as follows. 
+Declare the `states` property and add some address `FormControls` to the `heroForm` as follows.
 
 声明`states`属性并往`heroForm`中添加一些表示住址的`FormControl`，代码如下：
 
@@ -932,7 +855,7 @@ Declare the `states` property and add some address `FormControls` to the `heroFo
 
 
 
-Then add corresponding markup in `hero-detail.component.html` 
+Then add corresponding markup in `hero-detail.component.html`
 within the `form` element.
 
 然后在`hero-detail.component.html`文件中把对应的脚本添加到`form`元素中。
@@ -948,11 +871,11 @@ within the `form` element.
 
 
 
-*Reminder*: Ignore the many mentions of `form-group`, 
+*Reminder*: Ignore the many mentions of `form-group`,
 `form-control`, `center-block`, and `checkbox` in this markup.
 Those are _bootstrap_ CSS classes that Angular itself ignores.
 Pay attention to the `formGroupName` and `formControlName` attributes.
-They are the Angular directives that bind the HTML controls to the 
+They are the Angular directives that bind the HTML controls to the
 Angular `FormGroup` and `FormControl` properties in the component class.
 
 *注意*：不用管这些脚本中提到的`form-group`、`form-control`、`center-block`和`checkbox`等。
@@ -965,12 +888,12 @@ Angular `FormGroup` and `FormControl` properties in the component class.
 
 
 
-The revised template includes more text inputs, a select box for the `state`, radio buttons for the `power`, 
-and a checkbox for the `sidekick`. 
+The revised template includes more text inputs, a select box for the `state`, radio buttons for the `power`,
+and a checkbox for the `sidekick`.
 
 修改过的模板包含更多文本输入框，一个`state`选择框，`power`（超能力）的单选按钮和一个`sidekick`检查框。
 
-You must bind the option's value property with `[value]="state"`. 
+You must bind the option's value property with `[value]="state"`.
 If you do not bind the value, the select shows the first option from the data model.
 
 我们要用`[value]="state"`来绑定选项的`value`属性。
@@ -978,16 +901,16 @@ If you do not bind the value, the select shows the first option from the data mo
 
 The component _class_ defines control properties without regard for their representation in the template.
 You define the `state`, `power`, and `sidekick` controls the same way you defined the `name` control.
-You tie these controls to the template HTML elements in the same way, 
-specifiying the `FormControl` name with the `formControlName` directive. 
+You tie these controls to the template HTML elements in the same way,
+specifying the `FormControl` name with the `formControlName` directive.
 
 组件*类*定义了控件属性而不用管它们在模板中的表现形式。
 我们可以像定义`name`控件一样定义`state`、`power`和`sidekick`控件，并用`formControlName`指令来指定`FormControl`的名字。
 
-See the API reference for more information about 
-[radio buttons](api/forms/index/RadioControlValueAccessor-directive "API: RadioControlValueAccessor"), 
-[selects](api/forms/index/SelectControlValueAccessor-directive "API: SelectControlValueAccessor"), and
-[checkboxes](api/forms/index/CheckboxControlValueAccessor-directive "API: CheckboxControlValueAccessor").
+See the API reference for more information about
+[radio buttons](api/forms/RadioControlValueAccessor "API: RadioControlValueAccessor"),
+[selects](api/forms/SelectControlValueAccessor "API: SelectControlValueAccessor"), and
+[checkboxes](api/forms/CheckboxControlValueAccessor "API: CheckboxControlValueAccessor").
 
 参见API参考手册中的[radio buttons](api/forms/index/RadioControlValueAccessor-directive "API: RadioControlValueAccessor")、
   [selects](api/forms/index/SelectControlValueAccessor-directive "API: SelectControlValueAccessor")和
@@ -1002,12 +925,12 @@ See the API reference for more information about
 
 ### 多级`FormGroup`
 
-This form is getting big and unwieldy. You can group some of the related `FormControls` 
-into a nested `FormGroup`. The `street`, `city`, `state`, and `zip` are properties 
+This form is getting big and unwieldy. You can group some of the related `FormControls`
+into a nested `FormGroup`. The `street`, `city`, `state`, and `zip` are properties
 that would make a good _address_ `FormGroup`.
-Nesting groups and controls in this way allows you to 
-mirror the hierarchical structure of the data model 
-and helps track validation and state for related sets of controls. 
+Nesting groups and controls in this way allows you to
+mirror the hierarchical structure of the data model
+and helps track validation and state for related sets of controls.
 
 这个表单变得越来越大、越来越笨重。我们可以把一些相关的`FormControl`组织到多级`FormGroup`中。
 `street`、`city`、`state`和`zip`属性就可以作为一个名叫`address`的`FormGroup`。
@@ -1028,7 +951,7 @@ assign the result to a new `address` property of the parent `FormGroup`.
 
 
 
-You’ve changed the structure of the form controls in the component class; 
+You’ve changed the structure of the form controls in the component class;
 you must make corresponding adjustments to the component template.
 
 我们已经修改了组件类中表单控件的结构，还必须对组件模板进行相应的调整。
@@ -1041,7 +964,7 @@ That's the property of the _address_ child `FormGroup` within the parent `FormGr
 往这个`div`上添加一个`formGroupName`指令，并且把它绑定到`"address"`上。
 这个`address`属性是一个`FormGroup`，它的父`FormGroup`就是`heroForm`。
 
-To make this change visually obvious, slip in an `<h4>` header near the top with the text, _Secret Lair_. 
+To make this change visually obvious, slip in an `<h4>` header near the top with the text, _Secret Lair_.
 The new _address_ HTML looks like this:
 
 要让这个变化更加明显，在文本的顶部加入一个`<h4>`头：*Secret Lair*。
@@ -1055,18 +978,18 @@ The new _address_ HTML looks like this:
 
 
 After these changes, the JSON output in the browser shows the revised _form model_
-with the nested address `FormGroup`: 
+with the nested address `FormGroup`:
 
 做完这些之后，浏览器中的JSON输出就变成了带有多级`FormGroup`的住址。
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/address-group.png" width="400px" alt="JSON output"></img>
+<figure>
+  <img src="generated/images/guide/reactive-forms/address-group.png" alt="JSON output">
 </figure>
 
 
 
-Great! You’ve made a group and you can see that the template 
+Great! You’ve made a group and you can see that the template
 and the form model are talking to one another.
 
 真棒！我们制作了一个控件组，并且可以看到模板和表单模型已经能彼此通讯了。
@@ -1087,9 +1010,9 @@ Sometimes you're interested only in the state of one particular `FormControl`.
 但有时我们可能只关心一个特定`FormControl`的状态。
 
 You can inspect an individual `FormControl` within a form by extracting it with the `.get()` method.
-You can do this _within_ the component class or display it on the 
-page by adding the following to the template, 
-immediately after the `{{form.value | json}}` interpolation as follows: 
+You can do this _within_ the component class or display it on the
+page by adding the following to the template,
+immediately after the `{{form.value | json}}` interpolation as follows:
 
 我们可以使用`.get()`方法来提取表单中一个单独`FormControl`的状态。
 我们可以在组件类中这么做，或者通过往模板中添加下列代码来把它显示在页面中，就添加在`{{form.value | json}}`插值表达式的紧后面：
@@ -1112,7 +1035,7 @@ To get the state of a `FormControl` that’s inside a `FormGroup`, use dot notat
 
 
 
-You can use this technique to display _any_ property of a `FormControl` 
+You can use this technique to display _any_ property of a `FormControl`
 such as one of the following:
 
 我们可以使用此技术来显示`FromControl`的*任意*属性，代码如下：
@@ -1187,7 +1110,7 @@ such as one of the following:
     <td>
 
 
-      the validity of a `FormControl`. Possible values: `VALID`, 
+      the validity of a `FormControl`. Possible values: `VALID`,
        `INVALID`, `PENDING`, or `DISABLED`.
 
       `FormControl`的有效性。可能的值有`VALID`、`INVALID`、`PENDING`或`DISABLED`。
@@ -1222,11 +1145,9 @@ such as one of the following:
 
 
       `true` if the control user has not yet entered the HTML control
-      and triggered its blur event. Its opposite is `myControl.touched`.
-
-      如果用户尚未进入这个HTML控件，也没有触发过它的`blur`（失去焦点）事件，则为`true`。
+       and triggered its blur event. Its opposite is `myControl.touched`.
+                         如果用户尚未进入这个HTML控件，也没有触发过它的`blur`（失去焦点）事件，则为`true`。
       它是`myControl.touched`的反义词。
-                          
     </td>
 
   </tr>
@@ -1235,15 +1156,15 @@ such as one of the following:
 
 
 
-Learn about other `FormControl` properties in the 
-[_AbstractControl_](api/forms/index/AbstractControl-class) API reference.
+Learn about other `FormControl` properties in the
+[_AbstractControl_](api/forms/AbstractControl) API reference.
 
 要了解`FormControl`的更多属性，参见API参考手册的[_AbstractControl_](api/forms/index/AbstractControl-class)部分。
 
-One common reason for inspecting `FormControl` properties is to 
-make sure the user entered valid values. 
-Read more about validating Angular forms in the 
-[Form Validation](cookbook/form-validation) guide. 
+One common reason for inspecting `FormControl` properties is to
+make sure the user entered valid values.
+Read more about validating Angular forms in the
+[Form Validation](guide/form-validation) guide.
 
 检查`FormControl`属性的另一个原因是确保用户输入了有效的值。
 要了解更多关于Angular表单验证的知识，参见[表单验证](cookbook/form-validation)一章。
@@ -1278,7 +1199,7 @@ There are two important implications:
 
 组件必须把*数据模型*中的英雄值复制到*表单模型*中。这里隐含着两个非常重要的点。
 
-1. The developer must understand how the properties of the _data model_ 
+1. The developer must understand how the properties of the _data model_
 map to the properties of the _form model_.
 
   开发人员必须理解*数据模型*是如何映射到*表单模型*中的属性的。
@@ -1370,8 +1291,8 @@ Also be sure to update the import from `data-model` so you can reference the `He
 
 ## 使用`setValue`和`patchValue`来操纵表单模型
 
-Previously you created a control and initialized its value at the same time. 
-You can also initialize or reset the values _later_ with the 
+Previously you created a control and initialized its value at the same time.
+You can also initialize or reset the values _later_ with the
 `setValue` and `patchValue` methods.
 
 以前，我们创建了控件，并同时初始化它的值。
@@ -1395,17 +1316,17 @@ The `setValue` method checks the data object thoroughly before assigning any for
 
 `setValue`方法会在赋值给任何表单控件之前先检查数据对象的值。
 
-It will not accept a data object that doesn't match the FormGroup structure or is 
-missing values for any control in the group. This way, it can return helpful 
-error messages if you have a typo or if you've nested controls incorrectly. 
+It will not accept a data object that doesn't match the FormGroup structure or is
+missing values for any control in the group. This way, it can return helpful
+error messages if you have a typo or if you've nested controls incorrectly.
 `patchValue` will fail silently.
 
 它不会接受一个与FormGroup结构不同或缺少表单组中任何一个控件的数据对象。
 这种方式下，如果我们有什么拼写错误或控件嵌套的不正确，它就能返回一些有用的错误信息。
 `patchValue`会默默地失败。
 
-On the other hand,`setValue` will catch 
-the error and report it clearly. 
+On the other hand,`setValue` will catch
+the error and report it clearly.
 
 而`setValue`会捕获错误，并清晰的报告它。
 
@@ -1430,7 +1351,7 @@ This explains the conditional setting of the `address` property in the data obje
 ### _patchValue_
 
 With **`patchValue`**, you can assign values to specific controls in a `FormGroup`
-by supplying an object of key/value pairs for just the controls of interest. 
+by supplying an object of key/value pairs for just the controls of interest.
 
 借助**`patchValue`**，我们可以通过提供一个只包含要更新的控件的键值对象来把值赋给`FormGroup`中的指定控件。
 
@@ -1446,7 +1367,7 @@ This example sets only the form's `name` control.
 
 
 With **`patchValue`** you have more flexibility to cope with wildly divergent data and form models.
-But unlike `setValue`,  `patchValue` cannot check for missing control 
+But unlike `setValue`,  `patchValue` cannot check for missing control
 values and does not throw helpful errors.
 
 借助**`patchValue`**，我们可以更灵活地解决数据模型和表单模型之间的差异。
@@ -1478,7 +1399,7 @@ by binding to its `hero` input property.
 
 
 
-In this approach, the value of `hero` in the `HeroDetailComponent` changes 
+In this approach, the value of `hero` in the `HeroDetailComponent` changes
 every time the user selects a new hero.
 You should call  _setValue_ in the [ngOnChanges](guide/lifecycle-hooks#onchanges)
 hook, which Angular calls whenever the input `hero` property changes
@@ -1525,8 +1446,8 @@ Add the `ngOnChanges` method to the class as follows:
 
 ### *重置*表单的标识。
 
-You should  reset the form when the hero changes so that 
-control values from the previous hero are cleared and 
+You should  reset the form when the hero changes so that
+control values from the previous hero are cleared and
 status flags are restored to the _pristine_ state.
 You could call `reset` at the top of `ngOnChanges` like this.
 
@@ -1540,8 +1461,8 @@ You could call `reset` at the top of `ngOnChanges` like this.
 
 
 
-The `reset` method has an optional `state` value so you can reset the flags _and_ the control values at the same. 
-Internally, `reset` passes the argument to `setValue`. 
+The `reset` method has an optional `state` value so you can reset the flags _and_ the control values at the same time.
+Internally, `reset` passes the argument to `setValue`.
 A little refactoring and `ngOnChanges` becomes this:
 
 `reset`方法有一个可选的`state`值，让我们能在重置状态的同时*顺便设置*控件的值。
@@ -1568,17 +1489,17 @@ Together they look a bit like this:
 `HeroDetalComponent`是一个嵌套在`HeroListComponent`的*主从*视图中的子组件。如果把它们放在一起就是这样的：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/hero-list.png" width="420px" alt="HeroListComponent"></img>
+<figure>
+  <img src="generated/images/guide/reactive-forms/hero-list.png" alt="HeroListComponent">
 </figure>
 
 
 
 The `HeroListComponent` uses an injected `HeroService` to retrieve heroes from the server
 and then presents those heroes to the user as a series of buttons.
-The `HeroService` emulates an HTTP service. 
-It returns an `Observable` of heroes that resolves after a short delay, 
-both to simulate network latency and to indicate visually 
+The `HeroService` emulates an HTTP service.
+It returns an `Observable` of heroes that resolves after a short delay,
+both to simulate network latency and to indicate visually
 the necessarily asynchronous nature of the application.
 
 `HeroListComponent`使用一个注入进来的`HeroService`来从服务器获取英雄列表，然后用一系列按钮把这些英雄展示给用户。
@@ -1605,11 +1526,11 @@ The techniques involved are covered elsewhere in the documentation, including th
 `HeroListComponent`和`HeroService`的其余部分的实现细节与响应式表单无关。
 那些技术涵盖于本文档中的其它部分，包括*《英雄指南》*中的[这里](tutorial/toh-pt3 "ToH: Multiple Components")和[这里](tutorial/toh-pt4 "ToH: Services")。
 
-If you're coding along with the steps in this reactive forms tutorial, 
-create the pertinent files based on the 
-[source code displayed below](guide/reactive-forms#source-code "Reactive Forms source code"). 
+If you're coding along with the steps in this reactive forms tutorial,
+create the pertinent files based on the
+[source code displayed below](guide/reactive-forms#source-code "Reactive Forms source code").
 Notice that `hero-list.component.ts` imports `Observable` and `finally` while `hero.service.ts` imports `Observable`, `of`,
-and `delay` from `rxjs`. 
+and `delay` from `rxjs`.
 Then return here to learn about _form array_ properties.
 
 如果你正在随着本教程写代码，可以基于[下面显示的代码](guide/reactive-forms#source-code "Reactive Forms source code")来创建相应的文件。
@@ -1678,7 +1599,7 @@ let the user add or modify addresses (removing addresses is your homework).
 在本章中，我们为`Hero.addresses`定义了一个`FormArray`，并且让用户添加或修改这些住址（移除住址功能请课后自行实现）。
 
 You’ll need to redefine the form model in the `HeroDetailComponent` constructor,
-which currently only displays the first hero address in an _address_ `FormGroup`. 
+which currently only displays the first hero address in an _address_ `FormGroup`.
 
 我们需要在`HeroDetailComponent`的构造函数中重新定义表单模型，它现在只用`FormGroup`显示第一个英雄住址。
 
@@ -1719,7 +1640,7 @@ the _form model_ doesn't have to match the _data model_.
 把表单的控件名从`address`改为`secretLairs`让我们遇到了一个重要问题：*表单模型*与*数据模型*不再匹配了。
 
 
-Obviously there has to be a relationship between the two. 
+Obviously there has to be a relationship between the two.
 But it can be anything that makes sense within the application domain.
 
 
@@ -1794,7 +1715,7 @@ Wrap the expression in a `secretLairs` convenience property for clarity and re-u
 
 
 
-### Display the _FormArray_ 
+### Display the _FormArray_
 
 ### 显示`FormArray`
 
@@ -1804,7 +1725,7 @@ Revise it to display zero, one, or more of the hero's _address_ `FormGroups`.
 当前HTML模板显示单个的地址`FormGroup`。
 我们要把它修改成能显示0、1或更多个表示英雄地址的`FormGroup`。
 
-This is mostly a matter of wrapping the previous template HTML for an address in a `<div>` and 
+This is mostly a matter of wrapping the previous template HTML for an address in a `<div>` and
 repeating that `<div>` with `*ngFor`.
 
 要改的部分主要是把以前表示地址的HTML模板包裹进一个`<div>`中，并且使用`*ngFor`来重复渲染这个`<div>`。
@@ -1813,14 +1734,14 @@ The trick lies in knowing how to write the `*ngFor`. There are three key points:
 
 诀窍在于要知道如何编写`*ngFor`。主要有三点：
 
-1. Add another wrapping `<div>`, around the `<div>` with `*ngFor`, and 
+1. Add another wrapping `<div>`, around the `<div>` with `*ngFor`, and
 set its `formArrayName` directive to `"secretLairs"`.
-This step establishes the _secretLairs_ `FormArray` as the context for form controls in the inner, repeated HTML template. 
+This step establishes the _secretLairs_ `FormArray` as the context for form controls in the inner, repeated HTML template.
 
   在`*ngFor`的`<div>`之外套上另一个包装`<div>`，并且把它的`formArrayName`指令设为`"secretLairs"`。
   这一步为内部的表单控件建立了一个`FormArray`型的`secretLairs`作为上下文，以便重复渲染HTML模板。
 
-1. The source of the repeated items is the `FormArray.controls`, not the `FormArray` itself. 
+1. The source of the repeated items is the `FormArray.controls`, not the `FormArray` itself.
 Each control is an _address_ `FormGroup`, exactly what the previous (now repeated) template HTML expected.
 
   这些重复条目的数据源是`FormArray.controls`而不是`FormArray`本身。
@@ -1858,7 +1779,7 @@ Here's the complete template for the _secret lairs_ section:
 
 ### 把新的小屋添加到`FormArray`中
 
-Add an `addLair` method that gets the _secretLairs_ `FormArray` and appends a new _address_ `FormGroup` to it. 
+Add an `addLair` method that gets the _secretLairs_ `FormArray` and appends a new _address_ `FormGroup` to it.
 
 添加一个`addLair`方法，它获取`secretLairs`数组，并把新的表示地址的`FormGroup`添加到其中。
 
@@ -1884,9 +1805,9 @@ Place a button on the form so the user can add a new _secret lair_ and wire it t
 
 
 
-Be sure to **add the `type="button"` attribute**. 
+Be sure to **add the `type="button"` attribute**.
 In fact, you should always specify a button's `type`.
-Without an explict type, the button type defaults to "submit".
+Without an explicit type, the button type defaults to "submit".
 When you later add a _form submit_ action, every "submit" button triggers the submit action which
 might do something like save the current changes.
 You do not want to save changes when the user clicks the _Add a Secret Lair_ button.
@@ -1913,13 +1834,13 @@ Back in the browser, select the hero named "Magneta".
 "Magneta"没有地址，我们会在表单底部的诊断用JSON中看到这一点。
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/addresses-array.png" width="400px" alt="JSON output of addresses array"></img>
+<figure>
+  <img src="generated/images/guide/reactive-forms/addresses-array.png" alt="JSON output of addresses array">
 </figure>
 
 
 
-Click the "_Add a Secret Lair_" button. 
+Click the "_Add a Secret Lair_" button.
 A new address section appears. Well done!
 
 点击“Add a Secret Lair”按钮，一个新的地址区就出现了，干得好！
@@ -1950,7 +1871,7 @@ Picking a hero changes the `HeroDetailComponent.hero` input property.
 选取英雄会修改输入属性`HeroDetailComponent.hero`。
 
 Angular does _not_ call `ngOnChanges` when the user modifies the hero's _name_ or _secret lairs_.
-Fortunately, you can learn about such changes by subscribing to one of the form control properties 
+Fortunately, you can learn about such changes by subscribing to one of the form control properties
 that raises a change event.
 
 当用户修改英雄的*名字*或*秘密小屋*时，Angular*并不会*调用`ngOnChanges`。
@@ -2008,7 +1929,7 @@ You should see a new name in the log after each keystroke.
 ### 什么时候用它
 
 An interpolation binding is the easier way to _display_ a name change.
-Subscribing to an observable form control property is handy for triggering 
+Subscribing to an observable form control property is handy for triggering
 application logic _within_ the component class.
 
 插值表达式绑定时显示姓名变化比较简单的方式。
@@ -2034,8 +1955,8 @@ After you implement both features in this section, the form will look like this:
 在实现完本节的这些特性之后，表单是这样的：
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/reactive-forms/save-revert-buttons.png" width="389px" alt="Form with save & revert buttons"></img>
+<figure>
+  <img src="generated/images/guide/reactive-forms/save-revert-buttons.png" alt="Form with save & revert buttons">
 </figure>
 
 
@@ -2059,7 +1980,7 @@ to a save method on the injected `HeroService`.
 
 This original `hero` had the pre-save values. The user's changes are still in the _form model_.
 So you create a new `hero` from a combination of original hero values (the `hero.id`)
-and deep copies of the changed form model values, using the `prepareSaveHero` helper. 
+and deep copies of the changed form model values, using the `prepareSaveHero` helper.
 
 原始的`hero`中有一些保存之前的值，用户的修改仍然是在*表单模型*中。
 所以我们要根据原始英雄（根据`hero.id`找到它）的值组合出一个新的`hero`对象，并用`prepareSaveHero`助手来深层复制变化后的模型值。
@@ -2080,7 +2001,7 @@ and deep copies of the changed form model values, using the `prepareSaveHero` he
 **地址的深层复制**
 
 Had you assigned the `formModel.secretLairs` to `saveHero.addresses` (see line commented out),
-the addresses in `saveHero.addresses` array would be the same objects 
+the addresses in `saveHero.addresses` array would be the same objects
 as the lairs in the `formModel.secretLairs`.
 A user's subsequent changes to a lair street would mutate an address street in the `saveHero`.
 
@@ -2242,4 +2163,4 @@ The key files of the final version are as follows:
 You can download the complete source for all steps in this guide
 from the <live-example title="Reactive Forms Demo in Plunker">Reactive Forms Demo</live-example> live example.
 
-你可以到<live-example title="Reactive Forms Demo in Plunker">响应式表单在线例子</live-example>中下载本章所有步骤的完整代码。
\ No newline at end of file
+你可以到<live-example title="Reactive Forms Demo in Plunker">响应式表单在线例子</live-example>中下载本章所有步骤的完整代码。
diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md
index d44b31a1da..f5b47bef56 100644
--- a/aio/content/guide/router.md
+++ b/aio/content/guide/router.md
@@ -1,11 +1,6 @@
-@title
-路由与导航
-
-@intro
-揭示如何通过 Angular 路由进行基本的屏幕导航。
-
-@description
+# Routing & Navigation
 
+# 路由与导航
 
 The Angular **`Router`** enables navigation from one [view](guide/glossary#view) to the next
 as users perform application tasks.
@@ -17,6 +12,10 @@ of a small application that you can <live-example>run live in the browser</live-
 
 本章覆盖了该路由器的主要特性。我们通过一个小型应用的成长演进来讲解它。参见<live-example>在线例子</live-example>。
 
+<!-- style for all tables on this page -->
+<style>
+  td, th {vertical-align: top}
+</style>
 
 
 ## Overview
@@ -55,326 +54,6 @@ Angular的`Router`（即“路由器”）借鉴了这个模型。它把浏览
   当用户点击按钮、从下拉框中选取，或响应来自任何地方的事件时，我们也可以在代码控制下进行导航。
   路由器还在浏览器的历史日志中记录下这些活动，这样浏览器的前进和后退按钮也能照常工作。
 
-
-# Contents
-
-# 目录
-
-* [The Basics](guide/router#basics)
-
-  [基础知识](guide/router#basics)
-
-  * [`<base href>`](guide/router#basics-base-href)
-
-  * [Router imports](guide/router#basics-router-imports)
-
-    [导入路由库](guide/router#basics-router-imports)
-
-  * [Configuration](guide/router#basics-config)
-
-    [配置](guide/router#basics-config)
-
-  * [Router outlet](guide/router#basics-router-outlet)
-
-    [路由出口](guide/router#basics-router-outlet)
-
-  * [Router links](guide/router#basics-router-links)
-
-    [路由链接](guide/router#basics-router-links)
-
-  * [Router state](guide/router#basics-router-state)
-
-    [路由状态](guide/router#basics-router-state)
-
-  * [Summary](guide/router#basics-summary)
-
-    [小结](guide/router#basics-summary)
-
-* [The sample application](guide/router#sample-app-intro)
-
-  [范例应用](guide/router#sample-app-intro)
-
-* [Milestone 1: Getting started with the router](guide/router#getting-started)
-
-  [里程碑1：开始使用路由器](guide/router#getting-started)
-
-  * [Setting the base href](guide/router#base-href)
-
-    [设置基地址（base href）](guide/router#base-href)
-
-  * [Importing from the router library](guide/router#import)
-
-    [从路由库导入](guide/router#import)
-
-  * [Define routes](guide/router#route-config)
-
-    [定义路由](guide/router#route-config)
-
-  * [The `AppComponent` shell](guide/router#shell)
-
-    [`AppComponent`壳](guide/router#shell)
-
-  * [RouterOutlet](guide/router#router-outlet)
-
-  * [`RouterLink binding`](guide/router#router-link)
-
-    [`RouterLink`绑定](guide/router#router-link)
-
-  * [`RouterLinkActive` binding](guide/router#router-link-active)
-
-    [`RouterLinkActive`绑定](guide/router#router-link-active)
-
-  * [Wildcard route](guide/router#wildcard)
-
-    [通配符路由](guide/router#wildcard)
-
-  * [The default route to heroes](guide/router#default-route)
-
-    [把默认路由设置为英雄管理路由](guide/router#default-route)
-
-* [Milestone 2: Routing module](guide/router#routing-module)
-
-  [里程碑2：路由模块](guide/router#routing-module)
-
-  * [Refactor the routing configuration into a routing module](guide/router#routing-refactor)
-
-    [把路由配置重构到路由模块中](guide/router#routing-refactor)
-
-  * [Do you need a Routing Module?](guide/router#why-routing-module)
-
-    [我们需要路由模块吗？](guide/router#why-routing-module)
-
-* [Milestone 3: Heroes feature](guide/router#heroes-feature)
-
-  [里程碑3：英雄管理特性区](guide/router#heroes-feature)
-
-  * [Add heroes functionality](guide/router#heroes-functionality)
-
-    [添加英雄管理功能](guide/router#heroes-functionality)
-
-  * [Hero feature routing requirements](guide/router#hero-routing-requirements)
-
-    [英雄管理特性区的路由需求](guide/router#hero-routing-requirements)
-
-  * [Hero feature route configuration](guide/router#hero-routing-module)
-
-    [英雄管理特性区的路由配置](guide/router#hero-routing-module)
-
-  * [Add the routing module to the _HeroesModule_](guide/router#adding-routing-module)
-
-    [把路由模块添加到_HeroesModule_中](guide/router#adding-routing-module)
-
-  * [Remove duplicate hero routes](guide/router#remove-duplicate-hero-routes)
-
-    [移除重复的英雄管理路由](guide/router#remove-duplicate-hero-routes)
-
-  * [Import hero module into AppModule](guide/router#merge-hero-routes)
-
-    [把英雄管理模块导入AppModule中](guide/router#merge-hero-routes)
-
-  * [Module import order matters](guide/router#routing-module-order)
-
-    [要注意模块导入的顺序](guide/router#routing-module-order)
-
-  * [Route Definition with a parameter](guide/router#route-def-with-parameter)
-
-    [带参数的路由定义](guide/router#route-def-with-parameter)
-
-  * [Navigate to hero detail imperatively](guide/router#navigate)
-
-    [强制导航到路由详情](guide/router#navigate)
-
-  * [Setting the route parameters in the list view](guide/router#route-parameters)
-
-    [在列表视图中设置路由参数](guide/router#route-parameters)
-
-  * [ActivatedRoute: the one-stop-shop for route information](guide/router#activated-route)
-
-    [ActivatedRoute：一站式获取路由信息](guide/router#activated-route)
-
-  * [Observable params and component reuse](guide/router#reuse)
-
-    [监听参数变化与组件复用](guide/router#reuse)
-
-  * [Snapshot: the _no-observable_ alternative](guide/router#snapshot)
-
-    [Snapshot：*不需要Observable*的备选方案](guide/router#snapshot)
-
-  * [Navigating back to the list component](guide/router#nav-to-list)
-
-    [导航回列表组件](guide/router#nav-to-list)
-
-  * [Route Parameters: Required or optional?](guide/router#optional-route-parameters)
-
-    [路由参数：必要还是可选？](guide/router#optional-route-parameters)
-
-  * [Heroes list: optionally selecting a hero](guide/router#optionally-selecting)
-
-    [英雄列表：可选的当前英雄](guide/router#optionally-selecting)
-
-  * [Route parameters in the *ActivatedRoute* service](guide/router#route-parameters-activated-route)
-
-    [在*ActivatedRoute*服务中的路由参数](guide/router#route-parameters-activated-route)
-
-  * [Adding animations to the routed component](guide/router#route-animation)
-
-    [为路由组件添加动画](guide/router#route-animation)
-
-  * [Milestone 3 wrap up](guide/router#milestone-3-wrap-up)
-
-    [里程碑3总结](guide/router#milestone-3-wrap-up)
-
-* [Milestone 4: Crisis center feature](guide/router#milestone-4)
-
-  [里程碑4：危机中心特性区](guide/router#milestone-4)
-
-  * [A crisis center with child routes](guide/router#crisis-child-routes)
-
-    [带子路由的英雄中心](guide/router#crisis-child-routes)
-
-  * [Child routing component](guide/router#child-routing-component)
-
-    [子路由组件](guide/router#child-routing-component)
-
-  * [Child route configuration](guide/router#child-route-config)
-
-    [子路由配置](guide/router#child-route-config)
-
-  * [Import crisis center module into the _AppModule_ routes](guide/router#import-crisis-module)
-
-    [把危机中心模块导入到*AppModule*路由中](guide/router#import-crisis-module)
-
-  * [Relative navigation](guide/router#relative-navigation)
-
-    [相对导航](guide/router#relative-navigation)
-
-  * [Navigate to crisis detail with a relative URL](guide/router#nav-to-crisis)
-
-    [使用相对URL导航到危机详情](guide/router#nav-to-crisis)
-
-  * [Displaying multiple routes in named outlets](guide/router#named-outlets)
-
-    [使用命名出口（outlet）同时显示多个路由](guide/router#named-outlets)
-
-  * [Secondary routes](guide/router#secondary-routes)
-
-    [第二路由](guide/router#secondary-routes)
-
-  * [Add a secondary route](guide/router#add-secondary-route)
-
-    [添加第二路由](guide/router#add-secondary-route)
-
-  * [Secondary route navigation: merging routes during navigation](guide/router#secondary-route-navigation)
-
-    [第二路由导航：在导航期间合并路由](guide/router#secondary-route-navigation)
-
-  * [Clearing secondary routes](guide/router#clear-secondary-routes)
-
-    [清理第二路由](guide/router#clear-secondary-routes)
-
-* [Milestone 5: Route guards](guide/router#guards)
-
-  [里程碑5：路由守卫](guide/router#guards)
-
-  * [`CanActivate`: requiring authentication](guide/router#can-activate-guard)
-
-    [`CanActivate`：需要认证](guide/router#can-activate-guard)
-
-  * [Component-less route: grouping routes without a component](guide/router#component-less-route)
-
-    [无组件路由：不借助组件对路由进行分组](guide/router#component-less-route)
-
-  * [Guard the admin feature](guide/router#guard-admin-feature)
-
-    [守卫管理特性区](guide/router#guard-admin-feature)
-
-  * [Teach *AuthGuard* to authenticate](guide/router#teach-auth)
-
-    [教*AuthGuard*进行认证](guide/router#teach-auth)
-
-  * [Add the login component](guide/router#add-login-component)
-
-    [添加登录组件](guide/router#add-login-component)
-
-  * [`CanActivateChild`: guarding child routes](guide/router#can-activate-child-guard)
-
-    [`CanActivateChild`：保护子路由](guide/router#can-activate-child-guard)
-
-  * [`CanDeactivate`: handling unsaved changes](guide/router#can-deactivate-guard)
-
-    [`CanDeactivate`：处理未保存的更改](guide/router#can-deactivate-guard)
-
-  * [Cancel and save](guide/router#cancel-save)
-
-    [取消与保存](guide/router#cancel-save)
-
-  * [`Resolve`: pre-fetching component data](guide/router#resolve-guard)
-
-    [`Resolve`：预先获取组件数据](guide/router#resolve-guard)
-
-  * [Fetch data before navigating](guide/router#fetch-before-navigating)
-
-    [在导航之前获取数据](guide/router#fetch-before-navigating)
-
-  * [Query parameters and fragments](guide/router#query-parameters)
-
-    [查询参数与URL片段](guide/router#query-parameters)
-
-* [Milestone 6: Asynchronous routing](guide/router#asynchronous-routing)
-
-  [里程碑6：异步路由](guide/router#asynchronous-routing)
-
-  * [Lazy loading route configuration](guide/router#lazy-loading-route-config)
-
-    [惰性加载路由配置](guide/router#lazy-loading-route-config)
-
-  * [CanLoad Guard: guarding unauthorized loading of feature modules](guide/router#can-load-guard)
-
-    [CanLoad守卫：保护未认证的特性模块，控制是否加载](guide/router#can-load-guard)
-
-  * [Preloading: background loading of feature areas](guide/router#preloading)
-
-    [预加载：后台加载特性区](guide/router#preloading)
-
-  * [How preloading works](guide/router#how-preloading)
-
-    [预加载工作原理](guide/router#how-preloading)
-
-  * [Lazy load the crisis center](guide/router#lazy-load-crisis-center)
-
-    [惰性加载危机中心特性区](guide/router#lazy-load-crisis-center)
-
-  * [_CanLoad_ blocks preload](guide/router#preload-canload)
-
-    [用_CanLoad_组织预加载](guide/router#preload-canload)
-
-  * [Custom Preloading Strategy](guide/router#custom-preloading)
-
-    [自定义预加载策略](guide/router#custom-preloading)
-
-  * [Inspect the router's configuration](guide/router#inspect-config)
-
-    [审查路由器的配置](guide/router#inspect-config)
-
-  * [Wrap up and final app](guide/router#final-app)
-
-    [总结与最终版应用](guide/router#final-app)
-
-* [Appendices](guide/router#appendices)
-
-  [附录](guide/router#appendices)
-
-  * [Appendix: link parameters array](guide/router#link-parameters-array)
-
-    [附录：链接参数数组](guide/router#link-parameters-array)
-
-  * [Appendix: *LocationStrategy* and browser URL styles](guide/router#location-strategy)
-
-    [附录：*LocationStrategy*和浏览器URL风格](guide/router#location-strategy)
-
-
-
-
 {@a basics}
 
 
@@ -440,7 +119,7 @@ Angular的路由器是一个可选的服务，它用来呈现指定的URL所对
 
 
 
-You'll learn about more options in the [details below](guide/router#browser-url-styles).
+You'll learn about more options in the [details below](#browser-url-styles).
 
 我们将会在[后面](guide/router#browser-url-styles)详细讲解其它选项。
 
@@ -456,7 +135,7 @@ You'll learn about more options in the [details below](guide/router#browser-url-
 
 ### 配置
 
-A routed Angular application has one singleton instance of the *`Router`* service. 
+A routed Angular application has one singleton instance of the *`Router`* service.
 When the browser's URL changes, that router looks for a corresponding `Route`
 from which it can determine the component to display.
 
@@ -472,7 +151,7 @@ and adds the result to the `AppModule`'s `imports` array.
 并把它的返回值添加到`AppModule`的`imports`数组中。
 
 
-<code-example path="router/src/app/app.module.0.ts" linenums="false" title="src/app/app.module.ts (excerpt)" region="excerpt">
+<code-example path="router/src/app/app.module.0.ts" linenums="false" title="src/app/app.module.ts (excerpt)">
 
 </code-example>
 
@@ -488,7 +167,7 @@ Pass it to the `RouterModule.forRoot` method in the module `imports` to configur
 把它传给`RouterModule.forRoot`方法并传给本模块的`imports`数组就可以配置路由器。
 
 Each `Route` maps a URL `path` to a component.
-There are _no leading slashes_ in the _path_. 
+There are _no leading slashes_ in the _path_.
 The router parses and builds the final URL for you,
 allowing you to use both relative and absolute paths when navigating between application views.
 
@@ -496,7 +175,7 @@ allowing you to use both relative and absolute paths when navigating between app
 注意，`path`不能以*斜杠（`/`）*开头。
 路由器会为解析和构建最终的URL，这样当我们在应用的多个视图之间导航时，可以任意使用相对路径和绝对路径。
 
-The `:id` in the first route is a token for a route parameter. In a URL such as `/hero/42`, "42"
+The `:id` in the second route is a token for a route parameter. In a URL such as `/hero/42`, "42"
 is the value of the `id` parameter. The corresponding `HeroDetailComponent`
 will use that value to find and present the hero whose `id` is 42.
 You'll learn more about route parameters later in this guide.
@@ -507,14 +186,14 @@ You'll learn more about route parameters later in this guide.
 
 
 The `data` property in the third route is a place to store arbitrary data associated with
-this specific route. The data property is accessible within each activated route. Use it to store 
-items such as page titles, breadcrumb text, and other read-only, _static_ data. 
-You'll use the [resolve guard](guide/router#resolve-guard) to retrieve _dynamic_ data later in the guide.
+this specific route. The data property is accessible within each activated route. Use it to store
+items such as page titles, breadcrumb text, and other read-only, _static_ data.
+You'll use the [resolve guard](#resolve-guard) to retrieve _dynamic_ data later in the guide.
 
 第三个路由中的`data`属性用来存放于每个具体路由有关的任意信息。该数据可以被任何一个激活路由访问，并能用来保存诸如
 页标题、面包屑以及其它静态只读数据。本章稍后的部分，我们将使用[resolve守卫](guide/router#resolve-guard)来获取动态数据。
 
-The `empty path` in the fourth route represents the default path for the application,
+The **empty path** in the fourth route represents the default path for the application,
 the place to go when the path in the URL is empty, as it typically is at the start.
 This default route redirects to the route for the `/heroes` URL and, therefore, will display the `HeroesListComponent`.
 
@@ -522,20 +201,21 @@ This default route redirects to the route for the `/heroes` URL and, therefore,
 这个默认路由会重定向到URL `/heroes`，并显示`HeroesListComponent`。
 
 The `**` path in the last route is a **wildcard**. The router will select this route
-if the requested URL doesn't match any paths for routes defined earlier in the configuration. 
+if the requested URL doesn't match any paths for routes defined earlier in the configuration.
 This is useful for displaying a "404 - Not Found" page or redirecting to another route.
 
 最后一个路由中的`**`路径是一个**通配符**。当所请求的URL不匹配前面定义的路由表中的任何路径时，路由器就会选择此路由。
 这个特性可用于显示“404 - Not Found”页，或自动重定向到其它路由。
 
 **The order of the routes in the configuration matters** and this is by design. The router uses a **first-match wins**
-strategy when matching routes, so more specific routes should be placed above less specific routes. 
+strategy when matching routes, so more specific routes should be placed above less specific routes.
 In the configuration above, routes with a static path are listed first, followed by an empty path route,
-that matches the default route. 
+that matches the default route.
 The wildcard route comes last because it matches _every URL_ and should be selected _only_ if no other routes are matched first.
 
 **这些路由的定义顺序**是刻意如此设计的。路由器使用**先匹配者优先**的策略来匹配路由，所以，具体路由应该放在通用路由的前面。在上面的配置中，带静态路径的路由被放在了前面，后面是空路径路由，因此它会作为默认路由。而通配符路由被放在最后面，这是因为它能匹配上*每一个URL*，因此应该**只有在**前面找不到其它能匹配的路由时才匹配它。
 
+If you need to see what events are happening during the navigation lifecycle, there is the **enableTracing** option as part of the router's default configuration. This outputs each router event that took place during each navigation lifecycle to the browser console. This should only be used for _debugging_ purposes. You set the `enableTracing: true` option in the object passed as the second argument to the `RouterModule.forRoot()` method.
 
 {@a basics-router-outlet}
 
@@ -584,21 +264,21 @@ Consider the following template:
 
 
 
-The `RouterLink` directives on the anchor tags give the router control over those elements. 
+The `RouterLink` directives on the anchor tags give the router control over those elements.
 The navigation paths are fixed, so you can assign a string to the `routerLink` (a "one-time" binding).
 
 `a`标签上的`RouterLink`指令让路由器得以控制这个`a`元素。
 这里的导航路径是固定的，因此可以把一个字符串赋给`routerLink`（“一次性”绑定）。
 
 Had the navigation path been more dynamic, you could have bound to a template expression that
-returned an array of route link parameters (the _link parameters array_). 
+returned an array of route link parameters (the _link parameters array_).
 The router resolves that array into a complete URL.
 
 如果需要更加动态的导航路径，那就把它绑定到一个返回*链接参数数组*的模板表达式。
 路由器会把这个数组解析成完整的URL。
 
 The **`RouterLinkActive`** directive on each anchor tag helps visually distinguish the anchor for the currently selected "active" route.
-The router adds the `active` CSS class to the element when the associated *RouterLink* becomes active. 
+The router adds the `active` CSS class to the element when the associated *RouterLink* becomes active.
 You can add this directive to the anchor or to its parent element.
 
 每个`a`标签上的**`RouterLinkActive`**指令可以帮用户在外观上区分出当前选中的“活动”路由。
@@ -625,6 +305,103 @@ to get information from parent, child and sibling routes.
 
 路由器状态为我们提供了从任意激活路由开始向上或向下遍历路由树的一种方式，以获得关于父、子、兄弟路由的信息。
 
+### Router events
+
+During each navigation, the `Router` emits navigation events through the `Router.events` property. These events range from when the navigation starts and ends to many points in between. The full list of navigation events is displayed in the table below.
+
+<table>
+  <tr>
+    <th>
+      Router Event
+    </th>
+
+    <th>
+      Description
+    </th>
+  </tr>
+
+  <tr>
+    <td>
+      <code>NavigationStart</code>
+    </td>
+    <td>
+
+      An [event](api/router/NavigationStart) triggered when navigation starts.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>RoutesRecognized</code>
+    </td>
+    <td>
+
+      An [event](api/router/RoutesRecognized) triggered when the Router parses the URL and the routes are recognized.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>RouteConfigLoadStart</code>
+    </td>
+    <td>
+
+      An [event](api/router/RouteConfigLoadStart) triggered before the `Router` 
+      [lazy loads](#asynchronous-routing) a route configuration.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>RouteConfigLoadEnd</code>
+    </td>
+    <td>
+
+      An [event](api/router/RouteConfigLoadEnd) triggered after a route has been lazy loaded.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>NavigationEnd</code>
+    </td>
+    <td>
+
+      An [event](api/router/NavigationEnd) triggered when navigation ends successfully.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>NavigationCancel</code>
+    </td>
+    <td>
+
+      An [event](api/router/NavigationCancel) triggered when navigation is canceled. 
+      This is due to a [Route Guard](#guards) returning false during navigation.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>NavigationError</code>
+    </td>
+    <td>
+
+      An [event](api/router/NavigationError) triggered when navigation fails due to an unexpected error.
+
+    </td>
+  </tr>
+</table>
+
+These events are logged to the console when the `enableTracing` option is enabled also. Since the events are provided as an `Observable`, you can `filter()` for events of interest and `subscribe()` to them to make decisions based on the sequence of events in the navigation process.
+
 
 {@a basics-summary}
 
@@ -645,13 +422,6 @@ Here are the key `Router` terms and their meanings:
 
 下面是一些*路由器*中的关键词汇及其含义：
 
-
-<style>
-  td, th { vertical-align: top }
-</style>
-
-
-
 <table>
 
   <tr>
@@ -728,14 +498,13 @@ Here are the key `Router` terms and their meanings:
     <td>
 
       <p>
-        A separate Angular module that provides the necessary service providers
+        A separate NgModule that provides the necessary service providers
         and directives for navigating through application views.
       </p>
 
       <p>
         一个独立的Angular模块，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令。
       </p>
-
     </td>
 
   </tr>
@@ -988,15 +757,12 @@ Here are the key `Router` terms and their meanings:
     </td>
 
     <td>
-
-      <p>
-        An Angular component with a <code>RouterOutlet</code> that displays views based on router navigations.
-      </p>
+<p>      An Angular component with a <code>RouterOutlet</code> that displays views based on router navigations.
+</p>
 
       <p>
         一个带有<code>RouterOutlet</code>的Angular组件，它根据路由器的导航来显示相应的视图。
       </p>
-
     </td>
 
   </tr>
@@ -1061,8 +827,8 @@ Along the way, it highlights design decisions and describes key features of the
 
 
 The guide proceeds as a sequence of milestones as if you were building the app step-by-step.
-But, it is not a tutorial and it glosses over details of Angular application construction 
-that are more thoroughly covered elsewhere in the documentation.  
+But, it is not a tutorial and it glosses over details of Angular application construction
+that are more thoroughly covered elsewhere in the documentation.
 
 如果打算一步步构建出本应用，本章就会经过一系列里程碑。
 但是，本章并不是一个教程，它隐藏了构造Angular应用的细节，那些细节会在本文档的其它地方展开。
@@ -1108,8 +874,8 @@ and the *Heroes* view with its list of heroes.
 等应用热身完毕，我们就会看到一排导航按钮，以及一个*英雄列表*视图。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/hero-list.png' alt="Hero List" width="250"></img>
+<figure>
+  <img src='generated/images/guide/router/hero-list.png' alt="Hero List">
 </figure>
 
 
@@ -1119,13 +885,13 @@ Select one hero and the app takes you to a hero editing screen.
 选择其中之一，该应用就会把我们带到此英雄的编辑页面。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/hero-detail.png' alt="Crisis Center Detail" width="250"></img>
+<figure>
+  <img src='generated/images/guide/router/hero-detail.png' alt="Crisis Center Detail">
 </figure>
 
 
 
-Alter the name. 
+Alter the name.
 Click the "Back" button and the app returns to the heroes list which displays the changed hero name.
 Notice that the name change took effect immediately.
 
@@ -1143,32 +909,32 @@ Now click the *Crisis Center* link for a list of ongoing crises.
 现在，点击*危机中心*链接，前往*危机*列表页。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/crisis-center-list.png' alt="Crisis Center List" width="250"></img>
+<figure>
+  <img src='generated/images/guide/router/crisis-center-list.png' alt="Crisis Center List">
 </figure>
 
 
 
 Select a crisis and the application takes you to a crisis editing screen.
-The _Crisis Detail_ appears in a child view on the same page, beneath the list. 
+The _Crisis Detail_ appears in a child view on the same page, beneath the list.
 
 选择其中之一，该应用就会把我们带到此危机的编辑页面。
 *危机详情*出现在了当前页的子视图区，也就是在列表的紧下方。
 
-Alter the name of a crisis. 
+Alter the name of a crisis.
 Notice that the corresponding name in the crisis list does _not_ change.
 
 修改危机的名称。
 注意，危机列表中的相应名称**并没有**修改。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/crisis-center-detail.png' alt="Crisis Center Detail" width="250"></img>
+<figure>
+  <img src='generated/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail">
 </figure>
 
 
 
-Unlike *Hero Detail*, which updates as you type, 
+Unlike *Hero Detail*, which updates as you type,
 *Crisis Detail* changes are temporary until you either save or discard them by pressing the "Save" or "Cancel" buttons.
 Both buttons navigate back to the *Crisis Center* and its list of crises.
 
@@ -1187,8 +953,8 @@ Up pops a dialog box.
 我们会看到弹出了一个对话框。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/confirm-dialog.png' alt="Confirm Dialog" width="250"></img>
+<figure>
+  <img src='generated/images/guide/router/confirm-dialog.png' alt="Confirm Dialog">
 </figure>
 
 
@@ -1197,7 +963,7 @@ You can say "OK" and lose your changes or click "Cancel" and continue editing.
 
 我们可以回答“确定”以放弃这些更改，或者回答“取消”来继续编辑。
 
-Behind this behavior is the router's `CanDeactivate` guard. 
+Behind this behavior is the router's `CanDeactivate` guard.
 The guard gives you a chance to clean-up or ask the user's permission before navigating away from the current view.
 
 这种行为的幕后是路由器的`CanDeactivate`守卫。
@@ -1212,7 +978,7 @@ Proceed to the first application milestone.
 
 我们这就开始本应用的第一个里程碑。
 
-
+{@a getting-started}
 
 ## Milestone 1: Getting started with the router
 
@@ -1223,8 +989,8 @@ Begin with a simple version of the app that navigates between two empty views.
 开始本应用的一个简版，它在两个空路由之间导航。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/router-1-anim.gif' alt="App in action" width="250"></img>
+<figure>
+  <img src='generated/images/guide/router/router-1-anim.gif' alt="App in action">
 </figure>
 
 
@@ -1237,7 +1003,7 @@ Begin with a simple version of the app that navigates between two empty views.
 ### 设置*&lt;base href>*  
 
 The router uses the browser's
-<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" target="_blank" title="HTML5 browser history push-state">history.pushState</a>
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" title="HTML5 browser history push-state">history.pushState</a>
 for navigation. Thanks to `pushState`, you can make  in-app URL paths look the way you want them to
 look, e.g. `localhost:3000/crisis-center`. The in-app URLs can be indistinguishable from server URLs.
 
@@ -1255,7 +1021,7 @@ Modern HTML5 browsers were the first to support `pushState` which is why many pe
 
 
 HTML5 style navigation is the router default.
-In the [LocationStrategy and browser URL styles](guide/router#browser-url-styles) Appendix, 
+In the [LocationStrategy and browser URL styles](#browser-url-styles) Appendix,
 learn why HTML5 style is preferred, how to adjust its behavior, and how to switch to the
 older hash (#) style, if necessary.
 
@@ -1267,7 +1033,7 @@ HTML 5风格的导航是路由器的默认值。请到下面的附录[浏览器U
 
 
 You must **add a
-<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" target="_blank" title="base href">&lt;base href&gt; element</a>**
+<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" title="base href">&lt;base href&gt; element</a>**
 to the app's `index.html` for `pushState` routing to work.
 The browser uses the `<base href>` value to prefix *relative* URLs when referencing
 CSS files, scripts, and images.
@@ -1359,7 +1125,7 @@ The first configuration defines an array of two routes with simple paths leading
 
 我们的第一个配置中定义了由两个路由构成的数组，它们分别通过路径(path)导航到了`CrisisListComponent`和`HeroListComponent`组件。
 
-Each definition translates to a [Route](api/router/index/Route-interface) object which has two things: a
+Each definition translates to a [Route](api/router/Route) object which has two things: a
 `path`, the URL path segment for this route; and a
 `component`, the component associated with this route.
 
@@ -1387,7 +1153,7 @@ browser's address location and history with the URL for that path.
 
 
 Here is the first configuration. Pass the array of routes, `appRoutes`, to the `RouterModule.forRoot` method.
-It returns a module, containing the configured `Router` service provider, plus other providers that the routing library requires. 
+It returns a module, containing the configured `Router` service provider, plus other providers that the routing library requires.
 Once the application is bootstrapped, the `Router` performs the initial navigation based on the current browser URL.
 
 下面是第一个配置。我们将路由数组传递到`RouterModule.forRoot`方法，该方法返回一个包含已配置的`Router`服务提供商模块和一些其它路由包需要的服务提供商。应用启动时，`Router`将在当前浏览器URL的基础上进行初始导航。
@@ -1405,7 +1171,7 @@ Once the application is bootstrapped, the `Router` performs the initial navigati
 
 Adding the configured `RouterModule` to the `AppModule` is sufficient for simple route configurations.
 As the application grows, you'll want to refactor the routing configuration into a separate file
-and create a **[Routing Module](guide/router#routing-module)**, a special type of `Service Module` dedicated to the purpose
+and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicated to the purpose
 of routing in feature modules.
 
 作为简单的路由配置，将添加配置好的`RouterModule`到`AppModule`中就足够了。
@@ -1434,8 +1200,8 @@ and a *router outlet* where the router swaps views on and off the page. Here's w
 根组件`AppComponent`是本应用的壳。它在顶部有一个标题、一个带两个链接的导航条，在底部有一个*路由器出口*，路由器会在它所指定的位置上把视图切入或调出页面。就像下图中所标出的：
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/shell-and-outlet.png' alt="Shell" width="300"></img>
+<figure>
+  <img src='generated/images/guide/router/shell-and-outlet.png' alt="Shell">
 </figure>
 
 
@@ -1513,7 +1279,7 @@ takes a single value bound to the `[fragment]` input binding.
 
 
 
-Learn about the how you can also use the _link parameters array_ in the [appendix below](guide/router#link-parameters-array).
+Learn about the how you can also use the _link parameters array_ in the [appendix below](#link-parameters-array).
 
 还可以到[后面的附录](guide/router#link-parameters-array)中学习如何使用**链接参数数组**。
 
@@ -1534,9 +1300,9 @@ the `RouterLinkActive` directive that look like `routerLinkActive="..."`.
 
 每个A标签还有一个到`RouterLinkActive`指令的[属性绑定](guide/template-syntax#property-binding)，就像`routerLinkActive="..."`。
 
-The template expression to the right of the equals (=) contains a space-delimited string of CSS classes 
+The template expression to the right of the equals (=) contains a space-delimited string of CSS classes
 that the Router will add when this link is active (and remove when the link is inactive).
-You can also set the `RouterLinkActive` directive to a string of classes such as `[routerLinkActive]="active fluffy"`
+You can also set the `RouterLinkActive` directive to a string of classes such as `[routerLinkActive]="'active fluffy'"`
 or bind it to a component property that returns such a string.
 
 等号（=）右侧的模板表达式包含用空格分隔的一些CSS类。当路由激活时路由器就会把它们添加到此链接上（反之则移除）。我们还可以把`RouterLinkActive`指令绑定到一个CSS类组成的数组，如`[routerLinkActive]="['...']"`。
@@ -1583,16 +1349,16 @@ The current state of `app.component.ts` looks like this:
 
 ### 通配符路由
 
-You've created two routes in the app so far, one to `/crisis-center` and the other to `/heroes`. 
+You've created two routes in the app so far, one to `/crisis-center` and the other to `/heroes`.
 Any other URL causes the router to throw an error and crash the app.
 
 我们以前在应用中创建过两个路由，一个是`/crisis-center`，另一个是`/heroes`。
 所有其它URL都会导致路由器抛出错误，并让应用崩溃。
 
-Add a **wildcard** route to intercept invalid URLs and handle them gracefully. 
-A _wildcard_ route has a path consisting of two asterisks. It matches _every_ URL. 
+Add a **wildcard** route to intercept invalid URLs and handle them gracefully.
+A _wildcard_ route has a path consisting of two asterisks. It matches _every_ URL.
 The router will select _this_ route if it can't match a route earlier in the configuration.
-A wildcard route can navigate to a custom "404 Not Found" component or [redirect](guide/router#redirect) to an existing route.
+A wildcard route can navigate to a custom "404 Not Found" component or [redirect](#redirect) to an existing route.
 
 可以添加一个**通配符**路由来拦截所有无效的URL，并优雅的处理它们。
 *通配符*路由的`path`是两个星号（`**`），它会匹配*任何* URL。
@@ -1604,7 +1370,7 @@ A wildcard route can navigate to a custom "404 Not Found" component or [redirect
 
 
 
-The router selects the route with a [_first match wins_](guide/router#example-config) strategy.
+The router selects the route with a [_first match wins_](#example-config) strategy.
 Wildcard routes are the least specific routes in the route configuration.
 Be sure it is the _last_ route in the configuration.
 
@@ -1616,7 +1382,7 @@ Be sure it is the _last_ route in the configuration.
 
 
 
-To test this feature, add a button with a `RouterLink` to the `HeroListComponent` template and set the link to `"/sidekicks"`. 
+To test this feature, add a button with a `RouterLink` to the `HeroListComponent` template and set the link to `"/sidekicks"`.
 
 要测试本特性，请往`HeroListComponent`的模板中添加一个带`RouterLink`的按钮，并且把它的链接设置为`"/sidekicks"`。
 
@@ -1627,7 +1393,7 @@ To test this feature, add a button with a `RouterLink` to the `HeroListComponent
 
 
 
-The application will fail if the user clicks that button because you haven't defined a `"/sidekicks"` route yet. 
+The application will fail if the user clicks that button because you haven't defined a `"/sidekicks"` route yet.
 
 当用户点击该按钮时，应用就会失败，因为我们尚未定义过`"/sidekicks"`路由。
 
@@ -1647,7 +1413,7 @@ Create the `PageNotFoundComponent` to display when users visit invalid URLs.
 创建`PageNotFoundComponent`，以便在用户访问无效网址时显示它。
 
 
-<code-example path="router/src/app/not-found.component.ts" linenums="false" title="src/app/not-found.component.ts (404 component)" region="404 component">
+<code-example path="router/src/app/not-found.component.ts" linenums="false" title="src/app/not-found.component.ts (404 component)">
 
 </code-example>
 
@@ -1678,26 +1444,17 @@ When the application launches, the initial URL in the browser bar is something l
 
 <code-example>
   localhost:3000
-
 </code-example>
 
+That doesn't match any of the concrete configured routes which means 
+the router falls through to the wildcard route and displays the `PageNotFoundComponent`.
 
-
-That doesn't match any of the configured routes which means that the application won't display any component when it's launched.
-The user must click one of the links to trigger a navigation and display a component.
-
-它不能匹配任何已配置的路由，这表示当应用启动时，它不会显示任何组件。
-用户必须点击一个链接来触发导航或者显示组件。
-
-It would be nicer if the application had a **default route** that displayed the list of heroes immediately,
-just as it will when the user clicks the "Heroes" link or pastes `localhost:3000/heroes` into the address bar.
-
-如果应用有一个*默认路由*显然会更好，它会立即显示英雄列表，就像用户点击了“Heroes”链接或者把`localhost:3000/heroes`粘贴进地址栏一样。
-
+The application needs a **default route** to a valid page.
+The default page for this app is the list of heroes.
+The app should navigate there as if the user clicked the "Heroes" link or pasted `localhost:3000/heroes` into the address bar.
 
 {@a redirect}
 
-
 ### Redirecting routes
 
 ### 重定向路由
@@ -1716,7 +1473,6 @@ It's just above the wildcard route in the following excerpt showing the complete
 
 
 <code-example path="router/src/app/app-routing.module.1.ts" linenums="false" title="src/app/app-routing.module.ts (appRoutes)" region="appRoutes">
-
 </code-example>
 
 
@@ -1745,7 +1501,7 @@ to match the redirect route when the *remaining* URL ***begins*** with the redir
 
 `pathMatch`的另一个可能的值是`'prefix'`，它会告诉路由器：当*剩下的*URL以这个跳转路由中的`prefix`值开头时，就会匹配上这个跳转路由。
 
-Don't do that here. 
+Don't do that here.
 If the `pathMatch` value were `'prefix'`, _every_ URL would match `''`.
 
 在这里不能这么做！如果`pathMatch`的值是`'prefix'`，那么*每个*URL都会匹配上`''`。
@@ -1753,10 +1509,10 @@ If the `pathMatch` value were `'prefix'`, _every_ URL would match `''`.
 Try setting it to `'prefix'` then click the `Go to sidekicks` button.
 Remember that's a bad URL and you should see the "Page not found" page.
 Instead, you're still on the "Heroes" page.
-Enter a bad URL in the browser address bar. 
+Enter a bad URL in the browser address bar.
 You're instantly re-routed to `/heroes`.
 _Every_ URL, good or bad, that falls through to _this_ route definition
-will be a match. 
+will be a match.
 
 尝试把它设置为`'prefix'`，然后点击`Go to sidekicks`按钮。别忘了，它是一个无效URL，本应显示“Page not found”页。
 但是，我们看到了“英雄列表”页。在地址栏中输入一个无效的URL，我们又被路由到了`/heroes`。
@@ -1767,7 +1523,7 @@ Remember to restore the redirect to `pathMatch = 'full'`.
 
 默认路由应该只有在*整个*URL等于`''`时才重定向到`HeroListComponent`，别忘了把重定向路由设置为`pathMatch = 'full'`。
 
-Learn more in Victor Savkin's 
+Learn more in Victor Savkin's
 [post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
 
 要了解更多，参见Victor Savkin的帖子[关于重定向](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes)。
@@ -1942,7 +1698,7 @@ Here are the files discussed in this milestone.
 </code-tabs>
 
 
-
+{@a routing-module}
 
 ## Milestone 2: *Routing module*
 
@@ -1951,7 +1707,7 @@ Here are the files discussed in this milestone.
 In the initial route configuration, you provided a simple setup with two routes used
 to configure the application for routing. This is perfectly fine for simple routing.
 As the application grows and you make use of more `Router` features, such as guards,
-resolvers, and child routing, you'll naturally want to refactor the routing configuration into its own file. 
+resolvers, and child routing, you'll naturally want to refactor the routing configuration into its own file.
 We recommend moving the routing information into a special-purpose module called a *Routing Module*.
 
 在原始的路由配置中，我们提供了仅有两个路由的简单配置来设置应用的路由。对于简单的路由，这没有问题。
@@ -1974,7 +1730,7 @@ The **Routing Module** has several characteristics:
 
   为路由服务提供商（包括守卫和解析器等）提供一个共同的地方
   
-* Does **not** [declare components](cookbook/ngmodule-faq#routing-module).
+* Does **not** [declare components](guide/ngmodule-faq#routing-module).
 
   **不要**[声明组件](cookbook/ngmodule-faq#routing-module)
 
@@ -1986,7 +1742,7 @@ The **Routing Module** has several characteristics:
 
 ### 将路由配置重构为*路由模块*
 
-Create a file named `app-routing.module.ts` in the `/app` folder to contain the routing module. 
+Create a file named `app-routing.module.ts` in the `/app` folder to contain the routing module.
 
 在`/app`目录下创建一个名叫`app-routing.module.ts`的文件，以包含这个路由模块。
 
@@ -2001,7 +1757,7 @@ so you can import it later in `AppModule`.
 
 遵循规约，添加一个`AppRoutingModule`类并导出它，以便稍后在`AppModule`中导入它。
 
-Finally, re-export the Angular `RouterModule` by adding it to the module `exports` array. 
+Finally, re-export the Angular `RouterModule` by adding it to the module `exports` array.
 By re-exporting the `RouterModule` here and importing `AppRoutingModule` in `AppModule`,
 the components declared in `AppModule` will have access to router directives such as `RouterLink` and `RouterOutlet`.
 
@@ -2019,7 +1775,7 @@ After these steps, the file should look like this.
 
 
 
-Next, update the `app.module.ts` file, 
+Next, update the `app.module.ts` file,
 first importing the newly created `AppRoutingModule` from `app-routing.module.ts`,
 then replacing `RouterModule.forRoot` in the `imports` array with the `AppRoutingModule`.
 
@@ -2037,8 +1793,8 @@ then replacing `RouterModule.forRoot` in the `imports` array with the `AppRoutin
 
 
 
-Later in this guide you will create [multiple routing modules](guide/router#hero-routing-module) and discover that
-you must import those routing modules [in the correct order](guide/router#routing-module-order).
+Later in this guide you will create [multiple routing modules](#hero-routing-module) and discover that
+you must import those routing modules [in the correct order](#routing-module-order).
 
 本章稍后的部分，我们将创建一个[多路由模块](guide/router#hero-routing-module)，并讲解为何我们必须[以正确的顺序导入那些路由模块](guide/router#routing-module-order)。
 
@@ -2095,7 +1851,7 @@ It is where developers expect to find and expand routing configuration.
 它的存在突出了模块时被路由的事实。
 开发者可以很自然的从路由模块中查找和扩展路由配置。
 
-
+{@a heroes-feature}
 
 ## Milestone 3: Heroes feature
 
@@ -2120,8 +1876,8 @@ Now you'll learn the following:
 
 This example recreates the heroes feature in the "Services" episode of the
 [Tour of Heroes tutorial](tutorial/toh-pt4 "Tour of Heroes: Services"),
-and you'll be copying much of the code 
-from the <live-example name="toh-4" title="Tour of Heroes: Services example code"></live-example>.
+and you'll be copying much of the code
+from the <live-example name="toh-pt4" title="Tour of Heroes: Services example code"></live-example>.
 
 这个例子重写了[《英雄指南》](tutorial/toh-pt4 "Tour of Heroes: Services")的“服务”部分的英雄列表特性，我们可以从<live-example name="toh-4" title="Tour of Heroes: Services example code"></live-example>中赋值大部分代码过来。
 
@@ -2130,13 +1886,13 @@ Here's how the user will experience this version of the app:
 下面是用户将看到的版本：
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/router-2-anim.gif' alt="App in action"></img>
+<figure>
+  <img src='generated/images/guide/router/router-2-anim.gif' alt="App in action">
 </figure>
 
 
 
-A typical application has multiple *feature areas*, 
+A typical application has multiple *feature areas*,
 each dedicated to a particular business purpose.
 
 典型的应用具有多个*特性区*，每个特性区都专注于特定的业务用途。
@@ -2149,7 +1905,7 @@ Most developers prefer to put each feature area in its own folder.
 大部分开发人员更喜欢把每个特性区都放在它自己的目录下。
 
 You are about to break up the app into different *feature modules*, each with its own concerns.
-Then you'll import into the main module and navigate among them. 
+Then you'll import into the main module and navigate among them.
 
 我们准备把应用拆分成多个不同的*特性模块*，每个特有模块都有自己的关注点。
 然后，我们就会把它们导入到主模块中，并且在它们之间导航。
@@ -2179,7 +1935,7 @@ Follow these steps:
   在`src/app/heroes`目录下创建新的`hero-list.component.ts`文件。
   
 * Copy into it the contents of the `app.component.ts` from
-  the <live-example name="toh-4" title="Tour of Heroes: Services example code">"Services" tutorial</live-example>.
+  the <live-example name="toh-pt4" title="Tour of Heroes: Services example code">"Services" tutorial</live-example>.
   
     把<live-example name="toh-4" title="Tour of Heroes: Services example code">教程中的“服务”部分</live-example>的代码复制到`app.component.ts`中。
     
@@ -2275,7 +2031,7 @@ That information must come from outside.
 
 详情视图就不同了。它要显示一个特定的英雄，但是它本身却无法知道显示哪一个，此信息必须来自外部。
 
-When the user selects a hero from the list, the app should navigate to the detail view 
+When the user selects a hero from the list, the app should navigate to the detail view
 and show that hero.
 You tell the detail view which hero to display by including the selected hero's id in the route URL.
 
@@ -2329,13 +2085,13 @@ and export the `HeroRoutingModule` class.
 
 从新位置`src/app/heroes/`目录中导入英雄相关的组件，定义两个“英雄管理”路由，并导出`HeroRoutingModule`类。
 
-Now that you have routes for the `Heroes` module, register them with the `Router` via the 
+Now that you have routes for the `Heroes` module, register them with the `Router` via the
 `RouterModule` _almost_ as you did in the `AppRoutingModule`.
 
 现在，我们有了`Heroes`模块的路由，还得在`RouterModule`中把它们注册给*路由器*，和`AppRoutingModule`中的做法几乎完全一样。
 
 There is a small but critical difference.
-In the `AppRoutingModule`, you used the static **`RouterModule.forRoot`** method to register the routes and application level service providers. 
+In the `AppRoutingModule`, you used the static **`RouterModule.forRoot`** method to register the routes and application level service providers.
 In a feature module you use the static **`forChild`** method.
 
 这里有少量但是关键的不同点。
@@ -2347,8 +2103,8 @@ In a feature module you use the static **`forChild`** method.
 
 
 
-Only call `RouterModule.forRoot` in the root `AppRoutingModule` 
-(or the `AppModule` if that's where you register top level application routes). 
+Only call `RouterModule.forRoot` in the root `AppRoutingModule`
+(or the `AppModule` if that's where you register top level application routes).
 In any other module, you must call the **`RouterModule.forChild`** method to register additional routes.
 
 只在根模块`AppRoutingModule`中调用`RouterModule.forRoot`（如果在`AppModule`中注册应用的顶级路由，那就在`AppModule`中调用）。
@@ -2372,8 +2128,8 @@ just as you added `AppRoutingModule` to the `AppModule`.
 我们在`Heroes`模块中从`heroes-routing.module.ts`中导入`HeroRoutingModule`，并注册其路由。
 
 Open `heroes.module.ts`.
-Import the `HeroRoutingModule` token from `heroes-routing.module.ts` and 
-add it to the `imports` array of the `HeroesModule`. 
+Import the `HeroRoutingModule` token from `heroes-routing.module.ts` and
+add it to the `imports` array of the `HeroesModule`.
 The finished `HeroesModule` looks like this:
 
 打开`heroes.module.ts`，从`heroes-routing.module.ts`中导入`HeroRoutingModule`并把它添加到`HeroesModule`的`imports`数组中。
@@ -2398,7 +2154,7 @@ by way of the `HeroesModule`, and in the `AppRoutingModule`.
 
 英雄类的路由目前定义在两个地方：`HeroesRoutingModule`中（并最终给`HeroesModule`）和`AppRoutingModule`中。
 
-Routes provided by feature modules are combined together into their imported module's routes by the router. 
+Routes provided by feature modules are combined together into their imported module's routes by the router.
 This allows you to continue defining the feature module routes without modifying the main route configuration.
 
 由特性模块提供的路由会被路由器再组合上它们所导入的模块的路由。
@@ -2416,7 +2172,7 @@ These are concerns at the top level of the application itself.
 它们是应用程序顶层该自己处理的关注点。
 
 
-<code-example path="router/src/app/app-routing.module.2.ts" linenums="false" title="src/app/app-routing.module.ts (v2)" region="v2">
+<code-example path="router/src/app/app-routing.module.2.ts" linenums="false" title="src/app/app-routing.module.ts (v2)">
 
 </code-example>
 
@@ -2440,8 +2196,8 @@ Import the `HeroesModule` and add it to the `imports` array in the `@NgModule` m
 导入`HeroesModule`并且把它加到根模块`AppModule`的`@NgModule`元数据中的`imports`数组中。
 
 Remove the `HeroListComponent` from the `AppModule`'s `declarations` because it's now provided by the `HeroesModule`.
-This is important. There can be only _one_ owner for a declared component. 
-In this case, the `Heroes` module is the owner of the `Heroes` components and is making them available to 
+This is important. There can be only _one_ owner for a declared component.
+In this case, the `Heroes` module is the owner of the `Heroes` components and is making them available to
 components in the `AppModule` via the `HeroesModule`.
 
 从`AppModule`的`declarations`中移除`HeroListComponent`，因为它现在已经改由`HeroesModule`提供了。
@@ -2450,7 +2206,7 @@ components in the `AppModule` via the `HeroesModule`.
 
 As a result, the `AppModule` no longer has specific knowledge of the hero feature, its components, or its route details.
 You can evolve the hero feature with more components and different routes.
-That's a key benefit of creating a separate module for each feature area.  
+That's a key benefit of creating a separate module for each feature area.
 
 最终，`AppModule`不再了解那些特定于“英雄”特性的知识，比如它的组件、路由细节等。
 我们可以让“英雄”特性独立演化，添加更多的组件或各种各样的路由。
@@ -2486,21 +2242,21 @@ Most importantly, it comes _after_ the `HeroesModule`.
 
 
 
-The order of route configuration matters. 
+The order of route configuration matters.
 The router accepts the first route that matches a navigation request path.
 
 路由配置的顺序很重要。
 路由器会接受第一个匹配上导航所要求的路径的那个路由。
 
-When all routes were in one `AppRoutingModule`, 
-you put the default and [wildcard](guide/router#wildcard) routes last, after the `/heroes` route,
+When all routes were in one `AppRoutingModule`,
+you put the default and [wildcard](#wildcard) routes last, after the `/heroes` route,
 so that the router had a chance to match a URL to the `/heroes` route _before_
 hitting the wildcard route and navigating to "Page not found".
 
 当所有路由都在同一个`AppRoutingModule`时，我们要把默认路由和[通配符路由](guide/router#wildcard)放在最后（这里是在`/heroes`路由后面），
 这样路由器才有机会匹配到`/heroes`路由，否则它就会先遇到并匹配上该通配符路由，并导航到“页面未找到”路由。
 
-The routes are no longer in one file. 
+The routes are no longer in one file.
 They are distributed across two modules, `AppRoutingModule` and `HeroesRoutingModule`.
 
 这些路由不再位于单一文件中。他们分布在两个不同的模块中：`AppRoutingModule`和`HeroesRoutingModule`。
@@ -2508,7 +2264,7 @@ They are distributed across two modules, `AppRoutingModule` and `HeroesRoutingMo
 Each routing module augments the route configuration _in the order of import_.
 If you list `AppRoutingModule` first, the wildcard route will be registered
 _before_ the hero routes.
-The wildcard route &mdash; which matches _every_ URL &mdash; 
+The wildcard route &mdash; which matches _every_ URL &mdash;
 will intercept the attempt to navigate to a hero route.
 
 每个路由模块都会根据*导入的顺序*把自己的路由配置追加进去。
@@ -2523,7 +2279,7 @@ will intercept the attempt to navigate to a hero route.
 Reverse the routing modules and see for yourself that
 a click of the heroes link results in "Page not found".
 Learn about inspecting the runtime router configuration
-[below](guide/router#inspect-config "Inspect the router config").
+[below](#inspect-config "Inspect the router config").
 
 反转路由模块的导入顺序，我们就会看到当点击英雄相关的链接时被导向了“页面未找到”路由。
 要学习如何在运行时查看路由器配置，参见[稍后的内容](guide/router#inspect-config "Inspect the router config")。
@@ -2558,7 +2314,7 @@ In this case, the router will insert the `id` of a hero into that slot.
 
 注意路径中的`:id`令牌。它为*路由参数*在路径中创建一个“空位”。在这里，我们期待路由器把英雄的`id`插入到那个“空位”中。
 
-If you tell the router to navigate to the detail component and display "Magneta", 
+If you tell the router to navigate to the detail component and display "Magneta",
 you expect a hero id to appear in the browser URL like this:
 
 如果要告诉路由器导航到详情组件，并让它显示“Magneta”，我们会期望这个英雄的`id`像这样显示在浏览器的URL中：
@@ -2588,7 +2344,7 @@ pattern and go to the same "Magneta" detail view.
 
 
 
-Embedding the route parameter token, `:id`, 
+Embedding the route parameter token, `:id`,
 in the route definition path is a good choice for this scenario
 because the `id` is *required* by the `HeroDetailComponent` and because
 the value `15` in the path clearly distinguishes the route to "Magneta" from
@@ -2644,7 +2400,7 @@ Make the following few changes to the component's template:
 
 
 The template defines an `*ngFor` repeater such as [you've seen before](guide/displaying-data#ngFor).
-There's a `(click)` [event binding](guide/template-syntax#event-binding) to the component's 
+There's a `(click)` [event binding](guide/template-syntax#event-binding) to the component's
 `onSelect` method which you implement as follows:
 
 模板像[以前](guide/displaying-data#ngFor)一样定义了一个`*ngFor`重复器。
@@ -2725,63 +2481,149 @@ the `HeroDetailComponent` via the `ActivatedRoute` service.
 ### ActivatedRoute：一站式获取路由信息
 
 The route path and parameters are available through an injected router service called the
-[ActivatedRoute](api/router/index/ActivatedRoute-interface).
+[ActivatedRoute](api/router/ActivatedRoute).
 It has a great deal of useful information including:
 
 该路由的路径和参数可以通过注入进来的一个名叫[ActivatedRoute](api/router/index/ActivatedRoute-interface)的路由服务来获取。
 它有一大堆有用的信息，包括：
 
+<table>
+  <tr>
+    <th>
+      Property
+    </th>
+
+    <th>
+      Description
+    </th>
+  </tr>
+
+  <tr>
+    <td>
+      <code>url</code>
+    </td>
+    <td>
+
+    An `Observable` of the route path(s), represented as an array of strings for each part of the route path.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>data</code>
+    </td>
+    <td>
+
+    An `Observable` that contains the `data` object provided for the route. Also contains any resolved values from the [resolve guard](#resolve-guard).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>paramMap</code>
+    </td>
+    <td>
+
+    An `Observable` that contains a [map](api/router/ParamMap) of the required and [optional parameters](#optional-route-parameters) specific to the route. The map supports retrieving single and multiple values from the same parameter.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>queryParamMap</code>
+    </td>
+    <td>
+
+    An `Observable` that contains a [map](api/router/ParamMap) of the [query parameters](#query-parameters) available to all routes. 
+    The map supports retrieving single and multiple values from the query parameter.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>fragment</code>
+    </td>
+    <td>
+
+    An `Observable` of the URL [fragment](#fragment) available to all routes.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>outlet</code>
+    </td>
+    <td>
+
+    The name of the `RouterOutlet` used to render the route. For an unnamed outlet, the outlet name is _primary_.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>routeConfig</code>
+    </td>
+    <td>
+
+    The route configuration used for the route that contains the origin path.
+
+    </td>
+  </tr>
+
+    <tr>
+    <td>
+      <code>parent</code>
+    </td>
+    <td>
+
+    The route's parent `ActivatedRoute` when this route is a [child route](#child-routing-component).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>firstChild</code>
+    </td>
+    <td>
+
+    Contains the first `ActivatedRoute` in the list of this route's child routes.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>children</code>
+    </td>
+    <td>
+
+    Contains all the [child routes](#child-routing-component) activated under the current route.
+
+    </td>
+  </tr>
+</table>
 
 <div class="l-sub-section">
 
+Two older properties are still available. They are less capable than their replacements, discouraged, and may be deprecated in a future Angular version.
 
+**`params`** &mdash; An `Observable` that contains the required and [optional parameters](#optional-route-parameters) specific to the route. Use `paramMap` instead.
 
-**`url`**: An `Observable` of the route path(s), represented as an array of strings for each part of the route path.
-
-**`url`**: 该路由路径的`Observable`对象。它的值是一个由路径中各个部件组成的字符串数组。
-
-**`data`**: An `Observable` that contains the `data` object provided for the route. Also contains any resolved values from the [resolve guard](guide/router#resolve-guard).
-
-**`data`**: 该路由提供的`data`对象的一个`Observable`对象。还包含从[resolve守卫](guide/router#resolve-guard)中解析出来的值。
-
-**`params`**: An `Observable` that contains the required and [optional parameters](guide/router#optional-route-parameters) specific to the route.
-
-**`params`**: 包含该路由的必选参数和[可选参数](guide/router#optional-route-parameters)的`Observable`对象。
-
-**`queryParams`**: An `Observable` that contains the [query parameters](guide/router#query-parameters) available to all routes.
-
-**`queryParams`**: 一个包含对所有路由都有效的[查询参数](guide/router#query-parameters)的`Observable`对象。
-
-**`fragment`**:  An `Observable` of the URL [fragment](guide/router#fragment) available to all routes.
-
-**`fragment`**:  一个包含对所有路由都有效的[片段](guide/router#fragment)值的`Observable`对象。
-
-**`outlet`**: The name of the `RouterOutlet` used to render the route. For an unnamed outlet, the outlet name is _primary_.
-
-**`outlet`**: `RouterOutlet`的名字，用于指示渲染该路由的位置。对于未命名的`RouterOutlet`，这个名字是**primary**。
-
-**`routeConfig`**: The route configuration used for the route that contains the origin path.
-
-**`routeConfig`**: 与该路由的原始路径对应的配置信息。
-
-**`parent`**: an `ActivatedRoute` that contains the information from the parent route when using [child routes](guide/router#child-routing-component).
-
-**`parent`**: 当使用[子路由](guide/router#child-routing-component)时，它是一个包含父路由信息的`ActivatedRoute`对象。
-
-**`firstChild`**: contains the first `ActivatedRoute` in the list of child routes.
-
-**`firstChild`**: 包含子路由列表中的第一个`ActivatedRoute`对象。
-
-**`children`**: contains all the [child routes](guide/router#child-routing-component) activated under the current route.
-
-**`children`**: 包含当前路由下激活的全部[子路由](guide/router#child-routing-component)。
-
+**`queryParams`** &mdash; An `Observable` that contains the [query parameters](#query-parameters) available to all routes. 
+Use `queryParamMap` instead.
 
 </div>
 
+#### _Activated Route_ in action
 
-
-Import the `Router`, `ActivatedRoute`, and `Params` tokens from the router package.
+Import the `Router`, `ActivatedRoute`, and `ParamMap` tokens from the router package.
 
 我们要从路由器（`router`）包中导入`Router`、`ActivatedRoute`和`Params`类。
 
@@ -2816,71 +2658,102 @@ that the component requires and reference them as private variables.
 
 </code-example>
 
-
-
 Later, in the `ngOnInit` method, you use the `ActivatedRoute` service to retrieve the parameters for the route,
 pull the hero `id` from the parameters and retrieve the hero to display.
 
 然后，在`ngOnInit`方法中，我们用`ActivatedRoute`服务来接收路由的参数，从参数中取得该英雄的`id`，并接收此英雄用于显示。
 
 
-<div class="l-sub-section">
-
-
-
-Put this data access logic in the `ngOnInit` method rather than inside the constructor to improve the component's testability.
-Angular calls the `ngOnInit` method shortly after creating an instance of the `HeroDetailComponent`
-so the hero will be retrieved in time to use it.
-
-把数据访问逻辑放进`ngOnInit`方法中，而不是构造函数中可以提升组件的可测试性。
-Angular会在创建完`HeroDetailComponent`的实例之后调用`ngOnInit`方法，因此该英雄会在即将使用时接收到。
-  
-Learn more about the `ngOnInit` method and other component lifecycle hooks in the [Lifecycle Hooks](guide/lifecycle-hooks) guide.
-
-要了解关于`ngOnInit`方法和其它组件生命周期钩子的更多知识，参见[生命周期钩子](guide/lifecycle-hooks)一章。
-
-
-</div>
-
-
-
 <code-example path="router/src/app/heroes/hero-detail.component.ts" linenums="false" title="src/app/heroes/hero-detail.component.ts (ngOnInit)" region="ngOnInit">
 
 </code-example>
 
+The `paramMap` processing is a bit tricky. When the map changes, you `get()` 
+the `id` parameter from the changed parameters.
 
+Then you tell the `HeroService` to fetch the hero with that `id` and return the result of the `HeroService` request. 
 
-Since the parameters are provided as an `Observable`, you use the `switchMap` operator to
-provide them for the `id` parameter by name and tell the `HeroService` to fetch the hero with that `id`.
+You might think to use the RxJS `map` operator.
+But the `HeroService` returns an `Observable<Hero>`.
+Your subscription wants the `Hero`, not an `Observable<Hero>`.
+So you flatten the `Observable` with the `switchMap` operator instead.
 
 由于参数是作为`Observable`提供的，所以我们得用`switchMap`操作符来根据名字取得`id`参数，并告诉`HeroService`来获取带有那个`id`的英雄。
 
-The `switchMap` operator allows you to perform an action with the current value of the `Observable`,
-and map it to a new `Observable`. As with many `rxjs` operators, `switchMap` handles
-an `Observable` as well as a `Promise` to retrieve the value they emit.
+The `switchMap` operator also cancels previous in-flight requests. If the user re-navigates to this route
+with a new `id` while the `HeroService` is still retrieving the old `id`, `switchMap` discards that old request and returns the hero for the new `id`.
 
-`switchMap`允许你在`Observable`的当前值上执行一个动作，并将它映射一个新的`Observable`。像许多其它`rxjs`操作符一样，
-`switchMap`既可以处理`Observable`也可以处理`Promise`发射的值。
+Finally, you activate the observable with `subscribe` method and (re)set the component's `hero` property with the retrieved hero.
 
-The `switchMap` operator will also cancel any in-flight requests if the user re-navigates to the route
-while still retrieving a hero. 
+#### _ParamMap_ API
 
-如果用户重新导航到该路由，并且它正在获取一个英雄时，`switchMap`操作符还将取消任何正在执行的请求。
+The `ParamMap` API is inspired by the [URLSearchParams interface](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams). It provides methods
+to handle parameter access for both route parameters (`paramMap`) and query parameters (`queryParamMap`).
 
-Use the `subscribe` method to detect `id` changes and to (re)set the retrieved `Hero`.
+<table>
+  <tr>
+    <th>
+      Member
+    </th>
 
-使用`subscribe`方法来检测`id`的变化，并据此重新获取英雄。
+    <th>
+      Description
+    </th>
+  </tr>
 
+  <tr>
+    <td>
+      <code>has(name)</code>
+    </td>
+    <td>
+
+    Returns `true` if the parameter name is in the map of parameters.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>get(name)</code>
+    </td>
+    <td>
+
+    Returns the parameter name value (a `string`) if present, or `null` if the parameter name is not in the map. Returns the _first_ element if the parameter value is actually an array of values. 
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>getAll(name)</code>
+    </td>
+    <td>
+
+    Returns a `string array` of the parameter name value if found, or an empty `array` if the parameter name value is not in the map. Use `getAll` when a single parameter could have multiple values.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>keys</code>
+    </td>
+    <td>
+
+    Returns a `string array` of all parameter names in the map.
+
+    </td>
+  </tr>
+</table>
 
 {@a reuse}
 
-
-#### Observable <i>params</i> and component reuse
+#### Observable <i>paramMap</i> and component reuse
 
 #### <i>参数</i>的可观察对象（Observable）与组件复用
 
-In this example, you retrieve the route params from an `Observable`.
-That implies that the route params can change during the lifetime of this component.
+In this example, you retrieve the route parameter map from an `Observable`.
+That implies that the route parameter map can change during the lifetime of this component.
 
 在这个例子中，我们订阅了路由参数的`Observable`对象。
 这种写法暗示着这些路由参数在该组件的生存期内可能会变化。
@@ -2907,7 +2780,7 @@ Better to simply re-use the same component instance and update the parameter.
 
 Unfortunately, `ngOnInit` is only called once per component instantiation.
 You need a way to detect when the route parameters change from _within the same instance_.
-The observable `params` property handles that beautifully.
+The observable `paramMap` property handles that beautifully.
 
 不幸的是，`ngOnInit`对每个实例只调用一次。
   我们需要一种方式来检测_在同一个实例中_路由参数什么时候发生了变化。
@@ -2922,7 +2795,7 @@ When subscribing to an observable in a component, you almost always arrange to u
 
 当在组件中订阅一个可观察对象时，我们通常总是要在组件销毁时取消这个订阅。
 
-There are a few exceptional observables where this is not necessary. 
+There are a few exceptional observables where this is not necessary.
 The `ActivatedRoute` observables are among the exceptions.
 
 但是也有少数例外情况不需要取消订阅。
@@ -2934,7 +2807,7 @@ The `Router` destroys a routed component when it is no longer needed and the inj
 `ActivateRoute`及其可观察对象都是由`Router`本身负责管理的。
 `Router`会在不再需要时销毁这个路由组件，而注入进去的`ActivateRoute`也随之销毁了。
 
-Feel free to unsubscribe anyway. It is harmless and never a bad practice.  
+Feel free to unsubscribe anyway. It is harmless and never a bad practice.
 
 不过，我们仍然可以随意取消订阅，这不会造成任何损害，而且也不是一项坏的实践。
 
@@ -2966,7 +2839,7 @@ be re-used, you can simplify the code with the *snapshot*.
 
 假如我们很确定这个`HeroDetailComponent`组件的实例*永远、永远*不会被复用，那就可以使用*快照*来简化这段代码。
 
-The `route.snapshot` provides the initial value of the route parameters.
+The `route.snapshot` provides the initial value of the route parameter map.
 You can access the parameters directly without subscribing or adding observable operators.
 It's much simpler to write and read:
 
@@ -2985,10 +2858,10 @@ It's much simpler to write and read:
 
 
 
-**Remember:** you only get the _initial_ value of the parameters with this technique.
-Stick with the observable `params` approach if there's even a chance that the router 
+**Remember:** you only get the _initial_ value of the parameter map with this technique.
+Stick with the observable `paramMap` approach if there's even a chance that the router
 could re-use the component.
-This sample stays with the observable `params` strategy just in case.
+This sample stays with the observable `paramMap` strategy just in case.
 
 **记住：**，用这种技巧，我们只得到了这些参数的_初始_值。
 如果有可能连续多次导航到此组件，那么就该用`params`可观察对象的方式。
@@ -3024,12 +2897,12 @@ It holds the _path to the `HeroListComponent`_:
 </code-example>
 
 
-
+{@a optional-route-parameters}
 
 ### Route Parameters: Required or optional?
 ### 路由参数：必须还是可选？
 
-Use [*route parameters*](guide/router#route-parameters) to specify a *required* parameter value *within* the route URL
+Use [*route parameters*](#route-parameters) to specify a *required* parameter value *within* the route URL
 as you do when navigating to the `HeroDetailComponent` in order to view the hero with *id*15:
 
 如果想导航到`HeroDetailComponent`以对id为15的英雄进行查看并编辑，就要在路由的URL中使用[*路由参数*](guide/router#route-parameters)来指定*必要*参数值。
@@ -3043,27 +2916,27 @@ as you do when navigating to the `HeroDetailComponent` in order to view the hero
 
 
 You can also add *optional* information to a route request.
-For example, when returning to the heroes list from the hero detail view, 
+For example, when returning to the heroes list from the hero detail view,
 it would be nice if the viewed hero was preselected in the list.
 
 我们也能在路由请求中添加*可选*信息。
 比如，当从`HeroDetailComponent`返回英雄列表时，如果能自动选中刚刚查看过的英雄就好了。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/selected-hero.png' alt="Selected hero"></img>
+<figure>
+  <img src='generated/images/guide/router/selected-hero.png' alt="Selected hero">
 </figure>
 
 
 
-You'll implement this feature in a moment by including the viewed hero's `id` 
+You'll implement this feature in a moment by including the viewed hero's `id`
 in the URL as an optional parameter when returning from the `HeroDetailComponent`.
 
 如果我们能在从`HeroDetailComponent`返回时在URL中带上英雄Magneta的`id`，不就可以了吗？接下来我们就尝试实现这个场景。
 
 Optional information takes other forms. Search criteria are often loosely structured, e.g., `name='wind*'`.
-Multiple values are common&mdash;`after='12/31/2015' & before='1/1/2017'`&mdash;in no 
-particular order&mdash;`before='1/1/2017' & after='12/31/2015'`&mdash; in a 
+Multiple values are common&mdash;`after='12/31/2015' & before='1/1/2017'`&mdash;in no
+particular order&mdash;`before='1/1/2017' & after='12/31/2015'`&mdash; in a
 variety of formats&mdash;`during='currentYear'`.
 
 可选信息有很多种形式。搜索条件通常就不是严格结构化的，比如`name='wind*'`；有多个值也很常见，如`after='12/31/2015'&before='1/1/2017'`；
@@ -3101,7 +2974,7 @@ prefer an *optional parameter* when the value is optional, complex, and/or multi
 ### 英雄列表：选定一个英雄（也可不选）
 
 When navigating to the `HeroDetailComponent` you specified the _required_ `id` of the hero-to-edit in the
-*route parameter* and made it the second item of the [_link parameters array_](guide/router#link-parameters-array).
+*route parameter* and made it the second item of the [_link parameters array_](#link-parameters-array).
 
 当导航到`HeroDetailComponent`时，我们可以在*路由参数*中指定一个所要编辑的英雄`id`，只要把它作为[链接参数数组](guide/router#link-parameters-array)中的第二个条目就可以了。
 
@@ -3258,8 +3131,8 @@ You can change that.
 `HeroListComponent`还完全不需要任何参数，也不知道该怎么处理它们。我们这就改变这一点。
 
 Previously, when navigating from the `HeroListComponent` to the `HeroDetailComponent`,
-you subscribed to the route params `Observable` and made it available to the `HeroDetailComponent`
-in the `ActivatedRoute` service. 
+you subscribed to the route parameter map `Observable` and made it available to the `HeroDetailComponent`
+in the `ActivatedRoute` service.
 You injected that service in the constructor of the `HeroDetailComponent`.
 
 以前，当从`HeroListComponent`导航到`HeroDetailComponent`时，我们通过`ActivatedRoute`服务订阅了路由参数这个`Observable`，并让它能用在`HeroDetailComponent`中。我们把该服务注入到了`HeroDetailComponent`的构造函数中。
@@ -3279,7 +3152,7 @@ First you extend the router import statement to include the `ActivatedRoute` ser
 
 
 
-Import the `switchMap` operator to perform an operation on the `Observable` of route parameters.
+Import the `switchMap` operator to perform an operation on the `Observable` of route parameter map.
 
 我们将导入`switchMap`操作符，在路由参数的`Observable`对象上执行操作。
 
@@ -3301,29 +3174,12 @@ Then you inject the `ActivatedRoute` in the `HeroListComponent` constructor.
 
 
 
-The `ActivatedRoute.params` property is an `Observable` of route parameters. The `params` emits new `id` values
-when the user navigates to the component. In `ngOnInit` you subscribe to those values, set the `selectedId`,
-and get the heroes.
+The `ActivatedRoute.paramMap` property is an `Observable` map of route parameters. The `paramMap` emits a new map of values that includes `id`
+when the user navigates to the component. In `ngOnInit` you subscribe to those values, set the `selectedId`, and get the heroes.
 
-ActivatedRoute.params属性是一个路由参数的可观察对象。当用户导航到这个组件时，params会发射一个新的id值。
+ActivatedRoute.paramMap属性是一个路由参数的可观察对象。当用户导航到这个组件时，paramMap会发射一个新值，其中包含`id`。
 在ngOnInit中，我们订阅了这些值，设置到selectedId，并获取英雄数据。
 
-
-<div class="l-sub-section">
-
-
-
-All route/query parameters are strings.
-The (+) in front of the `params['id']` expression is a JavaScript trick to convert the string to an integer.
-
-所有的路由参数或查询参数都是字符串。
-`params['id']`表达式前面的加号（+）是一个JavaScript的小技巧，用来把字符串转换成整数。
-
-
-</div>
-
-
-
 Add an `isSelected` method that returns `true` when a hero's `id` matches the selected `id`.
 
 我们添加了一个`isSelected`方法，当英雄的id和选中的id匹配时，它返回真值。
@@ -3355,8 +3211,8 @@ When the user navigates from the heroes list to the "Magneta" hero and back, "Ma
 当用户从英雄列表导航到英雄“Magneta”并返回时，“Magneta”看起来是选中的：
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/selected-hero.png' alt="Selected List"></img>
+<figure>
+  <img src='generated/images/guide/router/selected-hero.png' alt="Selected List">
 </figure>
 
 
@@ -3377,7 +3233,7 @@ The heroes feature module is almost complete, but what is a feature without some
 
 这个“英雄”特性模块就要完成了，但这个特性还没有平滑的转场效果。
 
-This section shows you how to add some [animations](guide/animations) 
+This section shows you how to add some [animations](guide/animations)
 to the `HeroDetailComponent`.
 
 在这一节，我们将为*英雄详情*组件添加一些[动画](guide/animations)。
@@ -3408,11 +3264,11 @@ This file does the following:
 
 该文件做了如下工作：
 
-* Imports the animation symbols that build the animation triggers, control state, and manage transitions between states. 
+* Imports the animation symbols that build the animation triggers, control state, and manage transitions between states.
 
   导入动画符号以构建动画触发器、控制状态并管理状态之间的过渡。
 
-* Exports a constant named `slideInDownAnimation` set to an animation trigger named *`routeAnimation`*; 
+* Exports a constant named `slideInDownAnimation` set to an animation trigger named *`routeAnimation`*;
 animated components will refer to this name.
 
   导出了一个名叫`slideInDownAnimation`的常量，并把它设置为一个名叫*`routeAnimation`的动画触发器。带动画的组件将会引用这个名字。
@@ -3421,7 +3277,7 @@ animated components will refer to this name.
 
   指定了一个*通配符状态* —— `*`，它匹配该路由组件存在时的任何动画状态。
 
-* Defines two *transitions*, one to ease the component in from the left of the screen as it enters the application view (`:enter`), 
+* Defines two *transitions*, one to ease the component in from the left of the screen as it enters the application view (`:enter`),
 the other to animate the component down as it leaves the application view (`:leave`).
 
   定义两个*过渡效果*，其中一个（`:enter`）在组件进入应用视图时让它从屏幕左侧缓动进入（ease-in），另一个（`:leave`）在组件离开应用视图时让它向下飞出。
@@ -3452,7 +3308,7 @@ Then add three `@HostBinding` properties to the class to set the animation and s
 
 
 
-The `'@routeAnimation'` passed to the first `@HostBinding` matches 
+The `'@routeAnimation'` passed to the first `@HostBinding` matches
 the name of the `slideInDownAnimation` _trigger_, `routeAnimation`.
 Set the `routeAnimation` property to `true` because you only care about the `:enter` and `:leave` states.
 
@@ -3614,7 +3470,7 @@ After these changes, the folder structure looks like this:
 
 </div>
 
-
+Here are the relevant files for this version of the sample application.
 
 Here are the relevant files for this version of the sample application.
 
@@ -3715,7 +3571,7 @@ and decide later if the differences are worthwhile.
 
 
 In keeping with the
-<a href="https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html" target="_blank" title="Separation of Concerns">*Separation of Concerns* principle</a>,
+<a href="https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html" title="Separation of Concerns">*Separation of Concerns* principle</a>,
 changes to the *Crisis Center* won't affect the `AppModule` or
 any other feature's component.
 
@@ -3734,15 +3590,10 @@ any other feature's component.
 
 ### 带有子路由的危机中心
 
-This section shows you how to organize the crisis center 
+This section shows you how to organize the crisis center
 to conform to the following recommended pattern for Angular applications:
 
-本节会展示如何组织危机中心，来满足Angular应用所推荐的模式：
-
-* Each feature area resides in its own folder. 
-
-  把每个特性放在自己的目录中。
-  
+本节会展示如何组织危机中心，来满足Angular应用所推荐的模式：* Each feature area resides in its own folder. 把每个特性放在自己的目录中。
 * Each feature has its own Angular feature module.
 
   每个特性都有自己的Angular特性模块。
@@ -3764,8 +3615,8 @@ If your app had many feature areas, the app component trees might look like this
 如果我们有更多特性区，它们的组件树是这样的：
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/component-tree.png' alt="Component Tree"></img>
+<figure>
+  <img src='generated/images/guide/router/component-tree.png' alt="Component Tree">
 </figure>
 
 
@@ -3779,15 +3630,10 @@ If your app had many feature areas, the app component trees might look like this
 
 Add the following `crisis-center.component.ts` to the `crisis-center` folder:
 
-往`crisis-center`目录下添加下列`crisis-center.component.ts`文件：
-
-
-<code-example path="router/src/app/crisis-center/crisis-center.component.ts" linenums="false" title="src/app/crisis-center/crisis-center.component.ts (minus imports)" region="minus-imports">
 
+往`crisis-center`目录下添加下列`crisis-center.component.ts`文件：<code-example path="router/src/app/crisis-center/crisis-center.component.ts" linenums="false" title="src/app/crisis-center/crisis-center.component.ts ">
 </code-example>
 
-
-
 The `CrisisCenterComponent` has the following in common with the `AppComponent`:
 
 `CrisisCenterComponent`和`AppComponent`有下列共同点：
@@ -3803,7 +3649,7 @@ just as the `AppComponent` is a shell to manage the high-level workflow.
   它是危机管理特性区的*壳*，正如`AppComponent`是管理高层工作流的壳。
 
 Like most shells, the `CrisisCenterComponent` class is very simple, simpler even than `AppComponent`:
-it has no business logic, and its template has no links, just a title and 
+it has no business logic, and its template has no links, just a title and
 `<router-outlet>` for the crisis center child views.
 
 就像大多数的壳一样，`CrisisCenterComponent`类也非常简单，甚至比`AppComponent`更简单：
@@ -3824,23 +3670,11 @@ instead you use the router to *navigate* to it.
 
 ### 子路由配置
 
-The `CrisisCenterComponent` is a *routing component* like the `AppComponent`.
-It has its own `RouterOutlet` and its own child routes.
-
-`CrisisCenterComponent`是一个像`AppComponent`一样的*路由组件*。
-它有自己的`RouterOutlet`和自己的子路由。
-
-Add the following `crisis-center-home.component.ts` to the `crisis-center` folder.
-
-把下面的`crisis-center-home.component.ts`文件添加到`crisis-center`目录中。
-
-
-<code-example path="router/src/app/crisis-center/crisis-center-home.component.ts" linenums="false" title="src/app/crisis-center/crisis-center-home.component.ts (minus imports)" region="minus-imports">
+As a host page for the "Crisis Center" feature, add the following `crisis-center-home.component.ts` to the `crisis-center` folder.
 
+<code-example path="router/src/app/crisis-center/crisis-center-home.component.ts" linenums="false" title="src/app/crisis-center/crisis-center-home.component.ts" >
 </code-example>
 
-
-
 Create a `crisis-center-routing.module.ts` file as you did the `heroes-routing.module.ts` file.
 This time, you define **child routes** *within* the parent `crisis-center` route.
 
@@ -3849,11 +3683,9 @@ This time, you define **child routes** *within* the parent `crisis-center` route
 
 
 <code-example path="router/src/app/crisis-center/crisis-center-routing.module.1.ts" linenums="false" title="src/app/crisis-center/crisis-center-routing.module.ts (Routes)" region="routes">
-
 </code-example>
 
 
-
 Notice that the parent `crisis-center` route has a `children` property
 with a single route containing the `CrisisListComponent`. The `CrisisListComponent` route
 also has a `children` array with two routes.
@@ -3880,7 +3712,7 @@ display the `Crisis Center Home` and `Crisis Detail` route components.
 
 `CrisisListComponent`包含危机列表和一个`RouterOutlet`，用以显示`Crisis Center Home`和`Crisis Detail`这两个路由组件。
 
-The `Crisis Detail` route is a child of the `Crisis List`. Since the router [reuses components](guide/router#reuse)
+The `Crisis Detail` route is a child of the `Crisis List`. Since the router [reuses components](#reuse)
 by default, the `Crisis Detail` component will be re-used as you select different crises.
 
 `Crisis Detail`路由是`Crisis List`的子路由。由于路由器默认会[复用组件](guide/router#reuse)，因此当我们选择了另一个危机时，`CrisisDetailComponent`会被复用。  
@@ -3942,7 +3774,7 @@ Here's the complete `crisis-center-routing.module.ts` file with its imports.
 
 ### 把危机中心模块导入到`AppModule`的路由中
 
-As with the `HeroesModule`, you must add the `CrisisCenterModule` to the `imports` array of the `AppModule` 
+As with the `HeroesModule`, you must add the `CrisisCenterModule` to the `imports` array of the `AppModule`
 _before_ the `AppRoutingModule`:
 
 就像`HeroesModule`模块中一样，我们必须把`CrisisCenterModule`添加到`AppModule`的`imports`数组中，就在`AppRoutingModule`前面：
@@ -3954,8 +3786,8 @@ _before_ the `AppRoutingModule`:
 
 
 
-Remove the initial crisis center route from the `app-routing.module.ts`. 
-The feature routes are now provided by the `HeroesModule` and the `CrisisCenter` modules. 
+Remove the initial crisis center route from the `app-routing.module.ts`.
+The feature routes are now provided by the `HeroesModule` and the `CrisisCenter` modules.
 
 我们还从`app.routing.ts`中移除了危机中心的初始路由。我们的路由现在是由`HeroesModule`和`CrisisCenter`特性模块提供的。
 
@@ -3983,12 +3815,12 @@ crisis detail route using an **absolute path** that begins with a _slash_.
 
 虽然构建出了危机中心特性区，我们却仍在使用以斜杠开头的**绝对路径**来导航到危机详情的路由。
 
-The router matches such _absolute_ paths to routes starting from the top of the route configuration. 
+The router matches such _absolute_ paths to routes starting from the top of the route configuration.
 
 路由器会从路由配置的顶层来匹配像这样的*绝对路径*。
 
 You could continue to use absolute paths like this to navigate inside the *Crisis Center*
-feature, but that pins the links to the parent routing structure. 
+feature, but that pins the links to the parent routing structure.
 If you changed the parent `/crisis-center` path, you would have to change the link parameters array.
 
 我们固然可以继续像*危机中心*特性区一样使用绝对路径，但是那样会把链接钉死在特定的父路由结构上。
@@ -4021,7 +3853,7 @@ The router supports directory-like syntax in a _link parameters list_ to help gu
 
 `../`会回到当前路由路径的上一级。
 
-You can combine relative navigation syntax with an ancestor path. 
+You can combine relative navigation syntax with an ancestor path.
 If you must navigate to a sibling route, you could use the `../<sibling>` convention to go up
 one level, then over and down the sibling route path.
 
@@ -4034,7 +3866,7 @@ one level, then over and down the sibling route path.
 
 
 To navigate a relative path with the `Router.navigate` method, you must supply the `ActivatedRoute`
-to give the router knowledge of where you are in the current route tree. 
+to give the router knowledge of where you are in the current route tree.
 
 用`Router.navigate`方法导航到相对路径时，我们必须提供当前的`ActivatedRoute`，来让路由器知道我们现在位于路由树中的什么位置。
 
@@ -4081,8 +3913,8 @@ You've already injected the `ActivatedRoute` that you need to compose the relati
 
 
 
-When you visit the *Crisis Center*, the ancestor path is `/crisis-center`, 
-so you only need to add the `id` of the *Crisis Center* to the existing path. 
+When you visit the *Crisis Center*, the ancestor path is `/crisis-center`,
+so you only need to add the `id` of the *Crisis Center* to the existing path.
 
 当访问*危机中心*时，其祖先路径是`/crisis-center`，所以我们只需要把*危机*的`id`添加到现有路径中就可以了。
 
@@ -4094,7 +3926,7 @@ so you only need to add the `id` of the *Crisis Center* to the existing path.
 
 
 If you were using a `RouterLink` to navigate instead of the `Router` service, you'd use the _same_
-link parameters array, but you wouldn't provide the object with the `relativeTo` property. 
+link parameters array, but you wouldn't provide the object with the `relativeTo` property.
 The `ActivatedRoute` is implicit in a `RouterLink` directive.
 
 如果我们用`RouterLink`来代替`Router`服务进行导航，就要使用*相同*的链接参数数组，不过不再需要提供`relativeTo`属性。
@@ -4134,19 +3966,19 @@ If the current crisis `id` is `3`, the resulting path back to the crisis list is
 ### 用命名出口（outlet）显示多重路由
 
 You decide to give users a way to contact the crisis center.
-When a user clicks a "Contact" button, you want to display a message in a popup view. 
+When a user clicks a "Contact" button, you want to display a message in a popup view.
 
 我们决定给用户提供一种方式来联系危机中心。
 当用户点击“Contact”按钮时，我们要在一个弹出框中显示一条消息。
 
-The popup should stay open, even when switching between pages in the application, until the user closes it 
-by sending the message or canceling. 
+The popup should stay open, even when switching between pages in the application, until the user closes it
+by sending the message or canceling.
 Clearly you can't put the popup in the same outlet as the other pages.
 
 即使在应用中的不同页面之间切换，这个弹出框也应该始终保持打开状态，直到用户发送了消息或者手动取消。
 显然，我们不能把这个弹出框跟其它放到页面放到同一个路由出口中。
 
-Until now, you've defined a single outlet and you've nested child routes 
+Until now, you've defined a single outlet and you've nested child routes
 under that outlet to group routes together.
 The router only supports one primary _unnamed_ outlet per template.
 
@@ -4189,18 +4021,12 @@ Named outlets are the targets of  _secondary routes_.
 命名出口是*第二路由*的目标。
 
 Secondary routes look like primary routes and you configure them the same way.
-They differ in a few key respects. 
+They differ in a few key respects.
 
 第二路由很像主路由，配置方式也一样。它们只有一些关键的不同点：
 
 * They are independent of each other.
-
-  它们彼此互不依赖。
-  
-* They work in combination with other routes. 
-
-  它们与其它路由组合使用。
-  
+它们彼此互不依赖。* They work in combination with other routes. 它们与其它路由组合使用。
 * They are displayed in named outlets.
 
   它们显示在命名出口中。
@@ -4213,8 +4039,8 @@ and two buttons, "Send" and "Cancel".
 它显示一个简单的表单，包括一个头、一个消息输入框和两个按钮：“Send”和“Cancel”。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/router/contact-popup.png' alt="Contact popup" width="250"></img>
+<figure>
+  <img src='generated/images/guide/router/contact-popup.png' alt="Contact popup">
 </figure>
 
 
@@ -4248,7 +4074,7 @@ Note that the `send()` method simulates latency by waiting a second before "send
 主要`send()`方法在发送消息和关闭弹出框之前通过等待模拟了一秒钟的延迟。
 
 The `closePopup()` method closes the popup view by navigating to the popup outlet with a `null`.
-That's a peculiarity covered [below](guide/router#clear-secondary-routes).
+That's a peculiarity covered [below](#clear-secondary-routes).
 
 `closePopup()`方法用把`popup`出口导航到`null`的方式关闭了弹出框。
 这个奇怪的用法在[稍后的部分](guide/router#clear-secondary-routes)有讲解。
@@ -4279,7 +4105,7 @@ Open the `AppRoutingModule` and add a new `compose` route to the `appRoutes`.
 
 The `path` and `component` properties should be familiar.
 There's a new property, `outlet`, set to `'popup'`.
-This route now targets the popup outlet and the `ComposeMessageComponent` will display there. 
+This route now targets the popup outlet and the `ComposeMessageComponent` will display there.
 
 对`path`和`component`属性应该很熟悉了吧。
 注意这个新的属性`outlet`被设置成了`'popup'`。
@@ -4330,13 +4156,13 @@ and created these objects for you.
 
 路由器假设这个路由指向了*无名*的主出口，并为我们创建这些对象。
 
-Routing to a named outlet has revealed a previously hidden router truth: 
+Routing to a named outlet has revealed a previously hidden router truth:
 you can target multiple outlets with multiple routes in the same `RouterLink` directive.
 
 当路由到一个命名出口时，我们就会发现一个以前被隐藏的真相：
 我们可以在同一个`RouterLink`指令中为多个路由出口指定多个路由。
 
-You're not actually doing that here. 
+You're not actually doing that here.
 But to target a named outlet, you must use the richer, more verbose syntax.
 
 这里我们实际上没能这样做。要想指向命名出口，我们就得使用一种更强大也更啰嗦的语法。
@@ -4368,12 +4194,7 @@ you should see something like the following URL in the browser address bar.
 
 The interesting part of the URL follows the `...`:
 
-这个URL中有意思的部分是`...`后面的这些：
-
-* The `crisis-center` is the primary navigation. 
-
-  `crisis-center`是主导航。
-
+这个URL中有意思的部分是`...`后面的这些：* The `crisis-center` is the primary navigation. `crisis-center`是主导航。
 * Parentheses surround the secondary route.
 
   圆括号包裹的部分是第二路由。
@@ -4403,7 +4224,7 @@ The router is keeping track of two separate branches in a navigation tree and ge
 路由器在导航树中对两个独立的分支保持追踪，并在URL中对这棵树进行表达。
 
 You can add many more outlets and routes, at the top level and in nested levels, creating a navigation tree with many branches.
-The router will generate the URL to go with it. 
+The router will generate the URL to go with it.
 
 我们还可以添加更多出口和更多路由（无论是在顶层还是在嵌套的子层）来创建一个带有多个分支的导航树。
 路由器将会生成相应的URL。
@@ -4427,7 +4248,7 @@ Experiment with these possibilities at your leisure.
 
 #### 清除第二路由
 
-As you've learned, a component in an outlet persists until you navigate away to a new component. 
+As you've learned, a component in an outlet persists until you navigate away to a new component.
 Secondary outlets are no different in this regard.
 
 正如我们刚刚学到的，除非导航到新的组件，否则路由出口中的组件会始终存在。
@@ -4454,7 +4275,7 @@ To see how, look at the `closePopup()` method again:
 
 
 
-It navigates imperatively with the `Router.navigate()` method, passing in a [link parameters array](guide/router#link-parameters-array).
+It navigates imperatively with the `Router.navigate()` method, passing in a [link parameters array](#link-parameters-array).
 
 它使用`Router.navigate()`方法进行强制导航，并传入了一个[链接参数数组](guide/router#link-parameters-array)。
 
@@ -4468,13 +4289,13 @@ The only named outlet is `'popup'`.
 唯一的命名出口是`'popup'`。
 
 This time, the value of `'popup'` is `null`. That's not a route, but it is a legitimate value.
-Setting the popup `RouterOutlet` to `null` clears the outlet and removes 
+Setting the popup `RouterOutlet` to `null` clears the outlet and removes
 the secondary popup route from the current URL.
 
 但这次，`'popup'`的值是`null`。`null`不是一个路由，但却是一个合法的值。
 把`popup`这个`RouterOutlet`设置为`null`会清除该出口，并且从当前URL中移除第二路由`popup`。
 
-
+{@a guards}
 
 ## Milestone 5: Route guards
 
@@ -4550,35 +4371,33 @@ router will wait for the observable to resolve to `true` or `false`.
 
 因此，路由的守卫可以返回一个`Observable<boolean>`或`Promise<boolean>`，并且路由器会等待这个可观察对象被解析为`true`或`false`。
 
-The router supports multiple kinds of guards:
+The router supports multiple guard interfaces:
 
-路由器支持多种守卫：
+* [`CanActivate`](api/router/CanActivate) to mediate navigation *to* a route.
 
-1. [`CanActivate`](api/router/index/CanActivate-interface) to mediate navigation *to* a route.
+  用[`CanActivate`](api/router/CanActivate)来处理导航*到*某路由的情况。
 
-   用[`CanActivate`](api/router/index/CanActivate-interface)来处理导航*到*某路由的情况。
+* [`CanActivateChild`](api/router/CanActivateChild) to mediate navigation *to* a child route.
 
-2. [`CanActivateChild()`](api/router/index/CanActivateChild-interface) to mediate navigation *to* a child route.
+  用[`CanActivateChild`](api/router/CanActivateChild)来处理导航*到*某子路由的情况。
 
-   用[`CanActivateChild`](api/router/index/CanActivateChild-interface)处理导航*到*子路由的情况。
+* [`CanDeactivate`](api/router/CanDeactivate) to mediate navigation *away* from the current route.
 
-3. [`CanDeactivate`](api/router/index/CanDeactivate-interface) to mediate navigation *away* from the current route.
+  用[`CanDeactivate`](api/router/CanDeactivate)来处理从当前路由*离开*的情况.
 
-   用[`CanDeactivate`](api/router/index/CanDeactivate-interface)来处理从当前路由*离开*的情况。
+* [`Resolve`](api/router/Resolve) to perform route data retrieval *before* route activation.
 
-4. [`Resolve`](api/router/index/Resolve-interface) to perform route data retrieval *before* route activation.
+  用[`Resolve`](api/router/Resolve)在路由激活*之前*获取路由数据。
 
-   用[`Resolve`](api/router/index/Resolve-interface)在路由激活*之前*获取路由数据。
+* [`CanLoad`](api/router/CanLoad) to mediate navigation *to* a feature module loaded _asynchronously_.
 
-5. [`CanLoad`](api/router/index/CanLoad-interface) to mediate navigation *to* a feature module loaded _asynchronously_.
-
-   用[`CanLoad`](api/router/index/CanLoad-interface)来处理*异步*导航到某特性模块的情况。
+   用[`CanLoad`](api/router/CanLoad)来处理*异步*导航到某特性模块的情况。
 
 
 You can have multiple guards at every level of a routing hierarchy.
-The router checks the `CanDeactivate()` and `CanActivateChild()` guards first, from the deepest child route to the top.
-Then it checks the `CanActivate()` guards from the top down to the deepest child route. If the feature module
-is loaded asynchronously, the `CanLoad()` guard is checked before the module is loaded.
+The router checks the `CanDeactivate` and `CanActivateChild` guards first, from the deepest child route to the top.
+Then it checks the `CanActivate` guards from the top down to the deepest child route. If the feature module
+is loaded asynchronously, the `CanLoad` guard is checked before the module is loaded.
 If _any_ guard returns false, pending guards that have not completed will be canceled,
 and the entire navigation is canceled.
 
@@ -4617,7 +4436,7 @@ The `CanActivate` guard is the tool to manage these navigation business rules.
 
 
 In this next section, you'll extend the crisis center with some new *administrative* features.
-Those features aren't defined yet. 
+Those features aren't defined yet.
 But you can start by adding a new feature module named `AdminModule`.
 
 在下一节，我们将会使用一些新的*管理*特性来扩展危机中心。
@@ -4707,8 +4526,8 @@ feature module, a dashboard route and two unfinished components to manage crises
 
 
 Since the admin dashboard `RouterLink` is an empty path route in the `AdminComponent`, it
-is considered a match to any route within the admin feature area. 
-You only want the `Dashboard` link to be active when the user visits that route. 
+is considered a match to any route within the admin feature area.
+You only want the `Dashboard` link to be active when the user visits that route.
 Adding an additional binding to the `Dashboard` routerLink,
 `[routerLinkActiveOptions]="{ exact: true }"`, marks the `./` link as active when
 the user navigates to the `/admin` URL and not when navigating to any of the child routes.
@@ -4742,16 +4561,16 @@ The initial admin routing configuration:
 ### 无组件路由: 不借助组件对路由进行分组
 
 Looking at the child route under the `AdminComponent`, there is a `path` and a `children`
-property but it's not using a `component`. 
-You haven't made a mistake in the configuration. 
+property but it's not using a `component`.
+You haven't made a mistake in the configuration.
 You've defined a _component-less_ route.
 
 来看`AdminComponent`下的子路由，我们有一个带**path**和**children**的子路由，
 但它没有使用**component**。这并不是配置中的失误，而是在使用**无组件**路由。
 
 The goal is to group the `Crisis Center` management routes under the `admin` path.
-You don't need a component to do it. 
-A _component-less_ route makes it easier to [guard child routes](guide/router#can-activate-child-guard).
+You don't need a component to do it.
+A _component-less_ route makes it easier to [guard child routes](#can-activate-child-guard).
 
 我们的目标是对`admin`路径下的`危机中心`管理类路由进行分组，但并不需要另一个仅用来分组路由的组件。
 一个*无组件*的路由就能让我们轻松的[守卫子路由](guide/router#can-activate-child-guard)。
@@ -4796,13 +4615,13 @@ You could hide the link until the user logs in. But that's tricky and difficult
 
 我们可以在用户登录之前隐藏这些链接，但这样会有点复杂并难以维护。
 
-Instead you'll write a `CanActivate()` guard to redirect anonymous users to the 
+Instead you'll write a `canActivate()` guard method to redirect anonymous users to the
 login page when they try to enter the admin area.
 
 我们换种方式：写一个`CanActivate()`守卫，当匿名用户尝试访问管理组件时，把它/她重定向到登录页。
 
-This is a general purpose guard&mdash;you can imagine other features 
-that require authenticated users&mdash;so you create an 
+This is a general purpose guard&mdash;you can imagine other features
+that require authenticated users&mdash;so you create an
 `auth-guard.service.ts` in the application root folder.
 
 这是一种具有通用性的守护目标（通常会有其它特性需要登录用户才能访问），所以我们在应用的根目录下创建一个`auth-guard.ts`文件。
@@ -4820,7 +4639,7 @@ It simply logs to console and `returns` true immediately, allowing navigation to
 
 
 Next, open `admin-routing.module.ts `, import the `AuthGuard` class, and
-update the admin route with a `CanActivate()` guard property that references it:
+update the admin route with a `canActivate` guard property that references it:
 
 接下来，打开`crisis-center.routes.ts`，导入`AuthGuard`类，修改管理路由并通过`CanActivate()`守卫来引用`AuthGuard`：
 
@@ -4861,7 +4680,7 @@ Here's a demo `AuthService`:
 
 Although it doesn't actually log in, it has what you need for this discussion.
 It has an `isLoggedIn` flag to tell you whether the user is authenticated.
-Its `login` method simulates an API call to an external service by returning an 
+Its `login` method simulates an API call to an external service by returning an
 Observable that resolves successfully after a short pause.
 The `redirectUrl` property will store the attempted URL so you can navigate to it after authenticating.
 
@@ -4875,7 +4694,7 @@ Revise the `AuthGuard` to call it.
 我们这就修改`AuthGuard`来调用它。
 
 
-<code-example path="router/src/app/auth-guard.service.2.ts" linenums="false" title="src/app/auth-guard.service.ts (v2)" region="v2">
+<code-example path="router/src/app/auth-guard.service.2.ts" linenums="false" title="src/app/auth-guard.service.ts (v2)">
 
 </code-example>
 
@@ -4900,7 +4719,7 @@ contains the _future_ `RouterState` of the application, should you pass through
 
 If the user is not logged in, you store the attempted URL the user came from using the `RouterStateSnapshot.url` and
 tell the router to navigate to a login page&mdash;a page you haven't created yet.
-This secondary navigation automatically cancels the current navigation; `checkLogin()` returns 
+This secondary navigation automatically cancels the current navigation; `checkLogin()` returns
 `false` just to be clear about that.
 
 如果用户还没有登录，我们会用`RouterStateSnapshot.url`保存用户来自的URL并让路由器导航到登录页（我们尚未创建该页）。
@@ -4954,7 +4773,7 @@ Register a `/login` route in the `login-routing.module.ts` and add the necessary
 
 Guards and the service providers they require _must_ be provided at the module-level. This allows
 the Router access to retrieve these services from the `Injector` during the navigation process.
-The same rule applies for feature modules loaded [asynchronously](guide/router#asynchronous-routing).
+The same rule applies for feature modules loaded [asynchronously](#asynchronous-routing).
 
 它们所需的守卫和服务提供商**必须**在模块一级提供。这让路由器在导航过程中可以通过`Injector`来取得这些服务。
     同样的规则也适用于[异步加载](guide/router#asynchronous-routing)的特性模块。
@@ -4971,28 +4790,28 @@ The same rule applies for feature modules loaded [asynchronously](guide/router#a
 
 ### `CanAcitvateChild`：保护子路由
 
-You can also protect child routes with the `CanActivateChild` guard. 
+You can also protect child routes with the `CanActivateChild` guard.
 The `CanActivateChild` guard is similar to the `CanActivate` guard.
-The key difference is that it runs _before_  any child route is activated. 
+The key difference is that it runs _before_  any child route is activated.
 
 我们还可以使用`CanActivateChild`守卫来保护子路由。
 `CanActivateChild`守卫和`CanAcitvate`守卫很像。
 它们的区别在于，`CanActivateChild`会在*任何子路由*被激活之前运行。
 
-You protected the admin feature module from unauthorized access. 
+You protected the admin feature module from unauthorized access.
 You should also protect child routes _within_ the feature module.
 
 我们要保护管理特性模块，防止它被非授权访问，还要保护这个特性模块*内部*的那些子路由。
 
-Extend the `AuthGuard` to protect when navigating between the `admin` routes. 
+Extend the `AuthGuard` to protect when navigating between the `admin` routes.
 Open `auth-guard.service.ts` and add the `CanActivateChild` interface to the imported tokens from the router package.
 
 扩展`AuthGuard`以便在`admin`路由之间导航时提供保护。
 打开`auth-guard.service.ts`并从路由库中导入`CanActivateChild`接口。
 
-Next, implement the `CanActivateChild` method which takes the same arguments as the `CanActivate` method:
-an `ActivatedRouteSnapshot` and `RouterStateSnapshot`. 
-The `CanActivateChild` method can return an `Observable<boolean>` or `Promise<boolean>` for 
+Next, implement the `canActivateChild()` method which takes the same arguments as the `canActivate()` method:
+an `ActivatedRouteSnapshot` and `RouterStateSnapshot`.
+The `canActivateChild()` method can return an `Observable<boolean>` or `Promise<boolean>` for
 async checks and a `boolean` for sync checks.
 This one returns a `boolean`:
 
@@ -5031,7 +4850,7 @@ Back in the "Heroes" workflow, the app accepts every change to a hero immediatel
 回到“Heroes”工作流，该应用毫不犹豫的接受对英雄的任何修改，不作任何校验。
 
 In the real world, you might have to accumulate the users changes.
-You might have to validate across fields. 
+You might have to validate across fields.
 You might have to validate on the server.
 You might have to hold changes in a pending state until the user confirms them *as a group* or
 cancels and reverts all changes.
@@ -5081,8 +4900,8 @@ Fortunately, you have another way to demonstrate an asynchronous router hook.
 幸运的是，我们有另一种方式来演示异步的路由器钩子。
 
 Users update crisis information in the `CrisisDetailComponent`.
-Unlike the `HeroDetailComponent`, the user changes do not update the crisis entity immediately. 
-Instead, the app updates the entity when the user presses the *Save* button and 
+Unlike the `HeroDetailComponent`, the user changes do not update the crisis entity immediately.
+Instead, the app updates the entity when the user presses the *Save* button and
 discards the changes when the user presses the *Cancel* button.
 
 用户在`CrisisDetailComponent`中更新危机信息。
@@ -5120,7 +4939,7 @@ answer*.
 
 
 You could wait for the user's answer with synchronous, blocking code.
-The app will be more responsive&mdash;and can do other work&mdash;by 
+The app will be more responsive&mdash;and can do other work&mdash;by
 waiting for the user's answer asynchronously. Waiting for the user asynchronously
 is like waiting for the server asynchronously.
 
@@ -5145,9 +4964,9 @@ to discard changes and navigate away (`true`) or to preserve the pending changes
 {@a CanDeactivate}
 
 
-Create a _guard_ that checks for the presence of a `canDeactivate` method in a component&mdash;any component.
-The `CrisisDetailComponent` will have this method. 
-But the guard doesn't have to know that. 
+Create a _guard_ that checks for the presence of a `canDeactivate()` method in a component&mdash;any component.
+The `CrisisDetailComponent` will have this method.
+But the guard doesn't have to know that.
 The guard shouldn't know the details of any component's deactivation method.
 It need only detect that the component has a `canDeactivate()` method and call it.
 This approach makes the guard reusable.
@@ -5161,18 +4980,18 @@ This approach makes the guard reusable.
 
 
 
-Alternatively, you could make a component-specific `CanDeactivate` guard for the `CrisisDetailComponent`. 
-The `canDeactivate()` method provides you with the current 
-instance of the `component`, the current `ActivatedRoute`, 
+Alternatively, you could make a component-specific `CanDeactivate` guard for the `CrisisDetailComponent`.
+The `canDeactivate()` method provides you with the current
+instance of the `component`, the current `ActivatedRoute`,
 and `RouterStateSnapshot` in case you needed to access
-some external information. This would be useful if you only 
-wanted to use this guard for this component and needed to get 
+some external information. This would be useful if you only
+wanted to use this guard for this component and needed to get
 the component's properties or confirm whether the router should allow navigation away from it.
 
 另外，我们也可以为`CrisisDetailComponent`创建一个特定的`CanDeactivate`守卫。在需要访问外部信息时，`canDeactivate()`方法为提供了组件、`ActivatedRoute`和`RouterStateSnapshot`的当前实例。如果只想为这个组件使用该守卫，并且需要使用该组件属性、或者需要路由器确认是否允许从该组件导航出去时，这个守卫就非常有用。
 
 
-<code-example path="router/src/app/can-deactivate-guard.service.1.ts" linenums="false" title="src/app/can-deactivate-guard.service.ts (component-specific)" region="component-specific">
+<code-example path="router/src/app/can-deactivate-guard.service.1.ts" linenums="false" title="src/app/can-deactivate-guard.service.ts (component-specific)">
 
 </code-example>
 
@@ -5189,7 +5008,7 @@ Looking back at the `CrisisDetailComponent`, it implements the confirmation work
 
 
 
-Notice that the `canDeactivate` method *can* return synchronously;
+Notice that the `canDeactivate()` method *can* return synchronously;
 it returns `true` immediately if there is no crisis or there are no pending changes.
 But it can also return a `Promise` or an `Observable` and the router will wait for that
 to resolve to truthy (navigate) or falsy (stay put).
@@ -5197,18 +5016,18 @@ to resolve to truthy (navigate) or falsy (stay put).
 注意，`canDeactivate`方法*可以*同步返回，如果没有危机，或者没有未定的修改，它就立即返回`true`。但是它也可以返回一个承诺（`Promise`）或可观察对象（`Observable`），路由器将等待它们被解析为真值（继续导航）或假值（留下）。
 
 
-Add the `Guard` to the crisis detail route in `crisis-center-routing.module.ts` using the `canDeactivate` array.
+Add the `Guard` to the crisis detail route in `crisis-center-routing.module.ts` using the `canDeactivate` array property.
 
 我们往`crisis-center.routing.ts`的危机详情路由中用`canDeactivate`数组添加一个`Guard`（守卫）。
 
 
-<code-example path="router/src/app/crisis-center/crisis-center-routing.module.3.ts" linenums="false" title="src/app/crisis-center/crisis-center-routing.module.ts (can deactivate guard)" region="can deactivate guard">
+<code-example path="router/src/app/crisis-center/crisis-center-routing.module.3.ts" linenums="false" title="src/app/crisis-center/crisis-center-routing.module.ts (can deactivate guard)">
 
 </code-example>
 
 
 
-Add the `Guard` to the main `AppRoutingModule` `providers` array so the 
+Add the `Guard` to the main `AppRoutingModule` `providers` array so the
 `Router` can inject it during the navigation process.
 
 我们还要把这个`Guard`添加到`appRoutingModule`的`providers`中去，以便`Router`可以在导航过程中注入它。
@@ -5244,7 +5063,7 @@ You don't want to display a blank component while waiting for the data.
   如果我们在使用真实api，很有可能数据返回有延迟，导致无法即时显示。
   在这种情况下，直到数据到达前，显示一个空的组件不是最好的用户体验。
 
-It's preferable to pre-fetch data from the server so it's ready the 
+It's preferable to pre-fetch data from the server so it's ready the
 moment the route is activated. This also allows you to handle errors before routing to the component.
 There's no point in navigating to a crisis detail for an `id` that doesn't have a record.
 It'd be better to send the user back to the `Crisis List` that shows only valid crisis centers.
@@ -5271,7 +5090,7 @@ You need a *resolver*.
 ### 导航前预先加载路由信息
 
 At the moment, the `CrisisDetailComponent` retrieves the selected crisis.
-If the crisis is not found, it navigates back to the crisis list view. 
+If the crisis is not found, it navigates back to the crisis list view.
 
 目前，`CrisisDetailComponent`会接收选中的危机。
 如果该危机没有找到，它就会导航回危机列表视图。
@@ -5294,15 +5113,15 @@ Create the `crisis-detail-resolver.service.ts` file within the `Crisis Center` f
 
 
 
-Take the relevant parts of the crisis retrieval logic in `CrisisDetailComponent.ngOnInit` 
+Take the relevant parts of the crisis retrieval logic in `CrisisDetailComponent.ngOnInit`
 and move them into the `CrisisDetailResolver`.
-Import the `Crisis` model, `CrisisService`, and the `Router` 
-so you can navigate elsewhere if you can't fetch the crisis. 
+Import the `Crisis` model, `CrisisService`, and the `Router`
+so you can navigate elsewhere if you can't fetch the crisis.
 
 在`CrisisDetailComponent.ngOnInit`中拿到相关的危机检索逻辑，并且把它们移到`CrisisDetailResolver`中。
 导入`Crisis`模型、`CrisisService`和`Router`以便让我们可以在找不到指定的危机时导航到别处。
 
-Be explicit. Implement the `Resolve` interface with a type of `Crisis`. 
+Be explicit. Implement the `Resolve` interface with a type of `Crisis`.
 
 为了更明确一点，可以实现一个带有`Crisis`类型的`Resolve`接口。
 
@@ -5312,16 +5131,16 @@ That method could return a `Promise`, an `Observable`, or a synchronous return v
 注入`CrisisService`和`Router`，并实现`resolve()`方法。
 该方法可以返回一个`Promise`、一个`Observable`来支持异步方式，或者直接返回一个值来支持同步方式。
 
-The `CrisisService.getCrisis` method returns a promise. 
-Return that promise to prevent the route from loading until the data is fetched. 
-If it doesn't return a valid `Crisis`, navigate the user back to the `CrisisListComponent`, 
+The `CrisisService.getCrisis` method returns a promise.
+Return that promise to prevent the route from loading until the data is fetched.
+If it doesn't return a valid `Crisis`, navigate the user back to the `CrisisListComponent`,
 canceling the previous in-flight navigation to the `CrisisDetailComponent`.
 
 `CrisisService.getCrisis`方法返回了一个`Promise`。
 返回`Promise`可以阻止路由被加载，直到数据获取完毕。
 如果它没有返回一个有效的`Crisis`，就把用户导航回`CrisisListComponent`，并取消以前到`CrisisDetailComponent`尚未完成的导航。
 
-Import this resolver in the `crisis-center-routing.module.ts` 
+Import this resolver in the `crisis-center-routing.module.ts`
 and add a `resolve` object to the `CrisisDetailComponent` route configuration.
 
 把这个解析器（resolver）导入到`crisis-center-routing.module.ts`中，并往`CrisisDetailComponent`的路由配置中添加一个`resolve`对象。
@@ -5357,14 +5176,14 @@ It will be there when the `CrisisDetailComponent` ask for it.
 
 **两个关键点**
 
-1. The router's `Resolve` interface is optional. 
-The `CrisisDetailResolver` doesn't inherit from a base class. 
+1. The router's `Resolve` interface is optional.
+The `CrisisDetailResolver` doesn't inherit from a base class.
 The router looks for that method and calls it if found.
 
     路由器的这个`Resolve`接口是可选的。`CrisisDetailResolver`没有继承自某个基类。路由器只要找到了这个方法，就会调用它。
 
-1. Rely on the router to call the resolver. 
-Don't worry about all the ways that the user  could navigate away. 
+1. Rely on the router to call the resolver.
+Don't worry about all the ways that the user  could navigate away.
 That's the router's job. Write this class and let the router take it from there.
 
     我们依赖路由器调用此守卫。不必关心用户用哪种方式导航离开，这是路由器的工作。我们只要写出这个类，等路由器从那里取出它就可以了。
@@ -5436,8 +5255,8 @@ The relevant *Crisis Center* code for this milestone follows.
 
 ### 查询参数及片段
 
-In the [route parameters](guide/router#optional-route-parameters) example, you only dealt with parameters specific to
-the route, but what if you wanted optional parameters available to all routes? 
+In the [route parameters](#optional-route-parameters) example, you only dealt with parameters specific to
+the route, but what if you wanted optional parameters available to all routes?
 This is where query parameters come into play.
 
 在这个[查询参数](guide/router#query-parameters)例子中，我们只为路由指定了参数，但是该如何定义一些所有路由中都可用的可选参数呢？
@@ -5461,16 +5280,16 @@ Add the `NavigationExtras` object to the `router.navigate` method that navigates
 我们还将为`router.nativate`方法传入一个`NavigationExtras`对象，用来导航到`/login`路由。
 
 
-<code-example path="router/src/app/auth-guard.service.4.ts" linenums="false" title="src/app/auth-guard.service.ts (v3)" region="v3">
+<code-example path="router/src/app/auth-guard.service.4.ts" linenums="false" title="src/app/auth-guard.service.ts (v3)">
 
 </code-example>
 
 
 
 You can also preserve query parameters and fragments across navigations without having to provide them
-again when navigating. In the `LoginComponent`, you'll add an *object* as the 
+again when navigating. In the `LoginComponent`, you'll add an *object* as the
 second argument in the `router.navigate` function
-and provide the `preserveQueryParams` and `preserveFragment` to pass along the current query parameters
+and provide the `queryParamsHandling` and `preserveFragment` to pass along the current query parameters
 and fragment to the next route.
 
 还可以再导航之间**保留**查询参数和片段，而无需再次再导航中提供。在`LoginComponent`中的`router.navigate`方法中，添加第二个参数，该**对象**提供了`preserveQueryParams`和 `preserveFragment`，用于传递到当前的查询参数中并为下一个路由提供片段。
@@ -5480,6 +5299,15 @@ and fragment to the next route.
 
 </code-example>
 
+<div class="l-sub-section">
+
+
+The `queryParamsHandling` feature also provides a `merge` option, which will preserve and combine the current query parameters with any provided query parameters
+when navigating.
+
+
+</div>
+
 
 
 Since you'll be navigating to the *Admin Dashboard* route after logging in, you'll update it to handle the
@@ -5488,13 +5316,13 @@ query parameters and fragment.
 由于要在登录后导航到*危机管理*特征区的路由，所以我们还得更新它，来处理这些全局查询参数和片段。
 
 
-<code-example path="router/src/app/admin/admin-dashboard.component.2.ts" linenums="false" title="src/app/admin/admin-dashboard.component.ts (v2)" region="v2">
+<code-example path="router/src/app/admin/admin-dashboard.component.2.ts" linenums="false" title="src/app/admin/admin-dashboard.component.ts (v2)">
 
 </code-example>
 
 
 
-*Query Parameters* and *Fragments* are also available through the `ActivatedRoute` service.
+*Query parameters* and *fragments* are also available through the `ActivatedRoute` service.
 Just like *route parameters*, the query parameters and fragments are provided as an `Observable`.
 The updated *Crisis Admin* component feeds the `Observable` directly into the template using the `AsyncPipe`.
 
@@ -5503,8 +5331,8 @@ The updated *Crisis Admin* component feeds the `Observable` directly into the te
 
 
 Now, you can click on the *Admin* button, which takes you to the *Login*
-page with the provided `query params` and `fragment`. After you click the login button, notice that
-you have been redirected to the `Admin Dashboard` page with the `query params` and `fragment` still intact. 
+page with the provided `queryParamMap` and `fragment`. After you click the login button, notice that
+you have been redirected to the `Admin Dashboard` page with the query parameters and fragment still intact in the address bar.
 
 按照下列步骤试验下：点击*Crisis Admin*按钮，它会带着我们提供的“查询参数”和“片段”跳转到登录页。
   点击登录按钮，我们就会被带到`Crisis Admin`页，仍然带着上一步提供的“查询参数”和“片段”。
@@ -5520,7 +5348,7 @@ authentication tokens or session ids.
 
 
 The `query params` and `fragment` can also be preserved using a `RouterLink` with
-the `preserveQueryParams` and `preserveFragment` bindings respectively.
+the `queryParamsHandling` and `preserveFragment` bindings respectively.
 
 “查询参数”和“片段”也可以分别用`RouterLink`中的**preserveQueryParams**和**preserveFragment**保存。
 
@@ -5528,15 +5356,15 @@ the `preserveQueryParams` and `preserveFragment` bindings respectively.
 </div>
 
 
-
+{@a asynchronous-routing}
 
 ## Milestone 6: Asynchronous routing
 
 ## 里程碑6：异步路由
 
-As you've worked through the milestones, the application has naturally gotten larger. 
-As you continue to build out feature areas, the overall application size will continue to grow. 
-At some point you'll reach a tipping point where the application takes long time to load. 
+As you've worked through the milestones, the application has naturally gotten larger.
+As you continue to build out feature areas, the overall application size will continue to grow.
+At some point you'll reach a tipping point where the application takes long time to load.
 
 完成上面的里程碑后，我们的应用程序很自然的长大了。在继续构建特征区的过程中，应用的尺寸将会变得更大。在某一个时间点，我们将达到一个顶点，应用将会需要过多的时间来加载。
 
@@ -5557,9 +5385,9 @@ Lazy loading has multiple benefits.
 
     我们可以持续扩充惰性加载特性区的功能，而不用增加初始加载的包体积。
 
-You're already made part way there.  
-By organizing the application into modules&mdash;`AppModule`, 
-`HeroesModule`, `AdminModule` and `CrisisCenterModule`&mdash;you 
+You're already made part way there.
+By organizing the application into modules&mdash;`AppModule`,
+`HeroesModule`, `AdminModule` and `CrisisCenterModule`&mdash;you
 have natural candidates for lazy loading.
 
 我们已经完成了一部分。通过把应用组织成一些模块：`AppModule`、`HeroesModule`、`AdminModule`和`CrisisCenterModule`，
@@ -5581,12 +5409,12 @@ you should only load it when requested by the right people.
 
 ### 惰性加载路由配置
 
-Change the `admin` **path** in the `admin-routing.module.ts` from `'admin'` to an empty string, `''`, the _empty path_. 
+Change the `admin` **path** in the `admin-routing.module.ts` from `'admin'` to an empty string, `''`, the _empty path_.
 
 把`admin-routing.module.ts`中的`admin`路径从`'admin'`改为空路径`''`。
 
 The `Router` supports  *empty path* routes;
-use them to group routes together without adding any additional path segments to the URL. 
+use them to group routes together without adding any additional path segments to the URL.
 Users will still visit `/admin` and the `AdminComponent` still serves as the *Routing Component* containing child routes.
 
 `Router`支持*空路径*路由，可以使用它们来分组路由，而不用往URL中添加额外的路径片段。
@@ -5597,9 +5425,9 @@ Open the `AppRoutingModule` and add a new `admin` route to its `appRoutes` array
 打开`AppRoutingModule`，并把一个新的`admin`路由添加到它的`appRoutes`数组中。
 
 Give it a `loadChildren` property (not a `children` property!), set to the address of the `AdminModule`.
-The address is the `AdminModule` file location (relative to the app root), 
-followed by a `#` separator, 
-followed by the name of the exported module class, `AdminModule`. 
+The address is the `AdminModule` file location (relative to the app root),
+followed by a `#` separator,
+followed by the name of the exported module class, `AdminModule`.
 
 给它一个`loadChildren`属性（注意不是`children`属性），把它设置为`AdminModule`的地址。
 该地址是`AdminModule`的文件路径（相对于`app`目录的），加上一个`#`分隔符，再加上导出模块的类名`AdminModule`。
@@ -5613,7 +5441,7 @@ followed by the name of the exported module class, `AdminModule`.
 
 When the router navigates to this route, it uses the `loadChildren` string to dynamically load the `AdminModule`.
 Then it adds the `AdminModule` routes to its current route configuration.
-Finally, it loads the requested route to the destination admin component. 
+Finally, it loads the requested route to the destination admin component.
 
 当路由器导航到这个路由时，它会用`loadChildren`字符串来动态加载`AdminModule`，然后把`AdminModule`添加到当前的路由配置中，
 最后，它把所请求的路由加载到目标`admin`组件中。
@@ -5645,7 +5473,7 @@ The root `AppModule` must neither load nor reference the `AdminModule` or its fi
 根模块`AppModule`既不能加载也不能引用`AdminModule`及其文件。
 
 In `app.module.ts`, remove the `AdminModule` import statement from the top of the file
-and remove the `AdminModule` from the Angular module's `imports` array.
+and remove the `AdminModule` from the NgModule's `imports` array.
 
 在`app.module.ts`中，从顶部移除`AdminModule`的导入语句，并且从Angular模块的`imports`数组中移除`AdminModule`。
 
@@ -5658,7 +5486,7 @@ and remove the `AdminModule` from the Angular module's `imports` array.
 ### `CanLoad`守卫：保护对特性模块的未授权加载
 
 You're already protecting the `AdminModule` with a `CanActivate` guard that prevents unauthorized users from
-accessing the admin feature area. 
+accessing the admin feature area.
 It redirects to the  login page if the user is not authorized.
 
 我们已经使用`CanAcitvate`保护`AdminModule`了，它会阻止未授权用户访问管理特性区。如果用户未登录，它就会跳转到登录页。
@@ -5673,15 +5501,15 @@ Add a **`CanLoad`** guard that only loads the `AdminModule` once the user is log
 
 添加一个**`CanLoad`**守卫，它只在用户已登录*并且*尝试访问管理特性区的时候，才加载`AdminModule`一次。
 
-The existing `AuthGuard` already has the essential logic in 
-its `checkLogin()` method to support the `CanLoad` guard. 
+The existing `AuthGuard` already has the essential logic in
+its `checkLogin()` method to support the `CanLoad` guard.
 
 现有的`AuthGuard`的`checkLogin()`方法中已经有了支持`CanLoad`守卫的基础逻辑。
 
 Open `auth-guard.service.ts`.
 Import the `CanLoad` interface from `@angular/router`.
 Add it to the `AuthGuard` class's `implements` list.
-Then implement `canLoad` as follows:
+Then implement `canLoad()` as follows:
 
 打开`auth-guard.service.ts`，从`@angular/router`中导入`CanLoad`接口。
 把它添加到`AuthGuard`类的`implements`列表中。
@@ -5700,8 +5528,8 @@ The `checkLogin()` method redirects to that URL once the user has logged in.
 路由器会把`canLoad()`方法的`route`参数设置为准备访问的目标URL。
 如果用户已经登录了，`checkLogin()`方法就会重定向到那个URL。
 
-Now import the `AuthGuard` into the `AppRoutingModule` and add the `AuthGuard` to the `canLoad` 
-array for the `admin` route. 
+Now import the `AuthGuard` into the `AppRoutingModule` and add the `AuthGuard` to the `canLoad`
+array property for the `admin` route.
 The completed admin route looks like this:
 
 现在，把`AuthGuard`导入到`AppRoutingModule`中，并把`AuthGuard`添加到`admin`路由的`canLoad`数组中。
@@ -5736,9 +5564,9 @@ Now the `AdminModule` loads only when the user clicks on a link; that's _lazy_ l
 
 _Preloading_ is something in between.
 Consider the _Crisis Center_.
-It isn't the first view that a user sees.  
+It isn't the first view that a user sees.
 By default, the _Heroes_ are the first view.
-For the smallest initial payload and fastest launch time, 
+For the smallest initial payload and fastest launch time,
 you should eagerly load the `AppModule` and the `HeroesModule`.
 
 *预加载*是介于两者之间的一种方式。
@@ -5789,13 +5617,13 @@ The `Router` offers two preloading strategies out of the box:
   预加载所有惰性加载的特性区。
 
 Out of the box, the router either never preloads, or preloads every lazy load module.
-The `Router` also supports [custom preloading strategies](guide/router#custom-preloading) for 
+The `Router` also supports [custom preloading strategies](#custom-preloading) for
 fine control over which modules to preload and when.
 
 默认情况下，路由器或者完全不预加载或者预加载每个惰性加载模块。
 路由器还支持[自定义预加载策略](guide/router#custom-preloading)，以便完全控制要预加载哪些模块以及何时加载。
 
-In this next section, you'll update the `CrisisCenterModule` to load lazily 
+In this next section, you'll update the `CrisisCenterModule` to load lazily
 by default and use the `PreloadAllModules` strategy
 to load it (and _all other_ lazy loaded modules) as soon as possible.
 
@@ -5809,7 +5637,7 @@ to load it (and _all other_ lazy loaded modules) as soon as possible.
 
 #### 惰性加载*危机中心*
 
-Update the route configuration to lazy load the `CrisisCenterModule`. 
+Update the route configuration to lazy load the `CrisisCenterModule`.
 Take the same steps you used to configure `AdminModule` for lazy load.
 
 修改路由配置，来惰性加载`CrisisCenterModule`。修改的步骤和配置惰性加载`AdminModule`时一样。
@@ -5862,7 +5690,7 @@ To enable preloading of all lazy loaded modules, import the `PreloadAllModules`
 要为所有惰性加载模块启用预加载功能，请从Angular的路由模块中导入`PreloadAllModules`。
 
 The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options.
-The `preloadingStrategy` is one of those options. 
+The `preloadingStrategy` is one of those options.
 Add the `PreloadAllModules` token to the `forRoot` call:
 
 `RouterModule.forRoot`方法的第二个参数接受一个附加配置选项对象。
@@ -5897,7 +5725,7 @@ Surprisingly, the `AdminModule` does _not_ preload. Something is blocking it.
 
 #### CanLoad会阻塞预加载
 
-The `PreloadAllModules` strategy does not load feature areas protected by a [CanLoad](guide/router#can-load-guard) guard.
+The `PreloadAllModules` strategy does not load feature areas protected by a [CanLoad](#can-load-guard) guard.
 This is by design.
 
 `PreloadAllModules`策略不会加载被[CanLoad](guide/router#can-load-guard)守卫所保护的特性区。这是刻意设计的。
@@ -5909,8 +5737,8 @@ That `CanLoad` guard takes precedence over the preload strategy.
 我们几步之前刚刚给`AdminModule`中的路由添加了`CanLoad`守卫，以阻塞加载那个模块，直到用户认证结束。
 `CanLoad`守卫的优先级高于预加载策略。
 
-If you want to preload a module _and_ guard against unauthorized access, 
-drop the `canLoad` guard and rely on the [CanActivate](guide/router#can-activate-guard) guard alone.
+If you want to preload a module _and_ guard against unauthorized access,
+drop the `canLoad()` guard method and rely on the [canActivate()](#can-activate-guard) guard alone.
 
 如果我们要加载一个模块*并且*保护它防止未授权访问，请移除`canLoad`守卫，只单独依赖[CanActivate](guide/router#can-activate-guard)守卫。
 
@@ -5922,8 +5750,8 @@ drop the `canLoad` guard and rely on the [CanActivate](guide/router#can-activate
 
 ### 自定义预加载策略
 
-Preloading every lazy loaded modules works well in many situations, 
-but it isn't always the right choice, especially on mobile devices and over low bandwidth connections. 
+Preloading every lazy loaded modules works well in many situations,
+but it isn't always the right choice, especially on mobile devices and over low bandwidth connections.
 You may choose to preload only certain feature modules, based on user metrics and other business and technical factors.
 
 在大多数场景下，预加载每个惰性加载模块就很好了，但是有时候它却并不是正确的选择，特别是在移动设备和低带宽连接下。
@@ -5933,13 +5761,13 @@ You can control what and how the router preloads with a custom preloading strate
 
 使用自定义预加载策略，我们可以控制路由器预加载哪些路由以及如何加载。
 
-In this section, you'll add a custom strategy that _only_ preloads routes whose `data.preload` flag is set to `true`. 
-Recall that you can add anything to the `data` property of a route. 
+In this section, you'll add a custom strategy that _only_ preloads routes whose `data.preload` flag is set to `true`.
+Recall that you can add anything to the `data` property of a route.
 
 在这一节，我们将添加一个自定义策略，它*只*预加载那些`data.preload`标志为`true`的路由。
 回忆一下，我们可以往路由的`data`属性中添加任何东西。
 
-Set the `data.preload` flag in the `crisis-center` route in the `AppRoutingModule`. 
+Set the `data.preload` flag in the `crisis-center` route in the `AppRoutingModule`.
 
 在`AppRoutingModule`的`crisis-center`路由中设置`data.preload`标志。
 
@@ -5980,7 +5808,7 @@ The router calls the `preload` method with two arguments:
 
 An implementation of `preload` must return an `Observable`.
 If the route should preload, it returns the observable returned by calling the loader function.
-If the route should _not_ preload, it returns an `Observable` of `null`. 
+If the route should _not_ preload, it returns an `Observable` of `null`.
 
 `preload`的实现必须返回一个`Observable`。
 如果该路由应该预加载，它就会返回调用加载器函数所返回的`Observable`。
@@ -5990,7 +5818,7 @@ In this sample, the  `preload` method loads the route if the route's `data.prelo
 
 在这个例子中，`preload`方法只有在路由的`data.preload`标识为真时才会加载该路由。
 
-It also has a side-effect. 
+It also has a side-effect.
 `SelectivePreloadingStrategy` logs the `path` of a selected route in its public `preloadedModules` array.
 
 它还有一个副作用。
@@ -6005,13 +5833,7 @@ But first, make a few changes to the `AppRoutingModule`.
 但是首先，要对`AppRoutingModule`做少量修改。
 
 1. Import `SelectivePreloadingStrategy` into `AppRoutingModule`.
-
-  把`SelectivePreloadingStrategy`导入到`AppRoutingModule`中。
-
-1. Replace the `PreloadAllModules` strategy in the call to `forRoot` with this `SelectivePreloadingStrategy`. 
-
-  把`PreloadAllModules`策略替换成对`forRoot`的调用，并且传入这个`SelectivePreloadingStrategy`。
-
+把`SelectivePreloadingStrategy`导入到`AppRoutingModule`中。1. Replace the `PreloadAllModules` strategy in the call to `forRoot` with this `SelectivePreloadingStrategy`. 把`PreloadAllModules`策略替换成对`forRoot`的调用，并且传入这个`SelectivePreloadingStrategy`。
 1. Add the `SelectivePreloadingStrategy` strategy to the `AppRoutingModule` providers array so it can be injected 
 elsewhere in the app.
 
@@ -6038,15 +5860,15 @@ When you're done it looks like this.
 当完成时，代码如下：
 
 
-<code-example path="router/src/app/admin/admin-dashboard.component.ts" linenums="false" title="src/app/admin/admin-dashboard.component.ts (preloaded modules)" region="preloaded modules">
+<code-example path="router/src/app/admin/admin-dashboard.component.ts" linenums="false" title="src/app/admin/admin-dashboard.component.ts (preloaded modules)">
 
 </code-example>
 
 
 
-Once the application loads the initial route, the `CrisisCenterModule` is preloaded. 
-Verify this by logging in to the `Admin` feature area and noting that the `crisis-center` is listed in the `Preloaded Modules`. 
-It's also logged to the browser's console. 
+Once the application loads the initial route, the `CrisisCenterModule` is preloaded.
+Verify this by logging in to the `Admin` feature area and noting that the `crisis-center` is listed in the `Preloaded Modules`.
+It's also logged to the browser's console.
 
 一旦应用加载完了初始路由，`CrisisCenterModule`也被预加载了。
 通过`Admin`特性区中的记录就可以验证它，我们会看到“Preloaded Modules”中没有列出`crisis-center`。
@@ -6062,8 +5884,8 @@ It's also logged to the browser's console.
 ## 审查路由器配置
 
 You put a lot of effort into configuring the router in several routing module files
-and were careful to list them [in the proper order](guide/router#routing-module-order).
-Are routes actually evaluated as you planned? 
+and were careful to list them [in the proper order](#routing-module-order).
+Are routes actually evaluated as you planned?
 How is the router really configured?
 
 我们把大量的精力投入到在一系列路由模块文件里配置路由器上，并且小心的[以合适的顺序](guide/router#routing-module-order)列出它们。
@@ -6071,7 +5893,7 @@ How is the router really configured?
 路由器的真实配置是怎样的？
 
 You can inspect the router's current configuration any time by injecting it and
-examining its `config` property. 
+examining its `config` property.
 For example, update the `AppModule` as follows and look in the browser console window
 to see the finished route configuration.
 
@@ -6084,17 +5906,15 @@ to see the finished route configuration.
 </code-example>
 
 
-
 {@a final-app}
 
 
-
 ## Wrap up and final app
 
 ## 总结与最终的应用
 
 You've covered a lot of ground in this guide and the application is too big to reprint here.
-Please visit the <live-example title="Router Sample in Plunker"></live-example> 
+Please visit the <live-example title="Router Sample in Plunker"></live-example>
 where you can download the final source code.
 
 本章中涉及到了很多背景知识，而且本应用程序也太大了，所以没法在这里显示。请访问<live-example title="Router Sample in Plunker"></live-example>，在那里你可以下载最终的源码。
@@ -6122,7 +5942,7 @@ The appendix material isn't essential. Continued reading is for the curious.
 
 
 
-## Appendix: link parameters array
+### Appendix: link parameters array
 
 ## 附录：链接参数数组
 
@@ -6211,7 +6031,7 @@ Parse it out.
 
     哇！`['/crisis-center']`。
 
-Take it a step further. Consider the following router link that 
+Take it a step further. Consider the following router link that
 navigates from the root of the application down to the *Dragon Crisis*:
 
 在下一步，我们会用到它。这次，我们要构建一个从根组件往下导航到“巨龙危机”时的链接参数数组：
@@ -6274,7 +6094,7 @@ any legal sequence of route paths, (required) router parameters, and (optional)
 
 
 
-## Appendix: *LocationStrategy* and browser URL styles
+### Appendix: *LocationStrategy* and browser URL styles
 
 ## 附录：*LocationStrategy*以及浏览器URL样式
 
@@ -6287,7 +6107,7 @@ and should not reload the page.
 严格来说，这个URL其实是本地的，浏览器不会把该URL发给服务器，并且不会重新加载此页面。
 
 Modern HTML5 browsers support
-<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" target="_blank" title="HTML5 browser history push-state">history.pushState</a>,
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" title="HTML5 browser history push-state">history.pushState</a>,
 a technique that changes a browser's location and history without triggering a server page request.
 The router can compose a "natural" URL that is indistinguishable from
 one that would otherwise require a page load.
@@ -6357,7 +6177,7 @@ Learn about providers and the bootstrap process in the
 
 
 
-### Which strategy is best?
+#### Which strategy is best?
 
 ### 哪种策略更好？
 
@@ -6391,17 +6211,16 @@ resort to hash routes.
 
 除非你有强烈的理由不得不使用hash路由，否则就应该坚决使用默认的HTML 5路由风格。
 
-### HTML5 URLs and the  *&lt;base href>*
+#### HTML5 URLs and the  *&lt;base href>*
 
-### HTML 5 URL与*&lt;base href>*  
-
-While the router uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" target="_blank" title="Browser history push-state">HTML5 pushState</a>
+### HTML 5 URL与*&lt;base href>*While the router uses the 
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries"  title="Browser history push-state">HTML5 pushState</a>
 style by default, you *must* configure that strategy with a **base href**.
 
 由于路由器默认使用“<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" target="_blank" title="Browser history push-state">HTML 5 pushState</a>”风格，所以我们*必须*用一个**base href**来配置该策略（Strategy）。
 
 The preferred way to configure the strategy is to add a
-<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" target="_blank" title="base href">&lt;base href&gt; element</a>
+<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" title="base href">&lt;base href&gt; element</a>
 tag in the `<head>` of the `index.html`.
 
 配置该策略的首选方式是往`index.html`的`<head>`中添加一个[&lt;base href> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)标签。
@@ -6437,12 +6256,9 @@ Those developers may still use HTML5 URLs by taking two remedial steps:
 
     对所有Web资源使用**绝对地址**：CSS、图片、脚本、模板HTML。
 
-[APP_BASE_HREF]: ../api/common/index/APP_BASE_HREF-let.html
+{@a hashlocationstrategy}
 
-[APP_BASE_HREF]: ../api/common/index/APP_BASE_HREF-let.html
-
-
-### *HashLocationStrategy*
+#### *HashLocationStrategy*
 
 You can go old-school with the `HashLocationStrategy` by
 providing the `useHash: true` in an object as the second argument of the `RouterModule.forRoot`
@@ -6451,7 +6267,6 @@ in the `AppModule`.
 我们可以在根模块的`RouterModule.forRoot`的第二个参数中传入一个带有`useHash: true`的对象，以回到基于`HashLocationStrategy`的传统方式。
 
 
-<code-example path="router/src/app/app.module.6.ts" linenums="false" title="src/app/app.module.ts (hash URL strategy)" region="hash URL strategy">
+<code-example path="router/src/app/app.module.6.ts" linenums="false" title="src/app/app.module.ts (hash URL strategy)">
 
 </code-example>
-
diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md
index 56b6f2d408..3ea8fb51fc 100644
--- a/aio/content/guide/security.md
+++ b/aio/content/guide/security.md
@@ -1,12 +1,6 @@
-@title
-安全
-
-@intro
-开发内容安全的 Angular 应用。
-
-@description
-
+# Security
 
+# 安全
 
 This page describes Angular's built-in
 protections against common web-application vulnerabilities and attacks such as cross-site
@@ -19,38 +13,6 @@ For more information about the attacks and mitigations described below, see [OWA
 
 要了解更多攻防信息，参见[开放式Web应用程序安全项目(OWASP)](https://www.owasp.org/index.php/Category:OWASP_Guide_Project)。
 
-
-
-# Contents:
-
-# 目录：
-
-* [Reporting vulnerabilities](guide/security#report-issues).
-
-  [举报漏洞](guide/security#report-issues).
-
-* [Best practices](guide/security#best-practices).
-
-  [最佳实践](guide/security#best-practices).
-
-* [Preventing cross-site scripting (XSS)](guide/security#xss).
-
-  [防范跨站脚本(XSS)攻击](guide/security#xss).
-
-* [Trusting safe values](guide/security#bypass-security-apis).
-
-  [信任安全值](guide/security#bypass-security-apis).
-
-* [HTTP-Level vulnerabilities](guide/security#http).
-
-  [HTTP级别的漏洞](guide/security#http).
-
-* [Auditing Angular applications](guide/security#code-review).
-
-  [审计Angular应用程序](guide/security#code-review).
-
-
-
 You can run the <live-example></live-example> in Plunker and download the code from there.
 
 运行<live-example></live-example>来试用本页的代码。
@@ -71,7 +33,7 @@ You can run the <live-example></live-example> in Plunker and download the code f
 
 
 
-To report vulnerabilities in Angular itself, email us at [security@angular.io](guide/mailto:security@angular).
+To report vulnerabilities in Angular itself, email us at [security@angular.io](mailto:security@angular.io).
 
 给我们（[security@angular.io](guide/mailto:security@angular)）发邮件，报告Angular本身的漏洞。
 
@@ -156,7 +118,7 @@ attacker-controlled data enters the DOM, expect security vulnerabilities.
 ### Angular的“跨站脚本安全模型”
 
 To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value
-is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, 
+is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation,
 Angular sanitizes and escapes untrusted values.
 
 为了系统性的防范XSS问题，Angular默认把所有值都当做不可信任的。
@@ -166,7 +128,7 @@ Angular将对这些值进行无害化处理（Sanitize），对不可信的值
 _Angular templates are the same as executable code_: HTML, attributes, and binding expressions
 (but not the values bound) in templates are trusted to be safe. This means that applications must
 prevent values that an attacker can control from ever making it into the source code of a
-template. Never generate template source code by concatenating user input and templates. 
+template. Never generate template source code by concatenating user input and templates.
 To prevent these vulnerabilities, use
 the [offline template compiler](guide/security#offline-template-compiler), also known as _template injection_.
 
@@ -253,8 +215,8 @@ tag but keeps safe content such as the text content of the `<script>` tag and th
 Angular认为这些值是不安全的，并自动进行无害化处理。它会移除`<script>`标签，但保留安全的内容，比如该片段中的文本内容或`<b>`元素。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'></img>
+<figure>
+  <img src='generated/images/guide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'>
 </figure>
 
 
@@ -277,7 +239,7 @@ templates where possible.
 
 Content Security Policy (CSP) is a defense-in-depth
 technique to prevent XSS. To enable CSP, configure your web server to return an appropriate
-`Content-Security-Policy` HTTP header. Read more about content security policy at 
+`Content-Security-Policy` HTTP header. Read more about content security policy at
 [An Introduction to Content Security Policy](http://www.html5rocks.com/en/tutorials/security/content-security-policy/)
 on the HTML5Rocks website.
 
@@ -296,9 +258,9 @@ on the HTML5Rocks website.
 The offline template compiler prevents a whole class of vulnerabilities called template injection,
 and greatly improves application performance. Use the offline template compiler in production
 deployments; don't dynamically generate templates. Angular trusts template code, so generating
-templates, in particular templates containing user data, circumvents Angular's built-in protections. 
-For information about dynamically constructing forms in a safe way, see the 
-[Dynamic Forms](cookbook/dynamic-form) cookbook page.
+templates, in particular templates containing user data, circumvents Angular's built-in protections.
+For information about dynamically constructing forms in a safe way, see the
+[Dynamic Forms](guide/dynamic-form) guide page.
 
 离线模板编译器阻止了一整套被称为“模板注入”的漏洞，并能显著增强应用程序的性能。尽量在产品发布时使用离线模板编译器，
 而不要动态生成模板（比如在代码中拼接字符串生成模板）。由于Angular会信任模板本身的代码，所以，动态生成的模板 —— 特别是包含用户数据的模板 —— 会绕过Angular自带的保护机制。
@@ -310,7 +272,7 @@ For information about dynamically constructing forms in a safe way, see the
 
 HTML constructed on the server is vulnerable to injection attacks. Injecting template code into an
 Angular application is the same as injecting executable code into the
-application: it gives the attacker full control over the application. To prevent this, 
+application: it gives the attacker full control over the application. To prevent this,
 use a templating language that automatically escapes values to prevent XSS vulnerabilities on
 the server. Don't generate Angular templates on the server side using a templating language; doing this
 carries a high risk of introducing template-injection vulnerabilities.
@@ -334,10 +296,10 @@ carries a high risk of introducing template-injection vulnerabilities.
 
 
 Sometimes applications genuinely need to include executable code, display an `<iframe>` from some
-URL, or construct potentially dangerous URLs. To prevent automatic sanitization in any of these 
-situations, you can tell Angular that you inspected a value, checked how it was generated, and made 
-sure it will always be secure. But *be careful*. If you trust a value that might be malicious, you 
-are introducing a security vulnerability into your application. If in doubt, find a professional 
+URL, or construct potentially dangerous URLs. To prevent automatic sanitization in any of these
+situations, you can tell Angular that you inspected a value, checked how it was generated, and made
+sure it will always be secure. But *be careful*. If you trust a value that might be malicious, you
+are introducing a security vulnerability into your application. If in doubt, find a professional
 security reviewer.
 
 有时候，应用程序确实需要包含可执行的代码，比如使用URL显示`<iframe>`，或者构造出有潜在危险的URL。
@@ -381,8 +343,8 @@ this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` cal
 
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'></img>
+<figure>
+  <img src='generated/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'>
 </figure>
 
 
@@ -390,7 +352,7 @@ this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` cal
 If you need to convert user input into a trusted value, use a
 controller method. The following template allows users to enter a YouTube video ID and load the
 corresponding video in an `<iframe>`. The `<iframe src>` attribute is a resource URL security
-context, because an untrusted source can, for example, smuggle in file downloads that unsuspecting users 
+context, because an untrusted source can, for example, smuggle in file downloads that unsuspecting users
 could execute. So call a method on the controller to construct a trusted video URL, which causes
 Angular to allow binding into `<iframe src>`:
 
@@ -425,7 +387,7 @@ Angular to allow binding into `<iframe src>`:
 
 
 Angular has built-in support to help prevent two common HTTP vulnerabilities, cross-site request
-forgery (CSRF or XSRF) and cross-site script inclusion (XSSI). Both of these must be mitigated primarily 
+forgery (CSRF or XSRF) and cross-site script inclusion (XSSI). Both of these must be mitigated primarily
 on the server side, but Angular provides helpers to make integration on the client side easier.
 
 Angular内置了一些支持来防范两个常见的HTTP漏洞：跨站请求伪造（XSRF）和跨站脚本包含（XSSI）。
@@ -445,8 +407,8 @@ Angular内置了一些支持来防范两个常见的HTTP漏洞：跨站请求伪
 
 
 In a cross-site request forgery (CSRF or XSRF), an attacker tricks the user into visiting
-a different web page (such as `evil.com`) with malignant code that secretly sends a malicious request 
-to the application's web server (such as `example-bank.com`). 
+a different web page (such as `evil.com`) with malignant code that secretly sends a malicious request
+to the application's web server (such as `example-bank.com`).
 
 在跨站请求伪造（XSRF或CSFR）中，攻击者欺骗用户，让他们访问一个假冒页面(例如`evil.com`)，
 该页面带有恶意代码，秘密的向你的应用程序服务器发送恶意请求(例如`example-bank.com`)。
@@ -461,15 +423,11 @@ Perhaps it's a request to transfer money from the user's account to the attacker
 The browser automatically sends the `example-bank.com` cookies (including the authentication cookie) with this request.
 
 该`evil.com`页面立刻发送恶意请求到`example-bank.com`。这个请求可能是从用户账户转账到攻击者的账户。
-与该请求一起，浏览器自动发出`example-bank.com`的cookie。
-
-If the `example-bank.com` server lacks XSRF protection, itcan't tell the difference between a legitimate request from the application
-and the forged request from `evil.com`.
-
-如果`example-bank.com`服务器缺乏XSRF保护，就无法辨识请求是从应用程序发来的合法请求还是从`evil.com`来的假请求。
+与该请求一起，浏览器自动发出`example-bank.com`的cookie。If the `example-bank.com` server lacks XSRF protection, it can't tell the difference between a legitimate 
+request from the application and the forged request from `evil.com`.如果`example-bank.com`服务器缺乏XSRF保护，就无法辨识请求是从应用程序发来的合法请求还是从`evil.com`来的假请求。
 
 To prevent this, the application must ensure that a user request originates from the real
-application, not from a different site. 
+application, not from a different site.
 The server and client must cooperate to thwart this attack.
 
 为了防止这种情况，你必须确保每个用户的请求都是从你自己的应用中发出的，而不是从另一个网站发出的。
@@ -484,70 +442,29 @@ The server compares the received cookie value to the request header value and re
   客户端代码获取这个cookie，并用它为接下来所有的请求添加自定义请求页头。
   服务器比较收到的cookie值与请求页头的值，如果它们不匹配，便拒绝请求。
   
-This technique is effective because all browsers implement the _same origin policy_. Only code from the website 
+This technique is effective because all browsers implement the _same origin policy_. Only code from the website
 on which cookies are set can read the cookies from that site and set custom headers on requests to that site.
 That means only your application can read this cookie token and set the custom header. The malicious code on `evil.com` can't.
 
 这个技术之所以有效，是因为所有浏览器都实现了_同源策略_。只有设置cookie的网站的代码可以访问该站的cookie，并为该站的请求设置自定义页头。
   这就是说，只有你的应用程序可以获取这个cookie令牌和设置自定义页头。`evil.com`的恶意代码不能。
 
-Angular's `http` has built-in support for the client-side half of this technique in its `XSRFStrategy`. 
-The default `CookieXSRFStrategy` is turned on automatically.
-Before sending an HTTP request, the `CookieXSRFStrategy` looks for a cookie called `XSRF-TOKEN` and 
-sets a header named `X-XSRF-TOKEN` with the value of that cookie. 
-
-Angular的`http`客户端在其`XSRFStrategy`中具有对这项技术的内置支持。
-  默认的`CookieXSRFStrategy`会被自动开启
-  在发送每个请求之前，`CookieXSRFStrategy`查询名为`XSRF-TOKEN`的cookie，并设置一个名为`X-XSRF-TOKEN`的HTTP请求头，并把该cookie的值赋给它。
-  
-The server must do its part by setting the
-initial `XSRF-TOKEN` cookie and confirming that each subsequent state-modifying request
-includes a matching `XSRF-TOKEN` cookie and `X-XSRF-TOKEN` header.
-
-服务器必须要完成自己的任务，设置初始`XSRF-TOKEN`cookie，并确认接下来的每个请求包含了配对的`XSRF-TOKEN`cookie和`X-XSRF-TOKEN`页头。
-
-XSRF/CSRF tokens should be unique per user and session, have a large random value generated by a
-cryptographically secure random number generator, and  expire in a day or two.
-
-CSRF令牌对每个用户和session应该是唯一的，它包含一大串由安全的随机数字生成器生成的随机值，并且在一两天之内过期。
-
-Your server may use a different cookie or header name for this purpose.
-An Angular application can customize cookie and header names by providing its own `CookieXSRFStrategy` values.
-
-你的服务器可能使用不同的cookie或者页头名字。Angular应用可以通过自己的`CookieXSRFStrategy`值来自定义cookie和页头名字。
-  
-
-<code-example language="typescript">
-  { provide: XSRFStrategy, useValue: new CookieXSRFStrategy('myCookieName', 'My-Header-Name') }
-
-</code-example>
-
-
-
-Or you can implement and provide an entirely custom `XSRFStrategy`:
-
-或者你可以实现和提供完整的自定义`XSRFStrategy`：
-
-
-<code-example language="typescript">
-  { provide: XSRFStrategy, useClass: MyXSRFStrategy }
-
-</code-example>
-
+Angular's `HttpClient` has built-in support for the client-side half of this technique. Read about it more in the [HttpClient guide](/guide/http).
 
+Angular 的 `HttpClient` 对这项技术的客户端部分提供了内置的支持要了解更多信息，参见 [HttpClient部分](/guide/http)。
 
 For information about CSRF at the Open Web Application Security Project (OWASP), see
-<a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29" target="_blank">Cross-Site Request Forgery (CSRF)</a> and
-<a href="https://www.owasp.org/index.php/CSRF_Prevention_Cheat_Sheet" target="_blank">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a>.
-The Stanford University paper 
-<a href="https://seclab.stanford.edu/websec/csrf/csrf.pdf" target="_blank">Robust Defenses for Cross-Site Request Forgery</a> is a rich source of detail.
+<a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29">Cross-Site Request Forgery (CSRF)</a> and
+<a href="https://www.owasp.org/index.php/CSRF_Prevention_Cheat_Sheet">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a>.
+The Stanford University paper
+<a href="https://seclab.stanford.edu/websec/csrf/csrf.pdf">Robust Defenses for Cross-Site Request Forgery</a> is a rich source of detail.
 
 到开放式Web应用程序安全项目(OWASP)的[这里](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29)
 和[这里](https://www.owasp.org/index.php/CSRF_Prevention_Cheat_Sheet)学习更多关于跨站请求伪造（XSRF）的知识。
 这个[斯坦福大学论文](https://seclab.stanford.edu/websec/csrf/csrf.pdf)有详尽的细节。
 
-See also Dave Smith's easy-to-understand 
-<a href="https://www.youtube.com/watch?v=9inczw6qtpY" target="_blank" title="Cross Site Request Funkery Securing Your Angular Apps From Evil Doers">talk on XSRF at AngularConnect 2016</a>.
+See also Dave Smith's easy-to-understand
+<a href="https://www.youtube.com/watch?v=9inczw6qtpY" title="Cross Site Request Funkery Securing Your Angular Apps From Evil Doers">talk on XSRF at AngularConnect 2016</a>.
 
 参见Dave Smith在<a href="https://www.youtube.com/watch?v=9inczw6qtpY" target="_blank" title="Cross Site Request Funkery Securing Your Angular Apps From Evil Doers">AngularConnect 2016关于XSRF的演讲</a>。
 
@@ -578,7 +495,7 @@ well-known string `")]}',\n"`.
 只有在返回的JSON能像JavaScript一样可以被执行时，这种攻击才会生效。所以服务端会约定给所有JSON响应体加上前缀`")]}',\n"`，来把它们标记为不可执行的，
 以防范这种攻击。
 
-Angular's `Http` library recognizes this convention and automatically strips the string
+Angular's `HttpClient` library recognizes this convention and automatically strips the string
 `")]}',\n"` from all responses before further parsing.
 
 Angular的`Http`库会识别这种约定，并在进一步解析之前，自动把字符串`")]}',\n"`从所有响应中去掉。
@@ -608,4 +525,4 @@ such as the [_bypassSecurityTrust_](guide/security#bypass-security-apis) methods
 as security sensitive.
 
 Angular应用应该遵循和常规Web应用一样的安全原则并按照这些原则进行审计。Angular中某些应该在安全评审中被审计的API（
-比如[_bypassSecurityTrust_](guide/security#bypass-security-apis) API）都在文档中被明确标记为安全性敏感的。
\ No newline at end of file
+比如[_bypassSecurityTrust_](guide/security#bypass-security-apis) API）都在文档中被明确标记为安全性敏感的。
diff --git a/aio/content/guide/server-communication.md b/aio/content/guide/server-communication.md
deleted file mode 100644
index dbe6c6f6b2..0000000000
--- a/aio/content/guide/server-communication.md
+++ /dev/null
@@ -1,1806 +0,0 @@
-@title
-HTTP 客户端
-
-@intro
-通过 HTTP 客户端与远程服务器对话。
-
-@description
-
-
-
-[HTTP](https://tools.ietf.org/html/rfc2616) is the primary protocol for browser/server communication.
-
-[HTTP](https://tools.ietf.org/html/rfc2616) 是浏览器和服务器之间通讯的主要协议。
-
-
-<div class="l-sub-section">
-
-
-
-The [`WebSocket`](https://tools.ietf.org/html/rfc6455) protocol is another important communication technology;
-it isn't covered in this page.
-
-[`WebSocket`](https://tools.ietf.org/html/rfc6455)协议是另一种重要的通讯技术，但本章不会涉及它。
-
-</div>
-
-
-
-Modern browsers support two HTTP-based APIs:
-[XMLHttpRequest (XHR)](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) and
-[JSONP](https://en.wikipedia.org/wiki/JSONP). A few browsers also support
-[Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
-
-现代浏览器支持两种基于 HTTP 的 API：
-[XMLHttpRequest (XHR)](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) 和
-[JSONP](https://en.wikipedia.org/wiki/JSONP)。少数浏览器还支持
-[Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)。
-
-The Angular HTTP library simplifies application programming with the **XHR** and **JSONP** APIs.
-
-Angular的HTTP库，简化了使用**XHR**和**JSONP** API的编程方式。
-
-# Contents
-
-# 目录
-
-* [Demos](guide/server-communication#demos)
-
-  [演示](guide/server-communication#demos)
-
-* [Providing HTTP Services](guide/server-communication#http-providers)
-
-  [提供HTTP服务](guide/server-communication#http-providers)
-
-* [The Tour of Heroes *HTTP* client demo](guide/server-communication#http-client)
-
-  [《英雄指南》的*HTTP*客户端演示程序](guide/server-communication#http-client)
-
-  * [The `HeroListComponent` class](guide/server-communication#HeroListComponent)
-
-    [`HeroListComponent`类](guide/server-communication#HeroListComponent)
-
-* [Fetch data with `http.get()`](guide/server-communication#fetch-data)
-
-  [使用`http.get()`获取数据](guide/server-communication#fetch-data)
-
-* [RxJS library](guide/server-communication#rxjs-library)
-
-  [RxJS库](guide/server-communication#rxjs-library)
-  
-  * [Enable RxJS operators](guide/server-communication#enable-rxjs-operators)
-  
-    [启用RxJS操作符](guide/server-communication#enable-rxjs-operators)
-
-* [Process the response object](guide/server-communication#extract-data)
-
-  [处理响应对象](guide/server-communication#extract-data)
-
-  * [Parse to `JSON`](guide/server-communication#parse-to-json)
-
-    [解析为`JSON`](guide/server-communication#parse-to-json)
-
-  * [Do not return the response object](guide/server-communication#no-return-response-object)
-
-    [不要返回响应对象](guide/server-communication#no-return-response-object)
-
-  * [Always handle errors](guide/server-communication#error-handling)
-
-    [别忘了处理错误](guide/server-communication#error-handling)
-
-  * [`HeroListComponent` error handling](guide/server-communication#hero-list-component)
-
-    [`HeroListComponent`错误处理](guide/server-communication#hero-list-component)
-
-* [Send data to the server](guide/server-communication#update)
-
-  [把数据发到服务器](guide/server-communication#update)
-
-  * [Headers](guide/server-communication#headers)
-
-    [HTTP头](guide/server-communication#headers)
-
-  * [JSON results](guide/server-communication#json-results)
-
-    [JSON结果](guide/server-communication#json-results)
-
-  * [Fall back to promises](guide/server-communication#promises)
-  
-    [退化为承诺（Promise）](guide/server-communication#promises)
-
-* [Cross-Origin Requests: Wikipedia example](guide/server-communication#cors)
-
-  [跨域请求：Wikipedia范例](guide/server-communication#cors)
-
-  * [Search Wikipedia](guide/server-communication#search-wikipedia)
-
-    [搜索 Wikipedia](guide/server-communication#search-wikipedia)
-
-  * [Search parameters](guide/server-communication#search-parameters)
-
-    [搜索参数](guide/server-communication#search-parameters)
-
-  * [The WikiComponent](guide/server-communication#wikicomponent)
-
-    [WikiComponent组件](guide/server-communication#wikicomponent)
-
-* [A wasteful app](guide/server-communication#wasteful-app)
-
-  [奢侈的应用](guide/server-communication#wasteful-app)
-
-* [More fun with Observables](guide/server-communication#more-observables)
-
-  [更多可观察对象的探索](guide/server-communication#more-observables)
-
-  * [Create a stream of search terms](guide/server-communication#create-stream)
-
-    [创建一个搜索词汇的流](guide/server-communication#create-stream)
-
-  * [Listen for search terms](guide/server-communication#listen-for-search-terms)
-
-    [监听搜索词汇](guide/server-communication#listen-for-search-terms)
-
-* [Guarding against Cross-Site Request Forgery](guide/server-communication#xsrf)
-
-  [防范跨站请求（CSRF）攻击](guide/server-communication#xsrf)
-
-* [Override default request headers (and other request options)](guide/server-communication#override-default-request-options)
-
-  [改写默认的请求头（以及其它请求选项）](guide/server-communication#override-default-request-options)
-
-* [Appendix: Tour of Heroes _in-memory web api_](guide/server-communication#in-mem-web-api)
-
-  [附录：英雄指南的内存 Web API 服务](guide/server-communication#in-mem-web-api)
-
-A <live-example>live example</live-example> illustrates these topics.
-
-我们在<live-example>在线例子</live-example>中展示了这些主题。
-
-
-{@a demos}
-
-
-
-# Demos
-
-# 演示
-
-This page describes server communication with the help of the following demos:
-
-本章通过下面这些演示，描述了服务端通讯的用法。
-
-
-
-* [The Tour of Heroes *HTTP* client demo](guide/server-communication#http-client).
-
-  [英雄指南 *HTTP* 客户端](guide/server-communication#http-client)
-  
-* [Fall back to Promises](guide/server-communication#promises).
-
-  [退化为使用承诺（Promise）](guide/server-communication#promises)
-  
-* [Cross-Origin Requests: Wikipedia example](guide/server-communication#cors).
-
-  [跨站请求：Wikipedia 示例](guide/server-communication#cors)
-  
-* [More fun with Observables](guide/server-communication#more-observables).
-
-  [更多可观察对象的探索](guide/server-communication#more-observables)
-
-
-The root `AppComponent` orchestrates these demos:
-
-这些演示由根组件`AppComponent`统一指挥。
-
-
-<code-example path="server-communication/src/app/app.component.ts" title="src/app/app.component.ts">
-
-</code-example>
-
-
-
-
-# Providing HTTP services
-
-# 提供 HTTP 服务
-
-First, configure the application to use server communication facilities.
-
-首先，配置应用来使用服务器通讯设施。
-
-The Angular <code>Http</code> client communicates with the server using a familiar HTTP request/response protocol.
-The `Http` client is one of a family of services in the Angular HTTP library.
-
-我们通过 <code>Http</code> 客户端，使用熟悉的 HTTP 请求/回应协议与服务器通讯。
-  `Http`客户端是Angular的HTTP库所提供的一系列服务之一。
-
-
-<div class="l-sub-section">
-
-
-
-When importing from the `@angular/http` module, SystemJS knows how to load services from
-the Angular HTTP library
-because the `systemjs.config.js` file maps to that module name.
-
-当我们从`@angular/http`模块中导入服务时，SystemJS 知道该如何从Angular的HTTP库中加载它们，
-这是因为`systemjs.config.js`文件已经注册过这个模块名。
-
-
-</div>
-
-
-
-Before you can use the `Http` client, you need to register it as a service provider with the dependency injection system.
-
-要想使用`Http`客户端，你需要先通过依赖注入系统把它注册成一个服务提供商。
-
-
-<div class="l-sub-section">
-
-
-
-Read about providers in the [Dependency Injection](guide/dependency-injection) page.
-
-关于提供商的更多信息，见[依赖注入](guide/dependency-injection)。
-
-
-</div>
-
-
-
-Register providers by importing other NgModules to the root NgModule in `app.module.ts`.
-
-在`app.module.ts`中通过导入其他模块来注册提供商到根 NgModule。
-
-
-<code-example path="server-communication/src/app/app.module.1.ts" title="src/app/app.module.ts (v1)" linenums="false">
-
-</code-example>
-
-
-
-
-Begin by importing the necessary members.
-The newcomers are the `HttpModule` and the `JsonpModule` from the Angular HTTP library. For more information about imports and related terminology, see the [MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) on the `import` statement.
-
-我们从导入所需的成员开始，它们中的大多数我们都熟悉了，只有`HttpModule`和`JsonpModule`是新面孔。
-关于导入和相关术语的更多信息，见 [MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 中的`import`语句。
-
-To add these modules to the application, pass them to the `imports` array in the root `@NgModule`.
-
-只要把它们传给根模块的`imports`数组，就可以把这些模块加入应用。
-
-
-<div class="l-sub-section">
-
-
-
-The `HttpModule` is necessary for making HTTP calls.
-Though the `JsonpModule` isn't necessary for plain HTTP,
-there is a JSONP demo later in this page.
-Loading its module now saves time.
-
-我们需要 HttpModule 来发起 HTTP 调用。
-普通的 HTTP 调用并不需要用到 JsonpModule，
-不过稍后我们就会演示对 JSONP 的支持，
-所以现在就加载它，免得再回来改浪费时间。
-
-</div>
-
-
-
-
-## The Tour of Heroes HTTP client demo
-
-## 《英雄指南》的 HTTP 客户端演示
-
-The 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 the user add new heroes, and saves them to the server.
-The app uses the Angular <code>Http</code> client to communicate via **XMLHttpRequest (XHR)**.
-
-我们的第一个演示是《英雄指南(TOH)》[教程](tutorial)的一个迷你版。
-这个版本从服务器获取一些英雄，把它们显示在列表中，还允许我们添加新的英雄并将其保存到服务器。
-借助 Angular 的 `Http` 客户端，我们通过`XMLHttpRequest (XHR)`与服务器通讯。
-
-It works like this:
-
-它跑起来是这样的：
-
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/server-communication/http-toh.gif' alt="ToH mini app" width="250"></img>
-</figure>
-
-
-
-This demo has a single component, the `HeroListComponent`.  Here's its template:
-
-这个演示是一个单一组件`HeroListComponent`，其模板如下：
-
-
-<code-example path="server-communication/src/app/toh/hero-list.component.html" title="src/app/toh/hero-list.component.html">
-
-</code-example>
-
-
-
-It presents the list of heroes with an `ngFor`.
-Below the list is an input box and an *Add Hero* button where you can enter the names of new heroes
-and add them to the database.
-A [template reference variable](guide/template-syntax#ref-vars), `newHeroName`, accesses the
-value of the input box in the `(click)` event binding.
-When the user clicks the button, that value is passed to the component's `addHero` method and then
-the event binding clears it to make it ready for a new hero name.
-
-它使用`ngFor`来展现这个英雄列表。
-列表的下方是一个输入框和一个 *Add Hero* 按钮，在那里，我们可以输入新英雄的名字，
-并把它们加到数据库中。
-在`(click)`事件绑定中，使用[模板引用变量](guide/template-syntax#ref-vars)`newHeroName`来访问这个输入框的值。
-当用户点击此按钮时，这个值传给组件的`addHero`方法，然后清除它，以备输入新英雄的名字。
-
-Below the button is an area for an error message.
-
-按钮的下方是一个错误信息区。
-
-
-{@a oninit}
-
-
-{@a HeroListComponent}
-
-
-### The *HeroListComponent* class
-
-### *HeroListComponent* 类
-
-Here's the component class:
-
-下面是这个组件类：
-
-
-<code-example path="server-communication/src/app/toh/hero-list.component.ts" region="component" title="src/app/toh/hero-list.component.ts (class)">
-
-</code-example>
-
-
-
-Angular [injects](guide/dependency-injection) a `HeroService` into the constructor
-and the component calls that service to fetch and save data.
-
-Angular会把一个`HeroService`[注入](guide/dependency-injection)到组件的构造函数中，该组件将调用此服务来获取和保存数据。
-
-The component **does not talk directly to the Angular <code>Http</code> client**.
-The component doesn't know or care how it gets the data.
-It delegates to the `HeroService`.
-
-这个组件**不会直接和 Angular 的 `Http` 客户端打交道**！
-它既不知道也不关心我们如何获取数据，这些都被委托给了`HeroService`去做。
-
-This is a golden rule: **always delegate data access to a supporting service class**.
-
-这是一条黄金法则：**总是把数据访问工作委托给一个支持性服务类**。
-
-Although _at runtime_ the component requests heroes immediately after creation,
-you **don't** call the service's `get` method in the component's constructor.
-Instead, call it inside the `ngOnInit` [lifecycle hook](guide/lifecycle-hooks)
-and rely on Angular to call `ngOnInit` when it instantiates this component.
-
-虽然_在运行期间_，组件会在创建之后立刻请求这些英雄数据，
-但我们**不**在组件的构造函数中调用此服务的`get`方法。
-而是在`ngOnInit`[生命周期钩子](guide/lifecycle-hooks)中调用它，
-Angular 会在初始化该组件时调用`ngOnInit`方法。
-
-<div class="l-sub-section">
-
-
-
-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.
-
-这是*最佳实践*。
-当组件的构造函数足够简单，并且所有真实的工作（尤其是调用远端服务器）
-都在一个独立的方法中处理时，组件会更加容易测试和调试。
-
-</div>
-
-
-
-
-The service's `getHeroes()` and `create()` methods return an `Observable` of hero data that the Angular <code>Http</code> client fetched from the server.
-
-服务的`getHeroes()`和`addHero()`方法返回一个英雄数据的可观察对象 (`Observable`)，
-这些数据是由 Angular 的 `Http` 客户端从服务器上获取的。
-
-Think of an `Observable` as a stream of events published by some source.
-To listen for events in this stream, ***subscribe*** to the `Observable`.
-These subscriptions 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).
-
-我们可以把可观察对象`Observable`看做一个由某些“源”发布的事件流。
-通过***订阅***到可观察对象`Observable`，我们监听这个流中的事件。
-在这些订阅中，我们指定了当 Web 请求生成了一个成功事件（有效载荷是英雄数据）
-或失败事件（有效载荷是错误对象）时该如何采取行动。
-
-
-With a basic understanding of the component, you're ready to look inside the `HeroService`.
-
-有了对组件的基本理解，我们可以到`HeroService`的内部实现中看看。
-
-
-{@a HeroService}
-
-
-
-## Fetch data with _http.get()_
-
-## 通过 `http.get()` 获取数据
-
-In many of the previous samples the app faked the interaction with the server by
-returning mock heroes in a service like this one:
-
-在前面的很多例子中，我们通过在服务中返回一个模拟的英雄列表来伪造了与服务器的交互过程。就像这样：
-
-
-<code-example path="toh-4/src/app/hero.service.ts" region="just-get-heroes" title="toh-4/src/app/hero.service.ts" linenums="false">
-
-</code-example>
-
-
-
-You can revise that `HeroService` to get the heroes from the server using the Angular <code>Http</code> client service:
-
-在本章中，我们会修改`HeroService`，改用 Angular 的 `Http` 客户端来从服务器上获取英雄列表：
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" region="v1" title="src/app/toh/hero.service.ts (revised)">
-
-</code-example>
-
-
-
-Notice that the Angular <code>Http</code> client service is
-[injected](guide/dependency-injection) into the `HeroService` constructor.
-
-注意，这个 Angular `Http` 客户端服务[被注入](guide/dependency-injection)到了`HeroService`的构造函数中。
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" region="ctor" title="src/app/toh/hero.service.ts">
-
-</code-example>
-
-
-
-Look closely at how to call `http.get`:
-
-仔细看看我们是如何调用`http.get`的
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" region="http-get" title="src/app/toh/hero.service.ts (getHeroes)" linenums="false">
-
-</code-example>
-
-
-
-You pass the resource URL to `get` and it calls the server which returns heroes.
-
-我们把资源的 URL 传进`get`函数，它调用了服务器，而服务器应该返回英雄列表。
-
-
-<div class="l-sub-section">
-
-
-
-The server returns heroes once you've set up the [in-memory web api](guide/server-communication#in-mem-web-api)
-described in the appendix below.
-Alternatively, you can temporarily target a JSON file by changing the endpoint URL:
-
-一旦我们按附录中所描述的那样准备好了[内存 Web API](guide/in-mem-web-api)，它将返回英雄列表。
-但目前，你可以临时性地使用一个 JSON 文件，修改一下 URL：
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" region="endpoint-json" title="src/app/toh/hero.service.ts" linenums="false">
-
-</code-example>
-
-
-
-</div>
-
-
-
-{@a rxjs}
-If you are familiar with asynchronous methods in modern JavaScript, you might expect the `get` method to return a
-<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank" title="Promise">promise</a>.
-You'd expect to chain a call to `then()` and extract the heroes.
-Instead you're calling a `map()` method.
-Clearly this is not a promise.
-
-{@a rxjs}
-返回值可能会让我们感到意外。
-对熟悉现代 JavaScript 中的异步调用方法的人来说，我们期待`get`方法返回一个[承诺 (promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。
-我们期待链接调用`then()`方法，并从中取得英雄列表。
-而这里调用了一个`map()`方法，显然，它不是承诺 (Promise)。
-
-In fact, the `http.get` method returns an **Observable** of HTTP Responses (`Observable<Response>`) from the RxJS library
-and `map()` is one of the RxJS *operators*.
-
-事实上，`http.get`方法返回了一个 HTTP Response 类型的**可观察对象** (`Observable<Response>`)，这个对象来自 RxJS 库，而`map()`是 RxJS 的*操作符*之一。
-
-
-{@a rxjs-library}
-
-
-
-## RxJS library
-
-## RxJS库
-
-<a href="http://reactivex.io/rxjs" target="_blank" title="RxJS Reactive Extensions">RxJS</a>
-is a third party library, endorsed by Angular, that implements the 
-<a href="https://www.youtube.com/watch?v=VLGCCpOWFFw" target="_blank" title="Video: Rob Wormald on Observables"><b>asynchronous Observable</b></a> pattern.
-
-<a href="http://reactivex.io/rxjs" target="_blank" title="RxJS响应式编程扩展库">RxJS</a>是一个被Angular认可的第三方库，它是<a href="https://www.youtube.com/watch?v=VLGCCpOWFFw" target="_blank" title="Video: Rob Wormald on observables"><b>异步可观察对象</b></a>模式的一种实现。
-
-All of the Developer Guide samples have installed the RxJS npm package
-because Observables are used widely in Angular applications.
-_This_ app needs it when working with the HTTP client.
-But you must take a critical extra step to make RxJS Observables usable: 
-_you must import the RxJS operators individually_.
-
-开发指南中的所有例子都安装了 RxJS 的 npm 包，
-这是因为可观察对象在 Angular 应用中使用非常广泛。
-HTTP 客户端更需要它。但还要经过一个关键步骤，我们才能用 RxJS 可观察对象：
-我们必须单独导入一些RxJS的操作符。
-
-### Enable RxJS operators
-
-### 启用 RxJS 操作符  
-
-The RxJS library is large.
-Size matters when building a production application and deploying it to mobile devices.
-You should include only necessary features.
-  
-RxJS 库实在是太大了。
-当构建一个产品级应用，并且把它发布到移动设备上的时候，大小就会成为一个问题。
-我们应该只包含那些我们确实需要的特性。
-
-Each code file should add the operators it needs by importing from an RxJS library.
-The `getHeroes()` method needs the `map()` and `catch()` operators so it imports them like this.
-
-每个代码文件都需要把它需要的操作符从RxJS库中导入，并添加进来。
-`getHeroes()`方法需要一个`map()`和一个`catch()`操作符，那就像这样导入它：
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" region="rxjs-imports" title="src/app/app.component.ts (import rxjs)" linenums="false">
-
-</code-example>
-
-
-
-
-{@a extract-data}
-
-
-## Process the response object
-
-## 处理响应对象
-
-Remember that the `getHeroes()` method used an `extractData()` helper method to map the `http.get` response object to heroes:
-
-记住，`getHeroes()`借助一个`extractData()`辅助方法来把`http.get`的响应对象映射成了英雄列表：
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" region="extract-data" title="src/app/toh/hero.service.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
-
-The `response` object doesn't hold the data in a form the app can use directly.
-You must parse the response data into a JSON object.
-
-这个`response`对象并没有以一种我们能直接使用的格式来保存数据。
-要让它在应用程序中可用，我们就必须把这个响应数据解析成一个 JSON 对象。
-
-
-{@a parse-to-json}
-
-
-### Parse to JSON
-
-### 解析成 JSON
-
-
-The response data are in JSON string form.
-The app must parse that string into JavaScript objects by calling `response.json()`.
-
-响应数据是 JSON 字符串格式的。
-我们必须把这个字符串解析成 JavaScript 对象 —— 只要调一下`response.json()`就可以了。
-
-
-<div class="l-sub-section">
-
-
-
-This is not Angular's own design.
-The Angular HTTP client follows the Fetch specification for the
-[response object](https://fetch.spec.whatwg.org/#response-class) returned by the `Fetch` function.
-That spec defines a `json()` method that parses the response body into a JavaScript object.
-
-这不是 Angular 自己的设计。
-Angular HTTP 客户端遵循 ES2015 规范来处理`Fetch`函数返回的[响应对象](https://fetch.spec.whatwg.org/#response-class)。
-此规范中定义了一个`json()`函数，来把响应体解析成 JavaScript 对象。
-
-
-</div>
-
-
-
-<div class="l-sub-section">
-
-
-
-Don't expect the decoded JSON to be the heroes array directly.
-This server always wraps JSON results in an object with a `data`
-property. You have to unwrap it to get the heroes.
-This is conventional web API behavior, driven by
-[security concerns](https://www.owasp.org/index.php/OWASP_AJAX_Security_Guidelines#Always_return_JSON_with_an_Object_on_the_outside).
-
-我们不应该期待解码后的 JSON 直接就是一个英雄数组。
-调用的这个服务器总会把 JSON 结果包装进一个带`data`属性的对象中。
-我们必须解开它才能得到英雄数组。这是一个约定俗成的 Web API 行为规范，它是出于
-[安全方面的考虑](https://www.owasp.org/index.php/OWASP_AJAX_Security_Guidelines#Always_return_JSON_with_an_Object_on_the_outside)。
-
-
-</div>
-
-
-
-<div class="alert is-important">
-
-
-
-Make no assumptions about the server API.
-Not all servers return an object with a `data` property.
-
-不要对服务端 API 做任何假设。
-并非所有服务器都会返回一个带`data`属性的对象。
-
-
-</div>
-
-
-
-{@a no-return-response-object}
-
-
-### Do not return the response object
-
-### 不要返回响应对象
-
-The `getHeroes()` method _could_ have returned the HTTP response but this wouldn't
-follow best practices.
-The point of a data service is to hide the server interaction details from consumers.
-The component that calls the `HeroService` only wants heroes and is kept separate
-from getting them, the code dealing with where they come from, and the response object.
-
-`getHeroes()`确实可以返回 HTTP 响应对象，但这不是最佳实践。
-  数据服务的重点在于，对消费者隐藏与服务器交互的细节。
-  调用`HeroService`的组件希望得到英雄数组。
-  它并不关心我们如何得到它们。
-  它也不在乎这些数据从哪里来。
-  毫无疑问，它也不希望直接和一个响应对象打交道。
-
-
-<div class="callout is-important">
-
-
-
-<header>
-  HTTP GET is delayed
-</header>
-
-
-
-<header>
-  HTTP 的 GET 方法被推迟执行了
-</header>
-
-
-
-The `http.get` does **not send the request just yet.** This Observable is
-[*cold*](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md#cold-vs-hot-observables),
-which means that the request won't go out until something *subscribes* to the Observable.
-That *something* is the [HeroListComponent](guide/server-communication#subscribe).
-
-`http.get`**仍然没有发送请求！**这是因为可观察对象是
-[*冷的*](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md#cold-vs-hot-observables)，
-也就是说，只有当某人*订阅*了这个可观察对象时，这个请求才会被发出。
-这个场景中的*某人*就是[HeroListComponent](guide/server-communication#subscribe)。
-
-
-</div>
-
-
-
-{@a error-handling}
-
-
-### Always handle errors
-
-### 总是处理错误
-
-An important part of dealing with I/O is anticipating errors by preparing to catch them
-and do something with them. One way to handle errors is to pass an error message
-back to the component for presentation to the user,
-but only if it says something that the user can understand and act upon.
-
-一旦开始与 I/O 打交道，我们就必须准备好接受墨菲定律：如果一件倒霉事*可能*发生，它就*迟早会*发生。
-我们可以在`HeroService`中捕获错误，并对它们做些处理。
-只有在用户可以理解并采取相应行动的时候，我们才把错误信息传回到组件，让组件展示给最终用户。
-
-This simple app conveys that idea, albeit imperfectly, in the way it handles a `getHeroes` error.
-
-在这个简单的应用中，我们在服务和组件中都只提供了最原始的错误处理方式。
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" region="error-handling" title="src/app/toh/hero.service.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
-
-
-The `catch()` operator passes the error object from `http` to the `handleError()` method.
-The `handleError` method transforms the error into a developer-friendly message,
-logs it to the console, and returns the message in a new, failed Observable via `Observable.throw`.
-
-`catch()`操作符将错误对象传递给`http`的`handleError()`方法。
-服务处理器 (`handleError`) 把响应对象记录到控制台中，
-把错误转换成对用户友好的消息，并且通过`Observable.throw`来把这个消息放进一个新的、用于表示“失败”的可观察对象。
-
-
-<code-example path="server-communication/app/toh/hero.service.ts" region="error-handling" title="app/toh/hero.service.ts (excerpt)" linenums="false">
-
-</code-example>
-
-
-
-{@a subscribe}
-
-
-{@a hero-list-component}
-
-
-<h3>
-  <b>HeroListComponent</b>   error handling
-</h3>
-
-
-
-<h3>
-  <b>HeroListComponent</b>   错误处理
-</h3>
-
-
-
-
-Back in the `HeroListComponent`, in `heroService.getHeroes()`,
-the `subscribe` function has a second function parameter to handle the error message.
-It sets an `errorMessage` variable that's bound conditionally in the `HeroListComponent` template.
-
-回到`HeroListComponent`，这里我们调用了`heroService.getHeroes()`。我们提供了`subscribe`函数的第二个参数来处理错误信息。
-它设置了一个`errorMessage`变量，被有条件的绑定到了`HeroListComponent`模板中。
-
-
-<code-example path="server-communication/src/app/toh/hero-list.component.ts" region="getHeroes" title="src/app/toh/hero-list.component.ts (getHeroes)" linenums="false">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-Want to see it fail? In the `HeroService`, reset the api endpoint to a bad value. Afterward, remember to restore it.
-
-想看到它失败时的情况吗？在`HeroService`中把 API 的端点设置为一个无效值就行了。但别忘了恢复它。
-
-
-</div>
-
-{@a create}
-{@a update}
-{@a post}
-
-
-## Send data to the server
-
-## 往服务器发送数据
-
-So far you've seen how to retrieve data from a remote location using an HTTP service.
-Now you'll add the ability to create new heroes and save them in the backend.
-
-前面我们已经看到如何用一个 HTTP 服务从远端获取数据了。
-但我们还能再给力一点，让它可以创建新的英雄，并把它们保存到后端。
-
-You'll write a method for the `HeroListComponent` to call, a `create()` method, that takes
-just the name of a new hero and returns an `Observable` of `Hero`. It begins like this:
-
-我们将为`HeroListComponent`创建一个简单的`create()`方法，它将接受新英雄的名字，并且返回一个`Hero`型的`Observable`，代码如下：
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" region="create-sig" title="src/app/toh/hero.service.ts" linenums="false">
-
-</code-example>
-
-
-
-To implement it, you must know the server's API for creating heroes.
-
-要实现它，我们得知道关于服务端 API 如何创建英雄的一些细节。
-
-[This sample's data server](guide/server-communication#in-mem-web-api) follows typical REST guidelines.
-It expects a [`POST`](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) request
-at the same endpoint as `GET` heroes.
-It expects the new hero data to arrive in the body of the request,
-structured like a `Hero` entity but without the `id` property.
-The body of the request should look like this:
-
-我们的[数据服务器](guide/server-communication#in-mem-web-api)遵循典型的 REST 指导原则。
-它期待在和`GET`英雄列表的同一个端点上存在一个[`POST`](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5)请求。
-它期待从请求体 (body) 中获得新英雄的数据，数据的结构和`Hero`对象相同，但是不带`id`属性。
-请求体应该是这样的：
-
-
-<code-example format="." language="javascript">
-  { "name": "Windstorm" }
-</code-example>
-
-
-
-The server generates the `id` and returns the entire `JSON` representation
-of the new hero including its generated id. The hero arrives tucked inside a response object
-with its own `data` property.
-
-服务器将生成`id`，并且返回新英雄的完整`JSON`形式，包括这个生成的 id。
-该英雄的数据被塞进一个响应对象的`data`属性中。
-
-Now that you know how the API works, implement `create()` as follows:
-
-现在，知道了这个 API 如何工作，我们就可以像这样实现`create()`了：
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" region="import-request-options" title="src/app/toh/hero.service.ts (additional imports)" linenums="false">
-
-</code-example>
-
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" linenums="false" title="src/app/toh/hero.service.ts (create)" region="create">
-
-</code-example>
-
-
-
-{@a headers}
-
-
-### Headers
-
-### 请求头 (headers)
-
-In the `headers` object, the `Content-Type` specifies that the body represents JSON.
-
-我们通过`Content-Type`头告诉服务器，body 是 JSON 格式的。
-
-
-Next, the `headers` object is used to configure the `options` object. The `options`
-object is a new instance of `RequestOptions`, a class that allows you to specify
-certain settings when instantiating a request. In this way, [headers](api/http/index/Headers-class) is one of the [RequestOptions](api/http/index/RequestOptions-class).
-
-接下来，使用`headers`对象来配置`options`对象。
-`options`对象是`RequestOptions`的新实例，该类允许你在实例化请求时指定某些设置。这样，
-[Headers](api/http/index/Headers-class) 是 [RequestOptions](api/http/index/RequestOptions-class) 中的一员。
-
-In the `return` statement, `options` is the *third* argument of the `post()` method, as shown above.
-
-在`return`声明中，`options`是传给`post()`方法的*第三个*参数，就像前面见过的那样。
-
-
-{@a json-results}
-
-
-### JSON results
-
-### JSON 结果
-
-As with `getHeroes()`, use the `extractData()` helper to [extract the data](guide/server-communication#extract-data)
-from the response.
-
-像`getHeroes()`中一样，我们可以使用`extractData()`辅助函数从响应中[提取出数据](guide/server-communication#extract-data)。
-
-
-
-Back in the `HeroListComponent`, its `addHero()` method subscribes to the Observable returned by the service's `create()` method.
-When the data arrive it pushes the new hero object into its `heroes` array for presentation to the user.
-
-回到`HeroListComponent`，我们看到*该组件的*`addHero()`方法中订阅了这个由*服务中*的`create()`方法返回的可观察对象。
-当有数据到来时，它就会把这个新的英雄对象追加 (push) 到`heroes`数组中，以展现给用户。
-
-
-<code-example path="server-communication/src/app/toh/hero-list.component.ts" region="addHero" title="src/app/toh/hero-list.component.ts (addHero)" linenums="false">
-
-</code-example>
-
-
-
-<h2 id='promises'>
-  Fall back to promises
-</h2>
-
-
-
-<h2 id='promises'>
-  倒退为承诺 (Promise)
-</h2>
-
-
-
-Although the Angular `http` client API returns an `Observable<Response>` you can turn it into a
-[`Promise<Response>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
-It's easy to do, and in simple cases, a Promise-based version looks much
-like the Observable-based version.
-
-虽然 Angular 的`http`客户端 API 返回的是`Observable<Response>`类型的对象，但我们也可以把它转成
-[`Promise<Response>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。
-这很容易，并且在简单的场景中，一个基于承诺 (Promise) 的版本看起来很像基于可观察对象 (Observable) 的版本。
-
-
-<div class="l-sub-section">
-
-
-
-While Promises may be more familiar, Observables have many advantages.
-
-可能“承诺”看起来更熟悉一些，但“可观察对象”有很多优越之处。
-
-
-</div>
-
-
-
-Here is a comparison of the `HeroService` using Promises versus Observables,
-highlighting just the parts that are different.
-
-下面是使用承诺重写`HeroService`，要特别注意那些不同的部分。
-
-
-<code-tabs>
-
-  <code-pane title="src/app/toh/hero.service.promise.ts (promise-based)" path="server-communication/src/app/toh/hero.service.promise.ts" region="methods">
-
-  </code-pane>
-
-  <code-pane title="src/app/toh/hero.service.ts (observable-based)" path="server-communication/src/app/toh/hero.service.ts" region="methods">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-You can follow the Promise `then(this.extractData).catch(this.handleError)` pattern as in
-this example.
-
-在本例中，你可以遵循承诺的`then(this.extractData).catch(this.handleError)`模式。
-
-Alternatively, you can call `toPromise(success, fail)`. The Observable's `map` callback moves to the 
-first *success* parameter and its `catch` callback to the second *fail* parameter 
-in this pattern: `.toPromise(this.extractData, this.handleError)`.
-
-另外，你也可以调用`toPromise(success, fail)`。可观察对象的`map`第一个参数为*成功*时的回调函数，
-它的第二个参数用`.toPromise(this.extractData, this.handleError)`来拦截失败。
-
-The `errorHandler` forwards an error message as a failed `Promise` instead of a failed `Observable`.
-
-我们的`errorHandler`也改用了一个失败的承诺，而不再是失败的可观察对象。
-
-The diagnostic *log to console* is just one more `then()` in the Promise chain.
-
-把诊断信息*记录到控制台*也只是在承诺的处理链中多了一个`then()`而已。
-
-You have to adjust the calling component to expect a `Promise` instead of an `Observable`:
-
-我们还得对调用方组件进行调整，让它期待一个`Promise`而非`Observable`：
-  
-
-<code-tabs>
-
-  <code-pane title="src/app/toh/hero-list.component.promise.ts (promise-based)" path="server-communication/src/app/toh/hero-list.component.promise.ts" region="methods">
-
-  </code-pane>
-
-  <code-pane title="src/app/toh/hero-list.component.ts (observable-based)" path="server-communication/src/app/toh/hero-list.component.ts" region="methods">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-The only obvious difference is that you call `then()` on the returned Promise instead of `subscribe`.
-Both methods take the same functional arguments.
-
-唯一一个比较明显的不同点是我们调用这个返回的承诺的`then()`方法，而不再是`subscribe`。
-我们给了这两个方法完全相同的调用参数。
-
-<div class="l-sub-section">
-
-
-
-The less obvious but critical difference is that these two methods return very different results.
-
-细微却又关键的不同点是，这两个方法返回了非常不同的结果！
-
-The Promise-based `then()` returns another Promise. You can keep chaining more `then()` and `catch()` calls, getting a new promise each time.
-
-基于承诺的`then()`返回了另一个承诺。我们可以链式调用多个`then()`和`catch()`方法，每次都返回一个新的承诺。
-
-The `subscribe()` method returns a `Subscription`. A `Subscription` is not another `Observable`.
-It's the end of the line for Observables. You can't call `map()` on it or call `subscribe()` again.
-The `Subscription` object has a different purpose, signified by its primary method, `unsubscribe`.
-
-但`subscribe()`方法返回一个`Subscription`对象。但`Subscription`不是另一个`Observable`。
-它是可观察对象的末端。我们不能在它上面调用`map()`函数或再次调用`subscribe()`函数。
-`Subscription`对象的设计目的是不同的，这从它的主方法`unsubscribe`就能看出来。
-
-To understand the implications and consequences of subscriptions, watch [Ben Lesh's talk on Observables](https://www.youtube.com/watch?v=3LKMwkuK0ZE) or his video course on [egghead.io](https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises).
-
-要理解订阅的实现和效果，请看 [Ben Lesh 关于可观察对象的演讲](https://www.youtube.com/watch?v=3LKMwkuK0ZE)
-或者他在 [egghead.io](https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises) 的课程。
-
-
-</div>
-
-
-
-<h2 id='cors'>
-  Cross-Origin Requests: Wikipedia example
-</h2>
-
-
-
-<h2 id='cors'>
-  跨域请求：Wikipedia 范例
-</h2>
-
-
-
-You just learned how to make `XMLHttpRequests` using the Angular <code>Http</code> service.
-This is the most common approach to server communication, but it doesn't work in all scenarios.
-
-我们刚刚学习了用 Angular `Http` 服务发起`XMLHttpRequests`。
-这是与服务器通讯时最常用的方法。
-但它不适合所有场景。
-
-For security reasons, web browsers block `XHR` calls to a remote server whose origin is different from the origin of the web page.
-The *origin* is the combination of URI scheme, hostname, and port number.
-This is called the [same-origin policy](https://en.wikipedia.org/wiki/Same-origin_policy).
-
-出于安全的考虑，网络浏览器会阻止调用与当前页面不“同源”的远端服务器的`XHR`。
-所谓*源*就是 URI 的协议 (scheme)、主机名 (host) 和端口号 (port) 这几部分的组合。
-这被称为[同源策略](https://en.wikipedia.org/wiki/Same-origin_policy)。
-
-
-<div class="l-sub-section">
-
-
-
-Modern browsers do allow `XHR` requests to servers from a different origin if the server supports the
-[CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) protocol.
-If the server requires user credentials, enable them in the [request headers](guide/server-communication#headers).
-
-在现代浏览器中，如果服务器支持 [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) 协议，那么也可以向不同源的服务器发起`XHR`请求。
-如果服务器要请求用户凭证，我们就在[请求头](guide/server-communication#headers)中启用它们。
-
-
-</div>
-
-
-
-Some servers do not support CORS but do support an older, read-only alternative called [JSONP](https://en.wikipedia.org/wiki/JSONP).
-Wikipedia is one such server.
-
-有些服务器不支持 CORS，但支持一种老的、只读的（译注：即仅支持 GET）备选协议，这就是 [JSONP](https://en.wikipedia.org/wiki/JSONP)。
-Wikipedia就是一个这样的服务器。
-
-<div class="l-sub-section">
-
-
-
-This [Stack Overflow answer](http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about/2067584#2067584) covers many details of JSONP.
-
-这个 [StackOverflow 上的答案](http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about/2067584#2067584)覆盖了关于 JSONP 的很多细节。
-
-
-</div>
-
-
-
-{@a search-wikipedia}
-
-
-### Search Wikipedia
-
-### 搜索 Wikipedia
-
-Here is a simple search that shows suggestions from Wikipedia as the user
-types in a text box:
-
-我们来构建一个简单的搜索程序，当我们在文本框中输入时，它会从 Wikipedia 中获取并显示建议的词汇列表:
-
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/server-communication/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250"></img>
-</figure>
-
-
-
-
-Wikipedia offers a modern `CORS` API and a legacy `JSONP` search API. This example uses the latter.
-The Angular `Jsonp` service both extends the `Http` service for JSONP and restricts you to `GET` requests.
-All other HTTP methods throw an error because `JSONP` is a read-only facility.
-
-Wikipedia 提供了一个现代的`CORS` API和一个传统的`JSONP`搜索 API。在这个例子中，我们使用后者。
-Angular 的`Jsonp`服务不但通过 JSONP 扩展了`Http`服务，而且限制我们只能用`GET`请求。
-尝试调用所有其它 HTTP 方法都将抛出一个错误，因为 JSONP 是只读的。
-
-As always, wrap the interaction with an Angular data access client service inside a dedicated service, here called `WikipediaService`.
-
-像往常一样，我们把和 Angular 数据访问服务进行交互的代码全都封装在一个专门的服务中。我们称之为`WikipediaService`。
-
-
-<code-example path="server-communication/src/app/wiki/wikipedia.service.ts" title="src/app/wiki/wikipedia.service.ts">
-
-</code-example>
-
-
-
-The constructor expects Angular to inject its `Jsonp` service, which
-is available because `JsonpModule` is in the root `@NgModule` `imports` array
-in `app.module.ts`.
-
-这个构造函数期望 Angular 给它注入一个`jsonp`服务。
-前面我们已经把`JsonpModule`导入到了根模块中，所以这个服务已经可以使用了。
-{@a query-parameters}
-
-### Search parameters
-
-### 搜索参数
-
-The [Wikipedia "opensearch" API](https://www.mediawiki.org/wiki/API:Opensearch)
-expects four parameters (key/value pairs) to arrive in the request URL's query string.
-The keys are `search`, `action`, `format`, and `callback`.
-The value of the `search` key is the user-supplied search term to find in Wikipedia.
-The other three are the fixed values "opensearch", "json", and "JSONP_CALLBACK" respectively.
-
-[Wikipedia 的 'opensearch' API](https://www.mediawiki.org/wiki/API:Opensearch) 期待在所请求的 URL 中带四个查询参数（键/值对格式）。
-这些键 (key) 分别是`search`、`action`、`format`和`callback`。
-`search`的值是用户提供的用于在 Wikipedia 中查找的关键字。
-另外三个参数是固定值，分别是 "opensearch"、"json" 和 "JSONP_CALLBACK"。
-
-<div class="l-sub-section">
-
-
-
-The `JSONP` technique requires that you pass a callback function name to the server in the query string: `callback=JSONP_CALLBACK`.
-The server uses that name to build a JavaScript wrapper function in its response, which Angular ultimately calls to extract the data.
-All of this happens under the hood.
-
-`JSONP`技术需要我们通过查询参数传给服务器一个回调函数的名字：`callback=JSONP_CALLBACK`。
-服务器使用这个名字在它的响应体中构建一个 JavaScript 包装函数，Angular 最终会调用这个包装函数来提取出数据。
-这些都是 Angular 在背后默默完成的，你不会感受到它。
-
-</div>
-
-
-
-If you're looking for articles with the word "Angular", you could construct the query string by hand and call `jsonp` like this:
-
-如果我们要找那些含有关键字 “Angular” 的文档，我们可以先手工构造出查询字符串，并像这样调用`jsonp`：
-
-
-<code-example path="server-communication/src/app/wiki/wikipedia.service.1.ts" region="query-string" title="src/app/wiki/wikipedia.service.ts" linenums="false">
-
-</code-example>
-
-
-
-In more parameterized examples you could build the query string with the Angular `URLSearchParams` helper:
-
-在更加参数化的例子中，我们会首选 Angular 的`URLSearchParams`辅助类来构建查询字符串，就像这样：
-
-
-<code-example path="server-communication/src/app/wiki/wikipedia.service.ts" region="search-parameters" title="src/app/wiki/wikipedia.service.ts (search parameters)" linenums="false">
-
-</code-example>
-
-
-
-This time you call `jsonp` with *two* arguments: the `wikiUrl` and an options object whose `search` property is the `params` object.
-
-这次我们使用了*两个*参数来调用`jsonp`：`wikiUrl`和一个配置对象，配置对象的`search`属性是刚构建的这个`params`对象。
-
-
-<code-example path="server-communication/src/app/wiki/wikipedia.service.ts" region="call-jsonp" title="src/app/wiki/wikipedia.service.ts (call jsonp)" linenums="false">
-
-</code-example>
-
-
-
-`Jsonp` flattens the `params` object into the same query string you saw earlier, sending the request
-to the server.
-
-`Jsonp`把`params`对象平面化为一个查询字符串，而这个查询字符串和以前我们直接放在请求中的那个是一样的。
-{@a wikicomponent}
-
-### The WikiComponent
-
-### WikiComponent 组件
-
-Now that you have a service that can query the Wikipedia API,
-turn your attention to the component (template and class) that takes user input and displays search results.
-
-现在，我们有了一个可用于查询 Wikpedia API 的服务，
-我们重新回到组件中，接收用户输入，并显示搜索结果。
-
-
-<code-example path="server-communication/src/app/wiki/wiki.component.ts" title="src/app/wiki/wiki.component.ts">
-
-</code-example>
-
-
-
-The template presents an `<input>` element *search box* to gather search terms from the user,
-and calls a `search(term)` method after each `keyup` event.
-
-该模板有一个`<input>`元素，它是用来从用户获取搜索关键词的*搜索框*。
-在每次`keyup`事件被触发时，它调用`search(term)`方法。
-
-The component's `search(term)` method delegates to the `WikipediaService`, which returns an 
-Observable array of string results (`Observable<string[]>`).
-Instead of subscribing to the Observable inside the component, as in the `HeroListComponent`,
-the app forwards the Observable result to the template (via `items`) where the `async` pipe
-in the `ngFor` handles the subscription. Read more about [async pipes](guide/pipes#async-pipe)
-in the [Pipes](guide/pipes) page.
-
-`search(term)`方法委托`WikipediaService`服务来完成实际操作。
-该服务返回的是一个字符串数组的可观察对象 (`Observable<string[]>`)。
-没有像`HeroListComponent`那样在组件内部订阅这个可观察对象，
-我们把这个可观察对象作为结果传给模板（通过`items`属性），
-模板中`ngFor`上的 async（异步）管道会对这个订阅进行处理。
-关于[异步管理](guide/pipes#async-pipe)的更多信息，见 [Pipes](guide/pipes)。
-
-<div class="l-sub-section">
-
-
-
-The [async pipe](guide/pipes#async-pipe) is a good choice in read-only components
-where the component has no need to interact with the data.
-
-我们通常在只读组件中使用[异步管道](guide/pipes#async-pipe)，这种组件不需要与数据进行互动。
-
-`HeroListComponent` can't use the pipe because `addHero()` pushes newly created heroes into the list.
-
-但我们不能在`HeroListComponent`中使用这个管道，这是因为`addHero()`会把一个新创建的英雄追加到英雄列表中。
-
-
-</div>
-
-
-
-{@a wasteful-app}
-
-
-## A wasteful app
-
-## 奢侈的应用程序
-
-The Wikipedia search makes too many calls to the server.
-It is inefficient and potentially expensive on mobile devices with limited data plans.
-
-这个 Wikipedia 搜索程序触发了过多的服务器调用。
-这样效率很低，而且在流量受限的移动设备上会显得过于昂贵。
-
-### 1. Wait for the user to stop typing
-
-### 1. 等用户停止输入
-
-Presently, the code calls the server after every keystroke.
-It should only make requests when the user *stops typing*.
-Here's how it will work after refactoring:
-
-我们目前会在每次按键之后调用服务器。
-但合理的方式是只在用户*停止输入*之后才发起请求。
-重构之后，它将这样工作：
-
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/server-communication/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250"></img>
-</figure>
-
-
-
-### 2. Search when the search term changes
-
-### 2. 当搜索关键字变化了才搜索
-
-Suppose a user enters the word *angular* in the search box and pauses for a while.
-The application issues a search request for *angular*.
-
-假设用户在输入框中输入了单词 *angular*，然后稍等片刻。
-应用程序就会发出一个对 *angular* 的搜索请求。
-
-Then the user backspaces over the last three letters, *lar*, and immediately re-types *lar* before pausing once more.
-The search term is still _angular_. The app shouldn't make another request.
-
-然后，用户用退格键删除了最后三个字符 *lar*，并且毫不停顿的重新输入了 *lar*。
-搜索关键词仍然是 “angular”。这时应用程序不应该发起另一个请求。
-
-### 3. Cope with out-of-order responses
-
-### 3. 对付乱序响应体
-
-The user enters *angular*, pauses, clears the search box, and enters *http*.
-The application issues two search requests, one for *angular* and one for *http*.
-
-用户输入了 *angular*，暂停，清除搜索框，然后输入 *http*。
-应用程序发起了两个搜索请求，一个搜 *angular*，一个搜 *http*。
-
-Which response arrives first? It's unpredictable.
-When there are multiple requests in-flight, the app should present the responses
-in the original request order.
-In this example, the app must always display the results for the *http* search
-no matter which response arrives first.
-
-哪一个响应会先回来？我们是没法保证的。
-即使有多个尚未返回的请求，应用程序也应该按照原始请求的顺序展示对它们的响应。
-如果能让 *angular* 的结果始终在后面返回，就不会发生这样的混乱了。
-
-
-{@a more-observables}
-
-
-## More fun with Observables
-
-## Observable 的更多乐趣
-
-You can address these problems and improve the app with the help of some nifty observable operators.
-
-借助一些漂亮的可观察对象操作符，我们可以解决这些问题，并改进我们的应用程序。
-
-You could make changes to the `WikipediaService`, but for a better
-user experience, create a copy of the `WikiComponent` instead and make it smarter,
-with the help of some nifty Observable operators.
-
-我们本可以把这些改动合并进`WikipediaService`中，但是为了更好用户体验，
-我们创建一个`WikiComponent`的复本，让它变得更智能。
-下面是`WikiSmartComponent`，它使用同样的模板：
-
-Here's the `WikiSmartComponent`, shown next to the original `WikiComponent`:
-
-这里是`WikiSmartComponent`组件，就显示在原`WikiComponent`的紧后面：
-
-
-<code-tabs>
-
-  <code-pane title="src/app/wiki/wiki-smart.component.ts" path="server-communication/src/app/wiki/wiki-smart.component.ts">
-
-  </code-pane>
-
-  <code-pane title="src/app/wiki/wiki.component.ts" path="server-communication/src/app/wiki/wiki.component.ts">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-While the templates are virtually identical,
-there's a lot more RxJS in the "smart" version,
-starting with `debounceTime`, `distinctUntilChanged`, and `switchMap` operators,
-imported as [described above](guide/server-communication#rxjs-library).
-
-虽然它们的模板几乎相同，但是这个“智能”版涉及到了更多RxJS，比如`debounceTime`、`distinctUntilChanged`和`switchMap`操作符，
-就像[前面提过的那样](guide/server-communication#rxjs-library)导入。
-
-
-{@a create-stream}
-
-
-### Create a stream of search terms
-
-### 创建一个搜索关键词的流
-
-The `WikiComponent` passes a new search term directly to the `WikipediaService` after every keystroke.
-
-每当按键时，`WikiComponent`就会把一个新的搜索词直接传给`WikipediaService`。
-
-The `WikiSmartComponent` class turns the user's keystrokes into an Observable _stream of search terms_
-with the help of a `Subject`, which you import from RxJS:
-
-`WikiSmartComponent`类借助一个`Subject`实例把用户的按键传给一个搜索关键词的可观察流（Observable stream）。`Subject`是从RxJS中导入的。
-
-
-<code-example path="server-communication/src/app/wiki/wiki-smart.component.ts" region="import-subject" title="src/app/wiki/wiki-smart.component.ts" linenums="false">
-
-</code-example>
-
-
-
-The component creates a `searchTermStream` as a `Subject` of type `string`.
-The `search()` method adds each new search box value to that stream via the subject's `next()` method.
-
-组件创建`searchTermStream`为`string`类型的`Subject`。
-`search()`方法通过`subject`的`next()`方法，将每个新搜索框的值添加到数据流中。
-
-
-<code-example path="server-communication/src/app/wiki/wiki-smart.component.ts" region="subject" title="src/app/wiki/wiki-smart.component.ts" linenums="false">
-
-</code-example>
-
-
-
-{@a listen-for-search-terms}
-
-
-### Listen for search terms
-
-### 监听搜索词
-
-The `WikiSmartComponent` listens to the *stream of search terms* and
-processes that stream _before_ calling the service.
-
-`WikiSmartComponent`监听*搜索关键词的流*，并且可以在调用搜索服务*之前*处理这个流。
-
-
-<code-example path="server-communication/src/app/wiki/wiki-smart.component.ts" region="observable-operators" title="src/app/wiki/wiki-smart.component.ts" linenums="false">
-
-</code-example>
-
-
-
-* <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md" target="_blank" title="debounce operator"><i>debounceTime</i></a>
-waits for the user to stop typing for at least 300 milliseconds.
-
-  <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md" target="_blank" title="debounce operator"><i>debounceTime</i></a>
-  （防抖动）会等用户停止键入至少300毫秒后才触发。
-
-* <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/distinctuntilchanged.md" target="_blank" title="distinctUntilChanged operator"><i>distinctUntilChanged</i></a>
-ensures that the service is called only when the new search term is different from the previous search term.
-
-  <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/distinctuntilchanged.md" target="_blank" title="distinctUntilChanged operator"><i>distinctUntilChanged</i></a>
-  会确保只有在新的搜索关键词和以前的那个不同时才会调用搜索服务。
-
-* The <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md" target="_blank" title="switchMap operator"><i>switchMap</i></a>
-calls the `WikipediaService` with a fresh, debounced search term and coordinates the stream(s) of service response.
-
-  <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md" target="_blank" title="switchMap operator"><i>switchMap</i></a>
-  会用一个新的、防抖过的搜索关键词来调用`WikipediaService`，并切换到该服务的响应流。
-
-The role of `switchMap` is particularly important.
-The `WikipediaService` returns a separate Observable of string arrays (`Observable<string[]>`) for each search request.
-The user could issue multiple requests before a slow server has had time to reply,
-which means a backlog of response Observables could arrive at the client, at any moment, in any order.
-
-`switchMap`的角色是至关重要的。
-`WikipediaService`为每个搜索请求返回一个独立的字符串数组型的可观察对象（`Observable<string[]>`）。
-在一个慢速服务器有时间回复之前，用户可能会发起多个请求，这意味着这个流中的响应体可能在任何时刻、以任何顺序抵达客户端。
-
-The `switchMap` returns its own Observable that _combines_ all `WikipediaService` response Observables,
-re-arranges them in their original request order,
-and delivers to subscribers only the most recent search results.
-
-`switchMap`返回一个自有的可观察对象，该对象*组合*了`WikipediaService`中的所有响应体，
-并把它们按原始请求顺序排列，只把最近一次返回的搜索结果提交给订阅者。
-
-
-{@a xsrf}
-
-
-
-## Guarding against Cross-Site Request Forgery
-
-## 预防跨站请求伪造攻击
-
-In a cross-site request forgery (CSRF or XSRF), an attacker tricks the user into visiting
-a different web page with malignant code that secretly sends a malicious request to your application's web server.
-
-在一个跨站请求伪造攻击（CSRF 或 XSRF）中，攻击者欺骗用户访问一个不同的网页，它带有恶意代码，秘密向你的应用程序服务器发送恶意请求。
-
-The server and client application must work together to thwart this attack.
-Angular's `Http` client does its part by applying a default `CookieXSRFStrategy` automatically to all requests.
-
-客户端和服务器必须合作来抵挡这种攻击。
-Angular 的`http`客户端自动使用它默认的`CookieXSRFStrategy`来完成客户端的任务。
-
-The `CookieXSRFStrategy` supports a common anti-XSRF technique in which the server sends a randomly
-generated authentication token in a cookie named `XSRF-TOKEN`.
-The HTTP client adds an `X-XSRF-TOKEN` header with that token value to subsequent requests.
-The server receives both the cookie and the header, compares them, and processes the request only if the cookie and header match.
-
-`CookieXSRFStrategy`支持常见的反 XSRF 技术，服务端发送一个随机生成的认证令牌到名为`XSRF-TOKEN`的 cookie 中。
-HTTP 客户端使用该令牌的值为所有后续请求添加一个`X-XSRF-TOKEN`页头。
-服务器接受这个 cookie 和页头，比较它们，只有在它们匹配的时候才处理请求。
-
-See the [XSRF topic on the Security page](guide/security#xsrf) for more information about XSRF and Angular's `XSRFStrategy` counter measures.
-
-参见["安全"一章的XSRF主题](guide/security#xsrf)，以了解关于XSRF和Angular的应对措施`XSRFStrategy`的更多信息。
-
-
-{@a override-default-request-options}
-
-
-
-## Override default request headers (and other request options)
-
-## 覆盖默认的请求头（及其它请求选项）
-
-Request options (such as headers) are merged into the
-[default _RequestOptions_](https://angular.io/docs/ts/latest/api/http/index/BaseRequestOptions-class.html "API: BaseRequestOptions")
-before the request is processed.
-The `HttpModule` provides these default options via the `RequestOptions` token.
-
-请求选项（比如请求头），会在发起请求之前并入[default _RequestOptions_](https://angular.io/docs/ts/latest/api/http/index/BaseRequestOptions-class.html "API: BaseRequestOptions")中。
-`HttpModule`通过`RequestOptions`令牌提供了这些默认选项。
-
-You can override these defaults to suit your application needs
-by creating a custom sub-class of `RequestOptions`
-that sets the default options for the application.
-
-我们可以通过创建一个`RequestOptions`的子类来把这些默认值覆盖为本应用中的默认选项，以适应应用中的需求。
-
-This sample creates a class that sets the default `Content-Type` header to JSON.
-It exports a constant with the necessary `RequestOptions` provider to simplify registration in `AppModule`.
-
-这个例子创建了一个类，它把默认的`Content-Type`请求头设置为JSON。
-它导出了一个带有`RequestOptions`提供商的常量，以便注册进`AppModule`中。
-
-
-<code-example path="server-communication/src/app/default-request-options.service.ts" title="src/app/default-request-options.service.ts" linenums="false">
-
-</code-example>
-
-
-
-Then it registers the provider in the root `AppModule`.
-
-然后，它在根模块`AppModule`中注册了这个提供商。
-
-
-<code-example path="server-communication/src/app/app.module.ts" region="provide-default-request-options" title="src/app/app.module.ts (provide default request header)" linenums="false">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-Remember to include this provider during setup when unit testing the app's HTTP services.
-
-在对应用的HTTP服务进行单元测试时，别忘了在初始化代码中包含这个提供商。
-
-
-</div>
-
-
-
-After this change, the `header` option setting in `HeroService.create()` is no longer necessary,
-
-修改之后，`HeroService.create()`中的`header`选项就不再需要了。
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" linenums="false" title="src/app/toh/hero.service.ts (create)" region="create">
-
-</code-example>
-
-
-
-You can confirm that `DefaultRequestOptions` is working by examing HTTP requests in the browser developer tools' network tab.
-If you're short-circuiting the server call with something like the [_in-memory web api_](guide/server-communication#in-mem-web-api),
-try commenting-out the `create` header option,
-set a breakpoint on the POST call, and step through the request processing
-to verify the header is there.
-
-打开浏览器开发者工具的network页，我们就可以确认，`DefaultRequestOptions`工作是否正常。
-如果你通过某些机制（比如[内存Web API](guide/server-communication#in-mem-web-api)）短路了对服务器的调用，
-可以试试注释掉`create`头选项，在POST调用上设置断点，并单步跟踪进请求过程来验证是否添加了这个头。
-
-Individual requests options, like this one, take precedence over the default `RequestOptions`.
-It might be wise to keep the `create` request header setting for extra safety.
-
-独立的请求选项，比如这一个，优先级高于默认的`RequestOptions`，保留`create`的请求头设置，以增强安全性，是一个明智之举。
-
-
-{@a in-mem-web-api}
-
-
-
-## Appendix: Tour of Heroes _in-memory web api_
-
-## 附录：《英雄指南》的内存 (in-memory) 服务器
-
-If the app only needed to retrieve data, you could get the heroes from a `heroes.json` file:
-
-如果我们只关心获取到的数据，我们可以告诉 Angular 从一个`heroes.json`文件中获取英雄列表，就像这样：
-
-
-<div class="l-sub-section">
-
-
-
-You wrap the heroes array in an object with a `data` property for the same reason that a data server does:
-to mitigate the [security risk](http://stackoverflow.com/questions/3503102/what-are-top-level-json-arrays-and-why-are-they-a-security-risk)
-posed by top-level JSON arrays.
-
-我们把英雄数组包装进一个带`data`属性的对象中，就像一个真正的数据服务器所应该做的那样。
-这样可以缓解由顶级 JSON 数组导致的[安全风险](http://stackoverflow.com/questions/3503102/what-are-top-level-json-arrays-and-why-are-they-a-security-risk)。
-
-
-</div>
-
-
-
-You'd set the endpoint to the JSON file like this:
-
-我们要像这样把端点设置为这个 JSON 文件：
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" region="endpoint-json" title="src/app/toh/hero.service.ts" linenums="false">
-
-</code-example>
-
-
-
-The *get heroes* scenario would work,
-but since the app can't save changes to a JSON file, it needs a web API server.
-Because there isn't a real server for this demo,
-it substitutes the Angular _in-memory web api_ simulator for the actual XHR backend service.
-
-这在*获取英雄数据*的场景下确实能工作，
-但我们不能把这些改动保存到 JSON 文件中，因此需要一个 Web API 服务器。
-因为这个演示程序中并没有一个真实的服务器，
-所以，我们使用*内存 Web API 仿真器*代替它。
-
-
-<div class="l-sub-section">
-
-
-
-The in-memory web api is not part of Angular _proper_.
-It's an optional service in its own
-<a href="https://github.com/angular/in-memory-web-api" target="_blank" title="In-memory Web API"><i>angular-in-memory-web-api</i></a>
-library installed with npm (see `package.json`).
-
-内存Web API并不是Angular本身的一部分。
-它是一个可选服务，要用npm来单独安装<a href="https://github.com/angular/in-memory-web-api" target="_blank" title="In-memory Web API"><i>angular-in-memory-web-api</i></a>库（参见`package.json`）。
-
-See the
-<a href="https://github.com/angular/in-memory-web-api/blob/master/README.md" target="_blank" title='In-memory Web API "README.md"'><i>README file</i></a>
-for configuration options, default behaviors, and limitations.
-
-参见<a href="https://github.com/angular/in-memory-web-api/blob/master/README.md" target="_blank" title='In-memory Web API "README.md"'><i>README file</i></a>来了解配置选项、默认行为和限制。
-
-
-</div>
-
-
-
-The in-memory web API gets its data from a custom application class with a `createDb()`
-method that returns a map whose keys are collection names and whose values
-are arrays of objects in those collections.
-
-内存 Web API 从一个带有`createDb()`方法的自定义类中获取数据，并且返回一个 map，它的主键 (key) 是一组名字，而值 (value) 是一组与之对应的对象数组。
-
-Here's the class for this sample, based on the JSON data:
-
-这里是与范例中基于 JSON 的数据源完成相同功能的类：
-
-
-<code-example path="server-communication/src/app/hero-data.ts" title="src/app/hero-data.ts" linenums="false">
-
-</code-example>
-
-
-
-Ensure that the `HeroService` endpoint refers to the web API:
-
-确保`HeroService`的端点指向了这个 Web API：
-
-
-<code-example path="server-communication/src/app/toh/hero.service.ts" region="endpoint" title="src/app/toh/hero.service.ts" linenums="false">
-
-</code-example>
-
-
-
-
-Finally, redirect client HTTP requests to the in-memory web API by
-adding the `InMemoryWebApiModule` to the `AppModule.imports` list.
-At the same time, call its `forRoot()` configuration method with the `HeroData` class.
-
-使用内存 Web API 服务模块很容易配置重定向，将`InMemoryWebApiModule`添加到`AppModule.imports`列表中，
-同时在`HeroData`类中调用`forRoot()`配置方法。
-
-
-<code-example path="server-communication/src/app/app.module.ts" region="in-mem-web-api" title="src/app/app.module.ts" linenums="false">
-
-</code-example>
-
-
-
-### How it works
-
-### 工作原理
-
-Angular's `http` service delegates the client/server communication tasks
-to a helper service called the `XHRBackend`.
-
-这次重定向非常容易配置，这是因为 Angular 的`http`服务把客户端/服务器通讯的工作委托给了一个叫做`XHRBackend`的辅助服务。
-
-Using standard Angular provider registration techniques, the `InMemoryWebApiModule`
-replaces the default `XHRBackend` service with its own in-memory alternative.
-At the same time, the `forRoot` method initializes the in-memory web API with the *seed data* from the mock hero dataset.
-
-使用标准 Angular 提供商注册方法，`InMemoryWebApiModule`替代默认的`XHRBackend`服务并使用它自己的内存存储服务。
-`forRoot`方法来自模拟的英雄数据集的*种子数据*初始化了这个内存 Web API。
-
-
-<div class="l-sub-section">
-
-
-
-The `forRoot()` method name is a strong reminder that you should only call the `InMemoryWebApiModule` _once_,
-while setting the metadata for the root `AppModule`. Don't call it again.
-
-`forRoot()`方法的名字告诉我们，应该只在设置根模块`AppModule`时调用`InMemoryWebApiModule`*一次*。不要再次调用它。
-
-
-</div>
-
-
-
-Here is the final, revised version of <code>src/app/app.module.ts</code>, demonstrating these steps.
-
-下面是修改过的（也是最终的）`app/app.module.ts`版本，用于演示这些步骤。
-
-
-<code-example path="server-communication/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (excerpt)">
-
-</code-example>
-
-
-
-<div class="alert is-important">
-
-
-
-Import the `InMemoryWebApiModule` _after_ the `HttpModule` to ensure that
-the `XHRBackend` provider of the `InMemoryWebApiModule` supersedes all others.
-
-在`HttpModule`之后导入`InMemoryWebApiModule`，确保`XHRBackend`的供应商`InMemoryWebApiModule`取代所有其它的供应商。
-
-
-</div>
-
-
-
-See the full source code in the <live-example></live-example>.
-
-要想查看完整的源代码，请参见<live-example></live-example>。
\ No newline at end of file
diff --git a/aio/content/guide/set-document-title.md b/aio/content/guide/set-document-title.md
index 101ebc26a8..6c418d02fb 100644
--- a/aio/content/guide/set-document-title.md
+++ b/aio/content/guide/set-document-title.md
@@ -1,48 +1,29 @@
-@title
-设置文档标题
-
-@intro
-使用 Title 服务来设置文档标题或窗口标题
-
-@description
-
-
 {@a top}
 
+# Set the Document Title
+
+# 设置文档标题
 
 Your app should be able to make the browser title bar say whatever you want it to say.
 This cookbook explains how to do it.
 
 应用程序应该能让浏览器标题栏显示我们想让它显示的内容。本*烹饪宝典*解释怎么做。
 
-See the <live-example name="cb-set-document-title"></live-example>.
+See the <live-example name="set-document-title"></live-example>.
 
-**参见<live-example name="cb-set-document-title"></live-example>**。
+参见<live-example name="set-document-title"></live-example>
 
+<div class="l-sub-section">
+  <img src='generated/images/plunker/plunker-switch-to-editor-button.png'alt="pop out the window" class="right">
+  <img src='generated/images/plunker/plunker-separate-window-button.png' alt="pop out the window" class="right">
 
-<table>
-
-  <tr>
-
-    <td>
-
-
-      To see the browser title bar change in the live example,
-      open it again in the Plunker editor by clicking the icon in the upper right,
-      then pop out the preview window by clicking the blue 'X' button in the upper right corner.
-
-      要在在线例子中看到浏览器标题的变化，请点击右上角的图标在Plunker编辑器中打开它，然后点击预览窗口右上角的蓝色'X'按钮，弹出窗口。
-    </td>
-
-    <td>
-      <img src='assets/images/devguide/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right"></img>      <br></br>      <img src='assets/images/devguide/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right"></img>
-    </td>
-
-  </tr>
-
-</table>
-
+  To see the browser title bar change in the live example,
+  open it again in the Plunker editor by clicking the icon in the upper right,
+  then pop out the preview window by clicking the blue 'X' button in the upper right corner.
+  
+  要在在线例子中看到浏览器标题的变化，请点击右上角的图标在Plunker编辑器中打开它，然后点击预览窗口右上角的蓝色'X'按钮，弹出窗口。
 
+</div>
 
 ## The problem with *&lt;title&gt;*
 
@@ -58,8 +39,6 @@ The obvious approach is to bind a property of the component to the HTML `<title>
 
 </code-example>
 
-
-
 Sorry but that won't work.
 The root component of the application is an element contained within the `<body>` tag.
 The HTML `<title>` is in the document `<head>`, outside the body, making it inaccessible to Angular data binding.
@@ -74,12 +53,10 @@ That's dirty and undermines your chances of running the app outside of a browser
 
 <div class="l-sub-section">
 
-
-
-Running your app outside a browser means that you can take advantage of server-side
-pre-rendering for near-instant first app render times and for SEO.  It means you could run from
-inside a Web Worker to improve your app's responsiveness by using multiple threads.  And it
-means that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.
+  Running your app outside a browser means that you can take advantage of server-side
+  pre-rendering for near-instant first app render times and for SEO.  It means you could run from
+  inside a Web Worker to improve your app's responsiveness by using multiple threads.  And it
+  means that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.
 
 在浏览器外运行应用程序意味着：利用服务器端预先渲染，为应用程序实现几乎实时的首次渲染，同时还能支持SEO(搜索引擎优化)。
 意味着你可以在一个Web Worker中运行你的应用程序，通过多线程技术增强应用程序的响应性。
@@ -88,14 +65,12 @@ means that you could run your app inside Electron.js or Windows Universal to del
 
 </div>
 
+## Use the `Title` service
 
-
-## Use the *Title* service
-
-## 使用*Title*服务
+## 使用 `Title` 服务
 
 Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
-The [Title](api/platform-browser/index/Title-class) service is a simple class that provides an API
+The [Title](api/platform-browser/Title) service is a simple class that provides an API
 for getting and setting the current HTML document title:
   
 幸运的是，Angular在*浏览器平台*的包中，提供了一个`Title`服务，弥补了这种差异。
@@ -106,7 +81,7 @@ for getting and setting the current HTML document title:
   `getTitle(): string` —— 获取当前HTML文档的标题。
 
 
-* `setTitle( newTitle : string )`&mdash;Sets the title of the current HTML document. 
+* `setTitle( newTitle : string )`&mdash;Sets the title of the current HTML document.
 
   `setTitle( newTitle: string)` —— 设置当前HTML文档的标题。
 
@@ -116,48 +91,29 @@ You can inject the `Title` service into the root `AppComponent` and expose a bin
 我们来把`Title`服务注入到根组件`AppComponent`，并暴露出可供绑定的`setTitle`方法让别人来调用该服务：
 
 
-<code-example path="cb-set-document-title/src/app/app.component.ts" region="class" title="src/app/app.component.ts (class)" linenums="false">
-
-</code-example>
-
-
+<code-example path="set-document-title/src/app/app.component.ts" region="class" title="src/app/app.component.ts (class)" linenums="false"></code-example>
 
 Bind that method to three anchor tags and voilà!
 
 我们把这个方法绑定到三个A标签，瞧瞧！
 
 
-<figure class='image-display'>
-  <img src="assets/images/cookbooks/set-document-title/set-title-anim.gif" alt="Set title"></img>
+<figure>
+  <img src="generated/images/guide/set-document-title/set-title-anim.gif" alt="Set title">
 </figure>
 
-
-
 Here's the complete solution:
 
 这里是完整的方案(代码)。
 
 
 <code-tabs>
-
-  <code-pane title="src/main.ts" path="cb-set-document-title/src/main.ts">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.module.ts" path="cb-set-document-title/src/app/app.module.ts">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.component.ts" path="cb-set-document-title/src/app/app.component.ts">
-
-  </code-pane>
-
+  <code-pane title="src/main.ts" path="set-document-title/src/main.ts"></code-pane>
+  <code-pane title="src/app/app.module.ts" path="set-document-title/src/app/app.module.ts"></code-pane>
+  <code-pane title="src/app/app.component.ts" path="set-document-title/src/app/app.component.ts"></code-pane>
 </code-tabs>
 
-
-
-
-## Why provide the *Title* service in *bootstrap*
+## Why provide the `Title` service in `bootstrap`
 
 ## 为什么要在*bootstrap*里面提供这个*Title*服务
 
@@ -173,7 +129,7 @@ a location you reserve for configuring the runtime Angular environment.
 That's exactly what you're doing.
 The `Title` service is part of the Angular *browser platform*.
 If you bootstrap your application into a different platform,
-you'll have to provide a different `Title` service that understands 
+you'll have to provide a different `Title` service that understands
 the concept of a "document title" for that specific platform.
 Ideally, the application itself neither knows nor cares about the runtime environment.
 
@@ -182,4 +138,4 @@ Ideally, the application itself neither knows nor cares about the runtime enviro
 
 [Back to top](guide/set-document-title#top)
 
-[回到顶部](guide/set-document-title#top)
\ No newline at end of file
+[回到顶部](guide/set-document-title#top)
diff --git a/aio/content/guide/setup-systemjs-anatomy.md b/aio/content/guide/setup-systemjs-anatomy.md
index c61fa02769..e37aaf8efb 100644
--- a/aio/content/guide/setup-systemjs-anatomy.md
+++ b/aio/content/guide/setup-systemjs-anatomy.md
@@ -1,12 +1,6 @@
-@title
-搭建剖析
-
-@intro
-解析 SystemJS 本地开发环境
-
-@description
-
+# Anatomy of the Setup Project
 
+# 搭建项目环境
 
 The documentation [setup](guide/setup) procedures install a _lot_ of files.
 Most of them can be safely ignored.
@@ -101,7 +95,7 @@ If you do, this page can help you understand their purpose.
 
       _End-to-end_ (e2e) tests of the application,
       written in Jasmine and run by the
-      <a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
+      <a href="http://www.protractortest.org/" title="Protractor: end-to-end testing for Angular">protractor</a>
       e2e test runner.
 
       应用的*端对端*(e2e)测试，用 Jasmine 写成并用 <a href="http://www.protractortest.org/" target="_blank" title="Protractor:Angular 的端对端测试">protractor</a> 端对端测试运行器测试。
@@ -228,7 +222,7 @@ If you do, this page can help you understand their purpose.
     <td>
 
 
-      Configuration for the <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
+      Configuration for the <a href="https://karma-runner.github.io/1.0/index.html" title="Karma unit test runner">karma</a>
       test runner described in the [Testing](guide/testing) guide.
 
       在[测试](guide/testing)指南中提到的 <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma测试运行器">karma</a> 测试运行器的配置。
@@ -246,7 +240,7 @@ If you do, this page can help you understand their purpose.
     <td>
 
 
-      Script to run <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
+      Script to run <a href="https://karma-runner.github.io/1.0/index.html" title="Karma unit test runner">karma</a>
       with SystemJS as described in the [Testing](guide/testing) guide.
 
       在[测试](guide/testing)指南中提到的 <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma测试运行器">karma</a> 测试运行器的脚本。
@@ -265,7 +259,7 @@ If you do, this page can help you understand their purpose.
 
 
       A list of files that you can delete if you want to purge your setup of the
-      original QuickStart Seed testing and git maintainence artifacts.
+      original QuickStart Seed testing and git maintenance artifacts.
       See instructions in the optional
       [_Deleting non-essential files_](guide/setup#non-essential "Setup: Deleting non-essential files") section.
       *Do this only in the beginning to avoid accidentally deleting your own tests and git setup!*
@@ -310,12 +304,11 @@ If you do, this page can help you understand their purpose.
       Contains command scripts for running the application,
       running tests, and more. Enter `npm run` for a listing.
       <a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts"
-         target="_blank" title="npm scripts for Angular documentation samples">Read more</a> about them.
+         title="npm scripts for Angular documentation samples">Read more</a> about them.
 
       包含了一些命令脚本，用来运行应用、运行测试与其他。输入`npm run`来查看命令列表。
       到<a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts" 
          target="_blank" title="Angular 文档例子的 npm 脚本">这里</a>阅读更多关于它们的说明。
-
     </td>
 
   </tr>
@@ -330,7 +323,7 @@ If you do, this page can help you understand their purpose.
 
 
       Configuration for the
-      <a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
+      <a href="http://www.protractortest.org/" title="Protractor: end-to-end testing for Angular">protractor</a>
       _end-to-end_ (e2e) test runner.
 
       <a href="http://www.protractortest.org/" target="_blank" title="Protractor: Angular 的端对端测试">protractor</a> *端对端* (e2e) 测试器运行器的配置。
@@ -409,7 +402,7 @@ If you do, this page can help you understand their purpose.
 
 
       Optional extra SystemJS configuration.
-      A way to add SystemJS mappings, such as for appliation _barrels_,
+      A way to add SystemJS mappings, such as for application _barrels_,
       without changing the original `system.config.js`.
 
       可选的额外 SystemJS 配置。
@@ -452,7 +445,7 @@ If you do, this page can help you understand their purpose.
       利用`npm`安装的 TypeScript 语法检查器 (linter) 检测 TypeScript 代码并在你违反它的规则时提示你。
 
       This file defines linting rules favored by the 
-      [Angular style guide](guide/style-guide) and by the authors of the documentation.
+      [Angular style guide](guide/styleguide) and by the authors of the documentation.
 
       该文件定义了 [Angular 风格指南](guide/style-guide)与本文档站作者喜爱的语法检查规则。
     </td>
diff --git a/aio/content/guide/setup.md b/aio/content/guide/setup.md
index a1ec5ccb6c..dc850ea634 100644
--- a/aio/content/guide/setup.md
+++ b/aio/content/guide/setup.md
@@ -1,22 +1,11 @@
-@title
-搭建本地开发环境
-
-@intro
-安装 Angular 《快速起步》种子，更快更有效地在本地开发应用
-
-@description
-
+# Setup for local development
 
+# 搭建本地开发环境
 
 {@a develop-locally}
 
-
-## Setup a local development environment
-
-## 搭建本地开发环境
-
 The <live-example name=quickstart>QuickStart live-coding</live-example> example is an Angular _playground_.
-It's not where you'd develop a real application. 
+It's not where you'd develop a real application.
 You [should develop locally](guide/setup#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.
 
 <live-example name=quickstart>《快速起步》在线编程</live-example>例子是 Angular 的*游乐场*。
@@ -24,37 +13,19 @@ You [should develop locally](guide/setup#why-locally "Why develop locally") on y
  你应该在自己的电脑上[本地开发](guide/setup#why-locally "为什么在本地开发？")... 你也应该在本地环境学习 Angular。
 
 Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
-maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo"). 
+maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
 
 利用 [github 上](https://github.com/angular/quickstart "安装 github 《快速起步》库")的**《快速起步》种子**在你的电脑上搭建一个新项目是很快很容易的。
 
 
 Make sure you have [node and npm installed](guide/setup#install-prerequisites "What if you don't have node and npm?").
-Then ...
-
-确定你已经安装了 [node和npm](guide/setup#install-prerequisites "如果你没有node和npm？")，然后：
-
-1. Create a project folder (you can call it `quickstart` and rename it later).
-
-   新建项目目录（你可以暂时为其取名`quickstart`，以后再重命名）。
-
-1. [Clone](guide/setup#clone "Clone it from github") or [download](guide/setup#download "download it from github") the **QuickStart seed** into your project folder.
-
-   [克隆](guide/setup#clone "从 github 克隆")或者[下载](guide/setup#download "从 github 下载")**《快速起步》种子**到你的项目目录。
-
-1. Install [npm](guide/setup#install-prerequisites "What if you don't have node and npm?") packages.
-  
-   安装 [npm](guide/setup#install-prerequisites "如果你没有 node和npm ？") 包。
-
-1. Run `npm start` to launch the sample application.
-
-   运行`npm start`来启动例子应用。
 
+确定你已经安装了 [node和npm](guide/setup#install-prerequisites "如果你没有node和npm？")。
 
 {@a clone}
 
 
-### Clone
+## Clone
 
 ### 克隆
 
@@ -77,7 +48,7 @@ Perform the _clone-to-launch_ steps with these terminal commands.
 
 
 
-`npm start` fails in _Bash for Windows_ which does not support networking to servers as of January, 2017.
+`npm start` fails in _Bash for Windows_ in versions earlier than the Creator's Update (April 2017).
 
 在*Bash for Windows*中`npm start`可能会失败，因为到2017-01为止它还不支持访问网络上的服务器。
 
@@ -89,10 +60,9 @@ Perform the _clone-to-launch_ steps with these terminal commands.
 {@a download}
 
 
-### Download
+## Download
 
 ### 下载
-
 <a href="https://github.com/angular/quickstart/archive/master.zip" title="Download the QuickStart seed repository">Download the QuickStart seed</a>
 and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
 
@@ -113,7 +83,7 @@ and unzip it into your project folder. Then perform the remaining steps with the
 
 
 
-`npm start` fails in _Bash for Windows_ which does not support networking to servers as of January, 2017.
+`npm start` fails in _Bash for Windows_ in versions earlier than the Creator's Update (April 2017).
 
 在*Bash for Windows*中`npm start`可能会失败，因为到2017-01为止它还不支持访问网络上的服务器。
 
@@ -190,7 +160,7 @@ Open a terminal window in the project folder and enter the following commands fo
 
 The **QuickStart seed** contains the same application as the QuickStart playground.
 But its true purpose is to provide a solid foundation for _local_ development.
-Consequently, there are _many more files_ in the project folder on your machine, 
+Consequently, there are _many more files_ in the project folder on your machine,
 most of which you can [learn about later](guide/setup-systemjs-anatomy "Setup Anatomy").
 
 **《快速起步》种子** 包含了与《快速起步》游乐场一样的应用，但是，它真正的目的是提供坚实的*本地*开发基础。
@@ -258,7 +228,7 @@ Focus on the following three TypeScript (`.ts`) files in the **`/src`** folder.
 
 
 
-All guides and cookbooks have _at least these core files_. 
+All guides and cookbooks have _at least these core files_.
 Each file has a distinct purpose and evolves independently as the application grows.
 
 所有指南和烹饪书都至少有*这几个核心文件*。每个文件都有独特的用途，并且随着应用的成长各自独立演变。
@@ -336,9 +306,7 @@ The following are all in `src/`
 
       Defines the same `AppComponent` as the one in the QuickStart playground.
       It is the **root** component of what will become a tree of nested components
-      as the application evolves. 
-
-      定义与《快速起步》游乐场同样的`AppComponent`。
+      as the application evolves. 定义与《快速起步》游乐场同样的`AppComponent`。
       它是**根**组件，随着应用的演变，它将变成一颗嵌套组件树。
     </td>
 
@@ -353,7 +321,7 @@ The following are all in `src/`
     <td>
 
 
-      Defines `AppModule`, the [root module](guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
+      Defines `AppModule`, the [root module](guide/bootstrapping "AppModule: the root module") that tells Angular how to assemble the application.
       Right now it declares only the `AppComponent`. 
       Soon there will be more components to declare. 
 
@@ -373,8 +341,8 @@ The following are all in `src/`
     <td>
 
 
-      Compiles the application with the [JIT compiler](glossary#jit) and
-      [bootstraps](guide/appmodule#main "bootstrap the application") 
+      Compiles the application with the [JIT compiler](guide/glossary#jit) and
+      [bootstraps](guide/bootstrapping#main "bootstrap the application")
       the application's main module (`AppModule`) to run in the browser.
       The JIT compiler is a reasonable choice during the development of most projects and
       it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
@@ -400,7 +368,7 @@ The following are all in `src/`
 
 ### 下一步
 
-If you're new to Angular, we recommend staying on the [learning path](guide/learning-angular "Angular learning path").
+If you're new to Angular, we recommend you follow the [tutorial](tutorial "Tour of Heroes tutorial").
 
 如果你是 Angular 初学者，建议根据[学习路径](guide/learning-angular "Angular学习路径")学习。
 
@@ -440,8 +408,8 @@ Older versions produce errors.
 在终端/控制器窗口运行命令`node -v`和`npm -v`，来**确认你运行的 node 是`v4.x.x`或更高，npm 为`3.x.x`或更高。**
 老版本会产生错误。
 
-We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm. 
-You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that 
+We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.
+You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that
 use other versions of node and npm.
 
 我们推荐使用 [nvm](https://github.com/creationix/nvm) 来管理多版本 node 和 npm。
@@ -466,10 +434,10 @@ You can play with the sample code, share your changes with friends, and download
 几乎每章文档里面的链接都在浏览器中打开完整的例子。
 你可以用这些代码做实验，或者与朋友共享你的修改，或者下载并在你自己的电脑上运行这些代码。
 
-The [QuickStart](quickstart "Angular QuickStart Playground") shows just the `AppComponent` file.
+The [QuickStart](guide/quickstart "Angular QuickStart Playground") shows just the `AppComponent` file.
 It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
 so the reader can discover Angular without distraction.
-The other samples are based on the QuickStart seed. 
+The other samples are based on the QuickStart seed.
 
 [快速起步](quickstart "Angular 快速起步游乐场")仅仅展示了`AppComponent`文件。
 它在内部创建了只为*游乐场*而准备的等价`app.module.ts`和`main.ts`。
@@ -496,11 +464,11 @@ As much fun as this is ...
 
   只有本地 IDE 有类型支持、代码重构和代码自动完成
   
-Use the <live-example title="QuickStart Seed in Plunker">live coding</live-example> environment as a _playground_, 
+Use the <live-example title="QuickStart Seed in Plunker">live coding</live-example> environment as a _playground_,
 a place to try the documentation samples and experiment on your own.
 It's the perfect place to reproduce a bug when you want to
-<a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="File a documentation issue">file a documentation issue</a> or
-<a href="https://github.com/angular/angular/issues/new" target="_blank" title="File an Angular issue">file an issue with Angular itself</a>.
+<a href="https://github.com/angular/angular/issues/new" title="File a documentation issue">file a documentation issue</a> or
+<a href="https://github.com/angular/angular/issues/new" title="File an Angular issue">file an issue with Angular itself</a>.
 
 把<live-example title="QuickStart Seed in Plunker"><i>在线编程</i></live-example>环境当做*游乐场*，一个尝试文档例子和自己做实验的地方。
 当你想要<a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="提交关于文档的问题">提交关于文档的问题</a>或者
@@ -509,4 +477,4 @@ It's the perfect place to reproduce a bug when you want to
 
 For real development, we strongly recommend [developing locally](guide/setup#develop-locally).
 
-对于现实项目开发，我们强烈推荐在[本地开发](guide/setup#develop-locally)。
\ No newline at end of file
+对于现实项目开发，我们强烈推荐在[本地开发](guide/setup#develop-locally)。
diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md
index 136a0bb367..db9aa27443 100644
--- a/aio/content/guide/structural-directives.md
+++ b/aio/content/guide/structural-directives.md
@@ -1,12 +1,6 @@
-@title
-结构型指令
-
-@intro
-Angular 有一个强力的模板引擎，它能让你轻松维护元素的DOM树结构。
-
-@description
-
+# Structural Directives
 
+# 结构型指令
 
 <style>
   h4 {font-size: 17px !important; text-transform: none !important;}
@@ -16,64 +10,11 @@ Angular 有一个强力的模板引擎，它能让你轻松维护元素的DOM树
 
 
 
-This guide looks at how Angular manipulates the DOM with **structural directives** and 
+This guide looks at how Angular manipulates the DOM with **structural directives** and
 how you can write your own structural directives to do the same thing.
 
 在本章中，我们将看看Angular如何用*结构型指令*操纵DOM树，以及我们该如何写自己的结构型指令来完成同样的任务。
 
-### Table of contents
-
-### 目录
-
-* [What are structural directives?](guide/structural-directives#definition)
-
-  [什么是结构型指令？](guide/structural-directives#definition)
-
-* [*NgIf* case study](guide/structural-directives#ngIf)
-
-  [*NgIf* 案例](guide/structural-directives#ngIf)
-
-* [The asterisk (*) prefix](guide/structural-directives#asterisk)
-
-  [星号（*）前缀](guide/structural-directives#asterisk)
-
-* [Inside *NgFor*](guide/structural-directives#ngFor)
-
-  [*NgFor* 指令内幕](guide/structural-directives#ngFor)
-
-  * [microsyntax](guide/structural-directives#microsyntax)
-
-    [微语法](guide/structural-directives#microsyntax)
-
-  * [template input variables](guide/structural-directives#template-input-variable)
-
-    [模板输入变量](guide/structural-directives#template-input-variable)
-
-  * [one structural directive per element](guide/structural-directives#one-per-element)
-
-    [每个元素一个结构型指令](guide/structural-directives#one-per-element)
-
-* [Inside the *NgSwitch* directives](guide/structural-directives#ngSwitch)
-
-  [*NgSwitch* 指令内幕](guide/structural-directives#ngSwitch)
-
-* [Prefer the (*) prefix](guide/structural-directives#prefer-asterisk)
-
-  [优先使用（*）前缀](guide/structural-directives#prefer-asterisk)
-
-* [The &lt;ng-template> element](guide/structural-directives#template)
-
-  [&lt;ng-template> 元素](guide/structural-directives#template)
-
-* [Group sibling elements with &lt;ng-container&gt;](guide/structural-directives#ng-container)
-
-  [使用&lt;ng-container&gt;对兄弟元素进行分组](guide/structural-directives#ng-container)
-
-* [Write a structural directive](guide/structural-directives#unless)
-
-  [写自己的结构型指令](guide/structural-directives#unless)
-
-
 Try the <live-example></live-example>.
 
 试试<live-example></live-example>。
@@ -94,13 +35,13 @@ elements.
 结构型指令的职责是HTML布局。
 它们塑造或重塑DOM的结构，比如添加、移除或维护这些元素。
 
-As with other directives, you apply a structural directive to a _host element_. 
+As with other directives, you apply a structural directive to a _host element_.
 The directive then does whatever it's supposed to do with that host element and its descendents.
 
 像其它指令一样，你可以把结构型指令应用到一个*宿主元素*上。
 然后它就可以对宿主元素及其子元素做点什么。
 
-Structural directives are easy to recognize. 
+Structural directives are easy to recognize.
 An asterisk (*) precedes the directive attribute name as in this example.
 
 结构型指令非常容易识别。
@@ -121,16 +62,16 @@ You'll learn in this guide that the [asterisk (*) is a convenience notation](gui
 and the string isa [_microsyntax_](guide/structural-directives#microsyntax) rather than the usual
 [template expression](guide/template-syntax#template-expressions).
 Angular desugars this notation into a marked-up `<ng-template>` that surrounds the
-host element and its descendents. 
+host element and its descendents.
 Each structural directive does something different with that template.
 
 在这个例子中，我们将学到[星号(*)这个简写方法](guide/structural-directives#asterisk)，而这个字符串是一个[*微语法*](guide/structural-directives#microsyntax)，而不是通常的[模板表达式](guide/template-syntax#template-expressions)。
 Angular会解开这个语法糖，变成一个`<ng-template>`标记，包裹着宿主元素及其子元素。
 每个结构型指令都可以用这个模板做点不同的事情。
 
-Three of the common, built-in structural directives&mdash;[NgIf](guide/template-syntax#ngIf), 
-[NgFor](guide/template-syntax#ngFor), and [NgSwitch...](guide/template-syntax#ngSwitch)&mdash;are 
-described in the [_Template Syntax_](guide/template-syntax) guide and seen in samples throughout the Angular documentation. 
+Three of the common, built-in structural directives&mdash;[NgIf](guide/template-syntax#ngIf),
+[NgFor](guide/template-syntax#ngFor), and [NgSwitch...](guide/template-syntax#ngSwitch)&mdash;are
+described in the [_Template Syntax_](guide/template-syntax) guide and seen in samples throughout the Angular documentation.
 Here's an example of them in a template:
 
 三个常用的内置结构型指令 —— [NgIf](guide/template-syntax#ngIf)、[NgFor](guide/template-syntax#ngFor)和[NgSwitch...](guide/template-syntax#ngSwitch)。
@@ -167,8 +108,8 @@ and how to [write your own](guide/structural-directives#unless) structural direc
 
 Throughout this guide, you'll see a directive spelled in both _UpperCamelCase_ and _lowerCamelCase_.
 Already you've seen `NgIf` and `ngIf`.
-There's a reason. `NgIf` refers to the directive _class_; 
-`ngIf` refers to the directive's _attribute name_. 
+There's a reason. `NgIf` refers to the directive _class_;
+`ngIf` refers to the directive's _attribute name_.
 
 在本章中，我们将看到指令同时具有两种拼写形式*大驼峰`UpperCamelCase`和小驼峰`lowerCamelCase`，比如我们已经看过的`NgIf`和`ngIf`。
 这里的原因在于，`NgIf`引用的是指令的*类名*，而`ngIf`引用的是指令的*属性名*。
@@ -197,7 +138,7 @@ There are two other kinds of Angular directives, described extensively elsewhere
 还有另外两种Angular指令，在本开发指南的其它地方有讲解：(1) 组件 (2) 属性型指令。
 
 A *component* manages a region of HTML in the manner of a native HTML element.
-Technically it's a directive with a template. 
+Technically it's a directive with a template.
 
 *组件*可以在原生HTML元素中管理一小片区域的HTML。从技术角度说，它就是一个带模板的指令。
 
@@ -246,13 +187,13 @@ Confirm that fact using browser developer tools to inspect the DOM.
 使用浏览器的开发者工具就可以确认这一点。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM"></img>
+<figure>
+  <img src='generated/images/guide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM">
 </figure>
 
 
 
-The top paragraph is in the DOM. The bottom, disused paragraph is not; 
+The top paragraph is in the DOM. The bottom, disused paragraph is not;
 in its place is a comment about "bindings" (more about that [later](guide/structural-directives#asterisk)).
 
 可以看到第一段文字出现在了DOM中，而第二段则没有，在第二段的位置上是一个关于“绑定”的注释（[稍后](guide/structural-directives#asterisk)有更多讲解）。
@@ -280,18 +221,18 @@ A directive could hide the unwanted paragraph instead by setting its `display` s
 
 
 
-While invisible, the element remains in the DOM. 
+While invisible, the element remains in the DOM.
 
 当不可见时，这个元素仍然留在DOM中。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM"></img>
+<figure>
+  <img src='generated/images/guide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM">
 </figure>
 
 
 
-The difference between hiding and removing doesn't matter for a simple paragraph. 
+The difference between hiding and removing doesn't matter for a simple paragraph.
 It does matter when the host element is attached to a resource intensive component.
 Such a component's behavior continues even when hidden.
 The component stays attached to its DOM element. It keeps listening to events.
@@ -318,14 +259,14 @@ So hiding and showing is sometimes the right thing to do.
   组件不用重新初始化 —— 该操作可能会比较昂贵。
   这时候隐藏和显示就成了正确的选择。
 
-But in the absence of a compelling reason to keep them around, 
+But in the absence of a compelling reason to keep them around,
 your preference should be to remove DOM elements that the user can't see
 and recover the unused resources with a structural directive like `NgIf` .
 
 但是，除非有非常强烈的理由来保留它们，否则我们更倾向于移除用户看不见的那些DOM元素，并且使用`NgIf`这样的结构型指令来收回用不到的资源。
 
 **These same considerations apply to every structural directive, whether built-in or custom.**
-Before applying a structural directive, you might want to pause for a moment 
+Before applying a structural directive, you might want to pause for a moment
 to consider the consequences of adding and removing elements and of creating and destroying components.
 
 **同样的考量也适用于每一个结构型指令，无论是内置的还是自定义的。**
@@ -390,20 +331,20 @@ Then it translates the template _attribute_ into a `<ng-template>` _element_, wr
 
   `<div>`上的其余部分，包括它的`class`属性在内，移到了内部的`<ng-template>`元素上。
 
-None of these forms are actually rendered. 
+None of these forms are actually rendered.
 Only the finished product ends up in the DOM.
 
 上述形式永远不会真的渲染出来。
 只有最终产出的结果才会出现在DOM中。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM"></img>
+<figure>
+  <img src='generated/images/guide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM">
 </figure>
 
 
 
-Angular consumed the `<ng-template>` content during its actual rendering and 
+Angular consumed the `<ng-template>` content during its actual rendering and
 replaced the `<ng-template>` with a diagnostic comment.
 
 Angular会在真正渲染的时候填充`<ng-template>`的内容，并且把`<ng-template>`替换为一个供诊断用的注释。
@@ -422,7 +363,7 @@ The [`NgFor`](guide/structural-directives#ngFor) and [`NgSwitch...`](guide/struc
 ## `*ngFor`内幕
 
 Angular transforms the `*ngFor` in similar fashion from asterisk (*) syntax through
-template _attribute_ to `<ng-template>` _element_. 
+template _attribute_ to `<ng-template>` _element_.
 
 Angular会把`*ngFor`用同样的方式把星号（*）语法的`template`*属性*转换成`<ng-template>`*元素*。
 
@@ -445,7 +386,7 @@ At minimum `NgFor` needs a looping variable (`let hero`) and a list (`heroes`).
 `NgFor`指令比本章展示过的`NgIf`具有更多的必选特性和可选特性。
 至少`NgFor`会需要一个循环变量（`let hero`）和一个列表（`heroes`）。
 
-You enable these features in the string assigned to `ngFor`, which you write in Angular's [microsyntax](guide/structural-directives#microsyntax). 
+You enable these features in the string assigned to `ngFor`, which you write in Angular's [microsyntax](guide/structural-directives#microsyntax).
 
 我们可以通过把一个字符串赋值给`ngFor`来启用这些特性，这个字符串使用Angular的[微语法](guide/structural-directives#microsyntax)。
 
@@ -454,8 +395,8 @@ You enable these features in the string assigned to `ngFor`, which you write in
 
 
 
-Everything _outside_ the `ngFor` string stays with the host element 
-(the `<div>`) as it moves inside the `<ng-template>`. 
+Everything _outside_ the `ngFor` string stays with the host element
+(the `<div>`) as it moves inside the `<ng-template>`.
 In this example, the `[ngClass]="odd"` stays on the `<div>`.
 
 `ngFor`字符串*之外*的每一样东西都会留在宿主元素（`<div>`）上，也就是说它移到了`<ng-template>`内部。
@@ -479,15 +420,15 @@ The microsyntax parser translates that string into attributes on the `<ng-templa
 Angular微语法能让我们通过简短的、友好的字符串来配置一个指令。
 微语法解析器把这个字符串翻译成`<ng-template>`上的属性：
 
-* The `let` keyword declares a [_template input variable_](guide/structural-directives#template-input-variable) 
+* The `let` keyword declares a [_template input variable_](guide/structural-directives#template-input-variable)
 that you reference within the template. The input variables in this example are `hero`, `i`, and `odd`.
-The parser translates `let hero`, `let i`, and `let odd` into variables named, 
+The parser translates `let hero`, `let i`, and `let odd` into variables named,
 `let-hero`, `let-i`, and `let-odd`.
 
   `let`关键字声明一个[模板输入变量](guide/structural-directives#template-input-variable)，我们会在模板中引用它。本例子中，这个输入变量就是`hero`、`i`和`odd`。
   解析器会把`let hero`、`let i`和`let odd`翻译成命名变量`let-hero`、`let-i`和`let-odd`。
 
-* The microsyntax parser takes `of` and `trackby`, title-cases them (`of` -> `Of`, `trackBy` -> `TrackBy`), 
+* The microsyntax parser takes `of` and `trackby`, title-cases them (`of` -> `Of`, `trackBy` -> `TrackBy`),
 and prefixes them with the directive's attribute name (`ngFor`), yielding the names `ngForOf` and `ngForTrackBy`.
 Those are the names of two `NgFor` _input properties_ .
 That's how the directive learns that the list is `heroes` and the track-by function is `trackById`.
@@ -508,23 +449,23 @@ Angular sets them to the current value of the context's `index` and `odd` proper
   `let-i`和`let-odd`变量是通过`let i=index`和`let odd=odd`来定义的。
   Angular把它们设置为*上下文*对象中的`index`和`odd`属性的当前值。
 
-* The context property for `let-hero` wasn't specified. 
-It's intended source is implicit. 
+* The context property for `let-hero` wasn't specified.
+It's intended source is implicit.
 Angular sets `let-hero` to the value of the context's `$implicit` property
 which `NgFor` has initialized with the hero for the current iteration.
 
   上下文中的属性`let-hero`没有指定过，实际上它来自一个隐式变量。
   Angular会把`let-hero`设置为上下文对象中的`$implicit`属性，`NgFor`会用当前迭代中的英雄初始化它。
 
-* The [API guide](api/common/index/NgFor-directive "API: NgFor") 
+* The [API guide](api/common/NgFor "API: NgFor")
 describes additional `NgFor` directive properties and context properties.
 
   [API参考手册](api/common/index/NgFor-directive "API: NgFor")中描述了`NgFor`指令的其它属性和上下文属性。
 
 These microsyntax mechanisms are available to you when you write your own structural directives.
-Studying the 
+Studying the
 [source code for `NgIf`](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts "Source: NgIf")
-and [`NgFor`](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_for_of.ts "Source: NgFor") 
+and [`NgFor`](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_for_of.ts "Source: NgFor")
 is a great way to learn more.
 
 这些微语法机制在你写自己的结构型指令时也同样有效，参考[`NgIf`的源码](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts "Source: NgIf")
@@ -549,11 +490,11 @@ All are preceded by the keyword `let`.
 这个例子中有好几个模板输入变量：`hero`、`i`和`odd`。
 它们都是用`let`作为前导关键字。
 
-A _template input variable_ is **_not_** the same as a 
+A _template input variable_ is **_not_** the same as a
 [template _reference_ variable](guide/template-syntax#ref-vars),
 neither _semantically_ nor _syntactically_.
 
-You declare a template _input_ variable using the `let` keyword (`let hero`). 
+You declare a template _input_ variable using the `let` keyword (`let hero`).
 The variable's scope is limited to a _single instance_ of the repeated template.
 You can use the same variable name again in the definition of other structural directives.
 
@@ -572,10 +513,10 @@ variable as the `hero` declared as `#hero`.
 
 Someday you'll want to repeat a block of HTML but only when a particular condition is true.
 You'll _try_ to put both an `*ngFor` and an `*ngIf` on the same host element.
-Angular won't let you. You may apply only one _structural_ directive to an element. 
+Angular won't let you. You may apply only one _structural_ directive to an element.
 
 The reason is simplicity. Structural directives can do complex things with the host element and its descendents.
-When two directives lay claim to the same host element, which one takes precedence? 
+When two directives lay claim to the same host element, which one takes precedence?
 Which should go first, the `NgIf` or the `NgFor`? Can the `NgIf` cancel the effect of the `NgFor`?
 If so (and it seems like it should be so), how should Angular generalize the ability to cancel for other structural directives?
 
@@ -604,12 +545,12 @@ Here's an example.
 The switch value assigned to `NgSwitch` (`hero.emotion`) determines which
 (if any) of the switch cases are displayed.
 
-`NgSwitch` itself is not a structural directive. 
+`NgSwitch` itself is not a structural directive.
 It's an _attribute_ directive that controls the behavior of the other two switch directives.
 That's why you write `[ngSwitch]`, never `*ngSwitch`.
 
-`NgSwitchCase` and `NgSwitchDefault` _are_ structural directives. 
-You attach them to elements using the asterisk (*) prefix notation. 
+`NgSwitchCase` and `NgSwitchDefault` _are_ structural directives.
+You attach them to elements using the asterisk (*) prefix notation.
 An `NgSwitchCase` displays its host element when its value matches the switch value.
 The `NgSwitchDefault` displays its host element when no sibling `NgSwitchCase` matches the switch value.
 
@@ -618,9 +559,8 @@ The `NgSwitchDefault` displays its host element when no sibling `NgSwitchCase` m
 
 
 
-*Design thought*: minimize initialization effort and consider caching state in a
+*Design thought*: minimize initialization effort and consider caching state in a  
 companion service.
-
 *设计思路*：要最小化初始化的成本，并考虑把状态缓存在一个伴生的服务中。
 
 
@@ -628,7 +568,7 @@ companion service.
 
 
 
-As with other structural directives, the `NgSwitchCase` and `NgSwitchDefault` 
+As with other structural directives, the `NgSwitchCase` and `NgSwitchDefault`
 can be desugared into the template _attribute_ form.
 
 **These same considerations apply to every structural directive, whether built-in or custom.**
@@ -694,7 +634,7 @@ You'll refer to the `<ng-template>` when you [write your own structural directiv
 ## The *&lt;ng-template&gt;*
 
 The &lt;ng-template&gt; is an Angular element for rendering HTML.
-It is never displayed directly. 
+It is never displayed directly.
 In fact, before rendering the view, Angular _replaces_ the `<ng-template>` and its contents with a comment.
 
 If there is no structural directive and you merely wrap some elements in a `<ng-template>`,
@@ -714,8 +654,8 @@ Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic.
 下面是它的操作演示：
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/template-rendering.png' width="350" alt="template tag rendering"></img>
+<figure>
+  <img src='generated/images/guide/structural-directives/template-rendering.png' alt="template tag rendering">
 </figure>
 
 
@@ -753,11 +693,11 @@ such as a `<div>`, and attach the directive to that wrapper.
 
 
 
-Introducing another container element&mdash;typically a `<span>` or `<div>`&mdash;to 
-group the elements under a single _root_ is usually harmless. 
+Introducing another container element&mdash;typically a `<span>` or `<div>`&mdash;to
+group the elements under a single _root_ is usually harmless.
 _Usually_ ... but not _always_.
 
-The grouping element may break the template appearance because CSS styles 
+The grouping element may break the template appearance because CSS styles
 neither expect nor accommodate the new layout.
 For example, suppose you have the following paragraph layout.
 
@@ -780,8 +720,8 @@ You also have a CSS style rule that happens to apply to a `<span>` within a `<p>
 The constructed paragraph renders strangely.
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style"></img>
+<figure>
+  <img src='generated/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style">
 </figure>
 
 
@@ -789,7 +729,7 @@ The constructed paragraph renders strangely.
 The `p span` style, intended for use elsewhere, was inadvertently applied here.
 
 Another problem: some HTML elements require all immediate children to be of a specific type.
-For example, the `<select>` element requires `<option>` children. 
+For example, the `<select>` element requires `<option>` children.
 You can't wrap the _options_ in a conditional `<div>` or a `<span>`.
 
 When you try this,
@@ -804,8 +744,8 @@ When you try this,
 the drop down is empty.
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/bad-select.png' alt="spanned options don't work"></img>
+<figure>
+  <img src='generated/images/guide/structural-directives/bad-select.png' alt="spanned options don't work">
 </figure>
 
 
@@ -815,7 +755,7 @@ The browser won't display an `<option>` within a `<span>`.
 ### &lt;ng-container&gt; to the rescue
 
 The Angular `<ng-container>` is a grouping element that doesn't interfere with styles or layout
-because Angular _doesn't put it in the DOM_. 
+because Angular _doesn't put it in the DOM_.
 
 Here's the conditional paragraph again, this time using `<ng-container>`.
 
@@ -829,8 +769,8 @@ Here's the conditional paragraph again, this time using `<ng-container>`.
 It renders properly.
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style"></img>
+<figure>
+  <img src='generated/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style">
 </figure>
 
 
@@ -847,14 +787,14 @@ Now conditionally exclude a _select_ `<option>` with `<ng-container>`.
 The drop down works properly.
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly"></img>
+<figure>
+  <img src='generated/images/guide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly">
 </figure>
 
 
 
 The `<ng-container>` is a syntax element recognized by the Angular parser.
-It's not a directive, component, class, or interface. 
+It's not a directive, component, class, or interface.
 It's more like the curly braces in a JavaScript `if`-block:
 
 
@@ -863,7 +803,7 @@ It's more like the curly braces in a JavaScript `if`-block:
     statement1;
     statement2;
     statement3;
-  } 
+  }
 
 </code-example>
 
@@ -917,7 +857,7 @@ Here's how you might begin:
 
 The directive's _selector_ is typically the directive's **attribute name** in square brackets, `[myUnless]`.
 The brackets define a CSS
-<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" target="_blank" title="MDN: Attribute selectors">attribute selector</a>.
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" title="MDN: Attribute selectors">attribute selector</a>.
 
 The directive _attribute name_ should be spelled in _lowerCamelCase_ and begin with a prefix.
 Don't use `ng`. That prefix belongs to Angular.
@@ -925,21 +865,21 @@ Pick something short that fits you or your company.
 In this example, the prefix is `my`.
 
 
-The directive _class_ name ends in `Directive` per the [style guide](guide/style-guide#02-03 "Angular Style Guide").
+The directive _class_ name ends in `Directive` per the [style guide](guide/styleguide#02-03 "Angular Style Guide").
 Angular's own directives do not.
 
 ### _TemplateRef_ and _ViewContainerRef_
 
-A simple structural directive like this one creates an 
-[_embedded view_](api/core/index/EmbeddedViewRef-class "API: EmbeddedViewRef")
-from the Angular-generated `<ng-template>` and inserts that view in a 
-[_view container_](api/core/index/ViewContainerRef-class "API: ViewContainerRef")
+A simple structural directive like this one creates an
+[_embedded view_](api/core/EmbeddedViewRef "API: EmbeddedViewRef")
+from the Angular-generated `<ng-template>` and inserts that view in a
+[_view container_](api/core/ViewContainerRef "API: ViewContainerRef")
 adjacent to the directive's original `<p>` host element.
 
 You'll acquire the `<ng-template>` contents with a
-[`TemplateRef`](api/core/index/TemplateRef-class "API: TemplateRef")
+[`TemplateRef`](api/core/TemplateRef "API: TemplateRef")
 and access the _view container_ through a
-[`ViewContainerRef`](api/core/index/ViewContainerRef-class "API: ViewContainerRef").
+[`ViewContainerRef`](api/core/ViewContainerRef "API: ViewContainerRef").
 
 You inject both in the directive constructor as private variables of the class.
 
@@ -953,7 +893,7 @@ You inject both in the directive constructor as private variables of the class.
 ### The _myUnless_ property
 
 The directive consumer expects to bind a true/false condition to `[myUnless]`.
-That means the directive needs a `myUnless` property, decorated with `@Input` 
+That means the directive needs a `myUnless` property, decorated with `@Input`
 
 
 <div class="l-sub-section">
@@ -979,7 +919,7 @@ Because the `myUnless` property does work, it needs a setter.
 * If the condition is falsy and the view hasn't been created previously,
 tell the _view container_ to create the _embedded view_ from the template.
 
-* If the condition is truthy and the view is currently displayed, 
+* If the condition is truthy and the view is currently displayed,
 clear the container which also destroys the view.
 
 Nobody reads the `myUnless` property so it doesn't need a getter.
@@ -1011,8 +951,8 @@ When the`condition` is truthy, the top (A)paragraph is removed  and the bottom (
 当`condition`为`true`时，顶部的段落被移除了，而底部的段落显示了出来。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/structural-directives/unless-anim.gif' alt="UnlessDirective in action"></img>
+<figure>
+  <img src='generated/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action">
 </figure>
 
 
@@ -1023,7 +963,7 @@ When the`condition` is truthy, the top (A)paragraph is removed  and the bottom (
 
 ## Summary
 
-You can both try and download the source code for this guide in the <live-example></live-example>.  
+You can both try and download the source code for this guide in the <live-example></live-example>.
 
 Here is the source from the `src/app/` folder.
 
@@ -1071,4 +1011,4 @@ You learned
 * that the Angular desugars [asterisk (*) syntax](guide/structural-directives#asterisk) into a `<ng-template>`.
 * how that works for the `NgIf`, `NgFor` and `NgSwitch` built-in directives.
 * about the [_microsyntax_](guide/structural-directives#microsyntax) that expands into a [`<ng-template>`](guide/structural-directives#template).
-* to write a [custom structural directive](guide/structural-directives#unless), `UnlessDirective`.
\ No newline at end of file
+* to write a [custom structural directive](guide/structural-directives#unless), `UnlessDirective`.
diff --git a/aio/content/guide/style-guide.md b/aio/content/guide/styleguide.md
similarity index 81%
rename from aio/content/guide/style-guide.md
rename to aio/content/guide/styleguide.md
index a7719d522f..323c63b0f7 100644
--- a/aio/content/guide/style-guide.md
+++ b/aio/content/guide/styleguide.md
@@ -1,11 +1,6 @@
-@title
-风格指南
-
-@intro
-如何写 Angular 风格的程序
-
-@description
+# Style Guide
 
+# 风格之南
 
 Looking for an opinionated guide to Angular syntax, conventions, and application structure?
 Step right in!
@@ -18,54 +13,6 @@ This style guide presents  preferred conventions and, as importantly, explains w
 
 {@a toc}
 
-
-# Contents
-
-# 目录
-
-  * [Single responsibility](guide/style-guide#single-responsibility)
-
-    [单一职责](guide/style-guide#single-responsibility)
-
-  * [Naming](guide/style-guide#naming)
-
-    [命名](guide/style-guide#naming)
-
-  * [Coding conventions](guide/style-guide#coding-conventions)
-
-    [代码规约](guide/style-guide#coding-conventions)
-
-  * [App structure and Angular modules](guide/style-guide#application-structure-and-angular-modules)
-
-    [应用结构与Angular模块](guide/style-guide#application-structure-and-angular-modules)
-
-  * [Components](guide/style-guide#components)
-
-    [组件](guide/style-guide#components)
-
-  * [Directives](guide/style-guide#directives)
-
-    [指令](guide/style-guide#directives)
-
-  * [Services](guide/style-guide#services)
-
-    [服务](guide/style-guide#services)
-
-  * [Data services](guide/style-guide#data-services)
-
-    [数据服务](guide/style-guide#data-services)
-
-  * [Lifecycle hooks](guide/style-guide#lifecycle-hooks)
-
-    [生命周期钩子](guide/style-guide#lifecycle-hooks)
-
-  * [Appendix](guide/style-guide#appendix)
-
-    [附录](guide/style-guide#appendix)
-
-
-
-
 ## Style vocabulary
 
 ## 风格词汇
@@ -145,7 +92,7 @@ If you fully understand the meaning behind the guideline and have a good reason
 
 ## 文件结构约定
 
-Some code examples display a file that has one or more similarly named companion files. 
+Some code examples display a file that has one or more similarly named companion files.
 For example, `hero.component.ts` and `hero.component.html`.
 
 在一些代码例子中，有的文件有一个或多个相似名字的伴随文件。（例如 hero.component.ts 和 hero.component.html）。
@@ -163,20 +110,20 @@ The guideline uses the shortcut `hero.component.ts|html|css|spec` to represent t
 
 ## 单一职责
 
-Apply the 
-<a href="https://wikipedia.org/wiki/Single_responsibility_principle" target="_blank"><i>single responsibility principle</i> (SRP)</a>
-to all components, services, and other symbols. 
+Apply the
+<a href="https://wikipedia.org/wiki/Single_responsibility_principle"><i>single responsibility principle</i> (SRP)</a>
+to all components, services, and other symbols.
 This helps make the app cleaner, easier to read and maintain, and more testable.
 
 对所有的组件、服务等等应用<a href="https://wikipedia.org/wiki/Single_responsibility_principle" target="_blank"><i>单一职责原则</i> (SRP)</a>
 
-### {@a 01-01}Rule of One
+{@a 01-01}
 
-### {@a 01-01}单一法则
+### Rule of One
 
-#### <a href="#01-01">Style 01-01</a>
+#### Style 01-01
 
-#### <a href="#01-01">风格 01-01</a>
+#### 风格 01-01
 
 
 <div class="s-rule do">
@@ -209,7 +156,7 @@ This helps make the app cleaner, easier to read and maintain, and more testable.
 
 
 
-**Why?** One component per file makes it far easier to read, maintain, and avoid 
+**Why?** One component per file makes it far easier to read, maintain, and avoid
 collisions with teams in source control.
 
 **为何？**单组件文件非常容易阅读、维护，并能防止在版本控制系统里与团队冲突。
@@ -248,20 +195,20 @@ The key is to make the code more reusable, easier to read, and less mistake pron
 
 最关键的是，可以增强代码可重用性和阅读性，减少出错的可能性。
 
-The following *negative* example defines the `AppComponent`, bootstraps the app, 
-defines the `Hero` model object, and loads heroes from the server all in the same file. 
+The following *negative* example defines the `AppComponent`, bootstraps the app,
+defines the `Hero` model object, and loads heroes from the server all in the same file.
 *Don't do this*.
 
 下面的*负面*例子定义了`AppComponent`，它来引导应用程序，定义了`Hero`模型对象，并从服务器加载了英雄 ... 所有都在同一个文件。 *不要这么做*。
 
 
-<code-example path="style-guide/src/01-01/app/heroes/hero.component.avoid.ts" title="app/heroes/hero.component.ts">
+<code-example path="styleguide/src/01-01/app/heroes/hero.component.avoid.ts" title="app/heroes/hero.component.ts">
 
 </code-example>
 
 
 
-It is a better practice to redistribute the component and its 
+It is a better practice to redistribute the component and its
 supporting classes into their own, dedicated files.
 
 最好将组件及其支撑部件重新分配到独立的文件。
@@ -269,31 +216,31 @@ supporting classes into their own, dedicated files.
 
 <code-tabs>
 
-  <code-pane title="main.ts" path="style-guide/src/01-01/main.ts">
+  <code-pane title="main.ts" path="styleguide/src/01-01/main.ts">
 
   </code-pane>
 
-  <code-pane title="app/app.module.ts" path="style-guide/src/01-01/app/app.module.ts">
+  <code-pane title="app/app.module.ts" path="styleguide/src/01-01/app/app.module.ts">
 
   </code-pane>
 
-  <code-pane title="app/app.component.ts" path="style-guide/src/01-01/app/app.component.ts">
+  <code-pane title="app/app.component.ts" path="styleguide/src/01-01/app/app.component.ts">
 
   </code-pane>
 
-  <code-pane title="app/heroes/heroes.component.ts" path="style-guide/src/01-01/app/heroes/heroes.component.ts">
+  <code-pane title="app/heroes/heroes.component.ts" path="styleguide/src/01-01/app/heroes/heroes.component.ts">
 
   </code-pane>
 
-  <code-pane title="app/heroes/shared/hero.service.ts" path="style-guide/src/01-01/app/heroes/shared/hero.service.ts">
+  <code-pane title="app/heroes/shared/hero.service.ts" path="styleguide/src/01-01/app/heroes/shared/hero.service.ts">
 
   </code-pane>
 
-  <code-pane title="app/heroes/shared/hero.model.ts" path="style-guide/src/01-01/app/heroes/shared/hero.model.ts">
+  <code-pane title="app/heroes/shared/hero.model.ts" path="styleguide/src/01-01/app/heroes/shared/hero.model.ts">
 
   </code-pane>
 
-  <code-pane title="app/heroes/shared/mock-heroes.ts" path="style-guide/src/01-01/app/heroes/shared/mock-heroes.ts">
+  <code-pane title="app/heroes/shared/mock-heroes.ts" path="styleguide/src/01-01/app/heroes/shared/mock-heroes.ts">
 
   </code-pane>
 
@@ -307,14 +254,15 @@ As the app grows, this rule becomes even more important.
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 01-02}Small functions
+{@a 01-02}
 
-### {@a 01-02}简单函数
+### Small functions
 
-#### <a href="#01-02">Style 01-02</a>
+### 小函数
 
-#### <a href="#01-02">风格 01-02</a>
+#### Style 01-02
 
+#### 风格 01-02
 
 <div class="s-rule do">
 
@@ -417,14 +365,15 @@ Naming conventions are hugely important to maintainability and readability. This
 
 
 
-### {@a 02-01}General Naming Guidelines
+{@a 02-01}
 
-### {@a 02-01}总体命名指导原则
+### General Naming Guidelines
 
-#### <a href="#02-01">Style 02-01</a>
+### 总体命名原则
 
-#### <a href="#02-01">风格 02-01</a>
+#### Style 02-01
 
+#### 风格 02-01
 
 <div class="s-rule do">
 
@@ -494,14 +443,15 @@ Naming conventions are hugely important to maintainability and readability. This
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 02-02}Separate File names with dots and dashes
+{@a 02-02}
 
-### {@a 02-02}使用点和横杠来分隔文件名
+### Separate file names with dots and dashes
 
-#### <a href="#02-02">Style 02-02</a>
+### 使用点和横杠来分隔文件名
 
-#### <a href="#02-02">风格 02-02</a>
+#### Style 02-02
 
+#### 风格 02-02
 
 <div class="s-rule do">
 
@@ -546,7 +496,7 @@ Naming conventions are hugely important to maintainability and readability. This
 
 
 
-**Do** use conventional type names including `.service`, `.component`, `.pipe`, `.module`, and `.directive`. 
+**Do** use conventional type names including `.service`, `.component`, `.pipe`, `.module`, and `.directive`.
 Invent additional type names if you must but take care not to create too many.
 
 **坚持**使用惯用的后缀来描述类型，包括`*.service`、`*.component`、`*.pipe`、`.module`、`.directive`。
@@ -612,14 +562,15 @@ Abbreviations such as `.srv`, `.svc`, and `.serv` can be confusing.
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 02-03}Symbols and file names
+{@a 02-03}
 
-### {@a 02-03}符号名与文件名
+### Symbols and file names
 
-#### <a href="#02-03">Style 02-03</a>
+### 符号名与文件名
 
-#### <a href="#02-03">风格 02-03</a>
+#### Style 02-03
 
+#### 风格 02-03
 
 <div class="s-rule do">
 
@@ -664,7 +615,7 @@ Abbreviations such as `.srv`, `.svc`, and `.serv` can be confusing.
 
 
 
-**Do** append the symbol name with the conventional suffix (such as `Component`, 
+**Do** append the symbol name with the conventional suffix (such as `Component`,
 `Directive`, `Module`, `Pipe`, or `Service`) for a thing of that type.
 
 **坚持**在符号名后面追加约定的类型后缀（例如`.component.ts`、`.directive.ts`、`.module.ts`、`.pipe.ts`、`.service.ts`）。
@@ -678,7 +629,7 @@ Abbreviations such as `.srv`, `.svc`, and `.serv` can be confusing.
 
 
 
-**Do** give the filename the conventional suffix (such as `.component.ts`, `.directive.ts`, 
+**Do** give the filename the conventional suffix (such as `.component.ts`, `.directive.ts`,
 `.module.ts`, `.pipe.ts`, or `.service.ts`) for a file of that type.
 
 **坚持**在文件名后面追加约定的类型后缀（例如`.component.ts`、`.directive.ts`、`.module.ts`、`.pipe.ts`、`.service.ts`）。
@@ -691,7 +642,7 @@ Abbreviations such as `.srv`, `.svc`, and `.serv` can be confusing.
 
 
 
-**Why?** Consistent conventions make it easy to quickly identify 
+**Why?** Consistent conventions make it easy to quickly identify
 and reference assets of different types.
 
 **为何？**遵循一致的约定可以快速识别和引用不同类型的资产。
@@ -743,7 +694,7 @@ and reference assets of different types.
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Component({ ... })
         export class AppComponent { }
       </code-example>
@@ -762,7 +713,7 @@ and reference assets of different types.
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Component({ ... })
         export class HeroesComponent { }
       </code-example>
@@ -781,7 +732,7 @@ and reference assets of different types.
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Component({ ... })
         export class HeroListComponent { }
       </code-example>
@@ -800,7 +751,7 @@ and reference assets of different types.
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Component({ ... })
         export class HeroDetailComponent { }
       </code-example>
@@ -819,7 +770,7 @@ and reference assets of different types.
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Directive({ ... })
         export class ValidationDirective { }
       </code-example>
@@ -838,7 +789,7 @@ and reference assets of different types.
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @NgModule({ ... })
         export class AppModule
       </code-example>
@@ -857,7 +808,7 @@ and reference assets of different types.
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Pipe({ name: 'initCaps' })
         export class InitCapsPipe implements PipeTransform { }
       </code-example>
@@ -876,7 +827,7 @@ and reference assets of different types.
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Injectable()
         export class UserProfileService { }
       </code-example>
@@ -897,14 +848,15 @@ and reference assets of different types.
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 02-04}Service names
+{@a 02-04}
 
-### {@a 02-04}服务名
+### Service names
 
-#### <a href="#02-04">Style 02-04</a>
+### 服务名
 
-#### <a href="#02-04">风格 02-04</a>
+#### Style 02-04
 
+#### 风格 02-04
 
 <div class="s-rule do">
 
@@ -923,17 +875,17 @@ and reference assets of different types.
 
 
 
-**Do** suffix a service class name with `Service`. 
-For example, something that gets data or heroes 
+**Do** suffix a service class name with `Service`.
+For example, something that gets data or heroes
 should be called a `DataService` or a `HeroService`.
 
 **坚持**为服务的类名加上`Service`后缀。
 例如，获取数据或英雄列表的服务应该命名为`DataService`或`HeroService`。
 
-A few terms are unambiguously services. They typically 
-indicate agency by ending in "-er". You may prefer to name 
-a service that logs messages `Logger` rather than `LoggerService`. 
-Decide if this exception is agreeable in your project. 
+A few terms are unambiguously services. They typically
+indicate agency by ending in "-er". You may prefer to name
+a service that logs messages `Logger` rather than `LoggerService`.
+Decide if this exception is agreeable in your project.
 As always, strive for consistency.
 
 有些词汇显然就是服务，比如那些以“-er”后缀结尾的。比如把记日志的服务命名为`Logger`就比`LoggerService`更好些。需要在你的项目中决定这种特例是否可以接受。
@@ -1025,7 +977,7 @@ As always, strive for consistency.
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Injectable()
         export class HeroDataService { }
       </code-example>
@@ -1044,7 +996,7 @@ As always, strive for consistency.
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Injectable()
         export class CreditService { }
       </code-example>
@@ -1063,7 +1015,7 @@ As always, strive for consistency.
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Injectable()
         export class Logger { }
       </code-example>
@@ -1084,14 +1036,15 @@ As always, strive for consistency.
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 02-05}Bootstrapping
+{@a 02-05}
 
-### {@a 02-05}引导
+### Bootstrapping
 
-#### <a href="#02-05">Style 02-05</a>
+### 引导
 
-#### <a href="#02-05">风格 02-05</a>
+#### Style 02-05
 
+#### 风格 02-05
 
 <div class="s-rule do">
 
@@ -1158,18 +1111,19 @@ As always, strive for consistency.
 
 
 
-<code-example path="style-guide/src/02-05/main.ts" title="main.ts">
+<code-example path="styleguide/src/02-05/main.ts" title="main.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 02-06}
 
-### {@a 02-06}Directive selectors
+### Directive selectors
 
 ### {@a 02-06}指令选择器
 
-#### <a href="#02-06">Style 02-06</a>
+#### Style 02-06
 
 #### <a href="#02-06">风格 02-06</a>
 
@@ -1213,12 +1167,13 @@ As always, strive for consistency.
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 02-07}
 
-### {@a 02-07}Custom prefix for components
+### Custom prefix for components
 
 ### {@a 02-07}为组件添加自定义前缀
 
-#### <a href="#02-07">Style 02-07</a>
+#### Style 02-07
 
 #### <a href="#02-07">风格 02-07</a>
 
@@ -1227,7 +1182,7 @@ As always, strive for consistency.
 
 
 
-**Do** use a hyphenated, lowercase element selector value (e.g. `admin-users`). 
+**Do** use a hyphenated, lowercase element selector value (e.g. `admin-users`).
 
 **坚持**使用带连字符的小写元素选择器值（例如`admin-users`）。
 
@@ -1240,7 +1195,7 @@ As always, strive for consistency.
 
 
 
-**Do** use a custom prefix for a component selector. 
+**Do** use a custom prefix for a component selector.
 For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the prefix `admin` represents an admin feature area.
 
 **坚持**为组件选择器添加自定义前缀。
@@ -1303,38 +1258,41 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
 
 
 
-<code-example path="style-guide/src/02-07/app/heroes/hero.component.avoid.ts" region="example" title="app/heroes/hero.component.ts">
+<code-example path="styleguide/src/02-07/app/heroes/hero.component.avoid.ts" region="example" title="app/heroes/hero.component.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/02-07/app/users/users.component.avoid.ts" region="example" title="app/users/users.component.ts">
+<code-example path="styleguide/src/02-07/app/users/users.component.avoid.ts" region="example" title="app/users/users.component.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/02-07/app/heroes/hero.component.ts" region="example" title="app/heroes/hero.component.ts">
+<code-example path="styleguide/src/02-07/app/heroes/hero.component.ts" region="example" title="app/heroes/hero.component.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/02-07/app/users/users.component.ts" region="example" title="app/users/users.component.ts">
+<code-example path="styleguide/src/02-07/app/users/users.component.ts" region="example" title="app/users/users.component.ts">
 
 </code-example>
 
 
 
-### {@a 02-08}Custom prefix for directives
 
-### {@a 02-08}为指令添加自定义前缀
 
-#### <a href="#02-08">Style 02-08</a>
+ {@a 02-08}
 
-#### <a href="#02-08">风格 02-08</a>
+### Custom prefix for directives
 
+### 为指令添加自定义前缀
+
+#### Style 02-08
+
+#### 风格 02-08
 
 <div class="s-rule do">
 
@@ -1388,27 +1346,28 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
 
 
 
-<code-example path="style-guide/src/02-08/app/shared/validate.directive.avoid.ts" region="example" title="app/shared/validate.directive.ts">
+<code-example path="styleguide/src/02-08/app/shared/validate.directive.avoid.ts" region="example" title="app/shared/validate.directive.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/02-08/app/shared/validate.directive.ts" region="example" title="app/shared/validate.directive.ts">
+<code-example path="styleguide/src/02-08/app/shared/validate.directive.ts" region="example" title="app/shared/validate.directive.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 02-09}Pipe names
+{@a 02-09}
 
-### {@a 02-09}管道名
+### Pipe names
 
-#### <a href="#02-09">Style 02-09</a>
+### 管道名
 
-#### <a href="#02-09">风格 02-09</a>
+#### Style 02-09
 
+#### 风格 02-09
 
 <div class="s-rule do">
 
@@ -1478,7 +1437,7 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Pipe({ name: 'ellipsis' })
         export class EllipsisPipe implements PipeTransform { }
       </code-example>
@@ -1497,7 +1456,7 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @Pipe({ name: 'initCaps' })
         export class InitCapsPipe implements PipeTransform { }
       </code-example>
@@ -1518,14 +1477,15 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 02-10}Unit test file names
+{@a 02-10}
 
-### {@a 02-10}单元测试文件名
+### Unit test file names
 
-#### <a href="#02-10">Style 02-10</a>
+### 单元测试文件名
 
-#### <a href="#02-10">风格 02-10</a>
+#### Style 02-10
 
+#### 风格 02-10
 
 <div class="s-rule do">
 
@@ -1594,27 +1554,17 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
   <tr>
 
     <th>
-
-      <p>
-        Symbol Name
-      </p>
-
-      <p>
-        符号名
-      </p>
-
+      Test Type
+      
+      测试类型
+      
     </th>
 
     <th>
-
-      <p>
-        File Name
-      </p>
-
-      <p>
-        文件名
-      </p>
-
+      File Names
+      
+      文件名
+      
     </th>
 
   </tr>
@@ -1689,14 +1639,15 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 02-11}_End-to-End_ (E2E) test file names
+{@a 02-11}
 
-### {@a 02-11}端到端测试文件名
+### _End-to-End_ (E2E) test file names
 
-#### <a href="#02-11">Style 02-11</a>
+### *端到端*（E2E）测试的文件名
 
-#### <a href="#02-11">风格 02-11</a>
+#### Style 02-11
 
+#### 风格 02-11
 
 <div class="s-rule do">
 
@@ -1754,27 +1705,17 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
   <tr>
 
     <th>
-
-      <p>
-        Symbol Name
-      </p>
-
-      <p>
-        符号名
-      </p>
-
+      Test Type
+      
+      测试类型
+      
     </th>
 
     <th>
-
-      <p>
-        File Name
-      </p>
-
-      <p>
-        文件名
-      </p>
-
+      File Names
+      
+      文件名
+      
     </th>
 
   </tr>
@@ -1804,12 +1745,13 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 02-12}
 
-### {@a 02-12}Angular _NgModule_ names
+### Angular _NgModule_ names
 
 ### {@a 02-12}Angular *NgModule* 命名
 
-#### <a href="#02-12">Style 02-12</a>
+#### Style 02-12
 
 #### <a href="#02-12">风格 02-12</a>
 
@@ -1959,7 +1901,7 @@ A consistent class and file name convention make these modules easy to spot and
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @NgModule({ ... })
         export class AppModule { }
       </code-example>
@@ -1978,7 +1920,7 @@ A consistent class and file name convention make these modules easy to spot and
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @NgModule({ ... })
         export class HeroesModule { }
       </code-example>
@@ -1997,7 +1939,7 @@ A consistent class and file name convention make these modules easy to spot and
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @NgModule({ ... })
         export class VillainsModule { }
       </code-example>
@@ -2016,7 +1958,7 @@ A consistent class and file name convention make these modules easy to spot and
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @NgModule({ ... })
         export class AppRoutingModule { }
       </code-example>
@@ -2035,7 +1977,7 @@ A consistent class and file name convention make these modules easy to spot and
 
     <td>
 
-      <code-example>
+      <code-example hideCopy class="no-box">
         @NgModule({ ... })
         export class HeroesRoutingModule { }
       </code-example>
@@ -2046,7 +1988,6 @@ A consistent class and file name convention make these modules easy to spot and
 
 
       heroes-routing.module.ts        
-
     </td>
 
   </tr>
@@ -2065,14 +2006,15 @@ Have a consistent set of coding, naming, and whitespace conventions.
 坚持一致的编程、命名和空格的约定。
 
 
+{@a 03-01}
 
-### {@a 03-01}Class
+### Classes
 
-### {@a 03-01}类
-#### <a href="#03-01">Style 03-01</a>
+### 类
 
-#### <a href="#03-01">风格 03-01</a>
+#### Style 03-01
 
+#### 风格 03-01
 
 <div class="s-rule do">
 
@@ -2104,7 +2046,7 @@ Have a consistent set of coding, naming, and whitespace conventions.
 
 
 
-**Why?** Classes can be instantiated and construct an instance. 
+**Why?** Classes can be instantiated and construct an instance.
 By convention, upper camel case indicates a constructable asset.
 
 **为何？**类可以被实例化和构造实例。根据约定，用大写驼峰命名法来标识可构造的东西。
@@ -2114,27 +2056,28 @@ By convention, upper camel case indicates a constructable asset.
 
 
 
-<code-example path="style-guide/src/03-01/app/core/exception.service.avoid.ts" region="example" title="app/shared/exception.service.ts">
+<code-example path="styleguide/src/03-01/app/core/exception.service.avoid.ts" region="example" title="app/shared/exception.service.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/03-01/app/core/exception.service.ts" region="example" title="app/shared/exception.service.ts">
+<code-example path="styleguide/src/03-01/app/core/exception.service.ts" region="example" title="app/shared/exception.service.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 03-02}Constants
+{@a 03-02}
 
-### {@a 03-02}常量
+### Constants
 
-#### <a href="#03-02">Style 03-02</a>
+### 常量
 
-#### <a href="#03-02">风格 03-02</a>
+#### Style 03-02
 
+#### 风格 03-02
 
 <div class="s-rule do">
 
@@ -2209,7 +2152,7 @@ than the traditional UPPER_SNAKE_CASE names (`HERO_ROUTES`).
 
 **Why?** The tradition of naming constants in UPPER_SNAKE_CASE reflects
 an era before the modern IDEs that quickly reveal the `const` declaration.
-TypeScript prevents accidental reassignment. 
+TypeScript prevents accidental reassignment.
 
 **为何？** 把常量命名为大写蛇形命名法的传统源于现代 IDE 出现之前，
 以便阅读时可以快速发现那些`const`定义。
@@ -2249,21 +2192,22 @@ It is rarely worth the effort to change them at the risk of breaking existing co
 
 
 
-<code-example path="style-guide/src/03-02/app/core/data.service.ts" title="app/shared/data.service.ts">
+<code-example path="styleguide/src/03-02/app/core/data.service.ts" title="app/shared/data.service.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 03-03}Interfaces
+{@a 03-03}
 
-### {@a 03-03}接口
+### Interfaces
 
-#### <a href="#03-03">Style 03-03</a>
+### 接口
 
-#### <a href="#03-03">风格 03-03</a>
+#### Style 03-03
 
+#### 风格 03-03
 
 <div class="s-rule do">
 
@@ -2295,7 +2239,7 @@ It is rarely worth the effort to change them at the risk of breaking existing co
 
 
 
-**Consider** using a class instead of an interface. 
+**Consider** using a class instead of an interface.
 
 **考虑**用类代替接口。
 
@@ -2308,7 +2252,7 @@ It is rarely worth the effort to change them at the risk of breaking existing co
 
 
 
-**Why?** <a href="https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines" target="_blank">TypeScript guidelines</a> 
+**Why?** <a href="https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines">TypeScript guidelines</a>
 discourage the `I` prefix.
 
 **为何？**<a href="https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines" target="_blank">TypeScript 指导原则</a>不建议使用 “I” 前缀。
@@ -2357,24 +2301,25 @@ discourage the `I` prefix.
 
 
 
-<code-example path="style-guide/src/03-03/app/core/hero-collector.service.avoid.ts" region="example" title="app/shared/hero-collector.service.ts">
+<code-example path="styleguide/src/03-03/app/core/hero-collector.service.avoid.ts" region="example" title="app/shared/hero-collector.service.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/03-03/app/core/hero-collector.service.ts" region="example" title="app/shared/hero-collector.service.ts">
+<code-example path="styleguide/src/03-03/app/core/hero-collector.service.ts" region="example" title="app/shared/hero-collector.service.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 03-04}
 
-### {@a 03-04}Properties and methods
+### Properties and methods
 
 ### {@a 03-04}属性和方法
 
-#### <a href="#03-04">Style 03-04</a>
+#### Style 03-04
 
 #### <a href="#03-04">样式 03-04</a>
 
@@ -2444,24 +2389,25 @@ discourage the `I` prefix.
 
 
 
-<code-example path="style-guide/src/03-04/app/core/toast.service.avoid.ts" region="example" title="app/shared/toast.service.ts">
+<code-example path="styleguide/src/03-04/app/core/toast.service.avoid.ts" region="example" title="app/shared/toast.service.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/03-04/app/core/toast.service.ts" region="example" title="app/shared/toast.service.ts">
+<code-example path="styleguide/src/03-04/app/core/toast.service.ts" region="example" title="app/shared/toast.service.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 03-06}
 
-### {@a 03-06}Import line spacing
+### Import line spacing
 
 ### {@a 03-06}导入语句中的空行
 
-#### <a href="#03-06">Style 03-06</a>
+#### Style 03-06
 
 #### <a href="#03-06">风格 03-06</a>
 
@@ -2531,20 +2477,20 @@ discourage the `I` prefix.
 
 
 
-<code-example path="style-guide/src/03-06/app/heroes/shared/hero.service.avoid.ts" region="example" title="app/heroes/shared/hero.service.ts">
+<code-example path="styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts" region="example" title="app/heroes/shared/hero.service.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/03-06/app/heroes/shared/hero.service.ts" region="example" title="app/heroes/shared/hero.service.ts">
+<code-example path="styleguide/src/03-06/app/heroes/shared/hero.service.ts" region="example" title="app/heroes/shared/hero.service.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-## Application structure and Angular modules
+## Application structure and NgModules
 
 ## 应用程序结构与 Angular 模块
 
@@ -2553,14 +2499,14 @@ Have a near-term view of implementation and a long-term vision. Start small but
 准备一个近期实施方案和一个长期的愿景。从零开始，但要考虑应用程序接下来的路往哪儿走。
 
 All of the app's code goes in a folder named `src`.
-All feature areas are in their own folder, with their own Angular module. 
+All feature areas are in their own folder, with their own NgModule.
 
 所有应用程序的源代码都放到名叫`src`的目录里。
 所有特性区都在自己的文件夹中，带有它们自己的 Angular 模块。
 
 All content is one asset per file. Each component, service, and pipe is in its own file.
-All third party vendor scripts are stored in another folder and not in the `src` folder. 
-You didn't write them and you don't want them cluttering `src`. 
+All third party vendor scripts are stored in another folder and not in the `src` folder.
+You didn't write them and you don't want them cluttering `src`.
 Use the naming conventions for files in this guide.
 
 所有内容都遵循每个文件一个特性的原则。每个组件、服务和管道都在自己的文件里。
@@ -2569,10 +2515,11 @@ Use the naming conventions for files in this guide.
 使用本指南介绍的文件命名约定。
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 04-01}
 
-### {@a 04-01}_LIFT_
+### _LIFT_
 
-#### <a href="#04-01">Style 04-01</a>
+#### Style 04-01
 
 #### <a href="#04-01">风格 04-01</a>
 
@@ -2581,9 +2528,9 @@ Use the naming conventions for files in this guide.
 
 
 
-**Do** structure the app such that you can **L**ocate code quickly, 
-**I**dentify the code at a glance, 
-keep the **F**lattest structure you can, and 
+**Do** structure the app such that you can **L**ocate code quickly,
+**I**dentify the code at a glance,
+keep the **F**lattest structure you can, and
 **T**ry to be DRY.
 
 **坚持**组织应用的结构，达到这些目的：快速定位 (`L`ocate) 代码、一眼识别 (`I`dentify) 代码、 尽量保持扁平结构 (`F`lattest) 和尝试 (`T`ry) 遵循DRY (Do Not Repeat Yourself, 不重复自己) 原则。
@@ -2610,8 +2557,8 @@ keep the **F**lattest structure you can, and
 
 
 
-**Why?** LIFT Provides a consistent structure that scales well, is modular, and makes it easier to increase developer efficiency by finding code quickly. 
-To confirm your intuition about a particular structure, ask: 
+**Why?** LIFT Provides a consistent structure that scales well, is modular, and makes it easier to increase developer efficiency by finding code quickly.
+To confirm your intuition about a particular structure, ask:
 _can I quickly open and start work in all of the related files for this feature_?
 
 **为何？**LIFT提供了一致的结构，它具有扩展性强、模块化的特性。因为容易快速锁定代码，提高了开发者的效率。
@@ -2622,12 +2569,13 @@ _can I quickly open and start work in all of the related files for this feature_
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 04-02}
 
-### {@a 04-02}Locate
+### Locate
 
 ### {@a 04-02}定位
 
-#### <a href="#04-02">Style 04-02</a>
+#### Style 04-02
 
 #### <a href="#04-02"> 风格04-02</a>
 
@@ -2649,9 +2597,9 @@ _can I quickly open and start work in all of the related files for this feature_
 
 
 
-**Why?** To work efficiently you must be able to find files quickly, 
-especially when you do not know (or do not remember) the file _names_. 
-Keeping related files near each other in an intuitive location saves time. 
+**Why?** To work efficiently you must be able to find files quickly,
+especially when you do not know (or do not remember) the file _names_.
+Keeping related files near each other in an intuitive location saves time.
 A descriptive folder structure makes a world of difference to you and the people who come after you.
 
 **为何？**
@@ -2664,12 +2612,13 @@ A descriptive folder structure makes a world of difference to you and the people
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 04-03}
 
-### {@a 04-03}Identify
+### Identify
 
 ### {@a 04-03}识别
 
-#### <a href="#04-03">Style 04-03</a>
+#### Style 04-03
 
 #### <a href="#04-03">风格 04-03</a>
 
@@ -2717,7 +2666,7 @@ A descriptive folder structure makes a world of difference to you and the people
 
 
 
-**Why?** Spend less time hunting and pecking for code, and become more efficient. 
+**Why?** Spend less time hunting and pecking for code, and become more efficient.
 Longer file names are far better than _short-but-obscure_ abbreviated names.
 
 **为何？**花费更少的时间来查找和琢磨代码，就会变得更有效率。
@@ -2732,7 +2681,7 @@ Longer file names are far better than _short-but-obscure_ abbreviated names.
 
 
 
-It may be advantageous to deviate from the _one-thing-per-file_ rule when 
+It may be advantageous to deviate from the _one-thing-per-file_ rule when
 you have a set of small, closely-related features that are better discovered and understood
 in a single file than as multiple files. Be wary of this loophole.
 
@@ -2745,14 +2694,15 @@ in a single file than as multiple files. Be wary of this loophole.
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 04-04}Flat
+{@a 04-04}
 
-### {@a 04-04}扁平
+### Flat
 
-#### <a href="#04-04">Style 04-04</a>
+### 扁平
 
-#### <a href="#04-04">风格 04-04</a>
+#### Style 04-04
 
+#### 风格 04-04
 
 <div class="s-rule do">
 
@@ -2797,15 +2747,15 @@ in a single file than as multiple files. Be wary of this loophole.
 
 
 
-**Why?** No one wants to search for a file through seven levels of folders. 
+**Why?** No one wants to search for a file through seven levels of folders.
 A flat structure is easy to scan.
 
 **为何？**没人想要在超过七层的目录中查找文件。扁平的结构有利于搜索。
 
 On the other hand,
-<a href="https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two" target="_blank">psychologists believe</a>
+<a href="https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two">psychologists believe</a>
 that humans start to struggle when the number of adjacent interesting things exceeds nine.
-So when a folder has ten or more files, it may be time to create subfolders. 
+So when a folder has ten or more files, it may be time to create subfolders.
 
 另一方面，<a href="https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two" target="_blank">心理学家们相信</a>，
 当关注的事物超过 9 个时，人类就会开始感到吃力。
@@ -2823,13 +2773,15 @@ Use a flatter structure until there is an obvious value to creating a new folder
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 04-05}_T-DRY_ (Try to be _DRY_)
+{@a 04-05}
 
-### {@a 04-05}T-DRY （尝试不重复自己）
-#### <a href="#04-05">Style 04-05</a>
+### _T-DRY_ (Try to be _DRY_)
 
-#### <a href="#04-05">风格 04-05</a>
+### *T-DRY*（尽量不重复自己）
 
+#### Style 04-05
+
+#### 风格 04-05
 
 <div class="s-rule do">
 
@@ -2862,9 +2814,9 @@ Use a flatter structure until there is an obvious value to creating a new folder
 
 
 **Why?** Being DRY is important, but not crucial if it sacrifices the other elements of LIFT.
-That's why it's called _T-DRY_. 
-For example, it's redundant to name a template `hero-view.component.html` because 
-with the `.html` extension, it is obviously a view. 
+That's why it's called _T-DRY_.
+For example, it's redundant to name a template `hero-view.component.html` because
+with the `.html` extension, it is obviously a view.
 But if something is not obvious or departs from a convention, then spell it out.
 
 **为何？**虽然 DRY 很重要，但如果要以牺牲 LIFT 的其它原则为代价，那就不值得了。
@@ -2878,14 +2830,15 @@ But if something is not obvious or departs from a convention, then spell it out.
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 04-06}Overall structural guidelines
+{@a 04-06}
 
-### {@a 04-06}总体结构指导原则
+### Overall structural guidelines
 
-#### <a href="#04-06">Style 04-06</a>
+### 总体结构的指导原则
 
-#### <a href="#04-06">风格 04-06</a>
+#### Style 04-06
 
+#### 风格 04-06
 
 <div class="s-rule do">
 
@@ -3203,9 +3156,9 @@ Here is a compliant folder and file structure:
 
 
 
-While components in dedicated folders are widely preferred, 
-another option for small apps is to keep components flat (not in a dedicated folder). 
-This adds up to four files to the existing folder, but also reduces the folder nesting. 
+While components in dedicated folders are widely preferred,
+another option for small apps is to keep components flat (not in a dedicated folder).
+This adds up to four files to the existing folder, but also reduces the folder nesting.
 Whatever you choose, be consistent.
 
 把组件放在专用目录中的方式广受欢迎，对于小型应用，还可以保持组件扁平化（而不是放在专用目录中）。
@@ -3216,12 +3169,13 @@ Whatever you choose, be consistent.
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 04-07}
 
-### {@a 04-07}_Folders-by-feature_ structure
+### _Folders-by-feature_ structure
 
 ### {@a 04-07}按特性组织的目录结构
 
-#### <a href="#04-07">Style 04-07</a>
+#### Style 04-07
 
 #### <a href="#04-07">风格 04-07</a>
 
@@ -3243,7 +3197,7 @@ Whatever you choose, be consistent.
 
 
 
-**Why?** A developer can locate the code and identify what each file represents 
+**Why?** A developer can locate the code and identify what each file represents
 at a glance. The structure is as flat as it can be and there are no repetitive or redundant names.
 
 **为何？**开发人员可以快速定位代码，扫一眼就能知道每个文件代表什么，目录尽可能保持扁平，既没有重复也没有多余的名字。
@@ -3270,7 +3224,7 @@ at a glance. The structure is as flat as it can be and there are no repetitive o
 
 
 
-**Why?** Helps reduce the app from becoming cluttered through organizing the 
+**Why?** Helps reduce the app from becoming cluttered through organizing the
 content and keeping them aligned with the LIFT guidelines.
 
 **为何？**遵循 LIFT 原则精心组织内容，避免应用变得杂乱无章。
@@ -3284,8 +3238,8 @@ content and keeping them aligned with the LIFT guidelines.
 
 
 
-**Why?** When there are a lot of files, for example 10+, 
-locating them is easier with a consistent folder structure 
+**Why?** When there are a lot of files, for example 10+,
+locating them is easier with a consistent folder structure
 and more difficult in a flat structure.
 
 **为何？**当有很多文件时（例如 10 个以上），在专用目录型结构中定位它们会比在扁平结构中更容易。
@@ -3299,7 +3253,7 @@ and more difficult in a flat structure.
 
 
 
-**Do** create an Angular module for each feature area.
+**Do** create an NgModule for each feature area.
 
 **坚持**为每个特性区创建一个 Angular 模块。
 
@@ -3312,7 +3266,7 @@ and more difficult in a flat structure.
 
 
 
-**Why?** Angular modules make it easy to lazy load routable features.
+**Why?** NgModules make it easy to lazy load routable features.
 
 **为何？** Angular 模块使惰性加载可路由的特性变得更容易。
 
@@ -3325,7 +3279,7 @@ and more difficult in a flat structure.
 
 
 
-**Why?** Angular modules make it easier to isolate, test, and re-use features.
+**Why?** NgModules make it easier to isolate, test, and re-use features.
 
 **为何？**Angular 模块隔离、测试和复用特性更容易。
 
@@ -3341,20 +3295,21 @@ and more difficult in a flat structure.
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 04-08}App _root module_
+{@a 04-08}
 
-### {@a 04-08}应用的根模块
+### App _root module_
 
-#### <a href="#04-08">Style 04-08</a>
+### 应用的*根模块*
 
-#### <a href="#04-08">风格 04-08</a>
+#### Style 04-08
 
+#### 风格 04-08
 
 <div class="s-rule do">
 
 
 
-**Do** create an Angular module in the app's root folder,
+**Do** create an NgModule in the app's root folder,
 for example, in `/src/app`.
 
 **坚持**在应用的根目录创建一个 Angular 模块（例如`/src/app`）。
@@ -3368,7 +3323,7 @@ for example, in `/src/app`.
 
 
 
-**Why?** Every app requires at least one root Angular module.
+**Why?** Every app requires at least one root NgModule.
 
 **为何？**每个应用都至少需要一个根 Angular 模块。
 
@@ -3403,18 +3358,22 @@ for example, in `/src/app`.
 
 
 
-<code-example path="style-guide/src/04-08/app/app.module.ts" region="example" title="app/app.module.ts">
+<code-example path="styleguide/src/04-08/app/app.module.ts" region="example" title="app/app.module.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 04-09}Feature modules
+{@a 04-09}
 
-### {@a 04-09}特性模块
+### Feature modules
 
-#### <a href="#04-09">Style 04-09</a>
+### 特性模块
+
+#### Style 04-09
+
+#### 风格 04-09
 
 #### <a href="#04-09">风格 04-09</a>
 
@@ -3422,7 +3381,7 @@ for example, in `/src/app`.
 
 
 
-**Do** create an Angular module for all distinct features in an application; 
+**Do** create an NgModule for all distinct features in an application;
 for example, a `Heroes` feature.
 
 **坚持**为应用中每个明显的特性创建一个 Angular 模块。
@@ -3450,7 +3409,7 @@ for example, in `app/heroes`.
 
 
 
-**Do** name the feature module file reflecting the name of the feature area 
+**Do** name the feature module file reflecting the name of the feature area
 and folder; for example, `app/heroes/heroes.module.ts`.
 
 **坚持**特性模块的文件名应该能反映出特性区的名字和目录（例如`app/heroes/heroes.module.ts`）。
@@ -3464,7 +3423,7 @@ and folder; for example, `app/heroes/heroes.module.ts`.
 
 
 
-**Do** name the feature module symbol reflecting the name of the feature 
+**Do** name the feature module symbol reflecting the name of the feature
 area, folder, and file; for example, `app/heroes/heroes.module.ts` defines `HeroesModule`.
 
 **坚持**特性模块的符号名应该能反映出特性区、目录和文件名（例如在`app/heroes/heroes.module.ts`中定义`HeroesModule`）。
@@ -3491,7 +3450,7 @@ area, folder, and file; for example, `app/heroes/heroes.module.ts` defines `Hero
 
 
 
-**Why?** A feature module identifies distinct sets of related components that comprise the feature area. 
+**Why?** A feature module identifies distinct sets of related components that comprise the feature area.
 
 **为何？**特性模块标记出组成该特性分区的相关组件集合。
 
@@ -3504,7 +3463,7 @@ area, folder, and file; for example, `app/heroes/heroes.module.ts` defines `Hero
 
 
 
-**Why?** A feature module can easily be routed to both eagerly and lazily. 
+**Why?** A feature module can easily be routed to both eagerly and lazily.
 
 **为何？**方便路由到特性模块 —— 无论是用主动加载还是惰性加载的方式。
 
@@ -3517,7 +3476,7 @@ area, folder, and file; for example, `app/heroes/heroes.module.ts` defines `Hero
 
 
 
-**Why?** A feature module defines clear boundaries between specific functionality and other application features. 
+**Why?** A feature module defines clear boundaries between specific functionality and other application features.
 
 **为何？**特性模块在特定的功能和其它应用特性之间定义了清晰的边界。
 
@@ -3552,12 +3511,13 @@ area, folder, and file; for example, `app/heroes/heroes.module.ts` defines `Hero
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 04-10}
 
-### {@a 04-10}Shared feature module
+### Shared feature module
 
 ### {@a 04-10}共享特性模块
 
-#### <a href="#04-10">Style 04-10</a>
+#### Style 04-10
 
 #### <a href="#04-10">风格 04-10</a>
 
@@ -3566,7 +3526,7 @@ area, folder, and file; for example, `app/heroes/heroes.module.ts` defines `Hero
 
 
 
-**Do** create a feature module named `SharedModule` in a `shared` folder; 
+**Do** create a feature module named `SharedModule` in a `shared` folder;
 for example, `app/shared/shared.module.ts` defines `SharedModule`.
 
 **坚持**在`shared`目录中创建名叫`SharedModule`的特性模块（例如在`app/shared/shared.module.ts`中定义`SharedModule`）。
@@ -3580,7 +3540,7 @@ for example, `app/shared/shared.module.ts` defines `SharedModule`.
 
 
 
-**Do** declare components, directives, and pipes in a shared module when those 
+**Do** declare components, directives, and pipes in a shared module when those
 items will be re-used and referenced by the components declared in other feature modules.
 
 **坚持**在共享模块中声明那些可能被特性模块引用的可复用组件、指令和管道。
@@ -3594,7 +3554,7 @@ items will be re-used and referenced by the components declared in other feature
 
 
 
-**Consider** using the name SharedModule when the contents of a shared 
+**Consider** using the name SharedModule when the contents of a shared
 module are referenced across the entire application.
 
 **考虑**把可能在整个应用中到处引用的模块命名为SharedModule
@@ -3608,8 +3568,8 @@ module are referenced across the entire application.
 
 
 
-**Avoid** providing services in shared modules. Services are usually 
-singletons that are provided once for the entire application or 
+**Avoid** providing services in shared modules. Services are usually
+singletons that are provided once for the entire application or
 in a particular feature module.
 
 **避免** 在共享模块中提供服务。服务通常是单例的，应该在整个应用或一个特定的特性模块中只有一份。
@@ -3637,8 +3597,8 @@ for example, `CommonModule` and `FormsModule`.
 
 
 
-**Why?** `SharedModule` will contain components, directives and pipes 
-that may need features from another common module; for example, 
+**Why?** `SharedModule` will contain components, directives and pipes
+that may need features from another common module; for example,
 `ngFor` in `CommonModule`.
 
 **为何？** `SharedModule`中包含的组件、指令和管道可能需要来自其它公共模块的特性（例如来自`CommonModule`中的`ngFor`指令）。
@@ -3665,7 +3625,7 @@ that may need features from another common module; for example,
 
 
 
-**Do** export all symbols from the `SharedModule` that other feature modules need to use.  
+**Do** export all symbols from the `SharedModule` that other feature modules need to use.
 
 **坚持**从`SharedModule`中导出其它特性模块所需的全部符号。
 
@@ -3704,7 +3664,7 @@ that may need features from another common module; for example,
 
 
 
-**Why?** A lazy loaded feature module that imports that shared module will make its own copy of the service and likely have undesireable results.
+**Why?** A lazy loaded feature module that imports that shared module will make its own copy of the service and likely have undesirable results.
 
 **为何？**惰性加载的特性模块如果导入了这个共享模块，会创建一份自己的服务副本，这可能会导致意料之外的后果。
 
@@ -3717,7 +3677,7 @@ that may need features from another common module; for example,
 
 
 
-**Why?** You don't want each module to have its own separate instance of singleton services. 
+**Why?** You don't want each module to have its own separate instance of singleton services.
 Yet there is a real danger of that happening if the `SharedModule` provides a service.
 
 **为何？**对于单例服务，你不希望每个模块都有自己的实例。
@@ -3800,27 +3760,27 @@ Yet there is a real danger of that happening if the `SharedModule` provides a se
 
 <code-tabs>
 
-  <code-pane title="app/shared/shared.module.ts" path="style-guide/src/04-10/app/shared/shared.module.ts">
+  <code-pane title="app/shared/shared.module.ts" path="styleguide/src/04-10/app/shared/shared.module.ts">
 
   </code-pane>
 
-  <code-pane title="app/shared/init-caps.pipe.ts" path="style-guide/src/04-10/app/shared/init-caps.pipe.ts">
+  <code-pane title="app/shared/init-caps.pipe.ts" path="styleguide/src/04-10/app/shared/init-caps.pipe.ts">
 
   </code-pane>
 
-  <code-pane title="app/shared/filter-text/filter-text.component.ts" path="style-guide/src/04-10/app/shared/filter-text/filter-text.component.ts">
+  <code-pane title="app/shared/filter-text/filter-text.component.ts" path="styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts">
 
   </code-pane>
 
-  <code-pane title="app/shared/filter-text/filter-text.service.ts" path="style-guide/src/04-10/app/shared/filter-text/filter-text.service.ts">
+  <code-pane title="app/shared/filter-text/filter-text.service.ts" path="styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts">
 
   </code-pane>
 
-  <code-pane title="app/heroes/heroes.component.ts" path="style-guide/src/04-10/app/heroes/heroes.component.ts">
+  <code-pane title="app/heroes/heroes.component.ts" path="styleguide/src/04-10/app/heroes/heroes.component.ts">
 
   </code-pane>
 
-  <code-pane title="app/heroes/heroes.component.html" path="style-guide/src/04-10/app/heroes/heroes.component.html">
+  <code-pane title="app/heroes/heroes.component.html" path="styleguide/src/04-10/app/heroes/heroes.component.html">
 
   </code-pane>
 
@@ -3828,12 +3788,13 @@ Yet there is a real danger of that happening if the `SharedModule` provides a se
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 04-11}
 
-### {@a 04-11}Core feature module
+### Core feature module
 
 ### {@a 04-11}核心特性模块
 
-#### <a href="#04-11">Style 04-11</a>
+#### Style 04-11
 
 #### <a href="#04-11">风格04-11</a>
 
@@ -3857,7 +3818,7 @@ to simplify the apparent structure of a feature module.
 
 
 **Consider** calling the application-wide core module, `CoreModule`.
-Importing `CoreModule` into the root `AppModule` reduces its complexity 
+Importing `CoreModule` into the root `AppModule` reduces its complexity
 and emphasizes its role as orchestrator of the application as a whole.
 
 **坚持**把那些“只用一次”的类收集到`CoreModule`中，并对外隐藏它们的实现细节。简化的`AppModule`会导入`CoreModule`，并且把它作为整个应用的总指挥。
@@ -3951,8 +3912,8 @@ Import it once (in the `AppModule`) when the app starts and never import it anyw
 
 
 
-**Why?** Real world apps can have several single-use components (e.g., spinners, message toasts, and modal dialogs) that appear only in the `AppComponent` template. 
-They are not imported elsewhere so they're not shared in that sense. 
+**Why?** Real world apps can have several single-use components (e.g., spinners, message toasts, and modal dialogs) that appear only in the `AppComponent` template.
+They are not imported elsewhere so they're not shared in that sense.
 Yet they're too big and messy to leave loose in the root folder.
 
 **为何？**真实世界中的应用会有很多只用一次的组件（例如加载动画、消息浮层、模态框等），它们只会在`AppComponent`的模板中出现。
@@ -3981,7 +3942,7 @@ Yet they're too big and messy to leave loose in the root folder.
 
 
 
-**Why?** A lazily loaded feature module that directly imports the `CoreModule` will make its own copy of services and likely have undesireable results.
+**Why?** A lazily loaded feature module that directly imports the `CoreModule` will make its own copy of services and likely have undesirable results.
 
 **为何？**如果惰性加载的特性模块直接导入`CoreModule`，就会创建它自己的服务副本，并导致意料之外的后果。
 
@@ -3994,7 +3955,7 @@ Yet they're too big and messy to leave loose in the root folder.
 
 
 
-**Why?** An eagerly loaded feature module already has access to the `AppModule`'s injector, and thus the `CoreModule`'s services. 
+**Why?** An eagerly loaded feature module already has access to the `AppModule`'s injector, and thus the `CoreModule`'s services.
 
 **为何？**主动加载的特性模块已经准备好了访问`AppModule`的注入器，因此也能取得`CoreModule`中的服务。
 
@@ -4007,7 +3968,7 @@ Yet they're too big and messy to leave loose in the root folder.
 
 
 
-**Do** export all symbols from the `CoreModule` that the `AppModule` will import and make available for other feature modules to use.  
+**Do** export all symbols from the `CoreModule` that the `AppModule` will import and make available for other feature modules to use.
 
 **坚持**从`CoreModule`中导出`AppModule`需导入的所有符号，使它们在所有特性模块中可用。
 
@@ -4034,7 +3995,7 @@ Yet they're too big and messy to leave loose in the root folder.
 
 
 **Why?** You want the entire app to use the one, singleton instance.
-You don't want each module to have its own separate instance of singleton services. 
+You don't want each module to have its own separate instance of singleton services.
 Yet there is a real danger of that happening accidentally if the `CoreModule` provides a service.
 
 **为何？**你希望整个应用都使用这个单例服务。
@@ -4138,35 +4099,35 @@ Yet there is a real danger of that happening accidentally if the `CoreModule` pr
 
 <code-tabs>
 
-  <code-pane title="app/app.module.ts" path="style-guide/src/04-11/app/app.module.ts" region="example">
+  <code-pane title="app/app.module.ts" path="styleguide/src/04-11/app/app.module.ts" region="example">
 
   </code-pane>
 
-  <code-pane title="app/core/core.module.ts" path="style-guide/src/04-11/app/core/core.module.ts">
+  <code-pane title="app/core/core.module.ts" path="styleguide/src/04-11/app/core/core.module.ts">
 
   </code-pane>
 
-  <code-pane title="app/core/logger.service.ts" path="style-guide/src/04-11/app/core/logger.service.ts">
+  <code-pane title="app/core/logger.service.ts" path="styleguide/src/04-11/app/core/logger.service.ts">
 
   </code-pane>
 
-  <code-pane title="app/core/nav/nav.component.ts" path="style-guide/src/04-11/app/core/nav/nav.component.ts">
+  <code-pane title="app/core/nav/nav.component.ts" path="styleguide/src/04-11/app/core/nav/nav.component.ts">
 
   </code-pane>
 
-  <code-pane title="app/core/nav/nav.component.html" path="style-guide/src/04-11/app/core/nav/nav.component.html">
+  <code-pane title="app/core/nav/nav.component.html" path="styleguide/src/04-11/app/core/nav/nav.component.html">
 
   </code-pane>
 
-  <code-pane title="app/core/spinner/spinner.component.ts" path="style-guide/src/04-11/app/core/spinner/spinner.component.ts">
+  <code-pane title="app/core/spinner/spinner.component.ts" path="styleguide/src/04-11/app/core/spinner/spinner.component.ts">
 
   </code-pane>
 
-  <code-pane title="app/core/spinner/spinner.component.html" path="style-guide/src/04-11/app/core/spinner/spinner.component.html">
+  <code-pane title="app/core/spinner/spinner.component.html" path="styleguide/src/04-11/app/core/spinner/spinner.component.html">
 
   </code-pane>
 
-  <code-pane title="app/core/spinner/spinner.service.ts" path="style-guide/src/04-11/app/core/spinner/spinner.service.ts">
+  <code-pane title="app/core/spinner/spinner.service.ts" path="styleguide/src/04-11/app/core/spinner/spinner.service.ts">
 
   </code-pane>
 
@@ -4178,9 +4139,9 @@ Yet there is a real danger of that happening accidentally if the `CoreModule` pr
 
 
 
-`AppModule` is a little smaller because many app/root classes have moved to other modules. 
-`AppModule` is stable because you will add future components and providers to other modules, not this one. 
-`AppModule` delegates to imported modules rather than doing work. 
+`AppModule` is a little smaller because many app/root classes have moved to other modules.
+`AppModule` is stable because you will add future components and providers to other modules, not this one.
+`AppModule` delegates to imported modules rather than doing work.
 `AppModule` is focused on its main task, orchestrating the app as a whole.
 
 `AppModule`变得更小了，因为很多应用根部的类都被移到了其它模块中。
@@ -4193,16 +4154,17 @@ Yet there is a real danger of that happening accidentally if the `CoreModule` pr
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 04-12}
 
-### {@a 04-12}Prevent re-import of the core module
+### Prevent re-import of the core module
 
 ### {@a 04-12}防止多次导入`CoreModule`
 
-#### <a href="#04-12">Style 04-12</a>
+#### Style 04-12
 
 #### <a href="#04-12">风格 04-12</a>  
 
-Only the root `AppModule` should import the `CoreModule`. 
+Only the root `AppModule` should import the `CoreModule`.
 
 应该只有`AppModule`才允许导入`CoreModule`。
 
@@ -4248,11 +4210,11 @@ Only the root `AppModule` should import the `CoreModule`.
 
 <code-tabs>
 
-  <code-pane title="app/core/module-import-guard.ts" path="style-guide/src/04-12/app/core/module-import-guard.ts">
+  <code-pane title="app/core/module-import-guard.ts" path="styleguide/src/04-12/app/core/module-import-guard.ts">
 
   </code-pane>
 
-  <code-pane title="app/core/core.module.ts" path="style-guide/src/04-12/app/core/core.module.ts">
+  <code-pane title="app/core/core.module.ts" path="styleguide/src/04-12/app/core/core.module.ts">
 
   </code-pane>
 
@@ -4260,12 +4222,13 @@ Only the root `AppModule` should import the `CoreModule`.
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 04-13}
 
-### {@a 04-13}Lazy Loaded folders
+### Lazy Loaded folders
 
 ### {@a 04-13}惰性加载的目录
 
-#### <a href="#04-13">Style 04-13</a>
+#### Style 04-13
 
 #### <a href="#04-13">样式 04-13</a>
 
@@ -4302,12 +4265,13 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 04-14}
 
-### {@a 04-14}Never directly import lazy loaded folders
+### Never directly import lazy loaded folders
 
 ### {@a 04-14}永远不要直接导入惰性加载的目录
 
-#### <a href="#04-14">Style 04-14</a>
+#### Style 04-14
 
 #### <a href="#04-14">样式 04-14</a>
 
@@ -4343,13 +4307,15 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
 
 ## 组件
 
-### {@a 05-02}Component selector nams
+{@a 05-02}
 
-### {@a 05-02}组件选择器命名
+### Component selector names
 
-#### <a href="#05-02">Style 05-02</a>
+### 组件选择器命名
 
-#### <a href="#05-02">风格05-02</a>
+#### Style 05-02
+
+#### 风格05-02
 
 
 <div class="s-rule do">
@@ -4378,7 +4344,7 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
 
 
 
-<code-example path="style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
+<code-example path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
 
 </code-example>
 
@@ -4386,11 +4352,11 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
 
 <code-tabs>
 
-  <code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
+  <code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
 
   </code-pane>
 
-  <code-pane title="app/app.component.html" path="style-guide/src/05-02/app/app.component.html">
+  <code-pane title="app/app.component.html" path="styleguide/src/05-02/app/app.component.html">
 
   </code-pane>
 
@@ -4398,12 +4364,13 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 05-03}
 
-### {@a 05-03}Components as elements
+### Components as elements
 
 ### {@a 05-03}把组件当做元素
 
-#### <a href="#05-03">Style 05-03</a>
+#### Style 05-03
 
 #### <a href="#05-03">风格 05-03</a>
 
@@ -4426,7 +4393,7 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
 
 
 **Why?** components have templates containing HTML and optional Angular template syntax.
-They display content. 
+They display content.
 Developers place components on the page as they would native HTML elements and web components.
 
 **为何？**组件有很多包含 HTML 以及可选 Angular 模板语法的模板。
@@ -4450,13 +4417,13 @@ Developers place components on the page as they would native HTML elements and w
 
 
 
-<code-example path="style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/hero-button/hero-button.component.ts">
+<code-example path="styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/hero-button/hero-button.component.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/05-03/app/app.component.avoid.html" title="app/app.component.html">
+<code-example path="styleguide/src/05-03/app/app.component.avoid.html" title="app/app.component.html">
 
 </code-example>
 
@@ -4464,11 +4431,11 @@ Developers place components on the page as they would native HTML elements and w
 
 <code-tabs>
 
-  <code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
+  <code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
 
   </code-pane>
 
-  <code-pane title="app/app.component.html" path="style-guide/src/05-03/app/app.component.html">
+  <code-pane title="app/app.component.html" path="styleguide/src/05-03/app/app.component.html">
 
   </code-pane>
 
@@ -4476,12 +4443,13 @@ Developers place components on the page as they would native HTML elements and w
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 05-04}
 
-### {@a 05-04}Extract templates and styles to their own files
+### Extract templates and styles to their own files
 
 ### {@a 05-04}把模板和样式提取到它们自己的文件
 
-#### <a href="#05-04">Style 05-04</a>
+#### Style 05-04
 
 #### <a href="#05-04">风格 05-04</a>
 
@@ -4589,7 +4557,7 @@ Angular的TypeScript语言服务（即将到来）可以帮助那些编辑器在
 **为何？**`./`前缀是相对URL的标准语法，不必依赖Angular的特殊处理，如果没有前缀则不行。
 
 
-<code-example path="style-guide/src/05-04/app/heroes/heroes.component.avoid.ts" region="example" title="app/heroes/heroes.component.ts">
+<code-example path="styleguide/src/05-04/app/heroes/heroes.component.avoid.ts" region="example" title="app/heroes/heroes.component.ts">
 
 </code-example>
 
@@ -4601,15 +4569,15 @@ Angular的TypeScript语言服务（即将到来）可以帮助那些编辑器在
 
 <code-tabs>
 
-  <code-pane title="app/heroes/heroes.component.ts" path="style-guide/src/05-04/app/heroes/heroes.component.ts" region="example">
+  <code-pane title="app/heroes/heroes.component.ts" path="styleguide/src/05-04/app/heroes/heroes.component.ts" region="example">
 
   </code-pane>
 
-  <code-pane title="app/heroes/heroes.component.html" path="style-guide/src/05-04/app/heroes/heroes.component.html">
+  <code-pane title="app/heroes/heroes.component.html" path="styleguide/src/05-04/app/heroes/heroes.component.html">
 
   </code-pane>
 
-  <code-pane title="app/heroes/heroes.component.css" path="style-guide/src/05-04/app/heroes/heroes.component.css">
+  <code-pane title="app/heroes/heroes.component.css" path="styleguide/src/05-04/app/heroes/heroes.component.css">
 
   </code-pane>
 
@@ -4617,12 +4585,13 @@ Angular的TypeScript语言服务（即将到来）可以帮助那些编辑器在
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 05-12}
 
-### {@a 05-12}Decorate _input_ and _output_ properties
+### Decorate _input_ and _output_ properties
 
 ### {@a 05-12}内联输入和输出属性装饰器
 
-#### <a href="#05-12">Style 05-12</a>
+#### Style 05-12
 
 #### <a href="#05-12">风格 05-12</a>
 
@@ -4631,7 +4600,7 @@ Angular的TypeScript语言服务（即将到来）可以帮助那些编辑器在
 
 
 
-**Do** use the `@Input()` and `@Output()` class decorators instead of the `inputs` and `outputs` properties of the 
+**Do** use the `@Input()` and `@Output()` class decorators instead of the `inputs` and `outputs` properties of the
 `@Directive` and `@Component` metadata:
 
 **坚持** 使用`@Input()`和`@Output()`，而非`@Directive`和`@Component`装饰器的`inputs`和`outputs`属性:
@@ -4671,7 +4640,7 @@ Angular的TypeScript语言服务（即将到来）可以帮助那些编辑器在
 
 
 
-**Why?** If you ever need to rename the property or event name associated with 
+**Why?** If you ever need to rename the property or event name associated with
 `@Input` or `@Output`, you can modify it in a single place.
 
 **为何？** 如果需要重命名与`@Input`或者`@Output`关联的属性或事件名，你可以在一个位置修改。
@@ -4708,26 +4677,28 @@ Put it on the line above when doing so is clearly more readable.
 
 
 
-<code-example path="style-guide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
+<code-example path="styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
+<code-example path="styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
 
-### {@a 05-13}Avoid aliasing _inputs_ and _outputs_
+{@a 05-13}
 
-### {@a 05-13}避免为输入和输出属性指定别名
+### Avoid aliasing _inputs_ and _outputs_
 
-#### <a href="#05-13">Style 05-13</a>
+### 避免为输入和输出属性指定别名
 
-#### <a href="#05-13">风格 05-13</a>
+#### Style 05-13
+
+#### 风格 05-13
 
 
 <div class="s-rule avoid">
@@ -4760,7 +4731,7 @@ Put it on the line above when doing so is clearly more readable.
 
 
 
-**Why?** You should use an alias when the directive name is also an _input_ property, 
+**Why?** You should use an alias when the directive name is also an _input_ property,
 and the directive name doesn't describe the property.
 
 **为何？**如果指令名也同时用作*输入*属性，而且指令名无法准确描述这个属性的用途时，应该使用别名。
@@ -4770,13 +4741,13 @@ and the directive name doesn't describe the property.
 
 
 
-<code-example path="style-guide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
+<code-example path="styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/05-13/app/app.component.avoid.html" title="app/app.component.html">
+<code-example path="styleguide/src/05-13/app/app.component.avoid.html" title="app/app.component.html">
 
 </code-example>
 
@@ -4784,15 +4755,15 @@ and the directive name doesn't describe the property.
 
 <code-tabs>
 
-  <code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="style-guide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
+  <code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
 
   </code-pane>
 
-  <code-pane title="app/heroes/shared/hero-button/hero-highlight.directive.ts" path="style-guide/src/05-13/app/heroes/shared/hero-highlight.directive.ts">
+  <code-pane title="app/heroes/shared/hero-button/hero-highlight.directive.ts" path="styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts">
 
   </code-pane>
 
-  <code-pane title="app/app.component.html" path="style-guide/src/05-13/app/app.component.html">
+  <code-pane title="app/app.component.html" path="styleguide/src/05-13/app/app.component.html">
 
   </code-pane>
 
@@ -4800,12 +4771,13 @@ and the directive name doesn't describe the property.
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 05-14}
 
-### {@a 05-14}Member sequence
+### Member sequence
 
 ### {@a 05-14}成员顺序
 
-#### <a href="#05-14">Style 05-14</a>
+#### Style 05-14
 
 #### <a href="#05-14">风格 05-14</a>
 
@@ -4840,7 +4812,7 @@ and the directive name doesn't describe the property.
 
 
 
-**Why?** Placing members in a consistent sequence makes it easy to read and 
+**Why?** Placing members in a consistent sequence makes it easy to read and
 helps instantly identify which members of the component serve which purpose.
 
 **为何？**把类的成员按照统一的顺序排列，易于阅读，能立即识别出组件的哪个成员服务于何种目的。
@@ -4850,24 +4822,25 @@ helps instantly identify which members of the component serve which purpose.
 
 
 
-<code-example path="style-guide/src/05-14/app/shared/toast/toast.component.avoid.ts" region="example" title="app/shared/toast/toast.component.ts">
+<code-example path="styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts" region="example" title="app/shared/toast/toast.component.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/05-14/app/shared/toast/toast.component.ts" region="example" title="app/shared/toast/toast.component.ts">
+<code-example path="styleguide/src/05-14/app/shared/toast/toast.component.ts" region="example" title="app/shared/toast/toast.component.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 05-15}
 
-### {@a 05-15}Delegate complex component logic to services
+### Delegate complex component logic to services
 
 ### {@a 05-15}把逻辑放到服务里
 
-#### <a href="#05-15">Style 05-15</a>
+#### Style 05-15
 
 #### <a href="#05-14">风格 05-15</a>
 
@@ -4950,24 +4923,25 @@ helps instantly identify which members of the component serve which purpose.
 
 
 
-<code-example path="style-guide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts" title="app/heroes/hero-list/hero-list.component.ts">
+<code-example path="styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts" title="app/heroes/hero-list/hero-list.component.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/05-15/app/heroes/hero-list/hero-list.component.ts" region="example" title="app/heroes/hero-list/hero-list.component.ts">
+<code-example path="styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts" region="example" title="app/heroes/hero-list/hero-list.component.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 05-16}
 
-### {@a 05-16}Don't prefix _output_ properties
+### Don't prefix _output_ properties
 
 ### {@a 05-16}不要给输出属性加前缀
 
-#### <a href="#05-16">Style 05-16</a>
+#### Style 05-16
 
 #### <a href="#05-16">风格 05-16</a>
 
@@ -5024,13 +4998,13 @@ helps instantly identify which members of the component serve which purpose.
 
 
 
-<code-example path="style-guide/src/05-16/app/heroes/hero.component.avoid.ts" region="example" title="app/heroes/hero.component.ts">
+<code-example path="styleguide/src/05-16/app/heroes/hero.component.avoid.ts" region="example" title="app/heroes/hero.component.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/05-16/app/app.component.avoid.html" title="app/app.component.html">
+<code-example path="styleguide/src/05-16/app/app.component.avoid.html" title="app/app.component.html">
 
 </code-example>
 
@@ -5038,11 +5012,11 @@ helps instantly identify which members of the component serve which purpose.
 
 <code-tabs>
 
-  <code-pane title="app/heroes/hero.component.ts" path="style-guide/src/05-16/app/heroes/hero.component.ts" region="example">
+  <code-pane title="app/heroes/hero.component.ts" path="styleguide/src/05-16/app/heroes/hero.component.ts" region="example">
 
   </code-pane>
 
-  <code-pane title="app/app.component.html" path="style-guide/src/05-16/app/app.component.html">
+  <code-pane title="app/app.component.html" path="styleguide/src/05-16/app/app.component.html">
 
   </code-pane>
 
@@ -5050,12 +5024,13 @@ helps instantly identify which members of the component serve which purpose.
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 05-17}
 
-### {@a 05-17}Put presentation logic in the component class
+### Put presentation logic in the component class
 
 ### {@a 05-17}把表现层逻辑放到组件类里
 
-#### <a href="#05-17">Style 05-17</a>
+#### Style 05-17
 
 #### <a href="#05-17">风格 05-17</a>
 
@@ -5099,13 +5074,13 @@ helps instantly identify which members of the component serve which purpose.
 
 
 
-<code-example path="style-guide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts" region="example" title="app/heroes/hero-list/hero-list.component.ts">
+<code-example path="styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts" region="example" title="app/heroes/hero-list/hero-list.component.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/05-17/app/heroes/hero-list/hero-list.component.ts" region="example" title="app/heroes/hero-list/hero-list.component.ts">
+<code-example path="styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts" region="example" title="app/heroes/hero-list/hero-list.component.ts">
 
 </code-example>
 
@@ -5115,15 +5090,15 @@ helps instantly identify which members of the component serve which purpose.
 ## Directives
 ## 指令
 
+{@a 06-01}
 
+### Use directives to enhance an element
 
-### {@a 06-01}Use directives to enhance an element
+### 使用指令来增强已有元素
 
-### {@a 06-01}使用指令来加强已有元素
+#### Style 06-01
 
-#### <a href="#06-01">Style 06-01</a>
-
-#### <a href="#06-01">风格 06-01</a>
+#### 风格 06-01
 
 
 <div class="s-rule do">
@@ -5165,24 +5140,25 @@ helps instantly identify which members of the component serve which purpose.
 
 
 
-<code-example path="style-guide/src/06-01/app/shared/highlight.directive.ts" region="example" title="app/shared/highlight.directive.ts">
+<code-example path="styleguide/src/06-01/app/shared/highlight.directive.ts" region="example" title="app/shared/highlight.directive.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/06-01/app/app.component.html" title="app/app.component.html">
+<code-example path="styleguide/src/06-01/app/app.component.html" title="app/app.component.html">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 06-03}
 
-### {@a 06-03}_HostListener_/_HostBinding_ decorators versus _host_ metadata
+### _HostListener_/_HostBinding_ decorators versus _host_ metadata
 
 ### {@a 06-03}*HostListener* 和 *HostBinding* 装饰器 vs. 组件元数据 *host*
 
-#### <a href="#06-03">Style 06-03</a>
+#### Style 06-03
 
 #### <a href="#06-03">风格 06-03</a>
 
@@ -5191,7 +5167,7 @@ helps instantly identify which members of the component serve which purpose.
 
 
 
-**Consider** preferring the `@HostListener` and `@HostBinding` to the 
+**Consider** preferring the `@HostListener` and `@HostBinding` to the
 `host` property of the `@Directive` and `@Component` decorators.
 
 **考虑**优先使用`@HostListener`和`@HostBinding`，而不是`@Directive`和`@Component`装饰器的`host`属性。
@@ -5218,9 +5194,9 @@ helps instantly identify which members of the component serve which purpose.
 
 
 
-**Why?** The property associated with `@HostBinding` or the method associated with `@HostListener` 
-can be modified only in a single place&mdash;in the directive's class. 
-If you use the `host` metadata property, you must modify both the property declaration inside the controller, 
+**Why?** The property associated with `@HostBinding` or the method associated with `@HostListener`
+can be modified only in a single place&mdash;in the directive's class.
+If you use the `host` metadata property, you must modify both the property declaration inside the controller,
 and the metadata associated with the directive.
 
 **为何？**对于关联到`@HostBinding`的属性或关联到`@HostListener`的方法，要修改时，只需在指令类中的一个地方修改。
@@ -5231,7 +5207,7 @@ and the metadata associated with the directive.
 
 
 
-<code-example path="style-guide/src/06-03/app/shared/validator.directive.ts" title="app/shared/validator.directive.ts">
+<code-example path="styleguide/src/06-03/app/shared/validator.directive.ts" title="app/shared/validator.directive.ts">
 
 </code-example>
 
@@ -5255,7 +5231,7 @@ Compare with the less preferred `host` metadata alternative.
 
 
 
-<code-example path="style-guide/src/06-03/app/shared/validator2.directive.ts" title="app/shared/validator2.directive.ts">
+<code-example path="styleguide/src/06-03/app/shared/validator2.directive.ts" title="app/shared/validator2.directive.ts">
 
 </code-example>
 
@@ -5266,13 +5242,15 @@ Compare with the less preferred `host` metadata alternative.
 
 ## 服务
 
-### {@a 07-01}Services are singletons
+{@a 07-01}
 
-### {@a 07-01}服务总是单例的
+### Services are singletons
 
-#### <a href="#07-01">Style 07-01</a>
+### 服务总是单例的
 
-#### <a href="#07-01">风格 07-01</a>
+#### Style 07-01
+
+#### 风格 07-01
 
 
 <div class="s-rule do">
@@ -5314,18 +5292,19 @@ Compare with the less preferred `host` metadata alternative.
 
 
 
-<code-example path="style-guide/src/07-01/app/heroes/shared/hero.service.ts" region="example" title="app/heroes/shared/hero.service.ts">
+<code-example path="styleguide/src/07-01/app/heroes/shared/hero.service.ts" region="example" title="app/heroes/shared/hero.service.ts">
 
 </code-example>
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 07-02}
 
-### {@a 07-02}Single responsibility
+### Single responsibility
 
 ### {@a 07-02}单一职责
 
-#### <a href="#07-02">Style 07-02</a>
+#### Style 07-02
 
 #### <a href="#07-02">风格 07-02</a>
 
@@ -5382,12 +5361,13 @@ Compare with the less preferred `host` metadata alternative.
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 07-03}
 
-### {@a 07-03}Providing a service
+### Providing a service
 
 ### {@a 07-03}提供一个服务
 
-#### <a href="#07-03">Style 07-03</a>
+#### Style 07-03
 
 #### <a href="#07-03">风格 07-03</a>
 
@@ -5421,9 +5401,8 @@ Compare with the less preferred `host` metadata alternative.
 
 
 
-**Why?** When providing the service to a top level component, that instance is shared and available to all child components of that top level component.
-
-**为何？**在顶层组件提供服务时，该服务实例在所有子组件中可见并共享。
+**Why?** When providing the service to a top level component, 
+that instance is shared and available to all child components of that top level component.**为何？**在顶层组件提供服务时，该服务实例在所有子组件中可见并共享。
 
 
 </div>
@@ -5458,11 +5437,11 @@ Compare with the less preferred `host` metadata alternative.
 
 <code-tabs>
 
-  <code-pane title="app/app.component.ts" path="style-guide/src/07-03/app/app.component.ts">
+  <code-pane title="app/app.component.ts" path="styleguide/src/07-03/app/app.component.ts">
 
   </code-pane>
 
-  <code-pane title="app/heroes/hero-list/hero-list.component.ts" path="style-guide/src/07-03/app/heroes/hero-list/hero-list.component.ts">
+  <code-pane title="app/heroes/hero-list/hero-list.component.ts" path="styleguide/src/07-03/app/heroes/hero-list/hero-list.component.ts">
 
   </code-pane>
 
@@ -5470,12 +5449,13 @@ Compare with the less preferred `host` metadata alternative.
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a 07-04}
 
-### {@a 07-04}Use the @Injectable() class decorator
+### Use the @Injectable() class decorator
 
 ### {@a 07-04}使用 @Injectable() 类装饰器
 
-#### <a href="#07-04">Style 07-04</a>
+#### Style 07-04
 
 #### <a href="#07-04">风格 07-04</a>
 
@@ -5497,7 +5477,7 @@ Compare with the less preferred `host` metadata alternative.
 
 
 
-**Why?** The Angular Dependency Injection (DI) mechanism resolves a service's own 
+**Why?** The Angular Dependency Injection (DI) mechanism resolves a service's own
 dependencies based on the declared types of that service's constructor parameters.
 
 **为何？** Angular 的 DI 机制会根据服务的构造函数参数的声明类型来解析服务的所有依赖。
@@ -5520,13 +5500,13 @@ dependencies based on the declared types of that service's constructor parameter
 
 
 
-<code-example path="style-guide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts" region="example" title="app/heroes/shared/hero-arena.service.ts">
+<code-example path="styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts" region="example" title="app/heroes/shared/hero-arena.service.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/07-04/app/heroes/shared/hero-arena.service.ts" region="example" title="app/heroes/shared/hero-arena.service.ts">
+<code-example path="styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts" region="example" title="app/heroes/shared/hero-arena.service.ts">
 
 </code-example>
 
@@ -5535,15 +5515,16 @@ dependencies based on the declared types of that service's constructor parameter
 
 ## Data Services
 
-## 数据服务
+{@a 08-01}
 
-### {@a 08-01}Talk to the server through a service
+### Talk to the server through a service
 
-### {@a 08-01}通过服务与Web服务器交互
+### 通过服务与 Web 服务器通讯
 
-#### <a href="#08-01">Style 08-01</a>
+#### Style 08-01
+
+#### 风格 08-01
 
-#### <a href="#08-01">风格 08-01</a>
 
 
 <div class="s-rule do">
@@ -5602,14 +5583,14 @@ dependencies based on the declared types of that service's constructor parameter
 
 
 
-**Why?** The details of data management, such as headers, HTTP methods, 
-caching, error handling, and retry logic, are irrelevant to components 
+**Why?** The details of data management, such as headers, HTTP methods,
+caching, error handling, and retry logic, are irrelevant to components
 and other data consumers.
 
 **为何？**数据管理的详情，比如头信息、方法、缓存、错误处理和重试逻辑，不是组件和其它的数据消费者应该关心的事情。
 
-A data service encapsulates these details. It's easier to evolve these 
-details inside the service without affecting its consumers. And it's 
+A data service encapsulates these details. It's easier to evolve these
+details inside the service without affecting its consumers. And it's
 easier to test the consumers with mock service implementations.
 
 数据服务应该封装这些细节。这样，在服务内部修改细节，就不会影响到它的消费者。并且更容易通过实现一个模拟服务来对消费者进行测试。
@@ -5625,16 +5606,15 @@ easier to test the consumers with mock service implementations.
 ## 生命周期钩子
 
 Use Lifecycle hooks to tap into important events exposed by Angular.
+使用生命周期钩子来介入到 Angular 暴露的重要事件里。<a href="#toc"class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
-使用生命周期钩子来介入到 Angular 暴露的重要事件里。
-<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
+{@a 09-01}
 
-
-### {@a 09-01}Implement lifecycle hook interfaces
+### Implement lifecycle hook interfaces
 
 ### {@a 09-01}实现生命周期钩子接口
 
-#### <a href="#09-01">Style 09-01</a>
+#### Style 09-01
 
 #### <a href="#09-01">风格 09-01</a>
 
@@ -5656,7 +5636,7 @@ Use Lifecycle hooks to tap into important events exposed by Angular.
 
 
 
-**Why?** Lifecycle interfaces prescribe typed method 
+**Why?** Lifecycle interfaces prescribe typed method
 signatures. use those signatures to flag spelling and syntax mistakes.
 
 **为何？**如果使用强类型的方法签名，编译器和编辑器可以帮你揪出拼写错误。
@@ -5666,13 +5646,13 @@ signatures. use those signatures to flag spelling and syntax mistakes.
 
 
 
-<code-example path="style-guide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
+<code-example path="styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
 
 </code-example>
 
 
 
-<code-example path="style-guide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
+<code-example path="styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
 
 </code-example>
 
@@ -5684,14 +5664,13 @@ signatures. use those signatures to flag spelling and syntax mistakes.
 ## 附录
 
 Useful tools and tips for Angular.
+有用的 Angular 工具和小提示<a href="#toc"class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
-有用的 Angular 工具和小提示
-<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
+{@a A-01}
 
+### Codelyzer
 
-### {@a A-01}Codelyzer
-
-#### <a href="#A-01">Style A-01</a>
+#### Style A-01
 
 #### <a href="#A-01">风格 A-01</a>
 
@@ -5722,12 +5701,13 @@ Useful tools and tips for Angular.
 
 <a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
 
+{@a A-02}
 
-### {@a A-02}File templates and snippets
+### File templates and snippets
 
 ### {@a A-02}文档模板和代码片段
 
-#### <a href="#A-02">Style A-02</a>
+#### Style A-02
 
 #### <a href="#A-02">风格 A-02</a>
 
@@ -5754,7 +5734,7 @@ Useful tools and tips for Angular.
 **考虑**使用 [Visual Studio Code](https://code.visualstudio.com/)的[代码片段](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) 来实施本风格指南。
 
 <a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2">
-  <img src="https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif" width="80%" alt="Use Extension">
+  <img src="generated/images/guide/styleguide/use-extension.gif" alt="Use Extension">
 </a>
 
 </div>
@@ -5780,4 +5760,4 @@ Useful tools and tips for Angular.
 
 </div>
 
-<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
\ No newline at end of file
+<a href="#toc"class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
\ No newline at end of file
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index 69641b532e..626a538dfa 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -1,152 +1,40 @@
-@title
-模板语法
-
-@intro
-学习如何写模板来显示数据，以及在数据绑定的帮助下响应用户事件。
-
-@description
-
+# Template Syntax
 
+# 模板语法
 
 <style>
   h4 {font-size: 17px !important; text-transform: none !important;}
   .syntax { font-family: Consolas, 'Lucida Sans', Courier, sans-serif; color: black; font-size: 85%; }
   h4 .syntax { font-size: 100%; }
-
 </style>
 
-
-
-The Angular application manages what the user sees and can do, achieving this through the interaction of a 
+The Angular application manages what the user sees and can do, achieving this through the interaction of a
 component class instance (the *component*) and its user-facing template.
 
 Angular 应用管理着用户之所见和所为，并通过 Component 类的实例（*组件*）和面向用户的模板来与用户交互。
 
-You may be familiar with the component/template duality from your experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). 
+You may be familiar with the component/template duality from your experience with model-view-controller (MVC) or model-view-viewmodel (MVVM).
 In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.
 
 从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经验中，很多开发人员都熟悉了组件和模板这两个概念。
   在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。
-
-
-{@a toc}
-
-
-### Contents
-
-### 目录
-
-This guide covers the basic elements of the Angular template syntax, elements you'll need to construct the view:
-
-本章涵盖了Angular模板语法中的基本元素，你在构建视图时会用到它们：
-
-* [HTML in templates](guide/template-syntax#html)
-
-  [模板中的HTML](guide/template-syntax#html)
-
-* [Interpolation ( <span class="syntax">{&#xfeff;{...}}</span> )](guide/template-syntax#interpolation)
-
-  [插值表达式( <span class="syntax">{&#xfeff;{...}}</span> )](guide/template-syntax#interpolation)
-
-* [Template expressions](guide/template-syntax#template-expressions)
-
-  [模板表达式](guide/template-syntax#template-expressions)
-
-* [Template statements](guide/template-syntax#template-statements)
-
-  [模板语句](guide/template-syntax#template-statements)
-
-* [Binding syntax](guide/template-syntax#binding-syntax)
-
-  [绑定语法](guide/template-syntax#binding-syntax)
-
-* [Property binding ( <span class="syntax">[property]</span> )](#property-binding)
-
-  [属性 (property) 绑定 ( <span class="syntax">[property]</span> )](#property-binding)
-* [Attribute, class, and style bindings](guide/template-syntax#other-bindings)
-
-  [属性、类和样式绑定](guide/template-syntax#other-bindings)
-
-* [Event binding ( <span class="syntax">(event)</span> )](guide/template-syntax#event-binding)
-
-  [事件绑定 ( <span class="syntax">(event)</span> )](guide/template-syntax#event-binding)
-
-* [Two-way data binding ( <span class="syntax">[(...)]</span> )](#two-way)
-
-  [双向绑定 ( <span class="syntax">[(...)]</span> )](#two-way)
-
-* [Built-in directives](guide/template-syntax#directives)
-
-  [内置指令](guide/template-syntax#directives)
-
-* [Built-in attribute directives](guide/template-syntax#attribute-directives)
-
-  [内置属性型指令](guide/template-syntax#attribute-directives)
-
-  * [NgClass](guide/template-syntax#ngClass)
-  * [NgStyle](guide/template-syntax#ngStyle)
-  * [NgModel (<span class="syntax">[(ngModel)]</span>) ](#ngModel)
-
-* [Built-in structural directives](guide/template-syntax#structural-directives)
-
-  [内置结构型指令](guide/template-syntax#structural-directives)
-
-  * [NgIf](guide/template-syntax#ngIf)
   
-  * [NgFor](guide/template-syntax#ngFor)
-  
-    * [Template input variables](guide/template-syntax#template-input-variables)
-    
-      [模板输入变量](guide/template-syntax#template-input-variables)
-      
-    * [Microsyntax](guide/template-syntax#microsyntax)
-    
-      [微语法](guide/template-syntax#microsyntax)
-
-  * [The NgSwitch directives](guide/template-syntax#ngSwitch)
-  
-    [NgSwitch指令](guide/template-syntax#ngSwitch)
-    
-* [Template reference variables( <span class="syntax">#var</span> )](guide/template-syntax#ref-vars)
-
-  [模板引用变量( <span class="syntax">#var</span> )](guide/template-syntax#ref-vars)  
-  
-* [Input and output properties( <span class="syntax">@Input</span> and <span class="syntax">@Output</span> )](guide/template-syntax#inputs-outputs)
-
-  [输入输出属性( <span class="syntax">@Input</span> and <span class="syntax">@Output</span> )](guide/template-syntax#inputs-outputs)
-  
-* [Template expression operators](guide/template-syntax#expression-operators)
-
-  [模板表达式操作符](guide/template-syntax#expression-operators)    
-
-  * [pipe( <span class="syntax">|</span> )](guide/template-syntax#pipe)
-  
-    [管道](guide/template-syntax#pipe)
-    
-  * [safe navigation operator (<span class="syntax">?.</span>)](guide/template-syntax#safe-navigation-operator)
-
-    [安全导航操作符 (<span class="syntax">?.</span>)](guide/template-syntax#safe-navigation-operator)
-
-The <live-example></live-example>
-demonstrates all of the syntax and code snippets described in this guide.
-
-<live-example></live-example>演示了本章中描述的所有语法和代码片段。
-
-
-<hr/>
+// TODO: Translate
+This page is a comprehensive technical reference to the Angular template language.
+It explains basic principles of the template language and describes most of the syntax that you'll encounter elsewhere in the documentation.
 
+Many code snippets illustrate the points and concepts, all of them available
+in the <live-example title="Template Syntax Live Code"></live-example>.
 
 
 {@a html}
-
-
 ## HTML in templates
 
 ## 模板中的HTML
 
 HTML is the language of the Angular template.
-Almost all HTML syntax is valid template syntax. 
-The `<script>` element is a notable exception; 
+Almost all HTML syntax is valid template syntax.
+The `<script>` element is a notable exception;
 it is forbidden, eliminating the risk of script injection attacks.
 In practice, `<script>` is ignored and a warning appears in the browser console.
 See the [Security](guide/security) page for details.
@@ -155,29 +43,24 @@ HTML 是 Angular 模板的语言。几乎所有的HTML语法都是有效的模
 但值得注意的例外是`<script>`元素，它被禁用了，以阻止脚本注入攻击的风险。（实际上，`<script>`只是被忽略了。）
 参见[安全](guide/security)页了解详情。
 
-Some legal HTML doesn't make much sense in a template. 
-The `<html>`, `<body>`, and `<base>` elements have no useful role. 
+Some legal HTML doesn't make much sense in a template.
+The `<html>`, `<body>`, and `<base>` elements have no useful role.
 Pretty much everything else is fair game.
 
 有些合法的 HTML 被用在模板中是没有意义的。`<html>`、`<body>`和`<base>`元素这个舞台上中并没有扮演有用的角色。剩下的所有元素基本上就都一样用了。
 
-You can extend the HTML vocabulary of your templates with components and directives that appear as new elements and attributes. 
+You can extend the HTML vocabulary of your templates with components and directives that appear as new elements and attributes.
 In the following sections, you'll learn how to get and set DOM (Document Object Model) values dynamically through data binding.
 
 可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。接下来将学习如何通过数据绑定来动态获取/设置 DOM（文档对象模型）的值。
 
 Begin with the first form of data binding&mdash;interpolation&mdash;to see how much richer template HTML can be.
-
-我们首先看看数据绑定的第一种形式 —— 插值表达式，它展示了模板的 HTML 可以有多丰富。
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+我们首先看看数据绑定的第一种形式 —— 插值表达式，它展示了模板的 HTML 可以有多丰富。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a interpolation}
 
-
 ## Interpolation ( <span class="syntax">{&#xfeff;{...}}</span> )
 
 ## 插值表达式 ( <span class="syntax">{&#xfeff;{...}}</span> )
@@ -188,22 +71,16 @@ You met the double-curly braces of interpolation, `{{` and `}}`, early in your A
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="first-interpolation" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 You use interpolation to weave calculated strings into the text between HTML element tags and within attribute assignments.
 
 插值表达式可以把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值。
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="title+image" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 The text between the braces is often the name of a component property. Angular replaces that name with the
 string value of the corresponding component property. In the example above, Angular evaluates the `title` and `heroImageUrl` properties
 and "fills in the blanks", first displaying a bold application title and then a heroic image.
@@ -220,22 +97,16 @@ and then **converts to a string**. The following interpolation illustrates the p
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="sum-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 The expression can invoke methods of the host component such as `getVal()`, seen here:
 
 这个表达式可以调用宿主组件的方法，就像下面用的`getVal()`：
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="sum-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Angular evaluates all expressions in double curly braces,
 converts the expression results to strings, and links them with neighboring literal strings. Finally,
 it assigns this composite interpolated result to an **element or directive property**.
@@ -245,24 +116,19 @@ Angular 对所有双花括号中的表达式求值，把求值的结果转换成
 You appear to be inserting the result between element tags and assigning it to attributes.
 It's convenient to think so, and you rarely suffer for this mistake.
 Though this is not exactly true. Interpolation is a special syntax that Angular converts into a
-[property binding](guide/template-syntax#property-binding), as is explained [below](guide/template-syntax#property-binding-or-interpolation-).
+[property binding](guide/template-syntax#property-binding), as is explained [below](guide/template-syntax#property-binding-or-interpolation).
 
 表面上看，我们在元素标签之间插入了结果和对标签的属性进行了赋值。
 这样思考起来很方便，并且这个误解很少给我们带来麻烦。
 但严格来讲，这是不对的。插值表达式是一个特殊的语法，Angular 把它转换成了[属性绑定](guide/template-syntax#property-binding)，[后面](guide/template-syntax#property-binding-or-interpolation-)将会解释这一点。
 
 But first, let's take a closer look at template expressions and statements.
-
-讲解属性绑定之前，先深入了解一下模板表达式和模板语句。
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+讲解属性绑定之前，先深入了解一下模板表达式和模板语句。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a template-expressions}
 
-
 ## Template expressions
 
 ## 模板表达式
@@ -317,14 +183,13 @@ Other notable differences from JavaScript syntax include:
 
   不支持位运算`|`和`&`
   
-* new [template expression operators](guide/template-syntax#expression-operators), such as `|` and `?.`
+* new [template expression operators](guide/template-syntax#expression-operators), such as `|`, `?.` and `!`.
 
-  具有新的[模板表达式运算符](guide/template-syntax#expression-operators)，比如`|`和`?.`
+  具有新的[模板表达式运算符](guide/template-syntax#expression-operators)，比如`|`、`?.`和`!`。
 
 
 {@a expression-context}
 
-
 ### Expression context
 
 ### 表达式上下文
@@ -338,11 +203,8 @@ In the following snippets, the `title`  within double-curly braces and the
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="context-component-expression" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 An expression may also refer to properties of the _template's_ context
 such as a [template input variable](guide/template-syntax#template-input-variable) (`let hero`)
 or a [template reference variable](guide/template-syntax#ref-vars) (`#heroInput`).
@@ -352,11 +214,8 @@ or a [template reference variable](guide/template-syntax#ref-vars) (`#heroInput`
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="context-var" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 The context for terms in an expression is a blend of the _template variables_,
 the directive's _context_ object (if it has one), and the component's _members_.
 If you reference a name that belongs to more than one of these namespaces,
@@ -378,17 +237,13 @@ Template expressions cannot refer to anything in
 the global namespace. They can't refer to `window` or `document`. They
 can't call `console.log` or `Math.max`. They are restricted to referencing
 members of the expression context.
-
 模板表达式不能引用全局命名空间中的任何东西，比如`window`或`document`。它们也不能调用`console.log`或`Math.max`。
-它们只能引用表达式上下文中的成员。
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+它们只能引用表达式上下文中的成员。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 {@a no-side-effects}
 
-
 {@a expression-guidelines}
 
-
 ### Expression guidelines
 
 ### 表达式指南
@@ -488,15 +343,12 @@ it returns the same object *reference* when called twice in a row.
 在单独的一次事件循环中，被依赖的值不应该改变。
   如果幂等的表达式返回一个字符串或数字，连续调用它两次，也应该返回相同的字符串或数字。
   如果幂等的表达式返回一个对象（包括`Date`或`Array`），连续调用它两次，也应该返回同一个对象的*引用*。
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a template-statements}
 
-
 ## Template statements
 
 ## 模板语句
@@ -511,11 +363,8 @@ appearing in quotes to the right of the `=`&nbsp;symbol as in `(event)="statemen
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="context-component-statement" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 A template statement *has a side effect*.
 That's the whole point of an event.
 It's how you update application state from user action.
@@ -578,11 +427,8 @@ The *deleteHero* in `(click)="deleteHero()"` is a method of the data-bound compo
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="context-component-statement" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 The statement context may also refer to properties of the template's own context.
 In the following examples, the template `$event` object,
 a [template input variable](guide/template-syntax#template-input-variable) (`let hero`),
@@ -594,11 +440,8 @@ are passed to an event handling method of the component.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="context-var-statement" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Template context names take precedence over component context names.
 In `deleteHero(hero)` above, the `hero` is the template input variable,
 not the component's `hero` property.
@@ -623,18 +466,13 @@ A method call or simple property assignment should be the norm.
 
 Now that you have a feel for template expressions and statements,
 you're ready to learn about the varieties of data binding syntax beyond interpolation.
-
 现在，对模板表达式和语句有了一点感觉了吧。
-  除插值表达式外，还有各种各样的数据绑定语法，是学习它们是时候了。
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+  除插值表达式外，还有各种各样的数据绑定语法，是学习它们是时候了。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a binding-syntax}
 
-
 ## Binding syntax: An overview
 
 ## 绑定语法：概览
@@ -659,14 +497,15 @@ Angular 提供了各种各样的数据绑定，本章将逐一讨论。
 Binding types can be grouped into three categories distinguished by the direction of data flow:
 from the _source-to-view_, from _view-to-source_, and in the two-way sequence: _view-to-source-to-view_:
 
+
 绑定的类型可以根据数据流的方向分成三类：
 *从数据源到视图*、*从视图到数据源*以及双向的*从视图到数据源再到视图*。
+  
 
 
-<table>
 
+<table >
   <tr>
-
     <th>
 
       <p>
@@ -678,7 +517,6 @@ from the _source-to-view_, from _view-to-source_, and in the two-way sequence: _
       </p>
 
     </th>
-
     <th>
 
       <p>
@@ -690,7 +528,6 @@ from the _source-to-view_, from _view-to-source_, and in the two-way sequence: _
       </p>
 
     </th>
-
     <th>
 
       <p>
@@ -704,9 +541,7 @@ from the _source-to-view_, from _view-to-source_, and in the two-way sequence: _
     </th>
 
   </tr>
-
   <tr>
-
     <td>
 
       <p>
@@ -734,7 +569,6 @@ from the _source-to-view_, from _view-to-source_, and in the two-way sequence: _
       </p>
 
     </td>
-
     <td>
 
       <code-example>
@@ -744,7 +578,6 @@ from the _source-to-view_, from _view-to-source_, and in the two-way sequence: _
       </code-example>
 
     </td>
-
     <td>
 
       <p>
@@ -781,30 +614,22 @@ from the _source-to-view_, from _view-to-source_, and in the two-way sequence: _
 
     </td>
 
-  </tr>
+  </tr>  <tr>
 
-  <tr>
-
-    <td>
-
-      <p>
-        One-way
-      </p>
+      <td>
+<p>        One-way</p>
 
       <p>
         单向
       </p>
 
-      <p>
-        from view target
-      </p>
+      <p>from view target</p>
 
       <p>
         从视图目标
       </p>
 
-      <p>
-        to data source
+      <p>to data source
       </p>
 
       <p>
@@ -813,18 +638,16 @@ from the _source-to-view_, from _view-to-source_, and in the two-way sequence: _
 
     </td>
 
-    <td>
+      <td>
 
-      <code-example>
-        (target)="statement"
-        on-target="statement"
-      </code-example>
+        <code-example>
+          (target)="statement"
+          on-target="statement"
+        </code-example>
 
-    </td>
+      </td>
 
-    <td>
-
-      <p>
+      <td><p>
         Event
       </p>
 
@@ -834,13 +657,11 @@ from the _source-to-view_, from _view-to-source_, and in the two-way sequence: _
 
     </td>
 
-  </tr>
+    </tr>
 
-  <tr>
+    <tr>
 
-    <td>
-
-      <p>
+      <td><p>
         Two-way
       </p>
 
@@ -850,29 +671,26 @@ from the _source-to-view_, from _view-to-source_, and in the two-way sequence: _
 
     </td>
 
-    <td>
+      <td>
 
-      <code-example>
-        [(target)]="expression"
-        bindon-target="expression"
-      </code-example>
+        <code-example>
+          [(target)]="expression"
+          bindon-target="expression"
+        </code-example>
 
-    </td>
+      </td>
 
-    <td>
-
-      <p>
+      <td><p>
         Two-way
       </p>
 
-      <p>
+    <p>
         双向
       </p>
 
     </td>
 
   </tr>
-
 </table>
 
 
@@ -932,11 +750,8 @@ you modify those elements by setting element attributes with string constants.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="img+button" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 You still create a structure and initialize attribute values this way in Angular templates.
 
 在 Angular 模板中，我们仍使用同样的方式来创建结构和初始化 attribute 值。
@@ -948,11 +763,8 @@ and drop them into  templates as if they were native HTML elements.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="hero-detail-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 That's HTML Plus.
 
 这就是HTML+。
@@ -963,11 +775,8 @@ Then you learn about data binding. The first binding you meet might look like th
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="disabled-button-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 You'll get to that peculiar bracket notation in a moment. Looking beyond it,
 your intuition suggests that you're binding to the button's `disabled` attribute and setting
 it to the current value of the component's `isUnchanged` property.
@@ -986,8 +795,6 @@ You are setting the *properties* of DOM elements, components, and directives.
 
 <div class="l-sub-section">
 
-
-
 ### HTML attribute vs. DOM property
 
 ### HTML attribute 与 DOM property 的对比
@@ -1070,8 +877,6 @@ The value of the *property* matters.
 
 </div>
 
-
-
 This fact bears repeating:
 
 这句话值得再强调一次：
@@ -1083,8 +888,6 @@ This fact bears repeating:
 
 <div class="callout is-helpful">
 
-
-
 <header>
   A world without attributes
 </header>
@@ -1107,8 +910,6 @@ HTML attributes effectively disappear.
 
 </div>
 
-
-
 With this model firmly in mind, read on to learn about binding targets.
 
 把这个思维模型牢牢的印在脑子里，接下来，学习什么是绑定目标。
@@ -1132,24 +933,14 @@ The following table summarizes:
   td, th {vertical-align: top}
 </style>
 
-
-
 <table width="100%">
-
   <col width="10%">
-
   </col>
-
   <col width="15%">
-
   </col>
-
   <col width="75%">
-
   </col>
-
   <tr>
-
     <th>
 
       <p>
@@ -1161,7 +952,6 @@ The following table summarizes:
       </p>
 
     </th>
-
     <th>
 
       <p>
@@ -1173,7 +963,6 @@ The following table summarizes:
       </p>
 
     </th>
-
     <th>
 
       <p>
@@ -1185,11 +974,8 @@ The following table summarizes:
       </p>
 
     </th>
-
   </tr>
-
   <tr>
-
     <td>
 
       <p>
@@ -1197,7 +983,6 @@ The following table summarizes:
       </p>
 
     </td>
-
     <td>
 
       <p>
@@ -1225,19 +1010,12 @@ The following table summarizes:
       </p>
 
     </td>
-
     <td>
-
       <code-example path="template-syntax/src/app/app.component.html" region="property-binding-syntax-1" title="src/app/app.component.html" linenums="false">
-
       </code-example>
-
     </td>
-
   </tr>
-
   <tr>
-
     <td>
 
       <p>
@@ -1249,7 +1027,6 @@ The following table summarizes:
       </p>
 
     </td>
-
     <td>
 
       <p>
@@ -1277,19 +1054,12 @@ The following table summarizes:
       </p>
 
     </td>
-
     <td>
-
       <code-example path="template-syntax/src/app/app.component.html" region="event-binding-syntax-1" title="src/app/app.component.html" linenums="false">
-
       </code-example>
-
     </td>
-
   </tr>
-
   <tr>
-
     <td>
 
       <p>
@@ -1301,7 +1071,6 @@ The following table summarizes:
       </p>
 
     </td>
-
     <td>
 
       <p>
@@ -1313,23 +1082,15 @@ The following table summarizes:
       </p>
 
     </td>
-
     <td>
-
       <code-example path="template-syntax/src/app/app.component.html" region="2-way-binding-syntax-1" title="src/app/app.component.html" linenums="false">
-
       </code-example>
-
     </td>
-
   </tr>
-
   <tr>
-
     <td>
       Attribute
     </td>
-
     <td>
 
       <p>
@@ -1341,19 +1102,12 @@ The following table summarizes:
       </p>
 
     </td>
-
     <td>
-
       <code-example path="template-syntax/src/app/app.component.html" region="attribute-binding-syntax-1" title="src/app/app.component.html" linenums="false">
-
       </code-example>
-
     </td>
-
   </tr>
-
   <tr>
-
     <td>
 
       <p>
@@ -1365,7 +1119,6 @@ The following table summarizes:
       </p>
 
     </td>
-
     <td>
 
       <p>
@@ -1373,19 +1126,12 @@ The following table summarizes:
       </p>
 
     </td>
-
     <td>
-
       <code-example path="template-syntax/src/app/app.component.html" region="class-binding-syntax-1" title="src/app/app.component.html" linenums="false">
-
       </code-example>
-
     </td>
-
   </tr>
-
   <tr>
-
     <td>
 
       <p>
@@ -1397,7 +1143,6 @@ The following table summarizes:
       </p>
 
     </td>
-
     <td>
 
       <p>
@@ -1405,33 +1150,22 @@ The following table summarizes:
       </p>
 
     </td>
-
     <td>
-
       <code-example path="template-syntax/src/app/app.component.html" region="style-binding-syntax-1" title="src/app/app.component.html" linenums="false">
-
       </code-example>
-
     </td>
-
   </tr>
-
 </table>
 
-
-
 With this broad view in mind, you're ready to look at binding types in detail.
 
 放开眼界，我们来看看每种绑定类型的具体情况。
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a property-binding}
 
-
 ## Property binding ( <span class="syntax">[property]</span> )
 
 ## 属性绑定 ( <span class="syntax">[属性名]</span> )
@@ -1449,33 +1183,24 @@ binding the `src` property of an image element to a component's `heroImageUrl` p
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Another example is disabling a button when the component says that it `isUnchanged`:
 
 另一个例子是当组件说它`isUnchanged`（未改变）时禁用按钮：
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Another is setting a property of a directive:
 
 另一个例子是设置指令的属性：
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-3" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Yet another is setting the model property of a custom component (a great way
 for parent and child components to communicate):
 
@@ -1483,11 +1208,8 @@ for parent and child components to communicate):
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-4" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 ### One-way *in*
 
 ### 单向*输入*
@@ -1506,8 +1228,6 @@ You can't bind to a property of the target element to _read_ it. You can only _s
 
 <div class="l-sub-section">
 
-
-
 Similarly, you cannot use property binding to *call* a method on the target element.
 
 也不能使用属性 绑定 来*调用*目标元素上的方法。
@@ -1519,19 +1239,17 @@ If the element raises events, you can listen to them with an [event binding](gui
 If you must read a target element property or call one of its methods,
 you'll need a different technique.
 See the API reference for
-[ViewChild](api/core/index/ViewChild-decorator) and
-[ContentChild](api/core/index/ContentChild-decorator).
+[ViewChild](api/core/ViewChild) and
+[ContentChild](api/core/ContentChild).
 
 如果必须读取目标元素上的属性或调用它的某个方法，得用另一种技术。
 参见 API 参考手册中的
-[ViewChild](api/core/index/ViewChild-decorator) 和
-[ContentChild](api/core/index/ContentChild-decorator)。
+[ViewChild](api/core/ViewChild) 和
+[ContentChild](api/core/ContentChild)。
 
 
 </div>
 
-
-
 ### Binding target
 
 ### 绑定目标  
@@ -1540,24 +1258,17 @@ An element property between enclosing square brackets identifies the target prop
 
 包裹在方括号中的元素属性名标记着目标属性。下列代码中的目标属性是 image 元素的`src`属性。
 
-
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Some people prefer the `bind-` prefix alternative, known as the *canonical form*:
 
 有些人喜欢用`bind-`前缀的可选形式，并称之为*规范形式*：
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-5" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 The target name is always the name of a property, even when it appears to be the name of something else.
 You see `src` and may think it's the name of an attribute. No. It's the name of an image element property.
 
@@ -1572,15 +1283,10 @@ as it is in the following example:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-3" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 Technically, Angular is matching the name to a directive [input](guide/template-syntax#inputs-outputs),
 one of the property names listed in the directive's `inputs` array or a property decorated with `@Input()`.
 Such inputs map to the directive's own properties.
@@ -1592,8 +1298,6 @@ Such inputs map to the directive's own properties.
 
 </div>
 
-
-
 If the name fails to match a property of a known directive or element, Angular reports an “unknown directive” error.
 
 如果名字没有匹配上已知指令或元素的属性，Angular 就会报告“未知指令”的错误。
@@ -1644,11 +1348,8 @@ The `hero` property of the `HeroDetail` component expects a `Hero` object, which
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-4" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 ### Remember the brackets
 
 ### 别忘了方括号
@@ -1668,14 +1369,10 @@ Don't make the following mistake:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-6" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 {@a one-time-initialization}
 
-
 ### One-time string initialization
 
 ### 一次性字符串初始化
@@ -1706,15 +1403,14 @@ not a template expression. Angular sets it and forgets about it.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-7" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 The `[hero]` binding, on the other hand, remains a live binding to the component's `currentHero` property.
 
 作为对比，`[hero]`绑定是组件的`currentHero`属性的活绑定，它会一直随着更新。
 
+{@a property-binding-or-interpolation}
+
 ### Property binding or interpolation?
 
 ### 属性绑定还是插值表达式？
@@ -1727,11 +1423,8 @@ The following binding pairs do the same thing:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-vs-interpolation" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 _Interpolation_ is a convenient alternative to _property binding_ in many cases.
 
 在多数情况下，插值表达式是更方便的备选项。
@@ -1762,11 +1455,8 @@ Imagine the following *malicious content*.
 
 
 <code-example path="template-syntax/src/app/app.component.ts" region="evil-title" title="src/app/app.component.ts" linenums="false">
-
 </code-example>
 
-
-
 Fortunately, Angular data binding is on alert for dangerous HTML.
 It [*sanitizes*](guide/security#sanitization-and-security-contexts) the values before displaying them.
 It **will not** allow HTML with script tags to leak into the browser, neither with interpolation
@@ -1778,36 +1468,26 @@ nor property binding.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="property-binding-vs-interpolation-sanitization" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Interpolation handles the script tags differently than property binding but both approaches render the
 content harmlessly.
 
 插值表达式处理 script 标签与属性绑定有所不同，但是二者都只渲染没有危害的内容。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/template-syntax/evil-title.png' alt="evil title made safe" width='500px'></img>
+<figure>
+  <img src='generated/images/guide/template-syntax/evil-title.png' alt="evil title made safe">
 </figure>
 
+<a href="#top-of-page">back to top</a>
 
-
-<p>
-  <a href="#toc">back to top</a>  <a href="#toc">回到顶部</a>
-</p>
-
-
+<a href="#top-of-page">回到顶部</a>
 
 <hr/>
 
-
-
 {@a other-bindings}
 
-
 ## Attribute, class, and style bindings
 
 ## attribute、class 和 style 绑定
@@ -1827,8 +1507,6 @@ You can set the value of an attribute directly with an **attribute binding**.
 
 <div class="l-sub-section">
 
-
-
 This is the only exception to the rule that a binding sets a target property.
 This is the only binding that creates and sets an attribute.
 
@@ -1837,8 +1515,6 @@ This is the only binding that creates and sets an attribute.
 
 </div>
 
-
-
 This guide stresses repeatedly that setting an element property with a property binding
 is always preferred to setting the attribute with a string. Why does Angular offer attribute binding?
 
@@ -1865,11 +1541,8 @@ This fact becomes painfully obvious when you write something like this.
 
 <code-example language="html">
   &lt;tr&gt;&lt;td colspan="{{1 + 1}}"&gt;Three-Four&lt;/td&gt;&lt;/tr&gt;
-
 </code-example>
 
-
-
 And you get this error:
 
 会得到这个错误：
@@ -1882,8 +1555,6 @@ And you get this error:
 
 </code-example>
 
-
-
 As the message says, the `<td>` element does not have a `colspan` property.
 It has the "colspan" *attribute*, but
 interpolation and property binding can set only *properties*, not attributes.
@@ -1910,11 +1581,8 @@ Bind `[attr.colspan]` to a calculated value:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="attrib-binding-colspan" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Here's how the table renders:
 
 这里是表格渲染出来的样子：
@@ -1932,15 +1600,12 @@ attribute 绑定的主要用例之一是设置 ARIA attribute（译注：ARIA指
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="attrib-binding-aria" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 ### Class binding
 
 ### CSS 类绑定
@@ -1965,11 +1630,8 @@ with class bindings.  Here's how to set the attribute without binding:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="class-binding-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 You can replace that with a binding to a string of the desired class names; this is an all-or-nothing, replacement binding.
 
 可以把它改写为绑定到所需 CSS 类名的绑定；这是一个或者全有或者全无的替换型绑定。
@@ -1977,11 +1639,8 @@ You can replace that with a binding to a string of the desired class names; this
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="class-binding-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Finally, you can bind to a specific class name.
 Angular adds the class when the template expression evaluates to truthy.
 It removes the class when the expression is falsy.
@@ -1991,15 +1650,10 @@ It removes the class when the expression is falsy.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="class-binding-3" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 While this is a fine way to toggle a single class name,
 the [NgClass directive](guide/template-syntax#ngClass) is usually preferred when managing multiple class names at the same time.
 
@@ -2008,12 +1662,10 @@ the [NgClass directive](guide/template-syntax#ngClass) is usually preferred when
 
 </div>
 
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 ### Style binding
 
 ### 样式绑定
@@ -2032,26 +1684,17 @@ followed by a dot (`.`) and the name of a CSS style property: `[style.style-prop
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="style-binding-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Some style binding styles have a unit extension. The following example conditionally sets the font size in  “em” and “%” units.
 
 有些样式绑定中的样式带有单位。在这里，以根据条件用 “em” 和 “%” 来设置字体大小的单位。
 
-
 <code-example path="template-syntax/src/app/app.component.html" region="style-binding-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 While this is a fine way to set a single style,
 the [NgStyle directive](guide/template-syntax#ngStyle) is generally preferred when setting several inline styles at the same time.
 
@@ -2060,12 +1703,8 @@ the [NgStyle directive](guide/template-syntax#ngStyle) is generally preferred wh
 
 </div>
 
-
-
 <div class="l-sub-section">
 
-
-
 Note that a _style property_ name can be written in either
 [dash-case](guide/glossary#dash-case), as shown above, or
 [camelCase](guide/glossary#camelcase), such as `fontSize`.
@@ -2076,15 +1715,12 @@ Note that a _style property_ name can be written in either
 
 </div>
 
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a event-binding}
 
-
 ## Event binding  ( <span class="syntax">(event)</span> )
 ## 事件绑定  ( <span class="syntax">(事件名)</span> )
 
@@ -2117,11 +1753,8 @@ the component's `onSave()` method whenever a click occurs:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="event-binding-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 ### Target event
 
 ### 目标事件
@@ -2133,22 +1766,16 @@ identifies the target event. In the following example, the target is the button'
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="event-binding-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Some people prefer the `on-` prefix alternative, known as the **canonical form**:
 
 有些人更喜欢带`on-`前缀的备选形式，称之为**规范形式**：
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="event-binding-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Element events may be the more common targets, but Angular looks first to see if the name matches an event property
 of a known directive, as it does in the following example:
 
@@ -2156,15 +1783,10 @@ of a known directive, as it does in the following example:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="event-binding-3" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 The `myClick` directive is further described in the section
 on [aliasing input/output properties](guide/template-syntax#aliasing-io).
 
@@ -2172,8 +1794,6 @@ on [aliasing input/output properties](guide/template-syntax#aliasing-io).
 
 </div>
 
-
-
 If the name fails to match an element event or an output property of a known directive,
 Angular reports an “unknown directive” error.
 
@@ -2214,11 +1834,8 @@ Consider this example:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="without-NgModel" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 This code sets the input box `value` property by binding to the `name` property.
 To listen for changes to the value, the code binds to the input box's `input` event.
 When the user makes changes, the `input` event is raised, and the binding executes
@@ -2240,15 +1857,13 @@ If the event belongs to a directive (recall that components are directives),
 
 {@a eventemitter}
 
-
 {@a custom-event}
 
-
 ### Custom events with <span class="syntax">EventEmitter</span>
 
 ### 使用 <span class="syntax">EventEmitter</span> 实现自定义事件
 
-Directives typically raise custom events with an Angular [EventEmitter](api/core/index/EventEmitter-class).
+Directives typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter).
 The directive creates an `EventEmitter` and exposes it as a property.
 The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
 Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
@@ -2272,17 +1887,11 @@ Here are the pertinent excerpts from that `HeroDetailComponent`:
 
 
 <code-example path="template-syntax/src/app/hero-detail.component.ts" linenums="false" title="src/app/hero-detail.component.ts (template)" region="template-1">
-
 </code-example>
 
-
-
 <code-example path="template-syntax/src/app/hero-detail.component.ts" linenums="false" title="src/app/hero-detail.component.ts (deleteRequest)" region="deleteRequest">
-
 </code-example>
 
-
-
 The component defines a `deleteRequest` property that returns an `EventEmitter`.
 When the user clicks *delete*, the component invokes the `delete()` method,
 telling the `EventEmitter` to emit a `Hero` object.
@@ -2296,11 +1905,8 @@ Now imagine a hosting parent component that binds to the `HeroDetailComponent`'s
 
 
 <code-example path="template-syntax/src/app/app.component.html" linenums="false" title="src/app/app.component.html (event-binding-to-component)" region="event-binding-to-component">
-
 </code-example>
 
-
-
 When the `deleteRequest` event fires, Angular calls the parent component's `deleteHero` method,
 passing the *hero-to-delete* (emitted by `HeroDetail`) in the `$event` variable.
 
@@ -2320,18 +1926,13 @@ Template statement side effects are not just OK, but expected.
 Deleting the hero updates the model, perhaps triggering other changes
 including queries and saves to a remote server.
 These changes percolate through the system and are ultimately displayed in this and other views.
-
 删除这个英雄会更新模型，还可能触发其它修改，包括向远端服务器的查询和保存。
-这些变更通过系统进行扩散，并最终显示到当前以及其它视图中。
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+这些变更通过系统进行扩散，并最终显示到当前以及其它视图中。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a two-way}
 
-
 ## Two-way binding ( <span class="syntax">[(...)]</span> )
 
 ## 双向数据绑定 ( <span class="syntax">[(...)]</span> )
@@ -2354,8 +1955,6 @@ Angular 为此提供一种特殊的_双向数据绑定_语法：**`[(x)]`**。
 
 <div class="callout is-important">
 
-
-
 <header>
   [( )] = banana in a box
 </header>
@@ -2375,8 +1974,6 @@ Visualize a *banana in a box* to remember that the parentheses go _inside_ the b
 
 </div>
 
-
-
 The `[(x)]` syntax is easy to demonstrate when the element has a settable property called `x`
 and a corresponding event named `xChange`.
 Here's a `SizerComponent` that fits the pattern.
@@ -2387,11 +1984,8 @@ It has a `size` value property and a companion `sizeChange` event:
 
 
 <code-example path="template-syntax/src/app/sizer.component.ts" title="src/app/sizer.component.ts">
-
 </code-example>
 
-
-
 The initial `size` is an input value from a property binding.
 Clicking the buttons increases or decreases the `size`, within min/max values constraints,
 and then raises (_emits_) the `sizeChange` event with the adjusted size.
@@ -2406,11 +2000,8 @@ Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the
 
 
 <code-example path="template-syntax/src/app/app.component.html" linenums="false" title="src/app/app.component.html (two-way-1)" region="two-way-1">
-
 </code-example>
 
-
-
 The `AppComponent.fontSizePx` establishes the initial `SizerComponent.size` value.
 Clicking the buttons updates the `AppComponent.fontSizePx` via the two-way binding.
 The revised `AppComponent.fontSizePx` value flows through to the _style_ binding,
@@ -2428,11 +2019,8 @@ Angular将`SizerComponent`的绑定分解成这样：
 
 
 <code-example path="template-syntax/src/app/app.component.html" linenums="false" title="src/app/app.component.html (two-way-2)" region="two-way-2">
-
 </code-example>
 
-
-
 The `$event` variable contains the payload of the `SizerComponent.sizeChange` event.
 Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons.
 
@@ -2450,17 +2038,12 @@ However, no native HTML element follows the `x` value and `xChange` event patter
 可惜，原生 HTML 元素不遵循`x`值和`xChange`事件的模式。
 
 Fortunately, the Angular [_NgModel_](guide/template-syntax#ngModel) directive is a bridge that enables two-way binding to form elements.
-
-幸运的是，Angular 以 [_NgModel_](guide/template-syntax#ngModel) 指令为桥梁，允许在表单元素上使用双向数据绑定。
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+幸运的是，Angular 以 [_NgModel_](guide/template-syntax#ngModel) 指令为桥梁，允许在表单元素上使用双向数据绑定。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a directives}
 
-
 ## Built-in directives
 
 ## 内置指令
@@ -2482,11 +2065,8 @@ Why create a directive to handle a click when you can write a simple binding suc
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="event-binding-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 You still benefit from directives that simplify complex tasks.
 Angular still ships with built-in directives; just not as many.
 You'll write your own directives, just not as many.
@@ -2503,11 +2083,8 @@ classified as either [_attribute_ directives](guide/template-syntax#attribute-di
 
 <hr/>
 
-
-
 {@a attribute-directives}
 
-
 ## Built-in _attribute_ directives
 
 ## 内置*属性型*指令
@@ -2520,7 +2097,7 @@ They are usually applied to elements as if they were HTML attributes, hence the
 它们通常会作为HTML属性的名称而应用在元素上。
 
 Many details are covered in the [_Attribute Directives_](guide/attribute-directives) guide.
-Many Angular modules such as the [`RouterModule`](guide/router "Routing and Navigation")
+Many NgMdules such as the [`RouterModule`](guide/router "Routing and Navigation")
 and the [`FormsModule`](guide/forms "Forms") define their own attribute directives.
 This section is an introduction to the most commonly used attribute directives:
 
@@ -2539,15 +2116,12 @@ This section is an introduction to the most commonly used attribute directives:
 * [`NgModel`](guide/template-syntax#ngModel) - two-way data binding to an HTML form element
 
   [`NgModel`](guide/template-syntax#ngModel) - 双向绑定到HTML表单元素
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a ngClass}
 
-
 ### NgClass
 
 You typically control how elements appear
@@ -2563,11 +2137,8 @@ A [class binding](guide/template-syntax#class-binding) is a good way to add or r
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="class-binding-3a" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 To add or remove *many* CSS classes at the same time, the `NgClass` directive may be the better choice.
 
 当想要同时添加或移除*多个* CSS 类时，`NgClass`指令可能是更好的选择。
@@ -2587,26 +2158,18 @@ Consider a `setCurrentClasses` component method that sets a component property,
 
 
 <code-example path="template-syntax/src/app/app.component.ts" region="setClasses" title="src/app/app.component.ts" linenums="false">
-
 </code-example>
 
-
-
 Adding an `ngClass` property binding to `currentClasses` sets the element's classes accordingly:  
 
 把`NgClass`属性绑定到`currentClasses`，根据它来设置此元素的CSS类：
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgClass-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 It's up to you to call `setCurrentClassess()`, both initially and when the dependent properties change.
 
 你既可以在初始化时调用`setCurrentClassess()`，也可以在所依赖的属性变化时调用。
@@ -2614,15 +2177,12 @@ It's up to you to call `setCurrentClassess()`, both initially and when the depen
 
 </div>
 
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a ngStyle}
 
-
 ### NgStyle
 You can set inline styles dynamically, based on the state of the component.
 With `NgStyle` you can set many inline styles simultaneously.
@@ -2636,11 +2196,8 @@ A [style binding](guide/template-syntax#style-binding) is an easy way to set a *
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgStyle-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 To set *many* inline styles at the same time, the `NgStyle` directive may be the better choice.
 
 如果要同时设置*多个*内联样式，`NgStyle`指令可能是更好的选择。
@@ -2658,26 +2215,18 @@ with an object that defines three styles, based on the state of three other comp
 
 
 <code-example path="template-syntax/src/app/app.component.ts" region="setStyles" title="src/app/app.component.ts" linenums="false">
-
 </code-example>
 
-
-
 Adding an `ngStyle` property binding to `currentStyles` sets the element's styles accordingly:
 
 把`NgStyle`属性绑定到`currentStyles`，以据此设置此元素的样式：
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgStyle-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 It's up to you to call `setCurrentStyles()`, both initially and when the dependent properties change.
 
 你既可以在初始化时调用`setCurrentStyles()`，也可以在所依赖的属性变化时调用。
@@ -2685,15 +2234,12 @@ It's up to you to call `setCurrentStyles()`, both initially and when the depende
 
 </div>
 
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a ngModel}
 
-
 ### NgModel - Two-way binding to form elements with <span class="syntax">[(ngModel)]</span>
 
 ### NgModel - 使用<span class="syntax">[(ngModel)]</span>双向绑定到表单元素
@@ -2709,17 +2255,14 @@ Two-way data binding with the `NgModel` directive makes that easy. Here's an exa
 
 
 <code-example path="template-syntax/src/app/app.component.html" linenums="false" title="src/app/app.component.html (NgModel-1)" region="NgModel-1">
-
 </code-example>
 
-
-
 #### _FormsModule_ is required to use _ngModel_
 
 #### 使用 `ngModel` 时需要 `FormsModule`
 
 Before using the `ngModel` directive in a two-way data binding,
-you must import the `FormsModule` and add it to the Angular module's `imports` list.
+you must import the `FormsModule` and add it to the NgModule's `imports` list.
 Learn more about the `FormsModule` and `ngModel` in the
 [Forms](guide/forms#ngModel) guide.
 
@@ -2728,15 +2271,10 @@ Learn more about the `FormsModule` and `ngModel` in the
 
 Here's how to import the `FormsModule` to make `[(ngModel)]` available.
 
-导入`FormsModule`并让`[(ngModel)]`可用的代码如下：
-
-
-<code-example path="template-syntax/src/app/app.module.1.ts" linenums="false" title="src/app/app.module.ts (FormsModule import)" region="FormsModule import">
 
+导入`FormsModule`并让`[(ngModel)]`可用的代码如下：<code-example path="template-syntax/src/app/app.module.1.ts" linenums="false" title="src/app/app.module.ts (FormsModule import)" >
 </code-example>
 
-
-
 #### Inside <span class="syntax">[(ngModel)]</span>
 
 #### <span class="syntax">[(ngModel)]</span>内幕
@@ -2749,11 +2287,8 @@ the `<input>` element's  `value` property and `input` event.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="without-NgModel" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 That's cumbersome. Who can remember which element property to set and which element event emits user changes?
 How do you extract the currently displayed text from the input box so you can update the data property?
 Who wants to look that up each time?
@@ -2767,22 +2302,17 @@ That `ngModel` directive hides these onerous details behind its own  `ngModel` i
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgModel-3" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 The `ngModel` data property sets the element's value property and the `ngModelChange` event property
 listens for changes to the element's value.
 
 `ngModel`输入属性会设置该元素的值，并通过`ngModelChange`的输出属性来监听元素值的变化。
 
 The details are specific to each kind of element and therefore the `NgModel` directive only works for an element
-supported by a [ControlValueAccessor](api/forms/index/ControlValueAccessor-interface)
+supported by a [ControlValueAccessor](api/forms/ControlValueAccessor)
 that adapts an element to this protocol.
 The `<input>` box is one of those elements.
 Angular provides *value accessors* for all of the basic HTML form elements and the
@@ -2810,8 +2340,6 @@ The [`sizer` shown above](guide/template-syntax#two-way) is an example of this t
 
 </div>
 
-
-
 Separate `ngModel` bindings is an improvement over binding to the element's native properties. You can do better.
 
 使用独立的`ngModel`绑定优于绑定到该元素的原生属性，那样我们可以做得更好。
@@ -2824,11 +2352,8 @@ with a single declaration, which it can with the `[(ngModel)]` syntax:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgModel-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Is `[(ngModel)]` all you need? Is there ever a reason to fall back to its expanded form?
 
 `[(ngModel)]`就是你需要的一切吗？有没有什么理由回退到它的展开形式？
@@ -2845,35 +2370,23 @@ The following contrived example forces the input value to uppercase:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgModel-4" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Here are all variations in action, including the uppercase version:
 
-这里是所有这些变体的动画，包括这个大写转换的版本：
 
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/template-syntax/ng-model-anim.gif' alt="NgModel variations"></img>
+这里是所有这些变体的动画，包括这个大写转换的版本：<figure >
+  <img src='generated/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations">
 </figure>
 
+<a href="#top-of-page">back to top</a>
 
-
-<p>
-  <a href="#toc">back to top</a>  <a href="#toc">回到顶部</a>
-</p>
-
-
+<a href="#top-of-page">回到顶部</a>
 
 <hr/>
 
-
-
 {@a structural-directives}
 
-
 ## Built-in _structural_ directives
 
 ## 内置*结构型*指令
@@ -2928,15 +2441,12 @@ _This_ section is an introduction to the common structural directives:
 
 <hr/>
 
-
-
 {@a ngIf}
 
-
 ### NgIf
 
 You can add or remove an element from the DOM by applying an `NgIf` directive to
-that element (called the _host elment_).
+that element (called the _host element_).
 Bind the directive to a condition expression like `isActive` in this example.
 
 通过把`NgIf`指令应用到元素上（称为*宿主元素*），我们可以往DOM中添加或从DOM中移除这个元素。
@@ -2944,15 +2454,10 @@ Bind the directive to a condition expression like `isActive` in this example.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgIf-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 <div class="alert is-critical">
 
-
-
 Don't forget the asterisk (`*`) in front of `ngIf`.
 
 别忘了`ngIf`前面的星号(`*`)。
@@ -2960,8 +2465,6 @@ Don't forget the asterisk (`*`) in front of `ngIf`.
 
 </div>
 
-
-
 When the `isActive` expression returns a truthy value, `NgIf` adds the `HeroDetailComponent` to the DOM.
 When the expression is falsy, `NgIf` removes the `HeroDetailComponent`
 from the DOM, destroying that component and all of its sub-components.
@@ -2979,11 +2482,8 @@ You can control the visibility of an element with a
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgIf-3" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Hiding an element is quite different from removing an element with `NgIf`.
 
 但隐藏子树和用`NgIf`排除子树是截然不同的。
@@ -3032,15 +2532,10 @@ The `nullHero` will never be displayed.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgIf-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 See also the
 [_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)")
 described below.
@@ -3050,15 +2545,12 @@ described below.
 
 </div>
 
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a ngFor}
 
-
 ### NgFor
 
 `NgFor` is a _repeater_ directive &mdash; a way to present a list of items.
@@ -3075,26 +2567,18 @@ Here is an example of `NgFor` applied to a simple `<div>`:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgFor-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 You can also apply an `NgFor` to a component element, as in this example:
 
 也可以把`NgFor`应用在一个组件元素上，就下例这样：
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgFor-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 <div class="alert is-critical">
 
-
-
 Don't forget the asterisk (`*`) in front of `ngFor`.
 
 不要忘了`ngFor`前面的星号 (`*`)。
@@ -3102,8 +2586,6 @@ Don't forget the asterisk (`*`) in front of `ngFor`.
 
 </div>
 
-
-
 The text assigned to `*ngFor` is the instruction that guides the repeater process.
 
 赋值给`*ngFor`的文本是用于指导重复器如何工作的指令。
@@ -3111,7 +2593,6 @@ The text assigned to `*ngFor` is the instruction that guides the repeater proces
 
 {@a microsyntax}
 
-
 #### *ngFor microsyntax
 
 #### NgFor 微语法
@@ -3141,10 +2622,8 @@ Learn about the _microsyntax_ in the [_Structural Directives_](guide/structural-
 
 {@a template-input-variable}
 
-
 {@a template-input-variables}
 
-
 ### Template input variables
 
 ### 模板输入变量
@@ -3166,11 +2645,8 @@ and then passed in a binding to the `hero` property of the `<hero-detail>` compo
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgFor-1-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Learn more about _template input variables_ in the
 [_Structural Directives_](guide/structural-directives#template-input-variable) guide.
 
@@ -3192,28 +2668,20 @@ The next example captures the `index` in a variable named `i` and displays it wi
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgFor-3" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 Learn about the other `NgFor` context values such as `last`, `even`,
-and `odd` in the [NgFor API reference](api/common/index/NgFor-directive).
+and `odd` in the [NgFor API reference](api/common/NgFor).
 
-要学习更多的*类似 index* 的值，例如`last`、`even`和`odd`，请参阅 [NgFor API 参考](api/common/index/NgFor-directive)。
+要学习更多的*类似 index* 的值，例如`last`、`even`和`odd`，请参阅 [NgFor API 参考](api/common/NgFor)。
 
 
 </div>
 
-
-
 {@a trackBy}
 
-
 #### *ngFor with _trackBy_
 
 #### 带`trackBy`的`*ngFor`
@@ -3249,22 +2717,16 @@ In this case, that value is the hero's `id`.
 
 
 <code-example path="template-syntax/src/app/app.component.ts" region="trackByHeroes" title="src/app/app.component.ts" linenums="false">
-
 </code-example>
 
-
-
 In the microsyntax expression, set `trackBy` to this method.
 
 在微语法中，把`trackBy`设置为该方法。
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="trackBy" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Here is an illustration of the _trackBy_ effect.
 "Reset heroes" creates new heroes with the same `hero.id`s.
 "Change ids" creates new heroes with new `hero.id`s.
@@ -3279,28 +2741,19 @@ Here is an illustration of the _trackBy_ effect.
   
 * With `trackBy`, only changing the `id` triggers element replacement.
 
-  有了`trackBy`，则只有修改了`id`的按钮才会触发元素替换。
 
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/template-syntax/ng-for-track-by-anim.gif' alt="trackBy"></img>
+有了`trackBy`，则只有修改了`id`的按钮才会触发元素替换。<figure >
+  <img src="generated/images/guide/template-syntax/ng-for-track-by-anim.gif" alt="trackBy">
 </figure>
 
+<a href="#top-of-page">back to top</a>
 
-
-<p>
-  <a href="#toc">back to top</a>  <a href="#toc">回到顶部</a>
-</p>
-
-
+<a href="#top-of-page">回到顶部</a>
 
 <hr/>
 
-
-
 {@a ngSwitch}
 
-
 ### The _NgSwitch_ directives
 
 ### `NgSwitch`指令
@@ -3320,17 +2773,12 @@ Angular只会把*选中的*元素放进DOM中。
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgSwitch" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/template-syntax/switch-anim.gif' alt="trackBy"></img>
+<figure>
+  <img src="generated/images/guide/template-syntax/switch-anim.gif" alt="trackBy">
 </figure>
 
-
-
 `NgSwitch` is the controller directive. Bind it to an expression that returns the *switch value*.
 The `emotion` value in this example is a string, but the switch value can be of any type.
 
@@ -3377,24 +2825,18 @@ For example, you could replace the `<confused-hero>` switch case with the follow
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgSwitch-div" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a template-reference-variable}
 
-
 {@a ref-vars}
 
-
 {@a ref-var}
 
-
 ## Template reference variables ( <span class="syntax">#var</span> )
 
 ## 模板引用变量 ( <span class="syntax">#var</span> )
@@ -3402,7 +2844,7 @@ For example, you could replace the `<confused-hero>` switch case with the follow
 
 A **template reference variable** is often a reference to a DOM element within a template.
 It can also be a reference to an Angular component or directive or a
-<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" title="MDN: Web Components">web component</a>.
+<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" title="MDN: Web Components">web component</a>.
 
 **模板引用变量**通常用来引用模板中的某个DOM元素，它还可以引用Angular组件或指令或<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" title="MDN: Web Components">Web Component</a>。
 
@@ -3414,11 +2856,8 @@ The `#phone` declares a `phone` variable on an `<input>` element.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="ref-var" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 You can refer to a template reference variable _anywhere_ in the template.
 The `phone` variable declared on this `<input>` is
 consumed in a `<button>` on the other side of the template
@@ -3428,12 +2867,9 @@ consumed in a `<button>` on the other side of the template
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="ref-phone" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
-### How a reference variable gets its value
+<h3 class="no-toc">How a reference variable gets its value</h3>
 
 ### 模板引用变量怎么得到它的值？
 
@@ -3455,11 +2891,8 @@ The following is a *simplified* version of the form example in the [Forms](guide
 
 
 <code-example path="template-syntax/src/app/hero-form.component.html" title="src/app/hero-form.component.html" linenums="false">
-
 </code-example>
 
-
-
 A template reference variable, `heroForm`, appears three times in this example, separated
 by a large amount of HTML.
 What is the value of `heroForm`?
@@ -3469,7 +2902,7 @@ What is the value of `heroForm`?
 
 If Angular hadn't taken it over when you imported the `FormsModule`,
 it would be the [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement).
-The `heroForm` is actually a reference to an Angular [NgForm](api/forms/index/NgForm-directive "API: NgForm")
+The `heroForm` is actually a reference to an Angular [NgForm](api/forms/NgForm "API: NgForm")
 directive with the ability to track the value and validity of every control in the form.
 
 如果你没有导入过`FormsModule`，Angular就不会控制这个表单，那么它就是一个[HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)实例。
@@ -3484,9 +2917,9 @@ to the parent component's `onSubmit` method.
 原生的`<form>`元素没有`form`属性，但`NgForm`指令有。这就解释了为何当`heroForm.form.valid`是无效时我们可以禁用提交按钮，
 并能把整个表单控件树传给父组件的`onSubmit`方法。
 
-### Template reference variable warning notes
+<h3 class="no-toc">Template reference variable warning notes</h3>
 
-### 关于模板引用变量的提醒
+<h3 class="no-toc">关于模板引用变量的提醒</h3>
 
 A template _reference_ variable (`#phone`) is _not_ the same as a template _input_ variable (`let phone`)
 such as you might see in an [`*ngFor`](guide/template-syntax#template-input-variable).
@@ -3510,18 +2943,14 @@ This example declares the `fax` variable as `ref-fax` instead of `#fax`.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="ref-fax" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a inputs-outputs}
 
-
 ## Input and output properties ( <span class="syntax">@Input</span> and <span class="syntax">@Output</span> )
 
 ## 输入输出属性 ( <span class="syntax">@Input</span> 和 <span class="syntax">@Output</span> )
@@ -3543,8 +2972,6 @@ These directive properties must be declared as **inputs** or **outputs**.
 
 <div class="alert is-important">
 
-
-
 Remember: All **components** are **directives**.
 
 记住：所有**组件**皆为**指令**。
@@ -3557,8 +2984,6 @@ Remember: All **components** are **directives**.
 
 <div class="l-sub-section">
 
-
-
 Note the important distinction between a data binding **target** and a data binding **source**.
 
 我们要重点突出下绑定**目标**和绑定**源**的区别。
@@ -3590,8 +3015,6 @@ You can only bind to properties that are explicitly identified as *inputs* and *
 
 </div>
 
-
-
 In the following snippet, `iconUrl` and `onSave` are data-bound members of the `AppComponent`
 and are referenced within quoted syntax to the _right_ of the equals&nbsp;(`=`).
 
@@ -3599,11 +3022,8 @@ and are referenced within quoted syntax to the _right_ of the equals&nbsp;(`=`).
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="io-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 They are *neither inputs nor outputs* of the component. They are **sources** for their bindings.
 The targets are the native `<img>` and `<button>` elements.
 
@@ -3616,11 +3036,8 @@ is the **target** of a binding on the _left_ of the equals&nbsp;(`=`).
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="io-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 Both `HeroDetailComponent.hero` and `HeroDetailComponent.deleteRequest` are on the **left side** of binding declarations.
 `HeroDetailComponent.hero` is inside brackets; it is the target of a property binding.
 `HeroDetailComponent.deleteRequest` is inside parentheses; it is the target of an event binding.
@@ -3643,15 +3060,10 @@ In the `HeroDetailComponent`, such properties are marked as input or output prop
 
 
 <code-example path="template-syntax/src/app/hero-detail.component.ts" region="input-output-1" title="src/app/hero-detail.component.ts" linenums="false">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 Alternatively, you can identify members in the `inputs` and `outputs` arrays
 of the directive metadata, as in this example:
 
@@ -3659,11 +3071,8 @@ of the directive metadata, as in this example:
 
 
 <code-example path="template-syntax/src/app/hero-detail.component.ts" region="input-output-2" title="src/app/hero-detail.component.ts" linenums="false">
-
 </code-example>
 
-
-
 You can specify an input/output property either with a decorator or in a metadata array.
 Don't do both!
 
@@ -3672,8 +3081,6 @@ Don't do both!
 
 </div>
 
-
-
 ### Input or output?
 
 ### 输入还是输出？
@@ -3686,15 +3093,11 @@ Don't do both!
 
 The terms _input_ and _output_ reflect the perspective of the target directive.
 
-_输入_和_输出_这两个词是从目标指令的角度来说的。
 
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/template-syntax/input-output.png' alt="Inputs and outputs"></img>
+_输入_和_输出_这两个词是从目标指令的角度来说的。<figure >
+  <img src="generated/images/guide/template-syntax/input-output.png" alt="Inputs and outputs">
 </figure>
 
-
-
 `HeroDetailComponent.hero` is an **input** property from the perspective of `HeroDetailComponent`
 because data flows *into* that property from a template binding expression.
 
@@ -3720,8 +3123,6 @@ because events stream *out* of that property and toward the handler in a templat
 
 </h3>
 
-
-
 Sometimes the public name of an input/output property should be different from the internal name.
 
 有时需要让输入/输出属性的公开名字不同于内部名字。
@@ -3737,11 +3138,8 @@ you expect to bind to an event property that is also called `myClick`.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="myClick" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 However, the directive name is often a poor choice for the name of a property within the directive class.
 The directive name rarely describes what the property does.
 The `myClick` directive name is not a good name for a property that emits click messages.
@@ -3764,15 +3162,10 @@ You can specify the alias for the property name by passing it into the input/out
 
 
 <code-example path="template-syntax/src/app/click.directive.ts" region="output-myClick" title="src/app/click.directive.ts" linenums="false">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 You can also alias property names in the `inputs` and `outputs` arrays.
 You write a colon-delimited (`:`) string with
 the directive property name on the *left* and the public alias on the *right*:
@@ -3782,22 +3175,16 @@ the directive property name on the *left* and the public alias on the *right*:
 
 
 <code-example path="template-syntax/src/app/click.directive.ts" region="output-myClick2" title="src/app/click.directive.ts" linenums="false">
-
 </code-example>
 
-
-
 </div>
 
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a expression-operators}
 
-
 ## Template expression operators
 
 ## 模板表达式操作符
@@ -3811,7 +3198,6 @@ for specific scenarios. The next sections cover two of these operators: _pipe_ a
 
 {@a pipe}
 
-
 ### The pipe operator ( <span class="syntax">|</span> )
 
 
@@ -3832,11 +3218,8 @@ Angular [管道](guide/pipes)对像这样的小型转换来说是个明智的选
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="pipes-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 The pipe operator passes the result of an expression on the left to a pipe function on the right.
 
 管道操作符会把它左侧的表达式结果传给它右侧的管道函数。
@@ -3847,33 +3230,24 @@ You can chain expressions through multiple pipes:
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="pipes-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 And you can also [apply parameters](guide/pipes#parameterizing-a-pipe) to a pipe:
 
 还能对它们使用参数：
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="pipes-3" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 The `json` pipe is particularly helpful for debugging bindings:
 
 `json`管道对调试绑定特别有用：
 
 
 <code-example path="template-syntax/src/app/app.component.html" linenums="false" title="src/app/app.component.html (pipes-json)" region="pipes-json">
-
 </code-example>
 
-
-
 The generated output would look something like this
 
 它生成的输出是这样的：
@@ -3884,18 +3258,14 @@ The generated output would look something like this
     "birthdate": "1970-02-25T08:00:00.000Z",
     "url": "http://www.imdb.com/title/tt0065832/",
     "rate": 325 }
-
 </code-example>
 
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
 
 <hr/>
 
-
-
 {@a safe-navigation-operator}
 
-
 ### The safe navigation operator ( <span class="syntax">?.</span> ) and null property paths
 
 ### 安全导航操作符 ( ?. ) 和空属性路径
@@ -3909,22 +3279,16 @@ Angular 的**安全导航操作符 (`?.`) **是一种流畅而便利的方式，
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="safe-2" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 What happens when the following data bound `title` property is null?
 
 如果下列数据绑定中`title`属性为空，会发生什么？
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="safe-1" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 The view still renders but the displayed value is blank; you see only "The title is" with nothing after it.
 That is reasonable behavior. At least the app doesn't crash.
 
@@ -3939,11 +3303,8 @@ that displays the `name` of a null hero.
 
 <code-example language="html">
   The null hero's name is {{nullHero.name}}
-
 </code-example>
 
-
-
 JavaScript throws a null reference error, and so does Angular:
 
 JavaScript 抛出了空引用错误，Angular 也是如此：
@@ -3951,11 +3312,8 @@ JavaScript 抛出了空引用错误，Angular 也是如此：
 
 <code-example format="nocode">
   TypeError: Cannot read property 'name' of null in [null].
-
 </code-example>
 
-
-
 Worse, the *entire view disappears*.
 
 晕，*整个视图都不见了*。
@@ -3989,11 +3347,8 @@ You could code around that problem with [*ngIf](guide/template-syntax#ngIf).
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="safe-4" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 You could try to chain parts of the property path with `&&`, knowing that the expression bails out
 when it encounters the first null.
 
@@ -4001,11 +3356,8 @@ when it encounters the first null.
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="safe-5" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 These approaches have merit but can be cumbersome, especially if the property path is long.
 Imagine guarding against a null somewhere in a long property path such as `a.b.c.d`.
 
@@ -4023,25 +3375,53 @@ Angular 安全导航操作符 (`?.`) 是在属性路径中保护空值的更加
 
 
 <code-example path="template-syntax/src/app/app.component.html" region="safe-6" title="src/app/app.component.html" linenums="false">
-
 </code-example>
 
-
-
 It works perfectly with long property paths such as `a?.b?.c?.d`.
-
-在像`a?.b?.c?.d`这样的长属性路径中，它工作得很完美。
-<a href="#toc">back to top</a><a href="#toc">回到顶部</a>
+在像`a?.b?.c?.d`这样的长属性路径中，它工作得很完美。<a href="#top-of-page">back to top</a>
 
 <hr/>
 
+{@a non-null-assertion-operator}
 
+### The non-null assertion operator ( <span class="syntax">!</span> )
+
+As of Typescript 2.0, you can enforce [strict null checking](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript") with the `--strictNullChecks` flag. TypeScript then ensures that no variable is _unintentionally_ null or undefined.
+
+In this mode, typed variables disallow null and undefined by default. The type checker throws an error if you leave a variable unassigned or try to assign null or undefined to a variable whose type disallows null and undefined.
+
+The type checker also throws an error if it can't determine whether a variable will be null or undefined at runtime.
+You may know that can't happen but the type checker doesn't know.
+You tell the type checker that it can't happen by applying the post-fix
+[_non-null assertion operator (!)_](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator "Non-null assertion operator").
+
+The _Angular_ **non-null assertion operator (`!`)** serves the same purpose in an Angular template.
+
+For example, after you use [*ngIf](guide/template-syntax#ngIf) to check that `hero` is defined, you can assert that
+`hero` properties are also defined.
+
+<code-example path="template-syntax/src/app/app.component.html" region="non-null-assertion-1" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+When the Angular compiler turns your template into TypeScript code,
+it prevents TypeScript from reporting that `hero.name` might be null or undefined.
+
+Unlike the [_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)"),
+the **non-null assertion operator** does not guard against null or undefined.
+Rather it tells the TypeScript type checker to suspend strict null checks for a specific property expression.
+
+You'll need this template operator when you turn on strict null checks. It's optional otherwise.
+
+
+<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
+
+<hr/>
 
 ## Summary
 
 ## 小结
 
-You've completed this survey of template syntax. 
+You've completed this survey of template syntax.
 Now it's time to put that knowledge to work on your own components and directives.
 
-我们完成了模板语法的概述。现在，该把如何写组件和指令的知识投入到实际工作当中了。
\ No newline at end of file
+我们完成了模板语法的概述。现在，该把如何写组件和指令的知识投入到实际工作当中了。
diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md
index 4bdf41dc29..f4a15b1904 100644
--- a/aio/content/guide/testing.md
+++ b/aio/content/guide/testing.md
@@ -1,12 +1,6 @@
-@title
-测试
-
-@intro
-Angular 应用的测试技术与实践。
-
-@description
-
+# Testing
 
+# 测试
 
 This guide offers tips and techniques for testing Angular applications.
 Though this page includes some general testing principles and techniques,
@@ -17,318 +11,6 @@ the focus is on testing applications written with Angular.
 
 {@a top}
 
-
-# Contents
-
-# 目录
-
-* [Live examples](guide/testing#live-examples "Live examples of the tests in this guide")
-
-  [在线例子](guide/testing#live-examples "本章这些测试的在线例子")
-    
-* [Introduction to Angular testing](guide/testing#testing-intro)
-
-  [Angular测试简介](guide/testing#testing-intro)
-
-  * [Tools and technologies](guide/testing#tools-and-tech)
-
-    [工具与技术](guide/testing#tools-and-tech)
-
-  * [Setup](guide/testing#setup)
-
-    [环境设置](guide/testing#setup)
-
-  * [Isolated unit tests vs. the Angular testing utilities](guide/testing#isolated-v-testing-utilities)
-
-    [独立的单元测试 vs. Angular测试工具集](guide/testing#isolated-v-testing-utilities)
-
-
-* [The first karma test](guide/testing#1st-karma-test)
-
-  [第一个Karma测试](guide/testing#1st-karma-test)
-
-  * [Run with karma](guide/testing#run-karma)
-
-    [运行Karma](guide/testing#run-karma)
-
-  * [Test debugging](guide/testing#test-debugging)
-
-    [调试测试代码](guide/testing#test-debugging)
-
-  * [Try the live example](guide/testing#live-karma-example)
-
-    [试用在线例子](guide/testing#live-karma-example)
-
-
-* [Test a component](guide/testing#simple-component-test)
-
-  [测试一个组件](guide/testing#simple-component-test)
-
-  * [`TestBed`](guide/testing#testbed)
-  
-    [`TestBed`（测试台）](guide/testing#testbed)
-
-  * [`createComponent`](guide/testing#create-component)
-
-  * [`ComponentFixture`, `DebugElement`, and `query(By.css)`](guide/testing#component-fixture)
-
-    [`ComponentFixture`, `DebugElement`, 和 `query(By.css)`](guide/testing#component-fixture)
-
-  * [The tests](guide/testing#the-tests)
-
-    [测试](guide/testing#the-tests)
-
-  * [`detectChanges`: Angular change detection within a test](guide/testing#detect-changes)
-
-    [`detectChanges`: 在测试中控制Angular的变更检测](guide/testing#detect-changes)
-
-  * [Try the live example](guide/testing#try-example)
-
-    [试试在线例子](guide/testing#try-example)
-
-  * [Automatic change detection](guide/testing#auto-detect-changes)
-
-    [自动变更检测](guide/testing#auto-detect-changes)
-
-
-* [Test a component with an external template](guide/testing#component-with-external-template)
-
-  [测试带有外部模板的组件](guide/testing#component-with-external-template)
-
-  * [The first asynchronous `beforeEach`](guide/testing#async-in-before-each)
-
-    [第一处异步代码：`beforeEach`](guide/testing#async-in-before-each)
-
-  * [`compileComponents`](guide/testing#compile-components)
-
-  * [The second synchronous `beforeEach`](guide/testing#second-before-each)
-
-    [第二处同步代码：`beforeEach`](guide/testing#second-before-each)
-
-  * [Waiting for `compileComponents`](guide/testing#waiting-compile-components)
-
-    [等待 `compileComponents`](guide/testing#waiting-compile-components)
-
-  * [Try the live example](guide/testing#live-external-template-example)
-
-    [试试在线例子](guide/testing#live-external-template-example)
-
-
-* [Test a component with a service dependency](guide/testing#component-with-dependency)
-
-  [测试依赖服务的组件](guide/testing#component-with-dependency)
-
-  * [Provide service test doubles](guide/testing#service-test-doubles)
-
-    [测试替身](guide/testing#service-test-doubles)
-
-  * [Get injected services](guide/testing#get-injected-service)
-  
-    [获取注入的服务](guide/testing#get-injected-service)
-    
-  * [`TestBed.get`](guide/testing#testbed-get)
-
-  * [Always get the service from an injector](guide/testing#service-from-injector)
-
-    [总是从注入器中取得服务](guide/testing#service-from-injector)
-
-  * [Final setup and tests](guide/testing#welcome-spec-setup)
-
-    [最终设置与测试](guide/testing#welcome-spec-setup)
-
-
-* [Test a component with an async service](guide/testing#component-with-async-service)
-
-  [测试带有异步服务的组件](guide/testing#component-with-async-service)
-
-  * [Spying on the real service](guide/testing#service-spy)
-
-    [监听真实的服务](guide/testing#service-spy)
-
-  * [Synchronous tests](guide/testing#sync-tests)
-
-    [同步测试](guide/testing#sync-tests)
-
-  * [The `async` funciton in it](guide/testing#async)
-
-    [`it`中的`async`函数](guide/testing#async)
-
-  * [`whenStable`](guide/testing#when-stable)
-
-  * [The `fakeAsync` function](guide/testing#fake-async)
-
-    [`fakeAsync` 函数](guide/testing#fake-async)
-
-  * [The `tick` function](guide/testing#tick)
-
-    [`tick`函数](guide/testing#tick)
-
-  * [`jasmine.done`](guide/testing#jasmine-done)
-
-* [Test a component with inputs and outputs](guide/testing#component-with-input-output)
-
-  [测试带有输入属性和输出属性的组件](guide/testing#component-with-input-output)
-
-  * [Test `DashboardHeroComponent` stand-alone](guide/testing#dashboard-standalone)
-
-    [单独测试`DashboardHeroComponent`](guide/testing#dashboard-standalone)
-
-  * [`triggerEventHandler`](guide/testing#trigger-event-handler)
-
-* [Test a component inside a test host component](guide/testing#component-inside-test-host)
-
-  [在宿主组件中测试组件](guide/testing#component-inside-test-host)
-
-* [Test a routed component](guide/testing#routed-component)
-
-  [测试路由组件](guide/testing#routed-component)
-
-  * [The `inject` helper function](guide/testing#inject)
-
-    [`inject`助手函数](guide/testing#inject)
-
-  * [Test a routed component with parameters](guide/testing#routed-component-w-param)
-
-    [测试带参数的路由组件](guide/testing#routed-component-w-param)
-
-  * [Create an `Observable` test double](guide/testing#stub-observable)
-
-    [创建`Observable`测试桩（Stub）](guide/testing#stub-observable)
-
-  * [Testing with the `Observable` test double](guide/testing#tests-w-observable-double)
-
-    [使用`Observable`测试桩进行测试](guide/testing#tests-w-observable-double)
-
-* [Use a `page` object to simplify setup](guide/testing#page-object)
-
-  [使用`page`对象来简化设置](guide/testing#page-object)
-
-* [Set up with module imports](guide/testing#import-module)
-
-  [设置导入了其它模块的模块](guide/testing#import-module)
-
-* [Import the feature module](guide/testing#feature-module-import)
-
-  [导入特性模块](guide/testing#feature-module-import)
-
-* [Override a component's providers](guide/testing#component-override)
-
-  [改写（Override）组件的提供商](guide/testing#component-override)
-
-  * [The `overrideComponent` method](guide/testing#override-component-method)
-
-    [`overrideComponent`方法](guide/testing#override-component-method)
-
-  * [Provide a _spy-stub (HeroDetailServiceSpy)_](guide/testing#spy-stub)
-
-    [提供一个 *监听桩*（`HeroDetailServiceSpy`）](guide/testing#spy-stub)
-
-  * [The override tests](guide/testing#override-tests)
-
-    [改写测试](guide/testing#override-tests)
-
-  * [More overrides](guide/testing#more-overrides)
-
-    [更多的改写](guide/testing#more-overrides)
-
-
-* [Test a `RouterOutlet` component](guide/testing#router-outlet-component)
-
-  [测试`RouterOutlet`组件](guide/testing#router-outlet-component)
-
-  * [Stubbing unneeded components](guide/testing#stub-component)
-  
-    [模拟不需要的组件](guide/testing#stub-component)
-    
-  * [Stubbing the `RouterLink`](guide/testing#router-link-stub)
-  
-    [模拟`RouterLink`](guide/testing#router-link-stub)
-    
-  * [`By.directive` and injected directives](guide/testing#by-directive)
-
-    [`By.directive`与注入的指令](guide/testing#by-directive)
-
-  * [What good are these tests?](guide/testing#why-stubbed-routerlink-tests)
-
-    [为什么要这样写测试？](guide/testing#why-stubbed-routerlink-tests)
-
-
-* ["Shallow component tests" with  *NO_ERRORS_SCHEMA*](guide/testing#shallow-component-test)
-
-  [使用`NO_ERRORS_SCHEMA`进行 "浅组件测试" ](guide/testing#shallow-component-test)
-
-* [Test an attribute directive](guide/testing#attribute-directive)
-
-  [测试属性型指令](guide/testing#attribute-directive)
-
-* [Isolated unit tests](guide/testing#isolated-unit-tests "Unit testing without the Angular testing utilities")
-
-  [独立的单元测试](guide/testing#isolated-unit-tests "不使用Angular测试工具集的单元测试方式")
-
-  * [Services](guide/testing#isolated-service-tests)
-  
-    [服务](guide/testing#isolated-service-tests)
-    
-  * [Services with dependencies](guide/testing#services-with-dependencies)
-
-    [带依赖的服务](guide/testing#services-with-dependencies)
-
-  * [Pipes](guide/testing#isolated-pipe-tests)
-  
-    [管道](guide/testing#isolated-pipe-tests)
-    
-  * [Write Angular tests too](guide/testing#write-tests)
-
-    [写Angular测试](guide/testing#write-tests)
-
-  * [Components](guide/testing#isolated-component-tests)
-
-    [组件](guide/testing#isolated-component-tests)
-
-
-* [Angular testing utility APIs](guide/testing#atu-apis)
-
-  [Angular单元测试工具类 API ](guide/testing#atu-apis)
-
-  * [`TestBed` class summary](guide/testing#testbed-class-summary)
-
-    [`TestBed`总结](guide/testing#testbed-class-summary)
-
-  * [The `ComponentFixture`](guide/testing#component-fixture-api-summary)
-
-    [`ComponentFixture`总结](guide/testing#component-fixture-api-summary)
-
-  * [`ComponentFixture` properties](guide/testing#component-fixture-properties)
-
-    [`ComponentFixture`的属性](guide/testing#component-fixture-properties)
-
-  * [The `ComponentFixture` methods](guide/testing#component-fixture-methods)
-
-    [`ComponentFixture`方法](guide/testing#component-fixture-methods)
-
-  * [`DebugElement`](guide/testing#debug-element-details)
-
-    [`DebugElement`详情](guide/testing#debug-element-details)
-
-
-* [Test environment setup files](guide/testing#setup-files)
-
-  [测试环境设置所需的文件](guide/testing#setup-files)
-
-  * [npm packages](guide/testing#npm-packages)
-
-    [npm包](guide/testing#npm-packages)
-
-
-* [FAQ: Frequently asked questions](guide/testing#faq "Frequently asked questions")
-
-  [常见问题（FAQ）](guide/testing#faq "常见问题")
-
-
-It’s a big agenda. Fortunately, you can learn a little bit at a time and put each lesson to use.
-
-以上主题繁多。幸运的是，你可以慢慢地阅读并立刻应用每一个主题。
-
 ## Live examples
 
 ## 在线例子
@@ -577,7 +259,7 @@ There are two fast paths to getting started with unit testing.
     遵循[环境设置](guide/setup "环境设置")中给出的步骤开始一个新项目。
 
 1. Start a new project with the
-<a href="https://github.com/angular/angular-cli/blob/master/README.md" target="_blank" title="Angular CLI">Angular CLI</a>.
+<a href="https://github.com/angular/angular-cli/blob/master/README.md" title="Angular CLI">Angular CLI</a>.
 
     使用[Angular CLI](https://github.com/angular/angular-cli/blob/master/README.md)创建新的项目。
 
@@ -598,7 +280,7 @@ For a discussion of the unit testing setup files, [see below](guide/testing#setu
 {@a isolated-v-testing-utilities}
 
 
-### Isolated unit tests vs. the Angular testing utilites
+### Isolated unit tests vs. the Angular testing utilities
 
 ### 独立单元测试 vs. Angular测试工具集
 
@@ -734,8 +416,8 @@ After a few moments, karma opens a browser and starts writing to the console.
 
 等一小段时间后，Karma便打开浏览器并开始向控制台输出。
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/testing/karma-browser.png' style="width:400px;" alt="Karma browser"></img>
+<figure>
+  <img src='generated/images/guide/testing/karma-browser.png' alt="Karma browser">
 </figure>
 
 
@@ -859,8 +541,8 @@ Debug specs in the browser in the same way thatyou debug an application.
     刷新浏览器...然后它就会停在断点上。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging"></img>
+<figure>
+  <img src='generated/images/guide/testing/karma-1st-spec-debug.png' alt="Karma debugging">
 </figure>
 
 
@@ -962,7 +644,7 @@ tailored specifically for this battery of tests.
 其效果是，你可以把被测试的组件从原有的应用模块中剥离出来，把它附加到一个动态生成的Angular测试模块上，而该测试模块可以为这些测试进行特殊裁剪。
 
 The `configureTestingModule` method takes an `@NgModule`-like metadata object.
-The metadata object can have most of the properties of a normal [Angular module](guide/ngmodule).
+The metadata object can have most of the properties of a normal [NgModule](guide/ngmodule).
 
 `configureTestingModule`方法接受一个类似`@NgModule`的元数据对象。这个元数据对象具有标准[Angular模块](guide/ngmodule)的大多数属性。
 
@@ -1091,7 +773,7 @@ predicate查询接受`DebugElement`参数，如果元素符合选择条件便返
 
 The **`By`** class is an Angular testing utility that produces useful predicates.
 Its `By.css` static method produces a
-<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors" target="_blank">standard CSS selector</a>
+<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">standard CSS selector</a>
 predicate that filters the same way as a jQuery selector.
 
 **`By`**类是Angular测试工具之一，它生成有用的predicate。
@@ -1423,7 +1105,7 @@ before calling `TestBed.createComponent` to instantiate the _component-under-tes
 
 
 
-Calling `compileComponents` closes the current `TestBed` instance is further configuration.
+Calling `compileComponents` closes the current `TestBed` instance to further configuration.
 You cannot call any more `TestBed` configuration methods, not `configureTestingModule`
 nor any of the `override...` methods. The `TestBed` throws an error if you try.
 
@@ -1479,6 +1161,8 @@ The two `beforeEach` calls are widely preferred.
 
 大多数开发人员会觉得这样不易读，因此，更多采用的还是写两个`beforeEach`调用的方式。
 
+{@a live-external-template-example}
+
 ### Try the live example
 
 ### 试试在线例子
@@ -1727,7 +1411,7 @@ The first is a sanity test; it confirms that the stubbed `UserService` is called
 
 
 
-The second parameter to the Jasmine `it` (e.g., `'expected name'`) is an optional addendum.
+The second parameter to the Jasmine matcher (e.g., `'expected name'`) is an optional addendum.
 If the expectation fails, Jasmine displays this addendum after the expectation failure message.
 In a spec with multiple expectations, it can help clarify what went wrong and which expectation failed . 
 
@@ -2373,7 +2057,7 @@ Make that easy by encapsulating the _click-triggering_ process in a helper such
 
 The first parameter is the _element-to-click_. If you wish, you can pass a
 custom event object as the second parameter. The default is a (partial)
-<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button" target="_blank">left-button mouse event object</a>
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button">left-button mouse event object</a>
 accepted by many handlers including the `RouterLink` directive.
 
 第一个参数是**用来点击的元素**。如果你愿意，可以将自定义的事件对象传递给第二个参数。
@@ -2818,7 +2502,7 @@ Notable features of this stub are:
 
   这个stub类只实现`ActivatedRoute`的两个功能：`params`和`snapshot.params`。
 
-* <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md" target="_blank">_BehaviorSubject_</a>
+* <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md">_BehaviorSubject_</a>
 drives the stub's `params` _Observable_ and returns the same value to every `params` subscriber until it's given a new value.
 
   <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md" target="_blank">_BehaviorSubject_</a>驱使这个stub类的`params`可观察对象，并为每个`params`的订阅者返回同样的值，直到它接受到新值。
@@ -2961,8 +2645,8 @@ The `HeroDetailComponent` is a simple view with a title, two hero fields, and tw
 `HeroDetailComponent`是带有标题、两个英雄字段和两个按钮的简单视图。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/testing/hero-detail.component.png' alt="HeroDetailComponent in action"></img>
+<figure>
+  <img src='generated/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action">
 </figure>
 
 
@@ -3804,8 +3488,8 @@ A better solution is to create an artificial test component that demonstrates al
 
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action"></img>
+<figure>
+  <img src='generated/images/guide/testing/highlight-directive-spec.png' alt="HighlightDirective spec in action">
 </figure>
 
 
@@ -3842,7 +3526,7 @@ A few techniques are noteworthy:
 
   当**已知元素类型**时，`By.directive`是一种获取拥有这个指令的元素的好方法。
 
-* The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" target="_blank">`:not` pseudo-class</a>
+* The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not">`:not` pseudo-class</a>
 in `By.css('h2:not([highlight])')` helps find `<h2>` elements that _do not_ have the directive.
 `By.css('*:not([highlight])')` finds _any_ element that does not have the directive.
 
@@ -4325,17 +4009,14 @@ Here's a summary of the stand-alone functions, in order of likely utility:
 
       Simulates the passage of time and the completion of pending asynchronous activities
       by flushing both _timer_ and _micro-task_ queues within the _fakeAsync test zone_.
-
       在**fakeAsync测试区域**内触发**计时器**和**微任务**队列，以模拟时间的推移和未完成异步任务的完成。
-      
 
 <div class="l-sub-section">
 
 
 
       The curious, dedicated reader might enjoy this lengthy blog post,
-      "<a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/"
-      target="_blank">_Tasks, microtasks, queues and schedules_</a>".
+      ["_Tasks, microtasks, queues and schedules_"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/).
 
       好奇和执着的读者可能会喜欢这篇长博客：
       "<a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/"
@@ -4531,6 +4212,7 @@ appropriate to the method, that is, the parameter of an `@NgModule`,
 
 
 {@a testbed-methods}
+{@a testbed-api-summary}
 
 
 The `TestBed` API consists of static class methods that either update or reference a _global_ instance of the`TestBed`.
@@ -5318,9 +5000,7 @@ Here are the most useful `DebugElement` members for testers, in approximate orde
 
 
       The immediate `DebugElement` children. Walk the tree by descending through `children`.
-
       `DebugElement`的直接子级。通过`children`来降序探索元素树。
-      
 
 <div class="l-sub-section">
 
@@ -5812,4 +5492,4 @@ It's often better to create an appropriate folder for them in the `tests` direct
 Of course specs that test the test helpers belong in the `test` folder,
 next to their corresponding helper files.
 
-当然，**测试助手对象**的测试spec文件也属于`test`目录，与它们对应的助手文件相邻。
\ No newline at end of file
+当然，**测试助手对象**的测试spec文件也属于`test`目录，与它们对应的助手文件相邻。
diff --git a/aio/content/guide/ts-to-js.md b/aio/content/guide/ts-to-js.md
index f8cf7df313..64925c6902 100644
--- a/aio/content/guide/ts-to-js.md
+++ b/aio/content/guide/ts-to-js.md
@@ -1,11 +1,10 @@
-@title
-从 TypeScript 到 JavaScript
+# TypeScript to JavaScript
 
-@intro
-把 Angular 的 TypeScript 范例转换为 ES6 和 ES5 JavaScript.
+# 从 TypeScript 到 JavaScript
 
-@description
+## Introduction
 
+## 简介
 
 Anything you can do with Angular in _TypeScript_, you can also do
 in JavaScript. Translating from one language to the other is mostly a
@@ -20,66 +19,14 @@ This cookbook contains recipes for translating _TypeScript_
 code examples to _ES6_ and to _ES5_ so that JavaScript developers
 can read and write Angular apps in their preferred dialect.
 
-_TypeScript_ 在 Angular 开发中比较流行。
-互联网上和本网站中的大多数范例都是用 _TypeScript_ 写的。
+`TypeScript` 在 Angular 开发中比较流行。
+互联网上和本网站中的大多数范例都是用 `TypeScript` 写的。
+这本烹饪宝典会教你如何把 `TypeScript` 代码的例子翻译成 `ES6` 和 `ES5` 以便 JavaScript 的开发者可以用自己喜欢的语言来写 Angular 应用。
 
+Run and compare the live <live-example name="ts-to-js/ts">TypeScript</live-example> and <live-example name="ts-to-js/js">JavaScript</live-example>
+code shown in this cookbook.
 
-{@a toc}
-
-
-## Table of contents
-
-## 目录
-
-* [_TypeScript_ to _ES6_ to _ES5_](guide/ts-to-js#from-ts)<br>
-
-  [_TypeScript_ 到 _ES6_ 到 _ES5_](guide/ts-to-js#from-ts)<br>
-
-* [Modularity: imports and exports](guide/ts-to-js#modularity)<br>
-
-  [模块化：导入和导出](guide/ts-to-js#modularity)<br>
-
-* [Classes and Class Metadata](guide/ts-to-js#class-metadata)<br>
-
-  [类和类的元数据](guide/ts-to-js#class-metadata)<br>
-
-* [_ES5_ DSL](guide/ts-to-js#dsl)<br>
-
-  [_ES5_ 领域专用语言](guide/ts-to-js#dsl)<br>
-
-* [Interfaces](guide/ts-to-js#interfaces)<br>
-
-  [接口](guide/ts-to-js#interfaces)<br>
-
-* [Input and Output Metadata](guide/ts-to-js#io-decorators)<br>
-
-  [输入和输出元数据](guide/ts-to-js#io-decorators)<br>
-
-* [Dependency Injection](guide/ts-to-js#dependency-injection)<br>
-
-  [依赖注入](guide/ts-to-js#dependency-injection)<br>
-
-* [Host Binding](guide/ts-to-js#host-binding)<br>
-
-  [宿主绑定](guide/ts-to-js#host-binding)<br>
-
-* [View and Child Decorators](guide/ts-to-js#view-child-decorators)<br>
-
-  [视图和子组件装饰器](guide/ts-to-js#view-child-decorators)<br>
-
-* [AOT compilation in _TypeScript_ Only](guide/ts-to-js#aot)<br>
-
-  [只用于 _TypeScript_ 的预编译](guide/ts-to-js#aot)<br>
-
-
-**Run and compare the live <live-example name="cb-ts-to-js">TypeScript</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
-code shown in this cookbook.**
-
-运行在线例子，比较 <live-example name="cb-ts-to-js">TypeScript</live-example> 版和 <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example> 版的代码。
-
-
-{@a from-ts}
-
+运行并比较本章显示的在线例子的 <live-example name="ts-to-js/ts">TypeScript</live-example> 版和 <live-example name="ts-to-js/js">JavaScript</live-example> 版。
 
 
 ## _TypeScript_ to _ES6_ to _ES5_
@@ -87,27 +34,27 @@ code shown in this cookbook.**
 ##_TypeScript_ 到 _ES6_ 到 _ES5_
 
 _TypeScript_
-<a href="https://www.typescriptlang.org" target="_blank" title='"TypeScript is a typed, superset of JavaScript"'>is a typed superset of _ES6 JavaScript_</a>.
+<a href="https://www.typescriptlang.org" title='"TypeScript is a typed, superset of JavaScript"'>is a typed superset of _ES6 JavaScript_</a>.
 _ES6 JavaScript_ is a superset of _ES5 JavaScript_. _ES5_ is the kind of JavaScript that runs natively in all modern browsers.
 The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features.
 
 _TypeScript_ <a href="https://www.typescriptlang.org" target="_blank" title='"TypeScript 是类型化的 JavaScript 的超集"'>是 _ES6 JavaScript_ 类型化的超集</a>。_ES6 JavaScript_ 是 _ES5 JavaScript_ 的超集。_ES5_ 是可以在所有现代浏览器中运行的 JavaScript。
 
-The downgrade progression is
+The downgrade progression is as follows:
 
 降级的过程是
 
-* _TypeScript_ to _ES6-with-decorators_
+* _TypeScript_ to _ES6-with-decorators_.
 
-  _TypeScript_ 降级到 _带装饰器的 ES6_
+  _TypeScript_ 降级到 _带装饰器的 ES6_。
 
-* _ES6-with-decorators_ to _ES6-without-decorators_ ("_plain ES6_")
+* _ES6-with-decorators_ to _ES6-without-decorators_ ("_plain ES6_").
 
-  _带装饰器的 ES6_ 降级到 _没有装饰器的 ES6_ (“_普通 ES6_”)
+  _带装饰器的 ES6_ 降级到 _没有装饰器的 ES6_ (“_普通 ES6_”)。
 
-* _ES6-without-decorators_ to _ES5_
+* _ES6-without-decorators_ to _ES5_.
 
-  _没有装饰器的 ES6_ 降级到 _ES5_
+  _没有装饰器的 ES6_ 降级到 _ES5_。
 
 When translating from _TypeScript_ to _ES6-with-decorators_, remove
 [class property access modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
@@ -115,9 +62,8 @@ such as `public` and `private`.
 Remove most of the
 [type declarations](https://www.typescriptlang.org/docs/handbook/basic-types.html),
 such as `:string` and `:boolean`
-but **keep the constructor parameter types which are used for dependency injection**.
-
- _TypeScript_ 翻译到 _带装饰器的 ES6_ 时，移除了[类属性访问修饰符](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)，如`public`和`private`。
+but **keep the constructor parameter types, which are used for dependency injection**.
+_TypeScript_ 翻译到 _带装饰器的 ES6_ 时，移除了[类属性访问修饰符](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)，如`public`和`private`。
 移除了大部分的[类型声明](https://www.typescriptlang.org/docs/handbook/basic-types.html)，如`:string`和`:boolean`。
 但**保留了用于依赖注入的构造函数参数类型**。
 
@@ -147,8 +93,6 @@ To use decorators and annotations with Babel, install the
 
 {@a modularity}
 
-
-
 ## Importing and Exporting
 
 ## 导入和导出
@@ -161,7 +105,7 @@ In both _TypeScript_ and _ES6_, you import Angular classes, functions, and other
 
 在 _TypeScript_ 和 _ES6_ 中，可以使用 _ES6_ `import`语句导入 Angular 类、函数和其它成员。
 
-In _ES5_, you access the Angular entities of the [the Angular packages](glossary#scoped-package)
+In _ES5_, you access the Angular entities of the [the Angular packages](guide/glossary#scoped-package)
 through the global `ng` object.
 Anything you can import from `@angular` is a nested member of this `ng` object:
 
@@ -170,28 +114,17 @@ Anything you can import from `@angular` is a nested member of this `ng` object:
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/app.module.ts" region="ng2import">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/app.module.ts" region="ng2import">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/app.module.es6" region="ng2import">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/app.module.es6" region="ng2import">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/app.module.es6" region="ng2import">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/app.module.es6" region="ng2import">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/app.module.js" region="ng2import">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/app.module.js" region="ng2import">
   </code-pane>
-
 </code-tabs>
 
-
-
-### Exporting Application Code
+### Exporting application code
 
 ### 导出应用代码
 
@@ -209,10 +142,8 @@ _ES5_ 不支持模块。在 Angular _ES5_ 应用中，需要在`index.html`中
 
 <div class="alert is-important">
 
-
-
-The order of `<script>` tags is often significant.
-You must load a file that defines a public JavaScript entity before a file that references that entity.
+  The order of `<script>` tags is often significant.
+  You must load a file that defines a public JavaScript entity before a file that references that entity.
 
 `<script>`标签的顺序通常很重要。
 必须在引用实体的文件之前，加载定义该公共 JavaScript 实体的文件。
@@ -220,11 +151,9 @@ You must load a file that defines a public JavaScript entity before a file that
 
 </div>
 
-
-
 The best practice in _ES5_ is to create a form of modularity that avoids polluting the global scope.
 Add one application namespace object such as `app` to the global `document`.
-Then each code file "exports" public entities by attaching them to that namespace object, e.g., `app.HeroComponent`.
+Then each code file "exports" public entities by attaching them to that namespace object, for example, `app.HeroComponent`.
 You could factor a large application into several sub-namespaces
 which leads to "exports" along the lines of `app.heroQueries.HeroComponent`.
 
@@ -246,28 +175,17 @@ Here is a `HeroComponent` as it might be defined and "exported" in each of the f
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero.component.ts" region="appexport">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero.component.ts" region="appexport">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="appexport">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="appexport">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/hero.component.es6" region="appexport">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero.component.es6" region="appexport">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/hero.component.js" region="appexport">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero.component.js" region="appexport">
   </code-pane>
-
 </code-tabs>
 
-
-
-### Importing Application Code
+### Importing application Code
 
 ### 导入应用代码
 
@@ -281,35 +199,22 @@ In _ES5_ you use the shared namespace object to access "exported" entities from
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/app.module.ts" region="appimport">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/app.module.ts" region="appimport">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/app.module.es6" region="appimport">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/app.module.es6" region="appimport">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/app.module.es6" region="appimport">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/app.module.es6" region="appimport">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/app.module.js" region="appimport">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/app.module.js" region="appimport">
   </code-pane>
-
 </code-tabs>
 
-
-
 <div class="alert is-helpful">
 
-
-
-Alternatively, you can use a module loader such as Webpack or
-Browserify in an Angular JavaScript project. In such a project, you would
-use _CommonJS_ modules and the `require` function to load Angular framework code.
-Then use `module.exports` and `require` to export and import application  code.
+  Alternatively, you can use a module loader such as Webpack or
+  Browserify in an Angular JavaScript project. In such a project, you   would
+  use _CommonJS_ modules and the `require` function to load Angular   framework code.
+  Then use `module.exports` and `require` to export and import  application  code.
 
 还可以在 Angular JavaScript 项目中使用模块加载器，如 Webpack 或 Browserify。
 在这样的项目中，使用 _CommonJS_ 模块和`require`函数来加载 Angular 框架代码。
@@ -318,12 +223,8 @@ Then use `module.exports` and `require` to export and import application  code.
 
 </div>
 
-
-
 {@a class-metadata}
 
-
-
 ## Classes and Class Metadata
 
 ## 类和类的元数据
@@ -343,7 +244,7 @@ Remove these modifiers when translating to JavaScript.
 _TypeScript_ 类的属性和方法参数可以用访问修饰符`private`、`internal`和`public`标记。
 当翻译成 JavaScript 时，移除这些修饰符。
 
-Most type declarations (e.g, `:string` and `:boolean`) should be removed when translating to JavaScript.
+Most type declarations, for example, `:string` and `:boolean`, should be removed when translating to JavaScript.
 When translating to _ES6-with-decorators_, ***do not remove types from constructor parameters!***
 
 当翻译成 JavaScript 时，移除大多数类型声明（如，`:string`和`:boolean`）。
@@ -370,27 +271,16 @@ _ES5_ JavaScript 没有类。
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero.component.ts" region="class">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero.component.ts" region="class">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="class">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="class">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/hero.component.es6" region="class">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero.component.es6" region="class">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/hero.component.js" region="constructorproto">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero.component.js" region="constructorproto">
   </code-pane>
-
 </code-tabs>
 
-
-
 ### Metadata
 
 ### 元数据
@@ -398,7 +288,7 @@ _ES5_ JavaScript 没有类。
 When writing in _TypeScript_ or _ES6-with-decorators_,
 provide configuration and metadata by adorning a class with one or more *decorators*.
 For example, you supply metadata to a component class by preceding its definition with a
-[`@Component`](api/core/index/Component-decorator) decorator function whose
+[`@Component`](api/core/Component) decorator function whose
 argument is an object literal with metadata properties.
 
 当用 _TypeScript_ 或 _带装饰器的 ES6_ 编写代码时，使用一个或多个*装饰器 (decorator)* 来修饰类，
@@ -419,28 +309,17 @@ See these variations side-by-side:
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero.component.ts" region="metadata">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero.component.ts" region="metadata">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="metadata">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="metadata">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/hero.component.es6" region="metadata">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero.component.es6" region="metadata">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/hero.component.js" region="metadata">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero.component.js" region="metadata">
   </code-pane>
-
 </code-tabs>
 
-
-
-***External Template file***
+## External template file
 
 ***外部模块文件***
 
@@ -449,39 +328,25 @@ A large component template is often kept in a separate template file.
 大的组件模板通常是放在独立的文件中。
 
 
-<code-example path="cb-ts-to-js/ts/src/app/hero-title.component.html" title="src/app/hero-title.component.html" linenums="false">
-
+<code-example path="ts-to-js/ts/src/app/hero-title.component.html" title="src/app/hero-title.component.html" linenums="false">
 </code-example>
 
-
-
-The component (`HeroTitleComponent` in this case) then references the template file in its metadata `templateUrl` property:
+The component, `HeroTitleComponent` in this case, then references the template file in its metadata `templateUrl` property:
 
 接着，组件（这里是`HeroTitleComponent`）在它的元数据`templateUrl`属性中引用该模板文件：
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero-title.component.ts" region="templateUrl">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-title.component.ts" region="templateUrl">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6" region="templateUrl">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-title.component.es6" region="templateUrl">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/hero-title.component.es6" region="templateUrl">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-title.component.es6" region="templateUrl">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/hero-title.component.js" region="templateUrl">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-title.component.js" region="templateUrl">
   </code-pane>
-
 </code-tabs>
 
-
-
 Note that both the _TypeScript_ and _ES6_ `templateUrl` properties identify the location of the template file _relative to the component module_.
 
 注意，_TypeScript_ 和两个_ES6_的`templateUrl`属性_相对于组件模块_来标识模板文件的位置。
@@ -489,8 +354,6 @@ Note that both the _TypeScript_ and _ES6_ `templateUrl` properties identify the
 
 {@a dsl}
 
-
-
 ## _ES5_ DSL
 
 ## _ES5_ 领域专用语言
@@ -506,9 +369,9 @@ This _API_ (_Application Programming Interface_) is commonly known as the _ES5 D
 
 这个 _API_ (_Application Programming Interface，应用编程接口_) 通常称作 _ES5 DSL_ (_Domain Specific Language，领域专用语言_)。
 
-Set an application namespace property (e.g., `app.HeroDslComponent`) to the result of an `ng.core.Component` function call.
+Set an application namespace property, for example, `app.HeroDslComponent`, to the result of an `ng.core.Component` function call.
 Pass the same metadata object to `ng.core.Component` as you did before.
-Then chain a call to the `Class` method which takes an object defining the class constructor and instance methods.
+Then chain a call to the `Class()` method which takes an object defining the class constructor and instance methods.
 
 把`ng.core.Component`函数调用的结果设置到应用命名空间属性，如`app.HeroDslComponent`。
 向`ng.core.Component`传递与之前一样的元数据对象。
@@ -521,47 +384,27 @@ next to the original _ES5_ version for comparison:
 
 
 <code-tabs>
-
-  <code-pane title="ES5 JavaScript with DSL" path="cb-ts-to-js/js/src/app/hero.component.js" region="dsl">
-
+  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero.component.js" region="dsl">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/hero.component.js">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero.component.js">
   </code-pane>
-
 </code-tabs>
 
-
+{@a name-constructor}
 
 <div class="callout is-helpful">
 
+  A **named** constructor displays clearly in the console log
+  if the component throws a runtime error.
+  An **unnamed** constructor displays as an anonymous function, for   example, `class0`,
+  which is impossible to find in the source code.
 
-
-<header>
-  Name the constructor
-</header>
-
-
-
-<header>
-  命名构造函数
-</header>
-
-
-
-A **named** constructor displays clearly in the console log
-if the component throws a runtime error.
-An **unnamed** constructor displays as an anonymous function (e.g., `class0`)
-which is impossible to find in the source code.
-
-如果组件抛出运行时异常，**命名**的构造函数在控制台日志中显示得更清楚。
-**未命名**的构造函数显示为匿名函数（如，`class0`），不可能在源代码中找到它。
-
+  如果组件抛出运行时异常，**命名**的构造函数在控制台日志中显示得更清楚。
+  **未命名**的构造函数显示为匿名函数（如，`class0`），不可能在源代码中找到它。
 
 </div>
 
-
+{@a getters-setters}
 
 ### Properties with getters and setters
 
@@ -575,15 +418,12 @@ _TypeScript_ 和 _ES6_ 支持 getter 和 setter。
 下面是 _TypeScript_ 只读属性的例子，它有一个 getter，为下一次点击状态准备切换按钮的标签：
 
 
-<code-example path="cb-ts-to-js/ts/src/app/hero-queries.component.ts" region="defined-property" title="ts/src/app/hero-queries.component.ts" linenums="false">
-
+<code-example path="ts-to-js/ts/src/app/hero-queries.component.ts" region="defined-property" title="ts/src/app/hero-queries.component.ts" linenums="false">
 </code-example>
 
-
-
 This _TypeScript_ "getter" property is transpiled to an _ES5_
 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"
-   target="_blank" title="Defined Properties">defined property</a>.
+   title="Defined Properties">defined property</a>.
 The _ES5 DSL_ does not support _defined properties_ directly
 but you can still create them by extracting the "class" prototype and
 adding the _defined property_ in raw JavaScript like this:
@@ -593,11 +433,10 @@ adding the _defined property_ in raw JavaScript like this:
 _ES5 DSL_ 不直接支持_已定义属性_，你仍可提取“类”原型，象下面这样添加_已定义属性_：
 
 
-<code-example path="cb-ts-to-js/js/src/app/hero-queries.component.js" region="defined-property" title="js/src/app/hero-queries.component.ts" linenums="false">
-
+<code-example path="ts-to-js/js/src/app/hero-queries.component.js" region="defined-property" title="js/src/app/hero-queries.component.ts" linenums="false">
 </code-example>
 
-
+{@a dsl-other}
 
 ### DSL for other classes
 
@@ -617,8 +456,6 @@ You can define a directive with `ng.core.Directive`:
   });
 </code-example>
 
-
-
 and a pipe with `ng.core.Pipe`:
 
 用`ng.core.Pipe`添加一个管道：
@@ -630,21 +467,16 @@ and a pipe with `ng.core.Pipe`:
   }).Class({
     ...
   });
-
 </code-example>
 
-
-
 {@a interfaces}
 
-
-
 ## Interfaces
 
 ## 接口
 
 A _TypeScript_ interface helps ensure that a class implements the interface's members correctly.
-We strongly recommend Angular interfaces where appropriate.
+Always try to use Angular interfaces where appropriate.
 For example, the component class that implements the `ngOnInit` lifecycle hook method
 should implement the `OnInit` interface.
 
@@ -662,35 +494,20 @@ _TypeScript_ 接口只是为了方便开发人员，Angular 在运行时并不
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero-lifecycle.component.ts">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-lifecycle.component.ts">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/hero-lifecycle.component.es6">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-lifecycle.component.es6">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/hero-lifecycle.component.js">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-lifecycle.component.js">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript with DSL" path="cb-ts-to-js/js/src/app/hero-lifecycle.component.js" region="dsl">
-
+  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-lifecycle.component.js" region="dsl">
   </code-pane>
-
 </code-tabs>
 
-
-
 {@a io-decorators}
 
-
-
 ## Input and Output Metadata
 
 ## 输入和输出元数据
@@ -726,33 +543,20 @@ combined in the metadata `inputs` and `outputs` _arrays_.
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/confirm.component.ts">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/confirm.component.ts">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/confirm.component.es6">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/confirm.component.es6">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/confirm.component.es6">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/confirm.component.js">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/confirm.component.js">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript with DSL" path="cb-ts-to-js/js/src/app/confirm.component.js" region="dsl">
-
+  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/confirm.component.js" region="dsl">
   </code-pane>
-
 </code-tabs>
 
-
-
-In the previous example, one of the public-facing binding names (`cancelMsg`)
-differs from the corresponding class property name (`notOkMsg`).
+In the previous example, one of the public-facing binding names, `cancelMsg`,
+differs from the corresponding class property name, `notOkMsg`.
 That's OK but you must tell Angular about it so that it can map an external binding of `cancelMsg`
 to the component's `notOkMsg` property.
 
@@ -768,9 +572,10 @@ In _ES5_ and _plain ES6_ code, convey this pairing with the `propertyName: bindi
 
 在 _ES5_ 或 _普通 ES6_ 中，用`propertyName: bindingName`语法表示在类的元数据中。
 
+{@a dependency-injection}
 
 
-## Dependency Injection
+## Dependency injection
 
 ## 依赖注入
 
@@ -786,7 +591,9 @@ The developer must tell Angular what to inject into each parameter.
 
 开发人员必须告诉 Angular 向每个参数中注入什么。
 
-### Injection by Class Type
+{@a injection-class-type}
+
+### Injection by class type
 
 ### 按类的类型注入
 
@@ -796,7 +603,7 @@ to the class associated with the service to inject.
 在 _TypeScript_ 和 _带装饰器的 ES6_ 中，最简单和流行的技术是把构造函数参数的类型设置为待注入服务的类。
 
 The _TypeScript_ transpiler writes parameter type information into the generated JavaScript.
-Angular reads that information at runtime and locates the corresponding service in the appropriate _Injector_..
+Angular reads that information at runtime and locates the corresponding service in the appropriate _Injector_.
 The _ES6-with-decorators_ transpiler does essentially the same thing using the same parameter-typing syntax.
 
 _TypeScript_ 转译器把参数类型信息写进生成的 JavaScript。
@@ -809,17 +616,13 @@ Each item in the array specifies the service's injection token.
 _ES5_ 或 _普通 ES6_ 缺少类型，必须向构造函数附加**`parameters`**数组来标识“可注入对象”。
 数组中的每一项指定一个服务的注入令牌。
 
-As with _TypeScript_ the most popular token is a class,
+As with _TypeScript_, the most popular token is a class,
 or rather a _constructor function_ that represents a class in _ES5_ and _plain ES6_.
 The format of the `parameters` array varies:
 
 _TypeScript_ 中，最常用的令牌是类，而_ES5_ 和 _普通 ES6_ 使用_构造函数_表示一个类。
-因此，`parameters`数组会有所不同：
-
-* _plain ES6_ &mdash; nest each constructor function in a sub-array.
-
-  _普通 ES6_ &mdash; 函数构造嵌套在一个子数组中。
-
+因此，`parameters`数组会有所不同：* _Plain ES6_ &mdash; nest each constructor function in a sub-array.
+_普通 ES6_ &mdash; 函数构造嵌套在一个子数组中。
 * _ES5_ &mdash; simply list the constructor functions.
 
   _ES5_ &mdash; 简单列出构造函数。
@@ -835,31 +638,18 @@ AngularJS 的开发人员对这种形式应该很熟悉。
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero-di.component.ts">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-di.component.ts">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero-di.component.es6">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-di.component.es6">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/hero-di.component.es6">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-di.component.es6">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/hero-di.component.js">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-di.component.js">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript with DSL" path="cb-ts-to-js/js/src/app/hero-di.component.js" region="dsl">
-
+  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-di.component.js" region="dsl">
   </code-pane>
-
 </code-tabs>
 
-
-
 ### Injection with the @Inject decorator
 
 ### 用 @Inject 装饰器注入
@@ -875,16 +665,12 @@ In the following example, the token is the string `'heroName'`.
 在 _TypeScript_ 和 _带装饰器的 ES6_ 中，可以在类的构造函数参数前调用`@Inject()`装饰器来指定注入令牌。
 在这个例子中，这个令牌是字符串`'heroName'`
 
-The other JavaScript dialects add a `parameters` array to the class contructor function.
-Each item constains a new instance of `Inject`:
+The other JavaScript dialects add a `parameters` array to the class constructor function.
+Each item contains a new instance of `Inject`:
 
 其它 JavaScript 方言是通过向类的构造函数添加`parameters`数组。
-其中的每一项是`Inject`的实例。
-
-* _plain ES6_ &mdash; each item is a new instance of `Inject(token)` in a sub-array.
-
-  _普通 ES6_ &mdash; 每一项是嵌套在一个子数组中的`Inject(token)`的实例。
-
+其中的每一项是`Inject`的实例。* _Plain ES6_ &mdash; each item is a new instance of `Inject(token)` in a sub-array.
+_普通 ES6_ &mdash; 每一项是嵌套在一个子数组中的`Inject(token)`的实例。
 * _ES5_ &mdash; simply list the string tokens.
 
   _ES5_ &mdash; 简单列出字符串令牌。
@@ -897,31 +683,18 @@ array as before. Create a new instance of `ng.core.Inject(token)` for each param
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero-di-inject.component.ts">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-di-inject.component.ts">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/hero-di-inject.component.es6">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-di-inject.component.es6">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/hero-di-inject.component.js">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-di-inject.component.js">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript with DSL" path="cb-ts-to-js/js/src/app/hero-di-inject.component.js" region="dsl">
-
+  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-di-inject.component.js" region="dsl">
   </code-pane>
-
 </code-tabs>
 
-
-
 ### Additional Injection Decorators
 
 ### 其它注入装饰器
@@ -935,29 +708,29 @@ you precede the constructor parameters with injection qualifiers such as:
 
 在 _TypeScript_ 和 _带装饰器的 ES6_ 中，可以将下列注入限定符加在构造函数参数前面：
 
-* [`@Optional`](api/core/index/Optional-decorator) sets the parameter to `null` if the service is missing
+* [`@Optional`](api/core/Optional) sets the parameter to `null` if the service is missing.
 
-  [`@Optional`](api/core/index/Optional-decorator) 如果找不到服务，设置参数为`null`
+  [`@Optional`](api/core/Optional) 如果找不到服务，设置参数为`null`
 
-* [`@Attribute`](api/core/index/Attribute-interface) to inject a host element attribute value
+* [`@Attribute`](api/core/Attribute) to inject a host element attribute value.
 
-  [`@Attribute`](api/core/index/Attribute-interface) 注入宿主元素属性值
+  [`@Attribute`](api/core/Attribute) 注入宿主元素属性值
 
-* [`@ContentChild`](api/core/index/ContentChild-decorator) to inject a content child
+* [`@ContentChild`](api/core/ContentChild) to inject a content child.
 
-  [`@ContentChild`](api/core/index/ContentChild-decorator) 注入内容子组件
+  [`@ContentChild`](api/core/ContentChild) 注入内容子组件
 
-* [`@ViewChild`](api/core/index/ViewChild-decorator) to inject a view child
+* [`@ViewChild`](api/core/ViewChild) to inject a view child.
 
-  [`@ViewChild`](api/core/index/ViewChild-decorator) 注入视图子组件
+  [`@ViewChild`](api/core/ViewChild) 注入视图子组件
 
-* [`@Host`](api/core/index/Host-decorator) to inject a service in this component or its host
+* [`@Host`](api/core/Host) to inject a service in this component or its host.
 
-  [`@Host`](api/core/index/Host-decorator) 注入本组件或它宿主中的服务
+  [`@Host`](api/core/Host) 注入本组件或它宿主中的服务
 
-* [`@SkipSelf`](api/core/index/SkipSelf-decorator) to inject a service provided in an ancestor of this component
+* [`@SkipSelf`](api/core/SkipSelf) to inject a service provided in an ancestor of this component.
 
-  [`@SkipSelf`](api/core/index/SkipSelf-decorator) 注入本组件祖先中提供的服务
+  [`@SkipSelf`](api/core/SkipSelf) 注入本组件祖先中提供的服务
 
 In _plain ES6_ and _ES5_, create an instance of the equivalent injection qualifier in a nested array within the `parameters` array.
 For example, you'd write `new Optional()` in _plain ES6_ and `new ng.core.Optional()` in _ES5_.
@@ -972,39 +745,24 @@ array as before. Use a nested array to define a parameter's complete injection s
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero-title.component.ts">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-title.component.ts">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-title.component.es6">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/hero-title.component.es6">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-title.component.es6">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/hero-title.component.js">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-title.component.js">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript with DSL" path="cb-ts-to-js/js/src/app/hero-title.component.js" region="dsl">
-
+  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-title.component.js" region="dsl">
   </code-pane>
-
 </code-tabs>
 
-
-
 <div class="l-sub-section">
 
-
-
-In the example above, there is no provider for the `'titlePrefix'` token.
-Without `Optional`, Angular would raise an error.
-With `Optional`, Angular sets the constructor parameter to `null`
-and the component displays the title without a prefix.
+  In the example above, there is no provider for the `'titlePrefix'` token.
+  Without `@Optional()`, Angular would raise an error.
+  With `@Optional()`, Angular sets the constructor parameter to `null`
+  and the component displays the title without a prefix.
 
 上例中，`'titlePrefix'`令牌没有提供商。
 如果没有`Optional`，Angular 将抛出错误。
@@ -1014,17 +772,10 @@ and the component displays the title without a prefix.
 
 </div>
 
-
-
 {@a host-binding}
 
-
-
 ## Host Binding
-
-## 宿主绑定
-
-Angular supports bindings to properties and events of the _host element_ which is the
+## 宿主绑定Angular supports bindings to properties and events of the _host element_, which is the
 element whose tag matches the component selector.
 
 Angular 支持绑定到_宿主元素_的属性和事件，
@@ -1036,9 +787,9 @@ Angular 支持绑定到_宿主元素_的属性和事件，
 
 In _TypeScript_ and _ES6-with-decorators_, you can use host property decorators to bind a host
 element to a component or directive.
-The [`@HostBinding`](api/core/index/HostBinding-interface) decorator
+The [`@HostBinding`](api/core/HostBinding) decorator
 binds host element properties to component data properties.
-The [`@HostListener`](api/core/index/HostListener-interface) decorator binds
+The [`@HostListener`](api/core/HostListener) decorator binds
 host element events to component event handlers.
 
 在 _TypeScript_ 和 _带装饰器的 ES6_ 中，可以使用宿主属性装饰器把宿主元素绑定到组件或指令。
@@ -1065,31 +816,18 @@ The  `host` value is an object whose properties are host property and listener b
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero-host.component.ts">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-host.component.ts">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero-host.component.es6">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-host.component.es6">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/hero-host.component.es6">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-host.component.es6">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript" path="cb-ts-to-js/js/src/app/hero-host.component.js">
-
+  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-host.component.js">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript with DSL" path="cb-ts-to-js/js/src/app/hero-host.component.js" region="dsl">
-
+  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-host.component.js" region="dsl">
   </code-pane>
-
 </code-tabs>
 
-
-
 ### Host Metadata
 
 ### 宿主元数据
@@ -1101,7 +839,7 @@ They'd _rather_ do it the way you _must_ do it _ES5_ and _plain ES6_.
 一些开发人员更喜欢在组件元数据中指定宿主属性和监听器。
 它们宁愿采用这种方式，也是 _ES5_ 或 _普通 ES6_ 中必须采用的方式。
 
-The following re-implementation of the `HeroComponent` reminds us that _any property metadata decorator_
+The following re-implementation of the `HeroComponent` shows that _any property metadata decorator_
 can be expressed as component or directive metadata in both _TypeScript_ and _ES6-with-decorators_.
 These particular _TypeScript_ and _ES6_ code snippets happen to be identical.
 
@@ -1110,23 +848,14 @@ _任何属性元数据装饰器_都可以表示为组件或指令元数据。
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero-host-meta.component.ts">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-host-meta.component.ts">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6">
   </code-pane>
-
 </code-tabs>
 
-
-
 {@a view-child-decorators}
 
-
-
 ### View and Child Decorators
 
 ### 视图和子组件装饰器
@@ -1138,14 +867,10 @@ Several _property_ decorators query a component's nested view and content compon
 
 <div class="l-sub-section">
 
+  _View_ children are associated with element tags that appear _within_ the component's template.
 
-
-_View_ children are associated with element tags that appear _within_ the component's template.
-
-_视图_子组件与出现在组件模板_内_的元素标签相关联。
-
-_Content_ children are associated with elements that appear _between_ the component's element tags;
-they are projected into an `<ng-content>` slot in the component's template.     
+_视图_子组件与出现在组件模板_内_的元素标签相关联。_Content_ children are associated with elements that appear _between_ the component's element tags;
+they are projected into an `<ng-content>` slot in the component's template.
 
 _内容_子组件与出现在组件元素标签_之间_的那些元素相关联，
 它们被投影到组件模板的`<ng-content>`中。
@@ -1153,10 +878,8 @@ _内容_子组件与出现在组件元素标签_之间_的那些元素相关联
 
 </div>
 
-
-
-The [`@ViewChild`](api/core/index/ViewChild-decorator) and
-[`@ViewChildren`](api/core/index/ViewChildren-decorator) property decorators
+The [`@ViewChild`](api/core/ViewChild) and
+[`@ViewChildren`](api/core/ViewChildren) property decorators
 allow a component to query instances of other components that are used in
 its view.
 
@@ -1168,83 +891,52 @@ In _ES5_ and _ES6_, you access a component's view children by adding a `queries`
 The `queries` property value is a hash map.
 
 在 _ES5_ 和 _ES6_ 中，通过向组件元数据添加`queries`属性来访问组件的视图子组件。
-`queries`属性是一个映射表。
-
-* each _key_ is the name of a component property that will hold the view child or children.
-
-  每个_键_是用来保存视图子组件的组件属性名。
-
-* each _value_ is a new instance of either `ViewChild` or `ViewChildren`.
-
-  每个_值_是`ViewChild`或`ViewChildren`的实例。
-
+`queries`属性是一个映射表。* Each _key_ is the name of a component property that will hold the view child or children.
+每个_键_是用来保存视图子组件的组件属性名。* Each _value_ is a new instance of either `ViewChild` or `ViewChildren`.
+每个_值_是`ViewChild`或`ViewChildren`的实例。
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero-queries.component.ts" region="view">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-queries.component.ts" region="view">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6" region="view">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6" region="view">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/hero-queries.component.es6" region="view">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-queries.component.es6" region="view">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript with DSL" path="cb-ts-to-js/js/src/app/hero-queries.component.js" region="view">
-
+  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-queries.component.js" region="view">
   </code-pane>
-
 </code-tabs>
 
-
-
-The [`@ContentChild`](api/core/index/ContentChild-decorator) and
-[`@ContentChildren`](api/core/index/ContentChildren-decorator) property decorators
+The [`@ContentChild`](api/core/ContentChild) and
+[`@ContentChildren`](api/core/ContentChildren) property decorators
 allow a component to query instances of other components that have been projected
 into its view from elsewhere.
 
-[`@ContentChild`](api/core/index/ContentChild-decorator) 和
-[`@ContentChildren`](api/core/index/ContentChildren-decorator)
+[`@ContentChild`](api/core/ContentChild) 和
+[`@ContentChildren`](api/core/ContentChildren)
 装饰器允许组件查询从其它地方投影到视图里的其它组件的实例。
 
-They can be added in the same way as [`@ViewChild`](api/core/index/ViewChild-decorator) and
-[`@ViewChildren`](api/core/index/ViewChildren-decorator).
+They can be added in the same way as [`@ViewChild`](api/core/ViewChild) and
+[`@ViewChildren`](api/core/ViewChildren).
 
-添加它们的方式与[`@ViewChild`](api/core/index/ViewChild-decorator) 和
-[`@ViewChildren`](api/core/index/ViewChildren-decorator) 相同。
+添加它们的方式与[`@ViewChild`](api/core/ViewChild) 和
+[`@ViewChildren`](api/core/ViewChildren) 相同。
 
 
 <code-tabs>
-
-  <code-pane title="TypeScript" path="cb-ts-to-js/ts/src/app/hero-queries.component.ts" region="content">
-
+  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-queries.component.ts" region="content">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript with decorators" path="cb-ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6" region="content">
-
+  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6" region="content">
   </code-pane>
-
-  <code-pane title="ES6 JavaScript" path="cb-ts-to-js/js-es6/src/app/hero-queries.component.es6" region="content">
-
+  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-queries.component.es6" region="content">
   </code-pane>
-
-  <code-pane title="ES5 JavaScript with DSL" path="cb-ts-to-js/js/src/app/hero-queries.component.js" region="content">
-
+  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-queries.component.js" region="content">
   </code-pane>
-
 </code-tabs>
 
-
-
 <div class="alert is-helpful">
 
-
-
-In _TypeScript_ and _ES6-with-decorators_ you can also use the `queries` metadata
-instead of the `@ViewChild` and `@ContentChild` property decorators.
+  In _TypeScript_ and _ES6-with-decorators_ you can also use the  `queries` metadata
+  instead of the `@ViewChild` and `@ContentChild` property decorators.
 
 在 _TypeScript_ 和 _带装饰器的 ES6_ 中，还可以使用`queries`元数据代替
 `@ViewChild` 和 `@ContentChild`属性装饰器。
@@ -1252,18 +944,14 @@ instead of the `@ViewChild` and `@ContentChild` property decorators.
 
 </div>
 
-
-
 {@a aot}
 
-
-
 ## AOT Compilation in _TypeScript_ only
 
 ## 只用于 _TypeScript_ 的预编译
 
-Angular offers two modes of template compilation, JIT (_Just-in-Time_) and
-[AOT (_Ahead-of-Time_)](guide/aot-compiler).
+Angular offers two modes of template compilation, JIT (_just-in-time_) and
+[AOT (_ahead-of-time_)](guide/aot-compiler).
 Currently the AOT compiler only works with _TypeScript_ applications because, in part, it generates
 _TypeScript_ files as an intermediate result.
 **AOT is not an option for pure JavaScript applications** at this time.
@@ -1271,4 +959,4 @@ _TypeScript_ files as an intermediate result.
 Angular 模板编译有两种方式：JiT (_Just-in-Time，即时编译_) 和
 [AoT (_Ahead-of-Time，预编译_)](guide/aot-compiler)。
 目前，预编译只能用于 _TypeScript_ 应用，因为（部分原因）它生成的中间结果是 _TypeScript_ 文件。
-当前，**预编译不能用于纯 JavaScript 应用**。
\ No newline at end of file
+当前，**预编译不能用于纯 JavaScript 应用**。
diff --git a/aio/content/guide/typescript-configuration.md b/aio/content/guide/typescript-configuration.md
index 6a22f2e6b4..78e028b110 100644
--- a/aio/content/guide/typescript-configuration.md
+++ b/aio/content/guide/typescript-configuration.md
@@ -1,11 +1,6 @@
-@title
-TypeScript 配置
-
-@intro
-Angular 开发者的 TypeScript 配置
-
-@description
+# TypeScript Configuration
 
+# TypeScript 配置
 
 TypeScript is a primary language for Angular application development.
 It is a superset of JavaScript with design-time support for type safety and tooling.
@@ -64,6 +59,8 @@ The [Setup](guide/setup) guide uses the following `tsconfig.json`:
 我们在[搭建本地开发环境](guide/setup)中创建过如下的`tsconfig.json`：
 
 
+<code-example path="quickstart/src/tsconfig.1.json" title="tsconfig.json" linenums="false"></code-example>
+
 This file contains options and flags that are essential for Angular applications.
 
 该文件中的选项和标志是写Angular应用程序的基础。
@@ -232,4 +229,4 @@ you can view an example in the [webpack](guide/webpack) page.
   
 QuickStart doesn't require these typings but many of the samples do.
 
-“快速起步”本身不需要这些类型定义，但是文档中的很多例子都需要。
\ No newline at end of file
+“快速起步”本身不需要这些类型定义，但是文档中的很多例子都需要。
diff --git a/aio/content/guide/upgrade.md b/aio/content/guide/upgrade.md
index dee4e5f78e..b0948c8883 100644
--- a/aio/content/guide/upgrade.md
+++ b/aio/content/guide/upgrade.md
@@ -1,18 +1,13 @@
-@title
-从 AngularJS 升级
-
-@intro
-AngularJS 应用可以逐步升级到 Angular。
-
-@description
+# Upgrading from AngularJS
 
+# 从 AngularJS 升级
 
 _Angular_ is the name for the Angular of today and tomorrow.
 _AngularJS_ is the name for all v1.x versions of Angular.
 
 *Angular*这个名字专指现在和未来的Angular版本，而*AngularJS*专指Angular的所有v1.x版本。
 
-AngularJS apps are great. 
+AngularJS apps are great.
 Always consider the business case before moving to Angular.
 An important part of that case is the time and effort to get there.
 This guide describes the built-in tools for efficiently migrating AngularJS projects over to the
@@ -24,12 +19,12 @@ Angular platform, a piece at a time.
 本章描述用于把AngularJS应用高效迁移到Angular平台的内置工具，每次讲一点点。
 
 Some applications will be easier to upgrade than others, and there are
-ways in which we can make it easier for ourselves. It is possible to
+many ways to make it easier for yourself. It is possible to
 prepare and align AngularJS applications with Angular even before beginning
 the upgrade process. These preparation steps are all about making the code
-more decoupled, more maintainable, and up to speed with modern development
-tools. That means the preparation work will not only make the eventual upgrade
-easier, but will also generally improve our AngularJS applications.
+more decoupled, more maintainable, and better aligned with modern development
+tools. That means in addition to making the upgrade easier,
+you will also improve the existing AngularJS applications.
 
 有些应用可能比其它的升级起来简单，还有一些方法能让把这项工作变得更简单。
 即使在正式开始升级过程之前，我们可以准备AngularJS的程序，让它向Angular看齐。
@@ -48,140 +43,35 @@ make incremental upgrading seamless.
 这意味着可以在不必打断其它业务的前提下，升级更大、更复杂的应用程序，因为这项工作可以多人协作完成，在一段时间内逐渐铺开。
 Angular `upgrade`模块的设计目标就是让你渐进、无缝的完成升级。
 
-1. [Preparation](guide/upgrade#preparation)
-
-   [准备工作](guide/upgrade#preparation)
-
-    1. [Follow the Angular Style Guide](guide/upgrade#follow-the-angular-style-guide)
-
-       [遵循Angular风格指南](guide/upgrade#follow-the-angular-style-guide)
-
-    2. [Using a Module Loader](guide/upgrade#using-a-module-loader)
-
-       [使用模块加载器](guide/upgrade#using-a-module-loader)
-
-    3. [Migrating to TypeScript](guide/upgrade#migrating-to-typescript)
-
-       [迁移到TypeScript](guide/upgrade#migrating-to-typescript)
-
-    4. [Using Component Directives](guide/upgrade#using-component-directives)
-
-       [使用组件型指令](guide/upgrade#using-component-directives)
-
-2. [Upgrading with The Upgrade Module](guide/upgrade#upgrading-with-the-upgrade-module)
-
-   [通过升级模块进行升级](guide/upgrade#upgrading-with-the-upgrade-module)
-
-    1. [How The Upgrade Module Works](guide/upgrade#how-the-upgrade-module-works)
-
-       [升级模块是如何工作的](guide/upgrade#how-the-upgrade-module-works)
-
-    2. [Bootstrapping hybrid](guide/upgrade#bootstrapping-hybrid-applications)
-
-       [引导混合(hybrid)应用](guide/upgrade#bootstrapping-hybrid-applications)
-       
-    3. [Using Angular Components from AngularJS Code](guide/upgrade#using-angular-components-from-angularjs-code)
-
-       [从AngularJS的代码中使用Angular的组件](guide/upgrade#using-angular-components-from-angularjs-code)
-
-    4. [Using AngularJS Component Directives from Angular Code](guide/upgrade#using-angularjs-component-directives-from-angular-code)
-
-       [从Angular的代码中使用AngularJS的组件](guide/upgrade#using-angularjs-component-directives-from-angular-components-from-angularjs-code)
-       
-    5. [Projecting AngularJS Content into Angular Components](guide/upgrade#projecting-angularjs-content-into-angular-components)
-
-       [把AngularJS的内容投影(project)进Angular组件中](guide/upgrade#projecting-angularjs-content-into-angular-components)
-
-    6. [Transcluding Angular Content into AngularJS Component Directives](guide/upgrade#transcluding-angular-content-into-angularjs-component-directives)
-
-       [把Angular的内容透传(transclude)到AngularJS的组件型指令中](guide/upgrade#transcluding-angular-content-into-angularjs-component-directives)
-
-    7. [Making AngularJS Dependencies Injectable to Angular](guide/upgrade#making-angularjs-dependencies-injectable-to-angular)
-
-       [让AngularJS提供的依赖可以被注入到Angular](guide/upgrade#making-angularjs-dependencies-injectable-to-angular)
-
-    8. [Making Angular Dependencies Injectable to AngularJS](guide/upgrade#making-angular-dependencies-injectable-to-angularjs)
-
-       [让Angular提供的依赖可以被注入到AngularJS](guide/upgrade#making-angular-dependencies-injectable-to-angularjs)
-
-    9. [Using Ahead-of-time compilation with hybrid apps](guide/upgrade#using-ahead-of-time-compilation-with-hybrid-apps)
-    
-       [在混合式应用中使用预编译](guide/upgrade#using-ahead-of-time-compilation-with-hybrid-apps)
-       
-    10. [Dividing routes between Angular and AngularJS](guide/upgrade#dividing-routes-between-angular-and-angularjs)
-    
-        [在Angular和AngularJS之间进行路由](guide/upgrade#dividing-routes-between-angular-and-angularjs)
-
-3. [PhoneCat Upgrade Tutorial](guide/upgrade#phonecat-upgrade-tutorial)
-
-   [PhoneCat准备工作教程](guide/upgrade#phonecat-preparation-tutorial)
-
-    1. [Switching to TypeScript](guide/upgrade#switching-to-typescript)
-
-       [切换到TypeScript](guide/upgrade#switching-to-typescript)
-
-    2. [Installing Angular](guide/upgrade#installing-angular)
-
-       [安装Angular](guide/upgrade#installing-angular)
-
-    3. [Bootstrapping a hybrid PhoneCat](guide/upgrade#bootstrapping-a-hybrid-phonecat)
-
-       [引导混合版PhoneCat](guide/upgrade#bootstrapping-a-hybrid-phonecat)
-
-    4. [Upgrading the Phone service](guide/upgrade#upgrading-the-phone-service)
-
-       [升级Phone服务](guide/upgrade#upgrading-the-phone-service)
-
-    5. [Upgrading Components](guide/upgrade#upgrading-components)
-
-       [升级组件](guide/upgrade#upgrading-components)
-
-    6. [AoT compile the hybrid app](guide/upgrade#aot-compile-the-hybrid-app)
-    
-       [对混合式应用进行AoT预编译](guide/upgrade#aot-compile-the-hybrid-app)
-       
-    7. [Adding The Angular Router And Bootstrap](guide/upgrade#adding-the-angular-router-and-bootstrap)
-
-       [添加Angular路由器并引导](guide/upgrade#adding-the-angular-router-and-bootstrap)
-
-    8. [Say Goodbye to AngularJS](guide/upgrade#say-goodbye-to-angularjs)
-
-       [和AngularJS说再见](guide/upgrade#say-goodbye-to-angularjs)
-
-3. [Appendix: Upgrading PhoneCat Tests](guide/upgrade#appendix-upgrading-phonecat-tests)
-
-   [附录：升级PhoneCat测试](guide/upgrade#appendix-upgrading-phonecat-tests)
-
-
-
-
 ## Preparation
 ## 准备工作
 
-There are many ways to structure AngularJS applications. When we begin
+There are many ways to structure AngularJS applications. When you begin
 to upgrade these applications to Angular, some will turn out to be
 much more easy to work with than others. There are a few key techniques
-and patterns that we can apply to future proof our apps even before we
+and patterns that you can apply to future proof apps even before you
 begin the migration.
 
 AngularJS应用程序的组织方式有很多种。当我们想把它们升级到Angular的时候，
 有些做起来会比其它的更容易些。即使在我们开始升级之前，也有一些关键的技术和模式可以让我们将来升级时更轻松。
 
-### Follow the Angular Style Guide
+{@a follow-the-angular-styleguide}
+
+### Follow the AngularJS Style Guide
 
 ### 遵循Angular风格指南
 
-The [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility)
+The [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)
 collects patterns and practices that have been proven to result in
 cleaner and more maintainable AngularJS applications. It contains a wealth
-of information about how to write and organize Angular code - and equally
-importantly - how **not** to write and organize Angular code.
+of information about how to write and organize AngularJS code - and equally
+importantly - how **not** to write and organize AngularJS code.
 
-[Angular风格指南](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility)收集了一些已证明能写出干净且可维护的AngularJS程序的模式与实践。
+[Angular风格指南](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)收集了一些已证明能写出干净且可维护的AngularJS程序的模式与实践。
 它包含了很多关于如何书写和组织Angular代码的有价值信息，同样重要的是，**不应该**采用的书写和组织Angular代码的方式。
 
 Angular is a reimagined version of the best parts of AngularJS. In that
-sense, its goals are the same as the Angular Style Guide's: To preserve
+sense, its goals are the same as the AngularJS Style Guide's: To preserve
 the good parts of AngularJS, and to avoid the bad parts. There's a lot
 more to Angular than just that of course, but this does mean that
 *following the style guide helps make your AngularJS app more closely
@@ -189,10 +79,9 @@ aligned with Angular*.
 
 Angular是一个基于AngularJS中最好的部分构思出来的版本。在这种意义上，它的目标和Angular风格指南是一样的：
 保留AngularJS中好的部分，去掉坏的部分。当然，Angular还做了更多。
-说这些的意思是：*遵循这个风格指南可以让你写出更接近Angular程序的AngularJS程序*。
+说这些的意思是：*遵循这个风格指南可以让你写出更接近Angular程序的AngularJS程序*。There are a few rules in particular that will make it much easier to do
 
-There are a few rules in particular that will make it much easier to do 
-*an incremental upgrade* using the Angular `upgrade` module:
+*an incremental upgrade* using the Angular `upgrade/static` module:
 
 有一些特别的规则可以让使用Angular的`upgrade`模块进行*增量升级*变得更简单：
 
@@ -209,13 +98,13 @@ There are a few rules in particular that will make it much easier to do
 * The [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure)
   and [Modularity](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity)
   rules define similar principles on a higher level of abstraction: Different parts of the
-  application should reside in different directories and Angular modules.
+  application should reside in different directories and NgModules.
 
   [按特性分目录的结构](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure)和[模块化](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity)规则在较高的抽象层定义了一些相似的原则：应用程序中的不同部分应该被分到不同的目录和Angular模块中。
 
 When an application is laid out feature per feature in this way, it can also be
 migrated one feature at a time. For applications that don't already look like
-this, applying the rules in the Angular style guide is a highly recommended
+this, applying the rules in the AngularJS style guide is a highly recommended
 preparation step. And this is not just for the sake of the upgrade - it is just
 solid advice in general!
 
@@ -227,7 +116,7 @@ solid advice in general!
 
 ### 使用模块加载器
 
-When we break application code down into one component per file, we often end
+When you break application code down into one component per file, you often end
 up with a project structure with a large number of relatively small files. This is
 a much neater way to organize things than a small number of large files, but it
 doesn't work that well if you have to load all those files to the HTML page with
@@ -241,10 +130,10 @@ order. That's why it's a good idea to start using a *module loader*.
 
 Using a module loader such as [SystemJS](https://github.com/systemjs/systemjs),
 [Webpack](http://webpack.github.io/), or [Browserify](http://browserify.org/)
-allows us to use the built-in module systems of the TypeScript or ES2015 languages in our apps.
-We can use the `import` and `export` features that explicitly specify what code can
+allows us to use the built-in module systems of TypeScript or ES2015.
+You can use the `import` and `export` features that explicitly specify what code can
 and will be shared between different parts of the application. For ES5 applications
-we can use CommonJS style `require` and `module.exports` features. In both cases,
+you can use CommonJS style `require` and `module.exports` features. In both cases,
 the module loader will then take care of loading all the code the application needs
 in the correct order.
 
@@ -255,7 +144,7 @@ in the correct order.
 对于ES5程序来说，我们可以改用CommonJS风格的`require`和`module.exports`特性代替。
 无是论哪种情况，模块加载器都会按正确的顺序加载程序中用到的所有代码。
 
-When we then take our applications into production, module loaders also make it easier
+When moving applications into production, module loaders also make it easier
 to package them all up into production bundles with batteries included.
 
 当我们的应用程序投入生产环境时，模块加载器也会让把所有这些文件打成完整的产品包变得更容易。
@@ -265,10 +154,10 @@ to package them all up into production bundles with batteries included.
 
 ### 迁移到TypeScript
 
-If part of our Angular upgrade plan is to also take TypeScript into use, it makes
+If part of the Angular upgrade plan is to also take TypeScript into use, it makes
 sense to bring in the TypeScript compiler even before the upgrade itself begins.
 This means there's one less thing to learn and think about during the actual upgrade.
-It also means we can start using TypeScript features in our AngularJS code.
+It also means you can start using TypeScript features in your AngularJS code.
 
 Angular升级计划的一部分是引入TypeScript，即使在开始升级之前，引入TypeScript编译器也是有意义的。
 这意味着等真正升级的时候需要学习和思考的东西更少。
@@ -276,7 +165,7 @@ Angular升级计划的一部分是引入TypeScript，即使在开始升级之前
 
 Since TypeScript is a superset of ECMAScript 2015, which in turn is a superset
 of ECMAScript 5, "switching" to TypeScript doesn't necessarily require anything
-more than installing the TypeScript compiler and switching renaming files from
+more than installing the TypeScript compiler and renaming files from
 `*.js` to `*.ts`. But just doing that is not hugely useful or exciting, of course.
 Additional steps like the following can give us much more bang for the buck:
 
@@ -304,8 +193,8 @@ Additional steps like the following can give us much more bang for the buck:
   那些ES2015中新增的特性，比如箭头函数、`let`、`const`、默认函数参数、解构赋值等也能逐渐添加进来，让代码更有表现力。
 
 * Services and controllers can be turned into *classes*. That way they'll be a step
-  closer to becoming Angular service and component classes, which will make our
-  life easier once we do the upgrade.
+  closer to becoming Angular service and component classes, which will make
+  life easier after the upgrade.
 
   服务和控制器可以转成*类*。这样我们就能一步步接近Angular的服务和组件类了，这样等到我们开始升级时，也会更简单。
 
@@ -314,8 +203,8 @@ Additional steps like the following can give us much more bang for the buck:
 #### 使用组件型指令
 
 In Angular, components are the main primitive from which user interfaces
-are built. We define the different parts of our UIs as components, and then
-compose the UI by using components in our templates.
+are built. You define the different portions of the UI as components and
+compose them into a full user experience.
 
 在Angular中，组件是用来构建用户界面的主要元素。我们把UI中的不同部分定义成组件，然后通过在模板中使用这些组件最终合成为UI。
 
@@ -339,7 +228,7 @@ these attributes:
   `restrict: 'E'`。组件通常会以元素的方式使用。
 
 * `scope: {}` - an isolate scope. In Angular, components are always isolated
-  from their surroundings, and we should do this in AngularJS too.
+  from their surroundings, and you should do this in AngularJS too.
 
   `scope: {}` - 一个独立作用域。在Angular中，组件永远是从它们的环境中被隔离出来的，在AngularJS中，我们也应该这么做。
   
@@ -360,16 +249,15 @@ Component directives may also use the following attributes:
 
 组件型指令还可能使用下列属性：
 
-* `transclude: true`, if the component needs to transclude content from elsewhere.
+* `transclude: true/{}`, if the component needs to transclude content from elsewhere.
 
   `transclude: true`：如果组件需要从其它地方透传内容，就设置它。
-
 * `require`, if the component needs to communicate with some parent component's
   controller.
 
   `require`：如果组件需要和父组件的控制器通讯，就设置它。
 
-Component directives **may not** use the following attributes:
+Component directives **should not** use the following attributes:
 
 组件型指令**不能**使用下列属性：
 
@@ -391,17 +279,14 @@ Component directives **may not** use the following attributes:
 An AngularJS component directive that is fully aligned with the Angular
 architecture may look something like this:
 
+
 AngularJS中一个完全向Angular架构对齐过的组件型指令是这样的：
 
-
-<code-example path="upgrade-module/src/app/hero-detail.directive.ts" title="upgrade-module/src/app/hero-detail.directive.ts">
-
+<code-example path="upgrade-module/src/app/hero-detail.directive.ts" title="hero-detail.directive.ts">
 </code-example>
 
-
-
-AngularJS 1.5 introduces the [component API](https://docs.angularjs.org/api/ng/type/angular.Module)
-that makes it easier to define directives like these. It is a good idea to use
+AngularJS 1.5 introduces the [component API](https://docs.angularjs.org/api/ng/type/angular.Module#component)
+that makes it easier to define component directives like these. It is a good idea to use
 this API for component directives for several reasons:
 
 AngularJS.5引入了[组件API](https://docs.angularjs.org/api/ng/type/angular.Module)，它让像这样定义指令变得更简单了。
@@ -422,15 +307,12 @@ AngularJS.5引入了[组件API](https://docs.angularjs.org/api/ng/type/angular.M
 The component directive example from above looks like this when expressed
 using the component API:
 
+
 如果使用这个组件API进行快捷定义，那么上面看到的组件型指令就变成了这样：
 
-
-<code-example path="upgrade-module/src/app/upgrade-io/hero-detail.component.ts" title="upgrade-module/src/app/upgrade-io/hero-detail.component.ts">
-
+<code-example path="upgrade-module/src/app/upgrade-io/hero-detail.component.ts" region="hero-detail-io" title="hero-detail.component.ts">
 </code-example>
 
-
-
 Controller lifecycle hook methods `$onInit()`, `$onDestroy()`, and `$onChanges()`
 are another convenient feature that AngularJS 1.5 introduces. They all have nearly
 exact [equivalents in Angular](guide/lifecycle-hooks), so organizing component lifecycle
@@ -441,36 +323,36 @@ logic around them will ease the eventual Angular upgrade process.
 
 
 
-## Upgrading with The Upgrade Module
+## Upgrading with ngUpgrade
 
 ## 使用升级适配器进行升级
 
-The `upgrade` module in Angular is a very useful tool for upgrading
-anything but the smallest of applications. With it we can mix and match
+The ngUpgrade library in Angular is a very useful tool for upgrading
+anything but the smallest of applications. With it you can mix and match
 AngularJS and Angular components in the same application and have them interoperate
-seamlessly. That means we don't have to do the upgrade work all at once,
+seamlessly. That means you don't have to do the upgrade work all at once,
 since there's a natural coexistence between the two frameworks during the
 transition period.
 
-不管要升级什么，Angular中的`upgrade`模块都会是一个非常有用的工具 —— 除非是小到没功能的应用。
+不管要升级什么，Angular中的`ngUpgrade`库都会是一个非常有用的工具 —— 除非是小到没功能的应用。
 借助它，我们可以在同一个应用程序中混用并匹配AngularJS和2的组件，并让它们实现无缝的互操作。
 这意味着我们不用必须一次性做完所有升级工作，因为在整个演进过程中，这两个框架可以很自然的和睦相处。
 
-### How The Upgrade Module Works
+### How ngUpgrade Works
 
 ### 升级模块如何工作
 
-The primary tool provided by the upgrade module is called the `UpgradeModule`.
-This is a service that can bootstrap and manage hybrid applications that support
-both Angular and AngularJS code.
+The primary tool provided by ngUpgrade is called the `UpgradeModule`.
+This is a module that contains utilities for bootstrapping and managing hybrid
+applications that support both Angular and AngularJS code.
 
 `upgrade`模块提供的主要工具叫做`UpgradeModule`。这是一个服务，它可以引导并管理同时支持Angular和AngularJS的混合式应用程序。
 
-When we use `UpgradeModule`, what we're really doing is *running both versions
-of Angular at the same time*. All Angular code is running in the Angular
+When you use ngUpgrade, what you're really doing is *running both AngularJS and
+Angular at the same time*. All Angular code is running in the Angular
 framework, and AngularJS code in the AngularJS framework. Both of these are the
 actual, fully featured versions of the frameworks. There is no emulation going on,
-so we can expect to have all the features and natural behavior of both frameworks.
+so you can expect to have all the features and natural behavior of both frameworks.
 
 当使用`UpgradeModule`时，我们实际做的是*同时运行两个版本的Angular*。所有Angular的代码运行在Angular框架中，
 而AngularJS的代码运行在AngularJS框架中。所有这些都是真实的、全功能的框架版本。
@@ -495,69 +377,49 @@ frameworks in how it actually works.
 
 
 <table>
-
   <tr>
-
     <th>
       AngularJS
     </th>
-
     <th>
       Angular
     </th>
-
   </tr>
-
   <tr>
-
     <td>
-
-
       Dependency injection tokens are always strings
 
       依赖注入的令牌(Token)永远是字符串(译注：指服务名称)。
     </td>
-
     <td>
 
-
       Tokens [can have different types](guide/dependency-injection).
       They are often classes. They may also be strings.
 
       令牌[可能有不同的类型](guide/dependency-injection)。
       通常是类，也可能是字符串。
     </td>
-
   </tr>
-
   <tr>
-
     <td>
 
-
       There is exactly one injector. Even in multi-module applications,
       everything is poured into one big namespace.
 
       只有一个注入器。即使在多模块的应用程序中，每样东西也都被装入一个巨大的命名空间中。
     </td>
-
     <td>
 
-
       There is a [tree hierarchy of injectors](guide/hierarchical-dependency-injection),
       with a root injector and an additional injector for each component.
 
       有一组[树状多层注入器](guide/hierarchical-dependency-injection)，有一个根注入器，每个组件也另外有一个注入器。
 
     </td>
-
   </tr>
-
 </table>
 
-
-
-Even accounting for these differences we can still have dependency injection
+Even accounting for these differences you can still have dependency injection
 interoperability. The `UpgradeModule` resolves the differences and makes
 everything work seamlessly:
 
@@ -575,65 +437,50 @@ everything work seamlessly:
 * You can also make Angular services available for injection to AngularJS code
   by *downgrading* them. Only services from the Angular root injector can
   be downgraded. Again, the same singleton instances are shared between the frameworks.
-  When we register a downgrade, we explicitly specify a *string token* that we want to
+  When you register a downgraded service, you must explicitly specify a *string token* that you want to
   use in AngularJS.
 
-  通过降级它们，我们也能让那些在Angular中能被注入的服务在AngularJS的代码中可用。
+
+通过降级它们，我们也能让那些在Angular中能被注入的服务在AngularJS的代码中可用。
   只有那些来自Angular根注入器的服务才能被降级。同样的，在框架之间共享的是同一个单例对象。
-  当我们注册一个要降级的服务时，要明确指定一个打算在AngularJS中使用的*字符串令牌*。
-
-
-<figure class='image-display'>
-  <img src="assets/images/devguide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700"></img>
+  当我们注册一个要降级的服务时，要明确指定一个打算在AngularJS中使用的*字符串令牌*。<figure >
+  <img src="generated/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" >
 </figure>
 
-
-
 #### Components and the DOM
 
 #### 组件与DOM
 
-What we'll find in the DOM of a hybrid application are components and
+In the DOM of a hybrid ngUpgrade application are components and
 directives from both AngularJS and Angular. These components
 communicate with each other by using the input and output bindings
-of their respective frameworks, which the `UpgradeModule` bridges
-together. They may also communicate through shared injected dependencies,
-as described above.
+of their respective frameworks, which ngUpgrade bridges together. They may also
+communicate through shared injected dependencies, as described above.
 
 在混合式应用中，我们能同时发现那些来自AngularJS和Angular中组件和指令的DOM。
 这些组件通过它们各自框架中的输入和输出绑定来互相通讯，它们由`UpgradeModule`桥接在一起。
 它们也能通过共享被注入的依赖彼此通讯，就像前面所说的那样。
 
-There are two key things to understand about what happens in the DOM
-of a hybrid application:
+The key thing to understand about a hybrid application is that every element in the DOM is owned by exactly one of the two frameworks.
+The other framework ignores it. If an element is
+owned by AngularJS, Angular treats it as if it didn't exist,
+and vice versa.
 
-要弄明白在一个混合式应用的DOM中发生了什么，有两点很关键：
+理解混合式应用的关键在于，DOM中的每一个元素都只能属于这两个框架之一，而另一个框架则会忽略它。如果一个元素属于 AngularJS ，那么 Angular 就会当它不存在，反之亦然。
 
-1. Every element in the DOM is owned by exactly one of the two
-   frameworks. The other framework ignores it. If an element is
-   owned by AngularJS, Angular treats it as if it didn't exist,
-   and vice versa.
-
-   DOM中的每个元素都只能被两个框架之一拥有。另一个框架会忽略它。
-   如果一个元素被AngularJS拥有，Angular就会当它不存在。反之亦然。
-
-2. The root of the application *is always an AngularJS template*.
-
-   应用的根节点*总是来自AngularJS中的模板*。
-
-So a hybrid application begins life as an AngularJS application,
-and it is AngularJS that processes its root template. Angular then steps
-into the picture when an Angular component is used somewhere in
-the application templates. That component's view will then be managed
-by Angular, and it may use any number of Angular components and
+So normally a hybrid application begins life as an AngularJS application,
+and it is AngularJS that processes the root template, e.g. the index.html.
+Angular then steps into the picture when an Angular component is used somewhere
+in an AngularJS template. That component's template will then be managed
+by Angular, and it may contain any number of Angular components and
 directives.
 
 所以，混合式应用总是像AngularJS程序那样启动，处理根模板的也是AngularJS.
 然后，当这个应用的模板中使用到了Angular的组件时，Angular才开始参与。
 这个组件的视图由Angular进行管理，而且它还可以使用一系列的Angular组件和指令。
 
-Beyond that, we may interleave the two frameworks as much as we need to.
-We always cross the boundary between the two frameworks by one of two
+Beyond that, you may interleave the two frameworks.
+You always cross the boundary between the two frameworks by one of two
 ways:
 
 更进一步说，我们可以按照需要，任意穿插使用这两个框架。
@@ -645,35 +492,26 @@ ways:
 
    通过使用来自另一个框架的组件：AngularJS的模板中用到了Angular的组件，或者Angular的模板中使用了AngularJS的组件。
    
-2. By transcluding or projecting content from the other framework. The
-  `UpgradeModule` bridges the related concepts of  AngularJS transclusion
-   and Angular content projection together.
-
-   通过透传(transclude)或投影(project)来自另一个框架的内容。`UpgradeModule`牵线搭桥，把AngularJS的透传概念和Angular的内容投影概念关联起来。
+2. By transcluding or projecting content from the other framework. ngUpgrade
+    bridges the related concepts of AngularJS transclusion and Angular content
+    projection together.
 
 
-<figure class='image-display'>
-  <img src="assets/images/devguide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500"></img>
+通过透传(transclude)或投影(project)来自另一个框架的内容。`UpgradeModule`牵线搭桥，把AngularJS的透传概念和Angular的内容投影概念关联起来。<figure >
+  <img src="generated/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" >
 </figure>
 
-
-
-Whenever we use a component that belongs to the other framework, a
+Whenever you use a component that belongs to the other framework, a
 switch between framework boundaries occurs. However, that switch only
-happens to the *children* of the component element. Consider a situation
-where we use an Angular component from AngularJS like this:
-
+happens to the elements in the template of thatcomponent . Consider a situation
+where you use an Angular component from AngularJS like this:
 当我们使用一个属于另一个框架的组件时，就会发生一个跨框架边界的切换。不过，这种切换只发生在该组件元素的*子节点*上。
 考虑一个场景，我们从AngularJS中使用一个Angular组件，就像这样：
 
-
 <code-example language="html" escape="html">
-  <a-component></a-component>
-
+  &lt;a-component&gt;&lt;/a-component&gt;
 </code-example>
 
-
-
 The DOM element `<a-component>` will remain to be an AngularJS managed
 element, because it's defined in an AngularJS template. That also
 means you can apply additional AngularJS directives to it, but *not*
@@ -690,11 +528,9 @@ use AngularJS component directives from Angular.
 
 #### 变更检测
 
-Change detection in AngularJS is all about `scope.$apply()`. After every
-event that occurs, `scope.$apply()` gets called. This is done either
-automatically by the framework, or in some cases manually by our own
-code. It is the point in time when change detection occurs and data
-bindings get updated.
+The `scope.$apply()` is how AngularJS detects changes and updates data bindings.
+After every event that occurs, `scope.$apply()` gets called. This is done either
+automatically by the framework, or manually by you.
 
 AngularJS中的变更检测全是关于`scope.$apply()`的。在每个事件发生之后，`scope.$apply()`就会被调用。
 这或者由框架自动调用，或者在某些情况下由我们自己的代码手动调用。它是发生变更检测以及更新数据绑定的时间点。
@@ -702,7 +538,7 @@ AngularJS中的变更检测全是关于`scope.$apply()`的。在每个事件发
 In Angular things are different. While change detection still
 occurs after every event, no one needs to call `scope.$apply()` for
 that to happen. This is because all Angular code runs inside something
-called the [Angular zone](api/core/index/NgZone-class). Angular always
+called the [Angular zone](api/core/NgZone). Angular always
 knows when the code finishes, so it also knows when it should kick off
 change detection. The code itself doesn't have to call `scope.$apply()`
 or anything like it.
@@ -727,42 +563,39 @@ AngularJS and Angular approaches. Here's what happens:
   every turn of the Angular zone. This also triggers AngularJS change
   detection after every event.
 
-  `UpgradeModule`将在每一次离开Angular zone时调用AngularJS的`$rootScope.$apply()`。这样也就同样会在每个事件之后触发AngularJS的变更检测。
 
-
-<figure class='image-display'>
-  <img src="assets/images/devguide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600"></img>
+`UpgradeModule`将在每一次离开Angular zone时调用AngularJS的`$rootScope.$apply()`。这样也就同样会在每个事件之后触发AngularJS的变更检测。<figure >
+  <img src="generated/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" >
 </figure>
 
+In practice, you do not need to call `$apply()`,
+regardless of whether it is in AngularJS on Angular. The
+`UpgradeModule` does it for us. You *can* still call `$apply()` so there
+is no need to remove such calls from existing code. Those calls just trigger
+additional AngularJS change detection checks in a hybrid application.
 
 
-What this means in practice is that we do not need to call `$apply()` in
-our code, regardless of whether it is in AngularJS on Angular. The
-`UpgradeModule` does it for us. We *can* still call `$apply()` so there
-is no need to remove such calls from existing code. Those calls just don't
-have any effect in a hybrid application.
-
-在实践中，这意味着我们不用在自己的代码中调用`$apply()`，而不用管这段代码是在AngularJS还是Angular中。
+在实践中，我们不用在自己的代码中调用`$apply()`，而不用管这段代码是在AngularJS还是Angular中。
 `UpgradeModule`都替我们做了。我们仍然*可以*调用`$apply()`，也就是说我们不必从现有代码中移除此调用。
-但是在混合式应用中，那些调用没有任何效果。
+在混合式应用中，这些调用只会触发一次额外的 AngularJS 变更检测。
 
 
-When we downgrade an Angular component and then use it from AngularJS,
+When you downgrade an Angular component and then use it from AngularJS,
 the component's inputs will be watched using AngularJS change detection.
 When those inputs change, the corresponding properties in the component
-are set. We can also hook into the changes by implementing the
-[OnChanges](api/core/index/OnChanges-class) interface in the component,
-just like we could if it hadn't been downgraded.
+are set. You can also hook into the changes by implementing the
+[OnChanges](api/core/OnChanges) interface in the component,
+just like you could if it hadn't been downgraded.
 
 当我们降级一个Angular组件，然后把它用于AngularJS中时，组件的输入属性就会被AngularJS的变更检测体系监视起来。
 当那些输入属性发生变化时，组件中相应的属性就会被设置。我们也能通过实现[OnChanges](api/core/index/OnChanges-interface)
 接口来挂钩到这些更改，就像它未被降级时一样。
 
-Correspondingly, when we upgrade an AngularJS component and use it from Angular,
+Correspondingly, when you upgrade an AngularJS component and use it from Angular,
 all the bindings defined for the component directive's `scope` (or `bindToController`)
 will be hooked into Angular change detection. They will be treated
-as regular Angular inputs and set onto the scope (or controller) when
-they change.
+as regular Angular inputs. Their values will be written to the upgraded component's
+scope (or controller) when they change.
 
 相应的，当我们把AngularJS的组件升级给Angular使用时，在这个组件型指令的`scope`(或`bindToController`)中定义的所有绑定，
 都将被挂钩到Angular的变更检测体系中。它们将和标准的Angular输入属性被同等对待，并当它们发生变化时设置回scope(或控制器)上。
@@ -785,203 +618,153 @@ that describes Angular assets in metadata. The differences blossom from there.
 在AngularJS中，我们会把AngularJS的资源添加到`angular.module`属性上。
 在Angular中，我们会创建一个或多个带有`NgModule`装饰器的类，这些装饰器用来在元数据中描述Angular资源。差异主要来自这里。
 
-In a hybrid application we run both versions of Angular at the same time.
-That means that we need at least one module each from both AngularJS and Angular .
-We will import `UpgradeModule` inside our Angular  module, and then use it for 
-bootstrapping our AngularJS module. Let's see how.
+In a hybrid application you run both versions of Angular at the same time.
+That means that you need at least one module each from both AngularJS and Angular.
+You will import `UpgradeModule` inside the NgModule, and then use it for
+bootstrapping the AngularJS module.
 
 在混合式应用中，我们同时运行了两个版本的Angular。
 这意味着我们至少需要AngularJS和Angular各提供一个模块。
 当我们使用AngularJS的模块进行引导时，就得把Anuglar 2的模块传给`UpgradeModule`。我们来看看怎么做。
 
-
 <div class="l-sub-section">
 
 
 
-Learn more about Angular modules at the [NgModule guide](guide/ngmodule).
-
+Read more about [NgModules](guide/ngmodule).
 要了解Angular模块的更多信息，请参阅[Angular模块](guide/ngmodule)页。
 
 </div>
 
-
-
 ### Bootstrapping hybrid applications
 
 ### 引导AngularJS+2的混合式应用程序
 
-The first step to upgrading an application using the `UpgradeModule` is
-always to bootstrap it as a hybrid that supports both AngularJS and
-Angular, but still is an AngularJS app at top level.
+// TDOO: Translate
+To bootstrap a hybrid application, you must bootstrap each of the Angular and
+AngularJS parts of the application. You must bootstrap the Angular bits first and
+then ask the `UpgradeModule` to bootstrap the AngularJS bits next.
 
-使用`UpgradeModule`升级应用的第一步总是把它引导成一个同时支持AngularJS和Angular的混合式应用。
-
-Pure AngularJS applications can be bootstrapped in two ways: By using an `ng-app`
-directive somewhere on the HTML page, or by calling
-[angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap)
-from JavaScript. In Angular, only the second method is possible - there is
-no `ng-app` in Angular. This is also the case for hybrid applications.
-Therefore, it is a good preliminary step to switch AngularJS applications to use the
-JavaScript bootstrap method even before switching them to hybrid mode.
-
-纯粹的AngularJS应用可以用两种方式引导：在HTML页面中的某处使用`ng-app`指令，或者从JavaScript中调用
-[angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap)。
-在Angular中，只有第二种方法是可行的，因为它没有`ng-app`指令。在混合式应用中也同样只能用第二种方法。
-所以，在将AngularJS应用切换到混合模式之前，把它改为用JavaScript引导的方式是一个不错的起点。
-
-Say we have an `ng-app` driven bootstrap such as this one:
-
-比如说我们有个由`ng-app`驱动的引导过程，就像这个：
-
-
-<code-example path="upgrade-module/src/index-ng-app.html">
+In an AngularJS application you have a root AngularJS module, which will also
+be used to bootstrap the AngularJS application.
 
+<code-example path="upgrade-module/src/app/ajs-bootstrap/app.module.ts" region="ng1module" title="app.module.ts">
 </code-example>
 
+Pure AngularJS applications can be automatically bootstrapped by using an `ng-app`
+directive somewhere on the HTML page. But for hybrid applications, you manually bootstrap via the
+`UpgradeModule`. Therefore, it is a good preliminary step to switch AngularJS applications to use the
+manual JavaScript [`angular.bootstrap`](https://docs.angularjs.org/api/ng/function/angular.bootstrap)
+method even before switching them to hybrid mode.
 
+Say you have an `ng-app` driven bootstrap such as this one:
 
-We can remove the `ng-app` and `ng-strict-di` directives from the HTML
+<code-example path="upgrade-module/src/index-ng-app.html">
+</code-example>
+
+You can remove the `ng-app` and `ng-strict-di` directives from the HTML
 and instead switch to calling `angular.bootstrap` from JavaScript, which
 will result in the same thing:
 
+
 我们可以从HTML中移除`ng-app`和`ng-strict-di`指令，改为从JavaScript中调用`angular.bootstrap`，它能达到同样效果：
 
-
-<code-example path="upgrade-module/src/app/ajs-bootstrap/app.module.ts" region="bootstrap" title="upgrade-module/src/app/ajs-bootstrap/app.module.ts">
-
+<code-example path="upgrade-module/src/app/ajs-bootstrap/app.module.ts" region="bootstrap" title="app.module.ts">
 </code-example>
 
+To begin converting your AngularJS application to a hybrid, you need to load the Angular framework.
+You can see how this can be done with SystemJS by following the instructions in [Setup](guide/setup),
+selectively copying code from the [QuickStart github repository](https://github.com/angular/quickstart).
 
+You also need to install the `@angular/upgrade` package via `npm install @angular/upgrade --save`
+and add a mapping for the `@angular/upgrade/static` package:
 
-Now introduce Angular to the project. Inspired by instructions in
-[the Setup](guide/setup), you can selectively copy in material from the
-<a href="https://github.com/angular/quickstart" target="_blank">QuickStart github repository</a>.
+<code-example path="upgrade-module/src/systemjs.config.1.js" region="upgrade-static-umd" title="systemjs.config.js (map)">
+</code-example>
 
 现在，把Angular引入项目中。根据[搭建本地开发环境](guide/setup)中的指导，你可以有选择的从<a href="https://github.com/angular/quickstart" target="_blank">“快速起步”的Github仓库</a>中拷贝素材进来。
 
 Next, create an `app.module.ts` file and add the following `NgModule` class:
 
+
 接下来，创建一个`app.module.ts`文件，并添加下列`NgModule`类：
 
-
-<code-example path="upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts" region="ngmodule" title="upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts">
-
+<code-example path="upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts" region="ngmodule" title="app.module.ts">
 </code-example>
 
-
-
+// TODO: Translate
 This bare minimum `NgModule` imports `BrowserModule`, the module every Angular browser-based app must have.
+It also imports `UpgradeModule` from `@angular/upgrade/static`, which exports providers that will be used
+for upgrading and downgrading services and components.
 
-这个最小化的`NgModule`导入了`BrowserModule`，该模块是每个基于浏览器的Angular应用都必须具备的。
-
-It also imports `UpgradeModule` from `@angular/upgrade/static`, and adds an override to prevent
-Angular from bootstrapping itself in the form of the `ngDoBootstrap` empty class method.
-
-它还从`@angular/upgrade/static`导入了`UpgradeModule`，并添加了一个`ngDoBootstrap`空的覆盖方法，防止
-Angular启动它自身。
-
-Now we bootstrap `AppModule` using `platformBrowserDynamic`'s `bootstrapModule` method.
-Then we use dependency injection to get a hold of the `UpgradeModule` instance in `AppModule`,
-and use it to bootstrap our AngularJS app.
+In the constructor of the `AppModule`, use dependency injection to get a hold of the `UpgradeModule` instance,
+and use it to bootstrap the AngularJS app in the `AppModule.ngDoBootstrap` method.
 The `upgrade.bootstrap` method takes the exact same arguments as [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap):
 
-现在我们使用`platformBrowserDynamic`的`bootstrapModule`方法启动`AppModule`。
-接着我们使用依赖注入来获取`AppModule`中的一个`UpgradeModule`实例，
-并使用它来启动我们的AngularJS应用。
-`upgrade.bootstrap`方法接受与[angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap)相同的参数。
+<div class="l-sub-section">
 
+Note that you do not add a `bootstrap` declaration to the `@NgModule` decorator, since
+AngularJS will own the root template of the application.
 
-<code-example path="upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts" region="bootstrap" title="upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts">
+</div>
 
+Now you can bootstrap `AppModule` using the `platformBrowserDynamic.bootstrapModule` method.
+
+<code-example path="upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts" region="bootstrap" title="app.module.ts'">
 </code-example>
 
-
-
-We also need to install the `@angular/upgrade` package via `npm install @angular/upgrade --save`
-and add a mapping for the `@angular/upgrade/static` package: 
-
-我们还需要通过`npm install @angular/upgrade --save`命令安装`@angular/upgrade`包，并且为`@angular/upgrade/static`包添加一个映射关系：
-
-
-<code-example path="upgrade-module/src/systemjs.config.1.js" region="upgrade-static-umd" title="systemjs.config.js (map)">
-
-</code-example>
-
-
-
 Congratulations! You're running a hybrid application! The
-existing AngularJS code works as before _and_ you're ready to run Angular code.
+existing AngularJS code works as before _and_ you're ready to start adding Angular code.
 
 恭喜！我们就要开始运行AngularJS+2的混合式应用程序了！所有现存的AngularJS代码会像以前一样正常工作，但是我们现在也同样可以运行Angular代码了。
 
-
 ### Using Angular Components from AngularJS Code
 
 ### 在AngularJS的代码中使用Angular的组件
 
 
-<figure>
-  <img src="assets/images/devguide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
-</figure>
+<img src="generated/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" class="left">
 
-
-
-Once we're running a hybrid app, we can start the gradual process of upgrading
+Once you're running a hybrid app, you can start the gradual process of upgrading
 code. One of the more common patterns for doing that is to use an Angular component
 in an AngularJS context. This could be a completely new component or one that was
 previously AngularJS but has been rewritten for Angular.
 
 一旦我们开始运行混合式应用，我们就可以开始逐渐升级代码了。做这件事的一种更常见的模式就是在AngularJS的上下文中使用Angular的组件。
-该组件可能是全新的，也可能是把原本AngularJS的组件用Angular重写而成的。
-
-Say we have a simple Angular component that shows information about a hero:
-
+该组件可能是全新的，也可能是把原本AngularJS的组件用Angular重写而成的。Say you have a simple Angular component that shows information about a hero:
 假设我们有一个简单的用来显示英雄信息的Angular组件：
 
-
 <code-example path="upgrade-module/src/app/downgrade-static/hero-detail.component.ts" title="hero-detail.component.ts">
-
 </code-example>
 
-
-
-If we want to use this component from AngularJS, we need to *downgrade* it
-using the `downgradeComponent()` method. What we get when we do that is an AngularJS
-*directive*, which we can then register into our AngularJS module:
+If you want to use this component from AngularJS, you need to *downgrade* it
+using the `downgradeComponent()` method. The result is an AngularJS
+*directive*, which you can then register in the AngularJS module:
 
 如果我们想在AngularJS中使用这个组件，我们就得用`downgradeComponent()`方法把它*降级*。
 如果我们这么做，就会得到一个AngularJS的*指令*，我们可以把它注册到AngularJS的模块中：
 
-
-<code-example path="upgrade-module/src/app/downgrade-static/app.module.ts" region="downgradecomponent" title="upgrade-module/src/app/downgrade-static/app.module.ts">
-
+<code-example path="upgrade-module/src/app/downgrade-static/app.module.ts" region="downgradecomponent" title="app.module.ts">
 </code-example>
 
 
 
-Because `HeroDetailComponent` is an Angular component, we must also add it to the `declarations` in the `AppModule`.
+Because `HeroDetailComponent` is an Angular component, you must also add it to the 
+`declarations` in the `AppModule`.由于`HeroDetailComponent`是一个Angular组件，所以我们必须同时把它加入`AppModule`的`declarations`字段中。
 
-由于`HeroDetailComponent`是一个Angular组件，所以我们必须同时把它加入`AppModule`的`declarations`字段中。
+And because this component is being used from the AngularJS module, and is an entry point into 
+the Angular application, you must add it to the `entryComponents` for the 
+NgModule.
 
-And because this component is being used from the AngularJS module, and is an entry point into
-our Angular application, we also need to add it to the `entryComponents` for our
-Angular module.
 
 并且由于这个组件在AngularJS模块中使用，也是我们Angular应用的一个入口点，我们还需要
 将它加入到Angular模块的`entryComponents`列表中。
 
-
-<code-example path="upgrade-module/src/app/downgrade-static/app.module.ts" region="ngmodule" title="upgrade-module/src/app/downgrade-static/app.module.ts">
-
+<code-example path="upgrade-module/src/app/downgrade-static/app.module.ts" region="ngmodule" title="app.module.ts">
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 All Angular components, directives and pipes must be declared in an NgModule.
 
 所有Angular组件、指令和管道都必须声明在NgModule中。
@@ -989,24 +772,16 @@ All Angular components, directives and pipes must be declared in an NgModule.
 
 </div>
 
-
-
-The net result is an AngularJS directive called `heroDetail`, that we can
-use like any other directive in our AngularJS templates.
+The net result is an AngularJS directive called `heroDetail`, that you can
+use like any other directive in AngularJS templates.
 
 这里我们得到的是一个叫做`heroDetail`的AngularJS指令，我们可以像用其它指令一样把它用在AngularJS模板中。
 
-
-<code-example path="upgrade-module/src/index-downgrade-static.html" region="usecomponent" title="upgrade-module/src/index-downgrade-static.html">
-
+<code-example path="upgrade-module/src/index-downgrade-static.html" region="usecomponent">
 </code-example>
 
-
-
 <div class="alert is-helpful">
 
-
-
 Note that this AngularJS is an element directive (`restrict: 'E'`) called `heroDetail`.
 An AngularJS element directive is matched based on its _name_.
 *The `selector` metadata of the downgraded Angular component is ignored.*
@@ -1018,8 +793,6 @@ AngularJS的元素型指令是基于它的*名字*匹配的。
 
 </div>
 
-
-
 Most components are not quite this simple, of course. Many of them
 have *inputs and outputs* that connect them to the outside world. An
 Angular hero detail component with inputs and outputs might look
@@ -1030,31 +803,18 @@ Angular的英雄详情组件带有像这样的输入属性与输出属性：
 
 
 <code-example path="upgrade-module/src/app/downgrade-io/hero-detail.component.ts" title="hero-detail.component.ts">
-
 </code-example>
 
-
-
 These inputs and outputs can be supplied from the AngularJS template, and the
-`downgradeComponent()` method takes care of bridging them overvia the `inputs`
-and `outputs` arrays:
+`downgradeComponent()` method takes care of wiring them up:
+
 
 这些输入属性和输出属性的值来自于AngularJS的模板，而`downgradeComponent()`方法负责桥接它们：
 
-
-<code-example path="upgrade-module/src/app/downgrade-io/app.module.ts" region="downgradecomponent" title="upgrade-module/src/app/downgrade-io/app.module.ts">
-
+<code-example path="upgrade-module/src/index-downgrade-io.html" region="usecomponent">
 </code-example>
 
-
-
-<code-example path="upgrade-module/src/index-downgrade-io.html" region="usecomponent" title="upgrade-module/src/index-downgrade-io.html">
-
-</code-example>
-
-
-
-Note that even though we are in an AngularJS template, **we're using Angular
+Note that even though you are in an AngularJS template, **you're using Angular
 attribute syntax to bind the inputs and outputs**. This is a requirement for downgraded
 components. The expressions themselves are still regular AngularJS expressions.
 
@@ -1064,8 +824,6 @@ components. The expressions themselves are still regular AngularJS expressions.
 
 <div class="callout is-important">
 
-
-
 <header>
   Use kebab-case for downgraded component attributes
 </header>
@@ -1080,7 +838,7 @@ components. The expressions themselves are still regular AngularJS expressions.
 
 There's one notable exception to the rule of using Angular attribute syntax
 for downgraded components. It has to do with input or output names that consist
-of multiple words. In Angular we would bind these attributes using camelCase:
+of multiple words. In Angular, you would bind these attributes using camelCase:
 
 为降级过的组件使用Angular的属性(Attribute)语法规则时有一个值得注意的例外。
 它适用于由多个单词组成的输入或输出属性。在Angular中，我们要使用小驼峰命名法绑定这些属性：
@@ -1091,61 +849,47 @@ of multiple words. In Angular we would bind these attributes using camelCase:
 
 </code-example>
 
-
-
-But when using them from AngularJS templates, we need to use kebab-case:
+But when using them from AngularJS templates, you must use kebab-case:
 
 但是从AngularJS的模板中使用它们时，我们得使用中线命名法：
 
 
 <code-example format="">
   [my-hero]="hero"
-
 </code-example>
 
-
-
 </div>
 
-
-
 The `$event` variable can be used in outputs to gain access to the
 object that was emitted. In this case it will be the `Hero` object, because
 that is what was passed to `this.deleted.emit()`.
 
 `$event`变量能被用在输出属性里，以访问这个事件所发出的对象。这个案例中它是`Hero`对象，因为`this.deleted.emit()`函数曾把它传了出来。
 
-Since this is an AngularJS template, we can still use other AngularJS
+Since this is an AngularJS template, you can still use other AngularJS
 directives on the element, even though it has Angular binding attributes on it.
-For  example, we can easily make multiple copies of the component using `ng-repeat`:
+For example, you can easily make multiple copies of the component using `ng-repeat`:
+
 
 由于这是一个AngularJS模板，虽然它已经有了Angular中绑定的属性(Attribute)，我们仍可以在这个元素上使用其它AngularJS指令。
 例如，我们可以用`ng-repeat`简单的制作该组件的多份拷贝：
 
-
-<code-example path="upgrade-module/src/index-downgrade-io.html" region="userepeatedcomponent" title="upgrade-module/src/index-downgrade-io.html">
-
+<code-example path="upgrade-module/src/index-downgrade-io.html" region="userepeatedcomponent" >
 </code-example>
 
-
-
 ### Using AngularJS Component Directives from Angular Code
 
 ### 从Angular代码中使用AngularJS组件型指令
 
 
-<figure>
-  <img src="assets/images/devguide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
-</figure>
+<img src="generated/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" class="left">
 
-
-
-So, we can write an Angular component and then use it from AngularJS
-code. This is very useful when we start our migration from lower-level
-components and work our way up. But in some cases it is more convenient
+So, you can write an Angular component and then use it from AngularJS
+code. This is useful when you start to migrate from lower-level
+components and work your way up. But in some cases it is more convenient
 to do things in the opposite order: To start with higher-level components
-and work our way down. This too can be done using the `UpgradeModule`.
-We can *upgrade* AngularJS component directives and then use them from
+and work your way down. This too can be done using the `UpgradeModule`.
+You can *upgrade* AngularJS component directives and then use them from
 Angular.
 
 现在，我们已经能在Angular中写一个组件，并把它用于AngularJS代码中了。
@@ -1156,7 +900,7 @@ Angular.
 Not all kinds of AngularJS directives can be upgraded. The directive
 really has to be a *component directive*, with the characteristics
 [described in the preparation guide above](guide/upgrade#using-component-directives).
-Our safest bet for ensuring compatibility is using the
+The safest bet for ensuring compatibility is using the
 [component API](https://docs.angularjs.org/api/ng/type/angular.Module)
 introduced in AngularJS 1.5.
 
@@ -1170,14 +914,11 @@ and a controller:
 
 
 <code-example path="upgrade-module/src/app/upgrade-static/hero-detail.component.ts" region="hero-detail" title="hero-detail.component.ts">
-
 </code-example>
 
-
-
-We can *upgrade* this component to Angular  using the `UpgradeComponent` class. 
+You can *upgrade* this component to Angular  using the `UpgradeComponent` class.
 By creating a new Angular  **directive** that extends `UpgradeComponent` and doing a `super` call
-inside it's constructor, we have a fully upgrade AngularJS component to be used inside Angular .
+inside it's constructor, you have a fully upgraded AngularJS component to be used inside Angular .
 All that is left is to add it to `AppModule`'s `declarations` array.
 
 我们可以使用`UpgradeComponent`方法来把这个组件*升级*到Angular。
@@ -1187,21 +928,13 @@ All that is left is to add it to `AppModule`'s `declarations` array.
 
 
 <code-example path="upgrade-module/src/app/upgrade-static/hero-detail.component.ts" region="hero-detail-upgrade" title="hero-detail.component.ts">
-
 </code-example>
 
-
-
-<code-example path="upgrade-module/src/app/upgrade-static/app.module.ts" region="hero-detail-upgrade" title="hero-detail.component.ts">
-
+<code-example path="upgrade-module/src/app/upgrade-static/app.module.ts" region="hero-detail-upgrade" title="app.module.ts">
 </code-example>
 
-
-
 <div class="alert is-helpful">
 
-
-
 Upgraded components are Angular **directives**, instead of **components**, because Angular
 is unaware that AngularJS will create elements under it. As far as Angular knows, the upgraded
 component is just a directive - a tag - and Angular doesn't have to concern itself with
@@ -1213,26 +946,18 @@ Angular所知道的是升级后的组件只是一个指令（一个标签），A
 
 </div>
 
-
-
 An upgraded component may also have inputs and outputs, as defined by
 the scope/controller bindings of the original AngularJS component
-directive. When we use the component from an Angular template,
-we provide the inputs and outputs using **Angular template syntax**,
-with the following rules:
-
+directive. When you use the component from an Angular template,
+ provide the inputs and outputs using **Angular template syntax**,
+observing the following rules:
 升级后的组件也可能有输入属性和输出属性，它们是在原AngularJS组件型指令的scope/controller绑定中定义的。
 当我们从Angular模板中使用该组件时，我们要使用**Angular模板语法**来提供这些输入属性和输出属性，但要遵循下列规则：
 
-
 <table>
-
   <tr>
-
     <th>
-
     </th>
-
     <th>
 
       <p>
@@ -1244,7 +969,6 @@ with the following rules:
       </p>
 
     </th>
-
     <th>
 
       <p>
@@ -1256,11 +980,8 @@ with the following rules:
       </p>
 
     </th>
-
   </tr>
-
   <tr>
-
     <th>
 
       <p>
@@ -1272,23 +993,19 @@ with the following rules:
       </p>
 
     </th>
-
     <td>
 
-
       `myAttribute: '@myAttribute'`
+
     </td>
 
     <td>
 
-
       `<my-component myAttribute="value">`
+
     </td>
-
   </tr>
-
   <tr>
-
     <th>
 
       <p>
@@ -1300,23 +1017,18 @@ with the following rules:
       </p>
 
     </th>
-
     <td>
 
-
       `myOutput: '&myOutput'`
-    </td>
 
+    </td>
     <td>
 
-
       `<my-component (myOutput)="action()">`
+
     </td>
-
   </tr>
-
   <tr>
-
     <th>
 
       <p>
@@ -1328,23 +1040,18 @@ with the following rules:
       </p>
 
     </th>
-
     <td>
 
-
       `myValue: '<myValue'`
-    </td>
 
+    </td>
     <td>
 
-
       `<my-component [myValue]="anExpression">`
+
     </td>
-
   </tr>
-
   <tr>
-
     <th>
 
       <p>
@@ -1356,16 +1063,13 @@ with the following rules:
       </p>
 
     </th>
-
     <td>
 
-
       `myValue: '=myValue'`
+
     </td>
-
     <td>
 
-
       As a two-way binding: `<my-component [(myValue)]="anExpression">`.
       Since most AngularJS two-way bindings actually only need a one-way binding
       in practice, `<my-component [myValue]="anExpression">` is often enough.
@@ -1374,53 +1078,35 @@ with the following rules:
       用作双向绑定：`<my-component [(myValue)]="anExpression"`
 
     </td>
-
   </tr>
-
 </table>
 
-
-
-As an example, say we have a hero detail AngularJS component directive
+For example, imagine a hero detail AngularJS component directive
 with one input and one output:
 
 举个例子，假设我们在AngularJS中有一个表示“英雄详情”的组件型指令，它带有一个输入属性和一个输出属性：
 
 
 <code-example path="upgrade-module/src/app/upgrade-io/hero-detail.component.ts" region="hero-detail-io" title="hero-detail.component.ts">
-
 </code-example>
 
 
 
-We can upgrade this component to Angular, annotate inputs and outputs in the upgrade directive,and then provide the input
-and output using Angular template syntax:
-
-我们可以把这个组件升级到Angular，然后使用Angular的模板语法提供这个输入属性和输出属性：
-
+You can upgrade this component to Angular, annotate inputs and outputs in the upgrade directive, 
+and then provide the input and output using Angular template syntax:我们可以把这个组件升级到Angular，然后使用Angular的模板语法提供这个输入属性和输出属性：
 
 <code-example path="upgrade-module/src/app/upgrade-io/hero-detail.component.ts" region="hero-detail-io-upgrade" title="hero-detail.component.ts">
-
 </code-example>
 
-
-
 <code-example path="upgrade-module/src/app/upgrade-io/container.component.ts" title="container.component.ts">
-
 </code-example>
 
-
-
 ### Projecting AngularJS Content into Angular Components
 ### 把AngularJS的内容投影到Angular组件中
 
-<figure>
-  <img src="assets/images/devguide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
-</figure>
+<img src="generated/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" class="left">
 
-
-
-When we are using a downgraded Angular component from an AngularJS
+When you are using a downgraded Angular component from an AngularJS
 template, the need may arise to *transclude* some content into it. This
 is also possible. While there is no such thing as transclusion in Angular,
 there is a very similar concept called *content projection*. The `UpgradeModule`
@@ -1437,29 +1123,21 @@ Angular的组件通过使用`<ng-content>`标签来支持内容投影。下面
 
 
 <code-example path="upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts" title="hero-detail.component.ts">
-
 </code-example>
 
-
-
-When using the component from AngularJS, we can supply contents for it. Just
+When using the component from AngularJS, you can supply contents for it. Just
 like they would be transcluded in AngularJS, they get projected to the location
 of the `<ng-content>` tag in Angular:
 
+
 当从AngularJS中使用该组件时，我们可以为它提供内容。正如它们将在AngularJS中被透传一样，
 它们也在Angular中被投影到了`<ng-content>`标签所在的位置：
 
-
-<code-example path="upgrade-module/src/index-ajs-to-a-projection.html" region="usecomponent" title="upgrade-module/src/index-ajs-to-a-projection.html">
-
+<code-example path="upgrade-module/src/index-ajs-to-a-projection.html" region="usecomponent" >
 </code-example>
 
-
-
 <div class="alert is-helpful">
 
-
-
 When AngularJS content gets projected inside an Angular component, it still
 remains in "AngularJS land" and is managed by the AngularJS framework.
 
@@ -1468,20 +1146,14 @@ remains in "AngularJS land" and is managed by the AngularJS framework.
 
 </div>
 
-
-
 ### Transcluding Angular Content into AngularJS Component Directives
 ### 把Angular的内容透传进AngularJS的组件型指令
 
-<figure>
-  <img src="assets/images/devguide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
-</figure>
+<img src="generated/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" class="left">
 
-
-
-Just like we can project AngularJS content into Angular components,
-we can *transclude* Angular content into AngularJS components, whenever
-we are using upgraded versions from them.
+Just as you can project AngularJS content into Angular components,
+you can *transclude* Angular content into AngularJS components, whenever
+you are using upgraded versions from them.
 
 就像我们能把AngularJS的内容投影进Angular组件一样，我们也能把Angular的内容*透传*进AngularJS的组件，
 但不管怎样，我们都要使用它们升级过的版本。
@@ -1494,110 +1166,73 @@ point:
 
 
 <code-example path="upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts" title="hero-detail.component.ts">
-
 </code-example>
 
-
-
-<div class="alert is-helpful">
-
-
-
-The directive also needs to have the `transclude: true` option enabled.
-It is on by default for component directives defined with the
-1.5 component API.
-
-该指令还需要启用一个`transclude: true`选项。当用AngularJS.5中的组件API定义组件型指令时，该选项默认是开启的。
-
-
-</div>
-
-
-
-If we upgrade this component and use it from Angular, we can populate
+If you upgrade this component and use it from Angular, you can populate
 the component tag with contents that will then get transcluded:
 
 如果我们升级这个组件，并把它用在Angular中，我们就能把准备透传的内容放进这个组件的标签中。
 
-
 <code-example path="upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts" title="container.component.ts">
-
 </code-example>
 
-
-
 ### Making AngularJS Dependencies Injectable to Angular
 ### 让AngularJS中的依赖可被注入到Angular
 
-When running a hybrid app, we may bump into situations where we need to have
-some AngularJS dependencies to be injected to Angular code. This may be
-because we have some business logic still in AngularJS services, or because
-we need some of AngularJS's built-in services like `$location` or `$timeout`.
+When running a hybrid app, you may encounter situations where you need to inject
+some AngularJS dependencies into your Angular code.
+Maybe you have some business logic still in AngularJS services.
+Maybe you want access to AngularJS's built-in services like `$location` or `$timeout`.
 
 当运行一个混合式应用时，我们可能会遇到这种情况：我们需要把某些AngularJS的依赖注入到Angular代码中。
 这可能是因为某些业务逻辑仍然在AngularJS服务中，或者需要某些AngularJS的内置服务，比如`$location`或`$timeout`。
 
 In these situations, it is possible to *upgrade* an AngularJS provider to
 Angular. This makes it possible to then inject it somewhere in Angular
-code. For example, we might have a service called `HeroesService` in AngularJS:
-
+code. For example, you might have a service called `HeroesService` in AngularJS:
 在这些情况下，把一个AngularJS提供商*升级到*Angular也是有可能的。这就让它将来有可能被注入到Angular代码中的某些地方。
 比如，我们可能在AngularJS中有一个名叫`HeroesService`的服务：
 
-
 <code-example path="upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts" title="heroes.service.ts">
-
 </code-example>
 
-
-
-We can upgrade the service using a Angular [Factory provider](guide/dependency-injection#factory-providers)
-that requests the service from the AngularJS `$injector`. 
+You can upgrade the service using a Angular [factory provider](guide/dependency-injection#factory-providers)
+that requests the service from the AngularJS `$injector`.
 
 我们可以Angular的[工厂提供商（factory provider）](guide/dependency-injection#factory-providers)升级该服务，
 它从AngularJS的`$injector`请求服务。Angular依赖的名称由你确定：
 
-We recommend declaring the Factory Provider in a separate `ajs-upgraded-providers.ts` file
+Many developers prefer to declare the factory provider in a separate `ajs-upgraded-providers.ts` file
 so that they are all together, making it easier to reference them, create new ones and
-delete them once the upgrade is over. 
+delete them once the upgrade is over.
 
-我们建议在一个独立的`ajs-upgraded-providers.ts`中声明这个工厂提供商，以便把它们都放在一起，这样便于引用、创建新的以及在升级完毕时删除它们。
+很多开发者都喜欢在一个独立的`ajs-upgraded-providers.ts`中声明这个工厂提供商，以便把它们都放在一起，这样便于引用、创建新的以及在升级完毕时删除它们。
 
 It's also recommended to export the `heroesServiceFactory` function so that Ahead-of-Time
-compilation can pick it up. 
+compilation can pick it up.
 
 我们还建议导出`heroesServiceFactory`函数，以便AOT编译器可以拿到它们。
 
 
 <code-example path="upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts" title="ajs-upgraded-providers.ts">
-
 </code-example>
 
-
-
 <code-example path="upgrade-module/src/app/ajs-to-a-providers/app.module.ts" region="register" title="app.module.ts">
-
 </code-example>
 
 
 
-We can then inject it in Angular using it's class as a type annotation:
-
+You can then inject it in Angular using it's class as a type annotation:
 然后我们可以一个字符串型令牌，把它注入到Angular中：
 
-
 <code-example path="upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts" title="hero-detail.component.ts">
 
 </code-example>
 
-
-
 <div class="alert is-helpful">
 
-
-
-In this example we upgraded a service class, which has the added benefit that
-we can use a TypeScript type annotation when we inject it. While it doesn't
+In this example you upgraded a service class.
+You can use a TypeScript type annotation when you inject it. While it doesn't
 affect how the dependency is handled, it enables the benefits of static type
 checking. This is not required though, and any AngularJS service, factory, or
 provider can be upgraded.
@@ -1609,43 +1244,33 @@ provider can be upgraded.
 
 </div>
 
-
-
 ### Making Angular Dependencies Injectable to AngularJS
 
 ### 让Angular的依赖能被注入到AngularJS中
 
-In addition to upgrading AngularJS dependencies, we can also *downgrade*
-Angular dependencies, so that we can use them from AngularJS. This can be
-useful when we start migrating services to Angular or creating new services
-in Angular while we still have components written in AngularJS.
+In addition to upgrading AngularJS dependencies, you can also *downgrade*
+Angular dependencies, so that you can use them from AngularJS. This can be
+useful when you start migrating services to Angular or creating new services
+in Angular while retaining components written in AngularJS.
 
 除了能升级AngularJS依赖之外，我们还能*降级*Angular的依赖，以便我们能在AngularJS中使用它们。
-当我们已经开始把服务移植到Angular或在Angular中创建新服务，但同时还有一些用AngularJS写成的组件时，这会非常有用。
-
-For example, we might have an Angular service called `Heroes`:
-
+当我们已经开始把服务移植到Angular或在Angular中创建新服务，但同时还有一些用AngularJS写成的组件时，这会非常有用。For example, you might have an Angular service called `Heroes`:
 例如，我们可能有一个Angular的`Heroes`服务：
 
-
 <code-example path="upgrade-module/src/app/a-to-ajs-providers/heroes.ts" title="heroes.ts">
-
 </code-example>
 
-
-
 Again, as with Angular components, register the provider with the `NgModule` by adding it to the module's `providers` list.
 
 仿照Angular组件，我们通过把该提供商加入`NgModule`的`providers`列表中来注册它。
 
 
 <code-example path="upgrade-module/src/app/a-to-ajs-providers/app.module.ts" region="ngmodule" title="app.module.ts">
-
 </code-example>
 
 
 
-Now wrap the Angular `Heroes` in an *AngularJS factory function* using `downgradeInjectable()`.
+Now wrap the Angular `Heroes` in an *AngularJS factory function* using `downgradeInjectable()` 
 and plug the factory into an AngularJS module. 
 The name of the AngularJS dependency is up to you:
 
@@ -1654,171 +1279,56 @@ The name of the AngularJS dependency is up to you:
 
 
 <code-example path="upgrade-module/src/app/a-to-ajs-providers/app.module.ts" region="register" title="app.module.ts">
-
 </code-example>
 
 
 
-After this, the service is injectable anywhere in our AngularJS code:
-
+After this, the service is injectable anywhere in  AngularJS code:
 此后，该服务就能被注入到AngularJS代码中的任何地方了：
 
-
 <code-example path="upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts" title="hero-detail.component.ts">
-
 </code-example>
 
-
-
 ## Using Ahead-of-time compilation with hybrid apps
 
 ## 在混合式应用中使用AOT编译
 
-We can take advantage of Ahead-of-time (AoT) compilation on hybrid apps just like on any other
+You can take advantage of Ahead-of-time (AOT) compilation on hybrid apps just like on any other
 Angular application.
-The setup for an hybrid app is mostly the same as described in 
-[the Ahead-of-time Compilation chapter](cookbook/aot-compiler)
+The setup for an hybrid app is mostly the same as described in
+[the Ahead-of-time Compilation chapter](guide/aot-compiler)
 save for differences in `index.html` and `main-aot.ts`
 
 我们也可以其它Angular应用一样在混合式应用中发挥AOT编译的优势。
 对混合式应用的设置过程和[预编译](cookbook/aot-compiler)章节中所讲的几乎完全一样，不同点在于`index.html`和`main-aot.ts`中。
 
-Our `index.html` will likely have script tags loading AngularJS files, so the `index.html` we
-use for AoT must also load those files. 
+The `index.html` will likely have script tags loading AngularJS files, so the `index.html`
+for AOT must also load those files.
 An easy way to copy them is by adding each to the `copy-dist-files.js` file.
 
 我们的`index.html`仍然需要script标签来加载AngularJS的文件，因此我们使用AOT编译的`index.html`也需要加载那些文件。
 复制它们的简单方案是把它们全都添加到`copy-dist-files.js`文件中。
 
-We also need to use `UpgradeModule` to bootstrap a hybrid app after bootstrapping the 
-Module Factory:
-
-我们还要使用`UpgradeModule`在启动了模块工厂之后引导一个混合式应用：
+You'll need to use the generated `AppModuleFactory`, instead of the original `AppModule` to
+bootstrap the hybrid app:
 
+我们还要使用所生成的`AppModuleFactory`而不是原来的`AppModule`来引导一个混合式应用：
 
 <code-example path="upgrade-phonecat-2-hybrid/app/main-aot.ts" title="app/main-aot.ts">
-
 </code-example>
 
-
-
-And that's all we need to get the full benefit of AoT for Angular apps!
+And that's all you need do to get the full benefit of AOT for Angular apps!
 
 这就是我们为获取Angular应用的AOT优势所要做的一切。
 
-
-<div class="alert is-helpful">
-
-
-
-The AoT metadata collector will not detect lifecycle hook methods on a parent class' prototype,
-so in order for upgraded components to work we needs to implement the lifecycle hooks 
-on the upgraded component class and forward them to the `UpgradeComponent` parent.  
-
-AOT元数据收集器不能检测到父类原型中的生命周期钩子方法，因此为了让升级后的组件正常工作，我们要在升级后的组件类中实现生命周期钩子，
-并且把它们转发给`UpgradeComponent`的父类。
-
-
-</div>
-
-
-
-## Dividing routes between Angular and AngularJS
-
-## 在Angular和AngularJS之间划分路由
-
-Another important part of upgrading is upgrading routes.
-We could upgrade our whole app while still using the AngularJS router and then
-migrate all the routes in one fell swoop.
-But it would be much better to migrate routes one by one as they become upgraded.
-
-升级中的另一个重要部分是升级路由。
-我们固然可以升级整个应用但仍然使用AngularJS的路由器，然后一举把所有路由迁移过去。
-但更好地方式是在升级每个路由时逐个把它们迁移过去。
-
-The first step to have a dual router setup is to add an Angular root component containing
-one outlet for each router. 
-AngularJS will use `ng-view`, and Angular will use `router-outlet`.
-When one is using it's router, the other outlet will be empty. 
-
-让两个版本的路由器并存的第一步就是为每个路由器添加一个包含单一出口的根组件。
-AngularJS将会使用`ng-view`，而Angular将会使用`router-outlet`。
-当使用其中的一个路由器时，另一个路由出口就是空白的。
-
-
-<code-example path="upgrade-module/src/app/divide-routes/app.component.ts" title="app.component.ts">
-
-</code-example>
-
-
-
-We want to use this component in the body of our `index.html` instead of an AngularJS component: 
-
-我们要在`index.html`的`body`中使用该组件来代替AngularJS的组件。
-
-
-<code-example path="upgrade-module/src/index-divide-routes.html" region="body" title="app.component.ts (body)">
-
-</code-example>
-
-
-
-Next we declare both AngularJS and Angular routes as normal:
-
-接下来，我们用标准方式同时声明AngularJS和Angular的路由：
-
-
-<code-example path="upgrade-module/src/app/divide-routes/app.module.ts" region="ajs-route" title="app.module.ts (AngularJS route)">
-
-</code-example>
-
-
-
-<code-example path="upgrade-module/src/app/divide-routes/hero.module.ts" region="a-route" title="hero.module.ts (Angular route)">
-
-</code-example>
-
-
-
-In our `app.module.ts` we need to add `AppComponent` to the declarations and boostrap array.
-
-在`app.module.ts`中，我们需要把`AppComponent`添加到`declarations`和`bootstrap`数组中。
-
-Next we configure the router itself. 
-We want to use [hash navigation](guide/router#-hashlocationstrategy-) in Angular
-because that's what we're also using in AngularJS. 
-
-接下来，我们配置路由器本身。
-我们要在Angular中使用[hash navigation](guide/router#-hashlocationstrategy-)，因为我们也要在AngularJS中使用这种方式。
-
-Lastly, and most importantly, we want to use a custom `UrlHandlingStrategy` that will tell
-the Angular router which routes it should render - and only those.
-
-最后，最重要的是，我们要使用一个自定义的`UrlHandlingStrategy`，它会告诉Angular路由器应该渲染（且只渲染）哪个路由。
-
-
-<code-example path="upgrade-module/src/app/divide-routes/app.module.ts" region="router-config" title="app.module.ts (router config)">
-
-</code-example>
-
-
-
-That's it! Now we're running both routers at the same time.
-
-
-就这样！现在我们可以同时运行这两个路由器了。
-
-
-
 ## PhoneCat Upgrade Tutorial
 
 ## PhoneCat升级教程
 
-In this section and we will look at a complete example of
-preparing and upgrading an application using the `upgrade` module. The app
-we're going to work on is [Angular PhoneCat](https://github.com/angular/angular-phonecat)
+In this section, you'll learn to prepare and upgrade an application with `ngUpgrade`.
+The example app is [Angular PhoneCat](https://github.com/angular/angular-phonecat)
 from [the original AngularJS tutorial](https://docs.angularjs.org/tutorial),
-which is where many of us began our Angular adventures. Now we'll see how to
+which is where many of us began our Angular adventures. Now you'll see how to
 bring that application to the brave new world of Angular.
 
 在本节和下节中，我们将看一个完整的例子，它使用`upgrade`模块准备和升级了一个应用程序。
@@ -1826,218 +1336,155 @@ bring that application to the brave new world of Angular.
 那是我们很多人当初开始Angular探险之旅的起点。
 现在，我们来看看如何把该应用带入Angular的美丽新世界。
 
-During the process we'll learn how to apply the steps outlined in the
-[preparation guide](guide/upgrade#preparation) in practice: We'll align the application
-with Angular and also take TypeScript into use.
+During the process you'll learn how to apply the steps outlined in the
+[preparation guide](guide/upgrade#preparation). You'll align the application
+with Angular and also start writing in TypeScript.
 
 这期间，我们将学到如何在实践中应用[准备指南](guide/upgrade#preparation)中列出的那些重点步骤：
 我们先让该应用向Angular看齐，然后为它引入SystemJS模块加载器和TypeScript。
 
 To follow along with the tutorial, clone the
 [angular-phonecat](https://github.com/angular/angular-phonecat) repository
-and apply the steps as we go.
-
-要跟随本教程，请先把[angular-phonecat](https://github.com/angular/angular-phonecat)仓库克隆到本地，并跟我们一起应用这些步骤。
-
-In terms of project structure, this is where our work begins:
+and apply the steps as you go.
 
+要跟随本教程，请先把[angular-phonecat](https://github.com/angular/angular-phonecat)仓库克隆到本地，并跟我们一起应用这些步骤。In terms of project structure, this is where the work begins:
 在项目结构方面，我们工作的起点是这样的：
 
-
 <div class='filetree'>
-
   <div class='file'>
     angular-phonecat
   </div>
-
   <div class='children'>
-
     <div class='file'>
       bower.json
     </div>
-
     <div class='file'>
       karma.conf.js
     </div>
-
     <div class='file'>
       package.json
     </div>
-
     <div class='file'>
       app
     </div>
-
     <div class='children'>
-
       <div class='file'>
         core
       </div>
-
       <div class='children'>
-
         <div class='file'>
           checkmark
         </div>
-
         <div class='children'>
-
           <div class='file'>
             checkmark.filter.js
           </div>
-
           <div class='file'>
             checkmark.filter.spec.js
           </div>
-
         </div>
-
         <div class='file'>
           phone
         </div>
-
         <div class='children'>
-
           <div class='file'>
             phone.module.js
           </div>
-
           <div class='file'>
             phone.service.js
           </div>
-
           <div class='file'>
             phone.service.spec.js
           </div>
-
         </div>
-
         <div class='file'>
           core.module.js
         </div>
-
       </div>
-
       <div class='file'>
         phone-detail
       </div>
-
       <div class='children'>
-
         <div class='file'>
           phone-detail.component.js
         </div>
-
         <div class='file'>
           phone-detail.component.spec.js
         </div>
-
         <div class='file'>
           phone-detail.module.js
         </div>
-
         <div class='file'>
           phone-detail.template.html
         </div>
-
       </div>
-
       <div class='file'>
         phone-list
       </div>
-
       <div class='children'>
-
         <div class='file'>
           phone-list.component.js
         </div>
-
         <div class='file'>
           phone-list.component.spec.js
         </div>
-
         <div class='file'>
           phone-list.module.js
         </div>
-
         <div class='file'>
           phone-list.template.html
         </div>
-
       </div>
-
       <div class='file'>
         img
       </div>
-
       <div class='children'>
-
         <div class='file'>
            ...
         </div>
-
       </div>
-
       <div class='file'>
         phones
       </div>
-
       <div class='children'>
-
         <div class='file'>
            ...
         </div>
-
       </div>
-
       <div class='file'>
         app.animations.js
       </div>
-
       <div class='file'>
         app.config.js
       </div>
-
       <div class='file'>
         app.css
       </div>
-
       <div class='file'>
         app.module.js
       </div>
-
       <div class='file'>
         index.html
       </div>
-
     </div>
-
     <div class='file'>
       e2e-tests
     </div>
-
     <div class='children'>
-
       <div class='file'>
         protractor-conf.js
       </div>
-
       <div class='file'>
         scenarios.js
       </div>
-
     </div>
-
   </div>
-
 </div>
 
-
-
 This is actually a pretty good starting point. The code uses the AngularJS 1.5
 component API and the organization follows the
 [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md),
-which is an important [preparation step](guide/upgrade#following-the-angular-style-guide) before
+which is an important [preparation step](guide/upgrade#follow-the-angular-styleguide) before
 a successful upgrade.
 
 这确实是一个很好地起点。特别是，该结构遵循了[AngularJS 风格指南](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)，
@@ -2051,7 +1498,7 @@ a successful upgrade.
 * The `core`, `phone-detail`, and `phone-list` modules are each in their
   own subdirectory. Those subdirectories contain the JavaScript code as well as
   the HTML templates that go with each particular feature. This is in line with the
-  [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y152)
+  [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure)
   and [Modularity](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity)
   rules.
 
@@ -2061,91 +1508,78 @@ a successful upgrade.
 
 * Unit tests are located side-by-side with application code where they are easily
   found, as described in the rules for
-  [Organizing Tests](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y197).
+  [Organizing Tests](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#organizing-tests).
 
   单元测试都和应用代码在一起，它们很容易找到。就像规则
-  [组织测试文件](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y197)中要求的那样。
+  [组织测试文件](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#organizing-tests)中要求的那样。
 
 
 ### Switching to TypeScript
 
 ### 切换到TypeScript
 
-Since we're going to be writing our Angular code in TypeScript, it makes sense to
-bring in the TypeScript compiler even before we begin upgrading.
+Since you're going to be writing Angular code in TypeScript, it makes sense to
+bring in the TypeScript compiler even before you begin upgrading.
 
 因为我们将使用TypeScript编写Angular的代码，所以在开始升级之前，我们把TypeScript的编译器设置好是很合理的。
 
-We will also start to gradually phase out the Bower package manager in favor
-of NPM. We'll install all new dependencies using NPM, and will eventually be
-able to remove Bower from the project.
+You'll also start to gradually phase out the Bower package manager in favor
+of NPM, installing all new dependencies using NPM, and eventually removing Bower from the project.
 
 我们还将开始逐步淘汰Bower包管理器，换成我们更喜欢的NPM。后面我们将使用NPM来安装新的依赖包，并最终从项目中移除Bower。
 
-Let's begin by installing TypeScript to the project.
+Begin by installing TypeScript to the project.
 
 让我们先把TypeScript包安装到项目中。
 
-
 <code-example format="">
   npm i typescript --save-dev
-
 </code-example>
 
-
-
-Let's also add run scripts for the `tsc` TypeScript compiler to `package.json`:
-
-我们还要把用来运行TypeScript编译器`tsc`和`typings`工具的脚本添加到`package.json`中：
-
-
-We can now install type definitions for the existing libraries that
-we're using but that don't come with prepackaged types: AngularJS and the 
+Install type definitions for the existing libraries that
+you're using but that don't come with prepackaged types: AngularJS and the
 Jasmine unit test framework.
 
-现在我们可以使用typings工具来安装AngularJS和Jasmine单元测试框架的类型定义文件。
-
+我们还要为那些没有自带类型信息的库（比如 AngularJS 和 Jasmine）安装类型定义文件。
 
 <code-example format="">
-  npm install @types/jasmine @types/angular  @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev
-
+  npm install @types/jasmine @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev
 </code-example>
 
-
-
-We should also configure the TypeScript compiler so that it can understand our
-project. We'll add a `tsconfig.json` file to the project directory, just like we do
-in the documentation [setup](guide/setup). It instructs the TypeScript compiler how
-to interpret our source files.
+You should also configure the TypeScript compiler with a `tsconfig.json` in the project directory
+as described in the [TypeScript Configuration](guide/typescript-configuration) guide.
+The `tsconfig.json` file tells the TypeScript compiler how to turn your TypeScript files
+into ES5 code bundled into CommonJS modules.
 
 我们还应该配置TypeScript编译器，以便它能理解我们的项目结构。我们要往项目目录下添加一个`tsconfig.json`文件，
 就像在[搭建本地开发环境](guide/setup)中做过的那样。它将告诉TypeScript编译器，该如何编译我们的源文件。
+`tsconfig.json`文件会告诉 TypeScript 编译器如何把 TypeScript 文件转成 ES5 代码，并打包进 CommonJS 模块中。
 
+Finally, you should add some npm scripts in `package.json` to compile the TypeScript files to
+JavaScript (based on the `tsconfig.json` configuration file):
 
-We are telling the TypeScript compiler to turn our TypeScript files to ES5 code
-bundled into CommonJS modules.
+最后，我们应该把下列 npm 脚本添加到 `package.json` 中，用于把 TypeScript 文件编译成 JavaScript （根据`tsconfig.json`的配置）：
 
-我们告诉TypeScript编译器，把TypeScript文件转换成ES5代码，并打包进CommonJS模块中。
+<code-example format="">
+  "script": {
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    ...
+</code-example>
 
-We can now launch the TypeScript compiler from the command line. It will watch
-our `.ts` source files and compile them to JavaScript on the fly. Those compiled
-`.js` files are then loaded into the browser by SystemJS. This is a process we'll
-want to have continuously running in the background as we go along.
-
-我们现在可以从命令行启动TypeScript编译器。它将监控`.ts`源码文件，并随时把它们编译成JavaScript。
-然后这些编译出的`.js`文件被SystemJS加载到浏览器中。当我们继续往前走的时候，这个过程将在后台持续运行。
+Now launch the TypeScript compiler from the command line in watch mode:
 
+现在，从命令行中用监视模式启动 TypeScript 编译器：
 
 <code-example format="">
   npm run tsc:w
-
 </code-example>
 
+Keep this process running in the background, watching and recompiling as you make changes.
 
-
-The next thing we'll do is convert our JavaScript files to TypeScript. Since
-TypeScript is a superset of ECMAScript 2015, which in turn is a superset
-of ECMAScript 5, we can simply switch the file extensions from `.js` to `.ts`
+Next, convert your current JavaScript files into TypeScript. Since
+TypeScript is a super-set of ECMAScript 2015, which in turn is a super-set
+of ECMAScript 5, you can simply switch the file extensions from `.js` to `.ts`
 and everything will work just like it did before. As the TypeScript compiler
 runs, it emits the corresponding `.js` file for every `.ts` file and the
 compiled JavaScript is what actually gets executed. If you start
@@ -2157,7 +1591,7 @@ application in your browser.
 它们还是会像以前一样工作。由于TypeScript编译器仍在运行，它会为每一个`.ts`文件生成对应的`.js`文件，而真正运行的是编译后的`.js`文件。
 如果你用`npm start`开启了本项目的HTTP服务器，你会在浏览器中看到一个功能完好的应用。
 
-Now that we have TypeScript though, we can start benefiting from some of its
+Now that you have TypeScript though, you can start benefiting from some of its
 features. There's a lot of value the language can provide to AngularJS applications.
 
 有了TypeScript，我们就可以从它的一些特性中获益了。此语言可以为AngularJS应用提供很多价值。
@@ -2172,16 +1606,16 @@ parameters, and destructuring assignments.
 纳入那些添加到ES2015中的新特性。
 这包括`let`、`const`、箭头函数、函数默认参数以及解构(destructure)赋值。
 
-Another thing we can do is start adding *type safety* to our code. This has
-actually partially already happened because of the AngularJS typings we installed.
-TypeScript are checking that we are calling AngularJS APIs correctly when we do
+Another thing you can do is start adding *type safety* to your code. This has
+actually partially already happened because of the AngularJS typings you installed.
+TypeScript are checking that you are calling AngularJS APIs correctly when you do
 things like register components to Angular modules.
 
 我们能做的另一件事就是把*类型安全*添加到代码中。这实际上已经部分完成了，因为我们已经安装了AngularJS的类型定义。
 当我们正确调用AngularJS的API时，TypeScript会帮我们检查它 —— 比如往Angular模块中注册组件。
 
-But we can also start adding *type annotations* for our own code to get even more
-out of TypeScript's type system. For instance, we can annotate the checkmark
+But you can also start adding *type annotations* to get even more
+out of TypeScript's type system. For instance, you can annotate the checkmark
 filter so that it explicitly expects booleans as arguments. This makes it clearer
 what the filter is supposed to do.
 
@@ -2191,90 +1625,68 @@ what the filter is supposed to do.
 
 
 <code-example path="upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts" title="app/core/checkmark/checkmark.filter.ts">
-
 </code-example>
 
-
-
-In the `Phone` service we can explicitly annotate the `$resource` service dependency
+In the `Phone` service, you can explicitly annotate the `$resource` service dependency
 as an `angular.resource.IResourceService` - a type defined by the AngularJS typings.
 
 在`Phone`服务中，我们可以明确的把`$resource`服务声明为`angular.resource.IResourceService`，一个AngularJS类型定义提供的类型。
 
 
 <code-example path="upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts" title="app/core/phone/phone.service.ts">
-
 </code-example>
 
 
 
-We can apply the same trick to the application's route configuration file in `app.config.ts`,
-where we are using the location and route services. By annotating them accordingly TypeScript
-can verify we're calling their APIs with the correct kinds of arguments.
-
+You can apply the same trick to the application's route configuration file in `app.config.ts`,
+where you are using the location and route services. By annotating them accordingly TypeScript
+can verify you're calling their APIs with the correct kinds of arguments.
 我们可以在应用的路由配置中使用同样的技巧，那里我们用到了location和route服务。
 一旦给它们提供了类型信息，TypeScript就能检查我们是否在用类型的正确参数来调用它们了。
 
-
 <code-example path="upgrade-phonecat-1-typescript/app/app.config.ts" title="app/app.config.ts">
-
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 The [AngularJS 1.x type definitions](https://www.npmjs.com/package/@types/angular)
-we installed are not officially maintained by the Angular team,
+you installed are not officially maintained by the Angular team,
 but are quite comprehensive. It is possible to make an AngularJS 1.x application
 fully type-annotated with the help of these definitions.
 
 我们用typings工具安装的这个[AngularJS.x类型定义文件](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/angularjs)
 并不是由Angular开发组维护的，但它也已经足够全面了。借助这些类型定义的帮助，它可以为AngularJS.x程序加上全面的类型注解。
 
-If this is something we wanted to do, it would be a good idea to enable
+If this is something you wanted to do, it would be a good idea to enable
 the `noImplicitAny` configuration option in `tsconfig.json`. This would
 cause the TypeScript compiler to display a warning when there's any code that
-does not yet have type annotations. We could use it as a guide to inform
-us about how close we are to having a fully annotated project.
-
+does not yet have type annotations. You could use it as a guide to inform
+us about how close you are to having a fully annotated project.
 如果我们想这么做，那么在`tsconfig.json`中启用`noImplicitAny`配置项就是一个好主意。
 这样，如果遇到什么还没有类型注解的代码，TypeScript编译器就会显示一个警告。
 我们可以用它作为指南，告诉我们现在与一个完全类型化的项目距离还有多远。
 
-
 </div>
 
-
-
-Another TypeScript feature we can make use of is *classes*. In particular, we
-can turn our component controllers into classes. That way they'll be a step
-closer to becoming Angular component classes, which will make our life
-easier once we do the upgrade.
+Another TypeScript feature you can make use of is *classes*. In particular, you
+can turn component controllers into classes. That way they'll be a step
+closer to becoming Angular component classes, which will make life
+easier once you upgrade.
 
 我们能用的另一个TypeScript特性是*类*。具体来讲，我们可以把控制器转换成类。
 这种方式下，我们离成为Angular组件类就又近了一步，它会令我们的升级之路变得更简单。
 
 AngularJS expects controllers to be constructor functions. That's exactly what
-ES2015/TypeScript classes are under the hood, so that means we can just plug in a
+ES2015/TypeScript classes are under the hood, so that means you can just plug in a
 class as a component controller and AngularJS will happily use it.
 
 AngularJS期望控制器是一个构造函数。这实际上就是ES2015/TypeScript中的类，
-这也就意味着只要我们把一个类注册为组件控制器，AngularJS就会愉快的使用它。
-
-Here's what our new class for the phone list component controller looks like:
-
+这也就意味着只要我们把一个类注册为组件控制器，AngularJS就会愉快的使用它。Here's what the new class for the phone list component controller looks like:
 新的“电话列表(phone list)”组件控制器类是这样的：
 
-
 <code-example path="upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts" title="app/phone-list/phone-list.component.ts">
-
 </code-example>
 
-
-
 What was previously done in the controller function is now done in the class
 constructor function. The dependency injection annotations are attached
 to the class using a static property `$inject`. At runtime this becomes the
@@ -2284,39 +1696,36 @@ to the class using a static property `$inject`. At runtime this becomes the
 被附加到了类上。在运行时，它们变成了`PhoneListController.$inject`。
 
 The class additionally declares three members: The array of phones, the name of
-the current sort key, and the search query. These are all things we have already
+the current sort key, and the search query. These are all things you have already
 been attaching to the controller but that weren't explicitly declared anywhere.
 The last one of these isn't actually used in the TypeScript code since it's only
-referred to in the template, but for the sake of clarity we want to define all the
-members our controller will have.
+referred to in the template, but for the sake of clarity you should define all of the
+controller members.
 
 该类还声明了另外三个成员：电话列表、当前排序键的名字和搜索条件。
 这些东西我们以前就加到了控制器上，只是从来没有在任何地方显式定义过它们。最后一个成员从未真正在TypeScript代码中用过，
 因为它只是在模板中被引用过。但为了清晰起见，我们还是应该定义出此控制器应有的所有成员。
 
-In the Phone detail controller we'll have two members: One for the phone
+In the Phone detail controller, you'll have two members: One for the phone
 that the user is looking at and another for the URL of the currently displayed image:
 
 在电话详情控制器中，我们有两个成员：一个是用户正在查看的电话，另一个是正在显示的图像：
 
 
 <code-example path="upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts" title="app/phone-detail/phone-detail.component.ts">
-
 </code-example>
 
-
-
-This makes our controller code look a lot more like Angular already. We're
+This makes the controller code look a lot more like Angular already. You're
 all set to actually introduce Angular into the project.
 
 这已经让我们的控制器代码看起来更像Angular了。我们的准备工作做好了，可以引进Angular到项目中了。
 
-If we had any AngularJS services in the project, those would also be
+If you had any AngularJS services in the project, those would also be
 a good candidate for converting to classes, since like controllers,
-they're also constructor functions. But we only have the `Phone` factory
+they're also constructor functions. But you only have the `Phone` factory
 in this project, and that's a bit special since it's an `ngResource`
-factory. So we won't be doing anything to it in the preparation stage.
-We'll instead turn it directly into an Angular service.
+factory. So you won't be doing anything to it in the preparation stage.
+You'll instead turn it directly into an Angular service.
 
 如果项目中有任何AngularJS的服务，它们也是转换成类的优秀候选人，像控制器一样，它们也是构造函数。
 但是在本项目中，我们只有一个`Phone`工厂，这有点特别，因为它是一个`ngResource`工厂。
@@ -2325,10 +1734,10 @@ We'll instead turn it directly into an Angular service.
 ### Installing Angular
 ### 安装Angular
 
-Having completed our preparation work, let's get going with the Angular
-upgrade of PhoneCat. We'll do this incrementally with the help of the
-[upgrade module](guide/upgrade#upgrading-with-the-upgrade-module) that comes with Angular.
-By the time we're done, we'll be able to remove AngularJS from the project
+Having completed the preparation work, get going with the Angular
+upgrade of PhoneCat. You'll do this incrementally with the help of
+[ngUpgrade](#upgrading-with-ngupgrade) that comes with Angular.
+By the time you're done, you'll be able to remove AngularJS from the project
 completely, but the key is to do this piece by piece without breaking the application.
 
 我们已经完成了准备工作，接下来就开始把PhoneCat升级到Angular。
@@ -2340,16 +1749,16 @@ completely, but the key is to do this piece by piece without breaking the applic
 
 
 
-The project also contains some animations, which we are not yet upgrading in this version of the guide. This will change in a later release.
+The project also contains some animations.
+You won't upgrade them in this version of the guide.
+Turn to the [Angular animations](guide/animations) guide to learn about that.
 
 该项目还包含一些动画，在此指南的当前版本我们先不升级它，等到后面的发行版再改。
 
 
 </div>
 
-
-
-Let's install Angular into the project, along with the SystemJS module loader.
+Install Angular into the project, along with the SystemJS module loader.
 Take a look at the results of the [Setup](guide/setup) instructions
 and get the following configurations from there:
 
@@ -2371,15 +1780,12 @@ Once these are done, run:
 
 <code-example format="">
   npm install
-
 </code-example>
 
-
-
-We can soon load Angular dependencies into the application via `index.html`,
-but first we need to do some directory path adjustments. This is because we're going
-to need to load files from `node_modules` and the project root, whereas so far
-in this project everything has been loaded from the `/app` directory.
+Soon you can load Angular dependencies into the application via `index.html`,
+but first you need to do some directory path adjustments.
+You'll need to load files from `node_modules` and the project root instead of
+from the `/app` directory as you've been doing to this point.
 
 我们可以通过`index.html`来把Angular的依赖快速加载到应用中，
 但首先，我们得做一些目录结构调整。这是因为我们正准备从`node_modules`中加载文件，然而目前项目中的每一个文件都是从`/app`目录下加载的。
@@ -2390,23 +1796,23 @@ instead of `app`:
 
 把`app/index.html`移入项目的根目录，然后把`package.json`中的开发服务器根目录也指向项目的根目录，而不再是`app`目录：
 
+<code-example format="">
+  "start": "http-server ./ -a localhost -p 8000 -c-1",
+</code-example>
 
-Now we're able to serve everything from the project root to the web browser. But we do *not*
+Now you're able to serve everything from the project root to the web browser. But you do *not*
 want to have to change all the image and data paths used in the application code to match
-our development setup. For that reason, we'll add a `<base>` tag to `index.html`, which will
+the development setup. For that reason, you'll add a `<base>` tag to `index.html`, which will
 cause relative URLs to be resolved back to the `/app` directory:
 
 现在，我们能把项目根目录下的每一样东西发给浏览器了。但我们不想为了适应开发环境中的设置，被迫修改应用代码中用到的所有图片和数据的路径。因此，我们往`index.html`中添加一个`<base>`标签，它将导致各种相对路径被解析回`/app`目录：
 
 
 <code-example path="upgrade-phonecat-2-hybrid/index.html" region="base" title="index.html">
-
 </code-example>
 
-
-
-Now we can load Angular via SystemJS. We'll add the Angular polyfills and the
-SystemJS config to the end of the `<head>` section, and then we'll use `System.import`
+Now you can load Angular via SystemJS. You'll add the Angular polyfills and the
+SystemJS config to the end of the `<head>` section, and then you'll use `System.import`
 to load the actual application:
 
 现在我们可以通过SystemJS加载Angular了。我们将把Angular的填充库(polyfills)
@@ -2414,39 +1820,32 @@ to load the actual application:
 
 
 <code-example path="upgrade-phonecat-2-hybrid/index.html" region="angular" title="index.html">
-
 </code-example>
 
-
-
-We also need to make a couple of adjustments
+You also need to make a couple of adjustments
 to the `systemjs.config.js` file installed during [setup](guide/setup).
 
 我们还需要对[环境设置](guide/setup)期间安装的`systemjs.config.js`文件做一些调整。
 
-We want to point the browser to the project root when loading things through SystemJS,
+Point the browser to the project root when loading things through SystemJS,
 instead of using the  `<base>` URL.
 
 我们要在通过SystemJS加载期间为浏览器指出项目的根在哪里，而不再使用`<base>` URL。
 
-We also need to install the `upgrade` package via `npm install @angular/upgrade --save`
-and add a mapping for the `@angular/upgrade/static` package. 
+Install the `upgrade` package via `npm install @angular/upgrade --save`
+and add a mapping for the `@angular/upgrade/static` package.
 
 我们还要通过`npm install @angular/upgrade --save`来安装`upgrade`包，并为`@angular/upgrade/static`包添加一个映射。
 
-
 <code-example path="upgrade-phonecat-2-hybrid/systemjs.config.1.js" region="paths" title="systemjs.config.js">
-
 </code-example>
 
-
-
 ### Creating the _AppModule_
 
 ### 创建*AppModule*
 
 Now create the root `NgModule` class called `AppModule`.
-There is already a file named `app.module.ts` that holds the AngularJS module. 
+There is already a file named `app.module.ts` that holds the AngularJS module.
 Rename it to `app.module.ajs.ts` and update the corresponding script name in the `index.html` as well.
 The file contents remain:
 
@@ -2457,92 +1856,74 @@ The file contents remain:
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/app.module.ajs.ts" title="app.module.ajs.ts">
-
 </code-example>
 
-
-
 Now create a new `app.module.ts` with the minimum `NgModule` class:
 
 然后创建一个新的`app.module.ts`文件，其中是一个最小化的`NgModule`类：
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="bare" title="app.module.ts">
-
 </code-example>
 
-
-
 ### Bootstrapping a hybrid PhoneCat
 
 ### 引导PhoneCat的1+2混合式应用
 
-What we'll do next is bootstrap the application as a *hybrid application*
-that supports both AngularJS and Angular components. Once we've done that
-we can start converting the individual pieces to Angular.
+Next, you'll bootstrap the application as a *hybrid application*
+that supports both AngularJS and Angular components. After that,
+you can start converting the individual pieces to Angular.
 
 接下来，我们把该应用程序引导改装为一个同时支持AngularJS和Angular的*混合式应用*。
 然后，就能开始把这些不可分割的小块转换到Angular了。
 
-To [bootstrap a hybrid application](guide/upgrade#bootstrapping-hybrid-applications),
-we first need to import `UpgradeModule` in our `AppModule`, and override it's bootstrap method:
-
-要引导一个[混合式应用程序](guide/upgrade#bootstrapping-hybrid-applications)，
-我们首先需要在`AppModule`中导入`UpgradeModule，并覆盖它的启动方法：
-
-
-<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="upgrademodule" title="app/app.module.ts">
-
-</code-example>
-
-
-
-Our application is currently bootstrapped using the AngularJS `ng-app` directive
-attached to the `<html>` element of the host page. This will no longer work with
-Angular. We should switch to a JavaScript-driven bootstrap instead.
+The application is currently bootstrapped using the AngularJS `ng-app` directive
+attached to the `<html>` element of the host page. This will no longer work in the hybrid
+app. Switch to the [ngUpgrade bootstrap](#bootstrapping-hybrid-applications) method
+instead.
 
 我们的应用现在是使用宿主页面中附加到`<html>`元素上的`ng-app`指令引导的。
-但在Angular中，它不再工作了。我们得切换成JavaScript驱动的引导方式。
+但在混合式应用中，它不再工作了。我们得用[ngUpgrade bootstrap](#bootstrapping-hybrid-applications)方法代替。
 
-So, remove the `ng-app` attribute from `index.html`, and instead bootstrap via `src/main.ts`.
+First, remove the `ng-app` attribute from `index.html`.
+Then import `UpgradeModule` in the `AppModule`, and override it's `ngDoBootstrap` method:
+
+首先，从`index.html`中移除`ng-app`。然后在`AppModule`中导入`UpgradeModule`，并改写它的`ngDoBootstrap`方法：
+
+<code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="upgrademodule" title="app/app.module.ts">
+</code-example>
+
+Note that you are bootstrapping the AngularJS module from inside `ngDoBootstrap`.
+The arguments are the same as you would pass to `angular.bootstrap` if you were manually
+bootstrapping AngularJS: the root element of the application; and an array of the
+AngularJS 1.x modules that you want to load.
+
+注意，我们正在从内部的`ngDoBootstrap`中引导 AngularJS 模块。
+它的参数和我们在手动引导AngularJS时传给`angular.bootstrap`的是一样的：应用的根元素，和所要加载的 AngularJS 1.x 模块的数组。
+
+Finally, bootstrap the `AppModule` in `src/main.ts`.
 This file has been configured as the application entrypoint in `systemjs.config.js`,
 so it is already being loaded by the browser.
 
-所以，从`index.html`中移除`ng-app`属性，并把这些加载`main.ts`中。
-在`systemjs.config.js`中已经将此文件配置为应用的入口，所以它已被浏览器所加载。
+最后，在`src/main.ts`中引导这个`AppModule`。该文件在`systemjs.config.js`中被配置为了应用的入口，所以它已经被加载进了浏览器中。
 
 
-<code-example path="upgrade-phonecat-2-hybrid/app/main.ts" region="bootstrap" title="upgrade-phonecat-2-hybrid/app/main.ts">
-
+<code-example path="upgrade-phonecat-2-hybrid/app/main.ts" region="bootstrap" title="app/main.ts">
 </code-example>
 
+Now you're running both AngularJS and Angular at the same time. That's pretty
+exciting! You're not running any actual Angular components yet. That's next.
 
-
-The arguments used here are the root element of the application (which is
-the same element we had `ng-app` on earlier), and the AngularJS 1.x modules
-that we want to load. Since we're bootstrapping the app through
-an `UpgradeModule`, we're actually now running the app as a **hybrid app**.
-
-这里使用的参数是应用的根元素(也就是以前我们放`ng-app`的元素)，和我们准备加载的AngularJS.x模块。
-由于我们是通过`UpgradeAdapter`引导应用的，所以实际在运行的应用实际上是一个混合体。
-
-This means we are now running both AngularJS and Angular at the same time. That's pretty
-exciting! We're not running any actual Angular components yet though,
-so let's do that next.
-
-我们现在同时运行着AngularJS和Angular。漂亮！不过我们还没有运行什么实际的Angular组件，接下来我们就做这件事。
-
+现在，我们同时运行着AngularJS和Angular。漂亮！不过我们还没有运行什么实际的Angular组件，接下来我们就做这件事。
 
 <div class="l-sub-section">
 
-
-
 #### Why declare _angular_ as _angular.IAngularStatic_?
 
 #### 为何要声明*angular*为*angular.IAngularStatic*？
 
 `@types/angular` is declared as a UMD module, and due to the way
-<a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions" target="_blank">UMD typings</a>
+<a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions">UMD typings</a>
 work, once you have an ES6 `import` statement in a file all UMD typed modules must also be
 imported via `import` statements instead of being globally available.
 
@@ -2552,8 +1933,8 @@ imported via `import` statements instead of being globally available.
 
 AngularJS is currently loaded by a script tag in `index.html`, which means that the whole app
 has access to it as a global and uses the same instance of the `angular` variable.
-If we used `import * as angular from 'angular'` instead we would also need to overhaul how we
-load every file in our AngularJS app to use ES6 modules in order to ensure AngularJS was being
+If you used `import * as angular from 'angular'` instead, you'd also have to
+load every file in the AngularJS app to use ES2015 modules in order to ensure AngularJS was being
 loaded correctly.
 
 AngularJS是日前是通过`index.html`中的script标签加载，这意味着整个应用是作为一个全局变量进行访问的，
@@ -2561,9 +1942,9 @@ AngularJS是日前是通过`index.html`中的script标签加载，这意味着
 但如果我们使用`import * as angular from 'angular'`，我还需要彻底修改AngularJS应用中加载每个文件的方式，
 确保AngularJS应用被正确加载。
 
-This is a considerable effort and it often isn't worth it, especially since we are in the
-process of moving our our to Angular already.
-Instead we declare `angular` as `angular.IAngularStatic` to indicate it is a global variable
+This is a considerable effort and it often isn't worth it, especially since you are in the
+process of moving your code to Angular.
+Instead, declare `angular` as `angular.IAngularStatic` to indicate it is a global variable
 and still have full typing support.
 
 这需要相当多的努力，通常也不值得去做，特别是我们的应用正在朝着Angular前进。
@@ -2573,21 +1954,19 @@ and still have full typing support.
 
 </div>
 
-
-
 ### Upgrading the Phone service
 
 ### 升级`Phone`服务
 
-The first piece we'll port over to Angular is the `Phone` service, which
+The first piece you'll port over to Angular is the `Phone` service, which
 resides in `app/core/phone/phone.service.ts` and makes it possible for components
 to load phone information from the server. Right now it's implemented with
-ngResource and we're using it for two things:
+ngResource and you're using it for two things:
 
 我们要移植到Angular的第一块是`Phone`工厂(位于`app/js/core/phones.factory.ts`)，
 并且让它能帮助控制器从服务器上加载电话信息。目前，它是用`ngResource`实现的，我们用它做两件事：
 
-* For loading the list of all phones into the phone list component
+* For loading the list of all phones into the phone list component.
 
   把所有电话的列表加载到电话列表组件中。
   
@@ -2595,12 +1974,12 @@ ngResource and we're using it for two things:
 
   把一台电话的详情加载到电话详情组件中。
 
-We can replace this implementation with an Angular service class, while
-keeping our controllers in AngularJS land.
+You can replace this implementation with an Angular service class, while
+keeping the controllers in AngularJS land.
 
 我们可以用Angular的服务类来替换这个实现，而把控制器继续留在AngularJS的地盘上。
 
-In the new version, we import the Angular HTTP module and call its `Http` service instead of `ngResource`.
+In the new version, you import the Angular HTTP module and call its `Http` service instead of `ngResource`.
 
 在这个新版本中，我们导入了Angular的HTTP模块，并且用它的`Http`服务替换掉`NgResource`。
 
@@ -2610,27 +1989,21 @@ Re-open the `app.module.ts` file, import and add `HttpModule` to the `imports` a
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="httpmodule" title="app.module.ts">
-
 </code-example>
 
-
-
-Now we're ready to upgrade the Phone service itself. We replace the ngResource-based
+Now you're ready to upgrade the Phone service itself. Replace the ngResource-based
 service in `phone.service.ts` with a TypeScript class decorated as `@Injectable`:
 
 现在，我们已经准备好了升级`Phones`服务本身。我们将为`phone.service.ts`文件中基于ngResource的服务加上`@Injectable`装饰器：
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts" region="classdef" title="app/core/phone/phone.service.ts (skeleton)" linenums="false">
-
 </code-example>
 
-
-
 The `@Injectable` decorator will attach some dependency injection metadata
 to the class, letting Angular know about its dependencies. As described
-by our [Dependency Injection Guide](guide/dependency-injection),
-this is a marker decorator we need to use for classes that have no other
+by the [Dependency Injection Guide](guide/dependency-injection),
+this is a marker decorator you need to use for classes that have no other
 Angular decorators but still need to have their dependencies injected.
 
 `@Injectable`装饰器将把一些依赖注入相关的元数据附加到该类上，让Angular知道它的依赖信息。
@@ -2640,31 +2013,23 @@ Angular decorators but still need to have their dependencies injected.
 In its constructor the class expects to get the `Http` service. It will
 be injected to it and it is stored as a private field. The service is then
 used in the two instance methods, one of which loads the list of all phones,
-and the other the details of a particular phone:
+and the other loads the details of a specified phone:
+
 
 在它的构造函数中，该类期待一个`Http`服务。`Http`服务将被注入进来并存入一个私有字段。
 然后该服务在两个实例方法中被使用到，一个加载所有电话的列表，另一个加载一台指定电话的详情：
 
-
-<code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts" region="fullclass" title="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts">
-
+<code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts" region="fullclass" title="app/core/phone/phone.service.ts">
 </code-example>
 
-
-
 The methods now return Observables of type `PhoneData` and `PhoneData[]`. This is
-a type we don't have yet, so let's add a simple interface for it:
-
+a type you don't have yet. Add a simple interface for it:
 该方法现在返回一个`Phone`类型或`Phone[]`类型的可观察对象(Observable)。
 这是一个我们从未用过的类型，因此我们得为它新增一个简单的接口：
 
-
 <code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts" region="phonedata-interface" title="app/core/phone/phone.service.ts (interface)" linenums="false">
-
 </code-example>
 
-
-
 `@angular/upgrade/static` has a `downgradeInjectable` method for the purpose of making
 Angular services available to AngularJS code. Use it to plug in the `Phone` service:
 
@@ -2673,75 +2038,53 @@ Angular services available to AngularJS code. Use it to plug in the `Phone` serv
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts" region="downgrade-injectable" title="app/core/phone/phone.service.ts (downgrade)" linenums="false">
-
 </code-example>
 
-
-
 Here's the full, final code for the service:
 
 最终，该类的全部代码如下：
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts" title="app/core/phone/phone.service.ts">
-
 </code-example>
 
-
-
-Notice that we're importing the `map` operator of the RxJS `Observable` separately.
-We need to do this for all RxJS operators that we want to use, since Angular
-does not load all of them by default.
+Notice that you're importing the `map` operator of the RxJS `Observable` separately.
+Do this for every RxJS operator.
 
 注意，我们单独导入了RxJS `Observable`中的`map`操作符。
-我们需要对想用的所有RxJS操作符这么做，因为Angular默认不会加载所有RxJS操作符。
-
-The new `Phone` service has the same features as the original, `ngResource`-based service.
-Because it's an Angular service, we register it with the `NgModule` providers:
-
+我们需要对想用的所有RxJS操作符这么做，因为Angular默认不会加载所有RxJS操作符。The new `Phone` service has the same features as the original, `ngResource`-based service. 
+Because it's an Angular service, you register it with the `NgModule` providers:
 这个新的`Phone`服务具有和老的基于`ngResource`的服务相同的特性。
 因为它是Angular服务，我们通过`NgModule`的`providers`数组来注册它：
 
-
 <code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="phone" title="app.module.ts">
-
 </code-example>
 
-
-
-Now that we are loading `phone.service.ts` through an import that is resolved
-by SystemJS, we should **remove the &lt;script&gt; tag** for the service from `index.html`.
-This is something we'll do to all our components as we upgrade them. Simultaneously
-with the AngularJS to Angular upgrade we're also migrating our code from scripts to modules.
+Now that you are loading `phone.service.ts` through an import that is resolved
+by SystemJS, you should **remove the &lt;script&gt; tag** for the service from `index.html`.
+This is something you'll do to all components as you upgrade them. Simultaneously
+with the AngularJS to Angular upgrade you're also migrating code from scripts to modules.
 
 现在，我们正在用SystemJS加载`phone.service.ts`，我们应该从`index.html`中**移除该服务的`<script>`标签**。
-这也是我们在升级所有组件时将会做的事。在从AngularJS向2升级的同时，我们也把代码从脚本移植为模块。
+这也是我们在升级所有组件时将会做的事。在从AngularJS向Angular升级的同时，我们也把代码从脚本移植为模块。
 
-At this point we can switch our two components to use the new service
-instead of the old one. We `$inject` it as the downgraded `phone` factory,
-but it's really an instance of the `Phone` class and we can annotate its type
-accordingly:
+At this point, you can switch the two components to use the new service
+instead of the old one.  While you `$inject` it as the downgraded `phone` factory,
+it's really an instance of the `Phone` class and you annotate its type accordingly:
 
 这时，我们可以把两个控制器从使用老的服务切换成使用新的。我们像降级过的`phones`工厂一样`$inject`它，
 但它实际上是一个`Phones`类的实例，并且我们可以据此注解它的类型：
 
-
 <code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts" title="app/phone-list/phone-list.component.ts">
-
 </code-example>
 
-
-
 <code-example path="upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts" title="app/phone-detail/phone-detail.component.ts">
-
 </code-example>
 
-
-
-What we have here are two AngularJS components using an Angular service!
+Now there are two AngularJS components using an Angular service!
 The components don't need to be aware of this, though the fact that the
 service returns Observables and not Promises is a bit of a giveaway.
-In any case, what we've achieved is a migration of a service to Angular
+In any case, what you've achieved is a migration of a service to Angular
 without having to yet migrate the components that use it.
 
 这里的两个AngularJS控制器在使用Angular的服务！控制器不需要关心这一点，尽管实际上该服务返回的是可观察对象(Observable)，而不是承诺(Promise)。
@@ -2752,54 +2095,47 @@ without having to yet migrate the components that use it.
 
 
 
-We could also use the `toPromise` method of `Observable` to turn those
-Observables into Promises in the service. This can in many cases further
-reduce the amount of changes needed in the component controllers.
-
+You could  use the `toPromise` method of `Observable` to turn those
+Observables into Promises in the service. In many cases that
+reduce the number of changes to the component controllers.
 我们也能使用`Observable`的`toPromise`方法来在服务中把这些可观察对象转变成承诺，以进一步减小组件控制器中需要修改的代码量。
 
-
 </div>
 
-
-
 ### Upgrading Components
 
 ### 升级组件
 
-Next, let's upgrade our AngularJS components to Angular components. We'll
-do it one at a time, while still keeping the application in hybrid mode.
-As we make these conversions, we'll also be defining our first Angular *pipes*.
+
+Upgrade the AngularJS components to Angular components next.
+Do it one component at a time while still keeping the application in hybrid mode.
+As you make these conversions, you'll also define your first Angular *pipes*.
 
 接下来，我们把AngularJS的控制器升级成Angular的组件。我们每次升级一个，同时仍然保持应用运行在混合模式下。
 在做转换的同时，我们还将自定义首个Angular*管道*。
 
-Let's look at the phone list component first. Right now it contains a TypeScript
-controller class and a component definition object. We can morph this into
+Look at the phone list component first. Right now it contains a TypeScript
+controller class and a component definition object. You can morph this into
 an Angular component by just renaming the controller class and turning the
 AngularJS component definition object into an Angular `@Component` decorator.
-We can then also remove the static `$inject` property from the class:
+You can then also remove the static `$inject` property from the class:
 
 让我们先看看电话列表组件。它目前包含一个TypeScript控制器类和一个组件定义对象。重命名控制器类，
 并把AngularJS的组件定义对象更换为Angular `@Component`装饰器，这样我们就把它变形为Angular
 的组件了。然后，我们还从类中移除静态`$inject`属性。
 
-
 <code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts" region="initialclass" title="app/phone-list/phone-list.component.ts">
-
 </code-example>
 
-
-
 The `selector` attribute is a CSS selector that defines where on the page the component
-should go. In AngularJS we do matching based on component names, but in Angular we
+should go. In AngularJS you do matching based on component names, but in Angular you
 have these explicit selectors. This one will match elements with the name `phone-list`,
 just like the AngularJS version did.
 
 `selector`属性是一个CSS选择器，用来定义组件应该被放在页面的哪。在AngularJS，我们基于组件名字来匹配，
 但是在Angular中，我们要有一个专门指定的选择器。本组件将会对应元素名字`phone-list`，和AngularJS版本一样。
 
-We now also need to convert the template of this component into Angular syntax.
+Now convert the template of this component into Angular syntax.
 The search controls replace the AngularJS `$ctrl` expressions
 with Angular's two-way `[(ngModel)]` binding syntax:
 
@@ -2807,12 +2143,9 @@ with Angular's two-way `[(ngModel)]` binding syntax:
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html" region="controls" title="app/phone-list/phone-list.template.html (search controls)" linenums="false">
-
 </code-example>
 
-
-
-Replace the list's `ng-repeat` with an `*ngFor` as 
+Replace the list's `ng-repeat` with an `*ngFor` as
 [described in the Template Syntax page](guide/template-syntax#directives).
 Replace the image tag's `ng-src` with a binding to the native `src` property.
 
@@ -2822,35 +2155,29 @@ Replace the image tag's `ng-src` with a binding to the native `src` property.
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html" region="list" title="app/phone-list/phone-list.template.html (phones)" linenums="false">
-
 </code-example>
 
-
-
 #### No Angular _filter_ or _orderBy_ filters
 
 #### Angular中没有`filter`或`orderBy`过滤器
 
 The built-in AngularJS `filter` and `orderBy` filters do not exist in Angular,
-so we need to do the filtering and sorting ourselves. 
+so you need to do the filtering and sorting yourself.
 
 Angular中并不存在AngularJS中内置的`filter`和`orderBy`过滤器。
 所以我们得自己实现进行过滤和排序。
 
-We replaced the `filter` and `orderBy` filters with bindings to the `getPhones()` controller method,
-which implements the filtering and ordering logic inside the component itself. 
+You replaced the `filter` and `orderBy` filters with bindings to the `getPhones()` controller method,
+which implements the filtering and ordering logic inside the component itself.
 
 我们把`filter`和`orderBy`过滤器改成绑定到控制器中的`getPhones()`方法，通过该方法，组件本身实现了过滤和排序逻辑。
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts" region="getphones" title="app/phone-list/phone-list.component.ts">
-
 </code-example>
 
-
-
-Now we need to downgrade our Angular component so we can use it in AngularJS.
-Instead of registering a component, we register a `phoneList` *directive*,
+Now you need to downgrade the Angular component so you can use it in AngularJS.
+Instead of registering a component, you register a `phoneList` *directive*,
 a downgraded version of the Angular component.
 
 现在我们需要降级我们的Angular组件，这样我们就可以在AngularJS中使用它。
@@ -2864,26 +2191,18 @@ that the return value of the `downgradeComponent` method is a directive factory.
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts" region="downgrade-component" title="app/phone-list/phone-list.component.ts">
-
 </code-example>
 
-
-
-The new `PhoneListComponent` uses the Angular `ngModel` directive, located in the `FormsModule`. 
+The new `PhoneListComponent` uses the Angular `ngModel` directive, located in the `FormsModule`.
 Add the `FormsModule` to `NgModule` imports, declare the new `PhoneListComponent` and
-finally add it to `entryComponents` since we downgraded it:
-
+finally add it to `entryComponents` since you downgraded it:
 新的`PhoneListComponent`使用Angular的`ngModel`指令，它位于`FormsModule`中。
 把`FormsModule`添加到`NgModule`的`imports`中，并声明新的`PhoneListComponent`组件，
 最后由我们把它降级了，添加到`entryComponents`：
 
-
 <code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="phonelist" title="app.module.ts">
-
 </code-example>
 
-
-
 Remove the &lt;script&gt; tag for the phone list component from `index.html`.
 
 从`index.html`中移除电话列表组件的&lt;script&gt;标签。
@@ -2894,28 +2213,25 @@ Now set the remaining `phone-detail.component.ts` as follows:
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts" title="app/phone-detail/phone-detail.component.ts">
-
 </code-example>
 
-
-
-This is similar to the phone list component. 
-The new wrinkle is the `RouteParams` type annotation that identifies the `routeParams` dependency. 
+This is similar to the phone list component.
+The new wrinkle is the `RouteParams` type annotation that identifies the `routeParams` dependency.
 
 这和电话列表组件很相似。
 这里的窍门在于`@Inject`装饰器，它标记出了`$routeParams`依赖。
 
 The AngularJS injector has an AngularJS router dependency called `$routeParams`,
 which was injected into `PhoneDetails` when it was still an AngularJS controller.
-We intend to inject it into the new `PhoneDetailsComponent`.
+You intend to inject it into the new `PhoneDetailsComponent`.
 
 AngularJS注入器具有AngularJS路由器的依赖，叫做`$routeParams`。
 它被注入到了`PhoneDetails`中，但`PhoneDetails`现在还是一个AngularJS控制器。
 我们应该把它注入到新的`PhoneDetailsComponent`中。
 
 Unfortunately, AngularJS dependencies are not automatically available to Angular components.
-We must use a [Factory provider](guide/upgrade#making-angularjs-dependencies-injectable-to-angular)
-to make `$routeParams` an Angular provider.
+You must upgrade this service via a [factory provider](guide/upgrade#making-angularjs-dependencies-injectable-to-angular)
+to make `$routeParams` an Angular injectable.
 Do that in a new file called `ajs-upgraded-providers.ts` and import it in `app.module.ts`:
 
 不幸的是，AngularJS的依赖不会自动在Angular的组件中可用。
@@ -2925,17 +2241,11 @@ Do that in a new file called `ajs-upgraded-providers.ts` and import it in `app.m
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts" title="app/ajs-upgraded-providers.ts">
-
 </code-example>
 
-
-
 <code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="routeparams" title="app/app.module.ts ($routeParams)" linenums="false">
-
 </code-example>
 
-
-
 Convert the phone detail component template into Angular syntax as follows:
 
 我们现在也要把该组件的模板转变成Angular的语法。
@@ -2943,28 +2253,26 @@ Convert the phone detail component template into Angular syntax as follows:
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html" title="app/phone-detail/phone-detail.template.html">
-
 </code-example>
 
-
-
 There are several notable changes here:
 
 这里有几个值得注意的改动：
 
-* We've removed the `$ctrl.` prefix from all expressions.
+* You've removed the `$ctrl.` prefix from all expressions.
 
   我们从所有表达式中移除了`$ctrl.`前缀。
 
-* Just like we did in the phone list, we've replaced `ng-src` with property
+
+* You've replaced `ng-src` with property
   bindings for the standard `src` property.
 
   正如我们在电话列表中做过的那样，我们把`ng-src`替换成了标准的`src`属性绑定。
 
-* We're using the property binding syntax around `ng-class`. Though Angular
+* You're using the property binding syntax around `ng-class`. Though Angular
   does have [a very similar `ngClass`](guide/template-syntax#directives)
   as AngularJS does, its value is not magically evaluated as an expression.
-  In Angular we always specify  in the template when an attribute's value is
+  In Angular, you always specify  in the template when an attribute's value is
   a property expression, as opposed to a literal string.
 
   我们在`ng-class`周围使用了属性绑定语法。虽然Angular中有一个
@@ -2972,19 +2280,19 @@ There are several notable changes here:
   但是它的值不会神奇的作为表达式进行计算。在Angular中，模板中的属性(Attribute)值总是被作为
   属性(Property)表达式计算，而不是作为字符串字面量。
 
-* We've replaced `ng-repeat`s with `*ngFor`s.
+* You've replaced `ng-repeat`s with `*ngFor`s.
 
   我们把`ng-repeat`替换成了`*ngFor`。
 
-* We've replaced `ng-click` with an event binding for the standard `click`.
+* You've replaced `ng-click` with an event binding for the standard `click`.
 
   我们把`ng-click`替换成了一个到标准`click`事件的绑定。
 
-* We've wrapped the whole template in an `ngIf` that causes it only to be
-  rendered when there is a phone present. We need this because when the component
-  first loads, we don't have `phone` yet and the expressions will refer to a
+* You've wrapped the whole template in an `ngIf` that causes it only to be
+  rendered when there is a phone present. You need this because when the component
+  first loads, you don't have `phone` yet and the expressions will refer to a
   non-existing value. Unlike in AngularJS, Angular expressions do not fail silently
-  when we try to refer to properties on undefined objects. We need to be explicit
+  when you try to refer to properties on undefined objects. You need to be explicit
   about cases where this is expected.
 
   我们把整个模板都包裹进了一个`ngIf`中，这导致只有当存在一个电话时它才会渲染。我们必须这么做，
@@ -2998,12 +2306,9 @@ Add `PhoneDetailComponent` component to the `NgModule` _declarations_ and _entry
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="phonedetail" title="app.module.ts">
-
 </code-example>
 
-
-
-We should now also remove the phone detail component &lt;script&gt; tag from `index.html`.
+You should now also remove the phone detail component &lt;script&gt; tag from `index.html`.
 
 我们现在应该从`index.html`中移除电话详情组件的&lt;script>。
 
@@ -3012,13 +2317,13 @@ We should now also remove the phone detail component &lt;script&gt; tag from `in
 #### 添加*CheckmarkPipe*
 
 The AngularJS directive had a `checkmark` _filter_.
-Let's turn that into an Angular **pipe**.
+Turn that into an Angular **pipe**.
 
 AngularJS指令中有一个`checkmark`*过滤器*，我们把它转换成Angular的**管道**。
 
 There is no upgrade method to convert filters into pipes.
 You won't miss it.
-It's easy to turn the filter function into an equivalent Pipe class. 
+It's easy to turn the filter function into an equivalent Pipe class.
 The implementation is the same as before, repackaged in the `transform` method.
 Rename the file to `checkmark.pipe.ts` to conform with Angular conventions:
 
@@ -3030,11 +2335,8 @@ Rename the file to `checkmark.pipe.ts` to conform with Angular conventions:
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts" title="app/core/checkmark/checkmark.pipe.ts" linenums="false">
-
 </code-example>
 
-
-
 Now import and declare the newly created pipe and
 remove the filter &lt;script&gt; tag from `index.html`:
 
@@ -3042,45 +2344,35 @@ remove the filter &lt;script&gt; tag from `index.html`:
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="checkmarkpipe" title="app.module.ts">
-
 </code-example>
 
+### AOT compile the hybrid app
 
+### 对混合式应用做AOT编译
 
-## AoT compile the hybrid app
+To use AOT with a hybrid app, you have to first set it up like any other Angular application,
+as shown in [the Ahead-of-time Compilation chapter](guide/aot-compiler).
 
-## 对混合式应用做AOT编译
+要在混合式应用中使用AOT编译，我们首先要像其它Angular应用一样设置它，就像[AOT编译一章](guide/aot-compiler)所讲的那样。
 
-To use AoT with our hybrid app we have to first set it up like any other Angular application,
-as shown in [the Ahead-of-time Compilation chapter](cookbook/aot-compiler).
-
-要在混合式应用中使用AOT编译，我们首先要像其它Angular应用一样设置它，就像[AOT编译一章](cookbook/aot-compiler)所讲的那样。
-
-Then we have to change `main-aot.ts` bootstrap also bootstrap the AngularJS app 
-via `UpgradeModule`:
-
-然后，我们就要修改`main-aot.ts`的引导代码，也通过`UpgradeModule`来引导AngularJS应用：
+Then change `main-aot.ts` to bootstrap the `AppComponentFactory` that was generated
+by the AOT compiler:
 
+然后，我们就要修改`main-aot.ts`的引导代码，通过所生成的`AppComponentFactory`来引导AngularJS应用：
 
 <code-example path="upgrade-phonecat-2-hybrid/app/main-aot.ts" title="app/main-aot.ts">
-
 </code-example>
 
-
-
-We need to load all the AngularJS files we already use in `index.html` in `aot/index.html`
+You need to load all the AngularJS files you already use in `index.html` in `aot/index.html`
 as well:
 
 我们还要把在`index.html`中已经用到的所有AngularJS文件加载到`aot/index.html`中：
 
 
 <code-example path="upgrade-phonecat-2-hybrid/aot/index.html" title="aot/index.html">
-
 </code-example>
 
-
-
-These files need to be copied together with the polyfills. Files our application
+These files need to be copied together with the polyfills. The files the application
 needs at runtime, like the `.json` phone lists and images, also need to be copied.
 
 这些文件要带着相应的填充库复制到一起。应用运行时需要的文件，比如电话列表`.json`和图片，也需要复制过去。
@@ -3092,35 +2384,22 @@ Install `fs-extra` via `npm install fs-extra --save-dev` for better file copying
 
 
 <code-example path="upgrade-phonecat-2-hybrid/copy-dist-files.js" title="copy-dist-files.js">
-
 </code-example>
 
 
 
-And that's all you need to use AoT while upgrading your app!
-
+And that's all you need to use AOT while upgrading your app!
 这就是想要在升级应用期间AOT编译所需的一切！
 
-
 ### Adding The Angular Router And Bootstrap
 
-### 切换到Angular路由器和引导程序
+### 添加Angular路由器和引导程序
 
-At this point we've replaced all AngularJS application components with
-their Angular counterparts, even though we're still serving them from the AngularJS router.
+At this point, you've replaced all AngularJS application components with
+their Angular counterparts, even though you're still serving them from the AngularJS router.
 
 此刻，我们已经把所有AngularJS的组件替换成了它们在Angular中的等价物，不过我们仍然在AngularJS路由器中使用它们。
 
-Most AngularJS apps have more than a couple of routes though, and it's very helpful to migrate
-one route at a time.
-
-大多数AngularJS应用都有多组路由，而如果能每次迁移一个路由就会非常有用。
-
-Let's start by migrating the initial `/` and `/phones` routes to Angular, 
-while keeping `/phones/:phoneId` in the AngularJS router.
-
-让我们开始把最初的`/`和`/phones`路由迁移到Angular，但把`/phones/:phoneId`留在AngularJS路由器中。
-
 #### Add the Angular router
 
 #### 添加Angular路由器
@@ -3131,26 +2410,22 @@ Angular有一个[全新的路由器](guide/router)。
 
 Like all routers, it needs a place in the UI to display routed views.
 For Angular that's the `<router-outlet>` and it belongs in a *root component*
-at the top of the applications component tree. 
+at the top of the applications component tree.
 
 像所有的路由器一样，它需要在UI中指定一个位置来显示路由的视图。
 在Angular中，它是`<router-outlet>`，并位于应用组件树顶部的*根组件*中。
 
-We don't yet have such a root component, because the app is still managed as an AngularJS app.
+You don't yet have such a root component, because the app is still managed as an AngularJS app.
 Create a new `app.component.ts` file with the following `AppComponent` class:
 
+
 我们还没有这样一个根组件，因为该应用仍然是像一个AngularJS应用那样被管理的。
 创建新的`app.component.ts`文件，放入像这样的`AppComponent`类：
 
-
-<code-example path="upgrade-phonecat-3-router/app/app.component.ts" title="app/app.component.ts" linenums="false">
-
+<code-example path="upgrade-phonecat-3-final/app/app.component.ts" title="app/app.component.ts" >
 </code-example>
 
-
-
-It has a simple template that only includes the `<router-outlet>` for Angular routes
-and `ng-view` for AngularJS routes.
+It has a simple template that only includes the `<router-outlet>.
 This component just renders the contents of the active route and nothing else.
 
 它有一个很简单的模板，只包含Angular路由的`<router-outlet>`和AngularJS路由的`ng-view`指令。
@@ -3164,16 +2439,13 @@ element on the host web page when the application launches.
 Add this `<phonecat-app>` element to the `index.html`.
 It replaces the old AngularJS `ng-view` directive:
 
+
 把这个`<phonecat-app>`元素插入到`index.html`中。
 用它来代替AngularJS中的`ng-view`指令：
 
-
-<code-example path="upgrade-phonecat-3-router/index.html" region="appcomponent" title="index.html (body)" linenums="false">
-
+<code-example path="upgrade-phonecat-3-final/index.html" region="appcomponent" title="index.html (body)" linenums="false">
 </code-example>
 
-
-
 #### Create the _Routing Module_
 #### 创建*路由模块*
 A router needs configuration whether it's the AngularJS or Angular or any other router.
@@ -3184,149 +2456,85 @@ The details of Angular router configuration are best left to the [Routing docume
 which recommends that you create a `NgModule` dedicated to router configuration
 (called a _Routing Module_).
 
+
 Angular路由器配置的详情最好去查阅下[路由与导航](guide/router)文档。
 它建议你创建一个专们用于路由器配置的`NgModule`（名叫*路由模块*）。
 
-
-<code-example path="upgrade-phonecat-3-router/app/app-routing.module.ts" title="app/app-routing.module.ts">
-
+<code-example path="upgrade-phonecat-3-final/app/app-routing.module.ts" title="app/app-routing.module.ts">
 </code-example>
 
-
-
-This module defines a `routes` object with one route to the phone list component
-and a default route for the empty path. 
+This module defines a `routes` object with two routes to the two phone components
+and a default route for the empty path.
 It passes the `routes` to the `RouterModule.forRoot` method which does the rest.
 
 该模块定义了一个`routes`对象，它带有两个路由，分别指向两个电话组件，以及为空路径指定的默认路由。
 它把`routes`传给`RouterModule.forRoot`方法，该方法会完成剩下的事。
 
-A couple of extra providers enable routing with "hash" URLs such as `#!/phones` 
-instead of the default  "push state" strategy.
+A couple of extra providers enable routing with "hash" URLs such as `#!/phones`
+instead of the default "push state" strategy.
 
 一些额外的提供商让路由器使用“hash”策略解析URL，比如`#!/phones`，而不是默认的“Push State”策略。
 
-There's a twist to our Routing Module though: we're also adding a custom `UrlHandlingStrategy`
-that tells the Angular router to only process the `/` and `/phones` routes.
-
-这里路由模块会出现一个冲突：我们还添加了一个自定义的`UrlHandlingStrategy`，它会告诉Angular的路由器只处理`/`和`/phones`路由。
-
 Now update the `AppModule` to import this `AppRoutingModule` and also the
 declare the root `AppComponent` as the bootstrap component.
-That tells Angular that it should bootstrap the app with the _root_ `AppComponent` and 
+That tells Angular that it should bootstrap the app with the _root_ `AppComponent` and
 insert it's view into the host web page.
 
 现在，修改`AppModule`，让它导入这个`AppRoutingModule`，并同时声明根组件`AppComponent`。
 这会告诉Angular，它应该使用根组件`AppComponent`引导应用，并把它的视图插入到宿主页面中。
 
-We can also remove the `ngDoBootstrap()` override from `app.module.ts` since we are now
-bootstrapping from Angular.
+You must also remove the bootstrap of the AngularJS module from `ngDoBootstrap()` in `app.module.ts`
+and the `UpgradeModule` import.
 
-我们也可以移除`app.module.ts`中对`ngDoBootstrap()`的改写，因为我们正在从Angular中引导。
-
-And since `PhoneListComponent` isn't being rendered from a `<phone-list>` tag anymore,
-but rather routed to, we can do away with it's Angular selector as well.
-
-并且，由于`PhoneListComponent`不再渲染到`<phone-list>`标签下，而是路由到它，我们同样也可以去掉它的Angular选择器。
-
-
-<code-example path="upgrade-phonecat-3-router/app/app.module.ts" title="app/app.module.ts">
-
-</code-example>
-
-
-
-Now we need to tell the AngularJS router to only process the `/phones/:phoneId` route:
-
-现在，我们要让AngularJS路由器只处理`/phones/:phoneId`路由：
-
-
-<code-example path="upgrade-phonecat-3-router/app/app.config.ts" region="ajs-routes" title="app/app.config.ts (route config)">
+我们还要从`app.module.ts`中移除调用`ngDoBootstrap()`来引导AngularJS模块的代码，以及对`UpgradeModule`的导入代码。
 
+<code-example path="upgrade-phonecat-3-final/app/app.module.ts" title="app/app.module.ts">
 </code-example>
 
+And since you are routing to `PhoneListComponent` and `PhoneDetailComponent` directly rather than
+using a route template with a `<phone-list>` or `<phone-detail>` tag, you can do away with their
+Angular selectors as well.
 
+而且，由于我们现在直接路由到`PhoneListComponent`和`PhoneDetailComponent`，而不在使用带`<phone-list>`或`<phone-detail>`标签的路由模板，因此我们同样不再需要它们的 Angular 选择器。
 
 #### Generate links for each phone
 
 #### 为每个电话生成链接
 
-We no longer have to hardcode the links to phone details in the phone list. 
-We can generate data bindings for each phone's `id` to the `routerLink` directive
+You no longer have to hardcode the links to phone details in the phone list.
+You can generate data bindings for each phone's `id` to the `routerLink` directive
 and let that directive construct the appropriate URL to the `PhoneDetailComponent`:
 
 在电话列表中，我们不用再被迫硬编码电话详情的链接了。
 我们可以通过把每个电话的`id`绑定到`routerLink`指令来生成它们了，该指令的构造函数会为`PhoneDetailComponent`生成正确的URL：
 
-
-<code-example path="upgrade-phonecat-3-router/app/phone-list/phone-list.template.html" region="list" title="app/phone-list/phone-list.template.html (list with links)" linenums="false">
-
+<code-example path="upgrade-phonecat-3-final/app/phone-list/phone-list.template.html" region="list" title="app/phone-list/phone-list.template.html (list with links)" linenums="false">
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
 See the [Routing](guide/router) page for details.
 
 要了解详情，请查看[路由与导航](guide/router)页。
 
+</div><br>
 
-</div>
-
-
-
-We are now running both routers at the same time!
-Angular is handling the initial `/` url, redirecting to `/phones`.
-Meanwhile when we click a link to the phone detail, AngularJS takes over.
-
-我们现在同时运行着两个路由器！
-Angular负责处理初始URL `/`，并重定向到`/phones`。而AngularJS负责处理到手机详情的链接。
-
-This way we can incrementally upgrade our app, reducing the risk of a massive one step router
-swap.
-
-用这种方式，我们可以增量升级该应用，减少一次性更换路由带来的巨大风险。
-
-The next step is to migrate the `/phones/:phoneId` route.
-
-下一步是迁移`/phones/:phoneId`路由。
+#### Use route parameters
 
+#### 使用路由参数
 
 The Angular router passes route parameters differently.
 Correct the `PhoneDetail` component constructor to expect an injected `ActivatedRoute` object.
 Extract the `phoneId` from the `ActivatedRoute.snapshot.params` and fetch the phone data as before:
 
+
 Angular路由器会传入不同的路由参数。
 改正`PhoneDetail`组件的构造函数，让它改用注入进来的`ActivatedRoute`对象。
 从`ActivatedRoute.snapshot.params`中提取出`phoneId`，并像以前一样获取手机的数据：
 
-
-<code-example path="upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.ts" title="app/phone-detail/phone-detail.component.ts">
-
+<code-example path="upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts" title="app/phone-detail/phone-detail.component.ts">
 </code-example>
 
-
-
-Since this was the last route we want to migrate over, we can also now delete the last 
-route config from `app/app.config.ts`, and add it to the Angular router configuration.
-
-由于这是我们要迁移的最后一个路由，因此现在可以从`app/app.config.ts`中移除最后一个路由配置了，并把它添加到Angular的路由器配置里。
-
-We don't need our `UrlHandlingStrategy` anymore either, since now Angular is processing all
-routes. 
-
-我们再也不需要`UrlHandlingStrategy`了，因为现在Angular会处理所有路由。
-
-
-<code-example path="upgrade-phonecat-4-final/app/app-routing.module.ts" title="app/app-routing.module.ts">
-
-</code-example>
-
-
-
 You are now running a pure Angular application!
 
 我们现在运行的就是纯正的Angular应用了！
@@ -3335,7 +2543,7 @@ You are now running a pure Angular application!
 
 ### 再见，AngularJS！
 
-It is time to take off the training wheels and let our application begin
+It is time to take off the training wheels and let the application begin
 its new life as a pure, shiny Angular app. The remaining tasks all have to
 do with removing code - which of course is every programmer's favorite task!
 
@@ -3347,40 +2555,33 @@ There's no need for that anymore.
 
 应用仍然以混合式应用的方式启动，然而这再也没有必要了。
 
-Switch the bootstrap method of the application from the `UpgradeAdapter` 
-to the Angular way. 
+Switch the bootstrap method of the application from the `UpgradeModule` to the Angular way.
+
 
 把应用的引导（`bootstrap`）方法从`UpgradeAdapter`的改为Angular的。
 
-
-<code-example path="upgrade-phonecat-4-final/app/main.ts" title="main.ts">
-
+<code-example path="upgrade-phonecat-3-final/app/main.ts" title="main.ts">
 </code-example>
 
-
-
-If you haven't already, remove all references to the `UpgradeModule` from `app.module.ts`, 
-as well as any [Factory provider](guide/upgrade#making-angularjs-dependencies-injectable-to-angular) 
+If you haven't already, remove all references to the `UpgradeModule` from `app.module.ts`,
+as well as any [factory provider](guide/upgrade#making-angularjs-dependencies-injectable-to-angular)
 for AngularJS services, and the `app/ajs-upgraded-providers.ts` file.
 
 如果你还没有这么做，请从`app.module.ts删除所有`UpgradeModule的引用，
   以及所有用于AngularJS服务的[工厂供应商（factory provider）](guide/upgrade#making-angularjs-dependencies-injectable-to-angular)和`app/ajs-upgraded-providers.ts`文件。
 
-Also remove any `downgradeInjectable()` or `downgradeComponent()` you find, 
+Also remove any `downgradeInjectable()` or `downgradeComponent()` you find,
 together with the associated AngularJS factory or directive declarations.
-Since we have no downgraded components anymore, we also don't need to have them listed
-in `entryComponents` either.
+Since you no longer have downgraded components, you no longer list them
+in `entryComponents`.
+
 
 还要删除所有的`downgradeInjectable()`或`downgradeComponent()`以及与AngularJS相关的工厂或指令声明。
 因为我们不再需要降级任何组件了，也不再需要把它们列在`entryComponents`中。
 
-
-<code-example path="upgrade-phonecat-4-final/app/app.module.ts" title="app.module.ts">
-
+<code-example path="upgrade-phonecat-3-final/app/app.module.ts" title="app.module.ts">
 </code-example>
 
-
-
 You may also completely remove the following files. They are AngularJS
 module configuration files and not needed in Angular:
 
@@ -3394,7 +2595,7 @@ module configuration files and not needed in Angular:
 * `app/phone-list/phone-list.module.ts`
 
 The external typings for AngularJS may be uninstalled as well. The only ones
-we still need are for Jasmine and Angular polyfills.
+you still need are for Jasmine and Angular polyfills.
 The `@angular/upgrade` package and it's mapping in `systemjs.config.js` can also go.
 
 还需要反安装AngularJS的外部类型定义文件。我们现在只需要Jasmine的那些。
@@ -3404,32 +2605,22 @@ The `@angular/upgrade` package and it's mapping in `systemjs.config.js` can also
 <code-example format="">
   npm uninstall @angular/upgrade --save
   npm uninstall @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev
-
 </code-example>
 
+Finally, from `index.html`, remove all references to AngularJS scripts and jQuery.
+When you're done, this is what it should look like:
 
-
-Finally, from `index.html`, remove all references to
-AngularJS scripts, the Angular upgrade module, and jQuery. When we're done,
-this is what it should look like:
-
-最后，从`index.html`和`karma.conf.js`中，移除所有到AngularJS脚本的引用，比如jQuery。
+最后，从`index.html`和`karma.conf.js`中，移除所有对AngularJS和jQuery脚本的引用。
 当这些全部做完时，`index.html`应该是这样的：
 
-
-<code-example path="upgrade-phonecat-4-final/index.html" region="full" title="index.html">
-
+<code-example path="upgrade-phonecat-3-final/index.html" region="full" title="index.html">
 </code-example>
 
-
-
-That is the last we'll see of AngularJS! It has served us well but now
+That is the last you'll see of AngularJS! It has served us well but now
 it's time to say goodbye.
 
 这是我们最后一次看到AngularJS了！它曾经带给我们很多帮助，不过现在，是时候说再见了。
 
-
-
 ## Appendix: Upgrading PhoneCat Tests
 
 ## 附录：升级PhoneCat的测试
@@ -3447,49 +2638,44 @@ break during the upgrade. E2E tests are especially useful for this purpose.
 
 The PhoneCat project has both E2E Protractor tests and some Karma unit tests in it.
 Of these two, E2E tests can be dealt with much more easily: By definition,
-E2E tests access our application from the *outside* by interacting with
+E2E tests access the application from the *outside* by interacting with
 the various UI elements the app puts on the screen. E2E tests aren't really that
 concerned with the internal structure of the application components. That
-also means that although we modify our project quite a bit during the upgrade, the E2E
-test suite should keep passing with just minor modifications. This is because
-we don't change how the application behaves from the user's point of view.
+also means that, although you modify the project quite a bit during the upgrade, the E2E
+test suite should keep passing with just minor modifications. You
+didn't change how the application behaves from the user's point of view.
 
 PhoneCat项目中同时有基于Protractor的E2E测试和一些基于Karma的单元测试。
 对这两者来说，E2E测试的转换要容易得多：根据定义，E2E测试通过与应用中显示的这些UI元素互动，从*外部*访问我们的应用来进行测试。
 E2E测试实际上并不关心这些应用中各部件的内部结构。这也意味着，虽然我们已经修改了此应用程序，
 但是E2E测试套件仍然应该能像以前一样全部通过。因为从用户的角度来说，我们并没有改变应用的行为。
 
-During TypeScript conversion, there is nothing we have to do to keep E2E tests
-working. It is only when we change our bootstrap to that of a Hybrid app that we need to
-make some changes.
+During TypeScript conversion, there is nothing to do to keep E2E tests
+working. But when you change the bootstrap to that of a Hybrid app,
+you must make a few changes.
 
 在转成TypeScript期间，我们不用做什么就能让E2E测试正常工作。
 只有当我们想做些修改而把组件及其模板升级到Angular时才需要做些处理。
 
-The following change is needed in `protractor-conf.js` to sync with hybrid apps:
+Update the `protractor-conf.js` to sync with hybrid apps:
 
-需要对`protractor-conf.js`做如修改，与混合应用同步：
+再对`protractor-conf.js`做下列修改，与混合应用同步：
 
 
 <code-example format="">
   ng12Hybrid: true
-
 </code-example>
 
 
 
-The next set of changes is when we start to upgrade components and their template to Angular.
-This is because the E2E tests have matchers that are specific to AngularJS.
-For PhoneCat we need to make the following changes in order to make things work with Angular:
-
+When you start to upgrade components and their templates to Angular, you'll make more changes 
+ because the E2E tests have matchers that are specific to AngularJS. 
+For PhoneCat you need to make the following changes in order to make things work with Angular:
 当我们开始组件和模块升级到Angular时，还需要一系列后续的修改。
 这是因为E2E测试有一些匹配器是AngularJS中特有的。对于PhoneCat来说，为了让它能在Angular下工作，我们得做下列修改：
 
-
 <table>
-
   <tr>
-
     <th>
 
       <p>
@@ -3501,7 +2687,6 @@ For PhoneCat we need to make the following changes in order to make things work
       </p>
 
     </th>
-
     <th>
 
       <p>
@@ -3513,7 +2698,6 @@ For PhoneCat we need to make the following changes in order to make things work
       </p>
 
     </th>
-
     <th>
 
       <p>
@@ -3525,137 +2709,104 @@ For PhoneCat we need to make the following changes in order to make things work
       </p>
 
     </th>
-
   </tr>
-
   <tr>
-
     <td>
 
-
       `by.repeater('phone in $ctrl.phones').column('phone.name')`
+
     </td>
-
     <td>
 
-
       `by.css('.phones .name')`
+
     </td>
-
     <td>
 
-
       The repeater matcher relies on AngularJS `ng-repeat`
 
       repeater匹配器依赖于AngularJS中的`ng-repeat`
     </td>
-
   </tr>
-
   <tr>
-
     <td>
 
-
       `by.repeater('phone in $ctrl.phones')`
+
     </td>
-
     <td>
 
-
       `by.css('.phones li')`
+
     </td>
 
     <td>
 
-
       The repeater matcher relies on AngularJS `ng-repeat`
 
       repeater匹配器依赖于AngularJS中的`ng-repeat`
     </td>
-
   </tr>
-
   <tr>
-
     <td>
 
-
       `by.model('$ctrl.query')`
+
     </td>
-
     <td>
 
-
       `by.css('input')`
+
     </td>
-
     <td>
 
-
       The model matcher relies on AngularJS `ng-model`
 
       model匹配器依赖于AngularJS中的`ng-model`
     </td>
-
   </tr>
-
   <tr>
-
     <td>
 
-
       `by.model('$ctrl.orderProp')`
+
     </td>
-
     <td>
 
-
       `by.css('select')`
+
     </td>
-
     <td>
 
-
       The model matcher relies on AngularJS `ng-model`
 
       model匹配器依赖于AngularJS中的`ng-model`
     </td>
-
   </tr>
-
   <tr>
-
     <td>
 
-
       `by.binding('$ctrl.phone.name')`
+
     </td>
-
     <td>
 
-
       `by.css('h1')`
+
     </td>
-
     <td>
 
-
       The binding matcher relies on AngularJS data binding
 
       binding匹配器依赖于AngularJS的数据绑定
 
     </td>
-
   </tr>
-
 </table>
 
-
-
 When the bootstrap method is switched from that of `UpgradeModule` to
 pure Angular, AngularJS ceases to exist on the page completely.
-At this point we need to tell Protractor that it should not be looking for
+At this point, you need to tell Protractor that it should not be looking for
 an AngularJS app anymore, but instead it should find *Angular apps* from
 the page.
 
@@ -3669,38 +2820,29 @@ Replace the `ng12Hybrid` previously added with the following in `protractor-conf
 
 <code-example format="">
   useAllAngular2AppRoots: true,
-
 </code-example>
 
-
-
 Also, there are a couple of Protractor API calls in the PhoneCat test code that
 are using the AngularJS `$location` service under the hood. As that
-service is no longer there after the upgrade, we need to replace those calls with ones
+service is no longer present after the upgrade, replace those calls with ones
 that use WebDriver's generic URL APIs instead. The first of these is
 the redirection spec:
 
+
 同样，我们的测试代码中有两个Protractor API调用内部使用了`$location`。该服务没有了，
 我们就得把这些调用用一个WebDriver的通用URL API代替。第一个API是“重定向(redirect)”规约：
 
-
-<code-example path="upgrade-phonecat-4-final/e2e-spec.ts" region="redirect" title="e2e-tests/scenarios.ts">
-
+<code-example path="upgrade-phonecat-3-final/e2e-spec.ts" region="redirect" title="e2e-tests/scenarios.ts">
 </code-example>
 
-
-
 And the second is the phone links spec:
 
+
 然后是“电话链接(phone links)”规约：
 
-
-<code-example path="upgrade-phonecat-4-final/e2e-spec.ts" region="links" title="e2e-tests/scenarios.ts">
-
+<code-example path="upgrade-phonecat-3-final/e2e-spec.ts" region="links" title="e2e-tests/scenarios.ts">
 </code-example>
 
-
-
 ### Unit Tests
 
 ### 单元测试
@@ -3711,28 +2853,20 @@ they need to be *upgraded* along with the production code.
 另一方面，对于单元测试来说，需要更多的转化工作。实际上，它们需要随着产品代码一起升级。
 
 During TypeScript conversion no changes are strictly necessary. But it may be
-a good idea to convert the unit test code into TypeScript as well, as the same
-benefits we from TypeScript in production code also applies to tests.
+a good idea to convert the unit test code into TypeScript as well.
 
 在转成TypeScript期间，严格来讲没有什么改动是必须的。但把单元测试代码转成TypeScript仍然是个好主意，
-产品代码从TypeScript中获得的那些增益也同样适用于测试代码。
-
-For instance, in the phone detail component spec we can use not only ES2015
-features like arrow functions and block-scoped variables, but also type
-definitions for some of the AngularJS services we're consuming:
-
+产品代码从TypeScript中获得的那些增益也同样适用于测试代码。For instance, in the phone detail component spec , you can use  ES2015
+features like arrow functions and block-scoped variablesand benefit from the type
+definitions  of the AngularJS services you're consuming:
 比如，在这个电话详情组件的规约中，我们不仅用到了ES2015中的箭头函数和块作用域变量这些特性，还为所用的一些
 AngularJS服务提供了类型定义。
 
-
 <code-example path="upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts" title="app/phone-detail/phone-detail.component.spec.ts">
-
 </code-example>
 
-
-
-Once we start the upgrade process and bring in SystemJS, configuration changes
-are needed for Karma. We need to let SystemJS load all the new Angular code,
+Once you start the upgrade process and bring in SystemJS, configuration changes
+are needed for Karma. You need to let SystemJS load all the new Angular code,
 which can be done with the following kind of shim file:
 
 一旦我们开始了升级过程并引入了SystemJS，还需要对Karma进行配置修改。
@@ -3740,11 +2874,8 @@ which can be done with the following kind of shim file:
 
 
 <code-example path="upgrade-phonecat-2-hybrid/karma-test-shim.1.js" title="karma-test-shim.js">
-
 </code-example>
 
-
-
 The shim first loads the SystemJS configuration, then Angular's test support libraries,
 and then the application's spec files themselves.
 
@@ -3757,13 +2888,10 @@ as the base directory, instead of `app`.
 
 
 <code-example path="upgrade-phonecat-2-hybrid/karma.conf.ajs.js" region="basepath" title="karma.conf.js">
-
 </code-example>
 
-
-
-Once this is done, we can load SystemJS and other dependencies, and also switch the configuration
-for loading application files so that they are *not* included to the page by Karma. We'll let
+Once done, you can load SystemJS and other dependencies, and also switch the configuration
+for loading application files so that they are *not* included to the page by Karma. You'll let
 the shim and SystemJS load them.
 
 一旦这些完成了，我们就能加载SystemJS和其它依赖，并切换配置文件来加载那些应用文件，而*不用*在Karma页面中包含它们。
@@ -3771,23 +2899,17 @@ the shim and SystemJS load them.
 
 
 <code-example path="upgrade-phonecat-2-hybrid/karma.conf.ajs.js" region="files" title="karma.conf.js">
-
 </code-example>
 
-
-
-Since the HTML templates of Angular components will be loaded as well, we need to help
+Since the HTML templates of Angular components will be loaded as well, you must help
 Karma out a bit so that it can route them to the right paths:
 
 由于Angular组件中的HTML模板也同样要被加载，所以我们得帮Karma一把，帮它在正确的路径下找到这些模板：
 
 
 <code-example path="upgrade-phonecat-2-hybrid/karma.conf.ajs.js" region="html" title="karma.conf.js">
-
 </code-example>
 
-
-
 The unit test files themselves also need to be switched to Angular when their production
 counterparts are switched. The specs for the checkmark pipe are probably the most straightforward,
 as the pipe has no dependencies:
@@ -3796,62 +2918,44 @@ as the pipe has no dependencies:
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts" title="app/core/checkmark/checkmark.pipe.spec.ts">
-
 </code-example>
 
-
-
-The unit test for the phone service is a bit more involved. We need to switch from the mocked-out
+The unit test for the phone service is a bit more involved. You need to switch from the mocked-out
 AngularJS `$httpBackend` to a mocked-out Angular Http backend.
 
 `Phone`服务的测试会牵扯到一点别的。我们需要把模拟版的AngularJS `$httpBackend`服务切换到模拟板的Angular Http后端。
 
 
 <code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts" title="app/core/phone/phone.service.spec.ts">
-
 </code-example>
 
 
 
-For the component specs we can mock out the `Phone` service itself, and have it provide
-canned phone data. We use Angular's component unit testing APIs for both components.
-
+For the component specs , you can mock out the `Phone` service itself, and have it provide
+canned phone data. You use Angular's component unit testing APIs for both components.
 对于组件的规约，我们可以模拟出`Phone`服务本身，并且让它提供电话的数据。我们可以对这些组件使用Angular的组件单元测试API。
 
-
 <code-example path="upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts" title="app/phone-detail/phone-detail.component.spec.ts">
-
 </code-example>
 
-
-
 <code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts" title="app/phone-list/phone-list.component.spec.ts">
-
 </code-example>
 
-
-
-Finally, we need to revisit both of the component tests when we switch to the Angular
-router. For the details component we need to provide a mock of Angular `ActivatedRoute` object
+Finally, revisit both of the component tests when you switch to the Angular
+router. For the details component, provide a mock of Angular `ActivatedRoute` object
 instead of using the AngularJS `$routeParams`.
 
+
 最后，当我们切换到Angular路由时，我们需要重新过一遍这些组件测试。对详情组件来说，我们需要提供一个Angular
 `RouteParams`的mock对象，而不再用AngularJS中的`$routeParams`。
 
-
-<code-example path="upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.spec.ts" region="activatedroute" title="app/phone-detail/phone-detail.component.spec.ts">
-
+<code-example path="upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts" region="activatedroute" title="app/phone-detail/phone-detail.component.spec.ts">
 </code-example>
 
+And for the phone list component, a few adjustments to the router make
+the `RouteLink` directives work.
 
+对于电话列表组件，还要再做少量的调整，以便路由器能让`RouteLink`指令正常工作。
 
-And for the phone list component we need to set up a few things for the router itself so that
-the route link directive will work.
-
-对于电话列表组件来说，我们需要为路由器本身略作设置，以便它的路由链接(`routerLink`)指令能够正常工作。
-
-
-<code-example path="upgrade-phonecat-4-final/app/phone-list/phone-list.component.spec.ts" region="routestuff" title="app/phone-list/phone-list.component.spec.ts">
-
+<code-example path="upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts" region="routestuff" title="app/phone-list/phone-list.component.spec.ts">
 </code-example>
-
diff --git a/aio/content/guide/user-input.md b/aio/content/guide/user-input.md
index 20a99ae9d1..be21e5e776 100644
--- a/aio/content/guide/user-input.md
+++ b/aio/content/guide/user-input.md
@@ -1,11 +1,6 @@
-@title
-用户输入
-
-@intro
-用户输入触发 DOM 事件。我们通过事件绑定来监听它们，把更新过的数据导入回我们的组件和 model。
-
-@description
+# User Input
 
+# 用户输入
 
 User actions such as clicking a link, pushing a button, and entering
 text raise DOM events.
@@ -146,8 +141,8 @@ Here's what the UI displays:
 
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/user-input/keyup1-anim.gif' alt="key up 1"></img>
+<figure>
+  <img src='generated/images/guide/user-input/keyup1-anim.gif' alt="key up 1">
 </figure>
 
 
@@ -268,8 +263,8 @@ Type something in the input box, and watch the display update with each keystrok
 在输入框中输入，就会看到每次按键时，显示也随之更新了。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/user-input/keyup-loop-back-anim.gif' alt="反馈"></img>
+<figure>
+  <img src='generated/images/guide/user-input/keyup-loop-back-anim.gif' alt="反馈">
 </figure>
 
 
@@ -347,8 +342,8 @@ Here's how it works.
 
 下面展示了它是如何工作的。
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/user-input/keyup3-anim.gif' alt="key up 3"></img>
+<figure>
+  <img src='generated/images/guide/user-input/keyup3-anim.gif' alt="key up 3">
 </figure>
 
 
@@ -396,8 +391,8 @@ clicking **Add**.
 用户可以通过输入英雄名和点击“添加”按钮来添加英雄。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/user-input/little-tour-anim.gif' alt="简版英雄指南"></img>
+<figure>
+  <img src='generated/images/guide/user-input/little-tour-anim.gif' alt="简版英雄指南">
 </figure>
 
 
@@ -489,4 +484,4 @@ two-way bindings with `NgModel`.
 
 这些技术对小规模演示很实用，但是在处理大量用户输入时，很容易变得累赘和笨拙。
 要在数据录入字段和模型属性之间传递数据，双向数据绑定是更加优雅和简洁的方式。
-下一章`表单`解释了如何用`NgModel`来进行双向绑定。
\ No newline at end of file
+下一章`表单`解释了如何用`NgModel`来进行双向绑定。
diff --git a/aio/content/guide/visual-studio-2015.md b/aio/content/guide/visual-studio-2015.md
index c29e0e8f98..655a35ce85 100644
--- a/aio/content/guide/visual-studio-2015.md
+++ b/aio/content/guide/visual-studio-2015.md
@@ -1,10 +1,7 @@
-@title
-Visual Studio 2015 快速起步
+# Visual Studio 2015 QuickStart
 
-@intro
-使用 Visual Studio 2015 快速起步
+# Visual Studio 2015 快速起步
 
-@description
 {@a top}
 
 Some developers prefer Visual Studio as their Integrated Development Environment (IDE).
@@ -41,51 +38,13 @@ Visual Studio 2015, follow these steps:
 
 要用Visual Studio 2015在**ASP.NET 4.x项目**中设置**《快速起步》**文件，请遵循如下步骤：
 
-
-*  [Prerequisite](guide/visual-studio-2015#prereq1): Install Node.js.
-
-   [前提条件](guide/visual-studio-2015#prereq1): 安装Node.js
-  
-*  [Prerequisite](guide/visual-studio-2015#prereq2): Install Visual Studio 2015 Update 3.
-
-   [前提条件](guide/visual-studio-2015#prereq2): 安装Visual Studio 2015 Update 3
-    
-*  [Prerequisite](guide/visual-studio-2015#prereq3): Configure external web tools.
-
-   [前提条件](guide/visual-studio-2015#prereq3): 配置External Web tools
-   
-*  [Prerequisite](guide/visual-studio-2015#prereq4): Install TypeScript 2.2 for Visual Studio 2015.
-
-   [前提条件](guide/visual-studio-2015#prereq4): 安装TypeScript 2 for Visual Studio 2015
-   
-*  [Step 1](guide/visual-studio-2015#download): Download the QuickStart files.
-
-   [第一步](guide/visual-studio-2015#download): 下载“快速起步”的文件
-   
-*  [Step 2](guide/visual-studio-2015#create-project): Create the Visual Studio ASP.NET project.
-
-   [第二步](guide/visual-studio-2015#create-project): 创建Visual Studio ASP.NET项目
-   
-*  [Step 3](guide/visual-studio-2015#copy): Copy the QuickStart files into the ASP.NET project folder.
-
-   [第三步](guide/visual-studio-2015#copy): 把“快速起步”中的文件拷贝到ASP.NET的项目目录中
-   
-*  [Step 4](guide/visual-studio-2015#restore): Restore required packages.
-
-   [第四步](guide/visual-studio-2015#restore): 恢复需要的包
-   
-*  [Step 5](guide/visual-studio-2015#build-and-run): Build and run the app.
-
-   [第五步](guide/visual-studio-2015#build-and-run): 构建和运行应用程序
-
-
 <div class="l-sub-section">
 
 
 
 If you prefer a `File | New Project` experience and are using **ASP.NET Core**, 
 then consider the _experimental_
-<a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/" target="_blank">ASP.NET Core + Angular template for Visual Studio 2015</a>. 
+<a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/">ASP.NET Core + Angular template for Visual Studio 2015</a>. 
 Note that the resulting code does not map to the docs. Adjust accordingly.   
 
 如果你希望使用**ASP.NET Core**并体验全新项目，
@@ -480,7 +439,7 @@ Everything seems fine while you move about _within_ the app.
 But you'll see the problem right away if you refresh the browser
 or paste a link to an app page (called a "deep link") into the browser address bar.
 
-You'll most likely get a *404 - Page Not Found* response from the serer
+You'll most likely get a *404 - Page Not Found* response from the server
 for any address other than `/` or `/index.html`.
 
 You have to configure the server to return `index.html` for requests to these "unknown" pages.
@@ -558,4 +517,4 @@ The default browser opens and displays the QuickStart sample application.
 Try editing any of the project files. Save and refresh the browser to
 see the changes. 
 
-尝试编辑任何项目文件，*保存*并刷新浏览器来查看效果。
\ No newline at end of file
+尝试编辑任何项目文件，*保存*并刷新浏览器来查看效果。
diff --git a/aio/content/guide/webpack.md b/aio/content/guide/webpack.md
index b239d2caa9..7198f77bd3 100644
--- a/aio/content/guide/webpack.md
+++ b/aio/content/guide/webpack.md
@@ -1,11 +1,6 @@
-@title
-Webpack 简介
-
-@intro
-使用基于 Webpack 的工具创建 Angular 应用
-
-@description
+# Webpack: An Introduction
 
+# Webpack简介
 
 <style>
   h4 {font-size: 17px !important; text-transform: none !important;}
@@ -30,6 +25,8 @@ This guide offers a taste of Webpack and explains how to use it with Angular app
 
 {@a top}
 
+<!--
+
 
 # Contents
 
@@ -100,9 +97,7 @@ This guide offers a taste of Webpack and explains how to use it with Angular app
     [生产环境配置](guide/webpack#production-configuration)
 
   * [Test configuration](guide/webpack#test-configuration)
-  
-    [测试环境配置](guide/webpack#test-configuration)
-    
+  [测试环境配置](guide/webpack#test-configuration)
 * [Trying it out](guide/webpack#try)
 
   [试一下](guide/webpack#try)
@@ -114,11 +109,12 @@ This guide offers a taste of Webpack and explains how to use it with Angular app
 * [Conclusion](guide/webpack#conclusion)
 
   [总结](guide/webpack#conclusion)
+  
+-->
 
+You can also <a href="generated/zips/webpack/webpack.zip" target="_blank">download the final result.</a>
 
-You can also <a href="/resources/zips/webpack/webpack.zip">download the final result.</a>
-
-你还可以<a href="/resources/zips/webpack/webpack.zip">点这里下载最终结果</a>。
+你还可以<a href="generated/zips/webpack/webpack.zip" target="_blank">点这里下载最终结果</a>。
 
 {@a what-is-webpack}
 
@@ -189,19 +185,12 @@ Then it **outputs** these files to the `app.js` _bundle file_ designated in conf
 
 然后它把这些文件**输出**到当前配置所指定的_包文件_`app.js`中：
 
+<code-example name="webpack.config.js (single output)" language="javascript">
+  output: {
+    filename: 'app.js'
+  }
 
-<div class='code-example'>
-
-  <code-example name="webpack.config.js (single output)" language="javascript">
-    output: {
-      filename: 'app.js'
-    }
-
-  </code-example>
-
-</div>
-
-
+</code-example>
 
 This `app.js` output bundle is a single JavaScript file that contains the application source and its dependencies.
 You'll load it later with a `<script>` tag in the `index.html`.
@@ -227,22 +216,17 @@ Change the configuration so that it has two entry points, `main.ts` and `vendor.
 所以要修改配置，以获得两个入口点：`main.ts`和`vendor.ts`：
 
 
-<div class='code-example'>
+<code-example language="javascript">
+  entry: {
+    app: 'src/app.ts',
+    vendor: 'src/vendor.ts'
+  },
 
-  <code-example language="javascript">
-    entry: {
-      app: 'src/app.ts',
-      vendor: 'src/vendor.ts'
-    },
-
-    output: {
-      filename: '[name].js'
-    }
-
-  </code-example>
-
-</div>
+  output: {
+    filename: '[name].js'
+  }
 
+</code-example>
 
 
 Webpack constructs two separate dependency graphs
@@ -297,41 +281,34 @@ Webpack可以打包任何类型的文件：JavaScript、TypeScript、CSS、SASS
 在这里，我们为TypeScript和CSS文件配置了加载器。
 
 
-<div class='code-example'>
-
-  <code-example language="javascript">
+<code-example language="javascript">
     rules: [
       {
-        test:/\.ts$/,
+        test: /\.ts$/,
         loader: 'awesome-typescript-loader'
       },
       {
-        test: /\.css$/,loaders: 'style-loader!css-loader'
+        test: /\.css$/,
+        loaders: 'style-loader!css-loader'
       }
     ]
 
-  </code-example>
-
-</div>
+</code-example>
 
 
 
-When Webpack encounters `import` statements like the following, 
-it applies the `test` RegEx patterns. 
+When Webpack encounters `import` statements like the following,
+it applies the `test` RegEx patterns.
 
 当Webpack遇到如下所示的`import`语句时，它就会调用正则表达式的`test`方法。
 
 
-<div class='code-example'>
+<code-example language="typescript">
+  import { AppComponent } from './app.component.ts';
 
-  <code-example language="typescript">
-    import { AppComponent } from './app.component.ts';
+  import 'uiframework/dist/uiframework.css';
 
-    import 'uiframework/dist/uiframework.css';
-
-  </code-example>
-
-</div>
+</code-example>
 
 
 
@@ -369,17 +346,12 @@ Tap into that pipeline with plugins such as the `uglify` minification plugin:
 Webpack有一条构建流水线，它被划分成多个经过精心定义的阶段(phase)。
 我们可以把插件(比如`uglify`代码最小化插件)挂到流水线上：
 
+<code-example language="javascript">
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin()
+  ]
 
-<div class='code-example'>
-
-  <code-example language="javascript">
-    plugins: [
-      new webpack.optimize.UglifyJsPlugin()
-    ]
-
-  </code-example>
-
-</div>
+</code-example>
 
 
 
@@ -567,10 +539,9 @@ and exports several objects as properties of a `module.exports` object.
 
   [`entries`](guide/webpack#common-entries) - 包体的入口文件。
 
-* [`resolve`](guide/webpack#common-resolve)&mdash;how to resolve file names when they lack extensions.
+* [`resolve`](guide/webpack#common-resolves)&mdash;how to resolve file names when they lack extensions.
 
   [`resolve`](guide/webpack#common-resolve) - 省略扩展名时如何解释文件名。
-
 * [`module.rules`](guide/webpack#common-rules)&mdash; `module` is an object with `rules` for deciding how files are loaded.
 
   [`module.rules`](guide/webpack#common-rules) - `module`是一个对象，里面的`rules`属性用来决定文件如何加载。
@@ -613,7 +584,7 @@ This `entry` object defines the three bundles:
   `app` - 应用代码。
 
 
-{@a common-resolve}
+{@a common-resolves}
 
 
 #### _resolve_ extension-less imports
@@ -625,16 +596,10 @@ You could write `import` statements with explicit extensions like this example:
 
 如果你的应用程序只须`import`几十个JavaScript或TypeScript文件，而不是几百个，你可以在`import`语句里完整写上扩展名，如：
 
+<code-example language="typescript">
+  import { AppComponent } from './app.component.ts';
 
-<div class='code-example'>
-
-  <code-example language="typescript">
-    import { AppComponent } from './app.component.ts';
-
-  </code-example>
-
-</div>
-
+</code-example>
 
 
 But most `import` statements don't mention the extension at all.
@@ -698,7 +663,7 @@ Rules用来告诉Webpack加载不同文件或模块时该用哪个加载器。
 
   `images/fonts` - 图片和字体文件也能被打包。
   
-* CSS&mdash;the first pattern matches application-wide styles; the second handles 
+* CSS&mdash;the first pattern matches application-wide styles; the second handles
 component-scoped styles (the ones specified in a component's `styleUrls` metadata property).
 
   CSS - 第一个模式匹配应用级样式，第二个模式匹配组件局部样式(就是在组件元数据的`styleUrls`属性中指定的那些)。
@@ -866,11 +831,8 @@ The CSS styles are buried inside the Javascript bundles by default. The `Extract
 external `.css` files that the `HtmlWebpackPlugin` inscribes as `<link>` tags into the `index.html`.
 
 默认情况下，我们这些CSS样式会被埋没在JavaScript包中。`ExtractTextPlugin`会把它们提取成外部`.css`文件，
-这样`HtmlWebpackPlugin`插件就会转而把一个&lt;link&gt;标签写进`index.html`了。
-
-Refer to the [Webpack documentation](https://webpack.github.io/docs/) for details on these and other configuration options in this file.
-
-要了解本文件中这些以及其它配置项的详情，请参阅[Webpack文档](https://webpack.github.io/docs/)。
+这样`HtmlWebpackPlugin`插件就会转而把一个&lt;link&gt;标签写进`index.html`了。Refer to the [Webpack documentation](https://webpack.github.io/docs/) for details on these and 
+other configuration options in this file.要了解本文件中这些以及其它配置项的详情，请参阅[Webpack文档](https://webpack.github.io/docs/)。
 
 Grab the app code at the end of this guide and try:
 
@@ -1103,9 +1065,9 @@ Webpack techniques covered in this guide.
 
 
 The <code>app.component.html</code> displays this downloadable Angular logo
-<a href="assets/images/logos/angular/angular.png" target="_blank">
+<a href="assets/images/logos/angular/angular.png">
 <img src="assets/images/logos/angular/angular.png" height="40px" title="download Angular logo"></a>.
-Create a folder called `images` under the project's `assets` folder, then right-click (Cmd+click on Mac) 
+Create a folder called `images` under the project's `assets` folder, then right-click (Cmd+click on Mac)
 on the image and download it to that folder.
 
 <code>app.component.html</code>显示了这个可下载的Angular Logo
@@ -1136,7 +1098,7 @@ Here again are the TypeScript entry-point files that define the `polyfills` and
 
 {@a highlights}
 
-### Highlights
+<h3 class="no-toc">Highlights</h3>
 
 ### 重点：
 
@@ -1181,4 +1143,4 @@ _但我们还能做得更多_。搜索互联网来获得专家的建议，并扩
 
 [Back to top](guide/webpack#top)
 
-[回到顶部](guide/webpack#top)
\ No newline at end of file
+[回到顶部](guide/webpack#top)
diff --git a/aio/content/images/bios/_no-one.jpg b/aio/content/images/bios/_no-one.jpg
new file mode 100644
index 0000000000..74c5dfe5d8
Binary files /dev/null and b/aio/content/images/bios/_no-one.jpg differ
diff --git a/aio/content/images/bios/alex-eagle.jpg b/aio/content/images/bios/alex-eagle.jpg
index cfa1085745..7731672466 100644
Binary files a/aio/content/images/bios/alex-eagle.jpg and b/aio/content/images/bios/alex-eagle.jpg differ
diff --git a/aio/content/images/bios/alex-rickabaugh.jpg b/aio/content/images/bios/alex-rickabaugh.jpg
index 0b8575f9ee..ec22c6aa22 100644
Binary files a/aio/content/images/bios/alex-rickabaugh.jpg and b/aio/content/images/bios/alex-rickabaugh.jpg differ
diff --git a/aio/content/images/bios/alex-wolfe.jpg b/aio/content/images/bios/alex-wolfe.jpg
index 63d0d6a6bb..7746786b0f 100644
Binary files a/aio/content/images/bios/alex-wolfe.jpg and b/aio/content/images/bios/alex-wolfe.jpg differ
diff --git a/aio/content/images/bios/ali.jpg b/aio/content/images/bios/ali.jpg
index 2eff37f68b..e69d674eb1 100644
Binary files a/aio/content/images/bios/ali.jpg and b/aio/content/images/bios/ali.jpg differ
diff --git a/aio/content/images/bios/andrewseguin.jpg b/aio/content/images/bios/andrewseguin.jpg
new file mode 100755
index 0000000000..642a8437ef
Binary files /dev/null and b/aio/content/images/bios/andrewseguin.jpg differ
diff --git a/aio/content/images/bios/angular-gde-bio-placeholder.jpg b/aio/content/images/bios/angular-gde-bio-placeholder.jpg
new file mode 100644
index 0000000000..6d25b2acaa
Binary files /dev/null and b/aio/content/images/bios/angular-gde-bio-placeholder.jpg differ
diff --git a/aio/content/images/bios/brad-green.jpg b/aio/content/images/bios/brad-green.jpg
index 0a6c290999..19b7949a1b 100644
Binary files a/aio/content/images/bios/brad-green.jpg and b/aio/content/images/bios/brad-green.jpg differ
diff --git a/aio/content/images/bios/brandonroberts.jpg b/aio/content/images/bios/brandonroberts.jpg
index df3b82e938..23e228d68c 100644
Binary files a/aio/content/images/bios/brandonroberts.jpg and b/aio/content/images/bios/brandonroberts.jpg differ
diff --git a/aio/content/images/bios/chrisnoring.jpg b/aio/content/images/bios/chrisnoring.jpg
new file mode 100755
index 0000000000..2aa6d12bc1
Binary files /dev/null and b/aio/content/images/bios/chrisnoring.jpg differ
diff --git a/aio/content/images/bios/christianweyer.jpg b/aio/content/images/bios/christianweyer.jpg
new file mode 100755
index 0000000000..6800b07273
Binary files /dev/null and b/aio/content/images/bios/christianweyer.jpg differ
diff --git a/aio/content/images/bios/chuckj.jpg b/aio/content/images/bios/chuckj.jpg
index 194c117807..fbb51a579a 100644
Binary files a/aio/content/images/bios/chuckj.jpg and b/aio/content/images/bios/chuckj.jpg differ
diff --git a/aio/content/images/bios/cironunes.jpg b/aio/content/images/bios/cironunes.jpg
new file mode 100755
index 0000000000..90d3228004
Binary files /dev/null and b/aio/content/images/bios/cironunes.jpg differ
diff --git a/aio/content/images/bios/crisbeto.jpg b/aio/content/images/bios/crisbeto.jpg
index e6f1eacb7c..02ea563092 100644
Binary files a/aio/content/images/bios/crisbeto.jpg and b/aio/content/images/bios/crisbeto.jpg differ
diff --git a/aio/content/images/bios/danwahlin.jpg b/aio/content/images/bios/danwahlin.jpg
new file mode 100755
index 0000000000..ae3d7c23fa
Binary files /dev/null and b/aio/content/images/bios/danwahlin.jpg differ
diff --git a/aio/content/images/bios/david-east.jpg b/aio/content/images/bios/david-east.jpg
index 145076d1ec..bcbd59fe61 100644
Binary files a/aio/content/images/bios/david-east.jpg and b/aio/content/images/bios/david-east.jpg differ
diff --git a/aio/content/images/bios/deborah.jpg b/aio/content/images/bios/deborah.jpg
old mode 100644
new mode 100755
index d56682aa47..f09fa3f860
Binary files a/aio/content/images/bios/deborah.jpg and b/aio/content/images/bios/deborah.jpg differ
diff --git a/aio/content/images/bios/devversion.jpg b/aio/content/images/bios/devversion.jpg
index cb499c01c2..0f19a87085 100644
Binary files a/aio/content/images/bios/devversion.jpg and b/aio/content/images/bios/devversion.jpg differ
diff --git a/aio/content/images/bios/eladbezalel.jpg b/aio/content/images/bios/eladbezalel.jpg
index f61b0683cc..87eb09fda9 100644
Binary files a/aio/content/images/bios/eladbezalel.jpg and b/aio/content/images/bios/eladbezalel.jpg differ
diff --git a/aio/content/images/bios/eric.jpg b/aio/content/images/bios/eric.jpg
index 62e25c3942..d9d81b92ed 100644
Binary files a/aio/content/images/bios/eric.jpg and b/aio/content/images/bios/eric.jpg differ
diff --git a/aio/content/images/bios/fatima.jpg b/aio/content/images/bios/fatima.jpg
index 55486d716e..222164324a 100644
Binary files a/aio/content/images/bios/fatima.jpg and b/aio/content/images/bios/fatima.jpg differ
diff --git a/aio/content/images/bios/filipbech.jpg b/aio/content/images/bios/filipbech.jpg
new file mode 100755
index 0000000000..ef48442c55
Binary files /dev/null and b/aio/content/images/bios/filipbech.jpg differ
diff --git a/aio/content/images/bios/filipe-silva.jpg b/aio/content/images/bios/filipe-silva.jpg
index 3fa75d1f90..9908293f78 100644
Binary files a/aio/content/images/bios/filipe-silva.jpg and b/aio/content/images/bios/filipe-silva.jpg differ
diff --git a/aio/content/images/bios/gerardsans.jpg b/aio/content/images/bios/gerardsans.jpg
new file mode 100644
index 0000000000..79a3109ab5
Binary files /dev/null and b/aio/content/images/bios/gerardsans.jpg differ
diff --git a/aio/content/images/bios/gkalpak.jpg b/aio/content/images/bios/gkalpak.jpg
index 38124c4b94..5c6465f681 100644
Binary files a/aio/content/images/bios/gkalpak.jpg and b/aio/content/images/bios/gkalpak.jpg differ
diff --git a/aio/content/images/bios/hansl.jpg b/aio/content/images/bios/hansl.jpg
index 36b1e7158d..726fc4d95c 100644
Binary files a/aio/content/images/bios/hansl.jpg and b/aio/content/images/bios/hansl.jpg differ
diff --git a/aio/content/images/bios/igor-minar.jpg b/aio/content/images/bios/igor-minar.jpg
index da4e386159..2fc7883c0a 100644
Binary files a/aio/content/images/bios/igor-minar.jpg and b/aio/content/images/bios/igor-minar.jpg differ
diff --git a/aio/content/images/bios/jasonaden.jpg b/aio/content/images/bios/jasonaden.jpg
index 64d1ac88b3..2c6f39e9f4 100644
Binary files a/aio/content/images/bios/jasonaden.jpg and b/aio/content/images/bios/jasonaden.jpg differ
diff --git a/aio/content/images/bios/jbedard.jpg b/aio/content/images/bios/jbedard.jpg
index 825f12f53b..d6b83f8aa5 100644
Binary files a/aio/content/images/bios/jbedard.jpg and b/aio/content/images/bios/jbedard.jpg differ
diff --git a/aio/content/images/bios/jecelynyeen.jpg b/aio/content/images/bios/jecelynyeen.jpg
new file mode 100755
index 0000000000..95f8d4158e
Binary files /dev/null and b/aio/content/images/bios/jecelynyeen.jpg differ
diff --git a/aio/content/images/bios/jeff-cross.jpg b/aio/content/images/bios/jeff-cross.jpg
index 7a1ff116b4..fec99139f3 100644
Binary files a/aio/content/images/bios/jeff-cross.jpg and b/aio/content/images/bios/jeff-cross.jpg differ
diff --git a/aio/content/images/bios/jeffwhelpley.jpg b/aio/content/images/bios/jeffwhelpley.jpg
old mode 100644
new mode 100755
index ba056cff47..44f6f4072e
Binary files a/aio/content/images/bios/jeffwhelpley.jpg and b/aio/content/images/bios/jeffwhelpley.jpg differ
diff --git a/aio/content/images/bios/jelbourn.jpg b/aio/content/images/bios/jelbourn.jpg
index d66992bb5b..0ffdbfe7a2 100644
Binary files a/aio/content/images/bios/jelbourn.jpg and b/aio/content/images/bios/jelbourn.jpg differ
diff --git a/aio/content/images/bios/jeremywilken.jpg b/aio/content/images/bios/jeremywilken.jpg
new file mode 100755
index 0000000000..a47082fd1a
Binary files /dev/null and b/aio/content/images/bios/jeremywilken.jpg differ
diff --git a/aio/content/images/bios/jesus-rodriguez.jpg b/aio/content/images/bios/jesus-rodriguez.jpg
index f34476829b..2fd79480af 100644
Binary files a/aio/content/images/bios/jesus-rodriguez.jpg and b/aio/content/images/bios/jesus-rodriguez.jpg differ
diff --git a/aio/content/images/bios/joeeames.jpg b/aio/content/images/bios/joeeames.jpg
new file mode 100755
index 0000000000..f4758861f3
Binary files /dev/null and b/aio/content/images/bios/joeeames.jpg differ
diff --git a/aio/content/images/bios/john-papa.jpg b/aio/content/images/bios/john-papa.jpg
index 95d62876c3..c03d5665e6 100644
Binary files a/aio/content/images/bios/john-papa.jpg and b/aio/content/images/bios/john-papa.jpg differ
diff --git a/aio/content/images/bios/jorgeucano.jpg b/aio/content/images/bios/jorgeucano.jpg
new file mode 100755
index 0000000000..b9a760b212
Binary files /dev/null and b/aio/content/images/bios/jorgeucano.jpg differ
diff --git a/aio/content/images/bios/josue.jpg b/aio/content/images/bios/josue.jpg
new file mode 100755
index 0000000000..99a2f87f38
Binary files /dev/null and b/aio/content/images/bios/josue.jpg differ
diff --git a/aio/content/images/bios/juleskremer.jpg b/aio/content/images/bios/juleskremer.jpg
index 902a64a961..8fe284cc55 100644
Binary files a/aio/content/images/bios/juleskremer.jpg and b/aio/content/images/bios/juleskremer.jpg differ
diff --git a/aio/content/images/bios/julie-ralph.jpg b/aio/content/images/bios/julie-ralph.jpg
index 62aef7a36e..4585dadcb3 100644
Binary files a/aio/content/images/bios/julie-ralph.jpg and b/aio/content/images/bios/julie-ralph.jpg differ
diff --git a/aio/content/images/bios/kapunahelewong.jpg b/aio/content/images/bios/kapunahelewong.jpg
index ecd2a68810..ce57726435 100644
Binary files a/aio/content/images/bios/kapunahelewong.jpg and b/aio/content/images/bios/kapunahelewong.jpg differ
diff --git a/aio/content/images/bios/kara-erickson.jpg b/aio/content/images/bios/kara-erickson.jpg
index e7cafc797b..ba2ebba28a 100644
Binary files a/aio/content/images/bios/kara-erickson.jpg and b/aio/content/images/bios/kara-erickson.jpg differ
diff --git a/aio/content/images/bios/kathy.jpg b/aio/content/images/bios/kathy.jpg
index fa419a774b..18c40777c0 100644
Binary files a/aio/content/images/bios/kathy.jpg and b/aio/content/images/bios/kathy.jpg differ
diff --git a/aio/content/images/bios/lucas.jpg b/aio/content/images/bios/lucas.jpg
index 1ea7880638..f891ac13fe 100644
Binary files a/aio/content/images/bios/lucas.jpg and b/aio/content/images/bios/lucas.jpg differ
diff --git a/aio/content/images/bios/lukas.jpg b/aio/content/images/bios/lukas.jpg
new file mode 100755
index 0000000000..4d0ff1abd1
Binary files /dev/null and b/aio/content/images/bios/lukas.jpg differ
diff --git a/aio/content/images/bios/marclaval.jpg b/aio/content/images/bios/marclaval.jpg
index 3d280f9259..e52456ec28 100644
Binary files a/aio/content/images/bios/marclaval.jpg and b/aio/content/images/bios/marclaval.jpg differ
diff --git a/aio/content/images/bios/marcy.jpg b/aio/content/images/bios/marcy.jpg
index c8747964ae..ae69f2111e 100644
Binary files a/aio/content/images/bios/marcy.jpg and b/aio/content/images/bios/marcy.jpg differ
diff --git a/aio/content/images/bios/martin-probst.jpg b/aio/content/images/bios/martin-probst.jpg
index cfba084675..4648b341f7 100644
Binary files a/aio/content/images/bios/martin-probst.jpg and b/aio/content/images/bios/martin-probst.jpg differ
diff --git a/aio/content/images/bios/martinstaffa.jpg b/aio/content/images/bios/martinstaffa.jpg
index ff0e24eccd..e80ba5b76f 100644
Binary files a/aio/content/images/bios/martinstaffa.jpg and b/aio/content/images/bios/martinstaffa.jpg differ
diff --git a/aio/content/images/bios/matias.jpg b/aio/content/images/bios/matias.jpg
index 4fe6002133..0342dd22d1 100644
Binary files a/aio/content/images/bios/matias.jpg and b/aio/content/images/bios/matias.jpg differ
diff --git a/aio/content/images/bios/max-sills.jpg b/aio/content/images/bios/max-sills.jpg
index 7826e8579f..c1a2fdfe4b 100644
Binary files a/aio/content/images/bios/max-sills.jpg and b/aio/content/images/bios/max-sills.jpg differ
diff --git a/aio/content/images/bios/maximsalnikov.jpg b/aio/content/images/bios/maximsalnikov.jpg
new file mode 100755
index 0000000000..8ed64f9cc7
Binary files /dev/null and b/aio/content/images/bios/maximsalnikov.jpg differ
diff --git a/aio/content/images/bios/michaelprentice.jpg b/aio/content/images/bios/michaelprentice.jpg
new file mode 100755
index 0000000000..337b33a06c
Binary files /dev/null and b/aio/content/images/bios/michaelprentice.jpg differ
diff --git a/aio/content/images/bios/michal.jpg b/aio/content/images/bios/michal.jpg
index f7d6c14d79..0d0c75ec2a 100644
Binary files a/aio/content/images/bios/michal.jpg and b/aio/content/images/bios/michal.jpg differ
diff --git a/aio/content/images/bios/mickey_mouse.jpg b/aio/content/images/bios/mickey_mouse.jpg
new file mode 100755
index 0000000000..f16bc41ff9
Binary files /dev/null and b/aio/content/images/bios/mickey_mouse.jpg differ
diff --git a/aio/content/images/bios/mike-brocchi.jpg b/aio/content/images/bios/mike-brocchi.jpg
new file mode 100755
index 0000000000..773fe3ee5a
Binary files /dev/null and b/aio/content/images/bios/mike-brocchi.jpg differ
diff --git a/aio/content/images/bios/mikeryan.jpg b/aio/content/images/bios/mikeryan.jpg
index da05b1d170..fd63309e6b 100755
Binary files a/aio/content/images/bios/mikeryan.jpg and b/aio/content/images/bios/mikeryan.jpg differ
diff --git a/aio/content/images/bios/minko.jpg b/aio/content/images/bios/minko.jpg
new file mode 100755
index 0000000000..5997c18af1
Binary files /dev/null and b/aio/content/images/bios/minko.jpg differ
diff --git a/aio/content/images/bios/misko.jpg b/aio/content/images/bios/misko.jpg
index 5d15719a19..c168ef7162 100644
Binary files a/aio/content/images/bios/misko.jpg and b/aio/content/images/bios/misko.jpg differ
diff --git a/aio/content/images/bios/mmalerba.jpg b/aio/content/images/bios/mmalerba.jpg
index dba61aa7e1..efd1d185ef 100644
Binary files a/aio/content/images/bios/mmalerba.jpg and b/aio/content/images/bios/mmalerba.jpg differ
diff --git a/aio/content/images/bios/naomi.jpg b/aio/content/images/bios/naomi.jpg
index a1ce6a94b6..d611951e8b 100644
Binary files a/aio/content/images/bios/naomi.jpg and b/aio/content/images/bios/naomi.jpg differ
diff --git a/aio/content/images/bios/ocombe.jpg b/aio/content/images/bios/ocombe.jpg
new file mode 100755
index 0000000000..a2bc4fc9a0
Binary files /dev/null and b/aio/content/images/bios/ocombe.jpg differ
diff --git a/aio/content/images/bios/pascalprecht.jpg b/aio/content/images/bios/pascalprecht.jpg
old mode 100644
new mode 100755
index c436e1fe9d..0db15223ae
Binary files a/aio/content/images/bios/pascalprecht.jpg and b/aio/content/images/bios/pascalprecht.jpg differ
diff --git a/aio/content/images/bios/patrick-stapleton.jpg b/aio/content/images/bios/patrick-stapleton.jpg
index 7e85db12c0..c856cb5b8f 100644
Binary files a/aio/content/images/bios/patrick-stapleton.jpg and b/aio/content/images/bios/patrick-stapleton.jpg differ
diff --git a/aio/content/images/bios/pawel.jpg b/aio/content/images/bios/pawel.jpg
index 825ab32180..70322553c8 100644
Binary files a/aio/content/images/bios/pawel.jpg and b/aio/content/images/bios/pawel.jpg differ
diff --git a/aio/content/images/bios/pete.jpg b/aio/content/images/bios/pete.jpg
index ecf6a7a1ff..fc1321f9b7 100644
Binary files a/aio/content/images/bios/pete.jpg and b/aio/content/images/bios/pete.jpg differ
diff --git a/aio/content/images/bios/rado.jpg b/aio/content/images/bios/rado.jpg
index f3d0c4870e..ac39fc18b0 100644
Binary files a/aio/content/images/bios/rado.jpg and b/aio/content/images/bios/rado.jpg differ
diff --git a/aio/content/images/bios/ralph.jpg b/aio/content/images/bios/ralph.jpg
index dfc1d5dc5a..911ea5505b 100644
Binary files a/aio/content/images/bios/ralph.jpg and b/aio/content/images/bios/ralph.jpg differ
diff --git a/aio/content/images/bios/raul.jpg b/aio/content/images/bios/raul.jpg
new file mode 100644
index 0000000000..b1133dfee9
Binary files /dev/null and b/aio/content/images/bios/raul.jpg differ
diff --git a/aio/content/images/bios/rex.jpg b/aio/content/images/bios/rex.jpg
index 8c9844c1bc..2e5529d671 100644
Binary files a/aio/content/images/bios/rex.jpg and b/aio/content/images/bios/rex.jpg differ
diff --git a/aio/content/images/bios/rmesserle.jpg b/aio/content/images/bios/rmesserle.jpg
index 34dabb4304..7b3f1bf6b1 100644
Binary files a/aio/content/images/bios/rmesserle.jpg and b/aio/content/images/bios/rmesserle.jpg differ
diff --git a/aio/content/images/bios/rob-wormald.jpg b/aio/content/images/bios/rob-wormald.jpg
index 2c0080e5bb..4d275bf2c7 100644
Binary files a/aio/content/images/bios/rob-wormald.jpg and b/aio/content/images/bios/rob-wormald.jpg differ
diff --git a/aio/content/images/bios/ryan.jpg b/aio/content/images/bios/ryan.jpg
index 70d24e2282..45113ea634 100644
Binary files a/aio/content/images/bios/ryan.jpg and b/aio/content/images/bios/ryan.jpg differ
diff --git a/aio/content/images/bios/sanderelias.jpg b/aio/content/images/bios/sanderelias.jpg
new file mode 100755
index 0000000000..a5be9b02a6
Binary files /dev/null and b/aio/content/images/bios/sanderelias.jpg differ
diff --git a/aio/content/images/bios/scott.jpg b/aio/content/images/bios/scott.jpg
index 8449fc2166..f80680564d 100644
Binary files a/aio/content/images/bios/scott.jpg and b/aio/content/images/bios/scott.jpg differ
diff --git a/aio/content/images/bios/shahar.jpg b/aio/content/images/bios/shahar.jpg
index b5fc667af0..0fabe66e42 100644
Binary files a/aio/content/images/bios/shahar.jpg and b/aio/content/images/bios/shahar.jpg differ
diff --git a/aio/content/images/bios/shaireznik.jpg b/aio/content/images/bios/shaireznik.jpg
new file mode 100755
index 0000000000..442a53d096
Binary files /dev/null and b/aio/content/images/bios/shaireznik.jpg differ
diff --git a/aio/content/images/bios/shannon.jpg b/aio/content/images/bios/shannon.jpg
index 23d98dc23d..3f590d6872 100644
Binary files a/aio/content/images/bios/shannon.jpg and b/aio/content/images/bios/shannon.jpg differ
diff --git a/aio/content/images/bios/shield-bio-placeholder.jpg b/aio/content/images/bios/shield-bio-placeholder.jpg
new file mode 100644
index 0000000000..e0f8892330
Binary files /dev/null and b/aio/content/images/bios/shield-bio-placeholder.jpg differ
diff --git a/aio/content/images/bios/stephenfluin.jpg b/aio/content/images/bios/stephenfluin.jpg
index 8adba0b884..b0d95942bf 100644
Binary files a/aio/content/images/bios/stephenfluin.jpg and b/aio/content/images/bios/stephenfluin.jpg differ
diff --git a/aio/content/images/bios/steyer.jpg b/aio/content/images/bios/steyer.jpg
new file mode 100755
index 0000000000..56ede168c2
Binary files /dev/null and b/aio/content/images/bios/steyer.jpg differ
diff --git a/aio/content/images/bios/teropa.jpg b/aio/content/images/bios/teropa.jpg
index 3d0686e66f..175be9e860 100644
Binary files a/aio/content/images/bios/teropa.jpg and b/aio/content/images/bios/teropa.jpg differ
diff --git a/aio/content/images/bios/thierrychatel.jpg b/aio/content/images/bios/thierrychatel.jpg
new file mode 100755
index 0000000000..1a57f41fe8
Binary files /dev/null and b/aio/content/images/bios/thierrychatel.jpg differ
diff --git a/aio/content/images/bios/thomas.jpg b/aio/content/images/bios/thomas.jpg
index b648e62617..1fdbda575b 100644
Binary files a/aio/content/images/bios/thomas.jpg and b/aio/content/images/bios/thomas.jpg differ
diff --git a/aio/content/images/bios/tobias.jpg b/aio/content/images/bios/tobias.jpg
index e4b3daef4e..5fa0e3c618 100644
Binary files a/aio/content/images/bios/tobias.jpg and b/aio/content/images/bios/tobias.jpg differ
diff --git a/aio/content/images/bios/toddmotto.jpg b/aio/content/images/bios/toddmotto.jpg
new file mode 100755
index 0000000000..522e24dbbf
Binary files /dev/null and b/aio/content/images/bios/toddmotto.jpg differ
diff --git a/aio/content/images/bios/tonyc.jpg b/aio/content/images/bios/tonyc.jpg
index 67cfd57557..4a22c874ff 100644
Binary files a/aio/content/images/bios/tonyc.jpg and b/aio/content/images/bios/tonyc.jpg differ
diff --git a/aio/content/images/bios/topherfangio.jpg b/aio/content/images/bios/topherfangio.jpg
index 632263ab7f..a3a3653137 100644
Binary files a/aio/content/images/bios/topherfangio.jpg and b/aio/content/images/bios/topherfangio.jpg differ
diff --git a/aio/content/images/bios/torgeirhelgevold.jpg b/aio/content/images/bios/torgeirhelgevold.jpg
index 1945c90b35..fc4b2e089b 100644
Binary files a/aio/content/images/bios/torgeirhelgevold.jpg and b/aio/content/images/bios/torgeirhelgevold.jpg differ
diff --git a/aio/content/images/bios/urish.jpg b/aio/content/images/bios/urish.jpg
new file mode 100755
index 0000000000..c838e0cecf
Binary files /dev/null and b/aio/content/images/bios/urish.jpg differ
diff --git a/aio/content/images/bios/victor.jpg b/aio/content/images/bios/victor.jpg
index 1566c57bae..54d6a7c44e 100644
Binary files a/aio/content/images/bios/victor.jpg and b/aio/content/images/bios/victor.jpg differ
diff --git a/aio/content/images/bios/vikram.jpg b/aio/content/images/bios/vikram.jpg
index ffc64a9913..654c9cf728 100644
Binary files a/aio/content/images/bios/vikram.jpg and b/aio/content/images/bios/vikram.jpg differ
diff --git a/aio/content/images/bios/vincirufus.jpg b/aio/content/images/bios/vincirufus.jpg
new file mode 100755
index 0000000000..54224ffa85
Binary files /dev/null and b/aio/content/images/bios/vincirufus.jpg differ
diff --git a/aio/content/images/bios/wardbell.jpg b/aio/content/images/bios/wardbell.jpg
index 3040284a2e..e2494eaf41 100644
Binary files a/aio/content/images/bios/wardbell.jpg and b/aio/content/images/bios/wardbell.jpg differ
diff --git a/aio/content/images/bios/wassim.jpg b/aio/content/images/bios/wassim.jpg
new file mode 100755
index 0000000000..f32143f4b8
Binary files /dev/null and b/aio/content/images/bios/wassim.jpg differ
diff --git a/aio/content/images/bios/willmendesneto.jpg b/aio/content/images/bios/willmendesneto.jpg
new file mode 100644
index 0000000000..108bb2c295
Binary files /dev/null and b/aio/content/images/bios/willmendesneto.jpg differ
diff --git a/aio/content/images/bios/xiaofei.jpg b/aio/content/images/bios/xiaofei.jpg
index ac46e2c32d..770ccd8bc9 100644
Binary files a/aio/content/images/bios/xiaofei.jpg and b/aio/content/images/bios/xiaofei.jpg differ
diff --git a/aio/src/assets/images/devguide/animations/animation_auto.gif b/aio/content/images/guide/animations/animation_auto.gif
similarity index 100%
rename from aio/src/assets/images/devguide/animations/animation_auto.gif
rename to aio/content/images/guide/animations/animation_auto.gif
diff --git a/aio/src/assets/images/devguide/animations/animation_basic_click.gif b/aio/content/images/guide/animations/animation_basic_click.gif
similarity index 100%
rename from aio/src/assets/images/devguide/animations/animation_basic_click.gif
rename to aio/content/images/guide/animations/animation_basic_click.gif
diff --git a/aio/src/assets/images/devguide/animations/animation_enter_leave.gif b/aio/content/images/guide/animations/animation_enter_leave.gif
similarity index 100%
rename from aio/src/assets/images/devguide/animations/animation_enter_leave.gif
rename to aio/content/images/guide/animations/animation_enter_leave.gif
diff --git a/aio/src/assets/images/devguide/animations/animation_enter_leave_states.gif b/aio/content/images/guide/animations/animation_enter_leave_states.gif
similarity index 100%
rename from aio/src/assets/images/devguide/animations/animation_enter_leave_states.gif
rename to aio/content/images/guide/animations/animation_enter_leave_states.gif
diff --git a/aio/src/assets/images/devguide/animations/animation_groups.gif b/aio/content/images/guide/animations/animation_groups.gif
similarity index 100%
rename from aio/src/assets/images/devguide/animations/animation_groups.gif
rename to aio/content/images/guide/animations/animation_groups.gif
diff --git a/aio/src/assets/images/devguide/animations/animation_multistep.gif b/aio/content/images/guide/animations/animation_multistep.gif
similarity index 100%
rename from aio/src/assets/images/devguide/animations/animation_multistep.gif
rename to aio/content/images/guide/animations/animation_multistep.gif
diff --git a/aio/src/assets/images/devguide/animations/animation_timings.gif b/aio/content/images/guide/animations/animation_timings.gif
similarity index 100%
rename from aio/src/assets/images/devguide/animations/animation_timings.gif
rename to aio/content/images/guide/animations/animation_timings.gif
diff --git a/aio/src/assets/images/devguide/animations/ng_animate_transitions_inactive_active.png b/aio/content/images/guide/animations/ng_animate_transitions_inactive_active.png
similarity index 100%
rename from aio/src/assets/images/devguide/animations/ng_animate_transitions_inactive_active.png
rename to aio/content/images/guide/animations/ng_animate_transitions_inactive_active.png
diff --git a/aio/src/assets/images/devguide/animations/ng_animate_transitions_inactive_active_void.png b/aio/content/images/guide/animations/ng_animate_transitions_inactive_active_void.png
similarity index 100%
rename from aio/src/assets/images/devguide/animations/ng_animate_transitions_inactive_active_void.png
rename to aio/content/images/guide/animations/ng_animate_transitions_inactive_active_void.png
diff --git a/aio/src/assets/images/devguide/animations/ng_animate_transitions_inactive_active_wildcards.png b/aio/content/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png
similarity index 100%
rename from aio/src/assets/images/devguide/animations/ng_animate_transitions_inactive_active_wildcards.png
rename to aio/content/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png
diff --git a/aio/src/assets/images/devguide/animations/ng_animate_transitions_void_in.png b/aio/content/images/guide/animations/ng_animate_transitions_void_in.png
similarity index 100%
rename from aio/src/assets/images/devguide/animations/ng_animate_transitions_void_in.png
rename to aio/content/images/guide/animations/ng_animate_transitions_void_in.png
diff --git a/aio/content/images/guide/aot-compiler/toh-pt6-bundle-200w.png b/aio/content/images/guide/aot-compiler/toh-pt6-bundle-200w.png
new file mode 100644
index 0000000000..1a08e99d3a
Binary files /dev/null and b/aio/content/images/guide/aot-compiler/toh-pt6-bundle-200w.png differ
diff --git a/aio/content/images/guide/aot-compiler/toh-pt6-bundle-400w.png b/aio/content/images/guide/aot-compiler/toh-pt6-bundle-400w.png
new file mode 100644
index 0000000000..ec894b8521
Binary files /dev/null and b/aio/content/images/guide/aot-compiler/toh-pt6-bundle-400w.png differ
diff --git a/aio/content/images/guide/aot-compiler/toh-pt6-bundle-560w.png b/aio/content/images/guide/aot-compiler/toh-pt6-bundle-560w.png
new file mode 100644
index 0000000000..6366498c65
Binary files /dev/null and b/aio/content/images/guide/aot-compiler/toh-pt6-bundle-560w.png differ
diff --git a/aio/content/images/guide/aot-compiler/toh-pt6-bundle-700w.png b/aio/content/images/guide/aot-compiler/toh-pt6-bundle-700w.png
new file mode 100644
index 0000000000..d94cd854c0
Binary files /dev/null and b/aio/content/images/guide/aot-compiler/toh-pt6-bundle-700w.png differ
diff --git a/aio/content/images/guide/aot-compiler/toh-pt6-bundle.png b/aio/content/images/guide/aot-compiler/toh-pt6-bundle.png
new file mode 100644
index 0000000000..fa5f4a3e90
Binary files /dev/null and b/aio/content/images/guide/aot-compiler/toh-pt6-bundle.png differ
diff --git a/aio/src/assets/images/devguide/application-under-test/bongos-heroes.png b/aio/content/images/guide/application-under-test/bongos-heroes.png
similarity index 100%
rename from aio/src/assets/images/devguide/application-under-test/bongos-heroes.png
rename to aio/content/images/guide/application-under-test/bongos-heroes.png
diff --git a/aio/src/assets/images/devguide/architecture/airplane.png b/aio/content/images/guide/architecture/airplane.png
similarity index 100%
rename from aio/src/assets/images/devguide/architecture/airplane.png
rename to aio/content/images/guide/architecture/airplane.png
diff --git a/aio/src/assets/images/devguide/architecture/component-databinding.png b/aio/content/images/guide/architecture/component-databinding.png
similarity index 100%
rename from aio/src/assets/images/devguide/architecture/component-databinding.png
rename to aio/content/images/guide/architecture/component-databinding.png
diff --git a/aio/content/images/guide/architecture/component-tree.png b/aio/content/images/guide/architecture/component-tree.png
new file mode 100644
index 0000000000..6e9de391d8
Binary files /dev/null and b/aio/content/images/guide/architecture/component-tree.png differ
diff --git a/aio/content/images/guide/architecture/databinding.png b/aio/content/images/guide/architecture/databinding.png
new file mode 100644
index 0000000000..85f068adbe
Binary files /dev/null and b/aio/content/images/guide/architecture/databinding.png differ
diff --git a/aio/content/images/guide/architecture/dependency-injection.png b/aio/content/images/guide/architecture/dependency-injection.png
new file mode 100644
index 0000000000..385d1f976d
Binary files /dev/null and b/aio/content/images/guide/architecture/dependency-injection.png differ
diff --git a/aio/content/images/guide/architecture/directive.png b/aio/content/images/guide/architecture/directive.png
new file mode 100644
index 0000000000..576c159868
Binary files /dev/null and b/aio/content/images/guide/architecture/directive.png differ
diff --git a/aio/content/images/guide/architecture/hero-component.png b/aio/content/images/guide/architecture/hero-component.png
new file mode 100644
index 0000000000..26323f4269
Binary files /dev/null and b/aio/content/images/guide/architecture/hero-component.png differ
diff --git a/aio/src/assets/images/devguide/architecture/injector-injects.png b/aio/content/images/guide/architecture/injector-injects.png
similarity index 100%
rename from aio/src/assets/images/devguide/architecture/injector-injects.png
rename to aio/content/images/guide/architecture/injector-injects.png
diff --git a/aio/content/images/guide/architecture/library-module.png b/aio/content/images/guide/architecture/library-module.png
new file mode 100644
index 0000000000..770771a992
Binary files /dev/null and b/aio/content/images/guide/architecture/library-module.png differ
diff --git a/aio/src/assets/images/devguide/architecture/metadata.png b/aio/content/images/guide/architecture/metadata.png
similarity index 100%
rename from aio/src/assets/images/devguide/architecture/metadata.png
rename to aio/content/images/guide/architecture/metadata.png
diff --git a/aio/content/images/guide/architecture/module.png b/aio/content/images/guide/architecture/module.png
new file mode 100644
index 0000000000..6a0b6bc187
Binary files /dev/null and b/aio/content/images/guide/architecture/module.png differ
diff --git a/aio/src/assets/images/devguide/architecture/modules.png b/aio/content/images/guide/architecture/modules.png
similarity index 100%
rename from aio/src/assets/images/devguide/architecture/modules.png
rename to aio/content/images/guide/architecture/modules.png
diff --git a/aio/src/assets/images/devguide/architecture/overview.png b/aio/content/images/guide/architecture/overview.png
similarity index 100%
rename from aio/src/assets/images/devguide/architecture/overview.png
rename to aio/content/images/guide/architecture/overview.png
diff --git a/aio/content/images/guide/architecture/overview2.png b/aio/content/images/guide/architecture/overview2.png
new file mode 100644
index 0000000000..44c87d3549
Binary files /dev/null and b/aio/content/images/guide/architecture/overview2.png differ
diff --git a/aio/content/images/guide/architecture/parent-child-binding.png b/aio/content/images/guide/architecture/parent-child-binding.png
new file mode 100644
index 0000000000..d55d0a45dd
Binary files /dev/null and b/aio/content/images/guide/architecture/parent-child-binding.png differ
diff --git a/aio/src/assets/images/devguide/architecture/service.png b/aio/content/images/guide/architecture/service.png
similarity index 100%
rename from aio/src/assets/images/devguide/architecture/service.png
rename to aio/content/images/guide/architecture/service.png
diff --git a/aio/content/images/guide/architecture/template-metadata-component.png b/aio/content/images/guide/architecture/template-metadata-component.png
new file mode 100644
index 0000000000..585c0c3160
Binary files /dev/null and b/aio/content/images/guide/architecture/template-metadata-component.png differ
diff --git a/aio/content/images/guide/architecture/template.png b/aio/content/images/guide/architecture/template.png
new file mode 100644
index 0000000000..5aa872ec31
Binary files /dev/null and b/aio/content/images/guide/architecture/template.png differ
diff --git a/aio/src/assets/images/devguide/attribute-directives/first-highlight.png b/aio/content/images/guide/attribute-directives/first-highlight.png
similarity index 100%
rename from aio/src/assets/images/devguide/attribute-directives/first-highlight.png
rename to aio/content/images/guide/attribute-directives/first-highlight.png
diff --git a/aio/src/assets/images/devguide/attribute-directives/highlight-directive-anim.gif b/aio/content/images/guide/attribute-directives/highlight-directive-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/attribute-directives/highlight-directive-anim.gif
rename to aio/content/images/guide/attribute-directives/highlight-directive-anim.gif
diff --git a/aio/src/assets/images/devguide/attribute-directives/highlight-directive-final-anim.gif b/aio/content/images/guide/attribute-directives/highlight-directive-final-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/attribute-directives/highlight-directive-final-anim.gif
rename to aio/content/images/guide/attribute-directives/highlight-directive-final-anim.gif
diff --git a/aio/src/assets/images/devguide/attribute-directives/highlight-directive-v2-anim.gif b/aio/content/images/guide/attribute-directives/highlight-directive-v2-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/attribute-directives/highlight-directive-v2-anim.gif
rename to aio/content/images/guide/attribute-directives/highlight-directive-v2-anim.gif
diff --git a/aio/content/images/guide/cli-quickstart/app-works.png b/aio/content/images/guide/cli-quickstart/app-works.png
new file mode 100644
index 0000000000..e243c4a0af
Binary files /dev/null and b/aio/content/images/guide/cli-quickstart/app-works.png differ
diff --git a/aio/content/images/guide/cli-quickstart/my-first-app.png b/aio/content/images/guide/cli-quickstart/my-first-app.png
new file mode 100644
index 0000000000..54152d1287
Binary files /dev/null and b/aio/content/images/guide/cli-quickstart/my-first-app.png differ
diff --git a/aio/src/assets/images/cookbooks/component-communication/bidirectional-service.gif b/aio/content/images/guide/component-interaction/bidirectional-service.gif
similarity index 100%
rename from aio/src/assets/images/cookbooks/component-communication/bidirectional-service.gif
rename to aio/content/images/guide/component-interaction/bidirectional-service.gif
diff --git a/aio/src/assets/images/cookbooks/component-communication/child-to-parent.gif b/aio/content/images/guide/component-interaction/child-to-parent.gif
similarity index 100%
rename from aio/src/assets/images/cookbooks/component-communication/child-to-parent.gif
rename to aio/content/images/guide/component-interaction/child-to-parent.gif
diff --git a/aio/src/assets/images/cookbooks/component-communication/contentchildren.png b/aio/content/images/guide/component-interaction/contentchildren.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/component-communication/contentchildren.png
rename to aio/content/images/guide/component-interaction/contentchildren.png
diff --git a/aio/src/assets/images/cookbooks/component-communication/countdown-timer-anim.gif b/aio/content/images/guide/component-interaction/countdown-timer-anim.gif
similarity index 100%
rename from aio/src/assets/images/cookbooks/component-communication/countdown-timer-anim.gif
rename to aio/content/images/guide/component-interaction/countdown-timer-anim.gif
diff --git a/aio/src/assets/images/cookbooks/component-communication/parent-to-child-on-changes.gif b/aio/content/images/guide/component-interaction/parent-to-child-on-changes.gif
similarity index 100%
rename from aio/src/assets/images/cookbooks/component-communication/parent-to-child-on-changes.gif
rename to aio/content/images/guide/component-interaction/parent-to-child-on-changes.gif
diff --git a/aio/src/assets/images/cookbooks/component-communication/parent-to-child.png b/aio/content/images/guide/component-interaction/parent-to-child.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/component-communication/parent-to-child.png
rename to aio/content/images/guide/component-interaction/parent-to-child.png
diff --git a/aio/src/assets/images/cookbooks/component-communication/setter.png b/aio/content/images/guide/component-interaction/setter.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/component-communication/setter.png
rename to aio/content/images/guide/component-interaction/setter.png
diff --git a/aio/src/assets/images/cookbooks/component-communication/unrelated-service.gif b/aio/content/images/guide/component-interaction/unrelated-service.gif
similarity index 100%
rename from aio/src/assets/images/cookbooks/component-communication/unrelated-service.gif
rename to aio/content/images/guide/component-interaction/unrelated-service.gif
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/alex.png b/aio/content/images/guide/dependency-injection-in-action/alex.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/dependency-injection/alex.png
rename to aio/content/images/guide/dependency-injection-in-action/alex.png
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/alice.png b/aio/content/images/guide/dependency-injection-in-action/alice.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/dependency-injection/alice.png
rename to aio/content/images/guide/dependency-injection-in-action/alice.png
diff --git a/aio/content/images/guide/dependency-injection-in-action/date-logger-entry.png b/aio/content/images/guide/dependency-injection-in-action/date-logger-entry.png
new file mode 100644
index 0000000000..204b7260ce
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/date-logger-entry.png differ
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/hero-bio-and-content.png b/aio/content/images/guide/dependency-injection-in-action/hero-bio-and-content.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/dependency-injection/hero-bio-and-content.png
rename to aio/content/images/guide/dependency-injection-in-action/hero-bio-and-content.png
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/hero-bio-contact-no-host.png b/aio/content/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/dependency-injection/hero-bio-contact-no-host.png
rename to aio/content/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/hero-bios-and-contacts.png b/aio/content/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/dependency-injection/hero-bios-and-contacts.png
rename to aio/content/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/hero-bios.png b/aio/content/images/guide/dependency-injection-in-action/hero-bios.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/dependency-injection/hero-bios.png
rename to aio/content/images/guide/dependency-injection-in-action/hero-bios.png
diff --git a/aio/content/images/guide/dependency-injection-in-action/hero-of-month.png b/aio/content/images/guide/dependency-injection-in-action/hero-of-month.png
new file mode 100644
index 0000000000..532f5c3ab2
Binary files /dev/null and b/aio/content/images/guide/dependency-injection-in-action/hero-of-month.png differ
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/highlight.png b/aio/content/images/guide/dependency-injection-in-action/highlight.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/dependency-injection/highlight.png
rename to aio/content/images/guide/dependency-injection-in-action/highlight.png
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/logged-in-user.png b/aio/content/images/guide/dependency-injection-in-action/logged-in-user.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/dependency-injection/logged-in-user.png
rename to aio/content/images/guide/dependency-injection-in-action/logged-in-user.png
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/minimal-logger-intellisense.png b/aio/content/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/dependency-injection/minimal-logger-intellisense.png
rename to aio/content/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/sorted-heroes.png b/aio/content/images/guide/dependency-injection-in-action/sorted-heroes.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/dependency-injection/sorted-heroes.png
rename to aio/content/images/guide/dependency-injection-in-action/sorted-heroes.png
diff --git a/aio/src/assets/images/devguide/dependency-injection/car-components.png b/aio/content/images/guide/dependency-injection/car-components.png
similarity index 100%
rename from aio/src/assets/images/devguide/dependency-injection/car-components.png
rename to aio/content/images/guide/dependency-injection/car-components.png
diff --git a/aio/src/assets/images/devguide/dependency-injection/component-hierarchy.png b/aio/content/images/guide/dependency-injection/component-hierarchy.png
similarity index 100%
rename from aio/src/assets/images/devguide/dependency-injection/component-hierarchy.png
rename to aio/content/images/guide/dependency-injection/component-hierarchy.png
diff --git a/aio/src/assets/images/devguide/dependency-injection/hid-heroes-anim.gif b/aio/content/images/guide/dependency-injection/hid-heroes-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/dependency-injection/hid-heroes-anim.gif
rename to aio/content/images/guide/dependency-injection/hid-heroes-anim.gif
diff --git a/aio/src/assets/images/devguide/dependency-injection/injector-tree.png b/aio/content/images/guide/dependency-injection/injector-tree.png
similarity index 100%
rename from aio/src/assets/images/devguide/dependency-injection/injector-tree.png
rename to aio/content/images/guide/dependency-injection/injector-tree.png
diff --git a/aio/src/assets/images/devguide/displaying-data/final.png b/aio/content/images/guide/displaying-data/final.png
similarity index 100%
rename from aio/src/assets/images/devguide/displaying-data/final.png
rename to aio/content/images/guide/displaying-data/final.png
diff --git a/aio/src/assets/images/devguide/displaying-data/hero-names-list.png b/aio/content/images/guide/displaying-data/hero-names-list.png
similarity index 100%
rename from aio/src/assets/images/devguide/displaying-data/hero-names-list.png
rename to aio/content/images/guide/displaying-data/hero-names-list.png
diff --git a/aio/src/assets/images/devguide/displaying-data/title-and-hero.png b/aio/content/images/guide/displaying-data/title-and-hero.png
similarity index 100%
rename from aio/src/assets/images/devguide/displaying-data/title-and-hero.png
rename to aio/content/images/guide/displaying-data/title-and-hero.png
diff --git a/aio/content/images/guide/docs-style-guide/docs-style-guide-plunker.png b/aio/content/images/guide/docs-style-guide/docs-style-guide-plunker.png
new file mode 100644
index 0000000000..22cd657e3e
Binary files /dev/null and b/aio/content/images/guide/docs-style-guide/docs-style-guide-plunker.png differ
diff --git a/aio/content/images/guide/docs-style-guide/flying-hero.png b/aio/content/images/guide/docs-style-guide/flying-hero.png
new file mode 100644
index 0000000000..d8e43ea29a
Binary files /dev/null and b/aio/content/images/guide/docs-style-guide/flying-hero.png differ
diff --git a/aio/src/assets/images/cookbooks/dynamic-component-loader/ads.gif b/aio/content/images/guide/dynamic-component-loader/ads.gif
similarity index 100%
rename from aio/src/assets/images/cookbooks/dynamic-component-loader/ads.gif
rename to aio/content/images/guide/dynamic-component-loader/ads.gif
diff --git a/aio/src/assets/images/cookbooks/dynamic-form/dynamic-form.png b/aio/content/images/guide/dynamic-form/dynamic-form.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/dynamic-form/dynamic-form.png
rename to aio/content/images/guide/dynamic-form/dynamic-form.png
diff --git a/aio/src/assets/images/devguide/first-app-tests/Jasmine-not-running-tests.png b/aio/content/images/guide/first-app-tests/Jasmine-not-running-tests.png
similarity index 100%
rename from aio/src/assets/images/devguide/first-app-tests/Jasmine-not-running-tests.png
rename to aio/content/images/guide/first-app-tests/Jasmine-not-running-tests.png
diff --git a/aio/src/assets/images/devguide/first-app-tests/passed-2-specs-0-failures.png b/aio/content/images/guide/first-app-tests/passed-2-specs-0-failures.png
similarity index 100%
rename from aio/src/assets/images/devguide/first-app-tests/passed-2-specs-0-failures.png
rename to aio/content/images/guide/first-app-tests/passed-2-specs-0-failures.png
diff --git a/aio/src/assets/images/devguide/first-app-tests/test-passed-once-again.png b/aio/content/images/guide/first-app-tests/test-passed-once-again.png
similarity index 100%
rename from aio/src/assets/images/devguide/first-app-tests/test-passed-once-again.png
rename to aio/content/images/guide/first-app-tests/test-passed-once-again.png
diff --git a/aio/src/assets/images/cookbooks/form-validation/plunker.png b/aio/content/images/guide/form-validation/plunker.png
similarity index 100%
rename from aio/src/assets/images/cookbooks/form-validation/plunker.png
rename to aio/content/images/guide/form-validation/plunker.png
diff --git a/aio/src/assets/images/devguide/forms/control-state-transitions-anim.gif b/aio/content/images/guide/forms/control-state-transitions-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/forms/control-state-transitions-anim.gif
rename to aio/content/images/guide/forms/control-state-transitions-anim.gif
diff --git a/aio/src/assets/images/devguide/forms/hero-form-1.png b/aio/content/images/guide/forms/hero-form-1.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/hero-form-1.png
rename to aio/content/images/guide/forms/hero-form-1.png
diff --git a/aio/src/assets/images/devguide/forms/hero-form-2.png b/aio/content/images/guide/forms/hero-form-2.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/hero-form-2.png
rename to aio/content/images/guide/forms/hero-form-2.png
diff --git a/aio/src/assets/images/devguide/forms/hero-form-3.png b/aio/content/images/guide/forms/hero-form-3.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/hero-form-3.png
rename to aio/content/images/guide/forms/hero-form-3.png
diff --git a/aio/src/assets/images/devguide/forms/hf-4.png b/aio/content/images/guide/forms/hf-4.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/hf-4.png
rename to aio/content/images/guide/forms/hf-4.png
diff --git a/aio/src/assets/images/devguide/forms/hf-5.png b/aio/content/images/guide/forms/hf-5.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/hf-5.png
rename to aio/content/images/guide/forms/hf-5.png
diff --git a/aio/src/assets/images/devguide/forms/name-required-error.png b/aio/content/images/guide/forms/name-required-error.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/name-required-error.png
rename to aio/content/images/guide/forms/name-required-error.png
diff --git a/aio/src/assets/images/devguide/forms/ng-control-class-changes.png b/aio/content/images/guide/forms/ng-control-class-changes.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/ng-control-class-changes.png
rename to aio/content/images/guide/forms/ng-control-class-changes.png
diff --git a/aio/src/assets/images/devguide/forms/ng-model-in-action-2.png b/aio/content/images/guide/forms/ng-model-in-action-2.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/ng-model-in-action-2.png
rename to aio/content/images/guide/forms/ng-model-in-action-2.png
diff --git a/aio/src/assets/images/devguide/forms/ng-model-in-action.png b/aio/content/images/guide/forms/ng-model-in-action.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/ng-model-in-action.png
rename to aio/content/images/guide/forms/ng-model-in-action.png
diff --git a/aio/src/assets/images/devguide/forms/tdf-1.png b/aio/content/images/guide/forms/tdf-1.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/tdf-1.png
rename to aio/content/images/guide/forms/tdf-1.png
diff --git a/aio/src/assets/images/devguide/forms/tdf-2.png b/aio/content/images/guide/forms/tdf-2.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/tdf-2.png
rename to aio/content/images/guide/forms/tdf-2.png
diff --git a/aio/src/assets/images/devguide/forms/tdf-3.png b/aio/content/images/guide/forms/tdf-3.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/tdf-3.png
rename to aio/content/images/guide/forms/tdf-3.png
diff --git a/aio/src/assets/images/devguide/forms/tdf-4.png b/aio/content/images/guide/forms/tdf-4.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/tdf-4.png
rename to aio/content/images/guide/forms/tdf-4.png
diff --git a/aio/src/assets/images/devguide/forms/tdf-5.png b/aio/content/images/guide/forms/tdf-5.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/tdf-5.png
rename to aio/content/images/guide/forms/tdf-5.png
diff --git a/aio/src/assets/images/devguide/forms/validity-required-indicator.png b/aio/content/images/guide/forms/validity-required-indicator.png
similarity index 100%
rename from aio/src/assets/images/devguide/forms/validity-required-indicator.png
rename to aio/content/images/guide/forms/validity-required-indicator.png
diff --git a/aio/src/assets/images/devguide/server-communication/hero-list.png b/aio/content/images/guide/http/hero-list.png
similarity index 100%
rename from aio/src/assets/images/devguide/server-communication/hero-list.png
rename to aio/content/images/guide/http/hero-list.png
diff --git a/aio/content/images/guide/http/http-toh.gif b/aio/content/images/guide/http/http-toh.gif
new file mode 100644
index 0000000000..f07c364aaf
Binary files /dev/null and b/aio/content/images/guide/http/http-toh.gif differ
diff --git a/aio/content/images/guide/http/wiki-1.gif b/aio/content/images/guide/http/wiki-1.gif
new file mode 100644
index 0000000000..4c32ad1d64
Binary files /dev/null and b/aio/content/images/guide/http/wiki-1.gif differ
diff --git a/aio/content/images/guide/http/wiki-2.gif b/aio/content/images/guide/http/wiki-2.gif
new file mode 100644
index 0000000000..72b32d5aa2
Binary files /dev/null and b/aio/content/images/guide/http/wiki-2.gif differ
diff --git a/aio/src/assets/images/devguide/intro/people.png b/aio/content/images/guide/intro/people.png
similarity index 100%
rename from aio/src/assets/images/devguide/intro/people.png
rename to aio/content/images/guide/intro/people.png
diff --git a/aio/src/assets/images/devguide/jasmine-testing-101/jasmine-1-spec-0-failures.png b/aio/content/images/guide/jasmine-testing-101/jasmine-1-spec-0-failures.png
similarity index 100%
rename from aio/src/assets/images/devguide/jasmine-testing-101/jasmine-1-spec-0-failures.png
rename to aio/content/images/guide/jasmine-testing-101/jasmine-1-spec-0-failures.png
diff --git a/aio/src/assets/images/devguide/jasmine-testing-101/null-to-equal-undefined.png b/aio/content/images/guide/jasmine-testing-101/null-to-equal-undefined.png
similarity index 100%
rename from aio/src/assets/images/devguide/jasmine-testing-101/null-to-equal-undefined.png
rename to aio/content/images/guide/jasmine-testing-101/null-to-equal-undefined.png
diff --git a/aio/src/assets/images/devguide/jasmine-testing-101/spec-list-2-specs-1-failure.png b/aio/content/images/guide/jasmine-testing-101/spec-list-2-specs-1-failure.png
similarity index 100%
rename from aio/src/assets/images/devguide/jasmine-testing-101/spec-list-2-specs-1-failure.png
rename to aio/content/images/guide/jasmine-testing-101/spec-list-2-specs-1-failure.png
diff --git a/aio/src/assets/images/devguide/jasmine-testing-101/test-report-1-spec-0-failures.png b/aio/content/images/guide/jasmine-testing-101/test-report-1-spec-0-failures.png
similarity index 100%
rename from aio/src/assets/images/devguide/jasmine-testing-101/test-report-1-spec-0-failures.png
rename to aio/content/images/guide/jasmine-testing-101/test-report-1-spec-0-failures.png
diff --git a/aio/src/assets/images/devguide/jasmine-testing-101/test-report-2-specs-0-failures.png b/aio/content/images/guide/jasmine-testing-101/test-report-2-specs-0-failures.png
similarity index 100%
rename from aio/src/assets/images/devguide/jasmine-testing-101/test-report-2-specs-0-failures.png
rename to aio/content/images/guide/jasmine-testing-101/test-report-2-specs-0-failures.png
diff --git a/aio/src/assets/images/devguide/jasmine-testing-101/test-report-2-specs-1-failure.png b/aio/content/images/guide/jasmine-testing-101/test-report-2-specs-1-failure.png
similarity index 100%
rename from aio/src/assets/images/devguide/jasmine-testing-101/test-report-2-specs-1-failure.png
rename to aio/content/images/guide/jasmine-testing-101/test-report-2-specs-1-failure.png
diff --git a/aio/content/images/guide/language-service/language-completion.gif b/aio/content/images/guide/language-service/language-completion.gif
new file mode 100644
index 0000000000..4c6de8a48d
Binary files /dev/null and b/aio/content/images/guide/language-service/language-completion.gif differ
diff --git a/aio/content/images/guide/language-service/language-error.gif b/aio/content/images/guide/language-service/language-error.gif
new file mode 100644
index 0000000000..e26b25b8de
Binary files /dev/null and b/aio/content/images/guide/language-service/language-error.gif differ
diff --git a/aio/content/images/guide/language-service/language-navigation.gif b/aio/content/images/guide/language-service/language-navigation.gif
new file mode 100644
index 0000000000..973db203b8
Binary files /dev/null and b/aio/content/images/guide/language-service/language-navigation.gif differ
diff --git a/aio/src/assets/images/devguide/lifecycle-hooks/after-view-anim.gif b/aio/content/images/guide/lifecycle-hooks/after-view-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/lifecycle-hooks/after-view-anim.gif
rename to aio/content/images/guide/lifecycle-hooks/after-view-anim.gif
diff --git a/aio/src/assets/images/devguide/lifecycle-hooks/do-check-anim.gif b/aio/content/images/guide/lifecycle-hooks/do-check-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/lifecycle-hooks/do-check-anim.gif
rename to aio/content/images/guide/lifecycle-hooks/do-check-anim.gif
diff --git a/aio/content/images/guide/lifecycle-hooks/hooks-in-sequence.png b/aio/content/images/guide/lifecycle-hooks/hooks-in-sequence.png
new file mode 100644
index 0000000000..7e4dde4fd9
Binary files /dev/null and b/aio/content/images/guide/lifecycle-hooks/hooks-in-sequence.png differ
diff --git a/aio/src/assets/images/devguide/lifecycle-hooks/on-changes-anim.gif b/aio/content/images/guide/lifecycle-hooks/on-changes-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/lifecycle-hooks/on-changes-anim.gif
rename to aio/content/images/guide/lifecycle-hooks/on-changes-anim.gif
diff --git a/aio/src/assets/images/devguide/lifecycle-hooks/peek-a-boo.gif b/aio/content/images/guide/lifecycle-hooks/peek-a-boo.gif
similarity index 100%
rename from aio/src/assets/images/devguide/lifecycle-hooks/peek-a-boo.gif
rename to aio/content/images/guide/lifecycle-hooks/peek-a-boo.gif
diff --git a/aio/src/assets/images/devguide/lifecycle-hooks/peek-a-boo.png b/aio/content/images/guide/lifecycle-hooks/peek-a-boo.png
similarity index 100%
rename from aio/src/assets/images/devguide/lifecycle-hooks/peek-a-boo.png
rename to aio/content/images/guide/lifecycle-hooks/peek-a-boo.png
diff --git a/aio/src/assets/images/devguide/lifecycle-hooks/projected-child-view.png b/aio/content/images/guide/lifecycle-hooks/projected-child-view.png
similarity index 100%
rename from aio/src/assets/images/devguide/lifecycle-hooks/projected-child-view.png
rename to aio/content/images/guide/lifecycle-hooks/projected-child-view.png
diff --git a/aio/src/assets/images/devguide/lifecycle-hooks/spy-directive.gif b/aio/content/images/guide/lifecycle-hooks/spy-directive.gif
similarity index 100%
rename from aio/src/assets/images/devguide/lifecycle-hooks/spy-directive.gif
rename to aio/content/images/guide/lifecycle-hooks/spy-directive.gif
diff --git a/aio/content/images/guide/ngcontainer/hero-traits-bad.png b/aio/content/images/guide/ngcontainer/hero-traits-bad.png
new file mode 100644
index 0000000000..37e23a5ec6
Binary files /dev/null and b/aio/content/images/guide/ngcontainer/hero-traits-bad.png differ
diff --git a/aio/content/images/guide/ngcontainer/hero-traits-good.png b/aio/content/images/guide/ngcontainer/hero-traits-good.png
new file mode 100644
index 0000000000..0ce389b2a3
Binary files /dev/null and b/aio/content/images/guide/ngcontainer/hero-traits-good.png differ
diff --git a/aio/src/assets/images/devguide/ngmodule/contact-1b-plunker.png b/aio/content/images/guide/ngmodule/contact-1b-plunker.png
similarity index 100%
rename from aio/src/assets/images/devguide/ngmodule/contact-1b-plunker.png
rename to aio/content/images/guide/ngmodule/contact-1b-plunker.png
diff --git a/aio/src/assets/images/devguide/ngmodule/contact-2-plunker.png b/aio/content/images/guide/ngmodule/contact-2-plunker.png
similarity index 100%
rename from aio/src/assets/images/devguide/ngmodule/contact-2-plunker.png
rename to aio/content/images/guide/ngmodule/contact-2-plunker.png
diff --git a/aio/src/assets/images/devguide/ngmodule/final-plunker.png b/aio/content/images/guide/ngmodule/final-plunker.png
similarity index 100%
rename from aio/src/assets/images/devguide/ngmodule/final-plunker.png
rename to aio/content/images/guide/ngmodule/final-plunker.png
diff --git a/aio/src/assets/images/devguide/ngmodule/minimal-plunker.png b/aio/content/images/guide/ngmodule/minimal-plunker.png
similarity index 100%
rename from aio/src/assets/images/devguide/ngmodule/minimal-plunker.png
rename to aio/content/images/guide/ngmodule/minimal-plunker.png
diff --git a/aio/src/assets/images/devguide/ngmodule/v3-plunker.png b/aio/content/images/guide/ngmodule/v3-plunker.png
similarity index 100%
rename from aio/src/assets/images/devguide/ngmodule/v3-plunker.png
rename to aio/content/images/guide/ngmodule/v3-plunker.png
diff --git a/aio/src/assets/images/devguide/pipes/date-format-toggle-anim.gif b/aio/content/images/guide/pipes/date-format-toggle-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/pipes/date-format-toggle-anim.gif
rename to aio/content/images/guide/pipes/date-format-toggle-anim.gif
diff --git a/aio/src/assets/images/devguide/pipes/flying-heroes-anim.gif b/aio/content/images/guide/pipes/flying-heroes-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/pipes/flying-heroes-anim.gif
rename to aio/content/images/guide/pipes/flying-heroes-anim.gif
diff --git a/aio/src/assets/images/devguide/pipes/hero-list.png b/aio/content/images/guide/pipes/hero-list.png
similarity index 100%
rename from aio/src/assets/images/devguide/pipes/hero-list.png
rename to aio/content/images/guide/pipes/hero-list.png
diff --git a/aio/src/assets/images/devguide/pipes/power-boost-calculator-anim.gif b/aio/content/images/guide/pipes/power-boost-calculator-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/pipes/power-boost-calculator-anim.gif
rename to aio/content/images/guide/pipes/power-boost-calculator-anim.gif
diff --git a/aio/src/assets/images/devguide/pipes/power-boost-calculator.png b/aio/content/images/guide/pipes/power-boost-calculator.png
similarity index 100%
rename from aio/src/assets/images/devguide/pipes/power-boost-calculator.png
rename to aio/content/images/guide/pipes/power-boost-calculator.png
diff --git a/aio/src/assets/images/devguide/pipes/power-booster.png b/aio/content/images/guide/pipes/power-booster.png
similarity index 100%
rename from aio/src/assets/images/devguide/pipes/power-booster.png
rename to aio/content/images/guide/pipes/power-booster.png
diff --git a/aio/src/assets/images/devguide/quickstart/hello-angular.png b/aio/content/images/guide/quickstart/hello-angular.png
similarity index 100%
rename from aio/src/assets/images/devguide/quickstart/hello-angular.png
rename to aio/content/images/guide/quickstart/hello-angular.png
diff --git a/aio/src/assets/images/devguide/quickstart/my-first-app.png b/aio/content/images/guide/quickstart/my-first-app.png
similarity index 100%
rename from aio/src/assets/images/devguide/quickstart/my-first-app.png
rename to aio/content/images/guide/quickstart/my-first-app.png
diff --git a/aio/src/assets/images/devguide/quickstart/quickstart-plnkr-big.png b/aio/content/images/guide/quickstart/quickstart-plnkr-big.png
similarity index 100%
rename from aio/src/assets/images/devguide/quickstart/quickstart-plnkr-big.png
rename to aio/content/images/guide/quickstart/quickstart-plnkr-big.png
diff --git a/aio/src/assets/images/devguide/quickstart/quickstart-plnkr.png b/aio/content/images/guide/quickstart/quickstart-plnkr.png
similarity index 100%
rename from aio/src/assets/images/devguide/quickstart/quickstart-plnkr.png
rename to aio/content/images/guide/quickstart/quickstart-plnkr.png
diff --git a/aio/content/images/guide/reactive-forms/address-group.png b/aio/content/images/guide/reactive-forms/address-group.png
new file mode 100644
index 0000000000..ee1587c107
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/address-group.png differ
diff --git a/aio/content/images/guide/reactive-forms/addresses-array.png b/aio/content/images/guide/reactive-forms/addresses-array.png
new file mode 100644
index 0000000000..b86733613e
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/addresses-array.png differ
diff --git a/aio/src/assets/images/devguide/reactive-forms/hero-detail.png b/aio/content/images/guide/reactive-forms/hero-detail.png
similarity index 100%
rename from aio/src/assets/images/devguide/reactive-forms/hero-detail.png
rename to aio/content/images/guide/reactive-forms/hero-detail.png
diff --git a/aio/src/assets/images/devguide/reactive-forms/hero-list.png b/aio/content/images/guide/reactive-forms/hero-list.png
similarity index 100%
rename from aio/src/assets/images/devguide/reactive-forms/hero-list.png
rename to aio/content/images/guide/reactive-forms/hero-list.png
diff --git a/aio/content/images/guide/reactive-forms/json-output.png b/aio/content/images/guide/reactive-forms/json-output.png
new file mode 100644
index 0000000000..11f4e77fd9
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/json-output.png differ
diff --git a/aio/content/images/guide/reactive-forms/just-formcontrol.png b/aio/content/images/guide/reactive-forms/just-formcontrol.png
new file mode 100644
index 0000000000..d300239a2f
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/just-formcontrol.png differ
diff --git a/aio/src/assets/images/devguide/reactive-forms/save-revert-buttons.png b/aio/content/images/guide/reactive-forms/save-revert-buttons.png
similarity index 100%
rename from aio/src/assets/images/devguide/reactive-forms/save-revert-buttons.png
rename to aio/content/images/guide/reactive-forms/save-revert-buttons.png
diff --git a/aio/content/images/guide/reactive-forms/validators-json-output.png b/aio/content/images/guide/reactive-forms/validators-json-output.png
new file mode 100644
index 0000000000..aca7c0450d
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/validators-json-output.png differ
diff --git a/aio/src/assets/images/devguide/router/component-tree.png b/aio/content/images/guide/router/component-tree.png
similarity index 100%
rename from aio/src/assets/images/devguide/router/component-tree.png
rename to aio/content/images/guide/router/component-tree.png
diff --git a/aio/content/images/guide/router/confirm-dialog.png b/aio/content/images/guide/router/confirm-dialog.png
new file mode 100644
index 0000000000..f0baed3798
Binary files /dev/null and b/aio/content/images/guide/router/confirm-dialog.png differ
diff --git a/aio/content/images/guide/router/contact-popup.png b/aio/content/images/guide/router/contact-popup.png
new file mode 100644
index 0000000000..b92580aec8
Binary files /dev/null and b/aio/content/images/guide/router/contact-popup.png differ
diff --git a/aio/content/images/guide/router/crisis-center-detail.png b/aio/content/images/guide/router/crisis-center-detail.png
new file mode 100644
index 0000000000..b1b910ff7d
Binary files /dev/null and b/aio/content/images/guide/router/crisis-center-detail.png differ
diff --git a/aio/content/images/guide/router/crisis-center-list.png b/aio/content/images/guide/router/crisis-center-list.png
new file mode 100644
index 0000000000..8b913b259a
Binary files /dev/null and b/aio/content/images/guide/router/crisis-center-list.png differ
diff --git a/aio/content/images/guide/router/hero-detail.png b/aio/content/images/guide/router/hero-detail.png
new file mode 100644
index 0000000000..ed4571f481
Binary files /dev/null and b/aio/content/images/guide/router/hero-detail.png differ
diff --git a/aio/content/images/guide/router/hero-list.png b/aio/content/images/guide/router/hero-list.png
new file mode 100644
index 0000000000..fa6c64675a
Binary files /dev/null and b/aio/content/images/guide/router/hero-list.png differ
diff --git a/aio/content/images/guide/router/router-1-anim.gif b/aio/content/images/guide/router/router-1-anim.gif
new file mode 100644
index 0000000000..07a012d25b
Binary files /dev/null and b/aio/content/images/guide/router/router-1-anim.gif differ
diff --git a/aio/src/assets/images/devguide/router/router-2-anim.gif b/aio/content/images/guide/router/router-2-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/router/router-2-anim.gif
rename to aio/content/images/guide/router/router-2-anim.gif
diff --git a/aio/src/assets/images/devguide/router/selected-crisis.png b/aio/content/images/guide/router/selected-crisis.png
similarity index 100%
rename from aio/src/assets/images/devguide/router/selected-crisis.png
rename to aio/content/images/guide/router/selected-crisis.png
diff --git a/aio/src/assets/images/devguide/router/selected-hero.png b/aio/content/images/guide/router/selected-hero.png
similarity index 100%
rename from aio/src/assets/images/devguide/router/selected-hero.png
rename to aio/content/images/guide/router/selected-hero.png
diff --git a/aio/content/images/guide/router/shell-and-outlet.png b/aio/content/images/guide/router/shell-and-outlet.png
new file mode 100644
index 0000000000..9545f3e032
Binary files /dev/null and b/aio/content/images/guide/router/shell-and-outlet.png differ
diff --git a/aio/content/images/guide/security/binding-inner-html.png b/aio/content/images/guide/security/binding-inner-html.png
new file mode 100644
index 0000000000..5c5b11eba8
Binary files /dev/null and b/aio/content/images/guide/security/binding-inner-html.png differ
diff --git a/aio/content/images/guide/security/bypass-security-component.png b/aio/content/images/guide/security/bypass-security-component.png
new file mode 100644
index 0000000000..34d076cdfc
Binary files /dev/null and b/aio/content/images/guide/security/bypass-security-component.png differ
diff --git a/aio/src/assets/images/cookbooks/set-document-title/set-title-anim.gif b/aio/content/images/guide/set-document-title/set-title-anim.gif
similarity index 100%
rename from aio/src/assets/images/cookbooks/set-document-title/set-title-anim.gif
rename to aio/content/images/guide/set-document-title/set-title-anim.gif
diff --git a/aio/src/assets/images/devguide/structural-directives/bad-paragraph.png b/aio/content/images/guide/structural-directives/bad-paragraph.png
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/bad-paragraph.png
rename to aio/content/images/guide/structural-directives/bad-paragraph.png
diff --git a/aio/src/assets/images/devguide/structural-directives/bad-select.png b/aio/content/images/guide/structural-directives/bad-select.png
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/bad-select.png
rename to aio/content/images/guide/structural-directives/bad-select.png
diff --git a/aio/src/assets/images/devguide/structural-directives/element-display-in-dom.png b/aio/content/images/guide/structural-directives/element-display-in-dom.png
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/element-display-in-dom.png
rename to aio/content/images/guide/structural-directives/element-display-in-dom.png
diff --git a/aio/src/assets/images/devguide/structural-directives/element-not-in-dom.png b/aio/content/images/guide/structural-directives/element-not-in-dom.png
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/element-not-in-dom.png
rename to aio/content/images/guide/structural-directives/element-not-in-dom.png
diff --git a/aio/src/assets/images/devguide/structural-directives/good-paragraph.png b/aio/content/images/guide/structural-directives/good-paragraph.png
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/good-paragraph.png
rename to aio/content/images/guide/structural-directives/good-paragraph.png
diff --git a/aio/src/assets/images/devguide/structural-directives/hero-div-in-dom.png b/aio/content/images/guide/structural-directives/hero-div-in-dom.png
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/hero-div-in-dom.png
rename to aio/content/images/guide/structural-directives/hero-div-in-dom.png
diff --git a/aio/src/assets/images/devguide/structural-directives/myUnless-is-true.png b/aio/content/images/guide/structural-directives/myUnless-is-true.png
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/myUnless-is-true.png
rename to aio/content/images/guide/structural-directives/myUnless-is-true.png
diff --git a/aio/src/assets/images/devguide/structural-directives/ngIf-and-myUnless.png b/aio/content/images/guide/structural-directives/ngIf-and-myUnless.png
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/ngIf-and-myUnless.png
rename to aio/content/images/guide/structural-directives/ngIf-and-myUnless.png
diff --git a/aio/src/assets/images/devguide/structural-directives/ngSwitch-rendering.png b/aio/content/images/guide/structural-directives/ngSwitch-rendering.png
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/ngSwitch-rendering.png
rename to aio/content/images/guide/structural-directives/ngSwitch-rendering.png
diff --git a/aio/src/assets/images/devguide/structural-directives/select-ngcontainer-anim.gif b/aio/content/images/guide/structural-directives/select-ngcontainer-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/select-ngcontainer-anim.gif
rename to aio/content/images/guide/structural-directives/select-ngcontainer-anim.gif
diff --git a/aio/src/assets/images/devguide/structural-directives/template-rendering.png b/aio/content/images/guide/structural-directives/template-rendering.png
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/template-rendering.png
rename to aio/content/images/guide/structural-directives/template-rendering.png
diff --git a/aio/src/assets/images/devguide/structural-directives/unless-anim.gif b/aio/content/images/guide/structural-directives/unless-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/structural-directives/unless-anim.gif
rename to aio/content/images/guide/structural-directives/unless-anim.gif
diff --git a/aio/content/images/guide/styleguide/use-extension.gif b/aio/content/images/guide/styleguide/use-extension.gif
new file mode 100644
index 0000000000..0d9de0e01f
Binary files /dev/null and b/aio/content/images/guide/styleguide/use-extension.gif differ
diff --git a/aio/content/images/guide/template-syntax/evil-title.png b/aio/content/images/guide/template-syntax/evil-title.png
new file mode 100644
index 0000000000..010d634b6c
Binary files /dev/null and b/aio/content/images/guide/template-syntax/evil-title.png differ
diff --git a/aio/src/assets/images/devguide/template-syntax/input-output.png b/aio/content/images/guide/template-syntax/input-output.png
similarity index 100%
rename from aio/src/assets/images/devguide/template-syntax/input-output.png
rename to aio/content/images/guide/template-syntax/input-output.png
diff --git a/aio/content/images/guide/template-syntax/ng-for-track-by-anim.gif b/aio/content/images/guide/template-syntax/ng-for-track-by-anim.gif
new file mode 100644
index 0000000000..716e6a44ba
Binary files /dev/null and b/aio/content/images/guide/template-syntax/ng-for-track-by-anim.gif differ
diff --git a/aio/src/assets/images/devguide/template-syntax/ng-model-anim.gif b/aio/content/images/guide/template-syntax/ng-model-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/template-syntax/ng-model-anim.gif
rename to aio/content/images/guide/template-syntax/ng-model-anim.gif
diff --git a/aio/src/assets/images/devguide/template-syntax/switch-anim.gif b/aio/content/images/guide/template-syntax/switch-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/template-syntax/switch-anim.gif
rename to aio/content/images/guide/template-syntax/switch-anim.gif
diff --git a/aio/src/assets/images/devguide/testing-an-angular-pipe/5-specs-0-failures.png b/aio/content/images/guide/testing-an-angular-pipe/5-specs-0-failures.png
similarity index 100%
rename from aio/src/assets/images/devguide/testing-an-angular-pipe/5-specs-0-failures.png
rename to aio/content/images/guide/testing-an-angular-pipe/5-specs-0-failures.png
diff --git a/aio/src/assets/images/devguide/testing-an-angular-pipe/big-time-fail-screen.png b/aio/content/images/guide/testing-an-angular-pipe/big-time-fail-screen.png
similarity index 100%
rename from aio/src/assets/images/devguide/testing-an-angular-pipe/big-time-fail-screen.png
rename to aio/content/images/guide/testing-an-angular-pipe/big-time-fail-screen.png
diff --git a/aio/src/assets/images/devguide/testing-an-angular-pipe/two-failures.png b/aio/content/images/guide/testing-an-angular-pipe/two-failures.png
similarity index 100%
rename from aio/src/assets/images/devguide/testing-an-angular-pipe/two-failures.png
rename to aio/content/images/guide/testing-an-angular-pipe/two-failures.png
diff --git a/aio/src/assets/images/devguide/testing-an-angular-pipe/zero-failures.png b/aio/content/images/guide/testing-an-angular-pipe/zero-failures.png
similarity index 100%
rename from aio/src/assets/images/devguide/testing-an-angular-pipe/zero-failures.png
rename to aio/content/images/guide/testing-an-angular-pipe/zero-failures.png
diff --git a/aio/src/assets/images/devguide/testing/app-plunker.png b/aio/content/images/guide/testing/app-plunker.png
similarity index 100%
rename from aio/src/assets/images/devguide/testing/app-plunker.png
rename to aio/content/images/guide/testing/app-plunker.png
diff --git a/aio/src/assets/images/devguide/testing/app-specs-plunker.png b/aio/content/images/guide/testing/app-specs-plunker.png
similarity index 100%
rename from aio/src/assets/images/devguide/testing/app-specs-plunker.png
rename to aio/content/images/guide/testing/app-specs-plunker.png
diff --git a/aio/src/assets/images/devguide/testing/hero-detail.component.png b/aio/content/images/guide/testing/hero-detail.component.png
similarity index 100%
rename from aio/src/assets/images/devguide/testing/hero-detail.component.png
rename to aio/content/images/guide/testing/hero-detail.component.png
diff --git a/aio/content/images/guide/testing/highlight-directive-spec.png b/aio/content/images/guide/testing/highlight-directive-spec.png
new file mode 100644
index 0000000000..ca12d5139d
Binary files /dev/null and b/aio/content/images/guide/testing/highlight-directive-spec.png differ
diff --git a/aio/content/images/guide/testing/karma-1st-spec-debug.png b/aio/content/images/guide/testing/karma-1st-spec-debug.png
new file mode 100644
index 0000000000..d37803ba15
Binary files /dev/null and b/aio/content/images/guide/testing/karma-1st-spec-debug.png differ
diff --git a/aio/content/images/guide/testing/karma-1st-spec-output.png b/aio/content/images/guide/testing/karma-1st-spec-output.png
new file mode 100644
index 0000000000..04d6c818d4
Binary files /dev/null and b/aio/content/images/guide/testing/karma-1st-spec-output.png differ
diff --git a/aio/content/images/guide/testing/karma-browser.png b/aio/content/images/guide/testing/karma-browser.png
new file mode 100644
index 0000000000..99d1af8e46
Binary files /dev/null and b/aio/content/images/guide/testing/karma-browser.png differ
diff --git a/aio/src/assets/images/devguide/toh/dashboard-top-heroes.png b/aio/content/images/guide/toh/dashboard-top-heroes.png
similarity index 100%
rename from aio/src/assets/images/devguide/toh/dashboard-top-heroes.png
rename to aio/content/images/guide/toh/dashboard-top-heroes.png
diff --git a/aio/src/assets/images/devguide/toh/hero-details-1.png b/aio/content/images/guide/toh/hero-details-1.png
similarity index 100%
rename from aio/src/assets/images/devguide/toh/hero-details-1.png
rename to aio/content/images/guide/toh/hero-details-1.png
diff --git a/aio/src/assets/images/devguide/toh/hero-details-save-button.png b/aio/content/images/guide/toh/hero-details-save-button.png
similarity index 100%
rename from aio/src/assets/images/devguide/toh/hero-details-save-button.png
rename to aio/content/images/guide/toh/hero-details-save-button.png
diff --git a/aio/src/assets/images/devguide/toh/heroes-dashboard-1.png b/aio/content/images/guide/toh/heroes-dashboard-1.png
similarity index 100%
rename from aio/src/assets/images/devguide/toh/heroes-dashboard-1.png
rename to aio/content/images/guide/toh/heroes-dashboard-1.png
diff --git a/aio/src/assets/images/devguide/toh/heroes-list-1.png b/aio/content/images/guide/toh/heroes-list-1.png
similarity index 100%
rename from aio/src/assets/images/devguide/toh/heroes-list-1.png
rename to aio/content/images/guide/toh/heroes-list-1.png
diff --git a/aio/src/assets/images/devguide/toh/heroes-list-2.png b/aio/content/images/guide/toh/heroes-list-2.png
similarity index 100%
rename from aio/src/assets/images/devguide/toh/heroes-list-2.png
rename to aio/content/images/guide/toh/heroes-list-2.png
diff --git a/aio/src/assets/images/devguide/toh/heroes-list-delete-button.png b/aio/content/images/guide/toh/heroes-list-delete-button.png
similarity index 100%
rename from aio/src/assets/images/devguide/toh/heroes-list-delete-button.png
rename to aio/content/images/guide/toh/heroes-list-delete-button.png
diff --git a/aio/src/assets/images/devguide/toh/heroes-list-selected.png b/aio/content/images/guide/toh/heroes-list-selected.png
similarity index 100%
rename from aio/src/assets/images/devguide/toh/heroes-list-selected.png
rename to aio/content/images/guide/toh/heroes-list-selected.png
diff --git a/aio/content/images/guide/toh/mini-hero-detail.png b/aio/content/images/guide/toh/mini-hero-detail.png
new file mode 100644
index 0000000000..57634227c7
Binary files /dev/null and b/aio/content/images/guide/toh/mini-hero-detail.png differ
diff --git a/aio/src/assets/images/devguide/toh/nav-diagram.png b/aio/content/images/guide/toh/nav-diagram.png
similarity index 100%
rename from aio/src/assets/images/devguide/toh/nav-diagram.png
rename to aio/content/images/guide/toh/nav-diagram.png
diff --git a/aio/src/assets/images/devguide/toh/toh-anim.gif b/aio/content/images/guide/toh/toh-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/toh/toh-anim.gif
rename to aio/content/images/guide/toh/toh-anim.gif
diff --git a/aio/src/assets/images/devguide/toh/toh-hero-search.png b/aio/content/images/guide/toh/toh-hero-search.png
similarity index 100%
rename from aio/src/assets/images/devguide/toh/toh-hero-search.png
rename to aio/content/images/guide/toh/toh-hero-search.png
diff --git a/aio/src/assets/images/devguide/toh/toh-http.anim.gif b/aio/content/images/guide/toh/toh-http.anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/toh/toh-http.anim.gif
rename to aio/content/images/guide/toh/toh-http.anim.gif
diff --git a/aio/src/assets/images/devguide/unit-testing/spectrum.png b/aio/content/images/guide/unit-testing/spectrum.png
similarity index 100%
rename from aio/src/assets/images/devguide/unit-testing/spectrum.png
rename to aio/content/images/guide/unit-testing/spectrum.png
diff --git a/aio/content/images/guide/upgrade/a-to-ajs-with-transclusion.png b/aio/content/images/guide/upgrade/a-to-ajs-with-transclusion.png
new file mode 100644
index 0000000000..f6bc2991b7
Binary files /dev/null and b/aio/content/images/guide/upgrade/a-to-ajs-with-transclusion.png differ
diff --git a/aio/content/images/guide/upgrade/a-to-ajs.png b/aio/content/images/guide/upgrade/a-to-ajs.png
new file mode 100644
index 0000000000..c2b9966287
Binary files /dev/null and b/aio/content/images/guide/upgrade/a-to-ajs.png differ
diff --git a/aio/content/images/guide/upgrade/ajs-to-a-with-projection.png b/aio/content/images/guide/upgrade/ajs-to-a-with-projection.png
new file mode 100644
index 0000000000..8e8f3f1a11
Binary files /dev/null and b/aio/content/images/guide/upgrade/ajs-to-a-with-projection.png differ
diff --git a/aio/content/images/guide/upgrade/ajs-to-a.png b/aio/content/images/guide/upgrade/ajs-to-a.png
new file mode 100644
index 0000000000..469ea5d48e
Binary files /dev/null and b/aio/content/images/guide/upgrade/ajs-to-a.png differ
diff --git a/aio/content/images/guide/upgrade/change_detection.png b/aio/content/images/guide/upgrade/change_detection.png
new file mode 100644
index 0000000000..e432e92ff0
Binary files /dev/null and b/aio/content/images/guide/upgrade/change_detection.png differ
diff --git a/aio/content/images/guide/upgrade/dom.png b/aio/content/images/guide/upgrade/dom.png
new file mode 100644
index 0000000000..bc4496d329
Binary files /dev/null and b/aio/content/images/guide/upgrade/dom.png differ
diff --git a/aio/src/assets/images/devguide/upgrade/injectors-2.png b/aio/content/images/guide/upgrade/injectors-2.png
similarity index 100%
rename from aio/src/assets/images/devguide/upgrade/injectors-2.png
rename to aio/content/images/guide/upgrade/injectors-2.png
diff --git a/aio/content/images/guide/upgrade/injectors.png b/aio/content/images/guide/upgrade/injectors.png
new file mode 100644
index 0000000000..8acba21f10
Binary files /dev/null and b/aio/content/images/guide/upgrade/injectors.png differ
diff --git a/aio/src/assets/images/devguide/user-input/keyup-loop-back-anim.gif b/aio/content/images/guide/user-input/keyup-loop-back-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/user-input/keyup-loop-back-anim.gif
rename to aio/content/images/guide/user-input/keyup-loop-back-anim.gif
diff --git a/aio/src/assets/images/devguide/user-input/keyup1-anim.gif b/aio/content/images/guide/user-input/keyup1-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/user-input/keyup1-anim.gif
rename to aio/content/images/guide/user-input/keyup1-anim.gif
diff --git a/aio/src/assets/images/devguide/user-input/keyup3-anim.gif b/aio/content/images/guide/user-input/keyup3-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/user-input/keyup3-anim.gif
rename to aio/content/images/guide/user-input/keyup3-anim.gif
diff --git a/aio/src/assets/images/devguide/user-input/little-tour-anim.gif b/aio/content/images/guide/user-input/little-tour-anim.gif
similarity index 100%
rename from aio/src/assets/images/devguide/user-input/little-tour-anim.gif
rename to aio/content/images/guide/user-input/little-tour-anim.gif
diff --git a/aio/src/assets/images/devguide/user-input/little-tour.png b/aio/content/images/guide/user-input/little-tour.png
similarity index 100%
rename from aio/src/assets/images/devguide/user-input/little-tour.png
rename to aio/content/images/guide/user-input/little-tour.png
diff --git a/aio/content/images/marketing/features/feature-icon.svg b/aio/content/images/marketing/features/feature-icon.svg
new file mode 100644
index 0000000000..ae6cf46eb0
--- /dev/null
+++ b/aio/content/images/marketing/features/feature-icon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><style>.st0{fill:#C3002F;} .st1{fill:#DD0031;} .st2{fill:#FFFFFF;}</style><path class="st0" d="M140 75c0-35.9-29.1-65-65-65-11.2 0-21.8 2.9-31 7.9l88.2 88.2c4.9-9.3 7.8-19.9 7.8-31.1z"/><path class="st1" d="M44 17.9C23.7 28.9 10 50.3 10 75c0 35.9 29.1 65 65 65 24.7 0 46.1-13.7 57.1-34L44 17.9z"/><path class="st2" d="M77.2 90.2H34c-5 0-9.1-4.1-9.1-9.1V59.2c0-5 4.1-9.1 9.1-9.1h43.2c5 0 9.1 4.1 9.1 9.1v21.9c0 5-4.1 9.1-9.1 9.1zM34 55.2c-2.2 0-4.1 1.8-4.1 4.1v21.9c0 2.2 1.8 4.1 4.1 4.1h43.2c2.2 0 4.1-1.8 4.1-4.1v-22c0-2.2-1.8-4.1-4.1-4.1H34z"/><path class="st2" d="M55.6 99.9c-1.4 0-2.5-1.1-2.5-2.5v-9.7c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5v9.7c0 1.3-1.1 2.5-2.5 2.5z"/><path class="st2" d="M69.9 99.9H41.3c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h28.5c1.4 0 2.5 1.1 2.5 2.5.1 1.3-1 2.5-2.4 2.5zM53.5 76.2l-3-5.1c-.4-.6-.2-1.4.5-1.7.6-.4 1.4-.2 1.7.5l1.2 2 4.9-5.8c.4-.5 1.2-.6 1.8-.2.5.4.6 1.2.2 1.8l-7.3 8.5zm66.1 18.9h-15.5c-3 0-5.5-2.5-5.5-5.5V60.5c0-3 2.5-5.5 5.5-5.5h15.5c3 0 5.5 2.5 5.5 5.5v29.1c0 3-2.5 5.5-5.5 5.5zm-15.5-35.9c-.7 0-1.2.6-1.2 1.2v29.1c0 .7.6 1.2 1.2 1.2h15.5c.7 0 1.2-.6 1.2-1.2v-29c0-.7-.6-1.2-1.2-1.2h-15.5z"/><path class="st2" d="M109.7 80.7l-3-5.1c-.4-.6-.2-1.4.5-1.7.6-.4 1.4-.2 1.7.5l1.2 2 4.9-5.8c.4-.5 1.2-.6 1.8-.2.5.4.6 1.2.2 1.8l-7.3 8.5zm13.3 7.8h-21.2c-.4 0-.8-.3-.8-.8s.3-.8.8-.8H123c.4 0 .8.3.8.8s-.4.8-.8.8z"/></svg>
\ No newline at end of file
diff --git a/aio/content/images/marketing/home/angular-mix.png b/aio/content/images/marketing/home/angular-mix.png
new file mode 100644
index 0000000000..951ca03c9e
Binary files /dev/null and b/aio/content/images/marketing/home/angular-mix.png differ
diff --git a/aio/content/images/marketing/home/code-icon.svg b/aio/content/images/marketing/home/code-icon.svg
new file mode 100644
index 0000000000..1ee77261ef
--- /dev/null
+++ b/aio/content/images/marketing/home/code-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 263 263"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.15;mix-blend-mode:multiply;}.cls-3{fill:#c3002f;}.cls-4{fill:#dd0031;}.cls-5{fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:20px;}</style></defs><title>code-icon</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Design"><image class="cls-2" width="263" height="263" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQcAAAEHCAYAAACjq4OnAAAACXBIWXMAAAsSAAALEgHS3X78AAAgAElEQVR4Xu2dadBtVXWu3yhRNBoRDQoKhwTBpuxFsSs9qIVdxBubUlQasUHU2MQ2v++1xdgktqiXo0a07NDYEEvhYAv2QSvBrsKx14ixi1dv9OodD2Mu9tr7W3vPvb9v9/s9Vc+/WWettb813znGO8acS3/4wx9kjDGDVAeY1SH+/VHhSgvg8mvX7tGsDtUBZrlQtwBcOdgv+OPgKsFVg/2Dq82B/cv1rlKuz31wPxaNFac6wCwO9QvBlQtdAvAnwTWDA4LrBAcF1w8ODg6ZIQeX6xxUrsv1uY+rqyccFo0VpTrAzA9tFYNGCPYvE+4awbXULwBM0kODw4OjgpsHtwluHxwT3HGGHFOuc5tyXa5/eHBDpXCMIxqNYFgslozqADM71C0GVy0TqBGC6wbXC25QJt6R6hcAJuldg2OD+wQPCk4ITgoeHZwaPGYGnFr+/5PK9R5Urs993CW4Q3BbjRYNno/n5Hl57j6xqP1+ZrZUB5jpotFiwAp73TKBdqknBLcL7hTsVr8AnKycqE8Inhr8bfD84OXBq4MzgzfMkDPLdV5ersv1uY/TglOCR2i0aPB8PCfPy3MjFqRIRBaOKhZMdYDZOdoqCPuXSdBEBm0xuGWZQHcL7q2cXI8MHhs8Rf0C8BrlJN0TnB28Ozg3OD/4RPDp4MIZ8ulynfPLdbn+W4OzgteqLho8H89JBHSL4EbKFInIAqF0VLFAqgPM9tBwQTigvPyHlslwizI5mCSssA9RRgRPCp6rnFyvCF4f/KO2CgCT9LPBF4OvBF8PLg2+HXw3+N4M+W65zqXlulz/C8Fngk+qLho8H8/J8z44OE4ZXdxamYqMFVXU/hZme1QHmPHReIJwZHn571wmw4PVLwYvCF6pjAbeGXwo2KtcpT8ffFn9AsAk/UHwo+Cy4KfBL4L/Cn4V/J8Z8qtynV+U63J97uP7wXc0WjR4Lp5vj/J5EYtnBY8PHh7cN7i7hkcVg0Lh1GPKVAeY0TQvpcYTBFZFQumHlUnAZGBStMWAlfZjyol0cfA15SRjlf5h8GP1CwCT9NfBb4L/G/x38Nvgd8H/mwO/K9f773J97qURjlGiwXPxfDznBUqxeFvwuuDFylRkMKpAUPkd+T0boSCioApC9YNyqaOJKVEdYLpRf5RwlfKCXkt1QXh28CLlJGAyMCkuUE8MWGn3KSdSIwS/VE42Jt4oAfh94Q8LoLn2JKLB8/Gc+5Ri8SVlZPHh4F3qjir4Hfk9EYpbBUcoy7kHKj0KRxNTojrA9KOtokCUcG1lbnxEeWHvrOGC8Pbgn5WTgMnApNinrWLARCIaYHK1RWCRArAdRokGz8dz8rw8N9EFqdI3lOkTXsoF6o8q+B35PR8XPDS4lzL1uElwmLZGE/Ymtkl1gEnUE4X91C8K9B9gnh0d3LO8sI/TaEEgOmASMBlGicGqCcEktEWD5+W5iS5IlX6m4VEFvyO/J8YmEcXTlb0W91f2ezTRBGLN34e/k0ViG1QHbDLq9hMIXQlhEYUbK8uORAmPCp5WXtjXqi4ITAImw6aIQY1BoRgWVfA78nt+PPhA8KbgpUqPgigNcUakEWtEm7+TRWIbVAdsKuqJwqCfQOh6U2XrMKXHE4NnBGcoc+T3K1/cSQShNnE2jVFRRSMU3wouUaYeHwneoYzSEGdEGrFGtBFvi8Q2qA7YNNRLH4gUaMCh6tD2EwhdCWFPDp4ZvCR4s7LKcFHwb8oX14IwPbqEgojiJ8pS7jeDf1H2fRBN7FGKNaKNeFsktkF1wKagfk+Bjjw2ChEpIAq0+95DGbISuhLCvix4izJ1oNLwVWW5kReWF9eCMBsaocDUpApC9QOPookmEGdEGrFGtBFvi8Q2qA5Yd9RdfcBTIH2g+YY9ATTl0Lr8PKWfQAj70eBzSrMMUfhPZZTAC8uLa0GYLU3q0RVN8PdArBFtxHtSkbBABNUB64z6fYV29YGyGOXIBwZPVIrCG4N/UoauhLCEsrjpbVFwlLAYBqMJ/h78XRAJxHsckaBXghSSVJKUcuOjiOqAdUTdvsIh5SXhZaF19xRl+vCq4Bxl1eFf1fMTCGUJaS0Ky0Pbm5hEJI5TVjdIIUklSSlJLTc6iqgOWDfUixYGfYWjy0vCy4LRSHnsbOU+ABpyEAXagAf9hE0uPy4rk4gExiW9EicoU0hSyUOVUeRGRxHVAeuCtkYL1y4vQeMrnFBekjPKS0MLL54C6QORAi2/1N7tJ6wO44gE3ZdnKUugpwfHKw/Qof29HUVs3L6N6oB1QN3RwpHlJTi+vBTPLy/Jh8pLw8tDmYxyJM04RAoWhdVklEjQK/EpZerIPo7nKHskqE6xcGBMY1BvnGFZHbDKaHS0cI/yEjynvBTnlJfkEm2tPjTpQ+0lNMtNl0hQ3SBlJHU8T1mefqFyR+j/UBrTdMK2DcuNiCKqA1YVjY4WmirEC8vLcJ56vgIvi6sP6027ukGqSMpI6khHK4fnvE95/B2G9CnKqgae1F8Ef6ZeFLHWAlEdsGqov5lpVLTwqvISXFheCvsKm0cjEqSMpI5Ei7S7czgNRjSG9N8pvSh6Xe4e3EzZMfunWvOKRnXAKqGeMDR9C6g8JwixDwJvoSta+HZ5KewrbC5NM1U7isCIxpCm0/Ks4H8pu2Mpc3Py9y71KhprmWZUB6wK6k8jUHXUHZXfrTygtRYt2FfYbAajCIxoDGk8KHpcOAeTlvmnBn+lPA2chWdt04zqgGVH3WnELqW6o/KnKSsRlCcdLZgaTRTRGJb0tlyqPMCXShbt83gRpKe7tcZpRnXAMqP+akQ7jcB0RN1ReU46fo/ygFZHC2YcBg3Lnytb5emQ3atMS1lwWHjWNs2oDlhW1O8vUI24vvKchd1KVUfdUXnUHtXfp6xEOFow49KIRBNF/IfyCDsWGhYcFp4mzWBBaqcZK99ZWR2wjKjfX+AQFjZL8TEYSk6YRqg66r5XqfaoPurvaMFMSjuKaCoa+zQ8zWCBYqHixLCVFojqgGVCw/0Fzlv4y+DJyj0RmEeoOyqP2jd9C44WzHZpVzSGpRmcHcoCRdkcH4KIdmUFojpgWdBwfwHXmE+rUYv+B+UxbXxAZZ96pqP7Fsw0GJVmsCDRE0G5/H7KSJauypUViOqAZUD9wkC41uUvvE650+5iZfszW6qdRphpMyzNYEHivI9XKCPYlReI6oBFo35h4EcmXCNsI3wjjGv7CxwR9gNlNcJphJkl7TSDhYgFiUOAOMPy74O/Vp412haIleqFqA5YJNoqDIeUHxtVJnwjjOvyF1yNMPOgnWawINE0ReQ6KBAcTIxpjnm+Mr0Q1QGLQqOFgbCN8I0wzv6CWSTtzsq2QHxQ6YE9JXiA0jTfpRXqhagOWAQaLgyoMGqMKqPOhHH2F8yiGSUQtOz/jdI0H2y5vtyHqM2HRVEdMG80vjBcXP4I9hfMMjAoEJQ6adXHJD9TaZqzx+fuygOMOUIAgSCCWMrooTpgnmh7wmB/wSwLbYHgrFHMcUzyvUrT/HnBY5Sf60MgiCBIMZbSg6gOmBeyMJj1oC0Q7V4IThnjeyccGYBA3F2ZYuBBYFIunf9QHTAPZGEw68VgLwR7ei5Vnk2KQBBBkGLgQexSVjGWrsxZHTAP1N/gRB9DU5WwMJhVpt0LwfkQlyojCFIMPAhMSqoYlDmXrlGqOmDWKKMGTBnMGTofaXBqypUWBrPqtAWCCIIUY6/SpKSKQZmTPoil66SsDpgl6u2uxJTBnKElms5HGpzoY7AwmHWgEQhSDDwITEqqGJQ56YMY7KRcCoGoDpgV6vkMmDGYMpgzu5Ut0XQ+0uBEH4OFwawDvLd4EJiUVDEoczaNUqTPzV4M0uortnvX5tEsqQ6YBeo/qAUzZpfSnGETFXslaImm85EGJwuDWRfaZU76IJpGKdLnZrMWaTXp9cJ7IKoDZoH6KxOYMZgymDOYNJg17JXYp+x8dIOTWReGdVKSPpNGk06TVpNeL7wHojpg2mirAUkoxUEtnMfAtuu9StOGvRK/kYXBrBddAkH6TBpNOk1avVtL0ANRHTBNNNyAJKQi98KkwazBtMG88V4Js44MCgTpM2k06TRpNen1wnsgqgOmhYYbkJz5yNFunOBEiIVZg2nzW1kYzPrS3u5N+rxPmU6P7IGozbNpUh0wLdQzIDnff5fGMyBrP7Axq0wjEKTPpNFNDwTpNWk26TZp90IMyuqAaaB+n4FSDef8c5y3DUiz6QzrgSDNJt1emEFZHbBTtNVn4AtBfAiE8/451vt82YA0m81gDwTpNWk26XanQVmbd9OgOmCnqNtn4EtBfBCEc/853tsGpNl0hhmUzSYtPgZ9qHr+w8yjh+qAnaCMGpp+hkPLA/Kg+Ax8MYgPg9AMYgPSbDrDDMo3Kz8CfbyyQYpDYuaSXlQHbBf1pxMHlQc7vjzom9XzGX6uns9Q+wGNWWfaBiWbtL4efFS5B4MGqXsER2pO6UV1wHZRfzpxZHmwJ5YH/Wh58J/IPoMxbdoGJR99Zg/G+5SHxFDd45ucc0kvqgO2g7amE3csD/bC8qBfLg9un8GYrTAfGv/h28GFyqoeUfcDNaf0ojpgUtSdTjywPNhbyoN+W71+BguDMVtp9z8QZZ+nOacX1QGTotHpxHnlQdtly9qPZMwmsvD0ojpgEuR0wphpMiq9mHn1ojpgXDS6OuF0wpjtMZheYOa/Mjg9ODY4IjhAZXNWbZ5OQnXAuKi3d+KAcsPHlgd4pXrVCacTxkxGV3pxjrJX6ITgaOXxclPfe1EdMA7q3ztxSLnhE8oDnCOnE8bshHZ68S3lCdZnKQ+ovY/yAzkHasrmZHXAOKhnQh5YbvQ+5cbPKg/yLTmdMGYntJujLgnOVR4Oc0pw5+AwTdmcrA6ooX4T8rByo6eUGz+3PEi72an2IxhjttLenMXpUZ8LzlbubJ5J70N1wBjC0NXT8Lflxj9XHsR7J4zZOc3eCz6Q803ljuam92Hq5mR1QEUcukzIpqfh/PIAP5X3ThgzDbrMyfeq25zccfRQHTBCGJqoocuEfK9sQhozC4aZk5wcdVxwlLIBccfRQ3XACHFoooZrlxs6rtzgWbIJacwsaczJy5SeHueinBGcGNxBee7kjqOH6oAhwtCOGm5QbujEcoMfKjd8mWxCGjML2uYkB8Pw9W6OQXiGslI4leihOmCEOLSjhnuXG3tTudHvyiakMbOkMSdpLPyasjL4Ek0xeqgOGCIOXPDq6nkN7J84o9zgV8sN24Q0ZnY05mRX9MBi3Y4e5iMO6vU18LENKhT3DJ4W7AkuUi9qsAlpzGxpRw8syizOLNIs1k3lgkX8yrV5PS1xwIjcX9nXcKvgocoKBaflcqz2T+SowZh5MBg9sDjvUS7WLNos3izi2+qarA4YEIZmDwWfCKcb8q7Kk6Q5Yv4TygoFXxC212DMfGiiBxZlFmcWaRZrFm0WbxZxFvOJjcnqgAFxaMqX7KHgQxt8kYduyHcoPwZKX8Ov5ajBmHnRVC5YlFmcWaRZrFm0WbxZxFnMJ96xWR3QEobB8iXHzJ8cvEy5JZtuSI7Udl+DMfOFxZhFmcWZRZrFmkWbxZtFnMV84rJmdcCAOLTLl9RTn6k8yOWzyj0Uv1LmQLWHMcZMj6ZrksWZRZrFmkX7ZOUivq2yZnVASxza5cvbq798SZ21KV86ajBm/rAoszizSLNYs2izeA82RU1XHOTypTHLDvNusCmqKWuymE9c1qwOKOLg8qUxy83Uy5rVAUUcGiOSE6XvovzyL47ox+XypTHLwlTLmvUBvZSCMxv4DgWtmc8O3q78EO4P5fKlMcvAYFmTxZtFnMWcRZ3F/XJjsjbvxxWHdkpx6+BhwYuUOQ0nSnOYi8uXxiwHTVmTRZvFm0WcxZxFncWdRX6s1GIccRhMKR4fvC74pPI7FI0RWbtpY8zsacqaLNos3iziLOYs6izuY6cWNWEYTCkoizQpxZfkjkhjlpHGmGTxZhFnMWdRnyi1qImDUwpjVo92xySLeJNasLiPnVrUxMEphTGrx1RSi1HC4JTCmNVlx6nFKHFwSmHM6rLj1GKUODilMGZ12XFqMUwY2nspbqQ8dv5ZwduUtVOnFMYsPztKLUaJAx/Gva7yE3cPVrZhflB5Vp1TCmOWn3ZqwaLO4s4iz2LPoj9yr8UwccBv4PuXByuPuT45eGVwQbBP2Z7plMKY5aadWrCos7izyLPYs+iz+BMETCQO+A0cLbUruFvwJOUOL46//r7yE3dOKYxZfljEWcz3KRd3FvmTlYs+iz9BQKfvMCylGCxhPjd4Z3Bx8GPll6ycUhiz/LCIs5izqLO471Eu9iz6u5RBQKfvMEwcGr/hlsFDghfIJUxjVhHmKYs5izqLO4s8i31T0hzqO0ziN3xM9huMWTXavgMnRPEt20HfofP4OPsNxqw/je9wabA3eIXy+LjbBdfTkH6HYX4DoYb9BmPWg+bwWY6P+3Tw+uCxwZ2UJ1N3ni3ZJQ6EGIP9DYQihCT2G4xZPdoHwHxeeTL1U4LdweEaYkp2+Q2EGIQahByEHoQge5Uhif0GY1aP5mRqIv8vB+9SfvRm5D6LLr+BEINQg5CD0IMQhFCEkMQfrTFm9ejaZ1E1JYeZkYcrQw5CD0IQQhEfJGvM6jKxKdllRrabnwg9CEEIRQhJ/EUrY1aTiU3JLjPyOsHNgwfJZqQx68LEpuQwM/K2wSOClwfnK0ORXyjPxK/dhDFm+ZjYlBwUh3Zn5KOVH8RgH/h3ZDPSmFVmWKckGQKZAhlDnynZVam4ofIwiNOC/y13RhqzLhD5kwH8uzIjIDMgQ7iN8mQo9lRdqUsc9guuqcw/jg2eGrw1+IJcqTBmHWifDPWJ4NXKvVN8hfv6GqhYdFUqjgruq8xH3h18JbhMrlQYs+qwuLcrFmcGpwbHBIdo4GwHVyqM2Ryasx2+F1wUvFH5kd12OXOLOGBGkm+Qd5B/tCsV5CeuVBiz+jTlzB8En1Xutj49uKs6DpwdLGOSd5B/nKzMR8hLfAy9MesB4sCu6ubAWTxFvEU8xj9Xeo77dYlDU8Yk/6CMST7yKfX2VNiMNGa1aXod8BDxEvEU8RbxGPEa+3odBsUBU+KOwWOCNwQXKvMTlzGNWX0m6nWwOBizWYzd62BxMGazGLvXweJgzGbR7nXAU8RbxGPEa+z7joXFwZjNot3rwPxmnjPfmfd9jVAWB2M2C4uDMaYTi4MxphOLgzGmE4uDMaYTi4MxphOLgzGmE4uDMaYTi4MxphOLgzGmE4uDMaYTi4MxphOLgzGmE4uDMaYTi4MxphOLgzGmE4uDMaYT5rFPgjLGbOF38hmSxpgOtn36tD9qY8z6su3vVvhzeMasN9v+4hXhBGGFP6RrzHpC9P8bTfitzD9ShhOEFYQXhBmEG4QdhB+EIYQjvx/jBowxywniMPFXthEHwgnCCsILwgzCDcIOwg/CEMIRi4Mxq0u7x+Gi4I3B44I7BTcIrq5iRl4hDkUg9lOGFYQXhBmEG4QdhB+EIb+RTUljVpl2j8OnlUWHU5VFiL4GqEFxuLIyrCC8IMx4gjLsIPz4vjIcsTgYs7qM3eMwKA7udTBmvRm7x6FLHFAOeh2acuZr5HKmMevARD0OXeLgcqYx60nT4/Dj4MvBu5RFh/sER2qgx2FQHFzONGZ9acqYPww+H7wleEqwOzg8uIZaZcwucWjKmSgJioKyoDAoDYrjcqYxqwmWQLtS8frgseovY3aLQ6tigYIcrlQUlAWFQWlQHFcsjFlNEIdfBpcGe4NXBI8KbhdcTwOVimHigIKgJCgKyoLCoDTNBiybksasFm0z8uvBuUrL4MHBLYLrasCM7BKHpmKBkqAoKAsKs1epOCiPxcGY1WJiM7JLHBpTEiVBUVAWm5LGrDYTm5HDxAEFuZZ6puRzg3cGFyuVhzZqi4Mxq8PEZuQWcWj5DijJruBuwZOUbdSfUbZRu1PSmNWi6Yy8VNm3hFXwSI0wI4eJQ/tUqDsoOyVfGXws2Cf7DsasEo0Z+Z/BV4MPBs/TiM7IUeJAakGnJL7DLYOHBC9QOpw4nfYdjFkdGr+hOeDlbcGzguOCGykthC1m5ChxGGyGsu9gzGrS3on5yeB1weODu6jjgJeR4lAEwr6DMatPk1L8LPhG8OHgxcHD1duJ2ek3jBKHYb7DBbLvYMyqgDgQ5Q/2N9wvuLGG9DfUxKHtO7T7HTAzMDXsOxiz/DTHwhHtE/XvUWYBd1dmBZ39DeOIQ9PvgGmBeYGJgZnRHBvnfRbGLDfNfop9yqif6P9kZTbQ9+m7scWhCET72DjMC0wMzAxMDR/+Ysxy095P0ZQwB/dTkB10phQ1cWj2WWBa3Dp4WPAiuaRpzCqw7RLmOOLQVdJ8dvD24EtyamHMMrPtEmZVHIpAOLUwZvXo2qJN1E/0TxYwsoQ5rjg4tTBm9WjvwiSlINon6r+3RmzRnlQcBlOLe6uXWnxRPh3KmGWDhZqNVlQpvhV8PHit8stWY6cUVXEoAjGYWjyuXOzj5eK/LDfj6MGYxdMc7PKT4JLgA8oqxUODW2nMlGJccWinFrcqF3l+uegl5SZ88Kwxy0FzdgMfoqLx6U3B04N7BUdojCrFJOLQbog6olzk6eWinyk34bMljVk87b0U3ww+Erw0OEnZ+MTX7DoPdtmWOBSBaA6ePaRc5KRy0Y+Um/iZbEwas2javQ3/ErxDuZfi/sFNggM15OyGnYhDc7bkgeUi9y8XfUe5Cfc8GLNYBo1IPmOJN3ia8sPYhyn3UuynGYjDfuU/P6xc7LRy8U/IxqQxi4aFuTEi/y14v7ZpRE4kDkUghhmT7y830xiTjh6MmS8syE1HJIfIXqTcgfm04J6a0IjcjjgMGpP3LBffU27mu+p1TDp6MGZ+NOVLzonkExI0KZ6h/O7M7TWhETmxOBSBaBuTR5eLn1Fu5qvl5hw9GDNf2uXLzyq/S/FM5X6oo4JrawIjcrvi0BiT1y4XpWPyGcGblWVNRw/GzJfB8uVHg5cpz204Rvldiss7IjUHcWg6JrkoZc0Tg5coowdCGkcPxsyPYeXLvwxuql75cmwjclviUATiSuqPHghdHD0YM3+mXr7cqTg4ejBmOZh6+XJH4lAEwtGDMYuliRqYZ98JLgzO0g7Ll9MQB0cPxiwW5hXHzl+m3AD5IeU3KaggUkncVvlyx+JQBMLRgzGLoalQ8HFcvIZPKaMGNkRyRuS2y5fTEgdHD8bMn6Ybku9RUKHgYzXvVXoNJ6gXNWyrfDkVcSgC4ejBmPnSmJAc0Uhfw/nBq4InBscqvQZObttW+XKa4uDowZj50TYh6Yb8XHC2sq/hgcrvUVCh4GM1O4oadiwORSDGjR68Y9OYndGYkM0RcCzAfxecEtxZ2ddwTe2gQjFtcRgWPbDn4kPlIS4rD+XowZjtMcyE/Bvlgtwc5sJXrHaUTlwxt2sDxkFbowcc06eXm/9UeZhfyKdFGbMdJjEht9UN2TmvawPGQf3RQ7Nj84Ry8+eUh/lReTibk8ZMxtxMyL55XRswLupFDweUm+WmT1d+2ZedYnwEB3PS6YUx4zNXE7JvTtcGjIt60cPVys1y08cHz1HuL6e9k0/oOb0wZnzmakL2zenagElQ77QobpaP4NxR2c75wuB9cnphzCTM3YTsm8+1AZOiTC+4WcxJPqF3D2VuRI50npxeGDMOXSYk/t1MTci+uVwbMCnqTi/IjZxeGDMezIl2OsGCim+Hf4ePNzMTsm8u1wZsBzm9MGYnNNWJnwf7gk8rmwr5iDU+3sxMyL55XBuwXTQ6vWiqF6hik15YIIzpr058X/k1+/co04lHKs+FZMGdiQnZN4drA7aLRlcvUEHUcJ9SHb33wph+n+E/gn9Vdhm/XHn02+7gRsoFdyYmZN8crg3YCdqaXqB6qB8qiBqiiqij916YTaftM2DYf0PZ7MSZkE8N7hvcLPgzzTiduGL+1gbsFPWnF6jebqUKooaoIuqIStp/MJtKIwxE0Bwxv08ZWWPg0+z0V8FtgoM1w+rElrlbG7BT1J9eoHqoHyqIGqKKqCMq2S5vWiDMJsE73/QzsIv5C8G7lRE2Rv6dgl3Bn2qG1Yktc7c2YBpIV3yIF9VD/VBB1BBVRB0b/wHVbPwHC4TZBNoG5A+Ci5WnSL80eLw6fAbNIWq4fN7WBkwL9fZeoH67lGqIKqKOqCRqiWo2/Q8WCLPuDBqQHC//z8E/BE9WflGOD9PMzWfom7O1AdNCGT10+Q+PU/aK/5Pyiz1sLrFAmHWny4DcG7xOedwBX6y6ZXB9zdFn6JuztQHTRFv9B1QRdaT/4RXBB5RhFRUMvuLTCETthzZmlagZkA8Kbqs8PKnpZ5iLz9A3X2sDpo36/QdUkf6H+wV/Hfx98EFlByX5l0ucZt1ohGEcA5KP0lxuQGrOUcPlc7U2YBaUh0UN+Y4fBiXh0/2Dpyg7KMm7yL9c4jTrxKAwkEKTSpNSk1qTYu/WggzILfO0NmAWqOc/NA1S7C7j234PUG5HPVOZf7nEadaFLmEghSaVJqUmtV6oAbllntYGzAptFQjyK/Is8i2XOM06MUoYSKWpTJBak2IvzIDcMkdrA2aJegJBXkV+tUsucZr1oiYMeG0IA6k1KTap9kIMyC3zszZg1sglTrO+jCMMeG0IA6n1FZUJLThquHxu1gbMA41f4rRAmFVhpYUBqgPmhYaXOJ9cfkwLhFkVVl4YoDpgnqi7xNnugRgUCJuUZtlYC2GA6oB5ou4SZ9MD0RYIPAhMSqoYlDndB2GWgbURBqgOmDcaLhBNioEHgUlJFWOfsg+CRqnfylGEWRxrJQxQHbAINFogMCmpYlDmpA+CRik6Kf9L9iHMYmjvlVgLYYDqgEWhrQKBB4FJSRWDMid9EDRK7VW2WrMXo71ZywJh5kGz7W5aApkAAAlYSURBVJr0ljSXdJe0d6WFAaoDFon6BQKTkioGZc7dykYpOilptWYvxpdlo9LMjyZaIJ0lrSW93adMd0l7SX+bzseVEwaoDlg06hcIypz0QdAoRSflg5R7MfjYB7s5bVSaedD2F0hnSWtJb0lzSXdJe0l/V1YYoDpgGVBPIOiDoFGKTspdyr0YD1Du5rRRaebBoL9AOktau1eZ5pLukvaS/pIGkw6vnDBAdcAyoV4nJa3W7MVgsxa7OVHoJ2m4Uek0w0yDLn8B45G0lhOcSHNJd3cr01/S4Cv2SmiFhAGqA5YN9W/WaioZw4xKjr3nVKmfy2mG2T6j/AUOg+XMR452I80l3SXtJf0lDV5JYYDqgGVE4xmVHHvPdzG+KKcZZvu004guf4FTojEeOfORNHeXMu0l/SUNXklhgOqAZUXDjUo+2sux93wXgw/nvEdOM8z2aKcRRJ9EoUSje9XzFzg+nqgV45E0l3SXtHehB7VMg+qAZUbDjcrbKD+cc5qcZpjJaVcjiDZ/oow+iUKJRolKu/wF0tyFnfk4baoDVgH1G5V8FwOH+GYanWbwB+cP76Yp06YdLVCN+JHyi/BEn0ShRKNEpUSnRKlr4S90UR2wKqjfqBzsh+hKM75e/vC/KC+CvYjNZjBawKP6trK57jzll+GJQolGiUqJTndpTfyFLqoDVgmNn2bwh/5o+cN/SxlFNF6EU43Nol2JGIwWLgzepzwR/TnKL8TvVkalRKdEqWvhL3RRHbCKaHSawR/42cquynOCTwVfVbZe/1RONTaFRhRYDJpKBIsEi0UTLeBVvVDZ7Xh8cIz604i18Re6qA5YVTQ8zTim/KFPV0YRZymbWD4XfFNONTaBxldoRIEUgoamS5SLBYsGiwfRAp7VPZS9NIdqjdOIQaoDVhl1pxn8gW8eHBucoNybQWfl2cH5Gp5qWCRWn0FfgUiRiPFrwWeUhvVZykWDxYNFBNPxyOAgZTVibdOIQaoD1gH1pxnXLH/oI4KjlTXqU5QVDXLL9ypXD1YRVhNWFYvEajPMVyBSJGL8sNKHOkPZ6ciiweIxGC2sVTWiRnXAuqD+pin+0AcoW69vHNw5eKAyt2xSDVYRVhNWFYvEalLzFYgUiRjpcnxmcGJwnHLRYPHYuGihTXXAuqFeFNF4EQcGhylXiSbVYPVgFWE1wY+wSKwW7UhhmK9AhEikSMR4irKadYfgKOWiweKxcdFCm+qAdUT9XkRXqsHqwSryjOAlqouEjcvF83v1jEY8hV8rTwYjUuDvRUVq0FcgUiRiJHK8ibL9mRSiqURsXLTQpjpgndHwVIPVg1UEP2KYSPCy8dLx8vES8jLyUjZ9EhaK+TCYOvxKuZ0aT4H0gbMWLgrO1XBfgciRCLItChsZLbSpDtgEtDXVYPVgFRklEueWl46Xj5eQl5GXkpfT0cTsGZY6UH3AaORUsE8oz3LcoxQF/n6jfIW1L09OQnXApqBeFDGuSJxRXjpePl5CXkZeSl5ORxOzoR0ldKUOpHxUH+h+fYfyABbSh6cp+xX4+9lXGJPqgE1D44vEo8pL9/zyEvIyfiT4rNL0qkUTForx6BIEogR6FLpSB7oaX6Y0Gh8fPDS4pzJS4O9nX2FMqgM2FdVF4ujy0j20vIS8jJTE3qTh0QT1dZpvqLU3EYVTj63UBIENUex9+FLwceVpTHuU0RwlyZOVx8HfVXmMIOkDLfSDouBoYQTVAZuOhovEweWlu1V5CXkZT1KaXYPRBAYmq9ulSqH4sTKi4IVvpx6bGlU0zzyuIHxSaQy/XbkVv5063EfZIn9TpdGIp8ABLFeXRWEiqgNMoq0icfXy0h1UXkJKYbcP7qWt0cQe5cnYe5VCQQMOJ1PxwvPiMwHInYdFFeskFm0haIsBz83z8zvUBAHhfZFyAx3nhnalDlQfOEJwf6WncHn6IIvC2FQHmH6aF6y8bH9cXr5rlJcRk6srmmBV+5/Kg0j3BO9StuzywvPiY6TtU55SRVTRJRb4FY1grIpoDBMC/BciA7yYRgx4bp5/n/L3GCUICO/DlN4PPQpN6sDv304dXH3YAdUBZjjqb6YaFU2wq48DZxCKJykjihcrX/i3KRtzLlBGFRcrV8t96hcL/AomE4LBxGKCdYnGPIVjcPK3RYD76hIC0ime6YfKCsOlSjHguXn+C5S/B7/LMEG4S3Br5YaoQ+XUYSZUB5g6qkcTf6HcCYpQ3E3Zqvvw8sI/S5kzs0V4T/BOpev+MfXEgsnDJPqOUjAIuS9TTzTIzRvRINIYJRzTYHDy/6Zcm3tABLgf7quJCNpCgPCRVn1eeSLXXqUY8Nx7lL8Dvwe/S00QKEUSJTh1mAHVAWYy1B1NcODMdZUm5i5lXnzr8sIfFzxY6bATVTw3eIH6xYLJc74yzEYw+F7CV5QTjQlHbo7R+QN1C0cTcUyDwcl/Wbkm1+YeEAHuZ5gQIHwc6f6PweuVXypDDHhunp/fgd+D34WUYRxBcJQwA6oDzPZQfzTR7OGg4eYa5QU/qLzwHEBDC28TVeC2P0T9YsHk4fxLnPmzgrcqJxgTDdGgbMqRZvRYcIDuoHAwYb83JQYn/1fKNbk2vQaIAPfDfQ0TAtIqPmH4WOXJXHwMhuiA5+d34Pfgd7EgLJDqALNz1BOKptrRpB688OTK7aiCVZJvINyhTJZ7l8nzCOXuQc7BfKpygjWi8ZrgDcpI42xtFQ4m7IVTomvyc036O96oFIFXK+9rmBAggLuVh//eTply8dw8P78Dvwe/iwVhgVQHmOmjrUIxGFUMigWTh68pIRikImwYYoIx0U5QRhmPCZ6grcLBRD1TKR7T4Extnfxc83SlAJyqNF65ry4hICrgmQ5Xlhyvp54Y8Pz8DvweFoQFUx1gZou6o4q2WDBprqMMrxGMG5aJhW+BaHCyNqE4x5lRPh0UDibqo5WT9jE75NTyfw1O/mPLtREAGpC4H+6riQgOV7cQ4McQGeDN9ImBLAgLpzrAzBd1i8VVyiS6WplQ7CIkwmhEg68tURU5VN3CwYS945QYnPxHlWtybQSA++B+uC/ub5QQWAyWmOoAs1jULxaNYOynnmhcVT3hIEfvEg4ijkOmxMHqn/wHlGtybQSA++B+uC8LwQpTHWCWE20VjZpwTJPByb+fepO/jYVghakOMKuHuoVjFnjyrzHVAcaYzeT/AwxZxLb62AF1AAAAAElFTkSuQmCC"/><path class="cls-3" d="M252.54,127.39A125.28,125.28,0,0,0,67.49,17.32L237.36,187.2A124.68,124.68,0,0,0,252.54,127.39Z"/><path class="cls-4" d="M67.49,17.32A125.26,125.26,0,1,0,237.36,187.2Z"/><polyline class="cls-5" points="82.41 89.39 42.89 131.38 76.9 165.39"/><polyline class="cls-5" points="172.18 165.39 211.69 123.39 177.69 89.39"/><line class="cls-5" x1="144.77" y1="68.85" x2="109.82" y2="185.93"/></g></g></g></svg>
\ No newline at end of file
diff --git a/aio/src/assets/images/home/joyful-development.svg b/aio/content/images/marketing/home/joyful-development.svg
similarity index 100%
rename from aio/src/assets/images/home/joyful-development.svg
rename to aio/content/images/marketing/home/joyful-development.svg
diff --git a/aio/src/assets/images/home/loved-by-millions.svg b/aio/content/images/marketing/home/loved-by-millions.svg
similarity index 100%
rename from aio/src/assets/images/home/loved-by-millions.svg
rename to aio/content/images/marketing/home/loved-by-millions.svg
diff --git a/aio/src/assets/images/home/responsive-framework.svg b/aio/content/images/marketing/home/responsive-framework.svg
similarity index 100%
rename from aio/src/assets/images/home/responsive-framework.svg
rename to aio/content/images/marketing/home/responsive-framework.svg
diff --git a/aio/src/assets/images/home/speed-performance.svg b/aio/content/images/marketing/home/speed-performance.svg
similarity index 99%
rename from aio/src/assets/images/home/speed-performance.svg
rename to aio/content/images/marketing/home/speed-performance.svg
index 0331dbdec2..c6294874b6 100644
--- a/aio/src/assets/images/home/speed-performance.svg
+++ b/aio/content/images/marketing/home/speed-performance.svg
@@ -259,7 +259,7 @@
                     <path d="M15.1748197,2.88436401 L12.7958773,15.1229617" id="Line-Copy-9"></path>
                     <path d="M1.2029061,0.773628441 L0.767790904,13.2336973" id="Line-Copy-10"></path>
                 </g>
-                <g id="speed-guage" transform="translate(17.000000, 0.000000)">
+                <g id="speed-gauge" transform="translate(17.000000, 0.000000)">
                     <mask id="mask-29" fill="white">
                         <use xlink:href="#path-28"></use>
                     </mask>
diff --git a/aio/src/assets/images/plunker/placeholder.png b/aio/content/images/plunker/placeholder.png
similarity index 100%
rename from aio/src/assets/images/plunker/placeholder.png
rename to aio/content/images/plunker/placeholder.png
diff --git a/aio/content/images/plunker/plunker-separate-window-button.png b/aio/content/images/plunker/plunker-separate-window-button.png
new file mode 100644
index 0000000000..b1517a80c9
Binary files /dev/null and b/aio/content/images/plunker/plunker-separate-window-button.png differ
diff --git a/aio/content/images/plunker/plunker-switch-to-editor-button.png b/aio/content/images/plunker/plunker-switch-to-editor-button.png
new file mode 100644
index 0000000000..46263a4ab6
Binary files /dev/null and b/aio/content/images/plunker/plunker-switch-to-editor-button.png differ
diff --git a/aio/content/images/plunker/unused/click-to-run.png b/aio/content/images/plunker/unused/click-to-run.png
new file mode 100644
index 0000000000..d9211dc255
Binary files /dev/null and b/aio/content/images/plunker/unused/click-to-run.png differ
diff --git a/aio/content/license.md b/aio/content/license.md
index 62345da08d..31d926edba 100644
--- a/aio/content/license.md
+++ b/aio/content/license.md
@@ -1,3 +1,5 @@
+@title
+@description
 The MIT License
 
 Copyright (c) 2014-2017 Google, Inc.
diff --git a/aio/content/marketing/about.html b/aio/content/marketing/about.html
index fd7863049c..4039734d1a 100644
--- a/aio/content/marketing/about.html
+++ b/aio/content/marketing/about.html
@@ -1,14 +1,8 @@
-<div class="grid-fluid l-space-bottom-8">
-  <h3 class="title center">Building For the Future</h3>
-  <p>
-    Angular is built by a team of engineers who share a passion for
-    making web development feel effortless. We believe that writing
-    beautiful apps should be joyful and fun. We're building a
-    platform for the future.
-  </p>
-</div>
+<h1 class="title center no-toc">Angular Contributors</h1>
+<h2>Building For the Future</h2>
+<p>Angular is built by a team of engineers who share a passion for
+  making web development feel effortless. We believe that writing
+  beautiful apps should be joyful and fun. We're building a
+  platform for the future.</p>
 
-<div class="grid-fluid l-space-bottom-6">
-  <h3 class="title center">Current Contributors</h3>
-  <aio-contributor-list></aio-contributor-list>
-</div>
+<aio-contributor-list></aio-contributor-list>
diff --git a/aio/content/marketing/api.html b/aio/content/marketing/api.html
index 48a034ac46..c2508b53b3 100755
--- a/aio/content/marketing/api.html
+++ b/aio/content/marketing/api.html
@@ -1 +1,2 @@
+<h1 class="no-toc">API List</h1>
 <aio-api-list></aio-api-list>
diff --git a/aio/content/marketing/contribute.html b/aio/content/marketing/contribute.html
new file mode 100644
index 0000000000..76e8ac1620
--- /dev/null
+++ b/aio/content/marketing/contribute.html
@@ -0,0 +1,34 @@
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Contribute to Angular</h1>
+</header>
+
+<article class="contribute-container">
+  <h2 class="no-anchor">Angular Projects</h2>
+
+  <p>We'd love for you to contribute to our source code and to make Angular projects even better.</p>
+
+  <div class="l-sub-section">
+    <h3 class="no-anchor">Angular</h3>
+
+    Angular is a next generation mobile and desktop application development platform.
+
+    <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button>Contribute to Angular</a>
+  </div>
+
+  <div class="l-sub-section">
+    <h3 class="no-anchor">Angular Material</h3>
+
+    Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification for use in Angular single-page applications (SPAs).
+
+    <a href="https://github.com/angular/material2/blob/master/CONTRIBUTING.md" class="button" md-button>Contribute to Angular Material</a>
+  </div>
+
+  <div class="l-sub-section">
+    <h3 class="no-anchor">AngularFire</h3>
+
+    AngularFire is the officially supported Angular binding for Firebase. Firebase is a full backend so you don't need servers to build your Angular app.
+
+    <a href="https://github.com/angular/angularfire2" class="button" md-button> Contribute to AngularFire</a>
+  </div>
+
+</article>
diff --git a/aio/content/marketing/contribute.md b/aio/content/marketing/contribute.md
deleted file mode 100644
index 589f045f0d..0000000000
--- a/aio/content/marketing/contribute.md
+++ /dev/null
@@ -1,42 +0,0 @@
-@title
-Contribute
-
-@intro
-Contribute to Angular
-
-@description
-Help us build the framework of the future!
-
-## Angular Projects
-
-We'd love for you to contribute to our source code and to make Angular projects even better.
-
-~~~ {.l-sub-section}
-
-### Angular
-
-Angular is a next generation mobile and desktop application development platform.
-
-<a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button>Contribute to Angular</a>
-
-~~~
-
-~~~ {.l-sub-section}
-
-### Angular Material
-
-Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification for use in Angular single-page applications (SPAs).
-
-<a href="https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md" class="button" md-button>Contribute to Angular Material</a>
-
-~~~
-
-~~~ {.l-sub-section}
-
-### AngularFire
-
-AngularFire is the officially supported Angular binding for Firebase. Firebase is a full backend so you don't need servers to build your Angular app.
-
-<a href="https://github.com/firebase/angularFire" class="button" md-button> Contribute to AngularFire</a>
-
-~~~
diff --git a/aio/content/marketing/contributors.json b/aio/content/marketing/contributors.json
index dd5a2f0a7b..0f67259285 100644
--- a/aio/content/marketing/contributors.json
+++ b/aio/content/marketing/contributors.json
@@ -1,533 +1,586 @@
 {
-  "misko": {
-    "name": "Miško Hevery",
-    "picture": "misko.jpg",
-    "twitter": "mhevery",
-    "website": "http://misko.hevery.com",
-    "bio": "Miško Hevery is the creator of AngularJS framework. He has passion for making complex things simple. He currently works at Google, but has previously worked at Adobe, Sun Microsystems, Intel, and Xerox, where he became an expert in building web applications in web related technologies such as Java, JavaScript, Flex and ActionScript.",
-    "group": "Lead"
-  },
+ "misko": {
+   "name": "Miško Hevery",
+   "picture": "misko.jpg",
+   "twitter": "mhevery",
+   "website": "http://misko.hevery.com",
+   "bio": "Miško Hevery is the creator of AngularJS framework. He has passion for making complex things simple. He currently works at Google, but has previously worked at Adobe, Sun Microsystems, Intel, and Xerox, where he became an expert in building web applications in web related technologies such as Java, JavaScript, Flex and ActionScript.",
+   "group": "Angular"
+ },
 
-  "igor": {
-    "name": "Igor Minar",
-    "picture": "igor-minar.jpg",
-    "twitter": "IgorMinar",
-    "website": "https://google.com/+IgorMinar",
-    "bio": "Igor is a software engineer at Google. He is a lead on the Angular project, practitioner of test driven development, open source enthusiast, hacker. In his free time, Igor enjoys spending time with his wife and two kids, doing outdoor activities (including but not limited to sports, gardening and building retaining walls).",
-    "group": "Lead"
-  },
+ "igor": {
+   "name": "Igor Minar",
+   "picture": "igor-minar.jpg",
+   "twitter": "IgorMinar",
+   "website": "https://google.com/+IgorMinar",
+   "bio": "Igor is a software engineer at Google. He is a lead on the Angular project, practitioner of test driven development, open source enthusiast, hacker. In his free time, Igor enjoys spending time with his wife and two kids, doing outdoor activities (including but not limited to sports, gardening and building retaining walls).",
+   "group": "Angular"
+ },
 
-  "naomi": {
-    "name": "Naomi Black",
-    "picture": "naomi.jpg",
-    "twitter": "naomitraveller",
-    "website": "http://google.com/+NaomiBlack",
-    "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She supports Angular's internal Google users and solves hard-to-define problems. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
-    "group": "Lead"
-  },
+ "naomi": {
+   "name": "Naomi Black",
+   "picture": "naomi.jpg",
+   "twitter": "naomitraveller",
+   "website": "http://google.com/+NaomiBlack",
+   "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She supports Angular's internal Google users and solves hard-to-define problems. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
+   "group": "Angular"
+ },
 
-  "brad": {
-    "name": "Brad Green",
-    "picture": "brad-green.jpg",
-    "twitter": "bradlygreen",
-    "website": "https://plus.google.com/+BradGreen",
-    "bio": "Brad Green works at Google as an engineering director. Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad enjoys throwing dinner parties with his wife Heather and putting on plays with his children.",
-    "group": "Lead"
-  },
+ "brad": {
+   "name": "Brad Green",
+   "picture": "brad-green.jpg",
+   "twitter": "bradlygreen",
+   "website": "https://plus.google.com/+BradGreen",
+   "bio": "Brad Green works at Google as an engineering director. Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad enjoys throwing dinner parties with his wife Heather and putting on plays with his children.",
+   "group": "Angular"
+ },
 
-  "juleskremer": {
-    "name": "Jules Kremer",
-    "picture": "juleskremer.jpg",
-    "twitter": "jules_kremer",
-    "website": "https://plus.google.com/+JulesKremer",
-    "bio": "Jules is Head of Angular Developer Relations at Google.  When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.",
-    "group": "Lead"
-  },
+ "juleskremer": {
+   "name": "Jules Kremer",
+   "picture": "juleskremer.jpg",
+   "twitter": "jules_kremer",
+   "website": "https://plus.google.com/+JulesKremer",
+   "bio": "Jules is Head of Angular Developer Relations at Google.  When not working with developers, Jules is often bending into pretzel-like shapes, creating paths through thick jungle with a machete or drinking really awesome beer.",
+   "group": "Angular"
+ },
 
-  "jelbourn": {
-    "name": "Jeremy Elbourn",
-    "picture": "jelbourn.jpg",
-    "twitter": "jelbourn",
-    "website": "https://plus.google.com/+JeremyElbourn/",
-    "bio": "Angular Material Team Lead. FE Engineer @ Google specializing in AngularJS, component design, and the cleanest of code.",
-    "group": "Lead"
-  },
+ "jelbourn": {
+   "name": "Jeremy Elbourn",
+   "picture": "jelbourn.jpg",
+   "twitter": "jelbourn",
+   "website": "https://plus.google.com/+JeremyElbourn/",
+   "bio": "Angular Material Team Lead. FE Engineer @ Google specializing in AngularJS, component design, and the cleanest of code.",
+   "group": "Angular"
+ },
 
-  "pete": {
-    "name": "Pete Bacon Darwin",
-    "picture": "pete.jpg",
-    "twitter": "petebd",
-    "website": "http://www.bacondarwin.com",
-    "bio": "AngularJS for JS Team Lead. Pete has been working on the core team since 2012 and became the team lead for the AngularJS for JS branch in November 2014. He has co-authored a book on AngularJS and regularly talks about and teaches Angular.",
-    "group": "Lead"
-  },
+ "pete": {
+   "name": "Pete Bacon Darwin",
+   "picture": "pete.jpg",
+   "twitter": "petebd",
+   "website": "http://www.bacondarwin.com",
+   "bio": "AngularJS for JS Team Lead. Pete has been working on the core team since 2012 and became the team lead for the AngularJS for JS branch in November 2014. He has co-authored a book on AngularJS and regularly talks about and teaches Angular.",
+   "group": "Angular"
+ },
 
-  "thomas": {
-    "name": "Thomas Burleson",
-    "picture": "thomas.jpg",
-    "twitter": "ThomasBurleson",
-    "website": "http://www.solutionOptimist.com",
-    "bio": "AngularJS Material and @angular/flex-layout Team Lead. Thomas joined the core team in 2014. He leads a team of developers working on UX components for AngularJS.",
-    "group": "Lead"
-  },
-  "stephenfluin": {
-    "name": "Stephen Fluin",
-    "picture": "stephenfluin.jpg",
-    "twitter": "stephenfluin",
-    "website": "https://plus.google.com/+stephenfluin",
-    "bio": "Stephen is a Developer Advocate working on the Angular team. Before joining Google, he was a Google Expert. Stephen loves to help enterprises use technology more effectively.",
-    "group": "Google"
-  },
-  "robwormald": {
-    "name": "Rob Wormald",
-    "picture": "rob-wormald.jpg",
-    "twitter": "robwormald",
-    "website": "http://github.com/robwormald",
-    "bio": "Rob is a Developer Advocate on the Angular team at Google. He's the Angular team's resident reactive programming geek and founded the Reactive Extensions for Angular project, ngrx.",
-    "group": "Google"
-  },
-  "aaronzhang": {
-    "name": "Aaron Zhang (章小飞)",
-    "picture": "xiaofei.jpg",
-    "twitter": "",
-    "website": "http://github.com/damoqiongqiu",
-    "bio": "Aaron is Angular's developer PM in China. He is the lead for angular.cn and social channels in China, and helps developers in China's enterprise and open source communities to be successful with Angular. One of the earliest Angular developers in China since Angular 2012, he translated the first books on Angular into Chinese. Aaron joined the Google team in 2016.",
-    "group": "Google"
-  },
-  "tobias": {
-    "name": "Tobias Bosch",
-    "picture": "tobias.jpg",
-    "twitter": "tbosch1009",
-    "website": "https://plus.google.com/+TobiasBosch",
-    "bio": "Tobias Bosch is a software engineer at Google. He is part of the Angular core team and works on Angular.",
-    "group": "Google"
-  },
+ "stephenfluin": {
+   "name": "Stephen Fluin",
+   "picture": "stephenfluin.jpg",
+   "twitter": "stephenfluin",
+   "website": "https://plus.google.com/+stephenfluin",
+   "bio": "Stephen is a Developer Advocate working on the Angular team. Before joining Google, he was a Google Expert. Stephen loves to help enterprises use technology more effectively.",
+   "group": "Angular"
+ },
 
-  "rado": {
-    "name": "Rado Kirov",
-    "picture": "rado.jpg",
-    "twitter": "radokirov",
-    "website": "https://plus.sandbox.google.com/+RadoslavKirov",
-    "bio": "Rado has been on the Angular Core team since Summer 2014. Before Angular, he worked on the Adsense serving stack, responsible for serving billions of ads daily. Being passionate about open source, he made contributions to Angular as a Google-20% project, before making the fulltime jump. He is a recovering academic; ask him about error-correcting codes from algebraic curves (or don't).",
-    "group": "Google"
-  },
+ "robwormald": {
+   "name": "Rob Wormald",
+   "picture": "rob-wormald.jpg",
+   "twitter": "robwormald",
+   "website": "http://github.com/robwormald",
+   "bio": "Rob is a Developer Advocate on the Angular team at Google. He's the Angular team's resident reactive programming geek and founded the Reactive Extensions for Angular project, ngrx.",
+   "group": "Angular"
+ },
 
-  "davideast": {
-    "name": "David East",
-    "picture": "david-east.jpg",
-    "twitter": "_davideast",
-    "website":"https://github.com/davideast",
-    "bio": "David East is a Developer Programs Engineer at Google. He works full-time on the Firebase team and part-time on the Angular core team.",
-    "group": "Google"
-  },
-  "alexeagle": {
-    "name": "Alex Eagle",
-    "picture": "alex-eagle.jpg",
-    "twitter": "jakeherringbone",
-    "website": "http://google.com/+alexeagle",
-    "bio": "Alex works on language tooling for JavaScript and TypeScript. Previously Alex spent five years in Google's developer testing tools. He has developed systems including Google's continuous integration service, capturing build&test failures, and explaining them to developers. Before Google, Alex worked at startups including Opower, and consulted for large government IT. In his 20% time, he created the Error-Prone static analysis tool, which detects common Java programming mistakes and reports them as compile errors.",
-    "group": "Google"
-  },
+ "aaronzhang": {
+   "name": "Aaron Zhang (章小飞)",
+   "picture": "xiaofei.jpg",
+   "twitter": "",
+   "website": "http://github.com/damoqiongqiu",
+   "bio": "Aaron is Angular's developer PM in China. He is the lead for angular.cn and social channels in China, and helps developers in China's enterprise and open source communities to be successful with Angular. One of the earliest Angular developers in China since Angular 2012, he translated the first books on Angular into Chinese. Aaron joined the Google team in 2016.",
+   "group": "Angular"
+ },
 
-  "martinprobst": {
-    "name": "Martin Probst",
-    "picture": "martin-probst.jpg",
-    "twitter": "martin_probst",
-    "website": "http://probst.io",
-    "bio": "Martin is a software engineer at Google in the AngularJS team. He holds a MSc in Software Engineering from HPI in Potsdam, Germany. Before joining the AngularJS team at Google, he worked at a database startup in the Netherlands, at EMC, at SAP, and as a freelancer. In his free time, he likes to cook and sail, not necessarily at the same time.",
-    "group": "Google"
-  },
+ "tobias": {
+   "name": "Tobias Bosch",
+   "picture": "tobias.jpg",
+   "twitter": "tbosch1009",
+   "website": "https://plus.google.com/+TobiasBosch",
+   "bio": "Tobias Bosch is a software engineer at Google. He is part of the Angular core team and works on Angular.",
+   "group": "Angular"
+ },
 
-  "julieralph": {
-    "name": "Julie Ralph",
-    "picture": "julie-ralph.jpg",
-    "twitter": "SomeJulie",
-    "website": "https://plus.google.com/+JulieRalph",
-    "bio": "Julie Ralph works as a Software Engineer in Test at Google in Seattle and is the lead developer on the Angular end-to-end testing framework Protractor.",
-    "group": "Google"
-  },
+ "rado": {
+   "name": "Rado Kirov",
+   "picture": "rado.jpg",
+   "twitter": "radokirov",
+   "website": "https://plus.sandbox.google.com/+RadoslavKirov",
+   "bio": "Rado has been on the Angular Core team since Summer 2014. Before Angular, he worked on the Adsense serving stack, responsible for serving billions of ads daily. Being passionate about open source, he made contributions to Angular as a Google-20% project, before making the fulltime jump. He is a recovering academic; ask him about error-correcting codes from algebraic curves (or don't).",
+   "group": "Angular"
+ },
 
-  "alexrickabaugh": {
-    "name": "Alex Rickabaugh",
-    "picture": "alex-rickabaugh.jpg",
-    "twitter": "synalx",
-    "website": "https://plus.google.com/+AlexRickabaugh/about",
-    "bio": "Core team member working to optimize the Angular platform for the next generation of applications, including mobile. Before joining the Angular team, Alex worked in the Google sales organization where he helped build the first large Angular application within Google.",
-    "group": "Google"
-  },
+ "alexeagle": {
+   "name": "Alex Eagle",
+   "picture": "alex-eagle.jpg",
+   "twitter": "jakeherringbone",
+   "website": "http://google.com/+alexeagle",
+   "bio": "Alex works on language tooling for JavaScript and TypeScript. Previously Alex spent five years in Google's developer testing tools. He has developed systems including Google's continuous integration service, capturing build&test failures, and explaining them to developers. Before Google, Alex worked at startups including Opower, and consulted for large government IT. In his 20% time, he created the Error-Prone static analysis tool, which detects common Java programming mistakes and reports them as compile errors.",
+   "group": "Angular"
+ },
 
-  "berlinjohnson": {
-    "name": "Ali Johnson",
-    "picture": "ali.jpg",
-    "twitter": "berlinjohnson",
-    "website": "http://www.berlinjohnson.com/",
-    "bio": "I am a designer, illustrator, and biomedical engineer who loves combining creativity and science. Previously, I worked as a Cardiovascular Modeling and Simulation engineer where I built complex 3D and computational models of the human cardiovascular system based on patient-specific medical imaging data.",
-    "group": "Google"
-  },
+ "martinprobst": {
+   "name": "Martin Probst",
+   "picture": "martin-probst.jpg",
+   "twitter": "martin_probst",
+   "website": "http://probst.io",
+   "bio": "Martin is a software engineer at Google in the AngularJS team. He holds a MSc in Software Engineering from HPI in Potsdam, Germany. Before joining the AngularJS team at Google, he worked at a database startup in the Netherlands, at EMC, at SAP, and as a freelancer. In his free time, he likes to cook and sail, not necessarily at the same time.",
+   "group": "Angular"
+ },
 
-  "matias": {
-    "name": "Matias Niemela",
-    "picture": "matias.jpg",
-    "twitter": "yearofmoo",
-    "website": "http://yearofmoo.com",
-    "bio": "Matias Niemela is a fullstack web developer who has been programming & building websites for over 10 years, and a core team member of AngularJS for two years. In the spring of 2015 Matias joined Angular full time at Google. In his free time Matias loves to build complex things and is always up for public speaking, travelling and tweaking his current Vim setup.",
-    "group": "Google"
-  },
+ "julieralph": {
+   "name": "Julie Ralph",
+   "picture": "julie-ralph.jpg",
+   "twitter": "SomeJulie",
+   "website": "https://plus.google.com/+JulieRalph",
+   "bio": "Julie Ralph works as a Software Engineer in Test at Google in Seattle and is the lead developer on the Angular end-to-end testing framework Protractor.",
+   "group": "Angular"
+ },
 
-  "hansl": {
-    "name": "Hans Larsen",
-    "picture": "hansl.jpg",
-    "twitter": "hanslatwork",
-    "website": "http://www.codingatwork.com/",
-    "bio": "Hans is a software engineer at Google on the Angular team and was previously at Slack. He works everyday to help make it easier for everyone to create beautiful, consistent web applications using Angular, using Material Design components and the CLI tool.",
-    "group": "Google"
-  },
+ "alexrickabaugh": {
+   "name": "Alex Rickabaugh",
+   "picture": "alex-rickabaugh.jpg",
+   "twitter": "synalx",
+   "website": "https://plus.google.com/+AlexRickabaugh/about",
+   "bio": "Core team member working to optimize the Angular platform for the next generation of applications, including mobile. Before joining the Angular team, Alex worked in the Google sales organization where he helped build the first large Angular application within Google.",
+   "group": "Angular"
+ },
 
-  "victorsavkin": {
-    "name": "Victor Savkin",
-    "picture": "victor.jpg",
-    "twitter": "victorsavkin",
-    "website": "http://victorsavkin.com/",
-    "bio": "Victor has been on the Angular team since the inception of Angular. While at Google, Victor developed dependency injection, change detection, forms, and the router. Today he is a co-founder at nrwl.io.",
-    "group": "Community"
-  },
-  "jeffcross": {
-    "name": "Jeff Cross",
-    "picture": "jeff-cross.jpg",
-    "twitter": "jeffbcross",
-    "website": "https://twitter.com/jeffbcross",
-    "bio": "Jeff was one of the earliest core team members on AngularJS. He developed the Angular http and AngularFire modules, contributed to RxJS 5, and was most recently the Tech Lead of the Angular Mobile team at Google. Jeff is a former Googler and co-founder at nrwl.io.",
-    "group": "Community"
-  },
-  "alexwolfe": {
-    "name": "Alex Wolfe",
-    "picture": "alex-wolfe.jpg",
-    "twitter": "alexwolfe",
-    "website": "https://github.com/alexwolfe",
-    "bio": "Alex built and designed the original angular.io website, and the reboot of the Angular logo. An X-Googler, Alex has been designing and building products for over 15 years and helped grow over 10 startups in the valley. Alex is an avid tennis player and a former Street Fighter 2 World Champion.",
-    "group": "Community"
-  },
+ "matias": {
+   "name": "Matias Niemela",
+   "picture": "matias.jpg",
+   "twitter": "yearofmoo",
+   "website": "http://yearofmoo.com",
+   "bio": "Matias Niemela is a fullstack web developer who has been programming & building websites for over 10 years, and a core team member of AngularJS for two years. In the spring of 2015 Matias joined Angular full time at Google. In his free time Matias loves to build complex things and is always up for public speaking, travelling and tweaking his current Vim setup.",
+   "group": "Angular"
+ },
 
-  "marcy": {
-    "name": "Marcy Sutton",
-    "picture": "marcy.jpg",
-    "twitter": "marcysutton",
-    "website": "http://marcysutton.com",
-    "bio": "Marcy Sutton is a senior front-end engineer at Deque Systems, where she works on the axe-core team focusing on accessibility test integrations. Marcy is passionate about making the web accessible for everyone. She is a core team member to Angular Material, where she regularly brings her accessibility expertise to the table–she is also a primary contributor to the ngAria module as well as an accessibility plugin for Protractor. She's in love with riding bicycles and snowboards and can often be found outside.",
-    "group": "Community"
-  },
+ "hansl": {
+   "name": "Hans Larsen",
+   "picture": "hansl.jpg",
+   "twitter": "hanslatwork",
+   "website": "http://www.codingatwork.com/",
+   "bio": "Hans is a software engineer at Google on the Angular team and was previously at Slack. He works everyday to help make it easier for everyone to create beautiful, consistent web applications using Angular, using Material Design components and the CLI tool.",
+   "group": "Angular"
+ },
 
-  "shahar": {
-    "name": "Shahar Talmi",
-    "picture": "shahar.jpg",
-    "twitter": "shahata",
-    "website": "https://plus.google.com/+ShaharTalmi",
-    "bio": "Shahar is a full-stack architect at Wix, leading Wix Angular and client infrastructure. He has been writing software ranging between kernel drivers, massive servers and casual games for the better part of his life. In the last couple of years he's developed a major crush on web applications development and specifically on Angular. Shahar is a big fan of TDD and is doing his best to promote it within the JavaScript community.",
-    "group": "Community"
-  },
+ "kara": {
+   "name": "Kara Erickson",
+   "picture": "kara-erickson.jpg",
+   "twitter": "karaforthewin",
+   "website": "https://github.com/kara",
+   "bio": "Kara is a software engineer on the Angular team at Google and a co-organizer of the Angular-SF Meetup. Prior to Google, she helped build UI components in Angular for guest management systems at OpenTable.  She enjoys snacking indiscriminately and probably other things too.",
+   "group": "Angular"
+ },
 
-  "lucas": {
-    "name": "Lucas Mirelmann",
-    "picture": "lucas.jpg",
-    "twitter": "lgalfaso",
-    "website": "https://github.com/lgalfaso",
-    "bio": "Lucas works as a Software Engineer at Google and is a core Angular contributor.",
-    "group": "Google"
-  },
+ "chuckj": {
+   "name": "Chuck Jazdzewski",
+   "picture": "chuckj.jpg",
+   "twitter": "chuckjaz",
+   "website": "http://removingalldoubt.com",
+   "bio": "Chuck is a Software Engineer on the Angular team at Google. He is a programming language geek, UI framework and component library veteran, and has a passion for simplifying the task of programming. Before Google, he worked at Microsoft and Borland.",
+   "group": "Angular"
+ },
 
-  "kathy": {
-    "name": "Kathy Walrath",
-    "picture": "kathy.jpg",
-    "twitter": "kwalrath",
-    "website": "https://plus.google.com/+KathyWalrath",
-    "bio": "Kathy writes and edits docs about Dart and related technologies. Before Google, she worked at Sun, NeXT, and HP. Long ago, Kathy co-created and maintained The Java Tutorial.",
-    "group": "Google"
-  },
+ "vikram": {
+   "name": "Vikram Subramanian",
+   "picture": "vikram.jpg",
+   "twitter": "vikerman",
+   "bio": "Vikram is a Software Engineer on the Angular team focused on Engineering Productivity. That means he makes sure people on the team can move fast and not break things. Vikram enjoys doing Yoga and going on walks with his daughter.",
+   "group": "Angular"
+ },
 
-  "kara": {
-    "name": "Kara Erickson",
-    "picture": "kara-erickson.jpg",
-    "twitter": "karaforthewin",
-    "website": "https://github.com/kara",
-    "bio": "Kara is a software engineer on the Angular team at Google and a co-organizer of the Angular-SF Meetup. Prior to Google, she helped build UI components in Angular for guest management systems at OpenTable.  She enjoys snacking indiscriminately and probably other things too.",
-    "group": "Google"
-  },
+ "maxsills": {
+   "name": "Max Sills",
+   "picture": "max-sills.jpg",
+   "twitter": "angularjs",
+   "website": "http://google-opensource.blogspot.com/",
+   "bio": "Max Sills is Angular's Open Source lawyer.",
+   "group": "Angular"
+ },
 
-  "chuckj": {
-    "name": "Chuck Jazdzewski",
-    "picture": "chuckj.jpg",
-    "twitter": "chuckjaz",
-    "website": "http://removingalldoubt.com",
-    "bio": "Chuck is a Software Engineer on the Angular team at Google. He is a programming language geek, UI framework and component library veteran, and has a passion for simplifying the task of programming. Before Google, he worked at Microsoft and Borland.",
-    "group": "Google"
-  },
-  "vikram": {
-    "name": "Vikram Subramanian",
-    "picture": "vikram.jpg",
-    "twitter": "vikerman",
-    "bio": "Vikram is a Software Engineer on the Angular team focused on Engineering Productivity. That means he makes sure people on the team can move fast and not break things. Vikram enjoys doing Yoga and going on walks with his daughter.",
-    "group": "Google"
-  },
-  "maxsills": {
-    "name": "Max Sills",
-    "picture": "max-sills.jpg",
-    "twitter": "angularjs",
-    "website": "http://google-opensource.blogspot.com/",
-    "bio": "Max Sills is Angular's Open Source lawyer.",
-    "group": "Google"
-  },
-  "shannon": {
-    "name": "Shannon Ayres",
-    "picture": "shannon.jpg",
-    "bio": "Shannon is a technical editor in Developer Relations at Google. She loves movies, especially Sunset Boulevard, and her favorite TV show is The Walking Dead. Her mission: Righting wrong writing!",
-    "group": "Google"
-  },
+ "pawel": {
+   "name": "Pawel Kozlowski",
+   "picture": "pawel.jpg",
+   "twitter": "pkozlowski_os",
+   "bio": "Open source hacker, AngularJS book author, AngularUI lead developer. Pawel is an software-development addict who believes in free, open source software. He is a core contributor to the AngularJS framework, AngularUI, Karma-runner and several other projects. He is the co-author of the \"Mastering Web Application Development with AngularJS\" book. When not coding, Pawel can be spotted speaking at various software development conferences.",
+   "group": "Angular"
+ },
 
-  "pawel": {
-    "name": "Pawel Kozlowski",
-    "picture": "pawel.jpg",
-    "twitter": "pkozlowski_os",
-    "bio": "Open source hacker, AngularJS book author, AngularUI lead developer. Pawel is an software-development addict who believes in free, open source software. He is a core contributor to the AngularJS framework, AngularUI, Karma-runner and several other projects. He is the co-author of the \"Mastering Web Application Development with AngularJS\" book. When not coding, Pawel can be spotted speaking at various software development conferences.",
-    "group": "Community"
-  },
+ "paulgschwendtner": {
+   "name": "Paul Gschwendtner",
+   "picture": "devversion.jpg",
+   "twitter": "DevVersion",
+   "website": "https://github.com/DevVersion",
+   "bio": "Paul is a 17-year-old developer living in Germany. While he attends school, Paul works as a core team member on Angular Material. Paul focuses on tooling and building components for Angular.",
+   "group": "Angular"
+ },
 
-  "michal": {
-    "name": "Michał Gołębiowski",
-    "picture": "michal.jpg",
-    "twitter": "m_gol",
-    "website": "https://plus.google.com/u/0/103101124310040612163/",
-    "bio": "Front-end developer at Laboratorium EE, core contributor to Angular & jQuery. Makes sure AngularJS & jQuery work fine together. Interested in new JavaScript standards.",
-    "group": "Community"
-  },
+ "elad": {
+   "name": "Elad Bezalel",
+   "picture": "eladbezalel.jpg",
+   "website": "https://github.com/EladBezalel",
+   "bio": "Elad is a fullstack developer with a very strong love for design. Since 8 years old, he's been designing in Photoshop and later on fell in love with programing. This strong bond between design and computer programming gave birth to a new kind of love. And he is currently doing the combination of both, as a core member of the ngMaterial project.",
+   "group": "Angular"
+ },
 
-  "jbedard": {
-    "name": "Jason Bedard",
-    "picture": "jbedard.jpg",
-    "bio": "Jason Bedard is a software engineer at Allocadia Software where he leads the front end development using Angular. In his spare time Jason enjoys contributing to projects such as Angular, drinking coffee and being in the outdoors with his wife.",
-    "group": "Community"
-  },
+ "marclaval": {
+   "name": "Marc Laval",
+   "picture": "marclaval.jpg",
+   "twitter": "marclaval",
+   "website": "https://github.com/mlaval",
+   "bio": "Marc is a manager at Amadeus where he leads the team in charge of developing and recommending UI frameworks for the company. He is also an open source developer and a contributor to Angular.",
+   "group": "Angular"
+ },
 
-  "elad": {
-    "name": "Elad Bezalel",
-    "picture": "eladbezalel.jpg",
-    "website": "https://github.com/EladBezalel",
-    "bio": "Elad is a fullstack developer with a very strong love for design. Since 8 years old, he's been designing in Photoshop and later on fell in love with programing. This strong bond between design and computer programming gave birth to a new kind of love. And he is currently doing the combination of both, as a core member of the ngMaterial project.",
-    "group": "Community"
-  },
+ "wardbell": {
+     "name": "Ward Bell",
+     "picture": "wardbell.jpg",
+     "website": "https://github.com/wardbell",
+     "twitter": "wardbell",
+     "bio": "Ward is an all-around developer with JavaScript, node, and .net chops. He's a frequent conference speaker and podcaster, trainer, Google Developer Expert for Angular, Microsoft MVP, and PluralSight author. He is also president of IdeaBlade, an enterprise software consulting firm and the makers of breeze.js. He would like to get more sleep and spend more time in the mountains.",
+     "group": "Angular"
+ },
 
-  "marclaval": {
-    "name": "Marc Laval",
-    "picture": "marclaval.jpg",
-    "twitter": "marclaval",
-    "website": "https://github.com/mlaval",
-    "bio": "Marc is a manager at Amadeus where he leads the team in charge of developing and recommending UI frameworks for the company. He is also an open source developer and a contributor to Angular.",
-    "group": "Community"
-  },
+ "martinstaffa": {
+   "name": "Martin Staffa",
+   "picture": "martinstaffa.jpg",
+   "twitter": "Narretz",
+   "bio": "Martin is an English major turned web developer who loves frontend stuff. He's been part of the AngularJS team since 2014. If you can't find him roaming the Github issue queues, he's probably out with his camera somewhere.",
+   "group": "Angular"
+ },
 
-  "jeffwhelpley": {
-    "name": "Jeff Whelpley",
-    "picture": "jeffwhelpley.jpg",
-    "twitter": "jeffwhelpley",
-    "website": "https://medium.com/@jeffwhelpley",
-    "bio": "Chief Architect at GetHuman, panelist on Angular Air, co-organizer of the Boston Angular Meetup, full-stack JavaScript developer, soccer enthusiast and Boston College grad.",
-    "group": "Community"
-  },
+ "filipesilva": {
+   "name": "Filipe Silva",
+   "picture": "filipe-silva.jpg",
+   "twitter": "filipematossilv",
+   "website": "http://github.com/filipesilva",
+   "bio": "Filipe is a passion-driven developer that always strives for the most elegant solution for each problem. He is currently an author for Angular.io, a core contributor for Angular-CLI and senior front end engineer at KonnectAgain. When not busy going through PRs, you can find him scouring reddit for new dinner recipes to cook or enjoying a craft beer in Dublin.",
+   "group": "Angular"
+ },
 
-  "patrickjs": {
-    "name": "Patrick Stapleton",
-    "picture": "patrick-stapleton.jpg",
-    "twitter": "gdi2290",
-    "website": "https://angularclass.com",
-    "bio": "Also know as PatrickJS where JS stands for his middle and last names. Patrick is very active in Open-Source with over 4,300+ contributions in the last year alone on projects such as Angular, AngularJS, FalcorJS, Docker, Bootstrap, gulp, and redis to name a few. He is also working on the development of Angular server-side rendering as Universal Angular and teaching Modern Web Development at AngularClass. He was previously the CTO of Keychain Logistics, a HackReactor Instructor and Alum.",
-    "group": "Community"
-  },
+ "andrewseguin": {
+   "name": "Andrew Seguin",
+   "picture": "andrewseguin.jpg",
+   "website": "http://github.com/andrewseguin",
+   "bio": "Andrew is an engineer on the Angular Material team working on bringing material components to the world. When he’s not obsessing over pixels and design, he is probably off somewhere having adventures with his wife and daughters.",
+   "group": "Angular"
+ },
 
-  "pascalprecht": {
-    "name": "Pascal Precht",
-    "picture": "pascalprecht.jpg",
-    "website": "https://github.com/PascalPrecht",
-    "bio": "Pascal is a front-end engineer, trainer and Google Developer Expert for Angular with a love for semantic markup and evolving technologies in the open web. He loves contributing to open source and is the creator of the popular angular-translate module. Pascal loves to travel the world and speaks at conferences and meetups. When he's not busy preparing the next workshop or conference talk, you might find him outside with his skateboard.",
-    "group": "Community"
-  },
-
-  "wardbell": {
-      "name": "Ward Bell",
-      "picture": "wardbell.jpg",
-      "website": "https://github.com/wardbell",
-      "twitter": "wardbell",
-      "bio": "Ward is an all-around developer with JavaScript, node, and .net chops. He's a frequent conference speaker and podcaster, trainer, Google Developer Expert for Angular, Microsoft MVP, and PluralSight author. He is also president of IdeaBlade, an enterprise software consulting firm and the makers of breeze.js. He would like to get more sleep and spend more time in the mountains.",
-      "group": "Community"
-  },
-
-  "johnpapa": {
-    "name": "John Papa",
-    "picture": "john-papa.jpg",
-    "twitter": "john_papa",
-    "website": "https://github.com/johnpapa",
-    "bio": "John is a Google Developer Expert, Microsoft Regional Director and MVP, frequent author of courses for Pluralsight, a former technology Evangelist for Microsoft front end teams, and author of the popular Angular Style Guide. He can often be found speaking around the world at keynotes and sessions for many conferences. You can always find John at johnpapa.net or on twitter at @john_papa.",
-    "group": "Community"
-  },
-
-  "martinstaffa": {
-    "name": "Martin Staffa",
-    "picture": "martinstaffa.jpg",
-    "twitter": "Narretz",
-    "bio": "Martin is an English major turned web developer who loves frontend stuff. He's been part of the AngularJS team since 2014. If you can't find him roaming the Github issue queues, he's probably out with his camera somewhere.",
-    "group": "Community"
-  },
-
-  "topherfangio": {
-    "name": "Topher Fangio",
-    "picture": "topherfangio.jpg",
-    "twitter": "topherfangio",
-    "website": "http://github.com/topherfangio",
-    "bio": "Topher loves the web and how it empowers new forms of creativity, connection and business. He is currently a core contributor on the Angular Material project and sometimes blogs about random things.",
-    "group": "Community"
-  },
-
-  "filipesilva": {
-    "name": "Filipe Silva",
-    "picture": "filipe-silva.jpg",
-    "twitter": "filipematossilv",
-    "website": "http://github.com/filipesilva",
-    "bio": "Filipe is a passion-driven developer that always strives for the most elegant solution for each problem. He is currently an author for Angular.io, a core contributor for Angular-CLI and senior front end engineer at KonnectAgain. When not busy going through PRs, you can find him scouring reddit for new dinner recipes to cook or enjoying a craft beer in Dublin.",
-    "group": "Community"
-  },
-
-  "teropa": {
-    "name": "Tero Parviainen",
-    "picture": "teropa.jpg",
-    "twitter": "teropa",
-    "website": "http://teropa.info/",
-    "bio": "Tero is an independent software developer and writer. He's been building web applications for his whole professional career, and has almost figured out how to do vertical centering in CSS.",
-    "group": "Community"
-  },
-
-  "deborah": {
-    "name": "Deborah Kurata",
-    "picture": "deborah.jpg",
-    "twitter": "deborahkurata",
-    "website": "http://blogs.msmvps.com/deborahk/",
-    "bio": "Deborah is an independent software developer and author. She is author of several Pluralsight courses including: 'Angular 2: Getting Started'",
-    "group": "Community"
-  },
-
-  "jesusrodriguez": {
-    "name": "Jesús Rodríguez",
-    "picture": "jesus-rodriguez.jpg",
-    "twitter": "foxandxss",
-    "website": "http://angular-tips.com",
-    "bio": "Jesus is an open source lover, a book author and editor, and AngularUI lead developer. He is currently a core contributor to the UI Bootstrap project.",
-    "group": "Community"
-  },
-
-  "torgeirhelgevold": {
-    "name": "Torgeir Helgevold",
-    "picture": "torgeirhelgevold.jpg",
-    "twitter": "helgevold",
-    "website": "http://www.syntaxsuccess.com",
-    "bio": "Torgeir (Tor) is a front-end architect with a passion for JavaScript development. He is also an author for angular.io and an active tech blogger.",
-    "group": "Community"
-  },
-
-  "fatimaremtullah": {
-    "name": "Fatima Remtullah",
-    "picture": "fatima.jpg",
-    "twitter": "amitafr",
-    "website": "http://www.amitafremtullah.com",
-    "bio": "Fatima is a Product Designer and Front-End Developer. When she is not nerding out she is probably eating an abundance of cookies.",
-    "group": "Community"
-  },
-
-  "eric": {
-    "name": "Eric Jimenez",
-    "picture": "eric.jpg",
-    "twitter": "_ericjim",
-    "website": "http://eric.to/",
-    "bio": "Eric is a gamer, writer, and programmer.",
-    "group": "Community"
-  },
-
-  "mikeryan": {
-    "name": "Mike Ryan",
-    "picture": "mikeryan.jpg",
-    "twitter": "mikeryan52",
-    "website": "https://medium.com/@MikeRyan52",
-    "bio": "Mike Ryan is a Software Engineer at Synapse Wireless, working on solving challenging problems in the internet-of-things space. He is an advocate of reactive programming and a core contributor to the ngrx project.",
-    "group": "Community"
-  },
-
-  "rex": {
-    "name": "Rex Ye",
-    "picture": "rex.jpg",
-    "twitter": "rexebin",
-    "bio": "Rex is a full-stack developer. He maintains the Angular.cn website with his old pal Ralph Wang and he plays a key role in bridging between the Chinese Angular community and the world-wide community. He loves playing with flashy new technologies and enjoys the challenge of mastering new skills. His biggest challenge to date is figuring out how to sooth a crying 4-month-old baby.",
-    "group": "Community"
-  },
-
-  "ralph": {
-    "name": "Ralph Wang",
-    "picture": "ralph.jpg",
-    "twitter": "ralph_wang_gde",
-    "bio": "Ralph(Zhicheng Wang) is a senior consultant at ThoughWorks and also a GDE. He is a technology enthusiast and he is a passionate advocate of “Simplicity, Professionalism and Sharing”. In his eighteen years of R&D career, he worked as tester, R&D engineer, project manager, product manager and CTO. He is looking forward to the birth of his baby.",
-    "group": "Community"
-  },
-
-  "brandonroberts": {
-    "name": "Brandon Roberts",
-    "picture": "brandonroberts.jpg",
-    "twitter": "brandontroberts",
-    "website": "https://github.com/brandonroberts",
-    "bio": "Brandon is a front-end developer for a game studio developing web applications for STEM-based learning games. He is also a natural born troubleshooter who helps solve Angular issues on Github and Gitter support channels, particularly dealing with routing. He is also a member of the Angular docs team.",
-    "group": "Community"
-  },
+ "jesusrodriguez": {
+   "name": "Jesús Rodríguez",
+   "picture": "jesus-rodriguez.jpg",
+   "twitter": "foxandxss",
+   "website": "http://angular-tips.com",
+   "bio": "Jesus is an open source lover, a book author and editor, and AngularUI lead developer. He is currently a core contributor to the UI Bootstrap project.",
+   "group": "Angular"
+ },
 
   "crisbeto": {
-    "name": "Kristiyan Kostadinov",
-    "picture": "crisbeto.jpg",
-    "website": "http://crisbeto.com/",
-    "bio": "Kristiyan is a front-end developer, passionate open-source contributor and a core team member on Angular Material.",
-    "group": "Community"
-  },
+   "name": "Kristiyan Kostadinov",
+   "picture": "crisbeto.jpg",
+   "website": "http://crisbeto.com/",
+   "bio": "Kristiyan is a front-end developer, passionate open-source contributor and a core team member on Angular Material.",
+   "group": "Angular"
+ },
 
-  "gkalpak": {
-    "name": "Georgios Kalpakas",
-    "picture": "gkalpak.jpg",
-    "twitter": "gkalpakas",
-    "website": "https://github.com/gkalpak",
-    "bio": "George is a Software Engineer with a passion for chess, robotics and automating stuff. He has a strong need to know how things work (so if you already know, he'd love to have a talk with you). He has been a member of the AngularJS team since 2014. When not doing geeky stuff, he is probably trying to convince his wife and kids to apply programming principles in real life. (Or is it the other way around?)",
-    "group": "Community"
-  },
+ "gkalpak": {
+   "name": "Georgios Kalpakas",
+   "picture": "gkalpak.jpg",
+   "twitter": "gkalpakas",
+   "website": "https://github.com/gkalpak",
+   "bio": "George is a Software Engineer with a passion for chess, robotics and automating stuff. He has a strong need to know how things work (so if you already know, he'd love to have a talk with you). He has been a member of the AngularJS team since 2014. When not doing geeky stuff, he is probably trying to convince his wife and kids to apply programming principles in real life. (Or is it the other way around?)",
+   "group": "Angular"
+ },
+ "mmalerba": {
+   "name": "Miles Malerba",
+   "picture": "mmalerba.jpg",
+   "bio": "Miles is a software engineer on the Angular Material team at Google. In addition to Javascripting he enjoys eating food and ogling cute puppies.",
+   "group": "Angular"
+ },
 
-  "kapunahelewong": {
-    "name": "Kapunahele Wong",
-    "picture": "kapunahelewong.jpg",
-    "website": " https://github.com/kapunahelewong",
-    "twitter": "kapunahele",
-    "bio": "Kapunahele is a front-end developer and contributor to angular.io. She loves just about anything to do with JavaScript, Angular and electronics. She enjoys mapping Hawaiian star names and constellations to Western ones and loves dancing native Hawaiian hula.",
-    "group": "Community"
-  },
+ "jasonaden": {
+   "name": "Jason Aden",
+   "picture": "jasonaden.jpg",
+   "bio": "Jason is a software engineer at Google on the Angular Core team. He is enthusiastic about Angular and application development in the modern age. In his free time Jason enjoys spending time with his wife and four children and doing outdoor activities (hiking, fishing, snowboarding, etc.).",
+   "group": "Angular"
+ },
 
-  "devversion": {
-    "name": "Paul Gschwendtner",
-    "picture": "devversion.jpg",
-    "website": "http://github.com/DevVersion/",
-    "twitter": "DevVersion",
-    "bio": "Paul is a 16-year-old developer living in Germany. While he attends school, Paul works as a core team member on Angular Material. Paul focuses on tooling and building components for Angular.",
-    "group": "Community"
-  },
+ "jeffwhelpley": {
+   "name": "Jeff Whelpley",
+   "picture": "jeffwhelpley.jpg",
+   "twitter": "jeffwhelpley",
+   "website": "https://medium.com/@jeffwhelpley",
+   "bio": "Jeff Whelpley is a Google Developer Expert and the CTO of GetHuman. He is the co-organizer of the Angular Boston meetup group, co-creator of Angular Universal, former host of AngularAir and frequent speaker at Angular events.",
+   "group": "GDE"
+ },
 
-  "mmalerba": {
-    "name": "Miles Malerba",
-    "picture": "mmalerba.jpg",
-    "bio": "Miles is a software engineer on the Angular Material team at Google. In addition to Javascripting he enjoys eating food and ogling cute puppies.",
-    "group": "Google"
-  },
+ "pascalprecht": {
+   "name": "Pascal Precht",
+   "picture": "pascalprecht.jpg",
+   "website": "https://twitter.com/PascalPrecht",
+   "bio": "Pascal is a software engineer, author and Google Developer Expert for the Angular team. He loves contributing to open source and is the creator of the popular angular-translate module. In his spare time he’s fiddling with EDM production.",
+   "group": "GDE"
+ },
 
-  "jasonaden": {
-    "name": "Jason Aden",
-    "picture": "jasonaden.jpg",
-    "bio": "Jason is a software engineer at Google on the Angular Core team. He is enthusiastic about Angular and application development in the modern age. In his free time Jason enjoys spending time with his wife and four children and doing outdoor activities (hiking, fishing, snowboarding, etc.).",
-    "group": "Google"
-  }
+ "deborah": {
+   "name": "Deborah Kurata",
+   "picture": "deborah.jpg",
+   "twitter": "deborahkurata",
+   "website": "http://blogs.msmvps.com/deborahk/",
+   "bio": "Deborah is a software developer, author, and Google Developer Expert. She is author of several Pluralsight courses including: 'Angular 2: Getting Started' and ‘Angular Routing’",
+   "group": "GDE"
+ },
+
+ "alyssa": {
+   "name": "Alyssa Nicoll",
+   "picture": "mickey_mouse.jpg",
+   "twitter": "alyssanicoll",
+   "website": "alyssa.io",
+   "bio": "I am an energetic, über passionate GDE and Web Dev. I have some Front-End and Angular courses on Egghead.io and Code School. I love to learn new things and share them with others. I Scuba Dive and have a toothless dog named 'Gummy'. My DM is always open, come talk sometime.",
+   "group": "GDE"
+ },
+
+"ralph": {
+   "name": "Ralph Wang",
+   "picture": "ralph.jpg",
+   "twitter": "ralph_wang_gde",
+   "bio": "Ralph(Zhicheng Wang) is a senior consultant at ThoughWorks and also a GDE. He is a technology enthusiast and he is a passionate advocate of 'Simplicity, Professionalism and Sharing'. In his eighteen years of R&D career, he worked as tester, R&D engineer, project manager, product manager and CTO. He is looking forward to the birth of his baby.",
+   "group": "GDE"
+ },
+
+"wassim": {
+   "name": "Wassim Chegham",
+   "picture": "wassim.jpg",
+   "twitter": "manekinekko",
+   "website": "https://medium.com/@wassimchegham",
+   "bio": "Wassim (aka manekinekko on Twitter/Github) is a Developer Advocate at SFEIR, in Web technologies (Angular, Polymer, PWA, Web Components...). He is also a Developer Expert in Web technologies nominated by Google. He enjoys writing technical articles, meeting developers at events, speaking at conferences and contributing to open source projects. Wassim loves the Web Platform and works hard to move it forward.",
+   "group": "GDE"
+ },
+
+"chrisnoring": {
+   "name": "Christoffer Noring",
+   "picture": "chrisnoring.jpg",
+   "twitter": "chris_noring",
+   "website": "softchris.github.io",
+   "bio": "Chris is a Full Stack Developer at McKinsey. A Google Developer Expert in Web Technologies and Angular. He is also a Nativescript Developer Expert. He is one of the organizers of the Angular conference ngVikings and an author of the book RxJS 5 Ultimate",
+   "group": "GDE"
+ },
+
+"jorgeucano": {
+   "name": "Jorge Cano",
+   "picture": "jorgeucano.jpg",
+   "twitter": "jorgeucano",
+   "website": "https://medium.com/@jorgeucano",
+   "bio": "Jorge is a Fulll Stack Developer in ByteDefault ... Professor in several courses related to javascript , speaker, and writer of technical articles and a book ‘Entendiendo Angular’, Google Developer Expert in web technologies nominate by Google, Nativescript Developer Expert nominated by Telerik.",
+   "group": "GDE"
+ },
+
+"toddmotto": {
+   "name": "Todd Motto",
+   "picture": "toddmotto.jpg",
+   "twitter": "toddmotto",
+   "website": "https://ultimateangular.com",
+   "bio": "Owner and trainer at Ultimate Angular. Lives in England, UK. Has a love for teaching, OSS and speaking at conferences. Google Developer Expert for Web Technologies and Angular.",
+   "group": "GDE"
+ },
+
+"michaelprentice": {
+   "name": "Michael Prentice",
+   "picture": "michaelprentice.jpg",
+   "twitter": "splaktar",
+   "website": "https://www.DevIntent.com",
+   "bio": "Owner and consultant at DevIntent. Active open-source contributor and leader. Passionate advocate, coach, and consultant for LEAN and Agile teams. Google Developer Expert (GDE) in Angular. Founder and organizer for the Google Developers Group (GDG) community on the Space Coast of Florida, USA.",
+   "group": "GDE"
+ },
+
+"mikebrocchi": {
+  "name": "Mike Brocchi",
+  "picture": "mike-brocchi.jpg",
+  "twitter": "brocco",
+  "bio": "Mike is a core team member of the Angular CLI team, a GDE and is also an instructor at egghead. Mike is passionate about helping others by writing code as well as teaching.",
+  "group": "Angular"
+},
+
+ "manfredsteyer": {
+   "name": "Manfred Steyer",
+   "picture": "steyer.jpg",
+   "twitter": "ManfredSteyer",
+   "website": "https://www.softwarearchitekt.at",
+   "bio": "Trainer and Consultant with focus on Angular. Writes for O'Reilly, the German Java Magazine and Heise. Regularly speaks at conferences.",
+   "group": "GDE"
+ },
+
+ "maximsalnikov": {
+   "name": "Maxim Salnikov",
+   "picture": "maximsalnikov.jpg",
+   "twitter": "webmaxru",
+   "website": "https://medium.com/@webmaxru",
+   "bio": "Oslo-based web front-end engineer, a Google Developer Expert in Angular, Web technologies and IoT. Active public speaker & trainer for the developer events. Leader of Norway’s largest meetups dedicated to web front-end and mobile development. Founder of ngVikings and Mobile Era conferences. Progressive Web Apps advocate.",
+   "group": "GDE"
+ },
+
+ "jeremywilken": {
+   "name": "Jeremy Wilken",
+   "picture": "jeremywilken.jpg",
+   "twitter": "gnomeontherun",
+   "website": "https://gnomeontherun.com",
+   "bio": "Based in Austin Texas, Jeremy is an application architect and homebrewer. He is a Google Developer Expert in Web Technologies and Angular, with a focus on speaking and training and author of Angular in Action and Ionic in Action.",
+   "group": "GDE"
+ },
+
+ "minko": {
+   "name": "Minko Gechev",
+   "picture": "minko.jpg",
+   "twitter": "mgechev",
+   "website": "http://blog.mgechev.com",
+   "bio": "Software engineer who enjoys theoretical computer science and its practical applications. Author of the books 'Switching to Angular 2' and 'Getting Started with Angular', speaker and blogger. Working on tooling for Angular and TypeScript.",
+   "group": "GDE"
+ },
+
+"uri": {
+   "name": "Uri Shaked",
+   "picture": "urish.jpg",
+   "twitter": "UriShaked",
+   "website": "https://urish.org",
+   "bio": "Uri Shaked is a Google Developer Expert for Web Technologies. He regularly writes about Web and IoT related technologies in his medium blog, and speaks about these topics in conferences and meetup around the world. Among his interests are reverse engineering, hardware hacking, building 3d-printed robots and games, playing music and Salsa dancing.",
+   "group": "GDE"
+ },
+
+ "eusoj": {
+   "name": "Josue Gutierrez",
+   "picture": "josue.jpg",
+   "twitter": "eusoj",
+   "website": "http://techtam.io",
+   "bio": "Based in Mexico, Josue has been web developer since the last 10 years, he is part of the Google Developer Expert Program, passionate about teaching and building communities",
+   "group": "GDE"
+ },
+
+"SanderElias": {
+  "name": "Sander Elias",
+  "picture": "sanderelias.jpg",
+  "twitter": "esoSanderElias",
+  "website": "https://sanderelias.nl",
+  "bio": "Sander is a versed developer with over 4 decades of practice under his belt. He is also an Google Developer Expert for web, specializing in Angular. Organizer of meetups and conferences. Helping out others wherever he can. When he is not breathing code, he is fiddling around with IOT, photography, science and anything that might vaguely is gadget-like! Thinks he a master of the grill, but in reality you probably don't get a food-poisoning ;) Also, and actually the most important thing to him, he is a father of 4, and has the most patient girlfriend in the universe.",
+  "group": "GDE"
+},
+
+ "filipbech": {
+   "name": "Filip Bruun Bech-Larsen",
+   "picture": "filipbech.jpg",
+   "twitter": "filipbech",
+   "website": "http://filipbech.github.io/",
+   "bio": "Filip is a Frontend developer from Denmark. He works at IMPACT, delivering large-scale, high-performance e-commerce to international clients - most often build in Angular. He runs the local Angular usergroup - ngAarhus, and gives talks/workshops around and beyond the country of Denmark.",
+   "group": "GDE"
+ },
+
+ "ocombe": {
+   "name": "Olivier Combe",
+   "picture": "ocombe.jpg",
+   "twitter": "ocombe",
+   "bio": "Olivier is a passionate front-end engineer who loves interacting with the community by doing open source projects (ocLazyLoad, ngx-translate…), being a panelist at Angular-Air, giving talks or just chatting on Twitter and Slack. He’s a member of the Angular Core team and works on i18n.",
+   "group": "Angular"
+ },
+
+ "cironunes": {
+   "name": "Ciro Nunes",
+   "picture": "cironunes.jpg",
+   "twitter": "cironunesdev",
+   "bio": "Ciro is the Lead Front-end Engineer of CrossEngage and Google Developer Expert in Web Technologies.",
+   "group": "GDE"
+ },
+
+ "elecash": {
+   "name": "Raúl Jiménez",
+   "picture": "raul.jpg",
+   "twitter": "elecash",
+   "bio": "Raul works as a CEO and Front-end Architect at Byte Default for companies around the world helping them to build high-performance web apps. In his spare time he's usually working on Videogular, involved in local meetups, speaking at conferences and contributing to open source projects.",
+   "group": "GDE"
+ },
+
+ "simpulton": {
+   "name": "Lukas Ruebbelke",
+   "picture": "lukas.jpg",
+   "twitter": "simpulton",
+   "bio": "Developer. Hacker. Community backer. Author and blogger. Console logger.",
+   "group": "GDE"
+ },
+
+"christianweyer": {
+   "name": "Christian Weyer",
+   "picture": "christianweyer.jpg",
+   "twitter": "ChristianWeyer",
+   "website": "https://www.thinktecture.com",
+   "bio": "Co-founder and CTO of Thinktecture AG, as well as Google GDE and Microsoft MVP. Since two decades active as an engaged and passionate speaker on several software conferences and events all over the world. Some people call him 'Mr. Cross-Platform'.",
+   "group": "GDE"
+},
+
+"shaireznik": {
+   "name": "Shai Reznik",
+   "picture": "shaireznik.jpg",
+   "twitter": "shai_reznik",
+   "website": "https://www.hirez.io",
+   "bio": "Teaches Angular at HiRez.io – the most entertaining online courses on the web. An experienced developer, consultant and speaker also known for his unusual crazy Angular talks such as ng-wat, ng-show, ng-rap, etc. Shai is also the organizer of the largest JavaScript group in Israel and a professional Improv performer.",
+   "group": "GDE"
+},
+
+ "danwahlin": {
+   "name": "Dan Wahlin",
+   "picture": "danwahlin.jpg",
+   "twitter": "DanWahlin",
+   "website": "https://codewithdan.com",
+   "bio": "Dan Wahlin founded Wahlin Consulting which provides consulting and onsite/online training services on Web technologies such as JavaScript, Angular, TypeScript, Node.js, C#, ASP.NET Core, Web API, and Docker. He’s also published many developer courses on Pluralsight.com and Udemy.com. Dan is a Google GDE, Docker Captain, and Microsoft MVP and Regional Director and speaks at conferences and user groups around the world.  Dan has written several books on Web technologies, hundreds of technical articles and blog posts (https://blog.codewithdan.com) and runs the 'Code with Dan Web Weekly Newsletter' - a great way to stay up on the latest technologies. Follow Dan on Twitter @DanWahlin.",
+   "group": "GDE"
+ },
+
+"joeeames": {
+   "name": "Joe Eames",
+   "picture": "joeeames.jpg",
+   "twitter": "josepheames",
+   "website": "https://joeeames.me",
+   "bio": "Joe Eames is a developer and educator. He publishes course on Angular and JavaScript on Pluralsight.com. He is an organizer of ng-conf, a Google Developer Expert in Angular, gives lots of talks & workshops, and loves all things web.",
+   "group": "GDE"
+ },
+
+"willmendesneto": {
+   "name": "Wilson Mendes",
+   "picture": "willmendesneto.jpg",
+   "twitter": "willmendesneto",
+   "website": "https://willmendesneto.github.io",
+   "bio": "GDE (Google Developer Expert) Angular and Web Technologies, GDG Salvador organizer, passionate about technology and active in communities with a focus on web development, including Angular, JavaScript, HTML5, CSS3, Workflow, web performance, security and Internet of things. Participates in events organization, speaker at conferences in Brazil and other countries and contributes to several open source projects.",
+   "group": "GDE"
+ },
+
+"jecelynyeen": {
+   "name": "Jecelyn Yeen",
+   "picture": "jecelynyeen.jpg",
+   "twitter": "jecelynyeen",
+   "website": "https://developers.google.com/experts/people/jecelyn-yeen",
+   "bio": "GDE (Google Developer Expert) Angular and Web Technologies, Women Who Code KL Director, Jecelyn specializes in professional application development with technologies, including Angular, HTML5, Typescript, JavaScript, CSS, C#, NodeJs, Cloud and ASP.NET.",
+   "group": "GDE"
+ },
+
+"vincirufus": {
+   "name": "Vinci Rufus",
+   "picture": "vincirufus.jpg",
+   "twitter": "areai51",
+   "website": "https://developers.google.com/experts/people/vinci-rufus",
+   "bio": "Director of Experience Technology at SapientRazorfish. Consults various brands on their frontend and mobile web architecture. A speaker at various forums and mentor at Launchpad Accelerator and ngGirls India. Spends free time playing with Angular, Preact, web-components  ",
+   "group": "GDE"
+ },
+
+"thierrychatel": {
+   "name": "Thierry Chatel",
+   "picture": "thierrychatel.jpg",
+   "twitter": "ThierryChatel",
+   "website": "http://www.methotic.com",
+   "bio": "Thierry is a senior consultant and trainer, specialized on Angular, and a Google Developer Expert.",
+   "group": "GDE"
+ },
+
+"gerardsans": {
+   "name": "Gerard Sans",
+   "picture": "gerardsans.jpg",
+   "twitter": "gerardsans",
+   "website": "https://medium.com/@gerard.sans",
+   "bio": "Gerard is very excited about the future of the Web and JavaScript. Always happy Computer Science Engineer and humble Google Developer Expert. He loves to share his learnings by giving talks, trainings and writing about cool technologies. He loves running AngularZone and GraphQL London, mentoring students and giving back to the community.",
+   "group": "GDE"
+ }
 }
diff --git a/aio/content/marketing/docs.html b/aio/content/marketing/docs.html
deleted file mode 100644
index 30c72adda5..0000000000
--- a/aio/content/marketing/docs.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<h1>Angular Docs</h1>
-<h6>v 4.0.0</h6>
-<p>Learn about the latest updates to the documentation. View the Angular change log for enhancements, fixes, and breaking changes in Angular itself. If you're looking for Angular vs2 documents you'll find them at <a href="#">v2.angular.io</a></p>
-
-<div class="card-container clearfix">
-
-    <a href="../guide/quickstart" class="card">
-        <h2>Quickstart</h2>
-        <p>A short beginner guide explaining the basic concepts of Angular</p>
-        <p class="card-footer">View Quickstart</p>
-    </a>
-
-    <a href="..api" class="card">
-        <h2>Developer Guide</h2>
-        <p>An intermediuate development guide covering all major features of Angular</p>
-        <p class="card-footer">View Quickstart</p>
-
-    </a>
-
-    <a href="../api" class="card">
-        <h2>API Reference</h2>
-        <p>An advanced reference of all Angular Classes, Methods, etc.</p>
-        <p class="card-footer">View Quickstart</p>
-    </a>
-<div>
\ No newline at end of file
diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md
new file mode 100644
index 0000000000..e6d900c3ab
--- /dev/null
+++ b/aio/content/marketing/docs.md
@@ -0,0 +1,52 @@
+<h1 class="no-toc">What is Angular?</h1>
+
+Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop
+
+<div class="card-container">
+  <a href="generated/live-examples/quickstart/eplnkr.html" target="_blank" class="docs-card"
+    title="Experience Angular in a live coding environment">
+      <section>Get a Glimpse of Angular</section>
+      <p>A quick look at an Angular "hello world" application.</p>
+      <p class="card-footer">Angular in Action</p>
+  </a>
+
+  <div class="docs-card">
+      <section>Get Going with Angular</section>
+      <p>Get going on your own environment with the Quickstart.</p>
+      <p class="card-footer" >
+        <a href="guide/quickstart" title="Angular Quickstart">Quickstart</a>
+      </p>
+  </div>
+
+  <a href="guide/architecture" class="docs-card" title="Angular Architecture">
+      <section>Fundamentals</section>
+      <p>Learn Angular application fundamentals, starting with an architecture overview.</p>
+      <p class="card-footer">Architecture</p>
+  </a>
+</div>
+
+## Assumptions
+This documentation assumes that you are already familiar with
+[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"),
+and some of the tools from the
+[latest standards](https://babeljs.io/learn-es2015/ "Latest JavaScript standards") such as
+[classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes")
+and [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules").
+The code samples are written using [TypeScript](https://www.typescriptlang.org/ "TypeScript").
+Most Angular code can be written with just the latest JavaScript,
+using [types](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") for dependency injection,
+and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators") for metadata.
+
+## Feedback
+
+You can sit with us!
+
+You can file documentation
+[issues](https://github.com/angular/angular/issues "Angular Github issues") and create
+[pull requests](https://github.com/angular/angular/pulls "Angular Github pull requests")
+on the Angular Github repository.
+The [contributing guide](https://github.com/angular/angular/blob/master/CONTRIBUTING.md "Contributing guide")
+will help you contribute to the community.
+Our community values  respectful, supportive communication.
+Please consult and adhere to the
+[code of conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "contributor code of conduct").
diff --git a/aio/content/marketing/events.html b/aio/content/marketing/events.html
index 8712691448..0b49868a3b 100755
--- a/aio/content/marketing/events.html
+++ b/aio/content/marketing/events.html
@@ -1,6 +1,9 @@
-<h1 class="hero-title">Events</h1>
-<h3>Where we'll be presenting:</h3>
-<article class="l-content ">
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Events</h1>
+</header>
+
+<article>
+<p>Where we'll be presenting:</p>
   <table class="is-full-width">
     <thead>
     <tr>
@@ -10,30 +13,18 @@
     </tr>
     </thead>
     <tbody>
-    <!-- DEVOXX - UK -->
-    <tr>
-      <th><a href="http://www.devoxx.co.uk/" title="DEVOXX - UK">DEVOXX - UK</a></th>
-      <td>London, United Kingdom</td>
-      <td>May 11, 2017</td>
-    </tr>
-    <!-- Google IO -->
-    <tr>
-      <th><a href="https://events.google.com/io" title="Google IO">Google IO</a></th>
-      <td>Mountain View, California</td>
-      <td>May 17, 2017</td>
-    </tr>
-    <!-- AngleBrackets-->
-    <tr>
-      <th><a href="https://anglebrackets.org" title="AngleBrackets">AngleBrackets</a></th>
-      <td>Orlando, Florida</td>
-      <td>May 21, 2017</td>
-    </tr>
     <!-- ngJapan -->
     <tr>
       <th><a href="http://ngjapan.org/" title="ng-Japan">ng-Japan</a></th>
       <td>Tokyo, Japan</td>
       <td>June 17, 2017</td>
     </tr>
+    <!-- AngularMix -->
+    <tr>
+      <th><a href="https://angularmix.com/" title="AngularMix">AngularMix</a></th>
+      <td>Universal Studios, Orlando, Florida</td>
+      <td>October 8, 2017</td>
+    </tr>
     <!-- ReactiveConf -->
     <tr>
       <th><a href="https://reactiveconf.com/" title="ReactiveConf">ReactiveConf</a></th>
@@ -44,7 +35,7 @@
     <tr>
       <th><a href="http://angularconnect.com" title="AngularConnect">AngularConnect</a></th>
       <td>London, United Kingdom</td>
-      <td>Nov. 07, 2017</td>
+      <td>November 07, 2017</td>
     </tr>
     </tbody>
   </table>
diff --git a/aio/content/marketing/features.html b/aio/content/marketing/features.html
index c38935c7a4..f37cadd10e 100755
--- a/aio/content/marketing/features.html
+++ b/aio/content/marketing/features.html
@@ -1,64 +1,114 @@
-<header class="hero background-sky"><h1 class="hero-title ">Features &amp; Benefits</h1>
-  <div class="clear"></div>
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Features & Benefits</h1>
 </header>
-<article class="l-content ">
-  <div>
-    <div><h2 class="text-headline">Cross Platform</h2>
-      <div class="feature-row">
-        <div class="feature"><h3>Progressive web apps</h3>
-          <p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
-            High performance, offline, and zero-step installation.</p></div>
-        <div class="feature"><h3>Native</h3>
-          <p class="text-body">Build native mobile apps with strategies from Ionic Framework,
-            NativeScript, and React Native.</p></div>
-        <div class="feature"><h3>Desktop</h3>
-          <p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using
-            the same Angular methods you've learned for the web plus the ability to access native OS
-            APIs.</p></div>
-      </div>
-      <h2 class="text-headline">Speed and Performance</h2>
-      <div class="feature-row">
-        <div class="feature"><h3>Code generation</h3>
-          <p class="text-body">Angular turns your templates into code that's highly optimized for
-            today's JavaScript virtual machines, giving you all the benefits of hand-written code
-            with the productivity of a framework.</p></div>
-        <div class="feature"><h3>Universal</h3>
-          <p class="text-body">Serve the first view of your application on node.js, .NET, PHP, and
-            other servers for near-instant rendering in just HTML and CSS. Also paves the way for
-            sites that optimize for SEO.</p></div>
-        <div class="feature"><h3>Code splitting</h3>
-          <p class="text-body">Angular apps load quickly with the new Component Router, which
-            delivers automatic code-splitting so users only load code required to render the view
-            they request.</p></div>
-      </div>
-      <h2 class="text-headline">Productivity</h2>
-      <div class="feature-row">
-        <div class="feature"><h3>Templates</h3>
-          <p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
+
+<article>
+  <div class="flex-center">
+    <div>
+      <div class="feature-section">
+        <div class="feature-header">
+          <div class="text-headline">Cross Platform</div>
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
         </div>
-        <div class="feature"><h3>Angular CLI</h3>
-          <p class="text-body">Command line tools: start building fast, add components and tests,
-            then instantly deploy.</p></div>
-        <div class="feature"><h3>IDEs</h3>
-          <p class="text-body">Get intelligent code completion, instant errors, and other feedback
-            in popular editors and IDEs.</p></div>
+        <div class="feature-row">
+
+          <div class="feature">
+            <div class="feature-title">Progressive Web Apps</div>
+            <p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
+              High performance, offline, and zero-step installation.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">Native</div>
+            <p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">Desktop</div>
+            <p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.</p>
+          </div>
+        </div>
+        <hr>
       </div>
-      <h2 class="text-headline">Full Development Story</h2>
-      <div class="feature-row">
-        <div class="feature"><h3>Testing</h3>
-          <p class="text-body">With Karma for unit tests, you can know if you've broken things every
-            time you save. And Protractor makes your scenario tests run faster and in a stable
-            manner.</p></div>
-        <div class="feature"><h3>Animation</h3>
-          <p class="text-body">Create high-performance, complex choreographies and animation
-            timelines with very little code through Angular's intuitive API.</p></div>
-        <div class="feature"><h3>Accessibility</h3>
-          <p class="text-body">Create accessible applications with ARIA-enabled components,
-            developer guides, and built-in a11y test infrastructure.</p></div>
+
+      <div class="feature-section">
+        <div class="feature-header">
+          <div class="text-headline">Speed and Performance</div>
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
+        </div>
+        <div class="feature-row">
+
+          <div class="feature">
+            <div class="feature-title">Code Generation</div>
+            <p class="text-body">Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">Universal</div>
+            <p class="text-body">Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">Code Splitting</div>
+            <p class="text-body">Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.</p>
+          </div>
+        </div>
+        <hr>
+      </div>
+
+      <div class="feature-section">
+        <div class="feature-header">
+          <div class="text-headline">Productivity</div>
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
+        </div>
+        <div class="feature-row">
+
+          <div class="feature">
+            <div class="feature-title">Templates</div>
+            <p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">Angular CLI</div>
+            <p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">IDEs</div>
+            <p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
+          </div>
+        </div>
+        <hr>
+      </div>
+
+      <div class="feature-section">
+        <div class="feature-header">
+          <div class="text-headline">Full Development Story</div>
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
+        </div>
+        <div class="feature-row">
+
+          <div class="feature">
+            <div class="feature-title">Testing</div>
+            <p class="text-body">With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">Animation</div>
+            <p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
+          </div>
+
+          <div class="feature">
+            <div class="feature-title">Accessibility</div>
+            <p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="cta-bar"><a href="guide/quickstart" md-button="md-button"
-                          class="button button-large button-shield mat-raised mat-primary">Get
-    Started</a></div>
+
+  <div class="cta-bar announcement-bar">
+    <a class="button" href="guide/quickstart">Get Started</a>
+  </div>
+
 </article>
diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html
index f5bc61192c..afd6ef0611 100755
--- a/aio/content/marketing/index.html
+++ b/aio/content/marketing/index.html
@@ -1,73 +1,124 @@
-<header class="background-sky l-relative">
-  <div class="hero background-superhero-paper is-large"><img
-      src="assets/images/logos/angular/angular.svg" class="hero-logo"/>
-    <h1 class="text-headline">One framework.<br>Mobile &amp; desktop.</h1><a
-        href="/docs/ts/latest/quickstart.html" md-button="md-button"
-        class="hero-cta mat-raised button button-large button-plain">Get Started</a>
-    <announcement-bar class="announcement-bar">
-      <div class="announcement-bar-slide cleafix is-visible"><img
-          src="assets/images/logos/anglebrackets/devintersection.png" width="64"/>
-        <p>Join us for <strong>DEVintersection Amsterdam</strong> Nov 14-16!</p><a
-            href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button mat-button">Register
-          now</a></div>
-    </announcement-bar>
-  </div>
+<!--FULL HEADER BLOCK-->
+<header>
+
+  <!--BACKGROUND IMAGE-->
+  <div class="background-sky hero"></div>
+
+<!--INTRO SECTION -->
+  <section id="intro">
+
+    <!-- LOGO -->
+    <div class="hero-logo">
+      <img src="assets/images/logos/angular/angular.svg"/>
+    </div>
+
+      <!-- CONTAINER     -->
+    <div class="homepage-container">
+      <!-- container content starts -->
+
+      <div class="hero-headline no-toc">One framework.<br>Mobile &amp; desktop.</div>
+      <a class="button hero-cta" href="guide/quickstart">Get Started</a>
+  </div><!-- CONTAINER END -->
+  </section>
+
+
 </header>
-<article class="l-content ">
-  <div class="home-rows"><!-- Group 1-->
-    <div layout="row" layout-xs="column" class="home-row">
+
+<article>
+  <div class="home-rows">
+
+    <!--Announcement Bar-->
+    <div class="homepage-container">
+      <div class="announcement-bar">
+        <img src="generated/images/marketing/home/angular-mix.png" height="40" width="151">
+        <p>Join us at our newest event, October 2017</p>
+        <a class="button" href="https://angularmix.com/">Learn More</a>
+     </div>
+    </div>
+
+    <!-- Group 1-->
+    <div layout="row" layout-xs="column" class="home-row homepage-container">
       <div class="promo-img-container promo-1">
-        <div><img src="assets/images/home/responsive-framework.svg"></div>
-      </div>
-      <div class="text-container">
-        <div class="text-block promo-1-desc l-pad-top-2"><h3 class="text-headline">Develop Across
-          All Platforms</h3>
-          <p class="text-body">Learn one way to build applications with Angular and reuse your code
-            and abilities to build apps for any deployment target. For web, mobile web, native
-            mobile and native desktop.
-          </p></div>
-      </div>
-    </div><!-- Group 2-->
-    <div layout="row" layout-xs="column" class="home-row">
-      <div class="text-container">
-        <div class="text-block"><h3 class="text-headline">Speed & Performance</h3>
-          <p class="text-body">Achieve the maximum speed possible on the Web Platform today, and
-            take it further, via Web Workers and server-side rendering.</p>
-          <p class="text-body">Angular puts you in control over scalability. Meet huge data
-            requirements by building data models on RxJS, Immutable.js or another push-model.</p>
+        <div>
+          <img height="222" width="340" src="generated/images/marketing/home/responsive-framework.svg" alt="responsive framework">
         </div>
       </div>
-      <div class="promo-img-container promo-2">
-        <div><img src="assets/images/home/speed-performance.svg"></div>
-      </div>
-    </div><!-- Group 3-->
-    <div layout="row" layout-xs="column" class="home-row">
-      <div class="promo-img-container promo-3">
-        <div><img src="assets/images/home/joyful-development.png"></div>
-      </div>
+
       <div class="text-container">
-        <div class="text-block promo-3-desc"><h3 class="text-headline">Incredible Tooling</h3>
-          <p class="text-body">Build features quickly with simple, declarative templates. Extend the
-            template language with your own components and use a wide array of existing components.
-            Get immediate Angular-specific help and feedback with nearly every IDE and editor. All
-            this comes together so you can focus on building amazing apps rather than trying to make
-            the code work.
-          </p></div>
-      </div>
-    </div><!-- Group 4-->
-    <div layout="row" layout-xs="column" class="home-row">
-      <div class="text-container">
-        <div class="text-block l-pad-top-2"><h3 class="text-headline">Loved by Millions</h3>
-          <p class="text-body">From prototype through global deployment, Angular delivers the
-            productivity and scalable infrastructure that supports Google's largest
-            applications.</p></div>
-      </div>
-      <div class="promo-img-container promo-4">
-        <div><img src="assets/images/home/loved-by-millions.png"></div>
+        <div class="text-block promo-1-desc l-pad-top-2">
+          <div class="text-headline">Develop Across All Platforms</div>
+          <p class="text-body">Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.
+          </p>
+        </div>
       </div>
     </div>
-    <div class="cta-bar"><a href="/docs/ts/latest/quickstart.html" md-button="md-button"
-                            class="button button-large button-shield mat-raised mat-primary">Get
-      Started</a></div>
+    <hr>
+    <!-- Group 2-->
+    <div layout="row" layout-xs="column" class="home-row">
+      <div class="text-container">
+        <div class="text-block">
+          <div class="text-headline">Speed & Performance</div>
+          <p class="text-body">Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.</p>
+          <p class="text-body">Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
+        </div>
+      </div>
+
+      <div class="promo-img-container promo-2">
+        <div>
+          <img height="222" width="323" src="generated/images/marketing/home/speed-performance.svg" alt="speed and performance">
+        </div>
+      </div>
+    </div>
+    <hr>
+
+    <!-- Group 3-->
+    <div layout="row" layout-xs="column" class="home-row">
+      <div class="promo-img-container promo-3">
+        <div><img src="generated/images/marketing/home/joyful-development.svg" alt="IDE example"></div>
+      </div>
+
+      <div class="text-container">
+        <div class="text-block promo-3-desc">
+          <div class="text-headline">Incredible Tooling</div>
+          <p class="text-body">Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.
+          </p>
+        </div>
+      </div>
+
+    </div>
+    <hr>
+
+    <!-- Group 4-->
+    <div layout="row" layout-xs="column" class="home-row">
+
+      <div class="text-container">
+        <div class="text-block l-pad-top-2">
+          <div class="text-headline">Loved by Millions</div>
+          <p class="text-body">From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.</p>
+        </div>
+      </div>
+
+      <div class="promo-img-container promo-4">
+        <div>
+          <img src="generated/images/marketing/home/loved-by-millions.svg" alt="angular on the map" width="455" height="228">
+        </div>
+      </div>
+    </div>
+
+  <!-- CTA CARDS -->
+  <div layout="row" layout-xs="column" class="home-row">
+
+    <a href="guide/quickstart">
+      <div class="card">
+          <img src="generated/images/marketing/home/code-icon.svg" height="70px">
+          <div class="card-text-container">
+            <div class="text-headline">Get Started</div>
+            <p>Start building your Angular application.</p>
+          </div>
+      </div>
+    </a>
   </div>
+
+  </div> <!-- end of home rows -->
+
 </article>
diff --git a/aio/content/marketing/news.html b/aio/content/marketing/news.html
deleted file mode 100755
index ce3af7fc5c..0000000000
--- a/aio/content/marketing/news.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<header class="hero background-sky"><h1 class="hero-title ">News</h1>
-  <div class="clear"></div>
-</header>
-<article class="l-content ">
-  <div class="grid-fluid l-space-bottom-2">
-    <div class="c12 text-center"><h3 class="text-headline text-uppercase"> Core Team</h3></div>
-    <div class="clear"></div>
-  </div>
-  <div class="grid-fluid">
-    <div class="c6">
-      <div class="article-card">
-        <div class="date">Oct 12, 2016</div>
-        <div class="title"><a target="_blank"
-                              href="http://angularjs.blogspot.com/2016/10/angular-210-now-available.html">Angular
-          2.1.0 Now Available</a></div>
-        <p>Angular version 2.1.0 - incremental-metamorphosis - is a minor release following our
-          announced adoption of Semantic Versioning...</p>
-        <div class="author"><img src="assets/images/bios/stephenfluin.jpg">
-          <div class="posted">Posted by <b>Stephen Fluin</b></div>
-        </div>
-      </div>
-    </div>
-    <div class="c6">
-      <div class="article-card">
-        <div class="date">Oct 7, 2016</div>
-        <div class="title"><a target="_blank"
-                              href="http://angularjs.blogspot.com/2016/10/versioning-and-releasing-angular.html">Versioning
-          and Releasing Angular</a></div>
-        <p>In order for the ecosystem around Angular to thrive, developers need stability from the
-          Angular framework so that reusable components and libraries, tools and learned practices
-          don’t go obsolete unexpectedly...</p>
-        <div class="author"><img src="assets/images/bios/igor-minar.jpg">
-          <div class="posted">Posted by <b>Igor Minar</b></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="grid-fluid l-space-bottom-2 l-space-top-4">
-    <div class="c12 text-center"><h3 class="text-headline text-uppercase"> Developer Community</h3>
-    </div>
-    <div class="clear"></div>
-  </div>
-  <div class="grid-fluid">
-    <div class="c6">
-      <div class="article-card">
-        <div class="date">Oct 30, 2016</div>
-        <div class="title"><a target="_blank"
-                              href="https://www.thepolyglotdeveloper.com/2016/10/use-pre-populated-sqlite-database-nativescript-angular-2/">Use
-          A Pre-Populated SQLite Database With NativeScript And Angular 2</a></div>
-        <p>I figured it would be a good idea to demonstrate how to ship a NativeScript Angular 2
-          application with a pre-filled SQLite database rather than populating it on-the-fly....</p>
-        <div class="author"><img src="assets/images/bios/shield-bio-placeholder.png">
-          <div class="posted">Posted by <b>Nic Raboy</b></div>
-        </div>
-      </div>
-    </div>
-    <div class="c6">
-      <div class="article-card">
-        <div class="date">Oct 13, 2016</div>
-        <div class="title"><a target="_blank"
-                              href="http://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html">Two-way
-          Data Binding in Angular 2</a></div>
-        <p>If there was one feature in Angular that made us go “Wow”, then it was probably its
-          two-way data binding system. Changes in the application state have been automagically
-          reflected into the view...</p>
-        <div class="author"><img src="assets/images/bios/angular-gde-bio-placeholder.png">
-          <div class="posted">Posted by <b>Pascal Precht</b></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="grid-fluid">
-    <div class="c6">
-      <div class="article-card">
-        <div class="date">Oct 10, 2016</div>
-        <div class="title"><a target="_blank"
-                              href="http://www.creativebloq.com/how-to/build-a-material-design-app-with-angular-2">Build
-          a Material Design app with Angular 2</a></div>
-        <p>This walkthrough reveals how to create a DialogComponent and to-do app with Angular
-          Material and the Angular CLI...</p>
-        <div class="author"><img src="assets/images/bios/shield-bio-placeholder.png">
-          <div class="posted">Posted by <b>Daniel Zen</b></div>
-        </div>
-      </div>
-    </div>
-    <div class="c6">
-      <div class="article-card">
-        <div class="date">Sept 30, 2016</div>
-        <div class="title"><a target="_blank"
-                              href="http://www.simb.co/angular-cli-using-docker/?platform=hootsuite">Using
-          Angular CLI to create Angular 2 applications in Docker</a></div>
-        <p>Angular CLI is a great tool for developing Angular 2 applications. I thought it would be
-          fun to do a quick demo...</p>
-        <div class="author"><img src="assets/images/bios/shield-bio-placeholder.png">
-          <div class="posted">Posted by <b>Simeon Bateman</b></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="grid-fluid l-space-bottom-2 l-space-top-4">
-    <div class="c12 text-center"><h3 class="text-headline text-uppercase">Twitter</h3></div>
-    <div class="clear"></div>
-    <div class="grid-fluid">
-      <div class="c3"><p></p></div>
-      <div class="c6">
-        <div class="article-card">
-          <div class="title"><a href="http://twitter.com/angularjs" data-show-count="false"
-                                class="twitter-follow-button">Follow @angularjs</a></div>
-          <p><a class="twitter-timeline" data-chrome="nofooter noborders noheader"
-                href="http://twitter.com/angularjs" data-widget-id="700150278465523713"></a></p>
-        </div>
-      </div>
-    </div>
-  </div>
-</article>
\ No newline at end of file
diff --git a/aio/content/marketing/presskit.html b/aio/content/marketing/presskit.html
index 8ef1ff1476..0fb8b79500 100644
--- a/aio/content/marketing/presskit.html
+++ b/aio/content/marketing/presskit.html
@@ -1,11 +1,15 @@
-<div class="presskit-container l-space-neg-top-8">
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Press kit</h1>
+</header>
+
+<article class="presskit-container">
   <div class="presskit-row">
     <div class="presskit-inner">
       <div>
         <h2>ANGULAR LOGO</h2>
         <p>
           The logo graphics available for download on this page are provided under
-          <a class="cc-by-anchor" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
+          <a class="cc-by-anchor" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
           This means that you can pretty much do what you like with it including printing it on shirts, creating your own variations, or getting it tattooed over your navel.
         </p>
         <p>We do ask that you not use the rest of the site graphics in other contexts to avoid confusion.</p>
@@ -16,7 +20,7 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="assets/images/logos/angular/angular.svg">
+        <img src="assets/images/logos/angular/angular.svg" alt="Angular">
       </div>
       <div>
         <h3 class="l-space-left-3">FULL COLOR LOGO</h3>
@@ -125,10 +129,10 @@
           </ol>
 
           <p>AngularJS projects should use the
-          <a href="/assets/images/logos/angularjs/AngularJS-Shield.svg" target="_blank" title="AngularJS logo">
+          <a href="assets/images/logos/angularjs/AngularJS-Shield.svg" title="AngularJS logo">
           original AngularJS logo</a> / icon, and not the Angular icon.</p>
 
-          <img src="/assets/images/logos/angularjs/AngularJS-Shield.svg" alt="AngularJS Logo" style="margin-left:20px;" >
+          <img src="assets/images/logos/angularjs/AngularJS-Shield.svg" alt="AngularJS Logo" style="margin-left:20px;" height="128" width="128">
 
           <h3>Angular Material</h3>
 
@@ -188,4 +192,4 @@
       </div>
     </div>
   </div>
-</div>
+</article>
diff --git a/aio/content/marketing/resources-contributing.md b/aio/content/marketing/resources-contributing.md
new file mode 100644
index 0000000000..8289db1008
--- /dev/null
+++ b/aio/content/marketing/resources-contributing.md
@@ -0,0 +1,13 @@
+# Contributing to resources.json
+
+## About this list
+We maintain a small list of some of the top Angular resources from across the community, stored in `resources.json`. This list is not intended to be comprehensive, but to act as a starting point to connect Angular developers to the rest of the community.
+
+## How do I get listed?
+While we can't accept all contributions, qualifying contributions can be submitted via a PR adding yourself to the `resources.json` file. All contributions should be in the appropriate section and must meet the following criteria:
+
+1. Your contribution must be valid, and contain a link to a page talking specifically about using Angular
+1. Your contribution should have a clear and concise title and description
+1. Your resource should follow our brand guidelines (see our [Presskit](https://angular.io/presskit))
+1. Your resource should have significant benefit to Angular developers
+1. Your resource should already have traction and praise from Angular developers
diff --git a/aio/content/marketing/resources.html b/aio/content/marketing/resources.html
new file mode 100644
index 0000000000..6f1210c599
--- /dev/null
+++ b/aio/content/marketing/resources.html
@@ -0,0 +1,7 @@
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Explore Angular Resources</h1>
+</header>
+
+<article>
+  <aio-resource-list></aio-resource-list>
+</article>
diff --git a/aio/content/marketing/resources.json b/aio/content/marketing/resources.json
new file mode 100644
index 0000000000..e981f64820
--- /dev/null
+++ b/aio/content/marketing/resources.json
@@ -0,0 +1,615 @@
+{
+  "Community": {
+    "order": 3,
+    "subCategories": {
+      "Community Curations": {
+        "order": 1,
+        "resources": {
+          "awesome-angular-components": {
+            "desc": "A community index of components and libraries maintained on GitHub",
+            "rev": true,
+            "title": "Catalog of Angular Components & Libraries",
+            "url": "https://github.com/brillout/awesome-angular-components"
+          }
+        }
+      },
+      "Groups": {
+        "order": 2,
+        "resources": {
+          "sldkjfslkjfslkjdsklj": {
+            "desc": "Meetup in Barcelona, Spain. Express your motivations, share your ideas and play together creating awesome things in team.",
+            "rev": true,
+            "title": "Angular Beers",
+            "url": "http://www.meetup.com/AngularJS-Beers/"
+          },
+          "sldkjfslkjfslkjdskzzzlj": {
+            "desc": "Angular Conferences and Angular Camps in Barcelona, Spain.",
+            "rev": true,
+            "title": "Angular Camp",
+            "url": "http://angularcamp.org/"
+          }
+        }
+      },
+      "Podcasts": {
+        "order": 3,
+        "resources": {
+          "sdfjkdkfj": {
+            "desc": "Adventures in Angular is a weekly podcast dedicated to the Angular platform and related technologies, tools, languages, and practices.",
+            "logo": "",
+            "rev": true,
+            "title": "Adventures in Angular",
+            "url": "https://devchat.tv/adventures-in-angular"
+          },
+          "sdlkfjsldfkj": {
+            "desc": "Weekly video podcast hosted by Jeff Whelpley with all the latest and greatest happenings in the wild world of Angular.",
+            "logo": "",
+            "rev": true,
+            "title": "AngularAir",
+            "url": "https://angularair.com/"
+          },
+          "sldkfjsldjf": {
+            "desc": "The live broadcast podcast all about JavaScript",
+            "logo": "",
+            "rev": true,
+            "title": "Javascript Air",
+            "url": "https://javascriptair.com/"
+          }
+        }
+      }
+    }
+  },
+  "Development": {
+    "order": 1,
+    "subCategories": {
+      "Cross-Platform Development": {
+        "order": 5,
+        "resources": {
+          "a2b": {
+            "desc": "Angular and React Native to build applications for Android and iOS",
+            "logo": "",
+            "rev": true,
+            "title": "ReactNative",
+            "url": "http://angular.github.io/react-native-renderer/"
+          },
+          "a3b": {
+            "desc": "Ionic offers a library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive web apps.",
+            "logo": "http://ionicframework.com/img/ionic-logo-white.svg",
+            "rev": true,
+            "title": "Ionic",
+            "url": "http://ionicframework.com/docs/v2/"
+          },
+          "a4b": {
+            "desc": "Electron Platform for Angular.",
+            "logo": "",
+            "rev": true,
+            "title": "Electron",
+            "url": "http://github.com/angular/angular-electron"
+          },
+          "ab": {
+            "desc": "NativeScript is how you build cross-platform, native iOS and Android apps with Angular and TypeScript. Get 100% access to native APIs via JavaScript and reuse of packages from NPM, CocoaPods and Gradle. Open source and backed by Telerik.​​​",
+            "logo": "",
+            "rev": true,
+            "title": "NativeScript",
+            "url": "https://github.com/NativeScript/nativescript-angular"
+          },
+          "ab5": {
+            "desc": "An Universal Windows App (uwp) powered by Angular",
+            "logo": "",
+            "rev": true,
+            "title": "Windows (UWP)",
+            "url": "http://github.com/preboot/angular2-universal-windows-app"
+          }
+        }
+      },
+      "Data Libraries": {
+        "order": 3,
+        "resources": {
+          "-KLIzHDRfiB3d7W7vk-e": {
+            "desc": "Reactive Extensions for Angular",
+            "rev": true,
+            "title": "ngrx",
+            "url": "http://github.com/ngrx"
+          },
+          "ab": {
+            "desc": "The official library for Firebase and Angular",
+            "logo": "",
+            "rev": true,
+            "title": "Angular Fire",
+            "url": "https://github.com/angular/angularfire2"
+          },
+          "ab2": {
+            "desc": "Use Angular and Meteor to build full-stack JavaScript apps  for Mobile and Desktop.",
+            "logo": "http://www.angular-meteor.com/images/logo.png",
+            "rev": true,
+            "title": "Meteor",
+            "url": "http://www.angular-meteor.com/angular2"
+          },
+          "ab3": {
+            "desc": "Apollo is a data stack for modern apps, built with GraphQL.",
+            "logo": "http://docs.apollostack.com/logo/large.png",
+            "rev": true,
+            "title": "Apollo",
+            "url": "http://docs.apollostack.com/apollo-client/angular2.html"
+          }
+        }
+      },
+      "IDEs": {
+        "order": 1,
+        "resources": {
+          "ab": {
+            "desc": "VS Code is a Free, Lightweight Tool for Editing and Debugging Web Apps.",
+            "logo": "",
+            "rev": true,
+            "title": "Visual Studio Code",
+            "url": "http://code.visualstudio.com/"
+          },
+          "ab2": {
+            "desc": "Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js",
+            "logo": "",
+            "rev": true,
+            "title": "Webstorm",
+            "url": "https://www.jetbrains.com/webstorm/"
+          },
+          "ab3": {
+            "desc": "Capable and Ergonomic  Java * IDE",
+            "logo": "",
+            "rev": true,
+            "title": "IntelliJ IDEA",
+            "url": "https://www.jetbrains.com/idea/"
+          },
+          "angular-ide": {
+            "desc": "Built first and foremost for Angular. Turnkey setup for beginners; powerful for experts.",
+            "rev": true,
+            "title": "Angular IDE by Webclipse",
+            "url": "https://www.genuitec.com/products/angular-ide"
+          }
+        }
+      },
+      "Tooling": {
+        "order": 2,
+        "resources": {
+          "-KLIzHfBEr1qMMUDxfq3": {
+            "desc": "Generate an Angular CRUD application from an existing database schema",
+            "rev": true,
+            "title": "Celerio Angular Quickstart",
+            "url": "https://github.com/jaxio/celerio-angular-quickstart"
+          },
+          "a1": {
+            "desc": "A Google Chrome Dev Tools extension for debugging Angular applications.",
+            "logo": "https://augury.angular.io/images/augury-logo.svg",
+            "rev": true,
+            "title": "Augury",
+            "url": "http://augury.angular.io/"
+          },
+          "b1": {
+            "desc": "Server-side Rendering for Angular apps.",
+            "logo": "https://cloud.githubusercontent.com/assets/1016365/10639063/138338bc-7806-11e5-8057-d34c75f3cafc.png",
+            "rev": true,
+            "title": "Angular Universal",
+            "url": "https://github.com/angular/universal"
+          },
+          "c1": {
+            "desc": "Lightweight development only node server",
+            "logo": "",
+            "rev": true,
+            "title": "Lite-server",
+            "url": "https://github.com/johnpapa/lite-server"
+          },
+          "cli": {
+            "desc": "The official Angular CLI makes it easy to create and develop applications from initial commit to production deployment. It already follows our best practices right out of the box!",
+            "rev": true,
+            "title": "Angular CLI",
+            "url": "https://cli.angular.io"
+          },
+          "d1": {
+            "desc": "A set of tslint rules for static code analysis of Angular TypeScript projects.",
+            "logo": "",
+            "rev": true,
+            "title": "Codelyzer",
+            "url": "https://github.com/mgechev/codelyzer"
+          },
+          "e1": {
+            "desc": "This package provides facilities for developers building Angular applications on ASP.NET.",
+            "logo": "",
+            "rev": true,
+            "title": "Universal for ASP.NET",
+            "url": "https://github.com/aspnet/nodeservices"
+          },
+          "f1": {
+            "desc": "This tool generates dedicated documentation for Angular applications.",
+            "logo": "",
+            "rev": true,
+            "title": "Compodoc",
+            "url": "https://github.com/compodoc/compodoc"
+          }
+        }
+      },
+      "UI Components": {
+        "order": 4,
+        "resources": {
+          "DevExtreme": {
+            "desc": "50+ UI components including data grid, pivot grid, scheduler, charts, editors, maps and other multi-purpose controls for creating highly responsive web applications for touch devices and traditional desktops.",
+            "rev": true,
+            "title": "DevExtreme",
+            "url": "https://js.devexpress.com/Overview/Angular/"
+          },
+          "234237": {
+            "desc": "UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences",
+            "rev": true,
+            "title": "Clarity Design System",
+            "url": "https://vmware.github.io/clarity/"
+          },
+          "-KLIzI9BTvvP_hUwutXk": {
+            "desc": "UI components for Angular using Semantic UI",
+            "rev": true,
+            "title": "Semantic UI",
+            "url": "https://github.com/vladotesanovic/ngSemantic"
+          },
+          "-KMVB8P4TDfht8c0L1AE": {
+            "desc": "The Angular version of the Angular UI Bootstrap library. This library is being built from scratch in Typescript using the Bootstrap 4 CSS framework.",
+            "rev": true,
+            "title": "ng-bootstrap",
+            "url": "https://ng-bootstrap.github.io/"
+          },
+          "4ab": {
+            "desc": "Native Angular components & directives for Lightning Design System",
+            "logo": "http://ng-lightning.github.io/ng-lightning/img/shield.svg",
+            "rev": true,
+            "title": "ng-lightning",
+            "url": "http://ng-lightning.github.io/ng-lightning/"
+          },
+          "7ab": {
+            "desc": "UI components for hybrid mobile apps with bindings for both Angular & AngularJS.",
+            "rev": true,
+            "title": "Onsen UI",
+            "url": "https://onsen.io/v2/"
+          },
+          "a2b": {
+            "desc": "PrimeNG is a collection of rich UI components for Angular",
+            "logo": "http://www.primefaces.org/primeng/showcase/resources/images/primeng.svg",
+            "rev": true,
+            "title": "Prime Faces",
+            "url": "http://www.primefaces.org/primeng/"
+          },
+          "a3b": {
+            "desc": "One of the first major UI frameworks to support Angular",
+            "logo": "",
+            "rev": true,
+            "title": "Kendo UI",
+            "url": "http://www.telerik.com/kendo-angular-ui/"
+          },
+          "a5b": {
+            "desc": "High-performance UI controls with the most complete Angular support available. Wijmo’s controls are all written in TypeScript and have zero dependencies. FlexGrid control includes full declarative markup, including cell templates.",
+            "logo": "http://wijmocdn.azureedge.net/wijmositeblob/wijmo-theme/logos/wijmo-55.png",
+            "rev": true,
+            "title": "Wijmo",
+            "url": "http://wijmo.com/products/wijmo-5/"
+          },
+          "a6b": {
+            "desc": "Material design inspired UI components for building great web apps. For mobile and desktop.",
+            "logo": "",
+            "rev": true,
+            "title": "Vaadin",
+            "url": "https://vaadin.com/elements"
+          },
+          "a7b": {
+            "desc": "Native Angular directives for Bootstrap",
+            "logo": "",
+            "rev": true,
+            "title": "ngx-bootstrap",
+            "url": "http://valor-software.com/ngx-bootstrap/#/"
+          },
+          "ab": {
+            "desc": "Material Design components for Angular",
+            "logo": "",
+            "rev": true,
+            "title": "Angular Material 2",
+            "url": "https://github.com/angular/material2"
+          },
+          "aggrid": {
+            "desc": "A datagrid for Angular with enterprise style features such as sorting, filtering, custom rendering, editing, grouping, aggregation and pivoting.",
+            "rev": true,
+            "title": "ag-Grid",
+            "url": "https://www.ag-grid.com/best-angular-2-data-grid/"
+          },
+          "jqwidgets": {
+            "desc": "Angular UI Components including Grids, Charts, Scheduling and more.",
+            "rev": true,
+            "title": "jQWidgets",
+            "url": "http://www.jqwidgets.com/angular/"
+          },
+          "amexio": {
+            "desc": "Amexio (Angular MetaMagic EXtensions for Inputs and Outputs)  is a rich set of Angular components powered by Bootstrap for Responsive Design. UI Components include Standard Form Components, Data Grids, Tree Grids, Tabs etc. Open Source (Apache 2 License) & Free and backed by MetaMagic Global Inc",
+            "rev": true,
+            "title": "Amexio - Angular Extensions",
+            "url": "http://www.amexio.tech/",
+            "logo": "http://www.amexio.org/amexio-logo.png"
+          }          
+        }
+      }
+    }
+  },
+  "Education": {
+    "order": 2,
+    "subCategories": {
+      "Books": {
+        "order": 1,
+        "resources": {
+          "-KLI8vJ0ZkvWhqPembZ7": {
+            "desc": "A guide that helps developers get up to speed quickly on Angular and its accompanying technologies.",
+            "rev": true,
+            "title": "How to Get Started and Productive in Angular Fast",
+            "url": "http://www.amazon.com/How-Started-Productive-Angular-Fast-ebook/dp/B01D3B0ET4/ref=sr_1_1_twi_kin_2?ie=UTF8&qid=1462381159&sr=8-1"
+          },
+          "-KLIzGEp8Mh5W-FkiQnL": {
+            "desc": "Your quick, no-nonsense guide to building real-world apps with Angular",
+            "rev": true,
+            "title": "Learning Angular",
+            "url": "https://www.packtpub.com/web-development/learning-angular-2"
+          },
+          "3ab": {
+            "desc": "More than 15 books from O'Reilly about Angular",
+            "rev": true,
+            "title": "O'Reilly Media",
+            "url": "https://ssearch.oreilly.com/?q=angular+2&x=0&y=0"
+          },
+          "8ab": {
+            "desc": "This books shows all the steps necessary for the development of SPA (Single Page Application) applications with the brand new Angular",
+            "rev": true,
+            "title": "Practical Angular",
+            "url": "https://leanpub.com/practical-angular-2"
+          },
+          "a2b": {
+            "desc": "Publications and books from Manning about Angular",
+            "rev": true,
+            "title": "Manning Publications",
+            "url": "https://www.manning.com/search?q=angular"
+          },
+          "a4b": {
+            "desc": "From getting started with the Angular toolchain to writing applications with scalable front end architectures, this book walks you through everything you need to know.",
+            "rev": true,
+            "title": "Rangle's Angular Training Book",
+            "url": "http://ngcourse.rangle.io/"
+          },
+          "a5b": {
+            "desc": "The in-depth, complete, and up-to-date book on Angular. Become an Angular expert today.",
+            "rev": true,
+            "title": "ng-book",
+            "url": "https://www.ng-book.com/2/"
+          },
+          "a6b": {
+            "desc": "A Practical Introduction to the new Web Development Platform Angular",
+            "rev": true,
+            "title": "Angular Book",
+            "url": "https://leanpub.com/angular2-book"
+          },
+          "a7b": {
+            "desc": "This ebook will help you getting the philosophy of the framework: what comes from 1.x, what has been introduced and why",
+            "rev": true,
+            "title": "Becoming a Ninja with Angular",
+            "url": "https://books.ninja-squad.com/angular"
+          },
+          "ab": {
+            "desc": "More than 10 books from Packt Publishing about Angular",
+            "rev": true,
+            "title": "Packt Publishing",
+            "url": "https://www.packtpub.com/all/?search=angular%202#"
+          },
+          "cnoring-rxjs-fundamentals": {
+            "desc": "A free book that covers all facets of working with Rxjs from your first Observable to how to make your code run at optimal speed with Schedulers.",
+            "rev": true,
+            "title": "RxJS 5 Ultimate",
+            "url": "https://www.gitbook.com/book/chrisnoring/rxjs-5-ultimate/details"
+          },
+          "vsavkin-angular-router": {
+            "desc": "This book is a comprehensive guide to the Angular router written by its designer. The book explores the library in depth, including the mental model, design constraints, subtleties of the API.",
+            "rev": true,
+            "title": "Angular Router",
+            "url": "https://leanpub.com/router"
+          },
+          "vsavkin-essential-angular": {
+            "desc": "The book is a short, but at the same time, fairly complete overview of the key aspects of Angular written by its core contributors Victor Savkin and Jeff Cross. The book will give you a strong foundation. It will help you put all the concepts into right places. So you will get a good understanding of why the framework is the way it is.",
+            "rev": true,
+            "title": "Essential Angular",
+            "url": "https://gumroad.com/l/essential_angular"
+          }
+        }
+      },
+      "Online Training": {
+        "order": 3,
+        "resources": {
+          "-KLIBoTWXMiBcvG0dAM6": {
+            "desc": "This course introduces you to the essentials of this \"superheroic\" framework, including declarative templates, two-way data binding, and dependency injection.",
+            "rev": true,
+            "title": "Angular: Essential Training",
+            "url": "https://www.lynda.com/AngularJS-tutorials/Angular-2-Essential-Training/540347-2.html"
+          },
+          "-KLIzGq3CiFeoZUemVyE": {
+            "desc": "Learn the core concepts, play with the code, become a competent Angular developer",
+            "rev": true,
+            "title": "Angular Concepts, Code and Collective Wisdom",
+            "url": "https://www.udemy.com/angular-2-concepts-code-and-collective-wisdom/"
+          },
+          "-KLIzHwg-glQLXni1hvL": {
+            "desc": "Spanish language Angular articles and information",
+            "rev": true,
+            "title": "Academia Binaria (español)",
+            "url": "http://academia-binaria.com/"
+          },
+          "-KLIzIOgdPXzI4LMOzYP": {
+            "desc": "In this course, you will learn the features listed above and so much more. This amazing Angular tutorial will cover the fundamentals of Angular (you don’t even need to know Angular), TypeScript, and introduction to the programming concepts such as conditions, arrays, functions, directives, pipes, etc.",
+            "rev": true,
+            "title": "Eduonix Angular Fundamentals",
+            "url": "https://www.eduonix.com/courses/Web-Development/angular-2-fundamentals-for-web-developers"
+          },
+          "-KMUuOWwciL_S_o0fzFO": {
+            "desc": "The ngMigrate project is brought to you by Todd Motto, a Developer Advocate at Telerik, spreading the good word of Kendo UI, NativeScript and Angular & AngularJS. You can follow him on Twitter for questions, or even requests about this guide.",
+            "rev": true,
+            "title": "ngMigrate",
+            "url": "http://ngmigrate.telerik.com/"
+          },
+          "-KN3uNQvxifu26D6WKJW": {
+            "category": "Education",
+            "desc": "Create the future of web applications by taking Angular for a test drive.",
+            "rev": true,
+            "subcategory": "Online Training",
+            "title": "CodeSchool: Accelerating Through Angular",
+            "url": "https://www.codeschool.com/courses/accelerating-through-angular-2"
+          },
+          "a2b": {
+            "desc": "Hundreds of Angular courses for all skill levels",
+            "logo": "",
+            "rev": true,
+            "title": "Pluralsight",
+            "url": "https://www.pluralsight.com/search?q=angular+2&categories=all"
+          },
+          "ab": {
+            "desc": "Take this introduction to Angular course, to learn the fundamentals in just two days, free of charge.",
+            "logo": "",
+            "rev": true,
+            "title": "Rangle.io",
+            "url": "https://rangle.io/services/javascript-training/training-angular1-angular2-with-ngupgrade/"
+          },
+          "ab3": {
+            "desc": "Angular courses hosted by  Udemy",
+            "logo": "",
+            "rev": true,
+            "title": "Udemy",
+            "url": "https://www.udemy.com/courses/search/?ref=home&src=ukw&q=angular+2&lang=en"
+          },
+          "ab4": {
+            "desc": "Angular Fundamentals and advanced topics focused on Redux Style Angular Applications",
+            "logo": "",
+            "rev": true,
+            "title": "Egghead.io",
+            "url": "https://egghead.io/technologies/angular2"
+          },
+          "ab5": {
+            "desc": "Build Web Apps with Angular - recorded video content",
+            "logo": "",
+            "rev": true,
+            "title": "Frontend Masters",
+            "url": "https://frontendmasters.com/courses/angular-2/"
+          },
+          "ac6": {
+            "desc": "French language Angular course covering TypeScript, ES6, Dependency Injection, Observables, and more.",
+            "rev": true,
+            "title": "Wishtack's Angular Course (francais)",
+            "url": "http://courses.wishtack.com/angular-2/ecmascript-6"
+          },
+          "angular-love": {
+            "desc": "Polish language Angular articles and information",
+            "rev": true,
+            "title": "angular.love (Polski)",
+            "url": "http://www.angular.love/"
+          },
+          "angular2forms": {
+            "desc": "Learn about how to use Reactive Forms with Angular.",
+            "rev": true,
+            "title": "Angular Forms: Data Binding and Validation",
+            "url": "https://www.lynda.com/AngularJS-tutorials/Angular-2-Forms-Data-Binding-Validation/461451-2.html"
+          },
+          "learn-angular-fr": {
+            "desc": "French language Angular content.",
+            "rev": true,
+            "title": "Learn Angular (francais)",
+            "url": "http://www.learn-angular.fr/"
+          },
+          "toddmotto-ultimateangular": {
+            "desc": "Online courses providing in-depth coverage of the Angular ecosystem, AngularJS, Angular and TypeScript, with functional code samples and a full-featured seed environment. Get a deep understanding of Angular and TypeScript from foundation to functional application, then move on to advanced topics with Todd Motto and collaborators.",
+            "rev": true,
+            "title": "Ultimate Angular",
+            "url": "https://ultimateangular.com/"
+          }
+        }
+      },
+      "Workshops & Onsite Training": {
+        "order": 2,
+        "resources": {
+          "-KLIBo3ANF3-1B9wxsoB": {
+            "desc": "Angular Classes from Intertech in Minnesota",
+            "rev": true,
+            "title": "Intertech",
+            "url": "http://www.intertech.com/Training/Web-Dev/AngularJS/AngularJS/Angular-2-Training"
+          },
+          "-KLIBoFWStce29UCwkvY": {
+            "desc": "Private Angular Training and Mentoring",
+            "rev": true,
+            "title": "Chariot Solutions",
+            "url": "http://chariotsolutions.com/course/angular2-workshop-fundamentals-architecture/"
+          },
+          "-KLIBoN0p9be3kwC6-ga": {
+            "desc": "Angular Academy is a two day hands-on public course given in-person across Canada!",
+            "rev": true,
+            "title": "Angular Academy (Canada)",
+            "url": "http://www.angularacademy.ca"
+          },
+          "-KLIBo_lm-WrK1Sjtt-2": {
+            "desc": "Basic and Advanced training across Europe in German",
+            "rev": true,
+            "title": "TheCodeCampus (German)",
+            "url": "https://www.thecodecampus.de/#!/angularjs"
+          },
+          "-KLIzFhfGKi1xttqJ7Uh": {
+            "desc": "4 day in-depth Angular training in Israel",
+            "rev": true,
+            "title": "ng-course (Israel)",
+            "url": "http://ng-course.org/"
+          },
+          "-KLIzIcRoDq3TzCJWnYc": {
+            "desc": "Virtual and in-person training in Canada and the US",
+            "rev": true,
+            "title": "Web Age Solutions",
+            "url": "http://www.webagesolutions.com/courses/WA2533-angular-2-programming"
+          },
+          "500tech": {
+            "desc": "Learn from 500Tech, an Angular consultancy in Israel.  This course was built by an expert developer, who lives and breathes Angular, and has practical experience  with real world large scale Angular apps.",
+            "rev": true,
+            "title": "Angular Hands-on Course (Israel)",
+            "url": "http://angular2.courses.500tech.com/"
+          },
+          "9ab": {
+            "desc": "OnSite Training From the Authors of  \"Become A Ninja with Angular\"",
+            "rev": true,
+            "title": "Ninja Squad",
+            "url": "http://ninja-squad.com/formations/formation-angular2"
+          },
+          "a2b": {
+            "desc": "Angular Boot Camp covers introductory and intermediate content. It includes extensive workshop session, with hands-on help from our experienced developer-trainers. At the end of this class, student are usually able to use AngularJS to make an end-to-end, working application.",
+            "logo": "",
+            "rev": true,
+            "title": "Angular Boot Camp",
+            "url": "https://angularbootcamp.com"
+          },
+          "ab": {
+            "desc": "With Rangle’s Custom Training, you can cover Angular in comprehensive detail, on your premises or theirs. Learn directly from Angular experts who will tailor course material to suit your specific application needs.",
+            "logo": "",
+            "rev": true,
+            "title": "Rangle.io",
+            "url": "http://rangle.io/services/javascript-training/angular2-training/"
+          },
+          "ab3": {
+            "desc": "Trainings & Code Reviews. We help people to get a deep understanding of different technologies through trainings and code reviews. Our services can be arranged online, making it possible to join in from anywhere in the world, or on-site to get the best experience possible.",
+            "logo": "",
+            "rev": true,
+            "title": "Thoughtram",
+            "url": "http://thoughtram.io/"
+          },
+          "jsru": {
+            "desc": "Complete Angular online course. Constantly updating. Real-time webinars with immediate feedback from the teacher.",
+            "logo": "https://learn.javascript.ru/img/sitetoolbar__logo_ru.svg",
+            "rev": true,
+            "title": "Learn Javascript (Russian)",
+            "url": "https://learn.javascript.ru/courses/angular"
+          },
+          "sa200": {
+            "desc": "Free Angular training delivered by SFEIR in France",
+            "rev": true,
+            "title": "SFEIR School (French)",
+            "url": "https://school.sfeir.com/project/sa200/"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/aio/content/marketing/resources.md b/aio/content/marketing/resources.md
deleted file mode 100644
index f204c9f9ba..0000000000
--- a/aio/content/marketing/resources.md
+++ /dev/null
@@ -1,184 +0,0 @@
-@description
-
-
-
-<h2>
-  Victor Savkin's Blog Posts
-</h2>
-
-
-
-<ul>
-
-
-  <li>
-    <a href="http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications">    Managing State in Angular 2 Applications    </a>
-  </li>
-
-
-
-  <li>
-    <a href="http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications">Two Phases of Angular 2 Applications</a>
-  </li>
-
-
-
-  <li>
-    <a href="http://angularjs.blogspot.com/2015/03/forms-in-angular-2.html">Forms in Angular 2</a>
-  </li>
-
-
-
-  <li>
-    <a href="http://victorsavkin.com/post/110170125256/change-detection-in-angular-2">Change detection</a>
-  </li>
-
-
-
-  <li>
-    <a href="http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in">Functional programming </a>
-  </li>
-
-
-
-  <li>
-    <a href="http://victorsavkin.com/post/102965317996/angular-2-bits-unified-dependency-injection">Dependency injection</a>
-  </li>
-
-
-</ul>
-
-
-
-
-<h2>
-  <span class="icon-play-circle-outline"></span> Videos
-</h2>
-
-
-
-<h4>
-  Intro Videos
-</h4>
-
-
-
-<ul>
-
-
-  <li>
-    <a href="https://www.youtube.com/watch?v=uD6Okha_Yj0">Building a Todo App</a> by David East
-  </li>
-
-
-
-  <li>
-    <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 2 Forms</a> by David East
-  </li>
-
-
-</ul>
-
-
-
-<h4>
-  ng-conf
-</h4>
-
-
-
-<ul>
-
-
-  <li>
-    Playlist <a href="https://www.youtube.com/watch?v=QHulaj5ZxbI&index=1&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">of ng-conf 2015 videos</a>.
-  </li>
-
-
-
-  <li>
-    <a href="https://www.youtube.com/watch?v=QHulaj5ZxbI&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Day 1 Keynote</a>: a broad overview of Angular 2, migration, and where we are headed.
-  </li>
-
-
-
-  <li>
-    <a href="https://www.youtube.com/watch?v=-dMBcqwvYA0&index=21&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Day 2 Keynote</a>: Misko and Rado do a deep-dive on Angular 2 details.
-  </li>
-
-
-
-  <li>
-    <a href="https://www.youtube.com/watch?v=AbunztfV5vU&index=6&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Creating Container Components with Web Components in Angular</a>: Kara Erickson &amp; Rachael L Moore.
-  </li>
-
-
-
-  <li>
-    <a href="https://www.youtube.com/watch?v=jvKGQSFQf10&index=31&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">Change Detection Reinvented</a>: Why Angular 2 change detection is fast out of the box and options for developers to make it even faster.
-  </li>
-
-
-</ul>
-
-
-
-<h4>
-  ng-europe
-</h4>
-
-
-
-<ul>
-
-
-  <li>
-    Oct 2014 <a href="https://www.youtube.com/watch?v=lGdnh8QSPPk&list=PLhc_bKwZngxW_ZlY0NkaGkvKpiA_pzcZ-">playlist of ng-europe videos on Angular 2</a> and the future of Angular.
-  </li>
-
-
-</ul>
-
-
-
-
-<h2>
-  <span class="icon-content-copy"></span> API Design Docs &amp; Notes
-</h2>
-
-
-
-<ul>
-
-
-  <li>
-    <a href="https://drive.google.com/open?id=0B7GYXx6a6d8QR3lTT1J3MEpRSlE&authuser=0">Best Practices</a>
-  </li>
-
-
-
-  <li>
-    <a href="https://drive.google.com/open?id=0BxgtL8yFJbacUnUxc3l5aTZrbVk&authuser=0">API Design Docs</a>
-  </li>
-
-
-
-  <li>
-    <a href="https://drive.google.com/open?id=0BxgtL8yFJbacMEZDc2NtWS1VZ1k&authuser=0">Meeting Notes</a>
-  </li>
-
-
-
-  <li>
-    <a href="https://drive.google.com/open?id=0BxgtL8yFJbaceGc2dlhGQnMzYXc&authuser=0">Presentations</a>
-  </li>
-
-
-
-  <li>
-    <a href="http://goo.gl/sj0Nk1">More...</a>
-  </li>
-
-
-</ul>
-
diff --git a/aio/content/marketing/test.html b/aio/content/marketing/test.html
index 9a56e08e02..872c66c45a 100644
--- a/aio/content/marketing/test.html
+++ b/aio/content/marketing/test.html
@@ -1,5 +1,7 @@
 <h1>Test Code Page</h1>
 
+<p>Current location is <current-location></current-location></p>
+
 <h2>&lt;code-tabs&gt;</h2>
 
 <p>No linenums at code-tabs level</p>
@@ -10,7 +12,7 @@
   }
   </code-pane>
   <code-pane title='HTML content file' language='html'>&lt;h1&gt;Heading&lt;/h1&gt;</code-pane>
-  <code-pane title='JSON data file' language='json' class='is-anti-pattern'>{ "key": "value" }</code-pane>
+  <code-pane title='JSON data file' language='json' class='avoid'>{ "key": "value" }</code-pane>
 </code-tabs>
 <p></p>
 
@@ -22,7 +24,7 @@
   }
   </code-pane>
   <code-pane title='HTML content file' language='html'>&lt;h1&gt;Heading&lt;/h1&gt;</code-pane>
-  <code-pane title='JSON data file' language='json' class='is-anti-pattern'>{ "key": "value" }</code-pane>
+  <code-pane title='JSON data file' language='json' class='avoid'>{ "key": "value" }</code-pane>
 </code-tabs>
 <p></p>
 
@@ -34,7 +36,7 @@
   }
   </code-pane>
   <code-pane title='HTML content file' language='html' linenums='true'>&lt;h1&gt;Heading&lt;/h1&gt;</code-pane>
-  <code-pane title='JSON data file' language='json' class='is-anti-pattern'>{ "key": "value" }</code-pane>
+  <code-pane title='JSON data file' language='json' class='avoid'>{ "key": "value" }</code-pane>
 </code-tabs>
 <p></p>
 
@@ -74,7 +76,7 @@
 </code-example>
 
 <p>An "avoid" header on this one.</p>
-<code-example class="is-anti-pattern" title="hero-details.component.ts (Avoid)">
+<code-example class="avoid" title="hero-details.component.ts (Avoid)">
   &lt;hero-details <em>nghost-pmm-5&gt;
     &lt;h2 </em>ngcontent-pmm-5&gt;Mister Fantastic&lt;/h2&gt;
     &lt;hero-team <em>ngcontent-pmm-5 </em>nghost-pmm-6&gt;
@@ -83,6 +85,17 @@
   &lt;/hero-details&gt;
 </code-example>
 
+## Backticked code blocks
+
+```html
+  <hero-details>
+    <h2>Mister Fantastic</h2>
+    <hero-team>
+      <h3>Losing Team</h3>
+    </hero-team>
+  </hero-details>
+```
+
 <h2>&lt;live-example&gt;</h2>
 
 <p>Plain live-example</p>
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
index 44d2895edc..86a0c87f59 100644
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@@ -2,405 +2,449 @@
   "TopBar": [
     {
       "url": "features",
-      "title": "特性"
+      "title": "Features"
     },
     {
       "url": "docs",
-      "title": "文档",
-      "hidden": true
+      "title": "Docs"
     },
     {
       "url": "resources",
-      "title": "资源"
+      "title": "Resources"
     },
     {
       "url": "events",
-      "title": "会议"
+      "title": "Events"
     },
     {
-      "url": "translations/cn/home",
-      "title": "关于中文版"
+      "url": "https://blog.angular.io/",
+      "title": "Blog"
     }
   ],
-  "SideNav": [
+
+  "TopBarNarrow": [
     {
-      "url": "docs",
-      "title": "文档",
-      "tooltip": "Angular 开发文档",
-      "hidden": true
-    },
-    {
-      "title": "快速起步",
-      "tooltip": "Angular 破冰",
+      "title": "About Angular",
       "children": [
         {
-          "url": "guide/learning-angular",
-          "title": "学习 Angular",
-          "tooltip": "为 Angular 新手推荐的学习路径"
-        },
-        {
-          "url": "guide/quickstart",
-          "title": "基本版快速起步",
-          "tooltip": "如何不借助工具开始一个 Angular 项目"
-        },
-        {
-          "url": "guide/cli-quickstart",
-          "title": "CLI 快速起步",
-          "tooltip": "使用 CLI 快速开始一个 Angular 项目"
-        },
-        {
-          "url": "guide/setup",
-          "title": "开发环境",
-          "tooltip": "安装 Angular 《快速起步》种子，更快更有效地在本地开发应用"
-        },
-        {
-          "url": "guide/architecture",
-          "title": "架构概览",
-          "tooltip": "Angular 应用的基本构造块"
-        },
-        {
-          "url": "guide/appmodule",
-          "title": "AppModule: 根模块",
-          "tooltip": "如何在根 \"AppModule\" 中构建和启动应用。"
-        },
-        {
-          "url": "guide/displaying-data",
-          "title": "显示数据",
-          "tooltip": "属性绑定机制把数据显示到用户界面上。"
-        },
-        {
-          "url": "guide/user-input",
-          "title": "用户输入",
-          "tooltip": "用户输入触发 DOM 事件。我们通过事件绑定来监听它们，把更新过的数据导入回我们的组件和 model。"
-        },
-        {
-          "url": "guide/forms",
-          "title": "表单",
-          "tooltip": "表单创建一个有机、有效、引人注目的数据输入体验。Angular 表单协调一组数据绑定控件，跟踪变更，验证输入的有效性，并且显示错误信息。"
-        },
-        {
-          "url": "guide/dependency-injection",
-          "title": "依赖注入",
-          "tooltip": "Angular 的依赖注入系统能够即时地创建和交付所依赖的服务。"
-        },
-        {
-          "url": "tutorial/toh-pt1",
-          "title": "英雄编辑器",
-          "tooltip": "构建一个简单的英雄编辑器"
-        },
-        {
-          "url": "tutorial/toh-pt2",
-          "title": "主从结构",
-          "tooltip": "构建一个主从结构的页面，用于展现英雄列表"
-        },
-        {
-          "url": "tutorial/toh-pt3",
-          "title": "多个组件",
-          "tooltip": "把主从结构的页面重构成多个组件"
-        },
-        {
-          "url": "tutorial/toh-pt4",
-          "title": "服务",
-          "tooltip": "创建一个可复用的服务来调用英雄的数据"
-        },
-        {
-          "url": "tutorial/toh-pt5",
-          "title": "路由",
-          "tooltip": "添加 Angular 组件路由，并且学习在视图之间导航"
-        },
-        {
-          "url": "tutorial/toh-pt6",
-          "title": "HTTP",
-          "tooltip": "把服务和组件改为用 Angular 的 HTTP 服务实现"
-        }
-      ]
-    },
-    {
-      "title": "核心知识",
-      "tooltip": "学习 Angular 的核心知识",
-      "children": [
-        {
-          "title": "Angular 的模块",
-          "tooltip": "Learn how directives modify the layout and behavior of elements.",
-          "children": [
-            {
-              "url": "guide/ngmodule",
-              "title": "Angular 模块",
-              "tooltip": "使用 @NgModule 为应用定义模块"
-            },
-            {
-              "url": "guide/ngmodule-faq",
-              "title": "Angular 模块常见问题",
-              "tooltip": "关于 @NgModule 的常见问题及其答案"
-            }
-          ]
-        },
-        {
-          "url": "guide/component-communication",
-          "title": "组件交互",
-          "tooltip": "在不同的指令和组件之间共享信息"
-        },
-        {
-          "title": "依赖注入",
-          "tooltip": "关于依赖注入的更多知识",
-          "children": [
-            {
-              "url": "guide/cb-dependency-injection",
-              "title": "依赖注入",
-              "tooltip": "关于依赖注入的技巧"
-            },
-            {
-              "url": "guide/hierarchical-dependency-injection",
-              "title": "多级注入器",
-              "tooltip": "Angular 的多级注入体系会建立与组件平行的注入器树"
-            }
-          ]
-        },
-        {
-          "url": "guide/dynamic-component-loader",
-          "title": "动态组件",
-          "tooltip": "动态加载组件"
-        },
-        {
-          "title": "指令",
-          "tooltip": "指令如何修改元素的布局和行为",
-          "children": [
-            {
-              "url": "guide/attribute-directives",
-              "title": "属性型指令",
-              "tooltip": "属性型指令把行为添加到现有元素上。"
-            },
-            {
-              "url": "guide/structural-directives",
-              "title": "结构型指令",
-              "tooltip": "结构型指令可以操纵页面的布局"
-            }
-          ]
-        },
-        {
-          "title": "表单",
-          "tooltip": "关于表单的更多知识",
-          "children": [
-            {
-              "url": "guide/dynamic-form",
-              "title": "动态表单",
-              "tooltip": "使用FormGroup渲染动态表单"
-            },
-            {
-              "url": "guide/form-validation",
-              "title": "表单验证",
-              "tooltip": "验证用户的表单输入"
-            },
-            {
-              "url": "guide/reactive-forms",
-              "title": "响应式表单",
-              "tooltip": "使用FormBuilder、组合数组创建响应式表单。"
-            }
-          ]
-        },
-        {
-          "url": "guide/server-communication",
-          "title": "HTTP 客户端",
-          "tooltip": "通过 HTTP 客户端与远程服务器对话。"
-        },
-        {
-          "url": "guide/lifecycle-hooks",
-          "title": "生命周期钩子",
-          "tooltip": "Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。"
-        },
-        {
-          "url": "guide/pipes",
-          "title": "管道",
-          "tooltip": "管道可以在模板中转换显示的内容。"
-        },
-        {
-          "url": "guide/router",
-          "title": "路由与导航",
-          "tooltip": "揭示如何通过 Angular 路由进行基本的屏幕导航。"
-        },
-        {
-          "url": "guide/template-syntax",
-          "title": "模板语法",
-          "tooltip": "学习如何写模板来显示数据，以及在数据绑定的帮助下响应用户事件"
-        }
-      ]
-    },
-    {
-      "title": "API参考手册",
-      "tooltip": "Angular 中各种类和值的详细信息",
-      "url": "api"
-    },
-    {
-      "title": "其它技术",
-      "tooltip": "其它",
-      "children": [
-        {
-          "url": "guide/aot-compiler",
-          "title": "预（AOT）编译",
-          "tooltip": "为何使用以及如何使用预编译器"
-        },
-        {
-          "url": "guide/animations",
-          "title": "动画",
-          "tooltip": "Angular 动画体系指南"
-        },
-        {
-          "url": "guide/ajs-quick-reference",
-          "title": "从 AngularJS 升级到 Angular",
-          "tooltip": "学习如何把 AngularJS 的概念和技术对应到 Angular 中"
-        },
-        {
-          "url": "guide/component-styles",
-          "title": "组件样式",
-          "tooltip": "学习如何把 CSS 样式应用到组件中"
-        },
-        {
-          "url": "guide/deployment",
-          "title": "发布",
-          "tooltip": "学习如何发布 Angular 应用"
-        },
-        {
-          "url": "guide/i18n",
-          "title": "国际化 (i18n)",
-          "tooltip": "把 Angular 模板中的文本翻译成其它语言"
-        },
-        {
-          "url": "guide/security",
-          "title": "安全",
-          "tooltip": "开发内容安全的 Angular 应用。"
-        },
-        {
-          "title": "环境设置",
-          "tooltip": "本地环境设置的详细信息",
-          "children": [
-            {
-              "url": "guide/setup-systemjs-anatomy",
-              "title": "搭建剖析",
-              "tooltip": "解析 SystemJS 本地开发环境"
-            },
-            {
-              "url": "guide/browser-support",
-              "title": "浏览器支持",
-              "tooltip": "浏览器支持与填充 (Polyfill) 指南"
-            },
-            {
-              "url": "guide/npm-packages",
-              "title": "Npm包",
-              "tooltip": "推荐的 npm 包以及如何指定所依赖的包"
-            },
-            {
-              "url": "guide/typescript-configuration",
-              "title": "TypeScript 配置",
-              "tooltip": "Angular 开发者的 TypeScript 配置"
-            }
-          ]
-        },
-        {
-          "url": "guide/testing",
-          "title": "测试",
-          "tooltip": "测试 Angular 应用的技巧与实践"
-        },
-        {
-          "url": "guide/upgrade",
-          "title": "从 AngularJS 升级",
-          "tooltip": "AngularJS 应用可以逐步升级到 Angular。"
-        },
-        {
-          "url": "guide/ts-to-js",
-          "title": "从 TypeScript 到 JavaScript",
-          "tooltip": "把 TypeScript 格式的例子转成 ES6 和 ES5 JavaScript的"
-        },
-        {
-          "url": "guide/visual-studio-2015",
-          "title": "Visual Studio 2015 快速起步",
-          "tooltip": "在 Visual Studio 2015 中使用快速起步中的文件"
-        },
-        {
-          "url": "guide/webpack",
-          "title": "Webpack 简介",
-          "tooltip": "使用基于 Webpack 的工具创建 Angular 应用"
-        }
-      ]
-    },
-    {
-      "title": "参考手册",
-      "children": [
-        {
-          "url": "guide/change-log",
-          "title": "变更记录",
-          "tooltip": "本文档最近的改进历史"
-        },
-        {
-          "url": "guide/cheatsheet",
-          "title": "速查表",
-          "tooltip": "Angular 编码技术的快速指南"
-        },
-        {
-          "url": "guide/glossary",
-          "title": "词汇表",
-          "tooltip": "Angular 中最重要的词汇的简要定义"
-        },
-        {
-          "url": "guide/style-guide",
-          "title": "风格指南",
-          "tooltip": "写出 Angular 风格的程序"
-        }
-      ]
-    }
-  ],
-  "Footer": [
-    {
-      "title": "资源",
-      "children": [
-        {
-          "url": "about",
-          "title": "关于",
-          "tooltip": "Angular 贡献者"
+          "url": "features",
+          "title": "Features"
         },
         {
           "url": "resources",
-          "title": "资源列表",
-          "tooltip": "Angular 的工具、培训、博客等网上资源"
+          "title": "Resources"
+        },
+        {
+          "url": "events",
+          "title": "Events"
+        },
+        {
+          "url": "https://blog.angular.io/",
+          "title": "Blog"
+        }
+      ]
+    }
+  ],
+
+  "SideNav": [
+    {
+      "url": "docs",
+      "title": "Docs",
+      "tooltip": "Angular Documentation",
+      "hidden": true
+    },
+
+    {
+      "url": "guide/docs-style-guide",
+      "title": "Doc authors style guide",
+      "tooltip": "Style guide for documentation authors",
+      "hidden": true
+    },
+
+    {
+      "url": "guide/quickstart",
+      "title": "Getting Started",
+      "tooltip": "A gentle introduction to Angular."
+    },
+
+    {
+      "title": "Tutorial",
+      "tooltip": "The Tour of Heroes tutorial takes you through the steps of creating an Angular application in TypeScript.",
+      "children": [
+        {
+          "url": "tutorial",
+          "title": "1. Introduction",
+          "tooltip": "Part 1: Introduction to the Tour of Heroes tutorial"
+        },
+        {
+          "url": "tutorial/toh-pt1",
+          "title": "2. The Hero Editor",
+          "tooltip": "Part 2: Build a simple hero editor"
+        },
+        {
+          "url": "tutorial/toh-pt2",
+          "title": "3. Master/Detail",
+          "tooltip": "Part 3: Build a master/detail page with a list of heroes."
+        },
+        {
+          "url": "tutorial/toh-pt3",
+          "title": "4. Multiple Components",
+          "tooltip": "Part 4: Refactor the master/detail view into separate components."
+        },
+        {
+          "url": "tutorial/toh-pt4",
+          "title": "5. Services",
+          "tooltip": "Part 5: Create a reusable service to manage hero data."
+        },
+        {
+          "url": "tutorial/toh-pt5",
+          "title": "6. Routing",
+          "tooltip": "Part 6: Add the Angular router and navigate among the views."
+        },
+        {
+          "url": "tutorial/toh-pt6",
+          "title": "7. HTTP",
+          "tooltip": "Part 7: Use HTTP to retrieve and save hero data."
+        }
+      ]
+    },
+
+    {
+      "title": "Fundamentals",
+      "tooltip": "The fundamentals of Angular",
+      "children": [
+        {
+          "url": "guide/architecture",
+          "title": "Architecture",
+          "tooltip": "The basic building blocks of Angular applications."
+        },
+        {
+          "title": "Template & Data Binding",
+          "tooltip": "Template & Data Binding",
+          "children": [
+            {
+              "url": "guide/displaying-data",
+              "title": "Displaying Data",
+              "tooltip": "Property binding helps show app data in the UI."
+            },
+            {
+              "url": "guide/template-syntax",
+              "title": "Template Syntax",
+              "tooltip": "Learn how to write templates that display data and consume user events with the help of data binding."
+            },
+            {
+              "url": "guide/lifecycle-hooks",
+              "title": "Lifecycle Hooks",
+              "tooltip": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them."
+            },
+            {
+              "url": "guide/component-interaction",
+              "title": "Component Interaction",
+              "tooltip": "Share information between different directives and components."
+            },
+            {
+              "url": "guide/component-styles",
+              "title": "Component Styles",
+              "tooltip": "Add CSS styles that are specific to a component."
+            },
+            {
+              "url": "guide/dynamic-component-loader",
+              "title": "Dynamic Components",
+              "tooltip": "Load components dynamically."
+            },
+            {
+              "url": "guide/attribute-directives",
+              "title": "Attribute Directives",
+              "tooltip": "Attribute directives attach behavior to elements."
+            },
+            {
+              "url": "guide/structural-directives",
+              "title": "Structural Directives",
+              "tooltip": "Structural directives manipulate the layout of the page."
+            },
+            {
+              "url": "guide/pipes",
+              "title": "Pipes",
+              "tooltip": "Pipes transform displayed values within a template."
+            },
+            {
+              "url": "guide/animations",
+              "title": "Animations",
+              "tooltip": "A guide to Angular's animation system."
+            }
+          ]
+        },
+        {
+          "title": "Forms",
+          "tooltip": "Angular Forms",
+          "children": [
+            {
+              "url": "guide/user-input",
+              "title": "User Input",
+              "tooltip": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models."
+            },
+            {
+              "url": "guide/forms",
+              "title": "Template-driven Forms",
+              "tooltip": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors."
+            },
+            {
+              "url": "guide/form-validation",
+              "title": "Form Validation",
+              "tooltip": "Validate user's form entries."
+            },
+            {
+              "url": "guide/reactive-forms",
+              "title": "Reactive Forms",
+              "tooltip": "Create a reactive form using FormBuilder, groups, and arrays."
+            },
+            {
+              "url": "guide/dynamic-form",
+              "title": "Dynamic forms",
+              "tooltip": "Render dynamic forms with FormGroup."
+            }
+          ]
+        },
+
+        {
+          "url": "guide/bootstrapping",
+          "title": "Bootstrapping",
+          "tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
+        },
+
+        {
+          "title": "NgModules",
+          "tooltip": "Learn how to use NgModules to make your apps efficient.",
+          "children": [
+            {
+              "url": "guide/ngmodule",
+              "title": "NgModules",
+              "tooltip": "Define application modules with @NgModule."
+            },
+            {
+              "url": "guide/ngmodule-faq",
+              "title": "NgModule FAQs",
+              "tooltip": "Answers to frequently asked questions about @NgModule."
+            }
+        ]},
+
+        {
+          "title": "Dependency Injection",
+          "tooltip": "Dependency Injection: creating and injecting services",
+          "children": [
+            {
+              "url": "guide/dependency-injection",
+              "title": "Dependency Injection",
+              "tooltip": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\"."
+            },
+            {
+              "url": "guide/hierarchical-dependency-injection",
+              "title": "Hierarchical Injectors",
+              "tooltip": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
+            },
+            {
+              "url": "guide/dependency-injection-in-action",
+              "title": "DI in Action",
+              "tooltip": "Techniques for Dependency Injection."
+            }
+          ]
+        },
+
+        {
+          "url": "guide/http",
+          "title": "HttpClient",
+          "tooltip": "Use HTTP to talk to a remote server."
+        },
+        {
+          "url": "guide/router",
+          "title": "Routing & Navigation",
+          "tooltip": "Discover the basics of screen navigation with the Angular Router."
+        },
+        {
+          "url": "guide/testing",
+          "title": "Testing",
+          "tooltip": "Techniques and practices for testing an Angular app."
+        },
+        {
+          "url": "guide/cheatsheet",
+          "title": "Cheat Sheet",
+          "tooltip": "A quick guide to common Angular coding techniques."
+        }
+    ]},
+
+    {
+      "title": "Techniques",
+      "tooltip": "Techniques for putting Angular to work in your environment",
+      "children": [
+
+        {
+          "url": "guide/i18n",
+          "title": "Internationalization (i18n)",
+          "tooltip": "Translate the app's template text into multiple languages."
+        },
+        {
+          "url": "guide/language-service",
+          "title": "Language Service",
+          "tooltip": "Use Angular Language Service to speed up dev time."
+        },
+        {
+          "url": "guide/security",
+          "title": "Security",
+          "tooltip": "Developing for content security in Angular applications."
+        },
+        {
+          "url": "guide/ts-to-js",
+          "title": "TypeScript to JavaScript",
+          "tooltip": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript."
+        },
+        {
+          "title": "Setup & Deployment",
+          "tooltip": "Setup and Deployment",
+          "children": [
+            {
+              "url": "guide/setup",
+              "title": "Setup for local development",
+              "tooltip": "Install the Angular QuickStart seed for faster, more efficient development on your machine."
+            },
+            {
+              "url": "guide/setup-systemjs-anatomy",
+              "title": "Anatomy of the Setup",
+              "tooltip": "Inside the local development environment for SystemJS."
+            },
+            {
+              "url": "guide/browser-support",
+              "title": "Browser Support",
+              "tooltip": "Browser support and polyfills guide."
+            },
+            {
+              "url": "guide/npm-packages",
+              "title": "Npm Packages",
+              "tooltip": "Recommended npm packages, and how to specify package dependencies."
+            },
+
+            {
+              "url": "guide/typescript-configuration",
+              "title": "TypeScript Configuration",
+              "tooltip": "TypeScript configuration for Angular developers."
+            },
+            {
+              "url": "guide/aot-compiler",
+              "title": "Ahead-of-Time Compilation",
+              "tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler."
+            },
+            {
+              "url": "guide/deployment",
+              "title": "Deployment",
+              "tooltip": "Learn how to deploy your Angular app."
+            }
+          ]
+        },
+
+        {
+          "title": "Upgrading",
+          "tooltip": "Incrementally upgrade an AngularJS application to Angular.",
+          "children": [
+            {
+              "url": "guide/upgrade",
+              "title": "Upgrading from AngularJS",
+              "tooltip": "Incrementally upgrade an AngularJS application to Angular."
+            },
+            {
+              "url": "guide/ajs-quick-reference",
+              "title": "Upgrade Cheatsheet",
+              "tooltip": "Learn how AngularJS concepts and techniques map to Angular."
+            }
+          ]
+        },
+
+        {
+          "url": "guide/visual-studio-2015",
+          "title": "Visual Studio 2015 QuickStart",
+          "tooltip": "Use Visual Studio 2015 with the QuickStart files."
+        },
+        {
+          "url": "guide/styleguide",
+          "title": "Style Guide",
+          "tooltip": "Write Angular with style."
+        },
+        {
+          "url": "guide/glossary",
+          "title": "Glossary",
+          "tooltip": "Brief definitions of the most important words in the Angular vocabulary."
+        }
+      ]
+    },
+
+    {
+      "title": "API",
+      "tooltip": "Details of the Angular classes and values.",
+      "url": "api"
+    }
+  ],
+
+  "Footer": [
+    {
+      "title": "Resources",
+      "children": [
+        {
+          "url": "about",
+          "title": "About",
+          "tooltip": "Angular contributors."
+        },
+        {
+          "url": "resources",
+          "title": "Resource Listing",
+          "tooltip": "Angular tools, training, and blogs from around the web."
         },
         {
           "url": "presskit",
-          "title": "宣传资料",
-          "tooltip": "我们的联系方式、LOGO和品牌"
+          "title": "Press Kit",
+          "tooltip": "Press contacts, logos, and branding."
+        },
+        {
+          "url": "https://blog.angularjs.org/",
+          "title": "Blog",
+          "tooltip": "Angular Blog"
         }
       ]
     },
     {
-      "title": "帮助",
+      "title": "Help",
       "children": [
         {
           "url": "http://stackoverflow.com/questions/tagged/angular2",
           "title": "Stack Overflow",
-          "tooltip": "Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题"
+          "tooltip": "Stack Overflow: where the community answers your technical Angular questions."
         },
         {
           "url": "https://gitter.im/angular/angular",
           "title": "Gitter",
-          "tooltip": "和老鸟聊 Angular"
+          "tooltip": "Chat about Angular with other birds of a feather."
         },
         {
           "url": "https://github.com/angular/angular/issues",
-          "title": "报告问题",
-          "tooltip": "在 github 上报告问题和建议"
+          "title": "Report Issues",
+          "tooltip": "Post issues and suggestions on github."
+        },
+        {
+          "url": "https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md",
+          "title": "Code of Conduct",
+          "tooltip": "Treating each other with respect."
         }
       ]
     },
     {
-      "title": "社区",
+      "title": "Community",
       "children": [
         {
           "url": "events",
-          "title": "活动",
+          "title": "Events",
           "tooltip": "Post issues and suggestions on github."
         },
         {
           "url": "http://www.meetup.com/topics/angularjs/",
-          "title": "聚会",
-          "tooltip": "参加聚会，向别的开发人员学习"
+          "title": "Meetups",
+          "tooltip": "Attend a meetup and learn from fellow developers."
         },
         {
           "url": "https://twitter.com/angular",
@@ -414,8 +458,8 @@
         },
         {
           "url": "contribute",
-          "title": "做贡献",
-          "tooltip": "向 Angular 做贡献"
+          "title": "Contribute",
+          "tooltip": "Contribute to Angular"
         }
       ]
     },
@@ -428,5 +472,11 @@
         }
       ]
     }
+  ],
+
+  "docVersions": [
+    { "title": "v2", "url": "https://v2.angular.io" },
+    { "title": "AngularDart", "url": "https://webdev.dartlang.org/angular" }
+
   ]
 }
diff --git a/aio/content/tutorial/index.md b/aio/content/tutorial/index.md
index 5154887fc6..a742756b77 100644
--- a/aio/content/tutorial/index.md
+++ b/aio/content/tutorial/index.md
@@ -1,12 +1,6 @@
-@title
-教程: 英雄指南
-
-@intro
-英雄指南教程带我们一步步使用 TypeScript 创建 Angular 应用。
-
-@description
-
+# Tutorial: Tour of Heroes
 
+# 教程：英雄指南
 
 The grand plan for this tutorial is to build an app that helps a staffing agency manage its stable of heroes.
 
@@ -46,14 +40,14 @@ to pages with greater depth.
 完成本教程后，我们将学习足够的 Angular 核心技术，并确信 Angular 确实能做到我们需要它做的。
   我们将覆盖大量入门级知识，同时我们也会看到大量链接，指向更深入的章节。
 
-When you're done with this tutorial, the app will look like this <live-example name="toh-6"></live-example>.
+When you're done with this tutorial, the app will look like this <live-example name="toh-pt6"></live-example>.
 
 
 当完成这个教程时，应用运行起来是这样的：<live-example name="toh-6"></live-example>。
 
 
 
-## The end game
+## What you'll build
 
 ## 游戏的终点
 
@@ -63,13 +57,13 @@ view and the most heroic heroes:
 下面是本教程关于界面的构想：开始是“Dashboard（仪表盘）”视图，来展示我们最勇敢的英雄。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/toh/heroes-dashboard-1.png' alt="英雄仪表盘的输出"></img>
+<figure>
+  <img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="英雄仪表盘的输出">
 </figure>
 
 
 
-You can click the two links above the dashboard ("Dashboard" and "Heroes") 
+You can click the two links above the dashboard ("Dashboard" and "Heroes")
 to navigate between this Dashboard view and a Heroes view.
 
 仪表盘顶部中有两个链接：“Dashboard（仪表盘）”和“Heroes（英雄列表）”。
@@ -81,8 +75,8 @@ where you can change the hero's name.
 当我们点击仪表盘上名叫“Magneta”的英雄时，路由将把我们带到这个英雄的详情页，在这里，我们可以修改英雄的名字。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/toh/hero-details-1.png' alt="英雄详情的输出"></img>
+<figure>
+  <img src='generated/images/guide/toh/hero-details-1.png' alt="英雄详情的输出">
 </figure>
 
 
@@ -96,8 +90,8 @@ If you click "Heroes," the app displays the "Heroes" master list view.
 如果我们点击“Heroes（英雄列表）”链接，应用将把我们带到“英雄”主列表视图。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/toh/heroes-list-2.png' alt="英雄列表的输出"></img>
+<figure>
+  <img src='generated/images/guide/toh/heroes-list-2.png' alt="英雄列表的输出">
 </figure>
 
 
@@ -116,8 +110,8 @@ The following diagram captures all of the navigation options.
 下面这张图汇总了我们所有可能的导航路径。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/toh/nav-diagram.png' alt="查看导航"></img>
+<figure>
+  <img src='generated/images/guide/toh/nav-diagram.png' alt="查看导航">
 </figure>
 
 
@@ -127,8 +121,8 @@ Here's the app in action:
 下图演示了我们应用中的所有操作。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/toh/toh-anim.gif' alt="英雄指南的所有动作"></img>
+<figure>
+  <img src='generated/images/guide/toh/toh-anim.gif' alt="英雄指南的所有动作">
 </figure>
 
 
@@ -147,4 +141,8 @@ met in many applications. Everything has a reason.
 
 Along the way, you'll become familiar with many of the core fundamentals of Angular.
 
-这一路上，我们将遇到很多 Angular 核心原理。
\ No newline at end of file
+这一路上，我们将遇到很多 Angular 核心原理。
+
+// TODO: Translate
+
+Start now by building a simple [hero editor](tutorial/toh-pt1 "The Hero Editor").
diff --git a/aio/content/tutorial/toh-pt1.md b/aio/content/tutorial/toh-pt1.md
index 67568e2cff..abf471f4bb 100644
--- a/aio/content/tutorial/toh-pt1.md
+++ b/aio/content/tutorial/toh-pt1.md
@@ -133,7 +133,7 @@ for a hero named "Windstorm."
 往`AppComponent`中添加两个属性：`title`属性用来表示应用的名字，而`hero`属性用来表示名叫“Windstorm”的英雄。
 
 
-<code-example path="toh-1/app/app.component.1.ts" region="app-component-1" title="app.component.ts (AppComponent class)" linenums="false">
+<code-example path="toh-pt1/app/app.component.1.ts" region="app-component-1" title="app.component.ts (AppComponent class)" linenums="false">
 
 </code-example>
 
@@ -144,7 +144,7 @@ Now update the template in the `@Component` decorator with data bindings to thes
 下面，更新`@Component`装饰器中指定的模板，为这些新属性建立数据绑定。
 
 
-<code-example path="toh-1/app/app.component.1.ts" region="show-hero" title="app.component.ts (@Component)" linenums="false">
+<code-example path="toh-pt1/app/app.component.1.ts" region="show-hero" title="app.component.ts (@Component)" linenums="false">
 
 </code-example>
 
@@ -191,7 +191,7 @@ Add these properties near the top of the `app.component.ts` file, just below the
 现在，把下列代码放在`app.component.ts`的顶部，仅次于 import 语句。
 
 
-<code-example path="toh-1/src/app/app.component.ts" region="hero-class-1" title="src/app/app.component.ts (Hero class)" linenums="false">
+<code-example path="toh-pt1/src/app/app.component.ts" region="hero-class-1" title="src/app/app.component.ts (Hero class)" linenums="false">
 
 </code-example>
 
@@ -204,7 +204,7 @@ then initialize it with an `id` of `1` and the name `Windstorm`.
 然后以`1`为 id、以 “Windstorm” 为名字，初始化它。
 
 
-<code-example path="toh-1/src/app/app.component.ts" region="hero-property-1" title="src/app/app.component.ts (hero property)" linenums="false">
+<code-example path="toh-pt1/src/app/app.component.ts" region="hero-property-1" title="src/app/app.component.ts (hero property)" linenums="false">
 
 </code-example>
 
@@ -216,7 +216,7 @@ update the binding in the template to refer to the hero's `name` property.
 我们把`hero`从一个字符串换成了对象，所以也得更新模板中的绑定表达式，来引用`hero`的`name`属性。
 
 
-<code-example path="toh-1/app/app.component.1.ts" region="show-hero-2" title="toh-1/app/app.component.ts">
+<code-example path="toh-pt1/app/app.component.1.ts" region="show-hero-2" title="src/app/app.component.ts">
 
 </code-example>
 
@@ -246,7 +246,7 @@ thanks to the <i>template literals</i> feature in ES2015 and TypeScript. For mor
 
 
 
-<code-example path="toh-1/app/app.component.1.ts" region="multi-line-strings" title="app.component.ts (AppComponent's template)" linenums="false">
+<code-example path="toh-pt1/app/app.component.1.ts" region="multi-line-strings" title="app.component.ts (AppComponent's template)" linenums="false">
 
 </code-example>
 
@@ -277,7 +277,7 @@ Refactor the hero name in the template so it looks like this:
 把模板中的英雄名字重构成这样：
 
 
-<code-example path="toh-1/app/app.component.1.ts" region="name-input" title="toh-1/app/app.component.ts" linenums="false">
+<code-example path="toh-pt1/app/app.component.1.ts" region="name-input" title="src/app/app.component.ts" linenums="false">
 
 </code-example>
 
@@ -322,7 +322,7 @@ The updated `AppModule` looks like this:
 修改后的`AppModule`是这样的：
 
 
-<code-example path="toh-1/src/app/app.module.ts" title="app.module.ts (FormsModule import)">
+<code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts (FormsModule import)">
 
 </code-example>
 
@@ -388,7 +388,7 @@ Here's the complete `app.component.ts` as it stands now:
 完整的`app.component.ts`是这样的：
 
 
-<code-example path="toh-1/src/app/app.component.ts" title="src/app/app.component.ts">
+<code-example path="toh-pt1/src/app/app.component.ts" title="src/app/app.component.ts">
 
 </code-example>
 
@@ -399,10 +399,10 @@ Here's the complete `app.component.ts` as it stands now:
 
 ## 前方的路
 
-In the [next tutorial page](tutorial/toh-pt2), you'll build on the Tour of Heroes app to display a list of heroes.
+In the [next tutorial page](tutorial/toh-pt2  "Master/Detail"), you'll build on the Tour of Heroes app to display a list of heroes.
 You'll also allow the user to select heroes and display their details.
 You'll learn more about how to retrieve lists and bind them to the template.
 
 在[教程的下一章](tutorial/toh-pt2)，我们将在这个《英雄指南》中显示一个英雄列表。
 我们将允许允许用户选择一个英雄，并且显示它/她的详情。
-我们还将学会如何获取列表以及将它们绑定到模板中。
\ No newline at end of file
+我们还将学会如何获取列表以及将它们绑定到模板中。
diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md
index 04e7858d95..d18e585b84 100644
--- a/aio/content/tutorial/toh-pt2.md
+++ b/aio/content/tutorial/toh-pt2.md
@@ -141,7 +141,7 @@ Create an array of ten heroes.
 我们先创建一个由十位英雄组成的数组。
 
 
-<code-example path="toh-2/src/app/app.component.ts" region="hero-array" title="src/app/app.component.ts (hero array)">
+<code-example path="toh-pt2/src/app/app.component.ts" region="hero-array" title="src/app/app.component.ts (hero array)">
 
 </code-example>
 
@@ -163,7 +163,7 @@ Create a public property in `AppComponent` that exposes the heroes for binding.
 我们在`AppComponent`上创建一个公共属性，用来暴露这些英雄，以供绑定。
 
 
-<code-example path="toh-2/src/app/app.component.1.html" region="hero-array-1" title="app.component.ts (hero array property)">
+<code-example path="toh-pt2/src/app/app.component.1.html" region="hero-array-1" title="app.component.ts (hero array property)">
 
 </code-example>
 
@@ -199,7 +199,7 @@ insert the following chunk of HTML below the title and above the hero details.
 那就在标题和英雄详情之间，插入下面这段 HTML 代码。
 
 
-<code-example path="toh-2/src/app/app.component.1.html" region="heroes-template-1" title="app.component.ts (heroes template)" linenums="false">
+<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-template-1" title="app.component.ts (heroes template)" linenums="false">
 
 </code-example>
 
@@ -223,7 +223,7 @@ Modify the `<li>` tag by adding the built-in directive `*ngFor`.
 首先，修改`<li>`标签，往上添加内置指令`*ngFor`。
 
 
-<code-example path="toh-2/src/app/app.component.1.html" region="heroes-ngfor-1" title="app.component.ts (ngFor)">
+<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-ngfor-1" title="app.component.ts (ngFor)">
 
 </code-example>
 
@@ -270,7 +270,7 @@ that uses the `hero` template variable to display the hero's properties.
 接着，我们在`<li>`标签中插入一些内容，以便使用模板变量`hero`来显示英雄的属性。
 
 
-<code-example path="toh-2/src/app/app.component.1.html" region="ng-for" title="app.component.ts (ngFor template)" linenums="false">
+<code-example path="toh-pt2/src/app/app.component.1.html" region="ng-for" title="app.component.ts (ngFor template)" linenums="false">
 
 </code-example>
 
@@ -294,7 +294,7 @@ to the following CSS classes:
 要想给我们的组件添加一些样式，请把`@Component`装饰器的`styles`属性设置为下列 CSS 类：
 
 
-<code-example path="toh-2/src/app/app.component.ts" region="styles" title="src/app/app.component.ts (styles)" linenums="false">
+<code-example path="toh-pt2/src/app/app.component.ts" region="styles" title="src/app/app.component.ts (styles)" linenums="false">
 
 </code-example>
 
@@ -319,7 +319,7 @@ The template for displaying heroes should look like this:
 用于显示英雄们的模板应该是这样的：
 
 
-<code-example path="toh-2/src/app/app.component.1.html" region="heroes-styled" title="src/app/app.component.ts (styled heroes)" linenums="false">
+<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-styled" title="src/app/app.component.ts (styled heroes)" linenums="false">
 
 </code-example>
 
@@ -356,7 +356,7 @@ Add a click event binding to the `<li>` like this:
 我们再往`<li>`元素上插入一句点击事件的绑定代码：  
 
 
-<code-example path="toh-2/src/app/app.component.1.html" region="selectedHero-click" title="app.component.ts (template excerpt)" linenums="false">
+<code-example path="toh-pt2/src/app/app.component.1.html" region="selectedHero-click" title="app.component.ts (template excerpt)" linenums="false">
 
 </code-example>
 
@@ -402,7 +402,7 @@ So replace the `hero` property with this simple `selectedHero` property:
 所以我们要把`hero`属性**替换**成`selectedHero`属性。
 
 
-<code-example path="toh-2/src/app/app.component.ts" region="selected-hero" title="src/app/app.component.ts (selectedHero)">
+<code-example path="toh-pt2/src/app/app.component.ts" region="selected-hero" title="src/app/app.component.ts (selectedHero)">
 
 </code-example>
 
@@ -418,7 +418,7 @@ Add an `onSelect()` method that sets the `selectedHero` property to the `hero` t
 现在，**添加一个`onSelect`方法**，用于将用户点击的英雄赋给`selectedHero`属性。
 
 
-<code-example path="toh-2/src/app/app.component.ts" region="on-select" title="src/app/app.component.ts (onSelect)" linenums="false">
+<code-example path="toh-pt2/src/app/app.component.ts" region="on-select" title="src/app/app.component.ts (onSelect)" linenums="false">
 
 </code-example>
 
@@ -431,7 +431,7 @@ Bind to the new `selectedHero` property instead as follows:
 我们这就修改模板，让它绑定到新的`selectedHero`属性。  
 
 
-<code-example path="toh-2/src/app/app.component.1.html" region="selectedHero-details" title="app.component.ts (template excerpt)" linenums="false">
+<code-example path="toh-pt2/src/app/app.component.1.html" region="selectedHero-details" title="app.component.ts (template excerpt)" linenums="false">
 
 </code-example>
 
@@ -470,7 +470,7 @@ Then add the `ngIf` built-in directive and set it to the `selectedHero` property
     然后，添加一个`ngIf`内置指令，把`ngIf`的值设置为组件的`selectedHero`属性。
 
 
-<code-example path="toh-2/src/app/app.component.1.html" region="ng-if" title="src/app/app.component.ts (ngIf)" linenums="false">
+<code-example path="toh-pt2/src/app/app.component.1.html" region="ng-if" title="src/app/app.component.ts (ngIf)" linenums="false">
 
 </code-example>
 
@@ -543,8 +543,8 @@ like this:
 例如，当用户点击“Magneta”时，它应该使用不一样的醒目的背景色。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/toh/heroes-list-selected.png' alt="选中的英雄"></img>
+<figure>
+  <img src='generated/images/guide/toh/heroes-list-selected.png' alt="选中的英雄">
 </figure>
 
 
@@ -554,7 +554,7 @@ In the template, add the following `[class.selected]` binding to  the `<li>`:
 在这个模板中，往`<li>`上添加一个`[class.selected]`绑定：
 
 
-<code-example path="toh-2/src/app/app.component.1.html" region="class-selected-1" title="app.component.ts (setting the CSS class)" linenums="false">
+<code-example path="toh-pt2/src/app/app.component.1.html" region="class-selected-1" title="app.component.ts (setting the CSS class)" linenums="false">
 
 </code-example>
 
@@ -583,7 +583,7 @@ Read more about the `[class]` binding in the [Template Syntax](guide/template-sy
 The final version of the `<li>` looks like this:
 
 
-<code-example path="toh-2/src/app/app.component.1.html" region="class-selected-2" title="app.component.ts (styling each hero)" linenums="false">
+<code-example path="toh-pt2/src/app/app.component.1.html" region="class-selected-2" title="app.component.ts (styling each hero)" linenums="false">
 
 </code-example>
 
@@ -595,8 +595,8 @@ After clicking "Magneta", the list should look like this:
 我们选中英雄 Magneta，通过背景色的变化，它被清晰的标记出来。
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/toh/heroes-list-1.png' alt="英雄列表应用的输出"></img>
+<figure>
+  <img src='generated/images/guide/toh/heroes-list-1.png' alt="英雄列表应用的输出">
 </figure>
 
 
@@ -606,7 +606,7 @@ Here's the complete `app.component.ts` as of now:
 完整的`app.component.ts`文件如下：
 
 
-<code-example path="toh-2/src/app/app.component.ts" title="src/app/app.component.ts">
+<code-example path="toh-pt2/src/app/app.component.ts" title="src/app/app.component.ts">
 
 </code-example>
 
@@ -633,20 +633,14 @@ Here's what you achieved in this page:
 
   我们学会了如何在组件模板中使用内置的`ngIf`和`ngFor`指令
 
-Run the <live-example></live-example> for this part.
+## The road ahead
 
-运行这部分的<live-example></live-example>。
+## 前方的路
 
-### The Road Ahead
-
-### 前方的路
-
-Our Tour of Heroes has grown, but it’s far from complete.
-We can't put the entire app into a single component.
-We need to break it up into sub-components and teach them to work together
-as we learn in the [next chapter](tutorial/toh-pt3).
+You've expanded the Tour of Heroes app, but it's far from complete.
+An app shouldn't be one monolithic component.
+In the [next page](tutorial/toh-pt3 "Multiple Components"), you'll split the app into subcomponents and make them work together.
 
 我们的《英雄指南》长大了，但还远远不够完善。
 我们显然不能把整个应用都放进一个组件中。
-我们需要把它拆分成一系列子组件，然后教它们协同工作，
-就像我们将在[下一章](tutorial/toh-pt3)学到的那样。
\ No newline at end of file
+我们将在[下一章](tutorial/toh-pt3)把它拆分成一系列子组件，然后教它们协同工作。
\ No newline at end of file
diff --git a/aio/content/tutorial/toh-pt3.md b/aio/content/tutorial/toh-pt3.md
index f3b3109b36..c07a6b46a8 100644
--- a/aio/content/tutorial/toh-pt3.md
+++ b/aio/content/tutorial/toh-pt3.md
@@ -124,7 +124,7 @@ This file will hold the new `HeroDetailComponent`.
 往`app/`文件夹下添加一个名叫`hero-detail.component.ts`的文件。这个文件中会存放这个新的`HeroDetailComponent`。
 
 The file and component names follow the standard described in the Angular
-[style guide](guide/style-guide#naming).
+[style guide](guide/styleguide#naming).
 
 文件名和组件名遵循[风格指南](guide/style-guide#naming)中的标准方式。
 
@@ -146,7 +146,7 @@ Start writing the `HeroDetailComponent` as follows:
 `HeroDetailComponent`的代码如下：
 
 
-<code-example path="toh-3/app/hero-detail.component.1.ts" region="v1" title="app/hero-detail.component.ts (initial version)" linenums="false">
+<code-example path="toh-pt3/app/hero-detail.component.1.ts" region="v1" title="app/hero-detail.component.ts (initial version)" linenums="false">
 
 </code-example>
 
@@ -194,7 +194,7 @@ When you're done, the new template should look like this:
 这些完成之后，新的模板是这样的：
 
 
-<code-example path="toh-3/src/app/hero-detail.component.ts" region="template" title="src/app/hero-detail.component.ts (template)" linenums="false">
+<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="template" title="src/app/hero-detail.component.ts (template)" linenums="false">
 
 </code-example>
 
@@ -211,7 +211,7 @@ Add that property to the `HeroDetailComponent` class like this:
 把这个属性添加到`HeroDetailComponent`类上，就像这样：
 
 
-<code-example path="toh-3/app/hero-detail.component.1.ts" region="hero" title="src/app/hero-detail.component.ts (hero property)">
+<code-example path="toh-pt3/app/hero-detail.component.1.ts" region="hero" title="src/app/hero-detail.component.ts (hero property)">
 
 </code-example>
 
@@ -220,7 +220,7 @@ Add that property to the `HeroDetailComponent` class like this:
 The `hero` property is typed as an instance of `Hero`.
 The `Hero` class is still in the `app.component.ts` file.
 Now there are two components that need to reference the `Hero` class.
-The Angular [style guide](guide/style-guide#rule-of-one "Style guide: rule of one") recommends one class per file anyway.
+The Angular [style guide](guide/styleguide#rule-of-one "Style guide: rule of one") recommends one class per file anyway.
 
 `hero`属性的类型是`Hero`。
 `Hero`类仍然在`app.component.ts`文件中。
@@ -232,7 +232,7 @@ Move the `Hero` class from `app.component.ts` to its own `hero.ts` file.
 因此我们要把`Hero`类从`app.component.ts`移到它自己的`hero.ts`文件中：
 
 
-<code-example path="toh-3/src/app/hero.ts" title="src/app/hero.ts" linenums="false">
+<code-example path="toh-pt3/src/app/hero.ts" title="src/app/hero.ts" linenums="false">
 
 </code-example>
 
@@ -245,7 +245,7 @@ Add the following `import` statement near the top of _both_ the `app.component.t
 把下列`import`语句添加到`app.component.ts`和`hero-detail.component.ts`文件的顶部。
 
 
-<code-example path="toh-3/app/hero-detail.component.1.ts" region="hero-import" title="toh-3/app/hero-detail.component.ts">
+<code-example path="toh-pt3/app/hero-detail.component.1.ts" region="hero-import" title="src/app/hero-detail.component.ts">
 
 </code-example>
 
@@ -266,7 +266,7 @@ The binding will look like this:
 这种绑定是这样的：
 
 
-<code-example path="toh-3/app/app.component.1.html" region="hero-detail-binding" title="toh-3/app/app.component.html" linenums="false">
+<code-example path="toh-pt3/app/app.component.1.html" region="hero-detail-binding" title="src/app/app.component.html" linenums="false">
 
 </code-example>
 
@@ -285,7 +285,7 @@ First, amend the `@angular/core` import statement to include the `Input` symbol.
 首先，修改`@angular/core`导入语句，使其包含符号`Input`。
 
 
-<code-example path="toh-3/src/app/hero-detail.component.ts" region="import-input" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="import-input" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -297,7 +297,7 @@ preceding it with the `@Input` decorator that you imported earlier.
 然后，通过在`hero`属性前面加上`@Input`装饰器，来表明它是一个输入属性。
 
 
-<code-example path="toh-3/src/app/hero-detail.component.ts" region="hero" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="hero" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -322,7 +322,7 @@ That's it. The `hero` property is the only thing in the `HeroDetailComponent` cl
 现在，`hero`属性是`HeroDetailComponent`类中唯一的东西。
 
 
-<code-example path="toh-3/src/app/hero-detail.component.ts" region="class" title="toh-3/src/app/hero-detail.component.ts" linenums="false">
+<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="class" title="src/src/app/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
@@ -337,7 +337,7 @@ Here's the complete `HeroDetailComponent`.
 下面是完整的`HeroDetailComponent`：
 
 
-<code-example path="toh-3/src/app/hero-detail.component.ts" title="src/app/hero-detail.component.ts">
+<code-example path="toh-pt3/src/app/hero-detail.component.ts" title="src/app/hero-detail.component.ts">
 
 </code-example>
 
@@ -348,7 +348,7 @@ Here's the complete `HeroDetailComponent`.
 
 ## 在`AppModule`中声明`HeroDetailComponent`
 
-Every component must be declared in one&mdash;and only one&mdash;Angular module.
+Every component must be declared in one&mdash;and only one&mdash;NgModule.
 
 每个组件都必须在一个（且只有一个）Angular模块中声明。
 
@@ -357,7 +357,7 @@ Open `app.module.ts` in your editor and import the `HeroDetailComponent` so you
 打开`app.module.ts`并且导入`HeroDetailComponent`，以便我们可以引用它。
 
 
-<code-example path="toh-3/src/app/app.module.ts" region="hero-detail-import" title="src/app/app.module.ts">
+<code-example path="toh-pt3/src/app/app.module.ts" region="hero-detail-import" title="src/app/app.module.ts">
 
 </code-example>
 
@@ -368,7 +368,7 @@ Add `HeroDetailComponent` to the module's `declarations` array.
 把`HeroDetailComponent`添加到该模块的`declarations`数组中。
 
 
-<code-example path="toh-3/src/app/app.module.ts" region="declarations" title="src/app/app.module.ts" linenums="false">
+<code-example path="toh-pt3/src/app/app.module.ts" region="declarations" title="src/app/app.module.ts" linenums="false">
 
 </code-example>
 
@@ -387,7 +387,7 @@ This module declares only the two application components, `AppComponent` and `He
 
 
 
-Read more about Angular modules in the [NgModules](guide/ngmodule "Angular Modules (NgModule)") guide.
+Read more about NgModules in the [NgModules](guide/ngmodule "NgModules") guide.
 
 要了解关于Angular模块的更多知识，参见[Angular模块](guide/ngmodule "Angular Modules (NgModule)")页。
 
@@ -432,7 +432,7 @@ to the `hero` property of the `HeroDetailComponent`.
 协调主视图`AppComponent`与`HeroDetailComponent`的方式是把`AppComponent`的`selectedHero`属性绑定到`HeroDetailComponent`的`hero`属性上。
 
 
-<code-example path="toh-3/app/app.component.1.html" region="hero-detail-binding" title="app.component.ts (excerpt)" linenums="false">
+<code-example path="toh-pt3/app/app.component.1.html" region="hero-detail-binding" title="app.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -447,7 +447,7 @@ The revised `AppComponent` template should look like this:
 修改后的`AppComponent`模板是这样的：
 
 
-<code-example path="toh-3/src/app/app.component.ts" region="hero-detail-template" title="app.component.ts (excerpt)" linenums="false">
+<code-example path="toh-pt3/src/app/app.component.ts" region="hero-detail-template" title="app.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -576,19 +576,19 @@ Here are the code files discussed in this page.
 
 <code-tabs>
 
-  <code-pane title="src/app/hero-detail.component.ts" path="toh-3/src/app/hero-detail.component.ts">
+  <code-pane title="src/app/hero-detail.component.ts" path="toh-pt3/src/app/hero-detail.component.ts">
 
   </code-pane>
 
-  <code-pane title="src/app/app.component.ts" path="toh-3/src/app/app.component.ts">
+  <code-pane title="src/app/app.component.ts" path="toh-pt3/src/app/app.component.ts">
 
   </code-pane>
 
-  <code-pane title="src/app/hero.ts" path="toh-3/src/app/hero.ts">
+  <code-pane title="src/app/hero.ts" path="toh-pt3/src/app/hero.ts">
 
   </code-pane>
 
-  <code-pane title="src/app/app.module.ts" path="toh-3/src/app/app.module.ts">
+  <code-pane title="src/app/app.module.ts" path="toh-pt3/src/app/app.module.ts">
 
   </code-pane>
 
@@ -613,12 +613,11 @@ Here's what you achieved in this page:
 
   我们学会了如何让一个组件接收输入
 
-* You learned to declare the required application directives in an Angular module. You
-listed the directives in the `NgModule` decorator's `declarations` array.
+* You learned to declare the required application directives in an NgModule. You
+listed the directives in the `@NgModule` decorator's `declarations` array.
 
   我们学会了在 Angular 模块中声明该应用所需的指令。
 只要把这些指令列在`NgModule`装饰器的`declarations`数组中就可以了。
-
 * You learned to bind a parent component to a child component.
 
   我们学会了把父组件绑定到子组件。
@@ -640,8 +639,4 @@ Data access should be refactored to a separate service
 and shared among the components that need data.
 
 通过抽取共享组件，我们的《英雄指南》变得更有复用性了，但在`AppComponent`中，我们仍然使用着硬编码的模拟数据。显然，这种方式不能“可持续发展”。
-  我们要把数据访问逻辑重构到一个独立的服务中，并在需要数据的组件之间共享。
-
-You’ll learn to create services in the [next tutorial](tutorial/toh-pt4) page.
-
-在[下一步](tutorial/toh-pt4)，我们将学习如何创建服务。
\ No newline at end of file
+  我们要把数据访问逻辑重构到一个独立的服务中，并在需要数据的组件之间共享。You’ll learn to create services in the [next tutorial](tutorial/toh-pt4"Services") page.在[下一步](tutorial/toh-pt4)，我们将学习如何创建服务。
\ No newline at end of file
diff --git a/aio/content/tutorial/toh-pt4.md b/aio/content/tutorial/toh-pt4.md
index a3c34fbe51..c0a4f3b395 100644
--- a/aio/content/tutorial/toh-pt4.md
+++ b/aio/content/tutorial/toh-pt4.md
@@ -179,7 +179,7 @@ Create a file in the `app` folder called `hero.service.ts`.
 
 
 The naming convention for service files is the service name in lowercase followed by `.service`.
-For a multi-word service name, use lower [dash-case](guide/glossary#!).
+For a multi-word service name, use lower [dash-case](guide/glossary#dash-case).
 For example, the filename for `SpecialSuperHeroService` is `special-super-hero.service.ts`.
 
 我们遵循的文件命名约定是：服务名称的小写形式（基本名），加上`.service`后缀。
@@ -196,7 +196,7 @@ Name the class `HeroService` and export it for others to import.
 我们把这个类命名为`HeroService`，并导出它，以供别人使用。
 
 
-<code-example path="toh-4/src/app/hero.service.1.ts" region="empty-class" title="src/app/hero.service.ts (starting point)" linenums="false">
+<code-example path="toh-pt4/src/app/hero.service.1.ts" region="empty-class" title="src/app/hero.service.ts (starting point)" linenums="false">
 
 </code-example>
 
@@ -248,7 +248,7 @@ Add a `getHeroes()` method stub.
 添加一个名叫`getHeros`的桩方法。
 
 
-<code-example path="toh-4/src/app/hero.service.1.ts" region="getHeroes-stub" title="src/app/hero.service.ts (getHeroes stub)" linenums="false">
+<code-example path="toh-pt4/src/app/hero.service.1.ts" region="getHeroes-stub" title="src/app/hero.service.ts (getHeroes stub)" linenums="false">
 
 </code-example>
 
@@ -274,7 +274,7 @@ Additionally, copy the `import {Hero} ...` statement because the heroes array us
 还要复制`import {Hero}...`语句，因为我们的英雄数组用到了`Hero`类。
 
 
-<code-example path="toh-4/src/app/mock-heroes.ts" title="src/app/mock-heroes.ts">
+<code-example path="toh-pt4/src/app/mock-heroes.ts" title="src/app/mock-heroes.ts">
 
 </code-example>
 
@@ -290,7 +290,7 @@ add an uninitialized `heroes` property:
 在刚刚剪切出`HEROES`数组的`app.component.ts`文件中，添加一个尚未初始化的`heroes`属性：
 
 
-<code-example path="toh-4/src/app/app.component.1.ts" region="heroes-prop" title="src/app/app.component.ts (heroes property)" linenums="false">
+<code-example path="toh-pt4/src/app/app.component.1.ts" region="heroes-prop" title="src/app/app.component.ts (heroes property)" linenums="false">
 
 </code-example>
 
@@ -307,7 +307,7 @@ The `HeroService` looks like this:
 我们的`HeroService`服务现在是这样的：
 
 
-<code-example path="toh-4/src/app/hero.service.1.ts" region="full" title="src/app/hero.service.ts" linenums="false">
+<code-example path="toh-pt4/src/app/hero.service.1.ts" region="full" title="src/app/hero.service.ts" linenums="false">
 
 </code-example>
 
@@ -326,7 +326,7 @@ Import the `HeroService` so that you can reference it in the code.
 先导入`HeroService`，以便我们可以在代码中引用它。
 
 
-<code-example path="toh-4/src/app/app.component.ts" linenums="false" title="toh-4/src/app/app.component.ts (hero-service-import)" region="hero-service-import">
+<code-example path="toh-pt4/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (hero-service-import)" region="hero-service-import">
 
 </code-example>
 
@@ -345,7 +345,7 @@ You could create a new instance of the `HeroService` with `new` like this:
 你可能想用`new`来创建`HeroService`的实例，就像这样：
 
 
-<code-example path="toh-4/src/app/app.component.1.ts" region="new-service" title="toh-4/src/app/app.component.ts" linenums="false">
+<code-example path="toh-pt4/src/app/app.component.1.ts" region="new-service" title="src/app/app.component.ts" linenums="false">
 
 </code-example>
 
@@ -401,7 +401,7 @@ Add the constructor:
 添加构造函数：
 
 
-<code-example path="toh-4/src/app/app.component.1.ts" region="ctor" title="src/app/app.component.ts (constructor)">
+<code-example path="toh-pt4/src/app/app.component.1.ts" region="ctor" title="src/app/app.component.ts (constructor)">
 
 </code-example>
 
@@ -454,7 +454,7 @@ in the `@Component` call.
 要做到这一点，我们在`@Component`组件的元数据底部添加`providers`数组属性如下：
 
 
-<code-example path="toh-4/src/app/app.component.1.ts" linenums="false" title="toh-4/src/app/app.component.ts (providers)" region="providers">
+<code-example path="toh-pt4/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (providers)" region="providers">
 
 </code-example>
 
@@ -483,7 +483,7 @@ You could call the service and get the data in one line.
 我们可以在同一行内调用此服务，并获得数据。
 
 
-<code-example path="toh-4/src/app/app.component.1.ts" region="get-heroes" title="toh-4/src/app/app.component.ts" linenums="false">
+<code-example path="toh-pt4/src/app/app.component.1.ts" region="get-heroes" title="src/app/app.component.ts" linenums="false">
 
 </code-example>
 
@@ -494,7 +494,7 @@ You don't really need a dedicated method to wrap one line.  Write it anyway:
 在真实的世界中，我们并不需要把一行代码包装成一个专门的方法，但无论如何，我们在演示代码中先这么写：
 
 
-<code-example path="toh-4/src/app/app.component.1.ts" linenums="false" title="toh-4/src/app/app.component.ts (getHeroes)" region="getHeroes">
+<code-example path="toh-pt4/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (getHeroes)" region="getHeroes">
 
 </code-example>
 
@@ -510,7 +510,7 @@ You don't really need a dedicated method to wrap one line.  Write it anyway:
 
  You might be tempted to call the `getHeroes()` method in a constructor, but
 a constructor should not contain complex logic,
-especially a constructor that calls a server, such as as a data access method.
+especially a constructor that calls a server, such as a data access method.
 The constructor is for simple initializations, like wiring constructor parameters to properties.
 
 你可能想在构造函数中调用`getHeroes()`方法，但构造函数不应该包含复杂的逻辑，特别是那些需要从服务器获取数据的逻辑更是如此。构造函数是为了简单的初始化工作而设计的，例如把构造函数的参数赋值给属性。
@@ -545,7 +545,7 @@ Here's the essential outline for the `OnInit` interface (don't copy this into yo
 这是`OnInit`接口的基本轮廓（但不要拷贝到你自己的代码中）：
 
 
-<code-example path="toh-4/src/app/app.component.1.ts" region="on-init" title="toh-4/src/app/app.component.ts" linenums="false">
+<code-example path="toh-pt4/src/app/app.component.1.ts" region="on-init" title="src/app/app.component.ts" linenums="false">
 
 </code-example>
 
@@ -570,7 +570,7 @@ at the right time. In this case, initialize by calling `getHeroes()`.
   在这个例子中，我们通过调用`getHeroes()`来完成初始化。
 
 
-<code-example path="toh-4/src/app/app.component.1.ts" linenums="false" title="toh-4/src/app/app.component.ts (ng-on-init)" region="ng-on-init">
+<code-example path="toh-pt4/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (ng-on-init)" region="ng-on-init">
 
 </code-example>
 
@@ -592,7 +592,7 @@ its `getHeroes()` signature is synchronous.
 我们的`HeroService`立即返回一个模拟的英雄列表，它的`getHeroes()`函数签名是同步的。
 
 
-<code-example path="toh-4/src/app/app.component.1.ts" region="get-heroes" title="toh-4/src/app/app.component.ts" linenums="false">
+<code-example path="toh-pt4/src/app/app.component.1.ts" region="get-heroes" title="src/app/app.component.ts" linenums="false">
 
 </code-example>
 
@@ -630,7 +630,7 @@ The service does that work and eventually calls the function with the results or
 
 This is a simplified explanation. Read more about ES2015 Promises in the
 [Promises for asynchronous programming](http://exploringjs.com/es6/ch_promises.html) page of
-[Exploring ES6](http://http://exploringjs.com/es6.html).
+[Exploring ES6](http://exploringjs.com/es6.html).
 
 这里只是粗略说说，要了解更多 ES2015 Promise 的信息，见[ES6概览](http://http://exploringjs.com/es6.html)中的[承诺与异步编程](http://exploringjs.com/es6/ch_promises.html)。
 
@@ -644,7 +644,7 @@ Update the `HeroService` with this Promise-returning `getHeroes()` method:
 把`HeroService`的`getHeroes`方法改写为返回承诺的形式：
 
 
-<code-example path="toh-4/src/app/hero.service.ts" region="get-heroes" title="src/app/hero.service.ts (excerpt)" linenums="false">
+<code-example path="toh-pt4/src/app/hero.service.ts" region="get-heroes" title="src/app/hero.service.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -664,7 +664,7 @@ As a result of the change to `HeroService`, `this.heroes` is now set to a `Promi
 修改`HeroService`之后，`this.heroes`会被赋值为一个`Promise`而不再是英雄数组。
 
 
-<code-example path="toh-4/src/app/app.component.1.ts" region="getHeroes" title="src/app/app.component.ts (getHeroes - old)" linenums="false">
+<code-example path="toh-pt4/src/app/app.component.1.ts" region="getHeroes" title="src/app/app.component.ts (getHeroes - old)" linenums="false">
 
 </code-example>
 
@@ -681,7 +681,7 @@ Pass the callback function as an argument to the Promise's `then()` method:
 我们把回调函数作为参数传给承诺对象的**then**方法：
 
 
-<code-example path="toh-4/src/app/app.component.ts" region="get-heroes" title="src/app/app.component.ts (getHeroes - revised)" linenums="false">
+<code-example path="toh-pt4/src/app/app.component.ts" region="get-heroes" title="src/app/app.component.ts (getHeroes - revised)" linenums="false">
 
 </code-example>
 
@@ -824,15 +824,15 @@ Here are the code files discussed in this page.
 
 <code-tabs>
 
-  <code-pane title="src/app/hero.service.ts" path="toh-4/src/app/hero.service.ts">
+  <code-pane title="src/app/hero.service.ts" path="toh-pt4/src/app/hero.service.ts">
 
   </code-pane>
 
-  <code-pane title="src/app/app.component.ts" path="toh-4/src/app/app.component.ts">
+  <code-pane title="src/app/app.component.ts" path="toh-pt4/src/app/app.component.ts">
 
   </code-pane>
 
-  <code-pane title="src/app/mock-heroes.ts" path="toh-4/src/app/mock-heroes.ts">
+  <code-pane title="src/app/mock-heroes.ts" path="toh-pt4/src/app/mock-heroes.ts">
 
   </code-pane>
 
@@ -884,7 +884,7 @@ As the app evolves, you'll discover how to design it to make it easier to grow a
   我们还要创建一个仪表盘，要添加在视图间路由的菜单链接，还要在模板中格式化数据。
   随着我们应用的进化，我们还会学到如何进行设计，让它更易于扩展和维护。
 
-Read about the Angular component router and navigation among the views in the [next tutorial](tutorial/toh-pt5) page.
+Read about the Angular component router and navigation among the views in the [next tutorial](tutorial/toh-pt5 "Routing and Navigation") page.
 
 我们将在[下一章](tutorial/toh-pt5)学习 Angular 组件路由，以及在视图间导航的知识。
 
@@ -900,7 +900,7 @@ import the `Hero` symbol and add the following `getHeroesSlowly()` method to the
 我们可以模拟慢速连接。导入`Hero`类，并且在`HeroService`中添加如下的`getHeroesSlowly()`方法：
 
 
-<code-example path="toh-4/src/app/hero.service.ts" region="get-heroes-slowly" title="app/hero.service.ts (getHeroesSlowly)" linenums="false">
+<code-example path="toh-pt4/src/app/hero.service.ts" region="get-heroes-slowly" title="app/hero.service.ts (getHeroesSlowly)" linenums="false">
 
 </code-example>
 
@@ -915,4 +915,4 @@ But this Promise waits two seconds before resolving the Promise with mock heroes
 Back in the `AppComponent`, replace `getHeroes()` with `getHeroesSlowly()`
 and see how the app behaves.
 
-回到`AppComponent`，用`heroService.getHeroesSlowly()`替换`heroService.getHeroes()`，并观察应用的行为。
\ No newline at end of file
+回到`AppComponent`，用`heroService.getHeroesSlowly()`替换`heroService.getHeroes()`，并观察应用的行为。
diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md
index 7ceaf720b1..068d59a6f6 100644
--- a/aio/content/tutorial/toh-pt5.md
+++ b/aio/content/tutorial/toh-pt5.md
@@ -33,8 +33,8 @@ When you’re done, users will be able to navigate the app like this:
 完成时，用户就能像这样在应用中导航：
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/toh/nav-diagram.png' alt="查看导航"></img>
+<figure>
+  <img src='generated/images/guide/toh/nav-diagram.png' alt="查看导航">
 </figure>
 
 
@@ -271,7 +271,7 @@ Do the following:
   把`my-app`选择器改名为`my-heroes`。
 
 
-<code-example path="toh-5/src/app/heroes.component.ts" region="renaming" title="src/app/heroes.component.ts (showing renamings only)">
+<code-example path="toh-pt5/src/app/heroes.component.ts" region="renaming" title="src/app/heroes.component.ts (showing renamings only)">
 
 </code-example>
 
@@ -345,11 +345,11 @@ The first draft looks like this:
 
 <code-tabs>
 
-  <code-pane title="src/app/app.component.ts (v1)" path="toh-5/src/app/app.component.1.ts">
+  <code-pane title="src/app/app.component.ts (v1)" path="toh-pt5/src/app/app.component.1.ts">
 
   </code-pane>
 
-  <code-pane title="src/app/app.module.ts (v1)" path="toh-5/src/app/app.module.1.ts">
+  <code-pane title="src/app/app.module.ts (v1)" path="toh-pt5/src/app/app.module.1.ts">
 
   </code-pane>
 
@@ -427,7 +427,7 @@ at the top of the `<head>` section.
 打开`index.html`，确保它的`<head>`区顶部有一个`<base href="...">`元素（或动态生成该元素的脚本）。
 
 
-<code-example path="toh-5/src/index.html" region="base-href" title="src/index.html (base-href)">
+<code-example path="toh-pt5/src/index.html" region="base-href" title="src/index.html (base-href)">
 
 </code-example>
 
@@ -449,7 +449,7 @@ at the top of the `<head>` section.
 
 
 
-For more information, see the [Set the base href](guide/router#!)
+For more information, see the [Set the base href](guide/router)
 section of the [Routing and Navigation](guide/router) page.
 
 要了解更多信息，请参见[路由与导航](guide/router)章的[设置基地址（base href）](guide/router#!)部分。
@@ -482,7 +482,7 @@ Define the first route as a route to the heroes component.
 我们的第一个路由是指向英雄列表组件的。
 
 
-<code-example path="toh-5/src/app/app.module.2.ts" region="heroes" title="src/app/app.module.ts (heroes route)">
+<code-example path="toh-pt5/src/app/app.module.2.ts" region="heroes" title="src/app/app.module.ts (heroes route)">
 
 </code-example>
 
@@ -528,7 +528,7 @@ Import the `RouterModule` and add it to the `AppModule` imports array.
 导入`RouterModule`并添加到`AppModule`的`imports`数组中。
 
 
-<code-example path="toh-5/src/app/app.module.2.ts" title="src/app/app.module.ts (app routing)">
+<code-example path="toh-pt5/src/app/app.module.2.ts" title="src/app/app.module.ts (app routing)">
 
 </code-example>
 
@@ -581,7 +581,7 @@ The revised template looks like this:
 修改过的模板是这样的：
 
 
-<code-example path="toh-5/src/app/app.component.1.ts" region="template-v2" title="src/app/app.component.ts (template-v2)">
+<code-example path="toh-pt5/src/app/app.component.1.ts" region="template-v2" title="src/app/app.component.ts (template-v2)">
 
 </code-example>
 
@@ -649,7 +649,7 @@ and the list of heroes displays.
 现在，`AppComponent`是这样的：
 
 
-<code-example path="toh-5/src/app/app.component.1.ts" region="v2" title="src/app/app.component.ts (v2)">
+<code-example path="toh-pt5/src/app/app.component.1.ts" region="v2" title="src/app/app.component.ts (v2)">
 
 </code-example>
 
@@ -673,7 +673,7 @@ To add another view, create a placeholder `DashboardComponent`, which users can
 当我们有多个视图的时候，路由才有意义。所以我们需要另一个视图。先创建一个`DashboardComponent`的占位符，让用户可以导航到它或从它导航出来。
 
 
-<code-example path="toh-5/src/app/dashboard.component.1.ts" title="src/app/dashboard.component.ts (v1)">
+<code-example path="toh-pt5/src/app/dashboard.component.1.ts" title="src/app/dashboard.component.ts (v1)">
 
 </code-example>
 
@@ -694,7 +694,7 @@ add the following route definition to the `Routes` array of definitions.
 要让`app.module.ts`能导航到仪表盘，就要先导入仪表盘组件，然后把下列路由定义添加到`Routes`数组中。
 
 
-<code-example path="toh-5/src/app/app.module.3.ts" region="dashboard" title="src/app/app.module.ts (Dashboard route)">
+<code-example path="toh-pt5/src/app/app.module.3.ts" region="dashboard" title="src/app/app.module.ts (Dashboard route)">
 
 </code-example>
 
@@ -705,7 +705,7 @@ Also import and add `DashboardComponent` to the `AppModule`'s `declarations`.
 然后还得把`DashboardComponent`添加到`AppModule`的`declarations`数组中。
 
 
-<code-example path="toh-5/src/app/app.module.ts" region="dashboard" title="src/app/app.module.ts(dashboard)">
+<code-example path="toh-pt5/src/app/app.module.ts" region="dashboard" title="src/app/app.module.ts(dashboard)">
 
 </code-example>
 
@@ -729,7 +729,7 @@ to the array of route definitions:
 我们可以使用重定向路由来实现它。把下面的内容添加到路由定义数组中：
 
 
-<code-example path="toh-5/src/app/app.module.3.ts" region="redirect" title="src/app/app.module.ts (redirect)">
+<code-example path="toh-pt5/src/app/app.module.3.ts" region="redirect" title="src/app/app.module.ts (redirect)">
 
 </code-example>
 
@@ -739,7 +739,7 @@ to the array of route definitions:
 
 
 
-Read more about *redirects* in the [Redirecting routes](guide/router#!) section
+Read more about *redirects* in the [Redirecting routes](guide/router) section
 of the [Routing & Navigation](guide/router) page.
 
 关于*重定向*的更多信息，见[路由](guide/router#redirect)。
@@ -758,7 +758,7 @@ Add a dashboard navigation link to the template, just above the *Heroes* link.
 在模板上添加一个到仪表盘的导航链接，就放在*Heroes（英雄列表）*链接的上方。
 
 
-<code-example path="toh-5/src/app/app.component.1.ts" region="template-v3" title="src/app/app.component.ts (template-v3)">
+<code-example path="toh-pt5/src/app/app.component.1.ts" region="template-v3" title="src/app/app.component.ts (template-v3)">
 
 </code-example>
 
@@ -797,7 +797,7 @@ template file.
 把元数据中的`template`属性替换为`templateUrl`属性，它将指向一个新的模板文件。
 
 
-<code-example path="toh-5/src/app/dashboard.component.ts" region="metadata" title="src/app/dashboard.component.ts (metadata)">
+<code-example path="toh-pt5/src/app/dashboard.component.ts" region="metadata" title="src/app/dashboard.component.ts (metadata)">
 
 </code-example>
 
@@ -808,7 +808,7 @@ Create that file with this content:
 使用下列内容创建文件：
 
 
-<code-example path="toh-5/src/app/dashboard.component.1.html" title="src/app/dashboard.component.html">
+<code-example path="toh-pt5/src/app/dashboard.component.1.html" title="src/app/dashboard.component.html">
 
 </code-example>
 
@@ -847,7 +847,7 @@ In <code>dashboard.component.ts</code>, add the following `import` statements.
 打开<code>dashboard.component.ts</code>文件，并添加下列`import`语句。
 
 
-<code-example path="toh-5/src/app/dashboard.component.ts" region="imports" title="src/app/dashboard.component.ts (imports)">
+<code-example path="toh-pt5/src/app/dashboard.component.ts" region="imports" title="src/app/dashboard.component.ts (imports)">
 
 </code-example>
 
@@ -864,7 +864,7 @@ Now create the `DashboardComponent` class like this:
 我们现在就实现`DashboardComponent`类，像这样：
 
 
-<code-example path="toh-5/src/app/dashboard.component.ts" region="class" title="src/app/dashboard.component.ts (class)">
+<code-example path="toh-pt5/src/app/dashboard.component.ts" region="class" title="src/app/dashboard.component.ts (class)">
 
 </code-example>
 
@@ -982,7 +982,7 @@ Use the following *route definition*.
 我们将使用下列*路由定义*。
 
 
-<code-example path="toh-5/src/app/app.module.3.ts" region="hero-detail" title="src/app/app.module.ts (hero detail)">
+<code-example path="toh-pt5/src/app/app.module.3.ts" region="hero-detail" title="src/app/app.module.ts (hero detail)">
 
 </code-example>
 
@@ -1034,7 +1034,7 @@ Here's what the `HeroDetailComponent` looks like now:
 在重写`HeroDetailComponent`之前，我们先看看它现在的样子：
 
 
-<code-example path="toh-4/src/app/hero-detail.component.ts" title="src/app/hero-detail.component.ts (current)">
+<code-example path="toh-pt4/src/app/hero-detail.component.ts" title="src/app/hero-detail.component.ts (current)">
 
 </code-example>
 
@@ -1047,7 +1047,7 @@ The major changes are driven by how you get hero names.
 
 
 You'll no longer receive the hero in a parent component property binding.
-The new `HeroDetailComponent` should take the `id` parameter from the `params` Observable
+The new `HeroDetailComponent` should take the `id` parameter from the `paramMap` Observable
 in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`.
 
 我们不会再从父组件的属性绑定中接收英雄数据。
@@ -1060,7 +1060,7 @@ Add the following imports:
 先添加下列导入语句：
 
 
-<code-example path="toh-5/src/app/hero-detail.component.1.ts" region="added-imports" title="src/app/hero-detail.component.ts">
+<code-example path="toh-pt5/src/app/hero-detail.component.1.ts" region="added-imports" title="src/app/hero-detail.component.ts">
 
 </code-example>
 
@@ -1072,13 +1072,13 @@ into the constructor, saving their values in private fields:
 然后注入`ActivatedRoute`和`HeroService`服务到构造函数中，将它们的值保存到私有变量中：
 
 
-<code-example path="toh-5/src/app/hero-detail.component.ts" region="ctor" title="src/app/hero-detail.component.ts (constructor)">
+<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="ctor" title="src/app/hero-detail.component.ts (constructor)">
 
 </code-example>
 
 
 
-<code-example path="toh-5/src/app/hero-detail.component.ts" region="rxjs-import" title="src/app/hero-detail.component.ts (switchMap import)">
+<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="rxjs-import" title="src/app/hero-detail.component.ts (switchMap import)">
 
 </code-example>
 
@@ -1089,13 +1089,13 @@ Tell the class to implement the `OnInit` interface.
 我们告诉这个类，我们要实现`OnInit`接口。
 
 
-<code-example path="toh-5/src/app/hero-detail.component.ts" region="implement" title="src/app/hero-detail.component.ts">
+<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="implement" title="src/app/hero-detail.component.ts">
 
 </code-example>
 
 
 
-Inside the `ngOnInit()` lifecycle hook, use the `params` Observable to
+Inside the `ngOnInit()` lifecycle hook, use the `paramMap` Observable to
 extract the `id` parameter value from the `ActivatedRoute` service
 and use the `HeroService` to fetch the hero with that `id`.
 
@@ -1103,7 +1103,7 @@ and use the `HeroService` to fetch the hero with that `id`.
 并且使用`HeroService`来获取具有这个`id`的英雄数据。。
 
 
-<code-example path="toh-5/src/app/hero-detail.component.ts" region="ngOnInit" title="src/app/hero-detail.component.ts">
+<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="ngOnInit" title="src/app/hero-detail.component.ts">
 
 </code-example>
 
@@ -1141,7 +1141,7 @@ As described in the [ActivatedRoute: the one-stop-shop for route information](gu
 section of the [Routing & Navigation](guide/router) page,
 the `Router` manages the observables it provides and localizes
 the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against
-memory leaks, so you don't need to unsubscribe from the route `params` `Observable`.
+memory leaks, so you don't need to unsubscribe from the route `paramMap` `Observable`.
 
 正如以前在[路由与导航](guide/router)章的[ActivatedRoute：一站式获取路由信息](guide/router#activated-route)部分讲过的，`Router`管理它提供的[可观察对象](guide/router#activated-route)，并使订阅局部化。当组件被销毁时，会清除
 订阅，防止内存泄漏，所以我们不需要从路由参数`Observable`_取消订阅_。
@@ -1161,7 +1161,7 @@ open `HeroService` and add a `getHero()` method that filters the heroes list fro
 在前面的代码片段中`HeroService`没有`getHero()`方法。要解决这个问题，请打开`HeroService`并添加一个`getHero()`方法，它会根据`id`从`getHeroes()`中过滤英雄列表。
 
 
-<code-example path="toh-5/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts (getHero)">
+<code-example path="toh-pt5/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts (getHero)">
 
 </code-example>
 
@@ -1184,7 +1184,7 @@ using the `Location` service you injected previously.
   利用浏览器的历史堆栈，导航到上一步。
 
 
-<code-example path="toh-5/src/app/hero-detail.component.ts" region="goBack" title="src/app/hero-detail.component.ts (goBack)">
+<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="goBack" title="src/app/hero-detail.component.ts (goBack)">
 
 </code-example>
 
@@ -1196,7 +1196,7 @@ using the `Location` service you injected previously.
 
 Going back too far could take users out of the app.
 In a real app, you can prevent this issue with the <em>CanDeactivate</em> guard.
-Read more on the [CanDeactivate](api/router/index/CanDeactivate-interface) page.
+Read more on the [CanDeactivate](api/router/CanDeactivate) page.
 
 回退太多步会跑出我们的应用。
 在真实的应用中，我们需要使用<em>CanDeactivate</em>守卫对此进行防范。
@@ -1212,7 +1212,7 @@ You'll wire this method with an event binding to a *Back* button that you'll add
 然后，我们通过一个事件绑定把此方法绑定到模板底部的 *Back（后退）*按钮上。
 
 
-<code-example path="toh-5/src/app/hero-detail.component.html" region="back-button">
+<code-example path="toh-pt5/src/app/hero-detail.component.html" region="back-button">
 
 </code-example>
 
@@ -1225,7 +1225,7 @@ called <code>hero-detail.component.html</code>:
 并把模板移到独立的<span ngio-ex>hero-detail.component.html</span>文件中去。
 
 
-<code-example path="toh-5/src/app/hero-detail.component.html" title="src/app/hero-detail.component.html">
+<code-example path="toh-pt5/src/app/hero-detail.component.html" title="src/app/hero-detail.component.html">
 
 </code-example>
 
@@ -1236,7 +1236,7 @@ Update the component metadata with a `templateUrl` pointing to the template file
 然后修改组件元数据的`templateUrl`属性，让它指向我们刚刚创建的模板文件。
 
 
-<code-example path="toh-5/src/app/hero-detail.component.ts" region="metadata" title="src/app/hero-detail.component.ts (metadata)">
+<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="metadata" title="src/app/hero-detail.component.ts (metadata)">
 
 </code-example>
 
@@ -1269,7 +1269,7 @@ with `<a>` tags. Change the opening `<a>` tag to the following:
 要达到这个效果，再次打开`dashboard.component.html`，将用来迭代的`<div *ngFor...>`替换为`<a>`，就像这样：
 
 
-<code-example path="toh-5/src/app/dashboard.component.html" region="click" title="src/app/dashboard.component.html (repeated &lt;a&gt; tag)">
+<code-example path="toh-pt5/src/app/dashboard.component.html" region="click" title="src/app/dashboard.component.html (repeated &lt;a&gt; tag)">
 
 </code-example>
 
@@ -1297,7 +1297,7 @@ token in the parameterized hero detail route definition that you added to
 这两个数组项与之前在`app.module.ts`添加的参数化的英雄详情路由定义中的 ***path*** 和 ***:id*** 对应。
 
 
-<code-example path="toh-5/src/app/app.module.3.ts" region="hero-detail" title="src/app/app.module.ts (hero detail)">
+<code-example path="toh-pt5/src/app/app.module.3.ts" region="hero-detail" title="src/app/app.module.ts (hero detail)">
 
 </code-example>
 
@@ -1346,7 +1346,7 @@ Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it
 在`app.module.ts`所在目录创建`app-routing.module.ts`文件。将下面从`AppModule`类提取出来的代码拷贝进去：
 
 
-<code-example path="toh-5/src/app/app-routing.module.ts" title="src/app/app-routing.module.ts">
+<code-example path="toh-pt5/src/app/app-routing.module.ts" title="src/app/app-routing.module.ts">
 
 </code-example>
 
@@ -1383,30 +1383,23 @@ The following points are typical of routing modules:
 ### 修改 *AppModule*
 
 Delete the routing configuration from `AppModule` and import the `AppRoutingModule`.
-Use an ES `import` statement *and* add it to the `NgModule.imports` list.
+Use an ES2015 `import` statement *and* add it to the `NgModule.imports` list.
 
 删除`AppModule`中的路由配置，并导入`AppRoutingModule`
 （使用 ES `import`语句导入，**并**将它添加到`NgModule.imports`列表）。
 
 Here is the revised `AppModule`, compared to its pre-refactor state:
-  
+
 下面是修改后的`AppModule`，与重构前的对比：
 
-
 <code-tabs>
-
-  <code-pane title="src/app/app.module.ts (after)" path="toh-5/src/app/app.module.ts">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.module.ts (before)" path="toh-5/src/app/app.module.3.ts">
-
-  </code-pane>
-
+  <code-pane path="toh-pt5/src/app/app.module.ts" title="src/app/app.module.ts (after)"></code-pane>
+  <code-pane path="toh-pt5/src/app/app.module.3.ts" title="src/app/app.module.ts (before)"></code-pane>
 </code-tabs>
 
+The revised and simplified `AppModule` is focused on identifying the key pieces of the app.
 
-
+修改并简化后的`AppModule`更专注于应用中的关键片段。
 
 ## Select a hero in the *HeroesComponent*
 
@@ -1419,7 +1412,7 @@ at the top and details of the selected hero below.
 在`HeroesComponent`中，当前模板展示了一个主从风格的界面：上方是英雄列表，底下是所选英雄的详情。
 
 
-<code-example path="toh-4/src/app/app.component.ts" region="template" title="src/app/heroes.component.ts (current template)" linenums="false">
+<code-example path="toh-pt4/src/app/app.component.ts" region="template" title="src/app/heroes.component.ts (current template)" linenums="false">
 
 </code-example>
 
@@ -1454,7 +1447,7 @@ Add the following HTML fragment at the bottom of the template where the `<hero-d
 在模板底部原来放`<hero-detail>`的地方添加下列 HTML 片段：
 
 
-<code-example path="toh-5/src/app/heroes.component.html" region="mini-detail" title="src/app/heroes.component.ts">
+<code-example path="toh-pt5/src/app/heroes.component.html" region="mini-detail" title="src/app/heroes.component.ts">
 
 </code-example>
 
@@ -1465,8 +1458,8 @@ After clicking a hero, users should see something like this below the hero list:
 点击一个英雄，用户将会在英雄列表的下方看到这些：
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/toh/mini-hero-detail.png' alt="Mini版英雄" height="70"></img>
+<figure>
+  <img src='generated/images/guide/toh/mini-hero-detail.png' alt="Mini版英雄">
 </figure>
 
 
@@ -1481,7 +1474,7 @@ that's included in the interpolation binding, right after the pipe operator ( |
 注意，英雄的名字全被显示成大写字母。那是`uppercase`管道的效果，借助它，我们能干预插值表达式绑定的过程。可以管道操作符 ( | ) 后面看到它。
 
 
-<code-example path="toh-5/src/app/heroes.component.html" region="pipe">
+<code-example path="toh-pt5/src/app/heroes.component.html" region="pipe">
 
 </code-example>
 
@@ -1521,14 +1514,14 @@ It's difficult to find the component logic amidst the noise of HTML and CSS.
 
 这个组件文件太大了。要想在 HTML 和 CSS 的噪音中看清组件的工作逻辑太难了。
 
-Before making any more changes, migrate the template and styles to their own files. 
+Before making any more changes, migrate the template and styles to their own files.
 
 在做更多修改之前，我们先把模板和样式移到它们自己的文件中去：
 
-First, move the template contents from `heroes.component.ts` 
-into a new <code>heroes.component.html</code> file. 
-Don't copy the backticks. As for `heroes.component.ts`, you'll 
-come back to it in a minute. Next, move the 
+First, move the template contents from `heroes.component.ts`
+into a new <code>heroes.component.html</code> file.
+Don't copy the backticks. As for `heroes.component.ts`, you'll
+come back to it in a minute. Next, move the
 styles contents into a new <code>heroes.component.css</code> file.
 
 首先，从`heroes.component.ts`中把模板内容移到新的<code>heroes.component.html</code>文件中，但不要把反引号也拷贝过去。就像`heroes.component.ts`一样，我们很快就能做完。接着，把样式的内容移到新的<code>heroes.component.css</code>文件中。
@@ -1540,11 +1533,11 @@ The two new files should look like this:
 
 <code-tabs>
 
-  <code-pane title="src/app/heroes.component.html" path="toh-5/src/app/heroes.component.html">
+  <code-pane title="src/app/heroes.component.html" path="toh-pt5/src/app/heroes.component.html">
 
   </code-pane>
 
-  <code-pane title="src/app/heroes.component.css" path="toh-5/src/app/heroes.component.css">
+  <code-pane title="src/app/heroes.component.css" path="toh-pt5/src/app/heroes.component.css">
 
   </code-pane>
 
@@ -1552,15 +1545,15 @@ The two new files should look like this:
 
 
 
-Now, back in the component metadata for `heroes.component.ts`, 
-delete `template` and `styles`, replacing them with 
+Now, back in the component metadata for `heroes.component.ts`,
+delete `template` and `styles`, replacing them with
 `templateUrl` and `styleUrls` respectively.
 Set their properties to refer to the new files.
 
 现在，回来编辑`heroes.component.ts`中的组件元数据，删除`template` 和 `styles`属性，代之以相应的`templateUrl` 和 `styleUrls`属性。让它们指向这些新文件。
 
 
-<code-example path="toh-5/src/app/heroes.component.ts" region="metadata" title="src/app/heroes.component.ts (revised metadata)">
+<code-example path="toh-pt5/src/app/heroes.component.ts" region="metadata" title="src/app/heroes.component.ts (revised metadata)">
 
 </code-example>
 
@@ -1608,7 +1601,7 @@ This approach requires the following changes to the component class:
    实现`gotoDetail()`，调用路由器的`navigate()`方法
 
 
-<code-example path="toh-5/src/app/heroes.component.ts" region="gotoDetail" title="src/app/heroes.component.ts (gotoDetail)">
+<code-example path="toh-pt5/src/app/heroes.component.ts" region="gotoDetail" title="src/app/heroes.component.ts (gotoDetail)">
 
 </code-example>
 
@@ -1626,7 +1619,7 @@ Here's the revised `HeroesComponent` class:
 修改完成的`HeroesComponent`类如下所示：
 
 
-<code-example path="toh-5/src/app/heroes.component.ts" region="class" title="src/app/heroes.component.ts (class)">
+<code-example path="toh-pt5/src/app/heroes.component.ts" region="class" title="src/app/heroes.component.ts (class)">
 
 </code-example>
 
@@ -1670,7 +1663,7 @@ that file in the component metadata's `styleUrls` array property like this:
 把<code>dashboard.component.css</code>文件添加到`app`目录下，并在组件元数据的`styleUrls`数组属性中引用它。就像这样：
 
 
-<code-example path="toh-5/src/app/dashboard.component.ts" region="css" title="src/app/dashboard.component.ts (styleUrls)">
+<code-example path="toh-pt5/src/app/dashboard.component.ts" region="css" title="src/app/dashboard.component.ts (styleUrls)">
 
 </code-example>
 
@@ -1701,11 +1694,11 @@ Here's the content for the component CSS files.
 
 <code-tabs>
 
-  <code-pane title="src/app/hero-detail.component.css" path="toh-5/src/app/hero-detail.component.css">
+  <code-pane title="src/app/hero-detail.component.css" path="toh-pt5/src/app/hero-detail.component.css">
 
   </code-pane>
 
-  <code-pane title="src/app/dashboard.component.css" path="toh-5/src/app/dashboard.component.css">
+  <code-pane title="src/app/dashboard.component.css" path="toh-pt5/src/app/dashboard.component.css">
 
   </code-pane>
 
@@ -1728,7 +1721,7 @@ Add an <code>app.component.css</code> file to the `app` folder with the followin
 在`app`目录下添加一个<span ngio-ex>app.component.css</span>文件，内容如下：
 
 
-<code-example path="toh-5/src/app/app.component.css" title="src/app/app.component.css (navigation styles)">
+<code-example path="toh-pt5/src/app/app.component.css" title="src/app/app.component.css (navigation styles)">
 
 </code-example>
 
@@ -1750,7 +1743,7 @@ Angular路由器提供了`routerLinkActive`指令，我们可以用它来为匹
   我们唯一要做的就是为它定义样式。真好！
   
 
-<code-example path="toh-5/src/app/app.component.ts" region="template" title="src/app/app.component.ts (active router links)">
+<code-example path="toh-pt5/src/app/app.component.ts" region="template" title="src/app/app.component.ts (active router links)">
 
 </code-example>
 
@@ -1766,7 +1759,7 @@ Add a `styleUrls` property that refers to this CSS file as follows:
 然后添加`styleUrls`属性，使其指向这个CSS文件，代码如下：
 
 
-<code-example path="toh-5/src/app/app.component.ts" region="styleUrls" title="toh-5/src/app/app.component.ts">
+<code-example path="toh-pt5/src/app/app.component.ts" region="styleUrls" title="src/app/app.component.ts">
 
 </code-example>
 
@@ -1796,14 +1789,14 @@ Here's an excerpt:
 下面是摘录：
 
 
-<code-example path="toh-5/src/styles.css" region="toh" title="src/styles.css (excerpt)">
+<code-example path="toh-pt5/src/styles.1.css" title="src/styles.css (excerpt)">
 
 </code-example>
 
 
 
 Create the file <code>styles.css</code>.
-Ensure that the file contains the [master styles provided here](https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/_boilerplate/src/styles.css).
+Ensure that the file contains the [master styles provided here](https://raw.githubusercontent.com/angular/angular/master/aio/tools/examples/shared/boilerplate/src/styles.css).
 Also edit <code>index.html</code> to refer to this stylesheet.
 
 如果在根目录下没有一个名叫`styles.css`的文件，就添加它。
@@ -1811,7 +1804,7 @@ Also edit <code>index.html</code> to refer to this stylesheet.
 并编辑`index.html`来引用这个样式表。
 
 
-<code-example path="toh-5/src/index.html" region="css" title="src/index.html (link ref)">
+<code-example path="toh-pt5/src/index.html" region="css" title="src/index.html (link ref)">
 
 </code-example>
 
@@ -1822,8 +1815,8 @@ Look at the app now. The dashboard, heroes, and navigation links are styled.
 看看现在的应用！我们的仪表盘、英雄列表和导航链接都漂亮多了！
 
 
-<figure class='image-display'>
-  <img src='assets/images/devguide/toh/heroes-dashboard-1.png' alt="查看导航栏"></img>
+<figure>
+  <img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="查看导航栏">
 </figure>
 
 
@@ -2009,7 +2002,7 @@ You're still missing a key piece: remote data access.
 我们有了很多用于构建应用的基石。
   但我们仍然缺少很关键的一块：远程数据存取。
 
-In the next page,
+In the [next tutorial page](tutorial/toh-pt6 "Http")
 you’ll replace the mock data with data retrieved from a server using http.
 
-在下一章，我们将从硬编码模拟数据改为使用 http 服务从服务器获取数据。
\ No newline at end of file
+在下一章，我们将从硬编码模拟数据改为使用 http 服务从服务器获取数据。
diff --git a/aio/content/tutorial/toh-pt6.md b/aio/content/tutorial/toh-pt6.md
index 156c44bf33..ff4e11aa0a 100644
--- a/aio/content/tutorial/toh-pt6.md
+++ b/aio/content/tutorial/toh-pt6.md
@@ -1,12 +1,4 @@
-@title
-HTTP
-
-@intro
-把服务和组件改为用 Angular 的 HTTP 服务实现
-
-@description
-
-
+# HTTP
 
 In this page, you'll make the following improvements.
 
@@ -56,11 +48,8 @@ Enter the following command in the terminal window:
 
 <code-example language="sh" class="code-shell">
   npm start
-
 </code-example>
 
-
-
 This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
 The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
 
@@ -72,21 +61,11 @@ You can keep building the Tour of Heroes without pausing to recompile or refresh
 
 在后续构建《英雄指南》过程中，应用能持续运行，而不用中断服务来编译或刷新浏览器。
 
+## Providing HTTP Services
 
+## 提供 HTTP 服务
 
-<h1>
-  Providing HTTP Services
-</h1>
-
-
-
-<h1>
-  提供 HTTP 服务
-</h1>
-
-
-
-The `HttpModule` is not a core Angular module.
+The `HttpModule` is not a core NgModule.
 `HttpModule` is Angular's optional approach to web access. It exists as a separate add-on module called `@angular/http`
 and is shipped in a separate script file as part of the Angular npm package.
 
@@ -112,16 +91,13 @@ The `HttpModule` from the `@angular/http` library holds providers for a complete
 To allow access to these services from anywhere in the app,
 add `HttpModule` to the `imports` list of the `AppModule`.
 
+
 我们要能从本应用的任何地方访问这些服务，就要把`HttpModule`添加到`AppModule`的`imports`列表中。
-这里同时也是我们引导应用及其根组件`AppComponent`的地方。
-
-
-<code-example path="toh-6/src/app/app.module.ts" region="v1" title="src/app/app.module.ts (v1)">
+这里同时也是我们引导应用及其根组件`AppComponent`的地方。<code-example path="toh-pt6/src/app/app.module.ts" region="v1" title="src/app/app.module.ts (v1)">
 
 </code-example>
 
 
-
 Notice that you also supply `HttpModule` as part of the *imports* array in root NgModule `AppModule`.
 
 注意，现在`HttpModule`已经是根模块`AppModule`的`imports`数组的一部分了。
@@ -145,87 +121,64 @@ a mock service, the *in-memory web API*.
 
 Update <code>src/app/app.module.ts</code> with this version, which uses the mock service:
 
-修改<code>src/app/app.module.ts</code>，让它使用这个模拟服务：
 
-
-<code-example path="toh-6/src/app/app.module.ts" region="v2" title="src/app/app.module.ts (v2)">
+修改<code>src/app/app.module.ts</code>，让它使用这个模拟服务：<code-example path="toh-pt6/src/app/app.module.ts" region="v2" title="src/app/app.module.ts (v2)">
 
 </code-example>
 
 
-
 Rather than require a real API server, this example simulates communication with the remote server by adding the
-<a href="https://github.com/angular/in-memory-web-api" target="_blank" title="In-memory Web API">InMemoryWebApiModule</a>
+<a href="https://github.com/angular/in-memory-web-api" title="In-memory Web API">InMemoryWebApiModule</a>
 to the module `imports`, effectively  replacing the `Http` client's XHR backend service with an in-memory alternative.
 
+
 导入`InMemoryWebApiModule`并将其加入到模块的`imports`数组。
   `InMemoryWebApiModule`将`Http`客户端默认的后端服务 &mdash;
   这是一个辅助服务，负责与远程服务器对话 &mdash;
-  替换成了*内存 Web API*服务：
-  
-
-<code-example path="toh-6/src/app/app.module.ts" region="in-mem-web-api">
+  替换成了*内存 Web API*服务：<code-example path="toh-pt6/src/app/app.module.ts" region="in-mem-web-api">
 
 </code-example>
 
 
-
 The `forRoot()` configuration method takes an `InMemoryDataService` class
 that primes the in-memory database.
 Add the file `in-memory-data.service.ts` in `app` with the following content:
 
+
 `forRoot()`配置方法需要`InMemoryDataService`类实例，用来向内存数据库填充数据：
-往`app`目录下新增一个文件`in-memory-data.service.ts`，填写下列内容：
-
-
-<code-example path="toh-6/src/app/in-memory-data.service.ts" region="init" title="src/app/in-memory-data.service.ts" linenums="false">
+往`app`目录下新增一个文件`in-memory-data.service.ts`，填写下列内容：<code-example path="toh-pt6/src/app/in-memory-data.service.ts" region="init" title="src/app/in-memory-data.service.ts" linenums="false">
 
 </code-example>
 
 
-
 This file replaces `mock-heroes.ts`, which is now safe to delete.
+Added hero "Zero" to confirm that the data service can handle a hero with `id==0`.
 
 这个文件已经替换了`mock-heroes.ts`，可以删除`mock-heroes.ts`了。
 
 
 <div class="alert is-helpful">
 
-
-
-The in-memory web API is only useful in the early stages of development and for demonstrations such as this Tour of Heroes.
-Don't worry about the details of this backend substitution; you can
-skip it when you have a real web API server.
-
-内存Web API只在开发的早期阶段或写《英雄指南》这样的演示程序时才有用。有了它，你将来替换后端实现时就不用关心这些细节问题了。如果你已经有了一个真实的Web API服务器，尽管跳过它吧。
-
-Read more about the in-memory web API in the
-[Appendix: Tour of Heroes in-memory web api](guide/server-communication#in-mem-web-api)
-section of the [HTTP Client](guide/server-communication#in-mem-web-api) page.
-
-关于*内存 Web API* 的更多信息，见 [附录：英雄指南Web API](guide/server-communication#in-mem-web-api)中的[HTTP 客户端](guide/server-communication#in-mem-web-api)部分。
-
+  The in-memory web API is only useful in the early stages of development and for demonstrations such as this Tour of Heroes.
+  Don't worry about the details of this backend substitution; you can
+  skip it when you have a real web API server.
+  
+  内存Web API只在开发的早期阶段或写《英雄指南》这样的演示程序时才有用。有了它，你将来替换后端实现时就不用关心这些细节问题了。如果你已经有了一个真实的Web API服务器，尽管跳过它吧。
 
 </div>
 
-
-
-
 ## Heroes and HTTP
 
 ## 英雄与 HTTP
 
 In the current `HeroService` implementation, a Promise resolved with mock heroes is returned.
 
-在目前的`HeroService`的实现中，返回的是一个能解析（resolve）成模拟英雄列表的承诺（Promise）。
 
-
-<code-example path="toh-4/src/app/hero.service.ts" region="get-heroes" title="src/app/hero.service.ts (old getHeroes)">
+在目前的`HeroService`的实现中，返回的是一个能解析（resolve）成模拟英雄列表的承诺（Promise）。<code-example path="toh-pt4/src/app/hero.service.ts" region="get-heroes" title="src/app/hero.service.ts (old getHeroes)">
 
 </code-example>
 
 
-
 This was implemented in anticipation of ultimately
 fetching heroes with an HTTP client, which must be an asynchronous operation.
 
@@ -235,33 +188,28 @@ fetching heroes with an HTTP client, which must be an asynchronous operation.
 
 Now convert `getHeroes()` to use HTTP.
 
-现在，我们把`getHeroes()`换成使用 HTTP。
 
-
-<code-example path="toh-6/src/app/hero.service.ts" region="getHeroes" title="src/app/hero.service.ts (updated getHeroes and new class members)">
+现在，我们把`getHeroes()`换成使用 HTTP。<code-example path="toh-pt6/src/app/hero.service.ts" region="getHeroes" title="src/app/hero.service.ts (updated getHeroes and new class members)">
 
 </code-example>
 
 
-
 Update the import statements as follows:
 
-更新后的导入声明如下：
 
-
-<code-example path="toh-6/src/app/hero.service.ts" region="imports" title="src/app/hero.service.ts (updated imports)">
+更新后的导入声明如下：<code-example path="toh-pt6/src/app/hero.service.ts" region="imports" title="src/app/hero.service.ts (updated imports)">
 
 </code-example>
 
 
-
 Refresh the browser. The hero data should successfully load from the
 mock server.
 
 刷新浏览器后，英雄数据就会从模拟服务器被成功读取。
 
-<h3 id="http-promise">HTTP Promise</h3>
+{@a http-promise}
 
+### HTTP Promise
 
 The Angular `http.get` returns an RxJS `Observable`.
 *Observables* are a powerful way to manage asynchronous data flows.
@@ -273,15 +221,12 @@ Angular 的`http.get`返回一个 RxJS 的`Observable`对象。
 
 For now, you've converted the `Observable` to a `Promise` using the `toPromise` operator.
 
-*现在*，我们先利用`toPromise`操作符把`Observable`直接转换成`Promise`对象，回到已经熟悉的地盘。
 
-
-<code-example path="toh-6/src/app/hero.service.ts" region="to-promise">
+*现在*，我们先利用`toPromise`操作符把`Observable`直接转换成`Promise`对象，回到已经熟悉的地盘。<code-example path="toh-pt6/src/app/hero.service.ts" region="to-promise">
 
 </code-example>
 
 
-
 The Angular `Observable` doesn't have a `toPromise` operator out of the box.
 
 不幸的是，Angular 的`Observable`并没有一个`toPromise`操作符... 没有打包在一起发布。Angular的`Observable`只是一个骨架实现。
@@ -290,30 +235,23 @@ There are many operators like `toPromise` that extend `Observable` with useful c
 To use those capabilities, you have to add the operators themselves.
 That's as easy as importing them from the RxJS library like this:
 
+
 有很多像`toPromise`这样的操作符，用于扩展`Observable`，为其添加有用的能力。
   如果我们希望得到那些能力，就得自己添加那些操作符。
-  那很容易，只要从 RxJS 库中导入它们就可以了，就像这样：
-  
-
-<code-example path="toh-6/src/app/hero.service.ts" region="rxjs">
+  那很容易，只要从 RxJS 库中导入它们就可以了，就像这样：<code-example path="toh-pt6/src/app/hero.service.ts" region="rxjs">
 
 </code-example>
 
 
-
 <div class="l-sub-section">
 
-
-
-You'll add more operators, and learn why you must do so, [later in this tutorial](tutorial/toh-pt6#rxjs-imports).
+  You'll add more operators, and learn why you must do so, [later in this tutorial](tutorial/toh-pt6#rxjs-imports).
   
 我们还要添加更多的操作符，并且必须这么做，要了解其中的原因，参见[本章稍后的部分](tutorial/toh-pt6#rxjs-imports)。
 
-
 </div>
 
 
-
 ### Extracting the data in the *then* callback
 
 ### 在 *then* 回调中提取出数据
@@ -323,12 +261,7 @@ data within the response.
   
 在 *promise* 的`then()`回调中，我们调用 HTTP 的`Reponse`对象的`json`方法，以提取出其中的数据。
 
-
-<code-example path="toh-6/src/app/hero.service.ts" region="to-data">
-
-</code-example>
-
-
+<code-example path="toh-pt6/src/app/hero.service.ts" region="to-data"></code-example>
 
 The response JSON has a single `data` property, which
 holds the array of heroes that the caller wants.
@@ -341,11 +274,9 @@ So you grab that array and return it as the resolved Promise value.
 
 <div class="alert is-important">
 
-
-
-Note the shape of the data that the server returns.
-This particular in-memory web API example returns an object with a `data` property.
-Your API might return something else. Adjust the code to match your web API.
+  Note the shape of the data that the server returns.
+  This particular in-memory web API example returns an object with a `data` property.
+  Your API might return something else. Adjust the code to match your web API.
 
 仔细看看这个由服务器返回的数据的形态。
 这个*内存 Web API* 的范例中所做的是返回一个带有`data`属性的对象。
@@ -355,7 +286,6 @@ Your API might return something else. Adjust the code to match your web API.
 </div>
 
 
-
 The caller is unaware that you fetched the heroes from the (mock) server.
 It receives a Promise of *heroes* just as it did before.
 
@@ -370,28 +300,22 @@ It receives a Promise of *heroes* just as it did before.
 
 At the end of `getHeroes()`, you `catch` server failures and pass them to an error handler.
 
-在`getHeroes()`的最后，我们`catch`了服务器的失败信息，并把它们传给了错误处理器：
 
-
-<code-example path="toh-6/src/app/hero.service.ts" region="catch">
+在`getHeroes()`的最后，我们`catch`了服务器的失败信息，并把它们传给了错误处理器：<code-example path="toh-pt6/src/app/hero.service.ts" region="catch">
 
 </code-example>
 
 
-
 This is a critical step.
 You must anticipate HTTP failures, as they happen frequently for reasons beyond your control.
 
+
 这是一个关键的步骤！
-我们必须预料到 HTTP 请求会失败，因为有太多我们无法控制的原因可能导致它们频繁出现各种错误。
-
-
-<code-example path="toh-6/src/app/hero.service.ts" region="handleError">
+我们必须预料到 HTTP 请求会失败，因为有太多我们无法控制的原因可能导致它们频繁出现各种错误。<code-example path="toh-pt6/src/app/hero.service.ts" region="handleError">
 
 </code-example>
 
 
-
 This demo service logs the error to the console; in real life,
 you would handle the error in code. For a demo, this works.
 
@@ -423,11 +347,7 @@ Update the `HeroService.getHero()` method to make a _get-by-id_ request:
 修改 `HeroService.getHero()` 方法来发起一个 *get-by-id* 请求：
 
 
-<code-example path="toh-6/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts">
-
-</code-example>
-
-
+<code-example path="toh-pt6/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts"></code-example>
 
 This request is almost the same as `getHeroes()`.
 The hero id in the URL identifies which hero the server should update.
@@ -487,27 +407,21 @@ the server.
 At the end of the hero detail template, add a save button with a `click` event
 binding that invokes a new component method named `save()`.
 
-我们先来确保对英雄名字的编辑不会丢失。先在英雄详情模板的底部添加一个保存按钮，它绑定了一个`click`事件，事件绑定会调用组件中一个名叫`save()`的新方法：
 
-
-<code-example path="toh-6/src/app/hero-detail.component.html" region="save" title="src/app/hero-detail.component.html (save)">
+我们先来确保对英雄名字的编辑不会丢失。先在英雄详情模板的底部添加一个保存按钮，它绑定了一个`click`事件，事件绑定会调用组件中一个名叫`save()`的新方法：<code-example path="toh-pt6/src/app/hero-detail.component.html" region="save" title="src/app/hero-detail.component.html (save)">
 
 </code-example>
 
 
-
 Add the following `save()` method, which persists hero name changes using the hero service
 `update()` method and then navigates back to the previous view.
 
-`save()`方法使用 hero 服务的`update()`方法来持久化对英雄名字的修改，然后导航回前一个视图：
 
-
-<code-example path="toh-6/src/app/hero-detail.component.ts" region="save" title="src/app/hero-detail.component.ts (save)">
+`save()`方法使用 hero 服务的`update()`方法来持久化对英雄名字的修改，然后导航回前一个视图：<code-example path="toh-pt6/src/app/hero-detail.component.ts" region="save" title="src/app/hero-detail.component.ts (save)">
 
 </code-example>
 
 
-
 ### Add a hero service _update()_ method
 
 ### hero 服务的`update`方法
@@ -515,15 +429,13 @@ Add the following `save()` method, which persists hero name changes using the he
 The overall structure of the `update()` method is similar to that of
 `getHeroes()`, but it uses an HTTP `put()` to persist server-side changes.
 
-`update()`方法的大致结构与`getHeroes()`类似，不过我们使用 HTTP 的 `put()` 方法来把修改持久化到服务端：
 
 
-<code-example path="toh-6/src/app/hero.service.ts" region="update" title="src/app/hero.service.ts (update)">
+`update()`方法的大致结构与`getHeroes()`类似，不过我们使用 HTTP 的 `put()` 方法来把修改持久化到服务端：<code-example path="toh-pt6/src/app/hero.service.ts" region="update" title="src/app/hero.service.ts (update)">
 
 </code-example>
 
 
-
 To identify which hero the server should update, the hero `id` is encoded in
 the URL. The `put()` body is the JSON string encoding of the hero, obtained by
 calling `JSON.stringify`. The body content type
@@ -551,27 +463,21 @@ element paired with an add button.
 Insert the following into the heroes component HTML, just after
 the heading:
 
-把下列代码插入 heroes 组件的 HTML 中，放在标题的下面：
 
-
-<code-example path="toh-6/src/app/heroes.component.html" region="add" title="src/app/heroes.component.html (add)">
+把下列代码插入 heroes 组件的 HTML 中，放在标题的下面：<code-example path="toh-pt6/src/app/heroes.component.html" region="add" title="src/app/heroes.component.html (add)">
 
 </code-example>
 
 
-
 In response to a click event, call the component's click handler and then
 clear the input field so that it's ready for another name.
 
-当点击事件触发时，我们调用组件的点击处理器，然后清空这个输入框，以便用来输入另一个名字。
 
-
-<code-example path="toh-6/src/app/heroes.component.ts" region="add" title="src/app/heroes.component.ts (add)">
+当点击事件触发时，我们调用组件的点击处理器，然后清空这个输入框，以便用来输入另一个名字。<code-example path="toh-pt6/src/app/heroes.component.ts" region="add" title="src/app/heroes.component.ts (add)">
 
 </code-example>
 
 
-
 When the given name is non-blank, the handler delegates creation of the
 named hero to the hero service, and then adds the new hero to the array.
 
@@ -583,11 +489,7 @@ Implement the `create()` method in the `HeroService` class.
 然后，我们在`HeroService`类中实现这个`create()`方法。
 
 
-<code-example path="toh-6/src/app/hero.service.ts" region="create" title="src/app/hero.service.ts (create)">
-
-</code-example>
-
-
+<code-example path="toh-pt6/src/app/hero.service.ts" region="create" title="src/app/hero.service.ts (create)"></code-example>
 
 Refresh the browser and create some heroes.
 
@@ -606,26 +508,20 @@ Each hero in the heroes view should have a delete button.
 Add the following button element to the heroes component HTML, after the hero
 name in the repeated `<li>` element.
 
-把这个按钮元素添加到英雄列表组件的 HTML 中，把它放在`<li>`标签中的英雄名的后面：
 
-
-<code-example path="toh-6/src/app/heroes.component.html" region="delete">
+把这个按钮元素添加到英雄列表组件的 HTML 中，把它放在`<li>`标签中的英雄名的后面：<code-example path="toh-pt6/src/app/heroes.component.html" region="delete">
 
 </code-example>
 
 
-
 The `<li>` element should now look like this:
 
-`<li>`元素应该变成了这样：
 
-
-<code-example path="toh-6/src/app/heroes.component.html" region="li-element" title="src/app/heroes.component.html (li-element)">
+`<li>`元素应该变成了这样：<code-example path="toh-pt6/src/app/heroes.component.html" region="li-element" title="src/app/heroes.component.html (li-element)">
 
 </code-example>
 
 
-
 In addition to calling the component's `delete()` method, the delete button's
 click handler code stops the propagation of the click event&mdash;you
 don't want the `<li>` click handler to be triggered because doing so would
@@ -636,15 +532,12 @@ select the hero that the user will delete.
 
 The logic of the `delete()` handler is a bit trickier:
 
-`delete()`处理器的逻辑略复杂：
 
-
-<code-example path="toh-6/src/app/heroes.component.ts" region="delete" title="src/app/heroes.component.ts (delete)">
+`delete()`处理器的逻辑略复杂：<code-example path="toh-pt6/src/app/heroes.component.ts" region="delete" title="src/app/heroes.component.ts (delete)">
 
 </code-example>
 
 
-
 Of course you delegate hero deletion to the hero service, but the component
 is still responsible for updating the display: it removes the deleted hero
 from the array and resets the selected hero, if necessary.
@@ -656,47 +549,33 @@ from the array and resets the selected hero, if necessary.
 To place the delete button at the far right of the hero entry,
 add this CSS:
 
+
 我们希望删除按钮被放在英雄条目的最右边。
-于是 CSS 变成了这样：
-
-
-<code-example path="toh-6/src/app/heroes.component.css" region="additions" title="src/app/heroes.component.css (additions)">
+于是 CSS 变成了这样：<code-example path="toh-pt6/src/app/heroes.component.css" region="additions" title="src/app/heroes.component.css (additions)">
 
 </code-example>
 
 
-
 ### Hero service _delete()_ method
 
 ### hero 服务的`delete()`方法
 
 Add the hero service's `delete()` method, which uses the `delete()` HTTP method to remove the hero from the server:
 
-hero 服务的`delete()`方法使用 HTTP 的 `delete()` 方法来从服务器上移除该英雄：
 
-
-<code-example path="toh-6/src/app/hero.service.ts" region="delete" title="src/app/hero.service.ts (delete)">
+hero 服务的`delete()`方法使用 HTTP 的 `delete()` 方法来从服务器上移除该英雄：<code-example path="toh-pt6/src/app/hero.service.ts" region="delete" title="src/app/hero.service.ts (delete)">
 
 </code-example>
 
 
-
 Refresh the browser and try the new delete functionality.
 
 刷新浏览器，并试一下这个新的删除功能。
 
-
-<div id='observables'>
-
-</div>
-
-
-
 ## Observables
 
 ## 可观察对象 (Observable)
 
-
 Each `Http` service method  returns an `Observable` of HTTP `Response` objects.
 
 `Http`服务中的每个方法都返回一个 HTTP `Response`对象的`Observable`实例。
@@ -762,15 +641,12 @@ As the user types a name into a search box, you'll make repeated HTTP requests f
 
 Start by creating `HeroSearchService` that sends search queries to the server's web API.
 
-我们先创建`HeroSearchService`服务，它会把搜索请求发送到我们服务器上的 Web API。
 
-
-<code-example path="toh-6/src/app/hero-search.service.ts" title="src/app/hero-search.service.ts">
+我们先创建`HeroSearchService`服务，它会把搜索请求发送到我们服务器上的 Web API。<code-example path="toh-pt6/src/app/hero-search.service.ts" title="src/app/hero-search.service.ts">
 
 </code-example>
 
 
-
 The `http.get()` call in `HeroSearchService` is similar to the one
 in the `HeroService`, although the URL now has a query string.
 
@@ -790,7 +666,6 @@ RxJS operator chaining makes response processing easy and readable.
   
 链式RxJS操作可以让我们简单、易读的处理响应数据。详见[下面关于操作符的讨论](tutorial/toh-pt6#rxjs-imports)
 
-
 ### HeroSearchComponent
 
 Let's create a new `HeroSearchComponent` that calls this new `HeroSearchService`.
@@ -799,25 +674,18 @@ Let's create a new `HeroSearchComponent` that calls this new `HeroSearchService`
 
 The component template is simple&mdash;just a text box and a list of matching search results.
 
-组件模板很简单，就是一个输入框和一个显示匹配的搜索结果的列表。
 
-
-<code-example path="toh-6/src/app/hero-search.component.html" title="src/app/hero-search.component.html">
+组件模板很简单，就是一个输入框和一个显示匹配的搜索结果的列表。<code-example path="toh-pt6/src/app/hero-search.component.html" title="src/app/hero-search.component.html">
 
 </code-example>
 
 
-
 Also, add styles for the new component.
 
 我们还要往这个新组件中添加样式。
 
 
-<code-example path="toh-6/src/app/hero-search.component.css" title="src/app/hero-search.component.css">
-
-</code-example>
-
-
+<code-example path="toh-pt6/src/app/hero-search.component.css" title="src/app/hero-search.component.css"></code-example>
 
 As the user types in the search box, a *keyup* event binding calls the component's `search()`
 method with the new search box value.
@@ -838,30 +706,24 @@ The `async` pipe subscribes to the `Observable` and produces the array of heroes
 
 Create the `HeroSearchComponent` class and metadata.
 
-该创建`HeroSearchComponent`类及其元数据了。
 
-
-<code-example path="toh-6/src/app/hero-search.component.ts" title="src/app/hero-search.component.ts">
+该创建`HeroSearchComponent`类及其元数据了。<code-example path="toh-pt6/src/app/hero-search.component.ts" title="src/app/hero-search.component.ts">
 
 </code-example>
 
 
-
 #### Search terms
 
 #### 搜索词
 
 Focus on the `searchTerms`:
 
-仔细看下这个`searchTerms`：
 
-
-<code-example path="toh-6/src/app/hero-search.component.ts" region="searchTerms">
+仔细看下这个`searchTerms`：<code-example path="toh-pt6/src/app/hero-search.component.ts" region="searchTerms">
 
 </code-example>
 
 
-
 A `Subject` is a producer of an _observable_ event stream;
 `searchTerms` produces an `Observable` of strings, the filter criteria for the name search.
 
@@ -870,10 +732,8 @@ A `Subject` is a producer of an _observable_ event stream;
 
   每当调用`search()`时都会调用`next()`来把新的字符串放进该主题的_可观察_流中。
 
-
 {@a ngoninit}
 
-
 #### Initialize the *heroes* property (*ngOnInit*)
 
 #### 初始化 *heroes* 属性(*ngOnInit*)
@@ -882,16 +742,13 @@ A `Subject` is also an `Observable`.
 You can turn the stream
 of search terms into a stream of `Hero` arrays and assign the result to the `heroes` property.
 
+
 `Subject`也是一个`Observable`对象。
-我们要把搜索词的流转换成`Hero`数组的流，并把结果赋值给`heroes`属性。
-
-
-<code-example path="toh-6/src/app/hero-search.component.ts" region="search">
+我们要把搜索词的流转换成`Hero`数组的流，并把结果赋值给`heroes`属性。<code-example path="toh-pt6/src/app/hero-search.component.ts" region="search">
 
 </code-example>
 
 
-
 Passing every user keystroke directly to the `HeroSearchService` would create an excessive amount of HTTP requests,
 taxing server resources and burning through the cellular network data plan.
 
@@ -925,34 +782,26 @@ It cancels and discards previous search observables, returning only the latest s
 
 <div class="l-sub-section">
 
-
-
-With the [switchMap operator](http://www.learnrxjs.io/operators/transformation/switchmap.html)
-(formerly known as `flatMapLatest`),
-every qualifying key event can trigger an `http()` method call.
-Even with a 300ms pause between requests, you could have multiple HTTP requests in flight
-and they may not return in the order sent.
+  With the [switchMap operator](http://www.learnrxjs.io/operators/transformation/switchmap.html)
+  (formerly known as `flatMapLatest`),
+  every qualifying key event can trigger an `http()` method call.
+  Even with a 300ms pause between requests, you could have multiple HTTP requests in flight
+  and they may not return in the order sent.
 
 借助[switchMap操作符](http://www.learnrxjs.io/operators/transformation/switchmap.html)
 (正式名称是`flatMapLatest`)
 每次符合条件的按键事件都会触发一次对`http()`方法的调用。即使在发送每个请求前都有 300 毫秒的延迟，
-我们仍然可能同时拥有多个在途的 HTTP 请求，并且它们返回的顺序未必就是发送时的顺序。
-
-`switchMap()` preserves the original request order while returning
- only the observable from the most recent `http` method call.
+我们仍然可能同时拥有多个在途的 HTTP 请求，并且它们返回的顺序未必就是发送时的顺序。`switchMap()` preserves the original request order while returning
+  only the observable from the most recent `http` method call.
 Results from prior calls are canceled and discarded.
 
 `switchMap()`保留了原始的请求顺序，并且只返回最近一次 `http` 调用返回的可观察对象。
-这是因为以前的调用都被取消或丢弃了。
-
-If the search text is empty, the `http()` method call is also short circuited
+这是因为以前的调用都被取消或丢弃了。If the search text is empty, the `http()` method call is also short circuited
 and an observable containing an empty array is returned.
 
-如果搜索框为空，我们还可以短路掉这次`http()`方法调用，并且直接返回一个包含空数组的可观察对象。
-
-Note that until the service supports that feature,_canceling_ the `HeroSearchService` Observable
+如果搜索框为空，我们还可以短路掉这次`http()`方法调用，并且直接返回一个包含空数组的可观察对象。Note that until the service supports that feature, _canceling_ the `HeroSearchService` Observable
 doesn't actually abort a pending HTTP request.
-For now , unwanted resultsare discarded.
+For now, unwanted results are discarded.
 
 注意，*取消*`HeroSearchService`的可观察对象并不会实际中止 (abort) 一个未完成的 HTTP 请求，
 除非服务支持这个特性，这个问题我们以后再讨论。
@@ -962,7 +811,6 @@ For now , unwanted resultsare discarded.
 </div>
 
 
-
 * `catch` intercepts a failed observable.
 The simple example prints the error to the console; a real life app would do better.
 Then to clear the search result, you return an observable containing an empty array .
@@ -972,7 +820,6 @@ Then to clear the search result, you return an observable containing an empty ar
 
 {@a rxjs-imports}
 
-
 ### Import RxJS operators
 
 ### 导入 RxJS 操作符
@@ -985,16 +832,13 @@ The base implementation includes only what Angular itself requires.
 When you need more RxJS features, extend  `Observable` by *importing* the libraries in which they are defined.
 Here are all the RxJS imports that _this_ component needs:
 
-如果想要更多的RxJS功能，我们必须*导入*其所定义的库来扩展`Observable`对象，
-  以下是*这个*模块所需导入的所有RxJS操作符：
-  
 
-<code-example path="toh-6/src/app/hero-search.component.ts" region="rxjs-imports" title="src/app/hero-search.component.ts (rxjs imports)" linenums="false">
+如果想要更多的RxJS功能，我们必须*导入*其所定义的库来扩展`Observable`对象，
+  以下是*这个*模块所需导入的所有RxJS操作符：<code-example path="toh-pt6/src/app/hero-search.component.ts" region="rxjs-imports" title="src/app/hero-search.component.ts (rxjs imports)" linenums="false">
 
 </code-example>
 
 
-
 The `import 'rxjs/add/...'` syntax may be unfamiliar.
 It's missing the usual list of symbols between the braces: `{...}`.
 
@@ -1014,15 +858,12 @@ loads and executes the library's script file which, in turn, adds the operator t
 
 Add the hero search HTML element to the bottom of the `DashboardComponent` template.
 
-将表示“英雄搜索”组件的 HTML 元素添加到`DashboardComponent`模版的最后面。
 
-
-<code-example path="toh-6/src/app/dashboard.component.html" title="src/app/dashboard.component.html" linenums="false">
+将表示“英雄搜索”组件的 HTML 元素添加到`DashboardComponent`模版的最后面。<code-example path="toh-pt6/src/app/dashboard.component.html" title="src/app/dashboard.component.html" linenums="false">
 
 </code-example>
 
 
-
 Finally, import `HeroSearchComponent` from
 <code>hero-search.component.ts</code>
 and add it to the `declarations` array.
@@ -1030,26 +871,17 @@ and add it to the `declarations` array.
 最后，从<span ngio-ex>hero-search.component.ts</span>中导入`HeroSearchComponent`并将其添加到`declarations`数组中。
 
 
-<code-example path="toh-6/src/app/app.module.ts" region="search" title="src/app/app.module.ts (search)">
-
-</code-example>
-
-
+<code-example path="toh-pt6/src/app/app.module.ts" region="search" title="src/app/app.module.ts (search)"></code-example>
 
 Run the app again. In the Dashboard, enter some text in the search box.
 If you enter characters that match any existing hero names, you'll see something like this.
 
+
 再次运行该应用，跳转到*仪表盘*，并在英雄下方的搜索框里输入一些文本。
-运行效果如下：
-
-
-<figure class='image-display'>
-  <img src='assets/images/devguide/toh/toh-hero-search.png' alt="Hero Search Component"></img>
+运行效果如下：<figure >
+  <img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component">
 </figure>
 
-
-
-
 ## App structure and code
 
 ## 应用的结构与代码
@@ -1062,144 +894,44 @@ Verify that you have the following structure:
 
 
 <div class='filetree'>
-
-  <div class='file'>
-    angular-tour-of-heroes
-  </div>
-
+  <div class='file'>angular-tour-of-heroes</div>
   <div class='children'>
-
-    <div class='file'>
-      src
-    </div>
-
+    <div class='file'>src</div>
     <div class='children'>
-
-      <div class='file'>
-        app
-      </div>
-
+      <div class='file'>app</div>
       <div class='children'>
-
-        <div class='file'>
-          app.component.ts
-        </div>
-
-        <div class='file'>
-          app.component.css
-        </div>
-
-        <div class='file'>
-          app.module.ts
-        </div>
-
-        <div class='file'>
-          app-routing.module.ts
-        </div>
-
-        <div class='file'>
-          dashboard.component.css
-        </div>
-
-        <div class='file'>
-          dashboard.component.html
-        </div>
-
-        <div class='file'>
-          dashboard.component.ts
-        </div>
-
-        <div class='file'>
-          hero.ts
-        </div>
-
-        <div class='file'>
-          hero-detail.component.css
-        </div>
-
-        <div class='file'>
-          hero-detail.component.html
-        </div>
-
-        <div class='file'>
-          hero-detail.component.ts
-        </div>
-
-        <div class='file'>
-          hero-search.component.html (new)
-        </div>
-
-        <div class='file'>
-          hero-search.component.css (new)
-        </div>
-
-        <div class='file'>
-          hero-search.component.ts (new)
-        </div>
-
-        <div class='file'>
-          hero-search.service.ts (new)
-        </div>
-
-        <div class='file'>
-          hero.service.ts
-        </div>
-
-        <div class='file'>
-          heroes.component.css
-        </div>
-
-        <div class='file'>
-          heroes.component.html
-        </div>
-
-        <div class='file'>
-          heroes.component.ts
-        </div>
-
-        <div class='file'>
-          in-memory-data.service.ts (new)
-        </div>
-
+        <div class='file'>app.component.ts</div>
+        <div class='file'>app.component.css</div>
+        <div class='file'>app.module.ts</div>
+        <div class='file'>app-routing.module.ts</div>
+        <div class='file'>dashboard.component.css</div>
+        <div class='file'>dashboard.component.html</div>
+        <div class='file'>dashboard.component.ts</div>
+        <div class='file'>hero.ts</div>
+        <div class='file'>hero-detail.component.css</div>
+        <div class='file'>hero-detail.component.html</div>
+        <div class='file'>hero-detail.component.ts</div>
+        <div class='file'>hero-search.component.html (new)</div>
+        <div class='file'>hero-search.component.css (new)</div>
+        <div class='file'>hero-search.component.ts (new)</div>
+        <div class='file'>hero-search.service.ts (new)</div>
+        <div class='file'>hero.service.ts</div>
+        <div class='file'>heroes.component.css</div>
+        <div class='file'>heroes.component.html</div>
+        <div class='file'>heroes.component.ts</div>
+        <div class='file'>in-memory-data.service.ts (new)</div>
       </div>
-
-      <div class='file'>
-        main.ts
-      </div>
-
-      <div class='file'>
-        index.html
-      </div>
-
-      <div class='file'>
-        styles.css
-      </div>
-
-      <div class='file'>
-        systemjs.config.js
-      </div>
-
-      <div class='file'>
-        tsconfig.json
-      </div>
-
+      <div class='file'>main.ts</div>
+      <div class='file'>index.html</div>
+      <div class='file'>styles.css</div>
+      <div class='file'>systemjs.config.js</div>
+      <div class='file'>tsconfig.json</div>
     </div>
-
-    <div class='file'>
-      node_modules ...
-    </div>
-
-    <div class='file'>
-      package.json
-    </div>
-
+    <div class='file'>node_modules ...</div>
+    <div class='file'>package.json</div>
   </div>
-
 </div>
 
-
-
-
 ## Home Stretch
 
 ## 最后冲刺
@@ -1238,81 +970,31 @@ Here are the files you added or changed in this page.
 
 
 <code-tabs>
-
-  <code-pane title="app.comp...ts" path="toh-6/src/app/app.component.ts">
-
-  </code-pane>
-
-  <code-pane title="app.mod...ts" path="toh-6/src/app/app.module.ts">
-
-  </code-pane>
-
-  <code-pane title="heroes.comp...ts" path="toh-6/src/app/heroes.component.ts">
-
-  </code-pane>
-
-  <code-pane title="heroes.comp...html" path="toh-6/src/app/heroes.component.html">
-
-  </code-pane>
-
-  <code-pane title="heroes.comp...css" path="toh-6/src/app/heroes.component.css">
-
-  </code-pane>
-
-  <code-pane title="hero-detail.comp...ts" path="toh-6/src/app/hero-detail.component.ts">
-
-  </code-pane>
-
-  <code-pane title="hero-detail.comp...html" path="toh-6/src/app/hero-detail.component.html">
-
-  </code-pane>
-
-  <code-pane title="hero.service.ts" path="toh-6/src/app/hero.service.ts">
-
-  </code-pane>
-
-  <code-pane title="in-memory-data.service.ts" path="toh-6/src/app/in-memory-data.service.ts">
-
-  </code-pane>
-
+  <code-pane title="app.comp...ts" path="toh-pt6/src/app/app.component.ts"></code-pane>
+  <code-pane title="app.mod...ts" path="toh-pt6/src/app/app.module.ts"></code-pane>
+  <code-pane title="heroes.comp...ts" path="toh-pt6/src/app/heroes.component.ts"></code-pane>
+  <code-pane title="heroes.comp...html" path="toh-pt6/src/app/heroes.component.html"></code-pane>
+  <code-pane title="heroes.comp...css" path="toh-pt6/src/app/heroes.component.css"></code-pane>
+  <code-pane title="hero-detail.comp...ts" path="toh-pt6/src/app/hero-detail.component.ts"></code-pane>
+  <code-pane title="hero-detail.comp...html" path="toh-pt6/src/app/hero-detail.component.html"></code-pane>
+  <code-pane title="hero.service.ts" path="toh-pt6/src/app/hero.service.ts"></code-pane>
+  <code-pane title="in-memory-data.service.ts" path="toh-pt6/src/app/in-memory-data.service.ts"></code-pane>
 </code-tabs>
 
-
-
 <code-tabs>
-
-  <code-pane title="hero-search.service.ts" path="toh-6/src/app/hero-search.service.ts">
-
-  </code-pane>
-
-  <code-pane title="hero-search.component.ts" path="toh-6/src/app/hero-search.component.ts">
-
-  </code-pane>
-
-  <code-pane title="hero-search.component.html" path="toh-6/src/app/hero-search.component.html">
-
-  </code-pane>
-
-  <code-pane title="hero-search.component.css" path="toh-6/src/app/hero-search.component.css">
-
-  </code-pane>
-
+  <code-pane title="hero-search.service.ts" path="toh-pt6/src/app/hero-search.service.ts"></code-pane>
+  <code-pane title="hero-search.component.ts" path="toh-pt6/src/app/hero-search.component.ts"></code-pane>
+  <code-pane title="hero-search.component.html" path="toh-pt6/src/app/hero-search.component.html"></code-pane>
+  <code-pane title="hero-search.component.css" path="toh-pt6/src/app/hero-search.component.css"></code-pane>
 </code-tabs>
 
-
-
-<div class="l-sub-section">
-
-
-
 ## Next step
 
 ## 下一步
 
-Return to the [learning path](guide/learning-angular#architecture), where
-you can read more about the concepts and practices found in this tutorial.
-
-返回[学习路径](guide/learning-angular#architecture)，你可以阅读在本教程中探索到的概念和实践。
-
-</div>
+That concludes the "Tour of Heroes" tutorial.
+You're ready to learn more about Angular development in the fundamentals section,
+starting with the [Architecture](guide/architecture "Architecture") guide.
 
+这就是《英雄指南》教程的全部内容。
+现在可以深入学习 Angular 的开发原理了，你可以从[架构](guide/architecture "Architecture")开始学。
\ No newline at end of file
diff --git a/aio/e2e/app.e2e-spec.ts b/aio/e2e/app.e2e-spec.ts
index b5271d6041..83bff399ab 100644
--- a/aio/e2e/app.e2e-spec.ts
+++ b/aio/e2e/app.e2e-spec.ts
@@ -5,8 +5,8 @@ describe('site App', function() {
   let page: SitePage;
 
   beforeEach(() => {
+    SitePage.setWindowWidth(1050);   // Make the window wide enough to show the SideNav side-by-side.
     page = new SitePage();
-    page.setWindowWidth(1050);   // Make the window wide enough to show the SideNav side-by-side.
     page.navigateTo();
   });
 
@@ -15,18 +15,19 @@ describe('site App', function() {
     expect(page.getDocViewerText()).toMatch(/Progressive web apps/i);
   });
 
-  it('should show the tutorial index page at `/tutorial/`', () => {
+  it('should show the tutorial index page at `/tutorial/` after jitterbugging through features', () => {
     // check that we can navigate directly to the tutorial page
     page.navigateTo('tutorial/');
     expect(page.getDocViewerText()).toMatch(/Tutorial: Tour of Heroes/i);
 
     // navigate to a different page
     page.getLink('features').click();
-    expect(page.getDocViewerText()).toMatch(/Features/i);
+    expect(page.getDocViewerText()).toMatch(/Progressive web apps/i);
 
-    // Show the menu; the tutorial section should be fully open from previous visit
+    // Show the menu
     page.docsMenuLink.click();
 
+    // Tutorial folder should still be expanded because this test runs in wide mode
     // Navigate to the tutorial introduction via a link in the sidenav
     page.getNavItem(/introduction/i).click();
     expect(page.getDocViewerText()).toMatch(/Tutorial: Tour of Heroes/i);
@@ -38,11 +39,30 @@ describe('site App', function() {
     expect(page.getInnerHtml(codeExample)).toContain('&lt;h1&gt;Tour of Heroes&lt;/h1&gt;');
   });
 
-  describe('api-docs', () => {
-    it('should show a link to github', () => {
-      page.navigateTo('api/common/NgClass');
-      expect(page.ghLink.getAttribute('href'))
-          .toMatch(/https:\/\/github.com\/angular\/angular\/tree\/.+\/packages\/common\/src\/directives\/ng_class\.ts/);
+  describe('scrolling to the top', () => {
+    it('should scroll to the top when navigating to another page', () => {
+      page.navigateTo('guide/docs');
+      page.scrollToBottom();
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBeGreaterThan(0));
+
+      page.navigateTo('guide/api');
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBe(0));
+    });
+
+    it('should scroll to the top when navigating to the same page', () => {
+      page.navigateTo('guide/docs');
+      page.scrollToBottom();
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBeGreaterThan(0));
+
+      page.navigateTo('guide/docs');
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBe(0));
+    });
+  });
+
+  describe('tutorial docs', () => {
+    it('should not render a paragraph element inside the h1 element', () => {
+      page.navigateTo('tutorial/toh-pt1');
+      expect(element(by.css('h1 p')).isPresent()).toBeFalsy();
     });
   });
 
diff --git a/aio/e2e/app.po.ts b/aio/e2e/app.po.ts
index 6d28739a5a..8de49d0f29 100644
--- a/aio/e2e/app.po.ts
+++ b/aio/e2e/app.po.ts
@@ -3,6 +3,7 @@ import { browser, element, by, promise, ElementFinder } from 'protractor';
 const githubRegex = /https:\/\/github.com\/angular\/angular\//;
 
 export class SitePage {
+
   links = element.all(by.css('md-toolbar a'));
   docsMenuLink = element(by.cssContainingText('aio-top-menu a', 'Docs'));
   docViewer = element(by.css('aio-doc-viewer'));
@@ -12,8 +13,14 @@ export class SitePage {
     .filter((a: ElementFinder) => a.getAttribute('href').then(href => githubRegex.test(href)))
     .first();
   gaReady: promise.Promise<any>;
+
+  static setWindowWidth(newWidth: number) {
+    const win = browser.driver.manage().window();
+    return win.getSize().then(oldSize => win.setSize(newWidth, oldSize.height));
+  }
+
   getNavItem(pattern: RegExp) {
-    return element.all(by.css('aio-nav-item a'))
+    return element.all(by.css('aio-nav-item .vertical-menu-item'))
                   .filter(element => element.getText().then(text => pattern.test(text)))
                   .first();
   }
@@ -35,9 +42,12 @@ export class SitePage {
     return browser.executeScript('return arguments[0].innerHTML;', element);
   }
 
-  setWindowWidth(newWidth: number) {
-    const win = browser.driver.manage().window();
-    return win.getSize().then(oldSize => win.setSize(newWidth, oldSize.height));
+  getScrollTop() {
+    return browser.executeScript('return window.pageYOffset');
+  }
+
+  scrollToBottom() {
+    return browser.executeScript('window.scrollTo(0, document.body.scrollHeight)');
   }
 
   /**
diff --git a/aio/firebase.json b/aio/firebase.json
index 7604fbf851..b4710b8c87 100644
--- a/aio/firebase.json
+++ b/aio/firebase.json
@@ -5,6 +5,39 @@
   "hosting": {
     "public": "dist",
     "cleanUrls": true,
+    "redirects": [
+      // cli-quickstart.html glossary.html, quickstart.html, http.html, style-guide.html, styleguide
+      {"type": 301, "source": "/docs/ts/latest/cli-quickstart.html",             "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/guide/cli-quickstart",                           "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/docs/ts/latest/glossary.html",                   "destination": "/guide/glossary"},
+      {"type": 301, "source": "/docs/ts/latest/quickstart.html",                 "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/docs/ts/latest/guide/server-communication.html", "destination": "/guide/http"},
+      {"type": 301, "source": "/docs/ts/latest/guide/style-guide.html",          "destination": "/guide/styleguide"},
+      {"type": 301, "source": "/styleguide",                                     "destination": "/guide/styleguide"},
+
+      // cookbook/component-communication.html
+      {"type": 301, "source": "/docs/ts/latest/cookbook/component-communication.html", "destination": "/guide/component-interaction"},
+
+      // cookbook, cookbook/, cookbook/index.html
+      {"type": 301, "source": "/docs/ts/latest/cookbook",            "destination": "/docs"},
+      {"type": 301, "source": "/docs/ts/latest/cookbook/",           "destination": "/docs"},
+      {"type": 301, "source": "/docs/ts/latest/cookbook/index.html", "destination": "/docs"},
+
+      // cookbook/dependency-injection.html
+      {"type": 301, "source": "/docs/ts/latest/cookbook/dependency-injection.html", "destination": "/guide/dependency-injection-in-action"},
+
+      // cookbook/*.html
+      {"type": 301, "source": "/docs/ts/latest/cookbook/:cookbook.html", "destination": "/guide/:cookbook"},
+
+      // docs/ts/latest/api/*/index/*-type.html
+      {"type": 301, "source": "/docs/ts/latest/api/:package/index/:api-*.html", "destination": "/api/:package/:api"},
+
+      // docs/ts/latest
+      {"type": 301, "source": "/docs/ts/latest", "destination": "/docs"},
+
+      // guide/*, tutorial/*, **/*
+      {"type": 301, "source": "/docs/ts/latest/:any*", "destination": "/:any*"}
+    ],
     "rewrites": [
       {
         "source": "**/!(*.*)",
diff --git a/aio/karma.conf.js b/aio/karma.conf.js
index 84b4cd5aca..f89999269a 100644
--- a/aio/karma.conf.js
+++ b/aio/karma.conf.js
@@ -16,6 +16,7 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     files: [
+      { pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true },
       { pattern: './src/test.ts', watched: false }
     ],
     preprocessors: {
diff --git a/aio/ngsw-manifest.json b/aio/ngsw-manifest.json
index 6e15884792..a9e2470c31 100644
--- a/aio/ngsw-manifest.json
+++ b/aio/ngsw-manifest.json
@@ -1,23 +1,26 @@
 {
+  "external": {
+    "urls": [
+      {"url": "https://fonts.googleapis.com/css?family=Droid+Sans+Mono"},
+      {"url": "https://fonts.gstatic.com/s/droidsansmono/v7/ns-m2xQYezAtqh7ai59hJYdJ2JT0J65PSe7wdxAnx_I.woff2"},
+      {"url": "https://fonts.googleapis.com/icon?family=Material+Icons"},
+      {"url": "https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2"},
+      {"url": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"}
+    ]
+  },
   "static.ignore": [
     "\\.js\\.map$",
-    "^\/assets\/images\/(bios|cookbooks|devguide|examples)\/",
-    "^\/content\/docs\/.*\/"
+    "^(?:/|\\\\)assets(?:/|\\\\)images(?:/|\\\\).*(?:/|\\\\)_unused(?:/|\\\\)",
+    "^(?:/|\\\\)generated(?:/|\\\\)(?:docs(?:/|\\\\)(?!api(?:/|\\\\)api-list\\.json).*|images(?:/|\\\\)(?!marketing(?:/|\\\\)).*|live-examples|zips)(?:/|\\\\)"
+  ],
+  "static.versioned": [
+    "\\.[0-9a-z]{20}\\."
   ],
   "routing": {
     "index": "/index.html",
     "routes": {
-      "/": {
-        "prefix": false
-      },
-      "/about": {
-        "prefix": true
-      },
-      "/tutorial": {
-        "prefix": true
-      },
-      "/guide": {
-        "prefix": true
+      "^(?!/docs/ts/latest|/guide/cli-quickstart|/styleguide).*/(?!e?plnkr)[^/.]*$": {
+        "match": "regex"
       }
     }
   }
diff --git a/aio/package.json b/aio/package.json
index 946dba3ca1..6881103fdb 100644
--- a/aio/package.json
+++ b/aio/package.json
@@ -7,80 +7,126 @@
   "license": "MIT",
   "scripts": {
     "ng": "yarn check-env && ng",
-    "setup": "yarn && yarn boilerplate:remove && yarn boilerplate:add",
-    "start": "ng serve -p 0 --open",
-    "build": "yarn generate-plunkers && yarn docs && ng build -prod -sm",
-    "lint": "yarn check-env && yarn docs-lint && ng lint",
-    "test": "yarn check-env && ng test --sourcemap=false",
-    "pree2e": "yarn ~~update-webdriver",
-    "e2e": "yarn check-env && ng e2e --no-webdriver-update",
+    "start": "yarn check-env && ng serve",
+    "prebuild": "yarn check-env && yarn setup",
+    "build": "ng build -prod -sm -vc=false",
+    "postbuild": "yarn sw-manifest && yarn sw-copy",
+    "lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint",
+    "test": "yarn check-env && ng test",
+    "pree2e": "yarn check-env && yarn ~~update-webdriver",
+    "e2e": "ng e2e --no-webdriver-update",
+    "setup": "yarn && yarn build-ie-polyfills && yarn boilerplate:remove && yarn boilerplate:add && yarn generate-plunkers && yarn generate-zips && yarn docs",
+    "pretest-pwa-score-local": "yarn build",
+    "test-pwa-score-local": "concurrently --kill-others --success first \"http-server dist -p 4200 --silent\" \"yarn test-pwa-score -- http://localhost:4200 90\"",
+    "test-pwa-score": "node scripts/test-pwa-score",
+    "example-e2e": "node ./tools/examples/run-example-e2e",
+    "example-lint": "tslint -c \"content/examples/tslint.json\" \"content/examples/**/*.ts\" -e \"content/examples/styleguide/**/*.avoid.ts\"",
     "deploy-preview": "scripts/deploy-preview.sh",
-    "deploy-staging": "firebase use staging --token \"$FIREBASE_TOKEN\" && yarn ~~deploy",
-    "check-env": "node ../tools/check-environment.js",
-    "predocs": "rimraf src/content",
-    "docs": "dgeni ./transforms/angular.io-package",
-    "docs-lint": "eslint --ignore-path=\"transforms/.eslintignore\" transforms",
-    "docs-test": "node ../dist/tools/cjs-jasmine/index-tools ../../transforms/**/*.spec.js",
+    "deploy-staging": "scripts/deploy-to-firebase.sh staging",
+    "deploy-production": "scripts/deploy-to-firebase.sh production",
+    "check-env": "node scripts/check-environment",
+    "payload-size": "scripts/payload.sh",
+    "predocs": "rimraf src/generated/{docs,*.json}",
+    "docs": "dgeni ./tools/transforms/angular.io-package",
+    "docs-watch": "node tools/transforms/authors-package/watchr.js",
+    "docs-lint": "eslint --ignore-path=\"tools/transforms/.eslintignore\" tools/transforms",
+    "docs-test": "node tools/transforms/test.js",
+    "serve-and-sync": "concurrently --kill-others \"yarn docs-watch\" \"yarn start\"",
     "~~update-webdriver": "webdriver-manager update --standalone false --gecko false",
-    "pre~~deploy": "yarn build",
-    "~~deploy": "firebase deploy --message \"Commit: $TRAVIS_COMMIT\" --non-interactive --token \"$FIREBASE_TOKEN\"",
-    "boilerplate:add": "node ./tools/examples/add-example-boilerplate add",
-    "boilerplate:remove": "node ./tools/examples/add-example-boilerplate remove",
-    "generate-plunkers": "node ./tools/plunker-builder/generatePlunkers"
+    "boilerplate:add": "node ./tools/examples/example-boilerplate add",
+    "boilerplate:remove": "node ./tools/examples/example-boilerplate remove",
+    "boilerplate:test": "node tools/examples/test.js",
+    "generate-plunkers": "node ./tools/plunker-builder/generatePlunkers",
+    "generate-zips": "node ./tools/example-zipper/generateZips",
+    "sw-manifest": "ngu-sw-manifest --dist dist --in ngsw-manifest.json --out dist/ngsw-manifest.json",
+    "sw-copy": "cp node_modules/@angular/service-worker/bundles/worker-basic.min.js dist/",
+    "postinstall": "node tools/cli-patches/patch.js && uglifyjs node_modules/lunr/lunr.js -c -m -o src/assets/js/lunr.min.js --source-map",
+    "build-ie-polyfills": "node node_modules/webpack/bin/webpack.js -p src/ie-polyfills.js src/generated/ie-polyfills.min.js"
+  },
+  "engines": {
+    "node": ">=6.9.5 <7.0.0",
+    "yarn": ">=0.21.3 <1.0.0"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "next",
-    "@angular/common": "next",
-    "@angular/compiler": "next",
-    "@angular/core": "next",
-    "@angular/forms": "next",
-    "@angular/http": "next",
-    "@angular/material": "^2.0.0-beta.3",
-    "@angular/platform-browser": "next",
-    "@angular/platform-browser-dynamic": "next",
-    "@angular/platform-server": "next",
-    "@angular/router": "next",
-    "@angular/service-worker": "^1.0.0-beta.8",
+    "@angular/animations": "^4.3.1",
+    "@angular/cdk": "^2.0.0-beta.8",
+    "@angular/common": "^4.3.1",
+    "@angular/compiler": "^4.3.1",
+    "@angular/core": "^4.3.1",
+    "@angular/forms": "^4.3.1",
+    "@angular/http": "^4.3.1",
+    "@angular/material": "^2.0.0-beta.8",
+    "@angular/platform-browser": "^4.3.1",
+    "@angular/platform-browser-dynamic": "^4.3.1",
+    "@angular/platform-server": "^4.3.1",
+    "@angular/router": "^4.3.1",
+    "@angular/service-worker": "^1.0.0-beta.16",
+    "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
+    "jasmine": "^2.6.0",
+    "ng-pwa-tools": "^0.0.10",
+    "ngo": "angular/ngo",
     "rxjs": "^5.2.0",
-    "zone.js": "^0.8.4"
+    "tslib": "^1.7.1",
+    "web-animations-js": "^2.2.5",
+    "zone.js": "^0.8.12"
   },
   "devDependencies": {
-    "@angular/cli": "^1.0.0",
-    "@angular/compiler-cli": "next",
-    "@types/jasmine": "2.5.38",
+    "@angular/cli": "angular/cli-builds#webpack-next",
+    "@angular/compiler-cli": "^4.3.1",
+    "@types/jasmine": "^2.5.52",
     "@types/node": "~6.0.60",
+    "archiver": "^1.3.0",
     "canonical-path": "^0.0.2",
     "codelyzer": "~2.0.0",
+    "concurrently": "^3.4.0",
+    "cross-spawn": "^5.1.0",
     "dgeni": "^0.4.7",
-    "dgeni-packages": "0.17.0",
+    "dgeni-packages": "^0.20.0",
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",
     "firebase-tools": "^3.2.1",
-    "fs-extra": "^2.1.1",
+    "fs-extra": "^2.1.2",
     "globby": "^6.1.0",
+    "hast-util-is-element": "^1.0.0",
+    "hast-util-to-string": "^1.0.0",
     "html": "^1.0.0",
-    "jasmine-core": "~2.5.2",
-    "jasmine-spec-reporter": "~3.2.0",
+    "http-server": "^0.9.0",
+    "ignore": "^3.3.3",
+    "image-size": "^0.5.1",
+    "jasmine-core": "^2.6.4",
+    "jasmine-spec-reporter": "^4.1.0",
     "jsdom": "^9.12.0",
-    "karma": "~1.4.1",
-    "karma-chrome-launcher": "~2.0.0",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
-    "karma-jasmine": "~1.1.0",
+    "karma": "^1.7.0",
+    "karma-chrome-launcher": "^2.1.1",
+    "karma-cli": "^1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.3.0",
+    "karma-jasmine": "^1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "lighthouse": "^2.1.0",
     "lodash": "^4.17.4",
+    "lunr": "^2.1.0",
     "protractor": "~5.1.0",
+    "rehype": "^4.0.0",
+    "rehype-autolink-headings": "^2.0.0",
+    "rehype-slug": "^2.0.0",
     "remark": "^7.0.0",
     "remark-html": "^6.0.0",
-    "rho": "https://github.com/petebacondarwin/rho#master",
     "rimraf": "^2.6.1",
+    "semver": "^5.3.0",
     "shelljs": "^0.7.7",
+    "tree-kill": "^1.1.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",
-    "typescript": "2.2.0",
-    "vrsource-tslint-rules": "^4.0.1"
+    "typescript": "2.3.2",
+    "uglify-js": "^3.0.15",
+    "unist-util-filter": "^0.2.1",
+    "unist-util-source": "^1.0.1",
+    "unist-util-visit": "^1.1.1",
+    "vrsource-tslint-rules": "^4.0.1",
+    "watchr": "^3.0.1",
+    "yargs": "^7.0.2"
   }
 }
diff --git a/aio/scripts/_payload-limits.sh b/aio/scripts/_payload-limits.sh
new file mode 100755
index 0000000000..b855e8e681
--- /dev/null
+++ b/aio/scripts/_payload-limits.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+set -u -e -o pipefail
+
+declare -A limitUncompressed
+limitUncompressed=(["inline"]=1600 ["main"]=600000 ["polyfills"]=35000)
+declare -A limitGzip7
+limitGzip7=(["inline"]=1000 ["main"]=140000 ["polyfills"]=12500)
+declare -A limitGzip9
+limitGzip9=(["inline"]=1000 ["main"]=140000 ["polyfills"]=12500)
diff --git a/aio/scripts/check-environment.js b/aio/scripts/check-environment.js
new file mode 100644
index 0000000000..cd571b64ac
--- /dev/null
+++ b/aio/scripts/check-environment.js
@@ -0,0 +1,90 @@
+/**
+ * Usage:
+ *   node scripts/check-environment
+ *
+ * Checks that the expected Node and yarn versions are installed.
+ *
+ *
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * !!!                                                                                   !!!
+ * !!!  This file is special in that it must be able to execute with wrong Node version  !!!
+ * !!!  or even when node_modules are missing.                                           !!!
+ * !!!                                                                                   !!!
+ * !!!  Do not depend on Node4+ features or presence of npm packages here.               !!!
+ * !!!                                                                                   !!!
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ *
+ * This is a slightly simplified, trimmed-down version of
+ * [tools/check-environment.js](https://github.com/gkalpak/angular/blob/3896c60be/tools/check-environment.js).
+ * We use a different file, because some of the tests and error messages are not relevant for `aio/`.
+ */
+
+
+'use strict';
+
+var exec = require('child_process').exec;
+var engines = require(__dirname + '/../package.json').engines;
+var semver;
+
+// Import `semver`.
+try {
+  semver = require('semver');
+} catch (e) {
+  reportIssues(['You are missing some npm dependencies. Run: yarn install']);
+  console.error(
+      'Your environment doesn\'t provide the prerequisite dependencies.\n' +
+      'Please fix the issues listed above and then rerun the command.\n' +
+      'Check out https://github.com/angular/angular/blob/master/aio/README.md for more info.');
+  process.exit(1);
+}
+
+// Check Node/yarn versions.
+checkEnvironment({
+  nodeVersion: engines.node,
+  yarnVersion: engines.yarn
+});
+
+// Helpers
+function checkEnvironment(expected) {
+  exec('yarn --version', function(yarnErr, yarnStdout) {
+    var actualNodeVersion = process.version;
+    var actualYarnVersion = !yarnErr && semver.clean(yarnStdout);
+    var issues = [];
+
+    // Check Node version.
+    if (!semver.satisfies(actualNodeVersion, expected.nodeVersion)) {
+      issues.push(
+          'You are running an unsupported Node version. Expected: ' + expected.nodeVersion +
+          ' Found: ' + actualNodeVersion + '. Use nvm to update your Node version.');
+    }
+
+    // Check yarn version.
+    if (yarnErr) {
+      issues.push(
+          'You don\'t have yarn globally installed. This is required if you want to work on this ' +
+          'project. Installation instructions: https://yarnpkg.com/lang/en/docs/install/');
+    } else if (!semver.satisfies(actualYarnVersion, expected.yarnVersion)) {
+      issues.push(
+          'You are running an unsupported yarn version. Expected: ' + expected.yarnVersion +
+          ' Found: ' + actualYarnVersion + '. For instructions see:' +
+          ' https://yarnpkg.com/lang/en/docs/install/');
+    }
+
+    reportIssues(issues);
+  });
+}
+
+function reportIssues(issues) {
+  if (!issues.length) return;
+
+  console.warn('');
+  console.warn('!'.repeat(110));
+  console.warn('!!!  Your environment is not in a good shape. The following issues were found:');
+  issues.forEach(function(issue) { console.warn('!!!   - ' + issue); });
+  console.warn('!'.repeat(110));
+  console.warn('');
+
+  if (process.env.CI) {
+    process.exit(1);
+  }
+}
diff --git a/aio/scripts/deploy-preview.sh b/aio/scripts/deploy-preview.sh
index b032388fd2..4afd49a5cf 100755
--- a/aio/scripts/deploy-preview.sh
+++ b/aio/scripts/deploy-preview.sh
@@ -2,31 +2,55 @@
 
 # WARNING: NGBUILDS_IO_KEY should NOT be printed.
 set +x -eu -o pipefail
-
-
-INPUT_DIR=dist/
-OUTPUT_FILE=/tmp/snapshot.tar.gz
-AIO_BUILDS_HOST=https://ngbuilds.io
-UPLOAD_URL=$AIO_BUILDS_HOST/create-build/$TRAVIS_PULL_REQUEST/$TRAVIS_PULL_REQUEST_SHA
-
-cd "`dirname $0`/.."
-
-yarn run build
-tar --create --gzip --directory "$INPUT_DIR" --file "$OUTPUT_FILE" .
-
 exec 3>&1
-httpCode=$(
-  curl --include --location --request POST --silent --write-out "\nHTTP_CODE: %{http_code}\n" \
-       --header "Authorization: Token $NGBUILDS_IO_KEY" --data-binary "@$OUTPUT_FILE" "$UPLOAD_URL" \
-  | sed 's/\r\n/\n/' \
-  | tee /dev/fd/3 \
-  | tail -1 \
-  | sed 's/HTTP_CODE: //'
+
+
+readonly INPUT_DIR=dist/
+readonly OUTPUT_FILE=/tmp/snapshot.tar.gz
+readonly AIO_BUILDS_DOMAIN=ngbuilds.io
+readonly UPLOAD_URL=https://$AIO_BUILDS_DOMAIN/create-build/$TRAVIS_PULL_REQUEST/$TRAVIS_PULL_REQUEST_SHA
+
+readonly SHORT_SHA=$(echo $TRAVIS_PULL_REQUEST_SHA | cut -c1-7)
+readonly DEPLOYED_URL=https://pr$TRAVIS_PULL_REQUEST-$SHORT_SHA.$AIO_BUILDS_DOMAIN
+
+readonly skipBuild=$([[ "$1" == "--skip-build" ]] && echo "true" || echo "");
+readonly relevantChangedFilesCount=$(git diff --name-only $TRAVIS_COMMIT_RANGE | grep -P "^(?:aio|packages)/(?!.*[._]spec\.[jt]s$)" | wc -l)
+
+(
+  cd "`dirname $0`/.."
+
+  # Do not deploy unless this PR has touched relevant files: `aio/` or `packages/` (except for spec files)
+  if [[ $relevantChangedFilesCount -eq 0 ]]; then
+    echo "Skipping deploy because this PR did not touch any relevant files."
+    exit 0
+  fi
+
+  # Build the app
+  if [ "$skipBuild" != "true" ]; then
+    yarn build
+  fi
+  tar --create --gzip --directory "$INPUT_DIR" --file "$OUTPUT_FILE" .
+  yarn payload-size
+
+  # Deploy to staging
+  readonly httpCode=$(
+    curl --include --location --request POST --silent --write-out "\nHTTP_CODE: %{http_code}\n" \
+        --header "Authorization: Token $NGBUILDS_IO_KEY" --data-binary "@$OUTPUT_FILE" "$UPLOAD_URL" \
+    | sed 's/\r\n/\n/' \
+    | tee /dev/fd/3 \
+    | tail -1 \
+    | sed 's/HTTP_CODE: //'
+  )
+
+  # Exit with an error if the request failed.
+  # (Ignore 409 failures, which mean trying to re-deploy for the same PR/SHA.)
+  if [ $httpCode -lt 200 ] || ([ $httpCode -ge 400 ] && [ $httpCode -ne 409 ]); then
+    exit 1
+  fi
+
+  # Run PWA-score tests (unless the deployment is not public yet;
+  # i.e. it could not be automatically verified).
+  if [ $httpCode -ne 202 ]; then
+    yarn test-pwa-score -- "$DEPLOYED_URL" "$MIN_PWA_SCORE"
+  fi
 )
-
-# Exit with an error if the request failed
-if [ $httpCode -lt 200 ] || [ $httpCode -ge 400 ]; then
-  exit 1
-fi
-
-cd -
diff --git a/aio/scripts/deploy-to-firebase.sh b/aio/scripts/deploy-to-firebase.sh
new file mode 100755
index 0000000000..a14ba8965b
--- /dev/null
+++ b/aio/scripts/deploy-to-firebase.sh
@@ -0,0 +1,51 @@
+#!/usr/bin/env bash
+
+# WARNING: FIREBASE_TOKEN should NOT be printed.
+set +x -eu -o pipefail
+
+
+readonly deployEnv=$1
+
+case $deployEnv in
+  staging)
+    readonly buildEnv=stage
+    readonly projectId=aio-staging
+    readonly deployedUrl=https://$projectId.firebaseapp.com/
+    readonly firebaseToken=$FIREBASE_TOKEN
+    ;;
+  production)
+    readonly buildEnv=prod
+    readonly projectId=angular-io
+    readonly deployedUrl=https://angular.io/
+    readonly firebaseToken=$FIREBASE_TOKEN
+    ;;
+  *)
+    echo "Unknown deployment environment ('$deployEnv'). Expected 'staging' or 'production'."
+    exit 1
+    ;;
+esac
+
+# Do not deploy if the current commit is not the latest on its branch.
+readonly LATEST_COMMIT=$(git ls-remote origin $TRAVIS_BRANCH | cut -c1-40)
+if [ $TRAVIS_COMMIT != $LATEST_COMMIT ]; then
+  echo "Skipping deploy because $TRAVIS_COMMIT is not the latest commit ($LATEST_COMMIT)."
+  exit 0
+fi
+
+# Deploy
+(
+  cd "`dirname $0`/.."
+
+  # Build the app
+  yarn build -- --env=$buildEnv
+
+  # Check payload size
+  yarn payload-size
+
+  # Deploy to Firebase
+  firebase use "$projectId" --token "$firebaseToken"
+  firebase deploy --message "Commit: $TRAVIS_COMMIT" --non-interactive --token "$firebaseToken"
+
+  # Run PWA-score tests
+  yarn test-pwa-score -- "$deployedUrl" "$MIN_PWA_SCORE"
+)
diff --git a/aio/scripts/payload.sh b/aio/scripts/payload.sh
new file mode 100755
index 0000000000..0dc0bd9c30
--- /dev/null
+++ b/aio/scripts/payload.sh
@@ -0,0 +1,81 @@
+#!/bin/bash
+
+set -eu -o pipefail
+
+readonly thisDir=$(cd $(dirname $0); pwd)
+readonly parentDir=$(dirname $thisDir)
+readonly PROJECT_NAME="angular-payload-size"
+
+source ${thisDir}/_payload-limits.sh
+
+failed=false
+payloadData=""
+for filename in dist/*.bundle.js; do
+  size=$(stat -c%s "$filename")
+  label=$(echo "$filename" | sed "s/.*\///" | sed "s/\..*//")
+  payloadData="$payloadData\"uncompressed/$label\": $size, "
+
+
+  gzip -7 $filename -c >> "${filename}7.gz"
+  size7=$(stat -c%s "${filename}7.gz")
+  payloadData="$payloadData\"gzip7/$label\": $size7, "
+
+  gzip -9 $filename -c >> "${filename}9.gz"
+  size9=$(stat -c%s "${filename}9.gz")
+  payloadData="$payloadData\"gzip9/$label\": $size9, "
+
+  if [[ $size -gt ${limitUncompressed[$label]} ]]; then
+    failed=true
+    echo "Uncompressed $label size is $size which is greater than ${limitUncompressed[$label]}"
+  elif [[ $size7 -gt ${limitGzip7[$label]} ]]; then
+    failed=true
+    echo "Gzip7 $label size is $size7 which is greater than ${limitGzip7[$label]}"
+  elif [[ $size9 -gt ${limitGzip9[$label]} ]]; then
+    failed=true
+    echo "Gzip9 $label size is $size9 which is greater than ${limitGzip9[$label]}"
+  fi
+done
+
+# Add Timestamp
+timestamp=$(date +%s)
+payloadData="$payloadData\"timestamp\": $timestamp, "
+
+# Add change source: application, dependencies, or 'application+dependencies'
+applicationChanged=false
+dependenciesChanged=false
+if [[ $(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir | grep -v aio/yarn.lock | grep -v content) ]]; then
+  applicationChanged=true
+fi
+if [[ $(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir/yarn.lock) ]]; then
+  dependenciesChanged=true
+fi
+
+if $dependenciesChanged && $applicationChanged; then
+  change='application+dependencies'
+elif $dependenciesChanged; then
+  # only yarn.lock changed
+  change='dependencies'
+elif $applicationChanged; then
+  change='application'
+else
+  # Nothing changed in aio/
+  exit 0
+fi
+payloadData="$payloadData\"change\": \"$change\""
+
+payloadData="{${payloadData}}"
+
+echo $payloadData
+
+if [[ "$TRAVIS_PULL_REQUEST" == "false" ]]; then
+  readonly safeBranchName=$(echo $TRAVIS_BRANCH | sed -e 's/\./_/g')
+  readonly dbPath=/payload/aio/$safeBranchName/$TRAVIS_COMMIT
+
+  # WARNING: FIREBASE_TOKEN should NOT be printed.
+  set +x
+  firebase database:update --data "$payloadData" --project $PROJECT_NAME --confirm --token "$ANGULAR_PAYLOAD_FIREBASE_TOKEN" $dbPath
+fi
+
+if [[ $failed = true ]]; then
+  exit 1
+fi
diff --git a/aio/scripts/test-pwa-score.js b/aio/scripts/test-pwa-score.js
new file mode 100644
index 0000000000..a53e1b28b2
--- /dev/null
+++ b/aio/scripts/test-pwa-score.js
@@ -0,0 +1,108 @@
+#!/bin/env node
+
+/**
+ * Usage:
+ *   node scripts/test-pwa-score <url> <min-score> [<log-file>]
+ *
+ * Fails if the score is below `<min-score>`.
+ * If `<log-file>` is defined, the full results will be logged there.
+ *
+ * (Ignores HTTPS-related audits, when run for HTTP URL.)
+ */
+
+// Imports
+const lighthouse = require('lighthouse');
+const chromeLauncher = require('lighthouse/chrome-launcher/chrome-launcher');
+const printer = require('lighthouse/lighthouse-cli/printer');
+const config = require('lighthouse/lighthouse-core/config/default.js');
+
+// Constants
+const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer/';
+
+// Run
+_main(process.argv.slice(2));
+
+// Functions - Definitions
+function _main(args) {
+  const {url, minScore, logFile} = parseInput(args);
+  const isOnHttp = /^http:/.test(url);
+
+  console.log(`Running PWA audit for '${url}'...`);
+
+  if (isOnHttp) {
+    ignoreHttpsAudits(config);
+  }
+
+  launchChromeAndRunLighthouse(url, {}, config).
+    then(results => processResults(results, logFile)).
+    then(score => evaluateScore(minScore, score)).
+    catch(onError);
+}
+
+function evaluateScore(expectedScore, actualScore) {
+  console.log('Lighthouse PWA score:');
+  console.log(`  - Expected: ${expectedScore} / 100 (or higher)`);
+  console.log(`  - Actual:   ${actualScore} / 100`);
+
+  if (actualScore < expectedScore) {
+    throw new Error(`PWA score is too low. (${actualScore} < ${expectedScore})`);
+  }
+}
+
+function ignoreHttpsAudits(config) {
+  const httpsAudits = [
+    'redirects-http'
+  ];
+
+  console.info(`Ignoring HTTPS-related audits (${httpsAudits.join(', ')})...`);
+
+  config.categories.pwa.audits.forEach(audit => {
+    if (httpsAudits.indexOf(audit.id) !== -1) {
+      // Ugly hack to ignore HTTPS-related audits.
+      // Only meant for use during development.
+      audit.weight = 0;
+     }
+   });
+}
+
+function launchChromeAndRunLighthouse(url, flags, config) {
+  return chromeLauncher.launch().then(chrome => {
+    flags.port = chrome.port;
+    return lighthouse(url, flags, config).
+      then(results => chrome.kill().then(() => results)).
+      catch(err => chrome.kill().then(() => { throw err; }, () => { throw err; }));
+  });
+}
+
+function onError(err) {
+  console.error(err);
+  process.exit(1);
+}
+
+function parseInput(args) {
+  const url = args[0];
+  const minScore = Number(args[1]);
+  const logFile = args[2];
+
+  if (!url) {
+    onError('Invalid arguments: <URL> not specified.');
+  } else if (isNaN(minScore)) {
+    onError('Invalid arguments: <MIN_SCORE> not specified or not a number.');
+  }
+
+  return {url, minScore, logFile};
+}
+
+function processResults(results, logFile) {
+  let promise = Promise.resolve();
+
+  if (logFile) {
+    console.log(`Saving results in '${logFile}'...`);
+    console.log(`(LightHouse viewer: ${VIEWER_URL})`);
+
+    results.artifacts = undefined;   // Too large for the logs.
+    promise = printer.write(results, 'json', logFile);
+  }
+
+  return promise.then(() => Math.round(results.score));
+}
diff --git a/aio/src/NOTES.md b/aio/src/NOTES.md
deleted file mode 100644
index 19e1115578..0000000000
--- a/aio/src/NOTES.md
+++ /dev/null
@@ -1,159 +0,0 @@
-# Design Notes
-
-## Application State
-
-Apart from loading up the navigation and search data, there is only one significant state in the app, which is the document being viewed.
-Other state, such as highlighting the current navigation items and bread crumbs can be derived from that state.
-The simplest indication of this state is the current `Location#path`, which acts as the single point of truth in the application.
-
-* The document to display is computed from the `path`.
-* Navigation to display different documents is achieved by updating the `path`.
-* Whether a navigation item should be highlighted as active is computed from the `path`
-
-Navigation between documents can be achieved through changes to the `Location`.
-
-## Concepts
-
-There are three main concepts in the application: documents, navigation and search.
-
-* The document data includes the contents of the document for rendering.
-* The search data includes keywords used for building the search index.
-* The navigation data contains information about the visual trees that can be rendered in the app to navigate to the documents.
-
-### Documents
-
-Information about documents to be displayed are provided as data that can be fetched from the server.
-There are two parts to the data for each document: `DocumentContents`.
-
-* `DocumentContents` contains the actual document that will be rendered. This can be loaded (and then cached) lazily only when the document is to be viewed.
-
-Each document is uniquely identified by the `path` that is also used to fetch its `DocumentContents`.
-The `DocumentContents` are stored in JSON files on the server. They are loaded lazily on demand and then cached.
-
-```ts
-interface DocumentContents {
-  title: string;
-  contents: string;
-}
-
-type DocumentContentsJSONFile = Array<DocumentContents>;
-```
-
-### Navigation
-
-Within an application there can be multiple navigational views for displaying links to documents.
-For example, there might be views for the top level `Toolbar` and for the more detailed `SideBar` navigation.
-
-Each view is represented as a tree of `NavigationNode`s. Each `NavigationNode` may, optionally, have a `url`, a `path` and `children`.
-
-```ts
-interface NavigationNode {
-  title: string;
-  url?: string;
-  path?: string;
-  tooltip?: string;
-  target?: string;
-  children?: NavigationNode[];
-}
-```
-
-The `url` property represents a link to an external url outside of the app.
-The `path` property identifies the document to display for this navigation `url`. It is used both as the URL segment in the browser and in the request to fetch the document contents.
-It is not valid to have both `url` and `path` properties on a single node.
-If neither `url` nor `path` properties are then the node is a pure container, in which case it ought to have
-
-The `NavigationNode` data is stored in a JSON file that is fetched from the server at startup
-
-```ts
-interface NavigationViews {
-  [name: string]: NavigationNode;
-}
-```
-
-The mapping of a URL back to `NavigationNode` is computed by inverting all the `NavigationNode` structures to produce a `NavigationMap` of URL to node.
-
-```ts
-interface NavigationMap {
-  [url: string]: NavigationMapItem
-}
-```
-
-Each `NavigationMapItem` contains information for updating the current navigation views and also caches the `DocumentContents` once it has been loaded.
-
-```ts
-interface NavigationMapItem {
-  node: NavigationNode;
-  parents: NavigationNode[];
-  document?: DocumentContents;
-}
-```
-
-
-
-### Search
-
-The `SearchTerms` are stored in a single JSON file that is loaded by the search WebWorker at startup and used to generate the search index.
-
-```ts
-interface SearchTerms {
-  url: string;
-  title: string;
-  body: string;
-}
-
-type SearchTermsJSONFile = Array<SearchTerms>;
-```
-
-## LocationService
-
-Since the core Angular `Location` service does not expose a subject, nor emits events when the location is changed programmatically,
-we have our own `LocationService` that does this for us.
-
-```
-export class LocationService {
-  currentUrl: Observable<string>;
-  go(url: string): void
-}
-```
-
-You can subscribe to the `currentUrl` to be updated when location changes occur.
-You should navigate to new documents by calling `go`.
-
-## DocumentService
-
-The `DocumentService` is responsible for monitoring the `LocationService.currentUrl` and updating the `currentDocument`.
-When the `currentUrl` changes, the `DocumentService` will fetch the `DocumentContents` from the server if necessary and cache it for the future.
-
-```ts
-export class DocumentService {
-  currentDocument: Observable<DocumentContents>;
-}
-```
-
-The mapping of URL path to the path to fetch the document contents is simply:
-
-```ts
-  private computePath(url) {
-    url = url.startsWith('/') ? url : '/' + url;
-    return 'content/docs' + url + '.json';
-  }
-```
-
-## NavigationService
-
-The `NavigationService` is responsible for:
-
-* fetching and exposing the `NavigationViews` for use in displaying navigation UI.
-* building the `NavigationMap` from the `NavigationNode` data.
-* updating observables for the currently active `NavigationNode`s that can be used to render the navigation UI
-  when the `LocationService.currentUrl` changes.
-
-
-```ts
-class NavigationService {
-  navigationViews: Observable<NavigationViews>;
-  currentNode: Observable<NavigationNode>;
-  activeNodes: Observable<NavigationNode[]>;
-}
-```
-
diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 011ec48c39..22127e12c2 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -1,30 +1,43 @@
+<div id="top-of-page"></div>
+
+<div *ngIf="isFetching" class="progress-bar-container">
+  <md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
+</div>
+
 <md-toolbar color="primary" class="app-toolbar">
-  <button class="hamburger" md-button
+  <button class="hamburger" [class.starting]="isStarting" md-button
     (click)="sidenav.toggle()" title="Docs menu">
-    <md-icon>menu</md-icon>
+    <md-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></md-icon>
   </button>
   <a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
   <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
-  <aio-search-box class="search-container" #searchBox></aio-search-box>
-  <span class="fill-remaining-space"></span>
+  <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
 </md-toolbar>
+<aio-search-results #searchResults *ngIf="showSearchResults" (resultSelected)="hideSearchResults()"></aio-search-results>
 
-<md-sidenav-container class="sidenav-container">
+<md-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc" role="main">
 
-  <md-sidenav #sidenav class="sidenav" [opened]="isOpened" [mode]="mode">
-    <aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu>
-    <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu>
+  <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode" (open)="updateHostClasses()" (close)="updateHostClasses()">
+    <aio-nav-menu *ngIf="!isSideBySide" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="false"></aio-nav-menu>
+    <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="isSideBySide"></aio-nav-menu>
+
+    <div class="doc-version" title="Angular docs version {{currentDocVersion?.title}}">
+      <aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="docVersions && docVersions[0]"></aio-select>
+    </div>
   </md-sidenav>
 
-  <section class="sidenav-content" [id]="pageId">
+  <section class="sidenav-content" [id]="pageId" role="content">
     <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer>
     <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
   </section>
 
 </md-sidenav-container>
 
-<aio-search-results #searchResults></aio-search-results>
+<div *ngIf="hasFloatingToc" class="toc-container" [style.max-height.px]="tocMaxHeight" (mousewheel)="restrainScrolling($event)">
+  <aio-toc></aio-toc>
+</div>
 
 <footer>
   <aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo" ></aio-footer>
 </footer>
+
diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index 01cfb6a1bd..5aec4219d7 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -1,227 +1,903 @@
-import { async, inject, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
+import { async, inject, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { Title } from '@angular/platform-browser';
 import { APP_BASE_HREF } from '@angular/common';
 import { Http } from '@angular/http';
+import { MdProgressBar, MdSidenav } from '@angular/material';
 import { By } from '@angular/platform-browser';
 
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { of } from 'rxjs/observable/of';
 
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
+import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
 import { GaService } from 'app/shared/ga.service';
-import { SearchResultsComponent } from 'app/search/search-results/search-results.component';
-import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
-import { SearchService } from 'app/search/search.service';
-import { MockSearchService } from 'testing/search.service';
-import { AutoScrollService } from 'app/shared/auto-scroll.service';
 import { LocationService } from 'app/shared/location.service';
-import { MockLocationService } from 'testing/location.service';
 import { Logger } from 'app/shared/logger.service';
+import { MockLocationService } from 'testing/location.service';
 import { MockLogger } from 'testing/logger.service';
-import { SwUpdateNotificationsService } from 'app/sw-updates/sw-update-notifications.service';
-import { MockSwUpdateNotificationsService } from 'testing/sw-update-notifications.service';
+import { MockSearchService } from 'testing/search.service';
+import { NavigationNode } from 'app/navigation/navigation.service';
+import { ScrollService } from 'app/shared/scroll.service';
+import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
+import { SearchResultsComponent } from 'app/search/search-results/search-results.component';
+import { SearchService } from 'app/search/search.service';
+import { SelectComponent, Option } from 'app/shared/select/select.component';
+import { TocComponent } from 'app/embedded/toc/toc.component';
+import { TocItem, TocService } from 'app/shared/toc.service';
+
+const sideBySideBreakPoint = 992;
+const hideToCBreakPoint = 800;
 
 describe('AppComponent', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
-  const initialUrl = 'a/b';
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [ AppModule ],
-      providers: [
-        { provide: APP_BASE_HREF, useValue: '/' },
-        { provide: GaService, useClass: TestGaService },
-        { provide: Http, useClass: TestHttp },
-        { provide: LocationService, useFactory: () => new MockLocationService(initialUrl) },
-        { provide: Logger, useClass: MockLogger },
-        { provide: SearchService, useClass: MockSearchService },
-        { provide: SwUpdateNotificationsService, useClass: MockSwUpdateNotificationsService },
-      ]
-    });
-    TestBed.compileComponents();
-  }));
+  let docViewer: HTMLElement;
+  let hamburger: HTMLButtonElement;
+  let locationService: MockLocationService;
+  let sidenav: HTMLElement;
+  let tocService: TocService;
 
-  beforeEach(() => {
+  const initializeTest = () => {
     fixture = TestBed.createComponent(AppComponent);
     component = fixture.componentInstance;
+
     fixture.detectChanges();
-  });
+    component.onResize(sideBySideBreakPoint + 1); // wide by default
 
-  it('should create', () => {
-    expect(component).toBeDefined();
-  });
+    const de = fixture.debugElement;
+    docViewer = de.query(By.css('aio-doc-viewer')).nativeElement;
+    hamburger = de.query(By.css('.hamburger')).nativeElement;
+    locationService = de.injector.get(LocationService) as any as MockLocationService;
+    sidenav = de.query(By.css('md-sidenav')).nativeElement;
+    tocService = de.injector.get(TocService);
+  };
 
-  describe('ServiceWorker update notifications', () => {
-    it('should be enabled', () => {
-      const swUpdateNotifications = TestBed.get(SwUpdateNotificationsService) as SwUpdateNotificationsService;
-      expect(swUpdateNotifications.enable).toHaveBeenCalled();
-    });
-  });
-
-  describe('is Hamburger Visible', () => {
-    console.log('PENDING: AppComponent');
-  });
-
-  describe('onResize', () => {
-    it('should update `isSideBySide` accordingly', () => {
-      component.onResize(1033);
-      expect(component.isSideBySide).toBe(true);
-      component.onResize(500);
-      expect(component.isSideBySide).toBe(false);
-    });
-  });
-
-  describe('shows/hide SideNav based on doc\'s navigation view', () => {
-    let locationService: MockLocationService;
+  describe('with proper DocViewer', () => {
 
     beforeEach(() => {
-      locationService = fixture.debugElement.injector.get(LocationService) as any;
-      component.onResize(1000); // side-by-side
+      createTestingModule('a/b');
+      initializeTest();
     });
 
-    it('should have sidenav open when doc in the sidenav (guide/pipes)', () => {
-      locationService.urlSubject.next('guide/pipes');
-
-      fixture.detectChanges();
-      const sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
-      expect(sidenav.className).toMatch(/sidenav-open/);
+    it('should create', () => {
+      expect(component).toBeDefined();
     });
 
-    it('should have sidenav open when doc is an api page', () => {
-      locationService.urlSubject.next('api/a/b/c/d');
+    describe('hasFloatingToc', () => {
+      it('should initially be true', () => {
+        const fixture2 = TestBed.createComponent(AppComponent);
+        const component2 = fixture2.componentInstance;
 
-      fixture.detectChanges();
-      const sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
-      expect(sidenav.className).toMatch(/sidenav-open/);
+        expect(component2.hasFloatingToc).toBe(true);
+      });
+
+      it('should be false on narrow screens', () => {
+        component.onResize(hideToCBreakPoint - 1);
+
+        tocService.tocList.next([{}, {}, {}] as TocItem[]);
+        expect(component.hasFloatingToc).toBe(false);
+
+        tocService.tocList.next([]);
+        expect(component.hasFloatingToc).toBe(false);
+
+        tocService.tocList.next([{}, {}, {}] as TocItem[]);
+        expect(component.hasFloatingToc).toBe(false);
+      });
+
+      it('should be true on wide screens unless the toc is empty', () => {
+        component.onResize(hideToCBreakPoint + 1);
+
+        tocService.tocList.next([{}, {}, {}] as TocItem[]);
+        expect(component.hasFloatingToc).toBe(true);
+
+        tocService.tocList.next([]);
+        expect(component.hasFloatingToc).toBe(false);
+
+        tocService.tocList.next([{}, {}, {}] as TocItem[]);
+        expect(component.hasFloatingToc).toBe(true);
+      });
+
+      it('should be false when toc is empty', () => {
+        tocService.tocList.next([]);
+
+        component.onResize(hideToCBreakPoint + 1);
+        expect(component.hasFloatingToc).toBe(false);
+
+        component.onResize(hideToCBreakPoint - 1);
+        expect(component.hasFloatingToc).toBe(false);
+
+        component.onResize(hideToCBreakPoint + 1);
+        expect(component.hasFloatingToc).toBe(false);
+      });
+
+      it('should be true when toc is not empty unless the screen is narrow', () => {
+        tocService.tocList.next([{}, {}, {}] as TocItem[]);
+
+        component.onResize(hideToCBreakPoint + 1);
+        expect(component.hasFloatingToc).toBe(true);
+
+        component.onResize(hideToCBreakPoint - 1);
+        expect(component.hasFloatingToc).toBe(false);
+
+        component.onResize(hideToCBreakPoint + 1);
+        expect(component.hasFloatingToc).toBe(true);
+      });
     });
 
-    it('should have sidenav closed when doc not in the sidenav (features)', () => {
-      locationService.urlSubject.next('features');
+    describe('isSideBySide', () => {
+      it('should be updated on resize', () => {
+        component.onResize(sideBySideBreakPoint - 1);
+        expect(component.isSideBySide).toBe(false);
 
-      fixture.detectChanges();
-      const sidenav = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
-      expect(sidenav.className).toMatch(/sidenav-clos/);
+        component.onResize(sideBySideBreakPoint + 1);
+        expect(component.isSideBySide).toBe(true);
+      });
     });
+
+    describe('onScroll', () => {
+      it('should update `tocMaxHeight` accordingly', () => {
+        expect(component.tocMaxHeight).toBeUndefined();
+
+        component.onScroll();
+        expect(component.tocMaxHeight).toBeGreaterThan(0);
+      });
+    });
+
+    describe('SideNav when side-by-side (wide)', () => {
+
+      beforeEach(() => {
+        component.onResize(sideBySideBreakPoint + 1); // side-by-side
+      });
+
+      it('should open when nav to a guide page (guide/pipes)', () => {
+        locationService.go('guide/pipes');
+        fixture.detectChanges();
+        expect(sidenav.className).toMatch(/sidenav-open/);
+      });
+
+      it('should open when nav to an api page', () => {
+        locationService.go('api/a/b/c/d');
+        fixture.detectChanges();
+        expect(sidenav.className).toMatch(/sidenav-open/);
+      });
+
+      it('should be closed when nav to a marketing page (features)', () => {
+        locationService.go('features');
+        fixture.detectChanges();
+        expect(sidenav.className).toMatch(/sidenav-clos/);
+      });
+
+      describe('when manually closed', () => {
+
+        beforeEach(() => {
+          locationService.go('guide/pipes');
+          fixture.detectChanges();
+          hamburger.click();
+          fixture.detectChanges();
+        });
+
+        it('should be closed', () => {
+          expect(sidenav.className).toMatch(/sidenav-clos/);
+        });
+
+        it('should stay closed when nav from one guide page to another', () => {
+          locationService.go('guide/bags');
+          fixture.detectChanges();
+          expect(sidenav.className).toMatch(/sidenav-clos/);
+        });
+
+        it('should stay closed when nav from a guide page to api page', () => {
+          locationService.go('api');
+          fixture.detectChanges();
+          expect(sidenav.className).toMatch(/sidenav-clos/);
+        });
+
+        it('should reopen when nav to market page and back to guide page', () => {
+          locationService.go('features');
+          fixture.detectChanges();
+          locationService.go('guide/bags');
+          fixture.detectChanges();
+          expect(sidenav.className).toMatch(/sidenav-open/);
+        });
+      });
+    });
+
+    describe('SideNav when NOT side-by-side (narrow)', () => {
+
+      beforeEach(() => {
+        component.onResize(sideBySideBreakPoint - 1); // NOT side-by-side
+      });
+
+      it('should be closed when nav to a guide page (guide/pipes)', () => {
+        locationService.go('guide/pipes');
+        fixture.detectChanges();
+        expect(sidenav.className).toMatch(/sidenav-clos/);
+      });
+
+      it('should be closed when nav to an api page', () => {
+        locationService.go('api/a/b/c/d');
+        fixture.detectChanges();
+        expect(sidenav.className).toMatch(/sidenav-clos/);
+      });
+
+      it('should be closed when nav to a marketing page (features)', () => {
+        locationService.go('features');
+        fixture.detectChanges();
+        expect(sidenav.className).toMatch(/sidenav-clos/);
+      });
+
+      describe('when manually opened', () => {
+
+        beforeEach(() => {
+          locationService.go('guide/pipes');
+          fixture.detectChanges();
+          hamburger.click();
+          fixture.detectChanges();
+        });
+
+        it('should be open', () => {
+          expect(sidenav.className).toMatch(/sidenav-open/);
+        });
+
+        it('should close when click in gray content area overlay', () => {
+          const sidenavBackdrop = fixture.debugElement.query(By.css('.mat-sidenav-backdrop')).nativeElement;
+          sidenavBackdrop.click();
+          fixture.detectChanges();
+          expect(sidenav.className).toMatch(/sidenav-clos/);
+        });
+
+        it('should close when nav to another guide page', () => {
+          locationService.go('guide/bags');
+          fixture.detectChanges();
+          expect(sidenav.className).toMatch(/sidenav-clos/);
+        });
+
+        it('should close when nav to api page', () => {
+          locationService.go('api');
+          fixture.detectChanges();
+          expect(sidenav.className).toMatch(/sidenav-clos/);
+        });
+
+        it('should close again when nav to market page', () => {
+          locationService.go('features');
+          fixture.detectChanges();
+          expect(sidenav.className).toMatch(/sidenav-clos/);
+        });
+
+      });
+    });
+
+    describe('SideNav version selector', () => {
+      let selectElement: DebugElement;
+      let selectComponent: SelectComponent;
+      beforeEach(() => {
+        component.onResize(sideBySideBreakPoint + 1); // side-by-side
+        selectElement = fixture.debugElement.query(By.directive(SelectComponent));
+        selectComponent = selectElement.componentInstance;
+      });
+
+      it('should pick first (current) version by default', () => {
+        expect(selectComponent.selected.title).toEqual(component.versionInfo.raw);
+      });
+
+      // Older docs versions have an href
+      it('should navigate when change to a version with an href', () => {
+        selectElement.triggerEventHandler('change', { option: component.docVersions[1] as Option, index: 1});
+        expect(locationService.go).toHaveBeenCalledWith(TestHttp.docVersions[0].url);
+      });
+
+      // The current docs version should not have an href
+      // This may change when we perfect our docs versioning approach
+      it('should not navigate when change to a version without an href', () => {
+        selectElement.triggerEventHandler('change', { option: component.docVersions[0] as Option, index: 0});
+        expect(locationService.go).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('pageId', () => {
+
+      it('should set the id of the doc viewer container based on the current doc', () => {
+        const container = fixture.debugElement.query(By.css('section.sidenav-content'));
+
+        locationService.go('guide/pipes');
+        fixture.detectChanges();
+        expect(component.pageId).toEqual('guide-pipes');
+        expect(container.properties['id']).toEqual('guide-pipes');
+
+        locationService.go('news');
+        fixture.detectChanges();
+        expect(component.pageId).toEqual('news');
+        expect(container.properties['id']).toEqual('news');
+
+        locationService.go('');
+        fixture.detectChanges();
+        expect(component.pageId).toEqual('home');
+        expect(container.properties['id']).toEqual('home');
+      });
+
+      it('should not be affected by changes to the query', () => {
+        const container = fixture.debugElement.query(By.css('section.sidenav-content'));
+
+        locationService.go('guide/pipes');
+        fixture.detectChanges();
+
+        locationService.go('guide/other?search=http');
+        fixture.detectChanges();
+        expect(component.pageId).toEqual('guide-other');
+        expect(container.properties['id']).toEqual('guide-other');
+      });
+    });
+
+    describe('hostClasses', () => {
+      let host: DebugElement;
+      beforeEach(() => {
+        host = fixture.debugElement;
+      });
+
+      it('should set the css classes of the host container based on the current doc and navigation view', () => {
+        locationService.go('guide/pipes');
+        fixture.detectChanges();
+
+        checkHostClass('page', 'guide-pipes');
+        checkHostClass('folder', 'guide');
+        checkHostClass('view', 'SideNav');
+
+        locationService.go('features');
+        fixture.detectChanges();
+        checkHostClass('page', 'features');
+        checkHostClass('folder', 'features');
+        checkHostClass('view', 'TopBar');
+
+        locationService.go('');
+        fixture.detectChanges();
+        checkHostClass('page', 'home');
+        checkHostClass('folder', 'home');
+        checkHostClass('view', '');
+      });
+
+      it('should set the css class of the host container based on the open/closed state of the side nav', () => {
+        const sideNav = host.query(By.directive(MdSidenav));
+
+        locationService.go('guide/pipes');
+        fixture.detectChanges();
+        checkHostClass('sidenav', 'open');
+
+        sideNav.componentInstance.opened = false;
+        sideNav.triggerEventHandler('close', {});
+        fixture.detectChanges();
+        checkHostClass('sidenav', 'closed');
+
+        sideNav.componentInstance.opened = true;
+        sideNav.triggerEventHandler('open', {});
+        fixture.detectChanges();
+        checkHostClass('sidenav', 'open');
+      });
+
+      function checkHostClass(type, value) {
+        const classes = host.properties['className'];
+        const classArray = classes.split(' ').filter(c => c.indexOf(`${type}-`) === 0);
+        expect(classArray.length).toBeLessThanOrEqual(1, `"${classes}" should have only one class matching ${type}-*`);
+        expect(classArray).toEqual([`${type}-${value}`], `"${classes}" should contain ${type}-${value}`);
+      }
+    });
+
+    describe('currentDocument', () => {
+
+      it('should display a guide page (guide/pipes)', () => {
+        locationService.go('guide/pipes');
+        fixture.detectChanges();
+        expect(docViewer.textContent).toMatch(/Pipes/i);
+      });
+
+      it('should display the api page', () => {
+        locationService.go('api');
+        fixture.detectChanges();
+        expect(docViewer.textContent).toMatch(/API/i);
+      });
+
+      it('should display a marketing page', () => {
+        locationService.go('features');
+        fixture.detectChanges();
+        expect(docViewer.textContent).toMatch(/Features/i);
+      });
+
+      it('should update the document title', () => {
+        const titleService = TestBed.get(Title);
+        spyOn(titleService, 'setTitle');
+        locationService.go('guide/pipes');
+        fixture.detectChanges();
+        expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Pipes');
+      });
+
+      it('should update the document title, with a default value if the document has no title', () => {
+        const titleService = TestBed.get(Title);
+        spyOn(titleService, 'setTitle');
+        locationService.go('no-title');
+        fixture.detectChanges();
+        expect(titleService.setTitle).toHaveBeenCalledWith('Angular');
+      });
+    });
+
+    describe('auto-scrolling', () => {
+      const scrollDelay = 500;
+      let scrollService: ScrollService;
+      let scrollSpy: jasmine.Spy;
+
+      beforeEach(() => {
+        scrollService = fixture.debugElement.injector.get(ScrollService);
+        scrollSpy = spyOn(scrollService, 'scroll');
+      });
+
+      it('should not scroll immediately when the docId (path) changes', () => {
+        locationService.go('guide/pipes');
+        // deliberately not calling `fixture.detectChanges` because don't want `onDocRendered`
+        expect(scrollSpy).not.toHaveBeenCalled();
+      });
+
+      it('should scroll when just the hash changes (# alone)', () => {
+        locationService.go('guide/pipes');
+        locationService.go('guide/pipes#somewhere');
+        expect(scrollSpy).toHaveBeenCalled();
+      });
+
+      it('should scroll when just the hash changes (/#)', () => {
+        locationService.go('guide/pipes');
+        locationService.go('guide/pipes/#somewhere');
+        expect(scrollSpy).toHaveBeenCalled();
+      });
+
+      it('should scroll again when nav to the same hash twice in succession', () => {
+        locationService.go('guide/pipes');
+        locationService.go('guide/pipes#somewhere');
+        locationService.go('guide/pipes#somewhere');
+        expect(scrollSpy.calls.count()).toBe(2);
+      });
+
+      it('should scroll when nav to the same path', () => {
+        locationService.go('guide/pipes');
+        scrollSpy.calls.reset();
+
+        locationService.go('guide/pipes');
+        expect(scrollSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it('should scroll when e-nav to the empty path', () => {
+        locationService.go('');
+        scrollSpy.calls.reset();
+
+        locationService.go('');
+        expect(scrollSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it('should scroll after a delay when call onDocRendered directly', fakeAsync(() => {
+        component.onDocRendered();
+        expect(scrollSpy).not.toHaveBeenCalled();
+        tick(scrollDelay);
+        expect(scrollSpy).toHaveBeenCalled();
+      }));
+
+      it('should scroll (via onDocRendered) when finish navigating to a new doc', fakeAsync(() => {
+        locationService.go('guide/pipes');
+        fixture.detectChanges(); // triggers the event that calls onDocRendered
+        expect(scrollSpy).not.toHaveBeenCalled();
+        tick(scrollDelay);
+        expect(scrollSpy).toHaveBeenCalled();
+      }));
+    });
+
+    describe('click intercepting', () => {
+      it('should intercept clicks on anchors and call `location.handleAnchorClick()`',
+              inject([LocationService], (location: LocationService) => {
+
+        const el = fixture.nativeElement as Element;
+        el.innerHTML = '<a href="some/local/url">click me</a>';
+        const anchorElement = el.getElementsByTagName('a')[0];
+        anchorElement.click();
+        expect(location.handleAnchorClick).toHaveBeenCalledWith(anchorElement, 0, false, false);
+      }));
+
+      it('should intercept clicks on elements deep within an anchor tag',
+              inject([LocationService], (location: LocationService) => {
+
+        const el = fixture.nativeElement as Element;
+        el.innerHTML = '<a href="some/local/url"><div><img></div></a>';
+        const imageElement  = el.getElementsByTagName('img')[0];
+        const anchorElement = el.getElementsByTagName('a')[0];
+        imageElement.click();
+        expect(location.handleAnchorClick).toHaveBeenCalledWith(anchorElement, 0, false, false);
+      }));
+
+      it('should ignore clicks on elements without an anchor ancestor',
+              inject([LocationService], (location: LocationService) => {
+
+        const el = fixture.nativeElement as Element;
+        el.innerHTML = '<div><p><div><img></div></p></div>';
+        const imageElement  = el.getElementsByTagName('img')[0];
+        imageElement.click();
+        expect(location.handleAnchorClick).not.toHaveBeenCalled();
+      }));
+    });
+
+    describe('restrainScrolling()', () => {
+      const preventedScrolling = (currentTarget: object, deltaY: number) => {
+        const evt = {
+          deltaY,
+          currentTarget,
+          defaultPrevented: false,
+          preventDefault() { this.defaultPrevented = true; }
+        } as any as WheelEvent;
+
+        component.restrainScrolling(evt);
+
+        return evt.defaultPrevented;
+      };
+
+      it('should prevent scrolling up if already at the top', () => {
+        const elem = {scrollTop: 0};
+
+        expect(preventedScrolling(elem, -100)).toBe(true);
+        expect(preventedScrolling(elem, +100)).toBe(false);
+        expect(preventedScrolling(elem, -10)).toBe(true);
+      });
+
+      it('should prevent scrolling down if already at the bottom', () => {
+        const elem = {scrollTop: 100, scrollHeight: 150, clientHeight: 50};
+
+        expect(preventedScrolling(elem, +10)).toBe(true);
+        expect(preventedScrolling(elem, -10)).toBe(false);
+        expect(preventedScrolling(elem, +5)).toBe(true);
+
+        elem.clientHeight -= 10;
+        expect(preventedScrolling(elem, +5)).toBe(false);
+
+        elem.scrollHeight -= 20;
+        expect(preventedScrolling(elem, +5)).toBe(true);
+
+        elem.scrollTop -= 30;
+        expect(preventedScrolling(elem, +5)).toBe(false);
+      });
+
+      it('should not prevent scrolling if neither at the top nor at the bottom', () => {
+        const elem = {scrollTop: 50, scrollHeight: 150, clientHeight: 50};
+
+        expect(preventedScrolling(elem, +100)).toBe(false);
+        expect(preventedScrolling(elem, -100)).toBe(false);
+      });
+    });
+
+    describe('aio-toc', () => {
+      let tocDebugElement: DebugElement;
+      let tocContainer: DebugElement;
+
+      const setHasFloatingToc = hasFloatingToc => {
+        component.hasFloatingToc = hasFloatingToc;
+        fixture.detectChanges();
+
+        tocDebugElement = fixture.debugElement.query(By.directive(TocComponent));
+        tocContainer = tocDebugElement && tocDebugElement.parent;
+      };
+
+      beforeEach(() => setHasFloatingToc(true));
+
+
+      it('should show/hide `<aio-toc>` based on `hasFloatingToc`', () => {
+        expect(tocDebugElement).toBeTruthy();
+        expect(tocContainer).toBeTruthy();
+
+        setHasFloatingToc(false);
+        expect(tocDebugElement).toBeFalsy();
+        expect(tocContainer).toBeFalsy();
+
+        setHasFloatingToc(true);
+        expect(tocDebugElement).toBeTruthy();
+        expect(tocContainer).toBeTruthy();
+      });
+
+      it('should have a non-embedded `<aio-toc>` element', () => {
+        expect(tocDebugElement.classes['embedded']).toBeFalsy();
+      });
+
+      it('should update the TOC container\'s `maxHeight` based on `tocMaxHeight`', () => {
+        expect(tocContainer.styles['max-height']).toBeNull();
+
+        component.tocMaxHeight = '100';
+        fixture.detectChanges();
+
+        expect(tocContainer.styles['max-height']).toBe('100px');
+      });
+
+      it('should restrain scrolling inside the ToC container', () => {
+        const restrainScrolling = spyOn(component, 'restrainScrolling');
+        const evt = {};
+
+        expect(restrainScrolling).not.toHaveBeenCalled();
+
+        tocContainer.triggerEventHandler('mousewheel', evt);
+        expect(restrainScrolling).toHaveBeenCalledWith(evt);
+      });
+    });
+
+    describe('footer', () => {
+      it('should have version number', () => {
+        const versionEl: HTMLElement = fixture.debugElement.query(By.css('aio-footer')).nativeElement;
+        expect(versionEl.textContent).toContain(TestHttp.versionFull);
+      });
+    });
+
+    describe('search', () => {
+      describe('initialization', () => {
+        it('should initialize the search worker', inject([SearchService], (searchService: SearchService) => {
+          fixture.detectChanges(); // triggers ngOnInit
+          expect(searchService.initWorker).toHaveBeenCalled();
+        }));
+      });
+
+      describe('click handling', () => {
+        it('should intercept clicks not on the search elements and hide the search results', () => {
+          component.showSearchResults = true;
+          fixture.detectChanges();
+          // docViewer is a commonly-clicked, non-search element
+          docViewer.click();
+          expect(component.showSearchResults).toBe(false);
+        });
+
+        it('should not intercept clicks on the searchResults', () => {
+          component.showSearchResults = true;
+          fixture.detectChanges();
+
+          const searchResults = fixture.debugElement.query(By.directive(SearchResultsComponent));
+          searchResults.nativeElement.click();
+          fixture.detectChanges();
+
+          expect(component.showSearchResults).toBe(true);
+        });
+
+        it('should not intercept clicks om the searchBox', () => {
+          component.showSearchResults = true;
+          fixture.detectChanges();
+
+          const searchBox = fixture.debugElement.query(By.directive(SearchBoxComponent));
+          searchBox.nativeElement.click();
+          fixture.detectChanges();
+
+          expect(component.showSearchResults).toBe(true);
+        });
+      });
+
+      describe('keyup handling', () => {
+        it('should grab focus when the / key is pressed', () => {
+          const searchBox: SearchBoxComponent = fixture.debugElement.query(By.directive(SearchBoxComponent)).componentInstance;
+          spyOn(searchBox, 'focus');
+          window.document.dispatchEvent(new KeyboardEvent('keyup', { 'key': '/' }));
+          fixture.detectChanges();
+          expect(searchBox.focus).toHaveBeenCalled();
+        });
+
+        it('should set focus back to the search box when the search results are displayed and the escape key is pressed', () => {
+          const searchBox: SearchBoxComponent = fixture.debugElement.query(By.directive(SearchBoxComponent)).componentInstance;
+          spyOn(searchBox, 'focus');
+          component.showSearchResults = true;
+          window.document.dispatchEvent(new KeyboardEvent('keyup', { 'key': 'Escape' }));
+          fixture.detectChanges();
+          expect(searchBox.focus).toHaveBeenCalled();
+        });
+      });
+
+      describe('showing search results', () => {
+        it('should not display search results when query is empty', () => {
+          const searchService: MockSearchService = TestBed.get(SearchService);
+          searchService.searchResults.next({ query: '', results: [] });
+          fixture.detectChanges();
+          expect(component.showSearchResults).toBe(false);
+        });
+
+        it('should hide the results when a search result is selected', () => {
+          const searchService: MockSearchService = TestBed.get(SearchService);
+
+          const results = [
+            { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
+          ];
+
+          searchService.searchResults.next({ query: 'something', results: results });
+          component.showSearchResults = true;
+          fixture.detectChanges();
+
+          const searchResultsComponent = fixture.debugElement.query(By.directive(SearchResultsComponent));
+          searchResultsComponent.triggerEventHandler('resultSelected', {});
+          fixture.detectChanges();
+          expect(component.showSearchResults).toBe(false);
+        });
+
+        it('should re-run the search when the search box regains focus', () => {
+          const doSearchSpy = spyOn(component, 'doSearch');
+          const searchBox = fixture.debugElement.query(By.directive(SearchBoxComponent));
+          searchBox.triggerEventHandler('onFocus', 'some query');
+          expect(doSearchSpy).toHaveBeenCalledWith('some query');
+        });
+      });
+    });
+
   });
 
-  describe('pageId', () => {
-    let locationService: MockLocationService;
+  describe('with mocked DocViewer', () => {
+    const getDocViewer = () => fixture.debugElement.query(By.css('aio-doc-viewer'));
+    const triggerDocRendered = () => getDocViewer().triggerEventHandler('docRendered', {});
 
     beforeEach(() => {
-      locationService = fixture.debugElement.injector.get(LocationService) as any;
+      createTestingModule('a/b');
+      // Remove the DocViewer for this test and hide the missing component message
+      TestBed.overrideModule(AppModule, {
+        remove: { declarations: [DocViewerComponent] },
+        add: { schemas: [NO_ERRORS_SCHEMA] }
+      });
     });
 
-    it('should set the id of the doc viewer container based on the current url', () => {
-      const container = fixture.debugElement.query(By.css('section.sidenav-content'));
+    describe('initial rendering', () => {
+      it('should initially add the starting class until the first document is rendered', fakeAsync(() => {
+        const getSidenavContainer = () => fixture.debugElement.query(By.css('md-sidenav-container'));
 
-      locationService.urlSubject.next('guide/pipes');
-      fixture.detectChanges();
-      expect(component.pageId).toEqual('guide-pipes');
-      expect(container.properties['id']).toEqual('guide-pipes');
+        initializeTest();
 
-      locationService.urlSubject.next('news');
-      fixture.detectChanges();
-      expect(component.pageId).toEqual('news');
-      expect(container.properties['id']).toEqual('news');
+        expect(component.isStarting).toBe(true);
+        expect(getSidenavContainer().classes['starting']).toBe(true);
 
-      locationService.urlSubject.next('');
-      fixture.detectChanges();
-      expect(component.pageId).toEqual('home');
-      expect(container.properties['id']).toEqual('home');
+        triggerDocRendered();
+        fixture.detectChanges();
+        expect(component.isStarting).toBe(true);
+        expect(getSidenavContainer().classes['starting']).toBe(true);
+
+        tick(499);
+        fixture.detectChanges();
+        expect(component.isStarting).toBe(true);
+        expect(getSidenavContainer().classes['starting']).toBe(true);
+
+        tick(2);
+        fixture.detectChanges();
+        expect(component.isStarting).toBe(false);
+        expect(getSidenavContainer().classes['starting']).toBe(false);
+      }));
     });
 
-    it('should not be affected by changes to the query or hash', () => {
-      const container = fixture.debugElement.query(By.css('section.sidenav-content'));
+    describe('progress bar', () => {
+      const SHOW_DELAY = 200;
+      const HIDE_DELAY = 500;
+      const getProgressBar = () => fixture.debugElement.query(By.directive(MdProgressBar));
+      const initializeAndCompleteNavigation = () => {
+        initializeTest();
+        triggerDocRendered();
+        tick(HIDE_DELAY);
+      };
 
-      locationService.urlSubject.next('guide/pipes');
-      fixture.detectChanges();
+      it('should initially be hidden', () => {
+        initializeTest();
+        expect(getProgressBar()).toBeFalsy();
+      });
 
-      locationService.urlSubject.next('guide/other?search=http');
-      fixture.detectChanges();
-      expect(component.pageId).toEqual('guide-other');
-      expect(container.properties['id']).toEqual('guide-other');
+      it('should be shown (after a delay) when the path changes', fakeAsync(() => {
+        initializeAndCompleteNavigation();
+        locationService.urlSubject.next('c/d');
 
-      locationService.urlSubject.next('guide/http#anchor-1');
-      fixture.detectChanges();
-      expect(component.pageId).toEqual('guide-http');
-      expect(container.properties['id']).toEqual('guide-http');
-    });
-  });
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeFalsy();
 
-  describe('currentDocument', () => {
-    console.log('PENDING: AppComponent currentDocument');
-  });
+        tick(SHOW_DELAY - 1);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeFalsy();
 
-  describe('navigationViews', () => {
-    console.log('PENDING: AppComponent navigationViews');
-  });
+        tick(1);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeTruthy();
+      }));
 
-  describe('autoScrolling', () => {
-    it('should AutoScrollService.scroll when the url changes', () => {
-      const locationService: MockLocationService = fixture.debugElement.injector.get(LocationService) as any;
-      const scrollService: AutoScrollService = fixture.debugElement.injector.get(AutoScrollService);
-      spyOn(scrollService, 'scroll');
-      locationService.urlSubject.next('some/url#fragment');
-      expect(scrollService.scroll).toHaveBeenCalledWith(jasmine.any(HTMLElement));
+      it('should not be shown when the URL changes but the path remains the same', fakeAsync(() => {
+        initializeAndCompleteNavigation();
+        locationService.urlSubject.next('a/b');
+
+        tick(SHOW_DELAY);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeFalsy();
+      }));
+
+      it('should not be shown when re-navigating to the empty path', fakeAsync(() => {
+        initializeAndCompleteNavigation();
+        locationService.urlSubject.next('');
+        triggerDocRendered();
+
+        locationService.urlSubject.next('');
+
+        tick(SHOW_DELAY);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeFalsy();
+
+        tick(HIDE_DELAY);   // Fire the remaining timer or `fakeAsync()` complains.
+      }));
+
+      it('should not be shown if the doc is rendered quickly', fakeAsync(() => {
+        initializeAndCompleteNavigation();
+        locationService.urlSubject.next('c/d');
+
+        tick(SHOW_DELAY - 1);
+        triggerDocRendered();
+
+        tick(1);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeFalsy();
+
+        tick(HIDE_DELAY);   // Fire the remaining timer or `fakeAsync()` complains.
+      }));
+
+      it('should be shown if rendering the doc takes too long', fakeAsync(() => {
+        initializeAndCompleteNavigation();
+        locationService.urlSubject.next('c/d');
+
+        tick(SHOW_DELAY);
+        triggerDocRendered();
+
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeTruthy();
+
+        tick(HIDE_DELAY);   // Fire the remaining timer or `fakeAsync()` complains.
+      }));
+
+      it('should be hidden (after a delay) once the doc is rendered', fakeAsync(() => {
+        initializeAndCompleteNavigation();
+        locationService.urlSubject.next('c/d');
+
+        tick(SHOW_DELAY);
+        triggerDocRendered();
+
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeTruthy();
+
+        tick(HIDE_DELAY - 1);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeTruthy();
+
+        tick(1);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeFalsy();
+      }));
+
+      it('should only take the latest request into account', fakeAsync(() => {
+        initializeAndCompleteNavigation();
+        locationService.urlSubject.next('c/d');   // The URL changes.
+        locationService.urlSubject.next('e/f');   // The URL changes again before `onDocRendered()`.
+
+        tick(SHOW_DELAY - 1);   // `onDocRendered()` is triggered (for the last doc),
+        triggerDocRendered();   // before the progress bar is shown.
+
+        tick(1);
+        fixture.detectChanges();
+        expect(getProgressBar()).toBeFalsy();
+
+        tick(HIDE_DELAY);   // Fire the remaining timer or `fakeAsync()` complains.
+      }));
     });
 
-    it('should be called when a document has been rendered', () => {
-      const scrollService: AutoScrollService = fixture.debugElement.injector.get(AutoScrollService);
-      spyOn(scrollService, 'scroll');
-      component.onDocRendered();
-      expect(scrollService.scroll).toHaveBeenCalledWith(jasmine.any(HTMLElement));
-    });
-  });
-
-  describe('initialization', () => {
-    it('should initialize the search worker', inject([SearchService], (searchService: SearchService) => {
-      fixture.detectChanges(); // triggers ngOnInit
-      expect(searchService.initWorker).toHaveBeenCalled();
-      expect(searchService.loadIndex).toHaveBeenCalled();
-    }));
-  });
-
-  describe('click intercepting', () => {
-    it('should intercept clicks on anchors and call `location.handleAnchorClick()`',
-            inject([LocationService], (location: LocationService) => {
-      const anchorElement: HTMLAnchorElement = document.createElement('a');
-      anchorElement.href = 'some/local/url';
-      fixture.nativeElement.append(anchorElement);
-      anchorElement.click();
-      expect(location.handleAnchorClick).toHaveBeenCalledWith(anchorElement, 0, false, false);
-    }));
-
-    it('should intercept clicks not on the search elements and hide the search results', () => {
-      const searchResults: SearchResultsComponent = fixture.debugElement.query(By.directive(SearchResultsComponent)).componentInstance;
-      const docViewer = fixture.debugElement.query(By.css('aio-doc-viewer'));
-      spyOn(searchResults, 'hideResults');
-      docViewer.nativeElement.click();
-      expect(searchResults.hideResults).toHaveBeenCalled();
-    });
-
-    it('should not intercept clicks on any of the search elements', () => {
-      const searchResults = fixture.debugElement.query(By.directive(SearchResultsComponent));
-      const searchResultsComponent: SearchResultsComponent = searchResults.componentInstance;
-      const searchBox = fixture.debugElement.query(By.directive(SearchBoxComponent));
-      spyOn(searchResultsComponent, 'hideResults');
-
-      searchResults.nativeElement.click();
-      expect(searchResultsComponent.hideResults).not.toHaveBeenCalled();
-
-      searchBox.nativeElement.click();
-      expect(searchResultsComponent.hideResults).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('footer', () => {
-    it('should have version number', () => {
-      const versionEl: HTMLElement = fixture.debugElement.query(By.css('aio-footer')).nativeElement;
-      expect(versionEl.innerText).toContain(TestHttp.versionFull);
-    });
   });
 
 });
 
+//// test helpers ////
+
+function createTestingModule(initialUrl: string) {
+  TestBed.resetTestingModule();
+  TestBed.configureTestingModule({
+    imports: [ AppModule ],
+    providers: [
+      { provide: APP_BASE_HREF, useValue: '/' },
+      { provide: GaService, useClass: TestGaService },
+      { provide: Http, useClass: TestHttp },
+      { provide: LocationService, useFactory: () => new MockLocationService(initialUrl) },
+      { provide: Logger, useClass: MockLogger },
+      { provide: SearchService, useClass: MockSearchService },
+    ]
+  });
+}
+
 class TestGaService {
   locationChanged = jasmine.createSpy('locationChanged');
 }
@@ -234,13 +910,21 @@ class TestSearchService {
 class TestHttp {
   static versionFull = '4.0.0-local+sha.73808dd';
 
+  static docVersions: NavigationNode[] = [
+    { title: 'v2', url: 'https://v2.angular.io' }
+  ];
+
   // tslint:disable:quotemark
   navJson = {
     "TopBar": [
       {
         "url": "features",
         "title": "Features"
-      }
+      },
+      {
+        "url": "no-title",
+        "title": "No Title"
+      },
     ],
     "SideNav": [
       {
@@ -251,6 +935,11 @@ class TestHttp {
             "url": "guide/pipes",
             "title": "Pipes",
             "tooltip": "Pipes transform displayed values within a template."
+          },
+          {
+            "url": "guide/bags",
+            "title": "Bags",
+            "tooltip": "Pack your bags for a code adventure."
           }
         ]
       },
@@ -260,6 +949,8 @@ class TestHttp {
         "tooltip": "Details of the Angular classes and values."
       }
     ],
+    "docVersions": TestHttp.docVersions,
+
     "__versionInfo": {
       "raw": "4.0.0-rc.6",
       "major": 4,
@@ -278,29 +969,19 @@ class TestHttp {
     }
   };
 
-  apiDoc = {
-    "title": "API",
-    "contents": "<h1>API Doc</h1>"
-  };
-
-  pipesDoc = {
-    "title": "Pipes",
-    "contents": "<h1>Pipes Doc</h1>"
-  };
-
-  testDoc = {
-    "title": "Test",
-    "contents": "<h1>Test Doc</h1>"
-  };
-
-  // get = jasmine.createSpy('get').and.callFake((url: string) => { ... });
   get(url: string) {
-    const json =
-      /navigation.json/.test(url) ? this.navJson :
-      /api/.test(url) ? this.apiDoc :
-      /pipes/.test(url) ? this.pipesDoc :
-      this.testDoc;
-    return of({ json: () => json });
+    let data;
+    if (/navigation\.json/.test(url)) {
+      data = this.navJson;
+    } else {
+      const match = /generated\/docs\/(.+)\.json/.exec(url);
+      const id = match[1];
+      // Make up a title for test purposes
+      const title = id.split('/').pop().replace(/^([a-z])/, (_, letter) => letter.toUpperCase());
+      const h1 = (id === 'no-title') ? '' : `<h1>${title}</h1>`;
+      const contents = `${h1}<h2 id="#somewhere">Some heading</h2>`;
+      data = { id, contents };
+    }
+    return of({ json: () => data });
   }
-
 }
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index a0a7d0ac75..3ba0293a4b 100644
--- a/aio/src/app/app.component.ts
+++ b/aio/src/app/app.component.ts
@@ -1,16 +1,20 @@
-import { Component, ElementRef, HostListener, OnInit,
+import { Component, ElementRef, HostBinding, HostListener, OnInit,
          QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { MdSidenav } from '@angular/material';
 
-import { AutoScrollService } from 'app/shared/auto-scroll.service';
-import { CurrentNode, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
+import { CurrentNodes, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
 import { DocumentService, DocumentContents } from 'app/documents/document.service';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
 import { LocationService } from 'app/shared/location.service';
 import { NavMenuComponent } from 'app/layout/nav-menu/nav-menu.component';
+import { ScrollService } from 'app/shared/scroll.service';
 import { SearchResultsComponent } from 'app/search/search-results/search-results.component';
-import { SwUpdateNotificationsService } from 'app/sw-updates/sw-update-notifications.service';
+import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
+import { SearchService } from 'app/search/search.service';
+import { TocService } from 'app/shared/toc.service';
 
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { combineLatest } from 'rxjs/observable/combineLatest';
 
 const sideNavView = 'SideNav';
 
@@ -20,25 +24,60 @@ const sideNavView = 'SideNav';
 })
 export class AppComponent implements OnInit {
 
-  currentNode: CurrentNode;
-  dtOn = false;
-  pageId: string;
   currentDocument: DocumentContents;
+  currentDocVersion: NavigationNode;
+  currentNodes: CurrentNodes;
+  currentPath: string;
+  docVersions: NavigationNode[];
+  dtOn = false;
   footerNodes: NavigationNode[];
-  isSideBySide = false;
-  private isSideNavDoc = false;
-  private previousNavView: string;
-  // Set to 1032 to account for computed html window size
-  private readonly sideBySideWidth = 1032;
 
+  /**
+   * An HTML friendly identifier for the currently displayed page.
+   * This is computed from the `currentDocument.id` by replacing `/` with `-`
+   */
+  pageId: string;
+  /**
+   * An HTML friendly identifer for the "folder" of the currently displayed page.
+   * This is computed by taking everything up to the first `/` in the `currentDocument.id`
+   */
+  folderId: string;
+  /**
+   * These CSS classes are computed from the current state of the application
+   * (e.g. what document is being viewed) to allow for fine grain control over
+   * the styling of individual pages.
+   * You will get three classes:
+   *
+   * * `page-...`: computed from the current document id (e.g. events, guide-security, tutorial-toh-pt2)
+   * * `folder-...`: computed from the top level folder for an id (e.g. guide, tutorial, etc)
+   * * `view-...`: computef from the navigation view (e.g. SideNav, TopBar, etc)
+   */
+  @HostBinding('class')
+  hostClasses = '';
+
+  isFetching = false;
+  isStarting = true;
+  isSideBySide = false;
+  private isFetchingTimeout: any;
+  private isSideNavDoc = false;
+
+  private sideBySideWidth = 992;
   sideNavNodes: NavigationNode[];
   topMenuNodes: NavigationNode[];
+  topMenuNarrowNodes: NavigationNode[];
+
+  hasFloatingToc = true;
+  private showFloatingToc = new BehaviorSubject(false);
+  private showFloatingTocWidth = 800;
+  tocMaxHeight: string;
+  private tocMaxHeightOffset = 0;
+
   versionInfo: VersionInfo;
 
   get homeImageUrl() {
     return this.isSideBySide ?
-      'assets/images/logos/standard/logo-nav@2x.png' :
-      'assets/images/logos/standard/logo-nav-small.png';
+      'assets/images/logos/angular/logo-nav@2x.png' :
+      'assets/images/logos/angular/shield-large.svg';
   }
   get isOpened() { return this.isSideBySide && this.isSideNavDoc; }
   get mode() { return this.isSideBySide ? 'side' : 'over'; }
@@ -47,97 +86,248 @@ export class AppComponent implements OnInit {
   @ViewChild(DocViewerComponent, { read: ElementRef })
   docViewer: ElementRef;
 
+  // Search related properties
+  showSearchResults = false;
   @ViewChildren('searchBox, searchResults', { read: ElementRef })
   searchElements: QueryList<ElementRef>;
-
   @ViewChild(SearchResultsComponent)
   searchResults: SearchResultsComponent;
+  @ViewChild(SearchBoxComponent)
+  searchBox: SearchBoxComponent;
 
   @ViewChild(MdSidenav)
   sidenav: MdSidenav;
 
   constructor(
-    private autoScrollService: AutoScrollService,
     private documentService: DocumentService,
+    private hostElement: ElementRef,
     private locationService: LocationService,
     private navigationService: NavigationService,
-    private swUpdateNotifications: SwUpdateNotificationsService
+    private scrollService: ScrollService,
+    private searchService: SearchService,
+    private tocService: TocService
   ) { }
 
   ngOnInit() {
+    // Do not initialize the search on browsers that lack web worker support
+    if ('Worker' in window) {
+      // Delay initialization by up to 2 seconds
+      this.searchService.initWorker('app/search/search-worker.js', 2000);
+    }
+
+    this.onResize(window.innerWidth);
+
     /* No need to unsubscribe because this root component never dies */
 
-    this.documentService.currentDocument.subscribe(doc => this.currentDocument = doc);
-
-    // scroll even if only the hash fragment changed
-    this.locationService.currentUrl.subscribe(url => this.autoScroll());
-
-    this.navigationService.currentNode.subscribe(currentNode => {
-      this.currentNode = currentNode;
-      this.pageId = this.currentNode.url.replace('/', '-') || 'home';
-
-      // Toggle the sidenav if the kind of view changed
-      if (this.previousNavView === currentNode.view) { return; }
-      this.previousNavView = currentNode.view;
-      this.isSideNavDoc = currentNode.view === sideNavView;
-      this.sideNavToggle(this.isSideNavDoc);
+    this.documentService.currentDocument.subscribe(doc => {
+      this.currentDocument = doc;
+      this.setPageId(doc.id);
+      this.setFolderId(doc.id);
+      this.updateHostClasses();
     });
 
+    this.locationService.currentPath.subscribe(path => {
+      if (path === this.currentPath) {
+        // scroll only if on same page (most likely a change to the hash)
+        this.autoScroll();
+      } else {
+        // don't scroll; leave that to `onDocRendered`
+        this.currentPath = path;
+
+        // Start progress bar if doc not rendered within brief time
+        clearTimeout(this.isFetchingTimeout);
+        this.isFetchingTimeout = setTimeout(() => this.isFetching = true, 200);
+      }
+    });
+
+    this.navigationService.currentNodes.subscribe(currentNodes => {
+      this.currentNodes = currentNodes;
+
+      // Preserve current sidenav open state by default
+      let openSideNav = this.sidenav.opened;
+      const isSideNavDoc = !!currentNodes[sideNavView];
+
+      if (this.isSideNavDoc !== isSideNavDoc) {
+        // View type changed. Is it now a sidenav view (e.g, guide or tutorial)?
+        // Open if changed to a sidenav doc; close if changed to a marketing doc.
+        openSideNav = this.isSideNavDoc = isSideNavDoc;
+      }
+      // May be open or closed when wide; always closed when narrow
+      this.sideNavToggle(this.isSideBySide ? openSideNav : false);
+    });
+
+    // Compute the version picker list from the current version and the versions in the navigation map
+    combineLatest(
+      this.navigationService.versionInfo.map(versionInfo => ({ title: versionInfo.raw, url: null })),
+      this.navigationService.navigationViews.map(views => views['docVersions']),
+      (currentVersion, otherVersions) => [currentVersion, ...otherVersions])
+      .subscribe(versions => {
+        this.docVersions = versions;
+        this.currentDocVersion = this.docVersions[0];
+      });
+
     this.navigationService.navigationViews.subscribe(views => {
       this.footerNodes  = views['Footer']  || [];
       this.sideNavNodes = views['SideNav'] || [];
       this.topMenuNodes = views['TopBar']  || [];
+      this.topMenuNarrowNodes = views['TopBarNarrow'] || this.topMenuNodes;
     });
 
     this.navigationService.versionInfo.subscribe( vi => this.versionInfo = vi );
 
-    this.swUpdateNotifications.enable();
-
-    this.onResize(window.innerWidth);
+    const hasNonEmptyToc = this.tocService.tocList.map(tocList => tocList.length > 0);
+    combineLatest(hasNonEmptyToc, this.showFloatingToc)
+        .subscribe(([hasToc, showFloatingToc]) => this.hasFloatingToc = hasToc && showFloatingToc);
   }
 
-  // Scroll to the anchor in the hash fragment.
+  // Scroll to the anchor in the hash fragment or top of doc.
   autoScroll() {
-    this.autoScrollService.scroll(this.docViewer.nativeElement.offsetParent);
+    this.scrollService.scroll();
   }
 
   onDocRendered() {
-    // This handler is needed because the subscription to the `currentUrl` in `ngOnInit`
-    // gets triggered too early before the doc-viewer has finished rendering the doc
-    this.autoScroll();
+    // Stop fetching timeout (which, when render is fast, means progress bar never shown)
+    clearTimeout(this.isFetchingTimeout);
+
+    // Put page in a clean visual state
+    this.scrollService.scrollToTop();
+
+    // Scroll 500ms after the doc-viewer has finished rendering the new doc
+    // The delay is to allow time for async layout to complete
+    setTimeout(() => {
+      this.autoScroll();
+      this.isStarting = false;
+      this.isFetching = false;
+    }, 500);
+  }
+
+  onDocVersionChange(versionIndex: number) {
+    const version = this.docVersions[versionIndex];
+    if (version.url) {
+      this.locationService.go(version.url);
+    }
   }
 
   @HostListener('window:resize', ['$event.target.innerWidth'])
   onResize(width) {
     this.isSideBySide = width > this.sideBySideWidth;
+    this.showFloatingToc.next(width > this.showFloatingTocWidth);
   }
 
   @HostListener('click', ['$event.target', '$event.button', '$event.ctrlKey', '$event.metaKey', '$event.altKey'])
   onClick(eventTarget: HTMLElement, button: number, ctrlKey: boolean, metaKey: boolean, altKey: boolean): boolean {
 
-    // Hide the search results if we clicked outside both the search box and the search results
-    if (this.searchResults) {
-      const hits = this.searchElements.filter(element => element.nativeElement.contains(eventTarget));
-      if (hits.length === 0) {
-        this.searchResults.hideResults();
-      }
+    // Hide the search results if we clicked outside both the "search box" and the "search results"
+    if (!this.searchElements.some(element => element.nativeElement.contains(eventTarget))) {
+      this.hideSearchResults();
     }
 
+    // Show developer source view if the footer is clicked while holding the meta and alt keys
     if (eventTarget.tagName === 'FOOTER' && metaKey && altKey) {
       this.dtOn = !this.dtOn;
+      return false;
     }
 
-    // Deal with anchor clicks
-    if (eventTarget instanceof HTMLImageElement) {
-      eventTarget = eventTarget.parentElement; // assume image wrapped in Anchor
+    // Deal with anchor clicks; climb DOM tree until anchor found (or null)
+    let target = eventTarget;
+    while (target && !(target instanceof HTMLAnchorElement)) {
+      target = target.parentElement;
     }
-    if (eventTarget instanceof HTMLAnchorElement) {
-      return this.locationService.handleAnchorClick(eventTarget, button, ctrlKey, metaKey);
+    if (target instanceof HTMLAnchorElement) {
+      return this.locationService.handleAnchorClick(target, button, ctrlKey, metaKey);
     }
+
+    // Allow the click to pass through
     return true;
   }
 
   sideNavToggle(value?: boolean) {
     this.sidenav.toggle(value);
   }
+
+  setPageId(id: string) {
+    // Special case the home page
+    this.pageId = (id === 'index') ? 'home' : id.replace('/', '-');
+  }
+
+  setFolderId(id: string) {
+    // Special case the home page
+    this.folderId = (id === 'index') ? 'home' : id.split('/', 1)[0];
+  }
+
+  updateHostClasses() {
+    const sideNavOpen = `sidenav-${this.sidenav.opened ? 'open' : 'closed'}`;
+    const pageClass = `page-${this.pageId}`;
+    const folderClass = `folder-${this.folderId}`;
+    const viewClasses = Object.keys(this.currentNodes || {}).map(view => `view-${view}`).join(' ');
+
+    this.hostClasses = `${sideNavOpen} ${pageClass} ${folderClass} ${viewClasses}`;
+  }
+
+  // Dynamically change height of table of contents container
+  @HostListener('window:scroll')
+  onScroll() {
+    if (!this.tocMaxHeightOffset) {
+      // Must wait until now for md-toolbar to be measurable.
+      const el = this.hostElement.nativeElement as Element;
+      this.tocMaxHeightOffset =
+          el.querySelector('footer').clientHeight +
+          el.querySelector('md-toolbar.app-toolbar').clientHeight +
+          24; //  fudge margin
+    }
+
+    this.tocMaxHeight = (document.body.scrollHeight - window.pageYOffset - this.tocMaxHeightOffset).toFixed(2);
+  }
+
+  // Restrain scrolling inside an element, when the cursor is over it
+  restrainScrolling(evt: WheelEvent) {
+    const elem = evt.currentTarget as Element;
+    const scrollTop = elem.scrollTop;
+
+    if (evt.deltaY < 0) {
+      // Trying to scroll up: Prevent scrolling if already at the top.
+      if (scrollTop < 1) {
+        evt.preventDefault();
+      }
+    } else {
+      // Trying to scroll down: Prevent scrolling if already at the bottom.
+      const maxScrollTop = elem.scrollHeight - elem.clientHeight;
+      if (maxScrollTop - scrollTop < 1) {
+        evt.preventDefault();
+      }
+    }
+  }
+
+
+  // Search related methods and handlers
+
+  hideSearchResults() {
+    this.showSearchResults = false;
+  }
+
+  focusSearchBox() {
+    if (this.searchBox) {
+      this.searchBox.focus();
+    }
+  }
+
+  doSearch(query) {
+    this.searchService.search(query);
+    this.showSearchResults = !!query;
+  }
+
+  @HostListener('document:keyup', ['$event.key', '$event.which'])
+  onKeyUp(key: string, keyCode: number) {
+    // forward slash "/"
+    if (key === '/' || keyCode === 191) {
+      this.focusSearchBox();
+    }
+    if (key === 'Escape' || keyCode === 27 ) {
+      // escape key
+      if (this.showSearchResults) {
+        this.hideSearchResults();
+        this.focusSearchBox();
+      }
+    }
+  }
 }
diff --git a/aio/src/app/app.module.ts b/aio/src/app/app.module.ts
index 2e57d85970..73e0154342 100644
--- a/aio/src/app/app.module.ts
+++ b/aio/src/app/app.module.ts
@@ -5,7 +5,17 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
 
-import { MdToolbarModule, MdButtonModule, MdIconModule, MdInputModule, MdSidenavModule, MdTabsModule, Platform} from '@angular/material';
+import {
+  MdButtonModule,
+  MdIconModule,
+  MdIconRegistry,
+  MdInputModule,
+  MdProgressBarModule,
+  MdSidenavModule,
+  MdTabsModule,
+  MdToolbarModule,
+  Platform
+} from '@angular/material';
 
 // Temporary fix for MdSidenavModule issue:
 // crashes with "missing first" operator when SideNav.mode is "over"
@@ -15,6 +25,7 @@ import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
 
 import { AppComponent } from 'app/app.component';
 import { ApiService } from 'app/embedded/api/api.service';
+import { CustomMdIconRegistry, SVG_ICONS } from 'app/shared/custom-md-icon-registry';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
 import { DtComponent } from 'app/layout/doc-viewer/dt.component';
 import { EmbeddedModule } from 'app/embedded/embedded.module';
@@ -28,9 +39,35 @@ import { TopMenuComponent } from 'app/layout/top-menu/top-menu.component';
 import { FooterComponent } from 'app/layout/footer/footer.component';
 import { NavMenuComponent } from 'app/layout/nav-menu/nav-menu.component';
 import { NavItemComponent } from 'app/layout/nav-item/nav-item.component';
+import { ScrollService } from 'app/shared/scroll.service';
+import { ScrollSpyService } from 'app/shared/scroll-spy.service';
 import { SearchResultsComponent } from './search/search-results/search-results.component';
 import { SearchBoxComponent } from './search/search-box/search-box.component';
-import { AutoScrollService } from 'app/shared/auto-scroll.service';
+import { TocService } from 'app/shared/toc.service';
+
+import { SharedModule } from 'app/shared/shared.module';
+
+// These are the hardcoded inline svg sources to be used by the `<md-icon>` component
+export const svgIconProviders = [
+  {
+    provide: SVG_ICONS,
+    useValue: {
+      name: 'keyboard_arrow_right',
+      svgSource: '<svg xmlns="http://www.w3.org/2000/svg" focusable="false" ' +
+                 'viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/></svg>'
+    },
+    multi: true
+  },
+  {
+    provide: SVG_ICONS,
+    useValue: {
+      name: 'menu',
+      svgSource: '<svg xmlns="http://www.w3.org/2000/svg" focusable="false" ' +
+                 'viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>'
+    },
+    multi: true
+  }
+];
 
 @NgModule({
   imports: [
@@ -41,10 +78,12 @@ import { AutoScrollService } from 'app/shared/auto-scroll.service';
     MdButtonModule,
     MdIconModule,
     MdInputModule,
-    MdToolbarModule,
+    MdProgressBarModule,
     MdSidenavModule,
     MdTabsModule,
-    SwUpdatesModule
+    MdToolbarModule,
+    SwUpdatesModule,
+    SharedModule
   ],
   declarations: [
     AppComponent,
@@ -59,16 +98,20 @@ import { AutoScrollService } from 'app/shared/auto-scroll.service';
   ],
   providers: [
     ApiService,
+    DocumentService,
     GaService,
     Logger,
     Location,
     { provide: LocationStrategy, useClass: PathLocationStrategy },
     LocationService,
+    { provide: MdIconRegistry, useClass: CustomMdIconRegistry },
     NavigationService,
-    DocumentService,
-    SearchService,
     Platform,
-    AutoScrollService,
+    ScrollService,
+    ScrollSpyService,
+    SearchService,
+    svgIconProviders,
+    TocService
   ],
   bootstrap: [AppComponent]
 })
diff --git a/aio/src/app/documents/document-contents.ts b/aio/src/app/documents/document-contents.ts
index 80b03a4f2e..a625759f0f 100644
--- a/aio/src/app/documents/document-contents.ts
+++ b/aio/src/app/documents/document-contents.ts
@@ -1,4 +1,6 @@
 export interface DocumentContents {
-  title: string;
+  /** The unique identifier for this document */
+  id: string;
+  /** The HTML to display in the doc viewer */
   contents: string;
 }
diff --git a/aio/src/app/documents/document.service.spec.ts b/aio/src/app/documents/document.service.spec.ts
index f53648094a..7b9a660515 100644
--- a/aio/src/app/documents/document.service.spec.ts
+++ b/aio/src/app/documents/document.service.spec.ts
@@ -10,10 +10,11 @@ import { LocationService } from 'app/shared/location.service';
 import { MockLocationService } from 'testing/location.service';
 import { Logger } from 'app/shared/logger.service';
 import { MockLogger } from 'testing/logger.service';
-import { DocumentService, DocumentContents } from './document.service';
+import { DocumentService, DocumentContents,
+         FETCHING_ERROR_ID, FILE_NOT_FOUND_ID } from './document.service';
 
 
-const CONTENT_URL_PREFIX = 'content/docs/';
+const CONTENT_URL_PREFIX = 'generated/docs/';
 
 function createResponse(body: any) {
   return new Response(new ResponseOptions({ body: JSON.stringify(body) }));
@@ -34,8 +35,8 @@ function getServices(initialUrl: string = '') {
   const injector = createInjector(initialUrl);
   return {
     backend: injector.get(ConnectionBackend) as MockBackend,
-    location: injector.get(LocationService) as MockLocationService,
-    service: injector.get(DocumentService) as DocumentService,
+    locationService: injector.get(LocationService) as MockLocationService,
+    docService: injector.get(DocumentService) as DocumentService,
     logger: injector.get(Logger) as MockLogger
   };
 }
@@ -43,122 +44,126 @@ function getServices(initialUrl: string = '') {
 describe('DocumentService', () => {
 
   it('should be creatable', () => {
-    const { service } = getServices();
-    expect(service).toBeTruthy();
+    const { docService } = getServices();
+    expect(docService).toBeTruthy();
   });
 
   describe('currentDocument', () => {
 
-    it('should fetch a document for the initial location url', () => {
-      const { service, backend } = getServices('initial/url');
+    it('should fetch a document for the initial location', () => {
+      const { docService, backend } = getServices('initial/doc');
       const connections = backend.connectionsArray;
-      service.currentDocument.subscribe();
+      docService.currentDocument.subscribe();
 
       expect(connections.length).toEqual(1);
-      expect(connections[0].request.url).toEqual(CONTENT_URL_PREFIX + 'initial/url.json');
-      expect(backend.connectionsArray[0].request.url).toEqual(CONTENT_URL_PREFIX + 'initial/url.json');
+      expect(connections[0].request.url).toEqual(CONTENT_URL_PREFIX + 'initial/doc.json');
+      expect(backend.connectionsArray[0].request.url).toEqual(CONTENT_URL_PREFIX + 'initial/doc.json');
     });
 
     it('should emit a document each time the location changes', () => {
       let latestDocument: DocumentContents;
-      const doc0 = { title: 'doc 0' };
-      const doc1 = { title: 'doc 1' };
-      const { service, backend, location } = getServices('initial/url');
+      const doc0 = { contents: 'doc 0', id: 'initial/doc' };
+      const doc1 = { contents: 'doc 1', id: 'new/doc'  };
+      const { docService, backend, locationService } = getServices('initial/doc');
       const connections = backend.connectionsArray;
 
-      service.currentDocument.subscribe(doc => latestDocument = doc);
+      docService.currentDocument.subscribe(doc => latestDocument = doc);
       expect(latestDocument).toBeUndefined();
 
       connections[0].mockRespond(createResponse(doc0));
       expect(latestDocument).toEqual(doc0);
 
-      location.urlSubject.next('new/url');
+      locationService.go('new/doc');
       connections[1].mockRespond(createResponse(doc1));
       expect(latestDocument).toEqual(doc1);
     });
 
     it('should emit the not-found document if the document is not found on the server', () => {
-      const { service, backend } = getServices('missing/url');
+      const { docService, backend } = getServices('missing/doc');
       const connections = backend.connectionsArray;
-      service.currentDocument.subscribe();
+      let currentDocument: DocumentContents;
+      docService.currentDocument.subscribe(doc => currentDocument = doc);
 
       connections[0].mockError(new Response(new ResponseOptions({ status: 404, statusText: 'NOT FOUND'})) as any);
       expect(connections.length).toEqual(2);
       expect(connections[1].request.url).toEqual(CONTENT_URL_PREFIX + 'file-not-found.json');
+      const fileNotFoundDoc = { id: FILE_NOT_FOUND_ID, contents: '<h1>Page Not Found</h1>' };
+      connections[1].mockRespond(createResponse(fileNotFoundDoc));
+      expect(currentDocument).toEqual(fileNotFoundDoc);
     });
 
     it('should emit a hard-coded not-found document if the not-found document is not found on the server', () => {
       let currentDocument: DocumentContents;
-      const notFoundDoc = { title: 'Not Found', contents: 'Document not found' };
-      const nextDoc = { title: 'Next Doc' };
-      const { service, backend, location } = getServices('file-not-found');
+      const notFoundDoc: DocumentContents = { contents: 'Document not found', id: FILE_NOT_FOUND_ID };
+      const nextDoc = { contents: 'Next Doc', id: 'new/doc' };
+      const { docService, backend, locationService } = getServices(FILE_NOT_FOUND_ID);
       const connections = backend.connectionsArray;
-      service.currentDocument.subscribe(doc => currentDocument = doc);
+      docService.currentDocument.subscribe(doc => currentDocument = doc);
 
       connections[0].mockError(new Response(new ResponseOptions({ status: 404, statusText: 'NOT FOUND'})) as any);
       expect(connections.length).toEqual(1);
       expect(currentDocument).toEqual(notFoundDoc);
 
       // now check that we haven't killed the currentDocument observable sequence
-      location.urlSubject.next('new/url');
+      locationService.go('new/doc');
       connections[1].mockRespond(createResponse(nextDoc));
       expect(currentDocument).toEqual(nextDoc);
     });
 
-    it('should not crash the app if the response is not valid JSON', () => {
+    it('should not crash the app if the response is invalid JSON', () => {
       let latestDocument: DocumentContents;
-      const { service, backend, location } = getServices('initial/url');
+      const { docService, backend, locationService} = getServices('initial/doc');
       const connections = backend.connectionsArray;
 
-      service.currentDocument.subscribe(doc => latestDocument = doc);
+      docService.currentDocument.subscribe(doc => latestDocument = doc);
 
       connections[0].mockRespond(new Response(new ResponseOptions({ body: 'this is invalid JSON' })));
-      expect(latestDocument.title).toEqual('Error fetching document');
+      expect(latestDocument.id).toEqual(FETCHING_ERROR_ID);
 
-      const doc1 = { title: 'doc 1' };
-      location.urlSubject.next('new/url');
+      const doc1 = { contents: 'doc 1' };
+      locationService.go('new/doc');
       connections[1].mockRespond(createResponse(doc1));
-      expect(latestDocument).toEqual(doc1);
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc1));
     });
 
     it('should not make a request to the server if the doc is in the cache already', () => {
       let latestDocument: DocumentContents;
       let subscription: Subscription;
 
-      const doc0 = { title: 'doc 0' };
-      const doc1 = { title: 'doc 1' };
-      const { service, backend, location } = getServices('url/0');
+      const doc0 = { contents: 'doc 0' };
+      const doc1 = { contents: 'doc 1' };
+      const { docService, backend, locationService} = getServices('url/0');
       const connections = backend.connectionsArray;
 
-      subscription = service.currentDocument.subscribe(doc => latestDocument = doc);
+      subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
       expect(connections.length).toEqual(1);
       connections[0].mockRespond(createResponse(doc0));
-      expect(latestDocument).toEqual(doc0);
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc0));
       subscription.unsubscribe();
 
       // modify the response so we can check that future subscriptions do not trigger another request
-      connections[0].response.next(createResponse({ title: 'error 0' }));
+      connections[0].response.next(createResponse({ contents: 'error 0' }));
 
-      subscription = service.currentDocument.subscribe(doc => latestDocument = doc);
-      location.urlSubject.next('url/1');
+      subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
+      locationService.go('url/1');
       expect(connections.length).toEqual(2);
       connections[1].mockRespond(createResponse(doc1));
-      expect(latestDocument).toEqual(doc1);
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc1));
       subscription.unsubscribe();
 
       // modify the response so we can check that future subscriptions do not trigger another request
-      connections[1].response.next(createResponse({ title: 'error 1' }));
+      connections[1].response.next(createResponse({ contents: 'error 1' }));
 
-      subscription = service.currentDocument.subscribe(doc => latestDocument = doc);
-      location.urlSubject.next('url/0');
+      subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
+      locationService.go('url/0');
       expect(connections.length).toEqual(2);
-      expect(latestDocument).toEqual(doc0);
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc0));
       subscription.unsubscribe();
 
-      subscription = service.currentDocument.subscribe(doc => latestDocument = doc);
-      location.urlSubject.next('url/1');
+      subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
+      locationService.go('url/1');
       expect(connections.length).toEqual(2);
-      expect(latestDocument).toEqual(doc1);
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc1));
       subscription.unsubscribe();
     });
   });
@@ -166,15 +171,15 @@ describe('DocumentService', () => {
   describe('computeMap', () => {
     it('should map the "empty" location to the correct document request', () => {
       let latestDocument: DocumentContents;
-      const { service, backend } = getServices();
-      service.currentDocument.subscribe(doc => latestDocument = doc);
+      const { docService, backend } = getServices();
+      docService.currentDocument.subscribe(doc => latestDocument = doc);
 
       expect(backend.connectionsArray[0].request.url).toEqual(CONTENT_URL_PREFIX + 'index.json');
     });
 
     it('should map the "folder" locations to the correct document request', () => {
-      const { service, backend, location } = getServices('guide/');
-      service.currentDocument.subscribe();
+      const { docService, backend, locationService} = getServices('guide');
+      docService.currentDocument.subscribe();
 
       expect(backend.connectionsArray[0].request.url).toEqual(CONTENT_URL_PREFIX + 'guide.json');
     });
diff --git a/aio/src/app/documents/document.service.ts b/aio/src/app/documents/document.service.ts
index 949d60c1f0..c7617465f2 100644
--- a/aio/src/app/documents/document.service.ts
+++ b/aio/src/app/documents/document.service.ts
@@ -14,13 +14,28 @@ export { DocumentContents } from './document-contents';
 import { LocationService } from 'app/shared/location.service';
 import { Logger } from 'app/shared/logger.service';
 
-const FILE_NOT_FOUND_URL = 'file-not-found';
+export const FILE_NOT_FOUND_ID = 'file-not-found';
+export const FETCHING_ERROR_ID = 'fetching-error';
+
+export const CONTENT_URL_PREFIX = 'generated/';
+export const DOC_CONTENT_URL_PREFIX = CONTENT_URL_PREFIX + 'docs/';
+const FETCHING_ERROR_CONTENTS = `
+  <div class="nf-container l-flex-wrap flex-center">
+    <div class="nf-icon material-icons">error_outline</div>
+    <div class="nf-response l-flex-wrap">
+      <h1 class="no-toc">Request for document failed.</h1>
+      <p>
+        We are unable to retrieve the "<current-location></current-location>" page at this time.
+        Please check your connection and try again later.
+      </p>
+    </div>
+  </div>
+`;
 
 @Injectable()
 export class DocumentService {
 
   private cache = new Map<string, Observable<DocumentContents>>();
-  private fileNotFoundPath = this.computePath(FILE_NOT_FOUND_URL);
 
   currentDocument: Observable<DocumentContents>;
 
@@ -29,49 +44,51 @@ export class DocumentService {
     private http: Http,
     location: LocationService) {
     // Whenever the URL changes we try to get the appropriate doc
-    this.currentDocument = location.currentUrl.switchMap(url => this.getDocument(url));
+    this.currentDocument = location.currentPath.switchMap(path => this.getDocument(path));
   }
 
   private getDocument(url: string) {
-    this.logger.log('getting document', url);
-    const path = this.computePath(url);
-    if ( !this.cache.has(path)) {
-      this.cache.set(path, this.fetchDocument(path));
+    const id = url || 'index';
+    this.logger.log('getting document', id);
+    if ( !this.cache.has(id)) {
+      this.cache.set(id, this.fetchDocument(id));
     }
-    return this.cache.get(path);
+    return this.cache.get(id);
   }
 
-  private fetchDocument(path: string) {
-    this.logger.log('fetching document from', path);
+  private fetchDocument(id: string): Observable<DocumentContents> {
+    const requestPath = `${DOC_CONTENT_URL_PREFIX}${id}.json`;
+    this.logger.log('fetching document from', requestPath);
     const subject = new AsyncSubject();
     this.http
-      .get(path)
-      .map(res => res.json())
+      .get(requestPath)
+      .map(response => response.json())
       .catch((error: Response) => {
-        if (error.status === 404) {
-          if (path !== this.fileNotFoundPath) {
-            this.logger.error(`Document file not found at '${path}'`);
-            // using `getDocument` means that we can fetch the 404 doc contents from the server and cache it
-            return this.getDocument(FILE_NOT_FOUND_URL);
-          } else {
-            return of({ title: 'Not Found', contents: 'Document not found' });
-          }
-        } else {
-          this.logger.error('Error fetching document', error);
-          return Observable.of({ title: 'Error fetching document', contents: 'Sorry we were not able to fetch that document.' });
-        }
+        return error.status === 404 ? this.getFileNotFoundDoc(id) : this.getErrorDoc(id, error);
       })
       .subscribe(subject);
     return subject.asObservable();
   }
 
-  private computePath(url: string) {
-    url = url.match(/[^#?]*/)[0]; // strip off fragment and query
-    url = url.replace(/\/$/, ''); // strip off trailing slash
-    if (url === '') {
-      // deal with root url
-      url = 'index';
+  private getFileNotFoundDoc(id: string): Observable<DocumentContents> {
+    if (id !== FILE_NOT_FOUND_ID) {
+      this.logger.error(`Document file not found at '${id}'`);
+      // using `getDocument` means that we can fetch the 404 doc contents from the server and cache it
+      return this.getDocument(FILE_NOT_FOUND_ID);
+    } else {
+      return of({
+        id: FILE_NOT_FOUND_ID,
+        contents: 'Document not found'
+      });
     }
-    return 'content/docs/' + url + '.json';
+  }
+
+  private getErrorDoc(id: string, error: Response): Observable<DocumentContents> {
+    this.logger.error('Error fetching document', error);
+    this.cache.delete(id);
+    return Observable.of({
+      id: FETCHING_ERROR_ID,
+      contents: FETCHING_ERROR_CONTENTS
+    });
   }
 }
diff --git a/aio/src/app/embedded/api/api-list.component.html b/aio/src/app/embedded/api/api-list.component.html
index 7d52965de5..893947fcaf 100644
--- a/aio/src/app/embedded/api/api-list.component.html
+++ b/aio/src/app/embedded/api/api-list.component.html
@@ -1,26 +1,17 @@
-<div class="l-flex-wrap banner is-plain api-filter">
+<div class="l-flex-wrap api-filter">
 
-  <div class="form-select-menu">
-    <button class="form-select-button has-symbol" (click)="toggleTypeMenu()">
-      <strong>Type:</strong><span class="symbol {{type.name}}"></span>{{type.title}}
-    </button>
-    <ul class="form-select-dropdown" *ngIf="showTypeMenu">
-      <li *ngFor="let t of types" (click)="setType(t)" [class.selected]="t === type">
-        <span class="symbol {{t.name}}"></span>{{t.title}}
-      </li>
-    </ul>
-  </div>
+  <aio-select (change)="setType($event.option)"
+              [options]="types"
+              [selected]="type"
+              [showSymbol]="true"
+              label="Type:">
+  </aio-select>
 
-  <div class="form-select-menu">
-    <button class="form-select-button" (click)="toggleStatusMenu()">
-      <strong>Status:</strong>{{status.title}}
-    </button>
-    <ul class="form-select-dropdown" *ngIf="showStatusMenu">
-      <li *ngFor="let s of statuses" (click)="setStatus(s)" [class.selected]="s === status">
-        {{s.title}}
-      </li>
-    </ul>
-  </div>
+  <aio-select (change)="setStatus($event.option)"
+              [options]="statuses"
+              [selected]="status"
+              label="Status:">
+  </aio-select>
 
   <div class="form-search">
     <input #filter placeholder="Filter" (input)="setQuery($event.target.value)">
@@ -28,7 +19,7 @@
   </div>
 </div>
 
-<article class="l-content-small docs-content">
+<article class="api-list-container l-content-small docs-content">
   <div *ngFor="let section of filteredSections | async" >
     <h2>{{section.title}}</h2>
     <ul class="api-list">
diff --git a/aio/src/app/embedded/api/api-list.component.scss b/aio/src/app/embedded/api/api-list.component.scss
deleted file mode 100644
index 8ab4b96292..0000000000
--- a/aio/src/app/embedded/api/api-list.component.scss
+++ /dev/null
@@ -1,477 +0,0 @@
-/* HACKED FROM aio v.1 */
-
-// TODO:refactor out those parts that should be shared SASS files and import them here
-
-/*
-* Metrics
-*
-* Metrics based on material design 8pt unit
-*/
-
-$unit: 8px;
-$phone-breakpoint: 480px;
-$tablet-breakpoint: 800px;
-
-/*
-* Layer Stacking
-*
-* The approved range that can be used for layering (z-indexes)
-*/
-
-$layer-1: 1;
-$layer-2: 2;
-$layer-3: 3;
-$layer-4: 4;
-$layer-5: 5;
-
-/*
- * Colors from original _colors.scss
- */
-$white: #FFFFFF;
-$black: #000000;
-
-$amber-700: #FFA000;
-$blue-400: #42A5F5;
-$blue-500: #2196F3;
-$blue-600: #1E88E5;
-$blue-800: #1565C0;
-$blue-grey-50: #ECEFF1;
-$blue-grey-100: #CFD8DC;
-$blue-grey-500: #607D8B;
-$blue-grey-600: #546E7A;
-$green-500: #4CAF50;
-$green-800: #2E7D32;
-$light-green-600: #7CB342;
-$pink-600: #D81B60;
-$purple-600: #8E24AA;
-$teal-500: #009688;
-
-$lightgrey: #F5F6F7;
-
-
-/*
-* Layout
-*/
-.docs-content {
-  position: relative;
-}
-
-.l-content-small {
-  padding: 16px;
-  max-width: 1100px;
-  margin: 0;
-
-  @media handheld and (max-width: $phone-breakpoint),
-  screen and (max-device-width: $phone-breakpoint),
-  screen and (max-width: $tablet-breakpoint) {
-    padding: 0;
-    padding-top: ($unit * 3);
-  }
-}
-
-/*
-* SEARCH BAR
-*/
-
-.form-search {
-  position: relative;
-
-  input {
-    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-    box-sizing: border-box;
-    border: 1px solid $white;
-    color: $blue-600;
-    font-size: 16px;
-    height: $unit * 4;
-    line-height: $unit * 4;
-    outline: none;
-    padding: 0 ($unit *2) 0 ($unit * 4);
-    transition: all .2s;
-
-    // PLACEHOLDER TEXT
-    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &::-moz-placeholder { /* Firefox 19+ */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &:-ms-input-placeholder { /* IE 10+ */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &:-moz-placeholder { /* Firefox 18- */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-
-    &:focus {
-      border: 1px solid $blue-400;
-      box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
-    }
-  }
-
-  .material-icons {
-    color: $blue-grey-100;
-    font-size: 20px;
-    left: $unit;
-    position: absolute;
-    top: 6px;
-    z-index: $layer-1;
-  }
-}
-
-/*
-* Select Menu
-*/
-
-$form-select-width: 200px;
-
-.form-select-menu {
-  position: relative;
-}
-
-.form-select-button {
-  background: $white;
-  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-  box-sizing: border-box;
-  border: 1px solid $white;
-  color: $blue-grey-600;
-  font-size: 12px;
-  font-weight: 400;
-  height: $unit * 4;
-  line-height: $unit * 4;
-  outline: none;
-  padding: 0 ($unit * 2);
-  text-align: left;
-  width: $form-select-width - ($unit * 2);
-
-  strong {
-    font-weight: 600;
-    margin-right: $unit;
-    text-transform: uppercase;
-  }
-
-  &.has-symbol {
-    .symbol {
-      margin-right: $unit;
-    }
-  }
-}
-
-.form-select-dropdown {
-  background: $white;
-  box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
-  border-radius: 4px;
-  left: -$unit;
-  list-style-type: none;
-  margin: 0;
-  padding: $unit 0;
-  position: absolute;
-  top: -$unit;
-  width: 200px;
-  z-index: $layer-2;
-
-  li {
-    cursor: pointer;
-    font-size: 14px;
-    line-height: $unit * 4;
-    margin: 0;
-    padding: 0 ($unit * 2) 0 ($unit * 5);
-    position: relative;
-    transition: all .2s;
-
-    &:hover {
-      background: $blue-grey-50;
-      color: $blue-500;
-    }
-
-    &.selected {
-      background-color: $blue-grey-100;
-    }
-
-    .symbol {
-      left: $unit * 2;
-      position: absolute;
-      top: $unit;
-      z-index: $layer-5;
-    }
-  }
-}
-
-/*
-* API Symbols
-*
-*/
-
-
-/*
-* Variables
-*/
-
-
-$api-symbols: (
-  all: (
-    content: ' ',
-    background: $white
-  ),
-  decorator: (
-    content: '@',
-    background: $blue-800
-  ),
-  directive: (
-    content: 'D',
-    background: $pink-600
-  ),
-  pipe: (
-    content: 'P',
-    background: $blue-grey-600
-  ),
-  class: (
-    content: 'C',
-    background: $blue-500
-  ),
-  interface: (
-    content: 'I',
-    background: $teal-500
-  ),
-  function: (
-    content: 'F',
-    background: $green-500
-  ),
-  enum: (
-    content: 'E',
-    background: $amber-700
-  ),
-  const: (
-    content: 'K',
-    background: $purple-600
-  ),
-  type-alias: (
-    content: 'T',
-    background: $light-green-600
-  )
-);
-
-
-/*
-* Symbol Class
-*/
-
-.symbol {
-  border-radius: 2px;
-  box-shadow: 0 1px 2px rgba($black, .24);
-  color: $white;
-  display: inline-block;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: $unit * 2;
-  text-align: center;
-  width: $unit * 2;
-
-  // SYMBOL TYPES
-  @each $name, $symbol in $api-symbols {
-    &.#{$name} {
-      background: map-get($symbol, background);
-
-      &:before {
-        content: map-get($symbol, content);
-      }
-    }
-  }
-}
-
-/*
-* API Home Page
-*
-*/
-
-/*
-* API Filter Menu
-*
-*/
-
-.api-filter {
-  .form-select-menu {
-    float: left;
-  }
-
-  .form-search {
-    float: left;
-  }
-}
-
-
-/*
-* API Class List
-*
-*/
-
-.docs-content .api-list {
-  list-style: none;
-  margin: 0 0 ($unit * 6) 0;
-  padding: 0;
-  overflow: hidden;
-
-  li {
-    font-size: 14px;
-    margin: 0 0 ($unit * 2) 0;
-    line-height: 14px;
-    padding: 0;
-    float: left;
-    width: 33%;
-    min-width: 220px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    .symbol {
-      margin-right: $unit;
-    }
-    a {
-      color: $blue-grey-600;
-      display: inline-block;
-      line-height: $unit * 2;
-      padding: 0 ($unit * 2) 0 0;
-      text-decoration: none;
-      transition: all .3s;
-
-      &:hover {
-        background: $blue-grey-50;
-        color: $blue-500;
-      }
-    }
-  }
-}
-
-.docs-content .h2-api-docs,
-.docs-content .h2-api-docs:first-of-type {
-  font-size: 18px;
-  line-height: 24px;
-  margin-top: 0;
-}
-
-.code-links {
-  a {
-    code, .api-doc-code {
-      color: #1E88E5 !important;
-    }
-  }
-}
-
-.openParens {
-  margin-top: 15px;
-}
-
-.endParens {
-  margin-bottom: 20px !important;
-}
-
-p {
-
-  &.selector {
-    margin: 0;
-  }
-
-  &.location-badge {
-    margin: 0 0 16px 16px !important;
-  }
-
-  .api-doc-code {
-    border-bottom: 0;
-
-    :hover {
-      border-bottom: none;
-    }
-  }
-}
-
-.row-margin {
-  margin-bottom: 36px;
-  h2 {
-    line-height: 28px;
-  }
-}
-
-.code-margin {
-  margin-bottom: $unit;
-}
-
-.hr-margin {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-top: 1px solid $lightgrey;
-  margin-top: 15px;
-  margin-bottom: 20px;
-  padding: 0;
-}
-
-.no-bg {
-  background: none;
-  padding: 0;
-}
-
-.no-bg-with-indent {
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 16px;
-  margin-top: 6px;
-  margin-bottom: 0;
-  background: none;
-}
-
-.code-background {
-  padding: 0 5px 0;
-
-  span.pln {
-    color: #1E88E5 !important;
-  }
-}
-
-.code-anchor {
-  cursor: pointer;
-  text-decoration: none;
-
-  // Override highlight.js
-  .kwd {
-    color: #1E88E5 !important;
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.api-doc-code {
-  font-size: 14px;
-  color: #1a2326;
-
-  // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
-  &.no-pln {
-    .pln:last-child {
-      display: none;
-    }
-  }
-}
-
-
-@media screen and (max-width: 600px) {
-  .docs-content {
-    // Overrides display flex from angular material.
-    // This was added because Safari doesn't play nice with layout="column".
-    // Look of API doc in Chrome and Firefox remains the same, and is fixed for Safari.
-    .layout-xs-column {
-      display: block !important;
-    }
-  }
-
-  .api-doc-code {
-    font-size: 12px;
-  }
-
-  p.location-badge {
-    position: relative;
-    font-size: 11px;
-  }
-}
diff --git a/aio/src/app/embedded/api/api-list.component.spec.ts b/aio/src/app/embedded/api/api-list.component.spec.ts
index a38d69e438..118906a231 100644
--- a/aio/src/app/embedded/api/api-list.component.spec.ts
+++ b/aio/src/app/embedded/api/api-list.component.spec.ts
@@ -4,24 +4,23 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { ApiListComponent } from './api-list.component';
 import { ApiItem, ApiSection, ApiService } from './api.service';
 import { LocationService } from 'app/shared/location.service';
+import { SharedModule } from 'app/shared/shared.module';
 
 describe('ApiListComponent', () => {
   let component: ApiListComponent;
   let fixture: ComponentFixture<ApiListComponent>;
   let sections: ApiSection[];
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [ SharedModule ],
       declarations: [ ApiListComponent ],
       providers: [
         { provide: ApiService, useClass: TestApiService },
         { provide: LocationService, useClass: TestLocationService }
       ]
     });
-    TestBed.compileComponents();
-  }));
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(ApiListComponent);
     component = fixture.componentInstance;
     sections = getApiSections();
@@ -78,17 +77,17 @@ describe('ApiListComponent', () => {
     });
 
     it('item.show should be true for items with selected status', () => {
-      component.setStatus({name: 'stable', title: 'Stable'});
+      component.setStatus({value: 'stable', title: 'Stable'});
       expectFilteredResult('status: stable', item => item.stability === 'stable');
     });
 
     it('item.show should be true for items with "security-risk" status when selected', () => {
-      component.setStatus({name: 'security-risk', title: 'Security Risk'});
+      component.setStatus({value: 'security-risk', title: 'Security Risk'});
       expectFilteredResult('status: security-risk', item => item.securityRisk);
     });
 
     it('item.show should be true for items of selected type', () => {
-      component.setType({name: 'class', title: 'Class'});
+      component.setType({value: 'class', title: 'Class'});
       expectFilteredResult('type: class', item => item.docType === 'class');
     });
 
@@ -192,8 +191,8 @@ describe('ApiListComponent', () => {
 
     it('should have query, status, and type', () => {
       component.setQuery('foo');
-      component.setStatus({name: 'stable', title: 'Stable'});
-      component.setType({name: 'class', title: 'Class'});
+      component.setStatus({value: 'stable', title: 'Stable'});
+      component.setType({value: 'class', title: 'Class'});
 
       const search = locationService.setSearch.calls.mostRecent().args[1];
       expect(search.query).toBe('foo');
diff --git a/aio/src/app/embedded/api/api-list.component.ts b/aio/src/app/embedded/api/api-list.component.ts
index 9f1144de67..1f4a2f7512 100644
--- a/aio/src/app/embedded/api/api-list.component.ts
+++ b/aio/src/app/embedded/api/api-list.component.ts
@@ -15,10 +15,7 @@ import { combineLatest } from 'rxjs/observable/combineLatest';
 import { LocationService } from 'app/shared/location.service';
 import { ApiItem, ApiSection, ApiService } from './api.service';
 
-interface MenuItem {
-  name: string;
-  title: string;
-}
+import { Option } from 'app/shared/select/select.component';
 
 class SearchCriteria {
   query? = '';
@@ -28,8 +25,7 @@ class SearchCriteria {
 
 @Component({
   selector: 'aio-api-list',
-  templateUrl: './api-list.component.html',
-  styleUrls: ['./api-list.component.scss']
+  templateUrl: './api-list.component.html'
 })
 export class ApiListComponent implements OnInit {
 
@@ -41,29 +37,29 @@ export class ApiListComponent implements OnInit {
   private criteriaSubject = new ReplaySubject<SearchCriteria>(1);
   private searchCriteria = new SearchCriteria();
 
-  status: MenuItem;
-  type: MenuItem;
+  status: Option;
+  type: Option;
 
   // API types
-  types: MenuItem[] = [
-    { name: 'all', title: 'All' },
-    { name: 'directive', title: 'Directive' },
-    { name: 'pipe', title: 'Pipe'},
-    { name: 'decorator', title: 'Decorator' },
-    { name: 'class', title: 'Class' },
-    { name: 'interface', title: 'Interface' },
-    { name: 'function', title: 'Function' },
-    { name: 'enum', title: 'Enum' },
-    { name: 'type-alias', title: 'Type Alias' },
-    { name: 'const', title: 'Const'}
+  types: Option[] = [
+    { value: 'all', title: 'All' },
+    { value: 'directive', title: 'Directive' },
+    { value: 'pipe', title: 'Pipe'},
+    { value: 'decorator', title: 'Decorator' },
+    { value: 'class', title: 'Class' },
+    { value: 'interface', title: 'Interface' },
+    { value: 'function', title: 'Function' },
+    { value: 'enum', title: 'Enum' },
+    { value: 'type-alias', title: 'Type Alias' },
+    { value: 'const', title: 'Const'}
   ];
 
-  statuses: MenuItem[] = [
-    { name: 'all', title: 'All' },
-    { name: 'stable', title: 'Stable' },
-    { name: 'deprecated', title: 'Deprecated' },
-    { name: 'experimental', title: 'Experimental' },
-    { name: 'security-risk', title: 'Security Risk' }
+  statuses: Option[] = [
+    { value: 'all', title: 'All' },
+    { value: 'stable', title: 'Stable' },
+    { value: 'deprecated', title: 'Deprecated' },
+    { value: 'experimental', title: 'Experimental' },
+    { value: 'security-risk', title: 'Security Risk' }
   ];
 
   @ViewChild('filter') queryEl: ElementRef;
@@ -91,16 +87,16 @@ export class ApiListComponent implements OnInit {
     this.setSearchCriteria({query: (query || '').toLowerCase().trim() });
   }
 
-  setStatus(status: MenuItem) {
+  setStatus(status: Option) {
     this.toggleStatusMenu();
     this.status = status;
-    this.setSearchCriteria({status: status.name});
+    this.setSearchCriteria({status: status.value});
   }
 
-  setType(type: MenuItem) {
+  setType(type: Option) {
     this.toggleTypeMenu();
     this.type = type;
-    this.setSearchCriteria({type: type.name});
+    this.setSearchCriteria({type: type.value});
   }
 
   toggleStatusMenu() {
@@ -151,13 +147,13 @@ export class ApiListComponent implements OnInit {
     // Hack: can't bind to query because input cursor always forced to end-of-line.
     this.queryEl.nativeElement.value = q;
 
-    this.status = this.statuses.find(x => x.name === status) || this.statuses[0];
-    this.type = this.types.find(x => x.name === type) || this.types[0];
+    this.status = this.statuses.find(x => x.value === status) || this.statuses[0];
+    this.type = this.types.find(x => x.value === type) || this.types[0];
 
     this.searchCriteria = {
       query: q,
-      status: this.status.name,
-      type: this.type.name
+      status: this.status.value,
+      type: this.type.value
     };
 
     this.criteriaSubject.next(this.searchCriteria);
diff --git a/aio/src/app/embedded/api/api.service.spec.ts b/aio/src/app/embedded/api/api.service.spec.ts
index bcc27b2f46..c7bf9b060c 100644
--- a/aio/src/app/embedded/api/api.service.spec.ts
+++ b/aio/src/app/embedded/api/api.service.spec.ts
@@ -54,7 +54,7 @@ describe('ApiService', () => {
 
   describe('#sections', () => {
     it('first subscriber should fetch sections', () => {
-      const data = [{name: 'a'}, {name: 'b'}];
+      const data = [{name: 'a', title: 'A', items: []}, {name: 'b', title: 'B', items: []}];
 
       service.sections.subscribe(sections => {
         expect(sections).toEqual(data);
@@ -64,7 +64,7 @@ describe('ApiService', () => {
     });
 
     it('second subscriber should get previous sections and NOT trigger refetch', () => {
-      const data = [{name: 'a'}, {name: 'b'}];
+      const data = [{name: 'a', title: 'A', items: []}, {name: 'b', title: 'B', items: []}];
       let subscriptions = 0;
 
       service.sections.subscribe(sections => {
@@ -90,7 +90,7 @@ describe('ApiService', () => {
     it('should connect to the server w/ expected URL', () => {
       service.fetchSections();
       expect(backend.connectionsArray.length).toEqual(1);
-      expect(backend.connectionsArray[0].request.url).toEqual('content/docs/api/api-list.json');
+      expect(backend.connectionsArray[0].request.url).toEqual('generated/docs/api/api-list.json');
     });
 
     it('should refresh the #sections observable w/ new content on second call', () => {
@@ -99,7 +99,7 @@ describe('ApiService', () => {
       let connection: MockConnection;
       backend.connections.subscribe(c => connection = c);
 
-      let data = [{name: 'a'}, {name: 'b'}];
+      let data = [{name: 'a', title: 'A', items: []}, {name: 'b', title: 'B', items: []}];
 
       service.sections.subscribe(sections => {
         // called twice during this test
@@ -110,7 +110,7 @@ describe('ApiService', () => {
       connection.mockRespond(createResponse(data));
 
       // refresh/refetch
-      data = [{name: 'c'}];
+      data = [{name: 'c', title: 'C', items: []}];
       service.fetchSections();
       connection.mockRespond(createResponse(data));
 
diff --git a/aio/src/app/embedded/api/api.service.ts b/aio/src/app/embedded/api/api.service.ts
index 3c7404e929..7c708d3265 100644
--- a/aio/src/app/embedded/api/api.service.ts
+++ b/aio/src/app/embedded/api/api.service.ts
@@ -8,6 +8,7 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/takeUntil';
 
 import { Logger } from 'app/shared/logger.service';
+import { DOC_CONTENT_URL_PREFIX } from 'app/documents/document.service';
 
 export interface ApiItem {
   name: string;
@@ -29,7 +30,7 @@ export interface ApiSection {
 @Injectable()
 export class ApiService implements OnDestroy {
 
-  private apiBase = 'content/docs/api/';
+  private apiBase = DOC_CONTENT_URL_PREFIX + 'api/';
   private apiListJsonDefault = 'api-list.json';
   private firstTime = true;
   private onDestroy = new Subject();
diff --git a/aio/src/app/embedded/code/code-example.component.spec.ts b/aio/src/app/embedded/code/code-example.component.spec.ts
index 987258b884..9d2d0f6c59 100644
--- a/aio/src/app/embedded/code/code-example.component.spec.ts
+++ b/aio/src/app/embedded/code/code-example.component.spec.ts
@@ -1,7 +1,6 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, DebugElement, Input } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Component, DebugElement, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 
 import { CodeExampleComponent } from './code-example.component';
 
@@ -62,25 +61,41 @@ describe('CodeExampleComponent', () => {
     TestBed.overrideComponent(HostComponent, {
       set: {template: '<code-example title="Great Example"></code-example>'}});
     createComponent(oneLineCode);
-    const actual = codeExampleDe.query(By.css('header')).nativeElement.innerText;
+    const actual = codeExampleDe.query(By.css('header')).nativeElement.textContent;
     expect(actual).toBe('Great Example');
   });
+
+  it('should remove the `title` attribute after initialisation', () => {
+    TestBed.overrideComponent(HostComponent, {
+      set: {template: '<code-example title="Great Example"></code-example>'}});
+    createComponent(oneLineCode);
+    expect(codeExampleDe.nativeElement.getAttribute('title')).toEqual(null);
+  });
+
+  it('should pass hideCopy to CodeComonent', () => {
+    TestBed.overrideComponent(HostComponent, {
+      set: {template: '<code-example hideCopy="true"></code-example>'}});
+    createComponent(oneLineCode);
+    expect(codeComponent.hideCopy).toBe(true);
+  });
 });
 
 //// Test helpers ////
-// tslint:disable:member-ordering
 @Component({
   selector: 'aio-code',
   template: `
-  <div>lang: {{language}}</div>
-  <div>linenums: {{linenums}}</div>
-  code: <pre>{{someCode}}</pre>
+    <div>lang: {{language}}</div>
+    <div>linenums: {{linenums}}</div>
+    code: <pre>{{someCode}}</pre>
   `
 })
 class TestCodeComponent {
   @Input() code = '';
   @Input() language: string;
-  @Input() linenums: boolean | number;
+  @Input() linenums: string;
+  @Input() path: string;
+  @Input() region: string;
+  @Input() hideCopy: boolean;
 
   get someCode() {
     return this.code && this.code.length > 30 ? this.code.substr(0, 30) + '...' : this.code;
diff --git a/aio/src/app/embedded/code/code-example.component.ts b/aio/src/app/embedded/code/code-example.component.ts
index baf9900c57..199051260d 100644
--- a/aio/src/app/embedded/code/code-example.component.ts
+++ b/aio/src/app/embedded/code/code-example.component.ts
@@ -1,5 +1,6 @@
 /* tslint:disable component-selector */
-import { Component, ElementRef, OnInit } from '@angular/core';
+import { Component, ElementRef, HostBinding, OnInit } from '@angular/core';
+import { getBoolFromAttribute } from 'app/shared/attribute-utils';
 
 /**
  * An embeddable code block that displays nicely formatted code.
@@ -16,21 +17,44 @@ import { Component, ElementRef, OnInit } from '@angular/core';
   selector: 'code-example',
   template: `
     <header *ngIf="title">{{title}}</header>
-    <aio-code [ngClass]="{'headed-code':title, 'simple-code':!title}" [code]="code" [language]="language" [linenums]="linenums"></aio-code>
+    <aio-code [ngClass]="classes" [code]="code"
+    [language]="language" [linenums]="linenums"
+    [path]="path" [region]="region"
+    [hideCopy]="hideCopy" [title]="title"></aio-code>
   `
 })
-export class CodeExampleComponent implements OnInit { // implements AfterViewInit {
+export class CodeExampleComponent implements OnInit {
 
+  classes: {};
   code: string;
   language: string;
-  linenums: boolean | number;
+  linenums: string;
+  path: string;
+  region: string;
   title: string;
+  hideCopy: boolean;
+
+  @HostBinding('class.avoidFile')
+  isAvoid = false;
 
   constructor(private elementRef: ElementRef) {
-    const element = this.elementRef.nativeElement;
+    const element: HTMLElement = this.elementRef.nativeElement;
+
     this.language = element.getAttribute('language') || '';
     this.linenums = element.getAttribute('linenums');
+    this.path = element.getAttribute('path') || '';
+    this.region = element.getAttribute('region') || '';
     this.title = element.getAttribute('title') || '';
+    // Now remove the title attribute to prevent unwanted tooltip popups when hovering over the code.
+    element.removeAttribute('title');
+
+    this.isAvoid = this.path.indexOf('.avoid.') !== -1;
+    this.hideCopy = this.isAvoid || getBoolFromAttribute(element, ['hidecopy', 'hide-copy']);
+
+    this.classes = {
+      'headed-code': !!this.title,
+      'simple-code': !this.title,
+    };
   }
 
   ngOnInit() {
diff --git a/aio/src/app/embedded/code/code-tabs.component.spec.ts b/aio/src/app/embedded/code/code-tabs.component.spec.ts
new file mode 100644
index 0000000000..bfc7a145ec
--- /dev/null
+++ b/aio/src/app/embedded/code/code-tabs.component.spec.ts
@@ -0,0 +1,245 @@
+import { CommonModule } from '@angular/common';
+import { Component, DebugElement, Input, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MdTabGroup, MdTabsModule } from '@angular/material';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { CodeTabsComponent } from './code-tabs.component';
+
+
+describe('CodeTabsComponent', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let hostComponent: HostComponent;
+  let codeTabsDe: DebugElement;
+  let codeTabsComponent: CodeTabsComponent;
+
+  const createComponentBasic = (codeTabsContent = '') => {
+    fixture = TestBed.createComponent(HostComponent);
+    hostComponent = fixture.componentInstance;
+    codeTabsDe = fixture.debugElement.children[0];
+    codeTabsComponent = codeTabsDe.componentInstance;
+
+    // Copy the CodeTab's innerHTML (content)
+    // into the `codeTabsContent` property as the DocViewer does.
+    codeTabsDe.nativeElement.codeTabsContent = codeTabsContent;
+    fixture.detectChanges();
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CodeTabsComponent, HostComponent, TestCodeComponent ],
+      imports: [ CommonModule ],
+      schemas: [ NO_ERRORS_SCHEMA ],
+    });
+  });
+
+  it('should create CodeTabsComponent', () => {
+    createComponentBasic();
+    expect(codeTabsComponent).toBeTruthy('CodeTabsComponent');
+  });
+
+  describe('(tab labels)', () => {
+    let labelElems: HTMLSpanElement[];
+
+    const createComponent = (codeTabsContent?: string) => {
+      createComponentBasic(codeTabsContent);
+      const labelDes = codeTabsDe.queryAll(By.css('.mat-tab-label'));
+      labelElems = labelDes.map(de => de.nativeElement.querySelector('span'));
+    };
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [ MdTabsModule, NoopAnimationsModule ]
+      });
+    });
+
+    it('should create a label for each tab', () => {
+      createComponent(`
+        <code-pane>foo</code-pane>
+        <code-pane>bar</code-pane>
+        <code-pane>baz</code-pane>
+      `);
+
+      expect(labelElems.length).toBe(3);
+    });
+
+    it('should use the `title` as label', () => {
+      createComponent(`
+        <code-pane title="foo-title">foo</code-pane>
+        <code-pane title="bar-title">bar</code-pane>
+      `);
+      const texts = labelElems.map(s => s.textContent);
+
+      expect(texts).toEqual(['foo-title', 'bar-title']);
+    });
+
+    it('should add the `class` to the label element', () => {
+      createComponent(`
+        <code-pane class="foo-class">foo</code-pane>
+        <code-pane class="bar-class">bar</code-pane>
+      `);
+      const classes = labelElems.map(s => s.className);
+
+      expect(classes).toEqual(['foo-class', 'bar-class']);
+    });
+
+    it('should disable ripple effect on tab labels', () => {
+      createComponent();
+      const tabsGroupComponent = codeTabsDe.query(By.directive(MdTabGroup)).componentInstance;
+
+      expect(tabsGroupComponent.disableRipple).toBe(true);
+    });
+  });
+
+  describe('(tab content)', () => {
+    let codeDes: DebugElement[];
+    let codeComponents: TestCodeComponent[];
+
+    const createComponent = (codeTabsContent?: string) => {
+      createComponentBasic(codeTabsContent);
+      codeDes = codeTabsDe.queryAll(By.directive(TestCodeComponent));
+      codeComponents = codeDes.map(de => de.componentInstance);
+    };
+
+    it('should pass `class` to CodeComponent (<aio-code>)', () => {
+      createComponent(`
+        <code-pane class="foo-class">foo</code-pane>
+        <code-pane class="bar-class">bar</code-pane>
+      `);
+      const classes = codeDes.map(de => de.nativeElement.className);
+
+      expect(classes).toEqual(['foo-class', 'bar-class']);
+    });
+
+    it('should pass content to CodeComponent (<aio-code>)', () => {
+      createComponent(`
+        <code-pane>foo</code-pane>
+        <code-pane>bar</code-pane>
+      `);
+      const codes = codeComponents.map(c => c.code);
+
+      expect(codes).toEqual(['foo', 'bar']);
+    });
+
+    it('should pass `language` to CodeComponent (<aio-code>)', () => {
+      createComponent(`
+        <code-pane language="foo-lang">foo</code-pane>
+        <code-pane language="bar-lang">bar</code-pane>
+      `);
+      const langs = codeComponents.map(c => c.language);
+
+      expect(langs).toEqual(['foo-lang', 'bar-lang']);
+    });
+
+    it('should pass `linenums` to CodeComponent (<aio-code>)', () => {
+      createComponent(`
+        <code-pane linenums="foo-lnums">foo</code-pane>
+        <code-pane linenums="bar-lnums">bar</code-pane>
+        <code-pane linenums="">baz</code-pane>
+        <code-pane linenums>qux</code-pane>
+      `);
+      const lnums = codeComponents.map(c => c.linenums);
+
+      expect(lnums).toEqual(['foo-lnums', 'bar-lnums', '', '']);
+    });
+
+    it('should use the default value (if present on <code-tabs>) if `linenums` is not specified', () => {
+      TestBed.overrideComponent(HostComponent, {
+        set: { template: '<code-tabs linenums="default-lnums"></code-tabs>' }
+      });
+
+      createComponent(`
+        <code-pane linenums="foo-lnums">foo</code-pane>
+        <code-pane linenums>bar</code-pane>
+        <code-pane>baz</code-pane>
+      `);
+      const lnums = codeComponents.map(c => c.linenums);
+
+      expect(lnums).toEqual(['foo-lnums', '', 'default-lnums']);
+    });
+
+    it('should pass `path` to CodeComponent (<aio-code>)', () => {
+      createComponent(`
+        <code-pane path="foo-path">foo</code-pane>
+        <code-pane path="bar-path">bar</code-pane>
+      `);
+      const paths = codeComponents.map(c => c.path);
+
+      expect(paths).toEqual(['foo-path', 'bar-path']);
+    });
+
+    it('should default to an empty string if `path` is not spcified', () => {
+      createComponent(`
+        <code-pane>foo</code-pane>
+        <code-pane>bar</code-pane>
+      `);
+      const paths = codeComponents.map(c => c.path);
+
+      expect(paths).toEqual(['', '']);
+    });
+
+    it('should pass `region` to CodeComponent (<aio-code>)', () => {
+      createComponent(`
+        <code-pane region="foo-region">foo</code-pane>
+        <code-pane region="bar-region">bar</code-pane>
+      `);
+      const regions = codeComponents.map(c => c.region);
+
+      expect(regions).toEqual(['foo-region', 'bar-region']);
+    });
+
+    it('should default to an empty string if `region` is not spcified', () => {
+      createComponent(`
+        <code-pane>foo</code-pane>
+        <code-pane>bar</code-pane>
+      `);
+      const regions = codeComponents.map(c => c.region);
+
+      expect(regions).toEqual(['', '']);
+    });
+
+    it('should pass `title` to CodeComponent (<aio-code>)', () => {
+      createComponent(`
+        <code-pane title="foo-title">foo</code-pane>
+        <code-pane title="bar-title">bar</code-pane>
+      `);
+      const titles = codeComponents.map(c => c.title);
+
+      expect(titles).toEqual(['foo-title', 'bar-title']);
+    });
+  });
+});
+
+//// Test helpers ////
+@Component({
+  selector: 'aio-code',
+  template: `
+    <div>lang: {{ language }}</div>
+    <div>linenums: {{ linenums }}</div>
+    code: <pre>{{ someCode }}</pre>
+  `
+})
+class TestCodeComponent {
+  @Input() code = '';
+  @Input() hideCopy: boolean;
+  @Input() language: string;
+  @Input() linenums: string;
+  @Input() path: string;
+  @Input() region: string;
+  @Input() title: string;
+
+  get someCode() {
+    if (this.code && this.code.length > 30) {
+      return `${this.code.substring(0, 30)}...`;
+    }
+
+    return this.code;
+  }
+}
+
+@Component({
+  selector: 'aio-host-comp',
+  template: `<code-tabs></code-tabs>`
+})
+class HostComponent {}
diff --git a/aio/src/app/embedded/code/code-tabs.component.ts b/aio/src/app/embedded/code/code-tabs.component.ts
index a9300ea0be..ef7b3b6c4b 100644
--- a/aio/src/app/embedded/code/code-tabs.component.ts
+++ b/aio/src/app/embedded/code/code-tabs.component.ts
@@ -2,9 +2,13 @@
 import { Component, ElementRef, OnInit } from '@angular/core';
 
 export interface TabInfo {
-  title: string;
-  language: string;
+  class: string;
   code: string;
+  language: string;
+  linenums: any;
+  path: string;
+  region: string;
+  title: string;
 }
 
 /**
@@ -17,12 +21,19 @@ export interface TabInfo {
 @Component({
   selector: 'code-tabs',
   template: `
-    <md-tab-group class="code-tab-group">
+    <md-tab-group class="code-tab-group" disableRipple>
       <md-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
         <ng-template md-tab-label>
-          <span class="{{tab.class}}">{{ tab.title }}</span>
+          <span class="{{ tab.class }}">{{ tab.title }}</span>
         </ng-template>
-        <aio-code [code]="tab.code" [language]="tab.language" [linenums]="tab.linenums" class="{{ tab.class }}"></aio-code>
+        <aio-code class="{{ tab.class }}"
+          [code]="tab.code"
+          [language]="tab.language"
+          [linenums]="tab.linenums"
+          [path]="tab.path"
+          [region]="tab.region"
+          [title]="tab.title">
+        </aio-code>
       </md-tab>
     </md-tab-group>
   `
@@ -46,7 +57,7 @@ export class CodeTabsComponent implements OnInit {
   processContent(content: string) {
     // We add it to an element so that we can easily parse the HTML
     const element = document.createElement('div');
-    // **Security:** `codeTabsContent` is provided by docs authors and as such its considered to
+    // **Security:** `codeTabsContent` is provided by docs authors and as such is considered to
     // be safe for innerHTML purposes.
     element.innerHTML = content;
 
@@ -55,10 +66,12 @@ export class CodeTabsComponent implements OnInit {
     for (let i = 0; i < codeExamples.length; i++) {
       const codeExample = codeExamples.item(i);
       const tab = {
-        code: codeExample.innerHTML,
         class: codeExample.getAttribute('class'),
+        code: codeExample.innerHTML,
         language: codeExample.getAttribute('language'),
         linenums: this.getLinenums(codeExample),
+        path: codeExample.getAttribute('path') || '',
+        region: codeExample.getAttribute('region') || '',
         title: codeExample.getAttribute('title')
       };
       this.tabs.push(tab);
diff --git a/aio/src/app/embedded/code/code.component.spec.ts b/aio/src/app/embedded/code/code.component.spec.ts
index 86efc25b22..ad0496e935 100644
--- a/aio/src/app/embedded/code/code.component.spec.ts
+++ b/aio/src/app/embedded/code/code.component.spec.ts
@@ -1,7 +1,8 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { Component, DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MdSnackBarModule, MdSnackBar } from '@angular/material';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { CodeComponent } from './code.component';
 import { CopierService } from 'app/shared//copier.service';
@@ -10,7 +11,7 @@ import { PrettyPrinter } from './pretty-printer.service';
 
 const oneLineCode = 'const foo = "bar";';
 
-const multiLineCode = `
+const smallMultiLineCode = `
 &lt;hero-details&gt;
   &lt;h2&gt;Bah Dah Bing&lt;/h2&gt;
   &lt;hero-team&gt;
@@ -18,6 +19,8 @@ const multiLineCode = `
   &lt;/hero-team&gt;
 &lt;/hero-details&gt;`;
 
+const bigMultiLineCode = smallMultiLineCode + smallMultiLineCode + smallMultiLineCode;
+
 describe('CodeComponent', () => {
   let codeComponentDe: DebugElement;
   let codeComponent: CodeComponent;
@@ -37,17 +40,17 @@ describe('CodeComponent', () => {
     delete window['prettyPrintOne'];
   });
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [ MdSnackBarModule, NoopAnimationsModule ],
       declarations: [ CodeComponent, HostComponent ],
       providers: [
         PrettyPrinter,
-        {provide: CopierService, useClass: TestCopierService },
+        CopierService,
         {provide: Logger, useClass: TestLogger }
      ]
-    })
-    .compileComponents();
-  }));
+    });
+  });
 
   // Must be async because
   // CodeComponent creates PrettyPrintService which async loads `prettify.js`.
@@ -65,99 +68,198 @@ describe('CodeComponent', () => {
     expect(codeComponent).toBeTruthy('CodeComponent');
   });
 
-  it('should format a one-line code sample', () => {
-    // 'pln' spans are a tell-tale for syntax highlighing
-    const spans = codeComponentDe.nativeElement.querySelectorAll('span.pln');
-    expect(spans.length).toBeGreaterThan(0, 'formatted spans');
+  describe('pretty printing', () => {
+    it('should format a one-line code sample', () => {
+      // 'pln' spans are a tell-tale for syntax highlighing
+      const spans = codeComponentDe.nativeElement.querySelectorAll('span.pln');
+      expect(spans.length).toBeGreaterThan(0, 'formatted spans');
+    });
+
+    function hasLineNumbers() {
+      // presence of `<li>`s are a tell-tale for line numbers
+      return 0 < codeComponentDe.nativeElement.querySelectorAll('li').length;
+    }
+
+    it('should format a one-line code sample without linenums by default', () => {
+      expect(hasLineNumbers()).toBe(false);
+    });
+
+    it('should add line numbers to one-line code sample when linenums set true', () => {
+      hostComponent.linenums = 'true';
+      fixture.detectChanges();
+      expect(hasLineNumbers()).toBe(true);
+    });
+
+    it('should format a small multi-line code without linenums by default', () => {
+      hostComponent.code = smallMultiLineCode;
+      fixture.detectChanges();
+      expect(hasLineNumbers()).toBe(false);
+    });
+
+    it('should add line numbers to a big multi-line code by default', () => {
+      hostComponent.code = bigMultiLineCode;
+      fixture.detectChanges();
+      expect(hasLineNumbers()).toBe(true);
+    });
+
+    it('should format big multi-line code without linenums when linenums set false', () => {
+      hostComponent.linenums = false;
+      hostComponent.code = bigMultiLineCode;
+      fixture.detectChanges();
+      expect(hasLineNumbers()).toBe(false);
+    });
   });
 
-  it('should format a one-line code sample without linenums by default', () => {
-    // `<li>`s are a tell-tale for line numbers
-    const lis = codeComponentDe.nativeElement.querySelectorAll('li');
-    expect(lis.length).toBe(0, 'should be no linenums');
+  describe('whitespace handling', () => {
+    it('should remove common indentation from the code before rendering', () => {
+      hostComponent.linenums = false;
+      hostComponent.code = '  abc\n   let x = text.split(\'\\n\');\n  ghi\n\n  jkl\n';
+      fixture.detectChanges();
+      const codeContent = codeComponentDe.nativeElement.querySelector('code').textContent;
+      expect(codeContent).toEqual('abc\n let x = text.split(\'\\n\');\nghi\n\njkl');
+    });
+
+    it('should trim whitespace from the code before rendering', () => {
+      hostComponent.linenums = false;
+      hostComponent.code = '\n\n\n' + smallMultiLineCode + '\n\n\n';
+      fixture.detectChanges();
+      const codeContent = codeComponentDe.nativeElement.querySelector('code').textContent;
+      expect(codeContent).toEqual(codeContent.trim());
+    });
+
+    it('should trim whitespace from code before computing whether to format linenums', () => {
+      hostComponent.code = '\n\n\n' + hostComponent.code + '\n\n\n';
+      fixture.detectChanges();
+      // `<li>`s are a tell-tale for line numbers
+      const lis = codeComponentDe.nativeElement.querySelectorAll('li');
+      expect(lis.length).toBe(0, 'should be no linenums');
+    });
   });
 
-  it('should add line numbers to one-line code sample when linenums set true', () => {
-    hostComponent.linenums = 'true';
-    fixture.detectChanges();
+  describe('error message', () => {
 
-    // `<li>`s are a tell-tale for line numbers
-    const lis = codeComponentDe.nativeElement.querySelectorAll('li');
-    expect(lis.length).toBe(1, 'has linenums');
+    function getErrorMessage() {
+      const missing: HTMLElement = codeComponentDe.nativeElement.querySelector('.code-missing');
+      return missing ? missing.textContent : null;
+    }
+
+    it('should not display "code-missing" class when there is some code', () => {
+      fixture.detectChanges();
+      expect(getErrorMessage()).toBeNull('should not have element with "code-missing" class');
+    });
+
+    it('should display error message when there is no code (after trimming)', () => {
+      hostComponent.code = ' \n ';
+      fixture.detectChanges();
+      expect(getErrorMessage()).toContain('missing');
+    });
+
+    it('should show path and region in missing-code error message', () => {
+      hostComponent.code = ' \n ';
+      hostComponent.path = 'fizz/buzz/foo.html';
+      hostComponent.region = 'something';
+      fixture.detectChanges();
+      expect(getErrorMessage()).toMatch(/for[\s\S]fizz\/buzz\/foo\.html#something$/);
+    });
+
+    it('should show path only in missing-code error message when no region', () => {
+      hostComponent.code = ' \n ';
+      hostComponent.path = 'fizz/buzz/foo.html';
+      fixture.detectChanges();
+      expect(getErrorMessage()).toMatch(/for[\s\S]fizz\/buzz\/foo\.html$/);
+    });
+
+    it('should show simple missing-code error message when no path/region', () => {
+      hostComponent.code = ' \n ';
+      fixture.detectChanges();
+      expect(getErrorMessage()).toMatch(/missing.$/);
+    });
   });
 
-  it('should format multi-line code with linenums by default', () => {
-    hostComponent.code = multiLineCode;
-    fixture.detectChanges();
+  describe('copy button', () => {
 
-    // `<li>`s are a tell-tale for line numbers
-    const lis = codeComponentDe.nativeElement.querySelectorAll('li');
-    expect(lis.length).toBeGreaterThan(0, 'has linenums');
+    function getButton() {
+      const btnDe = fixture.debugElement.query(By.css('button'));
+      return btnDe ? btnDe.nativeElement : null;
+    }
+
+    it('should be hidden if the `hideCopy` input is true', () => {
+      hostComponent.hideCopy = true;
+      fixture.detectChanges();
+      expect(getButton()).toBe(null);
+    });
+
+    it('should have title', () => {
+      fixture.detectChanges();
+      expect(getButton().title).toBe('Copy code snippet');
+    });
+
+    it('should have no aria-label by default', () => {
+      fixture.detectChanges();
+      expect(getButton().getAttribute('aria-label')).toBe('');
+    });
+
+    it('should have aria-label explaining what is being copied when title passed in', () => {
+      hostComponent.title = 'a/b/c/foo.ts';
+      fixture.detectChanges();
+      expect(getButton().getAttribute('aria-label')).toContain(hostComponent.title);
+    });
+
+    it('should call copier service when clicked', () => {
+      const copierService: CopierService = TestBed.get(CopierService);
+      const spy = spyOn(copierService, 'copyText');
+      expect(spy.calls.count()).toBe(0, 'before click');
+      getButton().click();
+      expect(spy.calls.count()).toBe(1, 'after click');
+    });
+
+    it('should copy code text when clicked', () => {
+      const copierService: CopierService = TestBed.get(CopierService);
+      const spy = spyOn(copierService, 'copyText');
+      getButton().click();
+      expect(spy.calls.argsFor(0)[0]).toBe(oneLineCode, 'after click');
+    });
+
+    it('should preserve newlines in the copied code', () => {
+      const copierService: CopierService = TestBed.get(CopierService);
+      const spy = spyOn(copierService, 'copyText');
+      const expectedCode = smallMultiLineCode.trim().replace(/&lt;/g, '<').replace(/&gt;/g, '>');
+      let actualCode;
+
+      hostComponent.code = smallMultiLineCode;
+
+      [false, true, 42].forEach(linenums => {
+        hostComponent.linenums = linenums;
+        fixture.detectChanges();
+        codeComponent.ngOnChanges();
+        getButton().click();
+        actualCode = spy.calls.mostRecent().args[0];
+
+        expect(actualCode).toBe(expectedCode, `when linenums=${linenums}`);
+        expect(actualCode.match(/\r?\n/g).length).toBe(5);
+
+        spy.calls.reset();
+      });
+    });
+
+    it('should display a message when copy succeeds', () => {
+      const snackBar: MdSnackBar = TestBed.get(MdSnackBar);
+      const copierService: CopierService = TestBed.get(CopierService);
+      spyOn(snackBar, 'open');
+      spyOn(copierService, 'copyText').and.returnValue(true);
+      getButton().click();
+      expect(snackBar.open).toHaveBeenCalledWith('Code Copied', '', { duration: 800 });
+    });
+
+    it('should display an error when copy fails', () => {
+      const snackBar: MdSnackBar = TestBed.get(MdSnackBar);
+      const copierService: CopierService = TestBed.get(CopierService);
+      spyOn(snackBar, 'open');
+      spyOn(copierService, 'copyText').and.returnValue(false);
+      getButton().click();
+      expect(snackBar.open).toHaveBeenCalledWith('Copy failed. Please try again!', '', { duration: 800 });
+    });
   });
-
-  it('should not format multi-line code when linenums set false', () => {
-    hostComponent.linenums = false;
-    hostComponent.code = multiLineCode;
-    fixture.detectChanges();
-
-    // `<li>`s are a tell-tale for line numbers
-    const lis = codeComponentDe.nativeElement.querySelectorAll('li');
-    expect(lis.length).toBe(0, 'should be no linenums');
-  });
-
-  it('should remove common indentation from the code before rendering', () => {
-    hostComponent.linenums = false;
-    hostComponent.code = '  abc\n   let x = text.split(\'\\n\');\n  ghi\n\n  jkl\n';
-    fixture.detectChanges();
-    const codeContent = codeComponentDe.nativeElement.querySelector('code').innerText;
-    expect(codeContent).toEqual('abc\n let x = text.split(\'\\n\');\nghi\n\njkl');
-  });
-
-  it('should trim whitespace from the code before rendering', () => {
-    hostComponent.linenums = false;
-    hostComponent.code = '\n\n\n' + multiLineCode + '\n\n\n';
-    fixture.detectChanges();
-    const codeContent = codeComponentDe.nativeElement.querySelector('code').innerText;
-    expect(codeContent).toEqual(codeContent.trim());
-  });
-
-  it('should trim whitespace from code before computing whether to format linenums', () => {
-    hostComponent.code = '\n\n\n' + hostComponent.code + '\n\n\n';
-    fixture.detectChanges();
-    // `<li>`s are a tell-tale for line numbers
-    const lis = codeComponentDe.nativeElement.querySelectorAll('li');
-    expect(lis.length).toBe(0, 'should be no linenums');
-  });
-
-  it('should display error message when there is no code (after trimming)', () => {
-    hostComponent.code = ' \n ';
-    fixture.detectChanges();
-    const missing = codeComponentDe.nativeElement.querySelector('.code-missing') as HTMLElement;
-    expect(missing).not.toBeNull('should have element with "code-missing" class');
-    expect(missing.innerText).toContain('missing', 'error message');
-  });
-
-  it('should not display "code-missing" class when there is some code', () => {
-    fixture.detectChanges();
-    const missing = codeComponentDe.nativeElement.querySelector('.code-missing');
-    expect(missing).toBeNull('should not have element with "code-missing" class');
-  });
-
-  it('should call copier service when copy button clicked', () => {
-    const copierService: TestCopierService = <any> codeComponentDe.injector.get(CopierService) ;
-    const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
-    expect(copierService.copyText.calls.count()).toBe(0, 'before click');
-    button.click();
-    expect(copierService.copyText.calls.count()).toBe(1, 'after click');
-  });
-
-  it('should copy code text when copy button clicked', () => {
-    const copierService: TestCopierService = <any> codeComponentDe.injector.get(CopierService) ;
-    const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
-    button.click();
-    expect(copierService.copyText.calls.argsFor(0)[0]).toEqual(oneLineCode, 'after click');
-  });
-
 });
 
 //// Test helpers ////
@@ -165,17 +267,19 @@ describe('CodeComponent', () => {
 @Component({
   selector: 'aio-host-comp',
   template: `
-      <aio-code md-no-ink [code]="code" [language]="language" [linenums]="linenums"></aio-code>
+    <aio-code md-no-ink [code]="code" [language]="language"
+    [linenums]="linenums" [path]="path" [region]="region"
+    [hideCopy]="hideCopy" [title]="title"></aio-code>
   `
 })
 class HostComponent {
   code = oneLineCode;
+  hideCopy: boolean;
   language: string;
   linenums: boolean | number | string;
-}
-
-class TestCopierService {
-  copyText = jasmine.createSpy('copyText');
+  path: string;
+  region: string;
+  title: string;
 }
 
 class TestLogger {
diff --git a/aio/src/app/embedded/code/code.component.ts b/aio/src/app/embedded/code/code.component.ts
index f994c2af6e..5a982c7390 100644
--- a/aio/src/app/embedded/code/code.component.ts
+++ b/aio/src/app/embedded/code/code.component.ts
@@ -2,9 +2,11 @@ import { Component, ElementRef, ViewChild, OnChanges, OnDestroy, Input } from '@
 import { Logger } from 'app/shared/logger.service';
 import { PrettyPrinter } from './pretty-printer.service';
 import { CopierService } from 'app/shared/copier.service';
+import { MdSnackBar } from '@angular/material';
 
 const originalLabel = 'Copy Code';
 const copiedLabel = 'Copied!';
+const defaultLineNumsCount = 10; // by default, show linenums over this number
 
 /**
  * Formatted Code Block
@@ -16,22 +18,50 @@ const copiedLabel = 'Copied!';
  * Example usage:
  *
  * ```
- *   <aio-code [code]="variableContainingCode" [language]="ts" [linenums]="true"></aio-code>
+ * <aio-code
+ *   [code]="variableContainingCode"
+ *   [language]="ts"
+ *   [linenums]="true"
+ *   [path]="ts-to-js/ts/src/app/app.module.ts"
+ *   [region]="ng2import">
+ * </aio-code>
  * ```
- *
  */
 @Component({
   selector: 'aio-code',
   template: `
-
     <pre class="prettyprint lang-{{language}}">
-      <button *ngIf="code" class="material-icons copy-button" (click)="doCopy()">content_copy</button>
+      <button *ngIf="!hideCopy" class="material-icons copy-button"
+        title="Copy code snippet"
+        [attr.aria-label]="ariaLabel"
+        (click)="doCopy()">
+        <span aria-hidden="true">content_copy</span>
+      </button>
       <code class="animated fadeIn" #codeContainer></code>
     </pre>
     `
 })
 export class CodeComponent implements OnChanges {
 
+  ariaLabel = '';
+
+  /**
+   * The code to be formatted, this should already be HTML encoded
+   */
+  @Input()
+  code: string;
+
+  /**
+   * The code to be copied when clicking the copy button, this should not be HTML encoded
+   */
+  private codeText: string;
+
+  /**
+   * set to true if the copy button is not to be shown
+   */
+  @Input()
+  hideCopy: boolean;
+
   /**
    * The language of the code to render
    * (could be javascript, dart, typescript, etc)
@@ -49,15 +79,22 @@ export class CodeComponent implements OnChanges {
   linenums: boolean | number | string;
 
   /**
-   * The code to be formatted, this should already be HTML encoded
+   * path to the source of the code being displayed
    */
   @Input()
-  code: string;
+  path: string;
 
   /**
-   * The label to show on the copy button
+   * region of the source of the code being displayed
    */
-  buttonLabel = originalLabel;
+  @Input()
+  region: string;
+
+  /**
+   * title for this snippet (optional)
+   */
+  @Input()
+  title: string;
 
   /**
    * The element in the template that will display the formatted code
@@ -65,21 +102,26 @@ export class CodeComponent implements OnChanges {
   @ViewChild('codeContainer') codeContainer: ElementRef;
 
   constructor(
+    private snackbar: MdSnackBar,
     private pretty: PrettyPrinter,
     private copier: CopierService,
     private logger: Logger) {}
 
   ngOnChanges() {
     this.code = this.code && leftAlign(this.code);
+    this.ariaLabel = this.title ? `Copy code snippet from ${this.title}` : '';
 
     if (!this.code) {
-      this.setCodeHtml('<p class="code-missing">The code sample is missing.</p>');
+      const src = this.path ? this.path + (this.region ? '#' + this.region : '') : '';
+      const srcMsg = src ? ` for\n${src}` : '.';
+      this.setCodeHtml(`<p class="code-missing">The code sample is missing${srcMsg}</p>`);
       return;
     }
 
     const linenums = this.getLinenums();
 
     this.setCodeHtml(this.code); // start with unformatted code
+    this.codeText = this.getCodeText(); // store the unformatted code as text (for copying)
     this.pretty.formatCode(this.code, this.language, linenums).subscribe(
       formattedCode => this.setCodeHtml(formattedCode),
       err => { /* ignore failure to format */ }
@@ -92,16 +134,27 @@ export class CodeComponent implements OnChanges {
     this.codeContainer.nativeElement.innerHTML = formattedCode;
   }
 
+  private getCodeText() {
+    // `prettify` may remove newlines, e.g. when `linenums` are on. Retrieve the content of the
+    // container as text, before prettifying it.
+    // We take the textContent because we don't want it to be HTML encoded.
+    return this.codeContainer.nativeElement.textContent;
+  }
+
   doCopy() {
-    // We take the innerText because we don't want it to be HTML encoded
-    const code = this.codeContainer.nativeElement.innerText;
+    const code = this.codeText;
     if (this.copier.copyText(code)) {
       this.logger.log('Copied code to clipboard:', code);
-      // change the button label (for one second)
-      this.buttonLabel = copiedLabel;
-      setTimeout(() => this.buttonLabel = originalLabel, 1000);
+      // success snackbar alert
+      this.snackbar.open('Code Copied', '', {
+        duration: 800,
+      });
     } else {
       this.logger.error('ERROR copying code to clipboard:', code);
+      // failure snackbar alert
+      this.snackbar.open('Copy failed. Please try again!', '', {
+        duration: 800,
+      });
     }
   }
 
@@ -115,7 +168,7 @@ export class CodeComponent implements OnChanges {
 
     // if no linenums, enable line numbers if more than one line
     return linenums == null || linenums === NaN ?
-      (this.code.match(/\n/g) || []).length > 1 : linenums;
+      (this.code.match(/\n/g) || []).length > defaultLineNumsCount : linenums;
   }
 }
 
diff --git a/aio/src/app/embedded/contributor/contributor-list.component.spec.ts b/aio/src/app/embedded/contributor/contributor-list.component.spec.ts
new file mode 100644
index 0000000000..6d20348747
--- /dev/null
+++ b/aio/src/app/embedded/contributor/contributor-list.component.spec.ts
@@ -0,0 +1,105 @@
+import { ReflectiveInjector } from '@angular/core';
+
+import { of } from 'rxjs/observable/of';
+
+import { ContributorGroup } from './contributors.model';
+import { ContributorListComponent } from './contributor-list.component';
+import { ContributorService } from './contributor.service';
+import { LocationService } from 'app/shared/location.service';
+
+// Testing the component class behaviors, independent of its template
+// Let e2e tests verify how it displays.
+describe('ContributorListComponent', () => {
+
+  let component: ContributorListComponent;
+  let injector: ReflectiveInjector;
+  let contributorService: TestContributorService;
+  let locationService: TestLocationService;
+  let contributorGroups: ContributorGroup[];
+
+  beforeEach(() => {
+    injector = ReflectiveInjector.resolveAndCreate([
+      ContributorListComponent,
+      {provide: ContributorService, useClass: TestContributorService },
+      {provide: LocationService, useClass: TestLocationService }
+    ]);
+
+    locationService = injector.get(LocationService);
+    contributorService = injector.get(ContributorService);
+    contributorGroups = contributorService.testContributors;
+  });
+
+  it('should select the first group when no query string', () => {
+    component = getComponent();
+    expect(component.selectedGroup).toBe(contributorGroups[0]);
+  });
+
+  it('should select the first group when query string w/o "group" property', () => {
+    locationService.searchResult = { foo: 'GDE' };
+    component = getComponent();
+    expect(component.selectedGroup).toBe(contributorGroups[0]);
+  });
+
+  it('should select the first group when query group not found', () => {
+    locationService.searchResult = { group: 'foo' };
+    component = getComponent();
+    expect(component.selectedGroup).toBe(contributorGroups[0]);
+  });
+
+  it('should select the GDE group when query group is "GDE"', () => {
+    locationService.searchResult = { group: 'GDE' };
+    component = getComponent();
+    expect(component.selectedGroup).toBe(contributorGroups[1]);
+  });
+
+  it('should select the GDE group when query group is "gde" (case insensitive)', () => {
+    locationService.searchResult = { group: 'gde' };
+    component = getComponent();
+    expect(component.selectedGroup).toBe(contributorGroups[1]);
+  });
+
+  it('should set the query to the "GDE" group when user selects "GDE"', () => {
+    component = getComponent();
+    component.selectGroup('GDE');
+    expect(locationService.searchResult['group']).toBe('GDE');
+  });
+
+  it('should set the query to the first group when user selects unknown name', () => {
+    component = getComponent();
+    component.selectGroup('GDE'); // a legit group that isn't the first
+
+    component.selectGroup('foo'); // not a legit group name
+    expect(locationService.searchResult['group']).toBe('Angular');
+  });
+
+  //// Test Helpers ////
+  function  getComponent(): ContributorListComponent {
+    const comp = injector.get(ContributorListComponent);
+    comp.ngOnInit();
+    return comp;
+  }
+
+  interface SearchResult { [index: string]: string; };
+
+  class TestLocationService {
+    searchResult: SearchResult = {};
+    search = jasmine.createSpy('search').and.callFake(() => this.searchResult);
+    setSearch = jasmine.createSpy('setSearch')
+      .and.callFake((label: string, result: SearchResult) => {
+        this.searchResult = result;
+      });
+  }
+
+  class TestContributorService {
+    testContributors = getTestData();
+    contributors = of(this.testContributors);
+  }
+
+  function getTestData(): ContributorGroup[] {
+    return [
+      // Not interested in the contributors data in these tests
+      { name: 'Angular', order: 0, contributors: [] },
+      { name: 'GDE', order: 1, contributors: [] },
+    ];
+  }
+});
diff --git a/aio/src/app/embedded/contributor/contributor-list.component.ts b/aio/src/app/embedded/contributor/contributor-list.component.ts
index 8e6579f68e..c61d3454fa 100644
--- a/aio/src/app/embedded/contributor/contributor-list.component.ts
+++ b/aio/src/app/embedded/contributor/contributor-list.component.ts
@@ -1,25 +1,46 @@
 import { Component, OnInit } from '@angular/core';
-import { Contributor } from './contributors.model';
+import { ContributorGroup } from './contributors.model';
 import { ContributorService } from './contributor.service';
+import { LocationService } from 'app/shared/location.service';
 
 @Component({
   selector: `aio-contributor-list`,
   template: `
-  <section *ngFor="let group of groups" class="grid-fluid">
-    <h4 class="title">{{group}}</h4>
-    <aio-contributor *ngFor="let person of contributorGroups[group]" [person]="person"></aio-contributor>
+  <div class="flex-center group-buttons">
+    <a *ngFor="let name of groupNames"
+       [class.selected]="name == selectedGroup.name"
+       class="button mat-button filter-button"
+       (click)="selectGroup(name)">{{name}}</a>
+  </div>
+  <section *ngIf="selectedGroup" class="grid-fluid">
+    <div class="contributor-group">
+      <aio-contributor *ngFor="let person of selectedGroup.contributors" [person]="person"></aio-contributor>
+    </div>
   </section>`
 })
 export class ContributorListComponent implements OnInit {
-  contributorGroups = new Map<string, Contributor[]>();
-  groups: string[];
+  private groups: ContributorGroup[];
+  groupNames: string[];
+  selectedGroup: ContributorGroup;
 
-  constructor(private contributorService: ContributorService) { }
+  constructor(
+    private contributorService: ContributorService,
+    private locationService: LocationService) { }
 
   ngOnInit() {
-    this.contributorService.contributors.subscribe(cgs => {
-      this.groups = ['Lead', 'Google', 'Community'];
-      this.contributorGroups = cgs;
-    });
+    const groupName =  this.locationService.search()['group'] || '';
+    // no need to unsubscribe because `contributors` completes
+    this.contributorService.contributors
+      .subscribe(grps => {
+        this.groups = grps;
+        this.groupNames = grps.map(g => g.name);
+        this.selectGroup(groupName);
+      });
+  }
+
+  selectGroup(name) {
+    name = name.toLowerCase();
+    this.selectedGroup = this.groups.find(g => g.name.toLowerCase() === name) || this.groups[0];
+    this.locationService.setSearch('', {group: this.selectedGroup.name});
   }
 }
diff --git a/aio/src/app/embedded/contributor/contributor.component.ts b/aio/src/app/embedded/contributor/contributor.component.ts
index 4545e17f84..2673c86edc 100644
--- a/aio/src/app/embedded/contributor/contributor.component.ts
+++ b/aio/src/app/embedded/contributor/contributor.component.ts
@@ -1,36 +1,46 @@
 import { Component, Input } from '@angular/core';
 
 import { Contributor } from './contributors.model';
+import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
 
 @Component({
   selector: 'aio-contributor',
   template: `
-    <header>
-      <img src="{{pictureBase}}{{person.picture || noPicture}}" alt="name" width="240" height="208">
-      <h3>{{person.name}}</h3>
-      <button *ngIf="person.bio" aria-label="View Bio" (click)="showBio=!showBio">View Bio</button>
+    <div [ngClass]="{ 'flipped': person.isFlipped }" class="contributor-card">
 
-      <!-- TODO: get the twitter/website icons and get rid of text -->
-      <a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}">
-        <span class="icon-twitter">twitter</span>
-      </a>
-      <a *ngIf="person.website" href="{{person.website}}">
-        <span class="icon-publ">website</span>
-      </a>
-      <p>{{person.bio}}</p>
+        <div class="card-front" (click)="flipCard(person)">
+            <h3>{{person.name}}</h3>
 
-    <header>
-    <!-- TODO: This should be modal and float over the width of page -->
-    <article *ngIf="showBio">
-      <h3>{{person.name}}</h3>
-      <p>{{person.bio}}</p>
-    <article>
+            <div class="contributor-image" [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'">
+                <div class="contributor-info">
+                    <a *ngIf="person.bio" md-button>
+                        View Bio
+                    </a>
+                    <a *ngIf="person.twitter" md-button class="icon"
+                        href="https://twitter.com/{{person.twitter}}" target="_blank" (click)="$event.stopPropagation()">
+                        <span class="fa fa-twitter fa-2x"></span>
+                    </a>
+                    <a *ngIf="person.website" md-button class="icon"
+                        href="{{person.website}}" target="_blank" (click)="$event.stopPropagation()">
+                        <span class="fa fa-link fa-2x"></span>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)">
+            <h3>{{person.name}}</h3>
+            <p class="contributor-bio">{{person.bio}}</p>
+        </div>
+    </div>
   `
 })
 export class ContributorComponent {
   @Input() person: Contributor;
-  showBio = false;
   noPicture = '_no-one.png';
-  pictureBase = 'content/images/bios/';
-}
+  pictureBase = CONTENT_URL_PREFIX + 'images/bios/';
 
+  flipCard(person) {
+    person.isFlipped = !person.isFlipped;
+  }
+}
diff --git a/aio/src/app/embedded/contributor/contributor.service.spec.ts b/aio/src/app/embedded/contributor/contributor.service.spec.ts
new file mode 100644
index 0000000000..8911f5d991
--- /dev/null
+++ b/aio/src/app/embedded/contributor/contributor.service.spec.ts
@@ -0,0 +1,124 @@
+import { ReflectiveInjector } from '@angular/core';
+import { Http, ConnectionBackend, RequestOptions, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
+import { MockBackend } from '@angular/http/testing';
+
+import { ContributorService } from './contributor.service';
+import { Contributor, ContributorGroup } from './contributors.model';
+
+describe('ContributorService', () => {
+
+  let injector: ReflectiveInjector;
+  let backend: MockBackend;
+  let contribService: ContributorService;
+
+  function createResponse(body: any) {
+    return new Response(new ResponseOptions({ body: JSON.stringify(body) }));
+  }
+
+  beforeEach(() => {
+    injector = ReflectiveInjector.resolveAndCreate([
+        ContributorService,
+        { provide: ConnectionBackend, useClass: MockBackend },
+        { provide: RequestOptions, useClass: BaseRequestOptions },
+        Http
+    ]);
+
+    backend = injector.get(ConnectionBackend);
+    contribService = injector.get(ContributorService);
+  });
+
+  it('should be creatable', () => {
+    expect(contribService).toBeTruthy();
+  });
+
+  it('should make a single connection to the server', () => {
+    expect(backend.connectionsArray.length).toEqual(1);
+    expect(backend.connectionsArray[0].request.url).toEqual('generated/contributors.json');
+  });
+
+  describe('#contributors', () => {
+
+    let contribs: ContributorGroup[];
+    let testData: any;
+
+    beforeEach(() => {
+      testData = getTestContribs();
+      backend.connectionsArray[0].mockRespond(createResponse(testData));
+      contribService.contributors.subscribe(results => contribs = results);
+    });
+
+    it('contributors observable should complete', () => {
+      let completed = false;
+      contribService.contributors.subscribe(null, null, () => completed = true);
+      expect(true).toBe(true, 'observable completed');
+    });
+
+    it('should reshape the contributor json to expected result', () => {
+      const groupNames = contribs.map(g => g.name).join(',');
+      expect(groupNames).toEqual('Angular,GDE');
+    });
+
+    it('should have expected "GDE" contribs in order', () => {
+      const gde = contribs[1];
+      const actualAngularNames = gde.contributors.map(l => l.name).join(',');
+      const expectedAngularNames = [testData.jeffcross, testData.kapunahelewong].map(l => l.name).join(',');
+      expect(actualAngularNames).toEqual(expectedAngularNames);
+    });
+  });
+
+  it('should do WHAT(?) if the request fails');
+});
+
+function getTestContribs() {
+  // tslint:disable:quotemark
+  return {
+    "kapunahelewong": {
+      "name": "Kapunahele Wong",
+      "picture": "kapunahelewong.jpg",
+      "website": " https://github.com/kapunahelewong",
+      "twitter": "kapunahele",
+      "bio": "Kapunahele is a front-end developer and contributor to angular.io",
+      "group": "GDE"
+    },
+    "misko": {
+      "name": "Miško Hevery",
+      "picture": "misko.jpg",
+      "twitter": "mhevery",
+      "website": "http://misko.hevery.com",
+      "bio": "Miško Hevery is the creator of AngularJS framework.",
+      "group": "Angular"
+    },
+    "igor": {
+      "name": "Igor Minar",
+      "picture": "igor-minar.jpg",
+      "twitter": "IgorMinar",
+      "website": "https://google.com/+IgorMinar",
+      "bio": "Igor is a software engineer at Angular.",
+      "group": "Angular"
+    },
+    "kara": {
+      "name": "Kara Erickson",
+      "picture": "kara-erickson.jpg",
+      "twitter": "karaforthewin",
+      "website": "https://github.com/kara",
+      "bio": "Kara is a software engineer on the Angular team at Angular and a co-organizer of the Angular-SF Meetup. ",
+      "group": "Angular"
+    },
+    "jeffcross": {
+      "name": "Jeff Cross",
+      "picture": "jeff-cross.jpg",
+      "twitter": "jeffbcross",
+      "website": "https://twitter.com/jeffbcross",
+      "bio": "Jeff was one of the earliest core team members on AngularJS.",
+      "group": "GDE"
+    },
+    "naomi": {
+      "name": "Naomi Black",
+      "picture": "naomi.jpg",
+      "twitter": "naomitraveller",
+      "website": "http://google.com/+NaomiBlack",
+      "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades.",
+      "group": "Angular"
+    }
+ };
+}
diff --git a/aio/src/app/embedded/contributor/contributor.service.ts b/aio/src/app/embedded/contributor/contributor.service.ts
index 69a57db92c..08cbb010ab 100644
--- a/aio/src/app/embedded/contributor/contributor.service.ts
+++ b/aio/src/app/embedded/contributor/contributor.service.ts
@@ -5,40 +5,66 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/publishLast';
 
-import { Logger } from 'app/shared/logger.service';
-import { Contributor } from './contributors.model';
+import { Contributor, ContributorGroup } from './contributors.model';
+import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
 
-const contributorsPath = 'content/contributors.json';
+const contributorsPath = CONTENT_URL_PREFIX + 'contributors.json';
+const knownGroups = ['Angular', 'GDE'];
 
 @Injectable()
 export class ContributorService {
-  contributors: Observable<Map<string, Contributor[]>>;
+  contributors: Observable<ContributorGroup[]>;
 
-  constructor(private http: Http, private logger: Logger) {
+  constructor(private http: Http) {
     this.contributors = this.getContributors();
   }
 
   private getContributors() {
     const contributors = this.http.get(contributorsPath)
       .map(res => res.json())
-      .map(contribs => {
-        const contribGroups = new Map<string, Contributor[]>();
 
+      // Create group map
+      .map(contribs => {
+        const contribMap = new Map<string, Contributor[]>();
         Object.keys(contribs).forEach(key => {
           const contributor = contribs[key];
           const group = contributor.group;
-          const contribGroup = contribGroups[group];
+          const contribGroup = contribMap[group];
           if (contribGroup) {
             contribGroup.push(contributor);
           } else {
-            contribGroups[group] = [contributor];
+            contribMap[group] = [contributor];
           }
         });
 
-        return contribGroups;
+        return contribMap;
+      })
+
+      // Flatten group map into sorted group array of sorted contributors
+      .map(cmap => {
+        return Object.keys(cmap).map(key => {
+          const order = knownGroups.indexOf(key);
+          return {
+            name: key,
+            order: order === -1 ? knownGroups.length : order,
+            contributors: cmap[key].sort(compareContributors)
+          } as ContributorGroup;
+        })
+        .sort(compareGroups);
       })
       .publishLast();
+
     contributors.connect();
     return contributors;
   }
 }
+
+function compareContributors(l: Contributor, r: Contributor) {
+ return l.name.toUpperCase() > r.name.toUpperCase() ? 1 : -1;
+}
+
+function compareGroups(l: ContributorGroup, r: ContributorGroup) {
+  return l.order === r.order ?
+    (l.name > r.name ? 1 : -1) :
+     l.order > r.order ? 1 : -1;
+}
diff --git a/aio/src/app/embedded/contributor/contributors.model.ts b/aio/src/app/embedded/contributor/contributors.model.ts
index f3743f6379..e40983f8d7 100644
--- a/aio/src/app/embedded/contributor/contributors.model.ts
+++ b/aio/src/app/embedded/contributor/contributors.model.ts
@@ -1,3 +1,9 @@
+export class ContributorGroup {
+  name: string;
+  order: number;
+  contributors: Contributor[];
+}
+
 export class Contributor {
   group: string;
   name: string;
@@ -5,4 +11,5 @@ export class Contributor {
   website?: string;
   twitter?: string;
   bio?: string;
+  isFlipped? = false;
 }
diff --git a/aio/src/app/embedded/current-location.component.spec.ts b/aio/src/app/embedded/current-location.component.spec.ts
new file mode 100644
index 0000000000..e6142b4cd6
--- /dev/null
+++ b/aio/src/app/embedded/current-location.component.spec.ts
@@ -0,0 +1,35 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { LocationService } from 'app/shared/location.service';
+import { MockLocationService } from 'testing/location.service';
+import { CurrentLocationComponent } from './current-location.component';
+
+
+describe('CurrentLocationComponent', () => {
+  let element: HTMLElement;
+  let fixture: ComponentFixture<CurrentLocationComponent>;
+  let locationService: MockLocationService;
+
+  beforeEach(() => {
+    locationService = new MockLocationService('initial/url');
+
+    TestBed.configureTestingModule({
+      declarations: [ CurrentLocationComponent ],
+      providers: [
+        { provide: LocationService, useValue: locationService }
+      ]
+    });
+
+    fixture = TestBed.createComponent(CurrentLocationComponent);
+    element = fixture.nativeElement;
+  });
+
+  it('should render the current location', () => {
+    fixture.detectChanges();
+    expect(element.textContent).toEqual('initial/url');
+
+    locationService.urlSubject.next('next/url');
+
+    fixture.detectChanges();
+    expect(element.textContent).toEqual('next/url');
+  });
+});
diff --git a/aio/src/app/embedded/current-location.component.ts b/aio/src/app/embedded/current-location.component.ts
new file mode 100644
index 0000000000..57f4280faa
--- /dev/null
+++ b/aio/src/app/embedded/current-location.component.ts
@@ -0,0 +1,15 @@
+/* tslint:disable component-selector */
+import { Component } from '@angular/core';
+import { LocationService } from 'app/shared/location.service';
+
+/**
+ * A simple embedded component that displays the current location path
+ */
+@Component({
+  selector: 'current-location',
+  template: '{{ location.currentPath | async }}'
+})
+export class CurrentLocationComponent {
+  constructor(public location: LocationService) {
+  }
+}
diff --git a/aio/src/app/embedded/doc-title.component.ts b/aio/src/app/embedded/doc-title.component.ts
deleted file mode 100644
index 2417f995b8..0000000000
--- a/aio/src/app/embedded/doc-title.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/* tslint:disable component-selector */
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import { DocumentService } from 'app/documents/document.service';
-
-@Component({
-  selector: 'doc-title',
-  template: '<h1 class="docs-primary-header">{{title | async}}</h1>'
-})
-export class DocTitleComponent {
-  title: Observable<string>;
-  constructor(docs: DocumentService) {
-    this.title = docs.currentDocument.map(doc => doc.title);
-  }
-}
diff --git a/aio/src/app/embedded/embedded.module.ts b/aio/src/app/embedded/embedded.module.ts
index aaf358ec52..ac1426e33e 100644
--- a/aio/src/app/embedded/embedded.module.ts
+++ b/aio/src/app/embedded/embedded.module.ts
@@ -9,8 +9,9 @@ import { PrettyPrinter } from './code/pretty-printer.service';
 // It is not enough just to import them inside the AppModule
 
 // Reusable components (used inside embedded components)
-import { MdTabsModule } from '@angular/material';
+import { MdIconModule, MdSnackBarModule, MdTabsModule } from '@angular/material';
 import { CodeComponent } from './code/code.component';
+import { SharedModule } from 'app/shared/shared.module';
 
 // Embedded Components
 import { ApiListComponent } from './api/api-list.component';
@@ -18,15 +19,18 @@ import { CodeExampleComponent } from './code/code-example.component';
 import { CodeTabsComponent } from './code/code-tabs.component';
 import { ContributorListComponent } from './contributor/contributor-list.component';
 import { ContributorComponent } from './contributor/contributor.component';
-import { DocTitleComponent } from './doc-title.component';
+import { CurrentLocationComponent } from './current-location.component';
 import { LiveExampleComponent, EmbeddedPlunkerComponent } from './live-example/live-example.component';
+import { ResourceListComponent } from './resource/resource-list.component';
+import { ResourceService } from './resource/resource.service';
+import { TocComponent } from './toc/toc.component';
 
 /** Components that can be embedded in docs
  * such as CodeExampleComponent, LiveExampleComponent,...
  */
 export const embeddedComponents: any[] = [
-  ApiListComponent, CodeExampleComponent, CodeTabsComponent,
-  ContributorListComponent, DocTitleComponent, LiveExampleComponent
+  ApiListComponent, CodeExampleComponent, CodeTabsComponent, ContributorListComponent,
+  CurrentLocationComponent, LiveExampleComponent, ResourceListComponent, TocComponent
 ];
 
 /** Injectable class w/ property returning components that can be embedded in docs */
@@ -35,18 +39,28 @@ export class EmbeddedComponents {
 }
 
 @NgModule({
-  imports: [ CommonModule, MdTabsModule ],
+  imports: [
+    CommonModule,
+    MdIconModule,
+    MdSnackBarModule,
+    MdTabsModule,
+    SharedModule
+  ],
   declarations: [
     embeddedComponents,
     CodeComponent,
     ContributorComponent,
     EmbeddedPlunkerComponent
   ],
+  exports: [
+    TocComponent
+  ],
   providers: [
     ContributorService,
     CopierService,
     EmbeddedComponents,
-    PrettyPrinter
+    PrettyPrinter,
+    ResourceService
   ],
   entryComponents: [ embeddedComponents ]
 })
diff --git a/aio/src/app/embedded/live-example/live-example.component.html b/aio/src/app/embedded/live-example/live-example.component.html
index 33a53fabb4..4def108a78 100644
--- a/aio/src/app/embedded/live-example/live-example.component.html
+++ b/aio/src/app/embedded/live-example/live-example.component.html
@@ -1,15 +1,21 @@
-<span *ngIf="!isEmbedded">
-  <a [href]="plnkr" target="_blank" title="{{title}}">{{title}}</a>
-  <span *ngIf="enableDownload">
-    /  <a [href]="zip" download title="Download example">download example</a>
+<span [ngSwitch]="mode">
+  <span *ngSwitchCase="'disabled'">{{title}} <em>(not available on this device)</em></span>
+  <span *ngSwitchCase="'embedded'">
+    <div *ngIf="showEmbedded" title="{{title}}">
+      <aio-embedded-plunker [src]="plnkr"></aio-embedded-plunker>
+    </div>
+    <img *ngIf="!showEmbedded" (click)="toggleEmbedded()" [src]="plnkrImg" alt="{{title}}">
+    <p *ngIf="enableDownload">
+      You can also <a [href]="zip" download title="Download example">download this example</a>.
+    </p>
+  </span>
+  <span *ngSwitchCase="'downloadOnly'">
+    <a [href]="zip" download title="{{title}}">{{title}}</a>
+  </span>
+  <span *ngSwitchDefault>
+    <a [href]="plnkr" target="_blank" title="{{title}}">{{title}}</a>
+    <span *ngIf="enableDownload">
+      /  <a [href]="zip" download title="Download example">download example</a>
+    </span>
   </span>
 </span>
-<div *ngIf="isEmbedded">
-  <div *ngIf="showEmbedded" title="{{title}}">
-    <aio-embedded-plunker [src]="plnkr"></aio-embedded-plunker>
-  </div>
-  <img *ngIf="!showEmbedded" (click)="toggleEmbedded()" [src]="plnkrImg" width="100%" height="100%" alt="{{title}}">
-  <p *ngIf="enableDownload">
-    You can also <a [href]="zip" download title="Download example">download this example</a>.
-  </p>
-</div>
diff --git a/aio/src/app/embedded/live-example/live-example.component.spec.ts b/aio/src/app/embedded/live-example/live-example.component.spec.ts
index e966e231a6..87a8a4c08b 100644
--- a/aio/src/app/embedded/live-example/live-example.component.spec.ts
+++ b/aio/src/app/embedded/live-example/live-example.component.spec.ts
@@ -1,4 +1,3 @@
-/* tslint:disable:no-unused-variable */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Component, DebugElement, ElementRef } from '@angular/core';
@@ -28,33 +27,40 @@ describe('LiveExampleComponent', () => {
     path() { return testPath; }
   }
 
+  function getAnchors() {
+    return liveExampleDe.queryAll(By.css('a')).map(de => de.nativeElement as HTMLAnchorElement);
+  }
+
+  function getHrefs() { return getAnchors().map(a => a.href); }
+
   function setHostTemplate(template: string) {
     TestBed.overrideComponent(HostComponent, {set: {template}});
   }
 
   function testComponent(testFn: () => void) {
-    return TestBed
-      .compileComponents()
-      .then(() => {
-        fixture = TestBed.createComponent(HostComponent);
-        hostComponent = fixture.componentInstance;
-        liveExampleDe = fixture.debugElement.children[0];
-        liveExampleComponent = liveExampleDe.componentInstance;
+    fixture = TestBed.createComponent(HostComponent);
+    hostComponent = fixture.componentInstance;
+    liveExampleDe = fixture.debugElement.children[0];
+    liveExampleComponent = liveExampleDe.componentInstance;
 
-        // Copy the LiveExample's innerHTML (content)
-        // into the `liveExampleContent` property as the DocViewer does
-        liveExampleDe.nativeElement.liveExampleContent = liveExampleContent;
+    // Copy the LiveExample's innerHTML (content)
+    // into the `liveExampleContent` property as the DocViewer does
+    liveExampleDe.nativeElement.liveExampleContent = liveExampleContent;
 
-        fixture.detectChanges();
-      })
-      .then(testFn);
+    fixture.detectChanges();
+    liveExampleComponent.onResize(1033); // wide by default
+    fixture.detectChanges();
+
+    testFn();
   }
 
   //////// tests ////////
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ HostComponent, LiveExampleComponent, EmbeddedPlunkerComponent ],
-      providers: [ {provide: Location, useClass: TestLocation }]
+      providers: [
+        { provide: Location, useClass: TestLocation }
+      ]
     })
     // Disable the <iframe> within the EmbeddedPlunkerComponent
     .overrideComponent(EmbeddedPlunkerComponent, {set: {template: 'NO IFRAME'}});
@@ -64,67 +70,62 @@ describe('LiveExampleComponent', () => {
   });
 
   describe('when not embedded', () => {
-
-    function getAnchors() {
-      return liveExampleDe.queryAll(By.css('a')).map(de => de.nativeElement as HTMLAnchorElement);
-    }
-    function getHrefs() { return getAnchors().map(a => a.href); }
     function getLiveExampleAnchor() { return getAnchors()[0]; }
     function getDownloadAnchor() { return getAnchors()[1]; }
 
-    it('should create LiveExampleComponent', async(() => {
+    it('should create LiveExampleComponent', () => {
       testComponent(() => {
         expect(liveExampleComponent).toBeTruthy('LiveExampleComponent');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs', async(() => {
+    it('should have expected plunker & download hrefs', () => {
       testPath = '/tutorial/toh-pt1';
       testComponent(() => {
         const hrefs = getHrefs();
         expect(hrefs[0]).toContain('/toh-pt1/eplnkr.html');
         expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs even when path has # frag', async(() => {
+    it('should have expected plunker & download hrefs even when path has # frag', () => {
       testPath = '/tutorial/toh-pt1#somewhere';
       testComponent(() => {
         const hrefs = getHrefs();
         expect(hrefs[0]).toContain('/toh-pt1/eplnkr.html');
         expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs even when path has ? params', async(() => {
+    it('should have expected plunker & download hrefs even when path has ? params', () => {
       testPath = '/tutorial/toh-pt1?foo=1&bar="bar"';
       testComponent(() => {
         const hrefs = getHrefs();
         expect(hrefs[0]).toContain('/toh-pt1/eplnkr.html');
         expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
       });
-    }));
+    });
 
-    it('should have expected flat-style plunker when has `flat-style`', async(() => {
+    it('should have expected flat-style plunker when has `flat-style`', () => {
       testPath = '/tutorial/toh-pt1';
       setHostTemplate('<live-example flat-style></live-example>');
       testComponent(() => {
         // The file should be "plnkr.html", not "eplnkr.html"
         expect(getLiveExampleAnchor().href).toContain('/plnkr.html');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs when has example directory (name)', async(() => {
+    it('should have expected plunker & download hrefs when has example directory (name)', () => {
       testPath = '/guide/somewhere';
-      setHostTemplate('<live-example name="toh-1"></live-example>');
+      setHostTemplate('<live-example name="toh-pt1"></live-example>');
       testComponent(() => {
         const hrefs = getHrefs();
-        expect(hrefs[0]).toContain('/toh-1/eplnkr.html');
-        expect(hrefs[1]).toContain('/toh-1/toh-1.zip');
+        expect(hrefs[0]).toContain('/toh-pt1/eplnkr.html');
+        expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs when has `plnkr`', async(() => {
+    it('should have expected plunker & download hrefs when has `plnkr`', () => {
       testPath = '/testing';
       setHostTemplate('<live-example plnkr="app-specs"></live-example>');
       testComponent(() => {
@@ -132,9 +133,9 @@ describe('LiveExampleComponent', () => {
         expect(hrefs[0]).toContain('/testing/app-specs.eplnkr.html');
         expect(hrefs[1]).toContain('/testing/app-specs.testing.zip');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs when has `name` & `plnkr`', async(() => {
+    it('should have expected plunker & download hrefs when has `name` & `plnkr`', () => {
       testPath = '/guide/somewhere';
       setHostTemplate('<live-example name="testing" plnkr="app-specs"></live-example>');
       testComponent(() => {
@@ -142,44 +143,79 @@ describe('LiveExampleComponent', () => {
         expect(hrefs[0]).toContain('/testing/app-specs.eplnkr.html');
         expect(hrefs[1]).toContain('/testing/app-specs.testing.zip');
       });
-    }));
+    });
 
-    it('should not have a download link when `noDownload` atty present', async(() => {
+    it('should be embedded style by default', () => {
+      setHostTemplate('<live-example></live-example>');
+      testComponent(() => {
+        const hrefs = getHrefs();
+        expect(hrefs[0]).toContain(defaultTestPath + '/eplnkr.html');
+      });
+    });
+
+    it('should be flat style when flat-style requested', () => {
+      setHostTemplate('<live-example flat-style></live-example>');
+      testComponent(() => {
+        const hrefs = getHrefs();
+        expect(hrefs[0]).toContain(defaultTestPath + '/plnkr.html');
+      });
+    });
+
+    it('should not have a download link when `noDownload` atty present', () => {
       setHostTemplate('<live-example noDownload></live-example>');
       testComponent(() => {
-        expect(getAnchors().length).toBe(1, 'only the live-example anchor');
+        const hrefs = getHrefs();
+        expect(hrefs.length).toBe(1, 'only the plunker live-example anchor');
+        expect(hrefs[0]).toContain('plnkr.html');
       });
-    }));
+    });
 
-    it('should have default title when no title attribute or content', async(() => {
+    it('should only have a download link when `downloadOnly` atty present', () => {
+      setHostTemplate('<live-example downloadOnly>download this</live-example>');
+      testComponent(() => {
+        const hrefs = getHrefs();
+        expect(hrefs.length).toBe(1, 'only the zip anchor');
+        expect(hrefs[0]).toContain('.zip');      });
+    });
+
+    it('should have default title when no title attribute or content', () => {
       setHostTemplate('<live-example></live-example>');
       testComponent(() => {
         const expectedTitle = 'live example';
         const anchor = getLiveExampleAnchor();
-        expect(anchor.innerText).toBe(expectedTitle, 'anchor content');
+        expect(anchor.textContent).toBe(expectedTitle, 'anchor content');
         expect(anchor.getAttribute('title')).toBe(expectedTitle, 'title');
       });
-    }));
+    });
 
-    it('should add title when set `title` attribute', async(() => {
+    it('should add title when set `title` attribute', () => {
       const expectedTitle = 'Great Example';
       setHostTemplate(`<live-example title="${expectedTitle}"></live-example>`);
       testComponent(() => {
         const anchor = getLiveExampleAnchor();
-        expect(anchor.innerText).toBe(expectedTitle, 'anchor content');
+        expect(anchor.textContent).toBe(expectedTitle, 'anchor content');
         expect(anchor.getAttribute('title')).toBe(expectedTitle, 'title');
       });
-    }));
+    });
 
-    it('should add title from <live-example> body', async(() => {
+    it('should add title from <live-example> body', () => {
       liveExampleContent = 'The Greatest Example';
       setHostTemplate('<live-example title="ignore this title"></live-example>');
       testComponent(() => {
         const anchor = getLiveExampleAnchor();
-        expect(anchor.innerText).toBe(liveExampleContent, 'anchor content');
+        expect(anchor.textContent).toBe(liveExampleContent, 'anchor content');
         expect(anchor.getAttribute('title')).toBe(liveExampleContent, 'title');
       });
-    }));
+    });
+
+    it('should not duplicate the exampleDir on a zip when there is a / on the name', () => {
+      setHostTemplate('<live-example name="testing/ts"></live-example>');
+      testComponent(() => {
+        const hrefs = getHrefs();
+        expect(hrefs[0]).toContain('/testing/ts/eplnkr.html');
+        expect(hrefs[1]).toContain('/testing/ts/testing.zip');
+      });
+    });
   });
 
   describe('when embedded', () => {
@@ -201,45 +237,45 @@ describe('LiveExampleComponent', () => {
 
     describe('before click', () => {
 
-      it('should have hidden, embedded plunker', async(() => {
+      it('should have hidden, embedded plunker', () => {
         setHostTemplate('<live-example embedded></live-example>');
         testComponent(() => {
-          expect(liveExampleComponent.isEmbedded).toBe(true, 'component.isEmbedded');
+          expect(liveExampleComponent.mode).toBe('embedded', 'component is embedded');
           expect(liveExampleComponent.showEmbedded).toBe(false, 'component.showEmbedded');
           expect(getEmbeddedPlunkerComponent()).toBeNull('no EmbeddedPlunkerComponent');
         });
-      }));
+      });
 
-      it('should have default plunker placeholder image', async(() => {
+      it('should have default plunker placeholder image', () => {
         setHostTemplate('<live-example embedded></live-example>');
         testComponent(() => {
           expect(getImg().src).toContain('plunker/placeholder.png');
         });
-      }));
+      });
 
-      it('should have specified plunker placeholder image', async(() => {
+      it('should have specified plunker placeholder image', () => {
         const expectedSrc = 'example/demo.png';
         setHostTemplate(`<live-example embedded img="${expectedSrc}"></live-example>`);
         testComponent(() => {
           expect(getImg().src).toContain(expectedSrc);
         });
-      }));
+      });
 
-      it('should have download paragraph with expected anchor href', async(() => {
+      it('should have download paragraph with expected anchor href', () => {
         testPath = '/tutorial/toh-pt1';
         setHostTemplate('<live-example embedded></live-example>');
         testComponent(() => {
           expect(getDownloadAnchor().href).toContain('/toh-pt1/toh-pt1.zip');
         });
-      }));
+      });
 
-      it('should not have download paragraph when has `nodownload`', async(() => {
+      it('should not have download paragraph when has `nodownload`', () => {
         testPath = '/tutorial/toh-pt1';
         setHostTemplate('<live-example embedded nodownload></live-example>');
         testComponent(() => {
           expect(getDownloadAnchor()).toBeNull();
         });
-      }));
+      });
 
     });
 
@@ -250,16 +286,39 @@ describe('LiveExampleComponent', () => {
         fixture.detectChanges();
       }
 
-      it('should show plunker in the page', async(() => {
+      it('should show plunker in the page', () => {
         setHostTemplate('<live-example embedded></live-example>');
         testComponent(() => {
           clickImg();
-          expect(liveExampleComponent.isEmbedded).toBe(true, 'component.isEmbedded');
+          expect(liveExampleComponent.mode).toBe('embedded', 'component is embedded');
           expect(liveExampleComponent.showEmbedded).toBe(true, 'component.showEmbedded');
           expect(getEmbeddedPlunkerComponent()).toBeDefined('has EmbeddedPlunkerComponent');
         });
-      }));
+      });
 
     });
   });
+
+  describe('when narrow display (mobile)', () => {
+
+    it('should be embedded style when no style defined', () => {
+      setHostTemplate('<live-example></live-example>');
+      testComponent(() => {
+        liveExampleComponent.onResize(600); // narrow
+        fixture.detectChanges();
+        const hrefs = getHrefs();
+        expect(hrefs[0]).toContain(defaultTestPath + '/eplnkr.html');
+      });
+    });
+
+    it('should be embedded style even when flat-style requested', () => {
+      setHostTemplate('<live-example flat-style></live-example>');
+      testComponent(() => {
+        liveExampleComponent.onResize(600); // narrow
+        fixture.detectChanges();
+        const hrefs = getHrefs();
+        expect(hrefs[0]).toContain(defaultTestPath + '/eplnkr.html');
+      });
+    });
+  });
 });
diff --git a/aio/src/app/embedded/live-example/live-example.component.ts b/aio/src/app/embedded/live-example/live-example.component.ts
index fd41371798..b484665697 100644
--- a/aio/src/app/embedded/live-example/live-example.component.ts
+++ b/aio/src/app/embedded/live-example/live-example.component.ts
@@ -1,11 +1,14 @@
 /* tslint:disable component-selector */
-import { Component, ElementRef, Input, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, Input, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { Location } from '@angular/common';
+import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
+
+import { boolFromValue, getAttrs, getAttrValue } from 'app/shared/attribute-utils';
 
 const defaultPlnkrImg = 'plunker/placeholder.png';
-const imageBase  = 'assets/images/';
-const liveExampleBase = 'content/live-examples/';
-const zipBase = 'content/zips/';
+const imageBase  = CONTENT_URL_PREFIX + 'images/';
+const liveExampleBase = CONTENT_URL_PREFIX + 'live-examples/';
+const zipBase = CONTENT_URL_PREFIX + 'zips/';
 
 /**
 * Angular.io Live Example Embedded Component
@@ -18,11 +21,12 @@ const zipBase = 'content/zips/';
 *   <live-example
 *      [name="..."]      // name of the example directory
 *      [plnkr="...""]    // name of the plunker file (becomes part of zip file name as well)
-*      [embedded]        // embed the plunker in the doc page, else display in new browser tab (external)
+*      [embedded]        // embed the plunker in the doc page, else display in new browser tab (default)
 *      [img="..."]       // image to display if embedded in doc page
-*      [embedded-style]  // show external plnkr in embedded style
-*      [flat-style]      // show external plnkr in flat (original) style
+*      [embedded-style]  // show plnkr in embedded style (default and on narrow screens)
+*      [flat-style]      // show plnkr in flat (original) style
 *      [noDownload]      // no downloadable zip option
+*      [downloadOnly]    // just the zip
 *      [title="..."]>    // text for live example link and tooltip
 *        text            // higher precedence way to specify text for live example link and tooltip
 *  </live-example>
@@ -30,13 +34,13 @@ const zipBase = 'content/zips/';
 *   <p>Run <live-example>Try the live example</live-example></p>.
 *   // ~/resources/live-examples/{page}/plnkr.html
 *
-*   <p>Run <live-example name="toh-1">this example</live-example></p>.
-*   // ~/resources/live-examples/toh-1/plnkr.html
+*   <p>Run <live-example name="toh-pt1">this example</live-example></p>.
+*   // ~/resources/live-examples/toh-pt1/plnkr.html
 *
-*   // Link to the default plunker in the toh-1 sample
+*   // Link to the default plunker in the toh-pt1 sample
 *   // The title overrides default ("live example") with "Tour of Heroes - Part 1"
-*   <p>Run <live-example name="toh-1" title="Tour of Heroes - Part 1"></live-example></p>.
-*   // ~/resources/live-examples/toh-1/plnkr.html
+*   <p>Run <live-example name="toh-pt1" title="Tour of Heroes - Part 1"></live-example></p>.
+*   // ~/resources/live-examples/toh-pt1/plnkr.html
 *
 *   <p>Run <live-example plnkr="minimal"></live-example></p>.
 *   // ~/resources/live-examples/{page}/minimal.plnkr.html
@@ -56,8 +60,8 @@ const zipBase = 'content/zips/';
 *   // ~/resources/live-examples/{page}/plnkr.html
 *
 *   // Displays within the document page as an embedded style plunker editor
-*   <live-example name="toh-1" embedded plnkr="minimal" img="toh>Tour of Heroes - Part 1</live-example>
-*   // ~/resources/live-examples/toh-1/minimal.eplnkr.html
+*   <live-example name="toh-pt1" embedded plnkr="minimal" img="toh>Tour of Heroes - Part 1</live-example>
+*   // ~/resources/live-examples/toh-pt1/minimal.eplnkr.html
 */
 @Component({
   selector: 'live-example',
@@ -65,61 +69,75 @@ const zipBase = 'content/zips/';
 })
 export class LiveExampleComponent implements OnInit {
 
+  // Will force to embedded-style when viewport width is narrow
+  // "narrow" value was picked based on phone dimensions from http://screensiz.es/phone
+  readonly narrowWidth = 1000;
+
+  attrs: any;
   enableDownload = true;
+  exampleDir: string;
   isEmbedded = false;
+  mode = 'disabled';
   plnkr: string;
+  plnkrName: string;
   plnkrImg: string;
   showEmbedded = false;
   title: string;
   zip: string;
+  zipName: string;
 
-  constructor(private elementRef: ElementRef, location: Location ) {
-    const attrs = this.getAttrs();
+  constructor(
+    private elementRef: ElementRef,
+    location: Location ) {
 
+    const attrs = this.attrs = getAttrs(this.elementRef);
     let exampleDir = attrs.name;
     if (!exampleDir) {
       // take last segment, excluding hash fragment and query params
       exampleDir = location.path(false).match(/[^\/?\#]+(?=\/?(?:$|\#|\?))/)[0];
     }
-    exampleDir = exampleDir.trim();
+    this.exampleDir = exampleDir.trim();
+    this.zipName = exampleDir.indexOf('/') === -1 ? this.exampleDir : exampleDir.split('/')[0];
+    this.plnkrName = attrs.plnkr ? attrs.plnkr.trim() + '.' : '';
+    this.zip = `${zipBase}${exampleDir}/${this.plnkrName}${this.zipName}.zip`;
 
-    let plnkrStyle = 'eplnkr';
+    this.enableDownload = !boolFromValue(getAttrValue(attrs, 'nodownload'));
 
-    this.isEmbedded = boolFromAtty(attrs.embedded);
-    if (!this.isEmbedded) {
-      // Not embedded in doc page; determine if is embedded- or flat-style in another browser tab.
-      // External plunker is embedded style by default.
-      // Make flat style with `flat-style` or `embedded-style="false`
-      // Must support aliases
-      const flatStyle = getAttrValue(['flat-style', 'flatstyle', 'flatStyle']);
-      const isFlatStyle = boolFromAtty(flatStyle);
-      const embeddedStyle = getAttrValue(['embedded-style', 'embeddedstyle', 'embeddedStyle']);
-      const isEmbeddedStyle = boolFromAtty(embeddedStyle, !isFlatStyle);
-
-      plnkrStyle = isEmbeddedStyle ? 'eplnkr' : 'plnkr';
-    }
-
-    const plnkrName = attrs.plnkr ? attrs.plnkr.trim() + '.' : '';
-
-    this.plnkr = `${liveExampleBase}${exampleDir}/${plnkrName}${plnkrStyle}.html`;
-    this.zip = `${zipBase}${exampleDir}/${plnkrName}${exampleDir}.zip`;
-
-    const noDownload = getAttrValue(['noDownload', 'nodownload']); // noDownload aliases
-    this.enableDownload = !boolFromAtty(noDownload);
     this.plnkrImg = imageBase + (attrs.img || defaultPlnkrImg);
 
-    this.title = attrs.title || '';
-
-    function getAttrValue(atty: string | string[]) {
-      return attrs[typeof atty === 'string' ? atty : atty.find(a => attrs[a] !== undefined)];
+    if (boolFromValue(getAttrValue(attrs, 'downloadonly'))) {
+      this.mode = 'downloadOnly';
     }
   }
 
-  getAttrs(): any {
-    const attrs = this.elementRef.nativeElement.attributes;
-    const attrMap = {};
-    Object.keys(attrs).forEach(key => attrMap[attrs[key].name] = attrs[key].value);
-    return attrMap;
+  calcPlnkrLink(width: number) {
+
+    const attrs = this.attrs;
+    const exampleDir = this.exampleDir;
+
+    let plnkrStyle = 'eplnkr'; // embedded style by default
+    this.mode = 'default';     // display in another browser tab by default
+
+    this.isEmbedded = boolFromValue(attrs.embedded);
+
+    if (this.isEmbedded) {
+      this.mode = 'embedded'; // display embedded in the doc
+    } else {
+      // Not embedded in doc page; determine if is embedded- or flat-style in another browser tab.
+      // Embedded style if on tiny screen (reg. plunker no good on narrow screen)
+      // If wide enough, choose style based on style attributes
+      if (width > this.narrowWidth) {
+        // Make flat style with `flat-style` or `embedded-style="false`; support atty aliases
+        const flatStyle = getAttrValue(attrs, ['flat-style', 'flatstyle']);
+        const isFlatStyle = boolFromValue(flatStyle);
+
+        const embeddedStyle = getAttrValue(attrs, ['embedded-style', 'embeddedstyle']);
+        const isEmbeddedStyle = boolFromValue(embeddedStyle, !isFlatStyle);
+        plnkrStyle = isEmbeddedStyle ? 'eplnkr' : 'plnkr';
+      }
+    }
+
+    this.plnkr = `${liveExampleBase}${exampleDir}/${this.plnkrName}${plnkrStyle}.html`;
   }
 
   ngOnInit() {
@@ -127,17 +145,20 @@ export class LiveExampleComponent implements OnInit {
     // It is the original innerHTML of the host element.
     // Angular will sanitize this title when displayed so should be plain text.
     const title = this.elementRef.nativeElement.liveExampleContent;
-    this.title = (title || this.title || 'live example').trim();
+    this.title = (title || this.attrs.title || 'live example').trim();
+    this.onResize(window.innerWidth);
+  }
+
+  @HostListener('window:resize', ['$event.target.innerWidth'])
+  onResize(width) {
+    if (this.mode !== 'downloadOnly') {
+      this.calcPlnkrLink(width);
+    }
   }
 
   toggleEmbedded () { this.showEmbedded = !this.showEmbedded; }
 }
 
-function boolFromAtty(atty: string , def: boolean = false) {
-  // tslint:disable-next-line:triple-equals
-  return atty == undefined ? def :  atty.trim() !== 'false';
-}
-
 ///// EmbeddedPlunkerComponent ///
 /**
  * Hides the <iframe> so we can test LiveExampleComponent without actually triggering
diff --git a/aio/src/app/embedded/resource/resource-list.component.html b/aio/src/app/embedded/resource/resource-list.component.html
new file mode 100644
index 0000000000..e5b861caeb
--- /dev/null
+++ b/aio/src/app/embedded/resource/resource-list.component.html
@@ -0,0 +1,28 @@
+<div class="resources-container">
+    <div class="l-flex--column">
+      <div class="showcase" *ngFor="let category of categories">
+        <header class="c-resource-header">
+          <a class="h-anchor-offset" id="{{category.id}}"></a>
+          <h2>{{category.title}}</h2>
+        </header>
+
+        <div class="shadow-1">
+          <div *ngFor="let subCategory of category.subCategories">
+            <a class="h-anchor-offset" id="{{subCategory.id}}"></a>
+            <h3 class="subcategory-title">{{subCategory.title}}</h3>
+
+            <div *ngFor="let resource of subCategory.resources">
+              <div class="c-resource" *ngIf="resource.rev">
+                <a class="l-flex--column resource-row-link" target="_blank" [href]="resource.url">
+                  <div>
+                    <h4>{{resource.title}}</h4>
+                    <p class="resource-description">{{resource.desc || 'No Description'}}</p>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
diff --git a/aio/src/app/embedded/resource/resource-list.component.spec.ts b/aio/src/app/embedded/resource/resource-list.component.spec.ts
new file mode 100644
index 0000000000..3f3d7387b1
--- /dev/null
+++ b/aio/src/app/embedded/resource/resource-list.component.spec.ts
@@ -0,0 +1,81 @@
+import { ReflectiveInjector } from '@angular/core';
+import { PlatformLocation } from '@angular/common';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import { ResourceListComponent } from './resource-list.component';
+import { ResourceService } from './resource.service';
+
+import { Category } from './resource.model';
+
+// Testing the component class behaviors, independent of its template
+// Let e2e tests verify how it displays.
+describe('ResourceListComponent', () => {
+
+  let injector: ReflectiveInjector;
+  let location: TestPlatformLocation;
+  let resourceService: TestResourceService;
+
+  beforeEach(() => {
+    injector = ReflectiveInjector.resolveAndCreate([
+      ResourceListComponent,
+      {provide: PlatformLocation, useClass: TestPlatformLocation },
+      {provide: ResourceService, useClass: TestResourceService }
+    ]);
+
+    location = injector.get(PlatformLocation);
+    resourceService = injector.get(ResourceService);
+  });
+
+  it('should set the location w/o leading slashes', () => {
+    location.pathname = '////resources';
+    const component = getComponent();
+    expect(component.location).toBe('resources');
+  });
+
+  it('href(id) should return the expected href', () => {
+    location.pathname = '////resources';
+    const component = getComponent();
+    expect(component.href({id: 'foo'})).toBe('resources#foo');
+  });
+
+  it('should set scroll position to zero when no target element', () => {
+    const component = getComponent();
+    component.onScroll(undefined);
+    expect(component.scrollPos).toBe(0);
+  });
+
+  it('should set scroll position to element.scrollTop when that is defined', () => {
+    const component = getComponent();
+    component.onScroll({scrollTop: 42});
+    expect(component.scrollPos).toBe(42);
+  });
+
+  it('should set scroll position to element.body.scrollTop when that is defined', () => {
+    const component = getComponent();
+    component.onScroll({body: {scrollTop: 42}});
+    expect(component.scrollPos).toBe(42);
+  });
+
+  it('should set scroll position to 0 when no target.body.scrollTop defined', () => {
+    const component = getComponent();
+    component.onScroll({body: {}});
+    expect(component.scrollPos).toBe(0);
+  });
+
+  //// Test Helpers ////
+  function  getComponent(): ResourceListComponent { return injector.get(ResourceListComponent); }
+
+  class TestPlatformLocation {
+    pathname = 'resources';
+  }
+
+  class TestResourceService {
+    categories = of(getTestData);
+  }
+
+  function getTestData(): Category[] {
+    return []; // Not interested in the data in these tests
+  }
+});
diff --git a/aio/src/app/embedded/resource/resource-list.component.ts b/aio/src/app/embedded/resource/resource-list.component.ts
new file mode 100644
index 0000000000..2b424db538
--- /dev/null
+++ b/aio/src/app/embedded/resource/resource-list.component.ts
@@ -0,0 +1,37 @@
+import { Component, HostListener, OnInit } from '@angular/core';
+import { PlatformLocation } from '@angular/common';
+
+import { Category } from './resource.model';
+import { ResourceService } from './resource.service';
+
+@Component({
+  selector: 'aio-resource-list',
+  templateUrl: 'resource-list.component.html'
+})
+export class ResourceListComponent implements OnInit {
+
+  categories: Category[];
+  location: string;
+  scrollPos = 0;
+
+  constructor(
+    location: PlatformLocation,
+    private resourceService: ResourceService) {
+    this.location = location.pathname.replace(/^\/+/, '');
+  }
+
+  href(cat: {id: string}) {
+    return this.location + '#' + cat.id;
+  }
+
+  ngOnInit() {
+    // Not using async pipe because cats appear twice in template
+    // No need to unsubscribe because categories observable completes.
+    this.resourceService.categories.subscribe(cats => this.categories = cats);
+  }
+
+  @HostListener('window:scroll', ['$event.target'])
+  onScroll(target: any) {
+    this.scrollPos = target ? target.scrollTop || target.body.scrollTop ||  0 : 0;
+  }
+}
diff --git a/aio/src/app/embedded/resource/resource.model.ts b/aio/src/app/embedded/resource/resource.model.ts
new file mode 100644
index 0000000000..87c299a01e
--- /dev/null
+++ b/aio/src/app/embedded/resource/resource.model.ts
@@ -0,0 +1,23 @@
+export class Category {
+  id: string;    // "education"
+  title: string; // "Education"
+  order: number; // 2
+  subCategories: SubCategory[];
+}
+
+export class SubCategory {
+  id: string;    // "books"
+  title: string; // "Books"
+  order: number; // 1
+  resources: Resource[];
+}
+
+export class Resource {
+  category: string;    // "Education"
+  subCategory: string; // "Books"
+  id: string;          // "-KLI8vJ0ZkvWhqPembZ7"
+  desc: string;        // "This books shows all the steps necessary for the development of SPA"
+  rev: boolean;        // true (always true in the original)
+  title: string;       // "Practical Angular 2",
+  url: string;         // "https://leanpub.com/practical-angular-2"
+}
diff --git a/aio/src/app/embedded/resource/resource.service.spec.ts b/aio/src/app/embedded/resource/resource.service.spec.ts
new file mode 100644
index 0000000000..273a8847da
--- /dev/null
+++ b/aio/src/app/embedded/resource/resource.service.spec.ts
@@ -0,0 +1,159 @@
+import { ReflectiveInjector } from '@angular/core';
+import { Http, ConnectionBackend, RequestOptions, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
+import { MockBackend } from '@angular/http/testing';
+
+import { ResourceService } from './resource.service';
+import { Category, SubCategory, Resource } from './resource.model';
+
+describe('ResourceService', () => {
+
+  let injector: ReflectiveInjector;
+  let backend: MockBackend;
+  let resourceService: ResourceService;
+
+  function createResponse(body: any) {
+    return new Response(new ResponseOptions({ body: JSON.stringify(body) }));
+  }
+
+  beforeEach(() => {
+    injector = ReflectiveInjector.resolveAndCreate([
+      ResourceService,
+      { provide: ConnectionBackend, useClass: MockBackend },
+      { provide: RequestOptions, useClass: BaseRequestOptions },
+      Http
+    ]);
+
+    backend = injector.get(ConnectionBackend);
+    resourceService = injector.get(ResourceService);
+  });
+
+  it('should be creatable', () => {
+    expect(resourceService).toBeTruthy();
+  });
+
+  it('should make a single connection to the server', () => {
+    expect(backend.connectionsArray.length).toEqual(1);
+    expect(backend.connectionsArray[0].request.url).toEqual('generated/resources.json');
+  });
+
+  describe('#categories', () => {
+
+    let categories: Category[];
+    let testData: any;
+
+    beforeEach(() => {
+      testData = getTestResources();
+      backend.connectionsArray[0].mockRespond(createResponse(testData));
+      resourceService.categories.subscribe(results => categories = results);
+    });
+
+    it('categories observable should complete', () => {
+      let completed = false;
+      resourceService.categories.subscribe(null, null, () => completed = true);
+      expect(true).toBe(true, 'observable completed');
+    });
+
+    it('should reshape contributors.json to sorted category array', () => {
+      const actualIds = categories.map(c => c.id).join(',');
+      expect(actualIds).toBe('cat-1,cat-3');
+    });
+
+    it('should convert ids to canonical form', () => {
+      // canonical form is lowercase with dashes for spaces
+      const cat = categories[1];
+      const sub = cat.subCategories[0];
+      const res = sub.resources[0];
+
+      expect(cat.id).toBe('cat-3', 'category id');
+      expect(sub.id).toBe('cat3-subcat2', 'subcat id');
+      expect(res.id).toBe('cat3-subcat2-res1', 'resources id');
+    });
+
+    it('resource knows its category and sub-category titles', () => {
+      const cat = categories[1];
+      const sub = cat.subCategories[0];
+      const res = sub.resources[0];
+      expect(res.category).toBe(cat.title, 'category title');
+      expect(res.subCategory).toBe(sub.title, 'subcategory title');
+    });
+
+    it('should have expected SubCategories of "Cat 3"', () => {
+      const actualIds = categories[1].subCategories.map(s => s.id).join(',');
+      expect(actualIds).toBe('cat3-subcat2,cat3-subcat1');
+    });
+
+    it('should have expected sorted resources of "Cat 1:SubCat1"', () => {
+      const actualIds = categories[0].subCategories[0].resources.map(r => r.id).join(',');
+      expect(actualIds).toBe('a-a-a,s-s-s,z-z-z');
+    });
+  });
+
+  it('should do WHAT(?) if the request fails');
+});
+
+function getTestResources() {
+  // tslint:disable:quotemark
+  return {
+    "Cat 3": {
+      "order": 3,
+      "subCategories": {
+        "Cat3 SubCat1": {
+          "order": 2,
+          "resources": {
+            "Cat3 SubCat1 Res1": {
+              "desc": "Meetup in Barcelona, Spain. ",
+              "rev": true,
+              "title": "Angular Beers",
+              "url": "http://www.meetup.com/AngularJS-Beers/"
+            },
+            "Cat3 SubCat1 Res2": {
+              "desc": "Angular Camps in Barcelona, Spain.",
+              "rev": true,
+              "title": "Angular Camp",
+              "url": "http://angularcamp.org/"
+            }
+          }
+        },
+        "Cat3 SubCat2": {
+          "order": 1,
+          "resources": {
+            "Cat3 SubCat2 Res1": {
+              "desc": "A community index of components and libraries",
+              "rev": true,
+              "title": "Catalog of Angular Components & Libraries",
+              "url": "https://a/b/c"
+            }
+          }
+        },
+      }
+    },
+    "Cat 1": {
+      "order": 1,
+      "subCategories": {
+        "Cat1 SubCat1": {
+          "order": 1,
+          "resources": {
+            "S S S": {
+              "desc": "SSS",
+              "rev": true,
+              "title": "Sssss",
+              "url": "http://s/s/s"
+            },
+            "A A A": {
+             "desc": "AAA",
+              "rev": true,
+              "title": "Aaaa",
+              "url": "http://a/a/a"
+            },
+            "Z Z Z": {
+             "desc": "ZZZ",
+              "rev": true,
+              "title": "Zzzzz",
+              "url": "http://z/z/z"
+            }
+          }
+        },
+      },
+    }
+  };
+}
diff --git a/aio/src/app/embedded/resource/resource.service.ts b/aio/src/app/embedded/resource/resource.service.ts
new file mode 100644
index 0000000000..3ce85a1b55
--- /dev/null
+++ b/aio/src/app/embedded/resource/resource.service.ts
@@ -0,0 +1,83 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/publishLast';
+
+import { Category, Resource, SubCategory } from './resource.model';
+import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
+
+const resourcesPath = CONTENT_URL_PREFIX + 'resources.json';
+
+@Injectable()
+export class ResourceService {
+  categories: Observable<Category[]>;
+
+  constructor(private http: Http) {
+    this.categories = this.getCategories();
+  }
+
+  private getCategories(): Observable<Category[]> {
+
+    const categories = this.http.get(resourcesPath)
+      .map(res => res.json())
+      .map(data => mkCategories(data))
+      .publishLast();
+
+    categories.connect();
+    return categories;
+  };
+}
+
+// Extract sorted Category[] from resource JSON data
+function mkCategories(categoryJson: any): Category[] {
+  return Object.keys(categoryJson).map(catKey => {
+    const cat = categoryJson[catKey];
+    return {
+      id: makeId(catKey),
+      title: catKey,
+      order: cat.order,
+      subCategories: mkSubCategories(cat.subCategories, catKey)
+    } as Category;
+  })
+  .sort(compareCats);
+}
+
+// Extract sorted SubCategory[] from JSON category data
+function mkSubCategories(subCategoryJson: any, catKey: string): SubCategory[] {
+  return Object.keys(subCategoryJson).map(subKey => {
+      const sub = subCategoryJson[subKey];
+      return {
+        id: makeId(subKey),
+        title: subKey,
+        order: sub.order,
+        resources: mkResources(sub.resources, subKey, catKey)
+      } as SubCategory;
+  })
+  .sort(compareCats);
+}
+
+// Extract sorted Resource[] from JSON subcategory data
+function mkResources(resourceJson: any, subKey: string, catKey: string): Resource[] {
+  return Object.keys(resourceJson).map(resKey => {
+    const res = resourceJson[resKey];
+    res.category = catKey;
+    res.subCategory = subKey;
+    res.id = makeId(resKey);
+    return res as Resource;
+  })
+  .sort(compareTitles);
+}
+
+function compareCats(l: Category | SubCategory, r: Category | SubCategory) {
+  return l.order === r.order ? compareTitles(l, r) : l.order > r.order ? 1 : -1;
+}
+
+function compareTitles(l: {title: string}, r: {title: string}) {
+ return l.title.toUpperCase() > r.title.toUpperCase() ? 1 : -1;
+}
+
+function makeId(title: string) {
+  return title.toLowerCase().replace(/\s+/g, '-');
+}
diff --git a/aio/src/app/embedded/toc/toc.component.html b/aio/src/app/embedded/toc/toc.component.html
new file mode 100644
index 0000000000..81c026a4f5
--- /dev/null
+++ b/aio/src/app/embedded/toc/toc.component.html
@@ -0,0 +1,31 @@
+<div *ngIf="type !== 'None'" class="toc-inner" [class.collapsed]="isCollapsed">
+
+  <div *ngIf="type === 'EmbeddedSimple'" class="toc-heading embedded">
+    Contents
+  </div>
+
+  <button *ngIf="type === 'EmbeddedExpandable'" type="button" (click)="toggle(false)"
+    class="toc-heading embedded secondary"
+    title="Expand/collapse contents"
+    aria-label="Expand/collapse contents"
+    [attr.aria-pressed]="!isCollapsed">
+    Contents
+    <md-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></md-icon>
+  </button>
+
+  <ul class="toc-list" [class.embedded]="type !== 'Floating'">
+    <ng-container *ngFor="let toc of tocList; let i = index">
+      <li #tocItem title="{{toc.title}}" *ngIf="type === 'Floating' || toc.level !== 'h1'"
+        class="{{toc.level}}" [class.secondary]="type === 'EmbeddedExpandable' && i >= primaryMax" [class.active]="i === activeIndex">
+        <a [href]="toc.href" [innerHTML]="toc.content"></a>
+      </li>
+    </ng-container>
+  </ul>
+
+  <button *ngIf="type === 'EmbeddedExpandable'" type="button" (click)="toggle()"
+    class="toc-more-items embedded material-icons" [class.collapsed]="isCollapsed"
+    title="Expand/collapse contents"
+    aria-label="Expand/collapse contents"
+    [attr.aria-pressed]="!isCollapsed">
+  </button>
+</div>
diff --git a/aio/src/app/embedded/toc/toc.component.spec.ts b/aio/src/app/embedded/toc/toc.component.spec.ts
new file mode 100644
index 0000000000..f6a5c36f9a
--- /dev/null
+++ b/aio/src/app/embedded/toc/toc.component.spec.ts
@@ -0,0 +1,487 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By, DOCUMENT } from '@angular/platform-browser';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { asap } from 'rxjs/scheduler/asap';
+
+import { ScrollService } from 'app/shared/scroll.service';
+import { TocComponent } from './toc.component';
+import { TocItem, TocService } from 'app/shared/toc.service';
+
+describe('TocComponent', () => {
+  let tocComponentDe: DebugElement;
+  let tocComponent: TocComponent;
+  let tocService: TestTocService;
+
+  let page: {
+    listItems: DebugElement[];
+    tocHeading: DebugElement;
+    tocHeadingButtonEmbedded: DebugElement;
+    tocH1Heading: DebugElement;
+    tocMoreButton: DebugElement;
+  };
+
+  function setPage(): typeof page {
+    return {
+      listItems: tocComponentDe.queryAll(By.css('ul.toc-list>li')),
+      tocHeading: tocComponentDe.query(By.css('.toc-heading')),
+      tocHeadingButtonEmbedded: tocComponentDe.query(By.css('button.toc-heading.embedded')),
+      tocH1Heading: tocComponentDe.query(By.css('.h1')),
+      tocMoreButton: tocComponentDe.query(By.css('button.toc-more-items')),
+    };
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HostEmbeddedTocComponent, HostNotEmbeddedTocComponent, TocComponent ],
+      providers: [
+        { provide: ScrollService, useClass: TestScrollService },
+        { provide: TocService, useClass: TestTocService }
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+  });
+
+  describe('when embedded in doc body', () => {
+    let fixture: ComponentFixture<HostEmbeddedTocComponent>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(HostEmbeddedTocComponent);
+      tocComponentDe = fixture.debugElement.children[0];
+      tocComponent = tocComponentDe.componentInstance;
+      tocService = TestBed.get(TocService);
+    });
+
+    it('should create tocComponent', () => {
+      expect(tocComponent).toBeTruthy();
+    });
+
+    it('should be in embedded state', () => {
+      expect(tocComponent.isEmbedded).toEqual(true);
+    });
+
+    it('should not display a ToC initially', () => {
+      expect(tocComponent.type).toEqual('None');
+    });
+
+    it('should not display anything when no h2 or h3 TocItems', () => {
+      tocService.tocList.next([tocItem('H1', 'h1')]);
+      fixture.detectChanges();
+      expect(tocComponentDe.children.length).toEqual(0);
+    });
+
+    it('should update when the TocItems are updated', () => {
+      tocService.tocList.next([tocItem('Heading A')]);
+      fixture.detectChanges();
+      expect(tocComponentDe.queryAllNodes(By.css('li')).length).toBe(1);
+
+      tocService.tocList.next([tocItem('Heading A'), tocItem('Heading B'), tocItem('Heading C')]);
+      fixture.detectChanges();
+      expect(tocComponentDe.queryAllNodes(By.css('li')).length).toBe(3);
+    });
+
+    it('should only display H2 and H3 TocItems', () => {
+      tocService.tocList.next([tocItem('Heading A', 'h1'), tocItem('Heading B'), tocItem('Heading C', 'h3')]);
+      fixture.detectChanges();
+
+      const tocItems = tocComponentDe.queryAllNodes(By.css('li'));
+      const textContents = tocItems.map(item => item.nativeNode.textContent.trim());
+
+      expect(tocItems.length).toBe(2);
+      expect(textContents.find(text => text === 'Heading A')).toBeFalsy();
+      expect(textContents.find(text => text === 'Heading B')).toBeTruthy();
+      expect(textContents.find(text => text === 'Heading C')).toBeTruthy();
+      expect(setPage().tocH1Heading).toBeFalsy();
+    });
+
+    it('should stop listening for TocItems once destroyed', () => {
+      tocService.tocList.next([tocItem('Heading A')]);
+      fixture.detectChanges();
+      expect(tocComponentDe.queryAllNodes(By.css('li')).length).toBe(1);
+
+      tocComponent.ngOnDestroy();
+      tocService.tocList.next([tocItem('Heading A', 'h1'), tocItem('Heading B'), tocItem('Heading C')]);
+      fixture.detectChanges();
+      expect(tocComponentDe.queryAllNodes(By.css('li')).length).toBe(1);
+    });
+
+    describe('when fewer than `maxPrimary` TocItems', () => {
+
+      beforeEach(() => {
+        tocService.tocList.next([tocItem('Heading A'), tocItem('Heading B'), tocItem('Heading C'), tocItem('Heading D')]);
+        fixture.detectChanges();
+        page = setPage();
+      });
+
+      it('should have four displayed items', () => {
+        expect(page.listItems.length).toEqual(4);
+      });
+
+      it('should not have secondary items', () => {
+        expect(tocComponent.type).toEqual('EmbeddedSimple');
+        const aSecond = page.listItems.find(item => item.classes.secondary);
+        expect(aSecond).toBeFalsy('should not find a secondary');
+      });
+
+      it('should not display expando buttons', () => {
+        expect(page.tocHeadingButtonEmbedded).toBeFalsy('top expand/collapse button');
+        expect(page.tocMoreButton).toBeFalsy('bottom more button');
+      });
+    });
+
+    describe('when many TocItems', () => {
+      let scrollToTopSpy: jasmine.Spy;
+
+      beforeEach(() => {
+        fixture.detectChanges();
+        page = setPage();
+        scrollToTopSpy = TestBed.get(ScrollService).scrollToTop;
+      });
+
+      it('should have more than 4 displayed items', () => {
+        let tocList: TocItem[];
+        tocService.tocList.subscribe(v => tocList = v);
+
+        expect(page.listItems.length).toBeGreaterThan(4);
+      });
+
+      it('should not display the h1 item', () => {
+        expect(page.listItems.find(item => item.classes.h1)).toBeFalsy('should not find h1 item');
+      });
+
+      it('should be in "collapsed" (not expanded) state at the start', () => {
+        expect(tocComponent.isCollapsed).toBeTruthy();
+      });
+
+      it('should have "collapsed" class at the start', () => {
+        expect(tocComponentDe.children[0].classes.collapsed).toEqual(true);
+      });
+
+      it('should display expando buttons', () => {
+        expect(page.tocHeadingButtonEmbedded).toBeTruthy('top expand/collapse button');
+        expect(page.tocMoreButton).toBeTruthy('bottom more button');
+      });
+
+      it('should have secondary items', () => {
+        expect(tocComponent.type).toEqual('EmbeddedExpandable');
+      });
+
+      // CSS will hide items with the secondary class when collapsed
+      it('should have secondary item with a secondary class', () => {
+        const aSecondary = page.listItems.find(item => item.classes.secondary);
+        expect(aSecondary).toBeTruthy('should find a secondary');
+      });
+
+      describe('after click tocHeading button', () => {
+
+        beforeEach(() => {
+          page.tocHeadingButtonEmbedded.nativeElement.click();
+          fixture.detectChanges();
+        });
+
+        it('should not be "collapsed"', () => {
+          expect(tocComponent.isCollapsed).toEqual(false);
+        });
+
+        it('should not have "collapsed" class', () => {
+          expect(tocComponentDe.children[0].classes.collapsed).toBeFalsy();
+        });
+
+        it('should not scroll', () => {
+          expect(scrollToTopSpy).not.toHaveBeenCalled();
+        });
+
+        it('should be "collapsed" after clicking again', () => {
+          page.tocHeadingButtonEmbedded.nativeElement.click();
+          fixture.detectChanges();
+          expect(tocComponent.isCollapsed).toEqual(true);
+        });
+
+        it('should not scroll after clicking again', () => {
+          page.tocHeadingButtonEmbedded.nativeElement.click();
+          fixture.detectChanges();
+          expect(scrollToTopSpy).not.toHaveBeenCalled();
+        });
+      });
+
+      describe('after click tocMore button', () => {
+
+        beforeEach(() => {
+          page.tocMoreButton.nativeElement.click();
+          fixture.detectChanges();
+        });
+
+        it('should not be "collapsed"', () => {
+          expect(tocComponent.isCollapsed).toEqual(false);
+        });
+
+        it('should not have "collapsed" class', () => {
+          expect(tocComponentDe.children[0].classes.collapsed).toBeFalsy();
+        });
+
+        it('should not scroll', () => {
+          expect(scrollToTopSpy).not.toHaveBeenCalled();
+        });
+
+        it('should be "collapsed" after clicking again', () => {
+          page.tocMoreButton.nativeElement.click();
+          fixture.detectChanges();
+          expect(tocComponent.isCollapsed).toEqual(true);
+        });
+
+        it('should be "collapsed" after clicking tocHeadingButton', () => {
+          page.tocMoreButton.nativeElement.click();
+          fixture.detectChanges();
+          expect(tocComponent.isCollapsed).toEqual(true);
+        });
+
+        it('should scroll after clicking again', () => {
+          page.tocMoreButton.nativeElement.click();
+          fixture.detectChanges();
+          expect(scrollToTopSpy).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+
+  describe('when in side panel (not embedded)', () => {
+    let fixture: ComponentFixture<HostNotEmbeddedTocComponent>;
+    let scrollToTopSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(HostNotEmbeddedTocComponent);
+
+      scrollToTopSpy = TestBed.get(ScrollService).scrollToTop;
+      tocComponentDe = fixture.debugElement.children[0];
+      tocComponent = tocComponentDe.componentInstance;
+      tocService = TestBed.get(TocService);
+
+      fixture.detectChanges();
+      page = setPage();
+    });
+
+    it('should not be in embedded state', () => {
+      expect(tocComponent.isEmbedded).toEqual(false);
+      expect(tocComponent.type).toEqual('Floating');
+    });
+
+    it('should display all items (including h1s)', () => {
+      expect(page.listItems.length).toEqual(getTestTocList().length);
+    });
+
+    it('should not have secondary items', () => {
+      expect(tocComponent.type).toEqual('Floating');
+      const aSecond = page.listItems.find(item => item.classes.secondary);
+      expect(aSecond).toBeFalsy('should not find a secondary');
+    });
+
+    it('should not display expando buttons', () => {
+      expect(page.tocHeadingButtonEmbedded).toBeFalsy('top expand/collapse button');
+      expect(page.tocMoreButton).toBeFalsy('bottom more button');
+    });
+
+    it('should display H1 title', () => {
+      expect(page.tocH1Heading).toBeTruthy();
+    });
+
+    describe('#activeIndex', () => {
+      it('should keep track of `TocService`\'s `activeItemIndex`', () => {
+        expect(tocComponent.activeIndex).toBeNull();
+
+        tocService.setActiveIndex(42);
+        expect(tocComponent.activeIndex).toBe(42);
+
+        tocService.setActiveIndex(null);
+        expect(tocComponent.activeIndex).toBeNull();
+      });
+
+      it('should stop tracking `activeItemIndex` once destroyed', () => {
+        tocService.setActiveIndex(42);
+        expect(tocComponent.activeIndex).toBe(42);
+
+        tocComponent.ngOnDestroy();
+
+        tocService.setActiveIndex(43);
+        expect(tocComponent.activeIndex).toBe(42);
+
+        tocService.setActiveIndex(null);
+        expect(tocComponent.activeIndex).toBe(42);
+      });
+
+      it('should set the `active` class to the active anchor (and only that)', () => {
+        expect(page.listItems.findIndex(By.css('.active'))).toBe(-1);
+
+        tocComponent.activeIndex = 1;
+        fixture.detectChanges();
+        expect(page.listItems.filter(By.css('.active')).length).toBe(1);
+        expect(page.listItems.findIndex(By.css('.active'))).toBe(1);
+
+        tocComponent.activeIndex = null;
+        fixture.detectChanges();
+        expect(page.listItems.filter(By.css('.active')).length).toBe(0);
+        expect(page.listItems.findIndex(By.css('.active'))).toBe(-1);
+
+        tocComponent.activeIndex = 0;
+        fixture.detectChanges();
+        expect(page.listItems.filter(By.css('.active')).length).toBe(1);
+        expect(page.listItems.findIndex(By.css('.active'))).toBe(0);
+
+        tocComponent.activeIndex = 1337;
+        fixture.detectChanges();
+        expect(page.listItems.filter(By.css('.active')).length).toBe(0);
+        expect(page.listItems.findIndex(By.css('.active'))).toBe(-1);
+
+        tocComponent.activeIndex = page.listItems.length - 1;
+        fixture.detectChanges();
+        expect(page.listItems.filter(By.css('.active')).length).toBe(1);
+        expect(page.listItems.findIndex(By.css('.active'))).toBe(page.listItems.length - 1);
+      });
+
+      it('should re-apply the `active` class when the list elements change', () => {
+        const getActiveTextContent = () =>
+            page.listItems.find(By.css('.active')).nativeElement.textContent.trim();
+
+        tocComponent.activeIndex = 1;
+        fixture.detectChanges();
+        expect(getActiveTextContent()).toBe('Heading one');
+
+        tocComponent.tocList = [tocItem('New 1'), tocItem('New 2')];
+        fixture.detectChanges();
+        page = setPage();
+        expect(getActiveTextContent()).toBe('New 2');
+
+        tocComponent.tocList.unshift(tocItem('New 0'));
+        fixture.detectChanges();
+        page = setPage();
+        expect(getActiveTextContent()).toBe('New 1');
+
+        tocComponent.tocList = [tocItem('Very New 1')];
+        fixture.detectChanges();
+        page = setPage();
+        expect(page.listItems.findIndex(By.css('.active'))).toBe(-1);
+
+        tocComponent.activeIndex = 0;
+        fixture.detectChanges();
+        expect(getActiveTextContent()).toBe('Very New 1');
+      });
+
+      describe('should scroll the active ToC item into viewport (if not already visible)', () => {
+        let parentScrollTop: number;
+
+        beforeEach(() => {
+          const firstItem = page.listItems[0].nativeElement;
+          const offsetParent = firstItem.offsetParent;
+
+          offsetParent.style.maxHeight = `${offsetParent.clientHeight - firstItem.clientHeight}px`;
+          Object.defineProperty(offsetParent, 'scrollTop', {
+            get: () => parentScrollTop,
+            set: v => parentScrollTop = v
+          });
+
+          parentScrollTop = 0;
+        });
+
+        it('when the `activeIndex` changes', () => {
+          tocService.setActiveIndex(0);
+          fixture.detectChanges();
+
+          expect(parentScrollTop).toBe(0);
+
+          tocService.setActiveIndex(1);
+          fixture.detectChanges();
+
+          expect(parentScrollTop).toBe(0);
+
+          tocService.setActiveIndex(page.listItems.length - 1);
+          fixture.detectChanges();
+
+          expect(parentScrollTop).toBeGreaterThan(0);
+        });
+
+        it('when the `tocList` changes', () => {
+          const tocList = tocComponent.tocList;
+
+          tocComponent.tocList = [];
+          fixture.detectChanges();
+
+          expect(parentScrollTop).toBe(0);
+
+          tocService.setActiveIndex(tocList.length - 1);
+          fixture.detectChanges();
+
+          expect(parentScrollTop).toBe(0);
+
+          tocComponent.tocList = tocList;
+          fixture.detectChanges();
+
+          expect(parentScrollTop).toBeGreaterThan(0);
+        });
+
+        it('not after it has been destroyed', () => {
+          const tocList = tocComponent.tocList;
+          tocComponent.ngOnDestroy();
+
+          tocService.setActiveIndex(page.listItems.length - 1);
+          fixture.detectChanges();
+
+          expect(parentScrollTop).toBe(0);
+
+          tocComponent.tocList = [];
+          fixture.detectChanges();
+
+          expect(parentScrollTop).toBe(0);
+
+          tocComponent.tocList = tocList;
+          fixture.detectChanges();
+
+          expect(parentScrollTop).toBe(0);
+        });
+      });
+    });
+  });
+
+});
+
+//// helpers ////
+@Component({
+  selector: 'aio-embedded-host',
+  template: '<aio-toc class="embedded"></aio-toc>'
+})
+class HostEmbeddedTocComponent {}
+
+@Component({
+  selector: 'aio-not-embedded-host',
+  template: '<aio-toc></aio-toc>'
+})
+class HostNotEmbeddedTocComponent {}
+
+class TestScrollService {
+  scrollToTop = jasmine.createSpy('scrollToTop');
+}
+
+class TestTocService {
+  tocList = new BehaviorSubject<TocItem[]>(getTestTocList());
+  activeItemIndex = new BehaviorSubject<number | null>(null);
+  setActiveIndex(index) {
+    this.activeItemIndex.next(index);
+    if (asap.scheduled) {
+      asap.flush();
+    }
+  }
+}
+
+function tocItem(title: string, level = 'h2', href = '', content = title) {
+  return { title, href, level, content };
+}
+
+function getTestTocList() {
+  return [
+    tocItem('Title',       'h1', 'fizz/buzz#title',                  'Title'),
+    tocItem('Heading one', 'h2', 'fizz/buzz#heading-one-special-id', 'Heading one'),
+    tocItem('H2 Two',      'h2', 'fizz/buzz#h2-two',                 'H2 Two'),
+    tocItem('H2 Three',    'h2', 'fizz/buzz#h2-three',               'H2 <b>Three</b>'),
+    tocItem('H3 3a',       'h3', 'fizz/buzz#h3-3a',                  'H3 3a'),
+    tocItem('H3 3b',       'h3', 'fizz/buzz#h3-3b',                  'H3 3b'),
+    tocItem('H2 4',        'h2', 'fizz/buzz#h2-four',                '<i>H2 <b>four</b></i>'),
+  ];
+}
diff --git a/aio/src/app/embedded/toc/toc.component.ts b/aio/src/app/embedded/toc/toc.component.ts
new file mode 100644
index 0000000000..95f4edd14d
--- /dev/null
+++ b/aio/src/app/embedded/toc/toc.component.ts
@@ -0,0 +1,98 @@
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+import { asap } from 'rxjs/scheduler/asap';
+import 'rxjs/add/observable/combineLatest';
+import 'rxjs/add/operator/subscribeOn';
+import 'rxjs/add/operator/takeUntil';
+
+import { ScrollService } from 'app/shared/scroll.service';
+import { TocItem, TocService } from 'app/shared/toc.service';
+
+type TocType = 'None' | 'Floating' | 'EmbeddedSimple' | 'EmbeddedExpandable';
+
+@Component({
+  selector: 'aio-toc',
+  templateUrl: 'toc.component.html',
+  styles: []
+})
+export class TocComponent implements OnInit, AfterViewInit, OnDestroy {
+
+  activeIndex: number | null = null;
+  type: TocType = 'None';
+  isCollapsed = true;
+  isEmbedded = false;
+  @ViewChildren('tocItem') private items: QueryList<ElementRef>;
+  private onDestroy = new Subject();
+  private primaryMax = 4;
+  tocList: TocItem[];
+
+  constructor(
+    private scrollService: ScrollService,
+    elementRef: ElementRef,
+    private tocService: TocService) {
+    this.isEmbedded = elementRef.nativeElement.className.indexOf('embedded') !== -1;
+  }
+
+  ngOnInit() {
+    this.tocService.tocList
+        .takeUntil(this.onDestroy)
+        .subscribe(tocList => {
+          this.tocList = tocList;
+          const itemCount = count(this.tocList, item => item.level !== 'h1');
+
+          this.type = (itemCount > 0) ?
+                        this.isEmbedded ?
+                          (itemCount > this.primaryMax) ?
+                            'EmbeddedExpandable' :
+                          'EmbeddedSimple' :
+                        'Floating' :
+                      'None';
+        });
+  }
+
+  ngAfterViewInit() {
+    if (!this.isEmbedded) {
+      // We use the `asap` scheduler because updates to `activeItemIndex` are triggered by DOM changes,
+      // which, in turn, are caused by the rendering that happened due to a ChangeDetection.
+      // Without asap, we would be updating the model while still in a ChangeDetection handler, which is disallowed by Angular.
+      Observable.combineLatest(this.tocService.activeItemIndex.subscribeOn(asap), this.items.changes.startWith(this.items))
+          .takeUntil(this.onDestroy)
+          .subscribe(([index, items]) => {
+            this.activeIndex = index;
+            if (index === null || index >= items.length) {
+              return;
+            }
+
+            const e = items.toArray()[index].nativeElement;
+            const p = e.offsetParent;
+
+            const eRect = e.getBoundingClientRect();
+            const pRect = p.getBoundingClientRect();
+
+            const isInViewport = (eRect.top >= pRect.top) && (eRect.bottom <= pRect.bottom);
+
+            if (!isInViewport) {
+              p.scrollTop += (eRect.top - pRect.top) - (p.clientHeight / 2);
+            }
+          });
+    }
+  }
+
+  ngOnDestroy() {
+    this.onDestroy.next();
+  }
+
+  toggle(canScroll = true) {
+    this.isCollapsed = !this.isCollapsed;
+    if (canScroll && this.isCollapsed) { this.toTop(); }
+  }
+
+  toTop() {
+    this.scrollService.scrollToTop();
+  }
+}
+
+function count<T>(array: T[], fn: (T) => boolean) {
+  return array.reduce((count, item) => fn(item) ? count + 1 : count, 0);
+}
diff --git a/aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts b/aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts
index 35ee26608c..8ffcbda681 100644
--- a/aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts
+++ b/aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts
@@ -1,10 +1,13 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ComponentFactoryResolver, ElementRef, Injector, NgModule, OnInit, ViewChild, Component, DebugElement } from '@angular/core';
+import {
+  Component, ComponentFactoryResolver, DebugElement,
+  ElementRef, Injector, NgModule, OnInit, ViewChild } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { DocViewerComponent } from './doc-viewer.component';
 import { DocumentContents } from 'app/documents/document.service';
 import { EmbeddedModule, embeddedComponents, EmbeddedComponents } from 'app/embedded/embedded.module';
-
+import { Title } from '@angular/platform-browser';
+import { TocService } from 'app/shared/toc.service';
 
 /// Embedded Test Components ///
 
@@ -86,6 +89,17 @@ class TestComponent {
   @ViewChild(DocViewerComponent) docViewer: DocViewerComponent;
 }
 
+//// Test Services ////
+
+class TestTitleService {
+  setTitle = jasmine.createSpy('reset');
+}
+
+class TestTocService {
+  reset = jasmine.createSpy('reset');
+  genToc = jasmine.createSpy('genToc');
+}
+
 //////// Tests //////////////
 
 describe('DocViewerComponent', () => {
@@ -94,7 +108,11 @@ describe('DocViewerComponent', () => {
   let docViewerEl: HTMLElement;
   let fixture: ComponentFixture<TestComponent>;
 
-  beforeEach(async(() => {
+  function setCurrentDoc(contents = '', id = 'fizz/buzz') {
+    component.currentDoc = { contents, id };
+  }
+
+  beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [ TestModule ],
       declarations: [
@@ -103,11 +121,12 @@ describe('DocViewerComponent', () => {
         embeddedTestComponents
       ],
       providers: [
-        {provide: EmbeddedComponents, useValue: {components: embeddedTestComponents}}
+        { provide: EmbeddedComponents, useValue: {components: embeddedTestComponents} },
+        { provide: Title, useClass: TestTitleService },
+        { provide: TocService, useClass: TestTocService }
       ]
-    })
-    .compileComponents();
-  }));
+    });
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TestComponent);
@@ -122,23 +141,23 @@ describe('DocViewerComponent', () => {
   });
 
   it(('should display nothing when set currentDoc has no content'), () => {
-    component.currentDoc = { title: 'fake title', contents: '' };
+    setCurrentDoc();
     fixture.detectChanges();
     expect(docViewerEl.innerHTML).toBe('');
   });
 
   it(('should display simple static content doc'), () => {
     const contents = '<p>Howdy, doc viewer</p>';
-    component.currentDoc = { title: 'fake title', contents };
+    setCurrentDoc(contents);
     fixture.detectChanges();
     expect(docViewerEl.innerHTML).toEqual(contents);
   });
 
   it(('should display nothing after reset static content doc'), () => {
     const contents = '<p>Howdy, doc viewer</p>';
-    component.currentDoc = { title: 'fake title', contents };
+    setCurrentDoc(contents);
     fixture.detectChanges();
-    component.currentDoc = { title: 'fake title', contents: '' };
+    component.currentDoc = { contents: '', id: 'a/c' };
     fixture.detectChanges();
     expect(docViewerEl.innerHTML).toEqual('');
   });
@@ -149,7 +168,7 @@ describe('DocViewerComponent', () => {
       <p><aio-foo></aio-foo></p>
       <p>Below Foo</p>
     `;
-    component.currentDoc = { title: 'fake title', contents };
+    setCurrentDoc(contents);
     fixture.detectChanges();
     const fooHtml = docViewerEl.querySelector('aio-foo').innerHTML;
     expect(fooHtml).toContain('Foo Component');
@@ -165,7 +184,7 @@ describe('DocViewerComponent', () => {
       </div>
       <p>Below Foo</p>
     `;
-    component.currentDoc = { title: 'fake title', contents };
+    setCurrentDoc(contents);
     fixture.detectChanges();
     const foos = docViewerEl.querySelectorAll('aio-foo');
     expect(foos.length).toBe(2);
@@ -177,7 +196,7 @@ describe('DocViewerComponent', () => {
       <aio-bar></aio-bar>
       <p>Below Bar</p>
     `;
-    component.currentDoc = { title: 'fake title', contents };
+    setCurrentDoc(contents);
     fixture.detectChanges();
     const barHtml = docViewerEl.querySelector('aio-bar').innerHTML;
     expect(barHtml).toContain('Bar Component');
@@ -189,7 +208,7 @@ describe('DocViewerComponent', () => {
       <aio-bar>###bar content###</aio-bar>
       <p>Below Bar</p>
     `;
-    component.currentDoc = { title: 'fake title', contents };
+    setCurrentDoc(contents);
 
     // necessary to trigger projection within ngOnInit
     fixture.detectChanges();
@@ -207,7 +226,7 @@ describe('DocViewerComponent', () => {
       <p><aio-foo></aio-foo></p>
       <p>Bottom</p>
     `;
-    component.currentDoc = { title: 'fake title', contents };
+    setCurrentDoc(contents);
 
     // necessary to trigger Bar's projection within ngOnInit
     fixture.detectChanges();
@@ -230,7 +249,7 @@ describe('DocViewerComponent', () => {
       <p><aio-foo></aio-foo><p>
       <p>Bottom</p>
     `;
-    component.currentDoc = { title: 'fake title', contents };
+    setCurrentDoc(contents);
 
     // necessary to trigger Bar's projection within ngOnInit
     fixture.detectChanges();
@@ -254,7 +273,7 @@ describe('DocViewerComponent', () => {
       <p><aio-foo></aio-foo></p>
       <p>Bottom</p>
     `;
-    component.currentDoc = { title: 'fake title', contents };
+    setCurrentDoc(contents);
 
     // necessary to trigger Bar's projection within ngOnInit
     fixture.detectChanges();
@@ -282,7 +301,7 @@ describe('DocViewerComponent', () => {
       <p><aio-baz>---More baz--</aio-baz></p>
       <p>Bottom</p>
     `;
-    component.currentDoc = { title: 'fake title', contents };
+    setCurrentDoc(contents);
 
     // necessary to trigger Bar's projection within ngOnInit
     fixture.detectChanges();
@@ -298,4 +317,108 @@ describe('DocViewerComponent', () => {
       'expected 2nd Baz template content');
 
   });
+
+  describe('Title', () => {
+    let titleService: TestTitleService;
+
+    beforeEach(() => {
+      titleService = TestBed.get(Title);
+    });
+
+    it('should set the default empty title when no <h1>', () => {
+      setCurrentDoc('Some content');
+      fixture.detectChanges();
+      expect(titleService.setTitle).toHaveBeenCalledWith('Angular');
+    });
+
+    it('should set the expected title when has <h1>', () => {
+      setCurrentDoc('<h1>Features</h1>Some content');
+      fixture.detectChanges();
+      expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Features');
+    });
+
+    it('should set the expected title with a no-toc <h1>', () => {
+      setCurrentDoc('<h1 class="no-toc">Features</h1>Some content');
+      fixture.detectChanges();
+      expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Features');
+    });
+
+    it('should not include hidden content of the <h1> in the title', () => {
+      setCurrentDoc('<h1><i style="visibility: hidden">link</i>Features</h1>Some content');
+      fixture.detectChanges();
+      expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Features');
+    });
+
+    it('should fall back to `textContent` if `innerText` is not available', () => {
+      const querySelector_ = docViewerEl.querySelector;
+      spyOn(docViewerEl, 'querySelector').and.callFake((selector: string) => {
+        const elem = querySelector_.call(docViewerEl, selector);
+        Object.defineProperties(elem, {
+          innerText: { value: undefined },
+          textContent: { value: 'Text Content' }
+        });
+        return elem;
+      });
+
+      setCurrentDoc('<h1><i style="visibility: hidden">link</i>Features</h1>Some content');
+      fixture.detectChanges();
+      expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Text Content');
+    });
+  });
+
+  describe('TOC', () => {
+    let tocService: TestTocService;
+
+    function getAioToc(): HTMLElement {
+      return fixture.debugElement.nativeElement.querySelector('aio-toc');
+    }
+
+    beforeEach(() => {
+      tocService = TestBed.get(TocService);
+    });
+
+    describe('if no <h1> title', () => {
+      beforeEach(() => {
+        setCurrentDoc('Some content');
+        fixture.detectChanges();
+      });
+
+      it('should not have an <aio-toc>', () => {
+        expect(getAioToc()).toBeFalsy();
+      });
+
+      it('should reset Toc Service', () => {
+        expect(tocService.reset).toHaveBeenCalled();
+      });
+
+      it('should not call Toc Service genToc()', () => {
+        expect(tocService.genToc).not.toHaveBeenCalled();
+      });
+    });
+
+    it('should not have an <aio-toc> with a no-toc <h1>', () => {
+      setCurrentDoc('<h1 class="no-toc">Features</h1>Some content');
+      fixture.detectChanges();
+      expect(getAioToc()).toBeFalsy();
+    });
+
+    describe('when has an <h1> (title)', () => {
+      beforeEach(() => {
+        setCurrentDoc('<h1>Features</h1>Some content');
+        fixture.detectChanges();
+      });
+
+      it('should add <aio-toc>', () => {
+        expect(getAioToc()).toBeTruthy();
+      });
+
+      it('should have <aio-toc> with "embedded" class', () => {
+        expect(getAioToc().classList.contains('embedded')).toEqual(true);
+      });
+
+      it('should call Toc Service genToc()', () => {
+        expect(tocService.genToc).toHaveBeenCalled();
+      });
+    });
+  });
 });
diff --git a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
index a7e6204bc5..21da30f3bd 100644
--- a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
+++ b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
@@ -6,6 +6,8 @@ import {
 
 import { EmbeddedComponents } from 'app/embedded/embedded.module';
 import { DocumentContents } from 'app/documents/document.service';
+import { Title } from '@angular/platform-browser';
+import { TocService } from 'app/shared/toc.service';
 
 interface EmbeddedComponentFactory {
   contentPropertyName: string;
@@ -18,19 +20,13 @@ const initialDocViewerContent = initialDocViewerElement ? initialDocViewerElemen
 
 @Component({
   selector: 'aio-doc-viewer',
-  template: '',
-  styles: [ `
-    :host >>> doc-title.not-found h1 {
-      color: white;
-      background-color: red;
-    }
-  `]
+  template: ''
   // TODO(robwormald): shadow DOM and emulated don't work here (?!)
   // encapsulation: ViewEncapsulation.Native
 })
 export class DocViewerComponent implements DoCheck, OnDestroy {
 
-  private displayedDoc: DisplayedDoc;
+  private embeddedComponents: ComponentRef<any>[] = [];
   private embeddedComponentFactories: Map<string, EmbeddedComponentFactory> = new Map();
   private hostElement: HTMLElement;
 
@@ -41,7 +37,9 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
     componentFactoryResolver: ComponentFactoryResolver,
     elementRef: ElementRef,
     embeddedComponents: EmbeddedComponents,
-    private injector: Injector
+    private injector: Injector,
+    private titleService: Title,
+    private tocService: TocService
     ) {
     this.hostElement = elementRef.nativeElement;
     // Security: the initialDocViewerContent comes from the prerendered DOM and is considered to be secure
@@ -69,14 +67,14 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
    */
   private build(doc: DocumentContents) {
 
-    const displayedDoc = this.displayedDoc = new DisplayedDoc(doc);
-
     // security: the doc.content is always authored by the documentation team
     // and is considered to be safe
     this.hostElement.innerHTML = doc.contents || '';
 
     if (!doc.contents) { return; }
 
+    this.addTitleAndToc(doc.id);
+
     // TODO(i): why can't I use for-of? why doesn't typescript like Map#value() iterators?
     this.embeddedComponentFactories.forEach(({ contentPropertyName, factory }, selector) => {
       const embeddedComponentElements = this.hostElement.querySelectorAll(selector);
@@ -87,21 +85,35 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
         // security: the source of this innerHTML is always authored by the documentation team
         // and is considered to be safe
         element[contentPropertyName] = element.innerHTML;
-        displayedDoc.addEmbeddedComponent(factory.create(this.injector, [], element));
+        this.embeddedComponents.push(factory.create(this.injector, [], element));
       }
     });
   }
 
+  private addTitleAndToc(docId: string) {
+    this.tocService.reset();
+    let title = '';
+    const titleEl = this.hostElement.querySelector('h1');
+    // Only create TOC for docs with an <h1> title
+    // If you don't want a TOC, add "no-toc" class to <h1>
+    if (titleEl) {
+      title = (titleEl.innerText || titleEl.textContent).trim();
+      if (!/(no-toc|notoc)/i.test(titleEl.className)) {
+        this.tocService.genToc(this.hostElement, docId);
+        titleEl.insertAdjacentHTML('afterend', '<aio-toc class="embedded"></aio-toc>');
+      }
+    }
+    this.titleService.setTitle(title ? `Angular - ${title}` : 'Angular');
+  }
+
   ngDoCheck() {
-    if (this.displayedDoc) { this.displayedDoc.detectChanges(); }
+    this.embeddedComponents.forEach(comp => comp.changeDetectorRef.detectChanges());
   }
 
   ngOnDestroy() {
-    // destroy components otherwise there will be memory leaks
-    if (this.displayedDoc) {
-      this.displayedDoc.destroy();
-      this.displayedDoc = undefined;
-    }
+    // destroy these components else there will be memory leaks
+    this.embeddedComponents.forEach(comp => comp.destroy());
+    this.embeddedComponents.length = 0;
   }
 
   /**
@@ -129,24 +141,3 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
     }
   }
 }
-
-class DisplayedDoc {
-
-  private embeddedComponents: ComponentRef<any>[] = [];
-
-  constructor(private doc: DocumentContents) {}
-
-  addEmbeddedComponent(component: ComponentRef<any>) {
-    this.embeddedComponents.push(component);
-  }
-
-  detectChanges() {
-    this.embeddedComponents.forEach(comp => comp.changeDetectorRef.detectChanges());
-  }
-
-  destroy() {
-    // destroy components otherwise there will be memory leaks
-    this.embeddedComponents.forEach(comp => comp.destroy());
-    this.embeddedComponents.length = 0;
-  }
-}
diff --git a/aio/src/app/layout/nav-item/nav-item.component.html b/aio/src/app/layout/nav-item/nav-item.component.html
index 0fde70cbbd..799feab04f 100644
--- a/aio/src/app/layout/nav-item/nav-item.component.html
+++ b/aio/src/app/layout/nav-item/nav-item.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="!node.children">
   <a href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
-    (click)="itemClicked()" class="vertical-menu-item">
+    class="vertical-menu-item">
     {{node.title}}
   </a>
 </div>
@@ -9,17 +9,19 @@
   <a *ngIf="node.url != null" href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
     (click)="headerClicked()" class="vertical-menu-item heading">
     {{node.title}}
-    <md-icon class="rotating-icon">keyboard_arrow_right</md-icon>
+    <md-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></md-icon>
   </a>
 
-  <a *ngIf="node.url == null" [ngClass]="classes" title="{{node.tooltip}}"
-    (click)="headerClicked()" class="vertical-menu-item heading">
+  <button *ngIf="node.url == null" type="button" [ngClass]="classes" title="{{node.tooltip}}"
+    (click)="headerClicked()" class="vertical-menu-item heading"
+    [attr.aria-pressed]="isExpanded">
     {{node.title}}
-    <md-icon class="rotating-icon">keyboard_arrow_right</md-icon>
-  </a>
+    <md-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></md-icon>
+  </button>
 
   <div class="heading-children" [ngClass]="classes">
-    <aio-nav-item *ngFor="let node of node.children" [level]="level + 1"
+    <aio-nav-item *ngFor="let node of nodeChildren" [level]="level + 1" [isWide]="isWide"
+    [isParentExpanded]="isExpanded"
     [node]="node" [selectedNodes]="selectedNodes"></aio-nav-item>
   </div>
 </div>
diff --git a/aio/src/app/layout/nav-item/nav-item.component.spec.ts b/aio/src/app/layout/nav-item/nav-item.component.spec.ts
new file mode 100644
index 0000000000..59765fefaf
--- /dev/null
+++ b/aio/src/app/layout/nav-item/nav-item.component.spec.ts
@@ -0,0 +1,215 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SimpleChange, SimpleChanges, NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { NavItemComponent } from './nav-item.component';
+import { NavigationNode } from 'app/navigation/navigation.model';
+
+describe('NavItemComponent', () => {
+
+  // Testing the component class behaviors, independent of its template
+  // No dependencies. Just new it and test :)
+  // Let e2e tests verify how it displays.
+  describe('(class-only)', () => {
+
+    let component: NavItemComponent;
+
+    let selectedNodes: NavigationNode[];
+    let setClassesSpy: jasmine.Spy;
+
+    function initialize(nd: NavigationNode) {
+      component.node = nd;
+      onChanges(); // Angular calls when initializing the component
+    }
+
+    // Enough to triggers component's ngOnChange method
+    function onChanges() {
+      component.ngOnChanges();
+    }
+
+    beforeEach(() => {
+
+      component = new NavItemComponent();
+      setClassesSpy = spyOn(component, 'setClasses').and.callThrough();
+
+      // Selected nodes is the selected node and its header ancestors
+      selectedNodes = [
+        { title: 'a' },           // selected node: an item or a header
+        { title: 'parent' },      // selected node's header parent
+        { title: 'grandparent' }, // selected node's header grandparent
+      ];
+      component.selectedNodes = selectedNodes;
+    });
+
+    describe('should have expected classes when initialized', () => {
+      it('with selected node', () => {
+        initialize(selectedNodes[0]);
+        expect(component.classes).toEqual(
+          // selected node should be expanded even if is a header.
+          { 'level-1': true, collapsed: false, expanded: true, selected: true }
+        );
+      });
+
+      it('with selected node ancestor', () => {
+        initialize(selectedNodes[1]);
+        expect(component.classes).toEqual(
+          // ancestor is a header and should be expanded
+          { 'level-1': true, collapsed: false, expanded: true, selected: true }
+        );
+      });
+
+      it('with other than a selected node or ancestor', () => {
+        initialize({ title: 'x' });
+        expect(component.classes).toEqual(
+          { 'level-1': true, collapsed: true, expanded: false, selected: false }
+        );
+      });
+    });
+
+    describe('when becomes a non-selected node', () => {
+
+      // this node won't be the selected node when ngOnChanges() called
+      beforeEach(() => component.node = { title: 'x' });
+
+      it('should de-select if previously selected', () => {
+        component.isSelected = true;
+        onChanges();
+        expect(component.isSelected).toBe(false, 'becomes de-selected');
+      });
+
+      it('should collapse if previously expanded in narrow mode', () => {
+        component.isWide = false;
+        component.isExpanded = true;
+        onChanges();
+        expect(component.isExpanded).toBe(false, 'becomes collapsed');
+      });
+
+      it('should remain expanded in wide mode', () => {
+        component.isWide = true;
+        component.isExpanded = true;
+        onChanges();
+        expect(component.isExpanded).toBe(true, 'remains expanded');
+      });
+    });
+
+    describe('when becomes a selected node', () => {
+
+      // this node will be the selected node when ngOnChanges() called
+      beforeEach(() => component.node = selectedNodes[0]);
+
+      it('should select when previously not selected', () => {
+        component.isSelected = false;
+        onChanges();
+        expect(component.isSelected).toBe(true, 'becomes selected');
+      });
+
+      it('should expand the current node or keep it expanded', () => {
+        component.isExpanded = false;
+        onChanges();
+        expect(component.isExpanded).toBe(true, 'becomes true');
+
+        component.isExpanded = true;
+        onChanges();
+        expect(component.isExpanded).toBe(true, 'remains true');
+      });
+    });
+
+    describe('when becomes a selected ancestor node', () => {
+
+      // this node will be a selected node ancestor header when ngOnChanges() called
+      beforeEach(() => component.node = selectedNodes[2]);
+
+      it('should select when previously not selected', () => {
+        component.isSelected = false;
+        onChanges();
+        expect(component.isSelected).toBe(true, 'becomes selected');
+      });
+
+      it('should always expand this header', () => {
+        component.isExpanded = false;
+        onChanges();
+        expect(component.isExpanded).toBe(true, 'becomes expanded');
+
+        component.isExpanded = false;
+        onChanges();
+        expect(component.isExpanded).toBe(true, 'stays expanded');
+      });
+    });
+
+    describe('when headerClicked()', () => {
+      // current node doesn't matter in these tests.
+
+      it('should expand when headerClicked() and previously collapsed', () => {
+        component.isExpanded = false;
+        component.headerClicked();
+        expect(component.isExpanded).toBe(true, 'should be expanded');
+      });
+
+      it('should collapse when headerClicked() and previously expanded', () => {
+        component.isExpanded = true;
+        component.headerClicked();
+        expect(component.isExpanded).toBe(false, 'should be collapsed');
+      });
+
+      it('should not change isSelected when headerClicked()', () => {
+        component.isSelected = true;
+        component.headerClicked();
+        expect(component.isSelected).toBe(true, 'remains selected');
+
+        component.isSelected = false;
+        component.headerClicked();
+        expect(component.isSelected).toBe(false, 'remains not selected');
+      });
+
+      it('should set classes', () => {
+        component.headerClicked();
+        expect(setClassesSpy).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('(via TestBed)', () => {
+    let component: NavItemComponent;
+    let fixture: ComponentFixture<NavItemComponent>;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [NavItemComponent],
+        schemas: [NO_ERRORS_SCHEMA]
+      });
+      fixture = TestBed.createComponent(NavItemComponent);
+      component = fixture.componentInstance;
+      component.node = {
+        title: 'x',
+        children: [
+          { title: 'a' },
+          { title: 'b', hidden: true},
+          { title: 'c' }
+        ]
+      };
+    });
+
+    it('should not show the hidden child nav-item', () => {
+      component.ngOnChanges(); // assume component.ngOnChanges ignores arguments
+      fixture.detectChanges();
+      const children = fixture.debugElement.queryAll(By.directive(NavItemComponent));
+      expect(children.length).toEqual(2);
+    });
+
+    it('should pass the `isWide` property to all displayed child nav-items', () => {
+      component.isWide = true;
+      component.ngOnChanges(); // assume component.ngOnChanges ignores arguments
+      fixture.detectChanges();
+      let children = fixture.debugElement.queryAll(By.directive(NavItemComponent));
+      expect(children.length).toEqual(2, 'when IsWide is true');
+      children.forEach(child => expect(child.componentInstance.isWide).toBe(true));
+
+      component.isWide = false;
+      component.ngOnChanges();
+      fixture.detectChanges();
+      children = fixture.debugElement.queryAll(By.directive(NavItemComponent));
+      expect(children.length).toEqual(2, 'when IsWide is false');
+      children.forEach(child => expect(child.componentInstance.isWide).toBe(false));
+    });
+  });
+});
diff --git a/aio/src/app/layout/nav-item/nav-item.component.ts b/aio/src/app/layout/nav-item/nav-item.component.ts
index 55189fcaec..a62612f834 100644
--- a/aio/src/app/layout/nav-item/nav-item.component.ts
+++ b/aio/src/app/layout/nav-item/nav-item.component.ts
@@ -1,24 +1,36 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { NavigationNode } from 'app/navigation/navigation.service';
+import { Component, Input, OnChanges} from '@angular/core';
+import { NavigationNode } from 'app/navigation/navigation.model';
 
 @Component({
   selector: 'aio-nav-item',
   templateUrl: 'nav-item.component.html',
 })
 export class NavItemComponent implements OnChanges {
-  @Input() selectedNodes: NavigationNode[];
-  @Input() node: NavigationNode;
+  @Input() isWide = false;
   @Input() level = 1;
+  @Input() node: NavigationNode;
+  @Input() isParentExpanded = true;
+  @Input() selectedNodes: NavigationNode[];
 
   isExpanded = false;
   isSelected = false;
   classes: {[index: string]: boolean };
+  nodeChildren: NavigationNode[];
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['selectedNodes'] || changes['node']) {
-      this.isSelected = this.selectedNodes.indexOf(this.node) !== -1;
-      this.isExpanded = this.isExpanded || this.isSelected;
+  ngOnChanges() {
+    this.nodeChildren = this.node && this.node.children ? this.node.children.filter(n => !n.hidden) : [];
+
+    if (this.selectedNodes) {
+      const ix = this.selectedNodes.indexOf(this.node);
+      this.isSelected = ix !== -1; // this node is the selected node or its ancestor
+      this.isExpanded = this.isParentExpanded &&
+        (this.isSelected || // expand if selected or ...
+        // preserve expanded state when display is wide; collapse in mobile.
+        (this.isWide && this.isExpanded));
+    } else {
+      this.isSelected = false;
     }
+
     this.setClasses();
   }
 
@@ -31,11 +43,6 @@ export class NavItemComponent implements OnChanges {
     };
   }
 
-  itemClicked() {
-    this.isExpanded = true;
-    this.isSelected = !!this.node;
-  }
-
   headerClicked() {
     this.isExpanded = !this.isExpanded;
     this.setClasses();
diff --git a/aio/src/app/layout/nav-menu/nav-menu.component.spec.ts b/aio/src/app/layout/nav-menu/nav-menu.component.spec.ts
index 9ffc5c28c1..87a09145b8 100644
--- a/aio/src/app/layout/nav-menu/nav-menu.component.spec.ts
+++ b/aio/src/app/layout/nav-menu/nav-menu.component.spec.ts
@@ -1,53 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-
 import { NavMenuComponent } from './nav-menu.component';
-import { CurrentNode, NavigationService, NavigationViews, NavigationNode } from 'app/navigation/navigation.service';
+import { NavigationNode } from 'app/navigation/navigation.service';
 
-
-describe('NavMenuComponent', () => {
-  let component: NavMenuComponent;
-  let fixture: ComponentFixture<NavMenuComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NavMenuComponent ],
-      providers: [
-        {provide: NavigationService, useClass: TestNavigationService }
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NavMenuComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
+// Testing the component class behaviors, independent of its template
+// No dependencies, no life-cycle hooks. Just new it and test :)
+// Let e2e tests verify how it displays.
+describe('NavMenuComponent (class-only)', () => {
+  it('should filter out hidden nodes', () => {
+    const component = new NavMenuComponent();
+    const nodes: NavigationNode[] =
+      [ { title: 'a' }, { title: 'b', hidden: true}, { title: 'c'} ];
+    component.nodes = nodes;
+    expect(component.filteredNodes).toEqual([ nodes[0], nodes[2] ]);
   });
 });
-
-//// Test Helpers ////
-class TestNavigationService {
-  navJson = {
-    SideNav:  [
-      { title: 'a', children: [
-        { url: 'b', title: 'b', children: [
-          { url: 'c', title: 'c' },
-          { url: 'd', title: 'd' }
-        ] },
-        { url: 'e', title: 'e' }
-      ] },
-      { url: 'f', title: 'f' }
-    ]
-  };
-
-  navigationViews = new BehaviorSubject<NavigationViews>(this.navJson);
-  currentNode = new BehaviorSubject<CurrentNode>(undefined);
-}
diff --git a/aio/src/app/layout/nav-menu/nav-menu.component.ts b/aio/src/app/layout/nav-menu/nav-menu.component.ts
index e065f6548d..53194f6c96 100644
--- a/aio/src/app/layout/nav-menu/nav-menu.component.ts
+++ b/aio/src/app/layout/nav-menu/nav-menu.component.ts
@@ -4,11 +4,12 @@ import { CurrentNode, NavigationNode } from 'app/navigation/navigation.service';
 @Component({
   selector: 'aio-nav-menu',
   template: `
-  <aio-nav-item *ngFor="let node of filteredNodes" [node]="node" [selectedNodes]="currentNode.nodes">
+  <aio-nav-item *ngFor="let node of filteredNodes" [node]="node" [selectedNodes]="currentNode?.nodes" [isWide]="isWide">
   </aio-nav-item>`
 })
 export class NavMenuComponent {
   @Input() currentNode: CurrentNode;
-  @Input() nodes: NavigationNode[] ;
+  @Input() isWide = false;
+  @Input() nodes: NavigationNode[];
   get filteredNodes() { return this.nodes ? this.nodes.filter(n => !n.hidden) : []; }
 }
diff --git a/aio/src/app/layout/top-menu/top-menu.component.spec.ts b/aio/src/app/layout/top-menu/top-menu.component.spec.ts
index 906dda5ea5..c7734f5a38 100644
--- a/aio/src/app/layout/top-menu/top-menu.component.spec.ts
+++ b/aio/src/app/layout/top-menu/top-menu.component.spec.ts
@@ -9,15 +9,14 @@ describe('TopMenuComponent', () => {
   let component: TopMenuComponent;
   let fixture: ComponentFixture<TopMenuComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ TopMenuComponent ],
       providers: [
         { provide: NavigationService, useClass: TestNavigationService }
       ]
-    })
-    .compileComponents();
-  }));
+    });
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TopMenuComponent);
diff --git a/aio/src/app/navigation/navigation.model.ts b/aio/src/app/navigation/navigation.model.ts
index 4bf10d4f04..e54f175977 100644
--- a/aio/src/app/navigation/navigation.model.ts
+++ b/aio/src/app/navigation/navigation.model.ts
@@ -6,7 +6,7 @@ export interface NavigationNode {
   url?: string;
   title?: string;
   tooltip?: string;
-  hidden?: string;
+  hidden?: boolean;
   children?: NavigationNode[];
 }
 
@@ -19,15 +19,24 @@ export interface NavigationViews {
 /**
  *  Navigation information about a node at specific URL
  *  url: the current URL
- *  view: 'SideNav' | 'TopBar' | 'Footer'
+ *  view: 'SideNav' | 'TopBar' | 'Footer' | etc
  *  nodes: the current node and its ancestor nodes within that view
  */
 export interface CurrentNode {
   url: string;
-  view: 'SideNav' | 'TopBar' | 'Footer';
+  view: string;
   nodes: NavigationNode[];
 }
 
+/**
+ * A map of current nodes by view.
+ * This is needed because some urls map to nodes in more than one view.
+ * If a view does not contain a node that matches the current url then the value will be undefined.
+ */
+export interface CurrentNodes {
+  [view: string]: CurrentNode;
+}
+
 export interface VersionInfo {
   raw: string;
   major: number;
diff --git a/aio/src/app/navigation/navigation.service.spec.ts b/aio/src/app/navigation/navigation.service.spec.ts
index 873fb927e5..09e1d2dcde 100644
--- a/aio/src/app/navigation/navigation.service.spec.ts
+++ b/aio/src/app/navigation/navigation.service.spec.ts
@@ -1,14 +1,15 @@
 import { ReflectiveInjector } from '@angular/core';
 import { Http, ConnectionBackend, RequestOptions, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
 import { MockBackend } from '@angular/http/testing';
-import { CurrentNode, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
+import { CurrentNodes, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
 import { LocationService } from 'app/shared/location.service';
 import { MockLocationService } from 'testing/location.service';
-import { Logger } from 'app/shared/logger.service';
 
 describe('NavigationService', () => {
 
   let injector: ReflectiveInjector;
+  let backend: MockBackend;
+  let navService: NavigationService;
 
   function createResponse(body: any) {
     return new Response(new ResponseOptions({ body: JSON.stringify(body) }));
@@ -20,45 +21,47 @@ describe('NavigationService', () => {
         { provide: LocationService, useFactory: () => new MockLocationService('a') },
         { provide: ConnectionBackend, useClass: MockBackend },
         { provide: RequestOptions, useClass: BaseRequestOptions },
-        Http,
-        Logger
+        Http
     ]);
   });
 
+  beforeEach(() => {
+    backend = injector.get(ConnectionBackend);
+    navService = injector.get(NavigationService);
+  });
+
   it('should be creatable', () => {
-    const service: NavigationService = injector.get(NavigationService);
-    expect(service).toBeTruthy();
+    expect(navService).toBeTruthy();
   });
 
   describe('navigationViews', () => {
-    let service: NavigationService, backend: MockBackend;
-
-    beforeEach(() => {
-      backend = injector.get(ConnectionBackend);
-      service = injector.get(NavigationService);
-    });
 
     it('should make a single connection to the server', () => {
       expect(backend.connectionsArray.length).toEqual(1);
-      expect(backend.connectionsArray[0].request.url).toEqual('content/navigation.json');
+      expect(backend.connectionsArray[0].request.url).toEqual('generated/navigation.json');
     });
 
     it('should expose the server response', () => {
       const viewsEvents: NavigationViews[] = [];
-      service.navigationViews.subscribe(views => viewsEvents.push(views));
+      navService.navigationViews.subscribe(views => viewsEvents.push(views));
 
       expect(viewsEvents).toEqual([]);
       backend.connectionsArray[0].mockRespond(createResponse({ TopBar: [ { url: 'a' }] }));
       expect(viewsEvents).toEqual([{ TopBar: [ { url: 'a' }] }]);
+    });
 
+    it('navigationViews observable should complete', () => {
+      let completed = false;
+      navService.navigationViews.subscribe(null, null, () => completed = true);
+      expect(true).toBe(true, 'observable completed');
     });
 
     it('should return the same object to all subscribers', () => {
       let views1: NavigationViews;
-      service.navigationViews.subscribe(views => views1 = views);
+      navService.navigationViews.subscribe(views => views1 = views);
 
       let views2: NavigationViews;
-      service.navigationViews.subscribe(views => views2 = views);
+      navService.navigationViews.subscribe(views => views2 = views);
 
       backend.connectionsArray[0].mockRespond(createResponse({ TopBar: [{ url: 'a' }] }));
 
@@ -66,30 +69,63 @@ describe('NavigationService', () => {
       backend.connectionsArray[0].response.next(createResponse({ TopBar: [{ url: 'error 1' }] }));
 
       let views3: NavigationViews;
-      service.navigationViews.subscribe(views => views3 = views);
+      navService.navigationViews.subscribe(views => views3 = views);
 
       expect(views2).toBe(views1);
       expect(views3).toBe(views1);
     });
 
-
     it('should do WHAT(?) if the request fails');
   });
 
-  describe('currentNode', () => {
-    let service: NavigationService, location: MockLocationService;
-    let currentNode: CurrentNode;
+  describe('node.tooltip', () => {
+    let view: NavigationNode[];
 
-    const topBarNodes: NavigationNode[] = [{ url: 'features', title: 'Features' }];
+    const sideNav: NavigationNode[] = [
+      { title: 'a', tooltip: 'a tip' },
+      { title: 'b' },
+      { title: 'c!'},
+      { url: 'foo' }
+    ];
+
+    beforeEach(() => {
+      navService.navigationViews.subscribe(views => view = views['sideNav']);
+      backend.connectionsArray[0].mockRespond(createResponse({sideNav}));
+    });
+
+    it('should have the supplied tooltip', () => {
+      expect(view[0].tooltip).toEqual('a tip');
+    });
+
+    it('should create a tooltip from title + period', () => {
+      expect(view[1].tooltip).toEqual('b.');
+    });
+
+    it('should create a tooltip from title, keeping its trailing punctuation', () => {
+      expect(view[2].tooltip).toEqual('c!');
+    });
+
+    it('should not create a tooltip if there is no title', () => {
+      expect(view[3].tooltip).toBeUndefined();
+    });
+  });
+
+  describe('currentNode', () => {
+    let currentNodes: CurrentNodes;
+    let locationService: MockLocationService;
+
+    const topBarNodes: NavigationNode[] = [
+      { url: 'features', title: 'Features', tooltip: 'tip' }
+    ];
     const sideNavNodes: NavigationNode[] = [
-        { title: 'a', children: [
-          { url: 'b', title: 'b', children: [
-            { url: 'c', title: 'c' },
-            { url: 'd', title: 'd' }
+        { title: 'a', tooltip: 'tip', children: [
+          { url: 'b', title: 'b', tooltip: 'tip', children: [
+            { url: 'c', title: 'c', tooltip: 'tip' },
+            { url: 'd', title: 'd', tooltip: 'tip' }
           ] },
-          { url: 'e', title: 'e' }
+          { url: 'e', title: 'e', tooltip: 'tip' }
         ] },
-        { url: 'f', title: 'f' }
+        { url: 'f', title: 'f', tooltip: 'tip' }
       ];
 
     const navJson = {
@@ -98,108 +134,135 @@ describe('NavigationService', () => {
       __versionInfo: {}
     };
 
-
     beforeEach(() => {
-      location = injector.get(LocationService);
-
-      service = injector.get(NavigationService);
-      service.currentNode.subscribe(selected => currentNode = selected);
-
-      const backend = injector.get(ConnectionBackend);
+      locationService = injector.get(LocationService);
+      navService.currentNodes.subscribe(selected => currentNodes = selected);
       backend.connectionsArray[0].mockRespond(createResponse(navJson));
     });
 
     it('should list the side navigation node that matches the current location, and all its ancestors', () => {
-      location.urlSubject.next('b');
-      expect(currentNode).toEqual({
-        url: 'b',
-        view: 'SideNav',
-        nodes: [
-          sideNavNodes[0].children[0],
-          sideNavNodes[0]
-        ]
+      locationService.go('b');
+      expect(currentNodes).toEqual({
+        SideNav: {
+          url: 'b',
+          view: 'SideNav',
+          nodes: [
+            sideNavNodes[0].children[0],
+            sideNavNodes[0]
+          ]
+        }
       });
 
-      location.urlSubject.next('d');
-      expect(currentNode).toEqual({
-        url: 'd',
-        view: 'SideNav',
-        nodes: [
-          sideNavNodes[0].children[0].children[1],
-          sideNavNodes[0].children[0],
-          sideNavNodes[0]
-        ]
+      locationService.go('d');
+      expect(currentNodes).toEqual({
+        SideNav: {
+          url: 'd',
+          view: 'SideNav',
+          nodes: [
+            sideNavNodes[0].children[0].children[1],
+            sideNavNodes[0].children[0],
+            sideNavNodes[0]
+          ]
+        }
       });
 
-      location.urlSubject.next('f');
-      expect(currentNode).toEqual({
-        url: 'f',
-        view: 'SideNav',
-        nodes: [ sideNavNodes[1] ]
+      locationService.go('f');
+      expect(currentNodes).toEqual({
+        SideNav: {
+          url: 'f',
+          view: 'SideNav',
+          nodes: [ sideNavNodes[1] ]
+        }
       });
     });
 
     it('should be a TopBar selected node if the current location is a top menu node', () => {
-      location.urlSubject.next('features');
-      expect(currentNode).toEqual({
-        url: 'features',
-        view: 'TopBar',
-        nodes: [ topBarNodes[0] ]
+      locationService.go('features');
+      expect(currentNodes).toEqual({
+        TopBar: {
+          url: 'features',
+          view: 'TopBar',
+          nodes: [ topBarNodes[0] ]
+        }
       });
     });
 
-    it('should be a plain object if no side navigation node matches the current location', () => {
-      location.urlSubject.next('g?search=moo#anchor-1');
-      expect(currentNode).toEqual({
-        url: 'g',
-        view: '',
-        nodes: []
+    it('should be a plain object if no navigation node matches the current location', () => {
+      locationService.go('g?search=moo#anchor-1');
+      expect(currentNodes).toEqual({
+        '': {
+          url: 'g',
+          view: '',
+          nodes: []
+        }
       });
     });
 
     it('should ignore trailing slashes, hashes, and search params on URLs in the navmap', () => {
-      const cnode = {
-        url: 'c',
-        view: 'SideNav',
-        nodes: [
-          sideNavNodes[0].children[0].children[0],
-          sideNavNodes[0].children[0],
-          sideNavNodes[0]
-        ]
+      const cnode: CurrentNodes = {
+        SideNav: {
+          url: 'c',
+          view: 'SideNav',
+          nodes: [
+            sideNavNodes[0].children[0].children[0],
+            sideNavNodes[0].children[0],
+            sideNavNodes[0]
+          ]
+        }
       };
 
-      location.urlSubject.next('c');
-      expect(currentNode).toEqual(cnode, 'location: c');
+      locationService.go('c');
+      expect(currentNodes).toEqual(cnode, 'location: c');
 
-      location.urlSubject.next('c/');
-      expect(currentNode).toEqual(cnode, 'location: c/');
+      locationService.go('c#foo');
+      expect(currentNodes).toEqual(cnode, 'location: c#foo');
 
-      location.urlSubject.next('c#foo');
-      expect(currentNode).toEqual(cnode, 'location: c#foo');
+      locationService.go('c?foo=1');
+      expect(currentNodes).toEqual(cnode, 'location: c?foo=1');
 
-      location.urlSubject.next('c?foo=1');
-      expect(currentNode).toEqual(cnode, 'location: c?foo=1');
-
-      location.urlSubject.next('c#foo?bar=1&baz=2');
-      expect(currentNode).toEqual(cnode, 'location: c#foo?bar=1&baz=2');
+      locationService.go('c#foo?bar=1&baz=2');
+      expect(currentNodes).toEqual(cnode, 'location: c#foo?bar=1&baz=2');
     });
   });
 
   describe('versionInfo', () => {
-    let service: NavigationService, versionInfo: VersionInfo;
+    const expectedVersionInfo = { raw: '4.0.0' } as VersionInfo;
+    let versionInfo: VersionInfo;
 
     beforeEach(() => {
-      service = injector.get(NavigationService);
-      service.versionInfo.subscribe(info => versionInfo = info);
-
-      const backend = injector.get(ConnectionBackend);
+      navService.versionInfo.subscribe(info => versionInfo = info);
       backend.connectionsArray[0].mockRespond(createResponse({
-        __versionInfo: { raw: '4.0.0' }
+        __versionInfo: expectedVersionInfo
       }));
     });
 
     it('should extract the version info', () => {
-      expect(versionInfo).toEqual({ raw: '4.0.0' });
+      expect(versionInfo).toEqual(expectedVersionInfo);
+    });
+  });
+
+  describe('docVersions', () => {
+    let actualDocVersions: NavigationNode[];
+    let docVersions: NavigationNode[];
+    let expectedDocVersions: NavigationNode[];
+
+    beforeEach(() => {
+      actualDocVersions = [];
+      docVersions = [
+        { title: 'v4.0.0' },
+        { title: 'v2', url: 'https://v2.angular.io' }
+      ];
+
+      expectedDocVersions = docVersions.map(v => (
+        {...v, ...{ tooltip: v.title + '.'}})
+      );
+
+      navService.navigationViews.subscribe(views => actualDocVersions = views['docVersions']);
+    });
+
+    it('should extract the docVersions', () => {
+      backend.connectionsArray[0].mockRespond(createResponse({ docVersions }));
+      expect(actualDocVersions).toEqual(expectedDocVersions);
     });
   });
 });
diff --git a/aio/src/app/navigation/navigation.service.ts b/aio/src/app/navigation/navigation.service.ts
index d80c233473..3c665f4ef2 100644
--- a/aio/src/app/navigation/navigation.service.ts
+++ b/aio/src/app/navigation/navigation.service.ts
@@ -4,25 +4,18 @@ import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import { AsyncSubject } from 'rxjs/AsyncSubject';
 import { combineLatest } from 'rxjs/observable/combineLatest';
+import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/publishLast';
 import 'rxjs/add/operator/publishReplay';
 
-import { Logger } from 'app/shared/logger.service';
 import { LocationService } from 'app/shared/location.service';
+import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
 
 // Import and re-export the Navigation model types
-import { CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
-export { CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
+import { CurrentNodes, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
+export { CurrentNodes, CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
 
-const navigationPath = 'content/navigation.json';
-
-const urlParser = document.createElement('a');
-function cleanUrl(url: string) {
-  // remove hash (#) and query params (?)
-  urlParser.href = '/' + url;
-  // strip leading and trailing slashes
-  return urlParser.pathname.replace(/^\/+|\/$/g, '');
-}
+const navigationPath = CONTENT_URL_PREFIX + 'navigation.json';
 
 @Injectable()
 export class NavigationService {
@@ -41,14 +34,15 @@ export class NavigationService {
    * node (if any) that matches the current URL location
    * including its navigation view and its ancestor nodes in that view
    */
-  currentNode: Observable<CurrentNode>;
+  currentNodes: Observable<CurrentNodes>;
 
-  constructor(private http: Http, private location: LocationService, private logger: Logger) {
+  constructor(private http: Http, private location: LocationService) {
     const navigationInfo = this.fetchNavigationInfo();
+    this.navigationViews = this.getNavigationViews(navigationInfo);
+
+    this.currentNodes = this.getCurrentNodes(this.navigationViews);
     // The version information is packaged inside the navigation response to save us an extra request.
     this.versionInfo = this.getVersionInfo(navigationInfo);
-    this.navigationViews = this.getNavigationViews(navigationInfo);
-    this.currentNode = this.getCurrentNode(this.navigationViews);
   }
 
   /**
@@ -64,42 +58,52 @@ export class NavigationService {
    */
   private fetchNavigationInfo(): Observable<NavigationResponse> {
     const navigationInfo = this.http.get(navigationPath)
-             .map(res => res.json() as NavigationResponse)
-             .publishLast();
+      .map(res => res.json() as NavigationResponse)
+      .publishLast();
     navigationInfo.connect();
     return navigationInfo;
   }
 
   private getVersionInfo(navigationInfo: Observable<NavigationResponse>) {
-    const versionInfo = navigationInfo.map(response => response.__versionInfo).publishReplay(1);
+    const versionInfo = navigationInfo
+      .map(response => response.__versionInfo)
+      .publishLast();
     versionInfo.connect();
     return versionInfo;
   }
 
   private getNavigationViews(navigationInfo: Observable<NavigationResponse>): Observable<NavigationViews> {
-    const navigationViews = navigationInfo.map(response => unpluck(response, '__versionInfo')).publishReplay(1);
+    const navigationViews = navigationInfo
+      .map(response => {
+        const views = Object.assign({}, response);
+        Object.keys(views).forEach(key => {
+          if (key[0] === '_') { delete views[key]; }
+        });
+        return views as NavigationViews;
+      })
+      .publishLast();
     navigationViews.connect();
     return navigationViews;
   }
 
   /**
-   * Get an observable of the current node (the one that matches the current URL)
+   * Get an observable of the current nodes (the ones that match the current URL)
    * We use `publishReplay(1)` because otherwise subscribers will have to wait until the next
    * URL change before they receive an emission.
    * See above for discussion of using `connect`.
    */
-  private getCurrentNode(navigationViews: Observable<NavigationViews>): Observable<CurrentNode> {
-    const currentNode = combineLatest(
-      navigationViews.map(this.computeUrlToNavNodesMap),
-      this.location.currentUrl,
+  private getCurrentNodes(navigationViews: Observable<NavigationViews>): Observable<CurrentNodes> {
+    const currentNodes = combineLatest(
+      navigationViews.map(views => this.computeUrlToNavNodesMap(views)),
+      this.location.currentPath,
+
       (navMap, url) => {
-        let urlKey = cleanUrl(url);
-        urlKey = urlKey.startsWith('api/') ? 'api' : urlKey;
-        return navMap[urlKey] || { view: '', url: urlKey, nodes: [] };
+        const urlKey = url.startsWith('api/') ? 'api' : url;
+        return navMap[urlKey] || { '' : { view: '', url: urlKey, nodes: [] }};
       })
       .publishReplay(1);
-    currentNode.connect();
-    return currentNode;
+    currentNodes.connect();
+    return currentNodes;
   }
 
   /**
@@ -109,29 +113,46 @@ export class NavigationService {
    * @param navigation - A collection of navigation nodes that are to be mapped
    */
   private computeUrlToNavNodesMap(navigation: NavigationViews) {
-    const navMap = new Map<string, CurrentNode>();
+    const navMap = new Map<string, CurrentNodes>();
     Object.keys(navigation)
-      .forEach(view => navigation[view].forEach(node => walkNodes(view, node)));
+      .forEach(view => navigation[view]
+        .forEach(node => this.walkNodes(view, navMap, node)));
     return navMap;
+  }
 
-    function walkNodes(view: string, node: NavigationNode, ancestors: NavigationNode[] = []) {
-      const nodes = [node, ...ancestors];
-      const url = node.url;
-
-      // only map to this node if it has a url associated with it
-      if (url) {
-        // Strip off trailing slashes from nodes in the navMap - they are not relevant to matching
-        navMap[url.replace(/\/$/, '')] = { url, view, nodes };
-      }
-      if (node.children) {
-        node.children.forEach(child => walkNodes(view, child, nodes));
-      }
+  /**
+   * Add tooltip to node if it doesn't have one and have title.
+   * If don't want tooltip, specify `"tooltip": ""` in navigation.json
+   */
+  private ensureHasTooltip(node: NavigationNode) {
+    const title = node.title;
+    const tooltip = node.tooltip;
+    if (tooltip == null && title ) {
+      // add period if no trailing punctuation
+      node.tooltip = title + (/[a-zA-Z0-9]$/.test(title) ? '.' : '');
     }
   }
-}
+  /**
+   * Walk the nodes of a navigation tree-view,
+   * patching them and computing their ancestor nodes
+   */
+  private walkNodes(
+    view: string, navMap: Map<string, CurrentNodes>,
+    node: NavigationNode, ancestors: NavigationNode[] = []) {
+      const nodes = [node, ...ancestors];
+      const url = node.url;
+      this.ensureHasTooltip(node);
 
-function unpluck(obj: any, property: string) {
-  const result = Object.assign({}, obj);
-  delete result[property];
-  return result;
+      // only map to this node if it has a url
+      if (url) {
+        // Strip off trailing slashes from nodes in the navMap - they are not relevant to matching
+        const cleanedUrl = url.replace(/\/$/, '');
+        const navMapItem = navMap[cleanedUrl] = navMap[cleanedUrl] || {};
+        navMapItem[view] = { url, view, nodes };
+      }
+
+      if (node.children) {
+        node.children.forEach(child => this.walkNodes(view, navMap, child, nodes));
+      }
+    }
 }
diff --git a/aio/src/app/search/search-box/search-box.component.spec.ts b/aio/src/app/search/search-box/search-box.component.spec.ts
index 1f58b0c05c..234c7b62fb 100644
--- a/aio/src/app/search/search-box/search-box.component.spec.ts
+++ b/aio/src/app/search/search-box/search-box.component.spec.ts
@@ -1,82 +1,128 @@
-import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { SearchBoxComponent } from './search-box.component';
-import { SearchService } from '../search.service';
 import { MockSearchService } from 'testing/search.service';
 import { LocationService } from 'app/shared/location.service';
 import { MockLocationService } from 'testing/location.service';
 
+@Component({
+  template: '<aio-search-box (onSearch)="searchHandler($event)" (onFocus)="focusHandler($event)"></aio-search-box>'
+})
+class HostComponent {
+  searchHandler = jasmine.createSpy('searchHandler');
+  focusHandler = jasmine.createSpy('focusHandler');
+}
+
 describe('SearchBoxComponent', () => {
   let component: SearchBoxComponent;
-  let fixture: ComponentFixture<SearchBoxComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SearchBoxComponent ],
-      providers: [
-        { provide: SearchService, useFactory: () => new MockSearchService() },
-        { provide: LocationService, useFactory: () => new MockLocationService('') }
-      ]
-    })
-    .compileComponents();
-  }));
+  let host: HostComponent;
+  let fixture: ComponentFixture<HostComponent>;
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SearchBoxComponent);
-    component = fixture.componentInstance;
+    TestBed.configureTestingModule({
+      declarations: [ SearchBoxComponent, HostComponent ],
+      providers: [
+        { provide: LocationService, useFactory: () => new MockLocationService('') }
+      ]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HostComponent);
+    host = fixture.componentInstance;
+    component = fixture.debugElement.query(By.directive(SearchBoxComponent)).componentInstance;
     fixture.detectChanges();
   });
 
   describe('initialisation', () => {
-    it('should initialize the search worker', inject([SearchService], (searchService: SearchService) => {
-      fixture.detectChanges(); // triggers ngOnInit
-      expect(searchService.initWorker).toHaveBeenCalled();
-      expect(searchService.loadIndex).toHaveBeenCalled();
-    }));
-
-    it('should get the current search query from the location service', inject([LocationService], (location: MockLocationService) => {
+    it('should get the current search query from the location service',
+          inject([LocationService], (location: MockLocationService) => fakeAsync(() => {
       location.search.and.returnValue({ search: 'initial search' });
-      spyOn(component, 'onSearch');
       component.ngOnInit();
       expect(location.search).toHaveBeenCalled();
-      expect(component.onSearch).toHaveBeenCalledWith('initial search');
+      tick(300);
+      expect(host.searchHandler).toHaveBeenCalledWith('initial search');
       expect(component.searchBox.nativeElement.value).toEqual('initial search');
+    })));
+  });
+
+  describe('onSearch', () => {
+    it('should debounce by 300ms', fakeAsync(() => {
+      component.doSearch();
+      expect(host.searchHandler).not.toHaveBeenCalled();
+      tick(300);
+      expect(host.searchHandler).toHaveBeenCalled();
     }));
+
+    it('should pass through the value of the input box', fakeAsync(() => {
+      const input = fixture.debugElement.query(By.css('input'));
+      input.nativeElement.value = 'some query (input)';
+      component.doSearch();
+      tick(300);
+      expect(host.searchHandler).toHaveBeenCalledWith('some query (input)');
+    }));
+
+    it('should only send events if the search value has changed', fakeAsync(() => {
+      const input = fixture.debugElement.query(By.css('input'));
+
+      input.nativeElement.value = 'some query';
+      component.doSearch();
+      tick(300);
+      expect(host.searchHandler).toHaveBeenCalledTimes(1);
+
+      component.doSearch();
+      tick(300);
+      expect(host.searchHandler).toHaveBeenCalledTimes(1);
+
+      input.nativeElement.value = 'some other query';
+      component.doSearch();
+      tick(300);
+      expect(host.searchHandler).toHaveBeenCalledTimes(2);
+    }));
+  });
+
+  describe('on input', () => {
+    it('should trigger a search', () => {
+      const input = fixture.debugElement.query(By.css('input'));
+      spyOn(component, 'doSearch');
+      input.triggerEventHandler('input', { });
+      expect(component.doSearch).toHaveBeenCalled();
+    });
   });
 
   describe('on keyup', () => {
-    it('should call the search service, if it is not triggered by the ESC key', inject([SearchService], (search: MockSearchService) => {
+    it('should trigger a search', () => {
       const input = fixture.debugElement.query(By.css('input'));
-      input.triggerEventHandler('keyup', { target: { value: 'some query' } });
-      expect(search.search).toHaveBeenCalledWith('some query');
-    }));
-
-    it('should not call the search service if it is triggered by the ESC key', inject([SearchService], (search: MockSearchService) => {
-      const input = fixture.debugElement.query(By.css('input'));
-      input.triggerEventHandler('keyup', { target: { value: 'some query' }, which: 27 });
-      expect(search.search).not.toHaveBeenCalled();
-    }));
-
-    it('should set the search part of the browser location', inject([LocationService], (location: MockLocationService) => {
-      const input = fixture.debugElement.query(By.css('input'));
-      input.triggerEventHandler('keyup', { target: { value: 'some query' } });
-      expect(location.setSearch).toHaveBeenCalledWith('Full Text Search', { search: 'some query' });
-    }));
+      spyOn(component, 'doSearch');
+      input.triggerEventHandler('keyup', { });
+      expect(component.doSearch).toHaveBeenCalled();
+    });
   });
 
   describe('on focus', () => {
-    it('should call the search service on focus', inject([SearchService], (search: SearchService) => {
+    it('should trigger the onFocus event', () => {
       const input = fixture.debugElement.query(By.css('input'));
-      input.triggerEventHandler('focus', { target: { value: 'some query' } });
-      expect(search.search).toHaveBeenCalledWith('some query');
-    }));
+      input.nativeElement.value = 'some query (focus)';
+      input.triggerEventHandler('focus', { });
+      expect(host.focusHandler).toHaveBeenCalledWith('some query (focus)');
+    });
   });
 
   describe('on click', () => {
-    it('should call the search service on click', inject([SearchService], (search: SearchService) => {
+    it('should trigger a search', () => {
       const input = fixture.debugElement.query(By.css('input'));
-      input.triggerEventHandler('click', { target: { value: 'some query'}});
-      expect(search.search).toHaveBeenCalledWith('some query');
-    }));
+      spyOn(component, 'doSearch');
+      input.triggerEventHandler('click', { });
+      expect(component.doSearch).toHaveBeenCalled();
+    });
+  });
+
+  describe('focus', () => {
+    it('should set the focus to the input box', () => {
+      const input = fixture.debugElement.query(By.css('input'));
+      component.focus();
+      expect(document.activeElement).toBe(input.nativeElement);
+    });
   });
 });
diff --git a/aio/src/app/search/search-box/search-box.component.ts b/aio/src/app/search/search-box/search-box.component.ts
index aeb744b71e..7ef3149636 100644
--- a/aio/src/app/search/search-box/search-box.component.ts
+++ b/aio/src/app/search/search-box/search-box.component.ts
@@ -1,13 +1,12 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import { SearchService } from 'app/search/search.service';
+import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
 import { LocationService } from 'app/shared/location.service';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/distinctUntilChanged';
 
 /**
  * This component provides a text box to type a search query that will be sent to the SearchService.
  *
- * Whatever is typed in this box will be placed in the browser address bar as `?search=...`.
- *
- * When you arrive at a page containing this component, it will retrieve the query from the browser
+ * When you arrive at a page containing this component, it will retrieve the `query` from the browser
  * address bar. If there is a query then this will be made.
  *
  * Focussing on the input box will resend whatever query is there. This can be useful if the search
@@ -17,34 +16,48 @@ import { LocationService } from 'app/shared/location.service';
 @Component({
   selector: 'aio-search-box',
   template: `<input #searchBox
+    type="search"
+    aria-label="search"
     placeholder="Search"
-    (keyup)="onSearch($event.target.value, $event.which)"
-    (focus)="onSearch($event.target.value)"
-    (click)="onSearch($event.target.value)">`
+    (input)="doSearch()"
+    (keyup)="doSearch()"
+    (focus)="doFocus()"
+    (click)="doSearch()">`
 })
 export class SearchBoxComponent implements OnInit {
 
+  private searchDebounce = 300;
+  private searchSubject = new Subject<string>();
+
   @ViewChild('searchBox') searchBox: ElementRef;
+  @Output() onSearch = this.searchSubject.distinctUntilChanged().debounceTime(this.searchDebounce);
+  @Output() onFocus = new EventEmitter<string>();
 
-  constructor(private searchService: SearchService, private locationService: LocationService) { }
+  constructor(private locationService: LocationService) { }
 
+  /**
+   * When we first show this search box we trigger a search if there is a search query in the URL
+   */
   ngOnInit() {
-    this.searchService.initWorker('app/search/search-worker.js');
-    this.searchService.loadIndex();
-
     const query = this.locationService.search()['search'];
     if (query) {
-      this.searchBox.nativeElement.value = query;
-      this.onSearch(query);
+      this.query = query;
+      this.doSearch();
     }
   }
 
-  onSearch(query: string, keyCode?: number) {
-    if (keyCode === 27) {
-      // Ignore escape key
-      return;
-    }
-    this.locationService.setSearch('Full Text Search', { search: query });
-    this.searchService.search(query);
+  doSearch() {
+    this.searchSubject.next(this.query);
   }
+
+  doFocus() {
+    this.onFocus.emit(this.query);
+  }
+
+  focus() {
+    this.searchBox.nativeElement.focus();
+  }
+
+  private get query() { return this.searchBox.nativeElement.value; }
+  private set query(value: string) { this.searchBox.nativeElement.value = value; }
 }
diff --git a/aio/src/app/search/search-results/search-results.component.html b/aio/src/app/search/search-results/search-results.component.html
index 2fcfb940a3..fedce7b829 100644
--- a/aio/src/app/search/search-results/search-results.component.html
+++ b/aio/src/app/search/search-results/search-results.component.html
@@ -1,9 +1,28 @@
-<div class="search-results" *ngIf="(searchAreas | async)?.length > 0" >
-  <div class="search-area" *ngFor="let area of searchAreas | async">
-    <h2>{{area.name}}</h2>
-    <div class="search-page" *ngFor="let page of area.pages">
-      <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
-    </div>
-  </div>
+<div class="search-results">
+  <div *ngIf="searchAreas.length; then searchResults; else notFound"></div>
 </div>
 
+<ng-template #searchResults>
+  <h2 class="visually-hidden">Search Results</h2>
+  <div class="search-area" *ngFor="let area of searchAreas">
+    <h3>{{area.name}} ({{area.pages.length + area.priorityPages.length}})</h3>
+    <ul class="priority-pages" >
+      <li class="search-page" *ngFor="let page of area.priorityPages">
+        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page, $event)">
+          <span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>{{ page.title }}
+        </a>
+      </li>
+    </ul>
+    <ul>
+      <li class="search-page" *ngFor="let page of area.pages">
+        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page, $event)">
+          <span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>{{ page.title }}
+        </a>
+      </li>
+    </ul>
+  </div>
+</ng-template>
+
+<ng-template #notFound>
+  <p>{{notFoundMessage}}</p>
+</ng-template>
diff --git a/aio/src/app/search/search-results/search-results.component.spec.ts b/aio/src/app/search/search-results/search-results.component.spec.ts
index 14b37e9d36..eb46dd85d4 100644
--- a/aio/src/app/search/search-results/search-results.component.spec.ts
+++ b/aio/src/app/search/search-results/search-results.component.spec.ts
@@ -1,3 +1,4 @@
+import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Observable } from 'rxjs/Observable';
@@ -9,103 +10,179 @@ import { MockSearchService } from 'testing/search.service';
 describe('SearchResultsComponent', () => {
   let component: SearchResultsComponent;
   let fixture: ComponentFixture<SearchResultsComponent>;
-  let searchService: SearchService;
   let searchResults: Subject<SearchResults>;
-  let currentAreas: SearchArea[];
 
-  beforeEach(async(() => {
+  /** Get all text from component element */
+  function getText() { return fixture.debugElement.nativeElement.textContent; }
+
+  /** Get a full set of test results. "Take" what you need */
+  function getTestResults(take?: number) {
+    const results: SearchResult[] = [
+      { path: 'guide/a', title: 'Guide A' },
+      { path: 'api/d', title: 'API D' },
+      { path: 'guide/b', title: 'Guide B' },
+      { path: 'guide/a/c', title: 'Guide A - C' },
+      { path: 'api/c', title: 'API C' }
+    ]
+    // fill it out to exceed 10 guide pages
+    .concat('nmlkjihgfe'.split('').map(l => {
+      return { path: 'guide/' + l, title: 'Guide ' + l};
+    }))
+    // add these empty fields to satisfy interface
+    .map(r => ({...{ keywords: '', titleWords: '', type: '' }, ...r }));
+
+    return take === undefined ? results : results.slice(0, take);
+  }
+
+  function compareTitle(l: {title: string}, r: {title: string}) {
+    return l.title.toUpperCase() > r.title.toUpperCase() ? 1 : -1;
+  }
+
+
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ SearchResultsComponent ],
       providers: [
         { provide: SearchService, useFactory: () => new MockSearchService() }
       ]
-    })
-    .compileComponents();
-  }));
+    });
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SearchResultsComponent);
     component = fixture.componentInstance;
-    searchService = fixture.debugElement.injector.get(SearchService);
-    searchResults = searchService.searchResults as Subject<SearchResults>;
+    searchResults = TestBed.get(SearchService).searchResults;
     fixture.detectChanges();
-    component.searchAreas.subscribe(areas => currentAreas = areas);
   });
 
   it('should map the search results into groups based on their containing folder', () => {
-    const results = [
-      {path: 'guide/a', title: 'Guide A', type: 'content', keywords: '', titleWords: '' },
-      {path: 'guide/b', title: 'Guide B', type: 'content', keywords: '', titleWords: '' },
-      {path: 'api/c', title: 'API C', type: 'class', keywords: '', titleWords: '' },
-      {path: 'guide/b/c', title: 'Guide B - C', type: 'content', keywords: '', titleWords: '' },
-    ];
+    const results = getTestResults(3);
 
     searchResults.next({ query: '', results: results});
-    expect(currentAreas).toEqual([
-      { name: 'guide', pages: [
-        { path: 'guide/a', title: 'Guide A', type: 'content', keywords: '', titleWords: '' },
-        { path: 'guide/b', title: 'Guide B', type: 'content', keywords: '', titleWords: '' },
-        { path: 'guide/b/c', title: 'Guide B - C', type: 'content', keywords: '', titleWords: '' }
-      ] },
-      { name: 'api', pages: [
-        { path: 'api/c', title: 'API C', type: 'class', keywords: '', titleWords: '' }
-      ] }
+    expect(component.searchAreas).toEqual([
+      { name: 'api', priorityPages: [
+        { path: 'api/d', title: 'API D', type: '', keywords: '', titleWords: '' }
+      ], pages: [] },
+      { name: 'guide', priorityPages: [
+        { path: 'guide/a', title: 'Guide A', type: '', keywords: '', titleWords: '' },
+        { path: 'guide/b', title: 'Guide B', type: '', keywords: '', titleWords: '' },
+      ], pages: [] }
     ]);
   });
 
-  it('should put search results with no containing folder into the default area (Other)', () => {
+  it('should special case results that are top level folders', () => {
+    searchResults.next({ query: '', results: [
+      { path: 'tutorial', title: 'Tutorial index', type: '', keywords: '', titleWords: '' },
+      { path: 'tutorial/toh-pt1', title: 'Tutorial - part 1', type: '', keywords: '', titleWords: '' },
+    ]});
+    expect(component.searchAreas).toEqual([
+      { name: 'tutorial', priorityPages: [
+        { path: 'tutorial', title: 'Tutorial index', type: '', keywords: '', titleWords: '' },
+        { path: 'tutorial/toh-pt1', title: 'Tutorial - part 1', type: '', keywords: '', titleWords: '' },
+      ], pages: [] }
+    ]);
+  });
+
+  it('should put first 5 results for each area into priorityPages', () => {
+    const results = getTestResults();
+    searchResults.next({ query: '', results: results });
+    expect(component.searchAreas[0].priorityPages).toEqual(results.filter(p => p.path.startsWith('api')).slice(0, 5));
+    expect(component.searchAreas[1].priorityPages).toEqual(results.filter(p => p.path.startsWith('guide')).slice(0, 5));
+  });
+
+  it('should put the nonPriorityPages into the pages array, sorted by title', () => {
+    const results = getTestResults();
+    searchResults.next({ query: '', results: results });
+    expect(component.searchAreas[0].pages).toEqual([]);
+    expect(component.searchAreas[1].pages).toEqual(results.filter(p => p.path.startsWith('guide')).slice(5).sort(compareTitle));
+  });
+
+  it('should put a total count in the header of each area of search results', () => {
+    const results = getTestResults();
+    searchResults.next({ query: '', results: results });
+    fixture.detectChanges();
+    const headers = fixture.debugElement.queryAll(By.css('h3'));
+    expect(headers.length).toEqual(2);
+    expect(headers[0].nativeElement.textContent).toContain('(2)');
+    expect(headers[1].nativeElement.textContent).toContain('(13)');
+  });
+
+  it('should put search results with no containing folder into the default area (other)', () => {
     const results = [
-      {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
+      { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
     ];
 
     searchResults.next({ query: '', results: results });
-    expect(currentAreas).toEqual([
-      { name: 'Other', pages: [
+    expect(component.searchAreas).toEqual([
+      { name: 'other', priorityPages: [
         { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
-      ] }
+      ], pages: [] }
     ]);
   });
 
-  it('should emit an "resultSelected" event when a search result anchor is clicked', () => {
-    let selectedResult: SearchResult;
-    component.resultSelected.subscribe((result: SearchResult) => selectedResult = result);
+  it('should omit search results with no title', () => {
     const results = [
-      {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
+      { path: 'news', title: undefined, type: 'marketing', keywords: '', titleWords: '' }
     ];
 
-    searchResults.next({ query: '', results: results });
-    fixture.detectChanges();
-    const anchor = fixture.debugElement.query(By.css('a'));
-
-    anchor.triggerEventHandler('click', {});
-    expect(selectedResult).toEqual({path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' });
+    searchResults.next({ query: 'something', results: results });
+    expect(component.searchAreas).toEqual([]);
   });
 
-  it('should clear the results when a search result is clicked', () => {
-    const results = [
-      {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
-    ];
-
-    searchResults.next({ query: '', results: results });
+  it('should display "Searching ..." while waiting for search results', () => {
     fixture.detectChanges();
-    const anchor = fixture.debugElement.query(By.css('a'));
-    anchor.triggerEventHandler('click', {});
-
-    fixture.detectChanges();
-    expect(fixture.debugElement.queryAll(By.css('a'))).toEqual([]);
+    expect(getText()).toContain('Searching ...');
   });
 
-  describe('hideResults', () => {
-    it('should clear the results', () => {
-      const results = [
-        {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }
-      ];
+  describe('when a search result anchor is clicked', () => {
+    let searchResult: SearchResult;
+    let selected: SearchResult;
+    let anchor: DebugElement;
+
+    beforeEach(() => {
+      component.resultSelected.subscribe(result => selected = result);
+
+      selected = null;
+      searchResult = { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' };
+      searchResults.next({ query: 'something', results: [searchResult] });
 
-      searchResults.next({ query: '', results: results });
       fixture.detectChanges();
-      component.hideResults();
+      anchor = fixture.debugElement.query(By.css('a'));
+
+      expect(selected).toBeNull();
+    });
+
+    it('should emit a "resultSelected" event', () => {
+      anchor.triggerEventHandler('click', {button: 0, ctrlKey: false, metaKey: false});
       fixture.detectChanges();
-      expect(fixture.debugElement.queryAll(By.css('a'))).toEqual([]);
+      expect(selected).toBe(searchResult);
+    });
+
+    it('should not emit an event if mouse button is not zero (middle or right)', () => {
+      anchor.triggerEventHandler('click', {button: 1, ctrlKey: false, metaKey: false});
+      fixture.detectChanges();
+      expect(selected).toBeNull();
+    });
+
+    it('should not emit an event if the `ctrl` key is pressed', () => {
+      anchor.triggerEventHandler('click', {button: 0, ctrlKey: true, metaKey: false});
+      fixture.detectChanges();
+      expect(selected).toBeNull();
+    });
+
+    it('should not emit an event if the `meta` key is pressed', () => {
+      anchor.triggerEventHandler('click', {button: 0, ctrlKey: false, metaKey: true});
+      fixture.detectChanges();
+      expect(selected).toBeNull();
     });
   });
+
+  describe('when no query results', () => {
+    it('should display "not found" message', () => {
+      searchResults.next({ query: 'something', results: [] });
+      fixture.detectChanges();
+      expect(getText()).toContain('No results');
+    });
+  });
+
 });
diff --git a/aio/src/app/search/search-results/search-results.component.ts b/aio/src/app/search/search-results/search-results.component.ts
index 8f2a189bcd..d3e7407d68 100644
--- a/aio/src/app/search/search-results/search-results.component.ts
+++ b/aio/src/app/search/search-results/search-results.component.ts
@@ -1,11 +1,13 @@
-import { Component, ChangeDetectionStrategy, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
-import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { Component, EventEmitter, HostListener, OnDestroy, OnInit, Output } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
 
 import { SearchResult, SearchResults, SearchService } from '../search.service';
 
 export interface SearchArea {
   name: string;
   pages: SearchResult[];
+  priorityPages: SearchResult[];
 }
 
 /**
@@ -14,59 +16,74 @@ export interface SearchArea {
 @Component({
   selector: 'aio-search-results',
   templateUrl: './search-results.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SearchResultsComponent implements OnInit {
+export class SearchResultsComponent implements OnInit, OnDestroy {
 
-  readonly defaultArea = 'Other';
-
-  showResults = false;
+  private resultsSubscription: Subscription;
+  readonly defaultArea = 'other';
+  notFoundMessage = 'Searching ...';
+  readonly topLevelFolders = ['guide', 'tutorial'];
 
+  /**
+   * Emitted when the user selects a search result
+   */
   @Output()
   resultSelected = new EventEmitter<SearchResult>();
 
   /**
    * A mapping of the search results grouped into areas
    */
-  searchAreas = new ReplaySubject<SearchArea[]>(1);
+  searchAreas: SearchArea[] = [];
 
   constructor(private searchService: SearchService) {}
 
   ngOnInit() {
-    this.searchService.searchResults.subscribe(search => this.searchAreas.next(this.processSearchResults(search)));
+    this.resultsSubscription = this.searchService.searchResults
+        .subscribe(search => this.searchAreas = this.processSearchResults(search));
   }
 
-  onResultSelected(result: SearchResult) {
-    this.resultSelected.emit(result);
-    this.hideResults();
+  ngOnDestroy() {
+    this.resultsSubscription.unsubscribe();
   }
 
-  @HostListener('document:keyup', ['$event.which'])
-  onKeyUp(keyCode: number) {
-    if (keyCode === 27) {
-      this.hideResults();
+  onResultSelected(page: SearchResult, event: MouseEvent) {
+    // Emit a `resultSelected` event if the result is to be displayed on this page.
+    if (event.button === 0 && !event.ctrlKey && !event.metaKey) {
+      this.resultSelected.emit(page);
     }
   }
 
-  hideResults() {
-    this.searchAreas.next([]);
-  }
-
   // Map the search results into groups by area
   private processSearchResults(search: SearchResults) {
-    this.showResults = true;
+    this.notFoundMessage = 'No results found.';
     const searchAreaMap = {};
     search.results.forEach(result => {
+      if (!result.title) { return; } // bad data; should fix
       const areaName = this.computeAreaName(result) || this.defaultArea;
       const area = searchAreaMap[areaName] = searchAreaMap[areaName] || [];
       area.push(result);
     });
-    return Object.keys(searchAreaMap).map(name => ({ name, pages: searchAreaMap[name] }));
+    const keys = Object.keys(searchAreaMap).sort((l, r) => l > r ? 1 : -1);
+    return keys.map(name => {
+      let pages: SearchResult[] = searchAreaMap[name];
+
+      // Extract the top 5 most relevant results as priorityPages
+      const priorityPages = pages.splice(0, 5);
+      pages = pages.sort(compareResults);
+      return { name, pages, priorityPages };
+    });
   }
 
   // Split the search result path and use the top level folder, if there is one, as the area name.
   private computeAreaName(result: SearchResult) {
+    if (this.topLevelFolders.indexOf(result.path) !== -1) {
+      return result.path;
+    }
     const [areaName, rest] = result.path.split('/', 2);
     return rest && areaName;
   }
 }
+
+function compareResults(l: {title: string}, r: {title: string}) {
+  return l.title.toUpperCase() > r.title.toUpperCase() ? 1 : -1;
+}
diff --git a/aio/src/app/search/search-worker.js b/aio/src/app/search/search-worker.js
index 1e5c5d3b04..85d112bbca 100644
--- a/aio/src/app/search/search-worker.js
+++ b/aio/src/app/search/search-worker.js
@@ -3,23 +3,26 @@
 /* eslint-env worker */
 /* global importScripts, lunr */
 
-var SEARCH_TERMS_URL = '/content/docs/app/search-data.json';
+var SEARCH_TERMS_URL = '/generated/docs/app/search-data.json';
 
-importScripts('https://unpkg.com/lunr@0.7.2');
+// NOTE: This needs to be kept in sync with `ngsw-manifest.json`.
+importScripts('/assets/js/lunr.min.js');
 
-var index = createIndex();
+var index;
 var pages = {};
 
 self.onmessage = handleMessage;
 
 // Create the lunr index - the docs should be an array of objects, each object containing
 // the path and search terms for a page
-function createIndex() {
+function createIndex(addFn) {
   return lunr(/** @this */function() {
     this.ref('path');
-    this.field('titleWords', {boost: 50});
+    this.field('titleWords', {boost: 100});
+    this.field('headingWords', {boost: 50});
     this.field('members', {boost: 40});
     this.field('keywords', {boost: 20});
+    addFn(this);
   });
 }
 
@@ -31,7 +34,7 @@ function handleMessage(message) {
   switch(type) {
     case 'load-index':
       makeRequest(SEARCH_TERMS_URL, function(searchInfo) {
-        loadIndex(searchInfo);
+        index = createIndex(loadIndex(searchInfo));
         self.postMessage({type: type, id: id, payload: true});
       });
       break;
@@ -66,16 +69,19 @@ function makeRequest(url, callback) {
 
 // Create the search index from the searchInfo which contains the information about each page to be indexed
 function loadIndex(searchInfo) {
-  // Store the pages data to be used in mapping query results back to pages
-  // Add search terms from each page to the search index
-  searchInfo.forEach(function(page) {
-    index.add(page);
-    pages[page.path] = page;
-  });
+  return function(index) {
+    // Store the pages data to be used in mapping query results back to pages
+    // Add search terms from each page to the search index
+    searchInfo.forEach(function(page) {
+      index.add(page);
+      pages[page.path] = page;
+    });
+  };
 }
 
 // Query the index and return the processed results
 function queryIndex(query) {
+  var results = index.search(query);
   // Only return the array of paths to pages
-  return index.search(query).map(function(hit) { return pages[hit.ref]; });
+  return results.map(function(hit) { return pages[hit.ref]; });
 }
diff --git a/aio/src/app/search/search.service.spec.ts b/aio/src/app/search/search.service.spec.ts
index f92dcb3ba8..daa596580d 100644
--- a/aio/src/app/search/search.service.spec.ts
+++ b/aio/src/app/search/search.service.spec.ts
@@ -1,24 +1,62 @@
 import { ReflectiveInjector, NgZone } from '@angular/core';
+import { fakeAsync, tick } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
 import { SearchService } from './search.service';
+import { WebWorkerClient } from 'app/shared/web-worker';
 
 describe('SearchService', () => {
 
   let injector: ReflectiveInjector;
+  let service: SearchService;
+  let sendMessageSpy: jasmine.Spy;
+  let mockWorker: WebWorkerClient;
 
   beforeEach(() => {
+    sendMessageSpy = jasmine.createSpy('sendMessage').and.returnValue(Observable.of({}));
+    mockWorker = { sendMessage: sendMessageSpy } as any;
+    spyOn(WebWorkerClient, 'create').and.returnValue(mockWorker);
+
     injector = ReflectiveInjector.resolveAndCreate([
         SearchService,
         { provide: NgZone, useFactory: () => new NgZone({ enableLongStackTrace: false }) }
     ]);
+    service = injector.get(SearchService);
   });
 
-  describe('loadIndex', () => {
-    it('should send a "load-index" message to the worker');
-    it('should connect the `ready` property to the response to the "load-index" message');
+  describe('initWorker', () => {
+    it('should create the worker and load the index after the specified delay', fakeAsync(() => {
+      service.initWorker('some/url', 100);
+      expect(WebWorkerClient.create).not.toHaveBeenCalled();
+      expect(mockWorker.sendMessage).not.toHaveBeenCalled();
+      tick(100);
+      expect(WebWorkerClient.create).toHaveBeenCalledWith('some/url', jasmine.any(NgZone));
+      expect(mockWorker.sendMessage).toHaveBeenCalledWith('load-index');
+    }));
   });
 
   describe('search', () => {
-    it('should send a "query-index" message to the worker');
-    it('should push the response to the `searchResults` observable');
+    beforeEach(() => {
+      // We must initialize the service before calling search
+      service.initWorker('some/url', 100);
+    });
+
+    it('should trigger a `loadIndex` synchronously', () => {
+      service.search('some query');
+      expect(mockWorker.sendMessage).toHaveBeenCalledWith('load-index');
+    });
+
+    it('should send a "query-index" message to the worker', () => {
+      service.search('some query');
+      expect(mockWorker.sendMessage).toHaveBeenCalledWith('query-index', 'some query');
+    });
+
+    it('should push the response to the `searchResults` observable', () => {
+      const mockSearchResults = { results: ['a', 'b'] };
+      (mockWorker.sendMessage as jasmine.Spy).and.returnValue(Observable.of(mockSearchResults));
+      let searchResults: any;
+      service.searchResults.subscribe(results => searchResults = results);
+      service.search('some query');
+      expect(searchResults).toEqual(mockSearchResults);
+    });
   });
 });
diff --git a/aio/src/app/search/search.service.ts b/aio/src/app/search/search.service.ts
index 7a34109c24..8bb0a788f0 100644
--- a/aio/src/app/search/search.service.ts
+++ b/aio/src/app/search/search.service.ts
@@ -6,9 +6,11 @@ can be found in the LICENSE file at http://angular.io/license
 
 import { NgZone, Injectable, Type } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/publishLast';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+import 'rxjs/add/observable/race';
+import 'rxjs/add/observable/timer';
 import 'rxjs/add/operator/concatMap';
+import 'rxjs/add/operator/publish';
 import { WebWorkerClient } from 'app/shared/web-worker';
 
 export interface SearchResults {
@@ -27,26 +29,50 @@ export interface SearchResult {
 
 @Injectable()
 export class SearchService {
-  private worker: WebWorkerClient;
-  private ready: Observable<boolean>;
-  private resultsSubject = new Subject<SearchResults>();
-  get searchResults() { return this.resultsSubject.asObservable(); }
+  private searchesSubject = new ReplaySubject<string>(1);
+  searchResults: Observable<SearchResults>;
 
   constructor(private zone: NgZone) {}
 
-  initWorker(workerUrl) {
-    this.worker = new WebWorkerClient(new Worker(workerUrl), this.zone);
-  }
-
-  loadIndex() {
-    const ready = this.ready = this.worker.sendMessage<boolean>('load-index').publishLast();
-    // trigger the index to be loaded immediately
-    ready.connect();
+  /**
+   * Initialize the search engine. We offer an `initDelay` to prevent the search initialisation from delaying the
+   * initial rendering of the web page. Triggering a search will override this delay and cause the index to be
+   * loaded immediately.
+   *
+   * @param workerUrl the url of the WebWorker script that runs the searches
+   * @param initDelay the number of milliseconds to wait before we load the WebWorker and generate the search index
+   */
+  initWorker(workerUrl: string, initDelay: number) {
+    const searchResults = Observable
+      // Wait for the initDelay or the first search
+      .race(
+        Observable.timer(initDelay),
+        this.searchesSubject.first()
+      )
+      .concatMap(() => {
+        // Create the worker and load the index
+        const worker = WebWorkerClient.create(workerUrl, this.zone);
+        return worker.sendMessage('load-index').concatMap(() =>
+          // Once the index has loaded, switch to listening to the searches coming in
+          this.searchesSubject.switchMap((query) =>
+            // Each search gets switched to a web worker message, whose results are returned via an observable
+            worker.sendMessage<SearchResults>('query-index', query)
+          )
+        );
+      }).publish();
+
+      // Connect to the observable to kick off the timer
+    searchResults.connect();
+
+    // Expose the connected observable to the rest of the world
+    this.searchResults = searchResults;
   }
 
+  /**
+   * Send a search query to the index.
+   * The results will appear on the `searchResults` observable.
+   */
   search(query: string) {
-    this.ready.concatMap(ready => {
-      return this.worker.sendMessage('query-index', query) as Observable<SearchResults>;
-    }).subscribe(results => this.resultsSubject.next(results));
+    this.searchesSubject.next(query);
   }
 }
diff --git a/aio/src/app/shared/attribute-utils.spec.ts b/aio/src/app/shared/attribute-utils.spec.ts
new file mode 100644
index 0000000000..b8d4c883eb
--- /dev/null
+++ b/aio/src/app/shared/attribute-utils.spec.ts
@@ -0,0 +1,147 @@
+import { ElementRef } from '@angular/core';
+
+import { getAttrs, getAttrValue, getBoolFromAttribute, boolFromValue } from './attribute-utils';
+
+describe('Attribute Utilities', () => {
+  let testEl: HTMLElement;
+
+  beforeEach(() => {
+    const div = document.createElement('div');
+    div.innerHTML = `<div a b="true" c="false" D="foo" d-E></div>`;
+    testEl = div.querySelector('div');
+  });
+
+  describe('getAttrs', () => {
+
+    beforeEach(() => {
+      this.expectedMap = {
+        a: '',
+        b: 'true',
+        c: 'false',
+        d: 'foo',
+        'd-e': ''
+      };
+    });
+
+    it('should get attr map from getAttrs(element)', () => {
+      const actual = getAttrs(testEl);
+      expect(actual).toEqual(this.expectedMap);
+    });
+
+    it('should get attr map from getAttrs(elementRef)', () => {
+      const actual = getAttrs(new ElementRef(testEl));
+      expect(actual).toEqual(this.expectedMap);
+    });
+  });
+
+  describe('getAttrValue', () => {
+    let attrMap: { [index: string]: string };
+
+    beforeEach(() => {
+      attrMap = getAttrs(testEl);
+    });
+
+    it('should return empty string value for attribute "a"', () => {
+      expect(getAttrValue(attrMap, 'a')).toBe('');
+    });
+
+    it('should return empty string value for attribute "A"', () => {
+      expect(getAttrValue(attrMap, 'A')).toBe('');
+    });
+
+    it('should return "true" for attribute "b"', () => {
+      expect(getAttrValue(attrMap, 'b')).toBe('true');
+    });
+
+    it('should return empty string value for attribute "d-E"', () => {
+      expect(getAttrValue(attrMap, 'd-E')).toBe('');
+    });
+
+    it('should return empty string for attribute ["d-e"]', () => {
+      expect(getAttrValue(attrMap, ['d-e'])).toBe('');
+    });
+
+    it('should return "foo" for attribute ["d", "d-e"]', () => {
+      // because d will be found before d-e
+      expect(getAttrValue(attrMap, ['d', 'd-e'])).toBe('foo');
+    });
+
+    it('should return empty string for attribute ["d-e", "d"]', () => {
+      // because d-e will be found before d
+      expect(getAttrValue(attrMap, ['d-e', 'd'])).toBe('');
+    });
+
+    it('should return undefined value for non-existent attribute "x"', () => {
+      expect(getAttrValue(attrMap, 'x')).toBeUndefined();
+    });
+
+    it('should return undefined if no argument', () => {
+      expect(getAttrValue(attrMap)).toBeUndefined();
+    });
+
+  });
+
+  describe('boolFromValue', () => {
+
+    it('should return true for "" as in present but unassigned attr "a"', () => {
+      expect(boolFromValue('')).toBe(true);
+    });
+
+    it('should return false for "false" as in attr "c"', () => {
+      expect(boolFromValue('false')).toBe(false);
+    });
+    it('should return true for "true" as in attr "b"', () => {
+      expect(boolFromValue('true')).toBe(true);
+    });
+
+    it('should return true for something other than "false"', () => {
+      expect(boolFromValue('foo')).toBe(true);
+    });
+
+    it('should return true for "False" because case-sensitive', () => {
+      expect(boolFromValue('False')).toBe(true);
+    });
+
+
+    it('should return false by default as in undefined attr "x"', () => {
+      expect(boolFromValue(undefined)).toBe(false);
+    });
+
+    it('should return true for undefined value when default is true', () => {
+      expect(boolFromValue(undefined, true)).toBe(true);
+    });
+
+    it('should return false for undefined value when default is false', () => {
+      expect(boolFromValue(undefined, false)).toBe(false);
+    });
+
+    it('should return true for "" as in unassigned attr "a" even when default is false', () => {
+      // default value is only applied when the attribute is missing
+      expect(boolFromValue('', false)).toBe(true);
+    });
+  });
+
+  // Combines the three utilities for convenience.
+  describe('getBoolFromAttribute', () => {
+    it('should return true for present but unassigned attr "a"', () => {
+      expect(getBoolFromAttribute(testEl, 'a')).toBe(true);
+    });
+
+    it('should return true for attr "b" which is "true"', () => {
+      expect(getBoolFromAttribute(testEl, 'b')).toBe(true);
+    });
+
+    it('should return false for attr "c" which is "false"', () => {
+      expect(getBoolFromAttribute(testEl, 'c')).toBe(false);
+    });
+
+    it('should return true for attributes ["d-e", "d"]', () => {
+      // because d-e will be found before D="foo"
+      expect(getBoolFromAttribute(testEl, ['d-e', 'd'])).toBe(true);
+    });
+
+    it('should return false for non-existent attribute "x"', () => {
+      expect(getBoolFromAttribute(testEl, 'x')).toBe(false);
+    });
+  });
+});
diff --git a/aio/src/app/shared/attribute-utils.ts b/aio/src/app/shared/attribute-utils.ts
new file mode 100644
index 0000000000..fa16c2547f
--- /dev/null
+++ b/aio/src/app/shared/attribute-utils.ts
@@ -0,0 +1,51 @@
+// Utilities for processing HTML element attributes
+import { ElementRef } from '@angular/core';
+
+interface StringMap { [index: string]: string; }
+
+/**
+ * Get attribute map from element or ElementRef `attributes`.
+ * Attribute map keys are forced lowercase for case-insensitive lookup.
+ * @param el The source of the attributes
+ */
+export function getAttrs(el:  HTMLElement | ElementRef): StringMap {
+  const attrs: NamedNodeMap = el instanceof ElementRef ? el.nativeElement.attributes : el.attributes;
+  const attrMap = {};
+  Object.keys(attrs).forEach(key =>
+    attrMap[(attrs[key] as Attr).name.toLowerCase()] = (attrs[key] as Attr).value);
+  return attrMap;
+}
+
+/**
+ * Return the attribute that matches `attr`.
+ * @param attr Name of the attribute or a string of candidate attribute names
+ */
+export function getAttrValue(attrs: StringMap, attr: string | string[] = ''): string {
+  return attrs[typeof attr === 'string' ?
+    attr.toLowerCase() :
+    attr.find(a => attrs[a.toLowerCase()] !== undefined)
+  ];
+}
+
+/**
+ * Return the boolean state of an attribute value (if supplied)
+ * @param attrValue The string value of some attribute (or undefined if attribute not present)
+ * @param def Default boolean value when attribute is undefined.
+ */
+export function boolFromValue(attrValue: string, def: boolean = false) {
+  // tslint:disable-next-line:triple-equals
+  return attrValue == undefined ? def :  attrValue.trim() !== 'false';
+}
+
+/**
+ * Return the boolean state of attribute from an element
+ * @param el The source of the attributes
+ * @param atty Name of the attribute or a string of candidate attribute names
+ * @param def Default boolean value when attribute is undefined.
+ */
+export function getBoolFromAttribute(
+  el:  HTMLElement | ElementRef,
+  attr: string | string[],
+  def: boolean = false): boolean {
+  return boolFromValue(getAttrValue(getAttrs(el), attr), def);
+}
diff --git a/aio/src/app/shared/auto-scroll.service.spec.ts b/aio/src/app/shared/auto-scroll.service.spec.ts
deleted file mode 100644
index 6fb5309241..0000000000
--- a/aio/src/app/shared/auto-scroll.service.spec.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ReflectiveInjector } from '@angular/core';
-import { PlatformLocation } from '@angular/common';
-import { DOCUMENT } from '@angular/platform-browser';
-import { AutoScrollService } from './auto-scroll.service';
-
-
-describe('AutoScrollService', () => {
-  let injector: ReflectiveInjector,
-      autoScroll: AutoScrollService,
-      container: HTMLElement,
-      location: MockPlatformLocation,
-      document: MockDocument;
-
-  class MockPlatformLocation {
-    hash: string;
-  }
-
-  class MockDocument {
-    getElementById = jasmine.createSpy('Document getElementById');
-  }
-
-  class MockElement {
-    scrollIntoView = jasmine.createSpy('Element scrollIntoView');
-  }
-
-  beforeEach(() => {
-    injector = ReflectiveInjector.resolveAndCreate([
-        AutoScrollService,
-        { provide: DOCUMENT, useClass: MockDocument },
-        { provide: PlatformLocation, useClass: MockPlatformLocation }
-    ]);
-    location = injector.get(PlatformLocation);
-    document = injector.get(DOCUMENT);
-    container = window.document.createElement('div');
-    container.scrollTop = 100;
-    autoScroll = injector.get(AutoScrollService);
-  });
-
-  it('should scroll the container to the top if there is no hash', () => {
-    location.hash = '';
-
-    autoScroll.scroll(container);
-    expect(container.scrollTop).toEqual(0);
-  });
-
-  it('should scroll the container to the top if the hash does not match an element id', () => {
-    location.hash = 'some-id';
-    document.getElementById.and.returnValue(null);
-
-    autoScroll.scroll(container);
-    expect(document.getElementById).toHaveBeenCalledWith('some-id');
-    expect(container.scrollTop).toEqual(0);
-  });
-
-  it('should scroll the container to the element whose id matches the hash', () => {
-    const element = new MockElement();
-    location.hash = 'some-id';
-    document.getElementById.and.returnValue(element);
-
-    autoScroll.scroll(container);
-    expect(document.getElementById).toHaveBeenCalledWith('some-id');
-    expect(element.scrollIntoView).toHaveBeenCalled();
-  });
-});
diff --git a/aio/src/app/shared/auto-scroll.service.ts b/aio/src/app/shared/auto-scroll.service.ts
deleted file mode 100644
index e99efb6375..0000000000
--- a/aio/src/app/shared/auto-scroll.service.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Injectable, Inject, InjectionToken } from '@angular/core';
-import { PlatformLocation } from '@angular/common';
-import { DOCUMENT } from '@angular/platform-browser';
-
-/**
- * A service that supports automatically scrolling elements into view
- */
-@Injectable()
-export class AutoScrollService {
-
-  constructor(
-      @Inject(DOCUMENT) private document: any,
-      private location: PlatformLocation) { }
-
-  /**
-   * Scroll the contents of the container
-   * to the element with id extracted from the current location hash fragment
-   */
-  scroll(container: HTMLElement) {
-    const hash = this.getCurrentHash();
-    const element: HTMLElement = this.document.getElementById(hash);
-    if (element) {
-      element.scrollIntoView();
-    } else {
-      container.scrollTop = 0;
-    }
-  }
-
-  /**
-   * We can get the hash fragment from the `PlatformLocation` but
-   * it needs the `#` char removing from the front.
-   */
-  private getCurrentHash() {
-    return this.location.hash.replace(/^#/, '');
-  }
-}
diff --git a/aio/src/app/shared/custom-md-icon-registry.spec.ts b/aio/src/app/shared/custom-md-icon-registry.spec.ts
new file mode 100644
index 0000000000..d7a1db03b0
--- /dev/null
+++ b/aio/src/app/shared/custom-md-icon-registry.spec.ts
@@ -0,0 +1,39 @@
+import { MdIconRegistry } from '@angular/material';
+import { CustomMdIconRegistry, SVG_ICONS, SvgIconInfo } from './custom-md-icon-registry';
+
+describe('CustomMdIconRegistry', () => {
+  it('should get the SVG element for a preloaded icon from the cache', () => {
+    const mockHttp: any = {};
+    const mockSanitizer: any = {};
+    const svgSrc = '<svg xmlns="http://www.w3.org/2000/svg" focusable="false" ' +
+                 'viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/></svg>';
+    const svgIcons: SvgIconInfo[] = [
+      { name: 'test_icon', svgSource: svgSrc }
+    ];
+    const registry = new CustomMdIconRegistry(mockHttp, mockSanitizer, svgIcons);
+    let svgElement: SVGElement;
+    registry.getNamedSvgIcon('test_icon', null).subscribe(el => svgElement = el as SVGElement);
+    expect(svgElement).toEqual(createSvg(svgSrc));
+  });
+
+  it('should call through to the MdIconRegistry if the icon name is not in the preloaded cache', () => {
+    const mockHttp: any = {};
+    const mockSanitizer: any = {};
+    const svgSrc = '<svg xmlns="http://www.w3.org/2000/svg" focusable="false" ' +
+                 'viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/></svg>';
+    const svgIcons: SvgIconInfo[] = [
+      { name: 'test_icon', svgSource: svgSrc }
+    ];
+    spyOn(MdIconRegistry.prototype, 'getNamedSvgIcon');
+
+    const registry = new CustomMdIconRegistry(mockHttp, mockSanitizer, svgIcons);
+    registry.getNamedSvgIcon('other_icon', null);
+    expect(MdIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', null);
+  });
+});
+
+function createSvg(svgSrc) {
+  const div = document.createElement('div');
+  div.innerHTML = svgSrc;
+  return div.querySelector('svg');
+}
diff --git a/aio/src/app/shared/custom-md-icon-registry.ts b/aio/src/app/shared/custom-md-icon-registry.ts
new file mode 100644
index 0000000000..77b05d9169
--- /dev/null
+++ b/aio/src/app/shared/custom-md-icon-registry.ts
@@ -0,0 +1,58 @@
+import { InjectionToken, Inject, Injectable } from '@angular/core';
+import { of } from 'rxjs/observable/of';
+import { MdIconRegistry } from '@angular/material';
+import { Http } from '@angular/http';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * Use SVG_ICONS (and SvgIconInfo) as "multi" providers to provide the SVG source
+ * code for the icons that you wish to have preloaded in the `CustomMdIconRegistry`
+ * For compatibility with the MdIconComponent, please ensure that the SVG source has
+ * the following attributes:
+ *
+ * * `xmlns="http://www.w3.org/2000/svg"`
+ * * `focusable="false"` (disable IE11 default behavior to make SVGs focusable)
+ * * `height="100%"` (the default)
+ * * `width="100%"` (the default)
+ * * `preserveAspectRatio="xMidYMid meet"` (the default)
+ *
+ */
+export const SVG_ICONS = new InjectionToken<Array<SvgIconInfo>>('SvgIcons');
+export interface SvgIconInfo {
+  name: string;
+  svgSource: string;
+}
+
+interface SvgIconMap {
+  [iconName: string]: SVGElement;
+}
+
+/**
+ * A custom replacement for Angular Material's `MdIconRegistry`, which allows
+ * us to provide preloaded icon SVG sources.
+ */
+@Injectable()
+export class CustomMdIconRegistry extends MdIconRegistry {
+  private preloadedSvgElements: SvgIconMap = {};
+
+  constructor(http: Http, sanitizer: DomSanitizer, @Inject(SVG_ICONS) svgIcons: SvgIconInfo[]) {
+    super(http, sanitizer);
+    this.loadSvgElements(svgIcons);
+  }
+
+  getNamedSvgIcon(iconName, namespace) {
+    if (this.preloadedSvgElements[iconName]) {
+      return of(this.preloadedSvgElements[iconName].cloneNode(true));
+    }
+    return super.getNamedSvgIcon(iconName, namespace);
+  }
+
+  private loadSvgElements(svgIcons: SvgIconInfo[]) {
+    const div = document.createElement('DIV');
+    svgIcons.forEach(icon => {
+      // SECURITY: the source for the SVG icons is provided in code by trusted developers
+      div.innerHTML = icon.svgSource;
+      this.preloadedSvgElements[icon.name] = div.querySelector('svg');
+    });
+  }
+}
diff --git a/aio/src/app/shared/ga.service.spec.ts b/aio/src/app/shared/ga.service.spec.ts
index c654221316..5281142ced 100644
--- a/aio/src/app/shared/ga.service.spec.ts
+++ b/aio/src/app/shared/ga.service.spec.ts
@@ -8,6 +8,21 @@ describe('GaService', () => {
   let gaSpy: jasmine.Spy;
   let injector: ReflectiveInjector;
 
+  // filter for 'send' which communicates with server
+  // returns the url of the 'send pageview'
+  function gaSpySendCalls() {
+    let lastUrl: string;
+    return gaSpy.calls.all()
+      .reduce((acc, c) =>  {
+        const args = c.args;
+        if (args[0] === 'set') {
+          lastUrl = args[2];
+        } else if (args[0] === 'send') {
+          acc.push(lastUrl);
+        }
+        return acc;
+      }, []);
+  }
 
   beforeEach(() => {
     injector = ReflectiveInjector.resolveAndCreate([
@@ -40,6 +55,16 @@ describe('GaService', () => {
       expect(first[0]).toBe('create');
     });
 
+    describe('#locationChanged(url)', () => {
+      it('should send page to url w/ leading slash', () => {
+        gaService.locationChanged('testUrl');
+        let args = gaSpy.calls.all()[1].args;
+        expect(args).toEqual(['set', 'page', '/testUrl']);
+        args = gaSpy.calls.all()[2].args;
+        expect(args).toEqual(['send', 'pageview']);
+      });
+    });
+
     describe('#sendPage(url)', () => {
       it('should set page to url w/ leading slash', () => {
         gaService.sendPage('testUrl');
@@ -55,36 +80,34 @@ describe('GaService', () => {
 
       it('should not send twice with same URL, back-to-back', () => {
         gaService.sendPage('testUrl');
-        const count1 = gaSpy.calls.count();
-
         gaService.sendPage('testUrl');
-        const count2 = gaSpy.calls.count();
-        expect(count2).toEqual(count1);
+        expect(gaSpySendCalls()).toEqual(['/testUrl']);
+      });
+
+      it('should send twice with same URL, back-to-back, even when the hash changes', () => {
+        // Therefore it is up to caller NOT to call it when hash changes if this is unwanted.
+        // See LocationService and its specs
+        gaService.sendPage('testUrl#one');
+        gaService.sendPage('testUrl#two');
+        expect(gaSpySendCalls()).toEqual([
+          '/testUrl#one',
+          '/testUrl#two'
+        ]);
+
       });
 
       it('should send same URL twice when other intervening URL', () => {
         gaService.sendPage('testUrl');
-        const count1 = gaSpy.calls.count();
-
         gaService.sendPage('testUrl2');
-        const count2 = gaSpy.calls.count();
-        expect(count2).toBeGreaterThan(count1, 'testUrl2 was sent');
-
         gaService.sendPage('testUrl');
-        const count3 = gaSpy.calls.count();
-        expect(count3).toBeGreaterThan(count1, 'testUrl was sent 2nd time');
+        expect(gaSpySendCalls()).toEqual([
+          '/testUrl',
+          '/testUrl2',
+          '/testUrl'
+        ]);
       });
     });
 
-    describe('#locationChanged(url)', () => {
-      it('should send page to url w/ leading slash', () => {
-        gaService.locationChanged('testUrl');
-        let args = gaSpy.calls.all()[1].args;
-        expect(args).toEqual(['set', 'page', '/testUrl']);
-        args = gaSpy.calls.all()[2].args;
-        expect(args).toEqual(['send', 'pageview']);
-      });
-    });
   });
 
   describe('when no ambient GA', () => {
diff --git a/aio/src/app/shared/ga.service.ts b/aio/src/app/shared/ga.service.ts
index 6296614de0..c9563f9cf8 100644
--- a/aio/src/app/shared/ga.service.ts
+++ b/aio/src/app/shared/ga.service.ts
@@ -5,7 +5,7 @@ import { Logger } from 'app/shared/logger.service';
 
 @Injectable()
 /**
- * Google Analytics Service - captures app behaviours and sends them to Google Analytics (GA).
+ * Google Analytics Service - captures app behaviors and sends them to Google Analytics (GA).
  * Presupposes that GA script has been loaded from a script on the host web page.
  * Associates data with a GA "property" from the environment (`gaId`).
  */
@@ -27,6 +27,7 @@ export class GaService {
   }
 
   sendPage(url: string) {
+    // Won't re-send if the url hasn't changed.
     if (url === this.previousUrl) { return; }
     this.previousUrl = url;
     this.ga('set', 'page', '/' + url);
diff --git a/aio/src/app/shared/location.service.spec.ts b/aio/src/app/shared/location.service.spec.ts
index cd03ddd353..8781721819 100644
--- a/aio/src/app/shared/location.service.spec.ts
+++ b/aio/src/app/shared/location.service.spec.ts
@@ -1,13 +1,17 @@
 import { ReflectiveInjector } from '@angular/core';
 import { Location, LocationStrategy, PlatformLocation } from '@angular/common';
 import { MockLocationStrategy } from '@angular/common/testing';
+import { Subject } from 'rxjs/Subject';
 
 import { GaService } from 'app/shared/ga.service';
+import { SwUpdatesService } from 'app/sw-updates/sw-updates.service';
 import { LocationService } from './location.service';
 
 describe('LocationService', () => {
-
   let injector: ReflectiveInjector;
+  let location: MockLocationStrategy;
+  let service: LocationService;
+  let swUpdates: MockSwUpdatesService;
 
   beforeEach(() => {
     injector = ReflectiveInjector.resolveAndCreate([
@@ -15,21 +19,22 @@ describe('LocationService', () => {
         Location,
         { provide: GaService, useClass: TestGaService },
         { provide: LocationStrategy, useClass: MockLocationStrategy },
-        { provide: PlatformLocation, useClass: MockPlatformLocation }
+        { provide: PlatformLocation, useClass: MockPlatformLocation },
+        { provide: SwUpdatesService, useClass: MockSwUpdatesService }
     ]);
+
+    location  = injector.get(LocationStrategy);
+    service  = injector.get(LocationService);
+    swUpdates  = injector.get(SwUpdatesService);
   });
 
-  describe('urlStream', () => {
+  describe('currentUrl', () => {
     it('should emit the latest url at the time it is subscribed to', () => {
 
-      const location: MockLocationStrategy = injector.get(LocationStrategy);
-
       location.simulatePopState('/initial-url1');
       location.simulatePopState('/initial-url2');
       location.simulatePopState('/initial-url3');
 
-      const service: LocationService = injector.get(LocationService);
-
       location.simulatePopState('/next-url1');
       location.simulatePopState('/next-url2');
       location.simulatePopState('/next-url3');
@@ -40,9 +45,6 @@ describe('LocationService', () => {
     });
 
     it('should emit all location changes after it has been subscribed to', () => {
-      const location: MockLocationStrategy = injector.get(LocationStrategy);
-      const service: LocationService = injector.get(LocationService);
-
       location.simulatePopState('/initial-url1');
       location.simulatePopState('/initial-url2');
       location.simulatePopState('/initial-url3');
@@ -63,80 +65,267 @@ describe('LocationService', () => {
     });
 
     it('should pass only the latest and later urls to each subscriber', () => {
-        const location: MockLocationStrategy = injector.get(LocationStrategy);
-        const service: LocationService = injector.get(LocationService);
+      location.simulatePopState('/initial-url1');
+      location.simulatePopState('/initial-url2');
+      location.simulatePopState('/initial-url3');
 
-        location.simulatePopState('/initial-url1');
-        location.simulatePopState('/initial-url2');
-        location.simulatePopState('/initial-url3');
+      const urls1 = [];
+      service.currentUrl.subscribe(url => urls1.push(url));
 
-        const urls1 = [];
-        service.currentUrl.subscribe(url => urls1.push(url));
+      location.simulatePopState('/next-url1');
+      location.simulatePopState('/next-url2');
 
-        location.simulatePopState('/next-url1');
-        location.simulatePopState('/next-url2');
+      const urls2 = [];
+      service.currentUrl.subscribe(url => urls2.push(url));
 
-        const urls2 = [];
-        service.currentUrl.subscribe(url => urls2.push(url));
+      location.simulatePopState('/next-url3');
 
-        location.simulatePopState('/next-url3');
+      expect(urls1).toEqual([
+        'initial-url3',
+        'next-url1',
+        'next-url2',
+        'next-url3'
+      ]);
 
-        expect(urls1).toEqual([
-          'initial-url3',
-          'next-url1',
-          'next-url2',
-          'next-url3'
-        ]);
+      expect(urls2).toEqual([
+        'next-url2',
+        'next-url3'
+      ]);
+    });
 
-        expect(urls2).toEqual([
-          'next-url2',
-          'next-url3'
-        ]);
+    it('should strip leading and trailing slashes', () => {
+      const urls: string[] = [];
+
+      service.currentUrl.subscribe(u => urls.push(u));
+
+      location.simulatePopState('///some/url1///');
+      location.simulatePopState('///some/url2///?foo=bar');
+      location.simulatePopState('///some/url3///#baz');
+      location.simulatePopState('///some/url4///?foo=bar#baz');
+
+      expect(urls.slice(-4)).toEqual([
+        'some/url1',
+        'some/url2?foo=bar',
+        'some/url3#baz',
+        'some/url4?foo=bar#baz'
+      ]);
+    });
+  });
+
+  describe('currentPath', () => {
+    it('should strip leading and trailing slashes off the url', () => {
+      const paths: string[] = [];
+
+      service.currentPath.subscribe(p => paths.push(p));
+
+      location.simulatePopState('///initial/url1///');
+      location.simulatePopState('///initial/url2///?foo=bar');
+      location.simulatePopState('///initial/url3///#baz');
+      location.simulatePopState('///initial/url4///?foo=bar#baz');
+
+      expect(paths.slice(-4)).toEqual([
+        'initial/url1',
+        'initial/url2',
+        'initial/url3',
+        'initial/url4'
+      ]);
+    });
+
+    it('should not strip other slashes off the url', () => {
+      const paths: string[] = [];
+
+      service.currentPath.subscribe(p => paths.push(p));
+
+      location.simulatePopState('initial///url1');
+      location.simulatePopState('initial///url2?foo=bar');
+      location.simulatePopState('initial///url3#baz');
+      location.simulatePopState('initial///url4?foo=bar#baz');
+
+      expect(paths.slice(-4)).toEqual([
+        'initial///url1',
+        'initial///url2',
+        'initial///url3',
+        'initial///url4'
+      ]);
+    });
+
+    it('should strip the query off the url', () => {
+      let path: string;
+
+      service.currentPath.subscribe(p => path = p);
+
+      location.simulatePopState('/initial/url1?foo=bar');
+
+      expect(path).toBe('initial/url1');
+    });
+
+    it('should strip the hash fragment off the url', () => {
+      const paths: string[] = [];
+
+      service.currentPath.subscribe(p => paths.push(p));
+
+      location.simulatePopState('/initial/url1#foo');
+      location.simulatePopState('/initial/url2?foo=bar#baz');
+
+      expect(paths.slice(-2)).toEqual([
+        'initial/url1',
+        'initial/url2'
+      ]);
+    });
+
+    it('should emit the latest path at the time it is subscribed to', () => {
+      location.simulatePopState('/initial/url1');
+      location.simulatePopState('/initial/url2');
+      location.simulatePopState('/initial/url3');
+
+      location.simulatePopState('/next/url1');
+      location.simulatePopState('/next/url2');
+      location.simulatePopState('/next/url3');
+
+      let initialPath: string;
+      service.currentPath.subscribe(path => initialPath = path);
+
+      expect(initialPath).toEqual('next/url3');
+    });
+
+    it('should emit all location changes after it has been subscribed to', () => {
+      location.simulatePopState('/initial/url1');
+      location.simulatePopState('/initial/url2');
+      location.simulatePopState('/initial/url3');
+
+      const paths: string[] = [];
+      service.currentPath.subscribe(path => paths.push(path));
+
+      location.simulatePopState('/next/url1');
+      location.simulatePopState('/next/url2');
+      location.simulatePopState('/next/url3');
+
+      expect(paths).toEqual([
+        'initial/url3',
+        'next/url1',
+        'next/url2',
+        'next/url3'
+      ]);
+    });
+
+    it('should pass only the latest and later paths to each subscriber', () => {
+      location.simulatePopState('/initial/url1');
+      location.simulatePopState('/initial/url2');
+      location.simulatePopState('/initial/url3');
+
+      const paths1: string[] = [];
+      service.currentPath.subscribe(path => paths1.push(path));
+
+      location.simulatePopState('/next/url1');
+      location.simulatePopState('/next/url2');
+
+      const paths2: string[] = [];
+      service.currentPath.subscribe(path => paths2.push(path));
+
+      location.simulatePopState('/next/url3');
+
+      expect(paths1).toEqual([
+        'initial/url3',
+        'next/url1',
+        'next/url2',
+        'next/url3'
+      ]);
+
+      expect(paths2).toEqual([
+        'next/url2',
+        'next/url3'
+      ]);
     });
   });
 
   describe('go', () => {
+
     it('should update the location', () => {
-      const location: MockLocationStrategy = injector.get(LocationStrategy);
-      const service: LocationService = injector.get(LocationService);
-
       service.go('some-new-url');
-
       expect(location.internalPath).toEqual('some-new-url');
       expect(location.path(true)).toEqual('some-new-url');
     });
 
     it('should emit the new url', () => {
-      const location: MockLocationStrategy = injector.get(LocationStrategy);
-      const service: LocationService = injector.get(LocationService);
-
+      const urls = [];
       service.go('some-initial-url');
 
-      const urls = [];
       service.currentUrl.subscribe(url => urls.push(url));
-
       service.go('some-new-url');
-
       expect(urls).toEqual([
         'some-initial-url',
         'some-new-url'
       ]);
     });
+
+    it('should strip leading and trailing slashes', () => {
+      let url: string;
+
+      service.currentUrl.subscribe(u => url = u);
+      service.go('/some/url/');
+
+      expect(location.internalPath).toEqual('some/url');
+      expect(location.path(true)).toEqual('some/url');
+      expect(url).toBe('some/url');
+    });
+
+    it('should ignore undefined URL string', noUrlTest(undefined));
+    it('should ignore null URL string', noUrlTest(null));
+    it('should ignore empty URL string', noUrlTest(''));
+    function noUrlTest(testUrl: string) {
+      return function() {
+        const initialUrl = 'some/url';
+        const goExternalSpy = spyOn(service, 'goExternal');
+        let url: string;
+
+        service.go(initialUrl);
+        service.currentUrl.subscribe(u => url = u);
+
+        service.go(testUrl);
+        expect(url).toEqual(initialUrl, 'should not have re-navigated locally');
+        expect(goExternalSpy).not.toHaveBeenCalled();
+      };
+    }
+
+    it('should leave the site for external url that starts with "http"', () => {
+      const goExternalSpy = spyOn(service, 'goExternal');
+      const externalUrl = 'http://some/far/away/land';
+      service.go(externalUrl);
+      expect(goExternalSpy).toHaveBeenCalledWith(externalUrl);
+    });
+
+    it('should do a "full page navigation" if a ServiceWorker update has been activated', () => {
+      const goExternalSpy = spyOn(service, 'goExternal');
+
+      // Internal URL - No ServiceWorker update
+      service.go('some-internal-url');
+      expect(goExternalSpy).not.toHaveBeenCalled();
+      expect(location.path(true)).toEqual('some-internal-url');
+
+      // Internal URL - ServiceWorker update
+      swUpdates.updateActivated.next('foo');
+      service.go('other-internal-url');
+      expect(goExternalSpy).toHaveBeenCalledWith('other-internal-url');
+      expect(location.path(true)).toEqual('some-internal-url');
+    });
+
+    it('should not update currentUrl for external url that starts with "http"', () => {
+      let localUrl: string;
+      spyOn(service, 'goExternal');
+      service.currentUrl.subscribe(url => localUrl = url);
+      service.go('https://some/far/away/land');
+      expect(localUrl).toBeFalsy('should not set local url');
+    });
+
   });
 
   describe('search', () => {
     it('should read the query from the current location.path', () => {
-      const location: MockLocationStrategy = injector.get(LocationStrategy);
-      const service: LocationService = injector.get(LocationService);
-
       location.simulatePopState('a/b/c?foo=bar&moo=car');
       expect(service.search()).toEqual({ foo: 'bar', moo: 'car' });
     });
 
     it('should cope with an empty query', () => {
-      const location: MockLocationStrategy = injector.get(LocationStrategy);
-      const service: LocationService = injector.get(LocationService);
-
       location.simulatePopState('a/b/c');
       expect(service.search()).toEqual({ });
 
@@ -151,25 +340,16 @@ describe('LocationService', () => {
     });
 
     it('should URL decode query values', () => {
-      const location: MockLocationStrategy = injector.get(LocationStrategy);
-      const service: LocationService = injector.get(LocationService);
-
       location.simulatePopState('a/b/c?query=a%26b%2Bc%20d');
       expect(service.search()).toEqual({ query: 'a&b+c d' });
     });
 
     it('should URL decode query keys', () => {
-      const location: MockLocationStrategy = injector.get(LocationStrategy);
-      const service: LocationService = injector.get(LocationService);
-
       location.simulatePopState('a/b/c?a%26b%2Bc%20d=value');
       expect(service.search()).toEqual({ 'a&b+c d': 'value' });
     });
 
     it('should cope with a hash on the URL', () => {
-      const location: MockLocationStrategy = injector.get(LocationStrategy);
-      const service: LocationService = injector.get(LocationService);
-
       spyOn(location, 'path').and.callThrough();
       service.search();
       expect(location.path).toHaveBeenCalledWith(false);
@@ -177,184 +357,214 @@ describe('LocationService', () => {
   });
 
   describe('setSearch', () => {
-    it('should call replaceState on PlatformLocation', () => {
-      const location: MockPlatformLocation = injector.get(PlatformLocation);
-      const service: LocationService = injector.get(LocationService);
+    let platformLocation: MockPlatformLocation;
 
+    beforeEach(() => {
+      platformLocation = injector.get(PlatformLocation);
+    });
+
+    it('should call replaceState on PlatformLocation', () => {
       const params = {};
       service.setSearch('Some label', params);
-      expect(location.replaceState).toHaveBeenCalledWith(jasmine.any(Object), 'Some label', 'a/b/c');
+      expect(platformLocation.replaceState).toHaveBeenCalledWith(jasmine.any(Object), 'Some label', 'a/b/c');
     });
 
     it('should convert the params to a query string', () => {
-      const location: MockPlatformLocation = injector.get(PlatformLocation);
-      const service: LocationService = injector.get(LocationService);
-
       const params = { foo: 'bar', moo: 'car' };
       service.setSearch('Some label', params);
-      expect(location.replaceState).toHaveBeenCalledWith(jasmine.any(Object), 'Some label', jasmine.any(String));
-      const [path, query] = location.replaceState.calls.mostRecent().args[2].split('?');
+      expect(platformLocation.replaceState).toHaveBeenCalledWith(jasmine.any(Object), 'Some label', jasmine.any(String));
+      const [path, query] = platformLocation.replaceState.calls.mostRecent().args[2].split('?');
       expect(path).toEqual('a/b/c');
       expect(query).toContain('foo=bar');
       expect(query).toContain('moo=car');
     });
 
     it('should URL encode param values', () => {
-      const location: MockPlatformLocation = injector.get(PlatformLocation);
-      const service: LocationService = injector.get(LocationService);
-
       const params = { query: 'a&b+c d' };
       service.setSearch('', params);
-      const [, query] = location.replaceState.calls.mostRecent().args[2].split('?');
+      const [, query] = platformLocation.replaceState.calls.mostRecent().args[2].split('?');
       expect(query).toContain('query=a%26b%2Bc%20d');
     });
 
     it('should URL encode param keys', () => {
-      const location: MockPlatformLocation = injector.get(PlatformLocation);
-      const service: LocationService = injector.get(LocationService);
-
       const params = { 'a&b+c d': 'value' };
       service.setSearch('', params);
-      const [, query] = location.replaceState.calls.mostRecent().args[2].split('?');
+      const [, query] = platformLocation.replaceState.calls.mostRecent().args[2].split('?');
       expect(query).toContain('a%26b%2Bc%20d=value');
     });
   });
 
   describe('handleAnchorClick', () => {
-    let service: LocationService, anchor: HTMLAnchorElement;
+    let anchor: HTMLAnchorElement;
+
     beforeEach(() => {
-      service = injector.get(LocationService);
       anchor = document.createElement('a');
+      spyOn(service, 'go');
     });
 
-    describe('intercepting', () => {
-      it('should intercept clicks on anchors for relative local urls', () => {
+    describe('should try to navigate with go() when anchor clicked for', () => {
+      it('relative local url', () => {
         anchor.href = 'some/local/url';
-        spyOn(service, 'go');
-        const result = service.handleAnchorClick(anchor, 0, false, false);
-        expect(service.go).toHaveBeenCalledWith('some/local/url');
+        const result = service.handleAnchorClick(anchor);
+        expect(service.go).toHaveBeenCalledWith('/some/local/url');
         expect(result).toBe(false);
       });
 
-      it('should intercept clicks on anchors for absolute local urls', () => {
+      it('absolute local url', () => {
         anchor.href = '/some/local/url';
-        spyOn(service, 'go');
-        const result = service.handleAnchorClick(anchor, 0, false, false);
-        expect(service.go).toHaveBeenCalledWith('some/local/url');
+        const result = service.handleAnchorClick(anchor);
+        expect(service.go).toHaveBeenCalledWith('/some/local/url');
         expect(result).toBe(false);
       });
 
-      it('should intercept clicks on anchors for local urls, with query params', () => {
+      it('local url with query params', () => {
         anchor.href = 'some/local/url?query=xxx&other=yyy';
-        spyOn(service, 'go');
-        const result = service.handleAnchorClick(anchor, 0, false, false);
-        expect(service.go).toHaveBeenCalledWith('some/local/url?query=xxx&other=yyy');
+        const result = service.handleAnchorClick(anchor);
+        expect(service.go).toHaveBeenCalledWith('/some/local/url?query=xxx&other=yyy');
         expect(result).toBe(false);
       });
 
-      it('should intercept clicks on anchors for local urls, with hash fragment', () => {
+      it('local url with hash fragment', () => {
         anchor.href = 'some/local/url#somefragment';
-        spyOn(service, 'go');
-        const result = service.handleAnchorClick(anchor, 0, false, false);
-        expect(service.go).toHaveBeenCalledWith('some/local/url#somefragment');
+        const result = service.handleAnchorClick(anchor);
+        expect(service.go).toHaveBeenCalledWith('/some/local/url#somefragment');
         expect(result).toBe(false);
       });
 
-      it('should intercept clicks on anchors for local urls, with query params and hash fragment', () => {
+      it('local url with query params and hash fragment', () => {
         anchor.href = 'some/local/url?query=xxx&other=yyy#somefragment';
-        spyOn(service, 'go');
-        const result = service.handleAnchorClick(anchor, 0, false, false);
-        expect(service.go).toHaveBeenCalledWith('some/local/url?query=xxx&other=yyy#somefragment');
+        const result = service.handleAnchorClick(anchor);
+        expect(service.go).toHaveBeenCalledWith('/some/local/url?query=xxx&other=yyy#somefragment');
+        expect(result).toBe(false);
+      });
+
+      it('local url with period in a path segment but no extension', () => {
+        anchor.href = 'tut.or.ial/toh-p2';
+        const result = service.handleAnchorClick(anchor);
+        expect(service.go).toHaveBeenCalled();
         expect(result).toBe(false);
       });
     });
 
-    describe('not intercepting', () => {
-      it('should not intercept clicks on anchors for external urls', () => {
+    describe('should let browser handle anchor click when', () => {
+      it('url is external to the site', () => {
         anchor.href = 'http://other.com/some/local/url?query=xxx&other=yyy#somefragment';
-        spyOn(service, 'go');
-        let result = service.handleAnchorClick(anchor, 0, false, false);
+        let result = service.handleAnchorClick(anchor);
         expect(service.go).not.toHaveBeenCalled();
         expect(result).toBe(true);
 
         anchor.href = 'some/local/url.pdf';
         anchor.protocol = 'ftp';
-        result = service.handleAnchorClick(anchor, 0, false, false);
+        result = service.handleAnchorClick(anchor);
         expect(service.go).not.toHaveBeenCalled();
         expect(result).toBe(true);
       });
 
-      it('should not intercept clicks on anchors if button is not zero', () => {
+      it('mouse button is not zero (middle or right)', () => {
         anchor.href = 'some/local/url';
-        spyOn(service, 'go');
         const result = service.handleAnchorClick(anchor, 1, false, false);
         expect(service.go).not.toHaveBeenCalled();
         expect(result).toBe(true);
       });
 
-      it('should not intercept clicks on anchors if ctrl key is pressed', () => {
+      it('ctrl key is pressed', () => {
         anchor.href = 'some/local/url';
-        spyOn(service, 'go');
         const result = service.handleAnchorClick(anchor, 0, true, false);
         expect(service.go).not.toHaveBeenCalled();
         expect(result).toBe(true);
       });
 
-      it('should not intercept clicks on anchors if meta key is pressed', () => {
+      it('meta key is pressed', () => {
         anchor.href = 'some/local/url';
-        spyOn(service, 'go');
         const result = service.handleAnchorClick(anchor, 0, false, true);
         expect(service.go).not.toHaveBeenCalled();
         expect(result).toBe(true);
       });
 
-      it('should not intercept clicks on links with (non-_self) targets', () => {
+      it('anchor has (non-_self) target', () => {
         anchor.href = 'some/local/url';
-        spyOn(service, 'go');
-
         anchor.target = '_blank';
-        let result = service.handleAnchorClick(anchor, 0, false, false);
+        let result = service.handleAnchorClick(anchor);
         expect(service.go).not.toHaveBeenCalled();
         expect(result).toBe(true);
 
         anchor.target = '_parent';
-        result = service.handleAnchorClick(anchor, 0, false, false);
+        result = service.handleAnchorClick(anchor);
         expect(service.go).not.toHaveBeenCalled();
         expect(result).toBe(true);
 
         anchor.target = '_top';
-        result = service.handleAnchorClick(anchor, 0, false, false);
+        result = service.handleAnchorClick(anchor);
         expect(service.go).not.toHaveBeenCalled();
         expect(result).toBe(true);
 
         anchor.target = 'other-frame';
-        result = service.handleAnchorClick(anchor, 0, false, false);
+        result = service.handleAnchorClick(anchor);
         expect(service.go).not.toHaveBeenCalled();
         expect(result).toBe(true);
 
         anchor.target = '_self';
-        result = service.handleAnchorClick(anchor, 0, false, false);
-        expect(service.go).toHaveBeenCalledWith('some/local/url');
+        result = service.handleAnchorClick(anchor);
+        expect(service.go).toHaveBeenCalledWith('/some/local/url');
         expect(result).toBe(false);
       });
+
+      it('zip url', () => {
+        anchor.href = 'tutorial/toh-p2.zip';
+        const result = service.handleAnchorClick(anchor);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+      });
+
+      it('image or media url', () => {
+        anchor.href = 'cat-photo.png';
+        let result = service.handleAnchorClick(anchor);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true, 'png');
+
+        anchor.href = 'cat-photo.gif';
+        result = service.handleAnchorClick(anchor);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true, 'gif');
+
+        anchor.href = 'cat-photo.jpg';
+        result = service.handleAnchorClick(anchor);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true, 'jpg');
+
+        anchor.href = 'dog-bark.mp3';
+        result = service.handleAnchorClick(anchor);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true, 'mp3');
+
+        anchor.href = 'pet-tricks.mp4';
+        result = service.handleAnchorClick(anchor);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true, 'mp4');
+      });
+
+      it('url has any extension', () => {
+        anchor.href = 'tutorial/toh-p2.html';
+        const result = service.handleAnchorClick(anchor);
+        expect(service.go).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+      });
     });
   });
 
   describe('google analytics - GaService#locationChanged', () => {
 
     let gaLocationChanged: jasmine.Spy;
-    let location: Location;
-    let service: LocationService;
 
     beforeEach(() => {
       const gaService = injector.get(GaService);
       gaLocationChanged = gaService.locationChanged;
-      location = injector.get(Location);
-      service = injector.get(LocationService);
+      // execute currentPath observable so that gaLocationChanged is called
+      service.currentPath.subscribe();
     });
 
     it('should call locationChanged with initial URL', () => {
-      const initialUrl = location.path().replace(/^\/+/, '');
+      const initialUrl = location.path().replace(/^\/+/, '');  // strip leading slashes
 
       expect(gaLocationChanged.calls.count()).toBe(1, 'gaService.locationChanged');
       const args = gaLocationChanged.calls.first().args;
@@ -368,9 +578,20 @@ describe('LocationService', () => {
       expect(args[0]).toBe('some-new-url');
     });
 
+    it('should call locationChanged with url stripped of hash or query', () => {
+      // Important to keep GA service from sending tracking event when the doc hasn't changed
+      // e.g., when the user navigates within the page via # fragments.
+      service.go('some-new-url#one');
+      service.go('some-new-url#two');
+      service.go('some-new-url/?foo="true"');
+      expect(gaLocationChanged.calls.count()).toBe(4, 'gaService.locationChanged called');
+      const args = gaLocationChanged.calls.allArgs();
+      expect(args[1]).toEqual(args[2], 'same url for hash calls');
+      expect(args[1]).toEqual(args[3], 'same url for query string call');
+    });
+
     it('should call locationChanged when window history changes', () => {
-     const locationStrategy: MockLocationStrategy = injector.get(LocationStrategy);
-     locationStrategy.simulatePopState('/next-url');
+      location.simulatePopState('/next-url');
 
       expect(gaLocationChanged.calls.count()).toBe(2, 'gaService.locationChanged');
       const args = gaLocationChanged.calls.argsFor(1);
@@ -387,6 +608,10 @@ class MockPlatformLocation {
   replaceState = jasmine.createSpy('PlatformLocation.replaceState');
 }
 
+class MockSwUpdatesService {
+  updateActivated = new Subject<string>();
+}
+
 class TestGaService {
   locationChanged = jasmine.createSpy('locationChanged');
 }
diff --git a/aio/src/app/shared/location.service.ts b/aio/src/app/shared/location.service.ts
index 2d1c5fa62e..00d042ad70 100644
--- a/aio/src/app/shared/location.service.ts
+++ b/aio/src/app/shared/location.service.ts
@@ -2,44 +2,61 @@ import { Injectable } from '@angular/core';
 import { Location, PlatformLocation } from '@angular/common';
 
 import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
 import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/publishReplay';
 
 import { GaService } from 'app/shared/ga.service';
+import { SwUpdatesService } from 'app/sw-updates/sw-updates.service';
 
 @Injectable()
 export class LocationService {
 
   private readonly urlParser = document.createElement('a');
-  private urlSubject = new Subject<string>();
+  private urlSubject = new ReplaySubject<string>(1);
+  private swUpdateActivated = false;
+
   currentUrl = this.urlSubject
-    .do(url => this.gaService.locationChanged(url))
-    .publishReplay(1);
+    .map(url => this.stripSlashes(url));
+
+  currentPath = this.currentUrl
+    .map(url => url.match(/[^?#]*/)[0]) // strip query and hash
+    .do(path => this.gaService.locationChanged(path));
 
   constructor(
     private gaService: GaService,
     private location: Location,
-    private platformLocation: PlatformLocation) {
+    private platformLocation: PlatformLocation,
+    swUpdates: SwUpdatesService) {
 
-    this.currentUrl.connect();
-    const initialUrl = this.stripLeadingSlashes(location.path(true));
-    this.urlSubject.next(initialUrl);
+    this.urlSubject.next(location.path(true));
 
     this.location.subscribe(state => {
-      const url = this.stripLeadingSlashes(state.url);
-      return this.urlSubject.next(url);
+      return this.urlSubject.next(state.url);
     });
+
+    swUpdates.updateActivated.subscribe(() => this.swUpdateActivated = true);
   }
 
   // TODO?: ignore if url-without-hash-or-search matches current location?
   go(url: string) {
-    this.location.go(url);
-    this.urlSubject.next(url);
+    if (!url) { return; }
+    url = this.stripSlashes(url);
+    if (/^http/.test(url) || this.swUpdateActivated) {
+      // Has http protocol so leave the site
+      // (or do a "full page navigation" if a ServiceWorker update has been activated)
+      this.goExternal(url);
+    } else {
+      this.location.go(url);
+      this.urlSubject.next(url);
+    }
   }
 
-  private stripLeadingSlashes(url: string) {
-    return url.replace(/^\/+/, '');
+  goExternal(url: string) {
+    window.location.assign(url);
+  }
+
+  private stripSlashes(url: string) {
+    return url.replace(/^\/+/, '').replace(/\/+(\?|#|$)/, '$1');
   }
 
   search(): { [index: string]: string; } {
@@ -72,6 +89,14 @@ export class LocationService {
   }
 
   /**
+   * Handle user's anchor click
+   *
+   * @param anchor {HTMLAnchorElement} - the anchor element clicked
+   * @param button Number of the mouse button held down. 0 means left or none
+   * @param ctrlKey True if control key held down
+   * @param metaKey True if command or window key held down
+   * @return false if service navigated with `go()`; true if browser should handle it.
+   *
    * Since we are using `LocationService` to navigate between docs, without the browser
    * reloading the page, we must intercept clicks on links.
    * If the link is to a document that we will render, then we navigate using `Location.go()`
@@ -84,9 +109,10 @@ export class LocationService {
    * `AppComponent`, whose element contains all the of the application and so captures all
    * link clicks both inside and outside the `DocViewerComponent`.
    */
-  handleAnchorClick(anchor: HTMLAnchorElement, button: number, ctrlKey: boolean, metaKey: boolean) {
 
-    // Check for modifier keys, which indicate the user wants to control navigation
+  handleAnchorClick(anchor: HTMLAnchorElement, button = 0, ctrlKey = false, metaKey = false) {
+
+    // Check for modifier keys and non-left-button, which indicate the user wants to control navigation
     if (button !== 0 || ctrlKey || metaKey) {
       return true;
     }
@@ -99,20 +125,22 @@ export class LocationService {
       return true;
     }
 
-    // don't navigate if external link or zip
-    const { pathname, search, hash } = anchor;
-
     if (anchor.getAttribute('download') != null) {
       return true; // let the download happen
     }
 
+    const { pathname, search, hash } = anchor;
     const relativeUrl = pathname + search + hash;
     this.urlParser.href = relativeUrl;
-    if (anchor.href !== this.urlParser.href) {
+
+    // don't navigate if external link or has extension
+    if ( anchor.href !== this.urlParser.href ||
+         !/\/[^/.]*$/.test(pathname) ) {
       return true;
     }
 
-    this.go(this.stripLeadingSlashes(relativeUrl));
+    // approved for navigation
+    this.go(relativeUrl);
     return false;
   }
 }
diff --git a/aio/src/app/shared/logger.service.ts b/aio/src/app/shared/logger.service.ts
index 900de146c1..99f1a55812 100644
--- a/aio/src/app/shared/logger.service.ts
+++ b/aio/src/app/shared/logger.service.ts
@@ -1,10 +1,14 @@
 import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
+
 
 @Injectable()
 export class Logger {
 
   log(value: any, ...rest) {
-    console.log(value, ...rest);
+    if (!environment.production) {
+      console.log(value, ...rest);
+    }
   }
 
   error(value: any, ...rest) {
diff --git a/aio/src/app/shared/scroll-spy.service.spec.ts b/aio/src/app/shared/scroll-spy.service.spec.ts
new file mode 100644
index 0000000000..7c7702fa3f
--- /dev/null
+++ b/aio/src/app/shared/scroll-spy.service.spec.ts
@@ -0,0 +1,519 @@
+import { Injector, ReflectiveInjector } from '@angular/core';
+import { fakeAsync, tick } from '@angular/core/testing';
+import { DOCUMENT } from '@angular/platform-browser';
+
+import { ScrollService } from 'app/shared/scroll.service';
+import { ScrollItem, ScrollSpiedElement, ScrollSpiedElementGroup, ScrollSpyInfo, ScrollSpyService } from 'app/shared/scroll-spy.service';
+
+
+describe('ScrollSpiedElement', () => {
+  it('should expose the spied element and index', () => {
+    const elem = {} as Element;
+    const spiedElem = new ScrollSpiedElement(elem, 42);
+
+    expect(spiedElem.element).toBe(elem);
+    expect(spiedElem.index).toBe(42);
+  });
+
+  describe('#calculateTop()', () => {
+    it('should calculate the `top` value', () => {
+      const elem = {getBoundingClientRect: () => ({top: 100})} as Element;
+      const spiedElem = new ScrollSpiedElement(elem, 42);
+
+      spiedElem.calculateTop(0, 0);
+      expect(spiedElem.top).toBe(100);
+
+      spiedElem.calculateTop(20, 0);
+      expect(spiedElem.top).toBe(120);
+
+      spiedElem.calculateTop(0, 10);
+      expect(spiedElem.top).toBe(90);
+
+      spiedElem.calculateTop(20, 10);
+      expect(spiedElem.top).toBe(110);
+    });
+  });
+});
+
+
+describe('ScrollSpiedElementGroup', () => {
+  describe('#calibrate()', () => {
+    it('should calculate `top` for all spied elements', () => {
+      const spy = spyOn(ScrollSpiedElement.prototype, 'calculateTop').and.returnValue(0);
+      const elems = [{}, {}, {}] as Element[];
+      const group = new ScrollSpiedElementGroup(elems);
+
+      expect(spy).not.toHaveBeenCalled();
+
+      group.calibrate(20, 10);
+      const callInfo = spy.calls.all();
+
+      expect(spy).toHaveBeenCalledTimes(3);
+      expect(callInfo[0].object.index).toBe(0);
+      expect(callInfo[1].object.index).toBe(1);
+      expect(callInfo[2].object.index).toBe(2);
+      expect(callInfo[0].args).toEqual([20, 10]);
+      expect(callInfo[1].args).toEqual([20, 10]);
+      expect(callInfo[2].args).toEqual([20, 10]);
+    });
+  });
+
+  describe('#onScroll()', () => {
+    let group: ScrollSpiedElementGroup;
+    let activeItems: ScrollItem[];
+
+    const activeIndices = () => activeItems.map(x => x && x.index);
+
+    beforeEach(() => {
+      const tops = [50, 150, 100];
+
+      spyOn(ScrollSpiedElement.prototype, 'calculateTop').and.callFake(function(scrollTop, topOffset) {
+        this.top = tops[this.index];
+      });
+
+      activeItems = [];
+      group = new ScrollSpiedElementGroup([{}, {}, {}] as Element[]);
+      group.activeScrollItem.subscribe(item => activeItems.push(item));
+      group.calibrate(20, 10);
+    });
+
+
+    it('should emit a `ScrollItem` on `activeScrollItem`', () => {
+      expect(activeItems.length).toBe(0);
+
+      group.onScroll(20, 140);
+      expect(activeItems.length).toBe(1);
+
+      group.onScroll(20, 140);
+      expect(activeItems.length).toBe(2);
+    });
+
+    it('should emit the lower-most element that is above `scrollTop`', () => {
+      group.onScroll(45, 200);
+      group.onScroll(55, 200);
+      expect(activeIndices()).toEqual([null, 0]);
+
+      activeItems.length = 0;
+      group.onScroll(95, 200);
+      group.onScroll(105, 200);
+      expect(activeIndices()).toEqual([0, 2]);
+
+      activeItems.length = 0;
+      group.onScroll(145, 200);
+      group.onScroll(155, 200);
+      expect(activeIndices()).toEqual([2, 1]);
+
+      activeItems.length = 0;
+      group.onScroll(75, 200);
+      group.onScroll(175, 200);
+      group.onScroll(125, 200);
+      group.onScroll(25, 200);
+      expect(activeIndices()).toEqual([0, 1, 2, null]);
+    });
+
+    it('should always emit the lower-most element if scrolled to the bottom', () => {
+      group.onScroll(140, 140);
+      group.onScroll(145, 140);
+      group.onScroll(138.5, 140);
+      group.onScroll(139.5, 140);
+
+      expect(activeIndices()).toEqual([1, 1, 2, 1]);
+    });
+
+    it('should emit null if all elements are below `scrollTop`', () => {
+      group.onScroll(0, 140);
+      expect(activeItems).toEqual([null]);
+
+      group.onScroll(49, 140);
+      expect(activeItems).toEqual([null, null]);
+    });
+
+    it('should emit null if there are no spied elements (even if scrolled to the bottom)', () => {
+      group = new ScrollSpiedElementGroup([]);
+      group.activeScrollItem.subscribe(item => activeItems.push(item));
+
+      group.onScroll(20, 140);
+      expect(activeItems).toEqual([null]);
+
+      group.onScroll(140, 140);
+      expect(activeItems).toEqual([null, null]);
+
+      group.onScroll(145, 140);
+      expect(activeItems).toEqual([null, null, null]);
+    });
+  });
+});
+
+
+describe('ScrollSpyService', () => {
+  let injector: Injector;
+  let scrollSpyService: ScrollSpyService;
+
+  beforeEach(() => {
+    injector = ReflectiveInjector.resolveAndCreate([
+      { provide: DOCUMENT, useValue: { body: {} } },
+      { provide: ScrollService, useValue: { topOffset: 50 } },
+      ScrollSpyService
+    ]);
+
+    scrollSpyService = injector.get(ScrollSpyService);
+  });
+
+
+  it('should be creatable', () => {
+    expect(scrollSpyService).toBeTruthy();
+  });
+
+  describe('#spyOn()', () => {
+    let getSpiedElemGroups: () => ScrollSpiedElementGroup[];
+
+    beforeEach(() => {
+      getSpiedElemGroups = () => (scrollSpyService as any).spiedElementGroups;
+    });
+
+
+    it('should create a `ScrollSpiedElementGroup` when called', () => {
+      expect(getSpiedElemGroups().length).toBe(0);
+
+      scrollSpyService.spyOn([]);
+      expect(getSpiedElemGroups().length).toBe(1);
+    });
+
+    it('should initialize the newly created `ScrollSpiedElementGroup`', () => {
+      const calibrateSpy = spyOn(ScrollSpiedElementGroup.prototype, 'calibrate');
+      const onScrollSpy = spyOn(ScrollSpiedElementGroup.prototype, 'onScroll');
+
+      scrollSpyService.spyOn([]);
+      expect(calibrateSpy).toHaveBeenCalledTimes(1);
+      expect(onScrollSpy).toHaveBeenCalledTimes(1);
+
+      scrollSpyService.spyOn([]);
+      expect(calibrateSpy).toHaveBeenCalledTimes(2);
+      expect(onScrollSpy).toHaveBeenCalledTimes(2);
+    });
+
+    it('should call `onResize()` if it is the first `ScrollSpiedElementGroup`', () => {
+      const actions: string[] = [];
+
+      const onResizeSpy = spyOn(ScrollSpyService.prototype as any, 'onResize')
+                          .and.callFake(() => actions.push('onResize'));
+      const calibrateSpy = spyOn(ScrollSpiedElementGroup.prototype, 'calibrate')
+                           .and.callFake(() => actions.push('calibrate'));
+
+      expect(onResizeSpy).not.toHaveBeenCalled();
+
+      scrollSpyService.spyOn([]);
+      expect(actions).toEqual(['onResize', 'calibrate']);
+
+      scrollSpyService.spyOn([]);
+      expect(actions).toEqual(['onResize', 'calibrate', 'calibrate']);
+    });
+
+    it('should forward `ScrollSpiedElementGroup#activeScrollItem` as `active`', () => {
+      const activeIndices1: (number | null)[] = [];
+      const activeIndices2: (number | null)[] = [];
+
+      const info1 = scrollSpyService.spyOn([]);
+      const info2 = scrollSpyService.spyOn([]);
+      const spiedElemGroups = getSpiedElemGroups();
+
+      info1.active.subscribe(item => activeIndices1.push(item && item.index));
+      info2.active.subscribe(item => activeIndices2.push(item && item.index));
+      activeIndices1.length = 0;
+      activeIndices2.length = 0;
+
+      spiedElemGroups[0].activeScrollItem.next({index: 1} as ScrollItem);
+      spiedElemGroups[0].activeScrollItem.next({index: 2} as ScrollItem);
+      spiedElemGroups[1].activeScrollItem.next({index: 3} as ScrollItem);
+      spiedElemGroups[0].activeScrollItem.next(null);
+      spiedElemGroups[1].activeScrollItem.next({index: 4} as ScrollItem);
+      spiedElemGroups[1].activeScrollItem.next(null);
+      spiedElemGroups[0].activeScrollItem.next({index: 5} as ScrollItem);
+      spiedElemGroups[1].activeScrollItem.next({index: 6} as ScrollItem);
+
+      expect(activeIndices1).toEqual([1, 2, null, 5]);
+      expect(activeIndices2).toEqual([3, 4, null, 6]);
+    });
+
+    it('should remember and emit the last active item to new subscribers', () => {
+      const items = [{index: 1}, {index: 2}, {index: 3}] as ScrollItem[];
+      let lastActiveItem: ScrollItem | null;
+
+      const info = scrollSpyService.spyOn([]);
+      const spiedElemGroup = getSpiedElemGroups()[0];
+
+      spiedElemGroup.activeScrollItem.next(items[0]);
+      spiedElemGroup.activeScrollItem.next(items[1]);
+      spiedElemGroup.activeScrollItem.next(items[2]);
+      spiedElemGroup.activeScrollItem.next(null);
+      spiedElemGroup.activeScrollItem.next(items[1]);
+      info.active.subscribe(item => lastActiveItem = item);
+
+      expect(lastActiveItem).toBe(items[1]);
+
+      spiedElemGroup.activeScrollItem.next(null);
+      info.active.subscribe(item => lastActiveItem = item);
+
+      expect(lastActiveItem).toBeNull();
+    });
+
+    it('should only emit distinct values on `active`', () => {
+      const items = [{index: 1}, {index: 2}] as ScrollItem[];
+      const activeIndices: (number | null)[] = [];
+
+      const info = scrollSpyService.spyOn([]);
+      const spiedElemGroup = getSpiedElemGroups()[0];
+
+      info.active.subscribe(item => activeIndices.push(item && item.index));
+      activeIndices.length = 0;
+
+      spiedElemGroup.activeScrollItem.next(items[0]);
+      spiedElemGroup.activeScrollItem.next(items[0]);
+      spiedElemGroup.activeScrollItem.next(items[1]);
+      spiedElemGroup.activeScrollItem.next(items[1]);
+      spiedElemGroup.activeScrollItem.next(null);
+      spiedElemGroup.activeScrollItem.next(null);
+      spiedElemGroup.activeScrollItem.next(items[0]);
+      spiedElemGroup.activeScrollItem.next(items[1]);
+      spiedElemGroup.activeScrollItem.next(null);
+
+      expect(activeIndices).toEqual([1, 2, null, 1, 2, null]);
+    });
+
+    it('should remove the corresponding `ScrollSpiedElementGroup` when calling `unspy()`', () => {
+      const info1 = scrollSpyService.spyOn([]);
+      const info2 = scrollSpyService.spyOn([]);
+      const info3 = scrollSpyService.spyOn([]);
+      const groups = getSpiedElemGroups().slice();
+
+      expect(getSpiedElemGroups()).toEqual(groups);
+
+      info2.unspy();
+      expect(getSpiedElemGroups()).toEqual([groups[0], groups[2]]);
+
+      info1.unspy();
+      expect(getSpiedElemGroups()).toEqual([groups[2]]);
+
+      info3.unspy();
+      expect(getSpiedElemGroups()).toEqual([]);
+    });
+  });
+
+  describe('window resize events', () => {
+    const RESIZE_EVENT_DELAY = 300;
+    let onResizeSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      onResizeSpy = spyOn(ScrollSpyService.prototype as any, 'onResize');
+    });
+
+
+    it('should be subscribed to when the first group of elements is spied on', fakeAsync(() => {
+      window.dispatchEvent(new Event('resize'));
+      expect(onResizeSpy).not.toHaveBeenCalled();
+
+      scrollSpyService.spyOn([]);
+      onResizeSpy.calls.reset();
+
+      window.dispatchEvent(new Event('resize'));
+      expect(onResizeSpy).not.toHaveBeenCalled();
+
+      tick(RESIZE_EVENT_DELAY);
+      expect(onResizeSpy).toHaveBeenCalled();
+    }));
+
+    it('should be unsubscribed from when the last group of elements is removed', fakeAsync(() => {
+      const info1 = scrollSpyService.spyOn([]);
+      const info2 = scrollSpyService.spyOn([]);
+      onResizeSpy.calls.reset();
+
+      window.dispatchEvent(new Event('resize'));
+      tick(RESIZE_EVENT_DELAY);
+      expect(onResizeSpy).toHaveBeenCalled();
+
+      info1.unspy();
+      onResizeSpy.calls.reset();
+
+      window.dispatchEvent(new Event('resize'));
+      tick(RESIZE_EVENT_DELAY);
+      expect(onResizeSpy).toHaveBeenCalled();
+
+      info2.unspy();
+      onResizeSpy.calls.reset();
+
+      window.dispatchEvent(new Event('resize'));
+      tick(RESIZE_EVENT_DELAY);
+      expect(onResizeSpy).not.toHaveBeenCalled();
+    }));
+
+    it(`should only fire every ${RESIZE_EVENT_DELAY}ms`, fakeAsync(() => {
+      scrollSpyService.spyOn([]);
+      onResizeSpy.calls.reset();
+
+      window.dispatchEvent(new Event('resize'));
+      tick(RESIZE_EVENT_DELAY - 2);
+      expect(onResizeSpy).not.toHaveBeenCalled();
+
+      window.dispatchEvent(new Event('resize'));
+      tick(1);
+      expect(onResizeSpy).not.toHaveBeenCalled();
+
+      window.dispatchEvent(new Event('resize'));
+      tick(1);
+      expect(onResizeSpy).toHaveBeenCalledTimes(1);
+
+      onResizeSpy.calls.reset();
+      tick(RESIZE_EVENT_DELAY / 2);
+
+      window.dispatchEvent(new Event('resize'));
+      tick(RESIZE_EVENT_DELAY - 2);
+      expect(onResizeSpy).not.toHaveBeenCalled();
+
+      window.dispatchEvent(new Event('resize'));
+      tick(1);
+      expect(onResizeSpy).not.toHaveBeenCalled();
+
+      window.dispatchEvent(new Event('resize'));
+      tick(1);
+      expect(onResizeSpy).toHaveBeenCalledTimes(1);
+    }));
+  });
+
+  describe('window scroll events', () => {
+    const SCROLL_EVENT_DELAY = 10;
+    let onScrollSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      onScrollSpy = spyOn(ScrollSpyService.prototype as any, 'onScroll');
+    });
+
+
+    it('should be subscribed to when the first group of elements is spied on', fakeAsync(() => {
+      window.dispatchEvent(new Event('scroll'));
+      expect(onScrollSpy).not.toHaveBeenCalled();
+
+      scrollSpyService.spyOn([]);
+
+      window.dispatchEvent(new Event('scroll'));
+      expect(onScrollSpy).not.toHaveBeenCalled();
+
+      tick(SCROLL_EVENT_DELAY);
+      expect(onScrollSpy).toHaveBeenCalled();
+    }));
+
+    it('should be unsubscribed from when the last group of elements is removed', fakeAsync(() => {
+      const info1 = scrollSpyService.spyOn([]);
+      const info2 = scrollSpyService.spyOn([]);
+
+      window.dispatchEvent(new Event('scroll'));
+      tick(SCROLL_EVENT_DELAY);
+      expect(onScrollSpy).toHaveBeenCalled();
+
+      info1.unspy();
+      onScrollSpy.calls.reset();
+
+      window.dispatchEvent(new Event('scroll'));
+      tick(SCROLL_EVENT_DELAY);
+      expect(onScrollSpy).toHaveBeenCalled();
+
+      info2.unspy();
+      onScrollSpy.calls.reset();
+
+      window.dispatchEvent(new Event('scroll'));
+      tick(SCROLL_EVENT_DELAY);
+      expect(onScrollSpy).not.toHaveBeenCalled();
+    }));
+
+    it(`should only fire every ${SCROLL_EVENT_DELAY}ms`, fakeAsync(() => {
+      scrollSpyService.spyOn([]);
+
+      window.dispatchEvent(new Event('scroll'));
+      tick(SCROLL_EVENT_DELAY - 2);
+      expect(onScrollSpy).not.toHaveBeenCalled();
+
+      window.dispatchEvent(new Event('scroll'));
+      tick(1);
+      expect(onScrollSpy).not.toHaveBeenCalled();
+
+      window.dispatchEvent(new Event('scroll'));
+      tick(1);
+      expect(onScrollSpy).toHaveBeenCalledTimes(1);
+
+      onScrollSpy.calls.reset();
+      tick(SCROLL_EVENT_DELAY / 2);
+
+      window.dispatchEvent(new Event('scroll'));
+      tick(SCROLL_EVENT_DELAY - 2);
+      expect(onScrollSpy).not.toHaveBeenCalled();
+
+      window.dispatchEvent(new Event('scroll'));
+      tick(1);
+      expect(onScrollSpy).not.toHaveBeenCalled();
+
+      window.dispatchEvent(new Event('scroll'));
+      tick(1);
+      expect(onScrollSpy).toHaveBeenCalledTimes(1);
+    }));
+  });
+
+  describe('#onResize()', () => {
+    it('should re-calibrate each `ScrollSpiedElementGroup`', () => {
+      scrollSpyService.spyOn([]);
+      scrollSpyService.spyOn([]);
+      scrollSpyService.spyOn([]);
+
+      const spiedElemGroups: ScrollSpiedElementGroup[] = (scrollSpyService as any).spiedElementGroups;
+      const calibrateSpies = spiedElemGroups.map(group => spyOn(group, 'calibrate'));
+
+      calibrateSpies.forEach(spy => expect(spy).not.toHaveBeenCalled());
+
+      (scrollSpyService as any).onResize();
+      calibrateSpies.forEach(spy => expect(spy).toHaveBeenCalled());
+    });
+  });
+
+  describe('#onScroll()', () => {
+    it('should propagate to each `ScrollSpiedElementGroup`', () => {
+      scrollSpyService.spyOn([]);
+      scrollSpyService.spyOn([]);
+      scrollSpyService.spyOn([]);
+
+      const spiedElemGroups: ScrollSpiedElementGroup[] = (scrollSpyService as any).spiedElementGroups;
+      const onScrollSpies = spiedElemGroups.map(group => spyOn(group, 'onScroll'));
+
+      onScrollSpies.forEach(spy => expect(spy).not.toHaveBeenCalled());
+
+      (scrollSpyService as any).onScroll();
+      onScrollSpies.forEach(spy => expect(spy).toHaveBeenCalled());
+    });
+
+    it('should first re-calibrate if the content height has changed', () => {
+      const body = injector.get(DOCUMENT).body as any;
+
+      scrollSpyService.spyOn([]);
+      scrollSpyService.spyOn([]);
+      scrollSpyService.spyOn([]);
+
+      const spiedElemGroups: ScrollSpiedElementGroup[] = (scrollSpyService as any).spiedElementGroups;
+      const onScrollSpies = spiedElemGroups.map(group => spyOn(group, 'onScroll'));
+      const calibrateSpies = spiedElemGroups.map((group, i) => spyOn(group, 'calibrate')
+                .and.callFake(() => expect(onScrollSpies[i]).not.toHaveBeenCalled()));
+
+      calibrateSpies.forEach(spy => expect(spy).not.toHaveBeenCalled());
+      onScrollSpies.forEach(spy => expect(spy).not.toHaveBeenCalled());
+
+      // No content height change...
+      (scrollSpyService as any).onScroll();
+      calibrateSpies.forEach(spy => expect(spy).not.toHaveBeenCalled());
+      onScrollSpies.forEach(spy => expect(spy).toHaveBeenCalled());
+
+      onScrollSpies.forEach(spy => spy.calls.reset());
+      body.scrollHeight = 100;
+
+      // Viewport changed...
+      (scrollSpyService as any).onScroll();
+      calibrateSpies.forEach(spy => expect(spy).toHaveBeenCalled());
+      onScrollSpies.forEach(spy => expect(spy).toHaveBeenCalled());
+    });
+  });
+});
diff --git a/aio/src/app/shared/scroll-spy.service.ts b/aio/src/app/shared/scroll-spy.service.ts
new file mode 100644
index 0000000000..4ef2c6d534
--- /dev/null
+++ b/aio/src/app/shared/scroll-spy.service.ts
@@ -0,0 +1,233 @@
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+import { Observable } from 'rxjs/Observable';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/observable/fromEvent';
+import 'rxjs/add/operator/auditTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/takeUntil';
+
+import { ScrollService } from 'app/shared/scroll.service';
+
+
+export interface ScrollItem {
+  element: Element;
+  index: number;
+}
+
+export interface ScrollSpyInfo {
+  active: Observable<ScrollItem | null>;
+  unspy: () => void;
+}
+
+/*
+ * Represents a "scroll-spied" element. Contains info and methods for determining whether this
+ * element is the active one (i.e. whether it has been scrolled passed), based on the window's
+ * scroll position.
+ *
+ * @prop {Element} element - The element whose position relative to the viewport is tracked.
+ * @prop {number}  index   - The index of the element in the original list of element (group).
+ * @prop {number}  top     - The `scrollTop` value at which this element becomes active.
+ */
+export class ScrollSpiedElement implements ScrollItem {
+  top = 0;
+
+  /*
+   * @constructor
+   * @param {Element} element - The element whose position relative to the viewport is tracked.
+   * @param {number}  index   - The index of the element in the original list of element (group).
+   */
+  constructor(public readonly element: Element, public readonly index: number) {}
+
+  /*
+   * @method
+   * Caclulate the `top` value, i.e. the value of the `scrollTop` property at which this element
+   * becomes active. The current implementation assumes that window is the scroll-container.
+   *
+   * @param {number} scrollTop - How much is window currently scrolled (vertically).
+   * @param {number} topOffset - The distance from the top at which the element becomes active.
+   */
+  calculateTop(scrollTop: number, topOffset: number) {
+    this.top = scrollTop + this.element.getBoundingClientRect().top - topOffset;
+  }
+}
+
+/*
+ * Represents a group of "scroll-spied" elements. Contains info and methods for efficiently
+ * determining which element should be considered "active", i.e. which element has been scrolled
+ * passed the top of the viewport.
+ *
+ * @prop {Observable<ScrollItem | null>} activeScrollItem - An observable that emits ScrollItem
+ *     elements (containing the HTML element and its original index) identifying the latest "active"
+ *     element from a list of elements.
+ */
+export class ScrollSpiedElementGroup {
+  activeScrollItem: ReplaySubject<ScrollItem | null> = new ReplaySubject(1);
+  private spiedElements: ScrollSpiedElement[];
+
+  /*
+   * @constructor
+   * @param {Element[]} elements - A list of elements whose position relative to the viewport will
+   *     be tracked, in order to determine which one is "active" at any given moment.
+   */
+  constructor(elements: Element[]) {
+    this.spiedElements = elements.map((elem, i) => new ScrollSpiedElement(elem, i));
+  }
+
+  /*
+   * @method
+   * Caclulate the `top` value of each ScrollSpiedElement of this group (based on te current
+   * `scrollTop` and `topOffset` values), so that the active element can be later determined just by
+   * comparing its `top` property with the then current `scrollTop`.
+   *
+   * @param {number} scrollTop - How much is window currently scrolled (vertically).
+   * @param {number} topOffset - The distance from the top at which the element becomes active.
+   */
+  calibrate(scrollTop: number, topOffset: number) {
+    this.spiedElements.forEach(spiedElem => spiedElem.calculateTop(scrollTop, topOffset));
+    this.spiedElements.sort((a, b) => b.top - a.top);   // Sort in descending `top` order.
+  }
+
+  /*
+   * @method
+   * Determine which element is the currently active one, i.e. the lower-most element that is
+   * scrolled passed the top of the viewport (taking offsets into account) and emit it on
+   * `activeScrollItem`.
+   * If no element can be considered active, `null` is emitted instead.
+   * If window is scrolled all the way to the bottom, then the lower-most element is considered
+   * active even if it not scrolled passed the top of the viewport.
+   *
+   * @param {number} scrollTop    - How much is window currently scrolled (vertically).
+   * @param {number} maxScrollTop - The maximum possible `scrollTop` (based on the viewport size).
+   */
+  onScroll(scrollTop: number, maxScrollTop: number) {
+    let activeItem: ScrollItem;
+
+    if (scrollTop + 1 >= maxScrollTop) {
+      activeItem = this.spiedElements[0];
+    } else {
+      this.spiedElements.some(spiedElem => {
+        if (spiedElem.top <= scrollTop) {
+          activeItem = spiedElem;
+          return true;
+        }
+      });
+    }
+
+    this.activeScrollItem.next(activeItem || null);
+  }
+}
+
+@Injectable()
+export class ScrollSpyService {
+  private spiedElementGroups: ScrollSpiedElementGroup[] = [];
+  private onStopListening = new Subject();
+  private resizeEvents = Observable.fromEvent(window, 'resize').auditTime(300).takeUntil(this.onStopListening);
+  private scrollEvents = Observable.fromEvent(window, 'scroll').auditTime(10).takeUntil(this.onStopListening);
+  private lastContentHeight: number;
+  private lastMaxScrollTop: number;
+
+  constructor(@Inject(DOCUMENT) private doc: any, private scrollService: ScrollService) {}
+
+  /*
+   * @method
+   * Start tracking a group of elements and emitting active elements; i.e. elements that are
+   * currently visible in the viewport. If there was no other group being spied, start listening for
+   * `resize` and `scroll` events.
+   *
+   * @param {Element[]} elements - A list of elements to track.
+   *
+   * @return {ScrollSpyInfo} - An object containing the following properties:
+   *     - `active`: An observable of distinct ScrollItems.
+   *     - `unspy`: A method to stop tracking this group of elements.
+   */
+  spyOn(elements: Element[]): ScrollSpyInfo {
+    if (!this.spiedElementGroups.length) {
+      this.resizeEvents.subscribe(() => this.onResize());
+      this.scrollEvents.subscribe(() => this.onScroll());
+      this.onResize();
+    }
+
+    const scrollTop = this.getScrollTop();
+    const topOffset = this.getTopOffset();
+    const maxScrollTop = this.lastMaxScrollTop;
+
+    const spiedGroup = new ScrollSpiedElementGroup(elements);
+    spiedGroup.calibrate(scrollTop, topOffset);
+    spiedGroup.onScroll(scrollTop, maxScrollTop);
+
+    this.spiedElementGroups.push(spiedGroup);
+
+    return {
+      active: spiedGroup.activeScrollItem.asObservable().distinctUntilChanged(),
+      unspy: () => this.unspy(spiedGroup)
+    };
+  }
+
+  private getContentHeight() {
+    return this.doc.body.scrollHeight || Number.MAX_SAFE_INTEGER;
+  }
+
+  private getScrollTop() {
+    return window && window.pageYOffset || 0;
+  }
+
+  private getTopOffset() {
+    return this.scrollService.topOffset + 50;
+  }
+
+  private getViewportHeight() {
+    return this.doc.body.clientHeight || 0;
+  }
+
+  /*
+   * @method
+   * The size of the window has changed. Re-calculate all affected values,
+   * so that active elements can be determined efficiently on scroll.
+   */
+  private onResize() {
+    const contentHeight = this.getContentHeight();
+    const viewportHeight = this.getViewportHeight();
+    const scrollTop = this.getScrollTop();
+    const topOffset = this.getTopOffset();
+
+    this.lastContentHeight = contentHeight;
+    this.lastMaxScrollTop = contentHeight - viewportHeight;
+
+    this.spiedElementGroups.forEach(group => group.calibrate(scrollTop, topOffset));
+  }
+
+  /*
+   * @method
+   * Determine which element for each ScrollSpiedElementGroup is active. If the content height has
+   * changed since last check, re-calculate all affected values first.
+   */
+  private onScroll() {
+    if (this.lastContentHeight !== this.getContentHeight()) {
+      // Something has caused the scroll height to change.
+      // (E.g. image downloaded, accordion expanded/collapsed etc.)
+      this.onResize();
+    }
+
+    const scrollTop = this.getScrollTop();
+    const maxScrollTop = this.lastMaxScrollTop;
+    this.spiedElementGroups.forEach(group => group.onScroll(scrollTop, maxScrollTop));
+  }
+
+  /*
+   * @method
+   * Stop tracking this group of elements and emitting active elements. If there is no other group
+   * being spied, stop listening for `resize` or `scroll` events.
+   *
+   * @param {ScrollSpiedElementGroup} spiedGroup - The group to stop tracking.
+   */
+  private unspy(spiedGroup: ScrollSpiedElementGroup) {
+    spiedGroup.activeScrollItem.complete();
+    this.spiedElementGroups = this.spiedElementGroups.filter(group => group !== spiedGroup);
+
+    if (!this.spiedElementGroups.length) {
+      this.onStopListening.next();
+    }
+  }
+}
diff --git a/aio/src/app/shared/scroll.service.spec.ts b/aio/src/app/shared/scroll.service.spec.ts
new file mode 100644
index 0000000000..078bad131c
--- /dev/null
+++ b/aio/src/app/shared/scroll.service.spec.ts
@@ -0,0 +1,202 @@
+import { ReflectiveInjector } from '@angular/core';
+import { PlatformLocation } from '@angular/common';
+import { DOCUMENT } from '@angular/platform-browser';
+
+import { ScrollService, topMargin } from './scroll.service';
+
+describe('ScrollService', () => {
+  const topOfPageElem = {} as Element;
+  let injector: ReflectiveInjector;
+  let document: MockDocument;
+  let location: MockPlatformLocation;
+  let scrollService: ScrollService;
+
+  class MockPlatformLocation {
+    hash: string;
+  }
+
+  class MockDocument {
+    body = new MockElement();
+    getElementById = jasmine.createSpy('Document getElementById').and.returnValue(topOfPageElem);
+    querySelector = jasmine.createSpy('Document querySelector');
+  }
+
+  class MockElement {
+    getBoundingClientRect = jasmine.createSpy('Element getBoundingClientRect')
+                                   .and.returnValue({top: 0});
+    scrollIntoView = jasmine.createSpy('Element scrollIntoView');
+  }
+
+  beforeEach(() => {
+    spyOn(window, 'scrollBy');
+  });
+
+  beforeEach(() => {
+    injector = ReflectiveInjector.resolveAndCreate([
+        ScrollService,
+        { provide: DOCUMENT, useClass: MockDocument },
+        { provide: PlatformLocation, useClass: MockPlatformLocation }
+    ]);
+    location = injector.get(PlatformLocation);
+    document = injector.get(DOCUMENT);
+    scrollService = injector.get(ScrollService);
+  });
+
+  describe('#topOffset', () => {
+    it('should query for the top-bar by CSS selector', () => {
+      expect(document.querySelector).not.toHaveBeenCalled();
+
+      expect(scrollService.topOffset).toBe(topMargin);
+      expect(document.querySelector).toHaveBeenCalled();
+    });
+
+    it('should be calculated based on the top-bar\'s height + margin', () => {
+      (document.querySelector as jasmine.Spy).and.returnValue({clientHeight: 50});
+      expect(scrollService.topOffset).toBe(50 + topMargin);
+    });
+
+    it('should only query for the top-bar once', () => {
+      expect(scrollService.topOffset).toBe(topMargin);
+      (document.querySelector as jasmine.Spy).calls.reset();
+
+      expect(scrollService.topOffset).toBe(topMargin);
+      expect(document.querySelector).not.toHaveBeenCalled();
+    });
+
+    it('should retrieve the top-bar\'s height again after resize', () => {
+      let clientHeight = 50;
+      (document.querySelector as jasmine.Spy).and.callFake(() => ({clientHeight}));
+
+      expect(scrollService.topOffset).toBe(50 + topMargin);
+      expect(document.querySelector).toHaveBeenCalled();
+
+      (document.querySelector as jasmine.Spy).calls.reset();
+      clientHeight = 100;
+
+      expect(scrollService.topOffset).toBe(50 + topMargin);
+      expect(document.querySelector).not.toHaveBeenCalled();
+
+      window.dispatchEvent(new Event('resize'));
+
+      expect(scrollService.topOffset).toBe(100 + topMargin);
+      expect(document.querySelector).toHaveBeenCalled();
+    });
+  });
+
+  describe('#topOfPageElement', () => {
+    it('should query for the top-of-page element by ID', () => {
+      expect(document.getElementById).not.toHaveBeenCalled();
+
+      expect(scrollService.topOfPageElement).toBe(topOfPageElem);
+      expect(document.getElementById).toHaveBeenCalled();
+    });
+
+    it('should only query for the top-of-page element once', () => {
+      expect(scrollService.topOfPageElement).toBe(topOfPageElem);
+      (document.getElementById as jasmine.Spy).calls.reset();
+
+      expect(scrollService.topOfPageElement).toBe(topOfPageElem);
+      expect(document.getElementById).not.toHaveBeenCalled();
+    });
+
+    it('should return `<body>` if unable to find the top-of-page element', () => {
+      (document.getElementById as jasmine.Spy).and.returnValue(null);
+      expect(scrollService.topOfPageElement).toBe(document.body as any);
+    });
+  });
+
+  describe('#scroll', () => {
+    it('should scroll to the top if there is no hash', () => {
+      location.hash = '';
+
+      const topOfPage = new MockElement();
+      document.getElementById.and
+              .callFake(id  => id === 'top-of-page' ? topOfPage : null);
+
+      scrollService.scroll();
+      expect(topOfPage.scrollIntoView).toHaveBeenCalled();
+    });
+
+    it('should not scroll if the hash does not match an element id', () => {
+      location.hash = 'not-found';
+      document.getElementById.and.returnValue(null);
+
+      scrollService.scroll();
+      expect(document.getElementById).toHaveBeenCalledWith('not-found');
+      expect(window.scrollBy).not.toHaveBeenCalled();
+    });
+
+    it('should scroll to the element whose id matches the hash', () => {
+      const element = new MockElement();
+      location.hash = 'some-id';
+      document.getElementById.and.returnValue(element);
+
+      scrollService.scroll();
+      expect(document.getElementById).toHaveBeenCalledWith('some-id');
+      expect(element.scrollIntoView).toHaveBeenCalled();
+      expect(window.scrollBy).toHaveBeenCalled();
+    });
+  });
+
+  describe('#scrollToElement', () => {
+    it('should scroll to element', () => {
+      const element: Element = new MockElement() as any;
+      scrollService.scrollToElement(element);
+      expect(element.scrollIntoView).toHaveBeenCalled();
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -scrollService.topOffset);
+    });
+
+    it('should not scroll more than necessary (e.g. for elements close to the bottom)', () => {
+      const element: Element = new MockElement() as any;
+      const getBoundingClientRect = element.getBoundingClientRect as jasmine.Spy;
+      const topOffset = scrollService.topOffset;
+
+      getBoundingClientRect.and.returnValue({top: topOffset + 100});
+      scrollService.scrollToElement(element);
+      expect(element.scrollIntoView).toHaveBeenCalledTimes(1);
+      expect(window.scrollBy).toHaveBeenCalledWith(0, 100);
+
+      getBoundingClientRect.and.returnValue({top: topOffset - 10});
+      scrollService.scrollToElement(element);
+      expect(element.scrollIntoView).toHaveBeenCalledTimes(2);
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -10);
+    });
+
+    it('should scroll all the way to the top if close enough', () => {
+      const element: Element = new MockElement() as any;
+
+      (window as any).pageYOffset = 25;
+      scrollService.scrollToElement(element);
+
+      expect(element.scrollIntoView).toHaveBeenCalled();
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -scrollService.topOffset);
+      (window.scrollBy as jasmine.Spy).calls.reset();
+
+      (window as any).pageYOffset = 15;
+      scrollService.scrollToElement(element);
+
+      expect(element.scrollIntoView).toHaveBeenCalled();
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -scrollService.topOffset);
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -15);
+    });
+
+    it('should do nothing if no element', () => {
+      scrollService.scrollToElement(null);
+      expect(window.scrollBy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('#scrollToTop', () => {
+    it('should scroll to top', () => {
+      const topOfPageElement = <Element><any> new MockElement();
+      document.getElementById.and.callFake(
+        id => id === 'top-of-page' ? topOfPageElement : null
+      );
+
+      scrollService.scrollToTop();
+      expect(topOfPageElement.scrollIntoView).toHaveBeenCalled();
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -topMargin);
+    });
+  });
+
+});
diff --git a/aio/src/app/shared/scroll.service.ts b/aio/src/app/shared/scroll.service.ts
new file mode 100644
index 0000000000..b6dba4dbed
--- /dev/null
+++ b/aio/src/app/shared/scroll.service.ts
@@ -0,0 +1,88 @@
+import { Injectable, Inject } from '@angular/core';
+import { PlatformLocation } from '@angular/common';
+import { DOCUMENT } from '@angular/platform-browser';
+import {fromEvent} from 'rxjs/observable/fromEvent';
+
+export const topMargin = 16;
+/**
+ * A service that scrolls document elements into view
+ */
+@Injectable()
+export class ScrollService {
+
+  private _topOffset: number | null;
+  private _topOfPageElement: Element;
+
+  // Offset from the top of the document to bottom of any static elements
+  // at the top (e.g. toolbar) + some margin
+  get topOffset() {
+    if (!this._topOffset) {
+      const toolbar = this.document.querySelector('md-toolbar.app-toolbar');
+      this._topOffset = (toolbar && toolbar.clientHeight || 0) + topMargin;
+    }
+    return this._topOffset;
+  }
+
+  get topOfPageElement() {
+    if (!this._topOfPageElement) {
+      this._topOfPageElement = this.document.getElementById('top-of-page') || this.document.body;
+    }
+    return this._topOfPageElement;
+  }
+
+  constructor(
+      @Inject(DOCUMENT) private document: any,
+      private location: PlatformLocation) {
+    // On resize, the toolbar might change height, so "invalidate" the top offset.
+    fromEvent(window, 'resize').subscribe(() => this._topOffset = null);
+  }
+
+  /**
+   * Scroll to the element with id extracted from the current location hash fragment.
+   * Scroll to top if no hash.
+   * Don't scroll if hash not found.
+   */
+  scroll() {
+    const hash = this.getCurrentHash();
+    const element: HTMLElement = hash
+        ? this.document.getElementById(hash)
+        : this.topOfPageElement;
+    this.scrollToElement(element);
+  }
+
+  /**
+   * Scroll to the element.
+   * Don't scroll if no element.
+   */
+  scrollToElement(element: Element) {
+    if (element) {
+      element.scrollIntoView();
+
+      if (window && window.scrollBy) {
+        // Scroll as much as necessary to align the top of `element` at `topOffset`.
+        // (Usually, `.top` will be 0, except for cases where the element cannot be scrolled all the
+        //  way to the top, because the viewport is larger than the height of the content after the
+        //  element.)
+        window.scrollBy(0, element.getBoundingClientRect().top - this.topOffset);
+
+        // If we are very close to the top (<20px), then scroll all the way up.
+        // (This can happen if `element` is at the top of the page, but has a small top-margin.)
+        if (window.pageYOffset < 20) {
+          window.scrollBy(0, -window.pageYOffset);
+        }
+      }
+    }
+  }
+
+  /** Scroll to the top of the document. */
+  scrollToTop() {
+    this.scrollToElement(this.topOfPageElement);
+  }
+
+  /**
+   * Return the hash fragment from the `PlatformLocation`, minus the leading `#`.
+   */
+  private getCurrentHash() {
+    return this.location.hash.replace(/^#/, '');
+  }
+}
diff --git a/aio/src/app/shared/select/select.component.html b/aio/src/app/shared/select/select.component.html
new file mode 100644
index 0000000000..54974b82c0
--- /dev/null
+++ b/aio/src/app/shared/select/select.component.html
@@ -0,0 +1,16 @@
+<div class="form-select-menu">
+  <button class="form-select-button" (click)="toggleOptions()">
+    <strong>{{label}}</strong><span *ngIf="showSymbol" class="symbol {{selected?.value}}"></span>{{selected?.title}}
+  </button>
+  <ul class="form-select-dropdown" *ngIf="showOptions">
+    <li *ngFor="let option of options; index as i"
+        [class.selected]="option === selected"
+        role="button"
+        tabindex="0"
+        (click)="select(option, i)"
+        (keydown.enter)="select(option, i)"
+        (keydown.space)="select(option, i); $event.preventDefault()">
+      <span *ngIf="showSymbol" class="symbol {{option.value}}"></span>{{option.title}}
+    </li>
+  </ul>
+</div>
diff --git a/aio/src/app/shared/select/select.component.spec.ts b/aio/src/app/shared/select/select.component.spec.ts
new file mode 100644
index 0000000000..5efaed1e50
--- /dev/null
+++ b/aio/src/app/shared/select/select.component.spec.ts
@@ -0,0 +1,165 @@
+import { Component, DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SelectComponent, Option } from './select.component';
+
+const options = [
+  { title: 'Option A', value: 'option-a' },
+  { title: 'Option B', value: 'option-b' }
+];
+
+let component: SelectComponent;
+let host: HostComponent;
+let fixture: ComponentFixture<HostComponent>;
+let element: DebugElement;
+
+describe('SelectComponent', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SelectComponent, HostComponent ],
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HostComponent);
+    host = fixture.componentInstance;
+    element = fixture.debugElement.query(By.directive(SelectComponent));
+    component = element.componentInstance;
+  });
+
+  describe('(initially)', () => {
+    it('should show the button and no options', () => {
+      expect(getButton()).toBeDefined();
+      expect(getOptionContainer()).toEqual(null);
+    });
+  });
+
+  describe('button', () => {
+    it('should display the label if provided', () => {
+      expect(getButton().textContent.trim()).toEqual('');
+      host.label = 'Label:';
+      fixture.detectChanges();
+      expect(getButton().textContent.trim()).toEqual('Label:');
+    });
+
+    it('should contain a symbol `<span>` if hasSymbol is true', () => {
+      expect(getButton().querySelector('span')).toEqual(null);
+      host.showSymbol = true;
+      fixture.detectChanges();
+      const span = getButton().querySelector('span');
+      expect(span).not.toEqual(null);
+      expect(span.className).toContain('symbol');
+    });
+
+    it('should display the selected option, if there is one', () => {
+      host.showSymbol = true;
+      host.selected = options[0];
+      fixture.detectChanges();
+      expect(getButton().textContent).toContain(options[0].title);
+      expect(getButton().querySelector('span').className).toContain(options[0].value);
+    });
+
+    it('should toggle the visibility of the options list when clicked', () => {
+      host.options = options;
+      getButton().click();
+      fixture.detectChanges();
+      expect(getOptionContainer()).not.toEqual(null);
+      getButton().click();
+      fixture.detectChanges();
+      expect(getOptionContainer()).toEqual(null);
+    });
+  });
+
+  describe('options list', () => {
+    beforeEach(() => {
+      host.options = options;
+      host.showSymbol = true;
+      getButton().click(); // ensure the the options are visible
+      fixture.detectChanges();
+    });
+
+    it('should show the corresponding title of each option', () => {
+      getOptions().forEach((li, index) => {
+        expect(li.textContent).toContain(options[index].title);
+      });
+    });
+
+    it('should select the option that is clicked', () => {
+      getOptions()[0].click();
+      fixture.detectChanges();
+      expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
+      expect(getButton().textContent).toContain(options[0].title);
+      expect(getButton().querySelector('span').className).toContain(options[0].value);
+    });
+
+    it('should select the current option when enter is pressed', () => {
+      const e = new KeyboardEvent('keydown', {bubbles: true, cancelable: true, key: 'Enter'});
+      getOptions()[0].dispatchEvent(e);
+      fixture.detectChanges();
+      expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
+      expect(getButton().textContent).toContain(options[0].title);
+      expect(getButton().querySelector('span').className).toContain(options[0].value);
+    });
+
+    it('should select the current option when space is pressed', () => {
+      const e = new KeyboardEvent('keydown', {bubbles: true, cancelable: true, key: ' '});
+      getOptions()[0].dispatchEvent(e);
+      fixture.detectChanges();
+      expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
+      expect(getButton().textContent).toContain(options[0].title);
+      expect(getButton().querySelector('span').className).toContain(options[0].value);
+    });
+
+    it('should hide when an option is clicked', () => {
+      getOptions()[0].click();
+      fixture.detectChanges();
+      expect(getOptionContainer()).toEqual(null);
+    });
+
+    it('should hide when there is a click that is not on the option list', () => {
+      fixture.nativeElement.click();
+      fixture.detectChanges();
+      expect(getOptionContainer()).toEqual(null);
+    });
+
+    it('should hide if the escape button is pressed', () => {
+      const e = new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Escape' });
+      document.dispatchEvent(e);
+      fixture.detectChanges();
+      expect(getOptionContainer()).toEqual(null);
+    });
+  });
+});
+
+
+
+@Component({
+  template: `
+    <aio-select (change)="onChange($event)"
+              [options]="options"
+              [selected]="selected"
+              [label]="label"
+              [showSymbol]="showSymbol">
+    </aio-select>`
+})
+class HostComponent {
+  onChange = jasmine.createSpy('onChange');
+  options: Option[];
+  selected: Option;
+  label: string;
+  showSymbol: boolean;
+}
+
+function getButton(): HTMLButtonElement {
+  return element.query(By.css('button')).nativeElement;
+}
+
+function getOptionContainer(): HTMLUListElement {
+  const de = element.query(By.css('ul'));
+  return de && de.nativeElement;
+}
+
+function getOptions(): HTMLLIElement[] {
+  return element.queryAll(By.css('li')).map(de => de.nativeElement);
+}
diff --git a/aio/src/app/shared/select/select.component.ts b/aio/src/app/shared/select/select.component.ts
new file mode 100644
index 0000000000..11bc9913df
--- /dev/null
+++ b/aio/src/app/shared/select/select.component.ts
@@ -0,0 +1,62 @@
+import { Component, ElementRef, EventEmitter, HostListener, Input, Output, OnInit } from '@angular/core';
+
+export interface Option {
+  title: string;
+  value?: any;
+}
+
+@Component({
+  selector: 'aio-select',
+  templateUrl: 'select.component.html'
+})
+export class SelectComponent implements OnInit {
+  @Input()
+  selected: Option;
+
+  @Input()
+  options: Option[];
+
+  @Output()
+  change = new EventEmitter<{option: Option, index: number}>();
+
+  @Input()
+  showSymbol = false;
+
+  @Input()
+  label: string;
+
+  showOptions = false;
+
+  constructor(private hostElement: ElementRef) {}
+
+  ngOnInit() {
+    this.label = this.label || '';
+  }
+
+  toggleOptions() {
+    this.showOptions = !this.showOptions;
+  }
+
+  hideOptions() {
+    this.showOptions = false;
+  }
+
+  select(option: Option, index: number) {
+    this.selected = option;
+    this.change.emit({option, index});
+    this.hideOptions();
+  }
+
+  @HostListener('document:click', ['$event.target'])
+  onClick(eventTarget: HTMLElement) {
+    // Hide the options if we clicked outside the component
+    if (!this.hostElement.nativeElement.contains(eventTarget)) {
+      this.hideOptions();
+    }
+  }
+
+  @HostListener('document:keydown.escape')
+  onKeyDown() {
+    this.hideOptions();
+  }
+}
diff --git a/aio/src/app/shared/shared.module.ts b/aio/src/app/shared/shared.module.ts
new file mode 100644
index 0000000000..2f7eafc0d3
--- /dev/null
+++ b/aio/src/app/shared/shared.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SelectComponent } from './select/select.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    SelectComponent
+  ],
+  declarations: [
+    SelectComponent
+  ]
+})
+export class SharedModule {}
diff --git a/aio/src/app/shared/toc.service.spec.ts b/aio/src/app/shared/toc.service.spec.ts
new file mode 100644
index 0000000000..a40385f4e1
--- /dev/null
+++ b/aio/src/app/shared/toc.service.spec.ts
@@ -0,0 +1,376 @@
+import { ReflectiveInjector, SecurityContext } from '@angular/core';
+import { DOCUMENT, DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Subject } from 'rxjs/Subject';
+
+import { ScrollItem, ScrollSpyInfo, ScrollSpyService } from 'app/shared/scroll-spy.service';
+import { TocItem, TocService } from './toc.service';
+
+describe('TocService', () => {
+  let injector: ReflectiveInjector;
+  let scrollSpyService: MockScrollSpyService;
+  let tocService: TocService;
+  let lastTocList: TocItem[];
+
+  // call TocService.genToc
+  function callGenToc(html = '', docId = 'fizz/buzz'): HTMLDivElement {
+    const el = document.createElement('div');
+    el.innerHTML = html;
+    tocService.genToc(el, docId);
+    return el;
+  }
+
+  beforeEach(() => {
+    injector = ReflectiveInjector.resolveAndCreate([
+      { provide: DomSanitizer, useClass: TestDomSanitizer },
+      { provide: DOCUMENT, useValue: document },
+      { provide: ScrollSpyService, useClass: MockScrollSpyService },
+      TocService,
+    ]);
+    scrollSpyService = injector.get(ScrollSpyService);
+    tocService = injector.get(TocService);
+    tocService.tocList.subscribe(tocList => lastTocList = tocList);
+  });
+
+  it('should be creatable', () => {
+    expect(tocService).toBeTruthy();
+  });
+
+  describe('tocList', () => {
+    it('should emit the latest value to new subscribers', () => {
+      const expectedValue1 = tocItem('Heading A');
+      const expectedValue2 = tocItem('Heading B');
+      let value1: TocItem[];
+      let value2: TocItem[];
+
+      tocService.tocList.next([]);
+      tocService.tocList.subscribe(v => value1 = v);
+      expect(value1).toEqual([]);
+
+      tocService.tocList.next([expectedValue1, expectedValue2]);
+      tocService.tocList.subscribe(v => value2 = v);
+      expect(value2).toEqual([expectedValue1, expectedValue2]);
+    });
+
+    it('should emit the same values to all subscribers', () => {
+      const expectedValue1 = tocItem('Heading A');
+      const expectedValue2 = tocItem('Heading B');
+      const emittedValues: TocItem[][] = [];
+
+      tocService.tocList.subscribe(v => emittedValues.push(v));
+      tocService.tocList.subscribe(v => emittedValues.push(v));
+      tocService.tocList.next([expectedValue1, expectedValue2]);
+
+      expect(emittedValues).toEqual([
+        [expectedValue1, expectedValue2],
+        [expectedValue1, expectedValue2]
+      ]);
+    });
+  });
+
+  describe('activeItemIndex', () => {
+    it('should emit the active heading index (or null)', () => {
+      const indices: (number | null)[] = [];
+
+      tocService.activeItemIndex.subscribe(i => indices.push(i));
+      callGenToc();
+
+      scrollSpyService.$lastInfo.active.next({index: 42} as ScrollItem);
+      scrollSpyService.$lastInfo.active.next({index: 0} as ScrollItem);
+      scrollSpyService.$lastInfo.active.next(null);
+      scrollSpyService.$lastInfo.active.next({index: 7} as ScrollItem);
+
+      expect(indices).toEqual([null, 42, 0, null, 7]);
+    });
+
+    it('should reset athe active index (and unspy) when calling `reset()`', () => {
+      const indices: (number | null)[] = [];
+
+      tocService.activeItemIndex.subscribe(i => indices.push(i));
+
+      callGenToc();
+      const unspy = scrollSpyService.$lastInfo.unspy;
+      scrollSpyService.$lastInfo.active.next({index: 42} as ScrollItem);
+
+      expect(unspy).not.toHaveBeenCalled();
+      expect(indices).toEqual([null, 42]);
+
+      tocService.reset();
+
+      expect(unspy).toHaveBeenCalled();
+      expect(indices).toEqual([null, 42, null]);
+    });
+
+    it('should reset the active index (and unspy) when a new `tocList` is requested', () => {
+      const indices: (number | null)[] = [];
+
+      tocService.activeItemIndex.subscribe(i => indices.push(i));
+
+      callGenToc();
+      const unspy1 = scrollSpyService.$lastInfo.unspy;
+      scrollSpyService.$lastInfo.active.next({index: 1} as ScrollItem);
+
+      expect(unspy1).not.toHaveBeenCalled();
+      expect(indices).toEqual([null, 1]);
+
+      tocService.genToc();
+
+      expect(unspy1).toHaveBeenCalled();
+      expect(indices).toEqual([null, 1, null]);
+
+      callGenToc();
+      const unspy2 = scrollSpyService.$lastInfo.unspy;
+      scrollSpyService.$lastInfo.active.next({index: 3} as ScrollItem);
+
+      expect(unspy2).not.toHaveBeenCalled();
+      expect(indices).toEqual([null, 1, null, null, 3]);
+
+      callGenToc();
+      scrollSpyService.$lastInfo.active.next({index: 4} as ScrollItem);
+
+      expect(unspy2).toHaveBeenCalled();
+      expect(indices).toEqual([null, 1, null, null, 3, null, 4]);
+    });
+
+    it('should emit the active index for the latest `tocList`', () => {
+      const indices: (number | null)[] = [];
+
+      tocService.activeItemIndex.subscribe(i => indices.push(i));
+
+      callGenToc();
+      const activeSubject1 = scrollSpyService.$lastInfo.active;
+      activeSubject1.next({index: 1} as ScrollItem);
+      activeSubject1.next({index: 2} as ScrollItem);
+
+      callGenToc();
+      const activeSubject2 = scrollSpyService.$lastInfo.active;
+      activeSubject2.next({index: 3} as ScrollItem);
+      activeSubject2.next({index: 4} as ScrollItem);
+
+      expect(indices).toEqual([null, 1, 2, null, 3, 4]);
+    });
+  });
+
+  describe('should clear tocList', () => {
+    beforeEach(() => {
+      // Start w/ dummy data from previous usage
+      const expectedValue1 = tocItem('Heading A');
+      const expectedValue2 = tocItem('Heading B');
+      tocService.tocList.next([expectedValue1, expectedValue2]);
+      expect(lastTocList).not.toEqual([]);
+    });
+
+    it('when reset()', () => {
+      tocService.reset();
+      expect(lastTocList).toEqual([]);
+    });
+
+    it('when given undefined doc element', () => {
+      tocService.genToc(undefined);
+      expect(lastTocList).toEqual([]);
+    });
+
+    it('when given doc element w/ no headings', () => {
+      callGenToc('<p>This</p><p>and</p><p>that</p>');
+      expect(lastTocList).toEqual([]);
+    });
+
+    it('when given doc element w/ headings other than h1, h2 & h3', () => {
+      callGenToc('<h4>and</h4><h5>that</h5>');
+      expect(lastTocList).toEqual([]);
+    });
+
+    it('when given doc element w/ no-toc headings', () => {
+      // tolerates different spellings/casing of the no-toc class
+      callGenToc(`
+        <h2 class="no-toc">one</h2><p>some one</p>
+        <h2 class="notoc">two</h2><p>some two</p>
+        <h2 class="no-Toc">three</h2><p>some three</p>
+        <h2 class="noToc">four</h2><p>some four</p>
+      `);
+      expect(lastTocList).toEqual([]);
+    });
+  });
+
+  describe('when given many headings', () => {
+    let docId: string;
+    let docEl: HTMLDivElement;
+    let headings: NodeListOf<HTMLHeadingElement>;
+
+    beforeEach(() => {
+      docId = 'fizz/buzz';
+
+      docEl = callGenToc(`
+        <h1>Fun with TOC</h1>
+
+        <h2 id="heading-one-special-id">Heading one</h2>
+          <p>h2 toc 0</p>
+
+        <h2>H2 Two</h2>
+          <p>h2 toc 1</p>
+
+        <h2>H2 <b>Three</b></h2>
+          <p>h2 toc 2</p>
+          <h3 id="h3-3a">H3 3a</h3> <p>h3 toc 3</p>
+          <h3 id="h3-3b">H3 3b</h3> <p>h3 toc 4</p>
+
+            <!-- h4 shouldn't be in TOC -->
+            <h4 id="h4-3b">H4 of h3-3b</h4> <p>an h4</p>
+
+        <h2><i>H2 4 <b>repeat</b></i></h2>
+          <p>h2 toc 5</p>
+
+        <h2><b>H2 4 <i>repeat</i></b></h2>
+          <p>h2 toc 6</p>
+
+        <h2 class="no-toc" id="skippy">Skippy</h2>
+          <p>Skip this header</p>
+
+        <h2 id="h2-6">H2 6</h2>
+          <p>h2 toc 7</p>
+          <h3 id="h3-6a">H3 6a</h3> <p>h3 toc 8</p>
+      `, docId);
+
+      headings = docEl.querySelectorAll('h1,h2,h3,h4') as NodeListOf<HTMLHeadingElement>;
+    });
+
+    it('should have tocList with expect number of TocItems', () => {
+      // should ignore h4, and the no-toc h2
+      expect(lastTocList.length).toEqual(headings.length - 2);
+    });
+
+    it('should have href with docId and heading\'s id', () => {
+      const tocItem = lastTocList.find(item => item.title === 'Heading one');
+      expect(tocItem.href).toEqual(`${docId}#heading-one-special-id`);
+    });
+
+    it('should have level "h1" for an <h1>', () => {
+      const tocItem = lastTocList.find(item => item.title === 'Fun with TOC');
+      expect(tocItem.level).toEqual('h1');
+    });
+
+    it('should have level "h2" for an <h2>', () => {
+      const tocItem = lastTocList.find(item => item.title === 'Heading one');
+      expect(tocItem.level).toEqual('h2');
+    });
+
+    it('should have level "h3" for an <h3>', () => {
+      const tocItem = lastTocList.find(item => item.title === 'H3 3a');
+      expect(tocItem.level).toEqual('h3');
+    });
+
+    it('should have title which is heading\'s textContent ', () => {
+      const heading = headings[3];
+      const tocItem = lastTocList[3];
+      expect(heading.textContent).toEqual(tocItem.title);
+    });
+
+    it('should have "SafeHtml" content which is heading\'s innerHTML ', () => {
+      const heading = headings[3];
+      const content = lastTocList[3].content;
+      expect((<TestSafeHtml>content).changingThisBreaksApplicationSecurity)
+        .toEqual(heading.innerHTML);
+    });
+
+    it('should calculate and set id of heading without an id', () => {
+      const tocItem = lastTocList.find(item => item.title === 'H2 Two');
+      const id = headings[2].getAttribute('id');
+      expect(id).toEqual('h2-two');
+    });
+
+    it('should have href with docId and calculated heading id', () => {
+      const tocItem = lastTocList.find(item => item.title === 'H2 Two');
+      expect(tocItem.href).toEqual(`${docId}#h2-two`);
+    });
+
+    it('should ignore HTML in heading when calculating id', () => {
+      const id = headings[3].getAttribute('id');
+      const tocItem = lastTocList[3];
+      expect(id).toEqual('h2-three', 'heading id');
+      expect(tocItem.href).toEqual(`${docId}#h2-three`, 'tocItem href');
+    });
+
+    it('should avoid repeating an id when calculating', () => {
+      const tocItems = lastTocList.filter(item => item.title === 'H2 4 repeat');
+      expect(tocItems[0].href).toEqual(`${docId}#h2-4-repeat`, 'first');
+      expect(tocItems[1].href).toEqual(`${docId}#h2-4-repeat-2`, 'second');
+    });
+  });
+
+  describe('TocItem for an h2 with anchor link and extra whitespace', () => {
+    let docId: string;
+    let docEl: HTMLDivElement;
+    let tocItem: TocItem;
+    let expectedTocContent: string;
+
+    beforeEach(() => {
+      docId = 'fizz/buzz/';
+      expectedTocContent = 'Setup to develop <i>locally</i>.';
+
+      // An almost-actual <h2> ... with extra whitespace
+      docEl = callGenToc(`
+        <h2 id="setup-to-develop-locally">
+          <a href="tutorial/toh-pt1#setup-to-develop-locally" aria-hidden="true">
+            <span class="icon icon-link"></span>
+          </a>
+          ${expectedTocContent}
+        </h2>
+      `, docId);
+
+      tocItem = lastTocList[0];
+    });
+
+    it('should have expected href', () => {
+      expect(tocItem.href).toEqual(`${docId}#setup-to-develop-locally`);
+    });
+
+    it('should have expected title', () => {
+      expect(tocItem.title).toEqual('Setup to develop locally.');
+    });
+
+    it('should have removed anchor link from tocItem html content', () => {
+      expect((<TestSafeHtml>tocItem.content)
+        .changingThisBreaksApplicationSecurity)
+        .toEqual('Setup to develop <i>locally</i>.');
+    });
+
+    it('should have bypassed HTML sanitizing of heading\'s innerHTML ', () => {
+      const domSanitizer: TestDomSanitizer = injector.get(DomSanitizer);
+      expect(domSanitizer.bypassSecurityTrustHtml)
+        .toHaveBeenCalledWith(expectedTocContent);
+    });
+  });
+});
+
+interface TestSafeHtml extends SafeHtml {
+  changingThisBreaksApplicationSecurity: string;
+  getTypeName: () => string;
+}
+
+class TestDomSanitizer {
+  bypassSecurityTrustHtml = jasmine.createSpy('bypassSecurityTrustHtml')
+    .and.callFake(html => {
+      return {
+        changingThisBreaksApplicationSecurity: html,
+        getTypeName: () => 'HTML',
+      } as TestSafeHtml;
+    });
+}
+
+class MockScrollSpyService {
+  $lastInfo: {
+    active: Subject<ScrollItem | null>,
+    unspy: jasmine.Spy
+  };
+
+  spyOn(headings: HTMLHeadingElement[]): ScrollSpyInfo {
+    return this.$lastInfo = {
+      active: new Subject<ScrollItem | null>(),
+      unspy: jasmine.createSpy('unspy'),
+    };
+  }
+}
+
+function tocItem(title: string, level = 'h2', href = '', content = title) {
+  return { title, href, level, content };
+}
+
diff --git a/aio/src/app/shared/toc.service.ts b/aio/src/app/shared/toc.service.ts
new file mode 100644
index 0000000000..45dd96c2c3
--- /dev/null
+++ b/aio/src/app/shared/toc.service.ts
@@ -0,0 +1,102 @@
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT, DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { ScrollSpyInfo, ScrollSpyService } from 'app/shared/scroll-spy.service';
+
+
+export interface TocItem {
+  content: SafeHtml;
+  href: string;
+  isSecondary?: boolean;
+  level: string;
+  title: string;
+}
+
+@Injectable()
+export class TocService {
+  tocList = new ReplaySubject<TocItem[]>(1);
+  activeItemIndex = new ReplaySubject<number | null>(1);
+  private scrollSpyInfo: ScrollSpyInfo | null;
+
+  constructor(
+      @Inject(DOCUMENT) private document: any,
+      private domSanitizer: DomSanitizer,
+      private scrollSpyService: ScrollSpyService) { }
+
+  genToc(docElement?: Element, docId = '') {
+    this.resetScrollSpyInfo();
+
+    if (!docElement) {
+      this.tocList.next([]);
+      return;
+    }
+
+    const headings = this.findTocHeadings(docElement);
+    const idMap = new Map<string, number>();
+    const tocList = headings.map(heading => ({
+      content: this.extractHeadingSafeHtml(heading),
+      href: `${docId}#${this.getId(heading, idMap)}`,
+      level: heading.tagName.toLowerCase(),
+      title: heading.textContent.trim(),
+    }));
+
+    this.tocList.next(tocList);
+
+    this.scrollSpyInfo = this.scrollSpyService.spyOn(headings);
+    this.scrollSpyInfo.active.subscribe(item => this.activeItemIndex.next(item && item.index));
+  }
+
+  reset() {
+    this.resetScrollSpyInfo();
+    this.tocList.next([]);
+  }
+
+  // This bad boy exists only to strip off the anchor link attached to a heading
+  private extractHeadingSafeHtml(heading: HTMLHeadingElement) {
+    const a = this.document.createElement('a') as HTMLAnchorElement;
+    a.innerHTML = heading.innerHTML;
+    const anchorLink = a.querySelector('a');
+    if (anchorLink) {
+      a.removeChild(anchorLink);
+    }
+    // security: the document element which provides this heading content
+    // is always authored by the documentation team and is considered to be safe
+    return this.domSanitizer.bypassSecurityTrustHtml(a.innerHTML.trim());
+  }
+
+  private findTocHeadings(docElement: Element): HTMLHeadingElement[] {
+    const headings = docElement.querySelectorAll('h1,h2,h3');
+    const skipNoTocHeadings = (heading: HTMLHeadingElement) => !/(?:no-toc|notoc)/i.test(heading.className);
+
+    return Array.prototype.filter.call(headings, skipNoTocHeadings);
+  }
+
+  private resetScrollSpyInfo() {
+    if (this.scrollSpyInfo) {
+      this.scrollSpyInfo.unspy();
+      this.scrollSpyInfo = null;
+    }
+
+    this.activeItemIndex.next(null);
+  }
+
+  // Extract the id from the heading; create one if necessary
+  // Is it possible for a heading to lack an id?
+  private getId(h: HTMLHeadingElement, idMap: Map<string, number>) {
+    let id = h.id;
+    if (id) {
+      addToMap(id);
+    } else {
+      id = h.textContent.trim().toLowerCase().replace(/\W+/g, '-');
+      id = addToMap(id);
+      h.id = id;
+    }
+    return id;
+
+    // Map guards against duplicate id creation.
+    function addToMap(key: string) {
+      const count = idMap[key] = idMap[key] ? idMap[key] + 1 : 1;
+      return count === 1 ? key : `${key}-${count}`;
+    }
+  }
+}
diff --git a/aio/src/app/shared/web-worker.ts b/aio/src/app/shared/web-worker.ts
index 95bf6e05ab..b70f993483 100644
--- a/aio/src/app/shared/web-worker.ts
+++ b/aio/src/app/shared/web-worker.ts
@@ -16,7 +16,11 @@ export interface WebWorkerMessage {
 export class WebWorkerClient {
   private nextId = 0;
 
-  constructor(private worker: Worker, private zone: NgZone) {
+  static create(workerUrl: string, zone: NgZone) {
+    return new WebWorkerClient(new Worker(workerUrl), zone);
+  }
+
+  private constructor(private worker: Worker, private zone: NgZone) {
   }
 
   sendMessage<T>(type: string, payload?: any): Observable<T> {
diff --git a/aio/src/app/sw-updates/noop-ng-service-worker.ts b/aio/src/app/sw-updates/noop-ng-service-worker.ts
deleted file mode 100644
index d94b6c3c8d..0000000000
--- a/aio/src/app/sw-updates/noop-ng-service-worker.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// Alternative to NgServiceWorker when the browser doesn't support NgServiceWorker
-//
-// Many browsers do not support ServiceWorker (e.g, Safari).
-// The Angular NgServiceWorker assumes that the browser supports ServiceWorker
-// and starts talking to it immediately in its constructor without checking if it exists.
-// Merely injecting the `NgServiceWorker` is an exception in any browser w/o ServiceWorker.
-//
-// Solution: when the browser doesn't support service worker and a class injects `NgServiceWorker`
-// substitute the inert `NoopNgServiceWorker`.
-
-import { Injector } from '@angular/core';
-import { NgServiceWorker } from '@angular/service-worker';
-
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
-
-export class NoopNgServiceWorker  {
-  // Service worker is supported if `navigator['serviceWorker'] is defined.
-  isServiceWorkerSupported = !!navigator['serviceWorker'];
-
-  checkForUpdate() { return of(false); }
-  activateUpdate(version: string) { return of(false); }
-}
-
-export abstract class NgServiceWorkerForReals {}
-
-export function NgServiceWorkerFactory(injector: Injector, nsw: NoopNgServiceWorker) {
-  return nsw.isServiceWorkerSupported ? injector.get(NgServiceWorkerForReals) : nsw;
-}
-
-export const noopNgServiceWorkerProviders = [
-    NoopNgServiceWorker,
-    { provide: NgServiceWorkerForReals, useClass: NgServiceWorker },
-    { provide: NgServiceWorker, useFactory: NgServiceWorkerFactory,
-        deps: [Injector, NoopNgServiceWorker] }];
diff --git a/aio/src/app/sw-updates/sw-update-notifications.service.spec.ts b/aio/src/app/sw-updates/sw-update-notifications.service.spec.ts
deleted file mode 100644
index 5f1ec50d66..0000000000
--- a/aio/src/app/sw-updates/sw-update-notifications.service.spec.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import { ReflectiveInjector } from '@angular/core';
-import { fakeAsync, flushMicrotasks } from '@angular/core/testing';
-import { MdSnackBar, MdSnackBarConfig } from '@angular/material';
-import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
-
-import { MockSwUpdatesService } from 'testing/sw-updates.service';
-import { SwUpdateNotificationsService } from './sw-update-notifications.service';
-import { SwUpdatesService } from './sw-updates.service';
-
-
-describe('SwUpdateNotificationsService', () => {
-  let injector: ReflectiveInjector;
-  let service: SwUpdateNotificationsService;
-  let swUpdates: MockSwUpdatesService;
-  let snackBar: MockMdSnackBar;
-
-  // Helpers
-  const activateUpdate = success => {
-    swUpdates.$$isUpdateAvailableSubj.next(true);
-    snackBar.$$lastRef.$$onActionSubj.next();
-    swUpdates.$$activateUpdateSubj.next(success);
-
-    flushMicrotasks();
-  };
-
-  beforeEach(() => {
-    injector = ReflectiveInjector.resolveAndCreate([
-      { provide: MdSnackBar, useClass: MockMdSnackBar },
-      { provide: SwUpdatesService, useClass: MockSwUpdatesService },
-      SwUpdateNotificationsService
-    ]);
-    service = injector.get(SwUpdateNotificationsService);
-    swUpdates = injector.get(SwUpdatesService);
-    snackBar = injector.get(MdSnackBar);
-  });
-
-
-  it('should create', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should not notify about available updates before being enabled', () => {
-    swUpdates.$$isUpdateAvailableSubj.next(true);
-    expect(snackBar.$$lastRef).toBeUndefined();
-  });
-
-  describe('when enabled', () => {
-    beforeEach(() => service.enable());
-
-
-    it('should not re-subscribe to updates if already enabled', () => {
-      spyOn(snackBar, 'open').and.callThrough();
-
-      service.enable();
-      swUpdates.$$isUpdateAvailableSubj.next(true);
-
-      expect(snackBar.open).toHaveBeenCalledTimes(1);
-    });
-
-    it('should notify when updates are available', () => {
-      expect(snackBar.$$lastRef).toBeUndefined();
-
-      swUpdates.$$isUpdateAvailableSubj.next(true);
-
-      expect(snackBar.$$lastRef.$$message).toContain('ServiceWorker update available');
-      expect(snackBar.$$lastRef.$$action).toBe('Activate');
-      expect(snackBar.$$lastRef.$$config.duration).toBeUndefined();
-    });
-
-    it('should not notify when updates are not available', () => {
-      swUpdates.$$isUpdateAvailableSubj.next(false);
-      expect(snackBar.$$lastRef).toBeUndefined();
-    });
-
-    it('should activate the update when clicking on `Activate`', () => {
-      spyOn(swUpdates, 'activateUpdate').and.callThrough();
-
-      swUpdates.$$isUpdateAvailableSubj.next(true);
-      expect(swUpdates.activateUpdate).not.toHaveBeenCalled();
-
-      snackBar.$$lastRef.$$onActionSubj.next();
-      expect(swUpdates.activateUpdate).toHaveBeenCalled();
-    });
-
-    it('should report a successful activation', fakeAsync(() => {
-      activateUpdate(true);
-
-      expect(snackBar.$$lastRef.$$message).toContain('Update activated successfully');
-      expect(snackBar.$$lastRef.$$action).toBeNull();
-      expect(snackBar.$$lastRef.$$config.duration).toBeUndefined();
-    }));
-
-    it('should report a failed activation', fakeAsync(() => {
-      activateUpdate(false);
-
-      expect(snackBar.$$lastRef.$$message).toContain('Update activation failed');
-      expect(snackBar.$$lastRef.$$action).toBe('Dismiss');
-      expect(snackBar.$$lastRef.$$config.duration).toBeGreaterThan(0);
-    }));
-
-    it('should dismiss the failed activation snack-bar when clicking on `Dismiss`', fakeAsync(() => {
-      activateUpdate(false);
-      expect(snackBar.$$lastRef.$$dismissed).toBe(false);
-
-      snackBar.$$lastRef.$$onActionSubj.next();
-      expect(snackBar.$$lastRef.$$dismissed).toBe(true);
-    }));
-  });
-
-  describe('#disable()', () => {
-    beforeEach(() => service.enable());
-
-
-    it('should dismiss open update notification', () => {
-      swUpdates.$$isUpdateAvailableSubj.next(true);
-      expect(snackBar.$$lastRef.$$message).toContain('ServiceWorker update available');
-      expect(snackBar.$$lastRef.$$dismissed).toBe(false);
-
-      service.disable();
-      expect(snackBar.$$lastRef.$$dismissed).toBe(true);
-    });
-
-    it('should dismiss open activation notification', fakeAsync(() => {
-      activateUpdate(true);
-      expect(snackBar.$$lastRef.$$message).toContain('Update activated successfully');
-      expect(snackBar.$$lastRef.$$dismissed).toBe(false);
-
-      service.disable();
-      expect(snackBar.$$lastRef.$$dismissed).toBe(true);
-    }));
-
-    it('should ignore further updates', () => {
-      service.disable();
-      swUpdates.$$isUpdateAvailableSubj.next(true);
-
-      expect(snackBar.$$lastRef).toBeUndefined();
-    });
-
-    it('should not ignore further updates if re-enabled', () => {
-      service.disable();
-      service.enable();
-      expect(snackBar.$$lastRef).toBeUndefined();
-
-      swUpdates.$$isUpdateAvailableSubj.next(true);
-      expect(snackBar.$$lastRef.$$message).toContain('ServiceWorker update available');
-    });
-
-    it('should not ignore pending updates if re-enabled', () => {
-      service.disable();
-      swUpdates.isUpdateAvailable = Observable.of(true);
-      expect(snackBar.$$lastRef).toBeUndefined();
-
-      service.enable();
-      expect(snackBar.$$lastRef.$$message).toContain('ServiceWorker update available');
-    });
-  });
-});
-
-// Mocks
-class MockMdSnackBarRef {
-  $$afterDismissedSubj = new Subject();
-  $$onActionSubj = new Subject();
-  $$dismissed = false;
-
-  constructor(public $$message: string,
-              public $$action: string,
-              public $$config: MdSnackBarConfig) {}
-
-  afterDismissed() {
-    return this.$$afterDismissedSubj;
-  }
-
-  dismiss() {
-    this.$$dismissed = true;
-  }
-
-  onAction() {
-    return this.$$onActionSubj;
-  }
-}
-
-class MockMdSnackBar {
-  $$lastRef: MockMdSnackBarRef;
-
-  open(message: string, action: string = null, config: MdSnackBarConfig = {}): MockMdSnackBarRef {
-    if (this.$$lastRef && !this.$$lastRef.$$dismissed) {
-      this.$$lastRef.dismiss();
-    }
-
-    return this.$$lastRef = new MockMdSnackBarRef(message, action, config);
-  }
-}
diff --git a/aio/src/app/sw-updates/sw-update-notifications.service.ts b/aio/src/app/sw-updates/sw-update-notifications.service.ts
deleted file mode 100644
index d321f1f5d3..0000000000
--- a/aio/src/app/sw-updates/sw-update-notifications.service.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Injectable } from '@angular/core';
-import { MdSnackBar, MdSnackBarConfig, MdSnackBarRef } from '@angular/material';
-import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/filter';
-
-import { SwUpdatesService } from './sw-updates.service';
-
-
-/**
- * SwUpdateNotificationsService
- *
- * @description
- * Once enabled:
- * 1. Subscribes to ServiceWorker updates and prompts the user to activate.
- * 2. When the user confirms, it activates the update and notifies the user (upon activation success
- *    or failure).
- * 3. Continues to listen for available ServiceWorker updates.
- *
- * @method
- * `disable()` {() => void} - Dismiss any open notifications and stop listening for ServiceWorker
- * updates.
- *
- * @method
- * `enable()` {() => void} - Start listening for ServiceWorker updates.
- */
-@Injectable()
-export class SwUpdateNotificationsService {
-  private onDisable = new Subject();
-  private snackBars: MdSnackBarRef<any>[] = [];
-  private enabled = false;
-
-  constructor(private snackBarService: MdSnackBar, private swUpdates: SwUpdatesService) {
-    this.onDisable.subscribe(() => this.snackBars.forEach(sb => sb.dismiss()));
-  }
-
-  disable() {
-    if (this.enabled) {
-      this.enabled = false;
-      this.onDisable.next();
-    }
-  }
-
-  enable() {
-    if (!this.enabled) {
-      this.enabled = true;
-      this.swUpdates.isUpdateAvailable
-          .filter(v => v)
-          .takeUntil(this.onDisable)
-          .subscribe(() => this.notifyForUpdate());
-    }
-  }
-
-  private activateUpdate() {
-    this.swUpdates.activateUpdate().then(success => {
-      if (success) {
-        this.onActivateSuccess();
-      } else {
-        this.onActivateFailure();
-      }
-    });
-  }
-
-  private notifyForUpdate() {
-    this.openSnackBar('ServiceWorker update available.', 'Activate')
-        .onAction().subscribe(() => this.activateUpdate());
-  }
-
-  private onActivateFailure() {
-    const snackBar = this.openSnackBar('Update activation failed :(', 'Dismiss', {duration: 5000});
-    snackBar.onAction().subscribe(() => snackBar.dismiss());
-  }
-
-  private onActivateSuccess() {
-    this.openSnackBar('Update activated successfully! Reload the page to see the latest content.');
-  }
-
-  private openSnackBar(message: string, action?: string, config?: MdSnackBarConfig): MdSnackBarRef<any> {
-    const snackBar = this.snackBarService.open(message, action, config);
-    snackBar.afterDismissed().subscribe(() => this.snackBars = this.snackBars.filter(sb => sb !== snackBar));
-
-    this.snackBars.push(snackBar);
-
-    return snackBar;
-  }
-}
diff --git a/aio/src/app/sw-updates/sw-updates.module.ts b/aio/src/app/sw-updates/sw-updates.module.ts
index eea4900b19..573f64d3e7 100644
--- a/aio/src/app/sw-updates/sw-updates.module.ts
+++ b/aio/src/app/sw-updates/sw-updates.module.ts
@@ -1,19 +1,14 @@
 import { NgModule } from '@angular/core';
-import { MdSnackBarModule } from '@angular/material';
 import { ServiceWorkerModule } from '@angular/service-worker';
 
-import { noopNgServiceWorkerProviders } from './noop-ng-service-worker';
-import { SwUpdateNotificationsService } from './sw-update-notifications.service';
 import { SwUpdatesService } from './sw-updates.service';
 
+
 @NgModule({
   imports: [
-    MdSnackBarModule,
     ServiceWorkerModule
   ],
   providers: [
-    noopNgServiceWorkerProviders,
-    SwUpdateNotificationsService,
     SwUpdatesService
   ]
 })
diff --git a/aio/src/app/sw-updates/sw-updates.service.spec.ts b/aio/src/app/sw-updates/sw-updates.service.spec.ts
index 29993cc42e..435e03c0fb 100644
--- a/aio/src/app/sw-updates/sw-updates.service.spec.ts
+++ b/aio/src/app/sw-updates/sw-updates.service.spec.ts
@@ -1,41 +1,34 @@
 import { ReflectiveInjector } from '@angular/core';
 import { fakeAsync, tick } from '@angular/core/testing';
 import { NgServiceWorker } from '@angular/service-worker';
-import { of } from 'rxjs/observable/of';
 import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/operator/take';
 
-import { NgServiceWorkerForReals, NoopNgServiceWorker, noopNgServiceWorkerProviders } from './noop-ng-service-worker';
+import { Logger } from 'app/shared/logger.service';
 import { SwUpdatesService } from './sw-updates.service';
 
 describe('SwUpdatesService', () => {
   let injector: ReflectiveInjector;
   let service: SwUpdatesService;
   let sw: MockNgServiceWorker;
-  let nsw: NoopNgServiceWorker;
   let checkInterval: number;
-  let isServiceWorkerSupportedInTest: boolean;
 
   // Helpers
   // NOTE:
-  //  Because `SwUpdatesService` uses the `debounceTime` operator, it needs to be instantiated
-  //  inside the `fakeAsync` zone (when `fakeAsync` is used for the test). Thus, we can't run
-  //  `setup()` in a `beforeEach()` block. We use the `run()` helper to call it inside each test' zone.
+  //   Because `SwUpdatesService` uses the `debounceTime` operator, it needs to be instantiated
+  //   inside the `fakeAsync` zone (when `fakeAsync` is used for the test). Thus, we can't run
+  //   `setup()` in a `beforeEach()` block. We use the `run()` helper to call `setup()` inside each
+  //   test's zone.
   const setup = () => {
     injector = ReflectiveInjector.resolveAndCreate([
-      noopNgServiceWorkerProviders,
-      { provide: NgServiceWorkerForReals, useClass: MockNgServiceWorker },
-      { provide: NoopNgServiceWorker, useClass: MockNoopNgServiceWorker },
+      { provide: Logger, useClass: MockLogger },
+      { provide: NgServiceWorker, useClass: MockNgServiceWorker },
       SwUpdatesService
     ]);
 
-    nsw = injector.get(NoopNgServiceWorker);
-    // Set whether service worker exists before getting the SwUpdatesService!
-    nsw.isServiceWorkerSupported = isServiceWorkerSupportedInTest;
-
     service = injector.get(SwUpdatesService);
+    sw = injector.get(NgServiceWorker);
     checkInterval = (service as any).checkInterval;
-    sw = injector.get(NgServiceWorkerForReals);
   };
   const tearDown = () => service.ngOnDestroy();
   const run = specFn => () => {
@@ -44,214 +37,120 @@ describe('SwUpdatesService', () => {
     tearDown();
   };
 
-  describe('when service worker is supported', () => {
 
-    beforeEach(() => {
-      isServiceWorkerSupportedInTest = true;
-    });
+  it('should create', run(() => {
+    expect(service).toBeTruthy();
+  }));
 
-    it('should create', run(() => {
-      expect(service).toBeTruthy();
-    }));
+  it('should immediately check for updates when instantiated', run(() => {
+    expect(sw.checkForUpdate).toHaveBeenCalled();
+  }));
 
-    it('should call the NgServiceWorker', run(() => {
-      // does not call the Angular ServiceWorker
-      expect(sw.checkForUpdate).toHaveBeenCalled();
-      // calls the noop Angular ServiceWorker instead
-      expect(nsw.checkForUpdate).not.toHaveBeenCalled();
-    }));
+  it('should schedule a new check if there is no update available', fakeAsync(run(() => {
+    sw.checkForUpdate.calls.reset();
 
-    it('should immediatelly check for updates when instantiated', run(() => {
-      expect(sw.checkForUpdate).toHaveBeenCalled();
-    }));
+    sw.$$checkForUpdateSubj.next(false);
+    expect(sw.checkForUpdate).not.toHaveBeenCalled();
 
-    it('should schedule a new check if there is no update available', fakeAsync(run(() => {
+    tick(checkInterval);
+    expect(sw.checkForUpdate).toHaveBeenCalled();
+    expect(sw.activateUpdate).not.toHaveBeenCalled();
+  })));
+
+  it('should activate new updates immediately', fakeAsync(run(() => {
+    sw.checkForUpdate.calls.reset();
+
+    sw.$$checkForUpdateSubj.next(true);
+    expect(sw.checkForUpdate).not.toHaveBeenCalled();
+
+    tick(checkInterval);
+    expect(sw.checkForUpdate).not.toHaveBeenCalled();
+    expect(sw.activateUpdate).toHaveBeenCalled();
+  })));
+
+  it('should not pass a specific version to `NgServiceWorker.activateUpdate()`', fakeAsync(run(() => {
+    sw.$$checkForUpdateSubj.next(true);
+    tick(checkInterval);
+
+    expect(sw.activateUpdate).toHaveBeenCalledWith(null);
+  })));
+
+  it('should schedule a new check after activating the update', fakeAsync(run(() => {
+    sw.checkForUpdate.calls.reset();
+    sw.$$checkForUpdateSubj.next(true);
+
+    tick(checkInterval);
+    expect(sw.checkForUpdate).not.toHaveBeenCalled();
+
+    sw.$$activateUpdateSubj.next();
+    expect(sw.checkForUpdate).not.toHaveBeenCalled();
+
+    tick(checkInterval);
+    expect(sw.checkForUpdate).toHaveBeenCalled();
+  })));
+
+  it('should emit on `updateActivated` when an update has been activated', run(() => {
+    const activatedVersions: string[] = [];
+    service.updateActivated.subscribe(v => activatedVersions.push(v));
+
+    sw.$$updatesSubj.next({type: 'pending', version: 'foo'});
+    sw.$$updatesSubj.next({type: 'activation', version: 'bar'});
+    sw.$$updatesSubj.next({type: 'pending', version: 'baz'});
+    sw.$$updatesSubj.next({type: 'activation', version: 'qux'});
+
+    expect(activatedVersions).toEqual(['bar', 'qux']);
+  }));
+
+  describe('when destroyed', () => {
+    it('should not schedule a new check for update (after current check)', fakeAsync(run(() => {
       sw.checkForUpdate.calls.reset();
 
+      service.ngOnDestroy();
       sw.$$checkForUpdateSubj.next(false);
-      expect(sw.checkForUpdate).not.toHaveBeenCalled();
-
       tick(checkInterval);
-      expect(sw.checkForUpdate).toHaveBeenCalled();
+
+      expect(sw.checkForUpdate).not.toHaveBeenCalled();
     })));
 
-    it('should not schedule a new check if there is an update available', fakeAsync(run(() => {
+    it('should not schedule a new check for update (after activating an update)', fakeAsync(run(() => {
       sw.checkForUpdate.calls.reset();
 
       sw.$$checkForUpdateSubj.next(true);
-      expect(sw.checkForUpdate).not.toHaveBeenCalled();
+      expect(sw.activateUpdate).toHaveBeenCalled();
 
+      service.ngOnDestroy();
+      sw.$$activateUpdateSubj.next();
       tick(checkInterval);
+
       expect(sw.checkForUpdate).not.toHaveBeenCalled();
     })));
 
-    describe('#activateUpdate()', () => {
-      it('should return a promise', run(() => {
-        expect(service.activateUpdate()).toEqual(jasmine.any(Promise));
-      }));
+    it('should stop emitting on `updateActivated`', run(() => {
+      const activatedVersions: string[] = [];
+      service.updateActivated.subscribe(v => activatedVersions.push(v));
 
-      it('should call `NgServiceWorker.activateUpdate()`', run(() => {
-        expect(sw.activateUpdate).not.toHaveBeenCalled();
+      sw.$$updatesSubj.next({type: 'pending', version: 'foo'});
+      sw.$$updatesSubj.next({type: 'activation', version: 'bar'});
+      service.ngOnDestroy();
+      sw.$$updatesSubj.next({type: 'pending', version: 'baz'});
+      sw.$$updatesSubj.next({type: 'activation', version: 'qux'});
 
-        service.activateUpdate();
-        expect(sw.activateUpdate).toHaveBeenCalled();
-      }));
-
-      it('should not pass a specific version to `NgServiceWorker.activateUpdate()`', run(() => {
-        (service.activateUpdate as Function)('foo');
-        expect(sw.activateUpdate).toHaveBeenCalledWith(null);
-      }));
-
-      it('should resolve the promise with the activation outcome', fakeAsync(run(() => {
-        let outcome;
-
-        service.activateUpdate().then(v => outcome = v);
-        sw.$$activateUpdateSubj.next(true);
-        tick();
-        expect(outcome).toBe(true);
-
-        service.activateUpdate().then(v => outcome = v);
-        sw.$$activateUpdateSubj.next(false);
-        tick();
-        expect(outcome).toBe(false);
-      })));
-
-      it('should schedule a new check (if the activation succeeded)', fakeAsync(run(() => {
-        sw.checkForUpdate.calls.reset();
-
-        service.activateUpdate();
-
-        tick(checkInterval);
-        expect(sw.checkForUpdate).not.toHaveBeenCalled();
-
-        sw.$$activateUpdateSubj.next(true);
-        expect(sw.checkForUpdate).not.toHaveBeenCalled();
-
-        tick(checkInterval);
-        expect(sw.checkForUpdate).toHaveBeenCalled();
-      })));
-
-      it('should schedule a new check (if the activation failed)', fakeAsync(run(() => {
-        sw.checkForUpdate.calls.reset();
-
-        service.activateUpdate();
-
-        tick(checkInterval);
-        expect(sw.checkForUpdate).not.toHaveBeenCalled();
-
-        sw.$$activateUpdateSubj.next(false);
-        expect(sw.checkForUpdate).not.toHaveBeenCalled();
-
-        tick(checkInterval);
-        expect(sw.checkForUpdate).toHaveBeenCalled();
-      })));
-    });
-
-    describe('#isUpdateAvailable', () => {
-      let emittedValues: boolean[];
-
-      // Helpers
-      const withSubscription = specFn => () => {
-        emittedValues = [];
-        service.isUpdateAvailable.subscribe(v => emittedValues.push(v));
-        specFn();
-      };
-
-
-      it('should emit `false/true` when there is/isn\'t an update available',
-        fakeAsync(run(withSubscription(() => {
-          expect(emittedValues).toEqual([]);
-
-          sw.$$checkForUpdateSubj.next(false);
-          expect(emittedValues).toEqual([false]);
-
-          tick(checkInterval);
-          sw.$$checkForUpdateSubj.next(true);
-          expect(emittedValues).toEqual([false, true]);
-        })))
-      );
-
-      it('should emit only when the value has changed',
-        fakeAsync(run(withSubscription(() => {
-          expect(emittedValues).toEqual([]);
-
-          sw.$$checkForUpdateSubj.next(false);
-          expect(emittedValues).toEqual([false]);
-
-          tick(checkInterval);
-          sw.$$checkForUpdateSubj.next(false);
-          expect(emittedValues).toEqual([false]);
-
-          tick(checkInterval);
-          sw.$$checkForUpdateSubj.next(false);
-          expect(emittedValues).toEqual([false]);
-        })))
-      );
-
-      it('should emit `false` after a successful activation',
-        fakeAsync(run(withSubscription(() => {
-          sw.$$checkForUpdateSubj.next(true);
-          expect(emittedValues).toEqual([true]);
-
-          service.activateUpdate();
-          sw.$$activateUpdateSubj.next(true);
-
-          expect(emittedValues).toEqual([true, false]);
-        })))
-      );
-
-      it('should emit `false` after a failed activation',
-        fakeAsync(run(withSubscription(() => {
-          sw.$$checkForUpdateSubj.next(true);
-          expect(emittedValues).toEqual([true]);
-
-          service.activateUpdate();
-          sw.$$activateUpdateSubj.next(false);
-
-          expect(emittedValues).toEqual([true, false]);
-        })))
-      );
-
-      it('should not emit a new value after activation if already `false`',
-        fakeAsync(run(withSubscription(() => {
-          sw.$$checkForUpdateSubj.next(false);
-          expect(emittedValues).toEqual([false]);
-
-          service.activateUpdate();
-          sw.$$activateUpdateSubj.next(true);
-
-          expect(emittedValues).toEqual([false]);
-        })))
-      );
-    });
-  });
-
-  describe('when service worker isn\'t supported (Safari)', () => {
-
-    beforeEach(() => {
-      isServiceWorkerSupportedInTest = false;
-    });
-
-    it('should create', run(() => {
-      expect(service).toBeTruthy();
+      expect(activatedVersions).toEqual(['bar']);
     }));
-
-    it('should call the NoopNgServiceWorker', run(() => {
-      // does not call the Angular ServiceWorker
-      expect(sw.checkForUpdate).not.toHaveBeenCalled();
-      // calls the noop Angular ServiceWorker instead
-      expect(nsw.checkForUpdate).toHaveBeenCalled();
-    }));
-
   });
-
 });
 
 // Mocks
-class MockNgServiceWorker {
+class MockLogger {
+  log = jasmine.createSpy('MockLogger.log');
+}
 
+class MockNgServiceWorker {
   $$activateUpdateSubj = new Subject<boolean>();
   $$checkForUpdateSubj = new Subject<boolean>();
+  $$updatesSubj = new Subject<{type: string, version: string}>();
+
+  updates = this.$$updatesSubj.asObservable();
 
   activateUpdate = jasmine.createSpy('MockNgServiceWorker.activateUpdate')
                           .and.callFake(() => this.$$activateUpdateSubj.take(1));
@@ -259,12 +158,3 @@ class MockNgServiceWorker {
   checkForUpdate = jasmine.createSpy('MockNgServiceWorker.checkForUpdate')
                           .and.callFake(() => this.$$checkForUpdateSubj.take(1));
 }
-
-class MockNoopNgServiceWorker extends NoopNgServiceWorker {
-  constructor() {
-    super();
-    this.isServiceWorkerSupported = true; // assume it is by default
-    spyOn(this, 'activateUpdate').and.callThrough();
-    spyOn(this, 'checkForUpdate').and.callThrough();
-  }
-}
diff --git a/aio/src/app/sw-updates/sw-updates.service.ts b/aio/src/app/sw-updates/sw-updates.service.ts
index 60a9ef1fcb..1760a87030 100644
--- a/aio/src/app/sw-updates/sw-updates.service.ts
+++ b/aio/src/app/sw-updates/sw-updates.service.ts
@@ -1,14 +1,17 @@
-import { Injectable, OnDestroy } from '@angular/core';
+import { Inject, Injectable, OnDestroy } from '@angular/core';
 import { NgServiceWorker } from '@angular/service-worker';
 import { Observable } from 'rxjs/Observable';
-import { ReplaySubject } from 'rxjs/ReplaySubject';
 import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/concat';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/filter';
+import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/take';
-import 'rxjs/add/operator/toPromise';
+import 'rxjs/add/operator/takeUntil';
+
+import { Logger } from 'app/shared/logger.service';
 
 
 /**
@@ -17,60 +20,57 @@ import 'rxjs/add/operator/toPromise';
  * @description
  * 1. Checks for available ServiceWorker updates once instantiated.
  * 2. As long as there is no update available, re-checks every 6 hours.
- * 3. As soon as an update is detected, it waits until the update is activated, then starts checking
- *    again (every 6 hours).
+ * 3. As soon as an update is detected, it activates the update and notifies interested parties.
+ * 4. It continues to check for available updates.
  *
  * @property
- * `isUpdateAvailable` {Observable<boolean>} - Emit `true`/`false` to indicate updates being
- * available or not. Remembers the last emitted value. Will only emit a new value if it is different
- * than the last one.
- *
- * @method
- * `activateUpdate()` {() => Promise<boolean>} - Activate the latest available update. The returned
- * promise resolves to `true` if an update was activated successfully and `false` if the activation
- * failed (e.g. if there was no update to activate).
+ * `updateActivated` {Observable<string>} - Emit the version hash whenever an update is activated.
  */
 @Injectable()
 export class SwUpdatesService implements OnDestroy {
   private checkInterval = 1000 * 60 * 60 * 6;   // 6 hours
   private onDestroy = new Subject();
   private checkForUpdateSubj = new Subject();
-  private isUpdateAvailableSubj = new ReplaySubject<boolean>(1);
-  isUpdateAvailable = this.isUpdateAvailableSubj.distinctUntilChanged();
+  updateActivated = this.sw.updates
+      .takeUntil(this.onDestroy)
+      .do(evt => this.log(`Update event: ${JSON.stringify(evt)}`))
+      .filter(({type}) => type === 'activation')
+      .map(({version}) => version);
 
-  constructor(private sw: NgServiceWorker) {
+  constructor(private logger: Logger, private sw: NgServiceWorker) {
     this.checkForUpdateSubj
         .debounceTime(this.checkInterval)
-        .takeUntil(this.onDestroy)
         .startWith(null)
-        .subscribe(() => this.checkForUpdate());
-
-    this.isUpdateAvailableSubj
-        .filter(v => !v)
         .takeUntil(this.onDestroy)
-        .subscribe(() => this.checkForUpdateSubj.next());
+        .subscribe(() => this.checkForUpdate());
   }
 
   ngOnDestroy() {
     this.onDestroy.next();
   }
 
-  activateUpdate(): Promise<boolean> {
-    return new Promise(resolve => {
-      this.sw.activateUpdate(null)
-          // Temp workaround for https://github.com/angular/mobile-toolkit/pull/137.
-          // TODO (gkalpak): Remove once #137 is fixed.
-          .concat(Observable.of(false)).take(1)
-          .do(() => this.isUpdateAvailableSubj.next(false))
-          .subscribe(resolve);
-    });
+  private activateUpdate() {
+    this.log('Activating update...');
+    this.sw.activateUpdate(null)
+        .subscribe(() => this.scheduleCheckForUpdate());
   }
 
   private checkForUpdate() {
+    this.log('Checking for update...');
     this.sw.checkForUpdate()
         // Temp workaround for https://github.com/angular/mobile-toolkit/pull/137.
         // TODO (gkalpak): Remove once #137 is fixed.
         .concat(Observable.of(false)).take(1)
-        .subscribe(v => this.isUpdateAvailableSubj.next(v));
+        .do(v => this.log(`Update available: ${v}`))
+        .subscribe(v => v ? this.activateUpdate() : this.scheduleCheckForUpdate());
+  }
+
+  private log(message: string) {
+    const timestamp = (new Date).toISOString();
+    this.logger.log(`[SwUpdates - ${timestamp}]: ${message}`);
+  }
+
+  private scheduleCheckForUpdate() {
+    this.checkForUpdateSubj.next();
   }
 }
diff --git a/aio/src/assets/images/backgrounds/browser-background-template.png b/aio/src/assets/images/backgrounds/_unused/browser-background-template.png
similarity index 100%
rename from aio/src/assets/images/backgrounds/browser-background-template.png
rename to aio/src/assets/images/backgrounds/_unused/browser-background-template.png
diff --git a/aio/src/assets/images/backgrounds/lon-paper.png b/aio/src/assets/images/backgrounds/_unused/lon-paper.png
similarity index 100%
rename from aio/src/assets/images/backgrounds/lon-paper.png
rename to aio/src/assets/images/backgrounds/_unused/lon-paper.png
diff --git a/aio/src/assets/images/backgrounds/_unused/ng-pattern-lg.png b/aio/src/assets/images/backgrounds/_unused/ng-pattern-lg.png
new file mode 100644
index 0000000000..9646b7ed7d
Binary files /dev/null and b/aio/src/assets/images/backgrounds/_unused/ng-pattern-lg.png differ
diff --git a/aio/src/assets/images/backgrounds/ng-pattern-lg.svg b/aio/src/assets/images/backgrounds/_unused/ng-pattern-lg.svg
similarity index 100%
rename from aio/src/assets/images/backgrounds/ng-pattern-lg.svg
rename to aio/src/assets/images/backgrounds/_unused/ng-pattern-lg.svg
diff --git a/aio/src/assets/images/backgrounds/_unused/ng-pattern-sm.png b/aio/src/assets/images/backgrounds/_unused/ng-pattern-sm.png
new file mode 100644
index 0000000000..12b5763e91
Binary files /dev/null and b/aio/src/assets/images/backgrounds/_unused/ng-pattern-sm.png differ
diff --git a/aio/src/assets/images/backgrounds/ng-pattern-sm.svg b/aio/src/assets/images/backgrounds/_unused/ng-pattern-sm.svg
similarity index 100%
rename from aio/src/assets/images/backgrounds/ng-pattern-sm.svg
rename to aio/src/assets/images/backgrounds/_unused/ng-pattern-sm.svg
diff --git a/aio/src/assets/images/backgrounds/sf-paper.png b/aio/src/assets/images/backgrounds/_unused/sf-paper.png
similarity index 100%
rename from aio/src/assets/images/backgrounds/sf-paper.png
rename to aio/src/assets/images/backgrounds/_unused/sf-paper.png
diff --git a/aio/src/assets/images/backgrounds/_unused/super-hero-large.png b/aio/src/assets/images/backgrounds/_unused/super-hero-large.png
new file mode 100644
index 0000000000..aebfc154aa
Binary files /dev/null and b/aio/src/assets/images/backgrounds/_unused/super-hero-large.png differ
diff --git a/aio/src/assets/images/backgrounds/ng-pattern-lg.png b/aio/src/assets/images/backgrounds/ng-pattern-lg.png
deleted file mode 100644
index fd09d9569b..0000000000
Binary files a/aio/src/assets/images/backgrounds/ng-pattern-lg.png and /dev/null differ
diff --git a/aio/src/assets/images/backgrounds/ng-pattern-sm.png b/aio/src/assets/images/backgrounds/ng-pattern-sm.png
deleted file mode 100644
index 73962ebdd9..0000000000
Binary files a/aio/src/assets/images/backgrounds/ng-pattern-sm.png and /dev/null differ
diff --git a/aio/src/assets/images/backgrounds/super-hero-large.png b/aio/src/assets/images/backgrounds/super-hero-large.png
deleted file mode 100644
index f883264d14..0000000000
Binary files a/aio/src/assets/images/backgrounds/super-hero-large.png and /dev/null differ
diff --git a/aio/src/assets/images/bios/_no-one.png b/aio/src/assets/images/bios/_no-one.png
deleted file mode 100644
index 64feccb3e8..0000000000
Binary files a/aio/src/assets/images/bios/_no-one.png and /dev/null differ
diff --git a/aio/src/assets/images/cardboard/Ionic_Logo.png b/aio/src/assets/images/cardboard/Ionic_Logo.png
deleted file mode 100644
index 7335dc3798..0000000000
Binary files a/aio/src/assets/images/cardboard/Ionic_Logo.png and /dev/null differ
diff --git a/aio/src/assets/images/cardboard/UC_Logo_Black.png b/aio/src/assets/images/cardboard/UC_Logo_Black.png
deleted file mode 100644
index 8133105474..0000000000
Binary files a/aio/src/assets/images/cardboard/UC_Logo_Black.png and /dev/null differ
diff --git a/aio/src/assets/images/cardboard/cardboard.png b/aio/src/assets/images/cardboard/cardboard.png
deleted file mode 100644
index b020de68a8..0000000000
Binary files a/aio/src/assets/images/cardboard/cardboard.png and /dev/null differ
diff --git a/aio/src/assets/images/cookbooks/aot-compiler/toh6-bundle.png b/aio/src/assets/images/cookbooks/aot-compiler/toh6-bundle.png
deleted file mode 100644
index d8592c4669..0000000000
Binary files a/aio/src/assets/images/cookbooks/aot-compiler/toh6-bundle.png and /dev/null differ
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/date-logger-entry.png b/aio/src/assets/images/cookbooks/dependency-injection/date-logger-entry.png
deleted file mode 100644
index f9b2f4cd86..0000000000
Binary files a/aio/src/assets/images/cookbooks/dependency-injection/date-logger-entry.png and /dev/null differ
diff --git a/aio/src/assets/images/cookbooks/dependency-injection/hero-of-month.png b/aio/src/assets/images/cookbooks/dependency-injection/hero-of-month.png
deleted file mode 100644
index a95dce79cc..0000000000
Binary files a/aio/src/assets/images/cookbooks/dependency-injection/hero-of-month.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/architecture/component-tree.png b/aio/src/assets/images/devguide/architecture/component-tree.png
deleted file mode 100644
index 4633b3d13a..0000000000
Binary files a/aio/src/assets/images/devguide/architecture/component-tree.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/architecture/databinding.png b/aio/src/assets/images/devguide/architecture/databinding.png
deleted file mode 100644
index f90dcb751f..0000000000
Binary files a/aio/src/assets/images/devguide/architecture/databinding.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/architecture/dependency-injection.png b/aio/src/assets/images/devguide/architecture/dependency-injection.png
deleted file mode 100644
index 2bc3ed7cbc..0000000000
Binary files a/aio/src/assets/images/devguide/architecture/dependency-injection.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/architecture/directive.png b/aio/src/assets/images/devguide/architecture/directive.png
deleted file mode 100644
index 651eca6b30..0000000000
Binary files a/aio/src/assets/images/devguide/architecture/directive.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/architecture/hero-component.png b/aio/src/assets/images/devguide/architecture/hero-component.png
deleted file mode 100644
index 291b5ace4d..0000000000
Binary files a/aio/src/assets/images/devguide/architecture/hero-component.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/architecture/library-module.png b/aio/src/assets/images/devguide/architecture/library-module.png
deleted file mode 100644
index 52658b97c5..0000000000
Binary files a/aio/src/assets/images/devguide/architecture/library-module.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/architecture/module.png b/aio/src/assets/images/devguide/architecture/module.png
deleted file mode 100644
index 058123eb86..0000000000
Binary files a/aio/src/assets/images/devguide/architecture/module.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/architecture/overview2.png b/aio/src/assets/images/devguide/architecture/overview2.png
deleted file mode 100644
index 71c363326a..0000000000
Binary files a/aio/src/assets/images/devguide/architecture/overview2.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/architecture/parent-child-binding.png b/aio/src/assets/images/devguide/architecture/parent-child-binding.png
deleted file mode 100644
index 8214b9c120..0000000000
Binary files a/aio/src/assets/images/devguide/architecture/parent-child-binding.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/architecture/template-metadata-component.png b/aio/src/assets/images/devguide/architecture/template-metadata-component.png
deleted file mode 100644
index b95f388640..0000000000
Binary files a/aio/src/assets/images/devguide/architecture/template-metadata-component.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/architecture/template.png b/aio/src/assets/images/devguide/architecture/template.png
deleted file mode 100644
index 9f06eea82b..0000000000
Binary files a/aio/src/assets/images/devguide/architecture/template.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/cli-quickstart/app-works.png b/aio/src/assets/images/devguide/cli-quickstart/app-works.png
deleted file mode 100644
index 1dbaa4f634..0000000000
Binary files a/aio/src/assets/images/devguide/cli-quickstart/app-works.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/cli-quickstart/my-first-app.png b/aio/src/assets/images/devguide/cli-quickstart/my-first-app.png
deleted file mode 100644
index 39e9060f05..0000000000
Binary files a/aio/src/assets/images/devguide/cli-quickstart/my-first-app.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/lifecycle-hooks/hooks-in-sequence.png b/aio/src/assets/images/devguide/lifecycle-hooks/hooks-in-sequence.png
deleted file mode 100644
index efbdd7b315..0000000000
Binary files a/aio/src/assets/images/devguide/lifecycle-hooks/hooks-in-sequence.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/ngcontainer/hero-traits-bad.png b/aio/src/assets/images/devguide/ngcontainer/hero-traits-bad.png
deleted file mode 100644
index 08dbbbb56e..0000000000
Binary files a/aio/src/assets/images/devguide/ngcontainer/hero-traits-bad.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/ngcontainer/hero-traits-good.png b/aio/src/assets/images/devguide/ngcontainer/hero-traits-good.png
deleted file mode 100644
index 538b24af2d..0000000000
Binary files a/aio/src/assets/images/devguide/ngcontainer/hero-traits-good.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/plunker-separate-window-button.png b/aio/src/assets/images/devguide/plunker-separate-window-button.png
deleted file mode 100644
index 8ed3bdb3e6..0000000000
Binary files a/aio/src/assets/images/devguide/plunker-separate-window-button.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/plunker-switch-to-editor-button.png b/aio/src/assets/images/devguide/plunker-switch-to-editor-button.png
deleted file mode 100644
index 004a16c930..0000000000
Binary files a/aio/src/assets/images/devguide/plunker-switch-to-editor-button.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/reactive-forms/address-group.png b/aio/src/assets/images/devguide/reactive-forms/address-group.png
deleted file mode 100644
index 214f269de5..0000000000
Binary files a/aio/src/assets/images/devguide/reactive-forms/address-group.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/reactive-forms/addresses-array.png b/aio/src/assets/images/devguide/reactive-forms/addresses-array.png
deleted file mode 100644
index e65b5ec043..0000000000
Binary files a/aio/src/assets/images/devguide/reactive-forms/addresses-array.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/reactive-forms/json-output.png b/aio/src/assets/images/devguide/reactive-forms/json-output.png
deleted file mode 100644
index ef3a16c67c..0000000000
Binary files a/aio/src/assets/images/devguide/reactive-forms/json-output.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/reactive-forms/just-formcontrol.png b/aio/src/assets/images/devguide/reactive-forms/just-formcontrol.png
deleted file mode 100644
index e51a0f6c80..0000000000
Binary files a/aio/src/assets/images/devguide/reactive-forms/just-formcontrol.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/reactive-forms/validators-json-output.png b/aio/src/assets/images/devguide/reactive-forms/validators-json-output.png
deleted file mode 100644
index b101b43731..0000000000
Binary files a/aio/src/assets/images/devguide/reactive-forms/validators-json-output.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/router/confirm-dialog.png b/aio/src/assets/images/devguide/router/confirm-dialog.png
deleted file mode 100644
index 03310a7492..0000000000
Binary files a/aio/src/assets/images/devguide/router/confirm-dialog.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/router/contact-popup.png b/aio/src/assets/images/devguide/router/contact-popup.png
deleted file mode 100644
index cb050f32d3..0000000000
Binary files a/aio/src/assets/images/devguide/router/contact-popup.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/router/crisis-center-detail.png b/aio/src/assets/images/devguide/router/crisis-center-detail.png
deleted file mode 100644
index 605b781dd4..0000000000
Binary files a/aio/src/assets/images/devguide/router/crisis-center-detail.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/router/crisis-center-list.png b/aio/src/assets/images/devguide/router/crisis-center-list.png
deleted file mode 100644
index 5500d4e28c..0000000000
Binary files a/aio/src/assets/images/devguide/router/crisis-center-list.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/router/hero-detail.png b/aio/src/assets/images/devguide/router/hero-detail.png
deleted file mode 100644
index 6e9cfda662..0000000000
Binary files a/aio/src/assets/images/devguide/router/hero-detail.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/router/hero-list.png b/aio/src/assets/images/devguide/router/hero-list.png
deleted file mode 100644
index cee925e40f..0000000000
Binary files a/aio/src/assets/images/devguide/router/hero-list.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/router/router-1-anim.gif b/aio/src/assets/images/devguide/router/router-1-anim.gif
deleted file mode 100644
index 8402849d56..0000000000
Binary files a/aio/src/assets/images/devguide/router/router-1-anim.gif and /dev/null differ
diff --git a/aio/src/assets/images/devguide/router/shell-and-outlet.png b/aio/src/assets/images/devguide/router/shell-and-outlet.png
deleted file mode 100644
index 2eca7af353..0000000000
Binary files a/aio/src/assets/images/devguide/router/shell-and-outlet.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/security/binding-inner-html.png b/aio/src/assets/images/devguide/security/binding-inner-html.png
deleted file mode 100644
index 87292e8eb9..0000000000
Binary files a/aio/src/assets/images/devguide/security/binding-inner-html.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/security/bypass-security-component-old.png b/aio/src/assets/images/devguide/security/bypass-security-component-old.png
deleted file mode 100644
index 05687dc823..0000000000
Binary files a/aio/src/assets/images/devguide/security/bypass-security-component-old.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/security/bypass-security-component.jpg b/aio/src/assets/images/devguide/security/bypass-security-component.jpg
deleted file mode 100644
index c98f1c5841..0000000000
Binary files a/aio/src/assets/images/devguide/security/bypass-security-component.jpg and /dev/null differ
diff --git a/aio/src/assets/images/devguide/security/bypass-security-component.png b/aio/src/assets/images/devguide/security/bypass-security-component.png
deleted file mode 100644
index dcfcc7a529..0000000000
Binary files a/aio/src/assets/images/devguide/security/bypass-security-component.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/server-communication/http-toh.gif b/aio/src/assets/images/devguide/server-communication/http-toh.gif
deleted file mode 100644
index e3a42724f1..0000000000
Binary files a/aio/src/assets/images/devguide/server-communication/http-toh.gif and /dev/null differ
diff --git a/aio/src/assets/images/devguide/server-communication/wiki-1.gif b/aio/src/assets/images/devguide/server-communication/wiki-1.gif
deleted file mode 100644
index 0d1689a4e5..0000000000
Binary files a/aio/src/assets/images/devguide/server-communication/wiki-1.gif and /dev/null differ
diff --git a/aio/src/assets/images/devguide/server-communication/wiki-2.gif b/aio/src/assets/images/devguide/server-communication/wiki-2.gif
deleted file mode 100644
index bf566b6385..0000000000
Binary files a/aio/src/assets/images/devguide/server-communication/wiki-2.gif and /dev/null differ
diff --git a/aio/src/assets/images/devguide/template-syntax/evil-title.png b/aio/src/assets/images/devguide/template-syntax/evil-title.png
deleted file mode 100644
index 65249e8359..0000000000
Binary files a/aio/src/assets/images/devguide/template-syntax/evil-title.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/template-syntax/ng-for-track-by-anim.gif b/aio/src/assets/images/devguide/template-syntax/ng-for-track-by-anim.gif
deleted file mode 100644
index 31f603f27c..0000000000
Binary files a/aio/src/assets/images/devguide/template-syntax/ng-for-track-by-anim.gif and /dev/null differ
diff --git a/aio/src/assets/images/devguide/testing/highlight-directive-spec.png b/aio/src/assets/images/devguide/testing/highlight-directive-spec.png
deleted file mode 100644
index 6eb88b2bd5..0000000000
Binary files a/aio/src/assets/images/devguide/testing/highlight-directive-spec.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/testing/karma-1st-spec-debug.png b/aio/src/assets/images/devguide/testing/karma-1st-spec-debug.png
deleted file mode 100644
index 8a5a139a0c..0000000000
Binary files a/aio/src/assets/images/devguide/testing/karma-1st-spec-debug.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/testing/karma-1st-spec-output.png b/aio/src/assets/images/devguide/testing/karma-1st-spec-output.png
deleted file mode 100644
index db8af771b5..0000000000
Binary files a/aio/src/assets/images/devguide/testing/karma-1st-spec-output.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/testing/karma-browser.png b/aio/src/assets/images/devguide/testing/karma-browser.png
deleted file mode 100644
index 341b348fa1..0000000000
Binary files a/aio/src/assets/images/devguide/testing/karma-browser.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/toh/mini-hero-detail.png b/aio/src/assets/images/devguide/toh/mini-hero-detail.png
deleted file mode 100644
index 62294aaad4..0000000000
Binary files a/aio/src/assets/images/devguide/toh/mini-hero-detail.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/upgrade/a-to-ajs-with-transclusion.png b/aio/src/assets/images/devguide/upgrade/a-to-ajs-with-transclusion.png
deleted file mode 100644
index cbff5ad4fb..0000000000
Binary files a/aio/src/assets/images/devguide/upgrade/a-to-ajs-with-transclusion.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/upgrade/a-to-ajs.png b/aio/src/assets/images/devguide/upgrade/a-to-ajs.png
deleted file mode 100644
index 6ee416d0bb..0000000000
Binary files a/aio/src/assets/images/devguide/upgrade/a-to-ajs.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/upgrade/ajs-to-a-with-projection.png b/aio/src/assets/images/devguide/upgrade/ajs-to-a-with-projection.png
deleted file mode 100644
index 42ad5f9a5a..0000000000
Binary files a/aio/src/assets/images/devguide/upgrade/ajs-to-a-with-projection.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/upgrade/ajs-to-a.png b/aio/src/assets/images/devguide/upgrade/ajs-to-a.png
deleted file mode 100644
index 98764437fe..0000000000
Binary files a/aio/src/assets/images/devguide/upgrade/ajs-to-a.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/upgrade/change_detection.png b/aio/src/assets/images/devguide/upgrade/change_detection.png
deleted file mode 100644
index 269118d81a..0000000000
Binary files a/aio/src/assets/images/devguide/upgrade/change_detection.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/upgrade/dom.png b/aio/src/assets/images/devguide/upgrade/dom.png
deleted file mode 100644
index 21d2e8a8ca..0000000000
Binary files a/aio/src/assets/images/devguide/upgrade/dom.png and /dev/null differ
diff --git a/aio/src/assets/images/devguide/upgrade/injectors.png b/aio/src/assets/images/devguide/upgrade/injectors.png
deleted file mode 100644
index 60f491ebef..0000000000
Binary files a/aio/src/assets/images/devguide/upgrade/injectors.png and /dev/null differ
diff --git a/aio/src/assets/images/examples/displaying-data-example1.png b/aio/src/assets/images/examples/displaying-data-example1.png
deleted file mode 100644
index d1f39b4af9..0000000000
Binary files a/aio/src/assets/images/examples/displaying-data-example1.png and /dev/null differ
diff --git a/aio/src/assets/images/examples/setup-example1.png b/aio/src/assets/images/examples/setup-example1.png
deleted file mode 100644
index e38024d050..0000000000
Binary files a/aio/src/assets/images/examples/setup-example1.png and /dev/null differ
diff --git a/aio/src/assets/images/examples/user-input-example1.png b/aio/src/assets/images/examples/user-input-example1.png
deleted file mode 100644
index b7fc7d6e3f..0000000000
Binary files a/aio/src/assets/images/examples/user-input-example1.png and /dev/null differ
diff --git a/aio/src/assets/images/favicons/apple-touch-icon-152x152.png b/aio/src/assets/images/favicons/_unused/apple-touch-icon-152x152.png
similarity index 100%
rename from aio/src/assets/images/favicons/apple-touch-icon-152x152.png
rename to aio/src/assets/images/favicons/_unused/apple-touch-icon-152x152.png
diff --git a/aio/src/assets/images/favicons/apple-touch-icon-180x180.png b/aio/src/assets/images/favicons/_unused/apple-touch-icon-180x180.png
similarity index 100%
rename from aio/src/assets/images/favicons/apple-touch-icon-180x180.png
rename to aio/src/assets/images/favicons/_unused/apple-touch-icon-180x180.png
diff --git a/aio/src/assets/images/favicons/apple-touch-icon-precomposed.png b/aio/src/assets/images/favicons/_unused/apple-touch-icon-precomposed.png
similarity index 100%
rename from aio/src/assets/images/favicons/apple-touch-icon-precomposed.png
rename to aio/src/assets/images/favicons/_unused/apple-touch-icon-precomposed.png
diff --git a/aio/src/assets/images/favicons/apple-touch-icon.png b/aio/src/assets/images/favicons/_unused/apple-touch-icon.png
similarity index 100%
rename from aio/src/assets/images/favicons/apple-touch-icon.png
rename to aio/src/assets/images/favicons/_unused/apple-touch-icon.png
diff --git a/aio/src/assets/images/favicons/manifest.json b/aio/src/assets/images/favicons/manifest.json
deleted file mode 100644
index 8cd1842f85..0000000000
--- a/aio/src/assets/images/favicons/manifest.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-	"name": "Angular.io",
-	"icons": [
-		{
-			"src": "\/android-chrome-36x36.png",
-			"sizes": "36x36",
-			"type": "image\/png",
-			"density": "0.75"
-		},
-		{
-			"src": "\/android-chrome-48x48.png",
-			"sizes": "48x48",
-			"type": "image\/png",
-			"density": "1.0"
-		},
-		{
-			"src": "\/android-chrome-72x72.png",
-			"sizes": "72x72",
-			"type": "image\/png",
-			"density": "1.5"
-		},
-		{
-			"src": "\/android-chrome-96x96.png",
-			"sizes": "96x96",
-			"type": "image\/png",
-			"density": "2.0"
-		},
-		{
-			"src": "\/android-chrome-144x144.png",
-			"sizes": "144x144",
-			"type": "image\/png",
-			"density": "3.0"
-		},
-		{
-			"src": "\/android-chrome-192x192.png",
-			"sizes": "192x192",
-			"type": "image\/png",
-			"density": "4.0"
-		}
-	]
-}
diff --git a/aio/src/assets/images/home/joyful-development.gif b/aio/src/assets/images/home/_unused/joyful-development.gif
similarity index 100%
rename from aio/src/assets/images/home/joyful-development.gif
rename to aio/src/assets/images/home/_unused/joyful-development.gif
diff --git a/aio/src/assets/images/home/joyful-development.jpg b/aio/src/assets/images/home/_unused/joyful-development.jpg
similarity index 100%
rename from aio/src/assets/images/home/joyful-development.jpg
rename to aio/src/assets/images/home/_unused/joyful-development.jpg
diff --git a/aio/src/assets/images/home/_unused/joyful-development.png b/aio/src/assets/images/home/_unused/joyful-development.png
new file mode 100644
index 0000000000..603d3dde13
Binary files /dev/null and b/aio/src/assets/images/home/_unused/joyful-development.png differ
diff --git a/aio/src/assets/images/home/_unused/loved-by-millions.png b/aio/src/assets/images/home/_unused/loved-by-millions.png
new file mode 100644
index 0000000000..5ec8bf8b65
Binary files /dev/null and b/aio/src/assets/images/home/_unused/loved-by-millions.png differ
diff --git a/aio/src/assets/images/home/responsive-framework.png b/aio/src/assets/images/home/_unused/responsive-framework.png
similarity index 100%
rename from aio/src/assets/images/home/responsive-framework.png
rename to aio/src/assets/images/home/_unused/responsive-framework.png
diff --git a/aio/src/assets/images/home/joyful-development.png b/aio/src/assets/images/home/joyful-development.png
deleted file mode 100644
index 57df923898..0000000000
Binary files a/aio/src/assets/images/home/joyful-development.png and /dev/null differ
diff --git a/aio/src/assets/images/home/loved-by-millions.png b/aio/src/assets/images/home/loved-by-millions.png
deleted file mode 100644
index b0872ba5fc..0000000000
Binary files a/aio/src/assets/images/home/loved-by-millions.png and /dev/null differ
diff --git a/aio/src/assets/images/icons/clippy.svg b/aio/src/assets/images/icons/_unused/clippy.svg
similarity index 100%
rename from aio/src/assets/images/icons/clippy.svg
rename to aio/src/assets/images/icons/_unused/clippy.svg
diff --git a/aio/src/assets/images/icons/favicon.ico b/aio/src/assets/images/icons/_unused/favicon.ico
similarity index 100%
rename from aio/src/assets/images/icons/favicon.ico
rename to aio/src/assets/images/icons/_unused/favicon.ico
diff --git a/aio/src/assets/images/icons/ic_keyboard_arrow_down_black_24px.svg b/aio/src/assets/images/icons/_unused/ic_keyboard_arrow_down_black_24px.svg
similarity index 100%
rename from aio/src/assets/images/icons/ic_keyboard_arrow_down_black_24px.svg
rename to aio/src/assets/images/icons/_unused/ic_keyboard_arrow_down_black_24px.svg
diff --git a/aio/src/assets/images/logos/_unused/anglebrackets/anglebrackets.png b/aio/src/assets/images/logos/_unused/anglebrackets/anglebrackets.png
new file mode 100644
index 0000000000..d1eec22f77
Binary files /dev/null and b/aio/src/assets/images/logos/_unused/anglebrackets/anglebrackets.png differ
diff --git a/aio/src/assets/images/logos/_unused/anglebrackets/devintersection.png b/aio/src/assets/images/logos/_unused/anglebrackets/devintersection.png
new file mode 100644
index 0000000000..d1ac2afa53
Binary files /dev/null and b/aio/src/assets/images/logos/_unused/anglebrackets/devintersection.png differ
diff --git a/aio/src/assets/images/logos/angularconnect/angularconnect-logo-med.png b/aio/src/assets/images/logos/_unused/angularconnect/angularconnect-logo-med.png
similarity index 100%
rename from aio/src/assets/images/logos/angularconnect/angularconnect-logo-med.png
rename to aio/src/assets/images/logos/_unused/angularconnect/angularconnect-logo-med.png
diff --git a/aio/src/assets/images/logos/angularconnect/angularconnect-logo-small.png b/aio/src/assets/images/logos/_unused/angularconnect/angularconnect-logo-small.png
similarity index 100%
rename from aio/src/assets/images/logos/angularconnect/angularconnect-logo-small.png
rename to aio/src/assets/images/logos/_unused/angularconnect/angularconnect-logo-small.png
diff --git a/aio/src/assets/images/logos/angularconnect/angularconnect-logo-text.png b/aio/src/assets/images/logos/_unused/angularconnect/angularconnect-logo-text.png
similarity index 100%
rename from aio/src/assets/images/logos/angularconnect/angularconnect-logo-text.png
rename to aio/src/assets/images/logos/_unused/angularconnect/angularconnect-logo-text.png
diff --git a/aio/src/assets/images/logos/angularconnect/angularconnect-logo.png b/aio/src/assets/images/logos/_unused/angularconnect/angularconnect-logo.png
similarity index 100%
rename from aio/src/assets/images/logos/angularconnect/angularconnect-logo.png
rename to aio/src/assets/images/logos/_unused/angularconnect/angularconnect-logo.png
diff --git a/aio/src/assets/images/logos/_unused/google/gdd-logo.png b/aio/src/assets/images/logos/_unused/google/gdd-logo.png
new file mode 100644
index 0000000000..981aa45362
Binary files /dev/null and b/aio/src/assets/images/logos/_unused/google/gdd-logo.png differ
diff --git a/aio/src/assets/images/logos/html5/html5.png b/aio/src/assets/images/logos/_unused/html5/html5.png
similarity index 100%
rename from aio/src/assets/images/logos/html5/html5.png
rename to aio/src/assets/images/logos/_unused/html5/html5.png
diff --git a/aio/src/assets/images/logos/html5/html5.svg b/aio/src/assets/images/logos/_unused/html5/html5.svg
similarity index 100%
rename from aio/src/assets/images/logos/html5/html5.svg
rename to aio/src/assets/images/logos/_unused/html5/html5.svg
diff --git a/aio/src/assets/images/logos/html5/html5@2x.png b/aio/src/assets/images/logos/_unused/html5/html5@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/html5/html5@2x.png
rename to aio/src/assets/images/logos/_unused/html5/html5@2x.png
diff --git a/aio/src/assets/images/logos/inverse/shield/128.png b/aio/src/assets/images/logos/_unused/inverse/shield/128.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/128.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/128.png
diff --git a/aio/src/assets/images/logos/inverse/shield/128@2x.png b/aio/src/assets/images/logos/_unused/inverse/shield/128@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/128@2x.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/128@2x.png
diff --git a/aio/src/assets/images/logos/inverse/shield/16.png b/aio/src/assets/images/logos/_unused/inverse/shield/16.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/16.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/16.png
diff --git a/aio/src/assets/images/logos/inverse/shield/16@2x.png b/aio/src/assets/images/logos/_unused/inverse/shield/16@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/16@2x.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/16@2x.png
diff --git a/aio/src/assets/images/logos/inverse/shield/22.png b/aio/src/assets/images/logos/_unused/inverse/shield/22.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/22.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/22.png
diff --git a/aio/src/assets/images/logos/inverse/shield/22@2x.png b/aio/src/assets/images/logos/_unused/inverse/shield/22@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/22@2x.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/22@2x.png
diff --git a/aio/src/assets/images/logos/inverse/shield/22svg.svg b/aio/src/assets/images/logos/_unused/inverse/shield/22svg.svg
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/22svg.svg
rename to aio/src/assets/images/logos/_unused/inverse/shield/22svg.svg
diff --git a/aio/src/assets/images/logos/inverse/shield/256.png b/aio/src/assets/images/logos/_unused/inverse/shield/256.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/256.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/256.png
diff --git a/aio/src/assets/images/logos/inverse/shield/256@2x.png b/aio/src/assets/images/logos/_unused/inverse/shield/256@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/256@2x.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/256@2x.png
diff --git a/aio/src/assets/images/logos/inverse/shield/32.png b/aio/src/assets/images/logos/_unused/inverse/shield/32.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/32.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/32.png
diff --git a/aio/src/assets/images/logos/inverse/shield/32@2x.png b/aio/src/assets/images/logos/_unused/inverse/shield/32@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/32@2x.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/32@2x.png
diff --git a/aio/src/assets/images/logos/inverse/shield/48.png b/aio/src/assets/images/logos/_unused/inverse/shield/48.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/48.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/48.png
diff --git a/aio/src/assets/images/logos/inverse/shield/48@2x.png b/aio/src/assets/images/logos/_unused/inverse/shield/48@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/48@2x.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/48@2x.png
diff --git a/aio/src/assets/images/logos/inverse/shield/shield-large.png b/aio/src/assets/images/logos/_unused/inverse/shield/shield-large.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/shield-large.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/shield-large.png
diff --git a/aio/src/assets/images/logos/inverse/shield/shield-large.svg b/aio/src/assets/images/logos/_unused/inverse/shield/shield-large.svg
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/shield-large.svg
rename to aio/src/assets/images/logos/_unused/inverse/shield/shield-large.svg
diff --git a/aio/src/assets/images/logos/inverse/shield/shield-large@2x.png b/aio/src/assets/images/logos/_unused/inverse/shield/shield-large@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/inverse/shield/shield-large@2x.png
rename to aio/src/assets/images/logos/_unused/inverse/shield/shield-large@2x.png
diff --git a/aio/src/assets/images/logos/license/open-source.png b/aio/src/assets/images/logos/_unused/license/open-source.png
similarity index 100%
rename from aio/src/assets/images/logos/license/open-source.png
rename to aio/src/assets/images/logos/_unused/license/open-source.png
diff --git a/aio/src/assets/images/logos/license/open-source@2x.png b/aio/src/assets/images/logos/_unused/license/open-source@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/license/open-source@2x.png
rename to aio/src/assets/images/logos/_unused/license/open-source@2x.png
diff --git a/aio/src/assets/images/logos/ng-conf/ng-conf-shield.png b/aio/src/assets/images/logos/_unused/ng-conf/ng-conf-shield.png
similarity index 100%
rename from aio/src/assets/images/logos/ng-conf/ng-conf-shield.png
rename to aio/src/assets/images/logos/_unused/ng-conf/ng-conf-shield.png
diff --git a/aio/src/assets/images/logos/ng-conf/ng-conf-shield@2x.png b/aio/src/assets/images/logos/_unused/ng-conf/ng-conf-shield@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/ng-conf/ng-conf-shield@2x.png
rename to aio/src/assets/images/logos/_unused/ng-conf/ng-conf-shield@2x.png
diff --git a/aio/src/assets/images/logos/_unused/ng-europe/ng-europe-logo.png b/aio/src/assets/images/logos/_unused/ng-europe/ng-europe-logo.png
new file mode 100644
index 0000000000..838156b4ff
Binary files /dev/null and b/aio/src/assets/images/logos/_unused/ng-europe/ng-europe-logo.png differ
diff --git a/aio/src/assets/images/logos/anglebrackets/anglebrackets.png b/aio/src/assets/images/logos/anglebrackets/anglebrackets.png
deleted file mode 100644
index 637ad53eb0..0000000000
Binary files a/aio/src/assets/images/logos/anglebrackets/anglebrackets.png and /dev/null differ
diff --git a/aio/src/assets/images/logos/anglebrackets/devintersection.png b/aio/src/assets/images/logos/anglebrackets/devintersection.png
deleted file mode 100644
index 2be8eead25..0000000000
Binary files a/aio/src/assets/images/logos/anglebrackets/devintersection.png and /dev/null differ
diff --git a/aio/src/assets/images/logos/angular/_unused/angular-banner-logo-grey.png b/aio/src/assets/images/logos/angular/_unused/angular-banner-logo-grey.png
new file mode 100644
index 0000000000..3804ac1064
Binary files /dev/null and b/aio/src/assets/images/logos/angular/_unused/angular-banner-logo-grey.png differ
diff --git a/aio/src/assets/images/support/angular-gde-logo.png b/aio/src/assets/images/logos/angular/_unused/angular-gde-logo.png
similarity index 100%
rename from aio/src/assets/images/support/angular-gde-logo.png
rename to aio/src/assets/images/logos/angular/_unused/angular-gde-logo.png
diff --git a/aio/src/assets/images/logos/standard/angular-gde-logo@2x.png b/aio/src/assets/images/logos/angular/_unused/angular-gde-logo@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/standard/angular-gde-logo@2x.png
rename to aio/src/assets/images/logos/angular/_unused/angular-gde-logo@2x.png
diff --git a/aio/src/assets/images/logos/angular/_unused/angular-logo-banner.png b/aio/src/assets/images/logos/angular/_unused/angular-logo-banner.png
new file mode 100644
index 0000000000..751ee050b7
Binary files /dev/null and b/aio/src/assets/images/logos/angular/_unused/angular-logo-banner.png differ
diff --git a/aio/src/assets/images/logos/angular/_unused/logo-nav-small.png b/aio/src/assets/images/logos/angular/_unused/logo-nav-small.png
new file mode 100644
index 0000000000..9a6676c0e6
Binary files /dev/null and b/aio/src/assets/images/logos/angular/_unused/logo-nav-small.png differ
diff --git a/aio/src/assets/images/logos/standard/logo-nav.png b/aio/src/assets/images/logos/angular/_unused/logo-nav.png
similarity index 100%
rename from aio/src/assets/images/logos/standard/logo-nav.png
rename to aio/src/assets/images/logos/angular/_unused/logo-nav.png
diff --git a/aio/src/assets/images/logos/standard/shield-large.png b/aio/src/assets/images/logos/angular/_unused/shield-large.png
similarity index 100%
rename from aio/src/assets/images/logos/standard/shield-large.png
rename to aio/src/assets/images/logos/angular/_unused/shield-large.png
diff --git a/aio/src/assets/images/logos/standard/shield-large@2x.png b/aio/src/assets/images/logos/angular/_unused/shield-large@2x.png
similarity index 100%
rename from aio/src/assets/images/logos/standard/shield-large@2x.png
rename to aio/src/assets/images/logos/angular/_unused/shield-large@2x.png
diff --git a/aio/src/assets/images/logos/angular/shield-with-beta.png b/aio/src/assets/images/logos/angular/_unused/shield-with-beta.png
similarity index 100%
rename from aio/src/assets/images/logos/angular/shield-with-beta.png
rename to aio/src/assets/images/logos/angular/_unused/shield-with-beta.png
diff --git a/aio/src/assets/images/logos/angular/angular-banner-logo-grey.png b/aio/src/assets/images/logos/angular/angular-banner-logo-grey.png
deleted file mode 100644
index a4f988e9b8..0000000000
Binary files a/aio/src/assets/images/logos/angular/angular-banner-logo-grey.png and /dev/null differ
diff --git a/aio/src/assets/images/logos/angular/angular-logo-banner.png b/aio/src/assets/images/logos/angular/angular-logo-banner.png
deleted file mode 100644
index 3fc8febb91..0000000000
Binary files a/aio/src/assets/images/logos/angular/angular-logo-banner.png and /dev/null differ
diff --git a/aio/src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png b/aio/src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png
new file mode 100644
index 0000000000..c920d95739
Binary files /dev/null and b/aio/src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png differ
diff --git a/aio/src/assets/images/logos/angular/logo-nav@2x.png b/aio/src/assets/images/logos/angular/logo-nav@2x.png
new file mode 100644
index 0000000000..fc836726f2
Binary files /dev/null and b/aio/src/assets/images/logos/angular/logo-nav@2x.png differ
diff --git a/aio/src/assets/images/logos/standard/shield-large.svg b/aio/src/assets/images/logos/angular/shield-large.svg
similarity index 100%
rename from aio/src/assets/images/logos/standard/shield-large.svg
rename to aio/src/assets/images/logos/angular/shield-large.svg
diff --git a/aio/src/assets/images/logos/google/gdd-logo.png b/aio/src/assets/images/logos/google/gdd-logo.png
deleted file mode 100644
index 06826b95d1..0000000000
Binary files a/aio/src/assets/images/logos/google/gdd-logo.png and /dev/null differ
diff --git a/aio/src/assets/images/support/github-logo.png b/aio/src/assets/images/logos/misc/_unused/github-logo.png
similarity index 100%
rename from aio/src/assets/images/support/github-logo.png
rename to aio/src/assets/images/logos/misc/_unused/github-logo.png
diff --git a/aio/src/assets/images/support/gitter-logo.png b/aio/src/assets/images/logos/misc/_unused/gitter-logo.png
similarity index 100%
rename from aio/src/assets/images/support/gitter-logo.png
rename to aio/src/assets/images/logos/misc/_unused/gitter-logo.png
diff --git a/aio/src/assets/images/support/reddit-logo.png b/aio/src/assets/images/logos/misc/_unused/reddit-logo.png
similarity index 100%
rename from aio/src/assets/images/support/reddit-logo.png
rename to aio/src/assets/images/logos/misc/_unused/reddit-logo.png
diff --git a/aio/src/assets/images/support/stackoverflow-logo.png b/aio/src/assets/images/logos/misc/_unused/stackoverflow-logo.png
similarity index 100%
rename from aio/src/assets/images/support/stackoverflow-logo.png
rename to aio/src/assets/images/logos/misc/_unused/stackoverflow-logo.png
diff --git a/aio/src/assets/images/logos/ng-europe/ng-europe-logo.png b/aio/src/assets/images/logos/ng-europe/ng-europe-logo.png
deleted file mode 100644
index 92d68a1776..0000000000
Binary files a/aio/src/assets/images/logos/ng-europe/ng-europe-logo.png and /dev/null differ
diff --git a/aio/src/assets/images/logos/standard/logo-nav-small.png b/aio/src/assets/images/logos/standard/logo-nav-small.png
deleted file mode 100644
index 294e4c62b6..0000000000
Binary files a/aio/src/assets/images/logos/standard/logo-nav-small.png and /dev/null differ
diff --git a/aio/src/assets/images/logos/standard/logo-nav@2x.png b/aio/src/assets/images/logos/standard/logo-nav@2x.png
deleted file mode 100644
index a007ede0e0..0000000000
Binary files a/aio/src/assets/images/logos/standard/logo-nav@2x.png and /dev/null differ
diff --git a/aio/src/assets/images/plunker/click-to-run.png b/aio/src/assets/images/plunker/click-to-run.png
deleted file mode 100644
index e64c98c84f..0000000000
Binary files a/aio/src/assets/images/plunker/click-to-run.png and /dev/null differ
diff --git a/aio/src/assets/images/support/angular-404.svg b/aio/src/assets/images/support/angular-404.svg
new file mode 100644
index 0000000000..173ea9d2f7
--- /dev/null
+++ b/aio/src/assets/images/support/angular-404.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E23237;}
+	.st1{fill:#B52E31;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:none;stroke:#FFFFFF;stroke-width:10;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<path class="st0" d="M5.7,33.2L98.8,0l95.5,32.6l-15.4,123.1L98.8,200L20,156.3L5.7,33.2z"/>
+	<path class="st1" d="M194.3,32.6L98.8,0v200l80.1-44.3L194.3,32.6L194.3,32.6z"/>
+</g>
+<g>
+	<g>
+		<circle class="st2" cx="61.7" cy="80" r="10.7"/>
+		<circle class="st2" cx="138.3" cy="80" r="10.7"/>
+	</g>
+	<path class="st3" d="M138,130.6c0,0-33.5-42.5-76,0"/>
+</g>
+</svg>
diff --git a/aio/content/images/bios/_no-one.png b/aio/src/content/images/bios/_no-one.png
similarity index 100%
rename from aio/content/images/bios/_no-one.png
rename to aio/src/content/images/bios/_no-one.png
diff --git a/aio/content/images/bios/angular-gde-bio-placeholder.png b/aio/src/content/images/bios/angular-gde-bio-placeholder.png
similarity index 100%
rename from aio/content/images/bios/angular-gde-bio-placeholder.png
rename to aio/src/content/images/bios/angular-gde-bio-placeholder.png
diff --git a/aio/content/images/bios/shield-bio-placeholder.png b/aio/src/content/images/bios/shield-bio-placeholder.png
similarity index 100%
rename from aio/content/images/bios/shield-bio-placeholder.png
rename to aio/src/content/images/bios/shield-bio-placeholder.png
diff --git a/aio/src/environments/environment.prod.ts b/aio/src/environments/environment.prod.ts
index c81ba25ab9..0f5ad5b335 100644
--- a/aio/src/environments/environment.prod.ts
+++ b/aio/src/environments/environment.prod.ts
@@ -1,4 +1,5 @@
+// This is for the production site, which is hosted at https://angular.io
 export const environment = {
-  gaId: 'UA-8594346-26', // TODO: this is for the staging site; reset to correct account
+  gaId: 'UA-8594346-15',
   production: true
 };
diff --git a/aio/src/environments/environment.stage.ts b/aio/src/environments/environment.stage.ts
new file mode 100644
index 0000000000..97a992c88f
--- /dev/null
+++ b/aio/src/environments/environment.stage.ts
@@ -0,0 +1,5 @@
+// This is for the staging site, which is hosted at https://aio-staging.firebaseapp.org
+export const environment = {
+  gaId: 'UA-8594346-26',
+  production: true
+};
diff --git a/aio/src/environments/environment.ts b/aio/src/environments/environment.ts
index 69c1f7c8bd..165a718f55 100644
--- a/aio/src/environments/environment.ts
+++ b/aio/src/environments/environment.ts
@@ -3,6 +3,15 @@
 // `ng build --env=prod` then `environment.prod.ts` will be used instead.
 // The list of which env maps to which file can be found in `angular-cli.json`.
 
+
+// Reflect.metadata polyfill is only needed in the JIT/dev mode.
+//
+// In order to load these polyfills early enough (before app code), polyfill.ts imports this file to
+// to change the order in the final bundle.
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
 export const environment = {
   gaId: 'UA-8594346-26', // Staging site
   production: false
diff --git a/aio/src/google385281288605d160.html b/aio/src/google385281288605d160.html
new file mode 100644
index 0000000000..0e3614a195
--- /dev/null
+++ b/aio/src/google385281288605d160.html
@@ -0,0 +1 @@
+google-site-verification: google385281288605d160.html
\ No newline at end of file
diff --git a/aio/src/ie-polyfills.js b/aio/src/ie-polyfills.js
new file mode 100644
index 0000000000..83bd30af94
--- /dev/null
+++ b/aio/src/ie-polyfills.js
@@ -0,0 +1,21 @@
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/weak-map';
+import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+import 'classlist.js';
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+import 'web-animations-js';
diff --git a/aio/src/index.html b/aio/src/index.html
index 795c0dc5db..fca6077a28 100644
--- a/aio/src/index.html
+++ b/aio/src/index.html
@@ -15,15 +15,22 @@
         sizes="194x194">
   <link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png"
         sizes="96x96">
-  <link rel="icon" type="image/png" href="assets/images/favicons/android-chrome-192x192.png"
-        sizes="192x192">
   <link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png"
         sizes="16x16">
+  <link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/apple-touch-icon-144x144.png">
 
+  <!-- NOTE: These need to be kept in sync with `ngsw-manifest.json`. -->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+  <!-- -->
+
   <link rel="manifest" href="pwa-manifest.json">
   <meta name="theme-color" content="#1976d2">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="translucent">
+
 
   <!-- Google Analytics -->
   <script>
@@ -31,8 +38,50 @@
   </script>
   <script async src='https://www.google-analytics.com/analytics.js'></script>
   <!-- End Google Analytics -->
+
+  <script>
+    if (window.document.documentMode) {
+      // polyfill IE11 in a blocking way
+      var s = document.createElement('script');
+      s.src = 'generated/ie-polyfills.min.js';
+      document.head.appendChild(s);
+    } else if (!Object.assign) {
+      // polyfill other non-evergreen browsers in a blocking way
+      var polyfillUrl = "https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.find&flags=gated&unknown=polyfill";
+
+      // send a blocking XHR to fetch the polyfill
+      // then append it to the document so that its eval-ed synchronously
+      // this is required because the method used for IE is not reliable with other non-evergreen browsers
+      var xhr = new XMLHttpRequest();
+      xhr.addEventListener("load", function() {
+        var s = document.createElement('script');
+        s.type = 'text/javascript';
+        var code = this.responseText;
+        s.appendChild(document.createTextNode(code));
+        document.head.appendChild(s);
+      });
+      xhr.open("GET", polyfillUrl, false);
+      xhr.send();
+    }
+  </script>
 </head>
 <body>
-  <aio-shell>Loading...</aio-shell>
+
+  <aio-shell></aio-shell>
+
+  <noscript>
+    <div class="background-sky hero"></div>
+    <section id="intro">
+      <div class="hero-logo">
+        <img src="assets/images/logos/angular/angular.svg" width="250" height="250">
+      </div>
+      <div class="homepage-container">
+        <div class="hero-headline">One framework.<br>Mobile &amp; desktop.</div>
+      </div>
+    </section>
+    <h2 style="color: red; text-align: center; margin-top: -50px;">
+      <b><i>This website requires JavaScript.</i></b>
+    </h2>
+  </noscript>
 </body>
 </html>
diff --git a/aio/src/main.ts b/aio/src/main.ts
index a9ca1caf8c..40593a4b23 100644
--- a/aio/src/main.ts
+++ b/aio/src/main.ts
@@ -1,4 +1,4 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, ApplicationRef } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
@@ -8,4 +8,11 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+  if (environment.production && 'serviceWorker' in (navigator as any)) {
+    const appRef: ApplicationRef = ref.injector.get(ApplicationRef);
+    appRef.isStable.first().subscribe(() => {
+      (navigator as any).serviceWorker.register('/worker-basic.min.js');
+    });
+  }
+});
diff --git a/aio/src/noop-worker-basic.js b/aio/src/noop-worker-basic.js
new file mode 100644
index 0000000000..7a91805ddd
--- /dev/null
+++ b/aio/src/noop-worker-basic.js
@@ -0,0 +1,28 @@
+/**
+ * A simple, no-op service worker that takes immediate control.
+ * Use this file if the active service worker has a bug and we
+ * want to deactivate the worker on client browsers while we
+ * investigate the problem.
+ *
+ * To activate this service worker file, rename it to `worker-basic.min.js`
+ * and deploy to the hosting. When the original worker files cache
+ * expires, this one will take its place. (Browsers ensure that the expiry
+ * time is never longer than 24 hours, but the default expiry time on Firebase
+ * is 60 mins).
+ */
+
+// Skip over the "waiting" lifecycle state, to ensure that our
+// new service worker is activated immediately, even if there's
+// another tab open controlled by our older service worker code.
+self.addEventListener('install', function(event) {
+  event.waitUntil(self.skipWaiting());
+});
+
+
+// Get a list of all the current open windows/tabs under
+// our service worker's control, and force them to reload.
+// This can "unbreak" any open windows/tabs as soon as the new
+// service worker activates, rather than users having to manually reload.
+self.addEventListener('activate', function(event) {
+  event.waitUntil(self.clients.claim());
+});
diff --git a/aio/src/polyfills.ts b/aio/src/polyfills.ts
index 53bdaf1b86..d5d0302a14 100644
--- a/aio/src/polyfills.ts
+++ b/aio/src/polyfills.ts
@@ -18,31 +18,17 @@
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/set';
+/**
+ * INTERNET EXPLORER
+ *
+ * All the Internet Explorer polyfills are defined separately, in the `ie-polyfills.js` file.
+ * They are also built separately from the main app, via the `yarn build-ie-polyfills` task.
+ * The output of this build is conditionally loaded (only if we are running IE) in the browser,
+ * and executed before the rest of the application files are executed.
+ */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following to support `@angular/animation`. */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
-/** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
+/** HACK: force import of environment.ts/environment.prod.ts to load env specific polyfills */
+import './environments/environment';
 
 
 /** ALL Firefox browsers require the following to support `@angular/animation`. **/
diff --git a/aio/src/pwa-manifest.json b/aio/src/pwa-manifest.json
index 63cabcd814..2b4ff5a344 100644
--- a/aio/src/pwa-manifest.json
+++ b/aio/src/pwa-manifest.json
@@ -1,15 +1,20 @@
 {
-  "short_name": "Angular Docs",
-  "name": "Angular Docs",
+  "short_name": "Angular",
+  "name": "Angular",
   "icons": [
     {
       "src":"assets/images/favicons/favicon-194x194.png",
-      "sizes": "194x194",
+      "sizes": "194x194 512x512",
+      "type": "image/png"
+    },
+    {
+      "src":"assets/images/favicons/apple-touch-icon-144x144.png",
+      "sizes": "144x144",
       "type": "image/png"
     }
   ],
   "start_url": "/?utm_source=homescreen",
-  "background_color": "#fafafa",
+  "background_color": "#1976d2",
   "theme_color": "#1976d2",
   "display": "standalone"
 }
diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 0b8570ec57..870af4fc4b 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -1,148 +1,167 @@
-// @mixin docs-site-typography() {
-//   .docs-component-viewer-tabbed-content .docs-component-view-text-content,
-//   .docs-guide-content {
+body {
+  font-family: $main-font;
+  margin: 0;
+  color: $darkgray;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
-    body {
-      font-family: $main-font;
-      margin: 0;
-      color: $darkgray;
-      font-size: 14px;
-    }
+h1 {
+  display: inline-block;
+  font-size: 24px;
+  font-weight: 500;
+  margin: 8px 0px;
+}
 
-    h1 {
-      display:inline-block;
-      font-size: 36px;
-      font-weight: 400;
-      margin: 8px 0px;
-    }
+h1:after {
+  content: "";
+  display: block;
+  height: 1px;
+  width: 40%;
+  margin: 24px 0px 10px;
+  background: $lightgray;
+  clear: both;
+}
 
-    h1:after {
-      content: "";
-      display: block;
-      height: 1px;
-      width: 40%;
-      margin: 32px 0px 10px;
-      background: $lightgray;
-    }
+h2 {
+  font-size: 22px;
+  font-weight: 500;
+  margin: 32px 0px 24px;
+  clear: both;
+}
 
-    h2 {
-      font-size: 30px;
-      font-weight: 500;
-      margin: 32px 0px 24px;
-    }
+h3 {
+  font-size: 20px;
+  font-weight: 400;
+  margin: 24px 0px;
+  clear: both;
+}
 
-    h3 {
-      font-size: 24px;
-      font-weight: 500;
-      margin: 24px 0px;
-    }
+h4 {
+  font-size: 18px;
+  font-weight: 400;
+  margin: 8px 0px;
+  clear: both;
+}
 
-    h4 {
-      font-size: 24px;
-      font-weight: 400;
-      margin: 8px 0px;
-    }
+h5 {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 8px 0px;
+  clear: both;
+}
 
-    h5 {
-      font-size: 18px;
-      font-weight: 500;
-      margin: 8px 0px;
-    }
+h6 {
+  color: $mediumgray;
+  font-size: 16px;
+  font-weight: 500;
+  margin: 8px 0px;
+  clear: both;
+}
 
-    h6 {
-      color: $mediumgray;
-      font-size: 18px;
-      font-weight: 400;
-      margin: 8px 0px;
-    }
+h1 {
+  @media screen and (max-width: 600px) {
+    margin: 0;
+  }
+}
 
+h1:after, h2, h3, h4, h5, h6 {
+  @media screen and (max-width: 600px) {
+    margin: 8px 0;
+  }
+}
 
-    .mat-tab-body-wrapper h2 {
-      margin-top: 0;
-    }
+.mat-tab-body-wrapper h2 {
+  margin-top: 0;
+}
 
-    p, ol, ul, ol, li, input, a  {
-      font-size: 14px;
-      line-height: 24px;
-      letter-spacing: 0.30px;
-      & > em {
-        letter-spacing: 0.30px;
-      }
-    }
+p, ol, ul, ol, li, input, a  {
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: 0.30px;
+  font-weight: 400;
+  & > em {
+    letter-spacing: 0.30px;
+  }
+}
 
-    ol li {
-      margin: 14px 0px;
-    }
+ol {
+  li, p {
+    margin: 4px 0;
+  }
+}
 
-    a {
-      text-decoration: none;
-    }
+li p {
+  margin: 0;
+}
 
-    .mat-toolbar-row a {
-      font-size: 18px;
-      font-weight: 300;
-      color: white;
-      font-family: $main-font;
-      text-transform: uppercase;
-    }
+a {
+  text-decoration: none;
+}
 
-    strong {
-      font-weight: 500;
-    }
+.mat-toolbar-row a {
+  font-size: 16px;
+  font-weight: 400;
+  color: white;
+  font-family: $main-font;
+  text-transform: uppercase;
+  padding: 21px 0;
+}
 
-    table {
-      border-collapse: collapse;
-      border-radius: 2px;
-      border-spacing: 0;
-      margin: 0 0 32px 0;
-      width: 100%;
-    }
+strong {
+  font-weight: 500;
+}
 
-    table tbody th {
-      max-width: 100px;
-      padding: 13px 32px;
-      text-align: left;
-    }
+table {
+  border-collapse: collapse;
+  border-radius: 2px;
+  border-spacing: 0;
+  margin: 0 0 32px 0;
+}
 
-    td {
-      font-weight: 400;
-      padding: 8px 30px;
-      letter-spacing: 0.30px;
+table tbody th {
+  max-width: 100px;
+  padding: 13px 32px;
+  text-align: left;
+}
 
-      p {
-        margin: 0;
-      }
-    }
+td {
+  font-weight: 400;
+  padding: 8px 30px;
+  letter-spacing: 0.30px;
 
-    th {
-      font-size: 16px;
-      font-weight: 500;
-      padding: 13px 32px;
-      text-align: left;
-    }
+  p {
+    margin: 0;
+  }
+}
 
-    p > code, li > code, table code {
-      font-family: $code-font;
-      font-size: 90%;
-      color: $blue;
-      letter-spacing: 0;
-      line-height: 1;
-      padding: 2px 4px;
-      background-color: $backgroundgray;
-      border-radius: 4px;
-    }
+th {
+  font-size: 16px;
+  font-weight: 500;
+  padding: 13px 32px;
+  text-align: left;
+}
 
-    code {
-      font-family: $code-font;
-      font-size: 90%;
-    }
+p > code, li > code, table code {
+  font-family: $code-font;
+  font-size: 85%;
+  color: $darkgray;
+  letter-spacing: 0;
+  line-height: 1;
+  padding: 2px 6px;
+  background-color: $backgroundgray;
+  border-radius: 4px;
+}
 
-    .sidenav-content a {
-      color: $blue;
-      &:hover {
-        color: $mediumgray;
-      }
-    }
+code {
+  font-family: $code-font;
+  font-size: 90%;
+}
 
-//   }
-// }
+.sidenav-content a {
+  color: $blue;
+  &:hover {
+    color: $mediumgray;
+  }
+}
diff --git a/aio/src/styles/1-layouts/_api-page.scss b/aio/src/styles/1-layouts/_api-page.scss
new file mode 100644
index 0000000000..26cc1585ee
--- /dev/null
+++ b/aio/src/styles/1-layouts/_api-page.scss
@@ -0,0 +1,69 @@
+.api-section {
+    position: relative;
+
+    pre {
+        white-space: pre-wrap;
+    }
+
+    table.api-table {
+        min-width: 680px;
+
+        thead th {
+            color: white;
+            font-size: 16px;
+            background-color: $blue;
+            border-radius: 4px 4px 0 0;
+            text-transform: none;
+            padding: 8px 24px;
+        }
+        
+        tbody {
+            pre {
+                white-space: normal;
+                margin: 4px;
+                padding: 4px 16px;
+            }
+
+            td, th {
+                padding: 0;
+            }
+
+            th {
+                max-width: 150px;
+            }
+        }
+
+    }
+}
+
+
+.api-header label {
+    border-radius: 4px;
+    padding: 4px 16px;
+    display: inline;
+    font-size: 14px;
+    color: white;
+    margin: 0 8px 0 16px;
+    font-weight: 500;
+    text-transform: uppercase;
+    
+    @media screen and (max-width: 600px) {
+        display: block;
+        margin: 8px 0;
+    }
+
+    &.api-status-label {
+        background-color: $mediumgray;
+    }
+
+    &.api-type-label {
+        background-color: $accentblue;
+
+        @each $name, $symbol in $api-symbols {
+            &.#{$name} {
+                background: map-get($symbol, background);
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss
index 7acf592691..c6034396da 100644
--- a/aio/src/styles/1-layouts/_content-layout.scss
+++ b/aio/src/styles/1-layouts/_content-layout.scss
@@ -1,16 +1,24 @@
-.sidenav-content {
-  padding: 1rem 3rem 3rem;
-  margin: auto;
+aio-shell.page-docs {
+  .sidenav-content {
+    // padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES
+    margin: auto;
+  }
 }
 
-.fill-remaining-space {
-  flex: 1 1 auto;
+.sidenav-content {
+  min-height: 100vh;
+  padding: 80px 3rem 1rem;
 }
 
 @media (max-width: 600px) {
   aio-menu {
     display: none;
   }
+
+  .sidenav-content {
+    min-height: 450px;
+    padding: 80px 1rem 1rem;
+  }
 }
 
 .sidenav-container {
@@ -20,4 +28,12 @@
 
 .sidenav-content button {
   min-width: 50px;
-}
\ No newline at end of file
+}
+
+#guide-change-log h2::before {
+  content: "";
+  display: block;
+  height: 1px;
+  margin: 24px 0px;
+  background: $lightgray;
+}
diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/_footer.scss
index 7344d68154..087926232d 100644
--- a/aio/src/styles/1-layouts/_footer.scss
+++ b/aio/src/styles/1-layouts/_footer.scss
@@ -20,6 +20,7 @@ footer {
 
   a {
       color: $offwhite;
+      font-weight: 300;
       text-decoration: none;
       z-index: 20;
       position: relative;
@@ -42,7 +43,7 @@ footer {
   p {
     text-align: center;
     margin: 10px 0px 5px;
-    
+
     @media (max-width: 480px) {
       text-align: left;
     }
@@ -78,7 +79,7 @@ footer {
     }
   }
 
-  
+
 
 
   @media (max-width: 700px) {
@@ -96,24 +97,14 @@ footer {
 footer::after {
     content: "";
     position: absolute;
-    z-index: 10;
+    z-index: -1;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background:
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left repeat-y,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 168px repeat-y,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 336px repeat-y,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 504px repeat-y,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 672px repeat-y,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 840px repeat-y,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 1008px repeat-y,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 1176px repeat-y,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 1344px repeat-y,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 1512px repeat-y,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 1680px repeat-y,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 1848px repeat-y;
+        url('../src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 0 left 0 repeat,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 80px left 168px repeat;
     opacity: 0.05;
-    background-size: 160px auto;
+    background-size: 320px auto;
 }
diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss
index e92354fc23..769c5c9ca8 100644
--- a/aio/src/styles/1-layouts/_layout-global.scss
+++ b/aio/src/styles/1-layouts/_layout-global.scss
@@ -1,11 +1,19 @@
+html, body {
+    height: 100%;
+}
+
+body {
+    background-color: $offwhite;
+}
+
 .clearfix {
     content: "";
     display: table;
     clear: both;
 }
 
-l-relative {
-    position: relative;
+.clear {
+    clear: both;
 }
 
 .l-clearfix:after, .clearfix:after {
@@ -21,4 +29,23 @@ l-relative {
 .l-flex-wrap {
   display: flex;
   flex-wrap: wrap;
+}
+
+.flex-center {
+    display: flex;
+    justify-content: center;
+}
+
+.center {
+    text-align: center;
+}
+
+.visually-hidden {
+    position: absolute !important;
+    top: -9999px !important;
+    left: -9999px !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
 }
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_layouts-dir.scss b/aio/src/styles/1-layouts/_layouts-dir.scss
index c35b1d45a1..f6269f1f95 100644
--- a/aio/src/styles/1-layouts/_layouts-dir.scss
+++ b/aio/src/styles/1-layouts/_layouts-dir.scss
@@ -2,10 +2,12 @@
    LAYOUT STYLES
    ============================== */
 
-@import 'sidenav';
+@import 'api-page';
 @import 'content-layout';
-@import 'search-results';
-@import 'top-menu';
-@import 'marketing-layout';
 @import 'footer';
-@import 'layout-global';
\ No newline at end of file
+@import 'layout-global';
+@import 'marketing-layout';
+@import 'not-found';
+@import 'sidenav';
+@import 'table-of-contents';
+@import 'top-menu';
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
index 58575854cb..120996b599 100644
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -1,15 +1,350 @@
-#home {
-  padding: 0rem 0rem 3rem;
+.hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  min-height: 480px;
+  height: 80vh;
+  max-height: 560px;
+  box-sizing: border-box;
+  padding: 48px 48px 32px 48px;
+  overflow: hidden;
+  transform: skewY(8deg);
+  transform-origin: 100%;
 
-  @media (max-width: 800px) {
-    article {
-      padding: 0 30px;
+  @media (max-width: 480px) {
+    max-height: 486px;
+    padding-top: 40px;
+    transform: none;
+  }
+
+  h1:after {
+   content: none;
+  }
+
+  .hero-title {
+    display: inline-block;
+    font-size: 28px;
+    font-weight: 400;
+    line-height: 48px;
+    margin: 0 8px 0 0;
+    text-transform: uppercase;
+
+    &.is-standard-case {
+      text-transform: none;
     }
   }
 }
 
+section#intro {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 900px;
+  height: 480px;
+  margin: 0 auto -32px;
+  padding: 48px 0 0;
+  color: white;
+
+  @media (max-width: 780px) {
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    max-width: 100vw;
+    padding: 40px 0 32px;
+
+    button {
+      margin: 0;
+      height: 60px;
+    }
+  }
+
+  .homepage-container {
+    width: 100%;
+    max-width: 1040px;
+    margin: 0 auto;
+    margin-top: -7%;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    @media  (max-width: 780px) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      max-width: 100%;
+      padding: 0;
+    }
+  }
+
+  .hero-headline {
+    font-size: 40px;
+    line-height: 64px;
+    font-weight: 500;
+    margin: 32px 0;
+
+    &:after {
+      display: none;
+    }
+
+    @media (max-width: 780px) {
+      text-align: center;
+    }
+
+    @media (max-width: 575px) {
+      font-size: 32px;
+      line-height: 50px;
+    }
+  }
+
+  .hero-logo {
+    display: flex;
+    width: 400px;
+
+    @media (max-width: 780px) {
+      justify-content: center;
+    }
+
+    img {
+      width: 400px;
+      height: 400px;
+      margin-bottom: 8px;
+      padding: 0;
+      filter: drop-shadow(0 2px 2px rgba($black, 0.24));
+
+      @media (max-width: 780px) {
+        width: 250px;
+        height: 250px;
+      }
+    }
+  }
+}
+
+.announcement-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  max-width: 50vw;
+  margin: 0 auto;
+  padding: 16px;
+  background-color: $white;
+  border-radius: 4px;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-sizing: border-box;
+  transition: all 0.3s ease-in;
+
+  @media (max-width: 992px) {
+    flex-direction: column;
+    text-align: center;
+    padding: 32px 16px;
+  }
+
+  @media (max-width: 768px) {
+    width: 100%;
+    max-width: none;
+  }
+
+  & > * {
+    margin: 8px;
+  }
+
+  .button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    min-width: 160px;
+    font-size: 16px;
+    color: $white;
+    background-color: $blue;
+    border-radius: 48px;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+    box-sizing: border-box;
+    cursor: pointer;
+
+    &:hover {
+      color: rgba($white, 0.7);
+    }
+  }
+
+  .material-icons {
+    display: none;
+    right: 0;
+    position: static;
+    transition: all 0.3s ease-in;
+    font-size: 16px;
+  }
+
+  p {
+    font-size: 16px;
+    margin: 8px;
+    text-align: center;
+  }
+}
+
+// ANGULAR LINE
+.background-sky {
+  background-color: $blue;
+  background: $bluegradient;
+  color: $white;
+}
+
+.home-row .card {
+  @include card(70%, auto);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  width: 70%;
+  min-width: 350px;
+  height: auto;
+  margin: auto;
+  padding: 24px;
+  box-shadow: 0 6px 6px rgba(10, 16, 20, 0.15), 0 0 52px rgba(10, 16, 20, 0.12);
+
+  @media (max-width: 600px) {
+    margin: 16px auto 0;
+
+    h2 {
+      margin: 0;
+    }
+
+    img {
+      max-width: none;
+      height: 70px;
+    }
+  }
+
+  @media (max-width: 1300px) {
+    img {
+      height: 70px;
+      max-width: none;
+    }
+  }
+
+  img {
+    margin: 16px ;
+  }
+
+  .card-text-container {
+    margin: 0 16px;
+
+    p {
+      text-align: left;
+      color: $darkgray;
+      margin: 0;
+      padding: 8px 0;
+    }
+  }
+
+
+  &:hover {
+    h2 {
+      color: $blue;
+    }
+  }
+}
+
+.button.hero-cta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 184px;
+  height: 40px;
+  padding: 0 24px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 40px;
+  background-color: $white;
+  border-radius: 48px;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+aio-shell {
+  &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute {
+    section {
+      padding: 0rem 0rem 3rem;
+    }
+  }
+
+  &.page-home {
+    section {
+      padding: 0;
+    }
+  }
+
+  &.page-home, &.page-resources, &.page-events, &.page-contribute {
+    article {
+      padding: 32px;
+
+      @media (max-width: 800px) {
+        padding: 24px;
+      }
+    }
+  }
+
+  &.page-features {
+    article {
+      padding: 0 3rem;
+    }
+  }
+
+  &.page-home, &.page-resources, &.page-events, &.page-features {
+
+    .content img {
+      @media (max-width: 1300px) {
+        max-width: none;
+      }
+    }
+
+    .feature-section img {
+      max-width: 70px;
+    }
+
+    @media (max-width: 600px) {
+      md-sidenav-container.sidenav-container {
+        padding-top: 0;
+      }
+    }
+  }
+
+  .cta-bar .hero-cta {
+    color: $blue;
+  }
+}
+
+.cta-bar.announcement-bar {
+  background: none;
+  box-shadow: none;
+}
+
+.text-headline {
+  font-size: 20px;
+  font-weight: 500;
+  color: $blue;
+  margin-top: 10px;
+  text-transform: uppercase;
+}
+
+aio-shell:not(.view-SideNav) {
+  md-sidenav-container.sidenav-container {
+    max-width: none;
+  }
+}
+
 div[layout=row]{
     display: flex;
+    justify-content: center;
+    align-items: center;
     box-sizing: border-box;
 
     @media (max-width: 480px) {
@@ -22,93 +357,46 @@ div[layout=row]{
 }
 
 .home-rows {
-    margin-top: 112px;
-}
-
-.home-row .promo-image-container, .home-row .text-container {
-    max-width: 50%;
+    overflow: hidden;
+    @media (max-width: 600px) {
+      margin: 0;
+    }
 }
 
 .background-superhero-paper {
-    background: url('assets/images/backgrounds/super-hero-large.png') no-repeat bottom center , $bluegradient;
-    background-blend-mode: multiply;
     background-size: 100%;
-}
-
-.background-sky {
-  background-color: $blue;
-  background: $bluegradient;
-  color: $white;
-}
-
-header.bckground-sky.l-relative {
-    display: flex;
-    flex-direction: column;
-}
-
-.home-rows {
-  // NOTE (ericjim): if a banner is placed on the homescreen, add this margin.
-  margin-top: 112px;
+    background-blend-mode: multiply;
 }
 
 .home-row {
   max-width: 920px;
-  margin: 0 0 60px 0;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 32px auto;
 
-  @media (max-width: 480px) {
-      display: block;
-  }
+  .promo-img-container, .text-container {
+    max-width: 50%;
 
-  h3.text-headline {
-    font-size: 28px;
-    margin-top: 10px;
-  }
+    @media(max-width: 480px) {
+      max-width: 100%;
+      text-align: center;
 
-  // NOTE (ericjim): remove if graphic changes.
-  .promo-3 {
-    margin-top: 15px;
-
-    @media(max-width: 599px) {
-      margin-top: 0;
-    }
-  }
-
-  // -- Utility margins for promos
-  .promo-1-desc, .promo-3-desc {
-    padding-left: 5px;
-  }
-
-  // -- Reset margins for the utility margins
-  @media(max-width: 599px) {
-    .promo-1, .promo-2, .promo-3, .promo-4 {
-      margin: 0;
+      &:nth-child(even) {
+        flex-direction: column-reverse;
+      }
     }
   }
 
   .text-block {
     padding-right: 15%;
 
-    @media(max-width: 599px) {
+    @media(max-width: 600px) {
       padding: 0;
     }
   }
 
-  @media(max-width: 599px) {
-    .promo-image-container, .text-container {
-      max-width: 100%;
-    }
-
-    &:nth-child(even) {
-      flex-direction: column-reverse;
-    }
-  }
-
   .promo-img-container {
 
-    @media (max-width: 375px) {
-      text-align: initial;
+    img {
+      max-width: 90% !important;
     }
 
     p {
@@ -125,4 +413,37 @@ header.bckground-sky.l-relative {
       }
     }
   }
-}
\ No newline at end of file
+}
+
+.marketing-banner {
+  background-color: lighten($blue, 10);
+  margin-top: 64px;
+  padding: 32px;
+
+  @media (max-width: 600px) {
+    margin-top: 56px;
+    padding: 18px;
+  }
+
+  .banner-headline {
+    text-transform: uppercase;
+    font-size: 24px;
+    font-weight: 300;
+    color: white;
+    margin: 0;
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+
+    @media (max-width: 600px) {
+      font-size: 18px;
+      font-weight: 400;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+}
+.page-features .marketing-banner {
+  margin-bottom: 20px;
+}
diff --git a/aio/src/styles/1-layouts/_not-found.scss b/aio/src/styles/1-layouts/_not-found.scss
new file mode 100644
index 0000000000..d599aa3b9a
--- /dev/null
+++ b/aio/src/styles/1-layouts/_not-found.scss
@@ -0,0 +1,27 @@
+#file-not-found {
+    padding: 3rem 3rem 3rem;
+}
+
+.nf-container {
+    align-items: center;
+    padding: 32px;
+}
+
+.nf-response {
+    margin: 32px;
+    height: 100%;
+    flex-direction: column;
+
+    h1 {
+        font-size: 48px;
+        color: $blue;
+        text-transform: uppercase;
+        margin: 8px 0;
+    }
+}
+
+.nf-icon.material-icons {
+    color: $blue;
+    font-size: 100px;
+    position: static;
+}
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 7834a72760..278c4575d2 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -1,24 +1,58 @@
-aio-nav-menu.top-menu .vertical-menu-item  {
-  background-color: $lightgray;
-  text-transform: uppercase;
+// Disable sidenav animations while starting the app
+// See https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav-transitions.scss
+.starting.mat-sidenav-transition {
+  .mat-sidenav,
+  .mat-sidenav-content,
+  .mat-sidenav-backdrop.mat-sidenav-shown {
+    transition: none;
+  }
 }
 
-.mat-sidenav.sidenav {
-  box-shadow: 6px 0 6px rgba(0,0,0,0.10);
-  background-color: $offwhite;
-  padding: 10px 0px 0px;
+aio-nav-menu {
+  display: block;
+  margin: 0 auto;
+  font-size: 13px;
+  ul, a {
+    padding: 0;
+    margin: 0;
+  }
+
+  &:first-child {
+    margin-top: 16px;
+  }
+
+  aio-nav-item div a {
+    padding-left: 6px;
+  }
+}
+
+md-sidenav.mat-sidenav.sidenav {
+  position: fixed;
+  top: 64px;
+  bottom: 0;
+  left: 0;
+  padding: 0;
   min-width: 260px;
+  background-color: $offwhite;
+  box-shadow: 6px 0 6px rgba(0,0,0,0.10);
+  height: calc(100vh - 64px);
+
+  &.collapsed {
+    top: 56px;
+  }
 }
 
 md-sidenav-container.sidenav-container {
-    height: auto;
+    min-height: 100%;
+    height: auto !important;
+    max-width: 100%;
+    margin: 0;
     transform: none;
-  }
 
-// md-sidenav.sidenav.mat-sidenav.mat-sidenav-side.mat-sidenav-opened {
-//   position: fixed;
-//   padding-top: 72px;
-// }
+    &.has-floating-toc {
+      max-width: 82%;
+    }
+}
 
 md-sidenav-container div.mat-sidenav-content {
     height: auto;
@@ -31,54 +65,50 @@ md-sidenav-container div.mat-sidenav-content {
   display: block;
   max-width: 260px;
   overflow-wrap: break-word;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 20px;
+  padding-top: 4px;
+  padding-bottom: 4px;
   text-decoration: none;
   text-align: left;
-  transition-duration: 180ms;
-  transition-property: background-color, color;
-  transition-timing-function: ease-in-out;
-  width: 100%;
+  width: 93%;
   word-wrap: break-word;
-  outline: none;
 
   &:hover {
-    text-shadow: 0 0 5px #ffffff;
     background-color: $lightgray;
+    color: $blue;
+    text-shadow: 0 0 5px #ffffff;
+  }
+
+  &:focus {
+    outline: $accentblue auto 2px;
   }
 
   //icons _within_ nav
-  .material-icons {
+  .mat-icon {
     position: absolute;
-    top: 6px;
-    margin-left: 10px;
+    top: 0;
+    right: 0;
+    margin: 4px;
   }
-
-  @include bp(tiny) {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
 }
 
 .vertical-menu-item.selected {
   color: $blue;
 }
 
+button.vertical-menu-item {
+  border: none;
+  background-color: transparent;
+  margin-right: 0;
+  padding-left: 6px;
+  padding-top: 8px;
+  padding-bottom: 10px;
+}
+
 .heading {
-  color: #444;
+  color: $darkgray;
   cursor: pointer;
   position: relative;
   text-transform: uppercase;
-  width: 100%;
-}
-
-.material-icons {
-  display: inline-block;
-  position: absolute;
-  top: 6px;
-  right: 8px;
 }
 
 .heading-children.expanded {
@@ -99,47 +129,68 @@ md-sidenav-container div.mat-sidenav-content {
   transition-timing-function: ease-out;
 }
 
-a.selected.level-1,
-.heading.selected.level-1,
-.heading-children.selected.level-1 {
-  border-left: 3px $blue solid;
-}
-
 .level-1 {
   font-family: $main-font;
   font-size: 14px;
   font-weight: 400;
-  padding-left: 10px;
+  margin-left: 14px;
   transition: background-color 0.2s;
+  text-transform: uppercase;
 }
 
 .level-2 {
+  color: $mediumgray;
   font-family: $main-font;
   font-size: 14px;
-  color: $mediumgray;
   font-weight: 400;
-  padding-left: 20px;
+  margin-left: 12px;
   text-transform: none;
 }
 
 .level-3 {
+  color: $mediumgray;
   font-family: $main-font;
   font-size: 14px;
-  color: $mediumgray;
-  padding-left: 30px;
+  margin-left: 10px;
 }
 
-.level-1.expanded .material-icons, .level-2.expanded .material-icons {
+.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
   @include rotate(90deg);
 }
 
-.level-1:not(.expanded) .material-icons, .level-2:not(.expanded) .material-icons {
+.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
   @include rotate(0deg);
+ // margin: 4px;
 }
 
-.promo-img-container img {
-  max-width: 90%;
-  @include bp(small) {
-    max-width: 100%;
+aio-nav-menu.top-menu {
+  padding: 24px 0 0;
+
+  aio-nav-item:last-child div {
+    border-bottom: 1px solid rgba($mediumgray, 0.5);
+  }
+
+  aio-nav-item:first-child div {
+    border-top: 1px solid rgba($mediumgray, 0.5);
+  }
+}
+
+// Angular Version Selector
+md-sidenav .doc-version {
+  padding: 8px;
+  border-top: 1px solid $lightgray;
+
+  select {
+    outline: none;
+    width: 100%;
+    background: rgba($lightgray, 0.5);
+    height: 32px;
+    border: 1px solid $lightgray;
+    color: $darkgray;
+
+    option {
+      font-family: $main-font;
+      font-size: 14px;
+    }
   }
 }
diff --git a/aio/src/styles/1-layouts/_table-of-contents.scss b/aio/src/styles/1-layouts/_table-of-contents.scss
new file mode 100644
index 0000000000..86a0e5194a
--- /dev/null
+++ b/aio/src/styles/1-layouts/_table-of-contents.scss
@@ -0,0 +1,10 @@
+nav#main-table-of-contents {
+    width: 200px;
+    height: 900px;
+    position: fixed;
+    right: 0;
+    top: 50px;
+    bottom: 100px;
+    margin-left: 32px;
+    background-color: $blue;
+}
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index da57bfa6fd..c259d77a01 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -1,35 +1,14 @@
-
-.fill-remaining-space {
-  flex: 1 1 auto;
-}
-
-.nav-link {
-  margin-right: 10px;
-  margin-left: 20px;
-  cursor: pointer;
-}
-
 .nav-link.home img {
   position: relative;
   margin-top: -21px;
   margin-right: 20px;
   top: 12px;
   height: 40px;
-}
 
-@media (max-width: 700px) {
-  .nav-link {
-    font-size: 80%;
-    margin-right: 8px;
-    margin-left: 0px;
-  }
-}
-
-@media (max-width: 600px) {
-  .nav-link {
-    font-size: 80%;
-    margin-right: 8px;
-    margin-left: 0px;
+  @media(max-width: 992px) {
+    &:hover {
+      transform: scale(1.1);
+    }
   }
 }
 
@@ -48,47 +27,118 @@ aio-top-menu {
     margin: 0px;
 
     li {
+      padding-bottom: 2px;
       list-style-type: none;
-      padding: 0px;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.7;
+      }
+
+      &:focus {
+        background-color: $accentblue;
+        outline: none;
+      }
+    }
+  }
+
+  a.nav-link {
+    margin: 0;
+    padding: 24px 16px;
+    cursor: pointer;
+
+    &:focus {
+      background: rgba($white, 0.15);
+      border-radius: 4px;
+      outline: none;
+      padding: 8px 16px;
     }
   }
 }
 
-md-toolbar.mat-toolbar {
-  position: relative;
-  z-index: 10;
-  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
-  padding: 0 16px 0 0;
+// HOME PAGE OVERRIDE: TOPNAV TOOLBAR HAMBURGER MENU
+aio-shell.page-home md-toolbar.app-toolbar.mat-toolbar {
+  background-color: transparent;
+  transition: background-color .2s linear .3s;
+
+  @media (max-width: 480px) {
+    background-color: $blue;
+  }
 }
 
-.search-container {
+// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED
+md-toolbar.mat-toolbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  padding: 0 16px 0 0;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
+
+  md-icon {
+    color: $white;
+  }
+}
+
+// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
+aio-shell.page-home md-toolbar.mat-toolbar,
+aio-shell.page-features md-toolbar.mat-toolbar,
+aio-shell.page-events md-toolbar.mat-toolbar,
+aio-shell.page-resources md-toolbar.mat-toolbar {
+  // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
+  @media (min-width: 481px) {
+    position: absolute;
+  }
+
+  @media (min-width: 992px) {
+    button.hamburger {
+      margin: 0 24px 0 -88px;
+    }
+  }
+}
+
+// REMOVE BOX SHADOW ON CERTAIN MARKETING PAGES
+aio-shell.page-home md-toolbar.mat-toolbar,
+aio-shell.page-events md-toolbar.mat-toolbar,
+aio-shell.page-resources md-toolbar.mat-toolbar {
+  box-shadow: none;
+}
+
+
+// SEARCH BOX
+aio-search-box.search-container {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 100%;
   min-width: 150px;
   height: 100%;
-}
 
-aio-search-box input {
-  color: $darkgray;
-  border: none;
-  border-radius: 5px;
-  background-color: $offwhite;
-  padding: 5px 10px;
-  margin-left: 8px;
-  width:150px;
-  height: 40%;
-   @include bp(big) {
-    transition: width 0.4s ease-in-out;
+  input {
+    color: $darkgray;
+    border: none;
+    border-radius: 100px;
+    background-color: $offwhite;
+    padding: 5px 16px;
+    margin-left: 8px;
+    width: 180px;
+    max-width: 240px;
+    height: 50%;
+
     &:focus {
-      width: 50%;
+        outline: none;
+    }
+
+    @include bp(big) {
+      transition: width 0.4s ease-in-out;
+
+      &:focus {
+        width: 50%;
+      }
+    }
+    @media (max-width: 480px) {
+      width: 150px;
     }
   }
-  @media (max-width: 480px) {
-    transition: width 0.4s ease-in-out;
-    &:focus {
-      width: 50%;
-    }
-  }
-}
\ No newline at end of file
+}
diff --git a/aio/src/styles/2-modules/_alert.scss b/aio/src/styles/2-modules/_alert.scss
index f8049f48f9..cd5b7becca 100644
--- a/aio/src/styles/2-modules/_alert.scss
+++ b/aio/src/styles/2-modules/_alert.scss
@@ -3,6 +3,9 @@
     margin: 24px 0px;
     font-size: 14px;
     color: $darkgray;
+    width: 100%;
+    box-sizing: border-box;
+
     &.is-critical {
         border-left: 10px solid $brightred;
         background-color: rgba($brightred, 0.05);
diff --git a/aio/src/styles/2-modules/_announcement-bar.scss b/aio/src/styles/2-modules/_announcement-bar.scss
deleted file mode 100644
index e26e8ea09d..0000000000
--- a/aio/src/styles/2-modules/_announcement-bar.scss
+++ /dev/null
@@ -1,179 +0,0 @@
-/* Announcment Bar Module */
-/* A module displaying time senstive announcemnts */
-
-
-/* VARIABLES */
-
-$announcement-bar: '.announcement-bar';
-$announcement-bar-height: 104px;
-$announcement-bar-width: 784px;
-
-/* CLASS */
-
-#{$announcement-bar} {
-  height: 104px;
-  width: $announcement-bar-width;
-  position: absolute;
-  margin-left: auto;
-  top: 500px;
-  color: $darkgray;
-  background: $white;
-  border-radius: 4px;
-  overflow: hidden;
-  box-sizing: border-box;
-  box-shadow: 0 4px 4px rgba(0,0,0,0.24), 0 0 4px rgba(0,0,0,0.12);
-
-  @media (max-width: $announcement-bar-width) {
-    height: auto;
-    margin: 0;
-    position: static;
-    text-align: center;
-    width: 100%;
-  }
-}
-
-// SLIDES CONTAINER
-#{$announcement-bar}-slides {
-  position: relative;
-  overflow: hidden;
-  color: $darkgray;
-  background: $white;
-  height: $announcement-bar-height;
-  width: $announcement-bar-width;
-  box-sizing: border-box;
-  box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12);
-
-  @media (max-width: 480px) {
-    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-    height: 240px;
-    margin: 0;
-    padding: 32px 48px;
-    text-align: center;
-    width: auto;
-  }
-}
-
-// INDIVIDUAL SLIDE
-#{$announcement-bar}-slide {
-  bottom: 0;
-  box-sizing: border-box;
-  height: $announcement-bar-height;
-  left: 0;
-  margin-bottom: -$announcement-bar-height;
-  opacity: 0;
-  padding: 32px;
-  position: absolute;
-  right: 0;
-  transition: all .8s;
-  width: $announcement-bar-width;
-  z-index: 1;
-
-  @media (max-width: 480px) {
-    height: auto;
-    margin: 0;
-    padding:0;
-    width: auto;
-    transition: opacity .8s;
-    visibility: hidden;
-  }
-
-  img, p {
-    float: left;
-
-    @media (max-width: 480px) {
-      display: block;
-      float: none;
-    }
-  }
-
-  img {
-    height: 40px;
-    margin: 8px auto;
-  }
-
-  p {
-    font-size: 18px;
-    line-height: 40px;
-    margin: 0;
-    padding: 0;
-
-    @media (max-width: 480px) {
-      line-height: 24px;
-      margin: auto;
-    }
-
-  }
-
-  .button,
-  .button.md-button {
-    margin: 0;
-    padding: 0 40px;
-    background: $lightgray;
-    color: $white;
-    float: right;
-    font-size: 14px;
-    line-height: 40px;
-    transition: all .3s ease-in-out;
-
-    &:hover {
-      background: $blue;
-      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-      color: $white;
-    }
-
-    @media (max-width: $announcement-bar-width) {
-      float: none;
-      margin: 16px auto;
-    }
-  }
-
-  &.is-visible  {
-    margin-bottom: 0;
-    opacity: 1;
-    z-index: 2;
-
-    @media (max-width: $announcement-bar-width) {
-      position: static;
-      visibility: visible;
-      justify-content: center;
-      display: flex !important;
-      flex-direction: column;
-      padding: 8px;
-      height: auto;
-      width: 100%;
-      margin: 0;
-    }
-
-    @media (max-width: 480px) {
-      padding: 16px;
-    }
-  }
-}
-
-// NAV BAR
-#{$announcement-bar} nav {
-  bottom: -40px;
-  color: $lightgray;
-  left: 0;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  z-index: 1;
-
-  button {
-    background: $lightgray;
-    border: none;
-    border-radius: 100px;
-    height: 12px;
-    margin: 0 4px;
-    outline: none;
-    overflow: hidden;
-    text-indent: -3000px;
-    width: 12px;
-
-    &.is-selected,
-    &.selected  {
-      background: $lightgray;
-    }
-  }
-}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index d927140faa..383c2e906e 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -1,3 +1,11 @@
+/* API EDIT ICON */
+#api {
+  .api-filter .material-icons {
+    right: 48px;
+  }
+}
+
+/* API LIST STYLES */
 
 aio-api-list {
     div.form-search i.material-icons {
@@ -8,16 +16,304 @@ aio-api-list {
     .form-search input {
         width: 182px;
     }
+
+    .api-list-container {
+      display: flex;
+      flex-direction: column;
+      margin: 0 auto;
+
+      h2 {
+        margin-top: 16px;
+      }
+    }
 }
 
-aio-api-list > div {
-    display: flex;
-    margin: 32px auto;
-    @media (max-width: 600px) {
-        flex-direction: column;
+.api-filter {
+  display: flex;
+  margin: 0 auto;
+
+  @media (max-width: 600px) {
+      flex-direction: column;
+      margin: 16px auto;
+  }
+
+  .form-select-menu, .form-search {
+      margin: 8px;
+  }
+}
+
+/* LAYOUT */
+
+.docs-content {
+  position: relative;
+}
+
+.l-content-small {
+  padding: 16px;
+  max-width: 1100px;
+  margin: 0;
+
+  @media handheld and (max-width: $phone-breakpoint),
+  screen and (max-device-width: $phone-breakpoint),
+  screen and (max-width: $tablet-breakpoint) {
+    padding: 24px 0 0;
+  }
+}
+
+/* SEARCH BAR */
+
+.form-search {
+  position: relative;
+
+  input {
+    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    box-sizing: border-box;
+    border: 1px solid $white;
+    color: $blue-600;
+    font-size: 16px;
+    height: 32px;
+    line-height: 32px;
+    outline: none;
+    padding: 0 16px 0 32px;
+    transition: all .2s;
+
+    // PLACEHOLDER TEXT
+    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &::-moz-placeholder { /* Firefox 19+ */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &:-ms-input-placeholder { /* IE 10+ */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &:-moz-placeholder { /* Firefox 18- */
+      color: $blue-grey-100;
+      font-size: 14px;
     }
 
-    > div {
-        margin: 8px;
+    &:focus {
+      border: 1px solid $blue-400;
+      box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
     }
-}
\ No newline at end of file
+  }
+
+  .material-icons {
+    color: $blue-grey-100;
+    font-size: 20px;
+    left: 8px;
+    position: absolute;
+    top: 6px;
+    z-index: $layer-1;
+  }
+}
+
+/* API SYMBOLS */
+
+/* SYMBOL CLASS */
+
+.symbol {
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba($black, .24);
+  color: $white;
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  width: 16px;
+
+  // SYMBOL TYPES
+  // Symbol mapping variables in *constants*
+  @each $name, $symbol in $api-symbols {
+    &.#{$name} {
+      background: map-get($symbol, background);
+
+      &:before {
+        content: map-get($symbol, content);
+      }
+    }
+  }
+}
+
+/* API HOMEE PAGE */
+
+/* API FILTER MENU */
+
+.api-filter {
+  aio-select {
+    width: 200px;
+
+    .symbol {
+      margin-right: 8px;
+    }
+  }
+
+  .form-search {
+    float: left;
+  }
+}
+
+/* API CLASS LIST */
+
+.docs-content .api-list {
+  list-style: none;
+  margin: 0 0 32px -8px;
+  padding: 0;
+  overflow: hidden;
+
+  @media screen and (max-width: 600px) {
+        margin: 0 0 0 -8px;
+    }
+
+  li {
+    font-size: 14px;
+    margin: 8px 0;
+    line-height: 14px;
+    padding: 0;
+    float: left;
+    width: 33%;
+    overflow: hidden;
+    min-width: 220px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .symbol {
+      margin-right: 8px;
+    }
+    a {
+      color: $blue-grey-600;
+      display: inline-block;
+      line-height: 16px;
+      padding: 0 16px 0;
+      text-decoration: none;
+      transition: all .3s;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:hover {
+        background: $blue-grey-50;
+        color: $blue-500;
+      }
+    }
+  }
+}
+
+.docs-content .h2-api-docs,
+.docs-content .h2-api-docs:first-of-type {
+  font-size: 18px;
+  line-height: 24px;
+  margin-top: 0;
+}
+
+.code-links {
+  a {
+    code, .api-doc-code {
+      color: #1E88E5 !important;
+    }
+  }
+}
+
+.openParens {
+  margin-top: 15px;
+}
+
+.endParens {
+  margin-bottom: 20px !important;
+}
+
+p {
+
+  &.selector {
+    margin: 0;
+  }
+
+  &.location-badge {
+    margin: 0 0 16px 16px !important;
+  }
+
+  .api-doc-code {
+    border-bottom: 0;
+
+    :hover {
+      border-bottom: none;
+    }
+  }
+}
+
+.row-margin {
+  margin-bottom: 36px;
+  h2 {
+    line-height: 28px;
+  }
+}
+
+.code-margin {
+  margin-bottom: 8px;
+}
+
+.no-bg {
+  background: none;
+  padding: 0;
+}
+
+.no-bg-with-indent {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 16px;
+  margin-top: 6px;
+  margin-bottom: 0;
+  background: none;
+}
+
+.code-background {
+  padding: 0 5px 0;
+
+  span.pln {
+    color: #1E88E5 !important;
+  }
+}
+
+.code-anchor {
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.api-doc-code {
+  font-size: 14px;
+  color: #1a2326;
+
+  // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
+  &.no-pln {
+    .pln:last-child {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .docs-content {
+    // Overrides display flex from angular material.
+    // This was added because Safari doesn't play nice with layout="column".
+    // Look of API doc in Chrome and Firefox remains the same, and is fixed for Safari.
+    .layout-xs-column {
+      display: block !important;
+    }
+  }
+
+  .api-doc-code {
+    font-size: 12px;
+  }
+
+  p.location-badge {
+    position: relative;
+    font-size: 11px;
+  }
+}
diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss
new file mode 100644
index 0000000000..b8e4dacfab
--- /dev/null
+++ b/aio/src/styles/2-modules/_api-pages.scss
@@ -0,0 +1,23 @@
+.api-info-bar {
+  max-width: 800px;
+  text-align: left;
+
+  span {
+    margin: 0 16px 0 0;
+
+    @media screen and (max-width: 600px) {
+      display: block;
+    }
+
+  }
+}
+
+.api-heading {
+  margin-top: 24px;
+  margin-bottom: 18px;
+  font-size: 16px;
+}
+
+.overloads .detail-contents {
+  padding-top: 0;
+}
diff --git a/aio/src/styles/2-modules/_banner.scss b/aio/src/styles/2-modules/_banner.scss
index b7d136f9a4..1773713fc5 100644
--- a/aio/src/styles/2-modules/_banner.scss
+++ b/aio/src/styles/2-modules/_banner.scss
@@ -1,30 +1,25 @@
-/* Banner */
+/* BANNER */
 
-.banner {
+.info-banner {
+    margin: 16px 0;
     justify-content: center;
     background: $white;
+    border: 1px solid rgba($lightgray, 0.5);
+    border-radius: 4px;
     box-sizing: border-box;
-    font-size: 18px;
-    font-weight: 200;
     padding: 16px;
-    min-height: 97px;
+    background: $white;
+    height: auto;
+    overflow: visible;
 
-
-    @media (max-width: 480px) {
-        padding: 16px;
+    @media screen and (max-width: 600px) {
+        text-align: center;
     }
 
-    &.is-plain {
-        background: $white;
-        height: auto;
-        overflow: visible;
-    }
-
-
     p, .text-body {
         color: $darkgray;
-        font-size: 18px;
         line-height: 32px;
         margin: 0;
+        text-align: center;
     }
 }
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_buttons.scss b/aio/src/styles/2-modules/_buttons.scss
index fd3ed6c003..fc3a8fd3fc 100644
--- a/aio/src/styles/2-modules/_buttons.scss
+++ b/aio/src/styles/2-modules/_buttons.scss
@@ -66,10 +66,12 @@ a.button.md-button {
     background: $blue url('assets/images/logos/angular/angular_whiteTransparent.svg') 24px 13px no-repeat;
     color: rgba($white, .87);
     padding-left: 54px;
+    background-size: 22px 22px;
 
     @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
       background: $blue url('assets/images/logos/angular/angular_whiteTransparent.svg') 24px 13px no-repeat;
       background-size: 22px 22px;
+
     }
   }
 }
@@ -86,4 +88,23 @@ a.button.md-button {
         color: $offwhite;
     }
   }
+}
+
+a.filter-button {
+  width: 140px;
+  font-size: 14px;
+  padding: 0px 16px;
+  margin: 8px;
+  line-height: 48px;
+  border: 2px solid $blue;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: $blue;
+    color: white;
+  }
+}
+
+[md-button], [md-raised-button], [mat-button], [mat-raised-button] {
+  text-transform: uppercase;
 }
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_callout.scss b/aio/src/styles/2-modules/_callout.scss
new file mode 100644
index 0000000000..9de5d2295f
--- /dev/null
+++ b/aio/src/styles/2-modules/_callout.scss
@@ -0,0 +1,47 @@
+.callout {
+  @extend .alert;
+  padding: 0px;
+  border-left: none !important;
+  border-radius: 4px;
+
+  header {
+    color: $white;
+    line-height: 24px;
+    font-weight: 500;
+    text-transform: uppercase;
+    border-radius: 4px 4px 0 0;
+  }
+
+  p {
+    padding: 16px;
+    margin: 0px;
+    font-size: 14px;
+  }
+
+  &.is-critical {
+    border-color: $brightred;
+    background: rgba($brightred, 0.05);
+
+    header {
+      background: $brightred;
+    }
+  }
+
+  &.is-important {
+    border-color: $orange;
+    background: rgba($orange, 0.05);
+
+    header {
+      background: $amber-700;
+    }
+  }
+
+  &.is-helpful {
+    border-color: $blue;
+    background: rgba($blue, 0.05);
+
+    header {
+      background: $blue;
+    }
+  }
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_card.scss b/aio/src/styles/2-modules/_card.scss
index 9d148f21de..e2d12ce0a7 100644
--- a/aio/src/styles/2-modules/_card.scss
+++ b/aio/src/styles/2-modules/_card.scss
@@ -5,26 +5,18 @@
     margin: 24px 0;
 }
 
-.card {
-  background: $white;
-  border-radius: 4px;
-  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-  box-sizing: border-box;
-  height: 194px;
-  margin: 24px 8px;
+.docs-card {
+  @include card(194px, 30%);
   max-width: 340px;
   min-width: 262px;
+  margin: 24px 8px;
   padding-bottom: 48px;
   position: relative;
-  transition: box-shadow .5s;
-  width: 30%;
 
   &:hover {
-    // border: 2px solid $blue;
-    box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
     text-decoration: none;
 
-    h2 {
+    section {
       color: $blue;
     }
 
@@ -42,7 +34,7 @@
   }
 
 
-  h2 {
+  section {
     color: $darkgray;
     font-size: 20px;
     line-height: 24px;
@@ -77,4 +69,7 @@
       font-size: 13px;
     }
   }
-}
\ No newline at end of file
+  .card-footer.center {
+    text-align: center;
+  }
+}
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index f561d08c7a..76a2b1ec3e 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -1,16 +1,30 @@
+code-example, code-tabs {
+    clear: both;
+    display: block;
+}
+
 code-example,
 code-tabs md-tab-body {
-    background-color: $backgroundgray;
+  &:not(.no-box) {
+    background-color: rgba($backgroundgray, 0.2);
     border: 0.5px solid $lightgray;
     border-radius: 5px;
     color: $darkgray;
-    display: block;
-    padding: 8px 16px;
     margin: 16px auto;
+  }
 
-    code {
-      overflow: auto;
+  &.no-box {
+    pre {
+      margin: 0;
     }
+    code {
+      background-color: transparent;
+    }
+  }
+
+  code {
+    overflow: auto;
+  }
 }
 
 // TERMINAL / SHELL TEXT STYLES
@@ -20,22 +34,23 @@ code-example.code-shell, code-example[language=sh], code-example[language=bash]
 }
 
 code-example header {
-  background-color: $mediumgray;
-  border: 0.5px solid $mediumgray;
+  background-color: $accentblue;
   border-radius: 5px 5px 0 0;
   color: $offwhite;
   font-size: 16px;
-  padding: 10px;
-  margin: -17px;
+  padding: 8px 16px;
 }
 
-code-example.is-anti-pattern header {
+code-example.avoid header,
+code-example.avoidFile header {
   border: 2px solid $anti-pattern;
   background: $anti-pattern;
 }
 
-code-example.is-anti-pattern,
-code-tabs.is-anti-pattern md-tab-body {
+code-example.avoid,
+code-example.avoidFile,
+code-tabs.avoid md-tab-body,
+code-tabs.avoidFile md-tab-body {
   border: 0.5px solid $anti-pattern;
 }
 
@@ -53,51 +68,35 @@ code-tabs mat-tab-body-content .fadeIn {
 
 aio-code pre {
     display: flex;
-    padding: 0 48px 0 0;
+    min-height: 32px;
+    margin: 16px 32px;
     white-space: pre-wrap;
+    align-items: center;
 
-    code span, code ol li {
+    code span {
       line-height: 24px;
     }
 }
 
-code ol {
-  font-family: $main-font;
-  color: $lightgray;
-
-  li {
-    margin: 0;
-    font-family: $code-font;
-    font-size: 90%;
-  }
-}
-
-aio-code.headed-code {
-  pre.prettyprint {
-    margin-top: 32px;
-  }
-}
 
 .code-missing {
   color: $darkred;
 }
 
-.prettyprint {
-  position: relative;
-}
 
 .copy-button {
-  color: $lightgray;
+  display: inline-block;
+  position: absolute;
+  top: -8px;
+  right: -32px;
+
+  color: $blue-grey-200;
   background-color: transparent;
   border: none;
+  cursor: pointer;
   &:hover {
     color: $mediumgray;
   }
-  
-  @media (max-width: 480px) {
-    top: 0;
-    bottom: 0;
-  }
 }
 
 .lang-sh .copy-button, .lang-bash .copy-button {
@@ -107,70 +106,76 @@ aio-code.headed-code {
   }
 }
 
-.code-tab-group div.mat-tab-body-content {
+.code-tab-group .mat-tab-label {
+  white-space: nowrap;
+}
+
+.code-tab-group .mat-tab-body-content {
   height: auto;
   transform: none;
 }
 
-$blue-grey-50: #ECEFF1;
-$blue-grey-100: #CFD8DC;
-$blue-grey-200: #B0BEC5;
-$blue-grey-300: #90A4AE;
-$blue-grey-400: #78909C;
-$blue-grey-500: #607D8B;
-$blue-grey-600: #546E7A;
-$blue-grey-700: #455A64;
-$blue-grey-800: #37474F;
-$blue-grey-900: #263238;
 
-$white: #FFFFFF;
+[role="tabpanel"] {
+    transition: none;
+}
 
-/* SCREEN COLORS */
+.sidenav-content code a {
+  color: inherit;
+  font-size: inherit;
+}
 
-  .pnk,
-  .blk {
-    border-radius: 4px;
-    padding: 2px 4px;
-  }
-  .pnk {
-    background: $blue-grey-50;
-    color: $blue-grey-900;
-  }
-  .blk {
-    background: $blue-grey-900;
-  }
-  .otl {
-    outline: 1px solid rgba($blue-grey-700, .56);
-  }
-  .kwd {
-    color: $darkgray;
-  }
-  .typ,
-  .tag {
-    color: $darkred;
-  }
-  .str,
-  .atv {
-    color: $blue;
-  }
-  .atn {
-    color: $blue;
-  }
-  .com {
-    color: $mediumgray;
-  }
-  .lit {
-    color: $blue;
-  }
-  .pun {
-    color: $blue-grey-700;
-  }
-  .pln {
-    color: $green-800;
-  }
-  .dec {
-    color: $blue;
+/* PRETTY PRINTING STYLES for prettify.js. */
+
+.prettyprint {
+  position: relative;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin: 0;
+  font-family: $main-font;
+  color: #B3B6B7;
+  li {
+    margin: 0;
+    font-family: $code-font;
+    font-size: 90%;
+    line-height: 24px;
   }
+}
+
+/* The following class|color styles are derived from https://github.com/google/code-prettify/blob/master/src/prettify.css*/
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #800 }  /* string content */
+  .kwd { color: #00f }  /* a keyword */
+  .com { color: #060 }  /* a comment */
+  .typ { color: red }  /* a type name */
+  .lit { color: #08c }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #660 }
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #800 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
 
 /* SHELL / TERMINAL CODE BLOCKS */
 
@@ -179,54 +184,3 @@ code-example.code-shell, code-example[language=sh], code-example[language=bash]
     color: $codegreen;
   }
 }
-
-/* PRINT COLORS */
-
-
-@media print {
-  border: none;
-  box-shadow: none;
-
-  ol {
-    background: $white;
-  }
-
-  .kwd {
-    color: $darkgray;
-  }
-  .typ,
-  .tag {
-    color: $darkred;
-  }
-  .str,
-  .atv {
-    color: $blue;
-  }
-  .atn {
-    color: $blue;
-  }
-  .com {
-    color: $mediumgray;
-  }
-  .lit {
-    color: $blue;
-  }
-  .pun {
-    color: $blue-grey-700;
-  }
-  .pln {
-    color: $green-800;
-  }
-  .dec {
-    color: $blue;
-  }
-}
-
-// REMOVE RIPPLE EFFECT FROM MATERIAL TABS
-code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-body-active, code-tabs md-tab-group *.mat-tab-body-content, code-tabs md-tab-group *.mat-tab-list, code-tabs md-tab-gropu *.mat-tab-body-content {
-  transform: none !important;
-}
-
-[role="tabpanel"] {
-    transition: none;
-}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_contribute.scss b/aio/src/styles/2-modules/_contribute.scss
new file mode 100644
index 0000000000..642b9b8586
--- /dev/null
+++ b/aio/src/styles/2-modules/_contribute.scss
@@ -0,0 +1,14 @@
+.contribute-container {
+  h2 {
+    margin: 0;
+  }
+
+  .l-sub-section {
+    width: 90%;
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss
index 3051b1da37..da4542f8d7 100644
--- a/aio/src/styles/2-modules/_contributor.scss
+++ b/aio/src/styles/2-modules/_contributor.scss
@@ -1,56 +1,10 @@
-$metal: #536E7A;
-$snow: #FFFFFF;
-$steel: #253238;
-
-// .bio-card {
-//     margin: 0 0 32px 0;
-//     position: relative;
-//     cursor: pointer;
-//     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-//     background: $white;
-//     transition: all .3s;
-
-//   &:hover {
-//     transform: translate3d(0,-3px,0);
-//     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
-
-//     nav {
-//       opacity: 1;
-//     }
-//   }
-
-
 aio-contributor-list {
-  .grid-fluid {
-    margin: 0 auto;
-    margin-bottom: 6 * 8px;
-    *zoom: 1;
-  }
-  .grid-fluid aio-contributor {
-    display: inline;
-    float: left;
-    margin-right: 1.04167%;
-    margin-left: 1.04167%;
-    width: 22.91667%;
-    margin-bottom: 6 * 8px;
-  }
-  .grid-fluid:after, .grid-fluid:before {
-    content: '.';
-    clear: both;
-    display: block;
-    overflow: hidden;
-    visibility: hidden;
-    font-size: 0;
-    line-height: 0;
-    width: 0;
-    height: 0;
-  }
   @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
-  /* line 6, ../scss/_responsive.scss */
     .grid-fluid{
       width: auto;
     }
   }
+
   @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
     .grid-fluid{
       margin-left: 20px;
@@ -60,93 +14,174 @@ aio-contributor-list {
       width: auto;
     }
   }
+}
 
+.group-buttons {
+  margin: 32px auto;
+
+  a {
+    &.selected {
+      background-color: $blue;
+      color: white;
+    }
+  }
+}
+
+.contributor-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 aio-contributor {
-  margin: 0px 0px ($unit * 4) 0px;
+  background: $white;
+  margin: 8px;
   position: relative;
   cursor: pointer;
-  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
-  background: $snow;
+  border-radius: 4px;
+  box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
   transition: all .3s;
-  padding: 10px;
+  perspective: 800px;
 
   &:hover {
     transform: translate3d(0,-3px,0);
-    box-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.4);
+    box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);
 
-    nav {
+    .contributor-image {
+      transform: scale(1.05);
+    }
+
+    .contributor-info {
       opacity: 1;
     }
   }
 
+  .contributor-info {
+    background: rgba($darkgray, 0.5);
+    height: 168px;
+    width: 168px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    opacity: 0;
+    border-radius: 50%;
 
-  // HEADER
+    [md-button] {
+      color: $white;
+      font-size: 14px;
+      font-weight: 500;
+      margin: 8px;
+      padding: 0;
 
-  header {
+      &:hover {
+        color: $lightgray;
+      }
+
+      &.icon {
+        min-width: 20px;
+        width: 20px;
+
+        .fa-2x {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+
+  div.contributor-card {
+    width: 250px;
+    height: 270px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
     position: relative;
     overflow: hidden;
     border-radius: 4px;
+    transform-style:preserve-3d;
+    transition:transform ease 500ms;
 
-    img {
-      box-sizing: border-box;
-      display: flex;
-      flex: 0 0 auto;
-      width: 100%;
-      height: auto;
+    h3 {
+      margin: 8px 0;
     }
 
-    nav {
-      transition: opacity .5s;
-      position: absolute;
-      bottom: 3px;
-      left: 0;
-      right: 0;
-      z-index: 1;
-      padding: 8px;
-      background: rgba($steel, .4);
-      opacity: 0;
+    .card-front, .card-back {
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+    }
 
-      button {
-        font-size: 14px;
-        color: $white;
-        text-transform: uppercase;
-        opacity: .87;
-        background: none;
-        border: none;
+    .card-front {
+      justify-content: center;
+    }
+
+    .card-back {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 16px 24px;
+      transform:rotateY(180deg);
+
+      section {
+        display: none;
       }
 
-      a {
-        color: $white;
-        font-size: 20px;
-        text-decoration: none;
-        opacity: .87;
-        margin-right: 8px;
-        float: right;
+      p {
+        margin: 8px 0;
+        font-size: 12px;
+        line-height: 14px;
+        text-align: left;
+      }
+
+    }
+
+    &.flipped {
+      transform:rotateY(180deg);
+      .card-front {
+        display: none;
       }
     }
   }
 
-  // MAIN CONTENT
+  .contributor-image {
+    display: flex;
+    justify-content: center;
+    border-radius: 50%;
+    align-items: center;
+    height: 168px;
+    width: 168px;
+    background-size: cover;
+    background-position: center;
+    margin: 8px auto;
+    border: 2px solid $lightgray;
+    transition: all .2s ease-in-out;
+  }
 
-  h3 {
+  section {
+    font-size: 14px;
+    font-weight: 500;
+    padding: 8px;
+    margin: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: $metal;
     text-transform: uppercase;
-    font-size: 18px;
-    margin-bottom: $unit;
   }
 
   p {
-    white-space: nowrap;
-    overflow: hidden;
     cursor: pointer;
     font-size: 14px;
-    line-height: 24px;
-    margin: 0;
+    line-height: 18px;
+    margin: 8px 16px;
     text-overflow: ellipsis;
+    overflow: scroll;
+    font-weight: 400;
   }
-}
\ No newline at end of file
+}
diff --git a/aio/src/styles/2-modules/_details.scss b/aio/src/styles/2-modules/_details.scss
new file mode 100644
index 0000000000..36a1b95714
--- /dev/null
+++ b/aio/src/styles/2-modules/_details.scss
@@ -0,0 +1,51 @@
+/*
+ * General styling to make detail/summary tags look a bit more material
+ * To get the best out of it you should structure your usage like this:
+ *
+ * ```
+ * <details>
+ *   <summary>Some title</summary>
+ *   <div class="details-content">
+ *     Some content
+ *   </div>
+ *  </details>
+ *
+ */
+
+summary {
+  cursor: pointer;
+  font-size: 16px;
+  position: relative;
+  padding: 16px 24px;
+  color: $black;
+  height: 16px;
+  display: block; // Remove the built in details marker in FF
+
+  &::-webkit-details-marker {
+    display: none; // Remove the built in details marker in webkit
+  }
+
+  &::after {
+    content: '\E5CE'; // See https://material.io/icons/#ic_expand_less
+    font-family: 'Material Icons';
+    font-size: 24px;
+    -webkit-font-smoothing: antialiased;
+    @include rotate(0deg); // We will rotate 180 degrees when details is open
+
+    position: absolute;
+    top: 12px;
+    right: 22px;
+  }
+}
+
+details {
+  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
+
+  .detail-contents {
+    padding: 16px 24px;
+  }
+
+  &[open] > summary::after {
+    @include rotate(180deg); // Rotate the icon
+  }
+}
diff --git a/aio/src/styles/2-modules/_edit-page-cta.scss b/aio/src/styles/2-modules/_edit-page-cta.scss
new file mode 100644
index 0000000000..54aeb1c5f7
--- /dev/null
+++ b/aio/src/styles/2-modules/_edit-page-cta.scss
@@ -0,0 +1,10 @@
+.edit-page-cta {
+    font-weight: 400;
+    font-size: 14px;
+    color: $blue;
+    text-align: right;
+    margin-right: 32px;
+    display: block;
+    position: absolute;
+    right: 0;
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_features.scss b/aio/src/styles/2-modules/_features.scss
index a9b27a2a9f..ffe8f92e27 100644
--- a/aio/src/styles/2-modules/_features.scss
+++ b/aio/src/styles/2-modules/_features.scss
@@ -1,24 +1,38 @@
-.feature-row {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
+// FEATURES MARKETING PAGE SPECIFIC STYLES
 
-  @media (max-width: 600px) {
-    flex-direction: column;
+.feature-section {
+  margin: 0 0 32px;
+
+  .feature-header, .text-headline {
+    text-align: center;
   }
 
-  h2.text-headline {
-    font-size: 28px;
-    margin-top: 10px;
-    color: #37474F;
+  .feature-header img {
+    margin: 16px;
   }
-}
 
-.features-desc {
-  max-width: 920px;
-}
+  .feature-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin: 8px 0px;
+    clear: both;
+  }
 
-.feature {
-  max-width: 350px;
-  margin-bottom: $unit * 4;
-}
+  .feature-row {
+    display: flex;
+    flex-wrap: wrap;
+
+    @media (max-width: 600px) {
+      flex-direction: column;
+    }
+
+    .feature {
+      max-width: 300px;
+      margin: 0 16px;  
+      
+      @media (max-width: 768px) {
+        max-width: 100%;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_filetree.scss b/aio/src/styles/2-modules/_filetree.scss
index 1208c59ff1..e3b4ae8499 100644
--- a/aio/src/styles/2-modules/_filetree.scss
+++ b/aio/src/styles/2-modules/_filetree.scss
@@ -1,19 +1,20 @@
 .filetree {
   background: $offwhite;
-  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2);
   border: 4px solid $lightgray;
-  margin: 0 0 5px 0;
-  padding: 10px;
+  border-radius: 4px;
+  margin: 0 0 24px 0;
+  padding: 16px 32px;
 
   .file {
     display: block;
     font-family: $main-font;
+    letter-spacing: 0.3px;
     line-height: 32px;
     color: $darkgray;
   }
 
   .children {
-    padding-left: 5px;
+    padding-left: 24px;
     position: relative;
     overflow: hidden;
 
@@ -24,7 +25,7 @@
         content: '';
         left: -18px;
         bottom: 16px;
-        width: 5px;
+        width: 16px;
         height: 9999px;
         position: absolute;
         border-width: 0 0 1px 1px;
diff --git a/aio/src/styles/2-modules/_hamburger.scss b/aio/src/styles/2-modules/_hamburger.scss
index 1380f1637b..780cd26558 100644
--- a/aio/src/styles/2-modules/_hamburger.scss
+++ b/aio/src/styles/2-modules/_hamburger.scss
@@ -8,16 +8,22 @@
 }
 
 .hamburger.mat-button {
-    transition: color 0.2s;
-    height: 100%;
-    margin: 0;
-    padding: 0;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  &:not(.starting) {
+    transition-duration: .4s;
+    transition-property: color, margin;
+    transition-timing-function: cubic-bezier(.25, .8, .25, 1);
+  }
 }
 
 .hamburger.mat-button:hover {
-    color: $offwhite;
+  color: $offwhite;
 }
 
-.hamburger md-icon {
+.hamburger .mat-icon {
   position: inherit;
-}
\ No newline at end of file
+  color: white;
+}
diff --git a/aio/src/styles/2-modules/_heading-anchors.scss b/aio/src/styles/2-modules/_heading-anchors.scss
new file mode 100644
index 0000000000..fca92b5609
--- /dev/null
+++ b/aio/src/styles/2-modules/_heading-anchors.scss
@@ -0,0 +1,47 @@
+.sidenav-content {
+  h1, h2, h3, h4, h5, h6 {
+
+    &.no-anchor .header-link {
+      display: none;
+    }
+
+    .mat-icon, .material-icons {
+      visibility: hidden;
+      display: inline-block;
+      color: $mediumgray;
+      margin: 0 8px;
+    }
+
+    &:hover {
+      .mat-icon, .material-icons {
+        visibility: visible;
+      }
+    }
+
+    a.header-link {
+      text-decoration: none;
+      padding-left: 8px;
+      margin-left: -50px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  .l-sub-section {
+    h1, h2, h3, h4, h5, h6 {
+      a {
+        padding-right: 24px;
+        margin-left: -74px;
+      }
+    }
+  }
+
+  .alert {
+    h1, h2, h3, h4, h5, h6 {
+      a {
+        padding-right: 40px;
+        margin-left: -90px;
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_hero.scss b/aio/src/styles/2-modules/_hero.scss
deleted file mode 100644
index 4a2abd0acc..0000000000
--- a/aio/src/styles/2-modules/_hero.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
-* Hero Module
-*
-* A hero banner located at the top of each page that displays the
-* title of the page and sometimes a decorative background.
-*
-*/
-
-
-/*
-* Class
-*/
-
-.hero {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 48px 48px 32px 48px;
-  position: relative;
-
-  @media (max-width: 480px) {
-    height: auto;
-    padding-top: 40px;
-  }
-
-  h1:after {
-   content: none;
-  }
-
-  .hero-title {
-    display: inline-block;
-    font-size: 28px;
-    font-weight: 400;
-    float: left;
-    line-height: 48px;
-    margin: 0 $unit 0 0;
-    text-transform: uppercase;
-
-    &.is-standard-case {
-      text-transform: none;
-    }
-  }
-
-  .hero-subtitle {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: $unit * 3;
-    margin: 0;
-    text-transform: uppercase;
-  }
-
-
-  // CTA BUTTONS
-  .button {
-    margin: 0px $unit;
-
-    // @include respond-to('mobile') {
-    //   margin: 16px 0;
-    //   display: block;
-    // }
-  }
-
-  button {
-    // Override md-button from angular material to align language select with hero title.
-    margin: 0 !important;
-  }
-
-
-  /*
-  * Large Banner
-  */
-
-  &.is-large {
-    padding-top: 32px;
-    text-align: center;
-
-    // @include respond-to('mobile') {
-    //   height: auto;
-    // }
-
-    // LARGE SHEILD LOGO
-    .hero-logo {
-      filter: drop-shadow(0 2px 2px rgba($black, 0.24));
-      margin-bottom: 8px;
-      opacity: 1;
-      padding: 0;
-      width: 240px;
-
-    //   @include respond-to('mobile') {
-    //     width: 192px;
-    //   }
-    }
-
-    .hero-cta,
-    .hero-cta.md-button {
-      background: rgba($white, .87);
-      border-radius: 2px;
-      color: $blue;
-      font-weight: 500;
-      padding: 0 64px;
-      margin: 40px 0;
-      transition: all .3s;
-
-      &:hover {
-        background: $white;
-        box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
-        color: $blue;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_hr.scss b/aio/src/styles/2-modules/_hr.scss
new file mode 100644
index 0000000000..eacfad9b2d
--- /dev/null
+++ b/aio/src/styles/2-modules/_hr.scss
@@ -0,0 +1,14 @@
+hr {
+    border: none;
+    background: $lightgray;
+    height: 1px;
+}
+
+.hr-margin {
+    display: block;
+    height: 1px;
+    border: 0;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_images.scss b/aio/src/styles/2-modules/_images.scss
index 4481040eeb..b0d1bd0c4a 100644
--- a/aio/src/styles/2-modules/_images.scss
+++ b/aio/src/styles/2-modules/_images.scss
@@ -1,25 +1,46 @@
-img {
-  @media (max-width: 600px) {
-    max-width: 100%;
-    float: none !important;
-  }
-}
-
-.image-display {
-  border-radius: 4px;
-  background: $white;
-  padding: 20px;
-  display: inline-block;
-  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
-  margin: 0 0 10px 0;
-
+.content {
   img {
+
+    &.right {
+      clear: both;
+      float: right;
+      margin-left: 20px;
+      margin-bottom: 20px;
+    }
+
+    &.left {
+      clear: both;
+      float: left;
+      margin-right: 20px;
+      margin-bottom: 20px;
+    }
+
+    @media (max-width: 1300px) {
+      max-width: 100%;
+      height: auto;
+    }
+
+    @media (max-width: 600px) {
+      float: none !important;
+      &.right {
+        margin-left: 0;
+      }
+      &.left {
+        margin-right: 0;
+      }
+    }
+  }
+
+  figure {
     border-radius: 4px;
+    background: $white;
+    padding: 20px;
     display: inline-block;
-    max-width: 100%;
+    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
+    margin: 0 0 14px 0;
+
+    img {
+      border-radius: 4px;
+    }
   }
 }
-
-.home-row .promo-img-container img {
-  max-width: 90%;
-}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss
index 502ce46fb8..c145331196 100644
--- a/aio/src/styles/2-modules/_modules-dir.scss
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -2,19 +2,30 @@
    MODULE STYLES
    ============================== */
 
-   @import 'hamburger';
-   @import 'features';
-   @import 'code';
-   @import 'contributor';
    @import 'alert';
+   @import 'api-pages';
+   @import 'api-list';
+   @import 'banner';
+   @import 'buttons';
+   @import 'callout';
+   @import 'card';
+   @import 'code';
+   @import 'contribute';
+   @import 'contributor';
+   @import 'details';
+   @import 'edit-page-cta';
+   @import 'features';
    @import 'filetree';
+   @import 'hamburger';
+   @import 'heading-anchors';
+   @import 'hr';
    @import 'images';
+   @import 'progress-bar';
    @import 'table';
    @import 'presskit';
-   @import 'card';
+   @import 'resources';
+   @import 'scrollbar';
+   @import 'search-results';
    @import 'subsection';
-   @import 'buttons';
-   @import 'hero';
-   @import 'announcement-bar';
-   @import 'banner';
-   @import 'api-list';
\ No newline at end of file
+   @import 'toc';
+   @import 'select-menu';
diff --git a/aio/src/styles/2-modules/_presskit.scss b/aio/src/styles/2-modules/_presskit.scss
index 5810d50b00..75aeea1097 100644
--- a/aio/src/styles/2-modules/_presskit.scss
+++ b/aio/src/styles/2-modules/_presskit.scss
@@ -1,4 +1,6 @@
 .presskit-container {
+  padding: 0 32px 32px 32px;
+
   h2 {
     color: #37474F;
   }
@@ -13,7 +15,7 @@
   }
 
   .presskit-row {
-    margin: $unit * 6 0;
+    margin: 48px 0;
     width: 100%;
 
     .presskit-inner {
@@ -31,7 +33,7 @@
         color: #455A64;
 
         @media(max-width: 599px) {
-          padding-bottom: $unit * 2;
+          padding-bottom: 16px;
         }
       }
 
@@ -39,6 +41,7 @@
         margin-top: 10px;
         border-radius: 4px;
         width: 128px;
+        height: 128px;
         background-color: #34474F;
       }
 
@@ -52,7 +55,7 @@
         }
 
         li {
-          margin: 0 0 $unit 0;
+          margin: 0 0 8px 0;
         }
       }
     }
@@ -65,8 +68,17 @@
 
       img {
         width: 128px;
-        margin-bottom: $unit * 2;
+        height: 128px;
+        margin-bottom: 8px * 2;
       }
     }
   }
+
+  .presskit-row:first-child {
+    margin-top: 0;
+
+    @media(max-width: 599px) {
+      margin-top: 48px;
+    }
+  }
 }
diff --git a/aio/src/styles/2-modules/_progress-bar.scss b/aio/src/styles/2-modules/_progress-bar.scss
new file mode 100644
index 0000000000..bf9e6480cf
--- /dev/null
+++ b/aio/src/styles/2-modules/_progress-bar.scss
@@ -0,0 +1,8 @@
+.progress-bar-container {
+  height: 2px;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 11;
+}
diff --git a/aio/src/styles/2-modules/_resources.scss b/aio/src/styles/2-modules/_resources.scss
new file mode 100644
index 0000000000..f0a18d1e90
--- /dev/null
+++ b/aio/src/styles/2-modules/_resources.scss
@@ -0,0 +1,219 @@
+.showcase {
+  width: 80%;
+}
+
+.c-resource-nav {
+  width: 20%;
+}
+
+.resources-container {
+  position: relative;
+}
+
+.grid-fixed:after, .grid-fixed:before {
+  content: '.';
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  font-size: 0;
+  line-height: 0;
+  width: 0;
+  height: 0;
+}
+
+@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
+  .grid-fixed {
+    width: auto;
+  }
+}
+
+@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
+  .grid-fixed .c3, .grid-fixed .c8 {
+    margin-left: 20px;
+    margin-right: 20px;
+    float: none;
+    display: block;
+    width: auto;
+  }
+}
+
+@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 480px) {
+  .grid-fixed .c3, .grid-fixed .c8 {
+    margin-left: 0px;
+    margin-right: 0px;
+    float: none;
+    display: block;
+    width: auto;
+  }
+}
+
+@media handheld and (max-width: 900px), screen and (max-width: 900px) {
+  /* line 6, ../scss/_responsive.scss */
+  .grid-fixed{
+    margin: 0 auto;
+    *zoom: 1;
+  }
+  .grid-fixed:after, .grid-fixed:before, {
+    content: '.';
+    clear: both;
+    display: block;
+    overflow: hidden;
+    visibility: hidden;
+    font-size: 0;
+    line-height: 0;
+    width: 0;
+    height: 0;
+  }
+}
+
+@media handheld and (max-width: 480px), screen and (max-width: 480px) {
+  /* line 6, ../scss/_responsive.scss */
+  .grid-fixed {
+    margin: 0 auto;
+    *zoom: 1;
+  }
+  .grid-fixed:after, .grid-fixed:before {
+    content: '.';
+    clear: both;
+    display: block;
+    overflow: hidden;
+    visibility: hidden;
+    font-size: 0;
+    line-height: 0;
+    width: 0;
+    height: 0;
+  }
+}
+
+aio-resource-list {
+
+  .shadow-1 {
+    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 4px 0 rgba($black, 0.37);
+  }
+
+  .showcase {
+    margin-bottom: 8px * 6;
+    border-radius: 4px;
+  }
+
+  .c-resource {
+    h4 {
+      margin: 0;
+      line-height: 24px;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .c-resource-nav {
+    position: fixed;
+    top: 142px;
+    right: 32px;
+    width: 8px * 20;
+    z-index: 1;
+    background-color: #fff;
+    border-radius: 2px;
+
+    a {
+      color: #373E41;
+      text-decoration: none;
+    }
+
+    .category {
+      padding: 10px 0;
+
+      .category-link {
+        display: block;
+        margin: 2px 0;
+        padding: 3px 14px;
+        font-size: 18px !important;
+
+        &:hover {
+          background: #edf0f2;
+          color: #2B85E7;
+        }
+      }
+    }
+
+    .subcategory {
+      .subcategory-link {
+        display: block;
+        margin: 2px 0;
+        padding: 4px 14px;
+
+        &:hover {
+          background: #edf0f2;
+          color: #2B85E7;
+        }
+      }
+    }
+  }
+
+  .h-anchor-offset {
+    display: block;
+    position: relative;
+    top: -20px;
+    visibility: hidden;
+  }
+
+  .l-flex--column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .c-resource-header {
+    margin-bottom: 16px;
+  }
+
+  .c-contribute {
+    margin-bottom: 24px;
+  }
+
+  .c-resource-header h2 {
+    margin: 0;
+  }
+
+  .subcategory-title {
+    padding: 16px 23px;
+    margin: 0;
+    background-color: $mist;
+    color: #373E41;
+  }
+
+  .h-capitalize {
+    text-transform: capitalize;
+  }
+
+  .h-hide {
+    display: none;
+  }
+
+  .resource-row-link {
+    color: #1a2326;
+    border: transparent solid 1px;
+    margin: 0;
+    padding: 16px 23px 16px 23px;
+    position: relative;
+    text-decoration: none;
+    transition: all .3s;
+  }
+
+  .resource-row-link:hover {
+    color: #1a2326;
+    text-decoration: none;
+    border-color: #2B85E7;
+    border-radius: 4px;
+    box-shadow: 0 8px 8px rgba(1, 67, 163, .24), 0 0 8px rgba(1, 67, 163, .12), 0 6px 18px rgba(43, 133, 231, .12);
+    transform: translateY(-2px);
+  }
+
+  @media(max-width: 900px) {
+    .c-resource-nav {
+      display: none;
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_scrollbar.scss b/aio/src/styles/2-modules/_scrollbar.scss
new file mode 100644
index 0000000000..38549cc31f
--- /dev/null
+++ b/aio/src/styles/2-modules/_scrollbar.scss
@@ -0,0 +1,27 @@
+body::-webkit-scrollbar, md-sidenav.sidenav::-webkit-scrollbar, .mat-sidenav-content::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+body::-webkit-scrollbar-track, md-sidenav.sidenav::-webkit-scrollbar-trac, .mat-sidenav-content::-webkit-scrollbar-trac {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+
+body::-webkit-scrollbar-thumb, md-sidenav.sidenav::-webkit-scrollbar-thumb, .mat-sidenav-content::-webkit-scrollbar-thumb {
+  background-color: $mediumgray;
+  outline: 1px solid $darkgray;
+}
+
+.search-results::-webkit-scrollbar, .toc-container::-webkit-scrollbar {
+  height: 4px;
+  width: 4px;
+}
+
+.search-results::-webkit-scrollbar-track, .toc-container::-webkit-scrollbar-trac {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+
+.search-results::-webkit-scrollbar-thumb, .toc-container::-webkit-scrollbar-thumb {
+  background-color: $mediumgray;
+  outline: 1px solid slategrey;
+}
diff --git a/aio/src/styles/1-layouts/_search-results.scss b/aio/src/styles/2-modules/_search-results.scss
similarity index 54%
rename from aio/src/styles/1-layouts/_search-results.scss
rename to aio/src/styles/2-modules/_search-results.scss
index 9f6b39e794..42cc6798ae 100644
--- a/aio/src/styles/1-layouts/_search-results.scss
+++ b/aio/src/styles/2-modules/_search-results.scss
@@ -5,23 +5,23 @@ aio-search-results {
 .search-results {
     display: flex;
     flex-direction: row;
-    overflow: scroll;
-    padding-top: 50px;
+    justify-content: space-around;
+    overflow: auto;
+    padding: 68px 32px 0;
     color: $offwhite;
-    width: 100%;
-    max-height: 40%;
+    width: auto;
+    max-height: 95vh;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 5;
     background-color: $darkgray;
-    border: 24px solid $darkgray;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+    box-sizing: border-box;
 
     @media (max-width: 480px) {
         display: block;
-        max-height: 70%;
-        box-sizing: border-box;
         .search-area {
             display: block;
             margin: 16px 16px;
@@ -34,26 +34,48 @@ aio-search-results {
     flex-direction: column;
     margin: 16px 16px;
     height: 100%;
-    h2 {
+
+    h3 {
         font-size: 16px;
+        font-weight: 400;
         margin: 10px 0px 5px;
+        text-transform: uppercase;
     }
+
+    ul {
+        margin: 0;
+        padding: 0;
+
+        li {
+            list-style: none;
+        }
+    }
+
     a {
         font-size: 14px;
         color: $lightgray;
         text-decoration: none;
-        font-weight: 300;
+        font-weight: normal;
         &:hover {
-            color: $blue;
-            font-weight: 500;
+            color: $white;
         }
         &:visited {
-        text-decoration: none;
+          text-decoration: none;
+        }
+
+        span.symbol {
+          margin-right: 8px;
+        }
+    }
+
+    .priority-pages {
+        padding: 0.5rem 0;
+        a {
+            font-weight: bold;
         }
     }
 
     @include bp(tiny) {
-        width: 100%;
         display: block;
     }
-}
\ No newline at end of file
+}
diff --git a/aio/src/styles/2-modules/_select-menu.scss b/aio/src/styles/2-modules/_select-menu.scss
new file mode 100644
index 0000000000..a93fa753e9
--- /dev/null
+++ b/aio/src/styles/2-modules/_select-menu.scss
@@ -0,0 +1,72 @@
+/* SELECT MENU */
+
+.form-select-menu {
+  position: relative;
+}
+
+.form-select-button {
+  background: $white;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-sizing: border-box;
+  border: 1px solid $white;
+  color: $blue-grey-600;
+  font-size: 12px;
+  font-weight: 400;
+  height: 32px;
+  line-height: 32px;
+  outline: none;
+  padding: 0 16px;
+  text-align: left;
+  width: 100%;
+  cursor: pointer;
+
+  strong {
+    font-weight: 600;
+    margin-right: 8px;
+    text-transform: uppercase;
+  }
+
+  &:focus {
+    border: 1px solid $blue-400;
+    box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
+  }
+}
+
+.form-select-dropdown {
+  background: $white;
+  box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
+  border-radius: 4px;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: $layer-2;
+
+  li {
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 32px;
+    margin: 0;
+    padding: 0 16px 0 40px;
+    position: relative;
+    transition: all .2s;
+
+    &:hover {
+      background: $blue-grey-50;
+      color: $blue-500;
+    }
+
+    &.selected {
+      background-color: $blue-grey-100;
+    }
+
+    .symbol {
+      left: 16px;
+      position: absolute;
+      top: 8px;
+      z-index: $layer-5;
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_subsection.scss b/aio/src/styles/2-modules/_subsection.scss
index f3ee7e6965..20dc06cd55 100644
--- a/aio/src/styles/2-modules/_subsection.scss
+++ b/aio/src/styles/2-modules/_subsection.scss
@@ -1,7 +1,20 @@
 .l-sub-section {
     color: $darkgray;
-    background-color: $lightgray;
-    border-left: 10px solid $mediumgray;
+    background-color: rgba($blue, 0.05);
+    border-left: 8px solid $blue;
     padding: 16px;
-    margin-bottom: 10px;
+    margin-bottom: 8px;
+    display: table;
+    clear: both;
+    width: 100%;
+    box-sizing: border-box;
+
+    h3 {
+        margin: 8px 0 0;
+    }
+
+    a:hover {
+        color: $blue;
+        text-decoration: underline;
+    }
 }
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss
index 2ab3fe42c2..b515033ecb 100644
--- a/aio/src/styles/2-modules/_table.scss
+++ b/aio/src/styles/2-modules/_table.scss
@@ -8,16 +8,29 @@ table {
     width: 100%;
   }
 
+  &.is-fixed-layout {
+    table-layout: fixed;
+  }
+
   thead {
+    vertical-align: middle;
+    border-color: inherit;
+
+    tr {
+      vertical-align: inherit;
+      border-color: inherit;
+    }
+
     th {
-      background: $offwhite;
+      background: rgba($lightgray, 0.2);
       border-bottom: 1px solid $lightgray;
       color: $darkgray;
       font-size: 12px;
       font-weight: 500;
-      padding: 0 24px;
+      padding: 8px 32px;
       text-align: left;
       text-transform: uppercase;
+      line-height: 28px;
     }
   }
 
@@ -25,9 +38,10 @@ table {
     th,
     td {
       border-bottom: 1px solid $lightgray;
-      padding: 16px 24px;
+      padding: 16px;
       text-align: left;
       line-height: 24px;
+      vertical-align: top;
 
       @media (max-width: 480px) {
         &:before {
@@ -41,27 +55,19 @@ table {
     td {
       letter-spacing: 0.30px;
 
-      @media (max-width: 480px) {
-        display: block;
-      }
-
     tr td:first-child {
       @media (max-width: 480px) {
         background-color: $lightgray;
       }
     }
-      
+
     }
 
     th {
-      background: $offwhite;
+      background: rgba($lightgray, 0.2);
       border-right: 1px solid $lightgray;
       font-weight: 600;
       max-width: 100px;
-
-      @media (max-width: 480px) {
-        display: none;
-      }
     }
 
     tr:last-child td {
@@ -70,7 +76,39 @@ table {
       @media (max-width: 480px) {
         border-bottom: 1px solid $lightgray;
       }
-
     }
   }
-}
\ No newline at end of file
+}
+
+#cheatsheet {
+
+  table tbody td {
+    overflow: auto;
+  }
+
+  @media only screen and (max-width: 990px) {
+
+    /* Force table to not be like tables anymore */
+    table, thead, tbody, tfoot, tr, th, td {
+      display: block;
+      position: relative;
+      max-width: 100%;
+
+      code {
+        padding: 0;
+        background-color: inherit;
+      }
+    }
+
+    th {
+      border-right: none;
+    }
+
+    th, td {
+      &:not(:last-child) {
+        border-bottom: none;
+        padding-bottom: 0px;
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss
new file mode 100644
index 0000000000..c4a2f08b78
--- /dev/null
+++ b/aio/src/styles/2-modules/_toc.scss
@@ -0,0 +1,201 @@
+.toc-container {
+  width: 18%;
+  position: fixed;
+  top: 76px;
+  right: 0;
+  bottom: 12px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+aio-toc {
+  &.embedded {
+    @media (min-width: 801px) {
+      display: none;
+    }
+  }
+}
+
+.toc-inner {
+  font-size: 13px;
+  overflow-y: visible;
+  padding: 4px 0 0 10px;
+
+  .toc-heading,
+  .toc-list .h1 {
+    font-size: 115%;
+  }
+
+  .toc-heading {
+    font-weight: 500;
+    margin: 0 0 16px 8px;
+    padding: 0;
+  }
+
+  .toc-heading.secondary {
+    position: relative;
+    top: -8px;
+
+    &:hover {
+      color: $accentblue;
+    }
+  }
+
+  button.toc-heading,
+  button.toc-more-items {
+    cursor: pointer;
+    display: inline-block;
+    background: 0;
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    text-align: start;
+
+    &.embedded:focus {
+      outline: none;
+      background: $lightgray;
+    }
+  }
+
+  button.toc-heading {
+    md-icon.rotating-icon {
+      height: 18px;
+      width: 18px;
+      position: relative;
+      left: -4px;
+      top: 5px;
+    }
+
+    &:hover:not(.embedded) {
+      color: $accentblue;
+    }
+  }
+
+  button.toc-more-items {
+    color: $mediumgray;
+    top: 10px;
+    position: relative;
+
+    &:hover {
+      color: $accentblue;
+    }
+  }
+
+  button.toc-more-items::after {
+    content: 'expand_less';
+  }
+
+  button.toc-more-items.collapsed::after {
+    content: 'more_horiz';
+  }
+
+
+  .mat-icon.collapsed {
+    @include rotate(0deg);
+  }
+
+  .mat-icon:not(.collapsed) {
+    @include rotate(90deg);
+    // margin: 4px;
+  }
+
+  ul.toc-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0 8px 0 0;
+
+    @media (max-width: 800px) {
+      width: auto;
+    }
+
+    li {
+      box-sizing: border-box;
+      font-size: 12px;
+      line-height: 16px;
+      padding: 3px 0 3px 12px;
+      position: relative;
+      transition: all 0.3s ease-in-out;
+
+      &.h1:after {
+        content: '';
+        display: block;
+        height: 1px;
+        width: 40%;
+        margin: 7px 0 4px 0;
+        background: #DBDBDB;
+        clear: both;
+      }
+
+      &.h3 {
+        padding-left: 24px;
+      }
+
+      a {
+        font-size: inherit;
+        color: lighten($darkgray, 10);
+        display:table-cell;
+        overflow: visible;
+        font-size: 12px;
+        display: table-cell;
+      }
+
+      &:hover a {
+        color: $accentblue;
+      }
+
+      &.active {
+        a {
+          color: $blue;
+          font-weight: 500;
+
+          &:before {
+            content: '';
+            border-radius: 50%;
+            left: -3px;
+            top: 12px;
+            background: $blue;
+            position: absolute;
+            width: 6px;
+            height: 6px;
+          }
+        }
+      }
+    }
+
+    &:not(.embedded) li {
+      &:before {
+        border-left: 1px solid $lightgray;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        top: 0;
+      }
+
+      &:first-child:before {
+        top: 13px;
+      }
+
+      &:last-child:before {
+        bottom: calc(100% - 14px);
+      }
+
+      &:not(.active):hover a:before {
+        content: '';
+        border-radius: 50%;
+        left: -3px;
+        top: 12px;
+        background: $lightgray;
+        position: absolute;
+        width: 6px;
+        height: 6px;
+      }
+    }
+  }
+
+}
+
+aio-toc.embedded > div.collapsed li.secondary {
+  display: none;
+}
diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss
index 430e3af12d..b46e0815b8 100755
--- a/aio/src/styles/_constants.scss
+++ b/aio/src/styles/_constants.scss
@@ -1,26 +1,117 @@
-$small-breakpoint-width: 840px;
-$unit: 8px;
-
 // TYPOGRAPHY
 $main-font: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
 $code-font: "Droid Sans Mono", monospace;
 
+// Z-LAYER
+$layer-1: 1;
+$layer-2: 2;
+$layer-3: 3;
+$layer-4: 4;
+$layer-5: 5;
+
 // COLOR PALETTE
 $blue: #1976D2;
+$accentblue: #1E88E5;
 $brightred: #DD0031;
 $darkred: #C3002F;
 $white: #FFFFFF;
 $offwhite: #FAFAFA;
 $backgroundgray: #F1F1F1;
 $lightgray: #DBDBDB;
-$mediumgray: #7E7E7E;
+$mist: #ECEFF1;
+$mediumgray: #6e6e6e;
 $darkgray: #333;
 $black: #0A1014;
-$codegreen: #17ff0b;
-$green-800: #2E7D32;
 $orange: #FF9800;
 $anti-pattern: $brightred;
 
+// API & CODE COLORS
+$amber-700: #FFA000;
+$blue-400: #42A5F5;
+$blue-500: #2196F3;
+$blue-600: #1E88E5;
+$blue-800: #1565C0;
+$blue-900: #0D47A1;
+$blue-grey-50: #ECEFF1;
+$blue-grey-100: #CFD8DC;
+$blue-grey-200: #B0BEC5;
+$blue-grey-300: #90A4AE;
+$blue-grey-400: #78909C;
+$blue-grey-500: #607D8B;
+$blue-grey-600: #546E7A;
+$blue-grey-700: #455A64;
+$blue-grey-800: #37474F;
+$blue-grey-900: #263238;
+$codegreen: #17ff0b;
+$green-500: #4CAF50;
+$green-800: #2E7D32;
+$light-green-600: #7CB342;
+$pink-600: #D81B60;
+$purple-600: #8E24AA;
+$teal-500: #009688;
+$lightgrey: #F5F6F7;
+
 // GRADIENTS
 $bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
 $redgradient: linear-gradient(145deg,$darkred,$brightred);
+
+// API LABEL COLOR AND SYMBOLS MAP
+$api-symbols: (
+  all: (
+    content: ' ',
+    background: $white
+  ),
+  decorator: (
+    content: '@',
+    background: $blue-800
+  ),
+  directive: (
+    content: 'D',
+    background: $pink-600
+  ),
+  pipe: (
+    content: 'P',
+    background: $blue-grey-600
+  ),
+  class: (
+    content: 'C',
+    background: $blue-500
+  ),
+  interface: (
+    content: 'I',
+    background: $teal-500
+  ),
+  function: (
+    content: 'F',
+    background: $green-500
+  ),
+  enum: (
+    content: 'E',
+    background: $amber-700
+  ),
+  const: (
+    content: 'K',
+    background: $mediumgray
+  ),
+  let: (
+    content: 'K',
+    background: $mediumgray
+  ),
+  var: (
+    content: 'K',
+    background: $mediumgray
+  ),
+  type-alias: (
+    content: 'T',
+    background: $light-green-600
+  ),
+  module: (
+    content: 'Pk',
+    background: $purple-600
+  )
+);
+
+// OTHER
+$small-breakpoint-width: 840px;
+$phone-breakpoint: 480px;
+$tablet-breakpoint: 800px;
\ No newline at end of file
diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss
index d467eeeae3..a265208ffd 100644
--- a/aio/src/styles/_mixins.scss
+++ b/aio/src/styles/_mixins.scss
@@ -2,7 +2,7 @@
 
              Media queries
 
- To use these, put this snippet in the approriate selector:
+ To use these, put this snippet in the appropriate selector:
 
      @include bp(tiny) {
          background-color: purple;
@@ -56,4 +56,20 @@
     padding: 20px;
     margin: 0 auto; // was 24
     border: 0.5px solid $lightgray;
+}
+
+// INFO CARD SKELETON
+@mixin card($height, $width) {
+  height: $height;
+  width: $width;
+  background-color: $white;
+  border-radius: 4px;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-sizing: border-box;
+  transition: box-shadow .5s;
+
+  &:hover {
+    box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
+    text-decoration: none;
+  }
 }
\ No newline at end of file
diff --git a/aio/src/styles/main.scss b/aio/src/styles/main.scss
index 50893596ec..069e955e1d 100755
--- a/aio/src/styles/main.scss
+++ b/aio/src/styles/main.scss
@@ -2,7 +2,7 @@
 @import '~@angular/material/theming';
 @import './ng-io-theme';
 
-// import global variables /
+// import global variables
 @import './constants';
 
 // import global mixins
@@ -11,25 +11,6 @@
 // import directories
 @import './0-base/base-dir';
 @import './1-layouts/layouts-dir';
-@import'./2-modules/modules-dir';
+@import './2-modules/modules-dir';
 
-@import 'translator';
-
-// import additional scss
-
-// ********************************************************* //
-
-[md-button], [md-raised-button], [mat-button], [mat-raised-button] {
-  text-transform: uppercase;
-}
-
-.docs-primary-header {
-  padding-left: 20px;
-}
-
-h1.docs-primary-header, h1 .docs-primary-header{
-    font-size: 30px;
-    font-weight: 300;
-    margin: 0;
-    padding: 30px;
-}
+@import './translator';
diff --git a/aio/src/styles/ng-io-theme.scss b/aio/src/styles/ng-io-theme.scss
index 26ebce0455..1b1cca8604 100644
--- a/aio/src/styles/ng-io-theme.scss
+++ b/aio/src/styles/ng-io-theme.scss
@@ -21,14 +21,3 @@ $ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 @include angular-material-theme($ng-io-theme);
-
-//TODO: define custom theme, old values from Style guide:
-// @material-header: #455A64;
-// @material-header-darker: #37474F;
-// @material-header-dark: #263238;
-// @material-200: #EEEEEE;
-// @material-700: #616161;
-// @material-800: #424242;
-// @material-900: #212121;
-// @black: #000000;
-// @white: #FFFFFF;
diff --git a/aio/src/test-specs.ts b/aio/src/test-specs.ts
new file mode 100644
index 0000000000..296d19078a
--- /dev/null
+++ b/aio/src/test-specs.ts
@@ -0,0 +1,4 @@
+// Find all the tests.
+const context = (<any>require).context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/aio/src/test.ts b/aio/src/test.ts
index 9bf72267e9..722acc0395 100644
--- a/aio/src/test.ts
+++ b/aio/src/test.ts
@@ -1,5 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
+// Test dependencies.
 import 'zone.js/dist/long-stack-trace-zone';
 import 'zone.js/dist/proxy.js';
 import 'zone.js/dist/sync-test';
@@ -12,9 +13,25 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
+// List vendors here to increase test rebuild performance.
+import '@angular/common';
+import '@angular/common/testing';
+import '@angular/core/';
+import '@angular/core/testing';
+import '@angular/platform-browser';
+import '@angular/platform-browser/testing';
+import '@angular/platform-browser/animations';
+import '@angular/platform-browser-dynamic';
+import '@angular/platform-browser-dynamic/testing';
+import '@angular/http';
+import '@angular/http/testing';
+import '@angular/animations';
+import '@angular/material';
+import '@angular/service-worker';
+import 'rxjs'; // tslint:disable-line
+
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare var __karma__: any;
-declare var require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = function () {};
@@ -24,9 +41,9 @@ getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting()
 );
+
+declare var System: any;
 // Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
-// Finally, start Karma to run the tests.
-__karma__.start();
+System.import('./test-specs.ts')
+  // Finally, start Karma to run the tests.
+  .then(() => __karma__.start());
diff --git a/aio/src/testing/location.service.ts b/aio/src/testing/location.service.ts
index 49c47b30d5..2656769b95 100644
--- a/aio/src/testing/location.service.ts
+++ b/aio/src/testing/location.service.ts
@@ -2,12 +2,21 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 export class MockLocationService {
   urlSubject = new BehaviorSubject<string>(this.initialUrl);
-  currentUrl = this.urlSubject.asObservable();
+  currentUrl = this.urlSubject.asObservable().map(url => this.stripSlashes(url));
+  // strip off query and hash
+  currentPath = this.currentUrl.map(url => url.match(/[^?#]*/)[0]);
   search = jasmine.createSpy('search').and.returnValue({});
   setSearch = jasmine.createSpy('setSearch');
-  go = jasmine.createSpy('Location.go');
+  go = jasmine.createSpy('Location.go').and
+              .callFake((url: string) => this.urlSubject.next(url));
+  goExternal = jasmine.createSpy('Location.goExternal');
   handleAnchorClick = jasmine.createSpy('Location.handleAnchorClick')
       .and.returnValue(false); // prevent click from causing a browser navigation
+
   constructor(private initialUrl) {}
+
+  private stripSlashes(url: string) {
+    return url.replace(/^\/+/, '').replace(/\/+(\?|#|$)/, '$1');
+  }
 }
 
diff --git a/aio/src/testing/nav-map-json-response.ts b/aio/src/testing/nav-map-json-response.ts
index 8fd7fc6762..a55acb6b50 100644
--- a/aio/src/testing/nav-map-json-response.ts
+++ b/aio/src/testing/nav-map-json-response.ts
@@ -26,7 +26,7 @@ export function getTestNavMapResponse(): Response {
           "tooltip": "Introduction to the Tour of Heroes tutorial"
         },
         {
-          "docId": "tutorial/toh-1",
+          "docId": "tutorial/toh-pt1",
           "navTitle": "The Hero Editor",
           "tooltip": "Build a simple hero editor."
         }
diff --git a/aio/src/testing/search.service.ts b/aio/src/testing/search.service.ts
index ed1eb96ea4..e004487db9 100644
--- a/aio/src/testing/search.service.ts
+++ b/aio/src/testing/search.service.ts
@@ -6,5 +6,4 @@ export class MockSearchService {
   initWorker = jasmine.createSpy('initWorker');
   loadIndex = jasmine.createSpy('loadIndex');
   search = jasmine.createSpy('search');
-  hideResults = jasmine.createSpy('hideResults');
 }
diff --git a/aio/src/testing/sw-update-notifications.service.ts b/aio/src/testing/sw-update-notifications.service.ts
deleted file mode 100644
index 30c0cefa1d..0000000000
--- a/aio/src/testing/sw-update-notifications.service.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export class MockSwUpdateNotificationsService {
-  enable = jasmine.createSpy('MockSwUpdateNotificationsService.enable');
-  disable = jasmine.createSpy('MockSwUpdateNotificationsService.disable');
-}
diff --git a/aio/src/testing/sw-updates.service.ts b/aio/src/testing/sw-updates.service.ts
deleted file mode 100644
index 2553674d0f..0000000000
--- a/aio/src/testing/sw-updates.service.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/take';
-
-
-export class MockSwUpdatesService {
-  $$activateUpdateSubj = new Subject<boolean>();
-  $$isUpdateAvailableSubj = new Subject<boolean>();
-  isUpdateAvailable = this.$$isUpdateAvailableSubj.distinctUntilChanged();
-
-  activateUpdate(): Promise<boolean> {
-    return new Promise(resolve => {
-      this.$$activateUpdateSubj
-          // Better simulate what actually happens with the real ServiceWorker.
-          .take(1)
-          .do(() => this.$$isUpdateAvailableSubj.next(false))
-          .subscribe(resolve);
-    });
-  }
-}
diff --git a/aio/src/tsconfig.app.json b/aio/src/tsconfig.app.json
index 752114294d..c486ae3a7c 100644
--- a/aio/src/tsconfig.app.json
+++ b/aio/src/tsconfig.app.json
@@ -4,11 +4,13 @@
     "outDir": "../out-tsc/app",
     "module": "es2015",
     "baseUrl": "",
-    "types": []
+    "types": [],
+    "importHelpers": true
   },
   "exclude": [
     "testing/**/*",
     "test.ts",
+    "test-specs.ts",
     "**/*.spec.ts"
   ]
 }
diff --git a/aio/tools/RELEASE.md b/aio/tools/RELEASE.md
new file mode 100644
index 0000000000..2171bdf6d6
--- /dev/null
+++ b/aio/tools/RELEASE.md
@@ -0,0 +1,19 @@
+# Docs releases
+
+This document explains how to update the documentation examples after an Angular release. This is only needed for major and minor versions.
+
+All the packages for the docs' examples are specified in `/aio/tools/examples/shared/package.json`
+
+**1)** So within the `shared` folder, you need to issue the following command:
+
+```
+$ yarn upgrade-interactive --tilde
+```
+
+There, select all the packages that are updated on the new Angular release.
+
+**2)** Changes to the tsconfig.json? There is one to update at `/aio/tools/examples/shared/boilerplate/src/tsconfig.json`
+
+**3)** The file `/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.js` contains the configuration for plunkers. It has some hardcoded versions that could be updated.
+
+**4)** As in step 3, more hardcoded versions at `/aio/tools/plunker-builder/translator/rules/indexHtml.js`
diff --git a/aio/tools/cli-patches/ngo.patch b/aio/tools/cli-patches/ngo.patch
new file mode 100644
index 0000000000..44c74b987f
--- /dev/null
+++ b/aio/tools/cli-patches/ngo.patch
@@ -0,0 +1,14 @@
+--- node_modules/@angular/cli/models/webpack-configs/production.js	2017-05-12 14:30:22.000000000 -0700
++++ node_modules/@angular/cli/models/webpack-configs/production.js	2017-05-12 14:32:23.000000000 -0700
+@@ -68,6 +68,11 @@
+     }
+     return {
+         entry: entryPoints,
++        module: {
++            rules: [
++                {"test": /\.js$/, "use": {loader: "ngo/webpack-loader", options: { sourceMap: true }}},
++            ]
++        },
+         plugins: [
+             new webpack.EnvironmentPlugin({
+                 'NODE_ENV': 'production'
diff --git a/aio/tools/cli-patches/patch.js b/aio/tools/cli-patches/patch.js
new file mode 100644
index 0000000000..b5735eee16
--- /dev/null
+++ b/aio/tools/cli-patches/patch.js
@@ -0,0 +1,12 @@
+const fs = require('fs');
+const sh = require('shelljs');
+
+PATCH_LOCK = 'node_modules/@angular/cli/models/webpack-configs/.patched';
+
+if (!fs.existsSync(PATCH_LOCK)) {
+  sh.exec('patch -p0 -i tools/cli-patches/ngo.patch');
+  sh.exec('patch -p0 -i tools/cli-patches/purify.patch');
+  sh.exec('patch -p0 -i tools/cli-patches/scope-hoisting.patch');
+  sh.exec('patch -p0 -i tools/cli-patches/uglify-config.patch');
+  sh.touch(PATCH_LOCK);
+}
diff --git a/aio/tools/cli-patches/purify.patch b/aio/tools/cli-patches/purify.patch
new file mode 100644
index 0000000000..fbe8484169
--- /dev/null
+++ b/aio/tools/cli-patches/purify.patch
@@ -0,0 +1,10 @@
+--- node_modules/@angular/cli/models/webpack-configs/production.js	2017-05-11 12:10:46.000000000 -0700
++++ node_modules/@angular/cli/models/webpack-configs/production.js	2017-05-11 12:10:11.000000000 -0700
+@@ -73,6 +73,7 @@
+                 'NODE_ENV': 'production'
+             }),
+             new webpack.HashedModuleIdsPlugin(),
++            new (require("ngo").PurifyPlugin)(),
+             new webpack.optimize.UglifyJsPlugin({
+                 mangle: { screw_ie8: true },
+                 compress: { screw_ie8: true, warnings: buildOptions.verbose },
diff --git a/aio/tools/cli-patches/scope-hoisting.patch b/aio/tools/cli-patches/scope-hoisting.patch
new file mode 100644
index 0000000000..15c05ce456
--- /dev/null
+++ b/aio/tools/cli-patches/scope-hoisting.patch
@@ -0,0 +1,10 @@
+--- node_modules/@angular/cli/models/webpack-configs/production.js	2017-05-24 15:36:43.000000000 -0700
++++ node_modules/@angular/cli/models/webpack-configs/production.js	2017-05-24 15:37:04.000000000 -0700
+@@ -85,6 +85,7 @@
+                 'NODE_ENV': 'production'
+             }),
+             new webpack.HashedModuleIdsPlugin(),
++            new webpack.optimize.ModuleConcatenationPlugin(),
+             new (require("ngo").PurifyPlugin)(),
+             new webpack.optimize.UglifyJsPlugin({
+                 mangle: true,
diff --git a/aio/tools/cli-patches/uglify-config.patch b/aio/tools/cli-patches/uglify-config.patch
new file mode 100644
index 0000000000..3d17d3c9d4
--- /dev/null
+++ b/aio/tools/cli-patches/uglify-config.patch
@@ -0,0 +1,11 @@
+--- node_modules/@angular/cli/models/webpack-configs/production.js	2017-05-24 15:36:43.000000000 -0700
++++ node_modules/@angular/cli/models/webpack-configs/production.js	2017-05-24 15:37:04.000000000 -0700
+@@ -82,7 +82,7 @@
+             new (require("purify/purify-webpack-plugin"))(),
+             new webpack.optimize.UglifyJsPlugin({
+                 mangle: { screw_ie8: true },
+-                compress: { screw_ie8: true, warnings: buildOptions.verbose },
++                compress: { screw_ie8: true, warnings: buildOptions.verbose, pure_getters: true },
+                 sourceMap: buildOptions.sourcemaps,
+                 comments: false
+             })
diff --git a/aio/tools/example-zipper/customizer/package-json/base.json b/aio/tools/example-zipper/customizer/package-json/base.json
new file mode 100644
index 0000000000..d916146ff7
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/base.json
@@ -0,0 +1,41 @@
+{
+  "scripts": [
+    { "name": "lint" }
+  ],
+  "dependencies": [
+    "@angular/animations",
+    "@angular/common",
+    "@angular/compiler",
+    "@angular/compiler-cli",
+    "@angular/core",
+    "@angular/forms",
+    "@angular/http",
+    "@angular/platform-browser",
+    "@angular/platform-browser-dynamic",
+    "@angular/platform-server",
+    "@angular/router",
+    "@angular/tsc-wrapped",
+    "@angular/upgrade",
+    "angular-in-memory-web-api",
+    "core-js",
+    "rxjs",
+    "zone.js"
+  ],
+  "devDependencies": [
+    "@types/jasmine",
+    "@types/node",
+    "jasmine",
+    "jasmine-core",
+    "karma",
+    "karma-chrome-launcher",
+    "karma-cli",
+    "karma-jasmine",
+    "karma-jasmine-html-reporter",
+    "karma-phantomjs-launcher",
+    "lodash",
+    "phantomjs-prebuilt",
+    "protractor",
+    "tslint",
+    "typescript"
+  ]
+}
diff --git a/aio/tools/example-zipper/customizer/package-json/cli.json b/aio/tools/example-zipper/customizer/package-json/cli.json
new file mode 100644
index 0000000000..8c367c67d6
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/cli.json
@@ -0,0 +1,14 @@
+{
+  "scripts": [
+    { "name": "ng", "command": "ng" },
+    { "name": "start", "command": "ng serve" },
+    { "name": "test", "command": "ng test" },
+    { "name": "lint", "command": "ng lint" },
+    { "name": "e2e", "command": "ng e2e" }
+  ],
+  "dependencies": [],
+  "devDependencies": [
+    "@angular/cli",
+    "ts-node"
+  ]
+}
diff --git a/aio/tools/example-zipper/customizer/package-json/package.json b/aio/tools/example-zipper/customizer/package-json/package.json
new file mode 100644
index 0000000000..a4afa9a41e
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "angular-io-example",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Example project from an angular.io guide.",
+  "scripts": {
+
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+
+  },
+  "devDependencies": {
+
+  },
+  "repository": {}
+}
diff --git a/aio/tools/example-zipper/customizer/package-json/packageJsonCustomizer.js b/aio/tools/example-zipper/customizer/package-json/packageJsonCustomizer.js
new file mode 100644
index 0000000000..9a086619be
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/packageJsonCustomizer.js
@@ -0,0 +1,55 @@
+'use strict';
+
+const path = require('canonical-path');
+
+const examplesPath = path.resolve(__dirname, '../../../examples');
+const packageFolder = path.resolve(__dirname);
+
+class PackageJsonCustomizer {
+  constructor() {
+    this.dependenciesPackageJson = require(path.join(examplesPath, '/shared/package.json'));
+    this.scriptsPackageJson = require(path.join(examplesPath, '/shared/boilerplate/package.json'));
+    this.basePackageJson = require(`${packageFolder}/base.json`);
+  }
+
+  generate(type = 'systemjs') {
+    let packageJson = require(`${packageFolder}/package.json`);
+    let rules = require(`${packageFolder}/${type}.json`);
+
+    this._mergeJSON(rules, this.basePackageJson);
+
+    rules.scripts.forEach((r) => {
+      const scriptName = r.name;
+      const script = this.scriptsPackageJson.scripts[scriptName];
+      const finalName = r.rename ? r.rename : r.name;
+      const finalScript = r.command ? r.command : script;
+      packageJson.scripts[finalName] = finalScript;
+    });
+
+    rules.dependencies.forEach((name) => {
+      const version = this.dependenciesPackageJson.dependencies[name];
+      packageJson.dependencies[name] = version;
+    });
+
+    rules.devDependencies.forEach((name) => {
+      const version = this.dependenciesPackageJson.devDependencies[name];
+      packageJson.devDependencies[name] = version;
+    });
+
+    return JSON.stringify(packageJson, null, 2);
+  }
+
+  _mergeJSON(json1,json2) {
+    var result = json1 ;
+    for (var prop in json2)
+    {
+        if (json2.hasOwnProperty(prop))
+        {
+            result[prop] = (result[prop].concat(json2[prop])).sort();
+        }
+    }
+    return result;
+  }
+}
+
+module.exports = PackageJsonCustomizer;
diff --git a/aio/tools/example-zipper/customizer/package-json/systemjs.json b/aio/tools/example-zipper/customizer/package-json/systemjs.json
new file mode 100644
index 0000000000..535bf0cc52
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/systemjs.json
@@ -0,0 +1,44 @@
+{
+  "scripts": [
+    { "name": "build" },
+    { "name": "build:watch" },
+    { "name": "serve" },
+    { "name": "prestart" },
+    { "name": "start" },
+    { "name": "pretest" },
+    { "name": "test" },
+    { "name": "pretest:once" },
+    { "name": "test:once" },
+    { "name": "build:upgrade" },
+    { "name": "serve:upgrade" },
+    { "name": "build:aot" },
+    { "name": "serve:aot" },
+    { "name": "build:babel" },
+    { "name": "copy-dist-files" },
+    { "name": "i18n" }
+  ],
+  "dependencies": [
+    "systemjs"
+  ],
+  "devDependencies": [
+    "@types/angular",
+    "@types/angular-animate",
+    "@types/angular-cookies",
+    "@types/angular-mocks",
+    "@types/angular-resource",
+    "@types/angular-route",
+    "@types/angular-sanitize",
+    "babel-cli",
+    "babel-preset-angular2",
+    "babel-preset-es2015",
+    "canonical-path",
+    "http-server",
+    "concurrently",
+    "lite-server",
+    "rollup",
+    "rollup-plugin-commonjs",
+    "rollup-plugin-node-resolve",
+    "rollup-plugin-uglify",
+    "source-map-explorer"
+  ]
+}
diff --git a/aio/tools/example-zipper/customizer/package-json/webpack.json b/aio/tools/example-zipper/customizer/package-json/webpack.json
new file mode 100644
index 0000000000..377d549e74
--- /dev/null
+++ b/aio/tools/example-zipper/customizer/package-json/webpack.json
@@ -0,0 +1,26 @@
+{
+  "scripts": [
+    { "name": "start:webpack", "rename": "start" },
+    { "name": "test:webpack", "rename": "test" },
+    { "name": "build:webpack", "rename": "build" }
+  ],
+  "dependencies": [],
+  "devDependencies": [
+    "angular2-template-loader",
+    "awesome-typescript-loader",
+    "css-loader",
+    "extract-text-webpack-plugin",
+    "file-loader",
+    "html-loader",
+    "html-webpack-plugin",
+    "karma-sourcemap-loader",
+    "karma-webpack",
+    "null-loader",
+    "raw-loader",
+    "rimraf",
+    "style-loader",
+    "webpack",
+    "webpack-dev-server",
+    "webpack-merge"
+  ]
+}
diff --git a/aio/tools/example-zipper/exampleZipper.js b/aio/tools/example-zipper/exampleZipper.js
new file mode 100644
index 0000000000..dace4b80f8
--- /dev/null
+++ b/aio/tools/example-zipper/exampleZipper.js
@@ -0,0 +1,144 @@
+'use strict';
+
+// Canonical path provides a consistent path (i.e. always forward slashes) across different OSes
+const path = require('canonical-path');
+const archiver = require('archiver');
+const fs = require('fs-extra');
+const globby = require('globby');
+
+const PackageJsonCustomizer = require('./customizer/package-json/packageJsonCustomizer');
+const regionExtractor = require('../transforms/examples-package/services/region-parser');
+
+class ExampleZipper {
+  constructor(sourceDirName, outputDirName) {
+    this.examplesPackageJson = path.join(__dirname, '../examples/shared/package.json');
+    this.examplesSystemjsConfig = path.join(__dirname, '../examples/shared/boilerplate/src/systemjs.config.js');
+    this.examplesSystemjsLoaderConfig = path.join(__dirname, '../examples/shared/boilerplate/src/systemjs-angular-loader.js');
+    this.exampleTsconfig = path.join(__dirname, '../examples/shared/boilerplate/src/tsconfig.json');
+    this.customizer = new PackageJsonCustomizer();
+
+    let gpathPlnkr = path.join(sourceDirName, '**/*plnkr.json');
+    let gpathZipper = path.join(sourceDirName, '**/zipper.json');
+    let configFileNames = globby.sync([gpathPlnkr, gpathZipper], { ignore: ['**/node_modules/**'] });
+    configFileNames.forEach((configFileName) => {
+      this._zipExample(configFileName, sourceDirName, outputDirName);
+    });
+  }
+
+  _changeTypeRoots(tsconfig) {
+    return tsconfig.replace('../../../', '../');
+  }
+
+  _createZipArchive(zipFileName) {
+    let dirName = path.dirname(zipFileName);
+    fs.ensureDirSync(dirName);
+    let output = fs.createWriteStream(zipFileName);
+    let archive = archiver('zip');
+
+    archive.on('error', function (err) {
+      throw err;
+    });
+
+    archive.pipe(output);
+    return archive;
+  }
+
+  _zipExample(configFileName, sourceDirName, outputDirName) {
+    let json = require(configFileName, 'utf-8');
+    const exampleType = json.type || 'systemjs';
+    const basePath = json.basePath || '';
+    const jsonFileName = configFileName.replace(/^.*[\\\/]/, '');
+    let relativeDirName = path.dirname(path.relative(sourceDirName, configFileName));
+    let exampleZipName;
+
+    if (relativeDirName.indexOf('/') !== -1) { // Special example
+      exampleZipName = relativeDirName.split('/')[0];
+    } else {
+      exampleZipName = jsonFileName.replace(/(plnkr|zipper).json/, relativeDirName);
+    }
+
+    const exampleDirName = path.dirname(configFileName);
+    const outputFileName = path.join(outputDirName, relativeDirName, exampleZipName + '.zip');
+    let defaultIncludes = ['**/*.ts', '**/*.js', '**/*.es6', '**/*.css', '**/*.html', '**/*.md', '**/*.json', '**/*.png'];
+    let alwaysIncludes = ['bs-config.json', 'tslint.json', 'karma-test-shim.js', 'karma.conf.js', 'src/testing/**/*', 'src/.babelrc'];
+    var defaultExcludes = [
+      '!**/bs-config.e2e.json',
+      '!**/*plnkr.*',
+      '!**/*zipper.*',
+      '!**/systemjs.config.js',
+      '!**/npm-debug.log',
+      '!**/package.json',
+      '!**/example-config.json',
+      '!**/wallaby.js',
+      '!**/tsconfig.json',
+      '!**/package.webpack.json',
+      // AoT related files
+      '!**/aot/**/*.*',
+      '!**/*-aot.*'
+    ];
+
+    if (json.files) {
+      if (json.files.length > 0) {
+        json.files = json.files.map(file => {
+          if (file.startsWith('!')) {
+            if (file.startsWith('!**')) {
+              return file;
+            }
+
+            return '!' + basePath + file.substr(1);
+          }
+
+          return basePath + file;
+        });
+
+        if (json.files[0].substr(0, 1) === '!') {
+          json.files = defaultIncludes.concat(json.files);
+        }
+      }
+    } else {
+      json.files = defaultIncludes;
+    }
+
+    json.files = json.files.concat(alwaysIncludes);
+
+    let gpaths = json.files.map((fileName) => {
+      fileName = fileName.trim();
+      if (fileName.substr(0, 1) === '!') {
+        return '!' + path.join(exampleDirName, fileName.substr(1));
+      } else {
+        return path.join(exampleDirName, fileName);
+      }
+    });
+
+    Array.prototype.push.apply(gpaths, defaultExcludes);
+
+    let fileNames = globby.sync(gpaths, { ignore: ['**/node_modules/**']});
+
+    let zip = this._createZipArchive(outputFileName);
+    fileNames.forEach((fileName) => {
+      let relativePath = path.relative(exampleDirName, fileName);
+      let content = fs.readFileSync(fileName, 'utf8');
+      let extn = path.extname(fileName).substr(1);
+      // if we don't need to clean up the file then we can do the following.
+      // zip.append(fs.createReadStream(fileName), { name: relativePath });
+      let output = regionExtractor()(content, extn).contents;
+
+      zip.append(output, { name: relativePath } )
+    });
+
+    // we need the package.json from _examples root, not the _boilerplate one
+    zip.append(this.customizer.generate(exampleType), { name: 'package.json' });
+    // also a systemjs config
+    if (!json.removeSystemJsConfig) {
+      zip.append(fs.readFileSync(this.examplesSystemjsConfig, 'utf8'), { name: 'src/systemjs.config.js' });
+      zip.append(fs.readFileSync(this.examplesSystemjsLoaderConfig, 'utf8'), { name: 'src/systemjs-angular-loader.js' });
+    }
+    // a modified tsconfig
+    let tsconfig = fs.readFileSync(this.exampleTsconfig, 'utf8');
+    zip.append(this._changeTypeRoots(tsconfig), {name: 'src/tsconfig.json'});
+
+    zip.finalize();
+  }
+}
+
+module.exports = ExampleZipper;
diff --git a/aio/tools/example-zipper/generateZips.js b/aio/tools/example-zipper/generateZips.js
new file mode 100644
index 0000000000..3054386107
--- /dev/null
+++ b/aio/tools/example-zipper/generateZips.js
@@ -0,0 +1,7 @@
+const ExampleZipper = require('./exampleZipper');
+const path = require('canonical-path');
+
+const EXAMPLES_PATH = path.join(__dirname, '../../content/examples');
+const ZIPS_PATH = path.join(__dirname, '../../src/generated/zips');
+
+new ExampleZipper(EXAMPLES_PATH, ZIPS_PATH);
diff --git a/aio/tools/examples/add-example-boilerplate.js b/aio/tools/examples/add-example-boilerplate.js
deleted file mode 100644
index 263071415f..0000000000
--- a/aio/tools/examples/add-example-boilerplate.js
+++ /dev/null
@@ -1,149 +0,0 @@
-const fs = fsExtra = require('fs-extra');
-const globby = require('globby');
-const path = require('path');
-const Q = require("q");
-const shelljs = require('shelljs');
-
-const EXAMPLES_PATH = path.join(__dirname, '/../../content/examples');
-const SHARED_PATH = path.join(__dirname, '/shared');
-const BOILERPLATE_PATH = path.join(SHARED_PATH, 'boilerplate');
-const EXAMPLES_TESTING_PATH = path.join(EXAMPLES_PATH, 'testing');
-
-const files = {
-  exampleBoilerplate: [
-    'src/styles.css',
-    'src/systemjs-angular-loader.js',
-    'src/systemjs.config.js',
-    'src/tsconfig.json',
-    'bs-config.json',
-    'bs-config.e2e.json',
-    'package.json',
-    'tslint.json'
-  ],
-  exampleUnitTestingBoilerplate: [
-    'src/browser-test-shim.js',
-    'karma-test-shim.js',
-    'karma.conf.js'
-  ],
-  exampleConfigFilename: 'example-config.json'
-};
-
-// requires admin access because it adds symlinks
-function add() {
-  const realPath = path.join(SHARED_PATH, '/node_modules');
-  const nodeModulesPaths = getNodeModulesPaths(EXAMPLES_PATH);
-
-  // we install the examples modules first
-  installNodeModules();
-
-  nodeModulesPaths.map((linkPath) => {
-    console.log("symlinking " + linkPath + ' -> ' + realPath)
-    fs.ensureSymlinkSync(realPath, linkPath);
-  });
-
-  return copyExampleBoilerplate();
-}
-
-function copyExampleBoilerplate() {
-  console.log('Copying example boilerplate files');
-  const examplePaths = getExamplePaths(EXAMPLES_PATH);
-  // Make boilerplate files read-only to avoid that they be edited by mistake.
-  const destFileMode = '444';
-  let foo = copyFiles(files.exampleBoilerplate, BOILERPLATE_PATH, examplePaths, destFileMode)
-    // copy the unit test boilerplate
-    .then(() => {
-      const unittestPaths = getUnitTestingPaths(EXAMPLES_PATH);
-      return copyFiles(files.exampleUnitTestingBoilerplate, EXAMPLES_TESTING_PATH, unittestPaths, destFileMode);
-    })
-    .catch((err) => {
-      console.error(err);
-      throw err;
-    });
-}
-
-// Copies fileNames into destPaths, setting the mode of the
-// files at the destination as optional_destFileMode if given.
-// returns a promise
-function copyFiles(fileNames, originPath, destPaths, optional_destFileMode) {
-  const copy = Q.denodeify(fsExtra.copy);
-  const chmod = Q.denodeify(fsExtra.chmod);
-  let copyPromises = [];
-  destPaths.map((destPath) => {
-    fileNames.forEach((fileName) => {
-      const originName = path.join(originPath, fileName);
-      const destName = path.join(destPath, fileName);
-      let p = copy(originName, destName, { clobber: true});
-      if(optional_destFileMode !== undefined) {
-        p = p.then(() => {
-          return chmod(destName, optional_destFileMode);
-        });
-      }
-      copyPromises.push(p);
-    });
-  });
-
-  return Q.all(copyPromises);
-}
-
-function getExamplePaths(basePath, includeBase) {
-  // includeBase defaults to false
-  return getPaths(basePath, files.exampleConfigFilename, includeBase);
-}
-
-function getFilenames(basePath, filename, includeBase) {
-  let includePatterns = [path.join(basePath, "**/" + filename)];
-  if (!includeBase) {
-    // ignore (skip) the top level version.
-    includePatterns.push("!" + path.join(basePath, "/" + filename));
-  }
-  // ignore (skip) the files in BOILERPLATE_PATH.
-  includePatterns.push("!" + path.join(BOILERPLATE_PATH, "/" + filename));
-  const nmPattern = path.join(basePath, "**/node_modules/**");
-  return globby.sync(includePatterns, {ignore: [nmPattern]});
-}
-
-function getNodeModulesPaths(basePath) {
-  return getExamplePaths(basePath).map((examplePath) => {
-    return path.join(examplePath, "/node_modules");
-  });
-}
-
-function getPaths(basePath, filename, includeBase) {
-  const filenames = getFilenames(basePath, filename, includeBase);
-  return filenames.map((fileName) => {
-    return path.dirname(fileName);
-  });
-}
-
-function getUnitTestingPaths(basePath) {
-  const examples = getPaths(basePath, files.exampleConfigFilename, true);
-  return examples.filter((example) => {
-    const exampleConfig = fs.readJsonSync(`${example}/${files.exampleConfigFilename}`, {throws: false});
-    return exampleConfig && !!exampleConfig.unittesting;
-  });
-}
-
-function installNodeModules() {
-  shelljs.exec('yarn', {cwd: SHARED_PATH});
-}
-
-function remove() {
-  shelljs.exec('git clean -xdf', {cwd: EXAMPLES_PATH});
-}
-
-module.exports = {
-  add: add,
-  remove: remove
-};
-
-// being executed from shell script
-switch (process.argv[2]) {
-  case 'add':
-    add();
-    break;
-  case 'remove':
-    remove();
-    break;
-  default:
-    console.error(`There is no function with the name: ${process.argv}`);
-}
diff --git a/aio/tools/examples/example-boilerplate.js b/aio/tools/examples/example-boilerplate.js
new file mode 100644
index 0000000000..7127f1c968
--- /dev/null
+++ b/aio/tools/examples/example-boilerplate.js
@@ -0,0 +1,140 @@
+const fs = require('fs-extra');
+const glob = require('glob');
+const path = require('canonical-path');
+const shelljs = require('shelljs');
+const yargs = require('yargs');
+
+const SHARED_PATH = path.resolve(__dirname, 'shared');
+const SHARED_NODE_MODULES_PATH = path.resolve(SHARED_PATH, 'node_modules');
+const BOILERPLATE_BASE_PATH = path.resolve(SHARED_PATH, 'boilerplate');
+const EXAMPLES_BASE_PATH = path.resolve(__dirname, '../../content/examples');
+const TESTING_BASE_PATH = path.resolve(EXAMPLES_BASE_PATH, 'testing');
+
+const BOILERPLATE_SRC_PATHS = [
+  'src/styles.css',
+  'src/systemjs-angular-loader.js',
+  'src/systemjs.config.js',
+  'src/tsconfig.json',
+  'bs-config.json',
+  'bs-config.e2e.json',
+  'package.json',
+  'tslint.json'
+];
+
+const BOILERPLATE_TEST_PATHS = [
+  'src/browser-test-shim.js',
+  'karma-test-shim.js',
+  'karma.conf.js'
+];
+
+const ANGULAR_DIST_PATH = path.resolve(__dirname, '../../../dist');
+const ANGULAR_PACKAGES_PATH = path.resolve(ANGULAR_DIST_PATH, 'packages-dist');
+const ANGULAR_PACKAGES = [
+  'animations',
+  'common',
+  'compiler',
+  'compiler-cli',
+  'core',
+  'forms',
+  'http',
+  'platform-browser',
+  'platform-browser-dynamic',
+  'platform-server',
+  'router',
+  'upgrade',
+];
+const ANGULAR_TOOLS_PACKAGES_PATH = path.resolve(ANGULAR_DIST_PATH, 'tools', '@angular');
+const ANGULAR_TOOLS_PACKAGES = [
+  'tsc-wrapped'
+];
+
+const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
+
+class ExampleBoilerPlate {
+  /**
+   * Add boilerplate files to all the examples
+   *
+   * @param useLocal if true then overwrite the Angular library files with locally built ones
+   */
+  add(useLocal) {
+    // first install the shared node_modules
+    this.installNodeModules(SHARED_PATH);
+
+    // Replace the Angular packages with those from the dist folder, if necessary
+    if (useLocal) {
+      ANGULAR_PACKAGES.forEach(packageName => this.overridePackage(ANGULAR_PACKAGES_PATH, packageName));
+      ANGULAR_TOOLS_PACKAGES.forEach(packageName => this.overridePackage(ANGULAR_TOOLS_PACKAGES_PATH, packageName));
+    }
+
+    // Get all the examples folders, indicated by those that contain a `example-config.json` file
+    const exampleFolders = this.getFoldersContaining(EXAMPLES_BASE_PATH, EXAMPLE_CONFIG_FILENAME, 'node_modules');
+    exampleFolders.forEach(exampleFolder => {
+
+      // Link the node modules - requires admin access (on Windows) because it adds symlinks
+      const destinationNodeModules = path.resolve(exampleFolder, 'node_modules');
+      fs.ensureSymlinkSync(SHARED_NODE_MODULES_PATH, destinationNodeModules);
+
+      // Copy the boilerplate source files
+      BOILERPLATE_SRC_PATHS.forEach(filePath => this.copyFile(BOILERPLATE_BASE_PATH, exampleFolder, filePath));
+
+      // Copy the boilerplate test files (if the example is configured to do unit testing)
+      const exampleConfig = this.loadJsonFile(path.resolve(exampleFolder, EXAMPLE_CONFIG_FILENAME));
+      if (exampleConfig.unittesting) {
+        BOILERPLATE_TEST_PATHS.forEach(filePath => this.copyFile(TESTING_BASE_PATH, exampleFolder, filePath));
+      }
+    });
+  }
+
+  /**
+   * Remove all the boilerplate files from all the examples
+   */
+  remove() {
+    shelljs.exec('git clean -xdfq', {cwd: EXAMPLES_BASE_PATH});
+  }
+
+  main() {
+    yargs
+      .usage('$0 <cmd> [args]')
+      .command('add [--local]', 'add the boilerplate to each example',
+              { local: { describe: 'Use the locally built Angular libraries, rather than ones from  npm.' } },
+              argv => this.add(argv.local))
+      .command('remove', 'remove the boilerplate from each example', () => this.remove())
+      .demandCommand(1, 'Please supply a command from the list above')
+      .argv;
+  }
+
+  installNodeModules(basePath) {
+    shelljs.exec('yarn', {cwd: basePath});
+  }
+
+  overridePackage(basePath, packageName) {
+    const sourceFolder = path.resolve(basePath, packageName);
+    const destinationFolder = path.resolve(SHARED_NODE_MODULES_PATH, '@angular', packageName);
+    shelljs.rm('-rf', destinationFolder);
+    fs.ensureSymlinkSync(sourceFolder, destinationFolder);
+  }
+
+  getFoldersContaining(basePath, filename, ignore) {
+    const pattern = path.resolve(basePath, '**', filename);
+    const ignorePattern = path.resolve(basePath, '**', ignore, '**');
+    return glob.sync(pattern, { ignore: [ignorePattern] }).map(file => path.dirname(file));
+  }
+
+  copyFile(sourceFolder, destinationFolder, filePath) {
+    const sourcePath = path.resolve(sourceFolder, filePath);
+    const destinationPath = path.resolve(destinationFolder, filePath);
+    fs.copySync(sourcePath, destinationPath, { overwrite: true });
+    fs.chmodSync(destinationPath, 444);
+  }
+
+  loadJsonFile(filePath) {
+    return fs.readJsonSync(filePath, {throws: false}) || {};
+  }
+}
+
+module.exports = new ExampleBoilerPlate();
+
+// If this file was run directly then run the main function,
+if (require.main === module) {
+  module.exports.main();
+}
\ No newline at end of file
diff --git a/aio/tools/examples/example-boilerplate.spec.js b/aio/tools/examples/example-boilerplate.spec.js
new file mode 100644
index 0000000000..e5d075afd4
--- /dev/null
+++ b/aio/tools/examples/example-boilerplate.spec.js
@@ -0,0 +1,143 @@
+const exampleBoilerPlate = require('./example-boilerplate');
+const shelljs = require('shelljs');
+const fs = require('fs-extra');
+const glob = require('glob');
+const path = require('canonical-path');
+
+describe('example-boilerplate tool', () => {
+  describe('add', () => {
+    const numberOfBoilerPlateFiles = 8;
+    const numberOfBoilerPlateTestFiles = 3;
+    const exampleFolders = ['a/b', 'c/d'];
+
+    beforeEach(() => {
+      spyOn(exampleBoilerPlate, 'installNodeModules');
+      spyOn(exampleBoilerPlate, 'overridePackage');
+      spyOn(exampleBoilerPlate, 'getFoldersContaining').and.returnValue(exampleFolders);
+      spyOn(fs, 'ensureSymlinkSync');
+      spyOn(exampleBoilerPlate, 'copyFile');
+      spyOn(exampleBoilerPlate, 'loadJsonFile').and.returnValue({});
+    });
+
+    it('should install the node modules', () => {
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.installNodeModules).toHaveBeenCalledWith(path.resolve(__dirname, 'shared'));
+    });
+
+    it('should override the Angular node_modules with the locally built Angular packages if `useLocal` is true', () => {
+      const numberOfAngularPackages = 12;
+      const numberOfAngularToolsPackages = 1;
+      exampleBoilerPlate.add(true);
+      expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledTimes(numberOfAngularPackages + numberOfAngularToolsPackages);
+      // for example
+      expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/packages-dist'), 'core');
+      expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/tools/@angular'), 'tsc-wrapped');
+    });
+
+    it('should process all the example folders', () => {
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.getFoldersContaining).toHaveBeenCalledWith(path.resolve(__dirname, '../../content/examples'), 'example-config.json', 'node_modules');
+    });
+
+    it('should symlink the node_modules', () => {
+      exampleBoilerPlate.add();
+      expect(fs.ensureSymlinkSync).toHaveBeenCalledTimes(exampleFolders.length);
+      expect(fs.ensureSymlinkSync).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/node_modules'), path.resolve('a/b/node_modules'));
+      expect(fs.ensureSymlinkSync).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/node_modules'), path.resolve('c/d/node_modules'));
+    });
+
+    it('should copy all the source boilerplate files', () => {
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(numberOfBoilerPlateFiles * exampleFolders.length);
+      // for example
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate'), 'a/b', 'package.json');
+    });
+
+    it('should try to load the example config file', () => {
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.loadJsonFile).toHaveBeenCalledTimes(exampleFolders.length);
+      expect(exampleBoilerPlate.loadJsonFile).toHaveBeenCalledWith(path.resolve('a/b/example-config.json'));
+      expect(exampleBoilerPlate.loadJsonFile).toHaveBeenCalledWith(path.resolve('c/d/example-config.json'));
+    });
+
+    it('should copy all the test boilerplate files if unit testing is configured', () => {
+      // configure unit testing for example a/b and not c/d
+      exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { unittesting: true } : {});
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes((numberOfBoilerPlateFiles * 2) + numberOfBoilerPlateTestFiles);
+      // for example
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, '../../content/examples/testing'), 'a/b', 'karma.conf.js');
+      expect(exampleBoilerPlate.copyFile).not.toHaveBeenCalledWith(path.resolve(__dirname, '../../content/examples/testing'), 'c/d', 'karma.conf.js');
+    });
+  });
+
+  describe('remove', () => {
+    it('should run `git clean`', () => {
+      spyOn(shelljs, 'exec');
+      exampleBoilerPlate.remove();
+      expect(shelljs.exec).toHaveBeenCalledWith('git clean -xdfq', {cwd: path.resolve(__dirname, '../../content/examples') });
+    });
+  });
+
+  describe('installNodeModules', () => {
+    it('should run `yarn` in the base path', () => {
+      spyOn(shelljs, 'exec');
+      exampleBoilerPlate.installNodeModules('some/base/path');
+      expect(shelljs.exec).toHaveBeenCalledWith('yarn', { cwd: 'some/base/path' });
+    });
+  });
+
+  describe('overridePackage', () => {
+    beforeEach(() => {
+      spyOn(shelljs, 'rm');
+      spyOn(fs, 'ensureSymlinkSync');
+    });
+
+    it('should remove the original package from the shared node_modules folder', () => {
+      exampleBoilerPlate.overridePackage('base/path', 'somePackage');
+      expect(shelljs.rm).toHaveBeenCalledWith('-rf', path.resolve(__dirname, 'shared/node_modules/@angular/somePackage'));
+    });
+
+    it('should symlink the source folder to the shared node_modules folder', () => {
+      exampleBoilerPlate.overridePackage('base/path', 'somePackage');
+      expect(fs.ensureSymlinkSync).toHaveBeenCalledWith(path.resolve('base/path/somePackage'), path.resolve(__dirname, 'shared/node_modules/@angular/somePackage'));
+    });
+  });
+
+  describe('getFoldersContaining', () => {
+    it('should use glob.sync', () => {
+      spyOn(glob, 'sync').and.returnValue(['a/b/config.json', 'c/d/config.json']);
+      const result = exampleBoilerPlate.getFoldersContaining('base/path', 'config.json', 'node_modules');
+      expect(glob.sync).toHaveBeenCalledWith(path.resolve('base/path/**/config.json'), { ignore: [path.resolve('base/path/**/node_modules/**')] });
+      expect(result).toEqual(['a/b', 'c/d']);
+    });
+  });
+
+  describe('copyFile', () => {
+    it('should use copySync and chmodSync', () => {
+      spyOn(fs, 'copySync');
+      spyOn(fs, 'chmodSync');
+      exampleBoilerPlate.copyFile('source/folder', 'destination/folder', 'some/file/path');
+      expect(fs.copySync).toHaveBeenCalledWith(
+        path.resolve('source/folder/some/file/path'),
+        path.resolve('destination/folder/some/file/path'),
+        { overwrite: true });
+      expect(fs.chmodSync).toHaveBeenCalledWith(path.resolve('destination/folder/some/file/path'), 444);
+    });
+  });
+
+  describe('loadJsonFile', () => {
+    it('should use fs.readJsonSync', () => {
+      spyOn(fs, 'readJsonSync').and.returnValue({ some: 'value' });
+      const result = exampleBoilerPlate.loadJsonFile('some/file');
+      expect(fs.readJsonSync).toHaveBeenCalledWith('some/file', {throws: false});
+      expect(result).toEqual({ some: 'value' });
+    });
+
+    it('should return an empty object if readJsonSync fails', () => {
+      spyOn(fs, 'readJsonSync').and.returnValue(null);
+      const result = exampleBoilerPlate.loadJsonFile('some/file');
+      expect(result).toEqual({});
+    });
+  });
+});
diff --git a/aio/tools/examples/run-example-e2e.js b/aio/tools/examples/run-example-e2e.js
new file mode 100644
index 0000000000..0b4e978592
--- /dev/null
+++ b/aio/tools/examples/run-example-e2e.js
@@ -0,0 +1,261 @@
+const path = require('path');
+const fs = require('fs-extra');
+const argv = require('yargs').argv;
+const globby = require('globby');
+const xSpawn = require('cross-spawn');
+const treeKill = require('tree-kill');
+
+const AIO_PATH = path.join(__dirname, '../../');
+const SHARED_PATH = path.join(__dirname, '/shared');
+const EXAMPLES_PATH = path.join(AIO_PATH, './content/examples/');
+const PROTRACTOR_CONFIG_FILENAME = path.join(__dirname, './shared/protractor.config.js');
+const SPEC_FILENAME = 'e2e-spec.ts';
+const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
+const IGNORED_EXAMPLES = [
+  'ts-to-js/'
+];
+
+/**
+ * Run Protractor End-to-End Tests for Doc Samples
+ *
+ * Flags
+ *   --filter to filter/select _example app subdir names
+ *    e.g. --filter=foo  // all example apps with 'foo' in their folder names.
+ *
+ *  --setup run yarn install, copy boilerplate and update webdriver
+ *    e.g. --setup
+ *
+ *  --local to use the locally built Angular packages, rather than versions from npm
+ *    Must be used in conjunction with --setup as this is when the packages are copied.
+ *    e.g. --setup --local
+ *
+ *  --shard to shard the specs into groups to allow you to run them in parallel
+ *    e.g. --shard=0/2 // the even specs: 0, 2, 4, etc
+ *    e.g. --shard=1/2 // the odd specs: 1, 3, 5, etc
+ *    e.g. --shard=1/3 // the second of every three specs: 1, 4, 7, etc
+ */
+function runE2e() {
+  let promise = Promise.resolve();
+  if (argv.setup) {
+    // Run setup.
+    console.log('runE2e: copy boilerplate');
+    const spawnInfo = spawnExt('yarn', ['boilerplate:add', argv.local ? '-- --local': ''], { cwd: AIO_PATH });
+    promise = spawnInfo.promise
+      .then(() => {
+        console.log('runE2e: update webdriver');
+        return spawnExt('yarn', ['webdriver:update'], { cwd: SHARED_PATH }).promise;
+      });
+  };
+
+  const outputFile = path.join(AIO_PATH, './protractor-results.txt');
+
+  return promise
+    .then(() => findAndRunE2eTests(argv.filter, outputFile, argv.shard))
+    .then((status) => {
+      reportStatus(status, outputFile);
+      if (status.failed.length > 0) {
+        return Promise.reject('Some test suites failed');
+      }
+    }).catch(function (e) {
+      console.log(e);
+      process.exitCode = 1;
+    });
+}
+
+// Finds all of the *e2e-spec.tests under the examples folder along with the corresponding apps
+// that they should run under. Then run each app/spec collection sequentially.
+function findAndRunE2eTests(filter, outputFile, shard) {
+
+  const shardParts = shard ? shard.split('/') : [0,1];
+  const shardModulo = parseInt(shardParts[0], 10);
+  const shardDivider = parseInt(shardParts[1], 10);
+
+  // create an output file with header.
+  const startTime = new Date().getTime();
+  let header = `Doc Sample Protractor Results on ${new Date().toLocaleString()}\n`;
+  header += `  Filter: ${filter ? filter : 'All tests'}\n\n`;
+  fs.writeFileSync(outputFile, header);
+
+  // Run the tests sequentially.
+  const status = { passed: [], failed: [] };
+  return getE2eSpecPaths(EXAMPLES_PATH, filter)
+    .then(e2eSpecPaths => e2eSpecPaths
+      .filter((paths, index) => index % shardDivider === shardModulo)
+      .reduce((promise, specPath) => {
+      return promise.then(() => {
+        const examplePath = path.dirname(specPath);
+        return runE2eTests(examplePath, outputFile).then((ok) => {
+          const arr = ok ? status.passed : status.failed;
+          arr.push(examplePath);
+        });
+      });
+    }, Promise.resolve()))
+    .then(function () {
+      const stopTime = new Date().getTime();
+      status.elapsedTime = (stopTime - startTime) / 1000;
+      return status;
+    });
+}
+
+// Start the example in appDir; then run protractor with the specified
+// fileName; then shut down the example.
+// All protractor output is appended to the outputFile.
+function runE2eTests(appDir, outputFile) {
+
+  const config = loadExampleConfig(appDir);
+
+  const appBuildSpawnInfo = spawnExt('yarn', [config.build], { cwd: appDir });
+  const appRunSpawnInfo = spawnExt('yarn', [config.run, '--', '-s'], { cwd: appDir }, true);
+
+  let run = runProtractor(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
+
+  if (fs.existsSync(appDir + '/aot/index.html')) {
+    run = run.then((ok) => ok && runProtractorAoT(appDir, outputFile));
+  }
+  return run;
+}
+
+function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
+  const specFilename = path.resolve(`${appDir}/${SPEC_FILENAME}`);
+  return prepPromise
+    .catch(function () {
+      const emsg = `Application at ${appDir} failed to transpile.\n\n`;
+      console.log(emsg);
+      fs.appendFileSync(outputFile, emsg);
+      return Promise.reject(emsg);
+    })
+    .then(function (data) {
+      let transpileError = false;
+
+      // Start protractor.
+
+      const spawnInfo = spawnExt('yarn', ['protractor', '--',
+        PROTRACTOR_CONFIG_FILENAME,
+        `--specs=${specFilename}`,
+        '--params.appDir=' + appDir,
+        '--params.outputFile=' + outputFile
+      ], { cwd: SHARED_PATH });
+
+      spawnInfo.proc.stderr.on('data', function (data) {
+        transpileError = transpileError || /npm ERR! Exit status 100/.test(data.toString());
+      });
+      return spawnInfo.promise.catch(function (err) {
+        if (transpileError) {
+          const emsg = `${specFilename} failed to transpile.\n\n`;
+          console.log(emsg);
+          fs.appendFileSync(outputFile, emsg);
+        }
+        return Promise.reject(emsg);
+      });
+    })
+    .then(
+    function () { return finish(true); },
+    function () { return finish(false); }
+    )
+
+  function finish(ok) {
+    // Ugh... proc.kill does not work properly on windows with child processes.
+    // appRun.proc.kill();
+    treeKill(appRunSpawnInfo.proc.pid);
+    return ok;
+  }
+}
+
+// Run e2e tests over the AOT build for projects that examples it.
+function runProtractorAoT(appDir, outputFile) {
+  fs.appendFileSync(outputFile, '++ AoT version ++\n');
+  const aotBuildSpawnInfo = spawnExt('yarn', ['build:aot'], { cwd: appDir });
+  let promise = aotBuildSpawnInfo.promise;
+
+  const copyFileCmd = 'copy-dist-files.js';
+  if (fs.existsSync(appDir + '/' + copyFileCmd)) {
+    promise = promise.then(() => spawnExt('node', [copyFileCmd], { cwd: appDir }).promise);
+  }
+  const aotRunSpawnInfo = spawnExt('yarn', ['serve:aot'], { cwd: appDir }, true);
+  return runProtractor(promise, appDir, aotRunSpawnInfo, outputFile);
+}
+
+// Report final status.
+function reportStatus(status, outputFile) {
+  let log = [''];
+  log.push('Suites passed:');
+  status.passed.forEach(function (val) {
+    log.push('  ' + val);
+  });
+
+  if (status.failed.length == 0) {
+    log.push('All tests passed');
+  } else {
+    log.push('Suites failed:');
+    status.failed.forEach(function (val) {
+      log.push('  ' + val);
+    });
+  }
+  log.push('\nElapsed time: ' + status.elapsedTime + ' seconds');
+  log = log.join('\n');
+  console.log(log);
+  fs.appendFileSync(outputFile, log);
+}
+
+// Returns both a promise and the spawned process so that it can be killed if needed.
+function spawnExt(command, args, options, ignoreClose = false) {
+  let proc;
+  const promise = new Promise((resolve, reject) => {
+    let descr = command + " " + args.join(' ');
+    console.log('running: ' + descr);
+    try {
+      proc = xSpawn.spawn(command, args, options);
+    } catch (e) {
+      console.log(e);
+      reject(e);
+      return { proc: null, promise };
+    }
+    proc.stdout.on('data', function (data) {
+      process.stdout.write(data.toString());
+    });
+    proc.stderr.on('data', function (data) {
+      process.stdout.write(data.toString());
+    });
+    proc.on('close', function (returnCode) {
+      console.log(`completed: ${descr} \n`);
+      // Many tasks (e.g., tsc) complete but are actually errors;
+      // Confirm return code is zero.
+      returnCode === 0 || ignoreClose ? resolve(0) : reject(returnCode);
+    });
+    proc.on('error', function (data) {
+      console.log(`completed with error: ${descr} \n`);
+      console.log(data.toString());
+      reject(data);
+    });
+  });
+  return { proc, promise };
+}
+
+// Find all e2e specs in a given example folder.
+function getE2eSpecPaths(basePath, filter) {
+  // Only get spec file at the example root.
+  const e2eSpecGlob = `${filter ? `*${filter}*` : '*'}/${SPEC_FILENAME}`;
+  return globby(e2eSpecGlob, { cwd: basePath, nodir: true })
+    .then(paths => paths
+      .filter(file => IGNORED_EXAMPLES.some(ignored => !file.startsWith(ignored)))
+      .map(file => path.join(basePath, file))
+    );
+}
+
+// Load configuration for an example.
+function loadExampleConfig(exampleFolder) {
+  // Default config.
+  let config = {
+    build: 'build',
+    run: 'serve:e2e'
+  };
+
+  try {
+    const exampleConfig = fs.readJsonSync(`${exampleFolder}/${EXAMPLE_CONFIG_FILENAME}`);
+    Object.assign(config, exampleConfig);
+  } catch (e) { }
+
+  return config;
+}
+
+runE2e();
diff --git a/aio/tools/examples/shared/boilerplate/package.json b/aio/tools/examples/shared/boilerplate/package.json
index 2e4bc19f91..463567b1eb 100644
--- a/aio/tools/examples/shared/boilerplate/package.json
+++ b/aio/tools/examples/shared/boilerplate/package.json
@@ -38,7 +38,7 @@
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
-    "angular-cli": "^1.0.0-rc.0"
+    "@angular/cli": "^1.2.0"
   },
   "repository": {}
 }
diff --git a/aio/tools/examples/shared/boilerplate/src/styles.css b/aio/tools/examples/shared/boilerplate/src/styles.css
index d81835d0cd..a0496ae272 100644
--- a/aio/tools/examples/shared/boilerplate/src/styles.css
+++ b/aio/tools/examples/shared/boilerplate/src/styles.css
@@ -1,4 +1,3 @@
-/* #docregion , quickstart, toh */
 /* Master Styles */
 h1 {
   color: #369;
@@ -13,12 +12,10 @@ h2, h3 {
 body {
   margin: 2em;
 }
-/* #enddocregion quickstart */
 body, input[text], button {
   color: #888;
   font-family: Cambria, Georgia;
 }
-/* #enddocregion toh */
 a {
   cursor: pointer;
   cursor: hand;
@@ -62,54 +59,6 @@ nav a.active {
   color: #039be5;
 }
 
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* #docregion toh */
 /* everywhere else */
 * {
   font-family: Arial, Helvetica, sans-serif;
diff --git a/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.build.js b/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.build.js
index 5774fd8187..50b5ee2aa1 100644
--- a/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.build.js
+++ b/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.build.js
@@ -67,7 +67,7 @@
       'rxjs':                      'npm:rxjs@5.0.1',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
       'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
-      'typescript':                'npm:typescript@2.2.1/lib/typescript.js',
+      'typescript':                'npm:typescript@2.3.2/lib/typescript.js',
 
     },
     // packages tells the System loader how to load when no filename and/or no extension
diff --git a/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.js b/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.js
index 376fcdde8a..97b8244b1d 100644
--- a/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.js
+++ b/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.js
@@ -54,7 +54,7 @@
       'rxjs':                      'npm:rxjs@5.0.1',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
       'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
-      'typescript':                'npm:typescript@2.2.1/lib/typescript.js',
+      'typescript':                'npm:typescript@2.3.2/lib/typescript.js',
 
     },
     // packages tells the System loader how to load when no filename and/or no extension
diff --git a/aio/tools/examples/shared/boilerplate/src/tsconfig.json b/aio/tools/examples/shared/boilerplate/src/tsconfig.json
index 05839ec2ff..1a6e599592 100644
--- a/aio/tools/examples/shared/boilerplate/src/tsconfig.json
+++ b/aio/tools/examples/shared/boilerplate/src/tsconfig.json
@@ -10,7 +10,7 @@
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "typeRoots": [
-      "../../../node_modules/@types/"
+      "../node_modules/@types/"
     ]
   },
   "compileOnSave": true,
diff --git a/aio/tools/examples/shared/package.json b/aio/tools/examples/shared/package.json
index 41dc5e5b56..4627b75488 100644
--- a/aio/tools/examples/shared/package.json
+++ b/aio/tools/examples/shared/package.json
@@ -12,27 +12,27 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@angular/animations": "~4.0.0",
-    "@angular/common": "~4.0.0",
-    "@angular/compiler": "~4.0.0",
-    "@angular/compiler-cli": "~4.0.0",
-    "@angular/core": "~4.0.0",
-    "@angular/forms": "~4.0.0",
-    "@angular/http": "~4.0.0",
-    "@angular/platform-browser": "~4.0.0",
-    "@angular/platform-browser-dynamic": "~4.0.0",
-    "@angular/platform-server": "~4.0.0",
-    "@angular/router": "~4.0.0",
-    "@angular/tsc-wrapped": "~4.0.0",
-    "@angular/upgrade": "~4.0.0",
-    "angular-in-memory-web-api": "~0.3.1",
+    "@angular/animations": "~4.3.1",
+    "@angular/common": "~4.3.1",
+    "@angular/compiler": "~4.3.1",
+    "@angular/compiler-cli": "~4.3.1",
+    "@angular/core": "~4.3.1",
+    "@angular/forms": "~4.3.1",
+    "@angular/http": "~4.3.1",
+    "@angular/platform-browser": "~4.3.1",
+    "@angular/platform-browser-dynamic": "~4.3.1",
+    "@angular/platform-server": "~4.3.1",
+    "@angular/router": "~4.3.1",
+    "@angular/tsc-wrapped": "~4.3.1",
+    "@angular/upgrade": "~4.3.1",
+    "angular-in-memory-web-api": "~0.3.2",
     "core-js": "^2.4.1",
-    "rxjs": "5.0.1",
+    "rxjs": "^5.1.0",
     "systemjs": "0.19.39",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "^1.0.0",
+    "@angular/cli": "^1.2.0",
     "@types/angular": "^1.5.16",
     "@types/angular-animate": "^1.5.5",
     "@types/angular-cookies": "^1.4.2",
@@ -69,7 +69,7 @@
     "lodash": "^4.16.2",
     "null-loader": "^0.1.1",
     "phantomjs-prebuilt": "^2.1.7",
-    "protractor": "~4.0.14",
+    "protractor": "~5.1.0",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.5.4",
     "rollup": "^0.41.6",
@@ -78,9 +78,9 @@
     "rollup-plugin-uglify": "^1.0.1",
     "source-map-explorer": "^1.3.2",
     "style-loader": "^0.13.1",
-    "ts-node": "^1.3.0",
+    "ts-node": "~3.0.4",
     "tslint": "^3.15.1",
-    "typescript": "~2.2.0",
+    "typescript": "~2.3.2",
     "webpack": "2.2.1",
     "webpack-dev-server": "2.4.1",
     "webpack-merge": "^3.0.0"
diff --git a/aio/tools/examples/shared/protractor-helpers.ts b/aio/tools/examples/shared/protractor-helpers.ts
deleted file mode 100644
index 61af74ba30..0000000000
--- a/aio/tools/examples/shared/protractor-helpers.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { browser } from 'protractor';
-
-export var appLang = {
-  appIsTs: false,
-  appIsJs: false,
-  appIsDart: false,
-  appIsUnknown: false
-};
-
-export function describeIf(cond: boolean, name: string, func: () => void): void {
-  if (cond) {
-    describe(name, func);
-  } else {
-    xdescribe(name, func);
-  }
-}
-
-export function itIf(cond: boolean, name: string, func: (done: DoneFn) => void): void {
-  if (cond) {
-    it(name, func);
-  } else {
-    xit(name, func);
-  }
-}
-
-// protractor.config.js is set to ng2 mode by default, so we must manually
-// change it for upgradeAdapter tests
-export function setProtractorToNg1Mode(): void {
-  browser.rootEl = 'body';
-}
-
-export function setProtractorToHybridMode() {
-  setProtractorToNg1Mode();
-  browser.ng12Hybrid = true;
-}
diff --git a/aio/tools/examples/shared/protractor.config.js b/aio/tools/examples/shared/protractor.config.js
index 92b5e1fda5..21b54feb8b 100644
--- a/aio/tools/examples/shared/protractor.config.js
+++ b/aio/tools/examples/shared/protractor.config.js
@@ -43,22 +43,7 @@ exports.config = {
 
     // debugging
     // console.log('browser.params:' + JSON.stringify(browser.params));
-    var protractorHelpers = require('./protractor-helpers.ts');
 
-    var appDir = browser.params.appDir;
-    if (appDir) {
-      if (appDir.match('/ts') != null) {
-        protractorHelpers.appLang.appIsTs = true;
-      } else if (appDir.match('/js') != null) {
-        protractorHelpers.appLang.appIsJs = true;
-      } else if (appDir.match('/dart') != null) {
-        protractorHelpers.appLang.appIsDart = true;
-      } else {
-        protractorHelpers.appLang.appIsUnknown = true;
-      }
-    } else {
-      protractorHelpers.appLang.appIsUnknown = true;
-    }
     jasmine.getEnv().addReporter(new Reporter( browser.params ));
   },
 
@@ -79,7 +64,7 @@ exports.config = {
 
 // See http://jasmine.github.io/2.1/custom_reporter.html
 function Reporter(options) {
-  var _defaultOutputFile = path.resolve(process.cwd(), "../../../", 'protractor-results.txt');
+  var _defaultOutputFile = path.resolve(__dirname, '../../protractor-results.txt');
   options.outputFile = options.outputFile || _defaultOutputFile;
 
   var _root = { appDir: options.appDir, suites: [] };
diff --git a/aio/tools/examples/shared/tsconfig.json b/aio/tools/examples/shared/tsconfig.json
index 51ea56dc7f..b564f9cb9f 100644
--- a/aio/tools/examples/shared/tsconfig.json
+++ b/aio/tools/examples/shared/tsconfig.json
@@ -1,5 +1,5 @@
 // this tsconfig is used for protractor tests
-// see _boilerplate/tsconfig.json for the tsconfig used in examples
+// see boilerplate/tsconfig.json for the tsconfig used in examples
 {
   "compilerOptions": {
     "target": "es6",
@@ -15,10 +15,7 @@
       "node_modules/@types"
     ]
   },
-  "files": [
-    "protractor-helpers.ts"
-  ],
   "include": [
-    "*/e2e-spec.ts"
+    "../../../content/examples/*/e2e-spec.ts"
   ]
 }
diff --git a/aio/tools/examples/shared/yarn.lock b/aio/tools/examples/shared/yarn.lock
index fc1bcc0f75..2fd742b899 100644
--- a/aio/tools/examples/shared/yarn.lock
+++ b/aio/tools/examples/shared/yarn.lock
@@ -1,139 +1,164 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
+# yarn v0.25.3
+# node v7.8.0
 
 
-"@angular/animations@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.0.1.tgz#154420c8ee5c22fbaf1434b6d156150cf5218da6"
-
-"@angular/cli@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.0.0.tgz#7bfde1e7c5f28bf5bed4dda1352ee67ee887302f"
+"@angular/animations@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.3.1.tgz#1f7e0bb803efc21c608246e6765a1c647f3d1a5f"
   dependencies:
-    "@ngtools/json-schema" "1.0.5"
-    "@ngtools/webpack" "1.3.0"
+    tslib "^1.7.1"
+
+"@angular/cli@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.2.0.tgz#dfd8b8983ec37c2b6d7f902ead60396d7b571597"
+  dependencies:
+    "@ngtools/json-schema" "1.1.0"
+    "@ngtools/webpack" "1.5.0"
     autoprefixer "^6.5.3"
     chalk "^1.1.3"
     common-tags "^1.3.1"
-    css-loader "^0.26.1"
+    core-object "^3.1.0"
+    css-loader "^0.28.1"
     cssnano "^3.10.0"
-    debug "^2.1.3"
     denodeify "^1.2.1"
     diff "^3.1.0"
     ember-cli-normalize-entity-name "^1.0.0"
     ember-cli-string-utils "^1.0.0"
     exports-loader "^0.6.3"
-    extract-text-webpack-plugin "~2.0.0"
+    extract-text-webpack-plugin "^2.1.0"
     file-loader "^0.10.0"
-    fs-extra "^2.0.0"
+    fs-extra "^3.0.1"
     get-caller-file "^1.0.0"
     glob "^7.0.3"
+    heimdalljs "^0.2.4"
+    heimdalljs-logger "^0.1.9"
     html-webpack-plugin "^2.19.0"
     inflection "^1.7.0"
     inquirer "^3.0.0"
     isbinaryfile "^3.0.0"
     istanbul-instrumenter-loader "^2.0.0"
     json-loader "^0.5.4"
-    karma-sourcemap-loader "^0.3.7"
-    karma-webpack "^2.0.0"
     less "^2.7.2"
-    less-loader "^2.2.3"
+    less-loader "^4.0.2"
+    license-webpack-plugin "^0.4.2"
     lodash "^4.11.1"
+    memory-fs "^0.4.1"
     minimatch "^3.0.3"
     node-modules-path "^1.0.0"
     nopt "^4.0.1"
     opn "4.0.2"
     portfinder "~1.0.12"
-    postcss-loader "^0.13.0"
+    postcss-loader "^1.3.3"
     postcss-url "^5.1.2"
     raw-loader "^0.5.1"
     resolve "^1.1.7"
-    rimraf "^2.5.3"
     rsvp "^3.0.17"
     rxjs "^5.0.1"
-    sass-loader "^4.1.1"
+    sass-loader "^6.0.3"
     script-loader "^0.7.0"
     semver "^5.1.0"
     silent-error "^1.0.0"
-    source-map-loader "^0.1.5"
+    source-map-loader "^0.2.0"
     style-loader "^0.13.1"
     stylus "^0.54.5"
-    stylus-loader "^2.4.0"
+    stylus-loader "^3.0.1"
     temp "0.8.3"
-    typescript ">=2.0.0 <2.3.0"
+    typescript ">=2.0.0 <2.4.0"
     url-loader "^0.5.7"
     walk-sync "^0.3.1"
-    webpack "~2.2.0"
-    webpack-dev-server "~2.3.0"
+    webpack "~2.4.0"
+    webpack-dev-middleware "^1.10.2"
+    webpack-dev-server "~2.4.5"
     webpack-merge "^2.4.0"
-    zone.js "^0.7.2"
+    zone.js "^0.8.4"
   optionalDependencies:
     node-sass "^4.3.0"
 
-"@angular/common@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.0.1.tgz#df488eada842b2d841ded750712292b18387b5b0"
-
-"@angular/compiler-cli@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.0.1.tgz#90c60d491c12e1da901a0aeb3990470aa96e9bfa"
+"@angular/common@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.3.1.tgz#260f487a7cdca326c436bd3ea9515c797de2ff72"
   dependencies:
-    "@angular/tsc-wrapped" "4.0.1"
+    tslib "^1.7.1"
+
+"@angular/compiler-cli@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.3.1.tgz#00b41afb6faeb4aef561b8427804ac8880aff63c"
+  dependencies:
+    "@angular/tsc-wrapped" "4.3.1"
     minimist "^1.2.0"
     reflect-metadata "^0.1.2"
 
-"@angular/compiler@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.0.1.tgz#15721edb148167a2d83b6f9324817e658eac8280"
+"@angular/compiler@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.3.1.tgz#3a24d49ecf01ac2b6e07f63e378b8ff8e257fe09"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/core@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.0.1.tgz#0b110a001012076ea696460ccd922707bcdf51ba"
+"@angular/core@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.3.1.tgz#a9d0a7d644b96260674269b689a04feea632a8d3"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/forms@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.0.1.tgz#b9ebdbbb8ace0f9a3bf9e53c299eafdfab1d5041"
+"@angular/forms@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.3.1.tgz#33914da2cb146430ff901471e682c76654622dfe"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/http@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/http/-/http-4.0.1.tgz#bf87e7da9dc1f1567f246f9a09723e1cc3543d32"
+"@angular/http@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/http/-/http-4.3.1.tgz#e4f661f746711e88ecbea76a3c905babf97d315a"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/platform-browser-dynamic@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.0.1.tgz#fd5debb2d3f6474350965e71c2674e2170d7cfcb"
+"@angular/platform-browser-dynamic@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.1.tgz#84034da60a82ef36e7effda7b3ade6e645b330b3"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/platform-browser@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.0.1.tgz#4b9efbeb2fbb900de188743b988802d3aa2b33ff"
+"@angular/platform-browser@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.3.1.tgz#db727b06eed64bda5defec71815db26a4da2f690"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/platform-server@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-4.0.1.tgz#3d5fc98255c0f60c6f9079eb8d6cc0c8def31d06"
+"@angular/platform-server@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-4.3.1.tgz#3b915fc4013c6a947a8c147b4db0279b025936eb"
   dependencies:
     parse5 "^3.0.1"
+    tslib "^1.7.1"
     xhr2 "^0.1.4"
 
-"@angular/router@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.0.1.tgz#2d73a4b6c40e18d5cd0bfd1f20222af64a11c11e"
+"@angular/router@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.3.1.tgz#5219d44526156d816065841127610165a015b450"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/tsc-wrapped@4.0.1", "@angular/tsc-wrapped@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-4.0.1.tgz#5323cc99263b097bceeb8e423270b5f58ffb2186"
+"@angular/tsc-wrapped@4.3.1", "@angular/tsc-wrapped@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-4.3.1.tgz#f6616a4d2a3bbec1cded664fd1f526edce99ef41"
   dependencies:
     tsickle "^0.21.0"
 
-"@angular/upgrade@~4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@angular/upgrade/-/upgrade-4.0.1.tgz#ce1626acbac8b65f3008b8e1196699eb188afddf"
+"@angular/upgrade@~4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/upgrade/-/upgrade-4.3.1.tgz#db80f9d428e4801b0a41618df71bf899882f39c8"
+  dependencies:
+    tslib "^1.7.1"
 
-"@ngtools/json-schema@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.0.5.tgz#ad39037c70c88b245ac7267a71777646b6063d77"
+"@ngtools/json-schema@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.1.0.tgz#c3a0c544d62392acc2813a42c8a0dc6f58f86922"
 
-"@ngtools/webpack@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.3.0.tgz#a1071230985358ecdf87b2fa9879ae6cc6355e83"
+"@ngtools/webpack@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.5.0.tgz#b6be58d857d41f8999751d6bbc3d21e84bc977ca"
   dependencies:
     enhanced-resolve "^3.1.0"
     loader-utils "^1.0.2"
@@ -178,30 +203,30 @@
     "@types/angular" "*"
 
 "@types/angular@*", "@types/angular@^1.5.16":
-  version "1.6.14"
-  resolved "https://registry.yarnpkg.com/@types/angular/-/angular-1.6.14.tgz#6923ba9f325b80fd9546c856d147782b551f637a"
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/@types/angular/-/angular-1.6.18.tgz#1df57e3c8b1f1fe629f58f4f1f2269bf57be91a8"
   dependencies:
     "@types/jquery" "*"
 
-"@types/jasmine@2.5.36", "@types/jasmine@^2.5.36":
+"@types/jasmine@2.5.36":
   version "2.5.36"
   resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.36.tgz#6d804b79a57e9380d766a2680e9362c17d9556d2"
 
 "@types/jquery@*":
-  version "2.0.41"
-  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.41.tgz#b87ba051011f99edbe586d8f97282e7786e01a6d"
+  version "2.0.46"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.46.tgz#c245426299b43c4bb75f44b813090bd5918d00f2"
 
 "@types/node@^6.0.45", "@types/node@^6.0.46":
-  version "6.0.68"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.68.tgz#0c43b6b8b9445feb86a0fbd3457e3f4bc591e66d"
+  version "6.0.78"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.78.tgz#5d4a3f579c1524e01ee21bf474e6fba09198f470"
 
 "@types/q@^0.0.32":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-0.0.32.tgz#bd284e57c84f1325da702babfc82a5328190c0c5"
 
-"@types/selenium-webdriver@2.53.37":
-  version "2.53.37"
-  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.37.tgz#34f743c20e53ae7100ede90870fde554df2447f8"
+"@types/selenium-webdriver@^2.53.35", "@types/selenium-webdriver@~2.53.39":
+  version "2.53.42"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.42.tgz#74cb77fb6052edaff2a8984ddafd88d419f25cac"
 
 abbrev@1:
   version "1.1.0"
@@ -237,14 +262,18 @@ acorn@^3.0.4, acorn@^3.1.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
 acorn@^4.0.1, acorn@^4.0.3, acorn@^4.0.4:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.11.tgz#edcda3bd937e7556410d42ed5860f67399c794c0"
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+
+acorn@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d"
 
 adm-zip@0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.4.tgz#a61ed5ae6905c3aea58b3a657d25033091052736"
 
-adm-zip@0.4.7, adm-zip@^0.4.7:
+adm-zip@^0.4.7:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
 
@@ -257,8 +286,8 @@ after@0.8.2:
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
 
 agent-base@2:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-2.0.1.tgz#bd8f9e86a8eb221fffa07bd14befd55df142815e"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-2.1.1.tgz#d6de10d5af6132d5bd692427d46fc538539094c7"
   dependencies:
     extend "~3.0.0"
     semver "~5.0.1"
@@ -267,9 +296,16 @@ ajv-keywords@^1.1.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
 
-ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1:
-  version "4.11.5"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.5.tgz#b6ee74657b993a01dce44b7944d56f485828d5bd"
+ajv@^4.7.0, ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+ajv@^5.0.0:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.1.5.tgz#8734931b601f00d4feef7c65738d77d1b65d1f68"
   dependencies:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
@@ -290,9 +326,9 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
-angular-in-memory-web-api@~0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.3.1.tgz#3b2fe5965c3183df32081c2874ac113a827e86e3"
+angular-in-memory-web-api@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.3.2.tgz#8836d9e2534d37b728f3cb5a1caf6fe1e7fbbecd"
 
 angular2-template-loader@^0.6.0:
   version "0.6.2"
@@ -300,9 +336,9 @@ angular2-template-loader@^0.6.0:
   dependencies:
     loader-utils "^0.2.15"
 
-ansi-escapes@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+ansi-escapes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
 
 ansi-html@0.0.7:
   version "0.0.7"
@@ -324,10 +360,6 @@ ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
 
-any-promise@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
-
 anymatch@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
@@ -336,15 +368,15 @@ anymatch@^1.3.0:
     micromatch "^2.1.5"
 
 aproba@^1.0.3:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.1.1.tgz#95d3600f07710aa0e9298c726ad5ecf2eacbabab"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.1.2.tgz#45c6629094de4e96f693ef7eab74ae079c240fc1"
 
 are-we-there-yet@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
   dependencies:
     delegates "^1.0.0"
-    readable-stream "^2.0.0 || ^1.1.13"
+    readable-stream "^2.0.6"
 
 argparse@^1.0.7:
   version "1.0.9"
@@ -359,8 +391,8 @@ arr-diff@^2.0.0:
     arr-flatten "^1.0.1"
 
 arr-flatten@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.3.tgz#a274ed85ac08849b6bd7847c4580745dc51adfb1"
 
 array-find-index@^1.0.1:
   version "1.0.2"
@@ -454,9 +486,9 @@ async@^0.9.0, async@~0.9.0:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
 
-async@^2.0.1, async@^2.1.2:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.2.0.tgz#c324eba010a237e4fbd55a12dee86367d5c0ef32"
+async@^2.1.2, async@^2.1.5:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.4.1.tgz#62a56b279c98a11d0987096a01cc3eeb8eb7bbd7"
   dependencies:
     lodash "^4.14.0"
 
@@ -480,16 +512,16 @@ autoprefixer@^6.3.1, autoprefixer@^6.5.3:
     postcss-value-parser "^3.2.3"
 
 awesome-typescript-loader@^3.0.4:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-3.1.2.tgz#3df192b91a6285f795ca65e63aad114fbb44f710"
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-3.1.3.tgz#7eb41dfb136c2ea0e099bef038dc70c45f810223"
   dependencies:
     colors "^1.1.2"
     enhanced-resolve "^3.1.0"
-    loader-utils "^1.0.2"
+    loader-utils "^1.1.0"
     lodash "^4.17.4"
     mkdirp "^0.5.1"
     object-assign "^4.1.1"
-    source-map-support "^0.4.11"
+    source-map-support "^0.4.15"
 
 aws-sign2@~0.6.0:
   version "0.6.0"
@@ -500,12 +532,12 @@ aws4@^1.2.1:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
 babel-cli@^6.16.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.24.0.tgz#a05ffd210dca0c288a26d5319c5ac8669a265ad0"
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.24.1.tgz#207cd705bba61489b2ea41b5312341cf6aca2283"
   dependencies:
-    babel-core "^6.24.0"
+    babel-core "^6.24.1"
     babel-polyfill "^6.23.0"
-    babel-register "^6.24.0"
+    babel-register "^6.24.1"
     babel-runtime "^6.22.0"
     commander "^2.8.1"
     convert-source-map "^1.1.0"
@@ -528,20 +560,20 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-babel-core@^6.24.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.24.0.tgz#8f36a0a77f5c155aed6f920b844d23ba56742a02"
+babel-core@^6.24.1:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
   dependencies:
     babel-code-frame "^6.22.0"
-    babel-generator "^6.24.0"
-    babel-helpers "^6.23.0"
+    babel-generator "^6.25.0"
+    babel-helpers "^6.24.1"
     babel-messages "^6.23.0"
-    babel-register "^6.24.0"
+    babel-register "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-traverse "^6.23.1"
-    babel-types "^6.23.0"
-    babylon "^6.11.0"
+    babel-template "^6.25.0"
+    babel-traverse "^6.25.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
     convert-source-map "^1.1.0"
     debug "^2.1.1"
     json5 "^0.5.0"
@@ -552,93 +584,93 @@ babel-core@^6.24.0:
     slash "^1.0.0"
     source-map "^0.5.0"
 
-babel-generator@^6.18.0, babel-generator@^6.24.0, babel-generator@^6.8.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.0.tgz#eba270a8cc4ce6e09a61be43465d7c62c1f87c56"
+babel-generator@^6.18.0, babel-generator@^6.25.0, babel-generator@^6.8.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc"
   dependencies:
     babel-messages "^6.23.0"
     babel-runtime "^6.22.0"
-    babel-types "^6.23.0"
+    babel-types "^6.25.0"
     detect-indent "^4.0.0"
     jsesc "^1.3.0"
     lodash "^4.2.0"
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
-babel-helper-call-delegate@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.22.0.tgz#119921b56120f17e9dae3f74b4f5cc7bcc1b37ef"
+babel-helper-call-delegate@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d"
   dependencies:
-    babel-helper-hoist-variables "^6.22.0"
+    babel-helper-hoist-variables "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-traverse "^6.22.0"
-    babel-types "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
 
-babel-helper-define-map@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.23.0.tgz#1444f960c9691d69a2ced6a205315f8fd00804e7"
+babel-helper-define-map@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.24.1.tgz#7a9747f258d8947d32d515f6aa1c7bd02204a080"
   dependencies:
-    babel-helper-function-name "^6.23.0"
+    babel-helper-function-name "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-types "^6.23.0"
+    babel-types "^6.24.1"
     lodash "^4.2.0"
 
-babel-helper-function-name@^6.22.0, babel-helper-function-name@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.23.0.tgz#25742d67175c8903dbe4b6cb9d9e1fcb8dcf23a6"
+babel-helper-function-name@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9"
   dependencies:
-    babel-helper-get-function-arity "^6.22.0"
+    babel-helper-get-function-arity "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
 
-babel-helper-get-function-arity@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.22.0.tgz#0beb464ad69dc7347410ac6ade9f03a50634f5ce"
+babel-helper-get-function-arity@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-types "^6.22.0"
+    babel-types "^6.24.1"
 
-babel-helper-hoist-variables@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.22.0.tgz#3eacbf731d80705845dd2e9718f600cfb9b4ba72"
+babel-helper-hoist-variables@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz#1ecb27689c9d25513eadbc9914a73f5408be7a76"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-types "^6.22.0"
+    babel-types "^6.24.1"
 
-babel-helper-optimise-call-expression@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.23.0.tgz#f3ee7eed355b4282138b33d02b78369e470622f5"
+babel-helper-optimise-call-expression@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz#f7a13427ba9f73f8f4fa993c54a97882d1244257"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-types "^6.23.0"
+    babel-types "^6.24.1"
 
-babel-helper-regex@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.22.0.tgz#79f532be1647b1f0ee3474b5f5c3da58001d247d"
+babel-helper-regex@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.24.1.tgz#d36e22fab1008d79d88648e32116868128456ce8"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-types "^6.22.0"
+    babel-types "^6.24.1"
     lodash "^4.2.0"
 
-babel-helper-replace-supers@^6.22.0, babel-helper-replace-supers@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.23.0.tgz#eeaf8ad9b58ec4337ca94223bacdca1f8d9b4bfd"
+babel-helper-replace-supers@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz#bf6dbfe43938d17369a213ca8a8bf74b6a90ab1a"
   dependencies:
-    babel-helper-optimise-call-expression "^6.23.0"
+    babel-helper-optimise-call-expression "^6.24.1"
     babel-messages "^6.23.0"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
 
-babel-helpers@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.23.0.tgz#4f8f2e092d0b6a8808a4bde79c27f1e2ecf0d992"
+babel-helpers@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
+    babel-template "^6.24.1"
 
 babel-messages@^6.23.0:
   version "6.23.0"
@@ -671,13 +703,13 @@ babel-plugin-syntax-flow@^6.18.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
 
 babel-plugin-transform-class-properties@^6.8.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.23.0.tgz#187b747ee404399013563c993db038f34754ac3b"
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
   dependencies:
-    babel-helper-function-name "^6.23.0"
+    babel-helper-function-name "^6.24.1"
     babel-plugin-syntax-class-properties "^6.8.0"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
+    babel-template "^6.24.1"
 
 babel-plugin-transform-decorators-legacy@^1.3.4:
   version "1.3.4"
@@ -699,36 +731,36 @@ babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-block-scoping@^6.22.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.23.0.tgz#e48895cf0b375be148cd7c8879b422707a053b51"
+babel-plugin-transform-es2015-block-scoping@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.24.1.tgz#76c295dc3a4741b1665adfd3167215dcff32a576"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
     lodash "^4.2.0"
 
-babel-plugin-transform-es2015-classes@^6.22.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.23.0.tgz#49b53f326202a2fd1b3bbaa5e2edd8a4f78643c1"
+babel-plugin-transform-es2015-classes@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
   dependencies:
-    babel-helper-define-map "^6.23.0"
-    babel-helper-function-name "^6.23.0"
-    babel-helper-optimise-call-expression "^6.23.0"
-    babel-helper-replace-supers "^6.23.0"
+    babel-helper-define-map "^6.24.1"
+    babel-helper-function-name "^6.24.1"
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-helper-replace-supers "^6.24.1"
     babel-messages "^6.23.0"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-computed-properties@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.22.0.tgz#7c383e9629bba4820c11b0425bdd6290f7f057e7"
+babel-plugin-transform-es2015-computed-properties@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-template "^6.22.0"
+    babel-template "^6.24.1"
 
 babel-plugin-transform-es2015-destructuring@^6.22.0:
   version "6.23.0"
@@ -736,12 +768,12 @@ babel-plugin-transform-es2015-destructuring@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.22.0.tgz#672397031c21610d72dd2bbb0ba9fb6277e1c36b"
+babel-plugin-transform-es2015-duplicate-keys@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-types "^6.22.0"
+    babel-types "^6.24.1"
 
 babel-plugin-transform-es2015-for-of@^6.22.0:
   version "6.23.0"
@@ -749,13 +781,13 @@ babel-plugin-transform-es2015-for-of@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-function-name@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.22.0.tgz#f5fcc8b09093f9a23c76ac3d9e392c3ec4b77104"
+babel-plugin-transform-es2015-function-name@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
   dependencies:
-    babel-helper-function-name "^6.22.0"
+    babel-helper-function-name "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-types "^6.22.0"
+    babel-types "^6.24.1"
 
 babel-plugin-transform-es2015-literals@^6.22.0:
   version "6.22.0"
@@ -763,63 +795,63 @@ babel-plugin-transform-es2015-literals@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-modules-amd@^6.24.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.0.tgz#a1911fb9b7ec7e05a43a63c5995007557bcf6a2e"
+babel-plugin-transform-es2015-modules-amd@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
   dependencies:
-    babel-plugin-transform-es2015-modules-commonjs "^6.24.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.22.0"
+    babel-template "^6.24.1"
 
-babel-plugin-transform-es2015-modules-commonjs@^6.24.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.24.0.tgz#e921aefb72c2cc26cb03d107626156413222134f"
+babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.24.1.tgz#d3e310b40ef664a36622200097c6d440298f2bfe"
   dependencies:
-    babel-plugin-transform-strict-mode "^6.22.0"
+    babel-plugin-transform-strict-mode "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-types "^6.23.0"
+    babel-template "^6.24.1"
+    babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-modules-systemjs@^6.22.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.23.0.tgz#ae3469227ffac39b0310d90fec73bfdc4f6317b0"
+babel-plugin-transform-es2015-modules-systemjs@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
   dependencies:
-    babel-helper-hoist-variables "^6.22.0"
+    babel-helper-hoist-variables "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
+    babel-template "^6.24.1"
 
-babel-plugin-transform-es2015-modules-umd@^6.24.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.0.tgz#fd5fa63521cae8d273927c3958afd7c067733450"
+babel-plugin-transform-es2015-modules-umd@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
   dependencies:
-    babel-plugin-transform-es2015-modules-amd "^6.24.0"
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
+    babel-template "^6.24.1"
 
-babel-plugin-transform-es2015-object-super@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.22.0.tgz#daa60e114a042ea769dd53fe528fc82311eb98fc"
+babel-plugin-transform-es2015-object-super@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
   dependencies:
-    babel-helper-replace-supers "^6.22.0"
+    babel-helper-replace-supers "^6.24.1"
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-parameters@^6.22.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.23.0.tgz#3a2aabb70c8af945d5ce386f1a4250625a83ae3b"
+babel-plugin-transform-es2015-parameters@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
   dependencies:
-    babel-helper-call-delegate "^6.22.0"
-    babel-helper-get-function-arity "^6.22.0"
+    babel-helper-call-delegate "^6.24.1"
+    babel-helper-get-function-arity "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-shorthand-properties@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.22.0.tgz#8ba776e0affaa60bff21e921403b8a652a2ff723"
+babel-plugin-transform-es2015-shorthand-properties@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-types "^6.22.0"
+    babel-types "^6.24.1"
 
 babel-plugin-transform-es2015-spread@^6.22.0:
   version "6.22.0"
@@ -827,13 +859,13 @@ babel-plugin-transform-es2015-spread@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-sticky-regex@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.22.0.tgz#ab316829e866ee3f4b9eb96939757d19a5bc4593"
+babel-plugin-transform-es2015-sticky-regex@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
   dependencies:
-    babel-helper-regex "^6.22.0"
+    babel-helper-regex "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-types "^6.22.0"
+    babel-types "^6.24.1"
 
 babel-plugin-transform-es2015-template-literals@^6.22.0:
   version "6.22.0"
@@ -847,11 +879,11 @@ babel-plugin-transform-es2015-typeof-symbol@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-unicode-regex@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.22.0.tgz#8d9cc27e7ee1decfe65454fb986452a04a613d20"
+babel-plugin-transform-es2015-unicode-regex@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
   dependencies:
-    babel-helper-regex "^6.22.0"
+    babel-helper-regex "^6.24.1"
     babel-runtime "^6.22.0"
     regexpu-core "^2.0.0"
 
@@ -862,18 +894,18 @@ babel-plugin-transform-flow-strip-types@^6.8.0:
     babel-plugin-syntax-flow "^6.18.0"
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-regenerator@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.22.0.tgz#65740593a319c44522157538d690b84094617ea6"
+babel-plugin-transform-regenerator@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
   dependencies:
-    regenerator-transform "0.9.8"
+    regenerator-transform "0.9.11"
 
-babel-plugin-transform-strict-mode@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.22.0.tgz#e008df01340fdc87e959da65991b7e05970c8c7c"
+babel-plugin-transform-strict-mode@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-types "^6.22.0"
+    babel-types "^6.24.1"
 
 babel-polyfill@^6.23.0:
   version "6.23.0"
@@ -893,39 +925,39 @@ babel-preset-angular2@^0.0.2:
     babel-plugin-transform-flow-strip-types "^6.8.0"
 
 babel-preset-es2015@^6.16.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.24.0.tgz#c162d68b1932696e036cd3110dc1ccd303d2673a"
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939"
   dependencies:
     babel-plugin-check-es2015-constants "^6.22.0"
     babel-plugin-transform-es2015-arrow-functions "^6.22.0"
     babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
-    babel-plugin-transform-es2015-block-scoping "^6.22.0"
-    babel-plugin-transform-es2015-classes "^6.22.0"
-    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.24.1"
+    babel-plugin-transform-es2015-classes "^6.24.1"
+    babel-plugin-transform-es2015-computed-properties "^6.24.1"
     babel-plugin-transform-es2015-destructuring "^6.22.0"
-    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.24.1"
     babel-plugin-transform-es2015-for-of "^6.22.0"
-    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-function-name "^6.24.1"
     babel-plugin-transform-es2015-literals "^6.22.0"
-    babel-plugin-transform-es2015-modules-amd "^6.24.0"
-    babel-plugin-transform-es2015-modules-commonjs "^6.24.0"
-    babel-plugin-transform-es2015-modules-systemjs "^6.22.0"
-    babel-plugin-transform-es2015-modules-umd "^6.24.0"
-    babel-plugin-transform-es2015-object-super "^6.22.0"
-    babel-plugin-transform-es2015-parameters "^6.22.0"
-    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-plugin-transform-es2015-modules-systemjs "^6.24.1"
+    babel-plugin-transform-es2015-modules-umd "^6.24.1"
+    babel-plugin-transform-es2015-object-super "^6.24.1"
+    babel-plugin-transform-es2015-parameters "^6.24.1"
+    babel-plugin-transform-es2015-shorthand-properties "^6.24.1"
     babel-plugin-transform-es2015-spread "^6.22.0"
-    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.24.1"
     babel-plugin-transform-es2015-template-literals "^6.22.0"
     babel-plugin-transform-es2015-typeof-symbol "^6.22.0"
-    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
-    babel-plugin-transform-regenerator "^6.22.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.24.1"
+    babel-plugin-transform-regenerator "^6.24.1"
 
-babel-register@^6.24.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.24.0.tgz#5e89f8463ba9970356d02eb07dabe3308b080cfd"
+babel-register@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.24.1.tgz#7e10e13a2f71065bdfad5a1787ba45bca6ded75f"
   dependencies:
-    babel-core "^6.24.0"
+    babel-core "^6.24.1"
     babel-runtime "^6.22.0"
     core-js "^2.4.0"
     home-or-tmp "^2.0.0"
@@ -940,42 +972,42 @@ babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-template@^6.16.0, babel-template@^6.22.0, babel-template@^6.23.0, babel-template@^6.3.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.23.0.tgz#04d4f270adbb3aa704a8143ae26faa529238e638"
+babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.3.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
-    babylon "^6.11.0"
+    babel-traverse "^6.25.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
     lodash "^4.2.0"
 
-babel-traverse@^6.18.0, babel-traverse@^6.22.0, babel-traverse@^6.23.0, babel-traverse@^6.23.1:
-  version "6.23.1"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.23.1.tgz#d3cb59010ecd06a97d81310065f966b699e14f48"
+babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1"
   dependencies:
     babel-code-frame "^6.22.0"
     babel-messages "^6.23.0"
     babel-runtime "^6.22.0"
-    babel-types "^6.23.0"
-    babylon "^6.15.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
     debug "^2.2.0"
     globals "^9.0.0"
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.22.0, babel-types@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.23.0.tgz#bb17179d7538bad38cd0c9e115d340f77e7e9acf"
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
   dependencies:
     babel-runtime "^6.22.0"
     esutils "^2.0.2"
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
-babylon@^6.11.0, babylon@^6.13.0, babylon@^6.15.0:
-  version "6.16.1"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3"
+babylon@^6.13.0, babylon@^6.17.2:
+  version "6.17.3"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.3.tgz#1327d709950b558f204e5352587fd0290f8d8e48"
 
 backo2@1.0.2:
   version "1.0.2"
@@ -1005,6 +1037,10 @@ batch@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
 
+batch@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
+
 bcrypt-pbkdf@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
@@ -1035,6 +1071,12 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
+blocking-proxy@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/blocking-proxy/-/blocking-proxy-0.0.5.tgz#462905e0dcfbea970f41aa37223dda9c07b1912b"
+  dependencies:
+    minimist "^1.2.0"
+
 bluebird@^3.3.0, bluebird@^3.4.7:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
@@ -1044,19 +1086,19 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.6.tgz#53344adb14617a13f6e8dd2ce28905d1c0ba3215"
 
 body-parser@^1.16.1:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.17.1.tgz#75b3bc98ddd6e7e0d8ffe750dfaca5c66993fa47"
+  version "1.17.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.17.2.tgz#f8892abc8f9e627d42aedafbca66bf5ab99104ee"
   dependencies:
     bytes "2.4.0"
     content-type "~1.0.2"
-    debug "2.6.1"
+    debug "2.6.7"
     depd "~1.1.0"
     http-errors "~1.6.1"
     iconv-lite "0.4.15"
     on-finished "~2.3.0"
     qs "6.4.0"
     raw-body "~2.2.0"
-    type-is "~1.6.14"
+    type-is "~1.6.15"
 
 boolbase@~1.0.0:
   version "1.0.0"
@@ -1068,9 +1110,9 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
-brace-expansion@^1.0.0:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
+brace-expansion@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.7.tgz#3effc3c50e000531fb720eaff80f0ae8ef23cf59"
   dependencies:
     balanced-match "^0.4.1"
     concat-map "0.0.1"
@@ -1099,9 +1141,9 @@ browser-resolve@^1.11.0:
   dependencies:
     resolve "1.1.7"
 
-browser-sync-client@2.4.5:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/browser-sync-client/-/browser-sync-client-2.4.5.tgz#976afab1a54f255baa38fe22ae3c0d3753ad337b"
+browser-sync-client@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/browser-sync-client/-/browser-sync-client-2.5.1.tgz#ec1ad69a49c2e2d4b645b18b1c06c29b3d9af8eb"
   dependencies:
     etag "^1.7.0"
     fresh "^0.3.0"
@@ -1118,19 +1160,19 @@ browser-sync-ui@0.6.3:
     weinre "^2.0.0-pre-I0Z7U9OV"
 
 browser-sync@^2.18.5:
-  version "2.18.8"
-  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.18.8.tgz#2fb4de253798d7cfb839afb9c2f801968490cec2"
+  version "2.18.12"
+  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.18.12.tgz#bbaa0a17a961e2b5f0a8e760e695027186664779"
   dependencies:
-    browser-sync-client "2.4.5"
+    browser-sync-client "2.5.1"
     browser-sync-ui "0.6.3"
     bs-recipes "1.3.4"
-    chokidar "1.6.1"
+    chokidar "1.7.0"
     connect "3.5.0"
     dev-ip "^1.0.1"
     easy-extender "2.3.2"
     eazy-logger "3.0.2"
     emitter-steward "^1.0.0"
-    fs-extra "1.0.0"
+    fs-extra "3.0.1"
     http-proxy "1.15.2"
     immutable "3.8.1"
     localtunnel "1.8.2"
@@ -1141,7 +1183,7 @@ browser-sync@^2.18.5:
     resp-modifier "6.0.2"
     rx "4.1.0"
     serve-index "1.8.0"
-    serve-static "1.11.1"
+    serve-static "1.12.2"
     server-destroy "1.0.1"
     socket.io "1.6.0"
     socket.io-client "1.6.0"
@@ -1199,7 +1241,7 @@ browserify-zlib@^0.1.4:
   dependencies:
     pako "~0.2.0"
 
-browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.6:
+browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
   version "1.7.7"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
   dependencies:
@@ -1233,10 +1275,6 @@ bubleify@^0.5.1:
     buble "^0.12.0"
     object-assign "^4.0.1"
 
-buffer-shims@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
-
 buffer-xor@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
@@ -1296,17 +1334,17 @@ camelcase@^3.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
 caniuse-api@^1.5.2:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.3.tgz#5018e674b51c393e4d50614275dc017e27c4a2a2"
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
   dependencies:
-    browserslist "^1.0.1"
-    caniuse-db "^1.0.30000346"
-    lodash.memoize "^4.1.0"
-    lodash.uniq "^4.3.0"
+    browserslist "^1.3.6"
+    caniuse-db "^1.0.30000529"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
 
-caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000646"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000646.tgz#c724b90d61df24286e015fc528d062073c00def4"
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+  version "1.0.30000680"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000680.tgz#d76ebeaaeb82e3d9952bfdc5c231c4f83cd48144"
 
 canonical-path@0.0.2:
   version "0.0.2"
@@ -1347,9 +1385,9 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chokidar@1.6.1, chokidar@^1.4.1, chokidar@^1.4.3, chokidar@^1.6.0, chokidar@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+chokidar@1.7.0, chokidar@^1.4.1, chokidar@^1.4.3, chokidar@^1.6.0, chokidar@^1.6.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   dependencies:
     anymatch "^1.3.0"
     async-each "^1.0.0"
@@ -1362,7 +1400,7 @@ chokidar@1.6.1, chokidar@^1.4.1, chokidar@^1.4.3, chokidar@^1.6.0, chokidar@^1.6
   optionalDependencies:
     fsevents "^1.0.0"
 
-cipher-base@^1.0.0, cipher-base@^1.0.1:
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.3.tgz#eeabf194419ce900da3018c207d212f2a6df0a07"
   dependencies:
@@ -1374,9 +1412,9 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
-clean-css@4.0.x:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.10.tgz#6be448d6ba8c767654ebe11f158b97a887cb713f"
+clean-css@4.1.x:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.3.tgz#07cfe8980edb20d455ddc23aadcf1e04c6e509ce"
   dependencies:
     source-map "0.5.x"
 
@@ -1406,17 +1444,31 @@ cliui@^3.0.3, cliui@^3.2.0:
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
+clone-deep@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.2.4.tgz#4e73dd09e9fb971cc38670c5dced9c1896481cc6"
+  dependencies:
+    for-own "^0.1.3"
+    is-plain-object "^2.0.1"
+    kind-of "^3.0.2"
+    lazy-cache "^1.0.3"
+    shallow-clone "^0.1.2"
+
 clone@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
 
+clone@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
 
 coa@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.2.tgz#2ba9fec3b4aa43d7a49d7e6c3561e92061b6bcec"
   dependencies:
     q "^1.1.2"
 
@@ -1480,7 +1532,7 @@ commander@2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
 
-commander@2.9.x, commander@^2.2.0, commander@^2.8.1, commander@^2.9.0:
+commander@2.9.x, commander@^2.2.0, commander@^2.8.1, commander@^2.9.0, commander@~2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
   dependencies:
@@ -1578,11 +1630,11 @@ connect@3.5.0:
     utils-merge "1.0.0"
 
 connect@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.0.tgz#f09a4f7dcd17324b663b725c815bdb1c4158a46e"
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.2.tgz#694e8d20681bfe490282c8ab886be98f09f42fe7"
   dependencies:
-    debug "2.6.1"
-    finalhandler "1.0.0"
+    debug "2.6.7"
+    finalhandler "1.0.3"
     parseurl "~1.3.1"
     utils-merge "1.0.0"
 
@@ -1624,6 +1676,12 @@ core-js@^2.2.0, core-js@^2.4.0, core-js@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
 
+core-object@^3.1.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/core-object/-/core-object-3.1.3.tgz#df399b3311bdb0c909e8aae8929fc3c1c4b25880"
+  dependencies:
+    chalk "^1.1.3"
+
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -1632,6 +1690,18 @@ corser@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87"
 
+cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.3.tgz#952771eb0dddc1cb3fa2f6fbe51a522e93b3ee0a"
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
 create-ecdh@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
@@ -1639,21 +1709,25 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
-create-hash@^1.1.0, create-hash@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.2.tgz#51210062d7bb7479f6c65bb41a92208b1d61abad"
+create-hash@^1.1.0, create-hash@^1.1.1, create-hash@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
   dependencies:
     cipher-base "^1.0.1"
     inherits "^2.0.1"
-    ripemd160 "^1.0.0"
-    sha.js "^2.3.6"
+    ripemd160 "^2.0.0"
+    sha.js "^2.4.0"
 
-create-hmac@^1.1.0, create-hmac@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.4.tgz#d3fb4ba253eb8b3f56e39ea2fbcb8af747bd3170"
+create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
   dependencies:
+    cipher-base "^1.0.3"
     create-hash "^1.1.0"
     inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
 
 cross-spawn@^3.0.0:
   version "3.0.1"
@@ -1704,6 +1778,25 @@ css-loader@^0.26.1:
     postcss-modules-values "^1.1.0"
     source-list-map "^0.1.7"
 
+css-loader@^0.28.1:
+  version "0.28.4"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
+  dependencies:
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano ">=2.6.1 <4"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^0.1.7"
+
 css-parse@1.7.x:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
@@ -1717,14 +1810,6 @@ css-select@^1.1.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
-css-selector-tokenizer@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
-  dependencies:
-    cssesc "^0.1.0"
-    fastparse "^1.1.1"
-    regexpu-core "^1.0.0"
-
 css-selector-tokenizer@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
@@ -1802,18 +1887,18 @@ dashdash@^1.12.0:
     assert-plus "^1.0.0"
 
 date-fns@^1.23.0:
-  version "1.28.2"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.28.2.tgz#19e4192d68875c0bf7c9537e3f296a8ec64853ef"
+  version "1.28.5"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.28.5.tgz#257cfc45d322df45ef5658665967ee841cd73faf"
 
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@*, debug@2, debug@^2.1.1, debug@^2.1.3, debug@^2.2.0:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.3.tgz#0f7eb8c30965ec08c72accfa0130c8b79984141d"
+debug@*, debug@2, debug@2.6.8, debug@^2.1.1, debug@^2.2.0, debug@^2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
   dependencies:
-    ms "0.7.2"
+    ms "2.0.0"
 
 debug@0.7.4:
   version "0.7.4"
@@ -1831,19 +1916,25 @@ debug@2.3.3:
   dependencies:
     ms "0.7.2"
 
-debug@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.1.tgz#79855090ba2c4e3115cc7d8769491d58f0491351"
+debug@2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.4.tgz#7586a9b3c39741c0282ae33445c4e8ac74734fe0"
   dependencies:
-    ms "0.7.2"
+    ms "0.7.3"
+
+debug@2.6.7:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
+  dependencies:
+    ms "2.0.0"
 
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
 deep-extend@~0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
 
 defined@^1.0.0:
   version "1.0.0"
@@ -1894,6 +1985,10 @@ detect-indent@^4.0.0:
   dependencies:
     repeating "^2.0.0"
 
+detect-node@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
+
 dev-ip@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dev-ip/-/dev-ip-1.0.1.tgz#a76a3ed1855be7a012bb8ac16cb80f3c00dc28f0"
@@ -2015,8 +2110,8 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
 electron-to-chromium@^1.2.7:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.2.tgz#b8ce5c93b308db0e92f6d0435c46ddec8f6363ab"
+  version "1.3.14"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.14.tgz#64af0f9efd3c3c6acd57d71f83b49ca7ee9c4b43"
 
 elliptic@^6.0.0:
   version "6.4.0"
@@ -2202,10 +2297,6 @@ etag@^1.7.0, etag@~1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051"
 
-etag@~1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
-
 eventemitter3@1.x.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
@@ -2214,7 +2305,7 @@ events@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
 
-eventsource@0.1.6, eventsource@~0.1.6:
+eventsource@0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
   dependencies:
@@ -2274,8 +2365,8 @@ express@2.5.x:
     qs "0.4.x"
 
 express@^4.13.3:
-  version "4.15.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.15.2.tgz#af107fc148504457f2dca9a6f2571d7129b97b35"
+  version "4.15.3"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.15.3.tgz#bab65d0f03aa80c358408972fc700f916944b662"
   dependencies:
     accepts "~1.3.3"
     array-flatten "1.1.1"
@@ -2283,37 +2374,39 @@ express@^4.13.3:
     content-type "~1.0.2"
     cookie "0.3.1"
     cookie-signature "1.0.6"
-    debug "2.6.1"
+    debug "2.6.7"
     depd "~1.1.0"
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
     etag "~1.8.0"
-    finalhandler "~1.0.0"
+    finalhandler "~1.0.3"
     fresh "0.5.0"
     merge-descriptors "1.0.1"
     methods "~1.1.2"
     on-finished "~2.3.0"
     parseurl "~1.3.1"
     path-to-regexp "0.1.7"
-    proxy-addr "~1.1.3"
+    proxy-addr "~1.1.4"
     qs "6.4.0"
     range-parser "~1.2.0"
-    send "0.15.1"
-    serve-static "1.12.1"
+    send "0.15.3"
+    serve-static "1.12.3"
     setprototypeof "1.0.3"
     statuses "~1.3.1"
-    type-is "~1.6.14"
+    type-is "~1.6.15"
     utils-merge "1.0.0"
-    vary "~1.1.0"
+    vary "~1.1.1"
 
 extend@3, extend@^3.0.0, extend@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
 
-external-editor@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.1.tgz#4c597c6c88fa6410e41dbbaa7b1be2336aa31095"
+external-editor@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.4.tgz#1ed9199da9cbfe2ef2f7a31b2fde8b0d12368972"
   dependencies:
+    iconv-lite "^0.4.17"
+    jschardet "^1.4.2"
     tmp "^0.0.31"
 
 extglob@^0.3.1:
@@ -2330,14 +2423,14 @@ extract-text-webpack-plugin@2.0.0-beta.5:
     loader-utils "^0.2.3"
     webpack-sources "^0.1.0"
 
-extract-text-webpack-plugin@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.0.0.tgz#8640f72609800a3528f13a2a9634d566a5c1ae60"
+extract-text-webpack-plugin@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.2.tgz#756ef4efa8155c3681833fbc34da53b941746d6c"
   dependencies:
-    ajv "^4.11.2"
     async "^2.1.2"
     loader-utils "^1.0.2"
-    webpack-sources "^0.1.0"
+    schema-utils "^0.3.0"
+    webpack-sources "^1.0.1"
 
 extract-zip@~1.5.0:
   version "1.5.0"
@@ -2399,8 +2492,8 @@ file-url@^1.0.1:
     meow "^3.7.0"
 
 filename-regex@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
 
 fill-range@^2.1.0:
   version "2.2.3"
@@ -2422,11 +2515,11 @@ finalhandler@0.5.0:
     statuses "~1.3.0"
     unpipe "~1.0.0"
 
-finalhandler@1.0.0, finalhandler@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.0.tgz#b5691c2c0912092f18ac23e9416bde5cd7dc6755"
+finalhandler@1.0.3, finalhandler@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.3.tgz#ef47e77950e999780e86022a560e3217e0d0cc89"
   dependencies:
-    debug "2.6.1"
+    debug "2.6.7"
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
     on-finished "~2.3.0"
@@ -2451,11 +2544,15 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+for-in@^0.1.3:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
-for-own@^0.1.4:
+for-own@^0.1.3, for-own@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
   dependencies:
@@ -2466,8 +2563,8 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
 
 form-data@~2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.2.tgz#89c3534008b97eada4cbb157d58f6f5df025eae4"
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.5"
@@ -2481,27 +2578,27 @@ forwarded@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
 
-fresh@0.3.0, fresh@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
-
 fresh@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
 
+fresh@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+
 fs-access@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/fs-access/-/fs-access-1.0.1.tgz#d6a87f262271cefebec30c553407fb995da8777a"
   dependencies:
     null-check "^1.0.0"
 
-fs-extra@1.0.0, fs-extra@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950"
+fs-extra@3.0.1, fs-extra@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
   dependencies:
     graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
+    jsonfile "^3.0.0"
+    universalify "^0.1.0"
 
 fs-extra@^0.23.1:
   version "0.23.1"
@@ -2512,12 +2609,13 @@ fs-extra@^0.23.1:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^2.0.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-2.1.2.tgz#046c70163cef9aad46b0e4a7fa467fb22d71de35"
+fs-extra@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950"
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^2.1.0"
+    klaw "^1.0.0"
 
 fs-readdir-recursive@^1.0.0:
   version "1.0.0"
@@ -2555,9 +2653,9 @@ function-bind@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
 
-gauge@~2.7.1:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.3.tgz#1c23855f962f17b3ad3d0dc7443f304542edfe09"
+gauge@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
   dependencies:
     aproba "^1.0.3"
     console-control-strings "^1.0.0"
@@ -2593,8 +2691,8 @@ get-stdin@^4.0.1:
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
 
 getpass@^0.1.1:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
   dependencies:
     assert-plus "^1.0.0"
 
@@ -2629,14 +2727,14 @@ glob@^3.2.11:
     inherits "2"
     minimatch "0.3"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@~7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.1, glob@~7.1.1:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.2"
+    minimatch "^3.0.4"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
@@ -2651,8 +2749,8 @@ glob@~5.0.0:
     path-is-absolute "^1.0.0"
 
 globals@^9.0.0:
-  version "9.17.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.17.0.tgz#0c0ca696d9b9bb694d2e5470bd37777caad50286"
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
 globby@^5.0.0:
   version "5.0.0"
@@ -2681,7 +2779,7 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
-handle-thing@^1.2.4:
+handle-thing@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
 
@@ -2755,6 +2853,12 @@ has@^1.0.1:
   dependencies:
     function-bind "^1.0.2"
 
+hash-base@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+  dependencies:
+    inherits "^2.0.1"
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.0.3.tgz#1332ff00156c0a0ffdd8236013d07b77a0451573"
@@ -2785,9 +2889,22 @@ he@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/he/-/he-0.5.0.tgz#2c05ffaef90b68e860f3fd2b54ef580989277ee2"
 
+heimdalljs-logger@^0.1.9:
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/heimdalljs-logger/-/heimdalljs-logger-0.1.9.tgz#d76ada4e45b7bb6f786fc9c010a68eb2e2faf176"
+  dependencies:
+    debug "^2.2.0"
+    heimdalljs "^0.2.0"
+
+heimdalljs@^0.2.0, heimdalljs@^0.2.4:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/heimdalljs/-/heimdalljs-0.2.5.tgz#6aa54308eee793b642cff9cf94781445f37730ac"
+  dependencies:
+    rsvp "~3.2.1"
+
 hmac-drbg@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.0.tgz#3db471f45aae4a994a0688322171f51b8b91bee5"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
   dependencies:
     hash.js "^1.0.3"
     minimalistic-assert "^1.0.0"
@@ -2805,8 +2922,8 @@ home-or-tmp@^2.0.0:
     os-tmpdir "^1.0.1"
 
 hosted-git-info@^2.1.4:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.4.1.tgz#4b0445e41c004a8bd1337773a4ff790ca40318c8"
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.4.2.tgz#0076b9f46a270506ddbaaea56496897460612a67"
 
 hpack.js@^2.1.6:
   version "2.1.6"
@@ -2822,8 +2939,8 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
 
 html-entities@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.0.tgz#41948caf85ce82fed36e4e6a0ed371a6664379e2"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
 html-loader@^0.4.3:
   version "0.4.5"
@@ -2836,17 +2953,17 @@ html-loader@^0.4.3:
     object-assign "^4.1.0"
 
 html-minifier@^3.0.1, html-minifier@^3.2.3:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.4.2.tgz#31896baaf735c1d95f7a0b7291f9dc36c0720752"
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.2.tgz#d73bc3ff448942408818ce609bf3fb0ea7ef4eb7"
   dependencies:
     camel-case "3.0.x"
-    clean-css "4.0.x"
+    clean-css "4.1.x"
     commander "2.9.x"
     he "1.1.x"
     ncname "1.0.x"
     param-case "2.1.x"
     relateurl "0.2.x"
-    uglify-js "2.8.x"
+    uglify-js "3.0.x"
 
 html-webpack-plugin@^2.16.1, html-webpack-plugin@^2.19.0:
   version "2.28.0"
@@ -2868,7 +2985,7 @@ htmlparser2@~3.3.0:
     domutils "1.1"
     readable-stream "1.0"
 
-http-deceiver@^1.2.4:
+http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
 
@@ -2889,7 +3006,7 @@ http-errors@~1.6.1:
     setprototypeof "1.0.3"
     statuses ">= 1.3.1 < 2"
 
-http-proxy-middleware@~0.17.1:
+http-proxy-middleware@~0.17.1, http-proxy-middleware@~0.17.4:
   version "0.17.4"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
   dependencies:
@@ -2949,17 +3066,27 @@ iconv-lite@0.4.15:
   version "0.4.15"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
 
-icss-replace-symbols@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
+iconv-lite@^0.4.17:
+  version "0.4.17"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.17.tgz#4fdaa3b38acbc2c031b045d0edcdfe1ecab18c8d"
+
+icss-replace-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+
+icss-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  dependencies:
+    postcss "^6.0.1"
 
 ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
 
 image-size@~0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.1.tgz#28eea8548a4b1443480ddddc1e083ae54652439f"
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.4.tgz#94e07beec0659386f1aefb84b2222e88405485cd"
 
 img-stats@^0.5.2:
   version "0.5.2"
@@ -3013,26 +3140,27 @@ ini@^1.3.4, ini@~1.3.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
 
 inquirer@^3.0.0:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.0.6.tgz#e04aaa9d05b7a3cb9b0f407d04375f0447190347"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.1.0.tgz#e05400d48b94937c2d3caa7038663ba9189aab01"
   dependencies:
-    ansi-escapes "^1.1.0"
+    ansi-escapes "^2.0.0"
     chalk "^1.0.0"
     cli-cursor "^2.1.0"
     cli-width "^2.0.0"
-    external-editor "^2.0.1"
+    external-editor "^2.0.4"
     figures "^2.0.0"
     lodash "^4.3.0"
     mute-stream "0.0.7"
     run-async "^2.2.0"
-    rx "^4.1.0"
+    rx-lite "^4.0.8"
+    rx-lite-aggregates "^4.0.8"
     string-width "^2.0.0"
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
 interpret@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.2.tgz#f4f623f0bb7122f15f5717c8e254b8161b5c5b2d"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
 
 invariant@^2.2.0:
   version "2.2.2"
@@ -3062,7 +3190,7 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.0.2:
+is-buffer@^1.0.2, is-buffer@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
 
@@ -3072,9 +3200,13 @@ is-builtin-module@^1.0.0:
   dependencies:
     builtin-modules "^1.0.0"
 
+is-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+
 is-dotfile@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
 
 is-equal-shallow@^0.1.3:
   version "0.1.3"
@@ -3168,6 +3300,12 @@ is-plain-obj@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
 
+is-plain-object@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.3.tgz#c15bf3e4b66b62d72efaf2925848663ecbc619b6"
+  dependencies:
+    isobject "^3.0.0"
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -3224,6 +3362,10 @@ isobject@^2.0.0:
   dependencies:
     isarray "1.0.0"
 
+isobject@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.0.tgz#39565217f3661789e8a0a0c080d5f7e6bc46e1a0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -3237,27 +3379,39 @@ istanbul-instrumenter-loader@^2.0.0:
     loader-utils "^0.2.16"
     object-assign "^4.1.0"
 
-istanbul-lib-coverage@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.0.2.tgz#87a0c015b6910651cb3b184814dfb339337e25e1"
+istanbul-lib-coverage@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
 
 istanbul-lib-instrument@^1.1.3:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.7.0.tgz#b8e0dc25709bb44e17336ab47b7bb5c97c23f659"
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.7.2.tgz#6014b03d3470fb77638d5802508c255c06312e56"
   dependencies:
     babel-generator "^6.18.0"
     babel-template "^6.16.0"
     babel-traverse "^6.18.0"
     babel-types "^6.18.0"
     babylon "^6.13.0"
-    istanbul-lib-coverage "^1.0.2"
+    istanbul-lib-coverage "^1.1.1"
     semver "^5.3.0"
 
 jasmine-core@~2.4.0, jasmine-core@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.4.1.tgz#6f83ab3a0f16951722ce07d206c773d57cc838be"
 
-jasmine@2.4.1, jasmine@~2.4.1:
+jasmine-core@~2.6.0:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.6.3.tgz#45072950e4a42b1e322fe55c001100a465d77815"
+
+jasmine@^2.5.3:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.6.0.tgz#6b22e70883e8e589d456346153b4d206ddbe217f"
+  dependencies:
+    exit "^0.1.2"
+    glob "^7.0.6"
+    jasmine-core "~2.6.0"
+
+jasmine@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.4.1.tgz#9016dda453213d27ac6d43dc4ea97315a189085e"
   dependencies:
@@ -3265,17 +3419,11 @@ jasmine@2.4.1, jasmine@~2.4.1:
     glob "^3.2.11"
     jasmine-core "~2.4.0"
 
-jasminewd2@0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-0.0.10.tgz#94f48ae2bc946cad643035467b4bb7ea9c1075ef"
+jasminewd2@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.1.0.tgz#da595275d1ae631de736ac0a7c7d85c9f73ef652"
 
-jodid25519@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/jodid25519/-/jodid25519-1.0.2.tgz#06d4912255093419477d425633606e0e90782967"
-  dependencies:
-    jsbn "~0.1.0"
-
-js-base64@^2.1.5, js-base64@^2.1.9:
+js-base64@^2.1.5, js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
 
@@ -3283,7 +3431,7 @@ js-tokens@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
 
-js-yaml@~3.7.0:
+js-yaml@^3.4.3, js-yaml@~3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
   dependencies:
@@ -3294,6 +3442,10 @@ jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
+jschardet@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/jschardet/-/jschardet-1.4.2.tgz#2aa107f142af4121d145659d44f50830961e699a"
+
 jsesc@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
@@ -3324,7 +3476,7 @@ json3@3.3.2, json3@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
 
-json5@^0.5.0:
+json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
 
@@ -3334,6 +3486,12 @@ jsonfile@^2.1.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonfile@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.0.tgz#92e7c7444e5ffd5fa32e6a9ae8b85034df8347d0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 jsonify@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
@@ -3352,8 +3510,8 @@ jsprim@^1.2.2:
     verror "1.3.6"
 
 karma-chrome-launcher@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-2.0.0.tgz#c2790c5a32b15577d0fff5a4d5a2703b3b439c25"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-2.1.1.tgz#216879c68ac04d8d5140e99619ba04b59afd46cf"
   dependencies:
     fs-access "^1.0.0"
     which "^1.2.1"
@@ -3387,7 +3545,7 @@ karma-sourcemap-loader@^0.3.7:
   dependencies:
     graceful-fs "^4.1.2"
 
-karma-webpack@^2.0.0, karma-webpack@^2.0.1:
+karma-webpack@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-2.0.3.tgz#39cebf5ca2580139b27f9ae69b78816b9c82fae6"
   dependencies:
@@ -3398,8 +3556,8 @@ karma-webpack@^2.0.0, karma-webpack@^2.0.1:
     webpack-dev-middleware "^1.0.11"
 
 karma@^1.3.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/karma/-/karma-1.5.0.tgz#9c4c14f0400bef2c04c8e8e6bff59371025cc009"
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-1.7.0.tgz#6f7a1a406446fa2e187ec95398698f4cee476269"
   dependencies:
     bluebird "^3.3.0"
     body-parser "^1.16.1"
@@ -3418,7 +3576,7 @@ karma@^1.3.0:
     lodash "^3.8.0"
     log4js "^0.6.31"
     mime "^1.3.4"
-    minimatch "^3.0.0"
+    minimatch "^3.0.2"
     optimist "^0.6.1"
     qjobs "^1.1.4"
     range-parser "^1.2.0"
@@ -3433,18 +3591,28 @@ kew@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/kew/-/kew-0.7.0.tgz#79d93d2d33363d6fdd2970b335d9141ad591d79b"
 
-kind-of@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
+kind-of@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
   dependencies:
     is-buffer "^1.0.2"
 
+kind-of@^3.0.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    is-buffer "^1.1.5"
+
 klaw@^1.0.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
   optionalDependencies:
     graceful-fs "^4.1.9"
 
+lazy-cache@^0.2.3:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
+
 lazy-cache@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
@@ -3455,11 +3623,13 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-less-loader@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-2.2.3.tgz#b6d8f8139c8493df09d992a93a00734b08f84528"
+less-loader@^4.0.2:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.0.4.tgz#b4a8c43843e65c67d2ea2eb1465b5c4233d5006a"
   dependencies:
-    loader-utils "^0.2.5"
+    clone "^2.1.1"
+    loader-utils "^1.1.0"
+    pify "^2.3.0"
 
 less@^2.7.2:
   version "2.7.2"
@@ -3474,6 +3644,12 @@ less@^2.7.2:
     request "^2.72.0"
     source-map "^0.5.3"
 
+license-webpack-plugin@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-0.4.3.tgz#f9d88d4ebc04407a0061e8ccac26571f88e51a16"
+  dependencies:
+    object-assign "^4.1.0"
+
 limiter@^1.0.5:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.0.tgz#6e2bd12ca3fcdaa11f224e2e53c896df3f08d913"
@@ -3502,7 +3678,7 @@ loader-runner@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
 
-loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.5, loader-utils@^0.2.9, loader-utils@~0.2.2, loader-utils@~0.2.5:
+loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.5, loader-utils@~0.2.2, loader-utils@~0.2.5:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   dependencies:
@@ -3511,7 +3687,7 @@ loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.2:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   dependencies:
@@ -3528,7 +3704,7 @@ localtunnel@1.8.2:
     request "2.78.0"
     yargs "3.29.0"
 
-lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.2.0:
+lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
 
@@ -3544,7 +3720,7 @@ lodash.isfinite@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
 
-lodash.memoize@^4.1.0:
+lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
@@ -3552,7 +3728,11 @@ lodash.mergewith@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
 
-lodash.uniq@^4.3.0:
+lodash.tail@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
+
+lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
@@ -3596,17 +3776,13 @@ lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
 
-lru-cache@2:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952"
-
-lru-cache@2.2.x:
+lru-cache@2, lru-cache@2.2.x:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
 
 lru-cache@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.2.tgz#1d17679c069cda5d040991a09dbc2c0db377e55e"
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.0.tgz#59be49a683b8d986a939f1ca60fdb6989f4b2046"
   dependencies:
     pseudomap "^1.0.1"
     yallist "^2.0.0"
@@ -3622,14 +3798,14 @@ magic-string@^0.14.0:
     vlq "^0.2.1"
 
 magic-string@^0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.19.0.tgz#198948217254e3e0b93080e01146b7c73b2a06b2"
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.19.1.tgz#14d768013caf2ec8fdea16a49af82fc377e75201"
   dependencies:
     vlq "^0.2.1"
 
 make-error@^1.1.1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.2.3.tgz#6c4402df732e0977ac6faf754a5074b3d2b1d19d"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.0.tgz#52ad3a339ccf10ce62b4040b708fe707244b8b96"
 
 map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
@@ -3642,14 +3818,14 @@ matcher-collection@^1.0.0:
     minimatch "^3.0.2"
 
 math-expression-evaluator@^1.2.14:
-  version "1.2.16"
-  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"
+  version "1.2.17"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
 
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
 
-memory-fs@^0.4.0, memory-fs@~0.4.1:
+memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
   dependencies:
@@ -3718,10 +3894,14 @@ mime@1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.4.tgz#11b5fdaf29c2509255176b80ad520294f5de92b7"
 
-mime@1.3.4, mime@1.3.x, "mime@>= 0.0.1", mime@^1.2.11, mime@^1.3.4:
+mime@1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
 
+mime@1.3.x, "mime@>= 0.0.1", mime@^1.2.11, mime@^1.3.4:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
+
 mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
@@ -3741,11 +3921,11 @@ minimatch@0.3:
     lru-cache "2"
     sigmund "~1.0.0"
 
-"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@~3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   dependencies:
-    brace-expansion "^1.0.0"
+    brace-expansion "^1.1.7"
 
 minimist@0.0.8, minimist@~0.0.1:
   version "0.0.8"
@@ -3755,6 +3935,13 @@ minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
+mixin-object@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
+  dependencies:
+    for-in "^0.1.3"
+    is-extendable "^0.1.1"
+
 mkdirp@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
@@ -3783,13 +3970,25 @@ ms@0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
 
+ms@0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.3.tgz#708155a5e44e33f5fd0fc53e81d0d40a91be1fff"
+
+ms@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-1.0.0.tgz#59adcd22edc543f7b5381862d31387b1f4bc9473"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
 nan@^2.3.0, nan@^2.3.2:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.1.tgz#d5b01691253326a97a2bbee9e61c55d8d60351e2"
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45"
 
 ncname@1.0.x:
   version "1.0.0"
@@ -3808,8 +4007,8 @@ no-case@^2.2.0:
     lower-case "^1.1.1"
 
 node-gyp@^3.3.1:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.0.tgz#7474f63a3a0501161dda0b6341f022f14c423fa6"
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
   dependencies:
     fstream "^1.0.0"
     glob "^7.0.3"
@@ -3858,8 +4057,8 @@ node-modules-path@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-modules-path/-/node-modules-path-1.0.1.tgz#40096b08ce7ad0ea14680863af449c7c75a5d1c8"
 
 node-pre-gyp@^0.6.29:
-  version "0.6.34"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.34.tgz#94ad1c798a11d7fc67381b50d47f8cc18d9799f7"
+  version "0.6.36"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.36.tgz#db604112cb74e0d477554e9b505b17abddfab786"
   dependencies:
     mkdirp "^0.5.1"
     nopt "^4.0.1"
@@ -3872,8 +4071,8 @@ node-pre-gyp@^0.6.29:
     tar-pack "^3.4.0"
 
 node-sass@^4.3.0:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.2.tgz#4012fa2bd129b1d6365117e88d9da0500d99da64"
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.3.tgz#d09c9d1179641239d1b97ffc6231fdcec53e1568"
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -3912,8 +4111,8 @@ nopt@^4.0.1:
     osenv "^0.1.4"
 
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.6.tgz#498fa420c96401f787402ba21e600def9f981fff"
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.8.tgz#d819eda2a9dedbd1ffa563ea4071d936782295bb"
   dependencies:
     hosted-git-info "^2.1.4"
     is-builtin-module "^1.0.0"
@@ -3940,12 +4139,12 @@ normalize-url@^1.4.0:
     sort-keys "^1.0.0"
 
 "npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.0.tgz#dc59bee85f64f00ed424efb2af0783df25d1c0b5"
   dependencies:
     are-we-there-yet "~1.1.2"
     console-control-strings "~1.1.0"
-    gauge "~2.7.1"
+    gauge "~2.7.3"
     set-blocking "~2.0.0"
 
 nth-check@~1.0.1:
@@ -3997,7 +4196,7 @@ object.omit@^2.0.0:
     for-own "^0.1.4"
     is-extendable "^0.1.1"
 
-obuf@^1.0.0, obuf@^1.1.0:
+obuf@^1.0.0, obuf@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
 
@@ -4196,10 +4395,14 @@ path-type@^1.0.0:
     pinkie-promise "^2.0.0"
 
 pbkdf2@^3.0.3:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.9.tgz#f2c4b25a600058b3c3773c086c37dbbee1ffe693"
+  version "3.0.12"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.12.tgz#be36785c5067ea48d806ff923288c5f750b6b8a2"
   dependencies:
-    create-hmac "^1.1.2"
+    create-hash "^1.1.2"
+    create-hmac "^1.1.4"
+    ripemd160 "^2.0.1"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
 
 pend@~1.2.0:
   version "1.2.0"
@@ -4223,7 +4426,7 @@ phantomjs-prebuilt@^2.1.7:
     request-progress "~2.0.1"
     which "~1.2.10"
 
-pify@^2.0.0:
+pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
@@ -4233,7 +4436,7 @@ pinkie-promise@^2.0.0:
   dependencies:
     pinkie "^2.0.0"
 
-pinkie@^2.0.0, pinkie@^2.0.4:
+pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
@@ -4320,12 +4523,37 @@ postcss-filter-plugins@^2.0.0:
     postcss "^5.0.4"
     uniqid "^4.0.0"
 
-postcss-loader@^0.13.0:
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-0.13.0.tgz#72fdaf0d29444df77d3751ce4e69dc40bc99ed85"
+postcss-load-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
   dependencies:
-    loader-utils "^0.2.15"
-    postcss "^5.2.0"
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.2.0"
+    postcss-load-plugins "^2.3.0"
+
+postcss-load-options@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
+  dependencies:
+    cosmiconfig "^2.1.1"
+    object-assign "^4.1.0"
+
+postcss-loader@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.3.3.tgz#a621ea1fa29062a83972a46f54486771301916eb"
+  dependencies:
+    loader-utils "^1.0.2"
+    object-assign "^4.1.1"
+    postcss "^5.2.15"
+    postcss-load-config "^1.2.0"
 
 postcss-merge-idents@^2.1.5:
   version "2.1.7"
@@ -4389,31 +4617,31 @@ postcss-minify-selectors@^2.0.4:
     postcss-selector-parser "^2.0.0"
 
 postcss-modules-extract-imports@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
   dependencies:
-    postcss "^5.0.4"
+    postcss "^6.0.1"
 
 postcss-modules-local-by-default@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
   dependencies:
-    css-selector-tokenizer "^0.6.0"
-    postcss "^5.0.4"
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
 
 postcss-modules-scope@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
   dependencies:
-    css-selector-tokenizer "^0.6.0"
-    postcss "^5.0.4"
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
 
 postcss-modules-values@^1.1.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
   dependencies:
-    icss-replace-symbols "^1.0.2"
-    postcss "^5.0.14"
+    icss-replace-symbols "^1.1.0"
+    postcss "^6.0.1"
 
 postcss-normalize-charset@^1.1.0:
   version "1.1.1"
@@ -4507,15 +4735,23 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.0, postcss@^5.2.16:
-  version "5.2.16"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.16.tgz#732b3100000f9ff8379a48a53839ed097376ad57"
+postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.15, postcss@^5.2.16:
+  version "5.2.17"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b"
   dependencies:
     chalk "^1.1.3"
     js-base64 "^2.1.9"
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postcss@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
+  dependencies:
+    chalk "^1.1.3"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
 prepend-http@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
@@ -4525,8 +4761,8 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
 pretty-error@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.0.3.tgz#bed3d816a008e76da617cde8216f4b778849b5d9"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.0.tgz#87f4e9d706a24c87d6cbee9fabec001fcf8c75d8"
   dependencies:
     renderkid "^2.0.1"
     utila "~0.4"
@@ -4540,8 +4776,8 @@ process-nextick-args@~1.0.6:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
 
 process@^0.11.0:
-  version "0.11.9"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
 progress@~1.1.8:
   version "1.1.8"
@@ -4553,27 +4789,27 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-protractor@~4.0.14:
-  version "4.0.14"
-  resolved "https://registry.yarnpkg.com/protractor/-/protractor-4.0.14.tgz#efc4a877fac3a182a9dded26cd5869f4762fd172"
+protractor@~5.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/protractor/-/protractor-5.1.2.tgz#9b221741709a4c62d5cd53c6aadd54a71137e95f"
   dependencies:
-    "@types/jasmine" "^2.5.36"
     "@types/node" "^6.0.46"
     "@types/q" "^0.0.32"
-    "@types/selenium-webdriver" "2.53.37"
-    adm-zip "0.4.7"
+    "@types/selenium-webdriver" "~2.53.39"
+    blocking-proxy "0.0.5"
     chalk "^1.1.3"
     glob "^7.0.3"
-    jasmine "2.4.1"
-    jasminewd2 "0.0.10"
+    jasmine "^2.5.3"
+    jasminewd2 "^2.1.0"
     optimist "~0.6.0"
     q "1.4.1"
     saucelabs "~1.3.0"
-    selenium-webdriver "2.53.3"
+    selenium-webdriver "3.0.1"
     source-map-support "~0.4.0"
-    webdriver-manager "^10.3.0"
+    webdriver-js-extender "^1.0.0"
+    webdriver-manager "^12.0.6"
 
-proxy-addr@~1.1.3:
+proxy-addr@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
   dependencies:
@@ -4635,8 +4871,8 @@ qs@~6.3.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
 
 query-string@^4.1.0:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.2.tgz#ec0fd765f58a50031a3968c2431386f8947a5cdd"
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
   dependencies:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
@@ -4653,6 +4889,10 @@ querystringify@0.0.x:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c"
 
+querystringify@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
+
 randomatic@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
@@ -4661,8 +4901,10 @@ randomatic@^1.1.3:
     kind-of "^3.0.2"
 
 randombytes@^2.0.0, randombytes@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.3.tgz#674c99760901c3c4112771a31e521dc349cc09ec"
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+  dependencies:
+    safe-buffer "^5.1.0"
 
 range-parser@^1.0.3, range-parser@^1.2.0, range-parser@~1.2.0:
   version "1.2.0"
@@ -4681,8 +4923,8 @@ raw-loader@^0.5.1, raw-loader@~0.5.1:
   resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
 
 rc@^1.1.7:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.0.tgz#c7de973b7b46297c041366b2fd3d2363b1697c66"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
   dependencies:
     deep-extend "~0.4.0"
     ini "~1.3.0"
@@ -4713,16 +4955,16 @@ readable-stream@1.0, readable-stream@~1.0.2:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.1.0, readable-stream@^2.1.4:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.6.tgz#8b43aed76e71483938d12a8d46c6cf1a00b1f816"
+readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.6, readable-stream@^2.2.9:
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.11.tgz#0796b31f8d7688007ff0b93a8088d34aa17c0f72"
   dependencies:
-    buffer-shims "^1.0.0"
     core-util-is "~1.0.0"
     inherits "~2.0.1"
     isarray "~1.0.0"
     process-nextick-args "~1.0.6"
-    string_decoder "~0.10.x"
+    safe-buffer "~5.0.1"
+    string_decoder "~1.0.0"
     util-deprecate "~1.0.1"
 
 readable-stream@~2.0.0:
@@ -4784,12 +5026,12 @@ regenerate@^1.2.1:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
 
 regenerator-runtime@^0.10.0:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
 
-regenerator-transform@0.9.8:
-  version "0.9.8"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c"
+regenerator-transform@0.9.11:
+  version "0.9.11"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.11.tgz#3a7d067520cb7b7176769eb5ff868691befe1283"
   dependencies:
     babel-runtime "^6.18.0"
     babel-types "^6.19.0"
@@ -4833,8 +5075,8 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
 
 remove-trailing-separator@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.0.1.tgz#615ebb96af559552d4bf4057c8436d486ab63cc4"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.0.2.tgz#69b062d978727ad14dc6b56ba4ab772fd8d70511"
 
 renderkid@^2.0.1:
   version "2.0.1"
@@ -4951,6 +5193,10 @@ require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
 
+require-from-string@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
@@ -4964,8 +5210,8 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
 resolve@^1.1.6, resolve@^1.1.7:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.2.tgz#1f0442c9e0cbb8136e87b9305f932f46c7f28235"
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
   dependencies:
     path-parse "^1.0.5"
 
@@ -4989,7 +5235,7 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.3, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1:
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
   dependencies:
@@ -4999,9 +5245,12 @@ rimraf@~2.2.6:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
 
-ripemd160@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
+  dependencies:
+    hash-base "^2.0.0"
+    inherits "^2.0.1"
 
 rollup-plugin-commonjs@^8.0.2:
   version "8.0.2"
@@ -5022,8 +5271,8 @@ rollup-plugin-node-resolve@2.0.0:
     resolve "^1.1.6"
 
 rollup-plugin-uglify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-uglify/-/rollup-plugin-uglify-1.0.1.tgz#11d0b0c8bcd2d07e6908f74fd16b0152390b922a"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-uglify/-/rollup-plugin-uglify-1.0.2.tgz#d4aa6f5df13522eae1ba17780c7c4c7096038359"
   dependencies:
     uglify-js "^2.6.1"
 
@@ -5044,45 +5293,66 @@ rsvp@^3.0.17:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.5.0.tgz#a62c573a4ae4e1dfd0697ebc6242e79c681eaa34"
 
+rsvp@~3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.2.1.tgz#07cb4a5df25add9e826ebc67dcc9fd89db27d84a"
+
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
   dependencies:
     is-promise "^2.1.0"
 
+rx-lite-aggregates@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
+  dependencies:
+    rx-lite "*"
+
+rx-lite@*, rx-lite@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
+
 rx@2.3.24:
   version "2.3.24"
   resolved "https://registry.yarnpkg.com/rx/-/rx-2.3.24.tgz#14f950a4217d7e35daa71bbcbe58eff68ea4b2b7"
 
-rx@4.1.0, rx@^4.1.0:
+rx@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
 
-rxjs@5.0.1, rxjs@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.0.1.tgz#3a69bdf9f0ca0a986303370d4708f72bdfac8356"
+rxjs@^5.0.1, rxjs@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.1.0.tgz#0aa9018b7f440b505fa42bd742b6738be550e720"
   dependencies:
     symbol-observable "^1.0.1"
 
-safe-buffer@^5.0.1:
+safe-buffer@^5.0.1, safe-buffer@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.0.tgz#fe4c8460397f9eaaaa58e73be46273408a45e223"
+
+safe-buffer@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
 
 sass-graph@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.1.2.tgz#965104be23e8103cb7e5f710df65935b317da57b"
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
   dependencies:
     glob "^7.0.0"
     lodash "^4.0.0"
-    yargs "^4.7.1"
+    scss-tokenizer "^0.2.3"
+    yargs "^7.0.0"
 
-sass-loader@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-4.1.1.tgz#79ef9468cf0bf646c29529e1f2cba6bd6e51c7bc"
+sass-loader@^6.0.3:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.5.tgz#a847910f36442aa56c5985879d54eb519e24a328"
   dependencies:
-    async "^2.0.1"
-    loader-utils "^0.2.15"
-    object-assign "^4.1.0"
+    async "^2.1.5"
+    clone-deep "^0.2.4"
+    loader-utils "^1.0.1"
+    lodash.tail "^4.1.1"
+    pify "^2.3.0"
 
 saucelabs@~1.3.0:
   version "1.3.0"
@@ -5098,21 +5368,43 @@ sax@0.6.x:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-0.6.1.tgz#563b19c7c1de892e09bfc4f2fc30e3c27f0952b9"
 
-sax@~1.2.1:
+sax@>=0.6.0, sax@~1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
 
+schema-utils@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+  dependencies:
+    ajv "^5.0.0"
+
 script-loader@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/script-loader/-/script-loader-0.7.0.tgz#685dc7e7069e0dee7a92674f0ebc5b0f55baa5ec"
   dependencies:
     raw-loader "~0.5.1"
 
+scss-tokenizer@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
+  dependencies:
+    js-base64 "^2.1.8"
+    source-map "^0.4.2"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
 
-selenium-webdriver@2.53.3:
+selenium-webdriver@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-3.0.1.tgz#a2dea5da4a97f6672e89e7ca7276cefa365147a7"
+  dependencies:
+    adm-zip "^0.4.7"
+    rimraf "^2.5.4"
+    tmp "0.0.30"
+    xml2js "^0.4.17"
+
+selenium-webdriver@^2.53.2:
   version "2.53.3"
   resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-2.53.3.tgz#d29ff5a957dff1a1b49dc457756e4e4bfbdce085"
   dependencies:
@@ -5134,29 +5426,11 @@ semver@~5.0.1:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
 
-send@0.14.1:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
+send@0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.2.tgz#f91fab4403bcf87e716f70ceb5db2f578bdc17d6"
   dependencies:
-    debug "~2.2.0"
-    depd "~1.1.0"
-    destroy "~1.0.4"
-    encodeurl "~1.0.1"
-    escape-html "~1.0.3"
-    etag "~1.7.0"
-    fresh "0.3.0"
-    http-errors "~1.5.0"
-    mime "1.3.4"
-    ms "0.7.1"
-    on-finished "~2.3.0"
-    range-parser "~1.2.0"
-    statuses "~1.3.0"
-
-send@0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.15.1.tgz#8a02354c26e6f5cca700065f5f0cdeba90ec7b5f"
-  dependencies:
-    debug "2.6.1"
+    debug "2.6.4"
     depd "~1.1.0"
     destroy "~1.0.4"
     encodeurl "~1.0.1"
@@ -5165,12 +5439,30 @@ send@0.15.1:
     fresh "0.5.0"
     http-errors "~1.6.1"
     mime "1.3.4"
-    ms "0.7.2"
+    ms "1.0.0"
     on-finished "~2.3.0"
     range-parser "~1.2.0"
     statuses "~1.3.1"
 
-serve-index@1.8.0, serve-index@^1.7.2:
+send@0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.3.tgz#5013f9f99023df50d1bd9892c19e3defd1d53309"
+  dependencies:
+    debug "2.6.7"
+    depd "~1.1.0"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.0"
+    fresh "0.5.0"
+    http-errors "~1.6.1"
+    mime "1.3.4"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.1"
+
+serve-index@1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.8.0.tgz#7c5d96c13fb131101f93c1c5774f8516a1e78d3b"
   dependencies:
@@ -5182,23 +5474,35 @@ serve-index@1.8.0, serve-index@^1.7.2:
     mime-types "~2.1.11"
     parseurl "~1.3.1"
 
-serve-static@1.11.1:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.1.tgz#d6cce7693505f733c759de57befc1af76c0f0805"
+serve-index@^1.7.2:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.0.tgz#d2b280fc560d616ee81b48bf0fa82abed2485ce7"
   dependencies:
-    encodeurl "~1.0.1"
+    accepts "~1.3.3"
+    batch "0.6.1"
+    debug "2.6.8"
     escape-html "~1.0.3"
+    http-errors "~1.6.1"
+    mime-types "~2.1.15"
     parseurl "~1.3.1"
-    send "0.14.1"
 
-serve-static@1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.1.tgz#7443a965e3ced647aceb5639fa06bf4d1bbe0039"
+serve-static@1.12.2:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.2.tgz#e546e2726081b81b4bcec8e90808ebcdd323afba"
   dependencies:
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
     parseurl "~1.3.1"
-    send "0.15.1"
+    send "0.15.2"
+
+serve-static@1.12.3:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.3.tgz#9f4ba19e2f3030c547f8af99107838ec38d5b1e2"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.1"
+    send "0.15.3"
 
 server-destroy@1.0.1:
   version "1.0.1"
@@ -5224,12 +5528,21 @@ setprototypeof@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
 
-sha.js@^2.3.6:
+sha.js@^2.4.0, sha.js@^2.4.8:
   version "2.4.8"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.8.tgz#37068c2c476b6baf402d14a49c67f597921f634f"
   dependencies:
     inherits "^2.0.1"
 
+shallow-clone@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"
+  dependencies:
+    is-extendable "^0.1.1"
+    kind-of "^2.0.1"
+    lazy-cache "^0.2.3"
+    mixin-object "^2.0.1"
+
 sigmund@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
@@ -5239,8 +5552,8 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
 silent-error@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/silent-error/-/silent-error-1.0.1.tgz#71b7d503d1c6f94882b51b56be879b113cb4822c"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/silent-error/-/silent-error-1.1.0.tgz#2209706f1c850a9f1d10d0d840918b46f26e1bc9"
   dependencies:
     debug "^2.2.0"
 
@@ -5326,17 +5639,6 @@ socket.io@1.7.3:
     socket.io-client "1.7.3"
     socket.io-parser "2.3.1"
 
-sockjs-client@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.1.tgz#284843e9a9784d7c474b1571b3240fca9dda4bb0"
-  dependencies:
-    debug "^2.2.0"
-    eventsource "~0.1.6"
-    faye-websocket "~0.11.0"
-    inherits "^2.0.1"
-    json3 "^3.3.2"
-    url-parse "^1.1.1"
-
 sockjs-client@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.2.tgz#f0212a8550e4c9468c8cceaeefd2e3493c033ad5"
@@ -5365,6 +5667,14 @@ source-list-map@^0.1.7, source-list-map@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
 
+source-list-map@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.2.tgz#9889019d1024cce55cdc069498337ef6186a11a1"
+
+source-list-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
+
 source-map-explorer@^1.3.2:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/source-map-explorer/-/source-map-explorer-1.3.3.tgz#ff15cb038465fb652e57fa54ecd103f51e01bc43"
@@ -5378,17 +5688,17 @@ source-map-explorer@^1.3.2:
     temp "^0.8.3"
     underscore "^1.8.3"
 
-source-map-loader@^0.1.5:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.1.6.tgz#c09903da6d73b9e53b7ed8ee5245597051e98e91"
+source-map-loader@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.2.1.tgz#48126be9230bd47fad05e46a8c3c2e3d2dabe507"
   dependencies:
     async "^0.9.0"
     loader-utils "~0.2.2"
     source-map "~0.1.33"
 
-source-map-support@^0.4.0, source-map-support@^0.4.11, source-map-support@^0.4.2, source-map-support@~0.4.0:
-  version "0.4.14"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.14.tgz#9d4463772598b86271b4f523f6c1f4e02a7d6aef"
+source-map-support@^0.4.0, source-map-support@^0.4.15, source-map-support@^0.4.2, source-map-support@~0.4.0:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1"
   dependencies:
     source-map "^0.5.6"
 
@@ -5402,6 +5712,12 @@ source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, sourc
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
+source-map@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
 spawn-command@^0.0.2-1:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
@@ -5420,33 +5736,40 @@ spdx-license-ids@^1.0.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
 
-spdy-transport@^2.0.15:
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.0.18.tgz#43fc9c56be2cccc12bb3e2754aa971154e836ea6"
+spdy-transport@^2.0.18:
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.0.20.tgz#735e72054c486b2354fe89e702256004a39ace4d"
   dependencies:
-    debug "^2.2.0"
+    debug "^2.6.8"
+    detect-node "^2.0.3"
     hpack.js "^2.1.6"
-    obuf "^1.1.0"
-    readable-stream "^2.0.1"
-    wbuf "^1.4.0"
+    obuf "^1.1.1"
+    readable-stream "^2.2.9"
+    safe-buffer "^5.0.1"
+    wbuf "^1.7.2"
 
 spdy@^3.4.1:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.4.tgz#e0406407ca90ff01b553eb013505442649f5a819"
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
   dependencies:
-    debug "^2.2.0"
-    handle-thing "^1.2.4"
-    http-deceiver "^1.2.4"
+    debug "^2.6.8"
+    handle-thing "^1.2.5"
+    http-deceiver "^1.2.7"
+    safe-buffer "^5.0.1"
     select-hose "^2.0.0"
-    spdy-transport "^2.0.15"
+    spdy-transport "^2.0.18"
 
-sprintf-js@^1.0.3, sprintf-js@~1.0.2:
+sprintf-js@^1.0.3:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.1.tgz#36be78320afe5801f6cea3ee78b6e5aab940ea0c"
+
+sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
 
 sshpk@^1.7.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.11.0.tgz#2d8d5ebb4a6fab28ffba37fa62a90f4a3ea59d77"
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
   dependencies:
     asn1 "~0.2.3"
     assert-plus "^1.0.0"
@@ -5455,7 +5778,6 @@ sshpk@^1.7.0:
   optionalDependencies:
     bcrypt-pbkdf "^1.0.0"
     ecc-jsbn "~0.1.1"
-    jodid25519 "^1.0.0"
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
@@ -5477,12 +5799,12 @@ stream-browserify@^2.0.1:
     readable-stream "^2.0.2"
 
 stream-http@^2.3.1:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.6.3.tgz#4c3ddbf9635968ea2cfd4e48d43de5def2625ac3"
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.1.tgz#546a51741ad5a6b07e9e31b0b10441a917df528a"
   dependencies:
     builtin-status-codes "^3.0.0"
     inherits "^2.0.1"
-    readable-stream "^2.1.0"
+    readable-stream "^2.2.6"
     to-arraybuffer "^1.0.0"
     xtend "^4.0.0"
 
@@ -5516,6 +5838,12 @@ string_decoder@^0.10.25, string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
 
+string_decoder@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.2.tgz#b29e1f4e1125fa97a10382b8a533737b7491e179"
+  dependencies:
+    safe-buffer "~5.0.1"
+
 stringstream@~0.0.4:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
@@ -5538,6 +5866,10 @@ strip-bom@^2.0.0:
   dependencies:
     is-utf8 "^0.2.0"
 
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
@@ -5554,11 +5886,11 @@ style-loader@^0.13.1:
   dependencies:
     loader-utils "^1.0.2"
 
-stylus-loader@^2.4.0:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-2.5.1.tgz#d5ad8a7e0958adc12b8581e7bb169b9a61d54216"
+stylus-loader@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.1.tgz#77f4b34fd030d25b2617bcf5513db5b0730c4089"
   dependencies:
-    loader-utils "^0.2.9"
+    loader-utils "^1.0.2"
     lodash.clonedeep "^4.5.0"
     when "~3.6.x"
 
@@ -5666,6 +5998,12 @@ tmp@0.0.24:
   version "0.0.24"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.24.tgz#d6a5e198d14a9835cc6f2d7c3d9e302428c8cf12"
 
+tmp@0.0.30:
+  version "0.0.30"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"
+  dependencies:
+    os-tmpdir "~1.0.1"
+
 tmp@0.0.31, tmp@0.0.x, tmp@^0.0.31:
   version "0.0.31"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
@@ -5681,8 +6019,8 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
 
 to-fast-properties@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
 toposort@^1.0.0:
   version "1.0.3"
@@ -5706,9 +6044,9 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
-ts-node@^1.3.0:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-1.7.3.tgz#dee7f8a84751732d3c2e497cac5a02fb117dfee7"
+ts-node@~3.0.4:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-3.0.6.tgz#55127ff790c7eebf6ba68c1e6dde94b09aaa21e0"
   dependencies:
     arrify "^1.0.0"
     chalk "^1.1.1"
@@ -5716,20 +6054,16 @@ ts-node@^1.3.0:
     make-error "^1.1.1"
     minimist "^1.2.0"
     mkdirp "^0.5.1"
-    pinkie "^2.0.4"
     source-map-support "^0.4.0"
-    tsconfig "^5.0.2"
+    tsconfig "^6.0.0"
     v8flags "^2.0.11"
-    xtend "^4.0.0"
-    yn "^1.2.0"
+    yn "^2.0.0"
 
-tsconfig@^5.0.2:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/tsconfig/-/tsconfig-5.0.3.tgz#5f4278e701800967a8fc383fd19648878f2a6e3a"
+tsconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/tsconfig/-/tsconfig-6.0.0.tgz#6b0e8376003d7af1864f8df8f89dd0059ffcd032"
   dependencies:
-    any-promise "^1.3.0"
-    parse-json "^2.2.0"
-    strip-bom "^2.0.0"
+    strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
 tsickle@^0.21.0:
@@ -5741,6 +6075,10 @@ tsickle@^0.21.0:
     source-map "^0.5.6"
     source-map-support "^0.4.2"
 
+tslib@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
+
 tslint@^3.15.1:
   version "3.15.1"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-3.15.1.tgz#da165ca93d8fdc2c086b51165ee1bacb48c98ea5"
@@ -5771,7 +6109,7 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
 
-type-is@~1.6.14:
+type-is@~1.6.15:
   version "1.6.15"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
   dependencies:
@@ -5782,17 +6120,24 @@ typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-"typescript@>=2.0.0 <2.3.0", typescript@~2.2.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.2.2.tgz#606022508479b55ffa368b58fee963a03dfd7b0c"
+"typescript@>=2.0.0 <2.4.0", typescript@~2.3.2:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.4.tgz#3d38321828231e434f287514959c37a82b629f42"
 
 ua-parser-js@0.7.12:
   version "0.7.12"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
 
-uglify-js@2.8.x, uglify-js@^2.6.1, uglify-js@^2.7.5:
-  version "2.8.21"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.21.tgz#1733f669ae6f82fc90c7b25ec0f5c783ee375314"
+uglify-js@3.0.x:
+  version "3.0.15"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.15.tgz#aacb323a846b234602270dead8a32441a8806f42"
+  dependencies:
+    commander "~2.9.0"
+    source-map "~0.5.1"
+
+uglify-js@^2.6.1, uglify-js@^2.7.5, uglify-js@^2.8.5:
+  version "2.8.28"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.28.tgz#e335032df9bb20dcb918f164589d5af47f38834a"
   dependencies:
     source-map "~0.5.1"
     yargs "~3.10.0"
@@ -5854,6 +6199,10 @@ uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
 
+universalify@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.0.tgz#9eb1c4651debcc670cc94f1a75762332bb967778"
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -5881,10 +6230,10 @@ url-parse@1.0.x:
     requires-port "1.0.x"
 
 url-parse@^1.1.1:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.8.tgz#7a65b3a8d57a1e86af6b4e2276e34774167c0156"
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.9.tgz#c67f1d775d51f0a18911dd7b3ffad27bb9e5bd19"
   dependencies:
-    querystringify "0.0.x"
+    querystringify "~1.0.0"
     requires-port "1.0.x"
 
 url@^0.11.0:
@@ -5936,8 +6285,8 @@ uuid@^3.0.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
 
 v8flags@^2.0.10, v8flags@^2.0.11:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.12.tgz#73235d9f7176f8e8833fb286795445f7938d84e5"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
   dependencies:
     user-home "^1.1.1"
 
@@ -5948,7 +6297,7 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "~1.0.0"
     spdx-expression-parse "~1.0.0"
 
-vary@~1.1.0:
+vary@~1.1.0, vary@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
 
@@ -5963,8 +6312,8 @@ verror@1.3.6:
     extsprintf "1.0.2"
 
 vlq@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.1.tgz#14439d711891e682535467f8587c5630e4222a6c"
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.2.tgz#e316d5257b40b86bb43cb8d5fea5d7f54d6b0ca1"
 
 vm-browserify@0.0.4:
   version "0.0.4"
@@ -5977,13 +6326,13 @@ void-elements@^2.0.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
 walk-sync@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-0.3.1.tgz#558a16aeac8c0db59c028b73c66f397684ece465"
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-0.3.2.tgz#4827280afc42d0e035367c4a4e31eeac0d136f75"
   dependencies:
     ensure-posix-path "^1.0.0"
     matcher-collection "^1.0.0"
 
-watchpack@^1.2.0:
+watchpack@^1.2.0, watchpack@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.3.1.tgz#7d8693907b28ce6013e7f3610aa2a1acf07dad87"
   dependencies:
@@ -5991,15 +6340,22 @@ watchpack@^1.2.0:
     chokidar "^1.4.3"
     graceful-fs "^4.1.2"
 
-wbuf@^1.1.0, wbuf@^1.4.0:
+wbuf@^1.1.0, wbuf@^1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.2.tgz#d697b99f1f59512df2751be42769c1580b5801fe"
   dependencies:
     minimalistic-assert "^1.0.0"
 
-webdriver-manager@^10.3.0:
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/webdriver-manager/-/webdriver-manager-10.3.0.tgz#99314588a0b1dbe688c441d74288c6cb1875fa8b"
+webdriver-js-extender@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/webdriver-js-extender/-/webdriver-js-extender-1.0.0.tgz#81c533a9e33d5bfb597b4e63e2cdb25b54777515"
+  dependencies:
+    "@types/selenium-webdriver" "^2.53.35"
+    selenium-webdriver "^2.53.2"
+
+webdriver-manager@^12.0.6:
+  version "12.0.6"
+  resolved "https://registry.yarnpkg.com/webdriver-manager/-/webdriver-manager-12.0.6.tgz#3df1a481977010b4cbf8c9d85c7a577828c0e70b"
   dependencies:
     adm-zip "^0.4.7"
     chalk "^1.1.1"
@@ -6011,10 +6367,11 @@ webdriver-manager@^10.3.0:
     request "^2.78.0"
     rimraf "^2.5.2"
     semver "^5.3.0"
+    xml2js "^0.4.17"
 
-webpack-dev-middleware@^1.0.11, webpack-dev-middleware@^1.9.0:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.1.tgz#c6b4cf428139cf1aefbe06a0c00fdb4f8da2f893"
+webpack-dev-middleware@^1.0.11, webpack-dev-middleware@^1.10.2, webpack-dev-middleware@^1.9.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.2.tgz#2e252ce1dfb020dbda1ccb37df26f30ab014dbd1"
   dependencies:
     memory-fs "~0.4.1"
     mime "^1.3.4"
@@ -6043,9 +6400,9 @@ webpack-dev-server@2.4.1:
     webpack-dev-middleware "^1.9.0"
     yargs "^6.0.0"
 
-webpack-dev-server@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.3.0.tgz#0437704bbd4d941a6e4c061eb3cc232ed7d06101"
+webpack-dev-server@~2.4.5:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.4.5.tgz#31384ce81136be1080b4b4cde0eb9b90e54ee6cf"
   dependencies:
     ansi-html "0.0.7"
     chokidar "^1.6.0"
@@ -6053,16 +6410,16 @@ webpack-dev-server@~2.3.0:
     connect-history-api-fallback "^1.3.0"
     express "^4.13.3"
     html-entities "^1.2.0"
-    http-proxy-middleware "~0.17.1"
+    http-proxy-middleware "~0.17.4"
     opn "4.0.2"
     portfinder "^1.0.9"
     serve-index "^1.7.2"
     sockjs "0.3.18"
-    sockjs-client "1.1.1"
+    sockjs-client "1.1.2"
     spdy "^3.4.1"
     strip-ansi "^3.0.0"
     supports-color "^3.1.1"
-    webpack-dev-middleware "^1.9.0"
+    webpack-dev-middleware "^1.10.2"
     yargs "^6.0.0"
 
 webpack-merge@^2.4.0:
@@ -6084,7 +6441,21 @@ webpack-sources@^0.1.0, webpack-sources@^0.1.4:
     source-list-map "~0.1.7"
     source-map "~0.5.3"
 
-webpack@2.2.1, webpack@~2.2.0:
+webpack-sources@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb"
+  dependencies:
+    source-list-map "^1.1.1"
+    source-map "~0.5.3"
+
+webpack-sources@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.5.3"
+
+webpack@2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.2.1.tgz#7bb1d72ae2087dd1a4af526afec15eed17dda475"
   dependencies:
@@ -6109,6 +6480,32 @@ webpack@2.2.1, webpack@~2.2.0:
     webpack-sources "^0.1.4"
     yargs "^6.0.0"
 
+webpack@~2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.4.1.tgz#15a91dbe34966d8a4b99c7d656efd92a2e5a6f6a"
+  dependencies:
+    acorn "^5.0.0"
+    acorn-dynamic-import "^2.0.0"
+    ajv "^4.7.0"
+    ajv-keywords "^1.1.1"
+    async "^2.1.2"
+    enhanced-resolve "^3.0.0"
+    interpret "^1.0.0"
+    json-loader "^0.5.4"
+    json5 "^0.5.1"
+    loader-runner "^2.3.0"
+    loader-utils "^0.2.16"
+    memory-fs "~0.4.1"
+    mkdirp "~0.5.0"
+    node-libs-browser "^2.0.0"
+    source-map "^0.5.3"
+    supports-color "^3.1.0"
+    tapable "~0.2.5"
+    uglify-js "^2.8.5"
+    watchpack "^1.3.1"
+    webpack-sources "^0.2.3"
+    yargs "^6.0.0"
+
 websocket-driver@>=0.5.1:
   version "0.6.5"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36"
@@ -6150,10 +6547,10 @@ which@1, which@^1.2.1, which@^1.2.9, which@~1.2.10:
     isexe "^2.0.0"
 
 wide-align@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
   dependencies:
-    string-width "^1.0.1"
+    string-width "^1.0.2"
 
 window-size@0.1.0:
   version "0.1.0"
@@ -6193,20 +6590,13 @@ ws@1.1.1:
     options ">=0.0.5"
     ultron "1.0.x"
 
-ws@1.1.2:
+ws@1.1.2, ws@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.2.tgz#8a244fa052401e08c9886cf44a85189e1fd4067f"
   dependencies:
     options ">=0.0.5"
     ultron "1.0.x"
 
-ws@^1.0.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.4.tgz#57f40d036832e5f5055662a397c4de76ed66bf61"
-  dependencies:
-    options ">=0.0.5"
-    ultron "1.0.x"
-
 wtf-8@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a"
@@ -6226,9 +6616,18 @@ xml2js@0.4.4:
     sax "0.6.x"
     xmlbuilder ">=1.0.0"
 
-xmlbuilder@>=1.0.0:
-  version "8.2.2"
-  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-8.2.2.tgz#69248673410b4ba42e1a6136551d2922335aa773"
+xml2js@^0.4.17:
+  version "0.4.17"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.17.tgz#17be93eaae3f3b779359c795b419705a8817e868"
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "^4.1.0"
+
+xmlbuilder@>=1.0.0, xmlbuilder@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-4.2.1.tgz#aa58a3041a066f90eaa16c2f5389ff19f3f461a5"
+  dependencies:
+    lodash "^4.0.0"
 
 xmldom@^0.1.19:
   version "0.1.27"
@@ -6250,19 +6649,18 @@ yallist@^2.0.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
 
-yargs-parser@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"
-  dependencies:
-    camelcase "^3.0.0"
-    lodash.assign "^4.0.6"
-
 yargs-parser@^4.1.0, yargs-parser@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
   dependencies:
     camelcase "^3.0.0"
 
+yargs-parser@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
+  dependencies:
+    camelcase "^3.0.0"
+
 yargs@3.29.0:
   version "3.29.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.29.0.tgz#1aab9660eae79d8b8f675bcaeeab6ee34c2cf69c"
@@ -6293,25 +6691,6 @@ yargs@6.4.0:
     y18n "^3.2.1"
     yargs-parser "^4.1.0"
 
-yargs@^4.7.1:
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
-  dependencies:
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    lodash.assign "^4.0.3"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^1.0.1"
-    which-module "^1.0.0"
-    window-size "^0.2.0"
-    y18n "^3.2.1"
-    yargs-parser "^2.4.1"
-
 yargs@^6.0.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
@@ -6330,6 +6709,24 @@ yargs@^6.0.0:
     y18n "^3.2.1"
     yargs-parser "^4.2.0"
 
+yargs@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^5.0.0"
+
 yargs@~3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
@@ -6349,14 +6746,10 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-yn@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/yn/-/yn-1.2.0.tgz#d237a4c533f279b2b89d3acac2db4b8c795e4a63"
-
-zone.js@^0.7.2:
-  version "0.7.8"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.7.8.tgz#4f3fe8834d44597f2639053a0fa438df34fffded"
+yn@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"
 
 zone.js@^0.8.4:
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.5.tgz#7906e017482cbff4c3f079c5c34305ce941f5ba2"
+  version "0.8.12"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.12.tgz#86ff5053c98aec291a0bf4bbac501d694a05cfbb"
diff --git a/aio/tools/examples/test.js b/aio/tools/examples/test.js
new file mode 100644
index 0000000000..4620f9204f
--- /dev/null
+++ b/aio/tools/examples/test.js
@@ -0,0 +1,17 @@
+/*
+ * Use this script to run the tests for the doc generation
+ * We cannot use the Jasmine CLI directly because it doesn't seem to
+ * understand the glob and only runs one spec file.
+ *
+ * Equally we cannot use a jasmine.json config file because it doesn't
+ * allow us to set the projectBaseDir, which means that you have to run
+ * jasmine CLI from this directory.
+ *
+ * Using a file like this gives us full control and keeps the package.json
+ * file clean and simple.
+ */
+
+const Jasmine = require('jasmine');
+const jasmine = new Jasmine({ projectBaseDir: __dirname });
+jasmine.loadConfig({ spec_files: ['*.spec.js'] });
+jasmine.execute();
diff --git a/aio/tools/plunker-builder/builder.js b/aio/tools/plunker-builder/builder.js
index 59e246024a..a461bfd9ae 100644
--- a/aio/tools/plunker-builder/builder.js
+++ b/aio/tools/plunker-builder/builder.js
@@ -11,7 +11,7 @@ var globby = require('globby');
 var fileTranslator = require('./translator/fileTranslator');
 var indexHtmlRules = require('./translator/rules/indexHtml');
 var systemjsConfigExtrasRules = require('./translator/rules/systemjsConfigExtras');
-var regionExtractor = require('../../transforms/examples-package/services/region-parser');
+var regionExtractor = require('../transforms/examples-package/services/region-parser');
 
 class PlunkerBuilder {
   constructor(basePath, destPath, options) {
diff --git a/aio/tools/plunker-builder/generatePlunkers.js b/aio/tools/plunker-builder/generatePlunkers.js
index b48dd51615..ed02f7c508 100644
--- a/aio/tools/plunker-builder/generatePlunkers.js
+++ b/aio/tools/plunker-builder/generatePlunkers.js
@@ -3,7 +3,7 @@ const regularPlunker = require('./regularPlunker');
 const embeddedPlunker = require('./embeddedPlunker');
 
 const EXAMPLES_PATH = path.join(__dirname, '../../content/examples');
-const LIVE_EXAMPLES_PATH = path.join(__dirname, '../../src/content/live-examples');
+const LIVE_EXAMPLES_PATH = path.join(__dirname, '../../src/generated/live-examples');
 
 regularPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH);
 embeddedPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH);
diff --git a/aio/transforms/.eslintignore b/aio/tools/transforms/.eslintignore
similarity index 100%
rename from aio/transforms/.eslintignore
rename to aio/tools/transforms/.eslintignore
diff --git a/aio/transforms/.eslintrc.js b/aio/tools/transforms/.eslintrc.js
similarity index 100%
rename from aio/transforms/.eslintrc.js
rename to aio/tools/transforms/.eslintrc.js
diff --git a/aio/tools/transforms/README.md b/aio/tools/transforms/README.md
new file mode 100644
index 0000000000..768ba58c19
--- /dev/null
+++ b/aio/tools/transforms/README.md
@@ -0,0 +1,27 @@
+# Documentation Generation
+
+The dgeni tool is used to generate the documentation from the source files held in this repository.
+The documentation generation is configured by a dgeni package defined in `tools/transforms/angular.io-package/index.js`.
+This package, in turn requires a number of other packages, some are defined locally in the `tools/transforms` folder,
+such as `tools/transforms/cheatsheet-package` and `tools/transforms/content-package`, etc. And some are brought in from the
+`dgeni-packages` node modules, such as `jsdoc` and `nunjucks`.
+
+## Generating the docs
+
+To generate the documentation simply run `yarn docs` from the command line.
+
+## Testing the dgeni packages
+
+The local packages have unit tests that you can execute by running `yarn docs-test` from the command line.
+
+## What does it generate?
+
+The output from dgeni is written to files in the `src/generated` folder.
+
+Notably this includes a JSON file containing the partial HTML for each "page" of the documentation, such as API pages and guides.
+It also includes JSON files that contain metadata about the documentation such as navigation data and
+keywords for building a search index.
+
+## Viewing the docs
+
+You can view the pages by running `yarn start` and navigating to https://localhost:4200.
diff --git a/aio/tools/transforms/angular-api-package/index.js b/aio/tools/transforms/angular-api-package/index.js
new file mode 100644
index 0000000000..216b09f29b
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/index.js
@@ -0,0 +1,127 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+const Package = require('dgeni').Package;
+
+const basePackage = require('../angular-base-package');
+const typeScriptPackage = require('dgeni-packages/typescript');
+const { API_SOURCE_PATH, API_TEMPLATES_PATH, requireFolder } = require('../config');
+
+module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
+
+  // Register the processors
+  .processor(require('./processors/convertPrivateClassesToInterfaces'))
+  .processor(require('./processors/generateApiListDoc'))
+  .processor(require('./processors/addNotYetDocumentedProperty'))
+  .processor(require('./processors/mergeDecoratorDocs'))
+  .processor(require('./processors/extractDecoratedClasses'))
+  .processor(require('./processors/matchUpDirectiveDecorators'))
+  .processor(require('./processors/filterContainedDocs'))
+  .processor(require('./processors/markBarredODocsAsPrivate'))
+  .processor(require('./processors/filterPrivateDocs'))
+  .processor(require('./processors/computeSearchTitle'))
+  .processor(require('./processors/simplifyMemberAnchors'))
+
+  // Where do we get the source files?
+  .config(function(readTypeScriptModules, readFilesProcessor, collectExamples) {
+
+    // API files are typescript
+    readTypeScriptModules.basePath = API_SOURCE_PATH;
+    readTypeScriptModules.ignoreExportsMatching = [/^[_ɵ]|^VERSION$/];
+    readTypeScriptModules.hidePrivateMembers = true;
+    readTypeScriptModules.sourceFiles = [
+      'animations/index.ts',
+      'animations/browser/index.ts',
+      'animations/browser/testing/index.ts',
+      'common/http/index.ts',
+      'common/http/testing/index.ts',
+      'common/index.ts',
+      'common/testing/index.ts',
+      'core/index.ts',
+      'core/testing/index.ts',
+      'forms/index.ts',
+      'http/index.ts',
+      'http/testing/index.ts',
+      'platform-browser/index.ts',
+      'platform-browser/animations/index.ts',
+      'platform-browser/testing/index.ts',
+      'platform-browser-dynamic/index.ts',
+      'platform-browser-dynamic/testing/index.ts',
+      'platform-server/index.ts',
+      'platform-server/testing/index.ts',
+      'platform-webworker/index.ts',
+      'platform-webworker-dynamic/index.ts',
+      'router/index.ts',
+      'router/testing/index.ts',
+      'router/upgrade/index.ts',
+      'upgrade/index.ts',
+      'upgrade/static/index.ts',
+    ];
+
+    // API Examples
+    readFilesProcessor.sourceFiles = [
+      {
+        basePath: API_SOURCE_PATH,
+        include: API_SOURCE_PATH + '/examples/**/*',
+        fileReader: 'exampleFileReader'
+      }
+    ];
+    collectExamples.exampleFolders.push('examples');
+  })
+
+  // Configure jsdoc-style tag parsing
+  .config(function(parseTagsProcessor, getInjectables) {
+    // Load up all the tag definitions in the tag-defs folder
+    parseTagsProcessor.tagDefinitions =
+        parseTagsProcessor.tagDefinitions.concat(getInjectables(requireFolder(__dirname, './tag-defs')));
+
+    // We actually don't want to parse param docs in this package as we are getting the data out using TS
+    // TODO: rewire the param docs to the params extracted from TS
+    parseTagsProcessor.tagDefinitions.forEach(function(tagDef) {
+      if (tagDef.name === 'param') {
+        tagDef.docProperty = 'paramData';
+        tagDef.transforms = [];
+      }
+    });
+  })
+
+
+  .config(function(computePathsProcessor, EXPORT_DOC_TYPES, generateApiListDoc) {
+
+    const API_SEGMENT = 'api';
+
+    generateApiListDoc.outputFolder = API_SEGMENT;
+
+    computePathsProcessor.pathTemplates.push({
+      docTypes: ['module'],
+      getPath: function computeModulePath(doc) {
+        doc.moduleFolder = `${API_SEGMENT}/${doc.id.replace(/\/index$/, '')}`;
+        return doc.moduleFolder;
+      },
+      outputPathTemplate: '${moduleFolder}.json'
+    });
+    computePathsProcessor.pathTemplates.push({
+      docTypes: EXPORT_DOC_TYPES.concat(['decorator', 'directive', 'pipe']),
+      pathTemplate: '${moduleDoc.moduleFolder}/${name}',
+      outputPathTemplate: '${moduleDoc.moduleFolder}/${name}.json',
+    });
+  })
+
+  .config(function(templateFinder) {
+    // Where to find the templates for the API doc rendering
+    templateFinder.templateFolders.unshift(API_TEMPLATES_PATH);
+  })
+
+
+  .config(function(convertToJsonProcessor, postProcessHtml, EXPORT_DOC_TYPES, autoLinkCode) {
+    const DOCS_TO_CONVERT = EXPORT_DOC_TYPES.concat([
+      'decorator', 'directive', 'pipe', 'module'
+    ]);
+    convertToJsonProcessor.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
+    postProcessHtml.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
+    autoLinkCode.docTypes = DOCS_TO_CONVERT;
+  });
diff --git a/aio/transforms/angular.io-package/mocks/importedSrc.ts b/aio/tools/transforms/angular-api-package/mocks/importedSrc.ts
similarity index 100%
rename from aio/transforms/angular.io-package/mocks/importedSrc.ts
rename to aio/tools/transforms/angular-api-package/mocks/importedSrc.ts
diff --git a/aio/transforms/angular.io-package/mocks/testSrc.ts b/aio/tools/transforms/angular-api-package/mocks/testSrc.ts
similarity index 100%
rename from aio/transforms/angular.io-package/mocks/testSrc.ts
rename to aio/tools/transforms/angular-api-package/mocks/testSrc.ts
diff --git a/aio/transforms/angular.io-package/processors/addNotYetDocumentedProperty.js b/aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.js
similarity index 100%
rename from aio/transforms/angular.io-package/processors/addNotYetDocumentedProperty.js
rename to aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.js
diff --git a/aio/transforms/angular.io-package/processors/addNotYetDocumentedProperty.spec.js b/aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.spec.js
similarity index 96%
rename from aio/transforms/angular.io-package/processors/addNotYetDocumentedProperty.spec.js
rename to aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.spec.js
index ab71e43227..d6c9dbcf18 100644
--- a/aio/transforms/angular.io-package/processors/addNotYetDocumentedProperty.spec.js
+++ b/aio/tools/transforms/angular-api-package/processors/addNotYetDocumentedProperty.spec.js
@@ -5,7 +5,7 @@ describe('addNotYetDocumentedProperty', function() {
   var dgeni, injector, processor;
 
   beforeEach(function() {
-    dgeni = new Dgeni([testPackage('angular.io-package')]);
+    dgeni = new Dgeni([testPackage('angular-api-package')]);
     injector = dgeni.configureInjector();
     processor = injector.get('addNotYetDocumentedProperty');
   });
@@ -101,7 +101,7 @@ describe('addNotYetDocumentedProperty', function() {
   });
 
 
-  it('should not mark documents explicity tagged as `@noDescription`', function() {
+  it('should not mark documents explicitly tagged as `@noDescription`', function() {
     var a, a1, a2, b, b1, b2, c, c1, c2;
     var docs = [
       a = {
diff --git a/aio/tools/transforms/angular-api-package/processors/computeSearchTitle.js b/aio/tools/transforms/angular-api-package/processors/computeSearchTitle.js
new file mode 100644
index 0000000000..6ea06a0229
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/computeSearchTitle.js
@@ -0,0 +1,18 @@
+module.exports = function computeSearchTitleProcessor() {
+  return {
+    $runAfter: ['ids-computed'],
+    $runBefore: ['generateKeywordsProcessor'],
+    $process(docs) {
+      docs.forEach(doc => {
+        switch(doc.docType) {
+        case 'function':
+          doc.searchTitle = `${doc.name}()`;
+          break;
+        case 'module':
+          doc.searchTitle = `${doc.id} package`;
+          break;
+        }
+      });
+    }
+  };
+};
diff --git a/aio/tools/transforms/angular-api-package/processors/computeSearchTitle.spec.js b/aio/tools/transforms/angular-api-package/processors/computeSearchTitle.spec.js
new file mode 100644
index 0000000000..d90b707b50
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/computeSearchTitle.spec.js
@@ -0,0 +1,54 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./computeSearchTitle');
+const Dgeni = require('dgeni');
+
+describe('computeSearchTitle processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('computeSearchTitleProcessor');
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run after the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runAfter).toEqual(['ids-computed']);
+  });
+
+  it('should run before the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runBefore).toEqual(['generateKeywordsProcessor']);
+  });
+
+  it('should compute a search title for API docs', () => {
+    const processor = processorFactory();
+    const docs = [
+      { docType: 'class', name: 'MyClass' },
+      { docType: 'interface', name: 'MyInterface' },
+      { docType: 'enum', name: 'MyEnum' },
+      { docType: 'function', name: 'myFunction' },
+      { docType: 'pipe', name: 'MyPipe', pipeOptions: { name: 'myPipe' } },
+      { docType: 'directive', name: 'MyDirective', directiveOptions: {} },
+      { docType: 'decorator', name: 'MyDecorator' },
+      { docType: 'module', name: 'myModule', id: 'some/myModule' },
+      { docType: 'var', name: 'myVar' },
+      { docType: 'let', name: 'myLet' },
+      { docType: 'const', name: 'myConst' },
+      { docType: 'type-alias', name: 'myType' },
+    ];
+    processor.$process(docs);
+    expect(docs[0].searchTitle).toBeUndefined();
+    expect(docs[1].searchTitle).toBeUndefined();
+    expect(docs[2].searchTitle).toBeUndefined();
+    expect(docs[3].searchTitle).toEqual('myFunction()');
+    expect(docs[4].searchTitle).toBeUndefined();
+    expect(docs[5].searchTitle).toBeUndefined();
+    expect(docs[6].searchTitle).toBeUndefined();
+    expect(docs[7].searchTitle).toEqual('some/myModule package');
+    expect(docs[8].searchTitle).toBeUndefined();
+    expect(docs[9].searchTitle).toBeUndefined();
+    expect(docs[10].searchTitle).toBeUndefined();
+    expect(docs[11].searchTitle).toBeUndefined();
+  });
+});
diff --git a/aio/transforms/angular.io-package/processors/convertPrivateClassesToInterfaces.js b/aio/tools/transforms/angular-api-package/processors/convertPrivateClassesToInterfaces.js
similarity index 100%
rename from aio/transforms/angular.io-package/processors/convertPrivateClassesToInterfaces.js
rename to aio/tools/transforms/angular-api-package/processors/convertPrivateClassesToInterfaces.js
diff --git a/aio/transforms/angular.io-package/processors/extractDecoratedClasses.js b/aio/tools/transforms/angular-api-package/processors/extractDecoratedClasses.js
similarity index 100%
rename from aio/transforms/angular.io-package/processors/extractDecoratedClasses.js
rename to aio/tools/transforms/angular-api-package/processors/extractDecoratedClasses.js
diff --git a/aio/transforms/angular.io-package/processors/extractDecoratedClasses.spec.js b/aio/tools/transforms/angular-api-package/processors/extractDecoratedClasses.spec.js
similarity index 95%
rename from aio/transforms/angular.io-package/processors/extractDecoratedClasses.spec.js
rename to aio/tools/transforms/angular-api-package/processors/extractDecoratedClasses.spec.js
index a323945017..b626f6c130 100644
--- a/aio/transforms/angular.io-package/processors/extractDecoratedClasses.spec.js
+++ b/aio/tools/transforms/angular-api-package/processors/extractDecoratedClasses.spec.js
@@ -5,7 +5,7 @@ describe('extractDecoratedClasses processor', function() {
   var dgeni, injector, processor;
 
   beforeEach(function() {
-    dgeni = new Dgeni([testPackage('angular.io-package')]);
+    dgeni = new Dgeni([testPackage('angular-api-package')]);
     injector = dgeni.configureInjector();
     processor = injector.get('extractDecoratedClassesProcessor');
   });
diff --git a/aio/tools/transforms/angular-api-package/processors/filterContainedDocs.js b/aio/tools/transforms/angular-api-package/processors/filterContainedDocs.js
new file mode 100644
index 0000000000..7b24920d38
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/filterContainedDocs.js
@@ -0,0 +1,17 @@
+/**
+ * Remove docs that are contained in (owned by) another doc
+ * so that they don't get rendered as files in themselves.
+ */
+module.exports = function filterContainedDocs() {
+  return {
+    docTypes: ['member', 'function-overload'],
+    $runAfter: ['extra-docs-added'],
+    $runBefore: ['computing-paths'],
+    $process: function(docs) {
+      var docTypes = this.docTypes;
+      return docs.filter(function(doc) {
+        return docTypes.indexOf(doc.docType) === -1;
+      });
+    }
+  };
+};
diff --git a/aio/transforms/angular.io-package/processors/filterPrivateDocs.js b/aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.js
similarity index 100%
rename from aio/transforms/angular.io-package/processors/filterPrivateDocs.js
rename to aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.js
diff --git a/aio/transforms/angular.io-package/processors/filterPrivateDocs.spec.js b/aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.spec.js
similarity index 94%
rename from aio/transforms/angular.io-package/processors/filterPrivateDocs.spec.js
rename to aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.spec.js
index 1301118ed6..3f9831e4b5 100644
--- a/aio/transforms/angular.io-package/processors/filterPrivateDocs.spec.js
+++ b/aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.spec.js
@@ -5,7 +5,7 @@ const Dgeni = require('dgeni');
 describe('filterPrivateDocs processor', () => {
 
   it('should be available on the injector', () => {
-    const dgeni = new Dgeni([testPackage('angular.io-package')]);
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
     const injector = dgeni.configureInjector();
     const processor = injector.get('filterPrivateDocs');
     expect(processor.$process).toBeDefined();
diff --git a/aio/transforms/angular.io-package/processors/generateApiListDoc.js b/aio/tools/transforms/angular-api-package/processors/generateApiListDoc.js
similarity index 100%
rename from aio/transforms/angular.io-package/processors/generateApiListDoc.js
rename to aio/tools/transforms/angular-api-package/processors/generateApiListDoc.js
diff --git a/aio/transforms/angular.io-package/processors/generateApiListDoc.spec.js b/aio/tools/transforms/angular-api-package/processors/generateApiListDoc.spec.js
similarity index 99%
rename from aio/transforms/angular.io-package/processors/generateApiListDoc.spec.js
rename to aio/tools/transforms/angular-api-package/processors/generateApiListDoc.spec.js
index 83f79df765..1eb09830ca 100644
--- a/aio/transforms/angular.io-package/processors/generateApiListDoc.spec.js
+++ b/aio/tools/transforms/angular-api-package/processors/generateApiListDoc.spec.js
@@ -5,7 +5,7 @@ const Dgeni = require('dgeni');
 describe('generateApiListDoc processor', () => {
 
   it('should be available on the injector', () => {
-    const dgeni = new Dgeni([testPackage('angular.io-package')]);
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
     const injector = dgeni.configureInjector();
     const processor = injector.get('generateApiListDoc');
     expect(processor.$process).toBeDefined();
diff --git a/aio/transforms/angular.io-package/processors/markBarredODocsAsPrivate.js b/aio/tools/transforms/angular-api-package/processors/markBarredODocsAsPrivate.js
similarity index 100%
rename from aio/transforms/angular.io-package/processors/markBarredODocsAsPrivate.js
rename to aio/tools/transforms/angular-api-package/processors/markBarredODocsAsPrivate.js
diff --git a/aio/transforms/angular.io-package/processors/markBarredODocsAsPrivate.spec.js b/aio/tools/transforms/angular-api-package/processors/markBarredODocsAsPrivate.spec.js
similarity index 87%
rename from aio/transforms/angular.io-package/processors/markBarredODocsAsPrivate.spec.js
rename to aio/tools/transforms/angular-api-package/processors/markBarredODocsAsPrivate.spec.js
index 48151df634..d2601ca581 100644
--- a/aio/transforms/angular.io-package/processors/markBarredODocsAsPrivate.spec.js
+++ b/aio/tools/transforms/angular-api-package/processors/markBarredODocsAsPrivate.spec.js
@@ -2,10 +2,10 @@ const testPackage = require('../../helpers/test-package');
 const processorFactory = require('./markBarredODocsAsPrivate');
 const Dgeni = require('dgeni');
 
-describe('generateApiListDoc processor', () => {
+describe('markBarredODocsAsPrivate processor', () => {
 
   it('should be available on the injector', () => {
-    const dgeni = new Dgeni([testPackage('angular.io-package')]);
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
     const injector = dgeni.configureInjector();
     const processor = injector.get('markBarredODocsAsPrivate');
     expect(processor.$process).toBeDefined();
diff --git a/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.js b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.js
new file mode 100644
index 0000000000..9557ceac2b
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.js
@@ -0,0 +1,85 @@
+/**
+ * @dgProcessor
+ * @description
+ * Directives in Angular are specified by various decorators. In particular the `@Directive()`
+ * decorator on the class and various other property decorators, such as `@Input`.
+ *
+ * This processor will extract this decorator information and attach it as properties to the
+ * directive document.
+ *
+ * Notably, the `input` and `output` binding information can be specified
+ * either via property decorators (`@Input()`/`@Output()`) or by properties on the metadata
+ * passed to the `@Directive` decorator. This processor will collect up info from both and
+ * merge them.
+ */
+module.exports = function matchUpDirectiveDecorators() {
+  return {
+    $runAfter: ['ids-computed', 'paths-computed'],
+    $runBefore: ['rendering-docs'],
+    $process: function(docs) {
+      docs.forEach(function(doc) {
+        if (doc.docType === 'directive') {
+
+          doc.selector = stripQuotes(doc.directiveOptions.selector);
+          doc.exportAs = stripQuotes(doc.directiveOptions.exportAs);
+
+          doc.inputs = getBindingInfo(doc.directiveOptions.inputs, doc.members, 'Input');
+          doc.outputs = getBindingInfo(doc.directiveOptions.outputs, doc.members, 'Output');
+        }
+      });
+    }
+  };
+};
+
+function getBindingInfo(directiveBindings, members, bindingType) {
+  const bindings = {};
+
+  // Parse the bindings from the directive decorator
+  if (directiveBindings) {
+    directiveBindings.forEach(function(binding) {
+      const bindingInfo = parseBinding(binding);
+      bindings[bindingInfo.propertyName] = bindingInfo;
+    });
+  }
+
+  if (members) {
+    members.forEach(function(member) {
+      if (member.decorators) {
+        // Search for members with binding decorators
+        member.decorators.forEach(function(decorator) {
+          if (decorator.name === bindingType) {
+            bindings[member.name] = createBindingInfo(member.name, decorator.arguments[0] || member.name);
+          }
+        });
+      }
+
+      // Now ensure that any bindings have the associated member attached
+      // Note that this binding could have come from the directive decorator
+      if (bindings[member.name]) {
+        bindings[member.name].memberDoc = member;
+      }
+    });
+  }
+
+  // Convert the map back to an array
+  return Object.keys(bindings).map(function(key) { return bindings[key]; });
+}
+
+function stripQuotes(value) {
+  return (typeof(value) === 'string') ? value.trim().replace(/^(['"])(.*)\1$/, '$2') : value;
+}
+
+function parseBinding(option) {
+  // Directive decorator bindings are of the form: "propName : bindingName" (bindingName is optional)
+  const optionPair = option.split(':');
+  const propertyName = optionPair[0].trim();
+  const bindingName = (optionPair[1] || '').trim() || propertyName;
+  return createBindingInfo(propertyName, bindingName);
+}
+
+function createBindingInfo(propertyName, bindingName) {
+  return {
+    propertyName: stripQuotes(propertyName),
+    bindingName: stripQuotes(bindingName)
+  };
+}
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.spec.js b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.spec.js
new file mode 100644
index 0000000000..6a266203d5
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.spec.js
@@ -0,0 +1,141 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./matchUpDirectiveDecorators');
+const Dgeni = require('dgeni');
+
+describe('matchUpDirectiveDecorators processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('matchUpDirectiveDecorators');
+    expect(processor.$process).toBeDefined();
+    expect(processor.$runAfter).toContain('ids-computed');
+    expect(processor.$runAfter).toContain('paths-computed');
+    expect(processor.$runBefore).toContain('rendering-docs');
+  });
+
+  it('should extract selector and exportAs from the directive decorator on directive docs', () => {
+    const docs = [{
+      docType: 'directive',
+      directiveOptions: { selector: 'a,b,c', exportAs: 'someExport' }
+    }];
+    processorFactory().$process(docs);
+    expect(docs[0].selector).toEqual('a,b,c');
+    expect(docs[0].exportAs).toEqual('someExport');
+  });
+
+  it('should ignore properties from the directive decorator on non-directive docs', () => {
+    const docs = [{
+      docType: 'class',
+      directiveOptions: { selector: 'a,b,c', exportAs: 'someExport' }
+    }];
+    processorFactory().$process(docs);
+    expect(docs[0].selector).toBeUndefined();
+    expect(docs[0].exportAs).toBeUndefined();
+  });
+
+  it('should strip whitespace and quotes off directive properties', () => {
+    const docs = [
+      {
+        docType: 'directive',
+        directiveOptions: { selector: '"a,b,c"', exportAs: '\'someExport\'' }
+      },
+      {
+        docType: 'directive',
+        directiveOptions: { selector: ' a,b,c  ', exportAs: '  someExport  ' }
+      },
+      {
+        docType: 'directive',
+        directiveOptions: { selector: ' "a,b,c"  ', exportAs: '  \'someExport\'  ' }
+      }
+    ];
+    processorFactory().$process(docs);
+    expect(docs[0].selector).toEqual('a,b,c');
+    expect(docs[0].exportAs).toEqual('someExport');
+    expect(docs[1].selector).toEqual('a,b,c');
+    expect(docs[1].exportAs).toEqual('someExport');
+    expect(docs[2].selector).toEqual('a,b,c');
+    expect(docs[2].exportAs).toEqual('someExport');
+  });
+
+  it('should extract inputs and outputs from the directive decorator', () => {
+    const docs = [{
+      docType: 'directive',
+      directiveOptions: {
+        inputs: ['in1:in2', 'in3', '  in4:in5  ', '  in6  '],
+        outputs: ['out1:out1', '  out2:out3  ', '  out4  ']
+      },
+      members: [
+        { name: 'in1' },
+        { name: 'in3' },
+        { name: 'in4' },
+        { name: 'in6' },
+        { name: 'out1' },
+        { name: 'out2' },
+        { name: 'out4' }
+      ]
+    }];
+    processorFactory().$process(docs);
+    expect(docs[0].inputs).toEqual([
+      { propertyName: 'in1', bindingName: 'in2', memberDoc: docs[0].members[0] },
+      { propertyName: 'in3', bindingName: 'in3', memberDoc: docs[0].members[1] },
+      { propertyName: 'in4', bindingName: 'in5', memberDoc: docs[0].members[2] },
+      { propertyName: 'in6', bindingName: 'in6', memberDoc: docs[0].members[3] }
+    ]);
+
+    expect(docs[0].outputs).toEqual([
+      { propertyName: 'out1', bindingName: 'out1', memberDoc: docs[0].members[4] },
+      { propertyName: 'out2', bindingName: 'out3', memberDoc: docs[0].members[5] },
+      { propertyName: 'out4', bindingName: 'out4', memberDoc: docs[0].members[6] }
+    ]);
+  });
+
+  it('should extract inputs and outputs from decorated properties', () => {
+    const docs = [{
+      docType: 'directive',
+      directiveOptions: {},
+      members: [
+        { name: 'a1', decorators: [{ name: 'Input', arguments: ['a2'] }] },
+        { name: 'b1', decorators: [{ name: 'Output', arguments: ['b2'] }] },
+        { name: 'c1', decorators: [{ name: 'Input', arguments: [] }] },
+        { name: 'd1', decorators: [{ name: 'Output', arguments: [] }] },
+      ]
+    }];
+    processorFactory().$process(docs);
+    expect(docs[0].inputs).toEqual([
+      { propertyName: 'a1', bindingName: 'a2', memberDoc: docs[0].members[0] },
+      { propertyName: 'c1', bindingName: 'c1', memberDoc: docs[0].members[2] }
+    ]);
+
+    expect(docs[0].outputs).toEqual([
+      { propertyName: 'b1', bindingName: 'b2', memberDoc: docs[0].members[1] },
+      { propertyName: 'd1', bindingName: 'd1', memberDoc: docs[0].members[3] }
+    ]);
+  });
+
+  it('should merge directive inputs/outputs with decorator property inputs/outputs', () => {
+    const docs = [{
+      docType: 'directive',
+      directiveOptions: {
+        inputs: ['a1:a2'],
+        outputs: ['b1:b2']
+      },
+      members: [
+        { name: 'a1' },
+        { name: 'a3', decorators: [{ name: 'Input', arguments: ['a4'] }] },
+        { name: 'b1' },
+        { name: 'b3', decorators: [{ name: 'Output', arguments: ['b4'] }] },
+      ]
+    }];
+    processorFactory().$process(docs);
+    expect(docs[0].inputs).toEqual([
+      { propertyName: 'a1', bindingName: 'a2', memberDoc: docs[0].members[0] },
+      { propertyName: 'a3', bindingName: 'a4', memberDoc: docs[0].members[1] }
+    ]);
+
+    expect(docs[0].outputs).toEqual([
+      { propertyName: 'b1', bindingName: 'b2', memberDoc: docs[0].members[2] },
+      { propertyName: 'b3', bindingName: 'b4', memberDoc: docs[0].members[3] }
+    ]);
+  });
+});
diff --git a/aio/tools/transforms/angular-api-package/processors/mergeDecoratorDocs.js b/aio/tools/transforms/angular-api-package/processors/mergeDecoratorDocs.js
new file mode 100644
index 0000000000..02b96f3a87
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/mergeDecoratorDocs.js
@@ -0,0 +1,132 @@
+/**
+ * Decorators in the Angular code base are made up from three code items:
+ *
+ * 1) An interface that represents the call signature of the decorator. E.g.
+ *
+ *   ```
+ *   export interface ComponentDecorator {
+ *     (obj: Component): TypeDecorator;
+ *     new (obj: Component): Component;
+ *   }
+ *   ```
+ *
+ * 2) An interface that represents the members of the object that should be passed
+ *   into the decorator. E.g.
+ *
+ *   ```
+ *   export interface Component extends Directive {
+ *     changeDetection?: ChangeDetectionStrategy;
+ *     viewProviders?: Provider[];
+ *     templateUrl?: string;
+ *     ...
+ *   }
+ *   ```
+ *
+ * 3) A constant that is created by a call to a generic function, whose type parameter is
+ *   the call signature interface of the decorator. E.g.
+ *
+ *   ```
+ *   export const Component: ComponentDecorator =
+ *     <ComponentDecorator>makeDecorator('Component', { ... }, Directive)
+ *   ```
+ *
+ * This processor searches for these constants (3) by looking for a call to
+ * `make...Decorator(...)`. (There are variations to the call for property and param
+ * decorators). From this call we identify the `decoratorType` (e.g. `ComponentDecorator`).
+ *
+ * Calls to `make...Decorator<X>` will return an object of type X. This type is the document
+ * referred to in (2). This is the primary doc that we care about for documenting the decorator.
+ * It holds all of the members of the metadata that is passed to the decorator call.
+ *
+ * Finally we want to capture the documentation attached to the call signature interface of the
+ * associated decorator (1). We copy across the properties that we care about from this call
+ * signature (e.g. description, whatItDoes and howToUse).
+ */
+
+module.exports = function mergeDecoratorDocs(log) {
+  return {
+    $runAfter: ['processing-docs'],
+    $runBefore: ['docs-processed'],
+    makeDecoratorCalls: [
+      {type: '', description: 'toplevel'},
+      {type: 'Prop', description: 'property'},
+      {type: 'Param', description: 'parameter'},
+    ],
+    $process: function(docs) {
+
+      var makeDecoratorCalls = this.makeDecoratorCalls;
+      var docsToMerge = Object.create(null);
+
+      docs.forEach(function(doc) {
+
+        makeDecoratorCalls.forEach(function(call) {
+          // find all the decorators, signified by a call to `make...Decorator<Decorator>(metadata)`
+          var makeDecorator = getMakeDecoratorCall(doc, call.type);
+          if (makeDecorator) {
+            log.debug('mergeDecoratorDocs: found decorator', doc.docType, doc.name);
+            doc.docType = 'decorator';
+            doc.decoratorLocation = call.description;
+            // Get the type of the decorator metadata from the first "type" argument of the call.
+            // For example the `X` of `createDecorator<X>(...)`.
+            doc.decoratorType = makeDecorator.arguments[0].text;
+            // clear the symbol type named since it is not needed
+            doc.symbolTypeName = undefined;
+
+            // keep track of the names of the metadata interface that will need to be merged into this decorator doc
+            docsToMerge[doc.name + 'Decorator'] = doc;
+          }
+        });
+      });
+
+      // merge the metadata docs into the decorator docs
+      docs = docs.filter(function(doc) {
+        if (docsToMerge[doc.name]) {
+          // We have found an `XxxDecorator` document that will hold the call signature of the decorator
+          var decoratorDoc = docsToMerge[doc.name];
+          var callMember = doc.members.filter(function(member) { return member.isCallMember; })[0];
+          log.debug(
+              'mergeDecoratorDocs: merging', doc.name, 'into', decoratorDoc.name,
+              callMember.description.substring(0, 50));
+          // Merge the documentation found in this call signature into the original decorator
+          decoratorDoc.description = callMember.description;
+          decoratorDoc.howToUse = callMember.howToUse;
+          decoratorDoc.whatItDoes = callMember.whatItDoes;
+
+          // remove doc from its module doc's exports
+          doc.moduleDoc.exports =
+              doc.moduleDoc.exports.filter(function(exportDoc) { return exportDoc !== doc; });
+
+
+          // remove from the overall list of docs to be rendered
+          return false;
+        }
+        return true;
+      });
+    }
+  };
+};
+
+function getMakeDecoratorCall(doc, type) {
+  var makeDecoratorFnName = 'make' + (type || '') + 'Decorator';
+
+  var initializer = doc.declaration &&
+      doc.declaration.initializer;
+
+  if (initializer) {
+    // There appear to be two forms of initializer:
+    //    export var Injectable: InjectableFactory =
+    //    <InjectableFactory>makeDecorator(InjectableMetadata);
+    // and
+    //    export var RouteConfig: (configs: RouteDefinition[]) => ClassDecorator =
+    //    makeDecorator(RouteConfigAnnotation);
+    // In the first case, the type assertion `<InjectableFactory>` causes the AST to contain an
+    // extra level of expression
+    // to hold the new type of the expression.
+    if (initializer.expression && initializer.expression.expression) {
+      initializer = initializer.expression;
+    }
+    if (initializer.expression && initializer.expression.text === makeDecoratorFnName) {
+      return initializer;
+    }
+  }
+}
diff --git a/aio/tools/transforms/angular-api-package/processors/mergeDecoratorDocs.spec.js b/aio/tools/transforms/angular-api-package/processors/mergeDecoratorDocs.spec.js
new file mode 100644
index 0000000000..50add89022
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/mergeDecoratorDocs.spec.js
@@ -0,0 +1,84 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('mergeDecoratorDocs processor', () => {
+  var dgeni, injector, processor, moduleDoc, decoratorDoc, metadataDoc, decoratorDocWithTypeAssertion, otherDoc;
+
+  beforeEach(() => {
+    dgeni = new Dgeni([testPackage('angular-api-package')]);
+    injector = dgeni.configureInjector();
+    processor = injector.get('mergeDecoratorDocs');
+
+    moduleDoc = {};
+
+    decoratorDoc = {
+      name: 'Component',
+      docType: 'const',
+      description: 'A description of the metadata for the Component decorator',
+      declaration: {initializer: {expression: {text: 'makeDecorator'}, arguments: [{text: 'X'}]}},
+      members: [
+        { name: 'templateUrl', description: 'A description of the templateUrl property' }
+      ],
+      moduleDoc
+    };
+
+    metadataDoc = {
+      name: 'ComponentDecorator',
+      docType: 'interface',
+      description: 'A description of the interface for the call signature for the Component decorator',
+      members: [
+        {
+          isCallMember: true,
+          description: 'The actual description of the call signature',
+          whatItDoes: 'Does something cool...',
+          howToUse: 'Use it like this...'
+        },
+        {
+          description: 'Some other member'
+        }
+      ],
+      moduleDoc
+    };
+
+    decoratorDocWithTypeAssertion = {
+      name: 'Y',
+      docType: 'const',
+      declaration: { initializer: { expression: {type: {}, expression: {text: 'makeDecorator'}, arguments: [{text: 'Y'}]} } },
+      moduleDoc
+    };
+    otherDoc = {
+      name: 'Y',
+      docType: 'const',
+      declaration: {initializer: {expression: {text: 'otherCall'}, arguments: [{text: 'param1'}]}},
+      moduleDoc
+    };
+
+    moduleDoc.exports = [decoratorDoc, metadataDoc, decoratorDocWithTypeAssertion, otherDoc];
+  });
+
+
+  it('should change the docType of only the docs that are initialied by a call to makeDecorator', () => {
+    processor.$process([decoratorDoc, metadataDoc, decoratorDocWithTypeAssertion, otherDoc]);
+    expect(decoratorDoc.docType).toEqual('decorator');
+    expect(decoratorDocWithTypeAssertion.docType).toEqual('decorator');
+    expect(otherDoc.docType).toEqual('const');
+  });
+
+  it('should extract the "type" of the decorator meta data', () => {
+    processor.$process([decoratorDoc, metadataDoc, decoratorDocWithTypeAssertion, otherDoc]);
+    expect(decoratorDoc.decoratorType).toEqual('X');
+    expect(decoratorDocWithTypeAssertion.decoratorType).toEqual('Y');
+  });
+
+  it('should copy across properties from the call signature doc', () => {
+    processor.$process([decoratorDoc, metadataDoc, decoratorDocWithTypeAssertion, otherDoc]);
+    expect(decoratorDoc.description).toEqual('The actual description of the call signature');
+    expect(decoratorDoc.whatItDoes).toEqual('Does something cool...');
+    expect(decoratorDoc.howToUse).toEqual('Use it like this...');
+  });
+
+  it('should remove the metadataDoc from the module exports', () => {
+    processor.$process([decoratorDoc, metadataDoc, decoratorDocWithTypeAssertion, otherDoc]);
+    expect(moduleDoc.exports).not.toContain(metadataDoc);
+  });
+});
diff --git a/aio/tools/transforms/angular-api-package/processors/simplifyMemberAnchors.js b/aio/tools/transforms/angular-api-package/processors/simplifyMemberAnchors.js
new file mode 100644
index 0000000000..2519d22870
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/simplifyMemberAnchors.js
@@ -0,0 +1,26 @@
+/**
+ * Members that have overloads get long unwieldy anchors because they must be distinguished
+ * by their parameter lists.
+ * But the primary overload doesn't not need this distinction, so can just be the name of the member.
+ */
+module.exports = function simplifyMemberAnchors() {
+  return {
+    $runAfter: ['extra-docs-added'],
+    $runBefore: ['computing-paths'],
+    $process: function(docs) {
+      return docs.forEach(doc => {
+        if (doc.members) {
+          doc.members.forEach(member => member.anchor = computeAnchor(member));
+        }
+        if (doc.statics) {
+          doc.statics.forEach(member => member.anchor = computeAnchor(member));
+        }
+      });
+    }
+  };
+};
+
+function computeAnchor(member) {
+  // if the member is a "call" type then it has no name
+  return encodeURI(member.name.trim() || 'call');
+}
diff --git a/aio/transforms/angular.io-package/tag-defs/Annotation.js b/aio/tools/transforms/angular-api-package/tag-defs/Annotation.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/Annotation.js
rename to aio/tools/transforms/angular-api-package/tag-defs/Annotation.js
diff --git a/aio/transforms/angular.io-package/tag-defs/deprecated.js b/aio/tools/transforms/angular-api-package/tag-defs/deprecated.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/deprecated.js
rename to aio/tools/transforms/angular-api-package/tag-defs/deprecated.js
diff --git a/aio/transforms/angular.io-package/tag-defs/docsNotRequired.js b/aio/tools/transforms/angular-api-package/tag-defs/docsNotRequired.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/docsNotRequired.js
rename to aio/tools/transforms/angular-api-package/tag-defs/docsNotRequired.js
diff --git a/aio/transforms/angular.io-package/tag-defs/experimental.js b/aio/tools/transforms/angular-api-package/tag-defs/experimental.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/experimental.js
rename to aio/tools/transforms/angular-api-package/tag-defs/experimental.js
diff --git a/aio/transforms/angular.io-package/tag-defs/howToUse.js b/aio/tools/transforms/angular-api-package/tag-defs/howToUse.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/howToUse.js
rename to aio/tools/transforms/angular-api-package/tag-defs/howToUse.js
diff --git a/aio/transforms/angular.io-package/tag-defs/internal.js b/aio/tools/transforms/angular-api-package/tag-defs/internal.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/internal.js
rename to aio/tools/transforms/angular-api-package/tag-defs/internal.js
diff --git a/aio/transforms/angular.io-package/tag-defs/ngModule.js b/aio/tools/transforms/angular-api-package/tag-defs/ngModule.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/ngModule.js
rename to aio/tools/transforms/angular-api-package/tag-defs/ngModule.js
diff --git a/aio/transforms/angular.io-package/tag-defs/no-description.js b/aio/tools/transforms/angular-api-package/tag-defs/no-description.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/no-description.js
rename to aio/tools/transforms/angular-api-package/tag-defs/no-description.js
diff --git a/aio/transforms/angular.io-package/tag-defs/security.js b/aio/tools/transforms/angular-api-package/tag-defs/security.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/security.js
rename to aio/tools/transforms/angular-api-package/tag-defs/security.js
diff --git a/aio/transforms/angular.io-package/tag-defs/stable.js b/aio/tools/transforms/angular-api-package/tag-defs/stable.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/stable.js
rename to aio/tools/transforms/angular-api-package/tag-defs/stable.js
diff --git a/aio/transforms/angular.io-package/tag-defs/suppress.js b/aio/tools/transforms/angular-api-package/tag-defs/suppress.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/suppress.js
rename to aio/tools/transforms/angular-api-package/tag-defs/suppress.js
diff --git a/aio/transforms/angular.io-package/tag-defs/syntax.js b/aio/tools/transforms/angular-api-package/tag-defs/syntax.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/syntax.js
rename to aio/tools/transforms/angular-api-package/tag-defs/syntax.js
diff --git a/aio/transforms/angular.io-package/tag-defs/ts2dart_const.js b/aio/tools/transforms/angular-api-package/tag-defs/ts2dart_const.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/ts2dart_const.js
rename to aio/tools/transforms/angular-api-package/tag-defs/ts2dart_const.js
diff --git a/aio/transforms/angular.io-package/tag-defs/whatItDoes.js b/aio/tools/transforms/angular-api-package/tag-defs/whatItDoes.js
similarity index 100%
rename from aio/transforms/angular.io-package/tag-defs/whatItDoes.js
rename to aio/tools/transforms/angular-api-package/tag-defs/whatItDoes.js
diff --git a/aio/transforms/angular.io-package/ignore.words b/aio/tools/transforms/angular-base-package/ignore.words
similarity index 100%
rename from aio/transforms/angular.io-package/ignore.words
rename to aio/tools/transforms/angular-base-package/ignore.words
diff --git a/aio/tools/transforms/angular-base-package/index.js b/aio/tools/transforms/angular-base-package/index.js
new file mode 100644
index 0000000000..427eae281e
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/index.js
@@ -0,0 +1,140 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+const path = require('path');
+const Package = require('dgeni').Package;
+
+const jsdocPackage = require('dgeni-packages/jsdoc');
+const nunjucksPackage = require('dgeni-packages/nunjucks');
+const linksPackage = require('../links-package');
+const examplesPackage = require('../examples-package');
+const targetPackage = require('../target-package');
+const remarkPackage = require('../remark-package');
+const postProcessPackage = require('../post-process-package');
+
+const { PROJECT_ROOT, CONTENTS_PATH, OUTPUT_PATH, DOCS_OUTPUT_PATH, TEMPLATES_PATH, AIO_PATH, requireFolder } = require('../config');
+
+module.exports = new Package('angular-base', [
+  jsdocPackage, nunjucksPackage, linksPackage, examplesPackage, targetPackage, remarkPackage, postProcessPackage
+])
+
+  // Register the processors
+  .processor(require('./processors/generateKeywords'))
+  .processor(require('./processors/createOverviewDump'))
+  .processor(require('./processors/checkUnbalancedBackTicks'))
+  .processor(require('./processors/convertToJson'))
+  .processor(require('./processors/fixInternalDocumentLinks'))
+  .processor(require('./processors/copyContentAssets'))
+
+  // overrides base packageInfo and returns the one for the 'angular/angular' repo.
+  .factory('packageInfo', function() { return require(path.resolve(PROJECT_ROOT, 'package.json')); })
+  .factory(require('./readers/json'))
+  .factory(require('./services/copyFolder'))
+  .factory(require('./services/getImageDimensions'))
+
+  .factory(require('./post-processors/add-image-dimensions'))
+  .factory(require('./post-processors/auto-link-code'))
+
+  .config(function(checkAnchorLinksProcessor) {
+    // This is disabled here to prevent false negatives for the `docs-watch` task.
+    // It is re-enabled in the main `angular.io-package`
+    checkAnchorLinksProcessor.$enabled = false;
+  })
+
+  // Where do we get the source files?
+  .config(function(readFilesProcessor, collectExamples, generateKeywordsProcessor, jsonFileReader) {
+
+    readFilesProcessor.fileReaders.push(jsonFileReader);
+    readFilesProcessor.basePath = PROJECT_ROOT;
+    readFilesProcessor.sourceFiles = [];
+    collectExamples.exampleFolders = [];
+
+    generateKeywordsProcessor.ignoreWordsFile = path.resolve(__dirname, 'ignore.words');
+    generateKeywordsProcessor.docTypesToIgnore = ['example-region'];
+    generateKeywordsProcessor.propertiesToIgnore = ['renderedContent'];
+  })
+
+  // Where do we write the output files?
+  .config(function(writeFilesProcessor) { writeFilesProcessor.outputFolder = DOCS_OUTPUT_PATH; })
+
+
+  // Target environments
+  .config(function(targetEnvironments) {
+    const ALLOWED_LANGUAGES = ['ts', 'js', 'dart'];
+    const TARGET_LANGUAGE = 'ts';
+
+    ALLOWED_LANGUAGES.forEach(target => targetEnvironments.addAllowed(target));
+    targetEnvironments.activate(TARGET_LANGUAGE);
+  })
+
+
+  // Configure nunjucks rendering of docs via templates
+  .config(function(
+      renderDocsProcessor, templateFinder, templateEngine, getInjectables) {
+
+    // Where to find the templates for the doc rendering
+    templateFinder.templateFolders = [TEMPLATES_PATH];
+
+    // Standard patterns for matching docs to templates
+    templateFinder.templatePatterns = [
+      '${ doc.template }', '${ doc.id }.${ doc.docType }.template.html',
+      '${ doc.id }.template.html', '${ doc.docType }.template.html',
+      '${ doc.id }.${ doc.docType }.template.js', '${ doc.id }.template.js',
+      '${ doc.docType }.template.js', '${ doc.id }.${ doc.docType }.template.json',
+      '${ doc.id }.template.json', '${ doc.docType }.template.json', 'common.template.html'
+    ];
+
+    // Nunjucks and Angular conflict in their template bindings so change Nunjucks
+    templateEngine.config.tags = {variableStart: '{$', variableEnd: '$}'};
+
+    templateEngine.filters =
+        templateEngine.filters.concat(getInjectables(requireFolder(__dirname, './rendering')));
+
+    // helpers are made available to the nunjucks templates
+    renderDocsProcessor.helpers.relativePath = function(from, to) {
+      return path.relative(from, to);
+    };
+  })
+
+  .config(function(copyContentAssetsProcessor) {
+    copyContentAssetsProcessor.assetMappings.push(
+      { from: path.resolve(CONTENTS_PATH, 'images'), to: path.resolve(OUTPUT_PATH, 'images') }
+    );
+  })
+
+  // We are not going to be relaxed about ambiguous links
+  .config(function(getLinkInfo) {
+    getLinkInfo.useFirstAmbiguousLink = false;
+  })
+
+
+
+  .config(function(computePathsProcessor, generateKeywordsProcessor) {
+
+    generateKeywordsProcessor.outputFolder = 'app';
+
+    // Replace any path templates inherited from other packages
+    // (we want full and transparent control)
+    computePathsProcessor.pathTemplates = [
+      {docTypes: ['example-region'], getOutputPath: function() {}},
+    ];
+  })
+
+
+  .config(function(postProcessHtml, addImageDimensions, autoLinkCode) {
+    addImageDimensions.basePath = path.resolve(AIO_PATH, 'src');
+    postProcessHtml.plugins = [
+      require('./post-processors/autolink-headings'),
+      addImageDimensions,
+      require('./post-processors/h1-checker'),
+      autoLinkCode,
+    ];
+  })
+
+  .config(function(convertToJsonProcessor) {
+    convertToJsonProcessor.docTypes = [];
+  });
diff --git a/aio/tools/transforms/angular-base-package/post-processors/add-image-dimensions.js b/aio/tools/transforms/angular-base-package/post-processors/add-image-dimensions.js
new file mode 100644
index 0000000000..075c0de44d
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/add-image-dimensions.js
@@ -0,0 +1,42 @@
+const visit = require('unist-util-visit');
+const is = require('hast-util-is-element');
+const source = require('unist-util-source');
+
+/**
+ * Add the width and height of the image to the `img` tag if they are
+ * not already provided. This helps prevent jank when the page is
+ * rendered before the image has downloaded.
+ *
+ * If there is no `src` attribute on an image, or it is not possible
+ * to load the image file indicated by the `src` then a warning is emitted.
+ */
+module.exports = function addImageDimensions(getImageDimensions) {
+  return function addImageDimensionsImpl()  {
+    return (ast, file) => {
+      visit(ast, node => {
+
+        if (is(node, 'img')) {
+          const props = node.properties;
+          const src = props.src;
+          if (!src) {
+            file.message('Missing src in image tag `' + source(node, file) + '`');
+          } else {
+            try {
+              const dimensions = getImageDimensions(addImageDimensionsImpl.basePath, src);
+              if (props.width === undefined && props.height === undefined) {
+                props.width = '' + dimensions.width;
+                props.height = '' + dimensions.height;
+              }
+            } catch(e) {
+              if (e.code === 'ENOENT') {
+                file.fail('Unable to load src in image tag `' + source(node, file) + '`');
+              } else {
+                file.fail(e.message);
+              }
+            }
+          }
+        }
+      });
+    };
+  };
+};
diff --git a/aio/tools/transforms/angular-base-package/post-processors/add-image-dimensions.spec.js b/aio/tools/transforms/angular-base-package/post-processors/add-image-dimensions.spec.js
new file mode 100644
index 0000000000..411984a889
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/add-image-dimensions.spec.js
@@ -0,0 +1,104 @@
+var createTestPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('addImageDimensions post-processor', () => {
+  let processor, getImageDimensionsSpy, addImageDimensions, log;
+
+  beforeEach(() => {
+    const testPackage = createTestPackage('angular-base-package')
+        .factory('getImageDimensions', mockGetImageDimensions);
+    const dgeni = new Dgeni([testPackage]);
+    const injector = dgeni.configureInjector();
+    log = injector.get('log');
+    addImageDimensions = injector.get('addImageDimensions');
+    addImageDimensions.basePath = 'base/path';
+    getImageDimensionsSpy = injector.get('getImageDimensions');
+    processor = injector.get('postProcessHtml');
+    processor.docTypes = ['a'];
+    processor.plugins = [addImageDimensions];
+  });
+
+  it('should add the image dimensions into <img> tags', () => {
+    const docs = [{
+      docType: 'a',
+      renderedContent: `
+        <p>xxx</p>
+        <img src="a/b.jpg">
+        <p>yyy</p>
+        <img src="c/d.png">
+        <p>zzz</p>
+      `
+    }];
+    processor.$process(docs);
+    expect(getImageDimensionsSpy).toHaveBeenCalledWith('base/path', 'a/b.jpg');
+    expect(getImageDimensionsSpy).toHaveBeenCalledWith('base/path', 'c/d.png');
+    expect(docs).toEqual([jasmine.objectContaining({
+      docType: 'a',
+      renderedContent: `
+        <p>xxx</p>
+        <img src="a/b.jpg" width="10" height="20">
+        <p>yyy</p>
+        <img src="c/d.png" width="30" height="40">
+        <p>zzz</p>
+      `
+    })]);
+  });
+
+  it('should log a warning for images with no src attribute', () => {
+    const docs = [{
+      docType: 'a',
+      renderedContent: '<img attr="value">'
+    }];
+    processor.$process(docs);
+    expect(getImageDimensionsSpy).not.toHaveBeenCalled();
+    expect(docs).toEqual([jasmine.objectContaining({
+      docType: 'a',
+      renderedContent: '<img attr="value">'
+    })]);
+    expect(log.warn).toHaveBeenCalled();
+  });
+
+  it('should fail for images whose source cannot be loaded', () => {
+    getImageDimensionsSpy.and.callFake(() => {
+      const error = new Error('no such file or directory');
+      error.code = 'ENOENT';
+      throw error;
+    });
+    const docs = [{
+      docType: 'a',
+      renderedContent: '<img src="missing">'
+    }];
+    expect(() => processor.$process(docs)).toThrowError('Unable to load src in image tag `<img src="missing">` - doc (a) ');
+    expect(getImageDimensionsSpy).toHaveBeenCalled();
+  });
+
+  it('should ignore images with width or height attributes', () => {
+    const docs = [{
+      docType: 'a',
+      renderedContent: `
+        <img src="a/b.jpg" width="10">
+        <img src="c/d.jpg" height="10">
+        <img src="e/f.jpg" width="10" height="10">
+      `
+    }];
+    processor.$process(docs);
+    expect(docs).toEqual([jasmine.objectContaining({
+      docType: 'a',
+      renderedContent: `
+        <img src="a/b.jpg" width="10">
+        <img src="c/d.jpg" height="10">
+        <img src="e/f.jpg" width="10" height="10">
+      `
+    })]);
+  });
+
+  function mockGetImageDimensions() {
+    const imageInfo = {
+      'a/b.jpg': { width: 10, height: 20 },
+      'c/d.png': { width: 30, height: 40 },
+    };
+    // eslint-disable-next-line jasmine/no-unsafe-spy
+    return jasmine.createSpy('getImageDimensions')
+      .and.callFake((base, url) => imageInfo[url]);
+  }
+});
diff --git a/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.js b/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.js
new file mode 100644
index 0000000000..cb6e115d04
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.js
@@ -0,0 +1,36 @@
+const visit = require('unist-util-visit');
+const is = require('hast-util-is-element');
+const textContent = require('hast-util-to-string');
+
+/**
+ * Automatically add in a link to the relevant document for simple
+ * code blocks, e.g. `<code>MyClass</code>` becomes
+ * `<code><a href="path/to/myclass">MyClass</a></code>`
+ *
+ * @property docTypes an array of strings. Only docs that have one of these docTypes
+ * will be linked to.
+ * Usually set to the API exported docTypes, e.g. "class", "function", "directive", etc.
+ */
+module.exports = function autoLinkCode(getDocFromAlias) {
+  autoLinkCodeImpl.docTypes = [];
+  return autoLinkCodeImpl;
+
+  function autoLinkCodeImpl()  {
+    return (ast) => {
+      visit(ast, node => {
+        if (is(node, 'code')) {
+          const docs = getDocFromAlias(textContent(node));
+          if (docs.length === 1 && autoLinkCodeImpl.docTypes.indexOf(docs[0].docType) !== -1) {
+            const link = {
+              type: 'element',
+              tagName: 'a',
+              properties: { href: docs[0].path },
+              children: node.children
+            };
+            node.children = [link];
+          }
+        }
+      });
+    };
+  }
+};
diff --git a/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.spec.js b/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.spec.js
new file mode 100644
index 0000000000..9ddd36a3e0
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.spec.js
@@ -0,0 +1,39 @@
+var createTestPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('autoLinkCode post-processor', () => {
+  let processor, autoLinkCode, aliasMap;
+
+  beforeEach(() => {
+    const testPackage = createTestPackage('angular-base-package');
+    const dgeni = new Dgeni([testPackage]);
+    const injector = dgeni.configureInjector();
+    autoLinkCode = injector.get('autoLinkCode');
+    autoLinkCode.docTypes = ['class', 'pipe'];
+    aliasMap = injector.get('aliasMap');
+    processor = injector.get('postProcessHtml');
+    processor.docTypes = ['test-doc'];
+    processor.plugins = [autoLinkCode];
+  });
+
+  it('should insert an anchor into every code item that matches the id of an API doc', () => {
+    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
+    const doc = { docType: 'test-doc', renderedContent: '<code>MyClass</code>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<code><a href="a/b/myclass">MyClass</a></code>');
+  });
+
+  it('should insert an anchor into every code item that matches an alias of an API doc', () => {
+    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass', 'foo.MyClass'], path: 'a/b/myclass' });
+    const doc = { docType: 'test-doc', renderedContent: '<code>foo.MyClass</code>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<code><a href="a/b/myclass">foo.MyClass</a></code>');
+  });
+
+  it('should ignore code items that do not match a link to an API doc', () => {
+    aliasMap.addDoc({ docType: 'guide', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
+    const doc = { docType: 'test-doc', renderedContent: '<code>MyClass</code>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<code>MyClass</code>');
+  });
+});
diff --git a/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js
new file mode 100644
index 0000000000..5b9c353f78
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js
@@ -0,0 +1,22 @@
+const slug = require('rehype-slug');
+const link = require('rehype-autolink-headings');
+
+/**
+ * Get remark to inject anchors into headings
+ */
+module.exports = [
+  slug,
+  [link, {
+    properties: {
+      title: 'Link to this heading',
+      className: ['header-link'],
+      'aria-hidden': 'true'
+    },
+    content: {
+      type: 'element',
+      tagName: 'i',
+      properties: {className: ['material-icons']},
+      children: [{ type: 'text', value: 'link' }]
+    }
+  }]
+];
diff --git a/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js
new file mode 100644
index 0000000000..618da3a568
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js
@@ -0,0 +1,33 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+const plugin = require('./autolink-headings');
+
+describe('autolink-headings postprocessor', () => {
+  let processor;
+
+  beforeEach(() => {
+    const dgeni = new Dgeni([testPackage('angular-base-package')]);
+    const injector = dgeni.configureInjector();
+    processor = injector.get('postProcessHtml');
+    processor.docTypes = ['a'];
+    processor.plugins = [plugin];
+  });
+
+  it('should add anchors to headings', () => {
+    const docs = [ {
+      docType: 'a',
+      renderedContent: `
+        <h1>Heading 1</h2>
+        <h2>Heading with <strong>bold</strong></h2>
+        <h3>Heading with encoded chars &#x26;</h3>
+    `
+    }];
+    processor.$process(docs);
+    expect(docs[0].renderedContent).toEqual(`
+        <h1 id="heading-1"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-1"><i class="material-icons">link</i></a>Heading 1</h1>
+        <h2 id="heading-with-bold"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-bold"><i class="material-icons">link</i></a>Heading with <strong>bold</strong></h2>
+        <h3 id="heading-with-encoded-chars-"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-encoded-chars-"><i class="material-icons">link</i></a>Heading with encoded chars &#x26;</h3>
+    `);
+  });
+});
+
diff --git a/aio/tools/transforms/angular-base-package/post-processors/h1-checker.js b/aio/tools/transforms/angular-base-package/post-processors/h1-checker.js
new file mode 100644
index 0000000000..7b0200e104
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/h1-checker.js
@@ -0,0 +1,38 @@
+const visit = require('unist-util-visit');
+const is = require('hast-util-is-element');
+const toString = require('hast-util-to-string');
+const filter = require('unist-util-filter');
+
+module.exports = function h1CheckerPostProcessor() {
+  return (ast, file) => {
+    file.headings = {
+      h1: [],
+      h2: [],
+      h3: [],
+      h4: [],
+      h5: [],
+      h6: [],
+      hgroup: []
+    };
+    visit(ast, node => {
+      if (is(node, ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hgroup'])) {
+        file.headings[node.tagName].push(getText(node));
+      }
+    });
+
+    file.title = file.headings.h1[0];
+    if (file.headings.h1.length > 1) {
+      file.fail(`More than one h1 found in ${file}`);
+    }
+  };
+};
+
+function getText(h1) {
+  // Remove the aria-hidden anchor from the h1 node
+  const cleaned = filter(h1, node => !(
+    is(node, 'a') && node.properties &&
+    (node.properties.ariaHidden === 'true' || node.properties['aria-hidden'] === 'true')
+  ));
+
+  return toString(cleaned);
+}
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/post-processors/h1-checker.spec.js b/aio/tools/transforms/angular-base-package/post-processors/h1-checker.spec.js
new file mode 100644
index 0000000000..ff16a4b4ff
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/post-processors/h1-checker.spec.js
@@ -0,0 +1,72 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+const plugin = require('./h1-checker');
+
+describe('h1Checker postprocessor', () => {
+  let processor, createDocMessage;
+
+  beforeEach(() => {
+    const dgeni = new Dgeni([testPackage('angular-base-package')]);
+    const injector = dgeni.configureInjector();
+    createDocMessage = injector.get('createDocMessage');
+    processor = injector.get('postProcessHtml');
+    processor.docTypes = ['a'];
+    processor.plugins = [plugin];
+  });
+
+  it('should complain if there is more than one h1 in a document', () => {
+    const doc = {
+      docType: 'a',
+      renderedContent: `
+        <h1>Heading 1</h2>
+        <h2>Heading 2</h2>
+        <h1>Heading 1a</h1>
+    `
+    };
+    expect(() => processor.$process([doc])).toThrowError(createDocMessage('More than one h1 found in ' + doc.renderedContent, doc));
+  });
+
+  it('should not complain if there is exactly one h1 in a document', () => {
+    const doc = {
+      docType: 'a',
+      renderedContent: `
+        <h1>Heading 1</h2>
+        <h2>Heading 2</h2>
+    `
+    };
+    expect(() => processor.$process([doc])).not.toThrow();
+  });
+
+  it('should not complain if there are no h1s in a document', () => {
+    const doc = {
+      docType: 'a',
+      renderedContent: `
+        <h2>Heading 2</h2>
+    `
+    };
+    expect(() => processor.$process([doc])).not.toThrow();
+  });
+
+  it('should attach the h1 text to the vFile', () => {
+    const doc = {
+      docType: 'a',
+      renderedContent: '<h1>Heading 1</h1>'
+    };
+    processor.$process([doc]);
+    expect(doc.vFile.title).toEqual('Heading 1');
+  });
+
+  it('should clean aria-hidden anchors from h1 text added to the vFile', () => {
+    const doc = {
+      docType: 'a',
+      renderedContent:
+        '<h1 class="no-toc" id="what-is-angular">' +
+          '<a title="Link to this heading" class="header-link" aria-hidden="true" href="docs#what-is-angular">' +
+            '<i class="material-icons">link</i>' +
+          '</a>What is Angular?' +
+        '</h1>'
+    };
+    processor.$process([doc]);
+    expect(doc.vFile.title).toEqual('What is Angular?');
+  });
+});
\ No newline at end of file
diff --git a/aio/transforms/angular.io-package/processors/checkUnbalancedBackTicks.js b/aio/tools/transforms/angular-base-package/processors/checkUnbalancedBackTicks.js
similarity index 100%
rename from aio/transforms/angular.io-package/processors/checkUnbalancedBackTicks.js
rename to aio/tools/transforms/angular-base-package/processors/checkUnbalancedBackTicks.js
diff --git a/aio/transforms/angular.io-package/processors/checkUnbalancedBackTicks.spec.js b/aio/tools/transforms/angular-base-package/processors/checkUnbalancedBackTicks.spec.js
similarity index 93%
rename from aio/transforms/angular.io-package/processors/checkUnbalancedBackTicks.spec.js
rename to aio/tools/transforms/angular-base-package/processors/checkUnbalancedBackTicks.spec.js
index bc9cd4c6fb..7b5a718389 100644
--- a/aio/transforms/angular.io-package/processors/checkUnbalancedBackTicks.spec.js
+++ b/aio/tools/transforms/angular-base-package/processors/checkUnbalancedBackTicks.spec.js
@@ -5,7 +5,7 @@ describe('checkUnbalancedBackTicks', function() {
   var dgeni, injector, processor, log;
 
   beforeEach(function() {
-    dgeni = new Dgeni([testPackage('angular.io-package')]);
+    dgeni = new Dgeni([testPackage('angular-base-package')]);
     injector = dgeni.configureInjector();
     processor = injector.get('checkUnbalancedBackTicks');
     log = injector.get('log');
diff --git a/aio/tools/transforms/angular-base-package/processors/convertToJson.js b/aio/tools/transforms/angular-base-package/processors/convertToJson.js
new file mode 100644
index 0000000000..932f6e69d2
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/convertToJson.js
@@ -0,0 +1,36 @@
+module.exports = function convertToJsonProcessor(log, createDocMessage) {
+
+  return {
+    $runAfter: ['checkUnbalancedBackTicks'],
+    $runBefore: ['writeFilesProcessor'],
+    docTypes: [],
+    $process: function(docs) {
+      const docTypes = this.docTypes;
+      docs.forEach((doc) => {
+        if (docTypes.indexOf(doc.docType) !== -1) {
+          let contents = doc.renderedContent || '';
+
+          let title = doc.title;
+
+          // We do allow an empty `title` but if it is `undefined` we resort to `vFile.title` and then `name`
+          if (title === undefined) {
+            title = (doc.vFile && doc.vFile.title);
+          }
+
+          if (title === undefined) {
+            title = doc.name;
+          }
+
+          // If there is still no title then log a warning
+          if (title === undefined) {
+            title = '';
+            log.warn(createDocMessage('Title property expected', doc));
+          }
+
+          doc.renderedContent = JSON.stringify({ id: doc.path, title, contents }, null, 2);
+        }
+      });
+    }
+  };
+
+};
diff --git a/aio/tools/transforms/angular-base-package/processors/convertToJson.spec.js b/aio/tools/transforms/angular-base-package/processors/convertToJson.spec.js
new file mode 100644
index 0000000000..355097cda0
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/convertToJson.spec.js
@@ -0,0 +1,75 @@
+var testPackage = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('convertToJson processor', () => {
+  var dgeni, injector, processor, log;
+
+  beforeAll(function() {
+    dgeni = new Dgeni([testPackage('angular-base-package')]);
+    injector = dgeni.configureInjector();
+    processor = injector.get('convertToJsonProcessor');
+    log = injector.get('log');
+    processor.docTypes = ['test-doc'];
+  });
+
+  it('should be part of the dgeni package', () => {
+    expect(processor).toBeDefined();
+  });
+
+  it('should convert the renderedContent to JSON', () => {
+    const docs = [{
+      docType: 'test-doc',
+      title: 'The Title',
+      name: 'The Name',
+      path: 'test/doc',
+      renderedContent: 'Some Content'
+    }];
+    processor.$process(docs);
+    expect(JSON.parse(docs[0].renderedContent).id).toEqual('test/doc');
+    expect(JSON.parse(docs[0].renderedContent).title).toEqual('The Title');
+    expect(JSON.parse(docs[0].renderedContent).contents).toEqual('Some Content');
+  });
+
+  it('should get the title from name if no title is specified', () => {
+    const docs = [{ docType: 'test-doc', name: 'The Name' }];
+    processor.$process(docs);
+    expect(JSON.parse(docs[0].renderedContent).title).toEqual('The Name');
+  });
+
+  it('should accept an empty title', () => {
+    const docs = [{ docType: 'test-doc', title: '' }];
+    processor.$process(docs);
+    expect(JSON.parse(docs[0].renderedContent).title).toEqual('');
+    expect(log.warn).not.toHaveBeenCalled();
+  });
+
+  it('should accept an empty name if title is not provided', () => {
+    const docs = [{ docType: 'test-doc', name: '' }];
+    processor.$process(docs);
+    expect(JSON.parse(docs[0].renderedContent).title).toEqual('');
+    expect(log.warn).not.toHaveBeenCalled();
+  });
+
+  it('should get the title from the title extracted from the h1 in the rendered content if no title property is specified', () => {
+    const docs = [{
+      docType: 'test-doc',
+      vFile: { title: 'Some title' },
+      renderedContent: '<div><h1 class="title">Some title</h1><article><h1>Article 1</h1></article></div>'
+    }];
+    processor.$process(docs);
+    expect(JSON.parse(docs[0].renderedContent).contents).toEqual('<div><h1 class="title">Some title</h1><article><h1>Article 1</h1></article></div>');
+    expect(JSON.parse(docs[0].renderedContent).title).toEqual('Some title');
+  });
+
+  it('should set missing titles to empty', () => {
+    const docs = [{ docType: 'test-doc' }];
+    processor.$process(docs);
+    expect(JSON.parse(docs[0].renderedContent).title).toBe('');
+  });
+
+  it('should log a warning', () => {
+    const docs = [{ docType: 'test-doc' }];
+    processor.$process(docs);
+    expect(log.warn).toHaveBeenCalled();
+  });
+});
\ No newline at end of file
diff --git a/aio/transforms/angular.io-package/processors/copyContentAssets.js b/aio/tools/transforms/angular-base-package/processors/copyContentAssets.js
similarity index 85%
rename from aio/transforms/angular.io-package/processors/copyContentAssets.js
rename to aio/tools/transforms/angular-base-package/processors/copyContentAssets.js
index f8b9a56ec1..968a07a1c3 100644
--- a/aio/transforms/angular.io-package/processors/copyContentAssets.js
+++ b/aio/tools/transforms/angular-base-package/processors/copyContentAssets.js
@@ -1,7 +1,7 @@
 
 module.exports = function copyContentAssetsProcessor(copyFolder) {
   return {
-    $runAfter: ['files-written'],
+    $runBefore: ['postProcessHtml'],
     assetMappings: [],
     $process() {
       this.assetMappings.forEach(map => {
diff --git a/aio/transforms/angular.io-package/processors/copyContentAssets.spec.js b/aio/tools/transforms/angular-base-package/processors/copyContentAssets.spec.js
similarity index 93%
rename from aio/transforms/angular.io-package/processors/copyContentAssets.spec.js
rename to aio/tools/transforms/angular-base-package/processors/copyContentAssets.spec.js
index 04ac065527..df2d85769c 100644
--- a/aio/transforms/angular.io-package/processors/copyContentAssets.spec.js
+++ b/aio/tools/transforms/angular-base-package/processors/copyContentAssets.spec.js
@@ -6,7 +6,7 @@ describe('extractDecoratedClasses processor', function() {
   let dgeni, injector, processor;
 
   beforeEach(function() {
-    dgeni = new Dgeni([testPackage('angular.io-package')]);
+    dgeni = new Dgeni([testPackage('angular-content-package')]);
     injector = dgeni.configureInjector();
     processor = injector.get('copyContentAssetsProcessor');
   });
diff --git a/aio/transforms/angular.io-package/processors/createOverviewDump.js b/aio/tools/transforms/angular-base-package/processors/createOverviewDump.js
similarity index 100%
rename from aio/transforms/angular.io-package/processors/createOverviewDump.js
rename to aio/tools/transforms/angular-base-package/processors/createOverviewDump.js
diff --git a/aio/transforms/angular.io-package/processors/fixInternalDocumentLinks.js b/aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.js
similarity index 94%
rename from aio/transforms/angular.io-package/processors/fixInternalDocumentLinks.js
rename to aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.js
index ed12787a52..0ed3b3bade 100644
--- a/aio/transforms/angular.io-package/processors/fixInternalDocumentLinks.js
+++ b/aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.js
@@ -12,7 +12,7 @@ module.exports = function fixInternalDocumentLinks() {
 
   return {
     $runAfter: ['inlineTagProcessor'],
-    $runBefore: ['writeFilesProcessor'],
+    $runBefore: ['convertToJsonProcessor'],
     $process: function(docs) {
       docs.forEach(doc => {
         doc.renderedContent = doc.renderedContent.replace(INTERNAL_LINK, (_, pre, hash) => {
diff --git a/aio/transforms/angular.io-package/processors/fixInternalDocumentLinks.spec.js b/aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.spec.js
similarity index 92%
rename from aio/transforms/angular.io-package/processors/fixInternalDocumentLinks.spec.js
rename to aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.spec.js
index b2d6802466..d8957ec997 100644
--- a/aio/transforms/angular.io-package/processors/fixInternalDocumentLinks.spec.js
+++ b/aio/tools/transforms/angular-base-package/processors/fixInternalDocumentLinks.spec.js
@@ -5,7 +5,7 @@ const Dgeni = require('dgeni');
 describe('fixInternalDocumentLinks processor', () => {
 
   it('should be available on the injector', () => {
-    const dgeni = new Dgeni([testPackage('angular.io-package')]);
+    const dgeni = new Dgeni([testPackage('angular-base-package')]);
     const injector = dgeni.configureInjector();
     const processor = injector.get('fixInternalDocumentLinks');
     expect(processor.$process).toBeDefined();
@@ -13,7 +13,7 @@ describe('fixInternalDocumentLinks processor', () => {
 
   it('should run before the correct processor', () => {
     const processor = processorFactory();
-    expect(processor.$runBefore).toEqual(['writeFilesProcessor']);
+    expect(processor.$runBefore).toEqual(['convertToJsonProcessor']);
   });
 
   it('should run after the correct processor', () => {
diff --git a/aio/transforms/angular.io-package/processors/generateKeywords.js b/aio/tools/transforms/angular-base-package/processors/generateKeywords.js
similarity index 65%
rename from aio/transforms/angular.io-package/processors/generateKeywords.js
rename to aio/tools/transforms/angular-base-package/processors/generateKeywords.js
index 9e16cefa04..be8e60b952 100644
--- a/aio/transforms/angular.io-package/processors/generateKeywords.js
+++ b/aio/tools/transforms/angular-base-package/processors/generateKeywords.js
@@ -22,8 +22,8 @@ module.exports = function generateKeywordsProcessor(log, readFilesProcessor) {
       propertiesToIgnore: {},
       outputFolder: {presence: true}
     },
-    $runAfter: ['paths-computed'],
-    $runBefore: ['rendering-docs'],
+    $runAfter: ['postProcessHtml'],
+    $runBefore: ['writing-files'],
     $process: function(docs) {
 
       // Keywords to ignore
@@ -50,19 +50,14 @@ module.exports = function generateKeywordsProcessor(log, readFilesProcessor) {
 
       var ignoreWordsMap = convertToMap(wordsToIgnore);
 
-      // If the title contains a name starting with ng, e.g. "ngController", then add the module
-      // name
-      // without the ng to the title text, e.g. "controller".
-      function extractTitleWords(title) {
-        var match = /ng([A-Z]\w*)/.exec(title);
-        if (match) {
-          title = title + ' ' + match[1].toLowerCase();
-        }
-        return title;
+      // If the heading contains a name starting with ng, e.g. "ngController", then add the
+      // name without the ng to the text, e.g. "controller".
+      function preprocessText(text) {
+        return text.replace(/(^|\s)([nN]g([A-Z]\w*))/g, '$1$2 $3');
       }
 
       function extractWords(text, words, keywordMap) {
-        var tokens = text.toLowerCase().split(/[.\s,`'"#]+/mg);
+        var tokens = preprocessText(text).toLowerCase().split(/[.\s,`'"#]+/mg);
         tokens.forEach(function(token) {
           var match = token.match(KEYWORD_REGEX);
           if (match) {
@@ -82,13 +77,15 @@ module.exports = function generateKeywordsProcessor(log, readFilesProcessor) {
           // Ignore internals and private exports (indicated by the ɵ prefix)
           .filter(function(doc) { return !doc.internal && !doc.privateExport; });
 
-      filteredDocs.forEach(function(doc) {
 
+      filteredDocs.forEach(function(doc) {
 
         var words = [];
         var keywordMap = Object.assign({}, ignoreWordsMap);
         var members = [];
-        var membersMap = {};
+        var membersMap = Object.assign({}, ignoreWordsMap);
+        const headingWords = [];
+        const headingWordMap = Object.assign({}, ignoreWordsMap);
 
         // Search each top level property of the document for search terms
         Object.keys(doc).forEach(function(key) {
@@ -98,33 +95,52 @@ module.exports = function generateKeywordsProcessor(log, readFilesProcessor) {
             extractWords(value, words, keywordMap);
           }
 
+          // Special case properties that contain content relating to "members"
+          // of a doc that represents, say, a class or interface
           if (key === 'methods' || key === 'properties' || key === 'events') {
             value.forEach(function(member) { extractWords(member.name, members, membersMap); });
           }
         });
 
+        // Extract all the keywords from the headings
+        if (doc.vFile && doc.vFile.headings) {
+          Object.keys(doc.vFile.headings).forEach(function(headingTag) {
+            doc.vFile.headings[headingTag].forEach(function(headingText) {
+              extractWords(headingText, headingWords, headingWordMap);
+            });
+          });
+        }
 
+        // Extract the title to use in searches
+        doc.searchTitle = doc.searchTitle || doc.title || doc.vFile && doc.vFile.title || doc.name || '';
+
+        // Attach all this search data to the document
         doc.searchTerms = {
-          titleWords: extractTitleWords(doc.title || doc.name),
+          titleWords: preprocessText(doc.searchTitle),
+          headingWords: headingWords.sort().join(' '),
           keywords: words.sort().join(' '),
           members: members.sort().join(' ')
         };
 
       });
 
-      var searchData =
-          filteredDocs.filter(function(page) { return page.searchTerms; }).map(function(page) {
-            return Object.assign(
-                {path: page.path, title: page.name || page.title, type: page.docType}, page.searchTerms);
-          });
+      // Now process all the search data and collect it up to be used in creating a new document
+      var searchData = filteredDocs.map(function(page) {
+        // Copy the properties from the searchTerms object onto the search data object
+        return Object.assign({
+          path: page.path,
+          title: page.searchTitle,
+          type: page.docType
+        }, page.searchTerms);
+      });
 
       docs.push({
         docType: 'json-doc',
         id: 'search-data-json',
-        template: 'json-doc.template.json',
         path: this.outputFolder + '/search-data.json',
         outputPath: this.outputFolder + '/search-data.json',
-        data: searchData
+        data: searchData,
+        renderedContent: JSON.stringify(searchData)
       });
     }
   };
diff --git a/aio/tools/transforms/angular-base-package/processors/generateKeywords.spec.js b/aio/tools/transforms/angular-base-package/processors/generateKeywords.spec.js
new file mode 100644
index 0000000000..999fb9fde2
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/processors/generateKeywords.spec.js
@@ -0,0 +1,143 @@
+const testPackage = require('../../helpers/test-package');
+const mockLogger = require('dgeni/lib/mocks/log')(false);
+const processorFactory = require('./generateKeywords');
+const Dgeni = require('dgeni');
+
+const mockReadFilesProcessor = {
+  basePath: 'base/path'
+};
+
+describe('generateKeywords processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-base-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('generateKeywordsProcessor');
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run after the correct processor', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    expect(processor.$runAfter).toEqual(['postProcessHtml']);
+  });
+
+  it('should run before the correct processor', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    expect(processor.$runBefore).toEqual(['writing-files']);
+  });
+
+  it('should ignore internal and private exports', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    const docs = [
+      { docType: 'class', name: 'PublicExport' },
+      { docType: 'class', name: 'PrivateExport', privateExport: true },
+      { docType: 'class', name: 'InternalExport', internal: true }
+    ];
+    processor.$process(docs);
+    expect(docs[docs.length - 1].data).toEqual([
+      jasmine.objectContaining({ title: 'PublicExport', type: 'class'})
+    ]);
+  });
+
+  it('should compute `doc.searchTitle` from the doc properties if not already provided', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    const docs = [
+      { docType: 'class', name: 'A', searchTitle: 'searchTitle A', title: 'title A', vFile: { headings: { h1: ['vFile A'] } } },
+      { docType: 'class', name: 'B', title: 'title B', vFile: { headings: { h1: ['vFile B'] } } },
+      { docType: 'class', name: 'C', vFile: { title: 'vFile C', headings: { h1: ['vFile C'] } } },
+      { docType: 'class', name: 'D' },
+    ];
+    processor.$process(docs);
+    expect(docs[docs.length - 1].data).toEqual([
+      jasmine.objectContaining({ title: 'searchTitle A' }),
+      jasmine.objectContaining({ title: 'title B' }),
+      jasmine.objectContaining({ title: 'vFile C' }),
+      jasmine.objectContaining({ title: 'D' }),
+    ]);
+  });
+
+  it('should use `doc.searchTitle` as the title in the search index', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    const docs = [
+      { docType: 'class', name: 'PublicExport', searchTitle: 'class PublicExport' },
+    ];
+    processor.$process(docs);
+    const keywordsDoc = docs[docs.length - 1];
+    expect(keywordsDoc.data).toEqual([
+      jasmine.objectContaining({ title: 'class PublicExport', type: 'class'})
+    ]);
+  });
+
+  it('should add title words to the search terms', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    const docs = [
+      {
+        docType: 'class',
+        name: 'PublicExport',
+        searchTitle: 'class PublicExport',
+        vFile: { headings: { h2: ['heading A', 'heading B'] } }
+      },
+    ];
+    processor.$process(docs);
+    const keywordsDoc = docs[docs.length - 1];
+    expect(keywordsDoc.data[0].titleWords).toEqual('class PublicExport');
+  });
+
+  it('should add heading words to the search terms', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    const docs = [
+      {
+        docType: 'class',
+        name: 'PublicExport',
+        searchTitle: 'class PublicExport',
+        vFile: { headings: { h2: ['Important heading', 'Secondary heading'] } }
+      },
+    ];
+    processor.$process(docs);
+    const keywordsDoc = docs[docs.length - 1];
+    expect(keywordsDoc.data[0].headingWords).toEqual('heading important secondary');
+  });
+
+  it('should process terms prefixed with "ng" to include the term stripped of "ng"', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    const docs = [
+      {
+        docType: 'class',
+        name: 'PublicExport',
+        searchTitle: 'ngController',
+        vFile: { headings: { h2: ['ngModel'] } },
+        content: 'Some content with ngClass in it.'
+      },
+    ];
+    processor.$process(docs);
+    const keywordsDoc = docs[docs.length - 1];
+    expect(keywordsDoc.data[0].titleWords).toEqual('ngController Controller');
+    expect(keywordsDoc.data[0].headingWords).toEqual('model ngmodel');
+    expect(keywordsDoc.data[0].keywords).toContain('class');
+    expect(keywordsDoc.data[0].keywords).toContain('ngclass');
+  });
+
+  it('should generate renderedContent property', () => {
+    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
+    const docs = [
+      {
+        docType: 'class',
+        name: 'SomeClass',
+        description: 'The is the documentation for the SomeClass API.',
+        vFile: { headings: { h1: ['SomeClass'], h2: ['Some heading'] } }
+      },
+    ];
+    processor.$process(docs);
+    const keywordsDoc = docs[docs.length - 1];
+    expect(JSON.parse(keywordsDoc.renderedContent)).toEqual(
+      [{
+        'title':'SomeClass',
+        'type':'class',
+        'titleWords':'SomeClass',
+        'headingWords':'heading some someclass',
+        'keywords':'api class documentation for is someclass the',
+        'members':''
+      }]
+    );
+  });
+});
diff --git a/aio/transforms/angular.io-package/readers/json.js b/aio/tools/transforms/angular-base-package/readers/json.js
similarity index 100%
rename from aio/transforms/angular.io-package/readers/json.js
rename to aio/tools/transforms/angular-base-package/readers/json.js
diff --git a/aio/transforms/angular.io-package/rendering/indentForMarkdown.js b/aio/tools/transforms/angular-base-package/rendering/indentForMarkdown.js
similarity index 96%
rename from aio/transforms/angular.io-package/rendering/indentForMarkdown.js
rename to aio/tools/transforms/angular-base-package/rendering/indentForMarkdown.js
index 86210565d7..3330114f04 100644
--- a/aio/transforms/angular.io-package/rendering/indentForMarkdown.js
+++ b/aio/tools/transforms/angular-base-package/rendering/indentForMarkdown.js
@@ -21,7 +21,7 @@ module.exports = function() {
             if (newLines.length > 0) {
               newLines.pop();
             } else {
-              // wierd case - first expression in str is an @example
+              // weird case - first expression in str is an @example
               // in this case the :marked appear above the str passed in,
               // so we need to put 'something' into the markdown tag.
               newLines.push(sp + '.');  // '.' is a dummy char
diff --git a/aio/transforms/angular.io-package/rendering/toId.js b/aio/tools/transforms/angular-base-package/rendering/toId.js
similarity index 100%
rename from aio/transforms/angular.io-package/rendering/toId.js
rename to aio/tools/transforms/angular-base-package/rendering/toId.js
diff --git a/aio/transforms/angular.io-package/rendering/toId.spec.js b/aio/tools/transforms/angular-base-package/rendering/toId.spec.js
similarity index 100%
rename from aio/transforms/angular.io-package/rendering/toId.spec.js
rename to aio/tools/transforms/angular-base-package/rendering/toId.spec.js
diff --git a/aio/transforms/angular.io-package/rendering/trimBlankLines.js b/aio/tools/transforms/angular-base-package/rendering/trimBlankLines.js
similarity index 100%
rename from aio/transforms/angular.io-package/rendering/trimBlankLines.js
rename to aio/tools/transforms/angular-base-package/rendering/trimBlankLines.js
diff --git a/aio/transforms/angular.io-package/rendering/trimBlankLines.spec.js b/aio/tools/transforms/angular-base-package/rendering/trimBlankLines.spec.js
similarity index 100%
rename from aio/transforms/angular.io-package/rendering/trimBlankLines.spec.js
rename to aio/tools/transforms/angular-base-package/rendering/trimBlankLines.spec.js
diff --git a/aio/tools/transforms/angular-base-package/rendering/truncateCode.js b/aio/tools/transforms/angular-base-package/rendering/truncateCode.js
new file mode 100644
index 0000000000..a0ea95b713
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/rendering/truncateCode.js
@@ -0,0 +1,49 @@
+module.exports = function() {
+  return {
+    name: 'truncateCode',
+    process: function(str, lines) {
+      if (lines === undefined) return str;
+
+      const parts = str && str.split && str.split(/\r?\n/);
+      if (parts && parts.length > lines) {
+        return balance(parts[0] + '...', ['{', '(', '['], ['}', ')', ']']);
+      } else {
+        return str;
+      }
+    }
+  };
+};
+
+/**
+ * Try to balance the brackets by adding closers on to the end of a string
+ * for every bracket that is left open.
+ * The chars at each index in the openers and closers should match (i.e openers = ['{', '('], closers = ['}', ')'])
+ *
+ * @param {string} str The string to balance
+ * @param {string[]} openers an array of chars that open a bracket
+ * @param {string[]} closers an array of chars that close a brack
+ * @returns the balanced string
+ */
+function balance(str, openers, closers) {
+  const stack = [];
+
+  // Add each open bracket to the stack, removing them when there is a matching closer
+  str.split('').forEach(function(char) {
+    const closerIndex = closers.indexOf(char);
+    if (closerIndex !== -1 && stack[stack.length-1] === closerIndex) {
+      stack.pop();
+    } else {
+      const openerIndex = openers.indexOf(char);
+      if (openerIndex !== -1) {
+        stack.push(openerIndex);
+      }
+    }
+  });
+
+  // Now the stack should contain all the unclosed brackets
+  while(stack.length) {
+    str += closers[stack.pop()];
+  }
+
+  return str;
+}
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/rendering/truncateCode.spec.js b/aio/tools/transforms/angular-base-package/rendering/truncateCode.spec.js
new file mode 100644
index 0000000000..6e9f3b59c4
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/rendering/truncateCode.spec.js
@@ -0,0 +1,35 @@
+var factory = require('./truncateCode');
+
+describe('truncateCode filter', function() {
+  var filter;
+
+  beforeEach(function() { filter = factory(); });
+
+  it('should be called "truncateCode"',
+     function() { expect(filter.name).toEqual('truncateCode'); });
+
+  it('should return the whole string given lines is undefined', function() {
+    expect(filter.process('some text\n  \nmore text\n  \n'))
+      .toEqual('some text\n  \nmore text\n  \n');
+  });
+
+  it('should return the whole string if less than the given number of lines', function() {
+    expect(filter.process('this is a pretty long string that only exists on one line', 1))
+      .toEqual('this is a pretty long string that only exists on one line');
+
+    expect(filter.process('this is a pretty long string\nthat exists on two lines', 2))
+      .toEqual('this is a pretty long string\nthat exists on two lines');
+  });
+
+  it('should return the specified number of lines and an ellipsis if there are more lines', function() {
+    expect(filter.process('some text\n  \nmore text\n  \n', 1)).toEqual('some text...');
+  });
+
+  it('should add closing brackets for all the unclosed opening brackets after truncating', function() {
+    expect(filter.process('()[]{}\nsecond line', 1)).toEqual('()[]{}...');
+    expect(filter.process('([]{}\nsecond line', 1)).toEqual('([]{}...)');
+    expect(filter.process('()[{}\nsecond line', 1)).toEqual('()[{}...]');
+    expect(filter.process('()[]{\nsecond line', 1)).toEqual('()[]{...}');
+    expect(filter.process('([{\nsecond line', 1)).toEqual('([{...}])');
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/angular-base-package/services/copyFolder.js b/aio/tools/transforms/angular-base-package/services/copyFolder.js
new file mode 100644
index 0000000000..7a1ce297bf
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/services/copyFolder.js
@@ -0,0 +1,5 @@
+const {copySync} = require('fs-extra');
+
+module.exports = function copyFolder() {
+  return (from, to) => copySync(from, to);
+};
diff --git a/aio/tools/transforms/angular-base-package/services/getImageDimensions.js b/aio/tools/transforms/angular-base-package/services/getImageDimensions.js
new file mode 100644
index 0000000000..e32febb4c8
--- /dev/null
+++ b/aio/tools/transforms/angular-base-package/services/getImageDimensions.js
@@ -0,0 +1,6 @@
+const { resolve } = require('canonical-path');
+const sizeOf = require('image-size');
+
+module.exports = function getImageDimensions() {
+  return (basePath, path) => sizeOf(resolve(basePath, path));
+};
diff --git a/aio/tools/transforms/angular-content-package/index.js b/aio/tools/transforms/angular-content-package/index.js
new file mode 100644
index 0000000000..5584a41828
--- /dev/null
+++ b/aio/tools/transforms/angular-content-package/index.js
@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+const Package = require('dgeni').Package;
+const glob = require('glob');
+const ignore = require('ignore');
+const fs = require('fs');
+const path = require('canonical-path');
+const basePackage = require('../angular-base-package');
+const contentPackage = require('../content-package');
+
+const { CONTENTS_PATH, GUIDE_EXAMPLES_PATH } = require('../config');
+
+module.exports = new Package('angular-content', [basePackage, contentPackage])
+
+  // Where do we get the source files?
+  .config(function(readFilesProcessor, collectExamples) {
+
+    const gitignoreFile = fs.readFileSync(path.resolve(GUIDE_EXAMPLES_PATH, '.gitignore'), 'utf8');
+    const gitignore = ignore().add(gitignoreFile);
+
+    const examplePaths = glob.sync('**/*', { cwd: GUIDE_EXAMPLES_PATH, dot: true, ignore: '**/node_modules/**', mark: true })
+                            .filter(filePath => filePath !== '.gitignore') // we are not interested in the .gitignore file itself
+                            .filter(filePath => !/\/$/.test(filePath)); // this filter removes the folders, leaving only files
+    const filteredExamplePaths = gitignore.filter(examplePaths) // filter out files that match the .gitignore rules
+                            .map(filePath => path.resolve(GUIDE_EXAMPLES_PATH, filePath)); // we need the full paths for the filereader
+
+    readFilesProcessor.sourceFiles = readFilesProcessor.sourceFiles.concat([
+      {
+        basePath: CONTENTS_PATH,
+        include: CONTENTS_PATH + '/{cookbook,guide,tutorial}/**/*.md',
+        fileReader: 'contentFileReader'
+      },
+      {
+        basePath: CONTENTS_PATH + '/marketing',
+        include: CONTENTS_PATH + '/marketing/**/*.{html,md}',
+        fileReader: 'contentFileReader'
+      },
+      {
+        basePath: CONTENTS_PATH,
+        include: CONTENTS_PATH + '/*.md',
+        exclude: [CONTENTS_PATH + '/index.md'],
+        fileReader: 'contentFileReader'
+      },
+      {
+        basePath: CONTENTS_PATH,
+        include: filteredExamplePaths,
+        fileReader: 'exampleFileReader'
+      },
+      {
+        basePath: CONTENTS_PATH,
+        include: CONTENTS_PATH + '/navigation.json',
+        fileReader: 'jsonFileReader'
+      },
+      {
+        basePath: CONTENTS_PATH,
+        include: CONTENTS_PATH + '/marketing/contributors.json',
+        fileReader: 'jsonFileReader'
+      },
+      {
+        basePath: CONTENTS_PATH,
+        include: CONTENTS_PATH + '/marketing/resources.json',
+        fileReader: 'jsonFileReader'
+      },
+    ]);
+
+    collectExamples.exampleFolders.push('examples');
+  })
+
+
+  // Configure jsdoc-style tag parsing
+  .config(function(inlineTagProcessor) {
+    inlineTagProcessor.inlineTagDefinitions.push(require('./inline-tag-defs/anchor'));
+  })
+
+
+  .config(function(computePathsProcessor) {
+
+    // Replace any path templates inherited from other packages
+    // (we want full and transparent control)
+    computePathsProcessor.pathTemplates = computePathsProcessor.pathTemplates.concat([
+      {
+        docTypes: ['content'],
+        getPath: (doc) => `${doc.id.replace(/\/index$/, '')}`,
+        outputPathTemplate: '${path}.json'
+      },
+      {docTypes: ['navigation-json'], pathTemplate: '${id}', outputPathTemplate: '../${id}.json'},
+      {docTypes: ['contributors-json'], pathTemplate: '${id}', outputPathTemplate: '../${id}.json'},
+      {docTypes: ['resources-json'], pathTemplate: '${id}', outputPathTemplate: '../${id}.json'}
+    ]);
+  })
+
+  // We want the content files to be converted
+  .config(function(convertToJsonProcessor, postProcessHtml) {
+    convertToJsonProcessor.docTypes.push('content');
+    postProcessHtml.docTypes.push('content');
+  });
diff --git a/aio/transforms/angular.io-package/inline-tag-defs/anchor.js b/aio/tools/transforms/angular-content-package/inline-tag-defs/anchor.js
similarity index 100%
rename from aio/transforms/angular.io-package/inline-tag-defs/anchor.js
rename to aio/tools/transforms/angular-content-package/inline-tag-defs/anchor.js
diff --git a/aio/tools/transforms/angular.io-package/index.js b/aio/tools/transforms/angular.io-package/index.js
new file mode 100644
index 0000000000..1964bb696a
--- /dev/null
+++ b/aio/tools/transforms/angular.io-package/index.js
@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+const Package = require('dgeni').Package;
+const gitPackage = require('dgeni-packages/git');
+const apiPackage = require('../angular-api-package');
+const contentPackage = require('../angular-content-package');
+const { extname, resolve } = require('canonical-path');
+const { existsSync } = require('fs');
+const { SRC_PATH } = require('../config');
+
+module.exports = new Package('angular.io', [gitPackage, apiPackage, contentPackage])
+
+  // This processor relies upon the versionInfo. See below...
+  .processor(require('./processors/processNavigationMap'))
+
+  // We don't include this in the angular-base package because the `versionInfo` stuff
+  // accesses the file system and git, which is slow.
+  .config(function(renderDocsProcessor, versionInfo) {
+    // Add the version data to the renderer, for use in things like github links
+    renderDocsProcessor.extraData.versionInfo = versionInfo;
+  })
+
+  .config(function(checkAnchorLinksProcessor, linkInlineTagDef) {
+
+    // Fail the processing if there is an invalid link
+    linkInlineTagDef.failOnBadLink = true;
+
+    checkAnchorLinksProcessor.$enabled = true;
+    // since we encode the HTML to JSON we need to ensure that this processor runs before that encoding happens.
+    checkAnchorLinksProcessor.$runBefore = ['convertToJsonProcessor'];
+    checkAnchorLinksProcessor.$runAfter = ['fixInternalDocumentLinks'];
+    // We only want to check docs that are going to be output as JSON docs.
+    checkAnchorLinksProcessor.checkDoc = (doc) => doc.path && doc.outputPath && extname(doc.outputPath) === '.json';
+    // Since we have a `base[href="/"]` arrangement all links are relative to that and not relative to the source document's path
+    checkAnchorLinksProcessor.base = '/';
+    // Ignore links to local assets
+    // (This is not optimal in terms of performance without making changes to dgeni-packages there is no other way.
+    //  That being said do this only add 500ms onto the ~30sec doc-gen run - so not a huge issue)
+    checkAnchorLinksProcessor.ignoredLinks.push({
+      test(url) {
+        return (existsSync(resolve(SRC_PATH, url)));
+      }
+    });
+    checkAnchorLinksProcessor.pathVariants = ['', '/', '.html', '/index.html', '#top-of-page'];
+    checkAnchorLinksProcessor.errorOnUnmatchedLinks = true;
+  });
diff --git a/aio/transforms/angular.io-package/processors/processNavigationMap.js b/aio/tools/transforms/angular.io-package/processors/processNavigationMap.js
similarity index 79%
rename from aio/transforms/angular.io-package/processors/processNavigationMap.js
rename to aio/tools/transforms/angular.io-package/processors/processNavigationMap.js
index 049b1ac4c5..7582ff9788 100644
--- a/aio/transforms/angular.io-package/processors/processNavigationMap.js
+++ b/aio/tools/transforms/angular.io-package/processors/processNavigationMap.js
@@ -34,13 +34,15 @@ function walk(node, map, path) {
   let errors = [];
   for(const key in node) {
     const child = node[key];
-    if (key === 'url') {
-      const url = child.replace(/#.*$/, ''); // strip hash
-      if (isRelative(url) && !map[url]) {
-        errors.push({ path: path.join('.'), url });
+    if (child !== null) { // null is allowed
+      if (key === 'url') {
+        const url = child.replace(/#.*$/, ''); // strip hash
+        if (isRelative(url) && !map[url]) {
+          errors.push({ path: path.join('.'), url });
+        }
+      } else if (typeof child !== 'string') {
+        errors = errors.concat(walk(child, map, path.concat([key])));
       }
-    } else if (typeof child !== 'string') {
-      errors = errors.concat(walk(child, map, path.concat([key])));
     }
   }
   return errors;
diff --git a/aio/tools/transforms/authors-package/api-package.js b/aio/tools/transforms/authors-package/api-package.js
new file mode 100644
index 0000000000..a5f426453f
--- /dev/null
+++ b/aio/tools/transforms/authors-package/api-package.js
@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+const Package = require('dgeni').Package;
+const apiPackage = require('../angular-api-package');
+const { API_SOURCE_PATH } = require('../config');
+
+const packageMap = {
+  animations: ['animations/index.ts', 'animations/browser/index.ts', 'animations/browser/testing/index.ts'],
+  common: ['common/index.ts', 'common/testing/index.ts'],
+  core: ['core/index.ts', 'core/testing/index.ts'],
+  forms: ['forms/index.ts'],
+  http: ['http/index.ts', 'http/testing/index.ts'],
+  'platform-browser': ['platform-browser/index.ts', 'platform-browser/animations/index.ts', 'platform-browser/testing/index.ts'],
+  'platform-browser-dynamic': ['platform-browser-dynamic/index.ts', 'platform-browser-dynamic/testing/index.ts'],
+  'platform-server': ['platform-server/index.ts', 'platform-server/testing/index.ts'],
+  'platform-webworker': ['platform-webworker/index.ts'],
+  'platform-webworker-dynamic': 'platform-webworker-dynamic/index.ts',
+  router: ['router/index.ts', 'router/testing/index.ts', 'router/upgrade/index.ts'],
+  upgrade: ['upgrade/index.ts', 'upgrade/static/index.ts']
+};
+
+
+function createPackage(packageName) {
+
+  return new Package('author-api', [apiPackage])
+    .config(function(readTypeScriptModules) {
+      readTypeScriptModules.sourceFiles = packageMap[packageName];
+    })
+    .config(function(readFilesProcessor) {
+      readFilesProcessor.sourceFiles = [
+        {
+          basePath: API_SOURCE_PATH,
+          include: `${API_SOURCE_PATH}/examples/${packageName}/**/*`,
+          fileReader: 'exampleFileReader'
+        }
+      ];
+    });
+}
+
+
+module.exports = {
+  createPackage
+};
diff --git a/aio/tools/transforms/authors-package/guide-package.js b/aio/tools/transforms/authors-package/guide-package.js
new file mode 100644
index 0000000000..8bac6f4ba4
--- /dev/null
+++ b/aio/tools/transforms/authors-package/guide-package.js
@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/* eslint no-console: "off" */
+
+const Package = require('dgeni').Package;
+const contentPackage = require('../angular-content-package');
+const { readFileSync } = require('fs');
+const { resolve } = require('canonical-path');
+const { CONTENTS_PATH } = require('../config');
+
+function createPackage(guideName) {
+
+  const guideFilePath = `${CONTENTS_PATH}/guide/${guideName}.md`;
+  const guideFile = readFileSync(guideFilePath, 'utf8');
+  const examples = [];
+  guideFile.replace(/<code-(?:pane|example) [^>]*path="([^"]+)"/g, (_, path) => examples.push('examples/' + path));
+
+  if (examples.length) {
+    console.log('The following example files are referenced in this guide:');
+    console.log(examples.map(example => ' - ' + example).join('\n'));
+  }
+
+  return new Package('author-guide', [contentPackage])
+    .config(function(readFilesProcessor) {
+      readFilesProcessor.sourceFiles = [
+        {
+          basePath: CONTENTS_PATH,
+          include: guideFilePath,
+          fileReader: 'contentFileReader'
+        },
+        {
+          basePath: CONTENTS_PATH,
+          include: examples.map(example => resolve(CONTENTS_PATH, example)),
+          fileReader: 'exampleFileReader'
+        }
+      ];
+    });
+}
+
+module.exports = { createPackage };
\ No newline at end of file
diff --git a/aio/tools/transforms/authors-package/index.js b/aio/tools/transforms/authors-package/index.js
new file mode 100644
index 0000000000..31a5b89a7d
--- /dev/null
+++ b/aio/tools/transforms/authors-package/index.js
@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/* eslint no-console: "off" */
+
+function createPackage(changedFile) {
+  const marketingMatch = /^aio\/content\/marketing\/(.*)/.exec(changedFile);
+  if (marketingMatch) {
+    console.log('Building marketing docs');
+    return require('./marketing-package').createPackage();
+  }
+
+  const tutorialMatch = /^aio\/content\/tutorial\/([^.]+)\.md/.exec(changedFile);
+  const tutorialExampleMatch = /^aio\/content\/examples\/(toh-[^\/]+)\//.exec(changedFile);
+  if (tutorialMatch || tutorialExampleMatch) {
+    const tutorialName = tutorialMatch && tutorialMatch[1] || tutorialExampleMatch[1];
+    console.log('Building tutorial docs');
+    return require('./tutorial-package').createPackage(tutorialName);
+  }
+
+  const guideMatch = /^aio\/content\/guide\/([^.]+)\.md/.exec(changedFile);
+  const exampleMatch = /^aio\/content\/examples\/(?:cb-)?([^\/]+)\//.exec(changedFile);
+  if (guideMatch || exampleMatch) {
+    const guideName = guideMatch && guideMatch[1] || exampleMatch[1];
+    console.log(`Building guide doc: ${guideName}.md`);
+    return require('./guide-package').createPackage(guideName);
+  }
+
+  const apiExamplesMatch = /^packages\/examples\/([^\/]+)\//.exec(changedFile);
+  const apiMatch = /^packages\/([^\/]+)\//.exec(changedFile);
+  if (apiExamplesMatch || apiMatch) {
+    const packageName = apiExamplesMatch && apiExamplesMatch[1] || apiMatch[1];
+    console.log('Building API docs for', packageName);
+    return require('./api-package').createPackage(packageName);
+  }
+}
+
+module.exports = {
+  generateDocs: function(changedFile, options = {}) {
+    const {Dgeni} = require('dgeni');
+    const package = createPackage(changedFile);
+    if (options.silent) {
+      package.config(function(log) { log.level = 'error'; });
+    }
+    var dgeni = new Dgeni([package]);
+    const start = Date.now();
+    return dgeni.generate()
+      .then(
+        () => console.log('Generated docs in ' + (Date.now() - start)/1000 + ' secs'),
+        err => console.log('Error generating docs', err));
+  }
+};
diff --git a/aio/tools/transforms/authors-package/index.spec.js b/aio/tools/transforms/authors-package/index.spec.js
new file mode 100644
index 0000000000..e08d0dd5bf
--- /dev/null
+++ b/aio/tools/transforms/authors-package/index.spec.js
@@ -0,0 +1,83 @@
+const fs = require('fs');
+const {resolve} = require('canonical-path');
+const {generateDocs} = require('./index.js');
+const { DOCS_OUTPUT_PATH } = require('../config');
+
+describe('authors-package (integration tests)', () => {
+  let files;
+
+  beforeEach(() => {
+    files = [];
+    spyOn(fs, 'writeFile').and.callFake((file, content, callback) => {
+      files.push(file);
+      callback();
+    });
+  });
+
+  it('should generate marketing docs if the "fileChanged" is a marketing doc', (done) => {
+    generateDocs('aio/content/marketing/about.html', { silent: true }).then(() => {
+      expect(fs.writeFile).toHaveBeenCalled();
+      expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'about.json'));
+      expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../navigation.json'));
+      expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../contributors.json'));
+      expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../resources.json'));
+      done();
+    });
+  }, 4000);
+
+  it('should generate tutorial docs if the "fileChanged" is a tutorial doc', (done) => {
+    generateDocs('aio/content/tutorial/toh-pt5.md', { silent: true }).then(() => {
+      expect(fs.writeFile).toHaveBeenCalled();
+      expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'tutorial/toh-pt5.json'));
+      done();
+    });
+  }, 4000);
+
+  it('should generate tutorial docs if the "fileChanged" is the tutorial index', (done) => {
+    generateDocs('aio/content/tutorial/index.md', { silent: true }).then(() => {
+      expect(fs.writeFile).toHaveBeenCalled();
+      expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'tutorial.json'));
+      done();
+    });
+  }, 4000);
+
+  it('should generate tutorial docs if the "fileChanged" is a tutorial example', (done) => {
+    generateDocs('aio/content/examples/toh-pt3/app/app.component.1.html', { silent: true }).then(() => {
+      expect(fs.writeFile).toHaveBeenCalled();
+      expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'tutorial/toh-pt3.json'));
+      done();
+    });
+  }, 4000);
+
+  it('should generate guide doc if the "fileChanged" is a guide doc', (done) => {
+    generateDocs('aio/content/guide/architecture.md', { silent: true }).then(() => {
+      expect(fs.writeFile).toHaveBeenCalled();
+      expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'guide/architecture.json'));
+      done();
+    });
+  }, 4000);
+
+  it('should generate guide doc if the "fileChanged" is a guide example', (done) => {
+    generateDocs('aio/content/examples/architecture/src/app/app.module.ts', { silent: true }).then(() => {
+      expect(fs.writeFile).toHaveBeenCalled();
+      expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'guide/architecture.json'));
+      done();
+    });
+  }, 4000);
+
+  it('should generate API doc if the "fileChanged" is an API doc', (done) => {
+    generateDocs('packages/forms/src/form_builder.ts', { silent: true }).then(() => {
+      expect(fs.writeFile).toHaveBeenCalled();
+      expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'api/forms/FormBuilder.json'));
+      done();
+    });
+  }, 16000);
+
+  it('should generate API doc if the "fileChanged" is an API example', (done) => {
+    generateDocs('packages/examples/forms/ts/formBuilder/form_builder_example.ts', { silent: true }).then(() => {
+      expect(fs.writeFile).toHaveBeenCalled();
+      expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'api/forms/FormBuilder.json'));
+      done();
+    });
+  }, 16000);
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/authors-package/marketing-package.js b/aio/tools/transforms/authors-package/marketing-package.js
new file mode 100644
index 0000000000..30dac6b9d8
--- /dev/null
+++ b/aio/tools/transforms/authors-package/marketing-package.js
@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+const Package = require('dgeni').Package;
+const contentPackage = require('../angular-content-package');
+const { CONTENTS_PATH } = require('../config');
+
+function createPackage() {
+  return new Package('author-marketing', [contentPackage])
+    .config(function(readFilesProcessor) {
+      readFilesProcessor.sourceFiles = [
+        {
+          basePath: CONTENTS_PATH + '/marketing',
+          include: CONTENTS_PATH + '/marketing/**/*.{html,md}',
+          fileReader: 'contentFileReader'
+        },
+        {
+          basePath: CONTENTS_PATH,
+          include: CONTENTS_PATH + '/*.md',
+          exclude: [CONTENTS_PATH + '/index.md'],
+          fileReader: 'contentFileReader'
+        },
+        {
+          basePath: CONTENTS_PATH,
+          include: CONTENTS_PATH + '/marketing/*.json',
+          fileReader: 'jsonFileReader'
+        },
+        {
+          basePath: CONTENTS_PATH,
+          include: CONTENTS_PATH + '/navigation.json',
+          fileReader: 'jsonFileReader'
+        },
+      ];
+    });
+}
+
+
+module.exports = { createPackage };
\ No newline at end of file
diff --git a/aio/tools/transforms/authors-package/tutorial-package.js b/aio/tools/transforms/authors-package/tutorial-package.js
new file mode 100644
index 0000000000..5bc6cce023
--- /dev/null
+++ b/aio/tools/transforms/authors-package/tutorial-package.js
@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+const Package = require('dgeni').Package;
+const contentPackage = require('../angular-content-package');
+const { readFileSync } = require('fs');
+const { resolve } = require('canonical-path');
+const { CONTENTS_PATH } = require('../config');
+
+/* eslint no-console: "off" */
+
+function createPackage(tutorialName) {
+
+  const tutorialFilePath = `${CONTENTS_PATH}/tutorial/${tutorialName}.md`;
+  const tutorialFile = readFileSync(tutorialFilePath, 'utf8');
+  const examples = [];
+  tutorialFile.replace(/<code-(?:pane|example) [^>]*path="([^"]+)"/g, (_, path) => examples.push('examples/' + path));
+
+  if (examples.length) {
+    console.log('The following example files are referenced in this tutorial:');
+    console.log(examples.map(example => ' - ' + example).join('\n'));
+  }
+
+  return new Package('author-tutorial', [contentPackage])
+    .config(function(readFilesProcessor) {
+      readFilesProcessor.sourceFiles = [
+        {
+          basePath: CONTENTS_PATH,
+          include: tutorialFilePath,
+          fileReader: 'contentFileReader'
+        },
+        {
+          basePath: CONTENTS_PATH,
+          include: examples.map(example => resolve(CONTENTS_PATH, example)),
+          fileReader: 'exampleFileReader'
+        }
+      ];
+    });
+}
+
+
+module.exports = { createPackage };
\ No newline at end of file
diff --git a/aio/tools/transforms/authors-package/watchr.js b/aio/tools/transforms/authors-package/watchr.js
new file mode 100644
index 0000000000..debd940901
--- /dev/null
+++ b/aio/tools/transforms/authors-package/watchr.js
@@ -0,0 +1,47 @@
+/* eslint no-console: "off" */
+const watchr = require('watchr');
+const {relative} = require('canonical-path');
+const {generateDocs} = require('./index.js');
+const { PROJECT_ROOT, CONTENTS_PATH, API_SOURCE_PATH } = require('../config');
+
+function listener(changeType, fullPath) {
+  try {
+    const relativePath = relative(PROJECT_ROOT, fullPath);
+    console.log('The file', relativePath, `was ${changeType}d at`, new Date().toUTCString());
+    generateDocs(relativePath);
+  } catch(err) {
+    console.log('Error generating docs', err);
+  }
+}
+
+function next(error) {
+  if (error) {
+    console.log(error);
+  }
+}
+
+let p = Promise.resolve();
+
+if (process.argv.indexOf('--watch-only') === -1) {
+  console.log('===================================================================');
+  console.log('Running initial doc generation');
+  console.log('-------------------------------------------------------------------');
+  console.log('Skip the full doc-gen by running: `yarn docs-watch -- --watch-only`');
+  console.log('===================================================================');
+  const {Dgeni} = require('dgeni');
+  var dgeni = new Dgeni([require('../angular.io-package')]);
+  p = dgeni.generate();
+}
+
+p.then(() => {
+  console.log('===================================================================');
+  console.log('Started watching files in:');
+  console.log(' - ', CONTENTS_PATH);
+  console.log(' - ', API_SOURCE_PATH);
+  console.log('Doc gen will run when you change a file in either of these folders.');
+  console.log('===================================================================');
+
+  watchr.open(CONTENTS_PATH, listener, next);
+  watchr.open(API_SOURCE_PATH, listener, next);
+
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/config.js b/aio/tools/transforms/config.js
new file mode 100644
index 0000000000..59eb3cae47
--- /dev/null
+++ b/aio/tools/transforms/config.js
@@ -0,0 +1,23 @@
+const { resolve } = require('path');
+const { readdirSync } = require('fs');
+
+const PROJECT_ROOT = resolve(__dirname, '../../..');
+const AIO_PATH = resolve(PROJECT_ROOT, 'aio');
+const TEMPLATES_PATH = resolve(AIO_PATH, 'tools/transforms/templates');
+const API_TEMPLATES_PATH = resolve(TEMPLATES_PATH, 'api');
+const CONTENTS_PATH = resolve(AIO_PATH, 'content');
+const GUIDE_EXAMPLES_PATH = resolve(CONTENTS_PATH, 'examples');
+const SRC_PATH = resolve(AIO_PATH, 'src');
+const OUTPUT_PATH = resolve(SRC_PATH, 'generated');
+const DOCS_OUTPUT_PATH = resolve(OUTPUT_PATH, 'docs');
+const API_SOURCE_PATH = resolve(PROJECT_ROOT, 'packages');
+
+function requireFolder(dirname, folderPath) {
+  const absolutePath = resolve(dirname, folderPath);
+  return readdirSync(absolutePath)
+    .filter(p => !/[._]spec\.js$/.test(p))  // ignore spec files
+    .map(p => require(resolve(absolutePath, p)));
+}
+
+module.exports = { PROJECT_ROOT, AIO_PATH, TEMPLATES_PATH, API_TEMPLATES_PATH, CONTENTS_PATH, GUIDE_EXAMPLES_PATH, SRC_PATH, OUTPUT_PATH, DOCS_OUTPUT_PATH, API_SOURCE_PATH, requireFolder };
+
diff --git a/aio/tools/transforms/content-package/index.js b/aio/tools/transforms/content-package/index.js
new file mode 100644
index 0000000000..6e48da3d81
--- /dev/null
+++ b/aio/tools/transforms/content-package/index.js
@@ -0,0 +1,39 @@
+var Package = require('dgeni').Package;
+var jsdocPackage = require('dgeni-packages/jsdoc');
+var linksPackage = require('../links-package');
+var { requireFolder } = require('../config');
+
+// Define the dgeni package for generating the docs
+module.exports = new Package('content', [jsdocPackage, linksPackage])
+
+  // Register the services and file readers
+  .factory(require('./readers/content'))
+
+  // Configure file reading
+  .config(function(readFilesProcessor, contentFileReader) {
+    readFilesProcessor.fileReaders.push(contentFileReader);
+  })
+
+  .config(function(parseTagsProcessor, getInjectables) {
+    parseTagsProcessor.tagDefinitions = parseTagsProcessor.tagDefinitions.concat(
+        getInjectables(requireFolder(__dirname, './tag-defs')));
+  })
+
+  // Configure ids and paths
+  .config(function(computeIdsProcessor) {
+
+    computeIdsProcessor.idTemplates.push({
+      docTypes: ['content'],
+      getId: function(doc) {
+        return doc.fileInfo
+            .relativePath
+            // path should be relative to `modules` folder
+            .replace(/.*\/?modules\//, '')
+            // path should not include `/docs/`
+            .replace(/\/docs\//, '/')
+            // path should not have a suffix
+            .replace(/\.\w*$/, '');
+      },
+      getAliases: function(doc) { return [doc.id]; }
+    });
+  });
diff --git a/aio/transforms/content-package/readers/content.js b/aio/tools/transforms/content-package/readers/content.js
similarity index 100%
rename from aio/transforms/content-package/readers/content.js
rename to aio/tools/transforms/content-package/readers/content.js
diff --git a/aio/transforms/content-package/readers/content.spec.js b/aio/tools/transforms/content-package/readers/content.spec.js
similarity index 100%
rename from aio/transforms/content-package/readers/content.spec.js
rename to aio/tools/transforms/content-package/readers/content.spec.js
diff --git a/aio/transforms/content-package/tag-defs/intro.js b/aio/tools/transforms/content-package/tag-defs/intro.js
similarity index 100%
rename from aio/transforms/content-package/tag-defs/intro.js
rename to aio/tools/transforms/content-package/tag-defs/intro.js
diff --git a/aio/transforms/content-package/tag-defs/title.js b/aio/tools/transforms/content-package/tag-defs/title.js
similarity index 100%
rename from aio/transforms/content-package/tag-defs/title.js
rename to aio/tools/transforms/content-package/tag-defs/title.js
diff --git a/aio/transforms/examples-package/file-readers/example-reader.js b/aio/tools/transforms/examples-package/file-readers/example-reader.js
similarity index 100%
rename from aio/transforms/examples-package/file-readers/example-reader.js
rename to aio/tools/transforms/examples-package/file-readers/example-reader.js
diff --git a/aio/transforms/examples-package/index.js b/aio/tools/transforms/examples-package/index.js
similarity index 100%
rename from aio/transforms/examples-package/index.js
rename to aio/tools/transforms/examples-package/index.js
diff --git a/aio/transforms/examples-package/inline-tag-defs/example.js b/aio/tools/transforms/examples-package/inline-tag-defs/example.js
similarity index 100%
rename from aio/transforms/examples-package/inline-tag-defs/example.js
rename to aio/tools/transforms/examples-package/inline-tag-defs/example.js
diff --git a/aio/transforms/examples-package/inline-tag-defs/example.spec.js b/aio/tools/transforms/examples-package/inline-tag-defs/example.spec.js
similarity index 90%
rename from aio/transforms/examples-package/inline-tag-defs/example.spec.js
rename to aio/tools/transforms/examples-package/inline-tag-defs/example.spec.js
index 5c32c38682..ec506b2c6c 100644
--- a/aio/transforms/examples-package/inline-tag-defs/example.spec.js
+++ b/aio/tools/transforms/examples-package/inline-tag-defs/example.spec.js
@@ -31,8 +31,14 @@ describe('example inline-tag-def', function() {
       };
     });
 
-    it('should return a <code-example> tag', () => {
-      expect(handler({}, 'example', 'some/uri')).toEqual('<code-example>\n\n</code-example>');
+    it('should throw an error if there is no matching example', () => {
+      expect(function() {
+        handler({}, 'example', 'missing/uri');
+      }).toThrowError();
+
+      expect(function() {
+        handler({}, 'example', 'test/url missing-region');
+      }).toThrowError();
     });
 
     it('should contain the whole contents from the example file if no region is specified', () => {
diff --git a/aio/transforms/examples-package/processors/collect-examples.js b/aio/tools/transforms/examples-package/processors/collect-examples.js
similarity index 98%
rename from aio/transforms/examples-package/processors/collect-examples.js
rename to aio/tools/transforms/examples-package/processors/collect-examples.js
index c09baee5cc..a12782386b 100644
--- a/aio/transforms/examples-package/processors/collect-examples.js
+++ b/aio/tools/transforms/examples-package/processors/collect-examples.js
@@ -1,5 +1,5 @@
 const {extname} = require('canonical-path');
-const {mapObject} = require('../utils');
+const {mapObject} = require('../../helpers/utils');
 
 module.exports = function collectExamples(exampleMap, regionParser, log, createDocMessage) {
   return {
diff --git a/aio/transforms/examples-package/processors/collect-examples.spec.js b/aio/tools/transforms/examples-package/processors/collect-examples.spec.js
similarity index 100%
rename from aio/transforms/examples-package/processors/collect-examples.spec.js
rename to aio/tools/transforms/examples-package/processors/collect-examples.spec.js
diff --git a/aio/transforms/examples-package/processors/render-examples.js b/aio/tools/transforms/examples-package/processors/render-examples.js
similarity index 77%
rename from aio/transforms/examples-package/processors/render-examples.js
rename to aio/tools/transforms/examples-package/processors/render-examples.js
index 35ecde9ac7..9ff0ce19e8 100644
--- a/aio/transforms/examples-package/processors/render-examples.js
+++ b/aio/tools/transforms/examples-package/processors/render-examples.js
@@ -1,4 +1,4 @@
-const { parseAttributes } = require('../utils');
+const { parseAttributes, renderAttributes } = require('../../helpers/utils');
 
 /**
  * Search the renderedContent looking for code examples that have a path (and optionally a region) attribute.
@@ -17,10 +17,7 @@ module.exports = function renderExamples(getExampleRegion) {
             if (attrMap.path) {
               // We found a path attribute so look up the example and rebuild the HTML
               const exampleContent = getExampleRegion(doc, attrMap.path, attrMap.region);
-              delete attrMap.path;
-              delete attrMap.region;
-              attributes = Object.keys(attrMap).map(key => ` ${key}="${attrMap[key].replace(/"/g, '&quot;')}"`).join('');
-              return `<${element}${attributes}>\n${exampleContent}\n</${element}>`;
+              return `<${element}${renderAttributes(attrMap)}>\n${exampleContent}\n</${element}>`;
             }
             // No path attribute so just ignore this one
             return original;
diff --git a/aio/transforms/examples-package/processors/render-examples.spec.js b/aio/tools/transforms/examples-package/processors/render-examples.spec.js
similarity index 75%
rename from aio/transforms/examples-package/processors/render-examples.spec.js
rename to aio/tools/transforms/examples-package/processors/render-examples.spec.js
index b02580a06f..c0e1f90a1f 100644
--- a/aio/transforms/examples-package/processors/render-examples.spec.js
+++ b/aio/tools/transforms/examples-package/processors/render-examples.spec.js
@@ -45,7 +45,7 @@ describe('renderExamples processor', () => {
           { renderedContent: `<${CODE_TAG} path="test/url">Some code</${CODE_TAG}>`}
         ];
         processor.$process(docs);
-        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG}>\nwhole file\n</${CODE_TAG}>`);
+        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} path="test/url">\nwhole file\n</${CODE_TAG}>`);
       });
 
       it(`should replace all instances of <${CODE_TAG}> tags`, () => {
@@ -53,7 +53,7 @@ describe('renderExamples processor', () => {
           { renderedContent: `<${CODE_TAG} path="test/url">Some code</${CODE_TAG}><${CODE_TAG} path="test/url" region="region-1">Other code</${CODE_TAG}>`}
         ];
         processor.$process(docs);
-        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG}>\nwhole file\n</${CODE_TAG}><${CODE_TAG}>\nregion 1 contents\n</${CODE_TAG}>`);
+        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} path="test/url">\nwhole file\n</${CODE_TAG}><${CODE_TAG} path="test/url" region="region-1">\nregion 1 contents\n</${CODE_TAG}>`);
       });
 
       it('should contain the region contents from the example file if a region is specified', () => {
@@ -61,7 +61,7 @@ describe('renderExamples processor', () => {
           { renderedContent: `<${CODE_TAG} path="test/url" region="region-1">Some code</${CODE_TAG}>` }
         ];
         processor.$process(docs);
-        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG}>\nregion 1 contents\n</${CODE_TAG}>`);
+        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} path="test/url" region="region-1">\nregion 1 contents\n</${CODE_TAG}>`);
       });
 
       it(`should replace the content of the <${CODE_TAG}> tag with the whole contents from an example file if the region is empty`, () => {
@@ -69,15 +69,16 @@ describe('renderExamples processor', () => {
           { renderedContent: `<${CODE_TAG} path="test/url" region="">Some code</${CODE_TAG}>` }
         ];
         processor.$process(docs);
-        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG}>\nwhole file\n</${CODE_TAG}>`);
+        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} path="test/url" region="">\nwhole file\n</${CODE_TAG}>`);
       });
 
-      it('should remove the path and region attributes but leave the other attributes alone', () => {
-        const docs = [
-          { renderedContent: `<${CODE_TAG} class="special" path="test/url" linenums="15" region="region-1" id="some-id">Some code</${CODE_TAG}>` }
+      it('should pass along all attributes including path and region', () => {
+        const openTag = `<${CODE_TAG} class="special" path="test/url" linenums="15" region="region-1" id="some-id">`;
+
+        const docs = [  { renderedContent: `${openTag}Some code</${CODE_TAG}>` }
         ];
         processor.$process(docs);
-        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} class="special" linenums="15" id="some-id">\nregion 1 contents\n</${CODE_TAG}>`);
+        expect(docs[0].renderedContent).toEqual(`${openTag}\nregion 1 contents\n</${CODE_TAG}>`);
       });
 
       it('should cope with spaces and double quotes inside attribute values', () => {
@@ -85,7 +86,7 @@ describe('renderExamples processor', () => {
           { renderedContent: `<${CODE_TAG} title='a "quoted" value' path="test/url"></${CODE_TAG}>`}
         ];
         processor.$process(docs);
-        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} title="a &quot;quoted&quot; value">\nwhole file\n</${CODE_TAG}>`);
+        expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} title="a &quot;quoted&quot; value" path="test/url">\nwhole file\n</${CODE_TAG}>`);
       });
     })
   );
diff --git a/aio/transforms/examples-package/services/example-map.js b/aio/tools/transforms/examples-package/services/example-map.js
similarity index 100%
rename from aio/transforms/examples-package/services/example-map.js
rename to aio/tools/transforms/examples-package/services/example-map.js
diff --git a/aio/transforms/examples-package/services/getExampleRegion.js b/aio/tools/transforms/examples-package/services/getExampleRegion.js
similarity index 61%
rename from aio/transforms/examples-package/services/getExampleRegion.js
rename to aio/tools/transforms/examples-package/services/getExampleRegion.js
index bd26d084d8..47565942e0 100644
--- a/aio/transforms/examples-package/services/getExampleRegion.js
+++ b/aio/tools/transforms/examples-package/services/getExampleRegion.js
@@ -1,4 +1,4 @@
-module.exports = function getExampleRegion(exampleMap, createDocMessage, log, collectExamples) {
+module.exports = function getExampleRegion(exampleMap, createDocMessage, collectExamples) {
   return function getExampleRegionImpl(doc, relativePath, regionName) {
     const EXAMPLES_FOLDERS = collectExamples.exampleFolders;
 
@@ -14,16 +14,16 @@ module.exports = function getExampleRegion(exampleMap, createDocMessage, log, co
 
     // If still no file then we error
     if (!exampleFile) {
-      log.error(createDocMessage('Missing example file... relativePath: "' + relativePath + '".', doc));
-      log.error('Example files can be found in: ' + EXAMPLES_FOLDERS.join(', '));
-      return '';
+      const message = createDocMessage('Missing example file... relativePath: "' + relativePath + '".', doc) + '\n' +
+                      'Example files can be found in: ' + EXAMPLES_FOLDERS.join(', ');
+      throw new Error(message);
     }
 
     var sourceCodeDoc = exampleFile.regions[regionName || ''];
     if (!sourceCodeDoc) {
-      log.error(createDocMessage('Missing example region... relativePath: "' + relativePath + '", region: "' + regionName + '".', doc));
-      log.error('Regions available are:', Object.keys[exampleFile.regions]);
-      return '';
+      const message = createDocMessage('Missing example region... relativePath: "' + relativePath + '", region: "' + regionName + '".', doc) + '\n' +
+                      'Regions available are:' + Object.keys[exampleFile.regions];
+      throw new Error(message);
     }
 
     return sourceCodeDoc.renderedContent;
diff --git a/aio/transforms/examples-package/services/getExampleRegion.spec.js b/aio/tools/transforms/examples-package/services/getExampleRegion.spec.js
similarity index 79%
rename from aio/transforms/examples-package/services/getExampleRegion.spec.js
rename to aio/tools/transforms/examples-package/services/getExampleRegion.spec.js
index cb189e70f9..b07ba44d7a 100644
--- a/aio/transforms/examples-package/services/getExampleRegion.spec.js
+++ b/aio/tools/transforms/examples-package/services/getExampleRegion.spec.js
@@ -26,4 +26,13 @@ describe('getExampleRegion', () => {
   it('should contain the region contents from the example file if a region is specified', () => {
     expect(getExampleRegion({}, 'test/url', 'region-1')).toEqual('region 1 contents');
   });
+
+  it('should throw an error if an example doesn\'t exist', function() {
+    expect(function() {
+      getExampleRegion({}, 'missing/file', 'region-1');
+    }).toThrowError();
+    expect(function() {
+      getExampleRegion({}, 'test/url', 'missing-region');
+    }).toThrowError();
+  });
 });
diff --git a/aio/transforms/examples-package/services/parseArgString.js b/aio/tools/transforms/examples-package/services/parseArgString.js
similarity index 100%
rename from aio/transforms/examples-package/services/parseArgString.js
rename to aio/tools/transforms/examples-package/services/parseArgString.js
diff --git a/aio/transforms/examples-package/services/region-matchers/block-c.js b/aio/tools/transforms/examples-package/services/region-matchers/block-c.js
similarity index 100%
rename from aio/transforms/examples-package/services/region-matchers/block-c.js
rename to aio/tools/transforms/examples-package/services/region-matchers/block-c.js
diff --git a/aio/transforms/examples-package/services/region-matchers/block-c.spec.js b/aio/tools/transforms/examples-package/services/region-matchers/block-c.spec.js
similarity index 100%
rename from aio/transforms/examples-package/services/region-matchers/block-c.spec.js
rename to aio/tools/transforms/examples-package/services/region-matchers/block-c.spec.js
diff --git a/aio/transforms/examples-package/services/region-matchers/html.js b/aio/tools/transforms/examples-package/services/region-matchers/html.js
similarity index 100%
rename from aio/transforms/examples-package/services/region-matchers/html.js
rename to aio/tools/transforms/examples-package/services/region-matchers/html.js
diff --git a/aio/transforms/examples-package/services/region-matchers/html.spec.js b/aio/tools/transforms/examples-package/services/region-matchers/html.spec.js
similarity index 100%
rename from aio/transforms/examples-package/services/region-matchers/html.spec.js
rename to aio/tools/transforms/examples-package/services/region-matchers/html.spec.js
diff --git a/aio/transforms/examples-package/services/region-matchers/inline-c-only.js b/aio/tools/transforms/examples-package/services/region-matchers/inline-c-only.js
similarity index 100%
rename from aio/transforms/examples-package/services/region-matchers/inline-c-only.js
rename to aio/tools/transforms/examples-package/services/region-matchers/inline-c-only.js
diff --git a/aio/transforms/examples-package/services/region-matchers/inline-c-only.spec.js b/aio/tools/transforms/examples-package/services/region-matchers/inline-c-only.spec.js
similarity index 100%
rename from aio/transforms/examples-package/services/region-matchers/inline-c-only.spec.js
rename to aio/tools/transforms/examples-package/services/region-matchers/inline-c-only.spec.js
diff --git a/aio/transforms/examples-package/services/region-matchers/inline-c.js b/aio/tools/transforms/examples-package/services/region-matchers/inline-c.js
similarity index 100%
rename from aio/transforms/examples-package/services/region-matchers/inline-c.js
rename to aio/tools/transforms/examples-package/services/region-matchers/inline-c.js
diff --git a/aio/transforms/examples-package/services/region-matchers/inline-c.spec.js b/aio/tools/transforms/examples-package/services/region-matchers/inline-c.spec.js
similarity index 100%
rename from aio/transforms/examples-package/services/region-matchers/inline-c.spec.js
rename to aio/tools/transforms/examples-package/services/region-matchers/inline-c.spec.js
diff --git a/aio/transforms/examples-package/services/region-matchers/inline-hash.js b/aio/tools/transforms/examples-package/services/region-matchers/inline-hash.js
similarity index 100%
rename from aio/transforms/examples-package/services/region-matchers/inline-hash.js
rename to aio/tools/transforms/examples-package/services/region-matchers/inline-hash.js
diff --git a/aio/transforms/examples-package/services/region-matchers/inline-hash.spec.js b/aio/tools/transforms/examples-package/services/region-matchers/inline-hash.spec.js
similarity index 100%
rename from aio/transforms/examples-package/services/region-matchers/inline-hash.spec.js
rename to aio/tools/transforms/examples-package/services/region-matchers/inline-hash.spec.js
diff --git a/aio/transforms/examples-package/services/region-parser.js b/aio/tools/transforms/examples-package/services/region-parser.js
similarity index 98%
rename from aio/transforms/examples-package/services/region-parser.js
rename to aio/tools/transforms/examples-package/services/region-parser.js
index 76eb124bea..d996ce8301 100644
--- a/aio/transforms/examples-package/services/region-parser.js
+++ b/aio/tools/transforms/examples-package/services/region-parser.js
@@ -4,7 +4,7 @@ const inlineC = require('./region-matchers/inline-c');
 const inlineCOnly = require('./region-matchers/inline-c-only');
 const inlineHash = require('./region-matchers/inline-hash');
 const DEFAULT_PLASTER = '. . .';
-const {mapObject} = require('../utils');
+const {mapObject} = require('../../helpers/utils');
 
 module.exports = function regionParser() {
   return regionParserImpl;
diff --git a/aio/transforms/examples-package/services/region-parser.spec.js b/aio/tools/transforms/examples-package/services/region-parser.spec.js
similarity index 100%
rename from aio/transforms/examples-package/services/region-parser.spec.js
rename to aio/tools/transforms/examples-package/services/region-parser.spec.js
diff --git a/aio/transforms/helpers/test-package.js b/aio/tools/transforms/helpers/test-package.js
similarity index 93%
rename from aio/transforms/helpers/test-package.js
rename to aio/tools/transforms/helpers/test-package.js
index 450b5a5c36..a714ed929c 100644
--- a/aio/transforms/helpers/test-package.js
+++ b/aio/tools/transforms/helpers/test-package.js
@@ -18,7 +18,7 @@ module.exports = function testPackage(packageName, mockTemplateEngine) {
   pkg.factory('log', function() { return require('dgeni/lib/mocks/log')(false); });
 
   // overrides base packageInfo and returns the one for the 'angular/angular' repo.
-  const PROJECT_ROOT = path.resolve(__dirname, '../../..');
+  const PROJECT_ROOT = path.resolve(__dirname, '../../../..');
   pkg.factory('packageInfo', function() { return require(path.resolve(PROJECT_ROOT, 'package.json')); });
 
 
diff --git a/aio/transforms/examples-package/utils.js b/aio/tools/transforms/helpers/utils.js
similarity index 90%
rename from aio/transforms/examples-package/utils.js
rename to aio/tools/transforms/helpers/utils.js
index 858263a844..945a210eed 100644
--- a/aio/transforms/examples-package/utils.js
+++ b/aio/tools/transforms/helpers/utils.js
@@ -89,5 +89,12 @@ module.exports = {
     }
 
     return attrMap;
+  },
+
+  renderAttributes(attrMap) {
+    return Object.keys(attrMap).map(key =>
+      attrMap[key] === false ? '' :
+      attrMap[key] === true ? ` ${key}` :
+      ` ${key}="${attrMap[key].replace(/"/g, '&quot;')}"`).join('');
   }
 };
diff --git a/aio/transforms/examples-package/utils.spec.js b/aio/tools/transforms/helpers/utils.spec.js
similarity index 73%
rename from aio/transforms/examples-package/utils.spec.js
rename to aio/tools/transforms/helpers/utils.spec.js
index ce0369b7b7..952336e92d 100644
--- a/aio/transforms/examples-package/utils.spec.js
+++ b/aio/tools/transforms/helpers/utils.spec.js
@@ -1,4 +1,4 @@
-const { mapObject, parseAttributes } = require('./utils');
+const { mapObject, parseAttributes, renderAttributes } = require('./utils');
 
 describe('utils', () => {
   describe('mapObject', () => {
@@ -73,4 +73,27 @@ describe('utils', () => {
       );
     });
   });
+
+  describe('renderAttributes', () => {
+    it('should convert key-value map to a strong that can be used in HTML', () => {
+      expect(renderAttributes({ foo: 'bar', moo: 'car' })).toEqual(' foo="bar" moo="car"');
+    });
+
+    it('should handle boolean values', () => {
+      expect(renderAttributes({ foo: 'bar', loo: true, moo: false }))
+          .toEqual(' foo="bar" loo');
+    });
+
+    it('should escape double quotes inside the value', () => {
+      expect(renderAttributes({ foo: 'bar "car"' })).toEqual(' foo="bar &quot;car&quot;"');
+    });
+
+    it('should not escape single quotes inside the value', () => {
+      expect(renderAttributes({ foo: 'bar \'car\'' })).toEqual(' foo="bar \'car\'"');
+    });
+
+    it('should handle an empty object', () => {
+      expect(renderAttributes({ })).toEqual('');
+    });
+  });
 });
diff --git a/aio/transforms/links-package/index.js b/aio/tools/transforms/links-package/index.js
similarity index 100%
rename from aio/transforms/links-package/index.js
rename to aio/tools/transforms/links-package/index.js
diff --git a/aio/transforms/links-package/inline-tag-defs/link.js b/aio/tools/transforms/links-package/inline-tag-defs/link.js
similarity index 62%
rename from aio/transforms/links-package/inline-tag-defs/link.js
rename to aio/tools/transforms/links-package/inline-tag-defs/link.js
index 2b24828bad..3a8524a586 100644
--- a/aio/transforms/links-package/inline-tag-defs/link.js
+++ b/aio/tools/transforms/links-package/inline-tag-defs/link.js
@@ -9,23 +9,29 @@ var INLINE_LINK = /(\S+)(?:\s+([\s\S]+))?/;
  * @param  {Function} docs error message
  * @return {String}  The html link information
  *
- * @property {boolean} relativeLinks Whether we expect the links to be relative to the originating doc
+ * @property {boolean} failOnBadLink Whether to throw an error (aborting the processing) if a link is invalid.
  */
 module.exports = function linkInlineTagDef(getLinkInfo, createDocMessage, log) {
   return {
     name: 'link',
     aliases: ['linkDocs'],
+    failOnBadLink: false,
     description:
         'Process inline link tags (of the form {@link some/uri Some Title}), replacing them with HTML anchors',
-    handler: function(doc, tagName, tagDescription) {
+    handler(doc, tagName, tagDescription) {
 
       // Parse out the uri and title
-      return tagDescription.replace(INLINE_LINK, function(match, uri, title) {
+      return tagDescription.replace(INLINE_LINK, (match, uri, title) => {
 
         var linkInfo = getLinkInfo(uri, title, doc);
 
         if (!linkInfo.valid) {
-          log.warn(createDocMessage(linkInfo.error, doc));
+          const message = createDocMessage(`Error in {@${tagName} ${tagDescription}} - ${linkInfo.error}`, doc);
+          if (this.failOnBadLink) {
+            throw new Error(message);
+          } else {
+            log.warn(message);
+          }
         }
 
         return '<a href=\'' + linkInfo.url + '\'>' + linkInfo.title + '</a>';
diff --git a/aio/tools/transforms/links-package/inline-tag-defs/link.spec.js b/aio/tools/transforms/links-package/inline-tag-defs/link.spec.js
new file mode 100644
index 0000000000..9d1a3b13c9
--- /dev/null
+++ b/aio/tools/transforms/links-package/inline-tag-defs/link.spec.js
@@ -0,0 +1,61 @@
+var testPackageFactory = require('../../helpers/test-package');
+var Dgeni = require('dgeni');
+
+describe('link inline-tag-def', function() {
+  let injector, tag, getLinkInfo, log;
+
+  beforeEach(() => {
+    getLinkInfo = jasmine.createSpy('getLinkInfo');
+    const testPackage = testPackageFactory('links-package', true)
+      .factory('getLinkInfo', function() { return getLinkInfo; });
+    getLinkInfo.disambiguators = [];
+
+    const dgeni = new Dgeni([testPackage]);
+    injector = dgeni.configureInjector();
+    tag = injector.get('linkInlineTagDef');
+    log = injector.get('log');
+  });
+
+  it('should be available as a service', () => {
+    expect(tag).toBeDefined();
+    expect(tag.name).toEqual('link');
+    expect(tag.aliases).toEqual(['linkDocs']);
+  });
+
+  it('should call getLinkInfo', () => {
+    const doc = {};
+    const tagName = 'link';
+    const tagDescription = 'doc-id link text';
+    getLinkInfo.and.returnValue({ url: 'url/to/doc', title: 'link text' });
+    tag.handler(doc, tagName, tagDescription);
+    expect(getLinkInfo).toHaveBeenCalledWith('doc-id', 'link text', doc);
+  });
+
+  it('should return an HTML anchor tag', () => {
+    const doc = {};
+    const tagName = 'link';
+    const tagDescription = 'doc-id link text';
+    getLinkInfo.and.returnValue({ url: 'url/to/doc', title: 'link text' });
+    const result = tag.handler(doc, tagName, tagDescription);
+    expect(result).toEqual('<a href=\'url/to/doc\'>link text</a>');
+  });
+
+  it('should log a warning if not failOnBadLink and the link is "bad"', () => {
+    const doc = {};
+    const tagName = 'link';
+    const tagDescription = 'doc-id link text';
+    getLinkInfo.and.returnValue({ valid: false, error: 'Error message', errorType: 'error' });
+    expect(() => tag.handler(doc, tagName, tagDescription)).not.toThrow();
+    expect(log.warn).toHaveBeenCalledWith('Error in {@link doc-id link text} - Error message - doc');
+  });
+
+  it('should throw an error if failOnBadLink and the link is "bad"', () => {
+    const doc = {};
+    const tagName = 'link';
+    const tagDescription = 'doc-id link text';
+    getLinkInfo.and.returnValue({ valid: false, error: 'Error message', errorType: 'error' });
+    tag.failOnBadLink = true;
+    expect(() => tag.handler(doc, tagName, tagDescription)).toThrowError('Error in {@link doc-id link text} - Error message - doc');
+  });
+});
+
diff --git a/aio/transforms/links-package/services/deprecatedDocsLinkDisambiguator.js b/aio/tools/transforms/links-package/services/deprecatedDocsLinkDisambiguator.js
similarity index 100%
rename from aio/transforms/links-package/services/deprecatedDocsLinkDisambiguator.js
rename to aio/tools/transforms/links-package/services/deprecatedDocsLinkDisambiguator.js
diff --git a/aio/transforms/links-package/services/getAliases.js b/aio/tools/transforms/links-package/services/getAliases.js
similarity index 100%
rename from aio/transforms/links-package/services/getAliases.js
rename to aio/tools/transforms/links-package/services/getAliases.js
diff --git a/aio/transforms/links-package/services/getAliases.spec.js b/aio/tools/transforms/links-package/services/getAliases.spec.js
similarity index 100%
rename from aio/transforms/links-package/services/getAliases.spec.js
rename to aio/tools/transforms/links-package/services/getAliases.spec.js
diff --git a/aio/transforms/links-package/services/getDocFromAlias.js b/aio/tools/transforms/links-package/services/getDocFromAlias.js
similarity index 100%
rename from aio/transforms/links-package/services/getDocFromAlias.js
rename to aio/tools/transforms/links-package/services/getDocFromAlias.js
diff --git a/aio/transforms/links-package/services/getDocFromAlias.spec.js b/aio/tools/transforms/links-package/services/getDocFromAlias.spec.js
similarity index 100%
rename from aio/transforms/links-package/services/getDocFromAlias.spec.js
rename to aio/tools/transforms/links-package/services/getDocFromAlias.spec.js
diff --git a/aio/transforms/links-package/services/getLinkInfo.js b/aio/tools/transforms/links-package/services/getLinkInfo.js
similarity index 91%
rename from aio/transforms/links-package/services/getLinkInfo.js
rename to aio/tools/transforms/links-package/services/getLinkInfo.js
index e2cbe2c4d8..fd6b57dab0 100644
--- a/aio/transforms/links-package/services/getLinkInfo.js
+++ b/aio/tools/transforms/links-package/services/getLinkInfo.js
@@ -44,7 +44,7 @@ module.exports = function getLinkInfo(getDocFromAlias, encodeCodeBlock, log) {
 
     } else if (docs.length >= 1) {
       linkInfo.url = docs[0].path;
-      linkInfo.title = title || encodeCodeBlock(docs[0].name, true);
+      linkInfo.title = title || docs[0].title || docs[0].name && encodeCodeBlock(docs[0].name, true);
       linkInfo.type = 'doc';
 
       if (getLinkInfoImpl.relativeLinks && currentDoc && currentDoc.path) {
@@ -72,6 +72,12 @@ module.exports = function getLinkInfo(getDocFromAlias, encodeCodeBlock, log) {
           title || ((url.indexOf('#') === 0) ? url.substring(1) : path.basename(url, '.html'));
     }
 
+    if (linkInfo.title === undefined) {
+      linkInfo.valid = false;
+      linkInfo.errorType = 'no-title';
+      linkInfo.error = 'The link is missing a title';
+    }
+
     return linkInfo;
   }
 
diff --git a/aio/tools/transforms/links-package/services/getLinkInfo.spec.js b/aio/tools/transforms/links-package/services/getLinkInfo.spec.js
new file mode 100644
index 0000000000..fbaef20a64
--- /dev/null
+++ b/aio/tools/transforms/links-package/services/getLinkInfo.spec.js
@@ -0,0 +1,53 @@
+const testPackage = require('../../helpers/test-package');
+const Dgeni = require('dgeni');
+
+let getLinkInfo, aliasMap;
+
+describe('getLinkInfo', () => {
+  beforeEach(function() {
+    var dgeni = new Dgeni([testPackage('links-package', true)]);
+    var injector = dgeni.configureInjector();
+    aliasMap = injector.get('aliasMap');
+    getLinkInfo = injector.get('getLinkInfo');
+  });
+
+  it('should use the title if specified', () => {
+    aliasMap.addDoc({ docType: 'guide', title: 'Browser Support', name: 'browser-support', id: 'guide/browser-support', aliases: ['guide/browser-support', 'browser-support'], path: 'guide/browser-support' });
+    const currentDoc = { };
+    const linkInfo = getLinkInfo('browser-support', '"Browser Support Guide"', currentDoc);
+    expect(linkInfo.title).toBe('"Browser Support Guide"');
+  });
+
+  it('should set the link to invalid if the title is `undefined`', () => {
+    aliasMap.addDoc({ docType: 'guide', id: 'guide/browser-support', aliases: ['guide/browser-support', 'browser-support'], path: 'guide/browser-support' });
+    const currentDoc = { };
+    const linkInfo = getLinkInfo('browser-support', undefined, currentDoc);
+    expect(linkInfo.valid).toBe(false);
+    expect(linkInfo.errorType).toEqual('no-title');
+    expect(linkInfo.error).toEqual('The link is missing a title');
+  });
+
+  it('should use the target document title if available and no title is specified', () => {
+    aliasMap.addDoc({ docType: 'guide', title: 'Browser Support', id: 'guide/browser-support', aliases: ['guide/browser-support', 'browser-support'], path: 'guide/browser-support' });
+    const currentDoc = { };
+    const linkInfo = getLinkInfo('browser-support', undefined, currentDoc);
+    expect(linkInfo.valid).toBe(true);
+    expect(linkInfo.title).toEqual('Browser Support');
+  });
+
+  it('should prefer the target doc title over name if available and no title is specified', () => {
+    aliasMap.addDoc({ docType: 'guide', title: 'Browser Support', name: 'browser-support', id: 'guide/browser-support', aliases: ['guide/browser-support', 'browser-support'], path: 'guide/browser-support' });
+    const currentDoc = { };
+    const linkInfo = getLinkInfo('browser-support', undefined, currentDoc);
+    expect(linkInfo.valid).toBe(true);
+    expect(linkInfo.title).toEqual('Browser Support');
+  });
+
+  it('should use the target document name as a code block if available and no title is specified', () => {
+    aliasMap.addDoc({ docType: 'api', name: 'CurrencyPipe', id: 'common/CurrencyPipe', aliases: ['common/CurrencyPipe', 'CurrencyPipe'], path: 'api/common/CurrencyPipe' });
+    const currentDoc = { };
+    const linkInfo = getLinkInfo('CurrencyPipe', undefined, currentDoc);
+    expect(linkInfo.valid).toBe(true);
+    expect(linkInfo.title).toEqual('<code>CurrencyPipe</code>');
+  });
+});
\ No newline at end of file
diff --git a/aio/transforms/links-package/services/moduleScopeLinkDisambiguator.js b/aio/tools/transforms/links-package/services/moduleScopeLinkDisambiguator.js
similarity index 100%
rename from aio/transforms/links-package/services/moduleScopeLinkDisambiguator.js
rename to aio/tools/transforms/links-package/services/moduleScopeLinkDisambiguator.js
diff --git a/aio/tools/transforms/post-process-package/index.js b/aio/tools/transforms/post-process-package/index.js
new file mode 100644
index 0000000000..559bc57d55
--- /dev/null
+++ b/aio/tools/transforms/post-process-package/index.js
@@ -0,0 +1,5 @@
+var Package = require('dgeni').Package;
+var base = require('dgeni-packages/base');
+
+module.exports = new Package('post-process-package', [base])
+  .processor(require('./processors/post-process-html'));
diff --git a/aio/tools/transforms/post-process-package/processors/post-process-html.js b/aio/tools/transforms/post-process-package/processors/post-process-html.js
new file mode 100644
index 0000000000..5f8f837bf5
--- /dev/null
+++ b/aio/tools/transforms/post-process-package/processors/post-process-html.js
@@ -0,0 +1,49 @@
+const rehype = require('rehype');
+
+/**
+ * @dgProcessor postProcessHtml
+ *
+ * @description
+ * Use the rehype processing engine to manipulate the
+ * `renderedContent` HTML via rehype "plugins" that work with HTML ASTs (HASTs).
+ * See https://github.com/wooorm/rehype
+ *
+ * Each plugin is a factory function that will be called with the "rehype" engine as `this`.
+ * The factory should return a "transform" function that takes a HAST and returns a `boolean` or `undefined`.
+ * The HAST can be mutated by the "transform" function.
+ * If `false` is returned then the processing stops with that plugin.
+ *
+ * @property docTypes {string[]} the `docTypes` of docs that should be post-processed
+ * @property plugins {Function[]} the rehype plugins that will modify the HAST.
+ *
+ */
+module.exports = function postProcessHtml(log, createDocMessage) {
+  return {
+    $runAfter: ['docs-rendered'],
+    $runBefore: ['writing-files'],
+    docTypes: [],
+    plugins: [],
+    $process(docs) {
+      const engine = rehype()
+            .data('settings', { fragment: true });
+      this.plugins.forEach(plugin => engine.use(plugin));
+
+      let vFile;
+
+      docs
+        .filter(doc => this.docTypes.indexOf(doc.docType) !== -1)
+        .forEach(doc => {
+          try {
+            vFile = engine.processSync(doc.renderedContent);
+            doc.renderedContent = vFile.contents;
+            vFile.messages.forEach(m => {
+              log.warn(createDocMessage(m.message, doc));
+            });
+            doc.vFile = vFile;
+          } catch(e) {
+            throw new Error(createDocMessage(e.message, doc));
+          }
+        });
+    }
+  };
+};
diff --git a/aio/tools/transforms/post-process-package/processors/post-process-html.spec.js b/aio/tools/transforms/post-process-package/processors/post-process-html.spec.js
new file mode 100644
index 0000000000..9516f0714d
--- /dev/null
+++ b/aio/tools/transforms/post-process-package/processors/post-process-html.spec.js
@@ -0,0 +1,84 @@
+const testPackage = require('../../helpers/test-package');
+const Dgeni = require('dgeni');
+
+describe('postProcessHtml', function() {
+  let dgeni, injector, processor, createDocMessage;
+
+  beforeEach(function() {
+    dgeni = new Dgeni([testPackage('post-process-package', true)]);
+    injector = dgeni.configureInjector();
+    createDocMessage = injector.get('createDocMessage');
+    processor = injector.get('postProcessHtml');
+    processor.docTypes = ['a', 'b'];
+  });
+
+  it('should be available from the injector', () => {
+    expect(processor).toBeDefined();
+  });
+
+  it('should only process docs that match the specified docTypes', () => {
+    const elements = [];
+    const captureFirstElement = ast => {
+      elements.push(ast.children[0].tagName);
+    };
+    processor.plugins = [() => captureFirstElement];
+
+    const docs = [
+      { docType: 'a', renderedContent: '<a></a>' },
+      { docType: 'b', renderedContent: '<b></b>' },
+      { docType: 'c', renderedContent: '<c></c>' },
+      { docType: 'd', renderedContent: '<d></d>' },
+    ];
+    processor.$process(docs);
+    expect(elements).toEqual(['a', 'b']);
+  });
+
+  it('should run all the plugins on each doc', () => {
+    const capitalizeFirstElement = ast => {
+      ast.children[0].tagName = ast.children[0].tagName.toUpperCase();
+    };
+    const addOneToFirstElement = ast => {
+      ast.children[0].tagName = ast.children[0].tagName + '1';
+    };
+    const elements = [];
+    const captureFirstElement = ast => {
+      elements.push(ast.children[0].tagName);
+    };
+
+    const docs = [
+      { docType: 'a', renderedContent: '<a></a>' },
+      { docType: 'b', renderedContent: '<b></b>' },
+      { docType: 'c', renderedContent: '<c></c>' },
+      { docType: 'd', renderedContent: '<d></d>' },
+    ];
+
+    processor.plugins = [
+      () => capitalizeFirstElement,
+      () => addOneToFirstElement,
+      () => captureFirstElement
+    ];
+    processor.$process(docs);
+    expect(elements).toEqual(['A1', 'B1']);
+  });
+
+  it('should report non-fatal errors', () => {
+    const log = injector.get('log');
+    const addWarning = (ast, file) => {
+      file.message('There was a problem');
+    };
+    processor.plugins = [() => addWarning];
+    processor.$process([{ docType: 'a', renderedContent: '' }]);
+    expect(log.warn).toHaveBeenCalled();
+  });
+
+  it('should throw on fatal errors', () => {
+    const log = injector.get('log');
+    const addError = (ast, file) => {
+      file.fail('There was an error');
+    };
+    const doc = { docType: 'a', renderedContent: '' };
+    processor.plugins = [() => addError];
+    expect(() => processor.$process([doc])).toThrowError(createDocMessage('There was an error', doc));
+    expect(log.error).not.toHaveBeenCalled();
+  });
+});
diff --git a/aio/transforms/remark-package/index.js b/aio/tools/transforms/remark-package/index.js
similarity index 100%
rename from aio/transforms/remark-package/index.js
rename to aio/tools/transforms/remark-package/index.js
diff --git a/aio/tools/transforms/remark-package/services/handlers/code.js b/aio/tools/transforms/remark-package/services/handlers/code.js
new file mode 100644
index 0000000000..a208704e93
--- /dev/null
+++ b/aio/tools/transforms/remark-package/services/handlers/code.js
@@ -0,0 +1,14 @@
+/**
+ * Render markdown code blocks as `<code-example>` tags
+ */
+module.exports = function code(h, node) {
+  var value = node.value ? ('\n' + node.value + '\n') : '';
+  var lang = node.lang && node.lang.match(/^[^ \t]+(?=[ \t]|$)/);
+  var props = {};
+
+  if (lang) {
+    props.language = lang;
+  }
+
+  return h(node, 'code-example', props, [{ type: 'text', value }]);
+};
diff --git a/aio/transforms/remark-package/services/renderMarkdown.js b/aio/tools/transforms/remark-package/services/renderMarkdown.js
similarity index 82%
rename from aio/transforms/remark-package/services/renderMarkdown.js
rename to aio/tools/transforms/remark-package/services/renderMarkdown.js
index 6577b5ff21..077d64da1a 100644
--- a/aio/transforms/remark-package/services/renderMarkdown.js
+++ b/aio/tools/transforms/remark-package/services/renderMarkdown.js
@@ -1,5 +1,6 @@
 const remark = require('remark');
 const html = require('remark-html');
+const code = require('./handlers/code');
 
 const {markAndSwap} = require('./translator');
 
@@ -9,6 +10,7 @@ const {markAndSwap} = require('./translator');
  * Render the markdown in the given string as HTML.
  */
 module.exports = function renderMarkdown() {
+  const handlers = { code };
   const renderer = remark()
                     .use(inlineTagDefs)
                     .use(noIndentedCodeBlocks)
@@ -17,7 +19,7 @@ module.exports = function renderMarkdown() {
                     // .use(() => tree => {
                     //   console.log(require('util').inspect(tree, { colors: true, depth: 4 }));
                     // })
-                    .use(html);
+                    .use(html, { handlers });
 
   return function renderMarkdownImpl(content) {
     return markAndSwap(renderer.processSync(content).toString());
@@ -91,27 +93,24 @@ module.exports = function renderMarkdown() {
       const openMatch = anyBlockMatcher.exec(value);
       if (openMatch) {
         const blockName = openMatch[1];
-        const fullMatch = matchRecursiveRegExp(value, createOpenMatcher(blockName), createCloseMatcher(blockName))[0];
-        if (silent || !fullMatch) {
-          // either we are not eating (silent) or the match failed
-          return !!fullMatch;
+        try {
+          const fullMatch = matchRecursiveRegExp(value, createOpenMatcher(blockName), createCloseMatcher(blockName))[0];
+          if (silent || !fullMatch) {
+            // either we are not eating (silent) or the match failed
+            return !!fullMatch;
+          }
+          return eat(fullMatch[0])({
+            type: 'html',
+            value: fullMatch[0]
+          });
+        } catch(e) {
+          this.file.fail('Unmatched plain HTML block tag ' + e.message);
         }
-        return eat(fullMatch[0])({
-          type: 'html',
-          value: fullMatch[0]
-        });
       }
     }
   }
 };
 
-
-
-
-
-
-
-
 /**
  * matchRecursiveRegExp
  *
@@ -168,30 +167,32 @@ function rgxFindMatchPos(str, left, right, flags) {
   let index, match, start, end;
   let count = 0;
 
-  do {
-    while ((match = bothMatcher.exec(str))) {
-      if (leftMatcher.test(match[0])) {
-        if (!(count++)) {
-          index = bothMatcher.lastIndex;
-          start = index - match[0].length;
-        }
-      } else if (count) {
-        if (!--count) {
-          end = match.index + match[0].length;
-          var obj = {
-            left: {start: start, end: index},
-            match: {start: index, end: match.index},
-            right: {start: match.index, end: end},
-            wholeMatch: {start: start, end: end}
-          };
-          pos.push(obj);
-          if (!global) {
-            return pos;
-          }
+  while ((match = bothMatcher.exec(str))) {
+    if (leftMatcher.test(match[0])) {
+      if (!(count++)) {
+        index = bothMatcher.lastIndex;
+        start = index - match[0].length;
+      }
+    } else if (count) {
+      if (!--count) {
+        end = match.index + match[0].length;
+        var obj = {
+          left: {start: start, end: index},
+          match: {start: index, end: match.index},
+          right: {start: match.index, end: end},
+          wholeMatch: {start: start, end: end}
+        };
+        pos.push(obj);
+        if (!global) {
+          return pos;
         }
       }
     }
-  } while (count && (bothMatcher.lastIndex = index));
+  }
+
+  if (count) {
+    throw new Error(str.slice(start, index));
+  }
 
   return pos;
 }
diff --git a/aio/transforms/remark-package/services/renderMarkdown.spec.js b/aio/tools/transforms/remark-package/services/renderMarkdown.spec.js
similarity index 64%
rename from aio/transforms/remark-package/services/renderMarkdown.spec.js
rename to aio/tools/transforms/remark-package/services/renderMarkdown.spec.js
index 3bb1b9352c..d9afc6c762 100644
--- a/aio/transforms/remark-package/services/renderMarkdown.spec.js
+++ b/aio/tools/transforms/remark-package/services/renderMarkdown.spec.js
@@ -25,9 +25,9 @@ describe('remark: renderMarkdown service', () => {
   });
 
   it('should not process markdown inside inline tags', () => {
-    const content = '# heading {@link some_url_path}';
+    const content = '* list item {@link some_url_path}';
     const output = renderMarkdown(content);
-    expect(output).toEqual('<h1>heading {@link some_url_path}</h1>\n');
+    expect(output).toEqual('<ul>\n<li>list item {@link some_url_path}</li>\n</ul>\n');
   });
 
   it('should not put block level inline tags inside paragraphs', () => {
@@ -49,6 +49,17 @@ describe('remark: renderMarkdown service', () => {
     expect(output).toEqual('<code-example>\n\n  **abc**\n\n  def\n</code-example>\n<code-tabs><code-pane>\n\n  **abc**\n\n  def\n</code-pane></code-tabs>\n');
   });
 
+  it('should handle recursive tags marked as unformatted', () => {
+    const content = '<code-example>\n\n  <code-example>\n\n  **abc**\n\n  def\n\n</code-example>\n\n</code-example>\n\nhij\n\n<code-example>\n\nklm</code-example>';
+    const output = renderMarkdown(content);
+    expect(output).toEqual('<code-example>\n\n  <code-example>\n\n  **abc**\n\n  def\n\n</code-example>\n\n</code-example>\n<p>hij</p>\n<code-example>\n\nklm</code-example>\n');
+  });
+
+  it('should raise an error if a tag marked as unformatted is not closed', () => {
+    const content = '<code-example path="xxx">\n\n  **abc**\n\n  def\n<code-example>\n\n\n\n  **abc**\n\n  def\n</code-example>';
+    expect(() => renderMarkdown(content)).toThrowError('Unmatched plain HTML block tag <code-example path="xxx">');
+  });
+
   it('should not remove spaces after anchor tags', () => {
     var input =
         'A aa aaa aaaa aaaaa aaaaaa aaaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaaa aaaaaaaaaaa\n' +
@@ -67,4 +78,21 @@ describe('remark: renderMarkdown service', () => {
     const output = renderMarkdown(content);
     expect(output).toEqual('<p>some text</p>\n<p>    indented text</p>\n<p>other text</p>\n');
   });
+
+  it('should format triple backtick code blocks as `code-example` tags', () => {
+    const content =
+    '```ts\n' +
+    '  class MyClass {\n' +
+    '    method1() { ... }\n' +
+    '  }\n' +
+    '```';
+    const output = renderMarkdown(content);
+    expect(output).toEqual(
+    '<code-example language="ts">\n' +
+    '  class MyClass {\n' +
+    '    method1() { ... }\n' +
+    '  }\n' +
+    '</code-example>\n'
+    );
+  });
 });
diff --git a/aio/tools/transforms/remark-package/services/translator.js b/aio/tools/transforms/remark-package/services/translator.js
new file mode 100644
index 0000000000..dbe8973727
--- /dev/null
+++ b/aio/tools/transforms/remark-package/services/translator.js
@@ -0,0 +1,24 @@
+function mark(text) {
+  return text.replace(/<(h\d|header|p|a)([\s\S]*?)>([\s\S]+?)<\/\1>/gi, function ($0, $1, $2, $3) {
+    const suffix = isTranslation($3) ? 'result' : 'origin=off';
+    return `<${$1} translation-${suffix} ${$2}>${$3}</${$1}>`;
+  });
+}
+
+function swap(text) {
+  return text.replace(/<(\w+)( translation-origin\b[\s\S]*?)<\/\1>(\s*)<\1( translation-result\b[\s\S]*?)<\/\1>/gi, '<$1$4</$1>$3<$1$2</$1>');
+}
+
+function markAndSwap(text) {
+  return swap(mark(text));
+}
+
+function isTranslation(text) {
+  return text && /[\u2E80-\u2EFF\u2F00-\u2FDF\u3000-\u303F\u31C0-\u31EF\u3200-\u32FF\u3300-\u33FF\u3400-\u4DBF\u4DC0-\u4DFF\u4E00-\u9FBF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF]/.test(text);
+}
+
+module.exports = {
+  mark,
+  swap,
+  markAndSwap,
+};
diff --git a/aio/tools/transforms/remark-package/services/translator.spec.js b/aio/tools/transforms/remark-package/services/translator.spec.js
new file mode 100644
index 0000000000..f7b7e15b16
--- /dev/null
+++ b/aio/tools/transforms/remark-package/services/translator.spec.js
@@ -0,0 +1,13 @@
+const { expect } = require('chai');
+
+const { mark, swap } = require('./translator');
+
+it('mark translation results and origins', () => {
+  expect(mark('<h1>AngularJS to Angular</h1>\n<h1>从 AngularJS 到 Angular 快速参考</h1>'))
+    .equal('<h1 translation-origin=off >AngularJS to Angular</h1>\n<h1 translation-result >从 AngularJS 到 Angular 快速参考</h1>');
+});
+
+it('swap result and origin', () => {
+  expect(swap('<h1 translation-origin=off >AngularJS to Angular</h1>\n<h1 translation-result >从 AngularJS 到 Angular 快速参考</h1>'))
+    .equal('<h1 translation-result >从 AngularJS 到 Angular 快速参考</h1>\n<h1 translation-origin=off >AngularJS to Angular</h1>');
+});
diff --git a/aio/transforms/target-package/index.js b/aio/tools/transforms/target-package/index.js
similarity index 100%
rename from aio/transforms/target-package/index.js
rename to aio/tools/transforms/target-package/index.js
diff --git a/aio/transforms/target-package/inline-tag-defs/target.js b/aio/tools/transforms/target-package/inline-tag-defs/target.js
similarity index 100%
rename from aio/transforms/target-package/inline-tag-defs/target.js
rename to aio/tools/transforms/target-package/inline-tag-defs/target.js
diff --git a/aio/transforms/target-package/inline-tag-defs/target.spec.js b/aio/tools/transforms/target-package/inline-tag-defs/target.spec.js
similarity index 100%
rename from aio/transforms/target-package/inline-tag-defs/target.spec.js
rename to aio/tools/transforms/target-package/inline-tag-defs/target.spec.js
diff --git a/aio/transforms/target-package/services/targetEnvironments.js b/aio/tools/transforms/target-package/services/targetEnvironments.js
similarity index 100%
rename from aio/transforms/target-package/services/targetEnvironments.js
rename to aio/tools/transforms/target-package/services/targetEnvironments.js
diff --git a/aio/transforms/target-package/services/targetEnvironments.spec.js b/aio/tools/transforms/target-package/services/targetEnvironments.spec.js
similarity index 100%
rename from aio/transforms/target-package/services/targetEnvironments.spec.js
rename to aio/tools/transforms/target-package/services/targetEnvironments.spec.js
diff --git a/aio/transforms/templates/README.md b/aio/tools/transforms/templates/README.md
similarity index 100%
rename from aio/transforms/templates/README.md
rename to aio/tools/transforms/templates/README.md
diff --git a/aio/tools/transforms/templates/api/base.template.html b/aio/tools/transforms/templates/api/base.template.html
new file mode 100644
index 0000000000..f1da284144
--- /dev/null
+++ b/aio/tools/transforms/templates/api/base.template.html
@@ -0,0 +1,13 @@
+<article>
+  <header class="api-header">
+    <h1 class="no-toc">{$ doc.name $}</h1>
+    <label class="api-type-label {$ doc.docType $}">{$ doc.docType $}</label>
+    {% if doc.deprecated %}<label class="api-status-label deprecated">deprecated</label>{% endif %}
+    {% if doc.experimental %}<label class="api-status-label experimental">experimental</label>{% endif %}
+    {% if doc.stable %}<label class="api-status-label stable">stable</label>{% endif %}
+    <span class="version">{$ version $}</span>
+  </header>
+
+  {% block body %}{% endblock %}
+
+</article>
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/class.template.html b/aio/tools/transforms/templates/api/class.template.html
new file mode 100644
index 0000000000..cdfc8dd17c
--- /dev/null
+++ b/aio/tools/transforms/templates/api/class.template.html
@@ -0,0 +1,14 @@
+{% import "lib/memberHelpers.html" as memberHelpers -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'export-base.template.html' -%}
+
+{% block overview %}{% include "includes/class-overview.html" %}{% endblock %}
+{% block details %}
+{% block additional %}{% endblock %}
+{% include "includes/description.html" %}
+{$ memberHelpers.renderMemberDetails(doc.statics, 'static-members', 'static-member', 'Static Members') $}
+{% include "includes/constructor.html" %}
+{$ memberHelpers.renderMemberDetails(doc.members, 'instance-members', 'instance-member', 'Members') $}
+{% include "includes/annotations.html" %}
+
+{% endblock %}
diff --git a/aio/transforms/templates/const.template.html b/aio/tools/transforms/templates/api/const.template.html
similarity index 100%
rename from aio/transforms/templates/const.template.html
rename to aio/tools/transforms/templates/api/const.template.html
diff --git a/aio/tools/transforms/templates/api/decorator.template.html b/aio/tools/transforms/templates/api/decorator.template.html
new file mode 100644
index 0000000000..232b99b40d
--- /dev/null
+++ b/aio/tools/transforms/templates/api/decorator.template.html
@@ -0,0 +1,9 @@
+{% import "lib/memberHelpers.html" as memberHelper -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'export-base.template.html' %}
+
+{% block overview %}{% include "includes/decorator-overview.html" %}{% endblock %}
+{% block details %}
+  {% include "includes/description.html" %}
+  {$ memberHelper.renderMemberDetails(doc.members, 'metadata-members', 'metadata-member', 'Metadata Properties') $}
+{% endblock %}
diff --git a/aio/tools/transforms/templates/api/directive.template.html b/aio/tools/transforms/templates/api/directive.template.html
new file mode 100644
index 0000000000..2858e9cd5b
--- /dev/null
+++ b/aio/tools/transforms/templates/api/directive.template.html
@@ -0,0 +1,11 @@
+{% import "lib/directiveHelpers.html" as directiveHelper -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'class.template.html' -%}
+
+{% block overview %}{% include "includes/directive-overview.html" %}{% endblock %}
+{% block additional -%}
+  {% include "includes/selectors.html" %}
+  {$ directiveHelper.renderBindings(doc.inputs, 'inputs', 'input', 'Inputs') $}
+  {$ directiveHelper.renderBindings(doc.outputs, 'outputs', 'output', 'Outputs') $}
+  {% include "includes/export-as.html" %}
+{% endblock %}
diff --git a/aio/transforms/templates/enum.template.html b/aio/tools/transforms/templates/api/enum.template.html
similarity index 100%
rename from aio/transforms/templates/enum.template.html
rename to aio/tools/transforms/templates/api/enum.template.html
diff --git a/aio/tools/transforms/templates/api/export-base.template.html b/aio/tools/transforms/templates/api/export-base.template.html
new file mode 100644
index 0000000000..6b23a7e9db
--- /dev/null
+++ b/aio/tools/transforms/templates/api/export-base.template.html
@@ -0,0 +1,11 @@
+{% extends 'base.template.html' -%}
+
+{% block body %}
+  {% include "includes/info-bar.html" %}
+  {% include "includes/what-it-does.html" %}
+  {% include "includes/security-notes.html" %}
+  {% include "includes/deprecation.html" %}
+  {% block overview %}{% endblock %}
+  {% include "includes/how-to-use.html" %}
+  {% block details %}{% endblock %}
+{% endblock %}
diff --git a/aio/tools/transforms/templates/api/function.template.html b/aio/tools/transforms/templates/api/function.template.html
new file mode 100644
index 0000000000..ea75648360
--- /dev/null
+++ b/aio/tools/transforms/templates/api/function.template.html
@@ -0,0 +1,24 @@
+{% import "lib/paramList.html" as params -%}
+{% extends 'export-base.template.html' -%}
+
+{% block overview %}
+<code-example language="ts" hideCopy="true" class="no-box api-heading">
+function {$ doc.name $}{$ doc.typeParameters | escape $}{$ params.paramList(doc.parameters) $}
+{%- if doc.type %}: {$ doc.type | escape $}{% endif %};
+</code-example>
+{% endblock %}
+
+{% block details %}
+{% include "includes/description.html" %}
+{% if doc.overloads.length %}
+  <h2>Overloads</h2>{% for overload in doc.overloads %}
+  <code-example language="ts" hideCopy="true" class="no-box api-heading">
+  function {$ overload.name $}{$ doc.typeParameters | escape $}{$ params.paramList(overload.parameters) $}
+  {%- if overload.type %}: {$ overload.type | escape $}{% endif %};
+  </code-example>
+  <section class="description">
+    {$ overload.description | trimBlankLines | marked $}
+  </section>
+{% endfor %}
+{% endif %}
+{% endblock %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/includes/annotations.html b/aio/tools/transforms/templates/api/includes/annotations.html
new file mode 100644
index 0000000000..ec78059908
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/annotations.html
@@ -0,0 +1,9 @@
+{%- if doc.decorators.length %}
+<section class="annotations">
+  <h2>Annotations</h2>
+  {%- for decorator in doc.decorators %}
+    <code-example hideCopy="true" class="no-box api-heading">@{$ decorator.name $}{$ params.paramList(decorator.arguments) $}</code-example>
+    {% if not decorator.notYetDocumented %}{$ decorator.description | marked $}{% endif %}
+  {% endfor %}
+</section>
+{% endif %}
diff --git a/aio/tools/transforms/templates/api/includes/class-overview.html b/aio/tools/transforms/templates/api/includes/class-overview.html
new file mode 100644
index 0000000000..7a4c375e5f
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/class-overview.html
@@ -0,0 +1,13 @@
+{% import "lib/memberHelpers.html" as memberHelper -%}
+
+<section class="{$ doc.docType $}-overview">
+<h2>Overview</h2>
+<code-example language="ts" hideCopy="true">
+{$ doc.docType $} {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {
+{%- if doc.statics.length %}{% for member in doc.statics %}{% if not member.internal %}
+  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
+{%- if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
+  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
+}
+</code-example>
+</section>
diff --git a/aio/tools/transforms/templates/api/includes/constructor.html b/aio/tools/transforms/templates/api/includes/constructor.html
new file mode 100644
index 0000000000..85ea15082b
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/constructor.html
@@ -0,0 +1,8 @@
+{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
+<section class="constructor">
+  <a id="{$ doc.constructorDoc.name $}"></a>
+  <h2>Constructor</h2>
+  <code-example hideCopy="true" class="no-box api-heading">{$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) $}</code-example>
+  {% if not doc.constructorDoc.notYetDocumented %}{$ doc.constructorDoc.description | marked $}{% endif %}
+</section>
+{% endif %}
diff --git a/aio/tools/transforms/templates/api/includes/decorator-overview.html b/aio/tools/transforms/templates/api/includes/decorator-overview.html
new file mode 100644
index 0000000000..8b2fe83f4d
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/decorator-overview.html
@@ -0,0 +1,10 @@
+{% import "lib/memberHelpers.html" as memberHelper -%}
+
+<section class="decorator-overview">
+  <h2>Metadata Overview</h2>
+<code-example language="ts" hideCopy="true">
+@{$ doc.name $}{$ doc.typeParams | escape $}({ {% if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
+  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
+})
+</code-example>
+</section>
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/includes/deprecation.html b/aio/tools/transforms/templates/api/includes/deprecation.html
new file mode 100644
index 0000000000..7aa4f0db54
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/deprecation.html
@@ -0,0 +1,6 @@
+{% if doc.deprecated %}
+<section class="deprecated">
+  <h2>Deprecation Notes</h2>
+  {$ doc.deprecated | marked $}
+</section>
+{% endif %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/includes/description.html b/aio/tools/transforms/templates/api/includes/description.html
new file mode 100644
index 0000000000..d5545c06e7
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/description.html
@@ -0,0 +1,6 @@
+{% if doc.description %}
+<section class="description">
+  <h2>Description</h2>
+  {$ doc.description | trimBlankLines | marked $}
+</section>
+{% endif %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/includes/directive-overview.html b/aio/tools/transforms/templates/api/includes/directive-overview.html
new file mode 100644
index 0000000000..82c64e356a
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/directive-overview.html
@@ -0,0 +1,14 @@
+{% import "lib/memberHelpers.html" as memberHelper -%}
+
+<section class="{$ doc.docType $}-overview">
+  <h2>Overview</h2>
+<code-example language="ts" hideCopy="true">{% for decorator in doc.decorators %}
+<a href="#annotations">@{$ decorator.name $}{$ params.paramList(decorator.arguments) $}</a>{% endfor %}
+class {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {
+{%- if doc.statics.length %}{% for member in doc.statics %}{% if not member.internal %}
+  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
+{%- if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
+  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
+}
+</code-example>
+</section>
diff --git a/aio/tools/transforms/templates/api/includes/export-as.html b/aio/tools/transforms/templates/api/includes/export-as.html
new file mode 100644
index 0000000000..a3fed860db
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/export-as.html
@@ -0,0 +1,8 @@
+{%- if doc.exportAs %}
+<section class="export-as">
+  <h2>Exported as</h2>
+  <div>
+    <code>{$ doc.exportAs $}</code>
+  </div>
+</section>
+{% endif %}
diff --git a/aio/tools/transforms/templates/api/includes/how-to-use.html b/aio/tools/transforms/templates/api/includes/how-to-use.html
new file mode 100644
index 0000000000..13156b0b7a
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/how-to-use.html
@@ -0,0 +1,6 @@
+{% if doc.howToUse %}
+<section class="how-to-use">
+  <h2>How To Use</h2>
+  {$ doc.howToUse | marked $}
+</section>
+{% endif %}
diff --git a/aio/tools/transforms/templates/api/includes/info-bar.html b/aio/tools/transforms/templates/api/includes/info-bar.html
new file mode 100644
index 0000000000..5a30c525ba
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/info-bar.html
@@ -0,0 +1,27 @@
+{% import "lib/githubLinks.html" as github -%}
+
+<!-- INFO BAR -->
+<section class="info-bar">
+
+<table class="is-full-width">
+<tbody>
+<tr>
+  <th>npm Package</th>
+  <td><a href="https://www.npmjs.com/package/@angular/{$ doc.moduleDoc.id.split('/')[0] $}">@angular/{$ doc.moduleDoc.id.split('/')[0] $}</a></td>
+</tr>
+<tr>
+  <th>Module</th>
+  <td><code>import { {$ doc.name $} } from <a href="{$ doc.moduleDoc.path $}">'@angular/{$ doc.moduleDoc.id $}'</a>;</code></td>
+</tr>
+<tr>
+  <th>Source</th>
+  <td>{$ github.githubViewLink(doc, versionInfo) $}</td>
+</tr>
+{% if doc.ngModule %}
+<tr>
+  <th>NgModule</th>
+  <td>{@link {$ doc.ngModule $}}</td>
+</tr>
+{% endif %}
+</tbody>
+</table>
diff --git a/aio/tools/transforms/templates/api/includes/interface-overview.html b/aio/tools/transforms/templates/api/includes/interface-overview.html
new file mode 100644
index 0000000000..ac4d71299c
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/interface-overview.html
@@ -0,0 +1,10 @@
+{% import "lib/memberHelpers.html" as memberHelper -%}
+
+<section class="interface-overview">
+<h2>Interface Overview</h2>
+<code-example language="ts" hideCopy="true">
+interface {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} { {% if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
+  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
+}
+</code-example>
+</section>
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/includes/metadata.html b/aio/tools/transforms/templates/api/includes/metadata.html
new file mode 100644
index 0000000000..1746529d4f
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/metadata.html
@@ -0,0 +1,13 @@
+{% if doc.members.length %}
+<section class="meta-data">
+  <h2>Metadata Properties</h2>
+    {% for metadata in doc.members %}{% if not metadata.internal %}
+    <div class="metadata-member">
+      <a name="{$ metadata.name $}" class="anchor-offset"></a>
+      <code-example hideCopy="true">{$ metadata.name $}{$ params.paramList(metadata.parameters) | trim $}{$ params.returnType(metadata.type) $}</code-example>
+      {%- if not metadata.notYetDocumented %}{$ metadata.description | marked $}{% endif -%}
+    </div>
+    {% if not loop.last %}<hr class="hr-margin">{% endif %}
+  {% endif %}{% endfor %}
+</section>
+{% endif %}
diff --git a/aio/tools/transforms/templates/api/includes/security-notes.html b/aio/tools/transforms/templates/api/includes/security-notes.html
new file mode 100644
index 0000000000..4f0f815b30
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/security-notes.html
@@ -0,0 +1,6 @@
+{% if doc.security %}
+<section "security">
+  <h2>Security Risk</h2>
+  {$ doc.security | marked $}
+</section>
+{% endif %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/includes/selectors.html b/aio/tools/transforms/templates/api/includes/selectors.html
new file mode 100644
index 0000000000..7c42e2566d
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/selectors.html
@@ -0,0 +1,10 @@
+{%- if doc.selector %}
+<section class="selectors">
+  <h2>Selectors</h2>
+  {% for selector in doc.selector.split(',') %}
+  <div class="selector">
+    <code>{$ selector $}</code>
+  </div>
+  {% endfor %}
+</section>
+{% endif %}
diff --git a/aio/tools/transforms/templates/api/includes/what-it-does.html b/aio/tools/transforms/templates/api/includes/what-it-does.html
new file mode 100644
index 0000000000..b492b932a7
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/what-it-does.html
@@ -0,0 +1,5 @@
+{%- if doc.whatItDoes %}
+<div class="what-it-does info-banner">
+  {$ doc.whatItDoes | marked $}
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/interface.template.html b/aio/tools/transforms/templates/api/interface.template.html
new file mode 100644
index 0000000000..e4d99bc238
--- /dev/null
+++ b/aio/tools/transforms/templates/api/interface.template.html
@@ -0,0 +1,9 @@
+{% import "lib/paramList.html" as params -%}
+{% import "lib/memberHelpers.html" as memberHelper -%}
+{% extends 'export-base.template.html' -%}
+
+{% block overview %}{% include "includes/interface-overview.html" %}{% endblock %}
+{% block details %}
+  {% include "includes/description.html" %}
+  {$ memberHelper.renderMemberDetails(doc.members, 'instance-members', 'instance-member', 'Members') $}
+{% endblock %}
diff --git a/aio/transforms/templates/let.template.html b/aio/tools/transforms/templates/api/let.template.html
similarity index 100%
rename from aio/transforms/templates/let.template.html
rename to aio/tools/transforms/templates/api/let.template.html
diff --git a/aio/tools/transforms/templates/api/lib/directiveHelpers.html b/aio/tools/transforms/templates/api/lib/directiveHelpers.html
new file mode 100644
index 0000000000..937f02b891
--- /dev/null
+++ b/aio/tools/transforms/templates/api/lib/directiveHelpers.html
@@ -0,0 +1,13 @@
+{% macro renderBindings(bindings, cssContainerClass, cssItemClass, title) -%}
+{% if bindings.length %}
+<section class="{$ cssContainerClass $}">
+  <h2>{$ title $}</h2>
+  {% for binding in bindings %}
+  <div class="{$ cssItemClass $}">
+    <code>{$ binding.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ binding.memberDoc.containerDoc.name $}.{$ binding.propertyName $}</code>
+    {#{$ binding.memberDoc.description | trimBlankLines | marked $}#}
+  </div>
+  {% endfor %}
+</section>
+{% endif %}
+{%- endmacro %}
\ No newline at end of file
diff --git a/aio/transforms/templates/lib/githubLinks.html b/aio/tools/transforms/templates/api/lib/githubLinks.html
similarity index 58%
rename from aio/transforms/templates/lib/githubLinks.html
rename to aio/tools/transforms/templates/api/lib/githubLinks.html
index c077673de2..a281712098 100644
--- a/aio/transforms/templates/lib/githubLinks.html
+++ b/aio/tools/transforms/templates/api/lib/githubLinks.html
@@ -1,7 +1,7 @@
 {% macro githubHref(doc, versionInfo) -%}
-https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInfo.repo $}/tree/{$ versionInfo.currentVersion.isSnapshot and versionInfo.currentVersion.SHA or versionInfo.currentVersion.raw $}/packages/{$ doc.fileInfo.projectRelativePath $}#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 $}/packages/{$ doc.fileInfo.realProjectRelativePath $}#L{$ doc.startingLine + 1 $}-L{$ doc.endingLine + 1 $}
 {%- endmacro %}
 
 {% macro githubViewLink(doc, versionInfo) -%}
-  <a href="{$ githubHref(doc, versionInfo) $}">{$ doc.fileInfo.projectRelativePath $}</a>
+  <a href="{$ githubHref(doc, versionInfo) $}">{$ doc.fileInfo.realProjectRelativePath $}</a>
 {%- endmacro %}
diff --git a/aio/tools/transforms/templates/api/lib/memberHelpers.html b/aio/tools/transforms/templates/api/lib/memberHelpers.html
new file mode 100644
index 0000000000..ed1a2047dd
--- /dev/null
+++ b/aio/tools/transforms/templates/api/lib/memberHelpers.html
@@ -0,0 +1,53 @@
+{% import "lib/paramList.html" as params -%}
+
+{%- macro renderHeritage(exportDoc) -%}
+  {%- if exportDoc.extendsClauses.length %} extends {% for clause in exportDoc.extendsClauses -%}
+  {$ clause $}{% if not loop.last %}, {% endif -%}
+  {% endfor %}{% endif %}
+  {%- if exportDoc.implementsClauses.length %} implements {% for clause in exportDoc.implementsClauses -%}
+  {$ clause $}{% if not loop.last %}, {% endif -%}
+  {% endfor %}{% endif %}
+{%- endmacro -%}
+
+{%- macro renderMember(member, truncateLines) -%}
+    {%- if member.accessibility !== 'public' %}{$ member.accessibility $} {% endif -%}
+    {%- if member.isGetAccessor %}get {% endif -%}
+    {%- if member.isSetAccessor %}set {% endif -%}
+    {%- if member.isStatic  %}static {% endif -%}
+    {$ member.name $}{$ member.typeParameters | escape $}{$ params.paramList(member.parameters, truncateLines) | trim $}
+    {%- if member.isOptional  %}?{% endif -%}
+    {$ params.returnType(member.type) | trim | truncateCode(truncateLines) $}
+{%- endmacro -%}
+
+{%- macro renderMemberDetail(member, cssClass) -%}
+<div class="{$ cssClass $}">
+  <a id="{$ member.anchor $}"></a>
+  <code-example hideCopy="true" class="no-box api-heading">{$ renderMember(member) $}</code-example>
+  {%- if not member.notYetDocumented %}
+  {$ member.description | marked $}
+  {% endif -%}
+</div>
+{% endmacro -%}
+
+{% macro renderMemberDetails(members, containerClass, itemClass, titleText) %}
+{% if members.length %}
+<section class="{$ containerClass $}">
+  <h2>{$ titleText $}</h2>
+  {% for member in members %}{% if not member.internal %}
+    {$ renderMemberDetail(member, itemClass) $}
+    {% if member.overloads.length %}
+    <details class="overloads">
+      <summary>Overloads</summary>
+      <div class="detail-contents">
+        {% for overload in member.overloads %}
+        {$ renderMemberDetail(overload, itemClass + '-overload') $}
+        {% if not loop.last %}<hr>{% endif %}
+        {% endfor %}
+      </div>
+    </details>
+    {% endif %}
+    {% if not loop.last %}<hr class="hr-margin">{% endif %}
+  {% endif %}{% endfor %}
+</section>
+{% endif %}
+{% endmacro %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/lib/paramList.html b/aio/tools/transforms/templates/api/lib/paramList.html
new file mode 100644
index 0000000000..3e6b721cf4
--- /dev/null
+++ b/aio/tools/transforms/templates/api/lib/paramList.html
@@ -0,0 +1,12 @@
+{% macro paramList(params, truncateLines) -%}
+  {%- if params -%}
+    ({%- for param in params -%}
+      {$ param | escape | truncateCode(truncateLines) $}{% if not loop.last %}, {% endif %}
+    {%- endfor %})
+  {%- endif %}
+{%- endmacro -%}
+
+
+{% macro returnType(returnType) -%}
+  {%- if returnType %}: {$ returnType | escape $}{% endif -%}
+{%- endmacro -%}
diff --git a/aio/tools/transforms/templates/api/module.template.html b/aio/tools/transforms/templates/api/module.template.html
new file mode 100644
index 0000000000..0704998b13
--- /dev/null
+++ b/aio/tools/transforms/templates/api/module.template.html
@@ -0,0 +1,16 @@
+{% extends 'base.template.html' -%}
+
+{% block body -%}
+
+{% include "includes/deprecation.html" %}
+{% include "includes/description.html" %}
+
+<section class="export-list">
+  <ul>
+    {% for export in doc.exports -%}
+    <li><a href="{$ export.path $}">{$ export.name $}</a></li>
+    {%- endfor %}
+  </ul>
+</section>
+
+{%- endblock %}
diff --git a/aio/tools/transforms/templates/api/pipe.template.html b/aio/tools/transforms/templates/api/pipe.template.html
new file mode 100644
index 0000000000..0bea954ec7
--- /dev/null
+++ b/aio/tools/transforms/templates/api/pipe.template.html
@@ -0,0 +1,5 @@
+{% extends 'export-base.template.html' -%}
+
+{% block details %}
+{% include "includes/description.html" %}
+{% endblock %}
diff --git a/aio/tools/transforms/templates/api/type-alias.template.html b/aio/tools/transforms/templates/api/type-alias.template.html
new file mode 100644
index 0000000000..330ec5d688
--- /dev/null
+++ b/aio/tools/transforms/templates/api/type-alias.template.html
@@ -0,0 +1,11 @@
+{% extends 'export-base.template.html' %}
+
+{% block overview %}
+  <code-example language="ts" hideCopy="true">
+  type {$ doc.name $}{% if doc.typeDefinition %} = {$ doc.typeDefinition | escape $}{% endif %};
+  </code-example>
+{% endblock %}
+
+{% block details %}
+  {% include "includes/description.html" %}
+{% endblock %}
diff --git a/aio/transforms/templates/value-module.template.html b/aio/tools/transforms/templates/api/value-module.template.html
similarity index 100%
rename from aio/transforms/templates/value-module.template.html
rename to aio/tools/transforms/templates/api/value-module.template.html
diff --git a/aio/tools/transforms/templates/api/var.template.html b/aio/tools/transforms/templates/api/var.template.html
new file mode 100644
index 0000000000..c8e590b96e
--- /dev/null
+++ b/aio/tools/transforms/templates/api/var.template.html
@@ -0,0 +1,11 @@
+{% extends 'export-base.template.html' %}
+
+{% block overview %}
+  <code-example language="ts" hideCopy="true" class="no-box api-heading">
+  const {$ doc.name $}: {$ doc.symbolTypeName or 'any' $};
+  </code-example>
+{% endblock %}
+
+{% block details %}
+  {% include "includes/description.html" %}
+{% endblock %}
diff --git a/aio/tools/transforms/templates/content.template.html b/aio/tools/transforms/templates/content.template.html
new file mode 100644
index 0000000000..a9216df1df
--- /dev/null
+++ b/aio/tools/transforms/templates/content.template.html
@@ -0,0 +1,4 @@
+{% if doc.title %}{$ ('# ' + doc.title.trim()) | marked $}{% endif %}
+<div class="content">
+{$ doc.description | marked $}
+</div>
\ No newline at end of file
diff --git a/aio/transforms/templates/data-module.template.js b/aio/tools/transforms/templates/data-module.template.js
similarity index 100%
rename from aio/transforms/templates/data-module.template.js
rename to aio/tools/transforms/templates/data-module.template.js
diff --git a/aio/transforms/templates/example-region.template.html b/aio/tools/transforms/templates/example-region.template.html
similarity index 100%
rename from aio/transforms/templates/example-region.template.html
rename to aio/tools/transforms/templates/example-region.template.html
diff --git a/aio/transforms/templates/json-doc.template.json b/aio/tools/transforms/templates/json-doc.template.json
similarity index 100%
rename from aio/transforms/templates/json-doc.template.json
rename to aio/tools/transforms/templates/json-doc.template.json
diff --git a/aio/transforms/templates/overview-dump.template.html b/aio/tools/transforms/templates/overview-dump.template.html
similarity index 94%
rename from aio/transforms/templates/overview-dump.template.html
rename to aio/tools/transforms/templates/overview-dump.template.html
index 86e1b72e0e..2bd79834fa 100644
--- a/aio/transforms/templates/overview-dump.template.html
+++ b/aio/tools/transforms/templates/overview-dump.template.html
@@ -1,5 +1,5 @@
-{% import "lib/githubLinks.html" as github -%}
-{% import "lib/paramList.html" as params -%}
+{% import "api/lib/githubLinks.html" as github -%}
+{% import "api/lib/paramList.html" as params -%}
 <!DOCTYPE html>
 <html>
 <head>
diff --git a/aio/tools/transforms/test.js b/aio/tools/transforms/test.js
new file mode 100644
index 0000000000..48967ddd45
--- /dev/null
+++ b/aio/tools/transforms/test.js
@@ -0,0 +1,17 @@
+/*
+ * Use this script to run the tests for the doc generation
+ * We cannot use the Jasmine CLI directly because it doesn't seem to
+ * understand the glob and only runs one spec file.
+ *
+ * Equally we cannot use a jasmine.json config file because it doesn't
+ * allow us to set the projectBaseDir, which means that you have to run
+ * jasmine CLI from this directory.
+ *
+ * Using a file like this gives us full control and keeps the package.json
+ * file clean and simple.
+ */
+
+const Jasmine = require('jasmine');
+const jasmine = new Jasmine({ projectBaseDir: __dirname });
+jasmine.loadConfig({ spec_files: ['**/*.spec.js'] });
+jasmine.execute();
diff --git a/aio/transforms/README.md b/aio/transforms/README.md
deleted file mode 100644
index 2200fb8c90..0000000000
--- a/aio/transforms/README.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Documentation Generation
-
-The dgeni tool is used to generate the documentation from the source files held in this repository.
-The documentation generation is configured by a dgeni package defined in `docs/angular.io-package/index.js`.
-This package, in turn requires a number of other packages, some are defined locally in the `docs` folder,
-such as `docs/cheatsheet-package` and `docs/content-package`, etc. And some are brought in from the
-`dgeni-packages` node modules, such as `jsdoc` and `nunjucks`.
-
-## Generating the docs
-
-To generate the documentation simply run `gulp docs` from the command line.
-
-## Testing the dgeni packages
-
-The local packages have unit tests that you can execute by running `gulp docs-test` from the command line.
-
-## What does it generate?
-
-The output from dgeni is written to files in the `dist/docs` folder.
-
-Notably this includes a partial HTML file for each "page" of the documentation, such as API pages and guides.
-It also includes JavaScript files that contain metadata about the documentation such as navigation data and
-keywords for building a search index.
-
-## Viewing the docs
-
-You can view the dummy demo app using a simple HTTP server hosting `dist/docs/index.html`
diff --git a/aio/transforms/angular.io-package/index.js b/aio/transforms/angular.io-package/index.js
deleted file mode 100644
index 436e334b5d..0000000000
--- a/aio/transforms/angular.io-package/index.js
+++ /dev/null
@@ -1,314 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-const path = require('path');
-const fs = require('fs');
-const Package = require('dgeni').Package;
-
-const jsdocPackage = require('dgeni-packages/jsdoc');
-const nunjucksPackage = require('dgeni-packages/nunjucks');
-const typescriptPackage = require('dgeni-packages/typescript');
-const gitPackage = require('dgeni-packages/git');
-const linksPackage = require('../links-package');
-const examplesPackage = require('../examples-package');
-const targetPackage = require('../target-package');
-const contentPackage = require('../content-package');
-const remarkPackage = require('../remark-package');
-
-const PROJECT_ROOT = path.resolve(__dirname, '../../..');
-const API_SOURCE_PATH = path.resolve(PROJECT_ROOT, 'packages');
-const AIO_PATH = path.resolve(PROJECT_ROOT, 'aio');
-const CONTENTS_PATH = path.resolve(AIO_PATH, 'content');
-const TEMPLATES_PATH = path.resolve(AIO_PATH, 'transforms/templates');
-const OUTPUT_PATH = path.resolve(AIO_PATH, 'src/content');
-const DOCS_OUTPUT_PATH = path.resolve(OUTPUT_PATH, 'docs');
-
-module.exports =
-    new Package(
-        'angular.io', [
-          jsdocPackage, nunjucksPackage, typescriptPackage, linksPackage, examplesPackage,
-          gitPackage, targetPackage, contentPackage, remarkPackage
-        ])
-
-        // Register the processors
-        .processor(require('./processors/convertPrivateClassesToInterfaces'))
-        .processor(require('./processors/generateApiListDoc'))
-        .processor(require('./processors/generateKeywords'))
-        .processor(require('./processors/createOverviewDump'))
-        .processor(require('./processors/checkUnbalancedBackTicks'))
-        .processor(require('./processors/addNotYetDocumentedProperty'))
-        .processor(require('./processors/mergeDecoratorDocs'))
-        .processor(require('./processors/extractDecoratedClasses'))
-        .processor(require('./processors/matchUpDirectiveDecorators'))
-        .processor(require('./processors/filterMemberDocs'))
-        .processor(require('./processors/convertToJson'))
-        .processor(require('./processors/markBarredODocsAsPrivate'))
-        .processor(require('./processors/filterPrivateDocs'))
-        .processor(require('./processors/filterIgnoredDocs'))
-        .processor(require('./processors/fixInternalDocumentLinks'))
-        .processor(require('./processors/processNavigationMap'))
-        .processor(require('./processors/copyContentAssets'))
-
-        // overrides base packageInfo and returns the one for the 'angular/angular' repo.
-        .factory('packageInfo', function() { return require(path.resolve(PROJECT_ROOT, 'package.json')); })
-        .factory(require('./readers/json'))
-        .factory(require('./services/copyFolder'))
-
-        .config(function(checkAnchorLinksProcessor) {
-          // TODO: re-enable
-          checkAnchorLinksProcessor.$enabled = false;
-        })
-
-        // Where do we get the source files?
-        .config(function(
-            readTypeScriptModules, readFilesProcessor, collectExamples, generateKeywordsProcessor, jsonFileReader) {
-
-          // API files are typescript
-          readTypeScriptModules.basePath = API_SOURCE_PATH;
-          readTypeScriptModules.ignoreExportsMatching = [/^_/];
-          readTypeScriptModules.hidePrivateMembers = true;
-          readFilesProcessor.fileReaders.push(jsonFileReader);
-          readTypeScriptModules.sourceFiles = [
-            'common/index.ts',
-            'common/testing/index.ts',
-            'core/index.ts',
-            'core/testing/index.ts',
-            'forms/index.ts',
-            'http/index.ts',
-            'http/testing/index.ts',
-            'platform-browser/index.ts',
-            'platform-browser/testing/index.ts',
-            'platform-browser-dynamic/index.ts',
-            'platform-browser-dynamic/testing/index.ts',
-            'platform-server/index.ts',
-            'platform-server/testing/index.ts',
-            'platform-webworker/index.ts',
-            'platform-webworker-dynamic/index.ts',
-            'router/index.ts',
-            'router/testing/index.ts',
-            'upgrade/index.ts',
-            'upgrade/static.ts',
-          ];
-
-          readFilesProcessor.basePath = PROJECT_ROOT;
-          readFilesProcessor.sourceFiles = [
-            {
-              basePath: CONTENTS_PATH,
-              include: CONTENTS_PATH + '/{cookbook,guide,tutorial}/**/*.md',
-              fileReader: 'contentFileReader'
-            },
-            {
-              basePath: CONTENTS_PATH + '/marketing',
-              include: CONTENTS_PATH + '/marketing/**/*.{html,md}',
-              fileReader: 'contentFileReader'
-            },
-            {
-              basePath: CONTENTS_PATH,
-              include: CONTENTS_PATH + '/*.md',
-              exclude: [CONTENTS_PATH + '/index.md'],
-              fileReader: 'contentFileReader'
-            },
-            {
-              basePath: API_SOURCE_PATH,
-              include: API_SOURCE_PATH + '/examples/**/*',
-              fileReader: 'exampleFileReader'
-            },
-            {
-              basePath: CONTENTS_PATH,
-              include: CONTENTS_PATH + '/examples/**/*',
-              exclude: [
-                '**/*plnkr.no-link.html',
-                '**/node_modules/**',
-                // _boilerplate files
-                '**/_boilerplate/**',
-                '**/*/src/styles.css',
-                '**/*/src/systemjs-angular-loader.js',
-                '**/*/src/systemjs.config.js',
-                '**/*/src/tsconfig.json',
-                '**/*/bs-config.e2e.json',
-                '**/*/bs-config.json',
-                '**/*/package.json',
-                '**/*/tslint.json',
-                // example files
-                '**/_test-output',
-                '**/protractor-helpers.js',
-                '**/e2e-spec.js',
-                '**/ts/**/*.js',
-                '**/js-es6*/**/*.js',
-                '**/ts-snippets/**/*.js',
-              ],
-              fileReader: 'exampleFileReader'
-            },
-            {
-              basePath: CONTENTS_PATH,
-              include: CONTENTS_PATH + '/navigation.json',
-              fileReader: 'jsonFileReader'
-            },
-            {
-              basePath: CONTENTS_PATH,
-              include: CONTENTS_PATH + '/marketing/contributors.json',
-              fileReader: 'jsonFileReader'
-            },
-            {
-              basePath: CONTENTS_PATH,
-              include: CONTENTS_PATH + '/translations/**/*.md',
-              fileReader: 'contentFileReader'
-            },
-          ];
-
-          collectExamples.exampleFolders = ['examples', 'examples'];
-
-          generateKeywordsProcessor.ignoreWordsFile = 'aio/transforms/angular.io-package/ignore.words';
-          generateKeywordsProcessor.docTypesToIgnore = ['example-region'];
-        })
-
-        // Ignore certain problematic files
-        .config(function(filterIgnoredDocs) {
-          filterIgnoredDocs.ignore = [
-            /\/VERSION$/  // Ignore the `VERSION` const, since it would be written to the same file as the `Version` class
-          ];
-        })
-
-        // Where do we write the output files?
-        .config(function(writeFilesProcessor) { writeFilesProcessor.outputFolder = DOCS_OUTPUT_PATH; })
-
-
-        // Target environments
-        .config(function(targetEnvironments) {
-          const ALLOWED_LANGUAGES = ['ts', 'js', 'dart'];
-          const TARGET_LANGUAGE = 'ts';
-
-          ALLOWED_LANGUAGES.forEach(target => targetEnvironments.addAllowed(target));
-          targetEnvironments.activate(TARGET_LANGUAGE);
-
-          // TODO: we may need to do something with `linkDocsInlineTagDef`
-        })
-
-
-        // Configure jsdoc-style tag parsing
-        .config(function(parseTagsProcessor, getInjectables, inlineTagProcessor) {
-          // Load up all the tag definitions in the tag-defs folder
-          parseTagsProcessor.tagDefinitions =
-              parseTagsProcessor.tagDefinitions.concat(getInjectables(requireFolder('./tag-defs')));
-
-          // We actually don't want to parse param docs in this package as we are getting the data
-          // out using TS
-          // TODO: rewire the param docs to the params extracted from TS
-          parseTagsProcessor.tagDefinitions.forEach(function(tagDef) {
-            if (tagDef.name === 'param') {
-              tagDef.docProperty = 'paramData';
-              tagDef.transforms = [];
-            }
-          });
-
-          inlineTagProcessor.inlineTagDefinitions.push(require('./inline-tag-defs/anchor'));
-        })
-
-
-
-        // Configure nunjucks rendering of docs via templates
-        .config(function(
-            renderDocsProcessor, versionInfo, templateFinder, templateEngine, getInjectables, renderMarkdown) {
-
-          // Where to find the templates for the doc rendering
-          templateFinder.templateFolders = [TEMPLATES_PATH];
-
-          // Standard patterns for matching docs to templates
-          templateFinder.templatePatterns = [
-            '${ doc.template }', '${ doc.id }.${ doc.docType }.template.html',
-            '${ doc.id }.template.html', '${ doc.docType }.template.html',
-            '${ doc.id }.${ doc.docType }.template.js', '${ doc.id }.template.js',
-            '${ doc.docType }.template.js', '${ doc.id }.${ doc.docType }.template.json',
-            '${ doc.id }.template.json', '${ doc.docType }.template.json', 'common.template.html'
-          ];
-
-          // Nunjucks and Angular conflict in their template bindings so change Nunjucks
-          templateEngine.config.tags = {variableStart: '{$', variableEnd: '$}'};
-
-          templateEngine.filters =
-              templateEngine.filters.concat(getInjectables(requireFolder('./rendering')));
-
-          // Add the version data to the renderer, for use in things like github links
-          renderDocsProcessor.extraData.versionInfo = versionInfo;
-
-          // helpers are made available to the nunjucks templates
-          renderDocsProcessor.helpers.relativePath = function(from, to) {
-            return path.relative(from, to);
-          };
-
-          // Tell the HTML formatter not to format code-example blocks
-          renderMarkdown.unformattedTags = [
-            'code-example',
-            'code-pane'
-          ];
-        })
-
-
-
-        // We are not going to be relaxed about ambiguous links
-        .config(function(getLinkInfo) {
-          getLinkInfo.useFirstAmbiguousLink = false;
-        })
-
-
-
-        .config(function(
-            computeIdsProcessor, computePathsProcessor, EXPORT_DOC_TYPES, generateApiListDoc,
-            generateKeywordsProcessor) {
-
-          const API_SEGMENT = 'api';
-          const APP_SEGMENT = 'app';
-
-          generateApiListDoc.outputFolder = API_SEGMENT;
-          generateKeywordsProcessor.outputFolder = APP_SEGMENT;
-
-          // Replace any path templates inherited from other packages
-          // (we want full and transparent control)
-          computePathsProcessor.pathTemplates = [
-            {
-              docTypes: ['module'],
-              getPath: function computeModulePath(doc) {
-                doc.moduleFolder = `${API_SEGMENT}/${doc.id.replace(/\/index$/, '')}`;
-                return doc.moduleFolder;
-              },
-              outputPathTemplate: '${moduleFolder}.json'
-            },
-            {
-              docTypes: EXPORT_DOC_TYPES.concat(['decorator', 'directive', 'pipe']),
-              pathTemplate: '${moduleDoc.moduleFolder}/${name}',
-              outputPathTemplate: '${moduleDoc.moduleFolder}/${name}.json',
-            },
-            {docTypes: ['example-region'], getOutputPath: function() {}},
-            {
-              docTypes: ['content'],
-              getPath: (doc) => `${doc.id.replace(/\/index$/, '')}`,
-              outputPathTemplate: '${path}.json'
-            },
-            {docTypes: ['navigation-json'], pathTemplate: '${id}', outputPathTemplate: '../${id}.json'},
-            {docTypes: ['contributors-json'], pathTemplate: '${id}', outputPathTemplate: '../${id}.json'}
-          ];
-        })
-
-        .config(function(convertToJsonProcessor, EXPORT_DOC_TYPES) {
-          convertToJsonProcessor.docTypes = EXPORT_DOC_TYPES.concat([
-            'content', 'decorator', 'directive', 'pipe', 'module'
-          ]);
-        })
-
-        .config(function(copyContentAssetsProcessor) {
-          copyContentAssetsProcessor.assetMappings.push(
-            { from: path.resolve(CONTENTS_PATH, 'images'), to: path.resolve(OUTPUT_PATH, 'images') }
-          );
-        });
-
-
-function requireFolder(folderPath) {
-  const absolutePath = path.resolve(__dirname, folderPath);
-  return fs.readdirSync(absolutePath)
-      .filter(p => !/[._]spec\.js$/.test(p))  // ignore spec files
-      .map(p => require(path.resolve(absolutePath, p)));
-}
diff --git a/aio/transforms/angular.io-package/processors/convertToJson.js b/aio/transforms/angular.io-package/processors/convertToJson.js
deleted file mode 100644
index fd918d8d03..0000000000
--- a/aio/transforms/angular.io-package/processors/convertToJson.js
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = function convertToJsonProcessor() {
-
-  return {
-    $runAfter: ['checkUnbalancedBackTicks'],
-    $runBefore: ['writeFilesProcessor'],
-    docTypes: [],
-    $process: function(docs) {
-      const docTypes = this.docTypes;
-      docs.forEach((doc) => {
-        if (docTypes.indexOf(doc.docType) !== -1) {
-          const output = {
-            title: doc.title || doc.name,
-            contents: doc.renderedContent
-          };
-          doc.renderedContent = JSON.stringify(output, null, 2);
-        }
-      });
-    }
-  };
-};
diff --git a/aio/transforms/angular.io-package/processors/filterIgnoredDocs.js b/aio/transforms/angular.io-package/processors/filterIgnoredDocs.js
deleted file mode 100644
index f1ec0fe177..0000000000
--- a/aio/transforms/angular.io-package/processors/filterIgnoredDocs.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Filter out docs whose id matches a pattern in the `filterIgnoredDocs.ignore` list
- */
-module.exports = function filterIgnoredDocs() {
-  return {
-    ignore: [],
-    $runAfter: ['ids-computed'],
-    $runBefore: ['computing-paths'],
-    $process: function(docs) {
-      return docs.filter(doc => !this.ignore.some(regexp => regexp.test(doc.id)));
-    }
-  };
-};
diff --git a/aio/transforms/angular.io-package/processors/filterIgnoredDocs.spec.js b/aio/transforms/angular.io-package/processors/filterIgnoredDocs.spec.js
deleted file mode 100644
index a44a16220b..0000000000
--- a/aio/transforms/angular.io-package/processors/filterIgnoredDocs.spec.js
+++ /dev/null
@@ -1,39 +0,0 @@
-const testPackage = require('../../helpers/test-package');
-const processorFactory = require('./filterIgnoredDocs');
-const Dgeni = require('dgeni');
-
-describe('filterIgnoredDocs processor', () => {
-
-  it('should be available on the injector', () => {
-    const dgeni = new Dgeni([testPackage('angular.io-package')]);
-    const injector = dgeni.configureInjector();
-    const processor = injector.get('filterIgnoredDocs');
-    expect(processor.$process).toBeDefined();
-  });
-
-  it('should run before the correct processor', () => {
-    const processor = processorFactory();
-    expect(processor.$runBefore).toEqual(['computing-paths']);
-  });
-
-  it('should run after the correct processor', () => {
-    const processor = processorFactory();
-    expect(processor.$runAfter).toEqual(['ids-computed']);
-  });
-
-  it('should remove docs that match the ignore list', () => {
-    const processor = processorFactory();
-    processor.ignore = [/\/VERSION$/, /ignore-me/];
-    const docs = [
-      { id: 'public1'},
-      { id: 'ignore-me/something' },
-      { id: 'public2'},
-      { id: 'and-me/VERSION' }
-    ];
-    const filteredDocs = processor.$process(docs);
-    expect(filteredDocs).toEqual([
-      { id: 'public1'},
-      { id: 'public2'}
-    ]);
-  });
-});
diff --git a/aio/transforms/angular.io-package/processors/filterMemberDocs.js b/aio/transforms/angular.io-package/processors/filterMemberDocs.js
deleted file mode 100644
index b0fcd6b3ce..0000000000
--- a/aio/transforms/angular.io-package/processors/filterMemberDocs.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = function filterMemberDocs() {
-  return {
-    $runAfter: ['extra-docs-added'], $runBefore: ['computing-paths'], $process: function(docs) {
-      return docs.filter(function(doc) { return doc.docType !== 'member'; });
-    }
-  };
-};
diff --git a/aio/transforms/angular.io-package/processors/generateKeywords.spec.js b/aio/transforms/angular.io-package/processors/generateKeywords.spec.js
deleted file mode 100644
index a9f18e5964..0000000000
--- a/aio/transforms/angular.io-package/processors/generateKeywords.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const testPackage = require('../../helpers/test-package');
-const mockLogger = require('dgeni/lib/mocks/log')(false);
-const processorFactory = require('./generateKeywords');
-const Dgeni = require('dgeni');
-
-const mockReadFilesProcessor = {
-  basePath: 'base/path'
-};
-
-describe('generateKeywords processor', () => {
-
-  it('should be available on the injector', () => {
-    const dgeni = new Dgeni([testPackage('angular.io-package')]);
-    const injector = dgeni.configureInjector();
-    const processor = injector.get('generateKeywordsProcessor');
-    expect(processor.$process).toBeDefined();
-  });
-
-  it('should run after the correct processor', () => {
-    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
-    expect(processor.$runAfter).toEqual(['paths-computed']);
-  });
-
-  it('should run before the correct processor', () => {
-    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
-    expect(processor.$runBefore).toEqual(['rendering-docs']);
-  });
-
-  it('should ignore internal and private exports', () => {
-    const processor = processorFactory(mockLogger, mockReadFilesProcessor);
-    const docs = [
-      { docType: 'class', name: 'PublicExport' },
-      { docType: 'class', name: 'PrivateExport', privateExport: true },
-      { docType: 'class', name: 'InternalExport', internal: true }
-    ];
-    processor.$process(docs);
-    expect(docs[docs.length - 1].data).toEqual([
-      jasmine.objectContaining({ title: 'PublicExport', type: 'class'})
-    ]);
-  });
-});
diff --git a/aio/transforms/angular.io-package/processors/matchUpDirectiveDecorators.js b/aio/transforms/angular.io-package/processors/matchUpDirectiveDecorators.js
deleted file mode 100644
index ae093a9653..0000000000
--- a/aio/transforms/angular.io-package/processors/matchUpDirectiveDecorators.js
+++ /dev/null
@@ -1,61 +0,0 @@
-var _ = require('lodash');
-
-/**
- * @dgProcessor
- * @description
- *
- */
-module.exports = function matchUpDirectiveDecoratorsProcessor() {
-
-  return {
-    $runAfter: ['ids-computed', 'paths-computed'],
-    $runBefore: ['rendering-docs'],
-    decoratorMappings: {'Inputs': 'inputs', 'Outputs': 'outputs'},
-    $process: function(docs) {
-      var decoratorMappings = this.decoratorMappings;
-      _.forEach(docs, function(doc) {
-        if (doc.docType === 'directive') {
-          doc.selector = doc.directiveOptions.selector;
-
-          for (let decoratorName in decoratorMappings) {
-            var propertyName = decoratorMappings[decoratorName];
-            doc[propertyName] =
-                getDecoratorValues(doc.directiveOptions[propertyName], decoratorName, doc.members);
-          }
-        }
-      });
-    }
-  };
-};
-
-function getDecoratorValues(classDecoratorValues, memberDecoratorName, members) {
-  var decoratorValues = {};
-
-  // Parse the class decorator
-  _.forEach(classDecoratorValues, function(option) {
-    // Options are of the form: "propName : bindingName" (bindingName is optional)
-    var optionPair = option.split(':');
-    var propertyName = optionPair.shift().trim();
-    var bindingName = (optionPair.shift() || '').trim() || propertyName;
-
-    decoratorValues[propertyName] = {propertyName: propertyName, bindingName: bindingName};
-  });
-
-  _.forEach(members, function(member) {
-    _.forEach(member.decorators, function(decorator) {
-      if (decorator.name === memberDecoratorName) {
-        decoratorValues[member.name] = {
-          propertyName: member.name,
-          bindingName: decorator.arguments[0] || member.name
-        };
-      }
-    });
-    if (decoratorValues[member.name]) {
-      decoratorValues[member.name].memberDoc = member;
-    }
-  });
-
-  if (Object.keys(decoratorValues).length) {
-    return decoratorValues;
-  }
-}
diff --git a/aio/transforms/angular.io-package/processors/mergeDecoratorDocs.js b/aio/transforms/angular.io-package/processors/mergeDecoratorDocs.js
deleted file mode 100644
index 7fde771509..0000000000
--- a/aio/transforms/angular.io-package/processors/mergeDecoratorDocs.js
+++ /dev/null
@@ -1,81 +0,0 @@
-module.exports = function mergeDecoratorDocs(log) {
-  return {
-    $runAfter: ['processing-docs'],
-    $runBefore: ['docs-processed'],
-    makeDecoratorCalls: [
-      {type: '', description: 'toplevel'},
-      {type: 'Prop', description: 'property'},
-      {type: 'Param', description: 'parameter'},
-    ],
-    $process: function(docs) {
-
-      var makeDecoratorCalls = this.makeDecoratorCalls;
-      var docsToMerge = Object.create(null);
-
-      docs.forEach(function(doc) {
-
-        makeDecoratorCalls.forEach(function(call) {
-          // find all the decorators, signified by a call to `makeDecorator(metadata)`
-          var makeDecorator = getMakeDecoratorCall(doc, call.type);
-          if (makeDecorator) {
-            log.debug('mergeDecoratorDocs: found decorator', doc.docType, doc.name);
-            doc.docType = 'decorator';
-            doc.decoratorLocation = call.description;
-            // get the type of the decorator metadata
-            doc.decoratorType = makeDecorator.arguments[0].text;
-            // clear the symbol type named (e.g. ComponentMetadataFactory) since it is not needed
-            doc.symbolTypeName = undefined;
-
-            // keep track of the names of the docs that need to be merged into this decorator doc
-            docsToMerge[doc.name + 'Decorator'] = doc;
-          }
-        });
-      });
-
-      // merge the metadata docs into the decorator docs
-      docs = docs.filter(function(doc) {
-        if (docsToMerge[doc.name]) {
-          var decoratorDoc = docsToMerge[doc.name];
-          log.debug(
-              'mergeDecoratorDocs: merging', doc.name, 'into', decoratorDoc.name,
-              doc.callMember.description.substring(0, 50));
-          decoratorDoc.description = doc.callMember.description;
-
-          // remove doc from its module doc's exports
-          doc.moduleDoc.exports =
-              doc.moduleDoc.exports.filter(function(exportDoc) { return exportDoc !== doc; });
-
-
-          // remove from the overall list of docs to be rendered
-          return false;
-        }
-        return true;
-      });
-    }
-  };
-};
-
-function getMakeDecoratorCall(doc, type) {
-  var makeDecoratorFnName = 'make' + (type || '') + 'Decorator';
-
-  var initializer = doc.exportSymbol && doc.exportSymbol.valueDeclaration &&
-      doc.exportSymbol.valueDeclaration.initializer;
-
-  if (initializer) {
-    // There appear to be two forms of initializer:
-    //    export var Injectable: InjectableFactory =
-    //    <InjectableFactory>makeDecorator(InjectableMetadata);
-    // and
-    //    export var RouteConfig: (configs: RouteDefinition[]) => ClassDecorator =
-    //    makeDecorator(RouteConfigAnnotation);
-    // In the first case, the type assertion `<InjectableFactory>` causes the AST to contain an
-    // extra level of expression
-    // to hold the new type of the expression.
-    if (initializer.expression && initializer.expression.expression) {
-      initializer = initializer.expression;
-    }
-    if (initializer.expression && initializer.expression.text === makeDecoratorFnName) {
-      return initializer;
-    }
-  }
-}
diff --git a/aio/transforms/angular.io-package/processors/mergeDecoratorDocs.spec.js b/aio/transforms/angular.io-package/processors/mergeDecoratorDocs.spec.js
deleted file mode 100644
index 67c456e7d5..0000000000
--- a/aio/transforms/angular.io-package/processors/mergeDecoratorDocs.spec.js
+++ /dev/null
@@ -1,57 +0,0 @@
-var testPackage = require('../../helpers/test-package');
-var Dgeni = require('dgeni');
-
-describe('mergeDecoratorDocs processor', function() {
-  var dgeni, injector, processor, decoratorDoc, decoratorDocWithTypeAssertion, otherDoc;
-
-  beforeEach(function() {
-    dgeni = new Dgeni([testPackage('angular.io-package')]);
-    injector = dgeni.configureInjector();
-    processor = injector.get('mergeDecoratorDocs');
-
-    decoratorDoc = {
-      name: 'X',
-      docType: 'var',
-      exportSymbol: {
-        valueDeclaration:
-            {initializer: {expression: {text: 'makeDecorator'}, arguments: [{text: 'X'}]}}
-      }
-    };
-
-    decoratorDocWithTypeAssertion = {
-      name: 'Y',
-      docType: 'var',
-      exportSymbol: {
-        valueDeclaration: {
-          initializer: {
-            expression:
-                {type: {}, expression: {text: 'makeDecorator'}, arguments: [{text: 'Y'}]}
-          }
-        }
-      }
-    };
-    otherDoc = {
-      name: 'Y',
-      docType: 'var',
-      exportSymbol: {
-        valueDeclaration:
-            {initializer: {expression: {text: 'otherCall'}, arguments: [{text: 'param1'}]}}
-      }
-    };
-  });
-
-
-  it('should change the docType of only the docs that are initialied by a call to makeDecorator',
-     function() {
-       processor.$process([decoratorDoc, decoratorDocWithTypeAssertion, otherDoc]);
-       expect(decoratorDoc.docType).toEqual('decorator');
-       expect(decoratorDocWithTypeAssertion.docType).toEqual('decorator');
-       expect(otherDoc.docType).toEqual('var');
-     });
-
-  it('should extract the "type" of the decorator meta data', function() {
-    processor.$process([decoratorDoc, decoratorDocWithTypeAssertion, otherDoc]);
-    expect(decoratorDoc.decoratorType).toEqual('X');
-    expect(decoratorDocWithTypeAssertion.decoratorType).toEqual('Y');
-  });
-});
\ No newline at end of file
diff --git a/aio/transforms/angular.io-package/services/copyFolder.js b/aio/transforms/angular.io-package/services/copyFolder.js
deleted file mode 100644
index f6d848b427..0000000000
--- a/aio/transforms/angular.io-package/services/copyFolder.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const {cp} = require('shelljs');
-
-module.exports = function copyFolder() {
-  return (from, to) => cp('-rf', from, to);
-};
diff --git a/aio/transforms/content-package/index.js b/aio/transforms/content-package/index.js
deleted file mode 100644
index cbe639697f..0000000000
--- a/aio/transforms/content-package/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-var Package = require('dgeni').Package;
-var jsdocPackage = require('dgeni-packages/jsdoc');
-var linksPackage = require('../links-package');
-var path = require('canonical-path');
-var fs = require('fs');
-
-// Define the dgeni package for generating the docs
-module.exports = new Package('content', [jsdocPackage, linksPackage])
-
-                     // Register the services and file readers
-                     .factory(require('./readers/content'))
-
-                     // Configure file reading
-                     .config(function(readFilesProcessor, contentFileReader) {
-                       readFilesProcessor.fileReaders.push(contentFileReader);
-                     })
-
-                     .config(function(parseTagsProcessor, getInjectables) {
-                       parseTagsProcessor.tagDefinitions = parseTagsProcessor.tagDefinitions.concat(
-                           getInjectables(requireFolder('./tag-defs')));
-                     })
-
-                     // Configure ids and paths
-                     .config(function(computeIdsProcessor) {
-
-                       computeIdsProcessor.idTemplates.push({
-                         docTypes: ['content'],
-                         getId: function(doc) {
-                           return doc.fileInfo
-                               .relativePath
-                               // path should be relative to `modules` folder
-                               .replace(/.*\/?modules\//, '')
-                               // path should not include `/docs/`
-                               .replace(/\/docs\//, '/')
-                               // path should not have a suffix
-                               .replace(/\.\w*$/, '');
-                         },
-                         getAliases: function(doc) { return [doc.id]; }
-                       });
-                     });
-
-function requireFolder(folderPath) {
-  const absolutePath = path.resolve(__dirname, folderPath);
-  return fs.readdirSync(absolutePath)
-      .filter(p => !/[._]spec\.js$/.test(p))  // ignore spec files
-      .map(p => require(path.resolve(absolutePath, p)));
-}
diff --git a/aio/transforms/examples-package/inline-tag-defs/exampleTabs.js b/aio/transforms/examples-package/inline-tag-defs/exampleTabs.js
deleted file mode 100644
index 1456551815..0000000000
--- a/aio/transforms/examples-package/inline-tag-defs/exampleTabs.js
+++ /dev/null
@@ -1,61 +0,0 @@
-var path = require('canonical-path');
-var fs = require('fs');
-
-/**
- * @dgService exampleTabsInlineTagDef
- * @description
- * Process inline example tags (of the form {@example relativePath region -title='some title'
- * -stylePattern='{some style pattern}' }),
- * replacing them with a jade makeExample mixin call.
- * Examples:
- * {@exampleTabs core/application_spec.ts,core/application_spec.ts "hello-app,hello-app2"
- * -titles="Hello app1, Hello app2" }
- * {@exampleTabs core/application_spec.ts,core/application_spec.ts regions="hello-app,hello-app2"
- * -titles="Hello app1, Hello app2" }
- * @kind function
- */
-module.exports = function exampleTabsInlineTagDef(getLinkInfo, parseArgString) {
-  return {
-    name: 'exampleTabs',
-    description:
-        'Process inline example tags (of the form {@example some/uri Some Title}), replacing them with HTML anchors',
-    handler: function(doc, tagName, tagDescription) {
-
-      var tagArgs = parseArgString(tagDescription);
-      var unnamedArgs = tagArgs._;
-      var relativePaths = unnamedArgs[0].split(',');
-      var regions = tagArgs.regions || (unnamedArgs.length > 1 ? unnamedArgs[1] : null);
-      var titles = tagArgs.titles || (unnamedArgs.length > 2 ? unnamedArgs[2] : null);
-      if (regions) {
-        regions = regions.split(',');
-      }
-
-      // TODO: not yet implemented here
-      // var stylePatterns = tagArgs.stylePattern;
-
-      var mixinPaths = relativePaths.map(function(relativePath, ix) {
-        // eslint-disable-next-line no-undef
-        var fragFileName = getApiFragmentFileName(relativePath, regions && regions[ix]);
-        if (!fs.existsSync(fragFileName)) {
-          // TODO: log.warn(createDocMessage('Invalid example (unable to locate fragment file: ' +
-          // quote(fragFileName) + ")", doc));
-        }
-        return path.join('_api', relativePath);
-      });
-
-      var comma = ', ';
-      var pathsArg = quote(mixinPaths.join(','));
-      var regionsArg = regions ? quote(regions.join(',')) : 'null';
-      var titlesArg = titles ? quote(titles) : 'null';
-      var res = ['+makeTabs(', pathsArg, comma, regionsArg, comma, titlesArg, ')'].join('');
-      return res;
-    }
-
-  };
-};
-
-function quote(str) {
-  if (str == null || str.length === 0) return str;
-  str = str.replace('\'', '\'\'');
-  return '\'' + str + '\'';
-}
diff --git a/aio/transforms/templates/cheatsheet.template.json b/aio/transforms/templates/cheatsheet.template.json
deleted file mode 100644
index 72077d8ee3..0000000000
--- a/aio/transforms/templates/cheatsheet.template.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "currentEnvironment": {$ doc.currentEnvironment | json | trim $},
-  "version": {$ doc.version.currentVersion | json | indent(2) | trim $},
-  "sections": {$ doc.sections | json | indent(2) | trim $}
-}
\ No newline at end of file
diff --git a/aio/transforms/templates/class.template.html b/aio/transforms/templates/class.template.html
deleted file mode 100644
index 307823df42..0000000000
--- a/aio/transforms/templates/class.template.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% import "lib/paramList.html" as params -%}
-{% extends 'layout/api-base.template.html' -%}
-
-{% block details %}
-  {% include "includes/_class-overview.html" %}
-  {% block additional %}{% endblock %}
-  {% include "includes/_description.html" %}
-  {% include "includes/_annotations.html" %}
-  {% include "includes/_constructor.html" %}
-  {% include "includes/_statics.html" %}
-  {% include "includes/_members.html" %}
-{% endblock %}
diff --git a/aio/transforms/templates/content.template.html b/aio/transforms/templates/content.template.html
deleted file mode 100644
index 6d7ecdbd6e..0000000000
--- a/aio/transforms/templates/content.template.html
+++ /dev/null
@@ -1,2 +0,0 @@
-{% if doc.title %}<h1>{$ doc.title $}</h1>{% endif %}
-{$ doc.description | marked $}
\ No newline at end of file
diff --git a/aio/transforms/templates/decorator.template.html b/aio/transforms/templates/decorator.template.html
deleted file mode 100644
index 5c012ced97..0000000000
--- a/aio/transforms/templates/decorator.template.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% import "lib/paramList.html" as params -%}
-{% extends 'layout/api-base.template.html' %}
-
-{% block main %}
-  {% include "includes/_description.html" %}
-  {% include "includes/_metadata.html" %}
-{% endblock %}
diff --git a/aio/transforms/templates/directive.template.html b/aio/transforms/templates/directive.template.html
deleted file mode 100644
index 9eda197279..0000000000
--- a/aio/transforms/templates/directive.template.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% import "lib/paramList.html" as params -%}
-{% extends 'class.template.html' -%}
-
-{% block additional -%}
-  {% include "includes/_selectors.html" %}
-  {% include "includes/_outputs.html" %}
-  {% include "includes/_inputs.html" %}
-  {% include "includes/_export-as.html" %}
-{% endblock %}
diff --git a/aio/transforms/templates/function.template.html b/aio/transforms/templates/function.template.html
deleted file mode 100644
index ab3663e1b7..0000000000
--- a/aio/transforms/templates/function.template.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{% import "lib/paramList.html" as params -%}
-{% extends 'layout/api-base.template.html' -%}
-
-{% block main %}
-  {% include "includes/_description.html" %}
-{% endblock %}
\ No newline at end of file
diff --git a/aio/transforms/templates/includes/_annotations.html b/aio/transforms/templates/includes/_annotations.html
deleted file mode 100644
index 769fbf71c7..0000000000
--- a/aio/transforms/templates/includes/_annotations.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{%- if doc.decorators.length %}
-<section class="annotations">
-  <h2>Annotations</h2>
-  <div class="annotation">
-    {%- for decorator in doc.decorators %}
-      <pre class="prettyprint no-bg">
-        <code>@{$ decorator.name $}{$ params.paramList(decorator.arguments) | indent(10, false) $}</code>
-      </pre>
-      {%- if not decorator.notYetDocumented %}{$ decorator.description | marked $}{% endif %}
-    {% endfor %}
-  </div>
-</section>
-{% endif %}
diff --git a/aio/transforms/templates/includes/_class-overview.html b/aio/transforms/templates/includes/_class-overview.html
deleted file mode 100644
index 3aa26f7c23..0000000000
--- a/aio/transforms/templates/includes/_class-overview.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<section class="class-overview">
-  <h2>Class Overview</h2>
-  <div class="api-doc-code">
-
-    <code class="no-bg openParens">class {$ doc.name $} {</code>
-
-    {% if doc.statics.length %}
-    <div class="statics">
-      {% for member in doc.statics %}{% if not member.internal %}
-        <pre class="prettyprint no-bg-with-indent"><code>static
-          <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
-          {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
-        </code></pre>
-      {% endif %}{% endfor %}
-    </div>
-    {% endif %}
-
-
-    {% if doc.constructorDoc.name %}
-    <div class="constructor">
-      <pre class="prettyprint no-bg-with-indent"><code>
-        <a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a>
-          {$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
-      </code></pre>
-    </div>
-    {% endif %}
-
-    {% if doc.members.length %}
-    <div class="members">
-      {% for member in doc.members %}{% if not member.internal %}
-        <pre class="prettyprint no-bg-with-indent"><code>
-          <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
-          {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
-        </code></pre>
-      {% endif %}{% endfor %}
-    {% endif %}
-
-    <code class="endParens api-doc-code no-bg">}</code>
-  </div>
-</section>
\ No newline at end of file
diff --git a/aio/transforms/templates/includes/_constructor.html b/aio/transforms/templates/includes/_constructor.html
deleted file mode 100644
index b0b57209dd..0000000000
--- a/aio/transforms/templates/includes/_constructor.html
+++ /dev/null
@@ -1,16 +0,0 @@
-{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
-<section class="constructor">
-  <h2>Constructor</h2>
-  <div class="description">
-    <a name="constructor" class="anchor-offset"></a>
-    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }">
-      <code>
-        {$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
-      </code>
-    </pre>
-    {%- if not doc.constructorDoc.notYetDocumented %}
-    {$ doc.constructorDoc.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
-    {% endif %}
-  </div>
-</section>
-{% endif %}
diff --git a/aio/transforms/templates/includes/_deprecated-notes.html b/aio/transforms/templates/includes/_deprecated-notes.html
deleted file mode 100644
index eb196f37c4..0000000000
--- a/aio/transforms/templates/includes/_deprecated-notes.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% if doc.showDeprecatedNotes %}
-<div layout="row" layout-xs="column" class="row-margin ng-cloak">
-  <div flex="20" flex-xs="100">
-    <h2 class="h2-api-docs">Deprecation Notes</h2>
-  </div>
-  <div flex="80" flex-xs="100">
-    {%- if doc.deprecated %}{$ doc.deprecated | marked $}
-    {% else %}<em>Not yet documented</em>{% endif %}
-  </div>
-</div>
-{% endif %}
\ No newline at end of file
diff --git a/aio/transforms/templates/includes/_description.html b/aio/transforms/templates/includes/_description.html
deleted file mode 100644
index 627b93df2c..0000000000
--- a/aio/transforms/templates/includes/_description.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<section class="l-content-block">
-  <h3 class="text-display-1" id="api-description">
-    Description
-    <a href="#api-description" class="header-link"><i class="material-icons">link</i></a>
-  </h3>
-  {%- if doc.description.length > 2 %}
-  {$ doc.description | trimBlankLines | marked $}
-  {% endif %}
-</section>
diff --git a/aio/transforms/templates/includes/_export-as.html b/aio/transforms/templates/includes/_export-as.html
deleted file mode 100644
index de0796f098..0000000000
--- a/aio/transforms/templates/includes/_export-as.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{%- if doc.directiveOptions.exportAs %}
-<section class="export-as">
-  <h2>Exported as</h2>
-  <div class="description">
-    <p>
-      <code>{$ doc.directiveOptions.exportAs $}</code>
-    </p>
-  </div>
-</section>
-{% endif %}
diff --git a/aio/transforms/templates/includes/_how-to-use.html b/aio/transforms/templates/includes/_how-to-use.html
deleted file mode 100644
index b244ce60e1..0000000000
--- a/aio/transforms/templates/includes/_how-to-use.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{%- if doc.howToUse %}
-  <!-- QUICK REFERENCE CODE EXAMPLE -->
-  <section class="how-to-use">
-    <h2>How To Use</h2>
-    <div class="description">
-      {$ doc.howToUse | marked $}
-    </div>
-  </section>
-{% endif %}
diff --git a/aio/transforms/templates/includes/_info-bar.html b/aio/transforms/templates/includes/_info-bar.html
deleted file mode 100644
index 522773a183..0000000000
--- a/aio/transforms/templates/includes/_info-bar.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{% import "lib/githubLinks.html" as github -%}
-
-<!-- INFO BAR -->
-<div class="info-bar">
-  <span class="info-bar-item is-left">
-    npm package: <a href="#">{$ doc.package $}</a>
-  </span>
-
-  <span class="info-bar-item is-left">
-    NgModule: <a href="#">{$ doc.moduleDoc.name $}</a>
-  </span>
-
-  <span class="info-bar-item is-right">
-    {$ github.githubViewLink(doc, versionInfo) $}
-  </span>
-
-  <i class="material-icons l-right">create</i>
-</div>
\ No newline at end of file
diff --git a/aio/transforms/templates/includes/_inputs.html b/aio/transforms/templates/includes/_inputs.html
deleted file mode 100644
index d923f34f92..0000000000
--- a/aio/transforms/templates/includes/_inputs.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% if doc.inputs %}
-<section class="inputs">
-  <h2>Inputs</h2>
-  <div class="description">
-    {% for binding, property in doc.inputs %}
-    <div class="input">
-      <code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
-      {$ property.memberDoc.description | trimBlankLines | marked $}
-    </div>
-    {% endfor %}
-  </div>
-</section>
-{% endif %}
diff --git a/aio/transforms/templates/includes/_interface-overview.html b/aio/transforms/templates/includes/_interface-overview.html
deleted file mode 100644
index 2c91bbda36..0000000000
--- a/aio/transforms/templates/includes/_interface-overview.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<section class="class-overview">
-  <h2>Interface Overview</h2>
-  <div class="api-doc-code">
-
-    <code class="no-bg openParens">interface {$ doc.name $} {</code>
-
-    {% if doc.members.length %}
-    <div class="members">
-      {% for member in doc.members %}{% if not member.internal %}
-        <pre class="prettyprint no-bg-with-indent"><code>
-          <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
-          {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
-        </code></pre>
-      {% endif %}{% endfor %}
-    {% endif %}
-
-    <code class="endParens api-doc-code no-bg">}</code>
-  </div>
-</section>
\ No newline at end of file
diff --git a/aio/transforms/templates/includes/_members.html b/aio/transforms/templates/includes/_members.html
deleted file mode 100644
index 1c0bb8b988..0000000000
--- a/aio/transforms/templates/includes/_members.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% if doc.members.length %}
-<section class="instance-members">
-  <h2>Class Details</h2>
-  <div class="description">
-    {% for member in doc.members %}{% if not member.internal %}
-    <div class="instance-member">
-      <a name="{$ member.name $}-anchor" class="anchor-offset"></a>
-      <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
-      <code>{$ member.name $}{$ params.paramList(member.parameters) | trim $}{$ params.returnType(member.returnType) $}</code>
-      </pre>
-      {%- if not member.notYetDocumented %}
-      {$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
-      {% endif -%}
-    </div>
-    {% if not loop.last %}<hr class="hr-margin">{% endif %}
-  {% endif %}{% endfor %}
-  </div>
-</section>
-{% endif %}
diff --git a/aio/transforms/templates/includes/_metadata.html b/aio/transforms/templates/includes/_metadata.html
deleted file mode 100644
index 5bca45a8e7..0000000000
--- a/aio/transforms/templates/includes/_metadata.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% if doc.members.length %}
-<section class="meta-data">
-  <h2>Metadata Properties</h2>
-  <div class="description">
-    {% for metadata in doc.members %}{% if not metadata.internal %}
-    <div class="metadata-member">
-      <a name="{$ metadata.name $}-anchor" class="anchor-offset"></a>
-      <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ metadata.name $}') }">
-        <code>{$ metadata.name $}{$ params.paramList(metadata.parameters) | trim $}{$ params.returnType(metadata.returnType) $}</code>
-      </pre>
-      {%- if not metadata.notYetDocumented %}{$ metadata.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}{% endif -%}
-    </div>
-    {% if not loop.last %}<hr class="hr-margin">{% endif %}
-  {% endif %}{% endfor %}
-  </div>
-</section>
-{% endif %}
diff --git a/aio/transforms/templates/includes/_ng-module.html b/aio/transforms/templates/includes/_ng-module.html
deleted file mode 100644
index 151c9d5a86..0000000000
--- a/aio/transforms/templates/includes/_ng-module.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div layout="row" layout-xs="column" class="row-margin ng-cloak">
-  <div flex="20" flex-xs="100">
-    <h2 class="h2-api-docs">NgModule</h2>
-  </div>
-  <div class="code-links" flex="80" flex-xs="100">
-    {$ doc.ngModule $}
-  </div>
-</div>
\ No newline at end of file
diff --git a/aio/transforms/templates/includes/_outputs.html b/aio/transforms/templates/includes/_outputs.html
deleted file mode 100644
index a1b313a9d4..0000000000
--- a/aio/transforms/templates/includes/_outputs.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% if doc.outputs %}
-<section class="outputs">
-  <h2>Outputs</h2>
-  <div class="description">
-  {% for binding, property in doc.outputs %}
-    <div class="output">
-      <code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
-      {$ property.memberDoc.description | trimBlankLines | marked $}
-    </div>
-  {% endfor %}
-  </div>
-</section>
-{% endif %}
diff --git a/aio/transforms/templates/includes/_security-notes.html b/aio/transforms/templates/includes/_security-notes.html
deleted file mode 100644
index f66ce66cc4..0000000000
--- a/aio/transforms/templates/includes/_security-notes.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% if doc.showSecurityNotes and doc.security %}
-<div layout="row" layout-xs="column" class="row-margin ng-cloak">
-  <div flex="20" flex-xs="100">
-    <h2 class="h2-api-docs">Security Risk</h2>
-  </div>
-  <div flex="80" flex-xs="100">
-    {$ doc.security | marked $}
-  </div>
-</div>
-{% endif %}
\ No newline at end of file
diff --git a/aio/transforms/templates/includes/_selectors.html b/aio/transforms/templates/includes/_selectors.html
deleted file mode 100644
index fbdab157a6..0000000000
--- a/aio/transforms/templates/includes/_selectors.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{%- if doc.directiveOptions.selector.split(',').length %}
-<section class="selectors">
-  <h2>Selectors</h2>
-  <div class="description">
-    {% for selector in doc.directiveOptions.selector.split(',') %}
-    <p class="selector">
-      <code>{$ selector $}</code>
-    </p>
-    {% endfor %}
-  </div>
-</section>
-{% endif %}
diff --git a/aio/transforms/templates/includes/_statics.html b/aio/transforms/templates/includes/_statics.html
deleted file mode 100644
index d8ded2cec7..0000000000
--- a/aio/transforms/templates/includes/_statics.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{% if doc.statics.length %}
-<section class="static-members">
-  <h2>Static Members</h2>
-  <div class="description">
-  {% for member in doc.statics %}{% if not member.internal %}
-    <div class="static-member">
-      <a name="{$ member.name $}-anchor" class="anchor-offset"></a>
-      <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
-        <code>{$ member.name $}{$ params.paramList(member.parameters) | trim $}{$ params.returnType(member.returnType) $}</code>
-      </pre>
-      {%- if not member.notYetDocumented %}
-      {$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
-      {% endif %}
-    </div>
-
-    {% if not loop.last %}
-    <hr class="hr-margin">
-    {% endif %}
-
-  {% endif %}{% endfor %}
-  </div>
-</section>
-{% endif %}
diff --git a/aio/transforms/templates/includes/_title.html b/aio/transforms/templates/includes/_title.html
deleted file mode 100644
index 0057c04114..0000000000
--- a/aio/transforms/templates/includes/_title.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- PAGE HERO -->
-<header>
-  <h1>{$ doc.name $}</h1>
-  <h2>{$ doc.docType $}</h2>
-  <span class="version">{$ angular.version $}</span>
-</header>
diff --git a/aio/transforms/templates/includes/_what-it-does.html b/aio/transforms/templates/includes/_what-it-does.html
deleted file mode 100644
index 9ed426f6fe..0000000000
--- a/aio/transforms/templates/includes/_what-it-does.html
+++ /dev/null
@@ -1,3 +0,0 @@
-{%- if doc.whatItDoes %}
-<div class="what-it-does">{$ doc.whatItDoes | marked $}</div>
-{% endif %}
\ No newline at end of file
diff --git a/aio/transforms/templates/interface.template.html b/aio/transforms/templates/interface.template.html
deleted file mode 100644
index b176df5955..0000000000
--- a/aio/transforms/templates/interface.template.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% import "lib/paramList.html" as params -%}
-{% extends 'layout/api-base.template.html' -%}
-
-{% block main %}
-  {% include "includes/_interface-overview.html" %}
-  {% include "includes/_description.html" %}
-  {% include "includes/_members.html" %}
-{% endblock %}
diff --git a/aio/transforms/templates/layout/api-base.template.html b/aio/transforms/templates/layout/api-base.template.html
deleted file mode 100644
index db5146a987..0000000000
--- a/aio/transforms/templates/layout/api-base.template.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends 'layout/base.template.html' -%}
-
-{% block body %}
-  <aio-jump-nav></aio-jump-nav>
-  {% include "includes/_what-it-does.html" %}
-  {% include "includes/_info-bar.html" %}
-  {% include "includes/_security-notes.html" %}
-  {% include "includes/_deprecated-notes.html" %}
-  {% include "includes/_how-to-use.html" %}
-  {% block details %}{% endblock %}
-{% endblock %}
diff --git a/aio/transforms/templates/layout/base.template.html b/aio/transforms/templates/layout/base.template.html
deleted file mode 100644
index 6ceff4e61c..0000000000
--- a/aio/transforms/templates/layout/base.template.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<article>
-  {% include "includes/_title.html" %}
-  {% block body %}{% endblock %}
-</article>
\ No newline at end of file
diff --git a/aio/transforms/templates/lib/paramList.html b/aio/transforms/templates/lib/paramList.html
deleted file mode 100644
index 24ba12c080..0000000000
--- a/aio/transforms/templates/lib/paramList.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% macro paramList(params) -%}
-  {%- if params -%}
-    ({%- for param in params -%}
-      {$ param | escape $}{% if not loop.last %}, {% endif %}
-    {%- endfor %})
-  {%- endif %}
-{%- endmacro -%}
-
-
-{% macro returnType(returnType) -%}
-  {%- if returnType %} : {$ returnType | escape $}{% endif -%}
-{%- endmacro -%}
diff --git a/aio/transforms/templates/module.template.html b/aio/transforms/templates/module.template.html
deleted file mode 100644
index df154e3b71..0000000000
--- a/aio/transforms/templates/module.template.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% extends 'layout/base.template.html' -%}
-
-{% block body -%}
-<ul>
-  {% for page in doc.childPages -%}
-  <li>
-    <!-- TODO: convert to hovercard -->
-    <a href="{$ relativePath(doc.moduleFolder, page.exportDoc.path) $}">{$ page.title $}</a>
-  </li>
-  {% endfor %}
-</ul>
-{% endblock %}
diff --git a/aio/transforms/templates/pipe.template.html b/aio/transforms/templates/pipe.template.html
deleted file mode 100644
index bd6d7e0e0c..0000000000
--- a/aio/transforms/templates/pipe.template.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% extends 'layout/api-base.template.html' -%}
-
-{% block details %}
-  {% include "includes/_description.html" %}
-{% endblock %}
diff --git a/aio/transforms/templates/type-alias.template.html b/aio/transforms/templates/type-alias.template.html
deleted file mode 100644
index 8f4b225223..0000000000
--- a/aio/transforms/templates/type-alias.template.html
+++ /dev/null
@@ -1 +0,0 @@
-{% extends 'interface.template.html' %}
diff --git a/aio/transforms/templates/var.template.html b/aio/transforms/templates/var.template.html
deleted file mode 100644
index 56149893e8..0000000000
--- a/aio/transforms/templates/var.template.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% extends 'layout/api-base.template.html' %}
-
-{% block details %}
-  {% include "includes/_description.html" %}
-{% endblock %}
diff --git a/aio/tsconfig.json b/aio/tsconfig.json
index a35a8ee3a4..0589978077 100644
--- a/aio/tsconfig.json
+++ b/aio/tsconfig.json
@@ -16,5 +16,12 @@
       "es2016",
       "dom"
     ]
-  }
+  },
+  "exclude": [
+    "content",
+    "tools",
+    "aio-builds-setup",
+    "node_modules",
+    "scripts"
+  ]
 }
diff --git a/aio/yarn.lock b/aio/yarn.lock
index 647b86a591..c7be4d5000 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -2,20 +2,28 @@
 # yarn lockfile v1
 
 
-"@angular/animations@next":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.0.0.tgz#f6efb67ca3f3816d2dbf19b8f570371f2d205edc"
-
-"@angular/cli@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.0.0.tgz#7bfde1e7c5f28bf5bed4dda1352ee67ee887302f"
+"@angular/animations@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.3.1.tgz#1f7e0bb803efc21c608246e6765a1c647f3d1a5f"
   dependencies:
-    "@ngtools/json-schema" "1.0.5"
-    "@ngtools/webpack" "1.3.0"
+    tslib "^1.7.1"
+
+"@angular/cdk@^2.0.0-beta.8":
+  version "2.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.8.tgz#71961c851dfbeb19e085e898bf5e4461408f8b57"
+  dependencies:
+    tslib "^1.7.1"
+
+"@angular/cli@angular/cli-builds#webpack-next":
+  version "1.2.0-beta.0-7c33dd4"
+  resolved "https://codeload.github.com/angular/cli-builds/tar.gz/b4bb5968c04c92fd816c434044e28bbfc60b296c"
+  dependencies:
+    "@ngtools/json-schema" "1.1.0"
+    "@ngtools/webpack" "https://github.com/angular/ngtools-webpack-builds.git#7c33dd4"
     autoprefixer "^6.5.3"
     chalk "^1.1.3"
     common-tags "^1.3.1"
-    css-loader "^0.26.1"
+    css-loader "^0.28.1"
     cssnano "^3.10.0"
     debug "^2.1.3"
     denodeify "^1.2.1"
@@ -23,7 +31,7 @@
     ember-cli-normalize-entity-name "^1.0.0"
     ember-cli-string-utils "^1.0.0"
     exports-loader "^0.6.3"
-    extract-text-webpack-plugin "~2.0.0"
+    extract-text-webpack-plugin "^2.1.0"
     file-loader "^0.10.0"
     fs-extra "^2.0.0"
     get-caller-file "^1.0.0"
@@ -34,142 +42,172 @@
     isbinaryfile "^3.0.0"
     istanbul-instrumenter-loader "^2.0.0"
     json-loader "^0.5.4"
-    karma-sourcemap-loader "^0.3.7"
-    karma-webpack "^2.0.0"
     less "^2.7.2"
-    less-loader "^2.2.3"
+    less-loader "^4.0.2"
+    license-webpack-plugin "^0.4.2"
     lodash "^4.11.1"
+    memory-fs "^0.4.1"
     minimatch "^3.0.3"
     node-modules-path "^1.0.0"
     nopt "^4.0.1"
     opn "4.0.2"
     portfinder "~1.0.12"
-    postcss-loader "^0.13.0"
+    postcss-loader "^1.3.3"
     postcss-url "^5.1.2"
     raw-loader "^0.5.1"
     resolve "^1.1.7"
     rimraf "^2.5.3"
     rsvp "^3.0.17"
     rxjs "^5.0.1"
-    sass-loader "^4.1.1"
+    sass-loader "^6.0.3"
     script-loader "^0.7.0"
     semver "^5.1.0"
     silent-error "^1.0.0"
-    source-map-loader "^0.1.5"
+    source-map-loader "^0.2.0"
     style-loader "^0.13.1"
     stylus "^0.54.5"
-    stylus-loader "^2.4.0"
+    stylus-loader "^3.0.1"
     temp "0.8.3"
-    typescript ">=2.0.0 <2.3.0"
+    typescript ">=2.0.0 <2.4.0"
     url-loader "^0.5.7"
     walk-sync "^0.3.1"
-    webpack "~2.2.0"
-    webpack-dev-server "~2.3.0"
+    webpack "3.0.0-rc.1"
+    webpack-dev-middleware "^1.10.2"
+    webpack-dev-server "~2.4.5"
     webpack-merge "^2.4.0"
-    zone.js "^0.7.2"
+    zone.js "^0.8.4"
   optionalDependencies:
     node-sass "^4.3.0"
 
-"@angular/common@next":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.0.0.tgz#ca18983222fdab4ecaa7a8b99eda6ff661e6dc92"
-
-"@angular/compiler-cli@next":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.0.0.tgz#35b2d40cd35135aecec4be659532148f5ac67da6"
+"@angular/common@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.3.1.tgz#260f487a7cdca326c436bd3ea9515c797de2ff72"
   dependencies:
-    "@angular/tsc-wrapped" "4.0.0"
+    tslib "^1.7.1"
+
+"@angular/compiler-cli@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.3.1.tgz#00b41afb6faeb4aef561b8427804ac8880aff63c"
+  dependencies:
+    "@angular/tsc-wrapped" "4.3.1"
     minimist "^1.2.0"
     reflect-metadata "^0.1.2"
 
-"@angular/compiler@next":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.0.0.tgz#e1aa061a6f8ef269f9748af1a7bc290f9d37ed6c"
+"@angular/compiler@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.3.1.tgz#3a24d49ecf01ac2b6e07f63e378b8ff8e257fe09"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/core@next":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.0.0.tgz#fd877e074b29dfa9c63b96a21995fc7556d423a3"
+"@angular/core@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.3.1.tgz#a9d0a7d644b96260674269b689a04feea632a8d3"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/forms@next":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.0.0.tgz#03163047a2e84af42106270da2e1f47ab0fafc37"
+"@angular/forms@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.3.1.tgz#33914da2cb146430ff901471e682c76654622dfe"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/http@next":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/http/-/http-4.0.0.tgz#45a538eac42a0b13f3744c7e8bafeb17d58da31c"
+"@angular/http@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/http/-/http-4.3.1.tgz#e4f661f746711e88ecbea76a3c905babf97d315a"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/material@^2.0.0-beta.3":
-  version "2.0.0-beta.3"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.3.tgz#ec31dee61d7300ece28fee476852db236ded1e13"
+"@angular/material@^2.0.0-beta.8":
+  version "2.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.8.tgz#a92852abc9261aea26c2401f576645470be2cf38"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/platform-browser-dynamic@next":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.0.0.tgz#d1d9de80fe1e02735be89f512e0faf5a80d57fa5"
+"@angular/platform-browser-dynamic@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.1.tgz#84034da60a82ef36e7effda7b3ade6e645b330b3"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/platform-browser@next":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.0.0.tgz#512ae9ab19ccc25fa79027f44e291bcee236cd2b"
+"@angular/platform-browser@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.3.1.tgz#db727b06eed64bda5defec71815db26a4da2f690"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/platform-server@next":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-4.0.0.tgz#d76d61787cd3be3ce8ed46043d6a8c82572f567d"
+"@angular/platform-server@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-4.3.1.tgz#3b915fc4013c6a947a8c147b4db0279b025936eb"
   dependencies:
     parse5 "^3.0.1"
+    tslib "^1.7.1"
     xhr2 "^0.1.4"
 
-"@angular/router@next":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.0.0.tgz#f4a2dc83b44e023db1d6f2c12ca5a37a22c66afc"
+"@angular/router@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.3.1.tgz#5219d44526156d816065841127610165a015b450"
+  dependencies:
+    tslib "^1.7.1"
 
-"@angular/service-worker@^1.0.0-beta.8":
-  version "1.0.0-beta.8"
-  resolved "https://registry.yarnpkg.com/@angular/service-worker/-/service-worker-1.0.0-beta.8.tgz#dccaea1a530d09f9bc54108379a946b3a62f9da8"
+"@angular/service-worker@^1.0.0-beta.16":
+  version "1.0.0-beta.16"
+  resolved "https://registry.yarnpkg.com/@angular/service-worker/-/service-worker-1.0.0-beta.16.tgz#cb4fcd1d5b311195136fd284bcf2dbb870544d64"
   dependencies:
     base64-js "^1.1.2"
     jshashes "^1.0.5"
 
-"@angular/tsc-wrapped@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-4.0.0.tgz#ea91eeda98029cdb0a4ac37d5e25d9d12a4333c1"
+"@angular/tsc-wrapped@4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-4.3.1.tgz#f6616a4d2a3bbec1cded664fd1f526edce99ef41"
   dependencies:
     tsickle "^0.21.0"
 
-"@ngtools/json-schema@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.0.5.tgz#ad39037c70c88b245ac7267a71777646b6063d77"
+"@ngtools/json-schema@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.1.0.tgz#c3a0c544d62392acc2813a42c8a0dc6f58f86922"
 
-"@ngtools/webpack@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.3.0.tgz#a1071230985358ecdf87b2fa9879ae6cc6355e83"
+"@ngtools/webpack@https://github.com/angular/ngtools-webpack-builds.git#7c33dd4":
+  version "1.4.0-7c33dd4"
+  resolved "https://github.com/angular/ngtools-webpack-builds.git#7c33dd4"
   dependencies:
     enhanced-resolve "^3.1.0"
     loader-utils "^1.0.2"
     magic-string "^0.19.0"
     source-map "^0.5.6"
 
-"@types/jasmine@2.5.38":
-  version "2.5.38"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.38.tgz#a4379124c4921d4e21de54ec74669c9e9b356717"
+"@types/jasmine@^2.5.52":
+  version "2.5.52"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.52.tgz#6ea5435d5c71562296e63ef27a4718f94f2fbb13"
 
-"@types/node@^6.0.46", "@types/node@~6.0.60":
-  version "6.0.63"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.63.tgz#e08acbbd5946e0e95990b1c76f3ce5b7882a48eb"
+"@types/node@*", "@types/node@^6.0.46", "@types/node@~6.0.60":
+  version "6.0.73"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.73.tgz#85dc4bb6f125377c75ddd2519a1eeb63f0a4ed70"
 
 "@types/q@^0.0.32":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-0.0.32.tgz#bd284e57c84f1325da702babfc82a5328190c0c5"
 
 "@types/selenium-webdriver@^2.53.35", "@types/selenium-webdriver@~2.53.39":
-  version "2.53.39"
-  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.39.tgz#15ff93392c339abd39d6d3a04e715faa9a263cf3"
+  version "2.53.42"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.42.tgz#74cb77fb6052edaff2a8984ddafd88d419f25cac"
+
+"@types/sha1@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@types/sha1/-/sha1-1.1.0.tgz#461eb18906d25e8d07c4678a0ed4f9ca07e46dd9"
+  dependencies:
+    "@types/node" "*"
 
 JSONStream@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.0.tgz#680ab9ac6572a8a1a207e0b38721db1c77b215e5"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.1.tgz#707f761e01dae9e16f1bcf93703b78c70966579a"
   dependencies:
     jsonparse "^1.2.0"
     through ">=2.2.7 <3"
 
+a-sync-waterfall@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/a-sync-waterfall/-/a-sync-waterfall-1.0.0.tgz#38e8319d79379e24628845b53b96722b29e0e47c"
+
 abab@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@@ -186,8 +224,8 @@ accepts@1.3.3, accepts@~1.3.3:
     negotiator "0.6.1"
 
 acorn-dynamic-import@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-2.0.1.tgz#23f671eb6e650dab277fef477c321b1178a8cca2"
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz#c752bd210bef679501b6c6cb7fc84f8f47158cc4"
   dependencies:
     acorn "^4.0.3"
 
@@ -211,7 +249,7 @@ acorn@^4.0.3, acorn@^4.0.4:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.11.tgz#edcda3bd937e7556410d42ed5860f67399c794c0"
 
-acorn@^5.0.1:
+acorn@^5.0.0, acorn@^5.0.1:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d"
 
@@ -234,13 +272,24 @@ agent-base@2:
     extend "~3.0.0"
     semver "~5.0.1"
 
-ajv-keywords@^1.0.0, ajv-keywords@^1.1.1:
+ajv-keywords@^1.0.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
 
-ajv@^4.11.2, ajv@^4.7.0:
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.3.tgz#ce30bdb90d1254f762c75af915fb3a63e7183d22"
+ajv-keywords@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
+
+ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+ajv@^5.1.5:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.1.5.tgz#8734931b601f00d4feef7c65738d77d1b65d1f68"
   dependencies:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
@@ -257,6 +306,13 @@ alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
 
+ambi@^2.2.0, ambi@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/ambi/-/ambi-2.5.0.tgz#7c8e372be48891157e7cea01cb6f9143d1f74220"
+  dependencies:
+    editions "^1.1.1"
+    typechecker "^4.3.0"
+
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
@@ -267,6 +323,12 @@ ansi-align@^1.1.0:
   dependencies:
     string-width "^1.0.1"
 
+ansi-align@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
+  dependencies:
+    string-width "^2.0.0"
+
 ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
@@ -275,18 +337,22 @@ ansi-html@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
 
+ansi-regex@^0.2.0, ansi-regex@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-0.2.1.tgz#0d8e946967a3d8143f93e24e298525fc1b2235f9"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
 
+ansi-styles@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.1.0.tgz#eaecbf66cd706882760b2f4691582b8f55d7a7de"
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
 
-ansi-styles@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
-
 any-promise@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -312,6 +378,17 @@ aproba@^1.0.3:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.1.1.tgz#95d3600f07710aa0e9298c726ad5ecf2eacbabab"
 
+archiver-utils@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/archiver-utils/-/archiver-utils-1.3.0.tgz#e50b4c09c70bf3d680e32ff1b7994e9f9d895174"
+  dependencies:
+    glob "^7.0.0"
+    graceful-fs "^4.1.0"
+    lazystream "^1.0.0"
+    lodash "^4.8.0"
+    normalize-path "^2.0.0"
+    readable-stream "^2.0.0"
+
 archiver@^0.16.0:
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/archiver/-/archiver-0.16.0.tgz#bb570346899d0865eb77ed66727ab3c634fc1a50"
@@ -325,12 +402,26 @@ archiver@^0.16.0:
     tar-stream "~1.2.1"
     zip-stream "~0.6.0"
 
+archiver@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/archiver/-/archiver-1.3.0.tgz#4f2194d6d8f99df3f531e6881f14f15d55faaf22"
+  dependencies:
+    archiver-utils "^1.3.0"
+    async "^2.0.0"
+    buffer-crc32 "^0.2.1"
+    glob "^7.0.0"
+    lodash "^4.8.0"
+    readable-stream "^2.0.0"
+    tar-stream "^1.5.0"
+    walkdir "^0.0.11"
+    zip-stream "^1.1.0"
+
 are-we-there-yet@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
   dependencies:
     delegates "^1.0.0"
-    readable-stream "^2.0.0 || ^1.1.13"
+    readable-stream "^2.0.6"
 
 argparse@^1.0.7:
   version "1.0.9"
@@ -345,8 +436,8 @@ arr-diff@^2.0.0:
     arr-flatten "^1.0.1"
 
 arr-flatten@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.3.tgz#a274ed85ac08849b6bd7847c4580745dc51adfb1"
 
 array-equal@^1.0.0:
   version "1.0.0"
@@ -424,14 +515,14 @@ asn1@~0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
 
+assert-plus@1.0.0, assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+
 assert-plus@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
 
-assert-plus@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
-
 assert@^1.1.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
@@ -450,17 +541,17 @@ async@0.2.x, async@~0.2.6:
   version "0.2.10"
   resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
 
-async@0.9.0, async@^0.9.0, async@~0.9.0:
+async@0.9.0, async@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.0.tgz#ac3613b1da9bed1b47510bb4651b8931e47146c7"
 
-async@^1.3.0, async@^1.4.0, async@^1.4.2, async@^1.5.2:
+async@^1.3.0, async@^1.4.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.0.1, async@^2.1.2, async@^2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc"
+async@^2.0.0, async@^2.1.2, async@^2.1.4, async@^2.1.5:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.4.0.tgz#4990200f18ea5b837c2cc4f8c031a6985c385611"
   dependencies:
     lodash "^4.14.0"
 
@@ -477,14 +568,14 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
 autoprefixer@^6.3.1, autoprefixer@^6.5.3:
-  version "6.7.4"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.4.tgz#b4405a263325c04a7c2b1c86fc603ad7bbfe01c6"
+  version "6.7.7"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
   dependencies:
-    browserslist "^1.7.4"
-    caniuse-db "^1.0.30000624"
+    browserslist "^1.7.6"
+    caniuse-db "^1.0.30000634"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^5.2.14"
+    postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
 aws-sign2@~0.6.0:
@@ -495,6 +586,16 @@ aws4@^1.2.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axe-core@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-2.2.1.tgz#d8fe7be13e2d80e407f96d3374ed64d5fb1c3e54"
+
+babar@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/babar/-/babar-0.0.3.tgz#2f394d4a5918f7e1ae9e5408e9a96f3f935ee1e2"
+  dependencies:
+    colors "~0.6.2"
+
 babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.20.0, babel-code-frame@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
@@ -504,12 +605,12 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.20.0, ba
     js-tokens "^3.0.0"
 
 babel-generator@^6.18.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.23.0.tgz#6b8edab956ef3116f79d8c84c5a3c05f32a74bc5"
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.1.tgz#e715f486c58ded25649d888944d52aa07c5d9497"
   dependencies:
     babel-messages "^6.23.0"
     babel-runtime "^6.22.0"
-    babel-types "^6.23.0"
+    babel-types "^6.24.1"
     detect-indent "^4.0.0"
     jsesc "^1.3.0"
     lodash "^4.2.0"
@@ -530,32 +631,32 @@ babel-runtime@^6.18.0, babel-runtime@^6.22.0:
     regenerator-runtime "^0.10.0"
 
 babel-template@^6.16.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.23.0.tgz#04d4f270adbb3aa704a8143ae26faa529238e638"
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.24.1.tgz#04ae514f1f93b3a2537f2a0f60a5a45fb8308333"
   dependencies:
     babel-runtime "^6.22.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
     babylon "^6.11.0"
     lodash "^4.2.0"
 
-babel-traverse@^6.18.0, babel-traverse@^6.23.0:
-  version "6.23.1"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.23.1.tgz#d3cb59010ecd06a97d81310065f966b699e14f48"
+babel-traverse@^6.18.0, babel-traverse@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.24.1.tgz#ab36673fd356f9a0948659e7b338d5feadb31695"
   dependencies:
     babel-code-frame "^6.22.0"
     babel-messages "^6.23.0"
     babel-runtime "^6.22.0"
-    babel-types "^6.23.0"
+    babel-types "^6.24.1"
     babylon "^6.15.0"
     debug "^2.2.0"
     globals "^9.0.0"
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-types@^6.18.0, babel-types@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.23.0.tgz#bb17179d7538bad38cd0c9e115d340f77e7e9acf"
+babel-types@^6.18.0, babel-types@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.24.1.tgz#a136879dc15b3606bda0d90c1fc74304c2ff0975"
   dependencies:
     babel-runtime "^6.22.0"
     esutils "^2.0.2"
@@ -563,8 +664,8 @@ babel-types@^6.18.0, babel-types@^6.23.0:
     to-fast-properties "^1.0.1"
 
 babylon@^6.11.0, babylon@^6.13.0, babylon@^6.15.0:
-  version "6.15.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.15.0.tgz#ba65cfa1a80e1759b0e89fb562e27dccae70348e"
+  version "6.17.1"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.1.tgz#17f14fddf361b695981fe679385e4f1c01ebd86f"
 
 backo2@1.0.2:
   version "1.0.2"
@@ -627,8 +728,8 @@ binary-extensions@^1.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.8.0.tgz#48ec8d16df4377eae5fa5884682480af4d95c774"
 
 bl@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.0.tgz#1397e7ec42c5f5dc387470c500e34a9f6be9ea98"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.1.tgz#cac328f7bee45730d404b692203fcb590e172d5e"
   dependencies:
     readable-stream "^2.0.5"
 
@@ -649,27 +750,27 @@ blocking-proxy@0.0.5:
     minimist "^1.2.0"
 
 bluebird@^3.3.0, bluebird@^3.4.7:
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.7.tgz#f72d760be09b7f76d08ed8fae98b289a8d05fab3"
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
 
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.6"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.6.tgz#53344adb14617a13f6e8dd2ce28905d1c0ba3215"
 
-body-parser@^1.12.4:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.16.1.tgz#51540d045adfa7a0c6995a014bb6b1ed9b802329"
+body-parser@^1.16.1:
+  version "1.17.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.17.2.tgz#f8892abc8f9e627d42aedafbca66bf5ab99104ee"
   dependencies:
     bytes "2.4.0"
     content-type "~1.0.2"
-    debug "2.6.1"
+    debug "2.6.7"
     depd "~1.1.0"
-    http-errors "~1.5.1"
+    http-errors "~1.6.1"
     iconv-lite "0.4.15"
     on-finished "~2.3.0"
-    qs "6.2.1"
+    qs "6.4.0"
     raw-body "~2.2.0"
-    type-is "~1.6.14"
+    type-is "~1.6.15"
 
 boolbase@~1.0.0:
   version "1.0.0"
@@ -696,10 +797,10 @@ boxen@^0.6.0:
     widest-line "^1.0.0"
 
 boxen@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.0.0.tgz#b2694baf1f605f708ff0177c12193b22f29aaaab"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.1.0.tgz#b1b69dd522305e807a99deee777dbd6e5167b102"
   dependencies:
-    ansi-align "^1.1.0"
+    ansi-align "^2.0.0"
     camelcase "^4.0.0"
     chalk "^1.1.1"
     cli-boxes "^1.0.0"
@@ -707,9 +808,9 @@ boxen@^1.0.0:
     term-size "^0.1.0"
     widest-line "^1.0.0"
 
-brace-expansion@^1.0.0:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
+brace-expansion@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.7.tgz#3effc3c50e000531fb720eaff80f0ae8ef23cf59"
   dependencies:
     balanced-match "^0.4.1"
     concat-map "0.0.1"
@@ -729,8 +830,8 @@ braces@^1.8.2:
     repeat-element "^1.1.2"
 
 brorand@^1.0.1:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.0.7.tgz#6677fa5e4901bdbf9c9ec2a748e28dca407a9bfc"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
 
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
   version "1.0.6"
@@ -766,8 +867,8 @@ browserify-rsa@^4.0.0:
     randombytes "^2.0.1"
 
 browserify-sign@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.0.tgz#10773910c3c206d5420a46aad8694f820b85968f"
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
   dependencies:
     bn.js "^4.1.1"
     browserify-rsa "^4.0.0"
@@ -783,14 +884,14 @@ browserify-zlib@^0.1.4:
   dependencies:
     pako "~0.2.0"
 
-browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.4:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.4.tgz#56a12da876f787223743a866224ccd8f97014628"
+browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
   dependencies:
-    caniuse-db "^1.0.30000624"
-    electron-to-chromium "^1.2.2"
+    caniuse-db "^1.0.30000639"
+    electron-to-chromium "^1.2.7"
 
-buffer-crc32@~0.2.1:
+buffer-crc32@^0.2.1, buffer-crc32@~0.2.1:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
 
@@ -798,7 +899,7 @@ buffer-equal-constant-time@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
 
-buffer-shims@^1.0.0:
+buffer-shims@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
 
@@ -871,21 +972,21 @@ camelcase@^3.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
 camelcase@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.0.0.tgz#8b0f90d44be5e281b903b9887349b92595ef07f2"
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
 
 caniuse-api@^1.5.2:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.3.tgz#5018e674b51c393e4d50614275dc017e27c4a2a2"
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
   dependencies:
-    browserslist "^1.0.1"
-    caniuse-db "^1.0.30000346"
-    lodash.memoize "^4.1.0"
-    lodash.uniq "^4.3.0"
+    browserslist "^1.3.6"
+    caniuse-db "^1.0.30000529"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
 
-caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000624:
-  version "1.0.30000624"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000624.tgz#554b87547895e36f5fe128f4b7448a2ea5bf2213"
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+  version "1.0.30000667"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000667.tgz#fb6060dbf349c101df26f421442419802fc6dab1"
 
 canonical-path@0.0.2, canonical-path@^0.0.2, canonical-path@~0.0.2:
   version "0.0.2"
@@ -895,9 +996,9 @@ capture-stack-trace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
 
-caseless@~0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
 
 catharsis@^0.8.1:
   version "0.8.8"
@@ -916,6 +1017,16 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
+chalk@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.5.1.tgz#663b3a648b68b55d04690d49167aa837858f2174"
+  dependencies:
+    ansi-styles "^1.1.0"
+    escape-string-regexp "^1.0.0"
+    has-ansi "^0.1.0"
+    strip-ansi "^0.3.0"
+    supports-color "^0.2.0"
+
 chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -926,14 +1037,6 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
-  dependencies:
-    ansi-styles "~1.0.0"
-    has-color "~0.1.0"
-    strip-ansi "~0.1.0"
-
 change-case@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.0.0.tgz#6c9c8e35f8790870a82b6b0745be8c3cbef9b081"
@@ -977,9 +1080,13 @@ character-reference-invalid@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.0.tgz#dec9ad1dfb9f8d06b4fcdaa2adc3c4fd97af1e68"
 
+"charenc@>= 0.0.1":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+
 chokidar@^1.4.1, chokidar@^1.4.3, chokidar@^1.6.0:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   dependencies:
     anymatch "^1.3.0"
     async-each "^1.0.0"
@@ -992,7 +1099,15 @@ chokidar@^1.4.1, chokidar@^1.4.3, chokidar@^1.6.0:
   optionalDependencies:
     fsevents "^1.0.0"
 
-cipher-base@^1.0.0, cipher-base@^1.0.1:
+chrome-devtools-frontend@1.0.401423:
+  version "1.0.401423"
+  resolved "https://registry.yarnpkg.com/chrome-devtools-frontend/-/chrome-devtools-frontend-1.0.401423.tgz#32a89b8d04e378a494be3c8d63271703be1c04ea"
+
+chrome-devtools-frontend@1.0.422034:
+  version "1.0.422034"
+  resolved "https://registry.yarnpkg.com/chrome-devtools-frontend/-/chrome-devtools-frontend-1.0.422034.tgz#071c8ce14466b7653032fcd1ad1a4a68d5e3cbd9"
+
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.3.tgz#eeabf194419ce900da3018c207d212f2a6df0a07"
   dependencies:
@@ -1009,14 +1124,18 @@ cjson@^0.3.1:
     json-parse-helpfulerror "^1.0.3"
 
 clap@^1.0.9:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.2.tgz#316545bf22229225a2cecaa6824cd2f56a9709ed"
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.3.tgz#b3bd36e93dd4cbfb395a3c26896352445265c05b"
   dependencies:
     chalk "^1.1.3"
 
+classlist.js@^1.1.20150312:
+  version "1.1.20150312"
+  resolved "https://registry.yarnpkg.com/classlist.js/-/classlist.js-1.1.20150312.tgz#1d70842f7022f08d9ac086ce69e5b250f2c57789"
+
 clean-css@4.0.x:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.7.tgz#d8fa8b4d87a125f38fa3d64afc59abfc68ba7790"
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.13.tgz#feb2a176062d72a6c3e624d9213cac6a0c485e80"
   dependencies:
     source-map "0.5.x"
 
@@ -1024,7 +1143,7 @@ cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
 
-cli-cursor@^1.0.1:
+cli-cursor@^1.0.1, cli-cursor@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
   dependencies:
@@ -1036,6 +1155,10 @@ cli-cursor@^2.1.0:
   dependencies:
     restore-cursor "^2.0.0"
 
+cli-spinners@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-0.1.2.tgz#bb764d88e185fb9e1e6a2a1f19772318f605e31c"
+
 cli-table@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.1.tgz#f53b05266a8b1a0b934b3d0821e6e2dc5914ae23"
@@ -1062,10 +1185,24 @@ cliui@^3.0.3, cliui@^3.2.0:
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
+clone-deep@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.2.4.tgz#4e73dd09e9fb971cc38670c5dced9c1896481cc6"
+  dependencies:
+    for-own "^0.1.3"
+    is-plain-object "^2.0.1"
+    kind-of "^3.0.2"
+    lazy-cache "^1.0.3"
+    shallow-clone "^0.1.2"
+
 clone@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
 
+clone@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -1091,6 +1228,10 @@ codelyzer@~2.0.0:
     source-map "^0.5.6"
     sprintf-js "^1.0.3"
 
+coffee-script@^1.12.5:
+  version "1.12.5"
+  resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.5.tgz#809f4585419112bbfe46a073ad7543af18c27346"
+
 collapse-white-space@^1.0.0, collapse-white-space@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.2.tgz#9c463fb9c6d190d2dcae21a356a01bcae9eeef6d"
@@ -1102,8 +1243,8 @@ color-convert@^1.3.0:
     color-name "^1.1.1"
 
 color-name@^1.0.0, color-name@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.2.tgz#5c8ab72b64bd2215d617ae9559ebb148475cf98d"
 
 color-string@^0.3.0:
   version "0.3.0"
@@ -1135,6 +1276,10 @@ colors@1.1.2, colors@^1.1.0, colors@^1.1.2, colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
 
+colors@~0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc"
+
 combine-lists@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/combine-lists/-/combine-lists-1.0.1.tgz#458c07e09e0d900fc28b70a3fec2dacd1d2cb7f6"
@@ -1147,13 +1292,17 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-comma-separated-tokens@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.2.tgz#4b64717a2ee363af6dd39878336bd95e42d063e7"
+comma-separated-tokens@^1.0.0, comma-separated-tokens@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.3.tgz#6eb01f4730bde7a7fce5d5e2d943bdd637272801"
   dependencies:
     trim "0.0.1"
 
-commander@2.9.x, commander@^2.8.1, commander@^2.9.0:
+commander@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
+
+commander@2.9.x, commander@^2.8.1, commander@~2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
   dependencies:
@@ -1187,6 +1336,15 @@ component-inherit@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
 
+compress-commons@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-1.2.0.tgz#58587092ef20d37cb58baf000112c9278ff73b9f"
+  dependencies:
+    buffer-crc32 "^0.2.1"
+    crc32-stream "^2.0.0"
+    normalize-path "^2.0.0"
+    readable-stream "^2.0.0"
+
 compress-commons@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-0.3.0.tgz#97093e2e193f7567fa13203d4b8defcd5971a519"
@@ -1197,10 +1355,10 @@ compress-commons@~0.3.0:
     readable-stream "~1.0.26"
 
 compressible@~2.0.8:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.9.tgz#6daab4e2b599c2770dd9e21e7a891b1c5a755425"
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.10.tgz#feda1c7f7617912732b29bf8cf26252a20b9eecd"
   dependencies:
-    mime-db ">= 1.24.0 < 2"
+    mime-db ">= 1.27.0 < 2"
 
 compression@^1.2.2, compression@^1.5.2:
   version "1.6.2"
@@ -1225,6 +1383,19 @@ concat-stream@^1.4.7, concat-stream@^1.5.2:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concurrently@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.4.0.tgz#60662b3defde07375bae19aac0ab780ec748ba79"
+  dependencies:
+    chalk "0.5.1"
+    commander "2.6.0"
+    date-fns "^1.23.0"
+    lodash "^4.5.1"
+    rx "2.3.24"
+    spawn-command "^0.0.2-1"
+    supports-color "^3.2.3"
+    tree-kill "^1.1.0"
+
 configstore@^1.0.0, configstore@^1.2.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/configstore/-/configstore-1.4.0.tgz#c35781d0501d268c25c54b8b17f6240e8a4fb021"
@@ -1253,14 +1424,14 @@ configstore@^2.0.0:
     xdg-basedir "^2.0.0"
 
 configstore@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.0.0.tgz#e1b8669c1803ccc50b545e92f8e6e79aa80e0196"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.0.tgz#45df907073e26dfa1cf4b2d52f5b60545eaa11d1"
   dependencies:
     dot-prop "^4.1.0"
     graceful-fs "^4.1.2"
-    mkdirp "^0.5.0"
+    make-dir "^1.0.0"
     unique-string "^1.0.0"
-    write-file-atomic "^1.1.2"
+    write-file-atomic "^2.0.0"
     xdg-basedir "^3.0.0"
 
 connect-history-api-fallback@^1.3.0:
@@ -1273,12 +1444,12 @@ connect-query@^0.2.0:
   dependencies:
     qs "~1.1.0"
 
-connect@^3.3.3, connect@^3.3.5:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.0.tgz#f09a4f7dcd17324b663b725c815bdb1c4158a46e"
+connect@^3.3.3, connect@^3.6.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.1.tgz#b7760693a74f0454face1d9378edb3f885b43227"
   dependencies:
-    debug "2.6.1"
-    finalhandler "1.0.0"
+    debug "2.6.3"
+    finalhandler "1.0.1"
     parseurl "~1.3.1"
     utils-merge "1.0.0"
 
@@ -1316,8 +1487,8 @@ content-type@~1.0.2:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
 
 convert-source-map@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.4.0.tgz#e3dad195bf61bfe13a7a3c73e9876ec14a0268f3"
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
 
 cookie-signature@1.0.6:
   version "1.0.6"
@@ -1335,6 +1506,29 @@ core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
+corser@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87"
+
+cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.3.tgz#952771eb0dddc1cb3fa2f6fbe51a522e93b3ee0a"
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
+crc32-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-2.0.0.tgz#e3cdd3b4df3168dd74e3de3fbbcb7b297fe908f4"
+  dependencies:
+    crc "^3.4.4"
+    readable-stream "^2.0.0"
+
 crc32-stream@~0.3.1:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-0.3.4.tgz#73bc25b45fac1db6632231a7bfce8927e9f06552"
@@ -1342,6 +1536,10 @@ crc32-stream@~0.3.1:
     buffer-crc32 "~0.2.1"
     readable-stream "~1.0.24"
 
+crc@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/crc/-/crc-3.4.4.tgz#9da1e980e3bd44fc5c93bf5ab3da3378d85e466b"
+
 create-ecdh@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
@@ -1355,21 +1553,25 @@ create-error-class@^3.0.0, create-error-class@^3.0.1:
   dependencies:
     capture-stack-trace "^1.0.0"
 
-create-hash@^1.1.0, create-hash@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.2.tgz#51210062d7bb7479f6c65bb41a92208b1d61abad"
+create-hash@^1.1.0, create-hash@^1.1.1, create-hash@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
   dependencies:
     cipher-base "^1.0.1"
     inherits "^2.0.1"
-    ripemd160 "^1.0.0"
-    sha.js "^2.3.6"
+    ripemd160 "^2.0.0"
+    sha.js "^2.4.0"
 
-create-hmac@^1.1.0, create-hmac@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.4.tgz#d3fb4ba253eb8b3f56e39ea2fbcb8af747bd3170"
+create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
   dependencies:
+    cipher-base "^1.0.3"
     create-hash "^1.1.0"
     inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
 
 cross-spawn-async@^2.1.1:
   version "2.2.5"
@@ -1392,6 +1594,18 @@ cross-spawn@^4.0.0:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
+cross-spawn@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+"crypt@>= 0.0.1":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
@@ -1417,18 +1631,24 @@ crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
 
+csextends@^1.0.3:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/csextends/-/csextends-1.1.1.tgz#cc53c1349faf7f0ae6cdf6f6c4a4d9156d3c4ec1"
+  dependencies:
+    coffee-script "^1.12.5"
+
 css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
-css-loader@^0.26.1:
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.1.tgz#2ba7f20131b93597496b3e9bb500785a49cd29ea"
+css-loader@^0.28.1:
+  version "0.28.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.1.tgz#220325599f8f00452d9ceb4c3ca6c8a66798642d"
   dependencies:
     babel-code-frame "^6.11.0"
     css-selector-tokenizer "^0.7.0"
     cssnano ">=2.6.1 <4"
-    loader-utils "~0.2.2"
+    loader-utils "^1.0.2"
     lodash.camelcase "^4.3.0"
     object-assign "^4.0.1"
     postcss "^5.0.6"
@@ -1436,7 +1656,8 @@ css-loader@^0.26.1:
     postcss-modules-local-by-default "^1.0.1"
     postcss-modules-scope "^1.0.0"
     postcss-modules-values "^1.1.0"
-    source-list-map "^0.1.4"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^0.1.7"
 
 css-parse@1.7.x:
   version "1.7.0"
@@ -1519,8 +1740,8 @@ cssesc@^0.1.0:
     postcss-zindex "^2.0.1"
 
 csso@~2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.1.tgz#4f8d91a156f2f1c2aebb40b8fb1b5eb83d94d3b9"
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
   dependencies:
     clap "^1.0.9"
     source-map "^0.5.3"
@@ -1567,15 +1788,19 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^1.23.0:
+  version "1.28.4"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.28.4.tgz#7938aec34ba31fc8bd134d2344bc2e0bbfd95165"
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@*, debug@2, debug@2.6.1, debug@^2.1.1, debug@^2.1.3, debug@^2.2.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.1.tgz#79855090ba2c4e3115cc7d8769491d58f0491351"
+debug@*, debug@2, debug@2.6.7, debug@^2.1.1, debug@^2.1.3, debug@^2.2.0, debug@^2.6.3:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
   dependencies:
-    ms "0.7.2"
+    ms "2.0.0"
 
 debug@2.2.0, debug@~2.2.0:
   version "2.2.0"
@@ -1589,13 +1814,25 @@ debug@2.3.3:
   dependencies:
     ms "0.7.2"
 
+debug@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.1.tgz#79855090ba2c4e3115cc7d8769491d58f0491351"
+  dependencies:
+    ms "0.7.2"
+
+debug@2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.3.tgz#0f7eb8c30965ec08c72accfa0130c8b79984141d"
+  dependencies:
+    ms "0.7.2"
+
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
 deep-extend@~0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
 
 deep-is@~0.1.3:
   version "0.1.3"
@@ -1635,7 +1872,7 @@ denodeify@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/denodeify/-/denodeify-1.2.1.tgz#3a36287f5034e699e7577901052c2e6c94251631"
 
-depd@~1.1.0:
+depd@1.1.0, depd@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
 
@@ -1666,14 +1903,21 @@ detect-indent@^4.0.0:
   dependencies:
     repeating "^2.0.0"
 
-dgeni-packages@0.17.0:
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/dgeni-packages/-/dgeni-packages-0.17.0.tgz#b2e5117670e99109f664703af26a460a5064d6cc"
+devtools-timeline-model@1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/devtools-timeline-model/-/devtools-timeline-model-1.1.6.tgz#7be51a73b55d727b597bb30dd1ed2e8e210639a5"
+  dependencies:
+    chrome-devtools-frontend "1.0.401423"
+    resolve "1.1.7"
+
+dgeni-packages@^0.20.0:
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/dgeni-packages/-/dgeni-packages-0.20.0.tgz#e7da99b0a119ee2eb584202d054a5aa01f23e208"
   dependencies:
     canonical-path "0.0.2"
     catharsis "^0.8.1"
     change-case "3.0.0"
-    dgeni "^0.4.7"
+    dgeni "^0.4.9"
     espree "^2.2.3"
     estraverse "^4.1.0"
     glob "^7.0.5"
@@ -1684,12 +1928,13 @@ dgeni-packages@0.17.0:
     mkdirp "^0.5.1"
     mkdirp-promise "^5.0.0"
     node-html-encoder "0.0.2"
-    nunjucks "^2.4.2"
+    nunjucks "^3.0.1"
     semver "^5.2.0"
     shelljs "^0.7.0"
+    source-map-support "^0.4.15"
     spdx-license-list "^2.1.0"
     stringmap "^0.2.2"
-    typescript "^1.7.5"
+    typescript "^2.3.4"
 
 dgeni@^0.4.7:
   version "0.4.7"
@@ -1705,6 +1950,20 @@ dgeni@^0.4.7:
     validate.js "^0.9.0"
     winston "^2.1.1"
 
+dgeni@^0.4.9:
+  version "0.4.9"
+  resolved "https://registry.yarnpkg.com/dgeni/-/dgeni-0.4.9.tgz#9e42775b1386ca5eb824753ac2cd169d8f61ced1"
+  dependencies:
+    canonical-path "~0.0.2"
+    dependency-graph "~0.4.1"
+    di "0.0.1"
+    lodash "^3.10.1"
+    objectdiff "^1.1.0"
+    optimist "~0.6.1"
+    q "~1.4.1"
+    validate.js "^0.9.0"
+    winston "^2.1.1"
+
 di@0.0.1, di@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
@@ -1781,8 +2040,8 @@ domhandler@2.1:
     domelementtype "1"
 
 domhandler@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738"
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
   dependencies:
     domelementtype "1"
 
@@ -1800,8 +2059,8 @@ domutils@1.5.1, domutils@^1.5.1:
     domelementtype "1"
 
 dot-case@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-2.1.0.tgz#4b43dd0d7403c34cb645424add397e80bfe85ca6"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-2.1.1.tgz#34dcf37f50a8e93c2b3bca8bb7fb9155c7da3bee"
   dependencies:
     no-case "^2.2.0"
 
@@ -1836,6 +2095,13 @@ duplexify@^3.2.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+eachr@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/eachr/-/eachr-3.2.0.tgz#2c35e43ea086516f7997cf80b7aa64d55a4a4484"
+  dependencies:
+    editions "^1.1.1"
+    typechecker "^4.3.0"
+
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -1849,22 +2115,38 @@ ecdsa-sig-formatter@1.0.9:
     base64url "^2.0.0"
     safe-buffer "^5.0.1"
 
+ecstatic@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/ecstatic/-/ecstatic-1.4.1.tgz#32cb7b6fa2e290d58668674d115e8f0c3d567d6a"
+  dependencies:
+    he "^0.5.0"
+    mime "^1.2.11"
+    minimist "^1.1.0"
+    url-join "^1.0.0"
+
+editions@^1.1.1, editions@^1.1.2, editions@^1.3.1, editions@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.3.tgz#0907101bdda20fac3cbe334c27cbd0688dc99a5b"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-electron-to-chromium@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.2.2.tgz#e41bc9488c88e3cfa1e94bde28e8420d7d47c47c"
+electron-to-chromium@^1.2.7:
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.10.tgz#63d62b785471f0d8dda85199d64579de8a449f08"
 
 elliptic@^6.0.0:
-  version "6.3.3"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.3.3.tgz#5482d9646d54bcb89fd7d994fc9e2e9568876e3f"
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
   dependencies:
     bn.js "^4.4.0"
     brorand "^1.0.1"
     hash.js "^1.0.0"
+    hmac-drbg "^1.0.0"
     inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.0"
 
 ember-cli-normalize-entity-name@^1.0.0:
   version "1.0.0"
@@ -1876,6 +2158,10 @@ ember-cli-string-utils@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ember-cli-string-utils/-/ember-cli-string-utils-1.1.0.tgz#39b677fc2805f55173735376fcef278eaa4452a1"
 
+emoji-regex@^6.0.0:
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.4.2.tgz#a30b6fee353d406d96cfb9fa765bdc82897eff6e"
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -1891,14 +2177,14 @@ end-of-stream@1.0.0:
     once "~1.3.0"
 
 end-of-stream@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.1.0.tgz#e9353258baa9108965efc41cb0ef8ade2f3cfb07"
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
   dependencies:
-    once "~1.3.0"
+    once "^1.4.0"
 
-engine.io-client@1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-1.8.2.tgz#c38767547f2a7d184f5752f6f0ad501006703766"
+engine.io-client@1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-1.8.3.tgz#1798ed93451246453d4c6f635d7a201fe940d5ab"
   dependencies:
     component-emitter "1.2.1"
     component-inherit "0.0.3"
@@ -1909,7 +2195,7 @@ engine.io-client@1.8.2:
     parsejson "0.0.3"
     parseqs "0.0.5"
     parseuri "0.0.5"
-    ws "1.1.1"
+    ws "1.1.2"
     xmlhttprequest-ssl "1.5.3"
     yeast "0.1.2"
 
@@ -1924,16 +2210,16 @@ engine.io-parser@1.3.2:
     has-binary "0.1.7"
     wtf-8 "1.0.0"
 
-engine.io@1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-1.8.2.tgz#6b59be730b348c0125b0a4589de1c355abcf7a7e"
+engine.io@1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-1.8.3.tgz#8de7f97895d20d39b85f88eeee777b2bd42b13d4"
   dependencies:
     accepts "1.3.3"
     base64id "1.0.0"
     cookie "0.3.1"
     debug "2.3.3"
     engine.io-parser "1.3.2"
-    ws "1.1.1"
+    ws "1.1.2"
 
 enhanced-resolve@^3.0.0, enhanced-resolve@^3.1.0:
   version "3.1.0"
@@ -1963,14 +2249,14 @@ errno@^0.1.1, errno@^0.1.3:
     prr "~0.0.0"
 
 error-ex@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.0.tgz#e67b43f3e82c96ea3a584ffee0b9fc3325d802d9"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
   dependencies:
     is-arrayish "^0.2.1"
 
 es5-ext@^0.10.14, es5-ext@^0.10.9, es5-ext@~0.10.14:
-  version "0.10.15"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.15.tgz#c330a5934c1ee21284a7c081a86e5fd937c91ea6"
+  version "0.10.16"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.16.tgz#1ef1b04f3d09db6a5d630226d62202f2e425e45a"
   dependencies:
     es6-iterator "2"
     es6-symbol "~3.1"
@@ -1994,7 +2280,7 @@ es6-map@^0.1.3:
     es6-symbol "~3.1.1"
     event-emitter "~0.3.5"
 
-es6-set@~0.1.5:
+es6-set@^0.1.4, es6-set@~0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
   dependencies:
@@ -2024,7 +2310,7 @@ escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
@@ -2097,8 +2383,8 @@ espree@^2.2.3:
   resolved "https://registry.yarnpkg.com/espree/-/espree-2.2.5.tgz#df691b9310889402aeb29cc066708c56690b854b"
 
 espree@^3.4.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.4.1.tgz#28a83ab4aaed71ed8fe0f5efe61b76a05c13c4d2"
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.4.3.tgz#2910b5ccd49ce893c2ffffaab4fd8b3a31b82374"
   dependencies:
     acorn "^5.0.1"
     acorn-jsx "^3.0.0"
@@ -2107,6 +2393,10 @@ esprima@^2.6.0, esprima@^2.7.1:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
 
+esprima@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+
 esquery@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
@@ -2136,9 +2426,9 @@ esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
 
-etag@~1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
+etag@~1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051"
 
 event-emitter@~0.3.5:
   version "0.3.5"
@@ -2155,7 +2445,7 @@ events@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
 
-eventsource@~0.1.6:
+eventsource@0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
   dependencies:
@@ -2218,15 +2508,15 @@ expand-range@^1.8.1:
     fill-range "^2.1.0"
 
 exports-loader@^0.6.3:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/exports-loader/-/exports-loader-0.6.3.tgz#57dc78917f709b96f247fa91e69b554c855013c8"
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/exports-loader/-/exports-loader-0.6.4.tgz#d70fc6121975b35fc12830cf52754be2740fc886"
   dependencies:
-    loader-utils "0.2.x"
-    source-map "0.1.x"
+    loader-utils "^1.0.2"
+    source-map "0.5.x"
 
 express@^4.13.3:
-  version "4.14.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.14.1.tgz#646c237f766f148c2120aff073817b9e4d7e0d33"
+  version "4.15.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.15.2.tgz#af107fc148504457f2dca9a6f2571d7129b97b35"
   dependencies:
     accepts "~1.3.3"
     array-flatten "1.1.1"
@@ -2234,30 +2524,39 @@ express@^4.13.3:
     content-type "~1.0.2"
     cookie "0.3.1"
     cookie-signature "1.0.6"
-    debug "~2.2.0"
+    debug "2.6.1"
     depd "~1.1.0"
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
-    etag "~1.7.0"
-    finalhandler "0.5.1"
-    fresh "0.3.0"
+    etag "~1.8.0"
+    finalhandler "~1.0.0"
+    fresh "0.5.0"
     merge-descriptors "1.0.1"
     methods "~1.1.2"
     on-finished "~2.3.0"
     parseurl "~1.3.1"
     path-to-regexp "0.1.7"
     proxy-addr "~1.1.3"
-    qs "6.2.0"
+    qs "6.4.0"
     range-parser "~1.2.0"
-    send "0.14.2"
-    serve-static "~1.11.2"
+    send "0.15.1"
+    serve-static "1.12.1"
+    setprototypeof "1.0.3"
+    statuses "~1.3.1"
     type-is "~1.6.14"
     utils-merge "1.0.0"
     vary "~1.1.0"
 
 extend@3, extend@^3.0.0, extend@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extendr@^3.2.0, extendr@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/extendr/-/extendr-3.2.2.tgz#c6e46fe6d90b2e3e8812a6654bd6182cbf91cd06"
+  dependencies:
+    editions "^1.1.2"
+    typechecker "^4.3.0"
 
 external-editor@^2.0.1:
   version "2.0.1"
@@ -2271,9 +2570,9 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extract-text-webpack-plugin@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.0.0.tgz#8640f72609800a3528f13a2a9634d566a5c1ae60"
+extract-text-webpack-plugin@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.0.tgz#69315b885f876dbf96d3819f6a9f1cca7aebf159"
   dependencies:
     ajv "^4.11.2"
     async "^2.1.2"
@@ -2335,14 +2634,14 @@ file-entry-cache@^2.0.0:
     object-assign "^4.0.1"
 
 file-loader@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.10.0.tgz#bbe6db7474ac92c7f54fdc197cf547e98b6b8e12"
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.10.1.tgz#815034119891fc6441fb5a64c11bc93c22ddd842"
   dependencies:
-    loader-utils "~0.2.5"
+    loader-utils "^1.0.2"
 
 filename-regex@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
 
 fileset@^2.0.2:
   version "2.0.3"
@@ -2352,8 +2651,8 @@ fileset@^2.0.2:
     minimatch "^3.0.3"
 
 filesize@^3.1.3:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.4.tgz#742fc7fb6aef4ee3878682600c22f840731e1fda"
+  version "3.5.9"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.9.tgz#9e3dd8a9b124f5b2f1fb2ee9cd13a86c707bb222"
 
 fill-range@^2.1.0:
   version "2.2.3"
@@ -2369,21 +2668,11 @@ filled-array@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/filled-array/-/filled-array-1.1.0.tgz#c3c4f6c663b923459a9aa29912d2d031f1507f84"
 
-finalhandler@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.1.tgz#2c400d8d4530935bc232549c5fa385ec07de6fcd"
+finalhandler@1.0.1, finalhandler@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.1.tgz#bcd15d1689c0e5ed729b6f7f541a6df984117db8"
   dependencies:
-    debug "~2.2.0"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    statuses "~1.3.1"
-    unpipe "~1.0.0"
-
-finalhandler@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.0.tgz#b5691c2c0912092f18ac23e9416bde5cd7dc6755"
-  dependencies:
-    debug "2.6.1"
+    debug "2.6.3"
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
     on-finished "~2.3.0"
@@ -2405,8 +2694,8 @@ findup-sync@~0.3.0:
     glob "~5.0.0"
 
 firebase-tools@^3.2.1:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/firebase-tools/-/firebase-tools-3.3.0.tgz#78b4d1107acdf7cd3ecd6e02e07c1599d9daf24e"
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/firebase-tools/-/firebase-tools-3.7.0.tgz#45e8cc9ab86f790f7529ea45d358abebd51af9cc"
   dependencies:
     JSONStream "^1.2.1"
     archiver "^0.16.0"
@@ -2418,6 +2707,7 @@ firebase-tools@^3.2.1:
     cross-spawn "^4.0.0"
     csv-streamify "^3.0.4"
     didyoumean "^1.2.1"
+    es6-set "^0.1.4"
     exit-code "^1.0.2"
     filesize "^3.1.3"
     firebase "2.x.x"
@@ -2428,6 +2718,7 @@ firebase-tools@^3.2.1:
     jsonwebtoken "^5.4.0"
     lodash "^4.6.1"
     open "^0.0.5"
+    ora "0.2.3"
     portfinder "^0.4.0"
     progress "^1.1.8"
     request "^2.58.0"
@@ -2466,27 +2757,35 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
+flatmap@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/flatmap/-/flatmap-0.0.3.tgz#1f18a4d938152d495965f9c958d923ab2dd669b4"
+
 flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
-for-in@^0.1.5:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8"
+for-in@^0.1.3:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
 
-for-own@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.4.tgz#0149b41a39088c7515f51ebe1c1386d45f935072"
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+for-own@^0.1.3, for-own@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
   dependencies:
-    for-in "^0.1.5"
+    for-in "^1.0.1"
 
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
 
 form-data@~2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.2.tgz#89c3534008b97eada4cbb157d58f6f5df025eae4"
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.5"
@@ -2496,9 +2795,9 @@ forwarded@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
 
-fresh@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+fresh@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
 
 fs-access@^1.0.0:
   version "1.0.1"
@@ -2525,7 +2824,7 @@ fs-extra@^0.30.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^2.0.0, fs-extra@^2.1.1:
+fs-extra@^2.0.0, fs-extra@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-2.1.2.tgz#046c70163cef9aad46b0e4a7fa467fb22d71de35"
   dependencies:
@@ -2543,7 +2842,7 @@ fsevents@^1.0.0:
     nan "^2.3.0"
     node-pre-gyp "^0.6.29"
 
-fstream-ignore@^1.0.2, fstream-ignore@~1.0.5:
+fstream-ignore@^1.0.2, fstream-ignore@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
   dependencies:
@@ -2551,9 +2850,9 @@ fstream-ignore@^1.0.2, fstream-ignore@~1.0.5:
     inherits "2"
     minimatch "^3.0.0"
 
-fstream@^1.0.0, fstream@^1.0.2, fstream@~1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.10.tgz#604e8a92fe26ffd9f6fae30399d4984e1ab22822"
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
   dependencies:
     graceful-fs "^4.1.2"
     inherits "~2.0.0"
@@ -2564,9 +2863,9 @@ function-bind@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
 
-gauge@~2.7.1:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.3.tgz#1c23855f962f17b3ad3d0dc7443f304542edfe09"
+gauge@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
   dependencies:
     aproba "^1.0.3"
     console-control-strings "^1.0.0"
@@ -2606,11 +2905,21 @@ get-stream@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
 
 getpass@^0.1.1:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
   dependencies:
     assert-plus "^1.0.0"
 
+github-slugger@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.1.1.tgz#5444671f65e5a5a424cfa8ba3255cc1f7baf07ea"
+  dependencies:
+    emoji-regex "^6.0.0"
+
+gl-matrix@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-2.3.2.tgz#aac808c74af7d5db05fe04cb60ca1a0fcb174d74"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -2669,8 +2978,8 @@ glob@~5.0.0:
     path-is-absolute "^1.0.0"
 
 globals@^9.0.0, globals@^9.14.0:
-  version "9.16.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.16.0.tgz#63e903658171ec2d9f51b1d31de5e2b8dc01fb80"
+  version "9.17.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.17.0.tgz#0c0ca696d9b9bb694d2e5470bd37777caad50286"
 
 globby@^5.0.0:
   version "5.0.0"
@@ -2752,7 +3061,7 @@ got@^6.7.1:
     unzip-response "^2.0.1"
     url-parse-lax "^1.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+graceful-fs@*, graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -2764,6 +3073,16 @@ handle-thing@^1.2.4:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
 
+handlebars@4.0.5, handlebars@^4.0.3:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.5.tgz#92c6ed6bb164110c50d4d8d0fbddc70806c6f8e7"
+  dependencies:
+    async "^1.4.0"
+    optimist "^0.6.1"
+    source-map "^0.4.4"
+  optionalDependencies:
+    uglify-js "^2.6"
+
 handlebars@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-1.3.0.tgz#9e9b130a93e389491322d975cf3ec1818c37ce34"
@@ -2772,24 +3091,22 @@ handlebars@^1.3.0:
   optionalDependencies:
     uglify-js "~2.3"
 
-handlebars@^4.0.3:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.6.tgz#2ce4484850537f9c97a8026d5399b935c4ed4ed7"
-  dependencies:
-    async "^1.4.0"
-    optimist "^0.6.1"
-    source-map "^0.4.4"
-  optionalDependencies:
-    uglify-js "^2.6"
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
 
-har-validator@~2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
   dependencies:
-    chalk "^1.1.1"
-    commander "^2.9.0"
-    is-my-json-valid "^2.12.4"
-    pinkie-promise "^2.0.0"
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+has-ansi@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-0.1.0.tgz#84f265aae8c0e6a88a12d7022894b7568894c62e"
+  dependencies:
+    ansi-regex "^0.2.0"
 
 has-ansi@^2.0.0:
   version "2.0.0"
@@ -2803,10 +3120,6 @@ has-binary@0.1.7:
   dependencies:
     isarray "0.0.1"
 
-has-color@~0.1.0:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f"
-
 has-cors@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
@@ -2825,16 +3138,40 @@ has@^1.0.1:
   dependencies:
     function-bind "^1.0.2"
 
-hash.js@^1.0.0:
+hash-base@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+  dependencies:
+    inherits "^2.0.1"
+
+hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.0.3.tgz#1332ff00156c0a0ffdd8236013d07b77a0451573"
   dependencies:
     inherits "^2.0.1"
 
+hast-util-from-parse5@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-1.1.0.tgz#359cc339dc8ccf1dfaca41915ad63fd546130acd"
+  dependencies:
+    camelcase "^3.0.0"
+    has "^1.0.1"
+    hastscript "^3.0.0"
+    property-information "^3.1.0"
+    vfile-location "^2.0.0"
+
+hast-util-has-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-has-property/-/hast-util-has-property-1.0.0.tgz#211f9d7f7640898244a33f5d16f5c5d1880c8e40"
+
 hast-util-is-element@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-1.0.0.tgz#3f7216978b2ae14d98749878782675f33be3ce00"
 
+hast-util-parse-selector@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.1.0.tgz#b55c0f4bb7bb2040c889c325ef87ab29c38102b4"
+
 hast-util-sanitize@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-1.1.0.tgz#9b4bc3731043fe92e1253a9a4ca7bcc4148d06f2"
@@ -2859,10 +3196,24 @@ hast-util-to-html@^3.0.0:
     unist-util-is "^2.0.0"
     xtend "^4.0.1"
 
+hast-util-to-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-1.0.0.tgz#16c07671f0f2ac7735e455cdae32c7c1b8963f2a"
+
 hast-util-whitespace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-1.0.0.tgz#bd096919625d2936e1ff17bc4df7fd727f17ece9"
 
+hastscript@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-3.0.1.tgz#9edfab8839e6d67bc6835297a0bf9ba6ad7a00a9"
+  dependencies:
+    camelcase "^3.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^3.0.0"
+    space-separated-tokens "^1.0.0"
+
 hawk@~3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
@@ -2876,13 +3227,25 @@ he@1.1.x:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
+he@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-0.5.0.tgz#2c05ffaef90b68e860f3fd2b54ef580989277ee2"
+
 header-case@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/header-case/-/header-case-1.0.0.tgz#d9e335909505d56051ec16a0106821889e910781"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/header-case/-/header-case-1.0.1.tgz#9535973197c144b09613cd65d317ef19963bd02d"
   dependencies:
     no-case "^2.2.0"
     upper-case "^1.1.3"
 
+hmac-drbg@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
 hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
@@ -2892,8 +3255,8 @@ home-dir@^1.0.0:
   resolved "https://registry.yarnpkg.com/home-dir/-/home-dir-1.0.0.tgz#2917eb44bdc9072ceda942579543847e3017fe4e"
 
 hosted-git-info@^2.1.4:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.2.0.tgz#7a0d097863d886c0fabbdcd37bf1758d8becf8a5"
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.4.2.tgz#0076b9f46a270506ddbaaea56496897460612a67"
 
 hpack.js@^2.1.6:
   version "2.1.6"
@@ -2915,12 +3278,12 @@ html-encoding-sniffer@^1.0.1:
     whatwg-encoding "^1.0.1"
 
 html-entities@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.0.tgz#41948caf85ce82fed36e4e6a0ed371a6664379e2"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
 html-minifier@^3.2.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.3.3.tgz#5e85516b2aff3c3fb9bda351879375868386d6f6"
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.4.4.tgz#616fe3e3ef16da02b393d9a6099eeff468a35df0"
   dependencies:
     camel-case "3.0.x"
     clean-css "4.0.x"
@@ -2929,7 +3292,7 @@ html-minifier@^3.2.3:
     ncname "1.0.x"
     param-case "2.1.x"
     relateurl "0.2.x"
-    uglify-js "2.7.x"
+    uglify-js "~2.8.22"
 
 html-void-elements@^1.0.0:
   version "1.0.1"
@@ -2946,7 +3309,7 @@ html-webpack-plugin@^2.19.0:
     pretty-error "^2.0.2"
     toposort "^1.0.0"
 
-html@*, html@^1.0.0:
+html@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/html/-/html-1.0.0.tgz#a544fa9ea5492bfb3a2cca8210a10be7b5af1f61"
   dependencies:
@@ -2976,7 +3339,7 @@ http-deceiver@^1.2.4:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
 
-http-errors@~1.5.0, http-errors@~1.5.1:
+http-errors@~1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
   dependencies:
@@ -2984,22 +3347,44 @@ http-errors@~1.5.0, http-errors@~1.5.1:
     setprototypeof "1.0.2"
     statuses ">= 1.3.1 < 2"
 
-http-proxy-middleware@~0.17.1:
-  version "0.17.3"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.3.tgz#940382147149b856084f5534752d5b5a8168cd1d"
+http-errors@~1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.1.tgz#5f8b8ed98aca545656bf572997387f904a722257"
+  dependencies:
+    depd "1.1.0"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
+http-proxy-middleware@~0.17.4:
+  version "0.17.4"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
   dependencies:
     http-proxy "^1.16.2"
     is-glob "^3.1.0"
     lodash "^4.17.2"
     micromatch "^2.3.11"
 
-http-proxy@^1.13.0, http-proxy@^1.16.2:
+http-proxy@^1.13.0, http-proxy@^1.16.2, http-proxy@^1.8.1:
   version "1.16.2"
   resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742"
   dependencies:
     eventemitter3 "1.x.x"
     requires-port "1.x.x"
 
+http-server@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/http-server/-/http-server-0.9.0.tgz#8f1b06bdc733618d4dc42831c7ba1aff4e06001a"
+  dependencies:
+    colors "1.0.3"
+    corser "~2.0.0"
+    ecstatic "^1.4.0"
+    http-proxy "^1.8.1"
+    opener "~1.4.0"
+    optimist "0.6.x"
+    portfinder "0.4.x"
+    union "~0.4.3"
+
 http-signature@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
@@ -3036,13 +3421,28 @@ ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
 
-ignore@^3.2.0:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.6.tgz#26e8da0644be0bb4cb39516f6c79f0e0f4ffe48c"
+ignore@^3.2.0, ignore@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
 
-image-size@~0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.1.tgz#28eea8548a4b1443480ddddc1e083ae54652439f"
+ignorefs@^1.0.0, ignorefs@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ignorefs/-/ignorefs-1.2.0.tgz#da59fb858976e4a5e43702ccd1f282fdbc9e5756"
+  dependencies:
+    editions "^1.3.3"
+    ignorepatterns "^1.1.0"
+
+ignorepatterns@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ignorepatterns/-/ignorepatterns-1.1.0.tgz#ac8f436f2239b5dfb66d5f0d3a904a87ac67cc5e"
+
+image-size@^0.5.1, image-size@~0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.3.tgz#5cbe9fafc8436386ceb7e9e3a9d90c5b71b70ad9"
+
+image-ssim@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/image-ssim/-/image-ssim-0.2.0.tgz#83b42c7a2e6e4b85505477fe6917f5dbc56420e5"
 
 img-stats@^0.5.2:
   version "0.5.2"
@@ -3118,8 +3518,8 @@ inquirer@^0.12.0:
     through "^2.3.6"
 
 inquirer@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.0.1.tgz#6dfbffaf4d697dd76c8fe349f919de01c28afc4d"
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.0.6.tgz#e04aaa9d05b7a3cb9b0f407d04375f0447190347"
   dependencies:
     ansi-escapes "^1.1.0"
     chalk "^1.0.0"
@@ -3136,8 +3536,8 @@ inquirer@^3.0.0:
     through "^2.3.6"
 
 interpret@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
 
 invariant@^2.2.0:
   version "2.2.2"
@@ -3149,9 +3549,9 @@ invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
 
-ipaddr.js@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.2.0.tgz#8aba49c9192799585bdd643e0ccb50e8ae777ba4"
+ipaddr.js@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.3.0.tgz#1e03a52fdad83a8bbb2b25cbf4998b4cffcd3dec"
 
 is-absolute-url@^2.0.0:
   version "2.1.0"
@@ -3182,9 +3582,9 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.0.2, is-buffer@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.4.tgz#cfc86ccd5dc5a52fa80489111c6920c457e2d98b"
+is-buffer@^1.0.2, is-buffer@^1.1.4, is-buffer@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
 
 is-builtin-module@^1.0.0:
   version "1.0.0"
@@ -3196,6 +3596,10 @@ is-decimal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.0.tgz#940579b6ea63c628080a69e62bda88c8470b4fe0"
 
+is-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+
 is-dotfile@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
@@ -3256,9 +3660,9 @@ is-lower-case@^1.1.0:
   dependencies:
     lower-case "^1.1.0"
 
-is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
+is-my-json-valid@^2.10.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.0.tgz#f079dd9bfdae65ee2038aae8acbc86ab109e3693"
   dependencies:
     generate-function "^2.0.0"
     generate-object-property "^1.1.0"
@@ -3303,6 +3707,12 @@ is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
 
+is-plain-object@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.1.tgz#4d7ca539bc9db9b737b8acb612f2318ef92f294f"
+  dependencies:
+    isobject "^1.0.0"
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -3377,17 +3787,17 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
-isarray@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.1.tgz#a37d94ed9cda2d59865c9f76fe596ee1f338741e"
-
 isbinaryfile@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.2.tgz#4a3e974ec0cba9004d3fc6cde7209ea69368a621"
 
-isexe@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+
+isobject@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-1.0.2.tgz#f0f9b8ce92dd540fa0740882e3835a2e022ec78a"
 
 isobject@^2.0.0:
   version "2.1.0"
@@ -3399,18 +3809,18 @@ isstream@0.1.x, isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
-istanbul-api@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.1.1.tgz#d36e2f1560d1a43ce304c4ff7338182de61c8f73"
+istanbul-api@^1.1.8:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.1.9.tgz#2827920d380d4286d857d57a2968a841db8a7ec8"
   dependencies:
     async "^2.1.4"
     fileset "^2.0.2"
-    istanbul-lib-coverage "^1.0.0"
-    istanbul-lib-hook "^1.0.0"
-    istanbul-lib-instrument "^1.3.0"
-    istanbul-lib-report "^1.0.0-alpha.3"
-    istanbul-lib-source-maps "^1.1.0"
-    istanbul-reports "^1.0.0"
+    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-hook "^1.0.7"
+    istanbul-lib-instrument "^1.7.2"
+    istanbul-lib-report "^1.1.1"
+    istanbul-lib-source-maps "^1.2.1"
+    istanbul-reports "^1.1.1"
     js-yaml "^3.7.0"
     mkdirp "^0.5.1"
     once "^1.4.0"
@@ -3424,75 +3834,74 @@ istanbul-instrumenter-loader@^2.0.0:
     loader-utils "^0.2.16"
     object-assign "^4.1.0"
 
-istanbul-lib-coverage@^1.0.0, istanbul-lib-coverage@^1.0.0-alpha, istanbul-lib-coverage@^1.0.0-alpha.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.0.1.tgz#f263efb519c051c5f1f3343034fc40e7b43ff212"
+istanbul-lib-coverage@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
 
-istanbul-lib-hook@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.0.0.tgz#fc5367ee27f59268e8f060b0c7aaf051d9c425c5"
+istanbul-lib-hook@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.0.7.tgz#dd6607f03076578fe7d6f2a630cf143b49bacddc"
   dependencies:
     append-transform "^0.4.0"
 
-istanbul-lib-instrument@^1.1.3, istanbul-lib-instrument@^1.3.0:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.4.2.tgz#0e2fdfac93c1dabf2e31578637dc78a19089f43e"
+istanbul-lib-instrument@^1.1.3, istanbul-lib-instrument@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.7.2.tgz#6014b03d3470fb77638d5802508c255c06312e56"
   dependencies:
     babel-generator "^6.18.0"
     babel-template "^6.16.0"
     babel-traverse "^6.18.0"
     babel-types "^6.18.0"
     babylon "^6.13.0"
-    istanbul-lib-coverage "^1.0.0"
+    istanbul-lib-coverage "^1.1.1"
     semver "^5.3.0"
 
-istanbul-lib-report@^1.0.0-alpha.3:
-  version "1.0.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.0.0-alpha.3.tgz#32d5f6ec7f33ca3a602209e278b2e6ff143498af"
+istanbul-lib-report@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz#f0e55f56655ffa34222080b7a0cd4760e1405fc9"
   dependencies:
-    async "^1.4.2"
-    istanbul-lib-coverage "^1.0.0-alpha"
+    istanbul-lib-coverage "^1.1.1"
     mkdirp "^0.5.1"
     path-parse "^1.0.5"
-    rimraf "^2.4.3"
     supports-color "^3.1.2"
 
-istanbul-lib-source-maps@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.1.0.tgz#9d429218f35b823560ea300a96ff0c3bbdab785f"
+istanbul-lib-source-maps@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.1.tgz#a6fe1acba8ce08eebc638e572e294d267008aa0c"
   dependencies:
-    istanbul-lib-coverage "^1.0.0-alpha.0"
+    debug "^2.6.3"
+    istanbul-lib-coverage "^1.1.1"
     mkdirp "^0.5.1"
-    rimraf "^2.4.4"
+    rimraf "^2.6.1"
     source-map "^0.5.3"
 
-istanbul-reports@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.0.1.tgz#9a17176bc4a6cbebdae52b2f15961d52fa623fbc"
+istanbul-reports@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.1.tgz#042be5c89e175bc3f86523caab29c014e77fee4e"
   dependencies:
     handlebars "^4.0.3"
 
-jasmine-core@~2.5.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.5.2.tgz#6f61bd79061e27f43e6f9355e44b3c6cab6ff297"
+jasmine-core@^2.6.4, jasmine-core@~2.6.0:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.6.4.tgz#dec926cd0a9fa287fb6db5c755fa487e74cecac5"
 
-jasmine-spec-reporter@~3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/jasmine-spec-reporter/-/jasmine-spec-reporter-3.2.0.tgz#fdbe85a80ccdd3b276746bc77fde83c1ce773eff"
+jasmine-spec-reporter@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/jasmine-spec-reporter/-/jasmine-spec-reporter-4.1.0.tgz#b8aa7584df58e4dab61acdbefb76d096aa38663f"
   dependencies:
     colors "1.1.2"
 
-jasmine@^2.5.3:
-  version "2.5.3"
-  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.5.3.tgz#5441f254e1fc2269deb1dfd93e0e57d565ff4d22"
+jasmine@^2.5.3, jasmine@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.6.0.tgz#6b22e70883e8e589d456346153b4d206ddbe217f"
   dependencies:
     exit "^0.1.2"
     glob "^7.0.6"
-    jasmine-core "~2.5.2"
+    jasmine-core "~2.6.0"
 
 jasminewd2@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.0.0.tgz#10aacd2c588c1ceb6a0b849f1a7f3f959f777c91"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.1.0.tgz#da595275d1ae631de736ac0a7c7d85c9f73ef652"
 
 jju@^1.1.0:
   version "1.3.0"
@@ -3512,7 +3921,11 @@ join-path@^1.0.0:
     url-join "0.0.1"
     valid-url "^1"
 
-js-base64@^2.1.5, js-base64@^2.1.9:
+jpeg-js@0.1.2, jpeg-js@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.1.2.tgz#135b992c0575c985cfa0f494a3227ed238583ece"
+
+js-base64@^2.1.5, js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
 
@@ -3520,7 +3933,14 @@ js-tokens@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
 
-js-yaml@^3.5.1, js-yaml@^3.7.0, js-yaml@~3.7.0:
+js-yaml@^3.4.3, js-yaml@^3.5.1, js-yaml@^3.7.0:
+  version "3.8.4"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.8.4.tgz#520b4564f86573ba96662af85a8cafa7b4b5a6f6"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^3.1.1"
+
+js-yaml@~3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
   dependencies:
@@ -3587,7 +4007,7 @@ json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
   dependencies:
     jsonify "~0.0.0"
 
-json-stringify-safe@~5.0.1:
+json-stringify-safe@5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
 
@@ -3595,7 +4015,7 @@ json3@3.3.2, json3@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
 
-json5@^0.5.0:
+json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
 
@@ -3610,8 +4030,8 @@ jsonify@~0.0.0:
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
 
 jsonparse@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.0.tgz#85fc245b1d9259acc6941960b905adf64e7de0e8"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
 
 jsonpointer@^4.0.0:
   version "4.0.1"
@@ -3630,9 +4050,10 @@ jsonwebtoken@^5.4.0:
     xtend "^4.0.1"
 
 jsprim@^1.2.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.3.1.tgz#2a7256f70412a29ee3670aaca625994c4dcff252"
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.0.tgz#a3b87e40298d8c380552d8cc7628a0bb95a22918"
   dependencies:
+    assert-plus "1.0.0"
     extsprintf "1.0.2"
     json-schema "0.2.3"
     verror "1.3.6"
@@ -3654,24 +4075,25 @@ jws@^3.0.0:
     jwa "^1.1.4"
     safe-buffer "^5.0.1"
 
-karma-chrome-launcher@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-2.0.0.tgz#c2790c5a32b15577d0fff5a4d5a2703b3b439c25"
+karma-chrome-launcher@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-2.1.1.tgz#216879c68ac04d8d5140e99619ba04b59afd46cf"
   dependencies:
     fs-access "^1.0.0"
     which "^1.2.1"
 
-karma-cli@~1.0.1:
+karma-cli@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/karma-cli/-/karma-cli-1.0.1.tgz#ae6c3c58a313a1d00b45164c455b9b86ce17f960"
   dependencies:
     resolve "^1.1.6"
 
-karma-coverage-istanbul-reporter@^0.2.0:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-0.2.3.tgz#11f1be9cfa93755a77bac39ab16e315a7100b5c5"
+karma-coverage-istanbul-reporter@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-1.3.0.tgz#d142cd9c55731c9e363ef7374e8ef1a31bebfadb"
   dependencies:
-    istanbul-api "^1.1.1"
+    istanbul-api "^1.1.8"
+    minimatch "^3.0.4"
 
 karma-jasmine-html-reporter@^0.2.2:
   version "0.2.2"
@@ -3679,36 +4101,20 @@ karma-jasmine-html-reporter@^0.2.2:
   dependencies:
     karma-jasmine "^1.0.2"
 
-karma-jasmine@^1.0.2, karma-jasmine@~1.1.0:
+karma-jasmine@^1.0.2, karma-jasmine@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/karma-jasmine/-/karma-jasmine-1.1.0.tgz#22e4c06bf9a182e5294d1f705e3733811b810acf"
 
-karma-sourcemap-loader@^0.3.7:
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.7.tgz#91322c77f8f13d46fed062b042e1009d4c4505d8"
-  dependencies:
-    graceful-fs "^4.1.2"
-
-karma-webpack@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-2.0.2.tgz#bd38350af5645c9644090770939ebe7ce726f864"
-  dependencies:
-    async "~0.9.0"
-    loader-utils "^0.2.5"
-    lodash "^3.8.0"
-    source-map "^0.1.41"
-    webpack-dev-middleware "^1.0.11"
-
-karma@~1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/karma/-/karma-1.4.1.tgz#41981a71d54237606b0a3ea8c58c90773f41650e"
+karma@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-1.7.0.tgz#6f7a1a406446fa2e187ec95398698f4cee476269"
   dependencies:
     bluebird "^3.3.0"
-    body-parser "^1.12.4"
+    body-parser "^1.16.1"
     chokidar "^1.4.1"
     colors "^1.1.0"
     combine-lists "^1.0.0"
-    connect "^3.3.5"
+    connect "^3.6.0"
     core-js "^2.2.0"
     di "^0.0.1"
     dom-serialize "^2.2.0"
@@ -3720,27 +4126,33 @@ karma@~1.4.1:
     lodash "^3.8.0"
     log4js "^0.6.31"
     mime "^1.3.4"
-    minimatch "^3.0.0"
+    minimatch "^3.0.2"
     optimist "^0.6.1"
     qjobs "^1.1.4"
     range-parser "^1.2.0"
-    rimraf "^2.3.3"
+    rimraf "^2.6.0"
     safe-buffer "^5.0.1"
-    socket.io "1.7.2"
+    socket.io "1.7.3"
     source-map "^0.5.3"
-    tmp "0.0.28"
-    useragent "^2.1.10"
+    tmp "0.0.31"
+    useragent "^2.1.12"
 
 kebab-case@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/kebab-case/-/kebab-case-1.0.0.tgz#3f9e4990adcad0c686c0e701f7645868f75f91eb"
 
-kind-of@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
+kind-of@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
   dependencies:
     is-buffer "^1.0.2"
 
+kind-of@^3.0.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.0.tgz#b58abe4d5c044ad33726a8c1525b48cf891bff07"
+  dependencies:
+    is-buffer "^1.1.5"
+
 klaw@^1.0.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
@@ -3765,6 +4177,10 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
+lazy-cache@^0.2.3:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
+
 lazy-cache@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
@@ -3777,6 +4193,12 @@ lazy-req@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-2.0.0.tgz#c9450a363ecdda2e6f0c70132ad4f37f8f06f2b4"
 
+lazystream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4"
+  dependencies:
+    readable-stream "^2.0.5"
+
 lazystream@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-0.1.0.tgz#1b25d63c772a4c20f0a5ed0a9d77f484b6e16920"
@@ -3789,11 +4211,13 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-less-loader@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-2.2.3.tgz#b6d8f8139c8493df09d992a93a00734b08f84528"
+less-loader@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.0.3.tgz#d1e6462ca2f090c11248455e14b8dda4616d0521"
   dependencies:
-    loader-utils "^0.2.5"
+    clone "^2.1.1"
+    loader-utils "^1.1.0"
+    pify "^2.3.0"
 
 less@^2.7.2:
   version "2.7.2"
@@ -3815,6 +4239,36 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+license-webpack-plugin@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-0.4.3.tgz#f9d88d4ebc04407a0061e8ccac26571f88e51a16"
+  dependencies:
+    object-assign "^4.1.0"
+
+lighthouse@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lighthouse/-/lighthouse-2.1.0.tgz#caa6a3993e3b22098f82f2f745e16cda84c71aa3"
+  dependencies:
+    axe-core "2.2.1"
+    chrome-devtools-frontend "1.0.422034"
+    debug "2.2.0"
+    devtools-timeline-model "1.1.6"
+    gl-matrix "2.3.2"
+    handlebars "4.0.5"
+    jpeg-js "0.1.2"
+    json-stringify-safe "5.0.1"
+    marked "0.3.6"
+    metaviewport-parser "0.0.1"
+    mkdirp "0.5.1"
+    opn "4.0.2"
+    rimraf "2.2.8"
+    semver "5.3.0"
+    speedline "1.2.0"
+    update-notifier "^2.1.0"
+    whatwg-url "4.0.0"
+    ws "1.1.1"
+    yargs "3.32.0"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -3829,7 +4283,7 @@ loader-runner@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
 
-loader-utils@0.2.x, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@^0.2.9, loader-utils@~0.2.2, loader-utils@~0.2.5:
+loader-utils@^0.2.16, loader-utils@~0.2.2:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   dependencies:
@@ -3838,9 +4292,9 @@ loader-utils@0.2.x, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.0.2.tgz#a9f923c865a974623391a8602d031137fad74830"
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   dependencies:
     big.js "^3.1.3"
     emojis-list "^2.0.0"
@@ -3860,7 +4314,7 @@ lodash._shimkeys@~2.4.1:
   dependencies:
     lodash._objecttypes "~2.4.1"
 
-lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.2.0:
+lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
 
@@ -3868,7 +4322,7 @@ lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
 
-lodash.clonedeep@^4.3.2:
+lodash.clonedeep@^4.3.2, lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
@@ -3898,7 +4352,7 @@ lodash.keys@~2.4.1:
     lodash._shimkeys "~2.4.1"
     lodash.isobject "~2.4.1"
 
-lodash.memoize@^4.1.0:
+lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
@@ -3906,7 +4360,11 @@ lodash.mergewith@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
 
-lodash.uniq@^4.3.0:
+lodash.tail@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
+
+lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
@@ -3924,7 +4382,7 @@ lodash@^3.10.0, lodash@^3.10.1, lodash@^3.8.0, lodash@~3.10.0, lodash@~3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.11.1, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.11.1, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.5.1, lodash@^4.6.1, lodash@^4.8.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -3953,7 +4411,7 @@ loose-envify@^1.0.0:
   dependencies:
     js-tokens "^3.0.0"
 
-loud-rejection@^1.0.0:
+loud-rejection@^1.0.0, loud-rejection@^1.3.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
   dependencies:
@@ -3967,8 +4425,8 @@ lower-case-first@^1.0.0:
     lower-case "^1.1.2"
 
 lower-case@^1.1.0, lower-case@^1.1.1, lower-case@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.3.tgz#c92393d976793eee5ba4edb583cf8eae35bd9bfb"
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
 
 lowercase-keys@^1.0.0:
   version "1.0.0"
@@ -3985,19 +4443,29 @@ lru-cache@^4.0.0, lru-cache@^4.0.1:
     pseudomap "^1.0.1"
     yallist "^2.0.0"
 
+lunr@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.1.0.tgz#5e0308137de2c720a1653f28fedd4edc14d2a9a5"
+
 macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
 
-magic-string@^0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.19.0.tgz#198948217254e3e0b93080e01146b7c73b2a06b2"
+magic-string@^0.19.0, magic-string@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.19.1.tgz#14d768013caf2ec8fdea16a49af82fc377e75201"
   dependencies:
     vlq "^0.2.1"
 
+make-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.0.0.tgz#97a011751e91dd87cfadef58832ebb04936de978"
+  dependencies:
+    pify "^2.3.0"
+
 make-error@^1.1.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.2.1.tgz#9a6dfb4844423b9f145806728d05c6e935670e75"
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.2.3.tgz#6c4402df732e0977ac6faf754a5074b3d2b1d19d"
 
 map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
@@ -4011,7 +4479,7 @@ markdown-table@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.0.tgz#1f5ae61659ced8808d882554c32e8b3f38dd1143"
 
-marked@^0.3.2:
+marked@0.3.6, marked@^0.3.2:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
 
@@ -4022,8 +4490,8 @@ matcher-collection@^1.0.0:
     minimatch "^3.0.2"
 
 math-expression-evaluator@^1.2.14:
-  version "1.2.16"
-  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"
+  version "1.2.17"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
 
 mdast-util-compact@^1.0.0:
   version "1.0.0"
@@ -4060,7 +4528,7 @@ media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
 
-memory-fs@^0.4.0, memory-fs@~0.4.1:
+memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
   dependencies:
@@ -4086,6 +4554,10 @@ merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
 
+metaviewport-parser@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/metaviewport-parser/-/metaviewport-parser-0.0.1.tgz#9b28179659b76ff9d21de84ae25583257909b206"
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -4115,24 +4587,24 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-"mime-db@>= 1.24.0 < 2", mime-db@~1.26.0:
-  version "1.26.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.26.0.tgz#eaffcd0e4fc6935cf8134da246e2e6c35305adff"
+"mime-db@>= 1.27.0 < 2", mime-db@~1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.27.0.tgz#820f572296bbd20ec25ed55e5b5de869e5436eb1"
 
-mime-types@^2.0.4, mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.13, mime-types@~2.1.7:
-  version "2.1.14"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.14.tgz#f7ef7d97583fcaf3b7d282b6f8b5679dab1e94ee"
+mime-types@^2.0.4, mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.7:
+  version "2.1.15"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.15.tgz#a4ebf5064094569237b8cf70046776d09fc92aed"
   dependencies:
-    mime-db "~1.26.0"
+    mime-db "~1.27.0"
 
-mime@1.2.x:
-  version "1.2.11"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.11.tgz#58203eed86e3a5ef17aed2b7d9ebd47f0a60dd10"
-
-mime@1.3.4, mime@^1.2.11, mime@^1.3.4:
+mime@1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
 
+mime@1.3.x, mime@^1.2.11, mime@^1.3.4:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
+
 mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
@@ -4141,13 +4613,17 @@ minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
 
-"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@~3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
-  dependencies:
-    brace-expansion "^1.0.0"
+minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
 
-minimist@0.0.8, minimist@~0.0.1:
+"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
@@ -4155,13 +4631,24 @@ minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+
+mixin-object@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
+  dependencies:
+    for-in "^0.1.3"
+    is-extendable "^0.1.1"
+
 mkdirp-promise@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/mkdirp-promise/-/mkdirp-promise-5.0.1.tgz#e9b8f68e552c68a9c1713b84883f7a1dd039b8a1"
   dependencies:
     mkdirp "*"
 
-mkdirp@*, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@*, mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
@@ -4181,10 +4668,18 @@ ms@0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
 
-ms@0.7.2, ms@^0.7.1:
+ms@0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
 
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+ms@^0.7.1:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.3.tgz#708155a5e44e33f5fd0fc53e81d0d40a91be1fff"
+
 mute-stream@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
@@ -4194,8 +4689,8 @@ mute-stream@0.0.7:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
 nan@^2.3.0, nan@^2.3.2:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.1.tgz#d5b01691253326a97a2bbee9e61c55d8d60351e2"
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45"
 
 nash@^2.0.0:
   version "2.0.4"
@@ -4226,6 +4721,24 @@ nested-error-stacks@^1.0.0:
   dependencies:
     inherits "~2.0.1"
 
+ng-pwa-tools@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/ng-pwa-tools/-/ng-pwa-tools-0.0.10.tgz#ffc13db22555ffb5f77356a8ae5e855c6f40eb1d"
+  dependencies:
+    "@types/sha1" "^1.1.0"
+    minimist "^1.2.0"
+    sha1 "^1.1.1"
+    ts-node "^3.0.2"
+
+ngo@angular/ngo:
+  version "0.0.11"
+  resolved "https://codeload.github.com/angular/ngo/tar.gz/09980bf1006a20963a7273467c20d28216035d16"
+  dependencies:
+    loader-utils "^1.1.0"
+    magic-string "^0.19.1"
+    source-map "^0.5.6"
+    typescript "^2.3.3"
+
 no-case@^2.2.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"
@@ -4233,8 +4746,8 @@ no-case@^2.2.0:
     lower-case "^1.1.1"
 
 node-gyp@^3.3.1:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.5.0.tgz#a8fe5e611d079ec16348a3eb960e78e11c85274a"
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.1.tgz#19561067ff185464aded478212681f47fd578cbc"
   dependencies:
     fstream "^1.0.0"
     glob "^7.0.3"
@@ -4246,7 +4759,7 @@ node-gyp@^3.3.1:
     osenv "0"
     request "2"
     rimraf "2"
-    semver "2.x || 3.x || 4 || 5"
+    semver "~5.3.0"
     tar "^2.0.0"
     which "1"
 
@@ -4291,22 +4804,22 @@ node-modules-path@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-modules-path/-/node-modules-path-1.0.1.tgz#40096b08ce7ad0ea14680863af449c7c75a5d1c8"
 
 node-pre-gyp@^0.6.29:
-  version "0.6.33"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.33.tgz#640ac55198f6a925972e0c16c4ac26a034d5ecc9"
+  version "0.6.34"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.34.tgz#94ad1c798a11d7fc67381b50d47f8cc18d9799f7"
   dependencies:
-    mkdirp "~0.5.1"
-    nopt "~3.0.6"
-    npmlog "^4.0.1"
-    rc "~1.1.6"
-    request "^2.79.0"
-    rimraf "~2.5.4"
-    semver "~5.3.0"
-    tar "~2.2.1"
-    tar-pack "~3.3.0"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "^2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.0"
 
 node-sass@^4.3.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.0.tgz#532e37bad0ce587348c831535dbc98ea4289508b"
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.2.tgz#4012fa2bd129b1d6365117e88d9da0500d99da64"
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -4323,7 +4836,7 @@ node-sass@^4.3.0:
     nan "^2.3.2"
     node-gyp "^3.3.1"
     npmlog "^4.0.0"
-    request "^2.61.0"
+    request "^2.79.0"
     sass-graph "^2.1.1"
     stdout-stream "^1.4.0"
 
@@ -4332,17 +4845,10 @@ node-status-codes@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
 
 node-uuid@1.x:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f"
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.8.tgz#b040eb0923968afabf8d32fb1f17f1167fdab907"
 
-nomnom@*:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.8.1.tgz#2151f722472ba79e50a76fc125bb8c8f2e4dc2a7"
-  dependencies:
-    chalk "~0.4.0"
-    underscore "~1.6.0"
-
-"nopt@2 || 3", nopt@~3.0.6:
+"nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
   dependencies:
@@ -4356,17 +4862,19 @@ nopt@^4.0.1:
     osenv "^0.1.4"
 
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.5.tgz#8d924f142960e1777e7ffe170543631cc7cb02df"
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.8.tgz#d819eda2a9dedbd1ffa563ea4071d936782295bb"
   dependencies:
     hosted-git-info "^2.1.4"
     is-builtin-module "^1.0.0"
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.0.1.tgz#47886ac1662760d4261b7d979d241709d3ce3f7a"
+normalize-path@^2.0.0, normalize-path@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  dependencies:
+    remove-trailing-separator "^1.0.1"
 
 normalize-range@^0.1.2:
   version "0.1.2"
@@ -4377,8 +4885,8 @@ normalize-uri@^1.0.0:
   resolved "https://registry.yarnpkg.com/normalize-uri/-/normalize-uri-1.1.0.tgz#01fb440c7fd059b9d9be8645aac14341efd059dd"
 
 normalize-url@^1.4.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.0.tgz#c2bb50035edee62cd81edb2d45da68dc25e3423e"
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
   dependencies:
     object-assign "^4.0.1"
     prepend-http "^1.0.0"
@@ -4391,13 +4899,13 @@ npm-run-path@^1.0.0:
   dependencies:
     path-key "^1.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.0.tgz#dc59bee85f64f00ed424efb2af0783df25d1c0b5"
   dependencies:
     are-we-there-yet "~1.1.2"
     console-control-strings "~1.1.0"
-    gauge "~2.7.1"
+    gauge "~2.7.3"
     set-blocking "~2.0.0"
 
 nth-check@~1.0.1:
@@ -4418,13 +4926,15 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
-nunjucks@^2.4.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/nunjucks/-/nunjucks-2.5.2.tgz#ea7d346e785b8a4874666c3cca9e18c577fba22c"
+nunjucks@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/nunjucks/-/nunjucks-3.0.1.tgz#4de74a3e550baf6fa3370323f3d1c7c2a86bdc4d"
   dependencies:
+    a-sync-waterfall "^1.0.0"
     asap "^2.0.3"
-    chokidar "^1.6.0"
     yargs "^3.32.0"
+  optionalDependencies:
+    chokidar "^1.6.0"
 
 "nwmatcher@>= 1.3.9 < 2.0.0":
   version "1.3.9"
@@ -4442,7 +4952,7 @@ object-assign@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -4475,13 +4985,13 @@ on-headers@^1.0.0, on-headers@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
 
-once@^1.3.0, once@^1.4.0:
+once@^1.3.0, once@^1.3.3, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   dependencies:
     wrappy "1"
 
-once@~1.3.0, once@~1.3.3:
+once@~1.3.0:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
   dependencies:
@@ -4492,8 +5002,8 @@ onetime@^1.0.0:
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
 
 onetime@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.0.tgz#52aa8110e52fc5126ffc667bd8ec21c2ed209ce6"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
   dependencies:
     mimic-fn "^1.0.0"
 
@@ -4501,6 +5011,10 @@ open@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc"
 
+opener@~1.4.0:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
+
 opn@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
@@ -4508,7 +5022,7 @@ opn@4.0.2:
     object-assign "^4.0.1"
     pinkie-promise "^2.0.0"
 
-optimist@^0.6.1, optimist@~0.6.0, optimist@~0.6.1:
+optimist@0.6.x, optimist@^0.6.1, optimist@~0.6.0, optimist@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
   dependencies:
@@ -4536,6 +5050,15 @@ options@>=0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
 
+ora@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-0.2.3.tgz#37527d220adcd53c39b73571d754156d5db657a4"
+  dependencies:
+    chalk "^1.1.1"
+    cli-cursor "^1.0.2"
+    cli-spinners "^0.1.2"
+    object-assign "^4.0.1"
+
 original@>=0.0.5:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
@@ -4546,7 +5069,7 @@ os-browserify@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
 
-os-homedir@^1.0.0:
+os-homedir@^1.0.0, os-homedir@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
 
@@ -4584,8 +5107,8 @@ package-json@^2.0.0:
     semver "^5.1.0"
 
 package-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.0.tgz#f3c9dc8738f5b59304d54d2cfb3f91d08fdd7998"
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
   dependencies:
     got "^6.7.1"
     registry-auth-token "^3.0.1"
@@ -4597,14 +5120,14 @@ pako@~0.2.0:
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
 
 param-case@2.1.x, param-case@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.0.tgz#2619f90fd6c829ed0b958f1c84ed03a745a6d70a"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
   dependencies:
     no-case "^2.2.0"
 
 parse-asn1@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.0.0.tgz#35060f6d5015d37628c770f4e091a0b5a278bc23"
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
   dependencies:
     asn1.js "^4.0.0"
     browserify-aes "^1.0.0"
@@ -4643,6 +5166,10 @@ parse5@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
 
+parse5@^2.1.5:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-2.2.3.tgz#0c4fc41c1000c5e6b93d48b03f8083837834e9f6"
+
 parse5@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.2.tgz#05eff57f0ef4577fb144a79f8b9a967a6cc44510"
@@ -4672,8 +5199,8 @@ parseurl@~1.3.1:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
 
 pascal-case@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-2.0.0.tgz#39c248bde5a8dc02d5160696bdb01e044d016ee1"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-2.0.1.tgz#2d578d3455f660da65eca18ef95b4e0de912761e"
   dependencies:
     camel-case "^3.0.0"
     upper-case-first "^1.1.0"
@@ -4683,8 +5210,8 @@ path-browserify@0.0.0:
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
 
 path-case@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/path-case/-/path-case-2.1.0.tgz#5ac491de642936e5dfe0e18d16c461b8be8cf073"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-2.1.1.tgz#94b8037c372d3fe2906e465bb45e25d226e8eea5"
   dependencies:
     no-case "^2.2.0"
 
@@ -4729,12 +5256,20 @@ path-type@^1.0.0:
     pinkie-promise "^2.0.0"
 
 pbkdf2@^3.0.3:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.9.tgz#f2c4b25a600058b3c3773c086c37dbbee1ffe693"
+  version "3.0.12"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.12.tgz#be36785c5067ea48d806ff923288c5f750b6b8a2"
   dependencies:
-    create-hmac "^1.1.2"
+    create-hash "^1.1.2"
+    create-hmac "^1.1.4"
+    ripemd160 "^2.0.1"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
 
-pify@^2.0.0:
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
@@ -4756,7 +5291,7 @@ pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
 
-portfinder@^0.4.0:
+portfinder@0.4.x, portfinder@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-0.4.0.tgz#a3ffadffafe4fb98e0601a85eda27c27ce84ca1e"
   dependencies:
@@ -4801,8 +5336,8 @@ postcss-discard-comments@^2.0.4:
     postcss "^5.0.14"
 
 postcss-discard-duplicates@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.0.2.tgz#02be520e91571ffb10738766a981d5770989bb32"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
   dependencies:
     postcss "^5.0.4"
 
@@ -4832,12 +5367,37 @@ postcss-filter-plugins@^2.0.0:
     postcss "^5.0.4"
     uniqid "^4.0.0"
 
-postcss-loader@^0.13.0:
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-0.13.0.tgz#72fdaf0d29444df77d3751ce4e69dc40bc99ed85"
+postcss-load-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
   dependencies:
-    loader-utils "^0.2.15"
-    postcss "^5.2.0"
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.2.0"
+    postcss-load-plugins "^2.3.0"
+
+postcss-load-options@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
+  dependencies:
+    cosmiconfig "^2.1.1"
+    object-assign "^4.1.0"
+
+postcss-loader@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.3.3.tgz#a621ea1fa29062a83972a46f54486771301916eb"
+  dependencies:
+    loader-utils "^1.0.2"
+    object-assign "^4.1.1"
+    postcss "^5.2.15"
+    postcss-load-config "^1.2.0"
 
 postcss-merge-idents@^2.1.5:
   version "2.1.7"
@@ -4971,8 +5531,8 @@ postcss-reduce-transforms@^1.0.3:
     postcss-value-parser "^3.0.1"
 
 postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.2.tgz#3d70f5adda130da51c7c0c2fc023f56b1374fe08"
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
   dependencies:
     flatten "^1.0.2"
     indexes-of "^1.0.1"
@@ -5019,9 +5579,9 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.0, postcss@^5.2.14:
-  version "5.2.14"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.14.tgz#47b4fbde363fd4f81e547f7e0e43d6d300267330"
+postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.15, postcss@^5.2.16:
+  version "5.2.17"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b"
   dependencies:
     chalk "^1.1.3"
     js-base64 "^2.1.9"
@@ -5041,10 +5601,10 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
 pretty-error@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.0.2.tgz#a7db19cbb529ca9f0af3d3a2f77d5caf8e5dec23"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.0.tgz#87f4e9d706a24c87d6cbee9fabec001fcf8c75d8"
   dependencies:
-    renderkid "~2.0.0"
+    renderkid "^2.0.1"
     utila "~0.4"
 
 process-nextick-args@~1.0.6:
@@ -5052,8 +5612,8 @@ process-nextick-args@~1.0.6:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
 
 process@^0.11.0:
-  version "0.11.9"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
 progress@^1.1.8:
   version "1.1.8"
@@ -5065,7 +5625,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-property-information@^3.1.0:
+property-information@^3.0.0, property-information@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-3.1.0.tgz#1581bf8a445dfbfef759775a86700e8dda18b4a1"
 
@@ -5090,11 +5650,11 @@ protractor@~5.1.0:
     webdriver-manager "^12.0.1"
 
 proxy-addr@~1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.3.tgz#dc97502f5722e888467b3fa2297a7b1ff47df074"
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
   dependencies:
     forwarded "~0.1.0"
-    ipaddr.js "1.2.0"
+    ipaddr.js "1.3.0"
 
 prr@~0.0.0:
   version "0.0.0"
@@ -5130,25 +5690,21 @@ qjobs@^1.1.4:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"
 
-qs@6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
-
-qs@6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.1.tgz#ce03c5ff0935bc1d9d69a9f14cbd18e568d67625"
+qs@6.4.0, qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
 qs@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-1.1.0.tgz#2845cd9df462b2db28a90370e142d492c5a45dde"
 
-qs@~6.3.0:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.1.tgz#918c0b3bcd36679772baf135b1acb4c1651ed79d"
+qs@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404"
 
 query-string@^4.1.0:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.2.tgz#ec0fd765f58a50031a3968c2431386f8947a5cdd"
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
   dependencies:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
@@ -5165,6 +5721,10 @@ querystringify@0.0.x:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c"
 
+querystringify@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
+
 randomatic@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
@@ -5192,9 +5752,9 @@ raw-loader@^0.5.1, raw-loader@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
 
-rc@^1.0.1, rc@^1.1.6, rc@~1.1.6:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.7.tgz#c5ea564bb07aff9fd3a5b32e906c1d3a65940fea"
+rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
   dependencies:
     deep-extend "~0.4.0"
     ini "~1.3.0"
@@ -5232,16 +5792,16 @@ readable-stream@1.0, readable-stream@~1.0.2, readable-stream@~1.0.24, readable-s
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^2.0.0, "readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.1.0, readable-stream@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.2.tgz#a9e6fec3c7dda85f8bb1b3ba7028604556fc825e"
+readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2, readable-stream@^2.2.6:
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.9.tgz#cf78ec6f4a6d1eb43d26488cac97f042e74b7fc8"
   dependencies:
-    buffer-shims "^1.0.0"
+    buffer-shims "~1.0.0"
     core-util-is "~1.0.0"
     inherits "~2.0.1"
     isarray "~1.0.0"
     process-nextick-args "~1.0.6"
-    string_decoder "~0.10.x"
+    string_decoder "~1.0.0"
     util-deprecate "~1.0.1"
 
 readable-stream@~2.0.0:
@@ -5255,18 +5815,6 @@ readable-stream@~2.0.0:
     string_decoder "~0.10.x"
     util-deprecate "~1.0.1"
 
-readable-stream@~2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
-  dependencies:
-    buffer-shims "^1.0.0"
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
-    string_decoder "~0.10.x"
-    util-deprecate "~1.0.1"
-
 readdirp@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
@@ -5312,16 +5860,16 @@ reduce-function-call@^1.0.1:
     balanced-match "^0.4.2"
 
 reflect-metadata@^0.1.2:
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.9.tgz#987238dc87a516895fe457f130435ffbd763a4d4"
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.10.tgz#b4f83704416acad89988c9b15635d47e03b9344a"
 
 regenerate@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
 
 regenerator-runtime@^0.10.0:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
 
 regex-cache@^0.4.2:
   version "0.4.3"
@@ -5339,10 +5887,11 @@ regexpu-core@^1.0.0:
     regjsparser "^0.1.4"
 
 registry-auth-token@^3.0.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.1.0.tgz#997c08256e0c7999837b90e944db39d8a790276b"
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.1.tgz#fb0d3289ee0d9ada2cbb52af5dfe66cb070d3006"
   dependencies:
     rc "^1.1.6"
+    safe-buffer "^5.0.1"
 
 registry-url@^3.0.0, registry-url@^3.0.3:
   version "3.1.0"
@@ -5360,6 +5909,48 @@ regjsparser@^0.1.4:
   dependencies:
     jsesc "~0.5.0"
 
+rehype-autolink-headings@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-autolink-headings/-/rehype-autolink-headings-2.0.0.tgz#105ae3f44ee78f9cd618f16eb0aea3bc61582f00"
+  dependencies:
+    hast-util-has-property "^1.0.0"
+    hast-util-is-element "^1.0.0"
+    unist-util-visit "^1.1.0"
+    xtend "^4.0.1"
+
+rehype-parse@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-3.1.0.tgz#7f5227a597a3f39fc4b938646161539c444ee728"
+  dependencies:
+    hast-util-from-parse5 "^1.0.0"
+    parse5 "^2.1.5"
+    xtend "^4.0.1"
+
+rehype-slug@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-slug/-/rehype-slug-2.0.0.tgz#b52f6c69faefc61420cb9ea8ba268e48531c61b9"
+  dependencies:
+    github-slugger "^1.1.1"
+    hast-util-has-property "^1.0.0"
+    hast-util-is-element "^1.0.0"
+    hast-util-to-string "^1.0.0"
+    unist-util-visit "^1.1.0"
+
+rehype-stringify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-3.0.0.tgz#9fef0868213c2dce2f780b76f3d0488c85e819eb"
+  dependencies:
+    hast-util-to-html "^3.0.0"
+    xtend "^4.0.1"
+
+rehype@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/rehype/-/rehype-4.0.0.tgz#2ed92dd269bfa549f7108fd2c4f6f626d27c7be4"
+  dependencies:
+    rehype-parse "^3.0.0"
+    rehype-stringify "^3.0.0"
+    unified "^6.0.0"
+
 relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
@@ -5374,8 +5965,8 @@ remark-html@^6.0.0:
     xtend "^4.0.1"
 
 remark-parse@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-3.0.0.tgz#f078c8c9976efb0f2afd011c79f30708354593b1"
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-3.0.1.tgz#1b9f841a44d8f4fbf2246850265459a4eb354c80"
   dependencies:
     collapse-white-space "^1.0.2"
     has "^1.0.1"
@@ -5395,8 +5986,8 @@ remark-parse@^3.0.0:
     xtend "^4.0.1"
 
 remark-stringify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-3.0.0.tgz#f1720893a3e7c845824d95bb573d628d1346ba2a"
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-3.0.1.tgz#79242bebe0a752081b5809516fa0c06edec069cf"
   dependencies:
     ccount "^1.0.0"
     is-alphanumeric "^1.0.0"
@@ -5414,16 +6005,20 @@ remark-stringify@^3.0.0:
     xtend "^4.0.1"
 
 remark@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/remark/-/remark-7.0.0.tgz#ce9c788c390d98d9a67cb7738e98246732e79144"
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/remark/-/remark-7.0.1.tgz#a5de4dacfabf0f60a49826ef24c479807f904bfb"
   dependencies:
     remark-parse "^3.0.0"
     remark-stringify "^3.0.0"
     unified "^6.0.0"
 
-renderkid@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.0.tgz#1859753e7a5adbf35443aba0d4e4579e78abee85"
+remove-trailing-separator@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.0.1.tgz#615ebb96af559552d4bf4057c8436d486ab63cc4"
+
+renderkid@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.1.tgz#898cabfc8bede4b7b91135a3ffd323e58c0db319"
   dependencies:
     css-select "^1.1.0"
     dom-converter "~0.1"
@@ -5459,18 +6054,18 @@ replace-ext@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
 
-request@2, request@2.x, request@^2.58.0, request@^2.61.0, request@^2.72.0, request@^2.78.0, request@^2.79.0:
-  version "2.79.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+request@2, request@2.x, request@^2.58.0, request@^2.72.0, request@^2.78.0, request@^2.79.0, request@^2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
   dependencies:
     aws-sign2 "~0.6.0"
     aws4 "^1.2.1"
-    caseless "~0.11.0"
+    caseless "~0.12.0"
     combined-stream "~1.0.5"
     extend "~3.0.0"
     forever-agent "~0.6.1"
     form-data "~2.1.1"
-    har-validator "~2.0.6"
+    har-validator "~4.2.1"
     hawk "~3.1.3"
     http-signature "~1.1.0"
     is-typedarray "~1.0.0"
@@ -5478,16 +6073,22 @@ request@2, request@2.x, request@^2.58.0, request@^2.61.0, request@^2.72.0, reque
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.7"
     oauth-sign "~0.8.1"
-    qs "~6.3.0"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
     stringstream "~0.0.4"
     tough-cookie "~2.3.0"
-    tunnel-agent "~0.4.1"
+    tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
 
+require-from-string@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
@@ -5507,9 +6108,15 @@ resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
 
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
 resolve@^1.1.6, resolve@^1.1.7:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c"
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
+  dependencies:
+    path-parse "^1.0.5"
 
 restore-cursor@^1.0.1:
   version "1.0.1"
@@ -5525,54 +6132,44 @@ restore-cursor@^2.0.0:
     onetime "^2.0.0"
     signal-exit "^3.0.2"
 
-"rho@https://github.com/petebacondarwin/rho#master":
-  version "0.4.0"
-  resolved "https://github.com/petebacondarwin/rho#c7dbd35fce17111de5131b8035b70e4f8c966362"
-  dependencies:
-    html "*"
-    nomnom "*"
-
 right-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.2, rimraf@^2.5.3, rimraf@^2.5.4, rimraf@^2.6.1:
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.3, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
   dependencies:
     glob "^7.0.5"
 
-rimraf@~2.2.6:
+rimraf@2.2.8, rimraf@~2.2.6:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
 
-rimraf@~2.5.1, rimraf@~2.5.4:
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
   dependencies:
-    glob "^7.0.5"
-
-ripemd160@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"
+    hash-base "^2.0.0"
+    inherits "^2.0.1"
 
 router@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/router/-/router-1.2.0.tgz#e93d4b8b9e4d2f727d24f699622cf419aa310ecd"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/router/-/router-1.3.0.tgz#15b24075c1de4a3d3f39808c5d7344a1564417c8"
   dependencies:
     array-flatten "2.1.1"
     debug "2.6.1"
     methods "~1.1.2"
     parseurl "~1.3.1"
     path-to-regexp "0.1.7"
-    setprototypeof "1.0.2"
+    setprototypeof "1.0.3"
     utils-merge "1.0.0"
 
 rsvp@^3.0.17, rsvp@^3.0.18, rsvp@^3.1.0:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.3.3.tgz#34633caaf8bc66ceff4be3c2e1dffd032538a813"
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.5.0.tgz#a62c573a4ae4e1dfd0697ebc6242e79c681eaa34"
 
 run-async@^0.1.0:
   version "0.1.0"
@@ -5590,13 +6187,17 @@ rx-lite@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
 
+rx@2.3.24:
+  version "2.3.24"
+  resolved "https://registry.yarnpkg.com/rx/-/rx-2.3.24.tgz#14f950a4217d7e35daa71bbcbe58eff68ea4b2b7"
+
 rx@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
 
 rxjs@^5.0.1, rxjs@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.2.0.tgz#db537de8767c05fa73721587a29e0085307d318b"
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.0.tgz#a7db14ab157f9d7aac6a56e655e7a3860d39bf26"
   dependencies:
     symbol-observable "^1.0.1"
 
@@ -5604,21 +6205,37 @@ safe-buffer@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
 
+safefs@^3.1.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/safefs/-/safefs-3.2.2.tgz#8170c1444d7038e08caea05a374fae2fa349e15c"
+  dependencies:
+    graceful-fs "*"
+
+safefs@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/safefs/-/safefs-4.1.0.tgz#f82aeb4bdd7ae51f653eb20f6728b3058c8d6445"
+  dependencies:
+    editions "^1.1.1"
+    graceful-fs "^4.1.4"
+
 sass-graph@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.1.2.tgz#965104be23e8103cb7e5f710df65935b317da57b"
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.3.tgz#2ba9f170f6cafed5b51665abe13cf319c9269c31"
   dependencies:
     glob "^7.0.0"
     lodash "^4.0.0"
-    yargs "^4.7.1"
+    scss-tokenizer "^0.2.3"
+    yargs "^6.6.0"
 
-sass-loader@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-4.1.1.tgz#79ef9468cf0bf646c29529e1f2cba6bd6e51c7bc"
+sass-loader@^6.0.3:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.5.tgz#a847910f36442aa56c5985879d54eb519e24a328"
   dependencies:
-    async "^2.0.1"
-    loader-utils "^0.2.15"
-    object-assign "^4.1.0"
+    async "^2.1.5"
+    clone-deep "^0.2.4"
+    loader-utils "^1.0.1"
+    lodash.tail "^4.1.1"
+    pify "^2.3.0"
 
 saucelabs@~1.3.0:
   version "1.3.0"
@@ -5638,12 +6255,27 @@ sax@>=0.6.0, sax@^1.2.1, sax@~1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
 
+scandirectory@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/scandirectory/-/scandirectory-2.5.0.tgz#6ce03f54a090b668e3cbedbf20edf9e310593e72"
+  dependencies:
+    ignorefs "^1.0.0"
+    safefs "^3.1.2"
+    taskgroup "^4.0.5"
+
 script-loader@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/script-loader/-/script-loader-0.7.0.tgz#685dc7e7069e0dee7a92674f0ebc5b0f55baa5ec"
   dependencies:
     raw-loader "~0.5.1"
 
+scss-tokenizer@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
+  dependencies:
+    js-base64 "^2.1.8"
+    source-map "^0.4.2"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -5679,7 +6311,7 @@ semver-dsl@^1.0.1:
   dependencies:
     semver "^5.3.0"
 
-"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.2.0, semver@^5.3.0, semver@~5.3.0:
+"semver@2 || 3 || 4 || 5", semver@5.3.0, semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.2.0, semver@^5.3.0, semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
@@ -5691,18 +6323,18 @@ semver@~5.0.1:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
 
-send@0.14.2:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.14.2.tgz#39b0438b3f510be5dc6f667a11f71689368cdeef"
+send@0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.1.tgz#8a02354c26e6f5cca700065f5f0cdeba90ec7b5f"
   dependencies:
-    debug "~2.2.0"
+    debug "2.6.1"
     depd "~1.1.0"
     destroy "~1.0.4"
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
-    etag "~1.7.0"
-    fresh "0.3.0"
-    http-errors "~1.5.1"
+    etag "~1.8.0"
+    fresh "0.5.0"
+    http-errors "~1.6.1"
     mime "1.3.4"
     ms "0.7.2"
     on-finished "~2.3.0"
@@ -5710,8 +6342,8 @@ send@0.14.2:
     statuses "~1.3.1"
 
 sentence-case@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-2.1.0.tgz#d592fbed457fd1a59e3af0ee17e99f6fd70d7efd"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-2.1.1.tgz#1f6e2dda39c168bf92d13f86d4a918933f667ed4"
   dependencies:
     no-case "^2.2.0"
     upper-case-first "^1.1.2"
@@ -5728,14 +6360,14 @@ serve-index@^1.7.2:
     mime-types "~2.1.11"
     parseurl "~1.3.1"
 
-serve-static@~1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.2.tgz#2cf9889bd4435a320cc36895c9aa57bd662e6ac7"
+serve-static@1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.1.tgz#7443a965e3ced647aceb5639fa06bf4d1bbe0039"
   dependencies:
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
     parseurl "~1.3.1"
-    send "0.14.2"
+    send "0.15.1"
 
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
@@ -5753,12 +6385,42 @@ setprototypeof@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.2.tgz#81a552141ec104b88e89ce383103ad5c66564d08"
 
-sha.js@^2.3.6:
+setprototypeof@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
+
+sha.js@^2.4.0, sha.js@^2.4.8:
   version "2.4.8"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.8.tgz#37068c2c476b6baf402d14a49c67f597921f634f"
   dependencies:
     inherits "^2.0.1"
 
+sha1@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/sha1/-/sha1-1.1.1.tgz#addaa7a93168f393f19eb2b15091618e2700f848"
+  dependencies:
+    charenc ">= 0.0.1"
+    crypt ">= 0.0.1"
+
+shallow-clone@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"
+  dependencies:
+    is-extendable "^0.1.1"
+    kind-of "^2.0.1"
+    lazy-cache "^0.2.3"
+    mixin-object "^2.0.1"
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
 shelljs@^0.7.0, shelljs@^0.7.5, shelljs@^0.7.7:
   version "0.7.7"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.7.tgz#b2f5c77ef97148f4b4f6e22682e10bba8667cff1"
@@ -5772,8 +6434,8 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
 silent-error@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/silent-error/-/silent-error-1.0.1.tgz#71b7d503d1c6f94882b51b56be879b113cb4822c"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/silent-error/-/silent-error-1.1.0.tgz#2209706f1c850a9f1d10d0d840918b46f26e1bc9"
   dependencies:
     debug "^2.2.0"
 
@@ -5804,15 +6466,15 @@ socket.io-adapter@0.5.0:
     debug "2.3.3"
     socket.io-parser "2.3.1"
 
-socket.io-client@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-1.7.2.tgz#39fdb0c3dd450e321b7e40cfd83612ec533dd644"
+socket.io-client@1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-1.7.3.tgz#b30e86aa10d5ef3546601c09cde4765e381da377"
   dependencies:
     backo2 "1.0.2"
     component-bind "1.0.0"
     component-emitter "1.2.1"
     debug "2.3.3"
-    engine.io-client "1.8.2"
+    engine.io-client "1.8.3"
     has-binary "0.1.7"
     indexof "0.0.1"
     object-component "0.0.3"
@@ -5829,24 +6491,24 @@ socket.io-parser@2.3.1:
     isarray "0.0.1"
     json3 "3.3.2"
 
-socket.io@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-1.7.2.tgz#83bbbdf2e79263b378900da403e7843e05dc3b71"
+socket.io@1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-1.7.3.tgz#b8af9caba00949e568e369f1327ea9be9ea2461b"
   dependencies:
     debug "2.3.3"
-    engine.io "1.8.2"
+    engine.io "1.8.3"
     has-binary "0.1.7"
     object-assign "4.1.0"
     socket.io-adapter "0.5.0"
-    socket.io-client "1.7.2"
+    socket.io-client "1.7.3"
     socket.io-parser "2.3.1"
 
-sockjs-client@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.1.tgz#284843e9a9784d7c474b1571b3240fca9dda4bb0"
+sockjs-client@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.2.tgz#f0212a8550e4c9468c8cceaeefd2e3493c033ad5"
   dependencies:
     debug "^2.2.0"
-    eventsource "~0.1.6"
+    eventsource "0.1.6"
     faye-websocket "~0.11.0"
     inherits "^2.0.1"
     json3 "^3.3.2"
@@ -5865,25 +6527,29 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-source-list-map@^0.1.4, source-list-map@~0.1.7:
+source-list-map@^0.1.7, source-list-map@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
 
-source-map-loader@^0.1.5:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.1.6.tgz#c09903da6d73b9e53b7ed8ee5245597051e98e91"
+source-list-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
+
+source-map-loader@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.2.1.tgz#48126be9230bd47fad05e46a8c3c2e3d2dabe507"
   dependencies:
     async "^0.9.0"
     loader-utils "~0.2.2"
     source-map "~0.1.33"
 
-source-map-support@^0.4.0, source-map-support@^0.4.2, source-map-support@~0.4.0:
-  version "0.4.11"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.11.tgz#647f939978b38535909530885303daf23279f322"
+source-map-support@^0.4.0, source-map-support@^0.4.15, source-map-support@^0.4.2, source-map-support@~0.4.0:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1"
   dependencies:
-    source-map "^0.5.3"
+    source-map "^0.5.6"
 
-source-map@0.1.x, source-map@^0.1.41, source-map@~0.1.33, source-map@~0.1.7:
+source-map@0.1.x, source-map@~0.1.33, source-map@~0.1.7:
   version "0.1.43"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
   dependencies:
@@ -5893,7 +6559,7 @@ source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, sourc
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
-source-map@^0.4.4:
+source-map@^0.4.2, source-map@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   dependencies:
@@ -5911,6 +6577,10 @@ space-separated-tokens@^1.0.0:
   dependencies:
     trim "0.0.1"
 
+spawn-command@^0.0.2-1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
+
 spdx-correct@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
@@ -5949,13 +6619,27 @@ spdy@^3.4.1:
     select-hose "^2.0.0"
     spdy-transport "^2.0.15"
 
-sprintf-js@^1.0.3, sprintf-js@~1.0.2:
+speedline@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/speedline/-/speedline-1.2.0.tgz#f5828dcf8e9b96a9f6c1da8ab298538820c6668d"
+  dependencies:
+    babar "0.0.3"
+    image-ssim "^0.2.0"
+    jpeg-js "^0.1.2"
+    loud-rejection "^1.3.0"
+    meow "^3.7.0"
+
+sprintf-js@^1.0.3:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.0.tgz#cffcaf702daf65ea39bb4e0fa2b299cec1a1be46"
+
+sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
 
 sshpk@^1.7.0:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.2.tgz#d5a804ce22695515638e798dbe23273de070a5fa"
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.0.tgz#ff2a3e4fd04497555fed97b39a0fd82fafb3a33c"
   dependencies:
     asn1 "~0.2.3"
     assert-plus "^1.0.0"
@@ -5994,12 +6678,12 @@ stream-browserify@^2.0.1:
     readable-stream "^2.0.2"
 
 stream-http@^2.3.1:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.6.3.tgz#4c3ddbf9635968ea2cfd4e48d43de5def2625ac3"
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.1.tgz#546a51741ad5a6b07e9e31b0b10441a917df528a"
   dependencies:
     builtin-status-codes "^3.0.0"
     inherits "^2.0.1"
-    readable-stream "^2.1.0"
+    readable-stream "^2.2.6"
     to-arraybuffer "^1.0.0"
     xtend "^4.0.0"
 
@@ -6036,6 +6720,12 @@ string_decoder@^0.10.25, string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
 
+string_decoder@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.0.tgz#f06f41157b664d86069f84bdbdc9b0d8ab281667"
+  dependencies:
+    buffer-shims "~1.0.0"
+
 stringify-entities@^1.0.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-1.3.0.tgz#2244a516c4f1e8e01b73dad01023016776abd917"
@@ -6054,16 +6744,18 @@ stringstream@~0.0.4:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
 
+strip-ansi@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.3.0.tgz#25f48ea22ca79187f3174a4db8759347bb126220"
+  dependencies:
+    ansi-regex "^0.2.1"
+
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.1.1.tgz#39e8a98d044d150660abe4a6808acf70bb7bc991"
-
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -6089,16 +6781,17 @@ strip-json-comments@^2.0.0, strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
 style-loader@^0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.1.tgz#468280efbc0473023cd3a6cd56e33b5a1d7fc3a9"
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.2.tgz#74533384cf698c7104c7951150b49717adc2f3bb"
   dependencies:
-    loader-utils "^0.2.7"
+    loader-utils "^1.0.2"
 
-stylus-loader@^2.4.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-2.5.0.tgz#4f921afc99f7a3d2f89d45ebcbc145822bf3fe71"
+stylus-loader@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.1.tgz#77f4b34fd030d25b2617bcf5513db5b0730c4089"
   dependencies:
-    loader-utils "^0.2.9"
+    loader-utils "^1.0.2"
+    lodash.clonedeep "^4.5.0"
     when "~3.6.x"
 
 stylus@^0.54.5:
@@ -6113,8 +6806,8 @@ stylus@^0.54.5:
     source-map "0.1.x"
 
 superstatic@^4.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/superstatic/-/superstatic-4.0.3.tgz#a8ca3770a98489711917f3bd16f719ea92d4e686"
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/superstatic/-/superstatic-4.1.0.tgz#e7f977ac70193ad80e154fd136a54b4d45110b01"
   dependencies:
     as-array "^2.0.0"
     async "^1.5.2"
@@ -6147,6 +6840,10 @@ superstatic@^4.0:
     try-require "^1.0.0"
     update-notifier "^1.0.1"
 
+supports-color@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-0.2.0.tgz#d92de2694eb3f67323973d7ae3d8b55b4c22190a"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -6199,18 +6896,27 @@ tapable@^0.2.5, tapable@~0.2.5:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d"
 
-tar-pack@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.3.0.tgz#30931816418f55afc4d21775afdd6720cee45dae"
+tar-pack@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
   dependencies:
-    debug "~2.2.0"
-    fstream "~1.0.10"
-    fstream-ignore "~1.0.5"
-    once "~1.3.3"
-    readable-stream "~2.1.4"
-    rimraf "~2.5.1"
-    tar "~2.2.1"
-    uid-number "~0.0.6"
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar-stream@^1.5.0:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.5.4.tgz#36549cf04ed1aee9b2a30c0143252238daf94016"
+  dependencies:
+    bl "^1.0.0"
+    end-of-stream "^1.0.0"
+    readable-stream "^2.0.0"
+    xtend "^4.0.0"
 
 tar-stream@~1.2.1:
   version "1.2.2"
@@ -6221,7 +6927,7 @@ tar-stream@~1.2.1:
     readable-stream "^2.0.0"
     xtend "^4.0.0"
 
-tar@^2.0.0, tar@^2.2.0, tar@~2.2.1:
+tar@^2.0.0, tar@^2.2.0, tar@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
   dependencies:
@@ -6229,6 +6935,22 @@ tar@^2.0.0, tar@^2.2.0, tar@~2.2.1:
     fstream "^1.0.2"
     inherits "2"
 
+taskgroup@^4.0.5:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/taskgroup/-/taskgroup-4.3.1.tgz#7de193febd768273c457730497024d512c27915a"
+  dependencies:
+    ambi "^2.2.0"
+    csextends "^1.0.3"
+
+taskgroup@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/taskgroup/-/taskgroup-5.0.1.tgz#08736c9b24683b1434774231eb4b73aa7c3f79b5"
+  dependencies:
+    ambi "^2.5.0"
+    eachr "^3.2.0"
+    editions "^1.1.1"
+    extendr "^3.2.0"
+
 temp@0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.3.tgz#e0c6bc4d26b903124410e4fed81103014dfc1f59"
@@ -6276,8 +6998,8 @@ timers-browserify@^2.0.2:
     setimmediate "^1.0.4"
 
 title-case@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.0.tgz#c68ccb4232079ded64f94b91b4941ade91391979"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"
   dependencies:
     no-case "^2.2.0"
     upper-case "^1.0.3"
@@ -6292,19 +7014,13 @@ tmp@0.0.27:
   dependencies:
     os-tmpdir "~1.0.0"
 
-tmp@0.0.28, tmp@0.0.x:
-  version "0.0.28"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.28.tgz#172735b7f614ea7af39664fa84cf0de4e515d120"
-  dependencies:
-    os-tmpdir "~1.0.1"
-
 tmp@0.0.30:
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"
   dependencies:
     os-tmpdir "~1.0.1"
 
-tmp@^0.0.31:
+tmp@0.0.31, tmp@0.0.x, tmp@^0.0.31:
   version "0.0.31"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
   dependencies:
@@ -6319,8 +7035,8 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
 
 to-fast-properties@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
 toposort@^1.0.0:
   version "1.0.3"
@@ -6342,6 +7058,10 @@ tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
 
+tree-kill@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.1.0.tgz#c963dcf03722892ec59cba569e940b71954d1729"
+
 trim-lines@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-1.1.0.tgz#9926d03ede13ba18f7d42222631fb04c79ff26fe"
@@ -6374,6 +7094,21 @@ tryit@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
 
+ts-node@^3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-3.0.4.tgz#a1475ebf24fd4e2ee2fba8b1aa1605b977bde506"
+  dependencies:
+    arrify "^1.0.0"
+    chalk "^1.1.1"
+    diff "^3.1.0"
+    make-error "^1.1.1"
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.0"
+    tsconfig "^6.0.0"
+    v8flags "^2.0.11"
+    yn "^1.2.0"
+
 ts-node@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-2.0.0.tgz#16e4fecc949088238b4cbf1c39c9582526b66f74"
@@ -6400,15 +7135,26 @@ tsconfig@^5.0.2:
     strip-bom "^2.0.0"
     strip-json-comments "^2.0.0"
 
+tsconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/tsconfig/-/tsconfig-6.0.0.tgz#6b0e8376003d7af1864f8df8f89dd0059ffcd032"
+  dependencies:
+    strip-bom "^3.0.0"
+    strip-json-comments "^2.0.0"
+
 tsickle@^0.21.0:
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.21.5.tgz#341c1834b9d293c8cbffc295a86a1e46268ed22f"
+  version "0.21.6"
+  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.21.6.tgz#53b01b979c5c13fdb13afb3fb958177e5991588d"
   dependencies:
     minimist "^1.2.0"
     mkdirp "^0.5.1"
     source-map "^0.5.6"
     source-map-support "^0.4.2"
 
+tslib@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
+
 tslint@^4.1.1, tslint@~4.5.0:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-4.5.1.tgz#05356871bef23a434906734006fc188336ba824b"
@@ -6424,16 +7170,18 @@ tslint@^4.1.1, tslint@~4.5.0:
     update-notifier "^2.0.0"
 
 tsutils@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-1.4.0.tgz#84f8a83df9967d35bf1ff3aa48c7339593d64e19"
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-1.8.0.tgz#bf8118ed8e80cd5c9fc7d75728c7963d44ed2f52"
 
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
 
-tunnel-agent@~0.4.1:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  dependencies:
+    safe-buffer "^5.0.1"
 
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
@@ -6445,33 +7193,46 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-is@~1.6.14:
-  version "1.6.14"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.14.tgz#e219639c17ded1ca0789092dd54a03826b817cb2"
+type-is@~1.6.14, type-is@~1.6.15:
+  version "1.6.15"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
   dependencies:
     media-typer "0.3.0"
-    mime-types "~2.1.13"
+    mime-types "~2.1.15"
+
+typechecker@^4.3.0:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/typechecker/-/typechecker-4.4.1.tgz#f97b95f51b038417212d677d45a373ee7bced7e6"
+  dependencies:
+    editions "^1.3.3"
 
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@2.2.0, "typescript@>=2.0.0 <2.3.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.2.0.tgz#626f2fc70087d2480f21ebb12c1888288c8614e3"
+typescript@2.3.2, "typescript@>=2.0.0 <2.4.0":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.2.tgz#f0f045e196f69a72f06b25fd3bd39d01c3ce9984"
 
-typescript@^1.7.5:
-  version "1.8.10"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-1.8.10.tgz#b475d6e0dff0bf50f296e5ca6ef9fbb5c7320f1e"
+typescript@^2.3.3, typescript@^2.3.4:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.1.tgz#c3ccb16ddaa0b2314de031e7e6fee89e5ba346bc"
 
-uglify-js@2.7.x, uglify-js@^2.6, uglify-js@^2.7.5:
-  version "2.7.5"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"
+uglify-js@^2.6, uglify-js@^2.8.27, uglify-js@~2.8.22:
+  version "2.8.28"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.28.tgz#e335032df9bb20dcb918f164589d5af47f38834a"
   dependencies:
-    async "~0.2.6"
     source-map "~0.5.1"
-    uglify-to-browserify "~1.0.0"
     yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
+uglify-js@^3.0.15:
+  version "3.0.15"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.15.tgz#aacb323a846b234602270dead8a32441a8806f42"
+  dependencies:
+    commander "~2.9.0"
+    source-map "~0.5.1"
 
 uglify-js@~2.3:
   version "2.3.6"
@@ -6485,7 +7246,7 @@ uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
-uid-number@~0.0.6:
+uid-number@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
 
@@ -6499,10 +7260,14 @@ underscore-contrib@~0.3.0:
   dependencies:
     underscore "1.6.0"
 
-underscore@1.6.0, underscore@1.x, underscore@~1.6.0:
+underscore@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
 
+underscore@1.x:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022"
+
 unherit@^1.0.4:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.0.tgz#6b9aaedfbf73df1756ad9e316dd981885840cd7d"
@@ -6511,19 +7276,24 @@ unherit@^1.0.4:
     xtend "^4.0.1"
 
 unified@^6.0.0:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-6.1.2.tgz#b3904c3254ffbea7ff6d806c5d5b6248838cecb6"
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-6.1.3.tgz#c26a9df2c56f3def938309253928f37150c70c6e"
   dependencies:
     bail "^1.0.0"
     extend "^3.0.0"
     has "^1.0.1"
     is-plain-obj "^1.1.0"
-    isarray "^2.0.1"
     trough "^1.0.0"
     vfile "^2.0.0"
     x-is-function "^1.0.4"
     x-is-string "^0.1.0"
 
+union@~0.4.3:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/union/-/union-0.4.6.tgz#198fbdaeba254e788b0efcb630bc11f24a2959e0"
+  dependencies:
+    qs "~2.3.3"
+
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
@@ -6550,10 +7320,21 @@ unist-builder@^1.0.1:
   dependencies:
     object-assign "^4.1.0"
 
+unist-util-filter@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/unist-util-filter/-/unist-util-filter-0.2.1.tgz#e2f7876828903a6a9308e362051f86b14f35b545"
+  dependencies:
+    flatmap "0.0.3"
+    unist-util-is "^1.0.0"
+
 unist-util-generated@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.0.tgz#8c95657ff12b32eaffe0731fbb37da6995fae01b"
 
+unist-util-is@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-1.0.0.tgz#4c7b3c5c0f6aa963640056fe4af7b5fcfdbb8ef0"
+
 unist-util-is@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.0.0.tgz#e536472c4f78739e164d0859fc3201b97cf46e7c"
@@ -6574,13 +7355,19 @@ unist-util-remove-position@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
+unist-util-source@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-source/-/unist-util-source-1.0.1.tgz#989fb50f8c8508d4cdd629162a38f06d7e08cc29"
+  dependencies:
+    vfile-location "^2.0.1"
+
 unist-util-stringify-position@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.0.tgz#e8ba9d6b6af891b5f8336b3a31c63a9dc85c2af0"
   dependencies:
     has "^1.0.1"
 
-unist-util-visit@^1.0.0, unist-util-visit@^1.1.0:
+unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.1.1.tgz#e917a3b137658b335cb4420c7da2e74d928e4e94"
 
@@ -6630,7 +7417,7 @@ update-notifier@^1.0.1:
     semver-diff "^2.0.0"
     xdg-basedir "^2.0.0"
 
-update-notifier@^2.0.0:
+update-notifier@^2.0.0, update-notifier@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.1.0.tgz#ec0c1e53536b76647a24b77cb83966d9315123d9"
   dependencies:
@@ -6657,12 +7444,16 @@ url-join@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-0.0.1.tgz#1db48ad422d3402469a87f7d97bdebfe4fb1e3c8"
 
+url-join@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-1.1.0.tgz#741c6c2f4596c4830d6718460920d0c92202dc78"
+
 url-loader@^0.5.7:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.7.tgz#67e8779759f8000da74994906680c943a9b0925d"
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.8.tgz#b9183b1801e0f847718673673040bc9dc1c715c5"
   dependencies:
-    loader-utils "0.2.x"
-    mime "1.2.x"
+    loader-utils "^1.0.2"
+    mime "1.3.x"
 
 url-parse-lax@^1.0.0:
   version "1.0.0"
@@ -6678,10 +7469,10 @@ url-parse@1.0.x:
     requires-port "1.0.x"
 
 url-parse@^1.1.1:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.8.tgz#7a65b3a8d57a1e86af6b4e2276e34774167c0156"
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.9.tgz#c67f1d775d51f0a18911dd7b3ffad27bb9e5bd19"
   dependencies:
-    querystringify "0.0.x"
+    querystringify "~1.0.0"
     requires-port "1.0.x"
 
 url@^0.11.0:
@@ -6701,9 +7492,9 @@ user-home@^2.0.0:
   dependencies:
     os-homedir "^1.0.0"
 
-useragent@^2.1.10:
-  version "2.1.12"
-  resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.1.12.tgz#aa7da6cdc48bdc37ba86790871a7321d64edbaa2"
+useragent@^2.1.12:
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.1.13.tgz#bba43e8aa24d5ceb83c2937473e102e21df74c10"
   dependencies:
     lru-cache "2.2.x"
     tmp "0.0.x"
@@ -6739,8 +7530,8 @@ uuid@^3.0.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
 
 v8flags@^2.0.11:
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.11.tgz#bca8f30f0d6d60612cc2c00641e6962d42ae6881"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
   dependencies:
     user-home "^1.1.1"
 
@@ -6760,8 +7551,8 @@ validate.js@^0.9.0:
   resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.9.0.tgz#8acf0144f1520a19835c6cc663f45e0836aa56c8"
 
 vary@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140"
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
 
 vendors@^1.0.0:
   version "1.0.1"
@@ -6773,7 +7564,7 @@ verror@1.3.6:
   dependencies:
     extsprintf "1.0.2"
 
-vfile-location@^2.0.0:
+vfile-location@^2.0.0, vfile-location@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.1.tgz#0bf8816f732b0f8bd902a56fda4c62c8e935dc52"
 
@@ -6788,8 +7579,8 @@ vfile@^2.0.0:
     x-is-string "^0.1.0"
 
 vlq@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.1.tgz#14439d711891e682535467f8587c5630e4222a6c"
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.2.tgz#e316d5257b40b86bb43cb8d5fea5d7f54d6b0ca1"
 
 vm-browserify@0.0.4:
   version "0.0.4"
@@ -6814,20 +7605,40 @@ walk-sync@^0.3.1:
     ensure-posix-path "^1.0.0"
     matcher-collection "^1.0.0"
 
-watchpack@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.2.1.tgz#01efa80c5c29e5c56ba55d6f5470a35b6402f0b2"
+walkdir@^0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.0.11.tgz#a16d025eb931bd03b52f308caed0f40fcebe9532"
+
+watchpack@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.3.1.tgz#7d8693907b28ce6013e7f3610aa2a1acf07dad87"
   dependencies:
     async "^2.1.2"
     chokidar "^1.4.3"
     graceful-fs "^4.1.2"
 
+watchr@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/watchr/-/watchr-3.0.1.tgz#3b7e078160d12484481d81a8640d5fd880408540"
+  dependencies:
+    eachr "^3.2.0"
+    editions "^1.3.1"
+    extendr "^3.2.2"
+    ignorefs "^1.1.1"
+    safefs "^4.1.0"
+    scandirectory "^2.5.0"
+    taskgroup "^5.0.1"
+
 wbuf@^1.1.0, wbuf@^1.4.0:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.2.tgz#d697b99f1f59512df2751be42769c1580b5801fe"
   dependencies:
     minimalistic-assert "^1.0.0"
 
+web-animations-js@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/web-animations-js/-/web-animations-js-2.2.5.tgz#26ca1b34c1347332a0813f8b2bfe69664efa80aa"
+
 webdriver-js-extender@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/webdriver-js-extender/-/webdriver-js-extender-1.0.0.tgz#81c533a9e33d5bfb597b4e63e2cdb25b54777515"
@@ -6836,8 +7647,8 @@ webdriver-js-extender@^1.0.0:
     selenium-webdriver "^2.53.2"
 
 webdriver-manager@^12.0.1:
-  version "12.0.2"
-  resolved "https://registry.yarnpkg.com/webdriver-manager/-/webdriver-manager-12.0.2.tgz#9bc541e975b18de8bf7f6ad163b69488169e8914"
+  version "12.0.6"
+  resolved "https://registry.yarnpkg.com/webdriver-manager/-/webdriver-manager-12.0.6.tgz#3df1a481977010b4cbf8c9d85c7a577828c0e70b"
   dependencies:
     adm-zip "^0.4.7"
     chalk "^1.1.1"
@@ -6859,18 +7670,18 @@ webidl-conversions@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.1.tgz#8015a17ab83e7e1b311638486ace81da6ce206a0"
 
-webpack-dev-middleware@^1.0.11, webpack-dev-middleware@^1.9.0:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.1.tgz#c6b4cf428139cf1aefbe06a0c00fdb4f8da2f893"
+webpack-dev-middleware@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.2.tgz#2e252ce1dfb020dbda1ccb37df26f30ab014dbd1"
   dependencies:
     memory-fs "~0.4.1"
     mime "^1.3.4"
     path-is-absolute "^1.0.0"
     range-parser "^1.0.3"
 
-webpack-dev-server@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.3.0.tgz#0437704bbd4d941a6e4c061eb3cc232ed7d06101"
+webpack-dev-server@~2.4.5:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.4.5.tgz#31384ce81136be1080b4b4cde0eb9b90e54ee6cf"
   dependencies:
     ansi-html "0.0.7"
     chokidar "^1.6.0"
@@ -6878,16 +7689,16 @@ webpack-dev-server@~2.3.0:
     connect-history-api-fallback "^1.3.0"
     express "^4.13.3"
     html-entities "^1.2.0"
-    http-proxy-middleware "~0.17.1"
+    http-proxy-middleware "~0.17.4"
     opn "4.0.2"
     portfinder "^1.0.9"
     serve-index "^1.7.2"
     sockjs "0.3.18"
-    sockjs-client "1.1.1"
+    sockjs-client "1.1.2"
     spdy "^3.4.1"
     strip-ansi "^3.0.0"
     supports-color "^3.1.1"
-    webpack-dev-middleware "^1.9.0"
+    webpack-dev-middleware "^1.10.2"
     yargs "^6.0.0"
 
 webpack-merge@^2.4.0:
@@ -6896,36 +7707,45 @@ webpack-merge@^2.4.0:
   dependencies:
     lodash "^4.17.4"
 
-webpack-sources@^0.1.0, webpack-sources@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.4.tgz#ccc2c817e08e5fa393239412690bb481821393cd"
+webpack-sources@^0.1.0:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750"
   dependencies:
     source-list-map "~0.1.7"
     source-map "~0.5.3"
 
-webpack@~2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.2.1.tgz#7bb1d72ae2087dd1a4af526afec15eed17dda475"
+webpack-sources@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
   dependencies:
-    acorn "^4.0.4"
+    source-list-map "^2.0.0"
+    source-map "~0.5.3"
+
+webpack@3.0.0-rc.1:
+  version "3.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.0.0-rc.1.tgz#41319cda8040f53177ce999a5d8a333e4f264d75"
+  dependencies:
+    acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"
-    ajv "^4.7.0"
-    ajv-keywords "^1.1.1"
+    ajv "^5.1.5"
+    ajv-keywords "^2.0.0"
     async "^2.1.2"
     enhanced-resolve "^3.0.0"
+    escope "^3.6.0"
     interpret "^1.0.0"
     json-loader "^0.5.4"
+    json5 "^0.5.1"
     loader-runner "^2.3.0"
-    loader-utils "^0.2.16"
+    loader-utils "^1.1.0"
     memory-fs "~0.4.1"
     mkdirp "~0.5.0"
     node-libs-browser "^2.0.0"
     source-map "^0.5.3"
     supports-color "^3.1.0"
     tapable "~0.2.5"
-    uglify-js "^2.7.5"
-    watchpack "^1.2.0"
-    webpack-sources "^0.1.4"
+    uglify-js "^2.8.27"
+    watchpack "^1.3.1"
+    webpack-sources "^1.0.1"
     yargs "^6.0.0"
 
 websocket-driver@>=0.5.1:
@@ -6944,9 +7764,16 @@ whatwg-encoding@^1.0.1:
   dependencies:
     iconv-lite "0.4.13"
 
+whatwg-url@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.0.0.tgz#5be362f0b6e2f8760f7260df6e0e1df536f5479c"
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 whatwg-url@^4.3.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.7.0.tgz#202035ac1955b087cdd20fa8b58ded3ab1cd2af5"
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.8.0.tgz#d2981aa9148c1e00a41c5a6131166ab4683bbcc0"
   dependencies:
     tr46 "~0.0.3"
     webidl-conversions "^3.0.0"
@@ -6964,16 +7791,16 @@ which-module@^1.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
 
 which@1, which@^1.2.1, which@^1.2.8, which@^1.2.9:
-  version "1.2.12"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
   dependencies:
-    isexe "^1.1.1"
+    isexe "^2.0.0"
 
 wide-align@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
   dependencies:
-    string-width "^1.0.1"
+    string-width "^1.0.2"
 
 widest-line@^1.0.0:
   version "1.0.0"
@@ -6989,10 +7816,6 @@ window-size@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
 
-window-size@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
-
 winston@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/winston/-/winston-1.1.2.tgz#68edd769ff79d4f9528cf0e5d80021aade67480c"
@@ -7040,8 +7863,16 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
 
 write-file-atomic@^1.1.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.1.tgz#7d45ba32316328dd1ec7d90f60ebc0d845bb759a"
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.4.tgz#f807a4f0b1d9e913ae7a48112e6cc3af1991b45f"
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    slide "^1.1.5"
+
+write-file-atomic@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.0.0.tgz#bb99a5440d0d31dd860a68da392bffeef66251a1"
   dependencies:
     graceful-fs "^4.1.11"
     imurmurhash "^0.1.4"
@@ -7053,13 +7884,20 @@ write@^0.2.1:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@1.1.1, ws@^1.0.1:
+ws@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.1.tgz#082ddb6c641e85d4bb451f03d52f06eabdb1f018"
   dependencies:
     options ">=0.0.5"
     ultron "1.0.x"
 
+ws@1.1.2, ws@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.2.tgz#8a244fa052401e08c9886cf44a85189e1fd4067f"
+  dependencies:
+    options ">=0.0.5"
+    ultron "1.0.x"
+
 wtf-8@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a"
@@ -7131,15 +7969,8 @@ y18n@^3.2.0, y18n@^3.2.1:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
 
 yallist@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.0.0.tgz#306c543835f09ee1a4cb23b7bce9ab341c91cdd4"
-
-yargs-parser@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"
-  dependencies:
-    camelcase "^3.0.0"
-    lodash.assign "^4.0.6"
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
 
 yargs-parser@^4.2.0:
   version "4.2.1"
@@ -7147,7 +7978,13 @@ yargs-parser@^4.2.0:
   dependencies:
     camelcase "^3.0.0"
 
-yargs@^3.32.0:
+yargs-parser@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
+  dependencies:
+    camelcase "^3.0.0"
+
+yargs@3.32.0, yargs@^3.32.0:
   version "3.32.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
   dependencies:
@@ -7159,26 +7996,7 @@ yargs@^3.32.0:
     window-size "^0.1.4"
     y18n "^3.2.0"
 
-yargs@^4.7.1:
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
-  dependencies:
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    lodash.assign "^4.0.3"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^1.0.1"
-    which-module "^1.0.0"
-    window-size "^0.2.0"
-    y18n "^3.2.1"
-    yargs-parser "^2.4.1"
-
-yargs@^6.0.0:
+yargs@^6.0.0, yargs@^6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
   dependencies:
@@ -7196,6 +8014,24 @@ yargs@^6.0.0:
     y18n "^3.2.1"
     yargs-parser "^4.2.0"
 
+yargs@^7.0.2:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^5.0.0"
+
 yargs@~3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
@@ -7210,8 +8046,19 @@ yeast@0.1.2:
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
 yn@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/yn/-/yn-1.2.0.tgz#d237a4c533f279b2b89d3acac2db4b8c795e4a63"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-1.3.0.tgz#1b0812abb8d805d48966f8df385dc9dacc9a19d8"
+  dependencies:
+    object-assign "^4.1.1"
+
+zip-stream@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.1.1.tgz#5216b48bbb4d2651f64d5c6e6f09eb4a7399d557"
+  dependencies:
+    archiver-utils "^1.3.0"
+    compress-commons "^1.1.0"
+    lodash "^4.8.0"
+    readable-stream "^2.0.0"
 
 zip-stream@~0.6.0:
   version "0.6.0"
@@ -7221,10 +8068,6 @@ zip-stream@~0.6.0:
     lodash "~3.10.1"
     readable-stream "~1.0.26"
 
-zone.js@^0.7.2:
-  version "0.7.8"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.7.8.tgz#4f3fe8834d44597f2639053a0fa438df34fffded"
-
-zone.js@^0.8.4:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.4.tgz#cc40ae5a1c879601c5ebba2096b5c80f0c4c3602"
+zone.js@^0.8.12, zone.js@^0.8.4:
+  version "0.8.12"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.12.tgz#86ff5053c98aec291a0bf4bbac501d694a05cfbb"
diff --git a/build.sh b/build.sh
index 6701cb8ccc..71b476bb8d 100755
--- a/build.sh
+++ b/build.sh
@@ -32,7 +32,6 @@ BUILD_ALL=true
 BUNDLE=true
 VERSION_PREFIX=$(node -p "require('./package.json').version")
 VERSION_SUFFIX="-$(git log --oneline -1 | awk '{print $1}')"
-ROUTER_VERSION_PREFIX=$(node -p "require('./package.json').version.replace(/^2/, '3')")
 REMOVE_BENCHPRESS=false
 BUILD_EXAMPLES=true
 COMPILE_SOURCE=true
@@ -124,8 +123,8 @@ downlevelES2015() {
       ts_file="${BASH_REMATCH[1]}${2:-".es5.ts"}"
       cp ${file} ${ts_file}
 
-      echo "======           $TSC ${ts_file} --target es5 --module es2015 --noLib"
-      ($TSC ${ts_file} --target es5 --module es2015 --noLib --sourceMap) > /dev/null 2>&1 || true
+      echo "======           $TSC ${ts_file} --target es5 --module es2015 --noLib --sourceMap --importHelpers"
+      ($TSC ${ts_file} --target es5 --module es2015 --noLib --sourceMap --importHelpers) > /dev/null 2>&1 || true
       mapSources "${BASH_REMATCH[1]}${2:-".es5.js"}"
       rm -f ${ts_file}
     fi
@@ -267,7 +266,7 @@ compilePackage() {
     $NGC -p ${1}/tsconfig-build.json
     echo "======           Create ${1}/../${package_name}.d.ts re-export file for Closure"
     echo "$(cat ${LICENSE_BANNER}) ${N} export * from './${package_name}/index'" > ${2}/../${package_name}.d.ts
-    echo "{\"__symbolic\":\"module\",\"version\":3,\"metadata\":{},\"exports\":[{\"from\":\"./${package_name}/index\"}]}" > ${2}/../${package_name}.metadata.json
+    echo "{\"__symbolic\":\"module\",\"version\":3,\"metadata\":{},\"exports\":[{\"from\":\"./${package_name}/index\"}],\"flatModuleIndexRedirect\":true}" > ${2}/../${package_name}.metadata.json
   fi
 
   for DIR in ${1}/* ; do
@@ -329,13 +328,12 @@ mapSources() {
 }
 
 VERSION="${VERSION_PREFIX}${VERSION_SUFFIX}"
-ROUTER_VERSION="${ROUTER_VERSION_PREFIX}${VERSION_SUFFIX}"
-echo "====== BUILDING: Version ${VERSION} (Router ${ROUTER_VERSION})"
+echo "====== BUILDING: Version ${VERSION}"
 
 N="
 "
 TSC=`pwd`/node_modules/.bin/tsc
-NGC="node --max-old-space-size=3000 dist/tools/@angular/tsc-wrapped/src/main"
+NGC="node --max-old-space-size=3000 dist/packages-dist/tsc-wrapped/src/main"
 MAP_SOURCES="node `pwd`/scripts/build/map_sources.js "
 UGLIFYJS=`pwd`/node_modules/.bin/uglifyjs
 TSCONFIG=./tools/tsconfig.json
@@ -347,8 +345,6 @@ if [[ ${BUILD_TOOLS} == true ]]; then
     rm -rf ./dist/tools/
     mkdir -p ./dist/tools/
     $(npm bin)/tsc -p ${TSCONFIG}
-
-    cp ./tools/@angular/tsc-wrapped/package.json ./dist/tools/@angular/tsc-wrapped
   travisFoldEnd "build tools"
 fi
 
@@ -362,47 +358,49 @@ if [[ ${BUILD_ALL} == true && ${TYPECHECK_ALL} == true ]]; then
   travisFoldStart "copy e2e files" "no-xtrace"
     mkdir -p ./dist/all/
 
-    echo "====== Copying files needed for e2e tests ====="
-    cp -r ./modules/playground ./dist/all/
-    cp -r ./modules/playground/favicon.ico ./dist/
-    #rsync -aP ./modules/playground/* ./dist/all/playground/
-    mkdir ./dist/all/playground/vendor
-    cd ./dist/all/playground/vendor
-    ln -s ../../../../node_modules/core-js/client/core.js .
-    ln -s ../../../../node_modules/zone.js/dist/zone.js .
-    ln -s ../../../../node_modules/zone.js/dist/long-stack-trace-zone.js .
-    ln -s ../../../../node_modules/systemjs/dist/system.src.js .
-    ln -s ../../../../node_modules/base64-js .
-    ln -s ../../../../node_modules/reflect-metadata/Reflect.js .
-    ln -s ../../../../node_modules/rxjs .
-    ln -s ../../../../node_modules/angular/angular.js .
-    ln -s ../../../../node_modules/hammerjs/hammer.js .
-    cd -
+    (
+      echo "====== Copying files needed for e2e tests ====="
+      cp -r ./modules/playground ./dist/all/
+      cp -r ./modules/playground/favicon.ico ./dist/
+      #rsync -aP ./modules/playground/* ./dist/all/playground/
+      mkdir ./dist/all/playground/vendor
+      cd ./dist/all/playground/vendor
+      ln -s ../../../../node_modules/core-js/client/core.js .
+      ln -s ../../../../node_modules/zone.js/dist/zone.js .
+      ln -s ../../../../node_modules/zone.js/dist/long-stack-trace-zone.js .
+      ln -s ../../../../node_modules/systemjs/dist/system.src.js .
+      ln -s ../../../../node_modules/base64-js .
+      ln -s ../../../../node_modules/reflect-metadata/Reflect.js .
+      ln -s ../../../../node_modules/rxjs .
+      ln -s ../../../../node_modules/angular/angular.js .
+      ln -s ../../../../node_modules/hammerjs/hammer.js .
+    )
 
-    echo "====== Copying files needed for benchmarks ====="
-    cp -r ./modules/benchmarks ./dist/all/
-    cp -r ./modules/benchmarks/favicon.ico ./dist/
-    mkdir ./dist/all/benchmarks/vendor
-    cd ./dist/all/benchmarks/vendor
-    ln -s ../../../../node_modules/core-js/client/core.js .
-    ln -s ../../../../node_modules/zone.js/dist/zone.js .
-    ln -s ../../../../node_modules/zone.js/dist/long-stack-trace-zone.js .
-    ln -s ../../../../node_modules/systemjs/dist/system.src.js .
-    ln -s ../../../../node_modules/reflect-metadata/Reflect.js .
-    ln -s ../../../../node_modules/rxjs .
-    ln -s ../../../../node_modules/angular/angular.js .
-    ln -s ../../../../bower_components/polymer .
-    ln -s ../../../../node_modules/incremental-dom/dist/incremental-dom-cjs.js
-    cd -
+    (
+      echo "====== Copying files needed for benchmarks ====="
+      cp -r ./modules/benchmarks ./dist/all/
+      cp -r ./modules/benchmarks/favicon.ico ./dist/
+      mkdir ./dist/all/benchmarks/vendor
+      cd ./dist/all/benchmarks/vendor
+      ln -s ../../../../node_modules/core-js/client/core.js .
+      ln -s ../../../../node_modules/zone.js/dist/zone.js .
+      ln -s ../../../../node_modules/zone.js/dist/long-stack-trace-zone.js .
+      ln -s ../../../../node_modules/systemjs/dist/system.src.js .
+      ln -s ../../../../node_modules/reflect-metadata/Reflect.js .
+      ln -s ../../../../node_modules/rxjs .
+      ln -s ../../../../node_modules/angular/angular.js .
+      ln -s ../../../../bower_components/polymer .
+      ln -s ../../../../node_modules/incremental-dom/dist/incremental-dom-cjs.js
+    )
   travisFoldEnd "copy e2e files"
 
   TSCONFIG="packages/tsconfig.json"
   travisFoldStart "tsc -p ${TSCONFIG}" "no-xtrace"
-    $NGC -p ${TSCONFIG}
+    $TSC -p ${TSCONFIG}
   travisFoldEnd "tsc -p ${TSCONFIG}"
   TSCONFIG="modules/tsconfig.json"
   travisFoldStart "tsc -p ${TSCONFIG}" "no-xtrace"
-    $NGC -p ${TSCONFIG}
+    $TSC -p ${TSCONFIG}
   travisFoldEnd "tsc -p ${TSCONFIG}"
 
 fi
@@ -414,6 +412,20 @@ if [[ ${BUILD_ALL} == true ]]; then
   fi
 fi
 
+if [[ ${BUILD_TOOLS} == true || ${BUILD_ALL} == true ]]; then
+  echo "====== (tsc-wrapped)COMPILING: \$(npm bin)/tsc -p packages/tsc-wrapped/tsconfig.json ====="
+  $(npm bin)/tsc -p packages/tsc-wrapped/tsconfig.json
+  echo "====== (tsc-wrapped)COMPILING: \$(npm bin)/tsc -p packages/tsc-wrapped/tsconfig-build.json ====="
+  $(npm bin)/tsc -p packages/tsc-wrapped/tsconfig-build.json
+  cp ./packages/tsc-wrapped/package.json ./dist/packages-dist/tsc-wrapped
+  cp ./packages/tsc-wrapped/README.md ./dist/packages-dist/tsc-wrapped
+  (
+    cd dist/packages-dist/tsc-wrapped
+    echo "======       EXECUTE: perl -p -i -e \"s/0\.0\.0\-PLACEHOLDER/${VERSION}/g\" $""(grep -ril 0\.0\.0\-PLACEHOLDER .)"
+    perl -p -i -e "s/0\.0\.0\-PLACEHOLDER/${VERSION}/g" $(grep -ril 0\.0\.0\-PLACEHOLDER .) < /dev/null 2> /dev/null
+  )
+fi
+
 for PACKAGE in ${PACKAGES[@]}
 do
   travisFoldStart "build package: ${PACKAGE}" "no-xtrace"
@@ -426,12 +438,7 @@ do
   MODULES_DIR=${NPM_DIR}/@angular
   BUNDLES_DIR=${NPM_DIR}/bundles
 
-  if [[ ${PACKAGE} != router ]]; then
-    LICENSE_BANNER=${ROOT_DIR}/license-banner.txt
-  fi
-  if [[ ${PACKAGE} == router ]]; then
-    LICENSE_BANNER=${ROOT_DIR}/router-license-banner.txt
-  fi
+  LICENSE_BANNER=${ROOT_DIR}/license-banner.txt
 
   if [[ ${COMPILE_SOURCE} == true ]]; then
     rm -rf ${OUT_DIR}
@@ -447,11 +454,7 @@ do
 
       echo "======        Copy ${PACKAGE} typings"
       rsync -a --exclude=*.js --exclude=*.js.map ${OUT_DIR}/ ${NPM_DIR}
-#      echo "$(cat ${LICENSE_BANNER}) ${N} export * from './index'" > ${NPM_DIR}/${PACKAGE}.d.ts
-#      echo "{\"alias\": \"./index.metadata.json\"}" > ${NPM_DIR}/${PACKAGE}.metadata.json
-#      exit 0
       moveTypings ${NPM_DIR} ${PACKAGE}
-#      addNgcPackageJson ${NPM_DIR}/typings
 
       (
         cd  ${SRC_DIR}
@@ -472,8 +475,9 @@ do
       rsync -a ${OUT_DIR}/ ${NPM_DIR}
     fi
 
-    echo "======        Copy ${PACKAGE} package.json files"
+    echo "======        Copy ${PACKAGE} package.json and .externs.js files"
     rsync -am --include="package.json" --include="*/" --exclude=* ${SRC_DIR}/ ${NPM_DIR}/
+    rsync -am --include="*.externs.js" --include="*/" --exclude=* ${SRC_DIR}/ ${NPM_DIR}/
 
     cp ${ROOT_DIR}/README.md ${NPM_DIR}/
   fi
@@ -485,8 +489,6 @@ do
       cd ${NPM_DIR}
       echo "======       EXECUTE: perl -p -i -e \"s/0\.0\.0\-PLACEHOLDER/${VERSION}/g\" $""(grep -ril 0\.0\.0\-PLACEHOLDER .)"
       perl -p -i -e "s/0\.0\.0\-PLACEHOLDER/${VERSION}/g" $(grep -ril 0\.0\.0\-PLACEHOLDER .) < /dev/null 2> /dev/null
-      echo "======       EXECUTE: perl -p -i -e \"s/0\.0\.0\-ROUTERPLACEHOLDER/${ROUTER_VERSION}/g\" $""(grep -ril 0\.0\.0\-ROUTERPLACEHOLDER .)"
-      perl -p -i -e "s/0\.0\.0\-ROUTERPLACEHOLDER/${ROUTER_VERSION}/g" $(grep -ril 0\.0\.0\-ROUTERPLACEHOLDER .) < /dev/null 2> /dev/null
     )
   fi
 
diff --git a/circle.yml b/circle.yml
deleted file mode 100644
index 11bf953a58..0000000000
--- a/circle.yml
+++ /dev/null
@@ -1,12 +0,0 @@
-machine:
-  node:
-    version: 6.9.5
-
-dependencies:
-  pre:
-    - npm install -g npm@3.10.7
-    - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.21.3
-
-test:
-  override:
-    - gulp lint
diff --git a/docs/BAZEL.md b/docs/BAZEL.md
new file mode 100644
index 0000000000..9c8ddb85d5
--- /dev/null
+++ b/docs/BAZEL.md
@@ -0,0 +1,52 @@
+# Building Angular with Bazel
+
+Note: this doc is for developing Angular, it is _not_ public
+documentation for building an Angular application with Bazel.
+
+The Bazel build tool (http://bazel.build) provides fast, reliable
+incremental builds. We plan to migrate Angular's build scripts to
+Bazel.
+
+## Installation
+
+Install Bazel from the distribution, see [install] instructions.
+On Mac, just `brew install bazel`.
+
+Bazel will install a hermetic version of Node, npm, and Yarn when
+you run the first build.
+
+[install]: https://bazel.build/versions/master/docs/install.html
+
+## Configuration
+
+The `WORKSPACE` file indicates that our root directory is a
+Bazel project. It contains the version of the Bazel rules we
+use to execute build steps, from `build_bazel_rules_typescript`.
+The sources on [GitHub] are published from Google's internal
+repository (google3).
+
+That repository defines dependencies on specific versions of
+all the tools. You can run the tools Bazel installed, for
+example rather than `npm install` (which depends on whatever
+version you have installed on your machine), you can
+`bazel run @build_bazel_rules_typescript_node//:bin/npm install`.
+
+Bazel accepts a lot of options. We check in some options in the
+`.bazelrc` file. See the [bazelrc doc]. For example, if you don't
+want Bazel to create several symlinks in your project directory
+(`bazel-*`) you can add the line `build --symlink_prefix=/` to your
+`.bazelrc` file.
+
+[GitHub]: https://github.com/bazelbuild/rules_typescript
+[bazelrc doc]: https://bazel.build/versions/master/docs/bazel-user-manual.html#bazelrc
+
+## Building Angular
+
+- Build a package: `bazel build packages/core`
+- Build all packages: `bazel build packages/...`
+
+You can use [ibazel] to get a "watch mode" that continuously
+keeps the outputs up-to-date as you save sources. Note this is
+new as of May 2017 and not very stable yet.
+
+[ibazel]: https://github.com/bazelbuild/bazel-watcher
diff --git a/docs/COMMITTER.md b/docs/COMMITTER.md
index 1eeb4883be..b4f293ca2c 100644
--- a/docs/COMMITTER.md
+++ b/docs/COMMITTER.md
@@ -3,7 +3,7 @@
 Please see [Using git with Angular repositories](https://docs.google.com/document/d/1h8nijFSaa1jG_UE8v4WP7glh5qOUXnYtAtJh_gwOQHI/edit)
 for details about how we maintain a linear commit history, and the rules for committing.
 
-As a contributor, just read the instructions in [CONTRIBUTING.md](CONTRIBUTING.md) and send a pull request.
+As a contributor, just read the instructions in [CONTRIBUTING.md](../CONTRIBUTING.md) and send a pull request.
 Someone with committer access will do the rest.
 
 # Change approvals
diff --git a/docs/DEVELOPER.md b/docs/DEVELOPER.md
index b111c40c60..5d4e9a7334 100644
--- a/docs/DEVELOPER.md
+++ b/docs/DEVELOPER.md
@@ -21,9 +21,9 @@ following products on your development machine:
   [Windows](http://windows.github.com)); [GitHub's Guide to Installing
   Git](https://help.github.com/articles/set-up-git) is a good source of information.
 
-* [Node.js](http://nodejs.org), (version `>=5.4.1 <6`) which is used to run a development web server,
+* [Node.js](http://nodejs.org), (version `>=6.9.5 <7.0.0`) which is used to run a development web server,
   run tests, and generate distributable files. We also use Node's Package Manager, `npm`
-  (version `>=3.5.3 <4.0`), which comes with Node. Depending on your system, you can install Node either from
+  (version `>=3.10.7 <4.0.0`), which comes with Node. Depending on your system, you can install Node either from
   source or as a pre-packaged bundle.
 
 * [Java Development Kit](http://www.oracle.com/technetwork/es/java/javase/downloads/index.html) which is used
@@ -78,7 +78,7 @@ package scripts by invoking: e.g., `npm-run gulp build`
 
 
 *Option 3*: defining a bash alias like `alias nbin='PATH=$(npm bin):$PATH'` as detailed in this
-[Stackoverflow answer](http://stackoverflow.com/questions/9679932/how-to-use-package-installed-locally-in-node-modules/15157360#15157360) and used like this: e.g., `nbin gulp build`.
+[Stack Overflow answer](http://stackoverflow.com/questions/9679932/how-to-use-package-installed-locally-in-node-modules/15157360#15157360) and used like this: e.g., `nbin gulp build`.
 
 ## Installing Bower Modules
 
diff --git a/docs/NAMING.md b/docs/NAMING.md
index e2cf179e84..a04cdcf012 100644
--- a/docs/NAMING.md
+++ b/docs/NAMING.md
@@ -7,7 +7,7 @@ See: https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines
 
 Classes:
   - Example: `Compiler`, `ApplicationMetadata`
-  - Camel case with first letter upper-case
+  - Camel case with first letter uppercase
   - In general prefer single words. (This is so that when appending `Proto` or `Factory` the class 
     is still reasonable to work with.)
   - Should not end with `Impl` or any other word which describes a specific implementation of an 
@@ -21,10 +21,10 @@ Interfaces:
   
 Methods and functions:
   - Example: `bootstrap`, `someMethod`
-  - Should be camel case with first lower case
+  - Should be camel case with first letter lowercase
 
 
-Constants
+Constants:
   - Example: `CORE_DIRECTIVES`
   - Should be all uppercase with SNAKE_CASE
 
diff --git a/docs/PUBLIC_API.md b/docs/PUBLIC_API.md
index 187a3fa596..17fe8f2e55 100644
--- a/docs/PUBLIC_API.md
+++ b/docs/PUBLIC_API.md
@@ -2,6 +2,7 @@
 
 Our SemVer, timed-release cycle and deprecation policy currently applies to these npm packages:
 
+- `@angular/animations`
 - `@angular/core`
 - `@angular/common`
 - `@angular/platform-browser`
diff --git a/docs/RELEASE_SCHEDULE.md b/docs/RELEASE_SCHEDULE.md
index 7d268cb019..01ec1c1b6c 100644
--- a/docs/RELEASE_SCHEDULE.md
+++ b/docs/RELEASE_SCHEDULE.md
@@ -15,10 +15,9 @@ This page contains only planned and past unplanned releases.
 Due to serious regressions or other important reasons we reserve the right to release an unplanned patch or minor release.
 In such case, we'll update this document accordingly.
 
-The dates past March 2017 are just a guidance and might be adjusted slightly if necessary.
+The dates are just a guidance and might be adjusted slightly if necessary.
 
-
-## Tentative Schedule Until March 2017
+## Tentative Schedule Until September 2017
 
 <!--
 The table below is formatted so that it's easy to read and edit in both markdown and rendered html form.
@@ -33,50 +32,46 @@ If you see undesirable wrapping issues in the rendered form, please copy&paste t
 
 Week Of       | Stable Release<br>(@latest npm tag) | Beta/RC Release<br>(@next npm tag) | Note
 ------------- | ----------------------------------- | ---------------------------------- | ---------------------
-2016-09-14    | 2.0.0                               | -                                  | Major Version Release
-2016-09-21    | 2.0.1                               | 2.1.0-beta.0                       |
-2016‑09‑28    | -                                   | -                                  | Angular Connect
-2016-10-05    | 2.0.2                               | 2.1.0-rc.0                         |
-2016-10-12    | 2.1.0                               | -                                  | Minor Version Release
-2016-10-19    | 2.1.1                               | 2.2.0-beta.0                       |
-2016-10-26    | 2.1.2                               | 2.2.0-beta.1                       |
-2016-11-02    | 2.1.3                               | 2.2.0-rc.0                         |
-2016-11-09    | 2.2.0                               | -                                  | Minor Version Release
-2016-11-16    | 2.2.1                               | 2.3.0-beta.0                       |
-2016-11-23    | 2.2.2                               | 2.3.0-beta.1                       |
-*2016-11-23*  | *2.2.3*                             | -                                  | *Unplanned Patch Release to fix regressions*
-2016-11-30    | 2.2.4                               | 2.3.0-rc.0                         |
-2016-12-07    | 2.3.0                               | -                                  | Minor Version Release
-2016-12-14    | 2.3.1                               | 4.0.0-beta.0                       |
-*2016-12-21*  | *2.4.0*                             | -                                  | *Unplanned Minor Release due to release of RxJS 5.0.0*
-2016-12-21    | 2.4.1                               | 4.0.0-beta.1                       |
-2016-12-28    | -                                   | -                                  | Holiday Break
-2017-01-04    | 2.4.2                               | 4.0.0-beta.2                       |
-2017-01-11    | 2.4.3                               | 4.0.0-beta.3                       |
-2017-01-18    | 2.4.4                               | 4.0.0-beta.4                       |
-2017-01-25    | 2.4.5                               | 4.0.0-beta.5                       |
-2017-02-01    | 2.4.6                               | 4.0.0-beta.6                       |
-2017-02-08    | 2.4.7                               | 4.0.0-beta.7                       |
-2017-02-15    | 2.4.8                               | 4.0.0-beta.8                       |
-*2017-02-22*  |                                     | *4.0.0-rc.0*                       | *Unplanned release: bad rebase*
-2017-02-22    |                                     | 4.0.0-rc.1                         | No stable release - we were too busy with the RC
-2017-03-01    | 2.4.9                               | 4.0.0-rc.2                         |
-2017-03-08    | 2.4.10                              | 4.0.0-rc.3                         |
-2017-03-15    | 2.4.11                              | 4.0.0-rc.4                         |
-*2017-03-17*  |                                     | *4.0.0-rc.5*                       | *Unplanned release to fix compiler-cli dependency version*
-2017-03-22    | 4.0.0 + 2.4.12                      | -                                  | Major Version Release
+2017‑05‑01	  | 4.1.1                               | 4.2.0‑beta.0                       |
+2017‑05‑08	  | 4.1.2                               | 4.2.0‑beta.1                       |
+2017‑05‑15	  | 4.1.3                               | 4.2.0‑rc.0                         |
+2017‑05‑26	  | ‑                                   | 4.2.0‑rc.1                         |
+2017‑06‑01    | ‑                                   | 4.2.0‑rc.2                         |
+2017‑06‑05	  | 4.2.0                               | ‑                                  | Minor Version Release
+*2017‑06‑09*  | 4.2.1                               | ‑                                  | *Regression Patch Release*
+2017-06-12    | 4.2.2                               | ‑                                  |
+*2017-06-16*  | 4.2.3                               | ‑                                  | *Regression Patch Release*
+2017‑06‑19	  | 4.2.4                               | 4.3.0‑beta.0                       |
+2017‑06‑26	  | 4.2.5                               | 4.3.0‑beta.1                       |
+2017‑07‑03	  | 4.2.6                               | 4.3.0‑rc.0                         |
+2017‑07‑10	  | 4.3.0                               | -                                  | Minor Version Release
+2017‑07‑17	  | 4.3.1                               | 5.0.0‑beta.0                       |
+2017‑07‑24	  | 4.3.2                               | 5.0.0‑beta.1                       |
+2017‑07‑31	  | 4.3.3                               | 5.0.0‑beta.2                       |
+2017‑08‑07	  | 4.3.4                               | 5.0.0‑beta.3                       |
+2017‑08‑14    | 4.3.5                               | 5.0.0‑beta.4                       |
+2017‑08‑21	  | 4.3.6                               | 5.0.0‑rc.0                         |
+2017‑08‑28	  | 4.3.7                               | 5.0.0‑rc.1                         |
+2017‑09‑04	  | 4.3.8                               | 5.0.0‑rc.2                         |
+2017‑09‑11	  | 4.3.9                               | 5.0.0‑rc.3                         |
+2017‑09‑18	  | 5.0.0                               | ‑                                  | Major Version Release
 
-
-## Tentative Schedule After March 2017
+## Tentative Schedule After September 2017
 
  Date                   | Stable Release | Compatibility`*`
  ---------------------- | -------------- | ----------------
- September/October 2017 | 5.0.0          | ^4.0.0
  March 2018             | 6.0.0          | ^5.0.0
  September/October 2018 | 7.0.0          | ^6.0.0
 
- `*` The goal of the backwards compatibility promise, is to ensure that changes in the core framework and tooling don't break the existing ecosystem of components and applications and don't put undue upgrade/migration burden on Angular application and component authors.
+ `*` The primary goal of the backwards compatibility promise is to ensure that changes in the core framework and tooling don't break the existing ecosystem of components and applications and don't put undue upgrade/migration burden on Angular application and component authors.
 
+## Long-Term Supported (LTS) Versions
+
+ Version     | LTS Start Date | LTS End Date
+ ----------- | -------------- | ------------
+ ^4.0.0      | October 2017   | October 2018
+
+In the long-term support state, only the critical fixes and security patches will be merged and released.
 
 ## More Info & Resources
 
diff --git a/docs/SAVED_REPLIES.md b/docs/SAVED_REPLIES.md
index 336eef56a8..f4eabfe6a9 100644
--- a/docs/SAVED_REPLIES.md
+++ b/docs/SAVED_REPLIES.md
@@ -19,6 +19,12 @@ I'm sorry but we don't understand the problem you are reporting.
 If the problem still exists please open a new issue and provide a plunker reproducing the problem and describing the difference between the expected and current behavior. You can use this plunker template: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue
 ```
 
+## Angular: Plunker Needed (v1)
+```
+I'm sorry but reported issues require a plunker reproducing the problem.
+
+If this issue persists, please create a plunker using this template and describe the difference between the expected and current behavior and create a new issue: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue
+```
 
 ## Angular: Duplicate (v1)
 ```
@@ -38,6 +44,10 @@ If the problem still persists, please file a new issue and ensure you provide al
 I'm sorry but this issue is not caused by Angular. Please contact the author(s) of project <PROJECT NAME> or file issue on their issue tracker.
 ```
 
+## Angular: Behaving as Expected (v1)
+```
+It appears this behaves as expected. If you still feel there is an issue, please provide further details in a new issue.
+```
 
 ## Angular: Non-reproducible (v1)
 ```
diff --git a/docs/TOOLS.md b/docs/TOOLS.md
index 8bfcb8f35c..803b3aa566 100644
--- a/docs/TOOLS.md
+++ b/docs/TOOLS.md
@@ -37,7 +37,7 @@ ng.profiler.timeChangeDetection();
 ### Change detection profiler
 
 If your application is janky (it misses frames) or is slow according to other
-metrics it is important to find the root cause of the issue. Change detection
+metrics, it is important to find the root cause of the issue. Change detection
 is a phase in Angular's lifecycle that detects changes in values that are
 bound to UI, and if it finds a change it performs the corresponding UI update.
 However, sometimes it is hard to tell if the slowness is due to the act of
@@ -45,7 +45,7 @@ computing the changes being slow, or due to the act of applying those changes
 to the UI. For your application to be performant it is important that the
 process of computing changes is very fast. For best results it should be under
 3 milliseconds in order to leave room for the application logic, the UI updates
-and browser's rendering pipeline to fit withing the 16 millisecond frame
+and browser's rendering pipeline to fit within the 16 millisecond frame
 (assuming the 60 FPS target frame rate).
 
 Change detection profiler repeatedly performs change detection without invoking
diff --git a/docs/TRIAGE_AND_LABELS.md b/docs/TRIAGE_AND_LABELS.md
index 2617d88b14..86736ef745 100644
--- a/docs/TRIAGE_AND_LABELS.md
+++ b/docs/TRIAGE_AND_LABELS.md
@@ -1,48 +1,51 @@
-# Triage Process and Github Labels for Angular
+# Triage Process and GitHub Labels for Angular
 
-This document describes how the Angular team uses labels and milestones 
+This document describes how the Angular team uses labels and milestones
 to triage issues on github. The basic idea of the process is that
-caretaker only assigns a component and type (bug, feature) label. The 
-owner of the component than is in full control of how the issues should 
+caretaker only assigns a component and type (bug, feature) label. The
+owner of the component than is in full control of how the issues should
 be triaged further.
 
-Once this process is implemented and in use, we will revisit it to see 
+Once this process is implemented and in use, we will revisit it to see
 if further labeling is needed.
 
-## Components
+## Label Types
 
-A caretaker should be able to determine which component the issue 
+### Components
+
+A caretaker should be able to determine which component the issue
 belongs to. The components have a clear piece of source code associated
-with it.
+with it within the `/packages/` folder of this repo.
 
-* `comp: animations`: `@matsko`
-* `comp: benchpress`: `@tbosch`
-* `comp: build & ci`: `@IgorMinar` -- All build and CI scripts 
-* `comp: common`: `@mhevery`  -- This includes core components / pipes.
-* `comp: core & compiler`: `@tbosch` -- Because core and compiler are very 
-  intertwined, we will be treating them as one.
-* `comp: forms`: `@kara`
-* `comp: http`: `@jeffbcross`
-* `comp: i18n`: `@vicb`
-* `comp: language service`: `@chuckjaz`
-* `comp: metadata-extractor`: `@chuckjaz`
-* `comp: router`: `@vicb`
-* `comp: testing`: `@juliemr`
-* `comp: upgrade`: `@mhevery`
-* `comp: web-worker`: `@vicb`
-* `comp: zones`: `@mhevery`
+* `comp: aio` - the angular.io application
+* `comp: animations`
+* `comp: benchpress`
+* `comp: common` - this includes core components / pipes
+* `comp: core, compiler` - because core, compiler, compiler-cli and
+  browser-platforms are very intertwined, we will be treating them as one
+* `comp: forms`
+* `comp: http`
+* `comp: i18n`
+* `comp: language service`
+* `comp: router`
+* `comp: testing`
+* `comp: upgrade`
+* `comp: web-worker`
+* `comp: zones`
 
 There are few components which are cross-cutting. They don't have
 a clear location in the source tree. We will treat them as a component
 even thought no specific source tree is associated with them.
 
-* `comp: docs`: `@naomiblack`
-* `comp: packaging`: `@IgorMinar`
-* `comp: performance`: `@tbosch`
-* `comp: security`: `@IgorMinar`
+* `comp: build & ci` - all build and CI scripts
+* `comp: docs` - documentation, including API docs, guides, tutorial
+* `comp: packaging`
+* `comp: performance`
+* `comp: security`
 
 
-## Type
+### Type
+
 What kind of problem is this?
 
 * `type: RFC / discussion / question`
@@ -95,62 +98,49 @@ These criteria are then used to calculate a "user pain" score as follows:
 `pain = severity × frequency`
 
 
-### Assigning Issues to Milestones
-
-Any issue that is being worked on must have:
-
-* An `Assignee`: The person doing the work.
-* A `Milestone`: When we expect to complete this work.
-
-We aim to only have at most three milestones open at a time:
-
-* Closing Milestone: A milestone with a very small number of issues, about to release. 
-* Current Milestone: Work that we plan to complete within one week.
-* Next Milestone: Work that is > 1 week but current for the team.
-
-The [backlog](https://github.com/angular/angular/issues?q=is%3Aopen+is%3Aissue+no%3Amilestone) 
-consists of all issues that have been triaged but do not have an assignee or milestone.  
-
 ## Triaged vs Untrained PRs
 
-PRs should also be label with a `comp: *` so that it is clear which 
+PRs should also be label with a `comp: *` so that it is clear which
 primary area the PR effects.
 
-Because of the cumulative pain associated with rebasing PRs, we triage PRs daily, and 
-closing or reviewing PRs is a top priority ahead of other ongoing work. 
+Because of the cumulative pain associated with rebasing PRs, we triage PRs daily, and
+closing or reviewing PRs is a top priority ahead of other ongoing work.
 
 Every triaged PR must have a `pr_action` label assigned to it and an assignee:
- 
-* `pr_action: review` -- work is complete and comment is needed from the assignee.
-* `pr_action: cleanup` -- more work is needed from the current assignee. 
-* `pr_action: discuss` -- discussion is needed, to be led by the current assignee.
-* `pr_action: merge` -- the PR should be merged. Add this to a PR when you would like to 
+
+* `pr_action: review` - work is complete and comment is needed from the assignee.
+* `pr_action: cleanup` - more work is needed from the current assignee.
+* `pr_action: discuss` - discussion is needed, to be led by the current assignee.
+* `pr_action: merge` - the PR should be merged. Add this to a PR when you would like to
   trigger automatic merging following a successful build. This is described in [COMMITTER.md](COMMITTER.md).
 
 In addition, PRs can have the following states:
 
-* `pr_state: LGTM` -- PR may have outstanding changes but does not require further review.
-* `pr_state: WIP` -- PR is experimental or rapidly changing. Not ready for review or triage.
-* `pr_state: blocked` -- PR is blocked on an issue or other PR. Not ready for review or triage.
+* `pr_state: WIP` - PR is experimental or rapidly changing. Not ready for review or triage.
+* `pr_state: blocked` - PR is blocked on an issue or other PR. Not ready for review or triage.
 
-Note that an LGTM state does not mean a PR is ready to merge: for example, a reviewer might set the
-LGTM state but request a minor tweak that doesn't need further review, e.g., a rebase or small 
+
+## PR Approvals
+
+Before a PR can be merged it must be approved by the appropriate reviewer(s).
+
+To ensure that there right people review each change, we configured [PullApprove bot](https://about.pullapprove.com/) via (`.pullapprove.yaml`) to provide aggregate approval state via the GitHub PR Status API.
+
+Note that approved state does not mean a PR is ready to be merged. For example, a reviewer might
+approve the PR but request a minor tweak that doesn't need further review, e.g., a rebase or small
 uncontroversial change.
 
-PRs do not need to be assigned to milestones, unless a milestone release should be held for that 
-PR to land.
-
 
 ## Special Labels
 
 ### action:design
-More active discussion is needed before the issue can be worked on further. Typically used for 
+More active discussion is needed before the issue can be worked on further. Typically used for
 `type: feature` or `type: RFC/discussion/question`
 
 [See all issues that need discussion](https://github.com/angular/angular/labels/action:%20Design)
 
-### cla
-Managed by googlebot. Indicates whether a PR has a CLA on file for its author(s). Only issues with 
+### cla: yes, cla: no
+Managed by googlebot. Indicates whether a PR has a CLA on file for its author(s). Only issues with
 `cla:yes` should be merged into master.
 
 ### WORKS_AS_INTENDED
diff --git a/gulpfile.js b/gulpfile.js
index 6ddf1fc4c1..ff78cc396a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -29,7 +29,8 @@ function loadTask(fileName, taskName) {
 
 gulp.task('format:enforce', loadTask('format', 'enforce'));
 gulp.task('format', loadTask('format', 'format'));
-gulp.task('build.sh', loadTask('build'));
+gulp.task('build.sh', loadTask('build', 'all'));
+gulp.task('build.sh:no-bundle', loadTask('build', 'no-bundle'));
 gulp.task('public-api:enforce', loadTask('public-api', 'enforce'));
 gulp.task('public-api:update', ['build.sh'], loadTask('public-api', 'update'));
 gulp.task('lint', ['format:enforce', 'validate-commit-messages', 'tslint']);
diff --git a/integration/.gitignore b/integration/.gitignore
index 58e631984a..297cd21083 100644
--- a/integration/.gitignore
+++ b/integration/.gitignore
@@ -1,4 +1,3 @@
-/rxjs/
 built/
 dist/
 vendor/
@@ -6,5 +5,6 @@ vendor/
 */src/*.js
 **/*.ngfactory.ts
 **/*.ngsummary.json
+**/*.ngsummary.ts
 */yarn*
 */.yarn_local_cache*
diff --git a/integration/README.md b/integration/README.md
index b189c02834..8036b35a48 100644
--- a/integration/README.md
+++ b/integration/README.md
@@ -32,13 +32,7 @@ Angular's `node_modules` is installed.
 
 ## Running integration tests
 
-The first time you run the tests, you'll need some setup:
-
-```shell
-$ ./integration/build_rxjs_es6.sh
-```
-
-Now you can iterate on the tests by keeping the dist folder up-to-date.
+You can iterate on the tests by keeping the dist folder up-to-date.
 See the `package.json` of the test(s) you're debugging, to see which dist/ folders they install from.
 Then run the right `tsc --watch` command to keep those dist folders up-to-date, for example:
 
diff --git a/integration/build_rxjs_es6.sh b/integration/build_rxjs_es6.sh
deleted file mode 100755
index 2df8e9b2f1..0000000000
--- a/integration/build_rxjs_es6.sh
+++ /dev/null
@@ -1,19 +0,0 @@
-#!/usr/bin/env bash
-
-# This script builds rxjs from source, with an ES6 target, and with tsickle turned on.
-# We need to do this until we work with the RxJS team to get a distribution that works
-# with Closure Compiler.
-# Note that in nodejs, we still run the standard RxJS distribution. This one is only
-# used for the bundle that targets a browser runtime.
-# TODO(alexeagle): discuss with Jay Phelps once we have a recommendation
-
-set -e -o pipefail
-
-cd `dirname $0`
-
-rm -rf rxjs
-git clone https://github.com/ReactiveX/rxjs.git --depth=200
-git -C rxjs/ checkout 5.0.3
-cp rxjs.tsconfig.json rxjs/
-TSC="node --max-old-space-size=3000 ../dist/tools/@angular/tsc-wrapped/src/main"
-$TSC -p rxjs/rxjs.tsconfig.json
diff --git a/integration/hello_world__closure/bundle.sh b/integration/hello_world__closure/bundle.sh
deleted file mode 100755
index 0b4771698d..0000000000
--- a/integration/hello_world__closure/bundle.sh
+++ /dev/null
@@ -1,53 +0,0 @@
-#!/usr/bin/env bash
-
-# Build a folder using angular ES6 and the closure compiler
-
-set -e -o pipefail
-
-# The ES6 distro we built for rxjs works only in the browser, not in nodejs.
-# Since we installed rxjs in node_modules for ngc to use, we have to point
-# to the alternate distro when compiling with closure.
-rm -rf vendor
-mkdir vendor
-cp -pr ../rxjs/dist/es6 vendor/rxjs
-
-CLOSURE_ARGS=(
-  "--language_in=ES6_STRICT"
-  "--language_out=ES5"
-  "--compilation_level=ADVANCED_OPTIMIZATIONS"
-  "--warning_level=QUIET"
-  "--js_output_file=dist/bundle.js"
-  "--create_source_map=%outname%.map"
-  "--variable_renaming_report=dist/variable_renaming_report"
-  "--property_renaming_report=dist/property_renaming_report"
-
-  # Don't include ES6 polyfills
-  "--rewrite_polyfills=false"
-
-  # List of path prefixes to be removed from ES6 & CommonJS modules.
-  "--js_module_root=node_modules/@angular/core"
-  "--js_module_root=node_modules/@angular/common"
-  "--js_module_root=node_modules/@angular/compiler"
-  "--js_module_root=node_modules/@angular/platform-browser"
-  "--js_module_root=vendor"
-
-  # Uncomment for easier debugging
-  # "--formatting=PRETTY_PRINT"
-
-  e2e/testability.externs.js
-  node_modules/zone.js/dist/zone.js
-  $(find -L vendor/rxjs -name *.js)
-  node_modules/@angular/core/@angular/core.js
-  node_modules/@angular/common/@angular/common.js
-  node_modules/@angular/compiler/@angular/compiler.js
-  node_modules/@angular/platform-browser/@angular/platform-browser.js
-  "built/src/*.js"
-  "--entry_point=./built/src/main"
-)
-
-java -jar node_modules/google-closure-compiler/compiler.jar $(echo ${CLOSURE_ARGS[*]})
-# gzip on Travis doesn't have --keep option so copy the original file first
-cp dist/bundle.js dist/bundle.tmp
-gzip -f dist/bundle.js
-mv dist/bundle.tmp dist/bundle.js
-ls -alH dist/bundle*
diff --git a/integration/hello_world__closure/closure.conf b/integration/hello_world__closure/closure.conf
new file mode 100644
index 0000000000..8393a38b29
--- /dev/null
+++ b/integration/hello_world__closure/closure.conf
@@ -0,0 +1,30 @@
+--compilation_level=ADVANCED_OPTIMIZATIONS
+--language_out=ES5
+--js_output_file=dist/bundle.js
+--output_manifest=dist/manifest.MF
+--variable_renaming_report=dist/variable_renaming_report
+--property_renaming_report=dist/property_renaming_report
+--create_source_map=%outname%.map
+
+--warning_level=QUIET
+--dependency_mode=STRICT
+--rewrite_polyfills=false
+
+node_modules/zone.js/dist/zone_externs.js
+
+--js node_modules/rxjs/**.js
+--process_common_js_modules
+--module_resolution=node
+
+node_modules/@angular/core/@angular/core.js
+--js_module_root=node_modules/@angular/core
+node_modules/@angular/core/src/testability/testability.externs.js
+
+node_modules/@angular/common/@angular/common.js
+--js_module_root=node_modules/@angular/common
+
+node_modules/@angular/platform-browser/@angular/platform-browser.js
+--js_module_root=node_modules/@angular/platform-browser
+
+--js built/**.js
+--entry_point=built/src/main
diff --git a/integration/hello_world__closure/e2e/browser.config.json b/integration/hello_world__closure/e2e/browser.config.json
index 2886960214..dcdae63008 100644
--- a/integration/hello_world__closure/e2e/browser.config.json
+++ b/integration/hello_world__closure/e2e/browser.config.json
@@ -1,14 +1,15 @@
 {
   "open": false,
-  "logLevel": "silent",  
+  "logLevel": "silent",
   "port": 8080,
   "server": {
     "baseDir": "src",
     "routes": {
-      "/dist": "dist"
+      "/dist": "dist",
+      "/node_modules": "node_modules"
     },
     "middleware": {
       "0": null
     }
   }
-}
+}
\ No newline at end of file
diff --git a/integration/hello_world__closure/e2e/testability.externs.js b/integration/hello_world__closure/e2e/testability.externs.js
deleted file mode 100644
index a17161d38e..0000000000
--- a/integration/hello_world__closure/e2e/testability.externs.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/** @externs */
-// Workaround for #11119
-// TODO(alexeagle): these externs ought to be distributed with Angular.
-/**
- * @externs
- * @suppress {duplicate}
- */
-// NOTE: generated by tsickle, do not edit.
-
-/** @record @struct */
-function BrowserNodeGlobal() {}
- /** @type {?} */
-BrowserNodeGlobal.prototype.getAngularTestability;
- /** @type {?} */
-BrowserNodeGlobal.prototype.getAllAngularTestabilities;
- /** @type {?} */
-BrowserNodeGlobal.prototype.getAllAngularRootElements;
- /** @type {?} */
-BrowserNodeGlobal.prototype.frameworkStabilizers;
-
-/**
- * @param {?} condition
- * @return {?}
- */
-BrowserNodeGlobal.prototype.assert = function(condition) {};
-
-/** @record @struct */
-function PublicTestability() {}
-
-/**
- * @return {?}
- */
-PublicTestability.prototype.isStable = function() {};
-
-/**
- * @param {?} callback
- * @return {?}
- */
-PublicTestability.prototype.whenStable = function(callback) {};
-
-/**
- * @param {?} using
- * @param {?} provider
- * @param {?} exactMatch
- * @return {?}
- */
-PublicTestability.prototype.findProviders = function(using, provider, exactMatch) {};
\ No newline at end of file
diff --git a/integration/hello_world__closure/package.json b/integration/hello_world__closure/package.json
index 10bb4e51f2..b5cecce1de 100644
--- a/integration/hello_world__closure/package.json
+++ b/integration/hello_world__closure/package.json
@@ -10,22 +10,23 @@
     "@angular/core": "file:../../dist/packages-dist/core",
     "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
     "@angular/platform-server": "file:../../dist/packages-dist/platform-server",
-    "@angular/tsc-wrapped": "file:../../dist/tools/@angular/tsc-wrapped",
-    "google-closure-compiler": "20161201.0.0",
-    "rxjs": "file:../../node_modules/rxjs",
+    "@angular/tsc-wrapped": "file:../../dist/packages-dist/tsc-wrapped",
+    "google-closure-compiler": "20170409.0.0",
+    "rxjs": "5.3.1",
     "typescript": "2.1.6",
-    "zone.js": "0.7.6"
+    "zone.js": "0.8.6"
   },
   "devDependencies": {
     "@types/jasmine": "2.5.41",
-    "concurrently": "3.1.0",
+    "concurrently": "3.4.0",
     "lite-server": "2.2.2",
     "protractor": "file:../../node_modules/protractor"
   },
   "scripts": {
-    "test": "ngc && ./bundle.sh && concurrently \"yarn run serve\" \"yarn run protractor\" --kill-others --success first",
+    "closure": "java -jar node_modules/google-closure-compiler/compiler.jar --flagfile closure.conf",
+    "test": "ngc && yarn run closure && concurrently \"yarn run serve\" \"yarn run protractor\" --kill-others --success first",
     "serve": "lite-server -c e2e/browser.config.json",
     "preprotractor": "tsc -p e2e",
     "protractor": "protractor e2e/protractor.config.js"
   }
-}
+}
\ No newline at end of file
diff --git a/integration/hello_world__closure/src/index.html b/integration/hello_world__closure/src/index.html
index c2190cc743..ffbd2616e9 100644
--- a/integration/hello_world__closure/src/index.html
+++ b/integration/hello_world__closure/src/index.html
@@ -1,14 +1,18 @@
 <!doctype html>
 <html>
+
 <head>
   <meta charset="utf-8">
   <title>Hello World</title>
   <base href="/">
 </head>
-<body>
-<hello-world-app>Loading...</hello-world-app>
 
-<script src="dist/bundle.js"></script>
+<body>
+  <hello-world-app>Loading...</hello-world-app>
+
+  <script src="node_modules/zone.js/dist/zone.min.js"></script>
+  <script src="dist/bundle.js"></script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/integration/hello_world__closure/tsconfig.json b/integration/hello_world__closure/tsconfig.json
index 0703f4d82a..34cc0b9fb2 100644
--- a/integration/hello_world__closure/tsconfig.json
+++ b/integration/hello_world__closure/tsconfig.json
@@ -1,7 +1,8 @@
 {
   "angularCompilerOptions": {
     "annotationsAs": "static fields",
-    "annotateForClosureCompiler": true
+    "annotateForClosureCompiler": true,
+    "alwaysCompileGeneratedCode": true
   },
 
   "compilerOptions": {
@@ -13,7 +14,8 @@
     "noImplicitAny": false,
     "sourceMap": false,
     "experimentalDecorators": true,
-    "outDir": "built/src",
+    "outDir": "built",
+    "rootDir": ".",
     "declaration": true,
     "types": []
   },
diff --git a/integration/hello_world__systemjs_umd/package.json b/integration/hello_world__systemjs_umd/package.json
index 6615dc3dba..41f2a7dc0d 100644
--- a/integration/hello_world__systemjs_umd/package.json
+++ b/integration/hello_world__systemjs_umd/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@types/jasmine": "2.5.41",
-    "concurrently": "3.1.0",
+    "concurrently": "3.4.0",
     "lite-server": "2.2.2",
     "protractor": "file:../../node_modules/protractor"
   }
diff --git a/integration/language_service_plugin/package.json b/integration/language_service_plugin/package.json
index 9bacc6cf25..c3e751f091 100644
--- a/integration/language_service_plugin/package.json
+++ b/integration/language_service_plugin/package.json
@@ -2,7 +2,7 @@
   "name": "language_service_plugin",
   "version": "0.0.0",
   "license": "MIT",
-  "decription": "Angular Langauge Service plugin integration test",
+  "decription": "Angular Language Service plugin integration test",
   "dependencies": {
     "@angular/animations": "file:../../dist/packages-dist/animations",
     "@angular/common": "file:../../dist/packages-dist/common",
@@ -12,7 +12,7 @@
     "@angular/language-service": "file:../../dist/packages-dist/language-service",
     "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
     "@angular/platform-server": "file:../../dist/packages-dist/platform-server",
-    "@angular/tsc-wrapped": "file:../../dist/tools/@angular/tsc-wrapped",
+    "@angular/tsc-wrapped": "file:../../dist/packages-dist/tsc-wrapped",
     "@types/minimist": "^1.2.0",
     "@types/node": "^7.0.5",
     "minimist": "^1.2.0",
diff --git a/integration/language_service_plugin/typescripts/2.3/package.json b/integration/language_service_plugin/typescripts/2.3/package.json
index 1654fdfe97..a76f86606d 100644
--- a/integration/language_service_plugin/typescripts/2.3/package.json
+++ b/integration/language_service_plugin/typescripts/2.3/package.json
@@ -10,6 +10,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "typescript": "2.3.0-dev.20170223"
+    "typescript": "2.3.0"
   }
 }
diff --git a/integration/language_service_plugin/typescripts/2.3/yarn.lock b/integration/language_service_plugin/typescripts/2.3/yarn.lock
index 600ef21a14..978ea5c25e 100644
--- a/integration/language_service_plugin/typescripts/2.3/yarn.lock
+++ b/integration/language_service_plugin/typescripts/2.3/yarn.lock
@@ -2,6 +2,6 @@
 # yarn lockfile v1
 
 
-typescript@2.3.0-dev.20170223:
-  version "2.3.0-dev.20170223"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.0-dev.20170223.tgz#286494c36625ea2eb26f963ed205cd9ca5c41447"
+typescript@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.0.tgz#2e63e09284392bc8158a2444c33e2093795c0418"
diff --git a/integration/run_tests.sh b/integration/run_tests.sh
index 1d37ff1f3c..53a64ad566 100755
--- a/integration/run_tests.sh
+++ b/integration/run_tests.sh
@@ -4,12 +4,6 @@ set -e -o pipefail
 
 cd `dirname $0`
 
-if [ ! -d "rxjs/dist/es6" ]; then
-  echo "You must run build the ES2015 version of RxJS for some tests:"
-  echo "./integration/build_rxjs_es6.sh"
-  exit 1
-fi
-
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code
 readonly cache=.yarn_local_cache
@@ -20,7 +14,7 @@ rm_cache
 mkdir $cache
 trap rm_cache EXIT
 
-for testDir in $(ls | grep -v rxjs | grep -v node_modules) ; do
+for testDir in $(ls | grep -v node_modules) ; do
   [[ -d "$testDir" ]] || continue
   echo "#################################"
   echo "Running integration test $testDir"
diff --git a/integration/rxjs.tsconfig.json b/integration/rxjs.tsconfig.json
deleted file mode 100644
index 5c8124d186..0000000000
--- a/integration/rxjs.tsconfig.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "angularCompilerOptions": {
-    "skipMetadataEmit": true,
-    "annotationsAs": "static fields",
-    "annotateForClosureCompiler": true
-  },
-
-  "compilerOptions": {
-    "types": [],
-    /**
-      * Remaining options are copied from
-      * https://github.com/ReactiveX/rxjs/blob/cba74135810a8e6bbe0b3c7732e8544b0869589e/tsconfig.json
-      * TODO(alexeagle): use "extends" instead when Angular is on TS 2.1
-      */
-    "removeComments": false,
-    "preserveConstEnums": true,
-    "sourceMap": true,
-    "declaration": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "moduleResolution": "node",
-    "module": "es2015",
-    "target": "es6",
-    "outDir": "dist/es6",
-    "lib": [
-      "es5",
-      "es2015.iterable",
-      "es2015.collection",
-      "es2015.promise",
-      "dom"
-    ]
-  },
-  "formatCodeOptions": {
-    "indentSize": 2,
-    "tabSize": 2
-  },
-  "files": [
-    "src/Rx.ts"
-  ]
-}
diff --git a/integration/typings_test_ts21/include-all.ts b/integration/typings_test_ts21/include-all.ts
index 499b6e6024..eaa53d24c2 100644
--- a/integration/typings_test_ts21/include-all.ts
+++ b/integration/typings_test_ts21/include-all.ts
@@ -8,17 +8,18 @@
 
 import * as compiler from '@angular/compiler';
 import * as compilerTesting from '@angular/compiler/testing';
-import * as coreTesting from '@angular/core';
-import * as core from '@angular/core/testing';
-import * as httpTesting from '@angular/http';
-import * as http from '@angular/http/testing';
-import * as platformBrowserTesting from '@angular/platform-browser';
+import * as core from '@angular/core';
+import * as coreTesting from '@angular/core/testing';
+import * as forms from '@angular/forms';
+import * as http from '@angular/http';
+import * as httpTesting from '@angular/http/testing';
 import * as platformBrowserDynamic from '@angular/platform-browser-dynamic';
-import * as platformBrowser from '@angular/platform-browser/testing';
-import * as platformServerTesting from '@angular/platform-server';
-import * as platformServer from '@angular/platform-server/testing';
-import * as routerTesting from '@angular/router';
-import * as router from '@angular/router/testing';
+import * as platformBrowser from '@angular/platform-browser';
+import * as platformBrowserTesting from '@angular/platform-browser/testing';
+import * as platformServer from '@angular/platform-server';
+import * as platformServerTesting from '@angular/platform-server/testing';
+import * as router from '@angular/router';
+import * as routerTesting from '@angular/router/testing';
 import * as upgrade from '@angular/upgrade';
 
 export default {
@@ -26,6 +27,7 @@ export default {
   compilerTesting,
   core,
   coreTesting,
+  forms,
   http,
   httpTesting,
   platformBrowser,
diff --git a/integration/typings_test_ts21/package.json b/integration/typings_test_ts21/package.json
index c051e33df6..b9bd98bb60 100644
--- a/integration/typings_test_ts21/package.json
+++ b/integration/typings_test_ts21/package.json
@@ -9,12 +9,13 @@
     "@angular/compiler": "file:../../dist/packages-dist/compiler",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "@angular/core": "file:../../dist/packages-dist/core",
+    "@angular/forms": "file:../../dist/packages-dist/forms",
     "@angular/http": "file:../../dist/packages-dist/http",
     "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
     "@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
     "@angular/platform-server": "file:../../dist/packages-dist/platform-server",
     "@angular/router": "file:../../dist/packages-dist/router",
-    "@angular/tsc-wrapped": "file:../../dist/tools/@angular/tsc-wrapped",
+    "@angular/tsc-wrapped": "file:../../dist/packages-dist/tsc-wrapped",
     "@angular/upgrade": "file:../../dist/packages-dist/upgrade",
     "@types/jasmine": "2.5.41",
     "rxjs": "file:../../node_modules/rxjs",
diff --git a/integration/typings_test_ts21/tsconfig.json b/integration/typings_test_ts21/tsconfig.json
index 7c9539fff6..468b20cdac 100644
--- a/integration/typings_test_ts21/tsconfig.json
+++ b/integration/typings_test_ts21/tsconfig.json
@@ -9,8 +9,7 @@
     "target": "es5",
     "lib": ["es5", "dom", "es2015.collection", "es2015.iterable", "es2015.promise"],
     "types": [],
-    // TODO(i): strictNullChecks should turned on but are temporarily disabled due to #15432
-    "strictNullChecks": false
+    "strictNullChecks": true
   },
   "files": [
     "include-all.ts",
diff --git a/integration/typings_test_ts22/include-all.ts b/integration/typings_test_ts22/include-all.ts
index 499b6e6024..eaa53d24c2 100644
--- a/integration/typings_test_ts22/include-all.ts
+++ b/integration/typings_test_ts22/include-all.ts
@@ -8,17 +8,18 @@
 
 import * as compiler from '@angular/compiler';
 import * as compilerTesting from '@angular/compiler/testing';
-import * as coreTesting from '@angular/core';
-import * as core from '@angular/core/testing';
-import * as httpTesting from '@angular/http';
-import * as http from '@angular/http/testing';
-import * as platformBrowserTesting from '@angular/platform-browser';
+import * as core from '@angular/core';
+import * as coreTesting from '@angular/core/testing';
+import * as forms from '@angular/forms';
+import * as http from '@angular/http';
+import * as httpTesting from '@angular/http/testing';
 import * as platformBrowserDynamic from '@angular/platform-browser-dynamic';
-import * as platformBrowser from '@angular/platform-browser/testing';
-import * as platformServerTesting from '@angular/platform-server';
-import * as platformServer from '@angular/platform-server/testing';
-import * as routerTesting from '@angular/router';
-import * as router from '@angular/router/testing';
+import * as platformBrowser from '@angular/platform-browser';
+import * as platformBrowserTesting from '@angular/platform-browser/testing';
+import * as platformServer from '@angular/platform-server';
+import * as platformServerTesting from '@angular/platform-server/testing';
+import * as router from '@angular/router';
+import * as routerTesting from '@angular/router/testing';
 import * as upgrade from '@angular/upgrade';
 
 export default {
@@ -26,6 +27,7 @@ export default {
   compilerTesting,
   core,
   coreTesting,
+  forms,
   http,
   httpTesting,
   platformBrowser,
diff --git a/integration/typings_test_ts22/package.json b/integration/typings_test_ts22/package.json
index 2152eb41e9..987838f182 100644
--- a/integration/typings_test_ts22/package.json
+++ b/integration/typings_test_ts22/package.json
@@ -9,12 +9,13 @@
     "@angular/compiler": "file:../../dist/packages-dist/compiler",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "@angular/core": "file:../../dist/packages-dist/core",
+    "@angular/forms": "file:../../dist/packages-dist/forms",
     "@angular/http": "file:../../dist/packages-dist/http",
     "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
     "@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
     "@angular/platform-server": "file:../../dist/packages-dist/platform-server",
     "@angular/router": "file:../../dist/packages-dist/router",
-    "@angular/tsc-wrapped": "file:../../dist/tools/@angular/tsc-wrapped",
+    "@angular/tsc-wrapped": "file:../../dist/packages-dist/tsc-wrapped",
     "@angular/upgrade": "file:../../dist/packages-dist/upgrade",
     "@types/jasmine": "2.5.41",
     "rxjs": "file:../../node_modules/rxjs",
diff --git a/integration/typings_test_ts22/tsconfig.json b/integration/typings_test_ts22/tsconfig.json
index 02f12fe4b7..d9603e8dce 100644
--- a/integration/typings_test_ts22/tsconfig.json
+++ b/integration/typings_test_ts22/tsconfig.json
@@ -15,11 +15,10 @@
       "es2015.promise"
     ],
     "types": [],
-    // TODO(i): strictNullChecks should turned on but are temporarily disabled due to #15432
-    "strictNullChecks": false
+    "strictNullChecks": true
   },
   "files": [
     "include-all.ts",
     "node_modules/@types/jasmine/index.d.ts"
   ]
-}
\ No newline at end of file
+}
diff --git a/integration/typings_test_ts23/include-all.ts b/integration/typings_test_ts23/include-all.ts
new file mode 100644
index 0000000000..eaa53d24c2
--- /dev/null
+++ b/integration/typings_test_ts23/include-all.ts
@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as compiler from '@angular/compiler';
+import * as compilerTesting from '@angular/compiler/testing';
+import * as core from '@angular/core';
+import * as coreTesting from '@angular/core/testing';
+import * as forms from '@angular/forms';
+import * as http from '@angular/http';
+import * as httpTesting from '@angular/http/testing';
+import * as platformBrowserDynamic from '@angular/platform-browser-dynamic';
+import * as platformBrowser from '@angular/platform-browser';
+import * as platformBrowserTesting from '@angular/platform-browser/testing';
+import * as platformServer from '@angular/platform-server';
+import * as platformServerTesting from '@angular/platform-server/testing';
+import * as router from '@angular/router';
+import * as routerTesting from '@angular/router/testing';
+import * as upgrade from '@angular/upgrade';
+
+export default {
+  compiler,
+  compilerTesting,
+  core,
+  coreTesting,
+  forms,
+  http,
+  httpTesting,
+  platformBrowser,
+  platformBrowserTesting,
+  platformBrowserDynamic,
+  platformServer,
+  platformServerTesting,
+  router,
+  routerTesting,
+  upgrade
+};
diff --git a/integration/typings_test_ts23/package.json b/integration/typings_test_ts23/package.json
new file mode 100644
index 0000000000..59e6348ebe
--- /dev/null
+++ b/integration/typings_test_ts23/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "angular-integration",
+  "description": "Assert that users with TypeScript 2.2 can type-check an Angular application",
+  "version": "0.0.0",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/animations": "file:../../dist/packages-dist/animations",
+    "@angular/common": "file:../../dist/packages-dist/common",
+    "@angular/compiler": "file:../../dist/packages-dist/compiler",
+    "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
+    "@angular/core": "file:../../dist/packages-dist/core",
+    "@angular/forms": "file:../../dist/packages-dist/forms",
+    "@angular/http": "file:../../dist/packages-dist/http",
+    "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
+    "@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
+    "@angular/platform-server": "file:../../dist/packages-dist/platform-server",
+    "@angular/router": "file:../../dist/packages-dist/router",
+    "@angular/tsc-wrapped": "file:../../dist/packages-dist/tsc-wrapped",
+    "@angular/upgrade": "file:../../dist/packages-dist/upgrade",
+    "@types/jasmine": "2.5.41",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "2.3.2",
+    "zone.js": "0.7.6"
+  },
+  "scripts": {
+    "test": "tsc"
+  }
+}
diff --git a/integration/typings_test_ts23/tsconfig.json b/integration/typings_test_ts23/tsconfig.json
new file mode 100644
index 0000000000..d9603e8dce
--- /dev/null
+++ b/integration/typings_test_ts23/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../../dist/typing-test/",
+    "rootDir": ".",
+    "target": "es5",
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection",
+      "es2015.iterable",
+      "es2015.promise"
+    ],
+    "types": [],
+    "strictNullChecks": true
+  },
+  "files": [
+    "include-all.ts",
+    "node_modules/@types/jasmine/index.d.ts"
+  ]
+}
diff --git a/karma-js.conf.js b/karma-js.conf.js
index 35fbdae03f..ef566dd2ff 100644
--- a/karma-js.conf.js
+++ b/karma-js.conf.js
@@ -58,7 +58,8 @@ module.exports = function(config) {
       'dist/all/@angular/compiler/test/aot/**',
       'dist/all/@angular/examples/**/e2e_test/*',
       'dist/all/@angular/language-service/**',
-      'dist/all/@angular/router/**',
+      'dist/all/@angular/router/test/**',
+      'dist/all/@angular/tsc-wrapped/**',
       'dist/all/@angular/platform-browser/testing/e2e_util.js',
       'dist/all/angular1_router.js',
       'dist/examples/**/e2e_test/**',
diff --git a/modules/benchmarks/e2e_test/tree_data.ts b/modules/benchmarks/e2e_test/tree_data.ts
new file mode 100644
index 0000000000..8aff156795
--- /dev/null
+++ b/modules/benchmarks/e2e_test/tree_data.ts
@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {$} from 'protractor';
+
+export const CreateBtn = '#createDom';
+export const DestroyBtn = '#destroyDom';
+export const DetectChangesBtn = '#detectChanges';
+export const RootEl = '#root';
+export const NumberOfChecksEl = '#numberOfChecks';
+
+export interface Benchmark {
+  id: string;
+  url: string;
+  buttons: string[];
+  ignoreBrowserSynchronization?: boolean;
+  extraParams?: {name: string, value: any}[];
+}
+
+const CreateDestroyButtons: string[] = [CreateBtn, DestroyBtn];
+const CreateDestroyDetectChangesButtons: string[] = [...CreateDestroyButtons, DetectChangesBtn];
+
+export const Benchmarks: Benchmark[] = [
+  {
+    id: `deepTree.ng2`,
+    url: 'all/benchmarks/src/tree/ng2/index.html',
+    buttons: CreateDestroyDetectChangesButtons,
+  },
+  {
+    id: `deepTree.ng2.next`,
+    url: 'all/benchmarks/src/tree/ng2_next/index.html',
+    buttons: CreateDestroyDetectChangesButtons,
+    ignoreBrowserSynchronization: true,
+    // Can't use bundles as we use non exported code
+    extraParams: [{name: 'bundles', value: false}]
+  },
+  {
+    id: `deepTree.ng2.static`,
+    url: 'all/benchmarks/src/tree/ng2_static/index.html',
+    buttons: CreateDestroyButtons,
+  },
+  {
+    id: `deepTree.ng2_switch`,
+    url: 'all/benchmarks/src/tree/ng2_switch/index.html',
+    buttons: CreateDestroyButtons,
+  },
+  {
+    id: `deepTree.baseline`,
+    url: 'all/benchmarks/src/tree/baseline/index.html',
+    buttons: CreateDestroyButtons,
+    ignoreBrowserSynchronization: true,
+  },
+  {
+    id: `deepTree.incremental_dom`,
+    url: 'all/benchmarks/src/tree/incremental_dom/index.html',
+    buttons: CreateDestroyButtons,
+    ignoreBrowserSynchronization: true,
+  },
+  {
+    id: `deepTree.polymer`,
+    url: 'all/benchmarks/src/tree/polymer/index.html',
+    buttons: CreateDestroyButtons,
+    ignoreBrowserSynchronization: true,
+  },
+  {
+    id: `deepTree.polymer_leaves`,
+    url: 'all/benchmarks/src/tree/polymer_leaves/index.html',
+    buttons: CreateDestroyButtons,
+    ignoreBrowserSynchronization: true,
+  },
+  {
+    id: `deepTree.ng1`,
+    url: 'all/benchmarks/src/tree/ng1/index.html',
+    buttons: CreateDestroyDetectChangesButtons,
+  }
+];
diff --git a/modules/benchmarks/e2e_test/tree_perf.ts b/modules/benchmarks/e2e_test/tree_perf.ts
index b27e08c678..6040106382 100644
--- a/modules/benchmarks/e2e_test/tree_perf.ts
+++ b/modules/benchmarks/e2e_test/tree_perf.ts
@@ -7,162 +7,77 @@
  */
 
 import {runBenchmark, verifyNoBrowserErrors} from 'e2e_util/perf_util';
-import {$} from 'protractor';
+import {$, browser} from 'protractor';
 
-interface Worker {
-  id: string;
-  prepare?(): void;
-  work(): void;
-}
-
-const CreateOnlyWorker: Worker = {
-  id: 'createOnly',
-  prepare: () => $('#destroyDom').click(),
-  work: () => $('#createDom').click()
-};
-
-const CreateAndDestroyWorker: Worker = {
-  id: 'createDestroy',
-  work: () => {
-    $('#createDom').click();
-    $('#destroyDom').click();
-  }
-};
-
-const UpdateWorker: Worker = {
-  id: 'update',
-  work: () => $('#createDom').click()
-};
+import {Benchmark, Benchmarks, CreateBtn, DestroyBtn, DetectChangesBtn, RootEl} from './tree_data';
 
 describe('tree benchmark perf', () => {
 
-  afterEach(verifyNoBrowserErrors);
+  let _oldRootEl: any;
+  beforeEach(() => _oldRootEl = browser.rootEl);
 
-  [CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => {
-    describe(worker.id, () => {
+  afterEach(() => {
+    browser.rootEl = _oldRootEl;
+    verifyNoBrowserErrors();
+  });
 
-      it('should run for ng2', (done) => {
+  Benchmarks.forEach(benchmark => {
+    describe(benchmark.id, () => {
+      it('should work for createOnly', (done) => {
         runTreeBenchmark({
-          id: `deepTree.ng2.${worker.id}`,
-          url: 'all/benchmarks/src/tree/ng2/index.html',
-          work: worker.work,
-          prepare: worker.prepare,
+          id: 'createOnly',
+          benchmark,
+          prepare: () => $(CreateBtn).click(),
+          work: () => $(DestroyBtn).click()
         }).then(done, done.fail);
       });
 
-      it('should run for ng2 next', (done) => {
+      it('should work for createDestroy', (done) => {
         runTreeBenchmark({
-          id: `deepTree.ng2.next.${worker.id}`,
-          url: 'all/benchmarks/src/tree/ng2_next/index.html',
-          ignoreBrowserSynchronization: true,
-          work: worker.work,
-          prepare: worker.prepare,
-          // Can't use bundles as we use non exported code
-          extraParams: [{name: 'bundles', value: false}]
+          id: 'createDestroy',
+          benchmark,
+          work: () => {
+            $(DestroyBtn).click();
+            $(CreateBtn).click();
+          }
         }).then(done, done.fail);
       });
 
-      it('should run for ng2 static', (done) => {
-        runTreeBenchmark({
-          id: `deepTree.ng2.static.${worker.id}`,
-          url: 'all/benchmarks/src/tree/ng2_static/index.html',
-          work: worker.work,
-          prepare: worker.prepare,
-        }).then(done, done.fail);
+      it('should work for update', (done) => {
+        runTreeBenchmark({id: 'update', benchmark, work: () => $(CreateBtn).click()})
+            .then(done, done.fail);
       });
 
-      it('should run for ng2 switch', (done) => {
-        runTreeBenchmark({
-          id: `deepTree.ng2_switch.${worker.id}`,
-          url: 'all/benchmarks/src/tree/ng2_switch/index.html',
-          work: worker.work,
-          prepare: worker.prepare,
-        }).then(done, done.fail);
-      });
+      if (benchmark.buttons.indexOf(DetectChangesBtn) !== -1) {
+        it('should work for detectChanges', (done) => {
+          runTreeBenchmark({
+            id: 'detectChanges',
+            benchmark,
+            work: () => $(DetectChangesBtn).click(),
+            setup: () => $(DestroyBtn).click()
+          }).then(done, done.fail);
+        });
+      }
 
-      it('should run for the baseline', (done) => {
-        runTreeBenchmark({
-          id: `deepTree.baseline.${worker.id}`,
-          url: 'all/benchmarks/src/tree/baseline/index.html',
-          ignoreBrowserSynchronization: true,
-          work: worker.work,
-          prepare: worker.prepare,
-        }).then(done, done.fail);
-      });
-
-      it('should run for incremental-dom', (done) => {
-        runTreeBenchmark({
-          id: `deepTree.incremental_dom.${worker.id}`,
-          url: 'all/benchmarks/src/tree/incremental_dom/index.html',
-          ignoreBrowserSynchronization: true,
-          work: worker.work,
-          prepare: worker.prepare,
-        }).then(done, done.fail);
-      });
-
-      it('should run for polymer binary tree', (done) => {
-        runTreeBenchmark({
-          id: `deepTree.polymer.${worker.id}`,
-          url: 'all/benchmarks/src/tree/polymer/index.html',
-          ignoreBrowserSynchronization: true,
-          work: worker.work,
-          prepare: worker.prepare,
-        }).then(done, done.fail);
-      });
-
-      it('should run for polymer leaves', (done) => {
-        runTreeBenchmark({
-          id: `deepTree.polymer_leaves.${worker.id}`,
-          url: 'all/benchmarks/src/tree/polymer_leaves/index.html',
-          ignoreBrowserSynchronization: true,
-          work: worker.work,
-          prepare: worker.prepare,
-        }).then(done, done.fail);
-      });
     });
   });
-
-  it('should run ng2 changedetection', (done) => {
-    runTreeBenchmark({
-      id: `deepTree.ng2.changedetection`,
-      url: 'all/benchmarks/src/tree/ng2/index.html',
-      work: () => $('#detectChanges').click(),
-      setup: () => $('#createDom').click(),
-    }).then(done, done.fail);
-  });
-
-  it('should run ng2 next changedetection', (done) => {
-    runTreeBenchmark({
-      id: `deepTree.ng2.next.changedetection`,
-      url: 'all/benchmarks/src/tree/ng2_next/index.html',
-      work: () => $('#detectChanges').click(),
-      setup: () => $('#createDom').click(),
-      ignoreBrowserSynchronization: true,
-      // Can't use bundles as we use non exported code
-      extraParams: [{name: 'bundles', value: false}]
-    }).then(done, done.fail);
-  });
-
-  function runTreeBenchmark(config: {
-    id: string,
-    url: string, ignoreBrowserSynchronization?: boolean,
-    work: () => any,
-    prepare?: () => any,
-    extraParams?: {name: string, value: any}[],
-    setup?: () => any
-  }) {
-    let params = [{name: 'depth', value: 11}];
-    if (config.extraParams) {
-      params = params.concat(config.extraParams);
-    }
-    return runBenchmark({
-      id: config.id,
-      url: config.url,
-      ignoreBrowserSynchronization: config.ignoreBrowserSynchronization,
-      params: params,
-      work: config.work,
-      prepare: config.prepare,
-      setup: config.setup
-    });
-  }
 });
+
+function runTreeBenchmark({id, benchmark, prepare, setup, work}: {
+  id: string; benchmark: Benchmark, prepare ? () : void; setup ? () : void; work(): void;
+}) {
+  let params = [{name: 'depth', value: 11}];
+  if (benchmark.extraParams) {
+    params = params.concat(benchmark.extraParams);
+  }
+  browser.rootEl = RootEl;
+  return runBenchmark({
+    id: `${benchmark.id}.${id}`,
+    url: benchmark.url,
+    ignoreBrowserSynchronization: benchmark.ignoreBrowserSynchronization,
+    params: params,
+    work: work,
+    prepare: prepare,
+    setup: setup
+  });
+}
diff --git a/modules/benchmarks/e2e_test/tree_spec.ts b/modules/benchmarks/e2e_test/tree_spec.ts
index 9b6f9e4963..6c58fd4b84 100644
--- a/modules/benchmarks/e2e_test/tree_spec.ts
+++ b/modules/benchmarks/e2e_test/tree_spec.ts
@@ -7,107 +7,57 @@
  */
 
 import {openBrowser, verifyNoBrowserErrors} from 'e2e_util/e2e_util';
-import {$} from 'protractor';
+import {$, browser} from 'protractor';
+
+import {Benchmark, Benchmarks, CreateBtn, DestroyBtn, DetectChangesBtn, NumberOfChecksEl, RootEl} from './tree_data';
 
 describe('tree benchmark spec', () => {
 
-  afterEach(verifyNoBrowserErrors);
+  let _oldRootEl: any;
+  beforeEach(() => _oldRootEl = browser.rootEl);
 
-  it('should work for ng2', () => {
-    testTreeBenchmark({
-      url: 'all/benchmarks/src/tree/ng2/index.html',
+  afterEach(() => {
+    browser.rootEl = _oldRootEl;
+    verifyNoBrowserErrors();
+  });
+
+  Benchmarks.forEach(benchmark => {
+    describe(benchmark.id, () => {
+      it('should work for createDestroy', () => {
+        openTreeBenchmark(benchmark);
+        $(CreateBtn).click();
+        expect($(RootEl).getText()).toContain('0');
+        $(DestroyBtn).click();
+        expect($(RootEl).getText()).toEqual('');
+      });
+
+      it('should work for update', () => {
+        openTreeBenchmark(benchmark);
+        $(CreateBtn).click();
+        $(CreateBtn).click();
+        expect($(RootEl).getText()).toContain('A');
+      });
+
+      if (benchmark.buttons.indexOf(DetectChangesBtn) !== -1) {
+        it('should work for detectChanges', () => {
+          openTreeBenchmark(benchmark);
+          $(DetectChangesBtn).click();
+          expect($(NumberOfChecksEl).getText()).toContain('10');
+        });
+      }
     });
   });
 
-  it('should work for ng2 detect changes', () => {
+  function openTreeBenchmark(benchmark: Benchmark) {
     let params = [{name: 'depth', value: 4}];
-    openBrowser({url: 'all/benchmarks/src/tree/ng2/index.html', params});
-    $('#detectChanges').click();
-    expect($('#numberOfChecks').getText()).toContain('10');
-  });
-
-  it('should work for ng2 next', () => {
-    testTreeBenchmark({
-      url: 'all/benchmarks/src/tree/ng2_next/index.html',
-      ignoreBrowserSynchronization: true,
-      // Can't use bundles as we use non exported code
-      extraParams: [{name: 'bundles', value: false}]
-    });
-  });
-
-  it('should work for ng2 next detect changes', () => {
-    let params = [
-      {name: 'depth', value: 4},
-      // Can't use bundles as we use non exported code
-      {name: 'bundles', value: false}
-    ];
-    openBrowser({
-      url: 'all/benchmarks/src/tree/ng2_next/index.html',
-      ignoreBrowserSynchronization: true, params
-    });
-    $('#detectChanges').click();
-    expect($('#numberOfChecks').getText()).toContain('10');
-  });
-
-  it('should work for ng2 static', () => {
-    testTreeBenchmark({
-      url: 'all/benchmarks/src/tree/ng2_static/index.html',
-    });
-  });
-
-  it('should work for ng2 switch', () => {
-    testTreeBenchmark({
-      url: 'all/benchmarks/src/tree/ng2_switch/index.html',
-    });
-  });
-
-  it('should work for the baseline', () => {
-    testTreeBenchmark({
-      url: 'all/benchmarks/src/tree/baseline/index.html',
-      ignoreBrowserSynchronization: true,
-    });
-  });
-
-  it('should work for incremental dom', () => {
-    testTreeBenchmark({
-      url: 'all/benchmarks/src/tree/incremental_dom/index.html',
-      ignoreBrowserSynchronization: true,
-    });
-  });
-
-  it('should work for polymer binary tree', () => {
-    testTreeBenchmark({
-      url: 'all/benchmarks/src/tree/polymer/index.html',
-      ignoreBrowserSynchronization: true,
-    });
-  });
-
-  it('should work for polymer leaves', () => {
-    testTreeBenchmark({
-      url: 'all/benchmarks/src/tree/polymer_leaves/index.html',
-      ignoreBrowserSynchronization: true,
-    });
-  });
-
-  function testTreeBenchmark(openConfig: {
-    url: string,
-    ignoreBrowserSynchronization?: boolean,
-    extraParams?: {name: string, value: any}[]
-  }) {
-    let params = [{name: 'depth', value: 4}];
-    if (openConfig.extraParams) {
-      params = params.concat(openConfig.extraParams);
+    if (benchmark.extraParams) {
+      params = params.concat(benchmark.extraParams);
     }
+    browser.rootEl = RootEl;
     openBrowser({
-      url: openConfig.url,
-      ignoreBrowserSynchronization: openConfig.ignoreBrowserSynchronization,
+      url: benchmark.url,
+      ignoreBrowserSynchronization: benchmark.ignoreBrowserSynchronization,
       params: params,
     });
-    $('#createDom').click();
-    expect($('#root').getText()).toContain('0');
-    $('#createDom').click();
-    expect($('#root').getText()).toContain('A');
-    $('#destroyDom').click();
-    expect($('#root').getText()).toEqual('');
   }
 });
diff --git a/modules/benchmarks/src/tree/ng1/index.html b/modules/benchmarks/src/tree/ng1/index.html
new file mode 100644
index 0000000000..ee7c5b37e6
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng1/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Ng1 Tree Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="detectChanges">detectChanges</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+    <button id="detectChangesProfile">profile detectChanges</button>
+  </p>
+
+  <div>
+    Change detection runs:<span id="numberOfChecks"></span>
+  </div>
+  <div>
+    <tree id="root" data="initData">Loading...</tree>
+  </div>
+
+  <script>
+    var mainUrls = [
+      '/all/benchmarks/vendor/angular.js',
+      '../../bootstrap_plain.js'
+    ];
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1];
+    if (mainUrl) {
+      mainUrls = [mainUrl];
+    }
+    mainUrls.forEach(function(mainUrl) {
+      document.write('<script src="' + mainUrl + '">\u003c/script>');
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/modules/benchmarks/src/tree/ng1/index.ts b/modules/benchmarks/src/tree/ng1/index.ts
new file mode 100644
index 0000000000..d4dd3c80ae
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng1/index.ts
@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {bindAction, profile} from '../../util';
+import {buildTree, emptyTree} from '../util';
+
+import {addTreeToModule} from './tree';
+
+declare var angular: any;
+
+function init() {
+  let detectChangesRuns = 0;
+  const numberOfChecksEl = document.getElementById('numberOfChecks') !;
+
+  addTreeToModule(angular.module('app', [])).run([
+    '$rootScope',
+    ($rootScope: any) => {
+      function detectChanges() {
+        for (let i = 0; i < 10; i++) {
+          $rootScope.$digest();
+        }
+        detectChangesRuns += 10;
+        numberOfChecksEl.textContent = `${detectChangesRuns}`;
+      }
+
+      function noop() {}
+
+      function destroyDom() {
+        $rootScope.$apply(() => { $rootScope.initData = emptyTree; });
+      }
+
+      function createDom() {
+        $rootScope.$apply(() => { $rootScope.initData = buildTree(); });
+      }
+
+      bindAction('#destroyDom', destroyDom);
+      bindAction('#createDom', createDom);
+      bindAction('#detectChanges', detectChanges);
+      bindAction('#detectChangesProfile', profile(detectChanges, noop, 'detectChanges'));
+      bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+      bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+    }
+  ]);
+
+  angular.bootstrap(document.querySelector('tree'), ['app']);
+}
+
+init();
diff --git a/modules/benchmarks/src/tree/ng1/tree.ts b/modules/benchmarks/src/tree/ng1/tree.ts
new file mode 100644
index 0000000000..d914fa9b7b
--- /dev/null
+++ b/modules/benchmarks/src/tree/ng1/tree.ts
@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {TreeNode} from '../util';
+
+declare var angular: any;
+
+export function addTreeToModule(mod: any): any {
+  return mod
+      .directive(
+          'tree',
+          function() {
+            return {
+              scope: {data: '='},
+              template:
+                  `<span ng-style="{'background-color': data.depth % 2 ? '' : 'grey'}"> {{data.value}} </span><tree-if data='data.right'></tree-if><tree-if data='data.left'></tree-if>`
+            };
+          })
+      // special directive for "if" as angular 1.3 does not support
+      // recursive components.
+      // Cloned from real ngIf directive, but using a lazily created transclude function.
+      .directive(
+          'treeIf',
+          [
+            '$compile', '$animate',
+            function($compile: any, $animate: any) {
+              let transcludeFn: any;
+              return {
+                transclude: 'element',
+                priority: 600,
+                terminal: true,
+                $$tlb: true,
+                link: function($scope: any, $element: any, $attr: any, ctrl: any) {
+                  if (!transcludeFn) {
+                    const template = '<tree data="' + $attr.data + '"></tree>';
+                    transcludeFn = $compile(template);
+                  }
+                  let childElement: any, childScope: any;
+                  $scope.$watch($attr.data, function ngIfWatchAction(value: any) {
+
+                    if (value) {
+                      if (!childScope) {
+                        childScope = $scope.$new();
+                        transcludeFn(childScope, function(clone: any) {
+                          childElement = clone;
+                          $animate.enter(clone, $element.parent(), $element);
+                        });
+                      }
+                    } else {
+                      if (childScope) {
+                        childScope.$destroy();
+                        childScope = null;
+                      }
+                      if (childElement) {
+                        $animate.leave(childElement);
+                        childElement = null;
+                      }
+                    }
+                  });
+                }
+              };
+            }
+          ])
+      .config([
+        '$compileProvider',
+        function($compileProvider: any) { $compileProvider.debugInfoEnabled(false); }
+      ]);
+}
diff --git a/modules/benchmarks/src/tree/ng2_next/tree.ts b/modules/benchmarks/src/tree/ng2_next/tree.ts
index 95bdc911bf..573b8fec24 100644
--- a/modules/benchmarks/src/tree/ng2_next/tree.ts
+++ b/modules/benchmarks/src/tree/ng2_next/tree.ts
@@ -7,7 +7,7 @@
  */
 
 import {NgIf} from '@angular/common';
-import {ComponentFactory, ComponentFactoryResolver, ComponentRef, Injector, NgModuleRef, RendererFactory2, RootRenderer, Sanitizer, TemplateRef, ViewContainerRef} from '@angular/core';
+import {ComponentFactory, ComponentFactoryResolver, ComponentRef, ErrorHandler, Injector, NgModuleRef, RendererFactory2, RootRenderer, Sanitizer, TemplateRef, ViewContainerRef} from '@angular/core';
 import {ArgumentType, BindingFlags, NodeFlags, ViewDefinition, ViewFlags, anchorDef, createComponentFactory, directiveDef, elementDef, initServicesIfNeeded, textDef, viewDef} from '@angular/core/src/view/index';
 import {DomRendererFactory2} from '@angular/platform-browser/src/dom/dom_renderer';
 import {DomSanitizerImpl, SafeStyle} from '@angular/platform-browser/src/security/dom_sanitization_service';
@@ -108,6 +108,7 @@ export class AppModule implements Injector, NgModuleRef<any> {
       case Sanitizer:
         return this.sanitizer;
       case RootRenderer:
+      case ErrorHandler:
         return null;
       case NgModuleRef:
         return this;
diff --git a/modules/tsconfig.json b/modules/tsconfig.json
index fb8de06ce6..18bd97a6c3 100644
--- a/modules/tsconfig.json
+++ b/modules/tsconfig.json
@@ -13,8 +13,8 @@
       "selenium-webdriver": ["../node_modules/@types/selenium-webdriver/index.d.ts"],
       "rxjs/*": ["../node_modules/rxjs/*"],
       "@angular/*": ["../dist/all/@angular/*"],
-      "@angular/tsc-wrapped": ["../dist/tools/@angular/tsc-wrapped"],
-      "@angular/tsc-wrapped/*": ["../dist/tools/@angular/tsc-wrapped/*"]
+      "@angular/tsc-wrapped": ["../dist/packages-dist/tsc-wrapped"],
+      "@angular/tsc-wrapped/*": ["../dist/packages-dist/tsc-wrapped/*"]
     },
     "rootDir": ".",
     "inlineSourceMap": true,
diff --git a/npm-shrinkwrap.clean.json b/npm-shrinkwrap.clean.json
index 0e806910eb..b2d8292227 100644
--- a/npm-shrinkwrap.clean.json
+++ b/npm-shrinkwrap.clean.json
@@ -1,509 +1,395 @@
 {
   "name": "angular-srcs",
-  "version": "4.0.0-rc.5",
+  "version": "5.0.0-beta.0",
   "dependencies": {
     "@types/angularjs": {
-      "version": "1.5.13-alpha",
-      "dev": true
+      "version": "1.5.13-alpha"
     },
     "@types/base64-js": {
-      "version": "1.2.5",
-      "dev": true
+      "version": "1.2.5"
     },
     "@types/fs-extra": {
-      "version": "0.0.22-alpha",
-      "dev": true
+      "version": "0.0.22-alpha"
     },
     "@types/hammerjs": {
-      "version": "2.0.33",
-      "dev": true
+      "version": "2.0.33"
     },
     "@types/jasmine": {
-      "version": "2.2.22-alpha",
-      "dev": true
+      "version": "2.2.22-alpha"
     },
     "@types/jquery": {
-      "version": "1.10.21-alpha",
-      "dev": true
+      "version": "1.10.21-alpha"
     },
     "@types/node": {
-      "version": "4.0.22-alpha",
-      "dev": true
+      "version": "6.0.84"
     },
     "@types/q": {
-      "version": "0.0.32",
-      "dev": true
+      "version": "0.0.32"
     },
     "@types/selenium-webdriver": {
-      "version": "2.53.35",
-      "dev": true
+      "version": "2.53.35"
     },
     "@types/systemjs": {
-      "version": "0.19.32",
-      "dev": true
+      "version": "0.19.32"
     },
     "abbrev": {
-      "version": "1.0.9",
-      "dev": true
+      "version": "1.0.9"
     },
     "accepts": {
       "version": "1.2.13",
-      "dev": true,
       "dependencies": {
         "mime-db": {
-          "version": "1.20.0",
-          "dev": true
+          "version": "1.20.0"
         },
         "mime-types": {
-          "version": "2.1.8",
-          "dev": true
+          "version": "2.1.8"
         }
       }
     },
     "acorn": {
-      "version": "1.2.2",
-      "dev": true
+      "version": "1.2.2"
     },
     "add-stream": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "adm-zip": {
-      "version": "0.4.7",
-      "dev": true
+      "version": "0.4.7"
     },
     "after": {
-      "version": "0.8.1",
-      "dev": true
+      "version": "0.8.1"
     },
     "agent-base": {
       "version": "2.0.1",
-      "dev": true,
       "dependencies": {
         "semver": {
-          "version": "5.0.3",
-          "dev": true
+          "version": "5.0.3"
         }
       }
     },
+    "ajv": {
+      "version": "4.11.7"
+    },
     "align-text": {
       "version": "0.1.3",
-      "dev": true,
       "dependencies": {
         "kind-of": {
-          "version": "2.0.1",
-          "dev": true
+          "version": "2.0.1"
         }
       }
     },
     "amdefine": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "angular": {
-      "version": "1.5.0",
-      "dev": true
+      "version": "1.5.0"
     },
     "angular-animate": {
-      "version": "1.5.0",
-      "dev": true
+      "version": "1.5.0"
     },
     "angular-mocks": {
-      "version": "1.5.0",
-      "dev": true
+      "version": "1.5.0"
     },
     "ansi-align": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "ansi-escapes": {
-      "version": "1.4.0",
-      "dev": true
+      "version": "1.4.0"
     },
     "ansi-green": {
-      "version": "0.1.1",
-      "dev": true
+      "version": "0.1.1"
     },
     "ansi-regex": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "ansi-styles": {
-      "version": "2.2.1",
-      "dev": true
+      "version": "2.2.1"
     },
     "ansi-wrap": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "any-promise": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "anymatch": {
-      "version": "1.3.0",
-      "dev": true
+      "version": "1.3.0"
     },
     "aproba": {
-      "version": "1.0.4",
-      "dev": true
+      "version": "1.0.4"
     },
     "archiver": {
       "version": "0.14.4",
-      "dev": true,
       "dependencies": {
         "async": {
-          "version": "0.9.2",
-          "dev": true
+          "version": "0.9.2"
         },
         "glob": {
           "version": "4.3.5",
-          "dev": true,
           "dependencies": {
             "minimatch": {
-              "version": "2.0.10",
-              "dev": true
+              "version": "2.0.10"
             }
           }
         },
         "lodash": {
-          "version": "3.2.0",
-          "dev": true
+          "version": "3.2.0"
         },
         "readable-stream": {
-          "version": "1.0.33",
-          "dev": true
+          "version": "1.0.33"
         }
       }
     },
     "archy": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "are-we-there-yet": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
     },
     "arr-diff": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "arr-flatten": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "array-differ": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "array-ify": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "array-slice": {
-      "version": "0.2.3",
-      "dev": true
+      "version": "0.2.3"
     },
     "array-union": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "array-uniq": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "array-unique": {
-      "version": "0.2.1",
-      "dev": true
+      "version": "0.2.1"
     },
     "arraybuffer.slice": {
-      "version": "0.0.6",
-      "dev": true
+      "version": "0.0.6"
     },
     "arrify": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "asap": {
-      "version": "2.0.3",
-      "dev": true
+      "version": "2.0.3"
+    },
+    "ascli": {
+      "version": "1.0.1"
     },
     "asn1": {
-      "version": "0.2.3",
-      "dev": true
+      "version": "0.2.3"
     },
     "assert": {
-      "version": "1.4.1",
-      "dev": true
+      "version": "1.4.1"
     },
     "assert-plus": {
-      "version": "0.1.5",
-      "dev": true
+      "version": "0.1.5"
     },
     "async": {
-      "version": "0.2.10",
-      "dev": true
+      "version": "0.2.10"
     },
     "async-each": {
-      "version": "0.1.6",
-      "dev": true
+      "version": "0.1.6"
     },
     "asynckit": {
-      "version": "0.4.0",
-      "dev": true
+      "version": "0.4.0"
     },
     "aws-sign2": {
-      "version": "0.6.0",
-      "dev": true
+      "version": "0.6.0"
     },
     "aws4": {
-      "version": "1.5.0",
-      "dev": true
+      "version": "1.5.0"
     },
     "babel-code-frame": {
       "version": "6.20.0",
-      "dev": true,
       "dependencies": {
         "esutils": {
-          "version": "2.0.2",
-          "dev": true
+          "version": "2.0.2"
         },
         "js-tokens": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         }
       }
     },
     "babel-runtime": {
-      "version": "6.22.0",
-      "dev": true
+      "version": "6.22.0"
     },
     "backo2": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "balanced-match": {
-      "version": "0.4.2",
-      "dev": true
+      "version": "0.4.2"
     },
     "base62": {
-      "version": "0.1.1",
-      "dev": true
+      "version": "0.1.1"
     },
     "Base64": {
-      "version": "0.2.1",
-      "dev": true
+      "version": "0.2.1"
     },
     "base64-arraybuffer": {
-      "version": "0.1.2",
-      "dev": true
+      "version": "0.1.2"
     },
     "base64-js": {
-      "version": "1.2.0",
-      "dev": true
+      "version": "1.2.0"
     },
     "base64-url": {
-      "version": "1.2.1",
-      "dev": true
+      "version": "1.2.1"
     },
     "base64id": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "basic-auth": {
-      "version": "1.0.3",
-      "dev": true
+      "version": "1.0.3"
     },
     "basic-auth-connect": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "batch": {
-      "version": "0.5.2",
-      "dev": true
+      "version": "0.5.2"
     },
     "bcrypt-pbkdf": {
-      "version": "1.0.0",
-      "dev": true,
-      "optional": true
+      "version": "1.0.0"
     },
     "beeper": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "benchmark": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "better-assert": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "big.js": {
-      "version": "3.1.3",
-      "dev": true
+      "version": "3.1.3"
     },
     "binary": {
-      "version": "0.3.0",
-      "dev": true
+      "version": "0.3.0"
     },
     "binary-extensions": {
-      "version": "1.4.0",
-      "dev": true
+      "version": "1.4.0"
     },
     "bl": {
       "version": "0.9.4",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "1.0.33",
-          "dev": true
+          "version": "1.0.33"
         }
       }
     },
     "blob": {
-      "version": "0.0.4",
-      "dev": true
+      "version": "0.0.4"
     },
     "block-stream": {
-      "version": "0.0.9",
-      "dev": true
+      "version": "0.0.9"
     },
     "bluebird": {
-      "version": "2.10.2",
-      "dev": true
+      "version": "2.10.2"
     },
     "body-parser": {
-      "version": "1.13.3",
-      "dev": true
+      "version": "1.13.3"
     },
     "boom": {
-      "version": "2.10.1",
-      "dev": true
+      "version": "2.10.1"
     },
     "bower": {
       "version": "1.7.2",
-      "dev": true,
       "dependencies": {
         "abbrev": {
-          "version": "1.0.7",
-          "dev": true
+          "version": "1.0.7"
         },
         "archy": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "bower-config": {
           "version": "1.3.0",
-          "dev": true,
           "dependencies": {
             "graceful-fs": {
-              "version": "4.1.2",
-              "dev": true
+              "version": "4.1.2"
             },
             "optimist": {
               "version": "0.6.1",
-              "dev": true,
               "dependencies": {
                 "minimist": {
-                  "version": "0.0.10",
-                  "dev": true
+                  "version": "0.0.10"
                 },
                 "wordwrap": {
-                  "version": "0.0.3",
-                  "dev": true
+                  "version": "0.0.3"
                 }
               }
             },
             "osenv": {
               "version": "0.1.3",
-              "dev": true,
               "dependencies": {
                 "os-homedir": {
-                  "version": "1.0.1",
-                  "dev": true
+                  "version": "1.0.1"
                 },
                 "os-tmpdir": {
-                  "version": "1.0.1",
-                  "dev": true
+                  "version": "1.0.1"
                 }
               }
             },
             "untildify": {
               "version": "2.1.0",
-              "dev": true,
               "dependencies": {
                 "os-homedir": {
-                  "version": "1.0.1",
-                  "dev": true
+                  "version": "1.0.1"
                 }
               }
             }
           }
         },
         "bower-endpoint-parser": {
-          "version": "0.2.2",
-          "dev": true
+          "version": "0.2.2"
         },
         "bower-json": {
           "version": "0.4.0",
-          "dev": true,
           "dependencies": {
             "deep-extend": {
-              "version": "0.2.11",
-              "dev": true
+              "version": "0.2.11"
             },
             "graceful-fs": {
-              "version": "2.0.3",
-              "dev": true
+              "version": "2.0.3"
             },
             "intersect": {
-              "version": "0.0.3",
-              "dev": true
+              "version": "0.0.3"
             }
           }
         },
         "bower-logger": {
-          "version": "0.2.2",
-          "dev": true
+          "version": "0.2.2"
         },
         "bower-registry-client": {
           "version": "1.0.0",
-          "dev": true,
           "dependencies": {
             "async": {
-              "version": "0.2.10",
-              "dev": true
+              "version": "0.2.10"
             },
             "graceful-fs": {
-              "version": "4.1.2",
-              "dev": true
+              "version": "4.1.2"
             },
             "mkdirp": {
-              "version": "0.3.5",
-              "dev": true
+              "version": "0.3.5"
             },
             "request-replay": {
-              "version": "0.2.0",
-              "dev": true
+              "version": "0.2.0"
             }
           }
         },
         "cardinal": {
           "version": "0.4.4",
-          "dev": true,
           "dependencies": {
             "ansicolors": {
-              "version": "0.2.1",
-              "dev": true
+              "version": "0.2.1"
             },
             "redeyed": {
               "version": "0.4.4",
-              "dev": true,
               "dependencies": {
                 "esprima": {
-                  "version": "1.0.4",
-                  "dev": true
+                  "version": "1.0.4"
                 }
               }
             }
@@ -511,223 +397,175 @@
         },
         "chalk": {
           "version": "1.1.1",
-          "dev": true,
           "dependencies": {
             "ansi-styles": {
-              "version": "2.1.0",
-              "dev": true
+              "version": "2.1.0"
             },
             "escape-string-regexp": {
-              "version": "1.0.4",
-              "dev": true
+              "version": "1.0.4"
             },
             "has-ansi": {
               "version": "2.0.0",
-              "dev": true,
               "dependencies": {
                 "ansi-regex": {
-                  "version": "2.0.0",
-                  "dev": true
+                  "version": "2.0.0"
                 }
               }
             },
             "strip-ansi": {
               "version": "3.0.0",
-              "dev": true,
               "dependencies": {
                 "ansi-regex": {
-                  "version": "2.0.0",
-                  "dev": true
+                  "version": "2.0.0"
                 }
               }
             },
             "supports-color": {
-              "version": "2.0.0",
-              "dev": true
+              "version": "2.0.0"
             }
           }
         },
         "chmodr": {
-          "version": "1.0.2",
-          "dev": true
+          "version": "1.0.2"
         },
         "configstore": {
           "version": "0.3.2",
-          "dev": true,
           "dependencies": {
             "js-yaml": {
               "version": "3.4.6",
-              "dev": true,
               "dependencies": {
                 "argparse": {
                   "version": "1.0.3",
-                  "dev": true,
                   "dependencies": {
                     "lodash": {
-                      "version": "3.10.1",
-                      "dev": true
+                      "version": "3.10.1"
                     },
                     "sprintf-js": {
-                      "version": "1.0.3",
-                      "dev": true
+                      "version": "1.0.3"
                     }
                   }
                 },
                 "esprima": {
-                  "version": "2.7.1",
-                  "dev": true
+                  "version": "2.7.1"
                 },
                 "inherit": {
-                  "version": "2.2.2",
-                  "dev": true
+                  "version": "2.2.2"
                 }
               }
             },
             "object-assign": {
-              "version": "2.1.1",
-              "dev": true
+              "version": "2.1.1"
             },
             "osenv": {
               "version": "0.1.3",
-              "dev": true,
               "dependencies": {
                 "os-homedir": {
-                  "version": "1.0.1",
-                  "dev": true
+                  "version": "1.0.1"
                 },
                 "os-tmpdir": {
-                  "version": "1.0.1",
-                  "dev": true
+                  "version": "1.0.1"
                 }
               }
             },
             "uuid": {
-              "version": "2.0.1",
-              "dev": true
+              "version": "2.0.1"
             },
             "xdg-basedir": {
-              "version": "1.0.1",
-              "dev": true
+              "version": "1.0.1"
             }
           }
         },
         "decompress-zip": {
           "version": "0.1.0",
-          "dev": true,
           "dependencies": {
             "binary": {
               "version": "0.3.0",
-              "dev": true,
               "dependencies": {
                 "buffers": {
-                  "version": "0.1.1",
-                  "dev": true
+                  "version": "0.1.1"
                 },
                 "chainsaw": {
                   "version": "0.1.0",
-                  "dev": true,
                   "dependencies": {
                     "traverse": {
-                      "version": "0.3.9",
-                      "dev": true
+                      "version": "0.3.9"
                     }
                   }
                 }
               }
             },
             "mkpath": {
-              "version": "0.1.0",
-              "dev": true
+              "version": "0.1.0"
             },
             "readable-stream": {
               "version": "1.1.13",
-              "dev": true,
               "dependencies": {
                 "core-util-is": {
-                  "version": "1.0.2",
-                  "dev": true
+                  "version": "1.0.2"
                 },
                 "inherits": {
-                  "version": "2.0.1",
-                  "dev": true
+                  "version": "2.0.1"
                 },
                 "isarray": {
-                  "version": "0.0.1",
-                  "dev": true
+                  "version": "0.0.1"
                 },
                 "string_decoder": {
-                  "version": "0.10.31",
-                  "dev": true
+                  "version": "0.10.31"
                 }
               }
             },
             "touch": {
               "version": "0.0.3",
-              "dev": true,
               "dependencies": {
                 "nopt": {
-                  "version": "1.0.10",
-                  "dev": true
+                  "version": "1.0.10"
                 }
               }
             }
           }
         },
         "destroy": {
-          "version": "1.0.3",
-          "dev": true
+          "version": "1.0.3"
         },
         "fs-write-stream-atomic": {
           "version": "1.0.5",
-          "dev": true,
           "dependencies": {
             "graceful-fs": {
-              "version": "4.1.2",
-              "dev": true
+              "version": "4.1.2"
             },
             "imurmurhash": {
-              "version": "0.1.4",
-              "dev": true
+              "version": "0.1.4"
             }
           }
         },
         "fstream": {
           "version": "1.0.8",
-          "dev": true,
           "dependencies": {
             "graceful-fs": {
-              "version": "4.1.2",
-              "dev": true
+              "version": "4.1.2"
             },
             "inherits": {
-              "version": "2.0.1",
-              "dev": true
+              "version": "2.0.1"
             }
           }
         },
         "fstream-ignore": {
           "version": "1.0.3",
-          "dev": true,
           "dependencies": {
             "inherits": {
-              "version": "2.0.1",
-              "dev": true
+              "version": "2.0.1"
             },
             "minimatch": {
               "version": "3.0.0",
-              "dev": true,
               "dependencies": {
                 "brace-expansion": {
                   "version": "1.1.2",
-                  "dev": true,
                   "dependencies": {
                     "balanced-match": {
-                      "version": "0.3.0",
-                      "dev": true
+                      "version": "0.3.0"
                     },
                     "concat-map": {
-                      "version": "0.0.1",
-                      "dev": true
+                      "version": "0.0.1"
                     }
                   }
                 }
@@ -737,47 +575,37 @@
         },
         "github": {
           "version": "0.2.4",
-          "dev": true,
           "dependencies": {
             "mime": {
-              "version": "1.3.4",
-              "dev": true
+              "version": "1.3.4"
             }
           }
         },
         "glob": {
           "version": "4.5.3",
-          "dev": true,
           "dependencies": {
             "inflight": {
               "version": "1.0.4",
-              "dev": true,
               "dependencies": {
                 "wrappy": {
-                  "version": "1.0.1",
-                  "dev": true
+                  "version": "1.0.1"
                 }
               }
             },
             "inherits": {
-              "version": "2.0.1",
-              "dev": true
+              "version": "2.0.1"
             },
             "minimatch": {
               "version": "2.0.10",
-              "dev": true,
               "dependencies": {
                 "brace-expansion": {
                   "version": "1.1.2",
-                  "dev": true,
                   "dependencies": {
                     "balanced-match": {
-                      "version": "0.3.0",
-                      "dev": true
+                      "version": "0.3.0"
                     },
                     "concat-map": {
-                      "version": "0.0.1",
-                      "dev": true
+                      "version": "0.0.1"
                     }
                   }
                 }
@@ -785,53 +613,39 @@
             },
             "once": {
               "version": "1.3.3",
-              "dev": true,
               "dependencies": {
                 "wrappy": {
-                  "version": "1.0.1",
-                  "dev": true
+                  "version": "1.0.1"
                 }
               }
             }
           }
         },
         "graceful-fs": {
-          "version": "3.0.8",
-          "dev": true
+          "version": "3.0.8"
         },
         "handlebars": {
           "version": "2.0.0",
-          "dev": true,
           "dependencies": {
             "optimist": {
               "version": "0.3.7",
-              "dev": true,
               "dependencies": {
                 "wordwrap": {
-                  "version": "0.0.3",
-                  "dev": true
+                  "version": "0.0.3"
                 }
               }
             },
             "uglify-js": {
               "version": "2.3.6",
-              "dev": true,
-              "optional": true,
               "dependencies": {
                 "async": {
-                  "version": "0.2.10",
-                  "dev": true,
-                  "optional": true
+                  "version": "0.2.10"
                 },
                 "source-map": {
                   "version": "0.1.43",
-                  "dev": true,
-                  "optional": true,
                   "dependencies": {
                     "amdefine": {
-                      "version": "1.0.0",
-                      "dev": true,
-                      "optional": true
+                      "version": "1.0.0"
                     }
                   }
                 }
@@ -841,163 +655,128 @@
         },
         "inquirer": {
           "version": "0.10.0",
-          "dev": true,
           "dependencies": {
             "ansi-escapes": {
-              "version": "1.1.0",
-              "dev": true
+              "version": "1.1.0"
             },
             "ansi-regex": {
-              "version": "2.0.0",
-              "dev": true
+              "version": "2.0.0"
             },
             "cli-cursor": {
               "version": "1.0.2",
-              "dev": true,
               "dependencies": {
                 "restore-cursor": {
                   "version": "1.0.1",
-                  "dev": true,
                   "dependencies": {
                     "exit-hook": {
-                      "version": "1.1.1",
-                      "dev": true
+                      "version": "1.1.1"
                     },
                     "onetime": {
-                      "version": "1.1.0",
-                      "dev": true
+                      "version": "1.1.0"
                     }
                   }
                 }
               }
             },
             "cli-width": {
-              "version": "1.1.0",
-              "dev": true
+              "version": "1.1.0"
             },
             "figures": {
-              "version": "1.4.0",
-              "dev": true
+              "version": "1.4.0"
             },
             "lodash": {
-              "version": "3.10.1",
-              "dev": true
+              "version": "3.10.1"
             },
             "readline2": {
               "version": "1.0.1",
-              "dev": true,
               "dependencies": {
                 "code-point-at": {
                   "version": "1.0.0",
-                  "dev": true,
                   "dependencies": {
                     "number-is-nan": {
-                      "version": "1.0.0",
-                      "dev": true
+                      "version": "1.0.0"
                     }
                   }
                 },
                 "is-fullwidth-code-point": {
                   "version": "1.0.0",
-                  "dev": true,
                   "dependencies": {
                     "number-is-nan": {
-                      "version": "1.0.0",
-                      "dev": true
+                      "version": "1.0.0"
                     }
                   }
                 },
                 "mute-stream": {
-                  "version": "0.0.5",
-                  "dev": true
+                  "version": "0.0.5"
                 }
               }
             },
             "run-async": {
               "version": "0.1.0",
-              "dev": true,
               "dependencies": {
                 "once": {
                   "version": "1.3.3",
-                  "dev": true,
                   "dependencies": {
                     "wrappy": {
-                      "version": "1.0.1",
-                      "dev": true
+                      "version": "1.0.1"
                     }
                   }
                 }
               }
             },
             "rx-lite": {
-              "version": "3.1.2",
-              "dev": true
+              "version": "3.1.2"
             },
             "strip-ansi": {
-              "version": "3.0.0",
-              "dev": true
+              "version": "3.0.0"
             },
             "through": {
-              "version": "2.3.8",
-              "dev": true
+              "version": "2.3.8"
             }
           }
         },
         "insight": {
           "version": "0.7.0",
-          "dev": true,
           "dependencies": {
             "async": {
-              "version": "1.5.0",
-              "dev": true
+              "version": "1.5.0"
             },
             "configstore": {
               "version": "1.4.0",
-              "dev": true,
               "dependencies": {
                 "graceful-fs": {
-                  "version": "4.1.2",
-                  "dev": true
+                  "version": "4.1.2"
                 },
                 "os-tmpdir": {
-                  "version": "1.0.1",
-                  "dev": true
+                  "version": "1.0.1"
                 },
                 "osenv": {
                   "version": "0.1.3",
-                  "dev": true,
                   "dependencies": {
                     "os-homedir": {
-                      "version": "1.0.1",
-                      "dev": true
+                      "version": "1.0.1"
                     }
                   }
                 },
                 "uuid": {
-                  "version": "2.0.1",
-                  "dev": true
+                  "version": "2.0.1"
                 },
                 "write-file-atomic": {
                   "version": "1.1.4",
-                  "dev": true,
                   "dependencies": {
                     "imurmurhash": {
-                      "version": "0.1.4",
-                      "dev": true
+                      "version": "0.1.4"
                     },
                     "slide": {
-                      "version": "1.1.6",
-                      "dev": true
+                      "version": "1.1.6"
                     }
                   }
                 },
                 "xdg-basedir": {
                   "version": "2.0.0",
-                  "dev": true,
                   "dependencies": {
                     "os-homedir": {
-                      "version": "1.0.1",
-                      "dev": true
+                      "version": "1.0.1"
                     }
                   }
                 }
@@ -1005,327 +784,256 @@
             },
             "lodash.debounce": {
               "version": "3.1.1",
-              "dev": true,
               "dependencies": {
                 "lodash._getnative": {
-                  "version": "3.9.1",
-                  "dev": true
+                  "version": "3.9.1"
                 }
               }
             },
             "object-assign": {
-              "version": "4.0.1",
-              "dev": true
+              "version": "4.0.1"
             },
             "os-name": {
               "version": "1.0.3",
-              "dev": true,
               "dependencies": {
                 "osx-release": {
                   "version": "1.1.0",
-                  "dev": true,
                   "dependencies": {
                     "minimist": {
-                      "version": "1.2.0",
-                      "dev": true
+                      "version": "1.2.0"
                     }
                   }
                 },
                 "win-release": {
                   "version": "1.1.1",
-                  "dev": true,
                   "dependencies": {
                     "semver": {
-                      "version": "5.1.0",
-                      "dev": true
+                      "version": "5.1.0"
                     }
                   }
                 }
               }
             },
             "tough-cookie": {
-              "version": "2.2.1",
-              "dev": true
+              "version": "2.2.1"
             }
           }
         },
         "is-root": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "junk": {
-          "version": "1.0.2",
-          "dev": true
+          "version": "1.0.2"
         },
         "lockfile": {
-          "version": "1.0.1",
-          "dev": true
+          "version": "1.0.1"
         },
         "lru-cache": {
-          "version": "2.7.3",
-          "dev": true
+          "version": "2.7.3"
         },
         "md5-hex": {
           "version": "1.2.0",
-          "dev": true,
           "dependencies": {
             "md5-o-matic": {
-              "version": "0.1.1",
-              "dev": true
+              "version": "0.1.1"
             }
           }
         },
         "mkdirp": {
           "version": "0.5.0",
-          "dev": true,
           "dependencies": {
             "minimist": {
-              "version": "0.0.8",
-              "dev": true
+              "version": "0.0.8"
             }
           }
         },
         "mout": {
-          "version": "0.11.1",
-          "dev": true
+          "version": "0.11.1"
         },
         "nopt": {
-          "version": "3.0.6",
-          "dev": true
+          "version": "3.0.6"
         },
         "opn": {
-          "version": "1.0.2",
-          "dev": true
+          "version": "1.0.2"
         },
         "p-throttler": {
           "version": "0.1.1",
-          "dev": true,
           "dependencies": {
             "q": {
-              "version": "0.9.7",
-              "dev": true
+              "version": "0.9.7"
             }
           }
         },
         "promptly": {
           "version": "0.2.0",
-          "dev": true,
           "dependencies": {
             "read": {
               "version": "1.0.7",
-              "dev": true,
               "dependencies": {
                 "mute-stream": {
-                  "version": "0.0.5",
-                  "dev": true
+                  "version": "0.0.5"
                 }
               }
             }
           }
         },
         "q": {
-          "version": "1.4.1",
-          "dev": true
+          "version": "1.4.1"
         },
         "request": {
           "version": "2.53.0",
-          "dev": true,
           "dependencies": {
             "aws-sign2": {
-              "version": "0.5.0",
-              "dev": true
+              "version": "0.5.0"
             },
             "bl": {
               "version": "0.9.4",
-              "dev": true,
               "dependencies": {
                 "readable-stream": {
                   "version": "1.0.33",
-                  "dev": true,
                   "dependencies": {
                     "core-util-is": {
-                      "version": "1.0.2",
-                      "dev": true
+                      "version": "1.0.2"
                     },
                     "inherits": {
-                      "version": "2.0.1",
-                      "dev": true
+                      "version": "2.0.1"
                     },
                     "isarray": {
-                      "version": "0.0.1",
-                      "dev": true
+                      "version": "0.0.1"
                     },
                     "string_decoder": {
-                      "version": "0.10.31",
-                      "dev": true
+                      "version": "0.10.31"
                     }
                   }
                 }
               }
             },
             "caseless": {
-              "version": "0.9.0",
-              "dev": true
+              "version": "0.9.0"
             },
             "combined-stream": {
               "version": "0.0.7",
-              "dev": true,
               "dependencies": {
                 "delayed-stream": {
-                  "version": "0.0.5",
-                  "dev": true
+                  "version": "0.0.5"
                 }
               }
             },
             "forever-agent": {
-              "version": "0.5.2",
-              "dev": true
+              "version": "0.5.2"
             },
             "form-data": {
               "version": "0.2.0",
-              "dev": true,
               "dependencies": {
                 "async": {
-                  "version": "0.9.2",
-                  "dev": true
+                  "version": "0.9.2"
                 }
               }
             },
             "hawk": {
               "version": "2.3.1",
-              "dev": true,
               "dependencies": {
                 "boom": {
-                  "version": "2.10.1",
-                  "dev": true
+                  "version": "2.10.1"
                 },
                 "cryptiles": {
-                  "version": "2.0.5",
-                  "dev": true
+                  "version": "2.0.5"
                 },
                 "hoek": {
-                  "version": "2.16.3",
-                  "dev": true
+                  "version": "2.16.3"
                 },
                 "sntp": {
-                  "version": "1.0.9",
-                  "dev": true
+                  "version": "1.0.9"
                 }
               }
             },
             "http-signature": {
               "version": "0.10.1",
-              "dev": true,
               "dependencies": {
                 "asn1": {
-                  "version": "0.1.11",
-                  "dev": true
+                  "version": "0.1.11"
                 },
                 "assert-plus": {
-                  "version": "0.1.5",
-                  "dev": true
+                  "version": "0.1.5"
                 },
                 "ctype": {
-                  "version": "0.5.3",
-                  "dev": true
+                  "version": "0.5.3"
                 }
               }
             },
             "isstream": {
-              "version": "0.1.2",
-              "dev": true
+              "version": "0.1.2"
             },
             "json-stringify-safe": {
-              "version": "5.0.1",
-              "dev": true
+              "version": "5.0.1"
             },
             "mime-types": {
               "version": "2.0.14",
-              "dev": true,
               "dependencies": {
                 "mime-db": {
-                  "version": "1.12.0",
-                  "dev": true
+                  "version": "1.12.0"
                 }
               }
             },
             "node-uuid": {
-              "version": "1.4.7",
-              "dev": true
+              "version": "1.4.7"
             },
             "oauth-sign": {
-              "version": "0.6.0",
-              "dev": true
+              "version": "0.6.0"
             },
             "qs": {
-              "version": "2.3.3",
-              "dev": true
+              "version": "2.3.3"
             },
             "stringstream": {
-              "version": "0.0.5",
-              "dev": true
+              "version": "0.0.5"
             },
             "tough-cookie": {
-              "version": "2.2.1",
-              "dev": true
+              "version": "2.2.1"
             },
             "tunnel-agent": {
-              "version": "0.4.2",
-              "dev": true
+              "version": "0.4.2"
             }
           }
         },
         "request-progress": {
           "version": "0.3.1",
-          "dev": true,
           "dependencies": {
             "throttleit": {
-              "version": "0.0.2",
-              "dev": true
+              "version": "0.0.2"
             }
           }
         },
         "retry": {
-          "version": "0.6.1",
-          "dev": true
+          "version": "0.6.1"
         },
         "rimraf": {
           "version": "2.5.0",
-          "dev": true,
           "dependencies": {
             "glob": {
               "version": "6.0.3",
-              "dev": true,
               "dependencies": {
                 "inflight": {
                   "version": "1.0.4",
-                  "dev": true,
                   "dependencies": {
                     "wrappy": {
-                      "version": "1.0.1",
-                      "dev": true
+                      "version": "1.0.1"
                     }
                   }
                 },
                 "inherits": {
-                  "version": "2.0.1",
-                  "dev": true
+                  "version": "2.0.1"
                 },
                 "minimatch": {
                   "version": "3.0.0",
-                  "dev": true,
                   "dependencies": {
                     "brace-expansion": {
                       "version": "1.1.2",
-                      "dev": true,
                       "dependencies": {
                         "balanced-match": {
-                          "version": "0.3.0",
-                          "dev": true
+                          "version": "0.3.0"
                         },
                         "concat-map": {
-                          "version": "0.0.1",
-                          "dev": true
+                          "version": "0.0.1"
                         }
                       }
                     }
@@ -1333,71 +1041,56 @@
                 },
                 "once": {
                   "version": "1.3.3",
-                  "dev": true,
                   "dependencies": {
                     "wrappy": {
-                      "version": "1.0.1",
-                      "dev": true
+                      "version": "1.0.1"
                     }
                   }
                 },
                 "path-is-absolute": {
-                  "version": "1.0.0",
-                  "dev": true
+                  "version": "1.0.0"
                 }
               }
             }
           }
         },
         "semver": {
-          "version": "2.3.2",
-          "dev": true
+          "version": "2.3.2"
         },
         "shell-quote": {
           "version": "1.4.3",
-          "dev": true,
           "dependencies": {
             "array-filter": {
-              "version": "0.0.1",
-              "dev": true
+              "version": "0.0.1"
             },
             "array-map": {
-              "version": "0.0.0",
-              "dev": true
+              "version": "0.0.0"
             },
             "array-reduce": {
-              "version": "0.0.0",
-              "dev": true
+              "version": "0.0.0"
             },
             "jsonify": {
-              "version": "0.0.0",
-              "dev": true
+              "version": "0.0.0"
             }
           }
         },
         "stringify-object": {
-          "version": "1.0.1",
-          "dev": true
+          "version": "1.0.1"
         },
         "tar-fs": {
           "version": "1.9.0",
-          "dev": true,
           "dependencies": {
             "pump": {
               "version": "1.0.1",
-              "dev": true,
               "dependencies": {
                 "end-of-stream": {
-                  "version": "1.1.0",
-                  "dev": true
+                  "version": "1.1.0"
                 },
                 "once": {
                   "version": "1.3.3",
-                  "dev": true,
                   "dependencies": {
                     "wrappy": {
-                      "version": "1.0.1",
-                      "dev": true
+                      "version": "1.0.1"
                     }
                   }
                 }
@@ -1405,23 +1098,18 @@
             },
             "tar-stream": {
               "version": "1.3.1",
-              "dev": true,
               "dependencies": {
                 "bl": {
-                  "version": "1.0.0",
-                  "dev": true
+                  "version": "1.0.0"
                 },
                 "end-of-stream": {
                   "version": "1.1.0",
-                  "dev": true,
                   "dependencies": {
                     "once": {
                       "version": "1.3.3",
-                      "dev": true,
                       "dependencies": {
                         "wrappy": {
-                          "version": "1.0.1",
-                          "dev": true
+                          "version": "1.0.1"
                         }
                       }
                     }
@@ -1429,151 +1117,118 @@
                 },
                 "readable-stream": {
                   "version": "2.0.5",
-                  "dev": true,
                   "dependencies": {
                     "core-util-is": {
-                      "version": "1.0.2",
-                      "dev": true
+                      "version": "1.0.2"
                     },
                     "inherits": {
-                      "version": "2.0.1",
-                      "dev": true
+                      "version": "2.0.1"
                     },
                     "isarray": {
-                      "version": "0.0.1",
-                      "dev": true
+                      "version": "0.0.1"
                     },
                     "process-nextick-args": {
-                      "version": "1.0.6",
-                      "dev": true
+                      "version": "1.0.6"
                     },
                     "string_decoder": {
-                      "version": "0.10.31",
-                      "dev": true
+                      "version": "0.10.31"
                     },
                     "util-deprecate": {
-                      "version": "1.0.2",
-                      "dev": true
+                      "version": "1.0.2"
                     }
                   }
                 },
                 "xtend": {
-                  "version": "4.0.1",
-                  "dev": true
+                  "version": "4.0.1"
                 }
               }
             }
           }
         },
         "tmp": {
-          "version": "0.0.24",
-          "dev": true
+          "version": "0.0.24"
         },
         "update-notifier": {
           "version": "0.6.0",
-          "dev": true,
           "dependencies": {
             "configstore": {
               "version": "1.4.0",
-              "dev": true,
               "dependencies": {
                 "graceful-fs": {
-                  "version": "4.1.2",
-                  "dev": true
+                  "version": "4.1.2"
                 },
                 "object-assign": {
-                  "version": "4.0.1",
-                  "dev": true
+                  "version": "4.0.1"
                 },
                 "os-tmpdir": {
-                  "version": "1.0.1",
-                  "dev": true
+                  "version": "1.0.1"
                 },
                 "osenv": {
                   "version": "0.1.3",
-                  "dev": true,
                   "dependencies": {
                     "os-homedir": {
-                      "version": "1.0.1",
-                      "dev": true
+                      "version": "1.0.1"
                     }
                   }
                 },
                 "uuid": {
-                  "version": "2.0.1",
-                  "dev": true
+                  "version": "2.0.1"
                 },
                 "write-file-atomic": {
                   "version": "1.1.4",
-                  "dev": true,
                   "dependencies": {
                     "imurmurhash": {
-                      "version": "0.1.4",
-                      "dev": true
+                      "version": "0.1.4"
                     },
                     "slide": {
-                      "version": "1.1.6",
-                      "dev": true
+                      "version": "1.1.6"
                     }
                   }
                 },
                 "xdg-basedir": {
                   "version": "2.0.0",
-                  "dev": true,
                   "dependencies": {
                     "os-homedir": {
-                      "version": "1.0.1",
-                      "dev": true
+                      "version": "1.0.1"
                     }
                   }
                 }
               }
             },
             "is-npm": {
-              "version": "1.0.0",
-              "dev": true
+              "version": "1.0.0"
             },
             "latest-version": {
               "version": "2.0.0",
-              "dev": true,
               "dependencies": {
                 "package-json": {
                   "version": "2.3.0",
-                  "dev": true,
                   "dependencies": {
                     "got": {
                       "version": "5.3.0",
-                      "dev": true,
                       "dependencies": {
                         "create-error-class": {
                           "version": "2.0.1",
-                          "dev": true,
                           "dependencies": {
                             "capture-stack-trace": {
-                              "version": "1.0.0",
-                              "dev": true
+                              "version": "1.0.0"
                             },
                             "inherits": {
-                              "version": "2.0.1",
-                              "dev": true
+                              "version": "2.0.1"
                             }
                           }
                         },
                         "duplexify": {
                           "version": "3.4.2",
-                          "dev": true,
                           "dependencies": {
                             "end-of-stream": {
                               "version": "1.0.0",
-                              "dev": true,
                               "dependencies": {
                                 "once": {
                                   "version": "1.3.3",
-                                  "dev": true,
                                   "dependencies": {
                                     "wrappy": {
-                                      "version": "1.0.1",
-                                      "dev": true
+                                      "version": "1.0.1"
                                     }
                                   }
                                 }
@@ -1581,71 +1236,55 @@
                             },
                             "readable-stream": {
                               "version": "2.0.5",
-                              "dev": true,
                               "dependencies": {
                                 "core-util-is": {
-                                  "version": "1.0.2",
-                                  "dev": true
+                                  "version": "1.0.2"
                                 },
                                 "inherits": {
-                                  "version": "2.0.1",
-                                  "dev": true
+                                  "version": "2.0.1"
                                 },
                                 "isarray": {
-                                  "version": "0.0.1",
-                                  "dev": true
+                                  "version": "0.0.1"
                                 },
                                 "process-nextick-args": {
-                                  "version": "1.0.6",
-                                  "dev": true
+                                  "version": "1.0.6"
                                 },
                                 "string_decoder": {
-                                  "version": "0.10.31",
-                                  "dev": true
+                                  "version": "0.10.31"
                                 },
                                 "util-deprecate": {
-                                  "version": "1.0.2",
-                                  "dev": true
+                                  "version": "1.0.2"
                                 }
                               }
                             }
                           }
                         },
                         "is-plain-obj": {
-                          "version": "1.1.0",
-                          "dev": true
+                          "version": "1.1.0"
                         },
                         "is-redirect": {
-                          "version": "1.0.0",
-                          "dev": true
+                          "version": "1.0.0"
                         },
                         "is-stream": {
-                          "version": "1.0.1",
-                          "dev": true
+                          "version": "1.0.1"
                         },
                         "lowercase-keys": {
-                          "version": "1.0.0",
-                          "dev": true
+                          "version": "1.0.0"
                         },
                         "node-status-codes": {
-                          "version": "1.0.0",
-                          "dev": true
+                          "version": "1.0.0"
                         },
                         "object-assign": {
-                          "version": "4.0.1",
-                          "dev": true
+                          "version": "4.0.1"
                         },
                         "parse-json": {
                           "version": "2.2.0",
-                          "dev": true,
                           "dependencies": {
                             "error-ex": {
                               "version": "1.3.0",
-                              "dev": true,
                               "dependencies": {
                                 "is-arrayish": {
-                                  "version": "0.2.1",
-                                  "dev": true
+                                  "version": "0.2.1"
                                 }
                               }
                             }
@@ -1653,75 +1292,59 @@
                         },
                         "pinkie-promise": {
                           "version": "2.0.0",
-                          "dev": true,
                           "dependencies": {
                             "pinkie": {
-                              "version": "2.0.1",
-                              "dev": true
+                              "version": "2.0.1"
                             }
                           }
                         },
                         "read-all-stream": {
                           "version": "3.0.1",
-                          "dev": true,
                           "dependencies": {
                             "pinkie-promise": {
                               "version": "1.0.0",
-                              "dev": true,
                               "dependencies": {
                                 "pinkie": {
-                                  "version": "1.0.0",
-                                  "dev": true
+                                  "version": "1.0.0"
                                 }
                               }
                             },
                             "readable-stream": {
                               "version": "2.0.5",
-                              "dev": true,
                               "dependencies": {
                                 "core-util-is": {
-                                  "version": "1.0.2",
-                                  "dev": true
+                                  "version": "1.0.2"
                                 },
                                 "inherits": {
-                                  "version": "2.0.1",
-                                  "dev": true
+                                  "version": "2.0.1"
                                 },
                                 "isarray": {
-                                  "version": "0.0.1",
-                                  "dev": true
+                                  "version": "0.0.1"
                                 },
                                 "process-nextick-args": {
-                                  "version": "1.0.6",
-                                  "dev": true
+                                  "version": "1.0.6"
                                 },
                                 "string_decoder": {
-                                  "version": "0.10.31",
-                                  "dev": true
+                                  "version": "0.10.31"
                                 },
                                 "util-deprecate": {
-                                  "version": "1.0.2",
-                                  "dev": true
+                                  "version": "1.0.2"
                                 }
                               }
                             }
                           }
                         },
                         "timed-out": {
-                          "version": "2.0.0",
-                          "dev": true
+                          "version": "2.0.0"
                         },
                         "unzip-response": {
-                          "version": "1.0.0",
-                          "dev": true
+                          "version": "1.0.0"
                         },
                         "url-parse-lax": {
                           "version": "1.0.0",
-                          "dev": true,
                           "dependencies": {
                             "prepend-http": {
-                              "version": "1.0.3",
-                              "dev": true
+                              "version": "1.0.3"
                             }
                           }
                         }
@@ -1729,33 +1352,26 @@
                     },
                     "rc": {
                       "version": "1.1.6",
-                      "dev": true,
                       "dependencies": {
                         "deep-extend": {
-                          "version": "0.4.0",
-                          "dev": true
+                          "version": "0.4.0"
                         },
                         "ini": {
-                          "version": "1.3.4",
-                          "dev": true
+                          "version": "1.3.4"
                         },
                         "minimist": {
-                          "version": "1.2.0",
-                          "dev": true
+                          "version": "1.2.0"
                         },
                         "strip-json-comments": {
-                          "version": "1.0.4",
-                          "dev": true
+                          "version": "1.0.4"
                         }
                       }
                     },
                     "registry-url": {
-                      "version": "3.0.3",
-                      "dev": true
+                      "version": "3.0.3"
                     },
                     "semver": {
-                      "version": "5.1.0",
-                      "dev": true
+                      "version": "5.1.0"
                     }
                   }
                 }
@@ -1763,15 +1379,12 @@
             },
             "repeating": {
               "version": "2.0.0",
-              "dev": true,
               "dependencies": {
                 "is-finite": {
                   "version": "1.0.1",
-                  "dev": true,
                   "dependencies": {
                     "number-is-nan": {
-                      "version": "1.0.0",
-                      "dev": true
+                      "version": "1.0.0"
                     }
                   }
                 }
@@ -1779,25 +1392,20 @@
             },
             "semver-diff": {
               "version": "2.1.0",
-              "dev": true,
               "dependencies": {
                 "semver": {
-                  "version": "5.1.0",
-                  "dev": true
+                  "version": "5.1.0"
                 }
               }
             },
             "string-length": {
               "version": "1.0.1",
-              "dev": true,
               "dependencies": {
                 "strip-ansi": {
                   "version": "3.0.0",
-                  "dev": true,
                   "dependencies": {
                     "ansi-regex": {
-                      "version": "2.0.0",
-                      "dev": true
+                      "version": "2.0.0"
                     }
                   }
                 }
@@ -1806,20 +1414,16 @@
           }
         },
         "user-home": {
-          "version": "1.1.1",
-          "dev": true
+          "version": "1.1.1"
         },
         "which": {
           "version": "1.2.1",
-          "dev": true,
           "dependencies": {
             "is-absolute": {
               "version": "0.1.7",
-              "dev": true,
               "dependencies": {
                 "is-relative": {
-                  "version": "0.1.3",
-                  "dev": true
+                  "version": "0.1.3"
                 }
               }
             }
@@ -1829,1131 +1433,884 @@
     },
     "boxen": {
       "version": "0.6.0",
-      "dev": true,
       "dependencies": {
         "camelcase": {
-          "version": "2.1.1",
-          "dev": true
+          "version": "2.1.1"
         }
       }
     },
     "brace-expansion": {
-      "version": "1.1.6",
-      "dev": true
+      "version": "1.1.6"
     },
     "braces": {
-      "version": "1.8.3",
-      "dev": true
+      "version": "1.8.3"
+    },
+    "browser-resolve": {
+      "version": "1.11.2",
+      "dependencies": {
+        "resolve": {
+          "version": "1.1.7"
+        }
+      }
     },
     "browserify-zlib": {
-      "version": "0.1.4",
-      "dev": true
+      "version": "0.1.4"
     },
     "browserstack": {
-      "version": "1.2.0",
-      "dev": true
+      "version": "1.2.0"
     },
     "browserstacktunnel-wrapper": {
-      "version": "1.4.2",
-      "dev": true
+      "version": "1.4.2"
     },
     "buffer": {
       "version": "4.9.1",
-      "dev": true,
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         }
       }
     },
     "buffer-crc32": {
-      "version": "0.2.5",
-      "dev": true
+      "version": "0.2.5"
     },
     "buffer-shims": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "buffers": {
-      "version": "0.1.1",
-      "dev": true
+      "version": "0.1.1"
     },
     "builtin-modules": {
-      "version": "1.1.1",
-      "dev": true
+      "version": "1.1.1"
+    },
+    "bytebuffer": {
+      "version": "5.0.1"
     },
     "bytes": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "callsite": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "camel-case": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "camelcase": {
-      "version": "2.0.1",
-      "dev": true
+      "version": "2.0.1"
     },
     "camelcase-keys": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "canonical-path": {
-      "version": "0.0.2",
-      "dev": true
+      "version": "0.0.2"
     },
     "capture-stack-trace": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "caseless": {
-      "version": "0.11.0",
-      "dev": true
+      "version": "0.11.0"
     },
     "catharsis": {
-      "version": "0.8.8",
-      "dev": true
+      "version": "0.8.8"
     },
     "center-align": {
-      "version": "0.1.2",
-      "dev": true
+      "version": "0.1.2"
     },
     "chainsaw": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "chalk": {
-      "version": "1.1.3",
-      "dev": true
+      "version": "1.1.3"
     },
     "change-case": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "chokidar": {
-      "version": "1.4.2",
-      "dev": true
+      "version": "1.4.2"
     },
     "ci-info": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "clang-format": {
       "version": "1.0.41",
-      "dev": true,
       "dependencies": {
         "async": {
-          "version": "1.5.2",
-          "dev": true
+          "version": "1.5.2"
         },
         "glob": {
-          "version": "7.0.3",
-          "dev": true
+          "version": "7.0.3"
         }
       }
     },
     "cldr": {
       "version": "3.5.2",
-      "dev": true,
       "dependencies": {
         "uglify-js": {
-          "version": "1.3.3",
-          "dev": true
+          "version": "1.3.3"
         },
         "underscore": {
-          "version": "1.3.3",
-          "dev": true
+          "version": "1.3.3"
         }
       }
     },
     "cli-boxes": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "cli-color": {
       "version": "1.1.0",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         }
       }
     },
     "cli-cursor": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "cli-width": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "cliui": {
       "version": "3.1.0",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "strip-ansi": {
-          "version": "3.0.0",
-          "dev": true
+          "version": "3.0.0"
         }
       }
     },
     "clone": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "clone-stats": {
-      "version": "0.0.1",
-      "dev": true
+      "version": "0.0.1"
     },
     "cmd-shim": {
       "version": "2.0.2",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
-          "version": "4.1.11",
-          "dev": true
+          "version": "4.1.11"
         }
       }
     },
+    "co": {
+      "version": "4.6.0"
+    },
     "code-point-at": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "colors": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
+    },
+    "colour": {
+      "version": "0.7.1"
     },
     "combined-stream": {
-      "version": "1.0.5",
-      "dev": true
+      "version": "1.0.5"
     },
     "commander": {
-      "version": "2.9.0",
-      "dev": true
+      "version": "2.9.0"
     },
     "compare-func": {
-      "version": "1.3.2",
-      "dev": true
+      "version": "1.3.2"
     },
     "component-bind": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "component-emitter": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
     },
     "component-inherit": {
-      "version": "0.0.3",
-      "dev": true
+      "version": "0.0.3"
     },
     "compress-commons": {
       "version": "0.2.9",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "1.0.33",
-          "dev": true
+          "version": "1.0.33"
         }
       }
     },
     "compressible": {
       "version": "2.0.6",
-      "dev": true,
       "dependencies": {
         "mime-db": {
-          "version": "1.20.0",
-          "dev": true
+          "version": "1.20.0"
         }
       }
     },
     "compression": {
-      "version": "1.5.2",
-      "dev": true
+      "version": "1.5.2"
     },
     "concat-map": {
-      "version": "0.0.1",
-      "dev": true
+      "version": "0.0.1"
     },
     "concat-stream": {
       "version": "1.6.0",
-      "dev": true,
       "dependencies": {
         "inherits": {
-          "version": "2.0.3",
-          "dev": true
+          "version": "2.0.3"
         },
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "readable-stream": {
-          "version": "2.2.2",
-          "dev": true
+          "version": "2.2.2"
         }
       }
     },
     "configstore": {
       "version": "2.1.0",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
-          "version": "4.1.11",
-          "dev": true
+          "version": "4.1.11"
         }
       }
     },
     "connect": {
-      "version": "3.4.0",
-      "dev": true
+      "version": "3.4.0"
     },
     "connect-livereload": {
-      "version": "0.5.4",
-      "dev": true
+      "version": "0.5.4"
     },
     "connect-timeout": {
-      "version": "1.6.2",
-      "dev": true
+      "version": "1.6.2"
     },
     "console-browserify": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "console-control-strings": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "constant-case": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "constants-browserify": {
-      "version": "0.0.1",
-      "dev": true
+      "version": "0.0.1"
     },
     "content-type": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "conventional-changelog": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "conventional-changelog-angular": {
-      "version": "1.3.0",
-      "dev": true
+      "version": "1.3.0"
     },
     "conventional-changelog-atom": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "conventional-changelog-codemirror": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "conventional-changelog-core": {
       "version": "1.5.0",
-      "dev": true,
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "lodash": {
-          "version": "4.14.2",
-          "dev": true
+          "version": "4.14.2"
         },
         "readable-stream": {
-          "version": "2.0.6",
-          "dev": true
+          "version": "2.0.6"
         },
         "through2": {
-          "version": "2.0.1",
-          "dev": true
+          "version": "2.0.1"
         }
       }
     },
     "conventional-changelog-ember": {
-      "version": "0.2.2",
-      "dev": true
+      "version": "0.2.2"
     },
     "conventional-changelog-eslint": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "conventional-changelog-express": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "conventional-changelog-jquery": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "conventional-changelog-jscs": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "conventional-changelog-jshint": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "conventional-changelog-writer": {
       "version": "1.4.1",
-      "dev": true,
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "lodash": {
-          "version": "4.14.2",
-          "dev": true
+          "version": "4.14.2"
         },
         "readable-stream": {
-          "version": "2.0.6",
-          "dev": true
+          "version": "2.0.6"
         },
         "through2": {
-          "version": "2.0.1",
-          "dev": true
+          "version": "2.0.1"
         }
       }
     },
     "conventional-commits-filter": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "conventional-commits-parser": {
       "version": "1.2.3",
-      "dev": true,
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "lodash": {
-          "version": "4.14.2",
-          "dev": true
+          "version": "4.14.2"
         },
         "readable-stream": {
-          "version": "2.0.6",
-          "dev": true
+          "version": "2.0.6"
         },
         "through2": {
-          "version": "2.0.1",
-          "dev": true
+          "version": "2.0.1"
         }
       }
     },
     "cookie": {
-      "version": "0.1.3",
-      "dev": true
+      "version": "0.1.3"
     },
     "cookie-parser": {
-      "version": "1.3.5",
-      "dev": true
+      "version": "1.3.5"
     },
     "cookie-signature": {
-      "version": "1.0.6",
-      "dev": true
+      "version": "1.0.6"
     },
     "core-js": {
       "version": "2.4.1"
     },
     "core-util-is": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "cors": {
-      "version": "2.7.1",
-      "dev": true
+      "version": "2.7.1"
     },
     "crc": {
-      "version": "3.3.0",
-      "dev": true
+      "version": "3.3.0"
     },
     "crc32-stream": {
       "version": "0.3.4",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "1.0.33",
-          "dev": true
+          "version": "1.0.33"
         }
       }
     },
     "create-error-class": {
-      "version": "3.0.2",
-      "dev": true
+      "version": "3.0.2"
     },
     "cryptiles": {
-      "version": "2.0.5",
-      "dev": true
+      "version": "2.0.5"
     },
     "crypto-browserify": {
-      "version": "3.2.8",
-      "dev": true
+      "version": "3.2.8"
     },
     "csrf": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "csurf": {
-      "version": "1.8.3",
-      "dev": true
+      "version": "1.8.3"
     },
     "ctype": {
-      "version": "0.5.3",
-      "dev": true
+      "version": "0.5.3"
     },
     "custom-event": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "cycle": {
-      "version": "1.0.3",
-      "dev": true
+      "version": "1.0.3"
     },
     "d": {
-      "version": "0.1.1",
-      "dev": true
+      "version": "0.1.1"
     },
     "dargs": {
-      "version": "4.1.0",
-      "dev": true
+      "version": "4.1.0"
     },
     "dashdash": {
       "version": "1.14.0",
-      "dev": true,
       "dependencies": {
         "assert-plus": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         }
       }
     },
     "date-now": {
-      "version": "0.1.4",
-      "dev": true
+      "version": "0.1.4"
     },
     "dateformat": {
-      "version": "1.0.12",
-      "dev": true
+      "version": "1.0.12"
     },
     "death": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "debug": {
-      "version": "2.2.0",
-      "dev": true
+      "version": "2.2.0"
     },
     "decamelize": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
     },
     "deep-extend": {
-      "version": "0.4.1",
-      "dev": true
+      "version": "0.4.1"
     },
     "defaults": {
-      "version": "1.0.3",
-      "dev": true
+      "version": "1.0.3"
     },
     "del": {
-      "version": "2.2.2",
-      "dev": true
+      "version": "2.2.2"
     },
     "delayed-stream": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "delegates": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "depd": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "dependency-graph": {
-      "version": "0.4.1",
-      "dev": true
+      "version": "0.4.1"
     },
     "deprecated": {
-      "version": "0.0.1",
-      "dev": true
+      "version": "0.0.1"
     },
     "destroy": {
-      "version": "1.0.3",
-      "dev": true
+      "version": "1.0.3"
     },
     "detect-indent": {
-      "version": "4.0.0",
-      "dev": true
+      "version": "4.0.0"
     },
     "dgeni": {
-      "version": "0.4.2",
-      "dev": true
+      "version": "0.4.2"
     },
     "dgeni-packages": {
       "version": "0.16.5",
-      "dev": true,
       "dependencies": {
         "espree": {
-          "version": "2.2.5",
-          "dev": true
+          "version": "2.2.5"
         },
         "glob": {
-          "version": "7.1.1",
-          "dev": true
+          "version": "7.1.1"
         },
         "lodash": {
-          "version": "4.17.4",
-          "dev": true
+          "version": "4.17.4"
         },
         "semver": {
-          "version": "5.3.0",
-          "dev": true
+          "version": "5.3.0"
         },
         "typescript": {
-          "version": "1.8.10",
-          "dev": true
+          "version": "1.8.10"
         }
       }
     },
     "di": {
-      "version": "0.0.1",
-      "dev": true
+      "version": "0.0.1"
     },
     "diff": {
-      "version": "2.2.1",
-      "dev": true
+      "version": "2.2.1"
     },
     "doctrine": {
-      "version": "0.7.2",
-      "dev": true
+      "version": "0.7.2"
     },
     "dom-serialize": {
-      "version": "2.2.1",
-      "dev": true
+      "version": "2.2.1"
     },
     "dom-serializer": {
       "version": "0.1.0",
-      "dev": true,
       "dependencies": {
         "domelementtype": {
-          "version": "1.1.3",
-          "dev": true
+          "version": "1.1.3"
         }
       }
     },
     "domain-browser": {
-      "version": "1.1.7",
-      "dev": true
+      "version": "1.1.7"
     },
     "domelementtype": {
-      "version": "1.3.0",
-      "dev": true
+      "version": "1.3.0"
     },
     "domhandler": {
-      "version": "2.3.0",
-      "dev": true
+      "version": "2.3.0"
     },
     "domutils": {
-      "version": "1.5.1",
-      "dev": true
+      "version": "1.5.1"
     },
     "dot-case": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "dot-prop": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "duplexer": {
-      "version": "0.1.1",
-      "dev": true
+      "version": "0.1.1"
     },
     "duplexer2": {
-      "version": "0.0.2",
-      "dev": true
+      "version": "0.0.2"
     },
     "ecc-jsbn": {
-      "version": "0.1.1",
-      "dev": true,
-      "optional": true
+      "version": "0.1.1"
     },
     "ee-first": {
-      "version": "1.1.1",
-      "dev": true
+      "version": "1.1.1"
     },
     "end-of-stream": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "engine.io": {
       "version": "1.6.9",
-      "dev": true,
       "dependencies": {
         "accepts": {
-          "version": "1.1.4",
-          "dev": true
+          "version": "1.1.4"
         },
         "negotiator": {
-          "version": "0.4.9",
-          "dev": true
+          "version": "0.4.9"
         },
         "ws": {
-          "version": "1.0.1",
-          "dev": true
+          "version": "1.0.1"
         }
       }
     },
     "engine.io-client": {
       "version": "1.6.9",
-      "dev": true,
       "dependencies": {
         "ws": {
-          "version": "1.0.1",
-          "dev": true
+          "version": "1.0.1"
         }
       }
     },
     "engine.io-parser": {
       "version": "1.2.4",
-      "dev": true,
       "dependencies": {
         "has-binary": {
-          "version": "0.1.6",
-          "dev": true
+          "version": "0.1.6"
         }
       }
     },
     "enhanced-resolve": {
       "version": "0.9.1",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
-          "version": "4.1.2",
-          "dev": true
+          "version": "4.1.2"
         },
         "memory-fs": {
-          "version": "0.2.0",
-          "dev": true
+          "version": "0.2.0"
         }
       }
     },
     "ent": {
-      "version": "2.2.0",
-      "dev": true
+      "version": "2.2.0"
     },
     "entities": {
-      "version": "1.1.1",
-      "dev": true
+      "version": "1.1.1"
     },
     "envify": {
-      "version": "3.4.0",
-      "dev": true
+      "version": "3.4.0"
     },
     "errno": {
-      "version": "0.1.4",
-      "dev": true
+      "version": "0.1.4"
     },
     "error-ex": {
-      "version": "1.3.0",
-      "dev": true
+      "version": "1.3.0"
     },
     "errorhandler": {
-      "version": "1.4.2",
-      "dev": true
+      "version": "1.4.2"
     },
     "es5-ext": {
-      "version": "0.10.11",
-      "dev": true
+      "version": "0.10.11"
     },
     "es6-iterator": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "es6-module-loader": {
-      "version": "0.17.9",
-      "dev": true
+      "version": "0.17.9"
     },
     "es6-promise": {
-      "version": "3.3.1",
-      "dev": true
+      "version": "3.3.1"
     },
     "es6-symbol": {
-      "version": "3.0.2",
-      "dev": true
+      "version": "3.0.2"
     },
     "es6-weak-map": {
       "version": "0.1.4",
-      "dev": true,
       "dependencies": {
         "es6-iterator": {
-          "version": "0.1.3",
-          "dev": true
+          "version": "0.1.3"
         },
         "es6-symbol": {
-          "version": "2.0.1",
-          "dev": true
+          "version": "2.0.1"
         }
       }
     },
     "escape-html": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "escape-string-regexp": {
-      "version": "1.0.4",
-      "dev": true
+      "version": "1.0.4"
     },
     "esprima": {
-      "version": "2.7.1",
-      "dev": true
+      "version": "2.7.1"
     },
     "estraverse": {
-      "version": "4.2.0",
-      "dev": true
+      "version": "4.2.0"
     },
     "estree-walker": {
-      "version": "0.2.1",
-      "dev": true
+      "version": "0.2.1"
     },
     "esutils": {
-      "version": "1.1.6",
-      "dev": true
+      "version": "1.1.6"
     },
     "etag": {
-      "version": "1.7.0",
-      "dev": true
+      "version": "1.7.0"
     },
     "event-emitter": {
-      "version": "0.3.4",
-      "dev": true
+      "version": "0.3.4"
     },
     "event-stream": {
       "version": "3.3.2",
-      "dev": true,
       "dependencies": {
         "split": {
-          "version": "0.3.3",
-          "dev": true
+          "version": "0.3.3"
         }
       }
     },
     "eventemitter3": {
-      "version": "1.2.0",
-      "dev": true
+      "version": "1.2.0"
     },
     "events": {
-      "version": "1.1.1",
-      "dev": true
+      "version": "1.1.1"
     },
     "exit": {
-      "version": "0.1.2",
-      "dev": true
+      "version": "0.1.2"
     },
     "exit-hook": {
-      "version": "1.1.1",
-      "dev": true
+      "version": "1.1.1"
     },
     "expand-braces": {
       "version": "0.1.2",
-      "dev": true,
       "dependencies": {
         "braces": {
-          "version": "0.1.5",
-          "dev": true
+          "version": "0.1.5"
         },
         "expand-range": {
-          "version": "0.1.1",
-          "dev": true
+          "version": "0.1.1"
         },
         "is-number": {
-          "version": "0.1.1",
-          "dev": true
+          "version": "0.1.1"
         },
         "repeat-string": {
-          "version": "0.2.2",
-          "dev": true
+          "version": "0.2.2"
         }
       }
     },
     "expand-brackets": {
-      "version": "0.1.4",
-      "dev": true
+      "version": "0.1.4"
     },
     "expand-range": {
-      "version": "1.8.1",
-      "dev": true
+      "version": "1.8.1"
     },
     "express-session": {
-      "version": "1.11.3",
-      "dev": true
+      "version": "1.11.3"
     },
     "extend": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "external-editor": {
       "version": "1.1.1",
-      "dev": true,
       "dependencies": {
         "tmp": {
-          "version": "0.0.29",
-          "dev": true
+          "version": "0.0.29"
         }
       }
     },
     "extglob": {
-      "version": "0.3.1",
-      "dev": true
+      "version": "0.3.1"
     },
     "extsprintf": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "eyes": {
-      "version": "0.1.8",
-      "dev": true
+      "version": "0.1.8"
     },
     "fancy-log": {
       "version": "1.1.0",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "ansi-styles": {
-          "version": "2.1.0",
-          "dev": true
+          "version": "2.1.0"
         },
         "chalk": {
-          "version": "1.1.1",
-          "dev": true
+          "version": "1.1.1"
         },
         "has-ansi": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "strip-ansi": {
-          "version": "3.0.0",
-          "dev": true
+          "version": "3.0.0"
         },
         "supports-color": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         }
       }
     },
     "faye-websocket": {
-      "version": "0.10.0",
-      "dev": true
+      "version": "0.10.0"
     },
     "fbjs": {
       "version": "0.6.0",
-      "dev": true,
       "dependencies": {
         "core-js": {
-          "version": "1.2.6",
-          "dev": true
+          "version": "1.2.6"
         }
       }
     },
     "figures": {
       "version": "1.7.0",
-      "dev": true,
       "dependencies": {
         "escape-string-regexp": {
-          "version": "1.0.5",
-          "dev": true
+          "version": "1.0.5"
         },
         "object-assign": {
-          "version": "4.1.1",
-          "dev": true
+          "version": "4.1.1"
         }
       }
     },
     "filename-regex": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "fill-range": {
-      "version": "2.2.3",
-      "dev": true
+      "version": "2.2.3"
     },
     "filled-array": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "finalhandler": {
-      "version": "0.4.0",
-      "dev": true
+      "version": "0.4.0"
     },
     "find-index": {
-      "version": "0.1.1",
-      "dev": true
+      "version": "0.1.1"
     },
     "find-up": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "findup-sync": {
       "version": "0.3.0",
-      "dev": true,
       "dependencies": {
         "glob": {
-          "version": "5.0.15",
-          "dev": true
+          "version": "5.0.15"
         }
       }
     },
     "firefox-profile": {
       "version": "0.3.11",
-      "dev": true,
       "dependencies": {
         "async": {
-          "version": "0.9.2",
-          "dev": true
+          "version": "0.9.2"
         },
         "fs-extra": {
-          "version": "0.16.5",
-          "dev": true
+          "version": "0.16.5"
         },
         "lodash": {
-          "version": "3.5.0",
-          "dev": true
+          "version": "3.5.0"
         }
       }
     },
     "first-chunk-stream": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "flagged-respawn": {
-      "version": "0.3.1",
-      "dev": true
+      "version": "0.3.1"
     },
     "for-in": {
-      "version": "0.1.4",
-      "dev": true
+      "version": "0.1.4"
     },
     "for-own": {
-      "version": "0.1.3",
-      "dev": true
+      "version": "0.1.3"
     },
     "forever-agent": {
-      "version": "0.6.1",
-      "dev": true
+      "version": "0.6.1"
     },
     "form-data": {
       "version": "2.1.2",
-      "dev": true,
       "dependencies": {
         "mime-db": {
-          "version": "1.24.0",
-          "dev": true
+          "version": "1.24.0"
         },
         "mime-types": {
-          "version": "2.1.12",
-          "dev": true
+          "version": "2.1.12"
         }
       }
     },
     "fresh": {
-      "version": "0.3.0",
-      "dev": true
+      "version": "0.3.0"
     },
     "from": {
-      "version": "0.1.3",
-      "dev": true
+      "version": "0.1.3"
     },
     "fs-access": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "fs-extra": {
       "version": "0.26.3",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
-          "version": "4.1.2",
-          "dev": true
+          "version": "4.1.2"
         }
       }
     },
     "fs-promise": {
-      "version": "0.3.1",
-      "dev": true
+      "version": "0.3.1"
     },
     "fs.realpath": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "fsevents": {
       "version": "1.0.17",
-      "optional": true,
       "dependencies": {
         "abbrev": {
-          "version": "1.0.9",
-          "optional": true
+          "version": "1.0.9"
         },
         "ansi-regex": {
           "version": "2.0.0"
         },
         "ansi-styles": {
-          "version": "2.2.1",
-          "optional": true
+          "version": "2.2.1"
         },
         "aproba": {
-          "version": "1.0.4",
-          "optional": true
+          "version": "1.0.4"
         },
         "are-we-there-yet": {
-          "version": "1.1.2",
-          "optional": true
+          "version": "1.1.2"
         },
         "asn1": {
-          "version": "0.2.3",
-          "optional": true
+          "version": "0.2.3"
         },
         "assert-plus": {
-          "version": "0.2.0",
-          "optional": true
+          "version": "0.2.0"
         },
         "asynckit": {
-          "version": "0.4.0",
-          "optional": true
+          "version": "0.4.0"
         },
         "aws-sign2": {
-          "version": "0.6.0",
-          "optional": true
+          "version": "0.6.0"
         },
         "aws4": {
-          "version": "1.5.0",
-          "optional": true
+          "version": "1.5.0"
         },
         "balanced-match": {
           "version": "0.4.2"
         },
         "bcrypt-pbkdf": {
-          "version": "1.0.0",
-          "optional": true
+          "version": "1.0.0"
         },
         "block-stream": {
           "version": "0.0.9"
@@ -2968,16 +2325,13 @@
           "version": "1.0.0"
         },
         "caseless": {
-          "version": "0.11.0",
-          "optional": true
+          "version": "0.11.0"
         },
         "chalk": {
           "version": "1.1.3",
-          "optional": true,
           "dependencies": {
             "supports-color": {
-              "version": "2.0.0",
-              "optional": true
+              "version": "2.0.0"
             }
           }
         },
@@ -2988,8 +2342,7 @@
           "version": "1.0.5"
         },
         "commander": {
-          "version": "2.9.0",
-          "optional": true
+          "version": "2.9.0"
         },
         "concat-map": {
           "version": "0.0.1"
@@ -3001,56 +2354,45 @@
           "version": "1.0.2"
         },
         "cryptiles": {
-          "version": "2.0.5",
-          "optional": true
+          "version": "2.0.5"
         },
         "dashdash": {
           "version": "1.14.1",
-          "optional": true,
           "dependencies": {
             "assert-plus": {
-              "version": "1.0.0",
-              "optional": true
+              "version": "1.0.0"
             }
           }
         },
         "debug": {
-          "version": "2.2.0",
-          "optional": true
+          "version": "2.2.0"
         },
         "deep-extend": {
-          "version": "0.4.1",
-          "optional": true
+          "version": "0.4.1"
         },
         "delayed-stream": {
           "version": "1.0.0"
         },
         "delegates": {
-          "version": "1.0.0",
-          "optional": true
+          "version": "1.0.0"
         },
         "ecc-jsbn": {
-          "version": "0.1.1",
-          "optional": true
+          "version": "0.1.1"
         },
         "escape-string-regexp": {
-          "version": "1.0.5",
-          "optional": true
+          "version": "1.0.5"
         },
         "extend": {
-          "version": "3.0.0",
-          "optional": true
+          "version": "3.0.0"
         },
         "extsprintf": {
           "version": "1.0.2"
         },
         "forever-agent": {
-          "version": "0.6.1",
-          "optional": true
+          "version": "0.6.1"
         },
         "form-data": {
-          "version": "2.1.2",
-          "optional": true
+          "version": "2.1.2"
         },
         "fs.realpath": {
           "version": "1.0.0"
@@ -3059,28 +2401,22 @@
           "version": "1.0.10"
         },
         "fstream-ignore": {
-          "version": "1.0.5",
-          "optional": true
+          "version": "1.0.5"
         },
         "gauge": {
-          "version": "2.7.2",
-          "optional": true
+          "version": "2.7.2"
         },
         "generate-function": {
-          "version": "2.0.0",
-          "optional": true
+          "version": "2.0.0"
         },
         "generate-object-property": {
-          "version": "1.2.0",
-          "optional": true
+          "version": "1.2.0"
         },
         "getpass": {
           "version": "0.1.6",
-          "optional": true,
           "dependencies": {
             "assert-plus": {
-              "version": "1.0.0",
-              "optional": true
+              "version": "1.0.0"
             }
           }
         },
@@ -3091,31 +2427,25 @@
           "version": "4.1.11"
         },
         "graceful-readlink": {
-          "version": "1.0.1",
-          "optional": true
+          "version": "1.0.1"
         },
         "har-validator": {
-          "version": "2.0.6",
-          "optional": true
+          "version": "2.0.6"
         },
         "has-ansi": {
-          "version": "2.0.0",
-          "optional": true
+          "version": "2.0.0"
         },
         "has-unicode": {
-          "version": "2.0.1",
-          "optional": true
+          "version": "2.0.1"
         },
         "hawk": {
-          "version": "3.1.3",
-          "optional": true
+          "version": "3.1.3"
         },
         "hoek": {
           "version": "2.16.3"
         },
         "http-signature": {
-          "version": "1.1.1",
-          "optional": true
+          "version": "1.1.1"
         },
         "inflight": {
           "version": "1.0.6"
@@ -3124,54 +2454,43 @@
           "version": "2.0.3"
         },
         "ini": {
-          "version": "1.3.4",
-          "optional": true
+          "version": "1.3.4"
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0"
         },
         "is-my-json-valid": {
-          "version": "2.15.0",
-          "optional": true
+          "version": "2.15.0"
         },
         "is-property": {
-          "version": "1.0.2",
-          "optional": true
+          "version": "1.0.2"
         },
         "is-typedarray": {
-          "version": "1.0.0",
-          "optional": true
+          "version": "1.0.0"
         },
         "isarray": {
           "version": "1.0.0"
         },
         "isstream": {
-          "version": "0.1.2",
-          "optional": true
+          "version": "0.1.2"
         },
         "jodid25519": {
-          "version": "1.0.2",
-          "optional": true
+          "version": "1.0.2"
         },
         "jsbn": {
-          "version": "0.1.0",
-          "optional": true
+          "version": "0.1.0"
         },
         "json-schema": {
-          "version": "0.2.3",
-          "optional": true
+          "version": "0.2.3"
         },
         "json-stringify-safe": {
-          "version": "5.0.1",
-          "optional": true
+          "version": "5.0.1"
         },
         "jsonpointer": {
-          "version": "4.0.1",
-          "optional": true
+          "version": "4.0.1"
         },
         "jsprim": {
-          "version": "1.3.1",
-          "optional": true
+          "version": "1.3.1"
         },
         "mime-db": {
           "version": "1.25.0"
@@ -3189,31 +2508,25 @@
           "version": "0.5.1"
         },
         "ms": {
-          "version": "0.7.1",
-          "optional": true
+          "version": "0.7.1"
         },
         "node-pre-gyp": {
-          "version": "0.6.32",
-          "optional": true
+          "version": "0.6.32"
         },
         "nopt": {
-          "version": "3.0.6",
-          "optional": true
+          "version": "3.0.6"
         },
         "npmlog": {
-          "version": "4.0.2",
-          "optional": true
+          "version": "4.0.2"
         },
         "number-is-nan": {
           "version": "1.0.1"
         },
         "oauth-sign": {
-          "version": "0.8.2",
-          "optional": true
+          "version": "0.8.2"
         },
         "object-assign": {
-          "version": "4.1.0",
-          "optional": true
+          "version": "4.1.0"
         },
         "once": {
           "version": "1.4.0"
@@ -3222,68 +2535,54 @@
           "version": "1.0.1"
         },
         "pinkie": {
-          "version": "2.0.4",
-          "optional": true
+          "version": "2.0.4"
         },
         "pinkie-promise": {
-          "version": "2.0.1",
-          "optional": true
+          "version": "2.0.1"
         },
         "process-nextick-args": {
           "version": "1.0.7"
         },
         "punycode": {
-          "version": "1.4.1",
-          "optional": true
+          "version": "1.4.1"
         },
         "qs": {
-          "version": "6.3.0",
-          "optional": true
+          "version": "6.3.0"
         },
         "rc": {
           "version": "1.1.6",
-          "optional": true,
           "dependencies": {
             "minimist": {
-              "version": "1.2.0",
-              "optional": true
+              "version": "1.2.0"
             }
           }
         },
         "readable-stream": {
-          "version": "2.2.2",
-          "optional": true
+          "version": "2.2.2"
         },
         "request": {
-          "version": "2.79.0",
-          "optional": true
+          "version": "2.79.0"
         },
         "rimraf": {
           "version": "2.5.4"
         },
         "semver": {
-          "version": "5.3.0",
-          "optional": true
+          "version": "5.3.0"
         },
         "set-blocking": {
-          "version": "2.0.0",
-          "optional": true
+          "version": "2.0.0"
         },
         "signal-exit": {
-          "version": "3.0.2",
-          "optional": true
+          "version": "3.0.2"
         },
         "sntp": {
-          "version": "1.0.9",
-          "optional": true
+          "version": "1.0.9"
         },
         "sshpk": {
           "version": "1.10.1",
-          "optional": true,
           "dependencies": {
             "assert-plus": {
-              "version": "1.0.0",
-              "optional": true
+              "version": "1.0.0"
             }
           }
         },
@@ -3294,1370 +2593,1067 @@
           "version": "1.0.2"
         },
         "stringstream": {
-          "version": "0.0.5",
-          "optional": true
+          "version": "0.0.5"
         },
         "strip-ansi": {
           "version": "3.0.1"
         },
         "strip-json-comments": {
-          "version": "1.0.4",
-          "optional": true
+          "version": "1.0.4"
         },
         "supports-color": {
-          "version": "0.2.0",
-          "optional": true
+          "version": "0.2.0"
         },
         "tar": {
           "version": "2.2.1"
         },
         "tar-pack": {
           "version": "3.3.0",
-          "optional": true,
           "dependencies": {
             "once": {
-              "version": "1.3.3",
-              "optional": true
+              "version": "1.3.3"
             },
             "readable-stream": {
-              "version": "2.1.5",
-              "optional": true
+              "version": "2.1.5"
             }
           }
         },
         "tough-cookie": {
-          "version": "2.3.2",
-          "optional": true
+          "version": "2.3.2"
         },
         "tunnel-agent": {
-          "version": "0.4.3",
-          "optional": true
+          "version": "0.4.3"
         },
         "tweetnacl": {
-          "version": "0.14.5",
-          "optional": true
+          "version": "0.14.5"
         },
         "uid-number": {
-          "version": "0.0.6",
-          "optional": true
+          "version": "0.0.6"
         },
         "util-deprecate": {
           "version": "1.0.2"
         },
         "uuid": {
-          "version": "3.0.1",
-          "optional": true
+          "version": "3.0.1"
         },
         "verror": {
-          "version": "1.3.6",
-          "optional": true
+          "version": "1.3.6"
         },
         "wide-align": {
-          "version": "1.1.0",
-          "optional": true
+          "version": "1.1.0"
         },
         "wrappy": {
           "version": "1.0.2"
         },
         "xtend": {
-          "version": "4.0.1",
-          "optional": true
+          "version": "4.0.1"
         }
       }
     },
     "fstream": {
-      "version": "0.1.31",
-      "dev": true
+      "version": "0.1.31"
     },
     "fx-runner": {
       "version": "0.0.7",
-      "dev": true,
       "dependencies": {
         "commander": {
-          "version": "2.6.0",
-          "dev": true
+          "version": "2.6.0"
         },
         "lodash": {
-          "version": "2.4.1",
-          "dev": true
+          "version": "2.4.1"
         },
         "when": {
-          "version": "3.6.4",
-          "dev": true
+          "version": "3.6.4"
         }
       }
     },
     "gauge": {
       "version": "2.7.2",
-      "dev": true,
       "dependencies": {
         "object-assign": {
-          "version": "4.1.1",
-          "dev": true
+          "version": "4.1.1"
         },
         "signal-exit": {
-          "version": "3.0.2",
-          "dev": true
+          "version": "3.0.2"
         },
         "supports-color": {
-          "version": "0.2.0",
-          "dev": true
+          "version": "0.2.0"
         }
       }
     },
     "gaze": {
-      "version": "0.5.2",
-      "dev": true
+      "version": "0.5.2"
     },
     "generate-function": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "generate-object-property": {
-      "version": "1.2.0",
-      "dev": true
+      "version": "1.2.0"
     },
     "get-pkg-repo": {
       "version": "1.2.1",
-      "dev": true,
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "readable-stream": {
-          "version": "2.0.6",
-          "dev": true
+          "version": "2.0.6"
         },
         "through2": {
-          "version": "2.0.1",
-          "dev": true
+          "version": "2.0.1"
         }
       }
     },
     "get-stdin": {
-      "version": "4.0.1",
-      "dev": true
+      "version": "4.0.1"
     },
     "getpass": {
       "version": "0.1.6",
-      "dev": true,
       "dependencies": {
         "assert-plus": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         }
       }
     },
     "git-raw-commits": {
       "version": "1.1.2",
-      "dev": true,
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "lodash.template": {
-          "version": "4.3.0",
-          "dev": true
+          "version": "4.3.0"
         },
         "lodash.templatesettings": {
-          "version": "4.1.0",
-          "dev": true
+          "version": "4.1.0"
         },
         "readable-stream": {
-          "version": "2.0.6",
-          "dev": true
+          "version": "2.0.6"
         },
         "through2": {
-          "version": "2.0.1",
-          "dev": true
+          "version": "2.0.1"
         }
       }
     },
     "git-remote-origin-url": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "git-semver-tags": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
     },
     "gitconfiglocal": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "github-url-from-git": {
-      "version": "1.4.0",
-      "dev": true
+      "version": "1.4.0"
     },
     "glob": {
       "version": "4.5.3",
-      "dev": true,
       "dependencies": {
         "minimatch": {
-          "version": "2.0.10",
-          "dev": true
+          "version": "2.0.10"
         }
       }
     },
     "glob-base": {
-      "version": "0.3.0",
-      "dev": true
+      "version": "0.3.0"
     },
     "glob-parent": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "glob-stream": {
       "version": "3.1.18",
-      "dev": true,
       "dependencies": {
         "minimatch": {
-          "version": "2.0.10",
-          "dev": true
+          "version": "2.0.10"
         }
       }
     },
     "glob-watcher": {
-      "version": "0.0.6",
-      "dev": true
+      "version": "0.0.6"
     },
     "glob2base": {
-      "version": "0.0.12",
-      "dev": true
+      "version": "0.0.12"
     },
     "globby": {
       "version": "5.0.0",
-      "dev": true,
       "dependencies": {
         "glob": {
-          "version": "7.1.1",
-          "dev": true
+          "version": "7.1.1"
         }
       }
     },
     "globule": {
       "version": "0.1.0",
-      "dev": true,
       "dependencies": {
         "glob": {
-          "version": "3.1.21",
-          "dev": true
+          "version": "3.1.21"
         },
         "graceful-fs": {
-          "version": "1.2.3",
-          "dev": true
+          "version": "1.2.3"
         },
         "inherits": {
-          "version": "1.0.2",
-          "dev": true
+          "version": "1.0.2"
         },
         "lodash": {
-          "version": "1.0.2",
-          "dev": true
+          "version": "1.0.2"
         },
         "minimatch": {
           "version": "0.2.14",
-          "dev": true,
           "dependencies": {
             "lru-cache": {
-              "version": "2.7.3",
-              "dev": true
+              "version": "2.7.3"
             },
             "sigmund": {
-              "version": "1.0.1",
-              "dev": true
+              "version": "1.0.1"
             }
           }
         }
       }
     },
     "glogg": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "got": {
       "version": "5.7.1",
-      "dev": true,
       "dependencies": {
         "duplexer2": {
-          "version": "0.1.4",
-          "dev": true
+          "version": "0.1.4"
         },
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "readable-stream": {
-          "version": "2.2.2",
-          "dev": true
+          "version": "2.2.2"
         }
       }
     },
     "graceful-fs": {
-      "version": "3.0.8",
-      "dev": true
+      "version": "3.0.8"
     },
     "graceful-readlink": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "gulp": {
       "version": "3.9.0",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "ansi-styles": {
-          "version": "2.1.0",
-          "dev": true
+          "version": "2.1.0"
         },
         "chalk": {
-          "version": "1.1.1",
-          "dev": true
+          "version": "1.1.1"
         },
         "has-ansi": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "semver": {
-          "version": "4.3.6",
-          "dev": true
+          "version": "4.3.6"
         },
         "strip-ansi": {
-          "version": "3.0.0",
-          "dev": true
+          "version": "3.0.0"
         },
         "supports-color": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         }
       }
     },
     "gulp-clang-format": {
       "version": "1.0.23",
-      "dev": true,
       "dependencies": {
         "duplexer2": {
-          "version": "0.1.4",
-          "dev": true
+          "version": "0.1.4"
         },
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "readable-stream": {
           "version": "2.1.4",
-          "dev": true,
           "dependencies": {
             "buffer-shims": {
-              "version": "1.0.0",
-              "dev": true
+              "version": "1.0.0"
             }
           }
         },
         "stream-combiner2": {
-          "version": "1.1.1",
-          "dev": true
+          "version": "1.1.1"
         }
       }
     },
     "gulp-connect": {
       "version": "2.3.1",
-      "dev": true,
       "dependencies": {
         "connect": {
-          "version": "2.30.2",
-          "dev": true
+          "version": "2.30.2"
         }
       }
     },
     "gulp-conventional-changelog": {
       "version": "1.1.0",
-      "dev": true,
       "dependencies": {
         "concat-stream": {
-          "version": "1.5.1",
-          "dev": true
+          "version": "1.5.1"
         },
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "readable-stream": {
-          "version": "2.0.6",
-          "dev": true
+          "version": "2.0.6"
         },
         "through2": {
-          "version": "2.0.1",
-          "dev": true
+          "version": "2.0.1"
         }
       }
     },
     "gulp-diff": {
       "version": "1.0.0",
-      "dev": true,
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "readable-stream": {
-          "version": "2.0.6",
-          "dev": true
+          "version": "2.0.6"
         },
         "through2": {
-          "version": "2.0.1",
-          "dev": true
+          "version": "2.0.1"
         }
       }
     },
     "gulp-tslint": {
-      "version": "7.0.1",
-      "dev": true
+      "version": "7.0.1"
     },
     "gulp-util": {
       "version": "3.0.7",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "ansi-styles": {
-          "version": "2.1.0",
-          "dev": true
+          "version": "2.1.0"
         },
         "chalk": {
-          "version": "1.1.1",
-          "dev": true
+          "version": "1.1.1"
         },
         "has-ansi": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "object-assign": {
-          "version": "3.0.0",
-          "dev": true
+          "version": "3.0.0"
         },
         "readable-stream": {
-          "version": "2.0.5",
-          "dev": true
+          "version": "2.0.5"
         },
         "strip-ansi": {
-          "version": "3.0.0",
-          "dev": true
+          "version": "3.0.0"
         },
         "supports-color": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "through2": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "vinyl": {
-          "version": "0.5.3",
-          "dev": true
+          "version": "0.5.3"
         }
       }
     },
     "gulplog": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "hammerjs": {
-      "version": "2.0.8",
-      "dev": true
+      "version": "2.0.8"
     },
     "handlebars": {
       "version": "4.0.5",
-      "dev": true,
       "dependencies": {
         "async": {
-          "version": "1.5.2",
-          "dev": true
+          "version": "1.5.2"
         },
         "source-map": {
           "version": "0.4.4",
-          "dev": true,
           "dependencies": {
             "amdefine": {
-              "version": "1.0.1",
-              "dev": true
+              "version": "1.0.1"
             }
           }
         }
       }
     },
+    "har-schema": {
+      "version": "1.0.5"
+    },
     "har-validator": {
       "version": "2.0.6",
-      "dev": true,
       "dependencies": {
         "is-my-json-valid": {
-          "version": "2.15.0",
-          "dev": true
+          "version": "2.15.0"
         },
         "jsonpointer": {
-          "version": "4.0.0",
-          "dev": true
+          "version": "4.0.0"
         }
       }
     },
     "has-ansi": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "has-binary": {
-      "version": "0.1.7",
-      "dev": true
+      "version": "0.1.7"
     },
     "has-color": {
-      "version": "0.1.7",
-      "dev": true
+      "version": "0.1.7"
     },
     "has-cors": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "has-flag": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "has-gulplog": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "has-unicode": {
-      "version": "2.0.1",
-      "dev": true
+      "version": "2.0.1"
     },
     "hashish": {
-      "version": "0.0.4",
-      "dev": true
+      "version": "0.0.4"
     },
     "hawk": {
-      "version": "3.1.3",
-      "dev": true
+      "version": "3.1.3"
     },
     "header-case": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "hoek": {
-      "version": "2.16.3",
-      "dev": true
+      "version": "2.16.3"
     },
     "hosted-git-info": {
-      "version": "2.1.4",
-      "dev": true
+      "version": "2.1.4"
     },
     "html": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "htmlparser2": {
       "version": "3.9.2",
-      "dev": true,
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "readable-stream": {
-          "version": "2.2.2",
-          "dev": true
+          "version": "2.2.2"
         }
       }
     },
     "http-browserify": {
-      "version": "1.7.0",
-      "dev": true
+      "version": "1.7.0"
     },
     "http-errors": {
-      "version": "1.3.1",
-      "dev": true
+      "version": "1.3.1"
     },
     "http-proxy": {
-      "version": "1.13.3",
-      "dev": true
+      "version": "1.13.3"
     },
     "http-signature": {
       "version": "1.1.1",
-      "dev": true,
       "dependencies": {
         "assert-plus": {
-          "version": "0.2.0",
-          "dev": true
+          "version": "0.2.0"
         }
       }
     },
     "https-browserify": {
-      "version": "0.0.0",
-      "dev": true
+      "version": "0.0.0"
     },
     "https-proxy-agent": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "iconv-lite": {
-      "version": "0.4.11",
-      "dev": true
+      "version": "0.4.11"
     },
     "ieee754": {
-      "version": "1.1.8",
-      "dev": true
+      "version": "1.1.8"
     },
     "imurmurhash": {
-      "version": "0.1.4",
-      "dev": true
+      "version": "0.1.4"
     },
     "incremental-dom": {
-      "version": "0.4.1",
-      "dev": true
+      "version": "0.4.1"
     },
     "indent-string": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "indexof": {
-      "version": "0.0.1",
-      "dev": true
+      "version": "0.0.1"
     },
     "inflight": {
-      "version": "1.0.5",
-      "dev": true
+      "version": "1.0.5"
     },
     "inherits": {
-      "version": "2.0.1",
-      "dev": true
+      "version": "2.0.1"
     },
     "ini": {
-      "version": "1.3.4",
-      "dev": true
+      "version": "1.3.4"
     },
     "inquirer": {
       "version": "1.2.3",
-      "dev": true,
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "dev": true
+          "version": "4.17.4"
         },
         "mute-stream": {
-          "version": "0.0.6",
-          "dev": true
+          "version": "0.0.6"
         }
       }
     },
     "interpret": {
-      "version": "0.6.6",
-      "dev": true
+      "version": "0.6.6"
     },
     "invariant": {
-      "version": "2.2.2",
-      "dev": true
+      "version": "2.2.2"
     },
     "invert-kv": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "is-arrayish": {
-      "version": "0.2.1",
-      "dev": true
+      "version": "0.2.1"
     },
     "is-binary-path": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "is-buffer": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "is-builtin-module": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "is-ci": {
-      "version": "1.0.10",
-      "dev": true
+      "version": "1.0.10"
     },
     "is-dotfile": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "is-equal-shallow": {
-      "version": "0.1.3",
-      "dev": true
+      "version": "0.1.3"
     },
     "is-extendable": {
-      "version": "0.1.1",
-      "dev": true
+      "version": "0.1.1"
     },
     "is-extglob": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "is-finite": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "is-fullwidth-code-point": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "is-glob": {
-      "version": "2.0.1",
-      "dev": true
+      "version": "2.0.1"
     },
     "is-lower-case": {
-      "version": "1.1.3",
-      "dev": true
+      "version": "1.1.3"
+    },
+    "is-module": {
+      "version": "1.0.0"
     },
     "is-my-json-valid": {
-      "version": "2.12.3",
-      "dev": true
+      "version": "2.12.3"
     },
     "is-npm": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "is-number": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "is-obj": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "is-path-cwd": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "is-path-in-cwd": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "is-path-inside": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "is-primitive": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "is-promise": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "is-property": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "is-redirect": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "is-retry-allowed": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "is-stream": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "is-subset": {
-      "version": "0.1.1",
-      "dev": true
+      "version": "0.1.1"
     },
     "is-text-path": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "is-typedarray": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "is-upper-case": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
     },
     "is-utf8": {
-      "version": "0.2.1",
-      "dev": true
+      "version": "0.2.1"
     },
     "isarray": {
-      "version": "0.0.1",
-      "dev": true
+      "version": "0.0.1"
     },
     "isbinaryfile": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "isexe": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
     },
     "isobject": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "isstream": {
-      "version": "0.1.2",
-      "dev": true
+      "version": "0.1.2"
     },
     "jasmine": {
       "version": "2.4.1",
-      "dev": true,
       "dependencies": {
         "glob": {
-          "version": "3.2.11",
-          "dev": true
+          "version": "3.2.11"
         },
         "jasmine-core": {
-          "version": "2.4.1",
-          "dev": true
+          "version": "2.4.1"
         },
         "minimatch": {
-          "version": "0.3.0",
-          "dev": true
+          "version": "0.3.0"
         }
       }
     },
     "jasmine-core": {
-      "version": "2.4.1",
-      "dev": true
+      "version": "2.4.1"
     },
     "jasminewd2": {
-      "version": "0.0.10",
-      "dev": true
+      "version": "0.0.10"
     },
     "jetpack-id": {
-      "version": "0.0.4",
-      "dev": true
+      "version": "0.0.4"
     },
     "jetpack-validation": {
       "version": "0.0.4",
-      "dev": true,
       "dependencies": {
         "resolve": {
-          "version": "0.7.4",
-          "dev": true
+          "version": "0.7.4"
         },
         "semver": {
-          "version": "2.3.2",
-          "dev": true
+          "version": "2.3.2"
         }
       }
     },
     "jodid25519": {
-      "version": "1.0.2",
-      "dev": true,
-      "optional": true
+      "version": "1.0.2"
     },
     "jpm": {
       "version": "1.0.0",
-      "dev": true,
       "dependencies": {
         "async": {
-          "version": "0.9.2",
-          "dev": true
+          "version": "0.9.2"
         },
         "commander": {
-          "version": "2.6.0",
-          "dev": true
+          "version": "2.6.0"
         },
         "firefox-profile": {
           "version": "0.3.9",
-          "dev": true,
           "dependencies": {
             "lodash": {
-              "version": "3.5.0",
-              "dev": true
+              "version": "3.5.0"
             }
           }
         },
         "fs-extra": {
-          "version": "0.16.4",
-          "dev": true
+          "version": "0.16.4"
         },
         "lodash": {
-          "version": "3.3.1",
-          "dev": true
+          "version": "3.3.1"
         },
         "minimatch": {
-          "version": "2.0.4",
-          "dev": true
+          "version": "2.0.4"
         },
         "open": {
-          "version": "0.0.5",
-          "dev": true
+          "version": "0.0.5"
         },
         "semver": {
-          "version": "4.3.3",
-          "dev": true
+          "version": "4.3.3"
         }
       }
     },
     "jpm-core": {
-      "version": "0.0.9",
-      "dev": true
+      "version": "0.0.9"
     },
     "js-tokens": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "jsbn": {
-      "version": "0.1.0",
-      "dev": true,
-      "optional": true
+      "version": "0.1.0"
     },
     "json-schema": {
-      "version": "0.2.3",
-      "dev": true
+      "version": "0.2.3"
+    },
+    "json-stable-stringify": {
+      "version": "1.0.1"
     },
     "json-stringify-safe": {
-      "version": "5.0.1",
-      "dev": true
+      "version": "5.0.1"
     },
     "json3": {
-      "version": "3.2.6",
-      "dev": true
+      "version": "3.2.6"
     },
     "json5": {
-      "version": "0.4.0",
-      "dev": true
+      "version": "0.4.0"
     },
     "jsonfile": {
-      "version": "2.2.3",
-      "dev": true
+      "version": "2.2.3"
+    },
+    "jsonify": {
+      "version": "0.0.0"
     },
     "jsonparse": {
-      "version": "1.2.0",
-      "dev": true
+      "version": "1.2.0"
     },
     "jsonpointer": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "JSONStream": {
-      "version": "1.0.7",
-      "dev": true
+      "version": "1.0.7"
     },
     "jsontoxml": {
-      "version": "0.0.11",
-      "dev": true
+      "version": "0.0.11"
     },
     "jsprim": {
-      "version": "1.3.1",
-      "dev": true
+      "version": "1.3.1"
     },
     "jstransform": {
       "version": "10.1.0",
-      "dev": true,
       "dependencies": {
         "esprima-fb": {
-          "version": "13001.1001.0-dev-harmony-fb",
-          "dev": true
+          "version": "13001.1001.0-dev-harmony-fb"
         },
         "source-map": {
           "version": "0.1.31",
-          "dev": true,
           "dependencies": {
             "amdefine": {
-              "version": "1.0.1",
-              "dev": true
+              "version": "1.0.1"
             }
           }
         }
       }
     },
     "jszip": {
-      "version": "2.5.0",
-      "dev": true
+      "version": "2.5.0"
     },
     "karma": {
       "version": "0.13.20",
-      "dev": true,
       "dependencies": {
         "batch": {
-          "version": "0.5.3",
-          "dev": true
+          "version": "0.5.3"
         },
         "glob": {
-          "version": "7.0.3",
-          "dev": true
+          "version": "7.0.3"
         },
         "graceful-fs": {
-          "version": "4.1.4",
-          "dev": true
+          "version": "4.1.4"
         },
         "source-map": {
-          "version": "0.5.6",
-          "dev": true
+          "version": "0.5.6"
         }
       }
     },
     "karma-browserstack-launcher": {
-      "version": "0.1.9",
-      "dev": true
+      "version": "0.1.9"
     },
     "karma-chrome-launcher": {
-      "version": "0.2.2",
-      "dev": true
+      "version": "0.2.2"
     },
     "karma-jasmine": {
-      "version": "0.3.6",
-      "dev": true
+      "version": "0.3.6"
     },
     "karma-sauce-launcher": {
-      "version": "0.3.0",
-      "dev": true
+      "version": "0.3.0"
     },
     "karma-sourcemap-loader": {
-      "version": "0.3.6",
-      "dev": true
+      "version": "0.3.6"
     },
     "kind-of": {
-      "version": "3.0.2",
-      "dev": true
+      "version": "3.0.2"
     },
     "klaw": {
-      "version": "1.1.3",
-      "dev": true
+      "version": "1.1.3"
     },
     "latest-version": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "lazy-cache": {
-      "version": "0.2.7",
-      "dev": true
+      "version": "0.2.7"
     },
     "lazy-req": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "lazystream": {
       "version": "0.1.0",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "1.0.33",
-          "dev": true
+          "version": "1.0.33"
         }
       }
     },
     "lcid": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "leven": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "liftoff": {
       "version": "2.2.0",
-      "dev": true,
       "dependencies": {
         "extend": {
-          "version": "2.0.1",
-          "dev": true
+          "version": "2.0.1"
         },
         "findup-sync": {
-          "version": "0.3.0",
-          "dev": true
+          "version": "0.3.0"
         },
         "glob": {
-          "version": "5.0.15",
-          "dev": true
+          "version": "5.0.15"
         }
       }
     },
     "livereload-js": {
-      "version": "2.2.2",
-      "dev": true
+      "version": "2.2.2"
     },
     "load-json-file": {
       "version": "1.1.0",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
-          "version": "4.1.2",
-          "dev": true
+          "version": "4.1.2"
         }
       }
     },
     "loader-utils": {
-      "version": "0.2.12",
-      "dev": true
+      "version": "0.2.12"
     },
     "lodash": {
-      "version": "3.10.1",
-      "dev": true
+      "version": "3.10.1"
     },
     "lodash._basecopy": {
-      "version": "3.0.1",
-      "dev": true
+      "version": "3.0.1"
     },
     "lodash._basetostring": {
-      "version": "3.0.1",
-      "dev": true
+      "version": "3.0.1"
     },
     "lodash._basevalues": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "lodash._getnative": {
-      "version": "3.9.1",
-      "dev": true
+      "version": "3.9.1"
     },
     "lodash._isiterateecall": {
-      "version": "3.0.9",
-      "dev": true
+      "version": "3.0.9"
     },
     "lodash._reescape": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "lodash._reevaluate": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "lodash._reinterpolate": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "lodash.escape": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "lodash.isarguments": {
-      "version": "3.0.4",
-      "dev": true
+      "version": "3.0.4"
     },
     "lodash.isarray": {
-      "version": "3.0.4",
-      "dev": true
+      "version": "3.0.4"
     },
     "lodash.keys": {
-      "version": "3.1.2",
-      "dev": true
+      "version": "3.1.2"
     },
     "lodash.restparam": {
-      "version": "3.6.1",
-      "dev": true
+      "version": "3.6.1"
     },
     "lodash.template": {
-      "version": "3.6.2",
-      "dev": true
+      "version": "3.6.2"
     },
     "lodash.templatesettings": {
-      "version": "3.1.0",
-      "dev": true
+      "version": "3.1.0"
     },
     "log4js": {
       "version": "0.6.36",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "1.0.34",
-          "dev": true
+          "version": "1.0.34"
         },
         "semver": {
-          "version": "4.3.6",
-          "dev": true
+          "version": "4.3.6"
         }
       }
     },
+    "long": {
+      "version": "3.2.0"
+    },
     "longest": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "loose-envify": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "loud-rejection": {
-      "version": "1.2.0",
-      "dev": true
+      "version": "1.2.0"
     },
     "lower-case": {
-      "version": "1.1.3",
-      "dev": true
+      "version": "1.1.3"
     },
     "lower-case-first": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "lowercase-keys": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "lru-cache": {
-      "version": "2.7.3",
-      "dev": true
+      "version": "2.7.3"
     },
     "lru-queue": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "madge": {
       "version": "0.5.0",
-      "dev": true,
       "dependencies": {
         "amdetective": {
           "version": "0.0.2",
-          "dev": true,
           "dependencies": {
             "esprima": {
-              "version": "1.2.2",
-              "dev": true
+              "version": "1.2.2"
             }
           }
         },
         "coffee-script": {
-          "version": "1.3.3",
-          "dev": true
+          "version": "1.3.3"
         },
         "colors": {
-          "version": "0.6.0-1",
-          "dev": true
+          "version": "0.6.0-1"
         },
         "commander": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "commondir": {
-          "version": "0.0.1",
-          "dev": true
+          "version": "0.0.1"
         },
         "detective": {
-          "version": "0.1.1",
-          "dev": true
+          "version": "0.1.1"
         },
         "detective-es6": {
-          "version": "1.1.0",
-          "dev": true
+          "version": "1.1.0"
         },
         "graphviz": {
           "version": "0.0.7",
-          "dev": true,
           "dependencies": {
             "temp": {
-              "version": "0.4.0",
-              "dev": true
+              "version": "0.4.0"
             }
           }
         },
         "react-tools": {
           "version": "0.12.1",
-          "dev": true,
           "dependencies": {
             "commoner": {
               "version": "0.10.1",
-              "dev": true,
               "dependencies": {
                 "commander": {
-                  "version": "2.5.1",
-                  "dev": true
+                  "version": "2.5.1"
                 },
                 "glob": {
                   "version": "4.2.2",
-                  "dev": true,
                   "dependencies": {
                     "inflight": {
                       "version": "1.0.4",
-                      "dev": true,
                       "dependencies": {
                         "wrappy": {
-                          "version": "1.0.1",
-                          "dev": true
+                          "version": "1.0.1"
                         }
                       }
                     },
                     "inherits": {
-                      "version": "2.0.1",
-                      "dev": true
+                      "version": "2.0.1"
                     },
                     "minimatch": {
                       "version": "1.0.0",
-                      "dev": true,
                       "dependencies": {
                         "lru-cache": {
-                          "version": "2.5.0",
-                          "dev": true
+                          "version": "2.5.0"
                         },
                         "sigmund": {
-                          "version": "1.0.0",
-                          "dev": true
+                          "version": "1.0.0"
                         }
                       }
                     },
                     "once": {
                       "version": "1.3.1",
-                      "dev": true,
                       "dependencies": {
                         "wrappy": {
-                          "version": "1.0.1",
-                          "dev": true
+                          "version": "1.0.1"
                         }
                       }
                     }
                   }
                 },
                 "graceful-fs": {
-                  "version": "3.0.5",
-                  "dev": true
+                  "version": "3.0.5"
                 },
                 "iconv-lite": {
-                  "version": "0.4.5",
-                  "dev": true
+                  "version": "0.4.5"
                 },
                 "install": {
-                  "version": "0.1.8",
-                  "dev": true
+                  "version": "0.1.8"
                 },
                 "mkdirp": {
                   "version": "0.5.0",
-                  "dev": true,
                   "dependencies": {
                     "minimist": {
-                      "version": "0.0.8",
-                      "dev": true
+                      "version": "0.0.8"
                     }
                   }
                 },
                 "private": {
-                  "version": "0.1.6",
-                  "dev": true
+                  "version": "0.1.6"
                 },
                 "q": {
-                  "version": "1.1.2",
-                  "dev": true
+                  "version": "1.1.2"
                 },
                 "recast": {
                   "version": "0.9.11",
-                  "dev": true,
                   "dependencies": {
                     "ast-types": {
-                      "version": "0.6.7",
-                      "dev": true
+                      "version": "0.6.7"
                     },
                     "esprima-fb": {
-                      "version": "8001.1001.0-dev-harmony-fb",
-                      "dev": true
+                      "version": "8001.1001.0-dev-harmony-fb"
                     },
                     "source-map": {
                       "version": "0.1.41",
-                      "dev": true,
                       "dependencies": {
                         "amdefine": {
-                          "version": "0.1.0",
-                          "dev": true
+                          "version": "0.1.0"
                         }
                       }
                     }
@@ -4667,23 +3663,18 @@
             },
             "jstransform": {
               "version": "8.2.0",
-              "dev": true,
               "dependencies": {
                 "base62": {
-                  "version": "0.1.1",
-                  "dev": true
+                  "version": "0.1.1"
                 },
                 "esprima-fb": {
-                  "version": "8001.1001.0-dev-harmony-fb",
-                  "dev": true
+                  "version": "8001.1001.0-dev-harmony-fb"
                 },
                 "source-map": {
                   "version": "0.1.31",
-                  "dev": true,
                   "dependencies": {
                     "amdefine": {
-                      "version": "0.1.0",
-                      "dev": true
+                      "version": "0.1.0"
                     }
                   }
                 }
@@ -4692,1119 +3683,892 @@
           }
         },
         "resolve": {
-          "version": "0.2.3",
-          "dev": true
+          "version": "0.2.3"
         },
         "uglify-js": {
-          "version": "1.2.6",
-          "dev": true
+          "version": "1.2.6"
         },
         "walkdir": {
-          "version": "0.0.5",
-          "dev": true
+          "version": "0.0.5"
         }
       }
     },
     "magic-string": {
-      "version": "0.16.0",
-      "dev": true
+      "version": "0.16.0"
     },
     "map-obj": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "map-stream": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "marked": {
-      "version": "0.3.6",
-      "dev": true
+      "version": "0.3.6"
     },
     "match-stream": {
       "version": "0.0.2",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "1.0.33",
-          "dev": true
+          "version": "1.0.33"
         }
       }
     },
     "media-typer": {
-      "version": "0.3.0",
-      "dev": true
+      "version": "0.3.0"
     },
     "memoizeasync": {
       "version": "0.8.0",
-      "dev": true,
       "dependencies": {
         "lru-cache": {
-          "version": "2.5.0",
-          "dev": true
+          "version": "2.5.0"
         },
         "passerror": {
-          "version": "0.0.2",
-          "dev": true
+          "version": "0.0.2"
         }
       }
     },
     "memoizee": {
-      "version": "0.3.10",
-      "dev": true
+      "version": "0.3.10"
     },
     "memory-fs": {
       "version": "0.3.0",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "2.0.5",
-          "dev": true
+          "version": "2.0.5"
         }
       }
     },
     "meow": {
-      "version": "3.6.0",
-      "dev": true
+      "version": "3.6.0"
     },
     "method-override": {
-      "version": "2.3.5",
-      "dev": true
+      "version": "2.3.5"
     },
     "methods": {
-      "version": "1.1.1",
-      "dev": true
+      "version": "1.1.1"
     },
     "micromatch": {
-      "version": "2.3.7",
-      "dev": true
+      "version": "2.3.7"
     },
     "mime": {
-      "version": "1.3.4",
-      "dev": true
+      "version": "1.3.4"
     },
     "mime-db": {
-      "version": "1.12.0",
-      "dev": true
+      "version": "1.12.0"
     },
     "mime-types": {
-      "version": "2.0.14",
-      "dev": true
+      "version": "2.0.14"
     },
     "minimatch": {
-      "version": "3.0.3",
-      "dev": true
+      "version": "3.0.3"
     },
     "minimist": {
-      "version": "1.2.0",
-      "dev": true
+      "version": "1.2.0"
     },
     "mkdirp": {
       "version": "0.5.1",
-      "dev": true,
       "dependencies": {
         "minimist": {
-          "version": "0.0.8",
-          "dev": true
+          "version": "0.0.8"
         }
       }
     },
     "mkdirp-promise": {
-      "version": "5.0.1",
-      "dev": true
+      "version": "5.0.1"
     },
     "modify-values": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "morgan": {
-      "version": "1.6.1",
-      "dev": true
+      "version": "1.6.1"
     },
     "mozilla-toolkit-versioning": {
-      "version": "0.0.2",
-      "dev": true
+      "version": "0.0.2"
     },
     "mozilla-version-comparator": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "ms": {
-      "version": "0.7.1",
-      "dev": true
+      "version": "0.7.1"
     },
     "multiparty": {
-      "version": "3.3.2",
-      "dev": true
+      "version": "3.3.2"
     },
     "multipipe": {
-      "version": "0.1.2",
-      "dev": true
+      "version": "0.1.2"
     },
     "mute-stream": {
-      "version": "0.0.5",
-      "dev": true
+      "version": "0.0.5"
     },
     "nan": {
       "version": "2.4.0"
     },
     "negotiator": {
-      "version": "0.5.3",
-      "dev": true
+      "version": "0.5.3"
     },
     "next-tick": {
-      "version": "0.2.2",
-      "dev": true
+      "version": "0.2.2"
     },
     "no-case": {
-      "version": "2.3.1",
-      "dev": true
+      "version": "2.3.1"
     },
     "node-emoji": {
-      "version": "1.5.1",
-      "dev": true
+      "version": "1.5.1"
     },
     "node-gyp": {
       "version": "3.5.0",
-      "dev": true,
       "dependencies": {
         "fstream": {
-          "version": "1.0.10",
-          "dev": true
+          "version": "1.0.10"
         },
         "glob": {
-          "version": "7.1.1",
-          "dev": true
+          "version": "7.1.1"
         },
         "graceful-fs": {
-          "version": "4.1.11",
-          "dev": true
+          "version": "4.1.11"
         }
       }
     },
     "node-html-encoder": {
-      "version": "0.0.2",
-      "dev": true
+      "version": "0.0.2"
     },
     "node-int64": {
-      "version": "0.3.3",
-      "dev": true
+      "version": "0.3.3"
     },
     "node-libs-browser": {
-      "version": "0.6.0",
-      "dev": true
+      "version": "0.6.0"
     },
     "node-source-walk": {
-      "version": "1.4.2",
-      "dev": true
+      "version": "1.4.2"
     },
     "node-status-codes": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "node-uuid": {
-      "version": "1.4.7",
-      "dev": true
+      "version": "1.4.7"
     },
     "node-watch": {
-      "version": "0.3.4",
-      "dev": true
+      "version": "0.3.4"
     },
     "nomnom": {
       "version": "1.8.1",
-      "dev": true,
       "dependencies": {
         "ansi-styles": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "chalk": {
-          "version": "0.4.0",
-          "dev": true
+          "version": "0.4.0"
         },
         "strip-ansi": {
-          "version": "0.1.1",
-          "dev": true
+          "version": "0.1.1"
         },
         "underscore": {
-          "version": "1.6.0",
-          "dev": true
+          "version": "1.6.0"
         }
       }
     },
     "nopt": {
-      "version": "3.0.6",
-      "dev": true
+      "version": "3.0.6"
     },
     "normalize-package-data": {
-      "version": "2.3.5",
-      "dev": true
+      "version": "2.3.5"
     },
     "normalize-path": {
-      "version": "2.0.1",
-      "dev": true
+      "version": "2.0.1"
     },
     "npmlog": {
-      "version": "4.0.2",
-      "dev": true
+      "version": "4.0.2"
     },
     "null-check": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "number-is-nan": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "nunjucks": {
       "version": "2.5.2",
-      "dev": true,
       "dependencies": {
         "async-each": {
-          "version": "1.0.1",
-          "dev": true
+          "version": "1.0.1"
         },
         "chokidar": {
-          "version": "1.6.1",
-          "dev": true
+          "version": "1.6.1"
         },
         "yargs": {
-          "version": "3.32.0",
-          "dev": true
+          "version": "3.32.0"
         }
       }
     },
     "oauth-sign": {
-      "version": "0.8.2",
-      "dev": true
+      "version": "0.8.2"
     },
     "object-assign": {
-      "version": "4.0.1",
-      "dev": true
+      "version": "4.0.1"
     },
     "object-component": {
-      "version": "0.0.3",
-      "dev": true
+      "version": "0.0.3"
     },
     "object-path": {
-      "version": "0.11.3",
-      "dev": true
+      "version": "0.11.3"
     },
     "object.omit": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "on-finished": {
-      "version": "2.3.0",
-      "dev": true
+      "version": "2.3.0"
     },
     "on-headers": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "once": {
-      "version": "1.3.3",
-      "dev": true
+      "version": "1.3.3"
     },
     "onetime": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "optimist": {
       "version": "0.6.1",
-      "dev": true,
       "dependencies": {
         "minimist": {
-          "version": "0.0.10",
-          "dev": true
+          "version": "0.0.10"
         }
       }
     },
     "options": {
-      "version": "0.0.6",
-      "dev": true
+      "version": "0.0.6"
+    },
+    "optjs": {
+      "version": "3.2.2"
     },
     "orchestrator": {
       "version": "0.3.7",
-      "dev": true,
       "dependencies": {
         "end-of-stream": {
-          "version": "0.1.5",
-          "dev": true
+          "version": "0.1.5"
         }
       }
     },
     "ordered-read-streams": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "os-browserify": {
-      "version": "0.1.2",
-      "dev": true
+      "version": "0.1.2"
     },
     "os-homedir": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "os-locale": {
-      "version": "1.4.0",
-      "dev": true
+      "version": "1.4.0"
     },
     "os-shim": {
-      "version": "0.1.3",
-      "dev": true
+      "version": "0.1.3"
     },
     "os-tmpdir": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "osenv": {
-      "version": "0.1.3",
-      "dev": true
+      "version": "0.1.3"
     },
     "over": {
-      "version": "0.0.5",
-      "dev": true
+      "version": "0.0.5"
     },
     "package-json": {
-      "version": "2.4.0",
-      "dev": true
+      "version": "2.4.0"
     },
     "pako": {
-      "version": "0.2.8",
-      "dev": true
+      "version": "0.2.8"
     },
     "param-case": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "parse-github-repo-url": {
-      "version": "1.3.0",
-      "dev": true
+      "version": "1.3.0"
     },
     "parse-glob": {
-      "version": "3.0.4",
-      "dev": true
+      "version": "3.0.4"
     },
     "parse-json": {
-      "version": "2.2.0",
-      "dev": true
+      "version": "2.2.0"
     },
     "parse5": {
       "version": "3.0.1",
-      "dev": true,
       "dependencies": {
         "@types/node": {
-          "version": "6.0.63",
-          "dev": true
+          "version": "6.0.63"
         }
       }
     },
     "parsejson": {
-      "version": "0.0.1",
-      "dev": true
+      "version": "0.0.1"
     },
     "parseqs": {
-      "version": "0.0.2",
-      "dev": true
+      "version": "0.0.2"
     },
     "parseuri": {
-      "version": "0.0.4",
-      "dev": true
+      "version": "0.0.4"
     },
     "parseurl": {
-      "version": "1.3.0",
-      "dev": true
+      "version": "1.3.0"
     },
     "pascal-case": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "passerror": {
-      "version": "0.0.1",
-      "dev": true
+      "version": "0.0.1"
     },
     "path-browserify": {
-      "version": "0.0.0",
-      "dev": true
+      "version": "0.0.0"
     },
     "path-case": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "path-exists": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "path-is-absolute": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "path-is-inside": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "path-type": {
       "version": "1.1.0",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
-          "version": "4.1.2",
-          "dev": true
+          "version": "4.1.2"
         }
       }
     },
     "pause": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "pause-stream": {
-      "version": "0.0.11",
-      "dev": true
+      "version": "0.0.11"
     },
     "pbkdf2-compat": {
-      "version": "2.0.1",
-      "dev": true
+      "version": "2.0.1"
     },
     "pegjs": {
-      "version": "0.9.0",
-      "dev": true
+      "version": "0.9.0"
+    },
+    "performance-now": {
+      "version": "0.2.0"
     },
     "pify": {
-      "version": "2.3.0",
-      "dev": true
+      "version": "2.3.0"
     },
     "pinkie": {
-      "version": "2.0.1",
-      "dev": true
+      "version": "2.0.1"
     },
     "pinkie-promise": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "pkginfo": {
-      "version": "0.3.1",
-      "dev": true
+      "version": "0.3.1"
     },
     "prepend-http": {
-      "version": "1.0.4",
-      "dev": true
+      "version": "1.0.4"
     },
     "preserve": {
-      "version": "0.2.0",
-      "dev": true
+      "version": "0.2.0"
     },
     "pretty-hrtime": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "process": {
-      "version": "0.11.9",
-      "dev": true
+      "version": "0.11.9"
     },
     "process-nextick-args": {
-      "version": "1.0.6",
-      "dev": true
+      "version": "1.0.6"
     },
     "promise": {
-      "version": "7.1.1",
-      "dev": true
+      "version": "7.1.1"
     },
     "promzard": {
-      "version": "0.3.0",
-      "dev": true
+      "version": "0.3.0"
     },
     "proper-lockfile": {
       "version": "2.0.0",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
-          "version": "4.1.11",
-          "dev": true
+          "version": "4.1.11"
+        }
+      }
+    },
+    "protobufjs": {
+      "version": "5.0.0",
+      "dependencies": {
+        "glob": {
+          "version": "5.0.15"
         }
       }
     },
     "protractor": {
-      "version": "4.0.11",
-      "dev": true,
+      "version": "4.0.14",
       "dependencies": {
         "@types/jasmine": {
-          "version": "2.5.37",
-          "dev": true
+          "version": "2.5.47"
         },
         "@types/node": {
-          "version": "6.0.46",
-          "dev": true
+          "version": "6.0.68"
+        },
+        "@types/selenium-webdriver": {
+          "version": "2.53.37"
+        },
+        "caseless": {
+          "version": "0.12.0"
         },
         "glob": {
-          "version": "7.1.1",
-          "dev": true
+          "version": "7.1.1"
+        },
+        "har-validator": {
+          "version": "4.2.1"
         },
         "mime-db": {
-          "version": "1.24.0",
-          "dev": true
+          "version": "1.27.0"
         },
         "mime-types": {
-          "version": "2.1.12",
-          "dev": true
+          "version": "2.1.15"
         },
         "qs": {
-          "version": "6.3.0",
-          "dev": true
+          "version": "6.4.0"
         },
         "request": {
-          "version": "2.78.0",
-          "dev": true
+          "version": "2.81.0"
         },
         "rimraf": {
-          "version": "2.5.4",
-          "dev": true
+          "version": "2.6.1"
         },
         "saucelabs": {
-          "version": "1.3.0",
-          "dev": true
+          "version": "1.3.0"
         },
         "semver": {
-          "version": "5.3.0",
-          "dev": true
+          "version": "5.3.0"
         },
         "tough-cookie": {
-          "version": "2.3.2",
-          "dev": true
+          "version": "2.3.2"
+        },
+        "tunnel-agent": {
+          "version": "0.6.0"
+        },
+        "uuid": {
+          "version": "3.0.1"
         },
         "webdriver-manager": {
-          "version": "10.2.8",
-          "dev": true
+          "version": "10.3.0"
         }
       }
     },
     "prr": {
-      "version": "0.0.0",
-      "dev": true
+      "version": "0.0.0"
     },
     "pullstream": {
       "version": "0.4.1",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "1.0.33",
-          "dev": true
+          "version": "1.0.33"
         }
       }
     },
     "punycode": {
-      "version": "1.4.1",
-      "dev": true
+      "version": "1.4.1"
     },
     "q": {
-      "version": "1.4.1",
-      "dev": true
+      "version": "1.4.1"
     },
     "qs": {
-      "version": "4.0.0",
-      "dev": true
+      "version": "4.0.0"
     },
     "querystring": {
-      "version": "0.2.0",
-      "dev": true
+      "version": "0.2.0"
     },
     "querystring-es3": {
-      "version": "0.2.1",
-      "dev": true
+      "version": "0.2.1"
     },
     "randomatic": {
-      "version": "1.1.5",
-      "dev": true
+      "version": "1.1.5"
     },
     "range-parser": {
-      "version": "1.0.3",
-      "dev": true
+      "version": "1.0.3"
     },
     "raw-body": {
       "version": "2.1.5",
-      "dev": true,
       "dependencies": {
         "bytes": {
-          "version": "2.2.0",
-          "dev": true
+          "version": "2.2.0"
         },
         "iconv-lite": {
-          "version": "0.4.13",
-          "dev": true
+          "version": "0.4.13"
         }
       }
     },
     "rc": {
-      "version": "1.1.6",
-      "dev": true
+      "version": "1.1.6"
     },
     "react": {
-      "version": "0.14.5",
-      "dev": true
+      "version": "0.14.5"
     },
     "read": {
-      "version": "1.0.5",
-      "dev": true
+      "version": "1.0.5"
     },
     "read-all-stream": {
       "version": "3.1.0",
-      "dev": true,
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "readable-stream": {
-          "version": "2.2.2",
-          "dev": true
+          "version": "2.2.2"
         }
       }
     },
     "read-pkg": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "read-pkg-up": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "readable-stream": {
-      "version": "1.1.13",
-      "dev": true
+      "version": "1.1.13"
     },
     "readdirp": {
       "version": "2.0.0",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
-          "version": "4.1.2",
-          "dev": true
+          "version": "4.1.2"
         },
         "minimatch": {
-          "version": "2.0.10",
-          "dev": true
+          "version": "2.0.10"
         },
         "readable-stream": {
-          "version": "2.0.5",
-          "dev": true
+          "version": "2.0.5"
         }
       }
     },
     "rechoir": {
-      "version": "0.6.2",
-      "dev": true
+      "version": "0.6.2"
     },
     "redent": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "reflect-metadata": {
       "version": "0.1.3"
     },
     "regenerator-runtime": {
-      "version": "0.10.1",
-      "dev": true
+      "version": "0.10.1"
     },
     "regex-cache": {
-      "version": "0.4.2",
-      "dev": true
+      "version": "0.4.2"
     },
     "registry-auth-token": {
-      "version": "3.1.0",
-      "dev": true
+      "version": "3.1.0"
     },
     "registry-url": {
-      "version": "3.1.0",
-      "dev": true
+      "version": "3.1.0"
     },
     "repeat-element": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
     },
     "repeat-string": {
-      "version": "1.5.2",
-      "dev": true
+      "version": "1.5.2"
     },
     "repeating": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "replace-ext": {
-      "version": "0.0.1",
-      "dev": true
+      "version": "0.0.1"
     },
     "request": {
       "version": "2.51.0",
-      "dev": true,
       "dependencies": {
         "asn1": {
-          "version": "0.1.11",
-          "dev": true
+          "version": "0.1.11"
         },
         "async": {
-          "version": "0.9.2",
-          "dev": true
+          "version": "0.9.2"
         },
         "aws-sign2": {
-          "version": "0.5.0",
-          "dev": true
+          "version": "0.5.0"
         },
         "boom": {
-          "version": "0.4.2",
-          "dev": true
+          "version": "0.4.2"
         },
         "caseless": {
-          "version": "0.8.0",
-          "dev": true
+          "version": "0.8.0"
         },
         "combined-stream": {
-          "version": "0.0.7",
-          "dev": true
+          "version": "0.0.7"
         },
         "cryptiles": {
-          "version": "0.2.2",
-          "dev": true
+          "version": "0.2.2"
         },
         "delayed-stream": {
-          "version": "0.0.5",
-          "dev": true
+          "version": "0.0.5"
         },
         "forever-agent": {
-          "version": "0.5.2",
-          "dev": true
+          "version": "0.5.2"
         },
         "form-data": {
           "version": "0.2.0",
-          "dev": true,
           "dependencies": {
             "mime-types": {
-              "version": "2.0.14",
-              "dev": true
+              "version": "2.0.14"
             }
           }
         },
         "hawk": {
-          "version": "1.1.1",
-          "dev": true
+          "version": "1.1.1"
         },
         "hoek": {
-          "version": "0.9.1",
-          "dev": true
+          "version": "0.9.1"
         },
         "http-signature": {
-          "version": "0.10.1",
-          "dev": true
+          "version": "0.10.1"
         },
         "mime-types": {
-          "version": "1.0.2",
-          "dev": true
+          "version": "1.0.2"
         },
         "oauth-sign": {
-          "version": "0.5.0",
-          "dev": true
+          "version": "0.5.0"
         },
         "qs": {
-          "version": "2.3.3",
-          "dev": true
+          "version": "2.3.3"
         },
         "sntp": {
-          "version": "0.2.4",
-          "dev": true
+          "version": "0.2.4"
         }
       }
     },
     "request-capture-har": {
-      "version": "1.1.4",
-      "dev": true
+      "version": "1.1.4"
     },
     "requires-port": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "resolve": {
-      "version": "1.1.6",
-      "dev": true
+      "version": "1.1.6"
     },
     "response-time": {
-      "version": "2.3.1",
-      "dev": true
+      "version": "2.3.1"
     },
     "restore-cursor": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "retry": {
-      "version": "0.10.1",
-      "dev": true
+      "version": "0.10.1"
     },
     "rewire": {
-      "version": "2.5.1",
-      "dev": true
+      "version": "2.5.1"
     },
     "rho": {
-      "version": "0.3.0",
-      "dev": true
+      "version": "0.3.0"
     },
     "right-align": {
-      "version": "0.1.3",
-      "dev": true
+      "version": "0.1.3"
     },
     "rimraf": {
       "version": "2.5.0",
-      "dev": true,
       "dependencies": {
         "glob": {
-          "version": "6.0.3",
-          "dev": true
+          "version": "6.0.3"
         }
       }
     },
     "ripemd160": {
-      "version": "0.2.0",
-      "dev": true
+      "version": "0.2.0"
     },
     "rndm": {
-      "version": "1.1.1",
-      "dev": true
+      "version": "1.1.1"
     },
     "roadrunner": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "rollup": {
-      "version": "0.41.6",
-      "dev": true
+      "version": "0.41.6"
     },
     "rollup-plugin-commonjs": {
       "version": "5.0.5",
-      "dev": true,
       "dependencies": {
         "acorn": {
-          "version": "4.0.3",
-          "dev": true
+          "version": "4.0.3"
         },
         "resolve": {
-          "version": "1.1.7",
-          "dev": true
+          "version": "1.1.7"
         }
       }
     },
+    "rollup-plugin-node-resolve": {
+      "version": "3.0.0"
+    },
     "rollup-pluginutils": {
-      "version": "1.5.2",
-      "dev": true
+      "version": "1.5.2"
     },
     "run-async": {
-      "version": "2.3.0",
-      "dev": true
+      "version": "2.3.0"
     },
     "rx": {
-      "version": "4.1.0",
-      "dev": true
+      "version": "4.1.0"
     },
     "rxjs": {
       "version": "5.0.1"
     },
+    "safe-buffer": {
+      "version": "5.0.1"
+    },
     "sander": {
       "version": "0.5.1",
-      "dev": true,
       "dependencies": {
         "glob": {
-          "version": "7.1.1",
-          "dev": true
+          "version": "7.1.1"
         },
         "graceful-fs": {
-          "version": "4.1.11",
-          "dev": true
+          "version": "4.1.11"
         },
         "rimraf": {
-          "version": "2.6.1",
-          "dev": true
+          "version": "2.6.1"
         }
       }
     },
     "sauce-connect-launcher": {
       "version": "0.13.0",
-      "dev": true,
       "dependencies": {
         "async": {
-          "version": "1.4.0",
-          "dev": true
+          "version": "1.4.0"
         },
         "glob": {
-          "version": "5.0.15",
-          "dev": true
+          "version": "5.0.15"
         },
         "lodash": {
-          "version": "3.10.1",
-          "dev": true
+          "version": "3.10.1"
         },
         "rimraf": {
-          "version": "2.4.3",
-          "dev": true
+          "version": "2.4.3"
         }
       }
     },
     "saucelabs": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "sax": {
-      "version": "1.1.4",
-      "dev": true
+      "version": "1.1.4"
     },
     "scmp": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "selenium-webdriver": {
       "version": "2.53.3",
-      "dev": true,
       "dependencies": {
         "adm-zip": {
-          "version": "0.4.4",
-          "dev": true
+          "version": "0.4.4"
         },
         "sax": {
-          "version": "0.6.1",
-          "dev": true
+          "version": "0.6.1"
         },
         "tmp": {
-          "version": "0.0.24",
-          "dev": true
+          "version": "0.0.24"
         },
         "xml2js": {
-          "version": "0.4.4",
-          "dev": true
+          "version": "0.4.4"
         }
       }
     },
     "semver": {
-      "version": "5.1.0",
-      "dev": true
+      "version": "5.1.0"
     },
     "semver-diff": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "semver-utils": {
-      "version": "1.1.1",
-      "dev": true
+      "version": "1.1.1"
     },
     "send": {
-      "version": "0.13.0",
-      "dev": true
+      "version": "0.13.0"
     },
     "sentence-case": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "seq": {
       "version": "0.3.5",
-      "dev": true,
       "dependencies": {
         "chainsaw": {
-          "version": "0.0.9",
-          "dev": true
+          "version": "0.0.9"
         }
       }
     },
     "sequencify": {
-      "version": "0.0.7",
-      "dev": true
+      "version": "0.0.7"
     },
     "serve-favicon": {
-      "version": "2.3.0",
-      "dev": true
+      "version": "2.3.0"
     },
     "serve-index": {
       "version": "1.7.2",
-      "dev": true,
       "dependencies": {
         "mime-db": {
-          "version": "1.20.0",
-          "dev": true
+          "version": "1.20.0"
         },
         "mime-types": {
-          "version": "2.1.8",
-          "dev": true
+          "version": "2.1.8"
         }
       }
     },
     "serve-static": {
-      "version": "1.10.0",
-      "dev": true
+      "version": "1.10.0"
     },
     "set-blocking": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "setimmediate": {
-      "version": "1.0.4",
-      "dev": true
+      "version": "1.0.4"
     },
     "sha.js": {
-      "version": "2.2.6",
-      "dev": true
+      "version": "2.2.6"
     },
     "shelljs": {
       "version": "0.7.6",
-      "dev": true,
       "dependencies": {
         "glob": {
-          "version": "7.1.1",
-          "dev": true
+          "version": "7.1.1"
         },
         "interpret": {
-          "version": "1.0.1",
-          "dev": true
+          "version": "1.0.1"
         }
       }
     },
     "sigmund": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "signal-exit": {
-      "version": "2.1.2",
-      "dev": true
+      "version": "2.1.2"
     },
     "slice-stream": {
       "version": "1.0.0",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "1.0.33",
-          "dev": true
+          "version": "1.0.33"
         }
       }
     },
     "slide": {
-      "version": "1.1.6",
-      "dev": true
+      "version": "1.1.6"
     },
     "snake-case": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "sntp": {
-      "version": "1.0.9",
-      "dev": true
+      "version": "1.0.9"
     },
     "socket.io": {
-      "version": "1.4.6",
-      "dev": true
+      "version": "1.4.6"
     },
     "socket.io-adapter": {
       "version": "0.4.0",
-      "dev": true,
       "dependencies": {
         "socket.io-parser": {
           "version": "2.2.2",
-          "dev": true,
           "dependencies": {
             "debug": {
-              "version": "0.7.4",
-              "dev": true
+              "version": "0.7.4"
             }
           }
         }
@@ -5812,1025 +4576,784 @@
     },
     "socket.io-client": {
       "version": "1.4.6",
-      "dev": true,
       "dependencies": {
         "component-emitter": {
-          "version": "1.2.0",
-          "dev": true
+          "version": "1.2.0"
         }
       }
     },
     "socket.io-parser": {
       "version": "2.2.6",
-      "dev": true,
       "dependencies": {
         "json3": {
-          "version": "3.3.2",
-          "dev": true
+          "version": "3.3.2"
         }
       }
     },
     "sorcery": {
-      "version": "0.10.0",
-      "dev": true
+      "version": "0.10.0"
     },
     "source-list-map": {
-      "version": "0.1.5",
-      "dev": true
+      "version": "0.1.5"
     },
     "source-map": {
-      "version": "0.5.6",
-      "dev": true
+      "version": "0.5.6"
     },
     "source-map-support": {
       "version": "0.4.2",
-      "dev": true,
       "dependencies": {
         "source-map": {
           "version": "0.1.32",
-          "dev": true,
           "dependencies": {
             "amdefine": {
-              "version": "1.0.1",
-              "dev": true
+              "version": "1.0.1"
             }
           }
         }
       }
     },
     "sourcemap-codec": {
-      "version": "1.3.0",
-      "dev": true
+      "version": "1.3.0"
     },
     "sparkles": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "spawn-sync": {
-      "version": "1.0.15",
-      "dev": true
+      "version": "1.0.15"
     },
     "spdx-correct": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "spdx-exceptions": {
-      "version": "1.0.4",
-      "dev": true
+      "version": "1.0.4"
     },
     "spdx-expression-parse": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "spdx-license-ids": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "spdx-license-list": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "split": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "split2": {
       "version": "2.1.0",
-      "dev": true,
       "dependencies": {
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "readable-stream": {
-          "version": "2.0.6",
-          "dev": true
+          "version": "2.0.6"
         },
         "through2": {
-          "version": "2.0.1",
-          "dev": true
+          "version": "2.0.1"
         }
       }
     },
     "sprintf-js": {
-      "version": "1.0.3",
-      "dev": true
+      "version": "1.0.3"
     },
     "sshpk": {
       "version": "1.10.1",
-      "dev": true,
       "dependencies": {
         "assert-plus": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         }
       }
     },
     "stack-trace": {
-      "version": "0.0.9",
-      "dev": true
+      "version": "0.0.9"
     },
     "statuses": {
-      "version": "1.2.1",
-      "dev": true
+      "version": "1.2.1"
     },
     "stream-browserify": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "stream-combiner": {
-      "version": "0.0.4",
-      "dev": true
+      "version": "0.0.4"
     },
     "stream-consume": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "stream-counter": {
-      "version": "0.2.0",
-      "dev": true
+      "version": "0.2.0"
     },
     "stream-equal": {
-      "version": "0.1.6",
-      "dev": true
+      "version": "0.1.6"
     },
     "string_decoder": {
-      "version": "0.10.31",
-      "dev": true
+      "version": "0.10.31"
     },
     "string-width": {
       "version": "1.0.1",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "strip-ansi": {
-          "version": "3.0.0",
-          "dev": true
+          "version": "3.0.0"
         }
       }
     },
     "string.prototype.codepointat": {
-      "version": "0.2.0",
-      "dev": true
+      "version": "0.2.0"
     },
     "stringmap": {
-      "version": "0.2.2",
-      "dev": true
+      "version": "0.2.2"
     },
     "stringstream": {
-      "version": "0.0.5",
-      "dev": true
+      "version": "0.0.5"
     },
     "strip-ansi": {
-      "version": "3.0.1",
-      "dev": true
+      "version": "3.0.1"
     },
     "strip-bom": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "strip-indent": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "strip-json-comments": {
-      "version": "1.0.4",
-      "dev": true
+      "version": "1.0.4"
     },
     "success-symbol": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "supports-color": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "swap-case": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
     },
     "symbol-observable": {
       "version": "1.0.4"
     },
     "systemjs": {
-      "version": "0.18.10",
-      "dev": true
+      "version": "0.18.10"
     },
     "tapable": {
-      "version": "0.1.10",
-      "dev": true
+      "version": "0.1.10"
     },
     "tar": {
       "version": "2.2.1",
-      "dev": true,
       "dependencies": {
         "fstream": {
-          "version": "1.0.10",
-          "dev": true
+          "version": "1.0.10"
         },
         "graceful-fs": {
-          "version": "4.1.11",
-          "dev": true
+          "version": "4.1.11"
         }
       }
     },
     "tar-stream": {
       "version": "1.1.5",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "1.0.33",
-          "dev": true
+          "version": "1.0.33"
         }
       }
     },
     "text-extensions": {
-      "version": "1.3.3",
-      "dev": true
+      "version": "1.3.3"
     },
     "through": {
-      "version": "2.3.8",
-      "dev": true
+      "version": "2.3.8"
     },
     "through2": {
       "version": "0.6.5",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "1.0.34",
-          "dev": true
+          "version": "1.0.34"
         }
       }
     },
     "tildify": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
     },
     "timed-out": {
-      "version": "3.0.0",
-      "dev": true
+      "version": "3.0.0"
     },
     "timers-browserify": {
-      "version": "1.4.2",
-      "dev": true
+      "version": "1.4.2"
     },
     "timers-ext": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "tiny-lr": {
       "version": "0.2.1",
-      "dev": true,
       "dependencies": {
         "body-parser": {
           "version": "1.14.2",
-          "dev": true,
           "dependencies": {
             "qs": {
-              "version": "5.2.0",
-              "dev": true
+              "version": "5.2.0"
             }
           }
         },
         "bytes": {
-          "version": "2.2.0",
-          "dev": true
+          "version": "2.2.0"
         },
         "depd": {
-          "version": "1.1.0",
-          "dev": true
+          "version": "1.1.0"
         },
         "iconv-lite": {
-          "version": "0.4.13",
-          "dev": true
+          "version": "0.4.13"
         },
         "qs": {
-          "version": "5.1.0",
-          "dev": true
+          "version": "5.1.0"
         }
       }
     },
     "title-case": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "tmp": {
-      "version": "0.0.25",
-      "dev": true
+      "version": "0.0.25"
     },
     "to-array": {
-      "version": "0.1.4",
-      "dev": true
+      "version": "0.1.4"
     },
     "tough-cookie": {
-      "version": "2.2.1",
-      "dev": true
+      "version": "2.2.1"
     },
     "traverse": {
-      "version": "0.3.9",
-      "dev": true
+      "version": "0.3.9"
     },
     "trim-newlines": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "trim-off-newlines": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "ts-api-guardian": {
-      "version": "0.2.1",
-      "dev": true,
+      "version": "0.2.2",
       "dependencies": {
         "diff": {
-          "version": "2.2.3",
-          "dev": true
+          "version": "2.2.3"
         },
         "typescript": {
-          "version": "2.0.10",
-          "dev": true
+          "version": "2.0.10"
         }
       }
     },
     "tsickle": {
-      "version": "0.21.6",
-      "dev": true
+      "version": "0.23.4"
+    },
+    "tslib": {
+      "version": "1.7.1"
     },
     "tslint": {
       "version": "4.1.1",
-      "dev": true,
       "dependencies": {
         "diff": {
-          "version": "3.1.0",
-          "dev": true
+          "version": "3.1.0"
         },
         "glob": {
-          "version": "7.1.1",
-          "dev": true
+          "version": "7.1.1"
         },
         "resolve": {
-          "version": "1.2.0",
-          "dev": true
+          "version": "1.2.0"
         }
       }
     },
     "tslint-eslint-rules": {
       "version": "3.1.0",
-      "dev": true,
       "dependencies": {
         "diff": {
-          "version": "3.1.0",
-          "dev": true
+          "version": "3.1.0"
         },
         "glob": {
-          "version": "7.1.1",
-          "dev": true
+          "version": "7.1.1"
         },
         "resolve": {
-          "version": "1.1.7",
-          "dev": true
+          "version": "1.1.7"
         },
         "tslint": {
-          "version": "4.0.2",
-          "dev": true
+          "version": "4.0.2"
         }
       }
     },
     "tty-browserify": {
-      "version": "0.0.0",
-      "dev": true
+      "version": "0.0.0"
     },
     "tunnel-agent": {
-      "version": "0.4.2",
-      "dev": true
+      "version": "0.4.2"
     },
     "tweetnacl": {
-      "version": "0.14.3",
-      "dev": true,
-      "optional": true
+      "version": "0.14.3"
     },
     "type-is": {
       "version": "1.6.10",
-      "dev": true,
       "dependencies": {
         "mime-db": {
-          "version": "1.20.0",
-          "dev": true
+          "version": "1.20.0"
         },
         "mime-types": {
-          "version": "2.1.8",
-          "dev": true
+          "version": "2.1.8"
         }
       }
     },
     "typedarray": {
-      "version": "0.0.6",
-      "dev": true
+      "version": "0.0.6"
     },
     "typescript": {
-      "version": "2.1.5",
-      "dev": true
+      "version": "2.3.4"
     },
     "ua-parser-js": {
-      "version": "0.7.10",
-      "dev": true
+      "version": "0.7.10"
     },
     "uglify-js": {
       "version": "2.7.0",
-      "dev": true,
-      "optional": true,
       "dependencies": {
         "camelcase": {
-          "version": "1.2.1",
-          "dev": true,
-          "optional": true
+          "version": "1.2.1"
         },
         "cliui": {
-          "version": "2.1.0",
-          "dev": true,
-          "optional": true
+          "version": "2.1.0"
         },
         "source-map": {
-          "version": "0.5.6",
-          "dev": true,
-          "optional": true
+          "version": "0.5.6"
         },
         "window-size": {
-          "version": "0.1.0",
-          "dev": true,
-          "optional": true
+          "version": "0.1.0"
         },
         "wordwrap": {
-          "version": "0.0.2",
-          "dev": true,
-          "optional": true
+          "version": "0.0.2"
         },
         "yargs": {
-          "version": "3.10.0",
-          "dev": true,
-          "optional": true
+          "version": "3.10.0"
         }
       }
     },
     "uglify-to-browserify": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "uid-safe": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "ultron": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "underscore": {
-      "version": "1.8.3",
-      "dev": true
+      "version": "1.8.3"
     },
     "underscore-contrib": {
       "version": "0.3.0",
-      "dev": true,
       "dependencies": {
         "underscore": {
-          "version": "1.6.0",
-          "dev": true
+          "version": "1.6.0"
         }
       }
     },
     "underscore.string": {
-      "version": "3.3.4",
-      "dev": true
+      "version": "3.3.4"
     },
     "unicoderegexp": {
-      "version": "0.4.1",
-      "dev": true
+      "version": "0.4.1"
     },
     "unique-stream": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "universal-analytics": {
-      "version": "0.3.10",
-      "dev": true
+      "version": "0.3.10"
     },
     "unpipe": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "unzip": {
       "version": "0.1.11",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
-          "version": "1.0.33",
-          "dev": true
+          "version": "1.0.33"
         }
       }
     },
     "unzip-response": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "update-notifier": {
-      "version": "1.0.3",
-      "dev": true
+      "version": "1.0.3"
     },
     "upper-case": {
-      "version": "1.1.3",
-      "dev": true
+      "version": "1.1.3"
     },
     "upper-case-first": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
     },
     "url": {
       "version": "0.10.3",
-      "dev": true,
       "dependencies": {
         "punycode": {
-          "version": "1.3.2",
-          "dev": true
+          "version": "1.3.2"
         }
       }
     },
     "url-parse-lax": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "user-home": {
-      "version": "1.1.1",
-      "dev": true
+      "version": "1.1.1"
     },
     "useragent": {
       "version": "2.1.9",
-      "dev": true,
       "dependencies": {
         "lru-cache": {
-          "version": "2.2.4",
-          "dev": true
+          "version": "2.2.4"
         }
       }
     },
     "utf8": {
-      "version": "2.1.0",
-      "dev": true
+      "version": "2.1.0"
     },
     "util": {
-      "version": "0.10.3",
-      "dev": true
+      "version": "0.10.3"
     },
     "util-deprecate": {
-      "version": "1.0.2",
-      "dev": true
+      "version": "1.0.2"
     },
     "utils-merge": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "uuid": {
-      "version": "2.0.3",
-      "dev": true
+      "version": "2.0.3"
     },
     "v8flags": {
-      "version": "2.0.11",
-      "dev": true
+      "version": "2.0.11"
     },
     "validate-npm-package-license": {
-      "version": "3.0.1",
-      "dev": true
+      "version": "3.0.1"
     },
     "validate.js": {
-      "version": "0.9.0",
-      "dev": true
+      "version": "0.9.0"
     },
     "vargs": {
-      "version": "0.1.0",
-      "dev": true
+      "version": "0.1.0"
     },
     "vary": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "verror": {
-      "version": "1.3.6",
-      "dev": true
+      "version": "1.3.6"
     },
     "vhost": {
-      "version": "3.0.2",
-      "dev": true
+      "version": "3.0.2"
     },
     "vinyl-fs": {
       "version": "0.3.14",
-      "dev": true,
       "dependencies": {
         "clone": {
-          "version": "0.2.0",
-          "dev": true
+          "version": "0.2.0"
         },
         "strip-bom": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "vinyl": {
-          "version": "0.4.6",
-          "dev": true
+          "version": "0.4.6"
         }
       }
     },
     "vlq": {
-      "version": "0.2.1",
-      "dev": true
+      "version": "0.2.1"
     },
     "vm-browserify": {
-      "version": "0.0.4",
-      "dev": true
+      "version": "0.0.4"
     },
     "void-elements": {
-      "version": "2.0.1",
-      "dev": true
+      "version": "2.0.1"
     },
     "vrsource-tslint-rules": {
-      "version": "4.0.0",
-      "dev": true
+      "version": "4.0.0"
     },
     "watchpack": {
       "version": "0.2.9",
-      "dev": true,
       "dependencies": {
         "async": {
-          "version": "0.9.2",
-          "dev": true
+          "version": "0.9.2"
         },
         "graceful-fs": {
-          "version": "4.1.2",
-          "dev": true
+          "version": "4.1.2"
         }
       }
     },
     "wd": {
       "version": "0.3.12",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "ansi-styles": {
-          "version": "2.1.0",
-          "dev": true
+          "version": "2.1.0"
         },
         "asn1": {
-          "version": "0.1.11",
-          "dev": true
+          "version": "0.1.11"
         },
         "async": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "aws-sign2": {
-          "version": "0.5.0",
-          "dev": true
+          "version": "0.5.0"
         },
         "caseless": {
-          "version": "0.9.0",
-          "dev": true
+          "version": "0.9.0"
         },
         "chalk": {
-          "version": "1.1.1",
-          "dev": true
+          "version": "1.1.1"
         },
         "combined-stream": {
-          "version": "0.0.7",
-          "dev": true
+          "version": "0.0.7"
         },
         "delayed-stream": {
-          "version": "0.0.5",
-          "dev": true
+          "version": "0.0.5"
         },
         "form-data": {
           "version": "0.2.0",
-          "dev": true,
           "dependencies": {
             "async": {
-              "version": "0.9.2",
-              "dev": true
+              "version": "0.9.2"
             }
           }
         },
         "har-validator": {
-          "version": "1.8.0",
-          "dev": true
+          "version": "1.8.0"
         },
         "has-ansi": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "hawk": {
-          "version": "2.3.1",
-          "dev": true
+          "version": "2.3.1"
         },
         "http-signature": {
-          "version": "0.10.1",
-          "dev": true
+          "version": "0.10.1"
         },
         "lodash": {
-          "version": "3.9.3",
-          "dev": true
+          "version": "3.9.3"
         },
         "oauth-sign": {
-          "version": "0.6.0",
-          "dev": true
+          "version": "0.6.0"
         },
         "qs": {
-          "version": "2.4.2",
-          "dev": true
+          "version": "2.4.2"
         },
         "request": {
-          "version": "2.55.0",
-          "dev": true
+          "version": "2.55.0"
         },
         "strip-ansi": {
-          "version": "3.0.0",
-          "dev": true
+          "version": "3.0.0"
         },
         "supports-color": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "underscore.string": {
-          "version": "3.0.3",
-          "dev": true
+          "version": "3.0.3"
         }
       }
     },
     "webpack": {
       "version": "1.12.9",
-      "dev": true,
       "dependencies": {
         "async": {
-          "version": "1.5.0",
-          "dev": true
+          "version": "1.5.0"
         },
         "camelcase": {
-          "version": "1.2.1",
-          "dev": true
+          "version": "1.2.1"
         },
         "cliui": {
-          "version": "2.1.0",
-          "dev": true
+          "version": "2.1.0"
         },
         "source-map": {
-          "version": "0.5.3",
-          "dev": true
+          "version": "0.5.3"
         },
         "supports-color": {
-          "version": "3.1.2",
-          "dev": true
+          "version": "3.1.2"
         },
         "uglify-js": {
           "version": "2.6.1",
-          "dev": true,
           "dependencies": {
             "async": {
-              "version": "0.2.10",
-              "dev": true
+              "version": "0.2.10"
             }
           }
         },
         "window-size": {
-          "version": "0.1.0",
-          "dev": true
+          "version": "0.1.0"
         },
         "wordwrap": {
-          "version": "0.0.2",
-          "dev": true
+          "version": "0.0.2"
         },
         "yargs": {
-          "version": "3.10.0",
-          "dev": true
+          "version": "3.10.0"
         }
       }
     },
     "webpack-core": {
       "version": "0.6.8",
-      "dev": true,
       "dependencies": {
         "source-map": {
-          "version": "0.4.4",
-          "dev": true
+          "version": "0.4.4"
         }
       }
     },
     "websocket-driver": {
-      "version": "0.6.3",
-      "dev": true
+      "version": "0.6.3"
     },
     "websocket-extensions": {
-      "version": "0.1.1",
-      "dev": true
+      "version": "0.1.1"
     },
     "whatwg-fetch": {
-      "version": "0.9.0",
-      "dev": true
+      "version": "0.9.0"
     },
     "when": {
-      "version": "3.7.2",
-      "dev": true
+      "version": "3.7.2"
     },
     "which": {
-      "version": "1.2.10",
-      "dev": true
+      "version": "1.2.10"
     },
     "wide-align": {
-      "version": "1.1.0",
-      "dev": true
+      "version": "1.1.0"
     },
     "widest-line": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "window-size": {
-      "version": "0.1.4",
-      "dev": true
+      "version": "0.1.4"
     },
     "winreg": {
-      "version": "0.0.12",
-      "dev": true
+      "version": "0.0.12"
     },
     "winston": {
       "version": "2.3.1",
-      "dev": true,
       "dependencies": {
         "async": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "colors": {
-          "version": "1.0.3",
-          "dev": true
+          "version": "1.0.3"
         }
       }
     },
     "wordwrap": {
-      "version": "0.0.3",
-      "dev": true
+      "version": "0.0.3"
     },
     "wrap-ansi": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "wrappy": {
-      "version": "1.0.1",
-      "dev": true
+      "version": "1.0.1"
     },
     "wrench": {
-      "version": "1.5.8",
-      "dev": true
+      "version": "1.5.8"
     },
     "write-file-atomic": {
       "version": "1.2.0",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
-          "version": "4.1.11",
-          "dev": true
+          "version": "4.1.11"
         }
       }
     },
     "ws": {
-      "version": "1.1.1",
-      "dev": true
+      "version": "1.1.1"
     },
     "xdg-basedir": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "xhr2": {
-      "version": "0.1.4",
-      "dev": true
+      "version": "0.1.4"
     },
     "xml2js": {
-      "version": "0.4.15",
-      "dev": true
+      "version": "0.4.15"
     },
     "xmlbuilder": {
-      "version": "8.2.2",
-      "dev": true
+      "version": "8.2.2"
     },
     "xmldom": {
-      "version": "0.1.19",
-      "dev": true
+      "version": "0.1.19"
     },
     "xmlhttprequest-ssl": {
-      "version": "1.5.1",
-      "dev": true
+      "version": "1.5.1"
     },
     "xpath": {
-      "version": "0.0.7",
-      "dev": true
+      "version": "0.0.7"
     },
     "xtend": {
-      "version": "4.0.1",
-      "dev": true
+      "version": "4.0.1"
     },
     "y18n": {
-      "version": "3.2.0",
-      "dev": true
+      "version": "3.2.0"
     },
     "yargs": {
-      "version": "3.31.0",
-      "dev": true
+      "version": "3.31.0"
     },
     "yarn": {
       "version": "0.19.1",
-      "dev": true,
       "dependencies": {
         "bl": {
-          "version": "1.2.0",
-          "dev": true
+          "version": "1.2.0"
         },
         "bytes": {
-          "version": "2.4.0",
-          "dev": true
+          "version": "2.4.0"
         },
         "camelcase": {
-          "version": "3.0.0",
-          "dev": true
+          "version": "3.0.0"
         },
         "isarray": {
-          "version": "1.0.0",
-          "dev": true
+          "version": "1.0.0"
         },
         "mime-db": {
-          "version": "1.26.0",
-          "dev": true
+          "version": "1.26.0"
         },
         "mime-types": {
-          "version": "2.1.14",
-          "dev": true
+          "version": "2.1.14"
         },
         "qs": {
-          "version": "6.3.0",
-          "dev": true
+          "version": "6.3.0"
         },
         "read": {
-          "version": "1.0.7",
-          "dev": true
+          "version": "1.0.7"
         },
         "readable-stream": {
-          "version": "2.2.2",
-          "dev": true
+          "version": "2.2.2"
         },
         "request": {
-          "version": "2.79.0",
-          "dev": true
+          "version": "2.79.0"
         },
         "tar-stream": {
-          "version": "1.5.2",
-          "dev": true
+          "version": "1.5.2"
         },
         "tough-cookie": {
-          "version": "2.3.2",
-          "dev": true
+          "version": "2.3.2"
         },
         "user-home": {
-          "version": "2.0.0",
-          "dev": true
+          "version": "2.0.0"
         },
         "uuid": {
-          "version": "3.0.1",
-          "dev": true
+          "version": "3.0.1"
         }
       }
     },
     "yeast": {
-      "version": "0.1.2",
-      "dev": true
+      "version": "0.1.2"
     },
     "zip-dir": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "zip-stream": {
       "version": "0.5.2",
-      "dev": true,
       "dependencies": {
         "lodash": {
-          "version": "3.2.0",
-          "dev": true
+          "version": "3.2.0"
         },
         "readable-stream": {
-          "version": "1.0.33",
-          "dev": true
+          "version": "1.0.33"
         }
       }
     },
     "zone.js": {
-      "version": "0.8.5"
+      "version": "0.8.12"
     }
   }
 }
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index cfb21621a1..28c7f9a952 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -1,615 +1,525 @@
 {
   "name": "angular-srcs",
-  "version": "4.0.0-rc.5",
+  "version": "5.0.0-beta.0",
   "dependencies": {
     "@types/angularjs": {
       "version": "1.5.13-alpha",
       "from": "@types/angularjs@latest",
-      "resolved": "https://registry.npmjs.org/@types/angularjs/-/angularjs-1.5.13-alpha.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@types/angularjs/-/angularjs-1.5.13-alpha.tgz"
     },
     "@types/base64-js": {
       "version": "1.2.5",
       "from": "@types/base64-js@latest",
-      "resolved": "https://registry.npmjs.org/@types/base64-js/-/base64-js-1.2.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@types/base64-js/-/base64-js-1.2.5.tgz"
     },
     "@types/fs-extra": {
       "version": "0.0.22-alpha",
       "from": "@types/fs-extra@latest",
-      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-0.0.22-alpha.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-0.0.22-alpha.tgz"
     },
     "@types/hammerjs": {
       "version": "2.0.33",
       "from": "@types/hammerjs@latest",
-      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.33.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.33.tgz"
     },
     "@types/jasmine": {
       "version": "2.2.22-alpha",
       "from": "@types/jasmine@latest",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.2.22-alpha.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.2.22-alpha.tgz"
     },
     "@types/jquery": {
       "version": "1.10.21-alpha",
       "from": "@types/jquery@*",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-1.10.21-alpha.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-1.10.21-alpha.tgz"
     },
     "@types/node": {
-      "version": "4.0.22-alpha",
-      "from": "@types/node@latest",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-4.0.22-alpha.tgz",
-      "dev": true
+      "version": "6.0.84",
+      "from": "@types/node@6.0.84",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.84.tgz"
     },
     "@types/q": {
       "version": "0.0.32",
       "from": "@types/q@>=0.0.32 <0.0.33",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz"
     },
     "@types/selenium-webdriver": {
       "version": "2.53.35",
       "from": "@types/selenium-webdriver@latest",
-      "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-2.53.35.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-2.53.35.tgz"
     },
     "@types/systemjs": {
       "version": "0.19.32",
       "from": "@types/systemjs@latest",
-      "resolved": "https://registry.npmjs.org/@types/systemjs/-/systemjs-0.19.32.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@types/systemjs/-/systemjs-0.19.32.tgz"
     },
     "abbrev": {
       "version": "1.0.9",
       "from": "abbrev@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz"
     },
     "accepts": {
       "version": "1.2.13",
       "from": "accepts@>=1.2.12 <1.3.0",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.2.13.tgz",
-      "dev": true,
       "dependencies": {
         "mime-db": {
           "version": "1.20.0",
           "from": "mime-db@1.20.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.20.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.20.0.tgz"
         },
         "mime-types": {
           "version": "2.1.8",
           "from": "mime-types@2.1.8",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.8.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.8.tgz"
         }
       }
     },
     "acorn": {
       "version": "1.2.2",
       "from": "acorn@>=1.0.3 <2.0.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz"
     },
     "add-stream": {
       "version": "1.0.0",
       "from": "add-stream@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz"
     },
     "adm-zip": {
       "version": "0.4.7",
       "from": "adm-zip@>=0.4.0 <0.5.0",
-      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.7.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.7.tgz"
     },
     "after": {
       "version": "0.8.1",
       "from": "after@0.8.1",
-      "resolved": "https://registry.npmjs.org/after/-/after-0.8.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/after/-/after-0.8.1.tgz"
     },
     "agent-base": {
       "version": "2.0.1",
       "from": "agent-base@>=2.0.0 <3.0.0",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-2.0.1.tgz",
-      "dev": true,
       "dependencies": {
         "semver": {
           "version": "5.0.3",
           "from": "semver@>=5.0.1 <5.1.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.0.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.0.3.tgz"
         }
       }
     },
+    "ajv": {
+      "version": "4.11.7",
+      "from": "ajv@>=4.9.1 <5.0.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.7.tgz"
+    },
     "align-text": {
       "version": "0.1.3",
       "from": "align-text@>=0.1.0 <0.2.0",
       "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.3.tgz",
-      "dev": true,
       "dependencies": {
         "kind-of": {
           "version": "2.0.1",
           "from": "kind-of@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz"
         }
       }
     },
     "amdefine": {
       "version": "1.0.1",
       "from": "amdefine@1.0.1",
-      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz"
     },
     "angular": {
       "version": "1.5.0",
       "from": "angular@1.5.0",
-      "resolved": "https://registry.npmjs.org/angular/-/angular-1.5.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/angular/-/angular-1.5.0.tgz"
     },
     "angular-animate": {
       "version": "1.5.0",
       "from": "angular-animate@1.5.0",
-      "resolved": "https://registry.npmjs.org/angular-animate/-/angular-animate-1.5.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/angular-animate/-/angular-animate-1.5.0.tgz"
     },
     "angular-mocks": {
       "version": "1.5.0",
       "from": "angular-mocks@1.5.0",
-      "resolved": "https://registry.npmjs.org/angular-mocks/-/angular-mocks-1.5.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/angular-mocks/-/angular-mocks-1.5.0.tgz"
     },
     "ansi-align": {
       "version": "1.1.0",
       "from": "ansi-align@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-1.1.0.tgz"
     },
     "ansi-escapes": {
       "version": "1.4.0",
       "from": "ansi-escapes@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz"
     },
     "ansi-green": {
       "version": "0.1.1",
       "from": "ansi-green@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-green/-/ansi-green-0.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ansi-green/-/ansi-green-0.1.1.tgz"
     },
     "ansi-regex": {
       "version": "2.0.0",
       "from": "ansi-regex@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
     },
     "ansi-styles": {
       "version": "2.2.1",
       "from": "ansi-styles@>=2.2.1 <3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz"
     },
     "ansi-wrap": {
       "version": "0.1.0",
       "from": "ansi-wrap@0.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz"
     },
     "any-promise": {
       "version": "0.1.0",
       "from": "any-promise@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz"
     },
     "anymatch": {
       "version": "1.3.0",
       "from": "anymatch@>=1.3.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.0.tgz"
     },
     "aproba": {
       "version": "1.0.4",
       "from": "aproba@>=1.0.3 <2.0.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.0.4.tgz"
     },
     "archiver": {
       "version": "0.14.4",
       "from": "archiver@>=0.14.3 <0.15.0",
       "resolved": "https://registry.npmjs.org/archiver/-/archiver-0.14.4.tgz",
-      "dev": true,
       "dependencies": {
         "async": {
           "version": "0.9.2",
           "from": "async@>=0.9.0 <0.10.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
         },
         "glob": {
           "version": "4.3.5",
           "from": "glob@>=4.3.0 <4.4.0",
           "resolved": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
-          "dev": true,
           "dependencies": {
             "minimatch": {
               "version": "2.0.10",
               "from": "minimatch@>=2.0.1 <3.0.0",
-              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz"
             }
           }
         },
         "lodash": {
           "version": "3.2.0",
           "from": "lodash@>=3.2.0 <3.3.0",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.2.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.2.0.tgz"
         },
         "readable-stream": {
           "version": "1.0.33",
           "from": "readable-stream@>=1.0.26 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz"
         }
       }
     },
     "archy": {
       "version": "1.0.0",
       "from": "archy@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz"
     },
     "are-we-there-yet": {
       "version": "1.1.2",
       "from": "are-we-there-yet@>=1.1.2 <1.2.0",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz"
     },
     "arr-diff": {
       "version": "2.0.0",
       "from": "arr-diff@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz"
     },
     "arr-flatten": {
       "version": "1.0.1",
       "from": "arr-flatten@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.0.1.tgz"
     },
     "array-differ": {
       "version": "1.0.0",
       "from": "array-differ@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz"
     },
     "array-ify": {
       "version": "1.0.0",
       "from": "array-ify@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz"
     },
     "array-slice": {
       "version": "0.2.3",
       "from": "array-slice@>=0.2.3 <0.3.0",
-      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz"
     },
     "array-union": {
       "version": "1.0.2",
       "from": "array-union@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz"
     },
     "array-uniq": {
       "version": "1.0.2",
       "from": "array-uniq@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.2.tgz"
     },
     "array-unique": {
       "version": "0.2.1",
       "from": "array-unique@>=0.2.1 <0.3.0",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz"
     },
     "arraybuffer.slice": {
       "version": "0.0.6",
       "from": "arraybuffer.slice@0.0.6",
-      "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz"
     },
     "arrify": {
       "version": "1.0.1",
       "from": "arrify@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz"
     },
     "asap": {
       "version": "2.0.3",
       "from": "asap@>=2.0.3 <2.1.0",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.3.tgz"
+    },
+    "ascli": {
+      "version": "1.0.1",
+      "from": "ascli@>=1.0.0 <2.0.0",
+      "resolved": "https://registry.npmjs.org/ascli/-/ascli-1.0.1.tgz"
     },
     "asn1": {
       "version": "0.2.3",
       "from": "asn1@>=0.2.3 <0.3.0",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz"
     },
     "assert": {
       "version": "1.4.1",
       "from": "assert@>=1.1.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/assert/-/assert-1.4.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/assert/-/assert-1.4.1.tgz"
     },
     "assert-plus": {
       "version": "0.1.5",
       "from": "assert-plus@>=0.1.5 <0.2.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz"
     },
     "async": {
       "version": "0.2.10",
       "from": "async@>=0.2.6 <0.3.0",
-      "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
     },
     "async-each": {
       "version": "0.1.6",
       "from": "async-each@>=0.1.6 <0.2.0",
-      "resolved": "https://registry.npmjs.org/async-each/-/async-each-0.1.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-0.1.6.tgz"
     },
     "asynckit": {
       "version": "0.4.0",
       "from": "asynckit@>=0.4.0 <0.5.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
     },
     "aws-sign2": {
       "version": "0.6.0",
       "from": "aws-sign2@>=0.6.0 <0.7.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz"
     },
     "aws4": {
       "version": "1.5.0",
       "from": "aws4@>=1.2.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.5.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.5.0.tgz"
     },
     "babel-code-frame": {
       "version": "6.20.0",
       "from": "babel-code-frame@>=6.20.0 <7.0.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.20.0.tgz",
-      "dev": true,
       "dependencies": {
         "esutils": {
           "version": "2.0.2",
           "from": "esutils@>=2.0.2 <3.0.0",
-          "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz"
         },
         "js-tokens": {
           "version": "2.0.0",
           "from": "js-tokens@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-2.0.0.tgz"
         }
       }
     },
     "babel-runtime": {
       "version": "6.22.0",
       "from": "babel-runtime@>=6.0.0 <7.0.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.22.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.22.0.tgz"
     },
     "backo2": {
       "version": "1.0.2",
       "from": "backo2@1.0.2",
-      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz"
     },
     "balanced-match": {
       "version": "0.4.2",
       "from": "balanced-match@>=0.4.1 <0.5.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz"
     },
     "base62": {
       "version": "0.1.1",
       "from": "base62@0.1.1",
-      "resolved": "https://registry.npmjs.org/base62/-/base62-0.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/base62/-/base62-0.1.1.tgz"
     },
     "Base64": {
       "version": "0.2.1",
       "from": "Base64@>=0.2.0 <0.3.0",
-      "resolved": "https://registry.npmjs.org/Base64/-/Base64-0.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/Base64/-/Base64-0.2.1.tgz"
     },
     "base64-arraybuffer": {
       "version": "0.1.2",
       "from": "base64-arraybuffer@0.1.2",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.2.tgz"
     },
     "base64-js": {
       "version": "1.2.0",
       "from": "base64-js@latest",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.0.tgz"
     },
     "base64-url": {
       "version": "1.2.1",
       "from": "base64-url@>=1.2.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/base64-url/-/base64-url-1.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/base64-url/-/base64-url-1.2.1.tgz"
     },
     "base64id": {
       "version": "0.1.0",
       "from": "base64id@0.1.0",
-      "resolved": "https://registry.npmjs.org/base64id/-/base64id-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-0.1.0.tgz"
     },
     "basic-auth": {
       "version": "1.0.3",
       "from": "basic-auth@>=1.0.3 <1.1.0",
-      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.0.3.tgz"
     },
     "basic-auth-connect": {
       "version": "1.0.0",
       "from": "basic-auth-connect@1.0.0",
-      "resolved": "https://registry.npmjs.org/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz"
     },
     "batch": {
       "version": "0.5.2",
       "from": "batch@0.5.2",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.5.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.5.2.tgz"
     },
     "bcrypt-pbkdf": {
       "version": "1.0.0",
       "from": "bcrypt-pbkdf@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz",
-      "dev": true,
-      "optional": true
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz"
     },
     "beeper": {
       "version": "1.1.0",
       "from": "beeper@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.0.tgz"
     },
     "benchmark": {
       "version": "1.0.0",
       "from": "benchmark@1.0.0",
-      "resolved": "https://registry.npmjs.org/benchmark/-/benchmark-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/benchmark/-/benchmark-1.0.0.tgz"
     },
     "better-assert": {
       "version": "1.0.2",
       "from": "better-assert@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz"
     },
     "big.js": {
       "version": "3.1.3",
       "from": "big.js@>=3.0.2 <4.0.0",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.1.3.tgz"
     },
     "binary": {
       "version": "0.3.0",
       "from": "binary@>=0.3.0 <1.0.0",
-      "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz"
     },
     "binary-extensions": {
       "version": "1.4.0",
       "from": "binary-extensions@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.4.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.4.0.tgz"
     },
     "bl": {
       "version": "0.9.4",
       "from": "bl@>=0.9.0 <0.10.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "1.0.33",
           "from": "readable-stream@>=1.0.26 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz"
         }
       }
     },
     "blob": {
       "version": "0.0.4",
       "from": "blob@0.0.4",
-      "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz"
     },
     "block-stream": {
       "version": "0.0.9",
       "from": "block-stream@*",
-      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz"
     },
     "bluebird": {
       "version": "2.10.2",
       "from": "bluebird@>=2.9.27 <3.0.0",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.10.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.10.2.tgz"
     },
     "body-parser": {
       "version": "1.13.3",
       "from": "body-parser@>=1.13.3 <1.14.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.13.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.13.3.tgz"
     },
     "boom": {
       "version": "2.10.1",
       "from": "boom@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz"
     },
     "bower": {
       "version": "1.7.2",
       "from": "bower@>=1.3.12 <2.0.0",
       "resolved": "https://registry.npmjs.org/bower/-/bower-1.7.2.tgz",
-      "dev": true,
       "dependencies": {
         "abbrev": {
           "version": "1.0.7",
           "from": "abbrev@>=1.0.5 <2.0.0",
-          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.7.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.7.tgz"
         },
         "archy": {
           "version": "1.0.0",
           "from": "archy@1.0.0",
-          "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz"
         },
         "bower-config": {
           "version": "1.3.0",
           "from": "bower-config@>=1.3.0 <2.0.0",
           "resolved": "https://registry.npmjs.org/bower-config/-/bower-config-1.3.0.tgz",
-          "dev": true,
           "dependencies": {
             "graceful-fs": {
               "version": "4.1.2",
               "from": "graceful-fs@>=4.0.0 <5.0.0",
-              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
             },
             "optimist": {
               "version": "0.6.1",
               "from": "optimist@>=0.6.1 <0.7.0",
               "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-              "dev": true,
               "dependencies": {
                 "minimist": {
                   "version": "0.0.10",
                   "from": "minimist@>=0.0.1 <0.1.0",
-                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
                 },
                 "wordwrap": {
                   "version": "0.0.3",
                   "from": "wordwrap@>=0.0.2 <0.1.0",
-                  "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
                 }
               }
             },
@@ -617,19 +527,16 @@
               "version": "0.1.3",
               "from": "osenv@>=0.1.3 <0.2.0",
               "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.3.tgz",
-              "dev": true,
               "dependencies": {
                 "os-homedir": {
                   "version": "1.0.1",
                   "from": "os-homedir@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz"
                 },
                 "os-tmpdir": {
                   "version": "1.0.1",
                   "from": "os-tmpdir@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.1.tgz"
                 }
               }
             },
@@ -637,13 +544,11 @@
               "version": "2.1.0",
               "from": "untildify@2.1.0",
               "resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz",
-              "dev": true,
               "dependencies": {
                 "os-homedir": {
                   "version": "1.0.1",
                   "from": "os-homedir@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz"
                 }
               }
             }
@@ -652,70 +557,59 @@
         "bower-endpoint-parser": {
           "version": "0.2.2",
           "from": "bower-endpoint-parser@>=0.2.2 <0.3.0",
-          "resolved": "https://registry.npmjs.org/bower-endpoint-parser/-/bower-endpoint-parser-0.2.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/bower-endpoint-parser/-/bower-endpoint-parser-0.2.2.tgz"
         },
         "bower-json": {
           "version": "0.4.0",
           "from": "bower-json@>=0.4.0 <0.5.0",
           "resolved": "https://registry.npmjs.org/bower-json/-/bower-json-0.4.0.tgz",
-          "dev": true,
           "dependencies": {
             "deep-extend": {
               "version": "0.2.11",
               "from": "deep-extend@>=0.2.5 <0.3.0",
-              "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.2.11.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.2.11.tgz"
             },
             "graceful-fs": {
               "version": "2.0.3",
               "from": "graceful-fs@>=2.0.0 <2.1.0",
-              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-2.0.3.tgz"
             },
             "intersect": {
               "version": "0.0.3",
               "from": "intersect@>=0.0.3 <0.1.0",
-              "resolved": "https://registry.npmjs.org/intersect/-/intersect-0.0.3.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/intersect/-/intersect-0.0.3.tgz"
             }
           }
         },
         "bower-logger": {
           "version": "0.2.2",
           "from": "bower-logger@>=0.2.2 <0.3.0",
-          "resolved": "https://registry.npmjs.org/bower-logger/-/bower-logger-0.2.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/bower-logger/-/bower-logger-0.2.2.tgz"
         },
         "bower-registry-client": {
           "version": "1.0.0",
           "from": "bower-registry-client@>=1.0.0 <2.0.0",
           "resolved": "https://registry.npmjs.org/bower-registry-client/-/bower-registry-client-1.0.0.tgz",
-          "dev": true,
           "dependencies": {
             "async": {
               "version": "0.2.10",
               "from": "async@>=0.2.8 <0.3.0",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
             },
             "graceful-fs": {
               "version": "4.1.2",
               "from": "graceful-fs@>=4.0.0 <5.0.0",
-              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
             },
             "mkdirp": {
               "version": "0.3.5",
               "from": "mkdirp@>=0.3.5 <0.4.0",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz"
             },
             "request-replay": {
               "version": "0.2.0",
               "from": "request-replay@>=0.2.0 <0.3.0",
-              "resolved": "https://registry.npmjs.org/request-replay/-/request-replay-0.2.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/request-replay/-/request-replay-0.2.0.tgz"
             }
           }
         },
@@ -723,25 +617,21 @@
           "version": "0.4.4",
           "from": "cardinal@0.4.4",
           "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-0.4.4.tgz",
-          "dev": true,
           "dependencies": {
             "ansicolors": {
               "version": "0.2.1",
               "from": "ansicolors@>=0.2.1 <0.3.0",
-              "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.2.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.2.1.tgz"
             },
             "redeyed": {
               "version": "0.4.4",
               "from": "redeyed@>=0.4.0 <0.5.0",
               "resolved": "https://registry.npmjs.org/redeyed/-/redeyed-0.4.4.tgz",
-              "dev": true,
               "dependencies": {
                 "esprima": {
                   "version": "1.0.4",
                   "from": "esprima@>=1.0.4 <1.1.0",
-                  "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz"
                 }
               }
             }
@@ -751,31 +641,26 @@
           "version": "1.1.1",
           "from": "chalk@>=1.0.0 <2.0.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.1.tgz",
-          "dev": true,
           "dependencies": {
             "ansi-styles": {
               "version": "2.1.0",
               "from": "ansi-styles@>=2.1.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.1.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.1.0.tgz"
             },
             "escape-string-regexp": {
               "version": "1.0.4",
               "from": "escape-string-regexp@>=1.0.2 <2.0.0",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.4.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.4.tgz"
             },
             "has-ansi": {
               "version": "2.0.0",
               "from": "has-ansi@>=2.0.0 <3.0.0",
               "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-              "dev": true,
               "dependencies": {
                 "ansi-regex": {
                   "version": "2.0.0",
                   "from": "ansi-regex@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
                 }
               }
             },
@@ -783,113 +668,96 @@
               "version": "3.0.0",
               "from": "strip-ansi@>=3.0.0 <4.0.0",
               "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz",
-              "dev": true,
               "dependencies": {
                 "ansi-regex": {
                   "version": "2.0.0",
                   "from": "ansi-regex@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
                 }
               }
             },
             "supports-color": {
               "version": "2.0.0",
               "from": "supports-color@>=2.0.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
             }
           }
         },
         "chmodr": {
           "version": "1.0.2",
           "from": "chmodr@>=1.0.2 <2.0.0",
-          "resolved": "https://registry.npmjs.org/chmodr/-/chmodr-1.0.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/chmodr/-/chmodr-1.0.2.tgz"
         },
         "configstore": {
           "version": "0.3.2",
           "from": "configstore@>=0.3.2 <0.4.0",
           "resolved": "https://registry.npmjs.org/configstore/-/configstore-0.3.2.tgz",
-          "dev": true,
           "dependencies": {
             "js-yaml": {
               "version": "3.4.6",
               "from": "js-yaml@>=3.1.0 <4.0.0",
               "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.4.6.tgz",
-              "dev": true,
               "dependencies": {
                 "argparse": {
                   "version": "1.0.3",
                   "from": "argparse@>=1.0.2 <2.0.0",
                   "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.3.tgz",
-                  "dev": true,
                   "dependencies": {
                     "lodash": {
                       "version": "3.10.1",
                       "from": "lodash@>=3.2.0 <4.0.0",
-                      "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz"
                     },
                     "sprintf-js": {
                       "version": "1.0.3",
                       "from": "sprintf-js@>=1.0.2 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
                     }
                   }
                 },
                 "esprima": {
                   "version": "2.7.1",
                   "from": "esprima@>=2.6.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.1.tgz"
                 },
                 "inherit": {
                   "version": "2.2.2",
                   "from": "inherit@>=2.2.2 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/inherit/-/inherit-2.2.2.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/inherit/-/inherit-2.2.2.tgz"
                 }
               }
             },
             "object-assign": {
               "version": "2.1.1",
               "from": "object-assign@>=2.0.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz"
             },
             "osenv": {
               "version": "0.1.3",
               "from": "osenv@>=0.1.0 <0.2.0",
               "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.3.tgz",
-              "dev": true,
               "dependencies": {
                 "os-homedir": {
                   "version": "1.0.1",
                   "from": "os-homedir@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz"
                 },
                 "os-tmpdir": {
                   "version": "1.0.1",
                   "from": "os-tmpdir@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.1.tgz"
                 }
               }
             },
             "uuid": {
               "version": "2.0.1",
               "from": "uuid@>=2.0.1 <3.0.0",
-              "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.1.tgz"
             },
             "xdg-basedir": {
               "version": "1.0.1",
               "from": "xdg-basedir@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-1.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-1.0.1.tgz"
             }
           }
         },
@@ -897,31 +765,26 @@
           "version": "0.1.0",
           "from": "decompress-zip@>=0.1.0 <0.2.0",
           "resolved": "https://registry.npmjs.org/decompress-zip/-/decompress-zip-0.1.0.tgz",
-          "dev": true,
           "dependencies": {
             "binary": {
               "version": "0.3.0",
               "from": "binary@>=0.3.0 <0.4.0",
               "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
-              "dev": true,
               "dependencies": {
                 "buffers": {
                   "version": "0.1.1",
                   "from": "buffers@>=0.1.1 <0.2.0",
-                  "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz"
                 },
                 "chainsaw": {
                   "version": "0.1.0",
                   "from": "chainsaw@>=0.1.0 <0.2.0",
                   "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
-                  "dev": true,
                   "dependencies": {
                     "traverse": {
                       "version": "0.3.9",
                       "from": "traverse@>=0.3.0 <0.4.0",
-                      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz"
                     }
                   }
                 }
@@ -930,38 +793,32 @@
             "mkpath": {
               "version": "0.1.0",
               "from": "mkpath@>=0.1.0 <0.2.0",
-              "resolved": "https://registry.npmjs.org/mkpath/-/mkpath-0.1.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/mkpath/-/mkpath-0.1.0.tgz"
             },
             "readable-stream": {
               "version": "1.1.13",
               "from": "readable-stream@>=1.1.8 <2.0.0",
               "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-              "dev": true,
               "dependencies": {
                 "core-util-is": {
                   "version": "1.0.2",
                   "from": "core-util-is@>=1.0.0 <1.1.0",
-                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
                 },
                 "inherits": {
                   "version": "2.0.1",
                   "from": "inherits@>=2.0.1 <2.1.0",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
                 },
                 "isarray": {
                   "version": "0.0.1",
                   "from": "isarray@0.0.1",
-                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
                 },
                 "string_decoder": {
                   "version": "0.10.31",
                   "from": "string_decoder@>=0.10.0 <0.11.0",
-                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
                 }
               }
             },
@@ -969,13 +826,11 @@
               "version": "0.0.3",
               "from": "touch@0.0.3",
               "resolved": "https://registry.npmjs.org/touch/-/touch-0.0.3.tgz",
-              "dev": true,
               "dependencies": {
                 "nopt": {
                   "version": "1.0.10",
                   "from": "nopt@>=1.0.10 <1.1.0",
-                  "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz"
                 }
               }
             }
@@ -984,26 +839,22 @@
         "destroy": {
           "version": "1.0.3",
           "from": "destroy@>=1.0.3 <2.0.0",
-          "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.3.tgz"
         },
         "fs-write-stream-atomic": {
           "version": "1.0.5",
           "from": "fs-write-stream-atomic@1.0.5",
           "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.5.tgz",
-          "dev": true,
           "dependencies": {
             "graceful-fs": {
               "version": "4.1.2",
               "from": "graceful-fs@>=4.1.2 <5.0.0",
-              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
             },
             "imurmurhash": {
               "version": "0.1.4",
               "from": "imurmurhash@>=0.1.4 <0.2.0",
-              "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
             }
           }
         },
@@ -1011,19 +862,16 @@
           "version": "1.0.8",
           "from": "fstream@>=1.0.3 <2.0.0",
           "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.8.tgz",
-          "dev": true,
           "dependencies": {
             "graceful-fs": {
               "version": "4.1.2",
               "from": "graceful-fs@>=4.1.2 <5.0.0",
-              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
             },
             "inherits": {
               "version": "2.0.1",
               "from": "inherits@>=2.0.0 <2.1.0",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
             }
           }
         },
@@ -1031,37 +879,31 @@
           "version": "1.0.3",
           "from": "fstream-ignore@>=1.0.2 <2.0.0",
           "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.3.tgz",
-          "dev": true,
           "dependencies": {
             "inherits": {
               "version": "2.0.1",
               "from": "inherits@>=2.0.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
             },
             "minimatch": {
               "version": "3.0.0",
               "from": "minimatch@>=3.0.0 <4.0.0",
               "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.0.tgz",
-              "dev": true,
               "dependencies": {
                 "brace-expansion": {
                   "version": "1.1.2",
                   "from": "brace-expansion@>=1.0.0 <2.0.0",
                   "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.2.tgz",
-                  "dev": true,
                   "dependencies": {
                     "balanced-match": {
                       "version": "0.3.0",
                       "from": "balanced-match@>=0.3.0 <0.4.0",
-                      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.3.0.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.3.0.tgz"
                     },
                     "concat-map": {
                       "version": "0.0.1",
                       "from": "concat-map@0.0.1",
-                      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
                     }
                   }
                 }
@@ -1073,13 +915,11 @@
           "version": "0.2.4",
           "from": "github@>=0.2.3 <0.3.0",
           "resolved": "https://registry.npmjs.org/github/-/github-0.2.4.tgz",
-          "dev": true,
           "dependencies": {
             "mime": {
               "version": "1.3.4",
               "from": "mime@>=1.2.11 <2.0.0",
-              "resolved": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz"
             }
           }
         },
@@ -1087,51 +927,43 @@
           "version": "4.5.3",
           "from": "glob@>=4.3.2 <5.0.0",
           "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
-          "dev": true,
           "dependencies": {
             "inflight": {
               "version": "1.0.4",
               "from": "inflight@>=1.0.4 <2.0.0",
               "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-              "dev": true,
               "dependencies": {
                 "wrappy": {
                   "version": "1.0.1",
                   "from": "wrappy@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
                 }
               }
             },
             "inherits": {
               "version": "2.0.1",
               "from": "inherits@>=2.0.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
             },
             "minimatch": {
               "version": "2.0.10",
               "from": "minimatch@>=2.0.1 <3.0.0",
               "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz",
-              "dev": true,
               "dependencies": {
                 "brace-expansion": {
                   "version": "1.1.2",
                   "from": "brace-expansion@>=1.0.0 <2.0.0",
                   "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.2.tgz",
-                  "dev": true,
                   "dependencies": {
                     "balanced-match": {
                       "version": "0.3.0",
                       "from": "balanced-match@>=0.3.0 <0.4.0",
-                      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.3.0.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.3.0.tgz"
                     },
                     "concat-map": {
                       "version": "0.0.1",
                       "from": "concat-map@0.0.1",
-                      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
                     }
                   }
                 }
@@ -1141,13 +973,11 @@
               "version": "1.3.3",
               "from": "once@>=1.3.0 <2.0.0",
               "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-              "dev": true,
               "dependencies": {
                 "wrappy": {
                   "version": "1.0.1",
                   "from": "wrappy@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
                 }
               }
             }
@@ -1156,26 +986,22 @@
         "graceful-fs": {
           "version": "3.0.8",
           "from": "graceful-fs@>=3.0.5 <4.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.8.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.8.tgz"
         },
         "handlebars": {
           "version": "2.0.0",
           "from": "handlebars@>=2.0.0 <3.0.0",
           "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-2.0.0.tgz",
-          "dev": true,
           "dependencies": {
             "optimist": {
               "version": "0.3.7",
               "from": "optimist@>=0.3.0 <0.4.0",
               "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz",
-              "dev": true,
               "dependencies": {
                 "wordwrap": {
                   "version": "0.0.3",
                   "from": "wordwrap@>=0.0.2 <0.1.0",
-                  "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
                 }
               }
             },
@@ -1183,29 +1009,21 @@
               "version": "2.3.6",
               "from": "uglify-js@>=2.3.0 <2.4.0",
               "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.3.6.tgz",
-              "dev": true,
-              "optional": true,
               "dependencies": {
                 "async": {
                   "version": "0.2.10",
                   "from": "async@>=0.2.6 <0.3.0",
-                  "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-                  "dev": true,
-                  "optional": true
+                  "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
                 },
                 "source-map": {
                   "version": "0.1.43",
                   "from": "source-map@>=0.1.7 <0.2.0",
                   "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-                  "dev": true,
-                  "optional": true,
                   "dependencies": {
                     "amdefine": {
                       "version": "1.0.0",
                       "from": "amdefine@>=0.0.4",
-                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.0.tgz",
-                      "dev": true,
-                      "optional": true
+                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.0.tgz"
                     }
                   }
                 }
@@ -1217,43 +1035,36 @@
           "version": "0.10.0",
           "from": "inquirer@0.10.0",
           "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-0.10.0.tgz",
-          "dev": true,
           "dependencies": {
             "ansi-escapes": {
               "version": "1.1.0",
               "from": "ansi-escapes@>=1.1.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.1.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.1.0.tgz"
             },
             "ansi-regex": {
               "version": "2.0.0",
               "from": "ansi-regex@>=2.0.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
             },
             "cli-cursor": {
               "version": "1.0.2",
               "from": "cli-cursor@>=1.0.1 <2.0.0",
               "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz",
-              "dev": true,
               "dependencies": {
                 "restore-cursor": {
                   "version": "1.0.1",
                   "from": "restore-cursor@>=1.0.1 <2.0.0",
                   "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
-                  "dev": true,
                   "dependencies": {
                     "exit-hook": {
                       "version": "1.1.1",
                       "from": "exit-hook@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz"
                     },
                     "onetime": {
                       "version": "1.1.0",
                       "from": "onetime@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz"
                     }
                   }
                 }
@@ -1262,38 +1073,32 @@
             "cli-width": {
               "version": "1.1.0",
               "from": "cli-width@>=1.0.1 <2.0.0",
-              "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-1.1.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-1.1.0.tgz"
             },
             "figures": {
               "version": "1.4.0",
               "from": "figures@>=1.3.5 <2.0.0",
-              "resolved": "https://registry.npmjs.org/figures/-/figures-1.4.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/figures/-/figures-1.4.0.tgz"
             },
             "lodash": {
               "version": "3.10.1",
               "from": "lodash@>=3.3.1 <4.0.0",
-              "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz"
             },
             "readline2": {
               "version": "1.0.1",
               "from": "readline2@>=1.0.1 <2.0.0",
               "resolved": "https://registry.npmjs.org/readline2/-/readline2-1.0.1.tgz",
-              "dev": true,
               "dependencies": {
                 "code-point-at": {
                   "version": "1.0.0",
                   "from": "code-point-at@>=1.0.0 <2.0.0",
                   "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.0.0.tgz",
-                  "dev": true,
                   "dependencies": {
                     "number-is-nan": {
                       "version": "1.0.0",
                       "from": "number-is-nan@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.0.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.0.tgz"
                     }
                   }
                 },
@@ -1301,21 +1106,18 @@
                   "version": "1.0.0",
                   "from": "is-fullwidth-code-point@>=1.0.0 <2.0.0",
                   "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-                  "dev": true,
                   "dependencies": {
                     "number-is-nan": {
                       "version": "1.0.0",
                       "from": "number-is-nan@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.0.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.0.tgz"
                     }
                   }
                 },
                 "mute-stream": {
                   "version": "0.0.5",
                   "from": "mute-stream@0.0.5",
-                  "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz"
                 }
               }
             },
@@ -1323,19 +1125,16 @@
               "version": "0.1.0",
               "from": "run-async@>=0.1.0 <0.2.0",
               "resolved": "https://registry.npmjs.org/run-async/-/run-async-0.1.0.tgz",
-              "dev": true,
               "dependencies": {
                 "once": {
                   "version": "1.3.3",
                   "from": "once@>=1.3.0 <2.0.0",
                   "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-                  "dev": true,
                   "dependencies": {
                     "wrappy": {
                       "version": "1.0.1",
                       "from": "wrappy@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
                     }
                   }
                 }
@@ -1344,20 +1143,17 @@
             "rx-lite": {
               "version": "3.1.2",
               "from": "rx-lite@>=3.1.2 <4.0.0",
-              "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-3.1.2.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-3.1.2.tgz"
             },
             "strip-ansi": {
               "version": "3.0.0",
               "from": "strip-ansi@>=3.0.0 <4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz"
             },
             "through": {
               "version": "2.3.8",
               "from": "through@>=2.3.6 <3.0.0",
-              "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
             }
           }
         },
@@ -1365,69 +1161,58 @@
           "version": "0.7.0",
           "from": "insight@>=0.7.0 <0.8.0",
           "resolved": "https://registry.npmjs.org/insight/-/insight-0.7.0.tgz",
-          "dev": true,
           "dependencies": {
             "async": {
               "version": "1.5.0",
               "from": "async@>=1.4.2 <2.0.0",
-              "resolved": "https://registry.npmjs.org/async/-/async-1.5.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/async/-/async-1.5.0.tgz"
             },
             "configstore": {
               "version": "1.4.0",
               "from": "configstore@>=1.0.0 <2.0.0",
               "resolved": "https://registry.npmjs.org/configstore/-/configstore-1.4.0.tgz",
-              "dev": true,
               "dependencies": {
                 "graceful-fs": {
                   "version": "4.1.2",
                   "from": "graceful-fs@>=4.1.2 <5.0.0",
-                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
                 },
                 "os-tmpdir": {
                   "version": "1.0.1",
                   "from": "os-tmpdir@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.1.tgz"
                 },
                 "osenv": {
                   "version": "0.1.3",
                   "from": "osenv@>=0.1.0 <0.2.0",
                   "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.3.tgz",
-                  "dev": true,
                   "dependencies": {
                     "os-homedir": {
                       "version": "1.0.1",
                       "from": "os-homedir@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz"
                     }
                   }
                 },
                 "uuid": {
                   "version": "2.0.1",
                   "from": "uuid@>=2.0.1 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.1.tgz"
                 },
                 "write-file-atomic": {
                   "version": "1.1.4",
                   "from": "write-file-atomic@>=1.1.2 <2.0.0",
                   "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-1.1.4.tgz",
-                  "dev": true,
                   "dependencies": {
                     "imurmurhash": {
                       "version": "0.1.4",
                       "from": "imurmurhash@>=0.1.4 <0.2.0",
-                      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
                     },
                     "slide": {
                       "version": "1.1.6",
                       "from": "slide@>=1.1.5 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz"
                     }
                   }
                 },
@@ -1435,13 +1220,11 @@
                   "version": "2.0.0",
                   "from": "xdg-basedir@>=2.0.0 <3.0.0",
                   "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",
-                  "dev": true,
                   "dependencies": {
                     "os-homedir": {
                       "version": "1.0.1",
                       "from": "os-homedir@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz"
                     }
                   }
                 }
@@ -1451,39 +1234,33 @@
               "version": "3.1.1",
               "from": "lodash.debounce@>=3.0.1 <4.0.0",
               "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.1.1.tgz",
-              "dev": true,
               "dependencies": {
                 "lodash._getnative": {
                   "version": "3.9.1",
                   "from": "lodash._getnative@>=3.0.0 <4.0.0",
-                  "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz"
                 }
               }
             },
             "object-assign": {
               "version": "4.0.1",
               "from": "object-assign@>=4.0.1 <5.0.0",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.0.1.tgz"
             },
             "os-name": {
               "version": "1.0.3",
               "from": "os-name@>=1.0.0 <2.0.0",
               "resolved": "https://registry.npmjs.org/os-name/-/os-name-1.0.3.tgz",
-              "dev": true,
               "dependencies": {
                 "osx-release": {
                   "version": "1.1.0",
                   "from": "osx-release@>=1.0.0 <2.0.0",
                   "resolved": "https://registry.npmjs.org/osx-release/-/osx-release-1.1.0.tgz",
-                  "dev": true,
                   "dependencies": {
                     "minimist": {
                       "version": "1.2.0",
                       "from": "minimist@>=1.1.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz"
                     }
                   }
                 },
@@ -1491,13 +1268,11 @@
                   "version": "1.1.1",
                   "from": "win-release@>=1.0.0 <2.0.0",
                   "resolved": "https://registry.npmjs.org/win-release/-/win-release-1.1.1.tgz",
-                  "dev": true,
                   "dependencies": {
                     "semver": {
                       "version": "5.1.0",
                       "from": "semver@>=5.0.1 <6.0.0",
-                      "resolved": "https://registry.npmjs.org/semver/-/semver-5.1.0.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/semver/-/semver-5.1.0.tgz"
                     }
                   }
                 }
@@ -1506,46 +1281,39 @@
             "tough-cookie": {
               "version": "2.2.1",
               "from": "tough-cookie@>=2.0.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.2.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.2.1.tgz"
             }
           }
         },
         "is-root": {
           "version": "1.0.0",
           "from": "is-root@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/is-root/-/is-root-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/is-root/-/is-root-1.0.0.tgz"
         },
         "junk": {
           "version": "1.0.2",
           "from": "junk@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.2.tgz"
         },
         "lockfile": {
           "version": "1.0.1",
           "from": "lockfile@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/lockfile/-/lockfile-1.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lockfile/-/lockfile-1.0.1.tgz"
         },
         "lru-cache": {
           "version": "2.7.3",
           "from": "lru-cache@>=2.5.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz"
         },
         "md5-hex": {
           "version": "1.2.0",
           "from": "md5-hex@>=1.0.2 <2.0.0",
           "resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-1.2.0.tgz",
-          "dev": true,
           "dependencies": {
             "md5-o-matic": {
               "version": "0.1.1",
               "from": "md5-o-matic@>=0.1.1 <0.2.0",
-              "resolved": "https://registry.npmjs.org/md5-o-matic/-/md5-o-matic-0.1.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/md5-o-matic/-/md5-o-matic-0.1.1.tgz"
             }
           }
         },
@@ -1553,45 +1321,38 @@
           "version": "0.5.0",
           "from": "mkdirp@0.5.0",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-          "dev": true,
           "dependencies": {
             "minimist": {
               "version": "0.0.8",
               "from": "minimist@0.0.8",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
             }
           }
         },
         "mout": {
           "version": "0.11.1",
           "from": "mout@>=0.11.0 <0.12.0",
-          "resolved": "https://registry.npmjs.org/mout/-/mout-0.11.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mout/-/mout-0.11.1.tgz"
         },
         "nopt": {
           "version": "3.0.6",
           "from": "nopt@>=3.0.1 <4.0.0",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz"
         },
         "opn": {
           "version": "1.0.2",
           "from": "opn@>=1.0.1 <2.0.0",
-          "resolved": "https://registry.npmjs.org/opn/-/opn-1.0.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/opn/-/opn-1.0.2.tgz"
         },
         "p-throttler": {
           "version": "0.1.1",
           "from": "p-throttler@0.1.1",
           "resolved": "https://registry.npmjs.org/p-throttler/-/p-throttler-0.1.1.tgz",
-          "dev": true,
           "dependencies": {
             "q": {
               "version": "0.9.7",
               "from": "q@>=0.9.2 <0.10.0",
-              "resolved": "https://registry.npmjs.org/q/-/q-0.9.7.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/q/-/q-0.9.7.tgz"
             }
           }
         },
@@ -1599,19 +1360,16 @@
           "version": "0.2.0",
           "from": "promptly@0.2.0",
           "resolved": "https://registry.npmjs.org/promptly/-/promptly-0.2.0.tgz",
-          "dev": true,
           "dependencies": {
             "read": {
               "version": "1.0.7",
               "from": "read@>=1.0.4 <1.1.0",
               "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
-              "dev": true,
               "dependencies": {
                 "mute-stream": {
                   "version": "0.0.5",
                   "from": "mute-stream@>=0.0.4 <0.1.0",
-                  "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz"
                 }
               }
             }
@@ -1620,56 +1378,47 @@
         "q": {
           "version": "1.4.1",
           "from": "q@>=1.1.2 <2.0.0",
-          "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz"
         },
         "request": {
           "version": "2.53.0",
           "from": "request@2.53.0",
           "resolved": "https://registry.npmjs.org/request/-/request-2.53.0.tgz",
-          "dev": true,
           "dependencies": {
             "aws-sign2": {
               "version": "0.5.0",
               "from": "aws-sign2@>=0.5.0 <0.6.0",
-              "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz"
             },
             "bl": {
               "version": "0.9.4",
               "from": "bl@>=0.9.0 <0.10.0",
               "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.4.tgz",
-              "dev": true,
               "dependencies": {
                 "readable-stream": {
                   "version": "1.0.33",
                   "from": "readable-stream@>=1.0.26 <1.1.0",
                   "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-                  "dev": true,
                   "dependencies": {
                     "core-util-is": {
                       "version": "1.0.2",
                       "from": "core-util-is@>=1.0.0 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
                     },
                     "inherits": {
                       "version": "2.0.1",
                       "from": "inherits@>=2.0.1 <2.1.0",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
                     },
                     "isarray": {
                       "version": "0.0.1",
                       "from": "isarray@0.0.1",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
                     },
                     "string_decoder": {
                       "version": "0.10.31",
                       "from": "string_decoder@>=0.10.0 <0.11.0",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
                     }
                   }
                 }
@@ -1678,40 +1427,34 @@
             "caseless": {
               "version": "0.9.0",
               "from": "caseless@>=0.9.0 <0.10.0",
-              "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz"
             },
             "combined-stream": {
               "version": "0.0.7",
               "from": "combined-stream@>=0.0.5 <0.1.0",
               "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-              "dev": true,
               "dependencies": {
                 "delayed-stream": {
                   "version": "0.0.5",
                   "from": "delayed-stream@0.0.5",
-                  "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
                 }
               }
             },
             "forever-agent": {
               "version": "0.5.2",
               "from": "forever-agent@>=0.5.0 <0.6.0",
-              "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz"
             },
             "form-data": {
               "version": "0.2.0",
               "from": "form-data@>=0.2.0 <0.3.0",
               "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-              "dev": true,
               "dependencies": {
                 "async": {
                   "version": "0.9.2",
                   "from": "async@>=0.9.0 <0.10.0",
-                  "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
                 }
               }
             },
@@ -1719,31 +1462,26 @@
               "version": "2.3.1",
               "from": "hawk@>=2.3.0 <2.4.0",
               "resolved": "https://registry.npmjs.org/hawk/-/hawk-2.3.1.tgz",
-              "dev": true,
               "dependencies": {
                 "boom": {
                   "version": "2.10.1",
                   "from": "boom@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz"
                 },
                 "cryptiles": {
                   "version": "2.0.5",
                   "from": "cryptiles@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz"
                 },
                 "hoek": {
                   "version": "2.16.3",
                   "from": "hoek@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz"
                 },
                 "sntp": {
                   "version": "1.0.9",
                   "from": "sntp@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz"
                 }
               }
             },
@@ -1751,89 +1489,75 @@
               "version": "0.10.1",
               "from": "http-signature@>=0.10.0 <0.11.0",
               "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-              "dev": true,
               "dependencies": {
                 "asn1": {
                   "version": "0.1.11",
                   "from": "asn1@0.1.11",
-                  "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
                 },
                 "assert-plus": {
                   "version": "0.1.5",
                   "from": "assert-plus@>=0.1.5 <0.2.0",
-                  "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz"
                 },
                 "ctype": {
                   "version": "0.5.3",
                   "from": "ctype@0.5.3",
-                  "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
                 }
               }
             },
             "isstream": {
               "version": "0.1.2",
               "from": "isstream@>=0.1.1 <0.2.0",
-              "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
             },
             "json-stringify-safe": {
               "version": "5.0.1",
               "from": "json-stringify-safe@>=5.0.0 <5.1.0",
-              "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
             },
             "mime-types": {
               "version": "2.0.14",
               "from": "mime-types@>=2.0.1 <2.1.0",
               "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.14.tgz",
-              "dev": true,
               "dependencies": {
                 "mime-db": {
                   "version": "1.12.0",
                   "from": "mime-db@>=1.12.0 <1.13.0",
-                  "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.12.0.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.12.0.tgz"
                 }
               }
             },
             "node-uuid": {
               "version": "1.4.7",
               "from": "node-uuid@>=1.4.0 <1.5.0",
-              "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.7.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.7.tgz"
             },
             "oauth-sign": {
               "version": "0.6.0",
               "from": "oauth-sign@>=0.6.0 <0.7.0",
-              "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz"
             },
             "qs": {
               "version": "2.3.3",
               "from": "qs@>=2.3.1 <2.4.0",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz"
             },
             "stringstream": {
               "version": "0.0.5",
               "from": "stringstream@>=0.0.4 <0.1.0",
-              "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz"
             },
             "tough-cookie": {
               "version": "2.2.1",
               "from": "tough-cookie@>=0.12.0",
-              "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.2.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.2.1.tgz"
             },
             "tunnel-agent": {
               "version": "0.4.2",
               "from": "tunnel-agent@>=0.4.0 <0.5.0",
-              "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.2.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.2.tgz"
             }
           }
         },
@@ -1841,77 +1565,65 @@
           "version": "0.3.1",
           "from": "request-progress@0.3.1",
           "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-0.3.1.tgz",
-          "dev": true,
           "dependencies": {
             "throttleit": {
               "version": "0.0.2",
               "from": "throttleit@>=0.0.2 <0.1.0",
-              "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-0.0.2.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-0.0.2.tgz"
             }
           }
         },
         "retry": {
           "version": "0.6.1",
           "from": "retry@0.6.1",
-          "resolved": "https://registry.npmjs.org/retry/-/retry-0.6.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/retry/-/retry-0.6.1.tgz"
         },
         "rimraf": {
           "version": "2.5.0",
           "from": "rimraf@>=2.2.8 <3.0.0",
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.5.0.tgz",
-          "dev": true,
           "dependencies": {
             "glob": {
               "version": "6.0.3",
               "from": "glob@>=6.0.1 <7.0.0",
               "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.3.tgz",
-              "dev": true,
               "dependencies": {
                 "inflight": {
                   "version": "1.0.4",
                   "from": "inflight@>=1.0.4 <2.0.0",
                   "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                  "dev": true,
                   "dependencies": {
                     "wrappy": {
                       "version": "1.0.1",
                       "from": "wrappy@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
                     }
                   }
                 },
                 "inherits": {
                   "version": "2.0.1",
                   "from": "inherits@>=2.0.0 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
                 },
                 "minimatch": {
                   "version": "3.0.0",
                   "from": "minimatch@>=2.0.0 <3.0.0||>=3.0.0 <4.0.0",
                   "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.0.tgz",
-                  "dev": true,
                   "dependencies": {
                     "brace-expansion": {
                       "version": "1.1.2",
                       "from": "brace-expansion@>=1.0.0 <2.0.0",
                       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.2.tgz",
-                      "dev": true,
                       "dependencies": {
                         "balanced-match": {
                           "version": "0.3.0",
                           "from": "balanced-match@>=0.3.0 <0.4.0",
-                          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.3.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.3.0.tgz"
                         },
                         "concat-map": {
                           "version": "0.0.1",
                           "from": "concat-map@0.0.1",
-                          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
                         }
                       }
                     }
@@ -1921,21 +1633,18 @@
                   "version": "1.3.3",
                   "from": "once@>=1.3.0 <2.0.0",
                   "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-                  "dev": true,
                   "dependencies": {
                     "wrappy": {
                       "version": "1.0.1",
                       "from": "wrappy@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
                     }
                   }
                 },
                 "path-is-absolute": {
                   "version": "1.0.0",
                   "from": "path-is-absolute@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.0.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.0.tgz"
                 }
               }
             }
@@ -1944,76 +1653,64 @@
         "semver": {
           "version": "2.3.2",
           "from": "semver@>=2.3.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz"
         },
         "shell-quote": {
           "version": "1.4.3",
           "from": "shell-quote@>=1.4.2 <2.0.0",
           "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.4.3.tgz",
-          "dev": true,
           "dependencies": {
             "array-filter": {
               "version": "0.0.1",
               "from": "array-filter@>=0.0.0 <0.1.0",
-              "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz"
             },
             "array-map": {
               "version": "0.0.0",
               "from": "array-map@>=0.0.0 <0.1.0",
-              "resolved": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz"
             },
             "array-reduce": {
               "version": "0.0.0",
               "from": "array-reduce@>=0.0.0 <0.1.0",
-              "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz"
             },
             "jsonify": {
               "version": "0.0.0",
               "from": "jsonify@>=0.0.0 <0.1.0",
-              "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz"
             }
           }
         },
         "stringify-object": {
           "version": "1.0.1",
           "from": "stringify-object@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-1.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-1.0.1.tgz"
         },
         "tar-fs": {
           "version": "1.9.0",
           "from": "tar-fs@>=1.4.1 <2.0.0",
           "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-1.9.0.tgz",
-          "dev": true,
           "dependencies": {
             "pump": {
               "version": "1.0.1",
               "from": "pump@>=1.0.0 <2.0.0",
               "resolved": "https://registry.npmjs.org/pump/-/pump-1.0.1.tgz",
-              "dev": true,
               "dependencies": {
                 "end-of-stream": {
                   "version": "1.1.0",
                   "from": "end-of-stream@>=1.1.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz"
                 },
                 "once": {
                   "version": "1.3.3",
                   "from": "once@>=1.3.1 <2.0.0",
                   "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-                  "dev": true,
                   "dependencies": {
                     "wrappy": {
                       "version": "1.0.1",
                       "from": "wrappy@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
                     }
                   }
                 }
@@ -2023,31 +1720,26 @@
               "version": "1.3.1",
               "from": "tar-stream@>=1.1.2 <2.0.0",
               "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.3.1.tgz",
-              "dev": true,
               "dependencies": {
                 "bl": {
                   "version": "1.0.0",
                   "from": "bl@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/bl/-/bl-1.0.0.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/bl/-/bl-1.0.0.tgz"
                 },
                 "end-of-stream": {
                   "version": "1.1.0",
                   "from": "end-of-stream@>=1.1.0 <2.0.0",
                   "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-                  "dev": true,
                   "dependencies": {
                     "once": {
                       "version": "1.3.3",
                       "from": "once@>=1.3.0 <1.4.0",
                       "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-                      "dev": true,
                       "dependencies": {
                         "wrappy": {
                           "version": "1.0.1",
                           "from": "wrappy@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
                         }
                       }
                     }
@@ -2057,51 +1749,43 @@
                   "version": "2.0.5",
                   "from": "readable-stream@>=2.0.0 <3.0.0",
                   "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.5.tgz",
-                  "dev": true,
                   "dependencies": {
                     "core-util-is": {
                       "version": "1.0.2",
                       "from": "core-util-is@>=1.0.0 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
                     },
                     "inherits": {
                       "version": "2.0.1",
                       "from": "inherits@>=2.0.1 <2.1.0",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
                     },
                     "isarray": {
                       "version": "0.0.1",
                       "from": "isarray@0.0.1",
-                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
                     },
                     "process-nextick-args": {
                       "version": "1.0.6",
                       "from": "process-nextick-args@>=1.0.6 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.6.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.6.tgz"
                     },
                     "string_decoder": {
                       "version": "0.10.31",
                       "from": "string_decoder@>=0.10.0 <0.11.0",
-                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
                     },
                     "util-deprecate": {
                       "version": "1.0.2",
                       "from": "util-deprecate@>=1.0.1 <1.1.0",
-                      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
                     }
                   }
                 },
                 "xtend": {
                   "version": "4.0.1",
                   "from": "xtend@>=4.0.0 <5.0.0",
-                  "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz"
                 }
               }
             }
@@ -2110,76 +1794,64 @@
         "tmp": {
           "version": "0.0.24",
           "from": "tmp@0.0.24",
-          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.24.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.24.tgz"
         },
         "update-notifier": {
           "version": "0.6.0",
           "from": "update-notifier@>=0.6.0 <0.7.0",
           "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-0.6.0.tgz",
-          "dev": true,
           "dependencies": {
             "configstore": {
               "version": "1.4.0",
               "from": "configstore@>=1.0.0 <2.0.0",
               "resolved": "https://registry.npmjs.org/configstore/-/configstore-1.4.0.tgz",
-              "dev": true,
               "dependencies": {
                 "graceful-fs": {
                   "version": "4.1.2",
                   "from": "graceful-fs@>=4.1.2 <5.0.0",
-                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
                 },
                 "object-assign": {
                   "version": "4.0.1",
                   "from": "object-assign@>=4.0.1 <5.0.0",
-                  "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.0.1.tgz"
                 },
                 "os-tmpdir": {
                   "version": "1.0.1",
                   "from": "os-tmpdir@>=1.0.0 <2.0.0",
-                  "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.1.tgz"
                 },
                 "osenv": {
                   "version": "0.1.3",
                   "from": "osenv@>=0.1.0 <0.2.0",
                   "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.3.tgz",
-                  "dev": true,
                   "dependencies": {
                     "os-homedir": {
                       "version": "1.0.1",
                       "from": "os-homedir@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz"
                     }
                   }
                 },
                 "uuid": {
                   "version": "2.0.1",
                   "from": "uuid@>=2.0.1 <3.0.0",
-                  "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.1.tgz"
                 },
                 "write-file-atomic": {
                   "version": "1.1.4",
                   "from": "write-file-atomic@>=1.1.2 <2.0.0",
                   "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-1.1.4.tgz",
-                  "dev": true,
                   "dependencies": {
                     "imurmurhash": {
                       "version": "0.1.4",
                       "from": "imurmurhash@>=0.1.4 <0.2.0",
-                      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
                     },
                     "slide": {
                       "version": "1.1.6",
                       "from": "slide@>=1.1.5 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz"
                     }
                   }
                 },
@@ -2187,13 +1859,11 @@
                   "version": "2.0.0",
                   "from": "xdg-basedir@>=2.0.0 <3.0.0",
                   "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",
-                  "dev": true,
                   "dependencies": {
                     "os-homedir": {
                       "version": "1.0.1",
                       "from": "os-homedir@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz"
                     }
                   }
                 }
@@ -2202,44 +1872,37 @@
             "is-npm": {
               "version": "1.0.0",
               "from": "is-npm@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz"
             },
             "latest-version": {
               "version": "2.0.0",
               "from": "latest-version@>=2.0.0 <3.0.0",
               "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-2.0.0.tgz",
-              "dev": true,
               "dependencies": {
                 "package-json": {
                   "version": "2.3.0",
                   "from": "package-json@>=2.0.0 <3.0.0",
                   "resolved": "https://registry.npmjs.org/package-json/-/package-json-2.3.0.tgz",
-                  "dev": true,
                   "dependencies": {
                     "got": {
                       "version": "5.3.0",
                       "from": "got@>=5.0.0 <6.0.0",
                       "resolved": "https://registry.npmjs.org/got/-/got-5.3.0.tgz",
-                      "dev": true,
                       "dependencies": {
                         "create-error-class": {
                           "version": "2.0.1",
                           "from": "create-error-class@>=2.0.0 <3.0.0",
                           "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-2.0.1.tgz",
-                          "dev": true,
                           "dependencies": {
                             "capture-stack-trace": {
                               "version": "1.0.0",
                               "from": "capture-stack-trace@>=1.0.0 <2.0.0",
-                              "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz",
-                              "dev": true
+                              "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz"
                             },
                             "inherits": {
                               "version": "2.0.1",
                               "from": "inherits@>=2.0.1 <3.0.0",
-                              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                              "dev": true
+                              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
                             }
                           }
                         },
@@ -2247,25 +1910,21 @@
                           "version": "3.4.2",
                           "from": "duplexify@>=3.2.0 <4.0.0",
                           "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.4.2.tgz",
-                          "dev": true,
                           "dependencies": {
                             "end-of-stream": {
                               "version": "1.0.0",
                               "from": "end-of-stream@1.0.0",
                               "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.0.0.tgz",
-                              "dev": true,
                               "dependencies": {
                                 "once": {
                                   "version": "1.3.3",
                                   "from": "once@>=1.3.0 <1.4.0",
                                   "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-                                  "dev": true,
                                   "dependencies": {
                                     "wrappy": {
                                       "version": "1.0.1",
                                       "from": "wrappy@>=1.0.0 <2.0.0",
-                                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                                      "dev": true
+                                      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
                                     }
                                   }
                                 }
@@ -2275,43 +1934,36 @@
                               "version": "2.0.5",
                               "from": "readable-stream@>=2.0.0 <3.0.0",
                               "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.5.tgz",
-                              "dev": true,
                               "dependencies": {
                                 "core-util-is": {
                                   "version": "1.0.2",
                                   "from": "core-util-is@>=1.0.0 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
                                 },
                                 "inherits": {
                                   "version": "2.0.1",
                                   "from": "inherits@>=2.0.1 <2.1.0",
-                                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
                                 },
                                 "isarray": {
                                   "version": "0.0.1",
                                   "from": "isarray@0.0.1",
-                                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
                                 },
                                 "process-nextick-args": {
                                   "version": "1.0.6",
                                   "from": "process-nextick-args@>=1.0.6 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.6.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.6.tgz"
                                 },
                                 "string_decoder": {
                                   "version": "0.10.31",
                                   "from": "string_decoder@>=0.10.0 <0.11.0",
-                                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
                                 },
                                 "util-deprecate": {
                                   "version": "1.0.2",
                                   "from": "util-deprecate@>=1.0.1 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
                                 }
                               }
                             }
@@ -2320,56 +1972,47 @@
                         "is-plain-obj": {
                           "version": "1.1.0",
                           "from": "is-plain-obj@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz"
                         },
                         "is-redirect": {
                           "version": "1.0.0",
                           "from": "is-redirect@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz"
                         },
                         "is-stream": {
                           "version": "1.0.1",
                           "from": "is-stream@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.0.1.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.0.1.tgz"
                         },
                         "lowercase-keys": {
                           "version": "1.0.0",
                           "from": "lowercase-keys@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz"
                         },
                         "node-status-codes": {
                           "version": "1.0.0",
                           "from": "node-status-codes@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz"
                         },
                         "object-assign": {
                           "version": "4.0.1",
                           "from": "object-assign@>=4.0.1 <5.0.0",
-                          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.0.1.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.0.1.tgz"
                         },
                         "parse-json": {
                           "version": "2.2.0",
                           "from": "parse-json@>=2.1.0 <3.0.0",
                           "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-                          "dev": true,
                           "dependencies": {
                             "error-ex": {
                               "version": "1.3.0",
                               "from": "error-ex@>=1.2.0 <2.0.0",
                               "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.0.tgz",
-                              "dev": true,
                               "dependencies": {
                                 "is-arrayish": {
                                   "version": "0.2.1",
                                   "from": "is-arrayish@>=0.2.1 <0.3.0",
-                                  "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
                                 }
                               }
                             }
@@ -2379,13 +2022,11 @@
                           "version": "2.0.0",
                           "from": "pinkie-promise@>=2.0.0 <3.0.0",
                           "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.0.tgz",
-                          "dev": true,
                           "dependencies": {
                             "pinkie": {
                               "version": "2.0.1",
                               "from": "pinkie@>=2.0.0 <3.0.0",
-                              "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.1.tgz",
-                              "dev": true
+                              "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.1.tgz"
                             }
                           }
                         },
@@ -2393,19 +2034,16 @@
                           "version": "3.0.1",
                           "from": "read-all-stream@>=3.0.0 <4.0.0",
                           "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.0.1.tgz",
-                          "dev": true,
                           "dependencies": {
                             "pinkie-promise": {
                               "version": "1.0.0",
                               "from": "pinkie-promise@>=1.0.0 <2.0.0",
                               "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-1.0.0.tgz",
-                              "dev": true,
                               "dependencies": {
                                 "pinkie": {
                                   "version": "1.0.0",
                                   "from": "pinkie@>=1.0.0 <2.0.0",
-                                  "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-1.0.0.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-1.0.0.tgz"
                                 }
                               }
                             },
@@ -2413,43 +2051,36 @@
                               "version": "2.0.5",
                               "from": "readable-stream@>=2.0.0 <3.0.0",
                               "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.5.tgz",
-                              "dev": true,
                               "dependencies": {
                                 "core-util-is": {
                                   "version": "1.0.2",
                                   "from": "core-util-is@>=1.0.0 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
                                 },
                                 "inherits": {
                                   "version": "2.0.1",
                                   "from": "inherits@>=2.0.1 <2.1.0",
-                                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
                                 },
                                 "isarray": {
                                   "version": "0.0.1",
                                   "from": "isarray@0.0.1",
-                                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
                                 },
                                 "process-nextick-args": {
                                   "version": "1.0.6",
                                   "from": "process-nextick-args@>=1.0.6 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.6.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.6.tgz"
                                 },
                                 "string_decoder": {
                                   "version": "0.10.31",
                                   "from": "string_decoder@>=0.10.0 <0.11.0",
-                                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
                                 },
                                 "util-deprecate": {
                                   "version": "1.0.2",
                                   "from": "util-deprecate@>=1.0.1 <1.1.0",
-                                  "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-                                  "dev": true
+                                  "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
                                 }
                               }
                             }
@@ -2458,26 +2089,22 @@
                         "timed-out": {
                           "version": "2.0.0",
                           "from": "timed-out@>=2.0.0 <3.0.0",
-                          "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-2.0.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-2.0.0.tgz"
                         },
                         "unzip-response": {
                           "version": "1.0.0",
                           "from": "unzip-response@>=1.0.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-1.0.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-1.0.0.tgz"
                         },
                         "url-parse-lax": {
                           "version": "1.0.0",
                           "from": "url-parse-lax@>=1.0.0 <2.0.0",
                           "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
-                          "dev": true,
                           "dependencies": {
                             "prepend-http": {
                               "version": "1.0.3",
                               "from": "prepend-http@>=1.0.1 <2.0.0",
-                              "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.3.tgz",
-                              "dev": true
+                              "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.3.tgz"
                             }
                           }
                         }
@@ -2487,45 +2114,38 @@
                       "version": "1.1.6",
                       "from": "rc@>=1.1.2 <2.0.0",
                       "resolved": "https://registry.npmjs.org/rc/-/rc-1.1.6.tgz",
-                      "dev": true,
                       "dependencies": {
                         "deep-extend": {
                           "version": "0.4.0",
                           "from": "deep-extend@>=0.4.0 <0.5.0",
-                          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.0.tgz"
                         },
                         "ini": {
                           "version": "1.3.4",
                           "from": "ini@>=1.3.0 <1.4.0",
-                          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz"
                         },
                         "minimist": {
                           "version": "1.2.0",
                           "from": "minimist@>=1.2.0 <2.0.0",
-                          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz"
                         },
                         "strip-json-comments": {
                           "version": "1.0.4",
                           "from": "strip-json-comments@>=1.0.4 <1.1.0",
-                          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz"
                         }
                       }
                     },
                     "registry-url": {
                       "version": "3.0.3",
                       "from": "registry-url@>=3.0.3 <4.0.0",
-                      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.0.3.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.0.3.tgz"
                     },
                     "semver": {
                       "version": "5.1.0",
                       "from": "semver@>=5.1.0 <6.0.0",
-                      "resolved": "https://registry.npmjs.org/semver/-/semver-5.1.0.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/semver/-/semver-5.1.0.tgz"
                     }
                   }
                 }
@@ -2535,19 +2155,16 @@
               "version": "2.0.0",
               "from": "repeating@>=2.0.0 <3.0.0",
               "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.0.tgz",
-              "dev": true,
               "dependencies": {
                 "is-finite": {
                   "version": "1.0.1",
                   "from": "is-finite@>=1.0.0 <2.0.0",
                   "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.1.tgz",
-                  "dev": true,
                   "dependencies": {
                     "number-is-nan": {
                       "version": "1.0.0",
                       "from": "number-is-nan@>=1.0.0 <2.0.0",
-                      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.0.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.0.tgz"
                     }
                   }
                 }
@@ -2557,13 +2174,11 @@
               "version": "2.1.0",
               "from": "semver-diff@>=2.0.0 <3.0.0",
               "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz",
-              "dev": true,
               "dependencies": {
                 "semver": {
                   "version": "5.1.0",
                   "from": "semver@>=5.0.3 <6.0.0",
-                  "resolved": "https://registry.npmjs.org/semver/-/semver-5.1.0.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/semver/-/semver-5.1.0.tgz"
                 }
               }
             },
@@ -2571,19 +2186,16 @@
               "version": "1.0.1",
               "from": "string-length@>=1.0.0 <2.0.0",
               "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
-              "dev": true,
               "dependencies": {
                 "strip-ansi": {
                   "version": "3.0.0",
                   "from": "strip-ansi@>=3.0.0 <4.0.0",
                   "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz",
-                  "dev": true,
                   "dependencies": {
                     "ansi-regex": {
                       "version": "2.0.0",
                       "from": "ansi-regex@>=2.0.0 <3.0.0",
-                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
                     }
                   }
                 }
@@ -2594,26 +2206,22 @@
         "user-home": {
           "version": "1.1.1",
           "from": "user-home@>=1.1.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz"
         },
         "which": {
           "version": "1.2.1",
           "from": "which@>=1.0.8 <2.0.0",
           "resolved": "https://registry.npmjs.org/which/-/which-1.2.1.tgz",
-          "dev": true,
           "dependencies": {
             "is-absolute": {
               "version": "0.1.7",
               "from": "is-absolute@>=0.1.7 <0.2.0",
               "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.1.7.tgz",
-              "dev": true,
               "dependencies": {
                 "is-relative": {
                   "version": "0.1.3",
                   "from": "is-relative@>=0.1.0 <0.2.0",
-                  "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.1.3.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.1.3.tgz"
                 }
               }
             }
@@ -2625,191 +2233,177 @@
       "version": "0.6.0",
       "from": "boxen@>=0.6.0 <0.7.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-0.6.0.tgz",
-      "dev": true,
       "dependencies": {
         "camelcase": {
           "version": "2.1.1",
           "from": "camelcase@>=2.1.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz"
         }
       }
     },
     "brace-expansion": {
       "version": "1.1.6",
       "from": "brace-expansion@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.6.tgz"
     },
     "braces": {
       "version": "1.8.3",
       "from": "braces@>=1.8.2 <2.0.0",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.3.tgz"
+    },
+    "browser-resolve": {
+      "version": "1.11.2",
+      "from": "browser-resolve@>=1.11.0 <2.0.0",
+      "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.2.tgz",
+      "dependencies": {
+        "resolve": {
+          "version": "1.1.7",
+          "from": "resolve@1.1.7",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz"
+        }
+      }
     },
     "browserify-zlib": {
       "version": "0.1.4",
       "from": "browserify-zlib@>=0.1.2 <0.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz"
     },
     "browserstack": {
       "version": "1.2.0",
       "from": "browserstack@1.2.0",
-      "resolved": "https://registry.npmjs.org/browserstack/-/browserstack-1.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/browserstack/-/browserstack-1.2.0.tgz"
     },
     "browserstacktunnel-wrapper": {
       "version": "1.4.2",
       "from": "browserstacktunnel-wrapper@>=1.4.2 <2.0.0",
-      "resolved": "https://registry.npmjs.org/browserstacktunnel-wrapper/-/browserstacktunnel-wrapper-1.4.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/browserstacktunnel-wrapper/-/browserstacktunnel-wrapper-1.4.2.tgz"
     },
     "buffer": {
       "version": "4.9.1",
       "from": "buffer@>=4.9.0 <5.0.0",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
-      "dev": true,
       "dependencies": {
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         }
       }
     },
     "buffer-crc32": {
       "version": "0.2.5",
       "from": "buffer-crc32@>=0.2.1 <0.3.0",
-      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.5.tgz"
     },
     "buffer-shims": {
       "version": "1.0.0",
       "from": "buffer-shims@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz"
     },
     "buffers": {
       "version": "0.1.1",
       "from": "buffers@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz"
     },
     "builtin-modules": {
       "version": "1.1.1",
       "from": "builtin-modules@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz"
+    },
+    "bytebuffer": {
+      "version": "5.0.1",
+      "from": "bytebuffer@>=5.0.0 <6.0.0",
+      "resolved": "https://registry.npmjs.org/bytebuffer/-/bytebuffer-5.0.1.tgz"
     },
     "bytes": {
       "version": "2.1.0",
       "from": "bytes@2.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.1.0.tgz"
     },
     "callsite": {
       "version": "1.0.0",
       "from": "callsite@1.0.0",
-      "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz"
     },
     "camel-case": {
       "version": "3.0.0",
       "from": "camel-case@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz"
     },
     "camelcase": {
       "version": "2.0.1",
       "from": "camelcase@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.0.1.tgz"
     },
     "camelcase-keys": {
       "version": "2.0.0",
       "from": "camelcase-keys@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.0.0.tgz"
     },
     "canonical-path": {
       "version": "0.0.2",
       "from": "canonical-path@>=0.0.2 <0.0.3",
-      "resolved": "https://registry.npmjs.org/canonical-path/-/canonical-path-0.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/canonical-path/-/canonical-path-0.0.2.tgz"
     },
     "capture-stack-trace": {
       "version": "1.0.0",
       "from": "capture-stack-trace@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz"
     },
     "caseless": {
       "version": "0.11.0",
       "from": "caseless@>=0.11.0 <0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz"
     },
     "catharsis": {
       "version": "0.8.8",
       "from": "catharsis@>=0.8.1 <0.9.0",
-      "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.8.8.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.8.8.tgz"
     },
     "center-align": {
       "version": "0.1.2",
       "from": "center-align@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.2.tgz"
     },
     "chainsaw": {
       "version": "0.1.0",
       "from": "chainsaw@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz"
     },
     "chalk": {
       "version": "1.1.3",
       "from": "chalk@>=1.1.3 <2.0.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz"
     },
     "change-case": {
       "version": "3.0.0",
       "from": "change-case@3.0.0",
-      "resolved": "https://registry.npmjs.org/change-case/-/change-case-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-3.0.0.tgz"
     },
     "chokidar": {
       "version": "1.4.2",
       "from": "chokidar@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.4.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.4.2.tgz"
     },
     "ci-info": {
       "version": "1.0.0",
       "from": "ci-info@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.0.0.tgz"
     },
     "clang-format": {
       "version": "1.0.41",
       "from": "clang-format@1.0.41",
       "resolved": "https://registry.npmjs.org/clang-format/-/clang-format-1.0.41.tgz",
-      "dev": true,
       "dependencies": {
         "async": {
           "version": "1.5.2",
           "from": "async@>=1.5.2 <2.0.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz"
         },
         "glob": {
           "version": "7.0.3",
           "from": "glob@>=7.0.0 <8.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.3.tgz"
         }
       }
     },
@@ -2817,159 +2411,144 @@
       "version": "3.5.2",
       "from": "cldr@>=3.5.0 <4.0.0",
       "resolved": "https://registry.npmjs.org/cldr/-/cldr-3.5.2.tgz",
-      "dev": true,
       "dependencies": {
         "uglify-js": {
           "version": "1.3.3",
           "from": "uglify-js@1.3.3",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-1.3.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-1.3.3.tgz"
         },
         "underscore": {
           "version": "1.3.3",
           "from": "underscore@1.3.3",
-          "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.3.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.3.3.tgz"
         }
       }
     },
     "cli-boxes": {
       "version": "1.0.0",
       "from": "cli-boxes@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz"
     },
     "cli-color": {
       "version": "1.1.0",
       "from": "cli-color@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/cli-color/-/cli-color-1.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
           "version": "2.0.0",
           "from": "ansi-regex@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
         }
       }
     },
     "cli-cursor": {
       "version": "1.0.2",
       "from": "cli-cursor@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz"
     },
     "cli-width": {
       "version": "2.1.0",
       "from": "cli-width@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.1.0.tgz"
     },
     "cliui": {
       "version": "3.1.0",
       "from": "cliui@>=3.0.3 <4.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
           "version": "2.0.0",
           "from": "ansi-regex@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
         },
         "strip-ansi": {
           "version": "3.0.0",
           "from": "strip-ansi@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz"
         }
       }
     },
     "clone": {
       "version": "1.0.2",
       "from": "clone@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz"
     },
     "clone-stats": {
       "version": "0.0.1",
       "from": "clone-stats@>=0.0.1 <0.0.2",
-      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz"
     },
     "cmd-shim": {
       "version": "2.0.2",
       "from": "cmd-shim@>=2.0.1 <3.0.0",
       "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-2.0.2.tgz",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
           "version": "4.1.11",
           "from": "graceful-fs@>=4.1.2 <5.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz"
         }
       }
     },
+    "co": {
+      "version": "4.6.0",
+      "from": "co@>=4.6.0 <5.0.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
+    },
     "code-point-at": {
       "version": "1.0.0",
       "from": "code-point-at@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.0.0.tgz"
     },
     "colors": {
       "version": "1.1.2",
       "from": "colors@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz"
+    },
+    "colour": {
+      "version": "0.7.1",
+      "from": "colour@>=0.7.1 <0.8.0",
+      "resolved": "https://registry.npmjs.org/colour/-/colour-0.7.1.tgz"
     },
     "combined-stream": {
       "version": "1.0.5",
       "from": "combined-stream@>=1.0.5 <1.1.0",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz"
     },
     "commander": {
       "version": "2.9.0",
       "from": "commander@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz"
     },
     "compare-func": {
       "version": "1.3.2",
       "from": "compare-func@>=1.3.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-1.3.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-1.3.2.tgz"
     },
     "component-bind": {
       "version": "1.0.0",
       "from": "component-bind@1.0.0",
-      "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz"
     },
     "component-emitter": {
       "version": "1.1.2",
       "from": "component-emitter@1.1.2",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.1.2.tgz"
     },
     "component-inherit": {
       "version": "0.0.3",
       "from": "component-inherit@0.0.3",
-      "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz"
     },
     "compress-commons": {
       "version": "0.2.9",
       "from": "compress-commons@>=0.2.0 <0.3.0",
       "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-0.2.9.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "1.0.33",
           "from": "readable-stream@>=1.0.26 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz"
         }
       }
     },
@@ -2977,51 +2556,43 @@
       "version": "2.0.6",
       "from": "compressible@>=2.0.5 <2.1.0",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.6.tgz",
-      "dev": true,
       "dependencies": {
         "mime-db": {
           "version": "1.20.0",
           "from": "mime-db@1.20.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.20.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.20.0.tgz"
         }
       }
     },
     "compression": {
       "version": "1.5.2",
       "from": "compression@>=1.5.2 <1.6.0",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.5.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.5.2.tgz"
     },
     "concat-map": {
       "version": "0.0.1",
       "from": "concat-map@0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
     },
     "concat-stream": {
       "version": "1.6.0",
       "from": "concat-stream@>=1.4.7 <2.0.0",
       "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.0.tgz",
-      "dev": true,
       "dependencies": {
         "inherits": {
           "version": "2.0.3",
           "from": "inherits@>=2.0.3 <3.0.0",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
         },
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
           "version": "2.2.2",
           "from": "readable-stream@>=2.2.2 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
         }
       }
     },
@@ -3029,243 +2600,204 @@
       "version": "2.1.0",
       "from": "configstore@>=2.0.0 <3.0.0",
       "resolved": "https://registry.npmjs.org/configstore/-/configstore-2.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
           "version": "4.1.11",
           "from": "graceful-fs@>=4.1.2 <5.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz"
         }
       }
     },
     "connect": {
       "version": "3.4.0",
       "from": "connect@>=3.2.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/connect/-/connect-3.4.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.4.0.tgz"
     },
     "connect-livereload": {
       "version": "0.5.4",
       "from": "connect-livereload@>=0.5.4 <0.6.0",
-      "resolved": "https://registry.npmjs.org/connect-livereload/-/connect-livereload-0.5.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/connect-livereload/-/connect-livereload-0.5.4.tgz"
     },
     "connect-timeout": {
       "version": "1.6.2",
       "from": "connect-timeout@>=1.6.2 <1.7.0",
-      "resolved": "https://registry.npmjs.org/connect-timeout/-/connect-timeout-1.6.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/connect-timeout/-/connect-timeout-1.6.2.tgz"
     },
     "console-browserify": {
       "version": "1.1.0",
       "from": "console-browserify@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz"
     },
     "console-control-strings": {
       "version": "1.1.0",
       "from": "console-control-strings@>=1.1.0 <1.2.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz"
     },
     "constant-case": {
       "version": "2.0.0",
       "from": "constant-case@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-2.0.0.tgz"
     },
     "constants-browserify": {
       "version": "0.0.1",
       "from": "constants-browserify@>=0.0.1 <0.1.0",
-      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-0.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-0.0.1.tgz"
     },
     "content-type": {
       "version": "1.0.1",
       "from": "content-type@>=1.0.1 <1.1.0",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.1.tgz"
     },
     "conventional-changelog": {
       "version": "1.1.0",
       "from": "conventional-changelog@latest",
-      "resolved": "https://registry.npmjs.org/conventional-changelog/-/conventional-changelog-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/conventional-changelog/-/conventional-changelog-1.1.0.tgz"
     },
     "conventional-changelog-angular": {
       "version": "1.3.0",
       "from": "conventional-changelog-angular@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-1.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-1.3.0.tgz"
     },
     "conventional-changelog-atom": {
       "version": "0.1.0",
       "from": "conventional-changelog-atom@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-atom/-/conventional-changelog-atom-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/conventional-changelog-atom/-/conventional-changelog-atom-0.1.0.tgz"
     },
     "conventional-changelog-codemirror": {
       "version": "0.1.0",
       "from": "conventional-changelog-codemirror@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.1.0.tgz"
     },
     "conventional-changelog-core": {
       "version": "1.5.0",
       "from": "conventional-changelog-core@>=1.3.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-1.5.0.tgz",
-      "dev": true,
       "dependencies": {
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "lodash": {
           "version": "4.14.2",
           "from": "lodash@>=4.0.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.14.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.14.2.tgz"
         },
         "readable-stream": {
           "version": "2.0.6",
           "from": "readable-stream@2.0.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz"
         },
         "through2": {
           "version": "2.0.1",
           "from": "through2@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz"
         }
       }
     },
     "conventional-changelog-ember": {
       "version": "0.2.2",
       "from": "conventional-changelog-ember@>=0.2.0 <0.3.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-ember/-/conventional-changelog-ember-0.2.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/conventional-changelog-ember/-/conventional-changelog-ember-0.2.2.tgz"
     },
     "conventional-changelog-eslint": {
       "version": "0.1.0",
       "from": "conventional-changelog-eslint@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-eslint/-/conventional-changelog-eslint-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/conventional-changelog-eslint/-/conventional-changelog-eslint-0.1.0.tgz"
     },
     "conventional-changelog-express": {
       "version": "0.1.0",
       "from": "conventional-changelog-express@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-express/-/conventional-changelog-express-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/conventional-changelog-express/-/conventional-changelog-express-0.1.0.tgz"
     },
     "conventional-changelog-jquery": {
       "version": "0.1.0",
       "from": "conventional-changelog-jquery@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-jquery/-/conventional-changelog-jquery-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/conventional-changelog-jquery/-/conventional-changelog-jquery-0.1.0.tgz"
     },
     "conventional-changelog-jscs": {
       "version": "0.1.0",
       "from": "conventional-changelog-jscs@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-jscs/-/conventional-changelog-jscs-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/conventional-changelog-jscs/-/conventional-changelog-jscs-0.1.0.tgz"
     },
     "conventional-changelog-jshint": {
       "version": "0.1.0",
       "from": "conventional-changelog-jshint@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-jshint/-/conventional-changelog-jshint-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/conventional-changelog-jshint/-/conventional-changelog-jshint-0.1.0.tgz"
     },
     "conventional-changelog-writer": {
       "version": "1.4.1",
       "from": "conventional-changelog-writer@>=1.1.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-1.4.1.tgz",
-      "dev": true,
       "dependencies": {
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "lodash": {
           "version": "4.14.2",
           "from": "lodash@4.14.2",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.14.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.14.2.tgz"
         },
         "readable-stream": {
           "version": "2.0.6",
           "from": "readable-stream@>=2.0.0 <2.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz"
         },
         "through2": {
           "version": "2.0.1",
           "from": "through2@2.0.1",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz"
         }
       }
     },
     "conventional-commits-filter": {
       "version": "1.0.0",
       "from": "conventional-commits-filter@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-1.0.0.tgz"
     },
     "conventional-commits-parser": {
       "version": "1.2.3",
       "from": "conventional-commits-parser@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-1.2.3.tgz",
-      "dev": true,
       "dependencies": {
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "lodash": {
           "version": "4.14.2",
           "from": "lodash@4.14.2",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.14.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.14.2.tgz"
         },
         "readable-stream": {
           "version": "2.0.6",
           "from": "readable-stream@2.0.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz"
         },
         "through2": {
           "version": "2.0.1",
           "from": "through2@2.0.1",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz"
         }
       }
     },
     "cookie": {
       "version": "0.1.3",
       "from": "cookie@0.1.3",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.1.3.tgz"
     },
     "cookie-parser": {
       "version": "1.3.5",
       "from": "cookie-parser@>=1.3.5 <1.4.0",
-      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.3.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.3.5.tgz"
     },
     "cookie-signature": {
       "version": "1.0.6",
       "from": "cookie-signature@1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
     },
     "core-js": {
       "version": "2.4.1",
@@ -3275,371 +2807,310 @@
     "core-util-is": {
       "version": "1.0.2",
       "from": "core-util-is@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
     },
     "cors": {
       "version": "2.7.1",
       "from": "cors@>=2.7.1 <3.0.0",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.7.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.7.1.tgz"
     },
     "crc": {
       "version": "3.3.0",
       "from": "crc@3.3.0",
-      "resolved": "https://registry.npmjs.org/crc/-/crc-3.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/crc/-/crc-3.3.0.tgz"
     },
     "crc32-stream": {
       "version": "0.3.4",
       "from": "crc32-stream@>=0.3.1 <0.4.0",
       "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-0.3.4.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "1.0.33",
           "from": "readable-stream@>=1.0.24 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz"
         }
       }
     },
     "create-error-class": {
       "version": "3.0.2",
       "from": "create-error-class@>=3.0.1 <4.0.0",
-      "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz"
     },
     "cryptiles": {
       "version": "2.0.5",
       "from": "cryptiles@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz"
     },
     "crypto-browserify": {
       "version": "3.2.8",
       "from": "crypto-browserify@>=3.2.6 <3.3.0",
-      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.2.8.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.2.8.tgz"
     },
     "csrf": {
       "version": "3.0.0",
       "from": "csrf@>=3.0.0 <3.1.0",
-      "resolved": "https://registry.npmjs.org/csrf/-/csrf-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/csrf/-/csrf-3.0.0.tgz"
     },
     "csurf": {
       "version": "1.8.3",
       "from": "csurf@>=1.8.3 <1.9.0",
-      "resolved": "https://registry.npmjs.org/csurf/-/csurf-1.8.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/csurf/-/csurf-1.8.3.tgz"
     },
     "ctype": {
       "version": "0.5.3",
       "from": "ctype@0.5.3",
-      "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ctype/-/ctype-0.5.3.tgz"
     },
     "custom-event": {
       "version": "1.0.0",
       "from": "custom-event@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.0.tgz"
     },
     "cycle": {
       "version": "1.0.3",
       "from": "cycle@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz"
     },
     "d": {
       "version": "0.1.1",
       "from": "d@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/d/-/d-0.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/d/-/d-0.1.1.tgz"
     },
     "dargs": {
       "version": "4.1.0",
       "from": "dargs@>=4.0.1 <5.0.0",
-      "resolved": "https://registry.npmjs.org/dargs/-/dargs-4.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/dargs/-/dargs-4.1.0.tgz"
     },
     "dashdash": {
       "version": "1.14.0",
       "from": "dashdash@>=1.12.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.0.tgz",
-      "dev": true,
       "dependencies": {
         "assert-plus": {
           "version": "1.0.0",
           "from": "assert-plus@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
         }
       }
     },
     "date-now": {
       "version": "0.1.4",
       "from": "date-now@>=0.1.4 <0.2.0",
-      "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz"
     },
     "dateformat": {
       "version": "1.0.12",
       "from": "dateformat@>=1.0.11 <2.0.0",
-      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.12.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.12.tgz"
     },
     "death": {
       "version": "1.1.0",
       "from": "death@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/death/-/death-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/death/-/death-1.1.0.tgz"
     },
     "debug": {
       "version": "2.2.0",
       "from": "debug@>=2.2.0 <2.3.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz"
     },
     "decamelize": {
       "version": "1.1.2",
       "from": "decamelize@>=1.1.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.1.2.tgz"
     },
     "deep-extend": {
       "version": "0.4.1",
       "from": "deep-extend@>=0.4.0 <0.5.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.1.tgz"
     },
     "defaults": {
       "version": "1.0.3",
       "from": "defaults@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz"
     },
     "del": {
       "version": "2.2.2",
       "from": "del@>=2.2.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/del/-/del-2.2.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/del/-/del-2.2.2.tgz"
     },
     "delayed-stream": {
       "version": "1.0.0",
       "from": "delayed-stream@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
     },
     "delegates": {
       "version": "1.0.0",
       "from": "delegates@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz"
     },
     "depd": {
       "version": "1.0.1",
       "from": "depd@>=1.0.1 <1.1.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.0.1.tgz"
     },
     "dependency-graph": {
       "version": "0.4.1",
       "from": "dependency-graph@>=0.4.1 <0.5.0",
-      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.4.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.4.1.tgz"
     },
     "deprecated": {
       "version": "0.0.1",
       "from": "deprecated@>=0.0.1 <0.0.2",
-      "resolved": "https://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz"
     },
     "destroy": {
       "version": "1.0.3",
       "from": "destroy@1.0.3",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.3.tgz"
     },
     "detect-indent": {
       "version": "4.0.0",
       "from": "detect-indent@>=4.0.0 <5.0.0",
-      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz"
     },
     "dgeni": {
       "version": "0.4.2",
       "from": "dgeni@>=0.4.2 <0.5.0",
-      "resolved": "https://registry.npmjs.org/dgeni/-/dgeni-0.4.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/dgeni/-/dgeni-0.4.2.tgz"
     },
     "dgeni-packages": {
       "version": "0.16.5",
       "from": "dgeni-packages@>=0.16.0 <0.17.0",
       "resolved": "https://registry.npmjs.org/dgeni-packages/-/dgeni-packages-0.16.5.tgz",
-      "dev": true,
       "dependencies": {
         "espree": {
           "version": "2.2.5",
           "from": "espree@>=2.2.3 <3.0.0",
-          "resolved": "https://registry.npmjs.org/espree/-/espree-2.2.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/espree/-/espree-2.2.5.tgz"
         },
         "glob": {
           "version": "7.1.1",
           "from": "glob@>=7.0.5 <8.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
         },
         "lodash": {
           "version": "4.17.4",
           "from": "lodash@>=4.13.1 <5.0.0",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz"
         },
         "semver": {
           "version": "5.3.0",
           "from": "semver@>=5.2.0 <6.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz"
         },
         "typescript": {
           "version": "1.8.10",
           "from": "typescript@>=1.7.5 <2.0.0",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-1.8.10.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-1.8.10.tgz"
         }
       }
     },
     "di": {
       "version": "0.0.1",
       "from": "di@>=0.0.1 <0.0.2",
-      "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz"
     },
     "diff": {
       "version": "2.2.1",
       "from": "diff@>=2.0.2 <3.0.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-2.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/diff/-/diff-2.2.1.tgz"
     },
     "doctrine": {
       "version": "0.7.2",
       "from": "doctrine@>=0.7.2 <0.8.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz"
     },
     "dom-serialize": {
       "version": "2.2.1",
       "from": "dom-serialize@>=2.2.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz"
     },
     "dom-serializer": {
       "version": "0.1.0",
       "from": "dom-serializer@>=0.0.0 <1.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "domelementtype": {
           "version": "1.1.3",
           "from": "domelementtype@>=1.1.1 <1.2.0",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz"
         }
       }
     },
     "domain-browser": {
       "version": "1.1.7",
       "from": "domain-browser@>=1.1.0 <1.2.0",
-      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz"
     },
     "domelementtype": {
       "version": "1.3.0",
       "from": "domelementtype@>=1.3.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz"
     },
     "domhandler": {
       "version": "2.3.0",
       "from": "domhandler@>=2.3.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz"
     },
     "domutils": {
       "version": "1.5.1",
       "from": "domutils@>=1.5.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz"
     },
     "dot-case": {
       "version": "2.1.0",
       "from": "dot-case@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-2.1.0.tgz"
     },
     "dot-prop": {
       "version": "3.0.0",
       "from": "dot-prop@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-3.0.0.tgz"
     },
     "duplexer": {
       "version": "0.1.1",
       "from": "duplexer@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz"
     },
     "duplexer2": {
       "version": "0.0.2",
       "from": "duplexer2@>=0.0.2 <0.1.0",
-      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz"
     },
     "ecc-jsbn": {
       "version": "0.1.1",
       "from": "ecc-jsbn@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
-      "dev": true,
-      "optional": true
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz"
     },
     "ee-first": {
       "version": "1.1.1",
       "from": "ee-first@1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
     },
     "end-of-stream": {
       "version": "1.1.0",
       "from": "end-of-stream@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz"
     },
     "engine.io": {
       "version": "1.6.9",
       "from": "engine.io@1.6.9",
       "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-1.6.9.tgz",
-      "dev": true,
       "dependencies": {
         "accepts": {
           "version": "1.1.4",
           "from": "accepts@1.1.4",
-          "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.1.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.1.4.tgz"
         },
         "negotiator": {
           "version": "0.4.9",
           "from": "negotiator@0.4.9",
-          "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.4.9.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.4.9.tgz"
         },
         "ws": {
           "version": "1.0.1",
           "from": "ws@1.0.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-1.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ws/-/ws-1.0.1.tgz"
         }
       }
     },
@@ -3647,13 +3118,11 @@
       "version": "1.6.9",
       "from": "engine.io-client@1.6.9",
       "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-1.6.9.tgz",
-      "dev": true,
       "dependencies": {
         "ws": {
           "version": "1.0.1",
           "from": "ws@1.0.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-1.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ws/-/ws-1.0.1.tgz"
         }
       }
     },
@@ -3661,13 +3130,11 @@
       "version": "1.2.4",
       "from": "engine.io-parser@1.2.4",
       "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-1.2.4.tgz",
-      "dev": true,
       "dependencies": {
         "has-binary": {
           "version": "0.1.6",
           "from": "has-binary@0.1.6",
-          "resolved": "https://registry.npmjs.org/has-binary/-/has-binary-0.1.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/has-binary/-/has-binary-0.1.6.tgz"
         }
       }
     },
@@ -3675,343 +3142,288 @@
       "version": "0.9.1",
       "from": "enhanced-resolve@>=0.9.0 <0.10.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
           "version": "4.1.2",
           "from": "graceful-fs@>=4.1.2 <5.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
         },
         "memory-fs": {
           "version": "0.2.0",
           "from": "memory-fs@>=0.2.0 <0.3.0",
-          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz"
         }
       }
     },
     "ent": {
       "version": "2.2.0",
       "from": "ent@>=2.2.0 <2.3.0",
-      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz"
     },
     "entities": {
       "version": "1.1.1",
       "from": "entities@>=1.1.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz"
     },
     "envify": {
       "version": "3.4.0",
       "from": "envify@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/envify/-/envify-3.4.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/envify/-/envify-3.4.0.tgz"
     },
     "errno": {
       "version": "0.1.4",
       "from": "errno@>=0.1.3 <0.2.0",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.4.tgz"
     },
     "error-ex": {
       "version": "1.3.0",
       "from": "error-ex@>=1.2.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.0.tgz"
     },
     "errorhandler": {
       "version": "1.4.2",
       "from": "errorhandler@>=1.4.2 <1.5.0",
-      "resolved": "https://registry.npmjs.org/errorhandler/-/errorhandler-1.4.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/errorhandler/-/errorhandler-1.4.2.tgz"
     },
     "es5-ext": {
       "version": "0.10.11",
       "from": "es5-ext@>=0.10.8 <0.11.0",
-      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.11.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.11.tgz"
     },
     "es6-iterator": {
       "version": "2.0.0",
       "from": "es6-iterator@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.0.tgz"
     },
     "es6-module-loader": {
       "version": "0.17.9",
       "from": "es6-module-loader@>=0.17.4 <0.18.0",
-      "resolved": "https://registry.npmjs.org/es6-module-loader/-/es6-module-loader-0.17.9.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/es6-module-loader/-/es6-module-loader-0.17.9.tgz"
     },
     "es6-promise": {
       "version": "3.3.1",
       "from": "es6-promise@>=3.1.2 <4.0.0",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz"
     },
     "es6-symbol": {
       "version": "3.0.2",
       "from": "es6-symbol@>=3.0.2 <3.1.0",
-      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.0.2.tgz"
     },
     "es6-weak-map": {
       "version": "0.1.4",
       "from": "es6-weak-map@>=0.1.4 <0.2.0",
       "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-0.1.4.tgz",
-      "dev": true,
       "dependencies": {
         "es6-iterator": {
           "version": "0.1.3",
           "from": "es6-iterator@>=0.1.3 <0.2.0",
-          "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-0.1.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-0.1.3.tgz"
         },
         "es6-symbol": {
           "version": "2.0.1",
           "from": "es6-symbol@>=2.0.1 <2.1.0",
-          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-2.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-2.0.1.tgz"
         }
       }
     },
     "escape-html": {
       "version": "1.0.2",
       "from": "escape-html@1.0.2",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.2.tgz"
     },
     "escape-string-regexp": {
       "version": "1.0.4",
       "from": "escape-string-regexp@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.4.tgz"
     },
     "esprima": {
       "version": "2.7.1",
       "from": "esprima@>=2.6.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.1.tgz"
     },
     "estraverse": {
       "version": "4.2.0",
       "from": "estraverse@>=4.1.0 <5.0.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz"
     },
     "estree-walker": {
       "version": "0.2.1",
       "from": "estree-walker@>=0.2.1 <0.3.0",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz"
     },
     "esutils": {
       "version": "1.1.6",
       "from": "esutils@>=1.1.6 <2.0.0",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz"
     },
     "etag": {
       "version": "1.7.0",
       "from": "etag@>=1.7.0 <1.8.0",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.7.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.7.0.tgz"
     },
     "event-emitter": {
       "version": "0.3.4",
       "from": "event-emitter@>=0.3.3 <0.4.0",
-      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.4.tgz"
     },
     "event-stream": {
       "version": "3.3.2",
       "from": "event-stream@>=3.1.5 <4.0.0",
       "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.2.tgz",
-      "dev": true,
       "dependencies": {
         "split": {
           "version": "0.3.3",
           "from": "split@>=0.3.0 <0.4.0",
-          "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz"
         }
       }
     },
     "eventemitter3": {
       "version": "1.2.0",
       "from": "eventemitter3@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz"
     },
     "events": {
       "version": "1.1.1",
       "from": "events@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz"
     },
     "exit": {
       "version": "0.1.2",
       "from": "exit@>=0.1.2 <0.2.0",
-      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz"
     },
     "exit-hook": {
       "version": "1.1.1",
       "from": "exit-hook@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz"
     },
     "expand-braces": {
       "version": "0.1.2",
       "from": "expand-braces@>=0.1.1 <0.2.0",
       "resolved": "https://registry.npmjs.org/expand-braces/-/expand-braces-0.1.2.tgz",
-      "dev": true,
       "dependencies": {
         "braces": {
           "version": "0.1.5",
           "from": "braces@>=0.1.2 <0.2.0",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-0.1.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/braces/-/braces-0.1.5.tgz"
         },
         "expand-range": {
           "version": "0.1.1",
           "from": "expand-range@>=0.1.0 <0.2.0",
-          "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-0.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-0.1.1.tgz"
         },
         "is-number": {
           "version": "0.1.1",
           "from": "is-number@>=0.1.1 <0.2.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-0.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-0.1.1.tgz"
         },
         "repeat-string": {
           "version": "0.2.2",
           "from": "repeat-string@>=0.2.2 <0.3.0",
-          "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-0.2.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-0.2.2.tgz"
         }
       }
     },
     "expand-brackets": {
       "version": "0.1.4",
       "from": "expand-brackets@>=0.1.4 <0.2.0",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.4.tgz"
     },
     "expand-range": {
       "version": "1.8.1",
       "from": "expand-range@>=1.8.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.1.tgz"
     },
     "express-session": {
       "version": "1.11.3",
       "from": "express-session@>=1.11.3 <1.12.0",
-      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.11.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.11.3.tgz"
     },
     "extend": {
       "version": "3.0.0",
       "from": "extend@>=3.0.0 <3.1.0",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.0.tgz"
     },
     "external-editor": {
       "version": "1.1.1",
       "from": "external-editor@>=1.1.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-1.1.1.tgz",
-      "dev": true,
       "dependencies": {
         "tmp": {
           "version": "0.0.29",
           "from": "tmp@>=0.0.29 <0.0.30",
-          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.29.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.29.tgz"
         }
       }
     },
     "extglob": {
       "version": "0.3.1",
       "from": "extglob@>=0.3.1 <0.4.0",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.1.tgz"
     },
     "extsprintf": {
       "version": "1.0.2",
       "from": "extsprintf@1.0.2",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz"
     },
     "eyes": {
       "version": "0.1.8",
       "from": "eyes@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/eyes/-/eyes-0.1.8.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/eyes/-/eyes-0.1.8.tgz"
     },
     "fancy-log": {
       "version": "1.1.0",
       "from": "fancy-log@>=1.1.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
           "version": "2.0.0",
           "from": "ansi-regex@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
         },
         "ansi-styles": {
           "version": "2.1.0",
           "from": "ansi-styles@>=2.1.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.1.0.tgz"
         },
         "chalk": {
           "version": "1.1.1",
           "from": "chalk@>=1.1.1 <2.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.1.tgz"
         },
         "has-ansi": {
           "version": "2.0.0",
           "from": "has-ansi@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"
         },
         "strip-ansi": {
           "version": "3.0.0",
           "from": "strip-ansi@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz"
         },
         "supports-color": {
           "version": "2.0.0",
           "from": "supports-color@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
         }
       }
     },
     "faye-websocket": {
       "version": "0.10.0",
       "from": "faye-websocket@>=0.10.0 <0.11.0",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz"
     },
     "fbjs": {
       "version": "0.6.0",
       "from": "fbjs@>=0.6.0 <0.7.0",
       "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.6.0.tgz",
-      "dev": true,
       "dependencies": {
         "core-js": {
           "version": "1.2.6",
           "from": "core-js@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.6.tgz"
         }
       }
     },
@@ -4019,69 +3431,58 @@
       "version": "1.7.0",
       "from": "figures@>=1.3.5 <2.0.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
-      "dev": true,
       "dependencies": {
         "escape-string-regexp": {
           "version": "1.0.5",
           "from": "escape-string-regexp@>=1.0.5 <2.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
         },
         "object-assign": {
           "version": "4.1.1",
           "from": "object-assign@>=4.1.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
         }
       }
     },
     "filename-regex": {
       "version": "2.0.0",
       "from": "filename-regex@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.0.tgz"
     },
     "fill-range": {
       "version": "2.2.3",
       "from": "fill-range@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz"
     },
     "filled-array": {
       "version": "1.1.0",
       "from": "filled-array@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/filled-array/-/filled-array-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/filled-array/-/filled-array-1.1.0.tgz"
     },
     "finalhandler": {
       "version": "0.4.0",
       "from": "finalhandler@0.4.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.4.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.4.0.tgz"
     },
     "find-index": {
       "version": "0.1.1",
       "from": "find-index@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz"
     },
     "find-up": {
       "version": "1.1.0",
       "from": "find-up@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.0.tgz"
     },
     "findup-sync": {
       "version": "0.3.0",
       "from": "findup-sync@>=0.3.0 <0.4.0",
       "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.3.0.tgz",
-      "dev": true,
       "dependencies": {
         "glob": {
           "version": "5.0.15",
           "from": "glob@>=5.0.0 <5.1.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz"
         }
       }
     },
@@ -4089,133 +3490,112 @@
       "version": "0.3.11",
       "from": "firefox-profile@>=0.3.4 <0.4.0",
       "resolved": "https://registry.npmjs.org/firefox-profile/-/firefox-profile-0.3.11.tgz",
-      "dev": true,
       "dependencies": {
         "async": {
           "version": "0.9.2",
           "from": "async@>=0.9.0 <0.10.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
         },
         "fs-extra": {
           "version": "0.16.5",
           "from": "fs-extra@>=0.16.0 <0.17.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.16.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.16.5.tgz"
         },
         "lodash": {
           "version": "3.5.0",
           "from": "lodash@>=3.5.0 <3.6.0",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.5.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.5.0.tgz"
         }
       }
     },
     "first-chunk-stream": {
       "version": "1.0.0",
       "from": "first-chunk-stream@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz"
     },
     "flagged-respawn": {
       "version": "0.3.1",
       "from": "flagged-respawn@>=0.3.1 <0.4.0",
-      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.1.tgz"
     },
     "for-in": {
       "version": "0.1.4",
       "from": "for-in@>=0.1.4 <0.2.0",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.4.tgz"
     },
     "for-own": {
       "version": "0.1.3",
       "from": "for-own@>=0.1.3 <0.2.0",
-      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.3.tgz"
     },
     "forever-agent": {
       "version": "0.6.1",
       "from": "forever-agent@>=0.6.1 <0.7.0",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz"
     },
     "form-data": {
       "version": "2.1.2",
       "from": "form-data@>=2.1.1 <2.2.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.2.tgz",
-      "dev": true,
       "dependencies": {
         "mime-db": {
           "version": "1.24.0",
           "from": "mime-db@>=1.24.0 <1.25.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.24.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.24.0.tgz"
         },
         "mime-types": {
           "version": "2.1.12",
           "from": "mime-types@^2.1.12",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.12.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.12.tgz"
         }
       }
     },
     "fresh": {
       "version": "0.3.0",
       "from": "fresh@0.3.0",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.3.0.tgz"
     },
     "from": {
       "version": "0.1.3",
       "from": "from@>=0.0.0 <1.0.0",
-      "resolved": "https://registry.npmjs.org/from/-/from-0.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.3.tgz"
     },
     "fs-access": {
       "version": "1.0.0",
       "from": "fs-access@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/fs-access/-/fs-access-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/fs-access/-/fs-access-1.0.0.tgz"
     },
     "fs-extra": {
       "version": "0.26.3",
       "from": "fs-extra@0.26.3",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.3.tgz",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
           "version": "4.1.2",
           "from": "graceful-fs@>=4.1.2 <5.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
         }
       }
     },
     "fs-promise": {
       "version": "0.3.1",
       "from": "fs-promise@0.3.1",
-      "resolved": "https://registry.npmjs.org/fs-promise/-/fs-promise-0.3.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/fs-promise/-/fs-promise-0.3.1.tgz"
     },
     "fs.realpath": {
       "version": "1.0.0",
       "from": "fs.realpath@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
     },
     "fsevents": {
       "version": "1.0.17",
       "from": "fsevents@>=1.0.14 <2.0.0",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.0.17.tgz",
-      "optional": true,
       "dependencies": {
         "abbrev": {
           "version": "1.0.9",
           "from": "abbrev@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz"
         },
         "ansi-regex": {
           "version": "2.0.0",
@@ -4225,50 +3605,42 @@
         "ansi-styles": {
           "version": "2.2.1",
           "from": "ansi-styles@>=2.2.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz"
         },
         "aproba": {
           "version": "1.0.4",
           "from": "aproba@>=1.0.3 <2.0.0",
-          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.0.4.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.0.4.tgz"
         },
         "are-we-there-yet": {
           "version": "1.1.2",
           "from": "are-we-there-yet@>=1.1.2 <1.2.0",
-          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz"
         },
         "asn1": {
           "version": "0.2.3",
           "from": "asn1@>=0.2.3 <0.3.0",
-          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz"
         },
         "assert-plus": {
           "version": "0.2.0",
           "from": "assert-plus@>=0.2.0 <0.3.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz"
         },
         "asynckit": {
           "version": "0.4.0",
           "from": "asynckit@>=0.4.0 <0.5.0",
-          "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
         },
         "aws-sign2": {
           "version": "0.6.0",
           "from": "aws-sign2@>=0.6.0 <0.7.0",
-          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz"
         },
         "aws4": {
           "version": "1.5.0",
           "from": "aws4@>=1.2.1 <2.0.0",
-          "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.5.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.5.0.tgz"
         },
         "balanced-match": {
           "version": "0.4.2",
@@ -4278,8 +3650,7 @@
         "bcrypt-pbkdf": {
           "version": "1.0.0",
           "from": "bcrypt-pbkdf@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz"
         },
         "block-stream": {
           "version": "0.0.9",
@@ -4304,20 +3675,17 @@
         "caseless": {
           "version": "0.11.0",
           "from": "caseless@>=0.11.0 <0.12.0",
-          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz"
         },
         "chalk": {
           "version": "1.1.3",
           "from": "chalk@>=1.1.1 <2.0.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "optional": true,
           "dependencies": {
             "supports-color": {
               "version": "2.0.0",
               "from": "supports-color@>=2.0.0 <3.0.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-              "optional": true
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
             }
           }
         },
@@ -4334,8 +3702,7 @@
         "commander": {
           "version": "2.9.0",
           "from": "commander@>=2.9.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz"
         },
         "concat-map": {
           "version": "0.0.1",
@@ -4355,34 +3722,29 @@
         "cryptiles": {
           "version": "2.0.5",
           "from": "cryptiles@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz"
         },
         "dashdash": {
           "version": "1.14.1",
           "from": "dashdash@>=1.12.0 <2.0.0",
           "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-          "optional": true,
           "dependencies": {
             "assert-plus": {
               "version": "1.0.0",
               "from": "assert-plus@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-              "optional": true
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
             }
           }
         },
         "debug": {
           "version": "2.2.0",
           "from": "debug@>=2.2.0 <2.3.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz"
         },
         "deep-extend": {
           "version": "0.4.1",
           "from": "deep-extend@>=0.4.0 <0.5.0",
-          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.1.tgz"
         },
         "delayed-stream": {
           "version": "1.0.0",
@@ -4392,26 +3754,22 @@
         "delegates": {
           "version": "1.0.0",
           "from": "delegates@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz"
         },
         "ecc-jsbn": {
           "version": "0.1.1",
           "from": "ecc-jsbn@>=0.1.1 <0.2.0",
-          "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz"
         },
         "escape-string-regexp": {
           "version": "1.0.5",
           "from": "escape-string-regexp@>=1.0.2 <2.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
         },
         "extend": {
           "version": "3.0.0",
           "from": "extend@>=3.0.0 <3.1.0",
-          "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.0.tgz"
         },
         "extsprintf": {
           "version": "1.0.2",
@@ -4421,14 +3779,12 @@
         "forever-agent": {
           "version": "0.6.1",
           "from": "forever-agent@>=0.6.1 <0.7.0",
-          "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz"
         },
         "form-data": {
           "version": "2.1.2",
           "from": "form-data@>=2.1.1 <2.2.0",
-          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.2.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.2.tgz"
         },
         "fs.realpath": {
           "version": "1.0.0",
@@ -4443,38 +3799,32 @@
         "fstream-ignore": {
           "version": "1.0.5",
           "from": "fstream-ignore@>=1.0.5 <1.1.0",
-          "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz"
         },
         "gauge": {
           "version": "2.7.2",
           "from": "gauge@>=2.7.1 <2.8.0",
-          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.2.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.2.tgz"
         },
         "generate-function": {
           "version": "2.0.0",
           "from": "generate-function@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz"
         },
         "generate-object-property": {
           "version": "1.2.0",
           "from": "generate-object-property@>=1.1.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz"
         },
         "getpass": {
           "version": "0.1.6",
           "from": "getpass@>=0.1.1 <0.2.0",
           "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.6.tgz",
-          "optional": true,
           "dependencies": {
             "assert-plus": {
               "version": "1.0.0",
               "from": "assert-plus@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-              "optional": true
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
             }
           }
         },
@@ -4491,32 +3841,27 @@
         "graceful-readlink": {
           "version": "1.0.1",
           "from": "graceful-readlink@>=1.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
         },
         "har-validator": {
           "version": "2.0.6",
           "from": "har-validator@>=2.0.6 <2.1.0",
-          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz"
         },
         "has-ansi": {
           "version": "2.0.0",
           "from": "has-ansi@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"
         },
         "has-unicode": {
           "version": "2.0.1",
           "from": "has-unicode@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz"
         },
         "hawk": {
           "version": "3.1.3",
           "from": "hawk@>=3.1.3 <3.2.0",
-          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz"
         },
         "hoek": {
           "version": "2.16.3",
@@ -4526,8 +3871,7 @@
         "http-signature": {
           "version": "1.1.1",
           "from": "http-signature@>=1.1.0 <1.2.0",
-          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz"
         },
         "inflight": {
           "version": "1.0.6",
@@ -4542,8 +3886,7 @@
         "ini": {
           "version": "1.3.4",
           "from": "ini@>=1.3.0 <1.4.0",
-          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz"
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
@@ -4553,20 +3896,17 @@
         "is-my-json-valid": {
           "version": "2.15.0",
           "from": "is-my-json-valid@>=2.12.4 <3.0.0",
-          "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz"
         },
         "is-property": {
           "version": "1.0.2",
           "from": "is-property@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz"
         },
         "is-typedarray": {
           "version": "1.0.0",
           "from": "is-typedarray@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz"
         },
         "isarray": {
           "version": "1.0.0",
@@ -4576,44 +3916,37 @@
         "isstream": {
           "version": "0.1.2",
           "from": "isstream@>=0.1.2 <0.2.0",
-          "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
         },
         "jodid25519": {
           "version": "1.0.2",
           "from": "jodid25519@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz"
         },
         "jsbn": {
           "version": "0.1.0",
           "from": "jsbn@>=0.1.0 <0.2.0",
-          "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.0.tgz"
         },
         "json-schema": {
           "version": "0.2.3",
           "from": "json-schema@0.2.3",
-          "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz"
         },
         "json-stringify-safe": {
           "version": "5.0.1",
           "from": "json-stringify-safe@>=5.0.1 <5.1.0",
-          "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
         },
         "jsonpointer": {
           "version": "4.0.1",
           "from": "jsonpointer@>=4.0.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz"
         },
         "jsprim": {
           "version": "1.3.1",
           "from": "jsprim@>=1.2.2 <2.0.0",
-          "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.3.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.3.1.tgz"
         },
         "mime-db": {
           "version": "1.25.0",
@@ -4643,26 +3976,22 @@
         "ms": {
           "version": "0.7.1",
           "from": "ms@0.7.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz"
         },
         "node-pre-gyp": {
           "version": "0.6.32",
           "from": "node-pre-gyp@>=0.6.29 <0.7.0",
-          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.32.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.32.tgz"
         },
         "nopt": {
           "version": "3.0.6",
           "from": "nopt@>=3.0.6 <3.1.0",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz"
         },
         "npmlog": {
           "version": "4.0.2",
           "from": "npmlog@>=4.0.1 <5.0.0",
-          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.0.2.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.0.2.tgz"
         },
         "number-is-nan": {
           "version": "1.0.1",
@@ -4672,14 +4001,12 @@
         "oauth-sign": {
           "version": "0.8.2",
           "from": "oauth-sign@>=0.8.1 <0.9.0",
-          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz"
         },
         "object-assign": {
           "version": "4.1.0",
           "from": "object-assign@>=4.1.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.0.tgz"
         },
         "once": {
           "version": "1.4.0",
@@ -4694,14 +4021,12 @@
         "pinkie": {
           "version": "2.0.4",
           "from": "pinkie@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz"
         },
         "pinkie-promise": {
           "version": "2.0.1",
           "from": "pinkie-promise@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz"
         },
         "process-nextick-args": {
           "version": "1.0.7",
@@ -4711,40 +4036,34 @@
         "punycode": {
           "version": "1.4.1",
           "from": "punycode@>=1.4.1 <2.0.0",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz"
         },
         "qs": {
           "version": "6.3.0",
           "from": "qs@>=6.3.0 <6.4.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.0.tgz"
         },
         "rc": {
           "version": "1.1.6",
           "from": "rc@>=1.1.6 <1.2.0",
           "resolved": "https://registry.npmjs.org/rc/-/rc-1.1.6.tgz",
-          "optional": true,
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
               "from": "minimist@>=1.2.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-              "optional": true
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz"
             }
           }
         },
         "readable-stream": {
           "version": "2.2.2",
           "from": "readable-stream@>=2.0.0 <3.0.0||>=1.1.13 <2.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
         },
         "request": {
           "version": "2.79.0",
           "from": "request@>=2.79.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz"
         },
         "rimraf": {
           "version": "2.5.4",
@@ -4754,38 +4073,32 @@
         "semver": {
           "version": "5.3.0",
           "from": "semver@>=5.3.0 <5.4.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz"
         },
         "set-blocking": {
           "version": "2.0.0",
           "from": "set-blocking@>=2.0.0 <2.1.0",
-          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
         },
         "signal-exit": {
           "version": "3.0.2",
           "from": "signal-exit@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz"
         },
         "sntp": {
           "version": "1.0.9",
           "from": "sntp@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz"
         },
         "sshpk": {
           "version": "1.10.1",
           "from": "sshpk@>=1.7.0 <2.0.0",
           "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.10.1.tgz",
-          "optional": true,
           "dependencies": {
             "assert-plus": {
               "version": "1.0.0",
               "from": "assert-plus@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-              "optional": true
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
             }
           }
         },
@@ -4802,8 +4115,7 @@
         "stringstream": {
           "version": "0.0.5",
           "from": "stringstream@>=0.0.4 <0.1.0",
-          "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz"
         },
         "strip-ansi": {
           "version": "3.0.1",
@@ -4813,14 +4125,12 @@
         "strip-json-comments": {
           "version": "1.0.4",
           "from": "strip-json-comments@>=1.0.4 <1.1.0",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz"
         },
         "supports-color": {
           "version": "0.2.0",
           "from": "supports-color@>=0.2.0 <0.3.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz"
         },
         "tar": {
           "version": "2.2.1",
@@ -4831,45 +4141,38 @@
           "version": "3.3.0",
           "from": "tar-pack@>=3.3.0 <3.4.0",
           "resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.3.0.tgz",
-          "optional": true,
           "dependencies": {
             "once": {
               "version": "1.3.3",
               "from": "once@>=1.3.3 <1.4.0",
-              "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-              "optional": true
+              "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz"
             },
             "readable-stream": {
               "version": "2.1.5",
               "from": "readable-stream@>=2.1.4 <2.2.0",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.1.5.tgz",
-              "optional": true
+              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.1.5.tgz"
             }
           }
         },
         "tough-cookie": {
           "version": "2.3.2",
           "from": "tough-cookie@>=2.3.0 <2.4.0",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz"
         },
         "tunnel-agent": {
           "version": "0.4.3",
           "from": "tunnel-agent@>=0.4.1 <0.5.0",
-          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz"
         },
         "tweetnacl": {
           "version": "0.14.5",
           "from": "tweetnacl@>=0.14.0 <0.15.0",
-          "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz"
         },
         "uid-number": {
           "version": "0.0.6",
           "from": "uid-number@>=0.0.6 <0.1.0",
-          "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz"
         },
         "util-deprecate": {
           "version": "1.0.2",
@@ -4879,20 +4182,17 @@
         "uuid": {
           "version": "3.0.1",
           "from": "uuid@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz"
         },
         "verror": {
           "version": "1.3.6",
           "from": "verror@1.3.6",
-          "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz"
         },
         "wide-align": {
           "version": "1.1.0",
           "from": "wide-align@>=1.1.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.0.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.0.tgz"
         },
         "wrappy": {
           "version": "1.0.2",
@@ -4902,40 +4202,34 @@
         "xtend": {
           "version": "4.0.1",
           "from": "xtend@>=4.0.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-          "optional": true
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz"
         }
       }
     },
     "fstream": {
       "version": "0.1.31",
       "from": "fstream@>=0.1.30 <1.0.0",
-      "resolved": "https://registry.npmjs.org/fstream/-/fstream-0.1.31.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-0.1.31.tgz"
     },
     "fx-runner": {
       "version": "0.0.7",
       "from": "fx-runner@0.0.7",
       "resolved": "https://registry.npmjs.org/fx-runner/-/fx-runner-0.0.7.tgz",
-      "dev": true,
       "dependencies": {
         "commander": {
           "version": "2.6.0",
           "from": "commander@2.6.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz"
         },
         "lodash": {
           "version": "2.4.1",
           "from": "lodash@2.4.1",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.1.tgz"
         },
         "when": {
           "version": "3.6.4",
           "from": "when@3.6.4",
-          "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz"
         }
       }
     },
@@ -4943,89 +4237,75 @@
       "version": "2.7.2",
       "from": "gauge@>=2.7.1 <2.8.0",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.2.tgz",
-      "dev": true,
       "dependencies": {
         "object-assign": {
           "version": "4.1.1",
           "from": "object-assign@^4.1.0",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
         },
         "signal-exit": {
           "version": "3.0.2",
           "from": "signal-exit@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz"
         },
         "supports-color": {
           "version": "0.2.0",
           "from": "supports-color@>=0.2.0 <0.3.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz"
         }
       }
     },
     "gaze": {
       "version": "0.5.2",
       "from": "gaze@>=0.5.1 <0.6.0",
-      "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.2.tgz"
     },
     "generate-function": {
       "version": "2.0.0",
       "from": "generate-function@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz"
     },
     "generate-object-property": {
       "version": "1.2.0",
       "from": "generate-object-property@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz"
     },
     "get-pkg-repo": {
       "version": "1.2.1",
       "from": "get-pkg-repo@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-1.2.1.tgz",
-      "dev": true,
       "dependencies": {
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
           "version": "2.0.6",
           "from": "readable-stream@2.0.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz"
         },
         "through2": {
           "version": "2.0.1",
           "from": "through2@2.0.1",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz"
         }
       }
     },
     "get-stdin": {
       "version": "4.0.1",
       "from": "get-stdin@>=4.0.1 <5.0.0",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
     },
     "getpass": {
       "version": "0.1.6",
       "from": "getpass@>=0.1.1 <0.2.0",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.6.tgz",
-      "dev": true,
       "dependencies": {
         "assert-plus": {
           "version": "1.0.0",
           "from": "assert-plus@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
         }
       }
     },
@@ -5033,127 +4313,107 @@
       "version": "1.1.2",
       "from": "git-raw-commits@>=1.1.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-1.1.2.tgz",
-      "dev": true,
       "dependencies": {
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "lodash.template": {
           "version": "4.3.0",
           "from": "lodash.template@>=4.0.2 <5.0.0",
-          "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.3.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.3.0.tgz"
         },
         "lodash.templatesettings": {
           "version": "4.1.0",
           "from": "lodash.templatesettings@>=4.0.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz"
         },
         "readable-stream": {
           "version": "2.0.6",
           "from": "readable-stream@2.0.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz"
         },
         "through2": {
           "version": "2.0.1",
           "from": "through2@2.0.1",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz"
         }
       }
     },
     "git-remote-origin-url": {
       "version": "2.0.0",
       "from": "git-remote-origin-url@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz"
     },
     "git-semver-tags": {
       "version": "1.1.2",
       "from": "git-semver-tags@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-1.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-1.1.2.tgz"
     },
     "gitconfiglocal": {
       "version": "1.0.0",
       "from": "gitconfiglocal@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz"
     },
     "github-url-from-git": {
       "version": "1.4.0",
       "from": "github-url-from-git@>=1.4.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/github-url-from-git/-/github-url-from-git-1.4.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/github-url-from-git/-/github-url-from-git-1.4.0.tgz"
     },
     "glob": {
       "version": "4.5.3",
       "from": "glob@>=4.0.6 <5.0.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
-      "dev": true,
       "dependencies": {
         "minimatch": {
           "version": "2.0.10",
           "from": "minimatch@>=2.0.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz"
         }
       }
     },
     "glob-base": {
       "version": "0.3.0",
       "from": "glob-base@>=0.3.0 <0.4.0",
-      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz"
     },
     "glob-parent": {
       "version": "2.0.0",
       "from": "glob-parent@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz"
     },
     "glob-stream": {
       "version": "3.1.18",
       "from": "glob-stream@>=3.1.5 <4.0.0",
       "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-3.1.18.tgz",
-      "dev": true,
       "dependencies": {
         "minimatch": {
           "version": "2.0.10",
           "from": "minimatch@>=2.0.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz"
         }
       }
     },
     "glob-watcher": {
       "version": "0.0.6",
       "from": "glob-watcher@>=0.0.6 <0.0.7",
-      "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-0.0.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-0.0.6.tgz"
     },
     "glob2base": {
       "version": "0.0.12",
       "from": "glob2base@>=0.0.12 <0.0.13",
-      "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz"
     },
     "globby": {
       "version": "5.0.0",
       "from": "globby@>=5.0.0 <6.0.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-5.0.0.tgz",
-      "dev": true,
       "dependencies": {
         "glob": {
           "version": "7.1.1",
           "from": "glob@^7.0.3",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
         }
       }
     },
@@ -5161,49 +4421,41 @@
       "version": "0.1.0",
       "from": "globule@>=0.1.0 <0.2.0",
       "resolved": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "glob": {
           "version": "3.1.21",
           "from": "glob@>=3.1.21 <3.2.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz"
         },
         "graceful-fs": {
           "version": "1.2.3",
           "from": "graceful-fs@>=1.2.0 <1.3.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz"
         },
         "inherits": {
           "version": "1.0.2",
           "from": "inherits@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz"
         },
         "lodash": {
           "version": "1.0.2",
           "from": "lodash@>=1.0.1 <1.1.0",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz"
         },
         "minimatch": {
           "version": "0.2.14",
           "from": "minimatch@>=0.2.11 <0.3.0",
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-          "dev": true,
           "dependencies": {
             "lru-cache": {
               "version": "2.7.3",
               "from": "lru-cache@2.7.3",
-              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz"
             },
             "sigmund": {
               "version": "1.0.1",
               "from": "sigmund@1.0.1",
-              "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz"
             }
           }
         }
@@ -5212,94 +4464,79 @@
     "glogg": {
       "version": "1.0.0",
       "from": "glogg@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.0.tgz"
     },
     "got": {
       "version": "5.7.1",
       "from": "got@>=5.0.0 <6.0.0",
       "resolved": "https://registry.npmjs.org/got/-/got-5.7.1.tgz",
-      "dev": true,
       "dependencies": {
         "duplexer2": {
           "version": "0.1.4",
           "from": "duplexer2@>=0.1.4 <0.2.0",
-          "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz"
         },
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
           "version": "2.2.2",
           "from": "readable-stream@>=2.0.5 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
         }
       }
     },
     "graceful-fs": {
       "version": "3.0.8",
       "from": "graceful-fs@>=3.0.2 <3.1.0",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.8.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.8.tgz"
     },
     "graceful-readlink": {
       "version": "1.0.1",
       "from": "graceful-readlink@>=1.0.0",
-      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
     },
     "gulp": {
       "version": "3.9.0",
       "from": "gulp@>=3.8.8 <4.0.0",
       "resolved": "https://registry.npmjs.org/gulp/-/gulp-3.9.0.tgz",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
           "version": "2.0.0",
           "from": "ansi-regex@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
         },
         "ansi-styles": {
           "version": "2.1.0",
           "from": "ansi-styles@>=2.1.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.1.0.tgz"
         },
         "chalk": {
           "version": "1.1.1",
           "from": "chalk@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.1.tgz"
         },
         "has-ansi": {
           "version": "2.0.0",
           "from": "has-ansi@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"
         },
         "semver": {
           "version": "4.3.6",
           "from": "semver@>=4.1.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz"
         },
         "strip-ansi": {
           "version": "3.0.0",
           "from": "strip-ansi@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz"
         },
         "supports-color": {
           "version": "2.0.0",
           "from": "supports-color@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
         }
       }
     },
@@ -5307,39 +4544,33 @@
       "version": "1.0.23",
       "from": "gulp-clang-format@>=1.0.23 <2.0.0",
       "resolved": "https://registry.npmjs.org/gulp-clang-format/-/gulp-clang-format-1.0.23.tgz",
-      "dev": true,
       "dependencies": {
         "duplexer2": {
           "version": "0.1.4",
           "from": "duplexer2@>=0.1.0 <0.2.0",
-          "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz"
         },
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
           "version": "2.1.4",
           "from": "readable-stream@>=2.0.2 <3.0.0",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.1.4.tgz",
-          "dev": true,
           "dependencies": {
             "buffer-shims": {
               "version": "1.0.0",
               "from": "buffer-shims@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz"
             }
           }
         },
         "stream-combiner2": {
           "version": "1.1.1",
           "from": "stream-combiner2@>=1.1.1 <2.0.0",
-          "resolved": "https://registry.npmjs.org/stream-combiner2/-/stream-combiner2-1.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/stream-combiner2/-/stream-combiner2-1.1.1.tgz"
         }
       }
     },
@@ -5347,13 +4578,11 @@
       "version": "2.3.1",
       "from": "gulp-connect@2.3.1",
       "resolved": "https://registry.npmjs.org/gulp-connect/-/gulp-connect-2.3.1.tgz",
-      "dev": true,
       "dependencies": {
         "connect": {
           "version": "2.30.2",
           "from": "connect@>=2.30.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/connect/-/connect-2.30.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/connect/-/connect-2.30.2.tgz"
         }
       }
     },
@@ -5361,31 +4590,26 @@
       "version": "1.1.0",
       "from": "gulp-conventional-changelog@latest",
       "resolved": "https://registry.npmjs.org/gulp-conventional-changelog/-/gulp-conventional-changelog-1.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "concat-stream": {
           "version": "1.5.1",
           "from": "concat-stream@>=1.5.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.5.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.5.1.tgz"
         },
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
           "version": "2.0.6",
           "from": "readable-stream@>=2.0.0 <2.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz"
         },
         "through2": {
           "version": "2.0.1",
           "from": "through2@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz"
         }
       }
     },
@@ -5393,849 +4617,730 @@
       "version": "1.0.0",
       "from": "gulp-diff@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/gulp-diff/-/gulp-diff-1.0.0.tgz",
-      "dev": true,
       "dependencies": {
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
           "version": "2.0.6",
           "from": "readable-stream@>=2.0.0 <2.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz"
         },
         "through2": {
           "version": "2.0.1",
           "from": "through2@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz"
         }
       }
     },
     "gulp-tslint": {
       "version": "7.0.1",
       "from": "gulp-tslint@>=7.0.1 <8.0.0",
-      "resolved": "https://registry.npmjs.org/gulp-tslint/-/gulp-tslint-7.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/gulp-tslint/-/gulp-tslint-7.0.1.tgz"
     },
     "gulp-util": {
       "version": "3.0.7",
       "from": "gulp-util@>=3.0.0 <4.0.0",
       "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.7.tgz",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
           "version": "2.0.0",
           "from": "ansi-regex@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
         },
         "ansi-styles": {
           "version": "2.1.0",
           "from": "ansi-styles@>=2.1.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.1.0.tgz"
         },
         "chalk": {
           "version": "1.1.1",
           "from": "chalk@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.1.tgz"
         },
         "has-ansi": {
           "version": "2.0.0",
           "from": "has-ansi@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"
         },
         "object-assign": {
           "version": "3.0.0",
           "from": "object-assign@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz"
         },
         "readable-stream": {
           "version": "2.0.5",
           "from": "readable-stream@>=2.0.0 <2.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.5.tgz"
         },
         "strip-ansi": {
           "version": "3.0.0",
           "from": "strip-ansi@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz"
         },
         "supports-color": {
           "version": "2.0.0",
           "from": "supports-color@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
         },
         "through2": {
           "version": "2.0.0",
           "from": "through2@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.0.tgz"
         },
         "vinyl": {
           "version": "0.5.3",
           "from": "vinyl@>=0.5.0 <0.6.0",
-          "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.3.tgz"
         }
       }
     },
     "gulplog": {
       "version": "1.0.0",
       "from": "gulplog@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz"
     },
     "hammerjs": {
       "version": "2.0.8",
       "from": "hammerjs@latest",
-      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz"
     },
     "handlebars": {
       "version": "4.0.5",
       "from": "handlebars@>=4.0.2 <5.0.0",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.5.tgz",
-      "dev": true,
       "dependencies": {
         "async": {
           "version": "1.5.2",
           "from": "async@>=1.4.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz"
         },
         "source-map": {
           "version": "0.4.4",
           "from": "source-map@>=0.4.4 <0.5.0",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
-          "dev": true,
           "dependencies": {
             "amdefine": {
               "version": "1.0.1",
               "from": "amdefine@>=0.0.4",
-              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz"
             }
           }
         }
       }
     },
+    "har-schema": {
+      "version": "1.0.5",
+      "from": "har-schema@>=1.0.5 <2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz"
+    },
     "har-validator": {
       "version": "2.0.6",
       "from": "har-validator@>=2.0.6 <2.1.0",
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
-      "dev": true,
       "dependencies": {
         "is-my-json-valid": {
           "version": "2.15.0",
           "from": "is-my-json-valid@>=2.12.4 <3.0.0",
-          "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz"
         },
         "jsonpointer": {
           "version": "4.0.0",
           "from": "jsonpointer@>=4.0.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.0.tgz"
         }
       }
     },
     "has-ansi": {
       "version": "2.0.0",
       "from": "has-ansi@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"
     },
     "has-binary": {
       "version": "0.1.7",
       "from": "has-binary@0.1.7",
-      "resolved": "https://registry.npmjs.org/has-binary/-/has-binary-0.1.7.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/has-binary/-/has-binary-0.1.7.tgz"
     },
     "has-color": {
       "version": "0.1.7",
       "from": "has-color@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz"
     },
     "has-cors": {
       "version": "1.1.0",
       "from": "has-cors@1.1.0",
-      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz"
     },
     "has-flag": {
       "version": "1.0.0",
       "from": "has-flag@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz"
     },
     "has-gulplog": {
       "version": "0.1.0",
       "from": "has-gulplog@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz"
     },
     "has-unicode": {
       "version": "2.0.1",
       "from": "has-unicode@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz"
     },
     "hashish": {
       "version": "0.0.4",
       "from": "hashish@>=0.0.2 <0.1.0",
-      "resolved": "https://registry.npmjs.org/hashish/-/hashish-0.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/hashish/-/hashish-0.0.4.tgz"
     },
     "hawk": {
       "version": "3.1.3",
       "from": "hawk@>=3.1.3 <3.2.0",
-      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz"
     },
     "header-case": {
       "version": "1.0.0",
       "from": "header-case@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/header-case/-/header-case-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/header-case/-/header-case-1.0.0.tgz"
     },
     "hoek": {
       "version": "2.16.3",
       "from": "hoek@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz"
     },
     "hosted-git-info": {
       "version": "2.1.4",
       "from": "hosted-git-info@>=2.1.4 <3.0.0",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.1.4.tgz"
     },
     "html": {
       "version": "1.0.0",
       "from": "html@*",
-      "resolved": "https://registry.npmjs.org/html/-/html-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/html/-/html-1.0.0.tgz"
     },
     "htmlparser2": {
       "version": "3.9.2",
       "from": "htmlparser2@>=3.7.3 <4.0.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz",
-      "dev": true,
       "dependencies": {
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
           "version": "2.2.2",
           "from": "readable-stream@>=2.0.2 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
         }
       }
     },
     "http-browserify": {
       "version": "1.7.0",
       "from": "http-browserify@>=1.4.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/http-browserify/-/http-browserify-1.7.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/http-browserify/-/http-browserify-1.7.0.tgz"
     },
     "http-errors": {
       "version": "1.3.1",
       "from": "http-errors@>=1.3.1 <1.4.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.3.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.3.1.tgz"
     },
     "http-proxy": {
       "version": "1.13.3",
       "from": "http-proxy@>=1.13.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.13.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.13.3.tgz"
     },
     "http-signature": {
       "version": "1.1.1",
       "from": "http-signature@>=1.1.0 <1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
-      "dev": true,
       "dependencies": {
         "assert-plus": {
           "version": "0.2.0",
           "from": "assert-plus@>=0.2.0 <0.3.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz"
         }
       }
     },
     "https-browserify": {
       "version": "0.0.0",
       "from": "https-browserify@0.0.0",
-      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-0.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-0.0.0.tgz"
     },
     "https-proxy-agent": {
       "version": "1.0.0",
       "from": "https-proxy-agent@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz"
     },
     "iconv-lite": {
       "version": "0.4.11",
       "from": "iconv-lite@0.4.11",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.11.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.11.tgz"
     },
     "ieee754": {
       "version": "1.1.8",
       "from": "ieee754@>=1.1.4 <2.0.0",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.8.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.8.tgz"
     },
     "imurmurhash": {
       "version": "0.1.4",
       "from": "imurmurhash@>=0.1.4 <0.2.0",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
     },
     "incremental-dom": {
       "version": "0.4.1",
       "from": "incremental-dom@latest",
-      "resolved": "https://registry.npmjs.org/incremental-dom/-/incremental-dom-0.4.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/incremental-dom/-/incremental-dom-0.4.1.tgz"
     },
     "indent-string": {
       "version": "2.1.0",
       "from": "indent-string@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz"
     },
     "indexof": {
       "version": "0.0.1",
       "from": "indexof@0.0.1",
-      "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz"
     },
     "inflight": {
       "version": "1.0.5",
       "from": "inflight@>=1.0.4 <2.0.0",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.5.tgz"
     },
     "inherits": {
       "version": "2.0.1",
       "from": "inherits@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
     },
     "ini": {
       "version": "1.3.4",
       "from": "ini@>=1.3.3 <1.4.0",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz"
     },
     "inquirer": {
       "version": "1.2.3",
       "from": "inquirer@>=1.2.2 <2.0.0",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-1.2.3.tgz",
-      "dev": true,
       "dependencies": {
         "lodash": {
           "version": "4.17.4",
           "from": "lodash@>=4.3.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz"
         },
         "mute-stream": {
           "version": "0.0.6",
           "from": "mute-stream@0.0.6",
-          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.6.tgz"
         }
       }
     },
     "interpret": {
       "version": "0.6.6",
       "from": "interpret@>=0.6.2 <0.7.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-0.6.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-0.6.6.tgz"
     },
     "invariant": {
       "version": "2.2.2",
       "from": "invariant@>=2.2.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz"
     },
     "invert-kv": {
       "version": "1.0.0",
       "from": "invert-kv@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz"
     },
     "is-arrayish": {
       "version": "0.2.1",
       "from": "is-arrayish@>=0.2.1 <0.3.0",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
     },
     "is-binary-path": {
       "version": "1.0.1",
       "from": "is-binary-path@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz"
     },
     "is-buffer": {
       "version": "1.1.0",
       "from": "is-buffer@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.0.tgz"
     },
     "is-builtin-module": {
       "version": "1.0.0",
       "from": "is-builtin-module@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz"
     },
     "is-ci": {
       "version": "1.0.10",
       "from": "is-ci@>=1.0.10 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.0.10.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.0.10.tgz"
     },
     "is-dotfile": {
       "version": "1.0.2",
       "from": "is-dotfile@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.2.tgz"
     },
     "is-equal-shallow": {
       "version": "0.1.3",
       "from": "is-equal-shallow@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz"
     },
     "is-extendable": {
       "version": "0.1.1",
       "from": "is-extendable@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz"
     },
     "is-extglob": {
       "version": "1.0.0",
       "from": "is-extglob@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz"
     },
     "is-finite": {
       "version": "1.0.1",
       "from": "is-finite@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.1.tgz"
     },
     "is-fullwidth-code-point": {
       "version": "1.0.0",
       "from": "is-fullwidth-code-point@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz"
     },
     "is-glob": {
       "version": "2.0.1",
       "from": "is-glob@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz"
     },
     "is-lower-case": {
       "version": "1.1.3",
       "from": "is-lower-case@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-lower-case/-/is-lower-case-1.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-lower-case/-/is-lower-case-1.1.3.tgz"
+    },
+    "is-module": {
+      "version": "1.0.0",
+      "from": "is-module@>=1.0.0 <2.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz"
     },
     "is-my-json-valid": {
       "version": "2.12.3",
       "from": "is-my-json-valid@>=2.12.3 <3.0.0",
-      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.12.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.12.3.tgz"
     },
     "is-npm": {
       "version": "1.0.0",
       "from": "is-npm@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz"
     },
     "is-number": {
       "version": "2.1.0",
       "from": "is-number@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz"
     },
     "is-obj": {
       "version": "1.0.1",
       "from": "is-obj@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz"
     },
     "is-path-cwd": {
       "version": "1.0.0",
       "from": "is-path-cwd@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz"
     },
     "is-path-in-cwd": {
       "version": "1.0.0",
       "from": "is-path-in-cwd@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz"
     },
     "is-path-inside": {
       "version": "1.0.0",
       "from": "is-path-inside@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.0.tgz"
     },
     "is-primitive": {
       "version": "2.0.0",
       "from": "is-primitive@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz"
     },
     "is-promise": {
       "version": "2.1.0",
       "from": "is-promise@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz"
     },
     "is-property": {
       "version": "1.0.2",
       "from": "is-property@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz"
     },
     "is-redirect": {
       "version": "1.0.0",
       "from": "is-redirect@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz"
     },
     "is-retry-allowed": {
       "version": "1.1.0",
       "from": "is-retry-allowed@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz"
     },
     "is-stream": {
       "version": "1.1.0",
       "from": "is-stream@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz"
     },
     "is-subset": {
       "version": "0.1.1",
       "from": "is-subset@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz"
     },
     "is-text-path": {
       "version": "1.0.1",
       "from": "is-text-path@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz"
     },
     "is-typedarray": {
       "version": "1.0.0",
       "from": "is-typedarray@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz"
     },
     "is-upper-case": {
       "version": "1.1.2",
       "from": "is-upper-case@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-upper-case/-/is-upper-case-1.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-upper-case/-/is-upper-case-1.1.2.tgz"
     },
     "is-utf8": {
       "version": "0.2.1",
       "from": "is-utf8@>=0.2.0 <0.3.0",
-      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz"
     },
     "isarray": {
       "version": "0.0.1",
       "from": "isarray@0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
     },
     "isbinaryfile": {
       "version": "3.0.0",
       "from": "isbinaryfile@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-3.0.0.tgz"
     },
     "isexe": {
       "version": "1.1.2",
       "from": "isexe@>=1.1.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-1.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-1.1.2.tgz"
     },
     "isobject": {
       "version": "2.0.0",
       "from": "isobject@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.0.0.tgz"
     },
     "isstream": {
       "version": "0.1.2",
       "from": "isstream@>=0.1.2 <0.2.0",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
     },
     "jasmine": {
       "version": "2.4.1",
       "from": "jasmine@>=2.4.0 <2.5.0",
       "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.4.1.tgz",
-      "dev": true,
       "dependencies": {
         "glob": {
           "version": "3.2.11",
           "from": "glob@>=3.2.11 <4.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz"
         },
         "jasmine-core": {
           "version": "2.4.1",
           "from": "jasmine-core@>=2.4.0 <2.5.0",
-          "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.4.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.4.1.tgz"
         },
         "minimatch": {
           "version": "0.3.0",
           "from": "minimatch@>=0.3.0 <0.4.0",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz"
         }
       }
     },
     "jasmine-core": {
       "version": "2.4.1",
       "from": "jasmine-core@2.4.1",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.4.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.4.1.tgz"
     },
     "jasminewd2": {
       "version": "0.0.10",
       "from": "jasminewd2@0.0.10",
-      "resolved": "https://registry.npmjs.org/jasminewd2/-/jasminewd2-0.0.10.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/jasminewd2/-/jasminewd2-0.0.10.tgz"
     },
     "jetpack-id": {
       "version": "0.0.4",
       "from": "jetpack-id@0.0.4",
-      "resolved": "https://registry.npmjs.org/jetpack-id/-/jetpack-id-0.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/jetpack-id/-/jetpack-id-0.0.4.tgz"
     },
     "jetpack-validation": {
       "version": "0.0.4",
       "from": "jetpack-validation@0.0.4",
       "resolved": "https://registry.npmjs.org/jetpack-validation/-/jetpack-validation-0.0.4.tgz",
-      "dev": true,
       "dependencies": {
         "resolve": {
           "version": "0.7.4",
           "from": "resolve@>=0.7.1 <0.8.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-0.7.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-0.7.4.tgz"
         },
         "semver": {
           "version": "2.3.2",
           "from": "semver@>=2.3.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz"
         }
       }
     },
     "jodid25519": {
       "version": "1.0.2",
       "from": "jodid25519@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz",
-      "dev": true,
-      "optional": true
+      "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz"
     },
     "jpm": {
       "version": "1.0.0",
       "from": "jpm@1.0.0",
       "resolved": "https://registry.npmjs.org/jpm/-/jpm-1.0.0.tgz",
-      "dev": true,
       "dependencies": {
         "async": {
           "version": "0.9.2",
           "from": "async@>=0.9.0 <0.10.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
         },
         "commander": {
           "version": "2.6.0",
           "from": "commander@2.6.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz"
         },
         "firefox-profile": {
           "version": "0.3.9",
           "from": "firefox-profile@0.3.9",
           "resolved": "https://registry.npmjs.org/firefox-profile/-/firefox-profile-0.3.9.tgz",
-          "dev": true,
           "dependencies": {
             "lodash": {
               "version": "3.5.0",
               "from": "lodash@>=3.5.0 <3.6.0",
-              "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.5.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.5.0.tgz"
             }
           }
         },
         "fs-extra": {
           "version": "0.16.4",
           "from": "fs-extra@0.16.4",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.16.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.16.4.tgz"
         },
         "lodash": {
           "version": "3.3.1",
           "from": "lodash@3.3.1",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.3.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.3.1.tgz"
         },
         "minimatch": {
           "version": "2.0.4",
           "from": "minimatch@2.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.4.tgz"
         },
         "open": {
           "version": "0.0.5",
           "from": "open@0.0.5",
-          "resolved": "https://registry.npmjs.org/open/-/open-0.0.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/open/-/open-0.0.5.tgz"
         },
         "semver": {
           "version": "4.3.3",
           "from": "semver@4.3.3",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.3.tgz"
         }
       }
     },
     "jpm-core": {
       "version": "0.0.9",
       "from": "jpm-core@0.0.9",
-      "resolved": "https://registry.npmjs.org/jpm-core/-/jpm-core-0.0.9.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/jpm-core/-/jpm-core-0.0.9.tgz"
     },
     "js-tokens": {
       "version": "1.0.2",
       "from": "js-tokens@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-1.0.2.tgz"
     },
     "jsbn": {
       "version": "0.1.0",
       "from": "jsbn@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.0.tgz",
-      "dev": true,
-      "optional": true
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.0.tgz"
     },
     "json-schema": {
       "version": "0.2.3",
       "from": "json-schema@0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz"
+    },
+    "json-stable-stringify": {
+      "version": "1.0.1",
+      "from": "json-stable-stringify@>=1.0.1 <2.0.0",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz"
     },
     "json-stringify-safe": {
       "version": "5.0.1",
       "from": "json-stringify-safe@>=5.0.1 <5.1.0",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
     },
     "json3": {
       "version": "3.2.6",
       "from": "json3@3.2.6",
-      "resolved": "https://registry.npmjs.org/json3/-/json3-3.2.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/json3/-/json3-3.2.6.tgz"
     },
     "json5": {
       "version": "0.4.0",
       "from": "json5@>=0.4.0 <0.5.0",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-0.4.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/json5/-/json5-0.4.0.tgz"
     },
     "jsonfile": {
       "version": "2.2.3",
       "from": "jsonfile@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.2.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.2.3.tgz"
+    },
+    "jsonify": {
+      "version": "0.0.0",
+      "from": "jsonify@>=0.0.0 <0.1.0",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz"
     },
     "jsonparse": {
       "version": "1.2.0",
       "from": "jsonparse@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.2.0.tgz"
     },
     "jsonpointer": {
       "version": "2.0.0",
       "from": "jsonpointer@2.0.0",
-      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-2.0.0.tgz"
     },
     "JSONStream": {
       "version": "1.0.7",
       "from": "JSONStream@>=1.0.3 <2.0.0",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.0.7.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.0.7.tgz"
     },
     "jsontoxml": {
       "version": "0.0.11",
       "from": "jsontoxml@0.0.11",
-      "resolved": "https://registry.npmjs.org/jsontoxml/-/jsontoxml-0.0.11.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/jsontoxml/-/jsontoxml-0.0.11.tgz"
     },
     "jsprim": {
       "version": "1.3.1",
       "from": "jsprim@>=1.2.2 <2.0.0",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.3.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.3.1.tgz"
     },
     "jstransform": {
       "version": "10.1.0",
       "from": "jstransform@>=10.0.1 <11.0.0",
       "resolved": "https://registry.npmjs.org/jstransform/-/jstransform-10.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "esprima-fb": {
           "version": "13001.1001.0-dev-harmony-fb",
           "from": "esprima-fb@13001.1001.0-dev-harmony-fb",
-          "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-13001.1001.0-dev-harmony-fb.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-13001.1001.0-dev-harmony-fb.tgz"
         },
         "source-map": {
           "version": "0.1.31",
           "from": "source-map@0.1.31",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.31.tgz",
-          "dev": true,
           "dependencies": {
             "amdefine": {
               "version": "1.0.1",
               "from": "amdefine@>=0.0.4",
-              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz"
             }
           }
         }
@@ -6244,410 +5349,349 @@
     "jszip": {
       "version": "2.5.0",
       "from": "jszip@>=2.4.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/jszip/-/jszip-2.5.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-2.5.0.tgz"
     },
     "karma": {
       "version": "0.13.20",
       "from": "karma@0.13.20",
       "resolved": "https://registry.npmjs.org/karma/-/karma-0.13.20.tgz",
-      "dev": true,
       "dependencies": {
         "batch": {
           "version": "0.5.3",
           "from": "batch@>=0.5.3 <0.6.0",
-          "resolved": "https://registry.npmjs.org/batch/-/batch-0.5.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/batch/-/batch-0.5.3.tgz"
         },
         "glob": {
           "version": "7.0.3",
           "from": "glob@>=7.0.0 <8.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.3.tgz"
         },
         "graceful-fs": {
           "version": "4.1.4",
           "from": "graceful-fs@>=4.1.2 <5.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.4.tgz"
         },
         "source-map": {
           "version": "0.5.6",
           "from": "source-map@>=0.5.3 <0.6.0",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz"
         }
       }
     },
     "karma-browserstack-launcher": {
       "version": "0.1.9",
       "from": "karma-browserstack-launcher@0.1.9",
-      "resolved": "https://registry.npmjs.org/karma-browserstack-launcher/-/karma-browserstack-launcher-0.1.9.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/karma-browserstack-launcher/-/karma-browserstack-launcher-0.1.9.tgz"
     },
     "karma-chrome-launcher": {
       "version": "0.2.2",
       "from": "karma-chrome-launcher@>=0.2.0 <0.3.0",
-      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-0.2.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-0.2.2.tgz"
     },
     "karma-jasmine": {
       "version": "0.3.6",
       "from": "karma-jasmine@>=0.3.6 <0.4.0",
-      "resolved": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-0.3.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-0.3.6.tgz"
     },
     "karma-sauce-launcher": {
       "version": "0.3.0",
       "from": "karma-sauce-launcher@0.3.0",
-      "resolved": "https://registry.npmjs.org/karma-sauce-launcher/-/karma-sauce-launcher-0.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/karma-sauce-launcher/-/karma-sauce-launcher-0.3.0.tgz"
     },
     "karma-sourcemap-loader": {
       "version": "0.3.6",
       "from": "karma-sourcemap-loader@>=0.3.6 <0.4.0",
-      "resolved": "https://registry.npmjs.org/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.6.tgz"
     },
     "kind-of": {
       "version": "3.0.2",
       "from": "kind-of@>=3.0.2 <4.0.0",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.0.2.tgz"
     },
     "klaw": {
       "version": "1.1.3",
       "from": "klaw@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.1.3.tgz"
     },
     "latest-version": {
       "version": "2.0.0",
       "from": "latest-version@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-2.0.0.tgz"
     },
     "lazy-cache": {
       "version": "0.2.7",
       "from": "lazy-cache@>=0.2.4 <0.3.0",
-      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz"
     },
     "lazy-req": {
       "version": "1.1.0",
       "from": "lazy-req@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/lazy-req/-/lazy-req-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lazy-req/-/lazy-req-1.1.0.tgz"
     },
     "lazystream": {
       "version": "0.1.0",
       "from": "lazystream@>=0.1.0 <0.2.0",
       "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-0.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "1.0.33",
           "from": "readable-stream@>=1.0.2 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz"
         }
       }
     },
     "lcid": {
       "version": "1.0.0",
       "from": "lcid@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz"
     },
     "leven": {
       "version": "2.0.0",
       "from": "leven@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/leven/-/leven-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/leven/-/leven-2.0.0.tgz"
     },
     "liftoff": {
       "version": "2.2.0",
       "from": "liftoff@>=2.1.0 <3.0.0",
       "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-2.2.0.tgz",
-      "dev": true,
       "dependencies": {
         "extend": {
           "version": "2.0.1",
           "from": "extend@>=2.0.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/extend/-/extend-2.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/extend/-/extend-2.0.1.tgz"
         },
         "findup-sync": {
           "version": "0.3.0",
           "from": "findup-sync@>=0.3.0 <0.4.0",
-          "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.3.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.3.0.tgz"
         },
         "glob": {
           "version": "5.0.15",
           "from": "glob@>=5.0.0 <5.1.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz"
         }
       }
     },
     "livereload-js": {
       "version": "2.2.2",
       "from": "livereload-js@>=2.2.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-2.2.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-2.2.2.tgz"
     },
     "load-json-file": {
       "version": "1.1.0",
       "from": "load-json-file@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
           "version": "4.1.2",
           "from": "graceful-fs@>=4.1.2 <5.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
         }
       }
     },
     "loader-utils": {
       "version": "0.2.12",
       "from": "loader-utils@>=0.2.2 <0.3.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.12.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.12.tgz"
     },
     "lodash": {
       "version": "3.10.1",
       "from": "lodash@3.10.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz"
     },
     "lodash._basecopy": {
       "version": "3.0.1",
       "from": "lodash._basecopy@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz"
     },
     "lodash._basetostring": {
       "version": "3.0.1",
       "from": "lodash._basetostring@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz"
     },
     "lodash._basevalues": {
       "version": "3.0.0",
       "from": "lodash._basevalues@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz"
     },
     "lodash._getnative": {
       "version": "3.9.1",
       "from": "lodash._getnative@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz"
     },
     "lodash._isiterateecall": {
       "version": "3.0.9",
       "from": "lodash._isiterateecall@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz"
     },
     "lodash._reescape": {
       "version": "3.0.0",
       "from": "lodash._reescape@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz"
     },
     "lodash._reevaluate": {
       "version": "3.0.0",
       "from": "lodash._reevaluate@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz"
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "from": "lodash._reinterpolate@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
     },
     "lodash.escape": {
       "version": "3.0.0",
       "from": "lodash.escape@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.0.0.tgz"
     },
     "lodash.isarguments": {
       "version": "3.0.4",
       "from": "lodash.isarguments@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.0.4.tgz"
     },
     "lodash.isarray": {
       "version": "3.0.4",
       "from": "lodash.isarray@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz"
     },
     "lodash.keys": {
       "version": "3.1.2",
       "from": "lodash.keys@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz"
     },
     "lodash.restparam": {
       "version": "3.6.1",
       "from": "lodash.restparam@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
     },
     "lodash.template": {
       "version": "3.6.2",
       "from": "lodash.template@>=3.6.1 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.2.tgz"
     },
     "lodash.templatesettings": {
       "version": "3.1.0",
       "from": "lodash.templatesettings@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.0.tgz"
     },
     "log4js": {
       "version": "0.6.36",
       "from": "log4js@>=0.6.31 <0.7.0",
       "resolved": "https://registry.npmjs.org/log4js/-/log4js-0.6.36.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "1.0.34",
           "from": "readable-stream@>=1.0.2 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz"
         },
         "semver": {
           "version": "4.3.6",
           "from": "semver@>=4.3.3 <4.4.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz"
         }
       }
     },
+    "long": {
+      "version": "3.2.0",
+      "from": "long@>=3.0.0 <4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz"
+    },
     "longest": {
       "version": "1.0.1",
       "from": "longest@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz"
     },
     "loose-envify": {
       "version": "1.1.0",
       "from": "loose-envify@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.1.0.tgz"
     },
     "loud-rejection": {
       "version": "1.2.0",
       "from": "loud-rejection@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.2.0.tgz"
     },
     "lower-case": {
       "version": "1.1.3",
       "from": "lower-case@>=1.1.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.3.tgz"
     },
     "lower-case-first": {
       "version": "1.0.2",
       "from": "lower-case-first@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/lower-case-first/-/lower-case-first-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lower-case-first/-/lower-case-first-1.0.2.tgz"
     },
     "lowercase-keys": {
       "version": "1.0.0",
       "from": "lowercase-keys@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz"
     },
     "lru-cache": {
       "version": "2.7.3",
       "from": "lru-cache@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz"
     },
     "lru-queue": {
       "version": "0.1.0",
       "from": "lru-queue@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz"
     },
     "madge": {
       "version": "0.5.0",
       "from": "madge@0.5.0",
       "resolved": "https://registry.npmjs.org/madge/-/madge-0.5.0.tgz",
-      "dev": true,
       "dependencies": {
         "amdetective": {
           "version": "0.0.2",
           "from": "amdetective@https://registry.npmjs.org/amdetective/-/amdetective-0.0.2.tgz",
           "resolved": "https://registry.npmjs.org/amdetective/-/amdetective-0.0.2.tgz",
-          "dev": true,
           "dependencies": {
             "esprima": {
               "version": "1.2.2",
               "from": "esprima@https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz",
-              "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz"
             }
           }
         },
         "coffee-script": {
           "version": "1.3.3",
           "from": "coffee-script@https://registry.npmjs.org/coffee-script/-/coffee-script-1.3.3.tgz",
-          "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.3.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.3.3.tgz"
         },
         "colors": {
           "version": "0.6.0-1",
           "from": "colors@https://registry.npmjs.org/colors/-/colors-0.6.0-1.tgz",
-          "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.0-1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.0-1.tgz"
         },
         "commander": {
           "version": "1.0.0",
           "from": "commander@https://registry.npmjs.org/commander/-/commander-1.0.0.tgz",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/commander/-/commander-1.0.0.tgz"
         },
         "commondir": {
           "version": "0.0.1",
           "from": "commondir@https://registry.npmjs.org/commondir/-/commondir-0.0.1.tgz",
-          "resolved": "https://registry.npmjs.org/commondir/-/commondir-0.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/commondir/-/commondir-0.0.1.tgz"
         },
         "detective": {
           "version": "0.1.1",
           "from": "detective@https://registry.npmjs.org/detective/-/detective-0.1.1.tgz",
-          "resolved": "https://registry.npmjs.org/detective/-/detective-0.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/detective/-/detective-0.1.1.tgz"
         },
         "detective-es6": {
           "version": "1.1.0",
           "from": "detective-es6@https://registry.npmjs.org/detective-es6/-/detective-es6-1.1.0.tgz",
-          "resolved": "https://registry.npmjs.org/detective-es6/-/detective-es6-1.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/detective-es6/-/detective-es6-1.1.0.tgz"
         },
         "graphviz": {
           "version": "0.0.7",
           "from": "graphviz@https://registry.npmjs.org/graphviz/-/graphviz-0.0.7.tgz",
           "resolved": "https://registry.npmjs.org/graphviz/-/graphviz-0.0.7.tgz",
-          "dev": true,
           "dependencies": {
             "temp": {
               "version": "0.4.0",
               "from": "temp@https://registry.npmjs.org/temp/-/temp-0.4.0.tgz",
-              "resolved": "https://registry.npmjs.org/temp/-/temp-0.4.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/temp/-/temp-0.4.0.tgz"
             }
           }
         },
@@ -6655,63 +5699,53 @@
           "version": "0.12.1",
           "from": "react-tools@https://registry.npmjs.org/react-tools/-/react-tools-0.12.1.tgz",
           "resolved": "https://registry.npmjs.org/react-tools/-/react-tools-0.12.1.tgz",
-          "dev": true,
           "dependencies": {
             "commoner": {
               "version": "0.10.1",
               "from": "commoner@https://registry.npmjs.org/commoner/-/commoner-0.10.1.tgz",
               "resolved": "https://registry.npmjs.org/commoner/-/commoner-0.10.1.tgz",
-              "dev": true,
               "dependencies": {
                 "commander": {
                   "version": "2.5.1",
                   "from": "commander@https://registry.npmjs.org/commander/-/commander-2.5.1.tgz",
-                  "resolved": "https://registry.npmjs.org/commander/-/commander-2.5.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/commander/-/commander-2.5.1.tgz"
                 },
                 "glob": {
                   "version": "4.2.2",
                   "from": "glob@https://registry.npmjs.org/glob/-/glob-4.2.2.tgz",
                   "resolved": "https://registry.npmjs.org/glob/-/glob-4.2.2.tgz",
-                  "dev": true,
                   "dependencies": {
                     "inflight": {
                       "version": "1.0.4",
                       "from": "inflight@https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
                       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.4.tgz",
-                      "dev": true,
                       "dependencies": {
                         "wrappy": {
                           "version": "1.0.1",
                           "from": "wrappy@https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
                         }
                       }
                     },
                     "inherits": {
                       "version": "2.0.1",
                       "from": "inherits@https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
                     },
                     "minimatch": {
                       "version": "1.0.0",
                       "from": "minimatch@https://registry.npmjs.org/minimatch/-/minimatch-1.0.0.tgz",
                       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-1.0.0.tgz",
-                      "dev": true,
                       "dependencies": {
                         "lru-cache": {
                           "version": "2.5.0",
                           "from": "lru-cache@https://registry.npmjs.org/lru-cache/-/lru-cache-2.5.0.tgz",
-                          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.5.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.5.0.tgz"
                         },
                         "sigmund": {
                           "version": "1.0.0",
                           "from": "sigmund@https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                          "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.0.tgz"
                         }
                       }
                     },
@@ -6719,13 +5753,11 @@
                       "version": "1.3.1",
                       "from": "once@https://registry.npmjs.org/once/-/once-1.3.1.tgz",
                       "resolved": "https://registry.npmjs.org/once/-/once-1.3.1.tgz",
-                      "dev": true,
                       "dependencies": {
                         "wrappy": {
                           "version": "1.0.1",
                           "from": "wrappy@https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
                         }
                       }
                     }
@@ -6734,76 +5766,64 @@
                 "graceful-fs": {
                   "version": "3.0.5",
                   "from": "graceful-fs@https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.5.tgz",
-                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.5.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.5.tgz"
                 },
                 "iconv-lite": {
                   "version": "0.4.5",
                   "from": "iconv-lite@https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.5.tgz",
-                  "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.5.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.5.tgz"
                 },
                 "install": {
                   "version": "0.1.8",
                   "from": "install@https://registry.npmjs.org/install/-/install-0.1.8.tgz",
-                  "resolved": "https://registry.npmjs.org/install/-/install-0.1.8.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/install/-/install-0.1.8.tgz"
                 },
                 "mkdirp": {
                   "version": "0.5.0",
                   "from": "mkdirp@https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
                   "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
-                  "dev": true,
                   "dependencies": {
                     "minimist": {
                       "version": "0.0.8",
                       "from": "minimist@https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-                      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
                     }
                   }
                 },
                 "private": {
                   "version": "0.1.6",
                   "from": "private@https://registry.npmjs.org/private/-/private-0.1.6.tgz",
-                  "resolved": "https://registry.npmjs.org/private/-/private-0.1.6.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/private/-/private-0.1.6.tgz"
                 },
                 "q": {
                   "version": "1.1.2",
                   "from": "q@https://registry.npmjs.org/q/-/q-1.1.2.tgz",
-                  "resolved": "https://registry.npmjs.org/q/-/q-1.1.2.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/q/-/q-1.1.2.tgz"
                 },
                 "recast": {
                   "version": "0.9.11",
                   "from": "recast@https://registry.npmjs.org/recast/-/recast-0.9.11.tgz",
                   "resolved": "https://registry.npmjs.org/recast/-/recast-0.9.11.tgz",
-                  "dev": true,
                   "dependencies": {
                     "ast-types": {
                       "version": "0.6.7",
                       "from": "ast-types@https://registry.npmjs.org/ast-types/-/ast-types-0.6.7.tgz",
-                      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.6.7.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.6.7.tgz"
                     },
                     "esprima-fb": {
                       "version": "8001.1001.0-dev-harmony-fb",
                       "from": "esprima-fb@https://registry.npmjs.org/esprima-fb/-/esprima-fb-8001.1001.0-dev-harmony-fb.tgz",
-                      "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-8001.1001.0-dev-harmony-fb.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-8001.1001.0-dev-harmony-fb.tgz"
                     },
                     "source-map": {
                       "version": "0.1.41",
                       "from": "source-map@https://registry.npmjs.org/source-map/-/source-map-0.1.41.tgz",
                       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.41.tgz",
-                      "dev": true,
                       "dependencies": {
                         "amdefine": {
                           "version": "0.1.0",
                           "from": "amdefine@https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                          "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                          "dev": true
+                          "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
                         }
                       }
                     }
@@ -6815,31 +5835,26 @@
               "version": "8.2.0",
               "from": "jstransform@https://registry.npmjs.org/jstransform/-/jstransform-8.2.0.tgz",
               "resolved": "https://registry.npmjs.org/jstransform/-/jstransform-8.2.0.tgz",
-              "dev": true,
               "dependencies": {
                 "base62": {
                   "version": "0.1.1",
                   "from": "base62@https://registry.npmjs.org/base62/-/base62-0.1.1.tgz",
-                  "resolved": "https://registry.npmjs.org/base62/-/base62-0.1.1.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/base62/-/base62-0.1.1.tgz"
                 },
                 "esprima-fb": {
                   "version": "8001.1001.0-dev-harmony-fb",
                   "from": "esprima-fb@https://registry.npmjs.org/esprima-fb/-/esprima-fb-8001.1001.0-dev-harmony-fb.tgz",
-                  "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-8001.1001.0-dev-harmony-fb.tgz",
-                  "dev": true
+                  "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-8001.1001.0-dev-harmony-fb.tgz"
                 },
                 "source-map": {
                   "version": "0.1.31",
                   "from": "source-map@https://registry.npmjs.org/source-map/-/source-map-0.1.31.tgz",
                   "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.31.tgz",
-                  "dev": true,
                   "dependencies": {
                     "amdefine": {
                       "version": "0.1.0",
                       "from": "amdefine@https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz",
-                      "dev": true
+                      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-0.1.0.tgz"
                     }
                   }
                 }
@@ -6850,228 +5865,192 @@
         "resolve": {
           "version": "0.2.3",
           "from": "resolve@https://registry.npmjs.org/resolve/-/resolve-0.2.3.tgz",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-0.2.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-0.2.3.tgz"
         },
         "uglify-js": {
           "version": "1.2.6",
           "from": "uglify-js@https://registry.npmjs.org/uglify-js/-/uglify-js-1.2.6.tgz",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-1.2.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-1.2.6.tgz"
         },
         "walkdir": {
           "version": "0.0.5",
           "from": "walkdir@https://registry.npmjs.org/walkdir/-/walkdir-0.0.5.tgz",
-          "resolved": "https://registry.npmjs.org/walkdir/-/walkdir-0.0.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/walkdir/-/walkdir-0.0.5.tgz"
         }
       }
     },
     "magic-string": {
       "version": "0.16.0",
       "from": "magic-string@>=0.16.0 <0.17.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.16.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.16.0.tgz"
     },
     "map-obj": {
       "version": "1.0.1",
       "from": "map-obj@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
     },
     "map-stream": {
       "version": "0.1.0",
       "from": "map-stream@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz"
     },
     "marked": {
       "version": "0.3.6",
       "from": "marked@>=0.3.2 <0.4.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.6.tgz"
     },
     "match-stream": {
       "version": "0.0.2",
       "from": "match-stream@>=0.0.2 <1.0.0",
       "resolved": "https://registry.npmjs.org/match-stream/-/match-stream-0.0.2.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "1.0.33",
           "from": "readable-stream@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz"
         }
       }
     },
     "media-typer": {
       "version": "0.3.0",
       "from": "media-typer@0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
     },
     "memoizeasync": {
       "version": "0.8.0",
       "from": "memoizeasync@0.8.0",
       "resolved": "https://registry.npmjs.org/memoizeasync/-/memoizeasync-0.8.0.tgz",
-      "dev": true,
       "dependencies": {
         "lru-cache": {
           "version": "2.5.0",
           "from": "lru-cache@2.5.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.5.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.5.0.tgz"
         },
         "passerror": {
           "version": "0.0.2",
           "from": "passerror@0.0.2",
-          "resolved": "https://registry.npmjs.org/passerror/-/passerror-0.0.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/passerror/-/passerror-0.0.2.tgz"
         }
       }
     },
     "memoizee": {
       "version": "0.3.10",
       "from": "memoizee@>=0.3.9 <0.4.0",
-      "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.3.10.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.3.10.tgz"
     },
     "memory-fs": {
       "version": "0.3.0",
       "from": "memory-fs@>=0.3.0 <0.4.0",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.3.0.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "2.0.5",
           "from": "readable-stream@>=2.0.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.5.tgz"
         }
       }
     },
     "meow": {
       "version": "3.6.0",
       "from": "meow@>=3.3.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.6.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.6.0.tgz"
     },
     "method-override": {
       "version": "2.3.5",
       "from": "method-override@>=2.3.5 <2.4.0",
-      "resolved": "https://registry.npmjs.org/method-override/-/method-override-2.3.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/method-override/-/method-override-2.3.5.tgz"
     },
     "methods": {
       "version": "1.1.1",
       "from": "methods@*",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.1.tgz"
     },
     "micromatch": {
       "version": "2.3.7",
       "from": "micromatch@>=2.1.5 <3.0.0",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.7.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.7.tgz"
     },
     "mime": {
       "version": "1.3.4",
       "from": "mime@>=1.2.11 <2.0.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz"
     },
     "mime-db": {
       "version": "1.12.0",
       "from": "mime-db@>=1.12.0 <1.13.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.12.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.12.0.tgz"
     },
     "mime-types": {
       "version": "2.0.14",
       "from": "mime-types@>=2.0.9 <2.1.0",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.14.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.14.tgz"
     },
     "minimatch": {
       "version": "3.0.3",
       "from": "minimatch@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz"
     },
     "minimist": {
       "version": "1.2.0",
       "from": "minimist@>=1.2.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz"
     },
     "mkdirp": {
       "version": "0.5.1",
       "from": "mkdirp@>=0.5.1 <0.6.0",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-      "dev": true,
       "dependencies": {
         "minimist": {
           "version": "0.0.8",
           "from": "minimist@0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
         }
       }
     },
     "mkdirp-promise": {
       "version": "5.0.1",
       "from": "mkdirp-promise@>=5.0.0 <6.0.0",
-      "resolved": "https://registry.npmjs.org/mkdirp-promise/-/mkdirp-promise-5.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/mkdirp-promise/-/mkdirp-promise-5.0.1.tgz"
     },
     "modify-values": {
       "version": "1.0.0",
       "from": "modify-values@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.0.tgz"
     },
     "morgan": {
       "version": "1.6.1",
       "from": "morgan@>=1.6.1 <1.7.0",
-      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.6.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.6.1.tgz"
     },
     "mozilla-toolkit-versioning": {
       "version": "0.0.2",
       "from": "mozilla-toolkit-versioning@0.0.2",
-      "resolved": "https://registry.npmjs.org/mozilla-toolkit-versioning/-/mozilla-toolkit-versioning-0.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/mozilla-toolkit-versioning/-/mozilla-toolkit-versioning-0.0.2.tgz"
     },
     "mozilla-version-comparator": {
       "version": "1.0.2",
       "from": "mozilla-version-comparator@1.0.2",
-      "resolved": "https://registry.npmjs.org/mozilla-version-comparator/-/mozilla-version-comparator-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/mozilla-version-comparator/-/mozilla-version-comparator-1.0.2.tgz"
     },
     "ms": {
       "version": "0.7.1",
       "from": "ms@0.7.1",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz"
     },
     "multiparty": {
       "version": "3.3.2",
       "from": "multiparty@3.3.2",
-      "resolved": "https://registry.npmjs.org/multiparty/-/multiparty-3.3.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/multiparty/-/multiparty-3.3.2.tgz"
     },
     "multipipe": {
       "version": "0.1.2",
       "from": "multipipe@>=0.1.2 <0.2.0",
-      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz"
     },
     "mute-stream": {
       "version": "0.0.5",
       "from": "mute-stream@>=0.0.4 <0.1.0",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz"
     },
     "nan": {
       "version": "2.4.0",
@@ -7081,814 +6060,730 @@
     "negotiator": {
       "version": "0.5.3",
       "from": "negotiator@0.5.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.5.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.5.3.tgz"
     },
     "next-tick": {
       "version": "0.2.2",
       "from": "next-tick@>=0.2.2 <0.3.0",
-      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-0.2.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-0.2.2.tgz"
     },
     "no-case": {
       "version": "2.3.1",
       "from": "no-case@>=2.2.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.1.tgz"
     },
     "node-emoji": {
       "version": "1.5.1",
       "from": "node-emoji@>=1.0.4 <2.0.0",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.5.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.5.1.tgz"
     },
     "node-gyp": {
       "version": "3.5.0",
       "from": "node-gyp@>=3.2.1 <4.0.0",
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.5.0.tgz",
-      "dev": true,
       "dependencies": {
         "fstream": {
           "version": "1.0.10",
           "from": "fstream@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.10.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.10.tgz"
         },
         "glob": {
           "version": "7.1.1",
           "from": "glob@>=7.0.3 <8.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
         },
         "graceful-fs": {
           "version": "4.1.11",
           "from": "graceful-fs@^4.1.2",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz"
         }
       }
     },
     "node-html-encoder": {
       "version": "0.0.2",
       "from": "node-html-encoder@0.0.2",
-      "resolved": "https://registry.npmjs.org/node-html-encoder/-/node-html-encoder-0.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/node-html-encoder/-/node-html-encoder-0.0.2.tgz"
     },
     "node-int64": {
       "version": "0.3.3",
       "from": "node-int64@>=0.3.0 <0.4.0",
-      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.3.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.3.3.tgz"
     },
     "node-libs-browser": {
       "version": "0.6.0",
       "from": "node-libs-browser@0.6.0",
-      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-0.6.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-0.6.0.tgz"
     },
     "node-source-walk": {
       "version": "1.4.2",
       "from": "node-source-walk@>=1.4.0 <1.5.0",
-      "resolved": "https://registry.npmjs.org/node-source-walk/-/node-source-walk-1.4.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/node-source-walk/-/node-source-walk-1.4.2.tgz"
     },
     "node-status-codes": {
       "version": "1.0.0",
       "from": "node-status-codes@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz"
     },
     "node-uuid": {
       "version": "1.4.7",
       "from": "node-uuid@>=1.4.0 <1.5.0",
-      "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.7.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.7.tgz"
     },
     "node-watch": {
       "version": "0.3.4",
       "from": "node-watch@0.3.4",
-      "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.3.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.3.4.tgz"
     },
     "nomnom": {
       "version": "1.8.1",
       "from": "nomnom@*",
       "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz",
-      "dev": true,
       "dependencies": {
         "ansi-styles": {
           "version": "1.0.0",
           "from": "ansi-styles@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz"
         },
         "chalk": {
           "version": "0.4.0",
           "from": "chalk@>=0.4.0 <0.5.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz"
         },
         "strip-ansi": {
           "version": "0.1.1",
           "from": "strip-ansi@>=0.1.0 <0.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz"
         },
         "underscore": {
           "version": "1.6.0",
           "from": "underscore@>=1.6.0 <1.7.0",
-          "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz"
         }
       }
     },
     "nopt": {
       "version": "3.0.6",
       "from": "nopt@>=2.0.0 <3.0.0||>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz"
     },
     "normalize-package-data": {
       "version": "2.3.5",
       "from": "normalize-package-data@>=2.3.4 <3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.3.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.3.5.tgz"
     },
     "normalize-path": {
       "version": "2.0.1",
       "from": "normalize-path@>=2.0.1 <3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.0.1.tgz"
     },
     "npmlog": {
       "version": "4.0.2",
       "from": "npmlog@>=0.0.0 <1.0.0||>=1.0.0 <2.0.0||>=2.0.0 <3.0.0||>=3.0.0 <4.0.0||>=4.0.0 <5.0.0",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.0.2.tgz"
     },
     "null-check": {
       "version": "1.0.0",
       "from": "null-check@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/null-check/-/null-check-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/null-check/-/null-check-1.0.0.tgz"
     },
     "number-is-nan": {
       "version": "1.0.0",
       "from": "number-is-nan@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.0.tgz"
     },
     "nunjucks": {
       "version": "2.5.2",
       "from": "nunjucks@>=2.4.2 <3.0.0",
       "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-2.5.2.tgz",
-      "dev": true,
       "dependencies": {
         "async-each": {
           "version": "1.0.1",
           "from": "async-each@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.1.tgz"
         },
         "chokidar": {
           "version": "1.6.1",
           "from": "chokidar@>=1.6.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.6.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.6.1.tgz"
         },
         "yargs": {
           "version": "3.32.0",
           "from": "yargs@>=3.32.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz"
         }
       }
     },
     "oauth-sign": {
       "version": "0.8.2",
       "from": "oauth-sign@>=0.8.1 <0.9.0",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz"
     },
     "object-assign": {
       "version": "4.0.1",
       "from": "object-assign@>=4.0.1 <5.0.0",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.0.1.tgz"
     },
     "object-component": {
       "version": "0.0.3",
       "from": "object-component@0.0.3",
-      "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz"
     },
     "object-path": {
       "version": "0.11.3",
       "from": "object-path@>=0.11.2 <0.12.0",
-      "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.3.tgz"
     },
     "object.omit": {
       "version": "2.0.0",
       "from": "object.omit@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.0.tgz"
     },
     "on-finished": {
       "version": "2.3.0",
       "from": "on-finished@>=2.3.0 <2.4.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz"
     },
     "on-headers": {
       "version": "1.0.1",
       "from": "on-headers@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.1.tgz"
     },
     "once": {
       "version": "1.3.3",
       "from": "once@>=1.3.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz"
     },
     "onetime": {
       "version": "1.1.0",
       "from": "onetime@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz"
     },
     "optimist": {
       "version": "0.6.1",
       "from": "optimist@>=0.6.1 <0.7.0",
       "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-      "dev": true,
       "dependencies": {
         "minimist": {
           "version": "0.0.10",
           "from": "minimist@>=0.0.1 <0.1.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz"
         }
       }
     },
     "options": {
       "version": "0.0.6",
       "from": "options@>=0.0.5",
-      "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz"
+    },
+    "optjs": {
+      "version": "3.2.2",
+      "from": "optjs@>=3.2.2 <3.3.0",
+      "resolved": "https://registry.npmjs.org/optjs/-/optjs-3.2.2.tgz"
     },
     "orchestrator": {
       "version": "0.3.7",
       "from": "orchestrator@>=0.3.0 <0.4.0",
       "resolved": "https://registry.npmjs.org/orchestrator/-/orchestrator-0.3.7.tgz",
-      "dev": true,
       "dependencies": {
         "end-of-stream": {
           "version": "0.1.5",
           "from": "end-of-stream@>=0.1.5 <0.2.0",
-          "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-0.1.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-0.1.5.tgz"
         }
       }
     },
     "ordered-read-streams": {
       "version": "0.1.0",
       "from": "ordered-read-streams@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz"
     },
     "os-browserify": {
       "version": "0.1.2",
       "from": "os-browserify@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.1.2.tgz"
     },
     "os-homedir": {
       "version": "1.0.1",
       "from": "os-homedir@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.1.tgz"
     },
     "os-locale": {
       "version": "1.4.0",
       "from": "os-locale@>=1.4.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz"
     },
     "os-shim": {
       "version": "0.1.3",
       "from": "os-shim@>=0.1.2 <0.2.0",
-      "resolved": "https://registry.npmjs.org/os-shim/-/os-shim-0.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/os-shim/-/os-shim-0.1.3.tgz"
     },
     "os-tmpdir": {
       "version": "1.0.2",
       "from": "os-tmpdir@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz"
     },
     "osenv": {
       "version": "0.1.3",
       "from": "osenv@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.3.tgz"
     },
     "over": {
       "version": "0.0.5",
       "from": "over@>=0.0.5 <1.0.0",
-      "resolved": "https://registry.npmjs.org/over/-/over-0.0.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/over/-/over-0.0.5.tgz"
     },
     "package-json": {
       "version": "2.4.0",
       "from": "package-json@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/package-json/-/package-json-2.4.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-2.4.0.tgz"
     },
     "pako": {
       "version": "0.2.8",
       "from": "pako@>=0.2.0 <0.3.0",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.8.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.8.tgz"
     },
     "param-case": {
       "version": "2.1.0",
       "from": "param-case@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.0.tgz"
     },
     "parse-github-repo-url": {
       "version": "1.3.0",
       "from": "parse-github-repo-url@>=1.2.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/parse-github-repo-url/-/parse-github-repo-url-1.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/parse-github-repo-url/-/parse-github-repo-url-1.3.0.tgz"
     },
     "parse-glob": {
       "version": "3.0.4",
       "from": "parse-glob@>=3.0.4 <4.0.0",
-      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz"
     },
     "parse-json": {
       "version": "2.2.0",
       "from": "parse-json@>=2.2.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz"
     },
     "parse5": {
       "version": "3.0.1",
       "from": "parse5@3.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.1.tgz",
-      "dev": true,
       "dependencies": {
         "@types/node": {
           "version": "6.0.63",
           "from": "@types/node@>=6.0.46 <7.0.0",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.63.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.63.tgz"
         }
       }
     },
     "parsejson": {
       "version": "0.0.1",
       "from": "parsejson@0.0.1",
-      "resolved": "https://registry.npmjs.org/parsejson/-/parsejson-0.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/parsejson/-/parsejson-0.0.1.tgz"
     },
     "parseqs": {
       "version": "0.0.2",
       "from": "parseqs@0.0.2",
-      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.2.tgz"
     },
     "parseuri": {
       "version": "0.0.4",
       "from": "parseuri@0.0.4",
-      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.4.tgz"
     },
     "parseurl": {
       "version": "1.3.0",
       "from": "parseurl@>=1.3.0 <1.4.0",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.0.tgz"
     },
     "pascal-case": {
       "version": "2.0.0",
       "from": "pascal-case@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-2.0.0.tgz"
     },
     "passerror": {
       "version": "0.0.1",
       "from": "passerror@0.0.1",
-      "resolved": "https://registry.npmjs.org/passerror/-/passerror-0.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/passerror/-/passerror-0.0.1.tgz"
     },
     "path-browserify": {
       "version": "0.0.0",
       "from": "path-browserify@>=0.0.0 <0.1.0",
-      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz"
     },
     "path-case": {
       "version": "2.1.0",
       "from": "path-case@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/path-case/-/path-case-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/path-case/-/path-case-2.1.0.tgz"
     },
     "path-exists": {
       "version": "2.1.0",
       "from": "path-exists@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz"
     },
     "path-is-absolute": {
       "version": "1.0.0",
       "from": "path-is-absolute@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.0.tgz"
     },
     "path-is-inside": {
       "version": "1.0.2",
       "from": "path-is-inside@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz"
     },
     "path-type": {
       "version": "1.1.0",
       "from": "path-type@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
           "version": "4.1.2",
           "from": "graceful-fs@>=4.1.2 <5.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
         }
       }
     },
     "pause": {
       "version": "0.1.0",
       "from": "pause@0.1.0",
-      "resolved": "https://registry.npmjs.org/pause/-/pause-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pause/-/pause-0.1.0.tgz"
     },
     "pause-stream": {
       "version": "0.0.11",
       "from": "pause-stream@0.0.11",
-      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz"
     },
     "pbkdf2-compat": {
       "version": "2.0.1",
       "from": "pbkdf2-compat@2.0.1",
-      "resolved": "https://registry.npmjs.org/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz"
     },
     "pegjs": {
       "version": "0.9.0",
       "from": "pegjs@0.9.0",
-      "resolved": "https://registry.npmjs.org/pegjs/-/pegjs-0.9.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pegjs/-/pegjs-0.9.0.tgz"
+    },
+    "performance-now": {
+      "version": "0.2.0",
+      "from": "performance-now@>=0.2.0 <0.3.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz"
     },
     "pify": {
       "version": "2.3.0",
       "from": "pify@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
     },
     "pinkie": {
       "version": "2.0.1",
       "from": "pinkie@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.1.tgz"
     },
     "pinkie-promise": {
       "version": "2.0.0",
       "from": "pinkie-promise@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.0.tgz"
     },
     "pkginfo": {
       "version": "0.3.1",
       "from": "pkginfo@>=0.3.0 <0.4.0",
-      "resolved": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.3.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pkginfo/-/pkginfo-0.3.1.tgz"
     },
     "prepend-http": {
       "version": "1.0.4",
       "from": "prepend-http@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz"
     },
     "preserve": {
       "version": "0.2.0",
       "from": "preserve@>=0.2.0 <0.3.0",
-      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz"
     },
     "pretty-hrtime": {
       "version": "1.0.1",
       "from": "pretty-hrtime@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz"
     },
     "process": {
       "version": "0.11.9",
       "from": "process@>=0.11.0 <0.12.0",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.9.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.9.tgz"
     },
     "process-nextick-args": {
       "version": "1.0.6",
       "from": "process-nextick-args@>=1.0.6 <1.1.0",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.6.tgz"
     },
     "promise": {
       "version": "7.1.1",
       "from": "promise@>=7.0.3 <8.0.0",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.1.1.tgz"
     },
     "promzard": {
       "version": "0.3.0",
       "from": "promzard@0.3.0",
-      "resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz"
     },
     "proper-lockfile": {
       "version": "2.0.0",
       "from": "proper-lockfile@>=2.0.0 <3.0.0",
       "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-2.0.0.tgz",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
           "version": "4.1.11",
           "from": "graceful-fs@^4.1.2",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz"
+        }
+      }
+    },
+    "protobufjs": {
+      "version": "5.0.0",
+      "from": "protobufjs@5.0.0",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-5.0.0.tgz",
+      "dependencies": {
+        "glob": {
+          "version": "5.0.15",
+          "from": "glob@>=5.0.10 <6.0.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz"
         }
       }
     },
     "protractor": {
-      "version": "4.0.11",
-      "from": "protractor@4.0.11",
-      "resolved": "https://registry.npmjs.org/protractor/-/protractor-4.0.11.tgz",
-      "dev": true,
+      "version": "4.0.14",
+      "from": "protractor@4.0.14",
+      "resolved": "https://registry.npmjs.org/protractor/-/protractor-4.0.14.tgz",
       "dependencies": {
         "@types/jasmine": {
-          "version": "2.5.37",
+          "version": "2.5.47",
           "from": "@types/jasmine@>=2.5.36 <3.0.0",
-          "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.37.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.47.tgz"
         },
         "@types/node": {
-          "version": "6.0.46",
+          "version": "6.0.68",
           "from": "@types/node@>=6.0.46 <7.0.0",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.46.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.68.tgz"
+        },
+        "@types/selenium-webdriver": {
+          "version": "2.53.37",
+          "from": "@types/selenium-webdriver@2.53.37",
+          "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-2.53.37.tgz"
+        },
+        "caseless": {
+          "version": "0.12.0",
+          "from": "caseless@>=0.12.0 <0.13.0",
+          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz"
         },
         "glob": {
           "version": "7.1.1",
           "from": "glob@>=7.0.3 <8.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
+        },
+        "har-validator": {
+          "version": "4.2.1",
+          "from": "har-validator@>=4.2.1 <4.3.0",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz"
         },
         "mime-db": {
-          "version": "1.24.0",
-          "from": "mime-db@~1.24.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.24.0.tgz",
-          "dev": true
+          "version": "1.27.0",
+          "from": "mime-db@>=1.27.0 <1.28.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.27.0.tgz"
         },
         "mime-types": {
-          "version": "2.1.12",
+          "version": "2.1.15",
           "from": "mime-types@>=2.1.7 <2.2.0",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.12.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.15.tgz"
         },
         "qs": {
-          "version": "6.3.0",
-          "from": "qs@>=6.3.0 <6.4.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.0.tgz",
-          "dev": true
+          "version": "6.4.0",
+          "from": "qs@>=6.4.0 <6.5.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz"
         },
         "request": {
-          "version": "2.78.0",
+          "version": "2.81.0",
           "from": "request@>=2.78.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.78.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz"
         },
         "rimraf": {
-          "version": "2.5.4",
+          "version": "2.6.1",
           "from": "rimraf@>=2.5.2 <3.0.0",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.5.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz"
         },
         "saucelabs": {
           "version": "1.3.0",
           "from": "saucelabs@>=1.3.0 <1.4.0",
-          "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.3.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.3.0.tgz"
         },
         "semver": {
           "version": "5.3.0",
           "from": "semver@>=5.3.0 <6.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz"
         },
         "tough-cookie": {
           "version": "2.3.2",
           "from": "tough-cookie@>=2.3.0 <2.4.0",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz"
+        },
+        "tunnel-agent": {
+          "version": "0.6.0",
+          "from": "tunnel-agent@>=0.6.0 <0.7.0",
+          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz"
+        },
+        "uuid": {
+          "version": "3.0.1",
+          "from": "uuid@>=3.0.0 <4.0.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz"
         },
         "webdriver-manager": {
-          "version": "10.2.8",
-          "from": "webdriver-manager@>=10.2.8 <11.0.0",
-          "resolved": "https://registry.npmjs.org/webdriver-manager/-/webdriver-manager-10.2.8.tgz",
-          "dev": true
+          "version": "10.3.0",
+          "from": "webdriver-manager@>=10.3.0 <11.0.0",
+          "resolved": "https://registry.npmjs.org/webdriver-manager/-/webdriver-manager-10.3.0.tgz"
         }
       }
     },
     "prr": {
       "version": "0.0.0",
       "from": "prr@>=0.0.0 <0.1.0",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-0.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/prr/-/prr-0.0.0.tgz"
     },
     "pullstream": {
       "version": "0.4.1",
       "from": "pullstream@>=0.4.1 <1.0.0",
       "resolved": "https://registry.npmjs.org/pullstream/-/pullstream-0.4.1.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "1.0.33",
           "from": "readable-stream@>=1.0.31 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz"
         }
       }
     },
     "punycode": {
       "version": "1.4.1",
       "from": "punycode@>=1.2.4 <2.0.0",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz"
     },
     "q": {
       "version": "1.4.1",
       "from": "q@>=1.4.1 <1.5.0",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz"
     },
     "qs": {
       "version": "4.0.0",
       "from": "qs@4.0.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-4.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/qs/-/qs-4.0.0.tgz"
     },
     "querystring": {
       "version": "0.2.0",
       "from": "querystring@0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz"
     },
     "querystring-es3": {
       "version": "0.2.1",
       "from": "querystring-es3@>=0.2.0 <0.3.0",
-      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz"
     },
     "randomatic": {
       "version": "1.1.5",
       "from": "randomatic@>=1.1.3 <2.0.0",
-      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.5.tgz"
     },
     "range-parser": {
       "version": "1.0.3",
       "from": "range-parser@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.0.3.tgz"
     },
     "raw-body": {
       "version": "2.1.5",
       "from": "raw-body@>=2.1.2 <2.2.0",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.1.5.tgz",
-      "dev": true,
       "dependencies": {
         "bytes": {
           "version": "2.2.0",
           "from": "bytes@2.2.0",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.2.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.2.0.tgz"
         },
         "iconv-lite": {
           "version": "0.4.13",
           "from": "iconv-lite@0.4.13",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz"
         }
       }
     },
     "rc": {
       "version": "1.1.6",
       "from": "rc@>=1.1.6 <2.0.0",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.1.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.1.6.tgz"
     },
     "react": {
       "version": "0.14.5",
       "from": "react@>=0.14.0 <0.15.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-0.14.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/react/-/react-0.14.5.tgz"
     },
     "read": {
       "version": "1.0.5",
       "from": "read@1.0.5",
-      "resolved": "https://registry.npmjs.org/read/-/read-1.0.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/read/-/read-1.0.5.tgz"
     },
     "read-all-stream": {
       "version": "3.1.0",
       "from": "read-all-stream@>=3.0.0 <4.0.0",
       "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@~1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
           "version": "2.2.2",
           "from": "readable-stream@^2.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
         }
       }
     },
     "read-pkg": {
       "version": "1.1.0",
       "from": "read-pkg@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz"
     },
     "read-pkg-up": {
       "version": "1.0.1",
       "from": "read-pkg-up@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz"
     },
     "readable-stream": {
       "version": "1.1.13",
       "from": "readable-stream@>=1.1.13 <2.0.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz"
     },
     "readdirp": {
       "version": "2.0.0",
       "from": "readdirp@>=2.0.0 <3.0.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.0.0.tgz",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
           "version": "4.1.2",
           "from": "graceful-fs@>=4.1.2 <5.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
         },
         "minimatch": {
           "version": "2.0.10",
           "from": "minimatch@>=2.0.10 <3.0.0",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz"
         },
         "readable-stream": {
           "version": "2.0.5",
           "from": "readable-stream@>=2.0.2 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.5.tgz"
         }
       }
     },
     "rechoir": {
       "version": "0.6.2",
       "from": "rechoir@>=0.6.0 <0.7.0",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz"
     },
     "redent": {
       "version": "1.0.0",
       "from": "redent@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz"
     },
     "reflect-metadata": {
       "version": "0.1.3",
@@ -7898,327 +6793,285 @@
     "regenerator-runtime": {
       "version": "0.10.1",
       "from": "regenerator-runtime@>=0.10.0 <0.11.0",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz"
     },
     "regex-cache": {
       "version": "0.4.2",
       "from": "regex-cache@>=0.4.2 <0.5.0",
-      "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.2.tgz"
     },
     "registry-auth-token": {
       "version": "3.1.0",
       "from": "registry-auth-token@>=3.0.1 <4.0.0",
-      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.1.0.tgz"
     },
     "registry-url": {
       "version": "3.1.0",
       "from": "registry-url@>=3.0.3 <4.0.0",
-      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz"
     },
     "repeat-element": {
       "version": "1.1.2",
       "from": "repeat-element@>=1.1.2 <2.0.0",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz"
     },
     "repeat-string": {
       "version": "1.5.2",
       "from": "repeat-string@>=1.5.2 <2.0.0",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.5.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.5.2.tgz"
     },
     "repeating": {
       "version": "2.0.0",
       "from": "repeating@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.0.tgz"
     },
     "replace-ext": {
       "version": "0.0.1",
       "from": "replace-ext@0.0.1",
-      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz"
     },
     "request": {
       "version": "2.51.0",
       "from": "request@>=2.51.0 <2.52.0",
       "resolved": "https://registry.npmjs.org/request/-/request-2.51.0.tgz",
-      "dev": true,
       "dependencies": {
         "asn1": {
           "version": "0.1.11",
           "from": "asn1@0.1.11",
-          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
         },
         "async": {
           "version": "0.9.2",
           "from": "async@>=0.9.0 <0.10.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
         },
         "aws-sign2": {
           "version": "0.5.0",
           "from": "aws-sign2@>=0.5.0 <0.6.0",
-          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz"
         },
         "boom": {
           "version": "0.4.2",
           "from": "boom@>=0.4.0 <0.5.0",
-          "resolved": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz"
         },
         "caseless": {
           "version": "0.8.0",
           "from": "caseless@>=0.8.0 <0.9.0",
-          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.8.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.8.0.tgz"
         },
         "combined-stream": {
           "version": "0.0.7",
           "from": "combined-stream@>=0.0.5 <0.1.0",
-          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz"
         },
         "cryptiles": {
           "version": "0.2.2",
           "from": "cryptiles@>=0.2.0 <0.3.0",
-          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.2.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-0.2.2.tgz"
         },
         "delayed-stream": {
           "version": "0.0.5",
           "from": "delayed-stream@0.0.5",
-          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
         },
         "forever-agent": {
           "version": "0.5.2",
           "from": "forever-agent@>=0.5.0 <0.6.0",
-          "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.5.2.tgz"
         },
         "form-data": {
           "version": "0.2.0",
           "from": "form-data@>=0.2.0 <0.3.0",
           "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-          "dev": true,
           "dependencies": {
             "mime-types": {
               "version": "2.0.14",
               "from": "mime-types@2.0.14",
-              "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.14.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.14.tgz"
             }
           }
         },
         "hawk": {
           "version": "1.1.1",
           "from": "hawk@1.1.1",
-          "resolved": "https://registry.npmjs.org/hawk/-/hawk-1.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/hawk/-/hawk-1.1.1.tgz"
         },
         "hoek": {
           "version": "0.9.1",
           "from": "hoek@>=0.9.0 <0.10.0",
-          "resolved": "https://registry.npmjs.org/hoek/-/hoek-0.9.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/hoek/-/hoek-0.9.1.tgz"
         },
         "http-signature": {
           "version": "0.10.1",
           "from": "http-signature@>=0.10.0 <0.11.0",
-          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz"
         },
         "mime-types": {
           "version": "1.0.2",
           "from": "mime-types@>=1.0.1 <1.1.0",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-1.0.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-1.0.2.tgz"
         },
         "oauth-sign": {
           "version": "0.5.0",
           "from": "oauth-sign@>=0.5.0 <0.6.0",
-          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.5.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.5.0.tgz"
         },
         "qs": {
           "version": "2.3.3",
           "from": "qs@>=2.3.1 <2.4.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz"
         },
         "sntp": {
           "version": "0.2.4",
           "from": "sntp@>=0.2.0 <0.3.0",
-          "resolved": "https://registry.npmjs.org/sntp/-/sntp-0.2.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/sntp/-/sntp-0.2.4.tgz"
         }
       }
     },
     "request-capture-har": {
       "version": "1.1.4",
       "from": "request-capture-har@>=1.1.4 <2.0.0",
-      "resolved": "https://registry.npmjs.org/request-capture-har/-/request-capture-har-1.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/request-capture-har/-/request-capture-har-1.1.4.tgz"
     },
     "requires-port": {
       "version": "1.0.0",
       "from": "requires-port@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
     },
     "resolve": {
       "version": "1.1.6",
       "from": "resolve@>=1.1.4 <2.0.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.6.tgz"
     },
     "response-time": {
       "version": "2.3.1",
       "from": "response-time@>=2.3.1 <2.4.0",
-      "resolved": "https://registry.npmjs.org/response-time/-/response-time-2.3.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/response-time/-/response-time-2.3.1.tgz"
     },
     "restore-cursor": {
       "version": "1.0.1",
       "from": "restore-cursor@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz"
     },
     "retry": {
       "version": "0.10.1",
       "from": "retry@>=0.10.0 <0.11.0",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.10.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.10.1.tgz"
     },
     "rewire": {
       "version": "2.5.1",
       "from": "rewire@>=2.3.3 <3.0.0",
-      "resolved": "https://registry.npmjs.org/rewire/-/rewire-2.5.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/rewire/-/rewire-2.5.1.tgz"
     },
     "rho": {
       "version": "0.3.0",
       "from": "rho@>=0.3.0 <0.4.0",
-      "resolved": "https://registry.npmjs.org/rho/-/rho-0.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/rho/-/rho-0.3.0.tgz"
     },
     "right-align": {
       "version": "0.1.3",
       "from": "right-align@>=0.1.1 <0.2.0",
-      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz"
     },
     "rimraf": {
       "version": "2.5.0",
       "from": "rimraf@>=2.2.8 <3.0.0",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.5.0.tgz",
-      "dev": true,
       "dependencies": {
         "glob": {
           "version": "6.0.3",
           "from": "glob@>=6.0.1 <7.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.3.tgz"
         }
       }
     },
     "ripemd160": {
       "version": "0.2.0",
       "from": "ripemd160@0.2.0",
-      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-0.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-0.2.0.tgz"
     },
     "rndm": {
       "version": "1.1.1",
       "from": "rndm@>=1.1.0 <1.2.0",
-      "resolved": "https://registry.npmjs.org/rndm/-/rndm-1.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/rndm/-/rndm-1.1.1.tgz"
     },
     "roadrunner": {
       "version": "1.1.0",
       "from": "roadrunner@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/roadrunner/-/roadrunner-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/roadrunner/-/roadrunner-1.1.0.tgz"
     },
     "rollup": {
       "version": "0.41.6",
       "from": "rollup@0.41.6",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.41.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.41.6.tgz"
     },
     "rollup-plugin-commonjs": {
       "version": "5.0.5",
       "from": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-5.0.5.tgz",
       "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-5.0.5.tgz",
-      "dev": true,
       "dependencies": {
         "acorn": {
           "version": "4.0.3",
           "from": "acorn@>=4.0.1 <5.0.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.3.tgz"
         },
         "resolve": {
           "version": "1.1.7",
           "from": "resolve@>=1.1.7 <2.0.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz"
         }
       }
     },
+    "rollup-plugin-node-resolve": {
+      "version": "3.0.0",
+      "from": "rollup-plugin-node-resolve@latest",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.0.0.tgz"
+    },
     "rollup-pluginutils": {
       "version": "1.5.2",
       "from": "rollup-pluginutils@>=1.5.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz"
     },
     "run-async": {
       "version": "2.3.0",
       "from": "run-async@>=2.2.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz"
     },
     "rx": {
       "version": "4.1.0",
       "from": "rx@>=4.1.0 <5.0.0",
-      "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz"
     },
     "rxjs": {
       "version": "5.0.1",
       "from": "rxjs@5.0.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.0.1.tgz"
     },
+    "safe-buffer": {
+      "version": "5.0.1",
+      "from": "safe-buffer@>=5.0.1 <6.0.0",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz"
+    },
     "sander": {
       "version": "0.5.1",
       "from": "sander@>=0.5.0 <0.6.0",
       "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
-      "dev": true,
       "dependencies": {
         "glob": {
           "version": "7.1.1",
           "from": "glob@>=7.0.5 <8.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
         },
         "graceful-fs": {
           "version": "4.1.11",
           "from": "graceful-fs@>=4.1.3 <5.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz"
         },
         "rimraf": {
           "version": "2.6.1",
           "from": "rimraf@>=2.5.2 <3.0.0",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz"
         }
       }
     },
@@ -8226,271 +7079,228 @@
       "version": "0.13.0",
       "from": "sauce-connect-launcher@>=0.13.0 <0.14.0",
       "resolved": "https://registry.npmjs.org/sauce-connect-launcher/-/sauce-connect-launcher-0.13.0.tgz",
-      "dev": true,
       "dependencies": {
         "async": {
           "version": "1.4.0",
           "from": "async@1.4.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.4.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async/-/async-1.4.0.tgz"
         },
         "glob": {
           "version": "5.0.15",
           "from": "glob@>=5.0.14 <6.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz"
         },
         "lodash": {
           "version": "3.10.1",
           "from": "lodash@3.10.1",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz"
         },
         "rimraf": {
           "version": "2.4.3",
           "from": "rimraf@2.4.3",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.4.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.4.3.tgz"
         }
       }
     },
     "saucelabs": {
       "version": "1.0.1",
       "from": "saucelabs@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.0.1.tgz"
     },
     "sax": {
       "version": "1.1.4",
       "from": "sax@>=0.6.0",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.1.4.tgz"
     },
     "scmp": {
       "version": "1.0.0",
       "from": "scmp@1.0.0",
-      "resolved": "https://registry.npmjs.org/scmp/-/scmp-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/scmp/-/scmp-1.0.0.tgz"
     },
     "selenium-webdriver": {
       "version": "2.53.3",
       "from": "selenium-webdriver@2.53.3",
       "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.53.3.tgz",
-      "dev": true,
       "dependencies": {
         "adm-zip": {
           "version": "0.4.4",
           "from": "adm-zip@0.4.4",
-          "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.4.tgz"
         },
         "sax": {
           "version": "0.6.1",
           "from": "sax@>=0.6.0 <0.7.0",
-          "resolved": "https://registry.npmjs.org/sax/-/sax-0.6.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/sax/-/sax-0.6.1.tgz"
         },
         "tmp": {
           "version": "0.0.24",
           "from": "tmp@0.0.24",
-          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.24.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.24.tgz"
         },
         "xml2js": {
           "version": "0.4.4",
           "from": "xml2js@0.4.4",
-          "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.4.tgz"
         }
       }
     },
     "semver": {
       "version": "5.1.0",
       "from": "semver@5.1.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.1.0.tgz"
     },
     "semver-diff": {
       "version": "2.1.0",
       "from": "semver-diff@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz"
     },
     "semver-utils": {
       "version": "1.1.1",
       "from": "semver-utils@>=1.1.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/semver-utils/-/semver-utils-1.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/semver-utils/-/semver-utils-1.1.1.tgz"
     },
     "send": {
       "version": "0.13.0",
       "from": "send@0.13.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.13.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/send/-/send-0.13.0.tgz"
     },
     "sentence-case": {
       "version": "2.1.0",
       "from": "sentence-case@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-2.1.0.tgz"
     },
     "seq": {
       "version": "0.3.5",
       "from": "seq@0.3.5",
       "resolved": "https://registry.npmjs.org/seq/-/seq-0.3.5.tgz",
-      "dev": true,
       "dependencies": {
         "chainsaw": {
           "version": "0.0.9",
           "from": "chainsaw@>=0.0.7 <0.1.0",
-          "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.0.9.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.0.9.tgz"
         }
       }
     },
     "sequencify": {
       "version": "0.0.7",
       "from": "sequencify@>=0.0.7 <0.1.0",
-      "resolved": "https://registry.npmjs.org/sequencify/-/sequencify-0.0.7.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/sequencify/-/sequencify-0.0.7.tgz"
     },
     "serve-favicon": {
       "version": "2.3.0",
       "from": "serve-favicon@>=2.3.0 <2.4.0",
-      "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.3.0.tgz"
     },
     "serve-index": {
       "version": "1.7.2",
       "from": "serve-index@>=1.7.2 <1.8.0",
       "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.7.2.tgz",
-      "dev": true,
       "dependencies": {
         "mime-db": {
           "version": "1.20.0",
           "from": "mime-db@1.20.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.20.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.20.0.tgz"
         },
         "mime-types": {
           "version": "2.1.8",
           "from": "mime-types@2.1.8",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.8.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.8.tgz"
         }
       }
     },
     "serve-static": {
       "version": "1.10.0",
       "from": "serve-static@>=1.10.0 <1.11.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.10.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.10.0.tgz"
     },
     "set-blocking": {
       "version": "2.0.0",
       "from": "set-blocking@>=2.0.0 <2.1.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
     },
     "setimmediate": {
       "version": "1.0.4",
       "from": "setimmediate@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.4.tgz"
     },
     "sha.js": {
       "version": "2.2.6",
       "from": "sha.js@2.2.6",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.2.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.2.6.tgz"
     },
     "shelljs": {
       "version": "0.7.6",
       "from": "shelljs@>=0.7.0 <0.8.0",
       "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.7.6.tgz",
-      "dev": true,
       "dependencies": {
         "glob": {
           "version": "7.1.1",
           "from": "glob@^7.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
         },
         "interpret": {
           "version": "1.0.1",
           "from": "interpret@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.0.1.tgz"
         }
       }
     },
     "sigmund": {
       "version": "1.0.1",
       "from": "sigmund@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz"
     },
     "signal-exit": {
       "version": "2.1.2",
       "from": "signal-exit@>=2.1.2 <3.0.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-2.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-2.1.2.tgz"
     },
     "slice-stream": {
       "version": "1.0.0",
       "from": "slice-stream@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/slice-stream/-/slice-stream-1.0.0.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "1.0.33",
           "from": "readable-stream@>=1.0.31 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz"
         }
       }
     },
     "slide": {
       "version": "1.1.6",
       "from": "slide@>=1.1.5 <2.0.0",
-      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz"
     },
     "snake-case": {
       "version": "2.1.0",
       "from": "snake-case@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-2.1.0.tgz"
     },
     "sntp": {
       "version": "1.0.9",
       "from": "sntp@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz"
     },
     "socket.io": {
       "version": "1.4.6",
       "from": "socket.io@>=1.4.5 <2.0.0",
-      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-1.4.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-1.4.6.tgz"
     },
     "socket.io-adapter": {
       "version": "0.4.0",
       "from": "socket.io-adapter@0.4.0",
       "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-0.4.0.tgz",
-      "dev": true,
       "dependencies": {
         "socket.io-parser": {
           "version": "2.2.2",
           "from": "socket.io-parser@2.2.2",
           "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-2.2.2.tgz",
-          "dev": true,
           "dependencies": {
             "debug": {
               "version": "0.7.4",
               "from": "debug@0.7.4",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-0.7.4.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/debug/-/debug-0.7.4.tgz"
             }
           }
         }
@@ -8500,13 +7310,11 @@
       "version": "1.4.6",
       "from": "socket.io-client@1.4.6",
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-1.4.6.tgz",
-      "dev": true,
       "dependencies": {
         "component-emitter": {
           "version": "1.2.0",
           "from": "component-emitter@1.2.0",
-          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.0.tgz"
         }
       }
     },
@@ -8514,51 +7322,43 @@
       "version": "2.2.6",
       "from": "socket.io-parser@2.2.6",
       "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-2.2.6.tgz",
-      "dev": true,
       "dependencies": {
         "json3": {
           "version": "3.3.2",
           "from": "json3@3.3.2",
-          "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz"
         }
       }
     },
     "sorcery": {
       "version": "0.10.0",
       "from": "sorcery@latest",
-      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz"
     },
     "source-list-map": {
       "version": "0.1.5",
       "from": "source-list-map@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-0.1.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-0.1.5.tgz"
     },
     "source-map": {
       "version": "0.5.6",
       "from": "source-map@latest",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz"
     },
     "source-map-support": {
       "version": "0.4.2",
       "from": "source-map-support@latest",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.2.tgz",
-      "dev": true,
       "dependencies": {
         "source-map": {
           "version": "0.1.32",
           "from": "source-map@0.1.32",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-          "dev": true,
           "dependencies": {
             "amdefine": {
               "version": "1.0.1",
               "from": "amdefine@>=0.0.4",
-              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz"
             }
           }
         }
@@ -8567,230 +7367,193 @@
     "sourcemap-codec": {
       "version": "1.3.0",
       "from": "sourcemap-codec@>=1.3.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.3.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.3.0.tgz"
     },
     "sparkles": {
       "version": "1.0.0",
       "from": "sparkles@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.0.tgz"
     },
     "spawn-sync": {
       "version": "1.0.15",
       "from": "spawn-sync@>=1.0.15 <2.0.0",
-      "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz"
     },
     "spdx-correct": {
       "version": "1.0.2",
       "from": "spdx-correct@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz"
     },
     "spdx-exceptions": {
       "version": "1.0.4",
       "from": "spdx-exceptions@>=1.0.4 <2.0.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-1.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-1.0.4.tgz"
     },
     "spdx-expression-parse": {
       "version": "1.0.2",
       "from": "spdx-expression-parse@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-1.0.2.tgz"
     },
     "spdx-license-ids": {
       "version": "1.1.0",
       "from": "spdx-license-ids@>=1.0.2 <2.0.0",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-1.1.0.tgz"
     },
     "spdx-license-list": {
       "version": "2.1.0",
       "from": "spdx-license-list@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/spdx-license-list/-/spdx-license-list-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/spdx-license-list/-/spdx-license-list-2.1.0.tgz"
     },
     "split": {
       "version": "1.0.0",
       "from": "split@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/split/-/split-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.0.tgz"
     },
     "split2": {
       "version": "2.1.0",
       "from": "split2@>=2.0.0 <3.0.0",
       "resolved": "https://registry.npmjs.org/split2/-/split2-2.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
           "version": "2.0.6",
           "from": "readable-stream@2.0.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz"
         },
         "through2": {
           "version": "2.0.1",
           "from": "through2@2.0.1",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.1.tgz"
         }
       }
     },
     "sprintf-js": {
       "version": "1.0.3",
       "from": "sprintf-js@>=1.0.2 <1.1.0",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
     },
     "sshpk": {
       "version": "1.10.1",
       "from": "sshpk@>=1.7.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.10.1.tgz",
-      "dev": true,
       "dependencies": {
         "assert-plus": {
           "version": "1.0.0",
           "from": "assert-plus@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
         }
       }
     },
     "stack-trace": {
       "version": "0.0.9",
       "from": "stack-trace@>=0.0.0 <0.1.0",
-      "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.9.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.9.tgz"
     },
     "statuses": {
       "version": "1.2.1",
       "from": "statuses@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.2.1.tgz"
     },
     "stream-browserify": {
       "version": "1.0.0",
       "from": "stream-browserify@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-1.0.0.tgz"
     },
     "stream-combiner": {
       "version": "0.0.4",
       "from": "stream-combiner@>=0.0.4 <0.1.0",
-      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz"
     },
     "stream-consume": {
       "version": "0.1.0",
       "from": "stream-consume@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.0.tgz"
     },
     "stream-counter": {
       "version": "0.2.0",
       "from": "stream-counter@>=0.2.0 <0.3.0",
-      "resolved": "https://registry.npmjs.org/stream-counter/-/stream-counter-0.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/stream-counter/-/stream-counter-0.2.0.tgz"
     },
     "stream-equal": {
       "version": "0.1.6",
       "from": "stream-equal@0.1.6",
-      "resolved": "https://registry.npmjs.org/stream-equal/-/stream-equal-0.1.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/stream-equal/-/stream-equal-0.1.6.tgz"
     },
     "string_decoder": {
       "version": "0.10.31",
       "from": "string_decoder@>=0.10.0 <0.11.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
     },
     "string-width": {
       "version": "1.0.1",
       "from": "string-width@>=1.0.1 <2.0.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.1.tgz",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
           "version": "2.0.0",
           "from": "ansi-regex@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
         },
         "strip-ansi": {
           "version": "3.0.0",
           "from": "strip-ansi@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz"
         }
       }
     },
     "string.prototype.codepointat": {
       "version": "0.2.0",
       "from": "string.prototype.codepointat@>=0.2.0 <0.3.0",
-      "resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.0.tgz"
     },
     "stringmap": {
       "version": "0.2.2",
       "from": "stringmap@>=0.2.2 <0.3.0",
-      "resolved": "https://registry.npmjs.org/stringmap/-/stringmap-0.2.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/stringmap/-/stringmap-0.2.2.tgz"
     },
     "stringstream": {
       "version": "0.0.5",
       "from": "stringstream@>=0.0.4 <0.1.0",
-      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz"
     },
     "strip-ansi": {
       "version": "3.0.1",
       "from": "strip-ansi@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
     },
     "strip-bom": {
       "version": "2.0.0",
       "from": "strip-bom@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz"
     },
     "strip-indent": {
       "version": "1.0.1",
       "from": "strip-indent@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz"
     },
     "strip-json-comments": {
       "version": "1.0.4",
       "from": "strip-json-comments@>=1.0.4 <1.1.0",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz"
     },
     "success-symbol": {
       "version": "0.1.0",
       "from": "success-symbol@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/success-symbol/-/success-symbol-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/success-symbol/-/success-symbol-0.1.0.tgz"
     },
     "supports-color": {
       "version": "2.0.0",
       "from": "supports-color@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
     },
     "swap-case": {
       "version": "1.1.2",
       "from": "swap-case@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/swap-case/-/swap-case-1.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/swap-case/-/swap-case-1.1.2.tgz"
     },
     "symbol-observable": {
       "version": "1.0.4",
@@ -8800,32 +7563,27 @@
     "systemjs": {
       "version": "0.18.10",
       "from": "systemjs@0.18.10",
-      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-0.18.10.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-0.18.10.tgz"
     },
     "tapable": {
       "version": "0.1.10",
       "from": "tapable@>=0.1.8 <0.2.0",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz"
     },
     "tar": {
       "version": "2.2.1",
       "from": "tar@>=2.2.1 <3.0.0",
       "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
-      "dev": true,
       "dependencies": {
         "fstream": {
           "version": "1.0.10",
           "from": "fstream@^1.0.2",
-          "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.10.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.10.tgz"
         },
         "graceful-fs": {
           "version": "4.1.11",
           "from": "graceful-fs@^4.1.2",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz"
         }
       }
     },
@@ -8833,203 +7591,176 @@
       "version": "1.1.5",
       "from": "tar-stream@>=1.1.0 <1.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.1.5.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "1.0.33",
           "from": "readable-stream@>=1.0.33 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz"
         }
       }
     },
     "text-extensions": {
       "version": "1.3.3",
       "from": "text-extensions@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.3.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.3.3.tgz"
     },
     "through": {
       "version": "2.3.8",
       "from": "through@>=2.2.7 <3.0.0",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
     },
     "through2": {
       "version": "0.6.5",
       "from": "through2@>=0.6.3 <0.7.0",
       "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "1.0.34",
           "from": "readable-stream@>=1.0.33-1 <1.1.0-0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz"
         }
       }
     },
     "tildify": {
       "version": "1.1.2",
       "from": "tildify@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/tildify/-/tildify-1.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/tildify/-/tildify-1.1.2.tgz"
     },
     "timed-out": {
       "version": "3.0.0",
       "from": "timed-out@>=3.0.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-3.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-3.0.0.tgz"
     },
     "timers-browserify": {
       "version": "1.4.2",
       "from": "timers-browserify@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-1.4.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-1.4.2.tgz"
     },
     "timers-ext": {
       "version": "0.1.0",
       "from": "timers-ext@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.0.tgz"
     },
     "tiny-lr": {
       "version": "0.2.1",
       "from": "tiny-lr@>=0.2.1 <0.3.0",
       "resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-0.2.1.tgz",
-      "dev": true,
       "dependencies": {
         "body-parser": {
           "version": "1.14.2",
           "from": "body-parser@>=1.14.0 <1.15.0",
           "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.14.2.tgz",
-          "dev": true,
           "dependencies": {
             "qs": {
               "version": "5.2.0",
               "from": "qs@5.2.0",
-              "resolved": "https://registry.npmjs.org/qs/-/qs-5.2.0.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/qs/-/qs-5.2.0.tgz"
             }
           }
         },
         "bytes": {
           "version": "2.2.0",
           "from": "bytes@2.2.0",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.2.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.2.0.tgz"
         },
         "depd": {
           "version": "1.1.0",
           "from": "depd@>=1.1.0 <1.2.0",
-          "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.0.tgz"
         },
         "iconv-lite": {
           "version": "0.4.13",
           "from": "iconv-lite@0.4.13",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz"
         },
         "qs": {
           "version": "5.1.0",
           "from": "qs@>=5.1.0 <5.2.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-5.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/qs/-/qs-5.1.0.tgz"
         }
       }
     },
     "title-case": {
       "version": "2.1.0",
       "from": "title-case@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/title-case/-/title-case-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/title-case/-/title-case-2.1.0.tgz"
     },
     "tmp": {
       "version": "0.0.25",
       "from": "tmp@0.0.25",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.25.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.25.tgz"
     },
     "to-array": {
       "version": "0.1.4",
       "from": "to-array@0.1.4",
-      "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz"
     },
     "tough-cookie": {
       "version": "2.2.1",
       "from": "tough-cookie@>=2.2.0 <2.3.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.2.1.tgz"
     },
     "traverse": {
       "version": "0.3.9",
       "from": "traverse@>=0.3.0 <0.4.0",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz"
     },
     "trim-newlines": {
       "version": "1.0.0",
       "from": "trim-newlines@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz"
     },
     "trim-off-newlines": {
       "version": "1.0.1",
       "from": "trim-off-newlines@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz"
     },
     "ts-api-guardian": {
-      "version": "0.2.1",
-      "from": "ts-api-guardian@0.2.1",
-      "resolved": "https://registry.npmjs.org/ts-api-guardian/-/ts-api-guardian-0.2.1.tgz",
-      "dev": true,
+      "version": "0.2.2",
+      "from": "ts-api-guardian@0.2.2",
+      "resolved": "https://registry.npmjs.org/ts-api-guardian/-/ts-api-guardian-0.2.2.tgz",
       "dependencies": {
         "diff": {
           "version": "2.2.3",
           "from": "diff@>=2.2.3 <3.0.0",
-          "resolved": "https://registry.npmjs.org/diff/-/diff-2.2.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/diff/-/diff-2.2.3.tgz"
         },
         "typescript": {
           "version": "2.0.10",
           "from": "typescript@2.0.10",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.0.10.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.0.10.tgz"
         }
       }
     },
     "tsickle": {
-      "version": "0.21.6",
-      "from": "tsickle@0.21.6",
-      "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.21.6.tgz",
-      "dev": true
+      "version": "0.23.4",
+      "from": "tsickle@0.23.4",
+      "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.23.4.tgz"
+    },
+    "tslib": {
+      "version": "1.7.1",
+      "from": "tslib@latest",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.7.1.tgz"
     },
     "tslint": {
       "version": "4.1.1",
       "from": "tslint@>=4.1.1 <5.0.0",
       "resolved": "https://registry.npmjs.org/tslint/-/tslint-4.1.1.tgz",
-      "dev": true,
       "dependencies": {
         "diff": {
           "version": "3.1.0",
           "from": "diff@>=3.0.1 <4.0.0",
-          "resolved": "https://registry.npmjs.org/diff/-/diff-3.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/diff/-/diff-3.1.0.tgz"
         },
         "glob": {
           "version": "7.1.1",
           "from": "glob@>=7.0.3 <8.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
         },
         "resolve": {
           "version": "1.2.0",
           "from": "resolve@>=1.1.7 <2.0.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.2.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.2.0.tgz"
         }
       }
     },
@@ -9037,427 +7768,352 @@
       "version": "3.1.0",
       "from": "tslint-eslint-rules@>=3.1.0 <4.0.0",
       "resolved": "https://registry.npmjs.org/tslint-eslint-rules/-/tslint-eslint-rules-3.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "diff": {
           "version": "3.1.0",
           "from": "diff@>=3.0.1 <4.0.0",
-          "resolved": "https://registry.npmjs.org/diff/-/diff-3.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/diff/-/diff-3.1.0.tgz"
         },
         "glob": {
           "version": "7.1.1",
           "from": "glob@>=7.1.1 <8.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
         },
         "resolve": {
           "version": "1.1.7",
           "from": "resolve@>=1.1.7 <2.0.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz"
         },
         "tslint": {
           "version": "4.0.2",
           "from": "tslint@>=4.0.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/tslint/-/tslint-4.0.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/tslint/-/tslint-4.0.2.tgz"
         }
       }
     },
     "tty-browserify": {
       "version": "0.0.0",
       "from": "tty-browserify@>=0.0.0 <0.1.0",
-      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
     },
     "tunnel-agent": {
       "version": "0.4.2",
       "from": "tunnel-agent@>=0.4.1 <0.5.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.2.tgz"
     },
     "tweetnacl": {
       "version": "0.14.3",
       "from": "tweetnacl@>=0.14.0 <0.15.0",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.3.tgz",
-      "dev": true,
-      "optional": true
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.3.tgz"
     },
     "type-is": {
       "version": "1.6.10",
       "from": "type-is@>=1.6.6 <1.7.0",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.10.tgz",
-      "dev": true,
       "dependencies": {
         "mime-db": {
           "version": "1.20.0",
           "from": "mime-db@>=1.20.0 <1.21.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.20.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.20.0.tgz"
         },
         "mime-types": {
           "version": "2.1.8",
           "from": "mime-types@>=2.1.8 <2.2.0",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.8.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.8.tgz"
         }
       }
     },
     "typedarray": {
       "version": "0.0.6",
       "from": "typedarray@>=0.0.5 <0.1.0",
-      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
     },
     "typescript": {
-      "version": "2.1.5",
-      "from": "typescript@>=2.1.0 <2.2.0",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.1.5.tgz",
-      "dev": true
+      "version": "2.3.4",
+      "from": "typescript@2.3.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.3.4.tgz"
     },
     "ua-parser-js": {
       "version": "0.7.10",
       "from": "ua-parser-js@>=0.7.9 <0.8.0",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.10.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.10.tgz"
     },
     "uglify-js": {
       "version": "2.7.0",
       "from": "uglify-js@>=2.6.0 <3.0.0",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.7.0.tgz",
-      "dev": true,
-      "optional": true,
       "dependencies": {
         "camelcase": {
           "version": "1.2.1",
           "from": "camelcase@>=1.0.2 <2.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-          "dev": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz"
         },
         "cliui": {
           "version": "2.1.0",
           "from": "cliui@>=2.1.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
-          "dev": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz"
         },
         "source-map": {
           "version": "0.5.6",
           "from": "source-map@>=0.5.1 <0.6.0",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
-          "dev": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz"
         },
         "window-size": {
           "version": "0.1.0",
           "from": "window-size@0.1.0",
-          "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-          "dev": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz"
         },
         "wordwrap": {
           "version": "0.0.2",
           "from": "wordwrap@0.0.2",
-          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-          "dev": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz"
         },
         "yargs": {
           "version": "3.10.0",
           "from": "yargs@>=3.10.0 <3.11.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-          "dev": true,
-          "optional": true
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz"
         }
       }
     },
     "uglify-to-browserify": {
       "version": "1.0.2",
       "from": "uglify-to-browserify@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz"
     },
     "uid-safe": {
       "version": "2.0.0",
       "from": "uid-safe@>=2.0.0 <2.1.0",
-      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.0.0.tgz"
     },
     "ultron": {
       "version": "1.0.2",
       "from": "ultron@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.0.2.tgz"
     },
     "underscore": {
       "version": "1.8.3",
       "from": "underscore@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz"
     },
     "underscore-contrib": {
       "version": "0.3.0",
       "from": "underscore-contrib@>=0.3.0 <0.4.0",
       "resolved": "https://registry.npmjs.org/underscore-contrib/-/underscore-contrib-0.3.0.tgz",
-      "dev": true,
       "dependencies": {
         "underscore": {
           "version": "1.6.0",
           "from": "underscore@1.6.0",
-          "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz"
         }
       }
     },
     "underscore.string": {
       "version": "3.3.4",
       "from": "underscore.string@>=3.3.4 <4.0.0",
-      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.3.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.3.4.tgz"
     },
     "unicoderegexp": {
       "version": "0.4.1",
       "from": "unicoderegexp@0.4.1",
-      "resolved": "https://registry.npmjs.org/unicoderegexp/-/unicoderegexp-0.4.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/unicoderegexp/-/unicoderegexp-0.4.1.tgz"
     },
     "unique-stream": {
       "version": "1.0.0",
       "from": "unique-stream@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-1.0.0.tgz"
     },
     "universal-analytics": {
       "version": "0.3.10",
       "from": "universal-analytics@>=0.3.9 <0.4.0",
-      "resolved": "https://registry.npmjs.org/universal-analytics/-/universal-analytics-0.3.10.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/universal-analytics/-/universal-analytics-0.3.10.tgz"
     },
     "unpipe": {
       "version": "1.0.0",
       "from": "unpipe@>=1.0.0 <1.1.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz"
     },
     "unzip": {
       "version": "0.1.11",
       "from": "unzip@>=0.1.9 <0.2.0",
       "resolved": "https://registry.npmjs.org/unzip/-/unzip-0.1.11.tgz",
-      "dev": true,
       "dependencies": {
         "readable-stream": {
           "version": "1.0.33",
           "from": "readable-stream@>=1.0.31 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz"
         }
       }
     },
     "unzip-response": {
       "version": "1.0.2",
       "from": "unzip-response@>=1.0.2 <2.0.0",
-      "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-1.0.2.tgz"
     },
     "update-notifier": {
       "version": "1.0.3",
       "from": "update-notifier@>=1.0.2 <2.0.0",
-      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-1.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-1.0.3.tgz"
     },
     "upper-case": {
       "version": "1.1.3",
       "from": "upper-case@>=1.1.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz"
     },
     "upper-case-first": {
       "version": "1.1.2",
       "from": "upper-case-first@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-1.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-1.1.2.tgz"
     },
     "url": {
       "version": "0.10.3",
       "from": "url@>=0.10.1 <0.11.0",
       "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-      "dev": true,
       "dependencies": {
         "punycode": {
           "version": "1.3.2",
           "from": "punycode@1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz"
         }
       }
     },
     "url-parse-lax": {
       "version": "1.0.0",
       "from": "url-parse-lax@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz"
     },
     "user-home": {
       "version": "1.1.1",
       "from": "user-home@>=1.1.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz"
     },
     "useragent": {
       "version": "2.1.9",
       "from": "useragent@>=2.1.6 <3.0.0",
       "resolved": "https://registry.npmjs.org/useragent/-/useragent-2.1.9.tgz",
-      "dev": true,
       "dependencies": {
         "lru-cache": {
           "version": "2.2.4",
           "from": "lru-cache@>=2.2.0 <2.3.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.2.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.2.4.tgz"
         }
       }
     },
     "utf8": {
       "version": "2.1.0",
       "from": "utf8@2.1.0",
-      "resolved": "https://registry.npmjs.org/utf8/-/utf8-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/utf8/-/utf8-2.1.0.tgz"
     },
     "util": {
       "version": "0.10.3",
       "from": "util@>=0.10.1 <0.11.0",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz"
     },
     "util-deprecate": {
       "version": "1.0.2",
       "from": "util-deprecate@>=1.0.1 <1.1.0",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
     },
     "utils-merge": {
       "version": "1.0.0",
       "from": "utils-merge@1.0.0",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz"
     },
     "uuid": {
       "version": "2.0.3",
       "from": "uuid@>=2.0.1 <3.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz"
     },
     "v8flags": {
       "version": "2.0.11",
       "from": "v8flags@>=2.0.2 <3.0.0",
-      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.0.11.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.0.11.tgz"
     },
     "validate-npm-package-license": {
       "version": "3.0.1",
       "from": "validate-npm-package-license@>=3.0.1 <4.0.0",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz"
     },
     "validate.js": {
       "version": "0.9.0",
       "from": "validate.js@>=0.9.0 <0.10.0",
-      "resolved": "https://registry.npmjs.org/validate.js/-/validate.js-0.9.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/validate.js/-/validate.js-0.9.0.tgz"
     },
     "vargs": {
       "version": "0.1.0",
       "from": "vargs@>=0.1.0 <0.2.0",
-      "resolved": "https://registry.npmjs.org/vargs/-/vargs-0.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/vargs/-/vargs-0.1.0.tgz"
     },
     "vary": {
       "version": "1.0.1",
       "from": "vary@>=1.0.1 <1.1.0",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.0.1.tgz"
     },
     "verror": {
       "version": "1.3.6",
       "from": "verror@1.3.6",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz"
     },
     "vhost": {
       "version": "3.0.2",
       "from": "vhost@>=3.0.1 <3.1.0",
-      "resolved": "https://registry.npmjs.org/vhost/-/vhost-3.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/vhost/-/vhost-3.0.2.tgz"
     },
     "vinyl-fs": {
       "version": "0.3.14",
       "from": "vinyl-fs@>=0.3.0 <0.4.0",
       "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-0.3.14.tgz",
-      "dev": true,
       "dependencies": {
         "clone": {
           "version": "0.2.0",
           "from": "clone@>=0.2.0 <0.3.0",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz"
         },
         "strip-bom": {
           "version": "1.0.0",
           "from": "strip-bom@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-1.0.0.tgz"
         },
         "vinyl": {
           "version": "0.4.6",
           "from": "vinyl@>=0.4.0 <0.5.0",
-          "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz"
         }
       }
     },
     "vlq": {
       "version": "0.2.1",
       "from": "vlq@>=0.2.1 <0.3.0",
-      "resolved": "https://registry.npmjs.org/vlq/-/vlq-0.2.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/vlq/-/vlq-0.2.1.tgz"
     },
     "vm-browserify": {
       "version": "0.0.4",
       "from": "vm-browserify@>=0.0.1 <0.1.0",
-      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz"
     },
     "void-elements": {
       "version": "2.0.1",
       "from": "void-elements@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz"
     },
     "vrsource-tslint-rules": {
       "version": "4.0.0",
       "from": "vrsource-tslint-rules@>=4.0.0 <5.0.0",
-      "resolved": "https://registry.npmjs.org/vrsource-tslint-rules/-/vrsource-tslint-rules-4.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/vrsource-tslint-rules/-/vrsource-tslint-rules-4.0.0.tgz"
     },
     "watchpack": {
       "version": "0.2.9",
       "from": "watchpack@>=0.2.1 <0.3.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-0.2.9.tgz",
-      "dev": true,
       "dependencies": {
         "async": {
           "version": "0.9.2",
           "from": "async@>=0.9.0 <0.10.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
         },
         "graceful-fs": {
           "version": "4.1.2",
           "from": "graceful-fs@>=4.1.2 <5.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.2.tgz"
         }
       }
     },
@@ -9465,141 +8121,118 @@
       "version": "0.3.12",
       "from": "wd@>=0.3.4 <0.4.0",
       "resolved": "https://registry.npmjs.org/wd/-/wd-0.3.12.tgz",
-      "dev": true,
       "dependencies": {
         "ansi-regex": {
           "version": "2.0.0",
           "from": "ansi-regex@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
         },
         "ansi-styles": {
           "version": "2.1.0",
           "from": "ansi-styles@>=2.1.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.1.0.tgz"
         },
         "asn1": {
           "version": "0.1.11",
           "from": "asn1@0.1.11",
-          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.1.11.tgz"
         },
         "async": {
           "version": "1.0.0",
           "from": "async@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async/-/async-1.0.0.tgz"
         },
         "aws-sign2": {
           "version": "0.5.0",
           "from": "aws-sign2@>=0.5.0 <0.6.0",
-          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.5.0.tgz"
         },
         "caseless": {
           "version": "0.9.0",
           "from": "caseless@>=0.9.0 <0.10.0",
-          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.9.0.tgz"
         },
         "chalk": {
           "version": "1.1.1",
           "from": "chalk@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.1.tgz"
         },
         "combined-stream": {
           "version": "0.0.7",
           "from": "combined-stream@>=0.0.5 <0.1.0",
-          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.7.tgz"
         },
         "delayed-stream": {
           "version": "0.0.5",
           "from": "delayed-stream@0.0.5",
-          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tgz"
         },
         "form-data": {
           "version": "0.2.0",
           "from": "form-data@>=0.2.0 <0.3.0",
           "resolved": "https://registry.npmjs.org/form-data/-/form-data-0.2.0.tgz",
-          "dev": true,
           "dependencies": {
             "async": {
               "version": "0.9.2",
               "from": "async@>=0.9.0 <0.10.0",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz"
             }
           }
         },
         "har-validator": {
           "version": "1.8.0",
           "from": "har-validator@>=1.4.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-1.8.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-1.8.0.tgz"
         },
         "has-ansi": {
           "version": "2.0.0",
           "from": "has-ansi@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"
         },
         "hawk": {
           "version": "2.3.1",
           "from": "hawk@>=2.3.0 <2.4.0",
-          "resolved": "https://registry.npmjs.org/hawk/-/hawk-2.3.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/hawk/-/hawk-2.3.1.tgz"
         },
         "http-signature": {
           "version": "0.10.1",
           "from": "http-signature@>=0.10.0 <0.11.0",
-          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-0.10.1.tgz"
         },
         "lodash": {
           "version": "3.9.3",
           "from": "lodash@>=3.9.3 <3.10.0",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.9.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.9.3.tgz"
         },
         "oauth-sign": {
           "version": "0.6.0",
           "from": "oauth-sign@>=0.6.0 <0.7.0",
-          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.6.0.tgz"
         },
         "qs": {
           "version": "2.4.2",
           "from": "qs@>=2.4.0 <2.5.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-2.4.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/qs/-/qs-2.4.2.tgz"
         },
         "request": {
           "version": "2.55.0",
           "from": "request@>=2.55.0 <2.56.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.55.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/request/-/request-2.55.0.tgz"
         },
         "strip-ansi": {
           "version": "3.0.0",
           "from": "strip-ansi@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz"
         },
         "supports-color": {
           "version": "2.0.0",
           "from": "supports-color@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
         },
         "underscore.string": {
           "version": "3.0.3",
           "from": "underscore.string@>=3.0.3 <3.1.0",
-          "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.0.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.0.3.tgz"
         }
       }
     },
@@ -9607,69 +8240,58 @@
       "version": "1.12.9",
       "from": "webpack@>=1.12.6 <2.0.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-1.12.9.tgz",
-      "dev": true,
       "dependencies": {
         "async": {
           "version": "1.5.0",
           "from": "async@>=1.3.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.5.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.0.tgz"
         },
         "camelcase": {
           "version": "1.2.1",
           "from": "camelcase@>=1.0.2 <2.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz"
         },
         "cliui": {
           "version": "2.1.0",
           "from": "cliui@>=2.1.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz"
         },
         "source-map": {
           "version": "0.5.3",
           "from": "source-map@>=0.5.1 <0.6.0",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.3.tgz"
         },
         "supports-color": {
           "version": "3.1.2",
           "from": "supports-color@>=3.1.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.1.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.1.2.tgz"
         },
         "uglify-js": {
           "version": "2.6.1",
           "from": "uglify-js@>=2.6.0 <2.7.0",
           "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.6.1.tgz",
-          "dev": true,
           "dependencies": {
             "async": {
               "version": "0.2.10",
               "from": "async@0.2.10",
-              "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-              "dev": true
+              "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
             }
           }
         },
         "window-size": {
           "version": "0.1.0",
           "from": "window-size@0.1.0",
-          "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz"
         },
         "wordwrap": {
           "version": "0.0.2",
           "from": "wordwrap@0.0.2",
-          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz"
         },
         "yargs": {
           "version": "3.10.0",
           "from": "yargs@>=3.10.0 <3.11.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz"
         }
       }
     },
@@ -9677,322 +8299,271 @@
       "version": "0.6.8",
       "from": "webpack-core@>=0.6.0 <0.7.0",
       "resolved": "https://registry.npmjs.org/webpack-core/-/webpack-core-0.6.8.tgz",
-      "dev": true,
       "dependencies": {
         "source-map": {
           "version": "0.4.4",
           "from": "source-map@>=0.4.1 <0.5.0",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz"
         }
       }
     },
     "websocket-driver": {
       "version": "0.6.3",
       "from": "websocket-driver@>=0.5.1",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.3.tgz"
     },
     "websocket-extensions": {
       "version": "0.1.1",
       "from": "websocket-extensions@>=0.1.1",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.1.tgz"
     },
     "whatwg-fetch": {
       "version": "0.9.0",
       "from": "whatwg-fetch@>=0.9.0 <0.10.0",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz"
     },
     "when": {
       "version": "3.7.2",
       "from": "when@3.7.2",
-      "resolved": "https://registry.npmjs.org/when/-/when-3.7.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/when/-/when-3.7.2.tgz"
     },
     "which": {
       "version": "1.2.10",
       "from": "which@>=1.0.9 <2.0.0",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.2.10.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/which/-/which-1.2.10.tgz"
     },
     "wide-align": {
       "version": "1.1.0",
       "from": "wide-align@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.0.tgz"
     },
     "widest-line": {
       "version": "1.0.0",
       "from": "widest-line@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-1.0.0.tgz"
     },
     "window-size": {
       "version": "0.1.4",
       "from": "window-size@>=0.1.4 <0.2.0",
-      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz"
     },
     "winreg": {
       "version": "0.0.12",
       "from": "winreg@0.0.12",
-      "resolved": "https://registry.npmjs.org/winreg/-/winreg-0.0.12.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/winreg/-/winreg-0.0.12.tgz"
     },
     "winston": {
       "version": "2.3.1",
       "from": "winston@>=2.1.1 <3.0.0",
       "resolved": "https://registry.npmjs.org/winston/-/winston-2.3.1.tgz",
-      "dev": true,
       "dependencies": {
         "async": {
           "version": "1.0.0",
           "from": "async@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/async/-/async-1.0.0.tgz"
         },
         "colors": {
           "version": "1.0.3",
           "from": "colors@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz"
         }
       }
     },
     "wordwrap": {
       "version": "0.0.3",
       "from": "wordwrap@>=0.0.2 <0.1.0",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz"
     },
     "wrap-ansi": {
       "version": "1.0.0",
       "from": "wrap-ansi@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-1.0.0.tgz"
     },
     "wrappy": {
       "version": "1.0.1",
       "from": "wrappy@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.1.tgz"
     },
     "wrench": {
       "version": "1.5.8",
       "from": "wrench@>=1.5.8 <1.6.0",
-      "resolved": "https://registry.npmjs.org/wrench/-/wrench-1.5.8.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/wrench/-/wrench-1.5.8.tgz"
     },
     "write-file-atomic": {
       "version": "1.2.0",
       "from": "write-file-atomic@>=1.1.2 <2.0.0",
       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-1.2.0.tgz",
-      "dev": true,
       "dependencies": {
         "graceful-fs": {
           "version": "4.1.11",
           "from": "graceful-fs@^4.1.2",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz"
         }
       }
     },
     "ws": {
       "version": "1.1.1",
       "from": "ws@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.1.tgz"
     },
     "xdg-basedir": {
       "version": "2.0.0",
       "from": "xdg-basedir@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz"
     },
     "xhr2": {
       "version": "0.1.4",
       "from": "xhr2@>=0.1.4 <0.2.0",
-      "resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.1.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.1.4.tgz"
     },
     "xml2js": {
       "version": "0.4.15",
       "from": "xml2js@>=0.4.4 <0.5.0",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.15.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.15.tgz"
     },
     "xmlbuilder": {
       "version": "8.2.2",
       "from": "xmlbuilder@>=1.0.0",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-8.2.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-8.2.2.tgz"
     },
     "xmldom": {
       "version": "0.1.19",
       "from": "xmldom@0.1.19",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.19.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.19.tgz"
     },
     "xmlhttprequest-ssl": {
       "version": "1.5.1",
       "from": "xmlhttprequest-ssl@1.5.1",
-      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.1.tgz"
     },
     "xpath": {
       "version": "0.0.7",
       "from": "xpath@0.0.7",
-      "resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.7.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.7.tgz"
     },
     "xtend": {
       "version": "4.0.1",
       "from": "xtend@>=4.0.0 <5.0.0",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz"
     },
     "y18n": {
       "version": "3.2.0",
       "from": "y18n@>=3.2.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.0.tgz"
     },
     "yargs": {
       "version": "3.31.0",
       "from": "yargs@3.31.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.31.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.31.0.tgz"
     },
     "yarn": {
       "version": "0.19.1",
       "from": "yarn@latest",
       "resolved": "https://registry.npmjs.org/yarn/-/yarn-0.19.1.tgz",
-      "dev": true,
       "dependencies": {
         "bl": {
           "version": "1.2.0",
           "from": "bl@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.0.tgz"
         },
         "bytes": {
           "version": "2.4.0",
           "from": "bytes@>=2.4.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.4.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.4.0.tgz"
         },
         "camelcase": {
           "version": "3.0.0",
           "from": "camelcase@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz"
         },
         "isarray": {
           "version": "1.0.0",
           "from": "isarray@~1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "mime-db": {
           "version": "1.26.0",
           "from": "mime-db@>=1.26.0 <1.27.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.26.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.26.0.tgz"
         },
         "mime-types": {
           "version": "2.1.14",
           "from": "mime-types@>=2.1.7 <2.2.0",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.14.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.14.tgz"
         },
         "qs": {
           "version": "6.3.0",
           "from": "qs@>=6.3.0 <6.4.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.0.tgz"
         },
         "read": {
           "version": "1.0.7",
           "from": "read@>=1.0.7 <2.0.0",
-          "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz"
         },
         "readable-stream": {
           "version": "2.2.2",
           "from": "readable-stream@^2.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
         },
         "request": {
           "version": "2.79.0",
           "from": "request@>=2.75.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz"
         },
         "tar-stream": {
           "version": "1.5.2",
           "from": "tar-stream@>=1.5.2 <2.0.0",
-          "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.5.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.5.2.tgz"
         },
         "tough-cookie": {
           "version": "2.3.2",
           "from": "tough-cookie@>=2.3.0 <2.4.0",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz"
         },
         "user-home": {
           "version": "2.0.0",
           "from": "user-home@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/user-home/-/user-home-2.0.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/user-home/-/user-home-2.0.0.tgz"
         },
         "uuid": {
           "version": "3.0.1",
           "from": "uuid@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz"
         }
       }
     },
     "yeast": {
       "version": "0.1.2",
       "from": "yeast@0.1.2",
-      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz"
     },
     "zip-dir": {
       "version": "1.0.0",
       "from": "zip-dir@1.0.0",
-      "resolved": "https://registry.npmjs.org/zip-dir/-/zip-dir-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/zip-dir/-/zip-dir-1.0.0.tgz"
     },
     "zip-stream": {
       "version": "0.5.2",
       "from": "zip-stream@>=0.5.0 <0.6.0",
       "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-0.5.2.tgz",
-      "dev": true,
       "dependencies": {
         "lodash": {
           "version": "3.2.0",
           "from": "lodash@>=3.2.0 <3.3.0",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.2.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.2.0.tgz"
         },
         "readable-stream": {
           "version": "1.0.33",
           "from": "readable-stream@>=1.0.26 <1.1.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz"
         }
       }
     },
     "zone.js": {
-      "version": "0.8.5",
-      "from": "zone.js@0.8.5",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.5.tgz"
+      "version": "0.8.12",
+      "from": "zone.js@0.8.12",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.12.tgz"
     }
   }
 }
diff --git a/package.json b/package.json
index ff31bd2f38..f5bbab4e8b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-srcs",
-  "version": "4.1.0-beta.0",
+  "version": "5.0.0-beta.1",
   "private": true,
   "branchPattern": "2.0.*",
   "description": "Angular - a web framework for modern web apps",
@@ -10,7 +10,7 @@
   "engines": {
     "node": ">=6.9.5 <7.0.0",
     "npm": ">=3.10.7 <4.0.0",
-    "yarn": ">=0.21.3 <0.22.0"
+    "yarn": ">=0.21.3 <1.0.0"
   },
   "repository": {
     "type": "git",
@@ -24,7 +24,8 @@
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.3",
     "rxjs": "^5.0.1",
-    "zone.js": "^0.8.5"
+    "tslib": "^1.7.1",
+    "zone.js": "^0.8.12"
   },
   "optionalDependencies": {
     "fsevents": "^1.0.14"
@@ -35,7 +36,7 @@
     "@types/fs-extra": "0.0.22-alpha",
     "@types/hammerjs": "^2.0.33",
     "@types/jasmine": "^2.2.22-alpha",
-    "@types/node": "^4.0.22-alpha",
+    "@types/node": "^6.0.84",
     "@types/selenium-webdriver": "^2.53.35",
     "@types/systemjs": "^0.19.32",
     "angular": "^1.5.0",
@@ -77,23 +78,25 @@
     "nan": "^2.4.0",
     "node-uuid": "1.4.x",
     "parse5": "^3.0.1",
-    "protractor": "^4.0.11",
+    "protobufjs": "^5.0.0",
+    "protractor": "^4.0.14",
     "react": "^0.14.0",
     "rewire": "^2.3.3",
     "rho": "^0.3.0",
     "rollup": "^0.41.6",
     "rollup-plugin-commonjs": "^5.0.5",
+    "rollup-plugin-node-resolve": "^3.0.0",
     "selenium-webdriver": "^2.53.3",
     "semver": "^5.1.0",
     "sorcery": "^0.10.0",
     "source-map": "^0.5.6",
     "source-map-support": "^0.4.2",
     "systemjs": "0.18.10",
-    "ts-api-guardian": "^0.2.1",
-    "tsickle": "^0.21.1",
+    "ts-api-guardian": "^0.2.2",
+    "tsickle": "^0.23.4",
     "tslint": "^4.1.1",
     "tslint-eslint-rules": "^3.1.0",
-    "typescript": "^2.1.5",
+    "typescript": "^2.3.4",
     "universal-analytics": "^0.3.9",
     "vrsource-tslint-rules": "^4.0.0",
     "webpack": "^1.12.6",
diff --git a/packages/animations/browser/rollup.config.js b/packages/animations/browser/rollup.config.js
index c3505f20f7..736888fbff 100644
--- a/packages/animations/browser/rollup.config.js
+++ b/packages/animations/browser/rollup.config.js
@@ -6,15 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/animations': 'ng.animations'
+};
+
 export default {
   entry: '../../../dist/packages-dist/animations/@angular/animations/browser.es5.js',
   dest: '../../../dist/packages-dist/animations/bundles/animations-browser.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.animations.browser',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/animations': 'ng.animations'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/animations/browser/src/animation_engine.ts b/packages/animations/browser/src/animation_engine.ts
deleted file mode 100644
index d8088f145d..0000000000
--- a/packages/animations/browser/src/animation_engine.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-import {AnimationPlayer, AnimationTriggerMetadata} from '@angular/animations';
-
-export abstract class AnimationEngine {
-  abstract registerTrigger(trigger: AnimationTriggerMetadata, name?: string): void;
-  abstract onInsert(element: any, domFn: () => any): void;
-  abstract onRemove(element: any, domFn: () => any): void;
-  abstract setProperty(element: any, property: string, value: any): void;
-  abstract listen(
-      element: any, eventName: string, eventPhase: string,
-      callback: (event: any) => any): () => any;
-  abstract flush(): void;
-
-  get activePlayers(): AnimationPlayer[] { throw new Error('...'); }
-  get queuedPlayers(): AnimationPlayer[] { throw new Error('...'); }
-}
diff --git a/packages/animations/browser/src/dsl/animation.ts b/packages/animations/browser/src/dsl/animation.ts
index bde7df3b8e..a76bac35cb 100644
--- a/packages/animations/browser/src/dsl/animation.ts
+++ b/packages/animations/browser/src/dsl/animation.ts
@@ -5,23 +5,22 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AnimationMetadata, AnimationPlayer, AnimationStyleMetadata, sequence, ɵStyleData} from '@angular/animations';
+import {AnimationMetadata, AnimationOptions, ɵStyleData} from '@angular/animations';
 
 import {AnimationDriver} from '../render/animation_driver';
-import {DomAnimationEngine} from '../render/dom_animation_engine';
 import {normalizeStyles} from '../util';
 
+import {Ast} from './animation_ast';
+import {buildAnimationAst} from './animation_ast_builder';
+import {buildAnimationTimelines} from './animation_timeline_builder';
 import {AnimationTimelineInstruction} from './animation_timeline_instruction';
-import {buildAnimationKeyframes} from './animation_timeline_visitor';
-import {validateAnimationSequence} from './animation_validator_visitor';
-import {AnimationStyleNormalizer} from './style_normalization/animation_style_normalizer';
+import {ElementInstructionMap} from './element_instruction_map';
 
 export class Animation {
-  private _animationAst: AnimationMetadata;
-  constructor(input: AnimationMetadata|AnimationMetadata[]) {
-    const ast =
-        Array.isArray(input) ? sequence(<AnimationMetadata[]>input) : <AnimationMetadata>input;
-    const errors = validateAnimationSequence(ast);
+  private _animationAst: Ast;
+  constructor(private _driver: AnimationDriver, input: AnimationMetadata|AnimationMetadata[]) {
+    const errors: any[] = [];
+    const ast = buildAnimationAst(input, errors);
     if (errors.length) {
       const errorMessage = `animation validation failed:\n${errors.join("\n")}`;
       throw new Error(errorMessage);
@@ -30,26 +29,21 @@ export class Animation {
   }
 
   buildTimelines(
-      startingStyles: ɵStyleData|ɵStyleData[],
-      destinationStyles: ɵStyleData|ɵStyleData[]): AnimationTimelineInstruction[] {
+      element: any, startingStyles: ɵStyleData|ɵStyleData[],
+      destinationStyles: ɵStyleData|ɵStyleData[], options: AnimationOptions,
+      subInstructions?: ElementInstructionMap): AnimationTimelineInstruction[] {
     const start = Array.isArray(startingStyles) ? normalizeStyles(startingStyles) :
                                                   <ɵStyleData>startingStyles;
     const dest = Array.isArray(destinationStyles) ? normalizeStyles(destinationStyles) :
                                                     <ɵStyleData>destinationStyles;
-    return buildAnimationKeyframes(this._animationAst, start, dest);
-  }
-
-  // this is only used for development demo purposes for now
-  private create(
-      injector: any, element: any, startingStyles: ɵStyleData = {},
-      destinationStyles: ɵStyleData = {}): AnimationPlayer {
-    const instructions = this.buildTimelines(startingStyles, destinationStyles);
-
-    // note the code below is only here to make the tests happy (once the new renderer is
-    // within core then the code below will interact with Renderer.transition(...))
-    const driver: AnimationDriver = injector.get(AnimationDriver);
-    const normalizer: AnimationStyleNormalizer = injector.get(AnimationStyleNormalizer);
-    const engine = new DomAnimationEngine(driver, normalizer);
-    return engine.animateTimeline(element, instructions);
+    const errors: any = [];
+    subInstructions = subInstructions || new ElementInstructionMap();
+    const result = buildAnimationTimelines(
+        this._driver, element, this._animationAst, start, dest, options, subInstructions, errors);
+    if (errors.length) {
+      const errorMessage = `animation building failed:\n${errors.join("\n")}`;
+      throw new Error(errorMessage);
+    }
+    return result;
   }
 }
diff --git a/packages/animations/browser/src/dsl/animation_ast.ts b/packages/animations/browser/src/dsl/animation_ast.ts
new file mode 100644
index 0000000000..54e7ffec86
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_ast.ts
@@ -0,0 +1,150 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AnimateTimings, AnimationOptions, ɵStyleData} from '@angular/animations';
+
+const EMPTY_ANIMATION_OPTIONS: AnimationOptions = {};
+
+export interface AstVisitor {
+  visitTrigger(ast: TriggerAst, context: any): any;
+  visitState(ast: StateAst, context: any): any;
+  visitTransition(ast: TransitionAst, context: any): any;
+  visitSequence(ast: SequenceAst, context: any): any;
+  visitGroup(ast: GroupAst, context: any): any;
+  visitAnimate(ast: AnimateAst, context: any): any;
+  visitStyle(ast: StyleAst, context: any): any;
+  visitKeyframes(ast: KeyframesAst, context: any): any;
+  visitReference(ast: ReferenceAst, context: any): any;
+  visitAnimateChild(ast: AnimateChildAst, context: any): any;
+  visitAnimateRef(ast: AnimateRefAst, context: any): any;
+  visitQuery(ast: QueryAst, context: any): any;
+  visitStagger(ast: StaggerAst, context: any): any;
+  visitTiming(ast: TimingAst, context: any): any;
+}
+
+export abstract class Ast {
+  abstract visit(ast: AstVisitor, context: any): any;
+  public options: AnimationOptions = EMPTY_ANIMATION_OPTIONS;
+
+  get params(): {[name: string]: any}|null { return this.options['params'] || null; }
+}
+
+export class TriggerAst extends Ast {
+  public queryCount: number = 0;
+  public depCount: number = 0;
+
+  constructor(public name: string, public states: StateAst[], public transitions: TransitionAst[]) {
+    super();
+  }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitTrigger(this, context); }
+}
+
+export class StateAst extends Ast {
+  constructor(public name: string, public style: StyleAst) { super(); }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitState(this, context); }
+}
+
+export class TransitionAst extends Ast {
+  public queryCount: number = 0;
+  public depCount: number = 0;
+
+  constructor(
+      public matchers: ((fromState: string, toState: string) => boolean)[], public animation: Ast) {
+    super();
+  }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitTransition(this, context); }
+}
+
+export class SequenceAst extends Ast {
+  constructor(public steps: Ast[]) { super(); }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitSequence(this, context); }
+}
+
+export class GroupAst extends Ast {
+  constructor(public steps: Ast[]) { super(); }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitGroup(this, context); }
+}
+
+export class AnimateAst extends Ast {
+  constructor(public timings: TimingAst, public style: StyleAst|KeyframesAst) { super(); }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitAnimate(this, context); }
+}
+
+export class StyleAst extends Ast {
+  public isEmptyStep = false;
+
+  constructor(
+      public styles: (ɵStyleData|string)[], public easing: string|null,
+      public offset: number|null) {
+    super();
+  }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitStyle(this, context); }
+}
+
+export class KeyframesAst extends Ast {
+  constructor(public styles: StyleAst[]) { super(); }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitKeyframes(this, context); }
+}
+
+export class ReferenceAst extends Ast {
+  constructor(public animation: Ast) { super(); }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitReference(this, context); }
+}
+
+export class AnimateChildAst extends Ast {
+  constructor() { super(); }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitAnimateChild(this, context); }
+}
+
+export class AnimateRefAst extends Ast {
+  constructor(public animation: ReferenceAst) { super(); }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitAnimateRef(this, context); }
+}
+
+export class QueryAst extends Ast {
+  public originalSelector: string;
+
+  constructor(
+      public selector: string, public limit: number, public optional: boolean,
+      public includeSelf: boolean, public animation: Ast) {
+    super();
+  }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitQuery(this, context); }
+}
+
+export class StaggerAst extends Ast {
+  constructor(public timings: AnimateTimings, public animation: Ast) { super(); }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitStagger(this, context); }
+}
+
+export class TimingAst extends Ast {
+  constructor(
+      public duration: number, public delay: number = 0, public easing: string|null = null) {
+    super();
+  }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitTiming(this, context); }
+}
+
+export class DynamicTimingAst extends TimingAst {
+  constructor(public value: string) { super(0, 0, ''); }
+
+  visit(visitor: AstVisitor, context: any): any { return visitor.visitTiming(this, context); }
+}
diff --git a/packages/animations/browser/src/dsl/animation_ast_builder.ts b/packages/animations/browser/src/dsl/animation_ast_builder.ts
new file mode 100644
index 0000000000..d373ab145c
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_ast_builder.ts
@@ -0,0 +1,476 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AUTO_STYLE, AnimateTimings, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, style, ɵStyleData} from '@angular/animations';
+
+import {getOrSetAsInMap} from '../render/shared';
+import {ENTER_SELECTOR, LEAVE_SELECTOR, NG_ANIMATING_SELECTOR, NG_TRIGGER_SELECTOR, copyObj, normalizeAnimationEntry, resolveTiming, validateStyleParams} from '../util';
+
+import {AnimateAst, AnimateChildAst, AnimateRefAst, Ast, DynamicTimingAst, GroupAst, KeyframesAst, QueryAst, ReferenceAst, SequenceAst, StaggerAst, StateAst, StyleAst, TimingAst, TransitionAst, TriggerAst} from './animation_ast';
+import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
+import {parseTransitionExpr} from './animation_transition_expr';
+
+const SELF_TOKEN = ':self';
+const SELF_TOKEN_REGEX = new RegExp(`\s*${SELF_TOKEN}\s*,?`, 'g');
+
+/*
+ * [Validation]
+ * The visitor code below will traverse the animation AST generated by the animation verb functions
+ * (the output is a tree of objects) and attempt to perform a series of validations on the data. The
+ * following corner-cases will be validated:
+ *
+ * 1. Overlap of animations
+ * Given that a CSS property cannot be animated in more than one place at the same time, it's
+ * important that this behaviour is detected and validated. The way in which this occurs is that
+ * each time a style property is examined, a string-map containing the property will be updated with
+ * the start and end times for when the property is used within an animation step.
+ *
+ * If there are two or more parallel animations that are currently running (these are invoked by the
+ * group()) on the same element then the validator will throw an error. Since the start/end timing
+ * values are collected for each property then if the current animation step is animating the same
+ * property and its timing values fall anywhere into the window of time that the property is
+ * currently being animated within then this is what causes an error.
+ *
+ * 2. Timing values
+ * The validator will validate to see if a timing value of `duration delay easing` or
+ * `durationNumber` is valid or not.
+ *
+ * (note that upon validation the code below will replace the timing data with an object containing
+ * {duration,delay,easing}.
+ *
+ * 3. Offset Validation
+ * Each of the style() calls are allowed to have an offset value when placed inside of keyframes().
+ * Offsets within keyframes() are considered valid when:
+ *
+ *   - No offsets are used at all
+ *   - Each style() entry contains an offset value
+ *   - Each offset is between 0 and 1
+ *   - Each offset is greater to or equal than the previous one
+ *
+ * Otherwise an error will be thrown.
+ */
+export function buildAnimationAst(
+    metadata: AnimationMetadata | AnimationMetadata[], errors: any[]): Ast {
+  return new AnimationAstBuilderVisitor().build(metadata, errors);
+}
+
+const LEAVE_TOKEN = ':leave';
+const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
+const ENTER_TOKEN = ':enter';
+const ENTER_TOKEN_REGEX = new RegExp(ENTER_TOKEN, 'g');
+const ROOT_SELECTOR = '';
+
+export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
+  build(metadata: AnimationMetadata|AnimationMetadata[], errors: any[]): Ast {
+    const context = new AnimationAstBuilderContext(errors);
+    this._resetContextStyleTimingState(context);
+    return visitAnimationNode(this, normalizeAnimationEntry(metadata), context) as Ast;
+  }
+
+  private _resetContextStyleTimingState(context: AnimationAstBuilderContext) {
+    context.currentQuerySelector = ROOT_SELECTOR;
+    context.collectedStyles = {};
+    context.collectedStyles[ROOT_SELECTOR] = {};
+    context.currentTime = 0;
+  }
+
+  visitTrigger(metadata: AnimationTriggerMetadata, context: AnimationAstBuilderContext):
+      TriggerAst {
+    let queryCount = context.queryCount = 0;
+    let depCount = context.depCount = 0;
+    const states: StateAst[] = [];
+    const transitions: TransitionAst[] = [];
+    metadata.definitions.forEach(def => {
+      this._resetContextStyleTimingState(context);
+      if (def.type == AnimationMetadataType.State) {
+        const stateDef = def as AnimationStateMetadata;
+        const name = stateDef.name;
+        name.split(/\s*,\s*/).forEach(n => {
+          stateDef.name = n;
+          states.push(this.visitState(stateDef, context));
+        });
+        stateDef.name = name;
+      } else if (def.type == AnimationMetadataType.Transition) {
+        const transition = this.visitTransition(def as AnimationTransitionMetadata, context);
+        queryCount += transition.queryCount;
+        depCount += transition.depCount;
+        transitions.push(transition);
+      } else {
+        context.errors.push(
+            'only state() and transition() definitions can sit inside of a trigger()');
+      }
+    });
+    const ast = new TriggerAst(metadata.name, states, transitions);
+    ast.options = normalizeAnimationOptions(metadata.options);
+    ast.queryCount = queryCount;
+    ast.depCount = depCount;
+    return ast;
+  }
+
+  visitState(metadata: AnimationStateMetadata, context: AnimationAstBuilderContext): StateAst {
+    return new StateAst(metadata.name, this.visitStyle(metadata.styles, context));
+  }
+
+  visitTransition(metadata: AnimationTransitionMetadata, context: AnimationAstBuilderContext):
+      TransitionAst {
+    context.queryCount = 0;
+    context.depCount = 0;
+    const entry = visitAnimationNode(this, normalizeAnimationEntry(metadata.animation), context);
+    const matchers = parseTransitionExpr(metadata.expr, context.errors);
+    const ast = new TransitionAst(matchers, entry);
+    ast.options = normalizeAnimationOptions(metadata.options);
+    ast.queryCount = context.queryCount;
+    ast.depCount = context.depCount;
+    return ast;
+  }
+
+  visitSequence(metadata: AnimationSequenceMetadata, context: AnimationAstBuilderContext):
+      SequenceAst {
+    const ast = new SequenceAst(metadata.steps.map(s => visitAnimationNode(this, s, context)));
+    ast.options = normalizeAnimationOptions(metadata.options);
+    return ast;
+  }
+
+  visitGroup(metadata: AnimationGroupMetadata, context: AnimationAstBuilderContext): GroupAst {
+    const currentTime = context.currentTime;
+    let furthestTime = 0;
+    const steps = metadata.steps.map(step => {
+      context.currentTime = currentTime;
+      const innerAst = visitAnimationNode(this, step, context);
+      furthestTime = Math.max(furthestTime, context.currentTime);
+      return innerAst;
+    });
+
+    context.currentTime = furthestTime;
+    const ast = new GroupAst(steps);
+    ast.options = normalizeAnimationOptions(metadata.options);
+    return ast;
+  }
+
+  visitAnimate(metadata: AnimationAnimateMetadata, context: AnimationAstBuilderContext):
+      AnimateAst {
+    const timingAst = constructTimingAst(metadata.timings, context.errors);
+    context.currentAnimateTimings = timingAst;
+
+    let styles: StyleAst|KeyframesAst;
+    let styleMetadata: AnimationMetadata = metadata.styles ? metadata.styles : style({});
+    if (styleMetadata.type == AnimationMetadataType.Keyframes) {
+      styles = this.visitKeyframes(styleMetadata as AnimationKeyframesSequenceMetadata, context);
+    } else {
+      let styleMetadata = metadata.styles as AnimationStyleMetadata;
+      let isEmpty = false;
+      if (!styleMetadata) {
+        isEmpty = true;
+        const newStyleData: {[prop: string]: string | number} = {};
+        if (timingAst.easing) {
+          newStyleData['easing'] = timingAst.easing;
+        }
+        styleMetadata = style(newStyleData);
+      }
+      context.currentTime += timingAst.duration + timingAst.delay;
+      const styleAst = this.visitStyle(styleMetadata, context);
+      styleAst.isEmptyStep = isEmpty;
+      styles = styleAst;
+    }
+
+    context.currentAnimateTimings = null;
+    return new AnimateAst(timingAst, styles);
+  }
+
+  visitStyle(metadata: AnimationStyleMetadata, context: AnimationAstBuilderContext): StyleAst {
+    const ast = this._makeStyleAst(metadata, context);
+    this._validateStyleAst(ast, context);
+    return ast;
+  }
+
+  private _makeStyleAst(metadata: AnimationStyleMetadata, context: AnimationAstBuilderContext):
+      StyleAst {
+    const styles: (ɵStyleData | string)[] = [];
+    if (Array.isArray(metadata.styles)) {
+      (metadata.styles as(ɵStyleData | string)[]).forEach(styleTuple => {
+        if (typeof styleTuple == 'string') {
+          if (styleTuple == AUTO_STYLE) {
+            styles.push(styleTuple as string);
+          } else {
+            context.errors.push(`The provided style string value ${styleTuple} is not allowed.`);
+          }
+        } else {
+          styles.push(styleTuple as ɵStyleData);
+        }
+      })
+    } else {
+      styles.push(metadata.styles);
+    }
+
+    let collectedEasing: string|null = null;
+    styles.forEach(styleData => {
+      if (isObject(styleData)) {
+        const styleMap = styleData as ɵStyleData;
+        const easing = styleMap['easing'];
+        if (easing) {
+          collectedEasing = easing as string;
+          delete styleMap['easing'];
+        }
+      }
+    });
+    return new StyleAst(styles, collectedEasing, metadata.offset);
+  }
+
+  private _validateStyleAst(ast: StyleAst, context: AnimationAstBuilderContext): void {
+    const timings = context.currentAnimateTimings;
+    let endTime = context.currentTime;
+    let startTime = context.currentTime;
+    if (timings && startTime > 0) {
+      startTime -= timings.duration + timings.delay;
+    }
+
+    ast.styles.forEach(tuple => {
+      if (typeof tuple == 'string') return;
+
+      Object.keys(tuple).forEach(prop => {
+        const collectedStyles = context.collectedStyles[context.currentQuerySelector !];
+        const collectedEntry = collectedStyles[prop];
+        let updateCollectedStyle = true;
+        if (collectedEntry) {
+          if (startTime != endTime && startTime >= collectedEntry.startTime &&
+              endTime <= collectedEntry.endTime) {
+            context.errors.push(
+                `The CSS property "${prop}" that exists between the times of "${collectedEntry.startTime}ms" and "${collectedEntry.endTime}ms" is also being animated in a parallel animation between the times of "${startTime}ms" and "${endTime}ms"`);
+            updateCollectedStyle = false;
+          }
+
+          // we always choose the smaller start time value since we
+          // want to have a record of the entire animation window where
+          // the style property is being animated in between
+          startTime = collectedEntry.startTime;
+        }
+
+        if (updateCollectedStyle) {
+          collectedStyles[prop] = {startTime, endTime};
+        }
+
+        if (context.options) {
+          validateStyleParams(tuple[prop], context.options, context.errors);
+        }
+      });
+    });
+  }
+
+  visitKeyframes(metadata: AnimationKeyframesSequenceMetadata, context: AnimationAstBuilderContext):
+      KeyframesAst {
+    if (!context.currentAnimateTimings) {
+      context.errors.push(`keyframes() must be placed inside of a call to animate()`);
+      return new KeyframesAst([]);
+    }
+
+    const MAX_KEYFRAME_OFFSET = 1;
+
+    let totalKeyframesWithOffsets = 0;
+    const offsets: number[] = [];
+    let offsetsOutOfOrder = false;
+    let keyframesOutOfRange = false;
+    let previousOffset: number = 0;
+
+    const keyframes: StyleAst[] = metadata.steps.map(styles => {
+      const style = this._makeStyleAst(styles, context);
+      let offsetVal: number|null =
+          style.offset != null ? style.offset : consumeOffset(style.styles);
+      let offset: number = 0;
+      if (offsetVal != null) {
+        totalKeyframesWithOffsets++;
+        offset = style.offset = offsetVal;
+      }
+      keyframesOutOfRange = keyframesOutOfRange || offset < 0 || offset > 1;
+      offsetsOutOfOrder = offsetsOutOfOrder || offset < previousOffset;
+      previousOffset = offset;
+      offsets.push(offset);
+      return style;
+    });
+
+    if (keyframesOutOfRange) {
+      context.errors.push(`Please ensure that all keyframe offsets are between 0 and 1`);
+    }
+
+    if (offsetsOutOfOrder) {
+      context.errors.push(`Please ensure that all keyframe offsets are in order`);
+    }
+
+    const length = metadata.steps.length;
+    let generatedOffset = 0;
+    if (totalKeyframesWithOffsets > 0 && totalKeyframesWithOffsets < length) {
+      context.errors.push(`Not all style() steps within the declared keyframes() contain offsets`);
+    } else if (totalKeyframesWithOffsets == 0) {
+      generatedOffset = MAX_KEYFRAME_OFFSET / (length - 1);
+    }
+
+    const limit = length - 1;
+    const currentTime = context.currentTime;
+    const currentAnimateTimings = context.currentAnimateTimings !;
+    const animateDuration = currentAnimateTimings.duration;
+    keyframes.forEach((kf, i) => {
+      const offset = generatedOffset > 0 ? (i == limit ? 1 : (generatedOffset * i)) : offsets[i];
+      const durationUpToThisFrame = offset * animateDuration;
+      context.currentTime = currentTime + currentAnimateTimings.delay + durationUpToThisFrame;
+      currentAnimateTimings.duration = durationUpToThisFrame;
+      this._validateStyleAst(kf, context);
+      kf.offset = offset;
+    });
+
+    return new KeyframesAst(keyframes);
+  }
+
+  visitReference(metadata: AnimationReferenceMetadata, context: AnimationAstBuilderContext):
+      ReferenceAst {
+    const entry = visitAnimationNode(this, normalizeAnimationEntry(metadata.animation), context);
+    const ast = new ReferenceAst(entry);
+    ast.options = normalizeAnimationOptions(metadata.options);
+    return ast;
+  }
+
+  visitAnimateChild(metadata: AnimationAnimateChildMetadata, context: AnimationAstBuilderContext):
+      AnimateChildAst {
+    context.depCount++;
+    const ast = new AnimateChildAst();
+    ast.options = normalizeAnimationOptions(metadata.options);
+    return ast;
+  }
+
+  visitAnimateRef(metadata: AnimationAnimateRefMetadata, context: AnimationAstBuilderContext):
+      AnimateRefAst {
+    const animation = this.visitReference(metadata.animation, context);
+    const ast = new AnimateRefAst(animation);
+    ast.options = normalizeAnimationOptions(metadata.options);
+    return ast;
+  }
+
+  visitQuery(metadata: AnimationQueryMetadata, context: AnimationAstBuilderContext): QueryAst {
+    const parentSelector = context.currentQuerySelector !;
+    const options = (metadata.options || {}) as AnimationQueryOptions;
+
+    context.queryCount++;
+    context.currentQuery = metadata;
+    const [selector, includeSelf] = normalizeSelector(metadata.selector);
+    context.currentQuerySelector =
+        parentSelector.length ? (parentSelector + ' ' + selector) : selector;
+    getOrSetAsInMap(context.collectedStyles, context.currentQuerySelector, {});
+
+    const entry = visitAnimationNode(this, normalizeAnimationEntry(metadata.animation), context);
+    context.currentQuery = null;
+    context.currentQuerySelector = parentSelector;
+
+    const ast = new QueryAst(selector, options.limit || 0, !!options.optional, includeSelf, entry);
+    ast.originalSelector = metadata.selector;
+    ast.options = normalizeAnimationOptions(metadata.options);
+    return ast;
+  }
+
+  visitStagger(metadata: AnimationStaggerMetadata, context: AnimationAstBuilderContext):
+      StaggerAst {
+    if (!context.currentQuery) {
+      context.errors.push(`stagger() can only be used inside of query()`);
+    }
+    const timings = metadata.timings === 'full' ?
+        {duration: 0, delay: 0, easing: 'full'} :
+        resolveTiming(metadata.timings, context.errors, true);
+    const animation =
+        visitAnimationNode(this, normalizeAnimationEntry(metadata.animation), context);
+    return new StaggerAst(timings, animation);
+  }
+}
+
+function normalizeSelector(selector: string): [string, boolean] {
+  const hasAmpersand = selector.split(/\s*,\s*/).find(token => token == SELF_TOKEN) ? true : false;
+  if (hasAmpersand) {
+    selector = selector.replace(SELF_TOKEN_REGEX, '');
+  }
+
+  selector = selector.replace(ENTER_TOKEN_REGEX, ENTER_SELECTOR)
+                 .replace(LEAVE_TOKEN_REGEX, LEAVE_SELECTOR)
+                 .replace(/@\*/g, NG_TRIGGER_SELECTOR)
+                 .replace(/@\w+/g, match => NG_TRIGGER_SELECTOR + '-' + match.substr(1))
+                 .replace(/:animating/g, NG_ANIMATING_SELECTOR);
+
+  return [selector, hasAmpersand];
+}
+
+
+function normalizeParams(obj: {[key: string]: any} | any): {[key: string]: any}|null {
+  return obj ? copyObj(obj) : null;
+}
+
+export type StyleTimeTuple = {
+  startTime: number; endTime: number;
+};
+
+export class AnimationAstBuilderContext {
+  public queryCount: number = 0;
+  public depCount: number = 0;
+  public currentTransition: AnimationTransitionMetadata|null = null;
+  public currentQuery: AnimationQueryMetadata|null = null;
+  public currentQuerySelector: string|null = null;
+  public currentAnimateTimings: TimingAst|null = null;
+  public currentTime: number = 0;
+  public collectedStyles: {[selectorName: string]: {[propName: string]: StyleTimeTuple}} = {};
+  public options: AnimationOptions|null = null;
+  constructor(public errors: any[]) {}
+}
+
+function consumeOffset(styles: ɵStyleData | string | (ɵStyleData | string)[]): number|null {
+  if (typeof styles == 'string') return null;
+
+  let offset: number|null = null;
+
+  if (Array.isArray(styles)) {
+    styles.forEach(styleTuple => {
+      if (isObject(styleTuple) && styleTuple.hasOwnProperty('offset')) {
+        const obj = styleTuple as ɵStyleData;
+        offset = parseFloat(obj['offset'] as string);
+        delete obj['offset'];
+      }
+    });
+  } else if (isObject(styles) && styles.hasOwnProperty('offset')) {
+    const obj = styles as ɵStyleData;
+    offset = parseFloat(obj['offset'] as string);
+    delete obj['offset'];
+  }
+  return offset;
+}
+
+function isObject(value: any): boolean {
+  return !Array.isArray(value) && typeof value == 'object';
+}
+
+function constructTimingAst(value: string | number | AnimateTimings, errors: any[]) {
+  let timings: AnimateTimings|null = null;
+  if (value.hasOwnProperty('duration')) {
+    timings = value as AnimateTimings;
+  } else if (typeof value == 'number') {
+    const duration = resolveTiming(value as number, errors).duration;
+    return new TimingAst(value as number, 0, '');
+  }
+
+  const strValue = value as string;
+  const isDynamic = strValue.split(/\s+/).some(v => v.charAt(0) == '{' && v.charAt(1) == '{');
+  if (isDynamic) {
+    return new DynamicTimingAst(strValue);
+  }
+
+  timings = timings || resolveTiming(strValue, errors);
+  return new TimingAst(timings.duration, timings.delay, timings.easing);
+}
+
+function normalizeAnimationOptions(options: AnimationOptions | null): AnimationOptions {
+  if (options) {
+    options = copyObj(options);
+    if (options['params']) {
+      options['params'] = normalizeParams(options['params']) !;
+    }
+  } else {
+    options = {};
+  }
+  return options;
+}
diff --git a/packages/animations/browser/src/dsl/animation_dsl_visitor.ts b/packages/animations/browser/src/dsl/animation_dsl_visitor.ts
index 92b8e6f0e5..6b2176d0ab 100644
--- a/packages/animations/browser/src/dsl/animation_dsl_visitor.ts
+++ b/packages/animations/browser/src/dsl/animation_dsl_visitor.ts
@@ -5,35 +5,53 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata} from '@angular/animations';
+import {AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationQueryMetadata, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata} from '@angular/animations';
 
 export interface AnimationDslVisitor {
+  visitTrigger(ast: AnimationTriggerMetadata, context: any): any;
   visitState(ast: AnimationStateMetadata, context: any): any;
   visitTransition(ast: AnimationTransitionMetadata, context: any): any;
   visitSequence(ast: AnimationSequenceMetadata, context: any): any;
   visitGroup(ast: AnimationGroupMetadata, context: any): any;
   visitAnimate(ast: AnimationAnimateMetadata, context: any): any;
   visitStyle(ast: AnimationStyleMetadata, context: any): any;
-  visitKeyframeSequence(ast: AnimationKeyframesSequenceMetadata, context: any): any;
+  visitKeyframes(ast: AnimationKeyframesSequenceMetadata, context: any): any;
+  visitReference(ast: AnimationReferenceMetadata, context: any): any;
+  visitAnimateChild(ast: AnimationAnimateChildMetadata, context: any): any;
+  visitAnimateRef(ast: AnimationAnimateRefMetadata, context: any): any;
+  visitQuery(ast: AnimationQueryMetadata, context: any): any;
+  visitStagger(ast: AnimationStaggerMetadata, context: any): any;
 }
 
 export function visitAnimationNode(
     visitor: AnimationDslVisitor, node: AnimationMetadata, context: any) {
   switch (node.type) {
+    case AnimationMetadataType.Trigger:
+      return visitor.visitTrigger(node as AnimationTriggerMetadata, context);
     case AnimationMetadataType.State:
-      return visitor.visitState(<AnimationStateMetadata>node, context);
+      return visitor.visitState(node as AnimationStateMetadata, context);
     case AnimationMetadataType.Transition:
-      return visitor.visitTransition(<AnimationTransitionMetadata>node, context);
+      return visitor.visitTransition(node as AnimationTransitionMetadata, context);
     case AnimationMetadataType.Sequence:
-      return visitor.visitSequence(<AnimationSequenceMetadata>node, context);
+      return visitor.visitSequence(node as AnimationSequenceMetadata, context);
     case AnimationMetadataType.Group:
-      return visitor.visitGroup(<AnimationGroupMetadata>node, context);
+      return visitor.visitGroup(node as AnimationGroupMetadata, context);
     case AnimationMetadataType.Animate:
-      return visitor.visitAnimate(<AnimationAnimateMetadata>node, context);
-    case AnimationMetadataType.KeyframeSequence:
-      return visitor.visitKeyframeSequence(<AnimationKeyframesSequenceMetadata>node, context);
+      return visitor.visitAnimate(node as AnimationAnimateMetadata, context);
+    case AnimationMetadataType.Keyframes:
+      return visitor.visitKeyframes(node as AnimationKeyframesSequenceMetadata, context);
     case AnimationMetadataType.Style:
-      return visitor.visitStyle(<AnimationStyleMetadata>node, context);
+      return visitor.visitStyle(node as AnimationStyleMetadata, context);
+    case AnimationMetadataType.Reference:
+      return visitor.visitReference(node as AnimationReferenceMetadata, context);
+    case AnimationMetadataType.AnimateChild:
+      return visitor.visitAnimateChild(node as AnimationAnimateChildMetadata, context);
+    case AnimationMetadataType.AnimateRef:
+      return visitor.visitAnimateRef(node as AnimationAnimateRefMetadata, context);
+    case AnimationMetadataType.Query:
+      return visitor.visitQuery(node as AnimationQueryMetadata, context);
+    case AnimationMetadataType.Stagger:
+      return visitor.visitStagger(node as AnimationStaggerMetadata, context);
     default:
       throw new Error(`Unable to resolve animation metadata node #${node.type}`);
   }
diff --git a/packages/animations/browser/src/dsl/animation_timeline_builder.ts b/packages/animations/browser/src/dsl/animation_timeline_builder.ts
new file mode 100644
index 0000000000..85750cbc53
--- /dev/null
+++ b/packages/animations/browser/src/dsl/animation_timeline_builder.ts
@@ -0,0 +1,881 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AUTO_STYLE, AnimateChildOptions, AnimateTimings, AnimationOptions, AnimationQueryOptions, ɵPRE_STYLE as PRE_STYLE, ɵStyleData} from '@angular/animations';
+
+import {AnimationDriver} from '../render/animation_driver';
+import {copyObj, copyStyles, interpolateParams, iteratorToArray, resolveTiming, resolveTimingValue} from '../util';
+
+import {AnimateAst, AnimateChildAst, AnimateRefAst, Ast, AstVisitor, DynamicTimingAst, GroupAst, KeyframesAst, QueryAst, ReferenceAst, SequenceAst, StaggerAst, StateAst, StyleAst, TimingAst, TransitionAst, TriggerAst} from './animation_ast';
+import {AnimationTimelineInstruction, createTimelineInstruction} from './animation_timeline_instruction';
+import {ElementInstructionMap} from './element_instruction_map';
+
+const ONE_FRAME_IN_MILLISECONDS = 1;
+
+/*
+ * The code within this file aims to generate web-animations-compatible keyframes from Angular's
+ * animation DSL code.
+ *
+ * The code below will be converted from:
+ *
+ * ```
+ * sequence([
+ *   style({ opacity: 0 }),
+ *   animate(1000, style({ opacity: 0 }))
+ * ])
+ * ```
+ *
+ * To:
+ * ```
+ * keyframes = [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }]
+ * duration = 1000
+ * delay = 0
+ * easing = ''
+ * ```
+ *
+ * For this operation to cover the combination of animation verbs (style, animate, group, etc...) a
+ * combination of prototypical inheritance, AST traversal and merge-sort-like algorithms are used.
+ *
+ * [AST Traversal]
+ * Each of the animation verbs, when executed, will return an string-map object representing what
+ * type of action it is (style, animate, group, etc...) and the data associated with it. This means
+ * that when functional composition mix of these functions is evaluated (like in the example above)
+ * then it will end up producing a tree of objects representing the animation itself.
+ *
+ * When this animation object tree is processed by the visitor code below it will visit each of the
+ * verb statements within the visitor. And during each visit it will build the context of the
+ * animation keyframes by interacting with the `TimelineBuilder`.
+ *
+ * [TimelineBuilder]
+ * This class is responsible for tracking the styles and building a series of keyframe objects for a
+ * timeline between a start and end time. The builder starts off with an initial timeline and each
+ * time the AST comes across a `group()`, `keyframes()` or a combination of the two wihtin a
+ * `sequence()` then it will generate a sub timeline for each step as well as a new one after
+ * they are complete.
+ *
+ * As the AST is traversed, the timing state on each of the timelines will be incremented. If a sub
+ * timeline was created (based on one of the cases above) then the parent timeline will attempt to
+ * merge the styles used within the sub timelines into itself (only with group() this will happen).
+ * This happens with a merge operation (much like how the merge works in mergesort) and it will only
+ * copy the most recently used styles from the sub timelines into the parent timeline. This ensures
+ * that if the styles are used later on in another phase of the animation then they will be the most
+ * up-to-date values.
+ *
+ * [How Missing Styles Are Updated]
+ * Each timeline has a `backFill` property which is responsible for filling in new styles into
+ * already processed keyframes if a new style shows up later within the animation sequence.
+ *
+ * ```
+ * sequence([
+ *   style({ width: 0 }),
+ *   animate(1000, style({ width: 100 })),
+ *   animate(1000, style({ width: 200 })),
+ *   animate(1000, style({ width: 300 }))
+ *   animate(1000, style({ width: 400, height: 400 })) // notice how `height` doesn't exist anywhere
+ * else
+ * ])
+ * ```
+ *
+ * What is happening here is that the `height` value is added later in the sequence, but is missing
+ * from all previous animation steps. Therefore when a keyframe is created it would also be missing
+ * from all previous keyframes up until where it is first used. For the timeline keyframe generation
+ * to properly fill in the style it will place the previous value (the value from the parent
+ * timeline) or a default value of `*` into the backFill object. Given that each of the keyframe
+ * styles are objects that prototypically inhert from the backFill object, this means that if a
+ * value is added into the backFill then it will automatically propagate any missing values to all
+ * keyframes. Therefore the missing `height` value will be properly filled into the already
+ * processed keyframes.
+ *
+ * When a sub-timeline is created it will have its own backFill property. This is done so that
+ * styles present within the sub-timeline do not accidentally seep into the previous/future timeline
+ * keyframes
+ *
+ * (For prototypically-inherited contents to be detected a `for(i in obj)` loop must be used.)
+ *
+ * [Validation]
+ * The code in this file is not responsible for validation. That functionality happens with within
+ * the `AnimationValidatorVisitor` code.
+ */
+export function buildAnimationTimelines(
+    driver: AnimationDriver, rootElement: any, ast: Ast, startingStyles: ɵStyleData = {},
+    finalStyles: ɵStyleData = {}, options: AnimationOptions,
+    subInstructions?: ElementInstructionMap, errors: any[] = []): AnimationTimelineInstruction[] {
+  return new AnimationTimelineBuilderVisitor().buildKeyframes(
+      driver, rootElement, ast, startingStyles, finalStyles, options, subInstructions, errors);
+}
+
+export class AnimationTimelineBuilderVisitor implements AstVisitor {
+  buildKeyframes(
+      driver: AnimationDriver, rootElement: any, ast: Ast, startingStyles: ɵStyleData,
+      finalStyles: ɵStyleData, options: AnimationOptions, subInstructions?: ElementInstructionMap,
+      errors: any[] = []): AnimationTimelineInstruction[] {
+    subInstructions = subInstructions || new ElementInstructionMap();
+    const context = new AnimationTimelineContext(driver, rootElement, subInstructions, errors, []);
+    context.options = options;
+    context.currentTimeline.setStyles([startingStyles], null, context.errors, options);
+
+    ast.visit(this, context);
+
+    // this checks to see if an actual animation happened
+    const timelines = context.timelines.filter(timeline => timeline.containsAnimation());
+    if (timelines.length && Object.keys(finalStyles).length) {
+      const tl = timelines[timelines.length - 1];
+      if (!tl.allowOnlyTimelineStyles()) {
+        tl.setStyles([finalStyles], null, context.errors, options);
+      }
+    }
+
+    return timelines.length ? timelines.map(timeline => timeline.buildKeyframes()) :
+                              [createTimelineInstruction(rootElement, [], [], [], 0, 0, '', false)];
+  }
+
+  visitTrigger(ast: TriggerAst, context: AnimationTimelineContext): any {
+    // these values are not visited in this AST
+  }
+
+  visitState(ast: StateAst, context: AnimationTimelineContext): any {
+    // these values are not visited in this AST
+  }
+
+  visitTransition(ast: TransitionAst, context: AnimationTimelineContext): any {
+    // these values are not visited in this AST
+  }
+
+  visitAnimateChild(ast: AnimateChildAst, context: AnimationTimelineContext): any {
+    const elementInstructions = context.subInstructions.consume(context.element);
+    if (elementInstructions) {
+      const innerContext = context.createSubContext(ast.options);
+      const startTime = context.currentTimeline.currentTime;
+      const endTime = this._visitSubInstructions(
+          elementInstructions, innerContext, innerContext.options as AnimateChildOptions);
+      if (startTime != endTime) {
+        // we do this on the upper context because we created a sub context for
+        // the sub child animations
+        context.transformIntoNewTimeline(endTime);
+      }
+    }
+    context.previousNode = ast;
+  }
+
+  visitAnimateRef(ast: AnimateRefAst, context: AnimationTimelineContext): any {
+    const innerContext = context.createSubContext(ast.options);
+    innerContext.transformIntoNewTimeline();
+    this.visitReference(ast.animation, innerContext);
+    context.transformIntoNewTimeline(innerContext.currentTimeline.currentTime);
+    context.previousNode = ast;
+  }
+
+  private _visitSubInstructions(
+      instructions: AnimationTimelineInstruction[], context: AnimationTimelineContext,
+      options: AnimateChildOptions): number {
+    const startTime = context.currentTimeline.currentTime;
+    let furthestTime = startTime;
+
+    // this is a special-case for when a user wants to skip a sub
+    // animation from being fired entirely.
+    const duration = options.duration != null ? resolveTimingValue(options.duration) : null;
+    const delay = options.delay != null ? resolveTimingValue(options.delay) : null;
+    if (duration !== 0) {
+      instructions.forEach(instruction => {
+        const instructionTimings =
+            context.appendInstructionToTimeline(instruction, duration, delay);
+        furthestTime =
+            Math.max(furthestTime, instructionTimings.duration + instructionTimings.delay);
+      });
+    }
+
+    return furthestTime;
+  }
+
+  visitReference(ast: ReferenceAst, context: AnimationTimelineContext) {
+    context.updateOptions(ast.options, true);
+    ast.animation.visit(this, context);
+    context.previousNode = ast;
+  }
+
+  visitSequence(ast: SequenceAst, context: AnimationTimelineContext) {
+    const subContextCount = context.subContextCount;
+    let ctx = context;
+    const options = ast.options;
+
+    if (options && (options.params || options.delay)) {
+      ctx = context.createSubContext(options);
+      ctx.transformIntoNewTimeline();
+
+      if (options.delay != null) {
+        if (ctx.previousNode instanceof StyleAst) {
+          ctx.currentTimeline.snapshotCurrentStyles();
+          ctx.previousNode = DEFAULT_NOOP_PREVIOUS_NODE;
+        }
+
+        const delay = resolveTimingValue(options.delay);
+        ctx.delayNextStep(delay);
+      }
+    }
+
+    if (ast.steps.length) {
+      ast.steps.forEach(s => s.visit(this, ctx));
+
+      // this is here just incase the inner steps only contain or end with a style() call
+      ctx.currentTimeline.applyStylesToKeyframe();
+
+      // this means that some animation function within the sequence
+      // ended up creating a sub timeline (which means the current
+      // timeline cannot overlap with the contents of the sequence)
+      if (ctx.subContextCount > subContextCount) {
+        ctx.transformIntoNewTimeline();
+      }
+    }
+
+    context.previousNode = ast;
+  }
+
+  visitGroup(ast: GroupAst, context: AnimationTimelineContext) {
+    const innerTimelines: TimelineBuilder[] = [];
+    let furthestTime = context.currentTimeline.currentTime;
+    const delay = ast.options && ast.options.delay ? resolveTimingValue(ast.options.delay) : 0;
+
+    ast.steps.forEach(s => {
+      const innerContext = context.createSubContext(ast.options);
+      if (delay) {
+        innerContext.delayNextStep(delay);
+      }
+
+      s.visit(this, innerContext);
+      furthestTime = Math.max(furthestTime, innerContext.currentTimeline.currentTime);
+      innerTimelines.push(innerContext.currentTimeline);
+    });
+
+    // this operation is run after the AST loop because otherwise
+    // if the parent timeline's collected styles were updated then
+    // it would pass in invalid data into the new-to-be forked items
+    innerTimelines.forEach(
+        timeline => context.currentTimeline.mergeTimelineCollectedStyles(timeline));
+    context.transformIntoNewTimeline(furthestTime);
+    context.previousNode = ast;
+  }
+
+  visitTiming(ast: TimingAst, context: AnimationTimelineContext): AnimateTimings {
+    if (ast instanceof DynamicTimingAst) {
+      const strValue = context.params ?
+          interpolateParams(ast.value, context.params, context.errors) :
+          ast.value.toString();
+      return resolveTiming(strValue, context.errors);
+    } else {
+      return {duration: ast.duration, delay: ast.delay, easing: ast.easing};
+    }
+  }
+
+  visitAnimate(ast: AnimateAst, context: AnimationTimelineContext) {
+    const timings = context.currentAnimateTimings = this.visitTiming(ast.timings, context);
+    const timeline = context.currentTimeline;
+    if (timings.delay) {
+      context.incrementTime(timings.delay);
+      timeline.snapshotCurrentStyles();
+    }
+
+    const style = ast.style;
+    if (style instanceof KeyframesAst) {
+      this.visitKeyframes(style, context);
+    } else {
+      context.incrementTime(timings.duration);
+      this.visitStyle(style as StyleAst, context);
+      timeline.applyStylesToKeyframe();
+    }
+
+    context.currentAnimateTimings = null;
+    context.previousNode = ast;
+  }
+
+  visitStyle(ast: StyleAst, context: AnimationTimelineContext) {
+    const timeline = context.currentTimeline;
+    const timings = context.currentAnimateTimings !;
+
+    // this is a special case for when a style() call
+    // directly follows  an animate() call (but not inside of an animate() call)
+    if (!timings && timeline.getCurrentStyleProperties().length) {
+      timeline.forwardFrame();
+    }
+
+    const easing = (timings && timings.easing) || ast.easing;
+    if (ast.isEmptyStep) {
+      timeline.applyEmptyStep(easing);
+    } else {
+      timeline.setStyles(ast.styles, easing, context.errors, context.options);
+    }
+
+    context.previousNode = ast;
+  }
+
+  visitKeyframes(ast: KeyframesAst, context: AnimationTimelineContext) {
+    const currentAnimateTimings = context.currentAnimateTimings !;
+    const startTime = (context.currentTimeline !).duration;
+    const duration = currentAnimateTimings.duration;
+    const innerContext = context.createSubContext();
+    const innerTimeline = innerContext.currentTimeline;
+    innerTimeline.easing = currentAnimateTimings.easing;
+
+    ast.styles.forEach(step => {
+      const offset: number = step.offset || 0;
+      innerTimeline.forwardTime(offset * duration);
+      innerTimeline.setStyles(step.styles, step.easing, context.errors, context.options);
+      innerTimeline.applyStylesToKeyframe();
+    });
+
+    // this will ensure that the parent timeline gets all the styles from
+    // the child even if the new timeline below is not used
+    context.currentTimeline.mergeTimelineCollectedStyles(innerTimeline);
+
+    // we do this because the window between this timeline and the sub timeline
+    // should ensure that the styles within are exactly the same as they were before
+    context.transformIntoNewTimeline(startTime + duration);
+    context.previousNode = ast;
+  }
+
+  visitQuery(ast: QueryAst, context: AnimationTimelineContext) {
+    // in the event that the first step before this is a style step we need
+    // to ensure the styles are applied before the children are animated
+    const startTime = context.currentTimeline.currentTime;
+    const options = (ast.options || {}) as AnimationQueryOptions;
+    const delay = options.delay ? resolveTimingValue(options.delay) : 0;
+
+    if (delay && (context.previousNode instanceof StyleAst ||
+                  (startTime == 0 && context.currentTimeline.getCurrentStyleProperties().length))) {
+      context.currentTimeline.snapshotCurrentStyles();
+      context.previousNode = DEFAULT_NOOP_PREVIOUS_NODE;
+    }
+
+    let furthestTime = startTime;
+    const elms = context.invokeQuery(
+        ast.selector, ast.originalSelector, ast.limit, ast.includeSelf,
+        options.optional ? true : false, context.errors);
+
+    context.currentQueryTotal = elms.length;
+    let sameElementTimeline: TimelineBuilder|null = null;
+    elms.forEach((element, i) => {
+
+      context.currentQueryIndex = i;
+      const innerContext = context.createSubContext(ast.options, element);
+      if (delay) {
+        innerContext.delayNextStep(delay);
+      }
+
+      if (element === context.element) {
+        sameElementTimeline = innerContext.currentTimeline;
+      }
+
+      ast.animation.visit(this, innerContext);
+
+      // this is here just incase the inner steps only contain or end
+      // with a style() call (which is here to signal that this is a preparatory
+      // call to style an element before it is animated again)
+      innerContext.currentTimeline.applyStylesToKeyframe();
+
+      const endTime = innerContext.currentTimeline.currentTime;
+      furthestTime = Math.max(furthestTime, endTime);
+    });
+
+    context.currentQueryIndex = 0;
+    context.currentQueryTotal = 0;
+    context.transformIntoNewTimeline(furthestTime);
+
+    if (sameElementTimeline) {
+      context.currentTimeline.mergeTimelineCollectedStyles(sameElementTimeline);
+      context.currentTimeline.snapshotCurrentStyles();
+    }
+
+    context.previousNode = ast;
+  }
+
+  visitStagger(ast: StaggerAst, context: AnimationTimelineContext) {
+    const parentContext = context.parentContext !;
+    const tl = context.currentTimeline;
+    const timings = ast.timings;
+    const duration = Math.abs(timings.duration);
+    const maxTime = duration * (context.currentQueryTotal - 1);
+    let delay = duration * context.currentQueryIndex;
+
+    let staggerTransformer = timings.duration < 0 ? 'reverse' : timings.easing;
+    switch (staggerTransformer) {
+      case 'reverse':
+        delay = maxTime - delay;
+        break;
+      case 'full':
+        delay = parentContext.currentStaggerTime;
+        break;
+    }
+
+    const timeline = context.currentTimeline;
+    if (delay) {
+      timeline.delayNextStep(delay);
+    }
+
+    const startingTime = timeline.currentTime;
+    ast.animation.visit(this, context);
+    context.previousNode = ast;
+
+    // time = duration + delay
+    // the reason why this computation is so complex is because
+    // the inner timeline may either have a delay value or a stretched
+    // keyframe depending on if a subtimeline is not used or is used.
+    parentContext.currentStaggerTime =
+        (tl.currentTime - startingTime) + (tl.startTime - parentContext.currentTimeline.startTime);
+  }
+}
+
+export declare type StyleAtTime = {
+  time: number; value: string | number;
+};
+
+const DEFAULT_NOOP_PREVIOUS_NODE = <Ast>{};
+export class AnimationTimelineContext {
+  public parentContext: AnimationTimelineContext|null = null;
+  public currentTimeline: TimelineBuilder;
+  public currentAnimateTimings: AnimateTimings|null = null;
+  public previousNode: Ast = DEFAULT_NOOP_PREVIOUS_NODE;
+  public subContextCount = 0;
+  public options: AnimationOptions = {};
+  public currentQueryIndex: number = 0;
+  public currentQueryTotal: number = 0;
+  public currentStaggerTime: number = 0;
+
+  constructor(
+      private _driver: AnimationDriver, public element: any,
+      public subInstructions: ElementInstructionMap, public errors: any[],
+      public timelines: TimelineBuilder[], initialTimeline?: TimelineBuilder) {
+    this.currentTimeline = initialTimeline || new TimelineBuilder(element, 0);
+    timelines.push(this.currentTimeline);
+  }
+
+  get params() { return this.options.params; }
+
+  updateOptions(options: AnimationOptions|null, skipIfExists?: boolean) {
+    if (!options) return;
+
+    const newOptions = options as any;
+    let optionsToUpdate = this.options;
+
+    // NOTE: this will get patched up when other animation methods support duration overrides
+    if (newOptions.duration != null) {
+      (optionsToUpdate as any).duration = resolveTimingValue(newOptions.duration);
+    }
+
+    if (newOptions.delay != null) {
+      optionsToUpdate.delay = resolveTimingValue(newOptions.delay);
+    }
+
+    const newParams = newOptions.params;
+    if (newParams) {
+      let paramsToUpdate: {[name: string]: any} = optionsToUpdate.params !;
+      if (!paramsToUpdate) {
+        paramsToUpdate = this.options.params = {};
+      }
+
+      Object.keys(newParams).forEach(name => {
+        if (!skipIfExists || !paramsToUpdate.hasOwnProperty(name)) {
+          paramsToUpdate[name] = interpolateParams(newParams[name], paramsToUpdate, this.errors);
+        }
+      });
+    }
+  }
+
+  private _copyOptions() {
+    const options: AnimationOptions = {};
+    if (this.options) {
+      const oldParams = this.options.params;
+      if (oldParams) {
+        const params: {[name: string]: any} = options['params'] = {};
+        Object.keys(this.options.params).forEach(name => { params[name] = oldParams[name]; });
+      }
+    }
+    return options;
+  }
+
+  createSubContext(options: AnimationOptions|null = null, element?: any, newTime?: number):
+      AnimationTimelineContext {
+    const target = element || this.element;
+    const context = new AnimationTimelineContext(
+        this._driver, target, this.subInstructions, this.errors, this.timelines,
+        this.currentTimeline.fork(target, newTime || 0));
+    context.previousNode = this.previousNode;
+    context.currentAnimateTimings = this.currentAnimateTimings;
+
+    context.options = this._copyOptions();
+    context.updateOptions(options);
+
+    context.currentQueryIndex = this.currentQueryIndex;
+    context.currentQueryTotal = this.currentQueryTotal;
+    context.parentContext = this;
+    this.subContextCount++;
+    return context;
+  }
+
+  transformIntoNewTimeline(newTime?: number) {
+    this.previousNode = DEFAULT_NOOP_PREVIOUS_NODE;
+    this.currentTimeline = this.currentTimeline.fork(this.element, newTime);
+    this.timelines.push(this.currentTimeline);
+    return this.currentTimeline;
+  }
+
+  appendInstructionToTimeline(
+      instruction: AnimationTimelineInstruction, duration: number|null,
+      delay: number|null): AnimateTimings {
+    const updatedTimings: AnimateTimings = {
+      duration: duration != null ? duration : instruction.duration,
+      delay: this.currentTimeline.currentTime + (delay != null ? delay : 0) + instruction.delay,
+      easing: ''
+    };
+    const builder = new SubTimelineBuilder(
+        instruction.element, instruction.keyframes, instruction.preStyleProps,
+        instruction.postStyleProps, updatedTimings, instruction.stretchStartingKeyframe);
+    this.timelines.push(builder);
+    return updatedTimings;
+  }
+
+  incrementTime(time: number) {
+    this.currentTimeline.forwardTime(this.currentTimeline.duration + time);
+  }
+
+  delayNextStep(delay: number) {
+    // negative delays are not yet supported
+    if (delay > 0) {
+      this.currentTimeline.delayNextStep(delay);
+    }
+  }
+
+  invokeQuery(
+      selector: string, originalSelector: string, limit: number, includeSelf: boolean,
+      optional: boolean, errors: any[]): any[] {
+    let results: any[] = [];
+    if (includeSelf) {
+      results.push(this.element);
+    }
+    if (selector.length > 0) {  // if :self is only used then the selector is empty
+      const multi = limit != 1;
+      results.push(...this._driver.query(this.element, selector, multi));
+    }
+
+    if (!optional && results.length == 0) {
+      errors.push(
+          `\`query("${originalSelector}")\` returned zero elements. (Use \`query("${originalSelector}", { optional: true })\` if you wish to allow this.)`);
+    }
+    return results;
+  }
+}
+
+
+export class TimelineBuilder {
+  public duration: number = 0;
+  public easing: string|null;
+  private _previousKeyframe: ɵStyleData = {};
+  private _currentKeyframe: ɵStyleData = {};
+  private _keyframes = new Map<number, ɵStyleData>();
+  private _styleSummary: {[prop: string]: StyleAtTime} = {};
+  private _localTimelineStyles: ɵStyleData;
+  private _globalTimelineStyles: ɵStyleData;
+  private _pendingStyles: ɵStyleData = {};
+  private _backFill: ɵStyleData = {};
+  private _currentEmptyStepKeyframe: ɵStyleData|null = null;
+
+  constructor(
+      public element: any, public startTime: number,
+      private _elementTimelineStylesLookup?: Map<any, ɵStyleData>) {
+    if (!this._elementTimelineStylesLookup) {
+      this._elementTimelineStylesLookup = new Map<any, ɵStyleData>();
+    }
+
+    this._localTimelineStyles = Object.create(this._backFill, {});
+    this._globalTimelineStyles = this._elementTimelineStylesLookup.get(element) !;
+    if (!this._globalTimelineStyles) {
+      this._globalTimelineStyles = this._localTimelineStyles;
+      this._elementTimelineStylesLookup.set(element, this._localTimelineStyles);
+    }
+    this._loadKeyframe();
+  }
+
+  containsAnimation(): boolean {
+    switch (this._keyframes.size) {
+      case 0:
+        return false;
+      case 1:
+        return this.getCurrentStyleProperties().length > 0;
+      default:
+        return true;
+    }
+  }
+
+  getCurrentStyleProperties(): string[] { return Object.keys(this._currentKeyframe); }
+
+  get currentTime() { return this.startTime + this.duration; }
+
+  delayNextStep(delay: number) {
+    // in the event that a style() step is placed right before a stagger()
+    // and that style() step is the very first style() value in the animation
+    // then we need to make a copy of the keyframe [0, copy, 1] so that the delay
+    // properly applies the style() values to work with the stagger...
+    const hasPreStyleStep = this._keyframes.size == 1 && Object.keys(this._pendingStyles).length;
+
+    if (this.duration || hasPreStyleStep) {
+      this.forwardTime(this.currentTime + delay);
+      if (hasPreStyleStep) {
+        this.snapshotCurrentStyles();
+      }
+    } else {
+      this.startTime += delay;
+    }
+  }
+
+  fork(element: any, currentTime?: number): TimelineBuilder {
+    this.applyStylesToKeyframe();
+    return new TimelineBuilder(
+        element, currentTime || this.currentTime, this._elementTimelineStylesLookup);
+  }
+
+  private _loadKeyframe() {
+    if (this._currentKeyframe) {
+      this._previousKeyframe = this._currentKeyframe;
+    }
+    this._currentKeyframe = this._keyframes.get(this.duration) !;
+    if (!this._currentKeyframe) {
+      this._currentKeyframe = Object.create(this._backFill, {});
+      this._keyframes.set(this.duration, this._currentKeyframe);
+    }
+  }
+
+  forwardFrame() {
+    this.duration += ONE_FRAME_IN_MILLISECONDS;
+    this._loadKeyframe();
+  }
+
+  forwardTime(time: number) {
+    this.applyStylesToKeyframe();
+    this.duration = time;
+    this._loadKeyframe();
+  }
+
+  private _updateStyle(prop: string, value: string|number) {
+    this._localTimelineStyles[prop] = value;
+    this._globalTimelineStyles[prop] = value;
+    this._styleSummary[prop] = {time: this.currentTime, value};
+  }
+
+  allowOnlyTimelineStyles() { return this._currentEmptyStepKeyframe !== this._currentKeyframe; }
+
+  applyEmptyStep(easing: string|null) {
+    if (easing) {
+      this._previousKeyframe['easing'] = easing;
+    }
+
+    // special case for animate(duration):
+    // all missing styles are filled with a `*` value then
+    // if any destination styles are filled in later on the same
+    // keyframe then they will override the overridden styles
+    // We use `_globalTimelineStyles` here because there may be
+    // styles in previous keyframes that are not present in this timeline
+    Object.keys(this._globalTimelineStyles).forEach(prop => {
+      this._backFill[prop] = this._globalTimelineStyles[prop] || AUTO_STYLE;
+      this._currentKeyframe[prop] = AUTO_STYLE;
+    });
+    this._currentEmptyStepKeyframe = this._currentKeyframe;
+  }
+
+  setStyles(
+      input: (ɵStyleData|string)[], easing: string|null, errors: any[],
+      options?: AnimationOptions) {
+    if (easing) {
+      this._previousKeyframe['easing'] = easing;
+    }
+
+    const params = (options && options.params) || {};
+    const styles = flattenStyles(input, this._globalTimelineStyles);
+    Object.keys(styles).forEach(prop => {
+      const val = interpolateParams(styles[prop], params, errors);
+      this._pendingStyles[prop] = val;
+      if (!this._localTimelineStyles.hasOwnProperty(prop)) {
+        this._backFill[prop] = this._globalTimelineStyles.hasOwnProperty(prop) ?
+            this._globalTimelineStyles[prop] :
+            AUTO_STYLE;
+      }
+      this._updateStyle(prop, val);
+    });
+  }
+
+  applyStylesToKeyframe() {
+    const styles = this._pendingStyles;
+    const props = Object.keys(styles);
+    if (props.length == 0) return;
+
+    this._pendingStyles = {};
+
+    props.forEach(prop => {
+      const val = styles[prop];
+      this._currentKeyframe[prop] = val;
+    });
+
+    Object.keys(this._localTimelineStyles).forEach(prop => {
+      if (!this._currentKeyframe.hasOwnProperty(prop)) {
+        this._currentKeyframe[prop] = this._localTimelineStyles[prop];
+      }
+    });
+  }
+
+  snapshotCurrentStyles() {
+    Object.keys(this._localTimelineStyles).forEach(prop => {
+      const val = this._localTimelineStyles[prop];
+      this._pendingStyles[prop] = val;
+      this._updateStyle(prop, val);
+    });
+  }
+
+  getFinalKeyframe() { return this._keyframes.get(this.duration); }
+
+  get properties() {
+    const properties: string[] = [];
+    for (let prop in this._currentKeyframe) {
+      properties.push(prop);
+    }
+    return properties;
+  }
+
+  mergeTimelineCollectedStyles(timeline: TimelineBuilder) {
+    Object.keys(timeline._styleSummary).forEach(prop => {
+      const details0 = this._styleSummary[prop];
+      const details1 = timeline._styleSummary[prop];
+      if (!details0 || details1.time > details0.time) {
+        this._updateStyle(prop, details1.value);
+      }
+    });
+  }
+
+  buildKeyframes(): AnimationTimelineInstruction {
+    this.applyStylesToKeyframe();
+    const preStyleProps = new Set<string>();
+    const postStyleProps = new Set<string>();
+    const isEmpty = this._keyframes.size === 1 && this.duration === 0;
+
+    let finalKeyframes: ɵStyleData[] = [];
+    this._keyframes.forEach((keyframe, time) => {
+      const finalKeyframe = copyStyles(keyframe, true);
+      Object.keys(finalKeyframe).forEach(prop => {
+        const value = finalKeyframe[prop];
+        if (value == PRE_STYLE) {
+          preStyleProps.add(prop);
+        } else if (value == AUTO_STYLE) {
+          postStyleProps.add(prop);
+        }
+      });
+      if (!isEmpty) {
+        finalKeyframe['offset'] = time / this.duration;
+      }
+      finalKeyframes.push(finalKeyframe);
+    });
+
+    const preProps: string[] = preStyleProps.size ? iteratorToArray(preStyleProps.values()) : [];
+    const postProps: string[] = postStyleProps.size ? iteratorToArray(postStyleProps.values()) : [];
+
+    // special case for a 0-second animation (which is designed just to place styles onscreen)
+    if (isEmpty) {
+      const kf0 = finalKeyframes[0];
+      const kf1 = copyObj(kf0);
+      kf0['offset'] = 0;
+      kf1['offset'] = 1;
+      finalKeyframes = [kf0, kf1];
+    }
+
+    return createTimelineInstruction(
+        this.element, finalKeyframes, preProps, postProps, this.duration, this.startTime,
+        this.easing, false);
+  }
+}
+
+class SubTimelineBuilder extends TimelineBuilder {
+  public timings: AnimateTimings;
+
+  constructor(
+      public element: any, public keyframes: ɵStyleData[], public preStyleProps: string[],
+      public postStyleProps: string[], timings: AnimateTimings,
+      private _stretchStartingKeyframe: boolean = false) {
+    super(element, timings.delay);
+    this.timings = {duration: timings.duration, delay: timings.delay, easing: timings.easing};
+  }
+
+  containsAnimation(): boolean { return this.keyframes.length > 1; }
+
+  buildKeyframes(): AnimationTimelineInstruction {
+    let keyframes = this.keyframes;
+    let {delay, duration, easing} = this.timings;
+    if (this._stretchStartingKeyframe && delay) {
+      const newKeyframes: ɵStyleData[] = [];
+      const totalTime = duration + delay;
+      const startingGap = delay / totalTime;
+
+      // the original starting keyframe now starts once the delay is done
+      const newFirstKeyframe = copyStyles(keyframes[0], false);
+      newFirstKeyframe['offset'] = 0;
+      newKeyframes.push(newFirstKeyframe);
+
+      const oldFirstKeyframe = copyStyles(keyframes[0], false);
+      oldFirstKeyframe['offset'] = roundOffset(startingGap);
+      newKeyframes.push(oldFirstKeyframe);
+
+      /*
+        When the keyframe is stretched then it means that the delay before the animation
+        starts is gone. Instead the first keyframe is placed at the start of the animation
+        and it is then copied to where it starts when the original delay is over. This basically
+        means nothing animates during that delay, but the styles are still renderered. For this
+        to work the original offset values that exist in the original keyframes must be "warped"
+        so that they can take the new keyframe + delay into account.
+
+        delay=1000, duration=1000, keyframes = 0 .5 1
+
+        turns into
+
+        delay=0, duration=2000, keyframes = 0 .33 .66 1
+       */
+
+      // offsets between 1 ... n -1 are all warped by the keyframe stretch
+      const limit = keyframes.length - 1;
+      for (let i = 1; i <= limit; i++) {
+        let kf = copyStyles(keyframes[i], false);
+        const oldOffset = kf['offset'] as number;
+        const timeAtKeyframe = delay + oldOffset * duration;
+        kf['offset'] = roundOffset(timeAtKeyframe / totalTime);
+        newKeyframes.push(kf);
+      }
+
+      // the new starting keyframe should be added at the start
+      duration = totalTime;
+      delay = 0;
+      easing = '';
+
+      keyframes = newKeyframes;
+    }
+
+    return createTimelineInstruction(
+        this.element, keyframes, this.preStyleProps, this.postStyleProps, duration, delay, easing,
+        true);
+  }
+}
+
+function roundOffset(offset: number, decimalPoints = 3): number {
+  const mult = Math.pow(10, decimalPoints - 1);
+  return Math.round(offset * mult) / mult;
+}
+
+function flattenStyles(input: (ɵStyleData | string)[], allStyles: ɵStyleData) {
+  const styles: ɵStyleData = {};
+  let allProperties: string[];
+  input.forEach(token => {
+    if (token === '*') {
+      allProperties = allProperties || Object.keys(allStyles);
+      allProperties.forEach(prop => { styles[prop] = AUTO_STYLE; });
+    } else {
+      copyStyles(token as ɵStyleData, false, styles);
+    }
+  });
+  return styles;
+}
diff --git a/packages/animations/browser/src/dsl/animation_timeline_instruction.ts b/packages/animations/browser/src/dsl/animation_timeline_instruction.ts
index a7486ecf6c..4c10d69a3d 100644
--- a/packages/animations/browser/src/dsl/animation_timeline_instruction.ts
+++ b/packages/animations/browser/src/dsl/animation_timeline_instruction.ts
@@ -9,21 +9,30 @@ import {ɵStyleData} from '@angular/animations';
 import {AnimationEngineInstruction, AnimationTransitionInstructionType} from '../render/animation_engine_instruction';
 
 export interface AnimationTimelineInstruction extends AnimationEngineInstruction {
+  element: any;
   keyframes: ɵStyleData[];
+  preStyleProps: string[];
+  postStyleProps: string[];
   duration: number;
   delay: number;
   totalTime: number;
-  easing: string|null|undefined;
+  easing: string|null;
+  stretchStartingKeyframe?: boolean;
+  subTimeline: boolean;
 }
 
 export function createTimelineInstruction(
-    keyframes: ɵStyleData[], duration: number, delay: number,
-    easing: string | null | undefined): AnimationTimelineInstruction {
+    element: any, keyframes: ɵStyleData[], preStyleProps: string[], postStyleProps: string[],
+    duration: number, delay: number, easing: string | null = null,
+    subTimeline: boolean = false): AnimationTimelineInstruction {
   return {
     type: AnimationTransitionInstructionType.TimelineAnimation,
+    element,
     keyframes,
+    preStyleProps,
+    postStyleProps,
     duration,
     delay,
-    totalTime: duration + delay, easing
+    totalTime: duration + delay, easing, subTimeline
   };
 }
diff --git a/packages/animations/browser/src/dsl/animation_timeline_visitor.ts b/packages/animations/browser/src/dsl/animation_timeline_visitor.ts
deleted file mode 100644
index c5583c4f3b..0000000000
--- a/packages/animations/browser/src/dsl/animation_timeline_visitor.ts
+++ /dev/null
@@ -1,470 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-import {AUTO_STYLE, AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, sequence, style, ɵStyleData} from '@angular/animations';
-
-import {copyStyles, normalizeStyles, parseTimeExpression} from '../util';
-
-import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
-import {AnimationTimelineInstruction, createTimelineInstruction} from './animation_timeline_instruction';
-
-
-
-/*
- * The code within this file aims to generate web-animations-compatible keyframes from Angular's
- * animation DSL code.
- *
- * The code below will be converted from:
- *
- * ```
- * sequence([
- *   style({ opacity: 0 }),
- *   animate(1000, style({ opacity: 0 }))
- * ])
- * ```
- *
- * To:
- * ```
- * keyframes = [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }]
- * duration = 1000
- * delay = 0
- * easing = ''
- * ```
- *
- * For this operation to cover the combination of animation verbs (style, animate, group, etc...) a
- * combination of prototypical inheritance, AST traversal and merge-sort-like algorithms are used.
- *
- * [AST Traversal]
- * Each of the animation verbs, when executed, will return an string-map object representing what
- * type of action it is (style, animate, group, etc...) and the data associated with it. This means
- * that when functional composition mix of these functions is evaluated (like in the example above)
- * then it will end up producing a tree of objects representing the animation itself.
- *
- * When this animation object tree is processed by the visitor code below it will visit each of the
- * verb statements within the visitor. And during each visit it will build the context of the
- * animation keyframes by interacting with the `TimelineBuilder`.
- *
- * [TimelineBuilder]
- * This class is responsible for tracking the styles and building a series of keyframe objects for a
- * timeline between a start and end time. The builder starts off with an initial timeline and each
- * time the AST comes across a `group()`, `keyframes()` or a combination of the two within a
- * `sequence()` then it will generate a sub timeline for each step as well as a new one after
- * they are complete.
- *
- * As the AST is traversed, the timing state on each of the timelines will be incremented. If a sub
- * timeline was created (based on one of the cases above) then the parent timeline will attempt to
- * merge the styles used within the sub timelines into itself (only with group() this will happen).
- * This happens with a merge operation (much like how the merge works in mergesort) and it will only
- * copy the most recently used styles from the sub timelines into the parent timeline. This ensures
- * that if the styles are used later on in another phase of the animation then they will be the most
- * up-to-date values.
- *
- * [How Missing Styles Are Updated]
- * Each timeline has a `backFill` property which is responsible for filling in new styles into
- * already processed keyframes if a new style shows up later within the animation sequence.
- *
- * ```
- * sequence([
- *   style({ width: 0 }),
- *   animate(1000, style({ width: 100 })),
- *   animate(1000, style({ width: 200 })),
- *   animate(1000, style({ width: 300 }))
- *   animate(1000, style({ width: 400, height: 400 })) // notice how `height` doesn't exist anywhere
- * else
- * ])
- * ```
- *
- * What is happening here is that the `height` value is added later in the sequence, but is missing
- * from all previous animation steps. Therefore when a keyframe is created it would also be missing
- * from all previous keyframes up until where it is first used. For the timeline keyframe generation
- * to properly fill in the style it will place the previous value (the value from the parent
- * timeline) or a default value of `*` into the backFill object. Given that each of the keyframe
- * styles are objects that prototypically inherited from the backFill object, this means that if a
- * value is added into the backFill then it will automatically propagate any missing values to all
- * keyframes. Therefore the missing `height` value will be properly filled into the already
- * processed keyframes.
- *
- * When a sub-timeline is created it will have its own backFill property. This is done so that
- * styles present within the sub-timeline do not accidentally seep into the previous/future timeline
- * keyframes
- *
- * (For prototypically inherited contents to be detected a `for(i in obj)` loop must be used.)
- *
- * [Validation]
- * The code in this file is not responsible for validation. That functionality happens with within
- * the `AnimationValidatorVisitor` code.
- */
-export function buildAnimationKeyframes(
-    ast: AnimationMetadata | AnimationMetadata[], startingStyles: ɵStyleData = {},
-    finalStyles: ɵStyleData = {}): AnimationTimelineInstruction[] {
-  const normalizedAst =
-      Array.isArray(ast) ? sequence(<AnimationMetadata[]>ast) : <AnimationMetadata>ast;
-  return new AnimationTimelineVisitor().buildKeyframes(normalizedAst, startingStyles, finalStyles);
-}
-
-export declare type StyleAtTime = {
-  time: number; value: string | number;
-};
-
-export class AnimationTimelineContext {
-  currentTimeline: TimelineBuilder;
-  currentAnimateTimings: AnimateTimings|null;
-  previousNode: AnimationMetadata = <AnimationMetadata>{};
-  subContextCount = 0;
-
-  constructor(
-      public errors: any[], public timelines: TimelineBuilder[],
-      initialTimeline?: TimelineBuilder) {
-    this.currentTimeline = initialTimeline || new TimelineBuilder(0);
-    timelines.push(this.currentTimeline);
-  }
-
-  createSubContext(): AnimationTimelineContext {
-    const context =
-        new AnimationTimelineContext(this.errors, this.timelines, this.currentTimeline.fork());
-    context.previousNode = this.previousNode;
-    context.currentAnimateTimings = this.currentAnimateTimings;
-    this.subContextCount++;
-    return context;
-  }
-
-  transformIntoNewTimeline(newTime = 0) {
-    this.currentTimeline = this.currentTimeline.fork(newTime);
-    this.timelines.push(this.currentTimeline);
-    return this.currentTimeline;
-  }
-
-  incrementTime(time: number) {
-    this.currentTimeline.forwardTime(this.currentTimeline.duration + time);
-  }
-}
-
-export class AnimationTimelineVisitor implements AnimationDslVisitor {
-  buildKeyframes(ast: AnimationMetadata, startingStyles: ɵStyleData, finalStyles: ɵStyleData):
-      AnimationTimelineInstruction[] {
-    const context = new AnimationTimelineContext([], []);
-    context.currentTimeline.setStyles(startingStyles);
-
-    visitAnimationNode(this, ast, context);
-
-    // this checks to see if an actual animation happened
-    const timelines = context.timelines.filter(timeline => timeline.hasStyling());
-    if (timelines.length && Object.keys(finalStyles).length) {
-      const tl = timelines[timelines.length - 1];
-      if (!tl.allowOnlyTimelineStyles()) {
-        tl.setStyles(finalStyles);
-      }
-    }
-
-    return timelines.length ? timelines.map(timeline => timeline.buildKeyframes()) :
-                              [createTimelineInstruction([], 0, 0, '')];
-  }
-
-  visitState(ast: AnimationStateMetadata, context: any): any {
-    // these values are not visited in this AST
-  }
-
-  visitTransition(ast: AnimationTransitionMetadata, context: any): any {
-    // these values are not visited in this AST
-  }
-
-  visitSequence(ast: AnimationSequenceMetadata, context: AnimationTimelineContext) {
-    const subContextCount = context.subContextCount;
-    if (context.previousNode.type == AnimationMetadataType.Style) {
-      context.currentTimeline.forwardFrame();
-      context.currentTimeline.snapshotCurrentStyles();
-    }
-
-    ast.steps.forEach(s => visitAnimationNode(this, s, context));
-
-    // this means that some animation function within the sequence
-    // ended up creating a sub timeline (which means the current
-    // timeline cannot overlap with the contents of the sequence)
-    if (context.subContextCount > subContextCount) {
-      context.transformIntoNewTimeline();
-    }
-
-    context.previousNode = ast;
-  }
-
-  visitGroup(ast: AnimationGroupMetadata, context: AnimationTimelineContext) {
-    const innerTimelines: TimelineBuilder[] = [];
-    let furthestTime = context.currentTimeline.currentTime;
-    ast.steps.forEach(s => {
-      const innerContext = context.createSubContext();
-      visitAnimationNode(this, s, innerContext);
-      furthestTime = Math.max(furthestTime, innerContext.currentTimeline.currentTime);
-      innerTimelines.push(innerContext.currentTimeline);
-    });
-
-    // this operation is run after the AST loop because otherwise
-    // if the parent timeline's collected styles were updated then
-    // it would pass in invalid data into the new-to-be forked items
-    innerTimelines.forEach(
-        timeline => context.currentTimeline.mergeTimelineCollectedStyles(timeline));
-    context.transformIntoNewTimeline(furthestTime);
-    context.previousNode = ast;
-  }
-
-  visitAnimate(ast: AnimationAnimateMetadata, context: AnimationTimelineContext) {
-    const timings = ast.timings.hasOwnProperty('duration') ?
-        <AnimateTimings>ast.timings :
-        parseTimeExpression(<string|number>ast.timings, context.errors);
-    context.currentAnimateTimings = timings;
-
-    if (timings.delay) {
-      context.incrementTime(timings.delay);
-      context.currentTimeline.snapshotCurrentStyles();
-    }
-
-    const astType = ast.styles ? ast.styles.type : -1;
-    if (astType == AnimationMetadataType.KeyframeSequence) {
-      this.visitKeyframeSequence(<AnimationKeyframesSequenceMetadata>ast.styles, context);
-    } else {
-      let styleAst = ast.styles as AnimationStyleMetadata;
-      if (!styleAst) {
-        const newStyleData: {[prop: string]: string | number} = {};
-        if (timings.easing) {
-          newStyleData['easing'] = timings.easing;
-        }
-        styleAst = style(newStyleData);
-        (styleAst as any)['treatAsEmptyStep'] = true;
-      }
-      context.incrementTime(timings.duration);
-      if (styleAst) {
-        this.visitStyle(styleAst, context);
-      }
-    }
-
-    context.currentAnimateTimings = null;
-    context.previousNode = ast;
-  }
-
-  visitStyle(ast: AnimationStyleMetadata, context: AnimationTimelineContext) {
-    // this is a special case when a style() call is issued directly after
-    // a call to animate(). If the clock is not forwarded by one frame then
-    // the style() calls will be merged into the previous animate() call
-    // which is incorrect.
-    if (!context.currentAnimateTimings &&
-        context.previousNode.type == AnimationMetadataType.Animate) {
-      context.currentTimeline.forwardFrame();
-    }
-
-    const normalizedStyles = normalizeStyles(ast.styles);
-    const easing = context.currentAnimateTimings && context.currentAnimateTimings.easing;
-    this._applyStyles(
-        normalizedStyles, easing, (ast as any)['treatAsEmptyStep'] ? true : false, context);
-    context.previousNode = ast;
-  }
-
-  private _applyStyles(
-      styles: ɵStyleData, easing: string|null, treatAsEmptyStep: boolean,
-      context: AnimationTimelineContext) {
-    if (styles.hasOwnProperty('easing')) {
-      easing = easing || styles['easing'] as string;
-      delete styles['easing'];
-    }
-    context.currentTimeline.setStyles(styles, easing, treatAsEmptyStep);
-  }
-
-  visitKeyframeSequence(
-      ast: AnimationKeyframesSequenceMetadata, context: AnimationTimelineContext) {
-    const MAX_KEYFRAME_OFFSET = 1;
-    const limit = ast.steps.length - 1;
-    const firstKeyframe = ast.steps[0];
-
-    let offsetGap = 0;
-    const containsOffsets = getOffset(firstKeyframe) != null;
-    if (!containsOffsets) {
-      offsetGap = MAX_KEYFRAME_OFFSET / limit;
-    }
-
-    const startTime = context.currentTimeline.duration;
-    const duration = context.currentAnimateTimings !.duration;
-    const innerContext = context.createSubContext();
-    const innerTimeline = innerContext.currentTimeline;
-    innerTimeline.easing = context.currentAnimateTimings !.easing;
-
-    ast.steps.forEach((step: AnimationStyleMetadata, i: number) => {
-      const normalizedStyles = normalizeStyles(step.styles);
-      const offset = containsOffsets ?
-          (step.offset != null ? step.offset : parseFloat(normalizedStyles['offset'] as string)) :
-          (i == limit ? MAX_KEYFRAME_OFFSET : i * offsetGap);
-      innerTimeline.forwardTime(offset * duration);
-      this._applyStyles(normalizedStyles, null, false, innerContext);
-    });
-
-    // this will ensure that the parent timeline gets all the styles from
-    // the child even if the new timeline below is not used
-    context.currentTimeline.mergeTimelineCollectedStyles(innerTimeline);
-
-    // we do this because the window between this timeline and the sub timeline
-    // should ensure that the styles within are exactly the same as they were before
-    context.transformIntoNewTimeline(startTime + duration);
-    context.previousNode = ast;
-  }
-}
-
-export class TimelineBuilder {
-  public duration: number = 0;
-  public easing: string|null = '';
-  private _previousKeyframe: ɵStyleData = {};
-  private _currentKeyframe: ɵStyleData;
-  private _keyframes = new Map<number, ɵStyleData>();
-  private _styleSummary: {[prop: string]: StyleAtTime} = {};
-  private _localTimelineStyles: ɵStyleData;
-  private _backFill: ɵStyleData = {};
-  private _currentEmptyStepKeyframe: ɵStyleData|null = null;
-  private _globalTimelineStyles: ɵStyleData;
-
-  constructor(public startTime: number, globalTimelineStyles?: ɵStyleData) {
-    this._localTimelineStyles = Object.create(this._backFill, {});
-    this._globalTimelineStyles =
-        globalTimelineStyles ? globalTimelineStyles : this._localTimelineStyles;
-    this._loadKeyframe();
-  }
-
-  hasStyling(): boolean { return this._keyframes.size > 1; }
-
-  get currentTime() { return this.startTime + this.duration; }
-
-  fork(currentTime = 0): TimelineBuilder {
-    return new TimelineBuilder(currentTime || this.currentTime, this._globalTimelineStyles);
-  }
-
-  private _loadKeyframe() {
-    if (this._currentKeyframe) {
-      this._previousKeyframe = this._currentKeyframe;
-    }
-    this._currentKeyframe = this._keyframes.get(this.duration) !;
-    if (!this._currentKeyframe) {
-      this._currentKeyframe = Object.create(this._backFill, {});
-      this._keyframes.set(this.duration, this._currentKeyframe);
-    }
-  }
-
-  forwardFrame() {
-    this.duration++;
-    this._loadKeyframe();
-  }
-
-  forwardTime(time: number) {
-    this.duration = time;
-    this._loadKeyframe();
-  }
-
-  private _updateStyle(prop: string, value: string|number) {
-    this._localTimelineStyles[prop] = value;
-    this._globalTimelineStyles ![prop] = value;
-    this._styleSummary[prop] = {time: this.currentTime, value};
-  }
-
-  allowOnlyTimelineStyles() { return this._currentEmptyStepKeyframe !== this._currentKeyframe; }
-
-  setStyles(styles: ɵStyleData, easing: string|null = null, treatAsEmptyStep: boolean = false) {
-    if (easing) {
-      this._previousKeyframe !['easing'] = easing;
-    }
-
-    if (treatAsEmptyStep) {
-      // special case for animate(duration):
-      // all missing styles are filled with a `*` value then
-      // if any destination styles are filled in later on the same
-      // keyframe then they will override the overridden styles
-      // We use `_globalTimelineStyles` here because there may be
-      // styles in previous keyframes that are not present in this timeline
-      Object.keys(this._globalTimelineStyles).forEach(prop => {
-        this._backFill[prop] = this._globalTimelineStyles[prop] || AUTO_STYLE;
-        this._currentKeyframe[prop] = AUTO_STYLE;
-      });
-      this._currentEmptyStepKeyframe = this._currentKeyframe;
-    } else {
-      Object.keys(styles).forEach(prop => {
-        if (prop !== 'offset') {
-          const val = styles[prop];
-          this._currentKeyframe[prop] = val;
-          if (!this._localTimelineStyles[prop]) {
-            this._backFill[prop] = this._globalTimelineStyles[prop] || AUTO_STYLE;
-          }
-          this._updateStyle(prop, val);
-        }
-      });
-
-      Object.keys(this._localTimelineStyles).forEach(prop => {
-        if (!this._currentKeyframe.hasOwnProperty(prop)) {
-          this._currentKeyframe[prop] = this._localTimelineStyles[prop];
-        }
-      });
-    }
-  }
-
-  snapshotCurrentStyles() { copyStyles(this._localTimelineStyles, false, this._currentKeyframe); }
-
-  getFinalKeyframe(): ɵStyleData { return this._keyframes.get(this.duration) !; }
-
-  get properties() {
-    const properties: string[] = [];
-    for (let prop in this._currentKeyframe) {
-      properties.push(prop);
-    }
-    return properties;
-  }
-
-  mergeTimelineCollectedStyles(timeline: TimelineBuilder) {
-    Object.keys(timeline._styleSummary).forEach(prop => {
-      const details0 = this._styleSummary[prop];
-      const details1 = timeline._styleSummary[prop];
-      if (!details0 || details1.time > details0.time) {
-        this._updateStyle(prop, details1.value);
-      }
-    });
-  }
-
-  buildKeyframes(): AnimationTimelineInstruction {
-    const finalKeyframes: ɵStyleData[] = [];
-    // special case for when there are only start/destination
-    // styles but no actual animation animate steps...
-    if (this.duration == 0) {
-      const targetKeyframe = this.getFinalKeyframe();
-
-      const firstKeyframe = copyStyles(targetKeyframe, true);
-      firstKeyframe['offset'] = 0;
-      finalKeyframes.push(firstKeyframe);
-
-      const lastKeyframe = copyStyles(targetKeyframe, true);
-      lastKeyframe['offset'] = 1;
-      finalKeyframes.push(lastKeyframe);
-    } else {
-      this._keyframes.forEach((keyframe, time) => {
-        const finalKeyframe = copyStyles(keyframe, true);
-        finalKeyframe['offset'] = time / this.duration;
-        finalKeyframes.push(finalKeyframe);
-      });
-    }
-
-    return createTimelineInstruction(finalKeyframes, this.duration, this.startTime, this.easing);
-  }
-}
-
-function getOffset(ast: AnimationStyleMetadata): number {
-  let offset = ast.offset;
-  if (offset == null) {
-    const styles = ast.styles;
-    if (Array.isArray(styles)) {
-      for (let i = 0; i < styles.length; i++) {
-        const o = styles[i]['offset'] as number;
-        if (o != null) {
-          offset = o;
-          break;
-        }
-      }
-    } else {
-      offset = styles['offset'] as number;
-    }
-  }
-  return offset !;
-}
diff --git a/packages/animations/browser/src/dsl/animation_transition_expr.ts b/packages/animations/browser/src/dsl/animation_transition_expr.ts
index de2fb7da11..23e3cdfc52 100644
--- a/packages/animations/browser/src/dsl/animation_transition_expr.ts
+++ b/packages/animations/browser/src/dsl/animation_transition_expr.ts
@@ -24,8 +24,14 @@ export function parseTransitionExpr(
 function parseInnerTransitionStr(
     eventStr: string, expressions: TransitionMatcherFn[], errors: string[]) {
   if (eventStr[0] == ':') {
-    eventStr = parseAnimationAlias(eventStr, errors);
+    const result = parseAnimationAlias(eventStr, errors);
+    if (typeof result == 'function') {
+      expressions.push(result);
+      return;
+    }
+    eventStr = result as string;
   }
+
   const match = eventStr.match(/^(\*|[-\w]+)\s*(<?[=-]>)\s*(\*|[-\w]+)$/);
   if (match == null || match.length < 4) {
     errors.push(`The provided transition expression "${eventStr}" is not supported`);
@@ -43,12 +49,16 @@ function parseInnerTransitionStr(
   }
 }
 
-function parseAnimationAlias(alias: string, errors: string[]): string {
+function parseAnimationAlias(alias: string, errors: string[]): string|TransitionMatcherFn {
   switch (alias) {
     case ':enter':
       return 'void => *';
     case ':leave':
       return '* => void';
+    case ':increment':
+      return (fromState: any, toState: any): boolean => parseFloat(toState) > parseFloat(fromState);
+    case ':decrement':
+      return (fromState: any, toState: any): boolean => parseFloat(toState) < parseFloat(fromState);
     default:
       errors.push(`The transition alias value "${alias}" is not supported`);
       return '* => *';
@@ -57,8 +67,16 @@ function parseAnimationAlias(alias: string, errors: string[]): string {
 
 function makeLambdaFromStates(lhs: string, rhs: string): TransitionMatcherFn {
   return (fromState: any, toState: any): boolean => {
-    const lhsMatch = lhs == ANY_STATE || lhs == fromState;
-    const rhsMatch = rhs == ANY_STATE || rhs == toState;
+    let lhsMatch = lhs == ANY_STATE || lhs == fromState;
+    let rhsMatch = rhs == ANY_STATE || rhs == toState;
+
+    if (!lhsMatch && typeof fromState === 'boolean') {
+      lhsMatch = fromState ? lhs === 'true' : lhs === 'false';
+    }
+    if (!rhsMatch && typeof toState === 'boolean') {
+      rhsMatch = toState ? rhs === 'true' : rhs === 'false';
+    }
+
     return lhsMatch && rhsMatch;
   };
 }
diff --git a/packages/animations/browser/src/dsl/animation_transition_factory.ts b/packages/animations/browser/src/dsl/animation_transition_factory.ts
index a5c1bc0298..390f77d32f 100644
--- a/packages/animations/browser/src/dsl/animation_transition_factory.ts
+++ b/packages/animations/browser/src/dsl/animation_transition_factory.ts
@@ -5,38 +5,69 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AnimationMetadata, AnimationTransitionMetadata, sequence, ɵStyleData} from '@angular/animations';
+import {AnimationOptions, ɵStyleData} from '@angular/animations';
 
-import {buildAnimationKeyframes} from './animation_timeline_visitor';
+import {AnimationDriver} from '../render/animation_driver';
+import {getOrSetAsInMap} from '../render/shared';
+import {iteratorToArray, mergeAnimationOptions} from '../util';
+
+import {TransitionAst} from './animation_ast';
+import {buildAnimationTimelines} from './animation_timeline_builder';
 import {TransitionMatcherFn} from './animation_transition_expr';
 import {AnimationTransitionInstruction, createTransitionInstruction} from './animation_transition_instruction';
+import {ElementInstructionMap} from './element_instruction_map';
 
 export class AnimationTransitionFactory {
-  private _animationAst: AnimationMetadata;
-
   constructor(
-      private _triggerName: string, ast: AnimationTransitionMetadata,
-      private matchFns: TransitionMatcherFn[],
-      private _stateStyles: {[stateName: string]: ɵStyleData}) {
-    const normalizedAst = Array.isArray(ast.animation) ?
-        sequence(<AnimationMetadata[]>ast.animation) :
-        <AnimationMetadata>ast.animation;
-    this._animationAst = normalizedAst;
+      private _triggerName: string, public ast: TransitionAst,
+      private _stateStyles: {[stateName: string]: ɵStyleData}) {}
+
+  match(currentState: any, nextState: any): boolean {
+    return oneOrMoreTransitionsMatch(this.ast.matchers, currentState, nextState);
   }
 
-  match(currentState: any, nextState: any): AnimationTransitionInstruction|undefined {
-    if (!oneOrMoreTransitionsMatch(this.matchFns, currentState, nextState)) return;
+  build(
+      driver: AnimationDriver, element: any, currentState: any, nextState: any,
+      options?: AnimationOptions,
+      subInstructions?: ElementInstructionMap): AnimationTransitionInstruction {
+    const animationOptions = mergeAnimationOptions(this.ast.options || {}, options || {});
 
     const backupStateStyles = this._stateStyles['*'] || {};
     const currentStateStyles = this._stateStyles[currentState] || backupStateStyles;
     const nextStateStyles = this._stateStyles[nextState] || backupStateStyles;
+    const queriedElements = new Set<any>();
+    const preStyleMap = new Map<any, {[prop: string]: boolean}>();
+    const postStyleMap = new Map<any, {[prop: string]: boolean}>();
+    const isRemoval = nextState === 'void';
 
-    const timelines =
-        buildAnimationKeyframes(this._animationAst, currentStateStyles, nextStateStyles);
+    const errors: any[] = [];
+    const timelines = buildAnimationTimelines(
+        driver, element, this.ast.animation, currentStateStyles, nextStateStyles, animationOptions,
+        subInstructions, errors);
 
+    if (errors.length) {
+      return createTransitionInstruction(
+          element, this._triggerName, currentState, nextState, isRemoval, currentStateStyles,
+          nextStateStyles, [], [], preStyleMap, postStyleMap, errors);
+    }
+
+    timelines.forEach(tl => {
+      const elm = tl.element;
+      const preProps = getOrSetAsInMap(preStyleMap, elm, {});
+      tl.preStyleProps.forEach(prop => preProps[prop] = true);
+
+      const postProps = getOrSetAsInMap(postStyleMap, elm, {});
+      tl.postStyleProps.forEach(prop => postProps[prop] = true);
+
+      if (elm !== element) {
+        queriedElements.add(elm);
+      }
+    });
+
+    const queriedElementsList = iteratorToArray(queriedElements.values());
     return createTransitionInstruction(
-        this._triggerName, currentState, nextState, nextState === 'void', currentStateStyles,
-        nextStateStyles, timelines);
+        element, this._triggerName, currentState, nextState, isRemoval, currentStateStyles,
+        nextStateStyles, timelines, queriedElementsList, preStyleMap, postStyleMap);
   }
 }
 
diff --git a/packages/animations/browser/src/dsl/animation_transition_instruction.ts b/packages/animations/browser/src/dsl/animation_transition_instruction.ts
index d2cc70fcaf..f1062b322b 100644
--- a/packages/animations/browser/src/dsl/animation_transition_instruction.ts
+++ b/packages/animations/browser/src/dsl/animation_transition_instruction.ts
@@ -10,6 +10,7 @@ import {AnimationEngineInstruction, AnimationTransitionInstructionType} from '..
 import {AnimationTimelineInstruction} from './animation_timeline_instruction';
 
 export interface AnimationTransitionInstruction extends AnimationEngineInstruction {
+  element: any;
   triggerName: string;
   isRemovalTransition: boolean;
   fromState: string;
@@ -17,20 +18,32 @@ export interface AnimationTransitionInstruction extends AnimationEngineInstructi
   toState: string;
   toStyles: ɵStyleData;
   timelines: AnimationTimelineInstruction[];
+  queriedElements: any[];
+  preStyleProps: Map<any, {[prop: string]: boolean}>;
+  postStyleProps: Map<any, {[prop: string]: boolean}>;
+  errors?: any[];
 }
 
 export function createTransitionInstruction(
-    triggerName: string, fromState: string, toState: string, isRemovalTransition: boolean,
-    fromStyles: ɵStyleData, toStyles: ɵStyleData,
-    timelines: AnimationTimelineInstruction[]): AnimationTransitionInstruction {
+    element: any, triggerName: string, fromState: string, toState: string,
+    isRemovalTransition: boolean, fromStyles: ɵStyleData, toStyles: ɵStyleData,
+    timelines: AnimationTimelineInstruction[], queriedElements: any[],
+    preStyleProps: Map<any, {[prop: string]: boolean}>,
+    postStyleProps: Map<any, {[prop: string]: boolean}>,
+    errors?: any[]): AnimationTransitionInstruction {
   return {
     type: AnimationTransitionInstructionType.TransitionAnimation,
+    element,
     triggerName,
     isRemovalTransition,
     fromState,
     fromStyles,
     toState,
     toStyles,
-    timelines
+    timelines,
+    queriedElements,
+    preStyleProps,
+    postStyleProps,
+    errors
   };
 }
diff --git a/packages/animations/browser/src/dsl/animation_trigger.ts b/packages/animations/browser/src/dsl/animation_trigger.ts
index a5492a5efc..19cfdeaad5 100644
--- a/packages/animations/browser/src/dsl/animation_trigger.ts
+++ b/packages/animations/browser/src/dsl/animation_trigger.ts
@@ -5,22 +5,18 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, ɵStyleData} from '@angular/animations';
+import {ɵStyleData} from '@angular/animations';
 
-import {copyStyles, normalizeStyles} from '../util';
+import {copyStyles} from '../util';
 
-import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
-import {parseTransitionExpr} from './animation_transition_expr';
+import {SequenceAst, TransitionAst, TriggerAst} from './animation_ast';
 import {AnimationTransitionFactory} from './animation_transition_factory';
-import {AnimationTransitionInstruction, createTransitionInstruction} from './animation_transition_instruction';
-import {validateAnimationSequence} from './animation_validator_visitor';
-
 
 /**
  * @experimental Animation support is experimental.
  */
-export function buildTrigger(name: string, definitions: AnimationMetadata[]): AnimationTrigger {
-  return new AnimationTriggerVisitor().buildTrigger(name, definitions);
+export function buildTrigger(name: string, ast: TriggerAst): AnimationTrigger {
+  return new AnimationTrigger(name, ast);
 }
 
 /**
@@ -28,90 +24,51 @@ export function buildTrigger(name: string, definitions: AnimationMetadata[]): An
 */
 export class AnimationTrigger {
   public transitionFactories: AnimationTransitionFactory[] = [];
+  public fallbackTransition: AnimationTransitionFactory;
   public states: {[stateName: string]: ɵStyleData} = {};
 
-  constructor(
-      public name: string, states: {[stateName: string]: ɵStyleData},
-      private _transitionAsts: AnimationTransitionMetadata[]) {
-    Object.keys(states).forEach(
-        stateName => { this.states[stateName] = copyStyles(states[stateName], false); });
-
-    const errors: string[] = [];
-    _transitionAsts.forEach(ast => {
-      const exprs = parseTransitionExpr(ast.expr, errors);
-      const sequenceErrors = validateAnimationSequence(ast);
-      if (sequenceErrors.length) {
-        errors.push(...sequenceErrors);
-      } else {
-        this.transitionFactories.push(
-            new AnimationTransitionFactory(this.name, ast, exprs, states));
-      }
+  constructor(public name: string, public ast: TriggerAst) {
+    ast.states.forEach(ast => {
+      const obj = this.states[ast.name] = {};
+      ast.style.styles.forEach(styleTuple => {
+        if (typeof styleTuple == 'object') {
+          copyStyles(styleTuple as ɵStyleData, false, obj);
+        }
+      });
     });
 
-    if (errors.length) {
-      const LINE_START = '\n - ';
-      throw new Error(
-          `Animation parsing for the ${name} trigger have failed:${LINE_START}${errors.join(LINE_START)}`);
+    balanceProperties(this.states, 'true', '1');
+    balanceProperties(this.states, 'false', '0');
+
+    ast.transitions.forEach(ast => {
+      this.transitionFactories.push(new AnimationTransitionFactory(name, ast, this.states));
+    });
+
+    this.fallbackTransition = createFallbackTransition(name, this.states);
+  }
+
+  get containsQueries() { return this.ast.queryCount > 0; }
+
+  matchTransition(currentState: any, nextState: any): AnimationTransitionFactory|null {
+    const entry = this.transitionFactories.find(f => f.match(currentState, nextState));
+    return entry || null;
+  }
+}
+
+function createFallbackTransition(
+    triggerName: string, states: {[stateName: string]: ɵStyleData}): AnimationTransitionFactory {
+  const matchers = [(fromState: any, toState: any) => true];
+  const animation = new SequenceAst([]);
+  const transition = new TransitionAst(matchers, animation);
+  return new AnimationTransitionFactory(triggerName, transition, states);
+}
+
+function balanceProperties(obj: {[key: string]: any}, key1: string, key2: string) {
+  if (obj.hasOwnProperty(key1)) {
+    if (!obj.hasOwnProperty(key2)) {
+      obj[key2] = obj[key1];
     }
-  }
-
-  createFallbackInstruction(currentState: any, nextState: any): AnimationTransitionInstruction {
-    const backupStateStyles = this.states['*'] || {};
-    const currentStateStyles = this.states[currentState] || backupStateStyles;
-    const nextStateStyles = this.states[nextState] || backupStateStyles;
-    return createTransitionInstruction(
-        this.name, currentState, nextState, nextState == 'void', currentStateStyles,
-        nextStateStyles, []);
-  }
-
-  matchTransition(currentState: any, nextState: any): AnimationTransitionInstruction|null {
-    for (let i = 0; i < this.transitionFactories.length; i++) {
-      let result = this.transitionFactories[i].match(currentState, nextState);
-      if (result) return result;
-    }
-    return null;
-  }
-}
-
-class AnimationTriggerContext {
-  public errors: string[] = [];
-  public states: {[stateName: string]: ɵStyleData} = {};
-  public transitions: AnimationTransitionMetadata[] = [];
-}
-
-class AnimationTriggerVisitor implements AnimationDslVisitor {
-  buildTrigger(name: string, definitions: AnimationMetadata[]): AnimationTrigger {
-    const context = new AnimationTriggerContext();
-    definitions.forEach(def => visitAnimationNode(this, def, context));
-    return new AnimationTrigger(name, context.states, context.transitions);
-  }
-
-  visitState(ast: AnimationStateMetadata, context: any): any {
-    const styles = normalizeStyles(ast.styles.styles);
-    ast.name.split(/\s*,\s*/).forEach(name => { context.states[name] = styles; });
-  }
-
-  visitTransition(ast: AnimationTransitionMetadata, context: any): any {
-    context.transitions.push(ast);
-  }
-
-  visitSequence(ast: AnimationSequenceMetadata, context: any) {
-    // these values are not visited in this AST
-  }
-
-  visitGroup(ast: AnimationGroupMetadata, context: any) {
-    // these values are not visited in this AST
-  }
-
-  visitAnimate(ast: AnimationAnimateMetadata, context: any) {
-    // these values are not visited in this AST
-  }
-
-  visitStyle(ast: AnimationStyleMetadata, context: any) {
-    // these values are not visited in this AST
-  }
-
-  visitKeyframeSequence(ast: AnimationKeyframesSequenceMetadata, context: any) {
-    // these values are not visited in this AST
+  } else if (obj.hasOwnProperty(key2)) {
+    obj[key1] = obj[key2];
   }
 }
diff --git a/packages/animations/browser/src/dsl/animation_validator_visitor.ts b/packages/animations/browser/src/dsl/animation_validator_visitor.ts
deleted file mode 100644
index baf859cf9d..0000000000
--- a/packages/animations/browser/src/dsl/animation_validator_visitor.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-import {AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, sequence} from '@angular/animations';
-
-import {normalizeStyles, parseTimeExpression} from '../util';
-
-import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
-
-export type StyleTimeTuple = {
-  startTime: number; endTime: number;
-};
-
-/*
- * [Validation]
- * The visitor code below will traverse the animation AST generated by the animation verb functions
- * (the output is a tree of objects) and attempt to perform a series of validations on the data. The
- * following corner-cases will be validated:
- *
- * 1. Overlap of animations
- * Given that a CSS property cannot be animated in more than one place at the same time, it's
- * important that this behaviour is detected and validated. The way in which this occurs is that
- * each time a style property is examined, a string-map containing the property will be updated with
- * the start and end times for when the property is used within an animation step.
- *
- * If there are two or more parallel animations that are currently running (these are invoked by the
- * group()) on the same element then the validator will throw an error. Since the start/end timing
- * values are collected for each property then if the current animation step is animating the same
- * property and its timing values fall anywhere into the window of time that the property is
- * currently being animated within then this is what causes an error.
- *
- * 2. Timing values
- * The validator will validate to see if a timing value of `duration delay easing` or
- * `durationNumber` is valid or not.
- *
- * (note that upon validation the code below will replace the timing data with an object containing
- * {duration,delay,easing}.
- *
- * 3. Offset Validation
- * Each of the style() calls are allowed to have an offset value when placed inside of keyframes().
- * Offsets within keyframes() are considered valid when:
- *
- *   - No offsets are used at all
- *   - Each style() entry contains an offset value
- *   - Each offset is between 0 and 1
- *   - Each offset is greater to or equal than the previous one
- *
- * Otherwise an error will be thrown.
- */
-export function validateAnimationSequence(ast: AnimationMetadata) {
-  const normalizedAst =
-      Array.isArray(ast) ? sequence(<AnimationMetadata[]>ast) : <AnimationMetadata>ast;
-  return new AnimationValidatorVisitor().validate(normalizedAst);
-}
-
-export class AnimationValidatorVisitor implements AnimationDslVisitor {
-  validate(ast: AnimationMetadata): string[] {
-    const context = new AnimationValidatorContext();
-    visitAnimationNode(this, ast, context);
-    return context.errors;
-  }
-
-  visitState(ast: AnimationStateMetadata, context: any): any {
-    // these values are not visited in this AST
-  }
-
-  visitTransition(ast: AnimationTransitionMetadata, context: any): any {
-    // these values are not visited in this AST
-  }
-
-  visitSequence(ast: AnimationSequenceMetadata, context: AnimationValidatorContext): any {
-    ast.steps.forEach(step => visitAnimationNode(this, step, context));
-  }
-
-  visitGroup(ast: AnimationGroupMetadata, context: AnimationValidatorContext): any {
-    const currentTime = context.currentTime;
-    let furthestTime = 0;
-    ast.steps.forEach(step => {
-      context.currentTime = currentTime;
-      visitAnimationNode(this, step, context);
-      furthestTime = Math.max(furthestTime, context.currentTime);
-    });
-    context.currentTime = furthestTime;
-  }
-
-  visitAnimate(ast: AnimationAnimateMetadata, context: AnimationValidatorContext): any {
-    // we reassign the timings here so that they are not reparsed each
-    // time an animation occurs
-    context.currentAnimateTimings = ast.timings =
-        parseTimeExpression(<string|number>ast.timings, context.errors);
-
-    const astType = ast.styles && ast.styles.type;
-    if (astType == AnimationMetadataType.KeyframeSequence) {
-      this.visitKeyframeSequence(<AnimationKeyframesSequenceMetadata>ast.styles, context);
-    } else {
-      context.currentTime +=
-          context.currentAnimateTimings.duration + context.currentAnimateTimings.delay;
-      if (astType == AnimationMetadataType.Style) {
-        this.visitStyle(<AnimationStyleMetadata>ast.styles, context);
-      }
-    }
-
-    context.currentAnimateTimings = null;
-  }
-
-  visitStyle(ast: AnimationStyleMetadata, context: AnimationValidatorContext): any {
-    const styleData = normalizeStyles(ast.styles);
-    const timings = context.currentAnimateTimings;
-    let endTime = context.currentTime;
-    let startTime = context.currentTime;
-    if (timings && startTime > 0) {
-      startTime -= timings.duration + timings.delay;
-    }
-    Object.keys(styleData).forEach(prop => {
-      const collectedEntry = context.collectedStyles[prop];
-      let updateCollectedStyle = true;
-      if (collectedEntry) {
-        if (startTime != endTime && startTime >= collectedEntry.startTime &&
-            endTime <= collectedEntry.endTime) {
-          context.errors.push(
-              `The CSS property "${prop}" that exists between the times of "${collectedEntry.startTime}ms" and "${collectedEntry.endTime}ms" is also being animated in a parallel animation between the times of "${startTime}ms" and "${endTime}ms"`);
-          updateCollectedStyle = false;
-        }
-
-        // we always choose the smaller start time value since we
-        // want to have a record of the entire animation window where
-        // the style property is being animated in between
-        startTime = collectedEntry.startTime;
-      }
-      if (updateCollectedStyle) {
-        context.collectedStyles[prop] = {startTime, endTime};
-      }
-    });
-  }
-
-  visitKeyframeSequence(
-      ast: AnimationKeyframesSequenceMetadata, context: AnimationValidatorContext): any {
-    let totalKeyframesWithOffsets = 0;
-    const offsets: number[] = [];
-    let offsetsOutOfOrder = false;
-    let keyframesOutOfRange = false;
-    let previousOffset: number = 0;
-    ast.steps.forEach(step => {
-      const styleData = normalizeStyles(step.styles);
-      let offset = 0;
-      if (styleData.hasOwnProperty('offset')) {
-        totalKeyframesWithOffsets++;
-        offset = <number>styleData['offset'];
-      }
-      keyframesOutOfRange = keyframesOutOfRange || offset < 0 || offset > 1;
-      offsetsOutOfOrder = offsetsOutOfOrder || offset < previousOffset;
-      previousOffset = offset;
-      offsets.push(offset);
-    });
-
-    if (keyframesOutOfRange) {
-      context.errors.push(`Please ensure that all keyframe offsets are between 0 and 1`);
-    }
-
-    if (offsetsOutOfOrder) {
-      context.errors.push(`Please ensure that all keyframe offsets are in order`);
-    }
-
-    const length = ast.steps.length;
-    let generatedOffset = 0;
-    if (totalKeyframesWithOffsets > 0 && totalKeyframesWithOffsets < length) {
-      context.errors.push(`Not all style() steps within the declared keyframes() contain offsets`);
-    } else if (totalKeyframesWithOffsets == 0) {
-      generatedOffset = 1 / length;
-    }
-
-    const limit = length - 1;
-    const currentTime = context.currentTime;
-    const animateDuration = context.currentAnimateTimings !.duration;
-    ast.steps.forEach((step, i) => {
-      const offset = generatedOffset > 0 ? (i == limit ? 1 : (generatedOffset * i)) : offsets[i];
-      const durationUpToThisFrame = offset * animateDuration;
-      context.currentTime =
-          currentTime + context.currentAnimateTimings !.delay + durationUpToThisFrame;
-      context.currentAnimateTimings !.duration = durationUpToThisFrame;
-      this.visitStyle(step, context);
-    });
-  }
-}
-
-export class AnimationValidatorContext {
-  public errors: string[] = [];
-  public currentTime: number = 0;
-  public currentAnimateTimings: AnimateTimings|null;
-  public collectedStyles: {[propName: string]: StyleTimeTuple} = {};
-}
diff --git a/packages/animations/browser/src/dsl/element_instruction_map.ts b/packages/animations/browser/src/dsl/element_instruction_map.ts
new file mode 100644
index 0000000000..ad61a5f35e
--- /dev/null
+++ b/packages/animations/browser/src/dsl/element_instruction_map.ts
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AnimationTimelineInstruction} from './animation_timeline_instruction';
+
+export class ElementInstructionMap {
+  private _map = new Map<any, AnimationTimelineInstruction[]>();
+
+  consume(element: any): AnimationTimelineInstruction[] {
+    let instructions = this._map.get(element);
+    if (instructions) {
+      this._map.delete(element);
+    } else {
+      instructions = [];
+    }
+    return instructions;
+  }
+
+  append(element: any, instructions: AnimationTimelineInstruction[]) {
+    let existingInstructions = this._map.get(element);
+    if (!existingInstructions) {
+      this._map.set(element, existingInstructions = []);
+    }
+    existingInstructions.push(...instructions);
+  }
+
+  has(element: any): boolean { return this._map.has(element); }
+
+  clear() { this._map.clear(); }
+}
diff --git a/packages/animations/browser/src/dsl/style_normalization/web_animations_style_normalizer.ts b/packages/animations/browser/src/dsl/style_normalization/web_animations_style_normalizer.ts
index 89e59f7db2..2a79684e90 100644
--- a/packages/animations/browser/src/dsl/style_normalization/web_animations_style_normalizer.ts
+++ b/packages/animations/browser/src/dsl/style_normalization/web_animations_style_normalizer.ts
@@ -5,6 +5,8 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import {dashCaseToCamelCase} from '../../util';
+
 import {AnimationStyleNormalizer} from './animation_style_normalizer';
 
 export class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
@@ -33,7 +35,7 @@ export class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
 }
 
 const DIMENSIONAL_PROP_MAP = makeBooleanMap(
-    'width,height,minWidth,minHeight,maxWidth,maxHeight,left,top,bottom,right,fontSize,outlineWidth,outlineOffset,paddingTop,paddingLeft,paddingBottom,paddingRight,marginTop,marginLeft,marginBottom,marginRight,borderRadius,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,textIndent'
+    'width,height,minWidth,minHeight,maxWidth,maxHeight,left,top,bottom,right,fontSize,outlineWidth,outlineOffset,paddingTop,paddingLeft,paddingBottom,paddingRight,marginTop,marginLeft,marginBottom,marginRight,borderRadius,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,textIndent,perspective'
         .split(','));
 
 function makeBooleanMap(keys: string[]): {[key: string]: boolean} {
@@ -41,8 +43,3 @@ function makeBooleanMap(keys: string[]): {[key: string]: boolean} {
   keys.forEach(key => map[key] = true);
   return map;
 }
-
-const DASH_CASE_REGEXP = /-+([a-z0-9])/g;
-export function dashCaseToCamelCase(input: string): string {
-  return input.replace(DASH_CASE_REGEXP, (...m: any[]) => m[1].toUpperCase());
-}
diff --git a/packages/animations/browser/src/private_export.ts b/packages/animations/browser/src/private_export.ts
index ff9e74e968..c0910e2dc8 100644
--- a/packages/animations/browser/src/private_export.ts
+++ b/packages/animations/browser/src/private_export.ts
@@ -5,12 +5,10 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-export {AnimationEngine as ɵAnimationEngine} from './animation_engine';
 export {Animation as ɵAnimation} from './dsl/animation';
 export {AnimationStyleNormalizer as ɵAnimationStyleNormalizer, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer} from './dsl/style_normalization/animation_style_normalizer';
 export {WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer} from './dsl/style_normalization/web_animations_style_normalizer';
 export {NoopAnimationDriver as ɵNoopAnimationDriver} from './render/animation_driver';
-export {DomAnimationEngine as ɵDomAnimationEngine} from './render/dom_animation_engine';
-export {NoopAnimationEngine as ɵNoopAnimationEngine} from './render/noop_animation_engine';
+export {AnimationEngine as ɵAnimationEngine} from './render/animation_engine_next';
 export {WebAnimationsDriver as ɵWebAnimationsDriver, supportsWebAnimations as ɵsupportsWebAnimations} from './render/web_animations/web_animations_driver';
 export {WebAnimationsPlayer as ɵWebAnimationsPlayer} from './render/web_animations/web_animations_player';
diff --git a/packages/animations/browser/src/render/animation_driver.ts b/packages/animations/browser/src/render/animation_driver.ts
index 48d05dfa97..6fe7e732d3 100644
--- a/packages/animations/browser/src/render/animation_driver.ts
+++ b/packages/animations/browser/src/render/animation_driver.ts
@@ -5,15 +5,29 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
 import {AnimationPlayer, NoopAnimationPlayer} from '@angular/animations';
 
+import {containsElement, invokeQuery, matchesElement} from './shared';
 
 
 /**
  * @experimental
  */
 export class NoopAnimationDriver implements AnimationDriver {
+  matchesElement(element: any, selector: string): boolean {
+    return matchesElement(element, selector);
+  }
+
+  containsElement(elm1: any, elm2: any): boolean { return containsElement(elm1, elm2); }
+
+  query(element: any, selector: string, multi: boolean): any[] {
+    return invokeQuery(element, selector, multi);
+  }
+
+  computeStyle(element: any, prop: string, defaultValue?: string): string {
+    return defaultValue || '';
+  }
+
   animate(
       element: any, keyframes: {[key: string]: string | number}[], duration: number, delay: number,
       easing: string, previousPlayers: any[] = []): AnimationPlayer {
@@ -26,6 +40,15 @@ export class NoopAnimationDriver implements AnimationDriver {
  */
 export abstract class AnimationDriver {
   static NOOP: AnimationDriver = new NoopAnimationDriver();
+
+  abstract matchesElement(element: any, selector: string): boolean;
+
+  abstract containsElement(elm1: any, elm2: any): boolean;
+
+  abstract query(element: any, selector: string, multi: boolean): any[];
+
+  abstract computeStyle(element: any, prop: string, defaultValue?: string): string;
+
   abstract animate(
       element: any, keyframes: {[key: string]: string | number}[], duration: number, delay: number,
       easing?: string|null, previousPlayers?: any[]): any;
diff --git a/packages/animations/browser/src/render/animation_engine_next.ts b/packages/animations/browser/src/render/animation_engine_next.ts
new file mode 100644
index 0000000000..4aa25fc0db
--- /dev/null
+++ b/packages/animations/browser/src/render/animation_engine_next.ts
@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AnimationMetadata, AnimationPlayer, AnimationTriggerMetadata} from '@angular/animations';
+import {TriggerAst} from '../dsl/animation_ast';
+import {buildAnimationAst} from '../dsl/animation_ast_builder';
+import {AnimationTrigger, buildTrigger} from '../dsl/animation_trigger';
+import {AnimationStyleNormalizer} from '../dsl/style_normalization/animation_style_normalizer';
+
+import {AnimationDriver} from './animation_driver';
+import {parseTimelineCommand} from './shared';
+import {TimelineAnimationEngine} from './timeline_animation_engine';
+import {TransitionAnimationEngine} from './transition_animation_engine';
+
+export class AnimationEngine {
+  private _transitionEngine: TransitionAnimationEngine;
+  private _timelineEngine: TimelineAnimationEngine;
+
+  private _triggerCache: {[key: string]: AnimationTrigger} = {};
+
+  // this method is designed to be overridden by the code that uses this engine
+  public onRemovalComplete = (element: any, context: any) => {};
+
+  constructor(driver: AnimationDriver, normalizer: AnimationStyleNormalizer) {
+    this._transitionEngine = new TransitionAnimationEngine(driver, normalizer);
+    this._timelineEngine = new TimelineAnimationEngine(driver, normalizer);
+
+    this._transitionEngine.onRemovalComplete =
+        (element: any, context: any) => { this.onRemovalComplete(element, context); }
+  }
+
+  registerTrigger(
+      componentId: string, namespaceId: string, hostElement: any, name: string,
+      metadata: AnimationTriggerMetadata): void {
+    const cacheKey = componentId + '-' + name;
+    let trigger = this._triggerCache[cacheKey];
+    if (!trigger) {
+      const errors: any[] = [];
+      const ast = buildAnimationAst(metadata as AnimationMetadata, errors) as TriggerAst;
+      if (errors.length) {
+        throw new Error(
+            `The animation trigger "${name}" has failed to build due to the following errors:\n - ${errors.join("\n - ")}`);
+      }
+      trigger = buildTrigger(name, ast);
+      this._triggerCache[cacheKey] = trigger;
+    }
+    this._transitionEngine.registerTrigger(namespaceId, name, trigger);
+  }
+
+  register(namespaceId: string, hostElement: any) {
+    this._transitionEngine.register(namespaceId, hostElement);
+  }
+
+  destroy(namespaceId: string, context: any) {
+    this._transitionEngine.destroy(namespaceId, context);
+  }
+
+  onInsert(namespaceId: string, element: any, parent: any, insertBefore: boolean): void {
+    this._transitionEngine.insertNode(namespaceId, element, parent, insertBefore);
+  }
+
+  onRemove(namespaceId: string, element: any, context: any): void {
+    this._transitionEngine.removeNode(namespaceId, element, context);
+  }
+
+  disableAnimations(element: any, disable: boolean) {
+    this._transitionEngine.markElementAsDisabled(element, disable);
+  }
+
+  process(namespaceId: string, element: any, property: string, value: any) {
+    if (property.charAt(0) == '@') {
+      const [id, action] = parseTimelineCommand(property);
+      const args = value as any[];
+      this._timelineEngine.command(id, element, action, args);
+    } else {
+      this._transitionEngine.trigger(namespaceId, element, property, value);
+    }
+  }
+
+  listen(
+      namespaceId: string, element: any, eventName: string, eventPhase: string,
+      callback: (event: any) => any): () => any {
+    // @@listen
+    if (eventName.charAt(0) == '@') {
+      const [id, action] = parseTimelineCommand(eventName);
+      return this._timelineEngine.listen(id, element, action, callback);
+    }
+    return this._transitionEngine.listen(namespaceId, element, eventName, eventPhase, callback);
+  }
+
+  flush(microtaskId: number = -1): void { this._transitionEngine.flush(microtaskId); }
+
+  get players(): AnimationPlayer[] {
+    return (this._transitionEngine.players as AnimationPlayer[])
+        .concat(this._timelineEngine.players as AnimationPlayer[]);
+  }
+
+  whenRenderingDone(): Promise<any> { return this._transitionEngine.whenRenderingDone(); }
+}
diff --git a/packages/animations/browser/src/render/dom_animation_engine.ts b/packages/animations/browser/src/render/dom_animation_engine.ts
deleted file mode 100644
index f59611d9fc..0000000000
--- a/packages/animations/browser/src/render/dom_animation_engine.ts
+++ /dev/null
@@ -1,527 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-import {AnimationEvent, AnimationPlayer, AnimationTriggerMetadata, NoopAnimationPlayer, ɵAnimationGroupPlayer, ɵStyleData} from '@angular/animations';
-
-import {AnimationTimelineInstruction} from '../dsl/animation_timeline_instruction';
-import {AnimationTransitionInstruction} from '../dsl/animation_transition_instruction';
-import {AnimationTrigger, buildTrigger} from '../dsl/animation_trigger';
-import {AnimationStyleNormalizer} from '../dsl/style_normalization/animation_style_normalizer';
-import {eraseStyles, setStyles} from '../util';
-
-import {AnimationDriver} from './animation_driver';
-
-export interface QueuedAnimationTransitionTuple {
-  element: any;
-  player: AnimationPlayer;
-  triggerName: string;
-  event: AnimationEvent;
-}
-
-export interface TriggerListenerTuple {
-  triggerName: string;
-  phase: string;
-  callback: (event: any) => any;
-}
-
-const MARKED_FOR_ANIMATION_CLASSNAME = 'ng-animating';
-const MARKED_FOR_ANIMATION_SELECTOR = '.ng-animating';
-const MARKED_FOR_REMOVAL = '$$ngRemove';
-const VOID_STATE = 'void';
-
-export class DomAnimationEngine {
-  private _flaggedInserts = new Set<any>();
-  private _queuedRemovals = new Map<any, () => any>();
-  private _queuedTransitionAnimations: QueuedAnimationTransitionTuple[] = [];
-  private _activeTransitionAnimations = new Map<any, {[triggerName: string]: AnimationPlayer}>();
-  private _activeElementAnimations = new Map<any, AnimationPlayer[]>();
-
-  private _elementTriggerStates = new Map<any, {[triggerName: string]: string}>();
-
-  private _triggers: {[triggerName: string]: AnimationTrigger} = Object.create(null);
-  private _triggerListeners = new Map<any, TriggerListenerTuple[]>();
-
-  private _pendingListenerRemovals = new Map<any, TriggerListenerTuple[]>();
-
-  constructor(private _driver: AnimationDriver, private _normalizer: AnimationStyleNormalizer) {}
-
-  get queuedPlayers(): AnimationPlayer[] {
-    return this._queuedTransitionAnimations.map(q => q.player);
-  }
-
-  get activePlayers(): AnimationPlayer[] {
-    const players: AnimationPlayer[] = [];
-    this._activeElementAnimations.forEach(activePlayers => players.push(...activePlayers));
-    return players;
-  }
-
-  registerTrigger(trigger: AnimationTriggerMetadata, name?: string): void {
-    name = name || trigger.name;
-    if (this._triggers[name]) {
-      return;
-    }
-    this._triggers[name] = buildTrigger(name, trigger.definitions);
-  }
-
-  onInsert(element: any, domFn: () => any): void {
-    if (element['nodeType'] == 1) {
-      this._flaggedInserts.add(element);
-    }
-    domFn();
-  }
-
-  onRemove(element: any, domFn: () => any): void {
-    if (element['nodeType'] != 1) {
-      domFn();
-      return;
-    }
-
-    let lookupRef = this._elementTriggerStates.get(element);
-    if (lookupRef) {
-      const possibleTriggers = Object.keys(lookupRef);
-      const hasRemoval = possibleTriggers.some(triggerName => {
-        const oldValue = lookupRef ![triggerName];
-        const instruction = this._triggers[triggerName].matchTransition(oldValue, VOID_STATE);
-        return !!instruction;
-      });
-      if (hasRemoval) {
-        element[MARKED_FOR_REMOVAL] = true;
-        this._queuedRemovals.set(element, domFn);
-        return;
-      }
-    }
-
-    // this means that there are no animations to take on this
-    // leave operation therefore we should fire the done|start callbacks
-    if (this._triggerListeners.has(element)) {
-      element[MARKED_FOR_REMOVAL] = true;
-      this._queuedRemovals.set(element, () => {});
-    }
-    this._onRemovalTransition(element).forEach(player => player.destroy());
-    domFn();
-  }
-
-  setProperty(element: any, property: string, value: any): void {
-    const trigger = this._triggers[property];
-    if (!trigger) {
-      throw new Error(`The provided animation trigger "${property}" has not been registered!`);
-    }
-
-    let lookupRef = this._elementTriggerStates.get(element);
-    if (!lookupRef) {
-      this._elementTriggerStates.set(element, lookupRef = {});
-    }
-
-    let oldValue = lookupRef.hasOwnProperty(property) ? lookupRef[property] : VOID_STATE;
-    if (oldValue !== value) {
-      value = normalizeTriggerValue(value);
-      let instruction = trigger.matchTransition(oldValue, value);
-      if (!instruction) {
-        // we do this to make sure we always have an animation player so
-        // that callback operations are properly called
-        instruction = trigger.createFallbackInstruction(oldValue, value);
-      }
-      this.animateTransition(element, instruction);
-      lookupRef[property] = value;
-    }
-  }
-
-  listen(element: any, eventName: string, eventPhase: string, callback: (event: any) => any):
-      () => void {
-    if (!eventPhase) {
-      throw new Error(
-          `Unable to listen on the animation trigger "${eventName}" because the provided event is undefined!`);
-    }
-    if (!this._triggers[eventName]) {
-      throw new Error(
-          `Unable to listen on the animation trigger event "${eventPhase}" because the animation trigger "${eventName}" doesn't exist!`);
-    }
-    let elementListeners = this._triggerListeners.get(element);
-    if (!elementListeners) {
-      this._triggerListeners.set(element, elementListeners = []);
-    }
-    validatePlayerEvent(eventName, eventPhase);
-    const tuple = <TriggerListenerTuple>{triggerName: eventName, phase: eventPhase, callback};
-    elementListeners.push(tuple);
-    return () => {
-      // this is queued up in the event that a removal animation is set
-      // to fire on the element (the listeners need to be set during flush)
-      getOrSetAsInMap(this._pendingListenerRemovals, element, []).push(tuple);
-    };
-  }
-
-  private _clearPendingListenerRemovals() {
-    this._pendingListenerRemovals.forEach((tuples: TriggerListenerTuple[], element: any) => {
-      const elementListeners = this._triggerListeners.get(element);
-      if (elementListeners) {
-        tuples.forEach(tuple => {
-          const index = elementListeners.indexOf(tuple);
-          if (index >= 0) {
-            elementListeners.splice(index, 1);
-          }
-        });
-      }
-    });
-    this._pendingListenerRemovals.clear();
-  }
-
-  private _onRemovalTransition(element: any): AnimationPlayer[] {
-    // when a parent animation is set to trigger a removal we want to
-    // find all of the children that are currently animating and clear
-    // them out by destroying each of them.
-    const elms = element.querySelectorAll(MARKED_FOR_ANIMATION_SELECTOR);
-    for (let i = 0; i < elms.length; i++) {
-      const elm = elms[i];
-      const activePlayers = this._activeElementAnimations.get(elm);
-      if (activePlayers) {
-        activePlayers.forEach(player => player.destroy());
-      }
-
-      const activeTransitions = this._activeTransitionAnimations.get(elm);
-      if (activeTransitions) {
-        Object.keys(activeTransitions).forEach(triggerName => {
-          const player = activeTransitions[triggerName];
-          if (player) {
-            player.destroy();
-          }
-        });
-      }
-    }
-
-    // we make a copy of the array because the actual source array is modified
-    // each time a player is finished/destroyed (the forEach loop would fail otherwise)
-    return copyArray(this._activeElementAnimations.get(element) !);
-  }
-
-  animateTransition(element: any, instruction: AnimationTransitionInstruction): AnimationPlayer {
-    const triggerName = instruction.triggerName;
-
-    let previousPlayers: AnimationPlayer[];
-    if (instruction.isRemovalTransition) {
-      previousPlayers = this._onRemovalTransition(element);
-    } else {
-      previousPlayers = [];
-      const existingTransitions = this._activeTransitionAnimations.get(element);
-      const existingPlayer = existingTransitions ? existingTransitions[triggerName] : null;
-      if (existingPlayer) {
-        previousPlayers.push(existingPlayer);
-      }
-    }
-
-    // it's important to do this step before destroying the players
-    // so that the onDone callback below won't fire before this
-    eraseStyles(element, instruction.fromStyles);
-
-    // we first run this so that the previous animation player
-    // data can be passed into the successive animation players
-    let totalTime = 0;
-    const players = instruction.timelines.map((timelineInstruction, i) => {
-      totalTime = Math.max(totalTime, timelineInstruction.totalTime);
-      return this._buildPlayer(element, timelineInstruction, previousPlayers, i);
-    });
-
-    previousPlayers.forEach(previousPlayer => previousPlayer.destroy());
-    const player = optimizeGroupPlayer(players);
-    player.onDone(() => {
-      player.destroy();
-      const elmTransitionMap = this._activeTransitionAnimations.get(element);
-      if (elmTransitionMap) {
-        delete elmTransitionMap[triggerName];
-        if (Object.keys(elmTransitionMap).length == 0) {
-          this._activeTransitionAnimations.delete(element);
-        }
-      }
-      deleteFromArrayMap(this._activeElementAnimations, element, player);
-      setStyles(element, instruction.toStyles);
-    });
-
-    const elmTransitionMap = getOrSetAsInMap(this._activeTransitionAnimations, element, {});
-    elmTransitionMap[triggerName] = player;
-
-    this._queuePlayer(
-        element, triggerName, player,
-        makeAnimationEvent(
-            element, triggerName, instruction.fromState, instruction.toState,
-            null,  // this will be filled in during event creation
-            totalTime));
-
-    return player;
-  }
-
-  public animateTimeline(
-      element: any, instructions: AnimationTimelineInstruction[],
-      previousPlayers: AnimationPlayer[] = []): AnimationPlayer {
-    const players = instructions.map((instruction, i) => {
-      const player = this._buildPlayer(element, instruction, previousPlayers, i);
-      player.onDestroy(
-          () => { deleteFromArrayMap(this._activeElementAnimations, element, player); });
-      this._markPlayerAsActive(element, player);
-      return player;
-    });
-    return optimizeGroupPlayer(players);
-  }
-
-  private _buildPlayer(
-      element: any, instruction: AnimationTimelineInstruction, previousPlayers: AnimationPlayer[],
-      index: number = 0): AnimationPlayer {
-    // only the very first animation can absorb the previous styles. This
-    // is here to prevent the an overlap situation where a group animation
-    // absorbs previous styles multiple times for the same element.
-    if (index && previousPlayers.length) {
-      previousPlayers = [];
-    }
-    return this._driver.animate(
-        element, this._normalizeKeyframes(instruction.keyframes), instruction.duration,
-        instruction.delay, instruction.easing, previousPlayers);
-  }
-
-  private _normalizeKeyframes(keyframes: ɵStyleData[]): ɵStyleData[] {
-    const errors: string[] = [];
-    const normalizedKeyframes: ɵStyleData[] = [];
-    keyframes.forEach(kf => {
-      const normalizedKeyframe: ɵStyleData = {};
-      Object.keys(kf).forEach(prop => {
-        let normalizedProp = prop;
-        let normalizedValue = kf[prop];
-        if (prop != 'offset') {
-          normalizedProp = this._normalizer.normalizePropertyName(prop, errors);
-          normalizedValue =
-              this._normalizer.normalizeStyleValue(prop, normalizedProp, kf[prop], errors);
-        }
-        normalizedKeyframe[normalizedProp] = normalizedValue;
-      });
-      normalizedKeyframes.push(normalizedKeyframe);
-    });
-    if (errors.length) {
-      const LINE_START = '\n - ';
-      throw new Error(
-          `Unable to animate due to the following errors:${LINE_START}${errors.join(LINE_START)}`);
-    }
-    return normalizedKeyframes;
-  }
-
-  private _markPlayerAsActive(element: any, player: AnimationPlayer) {
-    const elementAnimations = getOrSetAsInMap(this._activeElementAnimations, element, []);
-    elementAnimations.push(player);
-  }
-
-  private _queuePlayer(
-      element: any, triggerName: string, player: AnimationPlayer, event: AnimationEvent) {
-    const tuple = <QueuedAnimationTransitionTuple>{element, player, triggerName, event};
-    this._queuedTransitionAnimations.push(tuple);
-    player.init();
-
-    element.classList.add(MARKED_FOR_ANIMATION_CLASSNAME);
-    player.onDone(() => { element.classList.remove(MARKED_FOR_ANIMATION_CLASSNAME); });
-  }
-
-  private _flushQueuedAnimations() {
-    parentLoop: while (this._queuedTransitionAnimations.length) {
-      const {player, element, triggerName, event} = this._queuedTransitionAnimations.shift() !;
-
-      let parent = element;
-      while (parent = parent.parentNode) {
-        // this means that a parent element will or will not
-        // have its own animation operation which in this case
-        // there's no point in even trying to do an animation
-        if (parent[MARKED_FOR_REMOVAL]) continue parentLoop;
-      }
-
-      const listeners = this._triggerListeners.get(element);
-      if (listeners) {
-        listeners.forEach(tuple => {
-          if (tuple.triggerName == triggerName) {
-            listenOnPlayer(player, tuple.phase, event, tuple.callback);
-          }
-        });
-      }
-
-      // if a removal exists for the given element then we need cancel
-      // all the queued players so that a proper removal animation can go
-      if (this._queuedRemovals.has(element)) {
-        player.destroy();
-        continue;
-      }
-
-      this._markPlayerAsActive(element, player);
-
-      // in the event that an animation throws an error then we do
-      // not want to re-run animations on any previous animations
-      // if they have already been kicked off beforehand
-      player.init();
-      if (!player.hasStarted()) {
-        player.play();
-      }
-    }
-  }
-
-  flush() {
-    const leaveListeners = new Map<any, TriggerListenerTuple[]>();
-    this._queuedRemovals.forEach((callback, element) => {
-      const tuple = this._pendingListenerRemovals.get(element);
-      if (tuple) {
-        leaveListeners.set(element, tuple);
-        this._pendingListenerRemovals.delete(element);
-      }
-    });
-
-    this._clearPendingListenerRemovals();
-    this._pendingListenerRemovals = leaveListeners;
-
-    this._flushQueuedAnimations();
-
-    let flushAgain = false;
-    this._queuedRemovals.forEach((callback, element) => {
-      // an item that was inserted/removed in the same flush means
-      // that an animation should not happen anyway
-      if (this._flaggedInserts.has(element)) return;
-
-      let parent = element;
-      let players: AnimationPlayer[] = [];
-      while (parent = parent.parentNode) {
-        // there is no reason to even try to
-        if (parent[MARKED_FOR_REMOVAL]) {
-          callback();
-          return;
-        }
-
-        const match = this._activeElementAnimations.get(parent);
-        if (match) {
-          players.push(...match);
-          break;
-        }
-      }
-
-      // the loop was unable to find an parent that is animating even
-      // though this element has set to be removed, so the algorithm
-      // should check to see if there are any triggers on the element
-      // that are present to handle a leave animation and then setup
-      // those players to facilitate the callback after done
-      if (players.length == 0) {
-        // this means that the element has valid state triggers
-        const stateDetails = this._elementTriggerStates.get(element);
-        if (stateDetails) {
-          Object.keys(stateDetails).forEach(triggerName => {
-            flushAgain = true;
-            const oldValue = stateDetails[triggerName];
-            const instruction = this._triggers[triggerName].matchTransition(oldValue, VOID_STATE);
-            if (instruction) {
-              players.push(this.animateTransition(element, instruction));
-            } else {
-              const event = makeAnimationEvent(element, triggerName, oldValue, VOID_STATE, '', 0);
-              const player = new NoopAnimationPlayer();
-              this._queuePlayer(element, triggerName, player, event);
-            }
-          });
-        }
-      }
-
-      if (players.length) {
-        optimizeGroupPlayer(players).onDone(callback);
-      } else {
-        callback();
-      }
-    });
-
-    this._queuedRemovals.clear();
-    this._flaggedInserts.clear();
-
-    // this means that one or more leave animations were detected
-    if (flushAgain) {
-      this._flushQueuedAnimations();
-      this._clearPendingListenerRemovals();
-    }
-  }
-}
-
-function getOrSetAsInMap(map: Map<any, any>, key: any, defaultValue: any) {
-  let value = map.get(key);
-  if (!value) {
-    map.set(key, value = defaultValue);
-  }
-  return value;
-}
-
-function deleteFromArrayMap(map: Map<any, any[]>, key: any, value: any) {
-  let arr = map.get(key);
-  if (arr) {
-    const index = arr.indexOf(value);
-    if (index >= 0) {
-      arr.splice(index, 1);
-      if (arr.length == 0) {
-        map.delete(key);
-      }
-    }
-  }
-}
-
-function optimizeGroupPlayer(players: AnimationPlayer[]): AnimationPlayer {
-  switch (players.length) {
-    case 0:
-      return new NoopAnimationPlayer();
-    case 1:
-      return players[0];
-    default:
-      return new ɵAnimationGroupPlayer(players);
-  }
-}
-
-function copyArray(source: any[]): any[] {
-  return source ? source.splice(0) : [];
-}
-
-function validatePlayerEvent(triggerName: string, eventName: string) {
-  switch (eventName) {
-    case 'start':
-    case 'done':
-      return;
-    default:
-      throw new Error(
-          `The provided animation trigger event "${eventName}" for the animation trigger "${triggerName}" is not supported!`);
-  }
-}
-
-function listenOnPlayer(
-    player: AnimationPlayer, eventName: string, baseEvent: AnimationEvent,
-    callback: (event: any) => any) {
-  switch (eventName) {
-    case 'start':
-      player.onStart(() => {
-        const event = copyAnimationEvent(baseEvent);
-        event.phaseName = 'start';
-        callback(event);
-      });
-      break;
-    case 'done':
-      player.onDone(() => {
-        const event = copyAnimationEvent(baseEvent);
-        event.phaseName = 'done';
-        callback(event);
-      });
-      break;
-  }
-}
-
-function copyAnimationEvent(e: AnimationEvent): AnimationEvent {
-  return makeAnimationEvent(
-      e.element, e.triggerName, e.fromState, e.toState, e.phaseName, e.totalTime);
-}
-
-function makeAnimationEvent(
-    element: any, triggerName: string, fromState: string, toState: string, phaseName: string | null,
-    totalTime: number): AnimationEvent {
-  return <AnimationEvent>{element, triggerName, fromState, toState, phaseName, totalTime};
-}
-
-function normalizeTriggerValue(value: any): string {
-  switch (typeof value) {
-    case 'boolean':
-      return value ? '1' : '0';
-    default:
-      return value ? value.toString() : null;
-  }
-}
diff --git a/packages/animations/browser/src/render/noop_animation_engine.ts b/packages/animations/browser/src/render/noop_animation_engine.ts
deleted file mode 100644
index 342e7c7efb..0000000000
--- a/packages/animations/browser/src/render/noop_animation_engine.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-import {AnimationEvent, AnimationMetadataType, AnimationPlayer, AnimationStateMetadata, AnimationTriggerMetadata, ɵStyleData} from '@angular/animations';
-
-import {AnimationEngine} from '../animation_engine';
-import {copyStyles, eraseStyles, normalizeStyles, setStyles} from '../util';
-
-interface ListenerTuple {
-  eventPhase: string;
-  triggerName: string;
-  callback: (event: any) => any;
-  doRemove?: boolean;
-}
-
-interface ChangeTuple {
-  element: any;
-  triggerName: string;
-  oldValue: string;
-  newValue: string;
-}
-
-const DEFAULT_STATE_VALUE = 'void';
-const DEFAULT_STATE_STYLES = '*';
-
-export class NoopAnimationEngine extends AnimationEngine {
-  private _listeners = new Map<any, ListenerTuple[]>();
-  private _changes: ChangeTuple[] = [];
-  private _flaggedRemovals = new Set<any>();
-  private _onDoneFns: (() => any)[] = [];
-  private _triggerStyles: {[triggerName: string]: {[stateName: string]: ɵStyleData}} =
-      Object.create(null);
-
-  registerTrigger(trigger: AnimationTriggerMetadata, name?: string): void {
-    name = name || trigger.name;
-    if (this._triggerStyles[name]) {
-      return;
-    }
-    const stateMap: {[stateName: string]: ɵStyleData} = {};
-    trigger.definitions.forEach(def => {
-      if (def.type === AnimationMetadataType.State) {
-        const stateDef = def as AnimationStateMetadata;
-        stateMap[stateDef.name] = normalizeStyles(stateDef.styles.styles);
-      }
-    });
-    this._triggerStyles[name] = stateMap;
-  }
-
-  onInsert(element: any, domFn: () => any): void { domFn(); }
-
-  onRemove(element: any, domFn: () => any): void {
-    domFn();
-    if (element['nodeType'] == 1) {
-      this._flaggedRemovals.add(element);
-    }
-  }
-
-  setProperty(element: any, property: string, value: any): void {
-    const storageProp = makeStorageProp(property);
-    const oldValue = element[storageProp] || DEFAULT_STATE_VALUE;
-    this._changes.push(<ChangeTuple>{element, oldValue, newValue: value, triggerName: property});
-
-    const triggerStateStyles = this._triggerStyles[property] || {};
-    const fromStateStyles =
-        triggerStateStyles[oldValue] || triggerStateStyles[DEFAULT_STATE_STYLES];
-    if (fromStateStyles) {
-      eraseStyles(element, fromStateStyles);
-    }
-
-    element[storageProp] = value;
-    this._onDoneFns.push(() => {
-      const toStateStyles = triggerStateStyles[value] || triggerStateStyles[DEFAULT_STATE_STYLES];
-      if (toStateStyles) {
-        setStyles(element, toStateStyles);
-      }
-    });
-  }
-
-  listen(element: any, eventName: string, eventPhase: string, callback: (event: any) => any):
-      () => any {
-    let listeners = this._listeners.get(element);
-    if (!listeners) {
-      this._listeners.set(element, listeners = []);
-    }
-
-    const tuple = <ListenerTuple>{triggerName: eventName, eventPhase, callback};
-    listeners.push(tuple);
-
-    return () => tuple.doRemove = true;
-  }
-
-  flush(): void {
-    const onStartCallbacks: (() => any)[] = [];
-    const onDoneCallbacks: (() => any)[] = [];
-
-    function handleListener(listener: ListenerTuple, data: ChangeTuple) {
-      const phase = listener.eventPhase;
-      const event = makeAnimationEvent(
-          data.element, data.triggerName, data.oldValue, data.newValue, phase, 0);
-      if (phase == 'start') {
-        onStartCallbacks.push(() => listener.callback(event));
-      } else if (phase == 'done') {
-        onDoneCallbacks.push(() => listener.callback(event));
-      }
-    }
-
-    this._changes.forEach(change => {
-      const element = change.element;
-      const listeners = this._listeners.get(element);
-      if (listeners) {
-        listeners.forEach(listener => {
-          if (listener.triggerName == change.triggerName) {
-            handleListener(listener, change);
-          }
-        });
-      }
-    });
-
-    // upon removal ALL the animation triggers need to get fired
-    this._flaggedRemovals.forEach(element => {
-      const listeners = this._listeners.get(element);
-      if (listeners) {
-        listeners.forEach(listener => {
-          const triggerName = listener.triggerName;
-          const storageProp = makeStorageProp(triggerName);
-          handleListener(listener, <ChangeTuple>{
-            element: element,
-            triggerName: triggerName,
-            oldValue: element[storageProp] || DEFAULT_STATE_VALUE,
-            newValue: DEFAULT_STATE_VALUE
-          });
-        });
-      }
-    });
-
-    // remove all the listeners after everything is complete
-    Array.from(this._listeners.keys()).forEach(element => {
-      const listenersToKeep = this._listeners.get(element) !.filter(l => !l.doRemove);
-      if (listenersToKeep.length) {
-        this._listeners.set(element, listenersToKeep);
-      } else {
-        this._listeners.delete(element);
-      }
-    });
-
-    onStartCallbacks.forEach(fn => fn());
-    onDoneCallbacks.forEach(fn => fn());
-    this._flaggedRemovals.clear();
-    this._changes = [];
-
-    this._onDoneFns.forEach(doneFn => doneFn());
-    this._onDoneFns = [];
-  }
-
-  get activePlayers(): AnimationPlayer[] { return []; }
-  get queuedPlayers(): AnimationPlayer[] { return []; }
-}
-
-function makeAnimationEvent(
-    element: any, triggerName: string, fromState: string, toState: string, phaseName: string,
-    totalTime: number): AnimationEvent {
-  return <AnimationEvent>{element, triggerName, fromState, toState, phaseName, totalTime};
-}
-
-function makeStorageProp(property: string): string {
-  return '_@_' + property;
-}
diff --git a/packages/animations/browser/src/render/shared.ts b/packages/animations/browser/src/render/shared.ts
new file mode 100644
index 0000000000..e10cf6563a
--- /dev/null
+++ b/packages/animations/browser/src/render/shared.ts
@@ -0,0 +1,171 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AUTO_STYLE, AnimationEvent, AnimationPlayer, NoopAnimationPlayer, ɵAnimationGroupPlayer, ɵPRE_STYLE as PRE_STYLE, ɵStyleData} from '@angular/animations';
+
+import {AnimationStyleNormalizer} from '../../src/dsl/style_normalization/animation_style_normalizer';
+import {AnimationDriver} from '../../src/render/animation_driver';
+
+export function optimizeGroupPlayer(players: AnimationPlayer[]): AnimationPlayer {
+  switch (players.length) {
+    case 0:
+      return new NoopAnimationPlayer();
+    case 1:
+      return players[0];
+    default:
+      return new ɵAnimationGroupPlayer(players);
+  }
+}
+
+export function normalizeKeyframes(
+    driver: AnimationDriver, normalizer: AnimationStyleNormalizer, element: any,
+    keyframes: ɵStyleData[], preStyles: ɵStyleData = {},
+    postStyles: ɵStyleData = {}): ɵStyleData[] {
+  const errors: string[] = [];
+  const normalizedKeyframes: ɵStyleData[] = [];
+  let previousOffset = -1;
+  let previousKeyframe: ɵStyleData|null = null;
+  keyframes.forEach(kf => {
+    const offset = kf['offset'] as number;
+    const isSameOffset = offset == previousOffset;
+    const normalizedKeyframe: ɵStyleData = (isSameOffset && previousKeyframe) || {};
+    Object.keys(kf).forEach(prop => {
+      let normalizedProp = prop;
+      let normalizedValue = kf[prop];
+      if (prop !== 'offset') {
+        normalizedProp = normalizer.normalizePropertyName(normalizedProp, errors);
+        switch (normalizedValue) {
+          case PRE_STYLE:
+            normalizedValue = preStyles[prop];
+            break;
+
+          case AUTO_STYLE:
+            normalizedValue = postStyles[prop];
+            break;
+
+          default:
+            normalizedValue =
+                normalizer.normalizeStyleValue(prop, normalizedProp, normalizedValue, errors);
+            break;
+        }
+      }
+      normalizedKeyframe[normalizedProp] = normalizedValue;
+    });
+    if (!isSameOffset) {
+      normalizedKeyframes.push(normalizedKeyframe);
+    }
+    previousKeyframe = normalizedKeyframe;
+    previousOffset = offset;
+  });
+  if (errors.length) {
+    const LINE_START = '\n - ';
+    throw new Error(
+        `Unable to animate due to the following errors:${LINE_START}${errors.join(LINE_START)}`);
+  }
+
+  return normalizedKeyframes;
+}
+
+export function listenOnPlayer(
+    player: AnimationPlayer, eventName: string, event: AnimationEvent | undefined,
+    callback: (event: any) => any) {
+  switch (eventName) {
+    case 'start':
+      player.onStart(() => callback(event && copyAnimationEvent(event, 'start', player.totalTime)));
+      break;
+    case 'done':
+      player.onDone(() => callback(event && copyAnimationEvent(event, 'done', player.totalTime)));
+      break;
+    case 'destroy':
+      player.onDestroy(
+          () => callback(event && copyAnimationEvent(event, 'destroy', player.totalTime)));
+      break;
+  }
+}
+
+export function copyAnimationEvent(
+    e: AnimationEvent, phaseName?: string, totalTime?: number): AnimationEvent {
+  const event = makeAnimationEvent(
+      e.element, e.triggerName, e.fromState, e.toState, phaseName || e.phaseName,
+      totalTime == undefined ? e.totalTime : totalTime);
+  const data = (e as any)['_data'];
+  if (data != null) {
+    (event as any)['_data'] = data;
+  }
+  return event;
+}
+
+export function makeAnimationEvent(
+    element: any, triggerName: string, fromState: string, toState: string, phaseName: string = '',
+    totalTime: number = 0): AnimationEvent {
+  return {element, triggerName, fromState, toState, phaseName, totalTime};
+}
+
+export function getOrSetAsInMap(
+    map: Map<any, any>| {[key: string]: any}, key: any, defaultValue: any) {
+  let value: any;
+  if (map instanceof Map) {
+    value = map.get(key);
+    if (!value) {
+      map.set(key, value = defaultValue);
+    }
+  } else {
+    value = map[key];
+    if (!value) {
+      value = map[key] = defaultValue;
+    }
+  }
+  return value;
+}
+
+export function parseTimelineCommand(command: string): [string, string] {
+  const separatorPos = command.indexOf(':');
+  const id = command.substring(1, separatorPos);
+  const action = command.substr(separatorPos + 1);
+  return [id, action];
+}
+
+let _contains: (elm1: any, elm2: any) => boolean = (elm1: any, elm2: any) => false;
+let _matches: (element: any, selector: string) => boolean = (element: any, selector: string) =>
+    false;
+let _query: (element: any, selector: string, multi: boolean) => any[] =
+    (element: any, selector: string, multi: boolean) => {
+      return [];
+    };
+
+if (typeof Element != 'undefined') {
+  // this is well supported in all browsers
+  _contains = (elm1: any, elm2: any) => { return elm1.contains(elm2) as boolean; };
+
+  if (Element.prototype.matches) {
+    _matches = (element: any, selector: string) => element.matches(selector);
+  } else {
+    const proto = Element.prototype as any;
+    const fn = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector ||
+        proto.oMatchesSelector || proto.webkitMatchesSelector;
+    if (fn) {
+      _matches = (element: any, selector: string) => fn.apply(element, [selector]);
+    }
+  }
+
+  _query = (element: any, selector: string, multi: boolean): any[] => {
+    let results: any[] = [];
+    if (multi) {
+      results.push(...element.querySelectorAll(selector));
+    } else {
+      const elm = element.querySelector(selector);
+      if (elm) {
+        results.push(elm);
+      }
+    }
+    return results;
+  };
+}
+
+export const matchesElement = _matches;
+export const containsElement = _contains;
+export const invokeQuery = _query;
diff --git a/packages/animations/browser/src/render/timeline_animation_engine.ts b/packages/animations/browser/src/render/timeline_animation_engine.ts
new file mode 100644
index 0000000000..db07331d27
--- /dev/null
+++ b/packages/animations/browser/src/render/timeline_animation_engine.ts
@@ -0,0 +1,156 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AUTO_STYLE, AnimationMetadata, AnimationOptions, AnimationPlayer, ɵStyleData} from '@angular/animations';
+
+import {Ast} from '../dsl/animation_ast';
+import {buildAnimationAst} from '../dsl/animation_ast_builder';
+import {buildAnimationTimelines} from '../dsl/animation_timeline_builder';
+import {AnimationTimelineInstruction} from '../dsl/animation_timeline_instruction';
+import {ElementInstructionMap} from '../dsl/element_instruction_map';
+import {AnimationStyleNormalizer} from '../dsl/style_normalization/animation_style_normalizer';
+
+import {AnimationDriver} from './animation_driver';
+import {getOrSetAsInMap, listenOnPlayer, makeAnimationEvent, normalizeKeyframes, optimizeGroupPlayer} from './shared';
+
+const EMPTY_INSTRUCTION_MAP = new ElementInstructionMap();
+
+export class TimelineAnimationEngine {
+  private _animations: {[id: string]: Ast} = {};
+  private _playersById: {[id: string]: AnimationPlayer} = {};
+  public players: AnimationPlayer[] = [];
+
+  constructor(private _driver: AnimationDriver, private _normalizer: AnimationStyleNormalizer) {}
+
+  register(id: string, metadata: AnimationMetadata|AnimationMetadata[]) {
+    const errors: any[] = [];
+    const ast = buildAnimationAst(metadata, errors);
+    if (errors.length) {
+      throw new Error(
+          `Unable to build the animation due to the following errors: ${errors.join("\n")}`);
+    } else {
+      this._animations[id] = ast;
+    }
+  }
+
+  private _buildPlayer(
+      i: AnimationTimelineInstruction, preStyles: ɵStyleData,
+      postStyles?: ɵStyleData): AnimationPlayer {
+    const element = i.element;
+    const keyframes = normalizeKeyframes(
+        this._driver, this._normalizer, element, i.keyframes, preStyles, postStyles);
+    return this._driver.animate(element, keyframes, i.duration, i.delay, i.easing, []);
+  }
+
+  create(id: string, element: any, options: AnimationOptions = {}): AnimationPlayer {
+    const errors: any[] = [];
+    const ast = this._animations[id];
+    let instructions: AnimationTimelineInstruction[];
+
+    const autoStylesMap = new Map<any, ɵStyleData>();
+
+    if (ast) {
+      instructions = buildAnimationTimelines(
+          this._driver, element, ast, {}, {}, options, EMPTY_INSTRUCTION_MAP, errors);
+      instructions.forEach(inst => {
+        const styles = getOrSetAsInMap(autoStylesMap, inst.element, {});
+        inst.postStyleProps.forEach(prop => styles[prop] = null);
+      });
+    } else {
+      errors.push('The requested animation doesn\'t exist or has already been destroyed');
+      instructions = [];
+    }
+
+    if (errors.length) {
+      throw new Error(
+          `Unable to create the animation due to the following errors: ${errors.join("\n")}`);
+    }
+
+    autoStylesMap.forEach((styles, element) => {
+      Object.keys(styles).forEach(
+          prop => { styles[prop] = this._driver.computeStyle(element, prop, AUTO_STYLE); });
+    });
+
+    const players = instructions.map(i => {
+      const styles = autoStylesMap.get(i.element);
+      return this._buildPlayer(i, {}, styles);
+    });
+    const player = optimizeGroupPlayer(players);
+    this._playersById[id] = player;
+    player.onDestroy(() => this.destroy(id));
+
+    this.players.push(player);
+    return player;
+  }
+
+  destroy(id: string) {
+    const player = this._getPlayer(id);
+    player.destroy();
+    delete this._playersById[id];
+    const index = this.players.indexOf(player);
+    if (index >= 0) {
+      this.players.splice(index, 1);
+    }
+  }
+
+  private _getPlayer(id: string): AnimationPlayer {
+    const player = this._playersById[id];
+    if (!player) {
+      throw new Error(`Unable to find the timeline player referenced by ${id}`);
+    }
+    return player;
+  }
+
+  listen(id: string, element: string, eventName: string, callback: (event: any) => any):
+      () => void {
+    // triggerName, fromState, toState are all ignored for timeline animations
+    const baseEvent = makeAnimationEvent(element, '', '', '');
+    listenOnPlayer(this._getPlayer(id), eventName, baseEvent, callback);
+    return () => {};
+  }
+
+  command(id: string, element: any, command: string, args: any[]): void {
+    if (command == 'register') {
+      this.register(id, args[0] as AnimationMetadata | AnimationMetadata[]);
+      return;
+    }
+
+    if (command == 'create') {
+      const options = (args[0] || {}) as AnimationOptions;
+      this.create(id, element, options);
+      return;
+    }
+
+    const player = this._getPlayer(id);
+    switch (command) {
+      case 'play':
+        player.play();
+        break;
+      case 'pause':
+        player.pause();
+        break;
+      case 'reset':
+        player.reset();
+        break;
+      case 'restart':
+        player.restart();
+        break;
+      case 'finish':
+        player.finish();
+        break;
+      case 'init':
+        player.init();
+        break;
+      case 'setPosition':
+        player.setPosition(parseFloat(args[0] as string));
+        break;
+      case 'destroy':
+        this.destroy(id);
+        break;
+    }
+  }
+}
diff --git a/packages/animations/browser/src/render/transition_animation_engine.ts b/packages/animations/browser/src/render/transition_animation_engine.ts
new file mode 100644
index 0000000000..1f41927a84
--- /dev/null
+++ b/packages/animations/browser/src/render/transition_animation_engine.ts
@@ -0,0 +1,1483 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AUTO_STYLE, AnimationOptions, AnimationPlayer, NoopAnimationPlayer, ɵAnimationGroupPlayer as AnimationGroupPlayer, ɵPRE_STYLE as PRE_STYLE, ɵStyleData} from '@angular/animations';
+
+import {AnimationTimelineInstruction} from '../dsl/animation_timeline_instruction';
+import {AnimationTransitionFactory} from '../dsl/animation_transition_factory';
+import {AnimationTransitionInstruction} from '../dsl/animation_transition_instruction';
+import {AnimationTrigger} from '../dsl/animation_trigger';
+import {ElementInstructionMap} from '../dsl/element_instruction_map';
+import {AnimationStyleNormalizer} from '../dsl/style_normalization/animation_style_normalizer';
+import {ENTER_CLASSNAME, LEAVE_CLASSNAME, NG_ANIMATING_CLASSNAME, NG_ANIMATING_SELECTOR, NG_TRIGGER_CLASSNAME, NG_TRIGGER_SELECTOR, copyObj, eraseStyles, setStyles} from '../util';
+
+import {AnimationDriver} from './animation_driver';
+import {getOrSetAsInMap, listenOnPlayer, makeAnimationEvent, normalizeKeyframes, optimizeGroupPlayer} from './shared';
+
+const QUEUED_CLASSNAME = 'ng-animate-queued';
+const QUEUED_SELECTOR = '.ng-animate-queued';
+const DISABLED_CLASSNAME = 'ng-animate-disabled';
+const DISABLED_SELECTOR = '.ng-animate-disabled';
+
+const EMPTY_PLAYER_ARRAY: TransitionAnimationPlayer[] = [];
+const NULL_REMOVAL_STATE: ElementAnimationState = {
+  namespaceId: '',
+  setForRemoval: null,
+  hasAnimation: false,
+  removedBeforeQueried: false
+};
+const NULL_REMOVED_QUERIED_STATE: ElementAnimationState = {
+  namespaceId: '',
+  setForRemoval: null,
+  hasAnimation: false,
+  removedBeforeQueried: true
+};
+
+interface TriggerListener {
+  name: string;
+  phase: string;
+  callback: (event: any) => any;
+}
+
+export interface QueueInstruction {
+  element: any;
+  triggerName: string;
+  fromState: StateValue;
+  toState: StateValue;
+  transition: AnimationTransitionFactory;
+  player: TransitionAnimationPlayer;
+  isFallbackTransition: boolean;
+}
+
+export const REMOVAL_FLAG = '__ng_removed';
+
+export interface ElementAnimationState {
+  setForRemoval: any;
+  hasAnimation: boolean;
+  namespaceId: string;
+  removedBeforeQueried: boolean;
+}
+
+export class StateValue {
+  public value: string;
+  public options: AnimationOptions;
+
+  constructor(input: any) {
+    const isObj = input && input.hasOwnProperty('value');
+    const value = isObj ? input['value'] : input;
+    this.value = normalizeTriggerValue(value);
+    if (isObj) {
+      const options = copyObj(input as any);
+      delete options['value'];
+      this.options = options as AnimationOptions;
+    } else {
+      this.options = {};
+    }
+    if (!this.options.params) {
+      this.options.params = {};
+    }
+  }
+
+  absorbOptions(options: AnimationOptions) {
+    const newParams = options.params;
+    if (newParams) {
+      const oldParams = this.options.params !;
+      Object.keys(newParams).forEach(prop => {
+        if (oldParams[prop] == null) {
+          oldParams[prop] = newParams[prop];
+        }
+      });
+    }
+  }
+}
+
+export const VOID_VALUE = 'void';
+export const DEFAULT_STATE_VALUE = new StateValue(VOID_VALUE);
+export const DELETED_STATE_VALUE = new StateValue('DELETED');
+
+export class AnimationTransitionNamespace {
+  public players: TransitionAnimationPlayer[] = [];
+
+  private _triggers: {[triggerName: string]: AnimationTrigger} = {};
+  private _queue: QueueInstruction[] = [];
+
+  private _elementListeners = new Map<any, TriggerListener[]>();
+
+  private _hostClassName: string;
+
+  constructor(
+      public id: string, public hostElement: any, private _engine: TransitionAnimationEngine) {
+    this._hostClassName = 'ng-tns-' + id;
+    addClass(hostElement, this._hostClassName);
+  }
+
+  listen(element: any, name: string, phase: string, callback: (event: any) => boolean): () => any {
+    if (!this._triggers.hasOwnProperty(name)) {
+      throw new Error(
+          `Unable to listen on the animation trigger event "${phase}" because the animation trigger "${name}" doesn\'t exist!`);
+    }
+
+    if (phase == null || phase.length == 0) {
+      throw new Error(
+          `Unable to listen on the animation trigger "${name}" because the provided event is undefined!`);
+    }
+
+    if (!isTriggerEventValid(phase)) {
+      throw new Error(
+          `The provided animation trigger event "${phase}" for the animation trigger "${name}" is not supported!`);
+    }
+
+    const listeners = getOrSetAsInMap(this._elementListeners, element, []);
+    const data = {name, phase, callback};
+    listeners.push(data);
+
+    const triggersWithStates = getOrSetAsInMap(this._engine.statesByElement, element, {});
+    if (!triggersWithStates.hasOwnProperty(name)) {
+      addClass(element, NG_TRIGGER_CLASSNAME);
+      addClass(element, NG_TRIGGER_CLASSNAME + '-' + name);
+      triggersWithStates[name] = null;
+    }
+
+    return () => {
+      // the event listener is removed AFTER the flush has occurred such
+      // that leave animations callbacks can fire (otherwise if the node
+      // is removed in between then the listeners would be deregistered)
+      this._engine.afterFlush(() => {
+        const index = listeners.indexOf(data);
+        if (index >= 0) {
+          listeners.splice(index, 1);
+        }
+
+        if (!this._triggers[name]) {
+          delete triggersWithStates[name];
+        }
+      });
+    };
+  }
+
+  register(name: string, ast: AnimationTrigger): boolean {
+    if (this._triggers[name]) {
+      // throw
+      return false;
+    } else {
+      this._triggers[name] = ast;
+      return true;
+    }
+  }
+
+  private _getTrigger(name: string) {
+    const trigger = this._triggers[name];
+    if (!trigger) {
+      throw new Error(`The provided animation trigger "${name}" has not been registered!`);
+    }
+    return trigger;
+  }
+
+  trigger(element: any, triggerName: string, value: any, defaultToFallback: boolean = true):
+      TransitionAnimationPlayer|undefined {
+    const trigger = this._getTrigger(triggerName);
+    const player = new TransitionAnimationPlayer(this.id, triggerName, element);
+
+    let triggersWithStates = this._engine.statesByElement.get(element);
+    if (!triggersWithStates) {
+      addClass(element, NG_TRIGGER_CLASSNAME);
+      addClass(element, NG_TRIGGER_CLASSNAME + '-' + triggerName);
+      this._engine.statesByElement.set(element, triggersWithStates = {});
+    }
+
+    let fromState = triggersWithStates[triggerName];
+    const toState = new StateValue(value);
+
+    const isObj = value && value.hasOwnProperty('value');
+    if (!isObj && fromState) {
+      toState.absorbOptions(fromState.options);
+    }
+
+    triggersWithStates[triggerName] = toState;
+
+    if (!fromState) {
+      fromState = DEFAULT_STATE_VALUE;
+    } else if (fromState === DELETED_STATE_VALUE) {
+      return player;
+    }
+
+    const isRemoval = toState.value === VOID_VALUE;
+
+    // normally this isn't reached by here, however, if an object expression
+    // is passed in then it may be a new object each time. Comparing the value
+    // is important since that will stay the same despite there being a new object.
+    // The removal arc here is special cased because the same element is triggered
+    // twice in the event that it contains animations on the outer/inner portions
+    // of the host container
+    if (!isRemoval && fromState.value === toState.value) return;
+
+    const playersOnElement: TransitionAnimationPlayer[] =
+        getOrSetAsInMap(this._engine.playersByElement, element, []);
+    playersOnElement.forEach(player => {
+      // only remove the player if it is queued on the EXACT same trigger/namespace
+      // we only also deal with queued players here because if the animation has
+      // started then we want to keep the player alive until the flush happens
+      // (which is where the previousPlayers are passed into the new palyer)
+      if (player.namespaceId == this.id && player.triggerName == triggerName && player.queued) {
+        player.destroy();
+      }
+    });
+
+    let transition = trigger.matchTransition(fromState.value, toState.value);
+    let isFallbackTransition = false;
+    if (!transition) {
+      if (!defaultToFallback) return;
+      transition = trigger.fallbackTransition;
+      isFallbackTransition = true;
+    }
+
+    this._engine.totalQueuedPlayers++;
+    this._queue.push(
+        {element, triggerName, transition, fromState, toState, player, isFallbackTransition});
+
+    if (!isFallbackTransition) {
+      addClass(element, QUEUED_CLASSNAME);
+      player.onStart(() => { removeClass(element, QUEUED_CLASSNAME); });
+    }
+
+    player.onDone(() => {
+      let index = this.players.indexOf(player);
+      if (index >= 0) {
+        this.players.splice(index, 1);
+      }
+
+      const players = this._engine.playersByElement.get(element);
+      if (players) {
+        let index = players.indexOf(player);
+        if (index >= 0) {
+          players.splice(index, 1);
+        }
+      }
+    });
+
+    this.players.push(player);
+    playersOnElement.push(player);
+
+    return player;
+  }
+
+  deregister(name: string) {
+    delete this._triggers[name];
+
+    this._engine.statesByElement.forEach((stateMap, element) => { delete stateMap[name]; });
+
+    this._elementListeners.forEach((listeners, element) => {
+      this._elementListeners.set(
+          element, listeners.filter(entry => { return entry.name != name; }));
+    });
+  }
+
+  clearElementCache(element: any) {
+    this._engine.statesByElement.delete(element);
+    this._elementListeners.delete(element);
+    const elementPlayers = this._engine.playersByElement.get(element);
+    if (elementPlayers) {
+      elementPlayers.forEach(player => player.destroy());
+      this._engine.playersByElement.delete(element);
+    }
+  }
+
+  private _destroyInnerNodes(rootElement: any, context: any, animate: boolean = false) {
+    this._engine.driver.query(rootElement, NG_TRIGGER_SELECTOR, true).forEach(elm => {
+      if (animate && containsClass(elm, this._hostClassName)) {
+        const innerNs = this._engine.namespacesByHostElement.get(elm);
+
+        // special case for a host element with animations on the same element
+        if (innerNs) {
+          innerNs.removeNode(elm, context, true);
+        }
+
+        this.removeNode(elm, context, true);
+      } else {
+        this.clearElementCache(elm);
+      }
+    });
+  }
+
+  removeNode(element: any, context: any, doNotRecurse?: boolean): void {
+    const engine = this._engine;
+
+    if (!doNotRecurse && element.childElementCount) {
+      this._destroyInnerNodes(element, context, true);
+    }
+
+    const triggerStates = engine.statesByElement.get(element);
+    if (triggerStates) {
+      const players: TransitionAnimationPlayer[] = [];
+      Object.keys(triggerStates).forEach(triggerName => {
+        // this check is here in the event that an element is removed
+        // twice (both on the host level and the component level)
+        if (this._triggers[triggerName]) {
+          const player = this.trigger(element, triggerName, VOID_VALUE, false);
+          if (player) {
+            players.push(player);
+          }
+        }
+      });
+
+      if (players.length) {
+        engine.markElementAsRemoved(this.id, element, true, context);
+        optimizeGroupPlayer(players).onDone(() => engine.processLeaveNode(element));
+        return;
+      }
+    }
+
+    // find the player that is animating and make sure that the
+    // removal is delayed until that player has completed
+    let containsPotentialParentTransition = false;
+    if (engine.totalAnimations) {
+      const currentPlayers =
+          engine.players.length ? engine.playersByQueriedElement.get(element) : [];
+
+      // when this `if statement` does not continue forward it means that
+      // a previous animation query has selected the current element and
+      // is animating it. In this situation want to continue fowards and
+      // allow the element to be queued up for animation later.
+      if (currentPlayers && currentPlayers.length) {
+        containsPotentialParentTransition = true;
+      } else {
+        let parent = element;
+        while (parent = parent.parentNode) {
+          const triggers = engine.statesByElement.get(parent);
+          if (triggers) {
+            containsPotentialParentTransition = true;
+            break;
+          }
+        }
+      }
+    }
+
+    // at this stage we know that the element will either get removed
+    // during flush or will be picked up by a parent query. Either way
+    // we need to fire the listeners for this element when it DOES get
+    // removed (once the query parent animation is done or after flush)
+    const listeners = this._elementListeners.get(element);
+    if (listeners) {
+      const visitedTriggers = new Set<string>();
+      listeners.forEach(listener => {
+        const triggerName = listener.name;
+        if (visitedTriggers.has(triggerName)) return;
+        visitedTriggers.add(triggerName);
+
+        const trigger = this._triggers[triggerName];
+        const transition = trigger.fallbackTransition;
+        const elementStates = engine.statesByElement.get(element) !;
+        const fromState = elementStates[triggerName] || DEFAULT_STATE_VALUE;
+        const toState = new StateValue(VOID_VALUE);
+        const player = new TransitionAnimationPlayer(this.id, triggerName, element);
+
+        this._engine.totalQueuedPlayers++;
+        this._queue.push({
+          element,
+          triggerName,
+          transition,
+          fromState,
+          toState,
+          player,
+          isFallbackTransition: true
+        });
+      });
+    }
+
+    // whether or not a parent has an animation we need to delay the deferral of the leave
+    // operation until we have more information (which we do after flush() has been called)
+    if (containsPotentialParentTransition) {
+      engine.markElementAsRemoved(this.id, element, false, context);
+    } else {
+      // we do this after the flush has occurred such
+      // that the callbacks can be fired
+      engine.afterFlush(() => this.clearElementCache(element));
+      engine.destroyInnerAnimations(element);
+      engine._onRemovalComplete(element, context);
+    }
+  }
+
+  insertNode(element: any, parent: any): void { addClass(element, this._hostClassName); }
+
+  drainQueuedTransitions(microtaskId: number): QueueInstruction[] {
+    const instructions: QueueInstruction[] = [];
+    this._queue.forEach(entry => {
+      const player = entry.player;
+      if (player.destroyed) return;
+
+      const element = entry.element;
+      const listeners = this._elementListeners.get(element);
+      if (listeners) {
+        listeners.forEach((listener: TriggerListener) => {
+          if (listener.name == entry.triggerName) {
+            const baseEvent = makeAnimationEvent(
+                element, entry.triggerName, entry.fromState.value, entry.toState.value);
+            (baseEvent as any)['_data'] = microtaskId;
+            listenOnPlayer(entry.player, listener.phase, baseEvent, listener.callback);
+          }
+        });
+      }
+
+      if (player.markedForDestroy) {
+        this._engine.afterFlush(() => {
+          // now we can destroy the element properly since the event listeners have
+          // been bound to the player
+          player.destroy();
+        });
+      } else {
+        instructions.push(entry);
+      }
+    });
+
+    this._queue = [];
+
+    return instructions.sort((a, b) => {
+      // if depCount == 0 them move to front
+      // otherwise if a contains b then move back
+      const d0 = a.transition.ast.depCount;
+      const d1 = b.transition.ast.depCount;
+      if (d0 == 0 || d1 == 0) {
+        return d0 - d1;
+      }
+      return this._engine.driver.containsElement(a.element, b.element) ? 1 : -1;
+    });
+  }
+
+  destroy(context: any) {
+    this.players.forEach(p => p.destroy());
+    this._destroyInnerNodes(this.hostElement, context);
+  }
+
+  elementContainsData(element: any): boolean {
+    let containsData = false;
+    if (this._elementListeners.has(element)) containsData = true;
+    containsData =
+        (this._queue.find(entry => entry.element === element) ? true : false) || containsData;
+    return containsData;
+  }
+}
+
+export interface QueuedTransition {
+  element: any;
+  instruction: AnimationTransitionInstruction;
+  player: TransitionAnimationPlayer;
+}
+
+export class TransitionAnimationEngine {
+  public players: TransitionAnimationPlayer[] = [];
+  public newHostElements = new Map<any, AnimationTransitionNamespace>();
+  public playersByElement = new Map<any, TransitionAnimationPlayer[]>();
+  public playersByQueriedElement = new Map<any, TransitionAnimationPlayer[]>();
+  public statesByElement = new Map<any, {[triggerName: string]: StateValue}>();
+  public disabledNodes = new Set<any>();
+
+  public totalAnimations = 0;
+  public totalQueuedPlayers = 0;
+
+  private _namespaceLookup: {[id: string]: AnimationTransitionNamespace} = {};
+  private _namespaceList: AnimationTransitionNamespace[] = [];
+  private _flushFns: (() => any)[] = [];
+  private _whenQuietFns: (() => any)[] = [];
+
+  public namespacesByHostElement = new Map<any, AnimationTransitionNamespace>();
+  public collectedEnterElements: any[] = [];
+  public collectedLeaveElements: any[] = [];
+
+  // this method is designed to be overridden by the code that uses this engine
+  public onRemovalComplete = (element: any, context: any) => {};
+
+  _onRemovalComplete(element: any, context: any) { this.onRemovalComplete(element, context); }
+
+  constructor(public driver: AnimationDriver, private _normalizer: AnimationStyleNormalizer) {}
+
+  get queuedPlayers(): TransitionAnimationPlayer[] {
+    const players: TransitionAnimationPlayer[] = [];
+    this._namespaceList.forEach(ns => {
+      ns.players.forEach(player => {
+        if (player.queued) {
+          players.push(player);
+        }
+      });
+    });
+    return players;
+  }
+
+  createNamespace(namespaceId: string, hostElement: any) {
+    const ns = new AnimationTransitionNamespace(namespaceId, hostElement, this);
+    if (hostElement.parentNode) {
+      this._balanceNamespaceList(ns, hostElement);
+    } else {
+      // defer this later until flush during when the host element has
+      // been inserted so that we know exactly where to place it in
+      // the namespace list
+      this.newHostElements.set(hostElement, ns);
+
+      // given that this host element is apart of the animation code, it
+      // may or may not be inserted by a parent node that is an of an
+      // animation renderer type. If this happens then we can still have
+      // access to this item when we query for :enter nodes. If the parent
+      // is a renderer then the set data-structure will normalize the entry
+      this.collectEnterElement(hostElement);
+    }
+    return this._namespaceLookup[namespaceId] = ns;
+  }
+
+  private _balanceNamespaceList(ns: AnimationTransitionNamespace, hostElement: any) {
+    const limit = this._namespaceList.length - 1;
+    if (limit >= 0) {
+      let found = false;
+      for (let i = limit; i >= 0; i--) {
+        const nextNamespace = this._namespaceList[i];
+        if (this.driver.containsElement(nextNamespace.hostElement, hostElement)) {
+          this._namespaceList.splice(i + 1, 0, ns);
+          found = true;
+          break;
+        }
+      }
+      if (!found) {
+        this._namespaceList.splice(0, 0, ns);
+      }
+    } else {
+      this._namespaceList.push(ns);
+    }
+
+    this.namespacesByHostElement.set(hostElement, ns);
+    return ns;
+  }
+
+  register(namespaceId: string, hostElement: any) {
+    let ns = this._namespaceLookup[namespaceId];
+    if (!ns) {
+      ns = this.createNamespace(namespaceId, hostElement);
+    }
+    return ns;
+  }
+
+  registerTrigger(namespaceId: string, name: string, trigger: AnimationTrigger) {
+    let ns = this._namespaceLookup[namespaceId];
+    if (ns && ns.register(name, trigger)) {
+      this.totalAnimations++;
+    }
+  }
+
+  destroy(namespaceId: string, context: any) {
+    if (!namespaceId) return;
+
+    const ns = this._fetchNamespace(namespaceId);
+
+    this.afterFlush(() => {
+      this.namespacesByHostElement.delete(ns.hostElement);
+      delete this._namespaceLookup[namespaceId];
+      const index = this._namespaceList.indexOf(ns);
+      if (index >= 0) {
+        this._namespaceList.splice(index, 1);
+      }
+    });
+
+    this.afterFlushAnimationsDone(() => ns.destroy(context));
+  }
+
+  private _fetchNamespace(id: string) { return this._namespaceLookup[id]; }
+
+  trigger(namespaceId: string, element: any, name: string, value: any): boolean {
+    if (isElementNode(element)) {
+      this._fetchNamespace(namespaceId).trigger(element, name, value);
+      return true;
+    }
+    return false;
+  }
+
+  insertNode(namespaceId: string, element: any, parent: any, insertBefore: boolean): void {
+    if (!isElementNode(element)) return;
+
+    // special case for when an element is removed and reinserted (move operation)
+    // when this occurs we do not want to use the element for deletion later
+    const details = element[REMOVAL_FLAG] as ElementAnimationState;
+    if (details && details.setForRemoval) {
+      details.setForRemoval = false;
+    }
+
+    // in the event that the namespaceId is blank then the caller
+    // code does not contain any animation code in it, but it is
+    // just being called so that the node is marked as being inserted
+    if (namespaceId) {
+      this._fetchNamespace(namespaceId).insertNode(element, parent);
+    }
+
+    // only *directives and host elements are inserted before
+    if (insertBefore) {
+      this.collectEnterElement(element);
+    }
+  }
+
+  collectEnterElement(element: any) { this.collectedEnterElements.push(element); }
+
+  markElementAsDisabled(element: any, value: boolean) {
+    if (value) {
+      if (!this.disabledNodes.has(element)) {
+        this.disabledNodes.add(element);
+        addClass(element, DISABLED_CLASSNAME);
+      }
+    } else if (this.disabledNodes.has(element)) {
+      this.disabledNodes.delete(element);
+      removeClass(element, DISABLED_CLASSNAME);
+    }
+  }
+
+  removeNode(namespaceId: string, element: any, context: any, doNotRecurse?: boolean): void {
+    if (!isElementNode(element)) {
+      this._onRemovalComplete(element, context);
+      return;
+    }
+
+    const ns = namespaceId ? this._fetchNamespace(namespaceId) : null;
+    if (ns) {
+      ns.removeNode(element, context, doNotRecurse);
+    } else {
+      this.markElementAsRemoved(namespaceId, element, false, context);
+    }
+  }
+
+  markElementAsRemoved(namespaceId: string, element: any, hasAnimation?: boolean, context?: any) {
+    this.collectedLeaveElements.push(element);
+    element[REMOVAL_FLAG] = {
+      namespaceId,
+      setForRemoval: context, hasAnimation,
+      removedBeforeQueried: false
+    };
+  }
+
+  listen(
+      namespaceId: string, element: any, name: string, phase: string,
+      callback: (event: any) => boolean): () => any {
+    if (isElementNode(element)) {
+      return this._fetchNamespace(namespaceId).listen(element, name, phase, callback);
+    }
+    return () => {};
+  }
+
+  private _buildInstruction(entry: QueueInstruction, subTimelines: ElementInstructionMap) {
+    return entry.transition.build(
+        this.driver, entry.element, entry.fromState.value, entry.toState.value,
+        entry.toState.options, subTimelines);
+  }
+
+  destroyInnerAnimations(containerElement: any) {
+    let elements = this.driver.query(containerElement, NG_TRIGGER_SELECTOR, true);
+    elements.forEach(element => {
+      const players = this.playersByElement.get(element);
+      if (players) {
+        players.forEach(player => {
+          // special case for when an element is set for destruction, but hasn't started.
+          // in this situation we want to delay the destruction until the flush occurs
+          // so that any event listeners attached to the player are triggered.
+          if (player.queued) {
+            player.markedForDestroy = true;
+          } else {
+            player.destroy();
+          }
+        });
+      }
+      const stateMap = this.statesByElement.get(element);
+      if (stateMap) {
+        Object.keys(stateMap).forEach(triggerName => stateMap[triggerName] = DELETED_STATE_VALUE);
+      }
+    });
+
+    if (this.playersByQueriedElement.size == 0) return;
+
+    elements = this.driver.query(containerElement, NG_ANIMATING_SELECTOR, true);
+    if (elements.length) {
+      elements.forEach(element => {
+        const players = this.playersByQueriedElement.get(element);
+        if (players) {
+          players.forEach(player => player.finish());
+        }
+      });
+    }
+  }
+
+  whenRenderingDone(): Promise<any> {
+    return new Promise(resolve => {
+      if (this.players.length) {
+        return optimizeGroupPlayer(this.players).onDone(() => resolve());
+      } else {
+        resolve();
+      }
+    });
+  }
+
+  processLeaveNode(element: any) {
+    const details = element[REMOVAL_FLAG] as ElementAnimationState;
+    if (details && details.setForRemoval) {
+      // this will prevent it from removing it twice
+      element[REMOVAL_FLAG] = NULL_REMOVAL_STATE;
+      if (details.namespaceId) {
+        this.destroyInnerAnimations(element);
+        const ns = this._fetchNamespace(details.namespaceId);
+        if (ns) {
+          ns.clearElementCache(element);
+        }
+      }
+      this._onRemovalComplete(element, details.setForRemoval);
+    }
+
+    if (this.driver.matchesElement(element, DISABLED_SELECTOR)) {
+      this.markElementAsDisabled(element, false);
+    }
+
+    this.driver.query(element, DISABLED_SELECTOR, true).forEach(node => {
+      this.markElementAsDisabled(element, false);
+    });
+  }
+
+  flush(microtaskId: number = -1) {
+    let players: AnimationPlayer[] = [];
+    if (this.newHostElements.size) {
+      this.newHostElements.forEach((ns, element) => this._balanceNamespaceList(ns, element));
+      this.newHostElements.clear();
+    }
+
+    if (this._namespaceList.length &&
+        (this.totalQueuedPlayers || this.collectedLeaveElements.length)) {
+      const cleanupFns: Function[] = [];
+      try {
+        players = this._flushAnimations(cleanupFns, microtaskId);
+      } finally {
+        for (let i = 0; i < cleanupFns.length; i++) {
+          cleanupFns[i]();
+        }
+      }
+    } else {
+      for (let i = 0; i < this.collectedLeaveElements.length; i++) {
+        const element = this.collectedLeaveElements[i];
+        this.processLeaveNode(element);
+      }
+    }
+
+    this.totalQueuedPlayers = 0;
+    this.collectedEnterElements.length = 0;
+    this.collectedLeaveElements.length = 0;
+    this._flushFns.forEach(fn => fn());
+    this._flushFns = [];
+
+    if (this._whenQuietFns.length) {
+      // we move these over to a variable so that
+      // if any new callbacks are registered in another
+      // flush they do not populate the existing set
+      const quietFns = this._whenQuietFns;
+      this._whenQuietFns = [];
+
+      if (players.length) {
+        optimizeGroupPlayer(players).onDone(() => { quietFns.forEach(fn => fn()); });
+      } else {
+        quietFns.forEach(fn => fn());
+      }
+    }
+  }
+
+  private _flushAnimations(cleanupFns: Function[], microtaskId: number):
+      TransitionAnimationPlayer[] {
+    const subTimelines = new ElementInstructionMap();
+    const skippedPlayers: TransitionAnimationPlayer[] = [];
+    const skippedPlayersMap = new Map<any, AnimationPlayer[]>();
+    const queuedInstructions: QueuedTransition[] = [];
+    const queriedElements = new Map<any, TransitionAnimationPlayer[]>();
+    const allPreStyleElements = new Map<any, Set<string>>();
+    const allPostStyleElements = new Map<any, Set<string>>();
+
+    const disabledElementsSet = new Set<any>();
+    this.disabledNodes.forEach(node => {
+      const nodesThatAreDisabled = this.driver.query(node, QUEUED_SELECTOR, true);
+      for (let i = 0; i < nodesThatAreDisabled.length; i++) {
+        disabledElementsSet.add(nodesThatAreDisabled[i]);
+      }
+    });
+
+    const bodyNode = getBodyNode();
+    const allEnterNodes: any[] = this.collectedEnterElements.length ?
+        this.collectedEnterElements.filter(createIsRootFilterFn(this.collectedEnterElements)) :
+        [];
+
+    // this must occur before the instructions are built below such that
+    // the :enter queries match the elements (since the timeline queries
+    // are fired during instruction building).
+    for (let i = 0; i < allEnterNodes.length; i++) {
+      addClass(allEnterNodes[i], ENTER_CLASSNAME);
+    }
+
+    const allLeaveNodes: any[] = [];
+    const leaveNodesWithoutAnimations: any[] = [];
+    for (let i = 0; i < this.collectedLeaveElements.length; i++) {
+      const element = this.collectedLeaveElements[i];
+      const details = element[REMOVAL_FLAG] as ElementAnimationState;
+      if (details && details.setForRemoval) {
+        addClass(element, LEAVE_CLASSNAME);
+        allLeaveNodes.push(element);
+        if (!details.hasAnimation) {
+          leaveNodesWithoutAnimations.push(element);
+        }
+      }
+    }
+
+    cleanupFns.push(() => {
+      allEnterNodes.forEach(element => removeClass(element, ENTER_CLASSNAME));
+      allLeaveNodes.forEach(element => {
+        removeClass(element, LEAVE_CLASSNAME);
+        this.processLeaveNode(element);
+      });
+    });
+
+    const allPlayers: TransitionAnimationPlayer[] = [];
+    const erroneousTransitions: AnimationTransitionInstruction[] = [];
+    for (let i = this._namespaceList.length - 1; i >= 0; i--) {
+      const ns = this._namespaceList[i];
+      ns.drainQueuedTransitions(microtaskId).forEach(entry => {
+        const player = entry.player;
+        allPlayers.push(player);
+
+        const element = entry.element;
+        if (!bodyNode || !this.driver.containsElement(bodyNode, element)) {
+          player.destroy();
+          return;
+        }
+
+        const instruction = this._buildInstruction(entry, subTimelines) !;
+        if (instruction.errors && instruction.errors.length) {
+          erroneousTransitions.push(instruction);
+          return;
+        }
+
+        // if a unmatched transition is queued to go then it SHOULD NOT render
+        // an animation and cancel the previously running animations.
+        if (entry.isFallbackTransition) {
+          player.onStart(() => eraseStyles(element, instruction.fromStyles));
+          player.onDestroy(() => setStyles(element, instruction.toStyles));
+          skippedPlayers.push(player);
+          return;
+        }
+
+        // this means that if a parent animation uses this animation as a sub trigger
+        // then it will instruct the timeline builder to not add a player delay, but
+        // instead stretch the first keyframe gap up until the animation starts. The
+        // reason this is important is to prevent extra initialization styles from being
+        // required by the user in the animation.
+        instruction.timelines.forEach(tl => tl.stretchStartingKeyframe = true);
+
+        subTimelines.append(element, instruction.timelines);
+
+        const tuple = {instruction, player, element};
+
+        queuedInstructions.push(tuple);
+
+        instruction.queriedElements.forEach(
+            element => getOrSetAsInMap(queriedElements, element, []).push(player));
+
+        instruction.preStyleProps.forEach((stringMap, element) => {
+          const props = Object.keys(stringMap);
+          if (props.length) {
+            let setVal: Set<string> = allPreStyleElements.get(element) !;
+            if (!setVal) {
+              allPreStyleElements.set(element, setVal = new Set<string>());
+            }
+            props.forEach(prop => setVal.add(prop));
+          }
+        });
+
+        instruction.postStyleProps.forEach((stringMap, element) => {
+          const props = Object.keys(stringMap);
+          let setVal: Set<string> = allPostStyleElements.get(element) !;
+          if (!setVal) {
+            allPostStyleElements.set(element, setVal = new Set<string>());
+          }
+          props.forEach(prop => setVal.add(prop));
+        });
+      });
+    }
+
+    if (erroneousTransitions.length) {
+      let msg = `Unable to process animations due to the following failed trigger transitions\n`;
+      erroneousTransitions.forEach(instruction => {
+        msg += `@${instruction.triggerName} has failed due to:\n`;
+        instruction.errors !.forEach(error => { msg += `- ${error}\n`; });
+      });
+
+      allPlayers.forEach(player => player.destroy());
+      throw new Error(msg);
+    }
+
+    // these can only be detected here since we have a map of all the elements
+    // that have animations attached to them...
+    const enterNodesWithoutAnimations: any[] = [];
+    for (let i = 0; i < allEnterNodes.length; i++) {
+      const element = allEnterNodes[i];
+      if (!subTimelines.has(element)) {
+        enterNodesWithoutAnimations.push(element);
+      }
+    }
+
+    const allPreviousPlayersMap = new Map<any, TransitionAnimationPlayer[]>();
+    let sortedParentElements: any[] = [];
+    queuedInstructions.forEach(entry => {
+      const element = entry.element;
+      if (subTimelines.has(element)) {
+        sortedParentElements.unshift(element);
+        this._beforeAnimationBuild(
+            entry.player.namespaceId, entry.instruction, allPreviousPlayersMap);
+      }
+    });
+
+    skippedPlayers.forEach(player => {
+      const element = player.element;
+      const previousPlayers =
+          this._getPreviousPlayers(element, false, player.namespaceId, player.triggerName, null);
+      previousPlayers.forEach(
+          prevPlayer => { getOrSetAsInMap(allPreviousPlayersMap, element, []).push(prevPlayer); });
+    });
+
+    allPreviousPlayersMap.forEach(players => players.forEach(player => player.destroy()));
+
+    // PRE STAGE: fill the ! styles
+    const preStylesMap = allPreStyleElements.size ?
+        cloakAndComputeStyles(
+            this.driver, enterNodesWithoutAnimations, allPreStyleElements, PRE_STYLE) :
+        new Map<any, ɵStyleData>();
+
+    // POST STAGE: fill the * styles
+    const postStylesMap = cloakAndComputeStyles(
+        this.driver, leaveNodesWithoutAnimations, allPostStyleElements, AUTO_STYLE);
+
+    const rootPlayers: TransitionAnimationPlayer[] = [];
+    const subPlayers: TransitionAnimationPlayer[] = [];
+    queuedInstructions.forEach(entry => {
+      const {element, player, instruction} = entry;
+      // this means that it was never consumed by a parent animation which
+      // means that it is independent and therefore should be set for animation
+      if (subTimelines.has(element)) {
+        if (disabledElementsSet.has(element)) {
+          skippedPlayers.push(player);
+          return;
+        }
+
+        const innerPlayer = this._buildAnimation(
+            player.namespaceId, instruction, allPreviousPlayersMap, skippedPlayersMap, preStylesMap,
+            postStylesMap);
+        player.setRealPlayer(innerPlayer);
+
+        let parentHasPriority: any = null;
+        for (let i = 0; i < sortedParentElements.length; i++) {
+          const parent = sortedParentElements[i];
+          if (parent === element) break;
+          if (this.driver.containsElement(parent, element)) {
+            parentHasPriority = parent;
+            break;
+          }
+        }
+
+        if (parentHasPriority) {
+          const parentPlayers = this.playersByElement.get(parentHasPriority);
+          if (parentPlayers && parentPlayers.length) {
+            player.parentPlayer = optimizeGroupPlayer(parentPlayers);
+          }
+          skippedPlayers.push(player);
+        } else {
+          rootPlayers.push(player);
+        }
+      } else {
+        eraseStyles(element, instruction.fromStyles);
+        player.onDestroy(() => setStyles(element, instruction.toStyles));
+        subPlayers.push(player);
+      }
+    });
+
+    subPlayers.forEach(player => {
+      const playersForElement = skippedPlayersMap.get(player.element);
+      if (playersForElement && playersForElement.length) {
+        const innerPlayer = optimizeGroupPlayer(playersForElement);
+        player.setRealPlayer(innerPlayer);
+      }
+    });
+
+    // the reason why we don't actually play the animation is
+    // because all that a skipped player is designed to do is to
+    // fire the start/done transition callback events
+    skippedPlayers.forEach(player => {
+      if (player.parentPlayer) {
+        player.parentPlayer.onDestroy(() => player.destroy());
+      } else {
+        player.destroy();
+      }
+    });
+
+    // run through all of the queued removals and see if they
+    // were picked up by a query. If not then perform the removal
+    // operation right away unless a parent animation is ongoing.
+    for (let i = 0; i < allLeaveNodes.length; i++) {
+      const element = allLeaveNodes[i];
+      const details = element[REMOVAL_FLAG] as ElementAnimationState;
+      removeClass(element, LEAVE_CLASSNAME);
+
+      // this means the element has a removal animation that is being
+      // taken care of and therefore the inner elements will hang around
+      // until that animation is over (or the parent queried animation)
+      if (details && details.hasAnimation) continue;
+
+      let players: AnimationPlayer[] = [];
+
+      // if this element is queried or if it contains queried children
+      // then we want for the element not to be removed from the page
+      // until the queried animations have finished
+      if (queriedElements.size) {
+        let queriedPlayerResults = queriedElements.get(element);
+        if (queriedPlayerResults && queriedPlayerResults.length) {
+          players.push(...queriedPlayerResults);
+        }
+
+        let queriedInnerElements = this.driver.query(element, NG_ANIMATING_SELECTOR, true);
+        for (let j = 0; j < queriedInnerElements.length; j++) {
+          let queriedPlayers = queriedElements.get(queriedInnerElements[j]);
+          if (queriedPlayers && queriedPlayers.length) {
+            players.push(...queriedPlayers);
+          }
+        }
+      }
+      if (players.length) {
+        removeNodesAfterAnimationDone(this, element, players);
+      } else {
+        this.processLeaveNode(element);
+      }
+    }
+
+    // this is required so the cleanup method doesn't remove them
+    allLeaveNodes.length = 0;
+
+    rootPlayers.forEach(player => {
+      this.players.push(player);
+      player.onDone(() => {
+        player.destroy();
+
+        const index = this.players.indexOf(player);
+        this.players.splice(index, 1);
+      });
+      player.play();
+    });
+
+    return rootPlayers;
+  }
+
+  elementContainsData(namespaceId: string, element: any) {
+    let containsData = false;
+    const details = element[REMOVAL_FLAG] as ElementAnimationState;
+    if (details && details.setForRemoval) containsData = true;
+    if (this.playersByElement.has(element)) containsData = true;
+    if (this.playersByQueriedElement.has(element)) containsData = true;
+    if (this.statesByElement.has(element)) containsData = true;
+    return this._fetchNamespace(namespaceId).elementContainsData(element) || containsData;
+  }
+
+  afterFlush(callback: () => any) { this._flushFns.push(callback); }
+
+  afterFlushAnimationsDone(callback: () => any) { this._whenQuietFns.push(callback); }
+
+  private _getPreviousPlayers(
+      element: string, isQueriedElement: boolean, namespaceId?: string, triggerName?: string,
+      toStateValue?: any): TransitionAnimationPlayer[] {
+    let players: TransitionAnimationPlayer[] = [];
+    if (isQueriedElement) {
+      const queriedElementPlayers = this.playersByQueriedElement.get(element);
+      if (queriedElementPlayers) {
+        players = queriedElementPlayers;
+      }
+    } else {
+      const elementPlayers = this.playersByElement.get(element);
+      if (elementPlayers) {
+        const isRemovalAnimation = !toStateValue || toStateValue == VOID_VALUE;
+        elementPlayers.forEach(player => {
+          if (player.queued) return;
+          if (!isRemovalAnimation && player.triggerName != triggerName) return;
+          players.push(player);
+        });
+      }
+    }
+    if (namespaceId || triggerName) {
+      players = players.filter(player => {
+        if (namespaceId && namespaceId != player.namespaceId) return false;
+        if (triggerName && triggerName != player.triggerName) return false;
+        return true;
+      });
+    }
+    return players;
+  }
+
+  private _beforeAnimationBuild(
+      namespaceId: string, instruction: AnimationTransitionInstruction,
+      allPreviousPlayersMap: Map<any, TransitionAnimationPlayer[]>) {
+    // it's important to do this step before destroying the players
+    // so that the onDone callback below won't fire before this
+    eraseStyles(instruction.element, instruction.fromStyles);
+
+    const triggerName = instruction.triggerName;
+    const rootElement = instruction.element;
+
+    // when a removal animation occurs, ALL previous players are collected
+    // and destroyed (even if they are outside of the current namespace)
+    const targetNameSpaceId: string|undefined =
+        instruction.isRemovalTransition ? undefined : namespaceId;
+    const targetTriggerName: string|undefined =
+        instruction.isRemovalTransition ? undefined : triggerName;
+
+    instruction.timelines.map(timelineInstruction => {
+      const element = timelineInstruction.element;
+      const isQueriedElement = element !== rootElement;
+      const players = getOrSetAsInMap(allPreviousPlayersMap, element, []);
+      const previousPlayers = this._getPreviousPlayers(
+          element, isQueriedElement, targetNameSpaceId, targetTriggerName, instruction.toState);
+      previousPlayers.forEach(player => {
+        const realPlayer = player.getRealPlayer() as any;
+        if (realPlayer.beforeDestroy) {
+          realPlayer.beforeDestroy();
+        }
+        players.push(player);
+      });
+    });
+  }
+
+  private _buildAnimation(
+      namespaceId: string, instruction: AnimationTransitionInstruction,
+      allPreviousPlayersMap: Map<any, TransitionAnimationPlayer[]>,
+      skippedPlayersMap: Map<any, AnimationPlayer[]>, preStylesMap: Map<any, ɵStyleData>,
+      postStylesMap: Map<any, ɵStyleData>): AnimationPlayer {
+    const triggerName = instruction.triggerName;
+    const rootElement = instruction.element;
+
+    // we first run this so that the previous animation player
+    // data can be passed into the successive animation players
+    const allQueriedPlayers: TransitionAnimationPlayer[] = [];
+    const allConsumedElements = new Set<any>();
+    const allSubElements = new Set<any>();
+    const allNewPlayers = instruction.timelines.map(timelineInstruction => {
+      const element = timelineInstruction.element;
+      allConsumedElements.add(element);
+
+      // FIXME (matsko): make sure to-be-removed animations are removed properly
+      const details = element[REMOVAL_FLAG];
+      if (details && details.removedBeforeQueried) return new NoopAnimationPlayer();
+
+      const isQueriedElement = element !== rootElement;
+      const previousPlayers = flattenGroupPlayers(
+          (allPreviousPlayersMap.get(element) || EMPTY_PLAYER_ARRAY).map(p => p.getRealPlayer()));
+
+      const preStyles = preStylesMap.get(element);
+      const postStyles = postStylesMap.get(element);
+      const keyframes = normalizeKeyframes(
+          this.driver, this._normalizer, element, timelineInstruction.keyframes, preStyles,
+          postStyles);
+      const player = this._buildPlayer(timelineInstruction, keyframes, previousPlayers);
+
+      // this means that this particular player belongs to a sub trigger. It is
+      // important that we match this player up with the corresponding (@trigger.listener)
+      if (timelineInstruction.subTimeline && skippedPlayersMap) {
+        allSubElements.add(element);
+      }
+
+      if (isQueriedElement) {
+        const wrappedPlayer = new TransitionAnimationPlayer(namespaceId, triggerName, element);
+        wrappedPlayer.setRealPlayer(player);
+        allQueriedPlayers.push(wrappedPlayer);
+      }
+
+      return player;
+    });
+
+    allQueriedPlayers.forEach(player => {
+      getOrSetAsInMap(this.playersByQueriedElement, player.element, []).push(player);
+      player.onDone(() => deleteOrUnsetInMap(this.playersByQueriedElement, player.element, player));
+    });
+
+    allConsumedElements.forEach(element => addClass(element, NG_ANIMATING_CLASSNAME));
+    const player = optimizeGroupPlayer(allNewPlayers);
+    player.onDestroy(() => {
+      allConsumedElements.forEach(element => removeClass(element, NG_ANIMATING_CLASSNAME));
+      setStyles(rootElement, instruction.toStyles);
+    });
+
+    // this basically makes all of the callbacks for sub element animations
+    // be dependent on the upper players for when they finish
+    allSubElements.forEach(
+        element => { getOrSetAsInMap(skippedPlayersMap, element, []).push(player); });
+
+    return player;
+  }
+
+  private _buildPlayer(
+      instruction: AnimationTimelineInstruction, keyframes: ɵStyleData[],
+      previousPlayers: AnimationPlayer[]): AnimationPlayer {
+    if (keyframes.length > 0) {
+      return this.driver.animate(
+          instruction.element, keyframes, instruction.duration, instruction.delay,
+          instruction.easing, previousPlayers);
+    }
+
+    // special case for when an empty transition|definition is provided
+    // ... there is no point in rendering an empty animation
+    return new NoopAnimationPlayer();
+  }
+}
+
+export class TransitionAnimationPlayer implements AnimationPlayer {
+  private _player: AnimationPlayer = new NoopAnimationPlayer();
+  private _containsRealPlayer = false;
+
+  private _queuedCallbacks: {[name: string]: (() => any)[]} = {};
+  private _destroyed = false;
+  public parentPlayer: AnimationPlayer;
+
+  public markedForDestroy: boolean = false;
+
+  constructor(public namespaceId: string, public triggerName: string, public element: any) {}
+
+  get queued() { return this._containsRealPlayer == false; }
+
+  get destroyed() { return this._destroyed; }
+
+  setRealPlayer(player: AnimationPlayer) {
+    if (this._containsRealPlayer) return;
+
+    this._player = player;
+    Object.keys(this._queuedCallbacks).forEach(phase => {
+      this._queuedCallbacks[phase].forEach(
+          callback => listenOnPlayer(player, phase, undefined, callback));
+    });
+    this._queuedCallbacks = {};
+    this._containsRealPlayer = true;
+  }
+
+  getRealPlayer() { return this._player; }
+
+  private _queueEvent(name: string, callback: (event: any) => any): void {
+    getOrSetAsInMap(this._queuedCallbacks, name, []).push(callback);
+  }
+
+  onDone(fn: () => void): void {
+    if (this.queued) {
+      this._queueEvent('done', fn);
+    }
+    this._player.onDone(fn);
+  }
+
+  onStart(fn: () => void): void {
+    if (this.queued) {
+      this._queueEvent('start', fn);
+    }
+    this._player.onStart(fn);
+  }
+
+  onDestroy(fn: () => void): void {
+    if (this.queued) {
+      this._queueEvent('destroy', fn);
+    }
+    this._player.onDestroy(fn);
+  }
+
+  init(): void { this._player.init(); }
+
+  hasStarted(): boolean { return this.queued ? false : this._player.hasStarted(); }
+
+  play(): void { !this.queued && this._player.play(); }
+
+  pause(): void { !this.queued && this._player.pause(); }
+
+  restart(): void { !this.queued && this._player.restart(); }
+
+  finish(): void { this._player.finish(); }
+
+  destroy(): void {
+    this._destroyed = true;
+    this._player.destroy();
+  }
+
+  reset(): void { !this.queued && this._player.reset(); }
+
+  setPosition(p: any): void {
+    if (!this.queued) {
+      this._player.setPosition(p);
+    }
+  }
+
+  getPosition(): number { return this.queued ? 0 : this._player.getPosition(); }
+
+  get totalTime(): number { return this._player.totalTime; }
+}
+
+function deleteOrUnsetInMap(map: Map<any, any[]>| {[key: string]: any}, key: any, value: any) {
+  let currentValues: any[]|null|undefined;
+  if (map instanceof Map) {
+    currentValues = map.get(key);
+    if (currentValues) {
+      if (currentValues.length) {
+        const index = currentValues.indexOf(value);
+        currentValues.splice(index, 1);
+      }
+      if (currentValues.length == 0) {
+        map.delete(key);
+      }
+    }
+  } else {
+    currentValues = map[key];
+    if (currentValues) {
+      if (currentValues.length) {
+        const index = currentValues.indexOf(value);
+        currentValues.splice(index, 1);
+      }
+      if (currentValues.length == 0) {
+        delete map[key];
+      }
+    }
+  }
+  return currentValues;
+}
+
+function normalizeTriggerValue(value: any): string {
+  switch (typeof value) {
+    case 'boolean':
+      return value ? '1' : '0';
+    default:
+      return value != null ? value.toString() : null;
+  }
+}
+
+function isElementNode(node: any) {
+  return node && node['nodeType'] === 1;
+}
+
+function isTriggerEventValid(eventName: string): boolean {
+  return eventName == 'start' || eventName == 'done';
+}
+
+function cloakElement(element: any, value?: string) {
+  const oldValue = element.style.display;
+  element.style.display = value != null ? value : 'none';
+  return oldValue;
+}
+
+function cloakAndComputeStyles(
+    driver: AnimationDriver, elements: any[], elementPropsMap: Map<any, Set<string>>,
+    defaultStyle: string): Map<any, ɵStyleData> {
+  const cloakVals = elements.map(element => cloakElement(element));
+  const valuesMap = new Map<any, ɵStyleData>();
+
+  elementPropsMap.forEach((props: Set<string>, element: any) => {
+    const styles: ɵStyleData = {};
+    props.forEach(prop => {
+      const value = styles[prop] = driver.computeStyle(element, prop, defaultStyle);
+
+      // there is no easy way to detect this because a sub element could be removed
+      // by a parent animation element being detached.
+      if (!value || value.length == 0) {
+        element[REMOVAL_FLAG] = NULL_REMOVED_QUERIED_STATE;
+      }
+    });
+    valuesMap.set(element, styles);
+  });
+
+  elements.forEach((element, i) => cloakElement(element, cloakVals[i]));
+  return valuesMap;
+}
+
+/*
+Since the Angular renderer code will return a collection of inserted
+nodes in all areas of a DOM tree, it's up to this algorithm to figure
+out which nodes are roots.
+
+By placing all nodes into a set and traversing upwards to the edge,
+the recursive code can figure out if a clean path from the DOM node
+to the edge container is clear. If no other node is detected in the
+set then it is a root element.
+
+This algorithm also keeps track of all nodes along the path so that
+if other sibling nodes are also tracked then the lookup process can
+skip a lot of steps in between and avoid traversing the entire tree
+multiple times to the edge.
+ */
+function createIsRootFilterFn(nodes: any): (node: any) => boolean {
+  const nodeSet = new Set(nodes);
+  const knownRootContainer = new Set();
+  let isRoot: (node: any) => boolean;
+  isRoot = node => {
+    if (!node) return true;
+    if (nodeSet.has(node.parentNode)) return false;
+    if (knownRootContainer.has(node.parentNode)) return true;
+    if (isRoot(node.parentNode)) {
+      knownRootContainer.add(node);
+      return true;
+    }
+    return false;
+  };
+  return isRoot;
+}
+
+const CLASSES_CACHE_KEY = '$$classes';
+function containsClass(element: any, className: string): boolean {
+  if (element.classList) {
+    return element.classList.contains(className);
+  } else {
+    const classes = element[CLASSES_CACHE_KEY];
+    return classes && classes[className];
+  }
+}
+
+function addClass(element: any, className: string) {
+  if (element.classList) {
+    element.classList.add(className);
+  } else {
+    let classes: {[className: string]: boolean} = element[CLASSES_CACHE_KEY];
+    if (!classes) {
+      classes = element[CLASSES_CACHE_KEY] = {};
+    }
+    classes[className] = true;
+  }
+}
+
+function removeClass(element: any, className: string) {
+  if (element.classList) {
+    element.classList.remove(className);
+  } else {
+    let classes: {[className: string]: boolean} = element[CLASSES_CACHE_KEY];
+    if (classes) {
+      delete classes[className];
+    }
+  }
+}
+
+function getBodyNode(): any|null {
+  if (typeof document != 'undefined') {
+    return document.body;
+  }
+  return null;
+}
+
+function removeNodesAfterAnimationDone(
+    engine: TransitionAnimationEngine, element: any, players: AnimationPlayer[]) {
+  optimizeGroupPlayer(players).onDone(() => engine.processLeaveNode(element));
+}
+
+function flattenGroupPlayers(players: AnimationPlayer[]): AnimationPlayer[] {
+  const finalPlayers: AnimationPlayer[] = [];
+  _flattenGroupPlayersRecur(players, finalPlayers);
+  return finalPlayers;
+}
+
+function _flattenGroupPlayersRecur(players: AnimationPlayer[], finalPlayers: AnimationPlayer[]) {
+  for (let i = 0; i < players.length; i++) {
+    const player = players[i];
+    if (player instanceof AnimationGroupPlayer) {
+      _flattenGroupPlayersRecur(player.players, finalPlayers);
+    } else {
+      finalPlayers.push(player as AnimationPlayer);
+    }
+  }
+}
diff --git a/packages/animations/browser/src/render/web_animations/web_animations_driver.ts b/packages/animations/browser/src/render/web_animations/web_animations_driver.ts
index c08401110f..b26cbe3eca 100644
--- a/packages/animations/browser/src/render/web_animations/web_animations_driver.ts
+++ b/packages/animations/browser/src/render/web_animations/web_animations_driver.ts
@@ -8,15 +8,30 @@
 import {AnimationPlayer, ɵStyleData} from '@angular/animations';
 
 import {AnimationDriver} from '../animation_driver';
+import {containsElement, invokeQuery, matchesElement} from '../shared';
 
 import {WebAnimationsPlayer} from './web_animations_player';
 
 export class WebAnimationsDriver implements AnimationDriver {
+  matchesElement(element: any, selector: string): boolean {
+    return matchesElement(element, selector);
+  }
+
+  containsElement(elm1: any, elm2: any): boolean { return containsElement(elm1, elm2); }
+
+  query(element: any, selector: string, multi: boolean): any[] {
+    return invokeQuery(element, selector, multi);
+  }
+
+  computeStyle(element: any, prop: string, defaultValue?: string): string {
+    return (window.getComputedStyle(element) as any)[prop] as string;
+  }
+
   animate(
       element: any, keyframes: ɵStyleData[], duration: number, delay: number, easing: string,
       previousPlayers: AnimationPlayer[] = []): WebAnimationsPlayer {
-    const playerOptions: {[key: string]: string |
-                              number} = {'duration': duration, 'delay': delay, 'fill': 'forwards'};
+    const fill = delay == 0 ? 'both' : 'forwards';
+    const playerOptions: {[key: string]: string | number} = {duration, delay, fill};
 
     // we check for this to avoid having a null|undefined value be present
     // for the easing (which results in an error for certain browsers #9752)
diff --git a/packages/animations/browser/src/render/web_animations/web_animations_player.ts b/packages/animations/browser/src/render/web_animations/web_animations_player.ts
index 829c7c6edd..580ebb5042 100644
--- a/packages/animations/browser/src/render/web_animations/web_animations_player.ts
+++ b/packages/animations/browser/src/render/web_animations/web_animations_player.ts
@@ -5,7 +5,10 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AUTO_STYLE, AnimationPlayer} from '@angular/animations';
+import {AnimationPlayer} from '@angular/animations';
+
+import {allowPreviousPlayerStylesMerge, copyStyles} from '../../util';
+
 import {DOMAnimation} from './dom_animation';
 
 export class WebAnimationsPlayer implements AnimationPlayer {
@@ -23,21 +26,23 @@ export class WebAnimationsPlayer implements AnimationPlayer {
   public time = 0;
 
   public parentPlayer: AnimationPlayer|null = null;
-  public previousStyles: {[styleName: string]: string | number};
+  public previousStyles: {[styleName: string]: string | number} = {};
+  public currentSnapshot: {[styleName: string]: string | number} = {};
 
   constructor(
       public element: any, public keyframes: {[key: string]: string | number}[],
       public options: {[key: string]: string | number},
-      previousPlayers: WebAnimationsPlayer[] = []) {
+      private previousPlayers: WebAnimationsPlayer[] = []) {
     this._duration = <number>options['duration'];
     this._delay = <number>options['delay'] || 0;
     this.time = this._duration + this._delay;
 
-    this.previousStyles = {};
-    previousPlayers.forEach(player => {
-      let styles = player._captureStyles();
-      Object.keys(styles).forEach(prop => this.previousStyles[prop] = styles[prop]);
-    });
+    if (allowPreviousPlayerStylesMerge(this._duration, this._delay)) {
+      previousPlayers.forEach(player => {
+        let styles = player.currentSnapshot;
+        Object.keys(styles).forEach(prop => this.previousStyles[prop] = styles[prop]);
+      });
+    }
   }
 
   private _onFinish() {
@@ -49,23 +54,15 @@ export class WebAnimationsPlayer implements AnimationPlayer {
   }
 
   init(): void {
+    this._buildPlayer();
+    this._preparePlayerBeforeStart();
+  }
+
+  private _buildPlayer(): void {
     if (this._initialized) return;
     this._initialized = true;
 
-    const keyframes = this.keyframes.map(styles => {
-      const formattedKeyframe: {[key: string]: string | number} = {};
-      Object.keys(styles).forEach((prop, index) => {
-        let value = styles[prop];
-        if (value == AUTO_STYLE) {
-          value = _computeStyle(this.element, prop);
-        }
-        if (value != undefined) {
-          formattedKeyframe[prop] = value;
-        }
-      });
-      return formattedKeyframe;
-    });
-
+    const keyframes = this.keyframes.map(styles => copyStyles(styles, false));
     const previousStyleProps = Object.keys(this.previousStyles);
     if (previousStyleProps.length) {
       let startingKeyframe = keyframes[0];
@@ -90,14 +87,19 @@ export class WebAnimationsPlayer implements AnimationPlayer {
     }
 
     this._player = this._triggerWebAnimation(this.element, keyframes, this.options);
-    this._finalKeyframe =
-        keyframes.length ? _copyKeyframeStyles(keyframes[keyframes.length - 1]) : {};
-
-    // this is required so that the player doesn't start to animate right away
-    this._resetDomPlayerState();
+    this._finalKeyframe = keyframes.length ? keyframes[keyframes.length - 1] : {};
     this._player.addEventListener('finish', () => this._onFinish());
   }
 
+  private _preparePlayerBeforeStart() {
+    // this is required so that the player doesn't start to animate right away
+    if (this._delay) {
+      this._resetDomPlayerState();
+    } else {
+      this._player.pause();
+    }
+  }
+
   /** @internal */
   _triggerWebAnimation(element: any, keyframes: any[], options: any): DOMAnimation {
     // jscompiler doesn't seem to know animate is a native property because it's not fully
@@ -114,7 +116,7 @@ export class WebAnimationsPlayer implements AnimationPlayer {
   onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
 
   play(): void {
-    this.init();
+    this._buildPlayer();
     if (!this.hasStarted()) {
       this._onStartFns.forEach(fn => fn());
       this._onStartFns = [];
@@ -168,7 +170,9 @@ export class WebAnimationsPlayer implements AnimationPlayer {
 
   getPosition(): number { return this._player.currentTime / this.time; }
 
-  private _captureStyles(): {[prop: string]: string | number} {
+  get totalTime(): number { return this._delay + this._duration; }
+
+  beforeDestroy() {
     const styles: {[key: string]: string | number} = {};
     if (this.hasStarted()) {
       Object.keys(this._finalKeyframe).forEach(prop => {
@@ -178,22 +182,10 @@ export class WebAnimationsPlayer implements AnimationPlayer {
         }
       });
     }
-
-    return styles;
+    this.currentSnapshot = styles;
   }
 }
 
 function _computeStyle(element: any, prop: string): string {
   return (<any>window.getComputedStyle(element))[prop];
 }
-
-function _copyKeyframeStyles(styles: {[style: string]: string | number}):
-    {[style: string]: string | number} {
-  const newStyles: {[style: string]: string | number} = {};
-  Object.keys(styles).forEach(prop => {
-    if (prop != 'offset') {
-      newStyles[prop] = styles[prop];
-    }
-  });
-  return newStyles;
-}
diff --git a/packages/animations/browser/src/util.ts b/packages/animations/browser/src/util.ts
index bda44a0063..a6dbb75f56 100644
--- a/packages/animations/browser/src/util.ts
+++ b/packages/animations/browser/src/util.ts
@@ -5,37 +5,62 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AnimateTimings, ɵStyleData} from '@angular/animations';
+import {AnimateTimings, AnimationMetadata, AnimationOptions, sequence, ɵStyleData} from '@angular/animations';
 
 export const ONE_SECOND = 1000;
 
-export function parseTimeExpression(exp: string | number, errors: string[]): AnimateTimings {
-  const regex = /^([\.\d]+)(m?s)(?:\s+([\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i;
+export const ENTER_CLASSNAME = 'ng-enter';
+export const LEAVE_CLASSNAME = 'ng-leave';
+export const ENTER_SELECTOR = '.ng-enter';
+export const LEAVE_SELECTOR = '.ng-leave';
+export const NG_TRIGGER_CLASSNAME = 'ng-trigger';
+export const NG_TRIGGER_SELECTOR = '.ng-trigger';
+export const NG_ANIMATING_CLASSNAME = 'ng-animating';
+export const NG_ANIMATING_SELECTOR = '.ng-animating';
+
+export function resolveTimingValue(value: string | number) {
+  if (typeof value == 'number') return value;
+
+  const matches = (value as string).match(/^(-?[\.\d]+)(m?s)/);
+  if (!matches || matches.length < 2) return 0;
+
+  return _convertTimeValueToMS(parseFloat(matches[1]), matches[2]);
+}
+
+function _convertTimeValueToMS(value: number, unit: string): number {
+  switch (unit) {
+    case 's':
+      return value * ONE_SECOND;
+    default:  // ms or something else
+      return value;
+  }
+}
+
+export function resolveTiming(
+    timings: string | number | AnimateTimings, errors: any[], allowNegativeValues?: boolean) {
+  return timings.hasOwnProperty('duration') ?
+      <AnimateTimings>timings :
+      parseTimeExpression(<string|number>timings, errors, allowNegativeValues);
+}
+
+function parseTimeExpression(
+    exp: string | number, errors: string[], allowNegativeValues?: boolean): AnimateTimings {
+  const regex = /^(-?[\.\d]+)(m?s)(?:\s+(-?[\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i;
   let duration: number;
   let delay: number = 0;
-  let easing: string|null = null;
+  let easing: string = '';
   if (typeof exp === 'string') {
     const matches = exp.match(regex);
     if (matches === null) {
       errors.push(`The provided timing value "${exp}" is invalid.`);
-      return {duration: 0, delay: 0, easing: null};
+      return {duration: 0, delay: 0, easing: ''};
     }
 
-    let durationMatch = parseFloat(matches[1]);
-    const durationUnit = matches[2];
-    if (durationUnit == 's') {
-      durationMatch *= ONE_SECOND;
-    }
-    duration = Math.floor(durationMatch);
+    duration = _convertTimeValueToMS(parseFloat(matches[1]), matches[2]);
 
     const delayMatch = matches[3];
-    const delayUnit = matches[4];
     if (delayMatch != null) {
-      let delayVal: number = parseFloat(delayMatch);
-      if (delayUnit != null && delayUnit == 's') {
-        delayVal *= ONE_SECOND;
-      }
-      delay = Math.floor(delayVal);
+      delay = _convertTimeValueToMS(Math.floor(parseFloat(delayMatch)), matches[4]);
     }
 
     const easingVal = matches[5];
@@ -46,9 +71,31 @@ export function parseTimeExpression(exp: string | number, errors: string[]): Ani
     duration = <number>exp;
   }
 
+  if (!allowNegativeValues) {
+    let containsErrors = false;
+    let startIndex = errors.length;
+    if (duration < 0) {
+      errors.push(`Duration values below 0 are not allowed for this animation step.`);
+      containsErrors = true;
+    }
+    if (delay < 0) {
+      errors.push(`Delay values below 0 are not allowed for this animation step.`);
+      containsErrors = true;
+    }
+    if (containsErrors) {
+      errors.splice(startIndex, 0, `The provided timing value "${exp}" is invalid.`);
+    }
+  }
+
   return {duration, delay, easing};
 }
 
+export function copyObj(
+    obj: {[key: string]: any}, destination: {[key: string]: any} = {}): {[key: string]: any} {
+  Object.keys(obj).forEach(prop => { destination[prop] = obj[prop]; });
+  return destination;
+}
+
 export function normalizeStyles(styles: ɵStyleData | ɵStyleData[]): ɵStyleData {
   const normalizedStyles: ɵStyleData = {};
   if (Array.isArray(styles)) {
@@ -69,23 +116,104 @@ export function copyStyles(
       destination[prop] = styles[prop];
     }
   } else {
-    Object.keys(styles).forEach(prop => destination[prop] = styles[prop]);
+    copyObj(styles, destination);
   }
   return destination;
 }
 
 export function setStyles(element: any, styles: ɵStyleData) {
   if (element['style']) {
-    Object.keys(styles).forEach(prop => element.style[prop] = styles[prop]);
+    Object.keys(styles).forEach(prop => {
+      const camelProp = dashCaseToCamelCase(prop);
+      element.style[camelProp] = styles[prop];
+    });
   }
 }
 
 export function eraseStyles(element: any, styles: ɵStyleData) {
   if (element['style']) {
     Object.keys(styles).forEach(prop => {
-      // IE requires '' instead of null
-      // see https://github.com/angular/angular/issues/7916
-      element.style[prop] = '';
+      const camelProp = dashCaseToCamelCase(prop);
+      element.style[camelProp] = '';
     });
   }
 }
+
+export function normalizeAnimationEntry(steps: AnimationMetadata | AnimationMetadata[]):
+    AnimationMetadata {
+  if (Array.isArray(steps)) {
+    if (steps.length == 1) return steps[0];
+    return sequence(steps);
+  }
+  return steps as AnimationMetadata;
+}
+
+export function validateStyleParams(
+    value: string | number, options: AnimationOptions, errors: any[]) {
+  const params = options.params || {};
+  if (typeof value !== 'string') return;
+
+  const matches = value.toString().match(PARAM_REGEX);
+  if (matches) {
+    matches.forEach(varName => {
+      if (!params.hasOwnProperty(varName)) {
+        errors.push(
+            `Unable to resolve the local animation param ${varName} in the given list of values`);
+      }
+    });
+  }
+}
+
+const PARAM_REGEX = /\{\{\s*(.+?)\s*\}\}/g;
+export function interpolateParams(
+    value: string | number, params: {[name: string]: any}, errors: any[]): string|number {
+  const original = value.toString();
+  const str = original.replace(PARAM_REGEX, (_, varName) => {
+    let localVal = params[varName];
+    // this means that the value was never overidden by the data passed in by the user
+    if (!params.hasOwnProperty(varName)) {
+      errors.push(`Please provide a value for the animation param ${varName}`);
+      localVal = '';
+    }
+    return localVal.toString();
+  });
+
+  // we do this to assert that numeric values stay as they are
+  return str == original ? value : str;
+}
+
+export function iteratorToArray(iterator: any): any[] {
+  const arr: any[] = [];
+  let item = iterator.next();
+  while (!item.done) {
+    arr.push(item.value);
+    item = iterator.next();
+  }
+  return arr;
+}
+
+export function mergeAnimationOptions(
+    source: AnimationOptions, destination: AnimationOptions): AnimationOptions {
+  if (source.params) {
+    const p0 = source.params;
+    if (!destination.params) {
+      destination.params = {};
+    }
+    const p1 = destination.params;
+    Object.keys(p0).forEach(param => {
+      if (!p1.hasOwnProperty(param)) {
+        p1[param] = p0[param];
+      }
+    });
+  }
+  return destination;
+}
+
+const DASH_CASE_REGEXP = /-+([a-z0-9])/g;
+export function dashCaseToCamelCase(input: string): string {
+  return input.replace(DASH_CASE_REGEXP, (...m: any[]) => m[1].toUpperCase());
+}
+
+export function allowPreviousPlayerStylesMerge(duration: number, delay: number) {
+  return duration === 0 || delay === 0;
+}
diff --git a/packages/animations/browser/test/dsl/animation_spec.ts b/packages/animations/browser/test/dsl/animation_spec.ts
index ef455044fd..d022379e12 100644
--- a/packages/animations/browser/test/dsl/animation_spec.ts
+++ b/packages/animations/browser/test/dsl/animation_spec.ts
@@ -5,14 +5,39 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AUTO_STYLE, AnimationMetadata, AnimationMetadataType, animate, group, keyframes, sequence, style, ɵStyleData} from '@angular/animations';
+import {AUTO_STYLE, AnimationMetadata, AnimationMetadataType, animate, animation, group, keyframes, query, sequence, style, transition, trigger, useAnimation, ɵStyleData} from '@angular/animations';
+import {AnimationOptions} from '@angular/core/src/animation/dsl';
 
 import {Animation} from '../../src/dsl/animation';
+import {buildAnimationAst} from '../../src/dsl/animation_ast_builder';
 import {AnimationTimelineInstruction} from '../../src/dsl/animation_timeline_instruction';
-import {validateAnimationSequence} from '../../src/dsl/animation_validator_visitor';
+import {ElementInstructionMap} from '../../src/dsl/element_instruction_map';
+import {MockAnimationDriver} from '../../testing';
+
+function createDiv() {
+  return document.createElement('div');
+}
 
 export function main() {
   describe('Animation', () => {
+    // these tests are only mean't to be run within the DOM (for now)
+    if (typeof Element == 'undefined') return;
+
+    let rootElement: any;
+    let subElement1: any;
+    let subElement2: any;
+
+    beforeEach(() => {
+      rootElement = createDiv();
+      subElement1 = createDiv();
+      subElement2 = createDiv();
+      document.body.appendChild(rootElement);
+      rootElement.appendChild(subElement1);
+      rootElement.appendChild(subElement2);
+    });
+
+    afterEach(() => { document.body.removeChild(rootElement); });
+
     describe('validation', () => {
       it('should throw an error if one or more but not all keyframes() styles contain offsets',
          () => {
@@ -77,6 +102,23 @@ export function main() {
                 /The CSS property "opacity" that exists between the times of "0ms" and "2000ms" is also being animated in a parallel animation between the times of "0ms" and "1500ms"/);
       });
 
+      it('should not throw an error if animations overlap in different query levels within different transitions',
+         () => {
+           const steps = trigger('myAnimation', [
+             transition('a => b', group([
+                          query('h1', animate('1s', style({opacity: 0}))),
+                          query('h2', animate('1s', style({opacity: 1}))),
+                        ])),
+
+             transition('b => a', group([
+                          query('h1', animate('1s', style({opacity: 0}))),
+                          query('h2', animate('1s', style({opacity: 1}))),
+                        ])),
+           ]);
+
+           expect(() => validateAndThrowAnimationSequence(steps)).not.toThrow();
+         });
+
       it('should throw an error if an animation time is invalid', () => {
         const steps = [animate('500xs', style({opacity: 1}))];
 
@@ -90,6 +132,48 @@ export function main() {
           validateAndThrowAnimationSequence(steps2);
         }).toThrowError(/The provided timing value "500ms 500ms 500ms ease-out" is invalid/);
       });
+
+      it('should throw if negative durations are used', () => {
+        const steps = [animate(-1000, style({opacity: 1}))];
+
+        expect(() => {
+          validateAndThrowAnimationSequence(steps);
+        }).toThrowError(/Duration values below 0 are not allowed for this animation step/);
+
+        const steps2 = [animate('-1s', style({opacity: 1}))];
+
+        expect(() => {
+          validateAndThrowAnimationSequence(steps2);
+        }).toThrowError(/Duration values below 0 are not allowed for this animation step/);
+      });
+
+      it('should throw if negative delays are used', () => {
+        const steps = [animate('1s -500ms', style({opacity: 1}))];
+
+        expect(() => {
+          validateAndThrowAnimationSequence(steps);
+        }).toThrowError(/Delay values below 0 are not allowed for this animation step/);
+
+        const steps2 = [animate('1s -0.5s', style({opacity: 1}))];
+
+        expect(() => {
+          validateAndThrowAnimationSequence(steps2);
+        }).toThrowError(/Delay values below 0 are not allowed for this animation step/);
+      });
+
+      it('should throw if keyframes() is not used inside of animate()', () => {
+        const steps = [keyframes([])];
+
+        expect(() => {
+          validateAndThrowAnimationSequence(steps);
+        }).toThrowError(/keyframes\(\) must be placed inside of a call to animate\(\)/);
+
+        const steps2 = [group([keyframes([])])];
+
+        expect(() => {
+          validateAndThrowAnimationSequence(steps2);
+        }).toThrowError(/keyframes\(\) must be placed inside of a call to animate\(\)/);
+      });
     });
 
     describe('keyframe building', () => {
@@ -102,7 +186,7 @@ export function main() {
                animate(1000, style({width: 200}))
              ];
 
-             const players = invokeAnimationSequence(steps);
+             const players = invokeAnimationSequence(rootElement, steps);
              expect(players[0].keyframes).toEqual([
                {height: AUTO_STYLE, width: 0, offset: 0},
                {height: 50, width: 0, offset: .25},
@@ -116,7 +200,7 @@ export function main() {
            () => {
              const steps = [animate(1000, style({width: 999}))];
 
-             const players = invokeAnimationSequence(steps);
+             const players = invokeAnimationSequence(rootElement, steps);
              expect(players[0].keyframes).toEqual([
                {width: AUTO_STYLE, offset: 0}, {width: 999, offset: 1}
              ]);
@@ -128,7 +212,7 @@ export function main() {
             animate(1000, style({width: 100, height: 400, opacity: 1}))
           ];
 
-          const players = invokeAnimationSequence(steps);
+          const players = invokeAnimationSequence(rootElement, steps);
           expect(players[0].keyframes).toEqual([
             {width: 200, height: 0, opacity: 0, offset: 0},
             {width: 100, height: 400, opacity: 1, offset: 1}
@@ -142,7 +226,7 @@ export function main() {
                animate(1000, style({opacity: 1}))
              ];
 
-             const players = invokeAnimationSequence(steps);
+             const players = invokeAnimationSequence(rootElement, steps);
              const keyframes = humanizeOffsets(players[0].keyframes, 4);
 
              expect(keyframes).toEqual([
@@ -159,7 +243,7 @@ export function main() {
             animate('1s cubic-bezier(.29, .55 ,.53 ,1.53)', style({opacity: 1}))
           ];
 
-          const player = invokeAnimationSequence(steps)[0];
+          const player = invokeAnimationSequence(rootElement, steps)[0];
           const firstKeyframe = player.keyframes[0];
           const firstKeyframeEasing = firstKeyframe['easing'] as string;
           expect(firstKeyframeEasing.replace(/\s+/g, '')).toEqual('cubic-bezier(.29,.55,.53,1.53)');
@@ -170,34 +254,30 @@ export function main() {
         it('should not produce extra timelines when multiple sequences are used within each other',
            () => {
              const steps = [
-               style({width: 0}), animate(1000, style({width: 100})), sequence([
+               style({width: 0}),
+               animate(1000, style({width: 100})),
+               sequence([
                  animate(1000, style({width: 200})),
-                 sequence([animate(1000, style({width: 300}))])
+                 sequence([
+                   animate(1000, style({width: 300})),
+                 ]),
+               ]),
+               animate(1000, style({width: 400})),
+               sequence([
+                 animate(1000, style({width: 500})),
                ]),
-               animate(1000, style({width: 400})), sequence([animate(1000, style({width: 500}))])
              ];
 
-             const players = invokeAnimationSequence(steps);
-             expect(players[0].keyframes).toEqual([
+             const players = invokeAnimationSequence(rootElement, steps);
+             expect(players.length).toEqual(1);
+
+             const player = players[0];
+             expect(player.keyframes).toEqual([
                {width: 0, offset: 0}, {width: 100, offset: .2}, {width: 200, offset: .4},
                {width: 300, offset: .6}, {width: 400, offset: .8}, {width: 500, offset: 1}
              ]);
            });
 
-        it('should produce a 1ms animation step if a style call exists before sequence within a call to animate()',
-           () => {
-             const steps = [
-               style({width: 100}), sequence([
-                 animate(1000, style({width: 200})),
-               ])
-             ];
-
-             const players = invokeAnimationSequence(steps);
-             expect(humanizeOffsets(players[0].keyframes, 4)).toEqual([
-               {width: 100, offset: 0}, {width: 100, offset: .001}, {width: 200, offset: 1}
-             ]);
-           });
-
         it('should create a new timeline after a sequence if group() or keyframe() commands are used within',
            () => {
              const steps = [
@@ -211,7 +291,7 @@ export function main() {
                animate(1000, style({width: 500, height: 500}))
              ];
 
-             const players = invokeAnimationSequence(steps);
+             const players = invokeAnimationSequence(rootElement, steps);
              expect(players.length).toEqual(4);
 
              const finalPlayer = players[players.length - 1];
@@ -219,6 +299,147 @@ export function main() {
                {width: 200, height: 200, offset: 0}, {width: 500, height: 500, offset: 1}
              ]);
            });
+
+        it('should push the start of a sequence if a delay option is provided', () => {
+          const steps = [
+            style({width: '0px'}), animate(1000, style({width: '100px'})),
+            sequence(
+                [
+                  animate(1000, style({width: '200px'})),
+                ],
+                {delay: 500})
+          ];
+
+          const players = invokeAnimationSequence(rootElement, steps);
+          const finalPlayer = players[players.length - 1];
+          expect(finalPlayer.keyframes).toEqual([
+            {width: '100px', offset: 0},
+            {width: '200px', offset: 1},
+          ]);
+          expect(finalPlayer.delay).toEqual(1500);
+        });
+      });
+
+      describe('subtitutions', () => {
+        it('should allow params to be subtituted even if they are not defaulted in a reusable animation',
+           () => {
+             const myAnimation = animation([
+               style({left: '{{ start }}'}),
+               animate(1000, style({left: '{{ end }}'})),
+             ]);
+
+             const steps = [
+               useAnimation(myAnimation, {params: {start: '0px', end: '100px'}}),
+             ];
+
+             const players = invokeAnimationSequence(rootElement, steps, {});
+             expect(players.length).toEqual(1);
+             const player = players[0];
+
+             expect(player.keyframes).toEqual([
+               {left: '0px', offset: 0},
+               {left: '100px', offset: 1},
+             ]);
+           });
+
+        it('should substitute in timing values', () => {
+          function makeAnimation(exp: string, options: {[key: string]: any}) {
+            const steps = [style({opacity: 0}), animate(exp, style({opacity: 1}))];
+            return invokeAnimationSequence(rootElement, steps, options);
+          }
+
+          let players = makeAnimation('{{ duration }}', buildParams({duration: '1234ms'}));
+          expect(players[0].duration).toEqual(1234);
+
+          players = makeAnimation('{{ duration }}', buildParams({duration: '9s 2s'}));
+          expect(players[0].duration).toEqual(11000);
+
+          players = makeAnimation('{{ duration }} 1s', buildParams({duration: '1.5s'}));
+          expect(players[0].duration).toEqual(2500);
+
+          players = makeAnimation(
+              '{{ duration }} {{ delay }}', buildParams({duration: '1s', delay: '2s'}));
+          expect(players[0].duration).toEqual(3000);
+        });
+
+        it('should allow multiple substitutions to occur within the same style value', () => {
+          const steps = [
+            style({transform: ''}),
+            animate(1000, style({transform: 'translateX({{ x }}) translateY({{ y }})'}))
+          ];
+          const players =
+              invokeAnimationSequence(rootElement, steps, buildParams({x: '200px', y: '400px'}));
+          expect(players[0].keyframes).toEqual([
+            {offset: 0, transform: ''},
+            {offset: 1, transform: 'translateX(200px) translateY(400px)'}
+          ]);
+        });
+
+        it('should substitute in values that are defined as parameters for inner areas of a sequence',
+           () => {
+             const steps = sequence(
+                 [
+                   sequence(
+                       [
+                         sequence(
+                             [
+                               style({height: '{{ x0 }}px'}),
+                               animate(1000, style({height: '{{ x2 }}px'})),
+                             ],
+                             buildParams({x2: '{{ x1 }}3'})),
+                       ],
+                       buildParams({x1: '{{ x0 }}2'})),
+                 ],
+                 buildParams({x0: '1'}));
+
+             const players = invokeAnimationSequence(rootElement, steps);
+             expect(players.length).toEqual(1);
+             const [player] = players;
+             expect(player.keyframes).toEqual([
+               {offset: 0, height: '1px'}, {offset: 1, height: '123px'}
+             ]);
+           });
+
+        it('should substitute in values that are defined as parameters for reusable animations',
+           () => {
+             const anim = animation([
+               style({height: '{{ start }}'}),
+               animate(1000, style({height: '{{ end }}'})),
+             ]);
+
+             const steps = sequence(
+                 [
+                   sequence(
+                       [
+                         useAnimation(anim, buildParams({start: '{{ a }}', end: '{{ b }}'})),
+                       ],
+                       buildParams({a: '100px', b: '200px'})),
+                 ],
+                 buildParams({a: '0px'}));
+
+             const players = invokeAnimationSequence(rootElement, steps);
+             expect(players.length).toEqual(1);
+             const [player] = players;
+             expect(player.keyframes).toEqual([
+               {offset: 0, height: '100px'}, {offset: 1, height: '200px'}
+             ]);
+           });
+
+        it('should throw an error when an input variable is not provided when invoked and is not a default value',
+           () => {
+             expect(() => {invokeAnimationSequence(rootElement, [style({color: '{{ color }}'})])})
+                 .toThrowError(/Please provide a value for the animation param color/);
+
+             expect(
+                 () => {invokeAnimationSequence(
+                     rootElement,
+                     [
+                       style({color: '{{ start }}'}),
+                       animate('{{ time }}', style({color: '{{ end }}'})),
+                     ],
+                     buildParams({start: 'blue', end: 'red'}))})
+                 .toThrowError(/Please provide a value for the animation param time/);
+           });
       });
 
       describe('keyframes()', () => {
@@ -230,7 +451,7 @@ export function main() {
             animate(1000, style({height: 0, opacity: 0}))
           ];
 
-          const players = invokeAnimationSequence(steps);
+          const players = invokeAnimationSequence(rootElement, steps);
           expect(players.length).toEqual(3);
 
           const player0 = players[0];
@@ -267,7 +488,7 @@ export function main() {
                animate(1000, style({color: 'green', opacity: 0}))
              ];
 
-             const players = invokeAnimationSequence(steps);
+             const players = invokeAnimationSequence(rootElement, steps);
              const finalPlayer = players[players.length - 1];
              expect(finalPlayer.keyframes).toEqual([
                {opacity: 1, color: 'blue', offset: 0}, {opacity: 0, color: 'green', offset: 1}
@@ -283,7 +504,7 @@ export function main() {
                                                             ]))
              ];
 
-             const players = invokeAnimationSequence(steps);
+             const players = invokeAnimationSequence(rootElement, steps);
              expect(players.length).toEqual(2);
 
              const topPlayer = players[0];
@@ -305,7 +526,7 @@ export function main() {
                 keyframes([style({opacity: .8, offset: .5}), style({opacity: 1, offset: 1})]))
           ];
 
-          const player = invokeAnimationSequence(steps)[1];
+          const player = invokeAnimationSequence(rootElement, steps)[1];
           expect(player.easing).toEqual('ease-out');
         });
 
@@ -318,7 +539,7 @@ export function main() {
                    keyframes([style({opacity: .8, offset: .5}), style({opacity: 1, offset: 1})]))
              ];
 
-             const player = invokeAnimationSequence(steps)[1];
+             const player = invokeAnimationSequence(rootElement, steps)[1];
              expect(player.delay).toEqual(2500);
            });
 
@@ -343,7 +564,7 @@ export function main() {
                group([animate('2s', style({height: '500px', width: '500px'}))])
              ];
 
-             const players = invokeAnimationSequence(steps);
+             const players = invokeAnimationSequence(rootElement, steps);
              expect(players.length).toEqual(5);
 
              const firstPlayerKeyframes = players[0].keyframes;
@@ -381,7 +602,7 @@ export function main() {
                                   style({opacity: 1, offset: 1})
                                 ]));
 
-          const players = invokeAnimationSequence(steps);
+          const players = invokeAnimationSequence(rootElement, steps);
           expect(players.length).toEqual(1);
           const player = players[0];
 
@@ -398,7 +619,7 @@ export function main() {
                         {type: AnimationMetadataType.Style, offset: 1, styles: {opacity: 1}},
                       ]));
 
-          const players = invokeAnimationSequence(steps);
+          const players = invokeAnimationSequence(rootElement, steps);
           expect(players.length).toEqual(1);
           const player = players[0];
 
@@ -417,7 +638,7 @@ export function main() {
                animate(1000, style({width: 1000, height: 1000}))
              ];
 
-             const players = invokeAnimationSequence(steps);
+             const players = invokeAnimationSequence(rootElement, steps);
              expect(players.length).toEqual(4);
 
              const player0 = players[0];
@@ -460,7 +681,7 @@ export function main() {
             ])
           ])];
 
-          const players = invokeAnimationSequence(steps);
+          const players = invokeAnimationSequence(rootElement, steps);
           expect(players.length).toEqual(2);
 
           const gPlayer1 = players[0];
@@ -484,7 +705,7 @@ export function main() {
             animate('1s 1s', style({height: 200, width: 200}))
           ];
 
-          const players = invokeAnimationSequence(steps);
+          const players = invokeAnimationSequence(rootElement, steps);
           expect(players.length).toEqual(4);
 
           const finalPlayer = players[players.length - 1];
@@ -505,7 +726,7 @@ export function main() {
             animate(2000, style({width: 0, opacity: 0}))
           ];
 
-          const players = invokeAnimationSequence(steps);
+          const players = invokeAnimationSequence(rootElement, steps);
           const middlePlayer = players[2];
           expect(middlePlayer.delay).toEqual(2000);
           expect(middlePlayer.duration).toEqual(2000);
@@ -514,6 +735,97 @@ export function main() {
           expect(finalPlayer.delay).toEqual(6000);
           expect(finalPlayer.duration).toEqual(2000);
         });
+
+        it('should push the start of a group if a delay option is provided', () => {
+          const steps = [
+            style({width: '0px', height: '0px'}),
+            animate(1500, style({width: '100px', height: '100px'})),
+            group(
+                [
+                  animate(1000, style({width: '200px'})),
+                  animate(2000, style({height: '200px'})),
+                ],
+                {delay: 300})
+          ];
+
+          const players = invokeAnimationSequence(rootElement, steps);
+          const finalWidthPlayer = players[players.length - 2];
+          const finalHeightPlayer = players[players.length - 1];
+
+          expect(finalWidthPlayer.delay).toEqual(1800);
+          expect(finalWidthPlayer.keyframes).toEqual([
+            {width: '100px', offset: 0},
+            {width: '200px', offset: 1},
+          ]);
+
+          expect(finalHeightPlayer.delay).toEqual(1800);
+          expect(finalHeightPlayer.keyframes).toEqual([
+            {height: '100px', offset: 0},
+            {height: '200px', offset: 1},
+          ]);
+        });
+      });
+
+      describe('query()', () => {
+        it('should delay the query operation if a delay option is provided', () => {
+          const steps = [
+            style({opacity: 0}), animate(1000, style({opacity: 1})),
+            query(
+                'div',
+                [
+                  style({width: 0}),
+                  animate(500, style({width: 200})),
+                ],
+                {delay: 200})
+          ];
+
+          const players = invokeAnimationSequence(rootElement, steps);
+          const finalPlayer = players[players.length - 1];
+          expect(finalPlayer.delay).toEqual(1200);
+        });
+
+        it('should throw an error when an animation query returns zero elements', () => {
+          const steps =
+              [query('somethingFake', [style({opacity: 0}), animate(1000, style({opacity: 1}))])];
+
+          expect(() => { invokeAnimationSequence(rootElement, steps); })
+              .toThrowError(
+                  /`query\("somethingFake"\)` returned zero elements\. \(Use `query\("somethingFake", \{ optional: true \}\)` if you wish to allow this\.\)/);
+        });
+
+        it('should allow a query to be skipped if it is set as optional and returns zero elements',
+           () => {
+             const steps = [query(
+                 'somethingFake', [style({opacity: 0}), animate(1000, style({opacity: 1}))],
+                 {optional: true})];
+
+             expect(() => { invokeAnimationSequence(rootElement, steps); }).not.toThrow();
+
+             const steps2 = [query(
+                 'fakeSomethings', [style({opacity: 0}), animate(1000, style({opacity: 1}))],
+                 {optional: true})];
+
+             expect(() => { invokeAnimationSequence(rootElement, steps2); }).not.toThrow();
+           });
+
+        it('should delay the query operation if a delay option is provided', () => {
+          const steps = [
+            style({opacity: 0}), animate(1300, style({opacity: 1})),
+            query(
+                'div',
+                [
+                  style({width: 0}),
+                  animate(500, style({width: 200})),
+                ],
+                {delay: 300})
+          ];
+
+          const players = invokeAnimationSequence(rootElement, steps);
+          const fp1 = players[players.length - 2];
+          const fp2 = players[players.length - 1];
+          expect(fp1.delay).toEqual(1600);
+          expect(fp2.delay).toEqual(1600);
+        });
       });
 
       describe('timing values', () => {
@@ -522,7 +834,7 @@ export function main() {
              const steps: AnimationMetadata[] =
                  [style({opacity: 0}), animate('3s 1s ease-out', style({opacity: 1}))];
 
-             const player = invokeAnimationSequence(steps)[0];
+             const player = invokeAnimationSequence(rootElement, steps)[0];
              expect(player.keyframes).toEqual([
                {opacity: 0, offset: 0}, {opacity: 0, offset: .25, easing: 'ease-out'},
                {opacity: 1, offset: 1}
@@ -535,7 +847,7 @@ export function main() {
             animate('2s ease-out', style({width: 20})), animate('1s ease-in', style({width: 30}))
           ];
 
-          const players = invokeAnimationSequence(steps);
+          const players = invokeAnimationSequence(rootElement, steps);
           expect(players.length).toEqual(1);
 
           const player = players[0];
@@ -560,7 +872,7 @@ export function main() {
                ])
              ];
 
-             const player = invokeAnimationSequence(steps)[0];
+             const player = invokeAnimationSequence(rootElement, steps)[0];
              expect(player.duration).toEqual(1000);
              expect(player.delay).toEqual(0);
            });
@@ -579,7 +891,7 @@ export function main() {
                        ]))
              ];
 
-             const players = invokeAnimationSequence(steps);
+             const players = invokeAnimationSequence(rootElement, steps);
              expect(players[0].delay).toEqual(0);     // top-level animation
              expect(players[1].delay).toEqual(1500);  // first entry in group()
              expect(players[2].delay).toEqual(1500);  // second entry in group()
@@ -595,7 +907,7 @@ export function main() {
 
           const toStyles: ɵStyleData[] = [{background: 'red'}];
 
-          const player = invokeAnimationSequence(steps, fromStyles, toStyles)[0];
+          const player = invokeAnimationSequence(rootElement, steps, {}, fromStyles, toStyles)[0];
           expect(player.duration).toEqual(0);
           expect(player.keyframes).toEqual([]);
         });
@@ -608,7 +920,7 @@ export function main() {
 
              const toStyles: ɵStyleData[] = [{background: 'red'}];
 
-             const players = invokeAnimationSequence(steps, fromStyles, toStyles);
+             const players = invokeAnimationSequence(rootElement, steps, {}, fromStyles, toStyles);
              expect(players[0].keyframes).toEqual([
                {background: 'blue', height: 100, offset: 0},
                {background: 'red', height: AUTO_STYLE, offset: 1}
@@ -623,7 +935,7 @@ export function main() {
 
              const toStyles: ɵStyleData[] = [{background: 'red'}];
 
-             const players = invokeAnimationSequence(steps, fromStyles, toStyles);
+             const players = invokeAnimationSequence(rootElement, steps, {}, fromStyles, toStyles);
              expect(players[0].keyframes).toEqual([
                {background: 'blue', offset: 0, easing: 'ease-out'},
                {background: 'red', offset: 1}
@@ -642,16 +954,22 @@ function humanizeOffsets(keyframes: ɵStyleData[], digits: number = 3): ɵStyleD
 }
 
 function invokeAnimationSequence(
-    steps: AnimationMetadata | AnimationMetadata[], startingStyles: ɵStyleData[] = [],
-    destinationStyles: ɵStyleData[] = []): AnimationTimelineInstruction[] {
-  return new Animation(steps).buildTimelines(startingStyles, destinationStyles);
+    element: any, steps: AnimationMetadata | AnimationMetadata[], locals: {[key: string]: any} = {},
+    startingStyles: ɵStyleData[] = [], destinationStyles: ɵStyleData[] = [],
+    subInstructions?: ElementInstructionMap): AnimationTimelineInstruction[] {
+  const driver = new MockAnimationDriver();
+  return new Animation(driver, steps)
+      .buildTimelines(element, startingStyles, destinationStyles, locals, subInstructions);
 }
 
 function validateAndThrowAnimationSequence(steps: AnimationMetadata | AnimationMetadata[]) {
-  const ast =
-      Array.isArray(steps) ? sequence(<AnimationMetadata[]>steps) : <AnimationMetadata>steps;
-  const errors = validateAnimationSequence(ast);
+  const errors: any[] = [];
+  const ast = buildAnimationAst(steps, errors);
   if (errors.length) {
     throw new Error(errors.join('\n'));
   }
 }
+
+function buildParams(params: {[name: string]: any}): AnimationOptions {
+  return <AnimationOptions>{params};
+}
diff --git a/packages/animations/browser/test/dsl/animation_trigger_spec.ts b/packages/animations/browser/test/dsl/animation_trigger_spec.ts
index 4cc916114f..eeb200005f 100644
--- a/packages/animations/browser/test/dsl/animation_trigger_spec.ts
+++ b/packages/animations/browser/test/dsl/animation_trigger_spec.ts
@@ -6,17 +6,26 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {animate, state, style, transition, trigger} from '@angular/animations';
-import {buildTrigger} from '../../src/dsl/animation_trigger';
+import {AnimationOptions, animate, state, style, transition} from '@angular/animations';
+import {AnimationTransitionInstruction} from '@angular/animations/browser/src/dsl/animation_transition_instruction';
+import {AnimationTrigger} from '@angular/animations/browser/src/dsl/animation_trigger';
 
-function makeTrigger(name: string, steps: any) {
-  const triggerData = trigger(name, steps);
-  const triggerInstance = buildTrigger(triggerData.name, triggerData.definitions);
-  return triggerInstance;
-}
+import {MockAnimationDriver} from '../../testing';
+import {makeTrigger} from '../shared';
 
 export function main() {
   describe('AnimationTrigger', () => {
+    // these tests are only mean't to be run within the DOM (for now)
+    if (typeof Element == 'undefined') return;
+
+    let element: any;
+    beforeEach(() => {
+      element = document.createElement('div');
+      document.body.appendChild(element);
+    });
+
+    afterEach(() => { document.body.removeChild(element); });
+
     describe('trigger validation', () => {
       it('should group errors together for an animation trigger', () => {
         expect(() => {
@@ -64,7 +73,7 @@ export function main() {
         const result = makeTrigger(
             'name', [transition('a => b', animate(1234)), transition('b => c', animate(5678))]);
 
-        const trans = result.matchTransition('b', 'c') !;
+        const trans = buildTransition(result, element, 'b', 'c') !;
         expect(trans.timelines.length).toEqual(1);
         const timeline = trans.timelines[0];
         expect(timeline.duration).toEqual(5678);
@@ -76,99 +85,149 @@ export function main() {
           transition('* => *', animate(9999))
         ]);
 
-        let trans = result.matchTransition('b', 'c') !;
+        let trans = buildTransition(result, element, 'b', 'c') !;
         expect(trans.timelines[0].duration).toEqual(5678);
 
-        trans = result.matchTransition('a', 'b') !;
+        trans = buildTransition(result, element, 'a', 'b') !;
         expect(trans.timelines[0].duration).toEqual(1234);
 
-        trans = result.matchTransition('c', 'c') !;
+        trans = buildTransition(result, element, 'c', 'c') !;
         expect(trans.timelines[0].duration).toEqual(9999);
       });
 
       it('should null when no results are found', () => {
         const result = makeTrigger('name', [transition('a => b', animate(1111))]);
 
-        const trans = result.matchTransition('b', 'a');
-        expect(trans).toBeFalsy();
+        const trigger = result.matchTransition('b', 'a');
+        expect(trigger).toBeFalsy();
       });
 
-      it('should allow a function to be used as a predicate for the transition', () => {
-        let returnValue = false;
-
-        const result = makeTrigger('name', [transition((from, to) => returnValue, animate(1111))]);
-
-        expect(result.matchTransition('a', 'b')).toBeFalsy();
-        expect(result.matchTransition('1', 2)).toBeFalsy();
-        expect(result.matchTransition(false, true)).toBeFalsy();
-
-        returnValue = true;
-
-        expect(result.matchTransition('a', 'b')).toBeTruthy();
-      });
-
-      it('should call each transition predicate function until the first one that returns true',
-         () => {
-           let count = 0;
-
-           function countAndReturn(value: boolean) {
-             return (fromState: any, toState: any) => {
-               count++;
-               return value;
-             };
-           }
-
-           const result = makeTrigger('name', [
-             transition(countAndReturn(false), animate(1111)),
-             transition(countAndReturn(false), animate(2222)),
-             transition(countAndReturn(true), animate(3333)),
-             transition(countAndReturn(true), animate(3333))
-           ]);
-
-           const trans = result.matchTransition('a', 'b') !;
-           expect(trans.timelines[0].duration).toEqual(3333);
-
-           expect(count).toEqual(3);
-         });
-
       it('should support bi-directional transition expressions', () => {
         const result = makeTrigger('name', [transition('a <=> b', animate(2222))]);
 
-        const t1 = result.matchTransition('a', 'b') !;
+        const t1 = buildTransition(result, element, 'a', 'b') !;
         expect(t1.timelines[0].duration).toEqual(2222);
 
-        const t2 = result.matchTransition('b', 'a') !;
+        const t2 = buildTransition(result, element, 'b', 'a') !;
         expect(t2.timelines[0].duration).toEqual(2222);
       });
 
       it('should support multiple transition statements in one string', () => {
         const result = makeTrigger('name', [transition('a => b, b => a, c => *', animate(1234))]);
 
-        const t1 = result.matchTransition('a', 'b') !;
+        const t1 = buildTransition(result, element, 'a', 'b') !;
         expect(t1.timelines[0].duration).toEqual(1234);
 
-        const t2 = result.matchTransition('b', 'a') !;
+        const t2 = buildTransition(result, element, 'b', 'a') !;
         expect(t2.timelines[0].duration).toEqual(1234);
 
-        const t3 = result.matchTransition('c', 'a') !;
+        const t3 = buildTransition(result, element, 'c', 'a') !;
         expect(t3.timelines[0].duration).toEqual(1234);
       });
 
+      describe('params', () => {
+        it('should support transition-level animation variable params', () => {
+          const result = makeTrigger(
+              'name',
+              [transition(
+                  'a => b', [style({height: '{{ a }}'}), animate(1000, style({height: '{{ b }}'}))],
+                  buildParams({a: '100px', b: '200px'}))]);
+
+          const trans = buildTransition(result, element, 'a', 'b') !;
+          const keyframes = trans.timelines[0].keyframes;
+          expect(keyframes).toEqual([{height: '100px', offset: 0}, {height: '200px', offset: 1}]);
+        });
+
+        it('should subtitute variable params provided directly within the transition match', () => {
+          const result = makeTrigger(
+              'name',
+              [transition(
+                  'a => b', [style({height: '{{ a }}'}), animate(1000, style({height: '{{ b }}'}))],
+                  buildParams({a: '100px', b: '200px'}))]);
+
+          const trans = buildTransition(result, element, 'a', 'b', buildParams({a: '300px'})) !;
+
+          const keyframes = trans.timelines[0].keyframes;
+          expect(keyframes).toEqual([{height: '300px', offset: 0}, {height: '200px', offset: 1}]);
+        });
+      });
+
+      it('should match `true` and `false` given boolean values', () => {
+        const result = makeTrigger('name', [
+          state('false', style({color: 'red'})), state('true', style({color: 'green'})),
+          transition('true <=> false', animate(1234))
+        ]);
+
+        const trans = buildTransition(result, element, false, true) !;
+        expect(trans.timelines[0].duration).toEqual(1234);
+      });
+
+      it('should match `1` and `0` given boolean values', () => {
+        const result = makeTrigger('name', [
+          state('0', style({color: 'red'})), state('1', style({color: 'green'})),
+          transition('1 <=> 0', animate(4567))
+        ]);
+
+        const trans = buildTransition(result, element, false, true) !;
+        expect(trans.timelines[0].duration).toEqual(4567);
+      });
+
+      it('should match `true` and `false` state styles on a `1 <=> 0` boolean transition given boolean values',
+         () => {
+           const result = makeTrigger('name', [
+             state('false', style({color: 'red'})), state('true', style({color: 'green'})),
+             transition('1 <=> 0', animate(4567))
+           ]);
+
+           const trans = buildTransition(result, element, false, true) !;
+           expect(trans.timelines[0].keyframes).toEqual([
+             {offset: 0, color: 'red'}, {offset: 1, color: 'green'}
+           ])
+         });
+
+      it('should match `1` and `0` state styles on a `true <=> false` boolean transition given boolean values',
+         () => {
+           const result = makeTrigger('name', [
+             state('0', style({color: 'orange'})), state('1', style({color: 'blue'})),
+             transition('true <=> false', animate(4567))
+           ]);
+
+           const trans = buildTransition(result, element, false, true) !;
+           expect(trans.timelines[0].keyframes).toEqual([
+             {offset: 0, color: 'orange'}, {offset: 1, color: 'blue'}
+           ])
+         });
+
       describe('aliases', () => {
         it('should alias the :enter transition as void => *', () => {
           const result = makeTrigger('name', [transition(':enter', animate(3333))]);
 
-          const trans = result.matchTransition('void', 'something') !;
+          const trans = buildTransition(result, element, 'void', 'something') !;
           expect(trans.timelines[0].duration).toEqual(3333);
         });
 
         it('should alias the :leave transition as * => void', () => {
           const result = makeTrigger('name', [transition(':leave', animate(3333))]);
 
-          const trans = result.matchTransition('something', 'void') !;
+          const trans = buildTransition(result, element, 'something', 'void') !;
           expect(trans.timelines[0].duration).toEqual(3333);
         });
       });
     });
   });
 }
+
+function buildTransition(
+    trigger: AnimationTrigger, element: any, fromState: any, toState: any,
+    params?: AnimationOptions): AnimationTransitionInstruction|null {
+  const trans = trigger.matchTransition(fromState, toState) !;
+  if (trans) {
+    const driver = new MockAnimationDriver();
+    return trans.build(driver, element, fromState, toState, params) !;
+  }
+  return null;
+}
+
+function buildParams(params: {[name: string]: any}): AnimationOptions {
+  return <AnimationOptions>{params};
+}
diff --git a/packages/animations/browser/test/dsl/style_normalizer/web_animations_style_normalizer_spec.ts b/packages/animations/browser/test/dsl/style_normalizer/web_animations_style_normalizer_spec.ts
index 98e4ff63c5..37d80efb83 100644
--- a/packages/animations/browser/test/dsl/style_normalizer/web_animations_style_normalizer_spec.ts
+++ b/packages/animations/browser/test/dsl/style_normalizer/web_animations_style_normalizer_spec.ts
@@ -59,6 +59,12 @@ export function main() {
            expect(normalize('borderWidth', 'inherit')).toEqual('inherit');
            expect(normalize('paddingTop', 'calc(500px + 200px)')).toEqual('calc(500px + 200px)');
          });
+
+      it('should allow `perspective` to be a numerical property', () => {
+        expect(normalize('perspective', 10)).toEqual('10px');
+        expect(normalize('perspective', '100pt')).toEqual('100pt');
+        expect(normalize('perspective', 'none')).toEqual('none');
+      });
     });
   });
 }
diff --git a/packages/animations/browser/test/render/timeline_animation_engine_spec.ts b/packages/animations/browser/test/render/timeline_animation_engine_spec.ts
new file mode 100644
index 0000000000..025045b01f
--- /dev/null
+++ b/packages/animations/browser/test/render/timeline_animation_engine_spec.ts
@@ -0,0 +1,121 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AnimationMetadata, animate, style} from '@angular/animations';
+
+import {AnimationStyleNormalizer, NoopAnimationStyleNormalizer} from '../../src/dsl/style_normalization/animation_style_normalizer';
+import {AnimationDriver} from '../../src/render/animation_driver';
+import {TimelineAnimationEngine} from '../../src/render/timeline_animation_engine';
+import {MockAnimationDriver, MockAnimationPlayer} from '../../testing/src/mock_animation_driver';
+
+export function main() {
+  const defaultDriver = new MockAnimationDriver();
+
+  function makeEngine(driver?: AnimationDriver, normalizer?: AnimationStyleNormalizer) {
+    return new TimelineAnimationEngine(
+        driver || defaultDriver, normalizer || new NoopAnimationStyleNormalizer());
+  }
+
+  // these tests are only mean't to be run within the DOM
+  if (typeof Element == 'undefined') return;
+
+  describe('TimelineAnimationEngine', () => {
+    let element: any;
+
+    beforeEach(() => {
+      MockAnimationDriver.log = [];
+      element = document.createElement('div');
+      document.body.appendChild(element);
+    });
+
+    afterEach(() => document.body.removeChild(element));
+
+    it('should animate a timeline', () => {
+      const engine = makeEngine();
+      const steps = [style({height: 100}), animate(1000, style({height: 0}))];
+      expect(MockAnimationDriver.log.length).toEqual(0);
+      invokeAnimation(engine, element, steps);
+      expect(MockAnimationDriver.log.length).toEqual(1);
+    });
+
+    it('should not destroy timeline-based animations after they have finished', () => {
+      const engine = makeEngine();
+
+      const log: string[] = [];
+      function capture(value: string) {
+        return () => { log.push(value); };
+      }
+
+      const steps = [style({height: 0}), animate(1000, style({height: 500}))];
+
+      const player = invokeAnimation(engine, element, steps);
+      player.onDone(capture('done'));
+      player.onDestroy(capture('destroy'));
+      expect(log).toEqual([]);
+
+      player.finish();
+      expect(log).toEqual(['done']);
+
+      player.destroy();
+      expect(log).toEqual(['done', 'destroy']);
+    });
+
+    it('should normalize the style values that are animateTransitioned within an a timeline animation',
+       () => {
+         const engine = makeEngine(defaultDriver, new SuffixNormalizer('-normalized'));
+
+         const steps = [
+           style({width: '333px'}),
+           animate(1000, style({width: '999px'})),
+         ];
+
+         const player = invokeAnimation(engine, element, steps) as MockAnimationPlayer;
+         expect(player.keyframes).toEqual([
+           {'width-normalized': '333px-normalized', offset: 0},
+           {'width-normalized': '999px-normalized', offset: 1}
+         ]);
+       });
+
+    it('should normalize `*` values', () => {
+      const driver = new SuperMockDriver();
+      const engine = makeEngine(driver);
+
+      const steps = [
+        style({width: '*'}),
+        animate(1000, style({width: '999px'})),
+      ];
+
+      const player = invokeAnimation(engine, element, steps) as MockAnimationPlayer;
+      expect(player.keyframes).toEqual([{width: '*star*', offset: 0}, {width: '999px', offset: 1}]);
+    });
+  });
+}
+
+function invokeAnimation(
+    engine: TimelineAnimationEngine, element: any, steps: AnimationMetadata | AnimationMetadata[],
+    id: string = 'id') {
+  engine.register(id, steps);
+  return engine.create(id, element);
+}
+
+class SuffixNormalizer extends AnimationStyleNormalizer {
+  constructor(private _suffix: string) { super(); }
+
+  normalizePropertyName(propertyName: string, errors: string[]): string {
+    return propertyName + this._suffix;
+  }
+
+  normalizeStyleValue(
+      userProvidedProperty: string, normalizedProperty: string, value: string|number,
+      errors: string[]): string {
+    return value + this._suffix;
+  }
+}
+
+class SuperMockDriver extends MockAnimationDriver {
+  computeStyle(element: any, prop: string, defaultValue?: string): string { return '*star*'; }
+}
diff --git a/packages/animations/browser/test/engine/dom_animation_engine_spec.ts b/packages/animations/browser/test/render/transition_animation_engine_spec.ts
similarity index 53%
rename from packages/animations/browser/test/engine/dom_animation_engine_spec.ts
rename to packages/animations/browser/test/render/transition_animation_engine_spec.ts
index 9647d2cd30..3770fb8cd5 100644
--- a/packages/animations/browser/test/engine/dom_animation_engine_spec.ts
+++ b/packages/animations/browser/test/render/transition_animation_engine_spec.ts
@@ -5,20 +5,16 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AnimationEvent, NoopAnimationPlayer, animate, keyframes, state, style, transition, trigger} from '@angular/animations';
-import {el} from '@angular/platform-browser/testing/src/browser_util';
+import {AnimationEvent, AnimationMetadata, AnimationTriggerMetadata, NoopAnimationPlayer, animate, state, style, transition, trigger} from '@angular/animations';
 
-import {buildAnimationKeyframes} from '../../src/dsl/animation_timeline_visitor';
+import {TriggerAst} from '../../src/dsl/animation_ast';
+import {buildAnimationAst} from '../../src/dsl/animation_ast_builder';
 import {buildTrigger} from '../../src/dsl/animation_trigger';
 import {AnimationStyleNormalizer, NoopAnimationStyleNormalizer} from '../../src/dsl/style_normalization/animation_style_normalizer';
-import {DomAnimationEngine} from '../../src/render/dom_animation_engine';
+import {TransitionAnimationEngine} from '../../src/render/transition_animation_engine';
 import {MockAnimationDriver, MockAnimationPlayer} from '../../testing/src/mock_animation_driver';
 
-function makeTrigger(name: string, steps: any) {
-  const triggerData = trigger(name, steps);
-  const triggerInstance = buildTrigger(triggerData.name, triggerData.definitions);
-  return triggerInstance;
-}
+const DEFAULT_NAMESPACE_ID = 'id';
 
 export function main() {
   const driver = new MockAnimationDriver();
@@ -26,39 +22,44 @@ export function main() {
   // these tests are only mean't to be run within the DOM
   if (typeof Element == 'undefined') return;
 
-  describe('DomAnimationEngine', () => {
+  describe('TransitionAnimationEngine', () => {
     let element: any;
 
     beforeEach(() => {
       MockAnimationDriver.log = [];
-      element = el('<div></div>');
+      element = document.createElement('div');
+      document.body.appendChild(element);
     });
 
+    afterEach(() => { document.body.removeChild(element); });
+
     function makeEngine(normalizer?: AnimationStyleNormalizer) {
-      return new DomAnimationEngine(driver, normalizer || new NoopAnimationStyleNormalizer());
+      const engine =
+          new TransitionAnimationEngine(driver, normalizer || new NoopAnimationStyleNormalizer());
+      engine.createNamespace(DEFAULT_NAMESPACE_ID, element);
+      return engine;
     }
 
     describe('trigger registration', () => {
       it('should ignore and not throw an error if the same trigger is registered twice', () => {
+        // TODO (matsko): ask why this is avoided
         const engine = makeEngine();
-        engine.registerTrigger(trigger('trig', []));
-        expect(() => { engine.registerTrigger(trigger('trig', [])); }).not.toThrow();
+        registerTrigger(element, engine, trigger('trig', []));
+        expect(() => { registerTrigger(element, engine, trigger('trig', [])); }).not.toThrow();
       });
     });
 
     describe('property setting', () => {
       it('should invoke a transition based on a property change', () => {
         const engine = makeEngine();
-
         const trig = trigger('myTrigger', [
           transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
         ]);
 
-        engine.registerTrigger(trig);
-
-        expect(engine.queuedPlayers.length).toEqual(0);
-        engine.setProperty(element, 'myTrigger', 'value');
-        expect(engine.queuedPlayers.length).toEqual(1);
+        registerTrigger(element, engine, trig);
+        setProperty(element, engine, 'myTrigger', 'value');
+        engine.flush();
+        expect(engine.players.length).toEqual(1);
 
         const player = MockAnimationDriver.log.pop() as MockAnimationPlayer;
         expect(player.keyframes).toEqual([
@@ -66,43 +67,6 @@ export function main() {
         ]);
       });
 
-      it('should always invoke an animation even if the property change is not matched', () => {
-        const engine = makeEngine();
-
-        const trig = trigger(
-            'myTrigger',
-            [transition(
-                'yes => no', [style({height: '0px'}), animate(1000, style({height: '100px'}))])]);
-
-        engine.registerTrigger(trig);
-        expect(engine.queuedPlayers.length).toEqual(0);
-
-        engine.setProperty(element, 'myTrigger', 'no');
-        expect(engine.queuedPlayers.length).toEqual(1);
-        expect(engine.queuedPlayers.pop() instanceof NoopAnimationPlayer).toBe(true);
-        engine.flush();
-
-        engine.setProperty(element, 'myTrigger', 'yes');
-        expect(engine.queuedPlayers.length).toEqual(1);
-        expect(engine.queuedPlayers.pop() instanceof NoopAnimationPlayer).toBe(true);
-      });
-
-      it('should not initialize the animation until the engine has been flushed', () => {
-        const engine = makeEngine();
-        engine.registerTrigger(trigger(
-            'trig', [transition('* => something', [animate(1000, style({color: 'gold'}))])]));
-
-        engine.setProperty(element, 'trig', 'something');
-        const player = engine.queuedPlayers.pop() as MockAnimationPlayer;
-
-        let initialized = false;
-        player.onInit(() => initialized = true);
-
-        expect(initialized).toBe(false);
-        engine.flush();
-        expect(initialized).toBe(true);
-      });
-
       it('should not queue an animation if the property value has not changed at all', () => {
         const engine = makeEngine();
 
@@ -110,25 +74,71 @@ export function main() {
           transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
         ]);
 
-        engine.registerTrigger(trig);
-        expect(engine.queuedPlayers.length).toEqual(0);
+        registerTrigger(element, engine, trig);
+        engine.flush();
+        expect(engine.players.length).toEqual(0);
 
-        engine.setProperty(element, 'myTrigger', 'abc');
-        expect(engine.queuedPlayers.length).toEqual(1);
+        setProperty(element, engine, 'myTrigger', 'abc');
+        engine.flush();
+        expect(engine.players.length).toEqual(1);
 
-        engine.setProperty(element, 'myTrigger', 'abc');
-        expect(engine.queuedPlayers.length).toEqual(1);
+        setProperty(element, engine, 'myTrigger', 'abc');
+        engine.flush();
+        expect(engine.players.length).toEqual(1);
       });
 
       it('should throw an error if an animation property without a matching trigger is changed',
          () => {
            const engine = makeEngine();
            expect(() => {
-             engine.setProperty(element, 'myTrigger', 'no');
+             setProperty(element, engine, 'myTrigger', 'no');
            }).toThrowError(/The provided animation trigger "myTrigger" has not been registered!/);
          });
     });
 
+    describe('removal operations', () => {
+      it('should cleanup all inner state that\'s tied to an element once removed', () => {
+        const engine = makeEngine();
+
+        const trig = trigger('myTrigger', [
+          transition(':leave', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
+        ]);
+
+        registerTrigger(element, engine, trig);
+        setProperty(element, engine, 'myTrigger', 'value');
+        engine.flush();
+
+        expect(engine.elementContainsData(DEFAULT_NAMESPACE_ID, element)).toBeTruthy();
+
+        engine.removeNode(DEFAULT_NAMESPACE_ID, element, true);
+        engine.flush();
+
+        expect(engine.elementContainsData(DEFAULT_NAMESPACE_ID, element)).toBeTruthy();
+      });
+
+      it('should create and recreate a namespace for a host element with the same component source',
+         () => {
+           const engine = makeEngine();
+
+           const trig =
+               trigger('myTrigger', [transition('* => *', animate(1234, style({color: 'red'})))]);
+
+           registerTrigger(element, engine, trig);
+           setProperty(element, engine, 'myTrigger', 'value');
+           engine.flush();
+           expect((engine.players[0].getRealPlayer() as MockAnimationPlayer).duration)
+               .toEqual(1234);
+
+           engine.destroy(DEFAULT_NAMESPACE_ID, null);
+
+           registerTrigger(element, engine, trig);
+           setProperty(element, engine, 'myTrigger', 'value2');
+           engine.flush();
+           expect((engine.players[0].getRealPlayer() as MockAnimationPlayer).duration)
+               .toEqual(1234);
+         });
+    });
+
     describe('event listeners', () => {
       it('should listen to the onStart operation for the animation', () => {
         const engine = makeEngine();
@@ -138,9 +148,9 @@ export function main() {
         ]);
 
         let count = 0;
-        engine.registerTrigger(trig);
-        engine.listen(element, 'myTrigger', 'start', () => count++);
-        engine.setProperty(element, 'myTrigger', 'value');
+        registerTrigger(element, engine, trig);
+        listen(element, engine, 'myTrigger', 'start', () => count++);
+        setProperty(element, engine, 'myTrigger', 'value');
         expect(count).toEqual(0);
 
         engine.flush();
@@ -155,33 +165,31 @@ export function main() {
         ]);
 
         let count = 0;
-        engine.registerTrigger(trig);
-        engine.listen(element, 'myTrigger', 'done', () => count++);
-        engine.setProperty(element, 'myTrigger', 'value');
+        registerTrigger(element, engine, trig);
+        listen(element, engine, 'myTrigger', 'done', () => count++);
+        setProperty(element, engine, 'myTrigger', 'value');
         expect(count).toEqual(0);
 
         engine.flush();
         expect(count).toEqual(0);
 
-        const player = engine.activePlayers.pop() !;
-        player.finish();
-
+        engine.players[0].finish();
         expect(count).toEqual(1);
       });
 
       it('should throw an error when an event is listened to that isn\'t supported', () => {
         const engine = makeEngine();
         const trig = trigger('myTrigger', []);
-        engine.registerTrigger(trig);
+        registerTrigger(element, engine, trig);
 
-        expect(() => { engine.listen(element, 'myTrigger', 'explode', () => {}); })
+        expect(() => { listen(element, engine, 'myTrigger', 'explode', () => {}); })
             .toThrowError(
                 /The provided animation trigger event "explode" for the animation trigger "myTrigger" is not supported!/);
       });
 
       it('should throw an error when an event is listened for a trigger that doesn\'t exist', () => {
         const engine = makeEngine();
-        expect(() => { engine.listen(element, 'myTrigger', 'explode', () => {}); })
+        expect(() => { listen(element, engine, 'myTrigger', 'explode', () => {}); })
             .toThrowError(
                 /Unable to listen on the animation trigger event "explode" because the animation trigger "myTrigger" doesn\'t exist!/);
       });
@@ -189,13 +197,13 @@ export function main() {
       it('should throw an error when an undefined event is listened for', () => {
         const engine = makeEngine();
         const trig = trigger('myTrigger', []);
-        engine.registerTrigger(trig);
-        expect(() => { engine.listen(element, 'myTrigger', '', () => {}); })
+        registerTrigger(element, engine, trig);
+        expect(() => { listen(element, engine, 'myTrigger', '', () => {}); })
             .toThrowError(
                 /Unable to listen on the animation trigger "myTrigger" because the provided event is undefined!/);
       });
 
-      it('should retain event listeners and call them for sucessive animation state changes',
+      it('should retain event listeners and call them for successive animation state changes',
          () => {
            const engine = makeEngine();
            const trig = trigger(
@@ -203,16 +211,16 @@ export function main() {
                [transition(
                    '* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])]);
 
-           engine.registerTrigger(trig);
+           registerTrigger(element, engine, trig);
 
            let count = 0;
-           engine.listen(element, 'myTrigger', 'start', () => count++);
+           listen(element, engine, 'myTrigger', 'start', () => count++);
 
-           engine.setProperty(element, 'myTrigger', '123');
+           setProperty(element, engine, 'myTrigger', '123');
            engine.flush();
            expect(count).toEqual(1);
 
-           engine.setProperty(element, 'myTrigger', '456');
+           setProperty(element, engine, 'myTrigger', '456');
            engine.flush();
            expect(count).toEqual(2);
          });
@@ -224,63 +232,67 @@ export function main() {
                'myTrigger1',
                [transition(
                    '* => 123', [style({height: '0px'}), animate(1000, style({height: '100px'}))])]);
-           engine.registerTrigger(trig1);
+           registerTrigger(element, engine, trig1);
 
            const trig2 = trigger(
                'myTrigger2',
                [transition(
                    '* => 123', [style({width: '0px'}), animate(1000, style({width: '100px'}))])]);
-           engine.registerTrigger(trig2);
+           registerTrigger(element, engine, trig2);
 
            let count = 0;
-           engine.listen(element, 'myTrigger1', 'start', () => count++);
+           listen(element, engine, 'myTrigger1', 'start', () => count++);
 
-           engine.setProperty(element, 'myTrigger1', '123');
+           setProperty(element, engine, 'myTrigger1', '123');
            engine.flush();
            expect(count).toEqual(1);
 
-           engine.setProperty(element, 'myTrigger2', '123');
+           setProperty(element, engine, 'myTrigger2', '123');
            engine.flush();
            expect(count).toEqual(1);
          });
 
-      it('should allow a listener to be deregistered', () => {
+      it('should allow a listener to be deregistered, but only after a flush occurs', () => {
         const engine = makeEngine();
         const trig = trigger(
             'myTrigger',
             [transition(
                 '* => 123', [style({height: '0px'}), animate(1000, style({height: '100px'}))])]);
-        engine.registerTrigger(trig);
+        registerTrigger(element, engine, trig);
 
         let count = 0;
-        const deregisterFn = engine.listen(element, 'myTrigger', 'start', () => count++);
-        engine.setProperty(element, 'myTrigger', '123');
+        const deregisterFn = listen(element, engine, 'myTrigger', 'start', () => count++);
+        setProperty(element, engine, 'myTrigger', '123');
         engine.flush();
         expect(count).toEqual(1);
 
         deregisterFn();
-        engine.setProperty(element, 'myTrigger', '456');
+        engine.flush();
+
+        setProperty(element, engine, 'myTrigger', '456');
         engine.flush();
         expect(count).toEqual(1);
       });
 
       it('should trigger a listener callback with an AnimationEvent argument', () => {
         const engine = makeEngine();
-        engine.registerTrigger(trigger(
-            'myTrigger',
-            [transition(
-                '* => *', [style({height: '0px'}), animate(1234, style({height: '100px'}))])]));
+        registerTrigger(
+            element, engine, trigger('myTrigger', [
+              transition(
+                  '* => *', [style({height: '0px'}), animate(1234, style({height: '100px'}))])
+            ]));
 
-        // we do this so that the next transition has a starting value that isnt null
-        engine.setProperty(element, 'myTrigger', '123');
+        // we do this so that the next transition has a starting value that isn't null
+        setProperty(element, engine, 'myTrigger', '123');
         engine.flush();
 
         let capture: AnimationEvent = null !;
-        engine.listen(element, 'myTrigger', 'start', (e) => capture = e);
-        engine.listen(element, 'myTrigger', 'done', (e) => capture = e);
-        engine.setProperty(element, 'myTrigger', '456');
+        listen(element, engine, 'myTrigger', 'start', e => capture = e);
+        listen(element, engine, 'myTrigger', 'done', e => capture = e);
+        setProperty(element, engine, 'myTrigger', '456');
         engine.flush();
 
+        delete (capture as any)['_data'];
         expect(capture).toEqual({
           element,
           triggerName: 'myTrigger',
@@ -291,9 +303,10 @@ export function main() {
         });
 
         capture = null !;
-        const player = engine.activePlayers.pop() !;
+        const player = engine.players.pop() !;
         player.finish();
 
+        delete (capture as any)['_data'];
         expect(capture).toEqual({
           element,
           triggerName: 'myTrigger',
@@ -305,102 +318,46 @@ export function main() {
       });
     });
 
-    describe('instructions', () => {
-      it('should animate a transition instruction', () => {
-        const engine = makeEngine();
-
-        const trig = makeTrigger('something', [
-          state('on', style({height: 100})), state('off', style({height: 0})),
-          transition('on => off', animate(9876))
-        ]);
-
-        const instruction = trig.matchTransition('on', 'off') !;
-
-        expect(MockAnimationDriver.log.length).toEqual(0);
-        engine.animateTransition(element, instruction);
-        expect(MockAnimationDriver.log.length).toEqual(1);
-      });
-
-      it('should animate a timeline instruction', () => {
-        const engine = makeEngine();
-        const timelines =
-            buildAnimationKeyframes([style({height: 100}), animate(1000, style({height: 0}))]);
-        expect(MockAnimationDriver.log.length).toEqual(0);
-        engine.animateTimeline(element, timelines);
-        expect(MockAnimationDriver.log.length).toEqual(1);
-      });
-
-      it('should animate an array of animation instructions', () => {
-        const engine = makeEngine();
-
-        const instructions = buildAnimationKeyframes([
-          style({height: 100}), animate(1000, style({height: 0})),
-          animate(1000, keyframes([style({width: 0}), style({width: 1000})]))
-        ]);
-
-        expect(MockAnimationDriver.log.length).toEqual(0);
-        engine.animateTimeline(element, instructions);
-        expect(MockAnimationDriver.log.length).toBeGreaterThan(0);
-      });
-    });
-
-    describe('removals / insertions', () => {
-      it('should allow text nodes to be removed through the engine', () => {
-        const engine = makeEngine();
-        const node = document.createTextNode('hello');
-        element.appendChild(node);
-
-        let called = false;
-        engine.onRemove(node, () => called = true);
-
-        expect(called).toBeTruthy();
-      });
-
-      it('should allow text nodes to be inserted through the engine', () => {
-        const engine = makeEngine();
-        const node = document.createTextNode('hello');
-
-        let called = false;
-        engine.onInsert(node, () => called = true);
-
-        expect(called).toBeTruthy();
-      });
-    });
-
     describe('transition operations', () => {
       it('should persist the styles on the element as actual styles once the animation is complete',
          () => {
            const engine = makeEngine();
-           const trig = makeTrigger('something', [
+           const trig = trigger('something', [
              state('on', style({height: '100px'})), state('off', style({height: '0px'})),
              transition('on => off', animate(9876))
            ]);
 
-           const instruction = trig.matchTransition('on', 'off') !;
-           const player = engine.animateTransition(element, instruction);
+           registerTrigger(element, engine, trig);
+           setProperty(element, engine, trig.name, 'on');
+           setProperty(element, engine, trig.name, 'off');
+           engine.flush();
 
            expect(element.style.height).not.toEqual('0px');
-           player.finish();
+           engine.players[0].finish();
            expect(element.style.height).toEqual('0px');
          });
 
       it('should remove all existing state styling from an element when a follow-up transition occurs on the same trigger',
          () => {
            const engine = makeEngine();
-           const trig = makeTrigger('something', [
+           const trig = trigger('something', [
              state('a', style({height: '100px'})), state('b', style({height: '500px'})),
              state('c', style({width: '200px'})), transition('* => *', animate(9876))
            ]);
 
-           const instruction1 = trig.matchTransition('a', 'b') !;
-           const player1 = engine.animateTransition(element, instruction1);
+           registerTrigger(element, engine, trig);
+           setProperty(element, engine, trig.name, 'a');
+           setProperty(element, engine, trig.name, 'b');
+           engine.flush();
 
+           const player1 = engine.players[0];
            player1.finish();
            expect(element.style.height).toEqual('500px');
 
-           const instruction2 = trig.matchTransition('b', 'c') !;
-           const player2 = engine.animateTransition(element, instruction2);
+           setProperty(element, engine, trig.name, 'c');
+           engine.flush();
 
+           const player2 = engine.players[0];
            expect(element.style.height).not.toEqual('500px');
            player2.finish();
            expect(element.style.width).toEqual('200px');
@@ -410,26 +367,33 @@ export function main() {
       it('should allow two animation transitions with different triggers to animate in parallel',
          () => {
            const engine = makeEngine();
-           const trig1 = makeTrigger('something1', [
+           const trig1 = trigger('something1', [
              state('a', style({width: '100px'})), state('b', style({width: '200px'})),
              transition('* => *', animate(1000))
            ]);
 
-           const trig2 = makeTrigger('something2', [
+           const trig2 = trigger('something2', [
              state('x', style({height: '500px'})), state('y', style({height: '1000px'})),
              transition('* => *', animate(2000))
            ]);
 
+           registerTrigger(element, engine, trig1);
+           registerTrigger(element, engine, trig2);
+
            let doneCount = 0;
            function doneCallback() { doneCount++; }
 
-           const instruction1 = trig1.matchTransition('a', 'b') !;
-           const instruction2 = trig2.matchTransition('x', 'y') !;
-           const player1 = engine.animateTransition(element, instruction1);
+           setProperty(element, engine, trig1.name, 'a');
+           setProperty(element, engine, trig1.name, 'b');
+           setProperty(element, engine, trig2.name, 'x');
+           setProperty(element, engine, trig2.name, 'y');
+           engine.flush();
+
+           const player1 = engine.players[0] !;
            player1.onDone(doneCallback);
            expect(doneCount).toEqual(0);
 
-           const player2 = engine.animateTransition(element, instruction2);
+           const player2 = engine.players[1] !;
            player2.onDone(doneCallback);
            expect(doneCount).toEqual(0);
 
@@ -446,18 +410,23 @@ export function main() {
       it('should cancel a previously running animation when a follow-up transition kicks off on the same trigger',
          () => {
            const engine = makeEngine();
-           const trig = makeTrigger('something', [
+           const trig = trigger('something', [
              state('x', style({opacity: 0})), state('y', style({opacity: .5})),
              state('z', style({opacity: 1})), transition('* => *', animate(1000))
            ]);
 
-           const instruction1 = trig.matchTransition('x', 'y') !;
-           const instruction2 = trig.matchTransition('y', 'z') !;
+           registerTrigger(element, engine, trig);
+           setProperty(element, engine, trig.name, 'x');
+           setProperty(element, engine, trig.name, 'y');
+           engine.flush();
 
            expect(parseFloat(element.style.opacity)).not.toEqual(.5);
 
-           const player1 = engine.animateTransition(element, instruction1);
-           const player2 = engine.animateTransition(element, instruction2);
+           const player1 = engine.players[0];
+           setProperty(element, engine, trig.name, 'z');
+           engine.flush();
+
+           const player2 = engine.players[0];
 
            expect(parseFloat(element.style.opacity)).toEqual(.5);
 
@@ -471,65 +440,73 @@ export function main() {
       it('should pass in the previously running players into the follow-up transition player when cancelled',
          () => {
            const engine = makeEngine();
-           const trig = makeTrigger('something', [
+           const trig = trigger('something', [
              state('x', style({opacity: 0})), state('y', style({opacity: .5})),
              state('z', style({opacity: 1})), transition('* => *', animate(1000))
            ]);
 
-           const instruction1 = trig.matchTransition('x', 'y') !;
-           const instruction2 = trig.matchTransition('y', 'z') !;
-           const instruction3 = trig.matchTransition('z', 'x') !;
-
-           const player1 = engine.animateTransition(element, instruction1);
+           registerTrigger(element, engine, trig);
+           setProperty(element, engine, trig.name, 'x');
+           setProperty(element, engine, trig.name, 'y');
            engine.flush();
+
+           const player1 = MockAnimationDriver.log.pop() !as MockAnimationPlayer;
            player1.setPosition(0.5);
 
-           const player2 = <MockAnimationPlayer>engine.animateTransition(element, instruction2);
+           setProperty(element, engine, trig.name, 'z');
+           engine.flush();
+
+           const player2 = MockAnimationDriver.log.pop() !as MockAnimationPlayer;
            expect(player2.previousPlayers).toEqual([player1]);
            player2.finish();
 
-           const player3 = <MockAnimationPlayer>engine.animateTransition(element, instruction3);
+           setProperty(element, engine, trig.name, 'x');
+           engine.flush();
+
+           const player3 = MockAnimationDriver.log.pop() !as MockAnimationPlayer;
            expect(player3.previousPlayers).toEqual([]);
          });
 
       it('should cancel all existing players if a removal animation is set to occur', () => {
         const engine = makeEngine();
-        const trig = makeTrigger('something', [
+        const trig = trigger('something', [
           state('m', style({opacity: 0})), state('n', style({opacity: 1})),
           transition('* => *', animate(1000))
         ]);
 
+        registerTrigger(element, engine, trig);
+        setProperty(element, engine, trig.name, 'm');
+        setProperty(element, engine, trig.name, 'n');
+        engine.flush();
+
         let doneCount = 0;
         function doneCallback() { doneCount++; }
 
-        const instruction1 = trig.matchTransition('m', 'n') !;
-        const instructions2 =
-            buildAnimationKeyframes([style({height: 0}), animate(1000, style({height: 100}))]) !;
-        const instruction3 = trig.matchTransition('n', 'void') !;
-
-        const player1 = engine.animateTransition(element, instruction1);
+        const player1 = engine.players[0];
         player1.onDone(doneCallback);
 
-        const player2 = engine.animateTimeline(element, instructions2);
-        player2.onDone(doneCallback);
-
-        engine.flush();
         expect(doneCount).toEqual(0);
 
-        const player3 = engine.animateTransition(element, instruction3);
-        expect(doneCount).toEqual(2);
+        setProperty(element, engine, trig.name, 'void');
+        engine.flush();
+
+        expect(doneCount).toEqual(1);
       });
 
       it('should only persist styles that exist in the final state styles and not the last keyframe',
          () => {
            const engine = makeEngine();
-           const trig = makeTrigger('something', [
+           const trig = trigger('something', [
              state('0', style({width: '0px'})), state('1', style({width: '100px'})),
              transition('* => *', [animate(1000, style({height: '200px'}))])
            ]);
 
-           const instruction = trig.matchTransition('0', '1') !;
-           const player = engine.animateTransition(element, instruction);
+           registerTrigger(element, engine, trig);
+           setProperty(element, engine, trig.name, '0');
+           setProperty(element, engine, trig.name, '1');
+           engine.flush();
+
+           const player = engine.players[0] !;
            expect(element.style.width).not.toEqual('100px');
 
            player.finish();
@@ -540,104 +517,74 @@ export function main() {
       it('should default to using styling from the `*` state if a matching state is not found',
          () => {
            const engine = makeEngine();
-           const trig = makeTrigger('something', [
+           const trig = trigger('something', [
              state('a', style({opacity: 0})), state('*', style({opacity: .5})),
              transition('* => *', animate(1000))
            ]);
 
-           const instruction = trig.matchTransition('a', 'z') !;
-           engine.animateTransition(element, instruction).finish();
+           registerTrigger(element, engine, trig);
+           setProperty(element, engine, trig.name, 'a');
+           setProperty(element, engine, trig.name, 'z');
+           engine.flush();
 
+           engine.players[0].finish();
            expect(parseFloat(element.style.opacity)).toEqual(.5);
          });
 
       it('should treat `void` as `void`', () => {
         const engine = makeEngine();
-        const trig = makeTrigger('something', [
+        const trig = trigger('something', [
           state('a', style({opacity: 0})), state('void', style({opacity: .8})),
           transition('* => *', animate(1000))
         ]);
 
-        const instruction = trig.matchTransition('a', 'void') !;
-        engine.animateTransition(element, instruction).finish();
+        registerTrigger(element, engine, trig);
+        setProperty(element, engine, trig.name, 'a');
+        setProperty(element, engine, trig.name, 'void');
+        engine.flush();
 
+        engine.players[0].finish();
         expect(parseFloat(element.style.opacity)).toEqual(.8);
       });
     });
 
-    describe('timeline operations', () => {
-      it('should not destroy timeline-based animations after they have finished', () => {
-        const engine = makeEngine();
-
-        const log: string[] = [];
-        function capture(value: string) {
-          return () => { log.push(value); };
-        }
-
-        const instructions =
-            buildAnimationKeyframes([style({height: 0}), animate(1000, style({height: 500}))]);
-
-        const player = engine.animateTimeline(element, instructions);
-        player.onDone(capture('done'));
-        player.onDestroy(capture('destroy'));
-        expect(log).toEqual([]);
-
-        player.finish();
-        expect(log).toEqual(['done']);
-
-        player.destroy();
-        expect(log).toEqual(['done', 'destroy']);
-      });
-    });
-
     describe('style normalizer', () => {
       it('should normalize the style values that are animateTransitioned within an a transition animation',
          () => {
            const engine = makeEngine(new SuffixNormalizer('-normalized'));
 
-           const trig = makeTrigger('something', [
+           const trig = trigger('something', [
              state('on', style({height: 100})), state('off', style({height: 0})),
              transition('on => off', animate(9876))
            ]);
 
-           const instruction = trig.matchTransition('on', 'off') !;
-           const player = <MockAnimationPlayer>engine.animateTransition(element, instruction);
+           registerTrigger(element, engine, trig);
+           setProperty(element, engine, trig.name, 'on');
+           setProperty(element, engine, trig.name, 'off');
+           engine.flush();
 
+           const player = MockAnimationDriver.log.pop() as MockAnimationPlayer;
            expect(player.keyframes).toEqual([
              {'height-normalized': '100-normalized', offset: 0},
              {'height-normalized': '0-normalized', offset: 1}
            ]);
          });
 
-      it('should normalize the style values that are animateTransitioned within an a timeline animation',
-         () => {
-           const engine = makeEngine(new SuffixNormalizer('-normalized'));
-
-           const instructions = buildAnimationKeyframes([
-             style({width: '333px'}),
-             animate(1000, style({width: '999px'})),
-           ]);
-
-           const player = <MockAnimationPlayer>engine.animateTimeline(element, instructions);
-           expect(player.keyframes).toEqual([
-             {'width-normalized': '333px-normalized', offset: 0},
-             {'width-normalized': '999px-normalized', offset: 1}
-           ]);
-         });
-
       it('should throw an error when normalization fails within a transition animation', () => {
         const engine = makeEngine(new ExactCssValueNormalizer({left: '100px'}));
 
-        const trig = makeTrigger('something', [
+        const trig = trigger('something', [
           state('a', style({left: '0px', width: '200px'})),
           state('b', style({left: '100px', width: '100px'})), transition('a => b', animate(9876))
         ]);
 
-        const instruction = trig.matchTransition('a', 'b') !;
+        registerTrigger(element, engine, trig);
+        setProperty(element, engine, trig.name, 'a');
+        setProperty(element, engine, trig.name, 'b');
 
         let errorMessage = '';
         try {
-          engine.animateTransition(element, instruction);
+          engine.flush();
         } catch (e) {
           errorMessage = e.toString();
         }
@@ -652,15 +599,18 @@ export function main() {
       it('should perform insert operations immediately ', () => {
         const engine = makeEngine();
 
-        let container = <any>el('<div></div>');
-        let child1 = <any>el('<div></div>');
-        let child2 = <any>el('<div></div>');
+        const child1 = document.createElement('div');
+        const child2 = document.createElement('div');
+        element.appendChild(child1);
+        element.appendChild(child2);
 
-        engine.onInsert(container, () => container.appendChild(child1));
-        engine.onInsert(container, () => container.appendChild(child2));
+        element.appendChild(child1);
+        engine.insertNode(DEFAULT_NAMESPACE_ID, child1, element, true);
+        element.appendChild(child2);
+        engine.insertNode(DEFAULT_NAMESPACE_ID, child2, element, true);
 
-        expect(container.contains(child1)).toBe(true);
-        expect(container.contains(child2)).toBe(true);
+        expect(element.contains(child1)).toBe(true);
+        expect(element.contains(child2)).toBe(true);
       });
     });
   });
@@ -700,3 +650,28 @@ class ExactCssValueNormalizer extends AnimationStyleNormalizer {
     return expectedValue;
   }
 }
+
+function registerTrigger(
+    element: any, engine: TransitionAnimationEngine, metadata: AnimationTriggerMetadata,
+    id: string = DEFAULT_NAMESPACE_ID) {
+  const errors: any[] = [];
+  const name = metadata.name;
+  const ast = buildAnimationAst(metadata as AnimationMetadata, errors) as TriggerAst;
+  if (errors.length) {
+  }
+  const trigger = buildTrigger(name, ast);
+  engine.register(id, element);
+  engine.registerTrigger(id, name, trigger);
+}
+
+function setProperty(
+    element: any, engine: TransitionAnimationEngine, property: string, value: any,
+    id: string = DEFAULT_NAMESPACE_ID) {
+  engine.trigger(id, element, property, value);
+}
+
+function listen(
+    element: any, engine: TransitionAnimationEngine, eventName: string, phaseName: string,
+    callback: (event: any) => any, id: string = DEFAULT_NAMESPACE_ID) {
+  return engine.listen(id, element, eventName, phaseName, callback);
+}
diff --git a/packages/animations/browser/test/render/web_animations/web_animations_player_spec.ts b/packages/animations/browser/test/render/web_animations/web_animations_player_spec.ts
new file mode 100644
index 0000000000..d7dc7aefe7
--- /dev/null
+++ b/packages/animations/browser/test/render/web_animations/web_animations_player_spec.ts
@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {DOMAnimation} from '../../../src/render/web_animations/dom_animation';
+import {WebAnimationsPlayer} from '../../../src/render/web_animations/web_animations_player';
+
+export function main() {
+  let element: any;
+  let innerPlayer: MockDomAnimation|null = null;
+  beforeEach(() => {
+    element = {};
+    element['animate'] = () => { return innerPlayer = new MockDomAnimation(); };
+  });
+
+  describe('WebAnimationsPlayer tests', () => {
+    it('should automatically pause the player when created and initialized', () => {
+      const keyframes = [
+        {opacity: 0, offset: 0},
+        {opacity: 1, offset: 1},
+      ];
+
+      const player = new WebAnimationsPlayer(element, keyframes, {duration: 1000});
+
+      player.init();
+      const p = innerPlayer !;
+      expect(p.log).toEqual(['pause']);
+
+      player.play();
+      expect(p.log).toEqual(['pause', 'play']);
+    });
+
+    it('should not pause the player if created and started before initialized', () => {
+      const keyframes = [
+        {opacity: 0, offset: 0},
+        {opacity: 1, offset: 1},
+      ];
+
+      const player = new WebAnimationsPlayer(element, keyframes, {duration: 1000});
+
+      player.play();
+      const p = innerPlayer !;
+      expect(p.log).toEqual(['play']);
+    });
+  });
+}
+
+class MockDomAnimation implements DOMAnimation {
+  log: string[] = [];
+  cancel(): void { this.log.push('cancel'); }
+  play(): void { this.log.push('play'); }
+  pause(): void { this.log.push('pause'); }
+  finish(): void { this.log.push('finish'); }
+  onfinish: Function = () => {};
+  position: number = 0;
+  currentTime: number = 0;
+  addEventListener(eventName: string, handler: (event: any) => any): any {}
+  dispatchEvent(eventName: string): any {}
+}
diff --git a/packages/animations/browser/test/render/web_animations_player_spec.ts b/packages/animations/browser/test/render/web_animations_player_spec.ts
deleted file mode 100644
index 93c56f6c15..0000000000
--- a/packages/animations/browser/test/render/web_animations_player_spec.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-import {DOMAnimation} from '../../src/render/web_animations/dom_animation';
-import {WebAnimationsPlayer} from '../../src/render/web_animations/web_animations_player';
-
-export function main() {
-  describe('WebAnimationsPlayer', function() {
-    // these tests are only mean't to be run within the DOM
-    if (typeof Element == 'undefined') return;
-
-    let element: any;
-    beforeEach(() => {
-      element = document.createElement('div');
-      document.body.appendChild(element);
-    });
-
-    afterEach(() => { document.body.removeChild(element); });
-
-    it('should properly balance any previous player styles into the animation keyframes', () => {
-      element.style.height = '666px';
-      element.style.width = '333px';
-
-      const prevPlayer1 = new MockWebAnimationsPlayer(
-          element, [{width: '0px', offset: 0}, {width: '200px', offset: 1}], {});
-      prevPlayer1.play();
-      prevPlayer1.finish();
-
-      const prevPlayer2 = new MockWebAnimationsPlayer(
-          element, [{height: '0px', offset: 0}, {height: '200px', offset: 1}], {});
-      prevPlayer2.play();
-      prevPlayer2.finish();
-
-      // what needs to happen here is the player below should
-      // examine which styles are present in the provided previous
-      // players and use them as input data for the keyframes of
-      // the new player. Given that the players are in their finished
-      // state, the styles are copied over as the starting keyframe
-      // for the animation and if the styles are missing in later keyframes
-      // then the styling is resolved by computing the styles
-      const player = new MockWebAnimationsPlayer(
-          element, [{width: '100px', offset: 0}, {width: '500px', offset: 1}], {},
-          [prevPlayer1, prevPlayer2]);
-
-      player.init();
-      expect(player.capturedKeyframes).toEqual([
-        {height: '200px', width: '200px', offset: 0},
-        {height: '666px', width: '500px', offset: 1}
-      ]);
-    });
-  });
-}
-
-class MockWebAnimationsPlayer extends WebAnimationsPlayer {
-  capturedKeyframes: any[];
-
-  _triggerWebAnimation(element: any, keyframes: any[], options: any): any {
-    this.capturedKeyframes = keyframes;
-    return new MockDOMAnimation();
-  }
-}
-
-class MockDOMAnimation implements DOMAnimation {
-  onfinish = (callback: (e: any) => any) => {};
-  position = 0;
-  currentTime = 0;
-
-  cancel(): void {}
-  play(): void {}
-  pause(): void {}
-  finish(): void {}
-  addEventListener(eventName: string, handler: (event: any) => any): any { return null; }
-  dispatchEvent(eventName: string): any { return null; }
-}
diff --git a/packages/animations/browser/test/shared.ts b/packages/animations/browser/test/shared.ts
new file mode 100644
index 0000000000..bff558cf74
--- /dev/null
+++ b/packages/animations/browser/test/shared.ts
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {trigger} from '@angular/animations';
+
+import {TriggerAst} from '../src/dsl/animation_ast';
+import {buildAnimationAst} from '../src/dsl/animation_ast_builder';
+import {AnimationTrigger, buildTrigger} from '../src/dsl/animation_trigger';
+
+export function makeTrigger(
+    name: string, steps: any, skipErrors: boolean = false): AnimationTrigger {
+  const errors: any[] = [];
+  const triggerData = trigger(name, steps);
+  const triggerAst = buildAnimationAst(triggerData, errors) as TriggerAst;
+  if (!skipErrors && errors.length) {
+    const LINE_START = '\n - ';
+    throw new Error(
+        `Animation parsing for the ${name} trigger have failed:${LINE_START}${errors.join(LINE_START)}`);
+  }
+  return buildTrigger(name, triggerAst);
+}
diff --git a/packages/animations/browser/testing/rollup.config.js b/packages/animations/browser/testing/rollup.config.js
index 721699aa23..05795686c9 100644
--- a/packages/animations/browser/testing/rollup.config.js
+++ b/packages/animations/browser/testing/rollup.config.js
@@ -6,15 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx',
+};
+
 export default {
   entry: '../../../../dist/packages-dist/animations/@angular/animations/browser/testing.es5.js',
   dest: '../../../../dist/packages-dist/animations/bundles/animations-browser-testing.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.animations.browser.testing',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/animations': 'ng.animations'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/animations/browser/testing/src/mock_animation_driver.ts b/packages/animations/browser/testing/src/mock_animation_driver.ts
index 943cc749a7..a04e069808 100644
--- a/packages/animations/browser/testing/src/mock_animation_driver.ts
+++ b/packages/animations/browser/testing/src/mock_animation_driver.ts
@@ -8,6 +8,8 @@
 import {AUTO_STYLE, AnimationPlayer, NoopAnimationPlayer, ɵStyleData} from '@angular/animations';
 
 import {AnimationDriver} from '../../src/render/animation_driver';
+import {containsElement, invokeQuery, matchesElement} from '../../src/render/shared';
+import {allowPreviousPlayerStylesMerge} from '../../src/util';
 
 /**
  * @experimental Animation support is experimental.
@@ -15,6 +17,20 @@ import {AnimationDriver} from '../../src/render/animation_driver';
 export class MockAnimationDriver implements AnimationDriver {
   static log: AnimationPlayer[] = [];
 
+  matchesElement(element: any, selector: string): boolean {
+    return matchesElement(element, selector);
+  }
+
+  containsElement(elm1: any, elm2: any): boolean { return containsElement(elm1, elm2); }
+
+  query(element: any, selector: string, multi: boolean): any[] {
+    return invokeQuery(element, selector, multi);
+  }
+
+  computeStyle(element: any, prop: string, defaultValue?: string): string {
+    return defaultValue || '';
+  }
+
   animate(
       element: any, keyframes: {[key: string]: string | number}[], duration: number, delay: number,
       easing: string, previousPlayers: any[] = []): MockAnimationPlayer {
@@ -30,20 +46,27 @@ export class MockAnimationDriver implements AnimationDriver {
  */
 export class MockAnimationPlayer extends NoopAnimationPlayer {
   private __finished = false;
+  private __started = false;
   public previousStyles: {[key: string]: string | number} = {};
   private _onInitFns: (() => any)[] = [];
+  public currentSnapshot: ɵStyleData = {};
 
   constructor(
       public element: any, public keyframes: {[key: string]: string | number}[],
       public duration: number, public delay: number, public easing: string,
       public previousPlayers: any[]) {
     super();
-    previousPlayers.forEach(player => {
-      if (player instanceof MockAnimationPlayer) {
-        const styles = player._captureStyles();
-        Object.keys(styles).forEach(prop => { this.previousStyles[prop] = styles[prop]; });
-      }
-    });
+
+    if (allowPreviousPlayerStylesMerge(duration, delay)) {
+      previousPlayers.forEach(player => {
+        if (player instanceof MockAnimationPlayer) {
+          const styles = player.currentSnapshot;
+          Object.keys(styles).forEach(prop => this.previousStyles[prop] = styles[prop]);
+        }
+      });
+    }
+
+    this.totalTime = delay + duration;
   }
 
   /* @internal */
@@ -66,7 +89,17 @@ export class MockAnimationPlayer extends NoopAnimationPlayer {
     this.__finished = true;
   }
 
-  private _captureStyles(): {[styleName: string]: string | number} {
+  /* @internal */
+  triggerMicrotask() {}
+
+  play(): void {
+    super.play();
+    this.__started = true;
+  }
+
+  hasStarted() { return this.__started; }
+
+  beforeDestroy() {
     const captures: ɵStyleData = {};
 
     Object.keys(this.previousStyles).forEach(prop => {
@@ -86,6 +119,6 @@ export class MockAnimationPlayer extends NoopAnimationPlayer {
       });
     }
 
-    return captures;
+    this.currentSnapshot = captures;
   }
 }
diff --git a/packages/animations/package.json b/packages/animations/package.json
index 7f0dcebbdc..3e45a0ab25 100644
--- a/packages/animations/package.json
+++ b/packages/animations/package.json
@@ -8,6 +8,9 @@
   "typings": "./animations.d.ts",
   "author": "angular",
   "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "@angular/core": "0.0.0-PLACEHOLDER"
   },
diff --git a/packages/animations/rollup.config.js b/packages/animations/rollup.config.js
index dc9c8160f6..3aa92bc6e4 100644
--- a/packages/animations/rollup.config.js
+++ b/packages/animations/rollup.config.js
@@ -6,15 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx',
+};
+
 export default {
   entry: '../../dist/packages-dist/animations/@angular/animations.es5.js',
   dest: '../../dist/packages-dist/animations/bundles/animations.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.animations',
-  globals: {
-    '@angular/core': 'ng.core',
-    'rxjs/Observable': 'Rx',
-    'rxjs/Subject': 'Rx',
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/animations/src/animation_builder.ts b/packages/animations/src/animation_builder.ts
new file mode 100644
index 0000000000..0bc5f1404d
--- /dev/null
+++ b/packages/animations/src/animation_builder.ts
@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AnimationMetadata, AnimationOptions} from './animation_metadata';
+import {AnimationPlayer} from './players/animation_player';
+
+/**
+ * AnimationBuilder is an injectable service that is available when the {@link
+ * BrowserAnimationsModule BrowserAnimationsModule} or {@link NoopAnimationsModule
+ * NoopAnimationsModule} modules are used within an application.
+ *
+ * The purpose if this service is to produce an animation sequence programmatically within an
+ * angular component or directive.
+ *
+ * Programmatic animations are first built and then a player is created when the build animation is
+ * attached to an element.
+ *
+ * ```ts
+ * // remember to include the BrowserAnimationsModule module for this to work...
+ * import {AnimationBuilder} from '@angular/animations';
+ *
+ * class MyCmp {
+ *   constructor(private _builder: AnimationBuilder) {}
+ *
+ *   makeAnimation(element: any) {
+ *     // first build the animation
+ *     const myAnimation = this._builder.build([
+ *       style({ width: 0 }),
+ *       animate(1000, style({ width: '100px' }))
+ *     ]);
+ *
+ *     // then create a player from it
+ *     const player = myAnimation.create(element);
+ *
+ *     player.play();
+ *   }
+ * }
+ * ```
+ *
+ * When an animation is built an instance of {@link AnimationFactory AnimationFactory} will be
+ * returned. Using that an {@link AnimationPlayer AnimationPlayer} can be created which can then be
+ * used to start the animation.
+ *
+ * @experimental Animation support is experimental.
+ */
+export abstract class AnimationBuilder {
+  abstract build(animation: AnimationMetadata|AnimationMetadata[]): AnimationFactory;
+}
+
+/**
+ * An instance of `AnimationFactory` is returned from {@link AnimationBuilder#build
+ * AnimationBuilder.build}.
+ *
+ * @experimental Animation support is experimental.
+ */
+export abstract class AnimationFactory {
+  abstract create(element: any, options?: AnimationOptions): AnimationPlayer;
+}
diff --git a/packages/animations/src/animation_metadata.ts b/packages/animations/src/animation_metadata.ts
index 38d161fa95..cabf6dd429 100755
--- a/packages/animations/src/animation_metadata.ts
+++ b/packages/animations/src/animation_metadata.ts
@@ -8,6 +8,9 @@
 export interface ɵStyleData { [key: string]: string|number; }
 
 /**
+ * Metadata representing the entry of animations. Instances of this interface are created internally
+ * within the Angular animation DSL.
+ *
  * @experimental Animation support is experimental.
  */
 export declare type AnimateTimings = {
@@ -17,16 +20,58 @@ export declare type AnimateTimings = {
 };
 
 /**
+ * `AnimationOptions` represents options that can be passed into most animation DSL methods.
+ * When options are provided, the delay value of an animation can be changed and animation input
+ * parameters can be passed in to change styling and timing data when an animation is started.
+ *
+ * The following animation DSL functions are able to accept animation option data:
+ *
+ * - {@link transition transition()}
+ * - {@link sequence sequence()}
+ * - {@link group group()}
+ * - {@link query query()}
+ * - {@link animation animation()}
+ * - {@link useAnimation useAnimation()}
+ * - {@link animateChild animateChild()}
+ *
+ * Programmatic animations built using {@link AnimationBuilder the AnimationBuilder service} also
+ * make use of AnimationOptions.
+ *
+ * @experimental Animation support is experimental.
+ */
+export declare interface AnimationOptions {
+  delay?: number|string;
+  params?: {[name: string]: any};
+}
+
+/**
+ * Metadata representing the entry of animations. Instances of this interface are created internally
+ * within the Angular animation DSL when {@link animateChild animateChild()} is used.
+ *
+ * @experimental Animation support is experimental.
+ */
+export declare interface AnimateChildOptions extends AnimationOptions { duration?: number|string; }
+
+/**
+ * Metadata representing the entry of animations. Usages of this enum are created
+ * each time an animation DSL function is used.
+ *
  * @experimental Animation support is experimental.
  */
 export const enum AnimationMetadataType {
-  State,
-  Transition,
-  Sequence,
-  Group,
-  Animate,
-  KeyframeSequence,
-  Style
+  State = 0,
+  Transition = 1,
+  Sequence = 2,
+  Group = 3,
+  Animate = 4,
+  Keyframes = 5,
+  Style = 6,
+  Trigger = 7,
+  Reference = 8,
+  AnimateChild = 9,
+  AnimateRef = 10,
+  Query = 11,
+  Stagger = 12
 }
 
 /**
@@ -40,15 +85,19 @@ export const AUTO_STYLE = '*';
 export interface AnimationMetadata { type: AnimationMetadataType; }
 
 /**
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
+ * animation DSL when the {@link trigger trigger animation function} is called.
+ *
  * @experimental Animation support is experimental.
  */
-export interface AnimationTriggerMetadata {
+export interface AnimationTriggerMetadata extends AnimationMetadata {
   name: string;
   definitions: AnimationMetadata[];
+  options: {params?: {[name: string]: any}}|null;
 }
 
 /**
- * Metadata representing the entry of animations. Instances of this class are provided via the
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
  * animation DSL when the {@link state state animation function} is called.
  *
  * @experimental Animation support is experimental.
@@ -59,18 +108,36 @@ export interface AnimationStateMetadata extends AnimationMetadata {
 }
 
 /**
- * Metadata representing the entry of animations. Instances of this class are provided via the
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
  * animation DSL when the {@link transition transition animation function} is called.
  *
  * @experimental Animation support is experimental.
  */
 export interface AnimationTransitionMetadata extends AnimationMetadata {
-  expr: string|((fromState: string, toState: string) => boolean);
+  expr: string;
   animation: AnimationMetadata|AnimationMetadata[];
+  options: AnimationOptions|null;
 }
 
 /**
- * Metadata representing the entry of animations. Instances of this class are provided via the
+ * @experimental Animation support is experimental.
+ */
+export interface AnimationReferenceMetadata extends AnimationMetadata {
+  animation: AnimationMetadata|AnimationMetadata[];
+  options: AnimationOptions|null;
+}
+
+/**
+ * @experimental Animation support is experimental.
+ */
+export interface AnimationQueryMetadata extends AnimationMetadata {
+  selector: string;
+  animation: AnimationMetadata|AnimationMetadata[];
+  options: AnimationQueryOptions|null;
+}
+
+/**
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
  * animation DSL when the {@link keyframes keyframes animation function} is called.
  *
  * @experimental Animation support is experimental.
@@ -80,18 +147,18 @@ export interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {
 }
 
 /**
- * Metadata representing the entry of animations. Instances of this class are provided via the
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
  * animation DSL when the {@link style style animation function} is called.
  *
  * @experimental Animation support is experimental.
  */
 export interface AnimationStyleMetadata extends AnimationMetadata {
-  styles: {[key: string]: string | number}|{[key: string]: string | number}[];
-  offset?: number;
+  styles: '*'|{[key: string]: string | number}|Array<{[key: string]: string | number}|'*'>;
+  offset: number|null;
 }
 
 /**
- * Metadata representing the entry of animations. Instances of this class are provided via the
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
  * animation DSL when the {@link animate animate animation function} is called.
  *
  * @experimental Animation support is experimental.
@@ -102,41 +169,91 @@ export interface AnimationAnimateMetadata extends AnimationMetadata {
 }
 
 /**
- * Metadata representing the entry of animations. Instances of this class are provided via the
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
+ * animation DSL when the {@link animateChild animateChild animation function} is called.
+ *
+ * @experimental Animation support is experimental.
+ */
+export interface AnimationAnimateChildMetadata extends AnimationMetadata {
+  options: AnimationOptions|null;
+}
+
+/**
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
+ * animation DSL when the {@link useAnimation useAnimation animation function} is called.
+ *
+ * @experimental Animation support is experimental.
+ */
+export interface AnimationAnimateRefMetadata extends AnimationMetadata {
+  animation: AnimationReferenceMetadata;
+  options: AnimationOptions|null;
+}
+
+/**
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
  * animation DSL when the {@link sequence sequence animation function} is called.
  *
  * @experimental Animation support is experimental.
  */
-export interface AnimationSequenceMetadata extends AnimationMetadata { steps: AnimationMetadata[]; }
+export interface AnimationSequenceMetadata extends AnimationMetadata {
+  steps: AnimationMetadata[];
+  options: AnimationOptions|null;
+}
 
 /**
- * Metadata representing the entry of animations. Instances of this class are provided via the
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
  * animation DSL when the {@link group group animation function} is called.
  *
  * @experimental Animation support is experimental.
  */
-export interface AnimationGroupMetadata extends AnimationMetadata { steps: AnimationMetadata[]; }
+export interface AnimationGroupMetadata extends AnimationMetadata {
+  steps: AnimationMetadata[];
+  options: AnimationOptions|null;
+}
+
+/**
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
+ * animation DSL when the {@link query query animation function} is called.
+ *
+ * @experimental Animation support is experimental.
+ */
+export declare interface AnimationQueryOptions extends AnimationOptions {
+  optional?: boolean;
+  limit?: number;
+}
+
+/**
+ * Metadata representing the entry of animations. Instances of this interface are provided via the
+ * animation DSL when the {@link stagger stagger animation function} is called.
+ *
+* @experimental Animation support is experimental.
+*/
+export interface AnimationStaggerMetadata extends AnimationMetadata {
+  timings: string|number;
+  animation: AnimationMetadata|AnimationMetadata[];
+}
 
 /**
  * `trigger` is an animation-specific function that is designed to be used inside of Angular's
- animation DSL language. If this information is new, please navigate to the {@link
- Component#animations-anchor component animations metadata page} to gain a better understanding of
- how animations in Angular are used.
+ * animation DSL language. If this information is new, please navigate to the
+ * {@link Component#animations component animations metadata page} to gain a better
+ * understanding of how animations in Angular are used.
  *
- * `trigger` Creates an animation trigger which will a list of {@link state state} and {@link
- transition transition} entries that will be evaluated when the expression bound to the trigger
- changes.
+ * `trigger` Creates an animation trigger which will a list of {@link state state} and
+ * {@link transition transition} entries that will be evaluated when the expression
+ * bound to the trigger changes.
  *
- * Triggers are registered within the component annotation data under the {@link
- Component#animations-anchor animations section}. An animation trigger can be placed on an element
- within a template by referencing the name of the trigger followed by the expression value that the
- trigger is bound to (in the form of `[@triggerName]="expression"`.
+ * Triggers are registered within the component annotation data under the
+ * {@link Component#animations animations section}. An animation trigger can be placed on an element
+ * within a template by referencing the name of the trigger followed by the expression value that
+ the
+ * trigger is bound to (in the form of `[@triggerName]="expression"`.
  *
  * ### Usage
  *
  * `trigger` will create an animation trigger reference based on the provided `name` value. The
- provided `animation` value is expected to be an array consisting of {@link state state} and {@link
- transition transition} declarations.
+ * provided `animation` value is expected to be an array consisting of {@link state state} and
+ * {@link transition transition} declarations.
  *
  * ```typescript
  * @Component({
@@ -162,20 +279,76 @@ export interface AnimationGroupMetadata extends AnimationMetadata { steps: Anima
  * ```html
  * <!-- somewhere inside of my-component-tpl.html -->
  * <div [@myAnimationTrigger]="myStatusExp">...</div>
- tools/gulp-tasks/validate-commit-message.js ```
+ * ```
  *
- * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
+ * ## Disable Child Animations
+ * A special animation control binding called `@.disabled` can be placed on an element which will
+ then disable animations for any inner animation triggers situated within the element.
+ *
+ * When true, the `@.disabled` binding will prevent inner animations from rendering. The example
+ below shows how to use this feature:
+ *
+ * ```ts
+ * @Component({
+ *   selector: 'my-component',
+ *   template: `
+ *     <div [@.disabled]="isDisabled">
+ *       <div [@childAnimation]="exp"></div>
+ *     </div>
+ *   `,
+ *   animations: [
+ *     trigger("childAnimation", [
+ *       // ...
+ *     ])
+ *   ]
+ * })
+ * class MyComponent {
+ *   isDisabled = true;
+ *   exp = '...';
+ * }
+ * ```
+ *
+ * The `@childAnimation` trigger will not animate because `@.disabled` prevents it from happening
+ (when true).
+ *
+ * Note that `@.disbled` will only disable inner animations (any animations running on the same
+ element will not be disabled).
+ *
+ * ### Disabling Animations Application-wide
+ * When an area of the template is set to have animations disabled, **all** inner components will
+ also have their animations disabled as well. This means that all animations for an angular
+ application can be disabled by placing a host binding set on `@.disabled` on the topmost Angular
+ component.
+ *
+ * ```ts
+ * import {Component, HostBinding} from '@angular/core';
+ *
+ * @Component({
+ *   selector: 'app-component',
+ *   templateUrl: 'app.component.html',
+ * })
+ * class AppComponent {
+ *   @HostBinding('@.disabled')
+ *   public animationsDisabled = true;
+ * }
+ * ```
+ *
+ * ### What about animations that us `query()` and `animateChild()`?
+ * Despite inner animations being disabled, a parent animation can {@link query query} for inner
+ elements located in disabled areas of the template and still animate them as it sees fit. This is
+ also the case for when a sub animation is queried by a parent and then later animated using {@link
+ animateChild animateChild}.
  *
  * @experimental Animation support is experimental.
  */
 export function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata {
-  return {name, definitions};
+  return {type: AnimationMetadataType.Trigger, name, definitions, options: {}};
 }
 
 /**
  * `animate` is an animation-specific function that is designed to be used inside of Angular's
  * animation DSL language. If this information is new, please navigate to the {@link
- * Component#animations-anchor component animations metadata page} to gain a better understanding of
+ * Component#animations component animations metadata page} to gain a better understanding of
  * how animations in Angular are used.
  *
  * `animate` specifies an animation step that will apply the provided `styles` data for a given
@@ -220,17 +393,17 @@ export function trigger(name: string, definitions: AnimationMetadata[]): Animati
 export function animate(
     timings: string | number, styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata |
         null = null): AnimationAnimateMetadata {
-  return {type: AnimationMetadataType.Animate, styles: styles, timings: timings};
+  return {type: AnimationMetadataType.Animate, styles, timings};
 }
 
 /**
  * `group` is an animation-specific function that is designed to be used inside of Angular's
  * animation DSL language. If this information is new, please navigate to the {@link
- * Component#animations-anchor component animations metadata page} to gain a better understanding of
+ * Component#animations component animations metadata page} to gain a better understanding of
  * how animations in Angular are used.
  *
  * `group` specifies a list of animation steps that are all run in parallel. Grouped animations are
- * useful when a series of styles must be animated/closed off at different statrting/ending times.
+ * useful when a series of styles must be animated/closed off at different starting/ending times.
  *
  * The `group` function can either be used within a {@link sequence sequence} or a {@link transition
  * transition} and it will only continue to the next instruction once all of the inner animation
@@ -254,14 +427,15 @@ export function animate(
  *
  * @experimental Animation support is experimental.
  */
-export function group(steps: AnimationMetadata[]): AnimationGroupMetadata {
-  return {type: AnimationMetadataType.Group, steps: steps};
+export function group(
+    steps: AnimationMetadata[], options: AnimationOptions | null = null): AnimationGroupMetadata {
+  return {type: AnimationMetadataType.Group, steps, options};
 }
 
 /**
  * `sequence` is an animation-specific function that is designed to be used inside of Angular's
  * animation DSL language. If this information is new, please navigate to the {@link
- * Component#animations-anchor component animations metadata page} to gain a better understanding of
+ * Component#animations component animations metadata page} to gain a better understanding of
  * how animations in Angular are used.
  *
  * `sequence` Specifies a list of animation steps that are run one by one. (`sequence` is used by
@@ -292,14 +466,15 @@ export function group(steps: AnimationMetadata[]): AnimationGroupMetadata {
  *
  * @experimental Animation support is experimental.
  */
-export function sequence(steps: AnimationMetadata[]): AnimationSequenceMetadata {
-  return {type: AnimationMetadataType.Sequence, steps: steps};
+export function sequence(steps: AnimationMetadata[], options: AnimationOptions | null = null):
+    AnimationSequenceMetadata {
+  return {type: AnimationMetadataType.Sequence, steps, options};
 }
 
 /**
  * `style` is an animation-specific function that is designed to be used inside of Angular's
  * animation DSL language. If this information is new, please navigate to the {@link
- * Component#animations-anchor component animations metadata page} to gain a better understanding of
+ * Component#animations component animations metadata page} to gain a better understanding of
  * how animations in Angular are used.
  *
  * `style` declares a key/value object containing CSS properties/styles that can then be used for
@@ -339,15 +514,15 @@ export function sequence(steps: AnimationMetadata[]): AnimationSequenceMetadata
  * @experimental Animation support is experimental.
  */
 export function style(
-    tokens: {[key: string]: string | number} |
-    Array<{[key: string]: string | number}>): AnimationStyleMetadata {
-  return {type: AnimationMetadataType.Style, styles: tokens};
+    tokens: '*' | {[key: string]: string | number} |
+    Array<'*'|{[key: string]: string | number}>): AnimationStyleMetadata {
+  return {type: AnimationMetadataType.Style, styles: tokens, offset: null};
 }
 
 /**
  * `state` is an animation-specific function that is designed to be used inside of Angular's
  * animation DSL language. If this information is new, please navigate to the {@link
- * Component#animations-anchor component animations metadata page} to gain a better understanding of
+ * Component#animations component animations metadata page} to gain a better understanding of
  * how animations in Angular are used.
  *
  * `state` declares an animation state within the given trigger. When a state is active within a
@@ -393,13 +568,13 @@ export function style(
  * @experimental Animation support is experimental.
  */
 export function state(name: string, styles: AnimationStyleMetadata): AnimationStateMetadata {
-  return {type: AnimationMetadataType.State, name: name, styles: styles};
+  return {type: AnimationMetadataType.State, name, styles};
 }
 
 /**
  * `keyframes` is an animation-specific function that is designed to be used inside of Angular's
  * animation DSL language. If this information is new, please navigate to the {@link
- * Component#animations-anchor component animations metadata page} to gain a better understanding of
+ * Component#animations component animations metadata page} to gain a better understanding of
  * how animations in Angular are used.
  *
  * `keyframes` specifies a collection of {@link style style} entries each optionally characterized
@@ -442,13 +617,13 @@ export function state(name: string, styles: AnimationStyleMetadata): AnimationSt
  * @experimental Animation support is experimental.
  */
 export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata {
-  return {type: AnimationMetadataType.KeyframeSequence, steps: steps};
+  return {type: AnimationMetadataType.Keyframes, steps};
 }
 
 /**
  * `transition` is an animation-specific function that is designed to be used inside of Angular's
  * animation DSL language. If this information is new, please navigate to the {@link
- * Component#animations-anchor component animations metadata page} to gain a better understanding of
+ * Component#animations component animations metadata page} to gain a better understanding of
  * how animations in Angular are used.
  *
  * `transition` declares the {@link sequence sequence of animation steps} that will be run when the
@@ -532,7 +707,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
  * ])
  * ```
  *
- * ### Transition Aliases (`:enter` and `:leave`)
+ * ### Using :enter and :leave
  *
  * Given that enter (insertion) and leave (removal) animations are so common, the `transition`
  * function accepts both `:enter` and `:leave` values which are aliases for the `void => *` and `*
@@ -542,18 +717,432 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
  * transition(":enter", [
  *   style({ opacity: 0 }),
  *   animate(500, style({ opacity: 1 }))
- * ])
+ * ]),
  * transition(":leave", [
  *   animate(500, style({ opacity: 0 }))
  * ])
  * ```
  *
+ * ### Using :increment and :decrement
+ * In addition to the :enter and :leave transition aliases, the :increment and :decrement aliases
+ * can be used to kick off a transition when a numeric value has increased or decreased in value.
+ *
+ * ```
+ * import {group, animate, query, transition, style, trigger} from '@angular/animations';
+ * import {Component} from '@angular/core';
+ *
+ * @Component({
+ *   selector: 'banner-carousel-component',
+ *   styles: [`
+ *     .banner-container {
+ *        position:relative;
+ *        height:500px;
+ *        overflow:hidden;
+ *      }
+ *     .banner-container > .banner {
+ *        position:absolute;
+ *        left:0;
+ *        top:0;
+ *        font-size:200px;
+ *        line-height:500px;
+ *        font-weight:bold;
+ *        text-align:center;
+ *        width:100%;
+ *      }
+ *   `],
+ *   template: `
+ *     <button (click)="previous()">Previous</button>
+ *     <button (click)="next()">Next</button>
+ *     <hr>
+ *     <div [@bannerAnimation]="selectedIndex" class="banner-container">
+ *       <div class="banner"> {{ banner }} </div>
+ *     </div>
+ *   `
+ *   animations: [
+ *     trigger('bannerAnimation', [
+ *       transition(":increment", group([
+ *         query(':enter', [
+ *           style({ left: '100%' }),
+ *           animate('0.5s ease-out', style('*'))
+ *         ]),
+ *         query(':leave', [
+ *           animate('0.5s ease-out', style({ left: '-100%' }))
+ *         ])
+ *       ])),
+ *       transition(":decrement", group([
+ *         query(':enter', [
+ *           style({ left: '-100%' }),
+ *           animate('0.5s ease-out', style('*'))
+ *         ]),
+ *         query(':leave', [
+ *           animate('0.5s ease-out', style({ left: '100%' }))
+ *         ])
+ *       ])),
+ *     ])
+ *   ]
+ * })
+ * class BannerCarouselComponent {
+ *   allBanners: string[] = ['1', '2', '3', '4'];
+ *   selectedIndex: number = 0;
+ *
+ *   get banners() {
+ *      return [this.allBanners[this.selectedIndex]];
+ *   }
+ *
+ *   previous() {
+ *     this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+ *   }
+ *
+ *   next() {
+ *     this.selectedIndex = Math.min(this.selectedIndex + 1, this.allBanners.length - 1);
+ *   }
+ * }
+ * ```
+ *
  * {@example core/animation/ts/dsl/animation_example.ts region='Component'}
  *
  * @experimental Animation support is experimental.
  */
 export function transition(
-    stateChangeExpr: string | ((fromState: string, toState: string) => boolean),
-    steps: AnimationMetadata | AnimationMetadata[]): AnimationTransitionMetadata {
-  return {type: AnimationMetadataType.Transition, expr: stateChangeExpr, animation: steps};
+    stateChangeExpr: string, steps: AnimationMetadata | AnimationMetadata[],
+    options: AnimationOptions | null = null): AnimationTransitionMetadata {
+  return {type: AnimationMetadataType.Transition, expr: stateChangeExpr, animation: steps, options};
+}
+
+/**
+ * `animation` is an animation-specific function that is designed to be used inside of Angular's
+ * animation DSL language.
+ *
+ * `var myAnimation = animation(...)` is designed to produce a reusable animation that can be later
+ * invoked in another animation or sequence. Reusable animations are designed to make use of
+ * animation parameters and the produced animation can be used via the `useAnimation` method.
+ *
+ * ```
+ * var fadeAnimation = animation([
+ *   style({ opacity: '{{ start }}' }),
+ *   animate('{{ time }}',
+ *     style({ opacity: '{{ end }}'))
+ * ], { params: { time: '1000ms', start: 0, end: 1 }});
+ * ```
+ *
+ * If parameters are attached to an animation then they act as **default parameter values**. When an
+ * animation is invoked via `useAnimation` then parameter values are allowed to be passed in
+ * directly. If any of the passed in parameter values are missing then the default values will be
+ * used.
+ *
+ * ```
+ * useAnimation(fadeAnimation, {
+ *   params: {
+ *     time: '2s',
+ *     start: 1,
+ *     end: 0
+ *   }
+ * })
+ * ```
+ *
+ * If one or more parameter values are missing before animated then an error will be thrown.
+ *
+ * @experimental Animation support is experimental.
+ */
+export function animation(
+    steps: AnimationMetadata | AnimationMetadata[],
+    options: AnimationOptions | null = null): AnimationReferenceMetadata {
+  return {type: AnimationMetadataType.Reference, animation: steps, options};
+}
+
+/**
+ * `animateChild` is an animation-specific function that is designed to be used inside of Angular's
+ * animation DSL language. It works by allowing a queried element to execute its own
+ * animation within the animation sequence.
+ *
+ * Each time an animation is triggered in angular, the parent animation
+ * will always get priority and any child animations will be blocked. In order
+ * for a child animation to run, the parent animation must query each of the elements
+ * containing child animations and then allow the animations to run using `animateChild`.
+ *
+ * The example HTML code below shows both parent and child elements that have animation
+ * triggers that will execute at the same time.
+ *
+ * ```html
+ * <!-- parent-child.component.html -->
+ * <button (click)="exp =! exp">Toggle</button>
+ * <hr>
+ *
+ * <div [@parentAnimation]="exp">
+ *   <header>Hello</header>
+ *   <div [@childAnimation]="exp">
+ *       one
+ *   </div>
+ *   <div [@childAnimation]="exp">
+ *       two
+ *   </div>
+ *   <div [@childAnimation]="exp">
+ *       three
+ *   </div>
+ * </div>
+ * ```
+ *
+ * Now when the `exp` value changes to true, only the `parentAnimation` animation will animate
+ * because it has priority. However, using `query` and `animateChild` each of the inner animations
+ * can also fire:
+ *
+ * ```ts
+ * // parent-child.component.ts
+ * import {trigger, transition, animate, style, query, animateChild} from '@angular/animations';
+ * @Component({
+ *   selector: 'parent-child-component',
+ *   animations: [
+ *     trigger('parentAnimation', [
+ *       transition('false => true', [
+ *         query('header', [
+ *           style({ opacity: 0 }),
+ *           animate(500, style({ opacity: 1 }))
+ *         ]),
+ *         query('@childAnimation', [
+ *           animateChild()
+ *         ])
+ *       ])
+ *     ]),
+ *     trigger('childAnimation', [
+ *       transition('false => true', [
+ *         style({ opacity: 0 }),
+ *         animate(500, style({ opacity: 1 }))
+ *       ])
+ *     ])
+ *   ]
+ * })
+ * class ParentChildCmp {
+ *   exp: boolean = false;
+ * }
+ * ```
+ *
+ * In the animation code above, when the `parentAnimation` transition kicks off it first queries to
+ * find the header element and fades it in. It then finds each of the sub elements that contain the
+ * `@childAnimation` trigger and then allows for their animations to fire.
+ *
+ * This example can be further extended by using stagger:
+ *
+ * ```ts
+ * query('@childAnimation', stagger(100, [
+ *   animateChild()
+ * ]))
+ * ```
+ *
+ * Now each of the sub animations start off with respect to the `100ms` staggering step.
+ *
+ * ## The first frame of child animations
+ * When sub animations are executed using `animateChild` the animation engine will always apply the
+ * first frame of every sub animation immediately at the start of the animation sequence. This way
+ * the parent animation does not need to set any initial styling data on the sub elements before the
+ * sub animations kick off.
+ *
+ * In the example above the first frame of the `childAnimation`'s `false => true` transition
+ * consists of a style of `opacity: 0`. This is applied immediately when the `parentAnimation`
+ * animation transition sequence starts. Only then when the `@childAnimation` is queried and called
+ * with `animateChild` will it then animate to its destination of `opacity: 1`.
+ *
+ * Note that this feature designed to be used alongside {@link query query()} and it will only work
+ * with animations that are assigned using the Angular animation DSL (this means that CSS keyframes
+ * and transitions are not handled by this API).
+ *
+ * @experimental Animation support is experimental.
+ */
+export function animateChild(options: AnimateChildOptions | null = null):
+    AnimationAnimateChildMetadata {
+  return {type: AnimationMetadataType.AnimateChild, options};
+}
+
+/**
+ * `useAnimation` is an animation-specific function that is designed to be used inside of Angular's
+ * animation DSL language. It is used to kick off a reusable animation that is created using {@link
+ * animation animation()}.
+ *
+ * @experimental Animation support is experimental.
+ */
+export function useAnimation(
+    animation: AnimationReferenceMetadata,
+    options: AnimationOptions | null = null): AnimationAnimateRefMetadata {
+  return {type: AnimationMetadataType.AnimateRef, animation, options};
+}
+
+/**
+ * `query` is an animation-specific function that is designed to be used inside of Angular's
+ * animation DSL language.
+ *
+ * query() is used to find one or more inner elements within the current element that is
+ * being animated within the sequence. The provided animation steps are applied
+ * to the queried element (by default, an array is provided, then this will be
+ * treated as an animation sequence).
+ *
+ * ### Usage
+ *
+ * query() is designed to collect mutiple elements and works internally by using
+ * `element.querySelectorAll`. An additional options object can be provided which
+ * can be used to limit the total amount of items to be collected.
+ *
+ * ```js
+ * query('div', [
+ *   animate(...),
+ *   animate(...)
+ * ], { limit: 1 })
+ * ```
+ *
+ * query(), by default, will throw an error when zero items are found. If a query
+ * has the `optional` flag set to true then this error will be ignored.
+ *
+ * ```js
+ * query('.some-element-that-may-not-be-there', [
+ *   animate(...),
+ *   animate(...)
+ * ], { optional: true })
+ * ```
+ *
+ * ### Special Selector Values
+ *
+ * The selector value within a query can collect elements that contain angular-specific
+ * characteristics
+ * using special pseudo-selectors tokens.
+ *
+ * These include:
+ *
+ *  - Querying for newly inserted/removed elements using `query(":enter")`/`query(":leave")`
+ *  - Querying all currently animating elements using `query(":animating")`
+ *  - Querying elements that contain an animation trigger using `query("@triggerName")`
+ *  - Querying all elements that contain an animation triggers using `query("@*")`
+ *  - Including the current element into the animation sequence using `query(":self")`
+ *
+ *
+ *  Each of these pseudo-selector tokens can be merged together into a combined query selector
+ * string:
+ *
+ *  ```
+ *  query(':self, .record:enter, .record:leave, @subTrigger', [...])
+ *  ```
+ *
+ * ### Demo
+ *
+ * ```
+ * @Component({
+ *   selector: 'inner',
+ *   template: `
+ *     <div [@queryAnimation]="exp">
+ *       <h1>Title</h1>
+ *       <div class="content">
+ *         Blah blah blah
+ *       </div>
+ *     </div>
+ *   `,
+ *   animations: [
+ *    trigger('queryAnimation', [
+ *      transition('* => goAnimate', [
+ *        // hide the inner elements
+ *        query('h1', style({ opacity: 0 })),
+ *        query('.content', style({ opacity: 0 })),
+ *
+ *        // animate the inner elements in, one by one
+ *        query('h1', animate(1000, style({ opacity: 1 })),
+ *        query('.content', animate(1000, style({ opacity: 1 })),
+ *      ])
+ *    ])
+ *  ]
+ * })
+ * class Cmp {
+ *   exp = '';
+ *
+ *   goAnimate() {
+ *     this.exp = 'goAnimate';
+ *   }
+ * }
+ * ```
+ *
+ * @experimental Animation support is experimental.
+ */
+export function query(
+    selector: string, animation: AnimationMetadata | AnimationMetadata[],
+    options: AnimationQueryOptions | null = null): AnimationQueryMetadata {
+  return {type: AnimationMetadataType.Query, selector, animation, options};
+}
+
+/**
+ * `stagger` is an animation-specific function that is designed to be used inside of Angular's
+ * animation DSL language. It is designed to be used inside of an animation {@link query query()}
+ * and works by issuing a timing gap between after each queried item is animated.
+ *
+ * ### Usage
+ *
+ * In the example below there is a container element that wraps a list of items stamped out
+ * by an ngFor. The container element contains an animation trigger that will later be set
+ * to query for each of the inner items.
+ *
+ * ```html
+ * <!-- list.component.html -->
+ * <button (click)="toggle()">Show / Hide Items</button>
+ * <hr />
+ * <div [@listAnimation]="items.length">
+ *   <div *ngFor="let item of items">
+ *     {{ item }}
+ *   </div>
+ * </div>
+ * ```
+ *
+ * The component code for this looks as such:
+ *
+ * ```ts
+ * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
+ * @Component({
+ *   templateUrl: 'list.component.html',
+ *   animations: [
+ *     trigger('listAnimation', [
+ *        //...
+ *     ])
+ *   ]
+ * })
+ * class ListComponent {
+ *   items = [];
+ *
+ *   showItems() {
+ *     this.items = [0,1,2,3,4];
+ *   }
+ *
+ *   hideItems() {
+ *     this.items = [];
+ *   }
+ *
+ *   toggle() {
+ *     this.items.length ? this.hideItems() : this.showItems();
+ *   }
+ * }
+ * ```
+ *
+ * And now for the animation trigger code:
+ *
+ * ```ts
+ * trigger('listAnimation', [
+ *   transition('* => *', [ // each time the binding value changes
+ *     query(':leave', [
+ *       stagger(100, [
+ *         animate('0.5s', style({ opacity: 0 }))
+ *       ])
+ *     ]),
+ *     query(':enter', [
+ *       style({ opacity: 0 }),
+ *       stagger(100, [
+ *         animate('0.5s', style({ opacity: 1 }))
+ *       ])
+ *     ])
+ *   ])
+ * ])
+ * ```
+ *
+ * Now each time the items are added/removed then either the opacity
+ * fade-in animation will run or each removed item will be faded out.
+ * When either of these animations occur then a stagger effect will be
+ * applied after each item's animation is started.
+ *
+ * @experimental Animation support is experimental.
+ */
+export function stagger(
+    timings: string | number,
+    animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata {
+  return {type: AnimationMetadataType.Stagger, timings, animation};
 }
diff --git a/packages/animations/src/animations.ts b/packages/animations/src/animations.ts
index 9ccc23a5d0..7f8acfadc9 100644
--- a/packages/animations/src/animations.ts
+++ b/packages/animations/src/animations.ts
@@ -11,8 +11,9 @@
  * @description
  * Entry point for all animation APIs of the animation package.
  */
+export {AnimationBuilder, AnimationFactory} from './animation_builder';
 export {AnimationEvent} from './animation_event';
-export {AUTO_STYLE, AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, animate, group, keyframes, sequence, state, style, transition, trigger, ɵStyleData} from './animation_metadata';
+export {AUTO_STYLE, AnimateChildOptions, AnimateTimings, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, animate, animateChild, animation, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, ɵStyleData} from './animation_metadata';
 export {AnimationPlayer, NoopAnimationPlayer} from './players/animation_player';
 
 export * from './private_export';
diff --git a/packages/animations/src/players/animation_group_player.ts b/packages/animations/src/players/animation_group_player.ts
index aa790524a4..d1b0aae86f 100644
--- a/packages/animations/src/players/animation_group_player.ts
+++ b/packages/animations/src/players/animation_group_player.ts
@@ -18,22 +18,38 @@ export class AnimationGroupPlayer implements AnimationPlayer {
   private _onDestroyFns: Function[] = [];
 
   public parentPlayer: AnimationPlayer|null = null;
+  public totalTime: number = 0;
 
   constructor(private _players: AnimationPlayer[]) {
-    let count = 0;
+    let doneCount = 0;
+    let destroyCount = 0;
+    let startCount = 0;
     const total = this._players.length;
+
     if (total == 0) {
       scheduleMicroTask(() => this._onFinish());
     } else {
       this._players.forEach(player => {
         player.parentPlayer = this;
         player.onDone(() => {
-          if (++count >= total) {
+          if (++doneCount >= total) {
             this._onFinish();
           }
         });
+        player.onDestroy(() => {
+          if (++destroyCount >= total) {
+            this._onDestroy();
+          }
+        });
+        player.onStart(() => {
+          if (++startCount >= total) {
+            this._onStart();
+          }
+        });
       });
     }
+
+    this.totalTime = this._players.reduce((time, player) => Math.max(time, player.totalTime), 0);
   }
 
   private _onFinish() {
@@ -48,6 +64,14 @@ export class AnimationGroupPlayer implements AnimationPlayer {
 
   onStart(fn: () => void): void { this._onStartFns.push(fn); }
 
+  private _onStart() {
+    if (!this.hasStarted()) {
+      this._onStartFns.forEach(fn => fn());
+      this._onStartFns = [];
+      this._started = true;
+    }
+  }
+
   onDone(fn: () => void): void { this._onDoneFns.push(fn); }
 
   onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
@@ -58,11 +82,7 @@ export class AnimationGroupPlayer implements AnimationPlayer {
     if (!this.parentPlayer) {
       this.init();
     }
-    if (!this.hasStarted()) {
-      this._onStartFns.forEach(fn => fn());
-      this._onStartFns = [];
-      this._started = true;
-    }
+    this._onStart();
     this._players.forEach(player => player.play());
   }
 
@@ -75,11 +95,13 @@ export class AnimationGroupPlayer implements AnimationPlayer {
     this._players.forEach(player => player.finish());
   }
 
-  destroy(): void {
+  destroy(): void { this._onDestroy(); }
+
+  private _onDestroy() {
     if (!this._destroyed) {
+      this._destroyed = true;
       this._onFinish();
       this._players.forEach(player => player.destroy());
-      this._destroyed = true;
       this._onDestroyFns.forEach(fn => fn());
       this._onDestroyFns = [];
     }
@@ -93,7 +115,11 @@ export class AnimationGroupPlayer implements AnimationPlayer {
   }
 
   setPosition(p: number): void {
-    this._players.forEach(player => { player.setPosition(p); });
+    const timeAtPosition = p * this.totalTime;
+    this._players.forEach(player => {
+      const position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1;
+      player.setPosition(position);
+    });
   }
 
   getPosition(): number {
@@ -106,4 +132,12 @@ export class AnimationGroupPlayer implements AnimationPlayer {
   }
 
   get players(): AnimationPlayer[] { return this._players; }
+
+  beforeDestroy(): void {
+    this.players.forEach(player => {
+      if (player.beforeDestroy) {
+        player.beforeDestroy();
+      }
+    });
+  }
 }
diff --git a/packages/animations/src/players/animation_player.ts b/packages/animations/src/players/animation_player.ts
index 234c4a596a..14d14f35f6 100644
--- a/packages/animations/src/players/animation_player.ts
+++ b/packages/animations/src/players/animation_player.ts
@@ -8,24 +8,29 @@
 import {scheduleMicroTask} from '../util';
 
 /**
+ * AnimationPlayer controls an animation sequence that was produced from a programmatic animation.
+ * (see {@link AnimationBuilder AnimationBuilder} for more information on how to create programmatic
+ * animations.)
+ *
  * @experimental Animation support is experimental.
  */
-export abstract class AnimationPlayer {
-  abstract onDone(fn: () => void): void;
-  abstract onStart(fn: () => void): void;
-  abstract onDestroy(fn: () => void): void;
-  abstract init(): void;
-  abstract hasStarted(): boolean;
-  abstract play(): void;
-  abstract pause(): void;
-  abstract restart(): void;
-  abstract finish(): void;
-  abstract destroy(): void;
-  abstract reset(): void;
-  abstract setPosition(p: any /** TODO #9100 */): void;
-  abstract getPosition(): number;
-  get parentPlayer(): AnimationPlayer|null { throw new Error('NOT IMPLEMENTED: Base Class'); }
-  set parentPlayer(player: AnimationPlayer|null) { throw new Error('NOT IMPLEMENTED: Base Class'); }
+export interface AnimationPlayer {
+  onDone(fn: () => void): void;
+  onStart(fn: () => void): void;
+  onDestroy(fn: () => void): void;
+  init(): void;
+  hasStarted(): boolean;
+  play(): void;
+  pause(): void;
+  restart(): void;
+  finish(): void;
+  destroy(): void;
+  reset(): void;
+  setPosition(p: any /** TODO #9100 */): void;
+  getPosition(): number;
+  parentPlayer: AnimationPlayer|null;
+  readonly totalTime: number;
+  beforeDestroy?: () => any;
 }
 
 /**
@@ -39,6 +44,7 @@ export class NoopAnimationPlayer implements AnimationPlayer {
   private _destroyed = false;
   private _finished = false;
   public parentPlayer: AnimationPlayer|null = null;
+  public totalTime = 0;
   constructor() {}
   private _onFinish() {
     if (!this._finished) {
@@ -54,15 +60,20 @@ export class NoopAnimationPlayer implements AnimationPlayer {
   init(): void {}
   play(): void {
     if (!this.hasStarted()) {
-      scheduleMicroTask(() => this._onFinish());
+      this.triggerMicrotask();
       this._onStart();
     }
     this._started = true;
   }
+
+  /* @internal */
+  triggerMicrotask() { scheduleMicroTask(() => this._onFinish()); }
+
   private _onStart() {
     this._onStartFns.forEach(fn => fn());
     this._onStartFns = [];
   }
+
   pause(): void {}
   restart(): void {}
   finish(): void { this._onFinish(); }
diff --git a/packages/animations/src/private_export.ts b/packages/animations/src/private_export.ts
index 635a56c87d..69b3314026 100644
--- a/packages/animations/src/private_export.ts
+++ b/packages/animations/src/private_export.ts
@@ -6,3 +6,4 @@
  * found in the LICENSE file at https://angular.io/license
  */
 export {AnimationGroupPlayer as ɵAnimationGroupPlayer} from './players/animation_group_player';
+export const ɵPRE_STYLE = '!';
diff --git a/packages/benchpress/README.md b/packages/benchpress/README.md
index 05071f7849..40e5c7d8ac 100644
--- a/packages/benchpress/README.md
+++ b/packages/benchpress/README.md
@@ -235,9 +235,9 @@ To collect these metrics, you need the following corresponding extra providers:
 * Use normalized environments
   - metrics that are dependent on the performance of the execution environment must be executed on a normalized machine
   - e.g. a real mobile device whose cpu frequency is set to a fixed value.
-      * see our [build script](https://github.com/angular/angular/blob/master/scripts/ci/android_cpu.sh)
+      * see our [build script](https://github.com/angular/angular/blob/2.4.9/scripts/ci/android_cpu.sh)
       * this requires root access, e.g. via a userdebug build of Android on a Google Nexus device
-        (see [here](https://source.android.com/source/building-running.html) and [here](https://source.android.com/source/building-devices.html#obtaining-proprietary-binaries))
+        (see [here](https://source.android.com/source/building) and [here](https://source.android.com/source/building#obtaining-proprietary-binaries))
   - e.g. a calibrated machine that does not run background jobs, has a fixed cpu frequency, ...
 
 * Use relative comparisons
diff --git a/packages/benchpress/src/webdriver/chrome_driver_extension.ts b/packages/benchpress/src/webdriver/chrome_driver_extension.ts
index bd767bb874..0cf41cb38d 100644
--- a/packages/benchpress/src/webdriver/chrome_driver_extension.ts
+++ b/packages/benchpress/src/webdriver/chrome_driver_extension.ts
@@ -24,6 +24,7 @@ export class ChromeDriverExtension extends WebDriverExtension {
   static PROVIDERS = [ChromeDriverExtension];
 
   private _majorChromeVersion: number;
+  private _firstRun = true;
 
   constructor(private _driver: WebDriverAdapter, @Inject(Options.USER_AGENT) userAgent: string) {
     super();
@@ -48,6 +49,12 @@ export class ChromeDriverExtension extends WebDriverExtension {
   gc() { return this._driver.executeScript('window.gc()'); }
 
   timeBegin(name: string): Promise<any> {
+    if (this._firstRun) {
+      this._firstRun = false;
+      // Before the first run, read out the existing performance logs
+      // so that the chrome buffer does not fill up.
+      this._driver.logs('performance');
+    }
     return this._driver.executeScript(`console.time('${name}');`);
   }
 
@@ -103,7 +110,7 @@ export class ChromeDriverExtension extends WebDriverExtension {
                    categories, name, ['benchmark'],
                    'BenchmarkInstrumentation::ImplThreadRenderingStats')) {
       // TODO(goderbauer): Instead of BenchmarkInstrumentation::ImplThreadRenderingStats the
-      // following events should be used (if available) for more accurate measurments:
+      // following events should be used (if available) for more accurate measurements:
       //   1st choice: vsync_before - ground truth on Android
       //   2nd choice: BenchmarkInstrumentation::DisplayRenderingStats - available on systems with
       //               new surfaces framework (not broadly enabled yet)
diff --git a/packages/benchpress/test/webdriver/chrome_driver_extension_spec.ts b/packages/benchpress/test/webdriver/chrome_driver_extension_spec.ts
index 5cde6cacad..f12d8a8bd6 100644
--- a/packages/benchpress/test/webdriver/chrome_driver_extension_spec.ts
+++ b/packages/benchpress/test/webdriver/chrome_driver_extension_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AsyncTestCompleter, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+import {AsyncTestCompleter, describe, expect, iit, inject, it} from '@angular/core/testing/src/testing_internal';
 
 import {ChromeDriverExtension, Options, ReflectiveInjector, WebDriverAdapter, WebDriverExtension} from '../../index';
 import {TraceEventFactory} from '../trace_event_factory';
@@ -61,14 +61,29 @@ export function main() {
          });
        }));
 
-    it('should mark the timeline via console.time()',
+    it('should clear the perf logs and mark the timeline via console.time() on the first call',
        inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
-         createExtension().timeBegin('someName').then((_) => {
-           expect(log).toEqual([['executeScript', `console.time('someName');`]]);
+         createExtension().timeBegin('someName').then(() => {
+           expect(log).toEqual(
+               [['logs', 'performance'], ['executeScript', `console.time('someName');`]]);
            async.done();
          });
        }));
 
+    it('should mark the timeline via console.time() on the second call',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         const ext = createExtension();
+         ext.timeBegin('someName')
+             .then((_) => {
+               log.splice(0, log.length);
+               ext.timeBegin('someName');
+             })
+             .then(() => {
+               expect(log).toEqual([['executeScript', `console.time('someName');`]]);
+               async.done();
+             });
+       }));
+
     it('should mark the timeline via console.timeEnd()',
        inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
          createExtension().timeEnd('someName', null).then((_) => {
diff --git a/packages/common/BUILD.bazel b/packages/common/BUILD.bazel
new file mode 100644
index 0000000000..cee67edccd
--- /dev/null
+++ b/packages/common/BUILD.bazel
@@ -0,0 +1,14 @@
+package(default_visibility=["//visibility:public"])
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+ts_library(
+    name = "common",
+    srcs = glob(["**/*.ts"], exclude=[
+      "http/**",
+      "test/**",
+      "testing/**",
+    ]),
+    module_name = "@angular/common",
+    deps = ["//packages/core"],
+    tsconfig = ":tsconfig-build.json",
+)
diff --git a/packages/common/http/index.ts b/packages/common/http/index.ts
new file mode 100644
index 0000000000..ca39d26dcd
--- /dev/null
+++ b/packages/common/http/index.ts
@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// This file is not used to build this module. It is only used during editing
+// by the TypeScript language service and during build for verification. `ngc`
+// replaces this file with production index.ts when it rewrites private symbol
+// names.
+
+export * from './public_api';
\ No newline at end of file
diff --git a/packages/common/http/package.json b/packages/common/http/package.json
new file mode 100644
index 0000000000..31a1d9572d
--- /dev/null
+++ b/packages/common/http/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@angular/common/http",
+  "typings": "../http.d.ts",
+  "main": "../bundles/common-http.umd.js",
+  "module": "../@angular/common/http.es5.js",
+  "es2015": "../@angular/common/http.js"
+}
diff --git a/packages/common/http/public_api.ts b/packages/common/http/public_api.ts
new file mode 100644
index 0000000000..8ac2b95de8
--- /dev/null
+++ b/packages/common/http/public_api.ts
@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export {HttpBackend, HttpHandler} from './src/backend';
+export {HttpClient} from './src/client';
+export {HttpHeaders} from './src/headers';
+export {HTTP_INTERCEPTORS, HttpInterceptor} from './src/interceptor';
+export {JsonpClientBackend, JsonpInterceptor} from './src/jsonp';
+export {HttpClientJsonpModule, HttpClientModule, HttpClientXsrfModule, interceptingHandler as ɵinterceptingHandler} from './src/module';
+export {HttpParameterCodec, HttpParams, HttpUrlEncodingCodec} from './src/params';
+export {HttpRequest} from './src/request';
+export {HttpDownloadProgressEvent, HttpErrorResponse, HttpEvent, HttpEventType, HttpHeaderResponse, HttpProgressEvent, HttpResponse, HttpResponseBase, HttpSentEvent, HttpUserEvent} from './src/response';
+export {HttpXhrBackend, XhrFactory} from './src/xhr';
+export {HttpXsrfTokenExtractor} from './src/xsrf';
diff --git a/packages/common/http/rollup.config.js b/packages/common/http/rollup.config.js
new file mode 100644
index 0000000000..dfde0927f1
--- /dev/null
+++ b/packages/common/http/rollup.config.js
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export default {
+  entry: '../../../dist/packages-dist/common/@angular/common/http.es5.js',
+  dest: '../../../dist/packages-dist/common/bundles/common-http.umd.js',
+  format: 'umd',
+  exports: 'named',
+  moduleName: 'ng.commmon.http',
+  globals: {
+    '@angular/core': 'ng.core',
+    '@angular/platform-browser': 'ng.platformBrowser',
+    'rxjs/Observable': 'Rx',
+    'rxjs/Subject': 'Rx'
+  }
+};
diff --git a/packages/common/http/src/backend.ts b/packages/common/http/src/backend.ts
new file mode 100644
index 0000000000..78342d9cef
--- /dev/null
+++ b/packages/common/http/src/backend.ts
@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Observable} from 'rxjs/Observable';
+import {HttpRequest} from './request';
+import {HttpEvent} from './response';
+
+/**
+ * Transforms an `HttpRequest` into a stream of `HttpEvent`s, one of which will likely be a
+ * `HttpResponse`.
+ *
+ * `HttpHandler` is injectable. When injected, the handler instance dispatches requests to the
+ * first interceptor in the chain, which dispatches to the second, etc, eventually reaching the
+ * `HttpBackend`.
+ *
+ * In an `HttpInterceptor`, the `HttpHandler` parameter is the next interceptor in the chain.
+ *
+ * @experimental
+ */
+export abstract class HttpHandler {
+  abstract handle(req: HttpRequest<any>): Observable<HttpEvent<any>>;
+}
+
+/**
+ * A final `HttpHandler` which will dispatch the request via browser HTTP APIs to a backend.
+ *
+ * Interceptors sit between the `HttpClient` interface and the `HttpBackend`.
+ *
+ * When injected, `HttpBackend` dispatches requests directly to the backend, without going
+ * through the interceptor chain.
+ *
+ * @experimental
+ */
+export abstract class HttpBackend implements HttpHandler {
+  abstract handle(req: HttpRequest<any>): Observable<HttpEvent<any>>;
+}
diff --git a/packages/common/http/src/client.ts b/packages/common/http/src/client.ts
new file mode 100644
index 0000000000..43572d1e6d
--- /dev/null
+++ b/packages/common/http/src/client.ts
@@ -0,0 +1,1870 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {of } from 'rxjs/observable/of';
+import {concatMap} from 'rxjs/operator/concatMap';
+import {filter} from 'rxjs/operator/filter';
+import {map} from 'rxjs/operator/map';
+
+import {HttpHandler} from './backend';
+import {HttpHeaders} from './headers';
+import {HttpParams} from './params';
+import {HttpRequest} from './request';
+import {HttpEvent, HttpResponse} from './response';
+
+
+/**
+ * Construct an instance of `HttpRequestOptions<T>` from a source `HttpMethodOptions` and
+ * the given `body`. Basically, this clones the object and adds the body.
+ */
+function addBody<T>(
+    options: {
+      headers?: HttpHeaders,
+      observe?: HttpObserve,
+      params?: HttpParams,
+      reportProgress?: boolean,
+      responseType?: 'arraybuffer' | 'blob' | 'json' | 'text',
+      withCredentials?: boolean,
+    },
+    body: T | null): any {
+  return {
+    body,
+    headers: options.headers,
+    observe: options.observe,
+    params: options.params,
+    reportProgress: options.reportProgress,
+    responseType: options.responseType,
+    withCredentials: options.withCredentials,
+  };
+}
+
+/**
+ * @experimental
+ */
+export type HttpObserve = 'body' | 'events' | 'response';
+
+/**
+ * Perform HTTP requests.
+ *
+ * `HttpClient` is available as an injectable class, with methods to perform HTTP requests.
+ * Each request method has multiple signatures, and the return type varies according to which
+ * signature is called (mainly the values of `observe` and `responseType`).
+ *
+ * @experimental
+ */
+@Injectable()
+export class HttpClient {
+  constructor(private handler: HttpHandler) {}
+
+  /**
+   * Send the given `HttpRequest` and return a stream of `HttpEvents`.
+   */
+  request<R>(req: HttpRequest<any>): Observable<HttpEvent<R>>;
+
+  /**
+   * Construct a request which interprets the body as an `ArrayBuffer` and returns it.
+   *
+   * @return an `Observable` of the body as an `ArrayBuffer`.
+   */
+  request(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<ArrayBuffer>;
+
+  /**
+   * Construct a request which interprets the body as a `Blob` and returns it.
+   *
+   * @return an `Observable` of the body as a `Blob`.
+   */
+  request(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<Blob>;
+
+  /**
+   * Construct a request which interprets the body as text and returns it.
+   *
+   * @return an `Observable` of the body as a `string`.
+   */
+  request(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<string>;
+
+  /**
+   * Construct a request which interprets the body as an `ArrayBuffer` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `ArrayBuffer`.
+   */
+  request(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    params?: HttpParams,
+    observe: 'events', reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpEvent<ArrayBuffer>>;
+
+  /**
+   * Construct a request which interprets the body as an `Blob` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Blob`.
+   */
+  request(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpEvent<Blob>>;
+
+  /**
+   * Construct a request which interprets the body as text and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `string`.
+   */
+  request(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpEvent<string>>;
+
+  /**
+   * Construct a request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Object`.
+   */
+  request(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    reportProgress?: boolean,
+    observe: 'events', params?: HttpParams, responseType?: 'json', withCredentials?: boolean,
+  }): Observable<HttpEvent<any>>;
+
+  /**
+   * Construct a request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `R`.
+   */
+  request<R>(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    reportProgress?: boolean,
+    observe: 'events', params?: HttpParams, responseType?: 'json', withCredentials?: boolean,
+  }): Observable<HttpEvent<R>>;
+
+  /**
+   * Construct a request which interprets the body as an `ArrayBuffer` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `ArrayBuffer`.
+   */
+  request(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpResponse<ArrayBuffer>>;
+
+  /**
+   * Construct a request which interprets the body as a `Blob` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Blob`.
+   */
+  request(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpResponse<Blob>>;
+
+  /**
+   * Construct a request which interprets the body as text and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `string`.
+   */
+  request(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpResponse<string>>;
+
+  /**
+   * Construct a request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Object`.
+   */
+  request(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    reportProgress?: boolean,
+    observe: 'response', params?: HttpParams, responseType?: 'json', withCredentials?: boolean,
+  }): Observable<HttpResponse<Object>>;
+
+  /**
+   * Construct a request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `R`.
+   */
+  request<R>(method: string, url: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    reportProgress?: boolean,
+    observe: 'response', params?: HttpParams, responseType?: 'json', withCredentials?: boolean,
+  }): Observable<HttpResponse<R>>;
+
+  /**
+   * Construct a request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Object`.
+   */
+  request(method: string, url: string, options?: {
+    body?: any,
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    responseType?: 'json',
+    reportProgress?: boolean,
+    withCredentials?: boolean,
+  }): Observable<Object>;
+
+  /**
+   * Construct a request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `R`.
+   */
+  request<R>(method: string, url: string, options?: {
+    body?: any,
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    responseType?: 'json',
+    reportProgress?: boolean,
+    withCredentials?: boolean,
+  }): Observable<R>;
+
+  /**
+   * Construct a request in a manner where response type and requested `Observable` are not known
+   * statically.
+   *
+   * @return an `Observable` of whatever was requested, typed to `any`.
+   */
+  request(method: string, url: string, options?: {
+    body?: any,
+    headers?: HttpHeaders,
+    params?: HttpParams,
+    observe?: HttpObserve,
+    reportProgress?: boolean,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  }): Observable<any>;
+
+  /**
+   * Constructs an `Observable` for a particular HTTP request that, when subscribed,
+   * fires the request through the chain of registered interceptors and on to the
+   * server.
+   *
+   * This method can be called in one of two ways. Either an `HttpRequest`
+   * instance can be passed directly as the only parameter, or a method can be
+   * passed as the first parameter, a string URL as the second, and an
+   * options hash as the third.
+   *
+   * If a `HttpRequest` object is passed directly, an `Observable` of the
+   * raw `HttpEvent` stream will be returned.
+   *
+   * If a request is instead built by providing a URL, the options object
+   * determines the return type of `request()`. In addition to configuring
+   * request parameters such as the outgoing headers and/or the body, the options
+   * hash specifies two key pieces of information about the request: the
+   * `responseType` and what to `observe`.
+   *
+   * The `responseType` value determines how a successful response body will be
+   * parsed. If `responseType` is the default `json`, a type interface for the
+   * resulting object may be passed as a type parameter to `request()`.
+   *
+   * The `observe` value determines the return type of `request()`, based on what
+   * the consumer is interested in observing. A value of `events` will return an
+   * `Observable<HttpEvent>` representing the raw `HttpEvent` stream,
+   * including progress events by default. A value of `response` will return an
+   * `Observable<HttpResponse<T>>` where the `T` parameter of `HttpResponse`
+   * depends on the `responseType` and any optionally provided type parameter.
+   * A value of `body` will return an `Observable<T>` with the same `T` body type.
+   */
+  request(first: string|HttpRequest<any>, url?: string, options: {
+    body?: any,
+    headers?: HttpHeaders,
+    observe?: HttpObserve,
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  } = {}): Observable<any> {
+    let req: HttpRequest<any>;
+    // Firstly, check whether the primary argument is an instance of `HttpRequest`.
+    if (first instanceof HttpRequest) {
+      // It is. The other arguments must be undefined (per the signatures) and can be
+      // ignored.
+      req = first as HttpRequest<any>;
+    } else {
+      // It's a string, so it represents a URL. Construct a request based on it,
+      // and incorporate the remaining arguments (assuming GET unless a method is
+      // provided.
+      req = new HttpRequest(first, url !, options.body || null, {
+        headers: options.headers,
+        params: options.params,
+        reportProgress: options.reportProgress,
+        // By default, JSON is assumed to be returned for all calls.
+        responseType: options.responseType || 'json',
+        withCredentials: options.withCredentials,
+      });
+    }
+
+    // Start with an Observable.of() the initial request, and run the handler (which
+    // includes all interceptors) inside a concatMap(). This way, the handler runs
+    // inside an Observable chain, which causes interceptors to be re-run on every
+    // subscription (this also makes retries re-run the handler, including interceptors).
+    const events$: Observable<HttpEvent<any>> =
+        concatMap.call(of (req), (req: HttpRequest<any>) => this.handler.handle(req));
+
+    // If coming via the API signature which accepts a previously constructed HttpRequest,
+    // the only option is to get the event stream. Otherwise, return the event stream if
+    // that is what was requested.
+    if (first instanceof HttpRequest || options.observe === 'events') {
+      return events$;
+    }
+
+    // The requested stream contains either the full response or the body. In either
+    // case, the first step is to filter the event stream to extract a stream of
+    // responses(s).
+    const res$: Observable<HttpResponse<any>> =
+        filter.call(events$, (event: HttpEvent<any>) => event instanceof HttpResponse);
+
+    // Decide which stream to return.
+    switch (options.observe || 'body') {
+      case 'body':
+        // The requested stream is the body. Map the response stream to the response
+        // body. This could be done more simply, but a misbehaving interceptor might
+        // transform the response body into a different format and ignore the requested
+        // responseType. Guard against this by validating that the response is of the
+        // requested type.
+        switch (req.responseType) {
+          case 'arraybuffer':
+            return map.call(res$, (res: HttpResponse<any>) => {
+              // Validate that the body is an ArrayBuffer.
+              if (res.body !== null && !(res.body instanceof ArrayBuffer)) {
+                throw new Error('Response is not an ArrayBuffer.');
+              }
+              return res.body;
+            });
+          case 'blob':
+            return map.call(res$, (res: HttpResponse<any>) => {
+              // Validate that the body is a Blob.
+              if (res.body !== null && !(res.body instanceof Blob)) {
+                throw new Error('Response is not a Blob.');
+              }
+              return res.body;
+            });
+          case 'text':
+            return map.call(res$, (res: HttpResponse<any>) => {
+              // Validate that the body is a string.
+              if (res.body !== null && typeof res.body !== 'string') {
+                throw new Error('Response is not a string.');
+              }
+              return res.body;
+            });
+          case 'json':
+          default:
+            // No validation needed for JSON responses, as they can be of any type.
+            return map.call(res$, (res: HttpResponse<any>) => res.body);
+        }
+      case 'response':
+        // The response stream was requested directly, so return it.
+        return res$;
+      default:
+        // Guard against new future observe types being added.
+        throw new Error(`Unreachable: unhandled observe type ${options.observe}}`);
+    }
+  }
+
+  /**
+   * Construct a DELETE request which interprets the body as an `ArrayBuffer` and returns it.
+   *
+   * @return an `Observable` of the body as an `ArrayBuffer`.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<ArrayBuffer>;
+
+
+  /**
+   * Construct a DELETE request which interprets the body as a `Blob` and returns it.
+   *
+   * @return an `Observable` of the body as a `Blob`.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<Blob>;
+
+  /**
+   * Construct a DELETE request which interprets the body as text and returns it.
+   *
+   * @return an `Observable` of the body as a `string`.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<string>;
+
+  /**
+   * Construct a DELETE request which interprets the body as an `ArrayBuffer` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `ArrayBuffer`.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpEvent<ArrayBuffer>>;
+
+  /**
+   * Construct a DELETE request which interprets the body as a `Blob` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Blob`.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpEvent<Blob>>;
+
+  /**
+   * Construct a DELETE request which interprets the body as text and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `string`.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpEvent<string>>;
+
+  /**
+   * Construct a DELETE request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Object`.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<Object>>;
+
+  /**
+   * Construct a DELETE request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
+   */
+  delete<T>(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<T>>;
+
+  /**
+   * Construct a DELETE request which interprets the body as an `ArrayBuffer` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `ArrayBuffer`.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpResponse<ArrayBuffer>>;
+
+  /**
+   * Construct a DELETE request which interprets the body as a `Blob` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Blob`.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpResponse<Blob>>;
+
+  /**
+   * Construct a DELETE request which interprets the body as text and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `string`.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpResponse<string>>;
+
+  /**
+   * Construct a DELETE request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Object`.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<Object>>;
+
+  /**
+   * Construct a DELETE request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `T`.
+   */
+  delete<T>(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<T>>;
+
+  /**
+   * Construct a DELETE request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as an `Object`.
+   */
+  delete (url: string, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<Object>;
+
+  /**
+   * Construct a DELETE request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as type `T`.
+   */
+  delete<T>(url: string, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<T>;
+
+  /**
+   * Constructs an `Observable` which, when subscribed, will cause the configured
+   * DELETE request to be executed on the server. See the individual overloads for
+   * details of `delete()`'s return type based on the provided options.
+   */
+  delete (url: string, options: {
+    headers?: HttpHeaders,
+    observe?: HttpObserve,
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  } = {}): Observable<any> {
+    return this.request<any>('DELETE', url, options as any);
+  }
+
+
+  /**
+   * Construct a GET request which interprets the body as an `ArrayBuffer` and returns it.
+   *
+   * @return an `Observable` of the body as an `ArrayBuffer`.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<ArrayBuffer>;
+
+  /**
+   * Construct a GET request which interprets the body as a `Blob` and returns it.
+   *
+   * @return an `Observable` of the body as a `Blob`.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<Blob>;
+
+  /**
+   * Construct a GET request which interprets the body as text and returns it.
+   *
+   * @return an `Observable` of the body as a `string`.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<string>;
+
+  /**
+   * Construct a GET request which interprets the body as an `ArrayBuffer` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `ArrayBuffer`.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpEvent<ArrayBuffer>>;
+
+  /**
+   * Construct a GET request which interprets the body as a `Blob` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Blob`.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpEvent<Blob>>;
+
+  /**
+   * Construct a GET request which interprets the body as text and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `string`.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpEvent<string>>;
+
+  /**
+   * Construct a GET request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Object`.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<Object>>;
+
+  /**
+   * Construct a GET request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
+   */
+  get<T>(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<T>>;
+
+  /**
+   * Construct a GET request which interprets the body as an `ArrayBuffer` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `ArrayBuffer`.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpResponse<ArrayBuffer>>;
+
+  /**
+   * Construct a GET request which interprets the body as a `Blob` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Blob`.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpResponse<Blob>>;
+
+  /**
+   * Construct a GET request which interprets the body as text and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `string`.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpResponse<string>>;
+
+  /**
+   * Construct a GET request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Object`.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<Object>>;
+
+  /**
+   * Construct a GET request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `T`.
+   */
+  get<T>(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<T>>;
+
+  /**
+   * Construct a GET request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as an `Object`.
+   */
+  get(url: string, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<Object>;
+
+  /**
+   * Construct a GET request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as type `T`.
+   */
+  get<T>(url: string, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<T>;
+
+  /**
+   * Constructs an `Observable` which, when subscribed, will cause the configured
+   * GET request to be executed on the server. See the individual overloads for
+   * details of `get()`'s return type based on the provided options.
+   */
+  get(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: HttpObserve,
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  } = {}): Observable<any> {
+    return this.request<any>('GET', url, options as any);
+  }
+
+
+  /**
+   * Construct a HEAD request which interprets the body as an `ArrayBuffer` and returns it.
+   *
+   * @return an `Observable` of the body as an `ArrayBuffer`.
+   */
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+
+    /**
+   * Construct a HEAD request which interprets the body as a `Blob` and returns it.
+   *
+   * @return an `Observable` of the body as a `Blob`.
+   */
+  }): Observable<ArrayBuffer>;
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<Blob>;
+
+  /**
+   * Construct a HEAD request which interprets the body as text and returns it.
+   *
+   * @return an `Observable` of the body as a `string`.
+   */
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<string>;
+
+  /**
+   * Construct a GET request which interprets the body as an `ArrayBuffer` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `ArrayBuffer`.
+   */
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpEvent<ArrayBuffer>>;
+
+  /**
+   * Construct a HEAD request which interprets the body as a `Blob` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Blob`.
+   */
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpEvent<Blob>>;
+
+  /**
+   * Construct a HEAD request which interprets the body as text and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `string`.
+   */
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpEvent<string>>;
+
+  /**
+   * Construct a HEAD request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Object`.
+   */
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<Object>>;
+
+  /**
+   * Construct a HEAD request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
+   */
+  head<T>(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<T>>;
+
+  /**
+   * Construct a HEAD request which interprets the body as an `ArrayBuffer` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `ArrayBuffer`.
+   */
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpResponse<ArrayBuffer>>;
+
+  /**
+   * Construct a HEAD request which interprets the body as a `Blob` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Blob`.
+   */
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpResponse<Blob>>;
+
+  /**
+   * Construct a HEAD request which interprets the body as text and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `string`.
+   */
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpResponse<string>>;
+
+  /**
+   * Construct a HEAD request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Object`.
+   */
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<Object>>;
+
+  /**
+   * Construct a HEAD request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `T`.
+   */
+  head<T>(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<T>>;
+
+  /**
+   * Construct a HEAD request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as an `Object`.
+   */
+  head(url: string, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<Object>;
+
+  /**
+   * Construct a HEAD request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as type `T`.
+   */
+  head<T>(url: string, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<T>;
+
+  /**
+   * Constructs an `Observable` which, when subscribed, will cause the configured
+   * HEAD request to be executed on the server. See the individual overloads for
+   * details of `head()`'s return type based on the provided options.
+   */
+  head(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: HttpObserve,
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  } = {}): Observable<any> {
+    return this.request<any>('HEAD', url, options as any);
+  }
+
+  /**
+   * Construct a JSONP request for the given URL and name of the callback parameter.
+   *
+   * @return an `Observable` of the response object as an `Object`
+   */
+  jsonp(url: string, callbackParam: string): Observable<Object>;
+
+  /**
+   * Construct a JSONP request for the given URL and name of the callback parameter.
+   *
+   * @return an `Observable` of the response object as type `T`.
+   */
+  jsonp<T>(url: string, callbackParam: string): Observable<T>;
+
+  /**
+   * Constructs an `Observable` which, when subscribed, will cause a request
+   * with the special method `JSONP` to be dispatched via the interceptor pipeline.
+   *
+   * A suitable interceptor must be installed (e.g. via the `HttpClientJsonpModule`).
+   * If no such interceptor is reached, then the `JSONP` request will likely be
+   * rejected by the configured backend.
+   */
+  jsonp<T>(url: string, callbackParam: string): Observable<T> {
+    return this.request<any>('JSONP', url, {
+      params: new HttpParams().append(callbackParam, 'JSONP_CALLBACK'),
+      observe: 'body',
+      responseType: 'json',
+    });
+  }
+
+  /**
+   * Make an OPTIONS request which interprets the body as an `ArrayBuffer` and returns it.
+   *
+   * @return an `Observable` of the body as an `ArrayBuffer`.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<ArrayBuffer>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as a `Blob` and returns it.
+   *
+   * @return an `Observable` of the body as a `Blob`.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<Blob>;
+
+  /**
+   * Construct a OPTIONS request which interprets the body as text and returns it.
+   *
+   * @return an `Observable` of the body as a `string`.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<string>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as an `ArrayBuffer` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `ArrayBuffer`.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpEvent<ArrayBuffer>>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as a `Blob` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Blob`.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpEvent<Blob>>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as text and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `string`.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpEvent<string>>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Object`.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<Object>>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
+   */
+  options<T>(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<T>>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as an `ArrayBuffer` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `ArrayBuffer`.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpResponse<ArrayBuffer>>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as a `Blob` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Blob`.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpResponse<Blob>>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as text and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `string`.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpResponse<string>>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Object`.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<Object>>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `T`.
+   */
+  options<T>(url: string, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<T>>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as an `Object`.
+   */
+  options(url: string, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<Object>;
+
+  /**
+   * Construct an OPTIONS request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as type `T`.
+   */
+  options<T>(url: string, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<T>;
+
+  /**
+   * Constructs an `Observable` which, when subscribed, will cause the configured
+   * OPTIONS request to be executed on the server. See the individual overloads for
+   * details of `options()`'s return type based on the provided options.
+   */
+  options(url: string, options: {
+    headers?: HttpHeaders,
+    observe?: HttpObserve,
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  } = {}): Observable<any> {
+    return this.request<any>('OPTIONS', url, options as any);
+  }
+
+  /**
+   * Construct a PATCH request which interprets the body as an `ArrayBuffer` and returns it.
+   *
+   * @return an `Observable` of the body as an `ArrayBuffer`.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<ArrayBuffer>;
+
+  /**
+   * Construct a PATCH request which interprets the body as a `Blob` and returns it.
+   *
+   * @return an `Observable` of the body as a `Blob`.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<Blob>;
+
+  /**
+   * Construct a PATCH request which interprets the body as text and returns it.
+   *
+   * @return an `Observable` of the body as a `string`.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<string>;
+
+  /**
+   * Construct a PATCH request which interprets the body as an `ArrayBuffer` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `ArrayBuffer`.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpEvent<ArrayBuffer>>;
+
+  /**
+   * Construct a PATCH request which interprets the body as a `Blob` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Blob`.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpEvent<Blob>>;
+
+  /**
+   * Construct a PATCH request which interprets the body as text and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `string`.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpEvent<string>>;
+
+  /**
+   * Construct a PATCH request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Object`.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<Object>>;
+
+  /**
+   * Construct a PATCH request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
+   */
+  patch<T>(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<T>>;
+
+  /**
+   * Construct a PATCH request which interprets the body as an `ArrayBuffer` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `ArrayBuffer`.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpResponse<ArrayBuffer>>;
+
+  /**
+   * Construct a PATCH request which interprets the body as a `Blob` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Blob`.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpResponse<Blob>>;
+
+  /**
+   * Construct a PATCH request which interprets the body as text and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `string`.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpResponse<string>>;
+
+  /**
+   * Construct a PATCH request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Object`.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<Object>>;
+
+  /**
+   * Construct a PATCH request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `T`.
+   */
+  patch<T>(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<T>>;
+
+  /**
+   * Construct a PATCH request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as an `Object`.
+   */
+  patch(url: string, body: any|null, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<Object>;
+
+  /**
+   * Construct a PATCH request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as type `T`.
+   */
+  patch<T>(url: string, body: any|null, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<T>;
+
+  /**
+   * Constructs an `Observable` which, when subscribed, will cause the configured
+   * PATCH request to be executed on the server. See the individual overloads for
+   * details of `patch()`'s return type based on the provided options.
+   */
+  patch(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: HttpObserve,
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  } = {}): Observable<any> {
+    return this.request<any>('PATCH', url, addBody(options, body));
+  }
+
+  /**
+   * Construct a POST request which interprets the body as an `ArrayBuffer` and returns it.
+   *
+   * @return an `Observable` of the body as an `ArrayBuffer`.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<ArrayBuffer>;
+
+  /**
+   * Construct a POST request which interprets the body as a `Blob` and returns it.
+   *
+   * @return an `Observable` of the body as a `Blob`.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<Blob>;
+
+  /**
+   * Construct a POST request which interprets the body as text and returns it.
+   *
+   * @return an `Observable` of the body as a `string`.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<string>;
+
+  /**
+   * Construct a PATCH request which interprets the body as an `ArrayBuffer` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `ArrayBuffer`.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpEvent<ArrayBuffer>>;
+
+  /**
+   * Construct a POST request which interprets the body as a `Blob` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Blob`.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpEvent<Blob>>;
+
+  /**
+   * Construct a POST request which interprets the body as text and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `string`.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpEvent<string>>;
+
+  /**
+   * Construct a POST request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Object`.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<Object>>;
+
+  /**
+   * Construct a POST request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
+   */
+  post<T>(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<T>>;
+
+  /**
+   * Construct a POST request which interprets the body as an `ArrayBuffer` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `ArrayBuffer`.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpResponse<ArrayBuffer>>;
+
+  /**
+   * Construct a POST request which interprets the body as a `Blob` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Blob`.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpResponse<Blob>>;
+
+  /**
+   * Construct a POST request which interprets the body as text and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `string`.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpResponse<string>>;
+
+  /**
+   * Construct a POST request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Object`.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<Object>>;
+
+  /**
+   * Construct a POST request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `T`.
+   */
+  post<T>(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<T>>;
+
+  /**
+   * Construct a POST request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as an `Object`.
+   */
+  post(url: string, body: any|null, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<Object>;
+
+  /**
+   * Construct a POST request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as type `T`.
+   */
+  post<T>(url: string, body: any|null, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<T>;
+
+  /**
+   * Constructs an `Observable` which, when subscribed, will cause the configured
+   * POST request to be executed on the server. See the individual overloads for
+   * details of `post()`'s return type based on the provided options.
+   */
+  post(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: HttpObserve,
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  } = {}): Observable<any> {
+    return this.request<any>('POST', url, addBody(options, body));
+  }
+
+  /**
+   * Construct a PUT request which interprets the body as an `ArrayBuffer` and returns it.
+   *
+   * @return an `Observable` of the body as an `ArrayBuffer`.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<ArrayBuffer>;
+
+  /**
+   * Construct a PUT request which interprets the body as a `Blob` and returns it.
+   *
+   * @return an `Observable` of the body as a `Blob`.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<Blob>;
+
+  /**
+   * Construct a PUT request which interprets the body as text and returns it.
+   *
+   * @return an `Observable` of the body as a `string`.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<string>;
+
+  /**
+   * Construct a PUT request which interprets the body as an `ArrayBuffer` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `ArrayBuffer`.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpEvent<ArrayBuffer>>;
+
+  /**
+   * Construct a PUT request which interprets the body as a `Blob` and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Blob`.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpEvent<Blob>>;
+
+  /**
+   * Construct a PUT request which interprets the body as text and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `string`.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpEvent<string>>;
+
+  /**
+   * Construct a PUT request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `Object`.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpEvent<Object>>;
+
+  /**
+   * Construct a PUT request which interprets the body as JSON and returns the full event stream.
+   *
+   * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
+   */
+  put<T>(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'events', responseType?: 'json', withCredentials?: boolean,
+  }): Observable<HttpEvent<T>>;
+
+  /**
+   * Construct a PUT request which interprets the body as an `ArrayBuffer` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `ArrayBuffer`.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'arraybuffer', withCredentials?: boolean,
+  }): Observable<HttpResponse<ArrayBuffer>>;
+
+  /**
+   * Construct a PUT request which interprets the body as a `Blob` and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Blob`.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'blob', withCredentials?: boolean,
+  }): Observable<HttpResponse<Blob>>;
+
+  /**
+   * Construct a PUT request which interprets the body as text and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `string`.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response', params?: HttpParams, reportProgress?: boolean,
+    responseType: 'text', withCredentials?: boolean,
+  }): Observable<HttpResponse<string>>;
+
+  /**
+   * Construct a PUT request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `Object`.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<Object>>;
+
+  /**
+   * Construct a PUT request which interprets the body as JSON and returns the full response.
+   *
+   * @return an `Observable` of the `HttpResponse` for the request, with a body type of `T`.
+   */
+  put<T>(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe: 'response',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<HttpResponse<T>>;
+
+  /**
+   * Construct a PUT request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as an `Object`.
+   */
+  put(url: string, body: any|null, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<Object>;
+
+  /**
+   * Construct a PUT request which interprets the body as JSON and returns it.
+   *
+   * @return an `Observable` of the body as type `T`.
+   */
+  put<T>(url: string, body: any|null, options?: {
+    headers?: HttpHeaders,
+    observe?: 'body',
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'json',
+    withCredentials?: boolean,
+  }): Observable<T>;
+
+  /**
+   * Constructs an `Observable` which, when subscribed, will cause the configured
+   * POST request to be executed on the server. See the individual overloads for
+   * details of `post()`'s return type based on the provided options.
+   */
+  put(url: string, body: any|null, options: {
+    headers?: HttpHeaders,
+    observe?: HttpObserve,
+    params?: HttpParams,
+    reportProgress?: boolean,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  } = {}): Observable<any> {
+    return this.request<any>('PUT', url, addBody(options, body));
+  }
+}
diff --git a/packages/common/http/src/headers.ts b/packages/common/http/src/headers.ts
new file mode 100755
index 0000000000..40a99438a8
--- /dev/null
+++ b/packages/common/http/src/headers.ts
@@ -0,0 +1,214 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+interface Update {
+  name: string;
+  value?: string|string[];
+  op: 'a'|'s'|'d';
+}
+
+/**
+ * Immutable set of Http headers, with lazy parsing.
+ * @experimental
+ */
+export class HttpHeaders {
+  /**
+   * Internal map of lowercase header names to values.
+   */
+  private headers: Map<string, string[]>;
+
+
+  /**
+   * Internal map of lowercased header names to the normalized
+   * form of the name (the form seen first).
+   */
+  private normalizedNames: Map<string, string> = new Map();
+
+  /**
+   * Complete the lazy initialization of this object (needed before reading).
+   */
+  private lazyInit: HttpHeaders|Function|null;
+
+  /**
+   * Queued updates to be materialized the next initialization.
+   */
+  private lazyUpdate: Update[]|null = null;
+
+  constructor(headers?: string|{[name: string]: string | string[]}) {
+    if (!headers) {
+      this.headers = new Map<string, string[]>();
+    } else if (typeof headers === 'string') {
+      this.lazyInit = () => {
+        this.headers = new Map<string, string[]>();
+        headers.split('\n').forEach(line => {
+          const index = line.indexOf(':');
+          if (index > 0) {
+            const name = line.slice(0, index);
+            const key = name.toLowerCase();
+            const value = line.slice(index + 1).trim();
+            this.maybeSetNormalizedName(name, key);
+            if (this.headers.has(key)) {
+              this.headers.get(key) !.push(value);
+            } else {
+              this.headers.set(key, [value]);
+            }
+          }
+        });
+      };
+    } else {
+      this.lazyInit = () => {
+        this.headers = new Map<string, string[]>();
+        Object.keys(headers).forEach(name => {
+          let values: string|string[] = headers[name];
+          const key = name.toLowerCase();
+          if (typeof values === 'string') {
+            values = [values];
+          }
+          if (values.length > 0) {
+            this.headers.set(key, values);
+            this.maybeSetNormalizedName(name, key);
+          }
+        });
+      };
+    }
+  }
+
+  /**
+   * Checks for existence of header by given name.
+   */
+  has(name: string): boolean {
+    this.init();
+
+    return this.headers.has(name.toLowerCase());
+  }
+
+  /**
+   * Returns first header that matches given name.
+   */
+  get(name: string): string|null {
+    this.init();
+
+    const values = this.headers.get(name.toLowerCase());
+    return values && values.length > 0 ? values[0] : null;
+  }
+
+  /**
+   * Returns the names of the headers
+   */
+  keys(): string[] {
+    this.init();
+
+    return Array.from(this.normalizedNames.values());
+  }
+
+  /**
+   * Returns list of header values for a given name.
+   */
+  getAll(name: string): string[]|null {
+    this.init();
+
+    return this.headers.get(name.toLowerCase()) || null;
+  }
+
+  append(name: string, value: string|string[]): HttpHeaders {
+    return this.clone({name, value, op: 'a'});
+  }
+
+  set(name: string, value: string|string[]): HttpHeaders {
+    return this.clone({name, value, op: 's'});
+  }
+
+  delete (name: string, value?: string|string[]): HttpHeaders {
+    return this.clone({name, value, op: 'd'});
+  }
+
+  private maybeSetNormalizedName(name: string, lcName: string): void {
+    if (!this.normalizedNames.has(lcName)) {
+      this.normalizedNames.set(lcName, name);
+    }
+  }
+
+  private init(): void {
+    if (!!this.lazyInit) {
+      if (this.lazyInit instanceof HttpHeaders) {
+        this.copyFrom(this.lazyInit);
+      } else {
+        this.lazyInit();
+      }
+      this.lazyInit = null;
+      if (!!this.lazyUpdate) {
+        this.lazyUpdate.forEach(update => this.applyUpdate(update));
+        this.lazyUpdate = null;
+      }
+    }
+  }
+
+  private copyFrom(other: HttpHeaders) {
+    other.init();
+    Array.from(other.headers.keys()).forEach(key => {
+      this.headers.set(key, other.headers.get(key) !);
+      this.normalizedNames.set(key, other.normalizedNames.get(key) !);
+    });
+  }
+
+  private clone(update: Update): HttpHeaders {
+    const clone = new HttpHeaders();
+    clone.lazyInit =
+        (!!this.lazyInit && this.lazyInit instanceof HttpHeaders) ? this.lazyInit : this;
+    clone.lazyUpdate = (this.lazyUpdate || []).concat([update]);
+    return clone;
+  }
+
+  private applyUpdate(update: Update): void {
+    const key = update.name.toLowerCase();
+    switch (update.op) {
+      case 'a':
+      case 's':
+        let value = update.value !;
+        if (typeof value === 'string') {
+          value = [value];
+        }
+        if (value.length === 0) {
+          return;
+        }
+        this.maybeSetNormalizedName(update.name, key);
+        const base = (update.op === 'a' ? this.headers.get(key) : undefined) || [];
+        base.push(...value);
+        this.headers.set(key, base);
+        break;
+      case 'd':
+        const toDelete = update.value as string | undefined;
+        if (!toDelete) {
+          this.headers.delete(key);
+          this.normalizedNames.delete(key);
+        } else {
+          let existing = this.headers.get(key);
+          if (!existing) {
+            return;
+          }
+          existing = existing.filter(value => toDelete.indexOf(value) === -1);
+          if (existing.length === 0) {
+            this.headers.delete(key);
+            this.normalizedNames.delete(key);
+          } else {
+            this.headers.set(key, existing);
+          }
+        }
+        break;
+    }
+  }
+
+  /**
+   * @internal
+   */
+  forEach(fn: (name: string, values: string[]) => void) {
+    this.init();
+    Array.from(this.normalizedNames.keys())
+        .forEach(key => fn(this.normalizedNames.get(key) !, this.headers.get(key) !));
+  }
+}
diff --git a/packages/common/http/src/interceptor.ts b/packages/common/http/src/interceptor.ts
new file mode 100644
index 0000000000..a778e83a55
--- /dev/null
+++ b/packages/common/http/src/interceptor.ts
@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injectable, InjectionToken} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+
+import {HttpHandler} from './backend';
+import {HttpRequest} from './request';
+import {HttpEvent} from './response';
+
+/**
+ * Intercepts `HttpRequest` and handles them.
+ *
+ * Most interceptors will transform the outgoing request before passing it to the
+ * next interceptor in the chain, by calling `next.handle(transformedReq)`.
+ *
+ * In rare cases, interceptors may wish to completely handle a request themselves,
+ * and not delegate to the remainder of the chain. This behavior is allowed.
+ *
+ * @experimental
+ */
+export interface HttpInterceptor {
+  /**
+   * Intercept an outgoing `HttpRequest` and optionally transform it or the
+   * response.
+   *
+   * Typically an interceptor will transform the outgoing request before returning
+   * `next.handle(transformedReq)`. An interceptor may choose to transform the
+   * response event stream as well, by applying additional Rx operators on the stream
+   * returned by `next.handle()`.
+   *
+   * More rarely, an interceptor may choose to completely handle the request itself,
+   * and compose a new event stream instead of invoking `next.handle()`. This is
+   * acceptable behavior, but keep in mind further interceptors will be skipped entirely.
+   *
+   * It is also rare but valid for an interceptor to return multiple responses on the
+   * event stream for a single request.
+   */
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
+}
+
+/**
+ * `HttpHandler` which applies an `HttpInterceptor` to an `HttpRequest`.
+ *
+ * @experimental
+ */
+export class HttpInterceptorHandler implements HttpHandler {
+  constructor(private next: HttpHandler, private interceptor: HttpInterceptor) {}
+
+  handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
+    return this.interceptor.intercept(req, this.next);
+  }
+}
+
+/**
+ * A multi-provider token which represents the array of `HttpInterceptor`s that
+ * are registered.
+ *
+ * @experimental
+ */
+export const HTTP_INTERCEPTORS = new InjectionToken<HttpInterceptor[]>('HTTP_INTERCEPTORS');
+
+@Injectable()
+export class NoopInterceptor implements HttpInterceptor {
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(req);
+  }
+}
diff --git a/packages/common/http/src/jsonp.ts b/packages/common/http/src/jsonp.ts
new file mode 100644
index 0000000000..4b25b5da40
--- /dev/null
+++ b/packages/common/http/src/jsonp.ts
@@ -0,0 +1,223 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {DOCUMENT} from '@angular/common';
+import {Inject, Injectable, InjectionToken} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {Observer} from 'rxjs/Observer';
+
+import {HttpBackend, HttpHandler} from './backend';
+import {HttpRequest} from './request';
+import {HttpErrorResponse, HttpEvent, HttpEventType, HttpResponse} from './response';
+
+// Every request made through JSONP needs a callback name that's unique across the
+// whole page. Each request is assigned an id and the callback name is constructed
+// from that. The next id to be assigned is tracked in a global variable here that
+// is shared among all applications on the page.
+let nextRequestId: number = 0;
+
+// Error text given when a JSONP script is injected, but doesn't invoke the callback
+// passed in its URL.
+export const JSONP_ERR_NO_CALLBACK = 'JSONP injected script did not invoke callback.';
+
+// Error text given when a request is passed to the JsonpClientBackend that doesn't
+// have a request method JSONP.
+export const JSONP_ERR_WRONG_METHOD = 'JSONP requests must use JSONP request method.';
+export const JSONP_ERR_WRONG_RESPONSE_TYPE = 'JSONP requests must use Json response type.';
+
+/**
+ * DI token/abstract type representing a map of JSONP callbacks.
+ *
+ * In the browser, this should always be the `window` object.
+ *
+ * @experimental
+ */
+export abstract class JsonpCallbackContext { [key: string]: (data: any) => void; }
+
+/**
+ * `HttpBackend` that only processes `HttpRequest` with the JSONP method,
+ * by performing JSONP style requests.
+ *
+ * @experimental
+ */
+@Injectable()
+export class JsonpClientBackend implements HttpBackend {
+  constructor(private callbackMap: JsonpCallbackContext, @Inject(DOCUMENT) private document: any) {}
+
+  /**
+   * Get the name of the next callback method, by incrementing the global `nextRequestId`.
+   */
+  private nextCallback(): string { return `ng_jsonp_callback_${nextRequestId++}`; }
+
+  /**
+   * Process a JSONP request and return an event stream of the results.
+   */
+  handle(req: HttpRequest<never>): Observable<HttpEvent<any>> {
+    // Firstly, check both the method and response type. If either doesn't match
+    // then the request was improperly routed here and cannot be handled.
+    if (req.method !== 'JSONP') {
+      throw new Error(JSONP_ERR_WRONG_METHOD);
+    } else if (req.responseType !== 'json') {
+      throw new Error(JSONP_ERR_WRONG_RESPONSE_TYPE);
+    }
+
+    // Everything else happens inside the Observable boundary.
+    return new Observable<HttpEvent<any>>((observer: Observer<HttpEvent<any>>) => {
+      // The first step to make a request is to generate the callback name, and replace the
+      // callback placeholder in the URL with the name. Care has to be taken here to ensure
+      // a trailing &, if matched, gets inserted back into the URL in the correct place.
+      const callback = this.nextCallback();
+      const url = req.urlWithParams.replace(/=JSONP_CALLBACK(&|$)/, `=${callback}$1`);
+
+      // Construct the <script> tag and point it at the URL.
+      const node = this.document.createElement('script');
+      node.src = url;
+
+      // A JSONP request requires waiting for multiple callbacks. These variables
+      // are closed over and track state across those callbacks.
+
+      // The response object, if one has been received, or null otherwise.
+      let body: any|null = null;
+
+      // Whether the response callback has been called.
+      let finished: boolean = false;
+
+      // Whether the request has been cancelled (and thus any other callbacks)
+      // should be ignored.
+      let cancelled: boolean = false;
+
+      // Set the response callback in this.callbackMap (which will be the window
+      // object in the browser. The script being loaded via the <script> tag will
+      // eventually call this callback.
+      this.callbackMap[callback] = (data?: any) => {
+        // Data has been received from the JSONP script. Firstly, delete this callback.
+        delete this.callbackMap[callback];
+
+        // Next, make sure the request wasn't cancelled in the meantime.
+        if (cancelled) {
+          return;
+        }
+
+        // Set state to indicate data was received.
+        body = data;
+        finished = true;
+      };
+
+      // cleanup() is a utility closure that removes the <script> from the page and
+      // the response callback from the window. This logic is used in both the
+      // success, error, and cancellation paths, so it's extracted out for convenience.
+      const cleanup = () => {
+        // Remove the <script> tag if it's still on the page.
+        if (node.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+
+        // Remove the response callback from the callbackMap (window object in the
+        // browser).
+        delete this.callbackMap[callback];
+      };
+
+      // onLoad() is the success callback which runs after the response callback
+      // if the JSONP script loads successfully. The event itself is unimportant.
+      // If something went wrong, onLoad() may run without the response callback
+      // having been invoked.
+      const onLoad = (event: Event) => {
+        // Do nothing if the request has been cancelled.
+        if (cancelled) {
+          return;
+        }
+
+        // Cleanup the page.
+        cleanup();
+
+        // Check whether the response callback has run.
+        if (!finished) {
+          // It hasn't, something went wrong with the request. Return an error via
+          // the Observable error path. All JSONP errors have status 0.
+          observer.error(new HttpErrorResponse({
+            url,
+            status: 0,
+            statusText: 'JSONP Error',
+            error: new Error(JSONP_ERR_NO_CALLBACK),
+          }));
+          return;
+        }
+
+        // Success. body either contains the response body or null if none was
+        // returned.
+        observer.next(new HttpResponse({
+          body,
+          status: 200,
+          statusText: 'OK', url,
+        }));
+
+        // Complete the stream, the resposne is over.
+        observer.complete();
+      };
+
+      // onError() is the error callback, which runs if the script returned generates
+      // a Javascript error. It emits the error via the Observable error channel as
+      // a HttpErrorResponse.
+      const onError: any = (error: Error) => {
+        // If the request was already cancelled, no need to emit anything.
+        if (cancelled) {
+          return;
+        }
+        cleanup();
+
+        // Wrap the error in a HttpErrorResponse.
+        observer.error(new HttpErrorResponse({
+          error,
+          status: 0,
+          statusText: 'JSONP Error', url,
+        }));
+      };
+
+      // Subscribe to both the success (load) and error events on the <script> tag,
+      // and add it to the page.
+      node.addEventListener('load', onLoad);
+      node.addEventListener('error', onError);
+      this.document.body.appendChild(node);
+
+      // The request has now been successfully sent.
+      observer.next({type: HttpEventType.Sent});
+
+      // Cancellation handler.
+      return () => {
+        // Track the cancellation so event listeners won't do anything even if already scheduled.
+        cancelled = true;
+
+        // Remove the event listeners so they won't run if the events later fire.
+        node.removeEventListener('load', onLoad);
+        node.removeEventListener('error', onError);
+
+        // And finally, clean up the page.
+        cleanup();
+      };
+    });
+  }
+}
+
+/**
+ * An `HttpInterceptor` which identifies requests with the method JSONP and
+ * shifts them to the `JsonpClientBackend`.
+ *
+ * @experimental
+ */
+@Injectable()
+export class JsonpInterceptor {
+  constructor(private jsonp: JsonpClientBackend) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (req.method === 'JSONP') {
+      return this.jsonp.handle(req as HttpRequest<never>);
+    }
+    // Fall through for normal HTTP requests.
+    return next.handle(req);
+  }
+}
diff --git a/packages/common/http/src/module.ts b/packages/common/http/src/module.ts
new file mode 100644
index 0000000000..f1667dd102
--- /dev/null
+++ b/packages/common/http/src/module.ts
@@ -0,0 +1,153 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Inject, ModuleWithProviders, NgModule, Optional} from '@angular/core';
+
+import {HttpBackend, HttpHandler} from './backend';
+import {HttpClient} from './client';
+import {HTTP_INTERCEPTORS, HttpInterceptor, HttpInterceptorHandler, NoopInterceptor} from './interceptor';
+import {JsonpCallbackContext, JsonpClientBackend, JsonpInterceptor} from './jsonp';
+import {BrowserXhr, HttpXhrBackend, XhrFactory} from './xhr';
+import {HttpXsrfCookieExtractor, HttpXsrfInterceptor, HttpXsrfTokenExtractor, XSRF_COOKIE_NAME, XSRF_HEADER_NAME} from './xsrf';
+
+
+
+/**
+ * Constructs an `HttpHandler` that applies a bunch of `HttpInterceptor`s
+ * to a request before passing it to the given `HttpBackend`.
+ *
+ * Meant to be used as a factory function within `HttpClientModule`.
+ *
+ * @experimental
+ */
+export function interceptingHandler(
+    backend: HttpBackend, interceptors: HttpInterceptor[] | null = []): HttpHandler {
+  if (!interceptors) {
+    return backend;
+  }
+  return interceptors.reduceRight(
+      (next, interceptor) => new HttpInterceptorHandler(next, interceptor), backend);
+}
+
+/**
+ * Factory function that determines where to store JSONP callbacks.
+ *
+ * Ordinarily JSONP callbacks are stored on the `window` object, but this may not exist
+ * in test environments. In that case, callbacks are stored on an anonymous object instead.
+ *
+ * @experimental
+ */
+export function jsonpCallbackContext(): Object {
+  if (typeof window === 'object') {
+    return window;
+  }
+  return {};
+}
+
+/**
+ * `NgModule` which adds XSRF protection support to outgoing requests.
+ *
+ * Provided the server supports a cookie-based XSRF protection system, this
+ * module can be used directly to configure XSRF protection with the correct
+ * cookie and header names.
+ *
+ * If no such names are provided, the default is to use `X-XSRF-TOKEN` for
+ * the header name and `XSRF-TOKEN` for the cookie name.
+ *
+ * @experimental
+ */
+@NgModule({
+  providers: [
+    HttpXsrfInterceptor,
+    {provide: HTTP_INTERCEPTORS, useExisting: HttpXsrfInterceptor, multi: true},
+    {provide: HttpXsrfTokenExtractor, useClass: HttpXsrfCookieExtractor},
+    {provide: XSRF_COOKIE_NAME, useValue: 'XSRF-TOKEN'},
+    {provide: XSRF_HEADER_NAME, useValue: 'X-XSRF-TOKEN'},
+  ],
+})
+export class HttpClientXsrfModule {
+  /**
+   * Disable the default XSRF protection.
+   */
+  static disable(): ModuleWithProviders {
+    return {
+      ngModule: HttpClientXsrfModule,
+      providers: [
+        {provide: HttpXsrfInterceptor, useClass: NoopInterceptor},
+      ],
+    };
+  }
+
+  /**
+   * Configure XSRF protection to use the given cookie name or header name,
+   * or the default names (as described above) if not provided.
+   */
+  static withOptions(options: {
+    cookieName?: string,
+    headerName?: string,
+  } = {}): ModuleWithProviders {
+    return {
+      ngModule: HttpClientXsrfModule,
+      providers: [
+        options.cookieName ? {provide: XSRF_COOKIE_NAME, useValue: options.cookieName} : [],
+        options.headerName ? {provide: XSRF_HEADER_NAME, useValue: options.headerName} : [],
+      ],
+    };
+  }
+}
+
+/**
+ * `NgModule` which provides the `HttpClient` and associated services.
+ *
+ * Interceptors can be added to the chain behind `HttpClient` by binding them
+ * to the multiprovider for `HTTP_INTERCEPTORS`.
+ *
+ * @experimental
+ */
+@NgModule({
+  imports: [
+    HttpClientXsrfModule.withOptions({
+      cookieName: 'XSRF-TOKEN',
+      headerName: 'X-XSRF-TOKEN',
+    }),
+  ],
+  providers: [
+    HttpClient,
+    // HttpHandler is the backend + interceptors and is constructed
+    // using the interceptingHandler factory function.
+    {
+      provide: HttpHandler,
+      useFactory: interceptingHandler,
+      deps: [HttpBackend, [new Optional(), new Inject(HTTP_INTERCEPTORS)]],
+    },
+    HttpXhrBackend,
+    {provide: HttpBackend, useExisting: HttpXhrBackend},
+    BrowserXhr,
+    {provide: XhrFactory, useExisting: BrowserXhr},
+  ],
+})
+export class HttpClientModule {
+}
+
+/**
+ * `NgModule` which enables JSONP support in `HttpClient`.
+ *
+ * Without this module, Jsonp requests will reach the backend
+ * with method JSONP, where they'll be rejected.
+ *
+ * @experimental
+ */
+@NgModule({
+  providers: [
+    JsonpClientBackend,
+    {provide: JsonpCallbackContext, useFactory: jsonpCallbackContext},
+    {provide: HTTP_INTERCEPTORS, useClass: JsonpInterceptor, multi: true},
+  ],
+})
+export class HttpClientJsonpModule {
+}
diff --git a/packages/common/http/src/params.ts b/packages/common/http/src/params.ts
new file mode 100755
index 0000000000..8c8e7dbe38
--- /dev/null
+++ b/packages/common/http/src/params.ts
@@ -0,0 +1,206 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/**
+ * A codec for encoding and decoding parameters in URLs.
+ *
+ * Used by `HttpParams`.
+ *
+ *  @experimental
+ **/
+export interface HttpParameterCodec {
+  encodeKey(key: string): string;
+  encodeValue(value: string): string;
+
+  decodeKey(key: string): string;
+  decodeValue(value: string): string;
+}
+
+/**
+ * A `HttpParameterCodec` that uses `encodeURIComponent` and `decodeURIComponent` to
+ * serialize and parse URL parameter keys and values.
+ *
+ * @experimental
+ */
+export class HttpUrlEncodingCodec implements HttpParameterCodec {
+  encodeKey(k: string): string { return standardEncoding(k); }
+
+  encodeValue(v: string): string { return standardEncoding(v); }
+
+  decodeKey(k: string): string { return decodeURIComponent(k); }
+
+  decodeValue(v: string) { return decodeURIComponent(v); }
+}
+
+
+function paramParser(rawParams: string, codec: HttpParameterCodec): Map<string, string[]> {
+  const map = new Map<string, string[]>();
+  if (rawParams.length > 0) {
+    const params: string[] = rawParams.split('&');
+    params.forEach((param: string) => {
+      const eqIdx = param.indexOf('=');
+      const [key, val]: string[] = eqIdx == -1 ?
+          [codec.decodeKey(param), ''] :
+          [codec.decodeKey(param.slice(0, eqIdx)), codec.decodeValue(param.slice(eqIdx + 1))];
+      const list = map.get(key) || [];
+      list.push(val);
+      map.set(key, list);
+    });
+  }
+  return map;
+}
+function standardEncoding(v: string): string {
+  return encodeURIComponent(v)
+      .replace(/%40/gi, '@')
+      .replace(/%3A/gi, ':')
+      .replace(/%24/gi, '$')
+      .replace(/%2C/gi, ',')
+      .replace(/%3B/gi, ';')
+      .replace(/%2B/gi, '+')
+      .replace(/%3D/gi, '=')
+      .replace(/%3F/gi, '?')
+      .replace(/%2F/gi, '/');
+}
+
+interface Update {
+  param: string;
+  value?: string;
+  op: 'a'|'d'|'s';
+}
+
+/**
+ * An HTTP request/response body that represents serialized parameters,
+ * per the MIME type `application/x-www-form-urlencoded`.
+ *
+ * This class is immuatable - all mutation operations return a new instance.
+ *
+ * @experimental
+ */
+export class HttpParams {
+  private map: Map<string, string[]>|null;
+  private encoder: HttpParameterCodec;
+  private updates: Update[]|null = null;
+  private cloneFrom: HttpParams|null = null;
+
+  constructor(options: {
+    fromString?: string,
+    encoder?: HttpParameterCodec,
+  } = {}) {
+    this.encoder = options.encoder || new HttpUrlEncodingCodec();
+    this.map = !!options.fromString ? paramParser(options.fromString, this.encoder) : null;
+  }
+
+  /**
+   * Check whether the body has one or more values for the given parameter name.
+   */
+  has(param: string): boolean {
+    this.init();
+    return this.map !.has(param);
+  }
+
+  /**
+   * Get the first value for the given parameter name, or `null` if it's not present.
+   */
+  get(param: string): string|null {
+    this.init();
+    const res = this.map !.get(param);
+    return !!res ? res[0] : null;
+  }
+
+  /**
+   * Get all values for the given parameter name, or `null` if it's not present.
+   */
+  getAll(param: string): string[]|null {
+    this.init();
+    return this.map !.get(param) || null;
+  }
+
+  /**
+   * Get all the parameter names for this body.
+   */
+  keys(): string[] {
+    this.init();
+    return Array.from(this.map !.keys());
+  }
+
+  /**
+   * Construct a new body with an appended value for the given parameter name.
+   */
+  append(param: string, value: string): HttpParams { return this.clone({param, value, op: 'a'}); }
+
+  /**
+   * Construct a new body with a new value for the given parameter name.
+   */
+  set(param: string, value: string): HttpParams { return this.clone({param, value, op: 's'}); }
+
+  /**
+   * Construct a new body with either the given value for the given parameter
+   * removed, if a value is given, or all values for the given parameter removed
+   * if not.
+   */
+  delete (param: string, value?: string): HttpParams { return this.clone({param, value, op: 'd'}); }
+
+  /**
+   * Serialize the body to an encoded string, where key-value pairs (separated by `=`) are
+   * separated by `&`s.
+   */
+  toString(): string {
+    this.init();
+    return this.keys()
+        .map(key => {
+          const eKey = this.encoder.encodeKey(key);
+          return this.map !.get(key) !.map(value => eKey + '=' + this.encoder.encodeValue(value))
+              .join('&');
+        })
+        .join('&');
+  }
+
+  private clone(update: Update): HttpParams {
+    const clone = new HttpParams({encoder: this.encoder});
+    clone.cloneFrom = this.cloneFrom || this;
+    clone.updates = (this.updates || []).concat([update]);
+    return clone;
+  }
+
+  private init() {
+    if (this.map === null) {
+      this.map = new Map<string, string[]>();
+    }
+    if (this.cloneFrom !== null) {
+      this.cloneFrom.init();
+      this.cloneFrom.keys().forEach(key => this.map !.set(key, this.cloneFrom !.map !.get(key) !));
+      this.updates !.forEach(update => {
+        switch (update.op) {
+          case 'a':
+          case 's':
+            const base = (update.op === 'a' ? this.map !.get(update.param) : undefined) || [];
+            base.push(update.value !);
+            this.map !.set(update.param, base);
+            break;
+          case 'd':
+            if (update.value !== undefined) {
+              let base = this.map !.get(update.param) || [];
+              const idx = base.indexOf(update.value);
+              if (idx !== -1) {
+                base.splice(idx, 1);
+              }
+              if (base.length > 0) {
+                this.map !.set(update.param, base);
+              } else {
+                this.map !.delete(update.param);
+              }
+            } else {
+              this.map !.delete(update.param);
+              break;
+            }
+        }
+      });
+      this.cloneFrom = null;
+    }
+  }
+}
diff --git a/packages/common/http/src/request.ts b/packages/common/http/src/request.ts
new file mode 100644
index 0000000000..7673e71f0e
--- /dev/null
+++ b/packages/common/http/src/request.ts
@@ -0,0 +1,382 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HttpHeaders} from './headers';
+import {HttpParams} from './params';
+
+/**
+ * Construction interface for `HttpRequest`s.
+ *
+ * All values are optional and will override default values if provided.
+ */
+interface HttpRequestInit {
+  headers?: HttpHeaders, reportProgress?: boolean, params?: HttpParams,
+      responseType?: 'arraybuffer'|'blob'|'json'|'text', withCredentials?: boolean,
+}
+
+/**
+ * Determine whether the given HTTP method may include a body.
+ */
+function mightHaveBody(method: string): boolean {
+  switch (method) {
+    case 'DELETE':
+    case 'GET':
+    case 'HEAD':
+    case 'OPTIONS':
+    case 'JSONP':
+      return false;
+    default:
+      return true;
+  }
+}
+
+/**
+ * Safely assert whether the given value is an ArrayBuffer.
+ *
+ * In some execution environments ArrayBuffer is not defined.
+ */
+function isArrayBuffer(value: any): value is ArrayBuffer {
+  return typeof ArrayBuffer !== 'undefined' && value instanceof ArrayBuffer;
+}
+
+/**
+ * Safely assert whether the given value is a Blob.
+ *
+ * In some execution environments Blob is not defined.
+ */
+function isBlob(value: any): value is Blob {
+  return typeof Blob !== 'undefined' && value instanceof Blob;
+}
+
+/**
+ * Safely assert whether the given value is a FormData instance.
+ *
+ * In some execution environments FormData is not defined.
+ */
+function isFormData(value: any): value is FormData {
+  return typeof FormData !== 'undefined' && value instanceof FormData;
+}
+
+/**
+ * An outgoing HTTP request with an optional typed body.
+ *
+ * `HttpRequest` represents an outgoing request, including URL, method,
+ * headers, body, and other request configuration options. Instances should be
+ * assumed to be immutable. To modify a `HttpRequest`, the `clone`
+ * method should be used.
+ *
+ * @experimental
+ */
+export class HttpRequest<T> {
+  /**
+   * The request body, or `null` if one isn't set.
+   *
+   * Bodies are not enforced to be immutable, as they can include a reference to any
+   * user-defined data type. However, interceptors should take care to preserve
+   * idempotence by treating them as such.
+   */
+  readonly body: T|null = null;
+
+  /**
+   * Outgoing headers for this request.
+   */
+  readonly headers: HttpHeaders;
+
+  /**
+   * Whether this request should be made in a way that exposes progress events.
+   *
+   * Progress events are expensive (change detection runs on each event) and so
+   * they should only be requested if the consumer intends to monitor them.
+   */
+  readonly reportProgress: boolean = false;
+
+  /**
+   * Whether this request should be sent with outgoing credentials (cookies).
+   */
+  readonly withCredentials: boolean = false;
+
+  /**
+   * The expected response type of the server.
+   *
+   * This is used to parse the response appropriately before returning it to
+   * the requestee.
+   */
+  readonly responseType: 'arraybuffer'|'blob'|'json'|'text' = 'json';
+
+  /**
+   * The outgoing HTTP request method.
+   */
+  readonly method: string;
+
+  /**
+   * Outgoing URL parameters.
+   */
+  readonly params: HttpParams;
+
+  /**
+   * The outgoing URL with all URL parameters set.
+   */
+  readonly urlWithParams: string;
+
+  constructor(method: 'DELETE'|'GET'|'HEAD'|'JSONP'|'OPTIONS', url: string, init?: {
+    headers?: HttpHeaders,
+    reportProgress?: boolean,
+    params?: HttpParams,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  });
+  constructor(method: 'POST'|'PUT'|'PATCH', url: string, body: T|null, init?: {
+    headers?: HttpHeaders,
+    reportProgress?: boolean,
+    params?: HttpParams,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  });
+  constructor(method: string, url: string, body: T|null, init?: {
+    headers?: HttpHeaders,
+    reportProgress?: boolean,
+    params?: HttpParams,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+  });
+  constructor(
+      method: string, readonly url: string, third?: T|{
+        headers?: HttpHeaders,
+        reportProgress?: boolean,
+        params?: HttpParams,
+        responseType?: 'arraybuffer'|'blob'|'json'|'text',
+        withCredentials?: boolean,
+      }|null,
+      fourth?: {
+        headers?: HttpHeaders,
+        reportProgress?: boolean,
+        params?: HttpParams,
+        responseType?: 'arraybuffer'|'blob'|'json'|'text',
+        withCredentials?: boolean,
+      }) {
+    this.method = method.toUpperCase();
+    // Next, need to figure out which argument holds the HttpRequestInit
+    // options, if any.
+    let options: HttpRequestInit|undefined;
+
+    // Check whether a body argument is expected. The only valid way to omit
+    // the body argument is to use a known no-body method like GET.
+    if (mightHaveBody(this.method) || !!fourth) {
+      // Body is the third argument, options are the fourth.
+      this.body = third as T || null;
+      options = fourth;
+    } else {
+      // No body required, options are the third argument. The body stays null.
+      options = third as HttpRequestInit;
+    }
+
+    // If options have been passed, interpret them.
+    if (options) {
+      // Normalize reportProgress and withCredentials.
+      this.reportProgress = !!options.reportProgress;
+      this.withCredentials = !!options.withCredentials;
+
+      // Override default response type of 'json' if one is provided.
+      if (!!options.responseType) {
+        this.responseType = options.responseType;
+      }
+
+      // Override headers if they're provided.
+      if (!!options.headers) {
+        this.headers = options.headers;
+      }
+
+      if (!!options.params) {
+        this.params = options.params;
+      }
+    }
+
+    // If no headers have been passed in, construct a new HttpHeaders instance.
+    if (!this.headers) {
+      this.headers = new HttpHeaders();
+    }
+
+    // If no parameters have been passed in, construct a new HttpUrlEncodedParams instance.
+    if (!this.params) {
+      this.params = new HttpParams();
+      this.urlWithParams = url;
+    } else {
+      // Encode the parameters to a string in preparation for inclusion in the URL.
+      const params = this.params.toString();
+      if (params.length === 0) {
+        // No parameters, the visible URL is just the URL given at creation time.
+        this.urlWithParams = url;
+      } else {
+        // Does the URL already have query parameters? Look for '?'.
+        const qIdx = url.indexOf('?');
+        // There are 3 cases to handle:
+        // 1) No existing parameters -> append '?' followed by params.
+        // 2) '?' exists and is followed by existing query string ->
+        //    append '&' followed by params.
+        // 3) '?' exists at the end of the url -> append params directly.
+        // This basically amounts to determining the character, if any, with
+        // which to join the URL and parameters.
+        const sep: string = qIdx === -1 ? '?' : (qIdx < url.length - 1 ? '&' : '');
+        this.urlWithParams = url + sep + params;
+      }
+    }
+  }
+
+  /**
+   * Transform the free-form body into a serialized format suitable for
+   * transmission to the server.
+   */
+  serializeBody(): ArrayBuffer|Blob|FormData|string|null {
+    // If no body is present, no need to serialize it.
+    if (this.body === null) {
+      return null;
+    }
+    // Check whether the body is already in a serialized form. If so,
+    // it can just be returned directly.
+    if (isArrayBuffer(this.body) || isBlob(this.body) || isFormData(this.body) ||
+        typeof this.body === 'string') {
+      return this.body;
+    }
+    // Check whether the body is an instance of HttpUrlEncodedParams.
+    if (this.body instanceof HttpParams) {
+      return this.body.toString();
+    }
+    // Check whether the body is an object or array, and serialize with JSON if so.
+    if (typeof this.body === 'object' || typeof this.body === 'boolean' ||
+        Array.isArray(this.body)) {
+      return JSON.stringify(this.body);
+    }
+    // Fall back on toString() for everything else.
+    return (this.body as any).toString();
+  }
+
+  /**
+   * Examine the body and attempt to infer an appropriate MIME type
+   * for it.
+   *
+   * If no such type can be inferred, this method will return `null`.
+   */
+  detectContentTypeHeader(): string|null {
+    // An empty body has no content type.
+    if (this.body === null) {
+      return null;
+    }
+    // FormData bodies rely on the browser's content type assignment.
+    if (isFormData(this.body)) {
+      return null;
+    }
+    // Blobs usually have their own content type. If it doesn't, then
+    // no type can be inferred.
+    if (isBlob(this.body)) {
+      return this.body.type || null;
+    }
+    // Array buffers have unknown contents and thus no type can be inferred.
+    if (isArrayBuffer(this.body)) {
+      return null;
+    }
+    // Technically, strings could be a form of JSON data, but it's safe enough
+    // to assume they're plain strings.
+    if (typeof this.body === 'string') {
+      return 'text/plain';
+    }
+    // `HttpUrlEncodedParams` has its own content-type.
+    if (this.body instanceof HttpParams) {
+      return 'application/x-www-form-urlencoded;charset=UTF-8';
+    }
+    // Arrays, objects, and numbers will be encoded as JSON.
+    if (typeof this.body === 'object' || typeof this.body === 'number' ||
+        Array.isArray(this.body)) {
+      return 'application/json';
+    }
+    // No type could be inferred.
+    return null;
+  }
+
+  clone(): HttpRequest<T>;
+  clone(update: {
+    headers?: HttpHeaders,
+    reportProgress?: boolean,
+    params?: HttpParams,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+    body?: T|null,
+    method?: string,
+    url?: string,
+    setHeaders?: {[name: string]: string | string[]},
+    setParams?: {[param: string]: string},
+  }): HttpRequest<T>;
+  clone<V>(update: {
+    headers?: HttpHeaders,
+    reportProgress?: boolean,
+    params?: HttpParams,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+    body?: V|null,
+    method?: string,
+    url?: string,
+    setHeaders?: {[name: string]: string | string[]},
+    setParams?: {[param: string]: string},
+  }): HttpRequest<V>;
+  clone(update: {
+    headers?: HttpHeaders,
+    reportProgress?: boolean,
+    params?: HttpParams,
+    responseType?: 'arraybuffer'|'blob'|'json'|'text',
+    withCredentials?: boolean,
+    body?: any|null,
+    method?: string,
+    url?: string,
+    setHeaders?: {[name: string]: string | string[]},
+    setParams?: {[param: string]: string};
+  } = {}): HttpRequest<any> {
+    // For method, url, and responseType, take the current value unless
+    // it is overridden in the update hash.
+    const method = update.method || this.method;
+    const url = update.url || this.url;
+    const responseType = update.responseType || this.responseType;
+
+    // The body is somewhat special - a `null` value in update.body means
+    // whatever current body is present is being overridden with an empty
+    // body, whereas an `undefined` value in update.body implies no
+    // override.
+    const body = (update.body !== undefined) ? update.body : this.body;
+
+    // Carefully handle the boolean options to differentiate between
+    // `false` and `undefined` in the update args.
+    const withCredentials =
+        (update.withCredentials !== undefined) ? update.withCredentials : this.withCredentials;
+    const reportProgress =
+        (update.reportProgress !== undefined) ? update.reportProgress : this.reportProgress;
+
+    // Headers and params may be appended to if `setHeaders` or
+    // `setParams` are used.
+    let headers = update.headers || this.headers;
+    let params = update.params || this.params;
+
+    // Check whether the caller has asked to add headers.
+    if (update.setHeaders !== undefined) {
+      // Set every requested header.
+      headers =
+          Object.keys(update.setHeaders)
+              .reduce((headers, name) => headers.set(name, update.setHeaders ![name]), headers);
+    }
+
+    // Check whether the caller has asked to set params.
+    if (update.setParams) {
+      // Set every requested param.
+      params = Object.keys(update.setParams)
+                   .reduce((params, param) => params.set(param, update.setParams ![param]), params);
+    }
+
+    // Finally, construct the new HttpRequest using the pieces from above.
+    return new HttpRequest(
+        method, url, body, {
+                               params, headers, reportProgress, responseType, withCredentials,
+                           });
+  }
+}
diff --git a/packages/common/http/src/response.ts b/packages/common/http/src/response.ts
new file mode 100644
index 0000000000..0850505cc5
--- /dev/null
+++ b/packages/common/http/src/response.ts
@@ -0,0 +1,326 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HttpHeaders} from './headers';
+
+/**
+ * Type enumeration for the different kinds of `HttpEvent`.
+ *
+ * @experimental
+ */
+export enum HttpEventType {
+  /**
+   * The request was sent out over the wire.
+   */
+  Sent,
+
+  /**
+   * An upload progress event was received.
+   */
+  UploadProgress,
+
+  /**
+   * The response status code and headers were received.
+   */
+  ResponseHeader,
+
+  /**
+   * A download progress event was received.
+   */
+  DownloadProgress,
+
+  /**
+   * The full response including the body was received.
+   */
+  Response,
+
+  /**
+   * A custom event from an interceptor or a backend.
+   */
+  User,
+}
+
+/**
+ * Base interface for progress events.
+ *
+ * @experimental
+ */
+export interface HttpProgressEvent {
+  /**
+   * Progress event type is either upload or download.
+   */
+  type: HttpEventType.DownloadProgress|HttpEventType.UploadProgress;
+
+  /**
+   * Number of bytes uploaded or downloaded.
+   */
+  loaded: number;
+
+  /**
+   * Total number of bytes to upload or download. Depending on the request or
+   * response, this may not be computable and thus may not be present.
+   */
+  total?: number;
+}
+
+/**
+ * A download progress event.
+ *
+ * @experimental
+ */
+export interface HttpDownloadProgressEvent extends HttpProgressEvent {
+  type: HttpEventType.DownloadProgress;
+
+  /**
+   * The partial response body as downloaded so far.
+   *
+   * Only present if the responseType was `text`.
+   */
+  partialText?: string;
+}
+
+/**
+ * An upload progress event.
+ *
+ * @experimental
+ */
+export interface HttpUploadProgressEvent extends HttpProgressEvent {
+  type: HttpEventType.UploadProgress;
+}
+
+/**
+ * An event indicating that the request was sent to the server. Useful
+ * when a request may be retried multiple times, to distinguish between
+ * retries on the final event stream.
+ *
+ * @experimental
+ */
+export interface HttpSentEvent { type: HttpEventType.Sent; }
+
+/**
+ * A user-defined event.
+ *
+ * Grouping all custom events under this type ensures they will be handled
+ * and forwarded by all implementations of interceptors.
+ *
+ * @experimental
+ */
+export interface HttpUserEvent<T> { type: HttpEventType.User; }
+
+/**
+ * An error that represents a failed attempt to JSON.parse text coming back
+ * from the server.
+ *
+ * It bundles the Error object with the actual response body that failed to parse.
+ *
+ * @experimental
+ */
+export interface HttpJsonParseError { error: Error, text: string, }
+
+/**
+ * Union type for all possible events on the response stream.
+ *
+ * Typed according to the expected type of the response.
+ *
+ * @experimental
+ */
+export type HttpEvent<T> =
+    HttpSentEvent | HttpHeaderResponse | HttpResponse<T>| HttpProgressEvent | HttpUserEvent<T>;
+
+/**
+ * Base class for both `HttpResponse` and `HttpHeaderResponse`.
+ *
+ * @experimental
+ */
+export abstract class HttpResponseBase {
+  /**
+   * All response headers.
+   */
+  readonly headers: HttpHeaders;
+
+  /**
+   * Response status code.
+   */
+  readonly status: number;
+
+  /**
+   * Textual description of response status code.
+   *
+   * Do not depend on this.
+   */
+  readonly statusText: string;
+
+  /**
+   * URL of the resource retrieved, or null if not available.
+   */
+  readonly url: string|null;
+
+  /**
+   * Whether the status code falls in the 2xx range.
+   */
+  readonly ok: boolean;
+
+  /**
+   * Type of the response, narrowed to either the full response or the header.
+   */
+  readonly type: HttpEventType.Response|HttpEventType.ResponseHeader;
+
+  /**
+   * Super-constructor for all responses.
+   *
+   * The single parameter accepted is an initialization hash. Any properties
+   * of the response passed there will override the default values.
+   */
+  constructor(
+      init: {
+        headers?: HttpHeaders,
+        status?: number,
+        statusText?: string,
+        url?: string,
+      },
+      defaultStatus: number = 200, defaultStatusText: string = 'OK') {
+    // If the hash has values passed, use them to initialize the response.
+    // Otherwise use the default values.
+    this.headers = init.headers || new HttpHeaders();
+    this.status = init.status !== undefined ? init.status : defaultStatus;
+    this.statusText = init.statusText || defaultStatusText;
+    this.url = init.url || null;
+
+    // Cache the ok value to avoid defining a getter.
+    this.ok = this.status >= 200 && this.status < 300;
+  }
+}
+
+/**
+ * A partial HTTP response which only includes the status and header data,
+ * but no response body.
+ *
+ * `HttpHeaderResponse` is a `HttpEvent` available on the response
+ * event stream, only when progress events are requested.
+ *
+ * @experimental
+ */
+export class HttpHeaderResponse extends HttpResponseBase {
+  /**
+   * Create a new `HttpHeaderResponse` with the given parameters.
+   */
+  constructor(init: {
+    headers?: HttpHeaders,
+    status?: number,
+    statusText?: string,
+    url?: string,
+  } = {}) {
+    super(init);
+  }
+
+  readonly type: HttpEventType.ResponseHeader = HttpEventType.ResponseHeader;
+
+  /**
+   * Copy this `HttpHeaderResponse`, overriding its contents with the
+   * given parameter hash.
+   */
+  clone(update: {headers?: HttpHeaders; status?: number; statusText?: string; url?: string;} = {}):
+      HttpHeaderResponse {
+    // Perform a straightforward initialization of the new HttpHeaderResponse,
+    // overriding the current parameters with new ones if given.
+    return new HttpHeaderResponse({
+      headers: update.headers || this.headers,
+      status: update.status !== undefined ? update.status : this.status,
+      statusText: update.statusText || this.statusText,
+      url: update.url || this.url || undefined,
+    })
+  }
+}
+
+/**
+ * A full HTTP response, including a typed response body (which may be `null`
+ * if one was not returned).
+ *
+ * `HttpResponse` is a `HttpEvent` available on the response event
+ * stream.
+ *
+ * @experimental
+ */
+export class HttpResponse<T> extends HttpResponseBase {
+  /**
+   * The response body, or `null` if one was not returned.
+   */
+  readonly body: T|null;
+
+  /**
+   * Construct a new `HttpResponse`.
+   */
+  constructor(init: {
+    body?: T | null, headers?: HttpHeaders; status?: number; statusText?: string; url?: string;
+  } = {}) {
+    super(init);
+    this.body = init.body || null;
+  }
+
+  readonly type: HttpEventType.Response = HttpEventType.Response;
+
+  clone(): HttpResponse<T>;
+  clone(update: {headers?: HttpHeaders; status?: number; statusText?: string; url?: string;}):
+      HttpResponse<T>;
+  clone<V>(update: {
+    body?: V | null, headers?: HttpHeaders; status?: number; statusText?: string; url?: string;
+  }): HttpResponse<V>;
+  clone(update: {
+    body?: any | null; headers?: HttpHeaders; status?: number; statusText?: string; url?: string;
+  } = {}): HttpResponse<any> {
+    return new HttpResponse<any>({
+      body: (update.body !== undefined) ? update.body : this.body,
+      headers: update.headers || this.headers,
+      status: (update.status !== undefined) ? update.status : this.status,
+      statusText: update.statusText || this.statusText,
+      url: update.url || this.url || undefined,
+    });
+  }
+}
+
+/**
+ * A response that represents an error or failure, either from a
+ * non-successful HTTP status, an error while executing the request,
+ * or some other failure which occurred during the parsing of the response.
+ *
+ * Any error returned on the `Observable` response stream will be
+ * wrapped in an `HttpErrorResponse` to provide additional context about
+ * the state of the HTTP layer when the error occurred. The error property
+ * will contain either a wrapped Error object or the error response returned
+ * from the server.
+ *
+ * @experimental
+ */
+export class HttpErrorResponse extends HttpResponseBase implements Error {
+  readonly name = 'HttpErrorResponse';
+  readonly message: string;
+  readonly error: any|null;
+
+  /**
+   * Errors are never okay, even when the status code is in the 2xx success range.
+   */
+  readonly ok = false;
+
+  constructor(init: {
+    error?: any; headers?: HttpHeaders; status?: number; statusText?: string; url?: string;
+  }) {
+    // Initialize with a default status of 0 / Unknown Error.
+    super(init, 0, 'Unknown Error');
+
+    // If the response was successful, then this was a parse error. Otherwise, it was
+    // a protocol-level failure of some sort. Either the request failed in transit
+    // or the server returned an unsuccessful status code.
+    if (this.status >= 200 && this.status < 300) {
+      this.message = `Http failure during parsing for ${init.url || '(unknown url)'}`;
+    } else {
+      this.message =
+          `Http failure response for ${init.url || '(unknown url)'}: ${init.status} ${init.statusText}`;
+    }
+    this.error = init.error || null;
+  }
+}
diff --git a/packages/common/http/src/xhr.ts b/packages/common/http/src/xhr.ts
new file mode 100644
index 0000000000..8f35a98ffe
--- /dev/null
+++ b/packages/common/http/src/xhr.ts
@@ -0,0 +1,327 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {Observer} from 'rxjs/Observer';
+
+import {HttpBackend} from './backend';
+import {HttpHeaders} from './headers';
+import {HttpRequest} from './request';
+import {HttpDownloadProgressEvent, HttpErrorResponse, HttpEvent, HttpEventType, HttpHeaderResponse, HttpJsonParseError, HttpResponse, HttpUploadProgressEvent} from './response';
+
+const XSSI_PREFIX = /^\)\]\}',?\n/;
+
+/**
+ * Determine an appropriate URL for the response, by checking either
+ * XMLHttpRequest.responseURL or the X-Request-URL header.
+ */
+function getResponseUrl(xhr: any): string|null {
+  if ('responseURL' in xhr && xhr.responseURL) {
+    return xhr.responseURL;
+  }
+  if (/^X-Request-URL:/m.test(xhr.getAllResponseHeaders())) {
+    return xhr.getResponseHeader('X-Request-URL');
+  }
+  return null;
+}
+
+/**
+ * A wrapper around the `XMLHttpRequest` constructor.
+ *
+ * @experimental
+ */
+export abstract class XhrFactory { abstract build(): XMLHttpRequest; }
+
+/**
+ * A factory for @{link HttpXhrBackend} that uses the `XMLHttpRequest` browser API.
+ *
+ * @experimental
+ */
+@Injectable()
+export class BrowserXhr implements XhrFactory {
+  constructor() {}
+  build(): any { return <any>(new XMLHttpRequest()); }
+}
+
+/**
+ * Tracks a response from the server that does not yet have a body.
+ */
+interface PartialResponse {
+  headers: HttpHeaders;
+  status: number;
+  statusText: string;
+  url: string;
+}
+
+/**
+ * An `HttpBackend` which uses the XMLHttpRequest API to send
+ * requests to a backend server.
+ *
+ * @experimental
+ */
+@Injectable()
+export class HttpXhrBackend implements HttpBackend {
+  constructor(private xhrFactory: XhrFactory) {}
+
+  /**
+   * Process a request and return a stream of response events.
+   */
+  handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
+    // Quick check to give a better error message when a user attempts to use
+    // HttpClient.jsonp() without installing the JsonpClientModule
+    if (req.method === 'JSONP') {
+      throw new Error(`Attempted to construct Jsonp request without JsonpClientModule installed.`);
+    }
+
+    // Everything happens on Observable subscription.
+    return new Observable((observer: Observer<HttpEvent<any>>) => {
+      // Start by setting up the XHR object with request method, URL, and withCredentials flag.
+      const xhr = this.xhrFactory.build();
+      xhr.open(req.method, req.urlWithParams);
+      if (!!req.withCredentials) {
+        xhr.withCredentials = true;
+      }
+
+      // Add all the requested headers.
+      req.headers.forEach((name, values) => xhr.setRequestHeader(name, values.join(',')));
+
+      // Add an Accept header if one isn't present already.
+      if (!req.headers.has('Accept')) {
+        xhr.setRequestHeader('Accept', 'application/json, text/plain, */*');
+      }
+
+      // Auto-detect the Content-Type header if one isn't present already.
+      if (!req.headers.has('Content-Type')) {
+        const detectedType = req.detectContentTypeHeader();
+        // Sometimes Content-Type detection fails.
+        if (detectedType !== null) {
+          xhr.setRequestHeader('Content-Type', detectedType);
+        }
+      }
+
+      // Set the responseType if one was requested.
+      if (req.responseType) {
+        xhr.responseType = req.responseType.toLowerCase() as any;
+      }
+
+      // Serialize the request body if one is present. If not, this will be set to null.
+      const reqBody = req.serializeBody();
+
+      // If progress events are enabled, response headers will be delivered
+      // in two events - the HttpHeaderResponse event and the full HttpResponse
+      // event. However, since response headers don't change in between these
+      // two events, it doesn't make sense to parse them twice. So headerResponse
+      // caches the data extracted from the response whenever it's first parsed,
+      // to ensure parsing isn't duplicated.
+      let headerResponse: HttpHeaderResponse|null = null;
+
+      // partialFromXhr extracts the HttpHeaderResponse from the current XMLHttpRequest
+      // state, and memoizes it into headerResponse.
+      const partialFromXhr = (): HttpHeaderResponse => {
+        if (headerResponse !== null) {
+          return headerResponse;
+        }
+
+        // Read status and normalize an IE9 bug (http://bugs.jquery.com/ticket/1450).
+        const status: number = xhr.status === 1223 ? 204 : xhr.status;
+        const statusText = xhr.statusText || 'OK';
+
+        // Parse headers from XMLHttpRequest - this step is lazy.
+        const headers = new HttpHeaders(xhr.getAllResponseHeaders());
+
+        // Read the response URL from the XMLHttpResponse instance and fall back on the
+        // request URL.
+        const url = getResponseUrl(xhr) || req.url;
+
+        // Construct the HttpHeaderResponse and memoize it.
+        headerResponse = new HttpHeaderResponse({headers, status, statusText, url});
+        return headerResponse;
+      };
+
+      // Next, a few closures are defined for the various events which XMLHttpRequest can
+      // emit. This allows them to be unregistered as event listeners later.
+
+      // First up is the load event, which represents a response being fully available.
+      const onLoad = () => {
+        // Read response state from the memoized partial data.
+        let {headers, status, statusText, url} = partialFromXhr();
+
+        // The body will be read out if present.
+        let body: any|null = null;
+
+        if (status !== 204) {
+          // Use XMLHttpRequest.response if set, responseText otherwise.
+          body = (typeof xhr.response === 'undefined') ? xhr.responseText : xhr.response;
+
+          // Strip a common XSSI prefix from string responses.
+          // TODO: determine if this behavior should be optional and moved to an interceptor.
+          if (typeof body === 'string') {
+            body = body.replace(XSSI_PREFIX, '');
+          }
+        }
+
+        // Normalize another potential bug (this one comes from CORS).
+        if (status === 0) {
+          status = !!body ? 200 : 0;
+        }
+
+        // ok determines whether the response will be transmitted on the event or
+        // error channel. Unsuccessful status codes (not 2xx) will always be errors,
+        // but a successful status code can still result in an error if the user
+        // asked for JSON data and the body cannot be parsed as such.
+        let ok = status >= 200 && status < 300;
+
+        // Check whether the body needs to be parsed as JSON (in many cases the browser
+        // will have done that already).
+        if (ok && typeof body === 'string' && req.responseType === 'json') {
+          // Attempt the parse. If it fails, a parse error should be delivered to the user.
+          try {
+            body = JSON.parse(body);
+          } catch (error) {
+            // Even though the response status was 2xx, this is still an error.
+            ok = false;
+            // The parse error contains the text of the body that failed to parse.
+            body = { error, text: body } as HttpJsonParseError;
+          }
+        }
+
+        if (ok) {
+          // A successful response is delivered on the event stream.
+          observer.next(new HttpResponse({
+            body,
+            headers,
+            status,
+            statusText,
+            url: url || undefined,
+          }));
+          // The full body has been received and delivered, no further events
+          // are possible. This request is complete.
+          observer.complete();
+        } else {
+          // An unsuccessful request is delivered on the error channel.
+          observer.error(new HttpErrorResponse({
+            // The error in this case is the response body (error from the server).
+            error: body,
+            headers,
+            status,
+            statusText,
+            url: url || undefined,
+          }));
+        }
+      };
+
+      // The onError callback is called when something goes wrong at the network level.
+      // Connection timeout, DNS error, offline, etc. These are actual errors, and are
+      // transmitted on the error channel.
+      const onError = (error: ErrorEvent) => {
+        const res = new HttpErrorResponse({
+          error,
+          status: xhr.status || 0,
+          statusText: xhr.statusText || 'Unknown Error',
+        });
+        observer.error(res);
+      };
+
+      // The sentHeaders flag tracks whether the HttpResponseHeaders event
+      // has been sent on the stream. This is necessary to track if progress
+      // is enabled since the event will be sent on only the first download
+      // progerss event.
+      let sentHeaders = false;
+
+      // The download progress event handler, which is only registered if
+      // progress events are enabled.
+      const onDownProgress = (event: ProgressEvent) => {
+        // Send the HttpResponseHeaders event if it hasn't been sent already.
+        if (!sentHeaders) {
+          observer.next(partialFromXhr());
+          sentHeaders = true;
+        }
+
+        // Start building the download progress event to deliver on the response
+        // event stream.
+        let progressEvent: HttpDownloadProgressEvent = {
+          type: HttpEventType.DownloadProgress,
+          loaded: event.loaded,
+        };
+
+        // Set the total number of bytes in the event if it's available.
+        if (event.lengthComputable) {
+          progressEvent.total = event.total;
+        }
+
+        // If the request was for text content and a partial response is
+        // available on XMLHttpRequest, include it in the progress event
+        // to allow for streaming reads.
+        if (req.responseType === 'text' && !!xhr.responseText) {
+          progressEvent.partialText = xhr.responseText;
+        }
+
+        // Finally, fire the event.
+        observer.next(progressEvent);
+      };
+
+      // The upload progress event handler, which is only registered if
+      // progress events are enabled.
+      const onUpProgress =
+          (event: ProgressEvent) => {
+            // Upload progress events are simpler. Begin building the progress
+            // event.
+            let progress: HttpUploadProgressEvent = {
+              type: HttpEventType.UploadProgress,
+              loaded: event.loaded,
+            };
+
+            // If the total number of bytes being uploaded is available, include
+            // it.
+            if (event.lengthComputable) {
+              progress.total = event.total;
+            }
+
+            // Send the event.
+            observer.next(progress);
+          }
+
+                                    // By default, register for load and error events.
+                                    xhr.addEventListener('load', onLoad);
+      xhr.addEventListener('error', onError);
+
+      // Progress events are only enabled if requested.
+      if (req.reportProgress) {
+        // Download progress is always enabled if requested.
+        xhr.addEventListener('progress', onDownProgress);
+
+        // Upload progress depends on whether there is a body to upload.
+        if (reqBody !== null && xhr.upload) {
+          xhr.upload.addEventListener('progress', onUpProgress);
+        }
+      }
+
+      // Fire the request, and notify the event stream that it was fired.
+      xhr.send(reqBody);
+      observer.next({type: HttpEventType.Sent});
+
+      // This is the return from the Observable function, which is the
+      // request cancellation handler.
+      return () => {
+        // On a cancellation, remove all registered event listeners.
+        xhr.removeEventListener('error', onError);
+        xhr.removeEventListener('load', onLoad);
+        if (req.reportProgress) {
+          xhr.removeEventListener('progress', onDownProgress);
+          if (reqBody !== null && xhr.upload) {
+            xhr.upload.removeEventListener('progress', onUpProgress);
+          }
+        }
+
+        // Finally, abort the in-flight request.
+        xhr.abort();
+      };
+    });
+  }
+}
diff --git a/packages/common/http/src/xsrf.ts b/packages/common/http/src/xsrf.ts
new file mode 100644
index 0000000000..ee213cb42e
--- /dev/null
+++ b/packages/common/http/src/xsrf.ts
@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {DOCUMENT, ɵparseCookieValue as parseCookieValue} from '@angular/common';
+import {Inject, Injectable, InjectionToken, PLATFORM_ID} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+
+import {HttpHandler} from './backend';
+import {HttpInterceptor} from './interceptor';
+import {HttpRequest} from './request';
+import {HttpEvent} from './response';
+
+export const XSRF_COOKIE_NAME = new InjectionToken<string>('XSRF_COOKIE_NAME');
+export const XSRF_HEADER_NAME = new InjectionToken<string>('XSRF_HEADER_NAME');
+
+/**
+ * Retrieves the current XSRF token to use with the next outgoing request.
+ *
+ * @experimental
+ */
+export abstract class HttpXsrfTokenExtractor {
+  /**
+   * Get the XSRF token to use with an outgoing request.
+   *
+   * Will be called for every request, so the token may change between requests.
+   */
+  abstract getToken(): string|null;
+}
+
+/**
+ * `HttpXsrfTokenExtractor` which retrieves the token from a cookie.
+ */
+@Injectable()
+export class HttpXsrfCookieExtractor implements HttpXsrfTokenExtractor {
+  private lastCookieString: string = '';
+  private lastToken: string|null = null;
+
+  /**
+   * @internal for testing
+   */
+  parseCount: number = 0;
+
+  constructor(
+      @Inject(DOCUMENT) private doc: any, @Inject(PLATFORM_ID) private platform: string,
+      @Inject(XSRF_COOKIE_NAME) private cookieName: string) {}
+
+  getToken(): string|null {
+    if (this.platform === 'server') {
+      return null;
+    }
+    const cookieString = this.doc.cookie || '';
+    if (cookieString !== this.lastCookieString) {
+      this.parseCount++;
+      this.lastToken = parseCookieValue(cookieString, this.cookieName);
+      this.lastCookieString = cookieString;
+    }
+    return this.lastToken;
+  }
+}
+
+/**
+ * `HttpInterceptor` which adds an XSRF token to eligible outgoing requests.
+ */
+@Injectable()
+export class HttpXsrfInterceptor implements HttpInterceptor {
+  constructor(
+      private tokenService: HttpXsrfTokenExtractor,
+      @Inject(XSRF_HEADER_NAME) private headerName: string) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const lcUrl = req.url.toLowerCase();
+    // Skip both non-mutating requests and absolute URLs.
+    // Non-mutating requests don't require a token, and absolute URLs require special handling
+    // anyway as the cookie set
+    // on our origin is not the same as the token expected by another origin.
+    if (req.method === 'GET' || req.method === 'HEAD' || lcUrl.startsWith('http://') ||
+        lcUrl.startsWith('https://')) {
+      return next.handle(req);
+    }
+    const token = this.tokenService.getToken();
+
+    // Be careful not to overwrite an existing header of the same name.
+    if (token !== null && !req.headers.has(this.headerName)) {
+      req = req.clone({headers: req.headers.set(this.headerName, token)});
+    }
+    return next.handle(req);
+  }
+}
diff --git a/packages/common/http/test/client_spec.ts b/packages/common/http/test/client_spec.ts
new file mode 100644
index 0000000000..73f1c70e97
--- /dev/null
+++ b/packages/common/http/test/client_spec.ts
@@ -0,0 +1,137 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import 'rxjs/add/operator/toArray';
+import 'rxjs/add/operator/toPromise';
+
+import {ddescribe, describe, iit, it} from '@angular/core/testing/src/testing_internal';
+
+import {HttpClient} from '../src/client';
+import {HttpErrorResponse, HttpEventType, HttpResponse} from '../src/response';
+import {HttpClientTestingBackend} from '../testing/src/backend';
+
+export function main() {
+  describe('HttpClient', () => {
+    let client: HttpClient = null !;
+    let backend: HttpClientTestingBackend = null !;
+    beforeEach(() => {
+      backend = new HttpClientTestingBackend();
+      client = new HttpClient(backend);
+    });
+    afterEach(() => { backend.verify(); });
+    describe('makes a basic request', () => {
+      it('for JSON data', (done: DoneFn) => {
+        client.get('/test').subscribe(res => {
+          expect((res as any)['data']).toEqual('hello world');
+          done();
+        });
+        backend.expectOne('/test').flush({'data': 'hello world'});
+      });
+      it('for text data', (done: DoneFn) => {
+        client.get('/test', {responseType: 'text'}).subscribe(res => {
+          expect(res).toEqual('hello world');
+          done();
+        });
+        backend.expectOne('/test').flush('hello world');
+      });
+      it('for an arraybuffer', (done: DoneFn) => {
+        const body = new ArrayBuffer(4);
+        client.get('/test', {responseType: 'arraybuffer'}).subscribe(res => {
+          expect(res).toBe(body);
+          done();
+        });
+        backend.expectOne('/test').flush(body);
+      });
+      if (typeof Blob !== 'undefined') {
+        it('for a blob', (done: DoneFn) => {
+          const body = new Blob([new ArrayBuffer(4)]);
+          client.get('/test', {responseType: 'blob'}).subscribe(res => {
+            expect(res).toBe(body);
+            done();
+          });
+          backend.expectOne('/test').flush(body);
+        });
+      }
+      it('that returns a response', (done: DoneFn) => {
+        const body = {'data': 'hello world'};
+        client.get('/test', {observe: 'response'}).subscribe(res => {
+          expect(res instanceof HttpResponse).toBe(true);
+          expect(res.body).toBe(body);
+          done();
+        });
+        backend.expectOne('/test').flush(body);
+      });
+      it('that returns a stream of events', (done: DoneFn) => {
+        client.get('/test', {observe: 'events'}).toArray().toPromise().then(events => {
+          expect(events.length).toBe(2);
+          expect(events[0].type).toBe(HttpEventType.Sent);
+          expect(events[1].type).toBe(HttpEventType.Response);
+          expect(events[1] instanceof HttpResponse).toBeTruthy();
+          done();
+        });
+        backend.expectOne('/test').flush({'data': 'hello world'});
+      });
+      it('with progress events enabled', (done: DoneFn) => {
+        client.get('/test', {reportProgress: true}).subscribe(() => done());
+        const req = backend.expectOne('/test');
+        expect(req.request.reportProgress).toEqual(true);
+        req.flush({});
+      });
+    });
+    describe('makes a POST request', () => {
+      it('with text data', (done: DoneFn) => {
+        client.post('/test', 'text body', {observe: 'response', responseType: 'text'})
+            .subscribe(res => {
+              expect(res.ok).toBeTruthy();
+              expect(res.status).toBe(200);
+              done();
+            });
+        backend.expectOne('/test').flush('hello world');
+      });
+      it('with json data', (done: DoneFn) => {
+        const body = {data: 'json body'};
+        client.post('/test', body, {observe: 'response', responseType: 'text'}).subscribe(res => {
+          expect(res.ok).toBeTruthy();
+          expect(res.status).toBe(200);
+          done();
+        });
+        const testReq = backend.expectOne('/test');
+        expect(testReq.request.body).toBe(body);
+        testReq.flush('hello world');
+      });
+      it('with an arraybuffer', (done: DoneFn) => {
+        const body = new ArrayBuffer(4);
+        client.post('/test', body, {observe: 'response', responseType: 'text'}).subscribe(res => {
+          expect(res.ok).toBeTruthy();
+          expect(res.status).toBe(200);
+          done();
+        });
+        const testReq = backend.expectOne('/test');
+        expect(testReq.request.body).toBe(body);
+        testReq.flush('hello world');
+      });
+    });
+    describe('makes a JSONP request', () => {
+      it('with properly set method and callback', (done: DoneFn) => {
+        client.jsonp('/test', 'myCallback').subscribe(() => done());
+        backend.expectOne({method: 'JSONP', url: '/test?myCallback=JSONP_CALLBACK'})
+            .flush('hello world');
+      });
+    });
+    describe('makes a request for an error response', () => {
+      it('with a JSON body', (done: DoneFn) => {
+        client.get('/test').subscribe(() => {}, (res: HttpErrorResponse) => {
+          expect(res.error.data).toEqual('hello world');
+          done();
+        });
+        backend.expectOne('/test').flush(
+            {'data': 'hello world'}, {status: 500, statusText: 'Server error'});
+      });
+    });
+  });
+}
diff --git a/packages/common/http/test/headers_spec.ts b/packages/common/http/test/headers_spec.ts
new file mode 100644
index 0000000000..f161c66d5b
--- /dev/null
+++ b/packages/common/http/test/headers_spec.ts
@@ -0,0 +1,144 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HttpHeaders} from '../src/headers';
+
+export function main() {
+  describe('HttpHeaders', () => {
+
+    describe('initialization', () => {
+      it('should conform to spec', () => {
+        const httpHeaders = {
+          'Content-Type': 'image/jpeg',
+          'Accept-Charset': 'utf-8',
+          'X-My-Custom-Header': 'Zeke are cool',
+        };
+        const secondHeaders = new HttpHeaders(httpHeaders);
+        expect(secondHeaders.get('Content-Type')).toEqual('image/jpeg');
+      });
+
+      it('should merge values in provided dictionary', () => {
+        const headers = new HttpHeaders({'foo': 'bar'});
+        expect(headers.get('foo')).toEqual('bar');
+        expect(headers.getAll('foo')).toEqual(['bar']);
+      });
+
+      it('should lazily append values', () => {
+        const src = new HttpHeaders();
+        const a = src.append('foo', 'a');
+        const b = a.append('foo', 'b');
+        const c = b.append('foo', 'c');
+        expect(src.getAll('foo')).toBeNull();
+        expect(a.getAll('foo')).toEqual(['a']);
+        expect(b.getAll('foo')).toEqual(['a', 'b']);
+        expect(c.getAll('foo')).toEqual(['a', 'b', 'c']);
+      });
+
+      it('should keep the last value when initialized from an object', () => {
+        const headers = new HttpHeaders({
+          'foo': 'first',
+          'fOo': 'second',
+        });
+
+        expect(headers.getAll('foo')).toEqual(['second']);
+      });
+    });
+
+    describe('.set()', () => {
+      it('should clear all values and re-set for the provided key', () => {
+        const headers = new HttpHeaders({'foo': 'bar'});
+        expect(headers.get('foo')).toEqual('bar');
+
+        const second = headers.set('foo', 'baz');
+        expect(second.get('foo')).toEqual('baz');
+
+        const third = headers.set('fOO', 'bat');
+        expect(third.get('foo')).toEqual('bat');
+      });
+
+      it('should preserve the case of the first call', () => {
+        const headers = new HttpHeaders();
+        const second = headers.set('fOo', 'baz');
+        const third = second.set('foo', 'bat');
+        expect(third.keys()).toEqual(['fOo']);
+      });
+    });
+
+    describe('.get()', () => {
+      it('should be case insensitive', () => {
+        const headers = new HttpHeaders({'foo': 'baz'});
+        expect(headers.get('foo')).toEqual('baz');
+        expect(headers.get('FOO')).toEqual('baz');
+      });
+
+      it('should return null if the header is not present', () => {
+        const headers = new HttpHeaders({bar: []});
+        expect(headers.get('bar')).toEqual(null);
+        expect(headers.get('foo')).toEqual(null);
+      });
+    });
+
+    describe('.getAll()', () => {
+      it('should be case insensitive', () => {
+        const headers = new HttpHeaders({foo: ['bar', 'baz']});
+        expect(headers.getAll('foo')).toEqual(['bar', 'baz']);
+        expect(headers.getAll('FOO')).toEqual(['bar', 'baz']);
+      });
+
+      it('should return null if the header is not present', () => {
+        const headers = new HttpHeaders();
+        expect(headers.getAll('foo')).toEqual(null);
+      });
+    });
+
+    describe('.delete', () => {
+      it('should be case insensitive', () => {
+        const headers = new HttpHeaders({'foo': 'baz'});
+        expect(headers.has('foo')).toEqual(true);
+        const second = headers.delete('foo');
+        expect(second.has('foo')).toEqual(false);
+
+        const third = second.set('foo', 'baz');
+        expect(third.has('foo')).toEqual(true);
+        const fourth = third.delete('FOO');
+        expect(fourth.has('foo')).toEqual(false);
+      });
+    });
+
+    describe('.append', () => {
+      it('should append a value to the list', () => {
+        const headers = new HttpHeaders();
+        const second = headers.append('foo', 'bar');
+        const third = second.append('foo', 'baz');
+        expect(third.get('foo')).toEqual('bar');
+        expect(third.getAll('foo')).toEqual(['bar', 'baz']);
+      });
+
+      it('should preserve the case of the first call', () => {
+        const headers = new HttpHeaders();
+        const second = headers.append('FOO', 'bar');
+        const third = second.append('foo', 'baz');
+        expect(third.keys()).toEqual(['FOO']);
+      });
+    });
+
+    describe('response header strings', () => {
+      it('should be parsed by the constructor', () => {
+        const response = `Date: Fri, 20 Nov 2015 01:45:26 GMT\n` +
+            `Content-Type: application/json; charset=utf-8\n` +
+            `Transfer-Encoding: chunked\n` +
+            `Connection: keep-alive`;
+        const headers = new HttpHeaders(response);
+        expect(headers.get('Date')).toEqual('Fri, 20 Nov 2015 01:45:26 GMT');
+        expect(headers.get('Content-Type')).toEqual('application/json; charset=utf-8');
+        expect(headers.get('Transfer-Encoding')).toEqual('chunked');
+        expect(headers.get('Connection')).toEqual('keep-alive');
+      });
+    });
+  });
+}
diff --git a/packages/common/http/test/jsonp_mock.ts b/packages/common/http/test/jsonp_mock.ts
new file mode 100644
index 0000000000..c631e0c8fa
--- /dev/null
+++ b/packages/common/http/test/jsonp_mock.ts
@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export class MockScriptElement {
+  constructor() {}
+
+  listeners: {
+    load?: (event: Event) => void,
+    error?: (err: Error) => void,
+  } = {};
+
+  addEventListener(event: 'load'|'error', handler: Function): void {
+    this.listeners[event] = handler as any;
+  }
+
+  removeEventListener(event: 'load'|'error'): void { delete this.listeners[event]; }
+}
+
+export class MockDocument {
+  mock: MockScriptElement|null;
+
+  createElement(tag: 'script'): HTMLScriptElement {
+    return new MockScriptElement() as any as HTMLScriptElement;
+  }
+
+  get body(): any { return this; }
+
+  appendChild(node: any): void { this.mock = node; }
+
+  removeNode(node: any): void {
+    if (this.mock === node) {
+      this.mock = null;
+    }
+  }
+
+  mockLoad(): void { this.mock !.listeners.load !(null as any); }
+
+  mockError(err: Error) { this.mock !.listeners.error !(err); }
+}
\ No newline at end of file
diff --git a/packages/common/http/test/jsonp_spec.ts b/packages/common/http/test/jsonp_spec.ts
new file mode 100644
index 0000000000..1a7bb49254
--- /dev/null
+++ b/packages/common/http/test/jsonp_spec.ts
@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.JsonpCallbackContext
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ddescribe, describe, it} from '@angular/core/testing/src/testing_internal';
+
+import {JSONP_ERR_NO_CALLBACK, JSONP_ERR_WRONG_METHOD, JSONP_ERR_WRONG_RESPONSE_TYPE, JsonpClientBackend} from '../src/jsonp';
+import {HttpRequest} from '../src/request';
+import {HttpErrorResponse, HttpEventType} from '../src/response';
+
+import {MockDocument} from './jsonp_mock';
+
+function runOnlyCallback(home: any, data: Object) {
+  const keys = Object.keys(home);
+  expect(keys.length).toBe(1);
+  const callback = home[keys[0]];
+  delete home[keys[0]];
+  callback(data);
+}
+
+const SAMPLE_REQ = new HttpRequest<never>('JSONP', '/test');
+
+export function main() {
+  describe('JsonpClientBackend', () => {
+    let home = {};
+    let document: MockDocument;
+    let backend: JsonpClientBackend;
+    beforeEach(() => {
+      home = {};
+      document = new MockDocument();
+      backend = new JsonpClientBackend(home, document);
+    });
+    it('handles a basic request', (done: DoneFn) => {
+      backend.handle(SAMPLE_REQ).toArray().subscribe(events => {
+        expect(events.map(event => event.type)).toEqual([
+          HttpEventType.Sent,
+          HttpEventType.Response,
+        ]);
+        done();
+      });
+      runOnlyCallback(home, {data: 'This is a test'});
+      document.mockLoad();
+    });
+    it('handles an error response properly', (done: DoneFn) => {
+      const error = new Error('This is a test error');
+      backend.handle(SAMPLE_REQ).toArray().subscribe(undefined, (err: HttpErrorResponse) => {
+        expect(err.status).toBe(0);
+        expect(err.error).toBe(error);
+        done();
+      });
+      document.mockError(error);
+    });
+    describe('throws an error', () => {
+      it('when request method is not JSONP',
+         () => {expect(() => backend.handle(SAMPLE_REQ.clone<never>({method: 'GET'})))
+                    .toThrowError(JSONP_ERR_WRONG_METHOD)});
+      it('when response type is not json',
+         () => {expect(() => backend.handle(SAMPLE_REQ.clone<never>({responseType: 'text'})))
+                    .toThrowError(JSONP_ERR_WRONG_RESPONSE_TYPE)});
+      it('when callback is never called', (done: DoneFn) => {
+        backend.handle(SAMPLE_REQ).subscribe(undefined, (err: HttpErrorResponse) => {
+          expect(err.status).toBe(0);
+          expect(err.error instanceof Error).toEqual(true);
+          expect(err.error.message).toEqual(JSONP_ERR_NO_CALLBACK);
+          done();
+        });
+        document.mockLoad();
+      })
+    });
+  });
+}
diff --git a/packages/common/http/test/module_spec.ts b/packages/common/http/test/module_spec.ts
new file mode 100644
index 0000000000..9d846aa476
--- /dev/null
+++ b/packages/common/http/test/module_spec.ts
@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.JsonpCallbackContext
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import 'rxjs/add/operator/map';
+
+import {Injector} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {Observable} from 'rxjs/Observable';
+
+import {HttpHandler} from '../src/backend';
+import {HttpClient} from '../src/client';
+import {HTTP_INTERCEPTORS, HttpInterceptor} from '../src/interceptor';
+import {HttpRequest} from '../src/request';
+import {HttpEvent, HttpResponse} from '../src/response';
+import {HttpTestingController} from '../testing/src/api';
+import {HttpClientTestingModule} from '../testing/src/module';
+import {TestRequest} from '../testing/src/request';
+
+class TestInterceptor implements HttpInterceptor {
+  constructor(private value: string) {}
+
+  intercept(req: HttpRequest<any>, delegate: HttpHandler): Observable<HttpEvent<any>> {
+    const existing = req.headers.get('Intercepted');
+    const next = !!existing ? existing + ',' + this.value : this.value;
+    req = req.clone({setHeaders: {'Intercepted': next}});
+    return delegate.handle(req).map(event => {
+      if (event instanceof HttpResponse) {
+        const existing = event.headers.get('Intercepted');
+        const next = !!existing ? existing + ',' + this.value : this.value;
+        return event.clone({headers: event.headers.set('Intercepted', next)});
+      }
+      return event;
+    });
+  }
+}
+
+class InterceptorA extends TestInterceptor {
+  constructor() { super('A'); }
+}
+
+class InterceptorB extends TestInterceptor {
+  constructor() { super('B'); }
+}
+
+export function main() {
+  describe('HttpClientModule', () => {
+    let injector: Injector;
+    beforeEach(() => {
+      injector = TestBed.configureTestingModule({
+        imports: [HttpClientTestingModule],
+        providers: [
+          {provide: HTTP_INTERCEPTORS, useClass: InterceptorA, multi: true},
+          {provide: HTTP_INTERCEPTORS, useClass: InterceptorB, multi: true},
+        ],
+      });
+    });
+    it('initializes HttpClient properly', (done: DoneFn) => {
+      injector.get(HttpClient).get('/test', {responseType: 'text'}).subscribe(value => {
+        expect(value).toBe('ok!');
+        done();
+      });
+      injector.get(HttpTestingController).expectOne('/test').flush('ok!');
+    });
+    it('intercepts outbound responses in the order in which interceptors were bound',
+       (done: DoneFn) => {
+         injector.get(HttpClient)
+             .get('/test', {observe: 'response', responseType: 'text'})
+             .subscribe(value => done());
+         const req = injector.get(HttpTestingController).expectOne('/test') as TestRequest;
+         expect(req.request.headers.get('Intercepted')).toEqual('A,B');
+         req.flush('ok!');
+       });
+    it('intercepts inbound responses in the right (reverse binding) order', (done: DoneFn) => {
+      injector.get(HttpClient)
+          .get('/test', {observe: 'response', responseType: 'text'})
+          .subscribe(value => {
+            expect(value.headers.get('Intercepted')).toEqual('B,A');
+            done();
+          });
+      injector.get(HttpTestingController).expectOne('/test').flush('ok!');
+    });
+  });
+}
diff --git a/packages/common/http/test/params_spec.ts b/packages/common/http/test/params_spec.ts
new file mode 100644
index 0000000000..27c2d83d76
--- /dev/null
+++ b/packages/common/http/test/params_spec.ts
@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HttpParams} from '../src/params';
+
+export function main() {
+  describe('HttpUrlEncodedParams', () => {
+    describe('initialization', () => {
+      it('should be empty at construction', () => {
+        const body = new HttpParams();
+        expect(body.toString()).toEqual('')
+      });
+
+      it('should parse an existing url', () => {
+        const body = new HttpParams({fromString: 'a=b&c=d&c=e'});
+        expect(body.getAll('a')).toEqual(['b']);
+        expect(body.getAll('c')).toEqual(['d', 'e']);
+      });
+    });
+
+    describe('lazy mutation', () => {
+      it('should allow setting parameters', () => {
+        const body = new HttpParams({fromString: 'a=b'});
+        const mutated = body.set('a', 'c');
+        expect(mutated.toString()).toEqual('a=c');
+      });
+
+      it('should allow appending parameters', () => {
+        const body = new HttpParams({fromString: 'a=b'});
+        const mutated = body.append('a', 'c');
+        expect(mutated.toString()).toEqual('a=b&a=c');
+      });
+
+      it('should allow deletion of parameters', () => {
+        const body = new HttpParams({fromString: 'a=b&c=d&e=f'});
+        const mutated = body.delete('c');
+        expect(mutated.toString()).toEqual('a=b&e=f');
+      });
+
+      it('should allow chaining of mutations', () => {
+        const body = new HttpParams({fromString: 'a=b&c=d&e=f'});
+        const mutated = body.append('e', 'y').delete('c').set('a', 'x').append('e', 'z');
+        expect(mutated.toString()).toEqual('a=x&e=f&e=y&e=z');
+      });
+
+      it('should allow deletion of one value of a parameter', () => {
+        const body = new HttpParams({fromString: 'a=1&a=2&a=3&a=4&a=5'});
+        const mutated = body.delete('a', '2').delete('a', '4');
+        expect(mutated.getAll('a')).toEqual(['1', '3', '5']);
+      });
+    });
+
+    describe('read operations', () => {
+      it('should give null if parameter is not set', () => {
+        const body = new HttpParams({fromString: 'a=b&c=d'});
+        expect(body.get('e')).toBeNull();
+        expect(body.getAll('e')).toBeNull();
+      });
+
+      it('should give an accurate list of keys', () => {
+        const body = new HttpParams({fromString: 'a=1&b=2&c=3&d=4'});
+        expect(body.keys()).toEqual(['a', 'b', 'c', 'd']);
+      });
+    });
+  });
+}
diff --git a/packages/common/http/test/request_spec.ts b/packages/common/http/test/request_spec.ts
new file mode 100644
index 0000000000..23960831a3
--- /dev/null
+++ b/packages/common/http/test/request_spec.ts
@@ -0,0 +1,164 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ddescribe, describe, it} from '@angular/core/testing/src/testing_internal';
+
+import {HttpHeaders} from '../src/headers';
+import {HttpParams} from '../src/params';
+import {HttpRequest} from '../src/request';
+
+const TEST_URL = 'http://angular.io';
+const TEST_STRING = `I'm a body!`;
+
+export function main() {
+  describe('HttpRequest', () => {
+    describe('constructor', () => {
+      it('initializes url', () => {
+        const req = new HttpRequest('', TEST_URL, null);
+        expect(req.url).toBe(TEST_URL);
+      });
+      it('doesn\'t require a body for body-less methods', () => {
+        let req = new HttpRequest('GET', TEST_URL);
+        expect(req.method).toBe('GET');
+        expect(req.body).toBeNull();
+        req = new HttpRequest('HEAD', TEST_URL);
+        expect(req.method).toBe('HEAD');
+        expect(req.body).toBeNull();
+        req = new HttpRequest('JSONP', TEST_URL);
+        expect(req.method).toBe('JSONP');
+        expect(req.body).toBeNull();
+        req = new HttpRequest('OPTIONS', TEST_URL);
+        expect(req.method).toBe('OPTIONS');
+        expect(req.body).toBeNull();
+      });
+      it('accepts a string request method', () => {
+        const req = new HttpRequest('TEST', TEST_URL, null);
+        expect(req.method).toBe('TEST');
+      });
+      it('accepts a string body', () => {
+        const req = new HttpRequest('POST', TEST_URL, TEST_STRING);
+        expect(req.body).toBe(TEST_STRING);
+      });
+      it('accepts an object body', () => {
+        const req = new HttpRequest('POST', TEST_URL, {data: TEST_STRING});
+        expect(req.body).toEqual({data: TEST_STRING});
+      });
+      it('creates default headers if not passed', () => {
+        const req = new HttpRequest('GET', TEST_URL);
+        expect(req.headers instanceof HttpHeaders).toBeTruthy();
+      });
+      it('uses the provided headers if passed', () => {
+        const headers = new HttpHeaders();
+        const req = new HttpRequest('GET', TEST_URL, {headers});
+        expect(req.headers).toBe(headers);
+      });
+      it('defaults to Json', () => {
+        const req = new HttpRequest('GET', TEST_URL);
+        expect(req.responseType).toBe('json');
+      });
+    });
+    describe('clone() copies the request', () => {
+      const headers = new HttpHeaders({
+        'Test': 'Test header',
+      });
+      const req = new HttpRequest('POST', TEST_URL, 'test body', {
+        headers,
+        reportProgress: true,
+        responseType: 'text',
+        withCredentials: true,
+      });
+      it('in the base case', () => {
+        const clone = req.clone();
+        expect(clone.method).toBe('POST');
+        expect(clone.responseType).toBe('text');
+        expect(clone.url).toBe(TEST_URL);
+        // Headers should be the same, as the headers are sealed.
+        expect(clone.headers).toBe(headers);
+        expect(clone.headers.get('Test')).toBe('Test header');
+      });
+      it('and updates the url',
+         () => { expect(req.clone({url: '/changed'}).url).toBe('/changed'); });
+      it('and updates the method',
+         () => { expect(req.clone({method: 'PUT'}).method).toBe('PUT'); });
+      it('and updates the body',
+         () => { expect(req.clone({body: 'changed body'}).body).toBe('changed body'); });
+    });
+    describe('content type detection', () => {
+      const baseReq = new HttpRequest('POST', '/test', null);
+      it('handles a null body', () => { expect(baseReq.detectContentTypeHeader()).toBeNull(); });
+      it('doesn\'t associate a content type with ArrayBuffers', () => {
+        const req = baseReq.clone({body: new ArrayBuffer(4)});
+        expect(req.detectContentTypeHeader()).toBeNull();
+      });
+      it('handles strings as text', () => {
+        const req = baseReq.clone({body: 'hello world'});
+        expect(req.detectContentTypeHeader()).toBe('text/plain');
+      });
+      it('handles arrays as json', () => {
+        const req = baseReq.clone({body: ['a', 'b']});
+        expect(req.detectContentTypeHeader()).toBe('application/json');
+      });
+      it('handles numbers as json', () => {
+        const req = baseReq.clone({body: 314159});
+        expect(req.detectContentTypeHeader()).toBe('application/json');
+      });
+      it('handles objects as json', () => {
+        const req = baseReq.clone({body: {data: 'test data'}});
+        expect(req.detectContentTypeHeader()).toBe('application/json');
+      });
+    });
+    describe('body serialization', () => {
+      const baseReq = new HttpRequest('POST', '/test', null);
+      it('handles a null body', () => { expect(baseReq.serializeBody()).toBeNull(); });
+      it('passes ArrayBuffers through', () => {
+        const body = new ArrayBuffer(4);
+        expect(baseReq.clone({body}).serializeBody()).toBe(body);
+      });
+      it('passes strings through', () => {
+        const body = 'hello world';
+        expect(baseReq.clone({body}).serializeBody()).toBe(body);
+      });
+      it('serializes arrays as json', () => {
+        expect(baseReq.clone({body: ['a', 'b']}).serializeBody()).toBe('["a","b"]');
+      });
+      it('handles numbers as json',
+         () => { expect(baseReq.clone({body: 314159}).serializeBody()).toBe('314159'); });
+      it('handles objects as json', () => {
+        const req = baseReq.clone({body: {data: 'test data'}});
+        expect(req.serializeBody()).toBe('{"data":"test data"}');
+      });
+      it('serializes parameters as urlencoded', () => {
+        const params = new HttpParams().append('first', 'value').append('second', 'other');
+        const withParams = baseReq.clone({body: params});
+        expect(withParams.serializeBody()).toEqual('first=value&second=other');
+        expect(withParams.detectContentTypeHeader())
+            .toEqual('application/x-www-form-urlencoded;charset=UTF-8');
+      });
+    });
+    describe('parameter handling', () => {
+      const baseReq = new HttpRequest('GET', '/test', null);
+      const params = new HttpParams({fromString: 'test=true'});
+      it('appends parameters to a base URL', () => {
+        const req = baseReq.clone({params});
+        expect(req.urlWithParams).toEqual('/test?test=true');
+      });
+      it('appends parameters to a URL with an empty query string', () => {
+        const req = baseReq.clone({params, url: '/test?'});
+        expect(req.urlWithParams).toEqual('/test?test=true');
+      });
+      it('appends parameters to a URL with a query string', () => {
+        const req = baseReq.clone({params, url: '/test?other=false'});
+        expect(req.urlWithParams).toEqual('/test?other=false&test=true');
+      });
+      it('sets parameters via setParams', () => {
+        const req = baseReq.clone({setParams: {'test': 'false'}});
+        expect(req.urlWithParams).toEqual('/test?test=false');
+      });
+    });
+  });
+}
\ No newline at end of file
diff --git a/packages/common/http/test/response_spec.ts b/packages/common/http/test/response_spec.ts
new file mode 100644
index 0000000000..9f66b5294d
--- /dev/null
+++ b/packages/common/http/test/response_spec.ts
@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ddescribe, describe, it} from '@angular/core/testing/src/testing_internal';
+
+import {HttpHeaders} from '../src/headers';
+import {HttpResponse} from '../src/response';
+
+export function main() {
+  describe('HttpResponse', () => {
+    describe('constructor()', () => {
+      it('fully constructs responses', () => {
+        const resp = new HttpResponse({
+          body: 'test body',
+          headers: new HttpHeaders({
+            'Test': 'Test header',
+          }),
+          status: 201,
+          statusText: 'Created',
+          url: '/test',
+        });
+        expect(resp.body).toBe('test body');
+        expect(resp.headers instanceof HttpHeaders).toBeTruthy();
+        expect(resp.headers.get('Test')).toBe('Test header');
+        expect(resp.status).toBe(201);
+        expect(resp.statusText).toBe('Created');
+        expect(resp.url).toBe('/test');
+      });
+      it('uses defaults if no args passed', () => {
+        const resp = new HttpResponse({});
+        expect(resp.headers).not.toBeNull();
+        expect(resp.status).toBe(200);
+        expect(resp.statusText).toBe('OK');
+        expect(resp.body).toBeNull();
+        expect(resp.ok).toBeTruthy();
+        expect(resp.url).toBeNull();
+      });
+    });
+    it('.ok is determined by status', () => {
+      const good = new HttpResponse({status: 200});
+      const alsoGood = new HttpResponse({status: 299});
+      const badHigh = new HttpResponse({status: 300});
+      const badLow = new HttpResponse({status: 199});
+      expect(good.ok).toBe(true);
+      expect(alsoGood.ok).toBe(true);
+      expect(badHigh.ok).toBe(false);
+      expect(badLow.ok).toBe(false);
+    });
+    describe('.clone()', () => {
+      it('copies the original when given no arguments', () => {
+        const clone =
+            new HttpResponse({body: 'test', status: 201, statusText: 'created', url: '/test'})
+                .clone();
+        expect(clone.body).toBe('test');
+        expect(clone.status).toBe(201);
+        expect(clone.statusText).toBe('created');
+        expect(clone.url).toBe('/test');
+        expect(clone.headers).not.toBeNull();
+      });
+      it('overrides the original', () => {
+        const orig =
+            new HttpResponse({body: 'test', status: 201, statusText: 'created', url: '/test'});
+        const clone =
+            orig.clone({body: {data: 'test'}, status: 200, statusText: 'Okay', url: '/bar'});
+        expect(clone.body).toEqual({data: 'test'});
+        expect(clone.status).toBe(200);
+        expect(clone.statusText).toBe('Okay');
+        expect(clone.url).toBe('/bar');
+        expect(clone.headers).toBe(orig.headers);
+      });
+    });
+  });
+}
\ No newline at end of file
diff --git a/packages/common/http/test/xhr_mock.ts b/packages/common/http/test/xhr_mock.ts
new file mode 100644
index 0000000000..743f3526a0
--- /dev/null
+++ b/packages/common/http/test/xhr_mock.ts
@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HttpHeaders} from '../src/headers';
+import {XhrFactory} from '../src/xhr';
+
+export class MockXhrFactory implements XhrFactory {
+  mock: MockXMLHttpRequest;
+
+  build(): XMLHttpRequest { return (this.mock = new MockXMLHttpRequest()) as any; }
+}
+
+export class MockXMLHttpRequestUpload {
+  constructor(private mock: MockXMLHttpRequest) {}
+
+  addEventListener(event: 'progress', handler: Function) {
+    this.mock.addEventListener('uploadProgress', handler);
+  }
+
+  removeEventListener(event: 'progress', handler: Function) {
+    this.mock.removeEventListener('uploadProgress');
+  }
+}
+
+export class MockXMLHttpRequest {
+  // Set by method calls.
+  body: any;
+  method: string;
+  url: string;
+  mockHeaders: {[key: string]: string} = {};
+  mockAborted: boolean = false;
+
+  // Directly settable interface.
+  withCredentials: boolean = false;
+  responseType: string = 'text';
+
+  // Mocked response interface.
+  response: any|undefined = undefined;
+  responseText: string|undefined = undefined;
+  responseURL: string|null = null;
+  status: number = 0;
+  statusText: string = '';
+  mockResponseHeaders: string = '';
+
+  listeners: {
+    error?: (event: ErrorEvent) => void,
+    load?: () => void,
+    progress?: (event: ProgressEvent) => void,
+    uploadProgress?: (event: ProgressEvent) => void,
+  } = {};
+
+  upload = new MockXMLHttpRequestUpload(this);
+
+  open(method: string, url: string): void {
+    this.method = method;
+    this.url = url;
+  }
+
+  send(body: any): void { this.body = body; }
+
+  addEventListener(event: 'error'|'load'|'progress'|'uploadProgress', handler: Function): void {
+    this.listeners[event] = handler as any;
+  }
+
+  removeEventListener(event: 'error'|'load'|'progress'|'uploadProgress'): void {
+    delete this.listeners[event];
+  }
+
+  setRequestHeader(name: string, value: string): void { this.mockHeaders[name] = value; }
+
+  getAllResponseHeaders(): string { return this.mockResponseHeaders; }
+
+  getResponseHeader(header: string): string|null {
+    return new HttpHeaders(this.mockResponseHeaders).get(header);
+  }
+
+  mockFlush(status: number, statusText: string, body: any|null) {
+    if (this.responseType === 'text') {
+      this.responseText = body;
+    } else {
+      this.response = body;
+    }
+    this.status = status;
+    this.statusText = statusText;
+    this.mockLoadEvent();
+  }
+
+  mockDownloadProgressEvent(loaded: number, total?: number): void {
+    if (this.listeners.progress) {
+      this.listeners.progress({ lengthComputable: total !== undefined, loaded, total } as any);
+    }
+  }
+
+  mockUploadProgressEvent(loaded: number, total?: number) {
+    if (this.listeners.uploadProgress) {
+      this.listeners.uploadProgress(
+          { lengthComputable: total !== undefined, loaded, total, } as any);
+    }
+  }
+
+  mockLoadEvent(): void {
+    if (this.listeners.load) {
+      this.listeners.load();
+    }
+  }
+
+  mockErrorEvent(error: any): void {
+    if (this.listeners.error) {
+      this.listeners.error(error);
+    }
+  }
+
+  abort() { this.mockAborted = true; }
+}
\ No newline at end of file
diff --git a/packages/common/http/test/xhr_spec.ts b/packages/common/http/test/xhr_spec.ts
new file mode 100644
index 0000000000..cdc3162a95
--- /dev/null
+++ b/packages/common/http/test/xhr_spec.ts
@@ -0,0 +1,306 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ddescribe, describe, it} from '@angular/core/testing/src/testing_internal';
+import {Observable} from 'rxjs/Observable';
+
+import {HttpRequest} from '../src/request';
+import {HttpDownloadProgressEvent, HttpErrorResponse, HttpEvent, HttpEventType, HttpHeaderResponse, HttpResponse, HttpResponseBase, HttpUploadProgressEvent} from '../src/response';
+import {HttpXhrBackend} from '../src/xhr';
+
+import {MockXhrFactory} from './xhr_mock';
+
+function trackEvents(obs: Observable<HttpEvent<any>>): HttpEvent<any>[] {
+  const events: HttpEvent<any>[] = [];
+  obs.subscribe(event => events.push(event));
+  return events;
+}
+
+const TEST_POST = new HttpRequest('POST', '/test', 'some body', {
+  responseType: 'text',
+});
+
+export function main() {
+  describe('XhrBackend', () => {
+    let factory: MockXhrFactory = null !;
+    let backend: HttpXhrBackend = null !;
+    beforeEach(() => {
+      factory = new MockXhrFactory();
+      backend = new HttpXhrBackend(factory);
+    });
+    it('emits status immediately', () => {
+      const events = trackEvents(backend.handle(TEST_POST));
+      expect(events.length).toBe(1);
+      expect(events[0].type).toBe(HttpEventType.Sent);
+    });
+    it('sets method, url, and responseType correctly', () => {
+      backend.handle(TEST_POST).subscribe();
+      expect(factory.mock.method).toBe('POST');
+      expect(factory.mock.responseType).toBe('text');
+      expect(factory.mock.url).toBe('/test');
+    });
+    it('sets outgoing body correctly', () => {
+      backend.handle(TEST_POST).subscribe();
+      expect(factory.mock.body).toBe('some body');
+    });
+    it('sets outgoing headers, including default headers', () => {
+      const post = TEST_POST.clone({
+        setHeaders: {
+          'Test': 'Test header',
+        },
+      });
+      backend.handle(post).subscribe();
+      expect(factory.mock.mockHeaders).toEqual({
+        'Test': 'Test header',
+        'Accept': 'application/json, text/plain, */*',
+        'Content-Type': 'text/plain',
+      });
+    });
+    it('sets outgoing headers, including overriding defaults', () => {
+      const setHeaders = {
+        'Test': 'Test header',
+        'Accept': 'text/html',
+        'Content-Type': 'text/css',
+      };
+      backend.handle(TEST_POST.clone({setHeaders})).subscribe();
+      expect(factory.mock.mockHeaders).toEqual(setHeaders);
+    });
+    it('passes withCredentials through', () => {
+      backend.handle(TEST_POST.clone({withCredentials: true})).subscribe();
+      expect(factory.mock.withCredentials).toBe(true);
+    });
+    it('handles a text response', () => {
+      const events = trackEvents(backend.handle(TEST_POST));
+      factory.mock.mockFlush(200, 'OK', 'some response');
+      expect(events.length).toBe(2);
+      expect(events[1].type).toBe(HttpEventType.Response);
+      expect(events[1] instanceof HttpResponse).toBeTruthy();
+      const res = events[1] as HttpResponse<string>;
+      expect(res.body).toBe('some response');
+      expect(res.status).toBe(200);
+      expect(res.statusText).toBe('OK');
+    });
+    it('handles a json response', () => {
+      const events = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
+      factory.mock.mockFlush(200, 'OK', {data: 'some data'});
+      expect(events.length).toBe(2);
+      const res = events[1] as HttpResponse<{data: string}>;
+      expect(res.body !.data).toBe('some data');
+    });
+    it('handles a json response that comes via responseText', () => {
+      const events = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
+      factory.mock.mockFlush(200, 'OK', JSON.stringify({data: 'some data'}));
+      expect(events.length).toBe(2);
+      const res = events[1] as HttpResponse<{data: string}>;
+      expect(res.body !.data).toBe('some data');
+    });
+    it('emits unsuccessful responses via the error path', (done: DoneFn) => {
+      backend.handle(TEST_POST).subscribe(undefined, (err: HttpErrorResponse) => {
+        expect(err instanceof HttpErrorResponse).toBe(true);
+        expect(err.error).toBe('this is the error');
+        done();
+      });
+      factory.mock.mockFlush(400, 'Bad Request', 'this is the error');
+    });
+    it('emits real errors via the error path', (done: DoneFn) => {
+      backend.handle(TEST_POST).subscribe(undefined, (err: HttpErrorResponse) => {
+        expect(err instanceof HttpErrorResponse).toBe(true);
+        expect(err.error instanceof Error);
+        done();
+      });
+      factory.mock.mockErrorEvent(new Error('blah'));
+    });
+    describe('progress events', () => {
+      it('are emitted for download progress', (done: DoneFn) => {
+        backend.handle(TEST_POST.clone({reportProgress: true})).toArray().subscribe(events => {
+          expect(events.map(event => event.type)).toEqual([
+            HttpEventType.Sent,
+            HttpEventType.ResponseHeader,
+            HttpEventType.DownloadProgress,
+            HttpEventType.DownloadProgress,
+            HttpEventType.Response,
+          ]);
+          const [progress1, progress2, response] = [
+            events[2] as HttpDownloadProgressEvent, events[3] as HttpDownloadProgressEvent,
+            events[4] as HttpResponse<string>
+          ];
+          expect(progress1.partialText).toBe('down');
+          expect(progress1.loaded).toBe(100);
+          expect(progress1.total).toBe(300);
+          expect(progress2.partialText).toBe('download');
+          expect(progress2.loaded).toBe(200);
+          expect(progress2.total).toBe(300);
+          expect(response.body).toBe('downloaded');
+          done();
+        });
+        factory.mock.responseText = 'down';
+        factory.mock.mockDownloadProgressEvent(100, 300);
+        factory.mock.responseText = 'download';
+        factory.mock.mockDownloadProgressEvent(200, 300);
+        factory.mock.mockFlush(200, 'OK', 'downloaded');
+      });
+      it('are emitted for upload progress', (done: DoneFn) => {
+        backend.handle(TEST_POST.clone({reportProgress: true})).toArray().subscribe(events => {
+          expect(events.map(event => event.type)).toEqual([
+            HttpEventType.Sent,
+            HttpEventType.UploadProgress,
+            HttpEventType.UploadProgress,
+            HttpEventType.Response,
+          ]);
+          const [progress1, progress2] = [
+            events[1] as HttpUploadProgressEvent,
+            events[2] as HttpUploadProgressEvent,
+          ];
+          expect(progress1.loaded).toBe(100);
+          expect(progress1.total).toBe(300);
+          expect(progress2.loaded).toBe(200);
+          expect(progress2.total).toBe(300);
+          done();
+        });
+        factory.mock.mockUploadProgressEvent(100, 300);
+        factory.mock.mockUploadProgressEvent(200, 300);
+        factory.mock.mockFlush(200, 'OK', 'Done');
+      });
+      it('are emitted when both upload and download progress are available', (done: DoneFn) => {
+        backend.handle(TEST_POST.clone({reportProgress: true})).toArray().subscribe(events => {
+          expect(events.map(event => event.type)).toEqual([
+            HttpEventType.Sent,
+            HttpEventType.UploadProgress,
+            HttpEventType.ResponseHeader,
+            HttpEventType.DownloadProgress,
+            HttpEventType.Response,
+          ]);
+          done();
+        });
+        factory.mock.mockUploadProgressEvent(100, 300);
+        factory.mock.mockDownloadProgressEvent(200, 300);
+        factory.mock.mockFlush(200, 'OK', 'Done');
+      });
+      it('are emitted even if length is not computable', (done: DoneFn) => {
+        backend.handle(TEST_POST.clone({reportProgress: true})).toArray().subscribe(events => {
+          expect(events.map(event => event.type)).toEqual([
+            HttpEventType.Sent,
+            HttpEventType.UploadProgress,
+            HttpEventType.ResponseHeader,
+            HttpEventType.DownloadProgress,
+            HttpEventType.Response,
+          ]);
+          done();
+        });
+        factory.mock.mockUploadProgressEvent(100);
+        factory.mock.mockDownloadProgressEvent(200);
+        factory.mock.mockFlush(200, 'OK', 'Done');
+      });
+      it('include ResponseHeader with headers and status', (done: DoneFn) => {
+        backend.handle(TEST_POST.clone({reportProgress: true})).toArray().subscribe(events => {
+          expect(events.map(event => event.type)).toEqual([
+            HttpEventType.Sent,
+            HttpEventType.ResponseHeader,
+            HttpEventType.DownloadProgress,
+            HttpEventType.Response,
+          ]);
+          const partial = events[1] as HttpHeaderResponse;
+          expect(partial.headers.get('Content-Type')).toEqual('text/plain');
+          expect(partial.headers.get('Test')).toEqual('Test header');
+          done();
+        });
+        factory.mock.mockResponseHeaders = 'Test: Test header\nContent-Type: text/plain\n';
+        factory.mock.mockDownloadProgressEvent(200);
+        factory.mock.mockFlush(200, 'OK', 'Done');
+      });
+      it('are unsubscribed along with the main request', () => {
+        const sub = backend.handle(TEST_POST.clone({reportProgress: true})).subscribe();
+        expect(factory.mock.listeners.progress).not.toBeUndefined();
+        sub.unsubscribe();
+        expect(factory.mock.listeners.progress).toBeUndefined();
+      });
+      it('do not cause headers to be re-parsed on main response', (done: DoneFn) => {
+        backend.handle(TEST_POST.clone({reportProgress: true})).toArray().subscribe(events => {
+          events
+              .filter(
+                  event => event.type === HttpEventType.Response ||
+                      event.type === HttpEventType.ResponseHeader)
+              .map(event => event as HttpResponseBase)
+              .forEach(event => {
+                expect(event.status).toBe(203);
+                expect(event.headers.get('Test')).toEqual('This is a test');
+              });
+          done();
+        });
+        factory.mock.mockResponseHeaders = 'Test: This is a test\n';
+        factory.mock.status = 203;
+        factory.mock.mockDownloadProgressEvent(100, 300);
+        factory.mock.mockResponseHeaders = 'Test: should never be read\n';
+        factory.mock.mockFlush(203, 'OK', 'Testing 1 2 3');
+      });
+    });
+    describe('gets response URL', () => {
+      it('from XHR.responsesURL', (done: DoneFn) => {
+        backend.handle(TEST_POST).toArray().subscribe(events => {
+          expect(events.length).toBe(2);
+          expect(events[1].type).toBe(HttpEventType.Response);
+          const response = events[1] as HttpResponse<string>;
+          expect(response.url).toBe('/response/url');
+          done();
+        });
+        factory.mock.responseURL = '/response/url';
+        factory.mock.mockFlush(200, 'OK', 'Test');
+      });
+      it('from X-Request-URL header if XHR.responseURL is not present', (done: DoneFn) => {
+        backend.handle(TEST_POST).toArray().subscribe(events => {
+          expect(events.length).toBe(2);
+          expect(events[1].type).toBe(HttpEventType.Response);
+          const response = events[1] as HttpResponse<string>;
+          expect(response.url).toBe('/response/url');
+          done();
+        });
+        factory.mock.mockResponseHeaders = 'X-Request-URL: /response/url\n';
+        factory.mock.mockFlush(200, 'OK', 'Test');
+      });
+      it('falls back on Request.url if neither are available', (done: DoneFn) => {
+        backend.handle(TEST_POST).toArray().subscribe(events => {
+          expect(events.length).toBe(2);
+          expect(events[1].type).toBe(HttpEventType.Response);
+          const response = events[1] as HttpResponse<string>;
+          expect(response.url).toBe('/test');
+          done();
+        });
+        factory.mock.mockFlush(200, 'OK', 'Test');
+      })
+    });
+    describe('corrects for quirks', () => {
+      it('by normalizing 1223 status to 204', (done: DoneFn) => {
+        backend.handle(TEST_POST).toArray().subscribe(events => {
+          expect(events.length).toBe(2);
+          expect(events[1].type).toBe(HttpEventType.Response);
+          const response = events[1] as HttpResponse<string>;
+          expect(response.status).toBe(204);
+          done();
+        });
+        factory.mock.mockFlush(1223, 'IE Special Status', 'Test');
+      });
+      it('by normalizing 0 status to 200 if a body is present', (done: DoneFn) => {
+        backend.handle(TEST_POST).toArray().subscribe(events => {
+          expect(events.length).toBe(2);
+          expect(events[1].type).toBe(HttpEventType.Response);
+          const response = events[1] as HttpResponse<string>;
+          expect(response.status).toBe(200);
+          done();
+        });
+        factory.mock.mockFlush(0, 'CORS 0 status', 'Test');
+      });
+      it('by leaving 0 status as 0 if a body is not present', (done: DoneFn) => {
+        backend.handle(TEST_POST).toArray().subscribe(undefined, (error: HttpErrorResponse) => {
+          expect(error.status).toBe(0);
+          done();
+        });
+        factory.mock.mockFlush(0, 'CORS 0 status', null);
+      });
+    });
+  });
+}
diff --git a/packages/common/http/test/xsrf_spec.ts b/packages/common/http/test/xsrf_spec.ts
new file mode 100644
index 0000000000..f59b7df84d
--- /dev/null
+++ b/packages/common/http/test/xsrf_spec.ts
@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HttpHandler} from '../src/backend';
+import {HttpHeaders} from '../src/headers';
+import {HttpRequest} from '../src/request';
+import {HttpXsrfCookieExtractor, HttpXsrfInterceptor} from '../src/xsrf';
+
+import {HttpClientTestingBackend} from '../testing/src/backend';
+
+class SampleTokenExtractor {
+  constructor(private token: string|null) {}
+
+  getToken(): string|null { return this.token; }
+}
+
+export function main() {
+  describe('HttpXsrfInterceptor', () => {
+    let backend: HttpClientTestingBackend;
+    const interceptor = new HttpXsrfInterceptor(new SampleTokenExtractor('test'), 'X-XSRF-TOKEN');
+    beforeEach(() => { backend = new HttpClientTestingBackend(); });
+    it('applies XSRF protection to outgoing requests', () => {
+      interceptor.intercept(new HttpRequest('POST', '/test', {}), backend).subscribe();
+      const req = backend.expectOne('/test');
+      expect(req.request.headers.get('X-XSRF-TOKEN')).toEqual('test');
+      req.flush({});
+    });
+    it('does not apply XSRF protection when request is a GET', () => {
+      interceptor.intercept(new HttpRequest('GET', '/test'), backend).subscribe();
+      const req = backend.expectOne('/test');
+      expect(req.request.headers.has('X-XSRF-TOKEN')).toEqual(false);
+      req.flush({});
+    });
+    it('does not apply XSRF protection when request is a HEAD', () => {
+      interceptor.intercept(new HttpRequest('HEAD', '/test'), backend).subscribe();
+      const req = backend.expectOne('/test');
+      expect(req.request.headers.has('X-XSRF-TOKEN')).toEqual(false);
+      req.flush({});
+    });
+    it('does not overwrite existing header', () => {
+      interceptor
+          .intercept(
+              new HttpRequest(
+                  'POST', '/test', {}, {headers: new HttpHeaders().set('X-XSRF-TOKEN', 'blah')}),
+              backend)
+          .subscribe();
+      const req = backend.expectOne('/test');
+      expect(req.request.headers.get('X-XSRF-TOKEN')).toEqual('blah');
+      req.flush({});
+    });
+    it('does not set the header for a null token', () => {
+      const interceptor = new HttpXsrfInterceptor(new SampleTokenExtractor(null), 'X-XSRF-TOKEN');
+      interceptor.intercept(new HttpRequest('POST', '/test', {}), backend).subscribe();
+      const req = backend.expectOne('/test');
+      expect(req.request.headers.has('X-XSRF-TOKEN')).toEqual(false);
+      req.flush({});
+    });
+    afterEach(() => { backend.verify(); });
+  });
+  describe('HttpXsrfCookieExtractor', () => {
+    let document: {[key: string]: string};
+    let extractor: HttpXsrfCookieExtractor
+    beforeEach(() => {
+      document = {
+        cookie: 'XSRF-TOKEN=test',
+      };
+      extractor = new HttpXsrfCookieExtractor(document, 'browser', 'XSRF-TOKEN');
+    });
+    it('parses the cookie from document.cookie',
+       () => { expect(extractor.getToken()).toEqual('test'); });
+    it('does not re-parse if document.cookie has not changed', () => {
+      expect(extractor.getToken()).toEqual('test');
+      expect(extractor.getToken()).toEqual('test');
+      expect(extractor.parseCount).toEqual(1);
+    });
+    it('re-parses if document.cookie changes', () => {
+      expect(extractor.getToken()).toEqual('test');
+      document['cookie'] = 'XSRF-TOKEN=blah';
+      expect(extractor.getToken()).toEqual('blah');
+      expect(extractor.parseCount).toEqual(2);
+    });
+  });
+}
diff --git a/packages/common/http/testing/index.ts b/packages/common/http/testing/index.ts
new file mode 100644
index 0000000000..f93e7c31d5
--- /dev/null
+++ b/packages/common/http/testing/index.ts
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './public_api';
diff --git a/packages/common/http/testing/package.json b/packages/common/http/testing/package.json
new file mode 100644
index 0000000000..1d4ecfb152
--- /dev/null
+++ b/packages/common/http/testing/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@angular/common/http/testing",
+  "typings": "../testing.d.ts",
+  "main": "../../bundles/common-http-testing.umd.js",
+  "module": "../../@angular/common/http/testing.es5.js",
+  "es2015": "../../@angular/common/http/testing.js"
+}
diff --git a/packages/common/http/testing/public_api.ts b/packages/common/http/testing/public_api.ts
new file mode 100644
index 0000000000..c42e3300b6
--- /dev/null
+++ b/packages/common/http/testing/public_api.ts
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export {HttpTestingController, RequestMatch} from './src/api';
+export {HttpClientTestingModule} from './src/module';
+export {TestRequest} from './src/request';
diff --git a/packages/common/http/testing/rollup.config.js b/packages/common/http/testing/rollup.config.js
new file mode 100644
index 0000000000..d18c37fbfd
--- /dev/null
+++ b/packages/common/http/testing/rollup.config.js
@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/common/http': 'ng.common.http',
+  'rxjs/Observable': 'Rx',
+  'rxjs/ReplaySubject': 'Rx',
+  'rxjs/Subject': 'Rx',
+};
+
+export default {
+  entry: '../../../../dist/packages-dist/common/@angular/common/http/testing.es5.js',
+  dest: '../../../../dist/packages-dist/common/bundles/common-http-testing.umd.js',
+  format: 'umd',
+  exports: 'named',
+  moduleName: 'ng.common.http.testing',
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
+};
diff --git a/packages/common/http/testing/src/api.ts b/packages/common/http/testing/src/api.ts
new file mode 100644
index 0000000000..297ff36179
--- /dev/null
+++ b/packages/common/http/testing/src/api.ts
@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HttpRequest} from '@angular/common/http';
+
+import {TestRequest} from './request';
+
+/**
+ * Defines a matcher for requests based on URL, method, or both.
+ *
+ * @experimental
+ */
+export interface RequestMatch {
+  method?: string;
+  url?: string;
+}
+
+/**
+ * Controller to be injected into tests, that allows for mocking and flushing
+ * of requests.
+ *
+ * @experimental
+ */
+export abstract class HttpTestingController {
+  /**
+   * Search for requests that match the given parameter, without any expectations.
+   */
+  abstract match(match: string|RequestMatch|((req: HttpRequest<any>) => boolean)): TestRequest[];
+
+  /**
+   * Expect that a single request has been made which matches the given URL, and return its
+   * mock.
+   *
+   * If no such request has been made, or more than one such request has been made, fail with an
+   * error message including the given request description, if any.
+   */
+  abstract expectOne(url: string, description?: string): TestRequest;
+
+  /**
+   * Expect that a single request has been made which matches the given parameters, and return
+   * its mock.
+   *
+   * If no such request has been made, or more than one such request has been made, fail with an
+   * error message including the given request description, if any.
+   */
+  abstract expectOne(params: RequestMatch, description?: string): TestRequest;
+
+  /**
+   * Expect that a single request has been made which matches the given predicate function, and
+   * return its mock.
+   *
+   * If no such request has been made, or more than one such request has been made, fail with an
+   * error message including the given request description, if any.
+   */
+  abstract expectOne(matchFn: ((req: HttpRequest<any>) => boolean), description?: string):
+      TestRequest;
+
+  /**
+   * Expect that a single request has been made which matches the given condition, and return
+   * its mock.
+   *
+   * If no such request has been made, or more than one such request has been made, fail with an
+   * error message including the given request description, if any.
+   */
+  abstract expectOne(
+      match: string|RequestMatch|((req: HttpRequest<any>) => boolean),
+      description?: string): TestRequest;
+
+  /**
+   * Expect that no requests have been made which match the given URL.
+   *
+   * If a matching request has been made, fail with an error message including the given request
+   * description, if any.
+   */
+  abstract expectNone(url: string, description?: string): void;
+
+  /**
+   * Expect that no requests have been made which match the given parameters.
+   *
+   * If a matching request has been made, fail with an error message including the given request
+   * description, if any.
+   */
+  abstract expectNone(params: RequestMatch, description?: string): void;
+
+  /**
+   * Expect that no requests have been made which match the given predicate function.
+   *
+   * If a matching request has been made, fail with an error message including the given request
+   * description, if any.
+   */
+  abstract expectNone(matchFn: ((req: HttpRequest<any>) => boolean), description?: string): void;
+
+  /**
+   * Expect that no requests have been made which match the given condition.
+   *
+   * If a matching request has been made, fail with an error message including the given request
+   * description, if any.
+   */
+  abstract expectNone(
+      match: string|RequestMatch|((req: HttpRequest<any>) => boolean), description?: string): void;
+
+  /**
+   * Verify that no unmatched requests are outstanding.
+   *
+   * If any requests are outstanding, fail with an error message indicating which requests were not
+   * handled.
+   *
+   * If `ignoreCancelled` is not set (the default), `verify()` will also fail if cancelled requests
+   * were not explicitly matched.
+   */
+  abstract verify(opts?: {ignoreCancelled?: boolean}): void;
+}
diff --git a/packages/common/http/testing/src/backend.ts b/packages/common/http/testing/src/backend.ts
new file mode 100644
index 0000000000..1cb5e2b125
--- /dev/null
+++ b/packages/common/http/testing/src/backend.ts
@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HttpBackend, HttpEvent, HttpEventType, HttpRequest} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {Observer} from 'rxjs/Observer';
+import {startWith} from 'rxjs/operator/startWith';
+
+import {HttpTestingController, RequestMatch} from './api';
+import {TestRequest} from './request';
+
+
+/**
+ * A testing backend for `HttpClient` which both acts as an `HttpBackend`
+ * and as the `HttpTestingController`.
+ *
+ * `HttpClientTestingBackend` works by keeping a list of all open requests.
+ * As requests come in, they're added to the list. Users can assert that specific
+ * requests were made and then flush them. In the end, a verify() method asserts
+ * that no unexpected requests were made.
+ *
+ * @experimental
+ */
+@Injectable()
+export class HttpClientTestingBackend implements HttpBackend, HttpTestingController {
+  /**
+   * List of pending requests which have not yet been expected.
+   */
+  private open: TestRequest[] = [];
+
+  /**
+   * Handle an incoming request by queueing it in the list of open requests.
+   */
+  handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
+    return new Observable((observer: Observer<any>) => {
+      const testReq = new TestRequest(req, observer);
+      this.open.push(testReq);
+      observer.next({ type: HttpEventType.Sent } as HttpEvent<any>);
+      return () => { testReq._cancelled = true; };
+    });
+  }
+
+  /**
+   * Helper function to search for requests in the list of open requests.
+   */
+  private _match(match: string|RequestMatch|((req: HttpRequest<any>) => boolean)): TestRequest[] {
+    if (typeof match === 'string') {
+      return this.open.filter(testReq => testReq.request.urlWithParams === match);
+    } else if (typeof match === 'function') {
+      return this.open.filter(testReq => match(testReq.request));
+    } else {
+      return this.open.filter(
+          testReq => (!match.method || testReq.request.method === match.method.toUpperCase()) &&
+              (!match.url || testReq.request.urlWithParams === match.url));
+    }
+  }
+
+  /**
+   * Search for requests in the list of open requests, and return all that match
+   * without asserting anything about the number of matches.
+   */
+  match(match: string|RequestMatch|((req: HttpRequest<any>) => boolean)): TestRequest[] {
+    const results = this._match(match);
+    results.forEach(result => {
+      const index = this.open.indexOf(result);
+      if (index !== -1) {
+        this.open.splice(index, 1);
+      }
+    });
+    return results;
+  }
+
+  /**
+   * Expect that a single outstanding request matches the given matcher, and return
+   * it.
+   *
+   * Requests returned through this API will no longer be in the list of open requests,
+   * and thus will not match twice.
+   */
+  expectOne(match: string|RequestMatch|((req: HttpRequest<any>) => boolean), description?: string):
+      TestRequest {
+    description = description || this.descriptionFromMatcher(match);
+    const matches = this.match(match);
+    if (matches.length > 1) {
+      throw new Error(
+          `Expected one matching request for criteria "${description}", found ${matches.length} requests.`);
+    }
+    if (matches.length === 0) {
+      throw new Error(`Expected one matching request for criteria "${description}", found none.`);
+    }
+    return matches[0];
+  }
+
+  /**
+   * Expect that no outstanding requests match the given matcher, and throw an error
+   * if any do.
+   */
+  expectNone(match: string|RequestMatch|((req: HttpRequest<any>) => boolean), description?: string):
+      void {
+    description = description || this.descriptionFromMatcher(match);
+    const matches = this.match(match);
+    if (matches.length > 0) {
+      throw new Error(
+          `Expected zero matching requests for criteria "${description}", found ${matches.length}.`);
+    }
+  }
+
+  /**
+   * Validate that there are no outstanding requests.
+   */
+  verify(opts: {ignoreCancelled?: boolean} = {}): void {
+    let open = this.open;
+    // It's possible that some requests may be cancelled, and this is expected.
+    // The user can ask to ignore open requests which have been cancelled.
+    if (opts.ignoreCancelled) {
+      open = open.filter(testReq => !testReq.cancelled);
+    }
+    if (open.length > 0) {
+      // Show the methods and URLs of open requests in the error, for convenience.
+      const requests = open.map(testReq => {
+                             const url = testReq.request.urlWithParams.split('?')[0];
+                             const method = testReq.request.method;
+                             return `${method} ${url}`
+                           })
+                           .join(', ');
+      throw new Error(`Expected no open requests, found ${open.length}: ${requests}`);
+    }
+  }
+
+  private descriptionFromMatcher(matcher: string|RequestMatch|
+                                 ((req: HttpRequest<any>) => boolean)): string {
+    if (typeof matcher === 'string') {
+      return `Match URL: ${matcher}`;
+    } else if (typeof matcher === 'object') {
+      const method = matcher.method || '(any)';
+      const url = matcher.url || '(any)';
+      return `Match method: ${method}, URL: ${url}`;
+    } else {
+      return `Match by function: ${matcher.name}`;
+    }
+  }
+}
diff --git a/packages/common/http/testing/src/module.ts b/packages/common/http/testing/src/module.ts
new file mode 100644
index 0000000000..eb1a1c7336
--- /dev/null
+++ b/packages/common/http/testing/src/module.ts
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HttpBackend, HttpClientModule} from '@angular/common/http';
+import {NgModule} from '@angular/core';
+
+import {HttpTestingController} from './api';
+import {HttpClientTestingBackend} from './backend';
+
+
+/**
+ * Configures `HttpClientTestingBackend` as the `HttpBackend` used by `HttpClient`.
+ *
+ * Inject `HttpTestingController` to expect and flush requests in your tests.
+ *
+ * @experimental
+ */
+@NgModule({
+  imports: [
+    HttpClientModule,
+  ],
+  providers: [
+    HttpClientTestingBackend,
+    {provide: HttpBackend, useExisting: HttpClientTestingBackend},
+    {provide: HttpTestingController, useExisting: HttpClientTestingBackend},
+  ],
+})
+export class HttpClientTestingModule {
+}
diff --git a/packages/common/http/testing/src/request.ts b/packages/common/http/testing/src/request.ts
new file mode 100644
index 0000000000..796f661f1e
--- /dev/null
+++ b/packages/common/http/testing/src/request.ts
@@ -0,0 +1,211 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HttpErrorResponse, HttpEvent, HttpEventType, HttpHeaders, HttpRequest, HttpResponse} from '@angular/common/http';
+import {Observer} from 'rxjs/Observer';
+
+/**
+ * A mock requests that was received and is ready to be answered.
+ *
+ * This interface allows access to the underlying `HttpRequest`, and allows
+ * responding with `HttpEvent`s or `HttpErrorResponse`s.
+ *
+ * @experimental
+ */
+export class TestRequest {
+  /**
+   * Whether the request was cancelled after it was sent.
+   */
+  get cancelled(): boolean { return this._cancelled; }
+
+  /**
+   * @internal set by `HttpClientTestingBackend`
+   */
+  _cancelled = false;
+
+  constructor(public request: HttpRequest<any>, private observer: Observer<HttpEvent<any>>) {}
+
+  /**
+   * Resolve the request by returning a body plus additional HTTP information (such as response
+   * headers) if provided.
+   *
+   * Both successful and unsuccessful responses can be delivered via `flush()`.
+   */
+  flush(body: ArrayBuffer|Blob|string|number|Object|(string|number|Object|null)[]|null, opts: {
+    headers?: HttpHeaders | {[name: string]: string | string[]},
+    status?: number,
+    statusText?: string,
+  } = {}): void {
+    if (this.cancelled) {
+      throw new Error(`Cannot flush a cancelled request.`);
+    }
+    const url = this.request.urlWithParams;
+    const headers =
+        (opts.headers instanceof HttpHeaders) ? opts.headers : new HttpHeaders(opts.headers);
+    body = _maybeConvertBody(this.request.responseType, body);
+    let statusText: string|undefined = opts.statusText;
+    let status: number = opts.status !== undefined ? opts.status : 200;
+    if (opts.status === undefined) {
+      if (body === null) {
+        status = 204;
+        statusText = statusText || 'No Content';
+      } else {
+        statusText = statusText || 'OK';
+      }
+    }
+    if (statusText === undefined) {
+      throw new Error('statusText is required when setting a custom status.');
+    }
+    if (status >= 200 && status < 300) {
+      this.observer.next(new HttpResponse<any>({body, headers, status, statusText, url}));
+      this.observer.complete();
+    } else {
+      this.observer.error(new HttpErrorResponse({error: body, headers, status, statusText, url}));
+    }
+  }
+
+  /**
+   * Resolve the request by returning an `ErrorEvent` (e.g. simulating a network failure).
+   */
+  error(error: ErrorEvent, opts: {
+    headers?: HttpHeaders | {[name: string]: string | string[]},
+    status?: number,
+    statusText?: string,
+  } = {}): void {
+    if (this.cancelled) {
+      throw new Error(`Cannot return an error for a cancelled request.`);
+    }
+    if (opts.status && opts.status >= 200 && opts.status < 300) {
+      throw new Error(`error() called with a successful status.`);
+    }
+    const headers =
+        (opts.headers instanceof HttpHeaders) ? opts.headers : new HttpHeaders(opts.headers);
+    this.observer.error(new HttpErrorResponse({
+      error,
+      headers,
+      status: opts.status || 0,
+      statusText: opts.statusText || '',
+      url: this.request.urlWithParams,
+    }));
+  }
+
+  /**
+   * Deliver an arbitrary `HttpEvent` (such as a progress event) on the response stream for this
+   * request.
+   */
+  event(event: HttpEvent<any>): void {
+    if (this.cancelled) {
+      throw new Error(`Cannot send events to a cancelled request.`);
+    }
+    this.observer.next(event);
+  }
+}
+
+
+/**
+ * Helper function to convert a response body to an ArrayBuffer.
+ */
+function _toArrayBufferBody(
+    body: ArrayBuffer | Blob | string | number | Object |
+    (string | number | Object | null)[]): ArrayBuffer {
+  if (typeof ArrayBuffer === 'undefined') {
+    throw new Error('ArrayBuffer responses are not supported on this platform.');
+  }
+  if (body instanceof ArrayBuffer) {
+    return body;
+  }
+  throw new Error('Automatic conversion to ArrayBuffer is not supported for response type.');
+}
+
+/**
+ * Helper function to convert a response body to a Blob.
+ */
+function _toBlob(
+    body: ArrayBuffer | Blob | string | number | Object |
+    (string | number | Object | null)[]): Blob {
+  if (typeof Blob === 'undefined') {
+    throw new Error('Blob responses are not supported on this platform.');
+  }
+  if (body instanceof Blob) {
+    return body;
+  }
+  if (ArrayBuffer && body instanceof ArrayBuffer) {
+    return new Blob([body]);
+  }
+  throw new Error('Automatic conversion to Blob is not supported for response type.');
+}
+
+/**
+ * Helper function to convert a response body to JSON data.
+ */
+function _toJsonBody(
+    body: ArrayBuffer | Blob | string | number | Object | (string | number | Object | null)[],
+    format: string = 'JSON'): Object|string|number|(Object | string | number)[] {
+  if (typeof ArrayBuffer !== 'undefined' && body instanceof ArrayBuffer) {
+    throw new Error(`Automatic conversion to ${format} is not supported for ArrayBuffers.`);
+  }
+  if (typeof Blob !== 'undefined' && body instanceof Blob) {
+    throw new Error(`Automatic conversion to ${format} is not supported for Blobs.`);
+  }
+  if (typeof body === 'string' || typeof body === 'number' || typeof body === 'object' ||
+      Array.isArray(body)) {
+    return body;
+  }
+  throw new Error(`Automatic conversion to ${format} is not supported for response type.`);
+}
+
+/**
+ * Helper function to convert a response body to a string.
+ */
+function _toTextBody(
+    body: ArrayBuffer | Blob | string | number | Object |
+    (string | number | Object | null)[]): string {
+  if (typeof body === 'string') {
+    return body;
+  }
+  if (typeof ArrayBuffer !== 'undefined' && body instanceof ArrayBuffer) {
+    throw new Error('Automatic conversion to text is not supported for ArrayBuffers.');
+  }
+  if (typeof Blob !== 'undefined' && body instanceof Blob) {
+    throw new Error('Automatic conversion to text is not supported for Blobs.');
+  }
+  return JSON.stringify(_toJsonBody(body, 'text'));
+}
+
+/**
+ * Convert a response body to the requested type.
+ */
+function _maybeConvertBody(
+    responseType: string, body: ArrayBuffer | Blob | string | number | Object |
+        (string | number | Object | null)[] | null): ArrayBuffer|Blob|string|number|Object|
+    (string | number | Object | null)[]|null {
+  switch (responseType) {
+    case 'arraybuffer':
+      if (body === null) {
+        return null;
+      }
+      return _toArrayBufferBody(body);
+    case 'blob':
+      if (body === null) {
+        return null;
+      }
+      return _toBlob(body);
+    case 'json':
+      if (body === null) {
+        return 'null';
+      }
+      return _toJsonBody(body);
+    case 'text':
+      if (body === null) {
+        return null;
+      }
+      return _toTextBody(body);
+    default:
+      throw new Error(`Unsupported responseType: ${responseType}`);
+  }
+}
diff --git a/packages/common/http/testing/tsconfig-build.json b/packages/common/http/testing/tsconfig-build.json
new file mode 100644
index 0000000000..11b17cf46d
--- /dev/null
+++ b/packages/common/http/testing/tsconfig-build.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "stripInternal": true,
+    "experimentalDecorators": true,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "outDir": "../../../../dist/packages/common/http/testing",
+    "paths": {
+      "@angular/core": ["../../../../dist/packages/core"],
+      "@angular/common": ["../../../../dist/packages/common"],
+      "@angular/common/http": ["../../../../dist/packages/common/http"],
+      "@angular/platform-browser": ["../../../../dist/packages/platform-browser"]
+    },
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "target": "es2015",
+    "skipLibCheck": true,
+    "lib": ["es2015", "dom"]
+  },
+  "files": [
+    "public_api.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/common/http/testing"
+  }
+}
diff --git a/packages/common/http/tsconfig-build.json b/packages/common/http/tsconfig-build.json
new file mode 100644
index 0000000000..5f47d1b51b
--- /dev/null
+++ b/packages/common/http/tsconfig-build.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "stripInternal": true,
+    "experimentalDecorators": true,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "outDir": "../../../dist/packages/common/http",
+    "paths": {
+      "@angular/common": ["../../../dist/packages/common"],
+      "@angular/core": ["../../../dist/packages/core"]
+    },
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "target": "es2015",
+    "skipLibCheck": true,
+    "lib": ["es2015", "dom"]
+  },
+  "files": [
+    "public_api.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/common/http"
+  }
+}
diff --git a/packages/common/package.json b/packages/common/package.json
index 70b2255e3a..ff6811f9ab 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -8,6 +8,9 @@
   "typings": "./common.d.ts",
   "author": "angular",
   "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "@angular/core": "0.0.0-PLACEHOLDER"
   },
diff --git a/packages/common/rollup.config.js b/packages/common/rollup.config.js
index 31646788f4..42a7893875 100644
--- a/packages/common/rollup.config.js
+++ b/packages/common/rollup.config.js
@@ -6,15 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx',
+};
+
 export default {
   entry: '../../dist/packages-dist/common/@angular/common.es5.js',
   dest: '../../dist/packages-dist/common/bundles/common.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.common',
-  globals: {
-    '@angular/core': 'ng.core',
-    'rxjs/Observable': 'Rx',
-    'rxjs/Subject': 'Rx',
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/common/src/common.ts b/packages/common/src/common.ts
index 21889ba297..c4e7d3cb76 100644
--- a/packages/common/src/common.ts
+++ b/packages/common/src/common.ts
@@ -13,8 +13,10 @@
  */
 export * from './location/index';
 export {NgLocaleLocalization, NgLocalization} from './localization';
+export {parseCookieValue as ɵparseCookieValue} from './cookie';
 export {CommonModule} from './common_module';
 export {NgClass, NgFor, NgForOf, NgForOfContext, NgIf, NgIfContext, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';
+export {DOCUMENT} from './dom_tokens';
 export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, TitleCasePipe} from './pipes/index';
 export {PLATFORM_BROWSER_ID as ɵPLATFORM_BROWSER_ID, PLATFORM_SERVER_ID as ɵPLATFORM_SERVER_ID, PLATFORM_WORKER_APP_ID as ɵPLATFORM_WORKER_APP_ID, PLATFORM_WORKER_UI_ID as ɵPLATFORM_WORKER_UI_ID, isPlatformBrowser, isPlatformServer, isPlatformWorkerApp, isPlatformWorkerUi} from './platform_id';
 export {VERSION} from './version';
diff --git a/packages/common/src/cookie.ts b/packages/common/src/cookie.ts
new file mode 100644
index 0000000000..1e577cfe2b
--- /dev/null
+++ b/packages/common/src/cookie.ts
@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export function parseCookieValue(cookieStr: string, name: string): string|null {
+  name = encodeURIComponent(name);
+  for (const cookie of cookieStr.split(';')) {
+    const eqIndex = cookie.indexOf('=');
+    const [cookieName, cookieValue]: string[] =
+        eqIndex == -1 ? [cookie, ''] : [cookie.slice(0, eqIndex), cookie.slice(eqIndex + 1)];
+    if (cookieName.trim() === name) {
+      return decodeURIComponent(cookieValue);
+    }
+  }
+  return null;
+}
diff --git a/packages/common/src/directives/ng_component_outlet.ts b/packages/common/src/directives/ng_component_outlet.ts
index f924c98ea7..34e32c8e71 100644
--- a/packages/common/src/directives/ng_component_outlet.ts
+++ b/packages/common/src/directives/ng_component_outlet.ts
@@ -22,9 +22,6 @@ import {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, NgMo
  * * `ngComponentOutletInjector`: Optional custom {@link Injector} that will be used as parent for
  * the Component. Defaults to the injector of the current view container.
  *
- * * `ngComponentOutletProviders`: Optional injectable objects ({@link Provider}) that are visible
- * to the component.
- *
  * * `ngComponentOutletContent`: Optional list of projectable nodes to insert into the content
  * section of the component, if exists.
  *
@@ -52,7 +49,7 @@ import {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, NgMo
  *                                   ngModuleFactory: moduleFactory;">
  * </ng-container>
  * ```
- * # Example
+ * ## Example
  *
  * {@example common/ngComponentOutlet/ts/module.ts region='SimpleExample'}
  *
diff --git a/packages/common/src/directives/ng_if.ts b/packages/common/src/directives/ng_if.ts
index 5e71d31d1f..8943fd623b 100644
--- a/packages/common/src/directives/ng_if.ts
+++ b/packages/common/src/directives/ng_if.ts
@@ -17,13 +17,13 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '
  *  - `then` template is the inline template of `ngIf` unless bound to a different value.
  *  - `else` template is blank unless it is bound.
  *
- * # Most common usage
+ * ## Most common usage
  *
  * The most common usage of the `ngIf` directive is to conditionally show the inline template as
  * seen in this example:
  * {@example common/ngIf/ts/module.ts region='NgIfSimple'}
  *
- * # Showing an alternative template using `else`
+ * ## Showing an alternative template using `else`
  *
  * If it is necessary to display a template when the `expression` is falsy use the `else` template
  * binding as shown. Note that the `else` binding points to a `<ng-template>` labeled `#elseBlock`.
@@ -32,7 +32,7 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '
  *
  * {@example common/ngIf/ts/module.ts region='NgIfElse'}
  *
- * # Using non-inlined `then` template
+ * ## Using non-inlined `then` template
  *
  * Usually the `then` template is the inlined template of the `ngIf`, but it can be changed using
  * a binding (just like `else`). Because `then` and `else` are bindings, the template references can
@@ -40,12 +40,12 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '
  *
  * {@example common/ngIf/ts/module.ts region='NgIfThenElse'}
  *
- * # Storing conditional result in a variable
+ * ## Storing conditional result in a variable
  *
  * A common pattern is that we need to show a set of properties from the same object. If the
  * object is undefined, then we have to use the safe-traversal-operator `?.` to guard against
  * dereferencing a `null` value. This is especially the case when waiting on async data such as
- * when using the `async` pipe as shown in folowing example:
+ * when using the `async` pipe as shown in following example:
  *
  * ```
  * Hello {{ (userStream|async)?.last }}, {{ (userStream|async)?.first }}!
diff --git a/packages/common/src/directives/ng_template_outlet.ts b/packages/common/src/directives/ng_template_outlet.ts
index 9e3df0549f..ccfa8ecee4 100644
--- a/packages/common/src/directives/ng_template_outlet.ts
+++ b/packages/common/src/directives/ng_template_outlet.ts
@@ -26,7 +26,7 @@ import {Directive, EmbeddedViewRef, Input, OnChanges, SimpleChanges, TemplateRef
  *
  * Note: using the key `$implicit` in the context object will set it's value as default.
  *
- * # Example
+ * ## Example
  *
  * {@example common/ngTemplateOutlet/ts/module.ts region='NgTemplateOutlet'}
  *
diff --git a/packages/common/src/dom_tokens.ts b/packages/common/src/dom_tokens.ts
new file mode 100644
index 0000000000..c31db4436f
--- /dev/null
+++ b/packages/common/src/dom_tokens.ts
@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {InjectionToken} from '@angular/core';
+
+/**
+ * A DI Token representing the main rendering context. In a browser this is the DOM Document.
+ *
+ * Note: Document might not be available in the Application Context when Application and Rendering
+ * Contexts are not the same (e.g. when running the application into a Web Worker).
+ *
+ * @stable
+ */
+export const DOCUMENT = new InjectionToken<Document>('DocumentToken');
diff --git a/packages/common/src/localization.ts b/packages/common/src/localization.ts
index a4623f8ed5..c2deb745b5 100644
--- a/packages/common/src/localization.ts
+++ b/packages/common/src/localization.ts
@@ -172,42 +172,6 @@ export function getPluralCase(locale: string, nLike: number | string): Plural {
     case 'xog':
       if (n === 1) return Plural.One;
       return Plural.Other;
-    case 'agq':
-    case 'bas':
-    case 'cu':
-    case 'dav':
-    case 'dje':
-    case 'dua':
-    case 'dyo':
-    case 'ebu':
-    case 'ewo':
-    case 'guz':
-    case 'kam':
-    case 'khq':
-    case 'ki':
-    case 'kln':
-    case 'kok':
-    case 'ksf':
-    case 'lrc':
-    case 'lu':
-    case 'luo':
-    case 'luy':
-    case 'mer':
-    case 'mfe':
-    case 'mgh':
-    case 'mua':
-    case 'mzn':
-    case 'nmg':
-    case 'nus':
-    case 'qu':
-    case 'rn':
-    case 'rw':
-    case 'sbp':
-    case 'twq':
-    case 'vai':
-    case 'yav':
-    case 'yue':
-    case 'zgh':
     case 'ak':
     case 'ln':
     case 'mg':
@@ -428,6 +392,9 @@ export function getPluralCase(locale: string, nLike: number | string): Plural {
       if (n === Math.floor(n) && n >= 0 && n <= 1 || n === Math.floor(n) && n >= 11 && n <= 99)
         return Plural.One;
       return Plural.Other;
+    // When there is no specification, the default is always "other"
+    // Spec: http://cldr.unicode.org/index/cldr-spec/plural-rules
+    // > other (required—general plural form — also used if the language only has a single form)
     default:
       return Plural.Other;
   }
diff --git a/packages/common/src/location/location.ts b/packages/common/src/location/location.ts
index 2ff9133e00..ed895260e4 100644
--- a/packages/common/src/location/location.ts
+++ b/packages/common/src/location/location.ts
@@ -168,9 +168,16 @@ export class Location {
   }
 
   /**
-   * If url has a trailing slash, remove it, otherwise return url as is.
+   * If url has a trailing slash, remove it, otherwise return url as is. This
+   * method looks for the first occurence of either #, ?, or the end of the
+   * line as `/` characters after any of these should not be replaced.
    */
-  public static stripTrailingSlash(url: string): string { return url.replace(/\/$/, ''); }
+  public static stripTrailingSlash(url: string): string {
+    const match = url.match(/#|\?|$/);
+    const pathEndIdx = match && match.index || url.length;
+    const droppedSlashIdx = pathEndIdx - (url[pathEndIdx - 1] === '/' ? 1 : 0);
+    return url.slice(0, droppedSlashIdx) + url.slice(pathEndIdx);
+  }
 }
 
 function _stripBaseHref(baseHref: string, url: string): string {
diff --git a/packages/common/src/location/platform_location.ts b/packages/common/src/location/platform_location.ts
index 69c3ba25c7..0f5cb5f32e 100644
--- a/packages/common/src/location/platform_location.ts
+++ b/packages/common/src/location/platform_location.ts
@@ -14,22 +14,18 @@ import {InjectionToken} from '@angular/core';
  * `PlatformLocation` encapsulates all calls to DOM apis, which allows the Router to be platform
  * agnostic.
  * This means that we can have different implementation of `PlatformLocation` for the different
- * platforms
- * that angular supports. For example, the default `PlatformLocation` is {@link
- * BrowserPlatformLocation},
- * however when you run your app in a WebWorker you use {@link WebWorkerPlatformLocation}.
+ * platforms that angular supports. For example, `@angular/platform-browser` provides an
+ * implementation specific to the browser environment, while `@angular/platform-webworker` provides
+ * one suitable for use with web workers.
  *
  * The `PlatformLocation` class is used directly by all implementations of {@link LocationStrategy}
- * when
- * they need to interact with the DOM apis like pushState, popState, etc...
+ * when they need to interact with the DOM apis like pushState, popState, etc...
  *
  * {@link LocationStrategy} in turn is used by the {@link Location} service which is used directly
- * by
- * the {@link Router} in order to navigate between routes. Since all interactions between {@link
+ * by the {@link Router} in order to navigate between routes. Since all interactions between {@link
  * Router} /
  * {@link Location} / {@link LocationStrategy} and DOM apis flow through the `PlatformLocation`
- * class
- * they are all platform independent.
+ * class they are all platform independent.
  *
  * @stable
  */
diff --git a/packages/common/src/pipes/intl.ts b/packages/common/src/pipes/intl.ts
index 8309a9a3b8..483e89fd8c 100644
--- a/packages/common/src/pipes/intl.ts
+++ b/packages/common/src/pipes/intl.ts
@@ -13,16 +13,15 @@ export enum NumberFormatStyle {
 }
 
 export class NumberFormatter {
-  static format(
-      num: number, locale: string, style: NumberFormatStyle,
-      {minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits, currency,
-       currencyAsSymbol = false}: {
-        minimumIntegerDigits?: number,
-        minimumFractionDigits?: number,
-        maximumFractionDigits?: number,
-        currency?: string|null,
-        currencyAsSymbol?: boolean
-      } = {}): string {
+  static format(num: number, locale: string, style: NumberFormatStyle, opts: {
+    minimumIntegerDigits?: number,
+    minimumFractionDigits?: number,
+    maximumFractionDigits?: number,
+    currency?: string|null,
+    currencyAsSymbol?: boolean
+  } = {}): string {
+    const {minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits, currency,
+           currencyAsSymbol = false} = opts;
     const options: Intl.NumberFormatOptions = {
       minimumIntegerDigits,
       minimumFractionDigits,
@@ -173,7 +172,7 @@ function nameCondition(prop: string, len: number): Intl.DateTimeFormatOptions {
 }
 
 function combine(options: Intl.DateTimeFormatOptions[]): Intl.DateTimeFormatOptions {
-  return (<any>Object).assign({}, ...options);
+  return options.reduce((merged, opt) => ({...merged, ...opt}), {});
 }
 
 function datePartGetterFactory(ret: Intl.DateTimeFormatOptions): DateFormatterFn {
diff --git a/packages/common/src/pipes/number_pipe.ts b/packages/common/src/pipes/number_pipe.ts
index 784bc7a768..ae170ddc5f 100644
--- a/packages/common/src/pipes/number_pipe.ts
+++ b/packages/common/src/pipes/number_pipe.ts
@@ -78,7 +78,7 @@ function formatNumber(
  * details see your native internationalization library.
  *
  * WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
- * and may require a polyfill. See {@linkDocs guide/browser-support} for details.
+ * and may require a polyfill. See [Browser Support](guide/browser-support) for details.
  *
  * ### Example
  *
@@ -107,7 +107,7 @@ export class DecimalPipe implements PipeTransform {
  * - `digitInfo` See {@link DecimalPipe} for detailed description.
  *
  * WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
- * and may require a polyfill. See {@linkDocs guide/browser-support} for details.
+ * and may require a polyfill. See [Browser Support](guide/browser-support) for details.
  *
  * ### Example
  *
@@ -140,7 +140,7 @@ export class PercentPipe implements PipeTransform {
  * - `digitInfo` See {@link DecimalPipe} for detailed description.
  *
  * WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
- * and may require a polyfill. See {@linkDocs guide/browser-support} for details.
+ * and may require a polyfill. See [Browser Support](guide/browser-support) for details.
  *
  * ### Example
  *
diff --git a/packages/common/test/cookie_spec.ts b/packages/common/test/cookie_spec.ts
new file mode 100644
index 0000000000..e0a8eeefa4
--- /dev/null
+++ b/packages/common/test/cookie_spec.ts
@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+
+
+/**
+* @license
+* Copyright Google Inc. All Rights Reserved.
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://angular.io/license
+*/
+
+import {parseCookieValue} from '@angular/common/src/cookie';
+import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+
+export function main() {
+  describe('cookies', () => {
+    it('parses cookies', () => {
+      const cookie = 'other-cookie=false; xsrf-token=token-value; is_awesome=true; ffo=true;';
+      expect(parseCookieValue(cookie, 'xsrf-token')).toBe('token-value');
+    });
+    it('handles encoded keys', () => {
+      expect(parseCookieValue('whitespace%20token=token-value', 'whitespace token'))
+          .toBe('token-value');
+    });
+    it('handles encoded values', () => {
+      expect(parseCookieValue('token=whitespace%20', 'token')).toBe('whitespace ');
+      expect(parseCookieValue('token=whitespace%0A', 'token')).toBe('whitespace\n');
+    });
+  });
+}
diff --git a/packages/common/test/localization_spec.ts b/packages/common/test/localization_spec.ts
index 20f6fa51cc..08e7792e8e 100644
--- a/packages/common/test/localization_spec.ts
+++ b/packages/common/test/localization_spec.ts
@@ -119,6 +119,16 @@ export function main() {
         expect(l10n.getPluralCategory(24)).toEqual('few');
         expect(l10n.getPluralCategory(25)).toEqual('other');
       });
+
+      it('should return the default value for a locale with no rule', () => {
+        const l10n = new NgLocaleLocalization('zgh');
+
+        expect(l10n.getPluralCategory(0)).toEqual('other');
+        expect(l10n.getPluralCategory(1)).toEqual('other');
+        expect(l10n.getPluralCategory(3)).toEqual('other');
+        expect(l10n.getPluralCategory(5)).toEqual('other');
+        expect(l10n.getPluralCategory(10)).toEqual('other');
+      });
     });
 
     describe('getPluralCategory', () => {
@@ -157,4 +167,4 @@ export function main() {
       });
     });
   });
-}
\ No newline at end of file
+}
diff --git a/packages/common/test/location/location_spec.ts b/packages/common/test/location/location_spec.ts
new file mode 100644
index 0000000000..7a110955d7
--- /dev/null
+++ b/packages/common/test/location/location_spec.ts
@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Location} from '../../src/location/location';
+
+export function main() {
+  const baseUrl = '/base';
+
+  describe('Location Class', () => {
+    describe('stripTrailingSlash', () => {
+      it('should strip single character slash', () => {
+        const input = '/';
+        expect(Location.stripTrailingSlash(input)).toBe('');
+      });
+
+      it('should normalize strip a trailing slash', () => {
+        const input = baseUrl + '/';
+        expect(Location.stripTrailingSlash(input)).toBe(baseUrl);
+      });
+
+      it('should ignore query params when stripping a slash', () => {
+        const input = baseUrl + '/?param=1';
+        expect(Location.stripTrailingSlash(input)).toBe(baseUrl + '?param=1');
+      });
+
+      it('should not remove slashes inside query params', () => {
+        const input = baseUrl + '?test/?=3';
+        expect(Location.stripTrailingSlash(input)).toBe(input);
+      });
+
+      it('should not remove slashes after a pound sign', () => {
+        const input = baseUrl + '#test/?=3';
+        expect(Location.stripTrailingSlash(input)).toBe(input);
+      });
+    });
+  });
+}
\ No newline at end of file
diff --git a/packages/common/test/pipes/date_pipe_spec.ts b/packages/common/test/pipes/date_pipe_spec.ts
index e9f456c3a2..07a009d0dc 100644
--- a/packages/common/test/pipes/date_pipe_spec.ts
+++ b/packages/common/test/pipes/date_pipe_spec.ts
@@ -7,6 +7,7 @@
  */
 
 import {DatePipe} from '@angular/common';
+import {JitReflector} from '@angular/compiler';
 import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
 import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 
@@ -34,8 +35,9 @@ export function main() {
       pipe = new DatePipe('en-US');
     });
 
-    it('should be marked as pure',
-       () => { expect(new PipeResolver().resolve(DatePipe).pure).toEqual(true); });
+    it('should be marked as pure', () => {
+      expect(new PipeResolver(new JitReflector()).resolve(DatePipe) !.pure).toEqual(true);
+    });
 
     describe('supports', () => {
       it('should support date', () => { expect(() => pipe.transform(date)).not.toThrow(); });
diff --git a/packages/common/test/pipes/i18n_plural_pipe_spec.ts b/packages/common/test/pipes/i18n_plural_pipe_spec.ts
index fa49cdeb01..436657b026 100644
--- a/packages/common/test/pipes/i18n_plural_pipe_spec.ts
+++ b/packages/common/test/pipes/i18n_plural_pipe_spec.ts
@@ -7,6 +7,7 @@
  */
 
 import {I18nPluralPipe, NgLocalization} from '@angular/common';
+import {JitReflector} from '@angular/compiler';
 import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
 import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
 
@@ -27,8 +28,9 @@ export function main() {
       pipe = new I18nPluralPipe(localization);
     });
 
-    it('should be marked as pure',
-       () => { expect(new PipeResolver().resolve(I18nPluralPipe).pure).toEqual(true); });
+    it('should be marked as pure', () => {
+      expect(new PipeResolver(new JitReflector()).resolve(I18nPluralPipe) !.pure).toEqual(true);
+    });
 
     describe('transform', () => {
       it('should return 0 text if value is 0', () => {
diff --git a/packages/common/test/pipes/i18n_select_pipe_spec.ts b/packages/common/test/pipes/i18n_select_pipe_spec.ts
index 191a607d62..d88e4b5c64 100644
--- a/packages/common/test/pipes/i18n_select_pipe_spec.ts
+++ b/packages/common/test/pipes/i18n_select_pipe_spec.ts
@@ -7,6 +7,7 @@
  */
 
 import {I18nSelectPipe} from '@angular/common';
+import {JitReflector} from '@angular/compiler';
 import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
 
 export function main() {
@@ -14,8 +15,9 @@ export function main() {
     const pipe: I18nSelectPipe = new I18nSelectPipe();
     const mapping = {'male': 'Invite him.', 'female': 'Invite her.', 'other': 'Invite them.'};
 
-    it('should be marked as pure',
-       () => { expect(new PipeResolver().resolve(I18nSelectPipe).pure).toEqual(true); });
+    it('should be marked as pure', () => {
+      expect(new PipeResolver(new JitReflector()).resolve(I18nSelectPipe) !.pure).toEqual(true);
+    });
 
     describe('transform', () => {
       it('should return the "male" text if value is "male"', () => {
diff --git a/packages/common/testing/rollup.config.js b/packages/common/testing/rollup.config.js
index fbdfc07a13..117103dc4c 100644
--- a/packages/common/testing/rollup.config.js
+++ b/packages/common/testing/rollup.config.js
@@ -6,16 +6,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx'
+};
+
 export default {
   entry: '../../../dist/packages-dist/common/@angular/common/testing.es5.js',
   dest: '../../../dist/packages-dist/common/bundles/common-testing.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.common.testing',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    'rxjs/Observable': 'Rx',
-    'rxjs/Subject': 'Rx'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/common/tsconfig-build.json b/packages/common/tsconfig-build.json
index 873effbeb7..4060df709f 100644
--- a/packages/common/tsconfig-build.json
+++ b/packages/common/tsconfig-build.json
@@ -1,35 +1,41 @@
 {
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/common"
+  },
+
   "compilerOptions": {
-    "baseUrl": ".",
-    "declaration": true,
     "stripInternal": true,
-    "experimentalDecorators": true,
     "strictNullChecks": true,
     "noImplicitAny": true,
     "noFallthroughCasesInSwitch": true,
     "module": "es2015",
     "moduleResolution": "node",
+    "target": "es2015",
+    "skipLibCheck": true,
+    "lib": [ "es2015", "dom" ],
+    // don't auto-discover @types/node, it results in a ///<reference in the .d.ts output
+    "types": [],
+
+    /**
+     * The rest of the file is configuration that's overridden by bazel.
+     * It can be removed after we fully migrate.
+     */
+    "baseUrl": ".",
+    "declaration": true,
+    "experimentalDecorators": true,
     "outDir": "../../dist/packages/common",
     "paths": {
       "@angular/core": ["../../dist/packages/core"]
     },
     "rootDir": ".",
     "sourceMap": true,
-    "inlineSources": true,
-    "target": "es2015",
-    "skipLibCheck": true,
-    "lib": [ "es2015", "dom" ],
-    // don't auto-discover @types/node, it results in a ///<reference in the .d.ts output
-    "types": []
+    "inlineSources": true
   },
   "files": [
     "public_api.ts",
     "../../node_modules/zone.js/dist/zone.js.d.ts"
-  ],
-  "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
-    "flatModuleOutFile": "index.js",
-    "flatModuleId": "@angular/common"
-  }
+  ]
 }
diff --git a/packages/compiler-cli/BUILD.bazel b/packages/compiler-cli/BUILD.bazel
new file mode 100644
index 0000000000..02d37f163f
--- /dev/null
+++ b/packages/compiler-cli/BUILD.bazel
@@ -0,0 +1,17 @@
+package(default_visibility=["//visibility:public"])
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+ts_library(
+    name = "compiler-cli",
+    srcs = glob(["**/*.ts"], exclude=[
+        "integrationtest/**",
+        "test/**",
+    ]),
+    module_name = "@angular/compiler-cli",
+    deps = [
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/tsc-wrapped",
+    ],
+    tsconfig = ":tsconfig-build.json",
+)
diff --git a/packages/compiler-cli/README.md b/packages/compiler-cli/README.md
index 971b2fc452..074a9ec499 100644
--- a/packages/compiler-cli/README.md
+++ b/packages/compiler-cli/README.md
@@ -121,9 +121,6 @@ At a high level, this program
 # Build Angular and the compiler
 ./build.sh
 
-# Copy over the package so we can test the compiler tests
-$ cp tools/@angular/tsc-wrapped/package.json dist/tools/@angular/tsc-wrapped
-
 # Run the test once
 # (First edit the LINKABLE_PKGS to use npm link instead of npm install)
 $ ./scripts/ci/offline_compiler_test.sh
diff --git a/packages/compiler-cli/browser-rollup.config.js b/packages/compiler-cli/browser-rollup.config.js
new file mode 100644
index 0000000000..1de437b635
--- /dev/null
+++ b/packages/compiler-cli/browser-rollup.config.js
@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import commonjs from 'rollup-plugin-commonjs';
+import * as path from 'path';
+
+import 'reflect-metadata';
+
+var m = /^\@angular\/((\w|\-)+)(\/(\w|\d|\/|\-)+)?$/;
+var location = normalize('../../dist/packages-dist') + '/';
+var rxjsLocation = normalize('../../node_modules/rxjs');
+var tslibLocation = normalize('../../node_modules/tslib');
+var esm = 'esm/';
+
+var locations = {
+  'tsc-wrapped': normalize('../../dist/tools/@angular') + '/',
+  'compiler-cli': normalize('../../dist/packages') + '/'
+};
+
+var esm_suffixes = {};
+
+function normalize(fileName) {
+  return path.resolve(__dirname, fileName);
+}
+
+function resolve(id, from) {
+  // console.log('Resolve id:', id, 'from', from)
+  if (id == '@angular/tsc-wrapped') {
+    // Hack to restrict the import to not include the index of @angular/tsc-wrapped so we don't
+    // rollup tsickle.
+    return locations['tsc-wrapped'] + 'tsc-wrapped/src/collector.js';
+  }
+  var match = m.exec(id);
+  if (match) {
+    var packageName = match[1];
+    var esm_suffix = esm_suffixes[packageName] || '';
+    var loc = locations[packageName] || location;
+    var r = loc !== location && (loc + esm_suffix + packageName + (match[3] || '/index') + '.js') ||
+        loc + packageName + '/@angular/' + packageName + '.es5.js';
+    // console.log('** ANGULAR MAPPED **: ', r);
+    return r;
+  }
+  if (id && id.startsWith('rxjs/')) {
+    const resolved = `${rxjsLocation}${id.replace('rxjs', '')}.js`;
+    return resolved;
+  }
+  if (id == 'tslib') {
+    return tslibLocation + '/tslib.es6.js';
+  }
+}
+
+// hack to get around issues with default exports
+var banner = `ts['default'] = ts['default'] || ts; fs['default'] = fs['default'] || fs;`;
+
+export default {
+  entry: '../../dist/packages-dist/compiler-cli/src/ngc.js',
+  dest: './browser-bundle.umd.js',
+  format: 'umd',
+  moduleName: 'ng.compiler_cli_browser',
+  exports: 'named',
+  external: [
+    'fs',
+    'path',
+    'typescript',
+    'reflect-metadata',
+  ],
+  globals: {
+    'typescript': 'ts',
+    'path': 'path',
+    'fs': 'fs',
+  },
+  banner: banner,
+  plugins: [{resolveId: resolve}, commonjs()]
+}
diff --git a/packages/compiler-cli/index.ts b/packages/compiler-cli/index.ts
index edcf54702e..f242a5b64b 100644
--- a/packages/compiler-cli/index.ts
+++ b/packages/compiler-cli/index.ts
@@ -12,6 +12,16 @@ export {Extractor} from './src/extractor';
 export * from '@angular/tsc-wrapped';
 export {VERSION} from './src/version';
 
+export {DiagnosticTemplateInfo, getTemplateExpressionDiagnostics, getExpressionScope} from './src/diagnostics/expression_diagnostics';
+export {AstType, ExpressionDiagnosticsContext} from './src/diagnostics/expression_type';
+export {getClassMembersFromDeclaration, getPipesTable, getSymbolQuery} from './src/diagnostics/typescript_symbols';
+export {BuiltinType, DeclarationKind, Definition, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable} from './src/diagnostics/symbols';
+
+export * from './src/transformers/api';
+export * from './src/transformers/entry_points';
+
+export {main as ngc} from './src/ngc';
+export {performCompilation} from './src/ngc';
 
 // TODO(hansl): moving to Angular 4 need to update this API.
-export {NgTools_InternalApi_NG_2 as __NGTOOLS_PRIVATE_API_2} from './src/ngtools_api'
+export {NgTools_InternalApi_NG_2 as __NGTOOLS_PRIVATE_API_2} from './src/ngtools_api';
diff --git a/packages/compiler-cli/integrationtest/alt/src/bootstrap.ts b/packages/compiler-cli/integrationtest/alt/src/bootstrap.ts
new file mode 100644
index 0000000000..d6d7aedc7f
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/alt/src/bootstrap.ts
@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {BasicComp} from '../../src/basic';
+import {MainModuleNgFactory} from './module.ngfactory';
+
+MainModuleNgFactory.create(null).instance.appRef.bootstrap(BasicComp);
diff --git a/packages/compiler-cli/integrationtest/ngtools_src/lazy.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/lazy.module.ts
index c200cbe5f9..8f1b788b1b 100644
--- a/packages/compiler-cli/integrationtest/ngtools_src/lazy.module.ts
+++ b/packages/compiler-cli/integrationtest/ngtools_src/lazy.module.ts
@@ -14,11 +14,11 @@ export class LazyComponent {
 }
 
 @NgModule({
-  imports: [RouterModule.forChild([
+  imports: [[RouterModule.forChild([
     {path: '', component: LazyComponent, pathMatch: 'full'},
     {path: 'feature', loadChildren: './feature/feature.module#FeatureModule'},
     {path: 'lazy-feature', loadChildren: './feature/lazy-feature.module#LazyFeatureModule'}
-  ])],
+  ])]],
   declarations: [LazyComponent]
 })
 export class LazyModule {
diff --git a/packages/compiler-cli/integrationtest/src/entry_components.ts b/packages/compiler-cli/integrationtest/src/entry_components.ts
index f969dd25d2..463ba82554 100644
--- a/packages/compiler-cli/integrationtest/src/entry_components.ts
+++ b/packages/compiler-cli/integrationtest/src/entry_components.ts
@@ -10,7 +10,11 @@ import {ANALYZE_FOR_ENTRY_COMPONENTS, Component, ComponentFactoryResolver, Injec
 
 import {BasicComp} from './basic';
 
-@Component({selector: 'cmp-entryComponents', template: '', entryComponents: [BasicComp]})
+@Component({
+  selector: 'cmp-entryComponents',
+  template: '<p i18n>Welcome</p>',
+  entryComponents: [BasicComp]
+})
 export class CompWithEntryComponents {
   constructor(public cfr: ComponentFactoryResolver) {}
 }
diff --git a/packages/compiler-cli/integrationtest/src/jit_summaries.html b/packages/compiler-cli/integrationtest/src/jit_summaries.html
new file mode 100644
index 0000000000..6769dd60bd
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/jit_summaries.html
@@ -0,0 +1 @@
+Hello world!
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/src/jit_summaries.ts b/packages/compiler-cli/integrationtest/src/jit_summaries.ts
new file mode 100644
index 0000000000..8d2bccf698
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/src/jit_summaries.ts
@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, Directive, Injectable, NgModule, Pipe} from '@angular/core';
+
+const instances = new Map<any, Base>();
+
+export function expectInstanceCreated(type: any) {
+  const instance = instances.get(type) !;
+  expect(instance).toBeDefined();
+  expect(instance.dep instanceof SomeDep).toBe(true);
+}
+
+export class SomeDep {}
+
+export class Base {
+  constructor(public dep: SomeDep) { instances.set(Object.getPrototypeOf(this).constructor, this); }
+}
+
+@Component({templateUrl: './jit_summaries.html'})
+export class SomePrivateComponent extends Base {
+}
+
+@Component({templateUrl: './jit_summaries.html'})
+export class SomePublicComponent extends Base {
+}
+
+@Directive({selector: '[someDir]'})
+export class SomeDirective extends Base {
+}
+
+@Pipe({name: 'somePipe'})
+export class SomePipe extends Base {
+  transform(value: any) { return value; }
+}
+
+@Injectable()
+export class SomeService extends Base {
+}
+
+@NgModule({
+  declarations: [SomePublicComponent, SomePrivateComponent, SomeDirective, SomePipe],
+  exports: [SomeDirective, SomePipe, SomePublicComponent],
+  providers: [SomeService]
+})
+export class SomeModule extends Base {
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/src/module.ts b/packages/compiler-cli/integrationtest/src/module.ts
index e6290e211c..ed3bcec7ed 100644
--- a/packages/compiler-cli/integrationtest/src/module.ts
+++ b/packages/compiler-cli/integrationtest/src/module.ts
@@ -28,6 +28,9 @@ import {CompUsingRootModuleDirectiveAndPipe, SomeDirectiveInRootModule, SomeLibM
 import {CompWithNgContent, ProjectingComp} from './projection';
 import {CompForChildQuery, CompWithChildQuery, CompWithDirectiveChild, DirectiveForQuery} from './queries';
 
+// Adding an export here so that TypeScript compiles the file as well
+export {SomeModule as JitSummariesSomeModule} from './jit_summaries';
+
 @NgModule({
   declarations: [
     AnimateCmp,
diff --git a/packages/compiler-cli/integrationtest/test/all_spec.ts b/packages/compiler-cli/integrationtest/test/all_spec.ts
index 2bf078ec81..a44aee27b9 100644
--- a/packages/compiler-cli/integrationtest/test/all_spec.ts
+++ b/packages/compiler-cli/integrationtest/test/all_spec.ts
@@ -16,4 +16,5 @@ import './i18n_spec';
 import './ng_module_spec';
 import './projection_spec';
 import './query_spec';
-import './source_map_spec';
\ No newline at end of file
+import './source_map_spec';
+import './jit_summaries_spec';
diff --git a/packages/compiler-cli/integrationtest/test/basic_spec.ts b/packages/compiler-cli/integrationtest/test/basic_spec.ts
index ff57690237..e48e60074d 100644
--- a/packages/compiler-cli/integrationtest/test/basic_spec.ts
+++ b/packages/compiler-cli/integrationtest/test/basic_spec.ts
@@ -12,6 +12,7 @@ import * as path from 'path';
 import {MultipleComponentsMyComp} from '../src/a/multiple_components';
 import {BasicComp} from '../src/basic';
 import {createComponent} from './util';
+import {createComponentAlt} from './util_alt';
 
 describe('template codegen output', () => {
   const outDir = 'src';
@@ -88,5 +89,17 @@ describe('template codegen output', () => {
       const pText = pElement.children.map((c: any) => c.data).join('').trim();
       expect(pText).toBe('tervetuloa');
     });
+
+    it('should have removed i18n markup', () => {
+      const containerElement = createComponent(BasicComp).debugElement.children[0];
+      expect(containerElement.attributes['title']).toBe('käännä teksti');
+      expect(containerElement.attributes['i18n-title']).toBeUndefined();
+    });
+
+    it('should have removed i18n markup event without translations', () => {
+      const containerElement = createComponentAlt(BasicComp).debugElement.children[0];
+      expect(containerElement.attributes['title']).toBe('translate me');
+      expect(containerElement.attributes['i18n-title']).toBeUndefined();
+    });
   });
 });
diff --git a/packages/compiler-cli/integrationtest/test/i18n_spec.ts b/packages/compiler-cli/integrationtest/test/i18n_spec.ts
index 019b354ce9..dde96ecbe1 100644
--- a/packages/compiler-cli/integrationtest/test/i18n_spec.ts
+++ b/packages/compiler-cli/integrationtest/test/i18n_spec.ts
@@ -34,9 +34,10 @@ const EXPECTED_XMB = `<?xml version="1.0" encoding="UTF-8" ?>
 <!ELEMENT ex (#PCDATA)>
 ]>
 <messagebundle>
-  <msg id="8136548302122759730" desc="desc" meaning="meaning">translate me</msg>
-  <msg id="3492007542396725315">Welcome</msg>
-  <msg id="3772663375917578720">other-3rdP-component</msg>
+  <msg id="8136548302122759730" desc="desc" meaning="meaning"><source>src/basic.ts:1</source>translate me</msg>
+  <msg id="3492007542396725315"><source>src/basic.ts:5</source><source>src/entry_components.ts:1</source>Welcome</msg>
+  <msg id="126808141597411718"><source>node_modules/third_party/other_comp.d.ts:1,2</source>other-3rdP-component
+multi-lines</msg>
 </messagebundle>
 `;
 
@@ -46,23 +47,72 @@ const EXPECTED_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
     <body>
       <trans-unit id="76e1eccb1b772fa9f294ef9c146ea6d0efa8a2d4" datatype="html">
         <source>translate me</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/basic.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
         <note priority="1" from="description">desc</note>
         <note priority="1" from="meaning">meaning</note>
       </trans-unit>
       <trans-unit id="65cc4ab3b4c438e07c89be2b677d08369fb62da2" datatype="html">
         <source>Welcome</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/basic.ts</context>
+          <context context-type="linenumber">5</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/entry_components.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
       </trans-unit>
-      <trans-unit id="63a85808f03b8181e36a952e0fa38202c2304862" datatype="html">
-        <source>other-3rdP-component</source>
-        <target/>
+      <trans-unit id="b0a17f08a4bd742b2acf39780c257c2f519d33ed" datatype="html">
+        <source>other-3rdP-component
+multi-lines</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">node_modules/third_party/other_comp.d.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
       </trans-unit>
     </body>
   </file>
 </xliff>
 `;
 
+const EXPECTED_XLIFF2 = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="8136548302122759730">
+      <notes>
+        <note category="description">desc</note>
+        <note category="meaning">meaning</note>
+        <note category="location">src/basic.ts:1</note>
+      </notes>
+      <segment>
+        <source>translate me</source>
+      </segment>
+    </unit>
+    <unit id="3492007542396725315">
+      <notes>
+        <note category="location">src/basic.ts:5</note>
+        <note category="location">src/entry_components.ts:1</note>
+      </notes>
+      <segment>
+        <source>Welcome</source>
+      </segment>
+    </unit>
+    <unit id="126808141597411718">
+      <notes>
+        <note category="location">node_modules/third_party/other_comp.d.ts:1,2</note>
+      </notes>
+      <segment>
+        <source>other-3rdP-component
+multi-lines</source>
+      </segment>
+    </unit>
+  </file>
+</xliff>
+`;
+
 describe('template i18n extraction output', () => {
   const outDir = '';
   const genDir = 'out';
@@ -81,6 +131,13 @@ describe('template i18n extraction output', () => {
     expect(xlf).toEqual(EXPECTED_XLIFF);
   });
 
+  it('should extract i18n messages as xliff version 2.0', () => {
+    const xlfOutput = path.join(outDir, 'messages.xliff2.xlf');
+    expect(fs.existsSync(xlfOutput)).toBeTruthy();
+    const xlf = fs.readFileSync(xlfOutput, {encoding: 'utf-8'});
+    expect(xlf).toEqual(EXPECTED_XLIFF2);
+  });
+
   it('should not emit js', () => {
     const genOutput = path.join(genDir, '');
     expect(fs.existsSync(genOutput)).toBeFalsy();
diff --git a/packages/compiler-cli/integrationtest/test/jit_summaries_spec.ts b/packages/compiler-cli/integrationtest/test/jit_summaries_spec.ts
new file mode 100644
index 0000000000..2a6547c409
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/jit_summaries_spec.ts
@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {ServerTestingModule, platformServerTesting} from '@angular/platform-server/testing';
+
+import {SomeDep, SomeDirective, SomeModule, SomePipe, SomePrivateComponent, SomeService, expectInstanceCreated} from '../src/jit_summaries';
+import {SomeModuleNgSummary} from '../src/jit_summaries.ngsummary';
+
+describe('Jit Summaries', () => {
+  beforeEach(() => {
+    TestBed.initTestEnvironment(ServerTestingModule, platformServerTesting(), SomeModuleNgSummary);
+  });
+
+  afterEach(() => { TestBed.resetTestEnvironment(); });
+
+  it('should use directive metadata from summaries', () => {
+    @Component({template: '<div someDir></div>'})
+    class TestComp {
+    }
+
+    TestBed.configureTestingModule({providers: [SomeDep], declarations: [TestComp, SomeDirective]})
+        .createComponent(TestComp);
+    expectInstanceCreated(SomeDirective);
+  });
+
+  it('should use pipe metadata from summaries', () => {
+    @Component({template: '{{1 | somePipe}}'})
+    class TestComp {
+    }
+
+    TestBed.configureTestingModule({providers: [SomeDep], declarations: [TestComp, SomePipe]})
+        .createComponent(TestComp);
+    expectInstanceCreated(SomePipe);
+  });
+
+  it('should use Service metadata from summaries', () => {
+    TestBed.configureTestingModule({
+      providers: [SomeService, SomeDep],
+    });
+    TestBed.get(SomeService);
+    expectInstanceCreated(SomeService);
+  });
+
+  it('should use NgModule metadata from summaries', () => {
+    @Component({template: '<div someDir>{{1 | somePipe}}</div>'})
+    class TestComp {
+      constructor(service: SomeService) {}
+    }
+
+    TestBed
+        .configureTestingModule(
+            {providers: [SomeDep], declarations: [TestComp], imports: [SomeModule]})
+        .createComponent(TestComp);
+
+    expectInstanceCreated(SomeModule);
+    expectInstanceCreated(SomeDirective);
+    expectInstanceCreated(SomePipe);
+    expectInstanceCreated(SomeService);
+  });
+
+  it('should allow to create private components from imported NgModule summaries', () => {
+    TestBed.configureTestingModule({providers: [SomeDep], imports: [SomeModule]})
+        .createComponent(SomePrivateComponent);
+    expectInstanceCreated(SomePrivateComponent);
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/test/ng_module_spec.ts b/packages/compiler-cli/integrationtest/test/ng_module_spec.ts
index b5b76ad41a..4e8a2706df 100644
--- a/packages/compiler-cli/integrationtest/test/ng_module_spec.ts
+++ b/packages/compiler-cli/integrationtest/test/ng_module_spec.ts
@@ -59,7 +59,8 @@ describe('NgModule', () => {
       const fixture = createComponent(ComponentUsingThirdParty);
       const thirdPComps = fixture.nativeElement.children;
       expect(thirdPComps[0].children[0].children[0].data).toEqual('3rdP-component');
-      expect(thirdPComps[1].children[0].children[0].data).toEqual('other-3rdP-component');
+      expect(thirdPComps[1].children[0].children[0].data).toEqual(`other-3rdP-component
+multi-lines`);
     });
 
     // https://github.com/angular/angular/issues/12428
diff --git a/packages/compiler-cli/integrationtest/test/test_ngtools_api.ts b/packages/compiler-cli/integrationtest/test/test_ngtools_api.ts
index 360888d820..f1ff609bc2 100644
--- a/packages/compiler-cli/integrationtest/test/test_ngtools_api.ts
+++ b/packages/compiler-cli/integrationtest/test/test_ngtools_api.ts
@@ -15,7 +15,7 @@ import * as path from 'path';
 import * as ts from 'typescript';
 import * as assert from 'assert';
 import {tsc} from '@angular/tsc-wrapped/src/tsc';
-import {NodeCompilerHostContext, __NGTOOLS_PRIVATE_API_2} from '@angular/compiler-cli';
+import {__NGTOOLS_PRIVATE_API_2} from '@angular/compiler-cli';
 
 const glob = require('glob');
 
@@ -29,6 +29,7 @@ function main() {
 
   Promise.resolve()
       .then(() => codeGenTest())
+      .then(() => codeGenTest(true))
       .then(() => i18nTest())
       .then(() => lazyRoutesTest())
       .then(() => {
@@ -42,14 +43,14 @@ function main() {
       });
 }
 
-function codeGenTest() {
+function codeGenTest(forceError = false) {
   const basePath = path.join(__dirname, '../ngtools_src');
+  const srcPath = path.join(__dirname, '../src');
   const project = path.join(basePath, 'tsconfig-build.json');
   const readResources: string[] = [];
   const wroteFiles: string[] = [];
 
   const config = tsc.readConfiguration(project, basePath);
-  const hostContext = new NodeCompilerHostContext();
   const delegateHost = ts.createCompilerHost(config.parsed.options, true);
   const host: ts.CompilerHost = Object.assign(
       {}, delegateHost,
@@ -59,6 +60,9 @@ function codeGenTest() {
   config.ngOptions.basePath = basePath;
 
   console.log(`>>> running codegen for ${project}`);
+  if (forceError) {
+    console.log(`>>> asserting that missingTranslation param with error value throws`);
+  }
   return __NGTOOLS_PRIVATE_API_2
       .codeGen({
         basePath,
@@ -67,13 +71,17 @@ function codeGenTest() {
         angularCompilerOptions: config.ngOptions,
 
         // i18n options.
-        i18nFormat: undefined,
-        i18nFile: undefined,
-        locale: undefined,
+        i18nFormat: 'xlf',
+        i18nFile: path.join(srcPath, 'messages.fi.xlf'),
+        locale: 'fi',
+        missingTranslation: forceError ? 'error' : 'ignore',
 
         readResource: (fileName: string) => {
           readResources.push(fileName);
-          return hostContext.readResource(fileName);
+          if (!host.fileExists(fileName)) {
+            throw new Error(`Compilation failed. Resource file not found: ${fileName}`);
+          }
+          return Promise.resolve(host.readFile(fileName));
         }
       })
       .then(() => {
@@ -101,10 +109,17 @@ function codeGenTest() {
 
         console.log(`done, no errors.`);
       })
-      .catch((e: any) => {
-        console.error(e.stack);
-        console.error('Compilation failed');
-        throw e;
+      .catch((e: Error) => {
+        if (forceError) {
+          assert(
+              e.message.match(`Missing translation for message`),
+              `Expected error message for missing translations`);
+          console.log(`done, error catched`);
+        } else {
+          console.error(e.stack);
+          console.error('Compilation failed');
+          throw e;
+        }
       });
 }
 
@@ -115,7 +130,6 @@ function i18nTest() {
   const wroteFiles: string[] = [];
 
   const config = tsc.readConfiguration(project, basePath);
-  const hostContext = new NodeCompilerHostContext();
   const delegateHost = ts.createCompilerHost(config.parsed.options, true);
   const host: ts.CompilerHost = Object.assign(
       {}, delegateHost,
@@ -135,7 +149,10 @@ function i18nTest() {
         outFile: undefined,
         readResource: (fileName: string) => {
           readResources.push(fileName);
-          return hostContext.readResource(fileName);
+          if (!host.fileExists(fileName)) {
+            throw new Error(`Compilation failed. Resource file not found: ${fileName}`);
+          }
+          return Promise.resolve(host.readFile(fileName));
         },
       })
       .then(() => {
@@ -165,7 +182,7 @@ function i18nTest() {
 
         console.log(`done, no errors.`);
       })
-      .catch((e: any) => {
+      .catch((e: Error) => {
         console.error(e.stack);
         console.error('Extraction failed');
         throw e;
diff --git a/packages/compiler-cli/integrationtest/test/util.ts b/packages/compiler-cli/integrationtest/test/util.ts
index 3388ec1064..0fe1ae64d1 100644
--- a/packages/compiler-cli/integrationtest/test/util.ts
+++ b/packages/compiler-cli/integrationtest/test/util.ts
@@ -8,14 +8,14 @@
 
 import {NgModuleRef} from '@angular/core';
 import {ComponentFixture} from '@angular/core/testing';
-import {platformServer} from '@angular/platform-server';
+import {platformServerTesting} from '@angular/platform-server/testing';
 
 import {MainModule} from '../src/module';
 import {MainModuleNgFactory} from '../src/module.ngfactory';
 
 let mainModuleRef: NgModuleRef<MainModule> = null !;
 beforeEach((done) => {
-  platformServer().bootstrapModuleFactory(MainModuleNgFactory).then((moduleRef: any) => {
+  platformServerTesting().bootstrapModuleFactory(MainModuleNgFactory).then((moduleRef: any) => {
     mainModuleRef = moduleRef;
     done();
   });
diff --git a/packages/compiler-cli/integrationtest/test/util_alt.ts b/packages/compiler-cli/integrationtest/test/util_alt.ts
new file mode 100644
index 0000000000..972dc03ac9
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/test/util_alt.ts
@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModuleRef} from '@angular/core';
+import {ComponentFixture} from '@angular/core/testing';
+import {platformServerTesting} from '@angular/platform-server/testing';
+
+import {MainModuleNgFactory} from '../alt/src/module.ngfactory';
+import {MainModule} from '../src/module';
+
+let mainModuleRef: NgModuleRef<MainModule> = null !;
+beforeEach((done) => {
+  platformServerTesting().bootstrapModuleFactory(MainModuleNgFactory).then((moduleRef: any) => {
+    mainModuleRef = moduleRef;
+    done();
+  });
+});
+
+export function createModule(): NgModuleRef<MainModule> {
+  return mainModuleRef;
+}
+
+export function createComponentAlt<C>(comp: {new (...args: any[]): C}): ComponentFixture<C> {
+  const moduleRef = createModule();
+  const compRef =
+      moduleRef.componentFactoryResolver.resolveComponentFactory(comp).create(moduleRef.injector);
+  return new ComponentFixture(compRef, null, false);
+}
diff --git a/packages/compiler-cli/integrationtest/third_party_src/other_comp.ts b/packages/compiler-cli/integrationtest/third_party_src/other_comp.ts
index 553e08ba45..130baabd8f 100644
--- a/packages/compiler-cli/integrationtest/third_party_src/other_comp.ts
+++ b/packages/compiler-cli/integrationtest/third_party_src/other_comp.ts
@@ -10,7 +10,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'another-third-party-comp',
-  template: '<div i18n>other-3rdP-component</div>',
+  template: `<div i18n>other-3rdP-component
+multi-lines</div>`,
 })
 export class AnotherThirdpartyComponent {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/integrationtest/third_party_src/tsconfig-build.json b/packages/compiler-cli/integrationtest/third_party_src/tsconfig-build.json
index 3544d7c598..d9f9f536c3 100644
--- a/packages/compiler-cli/integrationtest/third_party_src/tsconfig-build.json
+++ b/packages/compiler-cli/integrationtest/third_party_src/tsconfig-build.json
@@ -2,8 +2,7 @@
   "angularCompilerOptions": {
     // For TypeScript 1.8, we have to lay out generated files
     // in the same source directory with your code.
-    "genDir": ".",
-    "debug": true
+    "skipTemplateCodegen": true
   },
 
   "compilerOptions": {
diff --git a/packages/compiler-cli/integrationtest/tsconfig-build-alt.json b/packages/compiler-cli/integrationtest/tsconfig-build-alt.json
new file mode 100644
index 0000000000..2a1553a619
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/tsconfig-build-alt.json
@@ -0,0 +1,32 @@
+{
+  "angularCompilerOptions": {
+    // For TypeScript 1.8, we have to lay out generated files
+    // in the same source directory with your code.
+    "genDir": "./alt",
+    "debug": true,
+    "enableSummariesForJit": true,
+    "alwaysCompileGeneratedCode": true
+  },
+
+  "compilerOptions": {
+    "target": "es5",
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "rootDir": "",
+    "declaration": true,
+    "lib": ["es6", "dom"],
+    "baseUrl": ".",
+    // Prevent scanning up the directory tree for types
+    "typeRoots": ["node_modules/@types"],
+    "noUnusedLocals": true,
+    "sourceMap": true
+  },
+
+  "files": [
+    "src/module",
+    "alt/src/bootstrap"
+  ]
+}
diff --git a/packages/compiler-cli/integrationtest/tsconfig-build.json b/packages/compiler-cli/integrationtest/tsconfig-build.json
index 9250ea6cc8..2928fa0a65 100644
--- a/packages/compiler-cli/integrationtest/tsconfig-build.json
+++ b/packages/compiler-cli/integrationtest/tsconfig-build.json
@@ -3,7 +3,9 @@
     // For TypeScript 1.8, we have to lay out generated files
     // in the same source directory with your code.
     "genDir": ".",
-    "debug": true
+    "debug": true,
+    "enableSummariesForJit": true,
+    "alwaysCompileGeneratedCode": true
   },
 
   "compilerOptions": {
diff --git a/packages/compiler-cli/integrationtest/tsconfig-ngc-build.json b/packages/compiler-cli/integrationtest/tsconfig-ngc-build.json
new file mode 100644
index 0000000000..b3f0e8d88a
--- /dev/null
+++ b/packages/compiler-cli/integrationtest/tsconfig-ngc-build.json
@@ -0,0 +1,38 @@
+{
+  "angularCompilerOptions": {
+    // For TypeScript 1.8, we have to lay out generated files
+    // in the same source directory with your code.
+    "genDir": ".",
+    "debug": true,
+    "enableSummariesForJit": true,
+    "alwaysCompileGeneratedCode": true
+  },
+
+  "compilerOptions": {
+    "target": "es5",
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "rootDir": "",
+    "declaration": true,
+    "lib": ["es6", "dom"],
+    "baseUrl": ".",
+    // Prevent scanning up the directory tree for types
+    "typeRoots": ["node_modules/@types"],
+    "noUnusedLocals": true,
+    "sourceMap": true
+  },
+
+  "files": [
+    "src/module",
+    "src/bootstrap",
+    "test/all_spec",
+    "test/test_ngtools_api",
+    "benchmarks/src/tree/ng2/index_aot.ts",
+    "benchmarks/src/tree/ng2_switch/index_aot.ts",
+    "benchmarks/src/largetable/ng2/index_aot.ts",
+    "benchmarks/src/largetable/ng2_switch/index_aot.ts"
+  ]
+}
diff --git a/packages/compiler-cli/package.json b/packages/compiler-cli/package.json
index 20e7968234..ef72109112 100644
--- a/packages/compiler-cli/package.json
+++ b/packages/compiler-cli/package.json
@@ -9,7 +9,7 @@
     "ng-xi18n": "./src/extract_i18n.js"
   },
   "dependencies": {
-    "@angular/tsc-wrapped": "4.1.0-beta.0",
+    "@angular/tsc-wrapped": "5.0.0-beta.1",
     "reflect-metadata": "^0.1.2",
     "minimist": "^1.2.0"
   },
diff --git a/packages/compiler-cli/src/codegen.ts b/packages/compiler-cli/src/codegen.ts
index 7b37f98d2f..cf8ea0a07e 100644
--- a/packages/compiler-cli/src/codegen.ts
+++ b/packages/compiler-cli/src/codegen.ts
@@ -11,9 +11,9 @@
  * Intended to be used in a build step.
  */
 import * as compiler from '@angular/compiler';
+import {MissingTranslationStrategy} from '@angular/core';
 import {AngularCompilerOptions, NgcCliOptions} from '@angular/tsc-wrapped';
 import {readFileSync} from 'fs';
-import * as path from 'path';
 import * as ts from 'typescript';
 
 import {CompilerHost, CompilerHostContext, ModuleResolutionHostAdapter} from './compiler_host';
@@ -24,7 +24,7 @@ const GENERATED_META_FILES = /\.json$/;
 const PREAMBLE = `/**
  * @fileoverview This file is generated by the Angular template compiler.
  * Do not edit.
- * @suppress {suspiciousCode,uselessCode,missingProperties}
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride}
  */
  /* tslint:disable */
 
@@ -36,19 +36,28 @@ export class CodeGenerator {
       public host: ts.CompilerHost, private compiler: compiler.AotCompiler,
       private ngCompilerHost: CompilerHost) {}
 
-  codegen(): Promise<any> {
+  codegen(): Promise<string[]> {
     return this.compiler
-        .compileAll(this.program.getSourceFiles().map(
+        .analyzeModulesAsync(this.program.getSourceFiles().map(
             sf => this.ngCompilerHost.getCanonicalFileName(sf.fileName)))
-        .then(generatedModules => {
-          generatedModules.forEach(generatedModule => {
-            const sourceFile = this.program.getSourceFile(generatedModule.srcFileUrl);
-            const emitPath = this.ngCompilerHost.calculateEmitPath(generatedModule.genFileUrl);
-            const source = GENERATED_META_FILES.test(emitPath) ? generatedModule.source :
-                                                                 generatedModule.source;
-            this.host.writeFile(emitPath, source, false, () => {}, [sourceFile]);
-          });
-        });
+        .then(analyzedModules => this.emit(analyzedModules));
+  }
+
+  codegenSync(): string[] {
+    const analyzed = this.compiler.analyzeModulesSync(this.program.getSourceFiles().map(
+        sf => this.ngCompilerHost.getCanonicalFileName(sf.fileName)));
+    return this.emit(analyzed);
+  }
+
+  private emit(analyzedModules: compiler.NgAnalyzedModules) {
+    const generatedModules = this.compiler.emitAllImpls(analyzedModules);
+    return generatedModules.map(generatedModule => {
+      const sourceFile = this.program.getSourceFile(generatedModule.srcFileUrl);
+      const emitPath = this.ngCompilerHost.calculateEmitPath(generatedModule.genFileUrl);
+      const source = generatedModule.source || compiler.toTypeScript(generatedModule, PREAMBLE);
+      this.host.writeFile(emitPath, source, false, () => {}, [sourceFile]);
+      return emitPath;
+    });
   }
 
   static create(
@@ -61,22 +70,40 @@ export class CodeGenerator {
       ngCompilerHost = usePathMapping ? new PathMappedCompilerHost(program, options, context) :
                                         new CompilerHost(program, options, context);
     }
-    const transFile = cliOptions.i18nFile;
-    const locale = cliOptions.locale;
     let transContent: string = '';
-    if (transFile) {
-      if (!locale) {
+    if (cliOptions.i18nFile) {
+      if (!cliOptions.locale) {
         throw new Error(
-            `The translation file (${transFile}) locale must be provided. Use the --locale option.`);
+            `The translation file (${cliOptions.i18nFile}) locale must be provided. Use the --locale option.`);
       }
-      transContent = readFileSync(transFile, 'utf8');
+      transContent = readFileSync(cliOptions.i18nFile, 'utf8');
+    }
+    let missingTranslation = MissingTranslationStrategy.Warning;
+    if (cliOptions.missingTranslation) {
+      switch (cliOptions.missingTranslation) {
+        case 'error':
+          missingTranslation = MissingTranslationStrategy.Error;
+          break;
+        case 'warning':
+          missingTranslation = MissingTranslationStrategy.Warning;
+          break;
+        case 'ignore':
+          missingTranslation = MissingTranslationStrategy.Ignore;
+          break;
+        default:
+          throw new Error(
+              `Unknown option for missingTranslation (${cliOptions.missingTranslation}). Use either error, warning or ignore.`);
+      }
+    }
+    if (!transContent) {
+      missingTranslation = MissingTranslationStrategy.Ignore
     }
     const {compiler: aotCompiler} = compiler.createAotCompiler(ngCompilerHost, {
       translations: transContent,
-      i18nFormat: cliOptions.i18nFormat,
-      locale: cliOptions.locale,
+      i18nFormat: cliOptions.i18nFormat || undefined,
+      locale: cliOptions.locale || undefined, missingTranslation,
       enableLegacyTemplate: options.enableLegacyTemplate !== false,
-      genFilePreamble: PREAMBLE,
+      enableSummariesForJit: options.enableSummariesForJit !== false,
     });
     return new CodeGenerator(options, program, tsCompilerHost, aotCompiler, ngCompilerHost);
   }
diff --git a/packages/compiler-cli/src/compiler_host.ts b/packages/compiler-cli/src/compiler_host.ts
index 79f6ae535a..04d5083770 100644
--- a/packages/compiler-cli/src/compiler_host.ts
+++ b/packages/compiler-cli/src/compiler_host.ts
@@ -15,13 +15,13 @@ import * as ts from 'typescript';
 const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
 const DTS = /\.d\.ts$/;
 const NODE_MODULES = '/node_modules/';
-const IS_GENERATED = /\.(ngfactory|ngstyle)$/;
-const GENERATED_FILES = /\.ngfactory\.ts$|\.ngstyle\.ts$/;
-const GENERATED_OR_DTS_FILES = /\.d\.ts$|\.ngfactory\.ts$|\.ngstyle\.ts$/;
+const IS_GENERATED = /\.(ngfactory|ngstyle|ngsummary)$/;
+const GENERATED_FILES = /\.ngfactory\.ts$|\.ngstyle\.ts$|\.ngsummary\.ts$/;
+const GENERATED_OR_DTS_FILES = /\.d\.ts$|\.ngfactory\.ts$|\.ngstyle\.ts$|\.ngsummary\.ts$/;
 const SHALLOW_IMPORT = /^((\w|-)+|(@(\w|-)+(\/(\w|-)+)+))$/;
 
 export interface CompilerHostContext extends ts.ModuleResolutionHost {
-  readResource(fileName: string): Promise<string>;
+  readResource?(fileName: string): Promise<string>|string;
   assumeFileExists(fileName: string): void;
 }
 
@@ -31,8 +31,9 @@ export class CompilerHost implements AotCompilerHost {
   protected basePath: string;
   private genDir: string;
   private resolverCache = new Map<string, ModuleMetadata[]>();
-  private bundleIndexCache = new Map<string, boolean>();
-  private bundleIndexNames = new Set<string>();
+  private flatModuleIndexCache = new Map<string, boolean>();
+  private flatModuleIndexNames = new Set<string>();
+  private flatModuleIndexRedirectNames = new Set<string>();
   private moduleFileNames = new Map<string, string|null>();
   protected resolveModuleNameHost: CompilerHostContext;
 
@@ -40,8 +41,8 @@ export class CompilerHost implements AotCompilerHost {
       protected program: ts.Program, protected options: AngularCompilerOptions,
       protected context: CompilerHostContext, collectorOptions?: CollectorOptions) {
     // normalize the path so that it never ends with '/'.
-    this.basePath = path.normalize(path.join(this.options.basePath, '.')).replace(/\\/g, '/');
-    this.genDir = path.normalize(path.join(this.options.genDir, '.')).replace(/\\/g, '/');
+    this.basePath = path.normalize(path.join(this.options.basePath !, '.')).replace(/\\/g, '/');
+    this.genDir = path.normalize(path.join(this.options.genDir !, '.')).replace(/\\/g, '/');
 
     const genPath: string = path.relative(this.basePath, this.genDir);
     this.isGenDirChildOfRootDir = genPath === '' || !genPath.startsWith('..');
@@ -109,7 +110,7 @@ export class CompilerHost implements AotCompilerHost {
   fileNameToModuleName(importedFile: string, containingFile: string): string {
     // If a file does not yet exist (because we compile it later), we still need to
     // assume it exists it so that the `resolve` method works!
-    if (!this.context.fileExists(importedFile)) {
+    if (importedFile !== containingFile && !this.context.fileExists(importedFile)) {
       this.context.assumeFileExists(importedFile);
     }
 
@@ -186,10 +187,11 @@ export class CompilerHost implements AotCompilerHost {
   getMetadataFor(filePath: string): ModuleMetadata[]|undefined {
     if (!this.context.fileExists(filePath)) {
       // If the file doesn't exists then we cannot return metadata for the file.
-      // This will occur if the user refernced a declared module for which no file
+      // This will occur if the user referenced a declared module for which no file
       // exists for the module (i.e. jQuery or angularjs).
       return;
     }
+
     if (DTS.test(filePath)) {
       const metadataPath = filePath.replace(DTS, '.metadata.json');
       if (this.context.fileExists(metadataPath)) {
@@ -201,11 +203,11 @@ export class CompilerHost implements AotCompilerHost {
         return [this.upgradeVersion1Metadata(
             {'__symbolic': 'module', 'version': 1, 'metadata': {}}, filePath)];
       }
-    } else {
-      const sf = this.getSourceFile(filePath);
-      const metadata = this.metadataCollector.getMetadata(sf);
-      return metadata ? [metadata] : [];
     }
+
+    const sf = this.getSourceFile(filePath);
+    const metadata = this.metadataCollector.getMetadata(sf);
+    return metadata ? [metadata] : [];
   }
 
   readMetadata(filePath: string, dtsFilePath: string): ModuleMetadata[] {
@@ -257,7 +259,10 @@ export class CompilerHost implements AotCompilerHost {
     return v3Metadata;
   }
 
-  loadResource(filePath: string): Promise<string> { return this.context.readResource(filePath); }
+  loadResource(filePath: string): Promise<string>|string {
+    if (this.context.readResource) return this.context.readResource(filePath);
+    return this.context.readFile(filePath);
+  }
 
   loadSummary(filePath: string): string|null {
     if (this.context.fileExists(filePath)) {
@@ -280,7 +285,8 @@ export class CompilerHost implements AotCompilerHost {
       // Check for a bundle index.
       if (this.hasBundleIndex(filePath)) {
         const normalFilePath = path.normalize(filePath);
-        return this.bundleIndexNames.has(normalFilePath);
+        return this.flatModuleIndexNames.has(normalFilePath) ||
+            this.flatModuleIndexRedirectNames.has(normalFilePath);
       }
     }
     return true;
@@ -306,12 +312,12 @@ export class CompilerHost implements AotCompilerHost {
       relativePath = relativePath.substr(3);
     }
 
-    return path.join(this.options.genDir, relativePath);
+    return path.join(this.options.genDir !, relativePath);
   }
 
   private hasBundleIndex(filePath: string): boolean {
     const checkBundleIndex = (directory: string): boolean => {
-      let result = this.bundleIndexCache.get(directory);
+      let result = this.flatModuleIndexCache.get(directory);
       if (result == null) {
         if (path.basename(directory) == 'node_module') {
           // Don't look outside the node_modules this package is installed in.
@@ -331,8 +337,14 @@ export class CompilerHost implements AotCompilerHost {
                   const metadataFile = typings.replace(DTS, '.metadata.json');
                   if (this.context.fileExists(metadataFile)) {
                     const metadata = JSON.parse(this.context.readFile(metadataFile));
-                    if (metadata.importAs) {
-                      this.bundleIndexNames.add(typings);
+                    if (metadata.flatModuleIndexRedirect) {
+                      this.flatModuleIndexRedirectNames.add(typings);
+                      // Note: don't set result = true,
+                      // as this would mark this folder
+                      // as having a bundleIndex too early without
+                      // filling the bundleIndexNames.
+                    } else if (metadata.importAs) {
+                      this.flatModuleIndexNames.add(typings);
                       result = true;
                     }
                   }
@@ -352,7 +364,7 @@ export class CompilerHost implements AotCompilerHost {
             result = false;
           }
         }
-        this.bundleIndexCache.set(directory, result);
+        this.flatModuleIndexCache.set(directory, result);
       }
       return result;
     };
diff --git a/packages/compiler-cli/src/diagnostics/check_types.ts b/packages/compiler-cli/src/diagnostics/check_types.ts
new file mode 100644
index 0000000000..3a2030043d
--- /dev/null
+++ b/packages/compiler-cli/src/diagnostics/check_types.ts
@@ -0,0 +1,230 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {AotCompiler, AotCompilerHost, AotCompilerOptions, EmitterVisitorContext, GeneratedFile, NgAnalyzedModules, ParseSourceSpan, Statement, StaticReflector, TypeScriptEmitter, createAotCompiler} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {Diagnostic, DiagnosticCategory} from '../transformers/api';
+
+interface FactoryInfo {
+  source: ts.SourceFile;
+  context: EmitterVisitorContext;
+}
+
+type FactoryInfoMap = Map<string, FactoryInfo>;
+
+const stubCancellationToken: ts.CancellationToken = {
+  isCancellationRequested(): boolean{return false;},
+  throwIfCancellationRequested(): void{}
+};
+
+export class TypeChecker {
+  private _aotCompiler: AotCompiler|undefined;
+  private _reflector: StaticReflector|undefined;
+  private _factories: Map<string, FactoryInfo>|undefined;
+  private _factoryNames: string[]|undefined;
+  private _diagnosticProgram: ts.Program|undefined;
+  private _diagnosticsByFile: Map<string, Diagnostic[]>|undefined;
+  private _currentCancellationToken: ts.CancellationToken = stubCancellationToken;
+  private _partial: boolean = false;
+
+  constructor(
+      private program: ts.Program, private tsOptions: ts.CompilerOptions,
+      private compilerHost: ts.CompilerHost, private aotCompilerHost: AotCompilerHost,
+      private aotOptions: AotCompilerOptions, private _analyzedModules?: NgAnalyzedModules,
+      private _generatedFiles?: GeneratedFile[]) {}
+
+  getDiagnostics(fileName?: string, cancellationToken?: ts.CancellationToken): Diagnostic[] {
+    this._currentCancellationToken = cancellationToken || stubCancellationToken;
+    try {
+      return fileName ?
+          this.diagnosticsByFileName.get(fileName) || [] :
+          ([] as Diagnostic[]).concat(...Array.from(this.diagnosticsByFileName.values()));
+    } finally {
+      this._currentCancellationToken = stubCancellationToken;
+    }
+  }
+
+  get partialResults(): boolean { return this._partial; }
+
+  private get analyzedModules(): NgAnalyzedModules {
+    return this._analyzedModules || (this._analyzedModules = this.aotCompiler.analyzeModulesSync(
+                                         this.program.getSourceFiles().map(sf => sf.fileName)));
+  }
+
+  private get diagnosticsByFileName(): Map<string, Diagnostic[]> {
+    return this._diagnosticsByFile || this.createDiagnosticsByFile();
+  }
+
+  private get diagnosticProgram(): ts.Program {
+    return this._diagnosticProgram || this.createDiagnosticProgram();
+  }
+
+  private get generatedFiles(): GeneratedFile[] {
+    let result = this._generatedFiles;
+    if (!result) {
+      this._generatedFiles = result = this.aotCompiler.emitAllImpls(this.analyzedModules);
+    }
+    return result;
+  }
+
+  private get aotCompiler(): AotCompiler {
+    return this._aotCompiler || this.createCompilerAndReflector();
+  }
+
+  private get reflector(): StaticReflector {
+    let result = this._reflector;
+    if (!result) {
+      this.createCompilerAndReflector();
+      result = this._reflector !;
+    }
+    return result;
+  }
+
+  private get factories(): Map<string, FactoryInfo> {
+    return this._factories || this.createFactories();
+  }
+
+  private get factoryNames(): string[] {
+    return this._factoryNames || (this.createFactories() && this._factoryNames !);
+  }
+
+  private createCompilerAndReflector() {
+    const {compiler, reflector} = createAotCompiler(this.aotCompilerHost, this.aotOptions);
+    this._reflector = reflector;
+    return this._aotCompiler = compiler;
+  }
+
+  private createDiagnosticProgram() {
+    // Create a program that is all the files from the original program plus the factories.
+    const existingFiles = this.program.getSourceFiles().map(source => source.fileName);
+    const host = new TypeCheckingHost(this.compilerHost, this.program, this.factories);
+    return this._diagnosticProgram =
+               ts.createProgram([...existingFiles, ...this.factoryNames], this.tsOptions, host);
+  }
+
+  private createFactories() {
+    // Create all the factory files with enough information to map the diagnostics reported for the
+    // created file back to the original source.
+    const emitter = new TypeScriptEmitter();
+    const factorySources =
+        this.generatedFiles.filter(file => file.stmts != null && file.stmts.length)
+            .map<[string, FactoryInfo]>(
+                file => [file.genFileUrl, createFactoryInfo(emitter, file)]);
+    this._factories = new Map(factorySources);
+    this._factoryNames = Array.from(this._factories.keys());
+    return this._factories;
+  }
+
+  private createDiagnosticsByFile() {
+    // Collect all the diagnostics binned by original source file name.
+    const result = new Map<string, Diagnostic[]>();
+    const diagnosticsFor = (fileName: string) => {
+      let r = result.get(fileName);
+      if (!r) {
+        r = [];
+        result.set(fileName, r);
+      }
+      return r;
+    };
+    const program = this.diagnosticProgram;
+    for (const factoryName of this.factoryNames) {
+      if (this._currentCancellationToken.isCancellationRequested()) return result;
+      const sourceFile = program.getSourceFile(factoryName);
+      for (const diagnostic of this.diagnosticProgram.getSemanticDiagnostics(sourceFile)) {
+        const span = this.sourceSpanOf(diagnostic.file, diagnostic.start, diagnostic.length);
+        if (span) {
+          const fileName = span.start.file.url;
+          const diagnosticsList = diagnosticsFor(fileName);
+          diagnosticsList.push({
+            message: diagnosticMessageToString(diagnostic.messageText),
+            category: diagnosticCategoryConverter(diagnostic.category), span
+          });
+        }
+      }
+    }
+    return result;
+  }
+
+  private sourceSpanOf(source: ts.SourceFile, start: number, length: number): ParseSourceSpan|null {
+    // Find the corresponding TypeScript node
+    const info = this.factories.get(source.fileName);
+    if (info) {
+      const {line, character} = ts.getLineAndCharacterOfPosition(source, start);
+      return info.context.spanOf(line, character);
+    }
+    return null;
+  }
+}
+
+function diagnosticMessageToString(message: ts.DiagnosticMessageChain | string): string {
+  return ts.flattenDiagnosticMessageText(message, '\n');
+}
+
+function diagnosticCategoryConverter(kind: ts.DiagnosticCategory) {
+  // The diagnostics kind matches ts.DiagnosticCategory. Review this code if this changes.
+  return kind as any as DiagnosticCategory;
+}
+
+function createFactoryInfo(emitter: TypeScriptEmitter, file: GeneratedFile): FactoryInfo {
+  const {sourceText, context} =
+      emitter.emitStatementsAndContext(file.srcFileUrl, file.genFileUrl, file.stmts !);
+  const source = ts.createSourceFile(
+      file.genFileUrl, sourceText, ts.ScriptTarget.Latest, /* setParentNodes */ true);
+  return {source, context};
+}
+
+class TypeCheckingHost implements ts.CompilerHost {
+  constructor(
+      private host: ts.CompilerHost, private originalProgram: ts.Program,
+      private factories: Map<string, FactoryInfo>) {}
+
+  getSourceFile(
+      fileName: string, languageVersion: ts.ScriptTarget,
+      onError?: ((message: string) => void)): ts.SourceFile {
+    const originalSource = this.originalProgram.getSourceFile(fileName);
+    if (originalSource) {
+      return originalSource;
+    }
+    const factoryInfo = this.factories.get(fileName);
+    if (factoryInfo) {
+      return factoryInfo.source;
+    }
+    return this.host.getSourceFile(fileName, languageVersion, onError);
+  }
+
+  getDefaultLibFileName(options: ts.CompilerOptions): string {
+    return this.host.getDefaultLibFileName(options);
+  }
+
+  writeFile: ts.WriteFileCallback =
+      () => { throw new Error('Unexpected write in diagnostic program'); }
+
+  getCurrentDirectory(): string {
+    return this.host.getCurrentDirectory();
+  }
+
+  getDirectories(path: string): string[] { return this.host.getDirectories(path); }
+
+  getCanonicalFileName(fileName: string): string {
+    return this.host.getCanonicalFileName(fileName);
+  }
+
+  useCaseSensitiveFileNames(): boolean { return this.host.useCaseSensitiveFileNames(); }
+
+  getNewLine(): string { return this.host.getNewLine(); }
+
+  fileExists(fileName: string): boolean {
+    return this.factories.has(fileName) || this.host.fileExists(fileName);
+  }
+
+  readFile(fileName: string): string {
+    const factoryInfo = this.factories.get(fileName);
+    return (factoryInfo && factoryInfo.source.text) || this.host.readFile(fileName);
+  }
+}
diff --git a/packages/compiler-cli/src/diagnostics/expression_diagnostics.ts b/packages/compiler-cli/src/diagnostics/expression_diagnostics.ts
new file mode 100644
index 0000000000..3a60d67709
--- /dev/null
+++ b/packages/compiler-cli/src/diagnostics/expression_diagnostics.ts
@@ -0,0 +1,325 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {AST, AstPath, Attribute, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, CompileDirectiveSummary, CompileTypeMetadata, DirectiveAst, ElementAst, EmbeddedTemplateAst, Node, ParseSourceSpan, RecursiveTemplateAstVisitor, ReferenceAst, TemplateAst, TemplateAstPath, VariableAst, findNode, identifierName, templateVisitAll, tokenReference} from '@angular/compiler';
+
+import {AstType, DiagnosticKind, ExpressionDiagnosticsContext, TypeDiagnostic} from './expression_type';
+import {BuiltinType, Definition, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable} from './symbols';
+
+export interface DiagnosticTemplateInfo {
+  fileName?: string;
+  offset: number;
+  query: SymbolQuery;
+  members: SymbolTable;
+  htmlAst: Node[];
+  templateAst: TemplateAst[];
+}
+
+export interface ExpressionDiagnostic {
+  message: string;
+  span: Span;
+  kind: DiagnosticKind;
+}
+
+export function getTemplateExpressionDiagnostics(info: DiagnosticTemplateInfo):
+    ExpressionDiagnostic[] {
+  const visitor = new ExpressionDiagnosticsVisitor(
+      info, (path: TemplateAstPath, includeEvent: boolean) =>
+                getExpressionScope(info, path, includeEvent));
+  templateVisitAll(visitor, info.templateAst);
+  return visitor.diagnostics;
+}
+
+export function getExpressionDiagnostics(
+    scope: SymbolTable, ast: AST, query: SymbolQuery,
+    context: ExpressionDiagnosticsContext = {}): TypeDiagnostic[] {
+  const analyzer = new AstType(scope, query, context);
+  analyzer.getDiagnostics(ast);
+  return analyzer.diagnostics;
+}
+
+function getReferences(info: DiagnosticTemplateInfo): SymbolDeclaration[] {
+  const result: SymbolDeclaration[] = [];
+
+  function processReferences(references: ReferenceAst[]) {
+    for (const reference of references) {
+      let type: Symbol|undefined = undefined;
+      if (reference.value) {
+        type = info.query.getTypeSymbol(tokenReference(reference.value));
+      }
+      result.push({
+        name: reference.name,
+        kind: 'reference',
+        type: type || info.query.getBuiltinType(BuiltinType.Any),
+        get definition() { return getDefintionOf(info, reference); }
+      });
+    }
+  }
+
+  const visitor = new class extends RecursiveTemplateAstVisitor {
+    visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
+      super.visitEmbeddedTemplate(ast, context);
+      processReferences(ast.references);
+    }
+    visitElement(ast: ElementAst, context: any): any {
+      super.visitElement(ast, context);
+      processReferences(ast.references);
+    }
+  };
+
+  templateVisitAll(visitor, info.templateAst);
+
+  return result;
+}
+
+function getDefintionOf(info: DiagnosticTemplateInfo, ast: TemplateAst): Definition|undefined {
+  if (info.fileName) {
+    const templateOffset = info.offset;
+    return [{
+      fileName: info.fileName,
+      span: {
+        start: ast.sourceSpan.start.offset + templateOffset,
+        end: ast.sourceSpan.end.offset + templateOffset
+      }
+    }];
+  }
+}
+
+function getVarDeclarations(
+    info: DiagnosticTemplateInfo, path: TemplateAstPath): SymbolDeclaration[] {
+  const result: SymbolDeclaration[] = [];
+
+  let current = path.tail;
+  while (current) {
+    if (current instanceof EmbeddedTemplateAst) {
+      for (const variable of current.variables) {
+        const name = variable.name;
+
+        // Find the first directive with a context.
+        const context =
+            current.directives.map(d => info.query.getTemplateContext(d.directive.type.reference))
+                .find(c => !!c);
+
+        // Determine the type of the context field referenced by variable.value.
+        let type: Symbol|undefined = undefined;
+        if (context) {
+          const value = context.get(variable.value);
+          if (value) {
+            type = value.type !;
+            let kind = info.query.getTypeKind(type);
+            if (kind === BuiltinType.Any || kind == BuiltinType.Unbound) {
+              // The any type is not very useful here. For special cases, such as ngFor, we can do
+              // better.
+              type = refinedVariableType(type, info, current);
+            }
+          }
+        }
+        if (!type) {
+          type = info.query.getBuiltinType(BuiltinType.Any);
+        }
+        result.push({
+          name,
+          kind: 'variable', type, get definition() { return getDefintionOf(info, variable); }
+        });
+      }
+    }
+    current = path.parentOf(current);
+  }
+
+  return result;
+}
+
+function refinedVariableType(
+    type: Symbol, info: DiagnosticTemplateInfo, templateElement: EmbeddedTemplateAst): Symbol {
+  // Special case the ngFor directive
+  const ngForDirective = templateElement.directives.find(d => {
+    const name = identifierName(d.directive.type);
+    return name == 'NgFor' || name == 'NgForOf';
+  });
+  if (ngForDirective) {
+    const ngForOfBinding = ngForDirective.inputs.find(i => i.directiveName == 'ngForOf');
+    if (ngForOfBinding) {
+      const bindingType = new AstType(info.members, info.query, {}).getType(ngForOfBinding.value);
+      if (bindingType) {
+        const result = info.query.getElementType(bindingType);
+        if (result) {
+          return result;
+        }
+      }
+    }
+  }
+
+  // We can't do better, return any
+  return info.query.getBuiltinType(BuiltinType.Any);
+}
+
+function getEventDeclaration(info: DiagnosticTemplateInfo, includeEvent?: boolean) {
+  let result: SymbolDeclaration[] = [];
+  if (includeEvent) {
+    // TODO: Determine the type of the event parameter based on the Observable<T> or EventEmitter<T>
+    // of the event.
+    result = [{name: '$event', kind: 'variable', type: info.query.getBuiltinType(BuiltinType.Any)}];
+  }
+  return result;
+}
+
+export function getExpressionScope(
+    info: DiagnosticTemplateInfo, path: TemplateAstPath, includeEvent: boolean): SymbolTable {
+  let result = info.members;
+  const references = getReferences(info);
+  const variables = getVarDeclarations(info, path);
+  const events = getEventDeclaration(info, includeEvent);
+  if (references.length || variables.length || events.length) {
+    const referenceTable = info.query.createSymbolTable(references);
+    const variableTable = info.query.createSymbolTable(variables);
+    const eventsTable = info.query.createSymbolTable(events);
+    result = info.query.mergeSymbolTable([result, referenceTable, variableTable, eventsTable]);
+  }
+  return result;
+}
+
+class ExpressionDiagnosticsVisitor extends RecursiveTemplateAstVisitor {
+  private path: TemplateAstPath;
+  private directiveSummary: CompileDirectiveSummary;
+
+  diagnostics: ExpressionDiagnostic[] = [];
+
+  constructor(
+      private info: DiagnosticTemplateInfo,
+      private getExpressionScope: (path: TemplateAstPath, includeEvent: boolean) => SymbolTable) {
+    super();
+    this.path = new AstPath<TemplateAst>([]);
+  }
+
+  visitDirective(ast: DirectiveAst, context: any): any {
+    // Override the default child visitor to ignore the host properties of a directive.
+    if (ast.inputs && ast.inputs.length) {
+      templateVisitAll(this, ast.inputs, context);
+    }
+  }
+
+  visitBoundText(ast: BoundTextAst): void {
+    this.push(ast);
+    this.diagnoseExpression(ast.value, ast.sourceSpan.start.offset, false);
+    this.pop();
+  }
+
+  visitDirectiveProperty(ast: BoundDirectivePropertyAst): void {
+    this.push(ast);
+    this.diagnoseExpression(ast.value, this.attributeValueLocation(ast), false);
+    this.pop();
+  }
+
+  visitElementProperty(ast: BoundElementPropertyAst): void {
+    this.push(ast);
+    this.diagnoseExpression(ast.value, this.attributeValueLocation(ast), false);
+    this.pop();
+  }
+
+  visitEvent(ast: BoundEventAst): void {
+    this.push(ast);
+    this.diagnoseExpression(ast.handler, this.attributeValueLocation(ast), true);
+    this.pop();
+  }
+
+  visitVariable(ast: VariableAst): void {
+    const directive = this.directiveSummary;
+    if (directive && ast.value) {
+      const context = this.info.query.getTemplateContext(directive.type.reference) !;
+      if (context && !context.has(ast.value)) {
+        if (ast.value === '$implicit') {
+          this.reportError(
+              'The template context does not have an implicit value', spanOf(ast.sourceSpan));
+        } else {
+          this.reportError(
+              `The template context does not defined a member called '${ast.value}'`,
+              spanOf(ast.sourceSpan));
+        }
+      }
+    }
+  }
+
+  visitElement(ast: ElementAst, context: any): void {
+    this.push(ast);
+    super.visitElement(ast, context);
+    this.pop();
+  }
+
+  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
+    const previousDirectiveSummary = this.directiveSummary;
+
+    this.push(ast);
+
+    // Find directive that refernces this template
+    this.directiveSummary =
+        ast.directives.map(d => d.directive).find(d => hasTemplateReference(d.type)) !;
+
+    // Process children
+    super.visitEmbeddedTemplate(ast, context);
+
+    this.pop();
+
+    this.directiveSummary = previousDirectiveSummary;
+  }
+
+  private attributeValueLocation(ast: TemplateAst) {
+    const path = findNode(this.info.htmlAst, ast.sourceSpan.start.offset);
+    const last = path.tail;
+    if (last instanceof Attribute && last.valueSpan) {
+      // Add 1 for the quote.
+      return last.valueSpan.start.offset + 1;
+    }
+    return ast.sourceSpan.start.offset;
+  }
+
+  private diagnoseExpression(ast: AST, offset: number, includeEvent: boolean) {
+    const scope = this.getExpressionScope(this.path, includeEvent);
+    this.diagnostics.push(...getExpressionDiagnostics(scope, ast, this.info.query, {
+                            event: includeEvent
+                          }).map(d => ({
+                                   span: offsetSpan(d.ast.span, offset + this.info.offset),
+                                   kind: d.kind,
+                                   message: d.message
+                                 })));
+  }
+
+  private push(ast: TemplateAst) { this.path.push(ast); }
+
+  private pop() { this.path.pop(); }
+
+  private reportError(message: string, span: Span|undefined) {
+    if (span) {
+      this.diagnostics.push(
+          {span: offsetSpan(span, this.info.offset), kind: DiagnosticKind.Error, message});
+    }
+  }
+
+  private reportWarning(message: string, span: Span) {
+    this.diagnostics.push(
+        {span: offsetSpan(span, this.info.offset), kind: DiagnosticKind.Warning, message});
+  }
+}
+
+function hasTemplateReference(type: CompileTypeMetadata): boolean {
+  if (type.diDeps) {
+    for (let diDep of type.diDeps) {
+      if (diDep.token && diDep.token.identifier &&
+          identifierName(diDep.token !.identifier !) == 'TemplateRef')
+        return true;
+    }
+  }
+  return false;
+}
+
+function offsetSpan(span: Span, amount: number): Span {
+  return {start: span.start + amount, end: span.end + amount};
+}
+
+function spanOf(sourceSpan: ParseSourceSpan): Span {
+  return {start: sourceSpan.start.offset, end: sourceSpan.end.offset};
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/diagnostics/expression_type.ts b/packages/compiler-cli/src/diagnostics/expression_type.ts
new file mode 100644
index 0000000000..9ee89e1bba
--- /dev/null
+++ b/packages/compiler-cli/src/diagnostics/expression_type.ts
@@ -0,0 +1,423 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {AST, AstVisitor, Binary, BindingPipe, Chain, Conditional, FunctionCall, ImplicitReceiver, Interpolation, KeyedRead, KeyedWrite, LiteralArray, LiteralMap, LiteralPrimitive, MethodCall, NonNullAssert, PrefixNot, PropertyRead, PropertyWrite, Quote, SafeMethodCall, SafePropertyRead, visitAstChildren} from '@angular/compiler';
+
+import {BuiltinType, Signature, Span, Symbol, SymbolQuery, SymbolTable} from './symbols';
+
+export interface ExpressionDiagnosticsContext { event?: boolean; }
+
+export enum DiagnosticKind {
+  Error,
+  Warning,
+}
+
+export class TypeDiagnostic {
+  constructor(public kind: DiagnosticKind, public message: string, public ast: AST) {}
+}
+
+// AstType calculatetype of the ast given AST element.
+export class AstType implements AstVisitor {
+  public diagnostics: TypeDiagnostic[];
+
+  constructor(
+      private scope: SymbolTable, private query: SymbolQuery,
+      private context: ExpressionDiagnosticsContext) {}
+
+  getType(ast: AST): Symbol { return ast.visit(this); }
+
+  getDiagnostics(ast: AST): TypeDiagnostic[] {
+    this.diagnostics = [];
+    const type: Symbol = ast.visit(this);
+    if (this.context.event && type.callable) {
+      this.reportWarning('Unexpected callable expression. Expected a method call', ast);
+    }
+    return this.diagnostics;
+  }
+
+  visitBinary(ast: Binary): Symbol {
+    // Treat undefined and null as other.
+    function normalize(kind: BuiltinType, other: BuiltinType): BuiltinType {
+      switch (kind) {
+        case BuiltinType.Undefined:
+        case BuiltinType.Null:
+          return normalize(other, BuiltinType.Other);
+      }
+      return kind;
+    }
+
+    const getType = (ast: AST, operation: string): Symbol => {
+      const type = this.getType(ast);
+      if (type.nullable) {
+        switch (operation) {
+          case '&&':
+          case '||':
+          case '==':
+          case '!=':
+          case '===':
+          case '!==':
+            // Nullable allowed.
+            break;
+          default:
+            this.reportError(`The expression might be null`, ast);
+            break;
+        }
+        return this.query.getNonNullableType(type);
+      }
+      return type;
+    };
+
+    const leftType = getType(ast.left, ast.operation);
+    const rightType = getType(ast.right, ast.operation);
+    const leftRawKind = this.query.getTypeKind(leftType);
+    const rightRawKind = this.query.getTypeKind(rightType);
+    const leftKind = normalize(leftRawKind, rightRawKind);
+    const rightKind = normalize(rightRawKind, leftRawKind);
+
+    // The following swtich implements operator typing similar to the
+    // type production tables in the TypeScript specification.
+    // https://github.com/Microsoft/TypeScript/blob/v1.8.10/doc/spec.md#4.19
+    const operKind = leftKind << 8 | rightKind;
+    switch (ast.operation) {
+      case '*':
+      case '/':
+      case '%':
+      case '-':
+      case '<<':
+      case '>>':
+      case '>>>':
+      case '&':
+      case '^':
+      case '|':
+        switch (operKind) {
+          case BuiltinType.Any << 8 | BuiltinType.Any:
+          case BuiltinType.Number << 8 | BuiltinType.Any:
+          case BuiltinType.Any << 8 | BuiltinType.Number:
+          case BuiltinType.Number << 8 | BuiltinType.Number:
+            return this.query.getBuiltinType(BuiltinType.Number);
+          default:
+            let errorAst = ast.left;
+            switch (leftKind) {
+              case BuiltinType.Any:
+              case BuiltinType.Number:
+                errorAst = ast.right;
+                break;
+            }
+            return this.reportError('Expected a numeric type', errorAst);
+        }
+      case '+':
+        switch (operKind) {
+          case BuiltinType.Any << 8 | BuiltinType.Any:
+          case BuiltinType.Any << 8 | BuiltinType.Boolean:
+          case BuiltinType.Any << 8 | BuiltinType.Number:
+          case BuiltinType.Any << 8 | BuiltinType.Other:
+          case BuiltinType.Boolean << 8 | BuiltinType.Any:
+          case BuiltinType.Number << 8 | BuiltinType.Any:
+          case BuiltinType.Other << 8 | BuiltinType.Any:
+            return this.anyType;
+          case BuiltinType.Any << 8 | BuiltinType.String:
+          case BuiltinType.Boolean << 8 | BuiltinType.String:
+          case BuiltinType.Number << 8 | BuiltinType.String:
+          case BuiltinType.String << 8 | BuiltinType.Any:
+          case BuiltinType.String << 8 | BuiltinType.Boolean:
+          case BuiltinType.String << 8 | BuiltinType.Number:
+          case BuiltinType.String << 8 | BuiltinType.String:
+          case BuiltinType.String << 8 | BuiltinType.Other:
+          case BuiltinType.Other << 8 | BuiltinType.String:
+            return this.query.getBuiltinType(BuiltinType.String);
+          case BuiltinType.Number << 8 | BuiltinType.Number:
+            return this.query.getBuiltinType(BuiltinType.Number);
+          case BuiltinType.Boolean << 8 | BuiltinType.Number:
+          case BuiltinType.Other << 8 | BuiltinType.Number:
+            return this.reportError('Expected a number type', ast.left);
+          case BuiltinType.Number << 8 | BuiltinType.Boolean:
+          case BuiltinType.Number << 8 | BuiltinType.Other:
+            return this.reportError('Expected a number type', ast.right);
+          default:
+            return this.reportError('Expected operands to be a string or number type', ast);
+        }
+      case '>':
+      case '<':
+      case '<=':
+      case '>=':
+      case '==':
+      case '!=':
+      case '===':
+      case '!==':
+        switch (operKind) {
+          case BuiltinType.Any << 8 | BuiltinType.Any:
+          case BuiltinType.Any << 8 | BuiltinType.Boolean:
+          case BuiltinType.Any << 8 | BuiltinType.Number:
+          case BuiltinType.Any << 8 | BuiltinType.String:
+          case BuiltinType.Any << 8 | BuiltinType.Other:
+          case BuiltinType.Boolean << 8 | BuiltinType.Any:
+          case BuiltinType.Boolean << 8 | BuiltinType.Boolean:
+          case BuiltinType.Number << 8 | BuiltinType.Any:
+          case BuiltinType.Number << 8 | BuiltinType.Number:
+          case BuiltinType.String << 8 | BuiltinType.Any:
+          case BuiltinType.String << 8 | BuiltinType.String:
+          case BuiltinType.Other << 8 | BuiltinType.Any:
+          case BuiltinType.Other << 8 | BuiltinType.Other:
+            return this.query.getBuiltinType(BuiltinType.Boolean);
+          default:
+            return this.reportError('Expected the operants to be of similar type or any', ast);
+        }
+      case '&&':
+        return rightType;
+      case '||':
+        return this.query.getTypeUnion(leftType, rightType);
+    }
+
+    return this.reportError(`Unrecognized operator ${ast.operation}`, ast);
+  }
+
+  visitChain(ast: Chain) {
+    if (this.diagnostics) {
+      // If we are producing diagnostics, visit the children
+      visitAstChildren(ast, this);
+    }
+    // The type of a chain is always undefined.
+    return this.query.getBuiltinType(BuiltinType.Undefined);
+  }
+
+  visitConditional(ast: Conditional) {
+    // The type of a conditional is the union of the true and false conditions.
+    if (this.diagnostics) {
+      visitAstChildren(ast, this);
+    }
+    return this.query.getTypeUnion(this.getType(ast.trueExp), this.getType(ast.falseExp));
+  }
+
+  visitFunctionCall(ast: FunctionCall) {
+    // The type of a function call is the return type of the selected signature.
+    // The signature is selected based on the types of the arguments. Angular doesn't
+    // support contextual typing of arguments so this is simpler than TypeScript's
+    // version.
+    const args = ast.args.map(arg => this.getType(arg));
+    const target = this.getType(ast.target !);
+    if (!target || !target.callable) return this.reportError('Call target is not callable', ast);
+    const signature = target.selectSignature(args);
+    if (signature) return signature.result;
+    // TODO: Consider a better error message here.
+    return this.reportError('Unable no compatible signature found for call', ast);
+  }
+
+  visitImplicitReceiver(ast: ImplicitReceiver): Symbol {
+    const _this = this;
+    // Return a pseudo-symbol for the implicit receiver.
+    // The members of the implicit receiver are what is defined by the
+    // scope passed into this class.
+    return {
+      name: '$implict',
+      kind: 'component',
+      language: 'ng-template',
+      type: undefined,
+      container: undefined,
+      callable: false,
+      nullable: false,
+      public: true,
+      definition: undefined,
+      members(): SymbolTable{return _this.scope;},
+      signatures(): Signature[]{return [];},
+      selectSignature(types): Signature | undefined{return undefined;},
+      indexed(argument): Symbol | undefined{return undefined;}
+    };
+  }
+
+  visitInterpolation(ast: Interpolation): Symbol {
+    // If we are producing diagnostics, visit the children.
+    if (this.diagnostics) {
+      visitAstChildren(ast, this);
+    }
+    return this.undefinedType;
+  }
+
+  visitKeyedRead(ast: KeyedRead): Symbol {
+    const targetType = this.getType(ast.obj);
+    const keyType = this.getType(ast.key);
+    const result = targetType.indexed(keyType);
+    return result || this.anyType;
+  }
+
+  visitKeyedWrite(ast: KeyedWrite): Symbol {
+    // The write of a type is the type of the value being written.
+    return this.getType(ast.value);
+  }
+
+  visitLiteralArray(ast: LiteralArray): Symbol {
+    // A type literal is an array type of the union of the elements
+    return this.query.getArrayType(
+        this.query.getTypeUnion(...ast.expressions.map(element => this.getType(element))));
+  }
+
+  visitLiteralMap(ast: LiteralMap): Symbol {
+    // If we are producing diagnostics, visit the children
+    if (this.diagnostics) {
+      visitAstChildren(ast, this);
+    }
+    // TODO: Return a composite type.
+    return this.anyType;
+  }
+
+  visitLiteralPrimitive(ast: LiteralPrimitive) {
+    // The type of a literal primitive depends on the value of the literal.
+    switch (ast.value) {
+      case true:
+      case false:
+        return this.query.getBuiltinType(BuiltinType.Boolean);
+      case null:
+        return this.query.getBuiltinType(BuiltinType.Null);
+      case undefined:
+        return this.query.getBuiltinType(BuiltinType.Undefined);
+      default:
+        switch (typeof ast.value) {
+          case 'string':
+            return this.query.getBuiltinType(BuiltinType.String);
+          case 'number':
+            return this.query.getBuiltinType(BuiltinType.Number);
+          default:
+            return this.reportError('Unrecognized primitive', ast);
+        }
+    }
+  }
+
+  visitMethodCall(ast: MethodCall) {
+    return this.resolveMethodCall(this.getType(ast.receiver), ast);
+  }
+
+  visitPipe(ast: BindingPipe) {
+    // The type of a pipe node is the return type of the pipe's transform method. The table returned
+    // by getPipes() is expected to contain symbols with the corresponding transform method type.
+    const pipe = this.query.getPipes().get(ast.name);
+    if (!pipe) return this.reportError(`No pipe by the name ${ast.name} found`, ast);
+    const expType = this.getType(ast.exp);
+    const signature =
+        pipe.selectSignature([expType].concat(ast.args.map(arg => this.getType(arg))));
+    if (!signature) return this.reportError('Unable to resolve signature for pipe invocation', ast);
+    return signature.result;
+  }
+
+  visitPrefixNot(ast: PrefixNot) {
+    // The type of a prefix ! is always boolean.
+    return this.query.getBuiltinType(BuiltinType.Boolean);
+  }
+
+  visitNonNullAssert(ast: NonNullAssert) {
+    const expressionType = this.getType(ast.expression);
+    return this.query.getNonNullableType(expressionType);
+  }
+
+  visitPropertyRead(ast: PropertyRead) {
+    return this.resolvePropertyRead(this.getType(ast.receiver), ast);
+  }
+
+  visitPropertyWrite(ast: PropertyWrite) {
+    // The type of a write is the type of the value being written.
+    return this.getType(ast.value);
+  }
+
+  visitQuote(ast: Quote) {
+    // The type of a quoted expression is any.
+    return this.query.getBuiltinType(BuiltinType.Any);
+  }
+
+  visitSafeMethodCall(ast: SafeMethodCall) {
+    return this.resolveMethodCall(this.query.getNonNullableType(this.getType(ast.receiver)), ast);
+  }
+
+  visitSafePropertyRead(ast: SafePropertyRead) {
+    return this.resolvePropertyRead(this.query.getNonNullableType(this.getType(ast.receiver)), ast);
+  }
+
+  private _anyType: Symbol;
+  private get anyType(): Symbol {
+    let result = this._anyType;
+    if (!result) {
+      result = this._anyType = this.query.getBuiltinType(BuiltinType.Any);
+    }
+    return result;
+  }
+
+  private _undefinedType: Symbol;
+  private get undefinedType(): Symbol {
+    let result = this._undefinedType;
+    if (!result) {
+      result = this._undefinedType = this.query.getBuiltinType(BuiltinType.Undefined);
+    }
+    return result;
+  }
+
+  private resolveMethodCall(receiverType: Symbol, ast: SafeMethodCall|MethodCall) {
+    if (this.isAny(receiverType)) {
+      return this.anyType;
+    }
+
+    // The type of a method is the selected methods result type.
+    const method = receiverType.members().get(ast.name);
+    if (!method) return this.reportError(`Unknown method '${ast.name}'`, ast);
+    if (!method.type) return this.reportError(`Could not find a type for '${ast.name}'`, ast);
+    if (!method.type.callable) return this.reportError(`Member '${ast.name}' is not callable`, ast);
+    const signature = method.type.selectSignature(ast.args.map(arg => this.getType(arg)));
+    if (!signature)
+      return this.reportError(`Unable to resolve signature for call of method ${ast.name}`, ast);
+    return signature.result;
+  }
+
+  private resolvePropertyRead(receiverType: Symbol, ast: SafePropertyRead|PropertyRead) {
+    if (this.isAny(receiverType)) {
+      return this.anyType;
+    }
+
+    // The type of a property read is the seelcted member's type.
+    const member = receiverType.members().get(ast.name);
+    if (!member) {
+      let receiverInfo = receiverType.name;
+      if (receiverInfo == '$implict') {
+        receiverInfo =
+            'The component declaration, template variable declarations, and element references do';
+      } else if (receiverType.nullable) {
+        return this.reportError(`The expression might be null`, ast.receiver);
+      } else {
+        receiverInfo = `'${receiverInfo}' does`;
+      }
+      return this.reportError(
+          `Identifier '${ast.name}' is not defined. ${receiverInfo} not contain such a member`,
+          ast);
+    }
+    if (!member.public) {
+      let receiverInfo = receiverType.name;
+      if (receiverInfo == '$implict') {
+        receiverInfo = 'the component';
+      } else {
+        receiverInfo = `'${receiverInfo}'`;
+      }
+      this.reportWarning(
+          `Identifier '${ast.name}' refers to a private member of ${receiverInfo}`, ast);
+    }
+    return member.type;
+  }
+
+  private reportError(message: string, ast: AST): Symbol {
+    if (this.diagnostics) {
+      this.diagnostics.push(new TypeDiagnostic(DiagnosticKind.Error, message, ast));
+    }
+    return this.anyType;
+  }
+
+  private reportWarning(message: string, ast: AST): Symbol {
+    if (this.diagnostics) {
+      this.diagnostics.push(new TypeDiagnostic(DiagnosticKind.Warning, message, ast));
+    }
+    return this.anyType;
+  }
+
+  private isAny(symbol: Symbol): boolean {
+    return !symbol || this.query.getTypeKind(symbol) == BuiltinType.Any ||
+        (!!symbol.type && this.isAny(symbol.type));
+  }
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/diagnostics/symbols.ts b/packages/compiler-cli/src/diagnostics/symbols.ts
new file mode 100644
index 0000000000..731b4eb2a3
--- /dev/null
+++ b/packages/compiler-cli/src/diagnostics/symbols.ts
@@ -0,0 +1,352 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {StaticSymbol} from '@angular/compiler';
+
+/**
+ * The range of a span of text in a source file.
+ *
+ * @experimental
+ */
+export interface Span {
+  /**
+   * The first code-point of the span as an offset relative to the beginning of the source assuming
+   * a UTF-16 encoding.
+   */
+  start: number;
+
+  /**
+   * The first code-point after the span as an offset relative to the beginning of the source
+   * assuming a UTF-16 encoding.
+   */
+  end: number;
+}
+
+/**
+ * A file and span.
+ */
+export interface Location {
+  fileName: string;
+  span: Span;
+}
+
+/**
+ * A defnition location(s).
+ */
+export type Definition = Location[] | undefined;
+
+/**
+ * A symbol describing a language element that can be referenced by expressions
+ * in an Angular template.
+ *
+ * @experimental
+ */
+export interface Symbol {
+  /**
+   * The name of the symbol as it would be referenced in an Angular expression.
+   */
+  readonly name: string;
+
+  /**
+   * The kind of completion this symbol should generate if included.
+   */
+  readonly kind: string;
+
+  /**
+   * The language of the source that defines the symbol. (e.g. typescript for TypeScript,
+   * ng-template for an Angular template, etc.)
+   */
+  readonly language: string;
+
+  /**
+   * A symbol representing type of the symbol.
+   */
+  readonly type: Symbol|undefined;
+
+  /**
+   * A symbol for the container of this symbol. For example, if this is a method, the container
+   * is the class or interface of the method. If no container is appropriate, undefined is
+   * returned.
+   */
+  readonly container: Symbol|undefined;
+
+  /**
+   * The symbol is public in the container.
+   */
+  readonly public: boolean;
+
+  /**
+   * `true` if the symbol can be the target of a call.
+   */
+  readonly callable: boolean;
+
+  /**
+   * The location of the definition of the symbol
+   */
+  readonly definition: Definition|undefined;
+
+  /**
+   * `true` if the symbol is a type that is nullable (can be null or undefined).
+   */
+  readonly nullable: boolean;
+
+  /**
+   * A table of the members of the symbol; that is, the members that can appear
+   * after a `.` in an Angular expression.
+   */
+  members(): SymbolTable;
+
+  /**
+   * The list of overloaded signatures that can be used if the symbol is the
+   * target of a call.
+   */
+  signatures(): Signature[];
+
+  /**
+   * Return which signature of returned by `signatures()` would be used selected
+   * given the `types` supplied. If no signature would match, this method should
+   * return `undefined`.
+   */
+  selectSignature(types: Symbol[]): Signature|undefined;
+
+  /**
+   * Return the type of the expression if this symbol is indexed by `argument`.
+   * If the symbol cannot be indexed, this method should return `undefined`.
+   */
+  indexed(argument: Symbol): Symbol|undefined;
+}
+
+/**
+ * A table of `Symbol`s accessible by name.
+ *
+ * @experimental
+ */
+export interface SymbolTable {
+  /**
+   * The number of symbols in the table.
+   */
+  readonly size: number;
+
+  /**
+   * Get the symbol corresponding to `key` or `undefined` if there is no symbol in the
+   * table by the name `key`.
+   */
+  get(key: string): Symbol|undefined;
+
+  /**
+   * Returns `true` if the table contains a `Symbol` with the name `key`.
+   */
+  has(key: string): boolean;
+
+  /**
+   * Returns all the `Symbol`s in the table. The order should be, but is not required to be,
+   * in declaration order.
+   */
+  values(): Symbol[];
+}
+
+/**
+ * A description of a function or method signature.
+ *
+ * @experimental
+ */
+export interface Signature {
+  /**
+   * The arguments of the signture. The order of `argumetnts.symbols()` must be in the order
+   * of argument declaration.
+   */
+  readonly arguments: SymbolTable;
+
+  /**
+   * The symbol of the signature result type.
+   */
+  readonly result: Symbol;
+}
+
+/**
+ * An enumeration of basic types.
+ *
+ * @experimental
+ */
+export enum BuiltinType {
+  /**
+   * The type is a type that can hold any other type.
+   */
+  Any,
+
+  /**
+   * The type of a string literal.
+   */
+  String,
+
+  /**
+   * The type of a numeric literal.
+   */
+  Number,
+
+  /**
+   * The type of the `true` and `false` literals.
+   */
+  Boolean,
+
+  /**
+   * The type of the `undefined` literal.
+   */
+  Undefined,
+
+  /**
+   * the type of the `null` literal.
+   */
+  Null,
+
+  /**
+   * the type is an unbound type parameter.
+   */
+  Unbound,
+
+  /**
+   * Not a built-in type.
+   */
+  Other
+}
+
+/**
+ * The kinds of defintion.
+ *
+ * @experimental
+ */
+export type DeclarationKind = 'attribute' | 'html attribute' | 'component' | 'element' | 'entity' |
+    'key' | 'method' | 'pipe' | 'property' | 'type' | 'reference' | 'variable';
+
+/**
+ * Describes a symbol to type binding used to build a symbol table.
+ *
+ * @experimental
+ */
+export interface SymbolDeclaration {
+  /**
+   * The name of the symbol in table.
+   */
+  readonly name: string;
+
+  /**
+   * The kind of symbol to declare.
+   */
+  readonly kind: DeclarationKind;
+
+  /**
+   * Type of the symbol. The type symbol should refer to a symbol for a type.
+   */
+  readonly type: Symbol;
+
+  /**
+   * The definion of the symbol if one exists.
+   */
+  readonly definition?: Definition;
+}
+
+/**
+ * Information about the pipes that are available for use in a template.
+ *
+ * @experimental
+ */
+export interface PipeInfo {
+  /**
+   * The name of the pipe.
+   */
+  name: string;
+
+  /**
+   * The static symbol for the pipe's constructor.
+   */
+  symbol: StaticSymbol;
+}
+
+/**
+ * A sequence of pipe information.
+ *
+ * @experimental
+ */
+export type Pipes = PipeInfo[] | undefined;
+
+/**
+ * Describes the language context in which an Angular expression is evaluated.
+ *
+ * @experimental
+ */
+export interface SymbolQuery {
+  /**
+   * Return the built-in type this symbol represents or Other if it is not a built-in type.
+   */
+  getTypeKind(symbol: Symbol): BuiltinType;
+
+  /**
+   * Return a symbol representing the given built-in type.
+   */
+  getBuiltinType(kind: BuiltinType): Symbol;
+
+  /**
+   * Return the symbol for a type that represents the union of all the types given. Any value
+   * of one of the types given should be assignable to the returned type. If no one type can
+   * be constructed then this should be the Any type.
+   */
+  getTypeUnion(...types: Symbol[]): Symbol;
+
+  /**
+   * Return a symbol for an array type that has the `type` as its element type.
+   */
+  getArrayType(type: Symbol): Symbol;
+
+  /**
+   * Return element type symbol for an array type if the `type` is an array type. Otherwise return
+   * undefined.
+   */
+  getElementType(type: Symbol): Symbol|undefined;
+
+  /**
+   * Return a type that is the non-nullable version of the given type. If `type` is already
+   * non-nullable, return `type`.
+   */
+  getNonNullableType(type: Symbol): Symbol;
+
+  /**
+   * Return a symbol table for the pipes that are in scope.
+   */
+  getPipes(): SymbolTable;
+
+  /**
+   * Return the type symbol for the given static symbol.
+   */
+  getTypeSymbol(type: StaticSymbol): Symbol|undefined;
+
+  /**
+   * Return the members that are in the context of a type's template reference.
+   */
+  getTemplateContext(type: StaticSymbol): SymbolTable|undefined;
+
+  /**
+   * Produce a symbol table with the given symbols. Used to produce a symbol table
+   * for use with mergeSymbolTables().
+   */
+  createSymbolTable(symbols: SymbolDeclaration[]): SymbolTable;
+
+  /**
+   * Produce a merged symbol table. If the symbol tables contain duplicate entries
+   * the entries of the latter symbol tables will obscure the entries in the prior
+   * symbol tables.
+   *
+   * The symbol tables passed to this routine MUST be produces by the same instance
+   * of SymbolQuery that is being called.
+   */
+  mergeSymbolTable(symbolTables: SymbolTable[]): SymbolTable;
+
+  /**
+   * Return the span of the narrowest non-token node at the given location.
+   */
+  getSpanAt(line: number, column: number): Span|undefined;
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/diagnostics/typescript_symbols.ts b/packages/compiler-cli/src/diagnostics/typescript_symbols.ts
new file mode 100644
index 0000000000..9d5199be2b
--- /dev/null
+++ b/packages/compiler-cli/src/diagnostics/typescript_symbols.ts
@@ -0,0 +1,861 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {AotSummaryResolver, CompileMetadataResolver, CompilePipeSummary, CompilerConfig, DEFAULT_INTERPOLATION_CONFIG, DirectiveNormalizer, DirectiveResolver, DomElementSchemaRegistry, HtmlParser, InterpolationConfig, NgAnalyzedModules, NgModuleResolver, ParseTreeResult, PipeResolver, ResourceLoader, StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, SummaryResolver, analyzeNgModules, createOfflineCompileUrlResolver, extractProgramSymbols} from '@angular/compiler';
+import {ViewEncapsulation, ɵConsole as Console} from '@angular/core';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {BuiltinType, DeclarationKind, Definition, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable} from './symbols';
+
+
+// In TypeScript 2.1 these flags moved
+// These helpers work for both 2.0 and 2.1.
+const isPrivate = (ts as any).ModifierFlags ?
+    ((node: ts.Node) =>
+         !!((ts as any).getCombinedModifierFlags(node) & (ts as any).ModifierFlags.Private)) :
+    ((node: ts.Node) => !!(node.flags & (ts as any).NodeFlags.Private));
+
+const isReferenceType = (ts as any).ObjectFlags ?
+    ((type: ts.Type) =>
+         !!(type.flags & (ts as any).TypeFlags.Object &&
+            (type as any).objectFlags & (ts as any).ObjectFlags.Reference)) :
+    ((type: ts.Type) => !!(type.flags & (ts as any).TypeFlags.Reference));
+
+interface TypeContext {
+  node: ts.Node;
+  program: ts.Program;
+  checker: ts.TypeChecker;
+}
+
+export function getSymbolQuery(
+    program: ts.Program, checker: ts.TypeChecker, source: ts.SourceFile,
+    fetchPipes: () => SymbolTable): SymbolQuery {
+  return new TypeScriptSymbolQuery(program, checker, source, fetchPipes);
+}
+
+export function getClassMembers(
+    program: ts.Program, checker: ts.TypeChecker, staticSymbol: StaticSymbol): SymbolTable|
+    undefined {
+  const declaration = getClassFromStaticSymbol(program, staticSymbol);
+  if (declaration) {
+    const type = checker.getTypeAtLocation(declaration);
+    const node = program.getSourceFile(staticSymbol.filePath);
+    return new TypeWrapper(type, {node, program, checker}).members();
+  }
+}
+
+export function getClassMembersFromDeclaration(
+    program: ts.Program, checker: ts.TypeChecker, source: ts.SourceFile,
+    declaration: ts.ClassDeclaration) {
+  const type = checker.getTypeAtLocation(declaration);
+  return new TypeWrapper(type, {node: source, program, checker}).members();
+}
+
+export function getClassFromStaticSymbol(
+    program: ts.Program, type: StaticSymbol): ts.ClassDeclaration|undefined {
+  const source = program.getSourceFile(type.filePath);
+  if (source) {
+    return ts.forEachChild(source, child => {
+      if (child.kind === ts.SyntaxKind.ClassDeclaration) {
+        const classDeclaration = child as ts.ClassDeclaration;
+        if (classDeclaration.name != null && classDeclaration.name.text === type.name) {
+          return classDeclaration;
+        }
+      }
+    }) as(ts.ClassDeclaration | undefined);
+  }
+
+  return undefined;
+}
+
+export function getPipesTable(
+    source: ts.SourceFile, program: ts.Program, checker: ts.TypeChecker,
+    pipes: CompilePipeSummary[]): SymbolTable {
+  return new PipesTable(pipes, {program, checker, node: source});
+}
+
+class TypeScriptSymbolQuery implements SymbolQuery {
+  private typeCache = new Map<BuiltinType, Symbol>();
+  private pipesCache: SymbolTable;
+
+  constructor(
+      private program: ts.Program, private checker: ts.TypeChecker, private source: ts.SourceFile,
+      private fetchPipes: () => SymbolTable) {}
+
+  getTypeKind(symbol: Symbol): BuiltinType { return typeKindOf(this.getTsTypeOf(symbol)); }
+
+  getBuiltinType(kind: BuiltinType): Symbol {
+    let result = this.typeCache.get(kind);
+    if (!result) {
+      const type = getBuiltinTypeFromTs(
+          kind, {checker: this.checker, node: this.source, program: this.program});
+      result =
+          new TypeWrapper(type, {program: this.program, checker: this.checker, node: this.source});
+      this.typeCache.set(kind, result);
+    }
+    return result;
+  }
+
+  getTypeUnion(...types: Symbol[]): Symbol {
+    // No API exists so return any if the types are not all the same type.
+    let result: Symbol|undefined = undefined;
+    if (types.length) {
+      result = types[0];
+      for (let i = 1; i < types.length; i++) {
+        if (types[i] != result) {
+          result = undefined;
+          break;
+        }
+      }
+    }
+    return result || this.getBuiltinType(BuiltinType.Any);
+  }
+
+  getArrayType(type: Symbol): Symbol { return this.getBuiltinType(BuiltinType.Any); }
+
+  getElementType(type: Symbol): Symbol|undefined {
+    if (type instanceof TypeWrapper) {
+      const elementType = getTypeParameterOf(type.tsType, 'Array');
+      if (elementType) {
+        return new TypeWrapper(elementType, type.context);
+      }
+    }
+  }
+
+  getNonNullableType(symbol: Symbol): Symbol {
+    if (symbol instanceof TypeWrapper && (typeof this.checker.getNonNullableType == 'function')) {
+      const tsType = symbol.tsType;
+      const nonNullableType = this.checker.getNonNullableType(tsType);
+      if (nonNullableType != tsType) {
+        return new TypeWrapper(nonNullableType, symbol.context);
+      } else if (nonNullableType == tsType) {
+        return symbol;
+      }
+    }
+    return this.getBuiltinType(BuiltinType.Any);
+  }
+
+  getPipes(): SymbolTable {
+    let result = this.pipesCache;
+    if (!result) {
+      result = this.pipesCache = this.fetchPipes();
+    }
+    return result;
+  }
+
+  getTemplateContext(type: StaticSymbol): SymbolTable|undefined {
+    const context: TypeContext = {node: this.source, program: this.program, checker: this.checker};
+    const typeSymbol = findClassSymbolInContext(type, context);
+    if (typeSymbol) {
+      const contextType = this.getTemplateRefContextType(typeSymbol);
+      if (contextType) return new SymbolWrapper(contextType, context).members();
+    }
+  }
+
+  getTypeSymbol(type: StaticSymbol): Symbol|undefined {
+    const context: TypeContext = {node: this.source, program: this.program, checker: this.checker};
+    const typeSymbol = findClassSymbolInContext(type, context);
+    return typeSymbol && new SymbolWrapper(typeSymbol, context);
+  }
+
+  createSymbolTable(symbols: SymbolDeclaration[]): SymbolTable {
+    const result = new MapSymbolTable();
+    result.addAll(symbols.map(s => new DeclaredSymbol(s)));
+    return result;
+  }
+
+  mergeSymbolTable(symbolTables: SymbolTable[]): SymbolTable {
+    const result = new MapSymbolTable();
+    for (const symbolTable of symbolTables) {
+      result.addAll(symbolTable.values());
+    }
+    return result;
+  }
+
+  getSpanAt(line: number, column: number): Span|undefined {
+    return spanAt(this.source, line, column);
+  }
+
+  private getTemplateRefContextType(typeSymbol: ts.Symbol): ts.Symbol|undefined {
+    const type = this.checker.getTypeOfSymbolAtLocation(typeSymbol, this.source);
+    const constructor = type.symbol && type.symbol.members &&
+        getFromSymbolTable(type.symbol.members !, '__constructor');
+
+    if (constructor) {
+      const constructorDeclaration = constructor.declarations ![0] as ts.ConstructorTypeNode;
+      for (const parameter of constructorDeclaration.parameters) {
+        const type = this.checker.getTypeAtLocation(parameter.type !);
+        if (type.symbol !.name == 'TemplateRef' && isReferenceType(type)) {
+          const typeReference = type as ts.TypeReference;
+          if (typeReference.typeArguments.length === 1) {
+            return typeReference.typeArguments[0].symbol;
+          }
+        }
+      }
+    }
+  }
+
+  private getTsTypeOf(symbol: Symbol): ts.Type|undefined {
+    const type = this.getTypeWrapper(symbol);
+    return type && type.tsType;
+  }
+
+  private getTypeWrapper(symbol: Symbol): TypeWrapper|undefined {
+    let type: TypeWrapper|undefined = undefined;
+    if (symbol instanceof TypeWrapper) {
+      type = symbol;
+    } else if (symbol.type instanceof TypeWrapper) {
+      type = symbol.type;
+    }
+    return type;
+  }
+}
+
+function typeCallable(type: ts.Type): boolean {
+  const signatures = type.getCallSignatures();
+  return signatures && signatures.length != 0;
+}
+
+function signaturesOf(type: ts.Type, context: TypeContext): Signature[] {
+  return type.getCallSignatures().map(s => new SignatureWrapper(s, context));
+}
+
+function selectSignature(type: ts.Type, context: TypeContext, types: Symbol[]): Signature|
+    undefined {
+  // TODO: Do a better job of selecting the right signature.
+  const signatures = type.getCallSignatures();
+  return signatures.length ? new SignatureWrapper(signatures[0], context) : undefined;
+}
+
+class TypeWrapper implements Symbol {
+  constructor(public tsType: ts.Type, public context: TypeContext) {
+    if (!tsType) {
+      throw Error('Internal: null type');
+    }
+  }
+
+  get name(): string {
+    const symbol = this.tsType.symbol;
+    return (symbol && symbol.name) || '<anonymous>';
+  }
+
+  get kind(): DeclarationKind { return 'type'; }
+
+  get language(): string { return 'typescript'; }
+
+  get type(): Symbol|undefined { return undefined; }
+
+  get container(): Symbol|undefined { return undefined; }
+
+  get public(): boolean { return true; }
+
+  get callable(): boolean { return typeCallable(this.tsType); }
+
+  get nullable(): boolean {
+    return this.context.checker.getNonNullableType(this.tsType) != this.tsType;
+  }
+
+  get definition(): Definition { return definitionFromTsSymbol(this.tsType.getSymbol()); }
+
+  members(): SymbolTable {
+    return new SymbolTableWrapper(this.tsType.getProperties(), this.context);
+  }
+
+  signatures(): Signature[] { return signaturesOf(this.tsType, this.context); }
+
+  selectSignature(types: Symbol[]): Signature|undefined {
+    return selectSignature(this.tsType, this.context, types);
+  }
+
+  indexed(argument: Symbol): Symbol|undefined { return undefined; }
+}
+
+class SymbolWrapper implements Symbol {
+  private symbol: ts.Symbol;
+  private _tsType: ts.Type;
+  private _members: SymbolTable;
+
+  constructor(symbol: ts.Symbol, private context: TypeContext) {
+    this.symbol = symbol && context && (symbol.flags & ts.SymbolFlags.Alias) ?
+        context.checker.getAliasedSymbol(symbol) :
+        symbol;
+  }
+
+  get name(): string { return this.symbol.name; }
+
+  get kind(): DeclarationKind { return this.callable ? 'method' : 'property'; }
+
+  get language(): string { return 'typescript'; }
+
+  get type(): Symbol|undefined { return new TypeWrapper(this.tsType, this.context); }
+
+  get container(): Symbol|undefined { return getContainerOf(this.symbol, this.context); }
+
+  get public(): boolean {
+    // Symbols that are not explicitly made private are public.
+    return !isSymbolPrivate(this.symbol);
+  }
+
+  get callable(): boolean { return typeCallable(this.tsType); }
+
+  get nullable(): boolean { return false; }
+
+  get definition(): Definition { return definitionFromTsSymbol(this.symbol); }
+
+  members(): SymbolTable {
+    if (!this._members) {
+      if ((this.symbol.flags & (ts.SymbolFlags.Class | ts.SymbolFlags.Interface)) != 0) {
+        const declaredType = this.context.checker.getDeclaredTypeOfSymbol(this.symbol);
+        const typeWrapper = new TypeWrapper(declaredType, this.context);
+        this._members = typeWrapper.members();
+      } else {
+        this._members = new SymbolTableWrapper(this.symbol.members !, this.context);
+      }
+    }
+    return this._members;
+  }
+
+  signatures(): Signature[] { return signaturesOf(this.tsType, this.context); }
+
+  selectSignature(types: Symbol[]): Signature|undefined {
+    return selectSignature(this.tsType, this.context, types);
+  }
+
+  indexed(argument: Symbol): Symbol|undefined { return undefined; }
+
+  private get tsType(): ts.Type {
+    let type = this._tsType;
+    if (!type) {
+      type = this._tsType =
+          this.context.checker.getTypeOfSymbolAtLocation(this.symbol, this.context.node);
+    }
+    return type;
+  }
+}
+
+class DeclaredSymbol implements Symbol {
+  constructor(private declaration: SymbolDeclaration) {}
+
+  get name() { return this.declaration.name; }
+
+  get kind() { return this.declaration.kind; }
+
+  get language(): string { return 'ng-template'; }
+
+  get container(): Symbol|undefined { return undefined; }
+
+  get type() { return this.declaration.type; }
+
+  get callable(): boolean { return this.declaration.type.callable; }
+
+  get nullable(): boolean { return false; }
+
+  get public(): boolean { return true; }
+
+  get definition(): Definition { return this.declaration.definition; }
+
+  members(): SymbolTable { return this.declaration.type.members(); }
+
+  signatures(): Signature[] { return this.declaration.type.signatures(); }
+
+  selectSignature(types: Symbol[]): Signature|undefined {
+    return this.declaration.type.selectSignature(types);
+  }
+
+  indexed(argument: Symbol): Symbol|undefined { return undefined; }
+}
+
+class SignatureWrapper implements Signature {
+  constructor(private signature: ts.Signature, private context: TypeContext) {}
+
+  get arguments(): SymbolTable {
+    return new SymbolTableWrapper(this.signature.getParameters(), this.context);
+  }
+
+  get result(): Symbol { return new TypeWrapper(this.signature.getReturnType(), this.context); }
+}
+
+class SignatureResultOverride implements Signature {
+  constructor(private signature: Signature, private resultType: Symbol) {}
+
+  get arguments(): SymbolTable { return this.signature.arguments; }
+
+  get result(): Symbol { return this.resultType; }
+}
+
+const toSymbolTable: (symbols: ts.Symbol[]) => ts.SymbolTable = isTypescriptVersion('2.2') ?
+    (symbols => {
+      const result = new Map<string, ts.Symbol>();
+      for (const symbol of symbols) {
+        result.set(symbol.name, symbol);
+      }
+      return <ts.SymbolTable>(result as any);
+    }) :
+    (symbols => {
+      const result = <any>{};
+      for (const symbol of symbols) {
+        result[symbol.name] = symbol;
+      }
+      return result as ts.SymbolTable;
+    });
+
+function toSymbols(symbolTable: ts.SymbolTable | undefined): ts.Symbol[] {
+  if (!symbolTable) return [];
+
+  const table = symbolTable as any;
+
+  if (typeof table.values === 'function') {
+    return Array.from(table.values()) as ts.Symbol[];
+  }
+
+  const result: ts.Symbol[] = [];
+
+  const own = typeof table.hasOwnProperty === 'function' ?
+      (name: string) => table.hasOwnProperty(name) :
+      (name: string) => !!table[name];
+
+  for (const name in table) {
+    if (own(name)) {
+      result.push(table[name]);
+    }
+  }
+  return result;
+}
+
+class SymbolTableWrapper implements SymbolTable {
+  private symbols: ts.Symbol[];
+  private symbolTable: ts.SymbolTable;
+
+  constructor(symbols: ts.SymbolTable|ts.Symbol[]|undefined, private context: TypeContext) {
+    symbols = symbols || [];
+
+    if (Array.isArray(symbols)) {
+      this.symbols = symbols;
+      this.symbolTable = toSymbolTable(symbols);
+    } else {
+      this.symbols = toSymbols(symbols);
+      this.symbolTable = symbols;
+    }
+  }
+
+  get size(): number { return this.symbols.length; }
+
+  get(key: string): Symbol|undefined {
+    const symbol = getFromSymbolTable(this.symbolTable, key);
+    return symbol ? new SymbolWrapper(symbol, this.context) : undefined;
+  }
+
+  has(key: string): boolean {
+    const table: any = this.symbolTable;
+    return (typeof table.has === 'function') ? table.has(key) : table[key] != null;
+  }
+
+  values(): Symbol[] { return this.symbols.map(s => new SymbolWrapper(s, this.context)); }
+}
+
+class MapSymbolTable implements SymbolTable {
+  private map = new Map<string, Symbol>();
+  private _values: Symbol[] = [];
+
+  get size(): number { return this.map.size; }
+
+  get(key: string): Symbol|undefined { return this.map.get(key); }
+
+  add(symbol: Symbol) {
+    if (this.map.has(symbol.name)) {
+      const previous = this.map.get(symbol.name) !;
+      this._values[this._values.indexOf(previous)] = symbol;
+    }
+    this.map.set(symbol.name, symbol);
+    this._values.push(symbol);
+  }
+
+  addAll(symbols: Symbol[]) {
+    for (const symbol of symbols) {
+      this.add(symbol);
+    }
+  }
+
+  has(key: string): boolean { return this.map.has(key); }
+
+  values(): Symbol[] {
+    // Switch to this.map.values once iterables are supported by the target language.
+    return this._values;
+  }
+}
+
+class PipesTable implements SymbolTable {
+  constructor(private pipes: CompilePipeSummary[], private context: TypeContext) {}
+
+  get size() { return this.pipes.length; }
+
+  get(key: string): Symbol|undefined {
+    const pipe = this.pipes.find(pipe => pipe.name == key);
+    if (pipe) {
+      return new PipeSymbol(pipe, this.context);
+    }
+  }
+
+  has(key: string): boolean { return this.pipes.find(pipe => pipe.name == key) != null; }
+
+  values(): Symbol[] { return this.pipes.map(pipe => new PipeSymbol(pipe, this.context)); }
+}
+
+class PipeSymbol implements Symbol {
+  private _tsType: ts.Type;
+
+  constructor(private pipe: CompilePipeSummary, private context: TypeContext) {}
+
+  get name(): string { return this.pipe.name; }
+
+  get kind(): DeclarationKind { return 'pipe'; }
+
+  get language(): string { return 'typescript'; }
+
+  get type(): Symbol|undefined { return new TypeWrapper(this.tsType, this.context); }
+
+  get container(): Symbol|undefined { return undefined; }
+
+  get callable(): boolean { return true; }
+
+  get nullable(): boolean { return false; }
+
+  get public(): boolean { return true; }
+
+  get definition(): Definition { return definitionFromTsSymbol(this.tsType.getSymbol()); }
+
+  members(): SymbolTable { return EmptyTable.instance; }
+
+  signatures(): Signature[] { return signaturesOf(this.tsType, this.context); }
+
+  selectSignature(types: Symbol[]): Signature|undefined {
+    let signature = selectSignature(this.tsType, this.context, types) !;
+    if (types.length == 1) {
+      const parameterType = types[0];
+      if (parameterType instanceof TypeWrapper) {
+        let resultType: ts.Type|undefined = undefined;
+        switch (this.name) {
+          case 'async':
+            switch (parameterType.name) {
+              case 'Observable':
+              case 'Promise':
+              case 'EventEmitter':
+                resultType = getTypeParameterOf(parameterType.tsType, parameterType.name);
+                break;
+              default:
+                resultType = getBuiltinTypeFromTs(BuiltinType.Any, this.context);
+                break;
+            }
+            break;
+          case 'slice':
+            resultType = getTypeParameterOf(parameterType.tsType, 'Array');
+            break;
+        }
+        if (resultType) {
+          signature = new SignatureResultOverride(
+              signature, new TypeWrapper(resultType, parameterType.context));
+        }
+      }
+    }
+    return signature;
+  }
+
+  indexed(argument: Symbol): Symbol|undefined { return undefined; }
+
+  private get tsType(): ts.Type {
+    let type = this._tsType;
+    if (!type) {
+      const classSymbol = this.findClassSymbol(this.pipe.type.reference);
+      if (classSymbol) {
+        type = this._tsType = this.findTransformMethodType(classSymbol) !;
+      }
+      if (!type) {
+        type = this._tsType = getBuiltinTypeFromTs(BuiltinType.Any, this.context);
+      }
+    }
+    return type;
+  }
+
+  private findClassSymbol(type: StaticSymbol): ts.Symbol|undefined {
+    return findClassSymbolInContext(type, this.context);
+  }
+
+  private findTransformMethodType(classSymbol: ts.Symbol): ts.Type|undefined {
+    const classType = this.context.checker.getDeclaredTypeOfSymbol(classSymbol);
+    if (classType) {
+      const transform = classType.getProperty('transform');
+      if (transform) {
+        return this.context.checker.getTypeOfSymbolAtLocation(transform, this.context.node);
+      }
+    }
+  }
+}
+
+function findClassSymbolInContext(type: StaticSymbol, context: TypeContext): ts.Symbol|undefined {
+  const sourceFile = context.program.getSourceFile(type.filePath);
+  if (sourceFile) {
+    const moduleSymbol = (sourceFile as any).module || (sourceFile as any).symbol;
+    const exports = context.checker.getExportsOfModule(moduleSymbol);
+    return (exports || []).find(symbol => symbol.name == type.name);
+  }
+}
+
+class EmptyTable implements SymbolTable {
+  get size(): number { return 0; }
+  get(key: string): Symbol|undefined { return undefined; }
+  has(key: string): boolean { return false; }
+  values(): Symbol[] { return []; }
+  static instance = new EmptyTable();
+}
+
+function findTsConfig(fileName: string): string|undefined {
+  let dir = path.dirname(fileName);
+  while (fs.existsSync(dir)) {
+    const candidate = path.join(dir, 'tsconfig.json');
+    if (fs.existsSync(candidate)) return candidate;
+    const parentDir = path.dirname(dir);
+    if (parentDir === dir) break;
+    dir = parentDir;
+  }
+}
+
+function isBindingPattern(node: ts.Node): node is ts.BindingPattern {
+  return !!node && (node.kind === ts.SyntaxKind.ArrayBindingPattern ||
+                    node.kind === ts.SyntaxKind.ObjectBindingPattern);
+}
+
+function walkUpBindingElementsAndPatterns(node: ts.Node): ts.Node {
+  while (node && (node.kind === ts.SyntaxKind.BindingElement || isBindingPattern(node))) {
+    node = node.parent !;
+  }
+
+  return node;
+}
+
+function getCombinedNodeFlags(node: ts.Node): ts.NodeFlags {
+  node = walkUpBindingElementsAndPatterns(node);
+
+  let flags = node.flags;
+  if (node.kind === ts.SyntaxKind.VariableDeclaration) {
+    node = node.parent !;
+  }
+
+  if (node && node.kind === ts.SyntaxKind.VariableDeclarationList) {
+    flags |= node.flags;
+    node = node.parent !;
+  }
+
+  if (node && node.kind === ts.SyntaxKind.VariableStatement) {
+    flags |= node.flags;
+  }
+
+  return flags;
+}
+
+function isSymbolPrivate(s: ts.Symbol): boolean {
+  return !!s.valueDeclaration && isPrivate(s.valueDeclaration);
+}
+
+function getBuiltinTypeFromTs(kind: BuiltinType, context: TypeContext): ts.Type {
+  let type: ts.Type;
+  const checker = context.checker;
+  const node = context.node;
+  switch (kind) {
+    case BuiltinType.Any:
+      type = checker.getTypeAtLocation(setParents(
+          <ts.Node><any>{
+            kind: ts.SyntaxKind.AsExpression,
+            expression: <ts.Node>{kind: ts.SyntaxKind.TrueKeyword},
+            type: <ts.Node>{kind: ts.SyntaxKind.AnyKeyword}
+          },
+          node));
+      break;
+    case BuiltinType.Boolean:
+      type =
+          checker.getTypeAtLocation(setParents(<ts.Node>{kind: ts.SyntaxKind.TrueKeyword}, node));
+      break;
+    case BuiltinType.Null:
+      type =
+          checker.getTypeAtLocation(setParents(<ts.Node>{kind: ts.SyntaxKind.NullKeyword}, node));
+      break;
+    case BuiltinType.Number:
+      const numeric = <ts.Node>{kind: ts.SyntaxKind.NumericLiteral};
+      setParents(<any>{kind: ts.SyntaxKind.ExpressionStatement, expression: numeric}, node);
+      type = checker.getTypeAtLocation(numeric);
+      break;
+    case BuiltinType.String:
+      type = checker.getTypeAtLocation(
+          setParents(<ts.Node>{kind: ts.SyntaxKind.NoSubstitutionTemplateLiteral}, node));
+      break;
+    case BuiltinType.Undefined:
+      type = checker.getTypeAtLocation(setParents(
+          <ts.Node><any>{
+            kind: ts.SyntaxKind.VoidExpression,
+            expression: <ts.Node>{kind: ts.SyntaxKind.NumericLiteral}
+          },
+          node));
+      break;
+    default:
+      throw new Error(`Internal error, unhandled literal kind ${kind}:${BuiltinType[kind]}`);
+  }
+  return type;
+}
+
+function setParents<T extends ts.Node>(node: T, parent: ts.Node): T {
+  node.parent = parent;
+  ts.forEachChild(node, child => setParents(child, node));
+  return node;
+}
+
+function spanOf(node: ts.Node): Span {
+  return {start: node.getStart(), end: node.getEnd()};
+}
+
+function shrink(span: Span, offset?: number) {
+  if (offset == null) offset = 1;
+  return {start: span.start + offset, end: span.end - offset};
+}
+
+function spanAt(sourceFile: ts.SourceFile, line: number, column: number): Span|undefined {
+  if (line != null && column != null) {
+    const position = ts.getPositionOfLineAndCharacter(sourceFile, line, column);
+    const findChild = function findChild(node: ts.Node): ts.Node | undefined {
+      if (node.kind > ts.SyntaxKind.LastToken && node.pos <= position && node.end > position) {
+        const betterNode = ts.forEachChild(node, findChild);
+        return betterNode || node;
+      }
+    };
+
+    const node = ts.forEachChild(sourceFile, findChild);
+    if (node) {
+      return {start: node.getStart(), end: node.getEnd()};
+    }
+  }
+}
+
+function definitionFromTsSymbol(symbol: ts.Symbol): Definition {
+  const declarations = symbol.declarations;
+  if (declarations) {
+    return declarations.map(declaration => {
+      const sourceFile = declaration.getSourceFile();
+      return {
+        fileName: sourceFile.fileName,
+        span: {start: declaration.getStart(), end: declaration.getEnd()}
+      };
+    });
+  }
+}
+
+function parentDeclarationOf(node: ts.Node): ts.Node|undefined {
+  while (node) {
+    switch (node.kind) {
+      case ts.SyntaxKind.ClassDeclaration:
+      case ts.SyntaxKind.InterfaceDeclaration:
+        return node;
+      case ts.SyntaxKind.SourceFile:
+        return undefined;
+    }
+    node = node.parent !;
+  }
+}
+
+function getContainerOf(symbol: ts.Symbol, context: TypeContext): Symbol|undefined {
+  if (symbol.getFlags() & ts.SymbolFlags.ClassMember && symbol.declarations) {
+    for (const declaration of symbol.declarations) {
+      const parent = parentDeclarationOf(declaration);
+      if (parent) {
+        const type = context.checker.getTypeAtLocation(parent);
+        if (type) {
+          return new TypeWrapper(type, context);
+        }
+      }
+    }
+  }
+}
+
+function getTypeParameterOf(type: ts.Type, name: string): ts.Type|undefined {
+  if (type && type.symbol && type.symbol.name == name) {
+    const typeArguments: ts.Type[] = (type as any).typeArguments;
+    if (typeArguments && typeArguments.length <= 1) {
+      return typeArguments[0];
+    }
+  }
+}
+
+function typeKindOf(type: ts.Type | undefined): BuiltinType {
+  if (type) {
+    if (type.flags & ts.TypeFlags.Any) {
+      return BuiltinType.Any;
+    } else if (
+        type.flags & (ts.TypeFlags.String | ts.TypeFlags.StringLike | ts.TypeFlags.StringLiteral)) {
+      return BuiltinType.String;
+    } else if (type.flags & (ts.TypeFlags.Number | ts.TypeFlags.NumberLike)) {
+      return BuiltinType.Number;
+    } else if (type.flags & (ts.TypeFlags.Undefined)) {
+      return BuiltinType.Undefined;
+    } else if (type.flags & (ts.TypeFlags.Null)) {
+      return BuiltinType.Null;
+    } else if (type.flags & ts.TypeFlags.Union) {
+      // If all the constituent types of a union are the same kind, it is also that kind.
+      let candidate: BuiltinType|null = null;
+      const unionType = type as ts.UnionType;
+      if (unionType.types.length > 0) {
+        candidate = typeKindOf(unionType.types[0]);
+        for (const subType of unionType.types) {
+          if (candidate != typeKindOf(subType)) {
+            return BuiltinType.Other;
+          }
+        }
+      }
+      if (candidate != null) {
+        return candidate;
+      }
+    } else if (type.flags & ts.TypeFlags.TypeParameter) {
+      return BuiltinType.Unbound;
+    }
+  }
+  return BuiltinType.Other;
+}
+
+
+
+function getFromSymbolTable(symbolTable: ts.SymbolTable, key: string): ts.Symbol|undefined {
+  const table = symbolTable as any;
+  let symbol: ts.Symbol|undefined;
+
+  if (typeof table.get === 'function') {
+    // TS 2.2 uses a Map
+    symbol = table.get(key);
+  } else {
+    // TS pre-2.2 uses an object
+    symbol = table[key];
+  }
+
+  return symbol;
+}
+
+function toNumbers(value: string | undefined): number[] {
+  return value ? value.split('.').map(v => +v) : [];
+}
+
+function compareNumbers(a: number[], b: number[]): -1|0|1 {
+  for (let i = 0; i < a.length && i < b.length; i++) {
+    if (a[i] > b[i]) return 1;
+    if (a[i] < b[i]) return -1;
+  }
+  return 0;
+}
+
+function isTypescriptVersion(low: string, high?: string): boolean {
+  const tsNumbers = toNumbers(ts.version);
+
+  return compareNumbers(toNumbers(low), tsNumbers) <= 0 &&
+      compareNumbers(toNumbers(high), tsNumbers) >= 0;
+}
diff --git a/packages/compiler-cli/src/extract_i18n.ts b/packages/compiler-cli/src/extract_i18n.ts
index c8aec764a0..d5886e1b92 100644
--- a/packages/compiler-cli/src/extract_i18n.ts
+++ b/packages/compiler-cli/src/extract_i18n.ts
@@ -21,7 +21,7 @@ import {Extractor} from './extractor';
 
 function extract(
     ngOptions: tsc.AngularCompilerOptions, cliOptions: tsc.I18nExtractionCliOptions,
-    program: ts.Program, host: ts.CompilerHost): Promise<void> {
+    program: ts.Program, host: ts.CompilerHost) {
   return Extractor.create(ngOptions, program, host, cliOptions.locale)
       .extract(cliOptions.i18nFormat !, cliOptions.outFile);
 }
diff --git a/packages/compiler-cli/src/extractor.ts b/packages/compiler-cli/src/extractor.ts
index 1d929c8e7a..e87a370d76 100644
--- a/packages/compiler-cli/src/extractor.ts
+++ b/packages/compiler-cli/src/extractor.ts
@@ -27,17 +27,18 @@ export class Extractor {
       public host: ts.CompilerHost, private ngCompilerHost: CompilerHost,
       private program: ts.Program) {}
 
-  extract(formatName: string, outFile: string|null): Promise<void> {
+  extract(formatName: string, outFile: string|null): Promise<string[]> {
     // Checks the format and returns the extension
     const ext = this.getExtension(formatName);
 
     const promiseBundle = this.extractBundle();
 
     return promiseBundle.then(bundle => {
-      const content = this.serialize(bundle, ext);
+      const content = this.serialize(bundle, formatName);
       const dstFile = outFile || `messages.${ext}`;
-      const dstPath = path.join(this.options.genDir, dstFile);
+      const dstPath = path.join(this.options.genDir !, dstFile);
       this.host.writeFile(dstPath, content, false);
+      return [dstPath];
     });
   }
 
@@ -48,28 +49,44 @@ export class Extractor {
     return this.ngExtractor.extract(files);
   }
 
-  serialize(bundle: compiler.MessageBundle, ext: string): string {
+  serialize(bundle: compiler.MessageBundle, formatName: string): string {
+    const format = formatName.toLowerCase();
     let serializer: compiler.Serializer;
 
-    switch (ext) {
+    switch (format) {
       case 'xmb':
         serializer = new compiler.Xmb();
         break;
+      case 'xliff2':
+      case 'xlf2':
+        serializer = new compiler.Xliff2();
+        break;
       case 'xlf':
+      case 'xliff':
       default:
         serializer = new compiler.Xliff();
     }
-
-    return bundle.write(serializer);
+    return bundle.write(
+        serializer, (sourcePath: string) => this.options.basePath ?
+            path.relative(this.options.basePath, sourcePath) :
+            sourcePath);
   }
 
   getExtension(formatName: string): string {
     const format = (formatName || 'xlf').toLowerCase();
 
-    if (format === 'xmb') return 'xmb';
-    if (format === 'xlf' || format === 'xlif' || format === 'xliff') return 'xlf';
+    switch (format) {
+      case 'xmb':
+        return 'xmb';
+      case 'xlf':
+      case 'xlif':
+      case 'xliff':
+      case 'xlf2':
+      case 'xliff2':
+        return 'xlf';
+    }
 
-    throw new Error('Unsupported format "${formatName}"');
+    throw new Error(`Unsupported format "${formatName}"`);
   }
 
   static create(
diff --git a/packages/compiler-cli/src/main.ts b/packages/compiler-cli/src/main.ts
index db462e2db8..3dc68977d9 100644
--- a/packages/compiler-cli/src/main.ts
+++ b/packages/compiler-cli/src/main.ts
@@ -20,6 +20,10 @@ import {CodeGenerator} from './codegen';
 function codegen(
     ngOptions: tsc.AngularCompilerOptions, cliOptions: tsc.NgcCliOptions, program: ts.Program,
     host: ts.CompilerHost) {
+  if (ngOptions.enableSummariesForJit === undefined) {
+    // default to false
+    ngOptions.enableSummariesForJit = false;
+  }
   return CodeGenerator.create(ngOptions, cliOptions, program, host).codegen();
 }
 
diff --git a/packages/compiler-cli/src/ngc.ts b/packages/compiler-cli/src/ngc.ts
new file mode 100644
index 0000000000..6d21ff851d
--- /dev/null
+++ b/packages/compiler-cli/src/ngc.ts
@@ -0,0 +1,213 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// Must be imported first, because Angular decorators throw on load.
+import 'reflect-metadata';
+
+import {isSyntaxError, syntaxError} from '@angular/compiler';
+import {MetadataBundler, createBundleIndexHost} from '@angular/tsc-wrapped';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+import * as api from './transformers/api';
+import * as ng from './transformers/entry_points';
+
+const TS_EXT = /\.ts$/;
+
+type Diagnostics = ts.Diagnostic[] | api.Diagnostic[];
+
+function isTsDiagnostics(diagnostics: any): diagnostics is ts.Diagnostic[] {
+  return diagnostics && diagnostics[0] && (diagnostics[0].file || diagnostics[0].messageText);
+}
+
+function formatDiagnostics(cwd: string, diags: Diagnostics): string {
+  if (diags && diags.length) {
+    if (isTsDiagnostics(diags)) {
+      return ts.formatDiagnostics(diags, {
+        getCurrentDirectory: () => cwd,
+        getCanonicalFileName: fileName => fileName,
+        getNewLine: () => ts.sys.newLine
+      });
+    } else {
+      return diags
+          .map(d => {
+            let res = api.DiagnosticCategory[d.category];
+            if (d.span) {
+              res +=
+                  ` at ${d.span.start.file.url}(${d.span.start.line + 1},${d.span.start.col + 1})`;
+            }
+            if (d.span && d.span.details) {
+              res += `: ${d.span.details}, ${d.message}\n`;
+            } else {
+              res += `: ${d.message}\n`;
+            }
+            return res;
+          })
+          .join();
+    }
+  } else
+    return '';
+}
+
+function check(cwd: string, ...args: Diagnostics[]) {
+  if (args.some(diags => !!(diags && diags[0]))) {
+    throw syntaxError(args.map(diags => {
+                            if (diags && diags[0]) {
+                              return formatDiagnostics(cwd, diags);
+                            }
+                          })
+                          .filter(message => !!message)
+                          .join(''));
+  }
+}
+
+function syntheticError(message: string): ts.Diagnostic {
+  return {
+    file: null as any as ts.SourceFile,
+    start: 0,
+    length: 0,
+    messageText: message,
+    category: ts.DiagnosticCategory.Error,
+    code: 0
+  };
+}
+
+export function readConfiguration(
+    project: string, basePath: string, checkFunc: (cwd: string, ...args: any[]) => void = check,
+    existingOptions?: ts.CompilerOptions) {
+  // Allow a directory containing tsconfig.json as the project value
+  // Note, TS@next returns an empty array, while earlier versions throw
+  const projectFile =
+      fs.lstatSync(project).isDirectory() ? path.join(project, 'tsconfig.json') : project;
+  let {config, error} = ts.readConfigFile(projectFile, ts.sys.readFile);
+
+  if (error) checkFunc(basePath, [error]);
+  const parseConfigHost = {
+    useCaseSensitiveFileNames: true,
+    fileExists: fs.existsSync,
+    readDirectory: ts.sys.readDirectory,
+    readFile: ts.sys.readFile
+  };
+  const parsed = ts.parseJsonConfigFileContent(config, parseConfigHost, basePath, existingOptions);
+
+  checkFunc(basePath, parsed.errors);
+
+  // Default codegen goes to the current directory
+  // Parsed options are already converted to absolute paths
+  const ngOptions = config.angularCompilerOptions || {};
+  // Ignore the genDir option
+  ngOptions.genDir = basePath;
+
+  return {parsed, ngOptions};
+}
+
+function getProjectDirectory(project: string): string {
+  let isFile: boolean;
+  try {
+    isFile = fs.lstatSync(project).isFile();
+  } catch (e) {
+    // Project doesn't exist. Assume it is a file has an extension. This case happens
+    // when the project file is passed to set basePath but no tsconfig.json file exists.
+    // It is used in tests to ensure that the options can be passed in without there being
+    // an actual config file.
+    isFile = path.extname(project) !== '';
+  }
+
+  // If project refers to a file, the project directory is the file's parent directory
+  // otherwise project is the project directory.
+  return isFile ? path.dirname(project) : project;
+}
+
+export function performCompilation(
+    basePath: string, files: string[], options: ts.CompilerOptions, ngOptions: any,
+    consoleError: (s: string) => void = console.error,
+    checkFunc: (cwd: string, ...args: any[]) => void = check, tsCompilerHost?: ts.CompilerHost) {
+  try {
+    ngOptions.basePath = basePath;
+    ngOptions.genDir = basePath;
+
+    let host = tsCompilerHost || ts.createCompilerHost(options, true);
+    host.realpath = p => p;
+
+    const rootFileNames = files.map(f => path.normalize(f));
+
+    const addGeneratedFileName =
+        (fileName: string) => {
+          if (fileName.startsWith(basePath) && TS_EXT.exec(fileName)) {
+            rootFileNames.push(fileName);
+          }
+        }
+
+    if (ngOptions.flatModuleOutFile && !ngOptions.skipMetadataEmit) {
+      const {host: bundleHost, indexName, errors} =
+          createBundleIndexHost(ngOptions, rootFileNames, host);
+      if (errors) checkFunc(basePath, errors);
+      if (indexName) addGeneratedFileName(indexName);
+      host = bundleHost;
+    }
+
+    const ngHostOptions = {...options, ...ngOptions};
+    const ngHost = ng.createHost({tsHost: host, options: ngHostOptions});
+
+    const ngProgram =
+        ng.createProgram({rootNames: rootFileNames, host: ngHost, options: ngHostOptions});
+
+    // Check parameter diagnostics
+    checkFunc(basePath, ngProgram.getTsOptionDiagnostics(), ngProgram.getNgOptionDiagnostics());
+
+    // Check syntactic diagnostics
+    checkFunc(basePath, ngProgram.getTsSyntacticDiagnostics());
+
+    // Check TypeScript semantic and Angular structure diagnostics
+    checkFunc(
+        basePath, ngProgram.getTsSemanticDiagnostics(), ngProgram.getNgStructuralDiagnostics());
+
+    // Check Angular semantic diagnostics
+    checkFunc(basePath, ngProgram.getNgSemanticDiagnostics());
+
+    ngProgram.emit({
+      emitFlags: api.EmitFlags.Default |
+          ((ngOptions.skipMetadataEmit || ngOptions.flatModuleOutFile) ? 0 : api.EmitFlags.Metadata)
+    });
+  } catch (e) {
+    if (isSyntaxError(e)) {
+      console.error(e.message);
+      consoleError(e.message);
+      return 1;
+    }
+  }
+
+  return 0;
+}
+
+
+export function main(
+    args: string[], consoleError: (s: string) => void = console.error,
+    checkFunc: (cwd: string, ...args: any[]) => void = check): number {
+  try {
+    const parsedArgs = require('minimist')(args);
+    const project = parsedArgs.p || parsedArgs.project || '.';
+
+    const projectDir = fs.lstatSync(project).isFile() ? path.dirname(project) : project;
+
+    // file names in tsconfig are resolved relative to this absolute path
+    const basePath = path.resolve(process.cwd(), projectDir);
+    const {parsed, ngOptions} = readConfiguration(project, basePath, checkFunc);
+    return performCompilation(
+        basePath, parsed.fileNames, parsed.options, ngOptions, consoleError, checkFunc);
+  } catch (e) {
+    consoleError(e.stack);
+    consoleError('Compilation failed');
+    return 2;
+  }
+}
+
+// CLI entry point
+if (require.main === module) {
+  process.exit(main(process.argv.slice(2), s => console.error(s)));
+}
diff --git a/packages/compiler-cli/src/ngtools_api.ts b/packages/compiler-cli/src/ngtools_api.ts
index 9f34dcb8d2..66f7921505 100644
--- a/packages/compiler-cli/src/ngtools_api.ts
+++ b/packages/compiler-cli/src/ngtools_api.ts
@@ -35,6 +35,7 @@ export interface NgTools_InternalApi_NG2_CodeGen_Options {
   i18nFormat?: string;
   i18nFile?: string;
   locale?: string;
+  missingTranslation?: string;
 
   readResource: (fileName: string) => Promise<string>;
 
@@ -78,36 +79,39 @@ class CustomLoaderModuleResolutionHostAdapter extends ModuleResolutionHostAdapte
   readResource(path: string) { return this._readResource(path); }
 }
 
-
 /**
  * @internal
- * @private
  */
 export class NgTools_InternalApi_NG_2 {
   /**
    * @internal
-   * @private
    */
-  static codeGen(options: NgTools_InternalApi_NG2_CodeGen_Options): Promise<void> {
+  static codeGen(options: NgTools_InternalApi_NG2_CodeGen_Options): Promise<any> {
     const hostContext: CompilerHostContext =
         new CustomLoaderModuleResolutionHostAdapter(options.readResource, options.host);
+
     const cliOptions: NgcCliOptions = {
       i18nFormat: options.i18nFormat !,
       i18nFile: options.i18nFile !,
       locale: options.locale !,
+      missingTranslation: options.missingTranslation !,
       basePath: options.basePath
     };
+    const ngOptions = options.angularCompilerOptions;
+    if (ngOptions.enableSummariesForJit === undefined) {
+      // default to false
+      ngOptions.enableSummariesForJit = false;
+    }
 
     // Create the Code Generator.
-    const codeGenerator = CodeGenerator.create(
-        options.angularCompilerOptions, cliOptions, options.program, options.host, hostContext);
+    const codeGenerator =
+        CodeGenerator.create(ngOptions, cliOptions, options.program, options.host, hostContext);
 
     return codeGenerator.codegen();
   }
 
   /**
    * @internal
-   * @private
    */
   static listLazyRoutes(options: NgTools_InternalApi_NG2_ListLazyRoutes_Options):
       NgTools_InternalApi_NG_2_LazyRouteMap {
@@ -137,9 +141,8 @@ export class NgTools_InternalApi_NG_2 {
 
   /**
    * @internal
-   * @private
    */
-  static extractI18n(options: NgTools_InternalApi_NG2_ExtractI18n_Options): Promise<void> {
+  static extractI18n(options: NgTools_InternalApi_NG2_ExtractI18n_Options): Promise<any> {
     const hostContext: CompilerHostContext =
         new CustomLoaderModuleResolutionHostAdapter(options.readResource, options.host);
 
diff --git a/packages/compiler-cli/src/ngtools_impl.ts b/packages/compiler-cli/src/ngtools_impl.ts
index bbb8a72246..c14f35f09a 100644
--- a/packages/compiler-cli/src/ngtools_impl.ts
+++ b/packages/compiler-cli/src/ngtools_impl.ts
@@ -49,11 +49,6 @@ export class RouteDef {
 }
 
 
-/**
- *
- * @returns {LazyRouteMap}
- * @private
- */
 export function listLazyRoutesOfModule(
     entryModule: string, host: AotCompilerHost, reflector: StaticReflector): LazyRouteMap {
   const entryRouteDef = RouteDef.fromString(entryModule);
@@ -111,7 +106,6 @@ function _resolveModule(modulePath: string, containingFile: string, host: AotCom
 
 /**
  * Throw an exception if a route is in a route map, but does not point to the same module.
- * @private
  */
 function _assertRoute(map: LazyRouteMap, route: LazyRoute) {
   const r = route.routeDef.toString();
@@ -124,6 +118,12 @@ function _assertRoute(map: LazyRouteMap, route: LazyRoute) {
   }
 }
 
+export function flatten<T>(list: Array<T|T[]>): T[] {
+  return list.reduce((flat: any[], item: T | T[]): T[] => {
+    const flatItem = Array.isArray(item) ? flatten(item) : item;
+    return (<T[]>flat).concat(flatItem);
+  }, []);
+}
 
 /**
  * Extract all the LazyRoutes from a module. This extracts all `loadChildren` keys from this
@@ -134,12 +134,10 @@ function _extractLazyRoutesFromStaticModule(
     staticSymbol: StaticSymbol, reflector: StaticReflector, host: AotCompilerHost,
     ROUTES: StaticSymbol): LazyRoute[] {
   const moduleMetadata = _getNgModuleMetadata(staticSymbol, reflector);
-  const allRoutes: any =
-      (moduleMetadata.imports || [])
-          .filter(i => 'providers' in i)
-          .reduce((mem: Route[], m: any) => {
-            return mem.concat(_collectRoutes(m.providers || [], reflector, ROUTES));
-          }, _collectRoutes(moduleMetadata.providers || [], reflector, ROUTES));
+  const imports = flatten(moduleMetadata.imports || []);
+  const allRoutes: any = imports.filter(i => 'providers' in i).reduce((mem: Route[], m: any) => {
+    return mem.concat(_collectRoutes(m.providers || [], reflector, ROUTES));
+  }, _collectRoutes(moduleMetadata.providers || [], reflector, ROUTES));
 
   const lazyRoutes: LazyRoute[] =
       _collectLoadChildren(allRoutes).reduce((acc: LazyRoute[], route: string) => {
@@ -149,8 +147,13 @@ function _extractLazyRoutesFromStaticModule(
         return acc;
       }, []);
 
-  const importedSymbols = ((moduleMetadata.imports || []) as any[])
-                              .filter(i => i instanceof StaticSymbol) as StaticSymbol[];
+  const importedSymbols =
+      (imports as any[])
+          .filter(i => i instanceof StaticSymbol || i.ngModule instanceof StaticSymbol)
+          .map(i => {
+            if (i instanceof StaticSymbol) return i;
+            return i.ngModule;
+          }) as StaticSymbol[];
 
   return importedSymbols
       .reduce(
@@ -164,7 +167,6 @@ function _extractLazyRoutesFromStaticModule(
 
 /**
  * Get the NgModule Metadata of a symbol.
- * @private
  */
 function _getNgModuleMetadata(staticSymbol: StaticSymbol, reflector: StaticReflector): NgModule {
   const ngModules = reflector.annotations(staticSymbol).filter((s: any) => s instanceof NgModule);
@@ -195,7 +197,6 @@ function _collectRoutes(
 
 /**
  * Return the loadChildren values of a list of Route.
- * @private
  */
 function _collectLoadChildren(routes: Route[]): string[] {
   return routes.reduce((m, r) => {
diff --git a/packages/compiler-cli/src/transformers/api.ts b/packages/compiler-cli/src/transformers/api.ts
new file mode 100644
index 0000000000..ea0919c3b5
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/api.ts
@@ -0,0 +1,227 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ParseSourceSpan} from '@angular/compiler';
+import * as ts from 'typescript';
+
+export enum DiagnosticCategory {
+  Warning = 0,
+  Error = 1,
+  Message = 2,
+}
+
+export interface Diagnostic {
+  message: string;
+  span?: ParseSourceSpan;
+  category: DiagnosticCategory;
+}
+
+export interface CompilerOptions extends ts.CompilerOptions {
+  // Absolute path to a directory where generated file structure is written.
+  // If unspecified, generated files will be written alongside sources.
+  genDir?: string;
+
+  // Path to the directory containing the tsconfig.json file.
+  basePath?: string;
+
+  // Don't produce .metadata.json files (they don't work for bundled emit with --out)
+  skipMetadataEmit?: boolean;
+
+  // Produce an error if the metadata written for a class would produce an error if used.
+  strictMetadataEmit?: boolean;
+
+  // Don't produce .ngfactory.ts or .ngstyle.ts files
+  skipTemplateCodegen?: boolean;
+
+  // Whether to generate a flat module index of the given name and the corresponding
+  // flat module metadata. This option is intended to be used when creating flat
+  // modules similar to how `@angular/core` and `@angular/common` are packaged.
+  // When this option is used the `package.json` for the library should refered to the
+  // generated flat module index instead of the library index file. When using this
+  // option only one .metadata.json file is produced that contains all the metadata
+  // necessary for symbols exported from the library index.
+  // In the generated .ngfactory.ts files flat module index is used to import symbols
+  // includes both the public API from the library index as well as shrowded internal
+  // symbols.
+  // By default the .ts file supplied in the `files` files field is assumed to be
+  // library index. If more than one is specified, uses `libraryIndex` to select the
+  // file to use. If more than on .ts file is supplied and no `libraryIndex` is supplied
+  // an error is produced.
+  // A flat module index .d.ts and .js will be created with the given `flatModuleOutFile`
+  // name in the same location as the library index .d.ts file is emitted.
+  // For example, if a library uses `public_api.ts` file as the library index of the
+  // module the `tsconfig.json` `files` field would be `["public_api.ts"]`. The
+  // `flatModuleOutFile` options could then be set to, for example `"index.js"`, which
+  // produces `index.d.ts` and  `index.metadata.json` files. The library's
+  // `package.json`'s `module` field would be `"index.js"` and the `typings` field would
+  // be `"index.d.ts"`.
+  flatModuleOutFile?: string;
+
+  // Preferred module id to use for importing flat module. References generated by `ngc`
+  // will use this module name when importing symbols from the flat module. This is only
+  // meaningful when `flatModuleOutFile` is also supplied. It is otherwise ignored.
+  flatModuleId?: string;
+
+  // Whether to generate code for library code.
+  // If true, produce .ngfactory.ts and .ngstyle.ts files for .d.ts inputs.
+  // Default is true.
+  generateCodeForLibraries?: boolean;
+
+  // Insert JSDoc type annotations needed by Closure Compiler
+  annotateForClosureCompiler?: boolean;
+
+  // Modify how angular annotations are emitted to improve tree-shaking.
+  // Default is static fields.
+  // decorators: Leave the Decorators in-place. This makes compilation faster.
+  //             TypeScript will emit calls to the __decorate helper.
+  //             `--emitDecoratorMetadata` can be used for runtime reflection.
+  //             However, the resulting code will not properly tree-shake.
+  // static fields: Replace decorators with a static field in the class.
+  //                Allows advanced tree-shakers like Closure Compiler to remove
+  //                unused classes.
+  annotationsAs?: 'decorators'|'static fields';
+
+  // Print extra information while running the compiler
+  trace?: boolean;
+
+  // Whether to enable support for <template> and the template attribute (true by default)
+  enableLegacyTemplate?: boolean;
+}
+
+export interface ModuleFilenameResolver {
+  /**
+   * Converts a module name that is used in an `import` to a file path.
+   * I.e. `path/to/containingFile.ts` containing `import {...} from 'module-name'`.
+   */
+  moduleNameToFileName(moduleName: string, containingFile?: string): string|null;
+
+  /**
+   * Converts a file path to a module name that can be used as an `import.
+   * I.e. `path/to/importedFile.ts` should be imported by `path/to/containingFile.ts`.
+   *
+   * See ImportResolver.
+   */
+  fileNameToModuleName(importedFilePath: string, containingFilePath: string): string|null;
+
+  getNgCanonicalFileName(fileName: string): string;
+
+  assumeFileExists(fileName: string): void;
+}
+
+export interface CompilerHost extends ts.CompilerHost, ModuleFilenameResolver {
+  /**
+   * Load a referenced resource either statically or asynchronously. If the host returns a
+   * `Promise<string>` it is assumed the user of the corresponding `Program` will call
+   * `loadNgStructureAsync()`. Returing  `Promise<string>` outside `loadNgStructureAsync()` will
+   * cause a diagnostics diagnostic error or an exception to be thrown.
+   *
+   * If `loadResource()` is not provided, `readFile()` will be called to load the resource.
+   */
+  readResource?(fileName: string): Promise<string>|string;
+}
+
+export enum EmitFlags {
+  DTS = 1 << 0,
+  JS = 1 << 1,
+  Metadata = 1 << 2,
+  I18nBundle = 1 << 3,
+  Summary = 1 << 4,
+
+  Default = DTS | JS,
+  All = DTS | JS | Metadata | I18nBundle | Summary
+}
+
+// TODO(chuckj): Support CustomTransformers once we require TypeScript 2.3+
+// export interface CustomTransformers {
+//   beforeTs?: ts.TransformerFactory<ts.SourceFile>[];
+//   afterTs?: ts.TransformerFactory<ts.SourceFile>[];
+// }
+
+export interface Program {
+  /**
+   * Retrieve the TypeScript program used to produce semantic diagnostics and emit the sources.
+   *
+   * Angular structural information is required to produce the program.
+   */
+  getTsProgram(): ts.Program;
+
+  /**
+   * Retreive options diagnostics for the TypeScript options used to create the program. This is
+   * faster than calling `getTsProgram().getOptionsDiagnostics()` since it does not need to
+   * collect Angular structural information to produce the errors.
+   */
+  getTsOptionDiagnostics(cancellationToken?: ts.CancellationToken): ts.Diagnostic[];
+
+  /**
+   * Retrieve options diagnostics for the Angular options used to create the program.
+   */
+  getNgOptionDiagnostics(cancellationToken?: ts.CancellationToken): Diagnostic[];
+
+  /**
+   * Retrive the syntax diagnostics from TypeScript. This is faster than calling
+   * `getTsProgram().getSyntacticDiagnostics()` since it does not need to collect Angular structural
+   * information to produce the errors.
+   */
+  getTsSyntacticDiagnostics(sourceFile?: ts.SourceFile, cancellationToken?: ts.CancellationToken):
+      ts.Diagnostic[];
+
+  /**
+   * Retrieve the diagnostics for the structure of an Angular application is correctly formed.
+   * This includes validating Angular annotations and the syntax of referenced and imbedded HTML
+   * and CSS.
+   *
+   * Note it is important to displaying TypeScript semantic diagnostics along with Angular
+   * structural diagnostics as an error in the program strucutre might cause errors detected in
+   * semantic analysis and a semantic error might cause errors in specifying the program structure.
+   *
+   * Angular structural information is required to produce these diagnostics.
+   */
+  getNgStructuralDiagnostics(cancellationToken?: ts.CancellationToken): Diagnostic[];
+
+  /**
+   * Retreive the semantic diagnostics from TypeScript. This is equivilent to calling
+   * `getTsProgram().getSemanticDiagnostics()` directly and is included for completeness.
+   */
+  getTsSemanticDiagnostics(sourceFile?: ts.SourceFile, cancellationToken?: ts.CancellationToken):
+      ts.Diagnostic[];
+
+  /**
+   * Retrieve the Angular semantic diagnostics.
+   *
+   * Angular structural information is required to produce these diagnostics.
+   */
+  getNgSemanticDiagnostics(fileName?: string, cancellationToken?: ts.CancellationToken):
+      Diagnostic[];
+
+  /**
+   * Load Angular structural information asynchronously. If this method is not called then the
+   * Angular structural information, including referenced HTML and CSS files, are loaded
+   * synchronously. If the supplied Angular compiler host returns a promise from `loadResource()`
+   * will produce a diagnostic error message or, `getTsProgram()` or `emit` to throw.
+   */
+  loadNgStructureAsync(): Promise<void>;
+
+  /**
+   * Retrieve the lazy route references in the program.
+   *
+   * Angular structural information is required to produce these routes.
+   */
+  getLazyRoutes(cancellationToken?: ts.CancellationToken): {[route: string]: string};
+
+  /**
+   * Emit the files requested by emitFlags implied by the program.
+   *
+   * Angular structural information is required to emit files.
+   */
+  emit({// transformers,
+        emitFlags, cancellationToken}: {
+    emitFlags: EmitFlags,
+    // transformers?: CustomTransformers, // See TODO above
+    cancellationToken?: ts.CancellationToken,
+  }): void;
+}
diff --git a/packages/compiler-cli/src/transformers/entry_points.ts b/packages/compiler-cli/src/transformers/entry_points.ts
new file mode 100644
index 0000000000..b55b4c81ad
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/entry_points.ts
@@ -0,0 +1,24 @@
+import * as ts from 'typescript';
+
+import {CompilerHost, CompilerOptions, Program} from './api';
+import {createModuleFilenameResolver} from './module_filename_resolver';
+export {createProgram} from './program';
+export {createModuleFilenameResolver};
+
+export function createHost({tsHost, options}: {tsHost: ts.CompilerHost, options: CompilerOptions}):
+    CompilerHost {
+  const resolver = createModuleFilenameResolver(tsHost, options);
+
+  const host = Object.create(tsHost);
+
+  host.moduleNameToFileName = resolver.moduleNameToFileName.bind(resolver);
+  host.fileNameToModuleName = resolver.fileNameToModuleName.bind(resolver);
+  host.getNgCanonicalFileName = resolver.getNgCanonicalFileName.bind(resolver);
+  host.assumeFileExists = resolver.assumeFileExists.bind(resolver);
+
+  // Make sure we do not `host.realpath()` from TS as we do not want to resolve symlinks.
+  // https://github.com/Microsoft/TypeScript/issues/9552
+  host.realpath = (fileName: string) => fileName;
+
+  return host;
+}
diff --git a/packages/compiler-cli/src/transformers/module_filename_resolver.ts b/packages/compiler-cli/src/transformers/module_filename_resolver.ts
new file mode 100644
index 0000000000..9c224d85de
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/module_filename_resolver.ts
@@ -0,0 +1,285 @@
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {ModuleFilenameResolver} from './api';
+import {CompilerOptions} from './api';
+
+const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
+const DTS = /\.d\.ts$/;
+const NODE_MODULES = '/node_modules/';
+const IS_GENERATED = /\.(ngfactory|ngstyle|ngsummary)$/;
+const SHALLOW_IMPORT = /^((\w|-)+|(@(\w|-)+(\/(\w|-)+)+))$/;
+
+export function createModuleFilenameResolver(
+    tsHost: ts.ModuleResolutionHost, options: CompilerOptions): ModuleFilenameResolver {
+  const host = createModuleFilenameResolverHost(tsHost);
+
+  return options.rootDirs && options.rootDirs.length > 0 ?
+      new MultipleRootDirModuleFilenameResolver(host, options) :
+      new SingleRootDirModuleFilenameResolver(host, options);
+}
+
+class SingleRootDirModuleFilenameResolver implements ModuleFilenameResolver {
+  private isGenDirChildOfRootDir: boolean;
+  private basePath: string;
+  private genDir: string;
+  private moduleFileNames = new Map<string, string|null>();
+
+  constructor(private host: ModuleFilenameResolutionHost, private options: CompilerOptions) {
+    // normalize the path so that it never ends with '/'.
+    this.basePath = path.normalize(path.join(options.basePath !, '.')).replace(/\\/g, '/');
+    this.genDir = path.normalize(path.join(options.genDir !, '.')).replace(/\\/g, '/');
+
+    const genPath: string = path.relative(this.basePath, this.genDir);
+    this.isGenDirChildOfRootDir = genPath === '' || !genPath.startsWith('..');
+  }
+
+  moduleNameToFileName(m: string, containingFile: string): string|null {
+    const key = m + ':' + (containingFile || '');
+    let result: string|null = this.moduleFileNames.get(key) || null;
+    if (!result) {
+      if (!containingFile) {
+        if (m.indexOf('.') === 0) {
+          throw new Error('Resolution of relative paths requires a containing file.');
+        }
+        // Any containing file gives the same result for absolute imports
+        containingFile = this.getNgCanonicalFileName(path.join(this.basePath, 'index.ts'));
+      }
+      m = m.replace(EXT, '');
+      const resolved =
+          ts.resolveModuleName(m, containingFile.replace(/\\/g, '/'), this.options, this.host)
+              .resolvedModule;
+      result = resolved ? this.getNgCanonicalFileName(resolved.resolvedFileName) : null;
+      this.moduleFileNames.set(key, result);
+    }
+    return result;
+  }
+
+  /**
+   * We want a moduleId that will appear in import statements in the generated code.
+   * These need to be in a form that system.js can load, so absolute file paths don't work.
+   *
+   * The `containingFile` is always in the `genDir`, where as the `importedFile` can be in
+   * `genDir`, `node_module` or `basePath`.  The `importedFile` is either a generated file or
+   * existing file.
+   *
+   *               | genDir   | node_module |  rootDir
+   * --------------+----------+-------------+----------
+   * generated     | relative |   relative  |   n/a
+   * existing file |   n/a    |   absolute  |  relative(*)
+   *
+   * NOTE: (*) the relative path is computed depending on `isGenDirChildOfRootDir`.
+   */
+  fileNameToModuleName(importedFile: string, containingFile: string): string {
+    // If a file does not yet exist (because we compile it later), we still need to
+    // assume it exists it so that the `resolve` method works!
+    if (!this.host.fileExists(importedFile)) {
+      this.host.assumeFileExists(importedFile);
+    }
+
+    containingFile = this.rewriteGenDirPath(containingFile);
+    const containingDir = path.dirname(containingFile);
+    // drop extension
+    importedFile = importedFile.replace(EXT, '');
+
+    const nodeModulesIndex = importedFile.indexOf(NODE_MODULES);
+    const importModule = nodeModulesIndex === -1 ?
+        null :
+        importedFile.substring(nodeModulesIndex + NODE_MODULES.length);
+    const isGeneratedFile = IS_GENERATED.test(importedFile);
+
+    if (isGeneratedFile) {
+      // rewrite to genDir path
+      if (importModule) {
+        // it is generated, therefore we do a relative path to the factory
+        return this.dotRelative(containingDir, this.genDir + NODE_MODULES + importModule);
+      } else {
+        // assume that import is also in `genDir`
+        importedFile = this.rewriteGenDirPath(importedFile);
+        return this.dotRelative(containingDir, importedFile);
+      }
+    } else {
+      // user code import
+      if (importModule) {
+        return importModule;
+      } else {
+        if (!this.isGenDirChildOfRootDir) {
+          // assume that they are on top of each other.
+          importedFile = importedFile.replace(this.basePath, this.genDir);
+        }
+        if (SHALLOW_IMPORT.test(importedFile)) {
+          return importedFile;
+        }
+        return this.dotRelative(containingDir, importedFile);
+      }
+    }
+  }
+
+  // We use absolute paths on disk as canonical.
+  getNgCanonicalFileName(fileName: string): string { return fileName; }
+
+  assumeFileExists(fileName: string) { this.host.assumeFileExists(fileName); }
+
+  private dotRelative(from: string, to: string): string {
+    const rPath: string = path.relative(from, to).replace(/\\/g, '/');
+    return rPath.startsWith('.') ? rPath : './' + rPath;
+  }
+
+  /**
+   * Moves the path into `genDir` folder while preserving the `node_modules` directory.
+   */
+  private rewriteGenDirPath(filepath: string) {
+    const nodeModulesIndex = filepath.indexOf(NODE_MODULES);
+    if (nodeModulesIndex !== -1) {
+      // If we are in node_module, transplant them into `genDir`.
+      return path.join(this.genDir, filepath.substring(nodeModulesIndex));
+    } else {
+      // pretend that containing file is on top of the `genDir` to normalize the paths.
+      // we apply the `genDir` => `rootDir` delta through `rootDirPrefix` later.
+      return filepath.replace(this.basePath, this.genDir);
+    }
+  }
+}
+
+/**
+ * This version of the AotCompilerHost expects that the program will be compiled
+ * and executed with a "path mapped" directory structure, where generated files
+ * are in a parallel tree with the sources, and imported using a `./` relative
+ * import. This requires using TS `rootDirs` option and also teaching the module
+ * loader what to do.
+ */
+class MultipleRootDirModuleFilenameResolver implements ModuleFilenameResolver {
+  private basePath: string;
+
+  constructor(private host: ModuleFilenameResolutionHost, private options: CompilerOptions) {
+    // normalize the path so that it never ends with '/'.
+    this.basePath = path.normalize(path.join(options.basePath !, '.')).replace(/\\/g, '/');
+  }
+
+  getNgCanonicalFileName(fileName: string): string {
+    if (!fileName) return fileName;
+    // NB: the rootDirs should have been sorted longest-first
+    for (const dir of this.options.rootDirs || []) {
+      if (fileName.indexOf(dir) === 0) {
+        fileName = fileName.substring(dir.length);
+      }
+    }
+    return fileName;
+  }
+
+  assumeFileExists(fileName: string) { this.host.assumeFileExists(fileName); }
+
+  moduleNameToFileName(m: string, containingFile: string): string|null {
+    if (!containingFile) {
+      if (m.indexOf('.') === 0) {
+        throw new Error('Resolution of relative paths requires a containing file.');
+      }
+      // Any containing file gives the same result for absolute imports
+      containingFile = this.getNgCanonicalFileName(path.join(this.basePath, 'index.ts'));
+    }
+    for (const root of this.options.rootDirs || ['']) {
+      const rootedContainingFile = path.join(root, containingFile);
+      const resolved =
+          ts.resolveModuleName(m, rootedContainingFile, this.options, this.host).resolvedModule;
+      if (resolved) {
+        if (this.options.traceResolution) {
+          console.error('resolve', m, containingFile, '=>', resolved.resolvedFileName);
+        }
+        return this.getNgCanonicalFileName(resolved.resolvedFileName);
+      }
+    }
+    return null;
+  }
+
+  /**
+   * We want a moduleId that will appear in import statements in the generated code.
+   * These need to be in a form that system.js can load, so absolute file paths don't work.
+   * Relativize the paths by checking candidate prefixes of the absolute path, to see if
+   * they are resolvable by the moduleResolution strategy from the CompilerHost.
+   */
+  fileNameToModuleName(importedFile: string, containingFile: string): string {
+    if (this.options.traceResolution) {
+      console.error(
+          'getImportPath from containingFile', containingFile, 'to importedFile', importedFile);
+    }
+
+    // If a file does not yet exist (because we compile it later), we still need to
+    // assume it exists so that the `resolve` method works!
+    if (!this.host.fileExists(importedFile)) {
+      if (this.options.rootDirs && this.options.rootDirs.length > 0) {
+        this.host.assumeFileExists(path.join(this.options.rootDirs[0], importedFile));
+      } else {
+        this.host.assumeFileExists(importedFile);
+      }
+    }
+
+    const resolvable = (candidate: string) => {
+      const resolved = this.moduleNameToFileName(candidate, importedFile);
+      return resolved && resolved.replace(EXT, '') === importedFile.replace(EXT, '');
+    };
+
+    const importModuleName = importedFile.replace(EXT, '');
+    const parts = importModuleName.split(path.sep).filter(p => !!p);
+    let foundRelativeImport: string|undefined;
+
+    for (let index = parts.length - 1; index >= 0; index--) {
+      let candidate = parts.slice(index, parts.length).join(path.sep);
+      if (resolvable(candidate)) {
+        return candidate;
+      }
+      candidate = '.' + path.sep + candidate;
+      if (resolvable(candidate)) {
+        foundRelativeImport = candidate;
+      }
+    }
+
+    if (foundRelativeImport) return foundRelativeImport;
+
+    // Try a relative import
+    const candidate = path.relative(path.dirname(containingFile), importModuleName);
+    if (resolvable(candidate)) {
+      return candidate;
+    }
+
+    throw new Error(
+        `Unable to find any resolvable import for ${importedFile} relative to ${containingFile}`);
+  }
+}
+
+interface ModuleFilenameResolutionHost extends ts.ModuleResolutionHost {
+  assumeFileExists(fileName: string): void;
+}
+
+function createModuleFilenameResolverHost(host: ts.ModuleResolutionHost):
+    ModuleFilenameResolutionHost {
+  const assumedExists = new Set<string>();
+  const resolveModuleNameHost = Object.create(host);
+  // When calling ts.resolveModuleName, additional allow checks for .d.ts files to be done based on
+  // checks for .ngsummary.json files, so that our codegen depends on fewer inputs and requires
+  // to be called less often.
+  // This is needed as we use ts.resolveModuleName in reflector_host and it should be able to
+  // resolve summary file names.
+  resolveModuleNameHost.fileExists = (fileName: string): boolean => {
+    if (assumedExists.has(fileName)) {
+      return true;
+    }
+
+    if (host.fileExists(fileName)) {
+      return true;
+    }
+
+    if (DTS.test(fileName)) {
+      const base = fileName.substring(0, fileName.length - 5);
+      return host.fileExists(base + '.ngsummary.json');
+    }
+
+    return false;
+  };
+
+  resolveModuleNameHost.assumeFileExists = (fileName: string) => assumedExists.add(fileName);
+  // Make sure we do not `host.realpath()` from TS as we do not want to resolve symlinks.
+  // https://github.com/Microsoft/TypeScript/issues/9552
+  resolveModuleNameHost.realpath = (fileName: string) => fileName;
+
+  return resolveModuleNameHost;
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/transformers/node_emitter.ts b/packages/compiler-cli/src/transformers/node_emitter.ts
new file mode 100644
index 0000000000..f5b81ec6c0
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/node_emitter.ts
@@ -0,0 +1,468 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {AssertNotNull, BinaryOperator, BinaryOperatorExpr, BuiltinMethod, BuiltinVar, CastExpr, ClassStmt, CommaExpr, CommentStmt, CompileIdentifierMetadata, ConditionalExpr, DeclareFunctionStmt, DeclareVarStmt, ExpressionStatement, ExpressionVisitor, ExternalExpr, ExternalReference, FunctionExpr, IfStmt, InstantiateExpr, InvokeFunctionExpr, InvokeMethodExpr, LiteralArrayExpr, LiteralExpr, LiteralMapExpr, NotExpr, ParseSourceSpan, ReadKeyExpr, ReadPropExpr, ReadVarExpr, ReturnStatement, Statement, StatementVisitor, StaticSymbol, StmtModifier, ThrowStmt, TryCatchStmt, WriteKeyExpr, WritePropExpr, WriteVarExpr} from '@angular/compiler';
+import * as ts from 'typescript';
+
+export interface Node { sourceSpan: ParseSourceSpan|null; }
+
+const METHOD_THIS_NAME = 'this';
+const CATCH_ERROR_NAME = 'error';
+const CATCH_STACK_NAME = 'stack';
+
+export class TypeScriptNodeEmitter {
+  updateSourceFile(sourceFile: ts.SourceFile, stmts: Statement[], preamble?: string):
+      [ts.SourceFile, Map<ts.Node, Node>] {
+    const converter = new _NodeEmitterVisitor();
+    const statements =
+        stmts.map(stmt => stmt.visitStatement(converter, null)).filter(stmt => stmt != null);
+    const newSourceFile = ts.updateSourceFileNode(
+        sourceFile, [...converter.getReexports(), ...converter.getImports(), ...statements]);
+    if (preamble) {
+      if (preamble.startsWith('/*') && preamble.endsWith('*/')) {
+        preamble = preamble.substr(2, preamble.length - 4);
+      }
+      if (!statements.length) {
+        statements.push(ts.createEmptyStatement());
+      }
+      statements[0] = ts.setSyntheticLeadingComments(
+          statements[0],
+          [{kind: ts.SyntaxKind.MultiLineCommentTrivia, text: preamble, pos: -1, end: -1}])
+    }
+    return [newSourceFile, converter.getNodeMap()];
+  }
+}
+
+// A recorded node is a subtype of the node that is marked as being recoreded. This is used
+// to ensure that NodeEmitterVisitor.record has been called on all nodes returned by the
+// NodeEmitterVisitor
+type RecordedNode<T extends ts.Node = ts.Node> = (T & { __recorded: any; }) | null;
+
+function createLiteral(value: any) {
+  if (value === null) {
+    return ts.createNull();
+  } else if (value === undefined) {
+    return ts.createIdentifier('undefined');
+  } else {
+    return ts.createLiteral(value);
+  }
+}
+
+/**
+ * Visits an output ast and produces the corresponding TypeScript synthetic nodes.
+ */
+class _NodeEmitterVisitor implements StatementVisitor, ExpressionVisitor {
+  private _nodeMap = new Map<ts.Node, Node>();
+  private _importsWithPrefixes = new Map<string, string>();
+  private _reexports = new Map<string, {name: string, as: string}[]>();
+
+  getReexports(): ts.Statement[] {
+    return Array.from(this._reexports.entries())
+        .map(
+            ([exportedFilePath, reexports]) => ts.createExportDeclaration(
+                /* decorators */ undefined,
+                /* modifiers */ undefined, ts.createNamedExports(reexports.map(
+                                               ({name, as}) => ts.createExportSpecifier(name, as))),
+                /* moduleSpecifier */ createLiteral(exportedFilePath)));
+  }
+
+  getImports(): ts.Statement[] {
+    return Array.from(this._importsWithPrefixes.entries())
+        .map(
+            ([namespace, prefix]) => ts.createImportDeclaration(
+                /* decorators */ undefined,
+                /* modifiers */ undefined,
+                /* importClause */ ts.createImportClause(
+                    /* name */<ts.Identifier>(undefined as any),
+                    ts.createNamespaceImport(ts.createIdentifier(prefix))),
+                /* moduleSpecifier */ createLiteral(namespace)));
+  }
+
+  getNodeMap() { return this._nodeMap; }
+
+  private record<T extends ts.Node>(ngNode: Node, tsNode: T|null): RecordedNode<T> {
+    if (tsNode && !this._nodeMap.has(tsNode)) {
+      this._nodeMap.set(tsNode, ngNode);
+      ts.forEachChild(tsNode, child => this.record(ngNode, tsNode));
+    }
+    return tsNode as RecordedNode<T>;
+  }
+
+  private getModifiers(stmt: Statement) {
+    let modifiers: ts.Modifier[] = [];
+    if (stmt.hasModifier(StmtModifier.Exported)) {
+      modifiers.push(ts.createToken(ts.SyntaxKind.ExportKeyword));
+    }
+    return modifiers;
+  }
+
+  // StatementVisitor
+  visitDeclareVarStmt(stmt: DeclareVarStmt) {
+    if (stmt.hasModifier(StmtModifier.Exported) && stmt.value instanceof ExternalExpr &&
+        !stmt.type) {
+      // check for a reexport
+      const {name, moduleName} = stmt.value.value;
+      if (moduleName) {
+        let reexports = this._reexports.get(moduleName);
+        if (!reexports) {
+          reexports = [];
+          this._reexports.set(moduleName, reexports);
+        }
+        reexports.push({name: name !, as: stmt.name});
+        return null;
+      }
+    }
+
+    return this.record(
+        stmt, ts.createVariableStatement(
+                  this.getModifiers(stmt),
+                  ts.createVariableDeclarationList([ts.createVariableDeclaration(
+                      ts.createIdentifier(stmt.name),
+                      /* type */ undefined,
+                      (stmt.value && stmt.value.visitExpression(this, null)) || undefined)])));
+  }
+
+  visitDeclareFunctionStmt(stmt: DeclareFunctionStmt, context: any) {
+    return this.record(
+        stmt, ts.createFunctionDeclaration(
+                  /* decorators */ undefined, this.getModifiers(stmt),
+                  /* astrictToken */ undefined, stmt.name, /* typeParameters */ undefined,
+                  stmt.params.map(
+                      p => ts.createParameter(
+                          /* decorators */ undefined, /* modifiers */ undefined,
+                          /* dotDotDotToken */ undefined, p.name)),
+                  /* type */ undefined, this._visitStatements(stmt.statements)));
+  }
+
+  visitExpressionStmt(stmt: ExpressionStatement) {
+    return this.record(stmt, ts.createStatement(stmt.expr.visitExpression(this, null)));
+  }
+
+  visitReturnStmt(stmt: ReturnStatement) {
+    return this.record(
+        stmt, ts.createReturn(stmt.value ? stmt.value.visitExpression(this, null) : undefined));
+  }
+
+  visitDeclareClassStmt(stmt: ClassStmt) {
+    const modifiers = this.getModifiers(stmt);
+    const fields = stmt.fields.map(
+        field => ts.createProperty(
+            /* decorators */ undefined, /* modifiers */ undefined, field.name,
+            /* questionToken */ undefined,
+            /* type */ undefined, ts.createNull()));
+    const getters = stmt.getters.map(
+        getter => ts.createGetAccessor(
+            /* decorators */ undefined, /* modifiers */ undefined, getter.name, /* parameters */[],
+            /* type */ undefined, this._visitStatements(getter.body)));
+
+    const constructor =
+        (stmt.constructorMethod && [ts.createConstructor(
+                                       /* decorators */ undefined,
+                                       /* modifiers */ undefined,
+                                       /* parameters */ stmt.constructorMethod.params.map(
+                                           p => ts.createParameter(
+                                               /* decorators */ undefined,
+                                               /* modifiers */ undefined,
+                                               /* dotDotDotToken */ undefined, p.name)),
+                                       this._visitStatements(stmt.constructorMethod.body))]) ||
+        [];
+
+    // TODO {chuckj}: Determine what should be done for a method with a null name.
+    const methods = stmt.methods.filter(method => method.name)
+                        .map(
+                            method => ts.createMethodDeclaration(
+                                /* decorators */ undefined, /* modifiers */ undefined,
+                                /* astriskToken */ undefined, method.name !/* guarded by filter */,
+                                /* questionToken */ undefined, /* typeParameters */ undefined,
+                                method.params.map(
+                                    p => ts.createParameter(
+                                        /* decorators */ undefined, /* modifiers */ undefined,
+                                        /* dotDotDotToken */ undefined, p.name)),
+                                /* type */ undefined, this._visitStatements(method.body)));
+    return this.record(
+        stmt, ts.createClassDeclaration(
+                  /* decorators */ undefined, modifiers, stmt.name, /* typeParameters*/ undefined,
+                  stmt.parent && [ts.createHeritageClause(
+                                     ts.SyntaxKind.ExtendsKeyword,
+                                     [stmt.parent.visitExpression(this, null)])] ||
+                      [],
+                  [...fields, ...getters, ...constructor, ...methods]));
+  }
+
+  visitIfStmt(stmt: IfStmt) {
+    return this.record(
+        stmt,
+        ts.createIf(
+            stmt.condition.visitExpression(this, null), this._visitStatements(stmt.trueCase),
+            stmt.falseCase && stmt.falseCase.length && this._visitStatements(stmt.falseCase) ||
+                undefined));
+  }
+
+  visitTryCatchStmt(stmt: TryCatchStmt): RecordedNode<ts.TryStatement> {
+    return this.record(
+        stmt, ts.createTry(
+                  this._visitStatements(stmt.bodyStmts),
+                  ts.createCatchClause(
+                      CATCH_ERROR_NAME, this._visitStatementsPrefix(
+                                            [ts.createVariableStatement(
+                                                /* modifiers */ undefined,
+                                                [ts.createVariableDeclaration(
+                                                    CATCH_STACK_NAME, /* type */ undefined,
+                                                    ts.createPropertyAccess(
+                                                        ts.createIdentifier(CATCH_ERROR_NAME),
+                                                        ts.createIdentifier(CATCH_STACK_NAME)))])],
+                                            stmt.catchStmts)),
+                  /* finallyBlock */ undefined));
+  }
+
+  visitThrowStmt(stmt: ThrowStmt) {
+    return this.record(stmt, ts.createThrow(stmt.error.visitExpression(this, null)));
+  }
+
+  visitCommentStmt(stmt: CommentStmt) { return null; }
+
+  // ExpressionVisitor
+  visitReadVarExpr(expr: ReadVarExpr) {
+    switch (expr.builtin) {
+      case BuiltinVar.This:
+        return this.record(expr, ts.createIdentifier(METHOD_THIS_NAME));
+      case BuiltinVar.CatchError:
+        return this.record(expr, ts.createIdentifier(CATCH_ERROR_NAME));
+      case BuiltinVar.CatchStack:
+        return this.record(expr, ts.createIdentifier(CATCH_STACK_NAME));
+      case BuiltinVar.Super:
+        return this.record(expr, ts.createSuper());
+    }
+    if (expr.name) {
+      return this.record(expr, ts.createIdentifier(expr.name));
+    }
+    throw Error(`Unexpected ReadVarExpr form`);
+  }
+
+  visitWriteVarExpr(expr: WriteVarExpr): RecordedNode<ts.BinaryExpression> {
+    return this.record(
+        expr, ts.createAssignment(
+                  ts.createIdentifier(expr.name), expr.value.visitExpression(this, null)));
+  }
+
+  visitWriteKeyExpr(expr: WriteKeyExpr): RecordedNode<ts.BinaryExpression> {
+    return this.record(
+        expr,
+        ts.createAssignment(
+            ts.createElementAccess(
+                expr.receiver.visitExpression(this, null), expr.index.visitExpression(this, null)),
+            expr.value.visitExpression(this, null)));
+  }
+
+  visitWritePropExpr(expr: WritePropExpr): RecordedNode<ts.BinaryExpression> {
+    return this.record(
+        expr, ts.createAssignment(
+                  ts.createPropertyAccess(expr.receiver.visitExpression(this, null), expr.name),
+                  expr.value.visitExpression(this, null)));
+  }
+
+  visitInvokeMethodExpr(expr: InvokeMethodExpr): RecordedNode<ts.CallExpression> {
+    const methodName = getMethodName(expr);
+    return this.record(
+        expr,
+        ts.createCall(
+            ts.createPropertyAccess(expr.receiver.visitExpression(this, null), methodName),
+            /* typeArguments */ undefined, expr.args.map(arg => arg.visitExpression(this, null))));
+  }
+
+  visitInvokeFunctionExpr(expr: InvokeFunctionExpr): RecordedNode<ts.CallExpression> {
+    return this.record(
+        expr, ts.createCall(
+                  expr.fn.visitExpression(this, null), /* typeArguments */ undefined,
+                  expr.args.map(arg => arg.visitExpression(this, null))))
+  }
+
+  visitInstantiateExpr(expr: InstantiateExpr): RecordedNode<ts.NewExpression> {
+    return this.record(
+        expr, ts.createNew(
+                  expr.classExpr.visitExpression(this, null), /* typeArguments */ undefined,
+                  expr.args.map(arg => arg.visitExpression(this, null))));
+  }
+
+  visitLiteralExpr(expr: LiteralExpr) { return this.record(expr, createLiteral(expr.value)); }
+
+  visitExternalExpr(expr: ExternalExpr) {
+    return this.record(expr, this._visitIdentifier(expr.value));
+  }
+
+  visitConditionalExpr(expr: ConditionalExpr): RecordedNode<ts.ConditionalExpression> {
+    // TODO {chuckj}: Review use of ! on flaseCase. Should it be non-nullable?
+    return this.record(
+        expr,
+        ts.createConditional(
+            expr.condition.visitExpression(this, null), expr.trueCase.visitExpression(this, null),
+            expr.falseCase !.visitExpression(this, null)));
+    ;
+  }
+
+  visitNotExpr(expr: NotExpr): RecordedNode<ts.PrefixUnaryExpression> {
+    return this.record(
+        expr, ts.createPrefix(
+                  ts.SyntaxKind.ExclamationToken, expr.condition.visitExpression(this, null)));
+  }
+
+  visitAssertNotNullExpr(expr: AssertNotNull): RecordedNode<ts.Expression> {
+    return expr.condition.visitExpression(this, null);
+  }
+
+  visitCastExpr(expr: CastExpr): RecordedNode<ts.Expression> {
+    return expr.value.visitExpression(this, null);
+  }
+
+  visitFunctionExpr(expr: FunctionExpr) {
+    return this.record(
+        expr, ts.createFunctionExpression(
+                  /* modifiers */ undefined, /* astriskToken */ undefined, /* name */ undefined,
+                  /* typeParameters */ undefined,
+                  expr.params.map(
+                      p => ts.createParameter(
+                          /* decorators */ undefined, /* modifiers */ undefined,
+                          /* dotDotDotToken */ undefined, p.name)),
+                  /* type */ undefined, this._visitStatements(expr.statements)));
+  }
+
+  visitBinaryOperatorExpr(expr: BinaryOperatorExpr): RecordedNode<ts.BinaryExpression> {
+    let binaryOperator: ts.BinaryOperator;
+    switch (expr.operator) {
+      case BinaryOperator.And:
+        binaryOperator = ts.SyntaxKind.AmpersandAmpersandToken;
+        break;
+      case BinaryOperator.Bigger:
+        binaryOperator = ts.SyntaxKind.GreaterThanToken;
+        break;
+      case BinaryOperator.BiggerEquals:
+        binaryOperator = ts.SyntaxKind.GreaterThanEqualsToken;
+        break;
+      case BinaryOperator.Divide:
+        binaryOperator = ts.SyntaxKind.SlashToken;
+        break;
+      case BinaryOperator.Equals:
+        binaryOperator = ts.SyntaxKind.EqualsEqualsToken;
+        break;
+      case BinaryOperator.Identical:
+        binaryOperator = ts.SyntaxKind.EqualsEqualsEqualsToken;
+        break;
+      case BinaryOperator.Lower:
+        binaryOperator = ts.SyntaxKind.LessThanToken;
+        break;
+      case BinaryOperator.LowerEquals:
+        binaryOperator = ts.SyntaxKind.LessThanEqualsToken;
+        break;
+      case BinaryOperator.Minus:
+        binaryOperator = ts.SyntaxKind.MinusToken;
+        break;
+      case BinaryOperator.Modulo:
+        binaryOperator = ts.SyntaxKind.PercentToken;
+        break;
+      case BinaryOperator.Multiply:
+        binaryOperator = ts.SyntaxKind.AsteriskToken;
+        break;
+      case BinaryOperator.NotEquals:
+        binaryOperator = ts.SyntaxKind.ExclamationEqualsToken;
+        break;
+      case BinaryOperator.NotIdentical:
+        binaryOperator = ts.SyntaxKind.ExclamationEqualsEqualsToken;
+        break;
+      case BinaryOperator.Or:
+        binaryOperator = ts.SyntaxKind.BarBarToken;
+        break;
+      case BinaryOperator.Plus:
+        binaryOperator = ts.SyntaxKind.PlusToken;
+        break;
+      default:
+        throw new Error(`Unknown operator: ${expr.operator}`);
+    }
+    return this.record(
+        expr, ts.createBinary(
+                  expr.lhs.visitExpression(this, null), binaryOperator,
+                  expr.rhs.visitExpression(this, null)));
+  }
+
+  visitReadPropExpr(expr: ReadPropExpr): RecordedNode<ts.PropertyAccessExpression> {
+    return this.record(
+        expr, ts.createPropertyAccess(expr.receiver.visitExpression(this, null), expr.name));
+  }
+
+  visitReadKeyExpr(expr: ReadKeyExpr): RecordedNode<ts.ElementAccessExpression> {
+    return this.record(
+        expr,
+        ts.createElementAccess(
+            expr.receiver.visitExpression(this, null), expr.index.visitExpression(this, null)));
+  }
+
+  visitLiteralArrayExpr(expr: LiteralArrayExpr): RecordedNode<ts.ArrayLiteralExpression> {
+    return this.record(
+        expr, ts.createArrayLiteral(expr.entries.map(entry => entry.visitExpression(this, null))));
+  }
+
+  visitLiteralMapExpr(expr: LiteralMapExpr): RecordedNode<ts.ObjectLiteralExpression> {
+    return this.record(
+        expr, ts.createObjectLiteral(expr.entries.map(
+                  entry => ts.createPropertyAssignment(
+                      entry.quoted ? ts.createLiteral(entry.key) : entry.key,
+                      entry.value.visitExpression(this, null)))));
+  }
+
+  visitCommaExpr(expr: CommaExpr): RecordedNode<ts.Expression> {
+    return this.record(
+        expr, expr.parts.map(e => e.visitExpression(this, null))
+                  .reduce<ts.Expression|null>(
+                      (left, right) =>
+                          left ? ts.createBinary(left, ts.SyntaxKind.CommaToken, right) : right,
+                      null));
+  }
+
+  private _visitStatements(statements: Statement[]): ts.Block {
+    return this._visitStatementsPrefix([], statements);
+  }
+
+  private _visitStatementsPrefix(prefix: ts.Statement[], statements: Statement[]) {
+    return ts.createBlock([
+      ...prefix, ...statements.map(stmt => stmt.visitStatement(this, null)).filter(f => f != null)
+    ]);
+  }
+
+  private _visitIdentifier(value: ExternalReference): ts.Expression {
+    const {name, moduleName} = value;
+    let prefixIdent: ts.Identifier|null = null;
+    if (moduleName) {
+      let prefix = this._importsWithPrefixes.get(moduleName);
+      if (prefix == null) {
+        prefix = `i${this._importsWithPrefixes.size}`;
+        this._importsWithPrefixes.set(moduleName, prefix);
+      }
+      prefixIdent = ts.createIdentifier(prefix);
+    }
+    // name can only be null during JIT which never executes this code.
+    let result: ts.Expression =
+        prefixIdent ? ts.createPropertyAccess(prefixIdent, name !) : ts.createIdentifier(name !);
+    return result;
+  }
+}
+
+
+function getMethodName(methodRef: {name: string | null; builtin: BuiltinMethod | null}): string {
+  if (methodRef.name) {
+    return methodRef.name;
+  } else {
+    switch (methodRef.builtin) {
+      case BuiltinMethod.Bind:
+        return 'bind';
+      case BuiltinMethod.ConcatArray:
+        return 'concat';
+      case BuiltinMethod.SubscribeObservable:
+        return 'subscribe';
+    }
+  }
+  throw new Error('Unexpected method reference form');
+}
diff --git a/packages/compiler-cli/src/transformers/node_emitter_transform.ts b/packages/compiler-cli/src/transformers/node_emitter_transform.ts
new file mode 100644
index 0000000000..49a61b5069
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/node_emitter_transform.ts
@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {GeneratedFile} from '@angular/compiler';
+import * as ts from 'typescript';
+
+import {TypeScriptNodeEmitter} from './node_emitter';
+
+export function getAngularEmitterTransformFactory(generatedFiles: GeneratedFile[]): () =>
+    (sourceFile: ts.SourceFile) => ts.SourceFile {
+  return function() {
+    const map = new Map(generatedFiles.filter(g => g.stmts && g.stmts.length)
+                            .map<[string, GeneratedFile]>(g => [g.genFileUrl, g]));
+    const emitter = new TypeScriptNodeEmitter();
+    return function(sourceFile: ts.SourceFile): ts.SourceFile {
+      const g = map.get(sourceFile.fileName);
+      if (g && g.stmts) {
+        const [newSourceFile] = emitter.updateSourceFile(sourceFile, g.stmts);
+        return newSourceFile;
+      }
+      return sourceFile;
+    };
+  };
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/transformers/program.ts b/packages/compiler-cli/src/transformers/program.ts
new file mode 100644
index 0000000000..17b5d34024
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/program.ts
@@ -0,0 +1,392 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {AotCompiler, GeneratedFile, NgAnalyzedModules, createAotCompiler, getParseErrors, isSyntaxError, toTypeScript} from '@angular/compiler';
+import {MetadataCollector, ModuleMetadata} from '@angular/tsc-wrapped';
+import {writeFileSync} from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {CompilerHost as AotCompilerHost, CompilerHostContext} from '../compiler_host';
+import {TypeChecker} from '../diagnostics/check_types';
+
+import {CompilerHost, CompilerOptions, DiagnosticCategory} from './api';
+import {Diagnostic, EmitFlags, Program} from './api';
+import {getAngularEmitterTransformFactory} from './node_emitter_transform';
+
+const GENERATED_FILES = /\.ngfactory\.js$|\.ngstyle\.js$|\.ngsummary\.js$/;
+const SUMMARY_JSON_FILES = /\.ngsummary.json$/;
+
+const emptyModules: NgAnalyzedModules = {
+  ngModules: [],
+  ngModuleByPipeOrDirective: new Map(),
+  files: []
+};
+
+class AngularCompilerProgram implements Program {
+  // Initialized in the constructor
+  private oldTsProgram: ts.Program|undefined;
+  private tsProgram: ts.Program;
+  private aotCompilerHost: AotCompilerHost;
+  private compiler: AotCompiler;
+  private srcNames: string[];
+  private collector: MetadataCollector;
+  // Lazily initialized fields
+  private _analyzedModules: NgAnalyzedModules|undefined;
+  private _structuralDiagnostics: Diagnostic[] = [];
+  private _stubs: GeneratedFile[]|undefined;
+  private _stubFiles: string[]|undefined;
+  private _programWithStubsHost: ts.CompilerHost|undefined;
+  private _programWithStubs: ts.Program|undefined;
+  private _generatedFiles: GeneratedFile[]|undefined;
+  private _generatedFileDiagnostics: Diagnostic[]|undefined;
+  private _typeChecker: TypeChecker|undefined;
+  private _semanticDiagnostics: Diagnostic[]|undefined;
+
+  constructor(
+      private rootNames: string[], private options: CompilerOptions, private host: CompilerHost,
+      private oldProgram?: Program) {
+    this.oldTsProgram = oldProgram ? oldProgram.getTsProgram() : undefined;
+
+    this.tsProgram = ts.createProgram(rootNames, options, host, this.oldTsProgram);
+    this.srcNames = this.tsProgram.getSourceFiles().map(sf => sf.fileName);
+    this.aotCompilerHost = new AotCompilerHost(this.tsProgram, options, host);
+    if (host.readResource) {
+      this.aotCompilerHost.loadResource = host.readResource.bind(host);
+    }
+    const {compiler} = createAotCompiler(this.aotCompilerHost, options);
+    this.compiler = compiler;
+    this.collector = new MetadataCollector({quotedNames: true});
+  }
+
+  // Program implementation
+  getTsProgram(): ts.Program { return this.programWithStubs; }
+
+  getTsOptionDiagnostics(cancellationToken?: ts.CancellationToken) {
+    return this.tsProgram.getOptionsDiagnostics(cancellationToken);
+  }
+
+  getNgOptionDiagnostics(cancellationToken?: ts.CancellationToken): Diagnostic[] {
+    return getNgOptionDiagnostics(this.options);
+  }
+
+  getTsSyntacticDiagnostics(sourceFile?: ts.SourceFile, cancellationToken?: ts.CancellationToken):
+      ts.Diagnostic[] {
+    return this.tsProgram.getSyntacticDiagnostics(sourceFile, cancellationToken);
+  }
+
+  getNgStructuralDiagnostics(cancellationToken?: ts.CancellationToken): Diagnostic[] {
+    return this.structuralDiagnostics;
+  }
+
+  getTsSemanticDiagnostics(sourceFile?: ts.SourceFile, cancellationToken?: ts.CancellationToken):
+      ts.Diagnostic[] {
+    return this.programWithStubs.getSemanticDiagnostics(sourceFile, cancellationToken);
+  }
+
+  getNgSemanticDiagnostics(fileName?: string, cancellationToken?: ts.CancellationToken):
+      Diagnostic[] {
+    const compilerDiagnostics = this.generatedFileDiagnostics;
+
+    // If we have diagnostics during the parser phase the type check phase is not meaningful so skip
+    // it.
+    if (compilerDiagnostics && compilerDiagnostics.length) return compilerDiagnostics;
+
+    return this.typeChecker.getDiagnostics(fileName, cancellationToken);
+  }
+
+  loadNgStructureAsync(): Promise<void> {
+    return this.compiler.analyzeModulesAsync(this.rootNames)
+        .catch(this.catchAnalysisError.bind(this))
+        .then(analyzedModules => {
+          if (this._analyzedModules) {
+            throw new Error('Angular structure loaded both synchronously and asynchronsly');
+          }
+          this._analyzedModules = analyzedModules;
+        });
+  }
+
+  getLazyRoutes(cancellationToken?: ts.CancellationToken): {[route: string]: string} { return {}; }
+
+  emit({emitFlags = EmitFlags.Default, cancellationToken}:
+           {emitFlags?: EmitFlags, cancellationToken?: ts.CancellationToken}): ts.EmitResult {
+    const emitMap = new Map<string, string>();
+    const result = this.programWithStubs.emit(
+        /* targetSourceFile */ undefined,
+        createWriteFileCallback(emitFlags, this.host, this.collector, this.options, emitMap),
+        cancellationToken, (emitFlags & (EmitFlags.DTS | EmitFlags.JS)) == EmitFlags.DTS, {
+          after: this.options.skipTemplateCodegen ? [] : [getAngularEmitterTransformFactory(
+                                                             this.generatedFiles)]
+        });
+
+    this.generatedFiles.forEach(file => {
+      if (file.source && file.source.length && SUMMARY_JSON_FILES.test(file.genFileUrl)) {
+        // If we have emitted the ngsummary.ts file, ensure the ngsummary.json file is emitted to
+        // the same location.
+        const emittedFile = emitMap.get(file.srcFileUrl);
+        const fileName = emittedFile ?
+            path.join(path.dirname(emittedFile), path.basename(file.genFileUrl)) :
+            file.genFileUrl;
+        this.host.writeFile(fileName, file.source, false, error => {});
+      }
+    });
+    return result;
+  }
+
+  // Private members
+  private get analyzedModules(): NgAnalyzedModules {
+    return this._analyzedModules || (this._analyzedModules = this.analyzeModules());
+  }
+
+  private get structuralDiagnostics(): Diagnostic[] {
+    return this.analyzedModules && this._structuralDiagnostics
+  }
+
+  private get stubs(): GeneratedFile[] {
+    return this._stubs || (this._stubs = this.generateStubs());
+  }
+
+  private get stubFiles(): string[] {
+    return this._stubFiles ||
+        (this._stubFiles = this.stubs.reduce((files: string[], generatedFile) => {
+             if (generatedFile.source || (generatedFile.stmts && generatedFile.stmts.length)) {
+               return [...files, generatedFile.genFileUrl];
+             }
+             return files;
+           }, []));
+  }
+
+  private get programWithStubsHost(): ts.CompilerHost {
+    return this._programWithStubsHost || (this._programWithStubsHost = createProgramWithStubsHost(
+                                              this.stubs, this.tsProgram, this.host));
+  }
+
+  private get programWithStubs(): ts.Program {
+    return this._programWithStubs || (this._programWithStubs = this.createProgramWithStubs());
+  }
+
+  private get generatedFiles(): GeneratedFile[] {
+    return this._generatedFiles || (this._generatedFiles = this.generateFiles())
+  }
+
+  private get typeChecker(): TypeChecker {
+    return (this._typeChecker && !this._typeChecker.partialResults) ?
+        this._typeChecker :
+        (this._typeChecker = this.createTypeChecker());
+  }
+
+  private get generatedFileDiagnostics(): Diagnostic[]|undefined {
+    return this.generatedFiles && this._generatedFileDiagnostics !;
+  }
+
+  private catchAnalysisError(e: any): NgAnalyzedModules {
+    if (isSyntaxError(e)) {
+      const parserErrors = getParseErrors(e);
+      if (parserErrors && parserErrors.length) {
+        this._structuralDiagnostics =
+            parserErrors.map<Diagnostic>(e => ({
+                                           message: e.contextualMessage(),
+                                           category: DiagnosticCategory.Error,
+                                           span: e.span
+                                         }));
+      } else {
+        this._structuralDiagnostics = [{message: e.message, category: DiagnosticCategory.Error}];
+      }
+      this._analyzedModules = emptyModules;
+      return emptyModules;
+    }
+    throw e;
+  }
+
+  private analyzeModules() {
+    try {
+      return this.compiler.analyzeModulesSync(this.srcNames);
+    } catch (e) {
+      return this.catchAnalysisError(e);
+    }
+  }
+
+  private generateStubs() {
+    return this.options.skipTemplateCodegen ? [] :
+                                              this.options.generateCodeForLibraries === false ?
+                                              this.compiler.emitAllStubs(this.analyzedModules) :
+                                              this.compiler.emitPartialStubs(this.analyzedModules);
+  }
+
+  private generateFiles() {
+    try {
+      // Always generate the files if requested to ensure we capture any diagnostic errors but only
+      // keep the results if we are not skipping template code generation.
+      const result = this.compiler.emitAllImpls(this.analyzedModules);
+      return this.options.skipTemplateCodegen ? [] : result;
+    } catch (e) {
+      if (isSyntaxError(e)) {
+        this._generatedFileDiagnostics = [{message: e.message, category: DiagnosticCategory.Error}];
+        return [];
+      }
+      throw e;
+    }
+  }
+
+  private createTypeChecker(): TypeChecker {
+    return new TypeChecker(
+        this.tsProgram, this.options, this.host, this.aotCompilerHost, this.options,
+        this.analyzedModules, this.generatedFiles);
+  }
+
+  private createProgramWithStubs(): ts.Program {
+    // If we are skipping code generation just use the original program.
+    // Otherwise, create a new program that includes the stub files.
+    return this.options.skipTemplateCodegen ?
+        this.tsProgram :
+        ts.createProgram(
+            [...this.rootNames, ...this.stubFiles], this.options, this.programWithStubsHost);
+  }
+}
+
+export function createProgram(
+    {rootNames, options, host, oldProgram}:
+        {rootNames: string[], options: CompilerOptions, host: CompilerHost, oldProgram?: Program}):
+    Program {
+  return new AngularCompilerProgram(rootNames, options, host, oldProgram);
+}
+
+function writeMetadata(
+    emitFilePath: string, sourceFile: ts.SourceFile, collector: MetadataCollector,
+    ngOptions: CompilerOptions) {
+  if (/\.js$/.test(emitFilePath)) {
+    const path = emitFilePath.replace(/\.js$/, '.metadata.json');
+
+    // Beginning with 2.1, TypeScript transforms the source tree before emitting it.
+    // We need the original, unmodified, tree which might be several levels back
+    // depending on the number of transforms performed. All SourceFile's prior to 2.1
+    // will appear to be the original source since they didn't include an original field.
+    let collectableFile = sourceFile;
+    while ((collectableFile as any).original) {
+      collectableFile = (collectableFile as any).original;
+    }
+
+    const metadata = collector.getMetadata(collectableFile, !!ngOptions.strictMetadataEmit);
+    if (metadata) {
+      const metadataText = JSON.stringify([metadata]);
+      writeFileSync(path, metadataText, {encoding: 'utf-8'});
+    }
+  }
+}
+
+function createWriteFileCallback(
+    emitFlags: EmitFlags, host: ts.CompilerHost, collector: MetadataCollector,
+    ngOptions: CompilerOptions, emitMap: Map<string, string>) {
+  const withMetadata =
+      (fileName: string, data: string, writeByteOrderMark: boolean,
+       onError?: (message: string) => void, sourceFiles?: ts.SourceFile[]) => {
+        const generatedFile = GENERATED_FILES.test(fileName);
+        if (!generatedFile || data != '') {
+          host.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
+        }
+        if (!generatedFile && sourceFiles && sourceFiles.length == 1) {
+          emitMap.set(sourceFiles[0].fileName, fileName);
+          writeMetadata(fileName, sourceFiles[0], collector, ngOptions);
+        }
+      };
+  const withoutMetadata =
+      (fileName: string, data: string, writeByteOrderMark: boolean,
+       onError?: (message: string) => void, sourceFiles?: ts.SourceFile[]) => {
+        const generatedFile = GENERATED_FILES.test(fileName);
+        if (!generatedFile || data != '') {
+          host.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
+        }
+        if (!generatedFile && sourceFiles && sourceFiles.length == 1) {
+          emitMap.set(sourceFiles[0].fileName, fileName);
+        }
+      };
+  return (emitFlags & EmitFlags.Metadata) != 0 ? withMetadata : withoutMetadata;
+}
+
+function getNgOptionDiagnostics(options: CompilerOptions): Diagnostic[] {
+  if (options.annotationsAs) {
+    switch (options.annotationsAs) {
+      case 'decorators':
+      case 'static fields':
+        break;
+      default:
+        return [{
+          message:
+              'Angular compiler options "annotationsAs" only supports "static fields" and "decorators"',
+          category: DiagnosticCategory.Error
+        }];
+    }
+  }
+  return [];
+}
+
+function createProgramWithStubsHost(
+    generatedFiles: GeneratedFile[], originalProgram: ts.Program,
+    originalHost: ts.CompilerHost): ts.CompilerHost {
+  interface FileData {
+    g: GeneratedFile
+    s?: ts.SourceFile;
+  }
+  return new class implements ts.CompilerHost {
+    private generatedFiles: Map<string, FileData>;
+    writeFile: ts.WriteFileCallback;
+    getCancellationToken: () => ts.CancellationToken;
+    getDefaultLibLocation: () => string;
+    trace: (s: string) => void;
+    getDirectories: (path: string) => string[];
+    directoryExists: (directoryName: string) => boolean;
+    constructor() {
+      this.generatedFiles =
+          new Map(generatedFiles.filter(g => g.source || (g.stmts && g.stmts.length))
+                      .map<[string, FileData]>(g => [g.genFileUrl, {g}]));
+      this.writeFile = originalHost.writeFile;
+      if (originalHost.getDirectories) {
+        this.getDirectories = path => originalHost.getDirectories !(path);
+      }
+      if (originalHost.directoryExists) {
+        this.directoryExists = directoryName => originalHost.directoryExists !(directoryName);
+      }
+      if (originalHost.getCancellationToken) {
+        this.getCancellationToken = () => originalHost.getCancellationToken !();
+      }
+      if (originalHost.getDefaultLibLocation) {
+        this.getDefaultLibLocation = () => originalHost.getDefaultLibLocation !();
+      }
+      if (originalHost.trace) {
+        this.trace = s => originalHost.trace !(s);
+      }
+    }
+    getSourceFile(
+        fileName: string, languageVersion: ts.ScriptTarget,
+        onError?: ((message: string) => void)|undefined): ts.SourceFile {
+      const data = this.generatedFiles.get(fileName);
+      if (data) {
+        return data.s || (data.s = ts.createSourceFile(
+                              fileName, data.g.source || toTypeScript(data.g), languageVersion));
+      }
+      return originalProgram.getSourceFile(fileName) ||
+          originalHost.getSourceFile(fileName, languageVersion, onError);
+    }
+    readFile(fileName: string): string {
+      const data = this.generatedFiles.get(fileName);
+      if (data) {
+        return data.g.source || toTypeScript(data.g);
+      }
+      return originalHost.readFile(fileName);
+    }
+    getDefaultLibFileName = (options: ts.CompilerOptions) =>
+        originalHost.getDefaultLibFileName(options);
+    getCurrentDirectory = () => originalHost.getCurrentDirectory();
+    getCanonicalFileName = (fileName: string) => originalHost.getCanonicalFileName(fileName);
+    useCaseSensitiveFileNames = () => originalHost.useCaseSensitiveFileNames();
+    getNewLine = () => originalHost.getNewLine();
+    realPath = (p: string) => p;
+    fileExists = (fileName: string) =>
+        this.generatedFiles.has(fileName) || originalHost.fileExists(fileName);
+  };
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/test/diagnostics/check_types_spec.ts b/packages/compiler-cli/test/diagnostics/check_types_spec.ts
new file mode 100644
index 0000000000..ec24d60ebf
--- /dev/null
+++ b/packages/compiler-cli/test/diagnostics/check_types_spec.ts
@@ -0,0 +1,141 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {AotCompilerOptions, createAotCompiler} from '@angular/compiler';
+import {EmittingCompilerHost, MockAotCompilerHost, MockCompilerHost, MockData, MockDirectory, MockMetadataBundlerHost, arrayToMockDir, arrayToMockMap, isSource, settings, setup, toMockFileArray} from '@angular/compiler/test/aot/test_util';
+import * as ts from 'typescript';
+
+import {TypeChecker} from '../../src/diagnostics/check_types';
+import {Diagnostic} from '../../src/transformers/api';
+
+function compile(
+    rootDirs: MockData, options: AotCompilerOptions = {},
+    tsOptions: ts.CompilerOptions = {}): Diagnostic[] {
+  const rootDirArr = toMockFileArray(rootDirs);
+  const scriptNames = rootDirArr.map(entry => entry.fileName).filter(isSource);
+  const host = new MockCompilerHost(scriptNames, arrayToMockDir(rootDirArr));
+  const aotHost = new MockAotCompilerHost(host);
+  const tsSettings = {...settings, ...tsOptions};
+  const program = ts.createProgram(host.scriptNames.slice(0), tsSettings, host);
+  const ngChecker = new TypeChecker(program, tsSettings, host, aotHost, options);
+  return ngChecker.getDiagnostics();
+}
+
+describe('ng type checker', () => {
+  let angularFiles = setup();
+
+  function accept(...files: MockDirectory[]) {
+    expectNoDiagnostics(compile([angularFiles, QUICKSTART, ...files]));
+  }
+
+  function reject(message: string | RegExp, ...files: MockDirectory[]) {
+    const diagnostics = compile([angularFiles, QUICKSTART, ...files]);
+    if (!diagnostics || !diagnostics.length) {
+      throw new Error('Expected a diagnostic erorr message');
+    } else {
+      const matches: (d: Diagnostic) => boolean =
+          typeof message === 'string' ? d => d.message == message : d => message.test(d.message);
+      const matchingDiagnostics = diagnostics.filter(matches);
+      if (!matchingDiagnostics || !matchingDiagnostics.length) {
+        throw new Error(
+            `Expected a diagnostics matching ${message}, received\n  ${diagnostics.map(d => d.message).join('\n  ')}`);
+      }
+    }
+  }
+
+  it('should accept unmodified QuickStart', () => { accept(); });
+
+  describe('with modified quickstart', () => {
+    function a(template: string) {
+      accept({quickstart: {app: {'app.component.ts': appComponentSource(template)}}});
+    }
+
+    function r(template: string, message: string | RegExp) {
+      reject(message, {quickstart: {app: {'app.component.ts': appComponentSource(template)}}});
+    }
+
+    it('should report an invalid field access',
+       () => { r('{{fame}}', `Property 'fame' does not exist on type 'AppComponent'.`); });
+    it('should reject a reference to a field of a nullable',
+       () => { r('{{maybePerson.name}}', `Object is possibly 'undefined'.`); });
+    it('should accept a reference to a field of a nullable using using non-null-assert',
+       () => { a('{{maybePerson!.name}}'); });
+    it('should accept a safe property access of a nullable person',
+       () => { a('{{maybePerson?.name}}'); });
+    it('should accept a function call', () => { a('{{getName()}}'); });
+    it('should reject an invalid method',
+       () => { r('{{getFame()}}', `Property 'getFame' does not exist on type 'AppComponent'.`); });
+    it('should accept a field access of a method result', () => { a('{{getPerson().name}}'); });
+    it('should reject an invalid field reference of a method result',
+       () => { r('{{getPerson().fame}}', `Property 'fame' does not exist on type 'Person'.`); });
+    it('should reject an access to a nullable field of a method result',
+       () => { r('{{getMaybePerson().name}}', `Object is possibly 'undefined'.`); });
+    it('should accept a nullable assert of a nullable field refernces of a method result',
+       () => { a('{{getMaybePerson()!.name}}'); });
+    it('should accept a safe property access of a nullable field reference of a method result',
+       () => { a('{{getMaybePerson()?.name}}'); });
+  });
+});
+
+function appComponentSource(template: string): string {
+  return `
+    import {Component} from '@angular/core';
+
+    export interface Person {
+      name: string;
+      address: Address;
+    }
+
+    export interface Address {
+      street: string;
+      city: string;
+      state: string;
+      zip: string;
+    }
+
+    @Component({
+      template: '${template}'
+    })
+    export class AppComponent {
+      name = 'Angular';
+      person: Person;
+      people: Person[];
+      maybePerson?: Person;
+
+      getName(): string { return this.name; }
+      getPerson(): Person { return this.person; }
+      getMaybePerson(): Person | undefined { this.maybePerson; }
+    }
+  `;
+}
+
+const QUICKSTART: MockDirectory = {
+  quickstart: {
+    app: {
+      'app.component.ts': appComponentSource('<h1>Hello {{name}}</h1>'),
+      'app.module.ts': `
+        import { NgModule }      from '@angular/core';
+        import { toString }      from './utils';
+
+        import { AppComponent }  from './app.component';
+
+        @NgModule({
+          declarations: [ AppComponent ],
+          bootstrap:    [ AppComponent ]
+        })
+        export class AppModule { }
+      `
+    }
+  }
+};
+
+function expectNoDiagnostics(diagnostics: Diagnostic[]) {
+  if (diagnostics && diagnostics.length) {
+    throw new Error(diagnostics.map(d => `${d.span}: ${d.message}`).join('\n'));
+  }
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/test/diagnostics/expression_diagnostics_spec.ts b/packages/compiler-cli/test/diagnostics/expression_diagnostics_spec.ts
new file mode 100644
index 0000000000..45a9d1a1e9
--- /dev/null
+++ b/packages/compiler-cli/test/diagnostics/expression_diagnostics_spec.ts
@@ -0,0 +1,241 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {StaticSymbol} from '@angular/compiler';
+import {AngularCompilerOptions, CompilerHost} from '@angular/compiler-cli';
+import * as ts from 'typescript';
+
+import {getExpressionDiagnostics, getTemplateExpressionDiagnostics} from '../../src/diagnostics/expression_diagnostics';
+import {Directory} from '../mocks';
+
+import {DiagnosticContext, MockLanguageServiceHost, getDiagnosticTemplateInfo} from './mocks';
+
+describe('expression diagnostics', () => {
+  let registry: ts.DocumentRegistry;
+  let host: MockLanguageServiceHost;
+  let service: ts.LanguageService;
+  let context: DiagnosticContext;
+  let aotHost: CompilerHost;
+  let type: StaticSymbol;
+
+  beforeAll(() => {
+    registry = ts.createDocumentRegistry(false, '/src');
+    host = new MockLanguageServiceHost(['app/app.component.ts'], FILES, '/src');
+    service = ts.createLanguageService(host, registry);
+    const program = service.getProgram();
+    const checker = program.getTypeChecker();
+    const options: AngularCompilerOptions = Object.create(host.getCompilationSettings());
+    options.genDir = '/dist';
+    options.basePath = '/src';
+    aotHost = new CompilerHost(program, options, host, {verboseInvalidExpression: true});
+    context = new DiagnosticContext(service, program, checker, aotHost);
+    type = context.getStaticSymbol('app/app.component.ts', 'AppComponent');
+  });
+
+  it('should have no diagnostics in default app', () => {
+    function messageToString(messageText: string | ts.DiagnosticMessageChain): string {
+      if (typeof messageText == 'string') {
+        return messageText;
+      } else {
+        if (messageText.next) return messageText.messageText + messageToString(messageText.next);
+        return messageText.messageText;
+      }
+    }
+
+    function expectNoDiagnostics(diagnostics: ts.Diagnostic[]) {
+      if (diagnostics && diagnostics.length) {
+        const message =
+            'messags: ' + diagnostics.map(d => messageToString(d.messageText)).join('\n');
+        expect(message).toEqual('');
+      }
+    }
+
+    expectNoDiagnostics(service.getCompilerOptionsDiagnostics());
+    expectNoDiagnostics(service.getSyntacticDiagnostics('app/app.component.ts'));
+    expectNoDiagnostics(service.getSemanticDiagnostics('app/app.component.ts'));
+  });
+
+
+  function accept(template: string) {
+    const info = getDiagnosticTemplateInfo(context, type, 'app/app.component.html', template);
+    if (info) {
+      const diagnostics = getTemplateExpressionDiagnostics(info);
+      if (diagnostics && diagnostics.length) {
+        const message = diagnostics.map(d => d.message).join('\n  ');
+        throw new Error(`Unexpected diagnostics: ${message}`);
+      }
+    } else {
+      expect(info).toBeDefined();
+    }
+  }
+
+  function reject(template: string, expected: string | RegExp) {
+    const info = getDiagnosticTemplateInfo(context, type, 'app/app.component.html', template);
+    if (info) {
+      const diagnostics = getTemplateExpressionDiagnostics(info);
+      if (diagnostics && diagnostics.length) {
+        const messages = diagnostics.map(d => d.message).join('\n  ');
+        expect(messages).toContain(expected);
+      } else {
+        throw new Error(`Expected an error containing "${expected} in template "${template}"`);
+      }
+    } else {
+      expect(info).toBeDefined();
+    }
+  }
+
+  it('should accept a simple template', () => accept('App works!'));
+  it('should accept an interpolation', () => accept('App works: {{person.name.first}}'));
+  it('should reject misspelled access',
+     () => reject('{{persson}}', 'Identifier \'persson\' is not defined'));
+  it('should reject access to private',
+     () =>
+         reject('{{private_person}}', 'Identifier \'private_person\' refers to a private member'));
+  it('should accept an *ngIf', () => accept('<div *ngIf="person">{{person.name.first}}</div>'));
+  it('should reject *ngIf of misspelled identifier',
+     () => reject(
+         '<div *ngIf="persson">{{person.name.first}}</div>',
+         'Identifier \'persson\' is not defined'));
+  it('should accept an *ngFor', () => accept(`
+      <div *ngFor="let p of people">
+        {{p.name.first}} {{p.name.last}}
+      </div>
+    `));
+  it('should reject misspelled field in *ngFor', () => reject(
+                                                     `
+      <div *ngFor="let p of people">
+        {{p.names.first}} {{p.name.last}}
+      </div>
+    `,
+                                                     'Identifier \'names\' is not defined'));
+  it('should accept an async expression',
+     () => accept('{{(promised_person | async)?.name.first || ""}}'));
+  it('should reject an async misspelled field',
+     () => reject(
+         '{{(promised_person | async)?.nume.first || ""}}', 'Identifier \'nume\' is not defined'));
+  it('should accept an async *ngFor', () => accept(`
+      <div *ngFor="let p of promised_people | async">
+        {{p.name.first}} {{p.name.last}}
+      </div>
+    `));
+  it('should reject misspelled field an async *ngFor', () => reject(
+                                                           `
+      <div *ngFor="let p of promised_people | async">
+        {{p.name.first}} {{p.nume.last}}
+      </div>
+    `,
+                                                           'Identifier \'nume\' is not defined'));
+  it('should reject access to potentially undefined field',
+     () => reject(`<div>{{maybe_person.name.first}}`, 'The expression might be null'));
+  it('should accept a safe accss to an undefined field',
+     () => accept(`<div>{{maybe_person?.name.first}}</div>`));
+  it('should accept a type assert to an undefined field',
+     () => accept(`<div>{{maybe_person!.name.first}}</div>`));
+  it('should accept a # reference', () => accept(`
+          <form #f="ngForm" novalidate>
+            <input name="first" ngModel required #first="ngModel">
+            <input name="last" ngModel>
+            <button>Submit</button>
+          </form>
+          <p>First name value: {{ first.value }}</p>
+          <p>First name valid: {{ first.valid }}</p>
+          <p>Form value: {{ f.value | json }}</p>
+          <p>Form valid: {{ f.valid }}</p>
+    `));
+  it('should reject a misspelled field of a # reference',
+     () => reject(
+         `
+          <form #f="ngForm" novalidate>
+            <input name="first" ngModel required #first="ngModel">
+            <input name="last" ngModel>
+            <button>Submit</button>
+          </form>
+          <p>First name value: {{ first.valwe }}</p>
+          <p>First name valid: {{ first.valid }}</p>
+          <p>Form value: {{ f.value | json }}</p>
+          <p>Form valid: {{ f.valid }}</p>
+    `,
+         'Identifier \'valwe\' is not defined'));
+  it('should accept a call to a method', () => accept('{{getPerson().name.first}}'));
+  it('should reject a misspelled field of a method result',
+     () => reject('{{getPerson().nume.first}}', 'Identifier \'nume\' is not defined'));
+  it('should reject calling a uncallable member',
+     () => reject('{{person().name.first}}', 'Member \'person\' is not callable'));
+  it('should accept an event handler',
+     () => accept('<div (click)="click($event)">{{person.name.first}}</div>'));
+  it('should reject a misspelled event handler',
+     () => reject(
+         '<div (click)="clack($event)">{{person.name.first}}</div>', 'Unknown method \'clack\''));
+  it('should reject an uncalled event handler',
+     () => reject(
+         '<div (click)="click">{{person.name.first}}</div>', 'Unexpected callable expression'));
+  describe('with comparisions between nullable and non-nullable', () => {
+    it('should accept ==', () => accept(`<div>{{e == 1 ? 'a' : 'b'}}</div>`));
+    it('should accept ===', () => accept(`<div>{{e === 1 ? 'a' : 'b'}}</div>`));
+    it('should accept !=', () => accept(`<div>{{e != 1 ? 'a' : 'b'}}</div>`));
+    it('should accept !==', () => accept(`<div>{{e !== 1 ? 'a' : 'b'}}</div>`));
+    it('should accept &&', () => accept(`<div>{{e && 1 ? 'a' : 'b'}}</div>`));
+    it('should accept ||', () => accept(`<div>{{e || 1 ? 'a' : 'b'}}</div>`));
+    it('should reject >',
+       () => reject(`<div>{{e > 1 ? 'a' : 'b'}}</div>`, 'The expression might be null'));
+  });
+});
+
+const FILES: Directory = {
+  'src': {
+    'app': {
+      'app.component.ts': `
+        import { Component, NgModule } from '@angular/core';
+        import { CommonModule } from '@angular/common';
+        import { FormsModule } from '@angular/forms';
+
+        export interface Person {
+          name: Name;
+          address: Address;
+        }
+
+        export interface Name {
+          first: string;
+          middle: string;
+          last: string;
+        }
+
+        export interface Address {
+          street: string;
+          city: string;
+          state: string;
+          zip: string;
+        }
+
+        @Component({
+          selector: 'my-app',
+          templateUrl: './app.component.html'
+        })
+        export class AppComponent {
+          person: Person;
+          people: Person[];
+          maybe_person?: Person;
+          promised_person: Promise<Person>;
+          promised_people: Promise<Person[]>;
+          private private_person: Person;
+          private private_people: Person[];
+          e?: number;
+
+          getPerson(): Person { return this.person; }
+          click() {}
+        }
+
+        @NgModule({
+          imports: [CommonModule, FormsModule],
+          declarations: [AppComponent]
+        })
+        export class AppModule {}
+      `
+    }
+  }
+};
\ No newline at end of file
diff --git a/packages/compiler-cli/test/diagnostics/mocks.ts b/packages/compiler-cli/test/diagnostics/mocks.ts
new file mode 100644
index 0000000000..6cd06d8616
--- /dev/null
+++ b/packages/compiler-cli/test/diagnostics/mocks.ts
@@ -0,0 +1,259 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {AotCompilerHost, AotSummaryResolver, CompileMetadataResolver, CompilerConfig, DEFAULT_INTERPOLATION_CONFIG, DirectiveNormalizer, DirectiveResolver, DomElementSchemaRegistry, HtmlParser, I18NHtmlParser, InterpolationConfig, JitSummaryResolver, Lexer, NgAnalyzedModules, NgModuleResolver, ParseTreeResult, Parser, PipeResolver, ResourceLoader, StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, SummaryResolver, TemplateParser, analyzeNgModules, createOfflineCompileUrlResolver, extractProgramSymbols} from '@angular/compiler';
+import {ViewEncapsulation, ɵConsole as Console} from '@angular/core';
+import {CompilerHostContext} from 'compiler-cli';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {DiagnosticTemplateInfo} from '../../src/diagnostics/expression_diagnostics';
+import {getClassFromStaticSymbol, getClassMembers, getPipesTable, getSymbolQuery} from '../../src/diagnostics/typescript_symbols';
+import {Directory, MockAotContext} from '../mocks';
+
+function calcRootPath() {
+  const moduleFilename = module.filename.replace(/\\/g, '/');
+  const distIndex = moduleFilename.indexOf('/dist/all');
+  return moduleFilename.substr(0, distIndex);
+}
+
+const realFiles = new Map<string, string>();
+
+export class MockLanguageServiceHost implements ts.LanguageServiceHost, CompilerHostContext {
+  private options: ts.CompilerOptions;
+  private context: MockAotContext;
+  private assumedExist = new Set<string>();
+
+  constructor(private scripts: string[], files: Directory, currentDirectory: string = '/') {
+    this.options = {
+      target: ts.ScriptTarget.ES5,
+      module: ts.ModuleKind.CommonJS,
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+      emitDecoratorMetadata: true,
+      experimentalDecorators: true,
+      removeComments: false,
+      noImplicitAny: false,
+      skipLibCheck: true,
+      skipDefaultLibCheck: true,
+      strictNullChecks: true,
+      baseUrl: currentDirectory,
+      lib: ['lib.es2015.d.ts', 'lib.dom.d.ts'],
+      paths: {'@angular/*': [calcRootPath() + '/packages/*']}
+    };
+    this.context = new MockAotContext(currentDirectory, files);
+  }
+
+  getCompilationSettings(): ts.CompilerOptions { return this.options; }
+
+  getScriptFileNames(): string[] { return this.scripts; }
+
+  getScriptVersion(fileName: string): string { return '0'; }
+
+  getScriptSnapshot(fileName: string): ts.IScriptSnapshot|undefined {
+    const content = this.internalReadFile(fileName);
+    if (content) {
+      return ts.ScriptSnapshot.fromString(content);
+    }
+  }
+
+  getCurrentDirectory(): string { return this.context.currentDirectory; }
+
+  getDefaultLibFileName(options: ts.CompilerOptions): string { return 'lib.d.ts'; }
+
+  readFile(fileName: string): string { return this.internalReadFile(fileName) as string; }
+
+  readResource(fileName: string): Promise<string> { return Promise.resolve(''); }
+
+  assumeFileExists(fileName: string): void { this.assumedExist.add(fileName); }
+
+  fileExists(fileName: string): boolean {
+    return this.assumedExist.has(fileName) || this.internalReadFile(fileName) != null;
+  }
+
+  private internalReadFile(fileName: string): string|undefined {
+    let basename = path.basename(fileName);
+    if (/^lib.*\.d\.ts$/.test(basename)) {
+      let libPath = path.dirname(ts.getDefaultLibFilePath(this.getCompilationSettings()));
+      fileName = path.join(libPath, basename);
+    }
+    if (fileName.startsWith('app/')) {
+      fileName = path.join(this.context.currentDirectory, fileName);
+    }
+    if (this.context.fileExists(fileName)) {
+      return this.context.readFile(fileName);
+    }
+    if (realFiles.has(fileName)) {
+      return realFiles.get(fileName);
+    }
+    if (fs.existsSync(fileName)) {
+      const content = fs.readFileSync(fileName, 'utf8');
+      realFiles.set(fileName, content);
+      return content;
+    }
+    return undefined;
+  }
+}
+
+const staticSymbolCache = new StaticSymbolCache();
+const summaryResolver = new AotSummaryResolver(
+    {
+      loadSummary(filePath: string) { return null; },
+      isSourceFile(sourceFilePath: string) { return true; },
+      getOutputFileName(sourceFilePath: string) { return sourceFilePath; }
+    },
+    staticSymbolCache);
+
+export class DiagnosticContext {
+  _analyzedModules: NgAnalyzedModules;
+  _staticSymbolResolver: StaticSymbolResolver|undefined;
+  _reflector: StaticReflector|undefined;
+  _errors: {e: any, path?: string}[] = [];
+  _resolver: CompileMetadataResolver|undefined;
+  _refletor: StaticReflector;
+
+  constructor(
+      public service: ts.LanguageService, public program: ts.Program,
+      public checker: ts.TypeChecker, public host: AotCompilerHost) {}
+
+  private collectError(e: any, path?: string) { this._errors.push({e, path}); }
+
+  private get staticSymbolResolver(): StaticSymbolResolver {
+    let result = this._staticSymbolResolver;
+    if (!result) {
+      result = this._staticSymbolResolver = new StaticSymbolResolver(
+          this.host, staticSymbolCache, summaryResolver,
+          (e, filePath) => this.collectError(e, filePath));
+    }
+    return result;
+  }
+
+  get reflector(): StaticReflector {
+    if (!this._reflector) {
+      const ssr = this.staticSymbolResolver;
+      const result = this._reflector = new StaticReflector(
+          summaryResolver, ssr, [], [], (e, filePath) => this.collectError(e, filePath !));
+      this._reflector = result;
+      return result;
+    }
+    return this._reflector;
+  }
+
+  get resolver(): CompileMetadataResolver {
+    let result = this._resolver;
+    if (!result) {
+      const moduleResolver = new NgModuleResolver(this.reflector);
+      const directiveResolver = new DirectiveResolver(this.reflector);
+      const pipeResolver = new PipeResolver(this.reflector);
+      const elementSchemaRegistry = new DomElementSchemaRegistry();
+      const resourceLoader = new class extends ResourceLoader {
+        get(url: string): Promise<string> { return Promise.resolve(''); }
+      };
+      const urlResolver = createOfflineCompileUrlResolver();
+      const htmlParser = new class extends HtmlParser {
+        parse(
+            source: string, url: string, parseExpansionForms: boolean = false,
+            interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG):
+            ParseTreeResult {
+          return new ParseTreeResult([], []);
+        }
+      };
+
+      // This tracks the CompileConfig in codegen.ts. Currently these options
+      // are hard-coded.
+      const config =
+          new CompilerConfig({defaultEncapsulation: ViewEncapsulation.Emulated, useJit: false});
+      const directiveNormalizer =
+          new DirectiveNormalizer(resourceLoader, urlResolver, htmlParser, config);
+
+      result = this._resolver = new CompileMetadataResolver(
+          config, moduleResolver, directiveResolver, pipeResolver, new JitSummaryResolver(),
+          elementSchemaRegistry, directiveNormalizer, new Console(), staticSymbolCache,
+          this.reflector, (error, type) => this.collectError(error, type && type.filePath));
+    }
+    return result;
+  }
+
+  get analyzedModules(): NgAnalyzedModules {
+    let analyzedModules = this._analyzedModules;
+    if (!analyzedModules) {
+      const analyzeHost = {isSourceFile(filePath: string) { return true; }};
+      const programSymbols = extractProgramSymbols(
+          this.staticSymbolResolver, this.program.getSourceFiles().map(sf => sf.fileName),
+          analyzeHost);
+
+      analyzedModules = this._analyzedModules =
+          analyzeNgModules(programSymbols, analyzeHost, this.resolver);
+    }
+    return analyzedModules;
+  }
+
+  getStaticSymbol(path: string, name: string): StaticSymbol {
+    return staticSymbolCache.get(path, name);
+  }
+}
+
+function compileTemplate(context: DiagnosticContext, type: StaticSymbol, template: string) {
+  // Compiler the template string.
+  const resolvedMetadata = context.resolver.getNonNormalizedDirectiveMetadata(type);
+  const metadata = resolvedMetadata && resolvedMetadata.metadata;
+  if (metadata) {
+    const rawHtmlParser = new HtmlParser();
+    const htmlParser = new I18NHtmlParser(rawHtmlParser);
+    const expressionParser = new Parser(new Lexer());
+    const config = new CompilerConfig();
+    const parser = new TemplateParser(
+        config, context.reflector, expressionParser, new DomElementSchemaRegistry(), htmlParser,
+        null !, []);
+    const htmlResult = htmlParser.parse(template, '', true);
+    const analyzedModules = context.analyzedModules;
+    // let errors: Diagnostic[]|undefined = undefined;
+    let ngModule = analyzedModules.ngModuleByPipeOrDirective.get(type);
+    if (ngModule) {
+      const resolvedDirectives = ngModule.transitiveModule.directives.map(
+          d => context.resolver.getNonNormalizedDirectiveMetadata(d.reference));
+      const directives = removeMissing(resolvedDirectives).map(d => d.metadata.toSummary());
+      const pipes = ngModule.transitiveModule.pipes.map(
+          p => context.resolver.getOrLoadPipeMetadata(p.reference).toSummary());
+      const schemas = ngModule.schemas;
+      const parseResult = parser.tryParseHtml(htmlResult, metadata, directives, pipes, schemas);
+      return {
+        htmlAst: htmlResult.rootNodes,
+        templateAst: parseResult.templateAst,
+        directive: metadata, directives, pipes,
+        parseErrors: parseResult.errors, expressionParser
+      };
+    }
+  }
+}
+
+export function getDiagnosticTemplateInfo(
+    context: DiagnosticContext, type: StaticSymbol, templateFile: string,
+    template: string): DiagnosticTemplateInfo|undefined {
+  const compiledTemplate = compileTemplate(context, type, template);
+  if (compiledTemplate && compiledTemplate.templateAst) {
+    const members = getClassMembers(context.program, context.checker, type);
+    if (members) {
+      const sourceFile = context.program.getSourceFile(type.filePath);
+      const query = getSymbolQuery(
+          context.program, context.checker, sourceFile,
+          () =>
+              getPipesTable(sourceFile, context.program, context.checker, compiledTemplate.pipes));
+      return {
+        fileName: templateFile,
+        offset: 0, query, members,
+        htmlAst: compiledTemplate.htmlAst,
+        templateAst: compiledTemplate.templateAst
+      };
+    }
+  }
+}
+
+function removeMissing<T>(values: (T | null | undefined)[]): T[] {
+  return values.filter(e => !!e) as T[];
+}
diff --git a/packages/compiler-cli/test/diagnostics/symbol_query_spec.ts b/packages/compiler-cli/test/diagnostics/symbol_query_spec.ts
new file mode 100644
index 0000000000..cf7d7697e6
--- /dev/null
+++ b/packages/compiler-cli/test/diagnostics/symbol_query_spec.ts
@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {StaticSymbol} from '@angular/compiler';
+import {AngularCompilerOptions, CompilerHost} from '@angular/compiler-cli';
+import {EmittingCompilerHost, MockAotCompilerHost, MockCompilerHost, MockData, MockDirectory, MockMetadataBundlerHost, arrayToMockDir, arrayToMockMap, isSource, settings, setup, toMockFileArray} from '@angular/compiler/test/aot/test_util';
+import * as ts from 'typescript';
+
+import {Symbol, SymbolQuery, SymbolTable} from '../../src/diagnostics/symbols';
+import {getSymbolQuery} from '../../src/diagnostics/typescript_symbols';
+import {Directory} from '../mocks';
+
+import {DiagnosticContext, MockLanguageServiceHost} from './mocks';
+
+function emptyPipes(): SymbolTable {
+  return {
+    size: 0,
+    get(key: string) { return undefined; },
+    has(key: string) { return false; },
+    values(): Symbol[]{return [];}
+  };
+}
+
+describe('symbol query', () => {
+  let program: ts.Program;
+  let checker: ts.TypeChecker;
+  let sourceFile: ts.SourceFile;
+  let query: SymbolQuery;
+  let context: DiagnosticContext;
+  beforeEach(() => {
+    const registry = ts.createDocumentRegistry(false, '/src');
+    const host = new MockLanguageServiceHost(
+        ['/quickstart/app/app.component.ts'], QUICKSTART, '/quickstart');
+    const service = ts.createLanguageService(host, registry);
+    program = service.getProgram();
+    checker = program.getTypeChecker();
+    sourceFile = program.getSourceFile('/quickstart/app/app.component.ts');
+    const options: AngularCompilerOptions = Object.create(host.getCompilationSettings());
+    options.genDir = '/dist';
+    options.basePath = '/quickstart';
+    const aotHost = new CompilerHost(program, options, host, {verboseInvalidExpression: true});
+    context = new DiagnosticContext(service, program, checker, aotHost);
+    query = getSymbolQuery(program, checker, sourceFile, emptyPipes)
+  });
+
+  it('should be able to get undefined for an unknown symbol', () => {
+    const unknownType = context.getStaticSymbol('/unkonwn/file.ts', 'UnknownType');
+    const symbol = query.getTypeSymbol(unknownType);
+    expect(symbol).toBeUndefined();
+  });
+});
+
+function appComponentSource(template: string): string {
+  return `
+    import {Component} from '@angular/core';
+
+    export interface Person {
+      name: string;
+      address: Address;
+    }
+
+    export interface Address {
+      street: string;
+      city: string;
+      state: string;
+      zip: string;
+    }
+
+    @Component({
+      template: '${template}'
+    })
+    export class AppComponent {
+      name = 'Angular';
+      person: Person;
+      people: Person[];
+      maybePerson?: Person;
+
+      getName(): string { return this.name; }
+      getPerson(): Person { return this.person; }
+      getMaybePerson(): Person | undefined { this.maybePerson; }
+    }
+  `;
+}
+
+const QUICKSTART: Directory = {
+  quickstart: {
+    app: {
+      'app.component.ts': appComponentSource('<h1>Hello {{name}}</h1>'),
+      'app.module.ts': `
+        import { NgModule }      from '@angular/core';
+        import { toString }      from './utils';
+
+        import { AppComponent }  from './app.component';
+
+        @NgModule({
+          declarations: [ AppComponent ],
+          bootstrap:    [ AppComponent ]
+        })
+        export class AppModule { }
+      `
+    }
+  }
+};
diff --git a/packages/compiler-cli/test/main_spec.ts b/packages/compiler-cli/test/main_spec.ts
index bbb50117be..a69e50c1b7 100644
--- a/packages/compiler-cli/test/main_spec.ts
+++ b/packages/compiler-cli/test/main_spec.ts
@@ -6,46 +6,56 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵReflectionCapabilities, ɵreflector} from '@angular/core';
 import {makeTempDir} from '@angular/tsc-wrapped/test/test_support';
 import * as fs from 'fs';
 import * as path from 'path';
 
 import {main} from '../src/main';
 
+function getNgRootDir() {
+  const moduleFilename = module.filename.replace(/\\/g, '/');
+  const distIndex = moduleFilename.indexOf('/dist/all');
+  return moduleFilename.substr(0, distIndex);
+}
 
 describe('compiler-cli', () => {
   let basePath: string;
+  let outDir: string;
   let write: (fileName: string, content: string) => void;
 
+  function writeConfig(tsconfig: string = '{"extends": "./tsconfig-base.json"}') {
+    write('tsconfig.json', tsconfig);
+  }
+
   beforeEach(() => {
     basePath = makeTempDir();
     write = (fileName: string, content: string) => {
       fs.writeFileSync(path.join(basePath, fileName), content, {encoding: 'utf-8'});
     };
-    write('tsconfig.json', `{
+    write('tsconfig-base.json', `{
       "compilerOptions": {
         "experimentalDecorators": true,
         "types": [],
         "outDir": "built",
         "declaration": true,
         "module": "es2015",
-        "moduleResolution": "node"
-      },
-      "angularCompilerOptions": {
-        "annotateForClosureCompiler": true
-      },
-      "files": ["test.ts"]
+        "moduleResolution": "node",
+        "lib": ["es6", "dom"]
+      }
     }`);
+    outDir = path.resolve(basePath, 'built');
+    const ngRootDir = getNgRootDir();
     const nodeModulesPath = path.resolve(basePath, 'node_modules');
     fs.mkdirSync(nodeModulesPath);
-    fs.symlinkSync(path.resolve(__dirname, '..', '..'), path.resolve(nodeModulesPath, '@angular'));
+    fs.symlinkSync(
+        path.resolve(ngRootDir, 'dist', 'all', '@angular'),
+        path.resolve(nodeModulesPath, '@angular'));
+    fs.symlinkSync(
+        path.resolve(ngRootDir, 'node_modules', 'rxjs'), path.resolve(nodeModulesPath, 'rxjs'));
   });
 
-  // Restore reflector since AoT compiler will update it with a new static reflector
-  afterEach(() => { ɵreflector.updateCapabilities(new ɵReflectionCapabilities()); });
-
   it('should compile without errors', (done) => {
+    writeConfig();
     write('test.ts', 'export const A = 1;');
 
     const mockConsole = {error: (s: string) => {}};
@@ -62,6 +72,10 @@ describe('compiler-cli', () => {
   });
 
   it('should not print the stack trace if user input file does not exist', (done) => {
+    writeConfig(`{
+      "extends": "./tsconfig-base.json",
+      "files": ["test.ts"]
+    }`);
     const mockConsole = {error: (s: string) => {}};
 
     spyOn(mockConsole, 'error');
@@ -79,6 +93,7 @@ describe('compiler-cli', () => {
   });
 
   it('should not print the stack trace if user input file is malformed', (done) => {
+    writeConfig();
     write('test.ts', 'foo;');
 
     const mockConsole = {error: (s: string) => {}};
@@ -98,6 +113,7 @@ describe('compiler-cli', () => {
   });
 
   it('should not print the stack trace if cannot find the imported module', (done) => {
+    writeConfig();
     write('test.ts', `import {MyClass} from './not-exist-deps';`);
 
     const mockConsole = {error: (s: string) => {}};
@@ -118,6 +134,7 @@ describe('compiler-cli', () => {
   });
 
   it('should not print the stack trace if cannot import', (done) => {
+    writeConfig();
     write('empty-deps.ts', 'export const A = 1;');
     write('test.ts', `import {MyClass} from './empty-deps';`);
 
@@ -139,6 +156,7 @@ describe('compiler-cli', () => {
   });
 
   it('should not print the stack trace if type mismatches', (done) => {
+    writeConfig();
     write('empty-deps.ts', 'export const A = "abc";');
     write('test.ts', `
       import {A} from './empty-deps';
@@ -179,4 +197,150 @@ describe('compiler-cli', () => {
         })
         .catch(e => done.fail(e));
   });
+
+  describe('compile ngfactory files', () => {
+    it('should only compile ngfactory files that are referenced by root files by default',
+       (done) => {
+         writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"]
+        }`);
+         write('mymodule.ts', `
+        import {CommonModule} from '@angular/common';
+        import {NgModule} from '@angular/core';
+
+        @NgModule({
+          imports: [CommonModule]
+        })
+        export class MyModule {}
+      `);
+
+         main({p: basePath})
+             .then((exitCode) => {
+               expect(exitCode).toEqual(0);
+
+               expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngfactory.js'))).toBe(false);
+
+               done();
+             })
+             .catch(e => done.fail(e));
+       });
+
+    it('should report errors for ngfactory files that are not referenced by root files', (done) => {
+      writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"],
+          "angularCompilerOptions": {
+            "alwaysCompileGeneratedCode": true
+          }
+        }`);
+      write('mymodule.ts', `
+        import {NgModule, Component} from '@angular/core';
+
+        @Component({template: '{{unknownProp}}'})
+        export class MyComp {}
+
+        @NgModule({declarations: [MyComp]})
+        export class MyModule {}
+      `);
+
+      const mockConsole = {error: (s: string) => {}};
+
+      const errorSpy = spyOn(mockConsole, 'error');
+
+      main({p: basePath}, mockConsole.error)
+          .then((exitCode) => {
+            expect(errorSpy).toHaveBeenCalledTimes(1);
+            expect(errorSpy.calls.mostRecent().args[0])
+                .toContain('Error at ' + path.join(basePath, 'mymodule.ngfactory.ts'));
+            expect(errorSpy.calls.mostRecent().args[0])
+                .toContain(`Property 'unknownProp' does not exist on type 'MyComp'`);
+
+            expect(exitCode).toEqual(1);
+            done();
+          })
+          .catch(e => done.fail(e));
+    });
+
+    it('should compile ngfactory files that are not referenced by root files', (done) => {
+      writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"],
+          "angularCompilerOptions": {
+            "alwaysCompileGeneratedCode": true
+          }
+        }`);
+      write('mymodule.ts', `
+        import {CommonModule} from '@angular/common';
+        import {NgModule} from '@angular/core';
+
+        @NgModule({
+          imports: [CommonModule]
+        })
+        export class MyModule {}
+      `);
+
+      main({p: basePath})
+          .then((exitCode) => {
+            expect(exitCode).toEqual(0);
+
+            expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngfactory.js'))).toBe(true);
+            expect(fs.existsSync(path.resolve(
+                       outDir, 'node_modules', '@angular', 'core', 'src',
+                       'application_module.ngfactory.js')))
+                .toBe(true);
+
+            done();
+          })
+          .catch(e => done.fail(e));
+    });
+
+    it('should not produce ngsummary files by default', (done) => {
+      writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"]
+        }`);
+      write('mymodule.ts', `
+        import {NgModule} from '@angular/core';
+
+        @NgModule()
+        export class MyModule {}
+      `);
+
+      main({p: basePath})
+          .then((exitCode) => {
+            expect(exitCode).toEqual(0);
+            expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngsummary.js'))).toBe(false);
+
+            done();
+          })
+          .catch(e => done.fail(e));
+    });
+
+    it('should produce ngsummary files if configured', (done) => {
+      writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"],
+          "angularCompilerOptions": {
+            "enableSummariesForJit": true,
+            "alwaysCompileGeneratedCode": true
+          }
+        }`);
+      write('mymodule.ts', `
+        import {NgModule} from '@angular/core';
+
+        @NgModule()
+        export class MyModule {}
+      `);
+
+      main({p: basePath})
+          .then((exitCode) => {
+            expect(exitCode).toEqual(0);
+            expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngsummary.js'))).toBe(true);
+
+            done();
+          })
+          .catch(e => done.fail(e));
+    });
+  });
 });
diff --git a/packages/compiler-cli/test/mocks.ts b/packages/compiler-cli/test/mocks.ts
index da390ce8f9..76cea0cf19 100644
--- a/packages/compiler-cli/test/mocks.ts
+++ b/packages/compiler-cli/test/mocks.ts
@@ -20,12 +20,12 @@ export class MockAotContext implements CompilerHostContext {
 
   directoryExists(path: string): boolean { return typeof this.getEntry(path) === 'object'; }
 
-  readFile(fileName: string): string|undefined {
+  readFile(fileName: string): string {
     const data = this.getEntry(fileName);
     if (typeof data === 'string') {
       return data;
     }
-    return undefined;
+    return undefined !;
   }
 
   readResource(fileName: string): Promise<string> {
@@ -38,7 +38,7 @@ export class MockAotContext implements CompilerHostContext {
 
   writeFile(fileName: string, data: string): void {
     const parts = fileName.split('/');
-    const name = parts.pop();
+    const name = parts.pop() !;
     const entry = this.getEntry(parts);
     if (entry && typeof entry !== 'string') {
       entry[name] = data;
@@ -56,7 +56,7 @@ export class MockAotContext implements CompilerHostContext {
     parts = normalize(parts);
     let current = this.files;
     while (parts.length) {
-      const part = parts.shift();
+      const part = parts.shift() !;
       if (typeof current === 'string') {
         return undefined;
       }
@@ -82,7 +82,7 @@ export class MockAotContext implements CompilerHostContext {
 function normalize(parts: string[]): string[] {
   const result: string[] = [];
   while (parts.length) {
-    const part = parts.shift();
+    const part = parts.shift() !;
     switch (part) {
       case '.':
         break;
@@ -114,7 +114,7 @@ export class MockCompilerHost implements ts.CompilerHost {
     if (sourceText) {
       return ts.createSourceFile(fileName, sourceText, languageVersion);
     } else {
-      return undefined;
+      return undefined !;
     }
   }
 
diff --git a/packages/compiler-cli/test/ngc_spec.ts b/packages/compiler-cli/test/ngc_spec.ts
new file mode 100644
index 0000000000..2c272d0c96
--- /dev/null
+++ b/packages/compiler-cli/test/ngc_spec.ts
@@ -0,0 +1,709 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {makeTempDir} from '@angular/tsc-wrapped/test/test_support';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {main, performCompilation} from '../src/ngc';
+
+function getNgRootDir() {
+  const moduleFilename = module.filename.replace(/\\/g, '/');
+  const distIndex = moduleFilename.indexOf('/dist/all');
+  return moduleFilename.substr(0, distIndex);
+}
+
+describe('ngc command-line', () => {
+  let basePath: string;
+  let outDir: string;
+  let write: (fileName: string, content: string) => void;
+
+  function writeConfig(tsconfig: string = '{"extends": "./tsconfig-base.json"}') {
+    write('tsconfig.json', tsconfig);
+  }
+
+  beforeEach(() => {
+    basePath = makeTempDir();
+    write = (fileName: string, content: string) => {
+      const dir = path.dirname(fileName);
+      if (dir != '.') {
+        const newDir = path.join(basePath, dir);
+        if (!fs.existsSync(newDir)) fs.mkdirSync(newDir);
+      }
+      fs.writeFileSync(path.join(basePath, fileName), content, {encoding: 'utf-8'});
+    };
+    write('tsconfig-base.json', `{
+      "compilerOptions": {
+        "experimentalDecorators": true,
+        "skipLibCheck": true,
+        "types": [],
+        "outDir": "built",
+        "declaration": true,
+        "module": "es2015",
+        "moduleResolution": "node",
+        "lib": ["es6", "dom"]
+      }
+    }`);
+    outDir = path.resolve(basePath, 'built');
+    const ngRootDir = getNgRootDir();
+    const nodeModulesPath = path.resolve(basePath, 'node_modules');
+    fs.mkdirSync(nodeModulesPath);
+    fs.symlinkSync(
+        path.resolve(ngRootDir, 'dist', 'all', '@angular'),
+        path.resolve(nodeModulesPath, '@angular'));
+    fs.symlinkSync(
+        path.resolve(ngRootDir, 'node_modules', 'rxjs'), path.resolve(nodeModulesPath, 'rxjs'));
+  });
+
+  it('should compile without errors', () => {
+    writeConfig();
+    write('test.ts', 'export const A = 1;');
+
+    const mockConsole = {error: (s: string) => {}};
+
+    spyOn(mockConsole, 'error');
+
+    const result = main(['-p', basePath], mockConsole.error);
+    expect(mockConsole.error).not.toHaveBeenCalled();
+    expect(result).toBe(0);
+  });
+
+  it('should be able to be called without a config file by passing options explicitly', () => {
+    write('test.ts', 'export const A = 1;');
+
+    const mockConsole = {error: (s: string) => {}};
+
+    spyOn(mockConsole, 'error');
+
+    const result = performCompilation(
+        basePath, [path.join(basePath, 'test.ts')], {
+          experimentalDecorators: true,
+          skipLibCheck: true,
+          types: [],
+          outDir: path.join(basePath, 'built'),
+          declaration: true,
+          module: ts.ModuleKind.ES2015,
+          moduleResolution: ts.ModuleResolutionKind.NodeJs,
+        },
+        {}, mockConsole.error);
+    expect(mockConsole.error).not.toHaveBeenCalled();
+    expect(result).toBe(0);
+  });
+
+  it('should not print the stack trace if user input file does not exist', () => {
+    writeConfig(`{
+      "extends": "./tsconfig-base.json",
+      "files": ["test.ts"]
+    }`);
+    const mockConsole = {error: (s: string) => {}};
+
+    spyOn(mockConsole, 'error');
+
+    const exitCode = main(['-p', basePath], mockConsole.error);
+    expect(mockConsole.error)
+        .toHaveBeenCalledWith(
+            `error TS6053: File '` + path.join(basePath, 'test.ts') + `' not found.` +
+            '\n');
+    expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+    expect(exitCode).toEqual(1);
+  });
+
+  it('should not print the stack trace if user input file is malformed', () => {
+    writeConfig();
+    write('test.ts', 'foo;');
+
+    const mockConsole = {error: (s: string) => {}};
+
+    spyOn(mockConsole, 'error');
+
+    const exitCode = main(['-p', basePath], mockConsole.error);
+    expect(mockConsole.error)
+        .toHaveBeenCalledWith(
+            `test.ts(1,1): error TS2304: Cannot find name 'foo'.` +
+            '\n');
+    expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+    expect(exitCode).toEqual(1);
+  });
+
+  it('should not print the stack trace if cannot find the imported module', () => {
+    writeConfig();
+    write('test.ts', `import {MyClass} from './not-exist-deps';`);
+
+    const mockConsole = {error: (s: string) => {}};
+
+    spyOn(mockConsole, 'error');
+
+    const exitCode = main(['-p', basePath], mockConsole.error);
+    expect(mockConsole.error)
+        .toHaveBeenCalledWith(
+            `test.ts(1,23): error TS2307: Cannot find module './not-exist-deps'.` +
+            '\n');
+    expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+    expect(exitCode).toEqual(1);
+  });
+
+  it('should not print the stack trace if cannot import', () => {
+    writeConfig();
+    write('empty-deps.ts', 'export const A = 1;');
+    write('test.ts', `import {MyClass} from './empty-deps';`);
+
+    const mockConsole = {error: (s: string) => {}};
+
+    spyOn(mockConsole, 'error');
+
+    const exitCode = main(['-p', basePath], mockConsole.error);
+    expect(mockConsole.error)
+        .toHaveBeenCalledWith(
+            `test.ts(1,9): error TS2305: Module '"` + path.join(basePath, 'empty-deps') +
+            `"' has no exported member 'MyClass'.` +
+            '\n');
+    expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+    expect(exitCode).toEqual(1);
+  });
+
+  it('should not print the stack trace if type mismatches', () => {
+    writeConfig();
+    write('empty-deps.ts', 'export const A = "abc";');
+    write('test.ts', `
+      import {A} from './empty-deps';
+      A();
+    `);
+
+    const mockConsole = {error: (s: string) => {}};
+
+    spyOn(mockConsole, 'error');
+
+    const exitCode = main(['-p', basePath], mockConsole.error);
+    expect(mockConsole.error)
+        .toHaveBeenCalledWith(
+            'test.ts(3,7): error TS2349: Cannot invoke an expression whose type lacks a call signature. ' +
+            'Type \'String\' has no compatible call signatures.\n');
+    expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+    expect(exitCode).toEqual(1);
+  });
+
+  it('should print the stack trace on compiler internal errors', () => {
+    write('test.ts', 'export const A = 1;');
+
+    const mockConsole = {error: (s: string) => {}};
+
+    spyOn(mockConsole, 'error');
+
+    const exitCode = main(['-p', 'not-exist'], mockConsole.error);
+    expect(mockConsole.error).toHaveBeenCalled();
+    expect(mockConsole.error).toHaveBeenCalledWith('Compilation failed');
+    expect(exitCode).toEqual(2);
+  });
+
+  describe('compile ngfactory files', () => {
+    it('should report errors for ngfactory files that are not referenced by root files', () => {
+      writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"]
+        }`);
+      write('mymodule.ts', `
+        import {NgModule, Component} from '@angular/core';
+
+        @Component({template: '{{unknownProp}}'})
+        export class MyComp {}
+
+        @NgModule({declarations: [MyComp]})
+        export class MyModule {}
+      `);
+
+      const mockConsole = {error: (s: string) => {}};
+
+      const errorSpy = spyOn(mockConsole, 'error');
+
+      const exitCode = main(['-p', basePath], mockConsole.error);
+      expect(errorSpy).toHaveBeenCalledTimes(1);
+      expect(errorSpy.calls.mostRecent().args[0])
+          .toContain('Error at ng://' + path.join(basePath, 'mymodule.ts.MyComp.html'));
+      expect(errorSpy.calls.mostRecent().args[0])
+          .toContain(`Property 'unknownProp' does not exist on type 'MyComp'`);
+
+      expect(exitCode).toEqual(1);
+    });
+
+    it('should report errors as coming from the html file, not the factory', () => {
+      writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"]
+        }`);
+      write('my.component.ts', `
+        import {Component} from '@angular/core';
+        @Component({templateUrl: './my.component.html'})
+        export class MyComp {}
+      `);
+      write('my.component.html', `<h1>
+        {{unknownProp}}
+       </h1>`);
+      write('mymodule.ts', `
+        import {NgModule} from '@angular/core';
+        import {MyComp} from './my.component';
+
+        @NgModule({declarations: [MyComp]})
+        export class MyModule {}
+      `);
+
+      const mockConsole = {error: (s: string) => {}};
+
+      const errorSpy = spyOn(mockConsole, 'error');
+
+      const exitCode = main(['-p', basePath], mockConsole.error);
+      expect(errorSpy).toHaveBeenCalledTimes(1);
+      expect(errorSpy.calls.mostRecent().args[0])
+          .toContain('Error at ng://' + path.join(basePath, 'my.component.html(1,5):'));
+      expect(errorSpy.calls.mostRecent().args[0])
+          .toContain(`Property 'unknownProp' does not exist on type 'MyComp'`);
+
+      expect(exitCode).toEqual(1);
+    });
+
+    it('should compile ngfactory files that are not referenced by root files', () => {
+      writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"]
+        }`);
+      write('mymodule.ts', `
+        import {CommonModule} from '@angular/common';
+        import {NgModule} from '@angular/core';
+
+        @NgModule({
+          imports: [CommonModule]
+        })
+        export class MyModule {}
+      `);
+
+      const exitCode = main(['-p', basePath]);
+      expect(exitCode).toEqual(0);
+
+      expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngfactory.js'))).toBe(true);
+      expect(fs.existsSync(path.resolve(
+                 outDir, 'node_modules', '@angular', 'core', 'src',
+                 'application_module.ngfactory.js')))
+          .toBe(true);
+    });
+
+    it('should compile with a explicit tsconfig reference', () => {
+      writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"]
+        }`);
+      write('mymodule.ts', `
+        import {CommonModule} from '@angular/common';
+        import {NgModule} from '@angular/core';
+
+        @NgModule({
+          imports: [CommonModule]
+        })
+        export class MyModule {}
+      `);
+
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')]);
+      expect(exitCode).toEqual(0);
+
+      expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngfactory.js'))).toBe(true);
+      expect(fs.existsSync(path.resolve(
+                 outDir, 'node_modules', '@angular', 'core', 'src',
+                 'application_module.ngfactory.js')))
+          .toBe(true);
+    });
+
+    const shouldExist = (fileName: string) => {
+      if (!fs.existsSync(path.resolve(outDir, fileName))) {
+        throw new Error(`Expected ${fileName} to be emitted (outDir: ${outDir})`);
+      }
+    };
+    const shouldNotExist =
+        (fileName: string) => {
+          if (fs.existsSync(path.resolve(outDir, fileName))) {
+            throw new Error(`Did not expect ${fileName} to be emitted (outDir: ${outDir})`);
+          }
+        }
+
+    it('should be able to generate a flat module library', () => {
+      writeConfig(`
+        {
+          "angularCompilerOptions": {
+            "genDir": "ng",
+            "flatModuleId": "flat_module",
+            "flatModuleOutFile": "index.js",
+            "skipTemplateCodegen": true
+          },
+
+          "compilerOptions": {
+            "target": "es5",
+            "experimentalDecorators": true,
+            "noImplicitAny": true,
+            "moduleResolution": "node",
+            "rootDir": "",
+            "declaration": true,
+            "lib": ["es6", "dom"],
+            "baseUrl": ".",
+            "outDir": "built",
+            "typeRoots": ["node_modules/@types"]
+        },
+
+        "files": ["public-api.ts"]
+        }
+      `);
+      write('public-api.ts', `
+        export * from './src/flat.component';
+        export * from './src/flat.module';`);
+      write('src/flat.component.html', '<div>flat module component</div>');
+      write('src/flat.component.ts', `
+        import {Component} from '@angular/core';
+
+        @Component({
+          selector: 'flat-comp',
+          templateUrl: 'flat.component.html',
+        })
+        export class FlatComponent {
+        }`);
+      write('src/flat.module.ts', `
+        import {NgModule} from '@angular/core';
+
+        import {FlatComponent} from './flat.component';
+
+        @NgModule({
+          declarations: [
+            FlatComponent,
+          ],
+          exports: [
+            FlatComponent,
+          ]
+        })
+        export class FlatModule {
+        }`);
+
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')]);
+      expect(exitCode).toEqual(0);
+      shouldExist('index.js');
+      shouldExist('index.metadata.json');
+    });
+
+    it('should be able to build a flat module passing explicit options', () => {
+      write('public-api.ts', `
+        export * from './src/flat.component';
+        export * from './src/flat.module';`);
+      write('src/flat.component.html', '<div>flat module component</div>');
+      write('src/flat.component.ts', `
+        import {Component} from '@angular/core';
+
+        @Component({
+          selector: 'flat-comp',
+          templateUrl: 'flat.component.html',
+        })
+        export class FlatComponent {
+        }`);
+      write('src/flat.module.ts', `
+        import {NgModule} from '@angular/core';
+
+        import {FlatComponent} from './flat.component';
+
+        @NgModule({
+          declarations: [
+            FlatComponent,
+          ],
+          exports: [
+            FlatComponent,
+          ]
+        })
+        export class FlatModule {
+        }`);
+
+      const exitCode = performCompilation(
+          basePath, [path.join(basePath, 'public-api.ts')], {
+            target: ts.ScriptTarget.ES5,
+            experimentalDecorators: true,
+            noImplicitAny: true,
+            moduleResolution: ts.ModuleResolutionKind.NodeJs,
+            rootDir: basePath,
+            declaration: true,
+            lib: ['lib.es2015.d.ts', 'lib.dom.d.ts'],
+            baseUrl: basePath,
+            outDir: path.join(basePath, 'built'),
+            typeRoots: [path.join(basePath, 'node_modules/@types')]
+          },
+          {
+            genDir: 'ng',
+            flatModuleId: 'flat_module',
+            flatModuleOutFile: 'index.js',
+            skipTemplateCodegen: true
+          });
+
+
+      expect(exitCode).toEqual(0);
+      shouldExist('index.js');
+      shouldExist('index.metadata.json');
+    });
+
+    describe('with a third-party library', () => {
+      const writeGenConfig = (skipCodegen: boolean) => {
+        writeConfig(`{
+          "angularCompilerOptions": {
+            "skipTemplateCodegen": ${skipCodegen},
+            "enableSummariesForJit": true
+          },
+          "compilerOptions": {
+            "target": "es5",
+            "experimentalDecorators": true,
+            "noImplicitAny": true,
+            "moduleResolution": "node",
+            "rootDir": "",
+            "declaration": true,
+            "lib": ["es6", "dom"],
+            "baseUrl": ".",
+            "outDir": "built",
+            "typeRoots": ["node_modules/@types"]
+          }
+        }`);
+      };
+      beforeEach(() => {
+        write('comp.ts', `
+          import {Component} from '@angular/core';
+
+          @Component({
+            selector: 'third-party-comp',
+            template: '<div>3rdP-component</div>',
+          })
+          export class ThirdPartyComponent {
+          }`);
+        write('directive.ts', `
+          import {Directive, Input} from '@angular/core';
+
+          @Directive({
+            selector: '[thirdParty]',
+            host: {'[title]': 'thirdParty'},
+          })
+          export class ThirdPartyDirective {
+            @Input() thirdParty: string;
+          }`);
+        write('module.ts', `
+          import {NgModule} from '@angular/core';
+
+          import {ThirdPartyComponent} from './comp';
+          import {ThirdPartyDirective} from './directive';
+          import {AnotherThirdPartyModule} from './other_module';
+
+          @NgModule({
+            declarations: [
+              ThirdPartyComponent,
+              ThirdPartyDirective,
+            ],
+            exports: [
+              AnotherThirdPartyModule,
+              ThirdPartyComponent,
+              ThirdPartyDirective,
+            ],
+            imports: [AnotherThirdPartyModule]
+          })
+          export class ThirdpartyModule {
+          }`);
+        write('other_comp.ts', `
+          import {Component} from '@angular/core';
+
+          @Component({
+            selector: 'another-third-party-comp',
+            template: \`<div i18n>other-3rdP-component
+          multi-lines</div>\`,
+          })
+          export class AnotherThirdpartyComponent {
+          }`);
+        write('other_module.ts', `
+          import {NgModule} from '@angular/core';
+          import {AnotherThirdpartyComponent} from './other_comp';
+
+          @NgModule({
+            declarations: [AnotherThirdpartyComponent],
+            exports: [AnotherThirdpartyComponent],
+          })
+          export class AnotherThirdPartyModule {
+          }`);
+      });
+      const modules = ['comp', 'directive', 'module', 'other_comp', 'other_module'];
+      it('should honor skip code generation', () => {
+        // First ensure that we skip code generation when requested;.
+        writeGenConfig(/* skipCodegen */ true);
+        const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')]);
+        expect(exitCode).toEqual(0);
+        modules.forEach(moduleName => {
+          shouldExist(moduleName + '.js');
+          shouldExist(moduleName + '.d.ts');
+          shouldExist(moduleName + '.metadata.json');
+          shouldNotExist(moduleName + '.ngfactory.js');
+          shouldNotExist(moduleName + '.ngfactory.d.ts');
+          shouldNotExist(moduleName + '.ngsummary.js');
+          shouldNotExist(moduleName + '.ngsummary.d.ts');
+          shouldNotExist(moduleName + '.ngsummary.json');
+        });
+      });
+      it('should produce factories', () => {
+        // First ensure that we skip code generation when requested;.
+        writeGenConfig(/* skipCodegen */ false);
+        const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')]);
+        expect(exitCode).toEqual(0);
+        modules.forEach(moduleName => {
+          shouldExist(moduleName + '.js');
+          shouldExist(moduleName + '.d.ts');
+          shouldExist(moduleName + '.metadata.json');
+          if (!/(directive)|(pipe)/.test(moduleName)) {
+            shouldExist(moduleName + '.ngfactory.js');
+            shouldExist(moduleName + '.ngfactory.d.ts');
+          }
+          shouldExist(moduleName + '.ngsummary.js');
+          shouldExist(moduleName + '.ngsummary.d.ts');
+          shouldExist(moduleName + '.ngsummary.json');
+          shouldNotExist(moduleName + '.ngfactory.metadata.json');
+          shouldNotExist(moduleName + '.ngsummary.metadata.json');
+        });
+      });
+    });
+
+    describe('with tree example', () => {
+      beforeEach(() => {
+        writeConfig();
+        write('index_aot.ts', `
+          import {enableProdMode} from '@angular/core';
+          import {platformBrowser} from '@angular/platform-browser';
+
+          import {AppModuleNgFactory} from './tree.ngfactory';
+
+          enableProdMode();
+          platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);`);
+        write('tree.ts', `
+          import {Component, NgModule} from '@angular/core';
+          import {CommonModule} from '@angular/common';
+
+          @Component({
+            selector: 'tree',
+            inputs: ['data'],
+            template:
+                \`<span [style.backgroundColor]="bgColor"> {{data.value}} </span><tree *ngIf='data.right != null' [data]='data.right'></tree><tree *ngIf='data.left != null' [data]='data.left'></tree>\`
+          })
+          export class TreeComponent {
+            data: any;
+            bgColor = 0;
+          }
+
+          @NgModule({imports: [CommonModule], bootstrap: [TreeComponent], declarations: [TreeComponent]})
+          export class AppModule {}
+        `);
+      });
+
+      it('should compile without error', () => {
+        expect(main(['-p', path.join(basePath, 'tsconfig.json')])).toBe(0);
+      });
+    });
+
+    describe('with summary libraries', () => {
+      // TODO{chuckj}: Emitting using summaries only works if outDir is set to '.'
+      const shouldExist = (fileName: string) => {
+        if (!fs.existsSync(path.resolve(basePath, fileName))) {
+          throw new Error(`Expected ${fileName} to be emitted (basePath: ${basePath})`);
+        }
+      };
+      const shouldNotExist = (fileName: string) => {
+        if (fs.existsSync(path.resolve(basePath, fileName))) {
+          throw new Error(`Did not expect ${fileName} to be emitted (basePath: ${basePath})`);
+        }
+      };
+      beforeEach(() => {
+        const writeConfig = (dir: string) => {
+          write(path.join(dir, 'tsconfig.json'), `
+          {
+            "angularCompilerOptions": {
+              "generateCodeForLibraries": false,
+              "enableSummariesForJit": true
+            },
+            "compilerOptions": {
+              "target": "es5",
+              "experimentalDecorators": true,
+              "noImplicitAny": true,
+              "moduleResolution": "node",
+              "rootDir": "",
+              "declaration": true,
+              "lib": ["es6", "dom"],
+              "baseUrl": ".",
+              "paths": { "lib1/*": ["../lib1/*"], "lib2/*": ["../lib2/*"] },
+              "typeRoots": []
+            }
+          }`);
+        };
+
+        // Lib 1
+        writeConfig('lib1');
+        write('lib1/module.ts', `
+          import {NgModule} from '@angular/core';
+
+          export function someFactory(): any { return null; }
+
+          @NgModule({
+            providers: [{provide: 'foo', useFactory: someFactory}]
+          })
+          export class Module {}
+        `);
+
+        // Lib 2
+        writeConfig('lib2');
+        write('lib2/module.ts', `
+          export {Module} from 'lib1/module';
+        `);
+
+        // Application
+        writeConfig('app');
+        write('app/main.ts', `
+          import {NgModule, Inject} from '@angular/core';
+          import {Module} from 'lib2/module';
+
+          @NgModule({
+            imports: [Module]
+          })
+          export class AppModule {
+            constructor(@Inject('foo') public foo: any) {}
+          }
+        `);
+      });
+
+      it('should be able to compile library 1', () => {
+        expect(main(['-p', path.join(basePath, 'lib1')])).toBe(0);
+        shouldExist('lib1/module.js');
+        shouldExist('lib1/module.ngsummary.json');
+        shouldExist('lib1/module.ngsummary.js');
+        shouldExist('lib1/module.ngsummary.d.ts');
+        shouldExist('lib1/module.ngfactory.js');
+        shouldExist('lib1/module.ngfactory.d.ts');
+      });
+
+      it('should be able to compiler library 2', () => {
+        expect(main(['-p', path.join(basePath, 'lib1')])).toBe(0);
+        expect(main(['-p', path.join(basePath, 'lib2')])).toBe(0);
+        shouldExist('lib2/module.js');
+        shouldExist('lib2/module.ngsummary.json');
+        shouldExist('lib2/module.ngsummary.js');
+        shouldExist('lib2/module.ngsummary.d.ts');
+        shouldExist('lib2/module.ngfactory.js');
+        shouldExist('lib2/module.ngfactory.d.ts');
+      });
+
+      describe('building an application', () => {
+        beforeEach(() => {
+          expect(main(['-p', path.join(basePath, 'lib1')])).toBe(0);
+          expect(main(['-p', path.join(basePath, 'lib2')])).toBe(0);
+        });
+
+        it('should build without error', () => {
+          expect(main(['-p', path.join(basePath, 'app')])).toBe(0);
+          shouldExist('app/main.js');
+        });
+      });
+    });
+  });
+});
diff --git a/packages/compiler-cli/test/transformers/node_emitter_spec.ts b/packages/compiler-cli/test/transformers/node_emitter_spec.ts
new file mode 100644
index 0000000000..2918e70535
--- /dev/null
+++ b/packages/compiler-cli/test/transformers/node_emitter_spec.ts
@@ -0,0 +1,399 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as o from '@angular/compiler/src/output/output_ast';
+import * as ts from 'typescript';
+
+import {TypeScriptNodeEmitter} from '../../src/transformers/node_emitter';
+import {Directory, MockAotContext, MockCompilerHost} from '../mocks';
+
+const someGenFilePath = '/somePackage/someGenFile';
+const someGenFileName = someGenFilePath + '.ts';
+const someSourceFilePath = '/somePackage/someSourceFile';
+const anotherModuleUrl = '/somePackage/someOtherPath';
+
+const sameModuleIdentifier = new o.ExternalReference(null, 'someLocalId', null);
+
+const externalModuleIdentifier = new o.ExternalReference(anotherModuleUrl, 'someExternalId', null);
+
+describe('TypeScriptNodeEmitter', () => {
+  let context: MockAotContext;
+  let host: MockCompilerHost;
+  let emitter: TypeScriptNodeEmitter;
+  let someVar: o.ReadVarExpr;
+
+  beforeEach(() => {
+    context = new MockAotContext('/', FILES);
+    host = new MockCompilerHost(context);
+    emitter = new TypeScriptNodeEmitter();
+    someVar = o.variable('someVar', null, null);
+  });
+
+  function emitStmt(stmt: o.Statement | o.Statement[], preamble?: string): string {
+    const stmts = Array.isArray(stmt) ? stmt : [stmt];
+
+    const program = ts.createProgram(
+        [someGenFileName], {module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2017}, host);
+    const moduleSourceFile = program.getSourceFile(someGenFileName);
+    const transformers: ts.CustomTransformers = {
+      before: [context => {
+        return sourceFile => {
+          const [newSourceFile] = emitter.updateSourceFile(sourceFile, stmts, preamble);
+          return newSourceFile;
+        };
+      }]
+    };
+    let result: string = '';
+    const emitResult = program.emit(
+        moduleSourceFile, (fileName, data, writeByteOrderMark, onError, sourceFiles) => {
+          if (fileName.startsWith(someGenFilePath)) {
+            result = data;
+          }
+        }, undefined, undefined, transformers);
+    return normalizeResult(result);
+  }
+
+  it('should declare variables', () => {
+    expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt())).toEqual(`var someVar = 1;`);
+    expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt(null, [o.StmtModifier.Final])))
+        .toEqual(`var someVar = 1;`);
+    expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt(null, [o.StmtModifier.Exported])))
+        .toEqual(`exports.someVar = 1;`);
+  });
+
+  describe('declare variables with ExternExpressions as values', () => {
+    it('should create no reexport if the identifier is in the same module', () => {
+      // identifier is in the same module -> no reexport
+      expect(emitStmt(someVar.set(o.importExpr(sameModuleIdentifier)).toDeclStmt(null, [
+        o.StmtModifier.Exported
+      ]))).toEqual('exports.someVar = someLocalId;');
+    });
+
+    it('should create no reexport if the variable is not exported', () => {
+      expect(emitStmt(someVar.set(o.importExpr(externalModuleIdentifier)).toDeclStmt()))
+          .toEqual(
+              `const i0 = require("/somePackage/someOtherPath"); var someVar = i0.someExternalId;`);
+    });
+
+    it('should create no reexport if the variable is typed', () => {
+      expect(emitStmt(someVar.set(o.importExpr(externalModuleIdentifier))
+                          .toDeclStmt(o.DYNAMIC_TYPE, [o.StmtModifier.Exported])))
+          .toEqual(
+              `const i0 = require("/somePackage/someOtherPath"); exports.someVar = i0.someExternalId;`);
+    });
+
+    it('should create a reexport', () => {
+      expect(emitStmt(someVar.set(o.importExpr(externalModuleIdentifier))
+                          .toDeclStmt(null, [o.StmtModifier.Exported])))
+          .toEqual(
+              `var someOtherPath_1 = require("/somePackage/someOtherPath"); exports.someVar = someOtherPath_1.someExternalId;`);
+    });
+
+    it('should create multiple reexports from the same file', () => {
+      const someVar2 = o.variable('someVar2');
+      const externalModuleIdentifier2 =
+          new o.ExternalReference(anotherModuleUrl, 'someExternalId2', null);
+      expect(emitStmt([
+        someVar.set(o.importExpr(externalModuleIdentifier))
+            .toDeclStmt(null, [o.StmtModifier.Exported]),
+        someVar2.set(o.importExpr(externalModuleIdentifier2))
+            .toDeclStmt(null, [o.StmtModifier.Exported])
+      ]))
+          .toEqual(
+              `var someOtherPath_1 = require("/somePackage/someOtherPath"); exports.someVar = someOtherPath_1.someExternalId; exports.someVar2 = someOtherPath_1.someExternalId2;`);
+    });
+  });
+
+  it('should read and write variables', () => {
+    expect(emitStmt(someVar.toStmt())).toEqual(`someVar;`);
+    expect(emitStmt(someVar.set(o.literal(1)).toStmt())).toEqual(`someVar = 1;`);
+    expect(emitStmt(someVar.set(o.variable('someOtherVar').set(o.literal(1))).toStmt()))
+        .toEqual(`someVar = someOtherVar = 1;`);
+  });
+
+  it('should read and write keys', () => {
+    expect(emitStmt(o.variable('someMap').key(o.variable('someKey')).toStmt()))
+        .toEqual(`someMap[someKey];`);
+    expect(emitStmt(o.variable('someMap').key(o.variable('someKey')).set(o.literal(1)).toStmt()))
+        .toEqual(`someMap[someKey] = 1;`);
+  });
+
+  it('should read and write properties', () => {
+    expect(emitStmt(o.variable('someObj').prop('someProp').toStmt())).toEqual(`someObj.someProp;`);
+    expect(emitStmt(o.variable('someObj').prop('someProp').set(o.literal(1)).toStmt()))
+        .toEqual(`someObj.someProp = 1;`);
+  });
+
+  it('should invoke functions and methods and constructors', () => {
+    expect(emitStmt(o.variable('someFn').callFn([o.literal(1)]).toStmt())).toEqual('someFn(1);');
+    expect(emitStmt(o.variable('someObj').callMethod('someMethod', [o.literal(1)]).toStmt()))
+        .toEqual('someObj.someMethod(1);');
+    expect(emitStmt(o.variable('SomeClass').instantiate([o.literal(1)]).toStmt()))
+        .toEqual('new SomeClass(1);');
+  });
+
+  it('should invoke functions and methods and constructors', () => {
+    expect(emitStmt(o.variable('someFn').callFn([o.literal(1)]).toStmt())).toEqual('someFn(1);');
+    expect(emitStmt(o.variable('someObj').callMethod('someMethod', [o.literal(1)]).toStmt()))
+        .toEqual('someObj.someMethod(1);');
+    expect(emitStmt(o.variable('SomeClass').instantiate([o.literal(1)]).toStmt()))
+        .toEqual('new SomeClass(1);');
+  });
+
+  it('should support builtin methods', () => {
+    expect(emitStmt(o.variable('arr1')
+                        .callMethod(o.BuiltinMethod.ConcatArray, [o.variable('arr2')])
+                        .toStmt()))
+        .toEqual('arr1.concat(arr2);');
+
+    expect(emitStmt(o.variable('observable')
+                        .callMethod(o.BuiltinMethod.SubscribeObservable, [o.variable('listener')])
+                        .toStmt()))
+        .toEqual('observable.subscribe(listener);');
+
+    expect(emitStmt(
+               o.variable('fn').callMethod(o.BuiltinMethod.Bind, [o.variable('someObj')]).toStmt()))
+        .toEqual('fn.bind(someObj);');
+  });
+
+  it('should support literals', () => {
+    expect(emitStmt(o.literal(0).toStmt())).toEqual('0;');
+    expect(emitStmt(o.literal(true).toStmt())).toEqual('true;');
+    expect(emitStmt(o.literal('someStr').toStmt())).toEqual(`"someStr";`);
+    expect(emitStmt(o.literalArr([o.literal(1)]).toStmt())).toEqual(`[1];`);
+    expect(emitStmt(o.literalMap([
+                       {key: 'someKey', value: o.literal(1), quoted: false},
+                       {key: 'a', value: o.literal('a'), quoted: false},
+                       {key: '*', value: o.literal('star'), quoted: true},
+                     ]).toStmt())
+               .replace(/\s+/gm, ''))
+        .toEqual(`({someKey:1,a:"a","*":"star"});`);
+  });
+
+  it('should support blank literals', () => {
+    expect(emitStmt(o.literal(null).toStmt())).toEqual('null;');
+    expect(emitStmt(o.literal(undefined).toStmt())).toEqual('undefined;');
+    expect(emitStmt(o.variable('a', null).isBlank().toStmt())).toEqual('a == null;');
+  });
+
+  it('should support external identifiers', () => {
+    expect(emitStmt(o.importExpr(sameModuleIdentifier).toStmt())).toEqual('someLocalId;');
+    expect(emitStmt(o.importExpr(externalModuleIdentifier).toStmt()))
+        .toEqual(`const i0 = require("/somePackage/someOtherPath"); i0.someExternalId;`);
+  });
+
+  it('should support operators', () => {
+    const lhs = o.variable('lhs');
+    const rhs = o.variable('rhs');
+    expect(emitStmt(someVar.cast(o.INT_TYPE).toStmt())).toEqual('someVar;');
+    expect(emitStmt(o.not(someVar).toStmt())).toEqual('!someVar;');
+    expect(emitStmt(o.assertNotNull(someVar).toStmt())).toEqual('someVar;');
+    expect(emitStmt(someVar.conditional(o.variable('trueCase'), o.variable('falseCase')).toStmt()))
+        .toEqual('someVar ? trueCase : falseCase;');
+
+    expect(emitStmt(lhs.equals(rhs).toStmt())).toEqual('lhs == rhs;');
+    expect(emitStmt(lhs.notEquals(rhs).toStmt())).toEqual('lhs != rhs;');
+    expect(emitStmt(lhs.identical(rhs).toStmt())).toEqual('lhs === rhs;');
+    expect(emitStmt(lhs.notIdentical(rhs).toStmt())).toEqual('lhs !== rhs;');
+    expect(emitStmt(lhs.minus(rhs).toStmt())).toEqual('lhs - rhs;');
+    expect(emitStmt(lhs.plus(rhs).toStmt())).toEqual('lhs + rhs;');
+    expect(emitStmt(lhs.divide(rhs).toStmt())).toEqual('lhs / rhs;');
+    expect(emitStmt(lhs.multiply(rhs).toStmt())).toEqual('lhs * rhs;');
+    expect(emitStmt(lhs.modulo(rhs).toStmt())).toEqual('lhs % rhs;');
+    expect(emitStmt(lhs.and(rhs).toStmt())).toEqual('lhs && rhs;');
+    expect(emitStmt(lhs.or(rhs).toStmt())).toEqual('lhs || rhs;');
+    expect(emitStmt(lhs.lower(rhs).toStmt())).toEqual('lhs < rhs;');
+    expect(emitStmt(lhs.lowerEquals(rhs).toStmt())).toEqual('lhs <= rhs;');
+    expect(emitStmt(lhs.bigger(rhs).toStmt())).toEqual('lhs > rhs;');
+    expect(emitStmt(lhs.biggerEquals(rhs).toStmt())).toEqual('lhs >= rhs;');
+  });
+
+  it('should support function expressions', () => {
+    expect(emitStmt(o.fn([], []).toStmt())).toEqual(`(function () { });`);
+    expect(emitStmt(o.fn([], [new o.ReturnStatement(o.literal(1))], o.INT_TYPE).toStmt()))
+        .toEqual(`(function () { return 1; });`);
+    expect(emitStmt(o.fn([new o.FnParam('param1', o.INT_TYPE)], []).toStmt()))
+        .toEqual(`(function (param1) { });`);
+  });
+
+  it('should support function statements', () => {
+    expect(emitStmt(new o.DeclareFunctionStmt('someFn', [], []))).toEqual('function someFn() { }');
+    expect(emitStmt(new o.DeclareFunctionStmt('someFn', [], [], null, [o.StmtModifier.Exported])))
+        .toEqual(`function someFn() { } exports.someFn = someFn;`);
+    expect(emitStmt(new o.DeclareFunctionStmt(
+               'someFn', [], [new o.ReturnStatement(o.literal(1))], o.INT_TYPE)))
+        .toEqual(`function someFn() { return 1; }`);
+    expect(emitStmt(new o.DeclareFunctionStmt('someFn', [new o.FnParam('param1', o.INT_TYPE)], [
+    ]))).toEqual(`function someFn(param1) { }`);
+  });
+
+  it('should support comments', () => { expect(emitStmt(new o.CommentStmt('a\nb'))).toEqual(''); });
+
+  it('should support if stmt', () => {
+    const trueCase = o.variable('trueCase').callFn([]).toStmt();
+    const falseCase = o.variable('falseCase').callFn([]).toStmt();
+    expect(emitStmt(new o.IfStmt(o.variable('cond'), [trueCase])))
+        .toEqual('if (cond) { trueCase(); }');
+    expect(emitStmt(new o.IfStmt(o.variable('cond'), [trueCase], [falseCase])))
+        .toEqual('if (cond) { trueCase(); } else { falseCase(); }');
+  });
+
+  it('should support try/catch', () => {
+    const bodyStmt = o.variable('body').callFn([]).toStmt();
+    const catchStmt = o.variable('catchFn').callFn([o.CATCH_ERROR_VAR, o.CATCH_STACK_VAR]).toStmt();
+    expect(emitStmt(new o.TryCatchStmt([bodyStmt], [catchStmt])))
+        .toEqual(
+            `try { body(); } catch (error) { var stack = error.stack; catchFn(error, stack); }`);
+  });
+
+  it('should support support throwing',
+     () => { expect(emitStmt(new o.ThrowStmt(someVar))).toEqual('throw someVar;'); });
+
+  describe('classes', () => {
+    let callSomeMethod: o.Statement;
+
+    beforeEach(() => { callSomeMethod = o.THIS_EXPR.callMethod('someMethod', []).toStmt(); });
+
+
+    it('should support declaring classes', () => {
+      expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, [
+      ]))).toEqual('class SomeClass { }');
+      expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, [], [
+        o.StmtModifier.Exported
+      ]))).toEqual('class SomeClass { } exports.SomeClass = SomeClass;');
+      expect(emitStmt(new o.ClassStmt('SomeClass', o.variable('SomeSuperClass'), [], [], null !, [
+      ]))).toEqual('class SomeClass extends SomeSuperClass { }');
+    });
+
+    it('should support declaring constructors', () => {
+      const superCall = o.SUPER_EXPR.callFn([o.variable('someParam')]).toStmt();
+      expect(emitStmt(new o.ClassStmt(
+                 'SomeClass', null !, [], [], new o.ClassMethod(null !, [], []), [])))
+          .toEqual(`class SomeClass { constructor() { } }`);
+      expect(emitStmt(new o.ClassStmt(
+                 'SomeClass', null !, [], [],
+                 new o.ClassMethod(null !, [new o.FnParam('someParam', o.INT_TYPE)], []), [])))
+          .toEqual(`class SomeClass { constructor(someParam) { } }`);
+      expect(emitStmt(new o.ClassStmt(
+                 'SomeClass', null !, [], [], new o.ClassMethod(null !, [], [superCall]), [])))
+          .toEqual(`class SomeClass { constructor() { super(someParam); } }`);
+      expect(emitStmt(new o.ClassStmt(
+                 'SomeClass', null !, [], [], new o.ClassMethod(null !, [], [callSomeMethod]), [])))
+          .toEqual(`class SomeClass { constructor() { this.someMethod(); } }`);
+    });
+
+    it('should support declaring fields', () => {
+      expect(emitStmt(new o.ClassStmt(
+                 'SomeClass', null !, [new o.ClassField('someField')], [], null !, [])))
+          .toEqual(`class SomeClass { constructor() { this.someField = null; } }`);
+      expect(emitStmt(new o.ClassStmt(
+                 'SomeClass', null !, [new o.ClassField('someField', o.INT_TYPE)], [], null !, [])))
+          .toEqual(`class SomeClass { constructor() { this.someField = null; } }`);
+      expect(emitStmt(new o.ClassStmt(
+                 'SomeClass', null !,
+                 [new o.ClassField('someField', o.INT_TYPE, [o.StmtModifier.Private])], [], null !,
+                 [])))
+          .toEqual(`class SomeClass { constructor() { this.someField = null; } }`);
+    });
+
+    it('should support declaring getters', () => {
+      expect(emitStmt(new o.ClassStmt(
+                 'SomeClass', null !, [], [new o.ClassGetter('someGetter', [])], null !, [])))
+          .toEqual(`class SomeClass { get someGetter() { } }`);
+      expect(emitStmt(new o.ClassStmt(
+                 'SomeClass', null !, [], [new o.ClassGetter('someGetter', [], o.INT_TYPE)], null !,
+                 [])))
+          .toEqual(`class SomeClass { get someGetter() { } }`);
+      expect(emitStmt(new o.ClassStmt(
+                 'SomeClass', null !, [], [new o.ClassGetter('someGetter', [callSomeMethod])],
+                 null !, [])))
+          .toEqual(`class SomeClass { get someGetter() { this.someMethod(); } }`);
+      expect(
+          emitStmt(new o.ClassStmt(
+              'SomeClass', null !, [],
+              [new o.ClassGetter('someGetter', [], null !, [o.StmtModifier.Private])], null !, [])))
+          .toEqual(`class SomeClass { get someGetter() { } }`);
+    });
+
+    it('should support methods', () => {
+      expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, [
+        new o.ClassMethod('someMethod', [], [])
+      ]))).toEqual(`class SomeClass { someMethod() { } }`);
+      expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, [
+        new o.ClassMethod('someMethod', [], [], o.INT_TYPE)
+      ]))).toEqual(`class SomeClass { someMethod() { } }`);
+      expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, [
+        new o.ClassMethod('someMethod', [new o.FnParam('someParam', o.INT_TYPE)], [])
+      ]))).toEqual(`class SomeClass { someMethod(someParam) { } }`);
+      expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, [
+        new o.ClassMethod('someMethod', [], [callSomeMethod])
+      ]))).toEqual(`class SomeClass { someMethod() { this.someMethod(); } }`);
+    });
+  });
+
+  it('should support builtin types', () => {
+    const writeVarExpr = o.variable('a').set(o.NULL_EXPR);
+    expect(emitStmt(writeVarExpr.toDeclStmt(o.DYNAMIC_TYPE))).toEqual('var a = null;');
+    expect(emitStmt(writeVarExpr.toDeclStmt(o.BOOL_TYPE))).toEqual('var a = null;');
+    expect(emitStmt(writeVarExpr.toDeclStmt(o.INT_TYPE))).toEqual('var a = null;');
+    expect(emitStmt(writeVarExpr.toDeclStmt(o.NUMBER_TYPE))).toEqual('var a = null;');
+    expect(emitStmt(writeVarExpr.toDeclStmt(o.STRING_TYPE))).toEqual('var a = null;');
+    expect(emitStmt(writeVarExpr.toDeclStmt(o.FUNCTION_TYPE))).toEqual('var a = null;');
+  });
+
+  it('should support external types', () => {
+    const writeVarExpr = o.variable('a').set(o.NULL_EXPR);
+    expect(emitStmt(writeVarExpr.toDeclStmt(o.importType(sameModuleIdentifier))))
+        .toEqual('var a = null;');
+    expect(emitStmt(writeVarExpr.toDeclStmt(o.importType(externalModuleIdentifier))))
+        .toEqual(`var a = null;`);
+  });
+
+  it('should support expression types', () => {
+    expect(emitStmt(o.variable('a').set(o.NULL_EXPR).toDeclStmt(o.expressionType(o.variable('b')))))
+        .toEqual('var a = null;');
+  });
+
+  it('should support expressions with type parameters', () => {
+    expect(emitStmt(o.variable('a')
+                        .set(o.NULL_EXPR)
+                        .toDeclStmt(o.importType(externalModuleIdentifier, [o.STRING_TYPE]))))
+        .toEqual(`var a = null;`);
+  });
+
+  it('should support combined types', () => {
+    const writeVarExpr = o.variable('a').set(o.NULL_EXPR);
+    expect(emitStmt(writeVarExpr.toDeclStmt(new o.ArrayType(null !)))).toEqual('var a = null;');
+    expect(emitStmt(writeVarExpr.toDeclStmt(new o.ArrayType(o.INT_TYPE)))).toEqual('var a = null;');
+
+    expect(emitStmt(writeVarExpr.toDeclStmt(new o.MapType(null)))).toEqual('var a = null;');
+    expect(emitStmt(writeVarExpr.toDeclStmt(new o.MapType(o.INT_TYPE)))).toEqual('var a = null;');
+  });
+
+  it('should support a preamble', () => {
+    expect(emitStmt(o.variable('a').toStmt(), '/* SomePreamble */')).toBe('/* SomePreamble */ a;');
+  });
+});
+
+const FILES: Directory = {
+  somePackage: {'someGenFile.ts': `export var a: number;`}
+};
+
+function normalizeResult(result: string): string {
+  // Remove TypeScript prefixes
+  // Remove new lines
+  // Squish adjacent spaces
+  // Remove prefix and postfix spaces
+  return result.replace('"use strict";', ' ')
+      .replace('exports.__esModule = true;', ' ')
+      .replace('Object.defineProperty(exports, "__esModule", { value: true });', ' ')
+      .replace(/\n/g, ' ')
+      .replace(/ +/g, ' ')
+      .replace(/^ /g, '')
+      .replace(/ $/g, '');
+}
diff --git a/packages/compiler-cli/tsconfig-build.json b/packages/compiler-cli/tsconfig-build.json
index 05b1164765..6937d14a26 100644
--- a/packages/compiler-cli/tsconfig-build.json
+++ b/packages/compiler-cli/tsconfig-build.json
@@ -14,7 +14,7 @@
       "@angular/http": ["../../dist/packages/http"],
       "@angular/platform-server": ["../../dist/packages/platform-server"],
       "@angular/platform-browser": ["../../dist/packages/platform-browser"],
-      "@angular/tsc-wrapped": ["../../dist/tools/@angular/tsc-wrapped"]
+      "@angular/tsc-wrapped": ["../../dist/packages-dist/tsc-wrapped"]
     },
     "rootDir": ".",
     "sourceMap": true,
@@ -32,6 +32,7 @@
   "files": [
     "index.ts",
     "src/main.ts",
+    "src/ngc.ts",
     "src/extract_i18n.ts",
     "../../node_modules/@types/node/index.d.ts",
     "../../node_modules/@types/jasmine/index.d.ts",
diff --git a/packages/compiler/BUILD.bazel b/packages/compiler/BUILD.bazel
new file mode 100644
index 0000000000..857fadd6e0
--- /dev/null
+++ b/packages/compiler/BUILD.bazel
@@ -0,0 +1,13 @@
+package(default_visibility=["//visibility:public"])
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+ts_library(
+    name = "compiler",
+    srcs = glob(["**/*.ts"], exclude=[
+      "test/**",
+      "testing/**",
+    ]),
+    module_name = "@angular/compiler",
+    deps = ["//packages/core"],
+    tsconfig = ":tsconfig-build.json",
+)
diff --git a/packages/compiler/package.json b/packages/compiler/package.json
index 17f3d9dfab..a3b4bd3858 100644
--- a/packages/compiler/package.json
+++ b/packages/compiler/package.json
@@ -8,6 +8,9 @@
   "typings": "./compiler.d.ts",
   "author": "angular",
   "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "@angular/core": "0.0.0-PLACEHOLDER"
   },
diff --git a/packages/compiler/rollup.config.js b/packages/compiler/rollup.config.js
index 51958b81e3..4fe314ceab 100644
--- a/packages/compiler/rollup.config.js
+++ b/packages/compiler/rollup.config.js
@@ -6,18 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx',
+};
+
 export default {
   entry: '../../dist/packages-dist/compiler/@angular/compiler.es5.js',
   dest: '../../dist/packages-dist/compiler/bundles/compiler.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.compiler',
-  globals: {
-    '@angular/core': 'ng.core',
-    'rxjs/Observable': 'Rx',
-    'rxjs/Subject': 'Rx',
-  },
-  plugins: [
-    //    nodeResolve({ jsnext: true, main: true }),
-  ]
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/compiler/src/aot/compiler.ts b/packages/compiler/src/aot/compiler.ts
index 2fd7aac5f8..03b1e34aac 100644
--- a/packages/compiler/src/aot/compiler.ts
+++ b/packages/compiler/src/aot/compiler.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompileProviderMetadata, CompileTypeSummary, componentFactoryName, createHostComponentMeta, flatten, identifierName, sourceUrl, templateSourceUrl} from '../compile_metadata';
+import {CompileDirectiveMetadata, CompileDirectiveSummary, CompileIdentifierMetadata, CompileNgModuleMetadata, CompileNgModuleSummary, CompilePipeMetadata, CompileProviderMetadata, CompileStylesheetMetadata, CompileSummaryKind, CompileTypeMetadata, CompileTypeSummary, componentFactoryName, createHostComponentMeta, flatten, identifierName, sourceUrl, templateSourceUrl} from '../compile_metadata';
 import {CompilerConfig} from '../config';
-import {Identifiers, createIdentifier, createIdentifierToken} from '../identifiers';
+import {Identifiers, createTokenForExternalReference} from '../identifiers';
 import {CompileMetadataResolver} from '../metadata_resolver';
 import {NgModuleCompiler} from '../ng_module_compiler';
 import {OutputEmitter} from '../output/abstract_emitter';
@@ -16,66 +16,168 @@ import * as o from '../output/output_ast';
 import {CompiledStylesheet, StyleCompiler} from '../style_compiler';
 import {SummaryResolver} from '../summary_resolver';
 import {TemplateParser} from '../template_parser/template_parser';
-import {syntaxError} from '../util';
-import {ViewCompiler} from '../view_compiler/view_compiler';
+import {OutputContext, syntaxError} from '../util';
+import {ViewCompileResult, ViewCompiler} from '../view_compiler/view_compiler';
 
 import {AotCompilerHost} from './compiler_host';
 import {GeneratedFile} from './generated_file';
+import {StaticReflector} from './static_reflector';
 import {StaticSymbol} from './static_symbol';
-import {StaticSymbolResolver} from './static_symbol_resolver';
-import {serializeSummaries} from './summary_serializer';
-import {ngfactoryFilePath, splitTypescriptSuffix, summaryFileName} from './util';
+import {ResolvedStaticSymbol, StaticSymbolResolver} from './static_symbol_resolver';
+import {createForJitStub, serializeSummaries} from './summary_serializer';
+import {ngfactoryFilePath, splitTypescriptSuffix, summaryFileName, summaryForJitFileName, summaryForJitName} from './util';
 
 export class AotCompiler {
   constructor(
       private _config: CompilerConfig, private _host: AotCompilerHost,
-      private _metadataResolver: CompileMetadataResolver, private _templateParser: TemplateParser,
-      private _styleCompiler: StyleCompiler, private _viewCompiler: ViewCompiler,
-      private _ngModuleCompiler: NgModuleCompiler, private _outputEmitter: OutputEmitter,
+      private _reflector: StaticReflector, private _metadataResolver: CompileMetadataResolver,
+      private _templateParser: TemplateParser, private _styleCompiler: StyleCompiler,
+      private _viewCompiler: ViewCompiler, private _ngModuleCompiler: NgModuleCompiler,
+      private _outputEmitter: OutputEmitter,
       private _summaryResolver: SummaryResolver<StaticSymbol>, private _localeId: string|null,
-      private _translationFormat: string|null, private _genFilePreamble: string|null,
+      private _translationFormat: string|null, private _enableSummariesForJit: boolean|null,
       private _symbolResolver: StaticSymbolResolver) {}
 
   clearCache() { this._metadataResolver.clearCache(); }
 
-  compileAll(rootFiles: string[]): Promise<GeneratedFile[]> {
+  analyzeModulesSync(rootFiles: string[]): NgAnalyzedModules {
     const programSymbols = extractProgramSymbols(this._symbolResolver, rootFiles, this._host);
-    const {ngModuleByPipeOrDirective, files, ngModules} =
+    const analyzeResult =
         analyzeAndValidateNgModules(programSymbols, this._host, this._metadataResolver);
-    return Promise
-        .all(ngModules.map(
-            ngModule => this._metadataResolver.loadNgModuleDirectiveAndPipeMetadata(
-                ngModule.type.reference, false)))
-        .then(() => {
-          const sourceModules = files.map(
-              file => this._compileSrcFile(
-                  file.srcUrl, ngModuleByPipeOrDirective, file.directives, file.pipes,
-                  file.ngModules, file.injectables));
-          return flatten(sourceModules);
-        });
+    analyzeResult.ngModules.forEach(
+        ngModule => this._metadataResolver.loadNgModuleDirectiveAndPipeMetadata(
+            ngModule.type.reference, true));
+    return analyzeResult;
   }
 
-  private _compileSrcFile(
+  analyzeModulesAsync(rootFiles: string[]): Promise<NgAnalyzedModules> {
+    const programSymbols = extractProgramSymbols(this._symbolResolver, rootFiles, this._host);
+    const analyzeResult =
+        analyzeAndValidateNgModules(programSymbols, this._host, this._metadataResolver);
+    return Promise
+        .all(analyzeResult.ngModules.map(
+            ngModule => this._metadataResolver.loadNgModuleDirectiveAndPipeMetadata(
+                ngModule.type.reference, false)))
+        .then(() => analyzeResult);
+  }
+
+  emitAllStubs(analyzeResult: NgAnalyzedModules): GeneratedFile[] {
+    const {files} = analyzeResult;
+    const sourceModules = files.map(
+        file =>
+            this._compileStubFile(file.srcUrl, file.directives, file.pipes, file.ngModules, false));
+    return flatten(sourceModules);
+  }
+
+  emitPartialStubs(analyzeResult: NgAnalyzedModules): GeneratedFile[] {
+    const {files} = analyzeResult;
+    const sourceModules = files.map(
+        file =>
+            this._compileStubFile(file.srcUrl, file.directives, file.pipes, file.ngModules, true));
+    return flatten(sourceModules);
+  }
+
+  emitAllImpls(analyzeResult: NgAnalyzedModules): GeneratedFile[] {
+    const {ngModuleByPipeOrDirective, files} = analyzeResult;
+    const sourceModules = files.map(
+        file => this._compileImplFile(
+            file.srcUrl, ngModuleByPipeOrDirective, file.directives, file.pipes, file.ngModules,
+            file.injectables));
+    return flatten(sourceModules);
+  }
+
+  private _compileStubFile(
+      srcFileUrl: string, directives: StaticSymbol[], pipes: StaticSymbol[],
+      ngModules: StaticSymbol[], partial: boolean): GeneratedFile[] {
+    // partial is true when we only need the files we are certain will produce a factory and/or
+    // summary.
+    // This is the normal case for `ngc` but if we assume libraryies are generating their own
+    // factories
+    // then we might need a factory for a file that re-exports a module or factory which we cannot
+    // know
+    // ahead of time so we need a stub generate for all non-.d.ts files. The .d.ts files do not need
+    // to
+    // be excluded here because they are excluded when the modules are analyzed. If a factory ends
+    // up
+    // not being needed, the factory file is not written in writeFile callback.
+    const fileSuffix = splitTypescriptSuffix(srcFileUrl, true)[1];
+    const generatedFiles: GeneratedFile[] = [];
+
+    const ngFactoryOutputCtx = this._createOutputContext(ngfactoryFilePath(srcFileUrl, true));
+    const jitSummaryOutputCtx = this._createOutputContext(summaryForJitFileName(srcFileUrl, true));
+
+    // create exports that user code can reference
+    ngModules.forEach((ngModuleReference) => {
+      this._ngModuleCompiler.createStub(ngFactoryOutputCtx, ngModuleReference);
+      createForJitStub(jitSummaryOutputCtx, ngModuleReference);
+    });
+
+    let partialJitStubRequired = false;
+    let partialFactoryStubRequired = false;
+
+    // create stubs for external stylesheets (always empty, as users should not import anything from
+    // the generated code)
+    directives.forEach((dirType) => {
+      const compMeta = this._metadataResolver.getDirectiveMetadata(<any>dirType);
+
+      partialJitStubRequired = true;
+
+      if (!compMeta.isComponent) {
+        return;
+      }
+      // Note: compMeta is a component and therefore template is non null.
+      compMeta.template !.externalStylesheets.forEach((stylesheetMeta) => {
+        const styleContext = this._createOutputContext(_stylesModuleUrl(
+            stylesheetMeta.moduleUrl !, this._styleCompiler.needsStyleShim(compMeta), fileSuffix));
+        _createTypeReferenceStub(styleContext, Identifiers.ComponentFactory);
+        generatedFiles.push(this._codegenSourceModule(stylesheetMeta.moduleUrl !, styleContext));
+      });
+
+      partialFactoryStubRequired = true;
+    });
+
+    // If we need all the stubs to be generated then insert an arbitrary reference into the stub
+    if ((partialFactoryStubRequired || !partial) && ngFactoryOutputCtx.statements.length <= 0) {
+      _createTypeReferenceStub(ngFactoryOutputCtx, Identifiers.ComponentFactory);
+    }
+    if ((partialJitStubRequired || !partial || (pipes && pipes.length > 0)) &&
+        jitSummaryOutputCtx.statements.length <= 0) {
+      _createTypeReferenceStub(jitSummaryOutputCtx, Identifiers.ComponentFactory);
+    }
+
+    // Note: we are creating stub ngfactory/ngsummary for all source files,
+    // as the real calculation requires almost the same logic as producing the real content for
+    // them. Our pipeline will filter out empty ones at the end. Because of this filter, however,
+    // stub references to the reference type needs to be generated even if the user cannot
+    // refer to type from the `.d.ts` file to prevent the file being elided from the emit.
+    generatedFiles.push(this._codegenSourceModule(srcFileUrl, ngFactoryOutputCtx));
+    if (this._enableSummariesForJit) {
+      generatedFiles.push(this._codegenSourceModule(srcFileUrl, jitSummaryOutputCtx));
+    }
+
+    return generatedFiles;
+  }
+
+  private _compileImplFile(
       srcFileUrl: string, ngModuleByPipeOrDirective: Map<StaticSymbol, CompileNgModuleMetadata>,
       directives: StaticSymbol[], pipes: StaticSymbol[], ngModules: StaticSymbol[],
       injectables: StaticSymbol[]): GeneratedFile[] {
-    const fileSuffix = splitTypescriptSuffix(srcFileUrl)[1];
-    const statements: o.Statement[] = [];
-    const exportedVars: string[] = [];
+    const fileSuffix = splitTypescriptSuffix(srcFileUrl, true)[1];
     const generatedFiles: GeneratedFile[] = [];
 
-    generatedFiles.push(this._createSummary(
-        srcFileUrl, directives, pipes, ngModules, injectables, statements, exportedVars));
+    const outputCtx = this._createOutputContext(ngfactoryFilePath(srcFileUrl, true));
+
+    generatedFiles.push(
+        ...this._createSummary(srcFileUrl, directives, pipes, ngModules, injectables, outputCtx));
 
     // compile all ng modules
-    exportedVars.push(
-        ...ngModules.map((ngModuleType) => this._compileModule(ngModuleType, statements)));
+    ngModules.forEach((ngModuleType) => this._compileModule(outputCtx, ngModuleType));
 
     // compile components
     directives.forEach((dirType) => {
       const compMeta = this._metadataResolver.getDirectiveMetadata(<any>dirType);
       if (!compMeta.isComponent) {
-        return Promise.resolve(null);
+        return;
       }
       const ngModule = ngModuleByPipeOrDirective.get(dirType);
       if (!ngModule) {
@@ -83,25 +185,22 @@ export class AotCompiler {
             `Internal Error: cannot determine the module for component ${identifierName(compMeta.type)}!`);
       }
 
-      _assertComponent(compMeta);
-
       // compile styles
-      const stylesCompileResults = this._styleCompiler.compileComponent(compMeta);
-      stylesCompileResults.externalStylesheets.forEach((compiledStyleSheet) => {
-        generatedFiles.push(this._codgenStyles(srcFileUrl, compiledStyleSheet, fileSuffix));
+      const componentStylesheet = this._styleCompiler.compileComponent(outputCtx, compMeta);
+      // Note: compMeta is a component and therefore template is non null.
+      compMeta.template !.externalStylesheets.forEach((stylesheetMeta) => {
+        generatedFiles.push(
+            this._codegenStyles(stylesheetMeta.moduleUrl !, compMeta, stylesheetMeta, fileSuffix));
       });
 
       // compile components
       const compViewVars = this._compileComponent(
-          compMeta, ngModule, ngModule.transitiveModule.directives,
-          stylesCompileResults.componentStylesheet, fileSuffix, statements);
-      exportedVars.push(
-          this._compileComponentFactory(compMeta, ngModule, fileSuffix, statements),
-          compViewVars.viewClassVar, compViewVars.compRenderTypeVar);
+          outputCtx, compMeta, ngModule, ngModule.transitiveModule.directives, componentStylesheet,
+          fileSuffix);
+      this._compileComponentFactory(outputCtx, compMeta, ngModule, fileSuffix);
     });
-    if (statements.length > 0) {
-      const srcModule = this._codegenSourceModule(
-          srcFileUrl, ngfactoryFilePath(srcFileUrl), statements, exportedVars);
+    if (outputCtx.statements.length > 0) {
+      const srcModule = this._codegenSourceModule(srcFileUrl, outputCtx);
       generatedFiles.unshift(srcModule);
     }
     return generatedFiles;
@@ -109,58 +208,79 @@ export class AotCompiler {
 
   private _createSummary(
       srcFileUrl: string, directives: StaticSymbol[], pipes: StaticSymbol[],
-      ngModules: StaticSymbol[], injectables: StaticSymbol[], targetStatements: o.Statement[],
-      targetExportedVars: string[]): GeneratedFile {
+      ngModules: StaticSymbol[], injectables: StaticSymbol[],
+      ngFactoryCtx: OutputContext): GeneratedFile[] {
     const symbolSummaries = this._symbolResolver.getSymbolsOf(srcFileUrl)
                                 .map(symbol => this._symbolResolver.resolveSymbol(symbol));
-    const typeSummaries: CompileTypeSummary[] = [
-      ...ngModules.map(ref => this._metadataResolver.getNgModuleSummary(ref) !),
-      ...directives.map(ref => this._metadataResolver.getDirectiveSummary(ref) !),
-      ...pipes.map(ref => this._metadataResolver.getPipeSummary(ref) !),
-      ...injectables.map(ref => this._metadataResolver.getInjectableSummary(ref) !)
-    ];
+    const typeData: {
+      summary: CompileTypeSummary,
+      metadata: CompileNgModuleMetadata | CompileDirectiveMetadata | CompilePipeMetadata |
+          CompileTypeMetadata
+    }[] =
+        [
+          ...ngModules.map(ref => ({
+                             summary: this._metadataResolver.getNgModuleSummary(ref) !,
+                             metadata: this._metadataResolver.getNgModuleMetadata(ref) !
+                           })),
+          ...directives.map(ref => ({
+                              summary: this._metadataResolver.getDirectiveSummary(ref) !,
+                              metadata: this._metadataResolver.getDirectiveMetadata(ref) !
+                            })),
+          ...pipes.map(ref => ({
+                         summary: this._metadataResolver.getPipeSummary(ref) !,
+                         metadata: this._metadataResolver.getPipeMetadata(ref) !
+                       })),
+          ...injectables.map(ref => ({
+                               summary: this._metadataResolver.getInjectableSummary(ref) !,
+                               metadata: this._metadataResolver.getInjectableSummary(ref) !.type
+                             }))
+        ];
+    const forJitOutputCtx = this._createOutputContext(summaryForJitFileName(srcFileUrl, true));
     const {json, exportAs} = serializeSummaries(
-        this._summaryResolver, this._symbolResolver, symbolSummaries, typeSummaries);
+        forJitOutputCtx, this._summaryResolver, this._symbolResolver, symbolSummaries, typeData);
     exportAs.forEach((entry) => {
-      targetStatements.push(
-          o.variable(entry.exportAs).set(o.importExpr({reference: entry.symbol})).toDeclStmt());
-      targetExportedVars.push(entry.exportAs);
+      ngFactoryCtx.statements.push(
+          o.variable(entry.exportAs).set(ngFactoryCtx.importExpr(entry.symbol)).toDeclStmt(null, [
+            o.StmtModifier.Exported
+          ]));
     });
-    return new GeneratedFile(srcFileUrl, summaryFileName(srcFileUrl), json);
+    const summaryJson = new GeneratedFile(srcFileUrl, summaryFileName(srcFileUrl), json);
+    if (this._enableSummariesForJit) {
+      return [summaryJson, this._codegenSourceModule(srcFileUrl, forJitOutputCtx)];
+    };
+
+    return [summaryJson];
   }
 
-  private _compileModule(ngModuleType: StaticSymbol, targetStatements: o.Statement[]): string {
+  private _compileModule(outputCtx: OutputContext, ngModuleType: StaticSymbol): void {
     const ngModule = this._metadataResolver.getNgModuleMetadata(ngModuleType) !;
     const providers: CompileProviderMetadata[] = [];
 
     if (this._localeId) {
       providers.push({
-        token: createIdentifierToken(Identifiers.LOCALE_ID),
+        token: createTokenForExternalReference(this._reflector, Identifiers.LOCALE_ID),
         useValue: this._localeId,
       });
     }
 
     if (this._translationFormat) {
       providers.push({
-        token: createIdentifierToken(Identifiers.TRANSLATIONS_FORMAT),
+        token: createTokenForExternalReference(this._reflector, Identifiers.TRANSLATIONS_FORMAT),
         useValue: this._translationFormat
       });
     }
 
-    const appCompileResult = this._ngModuleCompiler.compile(ngModule, providers);
-    targetStatements.push(...appCompileResult.statements);
-    return appCompileResult.ngModuleFactoryVar;
+    this._ngModuleCompiler.compile(outputCtx, ngModule, providers);
   }
 
   private _compileComponentFactory(
-      compMeta: CompileDirectiveMetadata, ngModule: CompileNgModuleMetadata, fileSuffix: string,
-      targetStatements: o.Statement[]): string {
+      outputCtx: OutputContext, compMeta: CompileDirectiveMetadata,
+      ngModule: CompileNgModuleMetadata, fileSuffix: string): void {
     const hostType = this._metadataResolver.getHostComponentType(compMeta.type.reference);
     const hostMeta = createHostComponentMeta(
         hostType, compMeta, this._metadataResolver.getHostComponentViewClass(hostType));
     const hostViewFactoryVar =
-        this._compileComponent(
-                hostMeta, ngModule, [compMeta.type], null, fileSuffix, targetStatements)
+        this._compileComponent(outputCtx, hostMeta, ngModule, [compMeta.type], null, fileSuffix)
             .viewClassVar;
     const compFactoryVar = componentFactoryName(compMeta.type.reference);
     const inputsExprs: o.LiteralMapEntry[] = [];
@@ -176,10 +296,10 @@ export class AotCompiler {
       outputsExprs.push(new o.LiteralMapEntry(propName, o.literal(templateName), false));
     }
 
-    targetStatements.push(
+    outputCtx.statements.push(
         o.variable(compFactoryVar)
-            .set(o.importExpr(createIdentifier(Identifiers.createComponentFactory)).callFn([
-              o.literal(compMeta.selector), o.importExpr(compMeta.type),
+            .set(o.importExpr(Identifiers.createComponentFactory).callFn([
+              o.literal(compMeta.selector), outputCtx.importExpr(compMeta.type.reference),
               o.variable(hostViewFactoryVar), new o.LiteralMapExpr(inputsExprs),
               new o.LiteralMapExpr(outputsExprs),
               o.literalArr(
@@ -187,17 +307,16 @@ export class AotCompiler {
             ]))
             .toDeclStmt(
                 o.importType(
-                    createIdentifier(Identifiers.ComponentFactory), [o.importType(compMeta.type) !],
+                    Identifiers.ComponentFactory,
+                    [o.expressionType(outputCtx.importExpr(compMeta.type.reference)) !],
                     [o.TypeModifier.Const]),
-                [o.StmtModifier.Final]));
-    return compFactoryVar;
+                [o.StmtModifier.Final, o.StmtModifier.Exported]));
   }
 
   private _compileComponent(
-      compMeta: CompileDirectiveMetadata, ngModule: CompileNgModuleMetadata,
-      directiveIdentifiers: CompileIdentifierMetadata[], componentStyles: CompiledStylesheet|null,
-      fileSuffix: string,
-      targetStatements: o.Statement[]): {viewClassVar: string, compRenderTypeVar: string} {
+      outputCtx: OutputContext, compMeta: CompileDirectiveMetadata,
+      ngModule: CompileNgModuleMetadata, directiveIdentifiers: CompileIdentifierMetadata[],
+      componentStyles: CompiledStylesheet|null, fileSuffix: string): ViewCompileResult {
     const directives =
         directiveIdentifiers.map(dir => this._metadataResolver.getDirectiveSummary(dir.reference));
     const pipes = ngModule.transitiveModule.pipes.map(
@@ -207,57 +326,85 @@ export class AotCompiler {
         compMeta, compMeta.template !.template !, directives, pipes, ngModule.schemas,
         templateSourceUrl(ngModule.type, compMeta, compMeta.template !));
     const stylesExpr = componentStyles ? o.variable(componentStyles.stylesVar) : o.literalArr([]);
-    const viewResult =
-        this._viewCompiler.compileComponent(compMeta, parsedTemplate, stylesExpr, usedPipes);
+    const viewResult = this._viewCompiler.compileComponent(
+        outputCtx, compMeta, parsedTemplate, stylesExpr, usedPipes);
     if (componentStyles) {
-      targetStatements.push(
-          ..._resolveStyleStatements(this._symbolResolver, componentStyles, fileSuffix));
+      _resolveStyleStatements(
+          this._symbolResolver, componentStyles, this._styleCompiler.needsStyleShim(compMeta),
+          fileSuffix);
     }
-    targetStatements.push(...viewResult.statements);
-    return {viewClassVar: viewResult.viewClassVar, compRenderTypeVar: viewResult.rendererTypeVar};
+    return viewResult;
   }
 
-  private _codgenStyles(
-      fileUrl: string, stylesCompileResult: CompiledStylesheet, fileSuffix: string): GeneratedFile {
-    _resolveStyleStatements(this._symbolResolver, stylesCompileResult, fileSuffix);
-    return this._codegenSourceModule(
-        fileUrl,
-        _stylesModuleUrl(
-            stylesCompileResult.meta.moduleUrl !, stylesCompileResult.isShimmed, fileSuffix),
-        stylesCompileResult.statements, [stylesCompileResult.stylesVar]);
+  private _createOutputContext(genFilePath: string): OutputContext {
+    const importExpr = (symbol: StaticSymbol, typeParams: o.Type[] | null = null) => {
+      if (!(symbol instanceof StaticSymbol)) {
+        throw new Error(`Internal error: unknown identifier ${JSON.stringify(symbol)}`);
+      }
+      const arity = this._symbolResolver.getTypeArity(symbol) || 0;
+      const {filePath, name, members} = this._symbolResolver.getImportAs(symbol) || symbol;
+      const importModule = this._symbolResolver.fileNameToModuleName(filePath, genFilePath);
+
+      // It should be good enough to compare filePath to genFilePath and if they are equal
+      // there is a self reference. However, ngfactory files generate to .ts but their
+      // symbols have .d.ts so a simple compare is insufficient. They should be canonical
+      // and is tracked by #17705.
+      const selfReference = this._symbolResolver.fileNameToModuleName(genFilePath, genFilePath);
+      const moduleName = importModule === selfReference ? null : importModule;
+
+      // If we are in a type expression that refers to a generic type then supply
+      // the required type parameters. If there were not enough type parameters
+      // supplied, supply any as the type. Outside a type expression the reference
+      // should not supply type parameters and be treated as a simple value reference
+      // to the constructor function itself.
+      const suppliedTypeParams = typeParams || [];
+      const missingTypeParamsCount = arity - suppliedTypeParams.length;
+      const allTypeParams =
+          suppliedTypeParams.concat(new Array(missingTypeParamsCount).fill(o.DYNAMIC_TYPE));
+      return members.reduce(
+          (expr, memberName) => expr.prop(memberName),
+          <o.Expression>o.importExpr(
+              new o.ExternalReference(moduleName, name, null), allTypeParams));
+    };
+
+    return {statements: [], genFilePath, importExpr};
   }
 
-  private _codegenSourceModule(
-      srcFileUrl: string, genFileUrl: string, statements: o.Statement[],
-      exportedVars: string[]): GeneratedFile {
-    return new GeneratedFile(
-        srcFileUrl, genFileUrl,
-        this._outputEmitter.emitStatements(
-            sourceUrl(srcFileUrl), genFileUrl, statements, exportedVars, this._genFilePreamble));
+  private _codegenStyles(
+      srcFileUrl: string, compMeta: CompileDirectiveMetadata,
+      stylesheetMetadata: CompileStylesheetMetadata, fileSuffix: string): GeneratedFile {
+    const outputCtx = this._createOutputContext(_stylesModuleUrl(
+        stylesheetMetadata.moduleUrl !, this._styleCompiler.needsStyleShim(compMeta), fileSuffix));
+    const compiledStylesheet =
+        this._styleCompiler.compileStyles(outputCtx, compMeta, stylesheetMetadata);
+    _resolveStyleStatements(
+        this._symbolResolver, compiledStylesheet, this._styleCompiler.needsStyleShim(compMeta),
+        fileSuffix);
+    return this._codegenSourceModule(srcFileUrl, outputCtx);
+  }
+
+  private _codegenSourceModule(srcFileUrl: string, ctx: OutputContext): GeneratedFile {
+    return new GeneratedFile(srcFileUrl, ctx.genFilePath, ctx.statements);
   }
 }
 
+function _createTypeReferenceStub(outputCtx: OutputContext, reference: o.ExternalReference) {
+  outputCtx.statements.push(o.importExpr(reference).toStmt());
+}
+
 function _resolveStyleStatements(
-    reflector: StaticSymbolResolver, compileResult: CompiledStylesheet,
-    fileSuffix: string): o.Statement[] {
+    symbolResolver: StaticSymbolResolver, compileResult: CompiledStylesheet, needsShim: boolean,
+    fileSuffix: string): void {
   compileResult.dependencies.forEach((dep) => {
-    dep.valuePlaceholder.reference = reflector.getStaticSymbol(
-        _stylesModuleUrl(dep.moduleUrl, dep.isShimmed, fileSuffix), dep.name);
+    dep.setValue(symbolResolver.getStaticSymbol(
+        _stylesModuleUrl(dep.moduleUrl, needsShim, fileSuffix), dep.name));
   });
-  return compileResult.statements;
 }
 
 function _stylesModuleUrl(stylesheetUrl: string, shim: boolean, suffix: string): string {
   return `${stylesheetUrl}${shim ? '.shim' : ''}.ngstyle${suffix}`;
 }
 
-function _assertComponent(meta: CompileDirectiveMetadata) {
-  if (!meta.isComponent) {
-    throw new Error(
-        `Could not compile '${identifierName(meta.type)}' because it is not a component.`);
-  }
-}
-
 export interface NgAnalyzedModules {
   ngModules: CompileNgModuleMetadata[];
   ngModuleByPipeOrDirective: Map<StaticSymbol, CompileNgModuleMetadata>;
diff --git a/packages/compiler/src/aot/compiler_factory.ts b/packages/compiler/src/aot/compiler_factory.ts
index 7e21069a52..7d911e4c81 100644
--- a/packages/compiler/src/aot/compiler_factory.ts
+++ b/packages/compiler/src/aot/compiler_factory.ts
@@ -28,14 +28,12 @@ import {ViewCompiler} from '../view_compiler/view_compiler';
 import {AotCompiler} from './compiler';
 import {AotCompilerHost} from './compiler_host';
 import {AotCompilerOptions} from './compiler_options';
-import {StaticAndDynamicReflectionCapabilities} from './static_reflection_capabilities';
 import {StaticReflector} from './static_reflector';
 import {StaticSymbol, StaticSymbolCache} from './static_symbol';
 import {StaticSymbolResolver} from './static_symbol_resolver';
 import {AotSummaryResolver} from './summary_resolver';
 
 
-
 /**
  * Creates a new AotCompiler based on options and a host.
  */
@@ -48,38 +46,31 @@ export function createAotCompiler(compilerHost: AotCompilerHost, options: AotCom
   const summaryResolver = new AotSummaryResolver(compilerHost, symbolCache);
   const symbolResolver = new StaticSymbolResolver(compilerHost, symbolCache, summaryResolver);
   const staticReflector = new StaticReflector(summaryResolver, symbolResolver);
-  StaticAndDynamicReflectionCapabilities.install(staticReflector);
   const console = new Console();
   const htmlParser = new I18NHtmlParser(
-      new HtmlParser(), translations, options.i18nFormat, MissingTranslationStrategy.Warning,
-      console);
+      new HtmlParser(), translations, options.i18nFormat, options.missingTranslation, console);
   const config = new CompilerConfig({
     defaultEncapsulation: ViewEncapsulation.Emulated,
     useJit: false,
     enableLegacyTemplate: options.enableLegacyTemplate !== false,
+    missingTranslation: options.missingTranslation,
   });
   const normalizer = new DirectiveNormalizer(
       {get: (url: string) => compilerHost.loadResource(url)}, urlResolver, htmlParser, config);
   const expressionParser = new Parser(new Lexer());
   const elementSchemaRegistry = new DomElementSchemaRegistry();
-  const tmplParser =
-      new TemplateParser(config, expressionParser, elementSchemaRegistry, htmlParser, console, []);
+  const tmplParser = new TemplateParser(
+      config, staticReflector, expressionParser, elementSchemaRegistry, htmlParser, console, []);
   const resolver = new CompileMetadataResolver(
       config, new NgModuleResolver(staticReflector), new DirectiveResolver(staticReflector),
       new PipeResolver(staticReflector), summaryResolver, elementSchemaRegistry, normalizer,
       console, symbolCache, staticReflector);
   // TODO(vicb): do not pass options.i18nFormat here
-  const importResolver = {
-    getImportAs: (symbol: StaticSymbol) => symbolResolver.getImportAs(symbol) !,
-    fileNameToModuleName: (fileName: string, containingFilePath: string) =>
-                              compilerHost.fileNameToModuleName(fileName, containingFilePath),
-    getTypeArity: (symbol: StaticSymbol) => symbolResolver.getTypeArity(symbol) !
-  };
-  const viewCompiler = new ViewCompiler(config, elementSchemaRegistry);
+  const viewCompiler = new ViewCompiler(config, staticReflector, elementSchemaRegistry);
   const compiler = new AotCompiler(
-      config, compilerHost, resolver, tmplParser, new StyleCompiler(urlResolver), viewCompiler,
-      new NgModuleCompiler(), new TypeScriptEmitter(importResolver), summaryResolver,
-      options.locale || null, options.i18nFormat || null, options.genFilePreamble || null,
+      config, compilerHost, staticReflector, resolver, tmplParser, new StyleCompiler(urlResolver),
+      viewCompiler, new NgModuleCompiler(staticReflector), new TypeScriptEmitter(), summaryResolver,
+      options.locale || null, options.i18nFormat || null, options.enableSummariesForJit || null,
       symbolResolver);
   return {compiler, reflector: staticReflector};
 }
diff --git a/packages/compiler/src/aot/compiler_host.ts b/packages/compiler/src/aot/compiler_host.ts
index f7a83970d8..e5c2927845 100644
--- a/packages/compiler/src/aot/compiler_host.ts
+++ b/packages/compiler/src/aot/compiler_host.ts
@@ -14,16 +14,8 @@ import {AotSummaryResolverHost} from './summary_resolver';
  * services and from underlying file systems.
  */
 export interface AotCompilerHost extends StaticSymbolResolverHost, AotSummaryResolverHost {
-  /**
-   * Converts a file path to a module name that can be used as an `import.
-   * I.e. `path/to/importedFile.ts` should be imported by `path/to/containingFile.ts`.
-   *
-   * See ImportResolver.
-   */
-  fileNameToModuleName(importedFilePath: string, containingFilePath: string): string|null;
-
   /**
    * Loads a resource (e.g. html / css)
    */
-  loadResource(path: string): Promise<string>;
+  loadResource(path: string): Promise<string>|string;
 }
diff --git a/packages/compiler/src/aot/compiler_options.ts b/packages/compiler/src/aot/compiler_options.ts
index d5c369dc3c..772ce3ca12 100644
--- a/packages/compiler/src/aot/compiler_options.ts
+++ b/packages/compiler/src/aot/compiler_options.ts
@@ -6,11 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {MissingTranslationStrategy} from '@angular/core';
+
 export interface AotCompilerOptions {
   locale?: string;
   i18nFormat?: string;
   translations?: string;
+  missingTranslation?: MissingTranslationStrategy;
   enableLegacyTemplate?: boolean;
-  /** preamble for all generated source files */
-  genFilePreamble?: string;
+  enableSummariesForJit?: boolean
 }
diff --git a/packages/compiler/src/aot/generated_file.ts b/packages/compiler/src/aot/generated_file.ts
index b698397e84..226126f4f4 100644
--- a/packages/compiler/src/aot/generated_file.ts
+++ b/packages/compiler/src/aot/generated_file.ts
@@ -6,6 +6,30 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {sourceUrl} from '../compile_metadata';
+import {Statement} from '../output/output_ast';
+import {TypeScriptEmitter} from '../output/ts_emitter';
+
 export class GeneratedFile {
-  constructor(public srcFileUrl: string, public genFileUrl: string, public source: string) {}
+  public source: string|null;
+  public stmts: Statement[]|null;
+
+  constructor(
+      public srcFileUrl: string, public genFileUrl: string, sourceOrStmts: string|Statement[]) {
+    if (typeof sourceOrStmts === 'string') {
+      this.source = sourceOrStmts;
+      this.stmts = null;
+    } else {
+      this.source = null;
+      this.stmts = sourceOrStmts;
+    }
+  }
+}
+
+export function toTypeScript(file: GeneratedFile, preamble: string = ''): string {
+  if (!file.stmts) {
+    throw new Error(`Illegal state: No stmts present on GeneratedFile ${file.genFileUrl}`);
+  }
+  return new TypeScriptEmitter().emitStatements(
+      sourceUrl(file.srcFileUrl), file.genFileUrl, file.stmts, preamble);
 }
diff --git a/packages/compiler/src/aot/static_reflection_capabilities.ts b/packages/compiler/src/aot/static_reflection_capabilities.ts
deleted file mode 100644
index 4a11410ee9..0000000000
--- a/packages/compiler/src/aot/static_reflection_capabilities.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {ɵGetterFn, ɵMethodFn, ɵReflectionCapabilities, ɵSetterFn, ɵreflector} from '@angular/core';
-import {StaticReflector} from './static_reflector';
-import {StaticSymbol} from './static_symbol';
-
-export class StaticAndDynamicReflectionCapabilities {
-  static install(staticDelegate: StaticReflector) {
-    ɵreflector.updateCapabilities(new StaticAndDynamicReflectionCapabilities(staticDelegate));
-  }
-
-  private dynamicDelegate = new ɵReflectionCapabilities();
-
-  constructor(private staticDelegate: StaticReflector) {}
-
-  isReflectionEnabled(): boolean { return true; }
-  factory(type: any): Function { return this.dynamicDelegate.factory(type); }
-
-  hasLifecycleHook(type: any, lcProperty: string): boolean {
-    return isStaticType(type) ? this.staticDelegate.hasLifecycleHook(type, lcProperty) :
-                                this.dynamicDelegate.hasLifecycleHook(type, lcProperty);
-  }
-  parameters(type: any): any[][] {
-    return isStaticType(type) ? this.staticDelegate.parameters(type) :
-                                this.dynamicDelegate.parameters(type);
-  }
-  annotations(type: any): any[] {
-    return isStaticType(type) ? this.staticDelegate.annotations(type) :
-                                this.dynamicDelegate.annotations(type);
-  }
-  propMetadata(typeOrFunc: any): {[key: string]: any[]} {
-    return isStaticType(typeOrFunc) ? this.staticDelegate.propMetadata(typeOrFunc) :
-                                      this.dynamicDelegate.propMetadata(typeOrFunc);
-  }
-  getter(name: string): ɵGetterFn { return this.dynamicDelegate.getter(name); }
-  setter(name: string): ɵSetterFn { return this.dynamicDelegate.setter(name); }
-  method(name: string): ɵMethodFn { return this.dynamicDelegate.method(name); }
-  importUri(type: any): string { return this.staticDelegate.importUri(type) !; }
-  resourceUri(type: any): string { return this.staticDelegate.resourceUri(type); }
-  resolveIdentifier(name: string, moduleUrl: string, members: string[], runtime: any) {
-    return this.staticDelegate.resolveIdentifier(name, moduleUrl, members);
-  }
-  resolveEnum(enumIdentifier: any, name: string): any {
-    if (isStaticType(enumIdentifier)) {
-      return this.staticDelegate.resolveEnum(enumIdentifier, name);
-    } else {
-      return null;
-    }
-  }
-}
-
-function isStaticType(type: any): boolean {
-  return typeof type === 'object' && type.name && type.filePath;
-}
diff --git a/packages/compiler/src/aot/static_reflector.ts b/packages/compiler/src/aot/static_reflector.ts
index bb97bd1676..5a9a74ed2b 100644
--- a/packages/compiler/src/aot/static_reflector.ts
+++ b/packages/compiler/src/aot/static_reflector.ts
@@ -6,9 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Attribute, Component, ContentChild, ContentChildren, Directive, Host, HostBinding, HostListener, Inject, Injectable, Input, NgModule, Optional, Output, Pipe, Self, SkipSelf, ViewChild, ViewChildren, animate, group, keyframes, sequence, state, style, transition, trigger, ɵReflectorReader} from '@angular/core';
+import {Attribute, Component, ContentChild, ContentChildren, Directive, Host, HostBinding, HostListener, Inject, Injectable, Input, NgModule, Optional, Output, Pipe, Self, SkipSelf, ViewChild, ViewChildren, animate, group, keyframes, sequence, state, style, transition, trigger} from '@angular/core';
 
 import {CompileSummaryKind} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
+import * as o from '../output/output_ast';
 import {SummaryResolver} from '../summary_resolver';
 import {syntaxError} from '../util';
 
@@ -16,6 +18,7 @@ import {StaticSymbol} from './static_symbol';
 import {StaticSymbolResolver} from './static_symbol_resolver';
 
 const ANGULAR_CORE = '@angular/core';
+const ANGULAR_ROUTER = '@angular/router';
 
 const HIDDEN_KEY = /^\$.*\$$/;
 
@@ -23,6 +26,10 @@ const IGNORE = {
   __symbolic: 'ignore'
 };
 
+const USE_VALUE = 'useValue';
+const PROVIDE = 'provide';
+const REFERENCE_SET = new Set([USE_VALUE, 'useFactory', 'data']);
+
 function shouldIgnore(value: any): boolean {
   return value && value.__symbolic == 'ignore';
 }
@@ -31,7 +38,7 @@ function shouldIgnore(value: any): boolean {
  * A static reflector implements enough of the Reflector API that is necessary to compile
  * templates statically.
  */
-export class StaticReflector implements ɵReflectorReader {
+export class StaticReflector implements CompileReflector {
   private annotationCache = new Map<StaticSymbol, any[]>();
   private propertyCache = new Map<StaticSymbol, {[key: string]: any[]}>();
   private parameterCache = new Map<StaticSymbol, any[]>();
@@ -39,6 +46,8 @@ export class StaticReflector implements ɵReflectorReader {
   private conversionMap = new Map<StaticSymbol, (context: StaticSymbol, args: any[]) => any>();
   private injectionToken: StaticSymbol;
   private opaqueToken: StaticSymbol;
+  private ROUTES: StaticSymbol;
+  private ANALYZE_FOR_ENTRY_COMPONENTS: StaticSymbol;
   private annotationForParentClassWithSummaryKind = new Map<CompileSummaryKind, any[]>();
   private annotationNames = new Map<any, string>();
 
@@ -67,25 +76,17 @@ export class StaticReflector implements ɵReflectorReader {
     this.annotationNames.set(Injectable, 'Injectable');
   }
 
-  importUri(typeOrFunc: StaticSymbol): string|null {
-    const staticSymbol = this.findSymbolDeclaration(typeOrFunc);
-    return staticSymbol ? staticSymbol.filePath : null;
-  }
-
-  resourceUri(typeOrFunc: StaticSymbol): string {
+  componentModuleUrl(typeOrFunc: StaticSymbol): string {
     const staticSymbol = this.findSymbolDeclaration(typeOrFunc);
     return this.symbolResolver.getResourcePath(staticSymbol);
   }
 
-  resolveIdentifier(name: string, moduleUrl: string, members: string[]): StaticSymbol {
-    const importSymbol = this.getStaticSymbol(moduleUrl, name);
-    const rootSymbol = this.findDeclaration(moduleUrl, name);
+  resolveExternalReference(ref: o.ExternalReference): StaticSymbol {
+    const importSymbol = this.getStaticSymbol(ref.moduleName !, ref.name !);
+    const rootSymbol = this.findDeclaration(ref.moduleName !, ref.name !);
     if (importSymbol != rootSymbol) {
       this.symbolResolver.recordImportAs(rootSymbol, importSymbol);
     }
-    if (members && members.length) {
-      return this.getStaticSymbol(rootSymbol.filePath, rootSymbol.name, members);
-    }
     return rootSymbol;
   }
 
@@ -94,6 +95,10 @@ export class StaticReflector implements ɵReflectorReader {
         this.symbolResolver.getSymbolByModule(moduleUrl, name, containingFile));
   }
 
+  tryFindDeclaration(moduleUrl: string, name: string): StaticSymbol {
+    return this.symbolResolver.ignoreErrorsFor(() => this.findDeclaration(moduleUrl, name));
+  }
+
   findSymbolDeclaration(symbol: StaticSymbol): StaticSymbol {
     const resolvedSymbol = this.symbolResolver.resolveSymbol(symbol);
     if (resolvedSymbol && resolvedSymbol.metadata instanceof StaticSymbol) {
@@ -103,12 +108,6 @@ export class StaticReflector implements ɵReflectorReader {
     }
   }
 
-  resolveEnum(enumIdentifier: any, name: string): any {
-    const staticSymbol: StaticSymbol = enumIdentifier;
-    const members = (staticSymbol.members || []).concat(name);
-    return this.getStaticSymbol(staticSymbol.filePath, staticSymbol.name, members);
-  }
-
   public annotations(type: StaticSymbol): any[] {
     let annotations = this.annotationCache.get(type);
     if (!annotations) {
@@ -194,14 +193,13 @@ export class StaticReflector implements ɵReflectorReader {
         const ctorData = members ? members['__ctor__'] : null;
         if (ctorData) {
           const ctor = (<any[]>ctorData).find(a => a['__symbolic'] == 'constructor');
-          const parameterTypes = <any[]>this.simplify(type, ctor['parameters'] || []);
+          const rawParameterTypes = <any[]>ctor['parameters'] || [];
           const parameterDecorators = <any[]>this.simplify(type, ctor['parameterDecorators'] || []);
           parameters = [];
-          parameterTypes.forEach((paramType, index) => {
+          rawParameterTypes.forEach((rawParamType, index) => {
             const nestedResult: any[] = [];
-            if (paramType) {
-              nestedResult.push(paramType);
-            }
+            const paramType = this.trySimplify(type, rawParamType);
+            if (paramType) nestedResult.push(paramType);
             const decorators = parameterDecorators ? parameterDecorators[index] : null;
             if (decorators) {
               nestedResult.push(...decorators);
@@ -280,6 +278,9 @@ export class StaticReflector implements ɵReflectorReader {
   private initializeConversionMap(): void {
     this.injectionToken = this.findDeclaration(ANGULAR_CORE, 'InjectionToken');
     this.opaqueToken = this.findDeclaration(ANGULAR_CORE, 'OpaqueToken');
+    this.ROUTES = this.tryFindDeclaration(ANGULAR_ROUTER, 'ROUTES');
+    this.ANALYZE_FOR_ENTRY_COMPONENTS =
+        this.findDeclaration(ANGULAR_CORE, 'ANALYZE_FOR_ENTRY_COMPONENTS');
 
     this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Host'), Host);
     this._registerDecoratorOrConstructor(
@@ -363,7 +364,8 @@ export class StaticReflector implements ɵReflectorReader {
     let scope = BindingScope.empty;
     const calling = new Map<StaticSymbol, boolean>();
 
-    function simplifyInContext(context: StaticSymbol, value: any, depth: number): any {
+    function simplifyInContext(
+        context: StaticSymbol, value: any, depth: number, references: number): any {
       function resolveReferenceValue(staticSymbol: StaticSymbol): any {
         const resolvedSymbol = self.symbolResolver.resolveSymbol(staticSymbol);
         return resolvedSymbol ? resolvedSymbol.metadata : null;
@@ -380,7 +382,7 @@ export class StaticReflector implements ɵReflectorReader {
             if (value && (depth != 0 || value.__symbolic != 'error')) {
               const parameters: string[] = targetFunction['parameters'];
               const defaults: any[] = targetFunction.defaults;
-              args = args.map(arg => simplifyInContext(context, arg, depth + 1))
+              args = args.map(arg => simplifyInContext(context, arg, depth + 1, references))
                          .map(arg => shouldIgnore(arg) ? undefined : arg);
               if (defaults && defaults.length > args.length) {
                 args.push(...defaults.slice(args.length).map((value: any) => simplify(value)));
@@ -393,7 +395,7 @@ export class StaticReflector implements ɵReflectorReader {
               let result: any;
               try {
                 scope = functionScope.done();
-                result = simplifyInContext(functionSymbol, value, depth + 1);
+                result = simplifyInContext(functionSymbol, value, depth + 1, references);
               } finally {
                 scope = oldScope;
               }
@@ -440,15 +442,15 @@ export class StaticReflector implements ɵReflectorReader {
           return result;
         }
         if (expression instanceof StaticSymbol) {
-          // Stop simplification at builtin symbols
+          // Stop simplification at builtin symbols or if we are in a reference context
           if (expression === self.injectionToken || expression === self.opaqueToken ||
-              self.conversionMap.has(expression)) {
+              self.conversionMap.has(expression) || references > 0) {
             return expression;
           } else {
             const staticSymbol = expression;
             const declarationValue = resolveReferenceValue(staticSymbol);
             if (declarationValue) {
-              return simplifyInContext(staticSymbol, declarationValue, depth + 1);
+              return simplifyInContext(staticSymbol, declarationValue, depth + 1, references);
             } else {
               return staticSymbol;
             }
@@ -539,13 +541,15 @@ export class StaticReflector implements ɵReflectorReader {
                       self.getStaticSymbol(selectTarget.filePath, selectTarget.name, members);
                   const declarationValue = resolveReferenceValue(selectContext);
                   if (declarationValue) {
-                    return simplifyInContext(selectContext, declarationValue, depth + 1);
+                    return simplifyInContext(
+                        selectContext, declarationValue, depth + 1, references);
                   } else {
                     return selectContext;
                   }
                 }
                 if (selectTarget && isPrimitive(member))
-                  return simplifyInContext(selectContext, selectTarget[member], depth + 1);
+                  return simplifyInContext(
+                      selectContext, selectTarget[member], depth + 1, references);
                 return null;
               case 'reference':
                 // Note: This only has to deal with variable references,
@@ -564,7 +568,8 @@ export class StaticReflector implements ɵReflectorReader {
               case 'new':
               case 'call':
                 // Determine if the function is a built-in conversion
-                staticSymbol = simplifyInContext(context, expression['expression'], depth + 1);
+                staticSymbol = simplifyInContext(
+                    context, expression['expression'], depth + 1, /* references */ 0);
                 if (staticSymbol instanceof StaticSymbol) {
                   if (staticSymbol === self.injectionToken || staticSymbol === self.opaqueToken) {
                     // if somebody calls new InjectionToken, don't create an InjectionToken,
@@ -575,7 +580,8 @@ export class StaticReflector implements ɵReflectorReader {
                   let converter = self.conversionMap.get(staticSymbol);
                   if (converter) {
                     const args =
-                        argExpressions.map(arg => simplifyInContext(context, arg, depth + 1))
+                        argExpressions
+                            .map(arg => simplifyInContext(context, arg, depth + 1, references))
                             .map(arg => shouldIgnore(arg) ? undefined : arg);
                     return converter(context, args);
                   } else {
@@ -584,7 +590,7 @@ export class StaticReflector implements ɵReflectorReader {
                     return simplifyCall(staticSymbol, targetFunction, argExpressions);
                   }
                 }
-                break;
+                return IGNORE;
               case 'error':
                 let message = produceErrorMessage(expression);
                 if (expression['line']) {
@@ -603,7 +609,20 @@ export class StaticReflector implements ɵReflectorReader {
             }
             return null;
           }
-          return mapStringMap(expression, (value, name) => simplify(value));
+          return mapStringMap(expression, (value, name) => {
+            if (REFERENCE_SET.has(name)) {
+              if (name === USE_VALUE && PROVIDE in expression) {
+                // If this is a provider expression, check for special tokens that need the value
+                // during analysis.
+                const provide = simplify(expression.provide);
+                if (provide === self.ROUTES || provide == self.ANALYZE_FOR_ENTRY_COMPONENTS) {
+                  return simplify(value);
+                }
+              }
+              return simplifyInContext(context, value, depth, references + 1);
+            }
+            return simplify(value)
+          });
         }
         return IGNORE;
       }
@@ -621,16 +640,16 @@ export class StaticReflector implements ɵReflectorReader {
       }
     }
 
-    const recordedSimplifyInContext = (context: StaticSymbol, value: any, depth: number) => {
+    const recordedSimplifyInContext = (context: StaticSymbol, value: any) => {
       try {
-        return simplifyInContext(context, value, depth);
+        return simplifyInContext(context, value, 0, 0);
       } catch (e) {
         this.reportError(e, context);
       }
     };
 
-    const result = this.errorRecorder ? recordedSimplifyInContext(context, value, 0) :
-                                        simplifyInContext(context, value, 0);
+    const result = this.errorRecorder ? recordedSimplifyInContext(context, value) :
+                                        simplifyInContext(context, value, 0, 0);
     if (shouldIgnore(result)) {
       return undefined;
     }
diff --git a/packages/compiler/src/aot/static_symbol_resolver.ts b/packages/compiler/src/aot/static_symbol_resolver.ts
index 8e0f645869..80d3ec5be4 100644
--- a/packages/compiler/src/aot/static_symbol_resolver.ts
+++ b/packages/compiler/src/aot/static_symbol_resolver.ts
@@ -10,7 +10,7 @@ import {SummaryResolver} from '../summary_resolver';
 import {ValueTransformer, visitValue} from '../util';
 
 import {StaticSymbol, StaticSymbolCache} from './static_symbol';
-import {isNgFactoryFile} from './util';
+import {isGeneratedFile, stripSummaryForJitFileSuffix, stripSummaryForJitNameSuffix, summaryForJitFileName, summaryForJitName} from './util';
 
 export class ResolvedStaticSymbol {
   constructor(public symbol: StaticSymbol, public metadata: any) {}
@@ -39,6 +39,13 @@ export interface StaticSymbolResolverHost {
    * `path/to/containingFile.ts` containing `import {...} from 'module-name'`.
    */
   moduleNameToFileName(moduleName: string, containingFile?: string): string|null;
+  /**
+   * Converts a file path to a module name that can be used as an `import.
+   * I.e. `path/to/importedFile.ts` should be imported by `path/to/containingFile.ts`.
+   *
+   * See ImportResolver.
+   */
+  fileNameToModuleName(importedFilePath: string, containingFilePath: string): string|null;
 }
 
 const SUPPORTED_SCHEMA_VERSION = 3;
@@ -60,6 +67,7 @@ export class StaticSymbolResolver {
   private importAs = new Map<StaticSymbol, StaticSymbol>();
   private symbolResourcePaths = new Map<StaticSymbol, string>();
   private symbolFromFile = new Map<string, StaticSymbol[]>();
+  private knownFileNameToModuleNames = new Map<string, string>();
 
   constructor(
       private host: StaticSymbolResolverHost, private staticSymbolCache: StaticSymbolCache,
@@ -103,6 +111,18 @@ export class StaticSymbolResolver {
           this.getStaticSymbol(baseImportAs.filePath, baseImportAs.name, staticSymbol.members) :
           null;
     }
+    const summarizedFileName = stripSummaryForJitFileSuffix(staticSymbol.filePath);
+    if (summarizedFileName !== staticSymbol.filePath) {
+      const summarizedName = stripSummaryForJitNameSuffix(staticSymbol.name);
+      const baseSymbol =
+          this.getStaticSymbol(summarizedFileName, summarizedName, staticSymbol.members);
+      const baseImportAs = this.getImportAs(baseSymbol);
+      return baseImportAs ?
+          this.getStaticSymbol(
+              summaryForJitFileName(baseImportAs.filePath), summaryForJitName(baseImportAs.name),
+              baseSymbol.members) :
+          null;
+    }
     let result = this.summaryResolver.getImportAs(staticSymbol);
     if (!result) {
       result = this.importAs.get(staticSymbol) !;
@@ -124,11 +144,11 @@ export class StaticSymbolResolver {
    * has. If the symbol is not a type the result is null.
    */
   getTypeArity(staticSymbol: StaticSymbol): number|null {
-    // If the file is a factory file, don't resolve the symbol as doing so would
-    // cause the metadata for an factory file to be loaded which doesn't exist.
+    // If the file is a factory/ngsummary file, don't resolve the symbol as doing so would
+    // cause the metadata for an factory/ngsummary file to be loaded which doesn't exist.
     // All references to generated classes must include the correct arity whenever
     // generating code.
-    if (isNgFactoryFile(staticSymbol.filePath)) {
+    if (isGeneratedFile(staticSymbol.filePath)) {
       return null;
     }
     let resolvedSymbol = this.resolveSymbol(staticSymbol);
@@ -138,6 +158,14 @@ export class StaticSymbolResolver {
     return (resolvedSymbol && resolvedSymbol.metadata && resolvedSymbol.metadata.arity) || null;
   }
 
+  /**
+   * Converts a file path to a module name that can be used as an `import`.
+   */
+  fileNameToModuleName(importedFilePath: string, containingFilePath: string): string|null {
+    return this.knownFileNameToModuleNames.get(importedFilePath) ||
+        this.host.fileNameToModuleName(importedFilePath, containingFilePath);
+  }
+
   recordImportAs(sourceSymbol: StaticSymbol, targetSymbol: StaticSymbol) {
     sourceSymbol.assertNoMembers();
     targetSymbol.assertNoMembers();
@@ -163,6 +191,17 @@ export class StaticSymbolResolver {
     }
   }
 
+  /* @internal */
+  ignoreErrorsFor<T>(cb: () => T) {
+    const recorder = this.errorRecorder;
+    this.errorRecorder = () => {};
+    try {
+      return cb();
+    } finally {
+      this.errorRecorder = recorder;
+    }
+  }
+
   private _resolveSymbolMembers(staticSymbol: StaticSymbol): ResolvedStaticSymbol|null {
     const members = staticSymbol.members;
     const baseResolvedSymbol =
@@ -226,6 +265,11 @@ export class StaticSymbolResolver {
     this.resolvedFilePaths.add(filePath);
     const resolvedSymbols: ResolvedStaticSymbol[] = [];
     const metadata = this.getModuleMetadata(filePath);
+    if (metadata['importAs']) {
+      // Index bundle indices should use the importAs module name defined
+      // in the bundle.
+      this.knownFileNameToModuleNames.set(filePath, metadata['importAs']);
+    }
     if (metadata['metadata']) {
       // handle direct declarations of the symbol
       const topLevelSymbolNames =
@@ -236,13 +280,6 @@ export class StaticSymbolResolver {
         const name = unescapeIdentifier(metadataKey);
 
         const symbol = this.getStaticSymbol(filePath, name);
-        let importSymbol: StaticSymbol|undefined = undefined;
-        if (metadata['importAs']) {
-          // Index bundle indexes should use the importAs module name instead of a reference
-          // to the .d.ts file directly.
-          importSymbol = this.getStaticSymbol(metadata['importAs'], name);
-          this.recordImportAs(symbol, importSymbol);
-        }
 
         const origin = origins.hasOwnProperty(metadataKey) && origins[metadataKey];
         if (origin) {
@@ -420,6 +457,7 @@ export class StaticSymbolResolver {
     return moduleMetadata;
   }
 
+
   getSymbolByModule(module: string, symbolName: string, containingFile?: string): StaticSymbol {
     const filePath = this.resolveModule(module, containingFile);
     if (!filePath) {
diff --git a/packages/compiler/src/aot/summary_resolver.ts b/packages/compiler/src/aot/summary_resolver.ts
index c42e810906..52f7857629 100644
--- a/packages/compiler/src/aot/summary_resolver.ts
+++ b/packages/compiler/src/aot/summary_resolver.ts
@@ -10,7 +10,7 @@ import {Summary, SummaryResolver} from '../summary_resolver';
 
 import {StaticSymbol, StaticSymbolCache} from './static_symbol';
 import {deserializeSummaries} from './summary_serializer';
-import {ngfactoryFilePath, stripNgFactory, summaryFileName} from './util';
+import {ngfactoryFilePath, stripGeneratedFileSuffix, summaryFileName} from './util';
 
 export interface AotSummaryResolverHost {
   /**
@@ -43,7 +43,7 @@ export class AotSummaryResolver implements SummaryResolver<StaticSymbol> {
     // Note: We need to strip the .ngfactory. file path,
     // so this method also works for generated files
     // (for which host.isSourceFile will always return false).
-    return !this.host.isSourceFile(stripNgFactory(filePath));
+    return !this.host.isSourceFile(stripGeneratedFileSuffix(filePath));
   }
 
   getLibraryFileName(filePath: string) { return this.host.getOutputFileName(filePath); }
@@ -68,6 +68,8 @@ export class AotSummaryResolver implements SummaryResolver<StaticSymbol> {
     return this.importAs.get(staticSymbol) !;
   }
 
+  addSummary(summary: Summary<StaticSymbol>) { this.summaryCache.set(summary.symbol, summary); }
+
   private _loadSummaryFile(filePath: string) {
     if (this.loadedFilePaths.has(filePath)) {
       return;
diff --git a/packages/compiler/src/aot/summary_serializer.ts b/packages/compiler/src/aot/summary_serializer.ts
index 75e0d0b365..f5d9432374 100644
--- a/packages/compiler/src/aot/summary_serializer.ts
+++ b/packages/compiler/src/aot/summary_serializer.ts
@@ -5,31 +5,36 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {CompileNgModuleSummary, CompileSummaryKind, CompileTypeSummary} from '../compile_metadata';
+import {CompileDirectiveMetadata, CompileDirectiveSummary, CompileNgModuleMetadata, CompileNgModuleSummary, CompilePipeMetadata, CompileProviderMetadata, CompileSummaryKind, CompileTypeMetadata, CompileTypeSummary} from '../compile_metadata';
+import * as o from '../output/output_ast';
 import {Summary, SummaryResolver} from '../summary_resolver';
-import {ValueTransformer, visitValue} from '../util';
+import {OutputContext, ValueTransformer, ValueVisitor, visitValue} from '../util';
 
 import {StaticSymbol, StaticSymbolCache} from './static_symbol';
 import {ResolvedStaticSymbol, StaticSymbolResolver} from './static_symbol_resolver';
-
+import {summaryForJitFileName, summaryForJitName} from './util';
 
 export function serializeSummaries(
-    summaryResolver: SummaryResolver<StaticSymbol>, symbolResolver: StaticSymbolResolver,
-    symbols: ResolvedStaticSymbol[], types: CompileTypeSummary[]):
-    {json: string, exportAs: {symbol: StaticSymbol, exportAs: string}[]} {
-  const serializer = new Serializer(symbolResolver, summaryResolver);
+    forJitCtx: OutputContext, summaryResolver: SummaryResolver<StaticSymbol>,
+    symbolResolver: StaticSymbolResolver, symbols: ResolvedStaticSymbol[], types: {
+      summary: CompileTypeSummary,
+      metadata: CompileNgModuleMetadata | CompileDirectiveMetadata | CompilePipeMetadata |
+          CompileTypeMetadata
+    }[]): {json: string, exportAs: {symbol: StaticSymbol, exportAs: string}[]} {
+  const toJsonSerializer = new ToJsonSerializer(symbolResolver, summaryResolver);
+  const forJitSerializer = new ForJitSerializer(forJitCtx, symbolResolver);
 
   // for symbols, we use everything except for the class metadata itself
   // (we keep the statics though), as the class metadata is contained in the
   // CompileTypeSummary.
   symbols.forEach(
-      (resolvedSymbol) => serializer.addOrMergeSummary(
+      (resolvedSymbol) => toJsonSerializer.addOrMergeSummary(
           {symbol: resolvedSymbol.symbol, metadata: resolvedSymbol.metadata}));
   // Add summaries that are referenced by the given symbols (transitively)
   // Note: the serializer.symbols array might be growing while
   // we execute the loop!
-  for (let processedIndex = 0; processedIndex < serializer.symbols.length; processedIndex++) {
-    const symbol = serializer.symbols[processedIndex];
+  for (let processedIndex = 0; processedIndex < toJsonSerializer.symbols.length; processedIndex++) {
+    const symbol = toJsonSerializer.symbols[processedIndex];
     if (summaryResolver.isLibraryFile(symbol.filePath)) {
       let summary = summaryResolver.resolveSummary(symbol);
       if (!summary) {
@@ -42,7 +47,10 @@ export function serializeSummaries(
         }
       }
       if (summary) {
-        serializer.addOrMergeSummary(summary);
+        if (summary.type) {
+          forJitSerializer.addLibType(summary.type);
+        }
+        toJsonSerializer.addOrMergeSummary(summary);
       }
     }
   }
@@ -51,32 +59,48 @@ export function serializeSummaries(
   // Note: We don't add the summaries of all referenced symbols as for the ResolvedSymbols,
   // as the type summaries already contain the transitive data that they require
   // (in a minimal way).
-  types.forEach((typeSummary) => {
-    serializer.addOrMergeSummary(
-        {symbol: typeSummary.type.reference, metadata: null, type: typeSummary});
-    if (typeSummary.summaryKind === CompileSummaryKind.NgModule) {
-      const ngModuleSummary = <CompileNgModuleSummary>typeSummary;
+  types.forEach(({summary, metadata}) => {
+    forJitSerializer.addSourceType(summary, metadata);
+    toJsonSerializer.addOrMergeSummary(
+        {symbol: summary.type.reference, metadata: null, type: summary});
+    if (summary.summaryKind === CompileSummaryKind.NgModule) {
+      const ngModuleSummary = <CompileNgModuleSummary>summary;
       ngModuleSummary.exportedDirectives.concat(ngModuleSummary.exportedPipes).forEach((id) => {
         const symbol: StaticSymbol = id.reference;
         if (summaryResolver.isLibraryFile(symbol.filePath)) {
           const summary = summaryResolver.resolveSummary(symbol);
           if (summary) {
-            serializer.addOrMergeSummary(summary);
+            toJsonSerializer.addOrMergeSummary(summary);
           }
         }
       });
     }
   });
-  return serializer.serialize();
+  const {json, exportAs} = toJsonSerializer.serialize();
+  forJitSerializer.serialize(exportAs);
+  return {json, exportAs};
 }
 
 export function deserializeSummaries(symbolCache: StaticSymbolCache, json: string):
     {summaries: Summary<StaticSymbol>[], importAs: {symbol: StaticSymbol, importAs: string}[]} {
-  const deserializer = new Deserializer(symbolCache);
+  const deserializer = new FromJsonDeserializer(symbolCache);
   return deserializer.deserialize(json);
 }
 
-class Serializer extends ValueTransformer {
+export function createForJitStub(outputCtx: OutputContext, reference: StaticSymbol) {
+  return createSummaryForJitFunction(outputCtx, reference, o.NULL_EXPR);
+}
+
+function createSummaryForJitFunction(
+    outputCtx: OutputContext, reference: StaticSymbol, value: o.Expression) {
+  const fnName = summaryForJitName(reference.name);
+  outputCtx.statements.push(
+      o.fn([], [new o.ReturnStatement(value)], new o.ArrayType(o.DYNAMIC_TYPE)).toDeclStmt(fnName, [
+        o.StmtModifier.Final, o.StmtModifier.Exported
+      ]));
+}
+
+class ToJsonSerializer extends ValueTransformer {
   // Note: This only contains symbols without members.
   symbols: StaticSymbol[] = [];
   private indexBySymbol = new Map<StaticSymbol, number>();
@@ -142,7 +166,7 @@ class Serializer extends ValueTransformer {
           __symbol: index,
           name: symbol.name,
           // We convert the source filenames tinto output filenames,
-          // as the generated summary file will be used when teh current
+          // as the generated summary file will be used when the current
           // compilation unit is used as a library
           filePath: this.summaryResolver.getLibraryFileName(symbol.filePath),
           importAs: importAs
@@ -169,7 +193,128 @@ class Serializer extends ValueTransformer {
   }
 }
 
-class Deserializer extends ValueTransformer {
+class ForJitSerializer {
+  private data = new Map<StaticSymbol, {
+    summary: CompileTypeSummary,
+    metadata: CompileNgModuleMetadata|CompileDirectiveMetadata|CompilePipeMetadata|
+    CompileTypeMetadata|null,
+    isLibrary: boolean
+  }>();
+
+  constructor(private outputCtx: OutputContext, private symbolResolver: StaticSymbolResolver) {}
+
+  addSourceType(
+      summary: CompileTypeSummary, metadata: CompileNgModuleMetadata|CompileDirectiveMetadata|
+      CompilePipeMetadata|CompileTypeMetadata) {
+    this.data.set(summary.type.reference, {summary, metadata, isLibrary: false});
+  }
+
+  addLibType(summary: CompileTypeSummary) {
+    this.data.set(summary.type.reference, {summary, metadata: null, isLibrary: true});
+  }
+
+  serialize(exportAs: {symbol: StaticSymbol, exportAs: string}[]): void {
+    const ngModuleSymbols = new Set<StaticSymbol>();
+
+    Array.from(this.data.values()).forEach(({summary, metadata, isLibrary}) => {
+      if (summary.summaryKind === CompileSummaryKind.NgModule) {
+        // collect the symbols that refer to NgModule classes.
+        // Note: we can't just rely on `summary.type.summaryKind` to determine this as
+        // we don't add the summaries of all referenced symbols when we serialize type summaries.
+        // See serializeSummaries for details.
+        ngModuleSymbols.add(summary.type.reference);
+        const modSummary = <CompileNgModuleSummary>summary;
+        modSummary.modules.forEach((mod) => { ngModuleSymbols.add(mod.reference); });
+      }
+      if (!isLibrary) {
+        const fnName = summaryForJitName(summary.type.reference.name);
+        createSummaryForJitFunction(
+            this.outputCtx, summary.type.reference,
+            this.serializeSummaryWithDeps(summary, metadata !));
+      }
+    });
+
+    exportAs.forEach((entry) => {
+      const symbol = entry.symbol;
+      if (ngModuleSymbols.has(symbol)) {
+        const jitExportAsName = summaryForJitName(entry.exportAs);
+        this.outputCtx.statements.push(
+            o.variable(jitExportAsName).set(this.serializeSummaryRef(symbol)).toDeclStmt(null, [
+              o.StmtModifier.Exported
+            ]));
+      }
+    });
+  }
+
+  private serializeSummaryWithDeps(
+      summary: CompileTypeSummary, metadata: CompileNgModuleMetadata|CompileDirectiveMetadata|
+      CompilePipeMetadata|CompileTypeMetadata): o.Expression {
+    const expressions: o.Expression[] = [this.serializeSummary(summary)];
+    let providers: CompileProviderMetadata[] = [];
+    if (metadata instanceof CompileNgModuleMetadata) {
+      expressions.push(...
+                       // For directives / pipes, we only add the declared ones,
+                       // and rely on transitively importing NgModules to get the transitive
+                       // summaries.
+                       metadata.declaredDirectives.concat(metadata.declaredPipes)
+                           .map(type => type.reference)
+                           // For modules,
+                           // we also add the summaries for modules
+                           // from libraries.
+                           // This is ok as we produce reexports for all transitive modules.
+                           .concat(metadata.transitiveModule.modules.map(type => type.reference)
+                                       .filter(ref => ref !== metadata.type.reference))
+                           .map((ref) => this.serializeSummaryRef(ref)));
+      // Note: We don't use `NgModuleSummary.providers`, as that one is transitive,
+      // and we already have transitive modules.
+      providers = metadata.providers;
+    } else if (summary.summaryKind === CompileSummaryKind.Directive) {
+      const dirSummary = <CompileDirectiveSummary>summary;
+      providers = dirSummary.providers.concat(dirSummary.viewProviders);
+    }
+    // Note: We can't just refer to the `ngsummary.ts` files for `useClass` providers (as we do for
+    // declaredDirectives / declaredPipes), as we allow
+    // providers without ctor arguments to skip the `@Injectable` decorator,
+    // i.e. we didn't generate .ngsummary.ts files for these.
+    expressions.push(
+        ...providers.filter(provider => !!provider.useClass).map(provider => this.serializeSummary({
+          summaryKind: CompileSummaryKind.Injectable, type: provider.useClass
+        } as CompileTypeSummary)));
+    return o.literalArr(expressions);
+  }
+
+  private serializeSummaryRef(typeSymbol: StaticSymbol): o.Expression {
+    const jitImportedSymbol = this.symbolResolver.getStaticSymbol(
+        summaryForJitFileName(typeSymbol.filePath), summaryForJitName(typeSymbol.name));
+    return this.outputCtx.importExpr(jitImportedSymbol);
+  }
+
+  private serializeSummary(data: {[key: string]: any}): o.Expression {
+    const outputCtx = this.outputCtx;
+
+    class Transformer implements ValueVisitor {
+      visitArray(arr: any[], context: any): any {
+        return o.literalArr(arr.map(entry => visitValue(entry, this, context)));
+      }
+      visitStringMap(map: {[key: string]: any}, context: any): any {
+        return new o.LiteralMapExpr(Object.keys(map).map(
+            (key) => new o.LiteralMapEntry(key, visitValue(map[key], this, context), false)));
+      }
+      visitPrimitive(value: any, context: any): any { return o.literal(value); }
+      visitOther(value: any, context: any): any {
+        if (value instanceof StaticSymbol) {
+          return outputCtx.importExpr(value);
+        } else {
+          throw new Error(`Illegal State: Encountered value ${value}`);
+        }
+      }
+    }
+
+    return visitValue(data, new Transformer(), null);
+  }
+}
+
+class FromJsonDeserializer extends ValueTransformer {
   private symbols: StaticSymbol[];
 
   constructor(private symbolCache: StaticSymbolCache) { super(); }
diff --git a/packages/compiler/src/aot/util.ts b/packages/compiler/src/aot/util.ts
index 4285f805ec..1d02da8d1e 100644
--- a/packages/compiler/src/aot/util.ts
+++ b/packages/compiler/src/aot/util.ts
@@ -7,24 +7,27 @@
  */
 
 const STRIP_SRC_FILE_SUFFIXES = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
-const NG_FACTORY = /\.ngfactory\./;
+const GENERATED_FILE = /\.ngfactory\.|\.ngsummary\./;
+const GENERATED_MODULE = /\.ngfactory$|\.ngsummary$/;
+const JIT_SUMMARY_FILE = /\.ngsummary\./;
+const JIT_SUMMARY_NAME = /NgSummary$/;
 
-export function ngfactoryFilePath(filePath: string): string {
-  const urlWithSuffix = splitTypescriptSuffix(filePath);
+export function ngfactoryFilePath(filePath: string, forceSourceFile = false): string {
+  const urlWithSuffix = splitTypescriptSuffix(filePath, forceSourceFile);
   return `${urlWithSuffix[0]}.ngfactory${urlWithSuffix[1]}`;
 }
 
-export function stripNgFactory(filePath: string): string {
-  return filePath.replace(NG_FACTORY, '.');
+export function stripGeneratedFileSuffix(filePath: string): string {
+  return filePath.replace(GENERATED_FILE, '.');
 }
 
-export function isNgFactoryFile(filePath: string): boolean {
-  return NG_FACTORY.test(filePath);
+export function isGeneratedFile(filePath: string): boolean {
+  return GENERATED_FILE.test(filePath);
 }
 
-export function splitTypescriptSuffix(path: string): string[] {
+export function splitTypescriptSuffix(path: string, forceSourceFile = false): string[] {
   if (path.endsWith('.d.ts')) {
-    return [path.slice(0, -5), '.ts'];
+    return [path.slice(0, -5), forceSourceFile ? '.ts' : '.d.ts'];
   }
 
   const lastDot = path.lastIndexOf('.');
@@ -40,3 +43,20 @@ export function summaryFileName(fileName: string): string {
   const fileNameWithoutSuffix = fileName.replace(STRIP_SRC_FILE_SUFFIXES, '');
   return `${fileNameWithoutSuffix}.ngsummary.json`;
 }
+
+export function summaryForJitFileName(fileName: string, forceSourceFile = false): string {
+  const urlWithSuffix = splitTypescriptSuffix(stripGeneratedFileSuffix(fileName), forceSourceFile);
+  return `${urlWithSuffix[0]}.ngsummary${urlWithSuffix[1]}`;
+}
+
+export function stripSummaryForJitFileSuffix(filePath: string): string {
+  return filePath.replace(JIT_SUMMARY_FILE, '.');
+}
+
+export function summaryForJitName(symbolName: string): string {
+  return `${symbolName}NgSummary`;
+}
+
+export function stripSummaryForJitNameSuffix(symbolName: string): string {
+  return symbolName.replace(JIT_SUMMARY_NAME, '');
+}
\ No newline at end of file
diff --git a/packages/language-service/src/ast_path.ts b/packages/compiler/src/ast_path.ts
similarity index 53%
rename from packages/language-service/src/ast_path.ts
rename to packages/compiler/src/ast_path.ts
index a1003945f9..b899bac985 100644
--- a/packages/language-service/src/ast_path.ts
+++ b/packages/compiler/src/ast_path.ts
@@ -6,14 +6,33 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+/**
+ * A path is an ordered set of elements. Typically a path is to  a
+ * particular offset in a source file. The head of the list is the top
+ * most node. The tail is the node that contains the offset directly.
+ *
+ * For example, the expresion `a + b + c` might have an ast that looks
+ * like:
+ *     +
+ *    / \
+ *   a   +
+ *      / \
+ *     b   c
+ *
+ * The path to the node at offset 9 would be `['+' at 1-10, '+' at 7-10,
+ * 'c' at 9-10]` and the path the node at offset 1 would be
+ * `['+' at 1-10, 'a' at 1-2]`.
+ */
 export class AstPath<T> {
-  constructor(private path: T[]) {}
+  constructor(private path: T[], public position: number = -1) {}
 
   get empty(): boolean { return !this.path || !this.path.length; }
   get head(): T|undefined { return this.path[0]; }
   get tail(): T|undefined { return this.path[this.path.length - 1]; }
 
-  parentOf(node: T): T|undefined { return this.path[this.path.indexOf(node) - 1]; }
+  parentOf(node: T|undefined): T|undefined {
+    return node && this.path[this.path.indexOf(node) - 1];
+  }
   childOf(node: T): T|undefined { return this.path[this.path.indexOf(node) + 1]; }
 
   first<N extends T>(ctor: {new (...args: any[]): N}): N|undefined {
diff --git a/packages/compiler/src/compile_metadata.ts b/packages/compiler/src/compile_metadata.ts
index ea0d1f4ea2..8d2b5c4f1e 100644
--- a/packages/compiler/src/compile_metadata.ts
+++ b/packages/compiler/src/compile_metadata.ts
@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, ComponentFactory, RendererType2, SchemaMetadata, Type, ViewEncapsulation, ɵLifecycleHooks, ɵreflector, ɵstringify as stringify} from '@angular/core';
+import {ChangeDetectionStrategy, ComponentFactory, RendererType2, SchemaMetadata, Type, ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
 
 import {StaticSymbol} from './aot/static_symbol';
+import {LifecycleHooks} from './lifecycle_reflector';
 import {CssSelector} from './selector';
 import {splitAtColon} from './util';
 
@@ -111,7 +112,8 @@ export function identifierModuleUrl(compileIdentifier: CompileIdentifierMetadata
   if (ref instanceof StaticSymbol) {
     return ref.filePath;
   }
-  return ɵreflector.importUri(ref);
+  // Runtime type
+  return `./${stringify(ref)}`;
 }
 
 export function viewClassName(compType: any, embeddedTemplateIndex: number): string {
@@ -126,10 +128,6 @@ export function hostViewClassName(compType: any): string {
   return `HostView_${identifierName({reference: compType})}`;
 }
 
-export function dirWrapperClassName(dirType: any) {
-  return `Wrapper_${identifierName({reference: dirType})}`;
-}
-
 export function componentFactoryName(compType: any): string {
   return `${identifierName({reference: compType})}NgFactory`;
 }
@@ -203,7 +201,7 @@ export interface CompileTokenMetadata {
  */
 export interface CompileTypeMetadata extends CompileIdentifierMetadata {
   diDeps: CompileDiDependencyMetadata[];
-  lifecycleHooks: ɵLifecycleHooks[];
+  lifecycleHooks: LifecycleHooks[];
   reference: any;
 }
 
diff --git a/packages/compiler/src/compile_reflector.ts b/packages/compiler/src/compile_reflector.ts
new file mode 100644
index 0000000000..67eec55e54
--- /dev/null
+++ b/packages/compiler/src/compile_reflector.ts
@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+import * as o from './output/output_ast';
+
+/**
+ * Provides access to reflection data about symbols that the compiler needs.
+ */
+export abstract class CompileReflector {
+  abstract parameters(typeOrFunc: /*Type*/ any): any[][];
+  abstract annotations(typeOrFunc: /*Type*/ any): any[];
+  abstract propMetadata(typeOrFunc: /*Type*/ any): {[key: string]: any[]};
+  abstract hasLifecycleHook(type: any, lcProperty: string): boolean;
+  abstract componentModuleUrl(type: /*Type*/ any, cmpMetadata: Component): string;
+  abstract resolveExternalReference(ref: o.ExternalReference): any;
+}
diff --git a/packages/compiler/src/compiler.ts b/packages/compiler/src/compiler.ts
index 6ddab6402d..8a88d720b9 100644
--- a/packages/compiler/src/compiler.ts
+++ b/packages/compiler/src/compiler.ts
@@ -32,13 +32,15 @@ export * from './aot/generated_file';
 export * from './aot/compiler_options';
 export * from './aot/compiler_host';
 export * from './aot/static_reflector';
-export * from './aot/static_reflection_capabilities';
 export * from './aot/static_symbol';
 export * from './aot/static_symbol_resolver';
 export * from './aot/summary_resolver';
+export * from './ast_path';
 export * from './summary_resolver';
 export {JitCompiler} from './jit/compiler';
 export * from './jit/compiler_factory';
+export * from './jit/jit_reflector';
+export * from './compile_reflector';
 export * from './url_resolver';
 export * from './resource_loader';
 export {DirectiveResolver} from './directive_resolver';
@@ -58,7 +60,8 @@ export * from './ml_parser/html_tags';
 export * from './ml_parser/interpolation_config';
 export * from './ml_parser/tags';
 export {NgModuleCompiler} from './ng_module_compiler';
-export * from './output/path_util';
+export {AssertNotNull, BinaryOperator, BinaryOperatorExpr, BuiltinMethod, BuiltinVar, CastExpr, ClassStmt, CommaExpr, CommentStmt, ConditionalExpr, DeclareFunctionStmt, DeclareVarStmt, ExpressionStatement, ExpressionVisitor, ExternalExpr, ExternalReference, FunctionExpr, IfStmt, InstantiateExpr, InvokeFunctionExpr, InvokeMethodExpr, LiteralArrayExpr, LiteralExpr, LiteralMapExpr, NotExpr, ReadKeyExpr, ReadPropExpr, ReadVarExpr, ReturnStatement, StatementVisitor, ThrowStmt, TryCatchStmt, WriteKeyExpr, WritePropExpr, WriteVarExpr, StmtModifier, Statement} from './output/output_ast';
+export {EmitterVisitorContext} from './output/abstract_emitter';
 export * from './output/ts_emitter';
 export * from './parse_util';
 export * from './schema/dom_element_schema_registry';
@@ -66,5 +69,5 @@ export * from './selector';
 export * from './style_compiler';
 export * from './template_parser/template_parser';
 export {ViewCompiler} from './view_compiler/view_compiler';
-export {isSyntaxError, syntaxError} from './util';
+export {getParseErrors, isSyntaxError, syntaxError} from './util';
 // This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/compiler/src/compiler_util/expression_converter.ts b/packages/compiler/src/compiler_util/expression_converter.ts
index 2a3350e8b8..a5abc8aa36 100644
--- a/packages/compiler/src/compiler_util/expression_converter.ts
+++ b/packages/compiler/src/compiler_util/expression_converter.ts
@@ -8,7 +8,7 @@
 
 
 import * as cdAst from '../expression_parser/ast';
-import {Identifiers, createIdentifier} from '../identifiers';
+import {Identifiers} from '../identifiers';
 import * as o from '../output/output_ast';
 
 export class EventHandlerVars { static event = o.variable('$event'); }
@@ -35,10 +35,16 @@ export function convertActionBinding(
           // Note: no caching for literal arrays in actions.
           return (args: o.Expression[]) => o.literalArr(args);
         },
-        createLiteralMapConverter: (keys: string[]) => {
+        createLiteralMapConverter: (keys: {key: string, quoted: boolean}[]) => {
           // Note: no caching for literal maps in actions.
-          return (args: o.Expression[]) =>
-                     o.literalMap(<[string, o.Expression][]>keys.map((key, i) => [key, args[i]]));
+          return (values: o.Expression[]) => {
+            const entries = keys.map((k, i) => ({
+                                       key: k.key,
+                                       value: values[i],
+                                       quoted: k.quoted,
+                                     }));
+            return o.literalMap(entries);
+          };
         },
         createPipeConverter: (name: string) => {
           throw new Error(`Illegal State: Actions are not allowed to contain pipes. Pipe: ${name}`);
@@ -71,7 +77,7 @@ export interface BuiltinConverter { (args: o.Expression[]): o.Expression; }
 
 export interface BuiltinConverterFactory {
   createLiteralArrayConverter(argCount: number): BuiltinConverter;
-  createLiteralMapConverter(keys: string[]): BuiltinConverter;
+  createLiteralMapConverter(keys: {key: string, quoted: boolean}[]): BuiltinConverter;
   createPipeConverter(name: string, argCount: number): BuiltinConverter;
 }
 
@@ -169,6 +175,7 @@ class _BuiltinAstConverter extends cdAst.AstTransformer {
   }
   visitLiteralMap(ast: cdAst.LiteralMap, context: any): any {
     const args = ast.values.map(ast => ast.visit(this, context));
+
     return new BuiltinFunctionCall(
         ast.span, args, this._converterFactory.createLiteralMapConverter(ast.keys));
   }
@@ -239,7 +246,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
     return convertToStatementIfNeeded(
         mode,
         new o.BinaryOperatorExpr(
-            op, this.visit(ast.left, _Mode.Expression), this.visit(ast.right, _Mode.Expression)));
+            op, this._visit(ast.left, _Mode.Expression), this._visit(ast.right, _Mode.Expression)));
   }
 
   visitChain(ast: cdAst.Chain, mode: _Mode): any {
@@ -248,11 +255,11 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
   }
 
   visitConditional(ast: cdAst.Conditional, mode: _Mode): any {
-    const value: o.Expression = this.visit(ast.condition, _Mode.Expression);
+    const value: o.Expression = this._visit(ast.condition, _Mode.Expression);
     return convertToStatementIfNeeded(
-        mode,
-        value.conditional(
-            this.visit(ast.trueExp, _Mode.Expression), this.visit(ast.falseExp, _Mode.Expression)));
+        mode, value.conditional(
+                  this._visit(ast.trueExp, _Mode.Expression),
+                  this._visit(ast.falseExp, _Mode.Expression)));
   }
 
   visitPipe(ast: cdAst.BindingPipe, mode: _Mode): any {
@@ -266,7 +273,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
     if (ast instanceof BuiltinFunctionCall) {
       fnResult = ast.converter(convertedArgs);
     } else {
-      fnResult = this.visit(ast.target !, _Mode.Expression).callFn(convertedArgs);
+      fnResult = this._visit(ast.target !, _Mode.Expression).callFn(convertedArgs);
     }
     return convertToStatementIfNeeded(mode, fnResult);
   }
@@ -281,15 +288,13 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
     const args = [o.literal(ast.expressions.length)];
     for (let i = 0; i < ast.strings.length - 1; i++) {
       args.push(o.literal(ast.strings[i]));
-      args.push(this.visit(ast.expressions[i], _Mode.Expression));
+      args.push(this._visit(ast.expressions[i], _Mode.Expression));
     }
     args.push(o.literal(ast.strings[ast.strings.length - 1]));
 
     return ast.expressions.length <= 9 ?
-        o.importExpr(createIdentifier(Identifiers.inlineInterpolate)).callFn(args) :
-        o.importExpr(createIdentifier(Identifiers.interpolate)).callFn([
-          args[0], o.literalArr(args.slice(1))
-        ]);
+        o.importExpr(Identifiers.inlineInterpolate).callFn(args) :
+        o.importExpr(Identifiers.interpolate).callFn([args[0], o.literalArr(args.slice(1))]);
   }
 
   visitKeyedRead(ast: cdAst.KeyedRead, mode: _Mode): any {
@@ -298,14 +303,14 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
       return this.convertSafeAccess(ast, leftMostSafe, mode);
     } else {
       return convertToStatementIfNeeded(
-          mode, this.visit(ast.obj, _Mode.Expression).key(this.visit(ast.key, _Mode.Expression)));
+          mode, this._visit(ast.obj, _Mode.Expression).key(this._visit(ast.key, _Mode.Expression)));
     }
   }
 
   visitKeyedWrite(ast: cdAst.KeyedWrite, mode: _Mode): any {
-    const obj: o.Expression = this.visit(ast.obj, _Mode.Expression);
-    const key: o.Expression = this.visit(ast.key, _Mode.Expression);
-    const value: o.Expression = this.visit(ast.value, _Mode.Expression);
+    const obj: o.Expression = this._visit(ast.obj, _Mode.Expression);
+    const key: o.Expression = this._visit(ast.key, _Mode.Expression);
+    const value: o.Expression = this._visit(ast.value, _Mode.Expression);
     return convertToStatementIfNeeded(mode, obj.key(key).set(value));
   }
 
@@ -330,7 +335,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
     } else {
       const args = this.visitAll(ast.args, _Mode.Expression);
       let result: any = null;
-      const receiver = this.visit(ast.receiver, _Mode.Expression);
+      const receiver = this._visit(ast.receiver, _Mode.Expression);
       if (receiver === this._implicitReceiver) {
         const varExpr = this._getLocal(ast.name);
         if (varExpr) {
@@ -345,7 +350,12 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
   }
 
   visitPrefixNot(ast: cdAst.PrefixNot, mode: _Mode): any {
-    return convertToStatementIfNeeded(mode, o.not(this.visit(ast.expression, _Mode.Expression)));
+    return convertToStatementIfNeeded(mode, o.not(this._visit(ast.expression, _Mode.Expression)));
+  }
+
+  visitNonNullAssert(ast: cdAst.NonNullAssert, mode: _Mode): any {
+    return convertToStatementIfNeeded(
+        mode, o.assertNotNull(this._visit(ast.expression, _Mode.Expression)));
   }
 
   visitPropertyRead(ast: cdAst.PropertyRead, mode: _Mode): any {
@@ -354,7 +364,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
       return this.convertSafeAccess(ast, leftMostSafe, mode);
     } else {
       let result: any = null;
-      const receiver = this.visit(ast.receiver, _Mode.Expression);
+      const receiver = this._visit(ast.receiver, _Mode.Expression);
       if (receiver === this._implicitReceiver) {
         result = this._getLocal(ast.name);
       }
@@ -366,7 +376,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
   }
 
   visitPropertyWrite(ast: cdAst.PropertyWrite, mode: _Mode): any {
-    const receiver: o.Expression = this.visit(ast.receiver, _Mode.Expression);
+    const receiver: o.Expression = this._visit(ast.receiver, _Mode.Expression);
     if (receiver === this._implicitReceiver) {
       const varExpr = this._getLocal(ast.name);
       if (varExpr) {
@@ -374,7 +384,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
       }
     }
     return convertToStatementIfNeeded(
-        mode, receiver.prop(ast.name).set(this.visit(ast.value, _Mode.Expression)));
+        mode, receiver.prop(ast.name).set(this._visit(ast.value, _Mode.Expression)));
   }
 
   visitSafePropertyRead(ast: cdAst.SafePropertyRead, mode: _Mode): any {
@@ -385,13 +395,14 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
     return this.convertSafeAccess(ast, this.leftMostSafeNode(ast), mode);
   }
 
-  visitAll(asts: cdAst.AST[], mode: _Mode): any { return asts.map(ast => this.visit(ast, mode)); }
+  visitAll(asts: cdAst.AST[], mode: _Mode): any { return asts.map(ast => this._visit(ast, mode)); }
 
   visitQuote(ast: cdAst.Quote, mode: _Mode): any {
-    throw new Error('Quotes are not supported for evaluation!');
+    throw new Error(`Quotes are not supported for evaluation!
+        Statement: ${ast.uninterpretedExpression} located at ${ast.location}`);
   }
 
-  private visit(ast: cdAst.AST, mode: _Mode): any {
+  private _visit(ast: cdAst.AST, mode: _Mode): any {
     const result = this._resultMap.get(ast);
     if (result) return result;
     return (this._nodeMap.get(ast) || ast).visit(this, mode);
@@ -438,7 +449,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
     // Notice that the first guard condition is the left hand of the left most safe access node
     // which comes in as leftMostSafe to this routine.
 
-    let guardedExpression = this.visit(leftMostSafe.receiver, _Mode.Expression);
+    let guardedExpression = this._visit(leftMostSafe.receiver, _Mode.Expression);
     let temporary: o.ReadVarExpr = undefined !;
     if (this.needsTemporary(leftMostSafe.receiver)) {
       // If the expression has method calls or pipes then we need to save the result into a
@@ -467,7 +478,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
     }
 
     // Recursively convert the node now without the guarded member access.
-    const access = this.visit(ast, _Mode.Expression);
+    const access = this._visit(ast, _Mode.Expression);
 
     // Remove the mapping. This is not strictly required as the converter only traverses each node
     // once but is safer if the conversion is changed to traverse the nodes more than once.
@@ -508,6 +519,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
       visitMethodCall(ast: cdAst.MethodCall) { return visit(this, ast.receiver); },
       visitPipe(ast: cdAst.BindingPipe) { return null; },
       visitPrefixNot(ast: cdAst.PrefixNot) { return null; },
+      visitNonNullAssert(ast: cdAst.NonNullAssert) { return null; },
       visitPropertyRead(ast: cdAst.PropertyRead) { return visit(this, ast.receiver); },
       visitPropertyWrite(ast: cdAst.PropertyWrite) { return null; },
       visitQuote(ast: cdAst.Quote) { return null; },
@@ -546,6 +558,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
       visitMethodCall(ast: cdAst.MethodCall) { return true; },
       visitPipe(ast: cdAst.BindingPipe) { return true; },
       visitPrefixNot(ast: cdAst.PrefixNot) { return visit(this, ast.expression); },
+      visitNonNullAssert(ast: cdAst.PrefixNot) { return visit(this, ast.expression); },
       visitPropertyRead(ast: cdAst.PropertyRead) { return false; },
       visitPropertyWrite(ast: cdAst.PropertyWrite) { return false; },
       visitQuote(ast: cdAst.Quote) { return false; },
diff --git a/packages/compiler/src/config.ts b/packages/compiler/src/config.ts
index 52c4fad95e..75be193731 100644
--- a/packages/compiler/src/config.ts
+++ b/packages/compiler/src/config.ts
@@ -9,7 +9,7 @@
 import {InjectionToken, MissingTranslationStrategy, ViewEncapsulation, isDevMode} from '@angular/core';
 
 import {CompileIdentifierMetadata} from './compile_metadata';
-import {Identifiers, createIdentifier} from './identifiers';
+import {Identifiers} from './identifiers';
 
 
 export class CompilerConfig {
diff --git a/packages/compiler/src/directive_normalizer.ts b/packages/compiler/src/directive_normalizer.ts
index 725ef8568a..e9484a34ae 100644
--- a/packages/compiler/src/directive_normalizer.ts
+++ b/packages/compiler/src/directive_normalizer.ts
@@ -18,7 +18,7 @@ import {ResourceLoader} from './resource_loader';
 import {extractStyleUrls, isStyleUrlResolvable} from './style_url_resolver';
 import {PreparsedElementType, preparseElement} from './template_parser/template_preparser';
 import {UrlResolver} from './url_resolver';
-import {SyncAsyncResult, isDefined, syntaxError} from './util';
+import {SyncAsync, isDefined, syntaxError} from './util';
 
 export interface PrenormalizedTemplateMetadata {
   ngModuleType: any;
@@ -35,7 +35,7 @@ export interface PrenormalizedTemplateMetadata {
 
 @CompilerInjectable()
 export class DirectiveNormalizer {
-  private _resourceLoaderCache = new Map<string, Promise<string>>();
+  private _resourceLoaderCache = new Map<string, SyncAsync<string>>();
 
   constructor(
       private _resourceLoader: ResourceLoader, private _urlResolver: UrlResolver,
@@ -53,19 +53,17 @@ export class DirectiveNormalizer {
         (stylesheet) => { this._resourceLoaderCache.delete(stylesheet.moduleUrl !); });
   }
 
-  private _fetch(url: string): Promise<string> {
+  private _fetch(url: string): SyncAsync<string> {
     let result = this._resourceLoaderCache.get(url);
     if (!result) {
-      result = this._resourceLoader.get(url) !;
+      result = this._resourceLoader.get(url);
       this._resourceLoaderCache.set(url, result);
     }
     return result;
   }
 
   normalizeTemplate(prenormData: PrenormalizedTemplateMetadata):
-      SyncAsyncResult<CompileTemplateMetadata> {
-    let normalizedTemplateSync: CompileTemplateMetadata = null !;
-    let normalizedTemplateAsync: Promise<CompileTemplateMetadata> = undefined !;
+      SyncAsync<CompileTemplateMetadata> {
     if (isDefined(prenormData.template)) {
       if (isDefined(prenormData.templateUrl)) {
         throw syntaxError(
@@ -75,39 +73,33 @@ export class DirectiveNormalizer {
         throw syntaxError(
             `The template specified for component ${stringify(prenormData.componentType)} is not a string`);
       }
-      normalizedTemplateSync = this.normalizeTemplateSync(prenormData);
-      normalizedTemplateAsync = Promise.resolve(normalizedTemplateSync !);
     } else if (isDefined(prenormData.templateUrl)) {
       if (typeof prenormData.templateUrl !== 'string') {
         throw syntaxError(
             `The templateUrl specified for component ${stringify(prenormData.componentType)} is not a string`);
       }
-      normalizedTemplateAsync = this.normalizeTemplateAsync(prenormData);
     } else {
       throw syntaxError(
           `No template specified for component ${stringify(prenormData.componentType)}`);
     }
+    return SyncAsync.then(
+        this.normalizeTemplateOnly(prenormData),
+        (result: CompileTemplateMetadata) => this.normalizeExternalStylesheets(result));
+  }
 
-    if (normalizedTemplateSync && normalizedTemplateSync.styleUrls.length === 0) {
-      // sync case
-      return new SyncAsyncResult(normalizedTemplateSync);
+  normalizeTemplateOnly(prenomData: PrenormalizedTemplateMetadata):
+      SyncAsync<CompileTemplateMetadata> {
+    let template: SyncAsync<string>;
+    let templateUrl: string;
+    if (prenomData.template != null) {
+      template = prenomData.template;
+      templateUrl = prenomData.moduleUrl;
     } else {
-      // async case
-      return new SyncAsyncResult(
-          null, normalizedTemplateAsync.then(
-                    (normalizedTemplate) => this.normalizeExternalStylesheets(normalizedTemplate)));
+      templateUrl = this._urlResolver.resolve(prenomData.moduleUrl, prenomData.templateUrl !);
+      template = this._fetch(templateUrl);
     }
-  }
-
-  normalizeTemplateSync(prenomData: PrenormalizedTemplateMetadata): CompileTemplateMetadata {
-    return this.normalizeLoadedTemplate(prenomData, prenomData.template !, prenomData.moduleUrl);
-  }
-
-  normalizeTemplateAsync(prenomData: PrenormalizedTemplateMetadata):
-      Promise<CompileTemplateMetadata> {
-    const templateUrl = this._urlResolver.resolve(prenomData.moduleUrl, prenomData.templateUrl !);
-    return this._fetch(templateUrl)
-        .then((value) => this.normalizeLoadedTemplate(prenomData, value, templateUrl));
+    return SyncAsync.then(
+        template, (template) => this.normalizeLoadedTemplate(prenomData, template, templateUrl));
   }
 
   normalizeLoadedTemplate(
@@ -162,37 +154,42 @@ export class DirectiveNormalizer {
   }
 
   normalizeExternalStylesheets(templateMeta: CompileTemplateMetadata):
-      Promise<CompileTemplateMetadata> {
-    return this._loadMissingExternalStylesheets(templateMeta.styleUrls)
-        .then((externalStylesheets) => new CompileTemplateMetadata({
-                encapsulation: templateMeta.encapsulation,
-                template: templateMeta.template,
-                templateUrl: templateMeta.templateUrl,
-                styles: templateMeta.styles,
-                styleUrls: templateMeta.styleUrls,
-                externalStylesheets: externalStylesheets,
-                ngContentSelectors: templateMeta.ngContentSelectors,
-                animations: templateMeta.animations,
-                interpolation: templateMeta.interpolation,
-                isInline: templateMeta.isInline,
-              }));
+      SyncAsync<CompileTemplateMetadata> {
+    return SyncAsync.then(
+        this._loadMissingExternalStylesheets(templateMeta.styleUrls),
+        (externalStylesheets) => new CompileTemplateMetadata({
+          encapsulation: templateMeta.encapsulation,
+          template: templateMeta.template,
+          templateUrl: templateMeta.templateUrl,
+          styles: templateMeta.styles,
+          styleUrls: templateMeta.styleUrls,
+          externalStylesheets: externalStylesheets,
+          ngContentSelectors: templateMeta.ngContentSelectors,
+          animations: templateMeta.animations,
+          interpolation: templateMeta.interpolation,
+          isInline: templateMeta.isInline,
+        }));
   }
 
   private _loadMissingExternalStylesheets(
       styleUrls: string[],
       loadedStylesheets:
           Map<string, CompileStylesheetMetadata> = new Map<string, CompileStylesheetMetadata>()):
-      Promise<CompileStylesheetMetadata[]> {
-    return Promise
-        .all(styleUrls.filter((styleUrl) => !loadedStylesheets.has(styleUrl))
-                 .map(styleUrl => this._fetch(styleUrl).then((loadedStyle) => {
-                   const stylesheet = this.normalizeStylesheet(
-                       new CompileStylesheetMetadata({styles: [loadedStyle], moduleUrl: styleUrl}));
-                   loadedStylesheets.set(styleUrl, stylesheet);
-                   return this._loadMissingExternalStylesheets(
-                       stylesheet.styleUrls, loadedStylesheets);
-                 })))
-        .then((_) => Array.from(loadedStylesheets.values()));
+      SyncAsync<CompileStylesheetMetadata[]> {
+    return SyncAsync.then(
+        SyncAsync.all(styleUrls.filter((styleUrl) => !loadedStylesheets.has(styleUrl))
+                          .map(
+                              styleUrl => SyncAsync.then(
+                                  this._fetch(styleUrl),
+                                  (loadedStyle) => {
+                                    const stylesheet =
+                                        this.normalizeStylesheet(new CompileStylesheetMetadata(
+                                            {styles: [loadedStyle], moduleUrl: styleUrl}));
+                                    loadedStylesheets.set(styleUrl, stylesheet);
+                                    return this._loadMissingExternalStylesheets(
+                                        stylesheet.styleUrls, loadedStylesheets);
+                                  }))),
+        (_) => Array.from(loadedStylesheets.values()));
   }
 
   normalizeStylesheet(stylesheet: CompileStylesheetMetadata): CompileStylesheetMetadata {
diff --git a/packages/compiler/src/directive_resolver.ts b/packages/compiler/src/directive_resolver.ts
index 8648bbf65f..2b1790305f 100644
--- a/packages/compiler/src/directive_resolver.ts
+++ b/packages/compiler/src/directive_resolver.ts
@@ -6,11 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, HostBinding, HostListener, Input, Output, Query, Type, resolveForwardRef, ɵReflectorReader, ɵreflector, ɵstringify as stringify} from '@angular/core';
+import {Component, Directive, HostBinding, HostListener, Input, Output, Query, Type, resolveForwardRef, ɵstringify as stringify} from '@angular/core';
+
+import {CompileReflector} from './compile_reflector';
 import {CompilerInjectable} from './injectable';
 import {splitAtColon} from './util';
 
 
+
 /*
  * Resolve a `Type` for {@link Directive}.
  *
@@ -20,7 +23,7 @@ import {splitAtColon} from './util';
  */
 @CompilerInjectable()
 export class DirectiveResolver {
-  constructor(private _reflector: ɵReflectorReader = ɵreflector) {}
+  constructor(private _reflector: CompileReflector) {}
 
   isDirective(type: Type<any>) {
     const typeMetadata = this._reflector.annotations(resolveForwardRef(type));
diff --git a/packages/compiler/src/expression_parser/ast.ts b/packages/compiler/src/expression_parser/ast.ts
index 0ac5960ce1..b6b1b03f61 100644
--- a/packages/compiler/src/expression_parser/ast.ts
+++ b/packages/compiler/src/expression_parser/ast.ts
@@ -136,8 +136,12 @@ export class LiteralArray extends AST {
   }
 }
 
+export type LiteralMapKey = {
+  key: string; quoted: boolean;
+};
+
 export class LiteralMap extends AST {
-  constructor(span: ParseSpan, public keys: any[], public values: any[]) { super(span); }
+  constructor(span: ParseSpan, public keys: LiteralMapKey[], public values: any[]) { super(span); }
   visit(visitor: AstVisitor, context: any = null): any {
     return visitor.visitLiteralMap(this, context);
   }
@@ -166,6 +170,13 @@ export class PrefixNot extends AST {
   }
 }
 
+export class NonNullAssert extends AST {
+  constructor(span: ParseSpan, public expression: AST) { super(span); }
+  visit(visitor: AstVisitor, context: any = null): any {
+    return visitor.visitNonNullAssert(this, context);
+  }
+}
+
 export class MethodCall extends AST {
   constructor(span: ParseSpan, public receiver: AST, public name: string, public args: any[]) {
     super(span);
@@ -222,11 +233,36 @@ export interface AstVisitor {
   visitMethodCall(ast: MethodCall, context: any): any;
   visitPipe(ast: BindingPipe, context: any): any;
   visitPrefixNot(ast: PrefixNot, context: any): any;
+  visitNonNullAssert(ast: NonNullAssert, context: any): any;
   visitPropertyRead(ast: PropertyRead, context: any): any;
   visitPropertyWrite(ast: PropertyWrite, context: any): any;
   visitQuote(ast: Quote, context: any): any;
   visitSafeMethodCall(ast: SafeMethodCall, context: any): any;
   visitSafePropertyRead(ast: SafePropertyRead, context: any): any;
+  visit?(ast: AST, context?: any): any;
+}
+
+export class NullAstVisitor implements AstVisitor {
+  visitBinary(ast: Binary, context: any): any {}
+  visitChain(ast: Chain, context: any): any {}
+  visitConditional(ast: Conditional, context: any): any {}
+  visitFunctionCall(ast: FunctionCall, context: any): any {}
+  visitImplicitReceiver(ast: ImplicitReceiver, context: any): any {}
+  visitInterpolation(ast: Interpolation, context: any): any {}
+  visitKeyedRead(ast: KeyedRead, context: any): any {}
+  visitKeyedWrite(ast: KeyedWrite, context: any): any {}
+  visitLiteralArray(ast: LiteralArray, context: any): any {}
+  visitLiteralMap(ast: LiteralMap, context: any): any {}
+  visitLiteralPrimitive(ast: LiteralPrimitive, context: any): any {}
+  visitMethodCall(ast: MethodCall, context: any): any {}
+  visitPipe(ast: BindingPipe, context: any): any {}
+  visitPrefixNot(ast: PrefixNot, context: any): any {}
+  visitNonNullAssert(ast: NonNullAssert, context: any): any {}
+  visitPropertyRead(ast: PropertyRead, context: any): any {}
+  visitPropertyWrite(ast: PropertyWrite, context: any): any {}
+  visitQuote(ast: Quote, context: any): any {}
+  visitSafeMethodCall(ast: SafeMethodCall, context: any): any {}
+  visitSafePropertyRead(ast: SafePropertyRead, context: any): any {}
 }
 
 export class RecursiveAstVisitor implements AstVisitor {
@@ -280,6 +316,10 @@ export class RecursiveAstVisitor implements AstVisitor {
     ast.expression.visit(this);
     return null;
   }
+  visitNonNullAssert(ast: NonNullAssert, context: any): any {
+    ast.expression.visit(this);
+    return null;
+  }
   visitPropertyRead(ast: PropertyRead, context: any): any {
     ast.receiver.visit(this);
     return null;
@@ -356,6 +396,10 @@ export class AstTransformer implements AstVisitor {
     return new PrefixNot(ast.span, ast.expression.visit(this));
   }
 
+  visitNonNullAssert(ast: NonNullAssert, context: any): AST {
+    return new NonNullAssert(ast.span, ast.expression.visit(this));
+  }
+
   visitConditional(ast: Conditional, context: any): AST {
     return new Conditional(
         ast.span, ast.condition.visit(this), ast.trueExp.visit(this), ast.falseExp.visit(this));
@@ -390,3 +434,65 @@ export class AstTransformer implements AstVisitor {
     return new Quote(ast.span, ast.prefix, ast.uninterpretedExpression, ast.location);
   }
 }
+
+export function visitAstChildren(ast: AST, visitor: AstVisitor, context?: any) {
+  function visit(ast: AST) {
+    visitor.visit && visitor.visit(ast, context) || ast.visit(visitor, context);
+  }
+
+  function visitAll<T extends AST>(asts: T[]) { asts.forEach(visit); }
+
+  ast.visit({
+    visitBinary(ast) {
+      visit(ast.left);
+      visit(ast.right);
+    },
+    visitChain(ast) { visitAll(ast.expressions); },
+    visitConditional(ast) {
+      visit(ast.condition);
+      visit(ast.trueExp);
+      visit(ast.falseExp);
+    },
+    visitFunctionCall(ast) {
+      if (ast.target) {
+        visit(ast.target);
+      }
+      visitAll(ast.args);
+    },
+    visitImplicitReceiver(ast) {},
+    visitInterpolation(ast) { visitAll(ast.expressions); },
+    visitKeyedRead(ast) {
+      visit(ast.obj);
+      visit(ast.key);
+    },
+    visitKeyedWrite(ast) {
+      visit(ast.obj);
+      visit(ast.key);
+      visit(ast.obj);
+    },
+    visitLiteralArray(ast) { visitAll(ast.expressions); },
+    visitLiteralMap(ast) {},
+    visitLiteralPrimitive(ast) {},
+    visitMethodCall(ast) {
+      visit(ast.receiver);
+      visitAll(ast.args);
+    },
+    visitPipe(ast) {
+      visit(ast.exp);
+      visitAll(ast.args);
+    },
+    visitPrefixNot(ast) { visit(ast.expression); },
+    visitNonNullAssert(ast) { visit(ast.expression); },
+    visitPropertyRead(ast) { visit(ast.receiver); },
+    visitPropertyWrite(ast) {
+      visit(ast.receiver);
+      visit(ast.value);
+    },
+    visitQuote(ast) {},
+    visitSafeMethodCall(ast) {
+      visit(ast.receiver);
+      visitAll(ast.args);
+    },
+    visitSafePropertyRead(ast) { visit(ast.receiver); },
+  });
+}
diff --git a/packages/compiler/src/expression_parser/lexer.ts b/packages/compiler/src/expression_parser/lexer.ts
index feae320b7a..17b59c4284 100644
--- a/packages/compiler/src/expression_parser/lexer.ts
+++ b/packages/compiler/src/expression_parser/lexer.ts
@@ -231,7 +231,6 @@ class _Scanner {
    * @param two second symbol (part of the operator when the second code point matches)
    * @param threeCode code point for the third symbol
    * @param three third symbol (part of the operator when provided and matches source expression)
-   * @returns {Token}
    */
   scanComplexOperator(
       start: number, one: string, twoCode: number, two: string, threeCode?: number,
diff --git a/packages/compiler/src/expression_parser/parser.ts b/packages/compiler/src/expression_parser/parser.ts
index 73b202cbe2..14dacda156 100644
--- a/packages/compiler/src/expression_parser/parser.ts
+++ b/packages/compiler/src/expression_parser/parser.ts
@@ -10,9 +10,9 @@ import * as chars from '../chars';
 import {CompilerInjectable} from '../injectable';
 import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from '../ml_parser/interpolation_config';
 import {escapeRegExp} from '../util';
-import {AST, ASTWithSource, AstVisitor, Binary, BindingPipe, Chain, Conditional, EmptyExpr, FunctionCall, ImplicitReceiver, Interpolation, KeyedRead, KeyedWrite, LiteralArray, LiteralMap, LiteralPrimitive, MethodCall, ParseSpan, ParserError, PrefixNot, PropertyRead, PropertyWrite, Quote, SafeMethodCall, SafePropertyRead, TemplateBinding} from './ast';
-import {EOF, Lexer, Token, TokenType, isIdentifier, isQuote} from './lexer';
 
+import {AST, ASTWithSource, AstVisitor, Binary, BindingPipe, Chain, Conditional, EmptyExpr, FunctionCall, ImplicitReceiver, Interpolation, KeyedRead, KeyedWrite, LiteralArray, LiteralMap, LiteralMapKey, LiteralPrimitive, MethodCall, NonNullAssert, ParseSpan, ParserError, PrefixNot, PropertyRead, PropertyWrite, Quote, SafeMethodCall, SafePropertyRead, TemplateBinding} from './ast';
+import {EOF, Lexer, Token, TokenType, isIdentifier, isQuote} from './lexer';
 
 export class SplitInterpolation {
   constructor(public strings: string[], public expressions: string[], public offsets: number[]) {}
@@ -126,7 +126,7 @@ export class Parser {
     for (let i = 0; i < split.expressions.length; ++i) {
       const expressionText = split.expressions[i];
       const sourceToLex = this._stripComments(expressionText);
-      const tokens = this._lexer.tokenize(this._stripComments(split.expressions[i]));
+      const tokens = this._lexer.tokenize(sourceToLex);
       const ast = new _ParseAST(
                       input, location, tokens, sourceToLex.length, false, this.errors,
                       split.offsets[i] + (expressionText.length - sourceToLex.length))
@@ -289,24 +289,24 @@ export class _ParseAST {
     this.error(`Missing expected operator ${operator}`);
   }
 
-  expectIdentifierOrKeyword(): string|null {
+  expectIdentifierOrKeyword(): string {
     const n = this.next;
     if (!n.isIdentifier() && !n.isKeyword()) {
       this.error(`Unexpected token ${n}, expected identifier or keyword`);
       return '';
     }
     this.advance();
-    return n.toString();
+    return n.toString() as string;
   }
 
-  expectIdentifierOrKeywordOrString(): string|null {
+  expectIdentifierOrKeywordOrString(): string {
     const n = this.next;
     if (!n.isIdentifier() && !n.isKeyword() && !n.isString()) {
       this.error(`Unexpected token ${n}, expected identifier, keyword, or string`);
       return '';
     }
     this.advance();
-    return n.toString();
+    return n.toString() as string;
   }
 
   parseChain(): AST {
@@ -339,7 +339,7 @@ export class _ParseAST {
       }
 
       do {
-        const name = this.expectIdentifierOrKeyword() !;
+        const name = this.expectIdentifierOrKeyword();
         const args: AST[] = [];
         while (this.optionalCharacter(chars.$COLON)) {
           args.push(this.parseExpression());
@@ -523,6 +523,9 @@ export class _ParseAST {
         this.expectCharacter(chars.$RPAREN);
         result = new FunctionCall(this.span(result.span.start), result, args);
 
+      } else if (this.optionalOperator('!')) {
+        result = new NonNullAssert(this.span(result.span.start), result);
+
       } else {
         return result;
       }
@@ -601,15 +604,16 @@ export class _ParseAST {
   }
 
   parseLiteralMap(): LiteralMap {
-    const keys: string[] = [];
+    const keys: LiteralMapKey[] = [];
     const values: AST[] = [];
     const start = this.inputIndex;
     this.expectCharacter(chars.$LBRACE);
     if (!this.optionalCharacter(chars.$RBRACE)) {
       this.rbracesExpected++;
       do {
-        const key = this.expectIdentifierOrKeywordOrString() !;
-        keys.push(key);
+        const quoted = this.next.isString();
+        const key = this.expectIdentifierOrKeywordOrString();
+        keys.push({key, quoted});
         this.expectCharacter(chars.$COLON);
         values.push(this.parsePipe());
       } while (this.optionalCharacter(chars.$COMMA));
@@ -621,7 +625,7 @@ export class _ParseAST {
 
   parseAccessMemberOrMethodCall(receiver: AST, isSafe: boolean = false): AST {
     const start = receiver.span.start;
-    const id = this.expectIdentifierOrKeyword() !;
+    const id = this.expectIdentifierOrKeyword();
 
     if (this.optionalCharacter(chars.$LPAREN)) {
       this.rparensExpected++;
@@ -811,6 +815,8 @@ class SimpleExpressionChecker implements AstVisitor {
 
   visitPrefixNot(ast: PrefixNot, context: any) {}
 
+  visitNonNullAssert(ast: NonNullAssert, context: any) {}
+
   visitConditional(ast: Conditional, context: any) {}
 
   visitPipe(ast: BindingPipe, context: any) { this.errors.push('pipes'); }
diff --git a/packages/compiler/src/i18n/extractor.ts b/packages/compiler/src/i18n/extractor.ts
index aa69200bed..5d6cbb5d1f 100644
--- a/packages/compiler/src/i18n/extractor.ts
+++ b/packages/compiler/src/i18n/extractor.ts
@@ -13,7 +13,6 @@
 import {ViewEncapsulation, ɵConsole as Console} from '@angular/core';
 
 import {analyzeAndValidateNgModules, extractProgramSymbols} from '../aot/compiler';
-import {StaticAndDynamicReflectionCapabilities} from '../aot/static_reflection_capabilities';
 import {StaticReflector} from '../aot/static_reflector';
 import {StaticSymbolCache} from '../aot/static_symbol';
 import {StaticSymbolResolver, StaticSymbolResolverHost} from '../aot/static_symbol_resolver';
@@ -30,8 +29,6 @@ import {ParseError} from '../parse_util';
 import {PipeResolver} from '../pipe_resolver';
 import {DomElementSchemaRegistry} from '../schema/dom_element_schema_registry';
 import {createOfflineCompileUrlResolver} from '../url_resolver';
-
-import {I18NHtmlParser} from './i18n_html_parser';
 import {MessageBundle} from './message_bundle';
 
 /**
@@ -42,7 +39,7 @@ export interface ExtractorHost extends StaticSymbolResolverHost, AotSummaryResol
   /**
    * Loads a resource (e.g. html / css)
    */
-  loadResource(path: string): Promise<string>;
+  loadResource(path: string): Promise<string>|string;
 }
 
 export class Extractor {
@@ -88,14 +85,13 @@ export class Extractor {
 
   static create(host: ExtractorHost, locale: string|null):
       {extractor: Extractor, staticReflector: StaticReflector} {
-    const htmlParser = new I18NHtmlParser(new HtmlParser());
+    const htmlParser = new HtmlParser();
 
     const urlResolver = createOfflineCompileUrlResolver();
     const symbolCache = new StaticSymbolCache();
     const summaryResolver = new AotSummaryResolver(host, symbolCache);
     const staticSymbolResolver = new StaticSymbolResolver(host, symbolCache, summaryResolver);
     const staticReflector = new StaticReflector(summaryResolver, staticSymbolResolver);
-    StaticAndDynamicReflectionCapabilities.install(staticReflector);
 
     const config =
         new CompilerConfig({defaultEncapsulation: ViewEncapsulation.Emulated, useJit: false});
diff --git a/packages/compiler/src/i18n/extractor_merger.ts b/packages/compiler/src/i18n/extractor_merger.ts
index 56d8fe6b61..1cae8b9464 100644
--- a/packages/compiler/src/i18n/extractor_merger.ts
+++ b/packages/compiler/src/i18n/extractor_merger.ts
@@ -456,7 +456,7 @@ class _Visitor implements html.Visitor {
         0);
 
     if (significantChildren == 1) {
-      for (let i = this._messages.length - 1; i >= startIndex; i--) {
+      for (let i = this._messages.length - 1; i >= startIndex !; i--) {
         const ast = this._messages[i].nodes;
         if (!(ast.length == 1 && ast[0] instanceof i18n.Text)) {
           this._messages.splice(i, 1);
diff --git a/packages/compiler/src/i18n/i18n_ast.ts b/packages/compiler/src/i18n/i18n_ast.ts
index 1e94ea416f..c2d1864934 100644
--- a/packages/compiler/src/i18n/i18n_ast.ts
+++ b/packages/compiler/src/i18n/i18n_ast.ts
@@ -9,6 +9,8 @@
 import {ParseSourceSpan} from '../parse_util';
 
 export class Message {
+  sources: MessageSpan[];
+
   /**
    * @param nodes message AST
    * @param placeholders maps placeholder names to static content
@@ -20,7 +22,28 @@ export class Message {
   constructor(
       public nodes: Node[], public placeholders: {[phName: string]: string},
       public placeholderToMessage: {[phName: string]: Message}, public meaning: string,
-      public description: string, public id: string) {}
+      public description: string, public id: string) {
+    if (nodes.length) {
+      this.sources = [{
+        filePath: nodes[0].sourceSpan.start.file.url,
+        startLine: nodes[0].sourceSpan.start.line + 1,
+        startCol: nodes[0].sourceSpan.start.col + 1,
+        endLine: nodes[nodes.length - 1].sourceSpan.end.line + 1,
+        endCol: nodes[0].sourceSpan.start.col + 1
+      }];
+    } else {
+      this.sources = [];
+    }
+  }
+}
+
+// line and columns indexes are 1 based
+export interface MessageSpan {
+  filePath: string;
+  startLine: number;
+  startCol: number;
+  endLine: number;
+  endCol: number;
 }
 
 export interface Node {
@@ -131,4 +154,4 @@ export class RecurseVisitor implements Visitor {
   visitPlaceholder(ph: Placeholder, context?: any): any{};
 
   visitIcuPlaceholder(ph: IcuPlaceholder, context?: any): any{};
-}
\ No newline at end of file
+}
diff --git a/packages/compiler/src/i18n/i18n_html_parser.ts b/packages/compiler/src/i18n/i18n_html_parser.ts
index 3cb35db441..aab0aa0b95 100644
--- a/packages/compiler/src/i18n/i18n_html_parser.ts
+++ b/packages/compiler/src/i18n/i18n_html_parser.ts
@@ -7,12 +7,16 @@
  */
 
 import {MissingTranslationStrategy, ɵConsole as Console} from '@angular/core';
+
 import {HtmlParser} from '../ml_parser/html_parser';
 import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from '../ml_parser/interpolation_config';
 import {ParseTreeResult} from '../ml_parser/parser';
+
+import {digest} from './digest';
 import {mergeTranslations} from './extractor_merger';
 import {Serializer} from './serializers/serializer';
 import {Xliff} from './serializers/xliff';
+import {Xliff2} from './serializers/xliff2';
 import {Xmb} from './serializers/xmb';
 import {Xtb} from './serializers/xtb';
 import {TranslationBundle} from './translation_bundle';
@@ -31,6 +35,9 @@ export class I18NHtmlParser implements HtmlParser {
       const serializer = createSerializer(translationsFormat);
       this._translationBundle =
           TranslationBundle.load(translations, 'i18n', serializer, missingTranslation, console);
+    } else {
+      this._translationBundle =
+          new TranslationBundle({}, null, digest, undefined, missingTranslation, console);
     }
   }
 
@@ -40,11 +47,6 @@ export class I18NHtmlParser implements HtmlParser {
     const parseResult =
         this._htmlParser.parse(source, url, parseExpansionForms, interpolationConfig);
 
-    if (!this._translationBundle) {
-      // Do not enable i18n when no translation bundle is provided
-      return parseResult;
-    }
-
     if (parseResult.errors.length) {
       return new ParseTreeResult(parseResult.rootNodes, parseResult.errors);
     }
@@ -62,6 +64,9 @@ function createSerializer(format?: string): Serializer {
       return new Xmb();
     case 'xtb':
       return new Xtb();
+    case 'xliff2':
+    case 'xlf2':
+      return new Xliff2();
     case 'xliff':
     case 'xlf':
     default:
diff --git a/packages/compiler/src/i18n/index.ts b/packages/compiler/src/i18n/index.ts
index eb05fb1c48..f47e971fd8 100644
--- a/packages/compiler/src/i18n/index.ts
+++ b/packages/compiler/src/i18n/index.ts
@@ -11,5 +11,6 @@ export {I18NHtmlParser} from './i18n_html_parser';
 export {MessageBundle} from './message_bundle';
 export {Serializer} from './serializers/serializer';
 export {Xliff} from './serializers/xliff';
+export {Xliff2} from './serializers/xliff2';
 export {Xmb} from './serializers/xmb';
 export {Xtb} from './serializers/xtb';
diff --git a/packages/compiler/src/i18n/message_bundle.ts b/packages/compiler/src/i18n/message_bundle.ts
index 8016bc0d3f..e685478367 100644
--- a/packages/compiler/src/i18n/message_bundle.ts
+++ b/packages/compiler/src/i18n/message_bundle.ts
@@ -26,7 +26,7 @@ export class MessageBundle {
       private _implicitAttrs: {[k: string]: string[]}, private _locale: string|null = null) {}
 
   updateFromTemplate(html: string, url: string, interpolationConfig: InterpolationConfig):
-      ParseError[]|null {
+      ParseError[] {
     const htmlParserResult = this._htmlParser.parse(html, url, true, interpolationConfig);
 
     if (htmlParserResult.errors.length) {
@@ -41,14 +41,14 @@ export class MessageBundle {
     }
 
     this._messages.push(...i18nParserResult.messages);
-    return null;
+    return [];
   }
 
   // Return the message in the internal format
   // The public (serialized) format might be different, see the `write` method.
   getMessages(): i18n.Message[] { return this._messages; }
 
-  write(serializer: Serializer): string {
+  write(serializer: Serializer, filterSources?: (path: string) => string): string {
     const messages: {[id: string]: i18n.Message} = {};
     const mapperVisitor = new MapPlaceholderNames();
 
@@ -57,6 +57,8 @@ export class MessageBundle {
       const id = serializer.digest(message);
       if (!messages.hasOwnProperty(id)) {
         messages[id] = message;
+      } else {
+        messages[id].sources.push(...message.sources);
       }
     });
 
@@ -65,7 +67,13 @@ export class MessageBundle {
       const mapper = serializer.createNameMapper(messages[id]);
       const src = messages[id];
       const nodes = mapper ? mapperVisitor.convert(src.nodes, mapper) : src.nodes;
-      return new i18n.Message(nodes, {}, {}, src.meaning, src.description, id);
+      let transformedMessage = new i18n.Message(nodes, {}, {}, src.meaning, src.description, id);
+      transformedMessage.sources = src.sources;
+      if (filterSources) {
+        transformedMessage.sources.forEach(
+            (source: i18n.MessageSpan) => source.filePath = filterSources(source.filePath));
+      }
+      return transformedMessage;
     });
 
     return serializer.write(msgList, this._locale);
diff --git a/packages/compiler/src/i18n/serializers/xliff.ts b/packages/compiler/src/i18n/serializers/xliff.ts
index dbc9fffb8f..11a59441a6 100644
--- a/packages/compiler/src/i18n/serializers/xliff.ts
+++ b/packages/compiler/src/i18n/serializers/xliff.ts
@@ -25,6 +25,8 @@ const _FILE_TAG = 'file';
 const _SOURCE_TAG = 'source';
 const _TARGET_TAG = 'target';
 const _UNIT_TAG = 'trans-unit';
+const _CONTEXT_GROUP_TAG = 'context-group';
+const _CONTEXT_TAG = 'context';
 
 // http://docs.oasis-open.org/xliff/v1.2/os/xliff-core.html
 // http://docs.oasis-open.org/xliff/v1.2/xliff-profile-html/xliff-profile-html-1.2.html
@@ -34,10 +36,24 @@ export class Xliff extends Serializer {
     const transUnits: xml.Node[] = [];
 
     messages.forEach(message => {
+      let contextTags: xml.Node[] = [];
+      message.sources.forEach((source: i18n.MessageSpan) => {
+        let contextGroupTag = new xml.Tag(_CONTEXT_GROUP_TAG, {purpose: 'location'});
+        contextGroupTag.children.push(
+            new xml.CR(10),
+            new xml.Tag(
+                _CONTEXT_TAG, {'context-type': 'sourcefile'}, [new xml.Text(source.filePath)]),
+            new xml.CR(10), new xml.Tag(
+                                _CONTEXT_TAG, {'context-type': 'linenumber'},
+                                [new xml.Text(`${source.startLine}`)]),
+            new xml.CR(8));
+        contextTags.push(new xml.CR(8), contextGroupTag);
+      });
+
       const transUnit = new xml.Tag(_UNIT_TAG, {id: message.id, datatype: 'html'});
       transUnit.children.push(
           new xml.CR(8), new xml.Tag(_SOURCE_TAG, {}, visitor.serialize(message.nodes)),
-          new xml.CR(8), new xml.Tag(_TARGET_TAG));
+          ...contextTags);
 
       if (message.description) {
         transUnit.children.push(
@@ -123,23 +139,28 @@ class _WriteVisitor implements i18n.Visitor {
   visitTagPlaceholder(ph: i18n.TagPlaceholder, context?: any): xml.Node[] {
     const ctype = getCtypeForTag(ph.tag);
 
-    const startTagPh = new xml.Tag(_PLACEHOLDER_TAG, {id: ph.startName, ctype});
     if (ph.isVoid) {
       // void tags have no children nor closing tags
-      return [startTagPh];
+      return [new xml.Tag(
+          _PLACEHOLDER_TAG, {id: ph.startName, ctype, 'equiv-text': `<${ph.tag}/>`})];
     }
 
-    const closeTagPh = new xml.Tag(_PLACEHOLDER_TAG, {id: ph.closeName, ctype});
+    const startTagPh =
+        new xml.Tag(_PLACEHOLDER_TAG, {id: ph.startName, ctype, 'equiv-text': `<${ph.tag}>`});
+    const closeTagPh =
+        new xml.Tag(_PLACEHOLDER_TAG, {id: ph.closeName, ctype, 'equiv-text': `</${ph.tag}>`});
 
     return [startTagPh, ...this.serialize(ph.children), closeTagPh];
   }
 
   visitPlaceholder(ph: i18n.Placeholder, context?: any): xml.Node[] {
-    return [new xml.Tag(_PLACEHOLDER_TAG, {id: ph.name})];
+    return [new xml.Tag(_PLACEHOLDER_TAG, {id: ph.name, 'equiv-text': `{{${ph.value}}}`})];
   }
 
   visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): xml.Node[] {
-    return [new xml.Tag(_PLACEHOLDER_TAG, {id: ph.name})];
+    const equivText =
+        `{${ph.value.expression}, ${ph.value.type}, ${Object.keys(ph.value.cases).map((value: string) => value + ' {...}').join(' ')}}`;
+    return [new xml.Tag(_PLACEHOLDER_TAG, {id: ph.name, 'equiv-text': equivText})];
   }
 
   serialize(nodes: i18n.Node[]): xml.Node[] {
diff --git a/packages/compiler/src/i18n/serializers/xliff2.ts b/packages/compiler/src/i18n/serializers/xliff2.ts
new file mode 100644
index 0000000000..ea754b34fc
--- /dev/null
+++ b/packages/compiler/src/i18n/serializers/xliff2.ts
@@ -0,0 +1,382 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as ml from '../../ml_parser/ast';
+import {XmlParser} from '../../ml_parser/xml_parser';
+import {decimalDigest} from '../digest';
+import * as i18n from '../i18n_ast';
+import {I18nError} from '../parse_util';
+
+import {Serializer} from './serializer';
+import * as xml from './xml_helper';
+
+const _VERSION = '2.0';
+const _XMLNS = 'urn:oasis:names:tc:xliff:document:2.0';
+// TODO(vicb): make this a param (s/_/-/)
+const _DEFAULT_SOURCE_LANG = 'en';
+const _PLACEHOLDER_TAG = 'ph';
+const _PLACEHOLDER_SPANNING_TAG = 'pc';
+
+const _XLIFF_TAG = 'xliff';
+const _SOURCE_TAG = 'source';
+const _TARGET_TAG = 'target';
+const _UNIT_TAG = 'unit';
+
+// http://docs.oasis-open.org/xliff/xliff-core/v2.0/os/xliff-core-v2.0-os.html
+export class Xliff2 extends Serializer {
+  write(messages: i18n.Message[], locale: string|null): string {
+    const visitor = new _WriteVisitor();
+    const units: xml.Node[] = [];
+
+    messages.forEach(message => {
+      const unit = new xml.Tag(_UNIT_TAG, {id: message.id});
+      const notes = new xml.Tag('notes');
+
+      if (message.description || message.meaning) {
+        if (message.description) {
+          notes.children.push(
+              new xml.CR(8),
+              new xml.Tag('note', {category: 'description'}, [new xml.Text(message.description)]));
+        }
+
+        if (message.meaning) {
+          notes.children.push(
+              new xml.CR(8),
+              new xml.Tag('note', {category: 'meaning'}, [new xml.Text(message.meaning)]));
+        }
+      }
+
+      message.sources.forEach((source: i18n.MessageSpan) => {
+        notes.children.push(new xml.CR(8), new xml.Tag('note', {category: 'location'}, [
+          new xml.Text(
+              `${source.filePath}:${source.startLine}${source.endLine !== source.startLine ? ',' + source.endLine : ''}`)
+        ]));
+      });
+
+      notes.children.push(new xml.CR(6));
+      unit.children.push(new xml.CR(6), notes);
+
+      const segment = new xml.Tag('segment');
+
+      segment.children.push(
+          new xml.CR(8), new xml.Tag(_SOURCE_TAG, {}, visitor.serialize(message.nodes)),
+          new xml.CR(6));
+
+      unit.children.push(new xml.CR(6), segment, new xml.CR(4));
+
+      units.push(new xml.CR(4), unit);
+    });
+
+    const file =
+        new xml.Tag('file', {'original': 'ng.template', id: 'ngi18n'}, [...units, new xml.CR(2)]);
+
+    const xliff = new xml.Tag(
+        _XLIFF_TAG, {version: _VERSION, xmlns: _XMLNS, srcLang: locale || _DEFAULT_SOURCE_LANG},
+        [new xml.CR(2), file, new xml.CR()]);
+
+    return xml.serialize([
+      new xml.Declaration({version: '1.0', encoding: 'UTF-8'}), new xml.CR(), xliff, new xml.CR()
+    ]);
+  }
+
+  load(content: string, url: string):
+      {locale: string, i18nNodesByMsgId: {[msgId: string]: i18n.Node[]}} {
+    // xliff to xml nodes
+    const xliff2Parser = new Xliff2Parser();
+    const {locale, msgIdToHtml, errors} = xliff2Parser.parse(content, url);
+
+    // xml nodes to i18n nodes
+    const i18nNodesByMsgId: {[msgId: string]: i18n.Node[]} = {};
+    const converter = new XmlToI18n();
+
+    Object.keys(msgIdToHtml).forEach(msgId => {
+      const {i18nNodes, errors: e} = converter.convert(msgIdToHtml[msgId], url);
+      errors.push(...e);
+      i18nNodesByMsgId[msgId] = i18nNodes;
+    });
+
+    if (errors.length) {
+      throw new Error(`xliff2 parse errors:\n${errors.join('\n')}`);
+    }
+
+    return {locale: locale !, i18nNodesByMsgId};
+  }
+
+  digest(message: i18n.Message): string { return decimalDigest(message); }
+}
+
+class _WriteVisitor implements i18n.Visitor {
+  private _nextPlaceholderId: number;
+
+  visitText(text: i18n.Text, context?: any): xml.Node[] { return [new xml.Text(text.value)]; }
+
+  visitContainer(container: i18n.Container, context?: any): xml.Node[] {
+    const nodes: xml.Node[] = [];
+    container.children.forEach((node: i18n.Node) => nodes.push(...node.visit(this)));
+    return nodes;
+  }
+
+  visitIcu(icu: i18n.Icu, context?: any): xml.Node[] {
+    const nodes = [new xml.Text(`{${icu.expressionPlaceholder}, ${icu.type}, `)];
+
+    Object.keys(icu.cases).forEach((c: string) => {
+      nodes.push(new xml.Text(`${c} {`), ...icu.cases[c].visit(this), new xml.Text(`} `));
+    });
+
+    nodes.push(new xml.Text(`}`));
+
+    return nodes;
+  }
+
+  visitTagPlaceholder(ph: i18n.TagPlaceholder, context?: any): xml.Node[] {
+    const type = getTypeForTag(ph.tag);
+
+    if (ph.isVoid) {
+      const tagPh = new xml.Tag(_PLACEHOLDER_TAG, {
+        id: (this._nextPlaceholderId++).toString(),
+        equiv: ph.startName,
+        type: type,
+        disp: `<${ph.tag}/>`,
+      });
+      return [tagPh];
+    }
+
+    const tagPc = new xml.Tag(_PLACEHOLDER_SPANNING_TAG, {
+      id: (this._nextPlaceholderId++).toString(),
+      equivStart: ph.startName,
+      equivEnd: ph.closeName,
+      type: type,
+      dispStart: `<${ph.tag}>`,
+      dispEnd: `</${ph.tag}>`,
+    });
+    const nodes: xml.Node[] = [].concat(...ph.children.map(node => node.visit(this)));
+    if (nodes.length) {
+      nodes.forEach((node: xml.Node) => tagPc.children.push(node));
+    } else {
+      tagPc.children.push(new xml.Text(''));
+    }
+
+    return [tagPc];
+  }
+
+  visitPlaceholder(ph: i18n.Placeholder, context?: any): xml.Node[] {
+    const idStr = (this._nextPlaceholderId++).toString();
+    return [new xml.Tag(_PLACEHOLDER_TAG, {
+      id: idStr,
+      equiv: ph.name,
+      disp: `{{${ph.value}}}`,
+    })];
+  }
+
+  visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): xml.Node[] {
+    const cases = Object.keys(ph.value.cases).map((value: string) => value + ' {...}').join(' ');
+    const idStr = (this._nextPlaceholderId++).toString();
+    return [new xml.Tag(
+        _PLACEHOLDER_TAG,
+        {id: idStr, equiv: ph.name, disp: `{${ph.value.expression}, ${ph.value.type}, ${cases}}`})];
+  }
+
+  serialize(nodes: i18n.Node[]): xml.Node[] {
+    this._nextPlaceholderId = 0;
+    return [].concat(...nodes.map(node => node.visit(this)));
+  }
+}
+
+// Extract messages as xml nodes from the xliff file
+class Xliff2Parser implements ml.Visitor {
+  private _unitMlString: string|null;
+  private _errors: I18nError[];
+  private _msgIdToHtml: {[msgId: string]: string};
+  private _locale: string|null = null;
+
+  parse(xliff: string, url: string) {
+    this._unitMlString = null;
+    this._msgIdToHtml = {};
+
+    const xml = new XmlParser().parse(xliff, url, false);
+
+    this._errors = xml.errors;
+    ml.visitAll(this, xml.rootNodes, null);
+
+    return {
+      msgIdToHtml: this._msgIdToHtml,
+      errors: this._errors,
+      locale: this._locale,
+    };
+  }
+
+  visitElement(element: ml.Element, context: any): any {
+    switch (element.name) {
+      case _UNIT_TAG:
+        this._unitMlString = null;
+        const idAttr = element.attrs.find((attr) => attr.name === 'id');
+        if (!idAttr) {
+          this._addError(element, `<${_UNIT_TAG}> misses the "id" attribute`);
+        } else {
+          const id = idAttr.value;
+          if (this._msgIdToHtml.hasOwnProperty(id)) {
+            this._addError(element, `Duplicated translations for msg ${id}`);
+          } else {
+            ml.visitAll(this, element.children, null);
+            if (typeof this._unitMlString === 'string') {
+              this._msgIdToHtml[id] = this._unitMlString;
+            } else {
+              this._addError(element, `Message ${id} misses a translation`);
+            }
+          }
+        }
+        break;
+
+      case _SOURCE_TAG:
+        // ignore source message
+        break;
+
+      case _TARGET_TAG:
+        const innerTextStart = element.startSourceSpan !.end.offset;
+        const innerTextEnd = element.endSourceSpan !.start.offset;
+        const content = element.startSourceSpan !.start.file.content;
+        const innerText = content.slice(innerTextStart, innerTextEnd);
+        this._unitMlString = innerText;
+        break;
+
+      case _XLIFF_TAG:
+        const localeAttr = element.attrs.find((attr) => attr.name === 'trgLang');
+        if (localeAttr) {
+          this._locale = localeAttr.value;
+        }
+
+        const versionAttr = element.attrs.find((attr) => attr.name === 'version');
+        if (versionAttr) {
+          const version = versionAttr.value;
+          if (version !== '2.0') {
+            this._addError(
+                element,
+                `The XLIFF file version ${version} is not compatible with XLIFF 2.0 serializer`);
+          } else {
+            ml.visitAll(this, element.children, null);
+          }
+        }
+        break;
+      default:
+        ml.visitAll(this, element.children, null);
+    }
+  }
+
+  visitAttribute(attribute: ml.Attribute, context: any): any {}
+
+  visitText(text: ml.Text, context: any): any {}
+
+  visitComment(comment: ml.Comment, context: any): any {}
+
+  visitExpansion(expansion: ml.Expansion, context: any): any {}
+
+  visitExpansionCase(expansionCase: ml.ExpansionCase, context: any): any {}
+
+  private _addError(node: ml.Node, message: string): void {
+    this._errors.push(new I18nError(node.sourceSpan, message));
+  }
+}
+
+// Convert ml nodes (xliff syntax) to i18n nodes
+class XmlToI18n implements ml.Visitor {
+  private _errors: I18nError[];
+
+  convert(message: string, url: string) {
+    const xmlIcu = new XmlParser().parse(message, url, true);
+    this._errors = xmlIcu.errors;
+
+    const i18nNodes = this._errors.length > 0 || xmlIcu.rootNodes.length == 0 ?
+        [] :
+        [].concat(...ml.visitAll(this, xmlIcu.rootNodes));
+
+    return {
+      i18nNodes,
+      errors: this._errors,
+    };
+  }
+
+  visitText(text: ml.Text, context: any) { return new i18n.Text(text.value, text.sourceSpan); }
+
+  visitElement(el: ml.Element, context: any): i18n.Node[]|null {
+    switch (el.name) {
+      case _PLACEHOLDER_TAG:
+        const nameAttr = el.attrs.find((attr) => attr.name === 'equiv');
+        if (nameAttr) {
+          return [new i18n.Placeholder('', nameAttr.value, el.sourceSpan)];
+        }
+
+        this._addError(el, `<${_PLACEHOLDER_TAG}> misses the "equiv" attribute`);
+        break;
+      case _PLACEHOLDER_SPANNING_TAG:
+        const startAttr = el.attrs.find((attr) => attr.name === 'equivStart');
+        const endAttr = el.attrs.find((attr) => attr.name === 'equivEnd');
+
+        if (!startAttr) {
+          this._addError(el, `<${_PLACEHOLDER_TAG}> misses the "equivStart" attribute`);
+        } else if (!endAttr) {
+          this._addError(el, `<${_PLACEHOLDER_TAG}> misses the "equivEnd" attribute`);
+        } else {
+          const startId = startAttr.value;
+          const endId = endAttr.value;
+
+          const nodes: i18n.Node[] = [];
+
+          return nodes.concat(
+              new i18n.Placeholder('', startId, el.sourceSpan),
+              ...el.children.map(node => node.visit(this, null)),
+              new i18n.Placeholder('', endId, el.sourceSpan));
+        }
+        break;
+      default:
+        this._addError(el, `Unexpected tag`);
+    }
+
+    return null;
+  }
+
+  visitExpansion(icu: ml.Expansion, context: any) {
+    const caseMap: {[value: string]: i18n.Node} = {};
+
+    ml.visitAll(this, icu.cases).forEach((c: any) => {
+      caseMap[c.value] = new i18n.Container(c.nodes, icu.sourceSpan);
+    });
+
+    return new i18n.Icu(icu.switchValue, icu.type, caseMap, icu.sourceSpan);
+  }
+
+  visitExpansionCase(icuCase: ml.ExpansionCase, context: any): any {
+    return {
+      value: icuCase.value,
+      nodes: [].concat(...ml.visitAll(this, icuCase.expression)),
+    };
+  }
+
+  visitComment(comment: ml.Comment, context: any) {}
+
+  visitAttribute(attribute: ml.Attribute, context: any) {}
+
+  private _addError(node: ml.Node, message: string): void {
+    this._errors.push(new I18nError(node.sourceSpan, message));
+  }
+}
+
+function getTypeForTag(tag: string): string {
+  switch (tag.toLowerCase()) {
+    case 'br':
+    case 'b':
+    case 'i':
+    case 'u':
+      return 'fmt';
+    case 'img':
+      return 'image';
+    case 'a':
+      return 'link';
+    default:
+      return 'other';
+  }
+}
diff --git a/packages/compiler/src/i18n/serializers/xmb.ts b/packages/compiler/src/i18n/serializers/xmb.ts
index 9110b27221..dde588f7aa 100644
--- a/packages/compiler/src/i18n/serializers/xmb.ts
+++ b/packages/compiler/src/i18n/serializers/xmb.ts
@@ -16,6 +16,7 @@ const _MESSAGES_TAG = 'messagebundle';
 const _MESSAGE_TAG = 'msg';
 const _PLACEHOLDER_TAG = 'ph';
 const _EXEMPLE_TAG = 'ex';
+const _SOURCE_TAG = 'source';
 
 const _DOCTYPE = `<!ELEMENT messagebundle (msg)*>
 <!ATTLIST messagebundle class CDATA #IMPLIED>
@@ -54,8 +55,17 @@ export class Xmb extends Serializer {
         attrs['meaning'] = message.meaning;
       }
 
+      let sourceTags: xml.Tag[] = [];
+      message.sources.forEach((source: i18n.MessageSpan) => {
+        sourceTags.push(new xml.Tag(_SOURCE_TAG, {}, [
+          new xml.Text(
+              `${source.filePath}:${source.startLine}${source.endLine !== source.startLine ? ',' + source.endLine : ''}`)
+        ]));
+      });
+
       rootNode.children.push(
-          new xml.CR(2), new xml.Tag(_MESSAGE_TAG, attrs, visitor.serialize(message.nodes)));
+          new xml.CR(2),
+          new xml.Tag(_MESSAGE_TAG, attrs, [...sourceTags, ...visitor.serialize(message.nodes)]));
     });
 
     rootNode.children.push(new xml.CR());
@@ -119,11 +129,16 @@ class _Visitor implements i18n.Visitor {
   }
 
   visitPlaceholder(ph: i18n.Placeholder, context?: any): xml.Node[] {
-    return [new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name})];
+    const exTag = new xml.Tag(_EXEMPLE_TAG, {}, [new xml.Text(`{{${ph.value}}}`)]);
+    return [new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name}, [exTag])];
   }
 
   visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): xml.Node[] {
-    return [new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name})];
+    const exTag = new xml.Tag(_EXEMPLE_TAG, {}, [
+      new xml.Text(
+          `{${ph.value.expression}, ${ph.value.type}, ${Object.keys(ph.value.cases).map((value: string) => value + ' {...}').join(' ')}}`)
+    ]);
+    return [new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name}, [exTag])];
   }
 
   serialize(nodes: i18n.Node[]): xml.Node[] {
diff --git a/packages/compiler/src/identifiers.ts b/packages/compiler/src/identifiers.ts
index 08bd1adf41..b2c1d179eb 100644
--- a/packages/compiler/src/identifiers.ts
+++ b/packages/compiler/src/identifiers.ts
@@ -6,139 +6,140 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ANALYZE_FOR_ENTRY_COMPONENTS, ChangeDetectionStrategy, ChangeDetectorRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, LOCALE_ID, NgModuleFactory, NgModuleRef, QueryList, Renderer, SecurityContext, TRANSLATIONS_FORMAT, TemplateRef, ViewContainerRef, ViewEncapsulation, ɵCodegenComponentFactoryResolver, ɵEMPTY_ARRAY, ɵEMPTY_MAP, ɵNgModuleInjector, ɵand, ɵccf, ɵcrt, ɵdid, ɵeld, ɵinlineInterpolate, ɵinterpolate, ɵncd, ɵnov, ɵpad, ɵpid, ɵpod, ɵppd, ɵprd, ɵqud, ɵreflector, ɵregisterModuleFactory, ɵted, ɵunv, ɵvid} from '@angular/core';
+import {ANALYZE_FOR_ENTRY_COMPONENTS, ChangeDetectionStrategy, ChangeDetectorRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, LOCALE_ID, NgModuleFactory, NgModuleRef, QueryList, Renderer, SecurityContext, TRANSLATIONS_FORMAT, TemplateRef, ViewContainerRef, ViewEncapsulation, ɵCodegenComponentFactoryResolver, ɵEMPTY_ARRAY, ɵEMPTY_MAP, ɵand, ɵccf, ɵcmf, ɵcrt, ɵdid, ɵeld, ɵinlineInterpolate, ɵinterpolate, ɵmod, ɵmpd, ɵncd, ɵnov, ɵpad, ɵpid, ɵpod, ɵppd, ɵprd, ɵqud, ɵregisterModuleFactory, ɵted, ɵunv, ɵvid} from '@angular/core';
 
 import {CompileIdentifierMetadata, CompileTokenMetadata} from './compile_metadata';
+import {CompileReflector} from './compile_reflector';
+import * as o from './output/output_ast';
 
-const CORE = assetUrl('core');
-
-export interface IdentifierSpec {
-  name: string;
-  moduleUrl: string;
-  runtime: any;
-}
+const CORE = '@angular/core';
 
 export class Identifiers {
-  static ANALYZE_FOR_ENTRY_COMPONENTS: IdentifierSpec = {
+  static ANALYZE_FOR_ENTRY_COMPONENTS: o.ExternalReference = {
     name: 'ANALYZE_FOR_ENTRY_COMPONENTS',
-    moduleUrl: CORE,
+    moduleName: CORE,
     runtime: ANALYZE_FOR_ENTRY_COMPONENTS
   };
-  static ElementRef: IdentifierSpec = {name: 'ElementRef', moduleUrl: CORE, runtime: ElementRef};
-  static NgModuleRef: IdentifierSpec = {name: 'NgModuleRef', moduleUrl: CORE, runtime: NgModuleRef};
+  static ElementRef:
+      o.ExternalReference = {name: 'ElementRef', moduleName: CORE, runtime: ElementRef};
+  static NgModuleRef:
+      o.ExternalReference = {name: 'NgModuleRef', moduleName: CORE, runtime: NgModuleRef};
   static ViewContainerRef:
-      IdentifierSpec = {name: 'ViewContainerRef', moduleUrl: CORE, runtime: ViewContainerRef};
-  static ChangeDetectorRef:
-      IdentifierSpec = {name: 'ChangeDetectorRef', moduleUrl: CORE, runtime: ChangeDetectorRef};
-  static QueryList: IdentifierSpec = {name: 'QueryList', moduleUrl: CORE, runtime: QueryList};
-  static TemplateRef: IdentifierSpec = {name: 'TemplateRef', moduleUrl: CORE, runtime: TemplateRef};
-  static CodegenComponentFactoryResolver: IdentifierSpec = {
+      o.ExternalReference = {name: 'ViewContainerRef', moduleName: CORE, runtime: ViewContainerRef};
+  static ChangeDetectorRef: o.ExternalReference = {
+    name: 'ChangeDetectorRef',
+    moduleName: CORE,
+    runtime: ChangeDetectorRef
+  };
+  static QueryList: o.ExternalReference = {name: 'QueryList', moduleName: CORE, runtime: QueryList};
+  static TemplateRef:
+      o.ExternalReference = {name: 'TemplateRef', moduleName: CORE, runtime: TemplateRef};
+  static CodegenComponentFactoryResolver: o.ExternalReference = {
     name: 'ɵCodegenComponentFactoryResolver',
-    moduleUrl: CORE,
+    moduleName: CORE,
     runtime: ɵCodegenComponentFactoryResolver
   };
-  static ComponentFactoryResolver: IdentifierSpec = {
+  static ComponentFactoryResolver: o.ExternalReference = {
     name: 'ComponentFactoryResolver',
-    moduleUrl: CORE,
+    moduleName: CORE,
     runtime: ComponentFactoryResolver
   };
   static ComponentFactory:
-      IdentifierSpec = {name: 'ComponentFactory', moduleUrl: CORE, runtime: ComponentFactory};
+      o.ExternalReference = {name: 'ComponentFactory', moduleName: CORE, runtime: ComponentFactory};
   static ComponentRef:
-      IdentifierSpec = {name: 'ComponentRef', moduleUrl: CORE, runtime: ComponentRef};
+      o.ExternalReference = {name: 'ComponentRef', moduleName: CORE, runtime: ComponentRef};
   static NgModuleFactory:
-      IdentifierSpec = {name: 'NgModuleFactory', moduleUrl: CORE, runtime: NgModuleFactory};
-  static NgModuleInjector: IdentifierSpec = {
-    name: 'ɵNgModuleInjector',
-    moduleUrl: CORE,
-    runtime: ɵNgModuleInjector,
+      o.ExternalReference = {name: 'NgModuleFactory', moduleName: CORE, runtime: NgModuleFactory};
+  static createModuleFactory: o.ExternalReference = {
+    name: 'ɵcmf',
+    moduleName: CORE,
+    runtime: ɵcmf,
   };
-  static RegisterModuleFactoryFn: IdentifierSpec = {
+  static moduleDef: o.ExternalReference = {
+    name: 'ɵmod',
+    moduleName: CORE,
+    runtime: ɵmod,
+  };
+  static moduleProviderDef: o.ExternalReference = {
+    name: 'ɵmpd',
+    moduleName: CORE,
+    runtime: ɵmpd,
+  };
+  static RegisterModuleFactoryFn: o.ExternalReference = {
     name: 'ɵregisterModuleFactory',
-    moduleUrl: CORE,
+    moduleName: CORE,
     runtime: ɵregisterModuleFactory,
   };
-  static Injector: IdentifierSpec = {name: 'Injector', moduleUrl: CORE, runtime: Injector};
-  static ViewEncapsulation:
-      IdentifierSpec = {name: 'ViewEncapsulation', moduleUrl: CORE, runtime: ViewEncapsulation};
-  static ChangeDetectionStrategy: IdentifierSpec = {
+  static Injector: o.ExternalReference = {name: 'Injector', moduleName: CORE, runtime: Injector};
+  static ViewEncapsulation: o.ExternalReference = {
+    name: 'ViewEncapsulation',
+    moduleName: CORE,
+    runtime: ViewEncapsulation
+  };
+  static ChangeDetectionStrategy: o.ExternalReference = {
     name: 'ChangeDetectionStrategy',
-    moduleUrl: CORE,
+    moduleName: CORE,
     runtime: ChangeDetectionStrategy
   };
-  static SecurityContext: IdentifierSpec = {
+  static SecurityContext: o.ExternalReference = {
     name: 'SecurityContext',
-    moduleUrl: CORE,
+    moduleName: CORE,
     runtime: SecurityContext,
   };
-  static LOCALE_ID: IdentifierSpec = {name: 'LOCALE_ID', moduleUrl: CORE, runtime: LOCALE_ID};
-  static TRANSLATIONS_FORMAT:
-      IdentifierSpec = {name: 'TRANSLATIONS_FORMAT', moduleUrl: CORE, runtime: TRANSLATIONS_FORMAT};
-  static inlineInterpolate:
-      IdentifierSpec = {name: 'ɵinlineInterpolate', moduleUrl: CORE, runtime: ɵinlineInterpolate};
+  static LOCALE_ID: o.ExternalReference = {name: 'LOCALE_ID', moduleName: CORE, runtime: LOCALE_ID};
+  static TRANSLATIONS_FORMAT: o.ExternalReference = {
+    name: 'TRANSLATIONS_FORMAT',
+    moduleName: CORE,
+    runtime: TRANSLATIONS_FORMAT
+  };
+  static inlineInterpolate: o.ExternalReference = {
+    name: 'ɵinlineInterpolate',
+    moduleName: CORE,
+    runtime: ɵinlineInterpolate
+  };
   static interpolate:
-      IdentifierSpec = {name: 'ɵinterpolate', moduleUrl: CORE, runtime: ɵinterpolate};
+      o.ExternalReference = {name: 'ɵinterpolate', moduleName: CORE, runtime: ɵinterpolate};
   static EMPTY_ARRAY:
-      IdentifierSpec = {name: 'ɵEMPTY_ARRAY', moduleUrl: CORE, runtime: ɵEMPTY_ARRAY};
-  static EMPTY_MAP: IdentifierSpec = {name: 'ɵEMPTY_MAP', moduleUrl: CORE, runtime: ɵEMPTY_MAP};
-  static Renderer: IdentifierSpec = {name: 'Renderer', moduleUrl: CORE, runtime: Renderer};
-  static viewDef: IdentifierSpec = {name: 'ɵvid', moduleUrl: CORE, runtime: ɵvid};
-  static elementDef: IdentifierSpec = {name: 'ɵeld', moduleUrl: CORE, runtime: ɵeld};
-  static anchorDef: IdentifierSpec = {name: 'ɵand', moduleUrl: CORE, runtime: ɵand};
-  static textDef: IdentifierSpec = {name: 'ɵted', moduleUrl: CORE, runtime: ɵted};
-  static directiveDef: IdentifierSpec = {name: 'ɵdid', moduleUrl: CORE, runtime: ɵdid};
-  static providerDef: IdentifierSpec = {name: 'ɵprd', moduleUrl: CORE, runtime: ɵprd};
-  static queryDef: IdentifierSpec = {name: 'ɵqud', moduleUrl: CORE, runtime: ɵqud};
-  static pureArrayDef: IdentifierSpec = {name: 'ɵpad', moduleUrl: CORE, runtime: ɵpad};
-  static pureObjectDef: IdentifierSpec = {name: 'ɵpod', moduleUrl: CORE, runtime: ɵpod};
-  static purePipeDef: IdentifierSpec = {name: 'ɵppd', moduleUrl: CORE, runtime: ɵppd};
-  static pipeDef: IdentifierSpec = {name: 'ɵpid', moduleUrl: CORE, runtime: ɵpid};
-  static nodeValue: IdentifierSpec = {name: 'ɵnov', moduleUrl: CORE, runtime: ɵnov};
-  static ngContentDef: IdentifierSpec = {name: 'ɵncd', moduleUrl: CORE, runtime: ɵncd};
-  static unwrapValue: IdentifierSpec = {name: 'ɵunv', moduleUrl: CORE, runtime: ɵunv};
-  static createRendererType2: IdentifierSpec = {name: 'ɵcrt', moduleUrl: CORE, runtime: ɵcrt};
-  static RendererType2: IdentifierSpec = {
+      o.ExternalReference = {name: 'ɵEMPTY_ARRAY', moduleName: CORE, runtime: ɵEMPTY_ARRAY};
+  static EMPTY_MAP:
+      o.ExternalReference = {name: 'ɵEMPTY_MAP', moduleName: CORE, runtime: ɵEMPTY_MAP};
+  static Renderer: o.ExternalReference = {name: 'Renderer', moduleName: CORE, runtime: Renderer};
+  static viewDef: o.ExternalReference = {name: 'ɵvid', moduleName: CORE, runtime: ɵvid};
+  static elementDef: o.ExternalReference = {name: 'ɵeld', moduleName: CORE, runtime: ɵeld};
+  static anchorDef: o.ExternalReference = {name: 'ɵand', moduleName: CORE, runtime: ɵand};
+  static textDef: o.ExternalReference = {name: 'ɵted', moduleName: CORE, runtime: ɵted};
+  static directiveDef: o.ExternalReference = {name: 'ɵdid', moduleName: CORE, runtime: ɵdid};
+  static providerDef: o.ExternalReference = {name: 'ɵprd', moduleName: CORE, runtime: ɵprd};
+  static queryDef: o.ExternalReference = {name: 'ɵqud', moduleName: CORE, runtime: ɵqud};
+  static pureArrayDef: o.ExternalReference = {name: 'ɵpad', moduleName: CORE, runtime: ɵpad};
+  static pureObjectDef: o.ExternalReference = {name: 'ɵpod', moduleName: CORE, runtime: ɵpod};
+  static purePipeDef: o.ExternalReference = {name: 'ɵppd', moduleName: CORE, runtime: ɵppd};
+  static pipeDef: o.ExternalReference = {name: 'ɵpid', moduleName: CORE, runtime: ɵpid};
+  static nodeValue: o.ExternalReference = {name: 'ɵnov', moduleName: CORE, runtime: ɵnov};
+  static ngContentDef: o.ExternalReference = {name: 'ɵncd', moduleName: CORE, runtime: ɵncd};
+  static unwrapValue: o.ExternalReference = {name: 'ɵunv', moduleName: CORE, runtime: ɵunv};
+  static createRendererType2: o.ExternalReference = {name: 'ɵcrt', moduleName: CORE, runtime: ɵcrt};
+  static RendererType2: o.ExternalReference = {
     name: 'RendererType2',
-    moduleUrl: CORE,
+    moduleName: CORE,
     // type only
     runtime: null
   };
-  static ViewDefinition: IdentifierSpec = {
+  static ViewDefinition: o.ExternalReference = {
     name: 'ɵViewDefinition',
-    moduleUrl: CORE,
+    moduleName: CORE,
     // type only
     runtime: null
   };
-  static createComponentFactory: IdentifierSpec = {name: 'ɵccf', moduleUrl: CORE, runtime: ɵccf};
+  static createComponentFactory:
+      o.ExternalReference = {name: 'ɵccf', moduleName: CORE, runtime: ɵccf};
 }
 
-export function assetUrl(pkg: string, path: string | null = null, type: string = 'src'): string {
-  if (path == null) {
-    return `@angular/${pkg}`;
-  } else {
-    return `@angular/${pkg}/${type}/${path}`;
-  }
+export function createTokenForReference(reference: any): CompileTokenMetadata {
+  return {identifier: {reference: reference}};
 }
 
-export function resolveIdentifier(identifier: IdentifierSpec) {
-  let name = identifier.name;
-  return ɵreflector.resolveIdentifier(name, identifier.moduleUrl, null, identifier.runtime);
-}
-
-export function createIdentifier(identifier: IdentifierSpec): CompileIdentifierMetadata {
-  return {reference: resolveIdentifier(identifier)};
-}
-
-export function identifierToken(identifier: CompileIdentifierMetadata): CompileTokenMetadata {
-  return {identifier: identifier};
-}
-
-export function createIdentifierToken(identifier: IdentifierSpec): CompileTokenMetadata {
-  return identifierToken(createIdentifier(identifier));
-}
-
-export function createEnumIdentifier(
-    enumType: IdentifierSpec, name: string): CompileIdentifierMetadata {
-  const resolvedEnum = ɵreflector.resolveEnum(resolveIdentifier(enumType), name);
-  return {reference: resolvedEnum};
+export function createTokenForExternalReference(
+    reflector: CompileReflector, reference: o.ExternalReference): CompileTokenMetadata {
+  return createTokenForReference(reflector.resolveExternalReference(reference));
 }
diff --git a/packages/compiler/src/jit/compiler.ts b/packages/compiler/src/jit/compiler.ts
index 19c1198a3d..7cf3a447b3 100644
--- a/packages/compiler/src/jit/compiler.ts
+++ b/packages/compiler/src/jit/compiler.ts
@@ -8,7 +8,7 @@
 
 import {Compiler, ComponentFactory, Inject, Injector, ModuleWithComponentFactories, NgModuleFactory, Type, ɵConsole as Console, ɵgetComponentViewDefinitionFactory as getComponentViewDefinitionFactory, ɵstringify as stringify} from '@angular/core';
 
-import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompileStylesheetMetadata, ProviderMeta, ProxyClass, createHostComponentMeta, identifierName, ngModuleJitUrl, sharedStylesheetJitUrl, templateJitUrl, templateSourceUrl} from '../compile_metadata';
+import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompileStylesheetMetadata, CompileTypeSummary, ProviderMeta, ProxyClass, createHostComponentMeta, identifierName, ngModuleJitUrl, sharedStylesheetJitUrl, templateJitUrl, templateSourceUrl} from '../compile_metadata';
 import {CompilerConfig} from '../config';
 import {CompilerInjectable} from '../injectable';
 import {CompileMetadataResolver} from '../metadata_resolver';
@@ -17,8 +17,9 @@ import * as ir from '../output/output_ast';
 import {interpretStatements} from '../output/output_interpreter';
 import {jitStatements} from '../output/output_jit';
 import {CompiledStylesheet, StyleCompiler} from '../style_compiler';
+import {SummaryResolver} from '../summary_resolver';
 import {TemplateParser} from '../template_parser/template_parser';
-import {SyncAsyncResult} from '../util';
+import {OutputContext, SyncAsync} from '../util';
 import {ViewCompiler} from '../view_compiler/view_compiler';
 
 
@@ -44,25 +45,26 @@ export class JitCompiler implements Compiler {
       private _injector: Injector, private _metadataResolver: CompileMetadataResolver,
       private _templateParser: TemplateParser, private _styleCompiler: StyleCompiler,
       private _viewCompiler: ViewCompiler, private _ngModuleCompiler: NgModuleCompiler,
-      private _compilerConfig: CompilerConfig, private _console: Console) {}
+      private _summaryResolver: SummaryResolver<Type<any>>, private _compilerConfig: CompilerConfig,
+      private _console: Console) {}
 
   get injector(): Injector { return this._injector; }
 
   compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T> {
-    return this._compileModuleAndComponents(moduleType, true).syncResult !;
+    return SyncAsync.assertSync(this._compileModuleAndComponents(moduleType, true));
   }
 
   compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>> {
-    return this._compileModuleAndComponents(moduleType, false).asyncResult !;
+    return Promise.resolve(this._compileModuleAndComponents(moduleType, false));
   }
 
   compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T> {
-    return this._compileModuleAndAllComponents(moduleType, true).syncResult !;
+    return SyncAsync.assertSync(this._compileModuleAndAllComponents(moduleType, true));
   }
 
   compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
       Promise<ModuleWithComponentFactories<T>> {
-    return this._compileModuleAndAllComponents(moduleType, false).asyncResult !;
+    return Promise.resolve(this._compileModuleAndAllComponents(moduleType, false));
   }
 
   getNgContentSelectors(component: Type<any>): string[] {
@@ -75,47 +77,61 @@ export class JitCompiler implements Compiler {
     return template.compMeta.template !.ngContentSelectors;
   }
 
+  getComponentFactory<T>(component: Type<T>): ComponentFactory<T> {
+    const summary = this._metadataResolver.getDirectiveSummary(component);
+    return <ComponentFactory<T>>summary.componentFactory;
+  }
+
+  loadAotSummaries(summaries: () => any[]) {
+    this.clearCache();
+    flattenSummaries(summaries).forEach((summary) => {
+      this._summaryResolver.addSummary(
+          {symbol: summary.type.reference, metadata: null, type: summary});
+    });
+  }
+
+  hasAotSummary(ref: Type<any>) { return !!this._summaryResolver.resolveSummary(ref); }
+
+  private _filterJitIdentifiers(ids: CompileIdentifierMetadata[]): any[] {
+    return ids.map(mod => mod.reference).filter((ref) => !this.hasAotSummary(ref));
+  }
+
   private _compileModuleAndComponents<T>(moduleType: Type<T>, isSync: boolean):
-      SyncAsyncResult<NgModuleFactory<T>> {
-    const loadingPromise = this._loadModules(moduleType, isSync);
-    const createResult = () => {
+      SyncAsync<NgModuleFactory<T>> {
+    return SyncAsync.then(this._loadModules(moduleType, isSync), () => {
       this._compileComponents(moduleType, null);
       return this._compileModule(moduleType);
-    };
-    if (isSync) {
-      return new SyncAsyncResult(createResult());
-    } else {
-      return new SyncAsyncResult(null, loadingPromise.then(createResult));
-    }
+    });
   }
 
   private _compileModuleAndAllComponents<T>(moduleType: Type<T>, isSync: boolean):
-      SyncAsyncResult<ModuleWithComponentFactories<T>> {
-    const loadingPromise = this._loadModules(moduleType, isSync);
-    const createResult = () => {
+      SyncAsync<ModuleWithComponentFactories<T>> {
+    return SyncAsync.then(this._loadModules(moduleType, isSync), () => {
       const componentFactories: ComponentFactory<any>[] = [];
       this._compileComponents(moduleType, componentFactories);
       return new ModuleWithComponentFactories(this._compileModule(moduleType), componentFactories);
-    };
-    if (isSync) {
-      return new SyncAsyncResult(createResult());
-    } else {
-      return new SyncAsyncResult(null, loadingPromise.then(createResult));
-    }
+    });
   }
 
-  private _loadModules(mainModule: any, isSync: boolean): Promise<any> {
-    const loadingPromises: Promise<any>[] = [];
-    const ngModule = this._metadataResolver.getNgModuleMetadata(mainModule) !;
-    // Note: the loadingPromise for a module only includes the loading of the exported directives
-    // of imported modules.
-    // However, for runtime compilation, we want to transitively compile all modules,
-    // so we also need to call loadNgModuleDirectiveAndPipeMetadata for all nested modules.
-    ngModule.transitiveModule.modules.forEach((localModuleMeta) => {
-      loadingPromises.push(this._metadataResolver.loadNgModuleDirectiveAndPipeMetadata(
-          localModuleMeta.reference, isSync));
+  private _loadModules(mainModule: any, isSync: boolean): SyncAsync<any> {
+    const loading: Promise<any>[] = [];
+    const mainNgModule = this._metadataResolver.getNgModuleMetadata(mainModule) !;
+    // Note: for runtime compilation, we want to transitively compile all modules,
+    // so we also need to load the declared directives / pipes for all nested modules.
+    this._filterJitIdentifiers(mainNgModule.transitiveModule.modules).forEach((nestedNgModule) => {
+      // getNgModuleMetadata only returns null if the value passed in is not an NgModule
+      const moduleMeta = this._metadataResolver.getNgModuleMetadata(nestedNgModule) !;
+      this._filterJitIdentifiers(moduleMeta.declaredDirectives).forEach((ref) => {
+        const promise =
+            this._metadataResolver.loadDirectiveMetadata(moduleMeta.type.reference, ref, isSync);
+        if (promise) {
+          loading.push(promise);
+        }
+      });
+      this._filterJitIdentifiers(moduleMeta.declaredPipes)
+          .forEach((ref) => this._metadataResolver.getOrLoadPipeMetadata(ref));
     });
-    return Promise.all(loadingPromises);
+    return SyncAsync.all(loading);
   }
 
   private _compileModule<T>(moduleType: Type<T>): NgModuleFactory<T> {
@@ -125,14 +141,14 @@ export class JitCompiler implements Compiler {
       // Always provide a bound Compiler
       const extraProviders = [this._metadataResolver.getProviderMetadata(new ProviderMeta(
           Compiler, {useFactory: () => new ModuleBoundCompiler(this, moduleMeta.type.reference)}))];
-      const compileResult = this._ngModuleCompiler.compile(moduleMeta, extraProviders);
+      const outputCtx = createOutputContext();
+      const compileResult = this._ngModuleCompiler.compile(outputCtx, moduleMeta, extraProviders);
       if (!this._compilerConfig.useJit) {
         ngModuleFactory =
-            interpretStatements(compileResult.statements, [compileResult.ngModuleFactoryVar])[0];
+            interpretStatements(outputCtx.statements)[compileResult.ngModuleFactoryVar];
       } else {
         ngModuleFactory = jitStatements(
-            ngModuleJitUrl(moduleMeta), compileResult.statements,
-            [compileResult.ngModuleFactoryVar])[0];
+            ngModuleJitUrl(moduleMeta), outputCtx.statements, )[compileResult.ngModuleFactoryVar];
       }
       this._compiledNgModuleCache.set(moduleMeta.type.reference, ngModuleFactory);
     }
@@ -144,15 +160,15 @@ export class JitCompiler implements Compiler {
    */
   _compileComponents(mainModule: Type<any>, allComponentFactories: ComponentFactory<any>[]|null) {
     const ngModule = this._metadataResolver.getNgModuleMetadata(mainModule) !;
-    const moduleByDirective = new Map<any, CompileNgModuleMetadata>();
+    const moduleByJitDirective = new Map<any, CompileNgModuleMetadata>();
     const templates = new Set<CompiledTemplate>();
 
-    ngModule.transitiveModule.modules.forEach((localModuleSummary) => {
-      const localModuleMeta =
-          this._metadataResolver.getNgModuleMetadata(localModuleSummary.reference) !;
-      localModuleMeta.declaredDirectives.forEach((dirIdentifier) => {
-        moduleByDirective.set(dirIdentifier.reference, localModuleMeta);
-        const dirMeta = this._metadataResolver.getDirectiveMetadata(dirIdentifier.reference);
+    const transJitModules = this._filterJitIdentifiers(ngModule.transitiveModule.modules);
+    transJitModules.forEach((localMod) => {
+      const localModuleMeta = this._metadataResolver.getNgModuleMetadata(localMod) !;
+      this._filterJitIdentifiers(localModuleMeta.declaredDirectives).forEach((dirRef) => {
+        moduleByJitDirective.set(dirRef, localModuleMeta);
+        const dirMeta = this._metadataResolver.getDirectiveMetadata(dirRef);
         if (dirMeta.isComponent) {
           templates.add(this._createCompiledTemplate(dirMeta, localModuleMeta));
           if (allComponentFactories) {
@@ -164,23 +180,24 @@ export class JitCompiler implements Compiler {
         }
       });
     });
-    ngModule.transitiveModule.modules.forEach((localModuleSummary) => {
-      const localModuleMeta =
-          this._metadataResolver.getNgModuleMetadata(localModuleSummary.reference) !;
-      localModuleMeta.declaredDirectives.forEach((dirIdentifier) => {
-        const dirMeta = this._metadataResolver.getDirectiveMetadata(dirIdentifier.reference);
+    transJitModules.forEach((localMod) => {
+      const localModuleMeta = this._metadataResolver.getNgModuleMetadata(localMod) !;
+      this._filterJitIdentifiers(localModuleMeta.declaredDirectives).forEach((dirRef) => {
+        const dirMeta = this._metadataResolver.getDirectiveMetadata(dirRef);
         if (dirMeta.isComponent) {
           dirMeta.entryComponents.forEach((entryComponentType) => {
-            const moduleMeta = moduleByDirective.get(entryComponentType.componentType) !;
+            const moduleMeta = moduleByJitDirective.get(entryComponentType.componentType) !;
             templates.add(
                 this._createCompiledHostTemplate(entryComponentType.componentType, moduleMeta));
           });
         }
       });
       localModuleMeta.entryComponents.forEach((entryComponentType) => {
-        const moduleMeta = moduleByDirective.get(entryComponentType.componentType) !;
-        templates.add(
-            this._createCompiledHostTemplate(entryComponentType.componentType, moduleMeta));
+        if (!this.hasAotSummary(entryComponentType.componentType.reference)) {
+          const moduleMeta = moduleByJitDirective.get(entryComponentType.componentType) !;
+          templates.add(
+              this._createCompiledHostTemplate(entryComponentType.componentType, moduleMeta));
+        }
       });
     });
     templates.forEach((template) => this._compileTemplate(template));
@@ -243,11 +260,14 @@ export class JitCompiler implements Compiler {
     }
     const compMeta = template.compMeta;
     const externalStylesheetsByModuleUrl = new Map<string, CompiledStylesheet>();
-    const stylesCompileResult = this._styleCompiler.compileComponent(compMeta);
-    stylesCompileResult.externalStylesheets.forEach(
-        (r) => { externalStylesheetsByModuleUrl.set(r.meta.moduleUrl !, r); });
-    this._resolveStylesCompileResult(
-        stylesCompileResult.componentStylesheet, externalStylesheetsByModuleUrl);
+    const outputContext = createOutputContext();
+    const componentStylesheet = this._styleCompiler.compileComponent(outputContext, compMeta);
+    compMeta.template !.externalStylesheets.forEach((stylesheetMeta) => {
+      const compiledStylesheet =
+          this._styleCompiler.compileStyles(createOutputContext(), compMeta, stylesheetMeta);
+      externalStylesheetsByModuleUrl.set(stylesheetMeta.moduleUrl !, compiledStylesheet);
+    });
+    this._resolveStylesCompileResult(componentStylesheet, externalStylesheetsByModuleUrl);
     const directives =
         template.directives.map(dir => this._metadataResolver.getDirectiveSummary(dir.reference));
     const pipes = template.ngModule.transitiveModule.pipes.map(
@@ -256,22 +276,17 @@ export class JitCompiler implements Compiler {
         compMeta, compMeta.template !.template !, directives, pipes, template.ngModule.schemas,
         templateSourceUrl(template.ngModule.type, template.compMeta, template.compMeta.template !));
     const compileResult = this._viewCompiler.compileComponent(
-        compMeta, parsedTemplate, ir.variable(stylesCompileResult.componentStylesheet.stylesVar),
+        outputContext, compMeta, parsedTemplate, ir.variable(componentStylesheet.stylesVar),
         usedPipes);
-    const statements =
-        stylesCompileResult.componentStylesheet.statements.concat(compileResult.statements);
-    let viewClassAndRendererTypeVars = compMeta.isHost ?
-        [compileResult.viewClassVar] :
-        [compileResult.viewClassVar, compileResult.rendererTypeVar];
-    let viewClass: any;
-    let rendererType: any;
+    let evalResult: any;
     if (!this._compilerConfig.useJit) {
-      [viewClass, rendererType] = interpretStatements(statements, viewClassAndRendererTypeVars);
+      evalResult = interpretStatements(outputContext.statements);
     } else {
-      [viewClass, rendererType] = jitStatements(
-          templateJitUrl(template.ngModule.type, template.compMeta), statements,
-          viewClassAndRendererTypeVars);
+      evalResult = jitStatements(
+          templateJitUrl(template.ngModule.type, template.compMeta), outputContext.statements);
     }
+    const viewClass = evalResult[compileResult.viewClassVar];
+    const rendererType = evalResult[compileResult.rendererTypeVar];
     template.compiled(viewClass, rendererType);
   }
 
@@ -281,7 +296,7 @@ export class JitCompiler implements Compiler {
       const nestedCompileResult = externalStylesheetsByModuleUrl.get(dep.moduleUrl) !;
       const nestedStylesArr = this._resolveAndEvalStylesCompileResult(
           nestedCompileResult, externalStylesheetsByModuleUrl);
-      dep.valuePlaceholder.reference = nestedStylesArr;
+      dep.setValue(nestedStylesArr);
     });
   }
 
@@ -290,11 +305,11 @@ export class JitCompiler implements Compiler {
       externalStylesheetsByModuleUrl: Map<string, CompiledStylesheet>): string[] {
     this._resolveStylesCompileResult(result, externalStylesheetsByModuleUrl);
     if (!this._compilerConfig.useJit) {
-      return interpretStatements(result.statements, [result.stylesVar])[0];
+      return interpretStatements(result.outputCtx.statements)[result.stylesVar];
     } else {
       return jitStatements(
-          sharedStylesheetJitUrl(result.meta, this._sharedStylesheetCount++), result.statements,
-          [result.stylesVar])[0];
+          sharedStylesheetJitUrl(result.meta, this._sharedStylesheetCount++),
+          result.outputCtx.statements)[result.stylesVar];
     }
   }
 }
@@ -353,7 +368,6 @@ class ModuleBoundCompiler implements Compiler {
     return this._delegate.getNgContentSelectors(component);
   }
 
-
   /**
    * Clears all caches
    */
@@ -364,3 +378,21 @@ class ModuleBoundCompiler implements Compiler {
    */
   clearCacheFor(type: Type<any>) { this._delegate.clearCacheFor(type); }
 }
+
+
+function flattenSummaries(fn: () => any[], out: CompileTypeSummary[] = []): CompileTypeSummary[] {
+  fn().forEach((entry) => {
+    if (typeof entry === 'function') {
+      flattenSummaries(entry, out);
+    } else {
+      out.push(entry);
+    }
+  });
+  return out;
+}
+
+function createOutputContext(): OutputContext {
+  const importExpr = (symbol: any) =>
+      ir.importExpr({name: identifierName(symbol), moduleName: null, runtime: symbol});
+  return {statements: [], genFilePath: '', importExpr};
+}
diff --git a/packages/compiler/src/jit/compiler_factory.ts b/packages/compiler/src/jit/compiler_factory.ts
index 09a83995e6..fc2458ea0d 100644
--- a/packages/compiler/src/jit/compiler_factory.ts
+++ b/packages/compiler/src/jit/compiler_factory.ts
@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {COMPILER_OPTIONS, Compiler, CompilerFactory, CompilerOptions, Inject, InjectionToken, MissingTranslationStrategy, Optional, PLATFORM_INITIALIZER, PlatformRef, Provider, ReflectiveInjector, TRANSLATIONS, TRANSLATIONS_FORMAT, Type, ViewEncapsulation, createPlatformFactory, isDevMode, platformCore, ɵConsole as Console, ɵReflectionCapabilities as ReflectionCapabilities, ɵReflector as Reflector, ɵReflectorReader as ReflectorReader, ɵreflector as reflector} from '@angular/core';
+import {COMPILER_OPTIONS, Compiler, CompilerFactory, CompilerOptions, Inject, InjectionToken, MissingTranslationStrategy, Optional, PlatformRef, Provider, ReflectiveInjector, TRANSLATIONS, TRANSLATIONS_FORMAT, Type, ViewEncapsulation, createPlatformFactory, isDevMode, platformCore, ɵConsole as Console} from '@angular/core';
+
+import {CompileReflector} from '../compile_reflector';
 import {CompilerConfig} from '../config';
 import {DirectiveNormalizer} from '../directive_normalizer';
 import {DirectiveResolver} from '../directive_resolver';
@@ -23,12 +25,13 @@ import {ResourceLoader} from '../resource_loader';
 import {DomElementSchemaRegistry} from '../schema/dom_element_schema_registry';
 import {ElementSchemaRegistry} from '../schema/element_schema_registry';
 import {StyleCompiler} from '../style_compiler';
-import {SummaryResolver} from '../summary_resolver';
+import {JitSummaryResolver, SummaryResolver} from '../summary_resolver';
 import {TemplateParser} from '../template_parser/template_parser';
 import {DEFAULT_PACKAGE_URL_PROVIDER, UrlResolver} from '../url_resolver';
 import {ViewCompiler} from '../view_compiler/view_compiler';
 
 import {JitCompiler} from './compiler';
+import {JitReflector} from './jit_reflector';
 
 const _NO_RESOURCE_LOADER: ResourceLoader = {
   get(url: string): Promise<string>{
@@ -43,10 +46,10 @@ const baseHtmlParser = new InjectionToken('HtmlParser');
  * template compilation.
  */
 export const COMPILER_PROVIDERS: Array<any|Type<any>|{[k: string]: any}|any[]> = [
-  {provide: Reflector, useValue: reflector},
-  {provide: ReflectorReader, useExisting: Reflector},
+  {provide: CompileReflector, useValue: new JitReflector()},
   {provide: ResourceLoader, useValue: _NO_RESOURCE_LOADER},
-  SummaryResolver,
+  JitSummaryResolver,
+  {provide: SummaryResolver, useExisting: JitSummaryResolver},
   Console,
   Lexer,
   Parser,
@@ -56,10 +59,13 @@ export const COMPILER_PROVIDERS: Array<any|Type<any>|{[k: string]: any}|any[]> =
   },
   {
     provide: i18n.I18NHtmlParser,
-    useFactory: (parser: HtmlParser, translations: string, format: string, config: CompilerConfig,
-                 console: Console) =>
-                    new i18n.I18NHtmlParser(
-                        parser, translations, format, config.missingTranslation !, console),
+    useFactory: (parser: HtmlParser, translations: string | null, format: string,
+                 config: CompilerConfig, console: Console) => {
+      translations = translations || '';
+      const missingTranslation =
+          translations ? config.missingTranslation ! : MissingTranslationStrategy.Ignore;
+      return new i18n.I18NHtmlParser(parser, translations, format, missingTranslation, console);
+    },
     deps: [
       baseHtmlParser,
       [new Optional(), new Inject(TRANSLATIONS)],
@@ -129,10 +135,6 @@ export class JitCompilerFactory implements CompilerFactory {
   }
 }
 
-function _initReflector() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-}
-
 /**
  * A platform that included corePlatform and the compiler.
  *
@@ -141,7 +143,6 @@ function _initReflector() {
 export const platformCoreDynamic = createPlatformFactory(platformCore, 'coreDynamic', [
   {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
   {provide: CompilerFactory, useClass: JitCompilerFactory},
-  {provide: PLATFORM_INITIALIZER, useValue: _initReflector, multi: true},
 ]);
 
 function _mergeOptions(optionsArr: CompilerOptions[]): CompilerOptions {
@@ -150,6 +151,7 @@ function _mergeOptions(optionsArr: CompilerOptions[]): CompilerOptions {
     defaultEncapsulation: _lastDefined(optionsArr.map(options => options.defaultEncapsulation)),
     providers: _mergeArrays(optionsArr.map(options => options.providers !)),
     missingTranslation: _lastDefined(optionsArr.map(options => options.missingTranslation)),
+    enableLegacyTemplate: _lastDefined(optionsArr.map(options => options.enableLegacyTemplate)),
   };
 }
 
diff --git a/packages/compiler/src/jit/jit_reflector.ts b/packages/compiler/src/jit/jit_reflector.ts
new file mode 100644
index 0000000000..2fd8a31c01
--- /dev/null
+++ b/packages/compiler/src/jit/jit_reflector.ts
@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, ɵReflectionCapabilities as ReflectionCapabilities, ɵstringify as stringify} from '@angular/core';
+
+import {CompileReflector} from '../compile_reflector';
+import * as o from '../output/output_ast';
+import {getUrlScheme} from '../url_resolver';
+import {MODULE_SUFFIX, ValueTransformer, noUndefined, syntaxError, visitValue} from '../util';
+
+export class JitReflector implements CompileReflector {
+  private reflectionCapabilities: ReflectionCapabilities;
+  constructor() { this.reflectionCapabilities = new ReflectionCapabilities(); }
+  componentModuleUrl(type: any, cmpMetadata: Component): string {
+    const moduleId = cmpMetadata.moduleId;
+
+    if (typeof moduleId === 'string') {
+      const scheme = getUrlScheme(moduleId);
+      return scheme ? moduleId : `package:${moduleId}${MODULE_SUFFIX}`;
+    } else if (moduleId !== null && moduleId !== void 0) {
+      throw syntaxError(
+          `moduleId should be a string in "${stringify(type)}". See https://goo.gl/wIDDiL for more information.\n` +
+          `If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc.`);
+    }
+
+    return `./${stringify(type)}`;
+  }
+  parameters(typeOrFunc: /*Type*/ any): any[][] {
+    return this.reflectionCapabilities.parameters(typeOrFunc);
+  }
+  annotations(typeOrFunc: /*Type*/ any): any[] {
+    return this.reflectionCapabilities.annotations(typeOrFunc);
+  }
+  propMetadata(typeOrFunc: /*Type*/ any): {[key: string]: any[]} {
+    return this.reflectionCapabilities.propMetadata(typeOrFunc);
+  }
+  hasLifecycleHook(type: any, lcProperty: string): boolean {
+    return this.reflectionCapabilities.hasLifecycleHook(type, lcProperty);
+  }
+  resolveExternalReference(ref: o.ExternalReference): any { return ref.runtime; }
+}
\ No newline at end of file
diff --git a/packages/compiler/src/lifecycle_reflector.ts b/packages/compiler/src/lifecycle_reflector.ts
index 00decb2c51..738e699176 100644
--- a/packages/compiler/src/lifecycle_reflector.ts
+++ b/packages/compiler/src/lifecycle_reflector.ts
@@ -6,30 +6,51 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵLifecycleHooks, ɵreflector} from '@angular/core';
+import {CompileReflector} from './compile_reflector';
 
-
-export function hasLifecycleHook(hook: ɵLifecycleHooks, token: any): boolean {
-  return ɵreflector.hasLifecycleHook(token, getHookName(hook));
+export enum LifecycleHooks {
+  OnInit,
+  OnDestroy,
+  DoCheck,
+  OnChanges,
+  AfterContentInit,
+  AfterContentChecked,
+  AfterViewInit,
+  AfterViewChecked
 }
 
-function getHookName(hook: ɵLifecycleHooks): string {
+export const LIFECYCLE_HOOKS_VALUES = [
+  LifecycleHooks.OnInit, LifecycleHooks.OnDestroy, LifecycleHooks.DoCheck, LifecycleHooks.OnChanges,
+  LifecycleHooks.AfterContentInit, LifecycleHooks.AfterContentChecked, LifecycleHooks.AfterViewInit,
+  LifecycleHooks.AfterViewChecked
+];
+
+export function hasLifecycleHook(
+    reflector: CompileReflector, hook: LifecycleHooks, token: any): boolean {
+  return reflector.hasLifecycleHook(token, getHookName(hook));
+}
+
+export function getAllLifecycleHooks(reflector: CompileReflector, token: any): LifecycleHooks[] {
+  return LIFECYCLE_HOOKS_VALUES.filter(hook => hasLifecycleHook(reflector, hook, token));
+}
+
+function getHookName(hook: LifecycleHooks): string {
   switch (hook) {
-    case ɵLifecycleHooks.OnInit:
+    case LifecycleHooks.OnInit:
       return 'ngOnInit';
-    case ɵLifecycleHooks.OnDestroy:
+    case LifecycleHooks.OnDestroy:
       return 'ngOnDestroy';
-    case ɵLifecycleHooks.DoCheck:
+    case LifecycleHooks.DoCheck:
       return 'ngDoCheck';
-    case ɵLifecycleHooks.OnChanges:
+    case LifecycleHooks.OnChanges:
       return 'ngOnChanges';
-    case ɵLifecycleHooks.AfterContentInit:
+    case LifecycleHooks.AfterContentInit:
       return 'ngAfterContentInit';
-    case ɵLifecycleHooks.AfterContentChecked:
+    case LifecycleHooks.AfterContentChecked:
       return 'ngAfterContentChecked';
-    case ɵLifecycleHooks.AfterViewInit:
+    case LifecycleHooks.AfterViewInit:
       return 'ngAfterViewInit';
-    case ɵLifecycleHooks.AfterViewChecked:
+    case LifecycleHooks.AfterViewChecked:
       return 'ngAfterViewChecked';
   }
 }
diff --git a/packages/compiler/src/metadata_resolver.ts b/packages/compiler/src/metadata_resolver.ts
index 21685a565d..5efad1d1d5 100644
--- a/packages/compiler/src/metadata_resolver.ts
+++ b/packages/compiler/src/metadata_resolver.ts
@@ -6,24 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Attribute, ChangeDetectionStrategy, Component, ComponentFactory, Directive, Host, Inject, Injectable, InjectionToken, ModuleWithProviders, Optional, Provider, Query, RendererType2, SchemaMetadata, Self, SkipSelf, Type, resolveForwardRef, ɵConsole as Console, ɵERROR_COMPONENT_TYPE, ɵLIFECYCLE_HOOKS_VALUES, ɵReflectorReader, ɵccf as createComponentFactory, ɵreflector, ɵstringify as stringify} from '@angular/core';
+import {Attribute, ChangeDetectionStrategy, Component, ComponentFactory, Directive, Host, Inject, Injectable, InjectionToken, ModuleWithProviders, Optional, Provider, Query, RendererType2, SchemaMetadata, Self, SkipSelf, Type, resolveForwardRef, ɵConsole as Console, ɵERROR_COMPONENT_TYPE, ɵccf as createComponentFactory, ɵisPromise as isPromise, ɵstringify as stringify} from '@angular/core';
 
 import {StaticSymbol, StaticSymbolCache} from './aot/static_symbol';
 import {ngfactoryFilePath} from './aot/util';
 import {assertArrayOfStrings, assertInterpolationSymbols} from './assertions';
 import * as cpl from './compile_metadata';
+import {CompileReflector} from './compile_reflector';
 import {CompilerConfig} from './config';
 import {DirectiveNormalizer} from './directive_normalizer';
 import {DirectiveResolver} from './directive_resolver';
-import {Identifiers, resolveIdentifier} from './identifiers';
+import {Identifiers} from './identifiers';
 import {CompilerInjectable} from './injectable';
-import {hasLifecycleHook} from './lifecycle_reflector';
+import {getAllLifecycleHooks} from './lifecycle_reflector';
 import {NgModuleResolver} from './ng_module_resolver';
 import {PipeResolver} from './pipe_resolver';
 import {ElementSchemaRegistry} from './schema/element_schema_registry';
 import {SummaryResolver} from './summary_resolver';
-import {getUrlScheme} from './url_resolver';
-import {MODULE_SUFFIX, ValueTransformer, noUndefined, syntaxError, visitValue} from './util';
+import {SyncAsync, ValueTransformer, noUndefined, syntaxError, visitValue} from './util';
 
 export type ErrorCollector = (error: any, type?: any) => void;
 export const ERROR_COLLECTOR_TOKEN = new InjectionToken('ErrorCollector');
@@ -52,9 +52,11 @@ export class CompileMetadataResolver {
       private _schemaRegistry: ElementSchemaRegistry,
       private _directiveNormalizer: DirectiveNormalizer, private _console: Console,
       @Optional() private _staticSymbolCache: StaticSymbolCache,
-      private _reflector: ɵReflectorReader = ɵreflector,
+      private _reflector: CompileReflector,
       @Optional() @Inject(ERROR_COLLECTOR_TOKEN) private _errorCollector?: ErrorCollector) {}
 
+  getReflector(): CompileReflector { return this._reflector; }
+
   clearCacheFor(type: Type<any>) {
     const dirMeta = this._directiveCache.get(type);
     this._directiveCache.delete(type);
@@ -167,8 +169,7 @@ export class CompileMetadataResolver {
     return typeSummary && typeSummary.summaryKind === kind ? typeSummary : null;
   }
 
-  private _loadDirectiveMetadata(ngModuleType: any, directiveType: any, isSync: boolean):
-      Promise<any>|null {
+  loadDirectiveMetadata(ngModuleType: any, directiveType: any, isSync: boolean): SyncAsync<null> {
     if (this._directiveCache.has(directiveType)) {
       return null;
     }
@@ -203,7 +204,7 @@ export class CompileMetadataResolver {
       }
       this._directiveCache.set(directiveType, normalizedDirMeta);
       this._summaryCache.set(directiveType, normalizedDirMeta.toSummary());
-      return normalizedDirMeta;
+      return null;
     };
 
     if (metadata.isComponent) {
@@ -211,7 +212,7 @@ export class CompileMetadataResolver {
       const templateMeta = this._directiveNormalizer.normalizeTemplate({
         ngModuleType,
         componentType: directiveType,
-        moduleUrl: componentModuleUrl(this._reflector, directiveType, annotation),
+        moduleUrl: this._reflector.componentModuleUrl(directiveType, annotation),
         encapsulation: template.encapsulation,
         template: template.template,
         templateUrl: template.templateUrl,
@@ -220,16 +221,11 @@ export class CompileMetadataResolver {
         animations: template.animations,
         interpolation: template.interpolation
       });
-      if (templateMeta.syncResult) {
-        createDirectiveMetadata(templateMeta.syncResult);
+      if (isPromise(templateMeta) && isSync) {
+        this._reportError(componentStillLoadingError(directiveType), directiveType);
         return null;
-      } else {
-        if (isSync) {
-          this._reportError(componentStillLoadingError(directiveType), directiveType);
-          return null;
-        }
-        return templateMeta.asyncResult !.then(createDirectiveMetadata);
       }
+      return SyncAsync.then(templateMeta, createDirectiveMetadata);
     } else {
       // directive
       createDirectiveMetadata(null);
@@ -377,9 +373,20 @@ export class CompileMetadataResolver {
     return dirSummary;
   }
 
-  isDirective(type: any) { return this._directiveResolver.isDirective(type); }
+  isDirective(type: any) {
+    return !!this._loadSummary(type, cpl.CompileSummaryKind.Directive) ||
+        this._directiveResolver.isDirective(type);
+  }
 
-  isPipe(type: any) { return this._pipeResolver.isPipe(type); }
+  isPipe(type: any) {
+    return !!this._loadSummary(type, cpl.CompileSummaryKind.Pipe) ||
+        this._pipeResolver.isPipe(type);
+  }
+
+  isNgModule(type: any) {
+    return !!this._loadSummary(type, cpl.CompileSummaryKind.NgModule) ||
+        this._ngModuleResolver.isNgModule(type);
+  }
 
   getNgModuleSummary(moduleType: any): cpl.CompileNgModuleSummary|null {
     let moduleSummary: cpl.CompileNgModuleSummary|null =
@@ -403,7 +410,7 @@ export class CompileMetadataResolver {
     const loading: Promise<any>[] = [];
     if (ngModule) {
       ngModule.declaredDirectives.forEach((id) => {
-        const promise = this._loadDirectiveMetadata(moduleType, id.reference, isSync);
+        const promise = this.loadDirectiveMetadata(moduleType, id.reference, isSync);
         if (promise) {
           loading.push(promise);
         }
@@ -501,11 +508,11 @@ export class CompileMetadataResolver {
           return;
         }
         const declaredIdentifier = this._getIdentifierMetadata(declaredType);
-        if (this._directiveResolver.isDirective(declaredType)) {
+        if (this.isDirective(declaredType)) {
           transitiveModule.addDirective(declaredIdentifier);
           declaredDirectives.push(declaredIdentifier);
           this._addTypeToModule(declaredType, moduleType);
-        } else if (this._pipeResolver.isPipe(declaredType)) {
+        } else if (this.isPipe(declaredType)) {
           transitiveModule.addPipe(declaredIdentifier);
           transitiveModule.pipes.push(declaredIdentifier);
           declaredPipes.push(declaredIdentifier);
@@ -604,15 +611,15 @@ export class CompileMetadataResolver {
   }
 
   private _getTypeDescriptor(type: Type<any>): string {
-    if (this._directiveResolver.isDirective(type)) {
+    if (this.isDirective(type)) {
       return 'directive';
     }
 
-    if (this._pipeResolver.isPipe(type)) {
+    if (this.isPipe(type)) {
       return 'pipe';
     }
 
-    if (this._ngModuleResolver.isNgModule(type)) {
+    if (this.isNgModule(type)) {
       return 'module';
     }
 
@@ -711,8 +718,7 @@ export class CompileMetadataResolver {
     return {
       reference: identifier.reference,
       diDeps: this._getDependenciesMetadata(identifier.reference, dependencies, throwOnUnknownDeps),
-      lifecycleHooks:
-          ɵLIFECYCLE_HOOKS_VALUES.filter(hook => hasLifecycleHook(hook, identifier.reference)),
+      lifecycleHooks: getAllLifecycleHooks(this._reflector, identifier.reference),
     };
   }
 
@@ -890,7 +896,8 @@ export class CompileMetadataResolver {
               type);
           return;
         }
-        if (providerMeta.token === resolveIdentifier(Identifiers.ANALYZE_FOR_ENTRY_COMPONENTS)) {
+        if (providerMeta.token ===
+            this._reflector.resolveExternalReference(Identifiers.ANALYZE_FOR_ENTRY_COMPONENTS)) {
           targetEntryComponents.push(...this._getEntryComponentsFromProvider(providerMeta, type));
         } else {
           compileProviders.push(this.getProviderMetadata(providerMeta));
@@ -1068,26 +1075,6 @@ function isValidType(value: any): boolean {
   return (value instanceof StaticSymbol) || (value instanceof Type);
 }
 
-export function componentModuleUrl(
-    reflector: ɵReflectorReader, type: Type<any>, cmpMetadata: Component): string {
-  if (type instanceof StaticSymbol) {
-    return reflector.resourceUri(type);
-  }
-
-  const moduleId = cmpMetadata.moduleId;
-
-  if (typeof moduleId === 'string') {
-    const scheme = getUrlScheme(moduleId);
-    return scheme ? moduleId : `package:${moduleId}${MODULE_SUFFIX}`;
-  } else if (moduleId !== null && moduleId !== void 0) {
-    throw syntaxError(
-        `moduleId should be a string in "${stringifyType(type)}". See https://goo.gl/wIDDiL for more information.\n` +
-        `If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc.`);
-  }
-
-  return reflector.importUri(type) !;
-}
-
 function extractIdentifiers(value: any, targetIdentifiers: cpl.CompileIdentifierMetadata[]) {
   visitValue(value, new _CompileValueConverter(), targetIdentifiers);
 }
diff --git a/packages/compiler/src/ml_parser/ast.ts b/packages/compiler/src/ml_parser/ast.ts
index 03ebb292da..0a5b0e6449 100644
--- a/packages/compiler/src/ml_parser/ast.ts
+++ b/packages/compiler/src/ml_parser/ast.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {AstPath} from '../ast_path';
 import {ParseSourceSpan} from '../parse_util';
 
 export interface Node {
@@ -80,3 +81,70 @@ export function visitAll(visitor: Visitor, nodes: Node[], context: any = null):
   });
   return result;
 }
+
+export class RecursiveVisitor implements Visitor {
+  constructor() {}
+
+  visitElement(ast: Element, context: any): any {
+    this.visitChildren(context, visit => {
+      visit(ast.attrs);
+      visit(ast.children);
+    });
+  }
+
+  visitAttribute(ast: Attribute, context: any): any {}
+  visitText(ast: Text, context: any): any {}
+  visitComment(ast: Comment, context: any): any {}
+
+  visitExpansion(ast: Expansion, context: any): any {
+    return this.visitChildren(context, visit => { visit(ast.cases); });
+  }
+
+  visitExpansionCase(ast: ExpansionCase, context: any): any {}
+
+  private visitChildren<T extends Node>(
+      context: any, cb: (visit: (<V extends Node>(children: V[]|undefined) => void)) => void) {
+    let results: any[][] = [];
+    let t = this;
+    function visit<T extends Node>(children: T[] | undefined) {
+      if (children) results.push(visitAll(t, children, context));
+    }
+    cb(visit);
+    return [].concat.apply([], results);
+  }
+}
+
+export type HtmlAstPath = AstPath<Node>;
+
+function spanOf(ast: Node) {
+  const start = ast.sourceSpan.start.offset;
+  let end = ast.sourceSpan.end.offset;
+  if (ast instanceof Element) {
+    if (ast.endSourceSpan) {
+      end = ast.endSourceSpan.end.offset;
+    } else if (ast.children && ast.children.length) {
+      end = spanOf(ast.children[ast.children.length - 1]).end;
+    }
+  }
+  return {start, end};
+}
+
+export function findNode(nodes: Node[], position: number): HtmlAstPath {
+  const path: Node[] = [];
+
+  const visitor = new class extends RecursiveVisitor {
+    visit(ast: Node, context: any): any {
+      const span = spanOf(ast);
+      if (span.start <= position && position < span.end) {
+        path.push(ast);
+      } else {
+        // Returning a value here will result in the children being skipped.
+        return true;
+      }
+    }
+  }
+
+  visitAll(visitor, nodes);
+
+  return new AstPath<Node>(path, position);
+}
\ No newline at end of file
diff --git a/packages/compiler/src/ml_parser/lexer.ts b/packages/compiler/src/ml_parser/lexer.ts
index 672eccce5d..28adb6e27f 100644
--- a/packages/compiler/src/ml_parser/lexer.ts
+++ b/packages/compiler/src/ml_parser/lexer.ts
@@ -150,7 +150,7 @@ class _Tokenizer {
   }
 
   /**
-   * @returns {boolean} whether an ICU token has been created
+   * @returns whether an ICU token has been created
    * @internal
    */
   private _tokenizeExpansionForm(): boolean {
@@ -684,7 +684,7 @@ function isExpansionFormStart(
 }
 
 function isExpansionCaseStart(peek: number): boolean {
-  return peek === chars.$EQ || chars.isAsciiLetter(peek);
+  return peek === chars.$EQ || chars.isAsciiLetter(peek) || chars.isDigit(peek);
 }
 
 function compareCharCodeCaseInsensitive(code1: number, code2: number): boolean {
diff --git a/packages/compiler/src/ml_parser/parser.ts b/packages/compiler/src/ml_parser/parser.ts
index 9451de9ff9..e617156536 100644
--- a/packages/compiler/src/ml_parser/parser.ts
+++ b/packages/compiler/src/ml_parser/parser.ts
@@ -11,7 +11,7 @@ import {ParseError, ParseSourceSpan} from '../parse_util';
 import * as html from './ast';
 import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from './interpolation_config';
 import * as lex from './lexer';
-import {TagDefinition, getNsPrefix, mergeNsAndName} from './tags';
+import {TagDefinition, getNsPrefix, isNgContainer, mergeNsAndName} from './tags';
 
 export class TreeError extends ParseError {
   static create(elementName: string|null, span: ParseSourceSpan, msg: string): TreeError {
@@ -352,11 +352,12 @@ class _TreeBuilder {
    *
    * `<ng-container>` elements are skipped as they are not rendered as DOM element.
    */
-  private _getParentElementSkippingContainers(): {parent: html.Element, container: html.Element} {
-    let container: html.Element = null !;
+  private _getParentElementSkippingContainers():
+      {parent: html.Element, container: html.Element|null} {
+    let container: html.Element|null = null;
 
     for (let i = this._elementStack.length - 1; i >= 0; i--) {
-      if (this._elementStack[i].name !== 'ng-container') {
+      if (!isNgContainer(this._elementStack[i].name)) {
         return {parent: this._elementStack[i], container};
       }
       container = this._elementStack[i];
@@ -382,7 +383,7 @@ class _TreeBuilder {
    * @internal
    */
   private _insertBeforeContainer(
-      parent: html.Element, container: html.Element, node: html.Element) {
+      parent: html.Element, container: html.Element|null, node: html.Element) {
     if (!container) {
       this._addToParent(node);
       this._elementStack.push(node);
diff --git a/packages/compiler/src/ml_parser/tags.ts b/packages/compiler/src/ml_parser/tags.ts
index bcdca5647f..0a882b6c51 100644
--- a/packages/compiler/src/ml_parser/tags.ts
+++ b/packages/compiler/src/ml_parser/tags.ts
@@ -12,7 +12,6 @@ export enum TagContentType {
   PARSABLE_DATA
 }
 
-// TODO(vicb): read-only when TS supports it
 export interface TagDefinition {
   closedByParent: boolean;
   requiredParents: {[key: string]: boolean};
@@ -42,6 +41,21 @@ export function splitNsName(elementName: string): [string | null, string] {
   return [elementName.slice(1, colonIndex), elementName.slice(colonIndex + 1)];
 }
 
+// `<ng-container>` tags work the same regardless the namespace
+export function isNgContainer(tagName: string): boolean {
+  return splitNsName(tagName)[1] === 'ng-container';
+}
+
+// `<ng-content>` tags work the same regardless the namespace
+export function isNgContent(tagName: string): boolean {
+  return splitNsName(tagName)[1] === 'ng-content';
+}
+
+// `<ng-template>` tags work the same regardless the namespace
+export function isNgTemplate(tagName: string): boolean {
+  return splitNsName(tagName)[1] === 'ng-template';
+}
+
 export function getNsPrefix(fullName: string): string
 export function getNsPrefix(fullName: null): null;
     export function getNsPrefix(fullName: string | null): string |
diff --git a/packages/compiler/src/ng_module_compiler.ts b/packages/compiler/src/ng_module_compiler.ts
index 0bb5e13e8c..9b576f1a25 100644
--- a/packages/compiler/src/ng_module_compiler.ts
+++ b/packages/compiler/src/ng_module_compiler.ts
@@ -6,254 +6,83 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵLifecycleHooks} from '@angular/core';
+import {ɵNodeFlags as NodeFlags} from '@angular/core';
 
-import {CompileDiDependencyMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompileProviderMetadata, CompileTokenMetadata, identifierModuleUrl, identifierName, tokenName, tokenReference} from './compile_metadata';
-import {Identifiers, createIdentifier, resolveIdentifier} from './identifiers';
+import {CompileNgModuleMetadata, CompileProviderMetadata, identifierName} from './compile_metadata';
+import {CompileReflector} from './compile_reflector';
+import {Identifiers} from './identifiers';
 import {CompilerInjectable} from './injectable';
-import {ClassBuilder, createClassStmt} from './output/class_builder';
 import * as o from './output/output_ast';
-import {convertValueToOutputAst} from './output/value_util';
-import {ParseLocation, ParseSourceFile, ParseSourceSpan, typeSourceSpan} from './parse_util';
+import {typeSourceSpan} from './parse_util';
 import {NgModuleProviderAnalyzer} from './provider_analyzer';
-import {ProviderAst} from './template_parser/template_ast';
-
-
-/**
- * This is currently not read, but will probably be used in the future.
- * We keep it as we already pass it through all the rigth places...
- */
-export class ComponentFactoryDependency {
-  constructor(public compType: any) {}
-}
+import {OutputContext} from './util';
+import {componentFactoryResolverProviderDef, depDef, providerDef} from './view_compiler/provider_compiler';
 
 export class NgModuleCompileResult {
-  constructor(
-      public statements: o.Statement[], public ngModuleFactoryVar: string,
-      public dependencies: ComponentFactoryDependency[]) {}
+  constructor(public ngModuleFactoryVar: string) {}
 }
 
+const LOG_VAR = o.variable('_l');
+
 @CompilerInjectable()
 export class NgModuleCompiler {
-  compile(ngModuleMeta: CompileNgModuleMetadata, extraProviders: CompileProviderMetadata[]):
-      NgModuleCompileResult {
+  constructor(private reflector: CompileReflector) {}
+  compile(
+      ctx: OutputContext, ngModuleMeta: CompileNgModuleMetadata,
+      extraProviders: CompileProviderMetadata[]): NgModuleCompileResult {
     const sourceSpan = typeSourceSpan('NgModule', ngModuleMeta.type);
-    const deps: ComponentFactoryDependency[] = [];
-    const bootstrapComponentFactories: CompileIdentifierMetadata[] = [];
-    const entryComponentFactories =
-        ngModuleMeta.transitiveModule.entryComponents.map((entryComponent) => {
-          if (ngModuleMeta.bootstrapComponents.some(
-                  (id) => id.reference === entryComponent.componentType)) {
-            bootstrapComponentFactories.push({reference: entryComponent.componentFactory});
-          }
-          deps.push(new ComponentFactoryDependency(entryComponent.componentType));
-          return {reference: entryComponent.componentFactory};
-        });
-    const builder = new _InjectorBuilder(
-        ngModuleMeta, entryComponentFactories, bootstrapComponentFactories, sourceSpan);
+    const entryComponentFactories = ngModuleMeta.transitiveModule.entryComponents;
+    const bootstrapComponents = ngModuleMeta.bootstrapComponents;
+    const providerParser =
+        new NgModuleProviderAnalyzer(this.reflector, ngModuleMeta, extraProviders, sourceSpan);
+    const providerDefs =
+        [componentFactoryResolverProviderDef(
+             this.reflector, ctx, NodeFlags.None, entryComponentFactories)]
+            .concat(providerParser.parse().map((provider) => providerDef(ctx, provider)))
+            .map(({providerExpr, depsExpr, flags, tokenExpr}) => {
+              return o.importExpr(Identifiers.moduleProviderDef).callFn([
+                o.literal(flags), tokenExpr, providerExpr, depsExpr
+              ]);
+            });
+
+    const ngModuleDef = o.importExpr(Identifiers.moduleDef).callFn([o.literalArr(providerDefs)]);
+    const ngModuleDefFactory = o.fn(
+        [new o.FnParam(LOG_VAR.name !)], [new o.ReturnStatement(ngModuleDef)], o.INFERRED_TYPE);
 
-    const providerParser = new NgModuleProviderAnalyzer(ngModuleMeta, extraProviders, sourceSpan);
-    providerParser.parse().forEach((provider) => builder.addProvider(provider));
-    const injectorClass = builder.build();
     const ngModuleFactoryVar = `${identifierName(ngModuleMeta.type)}NgFactory`;
-    const ngModuleFactoryStmt =
-        o.variable(ngModuleFactoryVar)
-            .set(o.importExpr(createIdentifier(Identifiers.NgModuleFactory))
-                     .instantiate(
-                         [o.variable(injectorClass.name), o.importExpr(ngModuleMeta.type)],
-                         o.importType(
-                             createIdentifier(Identifiers.NgModuleFactory),
-                             [o.importType(ngModuleMeta.type) !], [o.TypeModifier.Const])))
-            .toDeclStmt(null, [o.StmtModifier.Final]);
+    this._createNgModuleFactory(
+        ctx, ngModuleMeta.type.reference, o.importExpr(Identifiers.createModuleFactory).callFn([
+          ctx.importExpr(ngModuleMeta.type.reference),
+          o.literalArr(bootstrapComponents.map(id => ctx.importExpr(id.reference))),
+          ngModuleDefFactory
+        ]));
 
-    const stmts: o.Statement[] = [injectorClass, ngModuleFactoryStmt];
     if (ngModuleMeta.id) {
       const registerFactoryStmt =
-          o.importExpr(createIdentifier(Identifiers.RegisterModuleFactoryFn))
+          o.importExpr(Identifiers.RegisterModuleFactoryFn)
               .callFn([o.literal(ngModuleMeta.id), o.variable(ngModuleFactoryVar)])
               .toStmt();
-      stmts.push(registerFactoryStmt);
+      ctx.statements.push(registerFactoryStmt);
     }
 
-    return new NgModuleCompileResult(stmts, ngModuleFactoryVar, deps);
+    return new NgModuleCompileResult(ngModuleFactoryVar);
+  }
+
+  createStub(ctx: OutputContext, ngModuleReference: any) {
+    this._createNgModuleFactory(ctx, ngModuleReference, o.NULL_EXPR);
+  }
+
+  private _createNgModuleFactory(ctx: OutputContext, reference: any, value: o.Expression) {
+    const ngModuleFactoryVar = `${identifierName({reference: reference})}NgFactory`;
+    const ngModuleFactoryStmt =
+        o.variable(ngModuleFactoryVar)
+            .set(value)
+            .toDeclStmt(
+                o.importType(
+                    Identifiers.NgModuleFactory, [o.expressionType(ctx.importExpr(reference)) !],
+                    [o.TypeModifier.Const]),
+                [o.StmtModifier.Final, o.StmtModifier.Exported]);
+
+    ctx.statements.push(ngModuleFactoryStmt);
   }
 }
-
-class _InjectorBuilder implements ClassBuilder {
-  fields: o.ClassField[] = [];
-  getters: o.ClassGetter[] = [];
-  methods: o.ClassMethod[] = [];
-  ctorStmts: o.Statement[] = [];
-  private _lazyProps = new Map<string, o.Expression>();
-  private _tokens: CompileTokenMetadata[] = [];
-  private _instances = new Map<any, o.Expression>();
-  private _createStmts: o.Statement[] = [];
-  private _destroyStmts: o.Statement[] = [];
-
-  constructor(
-      private _ngModuleMeta: CompileNgModuleMetadata,
-      private _entryComponentFactories: CompileIdentifierMetadata[],
-      private _bootstrapComponentFactories: CompileIdentifierMetadata[],
-      private _sourceSpan: ParseSourceSpan) {}
-
-  addProvider(resolvedProvider: ProviderAst) {
-    const providerValueExpressions =
-        resolvedProvider.providers.map((provider) => this._getProviderValue(provider));
-    const propName = `_${tokenName(resolvedProvider.token)}_${this._instances.size}`;
-    const instance = this._createProviderProperty(
-        propName, resolvedProvider, providerValueExpressions, resolvedProvider.multiProvider,
-        resolvedProvider.eager);
-    if (resolvedProvider.lifecycleHooks.indexOf(ɵLifecycleHooks.OnDestroy) !== -1) {
-      let callNgOnDestroy: o.Expression = instance.callMethod('ngOnDestroy', []);
-      if (!resolvedProvider.eager) {
-        callNgOnDestroy = this._lazyProps.get(instance.name) !.and(callNgOnDestroy);
-      }
-      this._destroyStmts.push(callNgOnDestroy.toStmt());
-    }
-    this._tokens.push(resolvedProvider.token);
-    this._instances.set(tokenReference(resolvedProvider.token), instance);
-  }
-
-  build(): o.ClassStmt {
-    const getMethodStmts: o.Statement[] = this._tokens.map((token) => {
-      const providerExpr = this._instances.get(tokenReference(token)) !;
-      return new o.IfStmt(
-          InjectMethodVars.token.identical(createDiTokenExpression(token)),
-          [new o.ReturnStatement(providerExpr)]);
-    });
-    const methods = [
-      new o.ClassMethod(
-          'createInternal', [], this._createStmts.concat(new o.ReturnStatement(
-                                    this._instances.get(this._ngModuleMeta.type.reference) !)),
-          o.importType(this._ngModuleMeta.type)),
-      new o.ClassMethod(
-          'getInternal',
-          [
-            new o.FnParam(InjectMethodVars.token.name !, o.DYNAMIC_TYPE),
-            new o.FnParam(InjectMethodVars.notFoundResult.name !, o.DYNAMIC_TYPE)
-          ],
-          getMethodStmts.concat([new o.ReturnStatement(InjectMethodVars.notFoundResult)]),
-          o.DYNAMIC_TYPE),
-      new o.ClassMethod('destroyInternal', [], this._destroyStmts),
-    ];
-
-    const parentArgs = [
-      o.variable(InjectorProps.parent.name),
-      o.literalArr(
-          this._entryComponentFactories.map((componentFactory) => o.importExpr(componentFactory))),
-      o.literalArr(this._bootstrapComponentFactories.map(
-          (componentFactory) => o.importExpr(componentFactory)))
-    ];
-    const injClassName = `${identifierName(this._ngModuleMeta.type)}Injector`;
-    return createClassStmt({
-      name: injClassName,
-      ctorParams: [new o.FnParam(
-          InjectorProps.parent.name, o.importType(createIdentifier(Identifiers.Injector)))],
-      parent: o.importExpr(
-          createIdentifier(Identifiers.NgModuleInjector),
-          [o.importType(this._ngModuleMeta.type) !]),
-      parentArgs: parentArgs,
-      builders: [{methods}, this]
-    });
-  }
-
-  private _getProviderValue(provider: CompileProviderMetadata): o.Expression {
-    let result: o.Expression;
-    if (provider.useExisting != null) {
-      result = this._getDependency({token: provider.useExisting});
-    } else if (provider.useFactory != null) {
-      const deps = provider.deps || provider.useFactory.diDeps;
-      const depsExpr = deps.map((dep) => this._getDependency(dep));
-      result = o.importExpr(provider.useFactory).callFn(depsExpr);
-    } else if (provider.useClass != null) {
-      const deps = provider.deps || provider.useClass.diDeps;
-      const depsExpr = deps.map((dep) => this._getDependency(dep));
-      result =
-          o.importExpr(provider.useClass).instantiate(depsExpr, o.importType(provider.useClass));
-    } else {
-      result = convertValueToOutputAst(provider.useValue);
-    }
-    return result;
-  }
-
-
-  private _createProviderProperty(
-      propName: string, provider: ProviderAst, providerValueExpressions: o.Expression[],
-      isMulti: boolean, isEager: boolean): o.ReadPropExpr {
-    let resolvedProviderValueExpr: o.Expression;
-    let type: o.Type;
-    if (isMulti) {
-      resolvedProviderValueExpr = o.literalArr(providerValueExpressions);
-      type = new o.ArrayType(o.DYNAMIC_TYPE);
-    } else {
-      resolvedProviderValueExpr = providerValueExpressions[0];
-      type = providerValueExpressions[0].type !;
-    }
-    if (!type) {
-      type = o.DYNAMIC_TYPE;
-    }
-    if (isEager) {
-      this.fields.push(new o.ClassField(propName, type));
-      this._createStmts.push(o.THIS_EXPR.prop(propName).set(resolvedProviderValueExpr).toStmt());
-    } else {
-      const internalFieldProp = o.THIS_EXPR.prop(`_${propName}`);
-      this.fields.push(new o.ClassField(internalFieldProp.name, type));
-      // Note: Equals is important for JS so that it also checks the undefined case!
-      const getterStmts = [
-        new o.IfStmt(
-            internalFieldProp.isBlank(),
-            [internalFieldProp.set(resolvedProviderValueExpr).toStmt()]),
-        new o.ReturnStatement(internalFieldProp)
-      ];
-      this.getters.push(new o.ClassGetter(propName, getterStmts, type));
-      this._lazyProps.set(propName, internalFieldProp);
-    }
-    return o.THIS_EXPR.prop(propName);
-  }
-
-  private _getDependency(dep: CompileDiDependencyMetadata): o.Expression {
-    let result: o.Expression = null !;
-    if (dep.isValue) {
-      result = o.literal(dep.value);
-    }
-    if (!dep.isSkipSelf) {
-      if (dep.token) {
-        if (tokenReference(dep.token) === resolveIdentifier(Identifiers.Injector)) {
-          result = o.THIS_EXPR;
-        } else if (
-            tokenReference(dep.token) === resolveIdentifier(Identifiers.ComponentFactoryResolver)) {
-          result = o.THIS_EXPR.prop('componentFactoryResolver');
-        }
-      }
-
-      if (!result) {
-        result = this._instances.get(tokenReference(dep.token !)) !;
-      }
-    }
-    if (!result) {
-      const args = [createDiTokenExpression(dep.token !)];
-      if (dep.isOptional) {
-        args.push(o.NULL_EXPR);
-      }
-      result = InjectorProps.parent.callMethod('get', args);
-    }
-    return result;
-  }
-}
-
-function createDiTokenExpression(token: CompileTokenMetadata): o.Expression {
-  if (token.value != null) {
-    return o.literal(token.value);
-  } else {
-    return o.importExpr(token.identifier !);
-  }
-}
-
-class InjectorProps {
-  static parent = o.THIS_EXPR.prop('parent');
-}
-
-class InjectMethodVars {
-  static token = o.variable('token');
-  static notFoundResult = o.variable('notFoundResult');
-}
diff --git a/packages/compiler/src/ng_module_resolver.ts b/packages/compiler/src/ng_module_resolver.ts
index 5c820f606d..59472eeaf7 100644
--- a/packages/compiler/src/ng_module_resolver.ts
+++ b/packages/compiler/src/ng_module_resolver.ts
@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgModule, Type, ɵReflectorReader, ɵreflector, ɵstringify as stringify} from '@angular/core';
+import {NgModule, Type, ɵstringify as stringify} from '@angular/core';
+
+import {CompileReflector} from './compile_reflector';
 import {findLast} from './directive_resolver';
 import {CompilerInjectable} from './injectable';
 
@@ -19,7 +21,7 @@ function _isNgModuleMetadata(obj: any): obj is NgModule {
  */
 @CompilerInjectable()
 export class NgModuleResolver {
-  constructor(private _reflector: ɵReflectorReader = ɵreflector) {}
+  constructor(private _reflector: CompileReflector) {}
 
   isNgModule(type: any) { return this._reflector.annotations(type).some(_isNgModuleMetadata); }
 
diff --git a/packages/compiler/src/output/abstract_emitter.ts b/packages/compiler/src/output/abstract_emitter.ts
index 0a0d0784b7..213c69324b 100644
--- a/packages/compiler/src/output/abstract_emitter.ts
+++ b/packages/compiler/src/output/abstract_emitter.ts
@@ -19,41 +19,42 @@ export const CATCH_STACK_VAR = o.variable('stack', null, null);
 
 export abstract class OutputEmitter {
   abstract emitStatements(
-      srcFilePath: string, genFilePath: string, stmts: o.Statement[], exportedVars: string[],
+      srcFilePath: string, genFilePath: string, stmts: o.Statement[],
       preamble?: string|null): string;
 }
 
 class _EmittedLine {
+  partsLength = 0;
   parts: string[] = [];
   srcSpans: (ParseSourceSpan|null)[] = [];
   constructor(public indent: number) {}
 }
 
 export class EmitterVisitorContext {
-  static createRoot(exportedVars: string[]): EmitterVisitorContext {
-    return new EmitterVisitorContext(exportedVars, 0);
-  }
+  static createRoot(): EmitterVisitorContext { return new EmitterVisitorContext(0); }
 
   private _lines: _EmittedLine[];
   private _classes: o.ClassStmt[] = [];
+  private _preambleLineCount = 0;
 
-  constructor(private _exportedVars: string[], private _indent: number) {
-    this._lines = [new _EmittedLine(_indent)];
-  }
+  constructor(private _indent: number) { this._lines = [new _EmittedLine(_indent)]; }
 
   private get _currentLine(): _EmittedLine { return this._lines[this._lines.length - 1]; }
 
-  isExportedVar(varName: string): boolean { return this._exportedVars.indexOf(varName) !== -1; }
-
   println(from?: {sourceSpan: ParseSourceSpan | null}|null, lastPart: string = ''): void {
     this.print(from || null, lastPart, true);
   }
 
   lineIsEmpty(): boolean { return this._currentLine.parts.length === 0; }
 
+  lineLength(): number {
+    return this._currentLine.indent * _INDENT_WITH.length + this._currentLine.partsLength;
+  }
+
   print(from: {sourceSpan: ParseSourceSpan | null}|null, part: string, newLine: boolean = false) {
     if (part.length > 0) {
       this._currentLine.parts.push(part);
+      this._currentLine.partsLength += part.length;
       this._currentLine.srcSpans.push(from && from.sourceSpan || null);
     }
     if (newLine) {
@@ -69,12 +70,16 @@ export class EmitterVisitorContext {
 
   incIndent() {
     this._indent++;
-    this._currentLine.indent = this._indent;
+    if (this.lineIsEmpty()) {
+      this._currentLine.indent = this._indent;
+    }
   }
 
   decIndent() {
     this._indent--;
-    this._currentLine.indent = this._indent;
+    if (this.lineIsEmpty()) {
+      this._currentLine.indent = this._indent;
+    }
   }
 
   pushClass(clazz: o.ClassStmt) { this._classes.push(clazz); }
@@ -151,6 +156,23 @@ export class EmitterVisitorContext {
     return map;
   }
 
+  setPreambleLineCount(count: number) { return this._preambleLineCount = count; }
+
+  spanOf(line: number, column: number): ParseSourceSpan|null {
+    const emittedLine = this._lines[line - this._preambleLineCount];
+    if (emittedLine) {
+      let columnsLeft = column - emittedLine.indent;
+      for (let partIndex = 0; partIndex < emittedLine.parts.length; partIndex++) {
+        const part = emittedLine.parts[partIndex];
+        if (part.length > columnsLeft) {
+          return emittedLine.srcSpans[partIndex];
+        }
+        columnsLeft -= part.length;
+      }
+    }
+    return null;
+  }
+
   private get sourceLines(): _EmittedLine[] {
     if (this._lines.length && this._lines[this._lines.length - 1].parts.length === 0) {
       return this._lines.slice(0, -1);
@@ -344,6 +366,10 @@ export abstract class AbstractEmitterVisitor implements o.StatementVisitor, o.Ex
     ast.condition.visitExpression(this, ctx);
     return null;
   }
+  visitAssertNotNullExpr(ast: o.AssertNotNull, ctx: EmitterVisitorContext): any {
+    ast.condition.visitExpression(this, ctx);
+    return null;
+  }
   abstract visitFunctionExpr(ast: o.FunctionExpr, ctx: EmitterVisitorContext): any;
   abstract visitDeclareFunctionStmt(stmt: o.DeclareFunctionStmt, context: any): any;
 
@@ -420,24 +446,18 @@ export abstract class AbstractEmitterVisitor implements o.StatementVisitor, o.Ex
     return null;
   }
   visitLiteralArrayExpr(ast: o.LiteralArrayExpr, ctx: EmitterVisitorContext): any {
-    const useNewLine = ast.entries.length > 1;
-    ctx.print(ast, `[`, useNewLine);
-    ctx.incIndent();
-    this.visitAllExpressions(ast.entries, ctx, ',', useNewLine);
-    ctx.decIndent();
-    ctx.print(ast, `]`, useNewLine);
+    ctx.print(ast, `[`);
+    this.visitAllExpressions(ast.entries, ctx, ',');
+    ctx.print(ast, `]`);
     return null;
   }
   visitLiteralMapExpr(ast: o.LiteralMapExpr, ctx: EmitterVisitorContext): any {
-    const useNewLine = ast.entries.length > 1;
-    ctx.print(ast, `{`, useNewLine);
-    ctx.incIndent();
+    ctx.print(ast, `{`);
     this.visitAllObjects(entry => {
-      ctx.print(ast, `${escapeIdentifier(entry.key, this._escapeDollarInStrings, entry.quoted)}: `);
+      ctx.print(ast, `${escapeIdentifier(entry.key, this._escapeDollarInStrings, entry.quoted)}:`);
       entry.value.visitExpression(this, ctx);
-    }, ast.entries, ctx, ',', useNewLine);
-    ctx.decIndent();
-    ctx.print(ast, `}`, useNewLine);
+    }, ast.entries, ctx, ',');
+    ctx.print(ast, `}`);
     return null;
   }
   visitCommaExpr(ast: o.CommaExpr, ctx: EmitterVisitorContext): any {
@@ -446,24 +466,35 @@ export abstract class AbstractEmitterVisitor implements o.StatementVisitor, o.Ex
     ctx.print(ast, ')');
     return null;
   }
-  visitAllExpressions(
-      expressions: o.Expression[], ctx: EmitterVisitorContext, separator: string,
-      newLine: boolean = false): void {
-    this.visitAllObjects(
-        expr => expr.visitExpression(this, ctx), expressions, ctx, separator, newLine);
+  visitAllExpressions(expressions: o.Expression[], ctx: EmitterVisitorContext, separator: string):
+      void {
+    this.visitAllObjects(expr => expr.visitExpression(this, ctx), expressions, ctx, separator);
   }
 
   visitAllObjects<T>(
-      handler: (t: T) => void, expressions: T[], ctx: EmitterVisitorContext, separator: string,
-      newLine: boolean = false): void {
+      handler: (t: T) => void, expressions: T[], ctx: EmitterVisitorContext,
+      separator: string): void {
+    let incrementedIndent = false;
     for (let i = 0; i < expressions.length; i++) {
       if (i > 0) {
-        ctx.print(null, separator, newLine);
+        if (ctx.lineLength() > 80) {
+          ctx.print(null, separator, true);
+          if (!incrementedIndent) {
+            // continuation are marked with double indent.
+            ctx.incIndent();
+            ctx.incIndent();
+            incrementedIndent = true;
+          }
+        } else {
+          ctx.print(null, separator, false);
+        }
       }
       handler(expressions[i]);
     }
-    if (newLine) {
-      ctx.println();
+    if (incrementedIndent) {
+      // continuation are marked with double indent.
+      ctx.decIndent();
+      ctx.decIndent();
     }
   }
 
diff --git a/packages/compiler/src/output/class_builder.ts b/packages/compiler/src/output/class_builder.ts
deleted file mode 100644
index 372be1fa71..0000000000
--- a/packages/compiler/src/output/class_builder.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {ParseSourceSpan} from '../parse_util';
-
-import * as o from './output_ast';
-
-
-/**
- * Create a new class stmts based on the given data.
- */
-export function createClassStmt(config: {
-  name: string,
-  parent?: o.Expression,
-  parentArgs?: o.Expression[],
-  ctorParams?: o.FnParam[],
-  builders: ClassBuilderPart | ClassBuilderPart[],
-  modifiers?: o.StmtModifier[],
-  sourceSpan?: ParseSourceSpan
-}): o.ClassStmt {
-  const parentArgs = config.parentArgs || [];
-  const superCtorStmts = config.parent ? [o.SUPER_EXPR.callFn(parentArgs).toStmt()] : [];
-  const builder =
-      concatClassBuilderParts(Array.isArray(config.builders) ? config.builders : [config.builders]);
-  const ctor =
-      new o.ClassMethod(null, config.ctorParams || [], superCtorStmts.concat(builder.ctorStmts));
-
-  return new o.ClassStmt(
-      config.name, config.parent || null, builder.fields, builder.getters, ctor, builder.methods,
-      config.modifiers || [], config.sourceSpan);
-}
-
-function concatClassBuilderParts(builders: ClassBuilderPart[]) {
-  return {
-    fields: [].concat(...(builders.map((builder => builder.fields || [])) as any)),
-    methods: [].concat(...(builders.map(builder => builder.methods || []) as any)),
-    getters: [].concat(...(builders.map(builder => builder.getters || []) as any)),
-    ctorStmts: [].concat(...(builders.map(builder => builder.ctorStmts || []) as any)),
-  };
-}
-
-/**
- * Collects data for a generated class.
- */
-export interface ClassBuilderPart {
-  fields?: o.ClassField[];
-  methods?: o.ClassMethod[];
-  getters?: o.ClassGetter[];
-  ctorStmts?: o.Statement[];
-}
-
-/**
- * Collects data for a generated class.
- */
-export interface ClassBuilder {
-  fields: o.ClassField[];
-  methods: o.ClassMethod[];
-  getters: o.ClassGetter[];
-  ctorStmts: o.Statement[];
-}
diff --git a/packages/compiler/src/output/js_emitter.ts b/packages/compiler/src/output/js_emitter.ts
index 5f478a83a8..5a022b74ae 100644
--- a/packages/compiler/src/output/js_emitter.ts
+++ b/packages/compiler/src/output/js_emitter.ts
@@ -13,24 +13,21 @@ import {CompileIdentifierMetadata} from '../compile_metadata';
 import {EmitterVisitorContext, OutputEmitter} from './abstract_emitter';
 import {AbstractJsEmitterVisitor} from './abstract_js_emitter';
 import * as o from './output_ast';
-import {ImportResolver} from './path_util';
 
 export class JavaScriptEmitter implements OutputEmitter {
-  constructor(private _importResolver: ImportResolver) {}
-
   emitStatements(
-      srcFilePath: string, genFilePath: string, stmts: o.Statement[], exportedVars: string[],
+      srcFilePath: string, genFilePath: string, stmts: o.Statement[],
       preamble: string = ''): string {
-    const converter = new JsEmitterVisitor(genFilePath, this._importResolver);
-    const ctx = EmitterVisitorContext.createRoot(exportedVars);
+    const converter = new JsEmitterVisitor();
+    const ctx = EmitterVisitorContext.createRoot();
     converter.visitAllStatements(stmts, ctx);
 
     const preambleLines = preamble ? preamble.split('\n') : [];
-    converter.importsWithPrefixes.forEach((prefix, importedFilePath) => {
+    converter.importsWithPrefixes.forEach((prefix, importedModuleName) => {
       // Note: can't write the real word for import as it screws up system.js auto detection...
       preambleLines.push(
           `var ${prefix} = req` +
-          `uire('${this._importResolver.fileNameToModuleName(importedFilePath, genFilePath)}');`);
+          `uire('${importedModuleName}');`);
     });
 
     const sm =
@@ -47,46 +44,36 @@ export class JavaScriptEmitter implements OutputEmitter {
 class JsEmitterVisitor extends AbstractJsEmitterVisitor {
   importsWithPrefixes = new Map<string, string>();
 
-  constructor(private _genFilePath: string, private _importResolver: ImportResolver) { super(); }
-
-  private _resolveStaticSymbol(value: CompileIdentifierMetadata): StaticSymbol {
-    const reference = value.reference;
-    if (!(reference instanceof StaticSymbol)) {
-      throw new Error(`Internal error: unknown identifier ${JSON.stringify(value)}`);
-    }
-    return this._importResolver.getImportAs(reference) || reference;
-  }
-
   visitExternalExpr(ast: o.ExternalExpr, ctx: EmitterVisitorContext): any {
-    const {name, filePath} = this._resolveStaticSymbol(ast.value);
-    if (filePath != this._genFilePath) {
-      let prefix = this.importsWithPrefixes.get(filePath);
+    const {name, moduleName} = ast.value;
+    if (moduleName) {
+      let prefix = this.importsWithPrefixes.get(moduleName);
       if (prefix == null) {
-        prefix = `import${this.importsWithPrefixes.size}`;
-        this.importsWithPrefixes.set(filePath, prefix);
+        prefix = `i${this.importsWithPrefixes.size}`;
+        this.importsWithPrefixes.set(moduleName, prefix);
       }
       ctx.print(ast, `${prefix}.`);
     }
-    ctx.print(ast, name);
+    ctx.print(ast, name !);
     return null;
   }
   visitDeclareVarStmt(stmt: o.DeclareVarStmt, ctx: EmitterVisitorContext): any {
     super.visitDeclareVarStmt(stmt, ctx);
-    if (ctx.isExportedVar(stmt.name)) {
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
       ctx.println(stmt, exportVar(stmt.name));
     }
     return null;
   }
   visitDeclareFunctionStmt(stmt: o.DeclareFunctionStmt, ctx: EmitterVisitorContext): any {
     super.visitDeclareFunctionStmt(stmt, ctx);
-    if (ctx.isExportedVar(stmt.name)) {
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
       ctx.println(stmt, exportVar(stmt.name));
     }
     return null;
   }
   visitDeclareClassStmt(stmt: o.ClassStmt, ctx: EmitterVisitorContext): any {
     super.visitDeclareClassStmt(stmt, ctx);
-    if (ctx.isExportedVar(stmt.name)) {
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
       ctx.println(stmt, exportVar(stmt.name));
     }
     return null;
diff --git a/packages/compiler/src/output/output_ast.ts b/packages/compiler/src/output/output_ast.ts
index 84f0aedd6f..8cd09a93e1 100644
--- a/packages/compiler/src/output/output_ast.ts
+++ b/packages/compiler/src/output/output_ast.ts
@@ -7,7 +7,6 @@
  */
 
 
-import {CompileIdentifierMetadata} from '../compile_metadata';
 import {ParseSourceSpan} from '../parse_util';
 
 //// Types
@@ -344,8 +343,8 @@ export class LiteralExpr extends Expression {
 
 export class ExternalExpr extends Expression {
   constructor(
-      public value: CompileIdentifierMetadata, type?: Type|null,
-      public typeParams: Type[]|null = null, sourceSpan?: ParseSourceSpan|null) {
+      public value: ExternalReference, type?: Type|null, public typeParams: Type[]|null = null,
+      sourceSpan?: ParseSourceSpan|null) {
     super(type, sourceSpan);
   }
   visitExpression(visitor: ExpressionVisitor, context: any): any {
@@ -353,6 +352,9 @@ export class ExternalExpr extends Expression {
   }
 }
 
+export class ExternalReference {
+  constructor(public moduleName: string|null, public name: string|null, public runtime: any|null) {}
+}
 
 export class ConditionalExpr extends Expression {
   public trueCase: Expression;
@@ -377,6 +379,15 @@ export class NotExpr extends Expression {
   }
 }
 
+export class AssertNotNull extends Expression {
+  constructor(public condition: Expression, sourceSpan?: ParseSourceSpan|null) {
+    super(condition.type, sourceSpan);
+  }
+  visitExpression(visitor: ExpressionVisitor, context: any): any {
+    return visitor.visitAssertNotNullExpr(this, context);
+  }
+}
+
 export class CastExpr extends Expression {
   constructor(public value: Expression, type?: Type|null, sourceSpan?: ParseSourceSpan|null) {
     super(type, sourceSpan);
@@ -465,7 +476,7 @@ export class LiteralArrayExpr extends Expression {
 }
 
 export class LiteralMapEntry {
-  constructor(public key: string, public value: Expression, public quoted: boolean = false) {}
+  constructor(public key: string, public value: Expression, public quoted: boolean) {}
 }
 
 export class LiteralMapExpr extends Expression {
@@ -503,6 +514,7 @@ export interface ExpressionVisitor {
   visitExternalExpr(ast: ExternalExpr, context: any): any;
   visitConditionalExpr(ast: ConditionalExpr, context: any): any;
   visitNotExpr(ast: NotExpr, context: any): any;
+  visitAssertNotNullExpr(ast: AssertNotNull, context: any): any;
   visitCastExpr(ast: CastExpr, context: any): any;
   visitFunctionExpr(ast: FunctionExpr, context: any): any;
   visitBinaryOperatorExpr(ast: BinaryOperatorExpr, context: any): any;
@@ -523,7 +535,8 @@ export const TYPED_NULL_EXPR = new LiteralExpr(null, INFERRED_TYPE, null);
 //// Statements
 export enum StmtModifier {
   Final,
-  Private
+  Private,
+  Exported
 }
 
 export abstract class Statement {
@@ -768,6 +781,11 @@ export class AstTransformer implements StatementVisitor, ExpressionVisitor {
         new NotExpr(ast.condition.visitExpression(this, context), ast.sourceSpan), context);
   }
 
+  visitAssertNotNullExpr(ast: AssertNotNull, context: any): any {
+    return this.transformExpr(
+        new AssertNotNull(ast.condition.visitExpression(this, context), ast.sourceSpan), context);
+  }
+
   visitCastExpr(ast: CastExpr, context: any): any {
     return this.transformExpr(
         new CastExpr(ast.value.visitExpression(this, context), ast.type, ast.sourceSpan), context);
@@ -813,7 +831,7 @@ export class AstTransformer implements StatementVisitor, ExpressionVisitor {
   visitLiteralMapExpr(ast: LiteralMapExpr, context: any): any {
     const entries = ast.entries.map(
         (entry): LiteralMapEntry => new LiteralMapEntry(
-            entry.key, entry.value.visitExpression(this, context), entry.quoted, ));
+            entry.key, entry.value.visitExpression(this, context), entry.quoted));
     const mapType = new MapType(ast.valueType, null);
     return this.transformExpr(new LiteralMapExpr(entries, mapType, ast.sourceSpan), context);
   }
@@ -948,6 +966,10 @@ export class RecursiveAstVisitor implements StatementVisitor, ExpressionVisitor
     ast.condition.visitExpression(this, context);
     return ast;
   }
+  visitAssertNotNullExpr(ast: AssertNotNull, context: any): any {
+    ast.condition.visitExpression(this, context);
+    return ast;
+  }
   visitCastExpr(ast: CastExpr, context: any): any {
     ast.value.visitExpression(this, context);
     return ast;
@@ -1106,13 +1128,13 @@ export function variable(
 }
 
 export function importExpr(
-    id: CompileIdentifierMetadata, typeParams: Type[] | null = null,
+    id: ExternalReference, typeParams: Type[] | null = null,
     sourceSpan?: ParseSourceSpan | null): ExternalExpr {
   return new ExternalExpr(id, null, typeParams, sourceSpan);
 }
 
 export function importType(
-    id: CompileIdentifierMetadata, typeParams: Type[] | null = null,
+    id: ExternalReference, typeParams: Type[] | null = null,
     typeModifiers: TypeModifier[] | null = null): ExpressionType|null {
   return id != null ? expressionType(importExpr(id, typeParams, null), typeModifiers) : null;
 }
@@ -1129,16 +1151,21 @@ export function literalArr(
 }
 
 export function literalMap(
-    values: [string, Expression][], type: MapType | null = null,
-    quoted: boolean = false): LiteralMapExpr {
+    values: {key: string, quoted: boolean, value: Expression}[],
+    type: MapType | null = null): LiteralMapExpr {
   return new LiteralMapExpr(
-      values.map(entry => new LiteralMapEntry(entry[0], entry[1], quoted)), type, null);
+      values.map(e => new LiteralMapEntry(e.key, e.value, e.quoted)), type, null);
 }
 
 export function not(expr: Expression, sourceSpan?: ParseSourceSpan | null): NotExpr {
   return new NotExpr(expr, sourceSpan);
 }
 
+export function assertNotNull(
+    expr: Expression, sourceSpan?: ParseSourceSpan | null): AssertNotNull {
+  return new AssertNotNull(expr, sourceSpan);
+}
+
 export function fn(
     params: FnParam[], body: Statement[], type?: Type | null,
     sourceSpan?: ParseSourceSpan | null): FunctionExpr {
diff --git a/packages/compiler/src/output/output_interpreter.ts b/packages/compiler/src/output/output_interpreter.ts
index 17b0b90d3d..4339c78062 100644
--- a/packages/compiler/src/output/output_interpreter.ts
+++ b/packages/compiler/src/output/output_interpreter.ts
@@ -11,13 +11,13 @@
 import * as o from './output_ast';
 import {debugOutputAstAsTypeScript} from './ts_emitter';
 
-export function interpretStatements(statements: o.Statement[], resultVars: string[]): any[] {
-  const stmtsWithReturn = statements.concat(
-      [new o.ReturnStatement(o.literalArr(resultVars.map(resultVar => o.variable(resultVar))))]);
+export function interpretStatements(statements: o.Statement[]): {[key: string]: any} {
   const ctx = new _ExecutionContext(null, null, null, new Map<string, any>());
   const visitor = new StatementInterpreter();
-  const result = visitor.visitAllStatements(stmtsWithReturn, ctx);
-  return result != null ? result.value : null;
+  visitor.visitAllStatements(statements, ctx);
+  const result: {[key: string]: any} = {};
+  ctx.exports.forEach((exportName) => { result[exportName] = ctx.vars.get(exportName); });
+  return result;
 }
 
 function _executeFunctionStatements(
@@ -32,6 +32,8 @@ function _executeFunctionStatements(
 }
 
 class _ExecutionContext {
+  exports: string[] = [];
+
   constructor(
       public parent: _ExecutionContext|null, public instance: any, public className: string|null,
       public vars: Map<string, any>) {}
@@ -90,6 +92,9 @@ class StatementInterpreter implements o.StatementVisitor, o.ExpressionVisitor {
 
   visitDeclareVarStmt(stmt: o.DeclareVarStmt, ctx: _ExecutionContext): any {
     ctx.vars.set(stmt.name, stmt.value.visitExpression(this, ctx));
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
+      ctx.exports.push(stmt.name);
+    }
     return null;
   }
   visitWriteVarExpr(expr: o.WriteVarExpr, ctx: _ExecutionContext): any {
@@ -185,6 +190,9 @@ class StatementInterpreter implements o.StatementVisitor, o.ExpressionVisitor {
   visitDeclareClassStmt(stmt: o.ClassStmt, ctx: _ExecutionContext): any {
     const clazz = createDynamicClass(stmt, ctx, this);
     ctx.vars.set(stmt.name, clazz);
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
+      ctx.exports.push(stmt.name);
+    }
     return null;
   }
   visitExpressionStmt(stmt: o.ExpressionStatement, ctx: _ExecutionContext): any {
@@ -219,9 +227,7 @@ class StatementInterpreter implements o.StatementVisitor, o.ExpressionVisitor {
     return new clazz(...args);
   }
   visitLiteralExpr(ast: o.LiteralExpr, ctx: _ExecutionContext): any { return ast.value; }
-  visitExternalExpr(ast: o.ExternalExpr, ctx: _ExecutionContext): any {
-    return ast.value.reference;
-  }
+  visitExternalExpr(ast: o.ExternalExpr, ctx: _ExecutionContext): any { return ast.value.runtime; }
   visitConditionalExpr(ast: o.ConditionalExpr, ctx: _ExecutionContext): any {
     if (ast.condition.visitExpression(this, ctx)) {
       return ast.trueCase.visitExpression(this, ctx);
@@ -233,6 +239,9 @@ class StatementInterpreter implements o.StatementVisitor, o.ExpressionVisitor {
   visitNotExpr(ast: o.NotExpr, ctx: _ExecutionContext): any {
     return !ast.condition.visitExpression(this, ctx);
   }
+  visitAssertNotNullExpr(ast: o.AssertNotNull, ctx: _ExecutionContext): any {
+    return ast.condition.visitExpression(this, ctx);
+  }
   visitCastExpr(ast: o.CastExpr, ctx: _ExecutionContext): any {
     return ast.value.visitExpression(this, ctx);
   }
@@ -243,6 +252,9 @@ class StatementInterpreter implements o.StatementVisitor, o.ExpressionVisitor {
   visitDeclareFunctionStmt(stmt: o.DeclareFunctionStmt, ctx: _ExecutionContext): any {
     const paramNames = stmt.params.map((param) => param.name);
     ctx.vars.set(stmt.name, _declareFn(paramNames, stmt.statements, ctx, this));
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
+      ctx.exports.push(stmt.name);
+    }
     return null;
   }
   visitBinaryOperatorExpr(ast: o.BinaryOperatorExpr, ctx: _ExecutionContext): any {
@@ -299,9 +311,8 @@ class StatementInterpreter implements o.StatementVisitor, o.ExpressionVisitor {
     return this.visitAllExpressions(ast.entries, ctx);
   }
   visitLiteralMapExpr(ast: o.LiteralMapExpr, ctx: _ExecutionContext): any {
-    const result = {};
-    ast.entries.forEach(
-        (entry) => (result as any)[entry.key] = entry.value.visitExpression(this, ctx));
+    const result: {[k: string]: any} = {};
+    ast.entries.forEach(entry => result[entry.key] = entry.value.visitExpression(this, ctx));
     return result;
   }
   visitCommaExpr(ast: o.CommaExpr, context: any): any {
diff --git a/packages/compiler/src/output/output_jit.ts b/packages/compiler/src/output/output_jit.ts
index 660c5ffc7f..0135be2096 100644
--- a/packages/compiler/src/output/output_jit.ts
+++ b/packages/compiler/src/output/output_jit.ts
@@ -35,19 +35,24 @@ function evalExpression(
   return new Function(...fnArgNames.concat(fnBody))(...fnArgValues);
 }
 
-export function jitStatements(
-    sourceUrl: string, statements: o.Statement[], resultVars: string[]): any[] {
+export function jitStatements(sourceUrl: string, statements: o.Statement[]): {[key: string]: any} {
   const converter = new JitEmitterVisitor();
-  const ctx = EmitterVisitorContext.createRoot(resultVars);
-  const returnStmt =
-      new o.ReturnStatement(o.literalArr(resultVars.map(resultVar => o.variable(resultVar))));
-  converter.visitAllStatements(statements.concat([returnStmt]), ctx);
+  const ctx = EmitterVisitorContext.createRoot();
+  converter.visitAllStatements(statements, ctx);
+  converter.createReturnStmt(ctx);
   return evalExpression(sourceUrl, ctx, converter.getArgs());
 }
 
-class JitEmitterVisitor extends AbstractJsEmitterVisitor {
+export class JitEmitterVisitor extends AbstractJsEmitterVisitor {
   private _evalArgNames: string[] = [];
   private _evalArgValues: any[] = [];
+  private _evalExportedVars: string[] = [];
+
+  createReturnStmt(ctx: EmitterVisitorContext) {
+    const stmt = new o.ReturnStatement(new o.LiteralMapExpr(this._evalExportedVars.map(
+        resultVar => new o.LiteralMapEntry(resultVar, o.variable(resultVar), false))));
+    stmt.visitStatement(this, ctx);
+  }
 
   getArgs(): {[key: string]: any} {
     const result: {[key: string]: any} = {};
@@ -58,15 +63,36 @@ class JitEmitterVisitor extends AbstractJsEmitterVisitor {
   }
 
   visitExternalExpr(ast: o.ExternalExpr, ctx: EmitterVisitorContext): any {
-    const value = ast.value.reference;
+    const value = ast.value.runtime;
     let id = this._evalArgValues.indexOf(value);
     if (id === -1) {
       id = this._evalArgValues.length;
       this._evalArgValues.push(value);
-      const name = identifierName(ast.value) || 'val';
-      this._evalArgNames.push(`jit_${name}${id}`);
+      const name = identifierName({reference: ast.value.runtime}) || 'val';
+      this._evalArgNames.push(`jit_${name}_${id}`);
     }
     ctx.print(ast, this._evalArgNames[id]);
     return null;
   }
+
+  visitDeclareVarStmt(stmt: o.DeclareVarStmt, ctx: EmitterVisitorContext): any {
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
+      this._evalExportedVars.push(stmt.name);
+    }
+    return super.visitDeclareVarStmt(stmt, ctx);
+  }
+
+  visitDeclareFunctionStmt(stmt: o.DeclareFunctionStmt, ctx: EmitterVisitorContext): any {
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
+      this._evalExportedVars.push(stmt.name);
+    }
+    return super.visitDeclareFunctionStmt(stmt, ctx);
+  }
+
+  visitDeclareClassStmt(stmt: o.ClassStmt, ctx: EmitterVisitorContext): any {
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
+      this._evalExportedVars.push(stmt.name);
+    }
+    return super.visitDeclareClassStmt(stmt, ctx);
+  }
 }
diff --git a/packages/compiler/src/output/path_util.ts b/packages/compiler/src/output/path_util.ts
deleted file mode 100644
index 2c626b6e52..0000000000
--- a/packages/compiler/src/output/path_util.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {StaticSymbol} from '../aot/static_symbol';
-
-/**
- * Interface that defines how import statements should be generated.
- */
-export abstract class ImportResolver {
-  /**
-   * Converts a file path to a module name that can be used as an `import.
-   * I.e. `path/to/importedFile.ts` should be imported by `path/to/containingFile.ts`.
-   */
-  abstract fileNameToModuleName(importedFilePath: string, containingFilePath: string): string|null;
-
-  /**
-   * Converts the given StaticSymbol into another StaticSymbol that should be used
-   * to generate the import from.
-   */
-  abstract getImportAs(symbol: StaticSymbol): StaticSymbol|null;
-
-  /**
-   * Determine the arity of a type.
-   */
-  abstract getTypeArity(symbol: StaticSymbol): number|null;
-}
diff --git a/packages/compiler/src/output/ts_emitter.ts b/packages/compiler/src/output/ts_emitter.ts
index a813aab8fe..74f2b8410f 100644
--- a/packages/compiler/src/output/ts_emitter.ts
+++ b/packages/compiler/src/output/ts_emitter.ts
@@ -12,18 +12,13 @@ import {CompileIdentifierMetadata} from '../compile_metadata';
 
 import {AbstractEmitterVisitor, CATCH_ERROR_VAR, CATCH_STACK_VAR, EmitterVisitorContext, OutputEmitter} from './abstract_emitter';
 import * as o from './output_ast';
-import {ImportResolver} from './path_util';
 
 const _debugFilePath = '/debug/lib';
 
 export function debugOutputAstAsTypeScript(ast: o.Statement | o.Expression | o.Type | any[]):
     string {
-  const converter = new _TsEmitterVisitor(_debugFilePath, {
-    fileNameToModuleName(filePath: string, containingFilePath: string) { return filePath; },
-    getImportAs(symbol: StaticSymbol | null) { return null; },
-    getTypeArity: symbol => null
-  });
-  const ctx = EmitterVisitorContext.createRoot([]);
+  const converter = new _TsEmitterVisitor();
+  const ctx = EmitterVisitorContext.createRoot();
   const asts: any[] = Array.isArray(ast) ? ast : [ast];
 
   asts.forEach((ast) => {
@@ -42,49 +37,51 @@ export function debugOutputAstAsTypeScript(ast: o.Statement | o.Expression | o.T
 
 
 export class TypeScriptEmitter implements OutputEmitter {
-  constructor(private _importResolver: ImportResolver) {}
+  emitStatementsAndContext(
+      srcFilePath: string, genFilePath: string, stmts: o.Statement[], preamble: string = '',
+      emitSourceMaps: boolean = true): {sourceText: string, context: EmitterVisitorContext} {
+    const converter = new _TsEmitterVisitor();
 
-  emitStatements(
-      srcFilePath: string, genFilePath: string, stmts: o.Statement[], exportedVars: string[],
-      preamble: string = ''): string {
-    const converter = new _TsEmitterVisitor(genFilePath, this._importResolver);
-
-    const ctx = EmitterVisitorContext.createRoot(exportedVars);
+    const ctx = EmitterVisitorContext.createRoot();
 
     converter.visitAllStatements(stmts, ctx);
 
     const preambleLines = preamble ? preamble.split('\n') : [];
-    converter.reexports.forEach((reexports, exportedFilePath) => {
+    converter.reexports.forEach((reexports, exportedModuleName) => {
       const reexportsCode =
           reexports.map(reexport => `${reexport.name} as ${reexport.as}`).join(',');
-      preambleLines.push(
-          `export {${reexportsCode}} from '${this._importResolver.fileNameToModuleName(exportedFilePath, genFilePath)}';`);
+      preambleLines.push(`export {${reexportsCode}} from '${exportedModuleName}';`);
     });
 
-    converter.importsWithPrefixes.forEach((prefix, importedFilePath) => {
+    converter.importsWithPrefixes.forEach((prefix, importedModuleName) => {
       // Note: can't write the real word for import as it screws up system.js auto detection...
       preambleLines.push(
           `imp` +
-          `ort * as ${prefix} from '${this._importResolver.fileNameToModuleName(importedFilePath, genFilePath)}';`);
+          `ort * as ${prefix} from '${importedModuleName}';`);
     });
 
-    const sm =
-        ctx.toSourceMapGenerator(srcFilePath, genFilePath, preambleLines.length).toJsComment();
+    const sm = emitSourceMaps ?
+        ctx.toSourceMapGenerator(srcFilePath, genFilePath, preambleLines.length).toJsComment() :
+        '';
     const lines = [...preambleLines, ctx.toSource(), sm];
     if (sm) {
       // always add a newline at the end, as some tools have bugs without it.
       lines.push('');
     }
-    return lines.join('\n');
+    ctx.setPreambleLineCount(preambleLines.length);
+    return {sourceText: lines.join('\n'), context: ctx};
+  }
+
+  emitStatements(
+      srcFilePath: string, genFilePath: string, stmts: o.Statement[], preamble: string = '') {
+    return this.emitStatementsAndContext(srcFilePath, genFilePath, stmts, preamble).sourceText;
   }
 }
 
 class _TsEmitterVisitor extends AbstractEmitterVisitor implements o.TypeVisitor {
   private typeExpression = 0;
 
-  constructor(private _genFilePath: string, private _importResolver: ImportResolver) {
-    super(false);
-  }
+  constructor() { super(false); }
 
   importsWithPrefixes = new Map<string, string>();
   reexports = new Map<string, {name: string, as: string}[]>();
@@ -129,21 +126,28 @@ class _TsEmitterVisitor extends AbstractEmitterVisitor implements o.TypeVisitor
     return null;
   }
 
+  visitAssertNotNullExpr(ast: o.AssertNotNull, ctx: EmitterVisitorContext): any {
+    const result = super.visitAssertNotNullExpr(ast, ctx);
+    ctx.print(ast, '!');
+    return result;
+  }
+
   visitDeclareVarStmt(stmt: o.DeclareVarStmt, ctx: EmitterVisitorContext): any {
-    if (ctx.isExportedVar(stmt.name) && stmt.value instanceof o.ExternalExpr && !stmt.type) {
+    if (stmt.hasModifier(o.StmtModifier.Exported) && stmt.value instanceof o.ExternalExpr &&
+        !stmt.type) {
       // check for a reexport
-      const {name, filePath, members} = this._resolveStaticSymbol(stmt.value.value);
-      if (members !.length === 0 && filePath !== this._genFilePath) {
-        let reexports = this.reexports.get(filePath);
+      const {name, moduleName} = stmt.value.value;
+      if (moduleName) {
+        let reexports = this.reexports.get(moduleName);
         if (!reexports) {
           reexports = [];
-          this.reexports.set(filePath, reexports);
+          this.reexports.set(moduleName, reexports);
         }
-        reexports.push({name, as: stmt.name});
+        reexports.push({name: name !, as: stmt.name});
         return null;
       }
     }
-    if (ctx.isExportedVar(stmt.name)) {
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
       ctx.print(stmt, `export `);
     }
     if (stmt.hasModifier(o.StmtModifier.Final)) {
@@ -181,7 +185,7 @@ class _TsEmitterVisitor extends AbstractEmitterVisitor implements o.TypeVisitor
 
   visitDeclareClassStmt(stmt: o.ClassStmt, ctx: EmitterVisitorContext): any {
     ctx.pushClass(stmt);
-    if (ctx.isExportedVar(stmt.name)) {
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
       ctx.print(stmt, `export `);
     }
     ctx.print(stmt, `class ${stmt.name}`);
@@ -267,7 +271,7 @@ class _TsEmitterVisitor extends AbstractEmitterVisitor implements o.TypeVisitor
   }
 
   visitDeclareFunctionStmt(stmt: o.DeclareFunctionStmt, ctx: EmitterVisitorContext): any {
-    if (ctx.isExportedVar(stmt.name)) {
+    if (stmt.hasModifier(o.StmtModifier.Exported)) {
       ctx.print(stmt, `export `);
     }
     ctx.print(stmt, `function ${stmt.name}(`);
@@ -370,40 +374,18 @@ class _TsEmitterVisitor extends AbstractEmitterVisitor implements o.TypeVisitor
     }, params, ctx, ',');
   }
 
-  private _resolveStaticSymbol(value: CompileIdentifierMetadata):
-      {name: string, filePath: string, members?: string[], arity?: number} {
-    const reference = value.reference;
-    if (!(reference instanceof StaticSymbol)) {
-      throw new Error(`Internal error: unknown identifier ${JSON.stringify(value)}`);
-    }
-    const arity = this._importResolver.getTypeArity(reference) || undefined;
-    const importReference = this._importResolver.getImportAs(reference) || reference;
-    return {
-      name: importReference.name,
-      filePath: importReference.filePath,
-      members: importReference.members, arity
-    };
-  }
-
   private _visitIdentifier(
-      value: CompileIdentifierMetadata, typeParams: o.Type[]|null,
-      ctx: EmitterVisitorContext): void {
-    const {name, filePath, members, arity} = this._resolveStaticSymbol(value);
-    if (filePath != this._genFilePath) {
-      let prefix = this.importsWithPrefixes.get(filePath);
+      value: o.ExternalReference, typeParams: o.Type[]|null, ctx: EmitterVisitorContext): void {
+    const {name, moduleName} = value;
+    if (moduleName) {
+      let prefix = this.importsWithPrefixes.get(moduleName);
       if (prefix == null) {
-        prefix = `import${this.importsWithPrefixes.size}`;
-        this.importsWithPrefixes.set(filePath, prefix);
+        prefix = `i${this.importsWithPrefixes.size}`;
+        this.importsWithPrefixes.set(moduleName, prefix);
       }
       ctx.print(null, `${prefix}.`);
     }
-    if (members !.length) {
-      ctx.print(null, name);
-      ctx.print(null, '.');
-      ctx.print(null, members !.join('.'));
-    } else {
-      ctx.print(null, name);
-    }
+    ctx.print(null, name !);
 
     if (this.typeExpression > 0) {
       // If we are in a type expression that refers to a generic type then supply
@@ -411,19 +393,10 @@ class _TsEmitterVisitor extends AbstractEmitterVisitor implements o.TypeVisitor
       // supplied, supply any as the type. Outside a type expression the reference
       // should not supply type parameters and be treated as a simple value reference
       // to the constructor function itself.
-      const suppliedParameters = (typeParams && typeParams.length) || 0;
-      const additionalParameters = (arity || 0) - suppliedParameters;
-      if (suppliedParameters > 0 || additionalParameters > 0) {
+      const suppliedParameters = typeParams || [];
+      if (suppliedParameters.length > 0) {
         ctx.print(null, `<`);
-        if (suppliedParameters > 0) {
-          this.visitAllObjects(type => type.visitType(this, ctx), typeParams !, ctx, ',');
-        }
-        if (additionalParameters > 0) {
-          for (let i = 0; i < additionalParameters; i++) {
-            if (i > 0 || suppliedParameters > 0) ctx.print(null, ',');
-            ctx.print(null, 'any');
-          }
-        }
+        this.visitAllObjects(type => type.visitType(this, ctx), typeParams !, ctx, ',');
         ctx.print(null, `>`);
       }
     }
diff --git a/packages/compiler/src/output/value_util.ts b/packages/compiler/src/output/value_util.ts
index 58e44bf38e..c043800a6f 100644
--- a/packages/compiler/src/output/value_util.ts
+++ b/packages/compiler/src/output/value_util.ts
@@ -7,17 +7,19 @@
  */
 
 
-import {ValueTransformer, visitValue} from '../util';
+import {OutputContext, ValueTransformer, visitValue} from '../util';
 
 import * as o from './output_ast';
 
 export const QUOTED_KEYS = '$quoted$';
 
-export function convertValueToOutputAst(value: any, type: o.Type | null = null): o.Expression {
-  return visitValue(value, new _ValueOutputAstTransformer(), type);
+export function convertValueToOutputAst(
+    ctx: OutputContext, value: any, type: o.Type | null = null): o.Expression {
+  return visitValue(value, new _ValueOutputAstTransformer(ctx), type);
 }
 
 class _ValueOutputAstTransformer implements ValueTransformer {
+  constructor(private ctx: OutputContext) {}
   visitArray(arr: any[], type: o.Type): o.Expression {
     return o.literalArr(arr.map(value => visitValue(value, this, null)), type);
   }
@@ -38,7 +40,7 @@ class _ValueOutputAstTransformer implements ValueTransformer {
     if (value instanceof o.Expression) {
       return value;
     } else {
-      return o.importExpr({reference: value});
+      return this.ctx.importExpr(value);
     }
   }
 }
diff --git a/packages/compiler/src/parse_util.ts b/packages/compiler/src/parse_util.ts
index c8bda70310..536309cf9e 100644
--- a/packages/compiler/src/parse_util.ts
+++ b/packages/compiler/src/parse_util.ts
@@ -118,12 +118,14 @@ export class ParseError {
       public span: ParseSourceSpan, public msg: string,
       public level: ParseErrorLevel = ParseErrorLevel.ERROR) {}
 
-  toString(): string {
+  contextualMessage(): string {
     const ctx = this.span.start.getContext(100, 3);
-    const contextStr =
-        ctx ? ` ("${ctx.before}[${ParseErrorLevel[this.level]} ->]${ctx.after}")` : '';
+    return ctx ? ` ("${ctx.before}[${ParseErrorLevel[this.level]} ->]${ctx.after}")` : '';
+  }
+
+  toString(): string {
     const details = this.span.details ? `, ${this.span.details}` : '';
-    return `${this.msg}${contextStr}: ${this.span.start}${details}`;
+    return `${this.msg}${this.contextualMessage()}: ${this.span.start}${details}`;
   }
 }
 
diff --git a/packages/compiler/src/pipe_resolver.ts b/packages/compiler/src/pipe_resolver.ts
index a9f17cae09..a7f36ee129 100644
--- a/packages/compiler/src/pipe_resolver.ts
+++ b/packages/compiler/src/pipe_resolver.ts
@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Pipe, Type, resolveForwardRef, ɵReflectorReader, ɵreflector, ɵstringify as stringify} from '@angular/core';
+import {Pipe, Type, resolveForwardRef, ɵstringify as stringify} from '@angular/core';
+
+import {CompileReflector} from './compile_reflector';
 import {findLast} from './directive_resolver';
 import {CompilerInjectable} from './injectable';
 
@@ -23,7 +25,7 @@ function _isPipeMetadata(type: any): boolean {
  */
 @CompilerInjectable()
 export class PipeResolver {
-  constructor(private _reflector: ɵReflectorReader = ɵreflector) {}
+  constructor(private _reflector: CompileReflector) {}
 
   isPipe(type: Type<any>) {
     const typeMetadata = this._reflector.annotations(resolveForwardRef(type));
diff --git a/packages/compiler/src/provider_analyzer.ts b/packages/compiler/src/provider_analyzer.ts
index 9a24b0dcb7..f3a1ca4d26 100644
--- a/packages/compiler/src/provider_analyzer.ts
+++ b/packages/compiler/src/provider_analyzer.ts
@@ -8,7 +8,8 @@
 
 
 import {CompileDiDependencyMetadata, CompileDirectiveMetadata, CompileDirectiveSummary, CompileNgModuleMetadata, CompileProviderMetadata, CompileQueryMetadata, CompileTokenMetadata, CompileTypeMetadata, tokenName, tokenReference} from './compile_metadata';
-import {Identifiers, createIdentifierToken, resolveIdentifier} from './identifiers';
+import {CompileReflector} from './compile_reflector';
+import {Identifiers, createTokenForExternalReference} from './identifiers';
 import {ParseError, ParseSourceSpan} from './parse_util';
 import {AttrAst, DirectiveAst, ProviderAst, ProviderAstType, QueryMatch, ReferenceAst} from './template_parser/template_ast';
 
@@ -32,7 +33,7 @@ export class ProviderViewContext {
   viewProviders: Map<any, boolean>;
   errors: ProviderError[] = [];
 
-  constructor(public component: CompileDirectiveMetadata) {
+  constructor(public reflector: CompileReflector, public component: CompileDirectiveMetadata) {
     this.viewQueries = _getViewQueries(component);
     this.viewProviders = new Map<any, boolean>();
     component.viewProviders.forEach((provider) => {
@@ -68,14 +69,17 @@ export class ProviderElementContext {
       this._addQueryReadsTo(provider.token, provider.token, this._queriedTokens);
     });
     if (isTemplate) {
-      const templateRefId = createIdentifierToken(Identifiers.TemplateRef);
+      const templateRefId =
+          createTokenForExternalReference(this.viewContext.reflector, Identifiers.TemplateRef);
       this._addQueryReadsTo(templateRefId, templateRefId, this._queriedTokens);
     }
     refs.forEach((refAst) => {
-      let defaultQueryValue = refAst.value || createIdentifierToken(Identifiers.ElementRef);
+      let defaultQueryValue = refAst.value ||
+          createTokenForExternalReference(this.viewContext.reflector, Identifiers.ElementRef);
       this._addQueryReadsTo({value: refAst.name}, defaultQueryValue, this._queriedTokens);
     });
-    if (this._queriedTokens.get(resolveIdentifier(Identifiers.ViewContainerRef))) {
+    if (this._queriedTokens.get(
+            this.viewContext.reflector.resolveExternalReference(Identifiers.ViewContainerRef))) {
       this._hasViewContainer = true;
     }
 
@@ -96,7 +100,17 @@ export class ProviderElementContext {
   }
 
   get transformProviders(): ProviderAst[] {
-    return Array.from(this._transformedProviders.values());
+    // Note: Maps keep their insertion order.
+    const lazyProviders: ProviderAst[] = [];
+    const eagerProviders: ProviderAst[] = [];
+    this._transformedProviders.forEach(provider => {
+      if (provider.eager) {
+        eagerProviders.push(provider);
+      } else {
+        lazyProviders.push(provider);
+      }
+    });
+    return lazyProviders.concat(eagerProviders);
   }
 
   get transformedDirectiveAsts(): DirectiveAst[] {
@@ -222,18 +236,25 @@ export class ProviderElementContext {
       // access builtints
       if ((requestingProviderType === ProviderAstType.Directive ||
            requestingProviderType === ProviderAstType.Component)) {
-        if (tokenReference(dep.token) === resolveIdentifier(Identifiers.Renderer) ||
-            tokenReference(dep.token) === resolveIdentifier(Identifiers.ElementRef) ||
-            tokenReference(dep.token) === resolveIdentifier(Identifiers.ChangeDetectorRef) ||
-            tokenReference(dep.token) === resolveIdentifier(Identifiers.TemplateRef)) {
+        if (tokenReference(dep.token) ===
+                this.viewContext.reflector.resolveExternalReference(Identifiers.Renderer) ||
+            tokenReference(dep.token) ===
+                this.viewContext.reflector.resolveExternalReference(Identifiers.ElementRef) ||
+            tokenReference(dep.token) ===
+                this.viewContext.reflector.resolveExternalReference(
+                    Identifiers.ChangeDetectorRef) ||
+            tokenReference(dep.token) ===
+                this.viewContext.reflector.resolveExternalReference(Identifiers.TemplateRef)) {
           return dep;
         }
-        if (tokenReference(dep.token) === resolveIdentifier(Identifiers.ViewContainerRef)) {
+        if (tokenReference(dep.token) ===
+            this.viewContext.reflector.resolveExternalReference(Identifiers.ViewContainerRef)) {
           this._hasViewContainer = true;
         }
       }
       // access the injector
-      if (tokenReference(dep.token) === resolveIdentifier(Identifiers.Injector)) {
+      if (tokenReference(dep.token) ===
+          this.viewContext.reflector.resolveExternalReference(Identifiers.Injector)) {
         return dep;
       }
       // access providers
@@ -294,8 +315,8 @@ export class NgModuleProviderAnalyzer {
   private _errors: ProviderError[] = [];
 
   constructor(
-      ngModule: CompileNgModuleMetadata, extraProviders: CompileProviderMetadata[],
-      sourceSpan: ParseSourceSpan) {
+      private reflector: CompileReflector, ngModule: CompileNgModuleMetadata,
+      extraProviders: CompileProviderMetadata[], sourceSpan: ParseSourceSpan) {
     this._allProviders = new Map<any, ProviderAst>();
     ngModule.transitiveModule.modules.forEach((ngModuleType: CompileTypeMetadata) => {
       const ngModuleProvider = {token: {identifier: ngModuleType}, useClass: ngModuleType};
@@ -316,7 +337,17 @@ export class NgModuleProviderAnalyzer {
       const errorString = this._errors.join('\n');
       throw new Error(`Provider parse errors:\n${errorString}`);
     }
-    return Array.from(this._transformedProviders.values());
+    // Note: Maps keep their insertion order.
+    const lazyProviders: ProviderAst[] = [];
+    const eagerProviders: ProviderAst[] = [];
+    this._transformedProviders.forEach(provider => {
+      if (provider.eager) {
+        eagerProviders.push(provider);
+      } else {
+        lazyProviders.push(provider);
+      }
+    });
+    return lazyProviders.concat(eagerProviders);
   }
 
   private _getOrCreateLocalProvider(token: CompileTokenMetadata, eager: boolean): ProviderAst|null {
@@ -375,8 +406,10 @@ export class NgModuleProviderAnalyzer {
     let foundLocal = false;
     if (!dep.isSkipSelf && dep.token != null) {
       // access the injector
-      if (tokenReference(dep.token) === resolveIdentifier(Identifiers.Injector) ||
-          tokenReference(dep.token) === resolveIdentifier(Identifiers.ComponentFactoryResolver)) {
+      if (tokenReference(dep.token) ===
+              this.reflector.resolveExternalReference(Identifiers.Injector) ||
+          tokenReference(dep.token) ===
+              this.reflector.resolveExternalReference(Identifiers.ComponentFactoryResolver)) {
         foundLocal = true;
         // access providers
       } else if (this._getOrCreateLocalProvider(dep.token, eager) != null) {
diff --git a/packages/compiler/src/resource_loader.ts b/packages/compiler/src/resource_loader.ts
index 38a61fa21f..a0237cd17b 100644
--- a/packages/compiler/src/resource_loader.ts
+++ b/packages/compiler/src/resource_loader.ts
@@ -11,5 +11,5 @@
  * to load templates.
  */
 export class ResourceLoader {
-  get(url: string): Promise<string>|null { return null; }
+  get(url: string): Promise<string>|string { return ''; }
 }
diff --git a/packages/compiler/src/schema/dom_element_schema_registry.ts b/packages/compiler/src/schema/dom_element_schema_registry.ts
index 8c8486be8a..f5961ebd82 100644
--- a/packages/compiler/src/schema/dom_element_schema_registry.ts
+++ b/packages/compiler/src/schema/dom_element_schema_registry.ts
@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AUTO_STYLE, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SchemaMetadata, SecurityContext} from '@angular/core';
-import {CompilerInjectable} from '../injectable';
+import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SchemaMetadata, SecurityContext} from '@angular/core';
 
+import {CompilerInjectable} from '../injectable';
+import {isNgContainer, isNgContent} from '../ml_parser/tags';
 import {dashCaseToCamelCase} from '../util';
 
 import {SECURITY_SCHEMA} from './dom_security_schema';
@@ -75,160 +76,161 @@ const OBJECT = 'object';
 //
 // =================================================================================================
 
-const SCHEMA:
-    string[] =
-        [
-          '[Element]|textContent,%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop',
-          '[HTMLElement]^[Element]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*beforecopy,*beforecut,*beforepaste,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*message,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*paste,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*search,*seeked,*seeking,*select,*selectstart,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate',
-          'abbr,address,article,aside,b,bdi,bdo,cite,code,dd,dfn,dt,em,figcaption,figure,footer,header,i,kbd,main,mark,nav,noscript,rb,rp,rt,rtc,ruby,s,samp,section,small,strong,sub,sup,u,var,wbr^[HTMLElement]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*beforecopy,*beforecut,*beforepaste,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*message,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*paste,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*search,*seeked,*seeking,*select,*selectstart,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate',
-          'media^[HTMLElement]|!autoplay,!controls,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,#playbackRate,preload,src,%srcObject,#volume',
-          ':svg:^[HTMLElement]|*abort,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,%style,#tabIndex',
-          ':svg:graphics^:svg:|',
-          ':svg:animation^:svg:|*begin,*end,*repeat',
-          ':svg:geometry^:svg:|',
-          ':svg:componentTransferFunction^:svg:|',
-          ':svg:gradient^:svg:|',
-          ':svg:textContent^:svg:graphics|',
-          ':svg:textPositioning^:svg:textContent|',
-          'a^[HTMLElement]|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,referrerPolicy,rel,rev,search,shape,target,text,type,username',
-          'area^[HTMLElement]|alt,coords,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,referrerPolicy,search,shape,target,username',
-          'audio^media|',
-          'br^[HTMLElement]|clear',
-          'base^[HTMLElement]|href,target',
-          'body^[HTMLElement]|aLink,background,bgColor,link,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,text,vLink',
-          'button^[HTMLElement]|!autofocus,!disabled,formAction,formEnctype,formMethod,!formNoValidate,formTarget,name,type,value',
-          'canvas^[HTMLElement]|#height,#width',
-          'content^[HTMLElement]|select',
-          'dl^[HTMLElement]|!compact',
-          'datalist^[HTMLElement]|',
-          'details^[HTMLElement]|!open',
-          'dialog^[HTMLElement]|!open,returnValue',
-          'dir^[HTMLElement]|!compact',
-          'div^[HTMLElement]|align',
-          'embed^[HTMLElement]|align,height,name,src,type,width',
-          'fieldset^[HTMLElement]|!disabled,name',
-          'font^[HTMLElement]|color,face,size',
-          'form^[HTMLElement]|acceptCharset,action,autocomplete,encoding,enctype,method,name,!noValidate,target',
-          'frame^[HTMLElement]|frameBorder,longDesc,marginHeight,marginWidth,name,!noResize,scrolling,src',
-          'frameset^[HTMLElement]|cols,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,rows',
-          'hr^[HTMLElement]|align,color,!noShade,size,width',
-          'head^[HTMLElement]|',
-          'h1,h2,h3,h4,h5,h6^[HTMLElement]|align',
-          'html^[HTMLElement]|version',
-          'iframe^[HTMLElement]|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,referrerPolicy,%sandbox,scrolling,src,srcdoc,width',
-          'img^[HTMLElement]|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,referrerPolicy,sizes,src,srcset,useMap,#vspace,#width',
-          'input^[HTMLElement]|accept,align,alt,autocapitalize,autocomplete,!autofocus,!checked,!defaultChecked,defaultValue,dirName,!disabled,%files,formAction,formEnctype,formMethod,!formNoValidate,formTarget,#height,!incremental,!indeterminate,max,#maxLength,min,#minLength,!multiple,name,pattern,placeholder,!readOnly,!required,selectionDirection,#selectionEnd,#selectionStart,#size,src,step,type,useMap,value,%valueAsDate,#valueAsNumber,#width',
-          'keygen^[HTMLElement]|!autofocus,challenge,!disabled,keytype,name',
-          'li^[HTMLElement]|type,#value',
-          'label^[HTMLElement]|htmlFor',
-          'legend^[HTMLElement]|align',
-          'link^[HTMLElement]|as,charset,%crossOrigin,!disabled,href,hreflang,integrity,media,rel,%relList,rev,%sizes,target,type',
-          'map^[HTMLElement]|name',
-          'marquee^[HTMLElement]|behavior,bgColor,direction,height,#hspace,#loop,#scrollAmount,#scrollDelay,!trueSpeed,#vspace,width',
-          'menu^[HTMLElement]|!compact',
-          'meta^[HTMLElement]|content,httpEquiv,name,scheme',
-          'meter^[HTMLElement]|#high,#low,#max,#min,#optimum,#value',
-          'ins,del^[HTMLElement]|cite,dateTime',
-          'ol^[HTMLElement]|!compact,!reversed,#start,type',
-          'object^[HTMLElement]|align,archive,border,code,codeBase,codeType,data,!declare,height,#hspace,name,standby,type,useMap,#vspace,width',
-          'optgroup^[HTMLElement]|!disabled,label',
-          'option^[HTMLElement]|!defaultSelected,!disabled,label,!selected,text,value',
-          'output^[HTMLElement]|defaultValue,%htmlFor,name,value',
-          'p^[HTMLElement]|align',
-          'param^[HTMLElement]|name,type,value,valueType',
-          'picture^[HTMLElement]|',
-          'pre^[HTMLElement]|#width',
-          'progress^[HTMLElement]|#max,#value',
-          'q,blockquote,cite^[HTMLElement]|',
-          'script^[HTMLElement]|!async,charset,%crossOrigin,!defer,event,htmlFor,integrity,src,text,type',
-          'select^[HTMLElement]|!autofocus,!disabled,#length,!multiple,name,!required,#selectedIndex,#size,value',
-          'shadow^[HTMLElement]|',
-          'source^[HTMLElement]|media,sizes,src,srcset,type',
-          'span^[HTMLElement]|',
-          'style^[HTMLElement]|!disabled,media,type',
-          'caption^[HTMLElement]|align',
-          'th,td^[HTMLElement]|abbr,align,axis,bgColor,ch,chOff,#colSpan,headers,height,!noWrap,#rowSpan,scope,vAlign,width',
-          'col,colgroup^[HTMLElement]|align,ch,chOff,#span,vAlign,width',
-          'table^[HTMLElement]|align,bgColor,border,%caption,cellPadding,cellSpacing,frame,rules,summary,%tFoot,%tHead,width',
-          'tr^[HTMLElement]|align,bgColor,ch,chOff,vAlign',
-          'tfoot,thead,tbody^[HTMLElement]|align,ch,chOff,vAlign',
-          'template^[HTMLElement]|',
-          'textarea^[HTMLElement]|autocapitalize,!autofocus,#cols,defaultValue,dirName,!disabled,#maxLength,#minLength,name,placeholder,!readOnly,!required,#rows,selectionDirection,#selectionEnd,#selectionStart,value,wrap',
-          'title^[HTMLElement]|text',
-          'track^[HTMLElement]|!default,kind,label,src,srclang',
-          'ul^[HTMLElement]|!compact,type',
-          'unknown^[HTMLElement]|',
-          'video^media|#height,poster,#width',
-          ':svg:a^:svg:graphics|',
-          ':svg:animate^:svg:animation|',
-          ':svg:animateMotion^:svg:animation|',
-          ':svg:animateTransform^:svg:animation|',
-          ':svg:circle^:svg:geometry|',
-          ':svg:clipPath^:svg:graphics|',
-          ':svg:cursor^:svg:|',
-          ':svg:defs^:svg:graphics|',
-          ':svg:desc^:svg:|',
-          ':svg:discard^:svg:|',
-          ':svg:ellipse^:svg:geometry|',
-          ':svg:feBlend^:svg:|',
-          ':svg:feColorMatrix^:svg:|',
-          ':svg:feComponentTransfer^:svg:|',
-          ':svg:feComposite^:svg:|',
-          ':svg:feConvolveMatrix^:svg:|',
-          ':svg:feDiffuseLighting^:svg:|',
-          ':svg:feDisplacementMap^:svg:|',
-          ':svg:feDistantLight^:svg:|',
-          ':svg:feDropShadow^:svg:|',
-          ':svg:feFlood^:svg:|',
-          ':svg:feFuncA^:svg:componentTransferFunction|',
-          ':svg:feFuncB^:svg:componentTransferFunction|',
-          ':svg:feFuncG^:svg:componentTransferFunction|',
-          ':svg:feFuncR^:svg:componentTransferFunction|',
-          ':svg:feGaussianBlur^:svg:|',
-          ':svg:feImage^:svg:|',
-          ':svg:feMerge^:svg:|',
-          ':svg:feMergeNode^:svg:|',
-          ':svg:feMorphology^:svg:|',
-          ':svg:feOffset^:svg:|',
-          ':svg:fePointLight^:svg:|',
-          ':svg:feSpecularLighting^:svg:|',
-          ':svg:feSpotLight^:svg:|',
-          ':svg:feTile^:svg:|',
-          ':svg:feTurbulence^:svg:|',
-          ':svg:filter^:svg:|',
-          ':svg:foreignObject^:svg:graphics|',
-          ':svg:g^:svg:graphics|',
-          ':svg:image^:svg:graphics|',
-          ':svg:line^:svg:geometry|',
-          ':svg:linearGradient^:svg:gradient|',
-          ':svg:mpath^:svg:|',
-          ':svg:marker^:svg:|',
-          ':svg:mask^:svg:|',
-          ':svg:metadata^:svg:|',
-          ':svg:path^:svg:geometry|',
-          ':svg:pattern^:svg:|',
-          ':svg:polygon^:svg:geometry|',
-          ':svg:polyline^:svg:geometry|',
-          ':svg:radialGradient^:svg:gradient|',
-          ':svg:rect^:svg:geometry|',
-          ':svg:svg^:svg:graphics|#currentScale,#zoomAndPan',
-          ':svg:script^:svg:|type',
-          ':svg:set^:svg:animation|',
-          ':svg:stop^:svg:|',
-          ':svg:style^:svg:|!disabled,media,title,type',
-          ':svg:switch^:svg:graphics|',
-          ':svg:symbol^:svg:|',
-          ':svg:tspan^:svg:textPositioning|',
-          ':svg:text^:svg:textPositioning|',
-          ':svg:textPath^:svg:textContent|',
-          ':svg:title^:svg:|',
-          ':svg:use^:svg:graphics|',
-          ':svg:view^:svg:|#zoomAndPan',
-          'data^[HTMLElement]|value',
-          'menuitem^[HTMLElement]|type,label,icon,!disabled,!checked,radiogroup,!default',
-          'summary^[HTMLElement]|',
-          'time^[HTMLElement]|dateTime',
-        ];
+const SCHEMA: string[] = [
+  '[Element]|textContent,%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop,slot' +
+      /* added manually to avoid breaking changes */
+      ',*message,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored',
+  '[HTMLElement]^[Element]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*auxclick,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*gotpointercapture,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*lostpointercapture,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*pointercancel,*pointerdown,*pointerenter,*pointerleave,*pointermove,*pointerout,*pointerover,*pointerup,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,outerText,!spellcheck,%style,#tabIndex,title,!translate',
+  'abbr,address,article,aside,b,bdi,bdo,cite,code,dd,dfn,dt,em,figcaption,figure,footer,header,i,kbd,main,mark,nav,noscript,rb,rp,rt,rtc,ruby,s,samp,section,small,strong,sub,sup,u,var,wbr^[HTMLElement]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*auxclick,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*gotpointercapture,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*lostpointercapture,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*pointercancel,*pointerdown,*pointerenter,*pointerleave,*pointermove,*pointerout,*pointerover,*pointerup,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,outerText,!spellcheck,%style,#tabIndex,title,!translate',
+  'media^[HTMLElement]|!autoplay,!controls,%controlsList,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,*waitingforkey,#playbackRate,preload,src,%srcObject,#volume',
+  ':svg:^[HTMLElement]|*abort,*auxclick,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*gotpointercapture,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*lostpointercapture,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*pointercancel,*pointerdown,*pointerenter,*pointerleave,*pointermove,*pointerout,*pointerover,*pointerup,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,%style,#tabIndex',
+  ':svg:graphics^:svg:|',
+  ':svg:animation^:svg:|*begin,*end,*repeat',
+  ':svg:geometry^:svg:|',
+  ':svg:componentTransferFunction^:svg:|',
+  ':svg:gradient^:svg:|',
+  ':svg:textContent^:svg:graphics|',
+  ':svg:textPositioning^:svg:textContent|',
+  'a^[HTMLElement]|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,referrerPolicy,rel,rev,search,shape,target,text,type,username',
+  'area^[HTMLElement]|alt,coords,download,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,referrerPolicy,rel,search,shape,target,username',
+  'audio^media|',
+  'br^[HTMLElement]|clear',
+  'base^[HTMLElement]|href,target',
+  'body^[HTMLElement]|aLink,background,bgColor,link,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,text,vLink',
+  'button^[HTMLElement]|!autofocus,!disabled,formAction,formEnctype,formMethod,!formNoValidate,formTarget,name,type,value',
+  'canvas^[HTMLElement]|#height,#width',
+  'content^[HTMLElement]|select',
+  'dl^[HTMLElement]|!compact',
+  'datalist^[HTMLElement]|',
+  'details^[HTMLElement]|!open',
+  'dialog^[HTMLElement]|!open,returnValue',
+  'dir^[HTMLElement]|!compact',
+  'div^[HTMLElement]|align',
+  'embed^[HTMLElement]|align,height,name,src,type,width',
+  'fieldset^[HTMLElement]|!disabled,name',
+  'font^[HTMLElement]|color,face,size',
+  'form^[HTMLElement]|acceptCharset,action,autocomplete,encoding,enctype,method,name,!noValidate,target',
+  'frame^[HTMLElement]|frameBorder,longDesc,marginHeight,marginWidth,name,!noResize,scrolling,src',
+  'frameset^[HTMLElement]|cols,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,rows',
+  'hr^[HTMLElement]|align,color,!noShade,size,width',
+  'head^[HTMLElement]|',
+  'h1,h2,h3,h4,h5,h6^[HTMLElement]|align',
+  'html^[HTMLElement]|version',
+  'iframe^[HTMLElement]|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,referrerPolicy,%sandbox,scrolling,src,srcdoc,width',
+  'img^[HTMLElement]|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,referrerPolicy,sizes,src,srcset,useMap,#vspace,#width',
+  'input^[HTMLElement]|accept,align,alt,autocapitalize,autocomplete,!autofocus,!checked,!defaultChecked,defaultValue,dirName,!disabled,%files,formAction,formEnctype,formMethod,!formNoValidate,formTarget,#height,!incremental,!indeterminate,max,#maxLength,min,#minLength,!multiple,name,pattern,placeholder,!readOnly,!required,selectionDirection,#selectionEnd,#selectionStart,#size,src,step,type,useMap,value,%valueAsDate,#valueAsNumber,#width',
+  'li^[HTMLElement]|type,#value',
+  'label^[HTMLElement]|htmlFor',
+  'legend^[HTMLElement]|align',
+  'link^[HTMLElement]|as,charset,%crossOrigin,!disabled,href,hreflang,integrity,media,referrerPolicy,rel,%relList,rev,%sizes,target,type',
+  'map^[HTMLElement]|name',
+  'marquee^[HTMLElement]|behavior,bgColor,direction,height,#hspace,#loop,#scrollAmount,#scrollDelay,!trueSpeed,#vspace,width',
+  'menu^[HTMLElement]|!compact',
+  'meta^[HTMLElement]|content,httpEquiv,name,scheme',
+  'meter^[HTMLElement]|#high,#low,#max,#min,#optimum,#value',
+  'ins,del^[HTMLElement]|cite,dateTime',
+  'ol^[HTMLElement]|!compact,!reversed,#start,type',
+  'object^[HTMLElement]|align,archive,border,code,codeBase,codeType,data,!declare,height,#hspace,name,standby,type,useMap,#vspace,width',
+  'optgroup^[HTMLElement]|!disabled,label',
+  'option^[HTMLElement]|!defaultSelected,!disabled,label,!selected,text,value',
+  'output^[HTMLElement]|defaultValue,%htmlFor,name,value',
+  'p^[HTMLElement]|align',
+  'param^[HTMLElement]|name,type,value,valueType',
+  'picture^[HTMLElement]|',
+  'pre^[HTMLElement]|#width',
+  'progress^[HTMLElement]|#max,#value',
+  'q,blockquote,cite^[HTMLElement]|',
+  'script^[HTMLElement]|!async,charset,%crossOrigin,!defer,event,htmlFor,integrity,src,text,type',
+  'select^[HTMLElement]|!autofocus,!disabled,#length,!multiple,name,!required,#selectedIndex,#size,value',
+  'shadow^[HTMLElement]|',
+  'slot^[HTMLElement]|name',
+  'source^[HTMLElement]|media,sizes,src,srcset,type',
+  'span^[HTMLElement]|',
+  'style^[HTMLElement]|!disabled,media,type',
+  'caption^[HTMLElement]|align',
+  'th,td^[HTMLElement]|abbr,align,axis,bgColor,ch,chOff,#colSpan,headers,height,!noWrap,#rowSpan,scope,vAlign,width',
+  'col,colgroup^[HTMLElement]|align,ch,chOff,#span,vAlign,width',
+  'table^[HTMLElement]|align,bgColor,border,%caption,cellPadding,cellSpacing,frame,rules,summary,%tFoot,%tHead,width',
+  'tr^[HTMLElement]|align,bgColor,ch,chOff,vAlign',
+  'tfoot,thead,tbody^[HTMLElement]|align,ch,chOff,vAlign',
+  'template^[HTMLElement]|',
+  'textarea^[HTMLElement]|autocapitalize,!autofocus,#cols,defaultValue,dirName,!disabled,#maxLength,#minLength,name,placeholder,!readOnly,!required,#rows,selectionDirection,#selectionEnd,#selectionStart,value,wrap',
+  'title^[HTMLElement]|text',
+  'track^[HTMLElement]|!default,kind,label,src,srclang',
+  'ul^[HTMLElement]|!compact,type',
+  'unknown^[HTMLElement]|',
+  'video^media|#height,poster,#width',
+  ':svg:a^:svg:graphics|',
+  ':svg:animate^:svg:animation|',
+  ':svg:animateMotion^:svg:animation|',
+  ':svg:animateTransform^:svg:animation|',
+  ':svg:circle^:svg:geometry|',
+  ':svg:clipPath^:svg:graphics|',
+  ':svg:defs^:svg:graphics|',
+  ':svg:desc^:svg:|',
+  ':svg:discard^:svg:|',
+  ':svg:ellipse^:svg:geometry|',
+  ':svg:feBlend^:svg:|',
+  ':svg:feColorMatrix^:svg:|',
+  ':svg:feComponentTransfer^:svg:|',
+  ':svg:feComposite^:svg:|',
+  ':svg:feConvolveMatrix^:svg:|',
+  ':svg:feDiffuseLighting^:svg:|',
+  ':svg:feDisplacementMap^:svg:|',
+  ':svg:feDistantLight^:svg:|',
+  ':svg:feDropShadow^:svg:|',
+  ':svg:feFlood^:svg:|',
+  ':svg:feFuncA^:svg:componentTransferFunction|',
+  ':svg:feFuncB^:svg:componentTransferFunction|',
+  ':svg:feFuncG^:svg:componentTransferFunction|',
+  ':svg:feFuncR^:svg:componentTransferFunction|',
+  ':svg:feGaussianBlur^:svg:|',
+  ':svg:feImage^:svg:|',
+  ':svg:feMerge^:svg:|',
+  ':svg:feMergeNode^:svg:|',
+  ':svg:feMorphology^:svg:|',
+  ':svg:feOffset^:svg:|',
+  ':svg:fePointLight^:svg:|',
+  ':svg:feSpecularLighting^:svg:|',
+  ':svg:feSpotLight^:svg:|',
+  ':svg:feTile^:svg:|',
+  ':svg:feTurbulence^:svg:|',
+  ':svg:filter^:svg:|',
+  ':svg:foreignObject^:svg:graphics|',
+  ':svg:g^:svg:graphics|',
+  ':svg:image^:svg:graphics|',
+  ':svg:line^:svg:geometry|',
+  ':svg:linearGradient^:svg:gradient|',
+  ':svg:mpath^:svg:|',
+  ':svg:marker^:svg:|',
+  ':svg:mask^:svg:|',
+  ':svg:metadata^:svg:|',
+  ':svg:path^:svg:geometry|',
+  ':svg:pattern^:svg:|',
+  ':svg:polygon^:svg:geometry|',
+  ':svg:polyline^:svg:geometry|',
+  ':svg:radialGradient^:svg:gradient|',
+  ':svg:rect^:svg:geometry|',
+  ':svg:svg^:svg:graphics|#currentScale,#zoomAndPan',
+  ':svg:script^:svg:|type',
+  ':svg:set^:svg:animation|',
+  ':svg:stop^:svg:|',
+  ':svg:style^:svg:|!disabled,media,title,type',
+  ':svg:switch^:svg:graphics|',
+  ':svg:symbol^:svg:|',
+  ':svg:tspan^:svg:textPositioning|',
+  ':svg:text^:svg:textPositioning|',
+  ':svg:textPath^:svg:textContent|',
+  ':svg:title^:svg:|',
+  ':svg:use^:svg:graphics|',
+  ':svg:view^:svg:|#zoomAndPan',
+  'data^[HTMLElement]|value',
+  'keygen^[HTMLElement]|!autofocus,challenge,!disabled,form,keytype,name',
+  'menuitem^[HTMLElement]|type,label,icon,!disabled,!checked,radiogroup,!default',
+  'summary^[HTMLElement]|',
+  'time^[HTMLElement]|dateTime',
+  ':svg:cursor^:svg:|',
+];
 
 const _ATTR_TO_PROP: {[name: string]: string} = {
   'class': 'className',
@@ -288,7 +290,7 @@ export class DomElementSchemaRegistry extends ElementSchemaRegistry {
     }
 
     if (tagName.indexOf('-') > -1) {
-      if (tagName === 'ng-container' || tagName === 'ng-content') {
+      if (isNgContainer(tagName) || isNgContent(tagName)) {
         return false;
       }
 
@@ -309,7 +311,7 @@ export class DomElementSchemaRegistry extends ElementSchemaRegistry {
     }
 
     if (tagName.indexOf('-') > -1) {
-      if (tagName === 'ng-container' || tagName === 'ng-content') {
+      if (isNgContainer(tagName) || isNgContent(tagName)) {
         return true;
       }
 
diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
index 2fdb0b983b..330a531837 100644
--- a/packages/compiler/src/shadow_css.ts
+++ b/packages/compiler/src/shadow_css.ts
@@ -513,7 +513,11 @@ const _shadowDOMSelectorsRe = [
   /\/shadow-deep\//g,
   /\/shadow\//g,
 ];
-const _shadowDeepSelectors = /(?:>>>)|(?:\/deep\/)/g;
+
+// The deep combinator is deprecated in the CSS spec
+// Support for `>>>`, `deep`, `::ng-deep` is then also deprecated and will be removed in the future.
+// see https://github.com/angular/angular/pull/17677
+const _shadowDeepSelectors = /(?:>>>)|(?:\/deep\/)|(?:::ng-deep)/g;
 const _selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$';
 const _polyfillHostRe = /-shadowcsshost/gim;
 const _colonHostRe = /:host/gim;
diff --git a/packages/compiler/src/style_compiler.ts b/packages/compiler/src/style_compiler.ts
index 7004eec06f..71c84d25dc 100644
--- a/packages/compiler/src/style_compiler.ts
+++ b/packages/compiler/src/style_compiler.ts
@@ -13,6 +13,7 @@ import {CompilerInjectable} from './injectable';
 import * as o from './output/output_ast';
 import {ShadowCss} from './shadow_css';
 import {UrlResolver} from './url_resolver';
+import {OutputContext} from './util';
 
 const COMPONENT_VARIABLE = '%COMP%';
 const HOST_ATTR = `_nghost-${COMPONENT_VARIABLE}`;
@@ -20,19 +21,12 @@ const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`;
 
 export class StylesCompileDependency {
   constructor(
-      public name: string, public moduleUrl: string, public isShimmed: boolean,
-      public valuePlaceholder: CompileIdentifierMetadata) {}
-}
-
-export class StylesCompileResult {
-  constructor(
-      public componentStylesheet: CompiledStylesheet,
-      public externalStylesheets: CompiledStylesheet[]) {}
+      public name: string, public moduleUrl: string, public setValue: (value: any) => void) {}
 }
 
 export class CompiledStylesheet {
   constructor(
-      public statements: o.Statement[], public stylesVar: string,
+      public outputCtx: OutputContext, public stylesVar: string,
       public dependencies: StylesCompileDependency[], public isShimmed: boolean,
       public meta: CompileStylesheetMetadata) {}
 }
@@ -43,44 +37,53 @@ export class StyleCompiler {
 
   constructor(private _urlResolver: UrlResolver) {}
 
-  compileComponent(comp: CompileDirectiveMetadata): StylesCompileResult {
+  compileComponent(outputCtx: OutputContext, comp: CompileDirectiveMetadata): CompiledStylesheet {
     const template = comp.template !;
-    const externalStylesheets: CompiledStylesheet[] = [];
-    const componentStylesheet: CompiledStylesheet = this._compileStyles(
-        comp, new CompileStylesheetMetadata({
+    return this._compileStyles(
+        outputCtx, comp, new CompileStylesheetMetadata({
           styles: template.styles,
           styleUrls: template.styleUrls,
           moduleUrl: identifierModuleUrl(comp.type)
         }),
         true);
-    template.externalStylesheets.forEach((stylesheetMeta) => {
-      const compiledStylesheet = this._compileStyles(comp, stylesheetMeta, false);
-      externalStylesheets.push(compiledStylesheet);
-    });
-    return new StylesCompileResult(componentStylesheet, externalStylesheets);
+  }
+
+  compileStyles(
+      outputCtx: OutputContext, comp: CompileDirectiveMetadata,
+      stylesheet: CompileStylesheetMetadata): CompiledStylesheet {
+    return this._compileStyles(outputCtx, comp, stylesheet, false);
+  }
+
+  needsStyleShim(comp: CompileDirectiveMetadata): boolean {
+    return comp.template !.encapsulation === ViewEncapsulation.Emulated;
   }
 
   private _compileStyles(
-      comp: CompileDirectiveMetadata, stylesheet: CompileStylesheetMetadata,
-      isComponentStylesheet: boolean): CompiledStylesheet {
-    const shim = comp.template !.encapsulation === ViewEncapsulation.Emulated;
-    const styleExpressions =
+      outputCtx: OutputContext, comp: CompileDirectiveMetadata,
+      stylesheet: CompileStylesheetMetadata, isComponentStylesheet: boolean): CompiledStylesheet {
+    const shim = this.needsStyleShim(comp);
+    const styleExpressions: o.Expression[] =
         stylesheet.styles.map(plainStyle => o.literal(this._shimIfNeeded(plainStyle, shim)));
     const dependencies: StylesCompileDependency[] = [];
-    for (let i = 0; i < stylesheet.styleUrls.length; i++) {
-      const identifier: CompileIdentifierMetadata = {reference: null};
+    stylesheet.styleUrls.forEach((styleUrl) => {
+      const exprIndex = styleExpressions.length;
+      // Note: This placeholder will be filled later.
+      styleExpressions.push(null !);
       dependencies.push(new StylesCompileDependency(
-          getStylesVarName(null), stylesheet.styleUrls[i], shim, identifier));
-      styleExpressions.push(new o.ExternalExpr(identifier));
-    }
+          getStylesVarName(null), styleUrl,
+          (value) => styleExpressions[exprIndex] = outputCtx.importExpr(value)));
+    });
     // styles variable contains plain strings and arrays of other styles arrays (recursive),
     // so we set its type to dynamic.
     const stylesVar = getStylesVarName(isComponentStylesheet ? comp : null);
     const stmt = o.variable(stylesVar)
                      .set(o.literalArr(
                          styleExpressions, new o.ArrayType(o.DYNAMIC_TYPE, [o.TypeModifier.Const])))
-                     .toDeclStmt(null, [o.StmtModifier.Final]);
-    return new CompiledStylesheet([stmt], stylesVar, dependencies, shim, stylesheet);
+                     .toDeclStmt(null, isComponentStylesheet ? [o.StmtModifier.Final] : [
+                       o.StmtModifier.Final, o.StmtModifier.Exported
+                     ]);
+    outputCtx.statements.push(stmt);
+    return new CompiledStylesheet(outputCtx, stylesVar, dependencies, shim, stylesheet);
   }
 
   private _shimIfNeeded(style: string, shim: boolean): string {
diff --git a/packages/compiler/src/summary_resolver.ts b/packages/compiler/src/summary_resolver.ts
index d7c16ae0d1..d6246ac9ac 100644
--- a/packages/compiler/src/summary_resolver.ts
+++ b/packages/compiler/src/summary_resolver.ts
@@ -5,6 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import {Type} from '@angular/core';
 import {CompileTypeSummary} from './compile_metadata';
 import {CompilerInjectable} from './injectable';
 
@@ -14,11 +15,25 @@ export interface Summary<T> {
   type?: CompileTypeSummary;
 }
 
+export abstract class SummaryResolver<T> {
+  abstract isLibraryFile(fileName: string): boolean;
+  abstract getLibraryFileName(fileName: string): string|null;
+  abstract resolveSummary(reference: T): Summary<T>|null;
+  abstract getSymbolsOf(filePath: string): T[];
+  abstract getImportAs(reference: T): T;
+  abstract addSummary(summary: Summary<T>): void;
+}
+
 @CompilerInjectable()
-export class SummaryResolver<T> {
+export class JitSummaryResolver implements SummaryResolver<Type<any>> {
+  private _summaries = new Map<Type<any>, Summary<Type<any>>>();
+
   isLibraryFile(fileName: string): boolean { return false; };
   getLibraryFileName(fileName: string): string|null { return null; }
-  resolveSummary(reference: T): Summary<T>|null { return null; };
-  getSymbolsOf(filePath: string): T[] { return []; }
-  getImportAs(reference: T): T { return reference; }
+  resolveSummary(reference: Type<any>): Summary<Type<any>>|null {
+    return this._summaries.get(reference) || null;
+  };
+  getSymbolsOf(filePath: string): Type<any>[] { return []; }
+  getImportAs(reference: Type<any>): Type<any> { return reference; }
+  addSummary(summary: Summary<Type<any>>) { this._summaries.set(summary.symbol, summary); };
 }
diff --git a/packages/compiler/src/template_parser/binding_parser.ts b/packages/compiler/src/template_parser/binding_parser.ts
index 5066b7757c..b44bcbf8bf 100644
--- a/packages/compiler/src/template_parser/binding_parser.ts
+++ b/packages/compiler/src/template_parser/binding_parser.ts
@@ -401,7 +401,6 @@ export class BindingParser {
    * @param propName the name of the property / attribute
    * @param sourceSpan
    * @param isAttr true when binding to an attribute
-   * @private
    */
   private _validatePropertyOrAttributeName(
       propName: string, sourceSpan: ParseSourceSpan, isAttr: boolean): void {
diff --git a/packages/compiler/src/template_parser/template_ast.ts b/packages/compiler/src/template_parser/template_ast.ts
index 63b526e048..f0710f7a13 100644
--- a/packages/compiler/src/template_parser/template_ast.ts
+++ b/packages/compiler/src/template_parser/template_ast.ts
@@ -6,12 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {SecurityContext, ɵLifecycleHooks as LifecycleHooks} from '@angular/core';
+import {SecurityContext} from '@angular/core';
 
+import {AstPath} from '../ast_path';
 import {CompileDirectiveSummary, CompileProviderMetadata, CompileTokenMetadata} from '../compile_metadata';
 import {AST} from '../expression_parser/ast';
+import {LifecycleHooks} from '../lifecycle_reflector';
 import {ParseSourceSpan} from '../parse_util';
 
+
+
 /**
  * An Abstract Syntax Tree node representing part of a parsed Angular template.
  */
@@ -268,6 +272,77 @@ export interface TemplateAstVisitor {
   visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any;
 }
 
+/**
+ * A visitor that accepts each node but doesn't do anything. It is intended to be used
+ * as the base class for a visitor that is only interested in a subset of the node types.
+ */
+export class NullTemplateVisitor implements TemplateAstVisitor {
+  visitNgContent(ast: NgContentAst, context: any): void {}
+  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): void {}
+  visitElement(ast: ElementAst, context: any): void {}
+  visitReference(ast: ReferenceAst, context: any): void {}
+  visitVariable(ast: VariableAst, context: any): void {}
+  visitEvent(ast: BoundEventAst, context: any): void {}
+  visitElementProperty(ast: BoundElementPropertyAst, context: any): void {}
+  visitAttr(ast: AttrAst, context: any): void {}
+  visitBoundText(ast: BoundTextAst, context: any): void {}
+  visitText(ast: TextAst, context: any): void {}
+  visitDirective(ast: DirectiveAst, context: any): void {}
+  visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): void {}
+}
+
+/**
+ * Base class that can be used to build a visitor that visits each node
+ * in an template ast recursively.
+ */
+export class RecursiveTemplateAstVisitor extends NullTemplateVisitor implements TemplateAstVisitor {
+  constructor() { super(); }
+
+  // Nodes with children
+  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
+    return this.visitChildren(context, visit => {
+      visit(ast.attrs);
+      visit(ast.references);
+      visit(ast.variables);
+      visit(ast.directives);
+      visit(ast.providers);
+      visit(ast.children);
+    });
+  }
+
+  visitElement(ast: ElementAst, context: any): any {
+    return this.visitChildren(context, visit => {
+      visit(ast.attrs);
+      visit(ast.inputs);
+      visit(ast.outputs);
+      visit(ast.references);
+      visit(ast.directives);
+      visit(ast.providers);
+      visit(ast.children);
+    });
+  }
+
+  visitDirective(ast: DirectiveAst, context: any): any {
+    return this.visitChildren(context, visit => {
+      visit(ast.inputs);
+      visit(ast.hostProperties);
+      visit(ast.hostEvents);
+    });
+  }
+
+  protected visitChildren<T extends TemplateAst>(
+      context: any,
+      cb: (visit: (<V extends TemplateAst>(children: V[]|undefined) => void)) => void) {
+    let results: any[][] = [];
+    let t = this;
+    function visit<T extends TemplateAst>(children: T[] | undefined) {
+      if (children && children.length) results.push(templateVisitAll(t, children, context));
+    }
+    cb(visit);
+    return [].concat.apply([], results);
+  }
+}
+
 /**
  * Visit every node in a list of {@link TemplateAst}s with the given {@link TemplateAstVisitor}.
  */
@@ -285,3 +360,5 @@ export function templateVisitAll(
   });
   return result;
 }
+
+export type TemplateAstPath = AstPath<TemplateAst>;
diff --git a/packages/compiler/src/template_parser/template_parser.ts b/packages/compiler/src/template_parser/template_parser.ts
index 22736d68b6..9d342c2dda 100644
--- a/packages/compiler/src/template_parser/template_parser.ts
+++ b/packages/compiler/src/template_parser/template_parser.ts
@@ -7,24 +7,27 @@
  */
 
 import {Inject, InjectionToken, Optional, SchemaMetadata, ɵConsole as Console} from '@angular/core';
-import {CompileDirectiveMetadata, CompileDirectiveSummary, CompilePipeSummary, CompileTemplateSummary, CompileTokenMetadata, CompileTypeMetadata, identifierName} from '../compile_metadata';
+
+import {CompileDirectiveMetadata, CompileDirectiveSummary, CompilePipeSummary, CompileTokenMetadata, CompileTypeMetadata, identifierName} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
 import {CompilerConfig} from '../config';
 import {AST, ASTWithSource, EmptyExpr} from '../expression_parser/ast';
 import {Parser} from '../expression_parser/parser';
 import {I18NHtmlParser} from '../i18n/i18n_html_parser';
-import {Identifiers, createIdentifierToken, identifierToken} from '../identifiers';
+import {Identifiers, createTokenForExternalReference, createTokenForReference} from '../identifiers';
 import {CompilerInjectable} from '../injectable';
 import * as html from '../ml_parser/ast';
 import {ParseTreeResult} from '../ml_parser/html_parser';
 import {expandNodes} from '../ml_parser/icu_ast_expander';
 import {InterpolationConfig} from '../ml_parser/interpolation_config';
-import {splitNsName} from '../ml_parser/tags';
+import {isNgTemplate, splitNsName} from '../ml_parser/tags';
 import {ParseError, ParseErrorLevel, ParseSourceSpan} from '../parse_util';
 import {ProviderElementContext, ProviderViewContext} from '../provider_analyzer';
 import {ElementSchemaRegistry} from '../schema/element_schema_registry';
 import {CssSelector, SelectorMatcher} from '../selector';
 import {isStyleUrlResolvable} from '../style_url_resolver';
 import {syntaxError} from '../util';
+
 import {BindingParser, BoundProperty} from './binding_parser';
 import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgContentAst, PropertyBindingType, ReferenceAst, TemplateAst, TemplateAstVisitor, TextAst, VariableAst, templateVisitAll} from './template_ast';
 import {PreparsedElementType, preparseElement} from './template_preparser';
@@ -53,7 +56,6 @@ const IDENT_PROPERTY_IDX = 9;
 // Group 10 = identifier inside ()
 const IDENT_EVENT_IDX = 10;
 
-const NG_TEMPLATE_ELEMENT = 'ng-template';
 // deprecated in 4.x
 const TEMPLATE_ELEMENT = 'template';
 // deprecated in 4.x
@@ -104,9 +106,9 @@ export class TemplateParseResult {
 @CompilerInjectable()
 export class TemplateParser {
   constructor(
-      private _config: CompilerConfig, private _exprParser: Parser,
-      private _schemaRegistry: ElementSchemaRegistry, private _htmlParser: I18NHtmlParser,
-      private _console: Console,
+      private _config: CompilerConfig, private _reflector: CompileReflector,
+      private _exprParser: Parser, private _schemaRegistry: ElementSchemaRegistry,
+      private _htmlParser: I18NHtmlParser, private _console: Console,
       @Optional() @Inject(TEMPLATE_TRANSFORMS) public transforms: TemplateAstVisitor[]) {}
 
   parse(
@@ -127,7 +129,7 @@ export class TemplateParser {
 
     if (errors.length > 0) {
       const errorString = errors.join('\n');
-      throw syntaxError(`Template parse errors:\n${errorString}`);
+      throw syntaxError(`Template parse errors:\n${errorString}`, errors);
     }
 
     return {template: result.templateAst !, pipes: result.usedPipes !};
@@ -140,20 +142,20 @@ export class TemplateParser {
     return this.tryParseHtml(
         this.expandHtml(this._htmlParser !.parse(
             template, templateUrl, true, this.getInterpolationConfig(component))),
-        component, template, directives, pipes, schemas, templateUrl);
+        component, directives, pipes, schemas);
   }
 
   tryParseHtml(
-      htmlAstWithErrors: ParseTreeResult, component: CompileDirectiveMetadata, template: string,
-      directives: CompileDirectiveSummary[], pipes: CompilePipeSummary[], schemas: SchemaMetadata[],
-      templateUrl: string): TemplateParseResult {
+      htmlAstWithErrors: ParseTreeResult, component: CompileDirectiveMetadata,
+      directives: CompileDirectiveSummary[], pipes: CompilePipeSummary[],
+      schemas: SchemaMetadata[]): TemplateParseResult {
     let result: TemplateAst[];
     const errors = htmlAstWithErrors.errors;
     const usedPipes: CompilePipeSummary[] = [];
     if (htmlAstWithErrors.rootNodes.length > 0) {
       const uniqDirectives = removeSummaryDuplicates(directives);
       const uniqPipes = removeSummaryDuplicates(pipes);
-      const providerViewContext = new ProviderViewContext(component);
+      const providerViewContext = new ProviderViewContext(this._reflector, component);
       let interpolationConfig: InterpolationConfig = undefined !;
       if (component.template && component.template.interpolation) {
         interpolationConfig = {
@@ -164,8 +166,8 @@ export class TemplateParser {
       const bindingParser = new BindingParser(
           this._exprParser, interpolationConfig !, this._schemaRegistry, uniqPipes, errors);
       const parseVisitor = new TemplateParseVisitor(
-          this._config, providerViewContext, uniqDirectives, bindingParser, this._schemaRegistry,
-          schemas, errors);
+          this._reflector, this._config, providerViewContext, uniqDirectives, bindingParser,
+          this._schemaRegistry, schemas, errors);
       result = html.visitAll(parseVisitor, htmlAstWithErrors.rootNodes, EMPTY_ELEMENT_CONTEXT);
       errors.push(...providerViewContext.errors);
       usedPipes.push(...bindingParser.getUsedPipes());
@@ -232,10 +234,10 @@ class TemplateParseVisitor implements html.Visitor {
   contentQueryStartId: number;
 
   constructor(
-      private config: CompilerConfig, public providerViewContext: ProviderViewContext,
-      directives: CompileDirectiveSummary[], private _bindingParser: BindingParser,
-      private _schemaRegistry: ElementSchemaRegistry, private _schemas: SchemaMetadata[],
-      private _targetErrors: TemplateParseError[]) {
+      private reflector: CompileReflector, private config: CompilerConfig,
+      public providerViewContext: ProviderViewContext, directives: CompileDirectiveSummary[],
+      private _bindingParser: BindingParser, private _schemaRegistry: ElementSchemaRegistry,
+      private _schemas: SchemaMetadata[], private _targetErrors: TemplateParseError[]) {
     // Note: queries start with id 1 so we can use the number in a Bloom filter!
     this.contentQueryStartId = providerViewContext.component.viewQueries.length + 1;
     directives.forEach((directive, index) => {
@@ -573,7 +575,8 @@ class TemplateParseVisitor implements html.Visitor {
         if ((elOrDirRef.value.length === 0 && directive.isComponent) ||
             (directive.exportAs == elOrDirRef.value)) {
           targetReferences.push(new ReferenceAst(
-              elOrDirRef.name, identifierToken(directive.type), elOrDirRef.sourceSpan));
+              elOrDirRef.name, createTokenForReference(directive.type.reference),
+              elOrDirRef.sourceSpan));
           matchedReferences.add(elOrDirRef.name);
         }
       });
@@ -594,7 +597,7 @@ class TemplateParseVisitor implements html.Visitor {
       } else if (!component) {
         let refToken: CompileTokenMetadata = null !;
         if (isTemplateElement) {
-          refToken = createIdentifierToken(Identifiers.TemplateRef);
+          refToken = createTokenForExternalReference(this.reflector, Identifiers.TemplateRef);
         }
         targetReferences.push(new ReferenceAst(elOrDirRef.name, refToken, elOrDirRef.sourceSpan));
       }
@@ -891,9 +894,8 @@ function isEmptyExpression(ast: AST): boolean {
 function isTemplate(
     el: html.Element, enableLegacyTemplate: boolean,
     reportDeprecation: (m: string, span: ParseSourceSpan) => void): boolean {
+  if (isNgTemplate(el.name)) return true;
   const tagNoNs = splitNsName(el.name)[1];
-  // `<ng-template>` is an angular construct and is lower case
-  if (tagNoNs === NG_TEMPLATE_ELEMENT) return true;
   // `<template>` is HTML and case insensitive
   if (tagNoNs.toLowerCase() === TEMPLATE_ELEMENT) {
     if (enableLegacyTemplate && tagNoNs.toLowerCase() === TEMPLATE_ELEMENT) {
diff --git a/packages/compiler/src/template_parser/template_preparser.ts b/packages/compiler/src/template_parser/template_preparser.ts
index 45d20755d1..f0b484240d 100644
--- a/packages/compiler/src/template_parser/template_preparser.ts
+++ b/packages/compiler/src/template_parser/template_preparser.ts
@@ -7,10 +7,9 @@
  */
 
 import * as html from '../ml_parser/ast';
-import {splitNsName} from '../ml_parser/tags';
+import {isNgContent} from '../ml_parser/tags';
 
 const NG_CONTENT_SELECT_ATTR = 'select';
-const NG_CONTENT_ELEMENT = 'ng-content';
 const LINK_ELEMENT = 'link';
 const LINK_STYLE_REL_ATTR = 'rel';
 const LINK_STYLE_HREF_ATTR = 'href';
@@ -45,7 +44,7 @@ export function preparseElement(ast: html.Element): PreparsedElement {
   selectAttr = normalizeNgContentSelect(selectAttr);
   const nodeName = ast.name.toLowerCase();
   let type = PreparsedElementType.OTHER;
-  if (splitNsName(nodeName)[1] == NG_CONTENT_ELEMENT) {
+  if (isNgContent(nodeName)) {
     type = PreparsedElementType.NG_CONTENT;
   } else if (nodeName == STYLE_ELEMENT) {
     type = PreparsedElementType.STYLE;
diff --git a/packages/compiler/src/url_resolver.ts b/packages/compiler/src/url_resolver.ts
index 61dc231e07..b72fb3a2c9 100644
--- a/packages/compiler/src/url_resolver.ts
+++ b/packages/compiler/src/url_resolver.ts
@@ -202,7 +202,6 @@ function _buildFromEncodedParts(
  *    $6 = <undefined>       query without ?
  *    $7 = Related           fragment without #
  * </pre>
- * @type {!RegExp}
  * @internal
  */
 const _splitRe = new RegExp(
diff --git a/packages/compiler/src/util.ts b/packages/compiler/src/util.ts
index 34a5c35c40..8692eda3a3 100644
--- a/packages/compiler/src/util.ts
+++ b/packages/compiler/src/util.ts
@@ -6,6 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {ɵisPromise as isPromise} from '@angular/core';
+
+import * as o from './output/output_ast';
+import {ParseError} from './parse_util';
+
 export const MODULE_SUFFIX = '';
 
 const CAMEL_CASE_REGEXP = /([A-Z])/g;
@@ -78,26 +83,40 @@ export class ValueTransformer implements ValueVisitor {
   visitOther(value: any, context: any): any { return value; }
 }
 
-export class SyncAsyncResult<T> {
-  constructor(public syncResult: T|null, public asyncResult: Promise<T>|null = null) {
-    if (!asyncResult) {
-      this.asyncResult = Promise.resolve(syncResult);
-    }
-  }
-}
+export type SyncAsync<T> = T | Promise<T>;
 
-export function syntaxError(msg: string): Error {
+export const SyncAsync = {
+  assertSync: <T>(value: SyncAsync<T>): T => {
+    if (isPromise(value)) {
+      throw new Error(`Illegal state: value cannot be a promise`);
+    }
+    return value;
+  },
+  then: <T, R>(value: SyncAsync<T>, cb: (value: T) => R | Promise<R>| SyncAsync<R>):
+            SyncAsync<R> => { return isPromise(value) ? value.then(cb) : cb(value);},
+  all: <T>(syncAsyncValues: SyncAsync<T>[]): SyncAsync<T[]> => {
+    return syncAsyncValues.some(isPromise) ? Promise.all(syncAsyncValues) : syncAsyncValues as T[];
+  }
+};
+
+export function syntaxError(msg: string, parseErrors?: ParseError[]): Error {
   const error = Error(msg);
   (error as any)[ERROR_SYNTAX_ERROR] = true;
+  if (parseErrors) (error as any)[ERROR_PARSE_ERRORS] = parseErrors;
   return error;
 }
 
 const ERROR_SYNTAX_ERROR = 'ngSyntaxError';
+const ERROR_PARSE_ERRORS = 'ngParseErrors';
 
 export function isSyntaxError(error: Error): boolean {
   return (error as any)[ERROR_SYNTAX_ERROR];
 }
 
+export function getParseErrors(error: Error): ParseError[] {
+  return (error as any)[ERROR_PARSE_ERRORS] || [];
+}
+
 export function escapeRegExp(s: string): string {
   return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
 }
@@ -138,3 +157,9 @@ export function utf8Encode(str: string): string {
 
   return encoded;
 }
+
+export interface OutputContext {
+  genFilePath: string;
+  statements: o.Statement[];
+  importExpr(reference: any, typeParams?: o.Type[]|null): o.Expression;
+}
diff --git a/packages/compiler/src/view_compiler/provider_compiler.ts b/packages/compiler/src/view_compiler/provider_compiler.ts
new file mode 100644
index 0000000000..e99578b712
--- /dev/null
+++ b/packages/compiler/src/view_compiler/provider_compiler.ts
@@ -0,0 +1,203 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ɵDepFlags as DepFlags, ɵNodeFlags as NodeFlags} from '@angular/core';
+
+import {CompileDiDependencyMetadata, CompileEntryComponentMetadata, CompileProviderMetadata, CompileTokenMetadata} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
+import {Identifiers, createTokenForExternalReference} from '../identifiers';
+import {LifecycleHooks} from '../lifecycle_reflector';
+import * as o from '../output/output_ast';
+import {convertValueToOutputAst} from '../output/value_util';
+import {ProviderAst, ProviderAstType} from '../template_parser/template_ast';
+import {OutputContext} from '../util';
+
+export function providerDef(ctx: OutputContext, providerAst: ProviderAst): {
+  providerExpr: o.Expression,
+  flags: NodeFlags,
+  depsExpr: o.Expression,
+  tokenExpr: o.Expression
+} {
+  let flags = NodeFlags.None;
+  if (!providerAst.eager) {
+    flags |= NodeFlags.LazyProvider;
+  }
+  if (providerAst.providerType === ProviderAstType.PrivateService) {
+    flags |= NodeFlags.PrivateProvider;
+  }
+  providerAst.lifecycleHooks.forEach((lifecycleHook) => {
+    // for regular providers, we only support ngOnDestroy
+    if (lifecycleHook === LifecycleHooks.OnDestroy ||
+        providerAst.providerType === ProviderAstType.Directive ||
+        providerAst.providerType === ProviderAstType.Component) {
+      flags |= lifecycleHookToNodeFlag(lifecycleHook);
+    }
+  });
+  const {providerExpr, flags: providerFlags, depsExpr} = providerAst.multiProvider ?
+      multiProviderDef(ctx, flags, providerAst.providers) :
+      singleProviderDef(ctx, flags, providerAst.providerType, providerAst.providers[0]);
+  return {
+    providerExpr,
+    flags: providerFlags, depsExpr,
+    tokenExpr: tokenExpr(ctx, providerAst.token),
+  };
+}
+
+function multiProviderDef(
+    ctx: OutputContext, flags: NodeFlags, providers: CompileProviderMetadata[]):
+    {providerExpr: o.Expression, flags: NodeFlags, depsExpr: o.Expression} {
+  const allDepDefs: o.Expression[] = [];
+  const allParams: o.FnParam[] = [];
+  const exprs = providers.map((provider, providerIndex) => {
+    let expr: o.Expression;
+    if (provider.useClass) {
+      const depExprs = convertDeps(providerIndex, provider.deps || provider.useClass.diDeps);
+      expr = ctx.importExpr(provider.useClass.reference).instantiate(depExprs);
+    } else if (provider.useFactory) {
+      const depExprs = convertDeps(providerIndex, provider.deps || provider.useFactory.diDeps);
+      expr = ctx.importExpr(provider.useFactory.reference).callFn(depExprs);
+    } else if (provider.useExisting) {
+      const depExprs = convertDeps(providerIndex, [{token: provider.useExisting}]);
+      expr = depExprs[0];
+    } else {
+      expr = convertValueToOutputAst(ctx, provider.useValue);
+    }
+    return expr;
+  });
+  const providerExpr =
+      o.fn(allParams, [new o.ReturnStatement(o.literalArr(exprs))], o.INFERRED_TYPE);
+  return {
+    providerExpr,
+    flags: flags | NodeFlags.TypeFactoryProvider,
+    depsExpr: o.literalArr(allDepDefs)
+  };
+
+  function convertDeps(providerIndex: number, deps: CompileDiDependencyMetadata[]) {
+    return deps.map((dep, depIndex) => {
+      const paramName = `p${providerIndex}_${depIndex}`;
+      allParams.push(new o.FnParam(paramName, o.DYNAMIC_TYPE));
+      allDepDefs.push(depDef(ctx, dep));
+      return o.variable(paramName);
+    });
+  }
+}
+
+function singleProviderDef(
+    ctx: OutputContext, flags: NodeFlags, providerType: ProviderAstType,
+    providerMeta: CompileProviderMetadata):
+    {providerExpr: o.Expression, flags: NodeFlags, depsExpr: o.Expression} {
+  let providerExpr: o.Expression;
+  let deps: CompileDiDependencyMetadata[];
+  if (providerType === ProviderAstType.Directive || providerType === ProviderAstType.Component) {
+    providerExpr = ctx.importExpr(providerMeta.useClass !.reference);
+    flags |= NodeFlags.TypeDirective;
+    deps = providerMeta.deps || providerMeta.useClass !.diDeps;
+  } else {
+    if (providerMeta.useClass) {
+      providerExpr = ctx.importExpr(providerMeta.useClass.reference);
+      flags |= NodeFlags.TypeClassProvider;
+      deps = providerMeta.deps || providerMeta.useClass.diDeps;
+    } else if (providerMeta.useFactory) {
+      providerExpr = ctx.importExpr(providerMeta.useFactory.reference);
+      flags |= NodeFlags.TypeFactoryProvider;
+      deps = providerMeta.deps || providerMeta.useFactory.diDeps;
+    } else if (providerMeta.useExisting) {
+      providerExpr = o.NULL_EXPR;
+      flags |= NodeFlags.TypeUseExistingProvider;
+      deps = [{token: providerMeta.useExisting}];
+    } else {
+      providerExpr = convertValueToOutputAst(ctx, providerMeta.useValue);
+      flags |= NodeFlags.TypeValueProvider;
+      deps = [];
+    }
+  }
+  const depsExpr = o.literalArr(deps.map(dep => depDef(ctx, dep)));
+  return {providerExpr, flags, depsExpr};
+}
+
+function tokenExpr(ctx: OutputContext, tokenMeta: CompileTokenMetadata): o.Expression {
+  return tokenMeta.identifier ? ctx.importExpr(tokenMeta.identifier.reference) :
+                                o.literal(tokenMeta.value);
+}
+
+export function depDef(ctx: OutputContext, dep: CompileDiDependencyMetadata): o.Expression {
+  // Note: the following fields have already been normalized out by provider_analyzer:
+  // - isAttribute, isSelf, isHost
+  const expr = dep.isValue ? convertValueToOutputAst(ctx, dep.value) : tokenExpr(ctx, dep.token !);
+  let flags = DepFlags.None;
+  if (dep.isSkipSelf) {
+    flags |= DepFlags.SkipSelf;
+  }
+  if (dep.isOptional) {
+    flags |= DepFlags.Optional;
+  }
+  if (dep.isValue) {
+    flags |= DepFlags.Value;
+  }
+  return flags === DepFlags.None ? expr : o.literalArr([o.literal(flags), expr]);
+}
+
+export function lifecycleHookToNodeFlag(lifecycleHook: LifecycleHooks): NodeFlags {
+  let nodeFlag = NodeFlags.None;
+  switch (lifecycleHook) {
+    case LifecycleHooks.AfterContentChecked:
+      nodeFlag = NodeFlags.AfterContentChecked;
+      break;
+    case LifecycleHooks.AfterContentInit:
+      nodeFlag = NodeFlags.AfterContentInit;
+      break;
+    case LifecycleHooks.AfterViewChecked:
+      nodeFlag = NodeFlags.AfterViewChecked;
+      break;
+    case LifecycleHooks.AfterViewInit:
+      nodeFlag = NodeFlags.AfterViewInit;
+      break;
+    case LifecycleHooks.DoCheck:
+      nodeFlag = NodeFlags.DoCheck;
+      break;
+    case LifecycleHooks.OnChanges:
+      nodeFlag = NodeFlags.OnChanges;
+      break;
+    case LifecycleHooks.OnDestroy:
+      nodeFlag = NodeFlags.OnDestroy;
+      break;
+    case LifecycleHooks.OnInit:
+      nodeFlag = NodeFlags.OnInit;
+      break;
+  }
+  return nodeFlag;
+}
+
+export function componentFactoryResolverProviderDef(
+    reflector: CompileReflector, ctx: OutputContext, flags: NodeFlags,
+    entryComponents: CompileEntryComponentMetadata[]): {
+  providerExpr: o.Expression,
+  flags: NodeFlags,
+  depsExpr: o.Expression,
+  tokenExpr: o.Expression
+} {
+  const entryComponentFactories =
+      entryComponents.map((entryComponent) => ctx.importExpr(entryComponent.componentFactory));
+  const token = createTokenForExternalReference(reflector, Identifiers.ComponentFactoryResolver);
+  const classMeta = {
+    diDeps: [
+      {isValue: true, value: o.literalArr(entryComponentFactories)},
+      {token: token, isSkipSelf: true, isOptional: true},
+      {token: createTokenForExternalReference(reflector, Identifiers.NgModuleRef)},
+    ],
+    lifecycleHooks: [],
+    reference: reflector.resolveExternalReference(Identifiers.CodegenComponentFactoryResolver)
+  };
+  const {providerExpr, flags: providerFlags, depsExpr} =
+      singleProviderDef(ctx, flags, ProviderAstType.PrivateService, {
+        token,
+        multi: false,
+        useClass: classMeta,
+      });
+  return {providerExpr, flags: providerFlags, depsExpr, tokenExpr: tokenExpr(ctx, token)};
+}
diff --git a/packages/compiler/src/view_compiler/view_compiler.ts b/packages/compiler/src/view_compiler/view_compiler.ts
index c39bfd2309..6398c06199 100644
--- a/packages/compiler/src/view_compiler/view_compiler.ts
+++ b/packages/compiler/src/view_compiler/view_compiler.ts
@@ -6,19 +6,25 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, ɵArgumentType as ArgumentType, ɵBindingFlags as BindingFlags, ɵDepFlags as DepFlags, ɵLifecycleHooks as LifecycleHooks, ɵNodeFlags as NodeFlags, ɵQueryBindingType as QueryBindingType, ɵQueryValueType as QueryValueType, ɵViewFlags as ViewFlags, ɵelementEventFullName as elementEventFullName} from '@angular/core';
+import {ChangeDetectionStrategy, ɵArgumentType as ArgumentType, ɵBindingFlags as BindingFlags, ɵDepFlags as DepFlags, ɵNodeFlags as NodeFlags, ɵQueryBindingType as QueryBindingType, ɵQueryValueType as QueryValueType, ɵViewFlags as ViewFlags, ɵelementEventFullName as elementEventFullName} from '@angular/core';
 
 import {CompileDiDependencyMetadata, CompileDirectiveMetadata, CompilePipeSummary, CompileProviderMetadata, CompileTokenMetadata, CompileTypeMetadata, rendererTypeName, tokenReference, viewClassName} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
 import {BuiltinConverter, EventHandlerVars, LocalResolver, convertActionBinding, convertPropertyBinding, convertPropertyBindingBuiltins} from '../compiler_util/expression_converter';
 import {CompilerConfig} from '../config';
 import {AST, ASTWithSource, Interpolation} from '../expression_parser/ast';
-import {Identifiers, createIdentifier, createIdentifierToken, resolveIdentifier} from '../identifiers';
+import {Identifiers} from '../identifiers';
 import {CompilerInjectable} from '../injectable';
+import {LifecycleHooks} from '../lifecycle_reflector';
+import {isNgContainer} from '../ml_parser/tags';
 import * as o from '../output/output_ast';
 import {convertValueToOutputAst} from '../output/value_util';
 import {ParseSourceSpan} from '../parse_util';
 import {ElementSchemaRegistry} from '../schema/element_schema_registry';
 import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgContentAst, PropertyBindingType, ProviderAst, ProviderAstType, QueryMatch, ReferenceAst, TemplateAst, TemplateAstVisitor, TextAst, VariableAst, templateVisitAll} from '../template_parser/template_ast';
+import {OutputContext} from '../util';
+
+import {componentFactoryResolverProviderDef, depDef, lifecycleHookToNodeFlag, providerDef} from './provider_compiler';
 
 const CLASS_ATTR = 'class';
 const STYLE_ATTR = 'style';
@@ -26,60 +32,57 @@ const IMPLICIT_TEMPLATE_VAR = '\$implicit';
 const NG_CONTAINER_TAG = 'ng-container';
 
 export class ViewCompileResult {
-  constructor(
-      public statements: o.Statement[], public viewClassVar: string,
-      public rendererTypeVar: string) {}
+  constructor(public viewClassVar: string, public rendererTypeVar: string) {}
 }
 
 @CompilerInjectable()
 export class ViewCompiler {
   constructor(
-      private _genConfigNext: CompilerConfig, private _schemaRegistry: ElementSchemaRegistry) {}
+      private _config: CompilerConfig, private _reflector: CompileReflector,
+      private _schemaRegistry: ElementSchemaRegistry) {}
 
   compileComponent(
-      component: CompileDirectiveMetadata, template: TemplateAst[], styles: o.Expression,
-      usedPipes: CompilePipeSummary[]): ViewCompileResult {
+      outputCtx: OutputContext, component: CompileDirectiveMetadata, template: TemplateAst[],
+      styles: o.Expression, usedPipes: CompilePipeSummary[]): ViewCompileResult {
     let embeddedViewCount = 0;
     const staticQueryIds = findStaticQueryIds(template);
 
-    const statements: o.Statement[] = [];
-
     let renderComponentVarName: string = undefined !;
     if (!component.isHost) {
       const template = component.template !;
       const customRenderData: o.LiteralMapEntry[] = [];
       if (template.animations && template.animations.length) {
-        customRenderData.push(
-            new o.LiteralMapEntry('animation', convertValueToOutputAst(template.animations), true));
+        customRenderData.push(new o.LiteralMapEntry(
+            'animation', convertValueToOutputAst(outputCtx, template.animations), true));
       }
 
       const renderComponentVar = o.variable(rendererTypeName(component.type.reference));
       renderComponentVarName = renderComponentVar.name !;
-      statements.push(
+      outputCtx.statements.push(
           renderComponentVar
-              .set(o.importExpr(createIdentifier(Identifiers.createRendererType2))
-                       .callFn([new o.LiteralMapExpr([
-                         new o.LiteralMapEntry('encapsulation', o.literal(template.encapsulation)),
-                         new o.LiteralMapEntry('styles', styles),
-                         new o.LiteralMapEntry('data', new o.LiteralMapExpr(customRenderData))
-                       ])]))
+              .set(o.importExpr(Identifiers.createRendererType2).callFn([new o.LiteralMapExpr([
+                new o.LiteralMapEntry('encapsulation', o.literal(template.encapsulation), false),
+                new o.LiteralMapEntry('styles', styles, false),
+                new o.LiteralMapEntry('data', new o.LiteralMapExpr(customRenderData), false)
+              ])]))
               .toDeclStmt(
-                  o.importType(createIdentifier(Identifiers.RendererType2)),
-                  [o.StmtModifier.Final]));
+                  o.importType(Identifiers.RendererType2),
+                  [o.StmtModifier.Final, o.StmtModifier.Exported]));
     }
 
     const viewBuilderFactory = (parent: ViewBuilder | null): ViewBuilder => {
       const embeddedViewIndex = embeddedViewCount++;
       return new ViewBuilder(
-          parent, component, embeddedViewIndex, usedPipes, staticQueryIds, viewBuilderFactory);
+          this._reflector, outputCtx, parent, component, embeddedViewIndex, usedPipes,
+          staticQueryIds, viewBuilderFactory);
     };
 
     const visitor = viewBuilderFactory(null);
     visitor.visitAll([], template);
 
-    statements.push(...visitor.build());
+    outputCtx.statements.push(...visitor.build());
 
-    return new ViewCompileResult(statements, visitor.viewName, renderComponentVarName);
+    return new ViewCompileResult(visitor.viewName, renderComponentVarName);
   }
 }
 
@@ -95,10 +98,10 @@ interface UpdateExpression {
   value: AST;
 }
 
-const LOG_VAR = o.variable('l');
-const VIEW_VAR = o.variable('v');
-const CHECK_VAR = o.variable('ck');
-const COMP_VAR = o.variable('co');
+const LOG_VAR = o.variable('_l');
+const VIEW_VAR = o.variable('_v');
+const CHECK_VAR = o.variable('_ck');
+const COMP_VAR = o.variable('_co');
 const EVENT_NAME_VAR = o.variable('en');
 const ALLOW_DEFAULT_VAR = o.variable(`ad`);
 
@@ -116,6 +119,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
   private children: ViewBuilder[] = [];
 
   constructor(
+      private reflector: CompileReflector, private outputCtx: OutputContext,
       private parent: ViewBuilder|null, private component: CompileDirectiveMetadata,
       private embeddedViewIndex: number, private usedPipes: CompilePipeSummary[],
       private staticQueryIds: Map<TemplateAst, StaticAndDynamicQueryIds>,
@@ -123,8 +127,9 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     // TODO(tbosch): The old view compiler used to use an `any` type
     // for the context in any embedded view. We keep this behaivor for now
     // to be able to introduce the new view compiler without too many errors.
-    this.compType =
-        this.embeddedViewIndex > 0 ? o.DYNAMIC_TYPE : o.importType(this.component.type) !;
+    this.compType = this.embeddedViewIndex > 0 ?
+        o.DYNAMIC_TYPE :
+        o.expressionType(outputCtx.importExpr(this.component.type.reference)) !;
   }
 
   get viewName(): string {
@@ -153,10 +158,10 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
         this.nodes.push(() => ({
                           sourceSpan: null,
                           nodeFlags: flags,
-                          nodeDef: o.importExpr(createIdentifier(Identifiers.queryDef)).callFn([
+                          nodeDef: o.importExpr(Identifiers.queryDef).callFn([
                             o.literal(flags), o.literal(queryId),
-                            new o.LiteralMapExpr(
-                                [new o.LiteralMapEntry(query.propertyName, o.literal(bindingType))])
+                            new o.LiteralMapExpr([new o.LiteralMapEntry(
+                                query.propertyName, o.literal(bindingType), false)])
                           ])
                         }));
       });
@@ -167,7 +172,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
       this.nodes.push(() => ({
                         sourceSpan: null,
                         nodeFlags: NodeFlags.TypeElement,
-                        nodeDef: o.importExpr(createIdentifier(Identifiers.anchorDef)).callFn([
+                        nodeDef: o.importExpr(Identifiers.anchorDef).callFn([
                           o.literal(NodeFlags.None), o.NULL_EXPR, o.NULL_EXPR, o.literal(0)
                         ])
                       }));
@@ -190,13 +195,14 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     }
     const viewFactory = new o.DeclareFunctionStmt(
         this.viewName, [new o.FnParam(LOG_VAR.name !)],
-        [new o.ReturnStatement(o.importExpr(createIdentifier(Identifiers.viewDef)).callFn([
+        [new o.ReturnStatement(o.importExpr(Identifiers.viewDef).callFn([
           o.literal(viewFlags),
           o.literalArr(nodeDefExprs),
           updateDirectivesFn,
           updateRendererFn,
         ]))],
-        o.importType(createIdentifier(Identifiers.ViewDefinition)));
+        o.importType(Identifiers.ViewDefinition),
+        this.embeddedViewIndex === 0 ? [o.StmtModifier.Exported] : []);
 
     targetStatements.push(viewFactory);
     return targetStatements;
@@ -226,7 +232,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     this.nodes.push(() => ({
                       sourceSpan: ast.sourceSpan,
                       nodeFlags: NodeFlags.TypeNgContent,
-                      nodeDef: o.importExpr(createIdentifier(Identifiers.ngContentDef)).callFn([
+                      nodeDef: o.importExpr(Identifiers.ngContentDef).callFn([
                         o.literal(ast.ngContentIndex), o.literal(ast.index)
                       ])
                     }));
@@ -237,7 +243,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     this.nodes.push(() => ({
                       sourceSpan: ast.sourceSpan,
                       nodeFlags: NodeFlags.TypeText,
-                      nodeDef: o.importExpr(createIdentifier(Identifiers.textDef)).callFn([
+                      nodeDef: o.importExpr(Identifiers.textDef).callFn([
                         o.literal(ast.ngContentIndex), o.literalArr([o.literal(ast.value)])
                       ])
                     }));
@@ -259,7 +265,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     this.nodes[nodeIndex] = () => ({
       sourceSpan: ast.sourceSpan,
       nodeFlags: NodeFlags.TypeText,
-      nodeDef: o.importExpr(createIdentifier(Identifiers.textDef)).callFn([
+      nodeDef: o.importExpr(Identifiers.textDef).callFn([
         o.literal(ast.ngContentIndex), o.literalArr(inter.strings.map(s => o.literal(s)))
       ]),
       updateRenderer: updateRendererExpressions
@@ -286,7 +292,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     this.nodes[nodeIndex] = () => ({
       sourceSpan: ast.sourceSpan,
       nodeFlags: NodeFlags.TypeElement | flags,
-      nodeDef: o.importExpr(createIdentifier(Identifiers.anchorDef)).callFn([
+      nodeDef: o.importExpr(Identifiers.anchorDef).callFn([
         o.literal(flags),
         queryMatchesExpr,
         o.literal(ast.ngContentIndex),
@@ -302,11 +308,8 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     // reserve the space in the nodeDefs array so we can add children
     this.nodes.push(null !);
 
-    let elName: string|null = ast.name;
-    if (ast.name === NG_CONTAINER_TAG) {
-      // Using a null element name creates an anchor.
-      elName = null;
-    }
+    // Using a null element name creates an anchor.
+    const elName: string|null = isNgContainer(ast.name) ? null : ast.name;
 
     const {flags, usedEvents, queryMatchesExpr, hostBindings: dirHostBindings, hostEvents} =
         this._visitElementOrTemplate(nodeIndex, ast);
@@ -343,11 +346,11 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     const childCount = this.nodes.length - nodeIndex - 1;
 
     const compAst = ast.directives.find(dirAst => dirAst.directive.isComponent);
-    let compRendererType = o.NULL_EXPR;
-    let compView = o.NULL_EXPR;
+    let compRendererType = o.NULL_EXPR as o.Expression;
+    let compView = o.NULL_EXPR as o.Expression;
     if (compAst) {
-      compView = o.importExpr({reference: compAst.directive.componentViewType});
-      compRendererType = o.importExpr({reference: compAst.directive.rendererType});
+      compView = this.outputCtx.importExpr(compAst.directive.componentViewType);
+      compRendererType = this.outputCtx.importExpr(compAst.directive.rendererType);
     }
 
     // elementDef(
@@ -361,7 +364,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     this.nodes[nodeIndex] = () => ({
       sourceSpan: ast.sourceSpan,
       nodeFlags: NodeFlags.TypeElement | flags,
-      nodeDef: o.importExpr(createIdentifier(Identifiers.elementDef)).callFn([
+      nodeDef: o.importExpr(Identifiers.elementDef).callFn([
         o.literal(flags),
         queryMatchesExpr,
         o.literal(ast.ngContentIndex),
@@ -411,10 +414,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     const hostBindings:
         {context: o.Expression, inputAst: BoundElementPropertyAst, dirAst: DirectiveAst}[] = [];
     const hostEvents: {context: o.Expression, eventAst: BoundEventAst, dirAst: DirectiveAst}[] = [];
-    const componentFactoryResolverProvider = createComponentFactoryResolver(ast.directives);
-    if (componentFactoryResolverProvider) {
-      this._visitProvider(componentFactoryResolverProvider, ast.queryMatches);
-    }
+    this._visitComponentFactoryResolverProvider(ast.directives);
 
     ast.providers.forEach((providerAst, providerIndex) => {
       let dirAst: DirectiveAst = undefined !;
@@ -439,11 +439,16 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     let queryMatchExprs: o.Expression[] = [];
     ast.queryMatches.forEach((match) => {
       let valueType: QueryValueType = undefined !;
-      if (tokenReference(match.value) === resolveIdentifier(Identifiers.ElementRef)) {
+      if (tokenReference(match.value) ===
+          this.reflector.resolveExternalReference(Identifiers.ElementRef)) {
         valueType = QueryValueType.ElementRef;
-      } else if (tokenReference(match.value) === resolveIdentifier(Identifiers.ViewContainerRef)) {
+      } else if (
+          tokenReference(match.value) ===
+          this.reflector.resolveExternalReference(Identifiers.ViewContainerRef)) {
         valueType = QueryValueType.ViewContainerRef;
-      } else if (tokenReference(match.value) === resolveIdentifier(Identifiers.TemplateRef)) {
+      } else if (
+          tokenReference(match.value) ===
+          this.reflector.resolveExternalReference(Identifiers.TemplateRef)) {
         valueType = QueryValueType.TemplateRef;
       }
       if (valueType != null) {
@@ -454,7 +459,9 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
       let valueType: QueryValueType = undefined !;
       if (!ref.value) {
         valueType = QueryValueType.RenderElement;
-      } else if (tokenReference(ref.value) === resolveIdentifier(Identifiers.TemplateRef)) {
+      } else if (
+          tokenReference(ref.value) ===
+          this.reflector.resolveExternalReference(Identifiers.TemplateRef)) {
         valueType = QueryValueType.TemplateRef;
       }
       if (valueType != null) {
@@ -495,10 +502,10 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
       this.nodes.push(() => ({
                         sourceSpan: dirAst.sourceSpan,
                         nodeFlags: flags,
-                        nodeDef: o.importExpr(createIdentifier(Identifiers.queryDef)).callFn([
+                        nodeDef: o.importExpr(Identifiers.queryDef).callFn([
                           o.literal(flags), o.literal(queryId),
-                          new o.LiteralMapExpr(
-                              [new o.LiteralMapEntry(query.propertyName, o.literal(bindingType))])
+                          new o.LiteralMapExpr([new o.LiteralMapEntry(
+                              query.propertyName, o.literal(bindingType), false)])
                         ]),
                       }));
     });
@@ -551,9 +558,8 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
           }));
     }
 
-    const dirContextExpr = o.importExpr(createIdentifier(Identifiers.nodeValue)).callFn([
-      VIEW_VAR, o.literal(nodeIndex)
-    ]);
+    const dirContextExpr =
+        o.importExpr(Identifiers.nodeValue).callFn([VIEW_VAR, o.literal(nodeIndex)]);
     const hostBindings = dirAst.hostProperties.map((inputAst) => ({
                                                      context: dirContextExpr,
                                                      dirAst,
@@ -573,7 +579,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
     this.nodes[nodeIndex] = () => ({
       sourceSpan: dirAst.sourceSpan,
       nodeFlags: NodeFlags.TypeDirective | flags,
-      nodeDef: o.importExpr(createIdentifier(Identifiers.directiveDef)).callFn([
+      nodeDef: o.importExpr(Identifiers.directiveDef).callFn([
         o.literal(flags), queryMatchExprs.length ? o.literalArr(queryMatchExprs) : o.NULL_EXPR,
         o.literal(childCount), providerExpr, depsExpr,
         inputDefs.length ? new o.LiteralMapExpr(inputDefs) : o.NULL_EXPR,
@@ -587,47 +593,59 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
   }
 
   private _visitProvider(providerAst: ProviderAst, queryMatches: QueryMatch[]): void {
+    this._addProviderNode(this._visitProviderOrDirective(providerAst, queryMatches));
+  }
+
+  private _visitComponentFactoryResolverProvider(directives: DirectiveAst[]) {
+    const componentDirMeta = directives.find(dirAst => dirAst.directive.isComponent);
+    if (componentDirMeta && componentDirMeta.directive.entryComponents.length) {
+      const {providerExpr, depsExpr, flags, tokenExpr} = componentFactoryResolverProviderDef(
+          this.reflector, this.outputCtx, NodeFlags.PrivateProvider,
+          componentDirMeta.directive.entryComponents);
+      this._addProviderNode({
+        providerExpr,
+        depsExpr,
+        flags,
+        tokenExpr,
+        queryMatchExprs: [],
+        sourceSpan: componentDirMeta.sourceSpan
+      });
+    }
+  }
+
+  private _addProviderNode(data: {
+    flags: NodeFlags,
+    queryMatchExprs: o.Expression[],
+    providerExpr: o.Expression,
+    depsExpr: o.Expression,
+    tokenExpr: o.Expression,
+    sourceSpan: ParseSourceSpan
+  }) {
     const nodeIndex = this.nodes.length;
-    // reserve the space in the nodeDefs array so we can add children
-    this.nodes.push(null !);
-
-    const {flags, queryMatchExprs, providerExpr, depsExpr} =
-        this._visitProviderOrDirective(providerAst, queryMatches);
-
     // providerDef(
     //   flags: NodeFlags, matchedQueries: [string, QueryValueType][], token:any,
     //   value: any, deps: ([DepFlags, any] | any)[]): NodeDef;
-    this.nodes[nodeIndex] = () => ({
-      sourceSpan: providerAst.sourceSpan,
-      nodeFlags: flags,
-      nodeDef: o.importExpr(createIdentifier(Identifiers.providerDef)).callFn([
-        o.literal(flags), queryMatchExprs.length ? o.literalArr(queryMatchExprs) : o.NULL_EXPR,
-        tokenExpr(providerAst.token), providerExpr, depsExpr
-      ])
-    });
+    this.nodes.push(
+        () => ({
+          sourceSpan: data.sourceSpan,
+          nodeFlags: data.flags,
+          nodeDef: o.importExpr(Identifiers.providerDef).callFn([
+            o.literal(data.flags),
+            data.queryMatchExprs.length ? o.literalArr(data.queryMatchExprs) : o.NULL_EXPR,
+            data.tokenExpr, data.providerExpr, data.depsExpr
+          ])
+        }));
   }
 
   private _visitProviderOrDirective(providerAst: ProviderAst, queryMatches: QueryMatch[]): {
     flags: NodeFlags,
+    tokenExpr: o.Expression,
+    sourceSpan: ParseSourceSpan,
     queryMatchExprs: o.Expression[],
     providerExpr: o.Expression,
     depsExpr: o.Expression
   } {
     let flags = NodeFlags.None;
-    if (!providerAst.eager) {
-      flags |= NodeFlags.LazyProvider;
-    }
-    if (providerAst.providerType === ProviderAstType.PrivateService) {
-      flags |= NodeFlags.PrivateProvider;
-    }
-    providerAst.lifecycleHooks.forEach((lifecycleHook) => {
-      // for regular providers, we only support ngOnDestroy
-      if (lifecycleHook === LifecycleHooks.OnDestroy ||
-          providerAst.providerType === ProviderAstType.Directive ||
-          providerAst.providerType === ProviderAstType.Component) {
-        flags |= lifecycleHookToNodeFlag(lifecycleHook);
-      }
-    });
     let queryMatchExprs: o.Expression[] = [];
 
     queryMatches.forEach((match) => {
@@ -636,8 +654,16 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
             o.literalArr([o.literal(match.queryId), o.literal(QueryValueType.Provider)]));
       }
     });
-    const {providerExpr, depsExpr, flags: providerType} = providerDef(providerAst);
-    return {flags: flags | providerType, queryMatchExprs, providerExpr, depsExpr};
+    const {providerExpr, depsExpr, flags: providerFlags, tokenExpr} =
+        providerDef(this.outputCtx, providerAst);
+    return {
+      flags: flags | providerFlags,
+      queryMatchExprs,
+      providerExpr,
+      depsExpr,
+      tokenExpr,
+      sourceSpan: providerAst.sourceSpan
+    };
   }
 
   getLocal(name: string): o.Expression|null {
@@ -650,9 +676,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
       // check references
       const refNodeIndex = currBuilder.refNodeIndices[name];
       if (refNodeIndex != null) {
-        return o.importExpr(createIdentifier(Identifiers.nodeValue)).callFn([
-          currViewExpr, o.literal(refNodeIndex)
-        ]);
+        return o.importExpr(Identifiers.nodeValue).callFn([currViewExpr, o.literal(refNodeIndex)]);
       }
 
       // check variables
@@ -667,39 +691,40 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
 
   createLiteralArrayConverter(sourceSpan: ParseSourceSpan, argCount: number): BuiltinConverter {
     if (argCount === 0) {
-      const valueExpr = o.importExpr(createIdentifier(Identifiers.EMPTY_ARRAY));
+      const valueExpr = o.importExpr(Identifiers.EMPTY_ARRAY);
       return () => valueExpr;
     }
 
     const nodeIndex = this.nodes.length;
     // pureArrayDef(argCount: number): NodeDef;
-    this.nodes.push(
-        () => ({
-          sourceSpan,
-          nodeFlags: NodeFlags.TypePureArray,
-          nodeDef:
-              o.importExpr(createIdentifier(Identifiers.pureArrayDef)).callFn([o.literal(argCount)])
-        }));
-
-    return (args: o.Expression[]) => callCheckStmt(nodeIndex, args);
-  }
-  createLiteralMapConverter(sourceSpan: ParseSourceSpan, keys: string[]): BuiltinConverter {
-    if (keys.length === 0) {
-      const valueExpr = o.importExpr(createIdentifier(Identifiers.EMPTY_MAP));
-      return () => valueExpr;
-    }
-
-    const nodeIndex = this.nodes.length;
-    // function pureObjectDef(propertyNames: string[]): NodeDef
     this.nodes.push(() => ({
                       sourceSpan,
-                      nodeFlags: NodeFlags.TypePureObject,
-                      nodeDef: o.importExpr(createIdentifier(Identifiers.pureObjectDef))
-                                   .callFn([o.literalArr(keys.map(key => o.literal(key)))])
+                      nodeFlags: NodeFlags.TypePureArray,
+                      nodeDef: o.importExpr(Identifiers.pureArrayDef).callFn([o.literal(argCount)])
                     }));
 
     return (args: o.Expression[]) => callCheckStmt(nodeIndex, args);
   }
+
+  createLiteralMapConverter(sourceSpan: ParseSourceSpan, keys: {key: string, quoted: boolean}[]):
+      BuiltinConverter {
+    if (keys.length === 0) {
+      const valueExpr = o.importExpr(Identifiers.EMPTY_MAP);
+      return () => valueExpr;
+    }
+
+    // function pureObjectDef(propToIndex: {[p: string]: number}): NodeDef
+    const map = o.literalMap(keys.map((e, i) => ({...e, value: o.literal(i)})));
+    const nodeIndex = this.nodes.length;
+    this.nodes.push(() => ({
+                      sourceSpan,
+                      nodeFlags: NodeFlags.TypePureObject,
+                      nodeDef: o.importExpr(Identifiers.pureObjectDef).callFn([map])
+                    }));
+
+    return (args: o.Expression[]) => callCheckStmt(nodeIndex, args);
+  }
+
   createPipeConverter(expression: UpdateExpression, name: string, argCount: number):
       BuiltinConverter {
     const pipe = this.usedPipes.find((pipeSummary) => pipeSummary.name === name) !;
@@ -709,8 +734,7 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
       this.nodes.push(() => ({
                         sourceSpan: expression.sourceSpan,
                         nodeFlags: NodeFlags.TypePurePipe,
-                        nodeDef: o.importExpr(createIdentifier(Identifiers.purePipeDef))
-                                     .callFn([o.literal(argCount)])
+                        nodeDef: o.importExpr(Identifiers.purePipeDef).callFn([o.literal(argCount)])
                       }));
 
       // find underlying pipe in the component view
@@ -722,18 +746,15 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
       }
       const pipeNodeIndex = compBuilder.purePipeNodeIndices[name];
       const pipeValueExpr: o.Expression =
-          o.importExpr(createIdentifier(Identifiers.nodeValue)).callFn([
-            compViewExpr, o.literal(pipeNodeIndex)
-          ]);
+          o.importExpr(Identifiers.nodeValue).callFn([compViewExpr, o.literal(pipeNodeIndex)]);
 
       return (args: o.Expression[]) => callUnwrapValue(
                  expression.nodeIndex, expression.bindingIndex,
                  callCheckStmt(nodeIndex, [pipeValueExpr].concat(args)));
     } else {
       const nodeIndex = this._createPipe(expression.sourceSpan, pipe);
-      const nodeValueExpr = o.importExpr(createIdentifier(Identifiers.nodeValue)).callFn([
-        VIEW_VAR, o.literal(nodeIndex)
-      ]);
+      const nodeValueExpr =
+          o.importExpr(Identifiers.nodeValue).callFn([VIEW_VAR, o.literal(nodeIndex)]);
 
       return (args: o.Expression[]) => callUnwrapValue(
                  expression.nodeIndex, expression.bindingIndex,
@@ -751,16 +772,17 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
       }
     });
 
-    const depExprs = pipe.type.diDeps.map(depDef);
+    const depExprs = pipe.type.diDeps.map((diDep) => depDef(this.outputCtx, diDep));
     // function pipeDef(
     //   flags: NodeFlags, ctor: any, deps: ([DepFlags, any] | any)[]): NodeDef
-    this.nodes.push(() => ({
-                      sourceSpan,
-                      nodeFlags: NodeFlags.TypePipe,
-                      nodeDef: o.importExpr(createIdentifier(Identifiers.pipeDef)).callFn([
-                        o.literal(flags), o.importExpr(pipe.type), o.literalArr(depExprs)
-                      ])
-                    }));
+    this.nodes.push(
+        () => ({
+          sourceSpan,
+          nodeFlags: NodeFlags.TypePipe,
+          nodeDef: o.importExpr(Identifiers.pipeDef).callFn([
+            o.literal(flags), this.outputCtx.importExpr(pipe.type.reference), o.literalArr(depExprs)
+          ])
+        }));
     return nodeIndex;
   }
 
@@ -776,7 +798,8 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
             createLiteralArrayConverter: (argCount: number) => this.createLiteralArrayConverter(
                                              expression.sourceSpan, argCount),
             createLiteralMapConverter:
-                (keys: string[]) => this.createLiteralMapConverter(expression.sourceSpan, keys),
+                (keys: {key: string, quoted: boolean}[]) =>
+                    this.createLiteralMapConverter(expression.sourceSpan, keys),
             createPipeConverter: (name: string, argCount: number) =>
                                      this.createPipeConverter(expression, name, argCount)
           },
@@ -887,100 +910,6 @@ class ViewBuilder implements TemplateAstVisitor, LocalResolver {
   visitAttr(ast: AttrAst, context: any): any {}
 }
 
-function providerDef(providerAst: ProviderAst):
-    {providerExpr: o.Expression, flags: NodeFlags, depsExpr: o.Expression} {
-  return providerAst.multiProvider ?
-      multiProviderDef(providerAst.providers) :
-      singleProviderDef(providerAst.providerType, providerAst.providers[0]);
-}
-
-function multiProviderDef(providers: CompileProviderMetadata[]):
-    {providerExpr: o.Expression, flags: NodeFlags, depsExpr: o.Expression} {
-  const allDepDefs: o.Expression[] = [];
-  const allParams: o.FnParam[] = [];
-  const exprs = providers.map((provider, providerIndex) => {
-    let expr: o.Expression;
-    if (provider.useClass) {
-      const depExprs = convertDeps(providerIndex, provider.deps || provider.useClass.diDeps);
-      expr = o.importExpr(provider.useClass).instantiate(depExprs);
-    } else if (provider.useFactory) {
-      const depExprs = convertDeps(providerIndex, provider.deps || provider.useFactory.diDeps);
-      expr = o.importExpr(provider.useFactory).callFn(depExprs);
-    } else if (provider.useExisting) {
-      const depExprs = convertDeps(providerIndex, [{token: provider.useExisting}]);
-      expr = depExprs[0];
-    } else {
-      expr = convertValueToOutputAst(provider.useValue);
-    }
-    return expr;
-  });
-  const providerExpr =
-      o.fn(allParams, [new o.ReturnStatement(o.literalArr(exprs))], o.INFERRED_TYPE);
-  return {providerExpr, flags: NodeFlags.TypeFactoryProvider, depsExpr: o.literalArr(allDepDefs)};
-
-  function convertDeps(providerIndex: number, deps: CompileDiDependencyMetadata[]) {
-    return deps.map((dep, depIndex) => {
-      const paramName = `p${providerIndex}_${depIndex}`;
-      allParams.push(new o.FnParam(paramName, o.DYNAMIC_TYPE));
-      allDepDefs.push(depDef(dep));
-      return o.variable(paramName);
-    });
-  }
-}
-
-function singleProviderDef(providerType: ProviderAstType, providerMeta: CompileProviderMetadata):
-    {providerExpr: o.Expression, flags: NodeFlags, depsExpr: o.Expression} {
-  let providerExpr: o.Expression;
-  let flags: NodeFlags;
-  let deps: CompileDiDependencyMetadata[];
-  if (providerType === ProviderAstType.Directive || providerType === ProviderAstType.Component) {
-    providerExpr = o.importExpr(providerMeta.useClass !);
-    flags = NodeFlags.TypeDirective;
-    deps = providerMeta.deps || providerMeta.useClass !.diDeps;
-  } else {
-    if (providerMeta.useClass) {
-      providerExpr = o.importExpr(providerMeta.useClass);
-      flags = NodeFlags.TypeClassProvider;
-      deps = providerMeta.deps || providerMeta.useClass.diDeps;
-    } else if (providerMeta.useFactory) {
-      providerExpr = o.importExpr(providerMeta.useFactory);
-      flags = NodeFlags.TypeFactoryProvider;
-      deps = providerMeta.deps || providerMeta.useFactory.diDeps;
-    } else if (providerMeta.useExisting) {
-      providerExpr = o.NULL_EXPR;
-      flags = NodeFlags.TypeUseExistingProvider;
-      deps = [{token: providerMeta.useExisting}];
-    } else {
-      providerExpr = convertValueToOutputAst(providerMeta.useValue);
-      flags = NodeFlags.TypeValueProvider;
-      deps = [];
-    }
-  }
-  const depsExpr = o.literalArr(deps.map(dep => depDef(dep)));
-  return {providerExpr, flags, depsExpr};
-}
-
-function tokenExpr(tokenMeta: CompileTokenMetadata): o.Expression {
-  return tokenMeta.identifier ? o.importExpr(tokenMeta.identifier) : o.literal(tokenMeta.value);
-}
-
-function depDef(dep: CompileDiDependencyMetadata): o.Expression {
-  // Note: the following fields have already been normalized out by provider_analyzer:
-  // - isAttribute, isSelf, isHost
-  const expr = dep.isValue ? convertValueToOutputAst(dep.value) : tokenExpr(dep.token !);
-  let flags = DepFlags.None;
-  if (dep.isSkipSelf) {
-    flags |= DepFlags.SkipSelf;
-  }
-  if (dep.isOptional) {
-    flags |= DepFlags.Optional;
-  }
-  if (dep.isValue) {
-    flags |= DepFlags.Value;
-  }
-  return flags === DepFlags.None ? expr : o.literalArr([o.literal(flags), expr]);
-}
-
 function needsAdditionalRootNode(astNodes: TemplateAst[]): boolean {
   const lastAstNode = astNodes[astNodes.length - 1];
   if (lastAstNode instanceof EmbeddedTemplateAst) {
@@ -988,7 +917,7 @@ function needsAdditionalRootNode(astNodes: TemplateAst[]): boolean {
   }
 
   if (lastAstNode instanceof ElementAst) {
-    if (lastAstNode.name === NG_CONTAINER_TAG && lastAstNode.children.length) {
+    if (isNgContainer(lastAstNode.name) && lastAstNode.children.length) {
       return needsAdditionalRootNode(lastAstNode.children);
     }
     return lastAstNode.hasViewContainer;
@@ -997,36 +926,6 @@ function needsAdditionalRootNode(astNodes: TemplateAst[]): boolean {
   return lastAstNode instanceof NgContentAst;
 }
 
-function lifecycleHookToNodeFlag(lifecycleHook: LifecycleHooks): NodeFlags {
-  let nodeFlag = NodeFlags.None;
-  switch (lifecycleHook) {
-    case LifecycleHooks.AfterContentChecked:
-      nodeFlag = NodeFlags.AfterContentChecked;
-      break;
-    case LifecycleHooks.AfterContentInit:
-      nodeFlag = NodeFlags.AfterContentInit;
-      break;
-    case LifecycleHooks.AfterViewChecked:
-      nodeFlag = NodeFlags.AfterViewChecked;
-      break;
-    case LifecycleHooks.AfterViewInit:
-      nodeFlag = NodeFlags.AfterViewInit;
-      break;
-    case LifecycleHooks.DoCheck:
-      nodeFlag = NodeFlags.DoCheck;
-      break;
-    case LifecycleHooks.OnChanges:
-      nodeFlag = NodeFlags.OnChanges;
-      break;
-    case LifecycleHooks.OnDestroy:
-      nodeFlag = NodeFlags.OnDestroy;
-      break;
-    case LifecycleHooks.OnInit:
-      nodeFlag = NodeFlags.OnInit;
-      break;
-  }
-  return nodeFlag;
-}
 
 function elementBindingDef(inputAst: BoundElementPropertyAst, dirAst: DirectiveAst): o.Expression {
   switch (inputAst.type) {
@@ -1068,7 +967,6 @@ function fixedAttrsDef(elementAst: ElementAst): o.Expression {
       mapResult[name] = prevValue != null ? mergeAttributeValue(name, prevValue, value) : value;
     });
   });
-  const mapEntries: o.LiteralMapEntry[] = [];
   // Note: We need to sort to get a defined output order
   // for tests and for caching generated artifacts...
   return o.literalArr(Object.keys(mapResult).sort().map(
@@ -1094,7 +992,7 @@ function callCheckStmt(nodeIndex: number, exprs: o.Expression[]): o.Expression {
 }
 
 function callUnwrapValue(nodeIndex: number, bindingIdx: number, expr: o.Expression): o.Expression {
-  return o.importExpr(createIdentifier(Identifiers.unwrapValue)).callFn([
+  return o.importExpr(Identifiers.unwrapValue).callFn([
     VIEW_VAR, o.literal(nodeIndex), o.literal(bindingIdx), expr
   ]);
 }
@@ -1150,30 +1048,6 @@ function staticViewQueryIds(nodeStaticQueryIds: Map<TemplateAst, StaticAndDynami
   return {staticQueryIds, dynamicQueryIds};
 }
 
-function createComponentFactoryResolver(directives: DirectiveAst[]): ProviderAst|null {
-  const componentDirMeta = directives.find(dirAst => dirAst.directive.isComponent);
-  if (componentDirMeta && componentDirMeta.directive.entryComponents.length) {
-    const entryComponentFactories = componentDirMeta.directive.entryComponents.map(
-        (entryComponent) => o.importExpr({reference: entryComponent.componentFactory}));
-
-    const token = createIdentifierToken(Identifiers.ComponentFactoryResolver);
-
-    const classMeta: CompileTypeMetadata = {
-      diDeps: [
-        {isValue: true, value: o.literalArr(entryComponentFactories)},
-        {token: token, isSkipSelf: true, isOptional: true},
-        {token: createIdentifierToken(Identifiers.NgModuleRef)},
-      ],
-      lifecycleHooks: [],
-      reference: resolveIdentifier(Identifiers.CodegenComponentFactoryResolver)
-    };
-    return new ProviderAst(
-        token, false, true, [{token, multi: false, useClass: classMeta}],
-        ProviderAstType.PrivateService, [], componentDirMeta.sourceSpan);
-  }
-  return null;
-}
-
 function elementEventNameAndTarget(
     eventAst: BoundEventAst, dirAst: DirectiveAst | null): {name: string, target: string | null} {
   if (eventAst.isAnimation) {
@@ -1197,4 +1071,4 @@ function calcStaticDynamicQueryFlags(
     flags |= NodeFlags.DynamicQuery;
   }
   return flags;
-}
+}
\ No newline at end of file
diff --git a/packages/compiler/test/aot/compiler_spec.ts b/packages/compiler/test/aot/compiler_spec.ts
index 77e3a0a8a3..faf041d9a8 100644
--- a/packages/compiler/test/aot/compiler_spec.ts
+++ b/packages/compiler/test/aot/compiler_spec.ts
@@ -6,70 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AotCompiler, AotCompilerHost, AotCompilerOptions, GeneratedFile, createAotCompiler} from '@angular/compiler';
-import {RenderComponentType, ɵReflectionCapabilities as ReflectionCapabilities, ɵreflector as reflector} from '@angular/core';
+import {GeneratedFile, toTypeScript} from '@angular/compiler';
 import {NodeFlags} from '@angular/core/src/view/index';
-import {async} from '@angular/core/testing';
-import {MetadataBundler, MetadataCollector, ModuleMetadata, privateEntriesToIndex} from '@angular/tsc-wrapped';
+import {MetadataBundler, privateEntriesToIndex} from '@angular/tsc-wrapped';
 import * as ts from 'typescript';
 
 import {extractSourceMap, originalPositionFor} from '../output/source_map_util';
 
-import {EmittingCompilerHost, MockAotCompilerHost, MockCompilerHost, MockData, MockDirectory, MockMetadataBundlerHost, settings} from './test_util';
-
-const DTS = /\.d\.ts$/;
-
-const minCoreIndex = `
-  export * from './src/application_module';
-  export * from './src/change_detection';
-  export * from './src/metadata';
-  export * from './src/di/metadata';
-  export * from './src/di/injector';
-  export * from './src/di/injection_token';
-  export * from './src/linker';
-  export * from './src/render';
-  export * from './src/codegen_private_exports';
-`;
+import {EmittingCompilerHost, MockDirectory, MockMetadataBundlerHost, arrayToMockDir, compile, expectNoDiagnostics, settings, setup, toMockFileArray} from './test_util';
 
 describe('compiler (unbundled Angular)', () => {
-  let angularFiles: Map<string, string>;
-
-  beforeAll(() => {
-    const emittingHost = new EmittingCompilerHost([], {emitMetadata: true});
-    emittingHost.addScript('@angular/core/index.ts', minCoreIndex);
-    const emittingProgram = ts.createProgram(emittingHost.scripts, settings, emittingHost);
-    emittingProgram.emit();
-
-    angularFiles = emittingHost.written;
-  });
-
-  // Restore reflector since AoT compiler will update it with a new static reflector
-  afterEach(() => { reflector.updateCapabilities(new ReflectionCapabilities()); });
+  let angularFiles = setup();
 
   describe('Quickstart', () => {
-    let host: MockCompilerHost;
-    let aotHost: MockAotCompilerHost;
-
-    beforeEach(() => {
-      host = new MockCompilerHost(QUICKSTART, FILES, angularFiles);
-      aotHost = new MockAotCompilerHost(host);
+    it('should compile', () => {
+      const {genFiles} = compile([QUICKSTART, angularFiles]);
+      expect(genFiles.find(f => /app\.component\.ngfactory\.ts/.test(f.genFileUrl))).toBeDefined();
+      expect(genFiles.find(f => /app\.module\.ngfactory\.ts/.test(f.genFileUrl))).toBeDefined();
     });
-
-    it('should compile',
-       async(() => compile(host, aotHost, expectNoDiagnostics).then(generatedFiles => {
-         expect(generatedFiles.find(f => /app\.component\.ngfactory\.ts/.test(f.genFileUrl)))
-             .toBeDefined();
-         expect(generatedFiles.find(f => /app\.module\.ngfactory\.ts/.test(f.genFileUrl)))
-             .toBeDefined();
-       })));
-
-    it('should compile using summaries',
-       async(() => summaryCompile(host, aotHost).then(generatedFiles => {
-         expect(generatedFiles.find(f => /app\.component\.ngfactory\.ts/.test(f.genFileUrl)))
-             .toBeDefined();
-         expect(generatedFiles.find(f => /app\.module\.ngfactory\.ts/.test(f.genFileUrl)))
-             .toBeDefined();
-       })));
   });
 
   describe('aot source mapping', () => {
@@ -96,18 +50,10 @@ describe('compiler (unbundled Angular)', () => {
       rootDir = {'app': appDir};
     });
 
-    function compileApp(): Promise<GeneratedFile> {
-      return new Promise((resolve, reject) => {
-        const host = new MockCompilerHost(['/app/app.module.ts'], rootDir, angularFiles);
-        const aotHost = new MockAotCompilerHost(host);
-        let result: GeneratedFile[];
-        let error: Error;
-        resolve(compile(host, aotHost, expectNoDiagnostics, expectNoDiagnostics)
-                    .then(
-                        (files) => files.find(
-                            genFile => genFile.srcFileUrl === componentPath &&
-                                genFile.genFileUrl.endsWith('.ts'))));
-      });
+    function compileApp(): GeneratedFile {
+      const {genFiles} = compile([rootDir, angularFiles]);
+      return genFiles.find(
+          genFile => genFile.srcFileUrl === componentPath && genFile.genFileUrl.endsWith('.ts'));
     }
 
     function findLineAndColumn(
@@ -157,99 +103,95 @@ describe('compiler (unbundled Angular)', () => {
 
     function declareTests({ngUrl, templateDecorator}:
                               {ngUrl: string, templateDecorator: (template: string) => string}) {
-      it('should use the right source url in html parse errors', async(() => {
-           appDir['app.component.ts'] =
-               createComponentSource(templateDecorator('<div>\n  </error>'));
+      it('should use the right source url in html parse errors', () => {
+        appDir['app.component.ts'] = createComponentSource(templateDecorator('<div>\n  </error>'));
 
-           expectPromiseToThrow(
-               compileApp(), new RegExp(`Template parse errors[\\s\\S]*${ngUrl}@1:2`));
-         }));
+        expect(() => compileApp())
+            .toThrowError(new RegExp(`Template parse errors[\\s\\S]*${ngUrl}@1:2`));
+      });
 
-      it('should use the right source url in template parse errors', async(() => {
-           appDir['app.component.ts'] = createComponentSource(
-               templateDecorator('<div>\n  <div unknown="{{ctxProp}}"></div>'));
+      it('should use the right source url in template parse errors', () => {
+        appDir['app.component.ts'] =
+            createComponentSource(templateDecorator('<div>\n  <div unknown="{{ctxProp}}"></div>'));
 
-           expectPromiseToThrow(
-               compileApp(), new RegExp(`Template parse errors[\\s\\S]*${ngUrl}@1:7`));
-         }));
+        expect(() => compileApp())
+            .toThrowError(new RegExp(`Template parse errors[\\s\\S]*${ngUrl}@1:7`));
+      });
 
-      it('should create a sourceMap for the template', async(() => {
-           const template = 'Hello World!';
+      it('should create a sourceMap for the template', () => {
+        const template = 'Hello World!';
 
-           appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
+        appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
 
-           compileApp().then((genFile) => {
-             const sourceMap = extractSourceMap(genFile.source) !;
-             expect(sourceMap.file).toEqual(genFile.genFileUrl);
+        const genFile = compileApp();
+        const genSource = toTypeScript(genFile);
+        const sourceMap = extractSourceMap(genSource) !;
+        expect(sourceMap.file).toEqual(genFile.genFileUrl);
 
-             // the generated file contains code that is not mapped to
-             // the template but rather to the original source file (e.g. import statements, ...)
-             const templateIndex = sourceMap.sources.indexOf(ngUrl);
-             expect(sourceMap.sourcesContent[templateIndex]).toEqual(template);
+        // the generated file contains code that is not mapped to
+        // the template but rather to the original source file (e.g. import statements, ...)
+        const templateIndex = sourceMap.sources.indexOf(ngUrl);
+        expect(sourceMap.sourcesContent[templateIndex]).toEqual(template);
 
-             // for the mapping to the original source file we don't store the source code
-             // as we want to keep whatever TypeScript / ... produced for them.
-             const sourceIndex = sourceMap.sources.indexOf(ngComponentPath);
-             expect(sourceMap.sourcesContent[sourceIndex]).toBe(' ');
-           });
-         }));
+        // for the mapping to the original source file we don't store the source code
+        // as we want to keep whatever TypeScript / ... produced for them.
+        const sourceIndex = sourceMap.sources.indexOf(ngComponentPath);
+        expect(sourceMap.sourcesContent[sourceIndex]).toBe(' ');
+      });
 
-      it('should map elements correctly to the source', async(() => {
-           const template = '<div>\n   <span></span></div>';
+      it('should map elements correctly to the source', () => {
+        const template = '<div>\n   <span></span></div>';
 
-           appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
+        appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
 
-           compileApp().then((genFile) => {
-             const sourceMap = extractSourceMap(genFile.source) !;
-             expect(originalPositionFor(sourceMap, findLineAndColumn(genFile.source, `'span'`)))
-                 .toEqual({line: 2, column: 3, source: ngUrl});
-           });
-         }));
+        const genFile = compileApp();
+        const genSource = toTypeScript(genFile);
+        const sourceMap = extractSourceMap(genSource) !;
+        expect(originalPositionFor(sourceMap, findLineAndColumn(genSource, `'span'`)))
+            .toEqual({line: 2, column: 3, source: ngUrl});
+      });
 
-      it('should map bindings correctly to the source', async(() => {
-           const template = `<div>\n   <span [title]="someMethod()"></span></div>`;
+      it('should map bindings correctly to the source', () => {
+        const template = `<div>\n   <span [title]="someMethod()"></span></div>`;
 
-           appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
+        appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
 
-           compileApp().then((genFile) => {
-             const sourceMap = extractSourceMap(genFile.source) !;
-             expect(
-                 originalPositionFor(sourceMap, findLineAndColumn(genFile.source, `someMethod()`)))
-                 .toEqual({line: 2, column: 9, source: ngUrl});
-           });
-         }));
+        const genFile = compileApp();
+        const genSource = toTypeScript(genFile);
+        const sourceMap = extractSourceMap(genSource) !;
+        expect(originalPositionFor(sourceMap, findLineAndColumn(genSource, `someMethod()`)))
+            .toEqual({line: 2, column: 9, source: ngUrl});
+      });
 
-      it('should map events correctly to the source', async(() => {
-           const template = `<div>\n   <span (click)="someMethod()"></span></div>`;
+      it('should map events correctly to the source', () => {
+        const template = `<div>\n   <span (click)="someMethod()"></span></div>`;
 
-           appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
+        appDir['app.component.ts'] = createComponentSource(templateDecorator(template));
 
-           compileApp().then((genFile) => {
-             const sourceMap = extractSourceMap(genFile.source) !;
-             expect(
-                 originalPositionFor(sourceMap, findLineAndColumn(genFile.source, `someMethod()`)))
-                 .toEqual({line: 2, column: 9, source: ngUrl});
-           });
-         }));
+        const genFile = compileApp();
+        const genSource = toTypeScript(genFile);
+        const sourceMap = extractSourceMap(genSource) !;
+        expect(originalPositionFor(sourceMap, findLineAndColumn(genSource, `someMethod()`)))
+            .toEqual({line: 2, column: 9, source: ngUrl});
+      });
 
-      it('should map non template parts to the source file', async(() => {
-           appDir['app.component.ts'] = createComponentSource(templateDecorator('Hello World!'));
+      it('should map non template parts to the source file', () => {
+        appDir['app.component.ts'] = createComponentSource(templateDecorator('Hello World!'));
 
-           compileApp().then((genFile) => {
-             const sourceMap = extractSourceMap(genFile.source) !;
-             expect(originalPositionFor(sourceMap, {line: 1, column: 0}))
-                 .toEqual({line: 1, column: 0, source: ngComponentPath});
-           });
-         }));
+        const genFile = compileApp();
+        const genSource = toTypeScript(genFile);
+        const sourceMap = extractSourceMap(genSource) !;
+        expect(originalPositionFor(sourceMap, {line: 1, column: 0}))
+            .toEqual({line: 1, column: 0, source: ngComponentPath});
+      });
     }
   });
 
   describe('errors', () => {
-    it('should only warn if not all arguments of an @Injectable class can be resolved',
-       async(() => {
-         const FILES: MockData = {
-           app: {
-             'app.ts': `
+    it('should only warn if not all arguments of an @Injectable class can be resolved', () => {
+      const FILES: MockDirectory = {
+        app: {
+          'app.ts': `
                 import {Injectable} from '@angular/core';
 
                 @Injectable()
@@ -257,23 +199,95 @@ describe('compiler (unbundled Angular)', () => {
                   constructor(a: boolean) {}
                 }
               `
-           }
-         };
-         const host = new MockCompilerHost(['/app/app.ts'], FILES, angularFiles);
-         const aotHost = new MockAotCompilerHost(host);
-         const warnSpy = spyOn(console, 'warn');
-         compile(host, aotHost, expectNoDiagnostics).then(() => {
-           expect(warnSpy).toHaveBeenCalledWith(
-               `Warning: Can't resolve all parameters for MyService in /app/app.ts: (?). This will become an error in Angular v5.x`);
-         });
+        }
+      };
+      const warnSpy = spyOn(console, 'warn');
+      compile([FILES, angularFiles]);
+      expect(warnSpy).toHaveBeenCalledWith(
+          `Warning: Can't resolve all parameters for MyService in /app/app.ts: (?). This will become an error in Angular v5.x`);
 
-       }));
+    });
+
+    it('should be able to suppress a null access', () => {
+      const FILES: MockDirectory = {
+        app: {
+          'app.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                interface Person { name: string; }
+
+                @Component({
+                  selector: 'my-comp',
+                  template: '{{maybe_person!.name}}'
+                })
+                export class MyComp {
+                  maybe_person?: Person;
+                }
+
+                @NgModule({
+                  declarations: [MyComp]
+                })
+                export class MyModule {}
+              `
+        }
+      };
+      compile([FILES, angularFiles], {postCompile: expectNoDiagnostics});
+    });
+
+    it('should not contain a self import in factory', () => {
+      const FILES: MockDirectory = {
+        app: {
+          'app.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                interface Person { name: string; }
+
+                @Component({
+                  selector: 'my-comp',
+                  template: '{{person.name}}'
+                })
+                export class MyComp {
+                  person: Person;
+                }
+
+                @NgModule({
+                  declarations: [MyComp]
+                })
+                export class MyModule {}
+              `
+        }
+      };
+      compile([FILES, angularFiles], {
+        postCompile: program => {
+          const factorySource = program.getSourceFile('/app/app.ngfactory.ts');
+          expect(factorySource.text).not.toContain('\'/app/app.ngfactory\'');
+        }
+      });
+    });
   });
 
-  it('should add the preamble to generated files', async(() => {
-       const FILES: MockData = {
-         app: {
-           'app.ts': `
+  it('should report when a component is declared in any module', () => {
+    const FILES: MockDirectory = {
+      app: {
+        'app.ts': `
+          import {Component, NgModule} from '@angular/core';
+
+          @Component({selector: 'my-comp', template: ''})
+          export class MyComp {}
+
+          @NgModule({})
+          export class MyModule {}
+        `
+      }
+    };
+    expect(() => compile([FILES, angularFiles]))
+        .toThrowError(/Cannot determine the module for class MyComp/);
+  });
+
+  it('should add the preamble to generated files', () => {
+    const FILES: MockDirectory = {
+      app: {
+        'app.ts': `
               import { NgModule, Component } from '@angular/core';
 
               @Component({ template: '' })
@@ -282,26 +296,108 @@ describe('compiler (unbundled Angular)', () => {
               @NgModule({ declarations: [ AppComponent ] })
               export class AppModule { }
             `
-         }
-       };
-       const host = new MockCompilerHost(['/app/app.ts'], FILES, angularFiles);
-       const aotHost = new MockAotCompilerHost(host);
-       const genFilePreamble = '/* Hello world! */';
-       compile(host, aotHost, expectNoDiagnostics, expectNoDiagnostics, {genFilePreamble})
-           .then((generatedFiles) => {
-             const genFile = generatedFiles.find(
-                 gf => gf.srcFileUrl === '/app/app.ts' && gf.genFileUrl.endsWith('.ts'));
-             expect(genFile.source.startsWith(genFilePreamble)).toBe(true);
-           });
+      }
+    };
+    const genFilePreamble = '/* Hello world! */';
+    const {genFiles} = compile([FILES, angularFiles]);
+    const genFile =
+        genFiles.find(gf => gf.srcFileUrl === '/app/app.ts' && gf.genFileUrl.endsWith('.ts'));
+    const genSource = toTypeScript(genFile, genFilePreamble);
+    expect(genSource.startsWith(genFilePreamble)).toBe(true);
+  });
 
-     }));
+  it('should be able to use animation macro methods', () => {
+    const FILES = {
+      app: {
+        'app.ts': `
+      import {Component, NgModule} from '@angular/core';
+      import {trigger, state, style, transition, animate} from '@angular/animations';
+
+      export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
+
+      @Component({
+        selector: 'app-component',
+        template: '<div></div>',
+        animations: [
+          trigger('bodyExpansion', [
+            state('collapsed', style({height: '0px'})),
+            state('expanded', style({height: '*'})),
+            transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
+          ]),
+          trigger('displayMode', [
+            state('collapsed', style({margin: '0'})),
+            state('default', style({margin: '16px 0'})),
+            state('flat', style({margin: '0'})),
+            transition('flat <=> collapsed, default <=> collapsed, flat <=> default',
+                      animate(EXPANSION_PANEL_ANIMATION_TIMING)),
+          ]),
+        ],
+      })
+      export class AppComponent { }
+
+      @NgModule({ declarations: [ AppComponent ] })
+      export class AppModule { }
+    `
+      }
+    };
+    compile([FILES, angularFiles]);
+  });
+
+  it('should detect an entry component via an indirection', () => {
+    const FILES = {
+      app: {
+        'app.ts': `
+          import {NgModule, ANALYZE_FOR_ENTRY_COMPONENTS} from '@angular/core';
+          import {AppComponent} from './app.component';
+          import {COMPONENT_VALUE, MyComponent} from './my-component';
+
+          @NgModule({
+            declarations: [ AppComponent, MyComponent ],
+            bootstrap: [ AppComponent ],
+            providers: [{
+              provide: ANALYZE_FOR_ENTRY_COMPONENTS,
+              multi: true,
+              useValue: COMPONENT_VALUE
+            }],
+          })
+          export class AppModule { }
+        `,
+        'app.component.ts': `
+          import {Component} from '@angular/core';
+
+          @Component({
+            selector: 'app-component',
+            template: '<div></div>',
+          })
+          export class AppComponent { }
+        `,
+        'my-component.ts': `
+          import {Component} from '@angular/core';
+
+          @Component({
+            selector: 'my-component',
+            template: '<div></div>',
+          })
+          export class MyComponent {}
+
+          export const COMPONENT_VALUE = [{a: 'b', component: MyComponent}];
+        `
+      }
+    };
+    const result = compile([FILES, angularFiles]);
+    const appModuleFactory =
+        result.genFiles.find(f => /my-component\.ngfactory/.test(f.genFileUrl));
+    expect(appModuleFactory).toBeDefined();
+    if (appModuleFactory) {
+      expect(toTypeScript(appModuleFactory)).toContain('MyComponentNgFactory');
+    }
+  });
 
   describe('ComponentFactories', () => {
-    it('should include inputs, outputs and ng-content selectors in the component factory',
-       async(() => {
-         const FILES: MockData = {
-           app: {
-             'app.ts': `
+    it('should include inputs, outputs and ng-content selectors in the component factory', () => {
+      const FILES: MockDirectory = {
+        app: {
+          'app.ts': `
                 import {Component, NgModule, Input, Output} from '@angular/core';
 
                 @Component({
@@ -321,33 +417,28 @@ describe('compiler (unbundled Angular)', () => {
                 })
                 export class MyModule {}
               `
-           }
-         };
-         const host = new MockCompilerHost(['/app/app.ts'], FILES, angularFiles);
-         const aotHost = new MockAotCompilerHost(host);
-         let generatedFiles: GeneratedFile[];
-         compile(host, aotHost, expectNoDiagnostics).then((generatedFiles) => {
-           const genFile = generatedFiles.find(genFile => genFile.srcFileUrl === '/app/app.ts');
-           const createComponentFactoryCall =
-               /ɵccf\([^)]*\)/m.exec(genFile.source) ![0].replace(/\s*/g, '');
-           // selector
-           expect(createComponentFactoryCall).toContain('my-comp');
-           // inputs
-           expect(createComponentFactoryCall).toContain(`{aInputProp:'aInputName'}`);
-           // outputs
-           expect(createComponentFactoryCall).toContain(`{aOutputProp:'aOutputName'}`);
-           // ngContentSelectors
-           expect(createComponentFactoryCall).toContain(`['*','child']`);
-         });
-       }));
+        }
+      };
+      const {genFiles} = compile([FILES, angularFiles]);
+      const genFile = genFiles.find(genFile => genFile.srcFileUrl === '/app/app.ts');
+      const genSource = toTypeScript(genFile);
+      const createComponentFactoryCall = /ɵccf\([^)]*\)/m.exec(genSource) ![0].replace(/\s*/g, '');
+      // selector
+      expect(createComponentFactoryCall).toContain('my-comp');
+      // inputs
+      expect(createComponentFactoryCall).toContain(`{aInputProp:'aInputName'}`);
+      // outputs
+      expect(createComponentFactoryCall).toContain(`{aOutputProp:'aOutputName'}`);
+      // ngContentSelectors
+      expect(createComponentFactoryCall).toContain(`['*','child']`);
+    });
   });
 
   describe('generated templates', () => {
-    it('should not call `check` for directives without bindings nor ngDoCheck/ngOnInit',
-       async(() => {
-         const FILES: MockData = {
-           app: {
-             'app.ts': `
+    it('should not call `check` for directives without bindings nor ngDoCheck/ngOnInit', () => {
+      const FILES: MockDirectory = {
+        app: {
+          'app.ts': `
                 import { NgModule, Component } from '@angular/core';
 
                 @Component({ template: '' })
@@ -356,39 +447,18 @@ describe('compiler (unbundled Angular)', () => {
                 @NgModule({ declarations: [ AppComponent ] })
                 export class AppModule { }
               `
-           }
-         };
-         const host = new MockCompilerHost(['/app/app.ts'], FILES, angularFiles);
-         const aotHost = new MockAotCompilerHost(host);
-         const genFilePreamble = '/* Hello world! */';
-         compile(host, aotHost, expectNoDiagnostics, expectNoDiagnostics, {genFilePreamble})
-             .then((generatedFiles) => {
-               const genFile = generatedFiles.find(
-                   gf => gf.srcFileUrl === '/app/app.ts' && gf.genFileUrl.endsWith('.ts'));
-               expect(genFile.source).not.toContain('check(');
-             });
+        }
+      };
+      const {genFiles} = compile([FILES, angularFiles]);
+      const genFile =
+          genFiles.find(gf => gf.srcFileUrl === '/app/app.ts' && gf.genFileUrl.endsWith('.ts'));
+      const genSource = toTypeScript(genFile);
+      expect(genSource).not.toContain('check(');
 
-       }));
+    });
   });
 
   describe('inheritance with summaries', () => {
-    function compileWithSummaries(
-        libInput: MockData, appInput: MockData): Promise<GeneratedFile[]> {
-      const libHost = new MockCompilerHost(['/lib/base.ts'], libInput, angularFiles);
-      const libAotHost = new MockAotCompilerHost(libHost);
-      libAotHost.tsFilesOnly();
-      const appHost = new MockCompilerHost(['/app/main.ts'], appInput, angularFiles);
-      const appAotHost = new MockAotCompilerHost(appHost);
-      appAotHost.tsFilesOnly();
-      return compile(libHost, libAotHost, expectNoDiagnostics, expectNoDiagnosticsAndEmit)
-          .then(() => {
-            libHost.writtenFiles.forEach((value, key) => appHost.writeFile(key, value, false));
-            libHost.overrides.forEach((value, key) => appHost.override(key, value));
-
-            return compile(appHost, appAotHost, expectNoDiagnostics, expectNoDiagnosticsAndEmit);
-          });
-    }
-
     function compileParentAndChild(
         {parentClassDecorator, parentModuleDecorator, childClassDecorator, childModuleDecorator}: {
           parentClassDecorator: string,
@@ -396,7 +466,7 @@ describe('compiler (unbundled Angular)', () => {
           childClassDecorator: string,
           childModuleDecorator: string
         }) {
-      const libInput: MockData = {
+      const libInput: MockDirectory = {
         'lib': {
           'base.ts': `
               import {Injectable, Pipe, Directive, Component, NgModule} from '@angular/core';
@@ -409,7 +479,7 @@ describe('compiler (unbundled Angular)', () => {
             `
         }
       };
-      const appInput: MockData = {
+      const appInput: MockDirectory = {
         'app': {
           'main.ts': `
               import {Injectable, Pipe, Directive, Component, NgModule} from '@angular/core';
@@ -424,15 +494,15 @@ describe('compiler (unbundled Angular)', () => {
         }
       };
 
-      return compileWithSummaries(libInput, appInput)
-          .then((generatedFiles) => generatedFiles.find(gf => gf.srcFileUrl === '/app/main.ts'));
+      const {outDir: libOutDir} = compile([libInput, angularFiles], {useSummaries: true});
+      const {genFiles} = compile([libOutDir, appInput, angularFiles], {useSummaries: true});
+      return genFiles.find(gf => gf.srcFileUrl === '/app/main.ts');
     }
 
-    it('should inherit ctor and lifecycle hooks from classes in other compilation units',
-       async(() => {
-         const libInput: MockData = {
-           'lib': {
-             'base.ts': `
+    it('should inherit ctor and lifecycle hooks from classes in other compilation units', () => {
+      const libInput: MockDirectory = {
+        'lib': {
+          'base.ts': `
             export class AParam {}
 
             export class Base {
@@ -440,11 +510,11 @@ describe('compiler (unbundled Angular)', () => {
               ngOnDestroy() {}
             }
           `
-           }
-         };
-         const appInput: MockData = {
-           'app': {
-             'main.ts': `
+        }
+      };
+      const appInput: MockDirectory = {
+        'app': {
+          'main.ts': `
             import {NgModule, Component} from '@angular/core';
             import {Base} from '../lib/base';
 
@@ -456,20 +526,20 @@ describe('compiler (unbundled Angular)', () => {
             })
             export class MyModule {}
           `
-           }
-         };
+        }
+      };
 
-         compileWithSummaries(libInput, appInput).then((generatedFiles) => {
-           const mainNgFactory = generatedFiles.find(gf => gf.srcFileUrl === '/app/main.ts');
-           const flags = NodeFlags.TypeDirective | NodeFlags.Component | NodeFlags.OnDestroy;
-           expect(mainNgFactory.source)
-               .toContain(`${flags},(null as any),0,import1.Extends,[import2.AParam]`);
-         });
-       }));
+      const {outDir: libOutDir} = compile([libInput, angularFiles], {useSummaries: true});
+      const {genFiles} = compile([libOutDir, appInput, angularFiles], {useSummaries: true});
+      const mainNgFactory = genFiles.find(gf => gf.srcFileUrl === '/app/main.ts');
+      const flags = NodeFlags.TypeDirective | NodeFlags.Component | NodeFlags.OnDestroy;
+      expect(toTypeScript(mainNgFactory))
+          .toContain(`${flags},(null as any),0,i1.Extends,[i2.AParam]`);
+    });
 
     it('should inherit ctor and lifecycle hooks from classes in other compilation units over 2 levels',
-       async(() => {
-         const lib1Input: MockData = {
+       () => {
+         const lib1Input: MockDirectory = {
            'lib1': {
              'base.ts': `
             export class AParam {}
@@ -482,7 +552,7 @@ describe('compiler (unbundled Angular)', () => {
            }
          };
 
-         const lib2Input: MockData = {
+         const lib2Input: MockDirectory = {
            'lib2': {
              'middle.ts': `
             import {Base} from '../lib1/base';
@@ -492,7 +562,7 @@ describe('compiler (unbundled Angular)', () => {
          };
 
 
-         const appInput: MockData = {
+         const appInput: MockDirectory = {
            'app': {
              'main.ts': `
             import {NgModule, Component} from '@angular/core';
@@ -508,158 +578,141 @@ describe('compiler (unbundled Angular)', () => {
           `
            }
          };
-         const lib1Host = new MockCompilerHost(['/lib1/base.ts'], lib1Input, angularFiles);
-         const lib1AotHost = new MockAotCompilerHost(lib1Host);
-         lib1AotHost.tsFilesOnly();
-         const lib2Host = new MockCompilerHost(['/lib2/middle.ts'], lib2Input, angularFiles);
-         const lib2AotHost = new MockAotCompilerHost(lib2Host);
-         lib2AotHost.tsFilesOnly();
-         const appHost = new MockCompilerHost(['/app/main.ts'], appInput, angularFiles);
-         const appAotHost = new MockAotCompilerHost(appHost);
-         appAotHost.tsFilesOnly();
-         compile(lib1Host, lib1AotHost, expectNoDiagnostics, expectNoDiagnosticsAndEmit)
-             .then(() => {
-               lib1Host.writtenFiles.forEach((value, key) => lib2Host.writeFile(key, value, false));
-               lib1Host.overrides.forEach((value, key) => lib2Host.override(key, value));
-               return compile(
-                   lib2Host, lib2AotHost, expectNoDiagnostics, expectNoDiagnosticsAndEmit);
-             })
-             .then(() => {
-               lib2Host.writtenFiles.forEach((value, key) => appHost.writeFile(key, value, false));
-               lib2Host.overrides.forEach((value, key) => appHost.override(key, value));
-               return compile(appHost, appAotHost, expectNoDiagnostics, expectNoDiagnosticsAndEmit);
-             })
-             .then((generatedFiles) => {
-               const mainNgFactory = generatedFiles.find(gf => gf.srcFileUrl === '/app/main.ts');
-               const flags = NodeFlags.TypeDirective | NodeFlags.Component | NodeFlags.OnDestroy;
-               expect(mainNgFactory.source)
-                   .toContain(`${flags},(null as any),0,import1.Extends,[import2.AParam_2]`);
-             });
-       }));
+         const {outDir: lib1OutDir} = compile([lib1Input, angularFiles], {useSummaries: true});
+         const {outDir: lib2OutDir} =
+             compile([lib1OutDir, lib2Input, angularFiles], {useSummaries: true});
+         const {genFiles} = compile([lib2OutDir, appInput, angularFiles], {useSummaries: true});
+         const mainNgFactory = genFiles.find(gf => gf.srcFileUrl === '/app/main.ts');
+         const flags = NodeFlags.TypeDirective | NodeFlags.Component | NodeFlags.OnDestroy;
+         expect(toTypeScript(mainNgFactory))
+             .toContain(`${flags},(null as any),0,i1.Extends,[i2.AParam_2]`);
+       });
 
     describe('Injectable', () => {
-      it('should allow to inherit', async(() => {
-           compileParentAndChild({
-             parentClassDecorator: '@Injectable()',
-             parentModuleDecorator: '@NgModule({providers: [Base]})',
-             childClassDecorator: '@Injectable()',
-             childModuleDecorator: '@NgModule({providers: [Extends]})',
-           }).then((mainNgFactory) => { expect(mainNgFactory).toBeTruthy(); });
-         }));
+      it('should allow to inherit', () => {
+        const mainNgFactory = compileParentAndChild({
+          parentClassDecorator: '@Injectable()',
+          parentModuleDecorator: '@NgModule({providers: [Base]})',
+          childClassDecorator: '@Injectable()',
+          childModuleDecorator: '@NgModule({providers: [Extends]})',
+        });
+        expect(mainNgFactory).toBeTruthy();
+      });
 
-      it('should error if the child class has no matching decorator', async(() => {
-           compileParentAndChild({
-             parentClassDecorator: '@Injectable()',
-             parentModuleDecorator: '@NgModule({providers: [Base]})',
-             childClassDecorator: '',
-             childModuleDecorator: '@NgModule({providers: [Extends]})',
-           }).then(fail, (e) => {
-             expect(e.message).toContain(
-                 'Class Extends in /app/main.ts extends from a Injectable in another compilation unit without duplicating the decorator. ' +
-                 'Please add a Injectable or Pipe or Directive or Component or NgModule decorator to the class.');
-           });
-         }));
+      it('should error if the child class has no matching decorator', () => {
+        expect(() => compileParentAndChild({
+                 parentClassDecorator: '@Injectable()',
+                 parentModuleDecorator: '@NgModule({providers: [Base]})',
+                 childClassDecorator: '',
+                 childModuleDecorator: '@NgModule({providers: [Extends]})',
+               }))
+            .toThrowError(
+                'Class Extends in /app/main.ts extends from a Injectable in another compilation unit without duplicating the decorator. ' +
+                'Please add a Injectable or Pipe or Directive or Component or NgModule decorator to the class.');
+      });
     });
 
     describe('Component', () => {
-      it('should allow to inherit', async(() => {
-           compileParentAndChild({
-             parentClassDecorator: `@Component({template: ''})`,
-             parentModuleDecorator: '@NgModule({declarations: [Base]})',
-             childClassDecorator: `@Component({template: ''})`,
-             childModuleDecorator: '@NgModule({declarations: [Extends]})',
-           }).then((mainNgFactory) => { expect(mainNgFactory).toBeTruthy(); });
-         }));
+      it('should allow to inherit', () => {
+        const mainNgFactory = compileParentAndChild({
+          parentClassDecorator: `@Component({template: ''})`,
+          parentModuleDecorator: '@NgModule({declarations: [Base]})',
+          childClassDecorator: `@Component({template: ''})`,
+          childModuleDecorator: '@NgModule({declarations: [Extends]})'
+        });
+        expect(mainNgFactory).toBeTruthy();
+      });
 
-      it('should error if the child class has no matching decorator', async(() => {
-           compileParentAndChild({
-             parentClassDecorator: `@Component({template: ''})`,
-             parentModuleDecorator: '@NgModule({declarations: [Base]})',
-             childClassDecorator: '',
-             childModuleDecorator: '@NgModule({declarations: [Extends]})',
-           }).then(fail, (e) => {
-             expect(e.message).toContain(
-                 'Class Extends in /app/main.ts extends from a Directive in another compilation unit without duplicating the decorator. ' +
-                 'Please add a Directive or Component decorator to the class.');
-           });
-         }));
+      it('should error if the child class has no matching decorator', () => {
+        expect(() => compileParentAndChild({
+                 parentClassDecorator: `@Component({template: ''})`,
+                 parentModuleDecorator: '@NgModule({declarations: [Base]})',
+                 childClassDecorator: '',
+                 childModuleDecorator: '@NgModule({declarations: [Extends]})',
+               }))
+            .toThrowError(
+                'Class Extends in /app/main.ts extends from a Directive in another compilation unit without duplicating the decorator. ' +
+                'Please add a Directive or Component decorator to the class.');
+      });
     });
 
     describe('Directive', () => {
-      it('should allow to inherit', async(() => {
-           compileParentAndChild({
-             parentClassDecorator: `@Directive({selector: '[someDir]'})`,
-             parentModuleDecorator: '@NgModule({declarations: [Base]})',
-             childClassDecorator: `@Directive({selector: '[someDir]'})`,
-             childModuleDecorator: '@NgModule({declarations: [Extends]})',
-           }).then((mainNgFactory) => { expect(mainNgFactory).toBeTruthy(); });
-         }));
+      it('should allow to inherit', () => {
+        const mainNgFactory = compileParentAndChild({
+          parentClassDecorator: `@Directive({selector: '[someDir]'})`,
+          parentModuleDecorator: '@NgModule({declarations: [Base]})',
+          childClassDecorator: `@Directive({selector: '[someDir]'})`,
+          childModuleDecorator: '@NgModule({declarations: [Extends]})',
+        });
+        expect(mainNgFactory).toBeTruthy();
+      });
 
-      it('should error if the child class has no matching decorator', async(() => {
-           compileParentAndChild({
-             parentClassDecorator: `@Directive({selector: '[someDir]'})`,
-             parentModuleDecorator: '@NgModule({declarations: [Base]})',
-             childClassDecorator: '',
-             childModuleDecorator: '@NgModule({declarations: [Extends]})',
-           }).then(fail, (e) => {
-             expect(e.message).toContain(
-                 'Class Extends in /app/main.ts extends from a Directive in another compilation unit without duplicating the decorator. ' +
-                 'Please add a Directive or Component decorator to the class.');
-           });
-         }));
+      it('should error if the child class has no matching decorator', () => {
+        expect(() => compileParentAndChild({
+                 parentClassDecorator: `@Directive({selector: '[someDir]'})`,
+                 parentModuleDecorator: '@NgModule({declarations: [Base]})',
+                 childClassDecorator: '',
+                 childModuleDecorator: '@NgModule({declarations: [Extends]})',
+               }))
+            .toThrowError(
+                'Class Extends in /app/main.ts extends from a Directive in another compilation unit without duplicating the decorator. ' +
+                'Please add a Directive or Component decorator to the class.');
+      });
     });
 
     describe('Pipe', () => {
-      it('should allow to inherit', async(() => {
-           compileParentAndChild({
-             parentClassDecorator: `@Pipe({name: 'somePipe'})`,
-             parentModuleDecorator: '@NgModule({declarations: [Base]})',
-             childClassDecorator: `@Pipe({name: 'somePipe'})`,
-             childModuleDecorator: '@NgModule({declarations: [Extends]})',
-           }).then((mainNgFactory) => { expect(mainNgFactory).toBeTruthy(); });
-         }));
+      it('should allow to inherit', () => {
+        const mainNgFactory = compileParentAndChild({
+          parentClassDecorator: `@Pipe({name: 'somePipe'})`,
+          parentModuleDecorator: '@NgModule({declarations: [Base]})',
+          childClassDecorator: `@Pipe({name: 'somePipe'})`,
+          childModuleDecorator: '@NgModule({declarations: [Extends]})',
+        });
+        expect(mainNgFactory).toBeTruthy();
+      });
 
-      it('should error if the child class has no matching decorator', async(() => {
-           compileParentAndChild({
-             parentClassDecorator: `@Pipe({name: 'somePipe'})`,
-             parentModuleDecorator: '@NgModule({declarations: [Base]})',
-             childClassDecorator: '',
-             childModuleDecorator: '@NgModule({declarations: [Extends]})',
-           }).then(fail, (e) => {
-             expect(e.message).toContain(
-                 'Class Extends in /app/main.ts extends from a Pipe in another compilation unit without duplicating the decorator. ' +
-                 'Please add a Pipe decorator to the class.');
-           });
-         }));
+      it('should error if the child class has no matching decorator', () => {
+        expect(() => compileParentAndChild({
+                 parentClassDecorator: `@Pipe({name: 'somePipe'})`,
+                 parentModuleDecorator: '@NgModule({declarations: [Base]})',
+                 childClassDecorator: '',
+                 childModuleDecorator: '@NgModule({declarations: [Extends]})',
+               }))
+            .toThrowError(
+                'Class Extends in /app/main.ts extends from a Pipe in another compilation unit without duplicating the decorator. ' +
+                'Please add a Pipe decorator to the class.');
+      });
     });
 
     describe('NgModule', () => {
-      it('should allow to inherit', async(() => {
-           compileParentAndChild({
-             parentClassDecorator: `@NgModule()`,
-             parentModuleDecorator: '',
-             childClassDecorator: `@NgModule()`,
-             childModuleDecorator: '',
-           }).then((mainNgFactory) => { expect(mainNgFactory).toBeTruthy(); });
-         }));
+      it('should allow to inherit', () => {
+        const mainNgFactory = compileParentAndChild({
+          parentClassDecorator: `@NgModule()`,
+          parentModuleDecorator: '',
+          childClassDecorator: `@NgModule()`,
+          childModuleDecorator: '',
+        });
+        expect(mainNgFactory).toBeTruthy();
+      });
 
-      it('should error if the child class has no matching decorator', async(() => {
-           compileParentAndChild({
-             parentClassDecorator: `@NgModule()`,
-             parentModuleDecorator: '',
-             childClassDecorator: '',
-             childModuleDecorator: '',
-           }).then(fail, (e) => {
-             expect(e.message).toContain(
-                 'Class Extends in /app/main.ts extends from a NgModule in another compilation unit without duplicating the decorator. ' +
-                 'Please add a NgModule decorator to the class.');
-           });
-         }));
+      it('should error if the child class has no matching decorator', () => {
+        expect(() => compileParentAndChild({
+                 parentClassDecorator: `@NgModule()`,
+                 parentModuleDecorator: '',
+                 childClassDecorator: '',
+                 childModuleDecorator: '',
+               }))
+            .toThrowError(
+                'Class Extends in /app/main.ts extends from a NgModule in another compilation unit without duplicating the decorator. ' +
+                'Please add a NgModule decorator to the class.');
+      });
     });
   });
 });
 
 describe('compiler (bundled Angular)', () => {
+  setup({compileAngular: false, compileAnimations: false});
+
   let angularFiles: Map<string, string>;
 
   beforeAll(() => {
@@ -681,34 +734,19 @@ describe('compiler (bundled Angular)', () => {
     const bundleIndexName = emittingHost.effectiveName('@angular/core/bundle_index.ts');
     const emittingProgram = ts.createProgram([bundleIndexName], settings, emittingHost);
     emittingProgram.emit();
-    angularFiles = emittingHost.written;
+    angularFiles = emittingHost.writtenAngularFiles();
   });
 
   describe('Quickstart', () => {
-    let host: MockCompilerHost;
-    let aotHost: MockAotCompilerHost;
-
-    beforeEach(() => {
-      host = new MockCompilerHost(QUICKSTART, FILES, angularFiles);
-      aotHost = new MockAotCompilerHost(host);
+    it('should compile', () => {
+      const {genFiles} = compile([QUICKSTART, angularFiles]);
+      expect(genFiles.find(f => /app\.component\.ngfactory\.ts/.test(f.genFileUrl))).toBeDefined();
+      expect(genFiles.find(f => /app\.module\.ngfactory\.ts/.test(f.genFileUrl))).toBeDefined();
     });
-
-    // Restore reflector since AoT compiler will update it with a new static reflector
-    afterEach(() => { reflector.updateCapabilities(new ReflectionCapabilities()); });
-
-    it('should compile',
-       async(() => compile(host, aotHost, expectNoDiagnostics).then(generatedFiles => {
-         expect(generatedFiles.find(f => /app\.component\.ngfactory\.ts/.test(f.genFileUrl)))
-             .toBeDefined();
-         expect(generatedFiles.find(f => /app\.module\.ngfactory\.ts/.test(f.genFileUrl)))
-             .toBeDefined();
-       })));
   });
 
   describe('Bundled library', () => {
-    let host: MockCompilerHost;
-    let aotHost: MockAotCompilerHost;
-    let libraryFiles: Map<string, string>;
+    let libraryFiles: MockDirectory;
 
     beforeAll(() => {
       // Emit the library bundle
@@ -728,135 +766,22 @@ describe('compiler (bundled Angular)', () => {
       // Emit the sources
       const emittingProgram = ts.createProgram(['/bolder/index.ts'], settings, emittingHost);
       emittingProgram.emit();
-      libraryFiles = emittingHost.written;
+      const libFiles = emittingHost.written;
 
       // Copy the .html file
       const htmlFileName = '/bolder/src/bolder.component.html';
-      libraryFiles.set(htmlFileName, emittingHost.readFile(htmlFileName));
+      libFiles.set(htmlFileName, emittingHost.readFile(htmlFileName));
+
+      libraryFiles = arrayToMockDir(toMockFileArray(libFiles).map(
+          ({fileName, content}) => ({fileName: `/node_modules${fileName}`, content})));
     });
 
-    beforeEach(() => {
-      host = new MockCompilerHost(
-          LIBRARY_USING_APP_MODULE, LIBRARY_USING_APP, angularFiles, [libraryFiles]);
-      aotHost = new MockAotCompilerHost(host);
-    });
-
-    it('should compile',
-       async(() => compile(host, aotHost, expectNoDiagnostics, expectNoDiagnostics)));
-
-    // Restore reflector since AoT compiler will update it with a new static reflector
-    afterEach(() => { reflector.updateCapabilities(new ReflectionCapabilities()); });
+    it('should compile', () => compile([LIBRARY_USING_APP, libraryFiles, angularFiles]));
   });
 });
 
-function expectNoDiagnostics(program: ts.Program) {
-  function fileInfo(diagnostic: ts.Diagnostic): string {
-    if (diagnostic.file) {
-      return `${diagnostic.file.fileName}(${diagnostic.start}): `;
-    }
-    return '';
-  }
 
-  function chars(len: number, ch: string): string { return new Array(len).fill(ch).join(''); }
-
-  function lineNoOf(offset: number, text: string): number {
-    let result = 1;
-    for (let i = 0; i < offset; i++) {
-      if (text[i] == '\n') result++;
-    }
-    return result;
-  }
-
-  function lineInfo(diagnostic: ts.Diagnostic): string {
-    if (diagnostic.file) {
-      const start = diagnostic.start;
-      let end = diagnostic.start + diagnostic.length;
-      const source = diagnostic.file.text;
-      let lineStart = start;
-      let lineEnd = end;
-      while (lineStart > 0 && source[lineStart] != '\n') lineStart--;
-      if (lineStart < start) lineStart++;
-      while (lineEnd < source.length && source[lineEnd] != '\n') lineEnd++;
-      let line = source.substring(lineStart, lineEnd);
-      const lineIndex = line.indexOf('/n');
-      if (lineIndex > 0) {
-        line = line.substr(0, lineIndex);
-        end = start + lineIndex;
-      }
-      const lineNo = lineNoOf(start, source) + ': ';
-      return '\n' + lineNo + line + '\n' + chars(start - lineStart + lineNo.length, ' ') +
-          chars(end - start, '^');
-    }
-    return '';
-  }
-
-  function expectNoDiagnostics(diagnostics: ts.Diagnostic[]) {
-    if (diagnostics && diagnostics.length) {
-      throw new Error(
-          'Errors from TypeScript:\n' +
-          diagnostics.map(d => `${fileInfo(d)}${d.messageText}${lineInfo(d)}`).join(' \n'));
-    }
-  }
-  expectNoDiagnostics(program.getOptionsDiagnostics());
-  expectNoDiagnostics(program.getSyntacticDiagnostics());
-  expectNoDiagnostics(program.getSemanticDiagnostics());
-}
-
-function expectNoDiagnosticsAndEmit(program: ts.Program) {
-  expectNoDiagnostics(program);
-  program.emit();
-}
-
-function isDTS(fileName: string): boolean {
-  return /\.d\.ts$/.test(fileName);
-}
-
-function isSource(fileName: string): boolean {
-  return /\.ts$/.test(fileName);
-}
-
-function isFactory(fileName: string): boolean {
-  return /\.ngfactory\./.test(fileName);
-}
-
-function summaryCompile(
-    host: MockCompilerHost, aotHost: MockAotCompilerHost,
-    preCompile?: (program: ts.Program) => void) {
-  // First compile the program to generate the summary files.
-  return compile(host, aotHost).then(generatedFiles => {
-    // Remove generated files that were not generated from a DTS file
-    host.remove(generatedFiles.filter(f => !isDTS(f.srcFileUrl)).map(f => f.genFileUrl));
-
-    // Next compile the program shrowding metadata and only treating .ts files as source.
-    aotHost.hideMetadata();
-    aotHost.tsFilesOnly();
-
-    return compile(host, aotHost);
-  });
-}
-
-function compile(
-    host: MockCompilerHost, aotHost: AotCompilerHost, preCompile?: (program: ts.Program) => void,
-    postCompile: (program: ts.Program) => void = expectNoDiagnostics,
-    options: AotCompilerOptions = {}): Promise<GeneratedFile[]> {
-  const scripts = host.scriptNames.slice(0);
-  const program = ts.createProgram(scripts, settings, host);
-  if (preCompile) preCompile(program);
-  const {compiler, reflector} = createAotCompiler(aotHost, options);
-  return compiler.compileAll(program.getSourceFiles().map(sf => sf.fileName))
-      .then(generatedFiles => {
-        generatedFiles.forEach(
-            file => isSource(file.genFileUrl) ? host.addScript(file.genFileUrl, file.source) :
-                                                host.override(file.genFileUrl, file.source));
-        const scripts = host.scriptNames.slice(0);
-        const newProgram = ts.createProgram(scripts, settings, host);
-        if (postCompile) postCompile(newProgram);
-        return generatedFiles;
-      });
-}
-
-const QUICKSTART = ['/quickstart/app/app.module.ts'];
-const FILES: MockData = {
+const QUICKSTART: MockDirectory = {
   quickstart: {
     app: {
       'app.component.ts': `
@@ -891,7 +816,7 @@ const FILES: MockData = {
   }
 };
 
-const LIBRARY: MockData = {
+const LIBRARY: MockDirectory = {
   bolder: {
     'public-api.ts': `
       export * from './src/bolder.component';
@@ -926,8 +851,7 @@ const LIBRARY: MockData = {
   }
 };
 
-const LIBRARY_USING_APP_MODULE = ['/lib-user/app/app.module.ts'];
-const LIBRARY_USING_APP: MockData = {
+const LIBRARY_USING_APP: MockDirectory = {
   'lib-user': {
     app: {
       'app.component.ts': `
@@ -956,8 +880,3 @@ const LIBRARY_USING_APP: MockData = {
     }
   }
 };
-
-function expectPromiseToThrow(p: Promise<any>, msg: RegExp) {
-  p.then(
-      () => { throw new Error('Expected to throw'); }, (e) => { expect(e.message).toMatch(msg); });
-}
diff --git a/packages/compiler/test/aot/emit_stubs_spec.ts b/packages/compiler/test/aot/emit_stubs_spec.ts
new file mode 100644
index 0000000000..0f6513a297
--- /dev/null
+++ b/packages/compiler/test/aot/emit_stubs_spec.ts
@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {MockDirectory, compile, expectNoDiagnostics, setup, toMockFileArray} from './test_util';
+
+describe('aot stubs', () => {
+  let angularFiles = setup();
+
+  it('should create empty .ngfactory and .ngsummary files for every source file', () => {
+    const appDir = {'app.ts': `export const x = 1;`};
+    const rootDir = {'app': appDir};
+    const {genFiles} = compile(
+        [rootDir, angularFiles],
+        {postCompile: expectNoDiagnostics, stubsOnly: true, enableSummariesForJit: true});
+    expect(genFiles.find((f) => f.genFileUrl === '/app/app.ngfactory.ts')).toBeTruthy();
+    expect(genFiles.find((f) => f.genFileUrl === '/app/app.ngsummary.ts')).toBeTruthy();
+  });
+
+  it('should create empty .ngstyle files for imported css files', () => {
+    const appDir = {
+      'app.ts': `
+        import {Component, NgModule} from '@angular/core';
+
+        @Component({
+          template: '',
+          styleUrls: ['./style.css']
+        })
+        export class MyComp {}
+
+        @NgModule({
+          declarations: [MyComp]
+        })
+        export class MyModule {}
+        export const x = 1;
+      `,
+      'style.css': ''
+    };
+    const rootDir = {'app': appDir};
+    const {genFiles} =
+        compile([rootDir, angularFiles], {postCompile: expectNoDiagnostics, stubsOnly: true});
+    expect(genFiles.find((f) => f.genFileUrl === '/app/style.css.shim.ngstyle.ts')).toBeTruthy();
+  });
+
+  it('should create stub exports for NgModules of the right type', () => {
+    const appDir = {
+      'app.module.ts': `
+        import { NgModule } from '@angular/core';
+
+        @NgModule()
+        export class MyModule {}
+      `,
+      'app.boot.ts': `
+        import {NgModuleFactory} from '@angular/core';
+        import {MyModuleNgFactory} from './app.module.ngfactory';
+        import {MyModuleNgSummary} from './app.module.ngsummary';
+        import {MyModule} from './app.module';
+
+        export const factory: NgModuleFactory<MyModule> = MyModuleNgFactory;
+        export const summary: () => any[] = MyModuleNgSummary;
+      `
+    };
+    const rootDir = {'app': appDir};
+    compile(
+        [rootDir, angularFiles],
+        {postCompile: expectNoDiagnostics, stubsOnly: true, enableSummariesForJit: true});
+  });
+});
diff --git a/packages/compiler/test/aot/jit_summaries_spec.ts b/packages/compiler/test/aot/jit_summaries_spec.ts
new file mode 100644
index 0000000000..0bf7643a61
--- /dev/null
+++ b/packages/compiler/test/aot/jit_summaries_spec.ts
@@ -0,0 +1,343 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {AotCompiler, AotCompilerHost, AotCompilerOptions, CompileSummaryKind, GeneratedFile, toTypeScript} from '@angular/compiler';
+
+import {MockDirectory, compile, setup} from './test_util';
+
+describe('aot summaries for jit', () => {
+  let angularFiles = setup();
+
+  function compileApp(rootDir: MockDirectory, options: {useSummaries?: boolean} = {}):
+      {genFiles: GeneratedFile[], outDir: MockDirectory} {
+    return compile([rootDir, angularFiles], {...options, enableSummariesForJit: true});
+  }
+
+  it('should create @Injectable summaries', () => {
+    const appDir = {
+      'app.module.ts': `
+        import { Injectable } from '@angular/core';
+
+        export class Dep {}
+
+        @Injectable()
+        export class MyService {
+          constructor(d: Dep) {}
+        }
+      `
+    };
+    const rootDir = {'app': appDir};
+
+    const genFile =
+        compileApp(rootDir).genFiles.find(f => f.genFileUrl === '/app/app.module.ngsummary.ts');
+    const genSource = toTypeScript(genFile);
+
+    expect(genSource).toContain(`import * as i0 from '/app/app.module'`);
+    expect(genSource).toContain('export function MyServiceNgSummary()');
+    // Note: CompileSummaryKind.Injectable = 3
+    expect(genSource).toMatch(/summaryKind:3,\s*type:\{\s*reference:i0.MyService/);
+    expect(genSource).toContain('token:{identifier:{reference:i0.Dep}}');
+  });
+
+  it('should create @Pipe summaries', () => {
+    const appDir = {
+      'app.module.ts': `
+        import { Pipe, NgModule } from '@angular/core';
+
+        export class Dep {}
+
+        @Pipe({name: 'myPipe'})
+        export class MyPipe {
+          constructor(d: Dep) {}
+        }
+
+        @NgModule({declarations: [MyPipe]})
+        export class MyModule {}
+      `
+    };
+    const rootDir = {'app': appDir};
+
+    const genFile =
+        compileApp(rootDir).genFiles.find(f => f.genFileUrl === '/app/app.module.ngsummary.ts');
+    const genSource = toTypeScript(genFile);
+
+    expect(genSource).toContain(`import * as i0 from '/app/app.module'`);
+    expect(genSource).toContain('export function MyPipeNgSummary()');
+    // Note: CompileSummaryKind.Pipe = 1
+    expect(genSource).toMatch(/summaryKind:0,\s*type:\{\s*reference:i0.MyPipe/);
+    expect(genSource).toContain('token:{identifier:{reference:i0.Dep}}');
+  });
+
+  it('should create @Directive summaries', () => {
+    const appDir = {
+      'app.module.ts': `
+        import { Directive, NgModule } from '@angular/core';
+
+        export class Dep {}
+
+        @Directive({selector: '[myDir]'})
+        export class MyDirective {
+          constructor(a: Dep) {}
+        }
+
+        @NgModule({declarations: [MyDirective]})
+        export class MyModule {}
+      `
+    };
+    const rootDir = {'app': appDir};
+
+    const genFile =
+        compileApp(rootDir).genFiles.find(f => f.genFileUrl === '/app/app.module.ngsummary.ts');
+    const genSource = toTypeScript(genFile);
+
+    expect(genSource).toContain(`import * as i0 from '/app/app.module'`);
+    expect(genSource).toContain('export function MyDirectiveNgSummary()');
+    // Note: CompileSummaryKind.Directive = 1
+    expect(genSource).toMatch(/summaryKind:1,\s*type:\{\s*reference:i0.MyDirective/);
+    expect(genSource).toContain('token:{identifier:{reference:i0.Dep}}');
+  });
+
+  it('should create @NgModule summaries', () => {
+    const appDir = {
+      'app.module.ts': `
+        import { NgModule } from '@angular/core';
+
+        export class Dep {}
+
+        @NgModule()
+        export class MyModule {
+          constructor(d: Dep) {}
+        }
+      `
+    };
+    const rootDir = {'app': appDir};
+
+    const genFile =
+        compileApp(rootDir).genFiles.find(f => f.genFileUrl === '/app/app.module.ngsummary.ts');
+    const genSource = toTypeScript(genFile);
+
+    expect(genSource).toContain(`import * as i0 from '/app/app.module'`);
+    expect(genSource).toContain('export function MyModuleNgSummary()');
+    // Note: CompileSummaryKind.NgModule = 2
+    expect(genSource).toMatch(/summaryKind:2,\s*type:\{\s*reference:i0.MyModule/);
+    expect(genSource).toContain('token:{identifier:{reference:i0.Dep}}');
+  });
+
+  it('should embed useClass provider summaries in @Directive summaries', () => {
+    const appDir = {
+      'app.service.ts': `
+        import { Injectable } from '@angular/core';
+
+        export class Dep {}
+
+        @Injectable()
+        export class MyService {
+          constructor(d: Dep) {}
+        }
+      `,
+      'app.module.ts': `
+        import { Directive, NgModule } from '@angular/core';
+        import { MyService } from './app.service';
+
+        @Directive({
+          selector: '[myDir]',
+          providers: [MyService]
+        })
+        export class MyDirective {}
+
+        @NgModule({declarations: [MyDirective]})
+        export class MyModule {}
+      `
+    };
+    const rootDir = {'app': appDir};
+
+    const genFile =
+        compileApp(rootDir).genFiles.find(f => f.genFileUrl === '/app/app.module.ngsummary.ts');
+    const genSource = toTypeScript(genFile);
+
+    expect(genSource).toMatch(/useClass:\{\s*reference:i1.MyService/);
+    // Note: CompileSummaryKind.Injectable = 3
+    expect(genSource).toMatch(/summaryKind:3,\s*type:\{\s*reference:i1.MyService/);
+    expect(genSource).toContain('token:{identifier:{reference:i1.Dep}}');
+  });
+
+  it('should embed useClass provider summaries into @NgModule summaries', () => {
+    const appDir = {
+      'app.service.ts': `
+        import { Injectable } from '@angular/core';
+
+        export class Dep {}
+
+        @Injectable()
+        export class MyService {
+          constructor(d: Dep) {}
+        }
+      `,
+      'app.module.ts': `
+        import { NgModule } from '@angular/core';
+        import { MyService } from './app.service';
+
+        @NgModule({
+          providers: [MyService]
+        })
+        export class MyModule {}
+      `
+    };
+    const rootDir = {'app': appDir};
+
+    const genFile =
+        compileApp(rootDir).genFiles.find(f => f.genFileUrl === '/app/app.module.ngsummary.ts');
+    const genSource = toTypeScript(genFile);
+
+    expect(genSource).toMatch(/useClass:\{\s*reference:i1.MyService/);
+    // Note: CompileSummaryKind.Injectable = 3
+    expect(genSource).toMatch(/summaryKind:3,\s*type:\{\s*reference:i1.MyService/);
+    expect(genSource).toContain('token:{identifier:{reference:i1.Dep}}');
+  });
+
+  it('should reference declared @Directive and @Pipe summaries in @NgModule summaries', () => {
+    const appDir = {
+      'app.module.ts': `
+        import { Directive, Pipe, NgModule } from '@angular/core';
+
+        @Directive({selector: '[myDir]'})
+        export class MyDirective {}
+
+        @Pipe({name: 'myPipe'})
+        export class MyPipe {}
+
+        @NgModule({declarations: [MyDirective, MyPipe]})
+        export class MyModule {}
+      `
+    };
+    const rootDir = {'app': appDir};
+
+    const genFile =
+        compileApp(rootDir).genFiles.find(f => f.genFileUrl === '/app/app.module.ngsummary.ts');
+    const genSource = toTypeScript(genFile);
+
+    expect(genSource).toMatch(
+        /export function MyModuleNgSummary()[^;]*,\s*MyDirectiveNgSummary,\s*MyPipeNgSummary\s*\]\s*;/);
+  });
+
+  it('should reference imported @NgModule summaries in @NgModule summaries', () => {
+    const appDir = {
+      'app.module.ts': `
+        import { NgModule } from '@angular/core';
+
+        @NgModule()
+        export class MyImportedModule {}
+
+        @NgModule({imports: [MyImportedModule]})
+        export class MyModule {}
+      `
+    };
+    const rootDir = {'app': appDir};
+
+    const genFile =
+        compileApp(rootDir).genFiles.find(f => f.genFileUrl === '/app/app.module.ngsummary.ts');
+    const genSource = toTypeScript(genFile);
+
+    expect(genSource).toMatch(
+        /export function MyModuleNgSummary()[^;]*,\s*MyImportedModuleNgSummary\s*\]\s*;/);
+  });
+
+  it('should create and use reexports for imported NgModules ' +
+         'accross compilation units',
+     () => {
+       const lib1In = {
+         'lib1': {
+           'module.ts': `
+          import { NgModule } from '@angular/core';
+
+          @NgModule()
+          export class Lib1Module {}
+        `,
+           'reexport.ts': `
+          import { NgModule } from '@angular/core';
+
+          @NgModule()
+          export class ReexportModule {}
+
+          export const reexports: any[] = [ ReexportModule ];
+        `,
+         }
+       };
+       const {outDir: lib2In, genFiles: lib1Gen} = compileApp(lib1In, {useSummaries: true});
+
+       lib2In['lib2'] = {
+         'module.ts': `
+          import { NgModule } from '@angular/core';
+          import { Lib1Module } from '../lib1/module';
+
+          @NgModule({
+            imports: [Lib1Module]
+          })
+          export class Lib2Module {}
+        `,
+         'reexport.ts': `
+        import { reexports as reexports_lib1 } from '../lib1/reexport';
+        export const reexports: any[] = [ reexports_lib1 ];
+        `,
+       };
+       const {outDir: lib3In, genFiles: lib2Gen} = compileApp(lib2In, {useSummaries: true});
+
+       const lib2ModuleNgSummary = lib2Gen.find(f => f.genFileUrl === '/lib2/module.ngsummary.ts');
+       const lib2ReexportNgSummary =
+           lib2Gen.find(f => f.genFileUrl === '/lib2/reexport.ngsummary.ts');
+
+       // ngsummaries should add reexports for imported NgModules from a direct dependency
+       expect(toTypeScript(lib2ModuleNgSummary))
+           .toContain(
+               `export {Lib1ModuleNgSummary as Lib1Module_1NgSummary} from '/lib1/module.ngsummary'`);
+       // ngsummaries should add reexports for reexported values from a direct dependency
+       expect(toTypeScript(lib2ReexportNgSummary))
+           .toContain(
+               `export {ReexportModuleNgSummary as ReexportModule_2NgSummary} from '/lib1/reexport.ngsummary'`);
+
+       lib3In['lib3'] = {
+         'module.ts': `
+          import { NgModule } from '@angular/core';
+          import { Lib2Module } from '../lib2/module';
+          import { reexports } from '../lib2/reexport';
+
+          @NgModule({
+            imports: [Lib2Module, reexports]
+          })
+          export class Lib3Module {}
+        `,
+         'reexport.ts': `
+        import { reexports as reexports_lib2 } from '../lib2/reexport';
+        export const reexports: any[] = [ reexports_lib2 ];
+        `,
+       };
+
+       const lib3Gen = compileApp(lib3In, {useSummaries: true}).genFiles;
+       const lib3ModuleNgSummary = lib3Gen.find(f => f.genFileUrl === '/lib3/module.ngsummary.ts');
+       const lib3ReexportNgSummary =
+           lib3Gen.find(f => f.genFileUrl === '/lib3/reexport.ngsummary.ts');
+
+       // ngsummary.ts files should use the reexported values from direct and deep deps
+       const lib3ModuleNgSummarySource = toTypeScript(lib3ModuleNgSummary);
+       expect(lib3ModuleNgSummarySource).toContain(`import * as i4 from '/lib2/module.ngsummary'`);
+       expect(lib3ModuleNgSummarySource)
+           .toContain(`import * as i5 from '/lib2/reexport.ngsummary'`);
+       expect(lib3ModuleNgSummarySource)
+           .toMatch(
+               /export function Lib3ModuleNgSummary()[^;]*,\s*i4.Lib1Module_1NgSummary,\s*i4.Lib2ModuleNgSummary,\s*i5.ReexportModule_2NgSummary\s*\]\s*;/);
+
+       // ngsummaries should add reexports for imported NgModules from a deep dependency
+       expect(lib3ModuleNgSummarySource)
+           .toContain(
+               `export {Lib1Module_1NgSummary as Lib1Module_1NgSummary,Lib2ModuleNgSummary as Lib2Module_2NgSummary} from '/lib2/module.ngsummary'`);
+       // ngsummaries should add reexports for reexported values from a deep dependency
+       expect(toTypeScript(lib3ReexportNgSummary))
+           .toContain(
+               `export {ReexportModule_2NgSummary as ReexportModule_3NgSummary} from '/lib2/reexport.ngsummary'`);
+     });
+});
diff --git a/packages/compiler/test/aot/regression_spec.ts b/packages/compiler/test/aot/regression_spec.ts
new file mode 100644
index 0000000000..8c768559a1
--- /dev/null
+++ b/packages/compiler/test/aot/regression_spec.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {MockDirectory, compile, expectNoDiagnostics, setup} from './test_util';
+
+describe('regressions', () => {
+  let angularFiles = setup();
+
+  it('should compile components with empty templates', () => {
+    const appDir = {
+      'app.module.ts': `
+        import { Component, NgModule } from '@angular/core';
+
+        @Component({template: ''})
+        export class EmptyComp {}
+
+        @NgModule({declarations: [EmptyComp]})
+        export class MyModule {}
+      `
+    };
+    const rootDir = {'app': appDir};
+    const {genFiles} = compile(
+        [rootDir, angularFiles], {postCompile: expectNoDiagnostics},
+        {noUnusedLocals: true, noUnusedParameters: true});
+    expect(genFiles.find((f) => f.genFileUrl === '/app/app.module.ngfactory.ts')).toBeTruthy();
+  });
+});
diff --git a/packages/compiler/test/aot/static_reflector_spec.ts b/packages/compiler/test/aot/static_reflector_spec.ts
index dd6fc683b3..8d72f75166 100644
--- a/packages/compiler/test/aot/static_reflector_spec.ts
+++ b/packages/compiler/test/aot/static_reflector_spec.ts
@@ -546,6 +546,72 @@ describe('StaticReflector', () => {
     expect(annotation.providers).toEqual([1, 2, 3, 4, 5, 6, 7]);
   });
 
+  it('should ignore unresolved calls', () => {
+    const data = Object.create(DEFAULT_TEST_DATA);
+    const file = '/tmp/src/invalid-component.ts';
+    data[file] = `
+        import {Component} from '@angular/core';
+        import {unknown} from 'unresolved';
+
+        @Component({
+          selector: 'tmp',
+          template: () => {},
+          providers: [triggers()]
+        })
+        export class BadComponent {
+
+        }
+      `;
+    init(data, [], () => {}, {verboseInvalidExpression: true});
+
+    const badComponent = reflector.getStaticSymbol(file, 'BadComponent');
+    const annotations = reflector.annotations(badComponent);
+    const annotation = annotations[0];
+    expect(annotation.providers).toEqual([]);
+  });
+
+  // #15424
+  it('should be able to inject a ctor parameter with a @Inject and a type expression', () => {
+    const data = Object.create(DEFAULT_TEST_DATA);
+    const file = '/tmp/src/invalid-component.ts';
+    data[file] = `
+        import {Injectable, Inject} from '@angular/core';
+
+        @Injectable()
+        export class SomeClass {
+          constructor (@Inject('some-token') a: {a: string, b: string}) {}
+        }
+      `;
+    init(data);
+
+    const someClass = reflector.getStaticSymbol(file, 'SomeClass');
+    const parameters = reflector.parameters(someClass);
+    expect(parameters.toString()).toEqual('@Inject');
+  });
+
+  it('should reject a ctor parameter without a @Inject and a type exprssion', () => {
+    const data = Object.create(DEFAULT_TEST_DATA);
+    const file = '/tmp/src/invalid-component.ts';
+    data[file] = `
+        import {Injectable} from '@angular/core';
+
+        @Injectable()
+        export class SomeClass {
+          constructor (a: {a: string, b: string}) {}
+        }
+      `;
+
+    let error: any = undefined;
+    init(data, [], (err: any, filePath: string) => {
+      expect(error).toBeUndefined();
+      error = err;
+    });
+
+    const someClass = reflector.getStaticSymbol(file, 'SomeClass');
+    expect(reflector.parameters(someClass)).toEqual([[]]);
+    expect(error).toBeUndefined();
+  });
+
   describe('inheritance', () => {
     class ClassDecorator {
       constructor(public value: any) {}
@@ -779,6 +845,33 @@ describe('StaticReflector', () => {
     });
   });
 
+  describe('expression lowering', () => {
+    it('should be able to accept a lambda in a reference location', () => {
+      const data = Object.create(DEFAULT_TEST_DATA);
+      const file = '/tmp/src/my_component.ts';
+      data[file] = `
+        import {Component, InjectionToken} from '@angular/core';
+
+        export const myLambda = () => [1, 2, 3];
+        export const NUMBERS = new InjectionToken<number[]>();
+
+        @Component({
+          template: '<div>{{name}}</div>',
+          providers: [{provide: NUMBERS, useFactory: myLambda}]
+        })
+        export class MyComponent {
+          name = 'Some name';
+        }
+      `;
+      init(data);
+
+      expect(reflector.annotations(reflector.getStaticSymbol(file, 'MyComponent'))[0]
+                 .providers[0]
+                 .useFactory)
+          .toBe(reflector.getStaticSymbol(file, 'myLambda'));
+    });
+  });
+
 });
 
 const DEFAULT_TEST_DATA: {[key: string]: any} = {
diff --git a/packages/compiler/test/aot/static_symbol_resolver_spec.ts b/packages/compiler/test/aot/static_symbol_resolver_spec.ts
index 9adfc0ebdf..eba341aac7 100644
--- a/packages/compiler/test/aot/static_symbol_resolver_spec.ts
+++ b/packages/compiler/test/aot/static_symbol_resolver_spec.ts
@@ -372,7 +372,7 @@ export class MockSummaryResolver implements SummaryResolver<StaticSymbol> {
     symbol: StaticSymbol,
     importAs: StaticSymbol
   }[] = []) {}
-
+  addSummary(summary: Summary<StaticSymbol>) { this.summaries.push(summary); };
   resolveSummary(reference: StaticSymbol): Summary<StaticSymbol> {
     return this.summaries.find(summary => summary.symbol === reference);
   };
@@ -436,9 +436,16 @@ export class MockStaticSymbolResolverHost implements StaticSymbolResolverHost {
       }
       return baseName + '.d.ts';
     }
+    if (modulePath == 'unresolved') {
+      return undefined !;
+    }
     return '/tmp/' + modulePath + '.d.ts';
   }
 
+  fileNameToModuleName(filePath: string, containingFile: string) {
+    return filePath.replace(/(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/, '');
+  }
+
   getMetadataFor(moduleId: string): any { return this._getMetadataFor(moduleId); }
 
   private _getMetadataFor(filePath: string): any {
@@ -449,8 +456,13 @@ export class MockStaticSymbolResolverHost implements StaticSymbolResolverHost {
             filePath, this.data[filePath], ts.ScriptTarget.ES5, /* setParentNodes */ true);
         const diagnostics: ts.Diagnostic[] = (<any>sf).parseDiagnostics;
         if (diagnostics && diagnostics.length) {
-          const errors = diagnostics.map(d => `(${d.start}-${d.start+d.length}): ${d.messageText}`)
-                             .join('\n   ');
+          const errors =
+              diagnostics
+                  .map(d => {
+                    const {line, character} = ts.getLineAndCharacterOfPosition(d.file, d.start);
+                    return `(${line}:${character}): ${d.messageText}`;
+                  })
+                  .join('\n');
           throw Error(`Error encountered during parse of file ${filePath}\n${errors}`);
         }
         return [this.collector.getMetadata(sf)];
diff --git a/packages/compiler/test/aot/summary_resolver_spec.ts b/packages/compiler/test/aot/summary_resolver_spec.ts
index d24d499933..60681bb609 100644
--- a/packages/compiler/test/aot/summary_resolver_spec.ts
+++ b/packages/compiler/test/aot/summary_resolver_spec.ts
@@ -8,6 +8,8 @@
 
 import {AotSummaryResolver, AotSummaryResolverHost, CompileSummaryKind, CompileTypeSummary, ResolvedStaticSymbol, StaticSymbol, StaticSymbolCache, StaticSymbolResolver} from '@angular/compiler';
 import {deserializeSummaries, serializeSummaries} from '@angular/compiler/src/aot/summary_serializer';
+import * as o from '@angular/compiler/src/output/output_ast';
+import {OutputContext} from '@angular/compiler/src/util';
 import * as path from 'path';
 
 import {MockStaticSymbolResolverHost, MockSummaryResolver} from './static_symbol_resolver_spec';
@@ -27,17 +29,19 @@ export function main() {
       summaryResolver = new AotSummaryResolver(host, symbolCache);
     }
 
-    function serialize(symbols: ResolvedStaticSymbol[], types: CompileTypeSummary[]): string {
+    function serialize(symbols: ResolvedStaticSymbol[]): string {
       // Note: Don't use the top level host / summaryResolver as they might not be created yet
       const mockSummaryResolver = new MockSummaryResolver([]);
       const symbolResolver = new StaticSymbolResolver(
           new MockStaticSymbolResolverHost({}), symbolCache, mockSummaryResolver);
-      return serializeSummaries(mockSummaryResolver, symbolResolver, symbols, types).json;
+      return serializeSummaries(
+                 createMockOutputContext(), mockSummaryResolver, symbolResolver, symbols, [])
+          .json;
     }
 
     it('should load serialized summary files', () => {
       const asymbol = symbolCache.get('/a.d.ts', 'a');
-      init({'/a.ngsummary.json': serialize([{symbol: asymbol, metadata: 1}], [])});
+      init({'/a.ngsummary.json': serialize([{symbol: asymbol, metadata: 1}])});
       expect(summaryResolver.resolveSummary(asymbol)).toEqual({symbol: asymbol, metadata: 1});
     });
 
@@ -51,13 +55,13 @@ export function main() {
 
     it('should cache summaries', () => {
       const asymbol = symbolCache.get('/a.d.ts', 'a');
-      init({'/a.ngsummary.json': serialize([{symbol: asymbol, metadata: 1}], [])});
+      init({'/a.ngsummary.json': serialize([{symbol: asymbol, metadata: 1}])});
       expect(summaryResolver.resolveSummary(asymbol)).toBe(summaryResolver.resolveSummary(asymbol));
     });
 
     it('should return all symbols in a summary', () => {
       const asymbol = symbolCache.get('/a.d.ts', 'a');
-      init({'/a.ngsummary.json': serialize([{symbol: asymbol, metadata: 1}], [])});
+      init({'/a.ngsummary.json': serialize([{symbol: asymbol, metadata: 1}])});
       expect(summaryResolver.getSymbolsOf('/a.d.ts')).toEqual([asymbol]);
     });
 
@@ -66,13 +70,13 @@ export function main() {
       const srcSymbol = symbolCache.get('/src.ts', 'Src');
       init({
         '/src.ngsummary.json':
-            serialize([{symbol: srcSymbol, metadata: 1}, {symbol: libSymbol, metadata: 2}], [])
+            serialize([{symbol: srcSymbol, metadata: 1}, {symbol: libSymbol, metadata: 2}])
       });
       summaryResolver.getSymbolsOf('/src.d.ts');
 
       expect(summaryResolver.getImportAs(symbolCache.get('/src.d.ts', 'Src'))).toBeFalsy();
       expect(summaryResolver.getImportAs(libSymbol))
-          .toBe(symbolCache.get('/src.ngfactory.ts', 'Lib_1'));
+          .toBe(symbolCache.get('/src.ngfactory.d.ts', 'Lib_1'));
     });
 
     describe('isLibraryFile', () => {
@@ -108,4 +112,8 @@ export class MockAotSummaryResolverHost implements AotSummaryResolverHost {
   isSourceFile(filePath: string) { return !filePath.endsWith('.d.ts'); }
 
   loadSummary(filePath: string): string { return this.summaries[filePath]; }
+}
+
+export function createMockOutputContext(): OutputContext {
+  return {statements: [], genFilePath: 'someGenFilePath', importExpr: () => o.NULL_EXPR};
 }
\ No newline at end of file
diff --git a/packages/compiler/test/aot/summary_serializer_spec.ts b/packages/compiler/test/aot/summary_serializer_spec.ts
index 3d6d1ec9b2..6a177df793 100644
--- a/packages/compiler/test/aot/summary_serializer_spec.ts
+++ b/packages/compiler/test/aot/summary_serializer_spec.ts
@@ -11,7 +11,7 @@ import {deserializeSummaries, serializeSummaries} from '@angular/compiler/src/ao
 import {summaryFileName} from '@angular/compiler/src/aot/util';
 
 import {MockStaticSymbolResolverHost} from './static_symbol_resolver_spec';
-import {MockAotSummaryResolverHost} from './summary_resolver_spec';
+import {MockAotSummaryResolverHost, createMockOutputContext} from './summary_resolver_spec';
 
 
 export function main() {
@@ -43,7 +43,7 @@ export function main() {
     it('should serialize various data correctly', () => {
       init();
       const serializedData = serializeSummaries(
-          summaryResolver, symbolResolver,
+          createMockOutputContext(), summaryResolver, symbolResolver,
           [
             {
               symbol: symbolCache.get('/tmp/some_values.ts', 'Values'),
@@ -66,11 +66,14 @@ export function main() {
               }
             }
           ],
-          [<any>{
-            summaryKind: CompileSummaryKind.Injectable,
-            type: {
-              reference: symbolCache.get('/tmp/some_service.ts', 'SomeService'),
-            }
+          [{
+            summary: {
+              summaryKind: CompileSummaryKind.Injectable,
+              type: {
+                reference: symbolCache.get('/tmp/some_service.ts', 'SomeService'),
+              }
+            } as any,
+            metadata: null as any
           }]);
 
 
@@ -102,36 +105,50 @@ export function main() {
     it('should automatically add exported directives / pipes of NgModules that are not source files',
        () => {
          init();
-         const externalSerialized = serializeSummaries(summaryResolver, symbolResolver, [], [
-           <any>{
-             summaryKind: CompileSummaryKind.Pipe,
-             type: {
-               reference: symbolCache.get('/tmp/external.ts', 'SomeExternalPipe'),
-             }
-           },
-           <any>{
-             summaryKind: CompileSummaryKind.Directive,
-             type: {
-               reference: symbolCache.get('/tmp/external.ts', 'SomeExternalDir'),
-             }
-           }
-         ]);
+         const externalSerialized =
+             serializeSummaries(createMockOutputContext(), summaryResolver, symbolResolver, [], [
+               {
+                 summary: {
+                   summaryKind: CompileSummaryKind.Pipe,
+                   type: {
+                     reference: symbolCache.get('/tmp/external.ts', 'SomeExternalPipe'),
+                   }
+                 } as any,
+                 metadata: null as any
+               },
+               {
+                 summary: {
+                   summaryKind: CompileSummaryKind.Directive,
+                   type: {
+                     reference: symbolCache.get('/tmp/external.ts', 'SomeExternalDir'),
+                   },
+                   providers: [],
+                   viewProviders: [],
+                 } as any,
+                 metadata: null as any
+               }
+             ]);
          init({
            '/tmp/external.ngsummary.json': externalSerialized.json,
          });
 
          const serialized = serializeSummaries(
-             summaryResolver, symbolResolver, [], [<any>{
-               summaryKind: CompileSummaryKind.NgModule,
-               type: {reference: symbolCache.get('/tmp/some_module.ts', 'SomeModule')},
-               exportedPipes: [
-                 {reference: symbolCache.get('/tmp/some_pipe.ts', 'SomePipe')},
-                 {reference: symbolCache.get('/tmp/external.d.ts', 'SomeExternalPipe')}
-               ],
-               exportedDirectives: [
-                 {reference: symbolCache.get('/tmp/some_dir.ts', 'SomeDir')},
-                 {reference: symbolCache.get('/tmp/external.d.ts', 'SomeExternalDir')}
-               ]
+             createMockOutputContext(), summaryResolver, symbolResolver, [], [{
+               summary: <any>{
+                 summaryKind: CompileSummaryKind.NgModule,
+                 type: {reference: symbolCache.get('/tmp/some_module.ts', 'SomeModule')},
+                 exportedPipes: [
+                   {reference: symbolCache.get('/tmp/some_pipe.ts', 'SomePipe')},
+                   {reference: symbolCache.get('/tmp/external.d.ts', 'SomeExternalPipe')}
+                 ],
+                 exportedDirectives: [
+                   {reference: symbolCache.get('/tmp/some_dir.ts', 'SomeDir')},
+                   {reference: symbolCache.get('/tmp/external.d.ts', 'SomeExternalDir')}
+                 ],
+                 providers: [],
+                 modules: [],
+               },
+               metadata: null as any
              }]);
 
          const summaries = deserializeSummaries(symbolCache, serialized.json).summaries;
@@ -146,7 +163,7 @@ export function main() {
        () => {
          init();
          const externalSerialized = serializeSummaries(
-             summaryResolver, symbolResolver,
+             createMockOutputContext(), summaryResolver, symbolResolver,
              [
                {
                  symbol: symbolCache.get('/tmp/external.ts', 'PROVIDERS'),
@@ -157,11 +174,14 @@ export function main() {
                  metadata: {__symbolic: 'class'}
                }
              ],
-             [<any>{
-               summaryKind: CompileSummaryKind.Injectable,
-               type: {
-                 reference: symbolCache.get('/tmp/external_svc.ts', 'SomeService'),
-               }
+             [{
+               summary: {
+                 summaryKind: CompileSummaryKind.Injectable,
+                 type: {
+                   reference: symbolCache.get('/tmp/external_svc.ts', 'SomeService'),
+                 }
+               } as any,
+               metadata: null as any
              }]);
          init(
              {
@@ -175,7 +195,7 @@ export function main() {
                    {__symbolic: 'module', version: 3, metadata: {'external': 'b'}}
              });
          const serialized = serializeSummaries(
-             summaryResolver, symbolResolver, [{
+             createMockOutputContext(), summaryResolver, symbolResolver, [{
                symbol: symbolCache.get('/tmp/test.ts', 'main'),
                metadata: {
                  local: symbolCache.get('/tmp/local.ts', 'local'),
@@ -210,7 +230,7 @@ export function main() {
     it('should create "importAs" names for non source symbols', () => {
       init();
       const serialized = serializeSummaries(
-          summaryResolver, symbolResolver, [{
+          createMockOutputContext(), summaryResolver, symbolResolver, [{
             symbol: symbolCache.get('/tmp/test.ts', 'main'),
             metadata: [
               symbolCache.get('/tmp/external.d.ts', 'lib'),
diff --git a/packages/compiler/test/aot/test_util.ts b/packages/compiler/test/aot/test_util.ts
index 06f7c1dbf7..93b3c7b25b 100644
--- a/packages/compiler/test/aot/test_util.ts
+++ b/packages/compiler/test/aot/test_util.ts
@@ -6,19 +6,25 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AotCompilerHost} from '@angular/compiler';
+import {AotCompilerHost, AotCompilerOptions, GeneratedFile, createAotCompiler, toTypeScript} from '@angular/compiler';
 import {MetadataBundlerHost, MetadataCollector, ModuleMetadata} from '@angular/tsc-wrapped';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as ts from 'typescript';
 
-export type MockData = string | MockDirectory;
+let nodeModulesPath: string;
+let angularSourcePath: string;
+let rootPath: string;
+
+calcPathsOnDisc();
+
+export type MockFileOrDirectory = string | MockDirectory;
 
 export type MockDirectory = {
-  [name: string]: MockData | undefined;
+  [name: string]: MockFileOrDirectory | undefined;
 };
 
-export function isDirectory(data: MockData | undefined): data is MockDirectory {
+export function isDirectory(data: MockFileOrDirectory | undefined): data is MockDirectory {
   return typeof data !== 'string';
 }
 
@@ -37,18 +43,28 @@ export const settings: ts.CompilerOptions = {
   removeComments: false,
   noImplicitAny: false,
   skipLibCheck: true,
+  strictNullChecks: true,
   lib: ['lib.es2015.d.ts', 'lib.dom.d.ts'],
   types: []
 };
 
 export interface EmitterOptions {
   emitMetadata: boolean;
-  mockData?: MockData;
+  mockData?: MockDirectory;
 }
 
+function calcPathsOnDisc() {
+  const moduleFilename = module.filename.replace(/\\/g, '/');
+  const distIndex = moduleFilename.indexOf('/dist/all');
+  if (distIndex >= 0) {
+    rootPath = moduleFilename.substr(0, distIndex);
+    nodeModulesPath = path.join(rootPath, 'node_modules');
+    angularSourcePath = path.join(rootPath, 'packages');
+  }
+}
+
+
 export class EmittingCompilerHost implements ts.CompilerHost {
-  private angularSourcePath: string|undefined;
-  private nodeModulesPath: string|undefined;
   private addedFiles = new Map<string, string>();
   private writtenFiles = new Map<string, string>();
   private scriptNames: string[];
@@ -56,19 +72,18 @@ export class EmittingCompilerHost implements ts.CompilerHost {
   private collector = new MetadataCollector();
 
   constructor(scriptNames: string[], private options: EmitterOptions) {
-    const moduleFilename = module.filename.replace(/\\/g, '/');
-    const distIndex = moduleFilename.indexOf('/dist/all');
-    if (distIndex >= 0) {
-      const root = moduleFilename.substr(0, distIndex);
-      this.nodeModulesPath = path.join(root, 'node_modules');
-      this.angularSourcePath = path.join(root, 'packages');
+    // Rewrite references to scripts with '@angular' to its corresponding location in
+    // the source tree.
+    this.scriptNames = scriptNames.map(f => this.effectiveName(f));
+    this.root = rootPath;
+  }
 
-      // Rewrite references to scripts with '@angular' to its corresponding location in
-      // the source tree.
-      this.scriptNames = scriptNames.map(f => this.effectiveName(f));
-
-      this.root = root;
-    }
+  public writtenAngularFiles(target = new Map<string, string>()): Map<string, string> {
+    this.written.forEach((value, key) => {
+      const path = `/node_modules/@angular${key.substring(angularSourcePath.length)}`;
+      target.set(path, value);
+    });
+    return target;
   }
 
   public addScript(fileName: string, content: string) {
@@ -97,7 +112,7 @@ export class EmittingCompilerHost implements ts.CompilerHost {
   public effectiveName(fileName: string): string {
     const prefix = '@angular/';
     return fileName.startsWith('@angular/') ?
-        path.join(this.angularSourcePath, fileName.substr(prefix.length)) :
+        path.join(angularSourcePath, fileName.substr(prefix.length)) :
         fileName;
   }
 
@@ -171,31 +186,17 @@ export class EmittingCompilerHost implements ts.CompilerHost {
   getNewLine(): string { return '\n'; }
 }
 
-const MOCK_NODEMODULES_PREFIX = '/node_modules/';
-
 export class MockCompilerHost implements ts.CompilerHost {
   scriptNames: string[];
 
-  private angularSourcePath: string|undefined;
-  private nodeModulesPath: string|undefined;
   public overrides = new Map<string, string>();
   public writtenFiles = new Map<string, string>();
   private sourceFiles = new Map<string, ts.SourceFile>();
   private assumeExists = new Set<string>();
   private traces: string[] = [];
 
-  constructor(
-      scriptNames: string[], private data: MockData, private angular: Map<string, string>,
-      private libraries?: Map<string, string>[]) {
+  constructor(scriptNames: string[], private data: MockDirectory) {
     this.scriptNames = scriptNames.slice(0);
-    const moduleFilename = module.filename.replace(/\\/g, '/');
-    let angularIndex = moduleFilename.indexOf('@angular');
-    let distIndex = moduleFilename.indexOf('/dist/all');
-    if (distIndex >= 0) {
-      const root = moduleFilename.substr(0, distIndex);
-      this.nodeModulesPath = path.join(root, 'node_modules');
-      this.angularSourcePath = path.join(root, 'packages');
-    }
   }
 
   // Test API
@@ -233,24 +234,12 @@ export class MockCompilerHost implements ts.CompilerHost {
     }
     const effectiveName = this.getEffectiveName(fileName);
     if (effectiveName == fileName) {
-      let result = open(fileName, this.data) != null;
-      if (!result && fileName.startsWith(MOCK_NODEMODULES_PREFIX)) {
-        const libraryPath = fileName.substr(MOCK_NODEMODULES_PREFIX.length - 1);
-        for (const library of this.libraries !) {
-          if (library.has(libraryPath)) {
-            return true;
-          }
-        }
-      }
-      return result;
-    } else {
-      if (fileName.match(rxjs)) {
-        let result = fs.existsSync(effectiveName);
-        return result;
-      }
-      const result = this.angular.has(effectiveName);
-      return result;
+      return open(fileName, this.data) != null;
     }
+    if (fileName.match(rxjs)) {
+      return fs.existsSync(effectiveName);
+    }
+    return false;
   }
 
   readFile(fileName: string): string { return this.getFileContent(fileName) !; }
@@ -311,39 +300,22 @@ export class MockCompilerHost implements ts.CompilerHost {
     if (/^lib.*\.d\.ts$/.test(basename)) {
       let libPath = ts.getDefaultLibFilePath(settings);
       return fs.readFileSync(path.join(path.dirname(libPath), basename), 'utf8');
-    } else {
-      let effectiveName = this.getEffectiveName(fileName);
-      if (effectiveName === fileName) {
-        const result = open(fileName, this.data);
-        if (!result && fileName.startsWith(MOCK_NODEMODULES_PREFIX)) {
-          const libraryPath = fileName.substr(MOCK_NODEMODULES_PREFIX.length - 1);
-          for (const library of this.libraries !) {
-            if (library.has(libraryPath)) return library.get(libraryPath);
-          }
-        }
-        return result;
-      } else {
-        if (fileName.match(rxjs)) {
-          if (fs.existsSync(fileName)) {
-            return fs.readFileSync(fileName, 'utf8');
-          }
-        }
-        return this.angular.get(effectiveName);
-      }
+    }
+    let effectiveName = this.getEffectiveName(fileName);
+    if (effectiveName === fileName) {
+      return open(fileName, this.data);
+    }
+    if (fileName.match(rxjs) && fs.existsSync(fileName)) {
+      return fs.readFileSync(fileName, 'utf8');
     }
   }
 
   private getEffectiveName(name: string): string {
     const node_modules = 'node_modules';
-    const at_angular = '/@angular';
     const rxjs = '/rxjs';
     if (name.startsWith('/' + node_modules)) {
-      if (this.angularSourcePath && name.startsWith('/' + node_modules + at_angular)) {
-        return path.join(
-            this.angularSourcePath, name.substr(node_modules.length + at_angular.length + 1));
-      }
-      if (this.nodeModulesPath && name.startsWith('/' + node_modules + rxjs)) {
-        return path.join(this.nodeModulesPath, name.substr(node_modules.length + 1));
+      if (nodeModulesPath && name.startsWith('/' + node_modules + rxjs)) {
+        return path.join(nodeModulesPath, name.substr(node_modules.length + 1));
       }
     }
     return name;
@@ -366,9 +338,9 @@ export class MockAotCompilerHost implements AotCompilerHost {
   tsFilesOnly() { this.dtsAreSource = false; }
 
   // StaticSymbolResolverHost
-  getMetadataFor(modulePath: string): {[key: string]: any}[]|null {
+  getMetadataFor(modulePath: string): {[key: string]: any}[]|undefined {
     if (!this.tsHost.fileExists(modulePath)) {
-      return null;
+      return undefined;
     }
     if (DTS.test(modulePath)) {
       if (this.metadataVisible) {
@@ -383,7 +355,7 @@ export class MockAotCompilerHost implements AotCompilerHost {
       const metadata = this.metadataCollector.getMetadata(sf);
       return metadata ? [metadata] : [];
     }
-    return null;
+    return undefined;
   }
 
   moduleNameToFileName(moduleName: string, containingFile: string): string|null {
@@ -419,11 +391,11 @@ export class MockAotCompilerHost implements AotCompilerHost {
     return importedFile.replace(EXT, '');
   }
 
-  loadResource(path: string): Promise<string> {
+  loadResource(path: string): string {
     if (this.tsHost.fileExists(path)) {
-      return Promise.resolve(this.tsHost.readFile(path));
+      return this.tsHost.readFile(path);
     } else {
-      return Promise.reject(new Error(`Resource ${path} not found.`))
+      throw new Error(`Resource ${path} not found.`);
     }
   }
 }
@@ -433,28 +405,28 @@ export class MockMetadataBundlerHost implements MetadataBundlerHost {
 
   constructor(private host: ts.CompilerHost) {}
 
-  getMetadataFor(moduleName: string): ModuleMetadata {
+  getMetadataFor(moduleName: string): ModuleMetadata|undefined {
     const source = this.host.getSourceFile(moduleName + '.ts', ts.ScriptTarget.Latest);
     return this.collector.getMetadata(source);
   }
 }
 
-function find(fileName: string, data: MockData | undefined): MockData|undefined {
+function find(fileName: string, data: MockFileOrDirectory | undefined): MockFileOrDirectory|
+    undefined {
   if (!data) return undefined;
-  let names = fileName.split('/');
+  const names = fileName.split('/');
   if (names.length && !names[0].length) names.shift();
-  let current: MockData|undefined = data;
-  for (let name of names) {
-    if (typeof current === 'string')
+  let current: MockFileOrDirectory|undefined = data;
+  for (const name of names) {
+    if (typeof current !== 'object') {
       return undefined;
-    else
-      current = (<MockDirectory>current)[name];
-    if (!current) return undefined;
+    }
+    current = current[name];
   }
   return current;
 }
 
-function open(fileName: string, data: MockData | undefined): string|undefined {
+function open(fileName: string, data: MockFileOrDirectory | undefined): string|undefined {
   let result = find(fileName, data);
   if (typeof result === 'string') {
     return result;
@@ -462,7 +434,216 @@ function open(fileName: string, data: MockData | undefined): string|undefined {
   return undefined;
 }
 
-function directoryExists(dirname: string, data: MockData | undefined): boolean {
+function directoryExists(dirname: string, data: MockFileOrDirectory | undefined): boolean {
   let result = find(dirname, data);
   return !!result && typeof result !== 'string';
 }
+
+export type MockFileArray = {
+  fileName: string,
+  content: string
+}[];
+
+export type MockData = MockDirectory | Map<string, string>| (MockDirectory | Map<string, string>)[];
+
+export function toMockFileArray(data: MockData, target: MockFileArray = []): MockFileArray {
+  if (data instanceof Map) {
+    mapToMockFileArray(data, target);
+  } else if (Array.isArray(data)) {
+    data.forEach(entry => toMockFileArray(entry, target));
+  } else {
+    mockDirToFileArray(data, '', target);
+  }
+  return target;
+}
+
+function mockDirToFileArray(dir: MockDirectory, path: string, target: MockFileArray) {
+  Object.keys(dir).forEach((localFileName) => {
+    const value = dir[localFileName] !;
+    const fileName = `${path}/${localFileName}`;
+    if (typeof value === 'string') {
+      target.push({fileName, content: value});
+    } else {
+      mockDirToFileArray(value, fileName, target);
+    }
+  });
+}
+
+function mapToMockFileArray(files: Map<string, string>, target: MockFileArray) {
+  files.forEach((content, fileName) => { target.push({fileName, content}); });
+}
+
+export function arrayToMockMap(arr: MockFileArray): Map<string, string> {
+  const map = new Map<string, string>();
+  arr.forEach(({fileName, content}) => { map.set(fileName, content); });
+  return map;
+}
+
+export function arrayToMockDir(arr: MockFileArray): MockDirectory {
+  const rootDir: MockDirectory = {};
+  arr.forEach(({fileName, content}) => {
+    let pathParts = fileName.split('/');
+    // trim trailing slash
+    let startIndex = pathParts[0] ? 0 : 1;
+    // get/create the directory
+    let currentDir = rootDir;
+    for (let i = startIndex; i < pathParts.length - 1; i++) {
+      const pathPart = pathParts[i];
+      let localDir = <MockDirectory>currentDir[pathPart];
+      if (!localDir) {
+        currentDir[pathPart] = localDir = {};
+      }
+      currentDir = localDir;
+    }
+    // write the file
+    currentDir[pathParts[pathParts.length - 1]] = content;
+  });
+  return rootDir;
+}
+
+const minCoreIndex = `
+  export * from './src/application_module';
+  export * from './src/change_detection';
+  export * from './src/metadata';
+  export * from './src/di/metadata';
+  export * from './src/di/injector';
+  export * from './src/di/injection_token';
+  export * from './src/linker';
+  export * from './src/render';
+  export * from './src/codegen_private_exports';
+`;
+
+export function setup(options: {compileAngular: boolean, compileAnimations: boolean} = {
+  compileAngular: true,
+  compileAnimations: true,
+}) {
+  let angularFiles = new Map<string, string>();
+
+  beforeAll(() => {
+    if (options.compileAngular) {
+      const emittingHost = new EmittingCompilerHost([], {emitMetadata: true});
+      emittingHost.addScript('@angular/core/index.ts', minCoreIndex);
+      const emittingProgram = ts.createProgram(emittingHost.scripts, settings, emittingHost);
+      emittingProgram.emit();
+      emittingHost.writtenAngularFiles(angularFiles);
+    }
+    if (options.compileAnimations) {
+      const emittingHost =
+          new EmittingCompilerHost(['@angular/animations/index.ts'], {emitMetadata: true});
+      const emittingProgram = ts.createProgram(emittingHost.scripts, settings, emittingHost);
+      emittingProgram.emit();
+      emittingHost.writtenAngularFiles(angularFiles);
+    }
+  });
+
+  return angularFiles;
+}
+
+export function expectNoDiagnostics(program: ts.Program) {
+  function fileInfo(diagnostic: ts.Diagnostic): string {
+    if (diagnostic.file) {
+      return `${diagnostic.file.fileName}(${diagnostic.start}): `;
+    }
+    return '';
+  }
+
+  function chars(len: number, ch: string): string { return new Array(len).fill(ch).join(''); }
+
+  function lineNoOf(offset: number, text: string): number {
+    let result = 1;
+    for (let i = 0; i < offset; i++) {
+      if (text[i] == '\n') result++;
+    }
+    return result;
+  }
+
+  function lineInfo(diagnostic: ts.Diagnostic): string {
+    if (diagnostic.file) {
+      const start = diagnostic.start;
+      let end = diagnostic.start + diagnostic.length;
+      const source = diagnostic.file.text;
+      let lineStart = start;
+      let lineEnd = end;
+      while (lineStart > 0 && source[lineStart] != '\n') lineStart--;
+      if (lineStart < start) lineStart++;
+      while (lineEnd < source.length && source[lineEnd] != '\n') lineEnd++;
+      let line = source.substring(lineStart, lineEnd);
+      const lineIndex = line.indexOf('/n');
+      if (lineIndex > 0) {
+        line = line.substr(0, lineIndex);
+        end = start + lineIndex;
+      }
+      const lineNo = lineNoOf(start, source) + ': ';
+      return '\n' + lineNo + line + '\n' + chars(start - lineStart + lineNo.length, ' ') +
+          chars(end - start, '^');
+    }
+    return '';
+  }
+
+  function expectNoDiagnostics(diagnostics: ts.Diagnostic[]) {
+    if (diagnostics && diagnostics.length) {
+      throw new Error(
+          'Errors from TypeScript:\n' +
+          diagnostics.map(d => `${fileInfo(d)}${d.messageText}${lineInfo(d)}`).join(' \n'));
+    }
+  }
+  expectNoDiagnostics(program.getOptionsDiagnostics());
+  expectNoDiagnostics(program.getSyntacticDiagnostics());
+  expectNoDiagnostics(program.getSemanticDiagnostics());
+}
+
+export function isSource(fileName: string): boolean {
+  return !/\.d\.ts$/.test(fileName) && /\.ts$/.test(fileName);
+}
+
+export function compile(
+    rootDirs: MockData, options: {
+      emit?: boolean,
+      useSummaries?: boolean,
+      preCompile?: (program: ts.Program) => void,
+      postCompile?: (program: ts.Program) => void,
+      stubsOnly?: boolean,
+    }& AotCompilerOptions = {},
+    tsOptions: ts.CompilerOptions = {}): {genFiles: GeneratedFile[], outDir: MockDirectory} {
+  // when using summaries, always emit so the next step can use the results.
+  const emit = options.emit || options.useSummaries;
+  const preCompile = options.preCompile || (() => {});
+  const postCompile = options.postCompile || expectNoDiagnostics;
+  const rootDirArr = toMockFileArray(rootDirs);
+  const scriptNames = rootDirArr.map(entry => entry.fileName).filter(isSource);
+
+  const host = new MockCompilerHost(scriptNames, arrayToMockDir(rootDirArr));
+  const aotHost = new MockAotCompilerHost(host);
+  if (options.useSummaries) {
+    aotHost.hideMetadata();
+    aotHost.tsFilesOnly();
+  }
+  const tsSettings = {...settings, ...tsOptions};
+  const program = ts.createProgram(host.scriptNames.slice(0), tsSettings, host);
+  preCompile(program);
+  const {compiler, reflector} = createAotCompiler(aotHost, options);
+  const analyzedModules =
+      compiler.analyzeModulesSync(program.getSourceFiles().map(sf => sf.fileName));
+  const genFiles = options.stubsOnly ? compiler.emitAllStubs(analyzedModules) :
+                                       compiler.emitAllImpls(analyzedModules);
+  genFiles.forEach((file) => {
+    const source = file.source || toTypeScript(file);
+    if (isSource(file.genFileUrl)) {
+      host.addScript(file.genFileUrl, source);
+    } else {
+      host.override(file.genFileUrl, source);
+    }
+  });
+  const newProgram = ts.createProgram(host.scriptNames.slice(0), tsSettings, host);
+  postCompile(newProgram);
+  if (emit) {
+    newProgram.emit();
+  }
+  let outDir: MockDirectory = {};
+  if (emit) {
+    outDir = arrayToMockDir(toMockFileArray([
+                              host.writtenFiles, host.overrides
+                            ]).filter((entry) => !isSource(entry.fileName)));
+  }
+  return {genFiles, outDir};
+}
diff --git a/packages/compiler/test/directive_lifecycle_spec.ts b/packages/compiler/test/directive_lifecycle_spec.ts
index 65354c0e91..a4b35f4bf3 100644
--- a/packages/compiler/test/directive_lifecycle_spec.ts
+++ b/packages/compiler/test/directive_lifecycle_spec.ts
@@ -6,9 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {hasLifecycleHook} from '@angular/compiler/src/lifecycle_reflector';
+import {JitReflector} from '@angular/compiler';
+import {LifecycleHooks as Hooks, hasLifecycleHook as hasLifecycleHookImpl} from '@angular/compiler/src/lifecycle_reflector';
 import {SimpleChanges} from '@angular/core';
-import {LifecycleHooks as Hooks} from '@angular/core/src/metadata/lifecycle_hooks';
+
+function hasLifecycleHook(hook: Hooks, directive: any): boolean {
+  return hasLifecycleHookImpl(new JitReflector(), hook, directive);
+}
 
 export function main() {
   describe('Create Directive', () => {
diff --git a/packages/compiler/test/directive_normalizer_spec.ts b/packages/compiler/test/directive_normalizer_spec.ts
index 1ae031b8e5..114f2672a0 100644
--- a/packages/compiler/test/directive_normalizer_spec.ts
+++ b/packages/compiler/test/directive_normalizer_spec.ts
@@ -16,7 +16,7 @@ import {ViewEncapsulation} from '@angular/core/src/metadata/view';
 import {TestBed} from '@angular/core/testing';
 import {AsyncTestCompleter, beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
 
-import {SyncAsyncResult, noUndefined} from '../src/util';
+import {noUndefined} from '../src/util';
 
 import {SpyResourceLoader} from './spies';
 
@@ -46,7 +46,7 @@ function normalizeTemplate(normalizer: DirectiveNormalizer, o: {
   });
 }
 
-function normalizeTemplateAsync(normalizer: DirectiveNormalizer, o: {
+function normalizeTemplateOnly(normalizer: DirectiveNormalizer, o: {
   ngModuleType?: any; componentType?: any; moduleUrl?: string; template?: string | null;
   templateUrl?: string | null;
   styles?: string[];
@@ -55,30 +55,7 @@ function normalizeTemplateAsync(normalizer: DirectiveNormalizer, o: {
   encapsulation?: ViewEncapsulation | null;
   animations?: CompileAnimationEntryMetadata[];
 }) {
-  return normalizer.normalizeTemplateAsync({
-    ngModuleType: noUndefined(o.ngModuleType),
-    componentType: noUndefined(o.componentType),
-    moduleUrl: noUndefined(o.moduleUrl),
-    template: noUndefined(o.template),
-    templateUrl: noUndefined(o.templateUrl),
-    styles: noUndefined(o.styles),
-    styleUrls: noUndefined(o.styleUrls),
-    interpolation: noUndefined(o.interpolation),
-    encapsulation: noUndefined(o.encapsulation),
-    animations: noUndefined(o.animations)
-  });
-}
-
-function normalizeTemplateSync(normalizer: DirectiveNormalizer, o: {
-  ngModuleType?: any; componentType?: any; moduleUrl?: string; template?: string | null;
-  templateUrl?: string | null;
-  styles?: string[];
-  styleUrls?: string[];
-  interpolation?: [string, string] | null;
-  encapsulation?: ViewEncapsulation | null;
-  animations?: CompileAnimationEntryMetadata[];
-}): CompileTemplateMetadata {
-  return normalizer.normalizeTemplateSync({
+  return normalizer.normalizeTemplateOnly({
     ngModuleType: noUndefined(o.ngModuleType),
     componentType: noUndefined(o.componentType),
     moduleUrl: noUndefined(o.moduleUrl),
@@ -142,7 +119,7 @@ function normalizeLoadedTemplate(
         styleUrls: o.styleUrls || [],
         interpolation: o.interpolation || null,
         encapsulation: o.encapsulation || null,
-        animations: o.animations || null,
+        animations: o.animations || [],
       },
       template, templateAbsUrl);
 }
@@ -194,10 +171,10 @@ export function main() {
          }));
     });
 
-    describe('normalizeTemplateSync', () => {
+    describe('normalizeTemplateOnly sync', () => {
       it('should store the template',
          inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
-           const template = normalizeTemplateSync(normalizer, {
+           const template = <CompileTemplateMetadata>normalizeTemplateOnly(normalizer, {
              ngModuleType: null,
              componentType: SomeComp,
              moduleUrl: SOME_MODULE_URL,
@@ -214,7 +191,7 @@ export function main() {
 
       it('should resolve styles on the annotation against the moduleUrl',
          inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
-           const template = normalizeTemplateSync(normalizer, {
+           const template = <CompileTemplateMetadata>normalizeTemplateOnly(normalizer, {
              ngModuleType: null,
              componentType: SomeComp,
              moduleUrl: SOME_MODULE_URL,
@@ -229,7 +206,7 @@ export function main() {
 
       it('should resolve styles in the template against the moduleUrl',
          inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
-           const template = normalizeTemplateSync(normalizer, {
+           const template = <CompileTemplateMetadata>normalizeTemplateOnly(normalizer, {
              ngModuleType: null,
              componentType: SomeComp,
              moduleUrl: SOME_MODULE_URL,
@@ -244,7 +221,7 @@ export function main() {
 
       it('should use ViewEncapsulation.Emulated by default',
          inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
-           const template = normalizeTemplateSync(normalizer, {
+           const template = <CompileTemplateMetadata>normalizeTemplateOnly(normalizer, {
              ngModuleType: null,
              componentType: SomeComp,
              moduleUrl: SOME_MODULE_URL,
@@ -262,7 +239,7 @@ export function main() {
              [CompilerConfig, DirectiveNormalizer],
              (config: CompilerConfig, normalizer: DirectiveNormalizer) => {
                config.defaultEncapsulation = ViewEncapsulation.None;
-               const template = normalizeTemplateSync(normalizer, {
+               const template = <CompileTemplateMetadata>normalizeTemplateOnly(normalizer, {
                  ngModuleType: null,
                  componentType: SomeComp,
                  moduleUrl: SOME_MODULE_URL,
@@ -284,7 +261,7 @@ export function main() {
              (async: AsyncTestCompleter, normalizer: DirectiveNormalizer,
               resourceLoader: MockResourceLoader) => {
                resourceLoader.expect('package:some/module/sometplurl.html', 'a');
-               normalizeTemplateAsync(normalizer, {
+               (<Promise<CompileTemplateMetadata>>normalizeTemplateOnly(normalizer, {
                  ngModuleType: null,
                  componentType: SomeComp,
                  moduleUrl: SOME_MODULE_URL,
@@ -293,7 +270,7 @@ export function main() {
                  templateUrl: 'sometplurl.html',
                  styles: [],
                  styleUrls: ['test.css']
-               }).then((template: CompileTemplateMetadata) => {
+               })).then((template) => {
                  expect(template.template).toEqual('a');
                  expect(template.templateUrl).toEqual('package:some/module/sometplurl.html');
                  expect(template.isInline).toBe(false);
@@ -308,7 +285,7 @@ export function main() {
              (async: AsyncTestCompleter, normalizer: DirectiveNormalizer,
               resourceLoader: MockResourceLoader) => {
                resourceLoader.expect('package:some/module/tpl/sometplurl.html', '');
-               normalizeTemplateAsync(normalizer, {
+               (<Promise<CompileTemplateMetadata>>normalizeTemplateOnly(normalizer, {
                  ngModuleType: null,
                  componentType: SomeComp,
                  moduleUrl: SOME_MODULE_URL,
@@ -317,7 +294,7 @@ export function main() {
                  templateUrl: 'tpl/sometplurl.html',
                  styles: [],
                  styleUrls: ['test.css']
-               }).then((template: CompileTemplateMetadata) => {
+               })).then((template) => {
                  expect(template.styleUrls).toEqual(['package:some/module/test.css']);
                  async.done();
                });
@@ -331,7 +308,7 @@ export function main() {
               resourceLoader: MockResourceLoader) => {
                resourceLoader.expect(
                    'package:some/module/tpl/sometplurl.html', '<style>@import test.css</style>');
-               normalizeTemplateAsync(normalizer, {
+               (<Promise<CompileTemplateMetadata>>normalizeTemplateOnly(normalizer, {
                  ngModuleType: null,
                  componentType: SomeComp,
                  moduleUrl: SOME_MODULE_URL,
@@ -340,7 +317,7 @@ export function main() {
                  templateUrl: 'tpl/sometplurl.html',
                  styles: [],
                  styleUrls: []
-               }).then((template: CompileTemplateMetadata) => {
+               })).then((template) => {
                  expect(template.styleUrls).toEqual(['package:some/module/tpl/test.css']);
                  async.done();
                });
@@ -362,13 +339,13 @@ export function main() {
              (async: AsyncTestCompleter, normalizer: DirectiveNormalizer,
               resourceLoader: SpyResourceLoader) => {
                programResourceLoaderSpy(resourceLoader, {'package:some/module/test.css': 'a'});
-               normalizer
-                   .normalizeExternalStylesheets(compileTemplateMetadata({
-                     template: '',
-                     templateUrl: '',
-                     styleUrls: ['package:some/module/test.css']
-                   }))
-                   .then((template: CompileTemplateMetadata) => {
+               (<Promise<CompileTemplateMetadata>>normalizer.normalizeExternalStylesheets(
+                    compileTemplateMetadata({
+                      template: '',
+                      templateUrl: '',
+                      styleUrls: ['package:some/module/test.css']
+                    })))
+                   .then((template) => {
                      expect(template.externalStylesheets.length).toBe(1);
                      expect(template.externalStylesheets[0]).toEqual(new CompileStylesheetMetadata({
                        moduleUrl: 'package:some/module/test.css',
@@ -388,13 +365,13 @@ export function main() {
                  'package:some/module/test.css': 'a@import "test2.css"',
                  'package:some/module/test2.css': 'b'
                });
-               normalizer
-                   .normalizeExternalStylesheets(compileTemplateMetadata({
-                     template: '',
-                     templateUrl: '',
-                     styleUrls: ['package:some/module/test.css']
-                   }))
-                   .then((template: CompileTemplateMetadata) => {
+               (<Promise<CompileTemplateMetadata>>normalizer.normalizeExternalStylesheets(
+                    compileTemplateMetadata({
+                      template: '',
+                      templateUrl: '',
+                      styleUrls: ['package:some/module/test.css']
+                    })))
+                   .then((template) => {
                      expect(template.externalStylesheets.length).toBe(2);
                      expect(template.externalStylesheets[0]).toEqual(new CompileStylesheetMetadata({
                        moduleUrl: 'package:some/module/test.css',
@@ -426,8 +403,8 @@ export function main() {
                };
                Promise
                    .all([
-                     normalizeTemplateAsync(normalizer, prenormMeta),
-                     normalizeTemplateAsync(normalizer, prenormMeta)
+                     normalizeTemplateOnly(normalizer, prenormMeta),
+                     normalizeTemplateOnly(normalizer, prenormMeta)
                    ])
                    .then((templates: CompileTemplateMetadata[]) => {
                      expect(templates[0].template).toEqual('a');
diff --git a/packages/compiler/test/directive_resolver_mock_spec.ts b/packages/compiler/test/directive_resolver_mock_spec.ts
index e74d4e06ca..926bbc018c 100644
--- a/packages/compiler/test/directive_resolver_mock_spec.ts
+++ b/packages/compiler/test/directive_resolver_mock_spec.ts
@@ -6,8 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {JitReflector} from '@angular/compiler';
 import {Component, Directive, Injector, ɵViewMetadata as ViewMetadata} from '@angular/core';
 import {TestBed, inject} from '@angular/core/testing';
+
 import {MockDirectiveResolver} from '../testing';
 
 export function main() {
@@ -20,7 +22,7 @@ export function main() {
     });
 
     beforeEach(inject([Injector], (injector: Injector) => {
-      dirResolver = new MockDirectiveResolver(injector);
+      dirResolver = new MockDirectiveResolver(injector, new JitReflector());
     }));
 
     describe('Directive overriding', () => {
diff --git a/packages/compiler/test/directive_resolver_spec.ts b/packages/compiler/test/directive_resolver_spec.ts
index 804bee7fa6..7322277350 100644
--- a/packages/compiler/test/directive_resolver_spec.ts
+++ b/packages/compiler/test/directive_resolver_spec.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {JitReflector} from '@angular/compiler';
 import {DirectiveResolver} from '@angular/compiler/src/directive_resolver';
 import {Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Input, Output, ViewChild, ViewChildren} from '@angular/core/src/metadata';
-import {reflector} from '@angular/core/src/reflection/reflection';
 
 @Directive({selector: 'someDirective'})
 class SomeDirective {
@@ -110,13 +110,19 @@ export function main() {
   describe('DirectiveResolver', () => {
     let resolver: DirectiveResolver;
 
-    beforeEach(() => { resolver = new DirectiveResolver(); });
+    beforeEach(() => { resolver = new DirectiveResolver(new JitReflector()); });
 
     it('should read out the Directive metadata', () => {
       const directiveMetadata = resolver.resolve(SomeDirective);
-      expect(directiveMetadata)
-          .toEqual(new Directive(
-              {selector: 'someDirective', inputs: [], outputs: [], host: {}, queries: {}}));
+      expect(directiveMetadata).toEqual(new Directive({
+        selector: 'someDirective',
+        inputs: [],
+        outputs: [],
+        host: {},
+        queries: {},
+        exportAs: undefined,
+        providers: undefined
+      }));
     });
 
     it('should throw if not matching metadata is found', () => {
@@ -136,11 +142,25 @@ export function main() {
       class ChildWithDecorator extends Parent {
       }
 
-      expect(resolver.resolve(ChildNoDecorator))
-          .toEqual(new Directive({selector: 'p', inputs: [], outputs: [], host: {}, queries: {}}));
+      expect(resolver.resolve(ChildNoDecorator)).toEqual(new Directive({
+        selector: 'p',
+        inputs: [],
+        outputs: [],
+        host: {},
+        queries: {},
+        exportAs: undefined,
+        providers: undefined
+      }));
 
-      expect(resolver.resolve(ChildWithDecorator))
-          .toEqual(new Directive({selector: 'c', inputs: [], outputs: [], host: {}, queries: {}}));
+      expect(resolver.resolve(ChildWithDecorator)).toEqual(new Directive({
+        selector: 'c',
+        inputs: [],
+        outputs: [],
+        host: {},
+        queries: {},
+        exportAs: undefined,
+        providers: undefined
+      }));
     });
 
     describe('inputs', () => {
diff --git a/packages/compiler/test/expression_parser/parser_spec.ts b/packages/compiler/test/expression_parser/parser_spec.ts
index b1199dab63..260a516be0 100644
--- a/packages/compiler/test/expression_parser/parser_spec.ts
+++ b/packages/compiler/test/expression_parser/parser_spec.ts
@@ -112,6 +112,12 @@ export function main() {
         checkAction('!!!true');
       });
 
+      it('should parse postfix ! expression', () => {
+        checkAction('true!');
+        checkAction('a!.b');
+        checkAction('a!!!!.b');
+      });
+
       it('should parse multiplicative expressions',
          () => { checkAction('3*4/2%5', '3 * 4 / 2 % 5'); });
 
@@ -159,7 +165,7 @@ export function main() {
 
         it('should parse map', () => {
           checkAction('{}');
-          checkAction('{a: 1}[2]');
+          checkAction('{a: 1, "b": 2}[2]');
           checkAction('{}["a"]');
         });
 
@@ -257,7 +263,7 @@ export function main() {
           checkBinding('a(b | c)', 'a((b | c))');
           checkBinding('a.b(c.d(e) | f)', 'a.b((c.d(e) | f))');
           checkBinding('[1, 2, 3] | a', '([1, 2, 3] | a)');
-          checkBinding('{a: 1} | b', '({a: 1} | b)');
+          checkBinding('{a: 1, "b": 2} | c', '({a: 1, "b": 2} | c)');
           checkBinding('a[b] | c', '(a[b] | c)');
           checkBinding('a?.b | c', '(a?.b | c)');
           checkBinding('true | a', '(true | a)');
diff --git a/packages/compiler/test/expression_parser/unparser.ts b/packages/compiler/test/expression_parser/unparser.ts
index 93c793b85c..4f9aa33e4e 100644
--- a/packages/compiler/test/expression_parser/unparser.ts
+++ b/packages/compiler/test/expression_parser/unparser.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AST, AstVisitor, Binary, BindingPipe, Chain, Conditional, FunctionCall, ImplicitReceiver, Interpolation, KeyedRead, KeyedWrite, LiteralArray, LiteralMap, LiteralPrimitive, MethodCall, PrefixNot, PropertyRead, PropertyWrite, Quote, SafeMethodCall, SafePropertyRead} from '../../src/expression_parser/ast';
+import {AST, AstVisitor, Binary, BindingPipe, Chain, Conditional, FunctionCall, ImplicitReceiver, Interpolation, KeyedRead, KeyedWrite, LiteralArray, LiteralMap, LiteralPrimitive, MethodCall, NonNullAssert, PrefixNot, PropertyRead, PropertyWrite, Quote, SafeMethodCall, SafePropertyRead} from '../../src/expression_parser/ast';
 import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from '../../src/ml_parser/interpolation_config';
 
 class Unparser implements AstVisitor {
@@ -124,7 +124,9 @@ class Unparser implements AstVisitor {
     for (let i = 0; i < ast.keys.length; i++) {
       if (!isFirst) this._expression += ', ';
       isFirst = false;
-      this._expression += `${ast.keys[i]}: `;
+      const key = ast.keys[i];
+      this._expression += key.quoted ? JSON.stringify(key.key) : key.key;
+      this._expression += ': ';
       this._visit(ast.values[i]);
     }
 
@@ -156,6 +158,11 @@ class Unparser implements AstVisitor {
     this._visit(ast.expression);
   }
 
+  visitNonNullAssert(ast: NonNullAssert, context: any) {
+    this._visit(ast.expression);
+    this._expression += '!';
+  }
+
   visitSafePropertyRead(ast: SafePropertyRead, context: any) {
     this._visit(ast.receiver);
     this._expression += `?.${ast.name}`;
diff --git a/packages/compiler/test/i18n/digest_spec.ts b/packages/compiler/test/i18n/digest_spec.ts
index 7297f6cc76..532430d64f 100644
--- a/packages/compiler/test/i18n/digest_spec.ts
+++ b/packages/compiler/test/i18n/digest_spec.ts
@@ -19,6 +19,7 @@ export function main(): void {
           placeholderToMessage: {},
           meaning: '',
           description: '',
+          sources: [],
         })).toEqual('i');
       });
     });
diff --git a/packages/compiler/test/i18n/extractor_merger_spec.ts b/packages/compiler/test/i18n/extractor_merger_spec.ts
index 7ba9ea413f..641b769c3f 100644
--- a/packages/compiler/test/i18n/extractor_merger_spec.ts
+++ b/packages/compiler/test/i18n/extractor_merger_spec.ts
@@ -7,6 +7,7 @@
  */
 
 import {DEFAULT_INTERPOLATION_CONFIG, HtmlParser} from '@angular/compiler';
+import {MissingTranslationStrategy} from '@angular/core';
 
 import {digest, serializeNodes as serializeI18nNodes} from '../../src/i18n/digest';
 import {extractMessages, mergeTranslations} from '../../src/i18n/extractor_merger';
@@ -465,6 +466,31 @@ export function main() {
             .toEqual(`<div title="">some element</div>`);
       });
     });
+
+    describe('no translations', () => {
+      it('should remove i18n attributes', () => {
+        const HTML = `<p i18n="m|d">foo</p>`;
+        expect(fakeNoTranslate(HTML)).toEqual('<p>foo</p>');
+      });
+
+      it('should remove i18n- attributes', () => {
+        const HTML = `<p i18n-title="m|d" title="foo"></p>`;
+        expect(fakeNoTranslate(HTML)).toEqual('<p title="foo"></p>');
+      });
+
+      it('should remove i18n comment blocks', () => {
+        const HTML = `before<!-- i18n --><p>foo</p><span><i>bar</i></span><!-- /i18n -->after`;
+        expect(fakeNoTranslate(HTML)).toEqual('before<p>foo</p><span><i>bar</i></span>after');
+      });
+
+      it('should remove nested i18n markup', () => {
+        const HTML =
+            `<!-- i18n --><span someAttr="ok">foo</span><div>{count, plural, =0 {<p i18n-title title="foo"></p>}}</div><!-- /i18n -->`;
+        expect(fakeNoTranslate(HTML))
+            .toEqual(
+                '<span someAttr="ok">foo</span><div>{count, plural, =0 {<p title="foo"></p>}}</div>');
+      });
+    })
   });
 }
 
@@ -493,10 +519,22 @@ function fakeTranslate(
     i18nMsgMap[id] = [new i18n.Text(`**${text}**`, null !)];
   });
 
-  const translations = new TranslationBundle(i18nMsgMap, null, digest);
-
+  const translationBundle = new TranslationBundle(i18nMsgMap, null, digest);
   const output = mergeTranslations(
-      htmlNodes, translations, DEFAULT_INTERPOLATION_CONFIG, implicitTags, implicitAttrs);
+      htmlNodes, translationBundle, DEFAULT_INTERPOLATION_CONFIG, implicitTags, implicitAttrs);
+  expect(output.errors).toEqual([]);
+
+  return serializeHtmlNodes(output.rootNodes).join('');
+}
+
+function fakeNoTranslate(
+    content: string, implicitTags: string[] = [],
+    implicitAttrs: {[k: string]: string[]} = {}): string {
+  const htmlNodes: html.Node[] = parseHtml(content);
+  const translationBundle = new TranslationBundle(
+      {}, null, digest, undefined, MissingTranslationStrategy.Ignore, console);
+  const output = mergeTranslations(
+      htmlNodes, translationBundle, DEFAULT_INTERPOLATION_CONFIG, implicitTags, implicitAttrs);
   expect(output.errors).toEqual([]);
 
   return serializeHtmlNodes(output.rootNodes).join('');
diff --git a/packages/compiler/test/i18n/i18n_html_parser_spec.ts b/packages/compiler/test/i18n/i18n_html_parser_spec.ts
index aec56dfa13..84afbd9e7d 100644
--- a/packages/compiler/test/i18n/i18n_html_parser_spec.ts
+++ b/packages/compiler/test/i18n/i18n_html_parser_spec.ts
@@ -13,22 +13,6 @@ import {ParseTreeResult} from '@angular/compiler/src/ml_parser/parser';
 
 export function main() {
   describe('I18N html parser', () => {
-
-    it('should return the html nodes when no translations are given', () => {
-      const htmlParser = new HtmlParser();
-      const i18nHtmlParser = new I18NHtmlParser(htmlParser);
-      const ptResult = new ParseTreeResult([], []);
-
-      spyOn(htmlParser, 'parse').and.returnValue(ptResult);
-      spyOn(i18nHtmlParser, 'parse').and.callThrough();
-
-      expect(i18nHtmlParser.parse('source', 'url')).toBe(ptResult);
-
-      expect(htmlParser.parse).toHaveBeenCalledTimes(1);
-      expect(htmlParser.parse)
-          .toHaveBeenCalledWith('source', 'url', jasmine.anything(), jasmine.anything());
-    });
-
     // https://github.com/angular/angular/issues/14322
     it('should parse the translations only once', () => {
       const transBundle = new TranslationBundle({}, null, () => 'id');
diff --git a/packages/compiler/test/i18n/integration_common.ts b/packages/compiler/test/i18n/integration_common.ts
index 1ce8b3503d..b2abdb8d0d 100644
--- a/packages/compiler/test/i18n/integration_common.ts
+++ b/packages/compiler/test/i18n/integration_common.ts
@@ -78,6 +78,9 @@ export function validateHtml(
   cmp.sex = 'f';
   tb.detectChanges();
   expect(el.query(By.css('#i18n-8')).nativeElement).toHaveText('femme');
+  cmp.sex = '0';
+  tb.detectChanges();
+  expect(el.query(By.css('#i18n-8')).nativeElement).toHaveText('autre');
 
   cmp.count = 123;
   tb.detectChanges();
@@ -110,6 +113,7 @@ export const HTML = `
     
     <div id="i18n-3"><p i18n><i>with placeholders</i></p></div>
     <div id="i18n-3b"><p i18n><i class="preserved-on-placeholders">with placeholders</i></p></div>
+    <div id="i18n-3c"><div i18n><div>with <div>nested</div> placeholders</div></div></div>
     
     <div>
         <p id="i18n-4" i18n-title title="on not translatable node"></p>
@@ -121,7 +125,7 @@ export const HTML = `
     <div i18n id="i18n-7">{count, plural, =0 {zero} =1 {one} =2 {two} other {<b>many</b>}}</div>
     
     <div i18n id="i18n-8">
-        {sex, select, m {male} f {female}}
+        {sex, select, m {male} f {female} 0 {other}}
     </div>
     <div i18n id="i18n-8b">
         {sexB, select, m {male} f {female}}
diff --git a/packages/compiler/test/i18n/integration_xliff2_spec.ts b/packages/compiler/test/i18n/integration_xliff2_spec.ts
new file mode 100644
index 0000000000..3594db225a
--- /dev/null
+++ b/packages/compiler/test/i18n/integration_xliff2_spec.ts
@@ -0,0 +1,416 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgLocalization} from '@angular/common';
+import {ResourceLoader} from '@angular/compiler';
+import {MessageBundle} from '@angular/compiler/src/i18n/message_bundle';
+import {Xliff2} from '@angular/compiler/src/i18n/serializers/xliff2';
+import {HtmlParser} from '@angular/compiler/src/ml_parser/html_parser';
+import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/interpolation_config';
+import {DebugElement, TRANSLATIONS, TRANSLATIONS_FORMAT} from '@angular/core';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {expect} from '@angular/platform-browser/testing/src/matchers';
+
+import {SpyResourceLoader} from '../spies';
+
+import {FrLocalization, HTML, I18nComponent, validateHtml} from './integration_common';
+
+export function main() {
+  describe('i18n XLIFF 2.0 integration spec', () => {
+
+    beforeEach(async(() => {
+      TestBed.configureCompiler({
+        providers: [
+          {provide: ResourceLoader, useClass: SpyResourceLoader},
+          {provide: NgLocalization, useClass: FrLocalization},
+          {provide: TRANSLATIONS, useValue: XLIFF2_TOMERGE},
+          {provide: TRANSLATIONS_FORMAT, useValue: 'xlf2'},
+        ]
+      });
+
+      TestBed.configureTestingModule({declarations: [I18nComponent]});
+    }));
+
+    it('should extract from templates', () => {
+      const catalog = new MessageBundle(new HtmlParser, [], {});
+      const serializer = new Xliff2();
+      catalog.updateFromTemplate(HTML, 'file.ts', DEFAULT_INTERPOLATION_CONFIG);
+
+      expect(catalog.write(serializer)).toContain(XLIFF2_EXTRACTED);
+    });
+
+    it('should translate templates', () => {
+      const tb: ComponentFixture<I18nComponent> =
+          TestBed.overrideTemplate(I18nComponent, HTML).createComponent(I18nComponent);
+      const cmp: I18nComponent = tb.componentInstance;
+      const el: DebugElement = tb.debugElement;
+
+      validateHtml(tb, cmp, el);
+    });
+  });
+}
+
+const XLIFF2_TOMERGE = `
+      <unit id="615790887472569365">
+      <segment>
+        <source>i18n attribute on tags</source>
+        <target>attributs i18n sur les balises</target>
+      </segment>
+    </unit>
+    <unit id="3707494640264351337">
+      <segment>
+        <source>nested</source>
+        <target>imbriqué</target>
+      </segment>
+    </unit>
+    <unit id="5539162898278769904">
+      <segment>
+        <source>nested</source>
+        <target>imbriqué</target>
+      </segment>
+    </unit>
+    <unit id="3780349238193953556">
+      <segment>
+        <source><pc id="0" equivStart="START_ITALIC_TEXT" equivEnd="CLOSE_ITALIC_TEXT" type="fmt" dispStart="&lt;i&gt;" dispEnd="&lt;/i&gt;">with placeholders</pc></source>
+        <target><pc id="0" equivStart="START_ITALIC_TEXT" equivEnd="CLOSE_ITALIC_TEXT" type="fmt" dispStart="&lt;i&gt;" dispEnd="&lt;/i&gt;">avec des espaces réservés</pc></target>
+      </segment>
+    </unit>
+    <unit id="5415448997399451992">
+      <notes>
+        <note category="location">file.ts:11</note>
+      </notes>
+      <segment>
+        <source><pc id="0" equivStart="START_TAG_DIV" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;">with <pc id="1" equivStart="START_TAG_DIV" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;">nested</pc> placeholders</pc></source>
+        <target><pc id="0" equivStart="START_TAG_DIV" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;">avec <pc id="1" equivStart="START_TAG_DIV" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;">espaces réservés</pc> imbriqués</pc></target>
+      </segment>
+    </unit>
+    <unit id="5525133077318024839">
+      <segment>
+        <source>on not translatable node</source>
+        <target>sur des balises non traductibles</target>
+      </segment>
+    </unit>
+    <unit id="8670732454866344690">
+      <segment>
+        <source>on translatable node</source>
+        <target>sur des balises traductibles</target>
+      </segment>
+    </unit>
+    <unit id="4593805537723189714">
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">many</pc>} }</source>
+        <target>{VAR_PLURAL, plural, =0 {zero} =1 {un} =2 {deux} other {<pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">beaucoup</pc>} }</target>
+      </segment>
+    </unit>
+    <unit id="4360321700965841752">
+      <segment>
+        <source>
+        <ph id="0" equiv="ICU" disp="{sex, select, 0 {...} m {...} f {...}}"/>
+    </source>
+        <target><ph id="0" equiv="ICU" disp="{sex, select, 0 {...} m {...} f {...}}"/></target>
+      </segment>
+    </unit>
+    <unit id="5460933846928880074">
+      <notes>
+        <note category="location">file.ts:23</note>
+      </notes>
+      <segment>
+        <source>{VAR_SELECT, select, 0 {other} m {male} f {female} }</source>
+        <target>{VAR_SELECT, select, 0 {autre} m {homme} f {femme} }</target>
+      </segment>
+    </unit>
+    <unit id="1746565782635215">
+      <notes>
+        <note category="location">file.ts:25,27</note>
+      </notes>
+      <segment>
+        <source>
+        <ph id="0" equiv="ICU" disp="{sexB, select, m {...} f {...}}"/>
+    </source>
+      <target><ph id="0" equiv="ICU" disp="{sexB, select, m {...} f {...}}"/></target>
+      </segment>
+    </unit>
+    <unit id="5868084092545682515">
+      <segment>
+        <source>{VAR_SELECT, select, m {male} f {female} }</source>
+        <target>{VAR_SELECT, select, m {homme} f {femme} }</target>
+      </segment>
+    </unit>
+    <unit id="4851788426695310455">
+      <segment>
+        <source><ph id="0" equiv="INTERPOLATION" disp="{{ &quot;count = &quot; + count }}"/></source>
+        <target><ph id="0" equiv="INTERPOLATION" disp="{{ &quot;count = &quot; + count }}"/></target>
+      </segment>
+    </unit>
+    <unit id="9013357158046221374">
+      <segment>
+        <source>sex = <ph id="0" equiv="INTERPOLATION" disp="{{ sex }}"/></source>
+        <target>sexe = <ph id="0" equiv="INTERPOLATION" disp="{{ sex }}"/></target>
+      </segment>
+    </unit>
+    <unit id="8324617391167353662">
+      <segment>
+        <source><ph id="0" equiv="CUSTOM_NAME" disp="{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}"/></source>
+        <target><ph id="0" equiv="CUSTOM_NAME" disp="{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}"/></target>
+      </segment>
+    </unit>
+    <unit id="7685649297917455806">
+      <segment>
+        <source>in a translatable section</source>
+        <target>dans une section traductible</target>
+      </segment>
+    </unit>
+    <unit id="2387287228265107305">
+      <segment>
+        <source>
+    <pc id="0" equivStart="START_HEADING_LEVEL1" equivEnd="CLOSE_HEADING_LEVEL1" type="other" dispStart="&lt;h1&gt;" dispEnd="&lt;/h1&gt;">Markers in html comments</pc>   
+    <pc id="1" equivStart="START_TAG_DIV" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;"></pc>
+    <pc id="2" equivStart="START_TAG_DIV_1" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;"><ph id="3" equiv="ICU" disp="{count, plural, =0 {...} =1 {...} =2 {...} other {...}}"/></pc>
+</source>
+        <target>
+    <pc id="0" equivStart="START_HEADING_LEVEL1" equivEnd="CLOSE_HEADING_LEVEL1" type="other" dispStart="&lt;h1&gt;" dispEnd="&lt;/h1&gt;">Balises dans les commentaires html</pc>   
+    <pc id="1" equivStart="START_TAG_DIV" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;"></pc>
+    <pc id="2" equivStart="START_TAG_DIV_1" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;"><ph id="3" equiv="ICU" disp="{count, plural, =0 {...} =1 {...} =2 {...} other {...}}"/></pc>
+</target>
+      </segment>
+    </unit>
+    <unit id="1491627405349178954">
+      <segment>
+        <source>it <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">should</pc> work</source>
+        <target>ca <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">devrait</pc> marcher</target>
+      </segment>
+    </unit>
+    <unit id="i18n16">
+      <segment>
+        <source>with an explicit ID</source>
+        <target>avec un ID explicite</target>
+      </segment>
+    </unit>
+    <unit id="i18n17">
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">many</pc>} }</source>
+        <target>{VAR_PLURAL, plural, =0 {zero} =1 {un} =2 {deux} other {<pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">beaucoup</pc>} }</target>
+      </segment>
+    </unit>
+    <unit id="4085484936881858615">
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <ph id="0" equiv="INTERPOLATION" disp="{{response.getItemsList().length}}"/> results} }</source>
+        <target>{VAR_PLURAL, plural, =0 {Pas de réponse} =1 {une réponse} other {Trouvé <ph id="0" equiv="INTERPOLATION" disp="{{response.getItemsList().length}}"/> réponses} }</target>
+      </segment>
+    </unit>
+    <unit id="4035252431381981115">
+      <segment>
+        <source>foo<pc id="0" equivStart="START_LINK" equivEnd="CLOSE_LINK" type="link" dispStart="&lt;a&gt;" dispEnd="&lt;/a&gt;">bar</pc></source>
+        <target>FOO<pc id="0" equivStart="START_LINK" equivEnd="CLOSE_LINK" type="link" dispStart="&lt;a&gt;" dispEnd="&lt;/a&gt;">BAR</pc></target>
+      </segment>
+    </unit>
+    <unit id="5339604010413301604">
+      <segment>
+        <source><ph id="0" equiv="MAP NAME" disp="{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}"/></source>
+        <target><ph id="0" equiv="MAP NAME" disp="{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}"/></target>
+      </segment>
+    </unit>`;
+
+const XLIFF2_EXTRACTED = `
+    <unit id="615790887472569365">
+      <notes>
+        <note category="location">file.ts:3</note>
+      </notes>
+      <segment>
+        <source>i18n attribute on tags</source>
+      </segment>
+    </unit>
+    <unit id="3707494640264351337">
+      <notes>
+        <note category="location">file.ts:5</note>
+      </notes>
+      <segment>
+        <source>nested</source>
+      </segment>
+    </unit>
+    <unit id="5539162898278769904">
+      <notes>
+        <note category="meaning">different meaning</note>
+        <note category="location">file.ts:7</note>
+      </notes>
+      <segment>
+        <source>nested</source>
+      </segment>
+    </unit>
+    <unit id="3780349238193953556">
+      <notes>
+        <note category="location">file.ts:9</note>
+        <note category="location">file.ts:10</note>
+      </notes>
+      <segment>
+        <source><pc id="0" equivStart="START_ITALIC_TEXT" equivEnd="CLOSE_ITALIC_TEXT" type="fmt" dispStart="&lt;i&gt;" dispEnd="&lt;/i&gt;">with placeholders</pc></source>
+      </segment>
+    </unit>
+    <unit id="5415448997399451992">
+      <notes>
+        <note category="location">file.ts:11</note>
+      </notes>
+      <segment>
+        <source><pc id="0" equivStart="START_TAG_DIV" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;">with <pc id="1" equivStart="START_TAG_DIV" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;">nested</pc> placeholders</pc></source>
+      </segment>
+    </unit>
+    <unit id="5525133077318024839">
+      <notes>
+        <note category="location">file.ts:14</note>
+      </notes>
+      <segment>
+        <source>on not translatable node</source>
+      </segment>
+    </unit>
+    <unit id="8670732454866344690">
+      <notes>
+        <note category="location">file.ts:15</note>
+      </notes>
+      <segment>
+        <source>on translatable node</source>
+      </segment>
+    </unit>
+    <unit id="4593805537723189714">
+      <notes>
+        <note category="location">file.ts:20</note>
+        <note category="location">file.ts:37</note>
+      </notes>
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">many</pc>} }</source>
+      </segment>
+    </unit>
+    <unit id="4360321700965841752">
+      <notes>
+        <note category="location">file.ts:22,24</note>
+      </notes>
+      <segment>
+        <source>
+        <ph id="0" equiv="ICU" disp="{sex, select, 0 {...} m {...} f {...}}"/>
+    </source>
+      </segment>
+    </unit>
+    <unit id="5460933846928880074">
+      <notes>
+        <note category="location">file.ts:23</note>
+      </notes>
+      <segment>
+        <source>{VAR_SELECT, select, 0 {other} m {male} f {female} }</source>
+      </segment>
+    </unit>
+    <unit id="1746565782635215">
+      <notes>
+        <note category="location">file.ts:25,27</note>
+      </notes>
+      <segment>
+        <source>
+        <ph id="0" equiv="ICU" disp="{sexB, select, m {...} f {...}}"/>
+    </source>
+      </segment>
+    </unit>
+    <unit id="5868084092545682515">
+      <notes>
+        <note category="location">file.ts:26</note>
+      </notes>
+      <segment>
+        <source>{VAR_SELECT, select, m {male} f {female} }</source>
+      </segment>
+    </unit>
+    <unit id="4851788426695310455">
+      <notes>
+        <note category="location">file.ts:29</note>
+      </notes>
+      <segment>
+        <source><ph id="0" equiv="INTERPOLATION" disp="{{ &quot;count = &quot; + count }}"/></source>
+      </segment>
+    </unit>
+    <unit id="9013357158046221374">
+      <notes>
+        <note category="location">file.ts:30</note>
+      </notes>
+      <segment>
+        <source>sex = <ph id="0" equiv="INTERPOLATION" disp="{{ sex }}"/></source>
+      </segment>
+    </unit>
+    <unit id="8324617391167353662">
+      <notes>
+        <note category="location">file.ts:31</note>
+      </notes>
+      <segment>
+        <source><ph id="0" equiv="CUSTOM_NAME" disp="{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}"/></source>
+      </segment>
+    </unit>
+    <unit id="7685649297917455806">
+      <notes>
+        <note category="location">file.ts:36</note>
+        <note category="location">file.ts:54</note>
+      </notes>
+      <segment>
+        <source>in a translatable section</source>
+      </segment>
+    </unit>
+    <unit id="2387287228265107305">
+      <notes>
+        <note category="location">file.ts:34,38</note>
+      </notes>
+      <segment>
+        <source>
+    <pc id="0" equivStart="START_HEADING_LEVEL1" equivEnd="CLOSE_HEADING_LEVEL1" type="other" dispStart="&lt;h1&gt;" dispEnd="&lt;/h1&gt;">Markers in html comments</pc>   
+    <pc id="1" equivStart="START_TAG_DIV" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;"></pc>
+    <pc id="2" equivStart="START_TAG_DIV_1" equivEnd="CLOSE_TAG_DIV" type="other" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;"><ph id="3" equiv="ICU" disp="{count, plural, =0 {...} =1 {...} =2 {...} other {...}}"/></pc>
+</source>
+      </segment>
+    </unit>
+    <unit id="1491627405349178954">
+      <notes>
+        <note category="location">file.ts:40</note>
+      </notes>
+      <segment>
+        <source>it <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">should</pc> work</source>
+      </segment>
+    </unit>
+    <unit id="i18n16">
+      <notes>
+        <note category="location">file.ts:42</note>
+      </notes>
+      <segment>
+        <source>with an explicit ID</source>
+      </segment>
+    </unit>
+    <unit id="i18n17">
+      <notes>
+        <note category="location">file.ts:43</note>
+      </notes>
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">many</pc>} }</source>
+      </segment>
+    </unit>
+    <unit id="4085484936881858615">
+      <notes>
+        <note category="description">desc</note>
+        <note category="location">file.ts:46,52</note>
+      </notes>
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <ph id="0" equiv="INTERPOLATION" disp="{{response.getItemsList().length}}"/> results} }</source>
+      </segment>
+    </unit>
+    <unit id="4035252431381981115">
+      <notes>
+        <note category="location">file.ts:54</note>
+      </notes>
+      <segment>
+        <source>foo<pc id="0" equivStart="START_LINK" equivEnd="CLOSE_LINK" type="link" dispStart="&lt;a&gt;" dispEnd="&lt;/a&gt;">bar</pc></source>
+      </segment>
+    </unit>
+    <unit id="5339604010413301604">
+      <notes>
+        <note category="location">file.ts:56</note>
+      </notes>
+      <segment>
+        <source><ph id="0" equiv="MAP NAME" disp="{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}"/></source>
+      </segment>
+    </unit>`;
diff --git a/packages/compiler/test/i18n/integration_xliff_spec.ts b/packages/compiler/test/i18n/integration_xliff_spec.ts
index d082c283dd..1bcc2f0cc6 100644
--- a/packages/compiler/test/i18n/integration_xliff_spec.ts
+++ b/packages/compiler/test/i18n/integration_xliff_spec.ts
@@ -39,7 +39,7 @@ export function main() {
     it('should extract from templates', () => {
       const catalog = new MessageBundle(new HtmlParser, [], {});
       const serializer = new Xliff();
-      catalog.updateFromTemplate(HTML, '', DEFAULT_INTERPOLATION_CONFIG);
+      catalog.updateFromTemplate(HTML, 'file.ts', DEFAULT_INTERPOLATION_CONFIG);
 
       expect(catalog.write(serializer)).toContain(XLIFF_EXTRACTED);
     });
@@ -70,9 +70,17 @@ const XLIFF_TOMERGE = `
         <note priority="1" from="meaning">different meaning</note>
       </trans-unit>
       <trans-unit id="34fec9cc62e28e8aa6ffb306fa8569ef0a8087fe" datatype="html">
-        <source><x id="START_ITALIC_TEXT" ctype="x-i"/>with placeholders<x id="CLOSE_ITALIC_TEXT" ctype="x-i"/></source>
+        <source><x id="START_ITALIC_TEXT" ctype="x-i" equiv-text="&lt;i&gt;"/>with placeholders<x id="CLOSE_ITALIC_TEXT" ctype="x-i" equiv-text="&lt;/i&gt;"/></source>
         <target><x id="START_ITALIC_TEXT" ctype="x-i"/>avec des espaces réservés<x id="CLOSE_ITALIC_TEXT" ctype="x-i"/></target>
       </trans-unit>
+      <trans-unit id="651d7249d3a225037eb66f3433d98ad4a86f0a22" datatype="html">
+        <source><x id="START_TAG_DIV" ctype="x-div"/>with <x id="START_TAG_DIV" ctype="x-div"/>nested<x id="CLOSE_TAG_DIV" ctype="x-div"/> placeholders<x id="CLOSE_TAG_DIV" ctype="x-div"/></source>
+        <target><x id="START_TAG_DIV" ctype="x-div"/>with <x id="START_TAG_DIV" ctype="x-div"/>nested<x id="CLOSE_TAG_DIV" ctype="x-div"/> placeholders<x id="CLOSE_TAG_DIV" ctype="x-div"/></target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">11</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="1fe4616cce80a57c7707bac1c97054aa8e244a67" datatype="html">
         <source>on not translatable node</source>
         <target>sur des balises non traductibles</target>
@@ -82,22 +90,22 @@ const XLIFF_TOMERGE = `
         <target>sur des balises traductibles</target>
       </trans-unit>
       <trans-unit id="dc5536bb9e0e07291c185a0d306601a2ecd4813f" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b"/>} }</source>
+        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>} }</source>
         <target>{VAR_PLURAL, plural, =0 {zero} =1 {un} =2 {deux} other {<x id="START_BOLD_TEXT" ctype="x-b"/>beaucoup<x id="CLOSE_BOLD_TEXT" ctype="x-b"/>} }</target>
       </trans-unit>
-      <trans-unit id="85ef51de59fe5a8d13fba977b6689f164420c8ca" datatype="html">
+      <trans-unit id="ba9106fca6e4e33a9b703a8c1927e2d1794dd9ff" datatype="html">
         <source>
-        <x id="ICU"/>
+        <x id="ICU" equiv-text="{sex, select, m {...} f {...}}"/>
     </source>
         <target><x id="ICU"/></target>
       </trans-unit>
-      <trans-unit id="c0ca5e58fe954d528bbfa516007a5a11690a7e99" datatype="html">
-        <source>{VAR_SELECT, select, m {male} f {female} }</source>
-        <target>{VAR_SELECT, select, m {homme} f {femme} }</target>
+      <trans-unit id="7b7916d063ebaafcd2e9dcdf697b5e184fcb8099" datatype="html">
+        <source>{VAR_SELECT, select, 0 {other} m {male} f {female} }</source>
+        <target>{VAR_SELECT, select, 0 {autre} m {homme} f {femme}}</target>
       </trans-unit>
       <trans-unit id="078b7089573c5f66a2f78dce0adaa55e6715beb1" datatype="html">
         <source>
-        <x id="ICU"/>
+        <x id="ICU" equiv-text="{sexB, select, m {...} f {...}}"/>
     </source>
         <target><x id="ICU"/></target>
       </trans-unit>
@@ -106,15 +114,15 @@ const XLIFF_TOMERGE = `
         <target>{VAR_SELECT, select, m {homme} f {femme} }</target>
       </trans-unit>
       <trans-unit id="d9879678f727b244bc7c7e20f22b63d98cb14890" datatype="html">
-        <source><x id="INTERPOLATION"/></source>
+        <source><x id="INTERPOLATION" equiv-text="{{ &quot;count = &quot; + count }}"/></source>
         <target><x id="INTERPOLATION"/></target>
       </trans-unit>
       <trans-unit id="50dac33dc6fc0578884baac79d875785ed77c928" datatype="html">
-        <source>sex = <x id="INTERPOLATION"/></source>
+        <source>sex = <x id="INTERPOLATION" equiv-text="{{ sex }}"/></source>
         <target>sexe = <x id="INTERPOLATION"/></target>
       </trans-unit>
       <trans-unit id="a46f833b1fe6ca49e8b97c18f4b7ea0b930c9383" datatype="html">
-        <source><x id="CUSTOM_NAME"/></source>
+        <source><x id="CUSTOM_NAME" equiv-text="{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}"/></source>
         <target><x id="CUSTOM_NAME"/></target>
       </trans-unit>
       <trans-unit id="2ec983b4893bcd5b24af33bebe3ecba63868453c" datatype="html">
@@ -123,18 +131,18 @@ const XLIFF_TOMERGE = `
       </trans-unit>
       <trans-unit id="eee74a5be8a75881a4785905bd8302a71f7d9f75" datatype="html">
         <source>
-    <x id="START_HEADING_LEVEL1" ctype="x-h1"/>Markers in html comments<x id="CLOSE_HEADING_LEVEL1" ctype="x-h1"/>   
-    <x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/>
-    <x id="START_TAG_DIV_1" ctype="x-div"/><x id="ICU"/><x id="CLOSE_TAG_DIV" ctype="x-div"/>
+    <x id="START_HEADING_LEVEL1" ctype="x-h1" equiv-text="&lt;h1&gt;"/>Markers in html comments<x id="CLOSE_HEADING_LEVEL1" ctype="x-h1" equiv-text="&lt;/h1&gt;"/>   
+    <x id="START_TAG_DIV" ctype="x-div" equiv-text="&lt;div&gt;"/><x id="CLOSE_TAG_DIV" ctype="x-div" equiv-text="&lt;/div&gt;"/>
+    <x id="START_TAG_DIV_1" ctype="x-div" equiv-text="&lt;div&gt;"/><x id="ICU" equiv-text="{count, plural, =0 {...} =1 {...} =2 {...} other {...}}"/><x id="CLOSE_TAG_DIV" ctype="x-div" equiv-text="&lt;/div&gt;"/>
 </source>
         <target>
-    <x id="START_HEADING_LEVEL1" ctype="x-h1"/>Balises dans les commentaires html<x id="CLOSE_HEADING_LEVEL1" ctype="x-h1"/>   
+    <x id="START_HEADING_LEVEL1" ctype="x-h1"/>Balises dans les commentaires html<x id="CLOSE_HEADING_LEVEL1" ctype="x-h1"/>
     <x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/>
     <x id="START_TAG_DIV_1" ctype="x-div"/><x id="ICU"/><x id="CLOSE_TAG_DIV" ctype="x-div"/>
 </target>
       </trans-unit>
       <trans-unit id="93a30c67d4e6c9b37aecfe2ac0f2b5d366d7b520" datatype="html">
-        <source>it <x id="START_BOLD_TEXT" ctype="x-b"/>should<x id="CLOSE_BOLD_TEXT" ctype="x-b"/> work</source>
+        <source>it <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/>should<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/> work</source>
         <target>ca <x id="START_BOLD_TEXT" ctype="x-b"/>devrait<x id="CLOSE_BOLD_TEXT" ctype="x-b"/> marcher</target>
       </trans-unit>
       <trans-unit id="i18n16" datatype="html">
@@ -142,119 +150,204 @@ const XLIFF_TOMERGE = `
         <target>avec un ID explicite</target>
       </trans-unit>
       <trans-unit id="i18n17" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b"/>} }</source>
+        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>} }</source>
         <target>{VAR_PLURAL, plural, =0 {zero} =1 {un} =2 {deux} other {<x id="START_BOLD_TEXT" ctype="x-b"/>beaucoup<x id="CLOSE_BOLD_TEXT" ctype="x-b"/>} }</target>
       </trans-unit>
       <trans-unit id="2370d995bdcc1e7496baa32df20654aff65c2d10" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <x id="INTERPOLATION"/> results} }</source>
+        <source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <x id="INTERPOLATION" equiv-text="{{response.getItemsList().length}}"/> results} }</source>
         <target>{VAR_PLURAL, plural, =0 {Pas de réponse} =1 {une réponse} other {Found <x id="INTERPOLATION"/> réponse} }</target>
         <note priority="1" from="description">desc</note>
       </trans-unit>
       <trans-unit id="296ab5eab8d370822488c152586db3a5875ee1a2" datatype="html">
-        <source>foo<x id="START_LINK" ctype="x-a"/>bar<x id="CLOSE_LINK" ctype="x-a"/></source>
+        <source>foo<x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>bar<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/></source>
         <target>FOO<x id="START_LINK" ctype="x-a"/>BAR<x id="CLOSE_LINK" ctype="x-a"/></target>
       </trans-unit>
       <trans-unit id="2e013b311caa0916478941a985887e091d8288b6" datatype="html">
-        <source><x id="MAP NAME"/></source>
+        <source><x id="MAP NAME" equiv-text="{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}"/></source>
         <target><x id="MAP NAME"/></target>
       </trans-unit>`;
 
 const XLIFF_EXTRACTED = `
       <trans-unit id="3cb04208df1c2f62553ed48e75939cf7107f9dad" datatype="html">
         <source>i18n attribute on tags</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">3</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="52895b1221effb3f3585b689f049d2784d714952" datatype="html">
         <source>nested</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">5</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="88d5f22050a9df477ee5646153558b3a4862d47e" datatype="html">
         <source>nested</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">7</context>
+        </context-group>
         <note priority="1" from="meaning">different meaning</note>
       </trans-unit>
       <trans-unit id="34fec9cc62e28e8aa6ffb306fa8569ef0a8087fe" datatype="html">
-        <source><x id="START_ITALIC_TEXT" ctype="x-i"/>with placeholders<x id="CLOSE_ITALIC_TEXT" ctype="x-i"/></source>
-        <target/>
+        <source><x id="START_ITALIC_TEXT" ctype="x-i" equiv-text="&lt;i&gt;"/>with placeholders<x id="CLOSE_ITALIC_TEXT" ctype="x-i" equiv-text="&lt;/i&gt;"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">9</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">10</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="651d7249d3a225037eb66f3433d98ad4a86f0a22" datatype="html">
+        <source><x id="START_TAG_DIV" ctype="x-div" equiv-text="&lt;div&gt;"/>with <x id="START_TAG_DIV" ctype="x-div" equiv-text="&lt;div&gt;"/>nested<x id="CLOSE_TAG_DIV" ctype="x-div" equiv-text="&lt;/div&gt;"/> placeholders<x id="CLOSE_TAG_DIV" ctype="x-div" equiv-text="&lt;/div&gt;"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">11</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="1fe4616cce80a57c7707bac1c97054aa8e244a67" datatype="html">
         <source>on not translatable node</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">14</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="67162b5af5f15fd0eb6480c88688dafdf952b93a" datatype="html">
         <source>on translatable node</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">15</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="dc5536bb9e0e07291c185a0d306601a2ecd4813f" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b"/>} }</source>
-        <target/>
+        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">20</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">37</context>
+        </context-group>
       </trans-unit>
-      <trans-unit id="85ef51de59fe5a8d13fba977b6689f164420c8ca" datatype="html">
+      <trans-unit id="ba9106fca6e4e33a9b703a8c1927e2d1794dd9ff" datatype="html">
         <source>
-        <x id="ICU"/>
+        <x id="ICU" equiv-text="{sex, select, 0 {...} m {...} f {...}}"/>
     </source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">22</context>
+        </context-group>
       </trans-unit>
-      <trans-unit id="c0ca5e58fe954d528bbfa516007a5a11690a7e99" datatype="html">
-        <source>{VAR_SELECT, select, m {male} f {female} }</source>
-        <target/>
+      <trans-unit id="7b7916d063ebaafcd2e9dcdf697b5e184fcb8099" datatype="html">
+        <source>{VAR_SELECT, select, 0 {other} m {male} f {female} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">23</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="078b7089573c5f66a2f78dce0adaa55e6715beb1" datatype="html">
         <source>
-        <x id="ICU"/>
+        <x id="ICU" equiv-text="{sexB, select, m {...} f {...}}"/>
     </source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">25</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="a25cf2e21a299f30be1392e731163825233edc61" datatype="html">
         <source>{VAR_SELECT, select, m {male} f {female} }</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d9879678f727b244bc7c7e20f22b63d98cb14890" datatype="html">
-        <source><x id="INTERPOLATION"/></source>
-        <target/>
+        <source><x id="INTERPOLATION" equiv-text="{{ &quot;count = &quot; + count }}"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">29</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="50dac33dc6fc0578884baac79d875785ed77c928" datatype="html">
-        <source>sex = <x id="INTERPOLATION"/></source>
-        <target/>
+        <source>sex = <x id="INTERPOLATION" equiv-text="{{ sex }}"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="a46f833b1fe6ca49e8b97c18f4b7ea0b930c9383" datatype="html">
-        <source><x id="CUSTOM_NAME"/></source>
-        <target/>
+        <source><x id="CUSTOM_NAME" equiv-text="{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">31</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="2ec983b4893bcd5b24af33bebe3ecba63868453c" datatype="html">
         <source>in a translatable section</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">36</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">54</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="eee74a5be8a75881a4785905bd8302a71f7d9f75" datatype="html">
         <source>
-    <x id="START_HEADING_LEVEL1" ctype="x-h1"/>Markers in html comments<x id="CLOSE_HEADING_LEVEL1" ctype="x-h1"/>   
-    <x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/>
-    <x id="START_TAG_DIV_1" ctype="x-div"/><x id="ICU"/><x id="CLOSE_TAG_DIV" ctype="x-div"/>
+    <x id="START_HEADING_LEVEL1" ctype="x-h1" equiv-text="&lt;h1&gt;"/>Markers in html comments<x id="CLOSE_HEADING_LEVEL1" ctype="x-h1" equiv-text="&lt;/h1&gt;"/>   
+    <x id="START_TAG_DIV" ctype="x-div" equiv-text="&lt;div&gt;"/><x id="CLOSE_TAG_DIV" ctype="x-div" equiv-text="&lt;/div&gt;"/>
+    <x id="START_TAG_DIV_1" ctype="x-div" equiv-text="&lt;div&gt;"/><x id="ICU" equiv-text="{count, plural, =0 {...} =1 {...} =2 {...} other {...}}"/><x id="CLOSE_TAG_DIV" ctype="x-div" equiv-text="&lt;/div&gt;"/>
 </source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">34</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="93a30c67d4e6c9b37aecfe2ac0f2b5d366d7b520" datatype="html">
-        <source>it <x id="START_BOLD_TEXT" ctype="x-b"/>should<x id="CLOSE_BOLD_TEXT" ctype="x-b"/> work</source>
-        <target/>
+        <source>it <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/>should<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/> work</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">40</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="i18n16" datatype="html">
         <source>with an explicit ID</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">42</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="i18n17" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b"/>} }</source>
-        <target/>
+        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">43</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="2370d995bdcc1e7496baa32df20654aff65c2d10" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <x id="INTERPOLATION"/> results} }</source>
-        <target/>
+        <source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <x id="INTERPOLATION" equiv-text="{{response.getItemsList().length}}"/> results} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">46</context>
+        </context-group>
         <note priority="1" from="description">desc</note>
       </trans-unit>
       <trans-unit id="296ab5eab8d370822488c152586db3a5875ee1a2" datatype="html">
-        <source>foo<x id="START_LINK" ctype="x-a"/>bar<x id="CLOSE_LINK" ctype="x-a"/></source>
-        <target/>
+        <source>foo<x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>bar<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">54</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="2e013b311caa0916478941a985887e091d8288b6" datatype="html">
-        <source><x id="MAP NAME"/></source>
-        <target/>
+        <source><x id="MAP NAME" equiv-text="{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">56</context>
+        </context-group>
       </trans-unit>`;
diff --git a/packages/compiler/test/i18n/integration_xmb_xtb_spec.ts b/packages/compiler/test/i18n/integration_xmb_xtb_spec.ts
index d4e78b2958..ebd7c324f7 100644
--- a/packages/compiler/test/i18n/integration_xmb_xtb_spec.ts
+++ b/packages/compiler/test/i18n/integration_xmb_xtb_spec.ts
@@ -39,7 +39,7 @@ export function main() {
     it('should extract from templates', () => {
       const catalog = new MessageBundle(new HtmlParser, [], {});
       const serializer = new Xmb();
-      catalog.updateFromTemplate(HTML, '', DEFAULT_INTERPOLATION_CONFIG);
+      catalog.updateFromTemplate(HTML, 'file.ts', DEFAULT_INTERPOLATION_CONFIG);
 
       expect(catalog.write(serializer)).toContain(XMB);
     });
@@ -61,9 +61,12 @@ const XTB = `
   <translation id="3707494640264351337">imbriqué</translation>
   <translation id="5539162898278769904">imbriqué</translation>
   <translation id="3780349238193953556"><ph name="START_ITALIC_TEXT"/>avec des espaces réservés<ph name="CLOSE_ITALIC_TEXT"/></translation>
+  <translation id="5415448997399451992"><ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex></ph>avec <ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex></ph>des espaces réservés<ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph> imbriqués<ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph></translation>
   <translation id="5525133077318024839">sur des balises non traductibles</translation>
   <translation id="8670732454866344690">sur des balises traductibles</translation>
   <translation id="4593805537723189714">{VAR_PLURAL, plural, =0 {zero} =1 {un} =2 {deux} other {<ph name="START_BOLD_TEXT"/>beaucoup<ph name="CLOSE_BOLD_TEXT"/>}}</translation>
+  <translation id="4360321700965841752"><ph name="ICU"/></translation>
+  <translation id="5460933846928880074">{VAR_SELECT, select, 0 {autre} m {homme} f {femme} }</translation>
   <translation id="1746565782635215"><ph name="ICU"/></translation>
   <translation id="5868084092545682515">{VAR_SELECT, select, m {homme} f {femme}}</translation>
   <translation id="4851788426695310455"><ph name="INTERPOLATION"/></translation>
@@ -84,29 +87,34 @@ const XTB = `
   <translation id="5339604010413301604"><ph name="MAP_NAME"><ex>MAP_NAME</ex></ph></translation>
 </translationbundle>`;
 
-const XMB = ` <msg id="615790887472569365">i18n attribute on tags</msg>
-  <msg id="3707494640264351337">nested</msg>
-  <msg id="5539162898278769904" meaning="different meaning">nested</msg>
-  <msg id="3780349238193953556"><ph name="START_ITALIC_TEXT"><ex>&lt;i&gt;</ex></ph>with placeholders<ph name="CLOSE_ITALIC_TEXT"><ex>&lt;/i&gt;</ex></ph></msg>
-  <msg id="5525133077318024839">on not translatable node</msg>
-  <msg id="8670732454866344690">on translatable node</msg>
-  <msg id="4593805537723189714">{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</msg>
-  <msg id="1746565782635215">
-        <ph name="ICU"><ex>ICU</ex></ph>
+const XMB = `<msg id="615790887472569365"><source>file.ts:3</source>i18n attribute on tags</msg>
+  <msg id="3707494640264351337"><source>file.ts:5</source>nested</msg>
+  <msg id="5539162898278769904" meaning="different meaning"><source>file.ts:7</source>nested</msg>
+  <msg id="3780349238193953556"><source>file.ts:9</source><source>file.ts:10</source><ph name="START_ITALIC_TEXT"><ex>&lt;i&gt;</ex></ph>with placeholders<ph name="CLOSE_ITALIC_TEXT"><ex>&lt;/i&gt;</ex></ph></msg>
+  <msg id="5415448997399451992"><source>file.ts:11</source><ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex></ph>with <ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex></ph>nested<ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph> placeholders<ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph></msg>
+  <msg id="5525133077318024839"><source>file.ts:14</source>on not translatable node</msg>
+  <msg id="8670732454866344690"><source>file.ts:15</source>on translatable node</msg>
+  <msg id="4593805537723189714"><source>file.ts:20</source><source>file.ts:37</source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</msg>
+  <msg id="4360321700965841752"><source>file.ts:22,24</source>
+        <ph name="ICU"><ex>{sex, select, 0 {...} m {...} f {...}}</ex></ph>
     </msg>
-  <msg id="5868084092545682515">{VAR_SELECT, select, m {male} f {female} }</msg>
-  <msg id="4851788426695310455"><ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph></msg>
-  <msg id="9013357158046221374">sex = <ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph></msg>
-  <msg id="8324617391167353662"><ph name="CUSTOM_NAME"><ex>CUSTOM_NAME</ex></ph></msg>
-  <msg id="7685649297917455806">in a translatable section</msg>
-  <msg id="2387287228265107305">
+  <msg id="5460933846928880074"><source>file.ts:23</source>{VAR_SELECT, select, 0 {other} m {male} f {female} }</msg>
+  <msg id="1746565782635215"><source>file.ts:25,27</source>
+        <ph name="ICU"><ex>{sexB, select, m {...} f {...}}</ex></ph>
+    </msg>
+  <msg id="5868084092545682515"><source>file.ts:26</source>{VAR_SELECT, select, m {male} f {female} }</msg>
+  <msg id="4851788426695310455"><source>file.ts:29</source><ph name="INTERPOLATION"><ex>{{ &quot;count = &quot; + count }}</ex></ph></msg>
+  <msg id="9013357158046221374"><source>file.ts:30</source>sex = <ph name="INTERPOLATION"><ex>{{ sex }}</ex></ph></msg>
+  <msg id="8324617391167353662"><source>file.ts:31</source><ph name="CUSTOM_NAME"><ex>{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}</ex></ph></msg>
+  <msg id="7685649297917455806"><source>file.ts:36</source><source>file.ts:54</source>in a translatable section</msg>
+  <msg id="2387287228265107305"><source>file.ts:34,38</source>
     <ph name="START_HEADING_LEVEL1"><ex>&lt;h1&gt;</ex></ph>Markers in html comments<ph name="CLOSE_HEADING_LEVEL1"><ex>&lt;/h1&gt;</ex></ph>   
     <ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex></ph><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph>
-    <ph name="START_TAG_DIV_1"><ex>&lt;div&gt;</ex></ph><ph name="ICU"><ex>ICU</ex></ph><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph>
+    <ph name="START_TAG_DIV_1"><ex>&lt;div&gt;</ex></ph><ph name="ICU"><ex>{count, plural, =0 {...} =1 {...} =2 {...} other {...}}</ex></ph><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph>
 </msg>
-  <msg id="1491627405349178954">it <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>should<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph> work</msg>
-  <msg id="i18n16">with an explicit ID</msg>
-  <msg id="i18n17">{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</msg>
-  <msg id="4085484936881858615" desc="desc">{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph> results} }</msg>
-  <msg id="4035252431381981115">foo<ph name="START_LINK"><ex>&lt;a&gt;</ex></ph>bar<ph name="CLOSE_LINK"><ex>&lt;/a&gt;</ex></ph></msg>
-  <msg id="5339604010413301604"><ph name="MAP_NAME"><ex>MAP_NAME</ex></ph></msg>`;
+  <msg id="1491627405349178954"><source>file.ts:40</source>it <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>should<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph> work</msg>
+  <msg id="i18n16"><source>file.ts:42</source>with an explicit ID</msg>
+  <msg id="i18n17"><source>file.ts:43</source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</msg>
+  <msg id="4085484936881858615" desc="desc"><source>file.ts:46,52</source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <ph name="INTERPOLATION"><ex>{{response.getItemsList().length}}</ex></ph> results} }</msg>
+  <msg id="4035252431381981115"><source>file.ts:54</source>foo<ph name="START_LINK"><ex>&lt;a&gt;</ex></ph>bar<ph name="CLOSE_LINK"><ex>&lt;/a&gt;</ex></ph></msg>
+  <msg id="5339604010413301604"><source>file.ts:56</source><ph name="MAP_NAME"><ex>{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}</ex></ph></msg>`;
diff --git a/packages/compiler/test/i18n/serializers/xliff2_spec.ts b/packages/compiler/test/i18n/serializers/xliff2_spec.ts
new file mode 100644
index 0000000000..2ed9c998ab
--- /dev/null
+++ b/packages/compiler/test/i18n/serializers/xliff2_spec.ts
@@ -0,0 +1,416 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {escapeRegExp} from '@angular/compiler/src/util';
+
+import {serializeNodes} from '../../../src/i18n/digest';
+import {MessageBundle} from '../../../src/i18n/message_bundle';
+import {Xliff2} from '../../../src/i18n/serializers/xliff2';
+import {HtmlParser} from '../../../src/ml_parser/html_parser';
+import {DEFAULT_INTERPOLATION_CONFIG} from '../../../src/ml_parser/interpolation_config';
+
+const HTML = `
+<p i18n-title title="translatable attribute">not translatable</p>
+<p i18n>translatable element <b>with placeholders</b> {{ interpolation}}</p>
+<!-- i18n -->{ count, plural, =0 {<p>test</p>}}<!-- /i18n -->
+<p i18n="m|d@@i">foo</p>
+<p i18n="nested"><b><u>{{interpolation}} Text</u></b></p>
+<p i18n="ph names"><br><img src="1.jpg"><img src="2.jpg"></p>
+<p i18n="empty element">hello <span></span></p>
+<p i18n="@@baz">{ count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} }}</p>
+<p i18n>Test: { count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} } =other {a lot}}</p>
+<p i18n>multi
+lines</p>
+`;
+
+const WRITE_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="1933478729560469763">
+      <notes>
+        <note category="location">file.ts:2</note>
+      </notes>
+      <segment>
+        <source>translatable attribute</source>
+      </segment>
+    </unit>
+    <unit id="7056919470098446707">
+      <notes>
+        <note category="location">file.ts:3</note>
+      </notes>
+      <segment>
+        <source>translatable element <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">with placeholders</pc> <ph id="1" equiv="INTERPOLATION" disp="{{ interpolation}}"/></source>
+      </segment>
+    </unit>
+    <unit id="2981514368455622387">
+      <notes>
+        <note category="location">file.ts:4</note>
+      </notes>
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">test</pc>} }</source>
+      </segment>
+    </unit>
+    <unit id="i">
+      <notes>
+        <note category="description">d</note>
+        <note category="meaning">m</note>
+        <note category="location">file.ts:5</note>
+      </notes>
+      <segment>
+        <source>foo</source>
+      </segment>
+    </unit>
+    <unit id="6440235004920703622">
+      <notes>
+        <note category="description">nested</note>
+        <note category="location">file.ts:6</note>
+      </notes>
+      <segment>
+        <source><pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"><pc id="1" equivStart="START_UNDERLINED_TEXT" equivEnd="CLOSE_UNDERLINED_TEXT" type="fmt" dispStart="&lt;u&gt;" dispEnd="&lt;/u&gt;"><ph id="2" equiv="INTERPOLATION" disp="{{interpolation}}"/> Text</pc></pc></source>
+      </segment>
+    </unit>
+    <unit id="8779402634269838862">
+      <notes>
+        <note category="description">ph names</note>
+        <note category="location">file.ts:7</note>
+      </notes>
+      <segment>
+        <source><ph id="0" equiv="LINE_BREAK" type="fmt" disp="&lt;br/&gt;"/><ph id="1" equiv="TAG_IMG" type="image" disp="&lt;img/&gt;"/><ph id="2" equiv="TAG_IMG_1" type="image" disp="&lt;img/&gt;"/></source>
+      </segment>
+    </unit>
+    <unit id="6536355551500405293">
+      <notes>
+        <note category="description">empty element</note>
+        <note category="location">file.ts:8</note>
+      </notes>
+      <segment>
+        <source>hello <pc id="0" equivStart="START_TAG_SPAN" equivEnd="CLOSE_TAG_SPAN" type="other" dispStart="&lt;span&gt;" dispEnd="&lt;/span&gt;"></pc></source>
+      </segment>
+    </unit>
+    <unit id="baz">
+      <notes>
+        <note category="location">file.ts:9</note>
+      </notes>
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">deeply nested</pc>} } } }</source>
+      </segment>
+    </unit>
+    <unit id="6997386649824869937">
+      <notes>
+        <note category="location">file.ts:10</note>
+      </notes>
+      <segment>
+        <source>Test: <ph id="0" equiv="ICU" disp="{ count, plural, =0 {...} =other {...}}"/></source>
+      </segment>
+    </unit>
+    <unit id="5229984852258993423">
+      <notes>
+        <note category="location">file.ts:10</note>
+      </notes>
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">deeply nested</pc>} } } =other {a lot} }</source>
+      </segment>
+    </unit>
+    <unit id="2340165783990709777">
+      <notes>
+        <note category="location">file.ts:11,12</note>
+      </notes>
+      <segment>
+        <source>multi
+lines</source>
+      </segment>
+    </unit>
+  </file>
+</xliff>
+`;
+
+const LOAD_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en" trgLang="fr">
+  <file original="ng.template" id="ngi18n">
+    <unit id="1933478729560469763">
+      <notes>
+        <note category="location">file.ts:2</note>
+      </notes>
+      <segment>
+        <source>translatable attribute</source>
+        <target>etubirtta elbatalsnart</target>
+      </segment>
+    </unit>
+    <unit id="7056919470098446707">
+      <notes>
+        <note category="location">file.ts:3</note>
+      </notes>
+      <segment>
+        <source>translatable element <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">with placeholders</pc> <ph id="1" equiv="INTERPOLATION" disp="{{ interpolation}}"/></source>
+        <target><ph id="1" equiv="INTERPOLATION" disp="{{ interpolation}}"/> <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">sredlohecalp htiw</pc> tnemele elbatalsnart</target>
+      </segment>
+    </unit>
+    <unit id="2981514368455622387">
+      <notes>
+        <note category="location">file.ts:4</note>
+      </notes>
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">test</pc>} }</source>
+        <target>{VAR_PLURAL, plural, =0 {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">TEST</pc>} }</target>
+      </segment>
+    </unit>
+    <unit id="i">
+      <notes>
+        <note category="description">d</note>
+        <note category="meaning">m</note>
+        <note category="location">file.ts:5</note>
+      </notes>
+      <segment>
+        <source>foo</source>
+        <target>oof</target>
+      </segment>
+    </unit>
+    <unit id="6440235004920703622">
+      <notes>
+        <note category="description">nested</note>
+        <note category="location">file.ts:6</note>
+      </notes>
+      <segment>
+        <source><pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"><pc id="1" equivStart="START_UNDERLINED_TEXT" equivEnd="CLOSE_UNDERLINED_TEXT" type="fmt" dispStart="&lt;u&gt;" dispEnd="&lt;/u&gt;"><ph id="2" equiv="INTERPOLATION" disp="{{interpolation}}"/> Text</pc></pc></source>
+        <target><pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"><pc id="1" equivStart="START_UNDERLINED_TEXT" equivEnd="CLOSE_UNDERLINED_TEXT" type="fmt" dispStart="&lt;u&gt;" dispEnd="&lt;/u&gt;">txeT <ph id="2" equiv="INTERPOLATION" disp="{{interpolation}}"/></pc></pc></target>
+      </segment>
+    </unit>
+    <unit id="8779402634269838862">
+      <notes>
+        <note category="description">ph names</note>
+        <note category="location">file.ts:7</note>
+      </notes>
+      <segment>
+        <source><ph id="0" equiv="LINE_BREAK" type="fmt" disp="&lt;br/&gt;"/><ph id="1" equiv="TAG_IMG" type="image" disp="&lt;img/&gt;"/><ph id="2" equiv="TAG_IMG_1" type="image" disp="&lt;img/&gt;"/></source>
+        <target><ph id="2" equiv="TAG_IMG_1" type="image" disp="&lt;img/&gt;"/><ph id="1" equiv="TAG_IMG" type="image" disp="&lt;img/&gt;"/><ph id="0" equiv="LINE_BREAK" type="fmt" disp="&lt;br/&gt;"/></target>
+      </segment>
+    </unit>
+    <unit id="6536355551500405293">
+      <notes>
+        <note category="description">empty element</note>
+        <note category="location">file.ts:8</note>
+      </notes>
+      <segment>
+        <source>hello <pc id="0" equivStart="START_TAG_SPAN" equivEnd="CLOSE_TAG_SPAN" type="other" dispStart="&lt;span&gt;" dispEnd="&lt;/span&gt;"></pc></source>
+        <target><pc id="0" equivStart="START_TAG_SPAN" equivEnd="CLOSE_TAG_SPAN" type="other" dispStart="&lt;span&gt;" dispEnd="&lt;/span&gt;"></pc> olleh</target>
+      </segment>
+    </unit>
+    <unit id="baz">
+      <notes>
+        <note category="location">file.ts:9</note>
+      </notes>
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">deeply nested</pc>} } } }</source>
+        <target>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">profondément imbriqué</pc>} } } }</target>
+      </segment>
+    </unit>
+    <unit id="6997386649824869937">
+      <notes>
+        <note category="location">file.ts:10</note>
+      </notes>
+      <segment>
+        <source>Test: <ph id="0" equiv="ICU" disp="{ count, plural, =0 {...} =other {...}}"/></source>
+        <target>Test: <ph id="0" equiv="ICU" disp="{ count, plural, =0 {...} =other {...}}"/></target>
+      </segment>
+    </unit>
+    <unit id="5229984852258993423">
+      <notes>
+        <note category="location">file.ts:10</note>
+      </notes>
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">deeply nested</pc>} } } =other {a lot} }</source>
+        <target>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">profondément imbriqué</pc>} } } =other {beaucoup} }</target>
+      </segment>
+    </unit>
+    <unit id="2340165783990709777">
+      <notes>
+        <note category="location">file.ts:11,12</note>
+      </notes>
+      <segment>
+        <source>multi
+lines</source>
+        <target>multi
+lignes</target>
+      </segment>
+    </unit>
+  </file>
+</xliff>
+`;
+
+export function main(): void {
+  const serializer = new Xliff2();
+
+  function toXliff(html: string, locale: string | null = null): string {
+    const catalog = new MessageBundle(new HtmlParser, [], {}, locale);
+    catalog.updateFromTemplate(html, 'file.ts', DEFAULT_INTERPOLATION_CONFIG);
+    return catalog.write(serializer);
+  }
+
+  function loadAsMap(xliff: string): {[id: string]: string} {
+    const {i18nNodesByMsgId} = serializer.load(xliff, 'url');
+
+    const msgMap: {[id: string]: string} = {};
+    Object.keys(i18nNodesByMsgId)
+        .forEach(id => msgMap[id] = serializeNodes(i18nNodesByMsgId[id]).join(''));
+
+    return msgMap;
+  }
+
+  describe('XLIFF 2.0 serializer', () => {
+    describe('write', () => {
+      it('should write a valid xliff 2.0 file',
+         () => { expect(toXliff(HTML)).toEqual(WRITE_XLIFF); });
+      it('should write a valid xliff 2.0 file with a source language',
+         () => { expect(toXliff(HTML, 'fr')).toContain('srcLang="fr"'); });
+    });
+
+    describe('load', () => {
+      it('should load XLIFF files', () => {
+        expect(loadAsMap(LOAD_XLIFF)).toEqual({
+          '1933478729560469763': 'etubirtta elbatalsnart',
+          '7056919470098446707':
+              '<ph name="INTERPOLATION"/> <ph name="START_BOLD_TEXT"/>sredlohecalp htiw<ph name="CLOSE_BOLD_TEXT"/> tnemele elbatalsnart',
+          '2981514368455622387':
+              '{VAR_PLURAL, plural, =0 {[<ph name="START_PARAGRAPH"/>, TEST, <ph name="CLOSE_PARAGRAPH"/>]}}',
+          'i': 'oof',
+          '6440235004920703622':
+              '<ph name="START_BOLD_TEXT"/><ph name="START_UNDERLINED_TEXT"/>txeT <ph name="INTERPOLATION"/><ph name="CLOSE_UNDERLINED_TEXT"/><ph name="CLOSE_BOLD_TEXT"/>',
+          '8779402634269838862':
+              '<ph name="TAG_IMG_1"/><ph name="TAG_IMG"/><ph name="LINE_BREAK"/>',
+          '6536355551500405293': '<ph name="START_TAG_SPAN"/><ph name="CLOSE_TAG_SPAN"/> olleh',
+          'baz':
+              '{VAR_PLURAL, plural, =0 {[{VAR_SELECT, select, other {[<ph name="START_PARAGRAPH"/>, profondément imbriqué, <ph name="CLOSE_PARAGRAPH"/>]}},  ]}}',
+          '6997386649824869937': 'Test: <ph name="ICU"/>',
+          '5229984852258993423': '{VAR_PLURAL, plural, =0 {[{VAR_SELECT, select, other {[<ph' +
+              ' name="START_PARAGRAPH"/>, profondément imbriqué, <ph name="CLOSE_PARAGRAPH"/>]}},  ]}, =other {[beaucoup]}}',
+          '2340165783990709777': `multi
+lignes`
+        });
+      });
+
+      it('should return the target locale',
+         () => { expect(serializer.load(LOAD_XLIFF, 'url').locale).toEqual('fr'); });
+    });
+
+    describe('structure errors', () => {
+      it('should throw when a wrong xliff version is used', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="deadbeef">
+        <source/>
+        <target/>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>`;
+
+        expect(() => {
+          loadAsMap(XLIFF);
+        }).toThrowError(/The XLIFF file version 1.2 is not compatible with XLIFF 2.0 serializer/);
+      });
+
+      it('should throw when an unit has no translation', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="missingtarget">
+      <segment>
+        <source/>
+      </segment>
+    </unit>
+  </file>
+</xliff>`;
+
+        expect(() => {
+          loadAsMap(XLIFF);
+        }).toThrowError(/Message missingtarget misses a translation/);
+      });
+
+
+      it('should throw when an unit has no id attribute', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit>
+      <segment>
+        <source/>
+        <target/>
+      </segment>
+    </unit>
+  </file>
+</xliff>`;
+
+        expect(() => { loadAsMap(XLIFF); }).toThrowError(/<unit> misses the "id" attribute/);
+      });
+
+      it('should throw on duplicate unit id', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="deadbeef">
+      <segment>
+        <source/>
+        <target/>
+      </segment>
+    </unit>
+    <unit id="deadbeef">
+      <segment>
+        <source/>
+        <target/>
+      </segment>
+    </unit>
+  </file>
+</xliff>`;
+
+        expect(() => {
+          loadAsMap(XLIFF);
+        }).toThrowError(/Duplicated translations for msg deadbeef/);
+      });
+    });
+
+    describe('message errors', () => {
+      it('should throw on unknown message tags', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="deadbeef">
+      <segment>
+        <source/>
+        <target><b>msg should contain only ph and pc tags</b></target>
+      </segment>
+    </unit>
+  </file>
+</xliff>`;
+
+        expect(() => { loadAsMap(XLIFF); })
+            .toThrowError(new RegExp(
+                escapeRegExp(`[ERROR ->]<b>msg should contain only ph and pc tags</b>`)));
+      });
+
+      it('should throw when a placeholder misses an id attribute', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="deadbeef">
+      <segment>
+        <source/>
+        <target><ph/></target>
+      </segment>
+    </unit>
+  </file>
+</xliff>`;
+
+        expect(() => {
+          loadAsMap(XLIFF);
+        }).toThrowError(new RegExp(escapeRegExp(`<ph> misses the "equiv" attribute`)));
+      });
+    });
+  });
+}
diff --git a/packages/compiler/test/i18n/serializers/xliff_spec.ts b/packages/compiler/test/i18n/serializers/xliff_spec.ts
index f16dbc57ad..c5f6a2c128 100644
--- a/packages/compiler/test/i18n/serializers/xliff_spec.ts
+++ b/packages/compiler/test/i18n/serializers/xliff_spec.ts
@@ -19,11 +19,14 @@ const HTML = `
 <p i18n>translatable element <b>with placeholders</b> {{ interpolation}}</p>
 <!-- i18n -->{ count, plural, =0 {<p>test</p>}}<!-- /i18n -->
 <p i18n="m|d">foo</p>
+<p i18n="m|d">foo</p>
 <p i18n="m|d@@i">foo</p>
 <p i18n="@@bar">foo</p>
 <p i18n="ph names"><br><img><div></div></p>
 <p i18n="@@baz">{ count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} }}</p>
-<p i18n>{ count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} }}</p>
+<p i18n>Test: { count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} } =other {a lot}}</p>
+<p i18n>multi
+lines</p>
 `;
 
 const WRITE_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
@@ -32,44 +35,90 @@ const WRITE_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
     <body>
       <trans-unit id="983775b9a51ce14b036be72d4cfd65d68d64e231" datatype="html">
         <source>translatable attribute</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">2</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="ec1d033f2436133c14ab038286c4f5df4697484a" datatype="html">
-        <source>translatable element <x id="START_BOLD_TEXT" ctype="x-b"/>with placeholders<x id="CLOSE_BOLD_TEXT" ctype="x-b"/> <x id="INTERPOLATION"/></source>
-        <target/>
+        <source>translatable element <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/>with placeholders<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/> <x id="INTERPOLATION" equiv-text="{{ interpolation}}"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">3</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="e2ccf3d131b15f54aa1fcf1314b1ca77c14bfcc2" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {<x id="START_PARAGRAPH" ctype="x-p"/>test<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} }</source>
-        <target/>
+        <source>{VAR_PLURAL, plural, =0 {<x id="START_PARAGRAPH" ctype="x-p" equiv-text="&lt;p&gt;"/>test<x id="CLOSE_PARAGRAPH" ctype="x-p" equiv-text="&lt;/p&gt;"/>} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">4</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="db3e0a6a5a96481f60aec61d98c3eecddef5ac23" datatype="html">
         <source>foo</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">5</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">6</context>
+        </context-group>
         <note priority="1" from="description">d</note>
         <note priority="1" from="meaning">m</note>
       </trans-unit>
       <trans-unit id="i" datatype="html">
         <source>foo</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">7</context>
+        </context-group>
         <note priority="1" from="description">d</note>
         <note priority="1" from="meaning">m</note>
       </trans-unit>
       <trans-unit id="bar" datatype="html">
         <source>foo</source>
-        <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">8</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7fa2d59aaedcaa5309f13028c59af8c85b8c49d" datatype="html">
-        <source><x id="LINE_BREAK" ctype="lb"/><x id="TAG_IMG" ctype="image"/><x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/></source>
-        <target/>
+        <source><x id="LINE_BREAK" ctype="lb" equiv-text="&lt;br/&gt;"/><x id="TAG_IMG" ctype="image" equiv-text="&lt;img/&gt;"/><x id="START_TAG_DIV" ctype="x-div" equiv-text="&lt;div&gt;"/><x id="CLOSE_TAG_DIV" ctype="x-div" equiv-text="&lt;/div&gt;"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">9</context>
+        </context-group>
         <note priority="1" from="description">ph names</note>
       </trans-unit>
       <trans-unit id="baz" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p"/>deeply nested<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } }</source>
-        <target/>
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p" equiv-text="&lt;p&gt;"/>deeply nested<x id="CLOSE_PARAGRAPH" ctype="x-p" equiv-text="&lt;/p&gt;"/>} } } }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">10</context>
+        </context-group>
       </trans-unit>
-      <trans-unit id="0e16a673a5a7a135c9f7b957ec2c5c6f6ee6e2c4" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p"/>deeply nested<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } }</source>
-        <target/>
+      <trans-unit id="52ffa620dcd76247a56d5331f34e73f340a43cdb" datatype="html">
+        <source>Test: <x id="ICU" equiv-text="{ count, plural, =0 {...} =other {...}}"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">11</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1503afd0ccc20ff01d5e2266a9157b7b342ba494" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p" equiv-text="&lt;p&gt;"/>deeply nested<x id="CLOSE_PARAGRAPH" ctype="x-p" equiv-text="&lt;/p&gt;"/>} } } =other {a lot} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">11</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="fcfa109b0e152d4c217dbc02530be0bcb8123ad1" datatype="html">
+        <source>multi
+lines</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">12</context>
+        </context-group>
       </trans-unit>
     </body>
   </file>
@@ -83,10 +132,18 @@ const LOAD_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
       <trans-unit id="983775b9a51ce14b036be72d4cfd65d68d64e231" datatype="html">
         <source>translatable attribute</source>
         <target>etubirtta elbatalsnart</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="ec1d033f2436133c14ab038286c4f5df4697484a" datatype="html">
         <source>translatable element <x id="START_BOLD_TEXT" ctype="b"/>with placeholders<x id="CLOSE_BOLD_TEXT" ctype="b"/> <x id="INTERPOLATION"/></source>
         <target><x id="INTERPOLATION"/> footnemele elbatalsnart <x id="START_BOLD_TEXT" ctype="x-b"/>sredlohecalp htiw<x id="CLOSE_BOLD_TEXT" ctype="x-b"/></target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">2</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="e2ccf3d131b15f54aa1fcf1314b1ca77c14bfcc2" datatype="html">
         <source>{VAR_PLURAL, plural, =0 {<x id="START_PARAGRAPH" ctype="x-p"/>test<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} }</source>
@@ -95,36 +152,74 @@ const LOAD_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
       <trans-unit id="db3e0a6a5a96481f60aec61d98c3eecddef5ac23" datatype="html">
         <source>foo</source>
         <target>oof</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">3</context>
+        </context-group>
         <note priority="1" from="description">d</note>
         <note priority="1" from="meaning">m</note>
       </trans-unit>
       <trans-unit id="i" datatype="html">
         <source>foo</source>
         <target>toto</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">4</context>
+        </context-group>
         <note priority="1" from="description">d</note>
         <note priority="1" from="meaning">m</note>
       </trans-unit>
       <trans-unit id="bar" datatype="html">
         <source>foo</source>
         <target>tata</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">5</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7fa2d59aaedcaa5309f13028c59af8c85b8c49d" datatype="html">
         <source><x id="LINE_BREAK" ctype="lb"/><x id="TAG_IMG" ctype="image"/><x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/></source>
         <target><x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/><x id="TAG_IMG" ctype="image"/><x id="LINE_BREAK" ctype="lb"/></target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">6</context>
+        </context-group>
         <note priority="1" from="description">ph names</note>
       </trans-unit>            
       <trans-unit id="empty target" datatype="html">
         <source><x id="LINE_BREAK" ctype="lb"/><x id="TAG_IMG" ctype="image"/><x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/></source>
         <target/>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">6</context>
+        </context-group>
         <note priority="1" from="description">ph names</note>
       </trans-unit>
       <trans-unit id="baz" datatype="html">
         <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p"/>deeply nested<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } }</source>
         <target>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p"/>profondément imbriqué<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } }</target>
       </trans-unit>
-      <trans-unit id="0e16a673a5a7a135c9f7b957ec2c5c6f6ee6e2c4" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p"/>deeply nested<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } }</source>
-        <target>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p"/>profondément imbriqué<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } }</target>
+      <trans-unit id="52ffa620dcd76247a56d5331f34e73f340a43cdb" datatype="html">
+        <source>Test: <x id="ICU" equiv-text="{ count, plural, =0 {...} =other {...}}"/></source>
+        <target>Test: <x id="ICU" equiv-text="{ count, plural, =0 {...} =other {...}}"/></target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">11</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1503afd0ccc20ff01d5e2266a9157b7b342ba494" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p"/>deeply nested<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } =other {a lot} }</source>
+        <target>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p"/>profondément imbriqué<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } =other {beaucoup} }</target>
+      </trans-unit>
+      <trans-unit id="fcfa109b0e152d4c217dbc02530be0bcb8123ad1" datatype="html">
+        <source>multi
+lines</source>
+        <target>multi
+lignes</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">file.ts</context>
+          <context context-type="linenumber">12</context>
+        </context-group>
       </trans-unit>
     </body>
   </file>
@@ -136,7 +231,7 @@ export function main(): void {
 
   function toXliff(html: string, locale: string | null = null): string {
     const catalog = new MessageBundle(new HtmlParser, [], {}, locale);
-    catalog.updateFromTemplate(html, '', DEFAULT_INTERPOLATION_CONFIG);
+    catalog.updateFromTemplate(html, 'file.ts', DEFAULT_INTERPOLATION_CONFIG);
     return catalog.write(serializer);
   }
 
@@ -173,8 +268,12 @@ export function main(): void {
           'empty target': '',
           'baz':
               '{VAR_PLURAL, plural, =0 {[{VAR_SELECT, select, other {[<ph name="START_PARAGRAPH"/>, profondément imbriqué, <ph name="CLOSE_PARAGRAPH"/>]}},  ]}}',
-          '0e16a673a5a7a135c9f7b957ec2c5c6f6ee6e2c4':
-              '{VAR_PLURAL, plural, =0 {[{VAR_SELECT, select, other {[<ph name="START_PARAGRAPH"/>, profondément imbriqué, <ph name="CLOSE_PARAGRAPH"/>]}},  ]}}'
+          '52ffa620dcd76247a56d5331f34e73f340a43cdb': 'Test: <ph name="ICU"/>',
+          '1503afd0ccc20ff01d5e2266a9157b7b342ba494':
+              '{VAR_PLURAL, plural, =0 {[{VAR_SELECT, select, other {[<ph' +
+              ' name="START_PARAGRAPH"/>, profondément imbriqué, <ph name="CLOSE_PARAGRAPH"/>]}},  ]}, =other {[beaucoup]}}',
+          'fcfa109b0e152d4c217dbc02530be0bcb8123ad1': `multi
+lignes`
         });
       });
 
diff --git a/packages/compiler/test/i18n/serializers/xmb_spec.ts b/packages/compiler/test/i18n/serializers/xmb_spec.ts
index cb8c535fd5..a65678e997 100644
--- a/packages/compiler/test/i18n/serializers/xmb_spec.ts
+++ b/packages/compiler/test/i18n/serializers/xmb_spec.ts
@@ -21,7 +21,9 @@ export function main(): void {
 <p i18n="m|d@@i">foo</p>
 <p i18n="@@bar">foo</p>
 <p i18n="@@baz">{ count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} }}</p>
-<p i18n>{ count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} }}</p>`;
+<p i18n>Test: { count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} } =other {a lot}}</p>
+<p i18n>multi
+lines</p>`;
 
     const XMB = `<?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE messagebundle [
@@ -46,20 +48,23 @@ export function main(): void {
 <!ELEMENT ex (#PCDATA)>
 ]>
 <messagebundle>
-  <msg id="7056919470098446707">translatable element <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>with placeholders<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph> <ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph></msg>
-  <msg id="2981514368455622387">{VAR_PLURAL, plural, =0 {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>test<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} }</msg>
-  <msg id="7999024498831672133" desc="d" meaning="m">foo</msg>
-  <msg id="i" desc="d" meaning="m">foo</msg>
-  <msg id="bar">foo</msg>
-  <msg id="baz">{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>deeply nested<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} } } }</msg>
-  <msg id="2015957479576096115">{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>deeply nested<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} } } }</msg>
+  <msg id="7056919470098446707"><source>file.ts:3</source>translatable element <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>with placeholders<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph> <ph name="INTERPOLATION"><ex>{{ interpolation}}</ex></ph></msg>
+  <msg id="2981514368455622387"><source>file.ts:4</source>{VAR_PLURAL, plural, =0 {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>test<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} }</msg>
+  <msg id="7999024498831672133" desc="d" meaning="m"><source>file.ts:5</source>foo</msg>
+  <msg id="i" desc="d" meaning="m"><source>file.ts:6</source>foo</msg>
+  <msg id="bar"><source>file.ts:7</source>foo</msg>
+  <msg id="baz"><source>file.ts:8</source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>deeply nested<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} } } }</msg>
+  <msg id="6997386649824869937"><source>file.ts:9</source>Test: <ph name="ICU"><ex>{ count, plural, =0 {...} =other {...}}</ex></ph></msg>
+  <msg id="5229984852258993423"><source>file.ts:9</source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>deeply nested<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} } } =other {a lot} }</msg>
+  <msg id="2340165783990709777"><source>file.ts:10,11</source>multi
+lines</msg>
 </messagebundle>
 `;
 
     it('should write a valid xmb file', () => {
-      expect(toXmb(HTML)).toEqual(XMB);
+      expect(toXmb(HTML, 'file.ts')).toEqual(XMB);
       // the locale is not specified in the xmb file
-      expect(toXmb(HTML, 'fr')).toEqual(XMB);
+      expect(toXmb(HTML, 'file.ts', 'fr')).toEqual(XMB);
     });
 
     it('should throw when trying to load an xmb file', () => {
@@ -71,11 +76,11 @@ export function main(): void {
   });
 }
 
-function toXmb(html: string, locale: string | null = null): string {
+function toXmb(html: string, url: string, locale: string | null = null): string {
   const catalog = new MessageBundle(new HtmlParser, [], {}, locale);
   const serializer = new Xmb();
 
-  catalog.updateFromTemplate(html, '', DEFAULT_INTERPOLATION_CONFIG);
+  catalog.updateFromTemplate(html, url, DEFAULT_INTERPOLATION_CONFIG);
 
   return catalog.write(serializer);
 }
diff --git a/packages/compiler/test/i18n/translation_bundle_spec.ts b/packages/compiler/test/i18n/translation_bundle_spec.ts
index d0dff34e65..1a78e89d2b 100644
--- a/packages/compiler/test/i18n/translation_bundle_spec.ts
+++ b/packages/compiler/test/i18n/translation_bundle_spec.ts
@@ -17,8 +17,9 @@ import {_extractMessages} from './i18n_parser_spec';
 export function main(): void {
   describe('TranslationBundle', () => {
     const file = new ParseSourceFile('content', 'url');
-    const location = new ParseLocation(file, 0, 0, 0);
-    const span = new ParseSourceSpan(location, null !);
+    const startLocation = new ParseLocation(file, 0, 0, 0);
+    const endLocation = new ParseLocation(file, 0, 0, 7);
+    const span = new ParseSourceSpan(startLocation, endLocation);
     const srcNode = new i18n.Text('src', span);
 
     it('should translate a plain message', () => {
diff --git a/packages/compiler/test/integration_spec.ts b/packages/compiler/test/integration_spec.ts
index 0bec6fba33..c8c4e15e4a 100644
--- a/packages/compiler/test/integration_spec.ts
+++ b/packages/compiler/test/integration_spec.ts
@@ -9,14 +9,15 @@
 import {Component, Directive, Input} from '@angular/core';
 import {ComponentFixture, TestBed, async} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
 export function main() {
   describe('integration tests', () => {
     let fixture: ComponentFixture<TestComponent>;
 
-
-    describe('directiv  es', () => {
+    describe('directives', () => {
       it('should support dotted selectors', async(() => {
            @Directive({selector: '[dot.name]'})
            class MyDir {
@@ -38,6 +39,25 @@ export function main() {
          }));
     });
 
+    describe('ng-container', () => {
+      if (browserDetection.isChromeDesktop) {
+        it('should work regardless the namespace', async(() => {
+             @Component({
+               selector: 'comp',
+               template:
+                   '<svg><ng-container *ngIf="1"><rect x="10" y="10" width="30" height="30"></rect></ng-container></svg>',
+             })
+             class MyCmp {
+             }
+
+             const f =
+                 TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
+             f.detectChanges();
+
+             expect(f.nativeElement.children[0].children[0].tagName).toEqual('rect');
+           }));
+      }
+    });
   });
 }
 
diff --git a/packages/compiler/test/metadata_resolver_spec.ts b/packages/compiler/test/metadata_resolver_spec.ts
index 485f082f93..9c16f77099 100644
--- a/packages/compiler/test/metadata_resolver_spec.ts
+++ b/packages/compiler/test/metadata_resolver_spec.ts
@@ -6,14 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {LIFECYCLE_HOOKS_VALUES, LifecycleHooks} from '@angular/compiler/src/lifecycle_reflector';
 import {TEST_COMPILER_PROVIDERS} from '@angular/compiler/testing/src/test_bindings';
 import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, Component, Directive, DoCheck, Injectable, NgModule, OnChanges, OnDestroy, OnInit, Pipe, SimpleChanges, ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
-import {LIFECYCLE_HOOKS_VALUES} from '@angular/core/src/metadata/lifecycle_hooks';
 import {TestBed, async, inject} from '@angular/core/testing';
+
 import {identifierName} from '../src/compile_metadata';
 import {CompileMetadataResolver} from '../src/metadata_resolver';
 import {ResourceLoader} from '../src/resource_loader';
 import {MockResourceLoader} from '../testing/src/resource_loader_mock';
+
 import {MalformedStylesComponent} from './metadata_resolver_fixture';
 
 export function main() {
@@ -55,10 +57,10 @@ export function main() {
          expect(meta.hostListeners).toEqual({'someHostListener': 'someHostListenerExpr'});
          expect(meta.hostProperties).toEqual({'someHostProp': 'someHostPropExpr'});
          expect(meta.hostAttributes).toEqual({'someHostAttr': 'someHostAttrValue'});
-         expect(meta.template.encapsulation).toBe(ViewEncapsulation.Emulated);
-         expect(meta.template.styles).toEqual(['someStyle']);
-         expect(meta.template.template).toEqual('someTemplate');
-         expect(meta.template.interpolation).toEqual(['{{', '}}']);
+         expect(meta.template !.encapsulation).toBe(ViewEncapsulation.Emulated);
+         expect(meta.template !.styles).toEqual(['someStyle']);
+         expect(meta.template !.template).toEqual('someTemplate');
+         expect(meta.template !.interpolation).toEqual(['{{', '}}']);
        }));
 
     it('should throw when reading metadata for component with external resources when sync=true is passed',
@@ -84,9 +86,9 @@ export function main() {
              resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, false).then(() => {
                const meta = resolver.getDirectiveMetadata(ComponentWithExternalResources);
                expect(meta.selector).toEqual('someSelector');
-               expect(meta.template.styleUrls).toEqual(['someStyleUrl']);
-               expect(meta.template.templateUrl).toEqual('someTemplateUrl');
-               expect(meta.template.template).toEqual('someTemplate');
+               expect(meta.template !.styleUrls).toEqual(['someStyleUrl']);
+               expect(meta.template !.templateUrl).toEqual('someTemplateUrl');
+               expect(meta.template !.template).toEqual('someTemplate');
              });
              resourceLoader.flush();
            })));
@@ -104,7 +106,7 @@ export function main() {
 
          resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, false).then(() => {
            const value: string =
-               resolver.getDirectiveMetadata(ComponentWithoutModuleId).template.templateUrl;
+               resolver.getDirectiveMetadata(ComponentWithoutModuleId).template !.templateUrl !;
            const expectedEndValue = './someUrl';
            expect(value.endsWith(expectedEndValue)).toBe(true);
          });
diff --git a/packages/compiler/test/ml_parser/html_parser_spec.ts b/packages/compiler/test/ml_parser/html_parser_spec.ts
index 3d99cc9afa..1a8b2bd630 100644
--- a/packages/compiler/test/ml_parser/html_parser_spec.ts
+++ b/packages/compiler/test/ml_parser/html_parser_spec.ts
@@ -183,13 +183,13 @@ export function main() {
           ]);
         });
 
-        it('should support explicit mamespace', () => {
+        it('should support explicit namespace', () => {
           expect(humanizeDom(parser.parse('<myns:div></myns:div>', 'TestComp'))).toEqual([
             [html.Element, ':myns:div', 0]
           ]);
         });
 
-        it('should support implicit mamespace', () => {
+        it('should support implicit namespace', () => {
           expect(humanizeDom(parser.parse('<svg></svg>', 'TestComp'))).toEqual([
             [html.Element, ':svg:svg', 0]
           ]);
@@ -363,6 +363,11 @@ export function main() {
           ]);
         });
 
+        it('should support ICU expressions with cases that contain numbers', () => {
+          const p = parser.parse(`{sex, select, male {m} female {f} 0 {other}}`, 'TestComp', true);
+          expect(p.errors.length).toEqual(0);
+        });
+
         it('should error when expansion case is not closed', () => {
           const p = parser.parse(`{messages.length, plural, =0 {one`, 'TestComp', true);
           expect(humanizeErrors(p.errors)).toEqual([
@@ -417,7 +422,7 @@ export function main() {
           expect((ast.rootNodes[0] as html.Element).attrs[0].valueSpan).toBeUndefined();
         });
 
-        it('should report a value span for an attibute with a value', () => {
+        it('should report a value span for an attribute with a value', () => {
           const ast = parser.parse('<div bar="12"></div>', 'TestComp');
           const attr = (ast.rootNodes[0] as html.Element).attrs[0];
           expect(attr.valueSpan !.start.offset).toEqual(9);
diff --git a/packages/compiler/test/ng_module_resolver_mock_spec.ts b/packages/compiler/test/ng_module_resolver_mock_spec.ts
index a0131eb350..81ebf312c2 100644
--- a/packages/compiler/test/ng_module_resolver_mock_spec.ts
+++ b/packages/compiler/test/ng_module_resolver_mock_spec.ts
@@ -6,8 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {JitReflector} from '@angular/compiler';
 import {Injector, NgModule} from '@angular/core';
 import {beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+
 import {MockNgModuleResolver} from '../testing';
 
 export function main() {
@@ -15,7 +17,7 @@ export function main() {
     let ngModuleResolver: MockNgModuleResolver;
 
     beforeEach(inject([Injector], (injector: Injector) => {
-      ngModuleResolver = new MockNgModuleResolver(injector);
+      ngModuleResolver = new MockNgModuleResolver(injector, new JitReflector());
     }));
 
     describe('NgModule overriding', () => {
diff --git a/packages/compiler/test/ng_module_resolver_spec.ts b/packages/compiler/test/ng_module_resolver_spec.ts
index c9a67ea959..91d6a466cd 100644
--- a/packages/compiler/test/ng_module_resolver_spec.ts
+++ b/packages/compiler/test/ng_module_resolver_spec.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {JitReflector} from '@angular/compiler';
 import {NgModuleResolver} from '@angular/compiler/src/ng_module_resolver';
 import {ɵstringify as stringify} from '@angular/core';
 import {NgModule} from '@angular/core/src/metadata';
@@ -32,7 +33,7 @@ export function main() {
   describe('NgModuleResolver', () => {
     let resolver: NgModuleResolver;
 
-    beforeEach(() => { resolver = new NgModuleResolver(); });
+    beforeEach(() => { resolver = new NgModuleResolver(new JitReflector()); });
 
     it('should read out the metadata from the class', () => {
       const moduleMetadata = resolver.resolve(SomeModule);
diff --git a/packages/compiler/test/output/abstract_emitter_node_only_spec.ts b/packages/compiler/test/output/abstract_emitter_node_only_spec.ts
index 93958da70e..d4685d8920 100644
--- a/packages/compiler/test/output/abstract_emitter_node_only_spec.ts
+++ b/packages/compiler/test/output/abstract_emitter_node_only_spec.ts
@@ -18,7 +18,7 @@ export function main() {
       const fileB = new ParseSourceFile('b0b1b2b3b4b5b6b7b8b9', 'b.js');
       let ctx: EmitterVisitorContext;
 
-      beforeEach(() => { ctx = EmitterVisitorContext.createRoot([]); });
+      beforeEach(() => { ctx = EmitterVisitorContext.createRoot(); });
 
       it('should add source files to the source map', () => {
         ctx.print(createSourceSpan(fileA, 0), 'o0');
diff --git a/packages/compiler/test/output/js_emitter_node_only_spec.ts b/packages/compiler/test/output/js_emitter_node_only_spec.ts
index bdaf5010c4..3d9cc0084d 100644
--- a/packages/compiler/test/output/js_emitter_node_only_spec.ts
+++ b/packages/compiler/test/output/js_emitter_node_only_spec.ts
@@ -10,7 +10,6 @@ import {StaticSymbol} from '@angular/compiler/src/aot/static_symbol';
 import {CompileIdentifierMetadata} from '@angular/compiler/src/compile_metadata';
 import {JavaScriptEmitter} from '@angular/compiler/src/output/js_emitter';
 import * as o from '@angular/compiler/src/output/output_ast';
-import {ImportResolver} from '@angular/compiler/src/output/path_util';
 import {SourceMap} from '@angular/compiler/src/output/source_map';
 import {ParseLocation, ParseSourceFile, ParseSourceSpan} from '@angular/compiler/src/parse_util';
 
@@ -19,31 +18,16 @@ import {extractSourceMap, originalPositionFor} from './source_map_util';
 const someGenFilePath = 'somePackage/someGenFile';
 const someSourceFilePath = 'somePackage/someSourceFile';
 
-class SimpleJsImportGenerator implements ImportResolver {
-  fileNameToModuleName(importedUrlStr: string, moduleUrlStr: string): string {
-    return importedUrlStr;
-  }
-  getImportAs(symbol: StaticSymbol): StaticSymbol|null { return null; }
-  getTypeArity(symbol: StaticSymbol): number|null { return null; }
-}
-
 export function main() {
   describe('JavaScriptEmitter', () => {
-    let importResolver: ImportResolver;
     let emitter: JavaScriptEmitter;
     let someVar: o.ReadVarExpr;
 
-    beforeEach(() => {
-      importResolver = new SimpleJsImportGenerator();
-      emitter = new JavaScriptEmitter(importResolver);
-    });
+    beforeEach(() => { emitter = new JavaScriptEmitter(); });
 
-    function emitSourceMap(
-        stmt: o.Statement | o.Statement[], exportedVars: string[] | null = null,
-        preamble?: string): SourceMap {
+    function emitSourceMap(stmt: o.Statement | o.Statement[], preamble?: string): SourceMap {
       const stmts = Array.isArray(stmt) ? stmt : [stmt];
-      const source = emitter.emitStatements(
-          someSourceFilePath, someGenFilePath, stmts, exportedVars || [], preamble);
+      const source = emitter.emitStatements(someSourceFilePath, someGenFilePath, stmts, preamble);
       return extractSourceMap(source) !;
     }
 
@@ -54,7 +38,7 @@ export function main() {
         const endLocation = new ParseLocation(source, 7, 0, 6);
         const sourceSpan = new ParseSourceSpan(startLocation, endLocation);
         const someVar = o.variable('someVar', null, sourceSpan);
-        const sm = emitSourceMap(someVar.toStmt(), [], '/* MyPreamble \n */');
+        const sm = emitSourceMap(someVar.toStmt(), '/* MyPreamble \n */');
 
         expect(sm.sources).toEqual([someSourceFilePath, 'in.js']);
         expect(sm.sourcesContent).toEqual([' ', ';;;var']);
diff --git a/packages/compiler/test/output/js_emitter_spec.ts b/packages/compiler/test/output/js_emitter_spec.ts
index d783c598bc..e83b328315 100644
--- a/packages/compiler/test/output/js_emitter_spec.ts
+++ b/packages/compiler/test/output/js_emitter_spec.ts
@@ -7,10 +7,8 @@
  */
 
 import {StaticSymbol} from '@angular/compiler/src/aot/static_symbol';
-import {CompileIdentifierMetadata} from '@angular/compiler/src/compile_metadata';
 import {JavaScriptEmitter} from '@angular/compiler/src/output/js_emitter';
 import * as o from '@angular/compiler/src/output/output_ast';
-import {ImportResolver} from '@angular/compiler/src/output/path_util';
 
 import {stripSourceMapAndNewLine} from './abstract_emitter_spec';
 
@@ -18,20 +16,9 @@ const someGenFilePath = 'somePackage/someGenFile';
 const someSourceFilePath = 'somePackage/someSourceFile';
 const anotherModuleUrl = 'somePackage/someOtherPath';
 
-const sameModuleIdentifier: CompileIdentifierMetadata = {
-  reference: new StaticSymbol(someGenFilePath, 'someLocalId', [])
-};
-const externalModuleIdentifier: CompileIdentifierMetadata = {
-  reference: new StaticSymbol(anotherModuleUrl, 'someExternalId', [])
-};
+const sameModuleIdentifier = new o.ExternalReference(null, 'someLocalId', null);
 
-class SimpleJsImportGenerator implements ImportResolver {
-  fileNameToModuleName(importedUrlStr: string, moduleUrlStr: string): string {
-    return importedUrlStr;
-  }
-  getImportAs(symbol: StaticSymbol): StaticSymbol|null { return null; }
-  getTypeArity(symbol: StaticSymbol): number|null { return null; }
-}
+const externalModuleIdentifier = new o.ExternalReference(anotherModuleUrl, 'someExternalId', null);
 
 export function main() {
   // Note supported features of our OutputAstin JavaScript / ES5:
@@ -39,29 +26,26 @@ export function main() {
   // - declaring fields
 
   describe('JavaScriptEmitter', () => {
-    let importResolver: ImportResolver;
     let emitter: JavaScriptEmitter;
     let someVar: o.ReadVarExpr;
 
     beforeEach(() => {
-      importResolver = new SimpleJsImportGenerator();
-      emitter = new JavaScriptEmitter(importResolver);
+      emitter = new JavaScriptEmitter();
       someVar = o.variable('someVar');
     });
 
-    function emitStmt(
-        stmt: o.Statement, exportedVars: string[] | null = null, preamble?: string): string {
-      const source = emitter.emitStatements(
-          someSourceFilePath, someGenFilePath, [stmt], exportedVars || [], preamble);
+    function emitStmt(stmt: o.Statement, preamble?: string): string {
+      const source = emitter.emitStatements(someSourceFilePath, someGenFilePath, [stmt], preamble);
       return stripSourceMapAndNewLine(source);
     }
 
     it('should declare variables', () => {
       expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt())).toEqual(`var someVar = 1;`);
-      expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt(), ['someVar'])).toEqual([
-        'var someVar = 1;',
-        `Object.defineProperty(exports, 'someVar', { get: function() { return someVar; }});`
-      ].join('\n'));
+      expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt(null, [o.StmtModifier.Exported])))
+          .toEqual([
+            'var someVar = 1;',
+            `Object.defineProperty(exports, 'someVar', { get: function() { return someVar; }});`
+          ].join('\n'));
     });
 
     it('should read and write variables', () => {
@@ -115,7 +99,25 @@ export function main() {
       expect(emitStmt(o.literal(true).toStmt())).toEqual('true;');
       expect(emitStmt(o.literal('someStr').toStmt())).toEqual(`'someStr';`);
       expect(emitStmt(o.literalArr([o.literal(1)]).toStmt())).toEqual(`[1];`);
-      expect(emitStmt(o.literalMap([['someKey', o.literal(1)]]).toStmt())).toEqual(`{someKey: 1};`);
+      expect(emitStmt(o.literalMap([
+                         {key: 'someKey', value: o.literal(1), quoted: false},
+                         {key: 'a', value: o.literal('a'), quoted: false},
+                         {key: '*', value: o.literal('star'), quoted: true},
+                       ]).toStmt())
+                 .replace(/\s+/gm, ''))
+          .toEqual(`{someKey:1,a:'a','*':'star'};`);
+    });
+
+    it('should break expressions into multiple lines if they are too long', () => {
+      const values: o.Expression[] = new Array(100);
+      values.fill(o.literal(1));
+      values.splice(50, 0, o.fn([], [new o.ReturnStatement(o.literal(1))]));
+      expect(emitStmt(o.variable('fn').callFn(values).toStmt())).toEqual([
+        'fn(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,',
+        '    1,1,1,1,1,1,1,1,1,1,function() {', '      return 1;',
+        '    },1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,',
+        '    1,1,1,1,1,1,1,1,1,1,1,1);'
+      ].join('\n'));
     });
 
     it('should support blank literals', () => {
@@ -126,19 +128,9 @@ export function main() {
     it('should support external identifiers', () => {
       expect(emitStmt(o.importExpr(sameModuleIdentifier).toStmt())).toEqual('someLocalId;');
       expect(emitStmt(o.importExpr(externalModuleIdentifier).toStmt())).toEqual([
-        `var import0 = re` +
+        `var i0 = re` +
             `quire('somePackage/someOtherPath');`,
-        `import0.someExternalId;`
-      ].join('\n'));
-    });
-
-    it('should support `importAs` for external identifiers', () => {
-      spyOn(importResolver, 'getImportAs')
-          .and.returnValue(new StaticSymbol('somePackage/importAsModule', 'importAsName', []));
-      expect(emitStmt(o.importExpr(externalModuleIdentifier).toStmt())).toEqual([
-        `var import0 = re` +
-            `quire('somePackage/importAsModule');`,
-        `import0.importAsName;`
+        `i0.someExternalId;`
       ].join('\n'));
     });
 
@@ -146,6 +138,7 @@ export function main() {
       const lhs = o.variable('lhs');
       const rhs = o.variable('rhs');
       expect(emitStmt(o.not(someVar).toStmt())).toEqual('!someVar;');
+      expect(emitStmt(o.assertNotNull(someVar).toStmt())).toEqual('someVar;');
       expect(
           emitStmt(someVar.conditional(o.variable('trueCase'), o.variable('falseCase')).toStmt()))
           .toEqual('(someVar? trueCase: falseCase);');
@@ -180,10 +173,11 @@ export function main() {
     it('should support function statements', () => {
       expect(emitStmt(new o.DeclareFunctionStmt('someFn', [], [
       ]))).toEqual(['function someFn() {', '}'].join('\n'));
-      expect(emitStmt(new o.DeclareFunctionStmt('someFn', [], []), ['someFn'])).toEqual([
-        'function someFn() {', '}',
-        `Object.defineProperty(exports, 'someFn', { get: function() { return someFn; }});`
-      ].join('\n'));
+      expect(emitStmt(new o.DeclareFunctionStmt('someFn', [], [], null, [o.StmtModifier.Exported])))
+          .toEqual([
+            'function someFn() {', '}',
+            `Object.defineProperty(exports, 'someFn', { get: function() { return someFn; }});`
+          ].join('\n'));
       expect(emitStmt(new o.DeclareFunctionStmt('someFn', [], [
         new o.ReturnStatement(o.literal(1))
       ]))).toEqual(['function someFn() {', '  return 1;', '}'].join('\n'));
@@ -227,7 +221,8 @@ export function main() {
       it('should support declaring classes', () => {
         expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, [
         ]))).toEqual(['function SomeClass() {', '}'].join('\n'));
-        expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, []), ['SomeClass']))
+        expect(emitStmt(new o.ClassStmt(
+                   'SomeClass', null !, [], [], null !, [], [o.StmtModifier.Exported])))
             .toEqual([
               'function SomeClass() {', '}',
               `Object.defineProperty(exports, 'SomeClass', { get: function() { return SomeClass; }});`
@@ -306,7 +301,7 @@ export function main() {
     });
 
     it('should support a preamble', () => {
-      expect(emitStmt(o.variable('a').toStmt(), [], '/* SomePreamble */')).toBe([
+      expect(emitStmt(o.variable('a').toStmt(), '/* SomePreamble */')).toBe([
         '/* SomePreamble */', 'a;'
       ].join('\n'));
     });
diff --git a/packages/compiler/test/output/output_jit_spec.ts b/packages/compiler/test/output/output_jit_spec.ts
new file mode 100644
index 0000000000..017ddf8cb6
--- /dev/null
+++ b/packages/compiler/test/output/output_jit_spec.ts
@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {EmitterVisitorContext} from '@angular/compiler/src/output/abstract_emitter';
+import * as o from '@angular/compiler/src/output/output_ast';
+import {JitEmitterVisitor} from '@angular/compiler/src/output/output_jit';
+
+const anotherModuleUrl = 'somePackage/someOtherPath';
+
+export function main() {
+  describe('Output JIT', () => {
+    describe('regression', () => {
+      it('should generate unique argument names', () => {
+        const externalIds = new Array(10).fill(1).map(
+            (_, index) =>
+                new o.ExternalReference(anotherModuleUrl, `id_${index}_`, {name: `id_${index}_`}));
+        const externalIds1 = new Array(10).fill(1).map(
+            (_, index) => new o.ExternalReference(
+                anotherModuleUrl, `id_${index}_1`, {name: `id_${index}_1`}));
+        const ctx = EmitterVisitorContext.createRoot();
+        const converter = new JitEmitterVisitor();
+        converter.visitAllStatements(
+            [o.literalArr([...externalIds1, ...externalIds].map(id => o.importExpr(id))).toStmt()],
+            ctx);
+        const args = converter.getArgs();
+        expect(Object.keys(args).length).toBe(20);
+      });
+    });
+  })
+}
\ No newline at end of file
diff --git a/packages/compiler/test/output/ts_emitter_node_only_spec.ts b/packages/compiler/test/output/ts_emitter_node_only_spec.ts
index 6afd4fa517..00fb814cdc 100644
--- a/packages/compiler/test/output/ts_emitter_node_only_spec.ts
+++ b/packages/compiler/test/output/ts_emitter_node_only_spec.ts
@@ -9,7 +9,6 @@
 import {ParseLocation, ParseSourceFile} from '@angular/compiler';
 import {StaticSymbol} from '@angular/compiler/src/aot/static_symbol';
 import * as o from '@angular/compiler/src/output/output_ast';
-import {ImportResolver} from '@angular/compiler/src/output/path_util';
 import {SourceMap} from '@angular/compiler/src/output/source_map';
 import {TypeScriptEmitter} from '@angular/compiler/src/output/ts_emitter';
 import {ParseSourceSpan} from '@angular/compiler/src/parse_util';
@@ -19,36 +18,23 @@ import {extractSourceMap, originalPositionFor} from './source_map_util';
 const someGenFilePath = 'somePackage/someGenFile';
 const someSourceFilePath = 'somePackage/someSourceFile';
 
-class SimpleJsImportGenerator implements ImportResolver {
-  fileNameToModuleName(importedUrlStr: string, moduleUrlStr: string): string {
-    return importedUrlStr;
-  }
-  getImportAs(symbol: StaticSymbol): StaticSymbol|null { return null; }
-  getTypeArity(symbol: StaticSymbol): number|null { return null; }
-}
-
 export function main() {
   // Not supported features of our OutputAst in TS:
   // - real `const` like in Dart
   // - final fields
 
   describe('TypeScriptEmitter', () => {
-    let importResolver: ImportResolver;
     let emitter: TypeScriptEmitter;
     let someVar: o.ReadVarExpr;
 
     beforeEach(() => {
-      importResolver = new SimpleJsImportGenerator();
-      emitter = new TypeScriptEmitter(importResolver);
+      emitter = new TypeScriptEmitter();
       someVar = o.variable('someVar');
     });
 
-    function emitSourceMap(
-        stmt: o.Statement | o.Statement[], exportedVars: string[] | null = null,
-        preamble?: string): SourceMap {
+    function emitSourceMap(stmt: o.Statement | o.Statement[], preamble?: string): SourceMap {
       const stmts = Array.isArray(stmt) ? stmt : [stmt];
-      const source = emitter.emitStatements(
-          someSourceFilePath, someGenFilePath, stmts, exportedVars || [], preamble);
+      const source = emitter.emitStatements(someSourceFilePath, someGenFilePath, stmts, preamble);
       return extractSourceMap(source) !;
     }
 
@@ -59,7 +45,7 @@ export function main() {
         const endLocation = new ParseLocation(source, 7, 0, 6);
         const sourceSpan = new ParseSourceSpan(startLocation, endLocation);
         const someVar = o.variable('someVar', null, sourceSpan);
-        const sm = emitSourceMap(someVar.toStmt(), [], '/* MyPreamble \n */');
+        const sm = emitSourceMap(someVar.toStmt(), '/* MyPreamble \n */');
 
         expect(sm.sources).toEqual([someSourceFilePath, 'in.js']);
         expect(sm.sourcesContent).toEqual([' ', ';;;var']);
diff --git a/packages/compiler/test/output/ts_emitter_spec.ts b/packages/compiler/test/output/ts_emitter_spec.ts
index f3f08cd2e0..b472ac6c12 100644
--- a/packages/compiler/test/output/ts_emitter_spec.ts
+++ b/packages/compiler/test/output/ts_emitter_spec.ts
@@ -7,9 +7,7 @@
  */
 
 import {StaticSymbol} from '@angular/compiler/src/aot/static_symbol';
-import {CompileIdentifierMetadata} from '@angular/compiler/src/compile_metadata';
 import * as o from '@angular/compiler/src/output/output_ast';
-import {ImportResolver} from '@angular/compiler/src/output/path_util';
 import {TypeScriptEmitter} from '@angular/compiler/src/output/ts_emitter';
 
 import {stripSourceMapAndNewLine} from './abstract_emitter_spec';
@@ -18,21 +16,9 @@ const someGenFilePath = 'somePackage/someGenFile';
 const someSourceFilePath = 'somePackage/someSourceFile';
 const anotherModuleUrl = 'somePackage/someOtherPath';
 
-const sameModuleIdentifier: CompileIdentifierMetadata = {
-  reference: new StaticSymbol(someGenFilePath, 'someLocalId', [])
-};
+const sameModuleIdentifier = new o.ExternalReference(null, 'someLocalId', null);
 
-const externalModuleIdentifier: CompileIdentifierMetadata = {
-  reference: new StaticSymbol(anotherModuleUrl, 'someExternalId', [])
-};
-
-class SimpleJsImportGenerator implements ImportResolver {
-  fileNameToModuleName(importedUrlStr: string, moduleUrlStr: string): string {
-    return importedUrlStr;
-  }
-  getImportAs(symbol: StaticSymbol): StaticSymbol|null { return null; }
-  getTypeArity(symbol: StaticSymbol): number|null { return null; }
-}
+const externalModuleIdentifier = new o.ExternalReference(anotherModuleUrl, 'someExternalId', null);
 
 export function main() {
   // Not supported features of our OutputAst in TS:
@@ -40,22 +26,17 @@ export function main() {
   // - final fields
 
   describe('TypeScriptEmitter', () => {
-    let importResolver: ImportResolver;
     let emitter: TypeScriptEmitter;
     let someVar: o.ReadVarExpr;
 
     beforeEach(() => {
-      importResolver = new SimpleJsImportGenerator();
-      emitter = new TypeScriptEmitter(importResolver);
+      emitter = new TypeScriptEmitter();
       someVar = o.variable('someVar', null, null);
     });
 
-    function emitStmt(
-        stmt: o.Statement | o.Statement[], exportedVars: string[] | null = null,
-        preamble?: string): string {
+    function emitStmt(stmt: o.Statement | o.Statement[], preamble?: string): string {
       const stmts = Array.isArray(stmt) ? stmt : [stmt];
-      const source = emitter.emitStatements(
-          someSourceFilePath, someGenFilePath, stmts, exportedVars || [], preamble);
+      const source = emitter.emitStatements(someSourceFilePath, someGenFilePath, stmts, preamble);
       return stripSourceMapAndNewLine(source);
     }
 
@@ -63,7 +44,7 @@ export function main() {
       expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt())).toEqual(`var someVar:any = 1;`);
       expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt(null, [o.StmtModifier.Final])))
           .toEqual(`const someVar:any = 1;`);
-      expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt(), ['someVar']))
+      expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt(null, [o.StmtModifier.Exported])))
           .toEqual(`export var someVar:any = 1;`);
       expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt(o.INT_TYPE)))
           .toEqual(`var someVar:number = 1;`);
@@ -74,43 +55,29 @@ export function main() {
     describe('declare variables with ExternExpressions as values', () => {
       it('should create no reexport if the identifier is in the same module', () => {
         // identifier is in the same module -> no reexport
-        expect(emitStmt(someVar.set(o.importExpr(sameModuleIdentifier)).toDeclStmt(), ['someVar']))
-            .toEqual('export var someVar:any = someLocalId;');
+        expect(emitStmt(someVar.set(o.importExpr(sameModuleIdentifier)).toDeclStmt(null, [
+          o.StmtModifier.Exported
+        ]))).toEqual('export var someVar:any = someLocalId;');
       });
 
       it('should create no reexport if the variable is not exported', () => {
         expect(emitStmt(someVar.set(o.importExpr(externalModuleIdentifier)).toDeclStmt())).toEqual([
-          `import * as import0 from 'somePackage/someOtherPath';`,
-          `var someVar:any = import0.someExternalId;`
+          `import * as i0 from 'somePackage/someOtherPath';`, `var someVar:any = i0.someExternalId;`
         ].join('\n'));
       });
 
       it('should create no reexport if the variable is typed', () => {
-        expect(emitStmt(
-                   someVar.set(o.importExpr(externalModuleIdentifier)).toDeclStmt(o.DYNAMIC_TYPE),
-                   ['someVar']))
+        expect(emitStmt(someVar.set(o.importExpr(externalModuleIdentifier))
+                            .toDeclStmt(o.DYNAMIC_TYPE, [o.StmtModifier.Exported])))
             .toEqual([
-              `import * as import0 from 'somePackage/someOtherPath';`,
-              `export var someVar:any = import0.someExternalId;`
-            ].join('\n'));
-      });
-
-      it('should create no reexport if the identifier has members', () => {
-        const externalModuleIdentifierWithMembers: CompileIdentifierMetadata = {
-          reference: new StaticSymbol(anotherModuleUrl, 'someExternalId', ['a'])
-        };
-        expect(emitStmt(
-                   someVar.set(o.importExpr(externalModuleIdentifierWithMembers)).toDeclStmt(),
-                   ['someVar']))
-            .toEqual([
-              `import * as import0 from 'somePackage/someOtherPath';`,
-              `export var someVar:any = import0.someExternalId.a;`
+              `import * as i0 from 'somePackage/someOtherPath';`,
+              `export var someVar:any = i0.someExternalId;`
             ].join('\n'));
       });
 
       it('should create a reexport', () => {
-        expect(
-            emitStmt(someVar.set(o.importExpr(externalModuleIdentifier)).toDeclStmt(), ['someVar']))
+        expect(emitStmt(someVar.set(o.importExpr(externalModuleIdentifier))
+                            .toDeclStmt(null, [o.StmtModifier.Exported])))
             .toEqual([
               `export {someExternalId as someVar} from 'somePackage/someOtherPath';`, ``
             ].join('\n'));
@@ -118,30 +85,19 @@ export function main() {
 
       it('should create multiple reexports from the same file', () => {
         const someVar2 = o.variable('someVar2');
-        const externalModuleIdentifier2: CompileIdentifierMetadata = {
-          reference: new StaticSymbol(anotherModuleUrl, 'someExternalId2', [])
-        };
-        expect(emitStmt(
-                   [
-                     someVar.set(o.importExpr(externalModuleIdentifier)).toDeclStmt(),
-                     someVar2.set(o.importExpr(externalModuleIdentifier2)).toDeclStmt()
-                   ],
-                   ['someVar', 'someVar2']))
+        const externalModuleIdentifier2 =
+            new o.ExternalReference(anotherModuleUrl, 'someExternalId2', null);
+        expect(emitStmt([
+          someVar.set(o.importExpr(externalModuleIdentifier))
+              .toDeclStmt(null, [o.StmtModifier.Exported]),
+          someVar2.set(o.importExpr(externalModuleIdentifier2))
+              .toDeclStmt(null, [o.StmtModifier.Exported])
+        ]))
             .toEqual([
               `export {someExternalId as someVar,someExternalId2 as someVar2} from 'somePackage/someOtherPath';`,
               ``
             ].join('\n'));
       });
-
-      it('should use `importAs` for reexports', () => {
-        spyOn(importResolver, 'getImportAs')
-            .and.returnValue(new StaticSymbol('somePackage/importAsModule', 'importAsName', []));
-        expect(
-            emitStmt(someVar.set(o.importExpr(externalModuleIdentifier)).toDeclStmt(), ['someVar']))
-            .toEqual([
-              `export {importAsName as someVar} from 'somePackage/importAsModule';`, ``
-            ].join('\n'));
-      });
     });
 
     it('should read and write variables', () => {
@@ -195,15 +151,25 @@ export function main() {
       expect(emitStmt(o.literal(true).toStmt())).toEqual('true;');
       expect(emitStmt(o.literal('someStr').toStmt())).toEqual(`'someStr';`);
       expect(emitStmt(o.literalArr([o.literal(1)]).toStmt())).toEqual(`[1];`);
-      expect(emitStmt(o.literalMap([['someKey', o.literal(1)]]).toStmt())).toEqual(`{someKey: 1};`);
+      expect(emitStmt(o.literalMap([
+                         {key: 'someKey', value: o.literal(1), quoted: false},
+                         {key: 'a', value: o.literal('a'), quoted: false},
+                         {key: '*', value: o.literal('star'), quoted: true},
+                       ]).toStmt())
+                 .replace(/\s+/gm, ''))
+          .toEqual(`{someKey:1,a:'a','*':'star'};`);
     });
 
-    it('should apply quotes to each entry within a map produced with literalMap when true', () => {
-      expect(
-          emitStmt(
-              o.literalMap([['a', o.literal('a')], ['*', o.literal('star')]], null, true).toStmt())
-              .replace(/\s+/gm, ''))
-          .toEqual(`{'a':'a','*':'star'};`);
+    it('should break expressions into multiple lines if they are too long', () => {
+      const values: o.Expression[] = new Array(100);
+      values.fill(o.literal(1));
+      values.splice(50, 0, o.fn([], [new o.ReturnStatement(o.literal(1))]));
+      expect(emitStmt(o.variable('fn').callFn(values).toStmt())).toEqual([
+        'fn(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,',
+        '    1,1,1,1,1,1,1,1,1,1,():void => {', '      return 1;',
+        '    },1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,',
+        '    1,1,1,1,1,1,1,1,1,1,1,1);'
+      ].join('\n'));
     });
 
     it('should support blank literals', () => {
@@ -215,15 +181,7 @@ export function main() {
     it('should support external identifiers', () => {
       expect(emitStmt(o.importExpr(sameModuleIdentifier).toStmt())).toEqual('someLocalId;');
       expect(emitStmt(o.importExpr(externalModuleIdentifier).toStmt())).toEqual([
-        `import * as import0 from 'somePackage/someOtherPath';`, `import0.someExternalId;`
-      ].join('\n'));
-    });
-
-    it('should support `importAs` for external identifiers', () => {
-      spyOn(importResolver, 'getImportAs')
-          .and.returnValue(new StaticSymbol('somePackage/importAsModule', 'importAsName', []));
-      expect(emitStmt(o.importExpr(externalModuleIdentifier).toStmt())).toEqual([
-        `import * as import0 from 'somePackage/importAsModule';`, `import0.importAsName;`
+        `import * as i0 from 'somePackage/someOtherPath';`, `i0.someExternalId;`
       ].join('\n'));
     });
 
@@ -232,6 +190,7 @@ export function main() {
       const rhs = o.variable('rhs');
       expect(emitStmt(someVar.cast(o.INT_TYPE).toStmt())).toEqual('(<number>someVar);');
       expect(emitStmt(o.not(someVar).toStmt())).toEqual('!someVar;');
+      expect(emitStmt(o.assertNotNull(someVar).toStmt())).toEqual('someVar!;');
       expect(
           emitStmt(someVar.conditional(o.variable('trueCase'), o.variable('falseCase')).toStmt()))
           .toEqual('(someVar? trueCase: falseCase);');
@@ -265,9 +224,8 @@ export function main() {
     it('should support function statements', () => {
       expect(emitStmt(new o.DeclareFunctionStmt('someFn', [], [
       ]))).toEqual(['function someFn():void {', '}'].join('\n'));
-      expect(emitStmt(new o.DeclareFunctionStmt('someFn', [], []), ['someFn'])).toEqual([
-        'export function someFn():void {', '}'
-      ].join('\n'));
+      expect(emitStmt(new o.DeclareFunctionStmt('someFn', [], [], null, [o.StmtModifier.Exported])))
+          .toEqual(['export function someFn():void {', '}'].join('\n'));
       expect(emitStmt(new o.DeclareFunctionStmt(
                  'someFn', [], [new o.ReturnStatement(o.literal(1))], o.INT_TYPE)))
           .toEqual(['function someFn():number {', '  return 1;', '}'].join('\n'));
@@ -312,8 +270,9 @@ export function main() {
       it('should support declaring classes', () => {
         expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, [
         ]))).toEqual(['class SomeClass {', '}'].join('\n'));
-        expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, []), ['SomeClass']))
-            .toEqual(['export class SomeClass {', '}'].join('\n'));
+        expect(emitStmt(new o.ClassStmt('SomeClass', null !, [], [], null !, [], [
+          o.StmtModifier.Exported
+        ]))).toEqual(['export class SomeClass {', '}'].join('\n'));
         expect(emitStmt(new o.ClassStmt('SomeClass', o.variable('SomeSuperClass'), [], [], null !, [
         ]))).toEqual(['class SomeClass extends SomeSuperClass {', '}'].join('\n'));
       });
@@ -422,18 +381,8 @@ export function main() {
       expect(emitStmt(writeVarExpr.toDeclStmt(o.importType(sameModuleIdentifier))))
           .toEqual('var a:someLocalId = (null as any);');
       expect(emitStmt(writeVarExpr.toDeclStmt(o.importType(externalModuleIdentifier)))).toEqual([
-        `import * as import0 from 'somePackage/someOtherPath';`,
-        `var a:import0.someExternalId = (null as any);`
-      ].join('\n'));
-    });
-
-    it('should support `importAs` for external types', () => {
-      spyOn(importResolver, 'getImportAs')
-          .and.returnValue(new StaticSymbol('somePackage/importAsModule', 'importAsName', []));
-      const writeVarExpr = o.variable('a').set(o.NULL_EXPR);
-      expect(emitStmt(writeVarExpr.toDeclStmt(o.importType(externalModuleIdentifier)))).toEqual([
-        `import * as import0 from 'somePackage/importAsModule';`,
-        `var a:import0.importAsName = (null as any);`
+        `import * as i0 from 'somePackage/someOtherPath';`,
+        `var a:i0.someExternalId = (null as any);`
       ].join('\n'));
     });
 
@@ -448,8 +397,8 @@ export function main() {
                           .set(o.NULL_EXPR)
                           .toDeclStmt(o.importType(externalModuleIdentifier, [o.STRING_TYPE]))))
           .toEqual([
-            `import * as import0 from 'somePackage/someOtherPath';`,
-            `var a:import0.someExternalId<string> = (null as any);`
+            `import * as i0 from 'somePackage/someOtherPath';`,
+            `var a:i0.someExternalId<string> = (null as any);`
           ].join('\n'));
     });
 
@@ -467,7 +416,7 @@ export function main() {
     });
 
     it('should support a preamble', () => {
-      expect(emitStmt(o.variable('a').toStmt(), [], '/* SomePreamble */')).toBe([
+      expect(emitStmt(o.variable('a').toStmt(), '/* SomePreamble */')).toBe([
         '/* SomePreamble */', 'a;'
       ].join('\n'));
     });
diff --git a/packages/compiler/test/pipe_resolver_mock_spec.ts b/packages/compiler/test/pipe_resolver_mock_spec.ts
index 141afb2285..d52b1b494b 100644
--- a/packages/compiler/test/pipe_resolver_mock_spec.ts
+++ b/packages/compiler/test/pipe_resolver_mock_spec.ts
@@ -6,16 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {JitReflector} from '@angular/compiler';
 import {Injector, Pipe} from '@angular/core';
-import {beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+import {inject} from '@angular/core/testing';
+
 import {MockPipeResolver} from '../testing';
 
 export function main() {
   describe('MockPipeResolver', () => {
     let pipeResolver: MockPipeResolver;
 
-    beforeEach(inject(
-        [Injector], (injector: Injector) => { pipeResolver = new MockPipeResolver(injector); }));
+    beforeEach(inject([Injector], (injector: Injector) => {
+      pipeResolver = new MockPipeResolver(injector, new JitReflector());
+    }));
 
     describe('Pipe overriding', () => {
       it('should fallback to the default PipeResolver when templates are not overridden', () => {
diff --git a/packages/compiler/test/pipe_resolver_spec.ts b/packages/compiler/test/pipe_resolver_spec.ts
index 6b7a6b810a..2fd5cf7c23 100644
--- a/packages/compiler/test/pipe_resolver_spec.ts
+++ b/packages/compiler/test/pipe_resolver_spec.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {JitReflector} from '@angular/compiler';
 import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
 import {ɵstringify as stringify} from '@angular/core';
 import {Pipe} from '@angular/core/src/metadata';
@@ -20,7 +21,7 @@ export function main() {
   describe('PipeResolver', () => {
     let resolver: PipeResolver;
 
-    beforeEach(() => { resolver = new PipeResolver(); });
+    beforeEach(() => { resolver = new PipeResolver(new JitReflector()); });
 
     it('should read out the metadata from the class', () => {
       const moduleMetadata = resolver.resolve(SomePipe);
diff --git a/packages/compiler/test/schema/schema_extractor.ts b/packages/compiler/test/schema/schema_extractor.ts
index fe9fc431db..b9f83d0ab7 100644
--- a/packages/compiler/test/schema/schema_extractor.ts
+++ b/packages/compiler/test/schema/schema_extractor.ts
@@ -28,12 +28,14 @@ const ALL_HTML_TAGS =
 // Elements missing from Chrome (HtmlUnknownElement), to be manually added
 const MISSING_FROM_CHROME: {[el: string]: string[]} = {
   'data^[HTMLElement]': ['value'],
+  'keygen^[HTMLElement]': ['!autofocus', 'challenge', '!disabled', 'form', 'keytype', 'name'],
   // TODO(vicb): Figure out why Chrome and WhatWG do not agree on the props
   // 'menu^[HTMLElement]': ['type', 'label'],
   'menuitem^[HTMLElement]':
       ['type', 'label', 'icon', '!disabled', '!checked', 'radiogroup', '!default'],
   'summary^[HTMLElement]': [],
   'time^[HTMLElement]': ['dateTime'],
+  ':svg:cursor^:svg:': [],
 };
 
 const _G: any = global;
@@ -44,19 +46,7 @@ export function extractSchema(): Map<string, string[]>|null {
   const SVGGraphicsElement = _G['SVGGraphicsElement'];
   if (!SVGGraphicsElement) return null;
 
-  const SVGAnimationElement = _G['SVGAnimationElement'];
-  const SVGGeometryElement = _G['SVGGeometryElement'];
-  const SVGComponentTransferFunctionElement = _G['SVGComponentTransferFunctionElement'];
-  const SVGGradientElement = _G['SVGGradientElement'];
-  const SVGTextContentElement = _G['SVGTextContentElement'];
-  const SVGTextPositioningElement = _G['SVGTextPositioningElement'];
   const element = document.createElement('video');
-  const svgAnimation = document.createElementNS('http://www.w3.org/2000/svg', 'set');
-  const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  const svgFeFuncA = document.createElementNS('http://www.w3.org/2000/svg', 'feFuncA');
-  const svgGradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
-  const svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-
   const descMap: Map<string, string[]> = new Map();
   const visited: {[name: string]: boolean} = {};
 
@@ -68,6 +58,19 @@ export function extractSchema(): Map<string, string[]>|null {
   extractProperties(HTMLMediaElement, element, visited, descMap, 'media', HTMLELEMENT_IF);
 
   // SVG top level
+  const svgAnimation = document.createElementNS('http://www.w3.org/2000/svg', 'set');
+  const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  const svgFeFuncA = document.createElementNS('http://www.w3.org/2000/svg', 'feFuncA');
+  const svgGradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
+  const svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+
+  const SVGAnimationElement = _G['SVGAnimationElement'];
+  const SVGGeometryElement = _G['SVGGeometryElement'];
+  const SVGComponentTransferFunctionElement = _G['SVGComponentTransferFunctionElement'];
+  const SVGGradientElement = _G['SVGGradientElement'];
+  const SVGTextContentElement = _G['SVGTextContentElement'];
+  const SVGTextPositioningElement = _G['SVGTextPositioningElement'];
+
   extractProperties(SVGElement, svgText, visited, descMap, SVG_PREFIX, HTMLELEMENT_IF);
   extractProperties(
       SVGGraphicsElement, svgText, visited, descMap, SVG_PREFIX + 'graphics', SVG_PREFIX);
@@ -268,4 +271,4 @@ const _TYPE_MNEMONICS: {[type: string]: string} = {
   'number': '#',
   'boolean': '!',
   'object': '%',
-};
\ No newline at end of file
+};
diff --git a/packages/compiler/test/shadow_css_spec.ts b/packages/compiler/test/shadow_css_spec.ts
index 067e829579..372a0ef4e1 100644
--- a/packages/compiler/test/shadow_css_spec.ts
+++ b/packages/compiler/test/shadow_css_spec.ts
@@ -231,6 +231,19 @@ export function main() {
       expect(css).toEqual('x[a] y {}');
     });
 
+    it('should handle ::ng-deep', () => {
+      let css = '::ng-deep y {}';
+      expect(s(css, 'a')).toEqual('y {}');
+      css = 'x ::ng-deep y {}';
+      expect(s(css, 'a')).toEqual('x[a] y {}');
+      css = ':host > ::ng-deep .x {}';
+      expect(s(css, 'a', 'h')).toEqual('[h] > .x {}');
+      css = ':host ::ng-deep > .x {}';
+      expect(s(css, 'a', 'h')).toEqual('[h] > .x {}');
+      css = ':host > ::ng-deep > .x {}';
+      expect(s(css, 'a', 'h')).toEqual('[h] > > .x {}');
+    });
+
     it('should pass through @import directives', () => {
       const styleStr = '@import url("https://fonts.googleapis.com/css?family=Roboto");';
       const css = s(styleStr, 'a');
diff --git a/packages/compiler/test/template_parser/template_parser_spec.ts b/packages/compiler/test/template_parser/template_parser_spec.ts
index afd1bdc7ac..c0a2fe8335 100644
--- a/packages/compiler/test/template_parser/template_parser_spec.ts
+++ b/packages/compiler/test/template_parser/template_parser_spec.ts
@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {CompileQueryMetadata, CompilerConfig, ProxyClass, StaticSymbol} from '@angular/compiler';
+import {CompileQueryMetadata, CompilerConfig, JitReflector, ProxyClass, StaticSymbol} from '@angular/compiler';
 import {CompileAnimationEntryMetadata, CompileDiDependencyMetadata, CompileDirectiveMetadata, CompileDirectiveSummary, CompilePipeMetadata, CompilePipeSummary, CompileProviderMetadata, CompileTemplateMetadata, CompileTokenMetadata, CompileTypeMetadata, tokenReference} from '@angular/compiler/src/compile_metadata';
 import {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry';
 import {ElementSchemaRegistry} from '@angular/compiler/src/schema/element_schema_registry';
@@ -17,7 +17,7 @@ import {Console} from '@angular/core/src/console';
 import {TestBed, inject} from '@angular/core/testing';
 
 import {CompileEntryComponentMetadata, CompileStylesheetMetadata} from '../../src/compile_metadata';
-import {Identifiers, createIdentifierToken, identifierToken} from '../../src/identifiers';
+import {Identifiers, createTokenForExternalReference, createTokenForReference} from '../../src/identifiers';
 import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from '../../src/ml_parser/interpolation_config';
 import {noUndefined} from '../../src/util';
 import {MockSchemaRegistry} from '../../testing';
@@ -977,8 +977,8 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
           const dirA = createDir('[dirA]', {providers: [provider]});
           const elAst: ElementAst = <ElementAst>parse('<div dirA>', [dirA])[0];
           expect(elAst.providers.length).toBe(2);
-          expect(elAst.providers[1].providerType).toBe(ProviderAstType.PublicService);
-          expect(elAst.providers[1].providers).toEqual([provider]);
+          expect(elAst.providers[0].providerType).toBe(ProviderAstType.PublicService);
+          expect(elAst.providers[0].providers).toEqual([provider]);
         });
 
         it('should use the private providers of a component', () => {
@@ -986,8 +986,8 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
           const comp = createDir('my-comp', {viewProviders: [provider]});
           const elAst: ElementAst = <ElementAst>parse('<my-comp>', [comp])[0];
           expect(elAst.providers.length).toBe(2);
-          expect(elAst.providers[1].providerType).toBe(ProviderAstType.PrivateService);
-          expect(elAst.providers[1].providers).toEqual([provider]);
+          expect(elAst.providers[0].providerType).toBe(ProviderAstType.PrivateService);
+          expect(elAst.providers[0].providers).toEqual([provider]);
         });
 
         it('should support multi providers', () => {
@@ -998,8 +998,8 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
           const dirB = createDir('[dirB]', {providers: [provider2]});
           const elAst: ElementAst = <ElementAst>parse('<div dirA dirB>', [dirA, dirB])[0];
           expect(elAst.providers.length).toBe(4);
-          expect(elAst.providers[2].providers).toEqual([provider0, provider2]);
-          expect(elAst.providers[3].providers).toEqual([provider1]);
+          expect(elAst.providers[0].providers).toEqual([provider0, provider2]);
+          expect(elAst.providers[1].providers).toEqual([provider1]);
         });
 
         it('should overwrite non multi providers', () => {
@@ -1010,8 +1010,8 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
           const dirB = createDir('[dirB]', {providers: [provider3]});
           const elAst: ElementAst = <ElementAst>parse('<div dirA dirB>', [dirA, dirB])[0];
           expect(elAst.providers.length).toBe(4);
-          expect(elAst.providers[2].providers).toEqual([provider3]);
-          expect(elAst.providers[3].providers).toEqual([provider2]);
+          expect(elAst.providers[0].providers).toEqual([provider3]);
+          expect(elAst.providers[1].providers).toEqual([provider2]);
         });
 
         it('should overwrite component providers by directive providers', () => {
@@ -1021,7 +1021,7 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
           const dirA = createDir('[dirA]', {providers: [dirProvider]});
           const elAst: ElementAst = <ElementAst>parse('<my-comp dirA>', [dirA, comp])[0];
           expect(elAst.providers.length).toBe(3);
-          expect(elAst.providers[2].providers).toEqual([dirProvider]);
+          expect(elAst.providers[0].providers).toEqual([dirProvider]);
         });
 
         it('should overwrite view providers by directive providers', () => {
@@ -1031,7 +1031,7 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
           const dirA = createDir('[dirA]', {providers: [dirProvider]});
           const elAst: ElementAst = <ElementAst>parse('<my-comp dirA>', [dirA, comp])[0];
           expect(elAst.providers.length).toBe(3);
-          expect(elAst.providers[2].providers).toEqual([dirProvider]);
+          expect(elAst.providers[0].providers).toEqual([dirProvider]);
         });
 
         it('should overwrite directives by providers', () => {
@@ -1053,17 +1053,17 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
                   `Mixing multi and non multi provider is not possible for token service0 ("[ERROR ->]<div dirA dirB>"): TestComp@0:0`);
         });
 
-        it('should sort providers by their DI order', () => {
+        it('should sort providers by their DI order, lazy providers first', () => {
           const provider0 = createProvider('service0', {deps: ['type:[dir2]']});
           const provider1 = createProvider('service1');
           const dir2 = createDir('[dir2]', {deps: ['service1']});
           const comp = createDir('my-comp', {providers: [provider0, provider1]});
           const elAst: ElementAst = <ElementAst>parse('<my-comp dir2>', [comp, dir2])[0];
           expect(elAst.providers.length).toBe(4);
-          expect(elAst.providers[0].providers[0].useClass).toEqual(comp.type);
-          expect(elAst.providers[1].providers).toEqual([provider1]);
-          expect(elAst.providers[2].providers[0].useClass).toEqual(dir2.type);
-          expect(elAst.providers[3].providers).toEqual([provider0]);
+          expect(elAst.providers[1].providers[0].useClass).toEqual(comp.type);
+          expect(elAst.providers[2].providers).toEqual([provider1]);
+          expect(elAst.providers[3].providers[0].useClass).toEqual(dir2.type);
+          expect(elAst.providers[0].providers).toEqual([provider0]);
         });
 
         it('should sort directives by their DI order', () => {
@@ -1086,12 +1086,12 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
           const dirA = createDir('[dirA]', {providers: [provider0, provider1], deps: ['service0']});
           const elAst: ElementAst = <ElementAst>parse('<div dirA>', [dirA])[0];
           expect(elAst.providers.length).toBe(3);
-          expect(elAst.providers[0].providers).toEqual([provider0]);
-          expect(elAst.providers[0].eager).toBe(true);
-          expect(elAst.providers[1].providers[0].useClass).toEqual(dirA.type);
+          expect(elAst.providers[1].providers).toEqual([provider0]);
           expect(elAst.providers[1].eager).toBe(true);
-          expect(elAst.providers[2].providers).toEqual([provider1]);
-          expect(elAst.providers[2].eager).toBe(false);
+          expect(elAst.providers[2].providers[0].useClass).toEqual(dirA.type);
+          expect(elAst.providers[2].eager).toBe(true);
+          expect(elAst.providers[0].providers).toEqual([provider1]);
+          expect(elAst.providers[0].eager).toBe(false);
         });
 
         it('should mark dependencies on parent elements as eager', () => {
@@ -1102,12 +1102,12 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
           const elAst: ElementAst =
               <ElementAst>parse('<div dirA><div dirB></div></div>', [dirA, dirB])[0];
           expect(elAst.providers.length).toBe(3);
-          expect(elAst.providers[0].providers[0].useClass).toEqual(dirA.type);
-          expect(elAst.providers[0].eager).toBe(true);
-          expect(elAst.providers[1].providers).toEqual([provider0]);
+          expect(elAst.providers[1].providers[0].useClass).toEqual(dirA.type);
           expect(elAst.providers[1].eager).toBe(true);
-          expect(elAst.providers[2].providers).toEqual([provider1]);
-          expect(elAst.providers[2].eager).toBe(false);
+          expect(elAst.providers[2].providers).toEqual([provider0]);
+          expect(elAst.providers[2].eager).toBe(true);
+          expect(elAst.providers[0].providers).toEqual([provider1]);
+          expect(elAst.providers[0].eager).toBe(false);
         });
 
         it('should mark queried providers as eager', () => {
@@ -1117,12 +1117,12 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
               createDir('[dirA]', {providers: [provider0, provider1], queries: ['service0']});
           const elAst: ElementAst = <ElementAst>parse('<div dirA></div>', [dirA])[0];
           expect(elAst.providers.length).toBe(3);
-          expect(elAst.providers[0].providers[0].useClass).toEqual(dirA.type);
-          expect(elAst.providers[0].eager).toBe(true);
-          expect(elAst.providers[1].providers).toEqual([provider0]);
+          expect(elAst.providers[1].providers[0].useClass).toEqual(dirA.type);
           expect(elAst.providers[1].eager).toBe(true);
-          expect(elAst.providers[2].providers).toEqual([provider1]);
-          expect(elAst.providers[2].eager).toBe(false);
+          expect(elAst.providers[2].providers).toEqual([provider0]);
+          expect(elAst.providers[2].eager).toBe(true);
+          expect(elAst.providers[0].providers).toEqual([provider1]);
+          expect(elAst.providers[0].eager).toBe(false);
         });
 
         it('should not mark dependencies across embedded views as eager', () => {
@@ -1132,10 +1132,10 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
           const elAst: ElementAst =
               <ElementAst>parse('<div dirA><div *ngIf dirB></div></div>', [dirA, dirB])[0];
           expect(elAst.providers.length).toBe(2);
-          expect(elAst.providers[0].providers[0].useClass).toEqual(dirA.type);
-          expect(elAst.providers[0].eager).toBe(true);
-          expect(elAst.providers[1].providers).toEqual([provider0]);
-          expect(elAst.providers[1].eager).toBe(false);
+          expect(elAst.providers[1].providers[0].useClass).toEqual(dirA.type);
+          expect(elAst.providers[1].eager).toBe(true);
+          expect(elAst.providers[0].providers).toEqual([provider0]);
+          expect(elAst.providers[0].eager).toBe(false);
         });
 
         it('should report missing @Self() deps as errors', () => {
@@ -1198,7 +1198,7 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
           expect(humanizeTplAst(parse('<div a #a="dirA"></div>', [dirA]))).toEqual([
             [ElementAst, 'div'],
             [AttrAst, 'a', ''],
-            [ReferenceAst, 'a', identifierToken(dirA.type)],
+            [ReferenceAst, 'a', createTokenForReference(dirA.type.reference)],
             [DirectiveAst, dirA],
           ]);
         });
@@ -1244,7 +1244,7 @@ Reference "#a" is defined several times ("<div #a></div><div [ERROR ->]#a></div>
           expect(humanizeTplAst(parse('<div a #a></div>', [dirA]))).toEqual([
             [ElementAst, 'div'],
             [AttrAst, 'a', ''],
-            [ReferenceAst, 'a', identifierToken(dirA.type)],
+            [ReferenceAst, 'a', createTokenForReference(dirA.type.reference)],
             [DirectiveAst, dirA],
           ]);
         });
@@ -1262,6 +1262,10 @@ Reference "#a" is defined several times ("<div #a></div><div [ERROR ->]#a></div>
       });
 
       describe('explicit templates', () => {
+        let reflector: JitReflector;
+
+        beforeEach(() => { reflector = new JitReflector(); });
+
         it('should create embedded templates for <ng-template> elements', () => {
           expect(humanizeTplAst(parse('<template></template>', [
           ]))).toEqual([[EmbeddedTemplateAst]]);
@@ -1286,22 +1290,30 @@ Reference "#a" is defined several times ("<div #a></div><div [ERROR ->]#a></div>
         it('should support references via #...', () => {
           expect(humanizeTplAst(parse('<template #a>', []))).toEqual([
             [EmbeddedTemplateAst],
-            [ReferenceAst, 'a', createIdentifierToken(Identifiers.TemplateRef)],
+            [
+              ReferenceAst, 'a', createTokenForExternalReference(reflector, Identifiers.TemplateRef)
+            ],
           ]);
           expect(humanizeTplAst(parse('<ng-template #a>', []))).toEqual([
             [EmbeddedTemplateAst],
-            [ReferenceAst, 'a', createIdentifierToken(Identifiers.TemplateRef)],
+            [
+              ReferenceAst, 'a', createTokenForExternalReference(reflector, Identifiers.TemplateRef)
+            ],
           ]);
         });
 
         it('should support references via ref-...', () => {
           expect(humanizeTplAst(parse('<template ref-a>', []))).toEqual([
             [EmbeddedTemplateAst],
-            [ReferenceAst, 'a', createIdentifierToken(Identifiers.TemplateRef)]
+            [
+              ReferenceAst, 'a', createTokenForExternalReference(reflector, Identifiers.TemplateRef)
+            ]
           ]);
           expect(humanizeTplAst(parse('<ng-template ref-a>', []))).toEqual([
             [EmbeddedTemplateAst],
-            [ReferenceAst, 'a', createIdentifierToken(Identifiers.TemplateRef)]
+            [
+              ReferenceAst, 'a', createTokenForExternalReference(reflector, Identifiers.TemplateRef)
+            ]
           ]);
         });
 
diff --git a/packages/compiler/test/util_spec.ts b/packages/compiler/test/util_spec.ts
index f614f10bb7..149ed6ae1c 100644
--- a/packages/compiler/test/util_spec.ts
+++ b/packages/compiler/test/util_spec.ts
@@ -7,18 +7,10 @@
  */
 
 import {fakeAsync} from '@angular/core/testing/src/fake_async';
-import {SyncAsyncResult, escapeRegExp, splitAtColon, utf8Encode} from '../src/util';
+import {SyncAsync, escapeRegExp, splitAtColon, utf8Encode} from '../src/util';
 
 export function main() {
   describe('util', () => {
-    describe('SyncAsyncResult', () => {
-      it('async value should default to Promise.resolve(syncValue)', fakeAsync(() => {
-           const syncValue = {};
-           const sar = new SyncAsyncResult(syncValue);
-           sar.asyncResult !.then((v: any) => expect(v).toBe(syncValue));
-         }));
-    });
-
     describe('splitAtColon', () => {
       it('should split when a single ":" is present', () => {
         expect(splitAtColon('a:b', [])).toEqual(['a', 'b']);
diff --git a/packages/compiler/testing/rollup.config.js b/packages/compiler/testing/rollup.config.js
index 4cdb6e5493..d2b3ec95b2 100644
--- a/packages/compiler/testing/rollup.config.js
+++ b/packages/compiler/testing/rollup.config.js
@@ -6,17 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/core/testing': 'ng.core.testing',
+  '@angular/compiler': 'ng.compiler',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx'
+};
+
 export default {
   entry: '../../../dist/packages-dist/compiler/@angular/compiler/testing.es5.js',
   dest: '../../../dist/packages-dist/compiler/bundles/compiler-testing.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.compiler.testing',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/core/testing': 'ng.core.testing',
-    '@angular/compiler': 'ng.compiler',
-    'rxjs/Observable': 'Rx',
-    'rxjs/Subject': 'Rx'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/compiler/testing/src/directive_resolver_mock.ts b/packages/compiler/testing/src/directive_resolver_mock.ts
index 3030cc48df..ad8176fdaf 100644
--- a/packages/compiler/testing/src/directive_resolver_mock.ts
+++ b/packages/compiler/testing/src/directive_resolver_mock.ts
@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {DirectiveResolver} from '@angular/compiler';
+import {CompileReflector, DirectiveResolver} from '@angular/compiler';
 import {Compiler, Component, Directive, Injectable, Injector, Provider, Type, resolveForwardRef, ɵViewMetadata as ViewMetadata} from '@angular/core';
 
 
@@ -22,7 +22,7 @@ export class MockDirectiveResolver extends DirectiveResolver {
   private _views = new Map<Type<any>, ViewMetadata>();
   private _inlineTemplates = new Map<Type<any>, string>();
 
-  constructor(private _injector: Injector) { super(); }
+  constructor(private _injector: Injector, reflector: CompileReflector) { super(reflector); }
 
   private get _compiler(): Compiler { return this._injector.get(Compiler); }
 
diff --git a/packages/compiler/testing/src/ng_module_resolver_mock.ts b/packages/compiler/testing/src/ng_module_resolver_mock.ts
index 9cd31908ec..602c5e2b87 100644
--- a/packages/compiler/testing/src/ng_module_resolver_mock.ts
+++ b/packages/compiler/testing/src/ng_module_resolver_mock.ts
@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgModuleResolver} from '@angular/compiler';
+import {CompileReflector, NgModuleResolver} from '@angular/compiler';
 import {Compiler, Injectable, Injector, NgModule, Type} from '@angular/core';
 
 @Injectable()
 export class MockNgModuleResolver extends NgModuleResolver {
   private _ngModules = new Map<Type<any>, NgModule>();
 
-  constructor(private _injector: Injector) { super(); }
+  constructor(private _injector: Injector, reflector: CompileReflector) { super(reflector); }
 
   /**
    * Overrides the {@link NgModule} for a module.
diff --git a/packages/compiler/testing/src/pipe_resolver_mock.ts b/packages/compiler/testing/src/pipe_resolver_mock.ts
index 29fa046767..a636002dd1 100644
--- a/packages/compiler/testing/src/pipe_resolver_mock.ts
+++ b/packages/compiler/testing/src/pipe_resolver_mock.ts
@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {PipeResolver} from '@angular/compiler';
+import {CompileReflector, PipeResolver} from '@angular/compiler';
 import {Compiler, Injectable, Injector, Pipe, Type} from '@angular/core';
 
 @Injectable()
 export class MockPipeResolver extends PipeResolver {
   private _pipes = new Map<Type<any>, Pipe>();
 
-  constructor(private _injector: Injector) { super(); }
+  constructor(private _injector: Injector, refector: CompileReflector) { super(refector); }
 
   private get _compiler(): Compiler { return this._injector.get(Compiler); }
 
diff --git a/packages/compiler/testing/src/testing.ts b/packages/compiler/testing/src/testing.ts
index d270cc8ba0..c77be42fd8 100644
--- a/packages/compiler/testing/src/testing.ts
+++ b/packages/compiler/testing/src/testing.ts
@@ -26,9 +26,9 @@ export * from './directive_resolver_mock';
 export * from './ng_module_resolver_mock';
 export * from './pipe_resolver_mock';
 
-import {createPlatformFactory, ModuleWithComponentFactories, Injectable, CompilerOptions, COMPILER_OPTIONS, CompilerFactory, NgModuleFactory, Injector, NgModule, Component, Directive, Pipe, Type, PlatformRef} from '@angular/core';
+import {createPlatformFactory, ModuleWithComponentFactories, Injectable, CompilerOptions, COMPILER_OPTIONS, CompilerFactory, ComponentFactory, NgModuleFactory, Injector, NgModule, Component, Directive, Pipe, Type, PlatformRef, ɵstringify} from '@angular/core';
 import {MetadataOverride, ɵTestingCompilerFactory as TestingCompilerFactory, ɵTestingCompiler as TestingCompiler} from '@angular/core/testing';
-import {platformCoreDynamic, JitCompiler, DirectiveResolver, NgModuleResolver, PipeResolver} from '@angular/compiler';
+import {platformCoreDynamic, JitCompiler, DirectiveResolver, NgModuleResolver, PipeResolver, CompileMetadataResolver} from '@angular/compiler';
 import {MockDirectiveResolver} from './directive_resolver_mock';
 import {MockNgModuleResolver} from './ng_module_resolver_mock';
 import {MockPipeResolver} from './pipe_resolver_mock';
@@ -42,7 +42,8 @@ export class TestingCompilerFactoryImpl implements TestingCompilerFactory {
     const compiler = <JitCompiler>this._compilerFactory.createCompiler(options);
     return new TestingCompilerImpl(
         compiler, compiler.injector.get(MockDirectiveResolver),
-        compiler.injector.get(MockPipeResolver), compiler.injector.get(MockNgModuleResolver));
+        compiler.injector.get(MockPipeResolver), compiler.injector.get(MockNgModuleResolver),
+        compiler.injector.get(CompileMetadataResolver));
   }
 }
 
@@ -50,7 +51,8 @@ export class TestingCompilerImpl implements TestingCompiler {
   private _overrider = new MetadataOverrider();
   constructor(
       private _compiler: JitCompiler, private _directiveResolver: MockDirectiveResolver,
-      private _pipeResolver: MockPipeResolver, private _moduleResolver: MockNgModuleResolver) {}
+      private _pipeResolver: MockPipeResolver, private _moduleResolver: MockNgModuleResolver,
+      private _metadataResolver: CompileMetadataResolver) {}
   get injector(): Injector { return this._compiler.injector; }
 
   compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T> {
@@ -73,25 +75,40 @@ export class TestingCompilerImpl implements TestingCompiler {
     return this._compiler.getNgContentSelectors(component);
   }
 
+  getComponentFactory<T>(component: Type<T>): ComponentFactory<T> {
+    return this._compiler.getComponentFactory(component);
+  }
+
+  checkOverrideAllowed(type: Type<any>) {
+    if (this._compiler.hasAotSummary(type)) {
+      throw new Error(`${ɵstringify(type)} was AOT compiled, so its metadata cannot be changed.`);
+    }
+  }
+
   overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): void {
+    this.checkOverrideAllowed(ngModule);
     const oldMetadata = this._moduleResolver.resolve(ngModule, false);
     this._moduleResolver.setNgModule(
         ngModule, this._overrider.overrideMetadata(NgModule, oldMetadata, override));
   }
   overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>): void {
+    this.checkOverrideAllowed(directive);
     const oldMetadata = this._directiveResolver.resolve(directive, false);
     this._directiveResolver.setDirective(
         directive, this._overrider.overrideMetadata(Directive, oldMetadata !, override));
   }
   overrideComponent(component: Type<any>, override: MetadataOverride<Component>): void {
+    this.checkOverrideAllowed(component);
     const oldMetadata = this._directiveResolver.resolve(component, false);
     this._directiveResolver.setDirective(
         component, this._overrider.overrideMetadata(Component, oldMetadata !, override));
   }
   overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): void {
+    this.checkOverrideAllowed(pipe);
     const oldMetadata = this._pipeResolver.resolve(pipe, false);
     this._pipeResolver.setPipe(pipe, this._overrider.overrideMetadata(Pipe, oldMetadata, override));
   }
+  loadAotSummaries(summaries: () => any[]) { this._compiler.loadAotSummaries(summaries); }
   clearCache(): void { this._compiler.clearCache(); }
   clearCacheFor(type: Type<any>) { this._compiler.clearCacheFor(type); }
 }
diff --git a/packages/core/BUILD.bazel b/packages/core/BUILD.bazel
new file mode 100644
index 0000000000..b0654c1ca6
--- /dev/null
+++ b/packages/core/BUILD.bazel
@@ -0,0 +1,28 @@
+package(default_visibility=["//visibility:public"])
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+ts_library(
+    name = "core",
+    srcs = glob(["**/*.ts"], exclude=[
+      "test/**",
+      "testing/**",
+    ]),
+    module_name = "@angular/core",
+    deps = [],
+    tsconfig = ":tsconfig-build.json",
+)
+
+load("@build_bazel_rules_angular//:defs.bzl", "ng_module")
+
+ng_module(
+  name = "core_ng_module",
+  srcs = glob(["**/*.ts"], exclude=[
+      "test/**",
+      "testing/**",
+  ]),
+  # Needed to allow (ts_library,ng_module) pair
+  write_ng_outputs_only = True,
+  module_name = "@angular/core",
+  tsconfig = ":tsconfig-build.json",
+  compiler = "//tools/ngc-wrapped"
+)
\ No newline at end of file
diff --git a/packages/core/package.json b/packages/core/package.json
index 4d279a4cd5..acababdeaf 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -8,6 +8,9 @@
   "typings": "./core.d.ts",
   "author": "angular",
   "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "rxjs": "^5.0.1",
     "zone.js": "^0.8.4"
diff --git a/packages/core/public_api.ts b/packages/core/public_api.ts
index d0b16c5459..ede0762054 100644
--- a/packages/core/public_api.ts
+++ b/packages/core/public_api.ts
@@ -14,9 +14,3 @@
 export * from './src/core';
 
 // This file only reexports content of the `src` folder. Keep it that way.
-
-// This is a hack to prevent people from turning on strictNullChecks. See #15432
-export declare interface ɵStrictNullChecksNotSupported {
-  dontUseStrictNullChecksWithAngularYetSeeIssue15432: string|null;
-  [key: string]: string;
-}
diff --git a/packages/core/rollup.config.js b/packages/core/rollup.config.js
index 9d3b71fcd6..eac596d330 100644
--- a/packages/core/rollup.config.js
+++ b/packages/core/rollup.config.js
@@ -6,18 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx',
+  'rxjs/Observer': 'Rx',
+  'rxjs/Subscription': 'Rx',
+  'rxjs/observable/merge': 'Rx.Observable',
+  'rxjs/operator/share': 'Rx.Observable.prototype'
+};
+
 export default {
   entry: '../../dist/packages-dist/core/@angular/core.es5.js',
   dest: '../../dist/packages-dist/core/bundles/core.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.core',
-  globals: {
-    'rxjs/Observable': 'Rx',
-    'rxjs/Subject': 'Rx',
-    'rxjs/Observer': 'Rx',
-    'rxjs/Subscription': 'Rx',
-    'rxjs/observable/merge': 'Rx.Observable',
-    'rxjs/operator/share': 'Rx.Observable.prototype'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/core/src/animation/animation_metadata_wrapped.ts b/packages/core/src/animation/animation_metadata_wrapped.ts
index b2fb05475d..d8b6da3a37 100644
--- a/packages/core/src/animation/animation_metadata_wrapped.ts
+++ b/packages/core/src/animation/animation_metadata_wrapped.ts
@@ -53,8 +53,8 @@ export interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {
  * @deprecated This symbol has moved. Please Import from @angular/animations instead!
  */
 export interface AnimationStyleMetadata extends AnimationMetadata {
-  styles: {[key: string]: string | number}|{[key: string]: string | number}[];
-  offset?: number;
+  styles: '*'|{[key: string]: string | number}|Array<{[key: string]: string | number}|'*'>;
+  offset: number|null;
 }
 
 /**
@@ -131,9 +131,8 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
 /**
  * @deprecated This symbol has moved. Please Import from @angular/animations instead!
  */
-export function transition(
-    stateChangeExpr: string | ((fromState: string, toState: string) => boolean),
-    steps: AnimationMetadata | AnimationMetadata[]): AnimationTransitionMetadata {
+export function transition(stateChangeExpr: string, steps: AnimationMetadata | AnimationMetadata[]):
+    AnimationTransitionMetadata {
   return _transition(stateChangeExpr, steps);
 }
 
diff --git a/packages/core/src/application_init.ts b/packages/core/src/application_init.ts
index e73c649f5c..fdc1966a00 100644
--- a/packages/core/src/application_init.ts
+++ b/packages/core/src/application_init.ts
@@ -24,23 +24,48 @@ export const APP_INITIALIZER = new InjectionToken<Array<() => void>>('Applicatio
  */
 @Injectable()
 export class ApplicationInitStatus {
+  private resolve: Function;
+  private reject: Function;
+  private initialized = false;
   private _donePromise: Promise<any>;
   private _done = false;
 
-  constructor(@Inject(APP_INITIALIZER) @Optional() appInits: (() => any)[]) {
+  constructor(@Inject(APP_INITIALIZER) @Optional() private appInits: (() => any)[]) {
+    this._donePromise = new Promise((res, rej) => {
+      this.resolve = res;
+      this.reject = rej;
+    });
+  }
+
+  /** @internal */
+  runInitializers() {
+    if (this.initialized) {
+      return;
+    }
+
     const asyncInitPromises: Promise<any>[] = [];
-    if (appInits) {
-      for (let i = 0; i < appInits.length; i++) {
-        const initResult = appInits[i]();
+
+    const complete =
+        () => {
+          this._done = true;
+          this.resolve();
+        }
+
+    if (this.appInits) {
+      for (let i = 0; i < this.appInits.length; i++) {
+        const initResult = this.appInits[i]();
         if (isPromise(initResult)) {
           asyncInitPromises.push(initResult);
         }
       }
     }
-    this._donePromise = Promise.all(asyncInitPromises).then(() => { this._done = true; });
+
+    Promise.all(asyncInitPromises).then(() => { complete(); }).catch(e => { this.reject(e); });
+
     if (asyncInitPromises.length === 0) {
-      this._done = true;
+      complete();
     }
+    this.initialized = true;
   }
 
   get done(): boolean { return this._done; }
diff --git a/packages/core/src/application_module.ts b/packages/core/src/application_module.ts
index f03e7f682d..5c4b359a5f 100644
--- a/packages/core/src/application_module.ts
+++ b/packages/core/src/application_module.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {APP_INITIALIZER, ApplicationInitStatus} from './application_init';
+import {ApplicationInitStatus} from './application_init';
 import {ApplicationRef, ApplicationRef_} from './application_ref';
 import {APP_ID_RANDOM_PROVIDER} from './application_tokens';
 import {IterableDiffers, KeyValueDiffers, defaultIterableDiffers, defaultKeyValueDiffers} from './change_detection/change_detection';
@@ -14,7 +14,6 @@ import {Inject, Optional, SkipSelf} from './di/metadata';
 import {LOCALE_ID} from './i18n/tokens';
 import {Compiler} from './linker/compiler';
 import {NgModule} from './metadata';
-import {initServicesIfNeeded} from './view/index';
 
 export function _iterableDiffersFactory() {
   return defaultIterableDiffers;
@@ -28,10 +27,6 @@ export function _localeFactory(locale?: string): string {
   return locale || 'en-US';
 }
 
-export function _initViewEngine() {
-  initServicesIfNeeded();
-}
-
 /**
  * This module includes the providers of @angular/core that are needed
  * to bootstrap components via `ApplicationRef`.
@@ -52,7 +47,6 @@ export function _initViewEngine() {
       useFactory: _localeFactory,
       deps: [[new Inject(LOCALE_ID), new Optional(), new SkipSelf()]]
     },
-    {provide: APP_INITIALIZER, useValue: _initViewEngine, multi: true},
   ]
 })
 export class ApplicationModule {
diff --git a/packages/core/src/application_ref.ts b/packages/core/src/application_ref.ts
index d26551582f..ebb6a28b2d 100644
--- a/packages/core/src/application_ref.ts
+++ b/packages/core/src/application_ref.ts
@@ -23,7 +23,7 @@ import {Injectable, InjectionToken, Injector, Provider, ReflectiveInjector} from
 import {CompilerFactory, CompilerOptions} from './linker/compiler';
 import {ComponentFactory, ComponentRef} from './linker/component_factory';
 import {ComponentFactoryBoundToModule, ComponentFactoryResolver} from './linker/component_factory_resolver';
-import {NgModuleFactory, NgModuleInjector, NgModuleRef} from './linker/ng_module_factory';
+import {InternalNgModuleRef, NgModuleFactory, NgModuleRef} from './linker/ng_module_factory';
 import {InternalViewRef, ViewRef} from './linker/view_ref';
 import {WtfScopeFn, wtfCreateScope, wtfLeave} from './profile/profile';
 import {Testability, TestabilityRegistry} from './testability/testability';
@@ -89,7 +89,7 @@ export function createPlatform(injector: Injector): PlatformRef {
   }
   _platform = injector.get(PlatformRef);
   const inits = injector.get(PLATFORM_INITIALIZER, null);
-  if (inits) inits.forEach(init => init());
+  if (inits) inits.forEach((init: any) => init());
   return _platform;
 }
 
@@ -162,8 +162,8 @@ export function getPlatform(): PlatformRef|null {
  * has exactly one platform, and services (such as reflection) which are common
  * to every Angular application running on the page are bound in its scope.
  *
- * A page's platform is initialized implicitly when {@link bootstrap}() is called, or
- * explicitly by calling {@link createPlatform}().
+ * A page's platform is initialized implicitly when a platform is created via a platform factory
+ * (e.g. {@link platformBrowser}), or explicitly by calling the {@link createPlatform} function.
  *
  * @stable
  */
@@ -231,12 +231,13 @@ export abstract class PlatformRef {
   abstract get destroyed(): boolean;
 }
 
-function _callAndReportToErrorHandler(errorHandler: ErrorHandler, callback: () => any): any {
+function _callAndReportToErrorHandler(
+    errorHandler: ErrorHandler, ngZone: NgZone, callback: () => any): any {
   try {
     const result = callback();
     if (isPromise(result)) {
       return result.catch((e: any) => {
-        errorHandler.handleError(e);
+        ngZone.runOutsideAngular(() => errorHandler.handleError(e));
         // rethrow as the exception handler might not do it
         throw e;
       });
@@ -244,7 +245,7 @@ function _callAndReportToErrorHandler(errorHandler: ErrorHandler, callback: () =
 
     return result;
   } catch (e) {
-    errorHandler.handleError(e);
+    ngZone.runOutsideAngular(() => errorHandler.handleError(e));
     // rethrow as the exception handler might not do it
     throw e;
   }
@@ -293,15 +294,18 @@ export class PlatformRef_ extends PlatformRef {
     return ngZone.run(() => {
       const ngZoneInjector =
           ReflectiveInjector.resolveAndCreate([{provide: NgZone, useValue: ngZone}], this.injector);
-      const moduleRef = <NgModuleInjector<M>>moduleFactory.create(ngZoneInjector);
+      const moduleRef = <InternalNgModuleRef<M>>moduleFactory.create(ngZoneInjector);
       const exceptionHandler: ErrorHandler = moduleRef.injector.get(ErrorHandler, null);
       if (!exceptionHandler) {
         throw new Error('No ErrorHandler. Is platform module (BrowserModule) included?');
       }
       moduleRef.onDestroy(() => remove(this._modules, moduleRef));
-      ngZone !.onError.subscribe({next: (error: any) => { exceptionHandler.handleError(error); }});
-      return _callAndReportToErrorHandler(exceptionHandler, () => {
+      ngZone !.runOutsideAngular(
+          () => ngZone !.onError.subscribe(
+              {next: (error: any) => { exceptionHandler.handleError(error); }}));
+      return _callAndReportToErrorHandler(exceptionHandler, ngZone !, () => {
         const initStatus: ApplicationInitStatus = moduleRef.injector.get(ApplicationInitStatus);
+        initStatus.runInitializers();
         return initStatus.donePromise.then(() => {
           this._moduleDoBootstrap(moduleRef);
           return moduleRef;
@@ -326,10 +330,10 @@ export class PlatformRef_ extends PlatformRef {
         .then((moduleFactory) => this._bootstrapModuleFactoryWithZone(moduleFactory, ngZone));
   }
 
-  private _moduleDoBootstrap(moduleRef: NgModuleInjector<any>): void {
-    const appRef = moduleRef.injector.get(ApplicationRef);
-    if (moduleRef.bootstrapFactories.length > 0) {
-      moduleRef.bootstrapFactories.forEach(f => appRef.bootstrap(f));
+  private _moduleDoBootstrap(moduleRef: InternalNgModuleRef<any>): void {
+    const appRef = moduleRef.injector.get(ApplicationRef) as ApplicationRef;
+    if (moduleRef._bootstrapComponents.length > 0) {
+      moduleRef._bootstrapComponents.forEach(f => appRef.bootstrap(f));
     } else if (moduleRef.instance.ngDoBootstrap) {
       moduleRef.instance.ngDoBootstrap(appRef);
     } else {
@@ -344,8 +348,6 @@ export class PlatformRef_ extends PlatformRef {
 /**
  * A reference to an Angular application running on a page.
  *
- * For more about Angular applications, see the documentation for {@link bootstrap}.
- *
  * @stable
  */
 export abstract class ApplicationRef {
@@ -358,10 +360,15 @@ export abstract class ApplicationRef {
    * specified application component onto DOM elements identified by the [componentType]'s
    * selector and kicks off automatic change detection to finish initializing the component.
    *
+   * Optionally, a component can be mounted onto a DOM element that does not match the
+   * [componentType]'s selector.
+   *
    * ### Example
    * {@example core/ts/platform/platform.ts region='longform'}
    */
-  abstract bootstrap<C>(componentFactory: ComponentFactory<C>|Type<C>): ComponentRef<C>;
+  abstract bootstrap<C>(
+      componentFactory: ComponentFactory<C>|Type<C>,
+      rootSelectorOrNode?: string|any): ComponentRef<C>;
 
   /**
    * Invoke this method to explicitly process change detection and its side-effects.
@@ -491,7 +498,8 @@ export class ApplicationRef_ extends ApplicationRef {
     view.detachFromAppRef();
   }
 
-  bootstrap<C>(componentOrFactory: ComponentFactory<C>|Type<C>): ComponentRef<C> {
+  bootstrap<C>(componentOrFactory: ComponentFactory<C>|Type<C>, rootSelectorOrNode?: string|any):
+      ComponentRef<C> {
     if (!this._initStatus.done) {
       throw new Error(
           'Cannot bootstrap as there are still asynchronous initializers running. Bootstrap components in the `ngDoBootstrap` method of the root module.');
@@ -509,7 +517,8 @@ export class ApplicationRef_ extends ApplicationRef {
     const ngModule = componentFactory instanceof ComponentFactoryBoundToModule ?
         null :
         this._injector.get(NgModuleRef);
-    const compRef = componentFactory.create(Injector.NULL, [], componentFactory.selector, ngModule);
+    const selectorOrNode = rootSelectorOrNode || componentFactory.selector;
+    const compRef = componentFactory.create(Injector.NULL, [], selectorOrNode, ngModule);
 
     compRef.onDestroy(() => { this._unloadComponent(compRef); });
     const testability = compRef.injector.get(Testability, null);
@@ -553,6 +562,9 @@ export class ApplicationRef_ extends ApplicationRef {
       if (this._enforceNoNewChanges) {
         this._views.forEach((view) => view.checkNoChanges());
       }
+    } catch (e) {
+      // Attention: Don't rethrow as it could cancel subscriptions to Observables!
+      this._zone.runOutsideAngular(() => this._exceptionHandler.handleError(e));
     } finally {
       this._runningTick = false;
       wtfLeave(scope);
diff --git a/packages/core/src/change_detection/change_detector_ref.ts b/packages/core/src/change_detection/change_detector_ref.ts
index 21bb7dde38..ee01d95916 100644
--- a/packages/core/src/change_detection/change_detector_ref.ts
+++ b/packages/core/src/change_detection/change_detector_ref.ts
@@ -26,7 +26,7 @@ export abstract class ChangeDetectorRef {
    * class Cmp {
    *   numberOfTicks = 0;
    *
-   *   constructor(ref: ChangeDetectorRef) {
+   *   constructor(private ref: ChangeDetectorRef) {
    *     setInterval(() => {
    *       this.numberOfTicks ++
    *       // the following is required, otherwise the view will not be updated
diff --git a/packages/core/src/change_detection/differs/default_iterable_differ.ts b/packages/core/src/change_detection/differs/default_iterable_differ.ts
index 72a4963069..6f5686b165 100644
--- a/packages/core/src/change_detection/differs/default_iterable_differ.ts
+++ b/packages/core/src/change_detection/differs/default_iterable_differ.ts
@@ -172,7 +172,6 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
 
   onDestroy() {}
 
-  // todo(vicb): optim for UnmodifiableListView (frozen arrays)
   check(collection: NgIterable<V>): boolean {
     this._reset();
 
@@ -281,12 +280,12 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
   _mismatch(record: IterableChangeRecord_<V>|null, item: V, itemTrackBy: any, index: number):
       IterableChangeRecord_<V> {
     // The previous record after which we will append the current one.
-    let previousRecord: IterableChangeRecord_<V>;
+    let previousRecord: IterableChangeRecord_<V>|null;
 
     if (record === null) {
-      previousRecord = this._itTail !;
+      previousRecord = this._itTail;
     } else {
-      previousRecord = record._prev !;
+      previousRecord = record._prev;
       // Remove the record from the collection since we know it does not match the item.
       this._remove(record);
     }
@@ -394,7 +393,7 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
 
   /** @internal */
   _reinsertAfter(
-      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>,
+      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
       index: number): IterableChangeRecord_<V> {
     if (this._unlinkedRecords !== null) {
       this._unlinkedRecords.remove(record);
@@ -419,8 +418,9 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
   }
 
   /** @internal */
-  _moveAfter(record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>, index: number):
-      IterableChangeRecord_<V> {
+  _moveAfter(
+      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
+      index: number): IterableChangeRecord_<V> {
     this._unlink(record);
     this._insertAfter(record, prevRecord, index);
     this._addToMoves(record, index);
@@ -428,8 +428,9 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
   }
 
   /** @internal */
-  _addAfter(record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>, index: number):
-      IterableChangeRecord_<V> {
+  _addAfter(
+      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
+      index: number): IterableChangeRecord_<V> {
     this._insertAfter(record, prevRecord, index);
 
     if (this._additionsTail === null) {
@@ -447,7 +448,7 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
 
   /** @internal */
   _insertAfter(
-      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>,
+      record: IterableChangeRecord_<V>, prevRecord: IterableChangeRecord_<V>|null,
       index: number): IterableChangeRecord_<V> {
     // todo(vicb)
     // assert(record != prevRecord);
@@ -665,11 +666,11 @@ class _DuplicateItemRecordList<V> {
   }
 
   // Returns a IterableChangeRecord_ having IterableChangeRecord_.trackById == trackById and
-  // IterableChangeRecord_.currentIndex >= afterIndex
-  get(trackById: any, afterIndex: number|null): IterableChangeRecord_<V>|null {
+  // IterableChangeRecord_.currentIndex >= atOrAfterIndex
+  get(trackById: any, atOrAfterIndex: number|null): IterableChangeRecord_<V>|null {
     let record: IterableChangeRecord_<V>|null;
     for (record = this._head; record !== null; record = record._nextDup) {
-      if ((afterIndex === null || afterIndex < record.currentIndex) &&
+      if ((atOrAfterIndex === null || atOrAfterIndex <= record.currentIndex !) &&
           looseIdentical(record.trackById, trackById)) {
         return record;
       }
@@ -724,15 +725,15 @@ class _DuplicateMap<V> {
 
   /**
    * Retrieve the `value` using key. Because the IterableChangeRecord_ value may be one which we
-   * have already iterated over, we use the afterIndex to pretend it is not there.
+   * have already iterated over, we use the `atOrAfterIndex` to pretend it is not there.
    *
    * Use case: `[a, b, c, a, a]` if we are at index `3` which is the second `a` then asking if we
-   * have any more `a`s needs to return the last `a` not the first or second.
+   * have any more `a`s needs to return the second `a`.
    */
-  get(trackById: any, afterIndex: number|null): IterableChangeRecord_<V>|null {
+  get(trackById: any, atOrAfterIndex: number|null): IterableChangeRecord_<V>|null {
     const key = trackById;
     const recordList = this.map.get(key);
-    return recordList ? recordList.get(trackById, afterIndex) : null;
+    return recordList ? recordList.get(trackById, atOrAfterIndex) : null;
   }
 
   /**
diff --git a/packages/core/src/change_detection/differs/default_keyvalue_differ.ts b/packages/core/src/change_detection/differs/default_keyvalue_differ.ts
index fd3165c5dd..c2f3e630d7 100644
--- a/packages/core/src/change_detection/differs/default_keyvalue_differ.ts
+++ b/packages/core/src/change_detection/differs/default_keyvalue_differ.ts
@@ -120,9 +120,9 @@ export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyVal
       }
 
       this._removalsHead = insertBefore;
-      this._removalsTail = insertBefore;
 
-      for (let record = insertBefore; record !== null; record = record._nextRemoved) {
+      for (let record: KeyValueChangeRecord_<K, V>|null = insertBefore; record !== null;
+           record = record._nextRemoved) {
         if (record === this._mapHead) {
           this._mapHead = null;
         }
@@ -135,6 +135,10 @@ export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyVal
       }
     }
 
+    // Make sure tails have no next records from previous runs
+    if (this._changesTail) this._changesTail._nextChanged = null;
+    if (this._additionsTail) this._additionsTail._nextAdded = null;
+
     return this.isDirty;
   }
 
@@ -147,8 +151,8 @@ export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyVal
    * - The return value is the new value for the insertion pointer.
    */
   private _insertBeforeOrAppend(
-      before: KeyValueChangeRecord_<K, V>,
-      record: KeyValueChangeRecord_<K, V>): KeyValueChangeRecord_<K, V> {
+      before: KeyValueChangeRecord_<K, V>|null,
+      record: KeyValueChangeRecord_<K, V>): KeyValueChangeRecord_<K, V>|null {
     if (before) {
       const prev = before._prev;
       record._next = before;
@@ -178,7 +182,7 @@ export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyVal
 
   private _getOrCreateRecordForKey(key: K, value: V): KeyValueChangeRecord_<K, V> {
     if (this._records.has(key)) {
-      const record = this._records.get(key);
+      const record = this._records.get(key) !;
       this._maybeAddToChanges(record, value);
       const prev = record._prev;
       const next = record._next;
@@ -222,7 +226,7 @@ export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyVal
 
       this._changesHead = this._changesTail = null;
       this._additionsHead = this._additionsTail = null;
-      this._removalsHead = this._removalsTail = null;
+      this._removalsHead = null;
     }
   }
 
@@ -253,37 +257,6 @@ export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyVal
     }
   }
 
-  toString(): string {
-    const items: any[] = [];
-    const previous: any[] = [];
-    const changes: any[] = [];
-    const additions: any[] = [];
-    const removals: any[] = [];
-    let record: KeyValueChangeRecord_<K, V>|null;
-
-    for (record = this._mapHead; record !== null; record = record._next) {
-      items.push(stringify(record));
-    }
-    for (record = this._previousMapHead; record !== null; record = record._nextPrevious) {
-      previous.push(stringify(record));
-    }
-    for (record = this._changesHead; record !== null; record = record._nextChanged) {
-      changes.push(stringify(record));
-    }
-    for (record = this._additionsHead; record !== null; record = record._nextAdded) {
-      additions.push(stringify(record));
-    }
-    for (record = this._removalsHead; record !== null; record = record._nextRemoved) {
-      removals.push(stringify(record));
-    }
-
-    return 'map: ' + items.join(', ') + '\n' +
-        'previous: ' + previous.join(', ') + '\n' +
-        'additions: ' + additions.join(', ') + '\n' +
-        'changes: ' + changes.join(', ') + '\n' +
-        'removals: ' + removals.join(', ') + '\n';
-  }
-
   /** @internal */
   private _forEach<K, V>(obj: Map<K, V>|{[k: string]: V}, fn: (v: V, k: any) => void) {
     if (obj instanceof Map) {
@@ -316,11 +289,4 @@ class KeyValueChangeRecord_<K, V> implements KeyValueChangeRecord<K, V> {
   _nextChanged: KeyValueChangeRecord_<K, V>|null = null;
 
   constructor(public key: K) {}
-
-  toString(): string {
-    return looseIdentical(this.previousValue, this.currentValue) ?
-        stringify(this.key) :
-        (stringify(this.key) + '[' + stringify(this.previousValue) + '->' +
-         stringify(this.currentValue) + ']');
-  }
 }
diff --git a/packages/core/src/change_detection/differs/iterable_differs.ts b/packages/core/src/change_detection/differs/iterable_differs.ts
index 8d5b58a49a..72bad7296b 100644
--- a/packages/core/src/change_detection/differs/iterable_differs.ts
+++ b/packages/core/src/change_detection/differs/iterable_differs.ts
@@ -10,7 +10,7 @@ import {Optional, Provider, SkipSelf} from '../../di';
 import {ChangeDetectorRef} from '../change_detector_ref';
 
 /**
- * A type describing supported interable types.
+ * A type describing supported iterable types.
  *
  * @stable
  */
diff --git a/packages/core/src/codegen_private_exports.ts b/packages/core/src/codegen_private_exports.ts
index fadaed4122..bddc41e14d 100644
--- a/packages/core/src/codegen_private_exports.ts
+++ b/packages/core/src/codegen_private_exports.ts
@@ -7,7 +7,5 @@
  */
 
 export {CodegenComponentFactoryResolver as ɵCodegenComponentFactoryResolver} from './linker/component_factory_resolver';
-export {NgModuleInjector as ɵNgModuleInjector} from './linker/ng_module_factory';
 export {registerModuleFactory as ɵregisterModuleFactory} from './linker/ng_module_factory_loader';
-export {reflector as ɵreflector} from './reflection/reflection';
-export {ArgumentType as ɵArgumentType, BindingFlags as ɵBindingFlags, DepFlags as ɵDepFlags, EMPTY_ARRAY as ɵEMPTY_ARRAY, EMPTY_MAP as ɵEMPTY_MAP, NodeFlags as ɵNodeFlags, QueryBindingType as ɵQueryBindingType, QueryValueType as ɵQueryValueType, ViewDefinition as ɵViewDefinition, ViewFlags as ɵViewFlags, anchorDef as ɵand, createComponentFactory as ɵccf, createRendererType2 as ɵcrt, directiveDef as ɵdid, elementDef as ɵeld, elementEventFullName as ɵelementEventFullName, getComponentViewDefinitionFactory as ɵgetComponentViewDefinitionFactory, inlineInterpolate as ɵinlineInterpolate, interpolate as ɵinterpolate, ngContentDef as ɵncd, nodeValue as ɵnov, pipeDef as ɵpid, providerDef as ɵprd, pureArrayDef as ɵpad, pureObjectDef as ɵpod, purePipeDef as ɵppd, queryDef as ɵqud, textDef as ɵted, unwrapValue as ɵunv, viewDef as ɵvid} from './view/index';
+export {ArgumentType as ɵArgumentType, BindingFlags as ɵBindingFlags, DepFlags as ɵDepFlags, EMPTY_ARRAY as ɵEMPTY_ARRAY, EMPTY_MAP as ɵEMPTY_MAP, NodeFlags as ɵNodeFlags, QueryBindingType as ɵQueryBindingType, QueryValueType as ɵQueryValueType, ViewDefinition as ɵViewDefinition, ViewFlags as ɵViewFlags, anchorDef as ɵand, createComponentFactory as ɵccf, createNgModuleFactory as ɵcmf, createRendererType2 as ɵcrt, directiveDef as ɵdid, elementDef as ɵeld, elementEventFullName as ɵelementEventFullName, getComponentViewDefinitionFactory as ɵgetComponentViewDefinitionFactory, inlineInterpolate as ɵinlineInterpolate, interpolate as ɵinterpolate, moduleDef as ɵmod, moduleProvideDef as ɵmpd, ngContentDef as ɵncd, nodeValue as ɵnov, pipeDef as ɵpid, providerDef as ɵprd, pureArrayDef as ɵpad, pureObjectDef as ɵpod, purePipeDef as ɵppd, queryDef as ɵqud, textDef as ɵted, unwrapValue as ɵunv, viewDef as ɵvid} from './view/index';
diff --git a/packages/core/src/core_private_export.ts b/packages/core/src/core_private_export.ts
index cffbcfa770..c3c275dedb 100644
--- a/packages/core/src/core_private_export.ts
+++ b/packages/core/src/core_private_export.ts
@@ -15,15 +15,12 @@ export {Console as ɵConsole} from './console';
 export {ERROR_COMPONENT_TYPE as ɵERROR_COMPONENT_TYPE} from './errors';
 export {ComponentFactory as ɵComponentFactory} from './linker/component_factory';
 export {CodegenComponentFactoryResolver as ɵCodegenComponentFactoryResolver} from './linker/component_factory_resolver';
-export {LIFECYCLE_HOOKS_VALUES as ɵLIFECYCLE_HOOKS_VALUES, LifecycleHooks as ɵLifecycleHooks} from './metadata/lifecycle_hooks';
 export {ViewMetadata as ɵViewMetadata} from './metadata/view';
-export {Reflector as ɵReflector, reflector as ɵreflector} from './reflection/reflection';
-// We need to import this name separately from the above wildcard, because this symbol is exposed.
 export {ReflectionCapabilities as ɵReflectionCapabilities} from './reflection/reflection_capabilities';
-export {ReflectorReader as ɵReflectorReader} from './reflection/reflector_reader';
 export {GetterFn as ɵGetterFn, MethodFn as ɵMethodFn, SetterFn as ɵSetterFn} from './reflection/types';
 export {DirectRenderer as ɵDirectRenderer, RenderDebugInfo as ɵRenderDebugInfo} from './render/api';
 export {global as ɵglobal, looseIdentical as ɵlooseIdentical, stringify as ɵstringify} from './util';
 export {makeDecorator as ɵmakeDecorator} from './util/decorators';
 export {isObservable as ɵisObservable, isPromise as ɵisPromise} from './util/lang';
+export {clearProviderOverrides as ɵclearProviderOverrides, overrideProvider as ɵoverrideProvider} from './view/index';
 export {NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR} from './view/provider';
diff --git a/packages/core/src/di/injector.ts b/packages/core/src/di/injector.ts
index e9bfed142c..d640c81a08 100644
--- a/packages/core/src/di/injector.ts
+++ b/packages/core/src/di/injector.ts
@@ -50,7 +50,7 @@ export abstract class Injector {
   /**
    * Retrieves an instance from the injector based on the provided token.
    * If not found:
-   * - Throws {@link NoProviderError} if no `notFoundValue` that is not equal to
+   * - Throws an error if no `notFoundValue` that is not equal to
    * Injector.THROW_IF_NOT_FOUND is given
    * - Returns the `notFoundValue` otherwise
    */
diff --git a/packages/core/src/di/metadata.ts b/packages/core/src/di/metadata.ts
index 2a0cad479c..d367785252 100644
--- a/packages/core/src/di/metadata.ts
+++ b/packages/core/src/di/metadata.ts
@@ -58,7 +58,7 @@ export interface Inject { token: any; }
  * @stable
  * @Annotation
  */
-export const Inject: InjectDecorator = makeParamDecorator('Inject', [['token', undefined]]);
+export const Inject: InjectDecorator = makeParamDecorator('Inject', (token: any) => ({token}));
 
 
 /**
@@ -104,7 +104,7 @@ export interface Optional {}
  * @stable
  * @Annotation
  */
-export const Optional: OptionalDecorator = makeParamDecorator('Optional', []);
+export const Optional: OptionalDecorator = makeParamDecorator('Optional');
 
 /**
  * Type of the Injectable decorator / constructor function.
@@ -127,7 +127,7 @@ export interface InjectableDecorator {
    *
    * {@example core/di/ts/metadata_spec.ts region='Injectable'}
    *
-   * {@link Injector} will throw {@link NoAnnotationError} when trying to instantiate a class that
+   * {@link Injector} will throw an error when trying to instantiate a class that
    * does not have `@Injectable` marker, as shown in the example below.
    *
    * {@example core/di/ts/metadata_spec.ts region='InjectableThrows'}
@@ -151,7 +151,7 @@ export interface Injectable {}
  * @stable
  * @Annotation
  */
-export const Injectable: InjectableDecorator = <InjectableDecorator>makeDecorator('Injectable', []);
+export const Injectable: InjectableDecorator = makeDecorator('Injectable');
 
 /**
  * Type of the Self decorator / constructor function.
@@ -195,7 +195,7 @@ export interface Self {}
  * @stable
  * @Annotation
  */
-export const Self: SelfDecorator = makeParamDecorator('Self', []);
+export const Self: SelfDecorator = makeParamDecorator('Self');
 
 
 /**
@@ -240,7 +240,7 @@ export interface SkipSelf {}
  * @stable
  * @Annotation
  */
-export const SkipSelf: SkipSelfDecorator = makeParamDecorator('SkipSelf', []);
+export const SkipSelf: SkipSelfDecorator = makeParamDecorator('SkipSelf');
 
 /**
  * Type of the Host decorator / constructor function.
@@ -285,4 +285,4 @@ export interface Host {}
  * @stable
  * @Annotation
  */
-export const Host: HostDecorator = makeParamDecorator('Host', []);
+export const Host: HostDecorator = makeParamDecorator('Host');
diff --git a/packages/core/src/di/reflective_errors.ts b/packages/core/src/di/reflective_errors.ts
index 2360e84f24..4eaf4be951 100644
--- a/packages/core/src/di/reflective_errors.ts
+++ b/packages/core/src/di/reflective_errors.ts
@@ -39,20 +39,22 @@ function constructResolvingPath(keys: any[]): string {
 export interface InjectionError extends Error {
   keys: ReflectiveKey[];
   injectors: ReflectiveInjector[];
-  constructResolvingMessage: (this: InjectionError) => string;
+  constructResolvingMessage: (keys: ReflectiveKey[]) => string;
   addKey(injector: ReflectiveInjector, key: ReflectiveKey): void;
 }
 
 function injectionError(
     injector: ReflectiveInjector, key: ReflectiveKey,
-    constructResolvingMessage: (this: InjectionError) => string,
+    constructResolvingMessage: (keys: ReflectiveKey[]) => string,
     originalError?: Error): InjectionError {
-  const error = (originalError ? wrappedError('', originalError) : Error()) as InjectionError;
+  const keys = [key];
+  const errMsg = constructResolvingMessage(keys);
+  const error =
+      (originalError ? wrappedError(errMsg, originalError) : Error(errMsg)) as InjectionError;
   error.addKey = addKey;
-  error.keys = [key];
+  error.keys = keys;
   error.injectors = [injector];
   error.constructResolvingMessage = constructResolvingMessage;
-  error.message = error.constructResolvingMessage();
   (error as any)[ERROR_ORIGINAL_ERROR] = originalError;
   return error;
 }
@@ -60,7 +62,8 @@ function injectionError(
 function addKey(this: InjectionError, injector: ReflectiveInjector, key: ReflectiveKey): void {
   this.injectors.push(injector);
   this.keys.push(key);
-  this.message = this.constructResolvingMessage();
+  // Note: This updated message won't be reflected in the `.stack` property
+  this.message = this.constructResolvingMessage(this.keys);
 }
 
 /**
@@ -78,9 +81,9 @@ function addKey(this: InjectionError, injector: ReflectiveInjector, key: Reflect
  * ```
  */
 export function noProviderError(injector: ReflectiveInjector, key: ReflectiveKey): InjectionError {
-  return injectionError(injector, key, function(this: InjectionError) {
-    const first = stringify(this.keys[0].token);
-    return `No provider for ${first}!${constructResolvingPath(this.keys)}`;
+  return injectionError(injector, key, function(keys: ReflectiveKey[]) {
+    const first = stringify(keys[0].token);
+    return `No provider for ${first}!${constructResolvingPath(keys)}`;
   });
 }
 
@@ -102,8 +105,8 @@ export function noProviderError(injector: ReflectiveInjector, key: ReflectiveKey
  */
 export function cyclicDependencyError(
     injector: ReflectiveInjector, key: ReflectiveKey): InjectionError {
-  return injectionError(injector, key, function(this: InjectionError) {
-    return `Cannot instantiate cyclic dependency!${constructResolvingPath(this.keys)}`;
+  return injectionError(injector, key, function(keys: ReflectiveKey[]) {
+    return `Cannot instantiate cyclic dependency!${constructResolvingPath(keys)}`;
   });
 }
 
@@ -136,9 +139,9 @@ export function cyclicDependencyError(
 export function instantiationError(
     injector: ReflectiveInjector, originalException: any, originalStack: any,
     key: ReflectiveKey): InjectionError {
-  return injectionError(injector, key, function(this: InjectionError) {
-    const first = stringify(this.keys[0].token);
-    return `${getOriginalError(this).message}: Error during instantiation of ${first}!${constructResolvingPath(this.keys)}.`;
+  return injectionError(injector, key, function(keys: ReflectiveKey[]) {
+    const first = stringify(keys[0].token);
+    return `${originalException.message}: Error during instantiation of ${first}!${constructResolvingPath(keys)}.`;
   }, originalException);
 }
 
diff --git a/packages/core/src/di/reflective_injector.ts b/packages/core/src/di/reflective_injector.ts
index 1129d53f56..a0e939dddd 100644
--- a/packages/core/src/di/reflective_injector.ts
+++ b/packages/core/src/di/reflective_injector.ts
@@ -113,7 +113,7 @@ export abstract class ReflectiveInjector implements Injector {
    *
    * This function is slower than the corresponding `fromResolvedProviders`
    * because it needs to resolve the passed-in providers first.
-   * See {@link Injector#resolve} and {@link Injector#fromResolvedProviders}.
+   * See {@link ReflectiveInjector#resolve} and {@link ReflectiveInjector#fromResolvedProviders}.
    */
   static resolveAndCreate(providers: Provider[], parent?: Injector): ReflectiveInjector {
     const ResolvedReflectiveProviders = ReflectiveInjector.resolve(providers);
@@ -190,7 +190,7 @@ export abstract class ReflectiveInjector implements Injector {
    *
    * This function is slower than the corresponding `createChildFromResolved`
    * because it needs to resolve the passed-in providers first.
-   * See {@link Injector#resolve} and {@link Injector#createChildFromResolved}.
+   * See {@link ReflectiveInjector#resolve} and {@link ReflectiveInjector#createChildFromResolved}.
    */
   abstract resolveAndCreateChild(providers: Provider[]): ReflectiveInjector;
 
diff --git a/packages/core/src/di/reflective_provider.ts b/packages/core/src/di/reflective_provider.ts
index 96fd580112..1243d8c024 100644
--- a/packages/core/src/di/reflective_provider.ts
+++ b/packages/core/src/di/reflective_provider.ts
@@ -225,7 +225,7 @@ function _extractToken(
 
   if (!Array.isArray(metadata)) {
     if (metadata instanceof Inject) {
-      return _createDependency(metadata['token'], optional, null);
+      return _createDependency(metadata.token, optional, null);
     } else {
       return _createDependency(metadata, optional, null);
     }
@@ -240,7 +240,7 @@ function _extractToken(
       token = paramMetadata;
 
     } else if (paramMetadata instanceof Inject) {
-      token = paramMetadata['token'];
+      token = paramMetadata.token;
 
     } else if (paramMetadata instanceof Optional) {
       optional = true;
diff --git a/packages/core/src/event_emitter.ts b/packages/core/src/event_emitter.ts
index 5cdbc2a3a3..86d170d070 100644
--- a/packages/core/src/event_emitter.ts
+++ b/packages/core/src/event_emitter.ts
@@ -64,8 +64,11 @@ export class EventEmitter<T> extends Subject<T> {
   __isAsync: boolean;
 
   /**
-   * Creates an instance of [EventEmitter], which depending on [isAsync],
+   * Creates an instance of {@link EventEmitter}, which depending on `isAsync`,
    * delivers events synchronously or asynchronously.
+   *
+   * @param isAsync By default, events are delivered synchronously (default value: `false`).
+   * Set to `true` for asynchronous event delivery.
    */
   constructor(isAsync: boolean = false) {
     super();
diff --git a/packages/core/src/linker/compiler.ts b/packages/core/src/linker/compiler.ts
index 501a1101ba..28320877b8 100644
--- a/packages/core/src/linker/compiler.ts
+++ b/packages/core/src/linker/compiler.ts
@@ -54,14 +54,14 @@ export class Compiler {
   compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>> { throw _throwError(); }
 
   /**
-   * Same as {@link compileModuleSync} but also creates ComponentFactories for all components.
+   * Same as {@link #compileModuleSync} but also creates ComponentFactories for all components.
    */
   compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T> {
     throw _throwError();
   }
 
   /**
-   * Same as {@link compileModuleAsync} but also creates ComponentFactories for all components.
+   * Same as {@link #compileModuleAsync} but also creates ComponentFactories for all components.
    */
   compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
       Promise<ModuleWithComponentFactories<T>> {
diff --git a/packages/core/src/linker/component_factory_resolver.ts b/packages/core/src/linker/component_factory_resolver.ts
index 4edd31232b..32c3a8467c 100644
--- a/packages/core/src/linker/component_factory_resolver.ts
+++ b/packages/core/src/linker/component_factory_resolver.ts
@@ -54,8 +54,13 @@ export class CodegenComponentFactoryResolver implements ComponentFactoryResolver
   }
 
   resolveComponentFactory<T>(component: {new (...args: any[]): T}): ComponentFactory<T> {
-    let factory = this._factories.get(component) || this._parent.resolveComponentFactory(component);
-
+    let factory = this._factories.get(component);
+    if (!factory && this._parent) {
+      factory = this._parent.resolveComponentFactory(component);
+    }
+    if (!factory) {
+      throw noComponentFactoryError(component);
+    }
     return new ComponentFactoryBoundToModule(factory, this._ngModule);
   }
 }
diff --git a/packages/core/src/linker/ng_module_factory.ts b/packages/core/src/linker/ng_module_factory.ts
index 2b18e8068e..0e4925f806 100644
--- a/packages/core/src/linker/ng_module_factory.ts
+++ b/packages/core/src/linker/ng_module_factory.ts
@@ -6,12 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injector, THROW_IF_NOT_FOUND} from '../di/injector';
+import {Injector} from '../di/injector';
 import {Type} from '../type';
-import {stringify} from '../util';
 
-import {ComponentFactory} from './component_factory';
-import {CodegenComponentFactoryResolver, ComponentFactoryBoundToModule, ComponentFactoryResolver} from './component_factory_resolver';
+import {ComponentFactoryResolver} from './component_factory_resolver';
 
 
 /**
@@ -50,76 +48,16 @@ export abstract class NgModuleRef<T> {
   abstract onDestroy(callback: () => void): void;
 }
 
+export interface InternalNgModuleRef<T> extends NgModuleRef<T> {
+  // Note: we are using the prefix _ as NgModuleData is an NgModuleRef and therefore directly
+  // exposed to the user.
+  _bootstrapComponents: Type<any>[];
+}
+
 /**
  * @experimental
  */
-export class NgModuleFactory<T> {
-  constructor(
-      private _injectorClass: {new (parentInjector: Injector): NgModuleInjector<T>},
-      private _moduleType: Type<T>) {}
-
-  get moduleType(): Type<T> { return this._moduleType; }
-
-  create(parentInjector: Injector|null): NgModuleRef<T> {
-    const instance = new this._injectorClass(parentInjector || Injector.NULL);
-    instance.create();
-    return instance;
-  }
-}
-
-const _UNDEFINED = new Object();
-
-export abstract class NgModuleInjector<T> implements Injector, NgModuleRef<T> {
-  bootstrapFactories: ComponentFactory<any>[];
-  instance: T;
-
-  private _destroyListeners: (() => void)[] = [];
-  private _destroyed: boolean = false;
-  private _cmpFactoryResolver: CodegenComponentFactoryResolver;
-
-  constructor(
-      public parent: Injector, factories: ComponentFactory<any>[],
-      bootstrapFactories: ComponentFactory<any>[]) {
-    this.bootstrapFactories =
-        bootstrapFactories.map(f => new ComponentFactoryBoundToModule(f, this));
-    this._cmpFactoryResolver = new CodegenComponentFactoryResolver(
-        factories, parent.get(ComponentFactoryResolver, ComponentFactoryResolver.NULL), this);
-  }
-
-  create() { this.instance = this.createInternal(); }
-
-  abstract createInternal(): T;
-
-  get(token: any, notFoundValue: any = THROW_IF_NOT_FOUND): any {
-    if (token === Injector || token === NgModuleRef) {
-      return this;
-    }
-
-    if (token === ComponentFactoryResolver) {
-      return this._cmpFactoryResolver;
-    }
-
-    const result = this.getInternal(token, _UNDEFINED);
-    return result === _UNDEFINED ? this.parent.get(token, notFoundValue) : result;
-  }
-
-  abstract getInternal(token: any, notFoundValue: any): any;
-
-  get injector(): Injector { return this; }
-
-  get componentFactoryResolver(): ComponentFactoryResolver { return this._cmpFactoryResolver; }
-
-  destroy(): void {
-    if (this._destroyed) {
-      throw new Error(
-          `The ng module ${stringify(this.instance.constructor)} has already been destroyed.`);
-    }
-    this._destroyed = true;
-    this.destroyInternal();
-    this._destroyListeners.forEach((listener) => listener());
-  }
-
-  onDestroy(callback: () => void): void { this._destroyListeners.push(callback); }
-
-  abstract destroyInternal(): void;
+export abstract class NgModuleFactory<T> {
+  abstract get moduleType(): Type<T>;
+  abstract create(parentInjector: Injector|null): NgModuleRef<T>;
 }
diff --git a/packages/core/src/linker/query_list.ts b/packages/core/src/linker/query_list.ts
index 86020d462e..9abd01b6fe 100644
--- a/packages/core/src/linker/query_list.ts
+++ b/packages/core/src/linker/query_list.ts
@@ -16,7 +16,8 @@ import {getSymbolIterator} from '../util';
  * An unmodifiable list of items that Angular keeps up to date when the state
  * of the application changes.
  *
- * The type of object that {@link Query} and {@link ViewQueryMetadata} provide.
+ * The type of object that {@link ViewChildren}, {@link ContentChildren}, and {@link QueryList}
+ * provide.
  *
  * Implements an iterable interface, therefore it can be used in both ES6
  * javascript `for (var i of items)` loops as well as in Angular templates with
diff --git a/packages/core/src/linker/system_js_ng_module_factory_loader.ts b/packages/core/src/linker/system_js_ng_module_factory_loader.ts
index cf620bb6a8..d5540aca8b 100644
--- a/packages/core/src/linker/system_js_ng_module_factory_loader.ts
+++ b/packages/core/src/linker/system_js_ng_module_factory_loader.ts
@@ -16,6 +16,7 @@ import {NgModuleFactoryLoader} from './ng_module_factory_loader';
 const _SEPARATOR = '#';
 
 const FACTORY_CLASS_SUFFIX = 'NgFactory';
+declare var System: any;
 
 /**
  * Configuration for SystemJsNgModuleLoader.
diff --git a/packages/core/src/metadata/di.ts b/packages/core/src/metadata/di.ts
index 013d4568d1..5efabd0033 100644
--- a/packages/core/src/metadata/di.ts
+++ b/packages/core/src/metadata/di.ts
@@ -119,7 +119,7 @@ export interface Attribute { attributeName?: string; }
  * @Annotation
  */
 export const Attribute: AttributeDecorator =
-    makeParamDecorator('Attribute', [['attributeName', undefined]]);
+    makeParamDecorator('Attribute', (attributeName?: string) => ({attributeName}));
 
 /**
  * Type of the Query metadata.
@@ -183,11 +183,8 @@ export interface ContentChildrenDecorator {
    * @stable
    * @Annotation
    */
-  (selector: Type<any>|Function|string,
-   {descendants, read}?: {descendants?: boolean, read?: any}): any;
-  new (
-      selector: Type<any>|Function|string,
-      {descendants, read}?: {descendants?: boolean, read?: any}): Query;
+  (selector: Type<any>|Function|string, opts?: {descendants?: boolean, read?: any}): any;
+  new (selector: Type<any>|Function|string, opts?: {descendants?: boolean, read?: any}): Query;
 }
 
 /**
@@ -204,18 +201,11 @@ export type ContentChildren = Query;
  *  @stable
  *  @Annotation
  */
-export const ContentChildren: ContentChildrenDecorator =
-    <ContentChildrenDecorator>makePropDecorator(
-        'ContentChildren',
-        [
-          ['selector', undefined], {
-            first: false,
-            isViewQuery: false,
-            descendants: false,
-            read: undefined,
-          }
-        ],
-        Query);
+export const ContentChildren: ContentChildrenDecorator = makePropDecorator(
+    'ContentChildren',
+    (selector?: any, data: any = {}) =>
+        ({selector, first: false, isViewQuery: false, descendants: false, ...data}),
+    Query);
 
 /**
  * Type of the ContentChild decorator / constructor function.
@@ -253,8 +243,8 @@ export interface ContentChildDecorator {
    * @stable
    * @Annotation
    */
-  (selector: Type<any>|Function|string, {read}?: {read?: any}): any;
-  new (selector: Type<any>|Function|string, {read}?: {read?: any}): ContentChild;
+  (selector: Type<any>|Function|string, opts?: {read?: any}): any;
+  new (selector: Type<any>|Function|string, opts?: {read?: any}): ContentChild;
 }
 
 /**
@@ -273,21 +263,14 @@ export type ContentChild = Query;
  * @Annotation
  */
 export const ContentChild: ContentChildDecorator = makePropDecorator(
-    'ContentChild',
-    [
-      ['selector', undefined], {
-        first: true,
-        isViewQuery: false,
-        descendants: true,
-        read: undefined,
-      }
-    ],
+    'ContentChild', (selector?: any, data: any = {}) =>
+                        ({selector, first: true, isViewQuery: false, descendants: true, ...data}),
     Query);
 
 /**
  * Type of the ViewChildren decorator / constructor function.
  *
- * See {@ViewChildren}.
+ * See {@link ViewChildren}.
  *
  * @stable
  */
@@ -321,8 +304,8 @@ export interface ViewChildrenDecorator {
    * @stable
    * @Annotation
    */
-  (selector: Type<any>|Function|string, {read}?: {read?: any}): any;
-  new (selector: Type<any>|Function|string, {read}?: {read?: any}): ViewChildren;
+  (selector: Type<any>|Function|string, opts?: {read?: any}): any;
+  new (selector: Type<any>|Function|string, opts?: {read?: any}): ViewChildren;
 }
 
 /**
@@ -339,15 +322,8 @@ export type ViewChildren = Query;
  * @Annotation
  */
 export const ViewChildren: ViewChildrenDecorator = makePropDecorator(
-    'ViewChildren',
-    [
-      ['selector', undefined], {
-        first: false,
-        isViewQuery: true,
-        descendants: true,
-        read: undefined,
-      }
-    ],
+    'ViewChildren', (selector?: any, data: any = {}) =>
+                        ({selector, first: false, isViewQuery: true, descendants: true, ...data}),
     Query);
 
 /**
@@ -385,8 +361,8 @@ export interface ViewChildDecorator {
    * @stable
    * @Annotation
    */
-  (selector: Type<any>|Function|string, {read}?: {read?: any}): any;
-  new (selector: Type<any>|Function|string, {read}?: {read?: any}): ViewChild;
+  (selector: Type<any>|Function|string, opts?: {read?: any}): any;
+  new (selector: Type<any>|Function|string, opts?: {read?: any}): ViewChild;
 }
 
 /**
@@ -403,13 +379,6 @@ export type ViewChild = Query;
  * @Annotation
  */
 export const ViewChild: ViewChildDecorator = makePropDecorator(
-    'ViewChild',
-    [
-      ['selector', undefined], {
-        first: true,
-        isViewQuery: true,
-        descendants: true,
-        read: undefined,
-      }
-    ],
+    'ViewChild', (selector: any, data: any) =>
+                     ({selector, first: true, isViewQuery: true, descendants: true, ...data}),
     Query);
diff --git a/packages/core/src/metadata/directives.ts b/packages/core/src/metadata/directives.ts
index 6f3218e283..501f758e08 100644
--- a/packages/core/src/metadata/directives.ts
+++ b/packages/core/src/metadata/directives.ts
@@ -399,15 +399,8 @@ export interface Directive {
  * @stable
  * @Annotation
  */
-export const Directive: DirectiveDecorator = <DirectiveDecorator>makeDecorator('Directive', {
-  selector: undefined,
-  inputs: undefined,
-  outputs: undefined,
-  host: undefined,
-  providers: undefined,
-  exportAs: undefined,
-  queries: undefined
-});
+export const Directive: DirectiveDecorator =
+    makeDecorator('Directive', (dir: Directive = {}) => dir);
 
 /**
  * Type of the Component decorator / constructor function.
@@ -662,8 +655,8 @@ export interface Component extends Directive {
    *   encapsulation.
    *
    * When no `encapsulation` is defined for the component, the default value from the
-   * {@link CompilerConfig} is used. The default is `ViewEncapsulation.Emulated`}. Provide a new
-   * `CompilerConfig` to override this value.
+   * {@link CompilerOptions} is used. The default is `ViewEncapsulation.Emulated`}. Provide a new
+   * `CompilerOptions` to override this value.
    *
    * If the encapsulation is set to `ViewEncapsulation.Emulated` and the component has no `styles`
    * nor `styleUrls` the encapsulation will automatically be switched to `ViewEncapsulation.None`.
@@ -690,27 +683,8 @@ export interface Component extends Directive {
  * @stable
  * @Annotation
  */
-export const Component: ComponentDecorator = <ComponentDecorator>makeDecorator(
-    'Component', {
-      selector: undefined,
-      inputs: undefined,
-      outputs: undefined,
-      host: undefined,
-      exportAs: undefined,
-      moduleId: undefined,
-      providers: undefined,
-      viewProviders: undefined,
-      changeDetection: ChangeDetectionStrategy.Default,
-      queries: undefined,
-      templateUrl: undefined,
-      template: undefined,
-      styleUrls: undefined,
-      styles: undefined,
-      animations: undefined,
-      encapsulation: undefined,
-      interpolation: undefined,
-      entryComponents: undefined
-    },
+export const Component: ComponentDecorator = makeDecorator(
+    'Component', (c: Component = {}) => ({changeDetection: ChangeDetectionStrategy.Default, ...c}),
     Directive);
 
 /**
@@ -750,10 +724,7 @@ export interface Pipe {
  * @stable
  * @Annotation
  */
-export const Pipe: PipeDecorator = <PipeDecorator>makeDecorator('Pipe', {
-  name: undefined,
-  pure: true,
-});
+export const Pipe: PipeDecorator = makeDecorator('Pipe', (p: Pipe) => ({pure: true, ...p}));
 
 
 /**
@@ -825,7 +796,7 @@ export interface Input {
  * @Annotation
  */
 export const Input: InputDecorator =
-    makePropDecorator('Input', [['bindingPropertyName', undefined]]);
+    makePropDecorator('Input', (bindingPropertyName?: string) => ({bindingPropertyName}));
 
 /**
  * Type of the Output decorator / constructor function.
@@ -891,7 +862,7 @@ export interface Output { bindingPropertyName?: string; }
  * @Annotation
  */
 export const Output: OutputDecorator =
-    makePropDecorator('Output', [['bindingPropertyName', undefined]]);
+    makePropDecorator('Output', (bindingPropertyName?: string) => ({bindingPropertyName}));
 
 
 /**
@@ -951,7 +922,7 @@ export interface HostBinding { hostPropertyName?: string; }
  * @Annotation
  */
 export const HostBinding: HostBindingDecorator =
-    makePropDecorator('HostBinding', [['hostPropertyName', undefined]]);
+    makePropDecorator('HostBinding', (hostPropertyName?: string) => ({hostPropertyName}));
 
 
 /**
@@ -1013,4 +984,4 @@ export interface HostListener {
  * @Annotation
  */
 export const HostListener: HostListenerDecorator =
-    makePropDecorator('HostListener', [['eventName', undefined], ['args', []]]);
+    makePropDecorator('HostListener', (eventName?: string, args?: string[]) => ({eventName, args}));
diff --git a/packages/core/src/metadata/lifecycle_hooks.ts b/packages/core/src/metadata/lifecycle_hooks.ts
index 1b1d51c30d..6520bd5027 100644
--- a/packages/core/src/metadata/lifecycle_hooks.ts
+++ b/packages/core/src/metadata/lifecycle_hooks.ts
@@ -8,19 +8,6 @@
 
 import {SimpleChange} from '../change_detection/change_detection_util';
 
-/**
- * @stable
- */
-export enum LifecycleHooks {
-  OnInit,
-  OnDestroy,
-  DoCheck,
-  OnChanges,
-  AfterContentInit,
-  AfterContentChecked,
-  AfterViewInit,
-  AfterViewChecked
-}
 
 /**
  * A `changes` object whose keys are property names and
@@ -29,12 +16,6 @@ export enum LifecycleHooks {
  */
 export interface SimpleChanges { [propName: string]: SimpleChange; }
 
-export const LIFECYCLE_HOOKS_VALUES = [
-  LifecycleHooks.OnInit, LifecycleHooks.OnDestroy, LifecycleHooks.DoCheck, LifecycleHooks.OnChanges,
-  LifecycleHooks.AfterContentInit, LifecycleHooks.AfterContentChecked, LifecycleHooks.AfterViewInit,
-  LifecycleHooks.AfterViewChecked
-];
-
 /**
  * @whatItDoes Lifecycle hook that is called when any data-bound property of a directive changes.
  * @howToUse
diff --git a/packages/core/src/metadata/ng_module.ts b/packages/core/src/metadata/ng_module.ts
index 1cad93d0d8..c48376605e 100644
--- a/packages/core/src/metadata/ng_module.ts
+++ b/packages/core/src/metadata/ng_module.ts
@@ -190,13 +190,5 @@ export interface NgModule {
  * @stable
  * @Annotation
  */
-export const NgModule: NgModuleDecorator = <NgModuleDecorator>makeDecorator('NgModule', {
-  providers: undefined,
-  declarations: undefined,
-  imports: undefined,
-  exports: undefined,
-  entryComponents: undefined,
-  bootstrap: undefined,
-  schemas: undefined,
-  id: undefined,
-});
\ No newline at end of file
+export const NgModule: NgModuleDecorator =
+    makeDecorator('NgModule', (ngModule: NgModule) => ngModule);
diff --git a/packages/core/src/metadata/view.ts b/packages/core/src/metadata/view.ts
index edfb6ccf13..b0b8fa3ec5 100644
--- a/packages/core/src/metadata/view.ts
+++ b/packages/core/src/metadata/view.ts
@@ -9,14 +9,14 @@
 /**
  * Defines template and style encapsulation options available for Component's {@link Component}.
  *
- * See {@link ViewMetadata#encapsulation}.
+ * See {@link Component#encapsulation}.
  * @stable
  */
 export enum ViewEncapsulation {
   /**
    * Emulate `Native` scoping of styles by adding an attribute containing surrogate id to the Host
    * Element and pre-processing the style rules provided via
-   * {@link ViewMetadata#styles} or {@link ViewMetadata#stylesUrls}, and adding the new Host Element
+   * {@link Component#styles} or {@link Component#styleUrls}, and adding the new Host Element
    * attribute to all selectors.
    *
    * This is the default option.
@@ -61,37 +61,36 @@ export enum ViewEncapsulation {
  * {@link Component}
  */
 export class ViewMetadata {
-  /** {@link Component.templateUrl} */
+  /** {@link Component#templateUrl} */
   templateUrl: string|undefined;
-  /** {@link Component.template} */
+  /** {@link Component#template} */
   template: string|undefined;
-  /** {@link Component.stylesUrl} */
+  /** {@link Component#stylesUrl} */
   styleUrls: string[]|undefined;
-  /** {@link Component.styles} */
+  /** {@link Component#styles} */
   styles: string[]|undefined;
-  /** {@link Component.encapsulation} */
+  /** {@link Component#encapsulation} */
   encapsulation: ViewEncapsulation|undefined;
-  /** {@link Component.animation} */
+  /** {@link Component#animation} */
   animations: any[]|undefined;
-  /** {@link Component.interpolation} */
+  /** {@link Component#interpolation} */
   interpolation: [string, string]|undefined;
 
-  constructor(
-      {templateUrl, template, encapsulation, styles, styleUrls, animations, interpolation}: {
-        templateUrl?: string,
-        template?: string,
-        encapsulation?: ViewEncapsulation,
-        styles?: string[],
-        styleUrls?: string[],
-        animations?: any[],
-        interpolation?: [string, string]
-      } = {}) {
-    this.templateUrl = templateUrl;
-    this.template = template;
-    this.styleUrls = styleUrls;
-    this.styles = styles;
-    this.encapsulation = encapsulation;
-    this.animations = animations;
-    this.interpolation = interpolation;
+  constructor(opts: {
+    templateUrl?: string,
+    template?: string,
+    encapsulation?: ViewEncapsulation,
+    styles?: string[],
+    styleUrls?: string[],
+    animations?: any[],
+    interpolation?: [string, string]
+  } = {}) {
+    this.templateUrl = opts.templateUrl;
+    this.template = opts.template;
+    this.styleUrls = opts.styleUrls;
+    this.styles = opts.styles;
+    this.encapsulation = opts.encapsulation;
+    this.animations = opts.animations;
+    this.interpolation = opts.interpolation;
   }
 }
diff --git a/packages/core/src/platform_core_providers.ts b/packages/core/src/platform_core_providers.ts
index 0a8f8f0ee3..7b7cd5f693 100644
--- a/packages/core/src/platform_core_providers.ts
+++ b/packages/core/src/platform_core_providers.ts
@@ -11,7 +11,6 @@ import {PLATFORM_ID} from './application_tokens';
 import {Console} from './console';
 import {Provider} from './di';
 import {Reflector, reflector} from './reflection/reflection';
-import {ReflectorReader} from './reflection/reflector_reader';
 import {TestabilityRegistry} from './testability/testability';
 
 function _reflector(): Reflector {
@@ -24,7 +23,6 @@ const _CORE_PLATFORM_PROVIDERS: Provider[] = [
   PlatformRef_,
   {provide: PlatformRef, useExisting: PlatformRef_},
   {provide: Reflector, useFactory: _reflector, deps: []},
-  {provide: ReflectorReader, useExisting: Reflector},
   TestabilityRegistry,
   Console,
 ];
diff --git a/packages/core/src/reflection/platform_reflection_capabilities.ts b/packages/core/src/reflection/platform_reflection_capabilities.ts
index d73eb35dac..22fa0cd656 100644
--- a/packages/core/src/reflection/platform_reflection_capabilities.ts
+++ b/packages/core/src/reflection/platform_reflection_capabilities.ts
@@ -21,6 +21,6 @@ export interface PlatformReflectionCapabilities {
   method(name: string): MethodFn;
   importUri(type: Type<any>): string;
   resourceUri(type: Type<any>): string;
-  resolveIdentifier(name: string, moduleUrl: string, members: string[]|null, runtime: any): any;
+  resolveIdentifier(name: string, moduleUrl: string, members: string[], runtime: any): any;
   resolveEnum(enumIdentifier: any, name: string): any;
 }
diff --git a/packages/core/src/reflection/reflector.ts b/packages/core/src/reflection/reflector.ts
index bf5130749b..8115a14e33 100644
--- a/packages/core/src/reflection/reflector.ts
+++ b/packages/core/src/reflection/reflector.ts
@@ -8,7 +8,6 @@
 
 import {Type} from '../type';
 import {PlatformReflectionCapabilities} from './platform_reflection_capabilities';
-import {ReflectorReader} from './reflector_reader';
 import {GetterFn, MethodFn, SetterFn} from './types';
 
 export {PlatformReflectionCapabilities} from './platform_reflection_capabilities';
@@ -18,8 +17,8 @@ export {GetterFn, MethodFn, SetterFn} from './types';
  * Provides access to reflection data about symbols. Used internally by Angular
  * to power dependency injection and compilation.
  */
-export class Reflector extends ReflectorReader {
-  constructor(public reflectionCapabilities: PlatformReflectionCapabilities) { super(); }
+export class Reflector {
+  constructor(public reflectionCapabilities: PlatformReflectionCapabilities) {}
 
   updateCapabilities(caps: PlatformReflectionCapabilities) { this.reflectionCapabilities = caps; }
 
@@ -51,7 +50,7 @@ export class Reflector extends ReflectorReader {
 
   resourceUri(type: any): string { return this.reflectionCapabilities.resourceUri(type); }
 
-  resolveIdentifier(name: string, moduleUrl: string, members: string[]|null, runtime: any): any {
+  resolveIdentifier(name: string, moduleUrl: string, members: string[], runtime: any): any {
     return this.reflectionCapabilities.resolveIdentifier(name, moduleUrl, members, runtime);
   }
 
diff --git a/packages/core/src/reflection/reflector_reader.ts b/packages/core/src/reflection/reflector_reader.ts
deleted file mode 100644
index 58ab58f29a..0000000000
--- a/packages/core/src/reflection/reflector_reader.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-/**
- * Provides read-only access to reflection data about symbols. Used internally by Angular
- * to power dependency injection and compilation.
- */
-export abstract class ReflectorReader {
-  abstract parameters(typeOrFunc: /*Type*/ any): any[][];
-  abstract annotations(typeOrFunc: /*Type*/ any): any[];
-  abstract propMetadata(typeOrFunc: /*Type*/ any): {[key: string]: any[]};
-  abstract importUri(typeOrFunc: /*Type*/ any): string|null;
-  abstract resourceUri(typeOrFunc: /*Type*/ any): string;
-  abstract resolveIdentifier(name: string, moduleUrl: string, members: string[], runtime: any): any;
-  abstract resolveEnum(identifier: any, name: string): any;
-}
diff --git a/packages/core/src/render/api.ts b/packages/core/src/render/api.ts
index f0f02e9e65..a741f5224e 100644
--- a/packages/core/src/render/api.ts
+++ b/packages/core/src/render/api.ts
@@ -99,7 +99,8 @@ export const Renderer2Interceptor = new InjectionToken<Renderer2[]>('Renderer2In
  *
  * Use this service to bypass Angular's templating and make custom UI changes that can't be
  * expressed declaratively. For example if you need to set a property or an attribute whose name is
- * not statically known, use {@link #setElementProperty} or {@link #setElementAttribute}
+ * not statically known, use {@link Renderer#setElementProperty} or {@link
+ * Renderer#setElementAttribute}
  * respectively.
  *
  * If you are implementing a custom renderer, you must implement this interface.
@@ -127,6 +128,9 @@ export interface RendererType2 {
  */
 export abstract class RendererFactory2 {
   abstract createRenderer(hostElement: any, type: RendererType2|null): Renderer2;
+  abstract begin?(): void;
+  abstract end?(): void;
+  abstract whenRenderingDone?(): Promise<any>;
 }
 
 /**
diff --git a/packages/core/src/security.ts b/packages/core/src/security.ts
index ca803318d7..54f1844780 100644
--- a/packages/core/src/security.ts
+++ b/packages/core/src/security.ts
@@ -30,5 +30,5 @@ export enum SecurityContext {
  * @stable
  */
 export abstract class Sanitizer {
-  abstract sanitize(context: SecurityContext, value: string): string;
+  abstract sanitize(context: SecurityContext, value: {}|string|null): string|null;
 }
diff --git a/packages/core/src/testability/testability.externs.js b/packages/core/src/testability/testability.externs.js
new file mode 100644
index 0000000000..5db059634d
--- /dev/null
+++ b/packages/core/src/testability/testability.externs.js
@@ -0,0 +1,23 @@
+/** @externs */
+
+/** @record @struct */
+function PublicTestability() {}
+
+/**
+ * @return {?}
+ */
+PublicTestability.prototype.isStable = function() {};
+
+/**
+ * @param {?} callback
+ * @return {?}
+ */
+PublicTestability.prototype.whenStable = function(callback) {};
+
+/**
+ * @param {?} using
+ * @param {?} provider
+ * @param {?} exactMatch
+ * @return {?}
+ */
+PublicTestability.prototype.findProviders = function(using, provider, exactMatch) {};
\ No newline at end of file
diff --git a/packages/core/src/util.ts b/packages/core/src/util.ts
index 800f571091..3e256b4797 100644
--- a/packages/core/src/util.ts
+++ b/packages/core/src/util.ts
@@ -6,6 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+// Import zero symbols from zone.js. This causes the zone ambient type to be
+// added to the type-checker, without emitting any runtime module load statement
+import {} from 'zone.js';
+
 // TODO(jteplitz602): Load WorkerGlobalScope from lib.webworker.d.ts file #3492
 declare var WorkerGlobalScope: any /** TODO #9100 */;
 // CommonJS / Node have global context exposed as "global" variable.
diff --git a/packages/core/src/util/decorators.ts b/packages/core/src/util/decorators.ts
index e8a218605e..1acf99b60b 100644
--- a/packages/core/src/util/decorators.ts
+++ b/packages/core/src/util/decorators.ts
@@ -262,9 +262,10 @@ export function Class(clsDef: ClassDefinition): Type<any> {
  * @suppress {globalThis}
  */
 export function makeDecorator(
-    name: string, props: {[name: string]: any}, parentClass?: any,
-    chainFn?: (fn: Function) => void): (...args: any[]) => (cls: any) => any {
-  const metaCtor = makeMetadataCtor([props]);
+    name: string, props?: (...args: any[]) => any, parentClass?: any,
+    chainFn?: (fn: Function) => void):
+    {new (...args: any[]): any; (...args: any[]): any; (...args: any[]): (cls: any) => any;} {
+  const metaCtor = makeMetadataCtor(props);
 
   function DecoratorFactory(objOrType: any): (cls: any) => any {
     if (!(Reflect && Reflect.getOwnMetadata)) {
@@ -298,28 +299,22 @@ export function makeDecorator(
 
   DecoratorFactory.prototype.toString = () => `@${name}`;
   (<any>DecoratorFactory).annotationCls = DecoratorFactory;
-  return DecoratorFactory;
+  return DecoratorFactory as any;
 }
 
-function makeMetadataCtor(props: ([string, any] | {[key: string]: any})[]): any {
+function makeMetadataCtor(props?: (...args: any[]) => any): any {
   return function ctor(...args: any[]) {
-    props.forEach((prop, i) => {
-      const argVal = args[i];
-      if (Array.isArray(prop)) {
-        // plain parameter
-        this[prop[0]] = argVal === undefined ? prop[1] : argVal;
-      } else {
-        for (const propName in prop) {
-          this[propName] =
-              argVal && argVal.hasOwnProperty(propName) ? argVal[propName] : prop[propName];
-        }
+    if (props) {
+      const values = props(...args);
+      for (const propName in values) {
+        this[propName] = values[propName];
       }
-    });
+    }
   };
 }
 
 export function makeParamDecorator(
-    name: string, props: ([string, any] | {[name: string]: any})[], parentClass?: any): any {
+    name: string, props?: (...args: any[]) => any, parentClass?: any): any {
   const metaCtor = makeMetadataCtor(props);
   function ParamDecoratorFactory(...args: any[]): any {
     if (this instanceof ParamDecoratorFactory) {
@@ -356,7 +351,7 @@ export function makeParamDecorator(
 }
 
 export function makePropDecorator(
-    name: string, props: ([string, any] | {[key: string]: any})[], parentClass?: any): any {
+    name: string, props?: (...args: any[]) => any, parentClass?: any): any {
   const metaCtor = makeMetadataCtor(props);
 
   function PropDecoratorFactory(...args: any[]): any {
diff --git a/packages/core/src/view/element.ts b/packages/core/src/view/element.ts
index ca0d585fa4..ecc7c59181 100644
--- a/packages/core/src/view/element.ts
+++ b/packages/core/src/view/element.ts
@@ -10,7 +10,7 @@ import {RendererType2} from '../render/api';
 import {SecurityContext} from '../security';
 
 import {BindingDef, BindingFlags, ElementData, ElementHandleEventFn, NodeDef, NodeFlags, OutputDef, OutputType, QueryValueType, ViewData, ViewDefinitionFactory, asElementData} from './types';
-import {NOOP, calcBindingFlags, checkAndUpdateBinding, dispatchEvent, elementEventFullName, getParentRenderElement, resolveRendererType2, resolveViewDefinition, splitMatchedQueriesDsl, splitNamespace} from './util';
+import {NOOP, calcBindingFlags, checkAndUpdateBinding, dispatchEvent, elementEventFullName, getParentRenderElement, resolveDefinition, resolveRendererType2, splitMatchedQueriesDsl, splitNamespace} from './util';
 
 export function anchorDef(
     flags: NodeFlags, matchedQueriesDsl: [string | number, QueryValueType][],
@@ -18,7 +18,7 @@ export function anchorDef(
     templateFactory?: ViewDefinitionFactory): NodeDef {
   flags |= NodeFlags.TypeElement;
   const {matchedQueries, references, matchedQueryIds} = splitMatchedQueriesDsl(matchedQueriesDsl);
-  const template = templateFactory ? resolveViewDefinition(templateFactory) : null;
+  const template = templateFactory ? resolveDefinition(templateFactory) : null;
 
   return {
     // will bet set by the view definition
@@ -273,7 +273,8 @@ function setElementClass(view: ViewData, renderNode: any, name: string, value: b
 
 function setElementStyle(
     view: ViewData, binding: BindingDef, renderNode: any, name: string, value: any) {
-  let renderValue: string|null = view.root.sanitizer.sanitize(SecurityContext.STYLE, value);
+  let renderValue: string|null =
+      view.root.sanitizer.sanitize(SecurityContext.STYLE, value as{} | string);
   if (renderValue != null) {
     renderValue = renderValue.toString();
     const unit = binding.suffix;
diff --git a/packages/core/src/view/entrypoint.ts b/packages/core/src/view/entrypoint.ts
new file mode 100644
index 0000000000..f0355dba4e
--- /dev/null
+++ b/packages/core/src/view/entrypoint.ts
@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injector} from '../di/injector';
+import {NgModuleFactory, NgModuleRef} from '../linker/ng_module_factory';
+import {Type} from '../type';
+
+import {initServicesIfNeeded} from './services';
+import {NgModuleDefinitionFactory, ProviderOverride, Services} from './types';
+import {resolveDefinition} from './util';
+
+export function overrideProvider(override: ProviderOverride) {
+  initServicesIfNeeded();
+  return Services.overrideProvider(override);
+}
+
+export function clearProviderOverrides() {
+  initServicesIfNeeded();
+  return Services.clearProviderOverrides();
+}
+
+// Attention: this function is called as top level function.
+// Putting any logic in here will destroy closure tree shaking!
+export function createNgModuleFactory(
+    ngModuleType: Type<any>, bootstrapComponents: Type<any>[],
+    defFactory: NgModuleDefinitionFactory): NgModuleFactory<any> {
+  return new NgModuleFactory_(ngModuleType, bootstrapComponents, defFactory);
+}
+
+class NgModuleFactory_ extends NgModuleFactory<any> {
+  constructor(
+      public readonly moduleType: Type<any>, private _bootstrapComponents: Type<any>[],
+      private _ngModuleDefFactory: NgModuleDefinitionFactory) {
+    // Attention: this ctor is called as top level function.
+    // Putting any logic in here will destroy closure tree shaking!
+    super();
+  }
+
+  create(parentInjector: Injector|null): NgModuleRef<any> {
+    initServicesIfNeeded();
+    const def = resolveDefinition(this._ngModuleDefFactory);
+    return Services.createNgModuleRef(
+        this.moduleType, parentInjector || Injector.NULL, this._bootstrapComponents, def);
+  }
+}
diff --git a/packages/core/src/view/index.ts b/packages/core/src/view/index.ts
index 0b647b3ec9..4275d4490a 100644
--- a/packages/core/src/view/index.ts
+++ b/packages/core/src/view/index.ts
@@ -7,14 +7,16 @@
  */
 
 export {anchorDef, elementDef} from './element';
+export {clearProviderOverrides, createNgModuleFactory, overrideProvider} from './entrypoint';
 export {ngContentDef} from './ng_content';
+export {moduleDef, moduleProvideDef} from './ng_module';
 export {directiveDef, pipeDef, providerDef} from './provider';
 export {pureArrayDef, pureObjectDef, purePipeDef} from './pure_expression';
 export {queryDef} from './query';
 export {ViewRef_, createComponentFactory, getComponentViewDefinitionFactory, nodeValue} from './refs';
 export {initServicesIfNeeded} from './services';
 export {textDef} from './text';
-export {EMPTY_ARRAY, EMPTY_MAP, createRendererType2, elementEventFullName, inlineInterpolate, interpolate, rootRenderNodes, unwrapValue} from './util';
+export {EMPTY_ARRAY, EMPTY_MAP, createRendererType2, elementEventFullName, inlineInterpolate, interpolate, rootRenderNodes, tokenKey, unwrapValue} from './util';
 export {viewDef} from './view';
 export {attachEmbeddedView, detachEmbeddedView, moveEmbeddedView} from './view_attach';
 
diff --git a/packages/core/src/view/ng_module.ts b/packages/core/src/view/ng_module.ts
new file mode 100644
index 0000000000..c7c464aa34
--- /dev/null
+++ b/packages/core/src/view/ng_module.ts
@@ -0,0 +1,174 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injector, THROW_IF_NOT_FOUND} from '../di/injector';
+import {NgModuleRef} from '../linker/ng_module_factory';
+
+import {DepDef, DepFlags, NgModuleData, NgModuleDefinition, NgModuleDefinitionFactory, NgModuleProviderDef, NodeFlags} from './types';
+import {splitDepsDsl, tokenKey} from './util';
+
+const NOT_CREATED = new Object();
+
+const InjectorRefTokenKey = tokenKey(Injector);
+const NgModuleRefTokenKey = tokenKey(NgModuleRef);
+
+export function moduleProvideDef(
+    flags: NodeFlags, token: any, value: any,
+    deps: ([DepFlags, any] | any)[]): NgModuleProviderDef {
+  const depDefs = splitDepsDsl(deps);
+  return {
+    // will bet set by the module definition
+    index: -1,
+    deps: depDefs, flags, token, value
+  };
+}
+
+export function moduleDef(providers: NgModuleProviderDef[]): NgModuleDefinition {
+  const providersByKey: {[key: string]: NgModuleProviderDef} = {};
+  for (let i = 0; i < providers.length; i++) {
+    const provider = providers[i];
+    provider.index = i;
+    providersByKey[tokenKey(provider.token)] = provider;
+  }
+  return {
+    // Will be filled later...
+    factory: null,
+    providersByKey,
+    providers
+  };
+}
+
+export function initNgModule(data: NgModuleData) {
+  const def = data._def;
+  const providers = data._providers = new Array(def.providers.length);
+  for (let i = 0; i < def.providers.length; i++) {
+    const provDef = def.providers[i];
+    providers[i] = provDef.flags & NodeFlags.LazyProvider ? NOT_CREATED :
+                                                            _createProviderInstance(data, provDef);
+  }
+}
+
+export function resolveNgModuleDep(
+    data: NgModuleData, depDef: DepDef, notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
+  if (depDef.flags & DepFlags.Value) {
+    return depDef.token;
+  }
+  if (depDef.flags & DepFlags.Optional) {
+    notFoundValue = null;
+  }
+  if (depDef.flags & DepFlags.SkipSelf) {
+    return data._parent.get(depDef.token, notFoundValue);
+  }
+  const tokenKey = depDef.tokenKey;
+  switch (tokenKey) {
+    case InjectorRefTokenKey:
+    case NgModuleRefTokenKey:
+      return data;
+  }
+  const providerDef = data._def.providersByKey[tokenKey];
+  if (providerDef) {
+    let providerInstance = data._providers[providerDef.index];
+    if (providerInstance === NOT_CREATED) {
+      providerInstance = data._providers[providerDef.index] =
+          _createProviderInstance(data, providerDef);
+    }
+    return providerInstance;
+  }
+  return data._parent.get(depDef.token, notFoundValue);
+}
+
+
+function _createProviderInstance(ngModule: NgModuleData, providerDef: NgModuleProviderDef): any {
+  let injectable: any;
+  switch (providerDef.flags & NodeFlags.Types) {
+    case NodeFlags.TypeClassProvider:
+      injectable = _createClass(ngModule, providerDef.value, providerDef.deps);
+      break;
+    case NodeFlags.TypeFactoryProvider:
+      injectable = _callFactory(ngModule, providerDef.value, providerDef.deps);
+      break;
+    case NodeFlags.TypeUseExistingProvider:
+      injectable = resolveNgModuleDep(ngModule, providerDef.deps[0]);
+      break;
+    case NodeFlags.TypeValueProvider:
+      injectable = providerDef.value;
+      break;
+  }
+  return injectable;
+}
+
+function _createClass(ngModule: NgModuleData, ctor: any, deps: DepDef[]): any {
+  const len = deps.length;
+  let injectable: any;
+  switch (len) {
+    case 0:
+      injectable = new ctor();
+      break;
+    case 1:
+      injectable = new ctor(resolveNgModuleDep(ngModule, deps[0]));
+      break;
+    case 2:
+      injectable =
+          new ctor(resolveNgModuleDep(ngModule, deps[0]), resolveNgModuleDep(ngModule, deps[1]));
+      break;
+    case 3:
+      injectable = new ctor(
+          resolveNgModuleDep(ngModule, deps[0]), resolveNgModuleDep(ngModule, deps[1]),
+          resolveNgModuleDep(ngModule, deps[2]));
+      break;
+    default:
+      const depValues = new Array(len);
+      for (let i = 0; i < len; i++) {
+        depValues[i] = resolveNgModuleDep(ngModule, deps[i]);
+      }
+      injectable = new ctor(...depValues);
+  }
+  return injectable;
+}
+
+function _callFactory(ngModule: NgModuleData, factory: any, deps: DepDef[]): any {
+  const len = deps.length;
+  let injectable: any;
+  switch (len) {
+    case 0:
+      injectable = factory();
+      break;
+    case 1:
+      injectable = factory(resolveNgModuleDep(ngModule, deps[0]));
+      break;
+    case 2:
+      injectable =
+          factory(resolveNgModuleDep(ngModule, deps[0]), resolveNgModuleDep(ngModule, deps[1]));
+      break;
+    case 3:
+      injectable = factory(
+          resolveNgModuleDep(ngModule, deps[0]), resolveNgModuleDep(ngModule, deps[1]),
+          resolveNgModuleDep(ngModule, deps[2]));
+      break;
+    default:
+      const depValues = Array(len);
+      for (let i = 0; i < len; i++) {
+        depValues[i] = resolveNgModuleDep(ngModule, deps[i]);
+      }
+      injectable = factory(...depValues);
+  }
+  return injectable;
+}
+
+export function callNgModuleLifecycle(ngModule: NgModuleData, lifecycles: NodeFlags) {
+  const def = ngModule._def;
+  for (let i = 0; i < def.providers.length; i++) {
+    const provDef = def.providers[i];
+    if (provDef.flags & NodeFlags.OnDestroy) {
+      const instance = ngModule._providers[i];
+      if (instance && instance !== NOT_CREATED) {
+        instance.ngOnDestroy();
+      }
+    }
+  }
+}
diff --git a/packages/core/src/view/provider.ts b/packages/core/src/view/provider.ts
index 831d76a498..798d599d79 100644
--- a/packages/core/src/view/provider.ts
+++ b/packages/core/src/view/provider.ts
@@ -15,7 +15,7 @@ import {Renderer as RendererV1, Renderer2} from '../render/api';
 
 import {createChangeDetectorRef, createInjector, createRendererV1} from './refs';
 import {BindingDef, BindingFlags, DepDef, DepFlags, NodeDef, NodeFlags, OutputDef, OutputType, ProviderData, QueryValueType, Services, ViewData, ViewFlags, ViewState, asElementData, asProviderData} from './types';
-import {calcBindingFlags, checkBinding, dispatchEvent, isComponentView, splitMatchedQueriesDsl, tokenKey, viewParentEl} from './util';
+import {calcBindingFlags, checkBinding, dispatchEvent, isComponentView, splitDepsDsl, splitMatchedQueriesDsl, tokenKey, viewParentEl} from './util';
 
 const RendererV1TokenKey = tokenKey(RendererV1);
 const Renderer2TokenKey = tokenKey(Renderer2);
@@ -78,17 +78,7 @@ export function _def(
     bindings = [];
   }
 
-  const depDefs: DepDef[] = deps.map(value => {
-    let token: any;
-    let flags: DepFlags;
-    if (Array.isArray(value)) {
-      [flags, token] = value;
-    } else {
-      flags = DepFlags.None;
-      token = value;
-    }
-    return {flags, token, tokenKey: tokenKey(token)};
-  });
+  const depDefs = splitDepsDsl(deps);
 
   return {
     // will bet set by the view definition
@@ -105,7 +95,7 @@ export function _def(
     ngContentIndex: -1, childCount, bindings,
     bindingFlags: calcBindingFlags(bindings), outputs,
     element: null,
-    provider: {token, tokenKey: tokenKey(token), value, deps: depDefs},
+    provider: {token, value, deps: depDefs},
     text: null,
     query: null,
     ngContent: null
@@ -355,6 +345,12 @@ export function resolveDep(
   }
   const tokenKey = depDef.tokenKey;
 
+  if (tokenKey === ChangeDetectorRefTokenKey) {
+    // directives on the same element as a component should be able to control the change detector
+    // of that component as well.
+    allowPrivateServices = !!(elDef && elDef.element !.componentView);
+  }
+
   if (elDef && (depDef.flags & DepFlags.SkipSelf)) {
     allowPrivateServices = false;
     elDef = elDef.parent !;
diff --git a/packages/core/src/view/pure_expression.ts b/packages/core/src/view/pure_expression.ts
index 697f3a6bcc..d8ab3c87f3 100644
--- a/packages/core/src/view/pure_expression.ts
+++ b/packages/core/src/view/pure_expression.ts
@@ -18,7 +18,16 @@ export function pureArrayDef(argCount: number): NodeDef {
   return _pureExpressionDef(NodeFlags.TypePureArray, new Array(argCount));
 }
 
-export function pureObjectDef(propertyNames: string[]): NodeDef {
+export function pureObjectDef(propToIndex: {[p: string]: number}): NodeDef {
+  const keys = Object.keys(propToIndex);
+  const nbKeys = keys.length;
+  const propertyNames = new Array(nbKeys);
+  for (let i = 0; i < nbKeys; i++) {
+    const key = keys[i];
+    const index = propToIndex[key];
+    propertyNames[index] = key;
+  }
+
   return _pureExpressionDef(NodeFlags.TypePureObject, propertyNames);
 }
 
diff --git a/packages/core/src/view/refs.ts b/packages/core/src/view/refs.ts
index 54127c8e64..2318ca6f45 100644
--- a/packages/core/src/view/refs.ts
+++ b/packages/core/src/view/refs.ts
@@ -8,20 +8,22 @@
 
 import {ApplicationRef} from '../application_ref';
 import {ChangeDetectorRef} from '../change_detection/change_detection';
-import {Injector} from '../di';
+import {Injector} from '../di/injector';
 import {ComponentFactory, ComponentRef} from '../linker/component_factory';
-import {ComponentFactoryBoundToModule} from '../linker/component_factory_resolver';
+import {ComponentFactoryBoundToModule, ComponentFactoryResolver} from '../linker/component_factory_resolver';
 import {ElementRef} from '../linker/element_ref';
-import {NgModuleRef} from '../linker/ng_module_factory';
+import {InternalNgModuleRef, NgModuleRef} from '../linker/ng_module_factory';
 import {TemplateRef} from '../linker/template_ref';
 import {ViewContainerRef} from '../linker/view_container_ref';
 import {EmbeddedViewRef, InternalViewRef, ViewRef} from '../linker/view_ref';
 import {Renderer as RendererV1, Renderer2} from '../render/api';
 import {Type} from '../type';
+import {stringify} from '../util';
 import {VERSION} from '../version';
 
-import {DepFlags, ElementData, NodeDef, NodeFlags, Services, TemplateData, ViewContainerData, ViewData, ViewDefinitionFactory, ViewState, asElementData, asProviderData, asTextData} from './types';
-import {markParentViewsForCheck, resolveViewDefinition, rootRenderNodes, splitNamespace, tokenKey, viewParentEl} from './util';
+import {callNgModuleLifecycle, initNgModule, resolveNgModuleDep} from './ng_module';
+import {DepFlags, ElementData, NgModuleData, NgModuleDefinition, NodeDef, NodeFlags, Services, TemplateData, ViewContainerData, ViewData, ViewDefinitionFactory, ViewState, asElementData, asProviderData, asTextData} from './types';
+import {markParentViewsForCheck, resolveDefinition, rootRenderNodes, splitNamespace, tokenKey, viewParentEl} from './util';
 import {attachEmbeddedView, detachEmbeddedView, moveEmbeddedView, renderDetachView} from './view_attach';
 
 const EMPTY_CONTEXT = new Object();
@@ -85,12 +87,14 @@ class ComponentFactory_ extends ComponentFactory<any> {
     if (!ngModule) {
       throw new Error('ngModule should be provided');
     }
-    const viewDef = resolveViewDefinition(this.viewDefFactory);
+    const viewDef = resolveDefinition(this.viewDefFactory);
     const componentNodeIndex = viewDef.nodes[0].element !.componentProvider !.index;
     const view = Services.createRootView(
         injector, projectableNodes || [], rootSelectorOrNode, viewDef, ngModule, EMPTY_CONTEXT);
     const component = asProviderData(view, componentNodeIndex).instance;
-    view.renderer.setAttribute(asElementData(view, 0).renderElement, 'ng-version', VERSION.full);
+    if (rootSelectorOrNode) {
+      view.renderer.setAttribute(asElementData(view, 0).renderElement, 'ng-version', VERSION.full);
+    }
 
     return new ComponentRef_(view, new ViewRef_(view), component);
   }
@@ -236,11 +240,20 @@ export class ViewRef_ implements EmbeddedViewRef<any>, InternalViewRef {
   get destroyed(): boolean { return (this._view.state & ViewState.Destroyed) !== 0; }
 
   markForCheck(): void { markParentViewsForCheck(this._view); }
-  detach(): void { this._view.state &= ~ViewState.ChecksEnabled; }
-  detectChanges(): void { Services.checkAndUpdateView(this._view); }
+  detach(): void { this._view.state &= ~ViewState.Attached; }
+  detectChanges(): void {
+    const fs = this._view.root.rendererFactory;
+    if (fs.begin) {
+      fs.begin();
+    }
+    Services.checkAndUpdateView(this._view);
+    if (fs.end) {
+      fs.end();
+    }
+  }
   checkNoChanges(): void { Services.checkNoChangesView(this._view); }
 
-  reattach(): void { this._view.state |= ViewState.ChecksEnabled; }
+  reattach(): void { this._view.state |= ViewState.Attached; }
   onDestroy(callback: Function) {
     if (!this._view.disposables) {
       this._view.disposables = [];
@@ -291,7 +304,8 @@ class TemplateRef_ extends TemplateRef<any> implements TemplateData {
   constructor(private _parentView: ViewData, private _def: NodeDef) { super(); }
 
   createEmbeddedView(context: any): EmbeddedViewRef<any> {
-    return new ViewRef_(Services.createEmbeddedView(this._parentView, this._def, context));
+    return new ViewRef_(Services.createEmbeddedView(
+        this._parentView, this._def, this._def.element !.template !, context));
   }
 
   get elementRef(): ElementRef {
@@ -441,3 +455,45 @@ class RendererAdapter implements RendererV1 {
 
   animate(): any { throw new Error('Renderer.animate is no longer supported!'); }
 }
+
+
+export function createNgModuleRef(
+    moduleType: Type<any>, parent: Injector, bootstrapComponents: Type<any>[],
+    def: NgModuleDefinition): NgModuleRef<any> {
+  return new NgModuleRef_(moduleType, parent, bootstrapComponents, def);
+}
+
+class NgModuleRef_ implements NgModuleData, InternalNgModuleRef<any> {
+  private _destroyListeners: (() => void)[] = [];
+  private _destroyed: boolean = false;
+  public _providers: any[];
+
+  constructor(
+      private _moduleType: Type<any>, public _parent: Injector,
+      public _bootstrapComponents: Type<any>[], public _def: NgModuleDefinition) {
+    initNgModule(this);
+  }
+
+  get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
+    return resolveNgModuleDep(
+        this, {token: token, tokenKey: tokenKey(token), flags: DepFlags.None}, notFoundValue);
+  }
+
+  get instance() { return this.get(this._moduleType); }
+
+  get componentFactoryResolver() { return this.get(ComponentFactoryResolver); }
+
+  get injector(): Injector { return this; }
+
+  destroy(): void {
+    if (this._destroyed) {
+      throw new Error(
+          `The ng module ${stringify(this.instance.constructor)} has already been destroyed.`);
+    }
+    this._destroyed = true;
+    callNgModuleLifecycle(this, NodeFlags.OnDestroy);
+    this._destroyListeners.forEach((listener) => listener());
+  }
+
+  onDestroy(callback: () => void): void { this._destroyListeners.push(callback); }
+}
diff --git a/packages/core/src/view/services.ts b/packages/core/src/view/services.ts
index 5783fc258c..61df5225a7 100644
--- a/packages/core/src/view/services.ts
+++ b/packages/core/src/view/services.ts
@@ -9,17 +9,19 @@
 import {isDevMode} from '../application_ref';
 import {DebugElement, DebugNode, EventListener, getDebugNode, indexDebugNode, removeDebugNodeFromIndex} from '../debug/debug_node';
 import {Injector} from '../di';
+import {ErrorHandler} from '../error_handler';
 import {NgModuleRef} from '../linker/ng_module_factory';
 import {Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '../render/api';
 import {Sanitizer} from '../security';
+import {Type} from '../type';
 
 import {isViewDebugError, viewDestroyedError, viewWrappedDebugError} from './errors';
 import {resolveDep} from './provider';
 import {dirtyParentQueries, getQueryValue} from './query';
-import {createInjector} from './refs';
-import {ArgumentType, BindingFlags, CheckType, DebugContext, ElementData, NodeDef, NodeFlags, NodeLogger, RootData, Services, ViewData, ViewDefinition, ViewState, asElementData, asPureExpressionData} from './types';
-import {NOOP, isComponentView, renderNode, viewParentEl} from './util';
-import {checkAndUpdateNode, checkAndUpdateView, checkNoChangesNode, checkNoChangesView, createEmbeddedView, createRootView, destroyView} from './view';
+import {createInjector, createNgModuleRef} from './refs';
+import {ArgumentType, BindingFlags, CheckType, DebugContext, DepDef, ElementData, NgModuleDefinition, NgModuleProviderDef, NodeDef, NodeFlags, NodeLogger, ProviderOverride, RootData, Services, ViewData, ViewDefinition, ViewState, asElementData, asPureExpressionData} from './types';
+import {NOOP, isComponentView, renderNode, splitDepsDsl, viewParentEl} from './util';
+import {checkAndUpdateNode, checkAndUpdateView, checkNoChangesNode, checkNoChangesView, createComponentView, createEmbeddedView, createRootView, destroyView} from './view';
 
 
 let initialized = false;
@@ -33,6 +35,10 @@ export function initServicesIfNeeded() {
   Services.setCurrentNode = services.setCurrentNode;
   Services.createRootView = services.createRootView;
   Services.createEmbeddedView = services.createEmbeddedView;
+  Services.createComponentView = services.createComponentView;
+  Services.createNgModuleRef = services.createNgModuleRef;
+  Services.overrideProvider = services.overrideProvider;
+  Services.clearProviderOverrides = services.clearProviderOverrides;
   Services.checkAndUpdateView = services.checkAndUpdateView;
   Services.checkNoChangesView = services.checkNoChangesView;
   Services.destroyView = services.destroyView;
@@ -49,6 +55,10 @@ function createProdServices() {
     setCurrentNode: () => {},
     createRootView: createProdRootView,
     createEmbeddedView: createEmbeddedView,
+    createComponentView: createComponentView,
+    createNgModuleRef: createNgModuleRef,
+    overrideProvider: NOOP,
+    clearProviderOverrides: NOOP,
     checkAndUpdateView: checkAndUpdateView,
     checkNoChangesView: checkNoChangesView,
     destroyView: destroyView,
@@ -71,13 +81,17 @@ function createDebugServices() {
     setCurrentNode: debugSetCurrentNode,
     createRootView: debugCreateRootView,
     createEmbeddedView: debugCreateEmbeddedView,
+    createComponentView: debugCreateComponentView,
+    createNgModuleRef: debugCreateNgModuleRef,
+    overrideProvider: debugOverrideProvider,
+    clearProviderOverrides: debugClearProviderOverrides,
     checkAndUpdateView: debugCheckAndUpdateView,
     checkNoChangesView: debugCheckNoChangesView,
     destroyView: debugDestroyView,
     createDebugContext: (view: ViewData, nodeIndex: number) => new DebugContext_(view, nodeIndex),
     handleEvent: debugHandleEvent,
     updateDirectives: debugUpdateDirectives,
-    updateRenderer: debugUpdateRenderer
+    updateRenderer: debugUpdateRenderer,
   };
 }
 
@@ -97,21 +111,154 @@ function debugCreateRootView(
   const root = createRootData(
       elInjector, ngModule, new DebugRendererFactory2(rendererFactory), projectableNodes,
       rootSelectorOrNode);
-  return callWithDebugContext(DebugAction.create, createRootView, null, [root, def, context]);
+  const defWithOverride = applyProviderOverridesToView(def);
+  return callWithDebugContext(
+      DebugAction.create, createRootView, null, [root, defWithOverride, context]);
 }
 
 function createRootData(
     elInjector: Injector, ngModule: NgModuleRef<any>, rendererFactory: RendererFactory2,
     projectableNodes: any[][], rootSelectorOrNode: any): RootData {
   const sanitizer = ngModule.injector.get(Sanitizer);
+  const errorHandler = ngModule.injector.get(ErrorHandler);
   const renderer = rendererFactory.createRenderer(null, null);
   return {
     ngModule,
     injector: elInjector, projectableNodes,
-    selectorOrNode: rootSelectorOrNode, sanitizer, rendererFactory, renderer
+    selectorOrNode: rootSelectorOrNode, sanitizer, rendererFactory, renderer, errorHandler
   };
 }
 
+function debugCreateEmbeddedView(
+    parentView: ViewData, anchorDef: NodeDef, viewDef: ViewDefinition, context?: any): ViewData {
+  const defWithOverride = applyProviderOverridesToView(viewDef);
+  return callWithDebugContext(
+      DebugAction.create, createEmbeddedView, null,
+      [parentView, anchorDef, defWithOverride, context]);
+}
+
+function debugCreateComponentView(
+    parentView: ViewData, nodeDef: NodeDef, viewDef: ViewDefinition, hostElement: any): ViewData {
+  const defWithOverride = applyProviderOverridesToView(viewDef);
+  return callWithDebugContext(
+      DebugAction.create, createComponentView, null,
+      [parentView, nodeDef, defWithOverride, hostElement]);
+}
+
+function debugCreateNgModuleRef(
+    moduleType: Type<any>, parentInjector: Injector, bootstrapComponents: Type<any>[],
+    def: NgModuleDefinition): NgModuleRef<any> {
+  const defWithOverride = applyProviderOverridesToNgModule(def);
+  return createNgModuleRef(moduleType, parentInjector, bootstrapComponents, defWithOverride);
+}
+
+const providerOverrides = new Map<any, ProviderOverride>();
+
+function debugOverrideProvider(override: ProviderOverride) {
+  providerOverrides.set(override.token, override);
+}
+
+function debugClearProviderOverrides() {
+  providerOverrides.clear();
+}
+
+// Notes about the algorithm:
+// 1) Locate the providers of an element and check if one of them was overwritten
+// 2) Change the providers of that element
+//
+// We only create new datastructures if we need to, to keep perf impact
+// reasonable.
+function applyProviderOverridesToView(def: ViewDefinition): ViewDefinition {
+  if (providerOverrides.size === 0) {
+    return def;
+  }
+  const elementIndicesWithOverwrittenProviders = findElementIndicesWithOverwrittenProviders(def);
+  if (elementIndicesWithOverwrittenProviders.length === 0) {
+    return def;
+  }
+  // clone the whole view definition,
+  // as it maintains references between the nodes that are hard to update.
+  def = def.factory !(() => NOOP);
+  for (let i = 0; i < elementIndicesWithOverwrittenProviders.length; i++) {
+    applyProviderOverridesToElement(def, elementIndicesWithOverwrittenProviders[i]);
+  }
+  return def;
+
+  function findElementIndicesWithOverwrittenProviders(def: ViewDefinition): number[] {
+    const elIndicesWithOverwrittenProviders: number[] = [];
+    let lastElementDef: NodeDef|null = null;
+    for (let i = 0; i < def.nodes.length; i++) {
+      const nodeDef = def.nodes[i];
+      if (nodeDef.flags & NodeFlags.TypeElement) {
+        lastElementDef = nodeDef;
+      }
+      if (lastElementDef && nodeDef.flags & NodeFlags.CatProviderNoDirective &&
+          providerOverrides.has(nodeDef.provider !.token)) {
+        elIndicesWithOverwrittenProviders.push(lastElementDef !.index);
+        lastElementDef = null;
+      }
+    }
+    return elIndicesWithOverwrittenProviders;
+  }
+
+  function applyProviderOverridesToElement(viewDef: ViewDefinition, elIndex: number) {
+    for (let i = elIndex + 1; i < viewDef.nodes.length; i++) {
+      const nodeDef = viewDef.nodes[i];
+      if (nodeDef.flags & NodeFlags.TypeElement) {
+        // stop at the next element
+        return;
+      }
+      if (nodeDef.flags & NodeFlags.CatProviderNoDirective) {
+        // Make all providers lazy, so that we don't get into trouble
+        // with ordering problems of providers on the same element
+        nodeDef.flags |= NodeFlags.LazyProvider;
+        const provider = nodeDef.provider !;
+        const override = providerOverrides.get(provider.token);
+        if (override) {
+          nodeDef.flags = (nodeDef.flags & ~NodeFlags.CatProviderNoDirective) | override.flags;
+          provider.deps = splitDepsDsl(override.deps);
+          provider.value = override.value;
+        }
+      }
+    }
+  }
+}
+
+// Notes about the algorithm:
+// We only create new datastructures if we need to, to keep perf impact
+// reasonable.
+function applyProviderOverridesToNgModule(def: NgModuleDefinition): NgModuleDefinition {
+  if (providerOverrides.size === 0 || !hasOverrrides(def)) {
+    return def;
+  }
+  // clone the whole view definition,
+  // as it maintains references between the nodes that are hard to update.
+  def = def.factory !(() => NOOP);
+  applyProviderOverrides(def);
+  return def;
+
+  function hasOverrrides(def: NgModuleDefinition): boolean {
+    return def.providers.some(
+        node =>
+            !!(node.flags & NodeFlags.CatProviderNoDirective) && providerOverrides.has(node.token));
+  }
+
+  function applyProviderOverrides(def: NgModuleDefinition) {
+    for (let i = 0; i < def.providers.length; i++) {
+      const provider = def.providers[i];
+      // Make all providers lazy, so that we don't get into trouble
+      // with ordering problems of providers on the same element
+      provider.flags |= NodeFlags.LazyProvider;
+      const override = providerOverrides.get(provider.token);
+      if (override) {
+        provider.flags = (provider.flags & ~NodeFlags.CatProviderNoDirective) | override.flags;
+        provider.deps = splitDepsDsl(override.deps);
+        provider.value = override.value;
+      }
+    }
+  }
+}
+
 function prodCheckAndUpdateNode(
     view: ViewData, nodeIndex: number, argStyle: ArgumentType, v0?: any, v1?: any, v2?: any,
     v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any, v9?: any): any {
@@ -132,11 +279,6 @@ function prodCheckNoChangesNode(
       undefined;
 }
 
-function debugCreateEmbeddedView(parent: ViewData, anchorDef: NodeDef, context?: any): ViewData {
-  return callWithDebugContext(
-      DebugAction.create, createEmbeddedView, null, [parent, anchorDef, context]);
-}
-
 function debugCheckAndUpdateView(view: ViewData) {
   return callWithDebugContext(DebugAction.detectChanges, checkAndUpdateView, null, [view]);
 }
@@ -439,7 +581,6 @@ function callWithDebugContext(action: DebugAction, fn: any, self: any, args: any
     if (isViewDebugError(e) || !_currentView) {
       throw e;
     }
-    _currentView.state |= ViewState.Errored;
     throw viewWrappedDebugError(e, getCurrentDebugContext() !);
   }
 }
@@ -455,6 +596,24 @@ class DebugRendererFactory2 implements RendererFactory2 {
   createRenderer(element: any, renderData: RendererType2|null): Renderer2 {
     return new DebugRenderer2(this.delegate.createRenderer(element, renderData));
   }
+
+  begin() {
+    if (this.delegate.begin) {
+      this.delegate.begin();
+    }
+  }
+  end() {
+    if (this.delegate.end) {
+      this.delegate.end();
+    }
+  }
+
+  whenRenderingDone(): Promise<any> {
+    if (this.delegate.whenRenderingDone) {
+      return this.delegate.whenRenderingDone();
+    }
+    return Promise.resolve(null);
+  }
 }
 
 
diff --git a/packages/core/src/view/types.ts b/packages/core/src/view/types.ts
index 325f75faad..2e1fcc67b6 100644
--- a/packages/core/src/view/types.ts
+++ b/packages/core/src/view/types.ts
@@ -7,19 +7,45 @@
  */
 
 import {Injector} from '../di';
+import {ErrorHandler} from '../error_handler';
 import {NgModuleRef} from '../linker/ng_module_factory';
 import {QueryList} from '../linker/query_list';
 import {TemplateRef} from '../linker/template_ref';
 import {ViewContainerRef} from '../linker/view_container_ref';
 import {Renderer2, RendererFactory2, RendererType2} from '../render/api';
 import {Sanitizer, SecurityContext} from '../security';
+import {Type} from '../type';
 
 // -------------------------------------
 // Defs
 // -------------------------------------
 
-export interface ViewDefinition {
-  factory: ViewDefinitionFactory|null;
+/**
+ * Factory for ViewDefinitions/NgModuleDefinitions.
+ * We use a function so we can reexeute it in case an error happens and use the given logger
+ * function to log the error from the definition of the node, which is shown in all browser
+ * logs.
+ */
+export interface DefinitionFactory<D extends Definition<any>> { (logger: NodeLogger): D; }
+
+/**
+ * Function to call console.error at the right source location. This is an indirection
+ * via another function as browser will log the location that actually called
+ * `console.error`.
+ */
+export interface NodeLogger { (): () => void; }
+
+export interface Definition<DF extends DefinitionFactory<any>> { factory: DF|null; }
+
+export interface NgModuleDefinition extends Definition<NgModuleDefinitionFactory> {
+  providers: NgModuleProviderDef[];
+  providersByKey: {[tokenKey: string]: NgModuleProviderDef};
+}
+
+export interface NgModuleDefinitionFactory extends DefinitionFactory<NgModuleDefinition> {}
+;
+
+export interface ViewDefinition extends Definition<ViewDefinitionFactory> {
   flags: ViewFlags;
   updateDirectives: ViewUpdateFn;
   updateRenderer: ViewUpdateFn;
@@ -43,20 +69,8 @@ export interface ViewDefinition {
   nodeMatchedQueries: number;
 }
 
-/**
- * Factory for ViewDefinitions.
- * We use a function so we can reexeute it in case an error happens and use the given logger
- * function to log the error from the definition of the node, which is shown in all browser
- * logs.
- */
-export interface ViewDefinitionFactory { (logger: NodeLogger): ViewDefinition; }
+export interface ViewDefinitionFactory extends DefinitionFactory<ViewDefinition> {}
 
-/**
- * Function to call console.error at the right source location. This is an indirection
- * via another function as browser will log the location that actually called
- * `console.error`.
- */
-export interface NodeLogger { (): () => void; }
 
 export interface ViewUpdateFn { (check: NodeCheckFn, view: ViewData): void; }
 
@@ -75,7 +89,7 @@ export interface ViewHandleEventFn {
 }
 
 /**
- * Bitmask for ViewDefintion.flags.
+ * Bitmask for ViewDefinition.flags.
  */
 export const enum ViewFlags {
   None = 0,
@@ -140,37 +154,39 @@ export const enum NodeFlags {
   None = 0,
   TypeElement = 1 << 0,
   TypeText = 1 << 1,
+  ProjectedTemplate = 1 << 2,
   CatRenderNode = TypeElement | TypeText,
-  TypeNgContent = 1 << 2,
-  TypePipe = 1 << 3,
-  TypePureArray = 1 << 4,
-  TypePureObject = 1 << 5,
-  TypePurePipe = 1 << 6,
+  TypeNgContent = 1 << 3,
+  TypePipe = 1 << 4,
+  TypePureArray = 1 << 5,
+  TypePureObject = 1 << 6,
+  TypePurePipe = 1 << 7,
   CatPureExpression = TypePureArray | TypePureObject | TypePurePipe,
-  TypeValueProvider = 1 << 7,
-  TypeClassProvider = 1 << 8,
-  TypeFactoryProvider = 1 << 9,
-  TypeUseExistingProvider = 1 << 10,
-  LazyProvider = 1 << 11,
-  PrivateProvider = 1 << 12,
-  TypeDirective = 1 << 13,
-  Component = 1 << 14,
-  CatProvider = TypeValueProvider | TypeClassProvider | TypeFactoryProvider |
-      TypeUseExistingProvider | TypeDirective,
-  OnInit = 1 << 15,
-  OnDestroy = 1 << 16,
-  DoCheck = 1 << 17,
-  OnChanges = 1 << 18,
-  AfterContentInit = 1 << 19,
-  AfterContentChecked = 1 << 20,
-  AfterViewInit = 1 << 21,
-  AfterViewChecked = 1 << 22,
-  EmbeddedViews = 1 << 23,
-  ComponentView = 1 << 24,
-  TypeContentQuery = 1 << 25,
-  TypeViewQuery = 1 << 26,
-  StaticQuery = 1 << 27,
-  DynamicQuery = 1 << 28,
+  TypeValueProvider = 1 << 8,
+  TypeClassProvider = 1 << 9,
+  TypeFactoryProvider = 1 << 10,
+  TypeUseExistingProvider = 1 << 11,
+  LazyProvider = 1 << 12,
+  PrivateProvider = 1 << 13,
+  TypeDirective = 1 << 14,
+  Component = 1 << 15,
+  CatProviderNoDirective =
+      TypeValueProvider | TypeClassProvider | TypeFactoryProvider | TypeUseExistingProvider,
+  CatProvider = CatProviderNoDirective | TypeDirective,
+  OnInit = 1 << 16,
+  OnDestroy = 1 << 17,
+  DoCheck = 1 << 18,
+  OnChanges = 1 << 19,
+  AfterContentInit = 1 << 20,
+  AfterContentChecked = 1 << 21,
+  AfterViewInit = 1 << 22,
+  AfterViewChecked = 1 << 23,
+  EmbeddedViews = 1 << 24,
+  ComponentView = 1 << 25,
+  TypeContentQuery = 1 << 26,
+  TypeViewQuery = 1 << 27,
+  StaticQuery = 1 << 28,
+  DynamicQuery = 1 << 29,
   CatQuery = TypeContentQuery | TypeViewQuery,
 
   // mutually exclusive values...
@@ -243,7 +259,14 @@ export interface ElementHandleEventFn { (view: ViewData, eventName: string, even
 
 export interface ProviderDef {
   token: any;
-  tokenKey: string;
+  value: any;
+  deps: DepDef[];
+}
+
+export interface NgModuleProviderDef {
+  flags: NodeFlags;
+  index: number;
+  token: any;
   value: any;
   deps: DepDef[];
 }
@@ -294,6 +317,14 @@ export interface NgContentDef {
 // Data
 // -------------------------------------
 
+export interface NgModuleData extends Injector, NgModuleRef<any> {
+  // Note: we are using the prefix _ as NgModuleData is an NgModuleRef and therefore directly
+  // exposed to the user.
+  _def: NgModuleDefinition;
+  _parent: Injector;
+  _providers: any[];
+}
+
 /**
  * View instance data.
  * Attention: Adding fields to this is performance sensitive!
@@ -323,10 +354,17 @@ export interface ViewData {
  * Bitmask of states
  */
 export const enum ViewState {
-  FirstCheck = 1 << 0,
-  ChecksEnabled = 1 << 1,
-  Errored = 1 << 2,
-  Destroyed = 1 << 3
+  BeforeFirstCheck = 1 << 0,
+  FirstCheck = 1 << 1,
+  Attached = 1 << 2,
+  ChecksEnabled = 1 << 3,
+  IsProjectedView = 1 << 4,
+  CheckProjectedView = 1 << 5,
+  CheckProjectedViews = 1 << 6,
+  Destroyed = 1 << 7,
+
+  CatDetectChanges = Attached | ChecksEnabled,
+  CatInit = BeforeFirstCheck | CatDetectChanges
 }
 
 export interface DisposableFn { (): void; }
@@ -370,13 +408,20 @@ export interface ElementData {
   template: TemplateData;
 }
 
-export interface ViewContainerData extends ViewContainerRef { _embeddedViews: ViewData[]; }
+export interface ViewContainerData extends ViewContainerRef {
+  // Note: we are using the prefix _ as ViewContainerData is a ViewContainerRef and therefore
+  // directly
+  // exposed to the user.
+  _embeddedViews: ViewData[];
+}
 
 export interface TemplateData extends TemplateRef<any> {
   // views that have been created from the template
   // of this element,
   // but inserted into the embeddedViews of another element.
   // By default, this is undefined.
+  // Note: we are using the prefix _ as TemplateData is a TemplateRef and therefore directly
+  // exposed to the user.
   _projectedViews: ViewData[];
 }
 
@@ -429,6 +474,7 @@ export interface RootData {
   selectorOrNode: any;
   renderer: Renderer2;
   rendererFactory: RendererFactory2;
+  errorHandler: ErrorHandler;
   sanitizer: Sanitizer;
 }
 
@@ -451,12 +497,27 @@ export abstract class DebugContext {
 
 export const enum CheckType {CheckAndUpdate, CheckNoChanges}
 
+export interface ProviderOverride {
+  token: any;
+  flags: NodeFlags;
+  value: any;
+  deps: ([DepFlags, any]|any)[];
+}
+
 export interface Services {
   setCurrentNode(view: ViewData, nodeIndex: number): void;
   createRootView(
       injector: Injector, projectableNodes: any[][], rootSelectorOrNode: string|any,
       def: ViewDefinition, ngModule: NgModuleRef<any>, context?: any): ViewData;
-  createEmbeddedView(parent: ViewData, anchorDef: NodeDef, context?: any): ViewData;
+  createEmbeddedView(parent: ViewData, anchorDef: NodeDef, viewDef: ViewDefinition, context?: any):
+      ViewData;
+  createComponentView(
+      parentView: ViewData, nodeDef: NodeDef, viewDef: ViewDefinition, hostElement: any): ViewData;
+  createNgModuleRef(
+      moduleType: Type<any>, parent: Injector, bootstrapComponents: Type<any>[],
+      def: NgModuleDefinition): NgModuleRef<any>;
+  overrideProvider(override: ProviderOverride): void;
+  clearProviderOverrides(): void;
   checkAndUpdateView(view: ViewData): void;
   checkNoChangesView(view: ViewData): void;
   destroyView(view: ViewData): void;
@@ -478,6 +539,10 @@ export const Services: Services = {
   setCurrentNode: undefined !,
   createRootView: undefined !,
   createEmbeddedView: undefined !,
+  createComponentView: undefined !,
+  createNgModuleRef: undefined !,
+  overrideProvider: undefined !,
+  clearProviderOverrides: undefined !,
   checkAndUpdateView: undefined !,
   checkNoChangesView: undefined !,
   destroyView: undefined !,
diff --git a/packages/core/src/view/util.ts b/packages/core/src/view/util.ts
index fb6042d34b..48016f29f4 100644
--- a/packages/core/src/view/util.ts
+++ b/packages/core/src/view/util.ts
@@ -12,7 +12,7 @@ import {RendererType2} from '../render/api';
 import {looseIdentical, stringify} from '../util';
 
 import {expressionChangedAfterItHasBeenCheckedError} from './errors';
-import {BindingDef, BindingFlags, ElementData, NodeDef, NodeFlags, QueryValueType, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, ViewState, asElementData, asTextData} from './types';
+import {BindingDef, BindingFlags, Definition, DefinitionFactory, DepDef, DepFlags, ElementData, NodeDef, NodeFlags, QueryValueType, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, ViewState, asElementData, asTextData} from './types';
 
 export const NOOP: any = () => {};
 
@@ -100,10 +100,10 @@ export function checkAndUpdateBinding(
 export function checkBindingNoChanges(
     view: ViewData, def: NodeDef, bindingIdx: number, value: any) {
   const oldValue = view.oldValues[def.bindingIndex + bindingIdx];
-  if ((view.state & ViewState.FirstCheck) || !devModeEqual(oldValue, value)) {
+  if ((view.state & ViewState.BeforeFirstCheck) || !devModeEqual(oldValue, value)) {
     throw expressionChangedAfterItHasBeenCheckedError(
         Services.createDebugContext(view, def.index), oldValue, value,
-        (view.state & ViewState.FirstCheck) !== 0);
+        (view.state & ViewState.BeforeFirstCheck) !== 0);
   }
 }
 
@@ -117,13 +117,27 @@ export function markParentViewsForCheck(view: ViewData) {
   }
 }
 
+export function markParentViewsForCheckProjectedViews(view: ViewData, endView: ViewData) {
+  let currView: ViewData|null = view;
+  while (currView && currView !== endView) {
+    currView.state |= ViewState.CheckProjectedViews;
+    currView = currView.viewContainerParent || currView.parent;
+  }
+}
+
 export function dispatchEvent(
-    view: ViewData, nodeIndex: number, eventName: string, event: any): boolean {
-  const nodeDef = view.def.nodes[nodeIndex];
-  const startView =
-      nodeDef.flags & NodeFlags.ComponentView ? asElementData(view, nodeIndex).componentView : view;
-  markParentViewsForCheck(startView);
-  return Services.handleEvent(view, nodeIndex, eventName, event);
+    view: ViewData, nodeIndex: number, eventName: string, event: any): boolean|undefined {
+  try {
+    const nodeDef = view.def.nodes[nodeIndex];
+    const startView = nodeDef.flags & NodeFlags.ComponentView ?
+        asElementData(view, nodeIndex).componentView :
+        view;
+    markParentViewsForCheck(startView);
+    return Services.handleEvent(view, nodeIndex, eventName, event);
+  } catch (e) {
+    // Attention: Don't rethrow, as it would cancel Observable subscriptions!
+    view.root.errorHandler.handleError(e);
+  }
 }
 
 export function declaredViewContainer(view: ViewData): ElementData|null {
@@ -195,6 +209,20 @@ export function splitMatchedQueriesDsl(
   return {matchedQueries, references, matchedQueryIds};
 }
 
+export function splitDepsDsl(deps: ([DepFlags, any] | any)[]): DepDef[] {
+  return deps.map(value => {
+    let token: any;
+    let flags: DepFlags;
+    if (Array.isArray(value)) {
+      [flags, token] = value;
+    } else {
+      flags = DepFlags.None;
+      token = value;
+    }
+    return {flags, token, tokenKey: tokenKey(token)};
+  });
+}
+
 export function getParentRenderElement(view: ViewData, renderHost: any, def: NodeDef): any {
   let renderParent = def.renderParent;
   if (renderParent) {
@@ -212,14 +240,14 @@ export function getParentRenderElement(view: ViewData, renderHost: any, def: Nod
   }
 }
 
-const VIEW_DEFINITION_CACHE = new WeakMap<any, ViewDefinition>();
+const DEFINITION_CACHE = new WeakMap<any, Definition<any>>();
 
-export function resolveViewDefinition(factory: ViewDefinitionFactory): ViewDefinition {
-  let value: ViewDefinition = VIEW_DEFINITION_CACHE.get(factory) !;
+export function resolveDefinition<D extends Definition<any>>(factory: DefinitionFactory<D>): D {
+  let value = DEFINITION_CACHE.get(factory) !as D;
   if (!value) {
     value = factory(() => NOOP);
     value.factory = factory;
-    VIEW_DEFINITION_CACHE.set(factory, value);
+    DEFINITION_CACHE.set(factory, value);
   }
   return value;
 }
diff --git a/packages/core/src/view/view.ts b/packages/core/src/view/view.ts
index 4150c29be3..18d07766c3 100644
--- a/packages/core/src/view/view.ts
+++ b/packages/core/src/view/view.ts
@@ -17,7 +17,8 @@ import {checkAndUpdateQuery, createQuery} from './query';
 import {createTemplateData, createViewContainerData} from './refs';
 import {checkAndUpdateTextDynamic, checkAndUpdateTextInline, createText} from './text';
 import {ArgumentType, CheckType, ElementData, NodeData, NodeDef, NodeFlags, ProviderData, RootData, Services, ViewData, ViewDefinition, ViewFlags, ViewHandleEventFn, ViewState, ViewUpdateFn, asElementData, asQueryList, asTextData} from './types';
-import {NOOP, checkBindingNoChanges, isComponentView, resolveViewDefinition} from './util';
+import {NOOP, checkBindingNoChanges, isComponentView, markParentViewsForCheckProjectedViews, resolveDefinition, tokenKey} from './util';
+import {detachProjectedView} from './view_attach';
 
 export function viewDef(
     flags: ViewFlags, nodes: NodeDef[], updateDirectives?: ViewUpdateFn,
@@ -101,7 +102,7 @@ export function viewDef(
       const isPrivateService = (node.flags & NodeFlags.PrivateProvider) !== 0;
       const isComponent = (node.flags & NodeFlags.Component) !== 0;
       if (!isPrivateService || isComponent) {
-        currentParent !.element !.publicProviders ![node.provider !.tokenKey] = node;
+        currentParent !.element !.publicProviders ![tokenKey(node.provider !.token)] = node;
       } else {
         if (!currentElementHasPrivateProviders) {
           currentElementHasPrivateProviders = true;
@@ -109,7 +110,7 @@ export function viewDef(
           currentParent !.element !.allProviders =
               Object.create(currentParent !.element !.publicProviders);
         }
-        currentParent !.element !.allProviders ![node.provider !.tokenKey] = node;
+        currentParent !.element !.allProviders ![tokenKey(node.provider !.token)] = node;
       }
       if (isComponent) {
         currentParent !.element !.componentProvider = node;
@@ -183,11 +184,11 @@ function validateNode(parent: NodeDef | null, node: NodeDef, nodeCount: number)
   }
 }
 
-export function createEmbeddedView(parent: ViewData, anchorDef: NodeDef, context?: any): ViewData {
+export function createEmbeddedView(
+    parent: ViewData, anchorDef: NodeDef, viewDef: ViewDefinition, context?: any): ViewData {
   // embedded views are seen as siblings to the anchor, so we need
   // to get the parent of the anchor and use it as parentIndex.
-  const view =
-      createView(parent.root, parent.renderer, parent, anchorDef, anchorDef.element !.template !);
+  const view = createView(parent.root, parent.renderer, parent, anchorDef, viewDef);
   initView(view, parent.component, context);
   createViewNodes(view);
   return view;
@@ -200,6 +201,19 @@ export function createRootView(root: RootData, def: ViewDefinition, context?: an
   return view;
 }
 
+export function createComponentView(
+    parentView: ViewData, nodeDef: NodeDef, viewDef: ViewDefinition, hostElement: any): ViewData {
+  const rendererType = nodeDef.element !.componentRendererType;
+  let compRenderer: Renderer2;
+  if (!rendererType) {
+    compRenderer = parentView.root.renderer;
+  } else {
+    compRenderer = parentView.root.rendererFactory.createRenderer(hostElement, rendererType);
+  }
+  return createView(
+      parentView.root, compRenderer, parentView, nodeDef.element !.componentProvider, viewDef);
+}
+
 function createView(
     root: RootData, renderer: Renderer2, parent: ViewData | null, parentNodeDef: NodeDef | null,
     def: ViewDefinition): ViewData {
@@ -211,7 +225,7 @@ function createView(
     viewContainerParent: null, parentNodeDef,
     context: null,
     component: null, nodes,
-    state: ViewState.FirstCheck | ViewState.ChecksEnabled, root, renderer,
+    state: ViewState.CatInit, root, renderer,
     oldValues: new Array(def.bindingCount), disposables
   };
   return view;
@@ -239,16 +253,8 @@ function createViewNodes(view: ViewData) {
         const el = createElement(view, renderHost, nodeDef) as any;
         let componentView: ViewData = undefined !;
         if (nodeDef.flags & NodeFlags.ComponentView) {
-          const compViewDef = resolveViewDefinition(nodeDef.element !.componentView !);
-          const rendererType = nodeDef.element !.componentRendererType;
-          let compRenderer: Renderer2;
-          if (!rendererType) {
-            compRenderer = view.root.renderer;
-          } else {
-            compRenderer = view.root.rendererFactory.createRenderer(el, rendererType);
-          }
-          componentView = createView(
-              view.root, compRenderer, view, nodeDef.element !.componentProvider, compViewDef);
+          const compViewDef = resolveDefinition(nodeDef.element !.componentView !);
+          componentView = Services.createComponentView(view, nodeDef, compViewDef, el);
         }
         listenToElementOutputs(view, componentView, nodeDef, el);
         nodeData = <ElementData>{
@@ -314,15 +320,24 @@ function createViewNodes(view: ViewData) {
 }
 
 export function checkNoChangesView(view: ViewData) {
+  markProjectedViewsForCheck(view);
   Services.updateDirectives(view, CheckType.CheckNoChanges);
   execEmbeddedViewsAction(view, ViewAction.CheckNoChanges);
   Services.updateRenderer(view, CheckType.CheckNoChanges);
   execComponentViewsAction(view, ViewAction.CheckNoChanges);
   // Note: We don't check queries for changes as we didn't do this in v2.x.
   // TODO(tbosch): investigate if we can enable the check again in v5.x with a nicer error message.
+  view.state &= ~(ViewState.CheckProjectedViews | ViewState.CheckProjectedView);
 }
 
 export function checkAndUpdateView(view: ViewData) {
+  if (view.state & ViewState.BeforeFirstCheck) {
+    view.state &= ~ViewState.BeforeFirstCheck;
+    view.state |= ViewState.FirstCheck;
+  } else {
+    view.state &= ~ViewState.FirstCheck;
+  }
+  markProjectedViewsForCheck(view);
   Services.updateDirectives(view, CheckType.CheckAndUpdate);
   execEmbeddedViewsAction(view, ViewAction.CheckAndUpdate);
   execQueriesAction(
@@ -337,7 +352,6 @@ export function checkAndUpdateView(view: ViewData) {
   execComponentViewsAction(view, ViewAction.CheckAndUpdate);
   execQueriesAction(
       view, NodeFlags.TypeViewQuery, NodeFlags.DynamicQuery, CheckType.CheckAndUpdate);
-
   callLifecycleHooksChildrenFirst(
       view, NodeFlags.AfterViewChecked |
           (view.state & ViewState.FirstCheck ? NodeFlags.AfterViewInit : 0));
@@ -345,7 +359,7 @@ export function checkAndUpdateView(view: ViewData) {
   if (view.def.flags & ViewFlags.OnPush) {
     view.state &= ~ViewState.ChecksEnabled;
   }
-  view.state &= ~ViewState.FirstCheck;
+  view.state &= ~(ViewState.CheckProjectedViews | ViewState.CheckProjectedView);
 }
 
 export function checkAndUpdateNode(
@@ -358,6 +372,31 @@ export function checkAndUpdateNode(
   }
 }
 
+function markProjectedViewsForCheck(view: ViewData) {
+  const def = view.def;
+  if (!(def.nodeFlags & NodeFlags.ProjectedTemplate)) {
+    return;
+  }
+  for (let i = 0; i < def.nodes.length; i++) {
+    const nodeDef = def.nodes[i];
+    if (nodeDef.flags & NodeFlags.ProjectedTemplate) {
+      const projectedViews = asElementData(view, i).template._projectedViews;
+      if (projectedViews) {
+        for (let i = 0; i < projectedViews.length; i++) {
+          const projectedView = projectedViews[i];
+          projectedView.state |= ViewState.CheckProjectedView;
+          markParentViewsForCheckProjectedViews(projectedView, view);
+        }
+      }
+    } else if ((nodeDef.childFlags & NodeFlags.ProjectedTemplate) === 0) {
+      // a parent with leafs
+      // no child is a component,
+      // then skip the children
+      i += nodeDef.childCount;
+    }
+  }
+}
+
 function checkAndUpdateNodeInline(
     view: ViewData, nodeDef: NodeDef, v0?: any, v1?: any, v2?: any, v3?: any, v4?: any, v5?: any,
     v6?: any, v7?: any, v8?: any, v9?: any): boolean {
@@ -448,12 +487,16 @@ function checkNoChangesNodeDynamic(view: ViewData, nodeDef: NodeDef, values: any
   }
 }
 
+/**
+ * Workaround https://github.com/angular/tsickle/issues/497
+ * @suppress {misplacedTypeAnnotation}
+ */
 function checkNoChangesQuery(view: ViewData, nodeDef: NodeDef) {
   const queryList = asQueryList(view, nodeDef.index);
   if (queryList.dirty) {
     throw expressionChangedAfterItHasBeenCheckedError(
         Services.createDebugContext(view, nodeDef.index), `Query ${nodeDef.query!.id} not dirty`,
-        `Query ${nodeDef.query!.id} dirty`, (view.state & ViewState.FirstCheck) !== 0);
+        `Query ${nodeDef.query!.id} dirty`, (view.state & ViewState.BeforeFirstCheck) !== 0);
   }
 }
 
@@ -469,6 +512,7 @@ export function destroyView(view: ViewData) {
       view.disposables[i]();
     }
   }
+  detachProjectedView(view);
   if (view.renderer.destroyNode) {
     destroyViewNodes(view);
   }
@@ -493,7 +537,9 @@ function destroyViewNodes(view: ViewData) {
 enum ViewAction {
   CreateViewNodes,
   CheckNoChanges,
+  CheckNoChangesProjectedViews,
   CheckAndUpdate,
+  CheckAndUpdateProjectedViews,
   Destroy
 }
 
@@ -542,18 +588,44 @@ function callViewAction(view: ViewData, action: ViewAction) {
   const viewState = view.state;
   switch (action) {
     case ViewAction.CheckNoChanges:
-      if ((viewState & ViewState.ChecksEnabled) &&
-          (viewState & (ViewState.Errored | ViewState.Destroyed)) === 0) {
-        checkNoChangesView(view);
+      if ((viewState & ViewState.Destroyed) === 0) {
+        if ((viewState & ViewState.CatDetectChanges) === ViewState.CatDetectChanges) {
+          checkNoChangesView(view);
+        } else if (viewState & ViewState.CheckProjectedViews) {
+          execProjectedViewsAction(view, ViewAction.CheckNoChangesProjectedViews);
+        }
+      }
+      break;
+    case ViewAction.CheckNoChangesProjectedViews:
+      if ((viewState & ViewState.Destroyed) === 0) {
+        if (viewState & ViewState.CheckProjectedView) {
+          checkNoChangesView(view);
+        } else if (viewState & ViewState.CheckProjectedViews) {
+          execProjectedViewsAction(view, action);
+        }
       }
       break;
     case ViewAction.CheckAndUpdate:
-      if ((viewState & ViewState.ChecksEnabled) &&
-          (viewState & (ViewState.Errored | ViewState.Destroyed)) === 0) {
-        checkAndUpdateView(view);
+      if ((viewState & ViewState.Destroyed) === 0) {
+        if ((viewState & ViewState.CatDetectChanges) === ViewState.CatDetectChanges) {
+          checkAndUpdateView(view);
+        } else if (viewState & ViewState.CheckProjectedViews) {
+          execProjectedViewsAction(view, ViewAction.CheckAndUpdateProjectedViews);
+        }
+      }
+      break;
+    case ViewAction.CheckAndUpdateProjectedViews:
+      if ((viewState & ViewState.Destroyed) === 0) {
+        if (viewState & ViewState.CheckProjectedView) {
+          checkAndUpdateView(view);
+        } else if (viewState & ViewState.CheckProjectedViews) {
+          execProjectedViewsAction(view, action);
+        }
       }
       break;
     case ViewAction.Destroy:
+      // Note: destroyView recurses over all views,
+      // so we don't need to special case projected views here.
       destroyView(view);
       break;
     case ViewAction.CreateViewNodes:
@@ -562,6 +634,11 @@ function callViewAction(view: ViewData, action: ViewAction) {
   }
 }
 
+function execProjectedViewsAction(view: ViewData, action: ViewAction) {
+  execEmbeddedViewsAction(view, action);
+  execComponentViewsAction(view, action);
+}
+
 function execQueriesAction(
     view: ViewData, queryFlags: NodeFlags, staticDynamicQueryFlag: NodeFlags,
     checkType: CheckType) {
diff --git a/packages/core/src/view/view_attach.ts b/packages/core/src/view/view_attach.ts
index 200dacf4c7..31726e3139 100644
--- a/packages/core/src/view/view_attach.ts
+++ b/packages/core/src/view/view_attach.ts
@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ElementData, Services, ViewData} from './types';
-import {RenderNodeAction, declaredViewContainer, renderNode, visitRootRenderNodes} from './util';
+import {ElementData, NodeDef, NodeFlags, Services, ViewData, ViewDefinition, ViewState} from './types';
+import {RenderNodeAction, declaredViewContainer, isComponentView, renderNode, visitRootRenderNodes} from './util';
 
 export function attachEmbeddedView(
     parentView: ViewData, elementData: ElementData, viewIndex: number | undefined | null,
@@ -18,14 +18,7 @@ export function attachEmbeddedView(
   }
   view.viewContainerParent = parentView;
   addToArray(embeddedViews, viewIndex !, view);
-  const dvcElementData = declaredViewContainer(view);
-  if (dvcElementData && dvcElementData !== elementData) {
-    let projectedViews = dvcElementData.template._projectedViews;
-    if (!projectedViews) {
-      projectedViews = dvcElementData.template._projectedViews = [];
-    }
-    projectedViews.push(view);
-  }
+  attachProjectedView(elementData, view);
 
   Services.dirtyParentQueries(view);
 
@@ -33,6 +26,43 @@ export function attachEmbeddedView(
   renderAttachEmbeddedView(elementData, prevView, view);
 }
 
+function attachProjectedView(vcElementData: ElementData, view: ViewData) {
+  const dvcElementData = declaredViewContainer(view);
+  if (!dvcElementData || dvcElementData === vcElementData ||
+      view.state & ViewState.IsProjectedView) {
+    return;
+  }
+  // Note: For performance reasons, we
+  // - add a view to template._projectedViews only 1x throughout its lifetime,
+  //   and remove it not until the view is destroyed.
+  //   (hard, as when a parent view is attached/detached we would need to attach/detach all
+  //    nested projected views as well, even accross component boundaries).
+  // - don't track the insertion order of views in the projected views array
+  //   (hard, as when the views of the same template are inserted different view containers)
+  view.state |= ViewState.IsProjectedView;
+  let projectedViews = dvcElementData.template._projectedViews;
+  if (!projectedViews) {
+    projectedViews = dvcElementData.template._projectedViews = [];
+  }
+  projectedViews.push(view);
+  // Note: we are changing the NodeDef here as we cannot calculate
+  // the fact whether a template is used for projection during compilation.
+  markNodeAsProjectedTemplate(view.parent !.def, view.parentNodeDef !);
+}
+
+function markNodeAsProjectedTemplate(viewDef: ViewDefinition, nodeDef: NodeDef) {
+  if (nodeDef.flags & NodeFlags.ProjectedTemplate) {
+    return;
+  }
+  viewDef.nodeFlags |= NodeFlags.ProjectedTemplate;
+  nodeDef.flags |= NodeFlags.ProjectedTemplate;
+  let parentNodeDef = nodeDef.parent;
+  while (parentNodeDef) {
+    parentNodeDef.childFlags |= NodeFlags.ProjectedTemplate;
+    parentNodeDef = parentNodeDef.parent;
+  }
+}
+
 export function detachEmbeddedView(elementData: ElementData, viewIndex?: number): ViewData|null {
   const embeddedViews = elementData.viewContainer !._embeddedViews;
   if (viewIndex == null || viewIndex >= embeddedViews.length) {
@@ -45,12 +75,7 @@ export function detachEmbeddedView(elementData: ElementData, viewIndex?: number)
   view.viewContainerParent = null;
   removeFromArray(embeddedViews, viewIndex);
 
-  const dvcElementData = declaredViewContainer(view);
-  if (dvcElementData && dvcElementData !== elementData) {
-    const projectedViews = dvcElementData.template._projectedViews;
-    removeFromArray(projectedViews, projectedViews.indexOf(view));
-  }
-
+  // See attachProjectedView for why we don't update projectedViews here.
   Services.dirtyParentQueries(view);
 
   renderDetachView(view);
@@ -58,6 +83,20 @@ export function detachEmbeddedView(elementData: ElementData, viewIndex?: number)
   return view;
 }
 
+export function detachProjectedView(view: ViewData) {
+  if (!(view.state & ViewState.IsProjectedView)) {
+    return;
+  }
+  const dvcElementData = declaredViewContainer(view);
+  if (dvcElementData) {
+    const projectedViews = dvcElementData.template._projectedViews;
+    if (projectedViews) {
+      removeFromArray(projectedViews, projectedViews.indexOf(view));
+      Services.dirtyParentQueries(view);
+    }
+  }
+}
+
 export function moveEmbeddedView(
     elementData: ElementData, oldViewIndex: number, newViewIndex: number): ViewData {
   const embeddedViews = elementData.viewContainer !._embeddedViews;
diff --git a/packages/core/src/zone/ng_zone.ts b/packages/core/src/zone/ng_zone.ts
index a821c3f350..1f16d2e3ca 100644
--- a/packages/core/src/zone/ng_zone.ts
+++ b/packages/core/src/zone/ng_zone.ts
@@ -6,6 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+// Import zero symbols from zone.js. This causes the zone ambient type to be
+// added to the type-checker, without emitting any runtime module load statement
+import {} from 'zone.js';
 import {EventEmitter} from '../event_emitter';
 
 /**
@@ -13,8 +16,8 @@ import {EventEmitter} from '../event_emitter';
  *
  * The most common use of this service is to optimize performance when starting a work consisting of
  * one or more asynchronous tasks that don't require UI updates or error handling to be handled by
- * Angular. Such tasks can be kicked off via {@link runOutsideAngular} and if needed, these tasks
- * can reenter the Angular zone via {@link run}.
+ * Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
+ * can reenter the Angular zone via {@link #run}.
  *
  * <!-- TODO: add/fix links to:
  *   - docs explaining zones and the use of zones in Angular and change-detection
@@ -81,18 +84,37 @@ import {EventEmitter} from '../event_emitter';
  * @experimental
  */
 export class NgZone {
-  private outer: Zone;
-  private inner: Zone;
+  readonly hasPendingMicrotasks: boolean = false;
+  readonly hasPendingMacrotasks: boolean = false;
 
-  private _hasPendingMicrotasks: boolean = false;
-  private _hasPendingMacrotasks: boolean = false;
+  /**
+   * Whether there are no outstanding microtasks or macrotasks.
+   */
+  readonly isStable: boolean = true;
 
-  private _isStable = true;
-  private _nesting: number = 0;
-  private _onUnstable: EventEmitter<any> = new EventEmitter(false);
-  private _onMicrotaskEmpty: EventEmitter<any> = new EventEmitter(false);
-  private _onStable: EventEmitter<any> = new EventEmitter(false);
-  private _onErrorEvents: EventEmitter<any> = new EventEmitter(false);
+  /**
+   * Notifies when code enters Angular Zone. This gets fired first on VM Turn.
+   */
+  readonly onUnstable: EventEmitter<any> = new EventEmitter(false);
+
+  /**
+   * Notifies when there is no more microtasks enqueue in the current VM Turn.
+   * This is a hint for Angular to do change detection, which may enqueue more microtasks.
+   * For this reason this event can fire multiple times per VM Turn.
+   */
+  readonly onMicrotaskEmpty: EventEmitter<any> = new EventEmitter(false);
+
+  /**
+   * Notifies when the last `onMicrotaskEmpty` has run and there are no more microtasks, which
+   * implies we are about to relinquish VM turn.
+   * This event gets called just once.
+   */
+  readonly onStable: EventEmitter<any> = new EventEmitter(false);
+
+  /**
+   * Notifies that an error has been delivered.
+   */
+  readonly onError: EventEmitter<any> = new EventEmitter(false);
 
   constructor({enableLongStackTrace = false}) {
     if (typeof Zone == 'undefined') {
@@ -100,18 +122,20 @@ export class NgZone {
     }
 
     Zone.assertZonePatched();
+    const self = this as any as NgZonePrivate;
+    self._nesting = 0;
 
-    this.outer = this.inner = Zone.current;
+    self._outer = self._inner = Zone.current;
 
     if ((Zone as any)['wtfZoneSpec']) {
-      this.inner = this.inner.fork((Zone as any)['wtfZoneSpec']);
+      self._inner = self._inner.fork((Zone as any)['wtfZoneSpec']);
     }
 
     if (enableLongStackTrace && (Zone as any)['longStackTraceZoneSpec']) {
-      this.inner = this.inner.fork((Zone as any)['longStackTraceZoneSpec']);
+      self._inner = self._inner.fork((Zone as any)['longStackTraceZoneSpec']);
     }
 
-    this.forkInnerZoneWithAngularBehavior();
+    forkInnerZoneWithAngularBehavior(self);
   }
 
   static isInAngularZone(): boolean { return Zone.current.get('isAngularZone') === true; }
@@ -121,6 +145,7 @@ export class NgZone {
       throw new Error('Expected to be in Angular Zone, but it is not!');
     }
   }
+
   static assertNotInAngularZone(): void {
     if (NgZone.isInAngularZone()) {
       throw new Error('Expected to not be in Angular Zone, but it is!');
@@ -132,152 +157,154 @@ export class NgZone {
    * the function.
    *
    * Running functions via `run` allows you to reenter Angular zone from a task that was executed
-   * outside of the Angular zone (typically started via {@link runOutsideAngular}).
+   * outside of the Angular zone (typically started via {@link #runOutsideAngular}).
    *
    * Any future tasks or microtasks scheduled from within this function will continue executing from
    * within the Angular zone.
    *
    * If a synchronous error happens it will be rethrown and not reported via `onError`.
    */
-  run(fn: () => any): any { return this.inner.run(fn); }
+  run<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T {
+    return (this as any as NgZonePrivate)._inner.run(fn, applyThis, applyArgs) as T;
+  }
+
+  /**
+   * Executes the `fn` function synchronously within the Angular zone as a task and returns value
+   * returned by the function.
+   *
+   * Running functions via `run` allows you to reenter Angular zone from a task that was executed
+   * outside of the Angular zone (typically started via {@link #runOutsideAngular}).
+   *
+   * Any future tasks or microtasks scheduled from within this function will continue executing from
+   * within the Angular zone.
+   *
+   * If a synchronous error happens it will be rethrown and not reported via `onError`.
+   */
+  runTask<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[], name?: string): T {
+    const zone = (this as any as NgZonePrivate)._inner;
+    const task = zone.scheduleEventTask('NgZoneEvent: ' + name, fn, EMPTY_PAYLOAD, noop, noop);
+    try {
+      return zone.runTask(task, applyThis, applyArgs) as T;
+    } finally {
+      zone.cancelTask(task);
+    }
+  }
 
   /**
    * Same as `run`, except that synchronous errors are caught and forwarded via `onError` and not
    * rethrown.
    */
-  runGuarded(fn: () => any): any { return this.inner.runGuarded(fn); }
+  runGuarded<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T {
+    return (this as any as NgZonePrivate)._inner.runGuarded(fn, applyThis, applyArgs) as T;
+  }
 
   /**
    * Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
    * the function.
    *
-   * Running functions via `runOutsideAngular` allows you to escape Angular's zone and do work that
+   * Running functions via {@link #runOutsideAngular} allows you to escape Angular's zone and do
+   * work that
    * doesn't trigger Angular change-detection or is subject to Angular's error handling.
    *
    * Any future tasks or microtasks scheduled from within this function will continue executing from
    * outside of the Angular zone.
    *
-   * Use {@link run} to reenter the Angular zone and do work that updates the application model.
+   * Use {@link #run} to reenter the Angular zone and do work that updates the application model.
    */
-  runOutsideAngular(fn: () => any): any { return this.outer.run(fn); }
-
-  /**
-   * Notifies when code enters Angular Zone. This gets fired first on VM Turn.
-   */
-  get onUnstable(): EventEmitter<any> { return this._onUnstable; }
-
-  /**
-   * Notifies when there is no more microtasks enqueue in the current VM Turn.
-   * This is a hint for Angular to do change detection, which may enqueue more microtasks.
-   * For this reason this event can fire multiple times per VM Turn.
-   */
-  get onMicrotaskEmpty(): EventEmitter<any> { return this._onMicrotaskEmpty; }
-
-  /**
-   * Notifies when the last `onMicrotaskEmpty` has run and there are no more microtasks, which
-   * implies we are about to relinquish VM turn.
-   * This event gets called just once.
-   */
-  get onStable(): EventEmitter<any> { return this._onStable; }
-
-  /**
-   * Notify that an error has been delivered.
-   */
-  get onError(): EventEmitter<any> { return this._onErrorEvents; }
-
-  /**
-   * Whether there are no outstanding microtasks or macrotasks.
-   */
-  get isStable(): boolean { return this._isStable; }
-
-  get hasPendingMicrotasks(): boolean { return this._hasPendingMicrotasks; }
-
-  get hasPendingMacrotasks(): boolean { return this._hasPendingMacrotasks; }
-
-  private checkStable() {
-    if (this._nesting == 0 && !this._hasPendingMicrotasks && !this._isStable) {
-      try {
-        this._nesting++;
-        this._onMicrotaskEmpty.emit(null);
-      } finally {
-        this._nesting--;
-        if (!this._hasPendingMicrotasks) {
-          try {
-            this.runOutsideAngular(() => this._onStable.emit(null));
-          } finally {
-            this._isStable = true;
-          }
-        }
-      }
-    }
+  runOutsideAngular<T>(fn: (...args: any[]) => T): T {
+    return (this as any as NgZonePrivate)._outer.run(fn) as T;
   }
-
-  private forkInnerZoneWithAngularBehavior() {
-    this.inner = this.inner.fork({
-      name: 'angular',
-      properties: <any>{'isAngularZone': true},
-      onInvokeTask: (delegate: ZoneDelegate, current: Zone, target: Zone, task: Task,
-                     applyThis: any, applyArgs: any): any => {
-        try {
-          this.onEnter();
-          return delegate.invokeTask(target, task, applyThis, applyArgs);
-        } finally {
-          this.onLeave();
-        }
-      },
-
-
-      onInvoke: (delegate: ZoneDelegate, current: Zone, target: Zone, callback: Function,
-                 applyThis: any, applyArgs: any[], source: string): any => {
-        try {
-          this.onEnter();
-          return delegate.invoke(target, callback, applyThis, applyArgs, source);
-        } finally {
-          this.onLeave();
-        }
-      },
-
-      onHasTask:
-          (delegate: ZoneDelegate, current: Zone, target: Zone, hasTaskState: HasTaskState) => {
-            delegate.hasTask(target, hasTaskState);
-            if (current === target) {
-              // We are only interested in hasTask events which originate from our zone
-              // (A child hasTask event is not interesting to us)
-              if (hasTaskState.change == 'microTask') {
-                this.setHasMicrotask(hasTaskState.microTask);
-              } else if (hasTaskState.change == 'macroTask') {
-                this.setHasMacrotask(hasTaskState.macroTask);
-              }
-            }
-          },
-
-      onHandleError: (delegate: ZoneDelegate, current: Zone, target: Zone, error: any): boolean => {
-        delegate.handleError(target, error);
-        this.triggerError(error);
-        return false;
-      }
-    });
-  }
-
-  private onEnter() {
-    this._nesting++;
-    if (this._isStable) {
-      this._isStable = false;
-      this._onUnstable.emit(null);
-    }
-  }
-
-  private onLeave() {
-    this._nesting--;
-    this.checkStable();
-  }
-
-  private setHasMicrotask(hasMicrotasks: boolean) {
-    this._hasPendingMicrotasks = hasMicrotasks;
-    this.checkStable();
-  }
-
-  private setHasMacrotask(hasMacrotasks: boolean) { this._hasPendingMacrotasks = hasMacrotasks; }
-
-  private triggerError(error: any) { this._onErrorEvents.emit(error); }
+}
+
+function noop(){};
+const EMPTY_PAYLOAD = {};
+
+
+interface NgZonePrivate extends NgZone {
+  _outer: Zone;
+  _inner: Zone;
+  _nesting: number;
+
+  hasPendingMicrotasks: boolean;
+  hasPendingMacrotasks: boolean;
+  isStable: boolean;
+}
+
+function checkStable(zone: NgZonePrivate) {
+  if (zone._nesting == 0 && !zone.hasPendingMicrotasks && !zone.isStable) {
+    try {
+      zone._nesting++;
+      zone.onMicrotaskEmpty.emit(null);
+    } finally {
+      zone._nesting--;
+      if (!zone.hasPendingMicrotasks) {
+        try {
+          zone.runOutsideAngular(() => zone.onStable.emit(null));
+        } finally {
+          zone.isStable = true;
+        }
+      }
+    }
+  }
+}
+
+function forkInnerZoneWithAngularBehavior(zone: NgZonePrivate) {
+  zone._inner = zone._inner.fork({
+    name: 'angular',
+    properties: <any>{'isAngularZone': true},
+    onInvokeTask: (delegate: ZoneDelegate, current: Zone, target: Zone, task: Task, applyThis: any,
+                   applyArgs: any): any => {
+      try {
+        onEnter(zone);
+        return delegate.invokeTask(target, task, applyThis, applyArgs);
+      } finally {
+        onLeave(zone);
+      }
+    },
+
+
+    onInvoke: (delegate: ZoneDelegate, current: Zone, target: Zone, callback: Function,
+               applyThis: any, applyArgs: any[], source: string): any => {
+      try {
+        onEnter(zone);
+        return delegate.invoke(target, callback, applyThis, applyArgs, source);
+      } finally {
+        onLeave(zone);
+      }
+    },
+
+    onHasTask:
+        (delegate: ZoneDelegate, current: Zone, target: Zone, hasTaskState: HasTaskState) => {
+          delegate.hasTask(target, hasTaskState);
+          if (current === target) {
+            // We are only interested in hasTask events which originate from our zone
+            // (A child hasTask event is not interesting to us)
+            if (hasTaskState.change == 'microTask') {
+              zone.hasPendingMicrotasks = hasTaskState.microTask;
+              checkStable(zone);
+            } else if (hasTaskState.change == 'macroTask') {
+              zone.hasPendingMacrotasks = hasTaskState.macroTask;
+            }
+          }
+        },
+
+    onHandleError: (delegate: ZoneDelegate, current: Zone, target: Zone, error: any): boolean => {
+      delegate.handleError(target, error);
+      zone.runOutsideAngular(() => zone.onError.emit(error));
+      return false;
+    }
+  });
+}
+
+function onEnter(zone: NgZonePrivate) {
+  zone._nesting++;
+  if (zone.isStable) {
+    zone.isStable = false;
+    zone.onUnstable.emit(null);
+  }
+}
+
+function onLeave(zone: NgZonePrivate) {
+  zone._nesting--;
+  checkStable(zone);
 }
diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
index 706d9e821e..ee5d8ec6cd 100644
--- a/packages/core/test/animation/animation_integration_spec.ts
+++ b/packages/core/test/animation/animation_integration_spec.ts
@@ -5,16 +5,19 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AUTO_STYLE, AnimationEvent, animate, group, keyframes, state, style, transition, trigger} from '@angular/animations';
+import {AUTO_STYLE, AnimationEvent, AnimationOptions, animate, animateChild, group, keyframes, query, state, style, transition, trigger, ɵPRE_STYLE as PRE_STYLE} from '@angular/animations';
 import {AnimationDriver, ɵAnimationEngine, ɵNoopAnimationDriver} from '@angular/animations/browser';
 import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
-import {Component, HostBinding, HostListener, RendererFactory2, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, HostBinding, HostListener, RendererFactory2, ViewChild} from '@angular/core';
 import {ɵDomRendererFactory2} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 
 import {TestBed, fakeAsync, flushMicrotasks} from '../../testing';
 
+const DEFAULT_NAMESPACE_ID = 'id';
+const DEFAULT_COMPONENT_ID = '1';
+
 export function main() {
   // these tests are only mean't to be run within the DOM (for now)
   if (typeof Element == 'undefined') return;
@@ -34,6 +37,161 @@ export function main() {
       });
     });
 
+    describe('fakeAsync testing', () => {
+      it('should only require one flushMicrotasks call to kick off animation callbacks',
+         fakeAsync(() => {
+           @Component({
+             selector: 'cmp',
+             template: `
+            <div [@myAnimation]="exp" (@myAnimation.start)="cb('start')" (@myAnimation.done)="cb('done')"></div>
+          `,
+             animations: [trigger(
+                 'myAnimation',
+                 [transition('* => on, * => off', [animate(1000, style({opacity: 1}))])])]
+           })
+           class Cmp {
+             exp: any = false;
+             status: string = '';
+             cb(status: string) { this.status = status; }
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp = 'on';
+           fixture.detectChanges();
+           expect(cmp.status).toEqual('');
+
+           flushMicrotasks();
+           expect(cmp.status).toEqual('start');
+
+           let player = MockAnimationDriver.log.pop() !;
+           player.finish();
+           expect(cmp.status).toEqual('done');
+
+           cmp.status = '';
+           cmp.exp = 'off';
+           fixture.detectChanges();
+           expect(cmp.status).toEqual('');
+
+           player = MockAnimationDriver.log.pop() !;
+           player.finish();
+           expect(cmp.status).toEqual('');
+           flushMicrotasks();
+           expect(cmp.status).toEqual('done');
+         }));
+    });
+
+    describe('component fixture integration', () => {
+      describe('whenRenderingDone', () => {
+        it('should wait until the animations are finished until continuing', fakeAsync(() => {
+             @Component({
+               selector: 'cmp',
+               template: `
+              <div [@myAnimation]="exp"></div>
+            `,
+               animations: [trigger(
+                   'myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])])]
+             })
+             class Cmp {
+               exp: any = false;
+             }
+
+             TestBed.configureTestingModule({declarations: [Cmp]});
+             const engine = TestBed.get(ɵAnimationEngine);
+             const fixture = TestBed.createComponent(Cmp);
+             const cmp = fixture.componentInstance;
+
+             let isDone = false;
+             fixture.whenRenderingDone().then(() => isDone = true);
+             expect(isDone).toBe(false);
+
+             cmp.exp = 'on';
+             fixture.detectChanges();
+             engine.flush();
+             expect(isDone).toBe(false);
+
+             const players = engine.players;
+             expect(players.length).toEqual(1);
+             players[0].finish();
+             expect(isDone).toBe(false);
+
+             flushMicrotasks();
+             expect(isDone).toBe(true);
+           }));
+
+        it('should wait for a noop animation to finish before continuing', fakeAsync(() => {
+             @Component({
+               selector: 'cmp',
+               template: `
+              <div [@myAnimation]="exp"></div>
+            `,
+               animations: [trigger(
+                   'myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])])]
+             })
+             class Cmp {
+               exp: any = false;
+             }
+
+             TestBed.configureTestingModule({
+               providers: [{provide: AnimationDriver, useClass: ɵNoopAnimationDriver}],
+               declarations: [Cmp]
+             });
+
+             const engine = TestBed.get(ɵAnimationEngine);
+             const fixture = TestBed.createComponent(Cmp);
+             const cmp = fixture.componentInstance;
+
+             let isDone = false;
+             fixture.whenRenderingDone().then(() => isDone = true);
+             expect(isDone).toBe(false);
+
+             cmp.exp = 'off';
+             fixture.detectChanges();
+             engine.flush();
+             expect(isDone).toBe(false);
+
+             flushMicrotasks();
+             expect(isDone).toBe(true);
+           }));
+
+        it('should wait for active animations to finish even if they have already started',
+           fakeAsync(() => {
+             @Component({
+               selector: 'cmp',
+               template: `
+                <div [@myAnimation]="exp"></div>
+              `,
+               animations: [trigger(
+                   'myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])])]
+             })
+             class Cmp {
+               exp: any = false;
+             }
+
+             TestBed.configureTestingModule({declarations: [Cmp]});
+             const engine = TestBed.get(ɵAnimationEngine);
+             const fixture = TestBed.createComponent(Cmp);
+             const cmp = fixture.componentInstance;
+             cmp.exp = 'on';
+             fixture.detectChanges();
+             engine.flush();
+
+             const players = engine.players;
+             expect(players.length).toEqual(1);
+
+             let isDone = false;
+             fixture.whenRenderingDone().then(() => isDone = true);
+             flushMicrotasks();
+             expect(isDone).toBe(false);
+
+             players[0].finish();
+             flushMicrotasks();
+             expect(isDone).toBe(true);
+           }));
+      });
+    });
+
     describe('animation triggers', () => {
       it('should trigger a state change animation from void => state', () => {
         @Component({
@@ -65,6 +223,123 @@ export function main() {
         ]);
       });
 
+      it('should allow a state value to be `0`', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+            <div [@myAnimation]="exp"></div>
+          `,
+          animations: [trigger(
+              'myAnimation',
+              [
+                transition(
+                    '0 => 1', [style({height: '0px'}), animate(1234, style({height: '100px'}))]),
+                transition(
+                    '* => 1', [style({width: '0px'}), animate(4567, style({width: '100px'}))])
+              ])]
+        })
+        class Cmp {
+          exp: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 0;
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = 1;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().length).toEqual(1);
+        const player = getLog().pop() !;
+        expect(player.duration).toEqual(1234);
+      });
+
+      it('should always cancel the previous transition if a follow-up transition is not matched',
+         fakeAsync(() => {
+           @Component({
+             selector: 'if-cmp',
+             template: `
+          <div [@myAnimation]="exp" (@myAnimation.start)="callback($event)" (@myAnimation.done)="callback($event)"></div>
+        `,
+             animations: [trigger(
+                 'myAnimation',
+                 [transition(
+                     'a => b', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
+           })
+           class Cmp {
+             exp: any;
+             startEvent: any;
+             doneEvent: any;
+
+             callback(event: any) {
+               if (event.phaseName == 'done') {
+                 this.doneEvent = event;
+               } else {
+                 this.startEvent = event;
+               }
+             }
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = 'a';
+           fixture.detectChanges();
+           engine.flush();
+           expect(getLog().length).toEqual(0);
+           expect(engine.players.length).toEqual(0);
+
+           flushMicrotasks();
+           expect(cmp.startEvent.toState).toEqual('a');
+           expect(cmp.startEvent.totalTime).toEqual(0);
+           expect(cmp.startEvent.toState).toEqual('a');
+           expect(cmp.startEvent.totalTime).toEqual(0);
+           resetLog();
+
+           cmp.exp = 'b';
+           fixture.detectChanges();
+           engine.flush();
+
+           const players = getLog();
+           expect(players.length).toEqual(1);
+           expect(engine.players.length).toEqual(1);
+
+           flushMicrotasks();
+           expect(cmp.startEvent.toState).toEqual('b');
+           expect(cmp.startEvent.totalTime).toEqual(500);
+           expect(cmp.startEvent.toState).toEqual('b');
+           expect(cmp.startEvent.totalTime).toEqual(500);
+           resetLog();
+
+           let completed = false;
+           players[0].onDone(() => completed = true);
+
+           cmp.exp = 'c';
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(engine.players.length).toEqual(0);
+           expect(getLog().length).toEqual(0);
+
+           flushMicrotasks();
+           expect(cmp.startEvent.toState).toEqual('c');
+           expect(cmp.startEvent.totalTime).toEqual(0);
+           expect(cmp.startEvent.toState).toEqual('c');
+           expect(cmp.startEvent.totalTime).toEqual(0);
+
+           expect(completed).toBe(true);
+         }));
+
       it('should only turn a view removal as into `void` state transition', () => {
         @Component({
           selector: 'if-cmp',
@@ -90,6 +365,14 @@ export function main() {
         const engine = TestBed.get(ɵAnimationEngine);
         const fixture = TestBed.createComponent(Cmp);
         const cmp = fixture.componentInstance;
+
+        function resetState() {
+          cmp.exp2 = 'something';
+          fixture.detectChanges();
+          engine.flush();
+          resetLog();
+        }
+
         cmp.exp1 = true;
         cmp.exp2 = null;
 
@@ -100,6 +383,7 @@ export function main() {
           {offset: 0, width: '0px'}, {offset: 1, width: '100px'}
         ]);
 
+        resetState();
         cmp.exp2 = false;
 
         fixture.detectChanges();
@@ -109,6 +393,7 @@ export function main() {
           {offset: 0, height: '0px'}, {offset: 1, height: '100px'}
         ]);
 
+        resetState();
         cmp.exp2 = 0;
 
         fixture.detectChanges();
@@ -118,6 +403,7 @@ export function main() {
           {offset: 0, height: '0px'}, {offset: 1, height: '100px'}
         ]);
 
+        resetState();
         cmp.exp2 = '';
 
         fixture.detectChanges();
@@ -127,6 +413,7 @@ export function main() {
           {offset: 0, height: '0px'}, {offset: 1, height: '100px'}
         ]);
 
+        resetState();
         cmp.exp2 = undefined;
 
         fixture.detectChanges();
@@ -136,6 +423,7 @@ export function main() {
           {offset: 0, height: '0px'}, {offset: 1, height: '100px'}
         ]);
 
+        resetState();
         cmp.exp1 = false;
         cmp.exp2 = 'abc';
 
@@ -285,7 +573,7 @@ export function main() {
                {opacity: '0', offset: 1},
              ]);
 
-             flushMicrotasks();
+             player.finish();
              expect(fixture.debugElement.nativeElement.children.length).toBe(0);
            }));
 
@@ -335,6 +623,7 @@ export function main() {
                {opacity: '0', offset: 1},
              ]);
 
+             player.finish();
              flushMicrotasks();
              expect(fixture.debugElement.nativeElement.children.length).toBe(0);
            }));
@@ -387,15 +676,17 @@ export function main() {
 
              const [p1, p2] = getLog();
              expect(p1.keyframes).toEqual([
-               {height: '100px', offset: 0},
-               {height: '0px', offset: 1},
-             ]);
-
-             expect(p2.keyframes).toEqual([
                {width: '100px', offset: 0},
                {width: '0px', offset: 1},
              ]);
 
+             expect(p2.keyframes).toEqual([
+               {height: '100px', offset: 0},
+               {height: '0px', offset: 1},
+             ]);
+
+             p1.finish();
+             p2.finish();
              flushMicrotasks();
              expect(fixture.debugElement.nativeElement.children.length).toBe(0);
            }));
@@ -504,10 +795,79 @@ export function main() {
            expect(players.length).toEqual(3);
            const [p1, p2, p3] = players;
            expect(p1.previousStyles).toEqual({opacity: AUTO_STYLE});
-           expect(p2.previousStyles).toEqual({});
+           expect(p2.previousStyles).toEqual({opacity: AUTO_STYLE});
            expect(p3.previousStyles).toEqual({});
          });
 
+      it('should provide the styling of previous players that are grouped', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+          animations: [trigger(
+              'myAnimation',
+              [
+                transition(
+                    '1 => 2',
+                    [
+                      group([
+                        animate(500, style({'width': '100px'})),
+                        animate(500, style({'height': '100px'})),
+                      ]),
+                      animate(500, keyframes([
+                        style({'opacity': '0'}),
+                        style({'opacity': '1'})
+                      ]))
+                    ]),
+                transition(
+                    '2 => 3',
+                    [
+                      style({'opacity': '0'}),
+                      animate(500, style({'opacity': '1'})),
+                    ]),
+              ])],
+        })
+        class Cmp {
+          exp: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        fixture.detectChanges();
+        engine.flush();
+
+        cmp.exp = '1';
+        fixture.detectChanges();
+        engine.flush();
+        expect(getLog().length).toEqual(0);
+        resetLog();
+
+        cmp.exp = '2';
+        fixture.detectChanges();
+        engine.flush();
+        expect(getLog().length).toEqual(3);
+        resetLog();
+
+        cmp.exp = '3';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(1);
+        const player = players[0] as MockAnimationPlayer;
+        const pp = player.previousPlayers as MockAnimationPlayer[];
+
+        expect(pp.length).toEqual(3);
+        expect(pp[0].currentSnapshot).toEqual({width: AUTO_STYLE});
+        expect(pp[1].currentSnapshot).toEqual({height: AUTO_STYLE});
+        expect(pp[2].currentSnapshot).toEqual({opacity: AUTO_STYLE});
+      });
+
       it('should properly balance styles between states even if there are no destination state styles',
          () => {
            @Component({
@@ -621,7 +981,11 @@ export function main() {
           template: `
             <div #green @green></div>
           `,
-          animations: [trigger('green', [state('*', style({backgroundColor: 'green'}))])]
+          animations: [trigger(
+              'green',
+              [
+                state('*', style({backgroundColor: 'green'})), transition('* => *', animate(500))
+              ])]
         })
         class Cmp {
           @ViewChild('green') public element: any;
@@ -635,7 +999,7 @@ export function main() {
         fixture.detectChanges();
         engine.flush();
 
-        const player = engine.activePlayers.pop();
+        const player = engine.players.pop();
         player.finish();
 
         expect(getDOM().hasStyle(cmp.element.nativeElement, 'background-color', 'green'))
@@ -774,13 +1138,506 @@ export function main() {
         fixture.detectChanges();
         engine.flush();
         expect(getLog().length).toEqual(0);
+      });
+
+      it('should cancel all active inner child animations when a parent removal animation is set to go',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div *ngIf="exp1" @parent>
+              <div [@child]="exp2" class="child1"></div>
+              <div [@child]="exp2" class="child2"></div>
+            </div>
+          `,
+             animations: [
+               trigger('parent', [transition(
+                                     ':leave',
+                                     [style({opacity: 0}), animate(1000, style({opacity: 1}))])]),
+               trigger('child', [transition(
+                                    'a => b',
+                                    [style({opacity: 0}), animate(1000, style({opacity: 1}))])])
+             ]
+           })
+           class Cmp {
+             public exp1: any;
+             public exp2: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp1 = true;
+           cmp.exp2 = 'a';
+           fixture.detectChanges();
+           engine.flush();
+           resetLog();
+
+           cmp.exp2 = 'b';
+           fixture.detectChanges();
+           engine.flush();
+
+           let players = getLog();
+           expect(players.length).toEqual(2);
+           const [p1, p2] = players;
+
+           let count = 0;
+           p1.onDone(() => count++);
+           p2.onDone(() => count++);
+
+           cmp.exp1 = false;
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(count).toEqual(2);
+         });
+
+      it('should destroy inner animations when a parent node is set for removal', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div #parent class="parent">
+              <div [@child]="exp" class="child1"></div>
+              <div [@child]="exp" class="child2"></div>
+            </div>
+          `,
+          animations: [trigger(
+              'child',
+              [transition('a => b', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])]
+        })
+        class Cmp {
+          public exp: any;
+
+          @ViewChild('parent') public parentElement: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine) as ɵAnimationEngine;
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        const someTrigger = trigger('someTrigger', []);
+        const hostElement = fixture.nativeElement;
+        engine.register(DEFAULT_NAMESPACE_ID, hostElement);
+        engine.registerTrigger(
+            DEFAULT_COMPONENT_ID, DEFAULT_NAMESPACE_ID, hostElement, someTrigger.name, someTrigger);
+
+        cmp.exp = 'a';
+        fixture.detectChanges();
+        engine.flush();
         resetLog();
+
+        cmp.exp = 'b';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+        const [p1, p2] = players;
+
+        let count = 0;
+        p1.onDone(() => count++);
+        p2.onDone(() => count++);
+
+        engine.onRemove(DEFAULT_NAMESPACE_ID, cmp.parentElement.nativeElement, null);
+        expect(count).toEqual(2);
+      });
+
+      it('should allow inner removals to happen when a non removal-based parent animation is set to animate',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div #parent [@parent]="exp1" class="parent">
+              <div #child *ngIf="exp2" class="child"></div>
+            </div>
+          `,
+             animations: [trigger(
+                 'parent',
+                 [transition(
+                     'a => b', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])]
+           })
+           class Cmp {
+             public exp1: any;
+             public exp2: any;
+
+             @ViewChild('parent') public parent: any;
+
+             @ViewChild('child') public child: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp1 = 'a';
+           cmp.exp2 = true;
+           fixture.detectChanges();
+           engine.flush();
+           resetLog();
+
+           cmp.exp1 = 'b';
+           fixture.detectChanges();
+           engine.flush();
+
+           const player = getLog()[0];
+           const p = cmp.parent.nativeElement;
+           const c = cmp.child.nativeElement;
+
+           expect(p.contains(c)).toBeTruthy();
+
+           cmp.exp2 = false;
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(p.contains(c)).toBeFalsy();
+
+           player.finish();
+
+           expect(p.contains(c)).toBeFalsy();
+         });
+
+      it('should make inner removals wait until a parent based removal animation has finished',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div #parent *ngIf="exp1" @parent class="parent">
+              <div #child1 *ngIf="exp2" class="child1"></div>
+              <div #child2 *ngIf="exp2" class="child2"></div>
+            </div>
+          `,
+             animations: [trigger(
+                 'parent',
+                 [transition(
+                     ':leave', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])]
+           })
+           class Cmp {
+             public exp1: any;
+             public exp2: any;
+
+             @ViewChild('parent') public parent: any;
+
+             @ViewChild('child1') public child1Elm: any;
+
+             @ViewChild('child2') public child2Elm: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp1 = true;
+           cmp.exp2 = true;
+           fixture.detectChanges();
+           engine.flush();
+           resetLog();
+
+           const p = cmp.parent.nativeElement;
+           const c1 = cmp.child1Elm.nativeElement;
+           const c2 = cmp.child2Elm.nativeElement;
+
+           cmp.exp1 = false;
+           cmp.exp2 = false;
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(p.contains(c1)).toBeTruthy();
+           expect(p.contains(c2)).toBeTruthy();
+
+           cmp.exp2 = false;
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(p.contains(c1)).toBeTruthy();
+           expect(p.contains(c2)).toBeTruthy();
+         });
+
+      it('should detect trigger changes based on object.value properties', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="{value:exp}"></div>
+          `,
+          animations: [
+            trigger(
+                'myAnimation',
+                [
+                  transition('* => 1', [animate(1234, style({opacity: 0}))]),
+                  transition('* => 2', [animate(5678, style({opacity: 0}))]),
+                ]),
+          ]
+        })
+        class Cmp {
+          public exp: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = '1';
+        fixture.detectChanges();
+        engine.flush();
+        let players = getLog();
+        expect(players.length).toEqual(1);
+        expect(players[0].duration).toEqual(1234);
+        resetLog();
+
+        cmp.exp = '2';
+        fixture.detectChanges();
+        engine.flush();
+        players = getLog();
+        expect(players.length).toEqual(1);
+        expect(players[0].duration).toEqual(5678);
+      });
+
+      it('should not render animations when the object expression value is the same as it was previously',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div [@myAnimation]="{value:exp,params:params}"></div>
+          `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     transition('* => *', [animate(1234, style({opacity: 0}))]),
+                   ]),
+             ]
+           })
+           class Cmp {
+             public exp: any;
+             public params: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = '1';
+           cmp.params = {};
+           fixture.detectChanges();
+           engine.flush();
+           let players = getLog();
+           expect(players.length).toEqual(1);
+           expect(players[0].duration).toEqual(1234);
+           resetLog();
+
+           cmp.exp = '1';
+           cmp.params = {};
+           fixture.detectChanges();
+           engine.flush();
+           players = getLog();
+           expect(players.length).toEqual(0);
+         });
+
+      it('should substitute in values if the provided state match is an object with values', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp"></div>
+          `,
+          animations: [trigger(
+              'myAnimation',
+              [transition(
+                  'a => b',
+                  [style({opacity: '{{ start }}'}), animate(1000, style({opacity: '{{ end }}'}))],
+                  buildParams({start: '0', end: '1'}))])]
+        })
+        class Cmp {
+          public exp: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = {value: 'a'};
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = {value: 'b', params: {start: .3, end: .6}};
+        fixture.detectChanges();
+        engine.flush();
+        const player = getLog().pop() !;
+        expect(player.keyframes).toEqual([
+          {opacity: '0.3', offset: 0}, {opacity: '0.6', offset: 1}
+        ]);
+      });
+
+      it('should not flush animations twice when an inner component runs change detection', () => {
+        @Component({
+          selector: 'outer-cmp',
+          template: `
+            <div *ngIf="exp" @outer></div>
+            <inner-cmp #inner></inner-cmp>
+          `,
+          animations: [trigger(
+              'outer',
+              [transition(':enter', [style({opacity: 0}), animate('1s', style({opacity: 1}))])])]
+        })
+        class OuterCmp {
+          @ViewChild('inner') public inner: any;
+          public exp: any = null;
+
+          update() { this.exp = 'go'; }
+
+          ngDoCheck() {
+            if (this.exp == 'go') {
+              this.inner.update();
+            }
+          }
+        }
+
+        @Component({
+          selector: 'inner-cmp',
+          template: `
+            <div *ngIf="exp" @inner></div>
+          `,
+          animations: [trigger('inner', [transition(
+                                            ':enter',
+                                            [
+                                              style({opacity: 0}),
+                                              animate('1s', style({opacity: 1})),
+                                            ])])]
+        })
+        class InnerCmp {
+          public exp: any;
+          constructor(private _ref: ChangeDetectorRef) {}
+          update() {
+            this.exp = 'go';
+            this._ref.detectChanges();
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [OuterCmp, InnerCmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(OuterCmp);
+        const cmp = fixture.componentInstance;
+        fixture.detectChanges();
+        expect(getLog()).toEqual([]);
+
+        cmp.update();
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+      });
+
+      describe('transition aliases', () => {
+        describe(':increment', () => {
+          it('should detect when a value has incremented', () => {
+            @Component({
+              selector: 'if-cmp',
+              template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+              animations: [
+                trigger(
+                    'myAnimation',
+                    [
+                      transition(
+                          ':increment',
+                          [
+                            animate(1234, style({background: 'red'})),
+                          ]),
+                    ]),
+              ]
+            })
+            class Cmp {
+              exp: number = 0;
+            }
+
+            TestBed.configureTestingModule({declarations: [Cmp]});
+            const fixture = TestBed.createComponent(Cmp);
+            const cmp = fixture.componentInstance;
+            fixture.detectChanges();
+            let players = getLog();
+            expect(players.length).toEqual(0);
+
+            cmp.exp++;
+            fixture.detectChanges();
+            players = getLog();
+            expect(players.length).toEqual(1);
+            expect(players[0].duration).toEqual(1234);
+            resetLog();
+
+            cmp.exp = 5;
+            fixture.detectChanges();
+            players = getLog();
+            expect(players.length).toEqual(1);
+            expect(players[0].duration).toEqual(1234);
+          });
+        });
+
+        describe(':decrement', () => {
+          it('should detect when a value has decremented', () => {
+            @Component({
+              selector: 'if-cmp',
+              template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+              animations: [
+                trigger(
+                    'myAnimation',
+                    [
+                      transition(
+                          ':decrement',
+                          [
+                            animate(1234, style({background: 'red'})),
+                          ]),
+                    ]),
+              ]
+            })
+            class Cmp {
+              exp: number = 5;
+            }
+
+            TestBed.configureTestingModule({declarations: [Cmp]});
+            const fixture = TestBed.createComponent(Cmp);
+            const cmp = fixture.componentInstance;
+            fixture.detectChanges();
+            let players = getLog();
+            expect(players.length).toEqual(0);
+
+            cmp.exp--;
+            fixture.detectChanges();
+            players = getLog();
+            expect(players.length).toEqual(1);
+            expect(players[0].duration).toEqual(1234);
+            resetLog();
+
+            cmp.exp = 0;
+            fixture.detectChanges();
+            players = getLog();
+            expect(players.length).toEqual(1);
+            expect(players[0].duration).toEqual(1234);
+          });
+        });
       });
     });
 
     describe('animation listeners', () => {
       it('should trigger a `start` state change listener for when the animation changes state from void => state',
-         () => {
+         fakeAsync(() => {
            @Component({
              selector: 'if-cmp',
              template: `
@@ -806,17 +1663,17 @@ export function main() {
            const cmp = fixture.componentInstance;
            cmp.exp = 'true';
            fixture.detectChanges();
-           engine.flush();
+           flushMicrotasks();
 
            expect(cmp.event.triggerName).toEqual('myAnimation');
            expect(cmp.event.phaseName).toEqual('start');
            expect(cmp.event.totalTime).toEqual(500);
            expect(cmp.event.fromState).toEqual('void');
            expect(cmp.event.toState).toEqual('true');
-         });
+         }));
 
       it('should trigger a `done` state change listener for when the animation changes state from a => b',
-         () => {
+         fakeAsync(() => {
            @Component({
              selector: 'if-cmp',
              template: `
@@ -846,75 +1703,79 @@ export function main() {
 
            expect(cmp.event).toBeFalsy();
 
-           const player = engine.activePlayers.pop();
+           const player = engine.players.pop();
            player.finish();
+           flushMicrotasks();
 
            expect(cmp.event.triggerName).toEqual('myAnimation123');
            expect(cmp.event.phaseName).toEqual('done');
            expect(cmp.event.totalTime).toEqual(999);
            expect(cmp.event.fromState).toEqual('void');
            expect(cmp.event.toState).toEqual('b');
-         });
+         }));
 
-      it('should handle callbacks for multiple triggers running simultaneously', () => {
-        @Component({
-          selector: 'if-cmp',
-          template: `
+      it('should handle callbacks for multiple triggers running simultaneously', fakeAsync(() => {
+           @Component({
+             selector: 'if-cmp',
+             template: `
           <div [@ani1]="exp1" (@ani1.done)="callback1($event)"></div>
           <div [@ani2]="exp2" (@ani2.done)="callback2($event)"></div>
         `,
-          animations: [
-            trigger(
-                'ani1',
-                [
-                  transition(
-                      '* => a', [style({'opacity': '0'}), animate(999, style({'opacity': '1'}))]),
-                ]),
-            trigger(
-                'ani2',
-                [
-                  transition(
-                      '* => b', [style({'width': '0px'}), animate(999, style({'width': '100px'}))]),
-                ])
-          ],
-        })
-        class Cmp {
-          exp1: any = false;
-          exp2: any = false;
-          event1: AnimationEvent;
-          event2: AnimationEvent;
-          callback1 = (event: any) => { this.event1 = event; };
-          callback2 = (event: any) => { this.event2 = event; };
-        }
+             animations: [
+               trigger(
+                   'ani1',
+                   [
+                     transition(
+                         '* => a',
+                         [style({'opacity': '0'}), animate(999, style({'opacity': '1'}))]),
+                   ]),
+               trigger(
+                   'ani2',
+                   [
+                     transition(
+                         '* => b',
+                         [style({'width': '0px'}), animate(999, style({'width': '100px'}))]),
+                   ])
+             ],
+           })
+           class Cmp {
+             exp1: any = false;
+             exp2: any = false;
+             event1: AnimationEvent;
+             event2: AnimationEvent;
+             callback1 = (event: any) => { this.event1 = event; };
+             callback2 = (event: any) => { this.event2 = event; };
+           }
 
-        TestBed.configureTestingModule({declarations: [Cmp]});
+           TestBed.configureTestingModule({declarations: [Cmp]});
 
-        const engine = TestBed.get(ɵAnimationEngine);
-        const fixture = TestBed.createComponent(Cmp);
-        const cmp = fixture.componentInstance;
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
 
-        cmp.exp1 = 'a';
-        cmp.exp2 = 'b';
-        fixture.detectChanges();
-        engine.flush();
+           cmp.exp1 = 'a';
+           cmp.exp2 = 'b';
+           fixture.detectChanges();
+           engine.flush();
 
-        expect(cmp.event1).toBeFalsy();
-        expect(cmp.event2).toBeFalsy();
+           expect(cmp.event1).toBeFalsy();
+           expect(cmp.event2).toBeFalsy();
 
-        const player1 = engine.activePlayers[0];
-        const player2 = engine.activePlayers[1];
+           const player1 = engine.players[0];
+           const player2 = engine.players[1];
 
-        player1.finish();
-        expect(cmp.event1.triggerName).toBeTruthy('ani1');
-        expect(cmp.event2).toBeFalsy();
+           player1.finish();
+           player2.finish();
+           expect(cmp.event1).toBeFalsy();
+           expect(cmp.event2).toBeFalsy();
 
-        player2.finish();
-        expect(cmp.event1.triggerName).toBeTruthy('ani1');
-        expect(cmp.event2.triggerName).toBeTruthy('ani2');
-      });
+           flushMicrotasks();
+           expect(cmp.event1.triggerName).toBeTruthy('ani1');
+           expect(cmp.event2.triggerName).toBeTruthy('ani2');
+         }));
 
       it('should handle callbacks for multiple triggers running simultaneously on the same element',
-         () => {
+         fakeAsync(() => {
            @Component({
              selector: 'if-cmp',
              template: `
@@ -960,20 +1821,21 @@ export function main() {
            expect(cmp.event1).toBeFalsy();
            expect(cmp.event2).toBeFalsy();
 
-           const player1 = engine.activePlayers[0];
-           const player2 = engine.activePlayers[1];
+           const player1 = engine.players[0];
+           const player2 = engine.players[1];
 
            player1.finish();
-           expect(cmp.event1.triggerName).toBeTruthy('ani1');
+           player2.finish();
+           expect(cmp.event1).toBeFalsy();
            expect(cmp.event2).toBeFalsy();
 
-           player2.finish();
+           flushMicrotasks();
            expect(cmp.event1.triggerName).toBeTruthy('ani1');
            expect(cmp.event2.triggerName).toBeTruthy('ani2');
-         });
+         }));
 
       it('should trigger a state change listener for when the animation changes state from void => state on the host element',
-         () => {
+         fakeAsync(() => {
            @Component({
              selector: 'my-cmp',
              template: `...`,
@@ -1000,14 +1862,14 @@ export function main() {
            const cmp = fixture.componentInstance;
            cmp.exp = 'TRUE';
            fixture.detectChanges();
-           engine.flush();
+           flushMicrotasks();
 
            expect(cmp.event.triggerName).toEqual('myAnimation2');
            expect(cmp.event.phaseName).toEqual('start');
            expect(cmp.event.totalTime).toEqual(1000);
            expect(cmp.event.fromState).toEqual('void');
            expect(cmp.event.toState).toEqual('TRUE');
-         });
+         }));
 
       it('should always fire callbacks even when a transition is not detected', fakeAsync(() => {
            @Component({
@@ -1044,7 +1906,8 @@ export function main() {
            expect(cmp.log).toEqual(['start => b', 'done => b']);
          }));
 
-      it('should fire callback events for leave animations', fakeAsync(() => {
+      it('should fire callback events for leave animations even if there is no leave transition',
+         fakeAsync(() => {
            @Component({
              selector: 'my-cmp',
              template: `
@@ -1082,6 +1945,675 @@ export function main() {
 
            expect(cmp.log).toEqual(['start => void', 'done => void']);
          }));
+
+      it('should fire callbacks on a sub animation once it starts and finishes', fakeAsync(() => {
+           @Component({
+             selector: 'my-cmp',
+             template: `
+              <div class="parent"
+                  [@parent]="exp1"
+                  (@parent.start)="cb('parent-start',$event)"
+                  (@parent.done)="cb('parent-done', $event)">
+                <div class="child"
+                  [@child]="exp2"
+                  (@child.start)="cb('child-start',$event)"
+                  (@child.done)="cb('child-done', $event)"></div>
+              </div>
+            `,
+             animations: [
+               trigger(
+                   'parent',
+                   [
+                     transition(
+                         '* => go',
+                         [
+                           style({width: '0px'}),
+                           animate(1000, style({width: '100px'})),
+                           query(
+                               '.child',
+                               [
+                                 animateChild({duration: '1s'}),
+                               ]),
+                           animate(1000, style({width: '0px'})),
+                         ]),
+                   ]),
+               trigger(
+                   'child',
+                   [
+                     transition(
+                         '* => go',
+                         [
+                           style({height: '0px'}),
+                           animate(1000, style({height: '100px'})),
+                         ]),
+                   ])
+             ]
+           })
+           class Cmp {
+             log: string[] = [];
+             exp1: string;
+             exp2: string;
+
+             cb(name: string, event: AnimationEvent) { this.log.push(name); }
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp1 = 'go';
+           cmp.exp2 = 'go';
+           fixture.detectChanges();
+           engine.flush();
+           flushMicrotasks();
+
+           expect(cmp.log).toEqual(['parent-start', 'child-start']);
+           cmp.log = [];
+
+           const players = getLog();
+           expect(players.length).toEqual(3);
+           const [p1, p2, p3] = players;
+
+           p1.finish();
+           flushMicrotasks();
+           expect(cmp.log).toEqual([]);
+
+           p2.finish();
+           flushMicrotasks();
+           expect(cmp.log).toEqual([]);
+
+           p3.finish();
+           flushMicrotasks();
+           expect(cmp.log).toEqual(['parent-done', 'child-done']);
+         }));
+
+      it('should fire callbacks and collect the correct the totalTime and element details for any queried sub animations',
+         fakeAsync(
+             () => {
+               @Component({
+          selector: 'my-cmp',
+          template: `
+              <div class="parent" [@parent]="exp" (@parent.done)="cb('all','done', $event)">
+                <div *ngFor="let item of items"
+                     class="item item-{{ item }}"
+                     @child
+                     (@child.start)="cb('c-' + item, 'start', $event)"
+                     (@child.done)="cb('c-' + item, 'done', $event)">
+                  {{ item }}
+                </div>
+              </div>
+            `,
+          animations: [
+            trigger('parent', [
+              transition('* => go', [
+                style({ opacity: 0 }),
+                animate('1s', style({ opacity: 1 })),
+                query('.item', [
+                  style({ opacity: 0 }),
+                  animate(1000, style({ opacity: 1 }))
+                ]),
+                query('.item', [
+                  animateChild({ duration: '1.8s', delay: '300ms' })
+                ])
+              ])
+            ]),
+            trigger('child', [
+              transition(':enter', [
+                style({ opacity: 0 }),
+                animate(1500, style({ opactiy: 1 }))
+              ])
+            ])
+          ]
+        })
+        class Cmp {
+                 log: string[] = [];
+                 events: {[name: string]: any} = {};
+                 exp: string;
+                 items: any = [0, 1, 2, 3];
+
+                 cb(name: string, phase: string, event: AnimationEvent) {
+                   this.log.push(name + '-' + phase);
+                   this.events[name] = event;
+                 }
+               }
+
+               TestBed.configureTestingModule({declarations: [Cmp]});
+
+               const engine = TestBed.get(ɵAnimationEngine);
+               const fixture = TestBed.createComponent(Cmp);
+               const cmp = fixture.componentInstance;
+               cmp.exp = 'go';
+               fixture.detectChanges();
+               engine.flush();
+               flushMicrotasks();
+
+               expect(cmp.log).toEqual(['c-0-start', 'c-1-start', 'c-2-start', 'c-3-start']);
+               cmp.log = [];
+
+               const players = getLog();
+               // 1 + 4 + 4 = 9 players
+               expect(players.length).toEqual(9);
+
+               const [pA, pq1a, pq1b, pq1c, pq1d, pq2a, pq2b, pq2c, pq2d] = getLog();
+               pA.finish();
+               pq1a.finish();
+               pq1b.finish();
+               pq1c.finish();
+               pq1d.finish();
+               flushMicrotasks();
+
+               expect(cmp.log).toEqual([]);
+               pq2a.finish();
+               pq2b.finish();
+               pq2c.finish();
+               pq2d.finish();
+               flushMicrotasks();
+
+               expect(cmp.log).toEqual(
+                   ['all-done', 'c-0-done', 'c-1-done', 'c-2-done', 'c-3-done']);
+
+               expect(cmp.events['c-0'].totalTime).toEqual(4100);  // 1000 + 1000 + 1800 + 300
+               expect(cmp.events['c-0'].element.innerText.trim()).toEqual('0');
+               expect(cmp.events['c-1'].totalTime).toEqual(4100);
+               expect(cmp.events['c-1'].element.innerText.trim()).toEqual('1');
+               expect(cmp.events['c-2'].totalTime).toEqual(4100);
+               expect(cmp.events['c-2'].element.innerText.trim()).toEqual('2');
+               expect(cmp.events['c-3'].totalTime).toEqual(4100);
+               expect(cmp.events['c-3'].element.innerText.trim()).toEqual('3');
+             }));
+    });
+
+    describe('animation control flags', () => {
+      describe('[@.disabled]', () => {
+        it('should disable child animations when set to true', () => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableExp">
+                <div [@myAnimation]="exp"></div>
+              </div>
+            `,
+            animations: [
+              trigger(
+                  'myAnimation',
+                  [
+                    transition(
+                        '* => 1, * => 2',
+                        [
+                          animate(1234, style({width: '100px'})),
+                        ]),
+                  ]),
+            ]
+          })
+          class Cmp {
+            exp: any = false;
+            disableExp = false;
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          resetLog();
+
+          cmp.disableExp = true;
+          cmp.exp = '1';
+          fixture.detectChanges();
+
+          let players = getLog();
+          expect(players.length).toEqual(0);
+
+          cmp.disableExp = false;
+          cmp.exp = '2';
+          fixture.detectChanges();
+
+          players = getLog();
+          expect(players.length).toEqual(1);
+          expect(players[0].totalTime).toEqual(1234);
+        });
+
+        it('should not disable animations for the element that they are disabled on', () => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableExp" [@myAnimation]="exp"></div>
+            `,
+            animations: [
+              trigger(
+                  'myAnimation',
+                  [
+                    transition(
+                        '* => 1, * => 2',
+                        [
+                          animate(1234, style({width: '100px'})),
+                        ]),
+                  ]),
+            ]
+          })
+          class Cmp {
+            exp: any = false;
+            disableExp = false;
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          resetLog();
+
+          cmp.disableExp = true;
+          cmp.exp = '1';
+          fixture.detectChanges();
+
+          let players = getLog();
+          expect(players.length).toEqual(1);
+          expect(players[0].totalTime).toEqual(1234);
+          resetLog();
+
+          cmp.disableExp = false;
+          cmp.exp = '2';
+          fixture.detectChanges();
+
+          players = getLog();
+          expect(players.length).toEqual(1);
+          expect(players[0].totalTime).toEqual(1234);
+        });
+
+        it('should respect inner disabled nodes once a parent becomes enabled', () => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableParentExp">
+                <div [@.disabled]="disableChildExp">
+                  <div [@myAnimation]="exp"></div>
+                </div>
+              </div>
+            `,
+            animations: [trigger(
+                'myAnimation',
+                [transition('* => 1, * => 2, * => 3', [animate(1234, style({width: '100px'}))])])]
+          })
+          class Cmp {
+            disableParentExp = false;
+            disableChildExp = false;
+            exp = '';
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          resetLog();
+
+          cmp.disableParentExp = true;
+          cmp.disableChildExp = true;
+          cmp.exp = '1';
+          fixture.detectChanges();
+
+          let players = getLog();
+          expect(players.length).toEqual(0);
+
+          cmp.disableParentExp = false;
+          cmp.exp = '2';
+          fixture.detectChanges();
+
+          players = getLog();
+          expect(players.length).toEqual(0);
+
+          cmp.disableChildExp = false;
+          cmp.exp = '3';
+          fixture.detectChanges();
+
+          players = getLog();
+          expect(players.length).toEqual(1);
+        });
+
+        it('should properly handle dom operations when disabled', () => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableExp" #parent>
+                <div *ngIf="exp" @myAnimation></div>
+              </div>
+            `,
+            animations: [
+              trigger(
+                  'myAnimation',
+                  [
+                    transition(
+                        ':enter',
+                        [
+                          style({opacity: 0}),
+                          animate(1234, style({opacity: 1})),
+                        ]),
+                    transition(
+                        ':leave',
+                        [
+                          animate(1234, style({opacity: 0})),
+                        ]),
+                  ]),
+            ]
+          })
+          class Cmp {
+            @ViewChild('parent') public parentElm: any;
+            disableExp = false;
+            exp = false;
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          cmp.disableExp = true;
+          fixture.detectChanges();
+          resetLog();
+
+          const parent = cmp.parentElm !.nativeElement;
+
+          cmp.exp = true;
+          fixture.detectChanges();
+          expect(getLog().length).toEqual(0);
+          expect(parent.childElementCount).toEqual(1);
+
+          cmp.exp = false;
+          fixture.detectChanges();
+          expect(getLog().length).toEqual(0);
+          expect(parent.childElementCount).toEqual(0);
+        });
+
+        it('should properly resolve animation event listeners when disabled', fakeAsync(() => {
+             @Component({
+               selector: 'if-cmp',
+               template: `
+              <div [@.disabled]="disableExp">
+                <div [@myAnimation]="exp" (@myAnimation.start)="startEvent=$event" (@myAnimation.done)="doneEvent=$event"></div>
+              </div>
+            `,
+               animations: [
+                 trigger(
+                     'myAnimation',
+                     [
+                       transition(
+                           '* => 1, * => 2',
+                           [style({opacity: 0}), animate(9876, style({opacity: 1}))]),
+                     ]),
+               ]
+             })
+             class Cmp {
+               disableExp = false;
+               exp = '';
+               startEvent: any;
+               doneEvent: any;
+             }
+
+             TestBed.configureTestingModule({declarations: [Cmp]});
+
+             const fixture = TestBed.createComponent(Cmp);
+             const cmp = fixture.componentInstance;
+             cmp.disableExp = true;
+             fixture.detectChanges();
+             resetLog();
+             expect(cmp.startEvent).toBeFalsy();
+             expect(cmp.doneEvent).toBeFalsy();
+
+             cmp.exp = '1';
+             fixture.detectChanges();
+             flushMicrotasks();
+             expect(cmp.startEvent.totalTime).toEqual(0);
+             expect(cmp.doneEvent.totalTime).toEqual(0);
+
+             cmp.exp = '2';
+             cmp.disableExp = false;
+             fixture.detectChanges();
+             flushMicrotasks();
+             expect(cmp.startEvent.totalTime).toEqual(9876);
+             // the done event isn't fired because it's an actual animation
+           }));
+
+        it('should work when there are no animations on the component handling the disable/enable flag',
+           () => {
+             @Component({
+               selector: 'parent-cmp',
+               template: `
+              <div [@.disabled]="disableExp">
+                <child-cmp #child></child-cmp>
+              </div>
+                `
+             })
+             class ParentCmp {
+               @ViewChild('child') public child: ChildCmp|null = null;
+               disableExp = false;
+             }
+
+             @Component({
+               selector: 'child-cmp',
+               template: `
+                <div [@myAnimation]="exp"></div>
+                `,
+               animations: [trigger(
+                   'myAnimation',
+                   [transition(
+                       '* => go, * => goAgain',
+                       [style({opacity: 0}), animate('1s', style({opacity: 1}))])])]
+             })
+             class ChildCmp {
+               public exp = '';
+             }
+
+             TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+             const fixture = TestBed.createComponent(ParentCmp);
+             const cmp = fixture.componentInstance;
+             cmp.disableExp = true;
+             fixture.detectChanges();
+             resetLog();
+
+             const child = cmp.child !;
+             child.exp = 'go';
+             fixture.detectChanges();
+
+             expect(getLog().length).toEqual(0);
+             resetLog();
+
+             cmp.disableExp = false;
+             child.exp = 'goAgain';
+             fixture.detectChanges();
+             expect(getLog().length).toEqual(1);
+           });
+      });
+    });
+
+    describe('animation normalization', () => {
+      it('should convert hyphenated properties to camelcase by default', () => {
+        @Component({
+          selector: 'cmp',
+          template: `
+               <div [@myAnimation]="exp"></div>
+             `,
+          animations: [
+            trigger(
+                'myAnimation',
+                [
+                  transition(
+                      '* => go',
+                      [
+                        style({'background-color': 'red', height: '100px', fontSize: '100px'}),
+                        animate(
+                            '1s',
+                            style(
+                                {'background-color': 'blue', height: '200px', fontSize: '200px'})),
+                      ]),
+                ]),
+          ]
+        })
+        class Cmp {
+          exp: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 'go';
+        fixture.detectChanges();
+
+        const players = getLog();
+        expect(players.length).toEqual(1);
+        expect(players[0].keyframes).toEqual([
+          {backgroundColor: 'red', height: '100px', fontSize: '100px', offset: 0},
+          {backgroundColor: 'blue', height: '200px', fontSize: '200px', offset: 1},
+        ]);
+      });
+
+      it('should convert hyphenated properties to camelcase by default that are auto/pre style properties',
+         () => {
+           @Component({
+             selector: 'cmp',
+             template: `
+               <div [@myAnimation]="exp"></div>
+             `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     transition(
+                         '* => go',
+                         [
+                           style({'background-color': AUTO_STYLE, 'font-size': '100px'}),
+                           animate(
+                               '1s', style({'background-color': 'blue', 'font-size': PRE_STYLE})),
+                         ]),
+                   ]),
+             ]
+           })
+           class Cmp {
+             exp: any = false;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp = 'go';
+           fixture.detectChanges();
+
+           const players = getLog();
+           expect(players.length).toEqual(1);
+           expect(players[0].keyframes).toEqual([
+             {backgroundColor: AUTO_STYLE, fontSize: '100px', offset: 0},
+             {backgroundColor: 'blue', fontSize: PRE_STYLE, offset: 1},
+           ]);
+         });
+    });
+
+    it('should throw neither state() or transition() are used inside of trigger()', () => {
+      @Component({
+        selector: 'if-cmp',
+        template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+        animations: [trigger('myAnimation', [animate(1000, style({width: '100px'}))])]
+      })
+      class Cmp {
+        exp: any = false;
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      expect(() => { TestBed.createComponent(Cmp); })
+          .toThrowError(
+              /only state\(\) and transition\(\) definitions can sit inside of a trigger\(\)/);
+    });
+
+    it('should combine multiple errors together into one exception when an animation fails to be built',
+       () => {
+         @Component({
+           selector: 'if-cmp',
+           template: `
+          <div [@foo]="fooExp" [@bar]="barExp"></div>
+        `,
+           animations: [
+             trigger(
+                 'foo',
+                 [
+                   transition(':enter', []),
+                   transition(
+                       '* => *',
+                       [
+                         query('foo', animate(1000, style({background: 'red'}))),
+                       ]),
+                 ]),
+             trigger(
+                 'bar',
+                 [
+                   transition(':enter', []),
+                   transition(
+                       '* => *',
+                       [
+                         query('bar', animate(1000, style({background: 'blue'}))),
+                       ]),
+                 ]),
+           ]
+         })
+         class Cmp {
+           fooExp: any = false;
+           barExp: any = false;
+         }
+
+         TestBed.configureTestingModule({declarations: [Cmp]});
+
+         const engine = TestBed.get(ɵAnimationEngine);
+         const fixture = TestBed.createComponent(Cmp);
+         const cmp = fixture.componentInstance;
+         fixture.detectChanges();
+
+         cmp.fooExp = 'go';
+         cmp.barExp = 'go';
+
+         let errorMsg: string = '';
+         try {
+           fixture.detectChanges();
+         } catch (e) {
+           errorMsg = e.message;
+         }
+
+         expect(errorMsg).toMatch(/@foo has failed due to:/);
+         expect(errorMsg).toMatch(/`query\("foo"\)` returned zero elements/);
+         expect(errorMsg).toMatch(/@bar has failed due to:/);
+         expect(errorMsg).toMatch(/`query\("bar"\)` returned zero elements/);
+       });
+
+    it('should not throw an error if styles overlap in separate transitions', () => {
+      @Component({
+        selector: 'if-cmp',
+        template: `
+          <div [@myAnimation]="exp"></div>
+        `,
+        animations: [
+          trigger(
+              'myAnimation',
+              [
+                transition(
+                    'void => *',
+                    [
+                      style({opacity: 0}),
+                      animate('0.5s 1s', style({opacity: 1})),
+                    ]),
+                transition(
+                    '* => void',
+                    [animate(1000, style({height: 0})), animate(1000, style({opacity: 0}))]),
+              ]),
+        ]
+      })
+      class Cmp {
+        exp: any = false;
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      expect(() => { TestBed.createComponent(Cmp); }).not.toThrowError();
     });
 
     describe('errors for not using the animation module', () => {
@@ -1128,3 +2660,7 @@ function assertHasParent(element: any, yes: boolean) {
     expect(parent).toBeFalsy();
   }
 }
+
+function buildParams(params: {[name: string]: any}): AnimationOptions {
+  return {params};
+}
diff --git a/packages/core/test/animation/animation_query_integration_spec.ts b/packages/core/test/animation/animation_query_integration_spec.ts
new file mode 100644
index 0000000000..3ba4be8afb
--- /dev/null
+++ b/packages/core/test/animation/animation_query_integration_spec.ts
@@ -0,0 +1,2764 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AUTO_STYLE, AnimationPlayer, animate, animateChild, query, stagger, state, style, transition, trigger, ɵAnimationGroupPlayer as AnimationGroupPlayer} from '@angular/animations';
+import {AnimationDriver, ɵAnimationEngine} from '@angular/animations/browser';
+import {matchesElement} from '@angular/animations/browser/src/render/shared';
+import {ENTER_CLASSNAME, LEAVE_CLASSNAME} from '@angular/animations/browser/src/util';
+import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
+import {CommonModule} from '@angular/common';
+import {Component, HostBinding, ViewChild} from '@angular/core';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+import {HostListener} from '../../src/metadata/directives';
+import {TestBed} from '../../testing';
+import {fakeAsync, flushMicrotasks} from '../../testing/src/fake_async';
+
+
+export function main() {
+  // these tests are only mean't to be run within the DOM (for now)
+  if (typeof Element == 'undefined') return;
+
+  describe('animation query tests', function() {
+    function getLog(): MockAnimationPlayer[] {
+      return MockAnimationDriver.log as MockAnimationPlayer[];
+    }
+
+    function resetLog() { MockAnimationDriver.log = []; }
+
+    beforeEach(() => {
+      resetLog();
+      TestBed.configureTestingModule({
+        providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}],
+        imports: [BrowserAnimationsModule, CommonModule]
+      });
+    });
+
+    describe('query()', () => {
+      it('should be able to query all elements that contain animation triggers via @*', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@parent]="exp0">
+              <div class="a" [@a]="exp1"></div>
+              <div class="b" [@b]="exp2"></div>
+              <section>
+                <div class="c" @c></div>
+              </section>
+            </div>
+          `,
+          animations: [
+            trigger(
+                'parent',
+                [
+                  transition(
+                      '* => go',
+                      [
+                        query(
+                            '@*',
+                            [
+                              style({ backgroundColor: 'blue' }),
+                              animate(1000, style({backgroundColor: 'red'})),
+                            ]),
+                      ]),
+                ]),
+            trigger(
+                'a',
+                [
+                  transition('* => 1', [
+                    animate(1000, style({ opacity: 0 }))
+                  ]),
+                ]),
+            trigger(
+                'b',
+                [
+                  transition('* => 1', [
+                    animate(1000, style({ opacity: 0 })),
+                    query('.b-inner', [
+                      animate(1000, style({ opacity: 0 }))
+                    ]),
+                  ]),
+                ]),
+            trigger(
+                'c',
+                [
+                  transition('* => 1', [
+                    animate(1000, style({ opacity: 0 }))
+                  ]),
+                ]),
+          ]
+        })
+        class Cmp {
+          public exp0: any;
+          public exp1: any;
+          public exp2: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp0 = 'go';
+        fixture.detectChanges();
+
+        let players = getLog();
+        expect(players.length).toEqual(3);  // a,b,c
+        resetLog();
+
+        const [p1, p2, p3] = players;
+        expect(p1.element.classList.contains('a')).toBeTruthy();
+        expect(p2.element.classList.contains('b')).toBeTruthy();
+        expect(p3.element.classList.contains('c')).toBeTruthy();
+      });
+
+      it('should be able to query currently animating elements via :animating', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@parent]="exp0">
+              <div class="a" [@a]="exp1"></div>
+              <div class="b" [@b]="exp2">
+                <div class="b-inner"></div>
+              </div>
+              <div class="c" [@c]="exp3"></div>
+            </div>
+          `,
+          animations: [
+            trigger(
+                'parent',
+                [
+                  transition(
+                      '* => go',
+                      [
+                        query(
+                            ':animating',
+                            [
+                              style({ backgroundColor: 'blue' }),
+                              animate(1000, style({backgroundColor: 'red'})),
+                            ]),
+                      ]),
+                ]),
+            trigger(
+                'a',
+                [
+                  transition('* => 1', [
+                    animate(1000, style({ opacity: 0 }))
+                  ]),
+                ]),
+            trigger(
+                'b',
+                [
+                  transition('* => 1', [
+                    animate(1000, style({ opacity: 0 })),
+                    query('.b-inner', [
+                      animate(1000, style({ opacity: 0 }))
+                    ]),
+                  ]),
+                ]),
+            trigger(
+                'c',
+                [
+                  transition('* => 1', [
+                    animate(1000, style({ opacity: 0 }))
+                  ]),
+                ]),
+          ]
+        })
+        class Cmp {
+          public exp0: any;
+          public exp1: any;
+          public exp2: any;
+          public exp3: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp0 = '';
+        cmp.exp1 = 1;
+        cmp.exp2 = 1;
+        // note that exp3 is skipped here
+        fixture.detectChanges();
+
+        let players = getLog();
+        expect(players.length).toEqual(3);  // a,b,b-inner and not c
+        resetLog();
+
+        cmp.exp0 = 'go';
+        fixture.detectChanges();
+
+        const expectedKeyframes = [
+          {backgroundColor: 'blue', offset: 0},
+          {backgroundColor: 'red', offset: 1},
+        ];
+
+        players = getLog();
+        expect(players.length).toEqual(3);
+        const [p1, p2, p3] = players;
+
+        expect(p1.element.classList.contains('a')).toBeTruthy();
+        expect(p1.keyframes).toEqual(expectedKeyframes);
+
+        expect(p2.element.classList.contains('b')).toBeTruthy();
+        expect(p2.keyframes).toEqual(expectedKeyframes);
+
+        expect(p3.element.classList.contains('b-inner')).toBeTruthy();
+        expect(p3.keyframes).toEqual(expectedKeyframes);
+      });
+
+      it('should be able to query triggers directly by name', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp0">
+              <div class="f1" @foo></div>
+              <div class="f2" [@foo]></div>
+              <div class="f3" [@foo]="exp1"></div>
+              <div class="b1" @bar></div>
+              <div class="b2" [@bar]></div>
+              <div class="b3" [@bar]="exp2"></div>
+            </div>
+          `,
+          animations: [
+            trigger('foo', []),
+            trigger('bar', []),
+            trigger(
+                'myAnimation',
+                [
+                  transition(
+                      '* => foo',
+                      [
+                        query(
+                            '@foo',
+                            [
+                              animate(1000, style({color: 'red'})),
+                            ]),
+                      ]),
+                  transition(
+                      '* => bar',
+                      [
+                        query(
+                            '@bar',
+                            [
+                              animate(1000, style({color: 'blue'})),
+                            ]),
+                      ])
+                ]),
+          ]
+        })
+        class Cmp {
+          public exp0: any;
+          public exp1: any;
+          public exp2: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp0 = 'foo';
+        fixture.detectChanges();
+        engine.flush();
+
+        let players = getLog();
+        expect(players.length).toEqual(3);
+        const [p1, p2, p3] = players;
+        resetLog();
+
+        expect(p1.element.classList.contains('f1')).toBeTruthy();
+        expect(p2.element.classList.contains('f2')).toBeTruthy();
+        expect(p3.element.classList.contains('f3')).toBeTruthy();
+
+        cmp.exp0 = 'bar';
+        fixture.detectChanges();
+        engine.flush();
+
+        players = getLog();
+        expect(players.length).toEqual(3);
+        const [p4, p5, p6] = players;
+        resetLog();
+
+        expect(p4.element.classList.contains('b1')).toBeTruthy();
+        expect(p5.element.classList.contains('b2')).toBeTruthy();
+        expect(p6.element.classList.contains('b3')).toBeTruthy();
+      });
+
+      it('should be able to query all active animations using :animating in a query', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp" #parent>
+              <div *ngFor="let item of items" class="item e-{{ item }}">
+              </div>
+            </div>
+          `,
+          animations: [
+            trigger(
+                'myAnimation',
+                [
+                  transition(
+                      '* => a',
+                      [
+                        query(
+                            '.item:nth-child(odd)',
+                            [
+                              style({opacity: 0}),
+                              animate(1000, style({opacity: 1})),
+                            ]),
+                      ]),
+                  transition(
+                      '* => b',
+                      [
+                        query(
+                            '.item:animating',
+                            [
+                              style({opacity: 1}),
+                              animate(1000, style({opacity: 0})),
+                            ]),
+                      ]),
+                ]),
+          ]
+        })
+        class Cmp {
+          public exp: any;
+          public items: number[] = [0, 1, 2, 3, 4];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'a';
+        fixture.detectChanges();
+        engine.flush();
+
+        let players = getLog();
+        expect(players.length).toEqual(3);
+        resetLog();
+
+        cmp.exp = 'b';
+        fixture.detectChanges();
+        engine.flush();
+
+        players = getLog();
+        expect(players.length).toEqual(3);
+        expect(players[0].element.classList.contains('e-0')).toBeTruthy();
+        expect(players[1].element.classList.contains('e-2')).toBeTruthy();
+        expect(players[2].element.classList.contains('e-4')).toBeTruthy();
+      });
+
+      it('should be able to query all actively queued animation triggers via `@*:animating`',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div [@parent]="exp0">
+              <div class="c1" [@child]="exp1"></div>
+              <div class="c2" [@child]="exp2"></div>
+              <div class="c3" [@child]="exp3"></div>
+              <div class="c4" [@child]="exp4"></div>
+              <div class="c5" [@child]="exp5"></div>
+            </div>
+          `,
+             animations: [
+               trigger(
+                   'parent',
+                   [
+                     transition(
+                         '* => *',
+                         [
+                           query(
+                               '@*:animating', [animate(1000, style({background: 'red'}))],
+                               {optional: true}),
+                         ]),
+                   ]),
+               trigger(
+                   'child',
+                   [
+                     transition('* => *', []),
+                   ])
+             ]
+           })
+           class Cmp {
+             public exp0: any;
+             public exp1: any;
+             public exp2: any;
+             public exp3: any;
+             public exp4: any;
+             public exp5: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp0 = 0;
+
+           cmp.exp1 = 0;
+           cmp.exp2 = 0;
+           cmp.exp3 = 0;
+           cmp.exp4 = 0;
+           cmp.exp5 = 0;
+           fixture.detectChanges();
+           engine.flush();
+
+           let players = engine.players;
+           cancelAllPlayers(players);
+
+           cmp.exp0 = 1;
+
+           cmp.exp2 = 1;
+           cmp.exp4 = 1;
+           fixture.detectChanges();
+           engine.flush();
+
+           players = engine.players;
+           cancelAllPlayers(players);
+           expect(players.length).toEqual(3);
+
+           cmp.exp0 = 2;
+
+           cmp.exp1 = 2;
+           cmp.exp2 = 2;
+           cmp.exp3 = 2;
+           cmp.exp4 = 2;
+           cmp.exp5 = 2;
+           fixture.detectChanges();
+           engine.flush();
+
+           players = engine.players;
+           cancelAllPlayers(players);
+           expect(players.length).toEqual(6);
+
+           cmp.exp0 = 3;
+           fixture.detectChanges();
+           engine.flush();
+
+           players = engine.players;
+           cancelAllPlayers(players);
+           expect(players.length).toEqual(1);
+         });
+
+      it('should collect styles for the same elements between queries', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp">
+              <header></header> 
+              <footer></footer> 
+            </div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              transition('* => go', [
+                query(':self, header, footer', style({opacity: '0.01'})),
+                animate(1000, style({opacity: '1'})),
+                query('header, footer', [
+                  stagger(500, [
+                    animate(1000, style({opacity: '1'}))
+                  ])
+                ])
+              ])
+            ])
+          ]
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [0, 1, 2];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(6);
+
+        const [p1, p2, p3, p4, p5, p6] = players;
+
+        expect(p1.delay).toEqual(0);
+        expect(p1.duration).toEqual(0);
+        expect(p1.keyframes).toEqual([
+          {opacity: '0.01', offset: 0},
+          {opacity: '0.01', offset: 1},
+        ]);
+
+        expect(p2.delay).toEqual(0);
+        expect(p2.duration).toEqual(0);
+        expect(p2.keyframes).toEqual([
+          {opacity: '0.01', offset: 0},
+          {opacity: '0.01', offset: 1},
+        ]);
+
+        expect(p3.delay).toEqual(0);
+        expect(p3.duration).toEqual(0);
+        expect(p3.keyframes).toEqual([
+          {opacity: '0.01', offset: 0},
+          {opacity: '0.01', offset: 1},
+        ]);
+
+        expect(p4.delay).toEqual(0);
+        expect(p4.duration).toEqual(1000);
+        expect(p4.keyframes).toEqual([
+          {opacity: '0.01', offset: 0},
+          {opacity: '1', offset: 1},
+        ]);
+
+        expect(p5.delay).toEqual(1000);
+        expect(p5.duration).toEqual(1000);
+        expect(p5.keyframes).toEqual([
+          {opacity: '0.01', offset: 0},
+          {opacity: '1', offset: 1},
+        ]);
+
+        expect(p6.delay).toEqual(1500);
+        expect(p6.duration).toEqual(1000);
+        expect(p6.keyframes).toEqual([
+          {opacity: '0.01', offset: 0},
+          {opacity: '1', offset: 1},
+        ]);
+      });
+
+      it('should retain style values when :self is used inside of a query', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp"></div>
+          `,
+          animations: [trigger('myAnimation', [transition(
+                                                  '* => go',
+                                                  [
+                                                    query(':self', style({opacity: '0.5'})),
+                                                    animate(1000, style({opacity: '1'}))
+                                                  ])])]
+        })
+        class Cmp {
+          public exp: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+
+        const [p1, p2] = players;
+        expect(p1.delay).toEqual(0);
+        expect(p1.duration).toEqual(0);
+        expect(p1.keyframes).toEqual([{opacity: '0.5', offset: 0}, {opacity: '0.5', offset: 1}]);
+
+        expect(p2.delay).toEqual(0);
+        expect(p2.duration).toEqual(1000);
+        expect(p2.keyframes).toEqual([{opacity: '0.5', offset: 0}, {opacity: '1', offset: 1}]);
+      });
+
+      it('should properly apply stagger after various other steps within a query', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp">
+              <header></header> 
+              <footer></footer> 
+            </div>
+          `,
+          animations: [
+            trigger('myAnimation', [
+              transition('* => go', [
+                query(':self, header, footer', [
+                  style({opacity: '0'}),
+                  animate(1000, style({opacity: '0.3'})),
+                  animate(1000, style({opacity: '0.6'})),
+                  stagger(500, [
+                    animate(1000, style({opacity: '1'}))
+                  ])
+                ])
+              ])
+            ])
+          ]
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [0, 1, 2];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(3);
+
+        const [p1, p2, p3] = players;
+
+        expect(p1.delay).toEqual(0);
+        expect(p1.duration).toEqual(3000);
+        expect(p2.delay).toEqual(0);
+        expect(p2.duration).toEqual(3500);
+        expect(p3.delay).toEqual(0);
+        expect(p3.duration).toEqual(4000);
+      });
+
+      it('should properly apply pre styling before a stagger is issued', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+          <div [@myAnimation]="exp">
+            <div *ngFor="let item of items" class="item">
+              {{ item }} 
+            </div> 
+          </div> 
+        `,
+          animations: [
+            trigger(
+                'myAnimation',
+                [
+                  transition(
+                      '* => go',
+                      [
+                        query(
+                            ':enter',
+                            [
+                              style({opacity: 0}),
+                              stagger(
+                                  100,
+                                  [
+                                    animate(1000, style({opacity: 1})),
+                                  ]),
+                            ]),
+                      ]),
+                ]),
+          ]
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [0, 1, 2, 3, 4];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(5);
+
+        for (let i = 0; i < players.length; i++) {
+          const player = players[i];
+          const kf = player.keyframes;
+          const limit = kf.length - 1;
+          const staggerDelay = 100 * i;
+          const duration = 1000 + staggerDelay;
+
+          expect(kf[0]).toEqual({opacity: '0', offset: 0});
+          if (limit > 1) {
+            const offsetAtStaggerDelay = staggerDelay / duration;
+            expect(kf[1]).toEqual({opacity: '0', offset: offsetAtStaggerDelay});
+          }
+          expect(kf[limit]).toEqual({opacity: '1', offset: 1});
+          expect(player.duration).toEqual(duration);
+        }
+      });
+
+      it('should apply a full stagger step delay if the timing data is left undefined', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+          <div [@myAnimation]="exp">
+            <div *ngFor="let item of items" class="item">
+              {{ item }} 
+            </div> 
+          </div> 
+        `,
+          animations: [trigger(
+              'myAnimation',
+              [transition(
+                  '* => go', [query('.item', [stagger('full',[
+                                         style({opacity: 0}), animate(1000, style({opacity: .5})),
+                                         animate(500, style({opacity: 1}))
+                                       ])])])])]
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [0, 1, 2, 3, 4];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(5);
+
+        const [p1, p2, p3, p4, p5] = players;
+        expect(p1.delay).toEqual(0);
+        expect(p2.delay).toEqual(1500);
+        expect(p3.delay).toEqual(3000);
+        expect(p4.delay).toEqual(4500);
+        expect(p5.delay).toEqual(6000);
+      });
+
+      it('should persist inner sub trigger styles once their animation is complete', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div @parent *ngIf="exp1">
+              <div class="child" [@child]="exp2"></div>
+            </div>
+          `,
+          animations: [
+            trigger(
+                'parent',
+                [
+                  transition(
+                      ':enter',
+                      [
+                        query(
+                            '.child',
+                            [
+                              animateChild(),
+                            ]),
+                      ]),
+                ]),
+            trigger(
+                'child',
+                [
+                  state('*, void', style({height: '0px'})),
+                  state('b', style({height: '444px'})),
+                  transition('* => *', animate(500)),
+                ]),
+          ]
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = true;
+        cmp.exp2 = 'b';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(1);
+        const player = players[0];
+
+        expect(player.keyframes).toEqual([
+          {height: '0px', offset: 0}, {height: '444px', offset: 1}
+        ]);
+        player.finish();
+
+        expect(player.element.style.height).toEqual('444px');
+      });
+
+      it('should find newly inserted items in the component via :enter', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div @myAnimation>
+              <div *ngFor="let item of items" class="child">
+                {{ item }} 
+              </div> 
+            </div>
+          `,
+          animations: [trigger(
+              'myAnimation',
+              [
+                transition(
+                    ':enter',
+                    [
+                      query(
+                          ':enter',
+                          [
+                            style({opacity: 0}),
+                            animate(1000, style({opacity: .5})),
+                          ]),
+                    ]),
+              ])]
+        })
+        class Cmp {
+          public items: any[] = [0, 1, 2];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(3);
+
+        const [p1, p2, p3] = players;
+        expect(p1.element.innerText.trim()).toEqual('0');
+        expect(p2.element.innerText.trim()).toEqual('1');
+        expect(p3.element.innerText.trim()).toEqual('2');
+
+        players.forEach(p => {
+          expect(p.keyframes).toEqual([{opacity: '0', offset: 0}, {opacity: '0.5', offset: 1}]);
+        });
+      });
+
+      it('should cleanup :enter and :leave artifacts from nodes when any animation sequences fail to be built',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div [@myAnimation]="items.length" class="parent" #container>
+              <div *ngFor="let item of items" class="child">
+                {{ item }}
+              </div>
+              <div *ngIf="items.length == 0" class="child">Leave!</div>
+            </div>
+          `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     transition('* => 0', []),
+                     transition(
+                         '* => *',
+                         [
+                           query(
+                               '.child:enter',
+                               [
+                                 style({opacity: 0}),
+                                 animate(1000, style({opacity: 1})),
+                               ]),
+                           query(
+                               '.incorrect-child:leave',
+                               [
+                                 animate(1000, style({opacity: 0})),
+                               ]),
+                         ]),
+                   ]),
+             ]
+           })
+           class Cmp {
+             @ViewChild('container') public container: any;
+             public items: any[] = [];
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.items = [];
+           fixture.detectChanges();
+
+           cmp.items = [0, 1, 2, 3, 4];
+
+           expect(() => { fixture.detectChanges(); }).toThrow();
+
+           const children = cmp.container.nativeElement.querySelectorAll('.child');
+           expect(children.length).toEqual(5);
+
+           for (let i = 0; i < children.length; i++) {
+             let child = children[i];
+             expect(child.classList.contains(ENTER_CLASSNAME)).toBe(false);
+             expect(child.classList.contains(LEAVE_CLASSNAME)).toBe(false);
+           }
+         });
+
+      it('should find elements that have been removed via :leave', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp" class="parent">
+              <div *ngFor="let item of items" class="child">
+                {{ item }} 
+              </div> 
+            </div>
+          `,
+          animations: [trigger(
+              'myAnimation',
+              [
+                transition(
+                    'a => b',
+                    [query(':leave', [style({opacity: 1}), animate(1000, style({opacity: .5}))])]),
+              ])]
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [4, 2, 0];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'a';
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = 'b';
+        cmp.items = [];
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(3);
+
+        const [p1, p2, p3] = players;
+        expect(p1.element.innerText.trim()).toEqual('4');
+        expect(p2.element.innerText.trim()).toEqual('2');
+        expect(p3.element.innerText.trim()).toEqual('0');
+
+        players.forEach(p => {
+          expect(p.keyframes).toEqual([{opacity: '1', offset: 0}, {opacity: '0.5', offset: 1}]);
+        });
+      });
+
+      it('should find :enter nodes that have been inserted around non enter nodes', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp" class="parent">
+              <div *ngFor="let item of items" class="child">
+                {{ item }}
+              </div>
+            </div>
+          `,
+          animations: [trigger(
+              'myAnimation',
+              [
+                transition(
+                    '* => go',
+                    [query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))])]),
+              ])]
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'no';
+        cmp.items = [2];
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = 'go';
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(4);
+
+        const [p1, p2, p3, p4] = players;
+        expect(p1.element.innerText.trim()).toEqual('0');
+        expect(p2.element.innerText.trim()).toEqual('1');
+        expect(p3.element.innerText.trim()).toEqual('3');
+        expect(p4.element.innerText.trim()).toEqual('4');
+      });
+
+      it('should find :enter/:leave nodes that are nested inside of ng-container elements', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="items.length" class="parent">
+              <ng-container *ngFor="let item of items">
+                <section>
+                  <div *ngIf="item % 2 == 0">even {{ item }}</div>
+                  <div *ngIf="item % 2 == 1">odd {{ item }}</div>
+                </section>
+              </ng-container>
+            </div>
+          `,
+          animations: [trigger(
+            'myAnimation',
+            [
+              transition('0 => 5', [
+                query(':enter', [
+                  style({ opacity: '0' }),
+                  animate(1000, style({ opacity: '1' }))
+                ])
+              ]),
+              transition('5 => 0', [
+                query(':leave', [
+                  style({ opacity: '1' }),
+                  animate(1000, style({ opacity: '0' }))
+                ])
+              ]),
+            ])]
+        })
+        class Cmp {
+          public items: any[];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.items = [];
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
+
+        let players = getLog();
+        expect(players.length).toEqual(5);
+
+        for (let i = 0; i < 5; i++) {
+          let player = players[i] !;
+          expect(player.keyframes).toEqual([
+            {opacity: '0', offset: 0},
+            {opacity: '1', offset: 1},
+          ]);
+
+          let elm = player.element;
+          let text = i % 2 == 0 ? `even ${i}` : `odd ${i}`;
+          expect(elm.innerText.trim()).toEqual(text);
+        }
+
+        resetLog();
+        cmp.items = [];
+        fixture.detectChanges();
+        engine.flush();
+
+        players = getLog();
+        expect(players.length).toEqual(5);
+
+        for (let i = 0; i < 5; i++) {
+          let player = players[i] !;
+          expect(player.keyframes).toEqual([
+            {opacity: '1', offset: 0},
+            {opacity: '0', offset: 1},
+          ]);
+
+          let elm = player.element;
+          let text = i % 2 == 0 ? `even ${i}` : `odd ${i}`;
+          expect(elm.innerText.trim()).toEqual(text);
+        }
+      });
+
+      it('should properly cancel items that were queried into a former animation and pass in the associated styles into the follow-up players per element',
+         () => {
+           @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp" class="parent">
+              <div *ngFor="let item of items" class="child">
+                {{ item }} 
+              </div> 
+            </div>
+          `,
+          animations: [trigger(
+            'myAnimation',
+            [
+              transition('* => on', [
+                query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+                query(':enter', [style({width: 0}), animate(1000, style({height: 200}))])
+              ]),
+              transition('* => off', [
+                query(':leave', [animate(1000, style({width: 0}))]),
+                query(':leave', [animate(1000, style({opacity: 0}))])
+              ]),
+            ])]
+        })
+        class Cmp {
+             public exp: any;
+             public items: any[];
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = 'on';
+           cmp.items = [0, 1, 2, 3, 4];
+           fixture.detectChanges();
+           engine.flush();
+
+           const previousPlayers = getLog();
+           expect(previousPlayers.length).toEqual(10);
+           resetLog();
+
+           cmp.exp = 'off';
+           cmp.items = [0, 1, 2];
+           fixture.detectChanges();
+           engine.flush();
+
+           const players = getLog();
+           expect(players.length).toEqual(4);
+
+           const [p1, p2, p3, p4] = players;
+
+           // p1 && p2 are the starting players for item3 and item4
+           expect(p1.previousStyles)
+               .toEqual({opacity: AUTO_STYLE, width: AUTO_STYLE, height: AUTO_STYLE});
+           expect(p2.previousStyles)
+               .toEqual({opacity: AUTO_STYLE, width: AUTO_STYLE, height: AUTO_STYLE});
+
+           // p3 && p4 are the following players for item3 and item4
+           expect(p3.previousStyles).toEqual({});
+           expect(p4.previousStyles).toEqual({});
+         });
+
+      it('should not remove a parent container if its contents are queried into by an ancestor element',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div [@myAnimation]="exp1" class="ancestor" #ancestor>
+              <div class="parent" *ngIf="exp2" #parent>
+                <div class="child"></div>
+                <div class="child"></div>
+              </div>
+            </div>
+          `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     transition(
+                         '* => go',
+                         [
+                           query(
+                               '.child',
+                               [
+                                 style({opacity: 0}),
+                                 animate(1000, style({opacity: 1})),
+                               ]),
+                         ]),
+                   ]),
+             ]
+           })
+           class Cmp {
+             public exp1: any = '';
+             public exp2: any = true;
+
+             @ViewChild('ancestor') public ancestorElm: any;
+
+             @ViewChild('parent') public parentElm: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           fixture.detectChanges();
+           engine.flush();
+           resetLog();
+
+           const ancestorElm = cmp.ancestorElm.nativeElement;
+           const parentElm = cmp.parentElm.nativeElement;
+
+           cmp.exp1 = 'go';
+           cmp.exp2 = false;
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(ancestorElm.contains(parentElm)).toBe(true);
+
+           const players = getLog();
+           expect(players.length).toEqual(2);
+           const [p1, p2] = players;
+           expect(parentElm.contains(p1.element)).toBe(true);
+           expect(parentElm.contains(p2.element)).toBe(true);
+
+           cancelAllPlayers(players);
+
+           expect(ancestorElm.contains(parentElm)).toBe(false);
+         });
+
+      it('should only retain a to-be-removed node if the inner queried items are apart of an animation issued by an ancestor',
+         fakeAsync(() => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div [@one]="exp1" [@two]="exp2" class="ancestor" #ancestor>
+              <header>hello</header>
+              <div class="parent" *ngIf="parentExp" #parent>
+                <div class="child">child</div>
+              </div>
+            </div>
+          `,
+             animations: [
+               trigger(
+                   'one',
+                   [
+                     transition(
+                         '* => go',
+                         [
+                           query(
+                               '.child',
+                               [
+                                 style({height: '100px'}),
+                                 animate(1000, style({height: '0px'})),
+                               ]),
+                         ]),
+                   ]),
+               trigger(
+                   'two',
+                   [
+                     transition('* => go', [query(
+                                               'header',
+                                               [
+                                                 style({width: '100px'}),
+                                                 animate(1000, style({width: '0px'})),
+                                               ])]),
+                   ]),
+             ]
+           })
+           class Cmp {
+             public exp1: any = '';
+             public exp2: any = '';
+             public parentExp: any = true;
+
+             @ViewChild('ancestor') public ancestorElm: any;
+
+             @ViewChild('parent') public parentElm: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           fixture.detectChanges();
+           engine.flush();
+           resetLog();
+
+           const ancestorElm = cmp.ancestorElm.nativeElement;
+           const parentElm = cmp.parentElm.nativeElement;
+           expect(ancestorElm.contains(parentElm)).toBe(true);
+
+           cmp.exp1 = 'go';
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(ancestorElm.contains(parentElm)).toBe(true);
+
+           const onePlayers = getLog();
+           expect(onePlayers.length).toEqual(1);  // element.child
+           const [childPlayer] = onePlayers;
+
+           let childPlayerComplete = false;
+           childPlayer.onDone(() => childPlayerComplete = true);
+           resetLog();
+           flushMicrotasks();
+
+           expect(childPlayerComplete).toBe(false);
+
+           cmp.exp2 = 'go';
+           cmp.parentExp = false;
+           fixture.detectChanges();
+           engine.flush();
+
+           const twoPlayers = getLog();
+           expect(twoPlayers.length).toEqual(1);  // the header element
+           expect(ancestorElm.contains(parentElm)).toBe(false);
+           expect(childPlayerComplete).toBe(true);
+         }));
+
+      it('should finish queried players in an animation when the next animation takes over', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp" class="parent">
+              <div *ngFor="let item of items" class="child">
+                {{ item }} 
+              </div> 
+            </div>
+          `,
+          animations: [trigger(
+              'myAnimation',
+              [
+                transition(
+                    '* => on',
+                    [
+                      query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+                    ]),
+                transition('* => off', [])
+              ])]
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'on';
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(5);
+
+        let count = 0;
+        players.forEach(p => { p.onDone(() => count++); });
+
+        expect(count).toEqual(0);
+
+        cmp.exp = 'off';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(count).toEqual(5);
+      });
+
+      it('should finish queried players when the previous player is finished', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@myAnimation]="exp" class="parent">
+              <div *ngFor="let item of items" class="child">
+                {{ item }} 
+              </div> 
+            </div>
+          `,
+          animations: [trigger(
+              'myAnimation',
+              [
+                transition(
+                    '* => on',
+                    [
+                      query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+                    ]),
+                transition('* => off', [])
+              ])]
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'on';
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(5);
+
+        let count = 0;
+        players.forEach(p => { p.onDone(() => count++); });
+
+        expect(count).toEqual(0);
+
+        expect(engine.players.length).toEqual(1);
+        engine.players[0].finish();
+
+        expect(count).toEqual(5);
+      });
+
+      it('should allow multiple triggers to animate on queried elements at the same time', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@one]="exp1" [@two]="exp2" class="parent">
+              <div *ngFor="let item of items" class="child">
+                {{ item }} 
+              </div> 
+            </div>
+          `,
+          animations: [
+            trigger('one', [
+              transition('* => on', [
+                query('.child', [
+                  style({width: '0px'}),
+                  animate(1000, style({width: '100px'}))
+                ])
+              ]),
+              transition('* => off', [])
+            ]),
+            trigger('two', [
+              transition('* => on', [
+                query('.child:nth-child(odd)', [
+                  style({height: '0px'}),
+                  animate(1000, style({height: '100px'}))
+                ])
+              ]),
+              transition('* => off', [])
+            ])
+          ]
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+          public items: any[];
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'on';
+        cmp.items = [0, 1, 2, 3, 4];
+        fixture.detectChanges();
+        engine.flush();
+
+        let players = getLog();
+        expect(players.length).toEqual(5);
+
+        let count = 0;
+        players.forEach(p => { p.onDone(() => count++); });
+
+        resetLog();
+
+        expect(count).toEqual(0);
+
+        cmp.exp2 = 'on';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(count).toEqual(0);
+
+        players = getLog();
+        expect(players.length).toEqual(3);
+
+        players.forEach(p => { p.onDone(() => count++); });
+
+        cmp.exp1 = 'off';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(count).toEqual(5);
+
+        cmp.exp2 = 'off';
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(count).toEqual(8);
+      });
+
+      it('should cancel inner queried animations if a trigger state value changes, but isn\'t detected as a valid transition',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div [@myAnimation]="exp" class="parent">
+              <div *ngFor="let item of items" class="child">
+                {{ item }} 
+              </div> 
+            </div>
+          `,
+             animations: [trigger(
+                 'myAnimation',
+                 [transition(
+                     '* => on',
+                     [
+                       query(':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))]),
+                     ])])]
+           })
+           class Cmp {
+             public exp: any;
+             public items: any[];
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = 'on';
+           cmp.items = [0, 1, 2, 3, 4];
+           fixture.detectChanges();
+           engine.flush();
+
+           const players = getLog();
+           expect(players.length).toEqual(5);
+
+           let count = 0;
+           players.forEach(p => { p.onDone(() => count++); });
+
+           expect(count).toEqual(0);
+
+           cmp.exp = 'off';
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(count).toEqual(5);
+         });
+
+      it('should allow for queried items to restore their styling back to the original state via animate(time, "*")',
+         () => {
+           @Component({
+            selector: 'ani-cmp',
+            template: `
+            <div [@myAnimation]="exp" class="parent">
+              <div *ngFor="let item of items" class="child">
+                {{ item }} 
+              </div> 
+            </div>
+          `,
+            animations: [
+              trigger('myAnimation', [
+                transition('* => on', [
+                  query(':enter', [
+                    style({opacity: '0', width: '0px', height: '0px'}),
+                    animate(1000, style({opacity: '1'})),
+                    animate(1000, style(['*', {height: '200px'}]))
+                  ])
+                ])
+              ])
+            ]
+          })
+          class Cmp {
+             public exp: any;
+             public items: any[];
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = 'on';
+           cmp.items = [0, 1, 2];
+           fixture.detectChanges();
+           engine.flush();
+
+           const players = getLog();
+           expect(players.length).toEqual(3);
+
+           players.forEach(p => {
+             expect(p.keyframes).toEqual([
+               {opacity: '0', width: '0px', height: '0px', offset: 0},
+               {opacity: '1', width: '0px', height: '0px', offset: .5},
+               {opacity: AUTO_STYLE, width: AUTO_STYLE, height: '200px', offset: 1}
+             ]);
+           });
+         });
+
+      it('should query elements in sub components that do not contain animations using the :enter selector',
+         () => {
+           @Component({
+             selector: 'parent-cmp',
+             template: `
+            <div [@myAnimation]="exp">
+              <child-cmp #child></child-cmp>
+            </div>
+          `,
+             animations: [trigger(
+                 'myAnimation',
+                 [transition(
+                     '* => on',
+                     [query(
+                         ':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])])]
+           })
+           class ParentCmp {
+             public exp: any;
+
+             @ViewChild('child') public child: any;
+           }
+
+           @Component({
+             selector: 'child-cmp',
+             template: `
+            <div *ngFor="let item of items">
+              {{ item }}
+            </div>
+          `
+           })
+           class ChildCmp {
+             public items: any[] = [];
+           }
+
+           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+           const fixture = TestBed.createComponent(ParentCmp);
+           const cmp = fixture.componentInstance;
+           fixture.detectChanges();
+
+           cmp.exp = 'on';
+           cmp.child.items = [1, 2, 3];
+           fixture.detectChanges();
+
+           const players = getLog() as any[];
+           expect(players.length).toEqual(3);
+
+           expect(players[0].element.innerText.trim()).toEqual('1');
+           expect(players[1].element.innerText.trim()).toEqual('2');
+           expect(players[2].element.innerText.trim()).toEqual('3');
+         });
+
+      it('should query elements in sub components that do not contain animations using the :leave selector',
+         () => {
+           @Component({
+             selector: 'parent-cmp',
+             template: `
+            <div [@myAnimation]="exp">
+              <child-cmp #child></child-cmp>
+            </div>
+          `,
+             animations: [trigger(
+                 'myAnimation',
+                 [transition(
+                     '* => on', [query(':leave', [animate(1000, style({opacity: 0}))])])])]
+           })
+           class ParentCmp {
+             public exp: any;
+
+             @ViewChild('child') public child: any;
+           }
+
+           @Component({
+             selector: 'child-cmp',
+             template: `
+            <div *ngFor="let item of items">
+              {{ item }}
+            </div>
+          `
+           })
+           class ChildCmp {
+             public items: any[] = [];
+           }
+
+           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+           const fixture = TestBed.createComponent(ParentCmp);
+           const cmp = fixture.componentInstance;
+           cmp.child.items = [4, 5, 6];
+           fixture.detectChanges();
+
+           cmp.exp = 'on';
+           cmp.child.items = [];
+           fixture.detectChanges();
+
+           const players = getLog() as any[];
+           expect(players.length).toEqual(3);
+
+           expect(players[0].element.innerText.trim()).toEqual('4');
+           expect(players[1].element.innerText.trim()).toEqual('5');
+           expect(players[2].element.innerText.trim()).toEqual('6');
+         });
+    });
+
+    describe('sub triggers', () => {
+      it('should animate a sub trigger that exists in an inner element in the template', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div #parent class="parent" [@parent]="exp1">
+              <div #child class="child" [@child]="exp2"></div>
+            </div>
+          `,
+          animations: [
+            trigger('parent', [transition(
+                                  '* => go1',
+                                  [
+                                    style({width: '0px'}), animate(1000, style({width: '100px'})),
+                                    query('.child', [animateChild()])
+                                  ])]),
+            trigger('child', [transition(
+                                 '* => go2',
+                                 [
+                                   style({height: '0px'}),
+                                   animate(1000, style({height: '100px'})),
+                                 ])])
+          ]
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+
+          @ViewChild('parent') public elm1: any;
+
+          @ViewChild('child') public elm2: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'go1';
+        cmp.exp2 = 'go2';
+        fixture.detectChanges();
+        engine.flush();
+
+        const elm1 = cmp.elm1;
+        const elm2 = cmp.elm2;
+
+        const [p1, p2] = getLog();
+        expect(p1.delay).toEqual(0);
+        expect(p1.element).toEqual(elm1.nativeElement);
+        expect(p1.duration).toEqual(1000);
+        expect(p1.keyframes).toEqual([{width: '0px', offset: 0}, {width: '100px', offset: 1}]);
+
+        expect(p2.delay).toEqual(0);
+        expect(p2.element).toEqual(elm2.nativeElement);
+        expect(p2.duration).toEqual(2000);
+        expect(p2.keyframes).toEqual([
+          {height: '0px', offset: 0}, {height: '0px', offset: .5}, {height: '100px', offset: 1}
+        ]);
+      });
+
+      it('should run and operate a series of triggers on a list of elements with overridden timing data',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div #parent class="parent" [@parent]="exp">
+              <div class="item" *ngFor="let item of items" @child></div>
+            </div>
+          `,
+             animations: [
+               trigger('parent', [transition(
+                                     '* => go',
+                                     [
+                                       style({opacity: '0'}), animate(1000, style({opacity: '1'})),
+                                       query('.item', [animateChild({ duration: '2.5s', delay: '500ms' })]),
+                                       animate(1000, style({opacity: '0'}))
+                                     ])]),
+               trigger('child', [transition(
+                                    ':enter',
+                                    [
+                                      style({height: '0px'}),
+                                      animate(1000, style({height: '100px'})),
+                                    ])])
+             ]
+           })
+           class Cmp {
+             public exp: any;
+             public items: any[] = [0, 1, 2, 3, 4];
+
+             @ViewChild('parent') public elm: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = 'go';
+           fixture.detectChanges();
+           engine.flush();
+
+           const parent = cmp.elm.nativeElement;
+           const elements = parent.querySelectorAll('.item');
+
+           const players = getLog();
+           expect(players.length).toEqual(7);
+           const [pA, pc1, pc2, pc3, pc4, pc5, pZ] = players;
+
+           expect(pA.element).toEqual(parent);
+           expect(pA.delay).toEqual(0);
+           expect(pA.duration).toEqual(1000);
+
+           expect(pc1.element).toEqual(elements[0]);
+           expect(pc1.delay).toEqual(0);
+           expect(pc1.duration).toEqual(4000);
+
+           expect(pc2.element).toEqual(elements[1]);
+           expect(pc2.delay).toEqual(0);
+           expect(pc2.duration).toEqual(4000);
+
+           expect(pc3.element).toEqual(elements[2]);
+           expect(pc3.delay).toEqual(0);
+           expect(pc3.duration).toEqual(4000);
+
+           expect(pc4.element).toEqual(elements[3]);
+           expect(pc4.delay).toEqual(0);
+           expect(pc4.duration).toEqual(4000);
+
+           expect(pc5.element).toEqual(elements[4]);
+           expect(pc5.delay).toEqual(0);
+           expect(pc5.duration).toEqual(4000);
+
+           expect(pZ.element).toEqual(parent);
+           expect(pZ.delay).toEqual(4000);
+           expect(pZ.duration).toEqual(1000);
+         });
+
+      it('should silently continue if a sub trigger is animated that doesn\'t exist', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div #parent class="parent" [@parent]="exp">
+              <div class="child"></div>
+            </div>
+          `,
+          animations:
+              [trigger('parent', [transition(
+                                     '* => go',
+                                     [
+                                       style({opacity: 0}), animate(1000, style({opacity: 1})),
+                                       query('.child', [animateChild({duration: '1s'})]),
+                                       animate(1000, style({opacity: 0}))
+                                     ])])]
+        })
+        class Cmp {
+          public exp: any;
+          public items: any[] = [0, 1, 2, 3, 4];
+
+          @ViewChild('parent') public elm: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const parent = cmp.elm.nativeElement;
+        const players = getLog();
+        expect(players.length).toEqual(2);
+
+        const [pA, pZ] = players;
+        expect(pA.element).toEqual(parent);
+        expect(pA.delay).toEqual(0);
+        expect(pA.duration).toEqual(1000);
+
+        expect(pZ.element).toEqual(parent);
+        expect(pZ.delay).toEqual(1000);
+        expect(pZ.duration).toEqual(1000);
+      });
+
+      it('should silently continue if a sub trigger is animated that doesn\'t contain a trigger that is setup for animation',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div #parent class="parent" [@parent]="exp1">
+              <div [@child]="exp2" class="child"></div>
+            </div>
+          `,
+             animations: [
+               trigger('child', [transition(
+                                    'a => z',
+                                    [style({opacity: 0}), animate(1000, style({opacity: 1}))])]),
+               trigger('parent', [transition(
+                                     'a => z',
+                                     [
+                                       style({opacity: 0}), animate(1000, style({opacity: 1})),
+                                       query('.child', [animateChild({duration: '1s'})]),
+                                       animate(1000, style({opacity: 0}))
+                                     ])])
+             ]
+           })
+           class Cmp {
+             public exp1: any;
+             public exp2: any;
+
+             @ViewChild('parent') public elm: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp1 = 'a';
+           cmp.exp2 = 'a';
+           fixture.detectChanges();
+           engine.flush();
+           resetLog();
+
+           cmp.exp1 = 'z';
+           fixture.detectChanges();
+           engine.flush();
+
+           const parent = cmp.elm.nativeElement;
+           const players = getLog();
+           expect(players.length).toEqual(2);
+
+           const [pA, pZ] = players;
+           expect(pA.element).toEqual(parent);
+           expect(pA.delay).toEqual(0);
+           expect(pA.duration).toEqual(1000);
+
+           expect(pZ.element).toEqual(parent);
+           expect(pZ.delay).toEqual(1000);
+           expect(pZ.duration).toEqual(1000);
+         });
+
+      it('should animate all sub triggers on the element at the same time', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div #parent class="parent" [@parent]="exp1">
+              <div [@w]="exp2" [@h]="exp2" class="child"></div>
+            </div>
+          `,
+          animations: [
+            trigger('w', [
+              transition('* => go', [
+                style({ width: 0 }),
+                animate(1800, style({ width: '100px' }))
+              ])
+            ]),
+            trigger('h', [
+              transition('* => go', [
+                style({ height: 0 }),
+                animate(1500, style({ height: '100px' }))
+              ])
+            ]),
+            trigger('parent', [
+              transition('* => go', [
+                style({ opacity: 0 }),
+                animate(1000, style({ opacity: 1 })),
+                query('.child', [
+                  animateChild()
+                ]),
+                animate(1000, style({ opacity: 0 }))
+              ])
+            ])
+          ]
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+
+          @ViewChild('parent') public elm: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'go';
+        cmp.exp2 = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(4);
+        const [pA, pc1, pc2, pZ] = players;
+
+        expect(pc1.delay).toEqual(0);
+        expect(pc1.duration).toEqual(2800);
+
+        expect(pc2.delay).toEqual(0);
+        expect(pc2.duration).toEqual(2500);
+
+        expect(pZ.delay).toEqual(2800);
+        expect(pZ.duration).toEqual(1000);
+      });
+
+      it('should skip a sub animation when a zero duration value is passed in', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div #parent class="parent" [@parent]="exp1">
+              <div [@child]="exp2" class="child"></div>
+            </div>
+          `,
+          animations: [
+            trigger('child', [transition(
+                                 '* => go',
+                                 [style({width: 0}), animate(1800, style({width: '100px'}))])]),
+            trigger('parent', [transition(
+                                  '* => go',
+                                  [
+                                    style({opacity: 0}), animate(1000, style({opacity: 1})),
+                                    query('.child', [animateChild({duration: '0'})]),
+                                    animate(1000, style({opacity: 0}))
+                                  ])])
+          ]
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+
+          @ViewChild('parent') public elm: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'go';
+        cmp.exp2 = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(2);
+        const [pA, pZ] = players;
+
+        expect(pA.delay).toEqual(0);
+        expect(pA.duration).toEqual(1000);
+
+        expect(pZ.delay).toEqual(1000);
+        expect(pZ.duration).toEqual(1000);
+      });
+
+      it('should only allow a sub animation to be used up by a parent trigger once', () => {
+        @Component({
+          selector: 'ani-cmp',
+          template: `
+            <div [@parent]="exp1" class="parent1" #parent>
+              <div [@parent]="exp1" class="parent2">
+                <div [@child]="exp2" class="child">
+                </div>
+              </div>
+            </div>
+          `,
+          animations: [
+            trigger('parent', [transition(
+                                  '* => go',
+                                  [
+                                    style({opacity: 0}), animate(1000, style({opacity: 1})),
+                                    query('.child', animateChild())
+                                  ])]),
+            trigger('child', [transition(
+                                 '* => go',
+                                 [style({opacity: 0}), animate(1800, style({opacity: 1}))])])
+          ]
+        })
+        class Cmp {
+          public exp1: any;
+          public exp2: any;
+
+          @ViewChild('parent') public elm: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+
+        cmp.exp1 = 'go';
+        cmp.exp2 = 'go';
+        fixture.detectChanges();
+        engine.flush();
+
+        const players = getLog();
+        expect(players.length).toEqual(3);
+
+        const [p1, p2, p3] = players;
+
+        // parent2 is evaluated first because it is inside of parent1
+        expect(p1.element.classList.contains('parent2')).toBeTruthy();
+        expect(p2.element.classList.contains('child')).toBeTruthy();
+        expect(p3.element.classList.contains('parent1')).toBeTruthy();
+      });
+
+      it('should emulate a leave animation on the nearest sub host elements when a parent is removed',
+         fakeAsync(() => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
+            <div @parent *ngIf="exp" class="parent1" #parent>
+              <child-cmp #child @leave (@leave.start)="animateStart($event)"></child-cmp>
+            </div>
+          `,
+             animations: [
+               trigger(
+                   'leave',
+                   [
+                     transition(':leave', [animate(1000, style({color: 'gold'}))]),
+                   ]),
+               trigger(
+                   'parent',
+                   [
+                     transition(':leave', [query(':leave', animateChild())]),
+                   ]),
+             ]
+           })
+           class ParentCmp {
+             public exp: boolean = true;
+             @ViewChild('child') public childElm: any;
+
+             public childEvent: any;
+
+             animateStart(event: any) {
+               if (event.toState == 'void') {
+                 this.childEvent = event;
+               }
+             }
+           }
+
+           @Component({
+             selector: 'child-cmp',
+             template: '...',
+             animations: [
+               trigger(
+                   'child',
+                   [
+                     transition(':leave', [animate(1000, style({color: 'gold'}))]),
+                   ]),
+             ]
+           })
+           class ChildCmp {
+             public childEvent: any;
+
+             @HostBinding('@child') public animate = true;
+
+             @HostListener('@child.start', ['$event'])
+             animateStart(event: any) {
+               if (event.toState == 'void') {
+                 this.childEvent = event;
+               }
+             }
+           }
+
+           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(ParentCmp);
+           const cmp = fixture.componentInstance;
+
+           fixture.detectChanges();
+           engine.flush();
+
+           const childCmp = cmp.childElm;
+
+           cmp.exp = false;
+           fixture.detectChanges();
+           engine.flush();
+           flushMicrotasks();
+
+           expect(cmp.childEvent.toState).toEqual('void');
+           expect(cmp.childEvent.totalTime).toEqual(1000);
+           expect(childCmp.childEvent.toState).toEqual('void');
+           expect(childCmp.childEvent.totalTime).toEqual(1000);
+         }));
+
+      it('should only mark outermost *directive nodes :enter and :leave when inserts and removals occur',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             animations: [
+               trigger(
+                   'anim',
+                   [
+                     transition(
+                         '* => enter',
+                         [
+                           query(':enter', [animate(1000, style({color: 'red'}))]),
+                         ]),
+                     transition(
+                         '* => leave',
+                         [
+                           query(':leave', [animate(1000, style({color: 'blue'}))]),
+                         ]),
+                   ]),
+             ],
+             template: `
+            <section class="container" [@anim]="exp ? 'enter' : 'leave'">
+              <div class="a" *ngIf="exp">
+                <div class="b" *ngIf="exp">
+                  <div class="c" *ngIf="exp">
+                    text
+                  </div>
+                </div>
+              </div>
+              <div>
+                <div class="d" *ngIf="exp">
+                  text2
+                </div>
+              </div>
+            </section>
+          `
+           })
+           class Cmp {
+             public exp: boolean;
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           const container = fixture.elementRef.nativeElement;
+
+           cmp.exp = true;
+           fixture.detectChanges();
+           engine.flush();
+
+           let players = getLog();
+           resetLog();
+           expect(players.length).toEqual(2);
+           const [p1, p2] = players;
+
+           expect(p1.element.classList.contains('a'));
+           expect(p2.element.classList.contains('d'));
+
+           cmp.exp = false;
+           fixture.detectChanges();
+           engine.flush();
+
+           players = getLog();
+           resetLog();
+           expect(players.length).toEqual(2);
+           const [p3, p4] = players;
+
+           expect(p3.element.classList.contains('a'));
+           expect(p4.element.classList.contains('d'));
+         });
+
+      it('should collect multiple root levels of :enter and :leave nodes', () => {
+        @Component({
+          selector: 'ani-cmp',
+          animations: [
+            trigger('pageAnimation', [
+              transition(':enter', []),
+              transition('* => *', [
+                query(':leave', [
+                  animate('1s', style({ opacity: 0 }))
+                ], { optional: true }),
+                query(':enter', [
+                  animate('1s', style({ opacity: 1 }))
+                ], { optional: true })
+              ])
+            ])
+          ],
+          template: `
+            <div [@pageAnimation]="status">
+              <header>
+                <div *ngIf="!loading" class="title">{{ title }}</div>
+                <div *ngIf="loading" class="loading">loading...</div>
+              </header>
+              <section>
+                <div class="page">
+                  <div *ngIf="page1" class="page1">
+                    <div *ngIf="true">page 1</div>
+                  </div>
+                  <div *ngIf="page2" class="page2">
+                    <div *ngIf="true">page 2</div>
+                  </div>
+                </div>
+              </section>
+            </div>  
+          `
+        })
+        class Cmp {
+          get title() {
+            if (this.page1) {
+              return 'hello from page1';
+            }
+            return 'greetings from page2';
+          }
+
+          page1 = false;
+          page2 = false;
+          loading = false;
+
+          get status() {
+            if (this.loading) return 'loading';
+            if (this.page1) return 'page1';
+            if (this.page2) return 'page2';
+            return '';
+          }
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.loading = true;
+        fixture.detectChanges();
+        engine.flush();
+
+        let players = getLog();
+        resetLog();
+        cancelAllPlayers(players);
+
+        cmp.page1 = true;
+        cmp.loading = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        let p1: MockAnimationPlayer;
+        let p2: MockAnimationPlayer;
+        let p3: MockAnimationPlayer;
+
+        players = getLog();
+        expect(players.length).toEqual(3);
+        [p1, p2, p3] = players;
+
+        expect(p1.element.classList.contains('loading')).toBe(true);
+        expect(p2.element.classList.contains('title')).toBe(true);
+        expect(p3.element.classList.contains('page1')).toBe(true);
+
+        resetLog();
+        cancelAllPlayers(players);
+
+        cmp.page1 = false;
+        cmp.loading = true;
+        fixture.detectChanges();
+
+        players = getLog();
+        cancelAllPlayers(players);
+
+        expect(players.length).toEqual(3);
+        [p1, p2, p3] = players;
+
+        expect(p1.element.classList.contains('title')).toBe(true);
+        expect(p2.element.classList.contains('page1')).toBe(true);
+        expect(p3.element.classList.contains('loading')).toBe(true);
+
+        resetLog();
+        cancelAllPlayers(players);
+
+        cmp.page2 = true;
+        cmp.loading = false;
+        fixture.detectChanges();
+        engine.flush();
+
+        players = getLog();
+        expect(players.length).toEqual(3);
+        [p1, p2, p3] = players;
+
+        expect(p1.element.classList.contains('loading')).toBe(true);
+        expect(p2.element.classList.contains('title')).toBe(true);
+        expect(p3.element.classList.contains('page2')).toBe(true);
+      });
+
+      it('should emulate leave animation callbacks for all sub elements that have leave triggers within the component',
+         fakeAsync(() => {
+           @Component({
+             selector: 'ani-cmp',
+             animations: [
+               trigger('parent', []), trigger('child', []),
+               trigger(
+                   'childWithAnimation',
+                   [
+                     transition(
+                         ':leave',
+                         [
+                           animate(1000, style({background: 'red'})),
+                         ]),
+                   ])
+             ],
+             template: `
+            <div data-name="p" class="parent" @parent *ngIf="exp" (@parent.start)="callback($event)" (@parent.done)="callback($event)">
+              <div data-name="c1" @child (@child.start)="callback($event)" (@child.done)="callback($event)"></div>
+              <div data-name="c2" @child (@child.start)="callback($event)" (@child.done)="callback($event)"></div>
+              <div data-name="c3" @childWithAnimation (@childWithAnimation.start)="callback($event)" (@childWithAnimation.done)="callback($event)"></div>
+            </div>
+          `
+           })
+           class Cmp {
+             public exp: boolean;
+             public log: string[] = [];
+             callback(event: any) {
+               this.log.push(event.element.getAttribute('data-name') + '-' + event.phaseName);
+             }
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+
+           cmp.exp = true;
+           fixture.detectChanges();
+           flushMicrotasks();
+           cmp.log = [];
+
+           cmp.exp = false;
+           fixture.detectChanges();
+           flushMicrotasks();
+           expect(cmp.log).toEqual([
+             'c1-start', 'c1-done', 'c2-start', 'c2-done', 'p-start', 'p-done', 'c3-start',
+             'c3-done'
+           ]);
+         }));
+
+      it('should build, but not run sub triggers when a parent animation is scheduled', () => {
+        @Component({
+          selector: 'parent-cmp',
+          animations:
+              [trigger('parent', [transition('* => *', [animate(1000, style({opacity: 0}))])])],
+          template: '<div [@parent]="exp"><child-cmp #child></child-cmp></div>'
+        })
+        class ParentCmp {
+          public exp: any;
+
+          @ViewChild('child') public childCmp: any;
+        }
+
+        @Component({
+          selector: 'child-cmp',
+          animations:
+              [trigger('child', [transition('* => *', [animate(1000, style({color: 'red'}))])])],
+          template: '<div [@child]="exp"></div>'
+        })
+        class ChildCmp {
+          public exp: any;
+        }
+
+        TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(ParentCmp);
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        const cmp = fixture.componentInstance;
+        const childCmp = cmp.childCmp;
+
+        cmp.exp = 1;
+        childCmp.exp = 1;
+        fixture.detectChanges();
+        engine.flush();
+
+        // we have 2 players, but the child is not used even though
+        // it is created.
+        const players = getLog();
+        expect(players.length).toEqual(2);
+        expect(engine.players.length).toEqual(1);
+
+        expect(engine.players[0].getRealPlayer()).toBe(players[1]);
+      });
+
+      it('should stretch the starting keyframe of a child animation queries are issued by the parent',
+         () => {
+           @Component({
+             selector: 'parent-cmp',
+             animations: [trigger(
+                 'parent',
+                 [transition(
+                     '* => *',
+                     [animate(1000, style({color: 'red'})), query('@child', animateChild())])])],
+             template: '<div [@parent]="exp"><child-cmp #child></child-cmp></div>'
+           })
+           class ParentCmp {
+             public exp: any;
+
+             @ViewChild('child') public childCmp: any;
+           }
+
+           @Component({
+             selector: 'child-cmp',
+             animations: [trigger(
+                 'child',
+                 [transition(
+                     '* => *', [style({color: 'blue'}), animate(1000, style({color: 'red'}))])])],
+             template: '<div [@child]="exp" class="child"></div>'
+           })
+           class ChildCmp {
+             public exp: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(ParentCmp);
+           fixture.detectChanges();
+           engine.flush();
+           resetLog();
+
+           const cmp = fixture.componentInstance;
+           const childCmp = cmp.childCmp;
+
+           cmp.exp = 1;
+           childCmp.exp = 1;
+           fixture.detectChanges();
+           engine.flush();
+
+           expect(engine.players.length).toEqual(1);  // child player, parent cover, parent player
+           const groupPlayer = engine.players[0].getRealPlayer() as AnimationGroupPlayer;
+           const childPlayer = groupPlayer.players.find(player => {
+             if (player instanceof MockAnimationPlayer) {
+               return matchesElement(player.element, '.child');
+             }
+             return false;
+           }) as MockAnimationPlayer;
+
+           const keyframes = childPlayer.keyframes.map(kf => {
+             delete kf['offset'];
+             return kf;
+           });
+
+           expect(keyframes.length).toEqual(3);
+
+           const [k1, k2, k3] = keyframes;
+           expect(k1).toEqual(k2);
+         });
+
+      it('should allow a parent trigger to control child triggers across multiple template boundaries even if there are no animations in between',
+         () => {
+           @Component({
+             selector: 'parent-cmp',
+             animations: [
+               trigger(
+                   'parentAnimation',
+                   [
+                     transition(
+                         '* => go',
+                         [
+                           query(':self, @grandChildAnimation', style({opacity: 0})),
+                           animate(1000, style({opacity: 1})),
+                           query(
+                               '@grandChildAnimation',
+                               [
+                                 animate(1000, style({opacity: 1})),
+                                 animateChild(),
+                               ]),
+                         ]),
+                   ]),
+             ],
+             template: '<div [@parentAnimation]="exp"><child-cmp #child></child-cmp></div>'
+           })
+           class ParentCmp {
+             public exp: any;
+
+             @ViewChild('child') public innerCmp: any;
+           }
+
+           @Component(
+               {selector: 'child-cmp', template: '<grandchild-cmp #grandchild></grandchild-cmp>'})
+           class ChildCmp {
+             @ViewChild('grandchild') public innerCmp: any;
+           }
+
+           @Component({
+             selector: 'grandchild-cmp',
+             animations: [
+               trigger(
+                   'grandChildAnimation',
+                   [
+                     transition(
+                         '* => go',
+                         [
+                           style({width: '0px'}),
+                           animate(1000, style({width: '200px'})),
+                         ]),
+                   ]),
+             ],
+             template: '<div [@grandChildAnimation]="exp"></div>'
+           })
+           class GrandChildCmp {
+             public exp: any;
+           }
+
+           TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp, GrandChildCmp]});
+
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(ParentCmp);
+           fixture.detectChanges();
+           engine.flush();
+           resetLog();
+
+           const cmp = fixture.componentInstance;
+           const grandChildCmp = cmp.innerCmp.innerCmp;
+
+           cmp.exp = 'go';
+           grandChildCmp.exp = 'go';
+
+           fixture.detectChanges();
+           engine.flush();
+           const players = getLog();
+           expect(players.length).toEqual(5);
+           const [p1, p2, p3, p4, p5] = players;
+
+           expect(p5.keyframes).toEqual([
+             {offset: 0, width: '0px'}, {offset: .67, width: '0px'}, {offset: 1, width: '200px'}
+           ]);
+         });
+    });
+
+    describe('animation control flags', () => {
+      describe('[@.disabled]', () => {
+        it('should allow a parent animation to query and animate inner nodes that are in a disabled region',
+           () => {
+             @Component({
+               selector: 'some-cmp',
+               template: `
+              <div [@myAnimation]="exp">
+                <div [@.disabled]="disabledExp">
+                  <div class="header"></div>
+                  <div class="footer"></div>
+                </div>
+              </div>
+            `,
+               animations: [
+                 trigger(
+                     'myAnimation',
+                     [
+                       transition(
+                           '* => go',
+                           [
+                             query('.header', animate(750, style({opacity: 0}))),
+                             query('.footer', animate(250, style({opacity: 0}))),
+                           ]),
+                     ]),
+               ]
+             })
+             class Cmp {
+               exp: any = '';
+               disableExp = false;
+             }
+
+             TestBed.configureTestingModule({declarations: [Cmp]});
+
+             const fixture = TestBed.createComponent(Cmp);
+             const cmp = fixture.componentInstance;
+             cmp.disableExp = true;
+             fixture.detectChanges();
+             resetLog();
+
+             cmp.exp = 'go';
+             fixture.detectChanges();
+             const players = getLog();
+             expect(players.length).toEqual(2);
+
+             const [p1, p2] = players;
+             expect(p1.duration).toEqual(750);
+             expect(p1.element.classList.contains('header'));
+             expect(p2.duration).toEqual(250);
+             expect(p2.element.classList.contains('footer'));
+           });
+
+        it('should allow a parent animation to query and animate sub animations that are in a disabled region',
+           () => {
+             @Component({
+               selector: 'some-cmp',
+               template: `
+              <div class="parent" [@parentAnimation]="exp">
+                <div [@.disabled]="disabledExp">
+                  <div class="child" [@childAnimation]="exp"></div>
+                </div>
+              </div>
+            `,
+               animations: [
+                 trigger(
+                     'parentAnimation',
+                     [
+                       transition(
+                           '* => go',
+                           [
+                             query('@childAnimation', animateChild()),
+                             animate(1000, style({opacity: 0}))
+                           ]),
+                     ]),
+                 trigger(
+                     'childAnimation',
+                     [
+                       transition('* => go', [animate(500, style({opacity: 0}))]),
+                     ]),
+               ]
+             })
+             class Cmp {
+               exp: any = '';
+               disableExp = false;
+             }
+
+             TestBed.configureTestingModule({declarations: [Cmp]});
+
+             const fixture = TestBed.createComponent(Cmp);
+             const cmp = fixture.componentInstance;
+             cmp.disableExp = true;
+             fixture.detectChanges();
+             resetLog();
+
+             cmp.exp = 'go';
+             fixture.detectChanges();
+
+             const players = getLog();
+             expect(players.length).toEqual(2);
+
+             const [p1, p2] = players;
+             expect(p1.duration).toEqual(500);
+             expect(p1.element.classList.contains('child'));
+             expect(p2.duration).toEqual(1000);
+             expect(p2.element.classList.contains('parent'));
+           });
+      });
+    });
+  });
+}
+
+function cancelAllPlayers(players: AnimationPlayer[]) {
+  players.forEach(p => p.destroy());
+}
diff --git a/packages/core/test/animation/animation_router_integration_spec.ts b/packages/core/test/animation/animation_router_integration_spec.ts
new file mode 100644
index 0000000000..545150fe19
--- /dev/null
+++ b/packages/core/test/animation/animation_router_integration_spec.ts
@@ -0,0 +1,445 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {animate, animateChild, query, style, transition, trigger, ɵAnimationGroupPlayer as AnimationGroupPlayer} from '@angular/animations';
+import {AnimationDriver, ɵAnimationEngine} from '@angular/animations/browser';
+import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
+import {Component, HostBinding} from '@angular/core';
+import {TestBed, fakeAsync, tick} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {Router, RouterOutlet} from '@angular/router';
+import {RouterTestingModule} from '@angular/router/testing';
+
+export function main() {
+  // these tests are only mean't to be run within the DOM (for now)
+  if (typeof Element == 'undefined') return;
+
+  describe('Animation Router Tests', function() {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [RouterTestingModule, BrowserAnimationsModule],
+        providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}]
+      });
+    });
+
+    it('should query the old and new routes via :leave and :enter', fakeAsync(() => {
+         @Component({
+           animations: [
+             trigger(
+                 'routerAnimations',
+                 [
+                   transition(
+                       'page1 => page2',
+                       [
+                         query(':leave', animateChild()),
+                         query(':enter', animateChild()),
+                       ]),
+                 ]),
+           ],
+           template: `
+          <div [@routerAnimations]="prepareRouteAnimation(r)">
+            <router-outlet #r="outlet"></router-outlet>
+          </div>
+        `
+         })
+         class ContainerCmp {
+           constructor(public router: Router) {}
+
+           prepareRouteAnimation(r: RouterOutlet) {
+             const animation = r.activatedRouteData['animation'];
+             const value = animation ? animation['value'] : null;
+             return value;
+           }
+         }
+
+         @Component({
+           selector: 'page1',
+           template: `page1`,
+           animations: [
+             trigger(
+                 'page1Animation',
+                 [
+                   transition(
+                       ':leave',
+                       [
+                         style({width: '200px'}),
+                         animate(1000, style({width: '0px'})),
+                       ]),
+                 ]),
+           ]
+         })
+         class Page1Cmp {
+           @HostBinding('@page1Animation') public doAnimate = true;
+         }
+
+         @Component({
+           selector: 'page2',
+           template: `page2`,
+           animations: [
+             trigger(
+                 'page2Animation',
+                 [
+                   transition(
+                       ':enter',
+                       [
+                         style({opacity: 0}),
+                         animate(1000, style({opacity: 1})),
+                       ]),
+                 ]),
+           ]
+         })
+         class Page2Cmp {
+           @HostBinding('@page2Animation') public doAnimate = true;
+         }
+
+         TestBed.configureTestingModule({
+           declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
+           imports: [RouterTestingModule.withRoutes([
+             {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
+             {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')}
+           ])]
+         });
+
+         const engine = TestBed.get(ɵAnimationEngine);
+         const fixture = TestBed.createComponent(ContainerCmp);
+         const cmp = fixture.componentInstance;
+         cmp.router.initialNavigation();
+         tick();
+         fixture.detectChanges();
+         engine.flush();
+
+         cmp.router.navigateByUrl('/page1');
+         tick();
+         fixture.detectChanges();
+         engine.flush();
+
+         cmp.router.navigateByUrl('/page2');
+         tick();
+         fixture.detectChanges();
+         engine.flush();
+
+         const player = engine.players[0] !;
+         const groupPlayer = player.getRealPlayer() as AnimationGroupPlayer;
+         const players = groupPlayer.players as MockAnimationPlayer[];
+
+         expect(players.length).toEqual(2);
+         const [p1, p2] = players;
+
+         expect(p1.duration).toEqual(1000);
+         expect(p1.keyframes).toEqual([
+           {offset: 0, width: '200px'},
+           {offset: 1, width: '0px'},
+         ]);
+
+         expect(p2.duration).toEqual(2000);
+         expect(p2.keyframes).toEqual([
+           {offset: 0, opacity: '0'},
+           {offset: .5, opacity: '0'},
+           {offset: 1, opacity: '1'},
+         ]);
+       }));
+
+    it('should allow inner enter animations to be emulated within a routed item', fakeAsync(() => {
+         @Component({
+           animations: [
+             trigger(
+                 'routerAnimations',
+                 [
+                   transition(
+                       'page1 => page2',
+                       [
+                         query(':enter', animateChild()),
+                       ]),
+                 ]),
+           ],
+           template: `
+          <div [@routerAnimations]="prepareRouteAnimation(r)">
+            <router-outlet #r="outlet"></router-outlet>
+          </div>
+        `
+         })
+         class ContainerCmp {
+           constructor(public router: Router) {}
+
+           prepareRouteAnimation(r: RouterOutlet) {
+             const animation = r.activatedRouteData['animation'];
+             const value = animation ? animation['value'] : null;
+             return value;
+           }
+         }
+
+         @Component({selector: 'page1', template: `page1`, animations: []})
+         class Page1Cmp {
+         }
+
+         @Component({
+           selector: 'page2',
+           template: `
+          <h1>Page 2</h1>
+          <div *ngIf="exp" class="if-one" @ifAnimation></div>
+          <div *ngIf="exp" class="if-two" @ifAnimation></div>
+        `,
+           animations: [
+             trigger(
+                 'page2Animation',
+                 [
+                   transition(
+                       ':enter',
+                       [query('.if-one', animateChild()), query('.if-two', animateChild())]),
+                 ]),
+             trigger(
+                 'ifAnimation',
+                 [transition(
+                     ':enter', [style({opacity: 0}), animate(1000, style({opacity: 1}))])])
+           ]
+         })
+         class Page2Cmp {
+           @HostBinding('@page2Animation') public doAnimate = true;
+
+           public exp = true;
+         }
+
+         TestBed.configureTestingModule({
+           declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
+           imports: [RouterTestingModule.withRoutes([
+             {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
+             {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')}
+           ])]
+         });
+
+         const engine = TestBed.get(ɵAnimationEngine);
+         const fixture = TestBed.createComponent(ContainerCmp);
+         const cmp = fixture.componentInstance;
+         cmp.router.initialNavigation();
+         tick();
+         fixture.detectChanges();
+         engine.flush();
+
+         cmp.router.navigateByUrl('/page1');
+         tick();
+         fixture.detectChanges();
+         engine.flush();
+
+         cmp.router.navigateByUrl('/page2');
+         tick();
+         fixture.detectChanges();
+         engine.flush();
+
+         const player = engine.players[0] !;
+         const groupPlayer = player.getRealPlayer() as AnimationGroupPlayer;
+         const players = groupPlayer.players as MockAnimationPlayer[];
+
+         expect(players.length).toEqual(2);
+         const [p1, p2] = players;
+
+         expect(p1.keyframes).toEqual([
+           {offset: 0, opacity: '0'},
+           {offset: 1, opacity: '1'},
+         ]);
+
+         expect(p2.keyframes).toEqual([
+           {offset: 0, opacity: '0'},
+           {offset: .5, opacity: '0'},
+           {offset: 1, opacity: '1'},
+         ]);
+       }));
+
+    it('should allow inner leave animations to be emulated within a routed item', fakeAsync(() => {
+         @Component({
+           animations: [
+             trigger(
+                 'routerAnimations',
+                 [
+                   transition(
+                       'page1 => page2',
+                       [
+                         query(':leave', animateChild()),
+                       ]),
+                 ]),
+           ],
+           template: `
+          <div [@routerAnimations]="prepareRouteAnimation(r)">
+            <router-outlet #r="outlet"></router-outlet>
+          </div>
+        `
+         })
+         class ContainerCmp {
+           constructor(public router: Router) {}
+
+           prepareRouteAnimation(r: RouterOutlet) {
+             const animation = r.activatedRouteData['animation'];
+             const value = animation ? animation['value'] : null;
+             return value;
+           }
+         }
+
+         @Component({
+           selector: 'page1',
+           template: `
+          <h1>Page 1</h1>
+          <div *ngIf="exp" class="if-one" @ifAnimation></div>
+          <div *ngIf="exp" class="if-two" @ifAnimation></div>
+        `,
+           animations: [
+             trigger(
+                 'page1Animation',
+                 [
+                   transition(
+                       ':leave',
+                       [query('.if-one', animateChild()), query('.if-two', animateChild())]),
+                 ]),
+             trigger(
+                 'ifAnimation',
+                 [transition(':leave', [style({opacity: 1}), animate(1000, style({opacity: 0}))])]),
+           ]
+         })
+         class Page1Cmp {
+           @HostBinding('@page1Animation') public doAnimate = true;
+
+           public exp = true;
+         }
+
+         @Component({selector: 'page2', template: `page2`, animations: []})
+         class Page2Cmp {
+         }
+
+         TestBed.configureTestingModule({
+           declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
+           imports: [RouterTestingModule.withRoutes([
+             {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
+             {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')}
+           ])]
+         });
+
+         const engine = TestBed.get(ɵAnimationEngine);
+         const fixture = TestBed.createComponent(ContainerCmp);
+         const cmp = fixture.componentInstance;
+         cmp.router.initialNavigation();
+         tick();
+         fixture.detectChanges();
+         engine.flush();
+
+         cmp.router.navigateByUrl('/page1');
+         tick();
+         fixture.detectChanges();
+         engine.flush();
+
+         cmp.router.navigateByUrl('/page2');
+         tick();
+         fixture.detectChanges();
+         engine.flush();
+
+         const player = engine.players[0] !;
+         const groupPlayer = player.getRealPlayer() as AnimationGroupPlayer;
+         const players = groupPlayer.players as MockAnimationPlayer[];
+
+         expect(players.length).toEqual(2);
+         const [p1, p2] = players;
+
+         expect(p1.keyframes).toEqual([
+           {offset: 0, opacity: '1'},
+           {offset: 1, opacity: '0'},
+         ]);
+
+         expect(p2.keyframes).toEqual([
+           {offset: 0, opacity: '1'},
+           {offset: .5, opacity: '1'},
+           {offset: 1, opacity: '0'},
+         ]);
+       }));
+
+    it('should properly collect :enter / :leave router nodes even when another non-router *template component is within the trigger boundaries',
+       fakeAsync(() => {
+         @Component({
+           selector: 'ani-cmp',
+           animations: [
+             trigger(
+                 'pageAnimation',
+                 [
+                   transition(
+                       'page1 => page2',
+                       [
+                         query('.router-container :leave', animate('1s', style({opacity: 0}))),
+                         query('.router-container :enter', animate('1s', style({opacity: 1}))),
+                       ]),
+                 ]),
+           ],
+           template: `
+          <div [@pageAnimation]="prepRoute(outlet)">
+            <header>
+              <div class="inner">
+                <div *ngIf="!loading" class="title">Page Ready</div>
+                <div *ngIf="loading" class="loading">loading...</div>
+              </div>
+            </header>
+            <section class="router-container">
+              <router-outlet #outlet="outlet"></router-outlet>
+            </section>
+          </div>
+        `
+         })
+         class ContainerCmp {
+           loading = false;
+
+           constructor(public router: Router) {}
+
+           prepRoute(outlet: any) { return outlet.activatedRouteData['animation']; }
+         }
+
+         @Component({selector: 'page1', template: `page1`})
+         class Page1Cmp {
+         }
+
+         @Component({selector: 'page2', template: `page2`})
+         class Page2Cmp {
+         }
+
+         TestBed.configureTestingModule({
+           declarations: [Page1Cmp, Page2Cmp, ContainerCmp],
+           imports: [RouterTestingModule.withRoutes([
+             {path: 'page1', component: Page1Cmp, data: makeAnimationData('page1')},
+             {path: 'page2', component: Page2Cmp, data: makeAnimationData('page2')}
+           ])]
+         });
+
+         const engine = TestBed.get(ɵAnimationEngine);
+         const fixture = TestBed.createComponent(ContainerCmp);
+         const cmp = fixture.componentInstance;
+         cmp.router.initialNavigation();
+         tick();
+         fixture.detectChanges();
+         engine.flush();
+
+         cmp.router.navigateByUrl('/page1');
+         tick();
+         cmp.loading = true;
+         fixture.detectChanges();
+         engine.flush();
+
+         cmp.router.navigateByUrl('/page2');
+         tick();
+         cmp.loading = false;
+         fixture.detectChanges();
+         engine.flush();
+
+         const players = engine.players;
+         expect(players.length).toEqual(1);
+         const [p1] = players;
+
+         const innerPlayers = p1.getRealPlayer().players;
+         expect(innerPlayers.length).toEqual(2);
+
+         const [ip1, ip2] = innerPlayers;
+         expect(ip1.element.innerText).toEqual('page1');
+         expect(ip2.element.innerText).toEqual('page2');
+       }));
+  });
+}
+
+function makeAnimationData(value: string, params: {[key: string]: any} = {}): {[key: string]: any} {
+  return {'animation': {value, params}};
+}
diff --git a/packages/core/test/animation/animations_with_web_animations_integration_spec.ts b/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
index 4b7fe3261a..4664815a95 100644
--- a/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
+++ b/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
@@ -5,10 +5,10 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {animate, style, transition, trigger} from '@angular/animations';
-import {AnimationDriver, ɵAnimationEngine} from '@angular/animations/browser';
-import {ɵDomAnimationEngine, ɵWebAnimationsDriver, ɵWebAnimationsPlayer, ɵsupportsWebAnimations} from '@angular/animations/browser'
-import {Component, ViewChild} from '@angular/core';
+import {animate, query, state, style, transition, trigger} from '@angular/animations';
+import {AnimationDriver, ɵAnimationEngine, ɵWebAnimationsDriver, ɵWebAnimationsPlayer, ɵsupportsWebAnimations} from '@angular/animations/browser';
+import {AnimationGroupPlayer} from '@angular/animations/src/players/animation_group_player';
+import {Component} from '@angular/core';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 import {TestBed} from '../../testing';
@@ -26,25 +26,27 @@ export function main() {
       });
     });
 
-    it('should animate a component that captures height during an animation', () => {
+    it('should compute (*) animation styles for a container that is being removed', () => {
       @Component({
-        selector: 'if-cmp',
+        selector: 'ani-cmp',
         template: `
-          <div *ngIf="exp" #element [@myAnimation]="exp">
-            hello {{ text }} 
+          <div @auto *ngIf="exp">
+            <div style="line-height:20px;">1</div>
+            <div style="line-height:20px;">2</div>
+            <div style="line-height:20px;">3</div>
+            <div style="line-height:20px;">4</div>
+            <div style="line-height:20px;">5</div>
           </div>
         `,
         animations: [trigger(
-            'myAnimation',
+            'auto',
             [
-              transition('* => *', [style({height: '0px'}), animate(1000, style({height: '*'}))]),
+              state('void', style({height: '0px'})), state('*', style({height: '*'})),
+              transition('* => *', animate(1000))
             ])]
       })
       class Cmp {
-        exp: any = false;
-        text: string;
-
-        @ViewChild('element') public element: any;
+        public exp: boolean = false;
       }
 
       TestBed.configureTestingModule({declarations: [Cmp]});
@@ -52,43 +54,243 @@ export function main() {
       const engine = TestBed.get(ɵAnimationEngine);
       const fixture = TestBed.createComponent(Cmp);
       const cmp = fixture.componentInstance;
-      cmp.exp = 1;
-      cmp.text = '';
+
+      cmp.exp = true;
       fixture.detectChanges();
       engine.flush();
 
-      const element = cmp.element.nativeElement;
-      element.style.lineHeight = '20px';
-      element.style.width = '50px';
+      expect(engine.players.length).toEqual(1);
+      let webPlayer = engine.players[0].getRealPlayer() as ɵWebAnimationsPlayer;
+
+      expect(webPlayer.keyframes).toEqual([
+        {height: '0px', offset: 0}, {height: '100px', offset: 1}
+      ]);
+
+      cmp.exp = false;
+      fixture.detectChanges();
+      engine.flush();
+
+      expect(engine.players.length).toEqual(1);
+      webPlayer = engine.players[0].getRealPlayer() as ɵWebAnimationsPlayer;
+
+      expect(webPlayer.keyframes).toEqual([
+        {height: '100px', offset: 0}, {height: '0px', offset: 1}
+      ]);
+    });
+
+    it('should compute (!) animation styles for a container that is being inserted', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
+          <div @auto *ngIf="exp">
+            <div style="line-height:20px;">1</div>
+            <div style="line-height:20px;">2</div>
+            <div style="line-height:20px;">3</div>
+            <div style="line-height:20px;">4</div>
+            <div style="line-height:20px;">5</div>
+          </div>
+        `,
+        animations: [trigger(
+            'auto',
+            [transition(
+                ':enter', [style({height: '!'}), animate(1000, style({height: '120px'}))])])]
+      })
+      class Cmp {
+        public exp: boolean = false;
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.get(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = true;
+      fixture.detectChanges();
+      engine.flush();
+
+      expect(engine.players.length).toEqual(1);
+      let webPlayer = engine.players[0].getRealPlayer() as ɵWebAnimationsPlayer;
+
+      expect(webPlayer.keyframes).toEqual([
+        {height: '100px', offset: 0}, {height: '120px', offset: 1}
+      ]);
+    });
+
+    it('should compute pre (!) and post (*) animation styles with different dom states', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
+            <div [@myAnimation]="exp" #parent>
+              <div *ngFor="let item of items" class="child" style="line-height:20px">
+                - {{ item }} 
+              </div>
+            </div>
+          `,
+        animations: [trigger(
+            'myAnimation',
+            [transition('* => *', [style({height: '!'}), animate(1000, style({height: '*'}))])])]
+      })
+      class Cmp {
+        public exp: number;
+        public items = [0, 1, 2, 3, 4];
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.get(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = 1;
+      fixture.detectChanges();
+      engine.flush();
+
+      expect(engine.players.length).toEqual(1);
+      let player = engine.players[0];
+      let webPlayer = player.getRealPlayer() as ɵWebAnimationsPlayer;
+
+      expect(webPlayer.keyframes).toEqual([
+        {height: '0px', offset: 0}, {height: '100px', offset: 1}
+      ]);
+
+      // we destroy the player because since it has started and is
+      // at 0ms duration a height value of `0px` will be extracted
+      // from the element and passed into the follow-up animation.
+      player.destroy();
 
       cmp.exp = 2;
-      cmp.text = '12345';
+      cmp.items = [0, 1, 2, 6];
       fixture.detectChanges();
       engine.flush();
 
-      let player = engine.activePlayers.pop() as ɵWebAnimationsPlayer;
-      player.setPosition(1);
+      expect(engine.players.length).toEqual(1);
+      player = engine.players[0];
+      webPlayer = player.getRealPlayer() as ɵWebAnimationsPlayer;
 
-      assertStyleBetween(element, 'height', 15, 25);
-
-      cmp.exp = 3;
-      cmp.text = '12345-12345-12345-12345';
-      fixture.detectChanges();
-      engine.flush();
-
-      player = engine.activePlayers.pop() as ɵWebAnimationsPlayer;
-      player.setPosition(1);
-      assertStyleBetween(element, 'height', 35, 45);
+      expect(webPlayer.keyframes).toEqual([
+        {height: '100px', offset: 0}, {height: '80px', offset: 1}
+      ]);
     });
+
+    it('should compute intermediate styles properly when an animation is cancelled', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: `
+          <div [@myAnimation]="exp">...</div>
+        `,
+        animations: [
+          trigger(
+              'myAnimation',
+              [
+                transition(
+                    '* => a',
+                    [
+                      style({width: 0, height: 0}),
+                      animate('1s', style({width: '300px', height: '600px'})),
+                    ]),
+                transition('* => b', [animate('1s', style({opacity: 0}))]),
+              ]),
+        ]
+      })
+      class Cmp {
+        public exp: string;
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.get(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = 'a';
+      fixture.detectChanges();
+
+      let player = engine.players[0] !;
+      let webPlayer = player.getRealPlayer() as ɵWebAnimationsPlayer;
+      webPlayer.setPosition(0.5);
+
+      cmp.exp = 'b';
+      fixture.detectChanges();
+
+      player = engine.players[0] !;
+      webPlayer = player.getRealPlayer() as ɵWebAnimationsPlayer;
+      expect(approximate(parseFloat(webPlayer.previousStyles['width'] as string), 150))
+          .toBeLessThan(0.05);
+      expect(approximate(parseFloat(webPlayer.previousStyles['height'] as string), 300))
+          .toBeLessThan(0.05);
+    });
+
+    it('should compute intermediate styles properly for multiple queried elements when an animation is cancelled',
+       () => {
+         @Component({
+           selector: 'ani-cmp',
+           template: `
+          <div [@myAnimation]="exp">
+            <div *ngFor="let item of items" class="target"></div>
+          </div>
+        `,
+           animations: [
+             trigger(
+                 'myAnimation',
+                 [
+                   transition(
+                       '* => full', [query(
+                                        '.target',
+                                        [
+                                          style({width: 0, height: 0}),
+                                          animate('1s', style({width: '500px', height: '1000px'})),
+                                        ])]),
+                   transition(
+                       '* => empty', [query('.target', [animate('1s', style({opacity: 0}))])]),
+                 ]),
+           ]
+         })
+         class Cmp {
+           public exp: string;
+           public items: any[] = [];
+         }
+
+         TestBed.configureTestingModule({declarations: [Cmp]});
+
+         const engine = TestBed.get(ɵAnimationEngine);
+         const fixture = TestBed.createComponent(Cmp);
+         const cmp = fixture.componentInstance;
+
+         cmp.exp = 'full';
+         cmp.items = [0, 1, 2, 3, 4];
+         fixture.detectChanges();
+
+         let player = engine.players[0] !;
+         let groupPlayer = player.getRealPlayer() as AnimationGroupPlayer;
+         let players = groupPlayer.players;
+         expect(players.length).toEqual(5);
+
+         for (let i = 0; i < players.length; i++) {
+           const p = players[i] as ɵWebAnimationsPlayer;
+           p.setPosition(0.5);
+         }
+
+         cmp.exp = 'empty';
+         cmp.items = [];
+         fixture.detectChanges();
+
+         player = engine.players[0];
+         groupPlayer = player.getRealPlayer() as AnimationGroupPlayer;
+         players = groupPlayer.players;
+
+         expect(players.length).toEqual(5);
+         for (let i = 0; i < players.length; i++) {
+           const p = players[i] as ɵWebAnimationsPlayer;
+           expect(approximate(parseFloat(p.previousStyles['width'] as string), 250))
+               .toBeLessThan(0.05);
+           expect(approximate(parseFloat(p.previousStyles['height'] as string), 500))
+               .toBeLessThan(0.05);
+         }
+       });
   });
 }
 
-function assertStyleBetween(
-    element: any, prop: string, start: string | number, end: string | number) {
-  const style = (window.getComputedStyle(element) as any)[prop] as string;
-  if (typeof start == 'number' && typeof end == 'number') {
-    const value = parseFloat(style);
-    expect(value).toBeGreaterThan(start);
-    expect(value).toBeLessThan(end);
-  }
-}
+function approximate(value: number, target: number) {
+  return Math.abs(target - value) / value;
+}
\ No newline at end of file
diff --git a/packages/core/test/application_init_spec.ts b/packages/core/test/application_init_spec.ts
index 179bb5613d..ae0bd543c4 100644
--- a/packages/core/test/application_init_spec.ts
+++ b/packages/core/test/application_init_spec.ts
@@ -5,6 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import {Injector} from '@angular/core';
 import {APP_INITIALIZER, ApplicationInitStatus} from '../src/application_init';
 import {TestBed, async, inject} from '../testing';
 
@@ -14,11 +15,13 @@ export function main() {
 
       it('should return true for `done`',
          async(inject([ApplicationInitStatus], (status: ApplicationInitStatus) => {
+           status.runInitializers();
            expect(status.done).toBe(true);
          })));
 
       it('should return a promise that resolves immediately for `donePromise`',
          async(inject([ApplicationInitStatus], (status: ApplicationInitStatus) => {
+           status.runInitializers();
            status.donePromise.then(() => { expect(status.done).toBe(true); });
          })));
     });
@@ -26,15 +29,32 @@ export function main() {
     describe('with async initializers', () => {
       let resolve: (result: any) => void;
       let promise: Promise<any>;
+      let completerResolver = false;
       beforeEach(() => {
+        let initializerFactory = (injector: Injector) => {
+          return () => {
+            const initStatus = injector.get(ApplicationInitStatus);
+            initStatus.donePromise.then(() => { expect(completerResolver).toBe(true); });
+          }
+        };
         promise = new Promise((res) => { resolve = res; });
-        TestBed.configureTestingModule(
-            {providers: [{provide: APP_INITIALIZER, multi: true, useValue: () => promise}]});
+        TestBed.configureTestingModule({
+          providers: [
+            {provide: APP_INITIALIZER, multi: true, useValue: () => promise},
+            {
+              provide: APP_INITIALIZER,
+              multi: true,
+              useFactory: initializerFactory,
+              deps: [Injector]
+            },
+          ]
+        });
       });
 
       it('should update the status once all async initializers are done',
          async(inject([ApplicationInitStatus], (status: ApplicationInitStatus) => {
-           let completerResolver = false;
+           status.runInitializers();
+
            setTimeout(() => {
              completerResolver = true;
              resolve(null);
diff --git a/packages/core/test/application_ref_spec.ts b/packages/core/test/application_ref_spec.ts
index 01deb95a60..5e9977cb63 100644
--- a/packages/core/test/application_ref_spec.ts
+++ b/packages/core/test/application_ref_spec.ts
@@ -30,11 +30,11 @@ export function main() {
 
     beforeEach(() => { mockConsole = new MockConsole(); });
 
-    function createRootEl() {
+    function createRootEl(selector = 'bootstrap-app') {
       const doc = TestBed.get(DOCUMENT);
       const rootEl = <HTMLElement>getDOM().firstChild(
-          getDOM().content(getDOM().createTemplate(`<bootstrap-app></bootstrap-app>`)));
-      const oldRoots = getDOM().querySelectorAll(doc, 'bootstrap-app');
+          getDOM().content(getDOM().createTemplate(`<${selector}></${selector}>`)));
+      const oldRoots = getDOM().querySelectorAll(doc, selector);
       for (let i = 0; i < oldRoots.length; i++) {
         getDOM().remove(oldRoots[i]);
       }
@@ -100,23 +100,64 @@ export function main() {
          expect(component.injector.get('hello')).toEqual('component');
        })));
 
+    it('should bootstrap a component with a custom selector',
+       async(inject([ApplicationRef, Compiler], (app: ApplicationRef, compiler: Compiler) => {
+         @Component({
+           selector: 'bootstrap-app',
+           template: '',
+         })
+         class SomeComponent {
+         }
+
+         @NgModule({
+           providers: [{provide: 'hello', useValue: 'component'}],
+           declarations: [SomeComponent],
+           entryComponents: [SomeComponent],
+         })
+         class SomeModule {
+         }
+
+         createRootEl('custom-selector');
+         const modFactory = compiler.compileModuleSync(SomeModule);
+         const module = modFactory.create(TestBed);
+         const cmpFactory =
+             module.componentFactoryResolver.resolveComponentFactory(SomeComponent) !;
+         const component = app.bootstrap(cmpFactory, 'custom-selector');
+
+         // The component should see the child module providers
+         expect(component.injector.get('hello')).toEqual('component');
+       })));
+
     describe('ApplicationRef', () => {
       beforeEach(() => { TestBed.configureTestingModule({imports: [createModule()]}); });
 
-      it('should throw when reentering tick', inject([ApplicationRef], (ref: ApplicationRef_) => {
-           const view = jasmine.createSpyObj('view', ['detach', 'attachToAppRef']);
-           const viewRef = jasmine.createSpyObj(
-               'viewRef', ['detectChanges', 'detachFromAppRef', 'attachToAppRef']);
-           viewRef.internalView = view;
-           view.ref = viewRef;
-           try {
-             ref.attachView(viewRef);
-             viewRef.detectChanges.and.callFake(() => ref.tick());
-             expect(() => ref.tick()).toThrowError('ApplicationRef.tick is called recursively');
-           } finally {
-             ref.detachView(viewRef);
-           }
-         }));
+      it('should throw when reentering tick', () => {
+        @Component({template: '{{reenter()}}'})
+        class ReenteringComponent {
+          reenterCount = 1;
+          reenterErr: any;
+
+          constructor(private appRef: ApplicationRef) {}
+
+          reenter() {
+            if (this.reenterCount--) {
+              try {
+                this.appRef.tick();
+              } catch (e) {
+                this.reenterErr = e;
+              }
+            }
+          }
+        }
+
+        const fixture = TestBed.configureTestingModule({declarations: [ReenteringComponent]})
+                            .createComponent(ReenteringComponent);
+        const appRef = TestBed.get(ApplicationRef) as ApplicationRef;
+        appRef.attachView(fixture.componentRef.hostView);
+        appRef.tick();
+        expect(fixture.componentInstance.reenterErr.message)
+            .toBe('ApplicationRef.tick is called recursively');
+      });
 
       describe('APP_BOOTSTRAP_LISTENER', () => {
         let capturedCompRefs: ComponentRef<any>[];
@@ -184,11 +225,9 @@ export function main() {
                    [{provide: APP_INITIALIZER, useValue: () => { throw 'Test'; }, multi: true}]))
                .then(() => expect(false).toBe(true), (e) => {
                  expect(e).toBe('Test');
-                 // Note: if the modules throws an error during construction,
-                 // we don't have an injector and therefore no way of
-                 // getting the exception handler. So
-                 // the error is only rethrown but not logged via the exception handler.
-                 expect(mockConsole.res).toEqual([]);
+                 // Error rethrown will be seen by the exception handler since it's after
+                 // construction.
+                 expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
                });
          }));
 
@@ -281,11 +320,9 @@ export function main() {
            const moduleFactory = compilerFactory.createCompiler().compileModuleSync(createModule(
                [{provide: APP_INITIALIZER, useValue: () => { throw 'Test'; }, multi: true}]));
            expect(() => defaultPlatform.bootstrapModuleFactory(moduleFactory)).toThrow('Test');
-           // Note: if the modules throws an error during construction,
-           // we don't have an injector and therefore no way of
-           // getting the exception handler. So
-           // the error is only rethrown but not logged via the exception handler.
-           expect(mockConsole.res).toEqual([]);
+           // Error rethrown will be seen by the exception handler since it's after
+           // construction.
+           expect(mockConsole.res[0].join('#')).toEqual('ERROR#Test');
          }));
 
       it('should rethrow promise errors even if the exceptionHandler is not rethrowing',
@@ -538,6 +575,14 @@ export function main() {
 
 class MockConsole {
   res: any[][] = [];
-  log(...args: any[]): void { this.res.push(args); }
-  error(...args: any[]): void { this.res.push(args); }
+  log(...args: any[]): void {
+    // Logging from ErrorHandler should run outside of the Angular Zone.
+    NgZone.assertNotInAngularZone();
+    this.res.push(args);
+  }
+  error(...args: any[]): void {
+    // Logging from ErrorHandler should run outside of the Angular Zone.
+    NgZone.assertNotInAngularZone();
+    this.res.push(args);
+  }
 }
diff --git a/packages/core/test/change_detection/change_detector_util_spec.ts b/packages/core/test/change_detection/change_detector_util_spec.ts
index a9ed81dfbd..d53569f9dd 100644
--- a/packages/core/test/change_detection/change_detector_util_spec.ts
+++ b/packages/core/test/change_detection/change_detector_util_spec.ts
@@ -7,7 +7,6 @@
  */
 
 import {devModeEqual} from '@angular/core/src/change_detection/change_detection_util';
-import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
 
 export function main() {
   describe('ChangeDetectionUtil', () => {
diff --git a/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts b/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts
index 862f67dfcd..a05137a07c 100644
--- a/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts
+++ b/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts
@@ -7,7 +7,6 @@
  */
 
 import {DefaultIterableDiffer, DefaultIterableDifferFactory} from '@angular/core/src/change_detection/differs/default_iterable_differ';
-import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
 
 import {TestIterable} from '../../change_detection/iterable';
 import {iterableChangesAsString} from '../../change_detection/util';
@@ -28,7 +27,7 @@ class ComplexItem {
 export function main() {
   describe('iterable differ', function() {
     describe('DefaultIterableDiffer', function() {
-      let differ: any /** TODO #9100 */;
+      let differ: DefaultIterableDiffer<any>;
 
       beforeEach(() => { differ = new DefaultIterableDiffer(); });
 
@@ -41,7 +40,7 @@ export function main() {
       });
 
       it('should support iterables', () => {
-        const l = new TestIterable();
+        const l: any = new TestIterable();
 
         differ.check(l);
         expect(differ.toString()).toEqual(iterableChangesAsString({collection: []}));
@@ -64,7 +63,7 @@ export function main() {
       });
 
       it('should detect additions', () => {
-        const l: any[] /** TODO #9100 */ = [];
+        const l: any[] = [];
         differ.check(l);
         expect(differ.toString()).toEqual(iterableChangesAsString({collection: []}));
 
@@ -144,7 +143,7 @@ export function main() {
       });
 
       it('should detect changes in list', () => {
-        const l: any[] /** TODO #9100 */ = [];
+        const l: any[] = [];
         differ.check(l);
 
         l.push('a');
@@ -192,19 +191,7 @@ export function main() {
         }));
       });
 
-      it('should test string by value rather than by reference (Dart)', () => {
-        const l = ['a', 'boo'];
-        differ.check(l);
-
-        const b = 'b';
-        const oo = 'oo';
-        l[1] = b + oo;
-        differ.check(l);
-        expect(differ.toString())
-            .toEqual(iterableChangesAsString({collection: ['a', 'boo'], previous: ['a', 'boo']}));
-      });
-
-      it('should ignore [NaN] != [NaN] (JS)', () => {
+      it('should ignore [NaN] != [NaN]', () => {
         const l = [NaN];
         differ.check(l);
         differ.check(l);
@@ -294,6 +281,22 @@ export function main() {
         }));
       });
 
+      // https://github.com/angular/angular/issues/17852
+      it('support re-insertion', () => {
+        const l = ['a', '*', '*', 'd', '-', '-', '-', 'e'];
+        differ.check(l);
+        l[1] = 'b';
+        l[5] = 'c';
+        differ.check(l);
+        expect(differ.toString()).toEqual(iterableChangesAsString({
+          collection: ['a', 'b[null->1]', '*[1->2]', 'd', '-', 'c[null->5]', '-[5->6]', 'e'],
+          previous: ['a', '*[1->2]', '*[2->null]', 'd', '-', '-[5->6]', '-[6->null]', 'e'],
+          additions: ['b[null->1]', 'c[null->5]'],
+          moves: ['*[1->2]', '-[5->6]'],
+          removals: ['*[2->null]', '-[6->null]'],
+        }));
+      });
+
       describe('forEachOperation', () => {
         function stringifyItemChange(record: any, p: number, c: number, originalIndex: number) {
           const suffix = originalIndex == null ? '' : ' [o=' + originalIndex + ']';
@@ -329,8 +332,8 @@ export function main() {
              const startData = [0, 1, 2, 3, 4, 5];
              const endData = [6, 2, 7, 0, 4, 8];
 
-             differ = differ.diff(startData);
-             differ = differ.diff(endData);
+             differ = differ.diff(startData) !;
+             differ = differ.diff(endData) !;
 
              const operations: string[] = [];
              differ.forEachOperation((item: any, prev: number, next: number) => {
@@ -352,12 +355,12 @@ export function main() {
              const startData = [0, 1, 2, 3];
              const endData = [2, 1];
 
-             differ = differ.diff(startData);
-             differ = differ.diff(endData);
+             differ = differ.diff(startData) !;
+             differ = differ.diff(endData) !;
 
              const operations: string[] = [];
              differ.forEachOperation((item: any, prev: number, next: number) => {
-               const value = modifyArrayUsingOperation(startData, endData, prev, next);
+               modifyArrayUsingOperation(startData, endData, prev, next);
                operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
              });
 
@@ -372,12 +375,12 @@ export function main() {
           const startData = [1, 2, 3, 4, 5, 6];
           const endData = [3, 6, 4, 9, 1, 2];
 
-          differ = differ.diff(startData);
-          differ = differ.diff(endData);
+          differ = differ.diff(startData) !;
+          differ = differ.diff(endData) !;
 
           const operations: string[] = [];
           differ.forEachOperation((item: any, prev: number, next: number) => {
-            const value = modifyArrayUsingOperation(startData, endData, prev, next);
+            modifyArrayUsingOperation(startData, endData, prev, next);
             operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
           });
 
@@ -393,12 +396,12 @@ export function main() {
           const startData = [0, 1, 2, 3, 4];
           const endData = [4, 1, 2, 3, 0, 5];
 
-          differ = differ.diff(startData);
-          differ = differ.diff(endData);
+          differ = differ.diff(startData) !;
+          differ = differ.diff(endData) !;
 
           const operations: string[] = [];
           differ.forEachOperation((item: any, prev: number, next: number) => {
-            const value = modifyArrayUsingOperation(startData, endData, prev, next);
+            modifyArrayUsingOperation(startData, endData, prev, next);
             operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
           });
 
@@ -414,12 +417,12 @@ export function main() {
           const startData = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
           const endData = [10, 11, 1, 5, 7, 8, 0, 5, 3, 6];
 
-          differ = differ.diff(startData);
-          differ = differ.diff(endData);
+          differ = differ.diff(startData) !;
+          differ = differ.diff(endData) !;
 
           const operations: string[] = [];
           differ.forEachOperation((item: any, prev: number, next: number) => {
-            const value = modifyArrayUsingOperation(startData, endData, prev, next);
+            modifyArrayUsingOperation(startData, endData, prev, next);
             operations.push(stringifyItemChange(item, prev, next, item.previousIndex));
           });
 
@@ -440,8 +443,8 @@ export function main() {
              const startData = [1, 2, 3, 4];
              const endData = [5, 6, 7, 8];
 
-             differ = differ.diff(startData);
-             differ = differ.diff(endData);
+             differ = differ.diff(startData) !;
+             differ = differ.diff(endData) !;
 
              const operations: string[] = [];
              differ.forEachOperation((item: any, prev: number, next: number) => {
@@ -465,7 +468,7 @@ export function main() {
 
         it('should treat null as an empty list', () => {
           differ.diff(['a', 'b']);
-          expect(differ.diff(null).toString()).toEqual(iterableChangesAsString({
+          expect(differ.diff(null !) !.toString()).toEqual(iterableChangesAsString({
             previous: ['a[0->null]', 'b[1->null]'],
             removals: ['a[0->null]', 'b[1->null]']
           }));
@@ -478,7 +481,7 @@ export function main() {
     });
 
     describe('trackBy function by id', function() {
-      let differ: any /** TODO #9100 */;
+      let differ: any;
 
       const trackByItemId = (index: number, item: any): any => item.id;
 
@@ -565,8 +568,9 @@ export function main() {
         }));
       });
     });
+
     describe('trackBy function by index', function() {
-      let differ: any /** TODO #9100 */;
+      let differ: DefaultIterableDiffer<string>;
 
       const trackByIndex = (index: number, item: any): number => index;
 
@@ -584,9 +588,6 @@ export function main() {
           identityChanges: ['h']
         }));
       });
-
     });
-
-
   });
 }
diff --git a/packages/core/test/change_detection/differs/default_keyvalue_differ_spec.ts b/packages/core/test/change_detection/differs/default_keyvalue_differ_spec.ts
index 0100426dee..e97e444316 100644
--- a/packages/core/test/change_detection/differs/default_keyvalue_differ_spec.ts
+++ b/packages/core/test/change_detection/differs/default_keyvalue_differ_spec.ts
@@ -7,7 +7,9 @@
  */
 
 import {DefaultKeyValueDiffer, DefaultKeyValueDifferFactory} from '@angular/core/src/change_detection/differs/default_keyvalue_differ';
-import {kvChangesAsString} from '../../change_detection/util';
+
+import {kvChangesAsString, testChangesAsString} from '../../change_detection/util';
+
 
 // todo(vicb): Update the code & tests for object equality
 export function main() {
@@ -28,13 +30,13 @@ export function main() {
 
         m.set('a', 1);
         differ.check(m);
-        expect(differ.toString())
-            .toEqual(kvChangesAsString({map: ['a[null->1]'], additions: ['a[null->1]']}));
+        expect(kvChangesAsString(differ))
+            .toEqual(testChangesAsString({map: ['a[null->1]'], additions: ['a[null->1]']}));
 
         m.set('b', 2);
         differ.check(m);
-        expect(differ.toString())
-            .toEqual(kvChangesAsString(
+        expect(kvChangesAsString(differ))
+            .toEqual(testChangesAsString(
                 {map: ['a', 'b[null->2]'], previous: ['a'], additions: ['b[null->2]']}));
       });
 
@@ -46,7 +48,7 @@ export function main() {
         m.set(2, 10);
         m.set(1, 20);
         differ.check(m);
-        expect(differ.toString()).toEqual(kvChangesAsString({
+        expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
           map: ['1[10->20]', '2[20->10]'],
           previous: ['1[10->20]', '2[20->10]'],
           changes: ['1[10->20]', '2[20->10]']
@@ -72,19 +74,19 @@ export function main() {
 
         m.set('a', 'A');
         differ.check(m);
-        expect(differ.toString())
-            .toEqual(kvChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}));
+        expect(kvChangesAsString(differ))
+            .toEqual(testChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}));
 
         m.set('b', 'B');
         differ.check(m);
-        expect(differ.toString())
-            .toEqual(kvChangesAsString(
+        expect(kvChangesAsString(differ))
+            .toEqual(testChangesAsString(
                 {map: ['a', 'b[null->B]'], previous: ['a'], additions: ['b[null->B]']}));
 
         m.set('b', 'BB');
         m.set('d', 'D');
         differ.check(m);
-        expect(differ.toString()).toEqual(kvChangesAsString({
+        expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
           map: ['a', 'b[B->BB]', 'd[null->D]'],
           previous: ['a', 'b[B->BB]'],
           additions: ['d[null->D]'],
@@ -93,13 +95,13 @@ export function main() {
 
         m.delete('b');
         differ.check(m);
-        expect(differ.toString())
-            .toEqual(kvChangesAsString(
+        expect(kvChangesAsString(differ))
+            .toEqual(testChangesAsString(
                 {map: ['a', 'd'], previous: ['a', 'b[BB->null]', 'd'], removals: ['b[BB->null]']}));
 
         m.clear();
         differ.check(m);
-        expect(differ.toString()).toEqual(kvChangesAsString({
+        expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
           previous: ['a[A->null]', 'd[D->null]'],
           removals: ['a[A->null]', 'd[D->null]']
         }));
@@ -110,7 +112,8 @@ export function main() {
         differ.check(m);
 
         differ.check(m);
-        expect(differ.toString()).toEqual(kvChangesAsString({map: ['foo'], previous: ['foo']}));
+        expect(kvChangesAsString(differ))
+            .toEqual(testChangesAsString({map: ['foo'], previous: ['foo']}));
       });
 
       it('should work regardless key order', () => {
@@ -123,7 +126,7 @@ export function main() {
         m.set('a', 1);
         differ.check(m);
 
-        expect(differ.toString()).toEqual(kvChangesAsString({
+        expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
           map: ['b[0->1]', 'a[0->1]'],
           previous: ['a[0->1]', 'b[0->1]'],
           changes: ['b[0->1]', 'a[0->1]']
@@ -145,19 +148,19 @@ export function main() {
 
           m['a'] = 'A';
           differ.check(m);
-          expect(differ.toString())
-              .toEqual(kvChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}));
+          expect(kvChangesAsString(differ))
+              .toEqual(testChangesAsString({map: ['a[null->A]'], additions: ['a[null->A]']}));
 
           m['b'] = 'B';
           differ.check(m);
-          expect(differ.toString())
-              .toEqual(kvChangesAsString(
+          expect(kvChangesAsString(differ))
+              .toEqual(testChangesAsString(
                   {map: ['a', 'b[null->B]'], previous: ['a'], additions: ['b[null->B]']}));
 
           m['b'] = 'BB';
           m['d'] = 'D';
           differ.check(m);
-          expect(differ.toString()).toEqual(kvChangesAsString({
+          expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
             map: ['a', 'b[B->BB]', 'd[null->D]'],
             previous: ['a', 'b[B->BB]'],
             additions: ['d[null->D]'],
@@ -168,7 +171,7 @@ export function main() {
           m['a'] = 'A';
           m['d'] = 'D';
           differ.check(m);
-          expect(differ.toString()).toEqual(kvChangesAsString({
+          expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
             map: ['a', 'd'],
             previous: ['a', 'b[BB->null]', 'd'],
             removals: ['b[BB->null]']
@@ -176,7 +179,7 @@ export function main() {
 
           m = {};
           differ.check(m);
-          expect(differ.toString()).toEqual(kvChangesAsString({
+          expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
             previous: ['a[A->null]', 'd[D->null]'],
             removals: ['a[A->null]', 'd[D->null]']
           }));
@@ -187,18 +190,31 @@ export function main() {
           differ.check({a: 0, b: 0});
           differ.check({b: 1, a: 1});
 
-          expect(differ.toString()).toEqual(kvChangesAsString({
+          expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
             map: ['b[0->1]', 'a[0->1]'],
             previous: ['a[0->1]', 'b[0->1]'],
             changes: ['b[0->1]', 'a[0->1]']
           }));
         });
 
+        // https://github.com/angular/angular/issues/14997
+        it('should work regardless key order', () => {
+          differ.check({a: 1, b: 2});
+          differ.check({b: 3, a: 2});
+          differ.check({a: 1, b: 2});
+
+          expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
+            map: ['a[2->1]', 'b[3->2]'],
+            previous: ['b[3->2]', 'a[2->1]'],
+            changes: ['a[2->1]', 'b[3->2]']
+          }));
+        });
+
         it('should when the first item is moved', () => {
           differ.check({a: 'a', b: 'b'});
           differ.check({c: 'c', a: 'a'});
 
-          expect(differ.toString()).toEqual(kvChangesAsString({
+          expect(kvChangesAsString(differ)).toEqual(testChangesAsString({
             map: ['c[null->c]', 'a'],
             previous: ['a', 'b[b->null]'],
             additions: ['c[null->c]'],
@@ -223,8 +239,8 @@ export function main() {
         it('should treat null as an empty list', () => {
           m.set('a', 'A');
           differ.diff(m);
-          expect(differ.diff(null).toString())
-              .toEqual(kvChangesAsString({previous: ['a[A->null]'], removals: ['a[A->null]']}));
+          expect(kvChangesAsString(differ.diff(null)))
+              .toEqual(testChangesAsString({previous: ['a[A->null]'], removals: ['a[A->null]']}));
         });
 
         it('should throw when given an invalid collection', () => {
diff --git a/packages/core/test/change_detection/differs/iterable_differs_spec.ts b/packages/core/test/change_detection/differs/iterable_differs_spec.ts
index 24410f0249..8a94bb1799 100644
--- a/packages/core/test/change_detection/differs/iterable_differs_spec.ts
+++ b/packages/core/test/change_detection/differs/iterable_differs_spec.ts
@@ -8,15 +8,14 @@
 
 import {ReflectiveInjector} from '@angular/core';
 import {IterableDiffers} from '@angular/core/src/change_detection/differs/iterable_differs';
-import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
 
 import {SpyIterableDifferFactory} from '../../spies';
 
 export function main() {
   describe('IterableDiffers', function() {
-    let factory1: any /** TODO #9100 */;
-    let factory2: any /** TODO #9100 */;
-    let factory3: any /** TODO #9100 */;
+    let factory1: any;
+    let factory2: any;
+    let factory3: any;
 
     beforeEach(() => {
       factory1 = new SpyIterableDifferFactory();
@@ -57,7 +56,7 @@ export function main() {
             .toThrowError(/Cannot extend IterableDiffers without a parent injector/);
       });
 
-      it('should extend di-inherited diffesr', () => {
+      it('should extend di-inherited differs', () => {
         const parent = new IterableDiffers([factory1]);
         const injector =
             ReflectiveInjector.resolveAndCreate([{provide: IterableDiffers, useValue: parent}]);
diff --git a/packages/core/test/change_detection/util.ts b/packages/core/test/change_detection/util.ts
index 5e43c23a94..31b403511b 100644
--- a/packages/core/test/change_detection/util.ts
+++ b/packages/core/test/change_detection/util.ts
@@ -6,6 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {KeyValueChangeRecord, KeyValueChanges} from '@angular/core/src/change_detection/differs/keyvalue_differs';
+
+import {looseIdentical, stringify} from '../../src/util';
 
 
 export function iterableChangesAsString(
@@ -19,7 +22,30 @@ export function iterableChangesAsString(
       'identityChanges: ' + identityChanges.join(', ') + '\n';
 }
 
-export function kvChangesAsString(
+function kvcrAsString(kvcr: KeyValueChangeRecord<string, any>) {
+  return looseIdentical(kvcr.previousValue, kvcr.currentValue) ?
+      stringify(kvcr.key) :
+      (stringify(kvcr.key) + '[' + stringify(kvcr.previousValue) + '->' +
+       stringify(kvcr.currentValue) + ']');
+}
+
+export function kvChangesAsString(kvChanges: KeyValueChanges<string, any>) {
+  const map: string[] = [];
+  const previous: string[] = [];
+  const changes: string[] = [];
+  const additions: string[] = [];
+  const removals: string[] = [];
+
+  kvChanges.forEachItem(r => map.push(kvcrAsString(r)));
+  kvChanges.forEachPreviousItem(r => previous.push(kvcrAsString(r)));
+  kvChanges.forEachChangedItem(r => changes.push(kvcrAsString(r)));
+  kvChanges.forEachAddedItem(r => additions.push(kvcrAsString(r)));
+  kvChanges.forEachRemovedItem(r => removals.push(kvcrAsString(r)));
+
+  return testChangesAsString({map, previous, additions, changes, removals});
+}
+
+export function testChangesAsString(
     {map, previous, additions, changes, removals}:
         {map?: any[], previous?: any[], additions?: any[], changes?: any[], removals?: any[]}):
     string {
diff --git a/packages/core/test/fake_async_spec.ts b/packages/core/test/fake_async_spec.ts
index 7dcce2de59..1fdc6fb925 100644
--- a/packages/core/test/fake_async_spec.ts
+++ b/packages/core/test/fake_async_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {discardPeriodicTasks, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
+import {discardPeriodicTasks, fakeAsync, flush, flushMicrotasks, tick} from '@angular/core/testing';
 import {Log, beforeEach, describe, inject, it} from '@angular/core/testing/src/testing_internal';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
@@ -261,6 +261,42 @@ export function main() {
                    'microtask; timer; t microtask; periodic timer; pt microtask; periodic timer; pt microtask');
            clearInterval(id);
          }));
+
+      it('should flush tasks', fakeAsync(() => {
+           let ran = false;
+           setTimeout(() => { ran = true; }, 10);
+
+           flush();
+           expect(ran).toEqual(true);
+         }));
+
+      it('should flush multiple tasks', fakeAsync(() => {
+           let ran = false;
+           let ran2 = false;
+           setTimeout(() => { ran = true; }, 10);
+           setTimeout(() => { ran2 = true; }, 30);
+
+           let elapsed = flush();
+
+           expect(ran).toEqual(true);
+           expect(ran2).toEqual(true);
+           expect(elapsed).toEqual(30);
+         }));
+
+      it('should move periodic tasks', fakeAsync(() => {
+           let ran = false;
+           let count = 0;
+           setInterval(() => { count++; }, 10);
+           setTimeout(() => { ran = true; }, 35);
+
+           let elapsed = flush();
+
+           expect(count).toEqual(3);
+           expect(ran).toEqual(true);
+           expect(elapsed).toEqual(35);
+
+           discardPeriodicTasks();
+         }));
     });
 
     describe('outside of the fakeAsync zone', () => {
@@ -276,6 +312,12 @@ export function main() {
         }).toThrowError('The code should be running in the fakeAsync zone to call this function');
       });
 
+      it('calling flush should throw', () => {
+        expect(() => {
+          flush();
+        }).toThrowError('The code should be running in the fakeAsync zone to call this function');
+      });
+
       it('calling discardPeriodicTasks should throw', () => {
         expect(() => {
           discardPeriodicTasks();
diff --git a/packages/core/test/linker/change_detection_integration_spec.ts b/packages/core/test/linker/change_detection_integration_spec.ts
index 8a1839c037..8db439d1a4 100644
--- a/packages/core/test/linker/change_detection_integration_spec.ts
+++ b/packages/core/test/linker/change_detection_integration_spec.ts
@@ -8,11 +8,12 @@
 
 import {ElementSchemaRegistry} from '@angular/compiler/src/schema/element_schema_registry';
 import {TEST_COMPILER_PROVIDERS} from '@angular/compiler/testing/src/test_bindings';
-import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, DebugElement, Directive, DoCheck, EventEmitter, HostBinding, Inject, Injectable, Input, OnChanges, OnDestroy, OnInit, Output, Pipe, PipeTransform, RenderComponentType, Renderer, RendererFactory2, RootRenderer, SimpleChange, SimpleChanges, TemplateRef, Type, ViewChild, ViewContainerRef, WrappedValue} from '@angular/core';
+import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DebugElement, Directive, DoCheck, EventEmitter, HostBinding, Inject, Injectable, Input, OnChanges, OnDestroy, OnInit, Output, Pipe, PipeTransform, RenderComponentType, Renderer, RendererFactory2, RootRenderer, SimpleChange, SimpleChanges, TemplateRef, Type, ViewChild, ViewContainerRef, WrappedValue} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
+
 import {DomElementSchemaRegistry} from '../../../compiler/index';
 import {MockSchemaRegistry} from '../../../compiler/testing/index';
 
@@ -666,6 +667,22 @@ export function main() {
 
     });
 
+    describe('RendererFactory', () => {
+      it('should call the begin and end methods on the renderer factory when change detection is called',
+         fakeAsync(() => {
+           const ctx = createCompFixture('<div testDirective [a]="42"></div>');
+           const rf = TestBed.get(RendererFactory2);
+           spyOn(rf, 'begin');
+           spyOn(rf, 'end');
+           expect(rf.begin).not.toHaveBeenCalled();
+           expect(rf.end).not.toHaveBeenCalled();
+
+           ctx.detectChanges(false);
+           expect(rf.begin).toHaveBeenCalled();
+           expect(rf.end).toHaveBeenCalled();
+         }));
+    });
+
     describe('change notification', () => {
       describe('updating directives', () => {
         it('should happen without invoking the renderer', fakeAsync(() => {
@@ -765,6 +782,7 @@ export function main() {
              try {
                ctx.detectChanges(false);
              } catch (e) {
+               expect(e.message).toBe('Boom!');
                errored = true;
              }
              expect(errored).toBe(true);
@@ -776,7 +794,8 @@ export function main() {
              try {
                ctx.detectChanges(false);
              } catch (e) {
-               throw new Error('Second detectChanges() should not have run detection.');
+               expect(e.message).toBe('Boom!');
+               throw new Error('Second detectChanges() should not have called ngOnInit.');
              }
              expect(directiveLog.filter(['ngOnInit'])).toEqual([]);
            }));
@@ -1175,6 +1194,21 @@ export function main() {
            expect(renderLog.log).toEqual([]);
          }));
 
+      it('Detached should disable OnPush', fakeAsync(() => {
+           const ctx = createCompFixture('<push-cmp [value]="value"></push-cmp>');
+           ctx.componentInstance.value = 0;
+           ctx.detectChanges();
+           renderLog.clear();
+
+           const cmp: CompWithRef = queryDirs(ctx.debugElement, PushComp)[0];
+           cmp.changeDetectorRef.detach();
+
+           ctx.componentInstance.value = 1;
+           ctx.detectChanges();
+
+           expect(renderLog.log).toEqual([]);
+         }));
+
       it('Detached view can be checked locally', fakeAsync(() => {
            const ctx = createCompFixture('<wrap-comp-with-ref></wrap-comp-with-ref>');
            const cmp: CompWithRef = queryDirs(ctx.debugElement, CompWithRef)[0];
@@ -1225,7 +1259,6 @@ export function main() {
 
            ctx.detectChanges();
            expect(cmp.renderCount).toBe(count);
-
          }));
 
     });
@@ -1277,6 +1310,120 @@ export function main() {
            ctx.detectChanges();
            expect(renderLog.loggedValues).toEqual(['Tom']);
          });
+
+      describe('projected views', () => {
+        let log: string[];
+
+        @Directive({selector: '[i]'})
+        class DummyDirective {
+          @Input()
+          i: any;
+        }
+
+        @Component({
+          selector: 'main-cmp',
+          template:
+              `<span [i]="log('start')"></span><outer-cmp><ng-template><span [i]="log('tpl')"></span></ng-template></outer-cmp>`
+        })
+        class MainComp {
+          constructor(public cdRef: ChangeDetectorRef) {}
+          log(id: string) { log.push(`main-${id}`); }
+        }
+
+        @Component({
+          selector: 'outer-cmp',
+          template:
+              `<span [i]="log('start')"></span><inner-cmp [outerTpl]="tpl"><ng-template><span [i]="log('tpl')"></span></ng-template></inner-cmp>`
+        })
+        class OuterComp {
+          @ContentChild(TemplateRef)
+          tpl: TemplateRef<any>;
+
+          constructor(public cdRef: ChangeDetectorRef) {}
+          log(id: string) { log.push(`outer-${id}`); }
+        }
+
+        @Component({
+          selector: 'inner-cmp',
+          template:
+              `<span [i]="log('start')"></span>><ng-container [ngTemplateOutlet]="outerTpl"></ng-container><ng-container [ngTemplateOutlet]="tpl"></ng-container>`
+        })
+        class InnerComp {
+          @ContentChild(TemplateRef)
+          tpl: TemplateRef<any>;
+
+          @Input()
+          outerTpl: TemplateRef<any>
+
+          constructor(public cdRef: ChangeDetectorRef) {}
+          log(id: string) { log.push(`inner-${id}`); }
+        }
+
+        let ctx: ComponentFixture<MainComp>;
+        let mainComp: MainComp;
+        let outerComp: OuterComp;
+        let innerComp: InnerComp;
+
+        beforeEach(() => {
+          log = [];
+          ctx = TestBed
+                    .configureTestingModule(
+                        {declarations: [MainComp, OuterComp, InnerComp, DummyDirective]})
+                    .createComponent(MainComp);
+          mainComp = ctx.componentInstance;
+          outerComp = ctx.debugElement.query(By.directive(OuterComp)).injector.get(OuterComp);
+          innerComp = ctx.debugElement.query(By.directive(InnerComp)).injector.get(InnerComp);
+        });
+
+        it('should dirty check projected views in regular order', () => {
+          ctx.detectChanges(false);
+          expect(log).toEqual(
+              ['main-start', 'outer-start', 'inner-start', 'main-tpl', 'outer-tpl']);
+
+          log = [];
+          ctx.detectChanges(false);
+          expect(log).toEqual(
+              ['main-start', 'outer-start', 'inner-start', 'main-tpl', 'outer-tpl']);
+        });
+
+        it('should not dirty check projected views if neither the declaration nor the insertion place is dirty checked',
+           () => {
+             ctx.detectChanges(false);
+             log = [];
+             mainComp.cdRef.detach();
+             ctx.detectChanges(false);
+
+             expect(log).toEqual([]);
+           });
+
+        it('should dirty check projected views if the insertion place is dirty checked', () => {
+          ctx.detectChanges(false);
+          log = [];
+
+          innerComp.cdRef.detectChanges();
+          expect(log).toEqual(['inner-start', 'main-tpl', 'outer-tpl']);
+        });
+
+        it('should dirty check projected views if the declaration place is dirty checked', () => {
+          ctx.detectChanges(false);
+          log = [];
+          innerComp.cdRef.detach();
+          mainComp.cdRef.detectChanges();
+
+          expect(log).toEqual(['main-start', 'outer-start', 'main-tpl', 'outer-tpl']);
+
+          log = [];
+          outerComp.cdRef.detectChanges();
+
+          expect(log).toEqual(['outer-start', 'outer-tpl']);
+
+          log = [];
+          outerComp.cdRef.detach();
+          mainComp.cdRef.detectChanges();
+
+          expect(log).toEqual(['main-start', 'main-tpl']);
+        });
+      });
     });
 
     describe('class binding', () => {
diff --git a/packages/core/test/linker/integration_spec.ts b/packages/core/test/linker/integration_spec.ts
index 5ad4966b07..40eb1e4380 100644
--- a/packages/core/test/linker/integration_spec.ts
+++ b/packages/core/test/linker/integration_spec.ts
@@ -7,7 +7,7 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Compiler, ComponentFactory, EventEmitter, Host, Inject, Injectable, InjectionToken, Injector, NO_ERRORS_SCHEMA, NgModule, NgModuleRef, OnDestroy, ReflectiveInjector, SkipSelf} from '@angular/core';
+import {Compiler, ComponentFactory, ErrorHandler, EventEmitter, Host, Inject, Injectable, InjectionToken, Injector, NO_ERRORS_SCHEMA, NgModule, NgModuleRef, OnDestroy, ReflectiveInjector, SkipSelf} from '@angular/core';
 import {ChangeDetectionStrategy, ChangeDetectorRef, PipeTransform} from '@angular/core/src/change_detection/change_detection';
 import {getDebugContext} from '@angular/core/src/errors';
 import {ComponentFactoryResolver} from '@angular/core/src/linker/component_factory_resolver';
@@ -103,7 +103,8 @@ function declareTests({useJit}: {useJit: boolean}) {
         fixture.componentInstance.ctxProp = 'Hello World!';
         fixture.detectChanges();
 
-        expect(fixture.debugElement.children[0].nativeElement.id).toEqual('Hello World!');
+        expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'id'))
+            .toEqual('Hello World!');
       });
 
       it('should consume binding to aria-* attributes', () => {
@@ -165,11 +166,13 @@ function declareTests({useJit}: {useJit: boolean}) {
            const fixture = TestBed.createComponent(MyComp);
 
            fixture.detectChanges();
-           expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(0);
+           expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'tabIndex'))
+               .toEqual(0);
 
            fixture.componentInstance.ctxNumProp = 5;
            fixture.detectChanges();
-           expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(5);
+           expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'tabIndex'))
+               .toEqual(5);
          });
 
       it('should consume binding to camel-cased properties', () => {
@@ -179,11 +182,13 @@ function declareTests({useJit}: {useJit: boolean}) {
         const fixture = TestBed.createComponent(MyComp);
 
         fixture.detectChanges();
-        expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeFalsy();
+        expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'readOnly'))
+            .toBeFalsy();
 
         fixture.componentInstance.ctxBoolProp = true;
         fixture.detectChanges();
-        expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeTruthy();
+        expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'readOnly'))
+            .toBeTruthy();
       });
 
       it('should consume binding to innerHtml', () => {
@@ -228,7 +233,7 @@ function declareTests({useJit}: {useJit: boolean}) {
         fixture.debugElement.componentInstance.ctxProp = 'foo';
         fixture.detectChanges();
 
-        expect(nativeEl.htmlFor).toBe('foo');
+        expect(getDOM().getProperty(nativeEl, 'htmlFor')).toBe('foo');
       });
 
       it('should consume directive watch expression change.', () => {
@@ -897,7 +902,7 @@ function declareTests({useJit}: {useJit: boolean}) {
 
         fixture.detectChanges();
 
-        expect(tc.nativeElement.id).toEqual('newId');
+        expect(getDOM().getProperty(tc.nativeElement, 'id')).toEqual('newId');
       });
 
       it('should not use template variables for expressions in hostProperties', () => {
@@ -1480,16 +1485,18 @@ function declareTests({useJit}: {useJit: boolean}) {
 
              const tc = fixture.debugElement.children[0];
 
-             try {
-               tc.injector.get(DirectiveEmittingEvent).fireEvent('boom');
-             } catch (e) {
-               const c = getDebugContext(e);
-               expect(getDOM().nodeName(c.renderNode).toUpperCase()).toEqual('SPAN');
-               expect(getDOM().nodeName(c.componentRenderElement).toUpperCase()).toEqual('DIV');
-               expect((<Injector>c.injector).get).toBeTruthy();
-               expect(c.context).toBe(fixture.componentInstance);
-               expect(c.references['local']).toBeDefined();
-             }
+             const errorHandler = tc.injector.get(ErrorHandler);
+             let err: any;
+             spyOn(errorHandler, 'handleError').and.callFake((e: any) => err = e);
+             tc.injector.get(DirectiveEmittingEvent).fireEvent('boom');
+
+             expect(err).toBeTruthy();
+             const c = getDebugContext(err);
+             expect(getDOM().nodeName(c.renderNode).toUpperCase()).toEqual('SPAN');
+             expect(getDOM().nodeName(c.componentRenderElement).toUpperCase()).toEqual('DIV');
+             expect((<Injector>c.injector).get).toBeTruthy();
+             expect(c.context).toBe(fixture.componentInstance);
+             expect(c.references['local']).toBeDefined();
            }));
       }
     });
@@ -1571,7 +1578,7 @@ function declareTests({useJit}: {useJit: boolean}) {
         fixture.detectChanges();
 
         const el = getDOM().querySelector(fixture.nativeElement, 'span');
-        expect(el.title).toEqual('TITLE');
+        expect(getDOM().getProperty(el, 'title')).toEqual('TITLE');
       });
     });
 
diff --git a/packages/core/test/linker/jit_summaries_integration_spec.ts b/packages/core/test/linker/jit_summaries_integration_spec.ts
new file mode 100644
index 0000000000..149df8d4e0
--- /dev/null
+++ b/packages/core/test/linker/jit_summaries_integration_spec.ts
@@ -0,0 +1,194 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ResourceLoader} from '@angular/compiler';
+import {CompileMetadataResolver} from '@angular/compiler/src/metadata_resolver';
+import {MockResourceLoader} from '@angular/compiler/testing/src/resource_loader_mock';
+import {Component, Directive, Injectable, NgModule, Pipe, Type} from '@angular/core';
+import {TestBed, async, getTestBed} from '@angular/core/testing';
+
+export function main() {
+  describe('Jit Summaries', () => {
+    let instances: Map<any, Base>;
+
+    class SomeDep {}
+
+    class Base {
+      static annotations: any[];
+      static parameters: any[][];
+
+      constructor(public dep: SomeDep) {
+        instances.set(Object.getPrototypeOf(this).constructor, this);
+      }
+    }
+
+    function expectInstanceCreated(type: any) {
+      const instance = instances.get(type) !;
+      expect(instance).toBeDefined();
+      expect(instance.dep instanceof SomeDep).toBe(true);
+    }
+
+    class SomeModule extends Base {}
+
+    class SomePrivateComponent extends Base {}
+
+    class SomePublicComponent extends Base {}
+
+    class SomeDirective extends Base {}
+
+    class SomePipe extends Base {
+      transform(value: any) { return value; }
+    }
+
+    class SomeService extends Base {}
+
+    // Move back into the it which needs it after https://github.com/angular/tsickle/issues/547 is
+    // fixed.
+    @Component({template: '<div someDir>{{1 | somePipe}}</div>'})
+    class TestComp3 {
+      constructor(service: SomeService) {}
+    }
+
+
+    function resetTestEnvironmentWithSummaries(summaries?: () => any[]) {
+      const {platform, ngModule} = getTestBed();
+      TestBed.resetTestEnvironment();
+      TestBed.initTestEnvironment(ngModule, platform, summaries);
+    }
+
+    function createSummaries() {
+      const resourceLoader = new MockResourceLoader();
+
+      setMetadata(resourceLoader);
+
+      TestBed.configureCompiler({providers: [{provide: ResourceLoader, useValue: resourceLoader}]});
+      TestBed.configureTestingModule({imports: [SomeModule], providers: [SomeDep]});
+
+      TestBed.compileComponents().then(() => {
+        const metadataResolver = TestBed.get(CompileMetadataResolver) as CompileMetadataResolver;
+        const summaries = [
+          metadataResolver.getNgModuleSummary(SomeModule),
+          // test nesting via closures, as we use this in the generated code too.
+          () =>
+              [metadataResolver.getDirectiveSummary(SomePublicComponent),
+               metadataResolver.getDirectiveSummary(SomePrivateComponent),
+        ],
+          metadataResolver.getDirectiveSummary(SomeDirective),
+          metadataResolver.getPipeSummary(SomePipe),
+          metadataResolver.getInjectableSummary(SomeService)
+        ];
+        clearMetadata();
+        resetTestEnvironmentWithSummaries(() => summaries);
+      });
+
+      resourceLoader.flush();
+    }
+
+    function setMetadata(resourceLoader: MockResourceLoader) {
+      Base.parameters = [[SomeDep]];
+
+      SomeModule.annotations = [new NgModule({
+        declarations: [SomePublicComponent, SomePrivateComponent, SomeDirective, SomePipe],
+        exports: [SomeDirective, SomePipe, SomePublicComponent],
+        providers: [SomeService]
+      })];
+
+      SomePublicComponent.annotations = [new Component({templateUrl: 'somePublicUrl.html'})];
+      resourceLoader.expect('somePublicUrl.html', `Hello public world!`);
+
+      SomePrivateComponent.annotations = [new Component({templateUrl: 'somePrivateUrl.html'})];
+      resourceLoader.expect('somePrivateUrl.html', `Hello private world!`);
+
+      SomeDirective.annotations = [new Directive({selector: '[someDir]'})];
+
+      SomePipe.annotations = [new Pipe({name: 'somePipe'})];
+
+      SomeService.annotations = [new Injectable()];
+    }
+
+    function clearMetadata() {
+      Base.parameters = [];
+      SomeModule.annotations = [];
+      SomePublicComponent.annotations = [];
+      SomePrivateComponent.annotations = [];
+      SomeDirective.annotations = [];
+      SomePipe.annotations = [];
+      SomeService.annotations = [];
+    }
+
+    beforeEach(async(() => {
+      instances = new Map<any, any>();
+      createSummaries();
+    }));
+
+    afterEach(() => { resetTestEnvironmentWithSummaries(); });
+
+    it('should use directive metadata from summaries', () => {
+      @Component({template: '<div someDir></div>'})
+      class TestComp {
+      }
+
+      TestBed
+          .configureTestingModule({providers: [SomeDep], declarations: [TestComp, SomeDirective]})
+          .createComponent(TestComp);
+      expectInstanceCreated(SomeDirective);
+    });
+
+    it('should use pipe metadata from summaries', () => {
+      @Component({template: '{{1 | somePipe}}'})
+      class TestComp {
+      }
+
+      TestBed.configureTestingModule({providers: [SomeDep], declarations: [TestComp, SomePipe]})
+          .createComponent(TestComp);
+      expectInstanceCreated(SomePipe);
+    });
+
+    it('should use Service metadata from summaries', () => {
+      TestBed.configureTestingModule({
+        providers: [SomeService, SomeDep],
+      });
+      TestBed.get(SomeService);
+      expectInstanceCreated(SomeService);
+    });
+
+    it('should use NgModule metadata from summaries', () => {
+      TestBed
+          .configureTestingModule(
+              {providers: [SomeDep], declarations: [TestComp3], imports: [SomeModule]})
+          .createComponent(TestComp3);
+
+      expectInstanceCreated(SomeModule);
+      expectInstanceCreated(SomeDirective);
+      expectInstanceCreated(SomePipe);
+      expectInstanceCreated(SomeService);
+    });
+
+    it('should allow to create private components from imported NgModule summaries', () => {
+      TestBed.configureTestingModule({providers: [SomeDep], imports: [SomeModule]})
+          .createComponent(SomePrivateComponent);
+      expectInstanceCreated(SomePrivateComponent);
+    });
+
+    it('should throw when trying to mock a type with a summary', () => {
+      TestBed.resetTestingModule();
+      expect(() => TestBed.overrideComponent(SomePrivateComponent, {add: {}}).compileComponents())
+          .toThrowError(
+              'SomePrivateComponent was AOT compiled, so its metadata cannot be changed.');
+      TestBed.resetTestingModule();
+      expect(() => TestBed.overrideDirective(SomeDirective, {add: {}}).compileComponents())
+          .toThrowError('SomeDirective was AOT compiled, so its metadata cannot be changed.');
+      TestBed.resetTestingModule();
+      expect(() => TestBed.overridePipe(SomePipe, {add: {name: 'test'}}).compileComponents())
+          .toThrowError('SomePipe was AOT compiled, so its metadata cannot be changed.');
+      TestBed.resetTestingModule();
+      expect(() => TestBed.overrideModule(SomeModule, {add: {}}).compileComponents())
+          .toThrowError('SomeModule was AOT compiled, so its metadata cannot be changed.');
+    });
+  });
+}
diff --git a/packages/core/test/linker/ng_module_integration_spec.ts b/packages/core/test/linker/ng_module_integration_spec.ts
index 3352749e95..0991efe7dc 100644
--- a/packages/core/test/linker/ng_module_integration_spec.ts
+++ b/packages/core/test/linker/ng_module_integration_spec.ts
@@ -11,7 +11,7 @@ import {Console} from '@angular/core/src/console';
 import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
-import {NgModuleInjector} from '../../src/linker/ng_module_factory';
+import {InternalNgModuleRef} from '../../src/linker/ng_module_factory';
 import {clearModulesForTest} from '../../src/linker/ng_module_factory_loader';
 import {stringify} from '../../src/util';
 
@@ -127,7 +127,7 @@ function declareTests({useJit}: {useJit: boolean}) {
 
     function createModule<T>(
         moduleType: Type<T>, parentInjector?: Injector | null): NgModuleRef<T> {
-      return compiler.compileModuleSync(moduleType).create(parentInjector);
+      return compiler.compileModuleSync(moduleType).create(parentInjector || null);
     }
 
     function createComp<T>(compType: Type<T>, moduleType: Type<any>): ComponentFixture<T> {
@@ -404,9 +404,9 @@ function declareTests({useJit}: {useJit: boolean}) {
         class SomeModule {
         }
 
-        const ngModule = <NgModuleInjector<any>>createModule(SomeModule);
-        expect(ngModule.bootstrapFactories.length).toBe(1);
-        expect(ngModule.bootstrapFactories[0].componentType).toBe(SomeComp);
+        const ngModule = <InternalNgModuleRef<any>>createModule(SomeModule);
+        expect(ngModule._bootstrapComponents.length).toBe(1);
+        expect(ngModule._bootstrapComponents[0]).toBe(SomeComp);
       });
 
     });
@@ -787,6 +787,47 @@ function declareTests({useJit}: {useJit: boolean}) {
         expect(child.get(Injector)).toBe(child);
       });
 
+      describe('injecting lazy providers into an eager provider via Injector.get', () => {
+
+        it('should inject providers that were declared before it', () => {
+          @NgModule({
+            providers: [
+              {provide: 'lazy', useFactory: () => 'lazyValue'},
+              {
+                provide: 'eager',
+                useFactory: (i: Injector) => `eagerValue: ${i.get('lazy')}`,
+                deps: [Injector]
+              },
+            ]
+          })
+          class MyModule {
+            // NgModule is eager, which makes all of its deps eager
+            constructor(@Inject('eager') eager: any) {}
+          }
+
+          expect(createModule(MyModule).injector.get('eager')).toBe('eagerValue: lazyValue');
+        });
+
+        it('should inject providers that were declared after it', () => {
+          @NgModule({
+            providers: [
+              {
+                provide: 'eager',
+                useFactory: (i: Injector) => `eagerValue: ${i.get('lazy')}`,
+                deps: [Injector]
+              },
+              {provide: 'lazy', useFactory: () => 'lazyValue'},
+            ]
+          })
+          class MyModule {
+            // NgModule is eager, which makes all of its deps eager
+            constructor(@Inject('eager') eager: any) {}
+          }
+
+          expect(createModule(MyModule).injector.get('eager')).toBe('eagerValue: lazyValue');
+        });
+      });
+
       it('should throw when no provider defined', () => {
         const injector = createInjector([]);
         expect(() => injector.get('NonExisting')).toThrowError('No provider for NonExisting!');
diff --git a/packages/core/test/linker/projection_integration_spec.ts b/packages/core/test/linker/projection_integration_spec.ts
index 36e6e213d9..9ba823ed4b 100644
--- a/packages/core/test/linker/projection_integration_spec.ts
+++ b/packages/core/test/linker/projection_integration_spec.ts
@@ -130,11 +130,13 @@ export function main() {
                                      .map(de => de.injector.get(ManualViewportDirective));
 
       expect(main.nativeElement).toHaveText('(, B)');
+
       viewportDirectives.forEach(d => d.show());
+      main.detectChanges();
       expect(main.nativeElement).toHaveText('(A1, B)');
 
       viewportDirectives.forEach(d => d.hide());
-
+      main.detectChanges();
       expect(main.nativeElement).toHaveText('(, B)');
     });
 
@@ -200,10 +202,11 @@ export function main() {
       expect(main.nativeElement).toHaveText('(, BC)');
 
       viewportDirective.show();
+      main.detectChanges();
       expect(main.nativeElement).toHaveText('(A, BC)');
 
       viewportDirective.hide();
-
+      main.detectChanges();
       expect(main.nativeElement).toHaveText('(, BC)');
     });
 
@@ -492,7 +495,7 @@ export function main() {
       expect(main.nativeElement).toHaveText('(, D)');
 
       viewViewportDir.show();
-
+      main.detectChanges();
       expect(main.nativeElement).toHaveText('(AC, D)');
 
       const contentViewportDir =
@@ -500,12 +503,13 @@ export function main() {
               ManualViewportDirective);
 
       contentViewportDir.show();
-
+      main.detectChanges();
       expect(main.nativeElement).toHaveText('(ABC, D)');
 
       // hide view viewport, and test that it also hides
       // the content viewport's views
       viewViewportDir.hide();
+      main.detectChanges();
       expect(main.nativeElement).toHaveText('(, D)');
     });
   });
diff --git a/packages/core/test/linker/query_integration_spec.ts b/packages/core/test/linker/query_integration_spec.ts
index 1b18ab716a..92b8fa0047 100644
--- a/packages/core/test/linker/query_integration_spec.ts
+++ b/packages/core/test/linker/query_integration_spec.ts
@@ -536,6 +536,52 @@ export function main() {
         expect(q.query.length).toBe(0);
       });
 
+      // Note: This tests is just document our current behavior, which we do
+      // for performance reasons.
+      it('should not affected queries for projected templates if views are detached or moved', () => {
+        const template =
+            '<manual-projecting #q><ng-template let-x="x"><div [text]="x"></div></ng-template></manual-projecting>';
+        const view = createTestCmpAndDetectChanges(MyComp0, template);
+        const q = view.debugElement.children[0].references !['q'] as ManualProjecting;
+        expect(q.query.length).toBe(0);
+
+        const view1 = q.vc.createEmbeddedView(q.template, {'x': '1'});
+        const view2 = q.vc.createEmbeddedView(q.template, {'x': '2'});
+        view.detectChanges();
+        expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2']);
+
+        q.vc.detach(1);
+        q.vc.detach(0);
+
+        view.detectChanges();
+        expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2']);
+
+        q.vc.insert(view2);
+        q.vc.insert(view1);
+
+        view.detectChanges();
+        expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2']);
+      });
+
+      it('should remove manually projected templates if their parent view is destroyed', () => {
+        const template = `
+          <manual-projecting #q><ng-template #tpl><div text="1"></div></ng-template></manual-projecting>
+          <div *ngIf="shouldShow">
+            <ng-container [ngTemplateOutlet]="tpl"></ng-container>
+          </div>
+        `;
+        const view = createTestCmp(MyComp0, template);
+        const q = view.debugElement.children[0].references !['q'];
+        view.componentInstance.shouldShow = true;
+        view.detectChanges();
+
+        expect(q.query.length).toBe(1);
+
+        view.componentInstance.shouldShow = false;
+        view.detectChanges();
+        expect(q.query.length).toBe(0);
+      });
+
       it('should not throw if a content template is queried and created in the view during change detection',
          () => {
            @Component(
diff --git a/packages/core/test/linker/regression_integration_spec.ts b/packages/core/test/linker/regression_integration_spec.ts
index dd11db580a..200151a51b 100644
--- a/packages/core/test/linker/regression_integration_spec.ts
+++ b/packages/core/test/linker/regression_integration_spec.ts
@@ -6,15 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ANALYZE_FOR_ENTRY_COMPONENTS, Component, ContentChild, Directive, InjectionToken, Injector, Input, Pipe, PipeTransform, Provider, QueryList, Renderer2, SimpleChanges, TemplateRef, ViewChildren, ViewContainerRef} from '@angular/core';
-import {TestBed, fakeAsync, tick} from '@angular/core/testing';
-import {By} from '@angular/platform-browser';
+import {ANALYZE_FOR_ENTRY_COMPONENTS, ApplicationRef, Component, ComponentRef, ContentChild, Directive, ErrorHandler, EventEmitter, HostListener, InjectionToken, Injector, Input, NgModule, NgModuleRef, NgZone, Output, Pipe, PipeTransform, Provider, QueryList, Renderer2, SimpleChanges, TemplateRef, ViewChildren, ViewContainerRef, destroyPlatform} from '@angular/core';
+import {TestBed, async, fakeAsync, inject, tick} from '@angular/core/testing';
+import {BrowserModule, By, DOCUMENT} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
 export function main() {
   describe('jit', () => { declareTests({useJit: true}); });
 
   describe('no jit', () => { declareTests({useJit: false}); });
+
+  declareTestsUsingBootstrap();
 }
 
 function declareTests({useJit}: {useJit: boolean}) {
@@ -238,14 +242,14 @@ function declareTests({useJit}: {useJit: boolean}) {
         return MyComponent;
       }
       const HeroComponent = ComponentFactory('my-hero', 'my hero');
-      const VillianComponent = ComponentFactory('a-villian', 'a villian');
+      const VillainComponent = ComponentFactory('a-villain', 'a villain');
       const MainComponent = ComponentFactory(
-          'my-app', 'I was saved by <my-hero></my-hero> from <a-villian></a-villian>.');
+          'my-app', 'I was saved by <my-hero></my-hero> from <a-villain></a-villain>.');
 
       TestBed.configureTestingModule(
-          {declarations: [HeroComponent, VillianComponent, MainComponent]});
+          {declarations: [HeroComponent, VillainComponent, MainComponent]});
       const fixture = TestBed.createComponent(MainComponent);
-      expect(fixture.nativeElement).toHaveText('I was saved by my hero from a villian.');
+      expect(fixture.nativeElement).toHaveText('I was saved by my hero from a villain.');
     });
 
     it('should allow to use the renderer outside of views', () => {
@@ -365,6 +369,132 @@ function declareTests({useJit}: {useJit: boolean}) {
       expect(testDirs[1].tpl).toBeDefined();
       expect(testDirs[2].tpl).toBeDefined();
     });
+
+    it('should not add ng-version for dynamically created components', () => {
+      @Component({template: ''})
+      class App {
+      }
+
+      @NgModule({declarations: [App], entryComponents: [App]})
+      class MyModule {
+      }
+
+      const modRef = TestBed.configureTestingModule({imports: [MyModule]})
+                         .get(NgModuleRef) as NgModuleRef<MyModule>;
+      const compRef =
+          modRef.componentFactoryResolver.resolveComponentFactory(App).create(Injector.NULL);
+
+      expect(getDOM().hasAttribute(compRef.location.nativeElement, 'ng-version')).toBe(false);
+    });
+  });
+}
+
+function declareTestsUsingBootstrap() {
+  // Place to put reproductions for regressions
+  describe('regressions using bootstrap', () => {
+    const COMP_SELECTOR = 'root-comp';
+
+    class MockConsole {
+      errors: any[][] = [];
+      error(...s: any[]): void { this.errors.push(s); }
+    }
+
+    let logger: MockConsole;
+    let errorHandler: ErrorHandler;
+
+    beforeEach(inject([DOCUMENT], (doc: any) => {
+      destroyPlatform();
+      const el = getDOM().createElement(COMP_SELECTOR, doc);
+      getDOM().appendChild(doc.body, el);
+
+      logger = new MockConsole();
+      errorHandler = new ErrorHandler();
+      errorHandler._console = logger as any;
+    }));
+
+    afterEach(() => { destroyPlatform(); });
+
+    if (getDOM().supportsDOMEvents()) {
+      // This test needs a real DOM....
+
+      it('should keep change detecting if there was an error', (done) => {
+        @Component({
+          selector: COMP_SELECTOR,
+          template:
+              '<button (click)="next()"></button><button (click)="nextAndThrow()"></button><button (dirClick)="nextAndThrow()"></button><span>Value:{{value}}</span><span>{{throwIfNeeded()}}</span>'
+        })
+        class ErrorComp {
+          value = 0;
+          thrownValue = 0;
+          next() { this.value++; }
+          nextAndThrow() {
+            this.value++;
+            this.throwIfNeeded();
+          }
+          throwIfNeeded() {
+            NgZone.assertInAngularZone();
+            if (this.thrownValue !== this.value) {
+              this.thrownValue = this.value;
+              throw new Error(`Error: ${this.value}`);
+            }
+          }
+        }
+
+        @Directive({selector: '[dirClick]'})
+        class EventDir {
+          @Output()
+          dirClick = new EventEmitter();
+
+          @HostListener('click', ['$event'])
+          onClick(event: any) { this.dirClick.next(event); }
+        }
+
+        @NgModule({
+          imports: [BrowserModule],
+          declarations: [ErrorComp, EventDir],
+          bootstrap: [ErrorComp],
+          providers: [{provide: ErrorHandler, useValue: errorHandler}],
+        })
+        class TestModule {
+        }
+
+        platformBrowserDynamic().bootstrapModule(TestModule).then((ref) => {
+          NgZone.assertNotInAngularZone();
+          const appRef = ref.injector.get(ApplicationRef) as ApplicationRef;
+          const compRef = appRef.components[0] as ComponentRef<ErrorComp>;
+          const compEl = compRef.location.nativeElement;
+          const nextBtn = compEl.children[0];
+          const nextAndThrowBtn = compEl.children[1];
+          const nextAndThrowDirBtn = compEl.children[2];
+
+          nextBtn.click();
+          assertValueAndErrors(compEl, 1, 0);
+          nextBtn.click();
+          assertValueAndErrors(compEl, 2, 2);
+
+          nextAndThrowBtn.click();
+          assertValueAndErrors(compEl, 3, 4);
+          nextAndThrowBtn.click();
+          assertValueAndErrors(compEl, 4, 6);
+
+          nextAndThrowDirBtn.click();
+          assertValueAndErrors(compEl, 5, 8);
+          nextAndThrowDirBtn.click();
+          assertValueAndErrors(compEl, 6, 10);
+
+          // Assert that there were no more errors
+          expect(logger.errors.length).toBe(12);
+          done();
+        });
+
+        function assertValueAndErrors(compEl: any, value: number, errorIndex: number) {
+          expect(compEl).toHaveText(`Value:${value}`);
+          expect(logger.errors[errorIndex][0]).toBe('ERROR');
+          expect(logger.errors[errorIndex][1].message).toBe(`Error: ${value}`);
+          expect(logger.errors[errorIndex + 1][0]).toBe('ERROR CONTEXT');
+        }
+      });
+    }
   });
 }
 
diff --git a/packages/core/test/linker/source_map_integration_node_only_spec.ts b/packages/core/test/linker/source_map_integration_node_only_spec.ts
index 2c59f949cc..cf29d1bfff 100644
--- a/packages/core/test/linker/source_map_integration_node_only_spec.ts
+++ b/packages/core/test/linker/source_map_integration_node_only_spec.ts
@@ -10,7 +10,7 @@ import {ResourceLoader} from '@angular/compiler';
 import {SourceMap} from '@angular/compiler/src/output/source_map';
 import {extractSourceMap, originalPositionFor} from '@angular/compiler/test/output/source_map_util';
 import {MockResourceLoader} from '@angular/compiler/testing/src/resource_loader_mock';
-import {Attribute, Component, Directive, ɵglobal} from '@angular/core';
+import {Attribute, Component, Directive, ErrorHandler, ɵglobal} from '@angular/core';
 import {getErrorLogger} from '@angular/core/src/errors';
 import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
 
@@ -231,11 +231,10 @@ export function main() {
            const comp = compileAndCreateComponent(MyComp);
 
            let error: any;
-           try {
-             comp.debugElement.children[0].children[0].triggerEventHandler('click', 'EVENT');
-           } catch (e) {
-             error = e;
-           }
+           const errorHandler = TestBed.get(ErrorHandler);
+           spyOn(errorHandler, 'handleError').and.callFake((e: any) => error = e);
+           comp.debugElement.children[0].children[0].triggerEventHandler('click', 'EVENT');
+           expect(error).toBeTruthy();
            // the stack should point to the binding
            expect(getSourcePositionForStack(error.stack)).toEqual({
              line: 2,
diff --git a/packages/core/test/linker/view_injector_integration_spec.ts b/packages/core/test/linker/view_injector_integration_spec.ts
index 77359bc2c9..96e3f6605f 100644
--- a/packages/core/test/linker/view_injector_integration_spec.ts
+++ b/packages/core/test/linker/view_injector_integration_spec.ts
@@ -342,6 +342,66 @@ export function main() {
         expect(created).toBe(true);
       });
 
+      describe('injecting lazy providers into an eager provider via Injector.get', () => {
+
+        it('should inject providers that were declared before it', () => {
+          @Component({
+            template: '',
+            providers: [
+              {provide: 'lazy', useFactory: () => 'lazyValue'},
+              {
+                provide: 'eager',
+                useFactory: (i: Injector) => `eagerValue: ${i.get('lazy')}`,
+                deps: [Injector]
+              },
+            ]
+          })
+          class MyComp {
+            // Component is eager, which makes all of its deps eager
+            constructor(@Inject('eager') eager: any) {}
+          }
+
+          const ctx =
+              TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+          expect(ctx.debugElement.injector.get('eager')).toBe('eagerValue: lazyValue');
+        });
+
+        it('should inject providers that were declared after it', () => {
+          @Component({
+            template: '',
+            providers: [
+              {
+                provide: 'eager',
+                useFactory: (i: Injector) => `eagerValue: ${i.get('lazy')}`,
+                deps: [Injector]
+              },
+              {provide: 'lazy', useFactory: () => 'lazyValue'},
+            ]
+          })
+          class MyComp {
+            // Component is eager, which makes all of its deps eager
+            constructor(@Inject('eager') eager: any) {}
+          }
+
+          const ctx =
+              TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+          expect(ctx.debugElement.injector.get('eager')).toBe('eagerValue: lazyValue');
+        });
+      });
+
+      it('should allow injecting lazy providers via Injector.get from an eager provider that is declared earlier',
+         () => {
+           @Component({providers: [{provide: 'a', useFactory: () => 'aValue'}], template: ''})
+           class SomeComponent {
+             public a: string;
+             constructor(injector: Injector) { this.a = injector.get('a'); }
+           }
+
+           const comp = TestBed.configureTestingModule({declarations: [SomeComponent]})
+                            .createComponent(SomeComponent);
+           expect(comp.componentInstance.a).toBe('aValue');
+         });
+
       it('should support ngOnDestroy for lazy providers', () => {
         let created = false;
         let destroyed = false;
@@ -652,6 +712,46 @@ export function main() {
         expect(compEl.nativeElement).toHaveText('1');
       });
 
+      it('should inject ChangeDetectorRef of a same element component into a directive', () => {
+        TestBed.configureTestingModule(
+            {declarations: [PushComponentNeedsChangeDetectorRef, DirectiveNeedsChangeDetectorRef]});
+        const cf = createComponentFixture(
+            '<div componentNeedsChangeDetectorRef directiveNeedsChangeDetectorRef></div>');
+        cf.detectChanges();
+        const compEl = cf.debugElement.children[0];
+        const comp = compEl.injector.get(PushComponentNeedsChangeDetectorRef);
+        const dir = compEl.injector.get(DirectiveNeedsChangeDetectorRef);
+        comp.counter = 1;
+        cf.detectChanges();
+        expect(compEl.nativeElement).toHaveText('0');
+        dir.changeDetectorRef.markForCheck();
+        cf.detectChanges();
+        expect(compEl.nativeElement).toHaveText('1');
+      });
+
+      it(`should not inject ChangeDetectorRef of a parent element's component into a directive`, () => {
+        TestBed
+            .configureTestingModule({
+              declarations: [PushComponentNeedsChangeDetectorRef, DirectiveNeedsChangeDetectorRef]
+            })
+            .overrideComponent(
+                PushComponentNeedsChangeDetectorRef,
+                {set: {template: '<ng-content></ng-content>{{counter}}'}});
+        const cf = createComponentFixture(
+            '<div componentNeedsChangeDetectorRef><div directiveNeedsChangeDetectorRef></div></div>');
+        cf.detectChanges();
+        const compEl = cf.debugElement.children[0];
+        const comp = compEl.injector.get(PushComponentNeedsChangeDetectorRef);
+        const dirEl = compEl.children[0];
+        const dir = dirEl.injector.get(DirectiveNeedsChangeDetectorRef);
+        comp.counter = 1;
+        cf.detectChanges();
+        expect(compEl.nativeElement).toHaveText('0');
+        dir.changeDetectorRef.markForCheck();
+        cf.detectChanges();
+        expect(compEl.nativeElement).toHaveText('0');
+      });
+
       it('should inject ViewContainerRef', () => {
         TestBed.configureTestingModule({declarations: [NeedsViewContainerRef]});
         const el = createComponent('<div needsViewContainerRef></div>');
diff --git a/packages/core/test/reflection/reflector_spec.ts b/packages/core/test/reflection/reflector_spec.ts
index 9ec32d4e44..7cd91633b8 100644
--- a/packages/core/test/reflection/reflector_spec.ts
+++ b/packages/core/test/reflection/reflector_spec.ts
@@ -29,10 +29,11 @@ interface PropDecorator {
 }
 
 /** @Annotation */ const ClassDecorator =
-    <ClassDecoratorFactory>makeDecorator('ClassDecorator', {value: undefined});
+    <ClassDecoratorFactory>makeDecorator('ClassDecorator', (data: any) => data);
 /** @Annotation */ const ParamDecorator =
-    makeParamDecorator('ParamDecorator', [['value', undefined]]);
-/** @Annotation */ const PropDecorator = makePropDecorator('PropDecorator', [['value', undefined]]);
+    makeParamDecorator('ParamDecorator', (value: any) => ({value}));
+/** @Annotation */ const PropDecorator =
+    makePropDecorator('PropDecorator', (value: any) => ({value}));
 
 class AType {
   constructor(public value: any) {}
diff --git a/packages/core/test/testability/testability_spec.ts b/packages/core/test/testability/testability_spec.ts
index 17fe365830..95af50ffaf 100644
--- a/packages/core/test/testability/testability_spec.ts
+++ b/packages/core/test/testability/testability_spec.ts
@@ -28,22 +28,20 @@ function microTask(fn: Function): void {
 @Injectable()
 class MockNgZone extends NgZone {
   /** @internal */
-  _onUnstableStream: EventEmitter<any>;
-  get onUnstable() { return this._onUnstableStream; }
+  onUnstable: EventEmitter<any>;
 
   /** @internal */
-  _onStableStream: EventEmitter<any>;
-  get onStable() { return this._onStableStream; }
+  onStable: EventEmitter<any>;
 
   constructor() {
     super({enableLongStackTrace: false});
-    this._onUnstableStream = new EventEmitter(false);
-    this._onStableStream = new EventEmitter(false);
+    this.onUnstable = new EventEmitter(false);
+    this.onStable = new EventEmitter(false);
   }
 
-  unstable(): void { this._onUnstableStream.emit(null); }
+  unstable(): void { this.onUnstable.emit(null); }
 
-  stable(): void { this._onStableStream.emit(null); }
+  stable(): void { this.onStable.emit(null); }
 }
 
 export function main() {
diff --git a/packages/core/test/util/decorators_spec.ts b/packages/core/test/util/decorators_spec.ts
index 3626022f14..aa7a8cadda 100644
--- a/packages/core/test/util/decorators_spec.ts
+++ b/packages/core/test/util/decorators_spec.ts
@@ -17,14 +17,15 @@ class DecoratedChild extends DecoratedParent {}
 export function main() {
   const Reflect = global['Reflect'];
 
-  const TerminalDecorator = makeDecorator('TerminalDecorator', {terminal: true});
+  const TerminalDecorator =
+      makeDecorator('TerminalDecorator', (data: any) => ({terminal: true, ...data}));
   const TestDecorator = makeDecorator(
-      'TestDecorator', {marker: undefined}, Object, (fn: any) => fn.Terminal = TerminalDecorator);
+      'TestDecorator', (data: any) => data, Object, (fn: any) => fn.Terminal = TerminalDecorator);
 
   describe('Property decorators', () => {
     // https://github.com/angular/angular/issues/12224
     it('should work on the "watch" property', () => {
-      const Prop = makePropDecorator('Prop', [['value', undefined]]);
+      const Prop = makePropDecorator('Prop', (value: any) => ({value}));
 
       class TestClass {
         @Prop('firefox!')
@@ -36,13 +37,14 @@ export function main() {
     });
 
     it('should work with any default plain values', () => {
-      const Default = makePropDecorator('Default', [['value', 5]]);
+      const Default =
+          makePropDecorator('Default', (data: any) => ({value: data != null ? data : 5}));
       expect(new Default(0)['value']).toEqual(0);
     });
 
     it('should work with any object values', () => {
       // make sure we don't walk up the prototype chain
-      const Default = makePropDecorator('Default', [{value: 5}]);
+      const Default = makePropDecorator('Default', (data: any) => ({value: 5, ...data}));
       const value = Object.create({value: 10});
       expect(new Default(value)['value']).toEqual(5);
     });
@@ -121,7 +123,7 @@ export function main() {
         });
 
 
-        it('should ensure that we dont accidently patch native objects', () => {
+        it('should ensure that we dont accidentally patch native objects', () => {
           expect(() => {
             (<Function>Class)({constructor: Object});
           }).toThrowError('Can not use native Object as constructor');
diff --git a/packages/core/test/view/component_view_spec.ts b/packages/core/test/view/component_view_spec.ts
index f1b680f83c..017669cad1 100644
--- a/packages/core/test/view/component_view_spec.ts
+++ b/packages/core/test/view/component_view_spec.ts
@@ -10,7 +10,13 @@ import {Injector, RenderComponentType, RootRenderer, Sanitizer, SecurityContext,
 import {ArgumentType, BindingFlags, NodeCheckFn, NodeDef, NodeFlags, OutputType, RootData, Services, ViewData, ViewDefinition, ViewFlags, ViewHandleEventFn, ViewState, ViewUpdateFn, anchorDef, asElementData, asProviderData, directiveDef, elementDef, rootRenderNodes, textDef, viewDef} from '@angular/core/src/view/index';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 
-import {createRootView, isBrowser, removeNodes} from './helper';
+import {createRootView, isBrowser, recordNodeToRemove} from './helper';
+
+/**
+ * We map addEventListener to the Zones internal name. This is because we want to be fast
+ * and bypass the zone bookkeeping. We know that we can do the bookkeeping faster.
+ */
+const addEventListener = '__zone_symbol__addEventListener';
 
 export function main() {
   describe(`Component Views`, () => {
@@ -56,7 +62,7 @@ export function main() {
         beforeEach(() => {
           rootNode = document.createElement('root');
           document.body.appendChild(rootNode);
-          removeNodes.push(rootNode);
+          recordNodeToRemove(rootNode);
         });
 
         it('should select root elements based on a selector', () => {
@@ -180,7 +186,7 @@ export function main() {
 
           const update = jasmine.createSpy('updater');
 
-          const addListenerSpy = spyOn(HTMLElement.prototype, 'addEventListener').and.callThrough();
+          const addListenerSpy = spyOn(HTMLElement.prototype, addEventListener).and.callThrough();
 
           const {view} = createAndGetRootNodes(compViewDef(
               [
@@ -230,7 +236,7 @@ export function main() {
         });
       }
 
-      it('should stop dirty checking views that threw errors in change detection', () => {
+      it('should not stop dirty checking views that threw errors in change detection', () => {
         class AComp {
           a: any;
         }
@@ -255,8 +261,8 @@ export function main() {
         expect(update).toHaveBeenCalled();
 
         update.calls.reset();
-        Services.checkAndUpdateView(view);
-        expect(update).not.toHaveBeenCalled();
+        expect(() => Services.checkAndUpdateView(view)).toThrowError('Test');
+        expect(update).toHaveBeenCalled();
       });
 
     });
@@ -301,4 +307,4 @@ export function main() {
     });
 
   });
-}
\ No newline at end of file
+}
diff --git a/packages/core/test/view/element_spec.ts b/packages/core/test/view/element_spec.ts
index b6fa0a13b0..dbd3999e16 100644
--- a/packages/core/test/view/element_spec.ts
+++ b/packages/core/test/view/element_spec.ts
@@ -6,12 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injector, RenderComponentType, RootRenderer, Sanitizer, SecurityContext, ViewEncapsulation, WrappedValue, getDebugNode} from '@angular/core';
+import {ErrorHandler, Injector, RenderComponentType, RootRenderer, Sanitizer, SecurityContext, ViewEncapsulation, WrappedValue, getDebugNode} from '@angular/core';
 import {getDebugContext} from '@angular/core/src/errors';
 import {ArgumentType, BindingFlags, DebugContext, NodeDef, NodeFlags, OutputType, RootData, Services, ViewData, ViewDefinition, ViewFlags, ViewHandleEventFn, ViewUpdateFn, anchorDef, asElementData, elementDef, rootRenderNodes, textDef, viewDef} from '@angular/core/src/view/index';
+import {TestBed} from '@angular/core/testing';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 
-import {ARG_TYPE_VALUES, checkNodeInlineOrDynamic, createRootView, isBrowser, removeNodes} from './helper';
+import {ARG_TYPE_VALUES, checkNodeInlineOrDynamic, createRootView, isBrowser, recordNodeToRemove} from './helper';
+
+/**
+ * We map addEventListener to the Zones internal name. This is because we want to be fast
+ * and bypass the zone bookkeeping. We know that we can do the bookkeeping faster.
+ */
+const addEventListener = '__zone_symbol__addEventListener';
+const removeEventListener = '__zone_symbol__removeEventListener';
 
 export function main() {
   describe(`View Elements`, () => {
@@ -181,7 +189,7 @@ export function main() {
           // won't work in IE.
           result.rootNodes.forEach((node) => {
             document.body.appendChild(node);
-            removeNodes.push(node);
+            recordNodeToRemove(node);
           });
           return result;
         }
@@ -189,7 +197,7 @@ export function main() {
         it('should listen to DOM events', () => {
           const handleEventSpy = jasmine.createSpy('handleEvent');
           const removeListenerSpy =
-              spyOn(HTMLElement.prototype, 'removeEventListener').and.callThrough();
+              spyOn(HTMLElement.prototype, removeEventListener).and.callThrough();
           const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
               NodeFlags.None, null !, null !, 0, 'button', null !, null !, [[null !, 'click']],
               handleEventSpy)]));
@@ -209,8 +217,8 @@ export function main() {
 
         it('should listen to window events', () => {
           const handleEventSpy = jasmine.createSpy('handleEvent');
-          const addListenerSpy = spyOn(window, 'addEventListener');
-          const removeListenerSpy = spyOn(window, 'removeEventListener');
+          const addListenerSpy = spyOn(window, addEventListener);
+          const removeListenerSpy = spyOn(window, removeEventListener);
           const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
               NodeFlags.None, null !, null !, 0, 'button', null !, null !,
               [['window', 'windowClick']], handleEventSpy)]));
@@ -232,8 +240,8 @@ export function main() {
 
         it('should listen to document events', () => {
           const handleEventSpy = jasmine.createSpy('handleEvent');
-          const addListenerSpy = spyOn(document, 'addEventListener');
-          const removeListenerSpy = spyOn(document, 'removeEventListener');
+          const addListenerSpy = spyOn(document, addEventListener);
+          const removeListenerSpy = spyOn(document, removeEventListener);
           const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
               NodeFlags.None, null !, null !, 0, 'button', null !, null !,
               [['document', 'documentClick']], handleEventSpy)]));
@@ -282,17 +290,14 @@ export function main() {
         });
 
         it('should report debug info on event errors', () => {
-          const addListenerSpy = spyOn(HTMLElement.prototype, 'addEventListener').and.callThrough();
+          const handleErrorSpy = spyOn(TestBed.get(ErrorHandler), 'handleError');
+          const addListenerSpy = spyOn(HTMLElement.prototype, addEventListener).and.callThrough();
           const {view, rootNodes} = createAndAttachAndGetRootNodes(compViewDef([elementDef(
               NodeFlags.None, null !, null !, 0, 'button', null !, null !, [[null !, 'click']],
               () => { throw new Error('Test'); })]));
 
-          let err: any;
-          try {
-            addListenerSpy.calls.mostRecent().args[1]('SomeEvent');
-          } catch (e) {
-            err = e;
-          }
+          addListenerSpy.calls.mostRecent().args[1]('SomeEvent');
+          const err = handleErrorSpy.calls.mostRecent().args[0];
           expect(err).toBeTruthy();
           expect(err.message).toBe('Test');
           const debugCtx = getDebugContext(err);
diff --git a/packages/core/test/view/embedded_view_spec.ts b/packages/core/test/view/embedded_view_spec.ts
index 59df21d1a1..017a7de9c6 100644
--- a/packages/core/test/view/embedded_view_spec.ts
+++ b/packages/core/test/view/embedded_view_spec.ts
@@ -11,7 +11,7 @@ import {ArgumentType, BindingFlags, NodeCheckFn, NodeDef, NodeFlags, RootData, S
 import {inject} from '@angular/core/testing';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 
-import {createRootView, isBrowser} from './helper';
+import {createEmbeddedView, createRootView, isBrowser} from './helper';
 
 export function main() {
   describe(`Embedded Views`, () => {
@@ -45,8 +45,7 @@ export function main() {
           ]),
           parentContext);
 
-      const childView =
-          Services.createEmbeddedView(parentView, parentView.def.nodes[1], childContext);
+      const childView = createEmbeddedView(parentView, parentView.def.nodes[1], childContext);
       expect(childView.component).toBe(parentContext);
       expect(childView.context).toBe(childContext);
     });
@@ -63,9 +62,10 @@ export function main() {
                 [elementDef(NodeFlags.None, null !, null !, 0, 'span', [['name', 'child1']])]))
       ]));
       const viewContainerData = asElementData(parentView, 1);
+      const rf = parentView.root.rendererFactory;
 
-      const childView0 = Services.createEmbeddedView(parentView, parentView.def.nodes[1]);
-      const childView1 = Services.createEmbeddedView(parentView, parentView.def.nodes[2]);
+      const childView0 = createEmbeddedView(parentView, parentView.def.nodes[1]);
+      const childView1 = createEmbeddedView(parentView, parentView.def.nodes[2]);
 
       attachEmbeddedView(parentView, viewContainerData, 0, childView0);
       attachEmbeddedView(parentView, viewContainerData, 1, childView1);
@@ -76,8 +76,10 @@ export function main() {
       expect(getDOM().getAttribute(rootChildren[1], 'name')).toBe('child0');
       expect(getDOM().getAttribute(rootChildren[2], 'name')).toBe('child1');
 
+      rf.begin !();
       detachEmbeddedView(viewContainerData, 1);
       detachEmbeddedView(viewContainerData, 0);
+      rf.end !();
 
       expect(getDOM().childNodes(rootNodes[0]).length).toBe(2);
     });
@@ -95,8 +97,8 @@ export function main() {
       ]));
       const viewContainerData = asElementData(parentView, 1);
 
-      const childView0 = Services.createEmbeddedView(parentView, parentView.def.nodes[1]);
-      const childView1 = Services.createEmbeddedView(parentView, parentView.def.nodes[2]);
+      const childView0 = createEmbeddedView(parentView, parentView.def.nodes[1]);
+      const childView1 = createEmbeddedView(parentView, parentView.def.nodes[2]);
 
       attachEmbeddedView(parentView, viewContainerData, 0, childView0);
       attachEmbeddedView(parentView, viewContainerData, 1, childView1);
@@ -119,7 +121,7 @@ export function main() {
         elementDef(NodeFlags.None, null !, null !, 0, 'span', [['name', 'after']])
       ]));
 
-      const childView0 = Services.createEmbeddedView(parentView, parentView.def.nodes[0]);
+      const childView0 = createEmbeddedView(parentView, parentView.def.nodes[0]);
       attachEmbeddedView(parentView, asElementData(parentView, 0), 0, childView0);
 
       const rootNodes = rootRenderNodes(parentView);
@@ -146,7 +148,7 @@ export function main() {
                 update))
       ]));
 
-      const childView0 = Services.createEmbeddedView(parentView, parentView.def.nodes[1]);
+      const childView0 = createEmbeddedView(parentView, parentView.def.nodes[1]);
 
       attachEmbeddedView(parentView, asElementData(parentView, 1), 0, childView0);
 
@@ -180,7 +182,7 @@ export function main() {
                   ]))
       ]));
 
-      const childView0 = Services.createEmbeddedView(parentView, parentView.def.nodes[1]);
+      const childView0 = createEmbeddedView(parentView, parentView.def.nodes[1]);
 
       attachEmbeddedView(parentView, asElementData(parentView, 1), 0, childView0);
       Services.destroyView(parentView);
@@ -188,4 +190,4 @@ export function main() {
       expect(log).toEqual(['ngOnDestroy']);
     });
   });
-}
\ No newline at end of file
+}
diff --git a/packages/core/test/view/helper.ts b/packages/core/test/view/helper.ts
index 5c90a3a4f0..cf6888f8bb 100644
--- a/packages/core/test/view/helper.ts
+++ b/packages/core/test/view/helper.ts
@@ -7,7 +7,7 @@
  */
 
 import {Injector, NgModuleRef, RootRenderer, Sanitizer} from '@angular/core';
-import {ArgumentType, NodeCheckFn, RootData, Services, ViewData, ViewDefinition, initServicesIfNeeded} from '@angular/core/src/view/index';
+import {ArgumentType, NodeCheckFn, NodeDef, RootData, Services, ViewData, ViewDefinition, initServicesIfNeeded} from '@angular/core/src/view/index';
 import {TestBed} from '@angular/core/testing';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 
@@ -37,6 +37,15 @@ export function createRootView(
       TestBed.get(NgModuleRef), context);
 }
 
-export let removeNodes: Node[];
+export function createEmbeddedView(parent: ViewData, anchorDef: NodeDef, context?: any): ViewData {
+  return Services.createEmbeddedView(parent, anchorDef, anchorDef.element !.template !, context);
+}
+
+let removeNodes: Node[];
+
 beforeEach(() => { removeNodes = []; });
 afterEach(() => { removeNodes.forEach((node) => getDOM().remove(node)); });
+
+export function recordNodeToRemove(node: Node) {
+  removeNodes.push(node);
+}
\ No newline at end of file
diff --git a/packages/core/test/view/ng_content_spec.ts b/packages/core/test/view/ng_content_spec.ts
index 35a622a983..b65b24668f 100644
--- a/packages/core/test/view/ng_content_spec.ts
+++ b/packages/core/test/view/ng_content_spec.ts
@@ -10,7 +10,7 @@ import {Injector, RenderComponentType, RootRenderer, Sanitizer, SecurityContext,
 import {DebugContext, NodeDef, NodeFlags, RootData, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, ViewHandleEventFn, ViewUpdateFn, anchorDef, asElementData, asProviderData, asTextData, attachEmbeddedView, detachEmbeddedView, directiveDef, elementDef, ngContentDef, rootRenderNodes, textDef, viewDef} from '@angular/core/src/view/index';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 
-import {createRootView, isBrowser} from './helper';
+import {createEmbeddedView, createRootView, isBrowser} from './helper';
 
 export function main() {
   describe(`View NgContent`, () => {
@@ -121,14 +121,17 @@ export function main() {
       ])));
 
       const componentView = asElementData(view, 0).componentView;
-      const view0 = Services.createEmbeddedView(componentView, componentView.def.nodes[1]);
+      const rf = componentView.root.rendererFactory;
+      const view0 = createEmbeddedView(componentView, componentView.def.nodes[1]);
 
       attachEmbeddedView(view, asElementData(componentView, 1), 0, view0);
       expect(getDOM().childNodes(getDOM().firstChild(rootNodes[0])).length).toBe(3);
       expect(getDOM().childNodes(getDOM().firstChild(rootNodes[0]))[1])
           .toBe(asTextData(view, 2).renderText);
 
+      rf.begin !();
       detachEmbeddedView(asElementData(componentView, 1), 0);
+      rf.end !();
       expect(getDOM().childNodes(getDOM().firstChild(rootNodes[0])).length).toBe(1);
     });
 
diff --git a/packages/core/test/view/provider_spec.ts b/packages/core/test/view/provider_spec.ts
index 0fa98275da..98f15f1ea2 100644
--- a/packages/core/test/view/provider_spec.ts
+++ b/packages/core/test/view/provider_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, RenderComponentType, Renderer, Renderer2, RootRenderer, Sanitizer, SecurityContext, SimpleChange, TemplateRef, ViewContainerRef, ViewEncapsulation, WrappedValue, getDebugNode} from '@angular/core';
+import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, ErrorHandler, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, RenderComponentType, Renderer, Renderer2, RootRenderer, Sanitizer, SecurityContext, SimpleChange, TemplateRef, ViewContainerRef, ViewEncapsulation, WrappedValue, getDebugNode} from '@angular/core';
 import {getDebugContext} from '@angular/core/src/errors';
 import {ArgumentType, BindingFlags, DebugContext, DepFlags, NodeDef, NodeFlags, RootData, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, ViewHandleEventFn, ViewUpdateFn, anchorDef, asElementData, asProviderData, directiveDef, elementDef, providerDef, rootRenderNodes, textDef, viewDef} from '@angular/core/src/view/index';
 import {TestBed, inject, withModule} from '@angular/core/testing';
@@ -172,7 +172,7 @@ export function main() {
               .toThrowError('No provider for Dep!');
         });
 
-        it('should inject from a parent elment in a parent view', () => {
+        it('should inject from a parent element in a parent view', () => {
           createAndGetRootNodes(compViewDef([
             elementDef(
                 NodeFlags.None, null !, null !, 1, 'div', null !, null !, null !, null !,
@@ -381,6 +381,7 @@ export function main() {
       });
 
       it('should report debug info on event errors', () => {
+        const handleErrorSpy = spyOn(TestBed.get(ErrorHandler), 'handleError');
         let emitter = new EventEmitter<any>();
 
         class SomeService {
@@ -395,12 +396,8 @@ export function main() {
               NodeFlags.None, null !, 0, SomeService, [], null !, {emitter: 'someEventName'})
         ]));
 
-        let err: any;
-        try {
-          emitter.emit('someEventInstance');
-        } catch (e) {
-          err = e;
-        }
+        emitter.emit('someEventInstance');
+        const err = handleErrorSpy.calls.mostRecent().args[0];
         expect(err).toBeTruthy();
         const debugCtx = getDebugContext(err);
         expect(debugCtx.view).toBe(view);
diff --git a/packages/core/test/view/pure_expression_spec.ts b/packages/core/test/view/pure_expression_spec.ts
index ef22ee27d6..997a91c3cc 100644
--- a/packages/core/test/view/pure_expression_spec.ts
+++ b/packages/core/test/view/pure_expression_spec.ts
@@ -6,9 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injector, PipeTransform, RenderComponentType, RootRenderer, Sanitizer, SecurityContext, ViewEncapsulation, WrappedValue} from '@angular/core';
-import {ArgumentType, NodeDef, NodeFlags, RootData, Services, ViewData, ViewDefinition, ViewFlags, ViewHandleEventFn, ViewUpdateFn, anchorDef, asProviderData, asPureExpressionData, directiveDef, elementDef, nodeValue, pipeDef, pureArrayDef, pureObjectDef, purePipeDef, rootRenderNodes, textDef, viewDef} from '@angular/core/src/view/index';
-import {inject} from '@angular/core/testing';
+import {PipeTransform} from '@angular/core';
+import {NodeDef, NodeFlags, Services, ViewData, ViewDefinition, ViewFlags, ViewUpdateFn, asProviderData, directiveDef, elementDef, nodeValue, pipeDef, pureArrayDef, pureObjectDef, purePipeDef, rootRenderNodes, viewDef} from '@angular/core/src/view/index';
 
 import {ARG_TYPE_VALUES, checkNodeInlineOrDynamic, createRootView} from './helper';
 
@@ -38,8 +37,9 @@ export function main() {
 
           const {view, rootNodes} = createAndGetRootNodes(compViewDef(
               [
-                elementDef(NodeFlags.None, null !, null !, 2, 'span'), pureArrayDef(2),
-                directiveDef(NodeFlags.None, null !, 0, Service, [], {data: [0, 'data']})
+                elementDef(NodeFlags.None, null !, null !, 2, 'span'),
+                pureArrayDef(2),
+                directiveDef(NodeFlags.None, null !, 0, Service, [], {data: [0, 'data']}),
               ],
               (check, view) => {
                 const pureValue = checkNodeInlineOrDynamic(check, view, 1, inlineDynamic, values);
@@ -75,7 +75,7 @@ export function main() {
 
           const {view, rootNodes} = createAndGetRootNodes(compViewDef(
               [
-                elementDef(NodeFlags.None, null !, null !, 2, 'span'), pureObjectDef(['a', 'b']),
+                elementDef(NodeFlags.None, null !, null !, 2, 'span'), pureObjectDef({a: 0, b: 1}),
                 directiveDef(NodeFlags.None, null !, 0, Service, [], {data: [0, 'data']})
               ],
               (check, view) => {
@@ -116,8 +116,9 @@ export function main() {
           const {view, rootNodes} = createAndGetRootNodes(compViewDef(
               [
                 elementDef(NodeFlags.None, null !, null !, 3, 'span'),
-                pipeDef(NodeFlags.None, SomePipe, []), purePipeDef(2),
-                directiveDef(NodeFlags.None, null !, 0, Service, [], {data: [0, 'data']})
+                pipeDef(NodeFlags.None, SomePipe, []),
+                purePipeDef(2),
+                directiveDef(NodeFlags.None, null !, 0, Service, [], {data: [0, 'data']}),
               ],
               (check, view) => {
                 const pureValue = checkNodeInlineOrDynamic(
diff --git a/packages/core/test/view/query_spec.ts b/packages/core/test/view/query_spec.ts
index 9cd9bc92f0..4a5db92503 100644
--- a/packages/core/test/view/query_spec.ts
+++ b/packages/core/test/view/query_spec.ts
@@ -12,7 +12,7 @@ import {BindingFlags, DebugContext, NodeDef, NodeFlags, QueryBindingType, QueryV
 import {inject} from '@angular/core/testing';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 
-import {createRootView} from './helper';
+import {createEmbeddedView, createRootView} from './helper';
 
 export function main() {
   describe(`Query Views`, () => {
@@ -155,7 +155,7 @@ export function main() {
           ...contentQueryProviders(),
         ]));
 
-        const childView = Services.createEmbeddedView(view, view.def.nodes[3]);
+        const childView = createEmbeddedView(view, view.def.nodes[3]);
         attachEmbeddedView(view, asElementData(view, 3), 0, childView);
         Services.checkAndUpdateView(view);
 
@@ -183,7 +183,7 @@ export function main() {
           anchorDef(NodeFlags.EmbeddedViews, null !, null !, 0),
         ]));
 
-        const childView = Services.createEmbeddedView(view, view.def.nodes[3]);
+        const childView = createEmbeddedView(view, view.def.nodes[3]);
         // attach at a different place than the one where the template was defined
         attachEmbeddedView(view, asElementData(view, 7), 0, childView);
 
@@ -214,7 +214,7 @@ export function main() {
         const qs: QueryService = asProviderData(view, 1).instance;
         expect(qs.a.length).toBe(0);
 
-        const childView = Services.createEmbeddedView(view, view.def.nodes[3]);
+        const childView = createEmbeddedView(view, view.def.nodes[3]);
         attachEmbeddedView(view, asElementData(view, 3), 0, childView);
         Services.checkAndUpdateView(view);
 
@@ -245,7 +245,7 @@ export function main() {
         expect(comp.a.length).toBe(0);
 
         const compView = asElementData(view, 0).componentView;
-        const childView = Services.createEmbeddedView(compView, compView.def.nodes[1]);
+        const childView = createEmbeddedView(compView, compView.def.nodes[1]);
         attachEmbeddedView(view, asElementData(compView, 1), 0, childView);
         Services.checkAndUpdateView(view);
 
diff --git a/packages/core/test/zone/ng_zone_spec.ts b/packages/core/test/zone/ng_zone_spec.ts
index f44d0cee5a..9922da9427 100644
--- a/packages/core/test/zone/ng_zone_spec.ts
+++ b/packages/core/test/zone/ng_zone_spec.ts
@@ -31,6 +31,8 @@ const resolvedPromise = Promise.resolve(null);
 function logOnError() {
   _zone.onError.subscribe({
     next: (error: any) => {
+      // Error handler should run outside of the Angular zone.
+      NgZone.assertNotInAngularZone();
       _errors.push(error);
       _traces.push(error.stack);
     }
@@ -218,6 +220,13 @@ function commonTests() {
          macroTask(() => { async.done(); });
        }), testTimeout);
 
+    it('should return the body return value from runTask',
+       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+         macroTask(() => { expect(_zone.runTask(() => 6)).toEqual(6); });
+
+         macroTask(() => { async.done(); });
+       }), testTimeout);
+
     it('should call onUnstable and onMicrotaskEmpty',
        inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
          runNgZoneNoLog(() => macroTask(_log.fn('run')));
diff --git a/packages/core/testing/rollup.config.js b/packages/core/testing/rollup.config.js
index 48be373b1e..6785eadfe7 100644
--- a/packages/core/testing/rollup.config.js
+++ b/packages/core/testing/rollup.config.js
@@ -6,15 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx',
+};
+
 export default {
   entry: '../../../dist/packages-dist/core/@angular/core/testing.es5.js',
   dest: '../../../dist/packages-dist/core/bundles/core-testing.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.core.testing',
-  globals: {
-    '@angular/core': 'ng.core',
-    'rxjs/Observable': 'Rx',
-    'rxjs/Subject': 'Rx',
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/core/testing/src/component_fixture.ts b/packages/core/testing/src/component_fixture.ts
index cadb2afc7f..fe83d7ff23 100644
--- a/packages/core/testing/src/component_fixture.ts
+++ b/packages/core/testing/src/component_fixture.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectorRef, ComponentRef, DebugElement, ElementRef, NgZone, getDebugNode} from '@angular/core';
+import {ChangeDetectorRef, ComponentRef, DebugElement, ElementRef, NgZone, RendererFactory2, getDebugNode} from '@angular/core';
 
 
 /**
@@ -40,6 +40,7 @@ export class ComponentFixture<T> {
    */
   changeDetectorRef: ChangeDetectorRef;
 
+  private _renderer: RendererFactory2|null|undefined;
   private _isStable: boolean = true;
   private _isDestroyed: boolean = false;
   private _resolve: ((result: any) => void)|null = null;
@@ -81,7 +82,7 @@ export class ComponentFixture<T> {
             // Do this check in the next tick so that ngZone gets a chance to update the state of
             // pending macrotasks.
             scheduleMicroTask(() => {
-              if (!this.ngZone.hasPendingMacrotasks) {
+              if (!ngZone.hasPendingMacrotasks) {
                 if (this._promise !== null) {
                   this._resolve !(true);
                   this._resolve = null;
@@ -141,7 +142,7 @@ export class ComponentFixture<T> {
    * Return whether the fixture is currently stable or has async tasks that have not been completed
    * yet.
    */
-  isStable(): boolean { return this._isStable && !this.ngZone.hasPendingMacrotasks; }
+  isStable(): boolean { return this._isStable && !this.ngZone !.hasPendingMacrotasks; }
 
   /**
    * Get a promise that resolves when the fixture is stable.
@@ -160,6 +161,25 @@ export class ComponentFixture<T> {
     }
   }
 
+
+  private _getRenderer() {
+    if (this._renderer === undefined) {
+      this._renderer = this.componentRef.injector.get(RendererFactory2, null);
+    }
+    return this._renderer as RendererFactory2 | null;
+  }
+
+  /**
+    * Get a promise that resolves when the ui state is stable following animations.
+    */
+  whenRenderingDone(): Promise<any> {
+    const renderer = this._getRenderer();
+    if (renderer && renderer.whenRenderingDone) {
+      return renderer.whenRenderingDone();
+    }
+    return this.whenStable();
+  }
+
   /**
    * Trigger component destruction.
    */
diff --git a/packages/core/testing/src/fake_async.ts b/packages/core/testing/src/fake_async.ts
index d87ae709c3..35eb9c8da6 100644
--- a/packages/core/testing/src/fake_async.ts
+++ b/packages/core/testing/src/fake_async.ts
@@ -43,7 +43,7 @@ let _inFakeAsyncCall = false;
  * {@example testing/ts/fake_async.ts region='basic'}
  *
  * @param fn
- * @returns {Function} The function wrapped to be executed in the fakeAsync zone
+ * @returns The function wrapped to be executed in the fakeAsync zone
  *
  * @experimental
  */
@@ -115,6 +115,20 @@ export function tick(millis: number = 0): void {
   _getFakeAsyncZoneSpec().tick(millis);
 }
 
+/**
+ * Simulates the asynchronous passage of time for the timers in the fakeAsync zone by
+ * draining the macrotask queue until it is empty. The returned value is the milliseconds
+ * of time that would have been elapsed.
+ *
+ * @param maxTurns
+ * @returns The simulated time elapsed, in millis.
+ *
+ * @experimental
+ */
+export function flush(maxTurns?: number): number {
+  return _getFakeAsyncZoneSpec().flush(maxTurns);
+}
+
 /**
  * Discard all remaining periodic tasks.
  *
diff --git a/packages/core/testing/src/ng_zone_mock.ts b/packages/core/testing/src/ng_zone_mock.ts
index 8dae724ad9..a3356d8e6b 100644
--- a/packages/core/testing/src/ng_zone_mock.ts
+++ b/packages/core/testing/src/ng_zone_mock.ts
@@ -14,12 +14,10 @@ import {EventEmitter, Injectable, NgZone} from '@angular/core';
  */
 @Injectable()
 export class MockNgZone extends NgZone {
-  private _mockOnStable: EventEmitter<any> = new EventEmitter(false);
+  onStable: EventEmitter<any> = new EventEmitter(false);
 
   constructor() { super({enableLongStackTrace: false}); }
 
-  get onStable() { return this._mockOnStable; }
-
   run(fn: Function): any { return fn(); }
 
   runOutsideAngular(fn: Function): any { return fn(); }
diff --git a/packages/core/testing/src/test_bed.ts b/packages/core/testing/src/test_bed.ts
index 674694a591..962dd11126 100644
--- a/packages/core/testing/src/test_bed.ts
+++ b/packages/core/testing/src/test_bed.ts
@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompilerOptions, Component, Directive, InjectionToken, Injector, ModuleWithComponentFactories, NgModule, NgModuleRef, NgZone, Pipe, PlatformRef, Provider, ReflectiveInjector, SchemaMetadata, Type, ɵERROR_COMPONENT_TYPE, ɵstringify as stringify} from '@angular/core';
+import {ApplicationInitStatus, CompilerOptions, Component, Directive, InjectionToken, Injector, ModuleWithComponentFactories, NgModule, NgModuleFactory, NgModuleRef, NgZone, Optional, Pipe, PlatformRef, Provider, ReflectiveInjector, SchemaMetadata, SkipSelf, Type, ɵDepFlags as DepFlags, ɵERROR_COMPONENT_TYPE, ɵNodeFlags as NodeFlags, ɵclearProviderOverrides as clearProviderOverrides, ɵoverrideProvider as overrideProvider, ɵstringify as stringify} from '@angular/core';
+
 import {AsyncTestCompleter} from './async_test_completer';
 import {ComponentFixture} from './component_fixture';
 import {MetadataOverride} from './metadata_override';
@@ -69,9 +70,10 @@ export class TestBed implements Injector {
    *
    * @experimental
    */
-  static initTestEnvironment(ngModule: Type<any>|Type<any>[], platform: PlatformRef): TestBed {
+  static initTestEnvironment(
+      ngModule: Type<any>|Type<any>[], platform: PlatformRef, aotSummaries?: () => any[]): TestBed {
     const testBed = getTestBed();
-    testBed.initTestEnvironment(ngModule, platform);
+    testBed.initTestEnvironment(ngModule, platform, aotSummaries);
     return testBed;
   }
 
@@ -139,6 +141,24 @@ export class TestBed implements Injector {
     return TestBed;
   }
 
+
+  /**
+   * Overwrites all providers for the given token with the given provider definition.
+   */
+  static overrideProvider(token: any, provider: {
+    useFactory: Function,
+    deps: any[],
+  }): void;
+  static overrideProvider(token: any, provider: {useValue: any;}): void;
+  static overrideProvider(token: any, provider: {
+    useFactory?: Function,
+    useValue?: any,
+    deps?: any[],
+  }): typeof TestBed {
+    getTestBed().overrideProvider(token, provider as any);
+    return TestBed;
+  }
+
   static get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND) {
     return getTestBed().get(token, notFoundValue);
   }
@@ -151,7 +171,7 @@ export class TestBed implements Injector {
 
   private _compiler: TestingCompiler = null !;
   private _moduleRef: NgModuleRef<any> = null !;
-  private _moduleWithComponentFactories: ModuleWithComponentFactories<any> = null !;
+  private _moduleFactory: NgModuleFactory<any> = null !;
 
   private _compilerOptions: CompilerOptions[] = [];
 
@@ -166,6 +186,12 @@ export class TestBed implements Injector {
   private _schemas: Array<SchemaMetadata|any[]> = [];
   private _activeFixtures: ComponentFixture<any>[] = [];
 
+  private _aotSummaries: () => any[] = () => [];
+
+  platform: PlatformRef = null !;
+
+  ngModule: Type<any>|Type<any>[] = null !;
+
   /**
    * Initialize the environment for testing with a compiler factory, a PlatformRef, and an
    * angular module. These are common to every test in the suite.
@@ -179,12 +205,16 @@ export class TestBed implements Injector {
    *
    * @experimental
    */
-  initTestEnvironment(ngModule: Type<any>|Type<any>[], platform: PlatformRef) {
+  initTestEnvironment(
+      ngModule: Type<any>|Type<any>[], platform: PlatformRef, aotSummaries?: () => any[]) {
     if (this.platform || this.ngModule) {
       throw new Error('Cannot set base providers because it has already been called');
     }
     this.platform = platform;
     this.ngModule = ngModule;
+    if (aotSummaries) {
+      this._aotSummaries = aotSummaries;
+    }
   }
 
   /**
@@ -196,9 +226,11 @@ export class TestBed implements Injector {
     this.resetTestingModule();
     this.platform = null !;
     this.ngModule = null !;
+    this._aotSummaries = () => [];
   }
 
   resetTestingModule() {
+    clearProviderOverrides();
     this._compiler = null !;
     this._moduleOverrides = [];
     this._componentOverrides = [];
@@ -206,7 +238,7 @@ export class TestBed implements Injector {
     this._pipeOverrides = [];
 
     this._moduleRef = null !;
-    this._moduleWithComponentFactories = null !;
+    this._moduleFactory = null !;
     this._compilerOptions = [];
     this._providers = [];
     this._declarations = [];
@@ -223,10 +255,6 @@ export class TestBed implements Injector {
     this._activeFixtures = [];
   }
 
-  platform: PlatformRef = null !;
-
-  ngModule: Type<any>|Type<any>[] = null !;
-
   configureCompiler(config: {providers?: any[], useJit?: boolean}) {
     this._assertNotInstantiated('TestBed.configureCompiler', 'configure the compiler');
     this._compilerOptions.push(config);
@@ -249,14 +277,14 @@ export class TestBed implements Injector {
   }
 
   compileComponents(): Promise<any> {
-    if (this._moduleWithComponentFactories || this._instantiated) {
+    if (this._moduleFactory || this._instantiated) {
       return Promise.resolve(null);
     }
 
     const moduleType = this._createCompilerAndModule();
     return this._compiler.compileModuleAndAllComponentsAsync(moduleType)
         .then((moduleAndComponentFactories) => {
-          this._moduleWithComponentFactories = moduleAndComponentFactories;
+          this._moduleFactory = moduleAndComponentFactories.ngModuleFactory;
         });
   }
 
@@ -264,11 +292,11 @@ export class TestBed implements Injector {
     if (this._instantiated) {
       return;
     }
-    if (!this._moduleWithComponentFactories) {
+    if (!this._moduleFactory) {
       try {
         const moduleType = this._createCompilerAndModule();
-        this._moduleWithComponentFactories =
-            this._compiler.compileModuleAndAllComponentsSync(moduleType);
+        this._moduleFactory =
+            this._compiler.compileModuleAndAllComponentsSync(moduleType).ngModuleFactory;
       } catch (e) {
         if (getComponentType(e)) {
           throw new Error(
@@ -282,7 +310,10 @@ export class TestBed implements Injector {
     const ngZone = new NgZone({enableLongStackTrace: true});
     const ngZoneInjector = ReflectiveInjector.resolveAndCreate(
         [{provide: NgZone, useValue: ngZone}], this.platform.injector);
-    this._moduleRef = this._moduleWithComponentFactories.ngModuleFactory.create(ngZoneInjector);
+    this._moduleRef = this._moduleFactory.create(ngZoneInjector);
+    // ApplicationInitStatus.runInitializers() is marked @internal to core. So casting to any
+    // before accessing it.
+    (this._moduleRef.injector.get(ApplicationInitStatus) as any).runInitializers();
     this._instantiated = true;
   }
 
@@ -300,6 +331,7 @@ export class TestBed implements Injector {
         this.platform.injector.get(TestingCompilerFactory);
     this._compiler =
         compilerFactory.createTestingCompiler(this._compilerOptions.concat([{useDebug: true}]));
+    this._compiler.loadAotSummaries(this._aotSummaries);
     this._moduleOverrides.forEach((entry) => this._compiler.overrideModule(entry[0], entry[1]));
     this._componentOverrides.forEach(
         (entry) => this._compiler.overrideComponent(entry[0], entry[1]));
@@ -354,10 +386,52 @@ export class TestBed implements Injector {
     this._pipeOverrides.push([pipe, override]);
   }
 
+  /**
+   * Overwrites all providers for the given token with the given provider definition.
+   */
+  overrideProvider(token: any, provider: {
+    useFactory: Function,
+    deps: any[],
+  }): void;
+  overrideProvider(token: any, provider: {useValue: any;}): void;
+  overrideProvider(token: any, provider: {
+    useFactory?: Function,
+    useValue?: any,
+    deps?: any[],
+  }): void {
+    let flags: NodeFlags = 0;
+    let value: any;
+    if (provider.useFactory) {
+      flags |= NodeFlags.TypeFactoryProvider;
+      value = provider.useFactory;
+    } else {
+      flags |= NodeFlags.TypeValueProvider;
+      value = provider.useValue;
+    }
+    const deps = (provider.deps || []).map((dep) => {
+      let depFlags: DepFlags = DepFlags.None;
+      let depToken: any;
+      if (Array.isArray(dep)) {
+        dep.forEach((entry: any) => {
+          if (entry instanceof Optional) {
+            depFlags |= DepFlags.Optional;
+          } else if (entry instanceof SkipSelf) {
+            depFlags |= DepFlags.SkipSelf;
+          } else {
+            depToken = entry;
+          }
+        });
+      } else {
+        depToken = dep;
+      }
+      return [depFlags, depToken];
+    });
+    overrideProvider({token, flags, deps, value});
+  }
+
   createComponent<T>(component: Type<T>): ComponentFixture<T> {
     this._initIfNeeded();
-    const componentFactory = this._moduleWithComponentFactories.componentFactories.find(
-        (compFactory) => compFactory.componentType === component);
+    const componentFactory = this._compiler.getComponentFactory(component);
 
     if (!componentFactory) {
       throw new Error(
diff --git a/packages/core/testing/src/test_compiler.ts b/packages/core/testing/src/test_compiler.ts
index c91c43fe74..f2dd3d474f 100644
--- a/packages/core/testing/src/test_compiler.ts
+++ b/packages/core/testing/src/test_compiler.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Compiler, CompilerOptions, Component, Directive, Injector, NgModule, Pipe, Type} from '@angular/core';
+import {Compiler, CompilerOptions, Component, ComponentFactory, Directive, Injector, NgModule, Pipe, Type} from '@angular/core';
 
 import {MetadataOverride} from './metadata_override';
 
@@ -33,6 +33,18 @@ export class TestingCompiler extends Compiler {
   overridePipe(directive: Type<any>, overrides: MetadataOverride<Pipe>): void {
     throw unimplemented();
   }
+  /**
+   * Allows to pass the compile summary from AOT compilation to the JIT compiler,
+   * so that it can use the code generated by AOT.
+   */
+  loadAotSummaries(summaries: () => any[]) { throw unimplemented(); };
+
+  /**
+   * Gets the component factory for the given component.
+   * This assumes that the component has been compiled before calling this call using
+   * `compileModuleAndAllComponents*`.
+   */
+  getComponentFactory<T>(component: Type<T>): ComponentFactory<T> { throw unimplemented(); }
 }
 
 /**
diff --git a/packages/core/tsconfig-build.json b/packages/core/tsconfig-build.json
index b12d701549..4f1db3e1b0 100644
--- a/packages/core/tsconfig-build.json
+++ b/packages/core/tsconfig-build.json
@@ -1,33 +1,40 @@
 {
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/core"
+  },
+
   "compilerOptions": {
-    "baseUrl": ".",
     "declaration": true,
     "stripInternal": true,
-    "experimentalDecorators": true,
+    "strictNullChecks": true,
     "module": "es2015",
     "moduleResolution": "node",
+    "target": "es2015",
+    "lib": ["es2015", "dom"],
+    "skipLibCheck": true,
+    // don't auto-discover @types/node, it results in a ///<reference in the .d.ts output
+    "types": [],
+
+    /**
+     * The rest of the file is configuration that's overridden by bazel.
+     * It can be removed after we fully migrate.
+     */
+    "baseUrl": ".",
+    "experimentalDecorators": true,
     "outDir": "../../dist/packages/core",
     "paths": {
       "rxjs/*": ["../../node_modules/rxjs/*"]
     },
     "rootDir": ".",
     "sourceMap": true,
-    "inlineSources": true,
-    "target": "es2015",
-    "lib": ["es2015", "dom"],
-    "skipLibCheck": true,
-    // don't auto-discover @types/node, it results in a ///<reference in the .d.ts output
-    "types": []
+    "inlineSources": true
   },
   "files": [
     "public_api.ts",
     "../../node_modules/zone.js/dist/zone.js.d.ts",
     "../system.d.ts"
-  ],
-  "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
-    "flatModuleOutFile": "index.js",
-    "flatModuleId": "@angular/core"
-  }
+  ]
 }
diff --git a/packages/forms/package.json b/packages/forms/package.json
index 739bd68695..e5d3e6e2cd 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -8,6 +8,9 @@
   "typings": "./forms.d.ts",
   "author": "angular",
   "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "@angular/core": "0.0.0-PLACEHOLDER",
     "@angular/common": "0.0.0-PLACEHOLDER",
diff --git a/packages/forms/rollup.config.js b/packages/forms/rollup.config.js
index eacc9f7a3b..48b9319dc3 100644
--- a/packages/forms/rollup.config.js
+++ b/packages/forms/rollup.config.js
@@ -6,21 +6,27 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx',
+  'rxjs/observable/fromPromise': 'Rx.Observable',
+  'rxjs/observable/forkJoin': 'Rx.Observable',
+  'rxjs/operator/map': 'Rx.Observable.prototype'
+};
+
 export default {
   entry: '../../dist/packages-dist/forms/@angular/forms.es5.js',
   dest: '../../dist/packages-dist/forms/bundles/forms.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.forms',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/compiler': 'ng.compiler',
-    '@angular/platform-browser': 'ng.platformBrowser',
-    'rxjs/Observable': 'Rx',
-    'rxjs/Subject': 'Rx',
-    'rxjs/observable/fromPromise': 'Rx.Observable',
-    'rxjs/observable/forkJoin': 'Rx.Observable',
-    'rxjs/operator/map': 'Rx.Observable.prototype'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/forms/src/directives/abstract_control_directive.ts b/packages/forms/src/directives/abstract_control_directive.ts
index f2cef2e96f..1bf7524dae 100644
--- a/packages/forms/src/directives/abstract_control_directive.ts
+++ b/packages/forms/src/directives/abstract_control_directive.ts
@@ -18,45 +18,49 @@ import {ValidationErrors} from './validators';
  * @stable
  */
 export abstract class AbstractControlDirective {
-  get control(): AbstractControl { throw new Error('unimplemented'); }
+  abstract get control(): AbstractControl|null;
 
   get value(): any { return this.control ? this.control.value : null; }
 
-  get valid(): boolean { return this.control ? this.control.valid : null; }
+  get valid(): boolean|null { return this.control ? this.control.valid : null; }
 
-  get invalid(): boolean { return this.control ? this.control.invalid : null; }
+  get invalid(): boolean|null { return this.control ? this.control.invalid : null; }
 
-  get pending(): boolean { return this.control ? this.control.pending : null; }
+  get pending(): boolean|null { return this.control ? this.control.pending : null; }
 
   get errors(): ValidationErrors|null { return this.control ? this.control.errors : null; }
 
-  get pristine(): boolean { return this.control ? this.control.pristine : null; }
+  get pristine(): boolean|null { return this.control ? this.control.pristine : null; }
 
-  get dirty(): boolean { return this.control ? this.control.dirty : null; }
+  get dirty(): boolean|null { return this.control ? this.control.dirty : null; }
 
-  get touched(): boolean { return this.control ? this.control.touched : null; }
+  get touched(): boolean|null { return this.control ? this.control.touched : null; }
 
-  get untouched(): boolean { return this.control ? this.control.untouched : null; }
+  get untouched(): boolean|null { return this.control ? this.control.untouched : null; }
 
-  get disabled(): boolean { return this.control ? this.control.disabled : null; }
+  get disabled(): boolean|null { return this.control ? this.control.disabled : null; }
 
-  get enabled(): boolean { return this.control ? this.control.enabled : null; }
+  get enabled(): boolean|null { return this.control ? this.control.enabled : null; }
 
-  get statusChanges(): Observable<any> { return this.control ? this.control.statusChanges : null; }
+  get statusChanges(): Observable<any>|null {
+    return this.control ? this.control.statusChanges : null;
+  }
 
-  get valueChanges(): Observable<any> { return this.control ? this.control.valueChanges : null; }
+  get valueChanges(): Observable<any>|null {
+    return this.control ? this.control.valueChanges : null;
+  }
 
-  get path(): string[] { return null; }
+  get path(): string[]|null { return null; }
 
   reset(value: any = undefined): void {
     if (this.control) this.control.reset(value);
   }
 
-  hasError(errorCode: string, path: string[] = null): boolean {
+  hasError(errorCode: string, path?: string[]): boolean {
     return this.control ? this.control.hasError(errorCode, path) : false;
   }
 
-  getError(errorCode: string, path: string[] = null): any {
+  getError(errorCode: string, path?: string[]): any {
     return this.control ? this.control.getError(errorCode, path) : null;
   }
 }
diff --git a/packages/forms/src/directives/abstract_form_group_directive.ts b/packages/forms/src/directives/abstract_form_group_directive.ts
index 19661ec147..30829df9f2 100644
--- a/packages/forms/src/directives/abstract_form_group_directive.ts
+++ b/packages/forms/src/directives/abstract_form_group_directive.ts
@@ -34,7 +34,7 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn
 
   ngOnInit(): void {
     this._checkParentType();
-    this.formDirective.addFormGroup(this);
+    this.formDirective !.addFormGroup(this);
   }
 
   ngOnDestroy(): void {
@@ -46,7 +46,7 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn
   /**
    * Get the {@link FormGroup} backing this binding.
    */
-  get control(): FormGroup { return this.formDirective.getFormGroup(this); }
+  get control(): FormGroup { return this.formDirective !.getFormGroup(this); }
 
   /**
    * Get the path to this control group.
@@ -56,11 +56,13 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn
   /**
    * Get the {@link Form} to which this group belongs.
    */
-  get formDirective(): Form { return this._parent ? this._parent.formDirective : null; }
+  get formDirective(): Form|null { return this._parent ? this._parent.formDirective : null; }
 
-  get validator(): ValidatorFn { return composeValidators(this._validators); }
+  get validator(): ValidatorFn|null { return composeValidators(this._validators); }
 
-  get asyncValidator(): AsyncValidatorFn { return composeAsyncValidators(this._asyncValidators); }
+  get asyncValidator(): AsyncValidatorFn|null {
+    return composeAsyncValidators(this._asyncValidators);
+  }
 
   /** @internal */
   _checkParentType(): void {}
diff --git a/packages/forms/src/directives/checkbox_value_accessor.ts b/packages/forms/src/directives/checkbox_value_accessor.ts
index 6c18e0a349..835ece8350 100644
--- a/packages/forms/src/directives/checkbox_value_accessor.ts
+++ b/packages/forms/src/directives/checkbox_value_accessor.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Renderer, forwardRef} from '@angular/core';
+import {Directive, ElementRef, Renderer2, forwardRef} from '@angular/core';
 
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 
@@ -36,15 +36,15 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor {
   onChange = (_: any) => {};
   onTouched = () => {};
 
-  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
 
   writeValue(value: any): void {
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'checked', value);
   }
   registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
   registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
 
   setDisabledState(isDisabled: boolean): void {
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
   }
 }
diff --git a/packages/forms/src/directives/control_container.ts b/packages/forms/src/directives/control_container.ts
index a0ee276426..39225c0dca 100644
--- a/packages/forms/src/directives/control_container.ts
+++ b/packages/forms/src/directives/control_container.ts
@@ -17,16 +17,16 @@ import {Form} from './form_interface';
  *
  * @stable
  */
-export class ControlContainer extends AbstractControlDirective {
+export abstract class ControlContainer extends AbstractControlDirective {
   name: string;
 
   /**
    * Get the form to which this container belongs.
    */
-  get formDirective(): Form { return null; }
+  get formDirective(): Form|null { return null; }
 
   /**
    * Get the path to this container.
    */
-  get path(): string[] { return null; }
+  get path(): string[]|null { return null; }
 }
diff --git a/packages/forms/src/directives/default_value_accessor.ts b/packages/forms/src/directives/default_value_accessor.ts
index 26df6411e9..f550dc6213 100644
--- a/packages/forms/src/directives/default_value_accessor.ts
+++ b/packages/forms/src/directives/default_value_accessor.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Inject, InjectionToken, Optional, Renderer, forwardRef} from '@angular/core';
+import {Directive, ElementRef, Inject, InjectionToken, Optional, Renderer2, forwardRef} from '@angular/core';
 import {ɵgetDOM as getDOM} from '@angular/platform-browser';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 
@@ -64,7 +64,7 @@ export class DefaultValueAccessor implements ControlValueAccessor {
   private _composing = false;
 
   constructor(
-      private _renderer: Renderer, private _elementRef: ElementRef,
+      private _renderer: Renderer2, private _elementRef: ElementRef,
       @Optional() @Inject(COMPOSITION_BUFFER_MODE) private _compositionMode: boolean) {
     if (this._compositionMode == null) {
       this._compositionMode = !_isAndroid();
@@ -73,14 +73,14 @@ export class DefaultValueAccessor implements ControlValueAccessor {
 
   writeValue(value: any): void {
     const normalizedValue = value == null ? '' : value;
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', normalizedValue);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'value', normalizedValue);
   }
 
   registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
   registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 
   setDisabledState(isDisabled: boolean): void {
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
   }
 
   _handleInput(value: any): void {
diff --git a/packages/forms/src/directives/ng_control.ts b/packages/forms/src/directives/ng_control.ts
index 7f2d4b04cc..503adf9281 100644
--- a/packages/forms/src/directives/ng_control.ts
+++ b/packages/forms/src/directives/ng_control.ts
@@ -26,16 +26,16 @@ function unimplemented(): any {
  */
 export abstract class NgControl extends AbstractControlDirective {
   /** @internal */
-  _parent: ControlContainer = null;
-  name: string = null;
-  valueAccessor: ControlValueAccessor = null;
+  _parent: ControlContainer|null = null;
+  name: string|null = null;
+  valueAccessor: ControlValueAccessor|null = null;
   /** @internal */
   _rawValidators: Array<Validator|ValidatorFn> = [];
   /** @internal */
   _rawAsyncValidators: Array<AsyncValidator|AsyncValidatorFn> = [];
 
-  get validator(): ValidatorFn { return <ValidatorFn>unimplemented(); }
-  get asyncValidator(): AsyncValidatorFn { return <AsyncValidatorFn>unimplemented(); }
+  get validator(): ValidatorFn|null { return <ValidatorFn>unimplemented(); }
+  get asyncValidator(): AsyncValidatorFn|null { return <AsyncValidatorFn>unimplemented(); }
 
   abstract viewToModelUpdate(newValue: any): void;
 }
diff --git a/packages/forms/src/directives/ng_form.ts b/packages/forms/src/directives/ng_form.ts
index 6803a6d296..6f69007d69 100644
--- a/packages/forms/src/directives/ng_form.ts
+++ b/packages/forms/src/directives/ng_form.ts
@@ -130,7 +130,7 @@ export class NgForm extends ControlContainer implements Form {
 
   updateModel(dir: NgControl, value: any): void {
     resolvedPromise.then(() => {
-      const ctrl = <FormControl>this.form.get(dir.path);
+      const ctrl = <FormControl>this.form.get(dir.path !);
       ctrl.setValue(value);
     });
   }
diff --git a/packages/forms/src/directives/ng_model.ts b/packages/forms/src/directives/ng_model.ts
index c27b28d026..83552d916f 100644
--- a/packages/forms/src/directives/ng_model.ts
+++ b/packages/forms/src/directives/ng_model.ts
@@ -59,7 +59,7 @@ const resolvedPromise = Promise.resolve(null);
  * This directive can be used by itself or as part of a larger form. All you need is the
  * `ngModel` selector to activate it.
  *
- * It accepts a domain model as an optional {@link @Input}. If you have a one-way binding
+ * It accepts a domain model as an optional {@link Input}. If you have a one-way binding
  * to `ngModel` with `[]` syntax, changing the value of the domain model in the component
  * class will set the value in the view. If you have a two-way binding with `[()]` syntax
  * (also known as 'banana-box syntax'), the value in the UI will always be synced back to
@@ -158,9 +158,9 @@ export class NgModel extends NgControl implements OnChanges,
 
               get formDirective(): any { return this._parent ? this._parent.formDirective : null; }
 
-              get validator(): ValidatorFn { return composeValidators(this._rawValidators); }
+              get validator(): ValidatorFn|null { return composeValidators(this._rawValidators); }
 
-              get asyncValidator(): AsyncValidatorFn {
+              get asyncValidator(): AsyncValidatorFn|null {
                 return composeAsyncValidators(this._rawAsyncValidators);
               }
 
@@ -176,7 +176,7 @@ export class NgModel extends NgControl implements OnChanges,
               }
 
               private _isStandalone(): boolean {
-                return !this._parent || (this.options && this.options.standalone);
+                return !this._parent || !!(this.options && this.options.standalone);
               }
 
               private _setUpStandalone(): void {
diff --git a/packages/forms/src/directives/number_value_accessor.ts b/packages/forms/src/directives/number_value_accessor.ts
index 8c4baf8433..6eb72aeafb 100644
--- a/packages/forms/src/directives/number_value_accessor.ts
+++ b/packages/forms/src/directives/number_value_accessor.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Renderer, forwardRef} from '@angular/core';
+import {Directive, ElementRef, Renderer2, forwardRef} from '@angular/core';
 
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 
@@ -39,20 +39,20 @@ export class NumberValueAccessor implements ControlValueAccessor {
   onChange = (_: any) => {};
   onTouched = () => {};
 
-  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
 
   writeValue(value: number): void {
     // The value needs to be normalized for IE9, otherwise it is set to 'null' when null
     const normalizedValue = value == null ? '' : value;
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', normalizedValue);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'value', normalizedValue);
   }
 
-  registerOnChange(fn: (_: number) => void): void {
+  registerOnChange(fn: (_: number|null) => void): void {
     this.onChange = (value) => { fn(value == '' ? null : parseFloat(value)); };
   }
   registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 
   setDisabledState(isDisabled: boolean): void {
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
   }
 }
diff --git a/packages/forms/src/directives/radio_control_value_accessor.ts b/packages/forms/src/directives/radio_control_value_accessor.ts
index d8784023e6..75af9de4aa 100644
--- a/packages/forms/src/directives/radio_control_value_accessor.ts
+++ b/packages/forms/src/directives/radio_control_value_accessor.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Injectable, Injector, Input, OnDestroy, OnInit, Renderer, forwardRef} from '@angular/core';
+import {Directive, ElementRef, Injectable, Injector, Input, OnDestroy, OnInit, Renderer2, forwardRef} from '@angular/core';
 
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 import {NgControl} from './ng_control';
@@ -105,7 +105,7 @@ export class RadioControlValueAccessor implements ControlValueAccessor,
   @Input() value: any;
 
   constructor(
-      private _renderer: Renderer, private _elementRef: ElementRef,
+      private _renderer: Renderer2, private _elementRef: ElementRef,
       private _registry: RadioControlRegistry, private _injector: Injector) {}
 
   ngOnInit(): void {
@@ -118,7 +118,7 @@ export class RadioControlValueAccessor implements ControlValueAccessor,
 
   writeValue(value: any): void {
     this._state = value === this.value;
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', this._state);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'checked', this._state);
   }
 
   registerOnChange(fn: (_: any) => {}): void {
@@ -134,7 +134,7 @@ export class RadioControlValueAccessor implements ControlValueAccessor,
   registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
 
   setDisabledState(isDisabled: boolean): void {
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
   }
 
   private _checkName(): void {
diff --git a/packages/forms/src/directives/range_value_accessor.ts b/packages/forms/src/directives/range_value_accessor.ts
index cf89bc920c..65cf42abb6 100644
--- a/packages/forms/src/directives/range_value_accessor.ts
+++ b/packages/forms/src/directives/range_value_accessor.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Provider, Renderer, forwardRef} from '@angular/core';
+import {Directive, ElementRef, Provider, Renderer2, forwardRef} from '@angular/core';
 
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 
@@ -39,19 +39,19 @@ export class RangeValueAccessor implements ControlValueAccessor {
   onChange = (_: any) => {};
   onTouched = () => {};
 
-  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
 
   writeValue(value: any): void {
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', parseFloat(value));
+    this._renderer.setProperty(this._elementRef.nativeElement, 'value', parseFloat(value));
   }
 
-  registerOnChange(fn: (_: number) => void): void {
+  registerOnChange(fn: (_: number|null) => void): void {
     this.onChange = (value) => { fn(value == '' ? null : parseFloat(value)); };
   }
 
   registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 
   setDisabledState(isDisabled: boolean): void {
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
   }
 }
diff --git a/packages/forms/src/directives/reactive_directives/form_control_directive.ts b/packages/forms/src/directives/reactive_directives/form_control_directive.ts
index 9db23e2aeb..2f917b4cd6 100644
--- a/packages/forms/src/directives/reactive_directives/form_control_directive.ts
+++ b/packages/forms/src/directives/reactive_directives/form_control_directive.ts
@@ -45,12 +45,12 @@ export const formControlBinding: any = {
  * {@link AbstractControl}.
  *
  * **Set the value**: You can pass in an initial value when instantiating the {@link FormControl},
- * or you can set it programmatically later using {@link AbstractControl.setValue} or
- * {@link AbstractControl.patchValue}.
+ * or you can set it programmatically later using {@link AbstractControl#setValue} or
+ * {@link AbstractControl#patchValue}.
  *
  * **Listen to value**: If you want to listen to changes in the value of the control, you can
- * subscribe to the {@link AbstractControl.valueChanges} event.  You can also listen to
- * {@link AbstractControl.statusChanges} to be notified when the validation status is
+ * subscribe to the {@link AbstractControl#valueChanges} event.  You can also listen to
+ * {@link AbstractControl#statusChanges} to be notified when the validation status is
  * re-calculated.
  *
  * ### Example
@@ -88,8 +88,8 @@ export class FormControlDirective extends NgControl implements OnChanges {
               ngOnChanges(changes: SimpleChanges): void {
                 if (this._isControlChanged(changes)) {
                   setUpControl(this.form, this);
-                  if (this.control.disabled && this.valueAccessor.setDisabledState) {
-                    this.valueAccessor.setDisabledState(true);
+                  if (this.control.disabled && this.valueAccessor !.setDisabledState) {
+                    this.valueAccessor !.setDisabledState !(true);
                   }
                   this.form.updateValueAndValidity({emitEvent: false});
                 }
@@ -101,9 +101,9 @@ export class FormControlDirective extends NgControl implements OnChanges {
 
               get path(): string[] { return []; }
 
-              get validator(): ValidatorFn { return composeValidators(this._rawValidators); }
+              get validator(): ValidatorFn|null { return composeValidators(this._rawValidators); }
 
-              get asyncValidator(): AsyncValidatorFn {
+              get asyncValidator(): AsyncValidatorFn|null {
                 return composeAsyncValidators(this._rawAsyncValidators);
               }
 
diff --git a/packages/forms/src/directives/reactive_directives/form_control_name.ts b/packages/forms/src/directives/reactive_directives/form_control_name.ts
index def1aeb898..4676b7fbf6 100644
--- a/packages/forms/src/directives/reactive_directives/form_control_name.ts
+++ b/packages/forms/src/directives/reactive_directives/form_control_name.ts
@@ -45,7 +45,7 @@ export const controlNameBinding: any = {
  * closest {@link FormGroup} or {@link FormArray} above it.
  *
  * **Access the control**: You can access the {@link FormControl} associated with
- * this directive by using the {@link AbstractControl.get} method.
+ * this directive by using the {@link AbstractControl#get} method.
  * Ex: `this.form.get('first');`
  *
  * **Get value**: the `value` property is always synced and available on the {@link FormControl}.
@@ -53,11 +53,11 @@ export const controlNameBinding: any = {
  *
  *  **Set value**: You can set an initial value for the control when instantiating the
  *  {@link FormControl}, or you can set it programmatically later using
- *  {@link AbstractControl.setValue} or {@link AbstractControl.patchValue}.
+ *  {@link AbstractControl#setValue} or {@link AbstractControl#patchValue}.
  *
  * **Listen to value**: If you want to listen to changes in the value of the control, you can
- * subscribe to the {@link AbstractControl.valueChanges} event.  You can also listen to
- * {@link AbstractControl.statusChanges} to be notified when the validation status is
+ * subscribe to the {@link AbstractControl#valueChanges} event.  You can also listen to
+ * {@link AbstractControl#statusChanges} to be notified when the validation status is
  * re-calculated.
  *
  * ### Example
@@ -125,14 +125,14 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
     this.update.emit(newValue);
   }
 
-  get path(): string[] { return controlPath(this.name, this._parent); }
+  get path(): string[] { return controlPath(this.name, this._parent !); }
 
   get formDirective(): any { return this._parent ? this._parent.formDirective : null; }
 
-  get validator(): ValidatorFn { return composeValidators(this._rawValidators); }
+  get validator(): ValidatorFn|null { return composeValidators(this._rawValidators); }
 
   get asyncValidator(): AsyncValidatorFn {
-    return composeAsyncValidators(this._rawAsyncValidators);
+    return composeAsyncValidators(this._rawAsyncValidators) !;
   }
 
   get control(): FormControl { return this._control; }
@@ -151,8 +151,8 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
   private _setUpControl() {
     this._checkParentType();
     this._control = this.formDirective.addControl(this);
-    if (this.control.disabled && this.valueAccessor.setDisabledState) {
-      this.valueAccessor.setDisabledState(true);
+    if (this.control.disabled && this.valueAccessor !.setDisabledState) {
+      this.valueAccessor !.setDisabledState !(true);
     }
     this._added = true;
   }
diff --git a/packages/forms/src/directives/reactive_directives/form_group_directive.ts b/packages/forms/src/directives/reactive_directives/form_group_directive.ts
index 6ec1773e2d..01fe3bf2af 100644
--- a/packages/forms/src/directives/reactive_directives/form_group_directive.ts
+++ b/packages/forms/src/directives/reactive_directives/form_group_directive.ts
@@ -34,11 +34,11 @@ export const formDirectiveProvider: any = {
  *
  * **Set value**: You can set the form's initial value when instantiating the
  * {@link FormGroup}, or you can set it programmatically later using the {@link FormGroup}'s
- * {@link AbstractControl.setValue} or {@link AbstractControl.patchValue} methods.
+ * {@link AbstractControl#setValue} or {@link AbstractControl#patchValue} methods.
  *
  * **Listen to value**: If you want to listen to changes in the value of the form, you can subscribe
- * to the {@link FormGroup}'s {@link AbstractControl.valueChanges} event.  You can also listen to
- * its {@link AbstractControl.statusChanges} event to be notified when the validation status is
+ * to the {@link FormGroup}'s {@link AbstractControl#valueChanges} event.  You can also listen to
+ * its {@link AbstractControl#statusChanges} event to be notified when the validation status is
  * re-calculated.
  *
  * Furthermore, you can listen to the directive's `ngSubmit` event to be notified when the user has
@@ -69,7 +69,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
   private _oldForm: FormGroup;
   directives: FormControlName[] = [];
 
-  @Input('formGroup') form: FormGroup = null;
+  @Input('formGroup') form: FormGroup = null !;
   @Output() ngSubmit = new EventEmitter();
 
   constructor(
@@ -167,10 +167,10 @@ export class FormGroupDirective extends ControlContainer implements Form,
 
   private _updateValidators() {
     const sync = composeValidators(this._validators);
-    this.form.validator = Validators.compose([this.form.validator, sync]);
+    this.form.validator = Validators.compose([this.form.validator !, sync !]);
 
     const async = composeAsyncValidators(this._asyncValidators);
-    this.form.asyncValidator = Validators.composeAsync([this.form.asyncValidator, async]);
+    this.form.asyncValidator = Validators.composeAsync([this.form.asyncValidator !, async !]);
   }
 
   private _checkFormPresent() {
diff --git a/packages/forms/src/directives/reactive_directives/form_group_name.ts b/packages/forms/src/directives/reactive_directives/form_group_name.ts
index 3dca7c5a4c..6be89003e3 100644
--- a/packages/forms/src/directives/reactive_directives/form_group_name.ts
+++ b/packages/forms/src/directives/reactive_directives/form_group_name.ts
@@ -40,7 +40,7 @@ export const formGroupNameProvider: any = {
  * controls into their own nested object.
  *
  * **Access the group**: You can access the associated {@link FormGroup} using the
- * {@link AbstractControl.get} method. Ex: `this.form.get('name')`.
+ * {@link AbstractControl#get} method. Ex: `this.form.get('name')`.
  *
  * You can also access individual controls within the group using dot syntax.
  * Ex: `this.form.get('name.first')`
@@ -50,11 +50,11 @@ export const formGroupNameProvider: any = {
  *
  * **Set the value**: You can set an initial value for each child control when instantiating
  * the {@link FormGroup}, or you can set it programmatically later using
- * {@link AbstractControl.setValue} or {@link AbstractControl.patchValue}.
+ * {@link AbstractControl#setValue} or {@link AbstractControl#patchValue}.
  *
  * **Listen to value**: If you want to listen to changes in the value of the group, you can
- * subscribe to the {@link AbstractControl.valueChanges} event.  You can also listen to
- * {@link AbstractControl.statusChanges} to be notified when the validation status is
+ * subscribe to the {@link AbstractControl#valueChanges} event.  You can also listen to
+ * {@link AbstractControl#statusChanges} to be notified when the validation status is
  * re-calculated.
  *
  * ### Example
@@ -111,7 +111,7 @@ export const formArrayNameProvider: any = {
  * form controls dynamically.
  *
  * **Access the array**: You can access the associated {@link FormArray} using the
- * {@link AbstractControl.get} method on the parent {@link FormGroup}.
+ * {@link AbstractControl#get} method on the parent {@link FormGroup}.
  * Ex: `this.form.get('cities')`.
  *
  * **Get the value**: the `value` property is always synced and available on the
@@ -119,16 +119,16 @@ export const formArrayNameProvider: any = {
  *
  * **Set the value**: You can set an initial value for each child control when instantiating
  * the {@link FormArray}, or you can set the value programmatically later using the
- * {@link FormArray}'s {@link AbstractControl.setValue} or {@link AbstractControl.patchValue}
+ * {@link FormArray}'s {@link AbstractControl#setValue} or {@link AbstractControl#patchValue}
  * methods.
  *
  * **Listen to value**: If you want to listen to changes in the value of the array, you can
- * subscribe to the {@link FormArray}'s {@link AbstractControl.valueChanges} event.  You can also
- * listen to its {@link AbstractControl.statusChanges} event to be notified when the validation
+ * subscribe to the {@link FormArray}'s {@link AbstractControl#valueChanges} event.  You can also
+ * listen to its {@link AbstractControl#statusChanges} event to be notified when the validation
  * status is re-calculated.
  *
  * **Add new controls**: You can add new controls to the {@link FormArray} dynamically by
- * calling its {@link FormArray.push} method.
+ * calling its {@link FormArray#push} method.
  *  Ex: `this.form.get('cities').push(new FormControl());`
  *
  * ### Example
@@ -166,7 +166,7 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy
 
   ngOnInit(): void {
     this._checkParentType();
-    this.formDirective.addFormArray(this);
+    this.formDirective !.addFormArray(this);
   }
 
   ngOnDestroy(): void {
@@ -175,17 +175,19 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy
     }
   }
 
-  get control(): FormArray { return this.formDirective.getFormArray(this); }
+  get control(): FormArray { return this.formDirective !.getFormArray(this); }
 
-  get formDirective(): FormGroupDirective {
+  get formDirective(): FormGroupDirective|null {
     return this._parent ? <FormGroupDirective>this._parent.formDirective : null;
   }
 
   get path(): string[] { return controlPath(this.name, this._parent); }
 
-  get validator(): ValidatorFn { return composeValidators(this._validators); }
+  get validator(): ValidatorFn|null { return composeValidators(this._validators); }
 
-  get asyncValidator(): AsyncValidatorFn { return composeAsyncValidators(this._asyncValidators); }
+  get asyncValidator(): AsyncValidatorFn|null {
+    return composeAsyncValidators(this._asyncValidators);
+  }
 
   private _checkParentType(): void {
     if (_hasInvalidParent(this._parent)) {
diff --git a/packages/forms/src/directives/select_control_value_accessor.ts b/packages/forms/src/directives/select_control_value_accessor.ts
index daf5d03727..aec3b02f7a 100644
--- a/packages/forms/src/directives/select_control_value_accessor.ts
+++ b/packages/forms/src/directives/select_control_value_accessor.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Host, Input, OnDestroy, Optional, Provider, Renderer, forwardRef, ɵlooseIdentical as looseIdentical} from '@angular/core';
+import {Directive, ElementRef, Host, Input, OnDestroy, Optional, Provider, Renderer2, forwardRef, ɵlooseIdentical as looseIdentical} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 
 export const SELECT_VALUE_ACCESSOR: Provider = {
@@ -15,7 +15,7 @@ export const SELECT_VALUE_ACCESSOR: Provider = {
   multi: true
 };
 
-function _buildValueString(id: string, value: any): string {
+function _buildValueString(id: string | null, value: any): string {
   if (id == null) return `${value}`;
   if (value && typeof value === 'object') value = 'Object';
   return `${id}: ${value}`.slice(0, 50);
@@ -114,16 +114,16 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
 
   private _compareWith: (o1: any, o2: any) => boolean = looseIdentical;
 
-  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
 
   writeValue(value: any): void {
     this.value = value;
-    const id: string = this._getOptionId(value);
+    const id: string|null = this._getOptionId(value);
     if (id == null) {
-      this._renderer.setElementProperty(this._elementRef.nativeElement, 'selectedIndex', -1);
+      this._renderer.setProperty(this._elementRef.nativeElement, 'selectedIndex', -1);
     }
     const valueString = _buildValueString(id, value);
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', valueString);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'value', valueString);
   }
 
   registerOnChange(fn: (value: any) => any): void {
@@ -135,14 +135,14 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
   registerOnTouched(fn: () => any): void { this.onTouched = fn; }
 
   setDisabledState(isDisabled: boolean): void {
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
   }
 
   /** @internal */
   _registerOption(): string { return (this._idCounter++).toString(); }
 
   /** @internal */
-  _getOptionId(value: any): string {
+  _getOptionId(value: any): string|null {
     for (const id of Array.from(this._optionMap.keys())) {
       if (this._compareWith(this._optionMap.get(id), value)) return id;
     }
@@ -170,7 +170,7 @@ export class NgSelectOption implements OnDestroy {
   id: string;
 
   constructor(
-      private _element: ElementRef, private _renderer: Renderer,
+      private _element: ElementRef, private _renderer: Renderer2,
       @Optional() @Host() private _select: SelectControlValueAccessor) {
     if (this._select) this.id = this._select._registerOption();
   }
@@ -191,7 +191,7 @@ export class NgSelectOption implements OnDestroy {
 
   /** @internal */
   _setElementValue(value: string): void {
-    this._renderer.setElementProperty(this._element.nativeElement, 'value', value);
+    this._renderer.setProperty(this._element.nativeElement, 'value', value);
   }
 
   ngOnDestroy(): void {
diff --git a/packages/forms/src/directives/select_multiple_control_value_accessor.ts b/packages/forms/src/directives/select_multiple_control_value_accessor.ts
index 960cea7a64..7db6202ead 100644
--- a/packages/forms/src/directives/select_multiple_control_value_accessor.ts
+++ b/packages/forms/src/directives/select_multiple_control_value_accessor.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Host, Input, OnDestroy, Optional, Provider, Renderer, forwardRef, ɵlooseIdentical as looseIdentical} from '@angular/core';
+import {Directive, ElementRef, Host, Input, OnDestroy, Optional, Provider, Renderer2, forwardRef, ɵlooseIdentical as looseIdentical} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 
 export const SELECT_MULTIPLE_VALUE_ACCESSOR: Provider = {
@@ -94,7 +94,7 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
 
   private _compareWith: (o1: any, o2: any) => boolean = looseIdentical;
 
-  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
 
   writeValue(value: any): void {
     this.value = value;
@@ -138,7 +138,7 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
   registerOnTouched(fn: () => any): void { this.onTouched = fn; }
 
   setDisabledState(isDisabled: boolean): void {
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
   }
 
   /** @internal */
@@ -149,9 +149,9 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
   }
 
   /** @internal */
-  _getOptionId(value: any): string {
+  _getOptionId(value: any): string|null {
     for (const id of Array.from(this._optionMap.keys())) {
-      if (this._compareWith(this._optionMap.get(id)._value, value)) return id;
+      if (this._compareWith(this._optionMap.get(id) !._value, value)) return id;
     }
     return null;
   }
@@ -159,7 +159,7 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
   /** @internal */
   _getOptionValue(valueString: string): any {
     const id: string = _extractId(valueString);
-    return this._optionMap.has(id) ? this._optionMap.get(id)._value : valueString;
+    return this._optionMap.has(id) ? this._optionMap.get(id) !._value : valueString;
   }
 }
 
@@ -181,7 +181,7 @@ export class NgSelectMultipleOption implements OnDestroy {
   _value: any;
 
   constructor(
-      private _element: ElementRef, private _renderer: Renderer,
+      private _element: ElementRef, private _renderer: Renderer2,
       @Optional() @Host() private _select: SelectMultipleControlValueAccessor) {
     if (this._select) {
       this.id = this._select._registerOption(this);
@@ -209,12 +209,12 @@ export class NgSelectMultipleOption implements OnDestroy {
 
   /** @internal */
   _setElementValue(value: string): void {
-    this._renderer.setElementProperty(this._element.nativeElement, 'value', value);
+    this._renderer.setProperty(this._element.nativeElement, 'value', value);
   }
 
   /** @internal */
   _setSelected(selected: boolean) {
-    this._renderer.setElementProperty(this._element.nativeElement, 'selected', selected);
+    this._renderer.setProperty(this._element.nativeElement, 'selected', selected);
   }
 
   ngOnDestroy(): void {
diff --git a/packages/forms/src/directives/shared.ts b/packages/forms/src/directives/shared.ts
index c8342bd334..8823b62818 100644
--- a/packages/forms/src/directives/shared.ts
+++ b/packages/forms/src/directives/shared.ts
@@ -27,55 +27,55 @@ import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from './valida
 
 
 export function controlPath(name: string, parent: ControlContainer): string[] {
-  return [...parent.path, name];
+  return [...parent.path !, name];
 }
 
 export function setUpControl(control: FormControl, dir: NgControl): void {
   if (!control) _throwError(dir, 'Cannot find control with');
   if (!dir.valueAccessor) _throwError(dir, 'No value accessor for form control with');
 
-  control.validator = Validators.compose([control.validator, dir.validator]);
-  control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
-  dir.valueAccessor.writeValue(control.value);
+  control.validator = Validators.compose([control.validator !, dir.validator]);
+  control.asyncValidator = Validators.composeAsync([control.asyncValidator !, dir.asyncValidator]);
+  dir.valueAccessor !.writeValue(control.value);
 
   // view -> model
-  dir.valueAccessor.registerOnChange((newValue: any) => {
+  dir.valueAccessor !.registerOnChange((newValue: any) => {
     dir.viewToModelUpdate(newValue);
     control.markAsDirty();
     control.setValue(newValue, {emitModelToViewChange: false});
   });
 
   // touched
-  dir.valueAccessor.registerOnTouched(() => control.markAsTouched());
+  dir.valueAccessor !.registerOnTouched(() => control.markAsTouched());
 
   control.registerOnChange((newValue: any, emitModelEvent: boolean) => {
     // control -> view
-    dir.valueAccessor.writeValue(newValue);
+    dir.valueAccessor !.writeValue(newValue);
 
     // control -> ngModel
     if (emitModelEvent) dir.viewToModelUpdate(newValue);
   });
 
-  if (dir.valueAccessor.setDisabledState) {
+  if (dir.valueAccessor !.setDisabledState) {
     control.registerOnDisabledChange(
-        (isDisabled: boolean) => { dir.valueAccessor.setDisabledState(isDisabled); });
+        (isDisabled: boolean) => { dir.valueAccessor !.setDisabledState !(isDisabled); });
   }
 
   // re-run validation when validator binding changes, e.g. minlength=3 -> minlength=4
   dir._rawValidators.forEach((validator: Validator | ValidatorFn) => {
     if ((<Validator>validator).registerOnValidatorChange)
-      (<Validator>validator).registerOnValidatorChange(() => control.updateValueAndValidity());
+      (<Validator>validator).registerOnValidatorChange !(() => control.updateValueAndValidity());
   });
 
   dir._rawAsyncValidators.forEach((validator: AsyncValidator | AsyncValidatorFn) => {
     if ((<Validator>validator).registerOnValidatorChange)
-      (<Validator>validator).registerOnValidatorChange(() => control.updateValueAndValidity());
+      (<Validator>validator).registerOnValidatorChange !(() => control.updateValueAndValidity());
   });
 }
 
 export function cleanUpControl(control: FormControl, dir: NgControl) {
-  dir.valueAccessor.registerOnChange(() => _noControlError(dir));
-  dir.valueAccessor.registerOnTouched(() => _noControlError(dir));
+  dir.valueAccessor !.registerOnChange(() => _noControlError(dir));
+  dir.valueAccessor !.registerOnTouched(() => _noControlError(dir));
 
   dir._rawValidators.forEach((validator: any) => {
     if (validator.registerOnValidatorChange) {
@@ -105,9 +105,9 @@ function _noControlError(dir: NgControl) {
 
 function _throwError(dir: AbstractControlDirective, message: string): void {
   let messageEnd: string;
-  if (dir.path.length > 1) {
-    messageEnd = `path: '${dir.path.join(' -> ')}'`;
-  } else if (dir.path[0]) {
+  if (dir.path !.length > 1) {
+    messageEnd = `path: '${dir.path!.join(' -> ')}'`;
+  } else if (dir.path ![0]) {
     messageEnd = `name: '${dir.path}'`;
   } else {
     messageEnd = 'unspecified name attribute';
@@ -115,11 +115,12 @@ function _throwError(dir: AbstractControlDirective, message: string): void {
   throw new Error(`${message} ${messageEnd}`);
 }
 
-export function composeValidators(validators: Array<Validator|Function>): ValidatorFn {
+export function composeValidators(validators: Array<Validator|Function>): ValidatorFn|null {
   return validators != null ? Validators.compose(validators.map(normalizeValidator)) : null;
 }
 
-export function composeAsyncValidators(validators: Array<Validator|Function>): AsyncValidatorFn {
+export function composeAsyncValidators(validators: Array<Validator|Function>): AsyncValidatorFn|
+    null {
   return validators != null ? Validators.composeAsync(validators.map(normalizeAsyncValidator)) :
                               null;
 }
@@ -147,12 +148,12 @@ export function isBuiltInAccessor(valueAccessor: ControlValueAccessor): boolean
 
 // TODO: vsavkin remove it once https://github.com/angular/angular/issues/3011 is implemented
 export function selectValueAccessor(
-    dir: NgControl, valueAccessors: ControlValueAccessor[]): ControlValueAccessor {
+    dir: NgControl, valueAccessors: ControlValueAccessor[]): ControlValueAccessor|null {
   if (!valueAccessors) return null;
 
-  let defaultAccessor: ControlValueAccessor;
-  let builtinAccessor: ControlValueAccessor;
-  let customAccessor: ControlValueAccessor;
+  let defaultAccessor: ControlValueAccessor|undefined = undefined;
+  let builtinAccessor: ControlValueAccessor|undefined = undefined;
+  let customAccessor: ControlValueAccessor|undefined = undefined;
   valueAccessors.forEach((v: ControlValueAccessor) => {
     if (v.constructor === DefaultValueAccessor) {
       defaultAccessor = v;
diff --git a/packages/forms/src/directives/validators.ts b/packages/forms/src/directives/validators.ts
index 92671bb147..7ec13a6208 100644
--- a/packages/forms/src/directives/validators.ts
+++ b/packages/forms/src/directives/validators.ts
@@ -57,6 +57,7 @@ export const CHECKBOX_REQUIRED_VALIDATOR: Provider = {
   multi: true
 };
 
+
 /**
  * A Directive that adds the `required` validator to any controls marked with the
  * `required` attribute, via the {@link NG_VALIDATORS} binding.
@@ -94,6 +95,7 @@ export class RequiredValidator implements Validator {
   registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
 }
 
+
 /**
  * A Directive that adds the `required` validator to checkbox controls marked with the
  * `required` attribute, via the {@link NG_VALIDATORS} binding.
diff --git a/packages/forms/src/form_builder.ts b/packages/forms/src/form_builder.ts
index 1384ea1d38..b10797c04d 100644
--- a/packages/forms/src/form_builder.ts
+++ b/packages/forms/src/form_builder.ts
@@ -39,7 +39,7 @@ export class FormBuilder {
    *
    * See the {@link FormGroup} constructor for more details.
    */
-  group(controlsConfig: {[key: string]: any}, extra: {[key: string]: any} = null): FormGroup {
+  group(controlsConfig: {[key: string]: any}, extra: {[key: string]: any}|null = null): FormGroup {
     const controls = this._reduceControls(controlsConfig);
     const validator: ValidatorFn = extra != null ? extra['validator'] : null;
     const asyncValidator: AsyncValidatorFn = extra != null ? extra['asyncValidator'] : null;
@@ -54,8 +54,8 @@ export class FormBuilder {
    *
    */
   control(
-      formState: Object, validator: ValidatorFn|ValidatorFn[] = null,
-      asyncValidator: AsyncValidatorFn|AsyncValidatorFn[] = null): FormControl {
+      formState: Object, validator?: ValidatorFn|ValidatorFn[]|null,
+      asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null): FormControl {
     return new FormControl(formState, validator, asyncValidator);
   }
 
@@ -64,8 +64,8 @@ export class FormBuilder {
    * configuration, with the given optional `validator` and `asyncValidator`.
    */
   array(
-      controlsConfig: any[], validator: ValidatorFn = null,
-      asyncValidator: AsyncValidatorFn = null): FormArray {
+      controlsConfig: any[], validator?: ValidatorFn|null,
+      asyncValidator?: AsyncValidatorFn|null): FormArray {
     const controls = controlsConfig.map(c => this._createControl(c));
     return new FormArray(controls, validator, asyncValidator);
   }
diff --git a/packages/forms/src/model.ts b/packages/forms/src/model.ts
index cd00942f60..0f215ffbbb 100644
--- a/packages/forms/src/model.ts
+++ b/packages/forms/src/model.ts
@@ -42,7 +42,7 @@ function _find(control: AbstractControl, path: Array<string|number>| string, del
   }
   if (path instanceof Array && (path.length === 0)) return null;
 
-  return (<Array<string|number>>path).reduce((v, name) => {
+  return (<Array<string|number>>path).reduce((v: AbstractControl, name) => {
     if (v instanceof FormGroup) {
       return v.controls[name] || null;
     }
@@ -55,13 +55,14 @@ function _find(control: AbstractControl, path: Array<string|number>| string, del
   }, control);
 }
 
-function coerceToValidator(validator: ValidatorFn | ValidatorFn[]): ValidatorFn {
-  return Array.isArray(validator) ? composeValidators(validator) : validator;
+function coerceToValidator(validator?: ValidatorFn | ValidatorFn[] | null): ValidatorFn|null {
+  return Array.isArray(validator) ? composeValidators(validator) : validator || null;
 }
 
-function coerceToAsyncValidator(asyncValidator: AsyncValidatorFn | AsyncValidatorFn[]):
-    AsyncValidatorFn {
-  return Array.isArray(asyncValidator) ? composeAsyncValidators(asyncValidator) : asyncValidator;
+function coerceToAsyncValidator(asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null):
+    AsyncValidatorFn|null {
+  return Array.isArray(asyncValidator) ? composeAsyncValidators(asyncValidator) :
+                                         asyncValidator || null;
 }
 
 /**
@@ -90,7 +91,7 @@ export abstract class AbstractControl {
   private _parent: FormGroup|FormArray;
   private _asyncValidationSubscription: any;
 
-  constructor(public validator: ValidatorFn, public asyncValidator: AsyncValidatorFn) {}
+  constructor(public validator: ValidatorFn|null, public asyncValidator: AsyncValidatorFn|null) {}
 
   /**
    * The value of the control.
@@ -209,7 +210,7 @@ export abstract class AbstractControl {
    * Sets the synchronous validators that are active on this control.  Calling
    * this will overwrite any existing sync validators.
    */
-  setValidators(newValidator: ValidatorFn|ValidatorFn[]): void {
+  setValidators(newValidator: ValidatorFn|ValidatorFn[]|null): void {
     this.validator = coerceToValidator(newValidator);
   }
 
@@ -237,11 +238,11 @@ export abstract class AbstractControl {
    * This will also mark all direct ancestors as `touched` to maintain
    * the model.
    */
-  markAsTouched({onlySelf}: {onlySelf?: boolean} = {}): void {
+  markAsTouched(opts: {onlySelf?: boolean} = {}): void {
     this._touched = true;
 
-    if (this._parent && !onlySelf) {
-      this._parent.markAsTouched({onlySelf});
+    if (this._parent && !opts.onlySelf) {
+      this._parent.markAsTouched(opts);
     }
   }
 
@@ -252,14 +253,14 @@ export abstract class AbstractControl {
    * to maintain the model, and re-calculate the `touched` status of all parent
    * controls.
    */
-  markAsUntouched({onlySelf}: {onlySelf?: boolean} = {}): void {
+  markAsUntouched(opts: {onlySelf?: boolean} = {}): void {
     this._touched = false;
 
     this._forEachChild(
         (control: AbstractControl) => { control.markAsUntouched({onlySelf: true}); });
 
-    if (this._parent && !onlySelf) {
-      this._parent._updateTouched({onlySelf});
+    if (this._parent && !opts.onlySelf) {
+      this._parent._updateTouched(opts);
     }
   }
 
@@ -269,11 +270,11 @@ export abstract class AbstractControl {
    * This will also mark all direct ancestors as `dirty` to maintain
    * the model.
    */
-  markAsDirty({onlySelf}: {onlySelf?: boolean} = {}): void {
+  markAsDirty(opts: {onlySelf?: boolean} = {}): void {
     this._pristine = false;
 
-    if (this._parent && !onlySelf) {
-      this._parent.markAsDirty({onlySelf});
+    if (this._parent && !opts.onlySelf) {
+      this._parent.markAsDirty(opts);
     }
   }
 
@@ -284,24 +285,24 @@ export abstract class AbstractControl {
    * to maintain the model, and re-calculate the `pristine` status of all parent
    * controls.
    */
-  markAsPristine({onlySelf}: {onlySelf?: boolean} = {}): void {
+  markAsPristine(opts: {onlySelf?: boolean} = {}): void {
     this._pristine = true;
 
     this._forEachChild((control: AbstractControl) => { control.markAsPristine({onlySelf: true}); });
 
-    if (this._parent && !onlySelf) {
-      this._parent._updatePristine({onlySelf});
+    if (this._parent && !opts.onlySelf) {
+      this._parent._updatePristine(opts);
     }
   }
 
   /**
    * Marks the control as `pending`.
    */
-  markAsPending({onlySelf}: {onlySelf?: boolean} = {}): void {
+  markAsPending(opts: {onlySelf?: boolean} = {}): void {
     this._status = PENDING;
 
-    if (this._parent && !onlySelf) {
-      this._parent.markAsPending({onlySelf});
+    if (this._parent && !opts.onlySelf) {
+      this._parent.markAsPending(opts);
     }
   }
 
@@ -311,18 +312,18 @@ export abstract class AbstractControl {
    *
    * If the control has children, all children will be disabled to maintain the model.
    */
-  disable({onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
+  disable(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
     this._status = DISABLED;
     this._errors = null;
     this._forEachChild((control: AbstractControl) => { control.disable({onlySelf: true}); });
     this._updateValue();
 
-    if (emitEvent !== false) {
+    if (opts.emitEvent !== false) {
       this._valueChanges.emit(this._value);
       this._statusChanges.emit(this._status);
     }
 
-    this._updateAncestors(onlySelf);
+    this._updateAncestors(!!opts.onlySelf);
     this._onDisabledChange.forEach((changeFn) => changeFn(true));
   }
 
@@ -333,12 +334,12 @@ export abstract class AbstractControl {
    *
    * If the control has children, all children will be enabled.
    */
-  enable({onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
+  enable(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
     this._status = VALID;
     this._forEachChild((control: AbstractControl) => { control.enable({onlySelf: true}); });
-    this.updateValueAndValidity({onlySelf: true, emitEvent});
+    this.updateValueAndValidity({onlySelf: true, emitEvent: opts.emitEvent});
 
-    this._updateAncestors(onlySelf);
+    this._updateAncestors(!!opts.onlySelf);
     this._onDisabledChange.forEach((changeFn) => changeFn(false));
   }
 
@@ -372,8 +373,7 @@ export abstract class AbstractControl {
    *
    * By default, it will also update the value and validity of its ancestors.
    */
-  updateValueAndValidity({onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}):
-      void {
+  updateValueAndValidity(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
     this._setInitialStatus();
     this._updateValue();
 
@@ -383,24 +383,24 @@ export abstract class AbstractControl {
       this._status = this._calculateStatus();
 
       if (this._status === VALID || this._status === PENDING) {
-        this._runAsyncValidator(emitEvent);
+        this._runAsyncValidator(opts.emitEvent);
       }
     }
 
-    if (emitEvent !== false) {
+    if (opts.emitEvent !== false) {
       this._valueChanges.emit(this._value);
       this._statusChanges.emit(this._status);
     }
 
-    if (this._parent && !onlySelf) {
-      this._parent.updateValueAndValidity({onlySelf, emitEvent});
+    if (this._parent && !opts.onlySelf) {
+      this._parent.updateValueAndValidity(opts);
     }
   }
 
   /** @internal */
-  _updateTreeValidity({emitEvent}: {emitEvent?: boolean} = {emitEvent: true}) {
-    this._forEachChild((ctrl: AbstractControl) => ctrl._updateTreeValidity({emitEvent}));
-    this.updateValueAndValidity({onlySelf: true, emitEvent});
+  _updateTreeValidity(opts: {emitEvent?: boolean} = {emitEvent: true}) {
+    this._forEachChild((ctrl: AbstractControl) => ctrl._updateTreeValidity(opts));
+    this.updateValueAndValidity({onlySelf: true, emitEvent: opts.emitEvent});
   }
 
   private _setInitialStatus() { this._status = this._allControlsDisabled() ? DISABLED : VALID; }
@@ -409,7 +409,7 @@ export abstract class AbstractControl {
     return this.validator ? this.validator(this) : null;
   }
 
-  private _runAsyncValidator(emitEvent: boolean): void {
+  private _runAsyncValidator(emitEvent?: boolean): void {
     if (this.asyncValidator) {
       this._status = PENDING;
       const obs = toObservable(this.asyncValidator(this));
@@ -447,9 +447,9 @@ export abstract class AbstractControl {
    * expect(login.valid).toEqual(true);
    * ```
    */
-  setErrors(errors: ValidationErrors|null, {emitEvent}: {emitEvent?: boolean} = {}): void {
+  setErrors(errors: ValidationErrors|null, opts: {emitEvent?: boolean} = {}): void {
     this._errors = errors;
-    this._updateControlsErrors(emitEvent !== false);
+    this._updateControlsErrors(opts.emitEvent !== false);
   }
 
   /**
@@ -465,7 +465,7 @@ export abstract class AbstractControl {
    *
    * * `this.form.get(['person', 'name']);`
    */
-  get(path: Array<string|number>|string): AbstractControl { return _find(this, path, '.'); }
+  get(path: Array<string|number>|string): AbstractControl|null { return _find(this, path, '.'); }
 
   /**
    * Returns true if the control with the given path has the error specified. Otherwise
@@ -473,7 +473,7 @@ export abstract class AbstractControl {
    *
    * If no path is given, it checks for the error on the present control.
    */
-  getError(errorCode: string, path: string[] = null): any {
+  getError(errorCode: string, path?: string[]): any {
     const control = path ? this.get(path) : this;
     return control && control._errors ? control._errors[errorCode] : null;
   }
@@ -484,9 +484,7 @@ export abstract class AbstractControl {
    *
    * If no path is given, it checks for the error on the present control.
    */
-  hasError(errorCode: string, path: string[] = null): boolean {
-    return !!this.getError(errorCode, path);
-  }
+  hasError(errorCode: string, path?: string[]): boolean { return !!this.getError(errorCode, path); }
 
   /**
    * Retrieves the top-level ancestor of this control.
@@ -557,20 +555,20 @@ export abstract class AbstractControl {
   }
 
   /** @internal */
-  _updatePristine({onlySelf}: {onlySelf?: boolean} = {}): void {
+  _updatePristine(opts: {onlySelf?: boolean} = {}): void {
     this._pristine = !this._anyControlsDirty();
 
-    if (this._parent && !onlySelf) {
-      this._parent._updatePristine({onlySelf});
+    if (this._parent && !opts.onlySelf) {
+      this._parent._updatePristine(opts);
     }
   }
 
   /** @internal */
-  _updateTouched({onlySelf}: {onlySelf?: boolean} = {}): void {
+  _updateTouched(opts: {onlySelf?: boolean} = {}): void {
     this._touched = this._anyControlsTouched();
 
-    if (this._parent && !onlySelf) {
-      this._parent._updateTouched({onlySelf});
+    if (this._parent && !opts.onlySelf) {
+      this._parent._updateTouched(opts);
     }
   }
 
@@ -635,8 +633,8 @@ export class FormControl extends AbstractControl {
   _onChange: Function[] = [];
 
   constructor(
-      formState: any = null, validator: ValidatorFn|ValidatorFn[] = null,
-      asyncValidator: AsyncValidatorFn|AsyncValidatorFn[] = null) {
+      formState: any = null, validator?: ValidatorFn|ValidatorFn[]|null,
+      asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null) {
     super(coerceToValidator(validator), coerceToAsyncValidator(asyncValidator));
     this._applyFormState(formState);
     this.updateValueAndValidity({onlySelf: true, emitEvent: false});
@@ -660,24 +658,25 @@ export class FormControl extends AbstractControl {
    * If `emitViewToModelChange` is `true`, an ngModelChange event will be fired to update the
    * model.  This is the default behavior if `emitViewToModelChange` is not specified.
    */
-  setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}: {
+  setValue(value: any, options: {
     onlySelf?: boolean,
     emitEvent?: boolean,
     emitModelToViewChange?: boolean,
     emitViewToModelChange?: boolean
   } = {}): void {
     this._value = value;
-    if (this._onChange.length && emitModelToViewChange !== false) {
-      this._onChange.forEach((changeFn) => changeFn(this._value, emitViewToModelChange !== false));
+    if (this._onChange.length && options.emitModelToViewChange !== false) {
+      this._onChange.forEach(
+          (changeFn) => changeFn(this._value, options.emitViewToModelChange !== false));
     }
-    this.updateValueAndValidity({onlySelf, emitEvent});
+    this.updateValueAndValidity(options);
   }
 
   /**
    * Patches the value of a control.
    *
-   * This function is functionally the same as {@link FormControl.setValue} at this level.
-   * It exists for symmetry with {@link FormGroup.patchValue} on `FormGroups` and `FormArrays`,
+   * This function is functionally the same as {@link FormControl#setValue} at this level.
+   * It exists for symmetry with {@link FormGroup#patchValue} on `FormGroups` and `FormArrays`,
    * where it does behave differently.
    */
   patchValue(value: any, options: {
@@ -717,12 +716,11 @@ export class FormControl extends AbstractControl {
    * console.log(this.control.status);  // 'DISABLED'
    * ```
    */
-  reset(formState: any = null, {onlySelf, emitEvent}: {onlySelf?: boolean,
-                                                       emitEvent?: boolean} = {}): void {
+  reset(formState: any = null, options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
     this._applyFormState(formState);
-    this.markAsPristine({onlySelf});
-    this.markAsUntouched({onlySelf});
-    this.setValue(this._value, {onlySelf, emitEvent});
+    this.markAsPristine(options);
+    this.markAsUntouched(options);
+    this.setValue(this._value, options);
   }
 
   /**
@@ -831,9 +829,9 @@ export class FormControl extends AbstractControl {
  */
 export class FormGroup extends AbstractControl {
   constructor(
-      public controls: {[key: string]: AbstractControl}, validator: ValidatorFn = null,
-      asyncValidator: AsyncValidatorFn = null) {
-    super(validator, asyncValidator);
+      public controls: {[key: string]: AbstractControl}, validator?: ValidatorFn|null,
+      asyncValidator?: AsyncValidatorFn|null) {
+    super(validator || null, asyncValidator || null);
     this._initObservables();
     this._setUpControls();
     this.updateValueAndValidity({onlySelf: true, emitEvent: false});
@@ -843,7 +841,7 @@ export class FormGroup extends AbstractControl {
    * Registers a control with the group's list of controls.
    *
    * This method does not update value or validity of the control, so for
-   * most cases you'll want to use {@link FormGroup.addControl} instead.
+   * most cases you'll want to use {@link FormGroup#addControl} instead.
    */
   registerControl(name: string, control: AbstractControl): AbstractControl {
     if (this.controls[name]) return this.controls[name];
@@ -887,7 +885,7 @@ export class FormGroup extends AbstractControl {
    * Check whether there is an enabled control with the given name in the group.
    *
    * It will return false for disabled controls. If you'd like to check for
-   * existence in the group only, use {@link AbstractControl.get} instead.
+   * existence in the group only, use {@link AbstractControl#get} instead.
    */
   contains(controlName: string): boolean {
     return this.controls.hasOwnProperty(controlName) && this.controls[controlName].enabled;
@@ -915,15 +913,14 @@ export class FormGroup extends AbstractControl {
    *
    *  ```
    */
-  setValue(
-      value: {[key: string]: any},
-      {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
+  setValue(value: {[key: string]: any}, options: {onlySelf?: boolean, emitEvent?: boolean} = {}):
+      void {
     this._checkAllValuesPresent(value);
     Object.keys(value).forEach(name => {
       this._throwIfControlMissing(name);
-      this.controls[name].setValue(value[name], {onlySelf: true, emitEvent});
+      this.controls[name].setValue(value[name], {onlySelf: true, emitEvent: options.emitEvent});
     });
-    this.updateValueAndValidity({onlySelf, emitEvent});
+    this.updateValueAndValidity(options);
   }
 
   /**
@@ -947,15 +944,14 @@ export class FormGroup extends AbstractControl {
    *
    *  ```
    */
-  patchValue(
-      value: {[key: string]: any},
-      {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
+  patchValue(value: {[key: string]: any}, options: {onlySelf?: boolean, emitEvent?: boolean} = {}):
+      void {
     Object.keys(value).forEach(name => {
       if (this.controls[name]) {
-        this.controls[name].patchValue(value[name], {onlySelf: true, emitEvent});
+        this.controls[name].patchValue(value[name], {onlySelf: true, emitEvent: options.emitEvent});
       }
     });
-    this.updateValueAndValidity({onlySelf, emitEvent});
+    this.updateValueAndValidity(options);
   }
 
   /**
@@ -990,14 +986,13 @@ export class FormGroup extends AbstractControl {
    * console.log(this.form.get('first').status);  // 'DISABLED'
    * ```
    */
-  reset(value: any = {}, {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}):
-      void {
+  reset(value: any = {}, options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
     this._forEachChild((control: AbstractControl, name: string) => {
-      control.reset(value[name], {onlySelf: true, emitEvent});
+      control.reset(value[name], {onlySelf: true, emitEvent: options.emitEvent});
     });
-    this.updateValueAndValidity({onlySelf, emitEvent});
-    this._updatePristine({onlySelf});
-    this._updateTouched({onlySelf});
+    this.updateValueAndValidity(options);
+    this._updatePristine(options);
+    this._updateTouched(options);
   }
 
   /**
@@ -1137,9 +1132,9 @@ export class FormGroup extends AbstractControl {
  */
 export class FormArray extends AbstractControl {
   constructor(
-      public controls: AbstractControl[], validator: ValidatorFn = null,
-      asyncValidator: AsyncValidatorFn = null) {
-    super(validator, asyncValidator);
+      public controls: AbstractControl[], validator?: ValidatorFn|null,
+      asyncValidator?: AsyncValidatorFn|null) {
+    super(validator || null, asyncValidator || null);
     this._initObservables();
     this._setUpControls();
     this.updateValueAndValidity({onlySelf: true, emitEvent: false});
@@ -1223,14 +1218,13 @@ export class FormArray extends AbstractControl {
    *  console.log(arr.value);   // ['Nancy', 'Drew']
    *  ```
    */
-  setValue(value: any[], {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}):
-      void {
+  setValue(value: any[], options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
     this._checkAllValuesPresent(value);
     value.forEach((newValue: any, index: number) => {
       this._throwIfControlMissing(index);
-      this.at(index).setValue(newValue, {onlySelf: true, emitEvent});
+      this.at(index).setValue(newValue, {onlySelf: true, emitEvent: options.emitEvent});
     });
-    this.updateValueAndValidity({onlySelf, emitEvent});
+    this.updateValueAndValidity(options);
   }
 
   /**
@@ -1253,14 +1247,13 @@ export class FormArray extends AbstractControl {
    *  console.log(arr.value);   // ['Nancy', null]
    *  ```
    */
-  patchValue(value: any[], {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}):
-      void {
+  patchValue(value: any[], options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
     value.forEach((newValue: any, index: number) => {
       if (this.at(index)) {
-        this.at(index).patchValue(newValue, {onlySelf: true, emitEvent});
+        this.at(index).patchValue(newValue, {onlySelf: true, emitEvent: options.emitEvent});
       }
     });
-    this.updateValueAndValidity({onlySelf, emitEvent});
+    this.updateValueAndValidity(options);
   }
 
   /**
@@ -1294,14 +1287,13 @@ export class FormArray extends AbstractControl {
    * console.log(this.arr.get(0).status);  // 'DISABLED'
    * ```
    */
-  reset(value: any = [], {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}):
-      void {
+  reset(value: any = [], options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
     this._forEachChild((control: AbstractControl, index: number) => {
-      control.reset(value[index], {onlySelf: true, emitEvent});
+      control.reset(value[index], {onlySelf: true, emitEvent: options.emitEvent});
     });
-    this.updateValueAndValidity({onlySelf, emitEvent});
-    this._updatePristine({onlySelf});
-    this._updateTouched({onlySelf});
+    this.updateValueAndValidity(options);
+    this._updatePristine(options);
+    this._updateTouched(options);
   }
 
   /**
diff --git a/packages/forms/src/validators.ts b/packages/forms/src/validators.ts
index 78cbee570f..3daab238b4 100644
--- a/packages/forms/src/validators.ts
+++ b/packages/forms/src/validators.ts
@@ -24,9 +24,6 @@ function isEmptyInputValue(value: any): boolean {
  *
  * Provide this using `multi: true` to add validators.
  *
- * ### Example
- *
- * {@example core/forms/ts/ng_validators/ng_validators.ts region='ng_validators'}
  * @stable
  */
 export const NG_VALIDATORS = new InjectionToken<Array<Validator|Function>>('NgValidators');
@@ -62,6 +59,36 @@ const EMAIL_REGEXP =
  * @stable
  */
 export class Validators {
+  /**
+   * Validator that requires controls to have a value greater than a number.
+   */
+  static min(min: number): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (isEmptyInputValue(control.value) || isEmptyInputValue(min)) {
+        return null;  // don't validate empty values to allow optional controls
+      }
+      const value = parseFloat(control.value);
+      // Controls with NaN values after parsing should be treated as not having a
+      // minimum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-min
+      return !isNaN(value) && value < min ? {'min': {'min': min, 'actual': control.value}} : null;
+    };
+  }
+
+  /**
+   * Validator that requires controls to have a value less than a number.
+   */
+  static max(max: number): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (isEmptyInputValue(control.value) || isEmptyInputValue(max)) {
+        return null;  // don't validate empty values to allow optional controls
+      }
+      const value = parseFloat(control.value);
+      // Controls with NaN values after parsing should be treated as not having a
+      // maximum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-max
+      return !isNaN(value) && value > max ? {'max': {'max': max, 'actual': control.value}} : null;
+    };
+  }
+
   /**
    * Validator that requires controls to have a non-empty value.
    */
@@ -143,9 +170,11 @@ export class Validators {
    * Compose multiple validators into a single function that returns the union
    * of the individual error maps.
    */
-  static compose(validators: ValidatorFn[]): ValidatorFn {
+  static compose(validators: null): null;
+  static compose(validators: (ValidatorFn|null|undefined)[]): ValidatorFn|null;
+  static compose(validators: (ValidatorFn|null|undefined)[]|null): ValidatorFn|null {
     if (!validators) return null;
-    const presentValidators = validators.filter(isPresent);
+    const presentValidators: ValidatorFn[] = validators.filter(isPresent) as any;
     if (presentValidators.length == 0) return null;
 
     return function(control: AbstractControl) {
@@ -153,9 +182,9 @@ export class Validators {
     };
   }
 
-  static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn {
+  static composeAsync(validators: (AsyncValidatorFn|null)[]): AsyncValidatorFn|null {
     if (!validators) return null;
-    const presentValidators = validators.filter(isPresent);
+    const presentValidators: AsyncValidatorFn[] = validators.filter(isPresent) as any;
     if (presentValidators.length == 0) return null;
 
     return function(control: AbstractControl) {
@@ -188,7 +217,7 @@ function _executeAsyncValidators(control: AbstractControl, validators: AsyncVali
 function _mergeErrors(arrayOfErrors: ValidationErrors[]): ValidationErrors|null {
   const res: {[key: string]: any} =
       arrayOfErrors.reduce((res: ValidationErrors | null, errors: ValidationErrors | null) => {
-        return errors != null ? {...res, ...errors} : res;
+        return errors != null ? {...res !, ...errors} : res !;
       }, {});
   return Object.keys(res).length === 0 ? null : res;
 }
diff --git a/packages/forms/test/directives_spec.ts b/packages/forms/test/directives_spec.ts
index 642886c991..00001a6fff 100644
--- a/packages/forms/test/directives_spec.ts
+++ b/packages/forms/test/directives_spec.ts
@@ -28,7 +28,7 @@ class CustomValidatorDirective implements Validator {
 
 function asyncValidator(expected: any, timeout = 0) {
   return (c: AbstractControl): any => {
-    let resolve: (result: any) => void;
+    let resolve: (result: any) => void = undefined !;
     const promise = new Promise(res => { resolve = res; });
     const res = c.value != expected ? {'async': true} : null;
     if (timeout == 0) {
@@ -44,7 +44,7 @@ export function main() {
   describe('Form Directives', () => {
     let defaultAccessor: DefaultValueAccessor;
 
-    beforeEach(() => { defaultAccessor = new DefaultValueAccessor(null, null, null); });
+    beforeEach(() => { defaultAccessor = new DefaultValueAccessor(null !, null !, null !); });
 
     describe('shared', () => {
       describe('selectValueAccessor', () => {
@@ -59,42 +59,42 @@ export function main() {
            () => { expect(selectValueAccessor(dir, [defaultAccessor])).toEqual(defaultAccessor); });
 
         it('should return checkbox accessor when provided', () => {
-          const checkboxAccessor = new CheckboxControlValueAccessor(null, null);
+          const checkboxAccessor = new CheckboxControlValueAccessor(null !, null !);
           expect(selectValueAccessor(dir, [
             defaultAccessor, checkboxAccessor
           ])).toEqual(checkboxAccessor);
         });
 
         it('should return select accessor when provided', () => {
-          const selectAccessor = new SelectControlValueAccessor(null, null);
+          const selectAccessor = new SelectControlValueAccessor(null !, null !);
           expect(selectValueAccessor(dir, [
             defaultAccessor, selectAccessor
           ])).toEqual(selectAccessor);
         });
 
         it('should return select multiple accessor when provided', () => {
-          const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null, null);
+          const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null !, null !);
           expect(selectValueAccessor(dir, [
             defaultAccessor, selectMultipleAccessor
           ])).toEqual(selectMultipleAccessor);
         });
 
         it('should throw when more than one build-in accessor is provided', () => {
-          const checkboxAccessor = new CheckboxControlValueAccessor(null, null);
-          const selectAccessor = new SelectControlValueAccessor(null, null);
+          const checkboxAccessor = new CheckboxControlValueAccessor(null !, null !);
+          const selectAccessor = new SelectControlValueAccessor(null !, null !);
           expect(() => selectValueAccessor(dir, [checkboxAccessor, selectAccessor])).toThrowError();
         });
 
         it('should return custom accessor when provided', () => {
           const customAccessor = new SpyValueAccessor();
-          const checkboxAccessor = new CheckboxControlValueAccessor(null, null);
+          const checkboxAccessor = new CheckboxControlValueAccessor(null !, null !);
           expect(selectValueAccessor(dir, <any>[defaultAccessor, customAccessor, checkboxAccessor]))
               .toEqual(customAccessor);
         });
 
         it('should return custom accessor when provided with select multiple', () => {
           const customAccessor = new SpyValueAccessor();
-          const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null, null);
+          const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null !, null !);
           expect(selectValueAccessor(
                      dir, <any>[defaultAccessor, customAccessor, selectMultipleAccessor]))
               .toEqual(customAccessor);
@@ -110,13 +110,13 @@ export function main() {
         it('should compose functions', () => {
           const dummy1 = (_: any /** TODO #9100 */) => ({'dummy1': true});
           const dummy2 = (_: any /** TODO #9100 */) => ({'dummy2': true});
-          const v = composeValidators([dummy1, dummy2]);
+          const v = composeValidators([dummy1, dummy2]) !;
           expect(v(new FormControl(''))).toEqual({'dummy1': true, 'dummy2': true});
         });
 
         it('should compose validator directives', () => {
           const dummy1 = (_: any /** TODO #9100 */) => ({'dummy1': true});
-          const v = composeValidators([dummy1, new CustomValidatorDirective()]);
+          const v = composeValidators([dummy1, new CustomValidatorDirective()]) !;
           expect(v(new FormControl(''))).toEqual({'dummy1': true, 'custom': true});
         });
       });
@@ -168,7 +168,7 @@ export function main() {
 
       describe('addControl', () => {
         it('should throw when no control found', () => {
-          const dir = new FormControlName(form, null, null, [defaultAccessor]);
+          const dir = new FormControlName(form, null !, null !, [defaultAccessor]);
           dir.name = 'invalidName';
 
           expect(() => form.addControl(dir))
@@ -176,7 +176,7 @@ export function main() {
         });
 
         it('should throw for a named control when no value accessor', () => {
-          const dir = new FormControlName(form, null, null, null);
+          const dir = new FormControlName(form, null !, null !, null !);
           dir.name = 'login';
 
           expect(() => form.addControl(dir))
@@ -184,8 +184,8 @@ export function main() {
         });
 
         it('should throw when no value accessor with path', () => {
-          const group = new FormGroupName(form, null, null);
-          const dir = new FormControlName(group, null, null, null);
+          const group = new FormGroupName(form, null !, null !);
+          const dir = new FormControlName(group, null !, null !, null !);
           group.name = 'passwords';
           dir.name = 'password';
 
@@ -315,7 +315,7 @@ export function main() {
         personControlGroupDir = new NgModelGroup(form, [], []);
         personControlGroupDir.name = 'person';
 
-        loginControlDir = new NgModel(personControlGroupDir, null, null, [defaultAccessor]);
+        loginControlDir = new NgModel(personControlGroupDir, null !, null !, [defaultAccessor]);
         loginControlDir.name = 'login';
         loginControlDir.valueAccessor = new DummyControlValueAccessor();
       });
@@ -534,7 +534,7 @@ export function main() {
 
       beforeEach(() => {
         ngModel = new NgModel(
-            null, [Validators.required], [asyncValidator('expected')], [defaultAccessor]);
+            null !, [Validators.required], [asyncValidator('expected')], [defaultAccessor]);
         ngModel.valueAccessor = new DummyControlValueAccessor();
         control = ngModel.control;
       });
@@ -566,7 +566,7 @@ export function main() {
       });
 
       it('should throw when no value accessor with named control', () => {
-        const namedDir = new NgModel(null, null, null, null);
+        const namedDir = new NgModel(null !, null !, null !, null !);
         namedDir.name = 'one';
 
         expect(() => namedDir.ngOnChanges({}))
@@ -574,7 +574,7 @@ export function main() {
       });
 
       it('should throw when no value accessor with unnamed control', () => {
-        const unnamedDir = new NgModel(null, null, null, null);
+        const unnamedDir = new NgModel(null !, null !, null !, null !);
 
         expect(() => unnamedDir.ngOnChanges({}))
             .toThrowError(
diff --git a/packages/forms/test/form_array_spec.ts b/packages/forms/test/form_array_spec.ts
index 66976e9e74..2b94b80ec7 100644
--- a/packages/forms/test/form_array_spec.ts
+++ b/packages/forms/test/form_array_spec.ts
@@ -15,7 +15,7 @@ import {Validators} from '../src/validators';
 export function main() {
   function asyncValidator(expected: string, timeouts = {}) {
     return (c: AbstractControl) => {
-      let resolve: (result: any) => void;
+      let resolve: (result: any) => void = undefined !;
       const promise = new Promise(res => { resolve = res; });
       const t = (timeouts as any)[c.value] != null ? (timeouts as any)[c.value] : 0;
       const res = c.value != expected ? {'async': true} : null;
@@ -89,7 +89,7 @@ export function main() {
           new FormGroup({'c2': new FormControl('v2'), 'c3': new FormControl('v3')}),
           new FormArray([new FormControl('v4'), new FormControl('v5')])
         ]);
-        a.at(0).get('c3').disable();
+        a.at(0).get('c3') !.disable();
         (a.at(1) as FormArray).at(1).disable();
 
         expect(a.getRawValue()).toEqual([{'c2': 'v2', 'c3': 'v3'}, ['v4', 'v5']]);
@@ -693,7 +693,7 @@ export function main() {
     describe('get', () => {
       it('should return null when path is null', () => {
         const g = new FormGroup({});
-        expect(g.get(null)).toEqual(null);
+        expect(g.get(null !)).toEqual(null);
       });
 
       it('should return null when path is empty', () => {
@@ -712,23 +712,23 @@ export function main() {
           'nested': new FormGroup({'two': new FormControl('222')})
         });
 
-        expect(g.get(['one']).value).toEqual('111');
-        expect(g.get('one').value).toEqual('111');
-        expect(g.get(['nested', 'two']).value).toEqual('222');
-        expect(g.get('nested.two').value).toEqual('222');
+        expect(g.get(['one']) !.value).toEqual('111');
+        expect(g.get('one') !.value).toEqual('111');
+        expect(g.get(['nested', 'two']) !.value).toEqual('222');
+        expect(g.get('nested.two') !.value).toEqual('222');
       });
 
       it('should return an element of an array', () => {
         const g = new FormGroup({'array': new FormArray([new FormControl('111')])});
 
-        expect(g.get(['array', 0]).value).toEqual('111');
+        expect(g.get(['array', 0]) !.value).toEqual('111');
       });
     });
 
     describe('asyncValidator', () => {
       it('should run the async validator', fakeAsync(() => {
            const c = new FormControl('value');
-           const g = new FormArray([c], null, asyncValidator('expected'));
+           const g = new FormArray([c], null !, asyncValidator('expected'));
 
            expect(g.pending).toEqual(true);
 
@@ -793,10 +793,10 @@ export function main() {
         });
         expect(g.valid).toBe(false);
 
-        g.get('nested').disable();
+        g.get('nested') !.disable();
         expect(g.valid).toBe(true);
 
-        g.get('nested').enable();
+        g.get('nested') !.enable();
         expect(g.valid).toBe(false);
       });
 
@@ -805,36 +805,36 @@ export function main() {
             {nested: new FormArray([new FormControl('one')]), two: new FormControl('two')});
         expect(g.value).toEqual({'nested': ['one'], 'two': 'two'});
 
-        g.get('nested').disable();
+        g.get('nested') !.disable();
         expect(g.value).toEqual({'two': 'two'});
 
-        g.get('nested').enable();
+        g.get('nested') !.enable();
         expect(g.value).toEqual({'nested': ['one'], 'two': 'two'});
       });
 
       it('should ignore disabled controls when determining dirtiness', () => {
         const g = new FormGroup({nested: a, two: new FormControl('two')});
-        g.get(['nested', 0]).markAsDirty();
+        g.get(['nested', 0]) !.markAsDirty();
         expect(g.dirty).toBe(true);
 
-        g.get('nested').disable();
-        expect(g.get('nested').dirty).toBe(true);
+        g.get('nested') !.disable();
+        expect(g.get('nested') !.dirty).toBe(true);
         expect(g.dirty).toEqual(false);
 
-        g.get('nested').enable();
+        g.get('nested') !.enable();
         expect(g.dirty).toEqual(true);
       });
 
       it('should ignore disabled controls when determining touched state', () => {
         const g = new FormGroup({nested: a, two: new FormControl('two')});
-        g.get(['nested', 0]).markAsTouched();
+        g.get(['nested', 0]) !.markAsTouched();
         expect(g.touched).toBe(true);
 
-        g.get('nested').disable();
-        expect(g.get('nested').touched).toBe(true);
+        g.get('nested') !.disable();
+        expect(g.get('nested') !.touched).toBe(true);
         expect(g.touched).toEqual(false);
 
-        g.get('nested').enable();
+        g.get('nested') !.enable();
         expect(g.touched).toEqual(true);
       });
 
@@ -901,7 +901,7 @@ export function main() {
         });
 
         it('should clear out async array errors when disabled', fakeAsync(() => {
-             const arr = new FormArray([new FormControl()], null, asyncValidator('expected'));
+             const arr = new FormArray([new FormControl()], null !, asyncValidator('expected'));
              tick();
              expect(arr.errors).toEqual({'async': true});
 
@@ -914,7 +914,7 @@ export function main() {
            }));
 
         it('should re-populate async array errors when enabled from a child', fakeAsync(() => {
-             const arr = new FormArray([new FormControl()], null, asyncValidator('expected'));
+             const arr = new FormArray([new FormControl()], null !, asyncValidator('expected'));
              tick();
              expect(arr.errors).toEqual({'async': true});
 
@@ -988,7 +988,7 @@ export function main() {
         });
 
         it('should remove control if new control is null', () => {
-          a.setControl(0, null);
+          a.setControl(0, null !);
           expect(a.controls[0]).not.toBeDefined();
           expect(a.value).toEqual([]);
         });
diff --git a/packages/forms/test/form_control_spec.ts b/packages/forms/test/form_control_spec.ts
index e52c23bbac..4fa4d9f3a2 100644
--- a/packages/forms/test/form_control_spec.ts
+++ b/packages/forms/test/form_control_spec.ts
@@ -16,7 +16,7 @@ import {FormArray} from '../src/model';
 export function main() {
   function asyncValidator(expected: string, timeouts = {}) {
     return (c: FormControl) => {
-      let resolve: (result: any) => void;
+      let resolve: (result: any) => void = undefined !;
       const promise = new Promise(res => { resolve = res; });
       const t = (timeouts as any)[c.value] != null ? (timeouts as any)[c.value] : 0;
       const res = c.value != expected ? {'async': true} : null;
@@ -49,7 +49,7 @@ export function main() {
 
     describe('boxed values', () => {
       it('should support valid boxed values on creation', () => {
-        const c = new FormControl({value: 'some val', disabled: true}, null, null);
+        const c = new FormControl({value: 'some val', disabled: true}, null !, null !);
         expect(c.disabled).toBe(true);
         expect(c.value).toBe('some val');
         expect(c.status).toBe('DISABLED');
@@ -63,13 +63,13 @@ export function main() {
       });
 
       it('should not treat objects as boxed values if they have more than two props', () => {
-        const c = new FormControl({value: '', disabled: true, test: 'test'}, null, null);
+        const c = new FormControl({value: '', disabled: true, test: 'test'}, null !, null !);
         expect(c.value).toEqual({value: '', disabled: true, test: 'test'});
         expect(c.disabled).toBe(false);
       });
 
       it('should not treat objects as boxed values if disabled is missing', () => {
-        const c = new FormControl({value: '', test: 'test'}, null, null);
+        const c = new FormControl({value: '', test: 'test'}, null !, null !);
         expect(c.value).toEqual({value: '', test: 'test'});
         expect(c.disabled).toBe(false);
       });
@@ -156,7 +156,7 @@ export function main() {
 
     describe('asyncValidator', () => {
       it('should run validator with the initial value', fakeAsync(() => {
-           const c = new FormControl('value', null, asyncValidator('expected'));
+           const c = new FormControl('value', null !, asyncValidator('expected'));
            tick();
 
            expect(c.valid).toEqual(false);
@@ -164,7 +164,7 @@ export function main() {
          }));
 
       it('should support validators returning observables', fakeAsync(() => {
-           const c = new FormControl('value', null, asyncValidatorReturningObservable);
+           const c = new FormControl('value', null !, asyncValidatorReturningObservable);
            tick();
 
            expect(c.valid).toEqual(false);
@@ -172,7 +172,7 @@ export function main() {
          }));
 
       it('should rerun the validator when the value changes', fakeAsync(() => {
-           const c = new FormControl('value', null, asyncValidator('expected'));
+           const c = new FormControl('value', null !, asyncValidator('expected'));
 
            c.setValue('expected');
            tick();
@@ -193,7 +193,7 @@ export function main() {
          }));
 
       it('should mark the control as pending while running the async validation', fakeAsync(() => {
-           const c = new FormControl('', null, asyncValidator('expected'));
+           const c = new FormControl('', null !, asyncValidator('expected'));
 
            expect(c.pending).toEqual(true);
 
@@ -204,7 +204,7 @@ export function main() {
 
       it('should only use the latest async validation run', fakeAsync(() => {
            const c = new FormControl(
-               '', null, asyncValidator('expected', {'long': 200, 'expected': 100}));
+               '', null !, asyncValidator('expected', {'long': 200, 'expected': 100}));
 
            c.setValue('long');
            c.setValue('expected');
@@ -216,14 +216,14 @@ export function main() {
 
       it('should support arrays of async validator functions if passed', fakeAsync(() => {
            const c =
-               new FormControl('value', null, [asyncValidator('expected'), otherAsyncValidator]);
+               new FormControl('value', null !, [asyncValidator('expected'), otherAsyncValidator]);
            tick();
 
            expect(c.errors).toEqual({'async': true, 'other': true});
          }));
 
       it('should add single async validator', fakeAsync(() => {
-           const c = new FormControl('value', null);
+           const c = new FormControl('value', null !);
 
            c.setAsyncValidators(asyncValidator('expected'));
            expect(c.asyncValidator).not.toEqual(null);
@@ -235,7 +235,7 @@ export function main() {
          }));
 
       it('should add async validator from array', fakeAsync(() => {
-           const c = new FormControl('value', null);
+           const c = new FormControl('value', null !);
 
            c.setAsyncValidators([asyncValidator('expected')]);
            expect(c.asyncValidator).not.toEqual(null);
@@ -634,8 +634,7 @@ export function main() {
            tick();
 
            expect(log).toEqual([
-             '' +
-                 'value: \'\'',
+             'value: \'\'',
              'status: \'INVALID\'',
              'value: \'nonEmpty\'',
              'status: \'PENDING\'',
@@ -935,7 +934,7 @@ export function main() {
         });
 
         it('should clear out async errors when disabled', fakeAsync(() => {
-             const c = new FormControl('', null, asyncValidator('expected'));
+             const c = new FormControl('', null !, asyncValidator('expected'));
              tick();
              expect(c.errors).toEqual({'async': true});
 
diff --git a/packages/forms/test/form_group_spec.ts b/packages/forms/test/form_group_spec.ts
index dd2d222d10..aa62b78c9c 100644
--- a/packages/forms/test/form_group_spec.ts
+++ b/packages/forms/test/form_group_spec.ts
@@ -15,7 +15,7 @@ import {AbstractControl, FormArray, FormControl, FormGroup, Validators} from '@a
 export function main() {
   function asyncValidator(expected: string, timeouts = {}) {
     return (c: AbstractControl) => {
-      let resolve: (result: any) => void;
+      let resolve: (result: any) => void = undefined !;
       const promise = new Promise(res => { resolve = res; });
       const t = (timeouts as any)[c.value] != null ? (timeouts as any)[c.value] : 0;
       const res = c.value != expected ? {'async': true} : null;
@@ -70,7 +70,7 @@ export function main() {
           'group': new FormGroup({'c2': new FormControl('v2'), 'c3': new FormControl('v3')}),
           'array': new FormArray([new FormControl('v4'), new FormControl('v5')])
         });
-        fg.get('group').get('c3').disable();
+        fg.get('group') !.get('c3') !.disable();
         (fg.get('array') as FormArray).at(1).disable();
 
         expect(fg.getRawValue())
@@ -690,7 +690,7 @@ export function main() {
     describe('asyncValidator', () => {
       it('should run the async validator', fakeAsync(() => {
            const c = new FormControl('value');
-           const g = new FormGroup({'one': c}, null, asyncValidator('expected'));
+           const g = new FormGroup({'one': c}, null !, asyncValidator('expected'));
 
            expect(g.pending).toEqual(true);
 
@@ -701,7 +701,7 @@ export function main() {
          }));
 
       it('should set the parent group\'s status to pending', fakeAsync(() => {
-           const c = new FormControl('value', null, asyncValidator('expected'));
+           const c = new FormControl('value', null !, asyncValidator('expected'));
            const g = new FormGroup({'one': c});
 
            expect(g.pending).toEqual(true);
@@ -713,13 +713,13 @@ export function main() {
 
       it('should run the parent group\'s async validator when children are pending',
          fakeAsync(() => {
-           const c = new FormControl('value', null, asyncValidator('expected'));
-           const g = new FormGroup({'one': c}, null, asyncValidator('expected'));
+           const c = new FormControl('value', null !, asyncValidator('expected'));
+           const g = new FormGroup({'one': c}, null !, asyncValidator('expected'));
 
            tick(1);
 
            expect(g.errors).toEqual({'async': true});
-           expect(g.get('one').errors).toEqual({'async': true});
+           expect(g.get('one') !.errors).toEqual({'async': true});
          }));
     });
 
@@ -772,10 +772,10 @@ export function main() {
         });
         expect(g.valid).toBe(false);
 
-        g.get('nested').disable();
+        g.get('nested') !.disable();
         expect(g.valid).toBe(true);
 
-        g.get('nested').enable();
+        g.get('nested') !.enable();
         expect(g.valid).toBe(false);
       });
 
@@ -784,10 +784,10 @@ export function main() {
             {nested: new FormGroup({one: new FormControl('one')}), two: new FormControl('two')});
         expect(g.value).toEqual({'nested': {'one': 'one'}, 'two': 'two'});
 
-        g.get('nested').disable();
+        g.get('nested') !.disable();
         expect(g.value).toEqual({'two': 'two'});
 
-        g.get('nested').enable();
+        g.get('nested') !.enable();
         expect(g.value).toEqual({'nested': {'one': 'one'}, 'two': 'two'});
       });
 
@@ -795,13 +795,13 @@ export function main() {
         const g = new FormGroup(
             {nested: new FormGroup({one: new FormControl('one'), two: new FormControl('two')})});
 
-        g.get('nested.two').disable();
+        g.get('nested.two') !.disable();
         expect(g.value).toEqual({nested: {one: 'one'}});
 
-        g.get('nested').disable();
+        g.get('nested') !.disable();
         expect(g.value).toEqual({nested: {one: 'one', two: 'two'}});
 
-        g.get('nested').enable();
+        g.get('nested') !.enable();
         expect(g.value).toEqual({nested: {one: 'one', two: 'two'}});
       });
 
@@ -809,38 +809,38 @@ export function main() {
         const g = new FormGroup(
             {nested: new FormGroup({one: new FormControl('one'), two: new FormControl('two')})});
 
-        g.get('nested.two').disable();
+        g.get('nested.two') !.disable();
         expect(g.value).toEqual({nested: {one: 'one'}});
 
-        g.get('nested').enable();
+        g.get('nested') !.enable();
         expect(g.value).toEqual({nested: {one: 'one', two: 'two'}});
       });
 
       it('should ignore disabled controls when determining dirtiness', () => {
         const g = new FormGroup(
             {nested: new FormGroup({one: new FormControl('one')}), two: new FormControl('two')});
-        g.get('nested.one').markAsDirty();
+        g.get('nested.one') !.markAsDirty();
         expect(g.dirty).toBe(true);
 
-        g.get('nested').disable();
-        expect(g.get('nested').dirty).toBe(true);
+        g.get('nested') !.disable();
+        expect(g.get('nested') !.dirty).toBe(true);
         expect(g.dirty).toEqual(false);
 
-        g.get('nested').enable();
+        g.get('nested') !.enable();
         expect(g.dirty).toEqual(true);
       });
 
       it('should ignore disabled controls when determining touched state', () => {
         const g = new FormGroup(
             {nested: new FormGroup({one: new FormControl('one')}), two: new FormControl('two')});
-        g.get('nested.one').markAsTouched();
+        g.get('nested.one') !.markAsTouched();
         expect(g.touched).toBe(true);
 
-        g.get('nested').disable();
-        expect(g.get('nested').touched).toBe(true);
+        g.get('nested') !.disable();
+        expect(g.get('nested') !.touched).toBe(true);
         expect(g.touched).toEqual(false);
 
-        g.get('nested').enable();
+        g.get('nested') !.enable();
         expect(g.touched).toEqual(true);
       });
 
@@ -907,7 +907,8 @@ export function main() {
         });
 
         it('should clear out async group errors when disabled', fakeAsync(() => {
-             const g = new FormGroup({'one': new FormControl()}, null, asyncValidator('expected'));
+             const g =
+                 new FormGroup({'one': new FormControl()}, null !, asyncValidator('expected'));
              tick();
              expect(g.errors).toEqual({'async': true});
 
@@ -920,7 +921,8 @@ export function main() {
            }));
 
         it('should re-populate async group errors when enabled from a child', fakeAsync(() => {
-             const g = new FormGroup({'one': new FormControl()}, null, asyncValidator('expected'));
+             const g =
+                 new FormGroup({'one': new FormControl()}, null !, asyncValidator('expected'));
              tick();
              expect(g.errors).toEqual({'async': true});
 
@@ -1028,7 +1030,7 @@ export function main() {
       });
 
       it('should remove control if new control is null', () => {
-        g.setControl('one', null);
+        g.setControl('one', null !);
         expect(g.controls['one']).not.toBeDefined();
         expect(g.value).toEqual({});
       });
diff --git a/packages/forms/test/reactive_integration_spec.ts b/packages/forms/test/reactive_integration_spec.ts
index 8d5ba36e43..3e758b0aed 100644
--- a/packages/forms/test/reactive_integration_spec.ts
+++ b/packages/forms/test/reactive_integration_spec.ts
@@ -6,14 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, EventEmitter, Input, Output, Type, forwardRef} from '@angular/core';
+import {Component, Directive, Input, Type, forwardRef} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
-import {AbstractControl, AsyncValidator, AsyncValidatorFn, COMPOSITION_BUFFER_MODE, ControlValueAccessor, FormArray, FormControl, FormGroup, FormGroupDirective, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {AbstractControl, AsyncValidator, AsyncValidatorFn, COMPOSITION_BUFFER_MODE, FormArray, FormControl, FormGroup, FormGroupDirective, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, ReactiveFormsModule, Validators} from '@angular/forms';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
 import {timer} from 'rxjs/observable/timer';
 import {_do} from 'rxjs/operator/do';
+import {MyInput, MyInputForm} from './value_accessor_integration_spec';
 
 export function main() {
   describe('reactive forms integration tests', () => {
@@ -75,7 +76,7 @@ export function main() {
 
     });
 
-    describe('rebound form groups', () => {
+    describe('re-bound form groups', () => {
 
       it('should update DOM elements initially', () => {
         const fixture = initTest(FormGroupComp);
@@ -110,24 +111,6 @@ export function main() {
         expect(input.nativeElement.value).toEqual('Carson');
       });
 
-      it('should work with radio buttons when reusing control', () => {
-        const fixture = initTest(FormControlRadioButtons);
-        const food = new FormControl('chicken');
-        fixture.componentInstance.form =
-            new FormGroup({'food': food, 'drink': new FormControl('')});
-        fixture.detectChanges();
-
-        const newForm = new FormGroup({'food': food, 'drink': new FormControl('')});
-        fixture.componentInstance.form = newForm;
-        fixture.detectChanges();
-
-        newForm.setValue({food: 'fish', drink: ''});
-        fixture.detectChanges();
-        const inputs = fixture.debugElement.queryAll(By.css('input'));
-        expect(inputs[0].nativeElement.checked).toBe(false);
-        expect(inputs[1].nativeElement.checked).toBe(true);
-      });
-
       it('should update nested form group model when UI changes', () => {
         const fixture = initTest(NestedFormGroupComp);
         fixture.componentInstance.form = new FormGroup(
@@ -166,7 +149,7 @@ export function main() {
         });
         fixture.componentInstance.form = form;
         fixture.detectChanges();
-        expect(form.get('login').errors).toEqual({required: true});
+        expect(form.get('login') !.errors).toEqual({required: true});
 
         const newForm = new FormGroup({
           'login': new FormControl(''),
@@ -177,7 +160,7 @@ export function main() {
         fixture.componentInstance.form = newForm;
         fixture.detectChanges();
 
-        expect(newForm.get('login').errors).toEqual({required: true});
+        expect(newForm.get('login') !.errors).toEqual({required: true});
       });
 
       it('should pick up dir validators from nested form groups', () => {
@@ -188,7 +171,7 @@ export function main() {
         });
         fixture.componentInstance.form = form;
         fixture.detectChanges();
-        expect(form.get('signin').valid).toBe(false);
+        expect(form.get('signin') !.valid).toBe(false);
 
         const newForm = new FormGroup({
           'signin':
@@ -197,7 +180,7 @@ export function main() {
         fixture.componentInstance.form = newForm;
         fixture.detectChanges();
 
-        expect(form.get('signin').valid).toBe(false);
+        expect(form.get('signin') !.valid).toBe(false);
       });
 
       it('should strip named controls that are not found', () => {
@@ -340,95 +323,6 @@ export function main() {
 
     });
 
-    describe('select controls', () => {
-      it(`should support primitive values`, () => {
-        const fixture = initTest(FormControlNameSelect);
-        fixture.detectChanges();
-
-        // model -> view
-        const select = fixture.debugElement.query(By.css('select'));
-        const sfOption = fixture.debugElement.query(By.css('option'));
-        expect(select.nativeElement.value).toEqual('SF');
-        expect(sfOption.nativeElement.selected).toBe(true);
-
-        select.nativeElement.value = 'NY';
-        dispatchEvent(select.nativeElement, 'change');
-        fixture.detectChanges();
-
-        // view -> model
-        expect(sfOption.nativeElement.selected).toBe(false);
-        expect(fixture.componentInstance.form.value).toEqual({'city': 'NY'});
-      });
-
-      it(`should support objects`, () => {
-        const fixture = initTest(FormControlSelectNgValue);
-        fixture.detectChanges();
-
-        // model -> view
-        const select = fixture.debugElement.query(By.css('select'));
-        const sfOption = fixture.debugElement.query(By.css('option'));
-        expect(select.nativeElement.value).toEqual('0: Object');
-        expect(sfOption.nativeElement.selected).toBe(true);
-      });
-
-      it('should throw an error if compareWith is not a function', () => {
-        const fixture = initTest(FormControlSelectWithCompareFn);
-        fixture.componentInstance.compareFn = null;
-        expect(() => fixture.detectChanges())
-            .toThrowError(/compareWith must be a function, but received null/);
-      });
-
-      it('should compare options using provided compareWith function', () => {
-        const fixture = initTest(FormControlSelectWithCompareFn);
-        fixture.detectChanges();
-
-        const select = fixture.debugElement.query(By.css('select'));
-        const sfOption = fixture.debugElement.query(By.css('option'));
-        expect(select.nativeElement.value).toEqual('0: Object');
-        expect(sfOption.nativeElement.selected).toBe(true);
-      });
-    });
-
-    describe('select multiple controls', () => {
-      it('should support primitive values', () => {
-        const fixture = initTest(FormControlSelectMultiple);
-        fixture.detectChanges();
-
-        const select = fixture.debugElement.query(By.css('select'));
-        const sfOption = fixture.debugElement.query(By.css('option'));
-        expect(select.nativeElement.value).toEqual(`0: 'SF'`);
-        expect(sfOption.nativeElement.selected).toBe(true);
-      });
-
-      it('should support objects', () => {
-        const fixture = initTest(FormControlSelectMultipleNgValue);
-        fixture.detectChanges();
-
-        const select = fixture.debugElement.query(By.css('select'));
-        const sfOption = fixture.debugElement.query(By.css('option'));
-        expect(select.nativeElement.value).toEqual('0: Object');
-        expect(sfOption.nativeElement.selected).toBe(true);
-      });
-
-      it('should throw an error when compareWith is not a function', () => {
-        const fixture = initTest(FormControlSelectMultipleWithCompareFn);
-        fixture.componentInstance.compareFn = null;
-        expect(() => fixture.detectChanges())
-            .toThrowError(/compareWith must be a function, but received null/);
-      });
-
-      it('should compare options using provided compareWith function', fakeAsync(() => {
-           const fixture = initTest(FormControlSelectMultipleWithCompareFn);
-           fixture.detectChanges();
-           tick();
-
-           const select = fixture.debugElement.query(By.css('select'));
-           const sfOption = fixture.debugElement.query(By.css('option'));
-           expect(select.nativeElement.value).toEqual('0: Object');
-           expect(sfOption.nativeElement.selected).toBe(true);
-         }));
-    });
-
     describe('form arrays', () => {
       it('should support form arrays', () => {
         const fixture = initTest(FormArrayComp);
@@ -623,7 +517,7 @@ export function main() {
       it('should emit ngSubmit event with the original submit event on submit', () => {
         const fixture = initTest(FormGroupComp);
         fixture.componentInstance.form = new FormGroup({'login': new FormControl('loginValue')});
-        fixture.componentInstance.event = null;
+        fixture.componentInstance.event = null !;
         fixture.detectChanges();
 
         const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
@@ -739,7 +633,7 @@ export function main() {
 
       it('should work with single fields and async validators', fakeAsync(() => {
            const fixture = initTest(FormControlComp);
-           const control = new FormControl('', null, uniqLoginAsyncValidator('good'));
+           const control = new FormControl('', null !, uniqLoginAsyncValidator('good'));
            fixture.debugElement.componentInstance.control = control;
            fixture.detectChanges();
 
@@ -837,482 +731,6 @@ export function main() {
 
     });
 
-    describe('value accessors', () => {
-
-      it('should support <input> without type', () => {
-        TestBed.overrideComponent(
-            FormControlComp, {set: {template: `<input [formControl]="control">`}});
-        const fixture = initTest(FormControlComp);
-        const control = new FormControl('old');
-        fixture.componentInstance.control = control;
-        fixture.detectChanges();
-
-        // model -> view
-        const input = fixture.debugElement.query(By.css('input'));
-        expect(input.nativeElement.value).toEqual('old');
-
-        input.nativeElement.value = 'new';
-        dispatchEvent(input.nativeElement, 'input');
-
-        // view -> model
-        expect(control.value).toEqual('new');
-      });
-
-      it('should support <input type=text>', () => {
-        const fixture = initTest(FormGroupComp);
-        const form = new FormGroup({'login': new FormControl('old')});
-        fixture.componentInstance.form = form;
-        fixture.detectChanges();
-
-        // model -> view
-        const input = fixture.debugElement.query(By.css('input'));
-        expect(input.nativeElement.value).toEqual('old');
-
-        input.nativeElement.value = 'new';
-        dispatchEvent(input.nativeElement, 'input');
-
-        // view -> model
-        expect(form.value).toEqual({'login': 'new'});
-      });
-
-      it('should ignore the change event for <input type=text>', () => {
-        const fixture = initTest(FormGroupComp);
-        const form = new FormGroup({'login': new FormControl('oldValue')});
-        fixture.componentInstance.form = form;
-        fixture.detectChanges();
-
-        const input = fixture.debugElement.query(By.css('input'));
-        form.valueChanges.subscribe({next: (value) => { throw 'Should not happen'; }});
-        input.nativeElement.value = 'updatedValue';
-
-        dispatchEvent(input.nativeElement, 'change');
-      });
-
-      it('should support <textarea>', () => {
-        TestBed.overrideComponent(
-            FormControlComp, {set: {template: `<textarea [formControl]="control"></textarea>`}});
-        const fixture = initTest(FormControlComp);
-        const control = new FormControl('old');
-        fixture.componentInstance.control = control;
-        fixture.detectChanges();
-
-        // model -> view
-        const textarea = fixture.debugElement.query(By.css('textarea'));
-        expect(textarea.nativeElement.value).toEqual('old');
-
-        textarea.nativeElement.value = 'new';
-        dispatchEvent(textarea.nativeElement, 'input');
-
-        // view -> model
-        expect(control.value).toEqual('new');
-      });
-
-      it('should support <type=checkbox>', () => {
-        TestBed.overrideComponent(
-            FormControlComp, {set: {template: `<input type="checkbox" [formControl]="control">`}});
-        const fixture = initTest(FormControlComp);
-        const control = new FormControl(true);
-        fixture.componentInstance.control = control;
-        fixture.detectChanges();
-
-        // model -> view
-        const input = fixture.debugElement.query(By.css('input'));
-        expect(input.nativeElement.checked).toBe(true);
-
-        input.nativeElement.checked = false;
-        dispatchEvent(input.nativeElement, 'change');
-
-        // view -> model
-        expect(control.value).toBe(false);
-      });
-
-      describe('should support <type=number>', () => {
-        it('with basic use case', () => {
-          const fixture = initTest(FormControlNumberInput);
-          const control = new FormControl(10);
-          fixture.componentInstance.control = control;
-          fixture.detectChanges();
-
-          // model -> view
-          const input = fixture.debugElement.query(By.css('input'));
-          expect(input.nativeElement.value).toEqual('10');
-
-          input.nativeElement.value = '20';
-          dispatchEvent(input.nativeElement, 'input');
-
-          // view -> model
-          expect(control.value).toEqual(20);
-        });
-
-        it('when value is cleared in the UI', () => {
-          const fixture = initTest(FormControlNumberInput);
-          const control = new FormControl(10, Validators.required);
-          fixture.componentInstance.control = control;
-          fixture.detectChanges();
-
-          const input = fixture.debugElement.query(By.css('input'));
-          input.nativeElement.value = '';
-          dispatchEvent(input.nativeElement, 'input');
-
-          expect(control.valid).toBe(false);
-          expect(control.value).toEqual(null);
-
-          input.nativeElement.value = '0';
-          dispatchEvent(input.nativeElement, 'input');
-
-          expect(control.valid).toBe(true);
-          expect(control.value).toEqual(0);
-        });
-
-        it('when value is cleared programmatically', () => {
-          const fixture = initTest(FormControlNumberInput);
-          const control = new FormControl(10);
-          fixture.componentInstance.control = control;
-          fixture.detectChanges();
-
-          control.setValue(null);
-
-          const input = fixture.debugElement.query(By.css('input'));
-          expect(input.nativeElement.value).toEqual('');
-        });
-      });
-
-      describe('should support <type=radio>', () => {
-
-        it('should support basic functionality', () => {
-          const fixture = initTest(FormControlRadioButtons);
-          const form =
-              new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
-          fixture.componentInstance.form = form;
-          fixture.detectChanges();
-
-          // model -> view
-          const inputs = fixture.debugElement.queryAll(By.css('input'));
-          expect(inputs[0].nativeElement.checked).toEqual(false);
-          expect(inputs[1].nativeElement.checked).toEqual(true);
-
-          dispatchEvent(inputs[0].nativeElement, 'change');
-          fixture.detectChanges();
-
-          // view -> model
-          expect(form.get('food').value).toEqual('chicken');
-          expect(inputs[1].nativeElement.checked).toEqual(false);
-
-          form.get('food').setValue('fish');
-          fixture.detectChanges();
-
-          // programmatic change -> view
-          expect(inputs[0].nativeElement.checked).toEqual(false);
-          expect(inputs[1].nativeElement.checked).toEqual(true);
-        });
-
-        it('should support an initial undefined value', () => {
-          const fixture = initTest(FormControlRadioButtons);
-          const form = new FormGroup({'food': new FormControl(), 'drink': new FormControl()});
-          fixture.componentInstance.form = form;
-          fixture.detectChanges();
-
-          const inputs = fixture.debugElement.queryAll(By.css('input'));
-          expect(inputs[0].nativeElement.checked).toEqual(false);
-          expect(inputs[1].nativeElement.checked).toEqual(false);
-        });
-
-        it('should reset properly', () => {
-          const fixture = initTest(FormControlRadioButtons);
-          const form =
-              new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
-          fixture.componentInstance.form = form;
-          fixture.detectChanges();
-
-          form.reset();
-          fixture.detectChanges();
-
-          const inputs = fixture.debugElement.queryAll(By.css('input'));
-          expect(inputs[0].nativeElement.checked).toEqual(false);
-          expect(inputs[1].nativeElement.checked).toEqual(false);
-        });
-
-        it('should set value to null and undefined properly', () => {
-          const fixture = initTest(FormControlRadioButtons);
-          const form = new FormGroup(
-              {'food': new FormControl('chicken'), 'drink': new FormControl('sprite')});
-          fixture.componentInstance.form = form;
-          fixture.detectChanges();
-
-          form.get('food').setValue(null);
-          fixture.detectChanges();
-
-          const inputs = fixture.debugElement.queryAll(By.css('input'));
-          expect(inputs[0].nativeElement.checked).toEqual(false);
-
-          form.get('food').setValue('chicken');
-          fixture.detectChanges();
-
-          form.get('food').setValue(undefined);
-          fixture.detectChanges();
-          expect(inputs[0].nativeElement.checked).toEqual(false);
-        });
-
-        it('should use formControlName to group radio buttons when name is absent', () => {
-          const fixture = initTest(FormControlRadioButtons);
-          const foodCtrl = new FormControl('fish');
-          const drinkCtrl = new FormControl('sprite');
-          fixture.componentInstance.form = new FormGroup({'food': foodCtrl, 'drink': drinkCtrl});
-          fixture.detectChanges();
-
-          const inputs = fixture.debugElement.queryAll(By.css('input'));
-          expect(inputs[0].nativeElement.checked).toEqual(false);
-          expect(inputs[1].nativeElement.checked).toEqual(true);
-          expect(inputs[2].nativeElement.checked).toEqual(false);
-          expect(inputs[3].nativeElement.checked).toEqual(true);
-
-          dispatchEvent(inputs[0].nativeElement, 'change');
-          inputs[0].nativeElement.checked = true;
-          fixture.detectChanges();
-
-          const value = fixture.componentInstance.form.value;
-          expect(value.food).toEqual('chicken');
-          expect(inputs[1].nativeElement.checked).toEqual(false);
-          expect(inputs[2].nativeElement.checked).toEqual(false);
-          expect(inputs[3].nativeElement.checked).toEqual(true);
-
-          drinkCtrl.setValue('cola');
-          fixture.detectChanges();
-
-          expect(inputs[0].nativeElement.checked).toEqual(true);
-          expect(inputs[1].nativeElement.checked).toEqual(false);
-          expect(inputs[2].nativeElement.checked).toEqual(true);
-          expect(inputs[3].nativeElement.checked).toEqual(false);
-        });
-
-        it('should support removing controls from <type=radio>', () => {
-          const fixture = initTest(FormControlRadioButtons);
-          const showRadio = new FormControl('yes');
-          const form =
-              new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
-          fixture.componentInstance.form = form;
-          fixture.componentInstance.showRadio = showRadio;
-          showRadio.valueChanges.subscribe((change) => {
-            (change === 'yes') ? form.addControl('food', new FormControl('fish')) :
-                                 form.removeControl('food');
-          });
-          fixture.detectChanges();
-
-          const input = fixture.debugElement.query(By.css('[value="no"]'));
-          dispatchEvent(input.nativeElement, 'change');
-
-          fixture.detectChanges();
-          expect(form.value).toEqual({drink: 'sprite'});
-        });
-
-        it('should differentiate controls on different levels with the same name', () => {
-          TestBed.overrideComponent(FormControlRadioButtons, {
-            set: {
-              template: `
-              <div [formGroup]="form">
-                <input type="radio" formControlName="food" value="chicken">
-                <input type="radio" formControlName="food" value="fish">
-                <div formGroupName="nested">
-                  <input type="radio" formControlName="food" value="chicken">
-                  <input type="radio" formControlName="food" value="fish">
-                </div>
-              </div>
-              `
-            }
-          });
-          const fixture = initTest(FormControlRadioButtons);
-          const form = new FormGroup({
-            food: new FormControl('fish'),
-            nested: new FormGroup({food: new FormControl('fish')})
-          });
-          fixture.componentInstance.form = form;
-          fixture.detectChanges();
-
-          // model -> view
-          const inputs = fixture.debugElement.queryAll(By.css('input'));
-          expect(inputs[0].nativeElement.checked).toEqual(false);
-          expect(inputs[1].nativeElement.checked).toEqual(true);
-          expect(inputs[2].nativeElement.checked).toEqual(false);
-          expect(inputs[3].nativeElement.checked).toEqual(true);
-
-          dispatchEvent(inputs[0].nativeElement, 'change');
-          fixture.detectChanges();
-
-          // view -> model
-          expect(form.get('food').value).toEqual('chicken');
-          expect(form.get('nested.food').value).toEqual('fish');
-
-          expect(inputs[1].nativeElement.checked).toEqual(false);
-          expect(inputs[2].nativeElement.checked).toEqual(false);
-          expect(inputs[3].nativeElement.checked).toEqual(true);
-
-        });
-
-        it('should disable all radio buttons when disable() is called', () => {
-          const fixture = initTest(FormControlRadioButtons);
-          const form =
-              new FormGroup({food: new FormControl('fish'), drink: new FormControl('cola')});
-          fixture.componentInstance.form = form;
-          fixture.detectChanges();
-
-          const inputs = fixture.debugElement.queryAll(By.css('input'));
-          expect(inputs[0].nativeElement.disabled).toEqual(false);
-          expect(inputs[1].nativeElement.disabled).toEqual(false);
-          expect(inputs[2].nativeElement.disabled).toEqual(false);
-          expect(inputs[3].nativeElement.disabled).toEqual(false);
-
-          form.get('food').disable();
-          expect(inputs[0].nativeElement.disabled).toEqual(true);
-          expect(inputs[1].nativeElement.disabled).toEqual(true);
-          expect(inputs[2].nativeElement.disabled).toEqual(false);
-          expect(inputs[3].nativeElement.disabled).toEqual(false);
-
-          form.disable();
-          expect(inputs[0].nativeElement.disabled).toEqual(true);
-          expect(inputs[1].nativeElement.disabled).toEqual(true);
-          expect(inputs[2].nativeElement.disabled).toEqual(true);
-          expect(inputs[3].nativeElement.disabled).toEqual(true);
-
-          form.enable();
-          expect(inputs[0].nativeElement.disabled).toEqual(false);
-          expect(inputs[1].nativeElement.disabled).toEqual(false);
-          expect(inputs[2].nativeElement.disabled).toEqual(false);
-          expect(inputs[3].nativeElement.disabled).toEqual(false);
-        });
-
-        it('should disable all radio buttons when initially disabled', () => {
-          const fixture = initTest(FormControlRadioButtons);
-          const form = new FormGroup({
-            food: new FormControl({value: 'fish', disabled: true}),
-            drink: new FormControl('cola')
-          });
-          fixture.componentInstance.form = form;
-          fixture.detectChanges();
-
-          const inputs = fixture.debugElement.queryAll(By.css('input'));
-          expect(inputs[0].nativeElement.disabled).toEqual(true);
-          expect(inputs[1].nativeElement.disabled).toEqual(true);
-          expect(inputs[2].nativeElement.disabled).toEqual(false);
-          expect(inputs[3].nativeElement.disabled).toEqual(false);
-        });
-
-      });
-
-      describe('should support <type=range>', () => {
-        it('with basic use case', () => {
-          const fixture = initTest(FormControlRangeInput);
-          const control = new FormControl(10);
-          fixture.componentInstance.control = control;
-          fixture.detectChanges();
-
-          // model -> view
-          const input = fixture.debugElement.query(By.css('input'));
-          expect(input.nativeElement.value).toEqual('10');
-
-          input.nativeElement.value = '20';
-          dispatchEvent(input.nativeElement, 'input');
-
-          // view -> model
-          expect(control.value).toEqual(20);
-        });
-
-        it('when value is cleared in the UI', () => {
-          const fixture = initTest(FormControlNumberInput);
-          const control = new FormControl(10, Validators.required);
-          fixture.componentInstance.control = control;
-          fixture.detectChanges();
-
-          const input = fixture.debugElement.query(By.css('input'));
-          input.nativeElement.value = '';
-          dispatchEvent(input.nativeElement, 'input');
-
-          expect(control.valid).toBe(false);
-          expect(control.value).toEqual(null);
-
-          input.nativeElement.value = '0';
-          dispatchEvent(input.nativeElement, 'input');
-
-          expect(control.valid).toBe(true);
-          expect(control.value).toEqual(0);
-        });
-
-        it('when value is cleared programmatically', () => {
-          const fixture = initTest(FormControlNumberInput);
-          const control = new FormControl(10);
-          fixture.componentInstance.control = control;
-          fixture.detectChanges();
-
-          control.setValue(null);
-
-          const input = fixture.debugElement.query(By.css('input'));
-          expect(input.nativeElement.value).toEqual('');
-        });
-      });
-
-      describe('custom value accessors', () => {
-        it('should support basic functionality', () => {
-          const fixture = initTest(WrappedValueForm, WrappedValue);
-          const form = new FormGroup({'login': new FormControl('aa')});
-          fixture.componentInstance.form = form;
-          fixture.detectChanges();
-
-          // model -> view
-          const input = fixture.debugElement.query(By.css('input'));
-          expect(input.nativeElement.value).toEqual('!aa!');
-
-          input.nativeElement.value = '!bb!';
-          dispatchEvent(input.nativeElement, 'input');
-
-          // view -> model
-          expect(form.value).toEqual({'login': 'bb'});
-
-          // custom validator
-          expect(form.get('login').errors).toEqual({'err': true});
-          form.setValue({login: 'expected'});
-          expect(form.get('login').errors).toEqual(null);
-        });
-
-        it('should support non builtin input elements that fire a change event without a \'target\' property',
-           () => {
-             const fixture = initTest(MyInputForm, MyInput);
-             fixture.componentInstance.form = new FormGroup({'login': new FormControl('aa')});
-             fixture.detectChanges();
-
-             const input = fixture.debugElement.query(By.css('my-input'));
-             expect(input.componentInstance.value).toEqual('!aa!');
-
-             input.componentInstance.value = '!bb!';
-             input.componentInstance.onInput.subscribe((value: any) => {
-               expect(fixture.componentInstance.form.value).toEqual({'login': 'bb'});
-             });
-             input.componentInstance.dispatchChangeEvent();
-           });
-
-        it('should support custom accessors without setDisabledState - formControlName', () => {
-          const fixture = initTest(WrappedValueForm, WrappedValue);
-          fixture.componentInstance.form = new FormGroup({
-            'login': new FormControl({value: 'aa', disabled: true}),
-          });
-          fixture.detectChanges();
-          expect(fixture.componentInstance.form.status).toEqual('DISABLED');
-          expect(fixture.componentInstance.form.get('login').status).toEqual('DISABLED');
-        });
-
-        it('should support custom accessors without setDisabledState - formControlDirective',
-           () => {
-             TestBed.overrideComponent(
-                 FormControlComp,
-                 {set: {template: `<input type="text" [formControl]="control" wrapped-value>`}});
-             const fixture = initTest(FormControlComp);
-             fixture.componentInstance.control = new FormControl({value: 'aa', disabled: true});
-             fixture.detectChanges();
-             expect(fixture.componentInstance.control.status).toEqual('DISABLED');
-           });
-
-      });
-
-    });
-
     describe('ngModel interactions', () => {
 
       it('should support ngModel for complex forms', fakeAsync(() => {
@@ -1539,9 +957,9 @@ export function main() {
             .toEqual(pattern.nativeElement.getAttribute('pattern'));
 
         fixture.componentInstance.required = false;
-        fixture.componentInstance.minLen = null;
-        fixture.componentInstance.maxLen = null;
-        fixture.componentInstance.pattern = null;
+        fixture.componentInstance.minLen = null !;
+        fixture.componentInstance.maxLen = null !;
+        fixture.componentInstance.pattern = null !;
         fixture.detectChanges();
 
         expect(form.hasError('required', ['login'])).toEqual(false);
@@ -1581,9 +999,9 @@ export function main() {
         fixture.detectChanges();
 
         fixture.componentInstance.required = false;
-        fixture.componentInstance.minLen = null;
-        fixture.componentInstance.maxLen = null;
-        fixture.componentInstance.pattern = null;
+        fixture.componentInstance.minLen = null !;
+        fixture.componentInstance.maxLen = null !;
+        fixture.componentInstance.pattern = null !;
         fixture.detectChanges();
 
         expect(newForm.hasError('required', ['login'])).toEqual(false);
@@ -1681,7 +1099,7 @@ export function main() {
            const fixture = initTest(FormControlComp);
            const resultArr: number[] = [];
            fixture.componentInstance.control =
-               new FormControl('', null, observableValidator(resultArr));
+               new FormControl('', null !, observableValidator(resultArr));
            fixture.detectChanges();
            tick(100);
 
@@ -1992,44 +1410,6 @@ export function main() {
   });
 }
 
-@Directive({
-  selector: '[wrapped-value]',
-  host: {'(input)': 'handleOnInput($event.target.value)', '[value]': 'value'},
-  providers: [
-    {provide: NG_VALUE_ACCESSOR, multi: true, useExisting: WrappedValue},
-    {provide: NG_VALIDATORS, multi: true, useExisting: WrappedValue}
-  ]
-})
-class WrappedValue implements ControlValueAccessor {
-  value: any;
-  onChange: Function;
-
-  writeValue(value: any) { this.value = `!${value}!`; }
-
-  registerOnChange(fn: (value: any) => void) { this.onChange = fn; }
-  registerOnTouched(fn: any) {}
-
-  handleOnInput(value: any) { this.onChange(value.substring(1, value.length - 1)); }
-
-  validate(c: AbstractControl) { return c.value === 'expected' ? null : {'err': true}; }
-}
-
-@Component({selector: 'my-input', template: ''})
-class MyInput implements ControlValueAccessor {
-  @Output('input') onInput = new EventEmitter();
-  value: string;
-
-  constructor(cd: NgControl) { cd.valueAccessor = this; }
-
-  writeValue(value: any) { this.value = `!${value}!`; }
-
-  registerOnChange(fn: (value: any) => void) { this.onInput.subscribe({next: fn}); }
-
-  registerOnTouched(fn: any) {}
-
-  dispatchChangeEvent() { this.onInput.emit(this.value.substring(1, this.value.length - 1)); }
-}
-
 function uniqLoginAsyncValidator(expectedValue: string, timeout: number = 0) {
   return (c: AbstractControl) => {
     let resolve: (result: any) => void;
@@ -2109,39 +1489,6 @@ class NestedFormGroupComp {
   form: FormGroup;
 }
 
-@Component({
-  selector: 'form-control-number-input',
-  template: `<input type="number" [formControl]="control">`
-})
-class FormControlNumberInput {
-  control: FormControl;
-}
-
-@Component({
-  selector: 'form-control-range-input',
-  template: `<input type="range" [formControl]="control">`
-})
-class FormControlRangeInput {
-  control: FormControl;
-}
-
-@Component({
-  selector: 'form-control-radio-buttons',
-  template: `
-  <form [formGroup]="form" *ngIf="showRadio.value === 'yes'">
-    <input type="radio" formControlName="food" value="chicken">
-    <input type="radio" formControlName="food" value="fish">
-    <input type="radio" formControlName="drink" value="cola">
-    <input type="radio" formControlName="drink" value="sprite">
-  </form>
-  <input type="radio" [formControl]="showRadio" value="yes">
-  <input type="radio" [formControl]="showRadio" value="no">`
-})
-class FormControlRadioButtons {
-  form: FormGroup;
-  showRadio = new FormControl('yes');
-}
-
 @Component({
   selector: 'form-array-comp',
   template: `
@@ -2175,115 +1522,6 @@ class FormArrayNestedGroup {
   cityArray: FormArray;
 }
 
-@Component({
-  selector: 'form-control-name-select',
-  template: `
-    <div [formGroup]="form">
-      <select formControlName="city">
-        <option *ngFor="let c of cities" [value]="c"></option>
-      </select>
-    </div>`
-})
-class FormControlNameSelect {
-  cities = ['SF', 'NY'];
-  form = new FormGroup({city: new FormControl('SF')});
-}
-
-@Component({
-  selector: 'form-control-select-ngValue',
-  template: `
-    <div [formGroup]="form">
-      <select formControlName="city">
-        <option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
-      </select>
-    </div>`
-})
-class FormControlSelectNgValue {
-  cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
-  form = new FormGroup({city: new FormControl(this.cities[0])});
-}
-
-@Component({
-  selector: 'form-control-select-compare-with',
-  template: `
-    <div [formGroup]="form">
-      <select formControlName="city" [compareWith]="compareFn">
-        <option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
-      </select>
-    </div>`
-})
-class FormControlSelectWithCompareFn {
-  compareFn:
-      (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
-  cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
-  form = new FormGroup({city: new FormControl({id: 1, name: 'SF'})});
-}
-
-@Component({
-  selector: 'form-control-select-multiple',
-  template: `
-    <div [formGroup]="form">
-      <select multiple formControlName="city">
-        <option *ngFor="let c of cities" [value]="c">{{c}}</option>
-      </select>
-    </div>`
-})
-class FormControlSelectMultiple {
-  cities = ['SF', 'NY'];
-  form = new FormGroup({city: new FormControl(['SF'])});
-}
-
-@Component({
-  selector: 'form-control-select-multiple',
-  template: `
-    <div [formGroup]="form">
-      <select multiple formControlName="city">
-        <option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
-      </select>
-    </div>`
-})
-class FormControlSelectMultipleNgValue {
-  cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
-  form = new FormGroup({city: new FormControl([this.cities[0]])});
-}
-
-@Component({
-  selector: 'form-control-select-multiple-compare-with',
-  template: `
-    <div [formGroup]="form">
-      <select multiple formControlName="city" [compareWith]="compareFn">
-        <option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
-      </select>
-    </div>`
-})
-class FormControlSelectMultipleWithCompareFn {
-  compareFn:
-      (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
-  cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
-  form = new FormGroup({city: new FormControl([{id: 1, name: 'SF'}])});
-}
-
-@Component({
-  selector: 'wrapped-value-form',
-  template: `
-   <div [formGroup]="form">
-    <input type="text" formControlName="login" wrapped-value>
-  </div>`
-})
-class WrappedValueForm {
-  form: FormGroup;
-}
-
-@Component({
-  selector: 'my-input-form',
-  template: `
-   <div [formGroup]="form">
-      <my-input formControlName="login"></my-input>
-   </div>`
-})
-class MyInputForm {
-  form: FormGroup;
-}
 
 @Component({
   selector: 'form-group-ng-model',
diff --git a/packages/forms/test/template_integration_spec.ts b/packages/forms/test/template_integration_spec.ts
index 4ae9c7cd08..6436350d85 100644
--- a/packages/forms/test/template_integration_spec.ts
+++ b/packages/forms/test/template_integration_spec.ts
@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, Input, Type, forwardRef} from '@angular/core';
+import {Component, Directive, Type, forwardRef} from '@angular/core';
 import {ComponentFixture, TestBed, async, fakeAsync, tick} from '@angular/core/testing';
-import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, ControlValueAccessor, FormsModule, NG_ASYNC_VALIDATORS, NG_VALUE_ACCESSOR, NgForm} from '@angular/forms';
+import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, FormsModule, NG_ASYNC_VALIDATORS, NgForm} from '@angular/forms';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
+import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integration_spec';
 
 export function main() {
   describe('template-driven forms integration tests', () => {
@@ -107,9 +108,9 @@ export function main() {
            tick();
 
            const form = fixture.debugElement.children[0].injector.get(NgForm);
-           expect(form.control.get('name').value).toEqual({first: 'Nancy', last: 'Drew'});
-           expect(form.control.get('name.first').value).toEqual('Nancy');
-           expect(form.control.get('email').value).toEqual('some email');
+           expect(form.control.get('name') !.value).toEqual({first: 'Nancy', last: 'Drew'});
+           expect(form.control.get('name.first') !.value).toEqual('Nancy');
+           expect(form.control.get('email') !.value).toEqual('some email');
          }));
 
       it('should remove controls and control groups from form control model', fakeAsync(() => {
@@ -121,7 +122,7 @@ export function main() {
            tick();
 
            const form = fixture.debugElement.children[0].injector.get(NgForm);
-           expect(form.control.get('email').value).toEqual('some email');
+           expect(form.control.get('email') !.value).toEqual('some email');
            expect(form.value).toEqual({name: {first: 'Nancy'}, email: 'some email'});
 
            // should remove individual control successfully
@@ -132,8 +133,8 @@ export function main() {
            expect(form.control.get('email')).toBe(null);
            expect(form.value).toEqual({name: {first: 'Nancy'}});
 
-           expect(form.control.get('name').value).toEqual({first: 'Nancy'});
-           expect(form.control.get('name.first').value).toEqual('Nancy');
+           expect(form.control.get('name') !.value).toEqual({first: 'Nancy'});
+           expect(form.control.get('name.first') !.value).toEqual('Nancy');
 
            // should remove form group successfully
            fixture.componentInstance.groupShowing = false;
@@ -228,7 +229,7 @@ export function main() {
       it('should not create a template-driven form when ngNoForm is used', () => {
         const fixture = initTest(NgNoFormComp);
         fixture.detectChanges();
-        expect(fixture.debugElement.children[0].providerTokens.length).toEqual(0);
+        expect(fixture.debugElement.children[0].providerTokens !.length).toEqual(0);
       });
 
       it('should not add novalidate when ngNoForm is used', () => {
@@ -282,7 +283,7 @@ export function main() {
     describe('submit and reset events', () => {
       it('should emit ngSubmit event with the original submit event on submit', fakeAsync(() => {
            const fixture = initTest(NgModelForm);
-           fixture.componentInstance.event = null;
+           fixture.componentInstance.event = null !;
 
            const form = fixture.debugElement.query(By.css('form'));
            dispatchEvent(form.nativeElement, 'submit');
@@ -355,11 +356,11 @@ export function main() {
            expect(form.valid).toEqual(true);
            expect(form.value).toEqual({});
 
-           let formValidity: string;
-           let formValue: Object;
+           let formValidity: string = undefined !;
+           let formValue: Object = undefined !;
 
-           form.statusChanges.subscribe((status: string) => formValidity = status);
-           form.valueChanges.subscribe((value: string) => formValue = value);
+           form.statusChanges !.subscribe((status: string) => formValidity = status);
+           form.valueChanges !.subscribe((value: string) => formValue = value);
 
            tick();
 
@@ -374,8 +375,8 @@ export function main() {
            fixture.detectChanges();
            tick();
 
-           form.get('name').valueChanges.subscribe(
-               () => { expect(form.get('name').dirty).toBe(true); });
+           form.get('name') !.valueChanges.subscribe(
+               () => { expect(form.get('name') !.dirty).toBe(true); });
 
            const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
            inputEl.value = 'newValue';
@@ -396,10 +397,10 @@ export function main() {
            inputEl.value = 'newValue';
            dispatchEvent(inputEl, 'input');
 
-           expect(form.get('name').pristine).toBe(false);
+           expect(form.get('name') !.pristine).toBe(false);
 
-           form.get('name').valueChanges.subscribe(
-               () => { expect(form.get('name').pristine).toBe(true); });
+           form.get('name') !.valueChanges.subscribe(
+               () => { expect(form.get('name') !.pristine).toBe(true); });
 
            dispatchEvent(formEl, 'reset');
          }));
@@ -418,7 +419,7 @@ export function main() {
            const form = fixture.debugElement.children[0].injector.get(NgForm);
            expect(form.value).toEqual({name: {first: '', last: 'Drew'}, email: 'some email'});
            expect(form.valid).toBe(false);
-           expect(form.control.get('name.first').disabled).toBe(false);
+           expect(form.control.get('name.first') !.disabled).toBe(false);
 
            fixture.componentInstance.isDisabled = true;
            fixture.detectChanges();
@@ -426,7 +427,7 @@ export function main() {
 
            expect(form.value).toEqual({name: {last: 'Drew'}, email: 'some email'});
            expect(form.valid).toBe(true);
-           expect(form.control.get('name.first').disabled).toBe(true);
+           expect(form.control.get('name.first') !.disabled).toBe(true);
          }));
 
       it('should add disabled attribute in the UI if disable() is called programmatically',
@@ -438,7 +439,7 @@ export function main() {
            tick();
 
            const form = fixture.debugElement.children[0].injector.get(NgForm);
-           form.control.get('name.first').disable();
+           form.control.get('name.first') !.disable();
            fixture.detectChanges();
            tick();
 
@@ -455,7 +456,7 @@ export function main() {
              fixture.detectChanges();
              fixture.whenStable().then(() => {
                const form = fixture.debugElement.children[0].injector.get(NgForm);
-               expect(form.control.get('name').disabled).toBe(true);
+               expect(form.control.get('name') !.disabled).toBe(true);
 
                const customInput = fixture.debugElement.query(By.css('[name="custom"]'));
                expect(customInput.nativeElement.disabled).toEqual(true);
@@ -477,7 +478,7 @@ export function main() {
            fixture.detectChanges();
            tick();
            const form = fixture.debugElement.children[0].injector.get(NgForm);
-           expect(form.control.get('name').disabled).toBe(true);
+           expect(form.control.get('name') !.disabled).toBe(true);
 
            const input = fixture.debugElement.query(By.css('input'));
            expect(input.nativeElement.disabled).toEqual(true);
@@ -488,393 +489,6 @@ export function main() {
            expect(input.nativeElement.disabled).toEqual(false);
          }));
 
-      it('should disable radio controls properly with programmatic call', fakeAsync(() => {
-           const fixture = initTest(NgModelRadioForm);
-           fixture.componentInstance.food = 'fish';
-           fixture.detectChanges();
-           tick();
-
-           const form = fixture.debugElement.children[0].injector.get(NgForm);
-           form.control.get('food').disable();
-           tick();
-
-           const inputs = fixture.debugElement.queryAll(By.css('input'));
-           expect(inputs[0].nativeElement.disabled).toBe(true);
-           expect(inputs[1].nativeElement.disabled).toBe(true);
-           expect(inputs[2].nativeElement.disabled).toBe(false);
-           expect(inputs[3].nativeElement.disabled).toBe(false);
-
-           form.control.disable();
-           tick();
-
-           expect(inputs[0].nativeElement.disabled).toBe(true);
-           expect(inputs[1].nativeElement.disabled).toBe(true);
-           expect(inputs[2].nativeElement.disabled).toBe(true);
-           expect(inputs[3].nativeElement.disabled).toBe(true);
-
-           form.control.enable();
-           tick();
-
-           expect(inputs[0].nativeElement.disabled).toBe(false);
-           expect(inputs[1].nativeElement.disabled).toBe(false);
-           expect(inputs[2].nativeElement.disabled).toBe(false);
-           expect(inputs[3].nativeElement.disabled).toBe(false);
-         }));
-
-    });
-
-    describe('range control', () => {
-      it('should support <type=range>', fakeAsync(() => {
-           const fixture = initTest(NgModelRangeForm);
-           // model -> view
-           fixture.componentInstance.val = 4;
-           fixture.detectChanges();
-           tick();
-           const input = fixture.debugElement.query(By.css('input'));
-           expect(input.nativeElement.value).toBe('4');
-           fixture.detectChanges();
-           tick();
-           const newVal = '4';
-           input.triggerEventHandler('input', {target: {value: newVal}});
-           tick();
-           // view -> model
-           fixture.detectChanges();
-           expect(typeof(fixture.componentInstance.val)).toBe('number');
-         }));
-    });
-
-    describe('radio controls', () => {
-      it('should support <type=radio>', fakeAsync(() => {
-           const fixture = initTest(NgModelRadioForm);
-           fixture.componentInstance.food = 'fish';
-           fixture.detectChanges();
-           tick();
-
-           // model -> view
-           const inputs = fixture.debugElement.queryAll(By.css('input'));
-           expect(inputs[0].nativeElement.checked).toEqual(false);
-           expect(inputs[1].nativeElement.checked).toEqual(true);
-
-           dispatchEvent(inputs[0].nativeElement, 'change');
-           tick();
-
-           // view -> model
-           expect(fixture.componentInstance.food).toEqual('chicken');
-           expect(inputs[1].nativeElement.checked).toEqual(false);
-         }));
-
-      it('should support multiple named <type=radio> groups', fakeAsync(() => {
-           const fixture = initTest(NgModelRadioForm);
-           fixture.componentInstance.food = 'fish';
-           fixture.componentInstance.drink = 'sprite';
-           fixture.detectChanges();
-           tick();
-
-           const inputs = fixture.debugElement.queryAll(By.css('input'));
-           expect(inputs[0].nativeElement.checked).toEqual(false);
-           expect(inputs[1].nativeElement.checked).toEqual(true);
-           expect(inputs[2].nativeElement.checked).toEqual(false);
-           expect(inputs[3].nativeElement.checked).toEqual(true);
-
-           dispatchEvent(inputs[0].nativeElement, 'change');
-           tick();
-
-           expect(fixture.componentInstance.food).toEqual('chicken');
-           expect(fixture.componentInstance.drink).toEqual('sprite');
-           expect(inputs[1].nativeElement.checked).toEqual(false);
-           expect(inputs[2].nativeElement.checked).toEqual(false);
-           expect(inputs[3].nativeElement.checked).toEqual(true);
-         }));
-
-      it('should support initial undefined value', fakeAsync(() => {
-           const fixture = initTest(NgModelRadioForm);
-           fixture.detectChanges();
-           tick();
-
-           const inputs = fixture.debugElement.queryAll(By.css('input'));
-           expect(inputs[0].nativeElement.checked).toEqual(false);
-           expect(inputs[1].nativeElement.checked).toEqual(false);
-           expect(inputs[2].nativeElement.checked).toEqual(false);
-           expect(inputs[3].nativeElement.checked).toEqual(false);
-         }));
-
-      it('should support resetting properly', fakeAsync(() => {
-           const fixture = initTest(NgModelRadioForm);
-           fixture.componentInstance.food = 'chicken';
-           fixture.detectChanges();
-           tick();
-
-           const form = fixture.debugElement.query(By.css('form'));
-           dispatchEvent(form.nativeElement, 'reset');
-           fixture.detectChanges();
-           tick();
-
-           const inputs = fixture.debugElement.queryAll(By.css('input'));
-           expect(inputs[0].nativeElement.checked).toEqual(false);
-           expect(inputs[1].nativeElement.checked).toEqual(false);
-         }));
-
-      it('should support setting value to null and undefined', fakeAsync(() => {
-           const fixture = initTest(NgModelRadioForm);
-           fixture.componentInstance.food = 'chicken';
-           fixture.detectChanges();
-           tick();
-
-           fixture.componentInstance.food = null;
-           fixture.detectChanges();
-           tick();
-
-           const inputs = fixture.debugElement.queryAll(By.css('input'));
-           expect(inputs[0].nativeElement.checked).toEqual(false);
-           expect(inputs[1].nativeElement.checked).toEqual(false);
-
-           fixture.componentInstance.food = 'chicken';
-           fixture.detectChanges();
-           tick();
-
-           fixture.componentInstance.food = undefined;
-           fixture.detectChanges();
-           tick();
-           expect(inputs[0].nativeElement.checked).toEqual(false);
-           expect(inputs[1].nativeElement.checked).toEqual(false);
-         }));
-
-    });
-
-    describe('select controls', () => {
-      it('with option values that are objects', fakeAsync(() => {
-           const fixture = initTest(NgModelSelectForm);
-           const comp = fixture.componentInstance;
-           comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
-           comp.selectedCity = comp.cities[1];
-           fixture.detectChanges();
-           tick();
-
-           const select = fixture.debugElement.query(By.css('select'));
-           const nycOption = fixture.debugElement.queryAll(By.css('option'))[1];
-
-           // model -> view
-           expect(select.nativeElement.value).toEqual('1: Object');
-           expect(nycOption.nativeElement.selected).toBe(true);
-
-           select.nativeElement.value = '2: Object';
-           dispatchEvent(select.nativeElement, 'change');
-           fixture.detectChanges();
-           tick();
-
-           // view -> model
-           expect(comp.selectedCity['name']).toEqual('Buffalo');
-         }));
-
-      it('when new options are added', fakeAsync(() => {
-           const fixture = initTest(NgModelSelectForm);
-           const comp = fixture.componentInstance;
-           comp.cities = [{'name': 'SF'}, {'name': 'NYC'}];
-           comp.selectedCity = comp.cities[1];
-           fixture.detectChanges();
-           tick();
-
-           comp.cities.push({'name': 'Buffalo'});
-           comp.selectedCity = comp.cities[2];
-           fixture.detectChanges();
-           tick();
-
-           const select = fixture.debugElement.query(By.css('select'));
-           const buffalo = fixture.debugElement.queryAll(By.css('option'))[2];
-           expect(select.nativeElement.value).toEqual('2: Object');
-           expect(buffalo.nativeElement.selected).toBe(true);
-         }));
-
-      it('when options are removed', fakeAsync(() => {
-           const fixture = initTest(NgModelSelectForm);
-           const comp = fixture.componentInstance;
-           comp.cities = [{'name': 'SF'}, {'name': 'NYC'}];
-           comp.selectedCity = comp.cities[1];
-           fixture.detectChanges();
-           tick();
-
-           const select = fixture.debugElement.query(By.css('select'));
-           expect(select.nativeElement.value).toEqual('1: Object');
-
-           comp.cities.pop();
-           fixture.detectChanges();
-           tick();
-
-           expect(select.nativeElement.value).not.toEqual('1: Object');
-         }));
-
-      it('when option values have same content, but different identities', fakeAsync(() => {
-           const fixture = initTest(NgModelSelectForm);
-           const comp = fixture.componentInstance;
-           comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'NYC'}];
-           comp.selectedCity = comp.cities[0];
-           fixture.detectChanges();
-
-           comp.selectedCity = comp.cities[2];
-           fixture.detectChanges();
-           tick();
-
-           const select = fixture.debugElement.query(By.css('select'));
-           const secondNYC = fixture.debugElement.queryAll(By.css('option'))[2];
-           expect(select.nativeElement.value).toEqual('2: Object');
-           expect(secondNYC.nativeElement.selected).toBe(true);
-         }));
-
-      it('should work with null option', fakeAsync(() => {
-           const fixture = initTest(NgModelSelectWithNullForm);
-           const comp = fixture.componentInstance;
-           comp.cities = [{'name': 'SF'}, {'name': 'NYC'}];
-           comp.selectedCity = null;
-           fixture.detectChanges();
-
-           const select = fixture.debugElement.query(By.css('select'));
-
-           select.nativeElement.value = '2: Object';
-           dispatchEvent(select.nativeElement, 'change');
-           fixture.detectChanges();
-           tick();
-           expect(comp.selectedCity['name']).toEqual('NYC');
-
-           select.nativeElement.value = '0: null';
-           dispatchEvent(select.nativeElement, 'change');
-           fixture.detectChanges();
-           tick();
-           expect(comp.selectedCity).toEqual(null);
-         }));
-
-      it('should throw an error when compareWith is not a function', () => {
-        const fixture = initTest(NgModelSelectWithCustomCompareFnForm);
-        const comp = fixture.componentInstance;
-        comp.compareFn = null;
-        expect(() => fixture.detectChanges())
-            .toThrowError(/compareWith must be a function, but received null/);
-      });
-
-      it('should compare options using provided compareWith function', fakeAsync(() => {
-           const fixture = initTest(NgModelSelectWithCustomCompareFnForm);
-           const comp = fixture.componentInstance;
-           comp.selectedCity = {id: 1, name: 'SF'};
-           comp.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'LA'}];
-           fixture.detectChanges();
-           tick();
-
-           const select = fixture.debugElement.query(By.css('select'));
-           const sfOption = fixture.debugElement.query(By.css('option'));
-           expect(select.nativeElement.value).toEqual('0: Object');
-           expect(sfOption.nativeElement.selected).toBe(true);
-         }));
-    });
-
-    describe('select multiple controls', () => {
-      describe('select options', () => {
-        let fixture: ComponentFixture<NgModelSelectMultipleForm>;
-        let comp: NgModelSelectMultipleForm;
-
-        beforeEach(() => {
-          fixture = initTest(NgModelSelectMultipleForm);
-          comp = fixture.componentInstance;
-          comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
-        });
-
-        const detectChangesAndTick = (): void => {
-          fixture.detectChanges();
-          tick();
-        };
-
-        const setSelectedCities = (selectedCities: any): void => {
-          comp.selectedCities = selectedCities;
-          detectChangesAndTick();
-        };
-
-        const selectOptionViaUI = (valueString: string): void => {
-          const select = fixture.debugElement.query(By.css('select'));
-          select.nativeElement.value = valueString;
-          dispatchEvent(select.nativeElement, 'change');
-          detectChangesAndTick();
-        };
-
-        const assertOptionElementSelectedState = (selectedStates: boolean[]): void => {
-          const options = fixture.debugElement.queryAll(By.css('option'));
-          if (options.length !== selectedStates.length) {
-            throw 'the selected state values to assert does not match the number of options';
-          }
-          for (let i = 0; i < selectedStates.length; i++) {
-            expect(options[i].nativeElement.selected).toBe(selectedStates[i]);
-          }
-        };
-
-        it('should reflect state of model after option selected and new options subsequently added',
-           fakeAsync(() => {
-             setSelectedCities([]);
-
-             selectOptionViaUI('1: Object');
-             assertOptionElementSelectedState([false, true, false]);
-
-             comp.cities.push({'name': 'Chicago'});
-             detectChangesAndTick();
-
-             assertOptionElementSelectedState([false, true, false, false]);
-           }));
-
-        it('should reflect state of model after option selected and then other options removed',
-           fakeAsync(() => {
-             setSelectedCities([]);
-
-             selectOptionViaUI('1: Object');
-             assertOptionElementSelectedState([false, true, false]);
-
-             comp.cities.pop();
-             detectChangesAndTick();
-
-             assertOptionElementSelectedState([false, true]);
-           }));
-      });
-
-      it('should throw an error when compareWith is not a function', () => {
-        const fixture = initTest(NgModelSelectMultipleWithCustomCompareFnForm);
-        const comp = fixture.componentInstance;
-        comp.compareFn = null;
-        expect(() => fixture.detectChanges())
-            .toThrowError(/compareWith must be a function, but received null/);
-      });
-
-      it('should compare options using provided compareWith function', fakeAsync(() => {
-           const fixture = initTest(NgModelSelectMultipleWithCustomCompareFnForm);
-           const comp = fixture.componentInstance;
-           comp.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'LA'}];
-           comp.selectedCities = [comp.cities[0]];
-           fixture.detectChanges();
-           tick();
-
-           const select = fixture.debugElement.query(By.css('select'));
-           const sfOption = fixture.debugElement.query(By.css('option'));
-           expect(select.nativeElement.value).toEqual('0: Object');
-           expect(sfOption.nativeElement.selected).toBe(true);
-         }));
-    });
-
-    describe('custom value accessors', () => {
-      it('should support standard writing to view and model', async(() => {
-           const fixture = initTest(NgModelCustomWrapper, NgModelCustomComp);
-           fixture.componentInstance.name = 'Nancy';
-           fixture.detectChanges();
-           fixture.whenStable().then(() => {
-             fixture.detectChanges();
-             fixture.whenStable().then(() => {
-               // model -> view
-               const customInput = fixture.debugElement.query(By.css('[name="custom"]'));
-               expect(customInput.nativeElement.value).toEqual('Nancy');
-
-               customInput.nativeElement.value = 'Carson';
-               dispatchEvent(customInput.nativeElement, 'input');
-               fixture.detectChanges();
-
-               // view -> model
-               expect(fixture.componentInstance.name).toEqual('Carson');
-             });
-           });
-         }));
-
     });
 
     describe('validation directives', () => {
@@ -885,7 +499,7 @@ export function main() {
            tick();
 
            const control =
-               fixture.debugElement.children[0].injector.get(NgForm).control.get('checkbox');
+               fixture.debugElement.children[0].injector.get(NgForm).control.get('checkbox') !;
 
            const input = fixture.debugElement.query(By.css('input'));
            expect(input.nativeElement.checked).toBe(false);
@@ -921,7 +535,7 @@ export function main() {
            tick();
 
            const control =
-               fixture.debugElement.children[0].injector.get(NgForm).control.get('email');
+               fixture.debugElement.children[0].injector.get(NgForm).control.get('email') !;
 
            const input = fixture.debugElement.query(By.css('input'));
            expect(control.hasError('email')).toBe(false);
@@ -1114,9 +728,9 @@ export function main() {
                .toEqual(pattern.nativeElement.getAttribute('pattern'));
 
            fixture.componentInstance.required = false;
-           fixture.componentInstance.minLen = null;
-           fixture.componentInstance.maxLen = null;
-           fixture.componentInstance.pattern = null;
+           fixture.componentInstance.minLen = null !;
+           fixture.componentInstance.maxLen = null !;
+           fixture.componentInstance.pattern = null !;
            fixture.detectChanges();
 
            expect(form.control.hasError('required', ['required'])).toEqual(false);
@@ -1381,132 +995,6 @@ class NgModelOptionsStandalone {
   two: string;
 }
 
-@Component({selector: 'ng-model-range-form', template: '<input type="range" [(ngModel)]="val">'})
-class NgModelRangeForm {
-  val: any;
-}
-
-@Component({
-  selector: 'ng-model-radio-form',
-  template: `
-    <form>
-      <input type="radio" name="food" [(ngModel)]="food" value="chicken">
-      <input type="radio" name="food"  [(ngModel)]="food" value="fish">
-
-      <input type="radio" name="drink" [(ngModel)]="drink" value="cola">
-      <input type="radio" name="drink" [(ngModel)]="drink" value="sprite">
-    </form>
-  `
-})
-class NgModelRadioForm {
-  food: string;
-  drink: string;
-}
-
-@Component({
-  selector: 'ng-model-select-form',
-  template: `
-    <select [(ngModel)]="selectedCity">
-      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
-    </select>
-  `
-})
-class NgModelSelectForm {
-  selectedCity: {[k: string]: string} = {};
-  cities: any[] = [];
-}
-
-@Component({
-  selector: 'ng-model-select-null-form',
-  template: `
-    <select [(ngModel)]="selectedCity">
-      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
-      <option [ngValue]="null">Unspecified</option>
-    </select>
-  `
-})
-class NgModelSelectWithNullForm {
-  selectedCity: {[k: string]: string} = {};
-  cities: any[] = [];
-}
-
-@Component({
-  selector: 'ng-model-select-compare-with',
-  template: `
-    <select [(ngModel)]="selectedCity" [compareWith]="compareFn">
-      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
-    </select>
-  `
-})
-class NgModelSelectWithCustomCompareFnForm {
-  compareFn:
-      (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
-  selectedCity: any = {};
-  cities: any[] = [];
-}
-
-@Component({
-  selector: 'ng-model-select-multiple-compare-with',
-  template: `
-    <select multiple [(ngModel)]="selectedCities" [compareWith]="compareFn">
-      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
-    </select>
-  `
-})
-class NgModelSelectMultipleWithCustomCompareFnForm {
-  compareFn:
-      (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
-  selectedCities: any[] = [];
-  cities: any[] = [];
-}
-
-@Component({
-  selector: 'ng-model-select-multiple-form',
-  template: `
-    <select multiple [(ngModel)]="selectedCities">
-      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
-    </select>
-  `
-})
-class NgModelSelectMultipleForm {
-  selectedCities: any[];
-  cities: any[] = [];
-}
-
-@Component({
-  selector: 'ng-model-custom-comp',
-  template: `
-    <input name="custom" [(ngModel)]="model" (ngModelChange)="changeFn($event)" [disabled]="isDisabled">
-  `,
-  providers: [{provide: NG_VALUE_ACCESSOR, multi: true, useExisting: NgModelCustomComp}]
-})
-class NgModelCustomComp implements ControlValueAccessor {
-  model: string;
-  @Input('disabled') isDisabled: boolean = false;
-  changeFn: (value: any) => void;
-
-  writeValue(value: any) { this.model = value; }
-
-  registerOnChange(fn: (value: any) => void) { this.changeFn = fn; }
-
-  registerOnTouched() {}
-
-  setDisabledState(isDisabled: boolean) { this.isDisabled = isDisabled; }
-}
-
-@Component({
-  selector: 'ng-model-custom-wrapper',
-  template: `
-    <form>
-       <ng-model-custom-comp name="name" [(ngModel)]="name" [disabled]="isDisabled"></ng-model-custom-comp>
-    </form>
-  `
-})
-class NgModelCustomWrapper {
-  name: string;
-  isDisabled = false;
-}
-
 @Component({
   selector: 'ng-model-validation-bindings',
   template: `
diff --git a/packages/forms/test/validators_spec.ts b/packages/forms/test/validators_spec.ts
index da1f6824dd..84fa3935ed 100644
--- a/packages/forms/test/validators_spec.ts
+++ b/packages/forms/test/validators_spec.ts
@@ -39,6 +39,93 @@ export function main() {
   }
 
   describe('Validators', () => {
+    describe('min', () => {
+      it('should not error on an empty string',
+         () => { expect(Validators.min(2)(new FormControl(''))).toBeNull(); });
+
+      it('should not error on null',
+         () => { expect(Validators.min(2)(new FormControl(null))).toBeNull(); });
+
+      it('should not error on undefined',
+         () => { expect(Validators.min(2)(new FormControl(undefined))).toBeNull(); });
+
+      it('should return null if NaN after parsing',
+         () => { expect(Validators.min(2)(new FormControl('a'))).toBeNull(); });
+
+      it('should return a validation error on small values', () => {
+        expect(Validators.min(2)(new FormControl(1))).toEqual({'min': {'min': 2, 'actual': 1}});
+      });
+
+      it('should return a validation error on small values converted from strings', () => {
+        expect(Validators.min(2)(new FormControl('1'))).toEqual({'min': {'min': 2, 'actual': '1'}});
+      });
+
+      it('should not error on big values',
+         () => { expect(Validators.min(2)(new FormControl(3))).toBeNull(); });
+
+      it('should not error on equal values',
+         () => { expect(Validators.min(2)(new FormControl(2))).toBeNull(); });
+
+      it('should not error on equal values when value is string',
+         () => { expect(Validators.min(2)(new FormControl('2'))).toBeNull(); });
+
+      it('should validate as expected when min value is a string', () => {
+        expect(Validators.min('2' as any)(new FormControl(1))).toEqual({
+          'min': {'min': '2', 'actual': 1}
+        });
+      });
+
+      it('should return null if min value is undefined',
+         () => { expect(Validators.min(undefined as any)(new FormControl(3))).toBeNull(); });
+
+      it('should return null if min value is null',
+         () => { expect(Validators.min(null as any)(new FormControl(3))).toBeNull(); });
+    });
+
+    describe('max', () => {
+      it('should not error on an empty string',
+         () => { expect(Validators.max(2)(new FormControl(''))).toBeNull(); });
+
+      it('should not error on null',
+         () => { expect(Validators.max(2)(new FormControl(null))).toBeNull(); });
+
+      it('should not error on undefined',
+         () => { expect(Validators.max(2)(new FormControl(undefined))).toBeNull(); });
+
+      it('should return null if NaN after parsing',
+         () => { expect(Validators.max(2)(new FormControl('aaa'))).toBeNull(); });
+
+      it('should return a validation error on big values', () => {
+        expect(Validators.max(2)(new FormControl(3))).toEqual({'max': {'max': 2, 'actual': 3}});
+      });
+
+      it('should return a validation error on big values converted from strings', () => {
+        expect(Validators.max(2)(new FormControl('3'))).toEqual({'max': {'max': 2, 'actual': '3'}});
+      });
+
+      it('should not error on small values',
+         () => { expect(Validators.max(2)(new FormControl(1))).toBeNull(); });
+
+      it('should not error on equal values',
+         () => { expect(Validators.max(2)(new FormControl(2))).toBeNull(); });
+
+      it('should not error on equal values when value is string',
+         () => { expect(Validators.max(2)(new FormControl('2'))).toBeNull(); });
+
+      it('should validate as expected when max value is a string', () => {
+        expect(Validators.max('2' as any)(new FormControl(3))).toEqual({
+          'max': {'max': '2', 'actual': 3}
+        });
+      });
+
+      it('should return null if max value is undefined',
+         () => { expect(Validators.max(undefined as any)(new FormControl(3))).toBeNull(); });
+
+      it('should return null if max value is null',
+         () => { expect(Validators.max(null as any)(new FormControl(3))).toBeNull(); });
+    });
+
+
     describe('required', () => {
       it('should error on an empty string',
          () => { expect(Validators.required(new FormControl(''))).toEqual({'required': true}); });
@@ -179,33 +266,33 @@ export function main() {
       });
 
       it('should not error on "null" pattern',
-         () => expect(Validators.pattern(null)(new FormControl('aaAA'))).toBeNull());
+         () => expect(Validators.pattern(null !)(new FormControl('aaAA'))).toBeNull());
 
       it('should not error on "undefined" pattern',
-         () => expect(Validators.pattern(undefined)(new FormControl('aaAA'))).toBeNull());
+         () => expect(Validators.pattern(undefined !)(new FormControl('aaAA'))).toBeNull());
     });
 
     describe('compose', () => {
       it('should return null when given null',
-         () => { expect(Validators.compose(null)).toBe(null); });
+         () => { expect(Validators.compose(null !)).toBe(null); });
 
       it('should collect errors from all the validators', () => {
-        const c = Validators.compose([validator('a', true), validator('b', true)]);
+        const c = Validators.compose([validator('a', true), validator('b', true)]) !;
         expect(c(new FormControl(''))).toEqual({'a': true, 'b': true});
       });
 
       it('should run validators left to right', () => {
-        const c = Validators.compose([validator('a', 1), validator('a', 2)]);
+        const c = Validators.compose([validator('a', 1), validator('a', 2)]) !;
         expect(c(new FormControl(''))).toEqual({'a': 2});
       });
 
       it('should return null when no errors', () => {
-        const c = Validators.compose([Validators.nullValidator, Validators.nullValidator]);
+        const c = Validators.compose([Validators.nullValidator, Validators.nullValidator]) !;
         expect(c(new FormControl(''))).toBeNull();
       });
 
       it('should ignore nulls', () => {
-        const c = Validators.compose([null, Validators.required]);
+        const c = Validators.compose([null !, Validators.required]) !;
         expect(c(new FormControl(''))).toEqual({'required': true});
       });
     });
@@ -221,13 +308,13 @@ export function main() {
         }
 
         it('should return null when given null',
-           () => { expect(Validators.composeAsync(null)).toBeNull(); });
+           () => { expect(Validators.composeAsync(null !)).toBeNull(); });
 
         it('should collect errors from all the validators', fakeAsync(() => {
              const v = Validators.composeAsync(
-                 [promiseValidator({'one': true}), promiseValidator({'two': true})]);
+                 [promiseValidator({'one': true}), promiseValidator({'two': true})]) !;
 
-             let errorMap: {[key: string]: any};
+             let errorMap: {[key: string]: any} = undefined !;
              first.call(v(new FormControl('invalid')))
                  .subscribe((errors: {[key: string]: any}) => errorMap = errors);
              tick();
@@ -236,10 +323,10 @@ export function main() {
            }));
 
         it('should normalize and evaluate async validator-directives correctly', fakeAsync(() => {
-             const v = Validators.composeAsync(
-                 [normalizeAsyncValidator(new AsyncValidatorDirective('expected', {'one': true}))]);
+             const v = Validators.composeAsync([normalizeAsyncValidator(
+                 new AsyncValidatorDirective('expected', {'one': true}))]) !;
 
-             let errorMap: {[key: string]: any};
+             let errorMap: {[key: string]: any} = undefined !;
              first.call(v(new FormControl('invalid')))
                  .subscribe((errors: {[key: string]: any}) => errorMap = errors);
              tick();
@@ -248,9 +335,9 @@ export function main() {
            }));
 
         it('should return null when no errors', fakeAsync(() => {
-             const v = Validators.composeAsync([promiseValidator({'one': true})]);
+             const v = Validators.composeAsync([promiseValidator({'one': true})]) !;
 
-             let errorMap: {[key: string]: any};
+             let errorMap: {[key: string]: any} = undefined !;
              first.call(v(new FormControl('expected')))
                  .subscribe((errors: {[key: string]: any}) => errorMap = errors);
              tick();
@@ -259,9 +346,9 @@ export function main() {
            }));
 
         it('should ignore nulls', fakeAsync(() => {
-             const v = Validators.composeAsync([promiseValidator({'one': true}), null]);
+             const v = Validators.composeAsync([promiseValidator({'one': true}), null !]) !;
 
-             let errorMap: {[key: string]: any};
+             let errorMap: {[key: string]: any} = undefined !;
              first.call(v(new FormControl('invalid')))
                  .subscribe((errors: {[key: string]: any}) => errorMap = errors);
              tick();
@@ -279,13 +366,13 @@ export function main() {
         }
 
         it('should return null when given null',
-           () => { expect(Validators.composeAsync(null)).toBeNull(); });
+           () => { expect(Validators.composeAsync(null !)).toBeNull(); });
 
         it('should collect errors from all the validators', () => {
           const v = Validators.composeAsync(
-              [observableValidator({'one': true}), observableValidator({'two': true})]);
+              [observableValidator({'one': true}), observableValidator({'two': true})]) !;
 
-          let errorMap: {[key: string]: any};
+          let errorMap: {[key: string]: any} = undefined !;
           first.call(v(new FormControl('invalid')))
               .subscribe((errors: {[key: string]: any}) => errorMap = errors);
 
@@ -294,19 +381,19 @@ export function main() {
 
         it('should normalize and evaluate async validator-directives correctly', () => {
           const v = Validators.composeAsync(
-              [normalizeAsyncValidator(new AsyncValidatorDirective('expected', {'one': true}))]);
+              [normalizeAsyncValidator(new AsyncValidatorDirective('expected', {'one': true}))]) !;
 
-          let errorMap: {[key: string]: any};
+          let errorMap: {[key: string]: any} = undefined !;
           first.call(v(new FormControl('invalid')))
-              .subscribe((errors: {[key: string]: any}) => errorMap = errors);
+              .subscribe((errors: {[key: string]: any}) => errorMap = errors) !;
 
           expect(errorMap).toEqual({'one': true});
         });
 
         it('should return null when no errors', () => {
-          const v = Validators.composeAsync([observableValidator({'one': true})]);
+          const v = Validators.composeAsync([observableValidator({'one': true})]) !;
 
-          let errorMap: {[key: string]: any};
+          let errorMap: {[key: string]: any} = undefined !;
           first.call(v(new FormControl('expected')))
               .subscribe((errors: {[key: string]: any}) => errorMap = errors);
 
@@ -314,9 +401,9 @@ export function main() {
         });
 
         it('should ignore nulls', () => {
-          const v = Validators.composeAsync([observableValidator({'one': true}), null]);
+          const v = Validators.composeAsync([observableValidator({'one': true}), null !]) !;
 
-          let errorMap: {[key: string]: any};
+          let errorMap: {[key: string]: any} = undefined !;
           first.call(v(new FormControl('invalid')))
               .subscribe((errors: {[key: string]: any}) => errorMap = errors);
 
@@ -329,9 +416,9 @@ export function main() {
              }
 
              const v = Validators.composeAsync(
-                 [getTimerObs(100, {one: true}), getTimerObs(200, {two: true})]);
+                 [getTimerObs(100, {one: true}), getTimerObs(200, {two: true})]) !;
 
-             let errorMap: {[key: string]: any};
+             let errorMap: {[key: string]: any} = undefined !;
              first.call(v(new FormControl('invalid')))
                  .subscribe((errors: {[key: string]: any}) => errorMap = errors);
 
diff --git a/packages/forms/test/value_accessor_integration_spec.ts b/packages/forms/test/value_accessor_integration_spec.ts
new file mode 100644
index 0000000000..e8c2c5cad6
--- /dev/null
+++ b/packages/forms/test/value_accessor_integration_spec.ts
@@ -0,0 +1,1336 @@
+import {Component, Directive, EventEmitter, Input, Output, Type} from '@angular/core';
+import {ComponentFixture, TestBed, async, fakeAsync, tick} from '@angular/core/testing';
+import {AbstractControl, ControlValueAccessor, FormControl, FormGroup, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, NgForm, ReactiveFormsModule, Validators} from '@angular/forms';
+import {By} from '@angular/platform-browser/src/dom/debug/by';
+import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
+
+export function main() {
+  describe('value accessors', () => {
+
+    function initTest<T>(component: Type<T>, ...directives: Type<any>[]): ComponentFixture<T> {
+      TestBed.configureTestingModule(
+          {declarations: [component, ...directives], imports: [FormsModule, ReactiveFormsModule]});
+      return TestBed.createComponent(component);
+    }
+
+    it('should support <input> without type', () => {
+      TestBed.overrideComponent(
+          FormControlComp, {set: {template: `<input [formControl]="control">`}});
+      const fixture = initTest(FormControlComp);
+      const control = new FormControl('old');
+      fixture.componentInstance.control = control;
+      fixture.detectChanges();
+
+      // model -> view
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.nativeElement.value).toEqual('old');
+
+      input.nativeElement.value = 'new';
+      dispatchEvent(input.nativeElement, 'input');
+
+      // view -> model
+      expect(control.value).toEqual('new');
+    });
+
+    it('should support <input type=text>', () => {
+      const fixture = initTest(FormGroupComp);
+      const form = new FormGroup({'login': new FormControl('old')});
+      fixture.componentInstance.form = form;
+      fixture.detectChanges();
+
+      // model -> view
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.nativeElement.value).toEqual('old');
+
+      input.nativeElement.value = 'new';
+      dispatchEvent(input.nativeElement, 'input');
+
+      // view -> model
+      expect(form.value).toEqual({'login': 'new'});
+    });
+
+    it('should ignore the change event for <input type=text>', () => {
+      const fixture = initTest(FormGroupComp);
+      const form = new FormGroup({'login': new FormControl('oldValue')});
+      fixture.componentInstance.form = form;
+      fixture.detectChanges();
+
+      const input = fixture.debugElement.query(By.css('input'));
+      form.valueChanges.subscribe({next: (value) => { throw 'Should not happen'; }});
+      input.nativeElement.value = 'updatedValue';
+
+      dispatchEvent(input.nativeElement, 'change');
+    });
+
+    it('should support <textarea>', () => {
+      TestBed.overrideComponent(
+          FormControlComp, {set: {template: `<textarea [formControl]="control"></textarea>`}});
+      const fixture = initTest(FormControlComp);
+      const control = new FormControl('old');
+      fixture.componentInstance.control = control;
+      fixture.detectChanges();
+
+      // model -> view
+      const textarea = fixture.debugElement.query(By.css('textarea'));
+      expect(textarea.nativeElement.value).toEqual('old');
+
+      textarea.nativeElement.value = 'new';
+      dispatchEvent(textarea.nativeElement, 'input');
+
+      // view -> model
+      expect(control.value).toEqual('new');
+    });
+
+    it('should support <type=checkbox>', () => {
+      TestBed.overrideComponent(
+          FormControlComp, {set: {template: `<input type="checkbox" [formControl]="control">`}});
+      const fixture = initTest(FormControlComp);
+      const control = new FormControl(true);
+      fixture.componentInstance.control = control;
+      fixture.detectChanges();
+
+      // model -> view
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.nativeElement.checked).toBe(true);
+
+      input.nativeElement.checked = false;
+      dispatchEvent(input.nativeElement, 'change');
+
+      // view -> model
+      expect(control.value).toBe(false);
+    });
+
+    describe('should support <type=number>', () => {
+      it('with basic use case', () => {
+        const fixture = initTest(FormControlNumberInput);
+        const control = new FormControl(10);
+        fixture.componentInstance.control = control;
+        fixture.detectChanges();
+
+        // model -> view
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.nativeElement.value).toEqual('10');
+
+        input.nativeElement.value = '20';
+        dispatchEvent(input.nativeElement, 'input');
+
+        // view -> model
+        expect(control.value).toEqual(20);
+      });
+
+      it('when value is cleared in the UI', () => {
+        const fixture = initTest(FormControlNumberInput);
+        const control = new FormControl(10, Validators.required);
+        fixture.componentInstance.control = control;
+        fixture.detectChanges();
+
+        const input = fixture.debugElement.query(By.css('input'));
+        input.nativeElement.value = '';
+        dispatchEvent(input.nativeElement, 'input');
+
+        expect(control.valid).toBe(false);
+        expect(control.value).toEqual(null);
+
+        input.nativeElement.value = '0';
+        dispatchEvent(input.nativeElement, 'input');
+
+        expect(control.valid).toBe(true);
+        expect(control.value).toEqual(0);
+      });
+
+      it('when value is cleared programmatically', () => {
+        const fixture = initTest(FormControlNumberInput);
+        const control = new FormControl(10);
+        fixture.componentInstance.control = control;
+        fixture.detectChanges();
+
+        control.setValue(null);
+
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.nativeElement.value).toEqual('');
+      });
+    });
+
+    describe('select controls', () => {
+
+      describe('in reactive forms', () => {
+
+        it(`should support primitive values`, () => {
+          const fixture = initTest(FormControlNameSelect);
+          fixture.detectChanges();
+
+          // model -> view
+          const select = fixture.debugElement.query(By.css('select'));
+          const sfOption = fixture.debugElement.query(By.css('option'));
+          expect(select.nativeElement.value).toEqual('SF');
+          expect(sfOption.nativeElement.selected).toBe(true);
+
+          select.nativeElement.value = 'NY';
+          dispatchEvent(select.nativeElement, 'change');
+          fixture.detectChanges();
+
+          // view -> model
+          expect(sfOption.nativeElement.selected).toBe(false);
+          expect(fixture.componentInstance.form.value).toEqual({'city': 'NY'});
+        });
+
+        it(`should support objects`, () => {
+          const fixture = initTest(FormControlSelectNgValue);
+          fixture.detectChanges();
+
+          // model -> view
+          const select = fixture.debugElement.query(By.css('select'));
+          const sfOption = fixture.debugElement.query(By.css('option'));
+          expect(select.nativeElement.value).toEqual('0: Object');
+          expect(sfOption.nativeElement.selected).toBe(true);
+        });
+
+        it('should throw an error if compareWith is not a function', () => {
+          const fixture = initTest(FormControlSelectWithCompareFn);
+          fixture.componentInstance.compareFn = null !;
+          expect(() => fixture.detectChanges())
+              .toThrowError(/compareWith must be a function, but received null/);
+        });
+
+        it('should compare options using provided compareWith function', () => {
+          const fixture = initTest(FormControlSelectWithCompareFn);
+          fixture.detectChanges();
+
+          const select = fixture.debugElement.query(By.css('select'));
+          const sfOption = fixture.debugElement.query(By.css('option'));
+          expect(select.nativeElement.value).toEqual('0: Object');
+          expect(sfOption.nativeElement.selected).toBe(true);
+        });
+
+      });
+
+      describe('in template-driven forms', () => {
+        it('with option values that are objects', fakeAsync(() => {
+             const fixture = initTest(NgModelSelectForm);
+             const comp = fixture.componentInstance;
+             comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
+             comp.selectedCity = comp.cities[1];
+             fixture.detectChanges();
+             tick();
+
+             const select = fixture.debugElement.query(By.css('select'));
+             const nycOption = fixture.debugElement.queryAll(By.css('option'))[1];
+
+             // model -> view
+             expect(select.nativeElement.value).toEqual('1: Object');
+             expect(nycOption.nativeElement.selected).toBe(true);
+
+             select.nativeElement.value = '2: Object';
+             dispatchEvent(select.nativeElement, 'change');
+             fixture.detectChanges();
+             tick();
+
+             // view -> model
+             expect(comp.selectedCity['name']).toEqual('Buffalo');
+           }));
+
+        it('when new options are added', fakeAsync(() => {
+             const fixture = initTest(NgModelSelectForm);
+             const comp = fixture.componentInstance;
+             comp.cities = [{'name': 'SF'}, {'name': 'NYC'}];
+             comp.selectedCity = comp.cities[1];
+             fixture.detectChanges();
+             tick();
+
+             comp.cities.push({'name': 'Buffalo'});
+             comp.selectedCity = comp.cities[2];
+             fixture.detectChanges();
+             tick();
+
+             const select = fixture.debugElement.query(By.css('select'));
+             const buffalo = fixture.debugElement.queryAll(By.css('option'))[2];
+             expect(select.nativeElement.value).toEqual('2: Object');
+             expect(buffalo.nativeElement.selected).toBe(true);
+           }));
+
+        it('when options are removed', fakeAsync(() => {
+             const fixture = initTest(NgModelSelectForm);
+             const comp = fixture.componentInstance;
+             comp.cities = [{'name': 'SF'}, {'name': 'NYC'}];
+             comp.selectedCity = comp.cities[1];
+             fixture.detectChanges();
+             tick();
+
+             const select = fixture.debugElement.query(By.css('select'));
+             expect(select.nativeElement.value).toEqual('1: Object');
+
+             comp.cities.pop();
+             fixture.detectChanges();
+             tick();
+
+             expect(select.nativeElement.value).not.toEqual('1: Object');
+           }));
+
+        it('when option values have same content, but different identities', fakeAsync(() => {
+             const fixture = initTest(NgModelSelectForm);
+             const comp = fixture.componentInstance;
+             comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'NYC'}];
+             comp.selectedCity = comp.cities[0];
+             fixture.detectChanges();
+
+             comp.selectedCity = comp.cities[2];
+             fixture.detectChanges();
+             tick();
+
+             const select = fixture.debugElement.query(By.css('select'));
+             const secondNYC = fixture.debugElement.queryAll(By.css('option'))[2];
+             expect(select.nativeElement.value).toEqual('2: Object');
+             expect(secondNYC.nativeElement.selected).toBe(true);
+           }));
+
+        it('should work with null option', fakeAsync(() => {
+             const fixture = initTest(NgModelSelectWithNullForm);
+             const comp = fixture.componentInstance;
+             comp.cities = [{'name': 'SF'}, {'name': 'NYC'}];
+             comp.selectedCity = null !;
+             fixture.detectChanges();
+
+             const select = fixture.debugElement.query(By.css('select'));
+
+             select.nativeElement.value = '2: Object';
+             dispatchEvent(select.nativeElement, 'change');
+             fixture.detectChanges();
+             tick();
+             expect(comp.selectedCity['name']).toEqual('NYC');
+
+             select.nativeElement.value = '0: null';
+             dispatchEvent(select.nativeElement, 'change');
+             fixture.detectChanges();
+             tick();
+             expect(comp.selectedCity).toEqual(null);
+           }));
+
+        it('should throw an error when compareWith is not a function', () => {
+          const fixture = initTest(NgModelSelectWithCustomCompareFnForm);
+          const comp = fixture.componentInstance;
+          comp.compareFn = null !;
+          expect(() => fixture.detectChanges())
+              .toThrowError(/compareWith must be a function, but received null/);
+        });
+
+        it('should compare options using provided compareWith function', fakeAsync(() => {
+             const fixture = initTest(NgModelSelectWithCustomCompareFnForm);
+             const comp = fixture.componentInstance;
+             comp.selectedCity = {id: 1, name: 'SF'};
+             comp.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'LA'}];
+             fixture.detectChanges();
+             tick();
+
+             const select = fixture.debugElement.query(By.css('select'));
+             const sfOption = fixture.debugElement.query(By.css('option'));
+             expect(select.nativeElement.value).toEqual('0: Object');
+             expect(sfOption.nativeElement.selected).toBe(true);
+           }));
+
+      });
+
+    });
+
+    describe('select multiple controls', () => {
+
+      describe('in reactive forms', () => {
+
+        it('should support primitive values', () => {
+          const fixture = initTest(FormControlSelectMultiple);
+          fixture.detectChanges();
+
+          const select = fixture.debugElement.query(By.css('select'));
+          const sfOption = fixture.debugElement.query(By.css('option'));
+          expect(select.nativeElement.value).toEqual(`0: 'SF'`);
+          expect(sfOption.nativeElement.selected).toBe(true);
+        });
+
+        it('should support objects', () => {
+          const fixture = initTest(FormControlSelectMultipleNgValue);
+          fixture.detectChanges();
+
+          const select = fixture.debugElement.query(By.css('select'));
+          const sfOption = fixture.debugElement.query(By.css('option'));
+          expect(select.nativeElement.value).toEqual('0: Object');
+          expect(sfOption.nativeElement.selected).toBe(true);
+        });
+
+        it('should throw an error when compareWith is not a function', () => {
+          const fixture = initTest(FormControlSelectMultipleWithCompareFn);
+          fixture.componentInstance.compareFn = null !;
+          expect(() => fixture.detectChanges())
+              .toThrowError(/compareWith must be a function, but received null/);
+        });
+
+        it('should compare options using provided compareWith function', fakeAsync(() => {
+             const fixture = initTest(FormControlSelectMultipleWithCompareFn);
+             fixture.detectChanges();
+             tick();
+
+             const select = fixture.debugElement.query(By.css('select'));
+             const sfOption = fixture.debugElement.query(By.css('option'));
+             expect(select.nativeElement.value).toEqual('0: Object');
+             expect(sfOption.nativeElement.selected).toBe(true);
+           }));
+
+      });
+
+      describe('in template-driven forms', () => {
+        let fixture: ComponentFixture<NgModelSelectMultipleForm>;
+        let comp: NgModelSelectMultipleForm;
+
+        beforeEach(() => {
+          fixture = initTest(NgModelSelectMultipleForm);
+          comp = fixture.componentInstance;
+          comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
+        });
+
+        const detectChangesAndTick = (): void => {
+          fixture.detectChanges();
+          tick();
+        };
+
+        const setSelectedCities = (selectedCities: any): void => {
+          comp.selectedCities = selectedCities;
+          detectChangesAndTick();
+        };
+
+        const selectOptionViaUI = (valueString: string): void => {
+          const select = fixture.debugElement.query(By.css('select'));
+          select.nativeElement.value = valueString;
+          dispatchEvent(select.nativeElement, 'change');
+          detectChangesAndTick();
+        };
+
+        const assertOptionElementSelectedState = (selectedStates: boolean[]): void => {
+          const options = fixture.debugElement.queryAll(By.css('option'));
+          if (options.length !== selectedStates.length) {
+            throw 'the selected state values to assert does not match the number of options';
+          }
+          for (let i = 0; i < selectedStates.length; i++) {
+            expect(options[i].nativeElement.selected).toBe(selectedStates[i]);
+          }
+        };
+
+        it('should reflect state of model after option selected and new options subsequently added',
+           fakeAsync(() => {
+             setSelectedCities([]);
+
+             selectOptionViaUI('1: Object');
+             assertOptionElementSelectedState([false, true, false]);
+
+             comp.cities.push({'name': 'Chicago'});
+             detectChangesAndTick();
+
+             assertOptionElementSelectedState([false, true, false, false]);
+           }));
+
+        it('should reflect state of model after option selected and then other options removed',
+           fakeAsync(() => {
+             setSelectedCities([]);
+
+             selectOptionViaUI('1: Object');
+             assertOptionElementSelectedState([false, true, false]);
+
+             comp.cities.pop();
+             detectChangesAndTick();
+
+             assertOptionElementSelectedState([false, true]);
+           }));
+      });
+
+      it('should throw an error when compareWith is not a function', () => {
+        const fixture = initTest(NgModelSelectMultipleWithCustomCompareFnForm);
+        const comp = fixture.componentInstance;
+        comp.compareFn = null !;
+        expect(() => fixture.detectChanges())
+            .toThrowError(/compareWith must be a function, but received null/);
+      });
+
+      it('should compare options using provided compareWith function', fakeAsync(() => {
+           const fixture = initTest(NgModelSelectMultipleWithCustomCompareFnForm);
+           const comp = fixture.componentInstance;
+           comp.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'LA'}];
+           comp.selectedCities = [comp.cities[0]];
+           fixture.detectChanges();
+           tick();
+
+           const select = fixture.debugElement.query(By.css('select'));
+           const sfOption = fixture.debugElement.query(By.css('option'));
+           expect(select.nativeElement.value).toEqual('0: Object');
+           expect(sfOption.nativeElement.selected).toBe(true);
+         }));
+
+    });
+
+    describe('should support <type=radio>', () => {
+
+      describe('in reactive forms', () => {
+
+        it('should support basic functionality', () => {
+          const fixture = initTest(FormControlRadioButtons);
+          const form =
+              new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          // model -> view
+          const inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.checked).toEqual(false);
+          expect(inputs[1].nativeElement.checked).toEqual(true);
+
+          dispatchEvent(inputs[0].nativeElement, 'change');
+          fixture.detectChanges();
+
+          // view -> model
+          expect(form.get('food') !.value).toEqual('chicken');
+          expect(inputs[1].nativeElement.checked).toEqual(false);
+
+          form.get('food') !.setValue('fish');
+          fixture.detectChanges();
+
+          // programmatic change -> view
+          expect(inputs[0].nativeElement.checked).toEqual(false);
+          expect(inputs[1].nativeElement.checked).toEqual(true);
+        });
+
+        it('should support an initial undefined value', () => {
+          const fixture = initTest(FormControlRadioButtons);
+          const form = new FormGroup({'food': new FormControl(), 'drink': new FormControl()});
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          const inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.checked).toEqual(false);
+          expect(inputs[1].nativeElement.checked).toEqual(false);
+        });
+
+        it('should reset properly', () => {
+          const fixture = initTest(FormControlRadioButtons);
+          const form =
+              new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          form.reset();
+          fixture.detectChanges();
+
+          const inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.checked).toEqual(false);
+          expect(inputs[1].nativeElement.checked).toEqual(false);
+        });
+
+        it('should properly set value to null and undefined', () => {
+          const fixture = initTest(FormControlRadioButtons);
+          const form = new FormGroup(
+              {'food': new FormControl('chicken'), 'drink': new FormControl('sprite')});
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          form.get('food') !.setValue(null);
+          fixture.detectChanges();
+
+          const inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.checked).toEqual(false);
+
+          form.get('food') !.setValue('chicken');
+          fixture.detectChanges();
+
+          form.get('food') !.setValue(undefined);
+          fixture.detectChanges();
+          expect(inputs[0].nativeElement.checked).toEqual(false);
+        });
+
+        it('should use formControlName to group radio buttons when name is absent', () => {
+          const fixture = initTest(FormControlRadioButtons);
+          const foodCtrl = new FormControl('fish');
+          const drinkCtrl = new FormControl('sprite');
+          fixture.componentInstance.form = new FormGroup({'food': foodCtrl, 'drink': drinkCtrl});
+          fixture.detectChanges();
+
+          const inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.checked).toEqual(false);
+          expect(inputs[1].nativeElement.checked).toEqual(true);
+          expect(inputs[2].nativeElement.checked).toEqual(false);
+          expect(inputs[3].nativeElement.checked).toEqual(true);
+
+          dispatchEvent(inputs[0].nativeElement, 'change');
+          inputs[0].nativeElement.checked = true;
+          fixture.detectChanges();
+
+          const value = fixture.componentInstance.form.value;
+          expect(value.food).toEqual('chicken');
+          expect(inputs[1].nativeElement.checked).toEqual(false);
+          expect(inputs[2].nativeElement.checked).toEqual(false);
+          expect(inputs[3].nativeElement.checked).toEqual(true);
+
+          drinkCtrl.setValue('cola');
+          fixture.detectChanges();
+
+          expect(inputs[0].nativeElement.checked).toEqual(true);
+          expect(inputs[1].nativeElement.checked).toEqual(false);
+          expect(inputs[2].nativeElement.checked).toEqual(true);
+          expect(inputs[3].nativeElement.checked).toEqual(false);
+        });
+
+        it('should support removing controls from <type=radio>', () => {
+          const fixture = initTest(FormControlRadioButtons);
+          const showRadio = new FormControl('yes');
+          const form =
+              new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
+          fixture.componentInstance.form = form;
+          fixture.componentInstance.showRadio = showRadio;
+          showRadio.valueChanges.subscribe((change) => {
+            (change === 'yes') ? form.addControl('food', new FormControl('fish')) :
+                                 form.removeControl('food');
+          });
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('[value="no"]'));
+          dispatchEvent(input.nativeElement, 'change');
+
+          fixture.detectChanges();
+          expect(form.value).toEqual({drink: 'sprite'});
+        });
+
+        it('should differentiate controls on different levels with the same name', () => {
+          TestBed.overrideComponent(FormControlRadioButtons, {
+            set: {
+              template: `
+              <div [formGroup]="form">
+                <input type="radio" formControlName="food" value="chicken">
+                <input type="radio" formControlName="food" value="fish">
+                <div formGroupName="nested">
+                  <input type="radio" formControlName="food" value="chicken">
+                  <input type="radio" formControlName="food" value="fish">
+                </div>
+              </div>
+              `
+            }
+          });
+          const fixture = initTest(FormControlRadioButtons);
+          const form = new FormGroup({
+            food: new FormControl('fish'),
+            nested: new FormGroup({food: new FormControl('fish')})
+          });
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          // model -> view
+          const inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.checked).toEqual(false);
+          expect(inputs[1].nativeElement.checked).toEqual(true);
+          expect(inputs[2].nativeElement.checked).toEqual(false);
+          expect(inputs[3].nativeElement.checked).toEqual(true);
+
+          dispatchEvent(inputs[0].nativeElement, 'change');
+          fixture.detectChanges();
+
+          // view -> model
+          expect(form.get('food') !.value).toEqual('chicken');
+          expect(form.get('nested.food') !.value).toEqual('fish');
+
+          expect(inputs[1].nativeElement.checked).toEqual(false);
+          expect(inputs[2].nativeElement.checked).toEqual(false);
+          expect(inputs[3].nativeElement.checked).toEqual(true);
+
+        });
+
+        it('should disable all radio buttons when disable() is called', () => {
+          const fixture = initTest(FormControlRadioButtons);
+          const form =
+              new FormGroup({food: new FormControl('fish'), drink: new FormControl('cola')});
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          const inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.disabled).toEqual(false);
+          expect(inputs[1].nativeElement.disabled).toEqual(false);
+          expect(inputs[2].nativeElement.disabled).toEqual(false);
+          expect(inputs[3].nativeElement.disabled).toEqual(false);
+
+          form.get('food') !.disable();
+          expect(inputs[0].nativeElement.disabled).toEqual(true);
+          expect(inputs[1].nativeElement.disabled).toEqual(true);
+          expect(inputs[2].nativeElement.disabled).toEqual(false);
+          expect(inputs[3].nativeElement.disabled).toEqual(false);
+
+          form.disable();
+          expect(inputs[0].nativeElement.disabled).toEqual(true);
+          expect(inputs[1].nativeElement.disabled).toEqual(true);
+          expect(inputs[2].nativeElement.disabled).toEqual(true);
+          expect(inputs[3].nativeElement.disabled).toEqual(true);
+
+          form.enable();
+          expect(inputs[0].nativeElement.disabled).toEqual(false);
+          expect(inputs[1].nativeElement.disabled).toEqual(false);
+          expect(inputs[2].nativeElement.disabled).toEqual(false);
+          expect(inputs[3].nativeElement.disabled).toEqual(false);
+        });
+
+        it('should disable all radio buttons when initially disabled', () => {
+          const fixture = initTest(FormControlRadioButtons);
+          const form = new FormGroup({
+            food: new FormControl({value: 'fish', disabled: true}),
+            drink: new FormControl('cola')
+          });
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          const inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.disabled).toEqual(true);
+          expect(inputs[1].nativeElement.disabled).toEqual(true);
+          expect(inputs[2].nativeElement.disabled).toEqual(false);
+          expect(inputs[3].nativeElement.disabled).toEqual(false);
+        });
+
+        it('should work with reusing controls', () => {
+          const fixture = initTest(FormControlRadioButtons);
+          const food = new FormControl('chicken');
+          fixture.componentInstance.form =
+              new FormGroup({'food': food, 'drink': new FormControl('')});
+          fixture.detectChanges();
+
+          const newForm = new FormGroup({'food': food, 'drink': new FormControl('')});
+          fixture.componentInstance.form = newForm;
+          fixture.detectChanges();
+
+          newForm.setValue({food: 'fish', drink: ''});
+          fixture.detectChanges();
+          const inputs = fixture.debugElement.queryAll(By.css('input'));
+          expect(inputs[0].nativeElement.checked).toBe(false);
+          expect(inputs[1].nativeElement.checked).toBe(true);
+        });
+
+      });
+
+      describe('in template-driven forms', () => {
+        it('should support basic functionality', fakeAsync(() => {
+             const fixture = initTest(NgModelRadioForm);
+             fixture.componentInstance.food = 'fish';
+             fixture.detectChanges();
+             tick();
+
+             // model -> view
+             const inputs = fixture.debugElement.queryAll(By.css('input'));
+             expect(inputs[0].nativeElement.checked).toEqual(false);
+             expect(inputs[1].nativeElement.checked).toEqual(true);
+
+             dispatchEvent(inputs[0].nativeElement, 'change');
+             tick();
+
+             // view -> model
+             expect(fixture.componentInstance.food).toEqual('chicken');
+             expect(inputs[1].nativeElement.checked).toEqual(false);
+           }));
+
+        it('should support multiple named <type=radio> groups', fakeAsync(() => {
+             const fixture = initTest(NgModelRadioForm);
+             fixture.componentInstance.food = 'fish';
+             fixture.componentInstance.drink = 'sprite';
+             fixture.detectChanges();
+             tick();
+
+             const inputs = fixture.debugElement.queryAll(By.css('input'));
+             expect(inputs[0].nativeElement.checked).toEqual(false);
+             expect(inputs[1].nativeElement.checked).toEqual(true);
+             expect(inputs[2].nativeElement.checked).toEqual(false);
+             expect(inputs[3].nativeElement.checked).toEqual(true);
+
+             dispatchEvent(inputs[0].nativeElement, 'change');
+             tick();
+
+             expect(fixture.componentInstance.food).toEqual('chicken');
+             expect(fixture.componentInstance.drink).toEqual('sprite');
+             expect(inputs[1].nativeElement.checked).toEqual(false);
+             expect(inputs[2].nativeElement.checked).toEqual(false);
+             expect(inputs[3].nativeElement.checked).toEqual(true);
+           }));
+
+        it('should support initial undefined value', fakeAsync(() => {
+             const fixture = initTest(NgModelRadioForm);
+             fixture.detectChanges();
+             tick();
+
+             const inputs = fixture.debugElement.queryAll(By.css('input'));
+             expect(inputs[0].nativeElement.checked).toEqual(false);
+             expect(inputs[1].nativeElement.checked).toEqual(false);
+             expect(inputs[2].nativeElement.checked).toEqual(false);
+             expect(inputs[3].nativeElement.checked).toEqual(false);
+           }));
+
+        it('should support resetting properly', fakeAsync(() => {
+             const fixture = initTest(NgModelRadioForm);
+             fixture.componentInstance.food = 'chicken';
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.query(By.css('form'));
+             dispatchEvent(form.nativeElement, 'reset');
+             fixture.detectChanges();
+             tick();
+
+             const inputs = fixture.debugElement.queryAll(By.css('input'));
+             expect(inputs[0].nativeElement.checked).toEqual(false);
+             expect(inputs[1].nativeElement.checked).toEqual(false);
+           }));
+
+        it('should support setting value to null and undefined', fakeAsync(() => {
+             const fixture = initTest(NgModelRadioForm);
+             fixture.componentInstance.food = 'chicken';
+             fixture.detectChanges();
+             tick();
+
+             fixture.componentInstance.food = null !;
+             fixture.detectChanges();
+             tick();
+
+             const inputs = fixture.debugElement.queryAll(By.css('input'));
+             expect(inputs[0].nativeElement.checked).toEqual(false);
+             expect(inputs[1].nativeElement.checked).toEqual(false);
+
+             fixture.componentInstance.food = 'chicken';
+             fixture.detectChanges();
+             tick();
+
+             fixture.componentInstance.food = undefined !;
+             fixture.detectChanges();
+             tick();
+             expect(inputs[0].nativeElement.checked).toEqual(false);
+             expect(inputs[1].nativeElement.checked).toEqual(false);
+           }));
+
+        it('should disable radio controls properly with programmatic call', fakeAsync(() => {
+             const fixture = initTest(NgModelRadioForm);
+             fixture.componentInstance.food = 'fish';
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             form.control.get('food') !.disable();
+             tick();
+
+             const inputs = fixture.debugElement.queryAll(By.css('input'));
+             expect(inputs[0].nativeElement.disabled).toBe(true);
+             expect(inputs[1].nativeElement.disabled).toBe(true);
+             expect(inputs[2].nativeElement.disabled).toBe(false);
+             expect(inputs[3].nativeElement.disabled).toBe(false);
+
+             form.control.disable();
+             tick();
+
+             expect(inputs[0].nativeElement.disabled).toBe(true);
+             expect(inputs[1].nativeElement.disabled).toBe(true);
+             expect(inputs[2].nativeElement.disabled).toBe(true);
+             expect(inputs[3].nativeElement.disabled).toBe(true);
+
+             form.control.enable();
+             tick();
+
+             expect(inputs[0].nativeElement.disabled).toBe(false);
+             expect(inputs[1].nativeElement.disabled).toBe(false);
+             expect(inputs[2].nativeElement.disabled).toBe(false);
+             expect(inputs[3].nativeElement.disabled).toBe(false);
+           }));
+
+      });
+
+    });
+
+    describe('should support <type=range>', () => {
+
+      describe('in reactive forms', () => {
+
+        it('with basic use case', () => {
+          const fixture = initTest(FormControlRangeInput);
+          const control = new FormControl(10);
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          // model -> view
+          const input = fixture.debugElement.query(By.css('input'));
+          expect(input.nativeElement.value).toEqual('10');
+
+          input.nativeElement.value = '20';
+          dispatchEvent(input.nativeElement, 'input');
+
+          // view -> model
+          expect(control.value).toEqual(20);
+        });
+
+        it('when value is cleared in the UI', () => {
+          const fixture = initTest(FormControlNumberInput);
+          const control = new FormControl(10, Validators.required);
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input'));
+          input.nativeElement.value = '';
+          dispatchEvent(input.nativeElement, 'input');
+
+          expect(control.valid).toBe(false);
+          expect(control.value).toEqual(null);
+
+          input.nativeElement.value = '0';
+          dispatchEvent(input.nativeElement, 'input');
+
+          expect(control.valid).toBe(true);
+          expect(control.value).toEqual(0);
+        });
+
+        it('when value is cleared programmatically', () => {
+          const fixture = initTest(FormControlNumberInput);
+          const control = new FormControl(10);
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          control.setValue(null);
+
+          const input = fixture.debugElement.query(By.css('input'));
+          expect(input.nativeElement.value).toEqual('');
+        });
+
+      });
+
+      describe('in template-driven forms', () => {
+        it('with basic use case', fakeAsync(() => {
+             const fixture = initTest(NgModelRangeForm);
+             // model -> view
+             fixture.componentInstance.val = 4;
+             fixture.detectChanges();
+             tick();
+             const input = fixture.debugElement.query(By.css('input'));
+             expect(input.nativeElement.value).toBe('4');
+             fixture.detectChanges();
+             tick();
+             const newVal = '4';
+             input.triggerEventHandler('input', {target: {value: newVal}});
+             tick();
+             // view -> model
+             fixture.detectChanges();
+             expect(typeof(fixture.componentInstance.val)).toBe('number');
+           }));
+
+      });
+
+    });
+
+    describe('custom value accessors', () => {
+
+      describe('in reactive forms', () => {
+        it('should support basic functionality', () => {
+          const fixture = initTest(WrappedValueForm, WrappedValue);
+          const form = new FormGroup({'login': new FormControl('aa')});
+          fixture.componentInstance.form = form;
+          fixture.detectChanges();
+
+          // model -> view
+          const input = fixture.debugElement.query(By.css('input'));
+          expect(input.nativeElement.value).toEqual('!aa!');
+
+          input.nativeElement.value = '!bb!';
+          dispatchEvent(input.nativeElement, 'input');
+
+          // view -> model
+          expect(form.value).toEqual({'login': 'bb'});
+
+          // custom validator
+          expect(form.get('login') !.errors).toEqual({'err': true});
+          form.setValue({login: 'expected'});
+          expect(form.get('login') !.errors).toEqual(null);
+        });
+
+        it('should support non builtin input elements that fire a change event without a \'target\' property',
+           () => {
+             const fixture = initTest(MyInputForm, MyInput);
+             fixture.componentInstance.form = new FormGroup({'login': new FormControl('aa')});
+             fixture.detectChanges();
+
+             const input = fixture.debugElement.query(By.css('my-input'));
+             expect(input.componentInstance.value).toEqual('!aa!');
+
+             input.componentInstance.value = '!bb!';
+             input.componentInstance.onInput.subscribe((value: any) => {
+               expect(fixture.componentInstance.form.value).toEqual({'login': 'bb'});
+             });
+             input.componentInstance.dispatchChangeEvent();
+           });
+
+        it('should support custom accessors without setDisabledState - formControlName', () => {
+          const fixture = initTest(WrappedValueForm, WrappedValue);
+          fixture.componentInstance.form = new FormGroup({
+            'login': new FormControl({value: 'aa', disabled: true}),
+          });
+          fixture.detectChanges();
+          expect(fixture.componentInstance.form.status).toEqual('DISABLED');
+          expect(fixture.componentInstance.form.get('login') !.status).toEqual('DISABLED');
+        });
+
+        it('should support custom accessors without setDisabledState - formControlDirective',
+           () => {
+             TestBed.overrideComponent(
+                 FormControlComp,
+                 {set: {template: `<input type="text" [formControl]="control" wrapped-value>`}});
+             const fixture = initTest(FormControlComp);
+             fixture.componentInstance.control = new FormControl({value: 'aa', disabled: true});
+             fixture.detectChanges();
+             expect(fixture.componentInstance.control.status).toEqual('DISABLED');
+           });
+      });
+
+      describe('in template-driven forms', () => {
+        it('should support standard writing to view and model', async(() => {
+             const fixture = initTest(NgModelCustomWrapper, NgModelCustomComp);
+             fixture.componentInstance.name = 'Nancy';
+             fixture.detectChanges();
+             fixture.whenStable().then(() => {
+               fixture.detectChanges();
+               fixture.whenStable().then(() => {
+                 // model -> view
+                 const customInput = fixture.debugElement.query(By.css('[name="custom"]'));
+                 expect(customInput.nativeElement.value).toEqual('Nancy');
+
+                 customInput.nativeElement.value = 'Carson';
+                 dispatchEvent(customInput.nativeElement, 'input');
+                 fixture.detectChanges();
+
+                 // view -> model
+                 expect(fixture.componentInstance.name).toEqual('Carson');
+               });
+             });
+           }));
+
+      });
+
+    });
+
+  });
+}
+
+@Component({selector: 'form-control-comp', template: `<input type="text" [formControl]="control">`})
+export class FormControlComp {
+  control: FormControl;
+}
+
+@Component({
+  selector: 'form-group-comp',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="event=$event">
+      <input type="text" formControlName="login">
+    </form>`
+})
+export class FormGroupComp {
+  control: FormControl;
+  form: FormGroup;
+  myGroup: FormGroup;
+  event: Event;
+}
+
+@Component({
+  selector: 'form-control-number-input',
+  template: `<input type="number" [formControl]="control">`
+})
+class FormControlNumberInput {
+  control: FormControl;
+}
+
+@Component({
+  selector: 'form-control-name-select',
+  template: `
+    <div [formGroup]="form">
+      <select formControlName="city">
+        <option *ngFor="let c of cities" [value]="c"></option>
+      </select>
+    </div>`
+})
+class FormControlNameSelect {
+  cities = ['SF', 'NY'];
+  form = new FormGroup({city: new FormControl('SF')});
+}
+
+@Component({
+  selector: 'form-control-select-ngValue',
+  template: `
+    <div [formGroup]="form">
+      <select formControlName="city">
+        <option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
+      </select>
+    </div>`
+})
+class FormControlSelectNgValue {
+  cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
+  form = new FormGroup({city: new FormControl(this.cities[0])});
+}
+
+@Component({
+  selector: 'form-control-select-compare-with',
+  template: `
+    <div [formGroup]="form">
+      <select formControlName="city" [compareWith]="compareFn">
+        <option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
+      </select>
+    </div>`
+})
+class FormControlSelectWithCompareFn {
+  compareFn:
+      (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
+  cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
+  form = new FormGroup({city: new FormControl({id: 1, name: 'SF'})});
+}
+
+@Component({
+  selector: 'form-control-select-multiple',
+  template: `
+    <div [formGroup]="form">
+      <select multiple formControlName="city">
+        <option *ngFor="let c of cities" [value]="c">{{c}}</option>
+      </select>
+    </div>`
+})
+class FormControlSelectMultiple {
+  cities = ['SF', 'NY'];
+  form = new FormGroup({city: new FormControl(['SF'])});
+}
+
+@Component({
+  selector: 'form-control-select-multiple',
+  template: `
+    <div [formGroup]="form">
+      <select multiple formControlName="city">
+        <option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
+      </select>
+    </div>`
+})
+class FormControlSelectMultipleNgValue {
+  cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
+  form = new FormGroup({city: new FormControl([this.cities[0]])});
+}
+
+@Component({
+  selector: 'form-control-select-multiple-compare-with',
+  template: `
+    <div [formGroup]="form">
+      <select multiple formControlName="city" [compareWith]="compareFn">
+        <option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
+      </select>
+    </div>`
+})
+class FormControlSelectMultipleWithCompareFn {
+  compareFn:
+      (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
+  cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
+  form = new FormGroup({city: new FormControl([{id: 1, name: 'SF'}])});
+}
+
+
+@Component({
+  selector: 'ng-model-select-form',
+  template: `
+    <select [(ngModel)]="selectedCity">
+      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
+    </select>
+  `
+})
+class NgModelSelectForm {
+  selectedCity: {[k: string]: string} = {};
+  cities: any[] = [];
+}
+
+@Component({
+  selector: 'ng-model-select-null-form',
+  template: `
+    <select [(ngModel)]="selectedCity">
+      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
+      <option [ngValue]="null">Unspecified</option>
+    </select>
+  `
+})
+class NgModelSelectWithNullForm {
+  selectedCity: {[k: string]: string} = {};
+  cities: any[] = [];
+}
+
+@Component({
+  selector: 'ng-model-select-compare-with',
+  template: `
+    <select [(ngModel)]="selectedCity" [compareWith]="compareFn">
+      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
+    </select>
+  `
+})
+class NgModelSelectWithCustomCompareFnForm {
+  compareFn:
+      (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
+  selectedCity: any = {};
+  cities: any[] = [];
+}
+
+
+@Component({
+  selector: 'ng-model-select-multiple-compare-with',
+  template: `
+    <select multiple [(ngModel)]="selectedCities" [compareWith]="compareFn">
+      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
+    </select>
+  `
+})
+class NgModelSelectMultipleWithCustomCompareFnForm {
+  compareFn:
+      (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
+  selectedCities: any[] = [];
+  cities: any[] = [];
+}
+
+@Component({
+  selector: 'ng-model-select-multiple-form',
+  template: `
+    <select multiple [(ngModel)]="selectedCities">
+      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
+    </select>
+  `
+})
+class NgModelSelectMultipleForm {
+  selectedCities: any[];
+  cities: any[] = [];
+}
+
+@Component({
+  selector: 'form-control-range-input',
+  template: `<input type="range" [formControl]="control">`
+})
+class FormControlRangeInput {
+  control: FormControl;
+}
+
+@Component({selector: 'ng-model-range-form', template: '<input type="range" [(ngModel)]="val">'})
+class NgModelRangeForm {
+  val: any;
+}
+
+@Component({
+  selector: 'form-control-radio-buttons',
+  template: `
+    <form [formGroup]="form" *ngIf="showRadio.value === 'yes'">
+      <input type="radio" formControlName="food" value="chicken">
+      <input type="radio" formControlName="food" value="fish">
+      <input type="radio" formControlName="drink" value="cola">
+      <input type="radio" formControlName="drink" value="sprite">
+    </form>
+    <input type="radio" [formControl]="showRadio" value="yes">
+    <input type="radio" [formControl]="showRadio" value="no">`
+})
+export class FormControlRadioButtons {
+  form: FormGroup;
+  showRadio = new FormControl('yes');
+}
+
+@Component({
+  selector: 'ng-model-radio-form',
+  template: `
+    <form>
+      <input type="radio" name="food" [(ngModel)]="food" value="chicken">
+      <input type="radio" name="food"  [(ngModel)]="food" value="fish">
+
+      <input type="radio" name="drink" [(ngModel)]="drink" value="cola">
+      <input type="radio" name="drink" [(ngModel)]="drink" value="sprite">
+    </form>
+  `
+})
+class NgModelRadioForm {
+  food: string;
+  drink: string;
+}
+
+@Directive({
+  selector: '[wrapped-value]',
+  host: {'(input)': 'handleOnInput($event.target.value)', '[value]': 'value'},
+  providers: [
+    {provide: NG_VALUE_ACCESSOR, multi: true, useExisting: WrappedValue},
+    {provide: NG_VALIDATORS, multi: true, useExisting: WrappedValue}
+  ]
+})
+class WrappedValue implements ControlValueAccessor {
+  value: any;
+  onChange: Function;
+
+  writeValue(value: any) { this.value = `!${value}!`; }
+
+  registerOnChange(fn: (value: any) => void) { this.onChange = fn; }
+  registerOnTouched(fn: any) {}
+
+  handleOnInput(value: any) { this.onChange(value.substring(1, value.length - 1)); }
+
+  validate(c: AbstractControl) { return c.value === 'expected' ? null : {'err': true}; }
+}
+
+@Component({selector: 'my-input', template: ''})
+export class MyInput implements ControlValueAccessor {
+  @Output('input') onInput = new EventEmitter();
+  value: string;
+
+  constructor(cd: NgControl) { cd.valueAccessor = this; }
+
+  writeValue(value: any) { this.value = `!${value}!`; }
+
+  registerOnChange(fn: (value: any) => void) { this.onInput.subscribe({next: fn}); }
+
+  registerOnTouched(fn: any) {}
+
+  dispatchChangeEvent() { this.onInput.emit(this.value.substring(1, this.value.length - 1)); }
+}
+
+@Component({
+  selector: 'my-input-form',
+  template: `
+    <div [formGroup]="form">
+      <my-input formControlName="login"></my-input>
+    </div>`
+})
+export class MyInputForm {
+  form: FormGroup;
+}
+
+@Component({
+  selector: 'wrapped-value-form',
+  template: `
+    <div [formGroup]="form">
+      <input type="text" formControlName="login" wrapped-value>
+    </div>`
+})
+class WrappedValueForm {
+  form: FormGroup;
+}
+
+@Component({
+  selector: 'ng-model-custom-comp',
+  template: `
+    <input name="custom" [(ngModel)]="model" (ngModelChange)="changeFn($event)" [disabled]="isDisabled">
+  `,
+  providers: [{provide: NG_VALUE_ACCESSOR, multi: true, useExisting: NgModelCustomComp}]
+})
+export class NgModelCustomComp implements ControlValueAccessor {
+  model: string;
+  @Input('disabled') isDisabled: boolean = false;
+  changeFn: (value: any) => void;
+
+  writeValue(value: any) { this.model = value; }
+
+  registerOnChange(fn: (value: any) => void) { this.changeFn = fn; }
+
+  registerOnTouched() {}
+
+  setDisabledState(isDisabled: boolean) { this.isDisabled = isDisabled; }
+}
+
+@Component({
+  selector: 'ng-model-custom-wrapper',
+  template: `
+    <form>
+      <ng-model-custom-comp name="name" [(ngModel)]="name" [disabled]="isDisabled"></ng-model-custom-comp>
+    </form>
+  `
+})
+export class NgModelCustomWrapper {
+  name: string;
+  isDisabled = false;
+}
\ No newline at end of file
diff --git a/packages/forms/tsconfig-build.json b/packages/forms/tsconfig-build.json
index 74d0fa0488..8cfa4196f1 100644
--- a/packages/forms/tsconfig-build.json
+++ b/packages/forms/tsconfig-build.json
@@ -4,6 +4,7 @@
     "declaration": true,
     "stripInternal": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "module": "es2015",
     "moduleResolution": "node",
     "outDir": "../../dist/packages/forms",
diff --git a/packages/http/package.json b/packages/http/package.json
index 9154aa8647..364d449b56 100644
--- a/packages/http/package.json
+++ b/packages/http/package.json
@@ -8,6 +8,9 @@
   "typings": "./http.d.ts",
   "author": "angular",
   "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "rxjs": "^5.0.1",
     "@angular/core": "0.0.0-PLACEHOLDER",
diff --git a/packages/http/rollup.config.js b/packages/http/rollup.config.js
index 60595953c2..afca6868a8 100644
--- a/packages/http/rollup.config.js
+++ b/packages/http/rollup.config.js
@@ -6,17 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx'
+};
+
 export default {
   entry: '../../dist/packages-dist/http/@angular/http.es5.js',
   dest: '../../dist/packages-dist/http/bundles/http.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.http',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/compiler': 'ng.compiler',
-    '@angular/platform-browser': 'ng.platformBrowser',
-    'rxjs/Observable': 'Rx',
-    'rxjs/Subject': 'Rx'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/http/src/backends/browser_jsonp.ts b/packages/http/src/backends/browser_jsonp.ts
index 2734836afc..d5112c7a88 100644
--- a/packages/http/src/backends/browser_jsonp.ts
+++ b/packages/http/src/backends/browser_jsonp.ts
@@ -10,7 +10,7 @@ import {Injectable} from '@angular/core';
 
 let _nextRequestId = 0;
 export const JSONP_HOME = '__ng_jsonp__';
-let _jsonpConnections: {[key: string]: any} = null;
+let _jsonpConnections: {[key: string]: any}|null = null;
 
 function _getJsonpConnections(): {[key: string]: any} {
   const w: {[key: string]: any} = typeof window == 'object' ? window : {};
diff --git a/packages/http/src/backends/xhr_backend.ts b/packages/http/src/backends/xhr_backend.ts
index 923f805bad..b5262d1fb8 100644
--- a/packages/http/src/backends/xhr_backend.ts
+++ b/packages/http/src/backends/xhr_backend.ts
@@ -115,7 +115,7 @@ export class XHRConnection implements Connection {
       if (!req.headers.has('Accept')) {
         req.headers.append('Accept', 'application/json, text/plain, */*');
       }
-      req.headers.forEach((values, name) => _xhr.setRequestHeader(name, values.join(',')));
+      req.headers.forEach((values, name) => _xhr.setRequestHeader(name !, values.join(',')));
 
       // Select the correct buffer type to store the response
       if (req.responseType != null && _xhr.responseType != null) {
diff --git a/packages/http/src/base_request_options.ts b/packages/http/src/base_request_options.ts
index 1d0942b95d..32fb201f26 100644
--- a/packages/http/src/base_request_options.ts
+++ b/packages/http/src/base_request_options.ts
@@ -44,11 +44,11 @@ export class RequestOptions {
    * Http method with which to execute a {@link Request}.
    * Acceptable methods are defined in the {@link RequestMethod} enum.
    */
-  method: RequestMethod|string;
+  method: RequestMethod|string|null;
   /**
    * {@link Headers} to be attached to a {@link Request}.
    */
-  headers: Headers;
+  headers: Headers|null;
   /**
    * Body to be used when creating a {@link Request}.
    */
@@ -56,7 +56,7 @@ export class RequestOptions {
   /**
    * Url with which to perform a {@link Request}.
    */
-  url: string;
+  url: string|null;
   /**
    * Search parameters to be included in a {@link Request}.
    */
@@ -72,16 +72,15 @@ export class RequestOptions {
   /**
    * Enable use credentials for a {@link Request}.
    */
-  withCredentials: boolean;
+  withCredentials: boolean|null;
   /*
    * Select a buffer to store the response, such as ArrayBuffer, Blob, Json (or Document)
    */
-  responseType: ResponseContentType;
+  responseType: ResponseContentType|null;
 
   // TODO(Dzmitry): remove search when this.search is removed
-  constructor(
-      {method, headers, body, url, search, params, withCredentials,
-       responseType}: RequestOptionsArgs = {}) {
+  constructor(opts: RequestOptionsArgs = {}) {
+    const {method, headers, body, url, search, params, withCredentials, responseType} = opts;
     this.method = method != null ? normalizeMethodName(method) : null;
     this.headers = headers != null ? headers : null;
     this.body = body != null ? body : null;
@@ -128,8 +127,8 @@ export class RequestOptions {
     });
   }
 
-  private _mergeSearchParams(params: string|URLSearchParams|
-                             {[key: string]: any | any[]}): URLSearchParams {
+  private _mergeSearchParams(params?: string|URLSearchParams|{[key: string]: any | any[]}|
+                             null): URLSearchParams {
     if (!params) return this.params;
 
     if (params instanceof URLSearchParams) {
diff --git a/packages/http/src/base_response_options.ts b/packages/http/src/base_response_options.ts
index a9e56aebe3..8417dac70d 100644
--- a/packages/http/src/base_response_options.ts
+++ b/packages/http/src/base_response_options.ts
@@ -46,26 +46,27 @@ export class ResponseOptions {
   /**
    * String, Object, ArrayBuffer or Blob representing the body of the {@link Response}.
    */
-  body: string|Object|ArrayBuffer|Blob;
+  body: string|Object|ArrayBuffer|Blob|null;
   /**
    * Http {@link http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html status code}
    * associated with the response.
    */
-  status: number;
+  status: number|null;
   /**
    * Response {@link Headers headers}
    */
-  headers: Headers;
+  headers: Headers|null;
   /**
    * @internal
    */
-  statusText: string;
+  statusText: string|null;
   /**
    * @internal
    */
-  type: ResponseType;
-  url: string;
-  constructor({body, status, headers, statusText, type, url}: ResponseOptionsArgs = {}) {
+  type: ResponseType|null;
+  url: string|null;
+  constructor(opts: ResponseOptionsArgs = {}) {
+    const {body, status, headers, statusText, type, url} = opts;
     this.body = body != null ? body : null;
     this.status = status != null ? status : null;
     this.headers = headers != null ? headers : null;
diff --git a/packages/http/src/body.ts b/packages/http/src/body.ts
index 053a7e9475..4b091fb5b9 100644
--- a/packages/http/src/body.ts
+++ b/packages/http/src/body.ts
@@ -37,14 +37,32 @@ export abstract class Body {
 
   /**
    * Returns the body as a string, presuming `toString()` can be called on the response body.
+   *
+   * When decoding an `ArrayBuffer`, the optional `encodingHint` parameter determines how the
+   * bytes in the buffer will be interpreted. Valid values are:
+   *
+   * - `legacy` - incorrectly interpret the bytes as UTF-16 (technically, UCS-2). Only characters
+   *   in the Basic Multilingual Plane are supported, surrogate pairs are not handled correctly.
+   *   In addition, the endianness of the 16-bit octet pairs in the `ArrayBuffer` is not taken
+   *   into consideration. This is the default behavior to avoid breaking apps, but should be
+   *   considered deprecated.
+   *
+   * - `iso-8859` - interpret the bytes as ISO-8859 (which can be used for ASCII encoded text).
    */
-  text(): string {
+  text(encodingHint: 'legacy'|'iso-8859' = 'legacy'): string {
     if (this._body instanceof URLSearchParams) {
       return this._body.toString();
     }
 
     if (this._body instanceof ArrayBuffer) {
-      return String.fromCharCode.apply(null, new Uint16Array(<ArrayBuffer>this._body));
+      switch (encodingHint) {
+        case 'legacy':
+          return String.fromCharCode.apply(null, new Uint16Array(this._body as ArrayBuffer));
+        case 'iso-8859':
+          return String.fromCharCode.apply(null, new Uint8Array(this._body as ArrayBuffer));
+        default:
+          throw new Error(`Invalid value for encodingHint: ${encodingHint}`);
+      }
     }
 
     if (this._body == null) {
diff --git a/packages/http/src/headers.ts b/packages/http/src/headers.ts
index dc1be57ce8..029362c9aa 100644
--- a/packages/http/src/headers.ts
+++ b/packages/http/src/headers.ts
@@ -41,7 +41,7 @@ export class Headers {
   _normalizedNames: Map<string, string> = new Map();
 
   // TODO(vicb): any -> string|string[]
-  constructor(headers?: Headers|{[name: string]: any}) {
+  constructor(headers?: Headers|{[name: string]: any}|null) {
     if (!headers) {
       return;
     }
@@ -100,7 +100,8 @@ export class Headers {
     this._headers.delete(lcName);
   }
 
-  forEach(fn: (values: string[], name: string, headers: Map<string, string[]>) => void): void {
+  forEach(fn: (values: string[], name: string|undefined, headers: Map<string, string[]>) => void):
+      void {
     this._headers.forEach(
         (values, lcName) => fn(values, this._normalizedNames.get(lcName), this._headers));
   }
@@ -108,7 +109,7 @@ export class Headers {
   /**
    * Returns first header that matches given name.
    */
-  get(name: string): string {
+  get(name: string): string|null {
     const values = this.getAll(name);
 
     if (values === null) {
@@ -157,7 +158,7 @@ export class Headers {
     this._headers.forEach((values: string[], name: string) => {
       const split: string[] = [];
       values.forEach(v => split.push(...v.split(',')));
-      serialized[this._normalizedNames.get(name)] = split;
+      serialized[this._normalizedNames.get(name) !] = split;
     });
 
     return serialized;
@@ -166,8 +167,8 @@ export class Headers {
   /**
    * Returns list of header values for a given name.
    */
-  getAll(name: string): string[] {
-    return this.has(name) ? this._headers.get(name.toLowerCase()) : null;
+  getAll(name: string): string[]|null {
+    return this.has(name) ? this._headers.get(name.toLowerCase()) || null : null;
   }
 
   /**
diff --git a/packages/http/src/http.ts b/packages/http/src/http.ts
index 4487eb5121..9f453832d5 100644
--- a/packages/http/src/http.ts
+++ b/packages/http/src/http.ts
@@ -8,9 +8,10 @@
 
 import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
+
 import {BaseRequestOptions, RequestOptions} from './base_request_options';
 import {RequestMethod} from './enums';
-import {ConnectionBackend, RequestOptionsArgs} from './interfaces';
+import {ConnectionBackend, RequestArgs, RequestOptionsArgs} from './interfaces';
 import {Request} from './static_request';
 import {Response} from './static_response';
 
@@ -19,8 +20,8 @@ function httpRequest(backend: ConnectionBackend, request: Request): Observable<R
 }
 
 function mergeOptions(
-    defaultOpts: BaseRequestOptions, providedOpts: RequestOptionsArgs, method: RequestMethod,
-    url: string): RequestOptions {
+    defaultOpts: BaseRequestOptions, providedOpts: RequestOptionsArgs | undefined,
+    method: RequestMethod, url: string): RequestArgs {
   const newOptions = defaultOpts;
   if (providedOpts) {
     // Hack so Dart can used named parameters
@@ -33,10 +34,10 @@ function mergeOptions(
       body: providedOpts.body,
       withCredentials: providedOpts.withCredentials,
       responseType: providedOpts.responseType
-    }));
+    })) as RequestArgs;
   }
 
-  return newOptions.merge(new RequestOptions({method, url}));
+  return newOptions.merge(new RequestOptions({method, url})) as RequestArgs;
 }
 
 /**
diff --git a/packages/http/src/http_utils.ts b/packages/http/src/http_utils.ts
index 0344ee5649..694d40eebd 100644
--- a/packages/http/src/http_utils.ts
+++ b/packages/http/src/http_utils.ts
@@ -32,16 +32,25 @@ export function normalizeMethodName(method: string | RequestMethod): RequestMeth
 
 export const isSuccess = (status: number): boolean => (status >= 200 && status < 300);
 
-export function getResponseURL(xhr: any): string {
+export function getResponseURL(xhr: any): string|null {
   if ('responseURL' in xhr) {
     return xhr.responseURL;
   }
   if (/^X-Request-URL:/m.test(xhr.getAllResponseHeaders())) {
     return xhr.getResponseHeader('X-Request-URL');
   }
-  return;
+  return null;
 }
 
+export function stringToArrayBuffer8(input: String): ArrayBuffer {
+  const view = new Uint8Array(input.length);
+  for (let i = 0, strLen = input.length; i < strLen; i++) {
+    view[i] = input.charCodeAt(i);
+  }
+  return view.buffer;
+}
+
+
 export function stringToArrayBuffer(input: String): ArrayBuffer {
   const view = new Uint16Array(input.length);
   for (let i = 0, strLen = input.length; i < strLen; i++) {
diff --git a/packages/http/src/interfaces.ts b/packages/http/src/interfaces.ts
index 112e71d14d..8637d27869 100644
--- a/packages/http/src/interfaces.ts
+++ b/packages/http/src/interfaces.ts
@@ -46,21 +46,21 @@ export abstract class XSRFStrategy { abstract configureRequest(req: Request): vo
  * @experimental
  */
 export interface RequestOptionsArgs {
-  url?: string;
-  method?: string|RequestMethod;
+  url?: string|null;
+  method?: string|RequestMethod|null;
   /** @deprecated from 4.0.0. Use params instead. */
-  search?: string|URLSearchParams|{[key: string]: any | any[]};
-  params?: string|URLSearchParams|{[key: string]: any | any[]};
-  headers?: Headers;
+  search?: string|URLSearchParams|{[key: string]: any | any[]}|null;
+  params?: string|URLSearchParams|{[key: string]: any | any[]}|null;
+  headers?: Headers|null;
   body?: any;
-  withCredentials?: boolean;
-  responseType?: ResponseContentType;
+  withCredentials?: boolean|null;
+  responseType?: ResponseContentType|null;
 }
 
 /**
  * Required structure when constructing new Request();
  */
-export interface RequestArgs extends RequestOptionsArgs { url: string; }
+export interface RequestArgs extends RequestOptionsArgs { url: string|null; }
 
 /**
  * Interface for options to construct a Response, based on
@@ -69,10 +69,10 @@ export interface RequestArgs extends RequestOptionsArgs { url: string; }
  * @experimental
  */
 export interface ResponseOptionsArgs {
-  body?: string|Object|FormData|ArrayBuffer|Blob;
-  status?: number;
-  statusText?: string;
-  headers?: Headers;
-  type?: ResponseType;
-  url?: string;
+  body?: string|Object|FormData|ArrayBuffer|Blob|null;
+  status?: number|null;
+  statusText?: string|null;
+  headers?: Headers|null;
+  type?: ResponseType|null;
+  url?: string|null;
 }
diff --git a/packages/http/src/static_request.ts b/packages/http/src/static_request.ts
index 05947426f6..7005bb4cb0 100644
--- a/packages/http/src/static_request.ts
+++ b/packages/http/src/static_request.ts
@@ -75,9 +75,15 @@ export class Request extends Body {
     super();
     // TODO: assert that url is present
     const url = requestOptions.url;
-    this.url = requestOptions.url;
-    if (requestOptions.params) {
-      const params = requestOptions.params.toString();
+    this.url = requestOptions.url !;
+    const paramsArg = requestOptions.params || requestOptions.search;
+    if (paramsArg) {
+      let params: string;
+      if (typeof paramsArg === 'object' && !(paramsArg instanceof URLSearchParams)) {
+        params = urlEncodeParams(paramsArg).toString();
+      } else {
+        params = paramsArg.toString();
+      }
       if (params.length > 0) {
         let prefix = '?';
         if (this.url.indexOf('?') != -1) {
@@ -88,13 +94,13 @@ export class Request extends Body {
       }
     }
     this._body = requestOptions.body;
-    this.method = normalizeMethodName(requestOptions.method);
+    this.method = normalizeMethodName(requestOptions.method !);
     // TODO(jeffbcross): implement behavior
     // Defaults to 'omit', consistent with browser
     this.headers = new Headers(requestOptions.headers);
     this.contentType = this.detectContentType();
-    this.withCredentials = requestOptions.withCredentials;
-    this.responseType = requestOptions.responseType;
+    this.withCredentials = requestOptions.withCredentials !;
+    this.responseType = requestOptions.responseType !;
   }
 
   /**
@@ -163,8 +169,22 @@ export class Request extends Body {
   }
 }
 
+function urlEncodeParams(params: {[key: string]: any}): URLSearchParams {
+  const searchParams = new URLSearchParams();
+  Object.keys(params).forEach(key => {
+    const value = params[key];
+    if (value && Array.isArray(value)) {
+      value.forEach(element => searchParams.append(key, element.toString()));
+    } else {
+      searchParams.append(key, value.toString());
+    }
+  });
+  return searchParams;
+}
+
 const noop = function() {};
 const w = typeof window == 'object' ? window : noop;
 const FormData = (w as any /** TODO #9100 */)['FormData'] || noop;
 const Blob = (w as any /** TODO #9100 */)['Blob'] || noop;
-export const ArrayBuffer = (w as any /** TODO #9100 */)['ArrayBuffer'] || noop;
+export const ArrayBuffer: ArrayBufferConstructor =
+    (w as any /** TODO #9100 */)['ArrayBuffer'] || noop;
diff --git a/packages/http/src/static_response.ts b/packages/http/src/static_response.ts
index 199fd08af5..f46d4e0491 100644
--- a/packages/http/src/static_response.ts
+++ b/packages/http/src/static_response.ts
@@ -63,7 +63,7 @@ export class Response extends Body {
    *
    * Defaults to "OK"
    */
-  statusText: string;
+  statusText: string|null;
   /**
    * Non-standard property
    *
@@ -81,17 +81,17 @@ export class Response extends Body {
    * Headers object based on the `Headers` class in the [Fetch
    * Spec](https://fetch.spec.whatwg.org/#headers-class).
    */
-  headers: Headers;
+  headers: Headers|null;
 
   constructor(responseOptions: ResponseOptions) {
     super();
     this._body = responseOptions.body;
-    this.status = responseOptions.status;
+    this.status = responseOptions.status !;
     this.ok = (this.status >= 200 && this.status <= 299);
     this.statusText = responseOptions.statusText;
     this.headers = responseOptions.headers;
-    this.type = responseOptions.type;
-    this.url = responseOptions.url;
+    this.type = responseOptions.type !;
+    this.url = responseOptions.url !;
   }
 
   toString(): string {
diff --git a/packages/http/src/url_search_params.ts b/packages/http/src/url_search_params.ts
index 3effcad374..ffb1086da7 100644
--- a/packages/http/src/url_search_params.ts
+++ b/packages/http/src/url_search_params.ts
@@ -93,7 +93,7 @@ export class URLSearchParams {
 
   has(param: string): boolean { return this.paramsMap.has(param); }
 
-  get(param: string): string {
+  get(param: string): string|null {
     const storedParam = this.paramsMap.get(param);
 
     return Array.isArray(storedParam) ? storedParam[0] : null;
diff --git a/packages/http/test/backends/jsonp_backend_spec.ts b/packages/http/test/backends/jsonp_backend_spec.ts
index 5f0e4d501f..ecef2c529e 100644
--- a/packages/http/test/backends/jsonp_backend_spec.ts
+++ b/packages/http/test/backends/jsonp_backend_spec.ts
@@ -59,13 +59,14 @@ export function main() {
       ]);
       backend = injector.get(JSONPBackend);
       const base = new BaseRequestOptions();
-      sampleRequest = new Request(base.merge(new RequestOptions({url: 'https://google.com'})));
+      sampleRequest =
+          new Request(base.merge(new RequestOptions({url: 'https://google.com'})) as any);
     });
 
     afterEach(() => { existingScripts = []; });
 
     it('should create a connection', () => {
-      let instance: JSONPConnection;
+      let instance: JSONPConnection = undefined !;
       expect(() => instance = backend.createConnection(sampleRequest)).not.toThrow();
       expect(instance).toBeAnInstanceOf(JSONPConnection);
     });
@@ -146,8 +147,8 @@ export function main() {
          RequestMethod.Head, RequestMethod.Patch]
             .forEach(method => {
               const base = new BaseRequestOptions();
-              const req = new Request(
-                  base.merge(new RequestOptions({url: 'https://google.com', method: method})));
+              const req = new Request(base.merge(
+                  new RequestOptions({url: 'https://google.com', method: method})) as any);
               expect(() => new JSONPConnection_(req, new MockBrowserJsonp()).response.subscribe())
                   .toThrowError();
             });
diff --git a/packages/http/test/backends/mock_backend_spec.ts b/packages/http/test/backends/mock_backend_spec.ts
index ee81874791..3b4640decc 100644
--- a/packages/http/test/backends/mock_backend_spec.ts
+++ b/packages/http/test/backends/mock_backend_spec.ts
@@ -31,9 +31,11 @@ export function main() {
           [{provide: ResponseOptions, useClass: BaseResponseOptions}, MockBackend]);
       backend = injector.get(MockBackend);
       const base = new BaseRequestOptions();
-      sampleRequest1 = new Request(base.merge(new RequestOptions({url: 'https://google.com'})));
+      sampleRequest1 =
+          new Request(base.merge(new RequestOptions({url: 'https://google.com'})) as any);
       sampleResponse1 = new Response(new ResponseOptions({body: 'response1'}));
-      sampleRequest2 = new Request(base.merge(new RequestOptions({url: 'https://google.com'})));
+      sampleRequest2 =
+          new Request(base.merge(new RequestOptions({url: 'https://google.com'})) as any);
       sampleResponse2 = new Response(new ResponseOptions({body: 'response2'}));
     });
 
@@ -65,7 +67,7 @@ export function main() {
     it('should allow responding after subscription with an error',
        inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
          const connection: MockConnection = backend.createConnection(sampleRequest1);
-         connection.response.subscribe(null, () => { async.done(); });
+         connection.response.subscribe(null !, () => { async.done(); });
          connection.mockError(new Error('nope'));
        }));
 
@@ -98,12 +100,12 @@ export function main() {
     xit('should allow double subscribing',
         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
           const responses: Response[] = [sampleResponse1, sampleResponse2];
-          backend.connections.subscribe((c: MockConnection) => c.mockRespond(responses.shift()));
+          backend.connections.subscribe((c: MockConnection) => c.mockRespond(responses.shift() !));
           const responseObservable: ReplaySubject<Response> =
               backend.createConnection(sampleRequest1).response;
           responseObservable.subscribe(res => expect(res.text()).toBe('response1'));
           responseObservable.subscribe(
-              res => expect(res.text()).toBe('response2'), null, async.done);
+              res => expect(res.text()).toBe('response2'), null !, async.done);
         }));
 
     // TODO(robwormald): readyStates are leaving?
diff --git a/packages/http/test/backends/xhr_backend_spec.ts b/packages/http/test/backends/xhr_backend_spec.ts
index f62840474c..d56bdfb290 100644
--- a/packages/http/test/backends/xhr_backend_spec.ts
+++ b/packages/http/test/backends/xhr_backend_spec.ts
@@ -75,7 +75,7 @@ class MockBrowserXHR extends BrowserXhr {
 
   removeEventListener(type: string, cb: Function) { this.callbacks.delete(type); }
 
-  dispatchEvent(type: string) { this.callbacks.get(type)({}); }
+  dispatchEvent(type: string) { this.callbacks.get(type) !({}); }
 
   build() {
     const xhr = new MockBrowserXHR();
@@ -99,7 +99,8 @@ export function main() {
     beforeEach(inject([XHRBackend], (be: XHRBackend) => {
       backend = be;
       const base = new BaseRequestOptions();
-      sampleRequest = new Request(base.merge(new RequestOptions({url: 'https://google.com'})));
+      sampleRequest =
+          new Request(base.merge(new RequestOptions({url: 'https://google.com'})) as any);
     }));
 
     afterEach(() => { existingXHRs = []; });
@@ -163,7 +164,7 @@ export function main() {
                sampleRequest, new MockBrowserXHR(),
                new ResponseOptions({type: ResponseType.Error}));
            connection.response.subscribe(
-               (res: Response) => { expect(res.type).toBe(ResponseType.Error); }, null,
+               (res: Response) => { expect(res.type).toBe(ResponseType.Error); }, null !,
                () => { async.done(); });
            existingXHRs[0].setStatusCode(200);
            existingXHRs[0].dispatchEvent('load');
@@ -181,7 +182,7 @@ export function main() {
            const connection = new XHRConnection(
                sampleRequest, new MockBrowserXHR(),
                new ResponseOptions({type: ResponseType.Error}));
-           connection.response.subscribe(null, (res: Response) => {
+           connection.response.subscribe(null !, (res: Response) => {
              expect(res.type).toBe(ResponseType.Error);
              async.done();
            });
@@ -193,7 +194,7 @@ export function main() {
            const connection = new XHRConnection(
                sampleRequest, new MockBrowserXHR(),
                new ResponseOptions({type: ResponseType.Error}));
-           connection.response.subscribe(null, (res: Response) => {
+           connection.response.subscribe(null !, (res: Response) => {
              expect(res.type).toBe(ResponseType.Error);
              expect(res.status).toEqual(0);
              expect(res.statusText).toEqual('');
@@ -217,7 +218,7 @@ export function main() {
         const body = 'Some body to love';
         const base = new BaseRequestOptions();
         const connection = new XHRConnection(
-            new Request(base.merge(new RequestOptions({body: body}))), new MockBrowserXHR());
+            new Request(base.merge(new RequestOptions({body: body})) as any), new MockBrowserXHR());
         expect(sendSpy).not.toHaveBeenCalled();
         connection.response.subscribe();
         expect(sendSpy).toHaveBeenCalledWith(body);
@@ -229,7 +230,8 @@ export function main() {
 
         const base = new BaseRequestOptions();
         const connection = new XHRConnection(
-            new Request(base.merge(new RequestOptions({headers: headers}))), new MockBrowserXHR());
+            new Request(base.merge(new RequestOptions({headers: headers})) as any),
+            new MockBrowserXHR());
         connection.response.subscribe();
         expect(setRequestHeaderSpy).toHaveBeenCalledWith('Content-Type', 'text/xml');
         expect(setRequestHeaderSpy).toHaveBeenCalledWith('Breaking-Bad', '<3');
@@ -240,7 +242,7 @@ export function main() {
         const headers = new Headers();
         const base = new BaseRequestOptions();
         const connection = new XHRConnection(
-            new Request(base.merge(new RequestOptions({headers}))), new MockBrowserXHR());
+            new Request(base.merge(new RequestOptions({headers})) as any), new MockBrowserXHR());
         connection.response.subscribe();
         expect(setRequestHeaderSpy)
             .toHaveBeenCalledWith('Accept', 'application/json, text/plain, */*');
@@ -250,7 +252,7 @@ export function main() {
         const headers = new Headers({'Accept': 'text/xml'});
         const base = new BaseRequestOptions();
         const connection = new XHRConnection(
-            new Request(base.merge(new RequestOptions({headers}))), new MockBrowserXHR());
+            new Request(base.merge(new RequestOptions({headers})) as any), new MockBrowserXHR());
         connection.response.subscribe();
         expect(setRequestHeaderSpy).toHaveBeenCalledWith('Accept', 'text/xml');
       });
@@ -260,7 +262,7 @@ export function main() {
         const body = {test: 'val'};
         const base = new BaseRequestOptions();
         const connection = new XHRConnection(
-            new Request(base.merge(new RequestOptions({body: body, headers: headers}))),
+            new Request(base.merge(new RequestOptions({body: body, headers: headers})) as any),
             new MockBrowserXHR());
         connection.response.subscribe();
         expect(setRequestHeaderSpy).toHaveBeenCalledWith('Content-Type', 'text/plain');
@@ -272,7 +274,7 @@ export function main() {
         const body = {test: 'val'};
         const base = new BaseRequestOptions();
         const connection = new XHRConnection(
-            new Request(base.merge(new RequestOptions({body: body}))), new MockBrowserXHR());
+            new Request(base.merge(new RequestOptions({body: body})) as any), new MockBrowserXHR());
         connection.response.subscribe();
         expect(sendSpy).toHaveBeenCalledWith(JSON.stringify(body, null, 2));
         expect(setRequestHeaderSpy).toHaveBeenCalledWith('content-type', 'application/json');
@@ -282,7 +284,7 @@ export function main() {
         const body = 23;
         const base = new BaseRequestOptions();
         const connection = new XHRConnection(
-            new Request(base.merge(new RequestOptions({body: body}))), new MockBrowserXHR());
+            new Request(base.merge(new RequestOptions({body: body})) as any), new MockBrowserXHR());
         connection.response.subscribe();
         expect(sendSpy).toHaveBeenCalledWith('23');
         expect(setRequestHeaderSpy).toHaveBeenCalledWith('content-type', 'text/plain');
@@ -292,7 +294,7 @@ export function main() {
         const body = 'some string';
         const base = new BaseRequestOptions();
         const connection = new XHRConnection(
-            new Request(base.merge(new RequestOptions({body: body}))), new MockBrowserXHR());
+            new Request(base.merge(new RequestOptions({body: body})) as any), new MockBrowserXHR());
         connection.response.subscribe();
         expect(sendSpy).toHaveBeenCalledWith(body);
         expect(setRequestHeaderSpy).toHaveBeenCalledWith('content-type', 'text/plain');
@@ -304,7 +306,7 @@ export function main() {
         body.set('test2', 'val2');
         const base = new BaseRequestOptions();
         const connection = new XHRConnection(
-            new Request(base.merge(new RequestOptions({body: body}))), new MockBrowserXHR());
+            new Request(base.merge(new RequestOptions({body: body})) as any), new MockBrowserXHR());
         connection.response.subscribe();
         expect(sendSpy).toHaveBeenCalledWith('test1=val1&test2=val2');
         expect(setRequestHeaderSpy)
@@ -332,12 +334,13 @@ export function main() {
         it('should use FormData body and detect content type header to the request', () => {
           const body = new FormData();
           body.append('test1', 'val1');
-          body.append('test2', 123456);
+          body.append('test2', '123456');
           const blob = createBlob(['body { color: red; }'], 'text/css');
           body.append('userfile', blob);
           const base = new BaseRequestOptions();
           const connection = new XHRConnection(
-              new Request(base.merge(new RequestOptions({body: body}))), new MockBrowserXHR());
+              new Request(base.merge(new RequestOptions({body: body})) as any),
+              new MockBrowserXHR());
           connection.response.subscribe();
           expect(sendSpy).toHaveBeenCalledWith(body);
           expect(setRequestHeaderSpy).not.toHaveBeenCalledWith();
@@ -347,14 +350,15 @@ export function main() {
           const body = createBlob(['body { color: red; }'], 'text/css');
           const base = new BaseRequestOptions();
           const connection = new XHRConnection(
-              new Request(base.merge(new RequestOptions({body: body}))), new MockBrowserXHR());
+              new Request(base.merge(new RequestOptions({body: body})) as any),
+              new MockBrowserXHR());
           connection.response.subscribe();
           expect(sendSpy).toHaveBeenCalledWith(body);
           expect(setRequestHeaderSpy).toHaveBeenCalledWith('content-type', 'text/css');
         });
 
         it('should use blob body without type to the request', () => {
-          const body = createBlob(['body { color: red; }'], null);
+          const body = createBlob(['body { color: red; }'], null !);
           const base = new BaseRequestOptions();
           const connection = new XHRConnection(
               new Request(base.merge(new RequestOptions({body: body}))), new MockBrowserXHR());
@@ -366,7 +370,7 @@ export function main() {
         it('should use blob body without type with custom content type header to the request',
            () => {
              const headers = new Headers({'Content-Type': 'text/css'});
-             const body = createBlob(['body { color: red; }'], null);
+             const body = createBlob(['body { color: red; }'], null !);
              const base = new BaseRequestOptions();
              const connection = new XHRConnection(
                  new Request(base.merge(new RequestOptions({body: body, headers: headers}))),
@@ -590,7 +594,7 @@ export function main() {
          inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
            const conn =
                new XHRConnection(sampleRequest, new MockBrowserXHR(), new ResponseOptions());
-           conn.response.subscribe(null, (res: Response) => {
+           conn.response.subscribe(null !, (res: Response) => {
              expect(res.text()).toBe('{json: "object"}');
              async.done();
            });
@@ -611,10 +615,10 @@ Transfer-Encoding: chunked
 Connection: keep-alive`;
 
            connection.response.subscribe((res: Response) => {
-             expect(res.headers.get('Date')).toEqual('Fri, 20 Nov 2015 01:45:26 GMT');
-             expect(res.headers.get('Content-Type')).toEqual('application/json; charset=utf-8');
-             expect(res.headers.get('Transfer-Encoding')).toEqual('chunked');
-             expect(res.headers.get('Connection')).toEqual('keep-alive');
+             expect(res.headers !.get('Date')).toEqual('Fri, 20 Nov 2015 01:45:26 GMT');
+             expect(res.headers !.get('Content-Type')).toEqual('application/json; charset=utf-8');
+             expect(res.headers !.get('Transfer-Encoding')).toEqual('chunked');
+             expect(res.headers !.get('Connection')).toEqual('keep-alive');
              async.done();
            });
 
diff --git a/packages/http/test/http_spec.ts b/packages/http/test/http_spec.ts
index 544d58745c..3f0fb7b5c0 100644
--- a/packages/http/test/http_spec.ts
+++ b/packages/http/test/http_spec.ts
@@ -175,7 +175,7 @@ export function main() {
              backend.connections.subscribe((c: MockConnection) => c.mockRespond(baseResponse));
              http.request('http://basic.connection')
                  .subscribe(
-                     (res: Response) => { expect(res.text()).toBe('base response'); }, null,
+                     (res: Response) => { expect(res.text()).toBe('base response'); }, null !,
                      () => { async.done(); });
            }));
 
@@ -188,7 +188,7 @@ export function main() {
              });
              http.request('http://basic.connection')
                  .subscribe(
-                     (res: Response) => { expect(res.text()).toBe('base response'); }, null,
+                     (res: Response) => { expect(res.text()).toBe('base response'); }, null !,
                      () => { async.done(); });
            }));
 
diff --git a/packages/http/test/static_request_spec.ts b/packages/http/test/static_request_spec.ts
index 41c9d2b586..79878966da 100644
--- a/packages/http/test/static_request_spec.ts
+++ b/packages/http/test/static_request_spec.ts
@@ -7,17 +7,20 @@
  */
 
 import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {ɵgetDOM as getDOM} from '@angular/platform-browser';
 
 import {RequestOptions} from '../src/base_request_options';
 import {ContentType} from '../src/enums';
 import {Headers} from '../src/headers';
+import {stringToArrayBuffer, stringToArrayBuffer8} from '../src/http_utils';
 import {ArrayBuffer, Request} from '../src/static_request';
 
 export function main() {
   describe('Request', () => {
     describe('detectContentType', () => {
       it('should return ContentType.NONE', () => {
-        const req = new Request(new RequestOptions({url: 'test', method: 'GET', body: null}));
+        const req =
+            new Request(new RequestOptions({url: 'test', method: 'GET', body: null}) as any);
 
         expect(req.detectContentType()).toEqual(ContentType.NONE);
       });
@@ -28,7 +31,7 @@ export function main() {
           method: 'GET',
           body: null,
           headers: new Headers({'content-type': 'application/json'})
-        }));
+        }) as any);
 
         expect(req.detectContentType()).toEqual(ContentType.JSON);
       });
@@ -39,7 +42,7 @@ export function main() {
           method: 'GET',
           body: null,
           headers: new Headers({'content-type': 'application/x-www-form-urlencoded'})
-        }));
+        }) as any);
 
         expect(req.detectContentType()).toEqual(ContentType.FORM);
       });
@@ -50,7 +53,7 @@ export function main() {
           method: 'GET',
           body: null,
           headers: new Headers({'content-type': 'multipart/form-data'})
-        }));
+        }) as any);
 
         expect(req.detectContentType()).toEqual(ContentType.FORM_DATA);
       });
@@ -61,7 +64,7 @@ export function main() {
           method: 'GET',
           body: null,
           headers: new Headers({'content-type': 'text/plain'})
-        }));
+        }) as any);
 
         expect(req.detectContentType()).toEqual(ContentType.TEXT);
       });
@@ -72,7 +75,7 @@ export function main() {
           method: 'GET',
           body: null,
           headers: new Headers({'content-type': 'application/octet-stream'})
-        }));
+        }) as any);
 
         expect(req.detectContentType()).toEqual(ContentType.BLOB);
       });
@@ -83,7 +86,7 @@ export function main() {
           method: 'GET',
           body: new ArrayBuffer(1),
           headers: new Headers({'content-type': 'application/octet-stream'})
-        }));
+        }) as any);
 
         expect(req.detectContentType()).toEqual(ContentType.ARRAY_BUFFER);
       });
@@ -95,7 +98,7 @@ export function main() {
         method: 'GET',
         body: null,
         headers: new Headers({'content-type': 'application/json'})
-      }));
+      }) as any);
 
       expect(req.text()).toEqual('');
     });
@@ -104,9 +107,32 @@ export function main() {
       const reqOptions = new RequestOptions(
           {url: 'test', method: 'GET', headers: new Headers({'content-type': 'application/json'})});
       delete reqOptions.body;
-      const req = new Request(reqOptions);
+      const req = new Request(reqOptions as any);
 
       expect(req.text()).toEqual('');
     });
+
+    it('should use object params', () => {
+      const req = new Request({url: 'http://test.com', params: {'a': 3, 'b': ['x', 'y']}});
+      expect(req.url).toBe('http://test.com?a=3&b=x&b=y');
+    });
+
+    it('should use search if present', () => {
+      const req = new Request({url: 'http://test.com', search: 'a=1&b=2'});
+      expect(req.url).toBe('http://test.com?a=1&b=2');
+    });
+
+    if (getDOM().supportsWebAnimation()) {
+      it('should serialize an ArrayBuffer to string via legacy encoding', () => {
+        const str = '\u89d2\u5ea6';
+        expect(new Request({body: stringToArrayBuffer(str), url: '/'}).text()).toEqual(str);
+      });
+
+      it('should serialize an ArrayBuffer to string via iso-8859 encoding', () => {
+        const str = 'abcd';
+        expect(new Request({body: stringToArrayBuffer8(str), url: '/'}).text('iso-8859'))
+            .toEqual(str);
+      });
+    }
   });
 }
diff --git a/packages/http/test/url_search_params_spec.ts b/packages/http/test/url_search_params_spec.ts
index 1cb725f147..e95620ed46 100644
--- a/packages/http/test/url_search_params_spec.ts
+++ b/packages/http/test/url_search_params_spec.ts
@@ -151,19 +151,19 @@ export function main() {
 
     it('should remove the parameter when set to undefined or null', () => {
       const params = new URLSearchParams('q=Q');
-      params.set('q', undefined);
+      params.set('q', undefined !);
       expect(params.has('q')).toBe(false);
       expect(params.toString()).toEqual('');
-      params.set('q', null);
+      params.set('q', null !);
       expect(params.has('q')).toBe(false);
       expect(params.toString()).toEqual('');
     });
 
     it('should ignore the value when append undefined or null', () => {
       const params = new URLSearchParams('q=Q');
-      params.append('q', undefined);
+      params.append('q', undefined !);
       expect(params.toString()).toEqual('q=Q');
-      params.append('q', null);
+      params.append('q', null !);
       expect(params.toString()).toEqual('q=Q');
     });
 
diff --git a/packages/http/testing/public_api.ts b/packages/http/testing/public_api.ts
new file mode 100644
index 0000000000..886eaecbc9
--- /dev/null
+++ b/packages/http/testing/public_api.ts
@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/**
+ * @module
+ * @description
+ * Entry point for all public APIs of the http testing package.
+ */
+export * from './src/testing';
diff --git a/packages/http/testing/rollup.config.js b/packages/http/testing/rollup.config.js
index 83da7fd143..c15281ccf4 100644
--- a/packages/http/testing/rollup.config.js
+++ b/packages/http/testing/rollup.config.js
@@ -6,20 +6,26 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/http': 'ng.http',
+  'rxjs/Observable': 'Rx',
+  'rxjs/ReplaySubject': 'Rx',
+  'rxjs/Subject': 'Rx',
+  'rxjs/operator/take': 'Rx.Observable.prototype'
+};
+
 export default {
   entry: '../../../dist/packages-dist/http/@angular/http/testing.es5.js',
   dest: '../../../dist/packages-dist/http/bundles/http-testing.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.http.testing',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/compiler': 'ng.compiler',
-    '@angular/platform-browser': 'ng.platformBrowser',
-    '@angular/http': 'ng.http',
-    'rxjs/Observable': 'Rx',
-    'rxjs/ReplaySubject': 'Rx',
-    'rxjs/Subject': 'Rx',
-    'rxjs/operator/take': 'Rx.Observable.prototype'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/http/testing/tsconfig-build.json b/packages/http/testing/tsconfig-build.json
index 2b7421fa40..5b991faa2f 100644
--- a/packages/http/testing/tsconfig-build.json
+++ b/packages/http/testing/tsconfig-build.json
@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig-build",
   "compilerOptions": {
+    "strictNullChecks": true,
     "paths": {
       "@angular/core": ["../../dist/packages/core"],
       "@angular/http": ["../../dist/packages/http"],
@@ -8,9 +9,12 @@
     }
   },
   "files": [
-    "index.ts"
+    "public_api.ts"
   ],
   "angularCompilerOptions": {
-    "strictMetadataEmit": true
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/http/testing"
   }
 }
diff --git a/packages/http/tsconfig-build.json b/packages/http/tsconfig-build.json
index aa16e6bfbd..23862fa523 100644
--- a/packages/http/tsconfig-build.json
+++ b/packages/http/tsconfig-build.json
@@ -3,6 +3,7 @@
     "baseUrl": ".",
     "declaration": true,
     "stripInternal": true,
+    "strictNullChecks": true,
     "experimentalDecorators": true,
     "module": "es2015",
     "moduleResolution": "node",
diff --git a/packages/language-service/index.ts b/packages/language-service/index.ts
index 53c13320f8..4e0fc2b3be 100644
--- a/packages/language-service/index.ts
+++ b/packages/language-service/index.ts
@@ -12,7 +12,7 @@
  * Entry point for all public APIs of the language service package.
  */
 export {createLanguageService} from './src/language_service';
-export {create} from './src/ts_plugin';
+export * from './src/ts_plugin';
 export {Completion, Completions, Declaration, Declarations, Definition, Diagnostic, Diagnostics, Hover, HoverTextSection, LanguageService, LanguageServiceHost, Location, Span, TemplateSource, TemplateSources} from './src/types';
 export {TypeScriptServiceHost, createLanguageServiceFromTypescript} from './src/typescript_host';
 export {VERSION} from './src/version';
diff --git a/packages/language-service/rollup.config.js b/packages/language-service/rollup.config.js
index 336697a4f9..d1596f30bd 100644
--- a/packages/language-service/rollup.config.js
+++ b/packages/language-service/rollup.config.js
@@ -12,10 +12,11 @@ import * as path from 'path';
 var m = /^\@angular\/((\w|\-)+)(\/(\w|\d|\/|\-)+)?$/;
 var location = normalize('../../dist/packages-dist') + '/';
 var rxjsLocation = normalize('../../node_modules/rxjs');
+var tslibLocation = normalize('../../node_modules/tslib');
 var esm = 'esm/';
 
 var locations = {
-  'tsc-wrapped': normalize('../../dist/tools/@angular') + '/',
+  'tsc-wrapped': normalize('../../dist/packages-dist') + '/',
   'compiler-cli': normalize('../../dist/packages') + '/'
 };
 
@@ -46,6 +47,9 @@ function resolve(id, from) {
     const resolved = `${rxjsLocation}${id.replace('rxjs', '')}.js`;
     return resolved;
   }
+  if (id == 'tslib') {
+    return tslibLocation + '/tslib.es6.js';
+  }
 }
 
 var banner = `
diff --git a/packages/language-service/src/completions.ts b/packages/language-service/src/completions.ts
index 031268d0c3..ab78fbce8c 100644
--- a/packages/language-service/src/completions.ts
+++ b/packages/language-service/src/completions.ts
@@ -6,15 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AST, AttrAst, Attribute, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, CssSelector, DirectiveAst, Element, ElementAst, EmbeddedTemplateAst, ImplicitReceiver, NAMED_ENTITIES, NgContentAst, Node as HtmlAst, ParseSpan, PropertyRead, ReferenceAst, SelectorMatcher, TagContentType, TemplateAst, TemplateAstVisitor, Text, TextAst, VariableAst, getHtmlTagDefinition, splitNsName, templateVisitAll} from '@angular/compiler';
+import {AST, AstPath, AttrAst, Attribute, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, CssSelector, DirectiveAst, Element, ElementAst, EmbeddedTemplateAst, ImplicitReceiver, NAMED_ENTITIES, NgContentAst, Node as HtmlAst, NullTemplateVisitor, ParseSpan, PropertyRead, ReferenceAst, SelectorMatcher, TagContentType, TemplateAst, TemplateAstVisitor, Text, TextAst, VariableAst, findNode, getHtmlTagDefinition, splitNsName, templateVisitAll} from '@angular/compiler';
+import {DiagnosticTemplateInfo, getExpressionScope} from '@angular/compiler-cli';
 
 import {AstResult, AttrInfo, SelectorInfo, TemplateInfo} from './common';
-import {getExpressionCompletions, getExpressionScope} from './expressions';
+import {getExpressionCompletions} from './expressions';
 import {attributeNames, elementNames, eventNames, propertyNames} from './html_info';
-import {HtmlAstPath} from './html_path';
-import {NullTemplateVisitor, TemplateAstChildVisitor, TemplateAstPath} from './template_path';
 import {BuiltinType, Completion, Completions, Span, Symbol, SymbolDeclaration, SymbolTable, TemplateSource} from './types';
-import {flatten, getSelectors, hasTemplateReference, inSpan, removeSuffix, spanOf, uniqueByName} from './utils';
+import {diagnosticInfoFromTemplateInfo, findTemplateAstAt, flatten, getSelectors, hasTemplateReference, inSpan, removeSuffix, spanOf, uniqueByName} from './utils';
 
 const TEMPLATE_ATTR_PREFIX = '*';
 
@@ -33,71 +32,73 @@ export function getTemplateCompletions(templateInfo: TemplateInfo): Completions|
   let result: Completions|undefined = undefined;
   let {htmlAst, templateAst, template} = templateInfo;
   // The templateNode starts at the delimiter character so we add 1 to skip it.
-  let templatePosition = templateInfo.position ! - template.span.start;
-  let path = new HtmlAstPath(htmlAst, templatePosition);
-  let mostSpecific = path.tail;
-  if (path.empty) {
-    result = elementCompletions(templateInfo, path);
-  } else {
-    let astPosition = templatePosition - mostSpecific !.sourceSpan !.start.offset;
-    mostSpecific !.visit(
-        {
-          visitElement(ast) {
-            let startTagSpan = spanOf(ast.sourceSpan);
-            let tagLen = ast.name.length;
-            if (templatePosition <=
-                startTagSpan !.start + tagLen + 1 /* 1 for the opening angle bracked */) {
-              // If we are in the tag then return the element completions.
-              result = elementCompletions(templateInfo, path);
-            } else if (templatePosition < startTagSpan !.end) {
-              // We are in the attribute section of the element (but not in an attribute).
-              // Return the attribute completions.
-              result = attributeCompletions(templateInfo, path);
-            }
-          },
-          visitAttribute(ast) {
-            if (!ast.valueSpan || !inSpan(templatePosition, spanOf(ast.valueSpan))) {
-              // We are in the name of an attribute. Show attribute completions.
-              result = attributeCompletions(templateInfo, path);
-            } else if (ast.valueSpan && inSpan(templatePosition, spanOf(ast.valueSpan))) {
-              result = attributeValueCompletions(templateInfo, templatePosition, ast);
-            }
-          },
-          visitText(ast) {
-            // Check if we are in a entity.
-            result = entityCompletions(getSourceText(template, spanOf(ast) !), astPosition);
-            if (result) return result;
-            result = interpolationCompletions(templateInfo, templatePosition);
-            if (result) return result;
-            let element = path.first(Element);
-            if (element) {
-              let definition = getHtmlTagDefinition(element.name);
-              if (definition.contentType === TagContentType.PARSABLE_DATA) {
+  if (templateInfo.position != null) {
+    let templatePosition = templateInfo.position - template.span.start;
+    let path = findNode(htmlAst, templatePosition);
+    let mostSpecific = path.tail;
+    if (path.empty || !mostSpecific) {
+      result = elementCompletions(templateInfo, path);
+    } else {
+      let astPosition = templatePosition - mostSpecific.sourceSpan.start.offset;
+      mostSpecific.visit(
+          {
+            visitElement(ast) {
+              let startTagSpan = spanOf(ast.sourceSpan);
+              let tagLen = ast.name.length;
+              if (templatePosition <=
+                  startTagSpan.start + tagLen + 1 /* 1 for the opening angle bracked */) {
+                // If we are in the tag then return the element completions.
+                result = elementCompletions(templateInfo, path);
+              } else if (templatePosition < startTagSpan.end) {
+                // We are in the attribute section of the element (but not in an attribute).
+                // Return the attribute completions.
+                result = attributeCompletions(templateInfo, path);
+              }
+            },
+            visitAttribute(ast) {
+              if (!ast.valueSpan || !inSpan(templatePosition, spanOf(ast.valueSpan))) {
+                // We are in the name of an attribute. Show attribute completions.
+                result = attributeCompletions(templateInfo, path);
+              } else if (ast.valueSpan && inSpan(templatePosition, spanOf(ast.valueSpan))) {
+                result = attributeValueCompletions(templateInfo, templatePosition, ast);
+              }
+            },
+            visitText(ast) {
+              // Check if we are in a entity.
+              result = entityCompletions(getSourceText(template, spanOf(ast)), astPosition);
+              if (result) return result;
+              result = interpolationCompletions(templateInfo, templatePosition);
+              if (result) return result;
+              let element = path.first(Element);
+              if (element) {
+                let definition = getHtmlTagDefinition(element.name);
+                if (definition.contentType === TagContentType.PARSABLE_DATA) {
+                  result = voidElementAttributeCompletions(templateInfo, path);
+                  if (!result) {
+                    // If the element can hold content Show element completions.
+                    result = elementCompletions(templateInfo, path);
+                  }
+                }
+              } else {
+                // If no element container, implies parsable data so show elements.
                 result = voidElementAttributeCompletions(templateInfo, path);
                 if (!result) {
-                  // If the element can hold content Show element completions.
                   result = elementCompletions(templateInfo, path);
                 }
               }
-            } else {
-              // If no element container, implies parsable data so show elements.
-              result = voidElementAttributeCompletions(templateInfo, path);
-              if (!result) {
-                result = elementCompletions(templateInfo, path);
-              }
-            }
+            },
+            visitComment(ast) {},
+            visitExpansion(ast) {},
+            visitExpansionCase(ast) {}
           },
-          visitComment(ast) {},
-          visitExpansion(ast) {},
-          visitExpansionCase(ast) {}
-        },
-        null);
+          null);
+    }
   }
   return result;
 }
 
-function attributeCompletions(info: TemplateInfo, path: HtmlAstPath): Completions|undefined {
-  let item = path.tail instanceof Element ? path.tail : path.parentOf(path.tail !);
+function attributeCompletions(info: TemplateInfo, path: AstPath<HtmlAst>): Completions|undefined {
+  let item = path.tail instanceof Element ? path.tail : path.parentOf(path.tail);
   if (item instanceof Element) {
     return attributeCompletionsForElement(info, item.name, item);
   }
@@ -189,18 +190,19 @@ function getAttributeInfosForElement(
 
 function attributeValueCompletions(
     info: TemplateInfo, position: number, attr: Attribute): Completions|undefined {
-  const path = new TemplateAstPath(info.templateAst, position);
+  const path = findTemplateAstAt(info.templateAst, position);
   const mostSpecific = path.tail;
+  const dinfo = diagnosticInfoFromTemplateInfo(info);
   if (mostSpecific) {
     const visitor =
-        new ExpressionVisitor(info, position, attr, () => getExpressionScope(info, path, false));
+        new ExpressionVisitor(info, position, attr, () => getExpressionScope(dinfo, path, false));
     mostSpecific.visit(visitor, null);
     if (!visitor.result || !visitor.result.length) {
       // Try allwoing widening the path
-      const widerPath = new TemplateAstPath(info.templateAst, position, /* allowWidening */ true);
+      const widerPath = findTemplateAstAt(info.templateAst, position, /* allowWidening */ true);
       if (widerPath.tail) {
         const widerVisitor = new ExpressionVisitor(
-            info, position, attr, () => getExpressionScope(info, widerPath, false));
+            info, position, attr, () => getExpressionScope(dinfo, widerPath, false));
         widerPath.tail.visit(widerVisitor, null);
         return widerVisitor.result;
       }
@@ -209,15 +211,16 @@ function attributeValueCompletions(
   }
 }
 
-function elementCompletions(info: TemplateInfo, path: HtmlAstPath): Completions|undefined {
+function elementCompletions(info: TemplateInfo, path: AstPath<HtmlAst>): Completions|undefined {
   let htmlNames = elementNames().filter(name => !(name in hiddenHtmlElements));
 
   // Collect the elements referenced by the selectors
-  let directiveElements =
-      getSelectors(info).selectors.map(selector => selector.element).filter(name => !!name);
+  let directiveElements = getSelectors(info)
+                              .selectors.map(selector => selector.element)
+                              .filter(name => !!name) as string[];
 
   let components =
-      directiveElements.map<Completion>(name => ({kind: 'component', name: name !, sort: name !}));
+      directiveElements.map<Completion>(name => ({kind: 'component', name, sort: name}));
   let htmlElements = htmlNames.map<Completion>(name => ({kind: 'element', name: name, sort: name}));
 
   // Return components and html elements
@@ -242,11 +245,12 @@ function entityCompletions(value: string, position: number): Completions|undefin
 
 function interpolationCompletions(info: TemplateInfo, position: number): Completions|undefined {
   // Look for an interpolation in at the position.
-  const templatePath = new TemplateAstPath(info.templateAst, position);
+  const templatePath = findTemplateAstAt(info.templateAst, position);
   const mostSpecific = templatePath.tail;
   if (mostSpecific) {
     let visitor = new ExpressionVisitor(
-        info, position, undefined, () => getExpressionScope(info, templatePath, false));
+        info, position, undefined,
+        () => getExpressionScope(diagnosticInfoFromTemplateInfo(info), templatePath, false));
     mostSpecific.visit(visitor, null);
     return uniqueByName(visitor.result);
   }
@@ -258,29 +262,29 @@ function interpolationCompletions(info: TemplateInfo, position: number): Complet
 // the attributes of an "a" element, not requesting completion in the a text element. This
 // code checks for this case and returns element completions if it is detected or undefined
 // if it is not.
-function voidElementAttributeCompletions(info: TemplateInfo, path: HtmlAstPath): Completions|
+function voidElementAttributeCompletions(info: TemplateInfo, path: AstPath<HtmlAst>): Completions|
     undefined {
   let tail = path.tail;
   if (tail instanceof Text) {
-    let match = tail.value.match(/<(\w(\w|\d|-)*:)?(\w(\w|\d|-)*)\s/) !;
+    let match = tail.value.match(/<(\w(\w|\d|-)*:)?(\w(\w|\d|-)*)\s/);
     // The position must be after the match, otherwise we are still in a place where elements
     // are expected (such as `<|a` or `<a|`; we only want attributes for `<a |` or after).
-    if (match && path.position >= match.index ! + match[0].length + tail.sourceSpan.start.offset) {
+    if (match &&
+        path.position >= (match.index || 0) + match[0].length + tail.sourceSpan.start.offset) {
       return attributeCompletionsForElement(info, match[3]);
     }
   }
 }
 
 class ExpressionVisitor extends NullTemplateVisitor {
+  private getExpressionScope: () => SymbolTable;
   result: Completions;
 
   constructor(
       private info: TemplateInfo, private position: number, private attr?: Attribute,
-      private getExpressionScope?: () => SymbolTable) {
+      getExpressionScope?: () => SymbolTable) {
     super();
-    if (!getExpressionScope) {
-      this.getExpressionScope = () => info.template.members;
-    }
+    this.getExpressionScope = getExpressionScope || (() => info.template.members);
   }
 
   visitDirectiveProperty(ast: BoundDirectivePropertyAst): void {
@@ -311,7 +315,8 @@ class ExpressionVisitor extends NullTemplateVisitor {
           this.info.expressionParser.parseTemplateBindings(key, this.attr.value, null);
 
       // find the template binding that contains the position
-      const valueRelativePosition = this.position - this.attr.valueSpan !.start.offset - 1;
+      if (!this.attr.valueSpan) return;
+      const valueRelativePosition = this.position - this.attr.valueSpan.start.offset - 1;
       const bindings = templateBindingResult.templateBindings;
       const binding =
           bindings.find(
@@ -340,10 +345,12 @@ class ExpressionVisitor extends NullTemplateVisitor {
           // We are after the '=' in a let clause. The valid values here are the members of the
           // template reference's type parameter.
           const directiveMetadata = selectorInfo.map.get(selector);
-          const contextTable =
-              this.info.template.query.getTemplateContext(directiveMetadata !.type.reference);
-          if (contextTable) {
-            this.result = this.symbolsToCompletions(contextTable.values());
+          if (directiveMetadata) {
+            const contextTable =
+                this.info.template.query.getTemplateContext(directiveMetadata.type.reference);
+            if (contextTable) {
+              this.result = this.symbolsToCompletions(contextTable.values());
+            }
           }
         } else if (binding.key && valueRelativePosition <= (binding.key.length - key.length)) {
           keyCompletions();
@@ -371,7 +378,7 @@ class ExpressionVisitor extends NullTemplateVisitor {
     const expressionPosition = this.position - ast.sourceSpan.start.offset;
     if (inSpan(expressionPosition, ast.value.span)) {
       const completions = getExpressionCompletions(
-          this.getExpressionScope !(), ast.value, expressionPosition, this.info.template.query);
+          this.getExpressionScope(), ast.value, expressionPosition, this.info.template.query);
       if (completions) {
         this.result = this.symbolsToCompletions(completions);
       }
@@ -380,8 +387,8 @@ class ExpressionVisitor extends NullTemplateVisitor {
 
   private attributeValueCompletions(value: AST, position?: number) {
     const symbols = getExpressionCompletions(
-        this.getExpressionScope !(), value,
-        position == null ? this.attributeValuePosition : position, this.info.template.query);
+        this.getExpressionScope(), value, position == null ? this.attributeValuePosition : position,
+        this.info.template.query);
     if (symbols) {
       this.result = this.symbolsToCompletions(symbols);
     }
@@ -393,12 +400,13 @@ class ExpressionVisitor extends NullTemplateVisitor {
   }
 
   private get attributeValuePosition() {
-    return this.position - this.attr !.valueSpan !.start.offset - 1;
+    if (this.attr && this.attr.valueSpan) {
+      return this.position - this.attr.valueSpan.start.offset - 1;
+    }
+    return 0;
   }
 }
 
-
-
 function getSourceText(template: TemplateSource, span: Span): string {
   return template.source.substring(span.start, span.end);
 }
diff --git a/packages/language-service/src/diagnostics.ts b/packages/language-service/src/diagnostics.ts
index fd84836862..83a37efef3 100644
--- a/packages/language-service/src/diagnostics.ts
+++ b/packages/language-service/src/diagnostics.ts
@@ -6,14 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AST, AttrAst, Attribute, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, CompileDirectiveMetadata, CompileDirectiveSummary, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgAnalyzedModules, NgContentAst, ReferenceAst, StaticSymbol, TemplateAst, TemplateAstVisitor, TextAst, VariableAst, templateVisitAll} from '@angular/compiler';
+import {NgAnalyzedModules, StaticSymbol} from '@angular/compiler';
+import {DiagnosticTemplateInfo, getTemplateExpressionDiagnostics} from '@angular/compiler-cli';
 
-import {AstResult, SelectorInfo, TemplateInfo} from './common';
-import {getExpressionDiagnostics, getExpressionScope} from './expressions';
-import {HtmlAstPath} from './html_path';
-import {NullTemplateVisitor, TemplateAstChildVisitor, TemplateAstPath} from './template_path';
-import {Declaration, Declarations, Diagnostic, DiagnosticKind, Diagnostics, Span, SymbolTable, TemplateSource} from './types';
-import {getSelectors, hasTemplateReference, offsetSpan, spanOf} from './utils';
+import {AstResult} from './common';
+import {Declarations, Diagnostic, DiagnosticKind, Diagnostics, Span, TemplateSource} from './types';
+import {offsetSpan, spanOf} from './utils';
 
 export interface AstProvider {
   getTemplateAst(template: TemplateSource, fileName: string): AstResult;
@@ -29,11 +27,18 @@ export function getTemplateDiagnostics(
         results.push(...ast.parseErrors.map<Diagnostic>(
             e => ({
               kind: DiagnosticKind.Error,
-              span: offsetSpan(spanOf(e.span) !, template.span.start),
+              span: offsetSpan(spanOf(e.span), template.span.start),
               message: e.msg
             })));
-      } else if (ast.templateAst) {
-        const expressionDiagnostics = getTemplateExpressionDiagnostics(template, ast);
+      } else if (ast.templateAst && ast.htmlAst) {
+        const info: DiagnosticTemplateInfo = {
+          templateAst: ast.templateAst,
+          htmlAst: ast.htmlAst,
+          offset: template.span.start,
+          query: template.query,
+          members: template.members
+        };
+        const expressionDiagnostics = getTemplateExpressionDiagnostics(info);
         results.push(...expressionDiagnostics);
       }
       if (ast.errors) {
@@ -88,162 +93,3 @@ export function getDeclarationDiagnostics(
 
   return results;
 }
-
-function getTemplateExpressionDiagnostics(
-    template: TemplateSource, astResult: AstResult): Diagnostics {
-  const info: TemplateInfo = {
-    template,
-    htmlAst: astResult.htmlAst !,
-    directive: astResult.directive !,
-    directives: astResult.directives !,
-    pipes: astResult.pipes !,
-    templateAst: astResult.templateAst !,
-    expressionParser: astResult.expressionParser !
-  };
-  const visitor = new ExpressionDiagnosticsVisitor(
-      info, (path: TemplateAstPath, includeEvent: boolean) =>
-                getExpressionScope(info, path, includeEvent));
-  templateVisitAll(visitor, astResult.templateAst !);
-  return visitor.diagnostics;
-}
-
-class ExpressionDiagnosticsVisitor extends TemplateAstChildVisitor {
-  private path: TemplateAstPath;
-  private directiveSummary: CompileDirectiveSummary;
-
-  diagnostics: Diagnostics = [];
-
-  constructor(
-      private info: TemplateInfo,
-      private getExpressionScope: (path: TemplateAstPath, includeEvent: boolean) => SymbolTable) {
-    super();
-    this.path = new TemplateAstPath([], 0);
-  }
-
-  visitDirective(ast: DirectiveAst, context: any): any {
-    // Override the default child visitor to ignore the host properties of a directive.
-    if (ast.inputs && ast.inputs.length) {
-      templateVisitAll(this, ast.inputs, context);
-    }
-  }
-
-  visitBoundText(ast: BoundTextAst): void {
-    this.push(ast);
-    this.diagnoseExpression(ast.value, ast.sourceSpan.start.offset, false);
-    this.pop();
-  }
-
-  visitDirectiveProperty(ast: BoundDirectivePropertyAst): void {
-    this.push(ast);
-    this.diagnoseExpression(ast.value, this.attributeValueLocation(ast), false);
-    this.pop();
-  }
-
-  visitElementProperty(ast: BoundElementPropertyAst): void {
-    this.push(ast);
-    this.diagnoseExpression(ast.value, this.attributeValueLocation(ast), false);
-    this.pop();
-  }
-
-  visitEvent(ast: BoundEventAst): void {
-    this.push(ast);
-    this.diagnoseExpression(ast.handler, this.attributeValueLocation(ast), true);
-    this.pop();
-  }
-
-  visitVariable(ast: VariableAst): void {
-    const directive = this.directiveSummary;
-    if (directive && ast.value) {
-      const context = this.info.template.query.getTemplateContext(directive.type.reference) !;
-      if (context && !context.has(ast.value)) {
-        if (ast.value === '$implicit') {
-          this.reportError(
-              'The template context does not have an implicit value', spanOf(ast.sourceSpan) !);
-        } else {
-          this.reportError(
-              `The template context does not defined a member called '${ast.value}'`,
-              spanOf(ast.sourceSpan) !);
-        }
-      }
-    }
-  }
-
-  visitElement(ast: ElementAst, context: any): void {
-    this.push(ast);
-    super.visitElement(ast, context);
-    this.pop();
-  }
-
-  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
-    const previousDirectiveSummary = this.directiveSummary;
-
-    this.push(ast);
-
-    // Find directive that refernces this template
-    this.directiveSummary =
-        ast.directives.map(d => d.directive).find(d => hasTemplateReference(d.type)) !;
-
-    // Process children
-    super.visitEmbeddedTemplate(ast, context);
-
-    this.pop();
-
-    this.directiveSummary = previousDirectiveSummary;
-  }
-
-  private attributeValueLocation(ast: TemplateAst) {
-    const path = new HtmlAstPath(this.info.htmlAst, ast.sourceSpan.start.offset);
-    const last = path.tail;
-    if (last instanceof Attribute && last.valueSpan) {
-      // Add 1 for the quote.
-      return last.valueSpan.start.offset + 1;
-    }
-    return ast.sourceSpan.start.offset;
-  }
-
-  private diagnoseExpression(ast: AST, offset: number, includeEvent: boolean) {
-    const scope = this.getExpressionScope(this.path, includeEvent);
-    this.diagnostics.push(
-        ...getExpressionDiagnostics(scope, ast, this.info.template.query, {
-          event: includeEvent
-        }).map(d => ({
-                 span: offsetSpan(d.ast.span, offset + this.info.template.span.start),
-                 kind: d.kind,
-                 message: d.message
-               })));
-  }
-
-  private push(ast: TemplateAst) { this.path.push(ast); }
-
-  private pop() { this.path.pop(); }
-
-  private _selectors: SelectorInfo;
-  private selectors(): SelectorInfo {
-    let result = this._selectors;
-    if (!result) {
-      this._selectors = result = getSelectors(this.info);
-    }
-    return result;
-  }
-
-  private findElement(position: number): Element|undefined {
-    const htmlPath = new HtmlAstPath(this.info.htmlAst, position);
-    if (htmlPath.tail instanceof Element) {
-      return htmlPath.tail;
-    }
-  }
-
-  private reportError(message: string, span: Span) {
-    this.diagnostics.push({
-      span: offsetSpan(span, this.info.template.span.start),
-      kind: DiagnosticKind.Error, message
-    });
-  }
-
-  private reportWarning(message: string, span: Span) {
-    this.diagnostics.push({
-      span: offsetSpan(span, this.info.template.span.start),
-      kind: DiagnosticKind.Warning, message
-    });
-  }
-}
diff --git a/packages/language-service/src/expressions.ts b/packages/language-service/src/expressions.ts
index 3d6b567a3f..9af51ec457 100644
--- a/packages/language-service/src/expressions.ts
+++ b/packages/language-service/src/expressions.ts
@@ -6,27 +6,39 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AST, ASTWithSource, AstVisitor, Binary, BindingPipe, Chain, Conditional, ElementAst, EmbeddedTemplateAst, FunctionCall, ImplicitReceiver, Interpolation, KeyedRead, KeyedWrite, LiteralArray, LiteralMap, LiteralPrimitive, MethodCall, PrefixNot, PropertyRead, PropertyWrite, Quote, ReferenceAst, SafeMethodCall, SafePropertyRead, StaticSymbol, TemplateAst, identifierName, templateVisitAll, tokenReference} from '@angular/compiler';
+import {AST, ASTWithSource, AstPath as AstPathBase, NullAstVisitor, visitAstChildren} from '@angular/compiler';
+import {AstType} from '@angular/compiler-cli';
 
-import {AstPath as AstPathBase} from './ast_path';
-import {TemplateInfo} from './common';
-import {TemplateAstChildVisitor, TemplateAstPath} from './template_path';
-import {BuiltinType, CompletionKind, Definition, DiagnosticKind, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable} from './types';
-import {inSpan, spanOf} from './utils';
+import {BuiltinType, Span, Symbol, SymbolQuery, SymbolTable} from './types';
+import {inSpan} from './utils';
 
-export interface ExpressionDiagnosticsContext { event?: boolean; }
+type AstPath = AstPathBase<AST>;
 
-export function getExpressionDiagnostics(
-    scope: SymbolTable, ast: AST, query: SymbolQuery,
-    context: ExpressionDiagnosticsContext = {}): TypeDiagnostic[] {
-  const analyzer = new AstType(scope, query, context);
-  analyzer.getDiagnostics(ast);
-  return analyzer.diagnostics;
+function findAstAt(ast: AST, position: number, excludeEmpty: boolean = false): AstPath {
+  const path: AST[] = [];
+  const visitor = new class extends NullAstVisitor {
+    visit(ast: AST) {
+      if ((!excludeEmpty || ast.span.start < ast.span.end) && inSpan(position, ast.span)) {
+        path.push(ast);
+        visitAstChildren(ast, this);
+      }
+    }
+  };
+
+  // We never care about the ASTWithSource node and its visit() method calls its ast's visit so
+  // the visit() method above would never see it.
+  if (ast instanceof ASTWithSource) {
+    ast = ast.ast;
+  }
+
+  visitor.visit(ast);
+
+  return new AstPathBase<AST>(path, position);
 }
 
 export function getExpressionCompletions(
     scope: SymbolTable, ast: AST, position: number, query: SymbolQuery): Symbol[]|undefined {
-  const path = new AstPath(ast, position);
+  const path = findAstAt(ast, position);
   if (path.empty) return undefined;
   const tail = path.tail !;
   let result: SymbolTable|undefined = scope;
@@ -57,6 +69,7 @@ export function getExpressionCompletions(
       }
     },
     visitPrefixNot(ast) {},
+    visitNonNullAssert(ast) {},
     visitPropertyRead(ast) {
       const receiverType = getType(ast.receiver);
       result = receiverType ? receiverType.members() : scope;
@@ -85,7 +98,7 @@ export function getExpressionCompletions(
 export function getExpressionSymbol(
     scope: SymbolTable, ast: AST, position: number,
     query: SymbolQuery): {symbol: Symbol, span: Span}|undefined {
-  const path = new AstPath(ast, position, /* excludeEmpty */ true);
+  const path = findAstAt(ast, position, /* excludeEmpty */ true);
   if (path.empty) return undefined;
   const tail = path.tail !;
 
@@ -126,6 +139,7 @@ export function getExpressionSymbol(
       }
     },
     visitPrefixNot(ast) {},
+    visitNonNullAssert(ast) {},
     visitPropertyRead(ast) {
       const receiverType = getType(ast.receiver);
       symbol = receiverType && receiverType.members().get(ast.name);
@@ -153,633 +167,3 @@ export function getExpressionSymbol(
     return {symbol, span};
   }
 }
-
-interface ExpressionVisitor extends AstVisitor {
-  visit?(ast: AST, context?: any): any;
-}
-
-
-// Consider moving to expression_parser/ast
-class NullVisitor implements ExpressionVisitor {
-  visitBinary(ast: Binary): void {}
-  visitChain(ast: Chain): void {}
-  visitConditional(ast: Conditional): void {}
-  visitFunctionCall(ast: FunctionCall): void {}
-  visitImplicitReceiver(ast: ImplicitReceiver): void {}
-  visitInterpolation(ast: Interpolation): void {}
-  visitKeyedRead(ast: KeyedRead): void {}
-  visitKeyedWrite(ast: KeyedWrite): void {}
-  visitLiteralArray(ast: LiteralArray): void {}
-  visitLiteralMap(ast: LiteralMap): void {}
-  visitLiteralPrimitive(ast: LiteralPrimitive): void {}
-  visitMethodCall(ast: MethodCall): void {}
-  visitPipe(ast: BindingPipe): void {}
-  visitPrefixNot(ast: PrefixNot): void {}
-  visitPropertyRead(ast: PropertyRead): void {}
-  visitPropertyWrite(ast: PropertyWrite): void {}
-  visitQuote(ast: Quote): void {}
-  visitSafeMethodCall(ast: SafeMethodCall): void {}
-  visitSafePropertyRead(ast: SafePropertyRead): void {}
-}
-
-export class TypeDiagnostic {
-  constructor(public kind: DiagnosticKind, public message: string, public ast: AST) {}
-}
-
-// AstType calculatetype of the ast given AST element.
-class AstType implements ExpressionVisitor {
-  public diagnostics: TypeDiagnostic[];
-
-  constructor(
-      private scope: SymbolTable, private query: SymbolQuery,
-      private context: ExpressionDiagnosticsContext) {}
-
-  getType(ast: AST): Symbol { return ast.visit(this); }
-
-  getDiagnostics(ast: AST): TypeDiagnostic[] {
-    this.diagnostics = [];
-    const type: Symbol = ast.visit(this);
-    if (this.context.event && type.callable) {
-      this.reportWarning('Unexpected callable expression. Expected a method call', ast);
-    }
-    return this.diagnostics;
-  }
-
-  visitBinary(ast: Binary): Symbol {
-    // Treat undefined and null as other.
-    function normalize(kind: BuiltinType, other: BuiltinType): BuiltinType {
-      switch (kind) {
-        case BuiltinType.Undefined:
-        case BuiltinType.Null:
-          return normalize(other, BuiltinType.Other);
-      }
-      return kind;
-    }
-
-    const leftType = this.getType(ast.left);
-    const rightType = this.getType(ast.right);
-    const leftRawKind = this.query.getTypeKind(leftType);
-    const rightRawKind = this.query.getTypeKind(rightType);
-    const leftKind = normalize(leftRawKind, rightRawKind);
-    const rightKind = normalize(rightRawKind, leftRawKind);
-
-    // The following swtich implements operator typing similar to the
-    // type production tables in the TypeScript specification.
-    // https://github.com/Microsoft/TypeScript/blob/v1.8.10/doc/spec.md#4.19
-    const operKind = leftKind << 8 | rightKind;
-    switch (ast.operation) {
-      case '*':
-      case '/':
-      case '%':
-      case '-':
-      case '<<':
-      case '>>':
-      case '>>>':
-      case '&':
-      case '^':
-      case '|':
-        switch (operKind) {
-          case BuiltinType.Any << 8 | BuiltinType.Any:
-          case BuiltinType.Number << 8 | BuiltinType.Any:
-          case BuiltinType.Any << 8 | BuiltinType.Number:
-          case BuiltinType.Number << 8 | BuiltinType.Number:
-            return this.query.getBuiltinType(BuiltinType.Number);
-          default:
-            let errorAst = ast.left;
-            switch (leftKind) {
-              case BuiltinType.Any:
-              case BuiltinType.Number:
-                errorAst = ast.right;
-                break;
-            }
-            return this.reportError('Expected a numeric type', errorAst);
-        }
-      case '+':
-        switch (operKind) {
-          case BuiltinType.Any << 8 | BuiltinType.Any:
-          case BuiltinType.Any << 8 | BuiltinType.Boolean:
-          case BuiltinType.Any << 8 | BuiltinType.Number:
-          case BuiltinType.Any << 8 | BuiltinType.Other:
-          case BuiltinType.Boolean << 8 | BuiltinType.Any:
-          case BuiltinType.Number << 8 | BuiltinType.Any:
-          case BuiltinType.Other << 8 | BuiltinType.Any:
-            return this.anyType;
-          case BuiltinType.Any << 8 | BuiltinType.String:
-          case BuiltinType.Boolean << 8 | BuiltinType.String:
-          case BuiltinType.Number << 8 | BuiltinType.String:
-          case BuiltinType.String << 8 | BuiltinType.Any:
-          case BuiltinType.String << 8 | BuiltinType.Boolean:
-          case BuiltinType.String << 8 | BuiltinType.Number:
-          case BuiltinType.String << 8 | BuiltinType.String:
-          case BuiltinType.String << 8 | BuiltinType.Other:
-          case BuiltinType.Other << 8 | BuiltinType.String:
-            return this.query.getBuiltinType(BuiltinType.String);
-          case BuiltinType.Number << 8 | BuiltinType.Number:
-            return this.query.getBuiltinType(BuiltinType.Number);
-          case BuiltinType.Boolean << 8 | BuiltinType.Number:
-          case BuiltinType.Other << 8 | BuiltinType.Number:
-            return this.reportError('Expected a number type', ast.left);
-          case BuiltinType.Number << 8 | BuiltinType.Boolean:
-          case BuiltinType.Number << 8 | BuiltinType.Other:
-            return this.reportError('Expected a number type', ast.right);
-          default:
-            return this.reportError('Expected operands to be a string or number type', ast);
-        }
-      case '>':
-      case '<':
-      case '<=':
-      case '>=':
-      case '==':
-      case '!=':
-      case '===':
-      case '!==':
-        switch (operKind) {
-          case BuiltinType.Any << 8 | BuiltinType.Any:
-          case BuiltinType.Any << 8 | BuiltinType.Boolean:
-          case BuiltinType.Any << 8 | BuiltinType.Number:
-          case BuiltinType.Any << 8 | BuiltinType.String:
-          case BuiltinType.Any << 8 | BuiltinType.Other:
-          case BuiltinType.Boolean << 8 | BuiltinType.Any:
-          case BuiltinType.Boolean << 8 | BuiltinType.Boolean:
-          case BuiltinType.Number << 8 | BuiltinType.Any:
-          case BuiltinType.Number << 8 | BuiltinType.Number:
-          case BuiltinType.String << 8 | BuiltinType.Any:
-          case BuiltinType.String << 8 | BuiltinType.String:
-          case BuiltinType.Other << 8 | BuiltinType.Any:
-          case BuiltinType.Other << 8 | BuiltinType.Other:
-            return this.query.getBuiltinType(BuiltinType.Boolean);
-          default:
-            return this.reportError('Expected the operants to be of similar type or any', ast);
-        }
-      case '&&':
-        return rightType;
-      case '||':
-        return this.query.getTypeUnion(leftType, rightType);
-    }
-
-    return this.reportError(`Unrecognized operator ${ast.operation}`, ast);
-  }
-
-  visitChain(ast: Chain) {
-    if (this.diagnostics) {
-      // If we are producing diagnostics, visit the children
-      visitChildren(ast, this);
-    }
-    // The type of a chain is always undefined.
-    return this.query.getBuiltinType(BuiltinType.Undefined);
-  }
-
-  visitConditional(ast: Conditional) {
-    // The type of a conditional is the union of the true and false conditions.
-    return this.query.getTypeUnion(this.getType(ast.trueExp), this.getType(ast.falseExp));
-  }
-
-  visitFunctionCall(ast: FunctionCall) {
-    // The type of a function call is the return type of the selected signature.
-    // The signature is selected based on the types of the arguments. Angular doesn't
-    // support contextual typing of arguments so this is simpler than TypeScript's
-    // version.
-    const args = ast.args.map(arg => this.getType(arg));
-    const target = this.getType(ast.target !);
-    if (!target || !target.callable) return this.reportError('Call target is not callable', ast);
-    const signature = target.selectSignature(args);
-    if (signature) return signature.result;
-    // TODO: Consider a better error message here.
-    return this.reportError('Unable no compatible signature found for call', ast);
-  }
-
-  visitImplicitReceiver(ast: ImplicitReceiver): Symbol {
-    const _this = this;
-    // Return a pseudo-symbol for the implicit receiver.
-    // The members of the implicit receiver are what is defined by the
-    // scope passed into this class.
-    return {
-      name: '$implict',
-      kind: 'component',
-      language: 'ng-template',
-      type: undefined,
-      container: undefined,
-      callable: false,
-      public: true,
-      definition: undefined,
-      members(): SymbolTable{return _this.scope;},
-      signatures(): Signature[]{return [];},
-      selectSignature(types): Signature | undefined{return undefined;},
-      indexed(argument): Symbol | undefined{return undefined;}
-    };
-  }
-
-  visitInterpolation(ast: Interpolation): Symbol {
-    // If we are producing diagnostics, visit the children.
-    if (this.diagnostics) {
-      visitChildren(ast, this);
-    }
-    return this.undefinedType;
-  }
-
-  visitKeyedRead(ast: KeyedRead): Symbol {
-    const targetType = this.getType(ast.obj);
-    const keyType = this.getType(ast.key);
-    const result = targetType.indexed(keyType);
-    return result || this.anyType;
-  }
-
-  visitKeyedWrite(ast: KeyedWrite): Symbol {
-    // The write of a type is the type of the value being written.
-    return this.getType(ast.value);
-  }
-
-  visitLiteralArray(ast: LiteralArray): Symbol {
-    // A type literal is an array type of the union of the elements
-    return this.query.getArrayType(
-        this.query.getTypeUnion(...ast.expressions.map(element => this.getType(element))));
-  }
-
-  visitLiteralMap(ast: LiteralMap): Symbol {
-    // If we are producing diagnostics, visit the children
-    if (this.diagnostics) {
-      visitChildren(ast, this);
-    }
-    // TODO: Return a composite type.
-    return this.anyType;
-  }
-
-  visitLiteralPrimitive(ast: LiteralPrimitive) {
-    // The type of a literal primitive depends on the value of the literal.
-    switch (ast.value) {
-      case true:
-      case false:
-        return this.query.getBuiltinType(BuiltinType.Boolean);
-      case null:
-        return this.query.getBuiltinType(BuiltinType.Null);
-      case undefined:
-        return this.query.getBuiltinType(BuiltinType.Undefined);
-      default:
-        switch (typeof ast.value) {
-          case 'string':
-            return this.query.getBuiltinType(BuiltinType.String);
-          case 'number':
-            return this.query.getBuiltinType(BuiltinType.Number);
-          default:
-            return this.reportError('Unrecognized primitive', ast);
-        }
-    }
-  }
-
-  visitMethodCall(ast: MethodCall) {
-    return this.resolveMethodCall(this.getType(ast.receiver), ast);
-  }
-
-  visitPipe(ast: BindingPipe) {
-    // The type of a pipe node is the return type of the pipe's transform method. The table returned
-    // by getPipes() is expected to contain symbols with the corresponding transform method type.
-    const pipe = this.query.getPipes().get(ast.name);
-    if (!pipe) return this.reportError(`No pipe by the name ${ast.name} found`, ast);
-    const expType = this.getType(ast.exp);
-    const signature =
-        pipe.selectSignature([expType].concat(ast.args.map(arg => this.getType(arg))));
-    if (!signature) return this.reportError('Unable to resolve signature for pipe invocation', ast);
-    return signature.result;
-  }
-
-  visitPrefixNot(ast: PrefixNot) {
-    // The type of a prefix ! is always boolean.
-    return this.query.getBuiltinType(BuiltinType.Boolean);
-  }
-
-  visitPropertyRead(ast: PropertyRead) {
-    return this.resolvePropertyRead(this.getType(ast.receiver), ast);
-  }
-
-  visitPropertyWrite(ast: PropertyWrite) {
-    // The type of a write is the type of the value being written.
-    return this.getType(ast.value);
-  }
-
-  visitQuote(ast: Quote) {
-    // The type of a quoted expression is any.
-    return this.query.getBuiltinType(BuiltinType.Any);
-  }
-
-  visitSafeMethodCall(ast: SafeMethodCall) {
-    return this.resolveMethodCall(this.query.getNonNullableType(this.getType(ast.receiver)), ast);
-  }
-
-  visitSafePropertyRead(ast: SafePropertyRead) {
-    return this.resolvePropertyRead(this.query.getNonNullableType(this.getType(ast.receiver)), ast);
-  }
-
-  private _anyType: Symbol;
-  private get anyType(): Symbol {
-    let result = this._anyType;
-    if (!result) {
-      result = this._anyType = this.query.getBuiltinType(BuiltinType.Any);
-    }
-    return result;
-  }
-
-  private _undefinedType: Symbol;
-  private get undefinedType(): Symbol {
-    let result = this._undefinedType;
-    if (!result) {
-      result = this._undefinedType = this.query.getBuiltinType(BuiltinType.Undefined);
-    }
-    return result;
-  }
-
-  private resolveMethodCall(receiverType: Symbol, ast: SafeMethodCall|MethodCall) {
-    if (this.isAny(receiverType)) {
-      return this.anyType;
-    }
-
-    // The type of a method is the selected methods result type.
-    const method = receiverType.members().get(ast.name);
-    if (!method) return this.reportError(`Unknown method ${ast.name}`, ast);
-    if (!method.type !.callable) return this.reportError(`Member ${ast.name} is not callable`, ast);
-    const signature = method.type !.selectSignature(ast.args.map(arg => this.getType(arg)));
-    if (!signature)
-      return this.reportError(`Unable to resolve signature for call of method ${ast.name}`, ast);
-    return signature.result;
-  }
-
-  private resolvePropertyRead(receiverType: Symbol, ast: SafePropertyRead|PropertyRead) {
-    if (this.isAny(receiverType)) {
-      return this.anyType;
-    }
-
-    // The type of a property read is the seelcted member's type.
-    const member = receiverType.members().get(ast.name);
-    if (!member) {
-      let receiverInfo = receiverType.name;
-      if (receiverInfo == '$implict') {
-        receiverInfo =
-            'The component declaration, template variable declarations, and element references do';
-      } else {
-        receiverInfo = `'${receiverInfo}' does`;
-      }
-      return this.reportError(
-          `Identifier '${ast.name}' is not defined. ${receiverInfo} not contain such a member`,
-          ast);
-    }
-    if (!member.public) {
-      let receiverInfo = receiverType.name;
-      if (receiverInfo == '$implict') {
-        receiverInfo = 'the component';
-      } else {
-        receiverInfo = `'${receiverInfo}'`;
-      }
-      this.reportWarning(
-          `Identifier '${ast.name}' refers to a private member of ${receiverInfo}`, ast);
-    }
-    return member.type;
-  }
-
-  private reportError(message: string, ast: AST): Symbol {
-    if (this.diagnostics) {
-      this.diagnostics.push(new TypeDiagnostic(DiagnosticKind.Error, message, ast));
-    }
-    return this.anyType;
-  }
-
-  private reportWarning(message: string, ast: AST): Symbol {
-    if (this.diagnostics) {
-      this.diagnostics.push(new TypeDiagnostic(DiagnosticKind.Warning, message, ast));
-    }
-    return this.anyType;
-  }
-
-  private isAny(symbol: Symbol): boolean {
-    return !symbol || this.query.getTypeKind(symbol) == BuiltinType.Any ||
-        (!!symbol.type && this.isAny(symbol.type));
-  }
-}
-
-class AstPath extends AstPathBase<AST> {
-  constructor(ast: AST, public position: number, excludeEmpty: boolean = false) {
-    super(new AstPathVisitor(position, excludeEmpty).buildPath(ast).path);
-  }
-}
-
-class AstPathVisitor extends NullVisitor {
-  public path: AST[] = [];
-
-  constructor(private position: number, private excludeEmpty: boolean) { super(); }
-
-  visit(ast: AST) {
-    if ((!this.excludeEmpty || ast.span.start < ast.span.end) && inSpan(this.position, ast.span)) {
-      this.path.push(ast);
-      visitChildren(ast, this);
-    }
-  }
-
-  buildPath(ast: AST): AstPathVisitor {
-    // We never care about the ASTWithSource node and its visit() method calls its ast's visit so
-    // the visit() method above would never see it.
-    if (ast instanceof ASTWithSource) {
-      ast = ast.ast;
-    }
-    this.visit(ast);
-    return this;
-  }
-}
-
-// TODO: Consider moving to expression_parser/ast
-function visitChildren(ast: AST, visitor: ExpressionVisitor) {
-  function visit(ast: AST) { visitor.visit && visitor.visit(ast) || ast.visit(visitor); }
-
-  function visitAll<T extends AST>(asts: T[]) { asts.forEach(visit); }
-
-  ast.visit({
-    visitBinary(ast) {
-      visit(ast.left);
-      visit(ast.right);
-    },
-    visitChain(ast) { visitAll(ast.expressions); },
-    visitConditional(ast) {
-      visit(ast.condition);
-      visit(ast.trueExp);
-      visit(ast.falseExp);
-    },
-    visitFunctionCall(ast) {
-      visit(ast.target !);
-      visitAll(ast.args);
-    },
-    visitImplicitReceiver(ast) {},
-    visitInterpolation(ast) { visitAll(ast.expressions); },
-    visitKeyedRead(ast) {
-      visit(ast.obj);
-      visit(ast.key);
-    },
-    visitKeyedWrite(ast) {
-      visit(ast.obj);
-      visit(ast.key);
-      visit(ast.obj);
-    },
-    visitLiteralArray(ast) { visitAll(ast.expressions); },
-    visitLiteralMap(ast) {},
-    visitLiteralPrimitive(ast) {},
-    visitMethodCall(ast) {
-      visit(ast.receiver);
-      visitAll(ast.args);
-    },
-    visitPipe(ast) {
-      visit(ast.exp);
-      visitAll(ast.args);
-    },
-    visitPrefixNot(ast) { visit(ast.expression); },
-    visitPropertyRead(ast) { visit(ast.receiver); },
-    visitPropertyWrite(ast) {
-      visit(ast.receiver);
-      visit(ast.value);
-    },
-    visitQuote(ast) {},
-    visitSafeMethodCall(ast) {
-      visit(ast.receiver);
-      visitAll(ast.args);
-    },
-    visitSafePropertyRead(ast) { visit(ast.receiver); },
-  });
-}
-
-export function getExpressionScope(
-    info: TemplateInfo, path: TemplateAstPath, includeEvent: boolean): SymbolTable {
-  let result = info.template.members;
-  const references = getReferences(info);
-  const variables = getVarDeclarations(info, path);
-  const events = getEventDeclaration(info, path, includeEvent);
-  if (references.length || variables.length || events.length) {
-    const referenceTable = info.template.query.createSymbolTable(references);
-    const variableTable = info.template.query.createSymbolTable(variables);
-    const eventsTable = info.template.query.createSymbolTable(events);
-    result =
-        info.template.query.mergeSymbolTable([result, referenceTable, variableTable, eventsTable]);
-  }
-  return result;
-}
-
-function getEventDeclaration(info: TemplateInfo, path: TemplateAstPath, includeEvent?: boolean) {
-  let result: SymbolDeclaration[] = [];
-  if (includeEvent) {
-    // TODO: Determine the type of the event parameter based on the Observable<T> or EventEmitter<T>
-    // of the event.
-    result = [{
-      name: '$event',
-      kind: 'variable',
-      type: info.template.query.getBuiltinType(BuiltinType.Any)
-    }];
-  }
-  return result;
-}
-
-function getReferences(info: TemplateInfo): SymbolDeclaration[] {
-  const result: SymbolDeclaration[] = [];
-
-  function processReferences(references: ReferenceAst[]) {
-    for (const reference of references) {
-      let type: Symbol = undefined !;
-      if (reference.value) {
-        type = info.template.query.getTypeSymbol(tokenReference(reference.value));
-      }
-      result.push({
-        name: reference.name,
-        kind: 'reference',
-        type: type || info.template.query.getBuiltinType(BuiltinType.Any),
-        get definition() { return getDefintionOf(info, reference); }
-      });
-    }
-  }
-
-  const visitor = new class extends TemplateAstChildVisitor {
-    visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
-      super.visitEmbeddedTemplate(ast, context);
-      processReferences(ast.references);
-    }
-    visitElement(ast: ElementAst, context: any): any {
-      super.visitElement(ast, context);
-      processReferences(ast.references);
-    }
-  };
-
-  templateVisitAll(visitor, info.templateAst);
-
-  return result;
-}
-
-function getVarDeclarations(info: TemplateInfo, path: TemplateAstPath): SymbolDeclaration[] {
-  const result: SymbolDeclaration[] = [];
-
-  let current = path.tail;
-  while (current) {
-    if (current instanceof EmbeddedTemplateAst) {
-      for (const variable of current.variables) {
-        const name = variable.name;
-
-        // Find the first directive with a context.
-        const context =
-            current.directives
-                .map(d => info.template.query.getTemplateContext(d.directive.type.reference))
-                .find(c => !!c);
-
-        // Determine the type of the context field referenced by variable.value.
-        let type: Symbol = undefined !;
-        if (context) {
-          const value = context.get(variable.value);
-          if (value) {
-            type = value.type !;
-            let kind = info.template.query.getTypeKind(type);
-            if (kind === BuiltinType.Any || kind == BuiltinType.Unbound) {
-              // The any type is not very useful here. For special cases, such as ngFor, we can do
-              // better.
-              type = refinedVariableType(type, info, current);
-            }
-          }
-        }
-        if (!type) {
-          type = info.template.query.getBuiltinType(BuiltinType.Any);
-        }
-        result.push({
-          name,
-          kind: 'variable', type, get definition() { return getDefintionOf(info, variable); }
-        });
-      }
-    }
-    current = path.parentOf(current);
-  }
-
-  return result;
-}
-
-function refinedVariableType(
-    type: Symbol, info: TemplateInfo, templateElement: EmbeddedTemplateAst): Symbol {
-  // Special case the ngFor directive
-  const ngForDirective = templateElement.directives.find(d => {
-    const name = identifierName(d.directive.type);
-    return name == 'NgFor' || name == 'NgForOf';
-  });
-  if (ngForDirective) {
-    const ngForOfBinding = ngForDirective.inputs.find(i => i.directiveName == 'ngForOf');
-    if (ngForOfBinding) {
-      const bindingType =
-          new AstType(info.template.members, info.template.query, {}).getType(ngForOfBinding.value);
-      if (bindingType) {
-        return info.template.query.getElementType(bindingType) !;
-      }
-    }
-  }
-
-  // We can't do better, just return the original type.
-  return type;
-}
-
-function getDefintionOf(info: TemplateInfo, ast: TemplateAst): Definition|undefined {
-  if (info.fileName) {
-    const templateOffset = info.template.span.start;
-    return [{
-      fileName: info.fileName,
-      span: {
-        start: ast.sourceSpan.start.offset + templateOffset,
-        end: ast.sourceSpan.end.offset + templateOffset
-      }
-    }];
-  }
-}
diff --git a/packages/language-service/src/html_info.ts b/packages/language-service/src/html_info.ts
index 8b13f6dbff..45f3f1bb0f 100644
--- a/packages/language-service/src/html_info.ts
+++ b/packages/language-service/src/html_info.ts
@@ -213,165 +213,166 @@ export function attributeType(element: string, attribute: string): string|string
   return compose(elements[element.toUpperCase()] || defaultAttributes)[attribute.toLowerCase()];
 }
 
-// This section is describes the DOM property surface of a DOM element and is dervided from
+// This section is describes the DOM property surface of a DOM element and is derivgulp formated
+// from
 // from the SCHEMA strings from the security context information. SCHEMA is copied here because
 // it would be an unnecessary risk to allow this array to be imported from the security context
 // schema registry.
-
-const SCHEMA:
-    string[] =
-        [
-          '[Element]|textContent,%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop',
-          '[HTMLElement]^[Element]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*beforecopy,*beforecut,*beforepaste,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*message,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*paste,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*search,*seeked,*seeking,*select,*selectstart,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate',
-          'abbr,address,article,aside,b,bdi,bdo,cite,code,dd,dfn,dt,em,figcaption,figure,footer,header,i,kbd,main,mark,nav,noscript,rb,rp,rt,rtc,ruby,s,samp,section,small,strong,sub,sup,u,var,wbr^[HTMLElement]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*beforecopy,*beforecut,*beforepaste,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*message,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*paste,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*search,*seeked,*seeking,*select,*selectstart,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate',
-          'media^[HTMLElement]|!autoplay,!controls,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,#playbackRate,preload,src,%srcObject,#volume',
-          ':svg:^[HTMLElement]|*abort,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,%style,#tabIndex',
-          ':svg:graphics^:svg:|',
-          ':svg:animation^:svg:|*begin,*end,*repeat',
-          ':svg:geometry^:svg:|',
-          ':svg:componentTransferFunction^:svg:|',
-          ':svg:gradient^:svg:|',
-          ':svg:textContent^:svg:graphics|',
-          ':svg:textPositioning^:svg:textContent|',
-          'a^[HTMLElement]|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,referrerPolicy,rel,rev,search,shape,target,text,type,username',
-          'area^[HTMLElement]|alt,coords,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,referrerPolicy,search,shape,target,username',
-          'audio^media|',
-          'br^[HTMLElement]|clear',
-          'base^[HTMLElement]|href,target',
-          'body^[HTMLElement]|aLink,background,bgColor,link,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,text,vLink',
-          'button^[HTMLElement]|!autofocus,!disabled,formAction,formEnctype,formMethod,!formNoValidate,formTarget,name,type,value',
-          'canvas^[HTMLElement]|#height,#width',
-          'content^[HTMLElement]|select',
-          'dl^[HTMLElement]|!compact',
-          'datalist^[HTMLElement]|',
-          'details^[HTMLElement]|!open',
-          'dialog^[HTMLElement]|!open,returnValue',
-          'dir^[HTMLElement]|!compact',
-          'div^[HTMLElement]|align',
-          'embed^[HTMLElement]|align,height,name,src,type,width',
-          'fieldset^[HTMLElement]|!disabled,name',
-          'font^[HTMLElement]|color,face,size',
-          'form^[HTMLElement]|acceptCharset,action,autocomplete,encoding,enctype,method,name,!noValidate,target',
-          'frame^[HTMLElement]|frameBorder,longDesc,marginHeight,marginWidth,name,!noResize,scrolling,src',
-          'frameset^[HTMLElement]|cols,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,rows',
-          'hr^[HTMLElement]|align,color,!noShade,size,width',
-          'head^[HTMLElement]|',
-          'h1,h2,h3,h4,h5,h6^[HTMLElement]|align',
-          'html^[HTMLElement]|version',
-          'iframe^[HTMLElement]|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,referrerPolicy,%sandbox,scrolling,src,srcdoc,width',
-          'img^[HTMLElement]|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,referrerPolicy,sizes,src,srcset,useMap,#vspace,#width',
-          'input^[HTMLElement]|accept,align,alt,autocapitalize,autocomplete,!autofocus,!checked,!defaultChecked,defaultValue,dirName,!disabled,%files,formAction,formEnctype,formMethod,!formNoValidate,formTarget,#height,!incremental,!indeterminate,max,#maxLength,min,#minLength,!multiple,name,pattern,placeholder,!readOnly,!required,selectionDirection,#selectionEnd,#selectionStart,#size,src,step,type,useMap,value,%valueAsDate,#valueAsNumber,#width',
-          'keygen^[HTMLElement]|!autofocus,challenge,!disabled,keytype,name',
-          'li^[HTMLElement]|type,#value',
-          'label^[HTMLElement]|htmlFor',
-          'legend^[HTMLElement]|align',
-          'link^[HTMLElement]|as,charset,%crossOrigin,!disabled,href,hreflang,integrity,media,rel,%relList,rev,%sizes,target,type',
-          'map^[HTMLElement]|name',
-          'marquee^[HTMLElement]|behavior,bgColor,direction,height,#hspace,#loop,#scrollAmount,#scrollDelay,!trueSpeed,#vspace,width',
-          'menu^[HTMLElement]|!compact',
-          'meta^[HTMLElement]|content,httpEquiv,name,scheme',
-          'meter^[HTMLElement]|#high,#low,#max,#min,#optimum,#value',
-          'ins,del^[HTMLElement]|cite,dateTime',
-          'ol^[HTMLElement]|!compact,!reversed,#start,type',
-          'object^[HTMLElement]|align,archive,border,code,codeBase,codeType,data,!declare,height,#hspace,name,standby,type,useMap,#vspace,width',
-          'optgroup^[HTMLElement]|!disabled,label',
-          'option^[HTMLElement]|!defaultSelected,!disabled,label,!selected,text,value',
-          'output^[HTMLElement]|defaultValue,%htmlFor,name,value',
-          'p^[HTMLElement]|align',
-          'param^[HTMLElement]|name,type,value,valueType',
-          'picture^[HTMLElement]|',
-          'pre^[HTMLElement]|#width',
-          'progress^[HTMLElement]|#max,#value',
-          'q,blockquote,cite^[HTMLElement]|',
-          'script^[HTMLElement]|!async,charset,%crossOrigin,!defer,event,htmlFor,integrity,src,text,type',
-          'select^[HTMLElement]|!autofocus,!disabled,#length,!multiple,name,!required,#selectedIndex,#size,value',
-          'shadow^[HTMLElement]|',
-          'source^[HTMLElement]|media,sizes,src,srcset,type',
-          'span^[HTMLElement]|',
-          'style^[HTMLElement]|!disabled,media,type',
-          'caption^[HTMLElement]|align',
-          'th,td^[HTMLElement]|abbr,align,axis,bgColor,ch,chOff,#colSpan,headers,height,!noWrap,#rowSpan,scope,vAlign,width',
-          'col,colgroup^[HTMLElement]|align,ch,chOff,#span,vAlign,width',
-          'table^[HTMLElement]|align,bgColor,border,%caption,cellPadding,cellSpacing,frame,rules,summary,%tFoot,%tHead,width',
-          'tr^[HTMLElement]|align,bgColor,ch,chOff,vAlign',
-          'tfoot,thead,tbody^[HTMLElement]|align,ch,chOff,vAlign',
-          'template^[HTMLElement]|',
-          'textarea^[HTMLElement]|autocapitalize,!autofocus,#cols,defaultValue,dirName,!disabled,#maxLength,#minLength,name,placeholder,!readOnly,!required,#rows,selectionDirection,#selectionEnd,#selectionStart,value,wrap',
-          'title^[HTMLElement]|text',
-          'track^[HTMLElement]|!default,kind,label,src,srclang',
-          'ul^[HTMLElement]|!compact,type',
-          'unknown^[HTMLElement]|',
-          'video^media|#height,poster,#width',
-          ':svg:a^:svg:graphics|',
-          ':svg:animate^:svg:animation|',
-          ':svg:animateMotion^:svg:animation|',
-          ':svg:animateTransform^:svg:animation|',
-          ':svg:circle^:svg:geometry|',
-          ':svg:clipPath^:svg:graphics|',
-          ':svg:cursor^:svg:|',
-          ':svg:defs^:svg:graphics|',
-          ':svg:desc^:svg:|',
-          ':svg:discard^:svg:|',
-          ':svg:ellipse^:svg:geometry|',
-          ':svg:feBlend^:svg:|',
-          ':svg:feColorMatrix^:svg:|',
-          ':svg:feComponentTransfer^:svg:|',
-          ':svg:feComposite^:svg:|',
-          ':svg:feConvolveMatrix^:svg:|',
-          ':svg:feDiffuseLighting^:svg:|',
-          ':svg:feDisplacementMap^:svg:|',
-          ':svg:feDistantLight^:svg:|',
-          ':svg:feDropShadow^:svg:|',
-          ':svg:feFlood^:svg:|',
-          ':svg:feFuncA^:svg:componentTransferFunction|',
-          ':svg:feFuncB^:svg:componentTransferFunction|',
-          ':svg:feFuncG^:svg:componentTransferFunction|',
-          ':svg:feFuncR^:svg:componentTransferFunction|',
-          ':svg:feGaussianBlur^:svg:|',
-          ':svg:feImage^:svg:|',
-          ':svg:feMerge^:svg:|',
-          ':svg:feMergeNode^:svg:|',
-          ':svg:feMorphology^:svg:|',
-          ':svg:feOffset^:svg:|',
-          ':svg:fePointLight^:svg:|',
-          ':svg:feSpecularLighting^:svg:|',
-          ':svg:feSpotLight^:svg:|',
-          ':svg:feTile^:svg:|',
-          ':svg:feTurbulence^:svg:|',
-          ':svg:filter^:svg:|',
-          ':svg:foreignObject^:svg:graphics|',
-          ':svg:g^:svg:graphics|',
-          ':svg:image^:svg:graphics|',
-          ':svg:line^:svg:geometry|',
-          ':svg:linearGradient^:svg:gradient|',
-          ':svg:mpath^:svg:|',
-          ':svg:marker^:svg:|',
-          ':svg:mask^:svg:|',
-          ':svg:metadata^:svg:|',
-          ':svg:path^:svg:geometry|',
-          ':svg:pattern^:svg:|',
-          ':svg:polygon^:svg:geometry|',
-          ':svg:polyline^:svg:geometry|',
-          ':svg:radialGradient^:svg:gradient|',
-          ':svg:rect^:svg:geometry|',
-          ':svg:svg^:svg:graphics|#currentScale,#zoomAndPan',
-          ':svg:script^:svg:|type',
-          ':svg:set^:svg:animation|',
-          ':svg:stop^:svg:|',
-          ':svg:style^:svg:|!disabled,media,title,type',
-          ':svg:switch^:svg:graphics|',
-          ':svg:symbol^:svg:|',
-          ':svg:tspan^:svg:textPositioning|',
-          ':svg:text^:svg:textPositioning|',
-          ':svg:textPath^:svg:textContent|',
-          ':svg:title^:svg:|',
-          ':svg:use^:svg:graphics|',
-          ':svg:view^:svg:|#zoomAndPan',
-          'data^[HTMLElement]|value',
-          'menuitem^[HTMLElement]|type,label,icon,!disabled,!checked,radiogroup,!default',
-          'summary^[HTMLElement]|',
-          'time^[HTMLElement]|dateTime',
-        ];
+const SCHEMA: string[] = [
+  '[Element]|textContent,%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop,slot' +
+      /* added manually to avoid breaking changes */
+      ',*message,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored',
+  '[HTMLElement]^[Element]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*auxclick,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*gotpointercapture,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*lostpointercapture,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*pointercancel,*pointerdown,*pointerenter,*pointerleave,*pointermove,*pointerout,*pointerover,*pointerup,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,outerText,!spellcheck,%style,#tabIndex,title,!translate',
+  'abbr,address,article,aside,b,bdi,bdo,cite,code,dd,dfn,dt,em,figcaption,figure,footer,header,i,kbd,main,mark,nav,noscript,rb,rp,rt,rtc,ruby,s,samp,section,small,strong,sub,sup,u,var,wbr^[HTMLElement]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*auxclick,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*gotpointercapture,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*lostpointercapture,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*pointercancel,*pointerdown,*pointerenter,*pointerleave,*pointermove,*pointerout,*pointerover,*pointerup,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,outerText,!spellcheck,%style,#tabIndex,title,!translate',
+  'media^[HTMLElement]|!autoplay,!controls,%controlsList,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,*waitingforkey,#playbackRate,preload,src,%srcObject,#volume',
+  ':svg:^[HTMLElement]|*abort,*auxclick,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*gotpointercapture,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*lostpointercapture,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*pointercancel,*pointerdown,*pointerenter,*pointerleave,*pointermove,*pointerout,*pointerover,*pointerup,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,%style,#tabIndex',
+  ':svg:graphics^:svg:|',
+  ':svg:animation^:svg:|*begin,*end,*repeat',
+  ':svg:geometry^:svg:|',
+  ':svg:componentTransferFunction^:svg:|',
+  ':svg:gradient^:svg:|',
+  ':svg:textContent^:svg:graphics|',
+  ':svg:textPositioning^:svg:textContent|',
+  'a^[HTMLElement]|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,referrerPolicy,rel,rev,search,shape,target,text,type,username',
+  'area^[HTMLElement]|alt,coords,download,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,referrerPolicy,rel,search,shape,target,username',
+  'audio^media|',
+  'br^[HTMLElement]|clear',
+  'base^[HTMLElement]|href,target',
+  'body^[HTMLElement]|aLink,background,bgColor,link,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,text,vLink',
+  'button^[HTMLElement]|!autofocus,!disabled,formAction,formEnctype,formMethod,!formNoValidate,formTarget,name,type,value',
+  'canvas^[HTMLElement]|#height,#width',
+  'content^[HTMLElement]|select',
+  'dl^[HTMLElement]|!compact',
+  'datalist^[HTMLElement]|',
+  'details^[HTMLElement]|!open',
+  'dialog^[HTMLElement]|!open,returnValue',
+  'dir^[HTMLElement]|!compact',
+  'div^[HTMLElement]|align',
+  'embed^[HTMLElement]|align,height,name,src,type,width',
+  'fieldset^[HTMLElement]|!disabled,name',
+  'font^[HTMLElement]|color,face,size',
+  'form^[HTMLElement]|acceptCharset,action,autocomplete,encoding,enctype,method,name,!noValidate,target',
+  'frame^[HTMLElement]|frameBorder,longDesc,marginHeight,marginWidth,name,!noResize,scrolling,src',
+  'frameset^[HTMLElement]|cols,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,rows',
+  'hr^[HTMLElement]|align,color,!noShade,size,width',
+  'head^[HTMLElement]|',
+  'h1,h2,h3,h4,h5,h6^[HTMLElement]|align',
+  'html^[HTMLElement]|version',
+  'iframe^[HTMLElement]|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,referrerPolicy,%sandbox,scrolling,src,srcdoc,width',
+  'img^[HTMLElement]|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,referrerPolicy,sizes,src,srcset,useMap,#vspace,#width',
+  'input^[HTMLElement]|accept,align,alt,autocapitalize,autocomplete,!autofocus,!checked,!defaultChecked,defaultValue,dirName,!disabled,%files,formAction,formEnctype,formMethod,!formNoValidate,formTarget,#height,!incremental,!indeterminate,max,#maxLength,min,#minLength,!multiple,name,pattern,placeholder,!readOnly,!required,selectionDirection,#selectionEnd,#selectionStart,#size,src,step,type,useMap,value,%valueAsDate,#valueAsNumber,#width',
+  'li^[HTMLElement]|type,#value',
+  'label^[HTMLElement]|htmlFor',
+  'legend^[HTMLElement]|align',
+  'link^[HTMLElement]|as,charset,%crossOrigin,!disabled,href,hreflang,integrity,media,referrerPolicy,rel,%relList,rev,%sizes,target,type',
+  'map^[HTMLElement]|name',
+  'marquee^[HTMLElement]|behavior,bgColor,direction,height,#hspace,#loop,#scrollAmount,#scrollDelay,!trueSpeed,#vspace,width',
+  'menu^[HTMLElement]|!compact',
+  'meta^[HTMLElement]|content,httpEquiv,name,scheme',
+  'meter^[HTMLElement]|#high,#low,#max,#min,#optimum,#value',
+  'ins,del^[HTMLElement]|cite,dateTime',
+  'ol^[HTMLElement]|!compact,!reversed,#start,type',
+  'object^[HTMLElement]|align,archive,border,code,codeBase,codeType,data,!declare,height,#hspace,name,standby,type,useMap,#vspace,width',
+  'optgroup^[HTMLElement]|!disabled,label',
+  'option^[HTMLElement]|!defaultSelected,!disabled,label,!selected,text,value',
+  'output^[HTMLElement]|defaultValue,%htmlFor,name,value',
+  'p^[HTMLElement]|align',
+  'param^[HTMLElement]|name,type,value,valueType',
+  'picture^[HTMLElement]|',
+  'pre^[HTMLElement]|#width',
+  'progress^[HTMLElement]|#max,#value',
+  'q,blockquote,cite^[HTMLElement]|',
+  'script^[HTMLElement]|!async,charset,%crossOrigin,!defer,event,htmlFor,integrity,src,text,type',
+  'select^[HTMLElement]|!autofocus,!disabled,#length,!multiple,name,!required,#selectedIndex,#size,value',
+  'shadow^[HTMLElement]|',
+  'slot^[HTMLElement]|name',
+  'source^[HTMLElement]|media,sizes,src,srcset,type',
+  'span^[HTMLElement]|',
+  'style^[HTMLElement]|!disabled,media,type',
+  'caption^[HTMLElement]|align',
+  'th,td^[HTMLElement]|abbr,align,axis,bgColor,ch,chOff,#colSpan,headers,height,!noWrap,#rowSpan,scope,vAlign,width',
+  'col,colgroup^[HTMLElement]|align,ch,chOff,#span,vAlign,width',
+  'table^[HTMLElement]|align,bgColor,border,%caption,cellPadding,cellSpacing,frame,rules,summary,%tFoot,%tHead,width',
+  'tr^[HTMLElement]|align,bgColor,ch,chOff,vAlign',
+  'tfoot,thead,tbody^[HTMLElement]|align,ch,chOff,vAlign',
+  'template^[HTMLElement]|',
+  'textarea^[HTMLElement]|autocapitalize,!autofocus,#cols,defaultValue,dirName,!disabled,#maxLength,#minLength,name,placeholder,!readOnly,!required,#rows,selectionDirection,#selectionEnd,#selectionStart,value,wrap',
+  'title^[HTMLElement]|text',
+  'track^[HTMLElement]|!default,kind,label,src,srclang',
+  'ul^[HTMLElement]|!compact,type',
+  'unknown^[HTMLElement]|',
+  'video^media|#height,poster,#width',
+  ':svg:a^:svg:graphics|',
+  ':svg:animate^:svg:animation|',
+  ':svg:animateMotion^:svg:animation|',
+  ':svg:animateTransform^:svg:animation|',
+  ':svg:circle^:svg:geometry|',
+  ':svg:clipPath^:svg:graphics|',
+  ':svg:defs^:svg:graphics|',
+  ':svg:desc^:svg:|',
+  ':svg:discard^:svg:|',
+  ':svg:ellipse^:svg:geometry|',
+  ':svg:feBlend^:svg:|',
+  ':svg:feColorMatrix^:svg:|',
+  ':svg:feComponentTransfer^:svg:|',
+  ':svg:feComposite^:svg:|',
+  ':svg:feConvolveMatrix^:svg:|',
+  ':svg:feDiffuseLighting^:svg:|',
+  ':svg:feDisplacementMap^:svg:|',
+  ':svg:feDistantLight^:svg:|',
+  ':svg:feDropShadow^:svg:|',
+  ':svg:feFlood^:svg:|',
+  ':svg:feFuncA^:svg:componentTransferFunction|',
+  ':svg:feFuncB^:svg:componentTransferFunction|',
+  ':svg:feFuncG^:svg:componentTransferFunction|',
+  ':svg:feFuncR^:svg:componentTransferFunction|',
+  ':svg:feGaussianBlur^:svg:|',
+  ':svg:feImage^:svg:|',
+  ':svg:feMerge^:svg:|',
+  ':svg:feMergeNode^:svg:|',
+  ':svg:feMorphology^:svg:|',
+  ':svg:feOffset^:svg:|',
+  ':svg:fePointLight^:svg:|',
+  ':svg:feSpecularLighting^:svg:|',
+  ':svg:feSpotLight^:svg:|',
+  ':svg:feTile^:svg:|',
+  ':svg:feTurbulence^:svg:|',
+  ':svg:filter^:svg:|',
+  ':svg:foreignObject^:svg:graphics|',
+  ':svg:g^:svg:graphics|',
+  ':svg:image^:svg:graphics|',
+  ':svg:line^:svg:geometry|',
+  ':svg:linearGradient^:svg:gradient|',
+  ':svg:mpath^:svg:|',
+  ':svg:marker^:svg:|',
+  ':svg:mask^:svg:|',
+  ':svg:metadata^:svg:|',
+  ':svg:path^:svg:geometry|',
+  ':svg:pattern^:svg:|',
+  ':svg:polygon^:svg:geometry|',
+  ':svg:polyline^:svg:geometry|',
+  ':svg:radialGradient^:svg:gradient|',
+  ':svg:rect^:svg:geometry|',
+  ':svg:svg^:svg:graphics|#currentScale,#zoomAndPan',
+  ':svg:script^:svg:|type',
+  ':svg:set^:svg:animation|',
+  ':svg:stop^:svg:|',
+  ':svg:style^:svg:|!disabled,media,title,type',
+  ':svg:switch^:svg:graphics|',
+  ':svg:symbol^:svg:|',
+  ':svg:tspan^:svg:textPositioning|',
+  ':svg:text^:svg:textPositioning|',
+  ':svg:textPath^:svg:textContent|',
+  ':svg:title^:svg:|',
+  ':svg:use^:svg:graphics|',
+  ':svg:view^:svg:|#zoomAndPan',
+  'data^[HTMLElement]|value',
+  'keygen^[HTMLElement]|!autofocus,challenge,!disabled,form,keytype,name',
+  'menuitem^[HTMLElement]|type,label,icon,!disabled,!checked,radiogroup,!default',
+  'summary^[HTMLElement]|',
+  'time^[HTMLElement]|dateTime',
+  ':svg:cursor^:svg:|',
+];
 
 const attrToPropMap: {[name: string]: string} = <any>{
   'class': 'className',
diff --git a/packages/language-service/src/html_path.ts b/packages/language-service/src/html_path.ts
deleted file mode 100644
index 7cfd5ebf8e..0000000000
--- a/packages/language-service/src/html_path.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {Attribute, Comment, Element, Expansion, ExpansionCase, Node, Text, Visitor, visitAll} from '@angular/compiler';
-
-import {AstPath} from './ast_path';
-import {inSpan, spanOf} from './utils';
-
-export class HtmlAstPath extends AstPath<Node> {
-  constructor(ast: Node[], public position: number) { super(buildPath(ast, position)); }
-}
-
-function buildPath(ast: Node[], position: number): Node[] {
-  let visitor = new HtmlAstPathBuilder(position);
-  visitAll(visitor, ast);
-  return visitor.getPath();
-}
-
-export class ChildVisitor implements Visitor {
-  constructor(private visitor?: Visitor) {}
-
-  visitElement(ast: Element, context: any): any {
-    this.visitChildren(context, visit => {
-      visit(ast.attrs);
-      visit(ast.children);
-    });
-  }
-
-  visitAttribute(ast: Attribute, context: any): any {}
-  visitText(ast: Text, context: any): any {}
-  visitComment(ast: Comment, context: any): any {}
-
-  visitExpansion(ast: Expansion, context: any): any {
-    return this.visitChildren(context, visit => { visit(ast.cases); });
-  }
-
-  visitExpansionCase(ast: ExpansionCase, context: any): any {}
-
-  private visitChildren<T extends Node>(
-      context: any, cb: (visit: (<V extends Node>(children: V[]|undefined) => void)) => void) {
-    const visitor = this.visitor || this;
-    let results: any[][] = [];
-    function visit<T extends Node>(children: T[] | undefined) {
-      if (children) results.push(visitAll(visitor, children, context));
-    }
-    cb(visit);
-    return [].concat.apply([], results);
-  }
-}
-
-class HtmlAstPathBuilder extends ChildVisitor {
-  private path: Node[] = [];
-
-  constructor(private position: number) { super(); }
-
-  visit(ast: Node, context: any): any {
-    let span = spanOf(ast as any);
-    if (inSpan(this.position, span)) {
-      this.path.push(ast);
-    } else {
-      // Returning a value here will result in the children being skipped.
-      return true;
-    }
-  }
-
-  getPath(): Node[] { return this.path; }
-}
diff --git a/packages/language-service/src/language_service.ts b/packages/language-service/src/language_service.ts
index 36b60bb334..8e3daa1ae4 100644
--- a/packages/language-service/src/language_service.ts
+++ b/packages/language-service/src/language_service.ts
@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompileMetadataResolver, CompileNgModuleMetadata, CompilerConfig, DomElementSchemaRegistry, HtmlParser, I18NHtmlParser, Lexer, NgAnalyzedModules, Parser, TemplateParser} from '@angular/compiler';
+import {CompileMetadataResolver, CompileNgModuleMetadata, CompilePipeSummary, CompilerConfig, DomElementSchemaRegistry, HtmlParser, I18NHtmlParser, Lexer, NgAnalyzedModules, Parser, TemplateParser} from '@angular/compiler';
 
-import {AstResult, AttrInfo, TemplateInfo} from './common';
+import {AstResult, TemplateInfo} from './common';
 import {getTemplateCompletions} from './completions';
 import {getDefinition} from './definitions';
 import {getDeclarationDiagnostics, getTemplateDiagnostics} from './diagnostics';
 import {getHover} from './hover';
-import {Completion, CompletionKind, Completions, Declaration, Declarations, Definition, Diagnostic, DiagnosticKind, Diagnostics, Hover, LanguageService, LanguageServiceHost, Location, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable, TemplateSource, TemplateSources} from './types';
+import {Completions, Definition, Diagnostic, DiagnosticKind, Diagnostics, Hover, LanguageService, LanguageServiceHost, Pipes, Span, TemplateSource} from './types';
 
 
 /**
@@ -48,12 +48,12 @@ class LanguageServiceImpl implements LanguageService {
     return uniqueBySpan(results);
   }
 
-  getPipesAt(fileName: string, position: number): Pipes {
+  getPipesAt(fileName: string, position: number): CompilePipeSummary[] {
     let templateInfo = this.getTemplateAstAtPosition(fileName, position);
     if (templateInfo) {
-      return templateInfo.pipes.map(
-          pipeInfo => ({name: pipeInfo.name, symbol: pipeInfo.type.reference}));
+      return templateInfo.pipes;
     }
+    return [];
   }
 
   getCompletionsAt(fileName: string, position: number): Completions {
@@ -81,24 +81,25 @@ class LanguageServiceImpl implements LanguageService {
     let template = this.host.getTemplateAt(fileName, position);
     if (template) {
       let astResult = this.getTemplateAst(template, fileName);
-      if (astResult && astResult.htmlAst && astResult.templateAst)
+      if (astResult && astResult.htmlAst && astResult.templateAst && astResult.directive &&
+          astResult.directives && astResult.pipes && astResult.expressionParser)
         return {
           position,
           fileName,
           template,
           htmlAst: astResult.htmlAst,
-          directive: astResult.directive !,
-          directives: astResult.directives !,
-          pipes: astResult.pipes !,
+          directive: astResult.directive,
+          directives: astResult.directives,
+          pipes: astResult.pipes,
           templateAst: astResult.templateAst,
-          expressionParser: astResult.expressionParser !
+          expressionParser: astResult.expressionParser
         };
     }
     return undefined;
   }
 
   getTemplateAst(template: TemplateSource, contextFile: string): AstResult {
-    let result: AstResult = undefined !;
+    let result: AstResult|undefined = undefined;
     try {
       const resolvedMetadata =
           this.metadataResolver.getNonNormalizedDirectiveMetadata(template.type as any);
@@ -109,10 +110,11 @@ class LanguageServiceImpl implements LanguageService {
         const expressionParser = new Parser(new Lexer());
         const config = new CompilerConfig();
         const parser = new TemplateParser(
-            config, expressionParser, new DomElementSchemaRegistry(), htmlParser, null !, []);
+            config, this.host.resolver.getReflector(), expressionParser,
+            new DomElementSchemaRegistry(), htmlParser, null !, []);
         const htmlResult = htmlParser.parse(template.source, '', true);
         const analyzedModules = this.host.getAnalyzedModules();
-        let errors: Diagnostic[] = undefined !;
+        let errors: Diagnostic[]|undefined = undefined;
         let ngModule = analyzedModules.ngModuleByPipeOrDirective.get(template.type);
         if (!ngModule) {
           // Reported by the the declaration diagnostics.
@@ -121,13 +123,11 @@ class LanguageServiceImpl implements LanguageService {
         if (ngModule) {
           const resolvedDirectives = ngModule.transitiveModule.directives.map(
               d => this.host.resolver.getNonNormalizedDirectiveMetadata(d.reference));
-          const directives =
-              resolvedDirectives.filter(d => d !== null).map(d => d !.metadata.toSummary());
+          const directives = removeMissing(resolvedDirectives).map(d => d.metadata.toSummary());
           const pipes = ngModule.transitiveModule.pipes.map(
               p => this.host.resolver.getOrLoadPipeMetadata(p.reference).toSummary());
           const schemas = ngModule.schemas;
-          const parseResult = parser.tryParseHtml(
-              htmlResult, metadata, template.source, directives, pipes, schemas, '');
+          const parseResult = parser.tryParseHtml(htmlResult, metadata, directives, pipes, schemas);
           result = {
             htmlAst: htmlResult.rootNodes,
             templateAst: parseResult.templateAst,
@@ -143,10 +143,14 @@ class LanguageServiceImpl implements LanguageService {
       }
       result = {errors: [{kind: DiagnosticKind.Error, message: e.message, span}]};
     }
-    return result;
+    return result || {};
   }
 }
 
+function removeMissing<T>(values: (T | null | undefined)[]): T[] {
+  return values.filter(e => !!e) as T[];
+}
+
 function uniqueBySpan < T extends {
   span: Span;
 }
@@ -170,8 +174,8 @@ function uniqueBySpan < T extends {
   }
 }
 
-function findSuitableDefaultModule(modules: NgAnalyzedModules): CompileNgModuleMetadata {
-  let result: CompileNgModuleMetadata = undefined !;
+function findSuitableDefaultModule(modules: NgAnalyzedModules): CompileNgModuleMetadata|undefined {
+  let result: CompileNgModuleMetadata|undefined = undefined;
   let resultSize = 0;
   for (const module of modules.ngModules) {
     const moduleSize = module.transitiveModule.directives.length;
diff --git a/packages/language-service/src/locate_symbol.ts b/packages/language-service/src/locate_symbol.ts
index 5f55f2c48b..9dd47837bf 100644
--- a/packages/language-service/src/locate_symbol.ts
+++ b/packages/language-service/src/locate_symbol.ts
@@ -6,14 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AST, Attribute, BoundDirectivePropertyAst, BoundEventAst, ElementAst, TemplateAst, tokenReference} from '@angular/compiler';
+import {AST, Attribute, BoundDirectivePropertyAst, BoundEventAst, ElementAst, TemplateAst, TemplateAstPath, findNode, tokenReference} from '@angular/compiler';
+import {getExpressionScope} from '@angular/compiler-cli';
 
 import {TemplateInfo} from './common';
-import {getExpressionScope, getExpressionSymbol} from './expressions';
-import {HtmlAstPath} from './html_path';
-import {TemplateAstPath} from './template_path';
+import {getExpressionSymbol} from './expressions';
 import {Definition, Location, Span, Symbol, SymbolTable} from './types';
-import {inSpan, offsetSpan, spanOf} from './utils';
+import {diagnosticInfoFromTemplateInfo, findTemplateAstAt, inSpan, offsetSpan, spanOf} from './utils';
 
 export interface SymbolInfo {
   symbol: Symbol;
@@ -21,22 +20,26 @@ export interface SymbolInfo {
 }
 
 export function locateSymbol(info: TemplateInfo): SymbolInfo|undefined {
-  const templatePosition = info.position ! - info.template.span.start;
-  const path = new TemplateAstPath(info.templateAst, templatePosition);
+  if (!info.position) return undefined;
+  const templatePosition = info.position - info.template.span.start;
+  const path = findTemplateAstAt(info.templateAst, templatePosition);
   if (path.tail) {
-    let symbol: Symbol = undefined !;
-    let span: Span = undefined !;
+    let symbol: Symbol|undefined = undefined;
+    let span: Span|undefined = undefined;
     const attributeValueSymbol = (ast: AST, inEvent: boolean = false): boolean => {
       const attribute = findAttribute(info);
       if (attribute) {
         if (inSpan(templatePosition, spanOf(attribute.valueSpan))) {
-          const scope = getExpressionScope(info, path, inEvent);
-          const expressionOffset = attribute.valueSpan !.start.offset + 1;
-          const result = getExpressionSymbol(
-              scope, ast, templatePosition - expressionOffset, info.template.query);
-          if (result) {
-            symbol = result.symbol;
-            span = offsetSpan(result.span, expressionOffset);
+          const dinfo = diagnosticInfoFromTemplateInfo(info);
+          const scope = getExpressionScope(dinfo, path, inEvent);
+          if (attribute.valueSpan) {
+            const expressionOffset = attribute.valueSpan.start.offset + 1;
+            const result = getExpressionSymbol(
+                scope, ast, templatePosition - expressionOffset, info.template.query);
+            if (result) {
+              symbol = result.symbol;
+              span = offsetSpan(result.span, expressionOffset);
+            }
           }
           return true;
         }
@@ -52,28 +55,28 @@ export function locateSymbol(info: TemplateInfo): SymbolInfo|undefined {
             if (component) {
               symbol = info.template.query.getTypeSymbol(component.directive.type.reference);
               symbol = symbol && new OverrideKindSymbol(symbol, 'component');
-              span = spanOf(ast) !;
+              span = spanOf(ast);
             } else {
               // Find a directive that matches the element name
-              const directive =
-                  ast.directives.find(d => d.directive.selector !.indexOf(ast.name) >= 0);
+              const directive = ast.directives.find(
+                  d => d.directive.selector != null && d.directive.selector.indexOf(ast.name) >= 0);
               if (directive) {
                 symbol = info.template.query.getTypeSymbol(directive.directive.type.reference);
                 symbol = symbol && new OverrideKindSymbol(symbol, 'directive');
-                span = spanOf(ast) !;
+                span = spanOf(ast);
               }
             }
           },
           visitReference(ast) {
-            symbol = info.template.query.getTypeSymbol(tokenReference(ast.value));
-            span = spanOf(ast) !;
+            symbol = ast.value && info.template.query.getTypeSymbol(tokenReference(ast.value));
+            span = spanOf(ast);
           },
           visitVariable(ast) {},
           visitEvent(ast) {
             if (!attributeValueSymbol(ast.handler, /* inEvent */ true)) {
-              symbol = findOutputBinding(info, path, ast) !;
+              symbol = findOutputBinding(info, path, ast);
               symbol = symbol && new OverrideKindSymbol(symbol, 'event');
-              span = spanOf(ast) !;
+              span = spanOf(ast);
             }
           },
           visitElementProperty(ast) { attributeValueSymbol(ast.value); },
@@ -81,7 +84,8 @@ export function locateSymbol(info: TemplateInfo): SymbolInfo|undefined {
           visitBoundText(ast) {
             const expressionPosition = templatePosition - ast.sourceSpan.start.offset;
             if (inSpan(expressionPosition, ast.value.span)) {
-              const scope = getExpressionScope(info, path, /* includeEvent */ false);
+              const dinfo = diagnosticInfoFromTemplateInfo(info);
+              const scope = getExpressionScope(dinfo, path, /* includeEvent */ false);
               const result =
                   getExpressionSymbol(scope, ast.value, expressionPosition, info.template.query);
               if (result) {
@@ -93,12 +97,12 @@ export function locateSymbol(info: TemplateInfo): SymbolInfo|undefined {
           visitText(ast) {},
           visitDirective(ast) {
             symbol = info.template.query.getTypeSymbol(ast.directive.type.reference);
-            span = spanOf(ast) !;
+            span = spanOf(ast);
           },
           visitDirectiveProperty(ast) {
             if (!attributeValueSymbol(ast.value)) {
-              symbol = findInputBinding(info, path, ast) !;
-              span = spanOf(ast) !;
+              symbol = findInputBinding(info, path, ast);
+              span = spanOf(ast);
             }
           }
         },
@@ -110,9 +114,11 @@ export function locateSymbol(info: TemplateInfo): SymbolInfo|undefined {
 }
 
 function findAttribute(info: TemplateInfo): Attribute|undefined {
-  const templatePosition = info.position ! - info.template.span.start;
-  const path = new HtmlAstPath(info.htmlAst, templatePosition);
-  return path.first(Attribute);
+  if (info.position) {
+    const templatePosition = info.position - info.template.span.start;
+    const path = findNode(info.htmlAst, templatePosition);
+    return path.first(Attribute);
+  }
 }
 
 function findInputBinding(
@@ -179,6 +185,8 @@ class OverrideKindSymbol implements Symbol {
 
   get callable(): boolean { return this.sym.callable; }
 
+  get nullable(): boolean { return this.sym.nullable; }
+
   get definition(): Definition { return this.sym.definition; }
 
   members() { return this.sym.members(); }
diff --git a/packages/language-service/src/reflector_host.ts b/packages/language-service/src/reflector_host.ts
index 086cb48b69..9a84fb1e37 100644
--- a/packages/language-service/src/reflector_host.ts
+++ b/packages/language-service/src/reflector_host.ts
@@ -22,18 +22,24 @@ class ReflectorModuleModuleResolutionHost implements ts.ModuleResolutionHost {
     if (snapshot) {
       return snapshot.getText(0, snapshot.getLength());
     }
+
+    // Typescript readFile() declaration should be `readFile(fileName: string): string | undefined
     return undefined !;
   }
 
   directoryExists: (directoryName: string) => boolean;
 }
 
+// This reflector host's purpose is to first set verboseInvalidExpressions to true so the
+// reflector will collect errors instead of throwing, and second to all deferring the creation
+// of the program until it is actually needed.
 export class ReflectorHost extends CompilerHost {
   constructor(
       private getProgram: () => ts.Program, serviceHost: ts.LanguageServiceHost,
       options: AngularCompilerOptions) {
     super(
-        null !, options,
+        // The ancestor value for program is overridden below so passing null here is safe.
+        /* program */ null !, options,
         new ModuleResolutionHostAdapter(new ReflectorModuleModuleResolutionHost(serviceHost)),
         {verboseInvalidExpression: true});
   }
diff --git a/packages/language-service/src/template_path.ts b/packages/language-service/src/template_path.ts
deleted file mode 100644
index 07fca912ad..0000000000
--- a/packages/language-service/src/template_path.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgContentAst, ReferenceAst, TemplateAst, TemplateAstVisitor, TextAst, VariableAst, templateVisitAll} from '@angular/compiler';
-
-import {AstPath} from './ast_path';
-import {inSpan, isNarrower, spanOf} from './utils';
-
-export class TemplateAstPath extends AstPath<TemplateAst> {
-  constructor(ast: TemplateAst[], public position: number, allowWidening: boolean = false) {
-    super(buildTemplatePath(ast, position, allowWidening));
-  }
-}
-
-function buildTemplatePath(
-    ast: TemplateAst[], position: number, allowWidening: boolean = false): TemplateAst[] {
-  const visitor = new TemplateAstPathBuilder(position, allowWidening);
-  templateVisitAll(visitor, ast);
-  return visitor.getPath();
-}
-
-export class NullTemplateVisitor implements TemplateAstVisitor {
-  visitNgContent(ast: NgContentAst): void {}
-  visitEmbeddedTemplate(ast: EmbeddedTemplateAst): void {}
-  visitElement(ast: ElementAst): void {}
-  visitReference(ast: ReferenceAst): void {}
-  visitVariable(ast: VariableAst): void {}
-  visitEvent(ast: BoundEventAst): void {}
-  visitElementProperty(ast: BoundElementPropertyAst): void {}
-  visitAttr(ast: AttrAst): void {}
-  visitBoundText(ast: BoundTextAst): void {}
-  visitText(ast: TextAst): void {}
-  visitDirective(ast: DirectiveAst): void {}
-  visitDirectiveProperty(ast: BoundDirectivePropertyAst): void {}
-}
-
-export class TemplateAstChildVisitor implements TemplateAstVisitor {
-  constructor(private visitor?: TemplateAstVisitor) {}
-
-  // Nodes with children
-  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
-    return this.visitChildren(context, visit => {
-      visit(ast.attrs);
-      visit(ast.references);
-      visit(ast.variables);
-      visit(ast.directives);
-      visit(ast.providers);
-      visit(ast.children);
-    });
-  }
-
-  visitElement(ast: ElementAst, context: any): any {
-    return this.visitChildren(context, visit => {
-      visit(ast.attrs);
-      visit(ast.inputs);
-      visit(ast.outputs);
-      visit(ast.references);
-      visit(ast.directives);
-      visit(ast.providers);
-      visit(ast.children);
-    });
-  }
-
-  visitDirective(ast: DirectiveAst, context: any): any {
-    return this.visitChildren(context, visit => {
-      visit(ast.inputs);
-      visit(ast.hostProperties);
-      visit(ast.hostEvents);
-    });
-  }
-
-  // Terminal nodes
-  visitNgContent(ast: NgContentAst, context: any): any {}
-  visitReference(ast: ReferenceAst, context: any): any {}
-  visitVariable(ast: VariableAst, context: any): any {}
-  visitEvent(ast: BoundEventAst, context: any): any {}
-  visitElementProperty(ast: BoundElementPropertyAst, context: any): any {}
-  visitAttr(ast: AttrAst, context: any): any {}
-  visitBoundText(ast: BoundTextAst, context: any): any {}
-  visitText(ast: TextAst, context: any): any {}
-  visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any {}
-
-  protected visitChildren<T extends TemplateAst>(
-      context: any,
-      cb: (visit: (<V extends TemplateAst>(children: V[]|undefined) => void)) => void) {
-    const visitor = this.visitor || this;
-    let results: any[][] = [];
-    function visit<T extends TemplateAst>(children: T[] | undefined) {
-      if (children && children.length) results.push(templateVisitAll(visitor, children, context));
-    }
-    cb(visit);
-    return [].concat.apply([], results);
-  }
-}
-
-class TemplateAstPathBuilder extends TemplateAstChildVisitor {
-  private path: TemplateAst[] = [];
-
-  constructor(private position: number, private allowWidening: boolean) { super(); }
-
-  visit(ast: TemplateAst, context: any): any {
-    let span = spanOf(ast) !;
-    if (inSpan(this.position, span)) {
-      const len = this.path.length;
-      if (!len || this.allowWidening || isNarrower(span, spanOf(this.path[len - 1]) !)) {
-        this.path.push(ast);
-      }
-    } else {
-      // Returning a value here will result in the children being skipped.
-      return true;
-    }
-  }
-
-  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
-    return this.visitChildren(context, visit => {
-      // Ignore reference, variable and providers
-      visit(ast.attrs);
-      visit(ast.directives);
-      visit(ast.children);
-    });
-  }
-
-  visitElement(ast: ElementAst, context: any): any {
-    return this.visitChildren(context, visit => {
-      // Ingnore providers
-      visit(ast.attrs);
-      visit(ast.inputs);
-      visit(ast.outputs);
-      visit(ast.references);
-      visit(ast.directives);
-      visit(ast.children);
-    });
-  }
-
-  visitDirective(ast: DirectiveAst, context: any): any {
-    // Ignore the host properties of a directive
-    const result = this.visitChildren(context, visit => { visit(ast.inputs); });
-    // We never care about the diretive itself, just its inputs.
-    if (this.path[this.path.length - 1] == ast) {
-      this.path.pop();
-    }
-    return result;
-  }
-
-  getPath() { return this.path; }
-}
diff --git a/packages/language-service/src/ts_plugin.ts b/packages/language-service/src/ts_plugin.ts
index ae689bc5f4..e28cdab33e 100644
--- a/packages/language-service/src/ts_plugin.ts
+++ b/packages/language-service/src/ts_plugin.ts
@@ -12,10 +12,162 @@ import {createLanguageService} from './language_service';
 import {Completion, Diagnostic, LanguageService, LanguageServiceHost} from './types';
 import {TypeScriptServiceHost} from './typescript_host';
 
+const projectHostMap = new WeakMap<any, TypeScriptServiceHost>();
+
+export function getExternalFiles(project: any): string[]|undefined {
+  const host = projectHostMap.get(project);
+  if (host) {
+    return host.getTemplateReferences();
+  }
+}
+
+const angularOnlyResults = process.argv.indexOf('--angularOnlyResults') >= 0;
+
+function angularOnlyFilter(ls: ts.LanguageService): ts.LanguageService {
+  return {
+    cleanupSemanticCache: () => ls.cleanupSemanticCache(),
+    getSyntacticDiagnostics: fileName => <ts.Diagnostic[]>[],
+    getSemanticDiagnostics: fileName => <ts.Diagnostic[]>[],
+    getCompilerOptionsDiagnostics: () => <ts.Diagnostic[]>[],
+    getSyntacticClassifications: (fileName, span) => [],
+    getSemanticClassifications: (fileName, span) => [],
+    getEncodedSyntacticClassifications: (fileName, span) => <ts.Classifications><any>{undefined},
+    getEncodedSemanticClassifications: (fileName, span) => <ts.Classifications><any>undefined,
+    getCompletionsAtPosition: (fileName, position) => <ts.CompletionInfo><any>undefined,
+    getCompletionEntryDetails: (fileName, position, entryName) =>
+                                   <ts.CompletionEntryDetails><any>undefined,
+    getCompletionEntrySymbol: (fileName, position, entryName) => <ts.Symbol><any>undefined,
+    getQuickInfoAtPosition: (fileName, position) => <ts.QuickInfo><any>undefined,
+    getNameOrDottedNameSpan: (fileName, startPos, endPos) => <ts.TextSpan><any>undefined,
+    getBreakpointStatementAtPosition: (fileName, position) => <ts.TextSpan><any>undefined,
+    getSignatureHelpItems: (fileName, position) => <ts.SignatureHelpItems><any>undefined,
+    getRenameInfo: (fileName, position) => <ts.RenameInfo><any>undefined,
+    findRenameLocations: (fileName, position, findInStrings, findInComments) =>
+                             <ts.RenameLocation[]>[],
+    getDefinitionAtPosition: (fileName, position) => <ts.DefinitionInfo[]>[],
+    getTypeDefinitionAtPosition: (fileName, position) => <ts.DefinitionInfo[]>[],
+    getImplementationAtPosition: (fileName, position) => <ts.ImplementationLocation[]>[],
+    getReferencesAtPosition: (fileName: string, position: number) => <ts.ReferenceEntry[]>[],
+    findReferences: (fileName: string, position: number) => <ts.ReferencedSymbol[]>[],
+    getDocumentHighlights: (fileName, position, filesToSearch) => <ts.DocumentHighlights[]>[],
+    /** @deprecated */
+    getOccurrencesAtPosition: (fileName, position) => <ts.ReferenceEntry[]>[],
+    getNavigateToItems: searchValue => <ts.NavigateToItem[]>[],
+    getNavigationBarItems: fileName => <ts.NavigationBarItem[]>[],
+    getNavigationTree: fileName => <ts.NavigationTree><any>undefined,
+    getOutliningSpans: fileName => <ts.OutliningSpan[]>[],
+    getTodoComments: (fileName, descriptors) => <ts.TodoComment[]>[],
+    getBraceMatchingAtPosition: (fileName, position) => <ts.TextSpan[]>[],
+    getIndentationAtPosition: (fileName, position, options) => <number><any>undefined,
+    getFormattingEditsForRange: (fileName, start, end, options) => <ts.TextChange[]>[],
+    getFormattingEditsForDocument: (fileName, options) => <ts.TextChange[]>[],
+    getFormattingEditsAfterKeystroke: (fileName, position, key, options) => <ts.TextChange[]>[],
+    getDocCommentTemplateAtPosition: (fileName, position) => <ts.TextInsertion><any>undefined,
+    isValidBraceCompletionAtPosition: (fileName, position, openingBrace) => <boolean><any>undefined,
+    getCodeFixesAtPosition: (fileName, start, end, errorCodes) => <ts.CodeAction[]>[],
+    getEmitOutput: fileName => <ts.EmitOutput><any>undefined,
+    getProgram: () => ls.getProgram(),
+    dispose: () => ls.dispose()
+  };
+}
+
 export function create(info: any /* ts.server.PluginCreateInfo */): ts.LanguageService {
   // Create the proxy
   const proxy: ts.LanguageService = Object.create(null);
-  const oldLS: ts.LanguageService = info.languageService;
+  let oldLS: ts.LanguageService = info.languageService;
+
+  if (angularOnlyResults) {
+    oldLS = angularOnlyFilter(oldLS);
+  }
+
+  function tryCall<T>(fileName: string | undefined, callback: () => T): T {
+    if (fileName && !oldLS.getProgram().getSourceFile(fileName)) {
+      return undefined as any as T;
+    }
+    try {
+      return callback();
+    } catch (e) {
+      return undefined as any as T;
+    }
+  }
+
+  function tryFilenameCall<T>(m: (fileName: string) => T): (fileName: string) => T {
+    return fileName => tryCall(fileName, () => <T>(m.call(ls, fileName)));
+  }
+
+  function tryFilenameOneCall<T, P>(m: (fileName: string, p: P) => T): (filename: string, p: P) =>
+      T {
+    return (fileName, p) => tryCall(fileName, () => <T>(m.call(ls, fileName, p)));
+  }
+
+  function tryFilenameTwoCall<T, P1, P2>(m: (fileName: string, p1: P1, p2: P2) => T): (
+      filename: string, p1: P1, p2: P2) => T {
+    return (fileName, p1, p2) => tryCall(fileName, () => <T>(m.call(ls, fileName, p1, p2)));
+  }
+
+  function tryFilenameThreeCall<T, P1, P2, P3>(m: (fileName: string, p1: P1, p2: P2, p3: P3) => T):
+      (filename: string, p1: P1, p2: P2, p3: P3) => T {
+    return (fileName, p1, p2, p3) => tryCall(fileName, () => <T>(m.call(ls, fileName, p1, p2, p3)));
+  }
+
+  function tryFilenameFourCall<T, P1, P2, P3, P4>(
+      m: (fileName: string, p1: P1, p2: P2, p3: P3, p4: P4) =>
+          T): (fileName: string, p1: P1, p2: P2, p3: P3, p4: P4) => T {
+    return (fileName, p1, p2, p3, p4) =>
+               tryCall(fileName, () => <T>(m.call(ls, fileName, p1, p2, p3, p4)));
+  }
+
+  function typescriptOnly(ls: ts.LanguageService): ts.LanguageService {
+    return {
+      cleanupSemanticCache: () => ls.cleanupSemanticCache(),
+      getSyntacticDiagnostics: tryFilenameCall(ls.getSyntacticDiagnostics),
+      getSemanticDiagnostics: tryFilenameCall(ls.getSemanticDiagnostics),
+      getCompilerOptionsDiagnostics: () => ls.getCompilerOptionsDiagnostics(),
+      getSyntacticClassifications: tryFilenameOneCall(ls.getSemanticClassifications),
+      getSemanticClassifications: tryFilenameOneCall(ls.getSemanticClassifications),
+      getEncodedSyntacticClassifications: tryFilenameOneCall(ls.getEncodedSyntacticClassifications),
+      getEncodedSemanticClassifications: tryFilenameOneCall(ls.getEncodedSemanticClassifications),
+      getCompletionsAtPosition: tryFilenameOneCall(ls.getCompletionsAtPosition),
+      getCompletionEntryDetails: tryFilenameTwoCall(ls.getCompletionEntryDetails),
+      getCompletionEntrySymbol: tryFilenameTwoCall(ls.getCompletionEntrySymbol),
+      getQuickInfoAtPosition: tryFilenameOneCall(ls.getQuickInfoAtPosition),
+      getNameOrDottedNameSpan: tryFilenameTwoCall(ls.getNameOrDottedNameSpan),
+      getBreakpointStatementAtPosition: tryFilenameOneCall(ls.getBreakpointStatementAtPosition),
+      getSignatureHelpItems: tryFilenameOneCall(ls.getSignatureHelpItems),
+      getRenameInfo: tryFilenameOneCall(ls.getRenameInfo),
+      findRenameLocations: tryFilenameThreeCall(ls.findRenameLocations),
+      getDefinitionAtPosition: tryFilenameOneCall(ls.getDefinitionAtPosition),
+      getTypeDefinitionAtPosition: tryFilenameOneCall(ls.getTypeDefinitionAtPosition),
+      getImplementationAtPosition: tryFilenameOneCall(ls.getImplementationAtPosition),
+      getReferencesAtPosition: tryFilenameOneCall(ls.getReferencesAtPosition),
+      findReferences: tryFilenameOneCall(ls.findReferences),
+      getDocumentHighlights: tryFilenameTwoCall(ls.getDocumentHighlights),
+      /** @deprecated */
+      getOccurrencesAtPosition: tryFilenameOneCall(ls.getOccurrencesAtPosition),
+      getNavigateToItems:
+          (searchValue, maxResultCount, fileName, excludeDtsFiles) => tryCall(
+              fileName,
+              () => ls.getNavigateToItems(searchValue, maxResultCount, fileName, excludeDtsFiles)),
+      getNavigationBarItems: tryFilenameCall(ls.getNavigationBarItems),
+      getNavigationTree: tryFilenameCall(ls.getNavigationTree),
+      getOutliningSpans: tryFilenameCall(ls.getOutliningSpans),
+      getTodoComments: tryFilenameOneCall(ls.getTodoComments),
+      getBraceMatchingAtPosition: tryFilenameOneCall(ls.getBraceMatchingAtPosition),
+      getIndentationAtPosition: tryFilenameTwoCall(ls.getIndentationAtPosition),
+      getFormattingEditsForRange: tryFilenameThreeCall(ls.getFormattingEditsForRange),
+      getFormattingEditsForDocument: tryFilenameOneCall(ls.getFormattingEditsForDocument),
+      getFormattingEditsAfterKeystroke: tryFilenameThreeCall(ls.getFormattingEditsAfterKeystroke),
+      getDocCommentTemplateAtPosition: tryFilenameOneCall(ls.getDocCommentTemplateAtPosition),
+      isValidBraceCompletionAtPosition: tryFilenameTwoCall(ls.isValidBraceCompletionAtPosition),
+      getCodeFixesAtPosition: tryFilenameFourCall(ls.getCodeFixesAtPosition),
+      getEmitOutput: tryFilenameCall(ls.getEmitOutput),
+      getProgram: () => ls.getProgram(),
+      dispose: () => ls.dispose()
+    };
+  }
+
+  oldLS = typescriptOnly(oldLS);
+
   for (const k in oldLS) {
     (<any>proxy)[k] = function() { return (oldLS as any)[k].apply(oldLS, arguments); };
   }
@@ -25,31 +177,40 @@ export function create(info: any /* ts.server.PluginCreateInfo */): ts.LanguageS
   }
 
   function diagnosticToDiagnostic(d: Diagnostic, file: ts.SourceFile): ts.Diagnostic {
-    return {
+    const result = {
       file,
       start: d.span.start,
       length: d.span.end - d.span.start,
       messageText: d.message,
       category: ts.DiagnosticCategory.Error,
-      code: 0
+      code: 0,
+      source: 'ng'
     };
+    return result;
   }
 
-  function tryOperation(attempting: string, callback: () => void) {
+  function tryOperation<T>(attempting: string, callback: () => T): T|null {
     try {
-      callback();
+      return callback();
     } catch (e) {
       info.project.projectService.logger.info(`Failed to ${attempting}: ${e.toString()}`);
       info.project.projectService.logger.info(`Stack trace: ${e.stack}`);
+      return null;
     }
   }
 
   const serviceHost = new TypeScriptServiceHost(info.languageServiceHost, info.languageService);
   const ls = createLanguageService(serviceHost as any);
   serviceHost.setSite(ls);
+  projectHostMap.set(info.project, serviceHost);
 
   proxy.getCompletionsAtPosition = function(fileName: string, position: number) {
-    let base = oldLS.getCompletionsAtPosition(fileName, position);
+    let base = oldLS.getCompletionsAtPosition(fileName, position) || {
+      isGlobalCompletion: false,
+      isMemberCompletion: false,
+      isNewIdentifierLocation: false,
+      entries: []
+    };
     tryOperation('get completions', () => {
       const results = ls.getCompletionsAt(fileName, position);
       if (results && results.length) {
@@ -71,21 +232,25 @@ export function create(info: any /* ts.server.PluginCreateInfo */): ts.LanguageS
 
   proxy.getQuickInfoAtPosition = function(fileName: string, position: number): ts.QuickInfo {
     let base = oldLS.getQuickInfoAtPosition(fileName, position);
+    // TODO(vicb): the tags property has been removed in TS 2.2
     tryOperation('get quick info', () => {
       const ours = ls.getHoverAt(fileName, position);
       if (ours) {
-        const displayParts: typeof base.displayParts = [];
+        const displayParts: ts.SymbolDisplayPart[] = [];
         for (const part of ours.text) {
-          displayParts.push({kind: part.language !, text: part.text});
+          displayParts.push({kind: part.language || 'angular', text: part.text});
         }
-        base = {
+        const tags = base && (<any>base).tags;
+        base = <any>{
           displayParts,
           documentation: [],
           kind: 'angular',
           kindModifiers: 'what does this do?',
           textSpan: {start: ours.span.start, length: ours.span.end - ours.span.start},
-          tags: [],
         };
+        if (tags) {
+          (<any>base).tags = tags;
+        }
       }
     });
 
@@ -93,10 +258,8 @@ export function create(info: any /* ts.server.PluginCreateInfo */): ts.LanguageS
   };
 
   proxy.getSemanticDiagnostics = function(fileName: string) {
-    let base = oldLS.getSemanticDiagnostics(fileName);
-    if (base === undefined) {
-      base = [];
-    }
+    let result = oldLS.getSemanticDiagnostics(fileName);
+    const base = result || [];
     tryOperation('get diagnostics', () => {
       info.project.projectService.logger.info(`Computing Angular semantic diagnostics...`);
       const ours = ls.getDiagnostics(fileName);
@@ -116,23 +279,23 @@ export function create(info: any /* ts.server.PluginCreateInfo */): ts.LanguageS
       return base;
     }
 
-    tryOperation('get definition', () => {
-      const ours = ls.getDefinitionAt(fileName, position);
-      if (ours && ours.length) {
-        base = base || [];
-        for (const loc of ours) {
-          base.push({
-            fileName: loc.fileName,
-            textSpan: {start: loc.span.start, length: loc.span.end - loc.span.start},
-            name: '',
-            kind: 'definition',
-            containerName: loc.fileName,
-            containerKind: 'file'
-          });
-        }
-      }
-    });
-    return base;
+    return tryOperation('get definition', () => {
+             const ours = ls.getDefinitionAt(fileName, position);
+             if (ours && ours.length) {
+               base = base || [];
+               for (const loc of ours) {
+                 base.push({
+                   fileName: loc.fileName,
+                   textSpan: {start: loc.span.start, length: loc.span.end - loc.span.start},
+                   name: '',
+                   kind: 'definition',
+                   containerName: loc.fileName,
+                   containerKind: 'file'
+                 });
+               }
+             }
+             return base;
+           }) || [];
   };
 
   return proxy;
diff --git a/packages/language-service/src/types.ts b/packages/language-service/src/types.ts
index fe29b27247..884cf5b02e 100644
--- a/packages/language-service/src/types.ts
+++ b/packages/language-service/src/types.ts
@@ -6,33 +6,26 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompileDirectiveMetadata, CompileMetadataResolver, NgAnalyzedModules, StaticSymbol} from '@angular/compiler';
+import {CompileDirectiveMetadata, CompileMetadataResolver, CompilePipeSummary, NgAnalyzedModules, StaticSymbol} from '@angular/compiler';
+import {BuiltinType, DeclarationKind, Definition, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable} from '@angular/compiler-cli';
 
-
-
-/**
- * The range of a span of text in a source file.
- *
- * @experimental
- */
-export interface Span {
-  /**
-   * The first code-point of the span as an offset relative to the beginning of the source assuming
-   * a UTF-16 encoding.
-   */
-  start: number;
-
-  /**
-   * The first code-point after the span as an offset relative to the beginning of the source
-   * assuming a UTF-16 encoding.
-   */
-  end: number;
-}
+export {
+  BuiltinType,
+  DeclarationKind,
+  Definition,
+  PipeInfo,
+  Pipes,
+  Signature,
+  Span,
+  Symbol,
+  SymbolDeclaration,
+  SymbolQuery,
+  SymbolTable
+};
 
 /**
  * The information `LanguageService` needs from the `LanguageServiceHost` to describe the content of
- * a template and the
- * langauge context the template is in.
+ * a template and the language context the template is in.
  *
  * A host interface; see `LanguageSeriviceHost`.
  *
@@ -46,11 +39,9 @@ export interface TemplateSource {
 
   /**
    * The version of the source. As files are modified the version should change. That is, if the
-   * `LanguageService` requesting
-   * template infomration for a source file and that file has changed since the last time the host
-   * was asked for the file then
-   * this version string should be different. No assumptions are made about the format of this
-   * string.
+   * `LanguageService` requesting template infomration for a source file and that file has changed
+   * since the last time the host was asked for the file then this version string should be
+   * different. No assumptions are made about the format of this string.
    *
    * The version can change more often than the source but should not change less often.
    */
@@ -86,6 +77,7 @@ export interface TemplateSource {
  */
 export type TemplateSources = TemplateSource[] | undefined;
 
+
 /**
  * Error information found getting declaration information
  *
@@ -151,266 +143,8 @@ export interface Declaration {
 export type Declarations = Declaration[];
 
 /**
- * An enumeration of basic types.
- *
- * A `LanguageServiceHost` interface.
- *
- * @experimental
- */
-export enum BuiltinType {
-  /**
-   * The type is a type that can hold any other type.
-   */
-  Any,
-
-  /**
-   * The type of a string literal.
-   */
-  String,
-
-  /**
-   * The type of a numeric literal.
-   */
-  Number,
-
-  /**
-   * The type of the `true` and `false` literals.
-   */
-  Boolean,
-
-  /**
-   * The type of the `undefined` literal.
-   */
-  Undefined,
-
-  /**
-   * the type of the `null` literal.
-   */
-  Null,
-
-  /**
-   * the type is an unbound type parameter.
-   */
-  Unbound,
-
-  /**
-   * Not a built-in type.
-   */
-  Other
-}
-
-/**
- * A symbol describing a language element that can be referenced by expressions
- * in an Angular template.
- *
- * A `LanguageServiceHost` interface.
- *
- * @experimental
- */
-export interface Symbol {
-  /**
-   * The name of the symbol as it would be referenced in an Angular expression.
-   */
-  readonly name: string;
-
-  /**
-   * The kind of completion this symbol should generate if included.
-   */
-  readonly kind: string;
-
-  /**
-   * The language of the source that defines the symbol. (e.g. typescript for TypeScript,
-   * ng-template for an Angular template, etc.)
-   */
-  readonly language: string;
-
-  /**
-   * A symbol representing type of the symbol.
-   */
-  readonly type: Symbol|undefined;
-
-
-  /**
-   * A symbol for the container of this symbol. For example, if this is a method, the container
-   * is the class or interface of the method. If no container is appropriate, undefined is
-   * returned.
-   */
-  readonly container: Symbol|undefined;
-
-  /**
-   * The symbol is public in the container.
-   */
-  readonly public: boolean;
-
-  /**
-   * `true` if the symbol can be the target of a call.
-   */
-  readonly callable: boolean;
-
-  /**
-   * The location of the definition of the symbol
-   */
-  readonly definition: Definition|undefined;
-  /**
-
-   * A table of the members of the symbol; that is, the members that can appear
-   * after a `.` in an Angular expression.
-   *
-   */
-  members(): SymbolTable;
-
-  /**
-   * The list of overloaded signatures that can be used if the symbol is the
-   * target of a call.
-   */
-  signatures(): Signature[];
-
-  /**
-   * Return which signature of returned by `signatures()` would be used selected
-   * given the `types` supplied. If no signature would match, this method should
-   * return `undefined`.
-   */
-  selectSignature(types: Symbol[]): Signature|undefined;
-
-  /**
-   * Return the type of the expression if this symbol is indexed by `argument`.
-   * If the symbol cannot be indexed, this method should return `undefined`.
-   */
-  indexed(argument: Symbol): Symbol|undefined;
-}
-
-/**
- * A table of `Symbol`s accessible by name.
- *
- * A `LanguageServiceHost` interface.
- *
- * @experimental
- */
-export interface SymbolTable {
-  /**
-   * The number of symbols in the table.
-   */
-  readonly size: number;
-
-  /**
-   * Get the symbol corresponding to `key` or `undefined` if there is no symbol in the
-   * table by the name `key`.
-   */
-  get(key: string): Symbol|undefined;
-
-  /**
-   * Returns `true` if the table contains a `Symbol` with the name `key`.
-   */
-  has(key: string): boolean;
-
-  /**
-   * Returns all the `Symbol`s in the table. The order should be, but is not required to be,
-   * in declaration order.
-   */
-  values(): Symbol[];
-}
-
-/**
- * A description of a function or method signature.
- *
- * A `LanguageServiceHost` interface.
- *
- * @experimental
- */
-export interface Signature {
-  /**
-   * The arguments of the signture. The order of `argumetnts.symbols()` must be in the order
-   * of argument declaration.
-   */
-  readonly arguments: SymbolTable;
-
-  /**
-   * The symbol of the signature result type.
-   */
-  readonly result: Symbol;
-}
-
-/**
- * Describes the language context in which an Angular expression is evaluated.
- *
- * A `LanguageServiceHost` interface.
- *
- * @experimental
- */
-export interface SymbolQuery {
-  /**
-   * Return the built-in type this symbol represents or Other if it is not a built-in type.
-   */
-  getTypeKind(symbol: Symbol): BuiltinType;
-
-  /**
-   * Return a symbol representing the given built-in type.
-   */
-  getBuiltinType(kind: BuiltinType): Symbol;
-
-  /**
-   * Return the symbol for a type that represents the union of all the types given. Any value
-   * of one of the types given should be assignable to the returned type. If no one type can
-   * be constructed then this should be the Any type.
-   */
-  getTypeUnion(...types: Symbol[]): Symbol;
-
-  /**
-   * Return a symbol for an array type that has the `type` as its element type.
-   */
-  getArrayType(type: Symbol): Symbol;
-
-  /**
-   * Return element type symbol for an array type if the `type` is an array type. Otherwise return
-   * undefined.
-   */
-  getElementType(type: Symbol): Symbol|undefined;
-
-  /**
-   * Return a type that is the non-nullable version of the given type. If `type` is already
-   * non-nullable, return `type`.
-   */
-  getNonNullableType(type: Symbol): Symbol;
-
-  /**
-   * Return a symbol table for the pipes that are in scope.
-   */
-  getPipes(): SymbolTable;
-
-  /**
-   * Return the type symbol for the given static symbol.
-   */
-  getTypeSymbol(type: StaticSymbol): Symbol;
-
-  /**
-   * Return the members that are in the context of a type's template reference.
-   */
-  getTemplateContext(type: StaticSymbol): SymbolTable|undefined;
-
-  /**
-   * Produce a symbol table with the given symbols. Used to produce a symbol table
-   * for use with mergeSymbolTables().
-   */
-  createSymbolTable(symbols: SymbolDeclaration[]): SymbolTable;
-
-  /**
-   * Produce a merged symbol table. If the symbol tables contain duplicate entries
-   * the entries of the latter symbol tables will obscure the entries in the prior
-   * symbol tables.
-   *
-   * The symbol tables passed to this routine MUST be produces by the same instance
-   * of SymbolQuery that is being called.
-   */
-  mergeSymbolTable(symbolTables: SymbolTable[]): SymbolTable;
-
-  /**
-   * Return the span of the narrowest non-token node at the given location.
-   */
-  getSpanAt(line: number, column: number): Span|undefined;
-}
-
-/**
- * The host for a `LanguageService`. This provides all the `LanguageService` requires to respond to
+ * The host for a `LanguageService`. This provides all the `LanguageService` requires to respond
+ * to
  * the `LanguageService` requests.
  *
  * This interface describes the requirements of the `LanguageService` on its host.
@@ -418,28 +152,21 @@ export interface SymbolQuery {
  * The host interface is host language agnostic.
  *
  * Adding optional member to this interface or any interface that is described as a
- * `LanguageServiceHost`
- * interface is not considered a breaking change as defined by SemVer. Removing a method or changing
- * a
- * member from required to optional will also not be considered a breaking change.
+ * `LanguageServiceHost` interface is not considered a breaking change as defined by SemVer.
+ * Removing a method or changing a member from required to optional will also not be considered a
+ * breaking change.
  *
- * If a member is deprecated it will be changed to optional in a minor release before it is removed
- * in
- * a major release.
+ * If a member is deprecated it will be changed to optional in a minor release before it is
+ * removed in a major release.
  *
  * Adding a required member or changing a method's parameters, is considered a breaking change and
- * will
- * only be done when breaking changes are allowed. When possible, a new optional member will be
- * added and
- * the old member will be deprecated. The new member will then be made required in and the old
- * member will
- * be removed only when breaking chnages are allowed.
+ * will only be done when breaking changes are allowed. When possible, a new optional member will
+ * be added and the old member will be deprecated. The new member will then be made required in
+ * and the old member will be removed only when breaking chnages are allowed.
  *
  * While an interface is marked as experimental breaking-changes will be allowed between minor
- * releases.
- * After an interface is marked as stable breaking-changes will only be allowed between major
- * releases.
- * No breaking changes are allowed between patch releases.
+ * releases. After an interface is marked as stable breaking-changes will only be allowed between
+ * major releases. No breaking changes are allowed between patch releases.
  *
  * @experimental
  */
@@ -451,16 +178,15 @@ export interface LanguageServiceHost {
 
   /**
    * Returns the template information for templates in `fileName` at the given location. If
-   * `fileName`
-   * refers to a template file then the `position` should be ignored. If the `position` is not in a
-   * template literal string then this method should return `undefined`.
+   * `fileName` refers to a template file then the `position` should be ignored. If the `position`
+   * is not in a template literal string then this method should return `undefined`.
    */
-  getTemplateAt(fileName: string, position: number): TemplateSource /* |undefined */;
+  getTemplateAt(fileName: string, position: number): TemplateSource|undefined;
 
   /**
-   * Return the template source information for all templates in `fileName` or for `fileName` if it
-   * is
-   * a template file.
+   * Return the template source information for all templates in `fileName` or for `fileName` if
+   * it
+   * is a template file.
    */
   getTemplates(fileName: string): TemplateSources;
 
@@ -480,16 +206,6 @@ export interface LanguageServiceHost {
   getTemplateReferences(): string[];
 }
 
-/**
- * The kinds of completions generated by the language service.
- *
- * A 'LanguageService' interface.
- *
- * @experimental
- */
-export type CompletionKind = 'attribute' | 'html attribute' | 'component' | 'element' | 'entity' |
-    'key' | 'method' | 'pipe' | 'property' | 'type' | 'reference' | 'variable';
-
 /**
  * An item of the completion result to be displayed by an editor.
  *
@@ -501,7 +217,7 @@ export interface Completion {
   /**
    * The kind of comletion.
    */
-  kind: CompletionKind;
+  kind: DeclarationKind;
 
   /**
    * The name of the completion to be displayed
@@ -529,11 +245,6 @@ export interface Location {
   span: Span;
 }
 
-/**
- * A defnition location(s).
- */
-export type Definition = Location[] | undefined;
-
 /**
  * The kind of diagnostic message.
  *
@@ -573,62 +284,6 @@ export interface Diagnostic {
  */
 export type Diagnostics = Diagnostic[];
 
-/**
- * Information about the pipes that are available for use in a template.
- *
- * A `LanguageService` interface.
- *
- * @experimental
- */
-export interface PipeInfo {
-  /**
-   * The name of the pipe.
-   */
-  name: string;
-
-  /**
-   * The static symbol for the pipe's constructor.
-   */
-  symbol: StaticSymbol;
-}
-
-/**
- * A sequence of pipe information.
- *
- * @experimental
- */
-export type Pipes = PipeInfo[] | undefined;
-
-/**
- * Describes a symbol to type binding used to build a symbol table.
- *
- * A `LanguageServiceHost` interface.
- *
- * @experimental
- */
-
-export interface SymbolDeclaration {
-  /**
-   * The name of the symbol in table.
-   */
-  readonly name: string;
-
-  /**
-   * The kind of symbol to declare.
-   */
-  readonly kind: CompletionKind;
-
-  /**
-   * Type of the symbol. The type symbol should refer to a symbol for a type.
-   */
-  readonly type: Symbol;
-
-  /**
-   * The definion of the symbol if one exists.
-   */
-  readonly definition?: Definition;
-}
-
 /**
  * A section of hover text. If the text is code then langauge should be provided.
  * Otherwise the text is assumed to be Markdown text that will be sanitized.
@@ -665,33 +320,26 @@ export interface Hover {
  * An instance of an Angular language service created by `createLanguageService()`.
  *
  * The language service returns information about Angular templates that are included in a project
- * as
- * defined by the `LanguageServiceHost`.
+ * as defined by the `LanguageServiceHost`.
  *
  * When a method expects a `fileName` this file can either be source file in the project that
- * contains
- * a template in a string literal or a template file referenced by the project returned by
- * `getTemplateReference()`. All other files will cause the method to return `undefined`.
+ * contains a template in a string literal or a template file referenced by the project returned
+ * by `getTemplateReference()`. All other files will cause the method to return `undefined`.
  *
  * If a method takes a `position`, it is the offset of the UTF-16 code-point relative to the
- * beginning
- * of the file reference by `fileName`.
+ * beginning of the file reference by `fileName`.
  *
  * This interface and all interfaces and types marked as `LanguageService` types, describe  a
- * particlar
- * implementation of the Angular language service and is not intented to be implemented. Adding
- * members
- * to the interface will not be considered a breaking change as defined by SemVer.
+ * particlar implementation of the Angular language service and is not intented to be
+ * implemented. Adding members to the interface will not be considered a breaking change as
+ * defined by SemVer.
  *
  * Removing a member or making a member optional, changing a method parameters, or changing a
- * member's
- * type will all be considered a breaking change.
+ * member's type will all be considered a breaking change.
  *
  * While an interface is marked as experimental breaking-changes will be allowed between minor
- * releases.
- * After an interface is marked as stable breaking-changes will only be allowed between major
- * releases.
- * No breaking changes are allowed between patch releases.
+ * releases. After an interface is marked as stable breaking-changes will only be allowed between
+ * major releases. No breaking changes are allowed between patch releases.
  *
  * @experimental
  */
@@ -724,5 +372,5 @@ export interface LanguageService {
   /**
    * Return the pipes that are available at the given position.
    */
-  getPipesAt(fileName: string, position: number): Pipes|undefined;
+  getPipesAt(fileName: string, position: number): CompilePipeSummary[];
 }
diff --git a/packages/language-service/src/typescript_host.ts b/packages/language-service/src/typescript_host.ts
index 84344ce630..7cdf0a840f 100644
--- a/packages/language-service/src/typescript_host.ts
+++ b/packages/language-service/src/typescript_host.ts
@@ -6,29 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AotSummaryResolver, CompileDirectiveMetadata, CompileMetadataResolver, CompilerConfig, DEFAULT_INTERPOLATION_CONFIG, DirectiveNormalizer, DirectiveResolver, DomElementSchemaRegistry, HtmlParser, InterpolationConfig, NgAnalyzedModules, NgModuleResolver, ParseTreeResult, Parser, PipeResolver, ResourceLoader, StaticAndDynamicReflectionCapabilities, StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, SummaryResolver, UrlResolver, analyzeNgModules, componentModuleUrl, createOfflineCompileUrlResolver, extractProgramSymbols} from '@angular/compiler';
-import {Type, ViewEncapsulation, ɵConsole as Console} from '@angular/core';
+import {AotSummaryResolver, CompileMetadataResolver, CompilerConfig, DEFAULT_INTERPOLATION_CONFIG, DirectiveNormalizer, DirectiveResolver, DomElementSchemaRegistry, HtmlParser, InterpolationConfig, JitSummaryResolver, NgAnalyzedModules, NgModuleResolver, ParseTreeResult, PipeResolver, ResourceLoader, StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, SummaryResolver, analyzeNgModules, createOfflineCompileUrlResolver, extractProgramSymbols} from '@angular/compiler';
+import {AngularCompilerOptions, getClassMembersFromDeclaration, getPipesTable, getSymbolQuery} from '@angular/compiler-cli';
+import {ViewEncapsulation, ɵConsole as Console} from '@angular/core';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as ts from 'typescript';
 
 import {createLanguageService} from './language_service';
 import {ReflectorHost} from './reflector_host';
-import {BuiltinType, CompletionKind, Declaration, DeclarationError, Declarations, Definition, LanguageService, LanguageServiceHost, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable, TemplateSource, TemplateSources} from './types';
+import {BuiltinType, Declaration, DeclarationError, DeclarationKind, Declarations, Definition, LanguageService, LanguageServiceHost, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable, TemplateSource, TemplateSources} from './types';
+import {isTypescriptVersion} from './utils';
 
 
-// In TypeScript 2.1 these flags moved
-// These helpers work for both 2.0 and 2.1.
-const isPrivate = (ts as any).ModifierFlags ?
-    ((node: ts.Node) =>
-         !!((ts as any).getCombinedModifierFlags(node) & (ts as any).ModifierFlags.Private)) :
-    ((node: ts.Node) => !!(node.flags & (ts as any).NodeFlags.Private));
-const isReferenceType = (ts as any).ObjectFlags ?
-    ((type: ts.Type) =>
-         !!(type.flags & (ts as any).TypeFlags.Object &&
-            (type as any).objectFlags & (ts as any).ObjectFlags.Reference)) :
-    ((type: ts.Type) => !!(type.flags & (ts as any).TypeFlags.Reference));
-
 /**
  * Create a `LanguageServiceHost`
  */
@@ -44,11 +34,9 @@ export function createLanguageServiceFromTypescript(
  * The language service never needs the normalized versions of the metadata. To avoid parsing
  * the content and resolving references, return an empty file. This also allows normalizing
  * template that are syntatically incorrect which is required to provide completions in
- * syntatically incorrect templates.
+ * syntactically incorrect templates.
  */
 export class DummyHtmlParser extends HtmlParser {
-  constructor() { super(); }
-
   parse(
       source: string, url: string, parseExpansionForms: boolean = false,
       interpolationConfig: InterpolationConfig = DEFAULT_INTERPOLATION_CONFIG): ParseTreeResult {
@@ -69,25 +57,25 @@ export class DummyResourceLoader extends ResourceLoader {
  * The `TypeScriptServiceHost` implements the Angular `LanguageServiceHost` using
  * the TypeScript language services.
  *
- * @expermental
+ * @experimental
  */
 export class TypeScriptServiceHost implements LanguageServiceHost {
-  private _resolver: CompileMetadataResolver;
+  private _resolver: CompileMetadataResolver|null;
   private _staticSymbolCache = new StaticSymbolCache();
   private _summaryResolver: AotSummaryResolver;
   private _staticSymbolResolver: StaticSymbolResolver;
-  private _reflector: StaticReflector;
+  private _reflector: StaticReflector|null;
   private _reflectorHost: ReflectorHost;
-  private _checker: ts.TypeChecker;
+  private _checker: ts.TypeChecker|null;
   private _typeCache: Symbol[] = [];
   private context: string|undefined;
   private lastProgram: ts.Program|undefined;
   private modulesOutOfDate: boolean = true;
-  private analyzedModules: NgAnalyzedModules;
+  private analyzedModules: NgAnalyzedModules|null;
   private service: LanguageService;
-  private fileToComponent: Map<string, StaticSymbol>;
-  private templateReferences: string[];
-  private collectedErrors: Map<string, any[]>;
+  private fileToComponent: Map<string, StaticSymbol>|null;
+  private templateReferences: string[]|null;
+  private collectedErrors: Map<string, any[]>|null;
   private fileVersions = new Map<string, string>();
 
   constructor(private host: ts.LanguageServiceHost, private tsService: ts.LanguageService) {}
@@ -116,7 +104,7 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
           new DirectiveNormalizer(resourceLoader, urlResolver, htmlParser, config);
 
       result = this._resolver = new CompileMetadataResolver(
-          config, moduleResolver, directiveResolver, pipeResolver, new SummaryResolver(),
+          config, moduleResolver, directiveResolver, pipeResolver, new JitSummaryResolver(),
           elementSchemaRegistry, directiveNormalizer, new Console(), this._staticSymbolCache,
           this.reflector, (error, type) => this.collectError(error, type && type.filePath));
     }
@@ -125,28 +113,28 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
 
   getTemplateReferences(): string[] {
     this.ensureTemplateMap();
-    return this.templateReferences;
+    return this.templateReferences || [];
   }
 
-  getTemplateAt(fileName: string, position: number): TemplateSource {
+  getTemplateAt(fileName: string, position: number): TemplateSource|undefined {
     let sourceFile = this.getSourceFile(fileName);
     if (sourceFile) {
       this.context = sourceFile.fileName;
       let node = this.findNode(sourceFile, position);
       if (node) {
         return this.getSourceFromNode(
-            fileName, this.host.getScriptVersion(sourceFile.fileName), node) !;
+            fileName, this.host.getScriptVersion(sourceFile.fileName), node);
       }
     } else {
       this.ensureTemplateMap();
       // TODO: Cannocalize the file?
-      const componentType = this.fileToComponent.get(fileName);
+      const componentType = this.fileToComponent !.get(fileName);
       if (componentType) {
         return this.getSourceFromType(
-            fileName, this.host.getScriptVersion(fileName), componentType) !;
+            fileName, this.host.getScriptVersion(fileName), componentType);
       }
     }
-    return null !;
+    return undefined;
   }
 
   getAnalyzedModules(): NgAnalyzedModules {
@@ -170,7 +158,7 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
 
   getTemplates(fileName: string): TemplateSources {
     this.ensureTemplateMap();
-    const componentType = this.fileToComponent.get(fileName);
+    const componentType = this.fileToComponent !.get(fileName);
     if (componentType) {
       const templateSource = this.getTemplateAt(fileName, 0);
       if (templateSource) {
@@ -192,7 +180,7 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
 
       let sourceFile = this.getSourceFile(fileName);
       if (sourceFile) {
-        this.context = sourceFile.path;
+        this.context = (sourceFile as any).path || sourceFile.fileName;
         ts.forEachChild(sourceFile, visit);
       }
       return result.length ? result : undefined;
@@ -223,10 +211,10 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
   updateAnalyzedModules() {
     this.validate();
     if (this.modulesOutOfDate) {
-      this.analyzedModules = null !;
-      this._reflector = null !;
-      this.templateReferences = null !;
-      this.fileToComponent = null !;
+      this.analyzedModules = null;
+      this._reflector = null;
+      this.templateReferences = null;
+      this.fileToComponent = null;
       this.ensureAnalyzedModules();
       this.modulesOutOfDate = false;
     }
@@ -271,10 +259,10 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
   }
 
   private clearCaches() {
-    this._checker = null !;
+    this._checker = null;
     this._typeCache = [];
-    this._resolver = null !;
-    this.collectedErrors = null !;
+    this._resolver = null;
+    this.collectedErrors = null;
     this.modulesOutOfDate = true;
   }
 
@@ -286,11 +274,10 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
       const urlResolver = createOfflineCompileUrlResolver();
       for (const module of ngModuleSummary.ngModules) {
         for (const directive of module.declaredDirectives) {
-          const {metadata, annotation} =
-              this.resolver.getNonNormalizedDirectiveMetadata(directive.reference) !;
+          const {metadata} = this.resolver.getNonNormalizedDirectiveMetadata(directive.reference) !;
           if (metadata.isComponent && metadata.template && metadata.template.templateUrl) {
             const templateName = urlResolver.resolve(
-                componentModuleUrl(this.reflector, directive.reference, annotation),
+                this.reflector.componentModuleUrl(directive.reference),
                 metadata.template.templateUrl);
             fileToComponent.set(templateName, directive.reference);
             templateReference.push(templateName);
@@ -314,19 +301,17 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
         source,
         span,
         type,
-        get members():
-            SymbolTable{const checker = t.checker; const program = t.program;
-                        const type = checker.getTypeAtLocation(declaration);
-                        return new TypeWrapper(type, {node, program, checker}).members();},
-        get query(): SymbolQuery{
+        get members() {
+          return getClassMembersFromDeclaration(t.program, t.checker, sourceFile, declaration);
+        },
+        get query() {
           if (!queryCache) {
-            queryCache = new TypeScriptSymbolQuery(t.program, t.checker, sourceFile, () => {
-              const pipes = t.service.getPipesAt(fileName, node.getStart());
-              const checker = t.checker;
-              const program = t.program;
-              return new PipesTable(pipes, {node, program, checker});
-            });
-          } return queryCache;
+            const pipes = t.service.getPipesAt(fileName, node.getStart());
+            queryCache = getSymbolQuery(
+                t.program, t.checker, sourceFile,
+                () => getPipesTable(sourceFile, t.program, t.checker, pipes));
+          }
+          return queryCache;
         }
       };
     }
@@ -340,11 +325,10 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
       case ts.SyntaxKind.NoSubstitutionTemplateLiteral:
       case ts.SyntaxKind.StringLiteral:
         let [declaration, decorator] = this.getTemplateClassDeclFromNode(node);
-        let queryCache: SymbolQuery|undefined = undefined;
         if (declaration && declaration.name) {
           const sourceFile = this.getSourceFile(fileName);
           return this.getSourceFromDeclaration(
-              fileName, version, this.stringOf(node) !, shrink(spanOf(node)),
+              fileName, version, this.stringOf(node) || '', shrink(spanOf(node)),
               this.reflector.getStaticSymbol(sourceFile.fileName, declaration.name.text),
               declaration, node, sourceFile);
         }
@@ -358,11 +342,13 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
     let result: TemplateSource|undefined = undefined;
     const declaration = this.getTemplateClassFromStaticSymbol(type);
     if (declaration) {
-      const snapshot = this.host.getScriptSnapshot(fileName) !;
-      const source = snapshot.getText(0, snapshot.getLength());
-      result = this.getSourceFromDeclaration(
-          fileName, version, source, {start: 0, end: source.length}, type, declaration, declaration,
-          declaration.getSourceFile());
+      const snapshot = this.host.getScriptSnapshot(fileName);
+      if (snapshot) {
+        const source = snapshot.getText(0, snapshot.getLength());
+        result = this.getSourceFromDeclaration(
+            fileName, version, source, {start: 0, end: source.length}, type, declaration,
+            declaration, declaration.getSourceFile());
+      }
     }
     return result;
   }
@@ -386,24 +372,30 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
 
       const tsConfigPath = findTsConfig(source.fileName);
       const basePath = path.dirname(tsConfigPath || this.context);
-
-      result = this._reflectorHost = new ReflectorHost(
-          () => this.tsService.getProgram(), this.host, {basePath, genDir: basePath});
+      const options: AngularCompilerOptions = {basePath, genDir: basePath};
+      const compilerOptions = this.host.getCompilationSettings();
+      if (compilerOptions && compilerOptions.baseUrl) {
+        options.baseUrl = compilerOptions.baseUrl;
+      }
+      result = this._reflectorHost =
+          new ReflectorHost(() => this.tsService.getProgram(), this.host, options);
     }
     return result;
   }
 
-  private collectError(error: any, filePath: string) {
-    let errorMap = this.collectedErrors;
-    if (!errorMap) {
-      errorMap = this.collectedErrors = new Map();
+  private collectError(error: any, filePath: string|null) {
+    if (filePath) {
+      let errorMap = this.collectedErrors;
+      if (!errorMap || !this.collectedErrors) {
+        errorMap = this.collectedErrors = new Map();
+      }
+      let errors = errorMap.get(filePath);
+      if (!errors) {
+        errors = [];
+        this.collectedErrors.set(filePath, errors);
+      }
+      errors.push(error);
     }
-    let errors = errorMap.get(filePath);
-    if (!errors) {
-      errors = [];
-      this.collectedErrors.set(filePath, errors);
-    }
-    errors.push(error);
   }
 
   private get staticSymbolResolver(): StaticSymbolResolver {
@@ -411,9 +403,9 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
     if (!result) {
       this._summaryResolver = new AotSummaryResolver(
           {
-            loadSummary(filePath: string) { return null !; },
-            isSourceFile(sourceFilePath: string) { return true !; },
-            getOutputFileName(sourceFilePath: string) { return null !; }
+            loadSummary(filePath: string) { return null; },
+            isSourceFile(sourceFilePath: string) { return true; },
+            getOutputFileName(sourceFilePath: string) { return sourceFilePath; }
           },
           this._staticSymbolCache);
       result = this._staticSymbolResolver = new StaticSymbolResolver(
@@ -429,7 +421,6 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
       const ssr = this.staticSymbolResolver;
       result = this._reflector = new StaticReflector(
           this._summaryResolver, ssr, [], [], (e, filePath) => this.collectError(e, filePath !));
-      StaticAndDynamicReflectionCapabilities.install(result);
     }
     return result;
   }
@@ -440,7 +431,7 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
       const declarationNode = ts.forEachChild(source, child => {
         if (child.kind === ts.SyntaxKind.ClassDeclaration) {
           const classDeclaration = child as ts.ClassDeclaration;
-          if (classDeclaration.name !.text === type.name) {
+          if (classDeclaration.name != null && classDeclaration.name.text === type.name) {
             return classDeclaration;
           }
         }
@@ -558,8 +549,6 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
   }
 
   private findNode(sourceFile: ts.SourceFile, position: number): ts.Node|undefined {
-    let _this = this;
-
     function find(node: ts.Node): ts.Node|undefined {
       if (position >= node.getStart() && position < node.getEnd()) {
         return ts.forEachChild(node, find) || node;
@@ -568,533 +557,8 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
 
     return find(sourceFile);
   }
-
-  private findLiteralType(kind: BuiltinType, context: TypeContext): Symbol {
-    const checker = this.checker;
-    let type: ts.Type;
-    switch (kind) {
-      case BuiltinType.Any:
-        type = checker.getTypeAtLocation(<ts.Node><any>{
-          kind: ts.SyntaxKind.AsExpression,
-          expression: <ts.Node>{kind: ts.SyntaxKind.TrueKeyword},
-          type: <ts.Node>{kind: ts.SyntaxKind.AnyKeyword}
-        });
-        break;
-      case BuiltinType.Boolean:
-        type = checker.getTypeAtLocation(<ts.Node>{kind: ts.SyntaxKind.TrueKeyword});
-        break;
-      case BuiltinType.Null:
-        type = checker.getTypeAtLocation(<ts.Node>{kind: ts.SyntaxKind.NullKeyword});
-        break;
-      case BuiltinType.Number:
-        type = checker.getTypeAtLocation(<ts.Node>{kind: ts.SyntaxKind.NumericLiteral});
-        break;
-      case BuiltinType.String:
-        type =
-            checker.getTypeAtLocation(<ts.Node>{kind: ts.SyntaxKind.NoSubstitutionTemplateLiteral});
-        break;
-      case BuiltinType.Undefined:
-        type = checker.getTypeAtLocation(<ts.Node>{kind: ts.SyntaxKind.VoidExpression});
-        break;
-      default:
-        throw new Error(`Internal error, unhandled literal kind ${kind}:${BuiltinType[kind]}`);
-    }
-    return new TypeWrapper(type, context);
-  }
 }
 
-class TypeScriptSymbolQuery implements SymbolQuery {
-  private typeCache = new Map<BuiltinType, Symbol>();
-  private pipesCache: SymbolTable;
-
-  constructor(
-      private program: ts.Program, private checker: ts.TypeChecker, private source: ts.SourceFile,
-      private fetchPipes: () => SymbolTable) {}
-
-  getTypeKind(symbol: Symbol): BuiltinType { return typeKindOf(this.getTsTypeOf(symbol) !); }
-
-  getBuiltinType(kind: BuiltinType): Symbol {
-    // TODO: Replace with typeChecker API when available.
-    let result = this.typeCache.get(kind);
-    if (!result) {
-      const type = getBuiltinTypeFromTs(
-          kind, {checker: this.checker, node: this.source, program: this.program});
-      result =
-          new TypeWrapper(type, {program: this.program, checker: this.checker, node: this.source});
-      this.typeCache.set(kind, result);
-    }
-    return result;
-  }
-
-  getTypeUnion(...types: Symbol[]): Symbol {
-    // TODO: Replace with typeChecker API when available
-    const checker = this.checker;
-
-    // No API exists so the cheat is to just return the last type any if no types are given.
-    return types.length ? types[types.length - 1] : this.getBuiltinType(BuiltinType.Any);
-  }
-
-  getArrayType(type: Symbol): Symbol {
-    // TODO: Replace with typeChecker API when available
-    return this.getBuiltinType(BuiltinType.Any);
-  }
-
-  getElementType(type: Symbol): Symbol|undefined {
-    if (type instanceof TypeWrapper) {
-      const elementType = getTypeParameterOf(type.tsType, 'Array');
-      if (elementType) {
-        return new TypeWrapper(elementType, type.context);
-      }
-    }
-  }
-
-  getNonNullableType(symbol: Symbol): Symbol {
-    // TODO: Replace with typeChecker API when available;
-    return symbol;
-  }
-
-  getPipes(): SymbolTable {
-    let result = this.pipesCache;
-    if (!result) {
-      result = this.pipesCache = this.fetchPipes();
-    }
-    return result;
-  }
-
-  getTemplateContext(type: StaticSymbol): SymbolTable|undefined {
-    const context: TypeContext = {node: this.source, program: this.program, checker: this.checker};
-    const typeSymbol = findClassSymbolInContext(type, context);
-    if (typeSymbol) {
-      const contextType = this.getTemplateRefContextType(typeSymbol);
-      if (contextType) return new SymbolWrapper(contextType, context).members();
-    }
-  }
-
-  getTypeSymbol(type: StaticSymbol): Symbol {
-    const context: TypeContext = {node: this.source, program: this.program, checker: this.checker};
-    const typeSymbol = findClassSymbolInContext(type, context) !;
-    return new SymbolWrapper(typeSymbol, context);
-  }
-
-  createSymbolTable(symbols: SymbolDeclaration[]): SymbolTable {
-    const result = new MapSymbolTable();
-    result.addAll(symbols.map(s => new DeclaredSymbol(s)));
-    return result;
-  }
-
-  mergeSymbolTable(symbolTables: SymbolTable[]): SymbolTable {
-    const result = new MapSymbolTable();
-    for (const symbolTable of symbolTables) {
-      result.addAll(symbolTable.values());
-    }
-    return result;
-  }
-
-  getSpanAt(line: number, column: number): Span|undefined {
-    return spanAt(this.source, line, column);
-  }
-
-  private getTemplateRefContextType(type: ts.Symbol): ts.Symbol|undefined {
-    const constructor = type.members && type.members !['__constructor'];
-    if (constructor) {
-      const constructorDeclaration = constructor.declarations ![0] as ts.ConstructorTypeNode;
-      for (const parameter of constructorDeclaration.parameters) {
-        const type = this.checker.getTypeAtLocation(parameter.type !);
-        if (type.symbol !.name == 'TemplateRef' && isReferenceType(type)) {
-          const typeReference = type as ts.TypeReference;
-          if (typeReference.typeArguments.length === 1) {
-            return typeReference.typeArguments[0].symbol;
-          }
-        }
-      };
-    }
-  }
-
-  private getTsTypeOf(symbol: Symbol): ts.Type|undefined {
-    const type = this.getTypeWrapper(symbol);
-    return type && type.tsType;
-  }
-
-  private getTypeWrapper(symbol: Symbol): TypeWrapper|undefined {
-    let type: TypeWrapper|undefined = undefined;
-    if (symbol instanceof TypeWrapper) {
-      type = symbol;
-    } else if (symbol.type instanceof TypeWrapper) {
-      type = symbol.type;
-    }
-    return type;
-  }
-}
-
-interface TypeContext {
-  node: ts.Node;
-  program: ts.Program;
-  checker: ts.TypeChecker;
-}
-
-function typeCallable(type: ts.Type): boolean {
-  const signatures = type.getCallSignatures();
-  return signatures && signatures.length != 0;
-}
-
-function signaturesOf(type: ts.Type, context: TypeContext): Signature[] {
-  return type.getCallSignatures().map(s => new SignatureWrapper(s, context));
-}
-
-function selectSignature(type: ts.Type, context: TypeContext, types: Symbol[]): Signature|
-    undefined {
-  // TODO: Do a better job of selecting the right signature.
-  const signatures = type.getCallSignatures();
-  return signatures.length ? new SignatureWrapper(signatures[0], context) : undefined;
-}
-
-function toSymbolTable(symbols: ts.Symbol[]): ts.SymbolTable {
-  const result: ts.SymbolTable = <any>{};
-  for (const symbol of symbols) {
-    result[symbol.name] = symbol;
-  }
-  return result;
-}
-
-function toSymbols(
-    symbolTable: ts.SymbolTable | undefined, filter?: (symbol: ts.Symbol) => boolean) {
-  const result: ts.Symbol[] = [];
-  if (!symbolTable) return result;
-  const own = typeof symbolTable.hasOwnProperty === 'function' ?
-      (name: string) => symbolTable.hasOwnProperty(name) :
-      (name: string) => !!symbolTable[name];
-  for (const name in symbolTable) {
-    if (own(name) && (!filter || filter(symbolTable[name]))) {
-      result.push(symbolTable[name]);
-    }
-  }
-  return result;
-}
-
-class TypeWrapper implements Symbol {
-  constructor(public tsType: ts.Type, public context: TypeContext) {
-    if (!tsType) {
-      throw Error('Internal: null type');
-    }
-  }
-
-  get name(): string {
-    const symbol = this.tsType.symbol;
-    return (symbol && symbol.name) || '<anonymous>';
-  }
-
-  get kind(): CompletionKind { return 'type'; }
-
-  get language(): string { return 'typescript'; }
-
-  get type(): Symbol|undefined { return undefined; }
-
-  get container(): Symbol|undefined { return undefined; }
-
-  get public(): boolean { return true; }
-
-  get callable(): boolean { return typeCallable(this.tsType); }
-
-  get definition(): Definition { return definitionFromTsSymbol(this.tsType.getSymbol()); }
-
-  members(): SymbolTable {
-    return new SymbolTableWrapper(this.tsType.getProperties(), this.context);
-  }
-
-  signatures(): Signature[] { return signaturesOf(this.tsType, this.context); }
-
-  selectSignature(types: Symbol[]): Signature|undefined {
-    return selectSignature(this.tsType, this.context, types);
-  }
-
-  indexed(argument: Symbol): Symbol|undefined { return undefined; }
-}
-
-class SymbolWrapper implements Symbol {
-  private _tsType: ts.Type;
-  private _members: SymbolTable;
-
-  constructor(private symbol: ts.Symbol, private context: TypeContext) {}
-
-  get name(): string { return this.symbol.name; }
-
-  get kind(): CompletionKind { return this.callable ? 'method' : 'property'; }
-
-  get language(): string { return 'typescript'; }
-
-  get type(): Symbol|undefined { return new TypeWrapper(this.tsType, this.context); }
-
-  get container(): Symbol|undefined { return getContainerOf(this.symbol, this.context); }
-
-  get public(): boolean {
-    // Symbols that are not explicitly made private are public.
-    return !isSymbolPrivate(this.symbol);
-  }
-
-  get callable(): boolean { return typeCallable(this.tsType); }
-
-  get definition(): Definition { return definitionFromTsSymbol(this.symbol); }
-
-  members(): SymbolTable {
-    if (!this._members) {
-      if ((this.symbol.flags & (ts.SymbolFlags.Class | ts.SymbolFlags.Interface)) != 0) {
-        const declaredType = this.context.checker.getDeclaredTypeOfSymbol(this.symbol);
-        const typeWrapper = new TypeWrapper(declaredType, this.context);
-        this._members = typeWrapper.members();
-      } else {
-        this._members = new SymbolTableWrapper(this.symbol.members !, this.context);
-      }
-    }
-    return this._members;
-  }
-
-  signatures(): Signature[] { return signaturesOf(this.tsType, this.context); }
-
-  selectSignature(types: Symbol[]): Signature|undefined {
-    return selectSignature(this.tsType, this.context, types);
-  }
-
-  indexed(argument: Symbol): Symbol|undefined { return undefined; }
-
-  private get tsType(): ts.Type {
-    let type = this._tsType;
-    if (!type) {
-      type = this._tsType =
-          this.context.checker.getTypeOfSymbolAtLocation(this.symbol, this.context.node);
-    }
-    return type;
-  }
-}
-
-class DeclaredSymbol implements Symbol {
-  constructor(private declaration: SymbolDeclaration) {}
-
-  get name() { return this.declaration.name; }
-
-  get kind() { return this.declaration.kind; }
-
-  get language(): string { return 'ng-template'; }
-
-  get container(): Symbol|undefined { return undefined; }
-
-  get type() { return this.declaration.type; }
-
-  get callable(): boolean { return this.declaration.type.callable; }
-
-  get public(): boolean { return true; }
-
-  get definition(): Definition { return this.declaration.definition; }
-
-  members(): SymbolTable { return this.declaration.type.members(); }
-
-  signatures(): Signature[] { return this.declaration.type.signatures(); }
-
-  selectSignature(types: Symbol[]): Signature|undefined {
-    return this.declaration.type.selectSignature(types);
-  }
-
-  indexed(argument: Symbol): Symbol|undefined { return undefined; }
-}
-
-class SignatureWrapper implements Signature {
-  constructor(private signature: ts.Signature, private context: TypeContext) {}
-
-  get arguments(): SymbolTable {
-    return new SymbolTableWrapper(this.signature.getParameters(), this.context);
-  }
-
-  get result(): Symbol { return new TypeWrapper(this.signature.getReturnType(), this.context); }
-}
-
-class SignatureResultOverride implements Signature {
-  constructor(private signature: Signature, private resultType: Symbol) {}
-
-  get arguments(): SymbolTable { return this.signature.arguments; }
-
-  get result(): Symbol { return this.resultType; }
-}
-
-class SymbolTableWrapper implements SymbolTable {
-  private symbols: ts.Symbol[];
-  private symbolTable: ts.SymbolTable;
-
-  constructor(
-      symbols: ts.SymbolTable|ts.Symbol[]|undefined, private context: TypeContext,
-      filter?: (symbol: ts.Symbol) => boolean) {
-    symbols = symbols || [];
-    if (Array.isArray(symbols)) {
-      this.symbols = filter ? symbols.filter(filter) : symbols;
-      this.symbolTable = toSymbolTable(symbols);
-    } else {
-      this.symbols = toSymbols(symbols, filter);
-      this.symbolTable = filter ? toSymbolTable(this.symbols) : symbols;
-    }
-  }
-
-  get size(): number { return this.symbols.length; }
-
-  get(key: string): Symbol|undefined {
-    const symbol = this.symbolTable[key];
-    return symbol ? new SymbolWrapper(symbol, this.context) : undefined;
-  }
-
-  has(key: string): boolean { return this.symbolTable[key] != null; }
-
-  values(): Symbol[] { return this.symbols.map(s => new SymbolWrapper(s, this.context)); }
-}
-
-class MapSymbolTable implements SymbolTable {
-  private map = new Map<string, Symbol>();
-  private _values: Symbol[] = [];
-
-  get size(): number { return this.map.size; }
-
-  get(key: string): Symbol|undefined { return this.map.get(key); }
-
-  add(symbol: Symbol) {
-    if (this.map.has(symbol.name)) {
-      const previous = this.map.get(symbol.name) !;
-      this._values[this._values.indexOf(previous)] = symbol;
-    }
-    this.map.set(symbol.name, symbol);
-    this._values.push(symbol);
-  }
-
-  addAll(symbols: Symbol[]) {
-    for (const symbol of symbols) {
-      this.add(symbol);
-    }
-  }
-
-  has(key: string): boolean { return this.map.has(key); }
-
-  values(): Symbol[] {
-    // Switch to this.map.values once iterables are supported by the target language.
-    return this._values;
-  }
-}
-
-class PipesTable implements SymbolTable {
-  constructor(private pipes: Pipes, private context: TypeContext) {}
-
-  get size() { return this.pipes !.length; }
-
-  get(key: string): Symbol|undefined {
-    const pipe = this.pipes !.find(pipe => pipe.name == key);
-    if (pipe) {
-      return new PipeSymbol(pipe, this.context);
-    }
-  }
-
-  has(key: string): boolean { return this.pipes !.find(pipe => pipe.name == key) != null; }
-
-  values(): Symbol[] { return this.pipes !.map(pipe => new PipeSymbol(pipe, this.context)); }
-}
-
-class PipeSymbol implements Symbol {
-  private _tsType: ts.Type;
-
-  constructor(private pipe: PipeInfo, private context: TypeContext) {}
-
-  get name(): string { return this.pipe.name; }
-
-  get kind(): CompletionKind { return 'pipe'; }
-
-  get language(): string { return 'typescript'; }
-
-  get type(): Symbol|undefined { return new TypeWrapper(this.tsType, this.context); }
-
-  get container(): Symbol|undefined { return undefined; }
-
-  get callable(): boolean { return true; }
-
-  get public(): boolean { return true; }
-
-  get definition(): Definition { return definitionFromTsSymbol(this.tsType.getSymbol()); }
-
-  members(): SymbolTable { return EmptyTable.instance; }
-
-  signatures(): Signature[] { return signaturesOf(this.tsType, this.context); }
-
-  selectSignature(types: Symbol[]): Signature|undefined {
-    let signature = selectSignature(this.tsType, this.context, types) !;
-    if (types.length == 1) {
-      const parameterType = types[0];
-      if (parameterType instanceof TypeWrapper) {
-        let resultType: ts.Type|undefined = undefined;
-        switch (this.name) {
-          case 'async':
-            switch (parameterType.name) {
-              case 'Observable':
-              case 'Promise':
-              case 'EventEmitter':
-                resultType = getTypeParameterOf(parameterType.tsType, parameterType.name);
-                break;
-              default:
-                resultType = getBuiltinTypeFromTs(BuiltinType.Any, this.context);
-                break;
-            }
-            break;
-          case 'slice':
-            resultType = getTypeParameterOf(parameterType.tsType, 'Array');
-            break;
-        }
-        if (resultType) {
-          signature = new SignatureResultOverride(
-              signature, new TypeWrapper(resultType, parameterType.context));
-        }
-      }
-    }
-    return signature;
-  }
-
-  indexed(argument: Symbol): Symbol|undefined { return undefined; }
-
-  private get tsType(): ts.Type {
-    let type = this._tsType;
-    if (!type) {
-      const classSymbol = this.findClassSymbol(this.pipe.symbol);
-      if (classSymbol) {
-        type = this._tsType = this.findTransformMethodType(classSymbol) !;
-      }
-      if (!type) {
-        type = this._tsType = getBuiltinTypeFromTs(BuiltinType.Any, this.context);
-      }
-    }
-    return type;
-  }
-
-  private findClassSymbol(type: StaticSymbol): ts.Symbol|undefined {
-    return findClassSymbolInContext(type, this.context);
-  }
-
-  private findTransformMethodType(classSymbol: ts.Symbol): ts.Type|undefined {
-    const classType = this.context.checker.getDeclaredTypeOfSymbol(classSymbol);
-    if (classType) {
-      const transform = classType.getProperty('transform');
-      if (transform) {
-        return this.context.checker.getTypeOfSymbolAtLocation(transform, this.context.node);
-      }
-    }
-  }
-}
-
-function findClassSymbolInContext(type: StaticSymbol, context: TypeContext): ts.Symbol|undefined {
-  const sourceFile = context.program.getSourceFile(type.filePath);
-  if (sourceFile) {
-    const moduleSymbol = (sourceFile as any).module || (sourceFile as any).symbol;
-    const exports = context.checker.getExportsOfModule(moduleSymbol);
-    return (exports || []).find(symbol => symbol.name == type.name);
-  }
-}
-
-class EmptyTable implements SymbolTable {
-  get size(): number { return 0; }
-  get(key: string): Symbol|undefined { return undefined; }
-  has(key: string): boolean { return false; }
-  values(): Symbol[] { return []; }
-  static instance = new EmptyTable();
-}
 
 function findTsConfig(fileName: string): string|undefined {
   let dir = path.dirname(fileName);
@@ -1107,94 +571,6 @@ function findTsConfig(fileName: string): string|undefined {
   }
 }
 
-function isBindingPattern(node: ts.Node): node is ts.BindingPattern {
-  return !!node && (node.kind === ts.SyntaxKind.ArrayBindingPattern ||
-                    node.kind === ts.SyntaxKind.ObjectBindingPattern);
-}
-
-function walkUpBindingElementsAndPatterns(node: ts.Node): ts.Node {
-  while (node && (node.kind === ts.SyntaxKind.BindingElement || isBindingPattern(node))) {
-    node = node.parent !;
-  }
-
-  return node;
-}
-
-function getCombinedNodeFlags(node: ts.Node): ts.NodeFlags {
-  node = walkUpBindingElementsAndPatterns(node);
-
-  let flags = node.flags;
-  if (node.kind === ts.SyntaxKind.VariableDeclaration) {
-    node = node.parent !;
-  }
-
-  if (node && node.kind === ts.SyntaxKind.VariableDeclarationList) {
-    flags |= node.flags;
-    node = node.parent !;
-  }
-
-  if (node && node.kind === ts.SyntaxKind.VariableStatement) {
-    flags |= node.flags;
-  }
-
-  return flags;
-}
-
-function isSymbolPrivate(s: ts.Symbol): boolean {
-  return !!s.valueDeclaration && isPrivate(s.valueDeclaration);
-}
-
-function getBuiltinTypeFromTs(kind: BuiltinType, context: TypeContext): ts.Type {
-  let type: ts.Type;
-  const checker = context.checker;
-  const node = context.node;
-  switch (kind) {
-    case BuiltinType.Any:
-      type = checker.getTypeAtLocation(setParents(
-          <ts.Node><any>{
-            kind: ts.SyntaxKind.AsExpression,
-            expression: <ts.Node>{kind: ts.SyntaxKind.TrueKeyword},
-            type: <ts.Node>{kind: ts.SyntaxKind.AnyKeyword}
-          },
-          node));
-      break;
-    case BuiltinType.Boolean:
-      type =
-          checker.getTypeAtLocation(setParents(<ts.Node>{kind: ts.SyntaxKind.TrueKeyword}, node));
-      break;
-    case BuiltinType.Null:
-      type =
-          checker.getTypeAtLocation(setParents(<ts.Node>{kind: ts.SyntaxKind.NullKeyword}, node));
-      break;
-    case BuiltinType.Number:
-      const numeric = <ts.Node>{kind: ts.SyntaxKind.NumericLiteral};
-      setParents(<any>{kind: ts.SyntaxKind.ExpressionStatement, expression: numeric}, node);
-      type = checker.getTypeAtLocation(numeric);
-      break;
-    case BuiltinType.String:
-      type = checker.getTypeAtLocation(
-          setParents(<ts.Node>{kind: ts.SyntaxKind.NoSubstitutionTemplateLiteral}, node));
-      break;
-    case BuiltinType.Undefined:
-      type = checker.getTypeAtLocation(setParents(
-          <ts.Node><any>{
-            kind: ts.SyntaxKind.VoidExpression,
-            expression: <ts.Node>{kind: ts.SyntaxKind.NumericLiteral}
-          },
-          node));
-      break;
-    default:
-      throw new Error(`Internal error, unhandled literal kind ${kind}:${BuiltinType[kind]}`);
-  }
-  return type;
-}
-
-function setParents<T extends ts.Node>(node: T, parent: ts.Node): T {
-  node.parent = parent;
-  ts.forEachChild(node, child => setParents(child, node));
-  return node;
-}
-
 function spanOf(node: ts.Node): Span {
   return {start: node.getStart(), end: node.getEnd()};
 }
@@ -1220,85 +596,3 @@ function spanAt(sourceFile: ts.SourceFile, line: number, column: number): Span|u
     }
   }
 }
-
-function definitionFromTsSymbol(symbol: ts.Symbol): Definition {
-  const declarations = symbol.declarations;
-  if (declarations) {
-    return declarations.map(declaration => {
-      const sourceFile = declaration.getSourceFile();
-      return {
-        fileName: sourceFile.fileName,
-        span: {start: declaration.getStart(), end: declaration.getEnd()}
-      };
-    });
-  }
-}
-
-function parentDeclarationOf(node: ts.Node): ts.Node|undefined {
-  while (node) {
-    switch (node.kind) {
-      case ts.SyntaxKind.ClassDeclaration:
-      case ts.SyntaxKind.InterfaceDeclaration:
-        return node;
-      case ts.SyntaxKind.SourceFile:
-        return undefined;
-    }
-    node = node.parent !;
-  }
-}
-
-function getContainerOf(symbol: ts.Symbol, context: TypeContext): Symbol|undefined {
-  if (symbol.getFlags() & ts.SymbolFlags.ClassMember && symbol.declarations) {
-    for (const declaration of symbol.declarations) {
-      const parent = parentDeclarationOf(declaration);
-      if (parent) {
-        const type = context.checker.getTypeAtLocation(parent);
-        if (type) {
-          return new TypeWrapper(type, context);
-        }
-      }
-    }
-  }
-}
-
-function getTypeParameterOf(type: ts.Type, name: string): ts.Type|undefined {
-  if (type && type.symbol && type.symbol.name == name) {
-    const typeArguments: ts.Type[] = (type as any).typeArguments;
-    if (typeArguments && typeArguments.length <= 1) {
-      return typeArguments[0];
-    }
-  }
-}
-
-function typeKindOf(type: ts.Type): BuiltinType {
-  if (type) {
-    if (type.flags & ts.TypeFlags.Any) {
-      return BuiltinType.Any;
-    } else if (
-        type.flags & (ts.TypeFlags.String | ts.TypeFlags.StringLike | ts.TypeFlags.StringLiteral)) {
-      return BuiltinType.String;
-    } else if (type.flags & (ts.TypeFlags.Number | ts.TypeFlags.NumberLike)) {
-      return BuiltinType.Number;
-    } else if (type.flags & (ts.TypeFlags.Undefined)) {
-      return BuiltinType.Undefined;
-    } else if (type.flags & (ts.TypeFlags.Null)) {
-      return BuiltinType.Null;
-    } else if (type.flags & ts.TypeFlags.Union) {
-      // If all the constituent types of a union are the same kind, it is also that kind.
-      let candidate: BuiltinType = undefined !;
-      const unionType = type as ts.UnionType;
-      if (unionType.types.length > 0) {
-        candidate = typeKindOf(unionType.types[0]) !;
-        for (const subType of unionType.types) {
-          if (candidate != typeKindOf(subType)) {
-            return BuiltinType.Other;
-          }
-        }
-      }
-      return candidate;
-    } else if (type.flags & ts.TypeFlags.TypeParameter) {
-      return BuiltinType.Unbound;
-    }
-  }
-  return BuiltinType.Other;
-}
diff --git a/packages/language-service/src/utils.ts b/packages/language-service/src/utils.ts
index 3287be5440..425b9fbd6d 100644
--- a/packages/language-service/src/utils.ts
+++ b/packages/language-service/src/utils.ts
@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompileDirectiveSummary, CompileTypeMetadata, CssSelector, ParseSourceSpan, SelectorMatcher, identifierName} from '@angular/compiler';
+import {AstPath, CompileDirectiveSummary, CompileTypeMetadata, CssSelector, DirectiveAst, ElementAst, EmbeddedTemplateAst, HtmlAstPath, Node as HtmlNode, ParseSourceSpan, RecursiveTemplateAstVisitor, RecursiveVisitor, TemplateAst, TemplateAstPath, identifierName, templateVisitAll, visitAll} from '@angular/compiler';
+import {DiagnosticTemplateInfo} from '@angular/compiler-cli';
+import * as ts from 'typescript';
 
 import {SelectorInfo, TemplateInfo} from './common';
 import {Span} from './types';
@@ -21,6 +23,9 @@ export function isParseSourceSpan(value: any): value is ParseSourceSpan {
   return value && !!value.start;
 }
 
+export function spanOf(span: SpanHolder): Span;
+export function spanOf(span: ParseSourceSpan): Span;
+export function spanOf(span: SpanHolder | ParseSourceSpan | undefined): Span|undefined;
 export function spanOf(span?: SpanHolder | ParseSourceSpan): Span|undefined {
   if (!span) return undefined;
   if (isParseSourceSpan(span)) {
@@ -39,8 +44,8 @@ export function spanOf(span?: SpanHolder | ParseSourceSpan): Span|undefined {
 }
 
 export function inSpan(position: number, span?: Span, exclusive?: boolean): boolean {
-  return span && exclusive ? position >= span.start && position < span.end :
-                             position >= span !.start && position <= span !.end;
+  return span != null && (exclusive ? position >= span.start && position < span.end :
+                                      position >= span.start && position <= span.end);
 }
 
 export function offsetSpan(span: Span, amount: number): Span {
@@ -54,7 +59,8 @@ export function isNarrower(spanA: Span, spanB: Span): boolean {
 export function hasTemplateReference(type: CompileTypeMetadata): boolean {
   if (type.diDeps) {
     for (let diDep of type.diDeps) {
-      if (diDep.token !.identifier && identifierName(diDep.token !.identifier !) == 'TemplateRef')
+      if (diDep.token && diDep.token.identifier &&
+          identifierName(diDep.token !.identifier !) == 'TemplateRef')
         return true;
     }
   }
@@ -96,3 +102,78 @@ export function uniqueByName < T extends {
     return result;
   }
 }
+
+export function isTypescriptVersion(low: string, high?: string) {
+  const version = ts.version;
+
+  if (version.substring(0, low.length) < low) return false;
+
+  if (high && (version.substring(0, high.length) > high)) return false;
+
+  return true;
+}
+
+export function diagnosticInfoFromTemplateInfo(info: TemplateInfo): DiagnosticTemplateInfo {
+  return {
+    fileName: info.fileName,
+    offset: info.template.span.start,
+    query: info.template.query,
+    members: info.template.members,
+    htmlAst: info.htmlAst,
+    templateAst: info.templateAst
+  };
+}
+
+export function findTemplateAstAt(
+    ast: TemplateAst[], position: number, allowWidening: boolean = false): TemplateAstPath {
+  const path: TemplateAst[] = [];
+  const visitor = new class extends RecursiveTemplateAstVisitor {
+    visit(ast: TemplateAst, context: any): any {
+      let span = spanOf(ast);
+      if (inSpan(position, span)) {
+        const len = path.length;
+        if (!len || allowWidening || isNarrower(span, spanOf(path[len - 1]))) {
+          path.push(ast);
+        }
+      } else {
+        // Returning a value here will result in the children being skipped.
+        return true;
+      }
+    }
+
+    visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
+      return this.visitChildren(context, visit => {
+        // Ignore reference, variable and providers
+        visit(ast.attrs);
+        visit(ast.directives);
+        visit(ast.children);
+      });
+    }
+
+    visitElement(ast: ElementAst, context: any): any {
+      return this.visitChildren(context, visit => {
+        // Ingnore providers
+        visit(ast.attrs);
+        visit(ast.inputs);
+        visit(ast.outputs);
+        visit(ast.references);
+        visit(ast.directives);
+        visit(ast.children);
+      });
+    }
+
+    visitDirective(ast: DirectiveAst, context: any): any {
+      // Ignore the host properties of a directive
+      const result = this.visitChildren(context, visit => { visit(ast.inputs); });
+      // We never care about the diretive itself, just its inputs.
+      if (path[path.length - 1] == ast) {
+        path.pop();
+      }
+      return result;
+    }
+  };
+
+  templateVisitAll(visitor, ast);
+
+  return new AstPath<TemplateAst>(path, position);
+}
diff --git a/packages/language-service/test/diagnostics_spec.ts b/packages/language-service/test/diagnostics_spec.ts
index eb9131f9ef..d8b85f1063 100644
--- a/packages/language-service/test/diagnostics_spec.ts
+++ b/packages/language-service/test/diagnostics_spec.ts
@@ -59,6 +59,10 @@ describe('diagnostics', () => {
         (ngHost as any)._reflector = null;
         ngService.getDiagnostics(fileName);
       });
+
+      // #17611
+      it('should not report diagnostic on iteration of any',
+         () => { accept('<div *ngFor="let value of anyValue">{{value.someField}}</div>'); });
     });
 
     describe('with $event', () => {
@@ -95,7 +99,7 @@ describe('diagnostics', () => {
       const code = '\n@Component({template: \'<form></form>\'}) export class MyComponent {}';
       addCode(code, (fileName, content) => {
         const diagnostics = ngService.getDiagnostics(fileName);
-        onlyModuleDiagnostics(diagnostics !);
+        expectOnlyModuleDiagnostics(diagnostics !);
       });
     });
 
@@ -134,7 +138,7 @@ describe('diagnostics', () => {
           ` @Component({template: \`<div *ngIf="something === 'foo'"></div>\`}) export class MyComponent { something: 'foo' | 'bar'; }`;
       addCode(code, fileName => {
         const diagnostics = ngService.getDiagnostics(fileName);
-        onlyModuleDiagnostics(diagnostics !);
+        expectOnlyModuleDiagnostics(diagnostics !);
       });
     });
 
@@ -155,7 +159,7 @@ describe('diagnostics', () => {
           ` @Component({template: \`<div *ngIf="something === undefined"></div>\`}) export class MyComponent { something = 'foo'; }})`;
       addCode(code, fileName => {
         const diagnostics = ngService.getDiagnostics(fileName);
-        onlyModuleDiagnostics(diagnostics !);
+        expectOnlyModuleDiagnostics(diagnostics !);
       });
     });
 
@@ -211,7 +215,7 @@ describe('diagnostics', () => {
        export class MyComponent {}
       `,
           fileName => {
-            const diagnostics = ngService.getDiagnostics(fileName);
+            const diagnostics = ngService.getDiagnostics(fileName) !;
             const expected = diagnostics.find(d => d.message.startsWith('Invalid providers for'));
             const notExpected = diagnostics.find(d => d.message.startsWith('Cannot read property'));
             expect(expected).toBeDefined();
@@ -233,7 +237,7 @@ describe('diagnostics', () => {
         })
         export class MyComponent {}
       `,
-          fileName => onlyModuleDiagnostics(ngService.getDiagnostics(fileName)));
+          fileName => expectOnlyModuleDiagnostics(ngService.getDiagnostics(fileName) !));
     });
 
     // Issue #15625
@@ -253,11 +257,63 @@ describe('diagnostics', () => {
           }
       `,
           fileName => {
-            const diagnostics = ngService.getDiagnostics(fileName);
-            onlyModuleDiagnostics(diagnostics);
+            const diagnostics = ngService.getDiagnostics(fileName) !;
+            expectOnlyModuleDiagnostics(diagnostics);
           });
     });
 
+    // Issue #15885
+    it('should be able to remove null and undefined from a type', () => {
+      mockHost.overrideOptions(options => {
+        options.strictNullChecks = true;
+        return options;
+      });
+      addCode(
+          `
+        @Component({
+          selector: 'my-component',
+          template: \` {{test?.a}}
+          \`
+        })
+        export class MyComponent {
+          test: {a: number, b: number} | null = {
+            a: 1,
+            b: 2
+          };
+        }
+      `,
+          fileName => expectOnlyModuleDiagnostics(ngService.getDiagnostics(fileName)));
+    });
+
+    it('should be able to resolve modules using baseUrl', () => {
+      const app_component = `
+        import { Component } from '@angular/core';
+        import { NgForm } from '@angular/common';
+        import { Server } from 'app/server';
+
+        @Component({
+          selector: 'example-app',
+          template: '...',
+          providers: [Server]
+        })
+        export class AppComponent {
+          onSubmit(form: NgForm) {}
+        }
+      `;
+      const app_server = `
+        export class Server {}
+      `;
+      const fileName = '/app/app.component.ts';
+      mockHost.override(fileName, app_component);
+      mockHost.addScript('/other/files/app/server.ts', app_server);
+      mockHost.overrideOptions(options => {
+        options.baseUrl = '/other/files';
+        return options;
+      });
+      const diagnostic = ngService.getDiagnostics(fileName);
+      expect(diagnostic).toEqual([]);
+    });
+
     function addCode(code: string, cb: (fileName: string, content?: string) => void) {
       const fileName = '/app/app.component.ts';
       const originalContent = mockHost.getFileContent(fileName);
@@ -271,8 +327,9 @@ describe('diagnostics', () => {
       }
     }
 
-    function onlyModuleDiagnostics(diagnostics: Diagnostics) {
+    function expectOnlyModuleDiagnostics(diagnostics: Diagnostics | undefined) {
       // Expect only the 'MyComponent' diagnostic
+      if (!diagnostics) throw new Error('Expecting Diagnostics');
       expect(diagnostics.length).toBe(1);
       if (diagnostics.length > 1) {
         for (const diagnostic of diagnostics) {
diff --git a/packages/language-service/test/hover_spec.ts b/packages/language-service/test/hover_spec.ts
index 3cada95ae2..b07ecb79c5 100644
--- a/packages/language-service/test/hover_spec.ts
+++ b/packages/language-service/test/hover_spec.ts
@@ -68,6 +68,16 @@ describe('hover', () => {
         'property name of TestComponent');
   });
 
+  it('should be able to ignore a reference declaration', () => {
+    addCode(
+        ` @Component({template: '<div #«chart»></div>'}) export class MyComponent {  }`,
+        fileName => {
+          const markers = mockHost.getReferenceMarkers(fileName) !;
+          const hover = ngService.getHoverAt(fileName, markers.references.chart[0].start);
+          expect(hover).toBeUndefined();
+        });
+  });
+
   function hover(code: string, hoverText: string) {
     addCode(code, fileName => {
       let tests = 0;
diff --git a/packages/language-service/test/language_service_spec.ts b/packages/language-service/test/language_service_spec.ts
index 0aa5537185..976cae1c30 100644
--- a/packages/language-service/test/language_service_spec.ts
+++ b/packages/language-service/test/language_service_spec.ts
@@ -30,7 +30,7 @@ describe('service without angular', () => {
      () => expect(() => ngService.getDiagnostics(fileName)).not.toThrow());
   it('should not crash a completion',
      () => expect(() => ngService.getCompletionsAt(fileName, position)).not.toThrow());
-  it('should not crash a get defintion',
+  it('should not crash a get definition',
      () => expect(() => ngService.getDefinitionAt(fileName, position)).not.toThrow());
   it('should not crash a hover', () => expect(() => ngService.getHoverAt(fileName, position)));
 });
\ No newline at end of file
diff --git a/packages/language-service/test/test_data.ts b/packages/language-service/test/test_data.ts
index 737fc130aa..b4eb785ef1 100644
--- a/packages/language-service/test/test_data.ts
+++ b/packages/language-service/test/test_data.ts
@@ -148,6 +148,7 @@ export class TemplateReference {
     id: 1,
     name: 'Windstorm'
   };
+  anyValue: any;
   myClick(event: any) {
 
   }
diff --git a/packages/language-service/test/test_utils.ts b/packages/language-service/test/test_utils.ts
index 380c652ad9..399dc3aa53 100644
--- a/packages/language-service/test/test_utils.ts
+++ b/packages/language-service/test/test_utils.ts
@@ -68,6 +68,8 @@ export class MockTypescriptHost implements ts.LanguageServiceHost {
   private scriptVersion = new Map<string, number>();
   private overrides = new Map<string, string>();
   private projectVersion = 0;
+  private options: ts.CompilerOptions;
+  private overrideDirectory = new Set<string>();
 
   constructor(private scriptNames: string[], private data: MockData) {
     const moduleFilename = module.filename.replace(/\\/g, '/');
@@ -77,30 +79,7 @@ export class MockTypescriptHost implements ts.LanguageServiceHost {
     let distIndex = moduleFilename.indexOf('/dist/all');
     if (distIndex >= 0)
       this.nodeModulesPath = path.join(moduleFilename.substr(0, distIndex), 'node_modules');
-  }
-
-  override(fileName: string, content: string) {
-    this.scriptVersion.set(fileName, (this.scriptVersion.get(fileName) || 0) + 1);
-    if (fileName.endsWith('.ts')) {
-      this.projectVersion++;
-    }
-    if (content) {
-      this.overrides.set(fileName, content);
-    } else {
-      this.overrides.delete(fileName);
-    }
-  }
-
-  addScript(fileName: string, content: string) {
-    this.projectVersion++;
-    this.overrides.set(fileName, content);
-    this.scriptNames.push(fileName);
-  }
-
-  forgetAngular() { this.angularPath = undefined; }
-
-  getCompilationSettings(): ts.CompilerOptions {
-    return {
+    this.options = {
       target: ts.ScriptTarget.ES5,
       module: ts.ModuleKind.CommonJS,
       moduleResolution: ts.ModuleResolutionKind.NodeJs,
@@ -112,6 +91,35 @@ export class MockTypescriptHost implements ts.LanguageServiceHost {
     };
   }
 
+  override(fileName: string, content: string) {
+    this.scriptVersion.set(fileName, (this.scriptVersion.get(fileName) || 0) + 1);
+    if (fileName.endsWith('.ts')) {
+      this.projectVersion++;
+    }
+    if (content) {
+      this.overrides.set(fileName, content);
+      this.overrideDirectory.add(path.dirname(fileName));
+    } else {
+      this.overrides.delete(fileName);
+    }
+  }
+
+  addScript(fileName: string, content: string) {
+    this.projectVersion++;
+    this.overrides.set(fileName, content);
+    this.overrideDirectory.add(path.dirname(fileName));
+    this.scriptNames.push(fileName);
+  }
+
+  forgetAngular() { this.angularPath = undefined; }
+
+  overrideOptions(cb: (options: ts.CompilerOptions) => ts.CompilerOptions) {
+    this.options = cb((Object as any).assign({}, this.options));
+    this.projectVersion++;
+  }
+
+  getCompilationSettings(): ts.CompilerOptions { return this.options; }
+
   getProjectVersion(): string { return this.projectVersion.toString(); }
 
   getScriptFileNames(): string[] { return this.scriptNames; }
@@ -131,6 +139,7 @@ export class MockTypescriptHost implements ts.LanguageServiceHost {
   getDefaultLibFileName(options: ts.CompilerOptions): string { return 'lib.d.ts'; }
 
   directoryExists(directoryName: string): boolean {
+    if (this.overrideDirectory.has(directoryName)) return true;
     let effectiveName = this.getEffectiveName(directoryName);
     if (effectiveName === directoryName)
       return directoryExists(directoryName, this.data);
diff --git a/packages/language-service/test/ts_plugin_spec.ts b/packages/language-service/test/ts_plugin_spec.ts
index bbed4adcc7..4094055ca4 100644
--- a/packages/language-service/test/ts_plugin_spec.ts
+++ b/packages/language-service/test/ts_plugin_spec.ts
@@ -142,7 +142,7 @@ describe('plugin', () => {
     it('should reference the component',
        () => { contains('app/parsing-cases.ts', 'test-comp-after-test', 'name'); });
     // TODO: Enable when we have a flag that indicates the project targets the DOM
-    // it('should refernce the element if no component', () => {
+    // it('should reference the element if no component', () => {
     //   contains('app/parsing-cases.ts', 'test-comp-after-div', 'innerText');
     // });
   });
@@ -163,7 +163,7 @@ describe('plugin', () => {
           'app/expression-cases.ts', 'myField',
           'Identifier \'myField\' refers to a private member of the component');
     });
-    it('should report numeric operator erros',
+    it('should report numeric operator errors',
        () => { expectSemanticError('app/expression-cases.ts', 'mod', 'Expected a numeric type'); });
     describe('in ngFor', () => {
       function expectError(locationMarker: string, message: string) {
diff --git a/packages/language-service/tsconfig-build.json b/packages/language-service/tsconfig-build.json
index bab561736e..96a8d2658a 100644
--- a/packages/language-service/tsconfig-build.json
+++ b/packages/language-service/tsconfig-build.json
@@ -20,8 +20,8 @@
       "@angular/http": ["../../dist/packages/http"],
       "@angular/platform-server": ["../../dist/packages/platform-server"],
       "@angular/platform-browser": ["../../dist/packages/platform-browser"],
-      "@angular/tsc-wrapped": ["../../dist/tools/@angular/tsc-wrapped"],
-      "@angular/tsc-wrapped/*": ["../../dist/tools/@angular/tsc-wrapped/*"]
+      "@angular/tsc-wrapped": ["../../dist/packages-dist/tsc-wrapped"],
+      "@angular/tsc-wrapped/*": ["../../dist/packages-dist/tsc-wrapped/*"]
     },
     "rootDir": ".",
     "sourceMap": true,
diff --git a/packages/platform-browser-dynamic/package.json b/packages/platform-browser-dynamic/package.json
index 1bf868775c..24c145de80 100644
--- a/packages/platform-browser-dynamic/package.json
+++ b/packages/platform-browser-dynamic/package.json
@@ -8,6 +8,9 @@
   "typings": "./platform-browser-dynamic.d.ts",
   "author": "angular",
   "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "@angular/core": "0.0.0-PLACEHOLDER",
     "@angular/common": "0.0.0-PLACEHOLDER",
diff --git a/packages/platform-browser-dynamic/rollup.config.js b/packages/platform-browser-dynamic/rollup.config.js
index 253a1f8cb0..cea47db5ac 100644
--- a/packages/platform-browser-dynamic/rollup.config.js
+++ b/packages/platform-browser-dynamic/rollup.config.js
@@ -6,6 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/platform-browser': 'ng.platformBrowser',
+};
+
 export default {
   entry:
       '../../dist/packages-dist/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js',
@@ -13,10 +22,7 @@ export default {
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.platformBrowserDynamic',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/compiler': 'ng.compiler',
-    '@angular/platform-browser': 'ng.platformBrowser',
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/platform-browser-dynamic/test/testing_public_browser_spec.ts b/packages/platform-browser-dynamic/test/testing_public_browser_spec.ts
index bab73cd024..b9afecaaf5 100644
--- a/packages/platform-browser-dynamic/test/testing_public_browser_spec.ts
+++ b/packages/platform-browser-dynamic/test/testing_public_browser_spec.ts
@@ -31,7 +31,7 @@ class FancyService {
 class ExternalTemplateComp {
 }
 
-@Component({selector: 'bad-template-comp', templateUrl: 'non-existant.html'})
+@Component({selector: 'bad-template-comp', templateUrl: 'non-existent.html'})
 class BadTemplateUrl {
 }
 
@@ -87,7 +87,7 @@ export function main() {
           reject = rej;
         });
         originalJasmineIt = jasmine.getEnv().it;
-        jasmine.getEnv().it = (description: string, fn: any /** TODO #9100 */) => {
+        jasmine.getEnv().it = (description: string, fn: any /** TODO #9100 */): any => {
           const done = () => { resolve(null); };
           (<any>done).fail = (err: any /** TODO #9100 */) => { reject(err); };
           fn(done);
@@ -110,7 +110,7 @@ export function main() {
             () => { done.fail('Expected test to fail, but it did not'); },
             (err: any) => {
               expect(err.message)
-                  .toEqual('Uncaught (in promise): Failed to load non-existant.html');
+                  .toEqual('Uncaught (in promise): Failed to load non-existent.html');
               done();
             });
         restoreJasmineIt();
diff --git a/packages/platform-browser-dynamic/testing/rollup.config.js b/packages/platform-browser-dynamic/testing/rollup.config.js
index a6b0ebb95c..1b110a53e4 100644
--- a/packages/platform-browser-dynamic/testing/rollup.config.js
+++ b/packages/platform-browser-dynamic/testing/rollup.config.js
@@ -6,6 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/core/testing': 'ng.core.testing',
+  '@angular/common': 'ng.common',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/compiler/testing': 'ng.compiler.testing',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/platform-browser/testing': 'ng.platformBrowser.testing',
+  '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic'
+};
+
 export default {
   entry:
       '../../../dist/packages-dist/platform-browser-dynamic/@angular/platform-browser-dynamic/testing.es5.js',
@@ -14,14 +27,7 @@ export default {
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.platformBrowserDynamic.testing',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/core/testing': 'ng.core.testing',
-    '@angular/common': 'ng.common',
-    '@angular/compiler': 'ng.compiler',
-    '@angular/compiler/testing': 'ng.compiler.testing',
-    '@angular/platform-browser': 'ng.platformBrowser',
-    '@angular/platform-browser/testing': 'ng.platformBrowser.testing',
-    '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/platform-browser-dynamic/tsconfig-build.json b/packages/platform-browser-dynamic/tsconfig-build.json
index 8f2ecfab7e..6970ccf9a7 100644
--- a/packages/platform-browser-dynamic/tsconfig-build.json
+++ b/packages/platform-browser-dynamic/tsconfig-build.json
@@ -4,6 +4,7 @@
     "declaration": true,
     "stripInternal": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "module": "es2015",
     "moduleResolution": "node",
     "outDir": "../../dist/packages/platform-browser-dynamic",
diff --git a/packages/platform-browser/animations/rollup.config.js b/packages/platform-browser/animations/rollup.config.js
index cffa249e39..e96c5664e8 100644
--- a/packages/platform-browser/animations/rollup.config.js
+++ b/packages/platform-browser/animations/rollup.config.js
@@ -6,17 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/animations': 'ng.animations',
+  '@angular/animations/browser': 'ng.animations.browser'
+};
+
 export default {
   entry: '../../../dist/packages-dist/platform-browser/@angular/platform-browser/animations.es5.js',
   dest: '../../../dist/packages-dist/platform-browser/bundles/platform-browser-animations.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.platformBrowser.animations',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/platform-browser': 'ng.platformBrowser',
-    '@angular/animations': 'ng.animations',
-    '@angular/animations/browser': 'ng.animations.browser'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/platform-browser/animations/src/animation_builder.ts b/packages/platform-browser/animations/src/animation_builder.ts
new file mode 100644
index 0000000000..d94f6c5e2d
--- /dev/null
+++ b/packages/platform-browser/animations/src/animation_builder.ts
@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AnimationBuilder, AnimationFactory, AnimationMetadata, AnimationOptions, AnimationPlayer, NoopAnimationPlayer, sequence} from '@angular/animations';
+import {Injectable, RendererFactory2, RendererType2, ViewEncapsulation} from '@angular/core';
+
+import {AnimationRenderer} from './animation_renderer';
+
+@Injectable()
+export class BrowserAnimationBuilder extends AnimationBuilder {
+  private _nextAnimationId = 0;
+  private _renderer: AnimationRenderer;
+
+  constructor(rootRenderer: RendererFactory2) {
+    super();
+    const typeData = {
+      id: '0',
+      encapsulation: ViewEncapsulation.None,
+      styles: [],
+      data: {animation: []}
+    } as RendererType2;
+    this._renderer = rootRenderer.createRenderer(document.body, typeData) as AnimationRenderer;
+  }
+
+  build(animation: AnimationMetadata|AnimationMetadata[]): AnimationFactory {
+    const id = this._nextAnimationId.toString();
+    this._nextAnimationId++;
+    const entry = Array.isArray(animation) ? sequence(animation) : animation;
+    issueAnimationCommand(this._renderer, null, id, 'register', [entry]);
+    return new BrowserAnimationFactory(id, this._renderer);
+  }
+}
+
+export class BrowserAnimationFactory extends AnimationFactory {
+  constructor(private _id: string, private _renderer: AnimationRenderer) { super(); }
+
+  create(element: any, options?: AnimationOptions): AnimationPlayer {
+    return new RendererAnimationPlayer(this._id, element, options || {}, this._renderer);
+  }
+}
+
+export class RendererAnimationPlayer implements AnimationPlayer {
+  public parentPlayer: AnimationPlayer|null = null;
+  private _started = false;
+
+  constructor(
+      public id: string, public element: any, options: AnimationOptions,
+      private _renderer: AnimationRenderer) {
+    this._command('create', options);
+  }
+
+  private _listen(eventName: string, callback: (event: any) => any): () => void {
+    return this._renderer.listen(this.element, `@@${this.id}:${eventName}`, callback);
+  }
+
+  private _command(command: string, ...args: any[]) {
+    return issueAnimationCommand(this._renderer, this.element, this.id, command, args);
+  }
+
+  onDone(fn: () => void): void { this._listen('done', fn); }
+
+  onStart(fn: () => void): void { this._listen('start', fn); }
+
+  onDestroy(fn: () => void): void { this._listen('destroy', fn); }
+
+  init(): void { this._command('init'); }
+
+  hasStarted(): boolean { return this._started; }
+
+  play(): void {
+    this._command('play');
+    this._started = true;
+  }
+
+  pause(): void { this._command('pause'); }
+
+  restart(): void { this._command('restart'); }
+
+  finish(): void { this._command('finish'); }
+
+  destroy(): void { this._command('destroy'); }
+
+  reset(): void { this._command('reset'); }
+
+  setPosition(p: number): void { this._command('setPosition', p); }
+
+  getPosition(): number { return 0; }
+
+  public totalTime = 0;
+}
+
+function issueAnimationCommand(
+    renderer: AnimationRenderer, element: any, id: string, command: string, args: any[]): any {
+  return renderer.setProperty(element, `@@${id}:${command}`, args);
+}
diff --git a/packages/platform-browser/animations/src/animation_renderer.ts b/packages/platform-browser/animations/src/animation_renderer.ts
index 02850265e2..a1addaf351 100644
--- a/packages/platform-browser/animations/src/animation_renderer.ts
+++ b/packages/platform-browser/animations/src/animation_renderer.ts
@@ -9,59 +9,158 @@ import {AnimationTriggerMetadata} from '@angular/animations';
 import {ɵAnimationEngine as AnimationEngine} from '@angular/animations/browser';
 import {Injectable, NgZone, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '@angular/core';
 
+const ANIMATION_PREFIX = '@';
+const DISABLE_ANIMATIONS_FLAG = '@.disabled';
+
 @Injectable()
 export class AnimationRendererFactory implements RendererFactory2 {
+  private _currentId: number = 0;
+  private _microtaskId: number = 1;
+  private _animationCallbacksBuffer: [(e: any) => any, any][] = [];
+  private _rendererCache = new Map<Renderer2, BaseAnimationRenderer>();
+  private _cdRecurDepth = 0;
+
   constructor(
-      private delegate: RendererFactory2, private _engine: AnimationEngine, private _zone: NgZone) {
+      private delegate: RendererFactory2, private engine: AnimationEngine, private _zone: NgZone) {
+    engine.onRemovalComplete = (element: any, delegate: Renderer2) => {
+      // Note: if an component element has a leave animation, and the component
+      // a host leave animation, the view engine will call `removeChild` for the parent
+      // component renderer as well as for the child component renderer.
+      // Therefore, we need to check if we already removed the element.
+      if (delegate && delegate.parentNode(element)) {
+        delegate.removeChild(element.parentNode, element);
+      }
+    };
   }
 
   createRenderer(hostElement: any, type: RendererType2): Renderer2 {
-    let delegate = this.delegate.createRenderer(hostElement, type);
-    if (!hostElement || !type || !type.data || !type.data['animation']) return delegate;
+    const EMPTY_NAMESPACE_ID = '';
 
-    const namespaceId = type.id;
+    // cache the delegates to find out which cached delegate can
+    // be used by which cached renderer
+    const delegate = this.delegate.createRenderer(hostElement, type);
+    if (!hostElement || !type || !type.data || !type.data['animation']) {
+      let renderer: BaseAnimationRenderer|undefined = this._rendererCache.get(delegate);
+      if (!renderer) {
+        renderer = new BaseAnimationRenderer(EMPTY_NAMESPACE_ID, delegate, this.engine);
+        // only cache this result when the base renderer is used
+        this._rendererCache.set(delegate, renderer);
+      }
+      return renderer;
+    }
+
+    const componentId = type.id;
+    const namespaceId = type.id + '-' + this._currentId;
+    this._currentId++;
+
+    this.engine.register(namespaceId, hostElement);
     const animationTriggers = type.data['animation'] as AnimationTriggerMetadata[];
     animationTriggers.forEach(
-        trigger => this._engine.registerTrigger(trigger, namespaceify(namespaceId, trigger.name)));
-    return new AnimationRenderer(delegate, this._engine, this._zone, namespaceId);
+        trigger => this.engine.registerTrigger(
+            componentId, namespaceId, hostElement, trigger.name, trigger));
+    return new AnimationRenderer(this, namespaceId, delegate, this.engine);
   }
+
+  begin() {
+    this._cdRecurDepth++;
+    if (this.delegate.begin) {
+      this.delegate.begin();
+    }
+  }
+
+  private _scheduleCountTask() {
+    Zone.current.scheduleMicroTask('incremenet the animation microtask', () => this._microtaskId++);
+  }
+
+  /* @internal */
+  scheduleListenerCallback(count: number, fn: (e: any) => any, data: any) {
+    if (count >= 0 && count < this._microtaskId) {
+      this._zone.run(() => fn(data));
+      return;
+    }
+
+    if (this._animationCallbacksBuffer.length == 0) {
+      Promise.resolve(null).then(() => {
+        this._zone.run(() => {
+          this._animationCallbacksBuffer.forEach(tuple => {
+            const [fn, data] = tuple;
+            fn(data);
+          });
+          this._animationCallbacksBuffer = [];
+        });
+      });
+    }
+
+    this._animationCallbacksBuffer.push([fn, data]);
+  }
+
+  end() {
+    this._cdRecurDepth--;
+
+    // this is to prevent animations from running twice when an inner
+    // component does CD when a parent component insted has inserted it
+    if (this._cdRecurDepth == 0) {
+      this._zone.runOutsideAngular(() => {
+        this._scheduleCountTask();
+        this.engine.flush(this._microtaskId);
+      });
+    }
+    if (this.delegate.end) {
+      this.delegate.end();
+    }
+  }
+
+  whenRenderingDone(): Promise<any> { return this.engine.whenRenderingDone(); }
 }
 
-export class AnimationRenderer implements Renderer2 {
-  public destroyNode: (node: any) => (void|any) = null;
-  private _flushPromise: Promise<any> = null;
-
+export class BaseAnimationRenderer implements Renderer2 {
   constructor(
-      public delegate: Renderer2, private _engine: AnimationEngine, private _zone: NgZone,
-      private _namespaceId: string) {
-    this.destroyNode = this.delegate.destroyNode ? (n) => delegate.destroyNode(n) : null;
+      protected namespaceId: string, public delegate: Renderer2, public engine: AnimationEngine) {
+    this.destroyNode = this.delegate.destroyNode ? (n) => delegate.destroyNode !(n) : null;
   }
 
   get data() { return this.delegate.data; }
 
-  destroy(): void { this.delegate.destroy(); }
+  destroyNode: ((n: any) => void)|null;
 
-  createElement(name: string, namespace?: string): any {
+  destroy(): void {
+    this.engine.destroy(this.namespaceId, this.delegate);
+    this.delegate.destroy();
+  }
+
+  createElement(name: string, namespace?: string|null|undefined) {
     return this.delegate.createElement(name, namespace);
   }
 
-  createComment(value: string): any { return this.delegate.createComment(value); }
+  createComment(value: string) { return this.delegate.createComment(value); }
 
-  createText(value: string): any { return this.delegate.createText(value); }
+  createText(value: string) { return this.delegate.createText(value); }
 
-  selectRootElement(selectorOrNode: string|any): any {
-    return this.delegate.selectRootElement(selectorOrNode);
+  appendChild(parent: any, newChild: any): void {
+    this.delegate.appendChild(parent, newChild);
+    this.engine.onInsert(this.namespaceId, newChild, parent, false);
   }
 
-  parentNode(node: any): any { return this.delegate.parentNode(node); }
+  insertBefore(parent: any, newChild: any, refChild: any): void {
+    this.delegate.insertBefore(parent, newChild, refChild);
+    this.engine.onInsert(this.namespaceId, newChild, parent, true);
+  }
 
-  nextSibling(node: any): any { return this.delegate.nextSibling(node); }
+  removeChild(parent: any, oldChild: any): void {
+    this.engine.onRemove(this.namespaceId, oldChild, this.delegate);
+  }
 
-  setAttribute(el: any, name: string, value: string, namespace?: string): void {
+  selectRootElement(selectorOrNode: any) { return this.delegate.selectRootElement(selectorOrNode); }
+
+  parentNode(node: any) { return this.delegate.parentNode(node); }
+
+  nextSibling(node: any) { return this.delegate.nextSibling(node); }
+
+  setAttribute(el: any, name: string, value: string, namespace?: string|null|undefined): void {
     this.delegate.setAttribute(el, name, value, namespace);
   }
 
-  removeAttribute(el: any, name: string, namespace?: string): void {
+  removeAttribute(el: any, name: string, namespace?: string|null|undefined): void {
     this.delegate.removeAttribute(el, name, namespace);
   }
 
@@ -69,43 +168,48 @@ export class AnimationRenderer implements Renderer2 {
 
   removeClass(el: any, name: string): void { this.delegate.removeClass(el, name); }
 
-  setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
+  setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2|undefined): void {
     this.delegate.setStyle(el, style, value, flags);
   }
 
-  removeStyle(el: any, style: string, flags: RendererStyleFlags2): void {
+  removeStyle(el: any, style: string, flags?: RendererStyleFlags2|undefined): void {
     this.delegate.removeStyle(el, style, flags);
   }
 
+  setProperty(el: any, name: string, value: any): void {
+    if (name.charAt(0) == ANIMATION_PREFIX && name == DISABLE_ANIMATIONS_FLAG) {
+      this.disableAnimations(el, !!value);
+    } else {
+      this.delegate.setProperty(el, name, value);
+    }
+  }
+
   setValue(node: any, value: string): void { this.delegate.setValue(node, value); }
 
-  appendChild(parent: any, newChild: any): void {
-    this._engine.onInsert(newChild, () => this.delegate.appendChild(parent, newChild));
-    this._queueFlush();
+  listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void {
+    return this.delegate.listen(target, eventName, callback);
   }
 
-  insertBefore(parent: any, newChild: any, refChild: any): void {
-    this._engine.onInsert(newChild, () => this.delegate.insertBefore(parent, newChild, refChild));
-    this._queueFlush();
+  protected disableAnimations(element: any, value: boolean) {
+    this.engine.disableAnimations(element, value);
   }
+}
 
-  removeChild(parent: any, oldChild: any): void {
-    this._engine.onRemove(oldChild, () => {
-      // Note: if an component element has a leave animation, and the component
-      // a host leave animation, the view engine will call `removeChild` for the parent
-      // component renderer as well as for the child component renderer.
-      // Therefore, we need to check if we already removed the element.
-      if (this.delegate.parentNode(oldChild)) {
-        this.delegate.removeChild(parent, oldChild);
-      }
-    });
-    this._queueFlush();
+export class AnimationRenderer extends BaseAnimationRenderer implements Renderer2 {
+  constructor(
+      public factory: AnimationRendererFactory, namespaceId: string, delegate: Renderer2,
+      engine: AnimationEngine) {
+    super(namespaceId, delegate, engine);
+    this.namespaceId = namespaceId;
   }
 
   setProperty(el: any, name: string, value: any): void {
-    if (name.charAt(0) == '@') {
-      this._engine.setProperty(el, namespaceify(this._namespaceId, name.substr(1)), value);
-      this._queueFlush();
+    if (name.charAt(0) == ANIMATION_PREFIX) {
+      if (name.charAt(1) == '.' && name == DISABLE_ANIMATIONS_FLAG) {
+        this.disableAnimations(el, !!value);
+      } else {
+        this.engine.process(this.namespaceId, el, name.substr(1), value);
+      }
     } else {
       this.delegate.setProperty(el, name, value);
     }
@@ -113,30 +217,21 @@ export class AnimationRenderer implements Renderer2 {
 
   listen(target: 'window'|'document'|'body'|any, eventName: string, callback: (event: any) => any):
       () => void {
-    if (eventName.charAt(0) == '@') {
+    if (eventName.charAt(0) == ANIMATION_PREFIX) {
       const element = resolveElementFromTarget(target);
-      const [name, phase] = parseTriggerCallbackName(eventName.substr(1));
-      return this._engine.listen(
-          element, namespaceify(this._namespaceId, name), phase, (event: any) => {
-            const e = event as any;
-            if (e.triggerName) {
-              e.triggerName = deNamespaceify(this._namespaceId, e.triggerName);
-            }
-            this._zone.run(() => callback(event));
-          });
-    }
-    return this.delegate.listen(target, eventName, callback);
-  }
-
-  private _queueFlush() {
-    if (!this._flushPromise) {
-      this._zone.runOutsideAngular(() => {
-        this._flushPromise = Promise.resolve(null).then(() => {
-          this._flushPromise = null;
-          this._engine.flush();
-        });
+      let name = eventName.substr(1);
+      let phase = '';
+      // @listener.phase is for trigger animation callbacks
+      // @@listener is for animation builder callbacks
+      if (name.charAt(0) != ANIMATION_PREFIX) {
+        [name, phase] = parseTriggerCallbackName(name);
+      }
+      return this.engine.listen(this.namespaceId, element, name, phase, event => {
+        const countId = (event as any)['_data'] || -1;
+        this.factory.scheduleListenerCallback(countId, callback, event);
       });
     }
+    return this.delegate.listen(target, eventName, callback);
   }
 }
 
@@ -159,11 +254,3 @@ function parseTriggerCallbackName(triggerName: string) {
   const phase = triggerName.substr(dotIndex + 1);
   return [trigger, phase];
 }
-
-function namespaceify(namespaceId: string, value: string): string {
-  return `${namespaceId}#${value}`;
-}
-
-function deNamespaceify(namespaceId: string, value: string): string {
-  return value.replace(namespaceId + '#', '');
-}
diff --git a/packages/platform-browser/animations/src/animations.ts b/packages/platform-browser/animations/src/animations.ts
index 919817e66e..182f7bca81 100644
--- a/packages/platform-browser/animations/src/animations.ts
+++ b/packages/platform-browser/animations/src/animations.ts
@@ -12,4 +12,5 @@
  * Entry point for all animation APIs of the animation browser package.
  */
 export {BrowserAnimationsModule, NoopAnimationsModule} from './module';
+
 export * from './private_export';
diff --git a/packages/platform-browser/animations/src/module.ts b/packages/platform-browser/animations/src/module.ts
index effd444d2f..39ad025556 100644
--- a/packages/platform-browser/animations/src/module.ts
+++ b/packages/platform-browser/animations/src/module.ts
@@ -14,7 +14,7 @@ import {BROWSER_ANIMATIONS_PROVIDERS, BROWSER_NOOP_ANIMATIONS_PROVIDERS} from '.
  * @experimental Animation support is experimental.
  */
 @NgModule({
-  imports: [BrowserModule],
+  exports: [BrowserModule],
   providers: BROWSER_ANIMATIONS_PROVIDERS,
 })
 export class BrowserAnimationsModule {
@@ -24,7 +24,7 @@ export class BrowserAnimationsModule {
  * @experimental Animation support is experimental.
  */
 @NgModule({
-  imports: [BrowserModule],
+  exports: [BrowserModule],
   providers: BROWSER_NOOP_ANIMATIONS_PROVIDERS,
 })
 export class NoopAnimationsModule {
diff --git a/packages/platform-browser/animations/src/private_export.ts b/packages/platform-browser/animations/src/private_export.ts
index f1411716df..b37f0e7b95 100644
--- a/packages/platform-browser/animations/src/private_export.ts
+++ b/packages/platform-browser/animations/src/private_export.ts
@@ -5,4 +5,5 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+export {BrowserAnimationBuilder as ɵBrowserAnimationBuilder, BrowserAnimationFactory as ɵBrowserAnimationFactory} from './animation_builder';
 export {AnimationRenderer as ɵAnimationRenderer, AnimationRendererFactory as ɵAnimationRendererFactory} from './animation_renderer';
diff --git a/packages/platform-browser/animations/src/providers.ts b/packages/platform-browser/animations/src/providers.ts
index 7c700aa65c..f694722a91 100644
--- a/packages/platform-browser/animations/src/providers.ts
+++ b/packages/platform-browser/animations/src/providers.ts
@@ -6,14 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AnimationDriver, ɵAnimationEngine as AnimationEngine, ɵAnimationStyleNormalizer as AnimationStyleNormalizer, ɵDomAnimationEngine as DomAnimationEngine, ɵNoopAnimationDriver as NoopAnimationDriver, ɵNoopAnimationEngine as NoopAnimationEngine, ɵWebAnimationsDriver as WebAnimationsDriver, ɵWebAnimationsStyleNormalizer as WebAnimationsStyleNormalizer, ɵsupportsWebAnimations as supportsWebAnimations} from '@angular/animations/browser';
+import {AnimationBuilder} from '@angular/animations';
+import {AnimationDriver, ɵAnimationEngine as AnimationEngine, ɵAnimationStyleNormalizer as AnimationStyleNormalizer, ɵNoopAnimationDriver as NoopAnimationDriver, ɵWebAnimationsDriver as WebAnimationsDriver, ɵWebAnimationsStyleNormalizer as WebAnimationsStyleNormalizer, ɵsupportsWebAnimations as supportsWebAnimations} from '@angular/animations/browser';
 import {Injectable, NgZone, Provider, RendererFactory2} from '@angular/core';
 import {ɵDomRendererFactory2 as DomRendererFactory2} from '@angular/platform-browser';
 
+import {BrowserAnimationBuilder} from './animation_builder';
 import {AnimationRendererFactory} from './animation_renderer';
 
 @Injectable()
-export class InjectableAnimationEngine extends DomAnimationEngine {
+export class InjectableAnimationEngine extends AnimationEngine {
   constructor(driver: AnimationDriver, normalizer: AnimationStyleNormalizer) {
     super(driver, normalizer);
   }
@@ -35,12 +37,8 @@ export function instantiateRendererFactory(
   return new AnimationRendererFactory(renderer, engine, zone);
 }
 
-/**
- * Separate providers from the actual module so that we can do a local modification in Google3 to
- * include them in the BrowserModule.
- */
-export const BROWSER_ANIMATIONS_PROVIDERS: Provider[] = [
-  {provide: AnimationDriver, useFactory: instantiateSupportedAnimationDriver},
+const SHARED_ANIMATION_PROVIDERS: Provider[] = [
+  {provide: AnimationBuilder, useClass: BrowserAnimationBuilder},
   {provide: AnimationStyleNormalizer, useFactory: instantiateDefaultStyleNormalizer},
   {provide: AnimationEngine, useClass: InjectableAnimationEngine}, {
     provide: RendererFactory2,
@@ -49,14 +47,18 @@ export const BROWSER_ANIMATIONS_PROVIDERS: Provider[] = [
   }
 ];
 
+/**
+ * Separate providers from the actual module so that we can do a local modification in Google3 to
+ * include them in the BrowserModule.
+ */
+export const BROWSER_ANIMATIONS_PROVIDERS: Provider[] = [
+  {provide: AnimationDriver, useFactory: instantiateSupportedAnimationDriver},
+  ...SHARED_ANIMATION_PROVIDERS
+];
+
 /**
  * Separate providers from the actual module so that we can do a local modification in Google3 to
  * include them in the BrowserTestingModule.
  */
-export const BROWSER_NOOP_ANIMATIONS_PROVIDERS: Provider[] = [
-  {provide: AnimationEngine, useClass: NoopAnimationEngine}, {
-    provide: RendererFactory2,
-    useFactory: instantiateRendererFactory,
-    deps: [DomRendererFactory2, AnimationEngine, NgZone]
-  }
-];
+export const BROWSER_NOOP_ANIMATIONS_PROVIDERS: Provider[] =
+    [{provide: AnimationDriver, useClass: NoopAnimationDriver}, ...SHARED_ANIMATION_PROVIDERS];
diff --git a/packages/platform-browser/animations/test/noop_animation_engine_spec.ts b/packages/platform-browser/animations/test/noop_animation_engine_spec.ts
deleted file mode 100644
index 8c6bd9019f..0000000000
--- a/packages/platform-browser/animations/test/noop_animation_engine_spec.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-import {state, style, trigger} from '@angular/animations';
-import {ɵNoopAnimationEngine as NoopAnimationEngine} from '@angular/animations/browser';
-import {el} from '@angular/platform-browser/testing/src/browser_util';
-
-export function main() {
-  describe('NoopAnimationEngine', () => {
-    let captures: string[] = [];
-    function capture(value: string = null) { return (v: any = null) => captures.push(value || v); }
-
-    beforeEach(() => { captures = []; });
-
-    it('should immediately issue DOM removals during remove animations and then fire the animation callbacks after flush',
-       () => {
-         const engine = new NoopAnimationEngine();
-
-         const elm1 = {nodeType: 1};
-         const elm2 = {nodeType: 1};
-         engine.onRemove(elm1, capture('1'));
-         engine.onRemove(elm2, capture('2'));
-
-         engine.listen(elm1, 'trig', 'start', capture('1-start'));
-         engine.listen(elm2, 'trig', 'start', capture('2-start'));
-         engine.listen(elm1, 'trig', 'done', capture('1-done'));
-         engine.listen(elm2, 'trig', 'done', capture('2-done'));
-
-         expect(captures).toEqual(['1', '2']);
-         engine.flush();
-
-         expect(captures).toEqual(['1', '2', '1-start', '2-start', '1-done', '2-done']);
-       });
-
-    it('should only fire the `start` listener for a trigger that has had a property change', () => {
-      const engine = new NoopAnimationEngine();
-
-      const elm1 = {};
-      const elm2 = {};
-      const elm3 = {};
-
-      engine.listen(elm1, 'trig1', 'start', capture());
-      engine.setProperty(elm1, 'trig1', 'cool');
-      engine.setProperty(elm2, 'trig2', 'sweet');
-      engine.listen(elm2, 'trig2', 'start', capture());
-      engine.listen(elm3, 'trig3', 'start', capture());
-
-      expect(captures).toEqual([]);
-      engine.flush();
-
-      expect(captures.length).toEqual(2);
-      const trig1Data = captures.shift();
-      const trig2Data = captures.shift();
-      expect(trig1Data).toEqual({
-        element: elm1,
-        triggerName: 'trig1',
-        fromState: 'void',
-        toState: 'cool',
-        phaseName: 'start',
-        totalTime: 0
-      });
-
-      expect(trig2Data).toEqual({
-        element: elm2,
-        triggerName: 'trig2',
-        fromState: 'void',
-        toState: 'sweet',
-        phaseName: 'start',
-        totalTime: 0
-      });
-
-      captures = [];
-      engine.flush();
-      expect(captures).toEqual([]);
-    });
-
-    it('should only fire the `done` listener for a trigger that has had a property change', () => {
-      const engine = new NoopAnimationEngine();
-
-      const elm1 = {};
-      const elm2 = {};
-      const elm3 = {};
-
-      engine.listen(elm1, 'trig1', 'done', capture());
-      engine.setProperty(elm1, 'trig1', 'awesome');
-      engine.setProperty(elm2, 'trig2', 'amazing');
-      engine.listen(elm2, 'trig2', 'done', capture());
-      engine.listen(elm3, 'trig3', 'done', capture());
-
-      expect(captures).toEqual([]);
-      engine.flush();
-
-      expect(captures.length).toEqual(2);
-      const trig1Data = captures.shift();
-      const trig2Data = captures.shift();
-      expect(trig1Data).toEqual({
-        element: elm1,
-        triggerName: 'trig1',
-        fromState: 'void',
-        toState: 'awesome',
-        phaseName: 'done',
-        totalTime: 0
-      });
-
-      expect(trig2Data).toEqual({
-        element: elm2,
-        triggerName: 'trig2',
-        fromState: 'void',
-        toState: 'amazing',
-        phaseName: 'done',
-        totalTime: 0
-      });
-
-      captures = [];
-      engine.flush();
-      expect(captures).toEqual([]);
-    });
-
-    it('should deregister a listener when the return function is called, but only after flush',
-       () => {
-         const engine = new NoopAnimationEngine();
-         const elm = {};
-
-         const fn1 = engine.listen(elm, 'trig1', 'start', capture('trig1-start'));
-         const fn2 = engine.listen(elm, 'trig2', 'done', capture('trig2-done'));
-
-         engine.setProperty(elm, 'trig1', 'value1');
-         engine.setProperty(elm, 'trig2', 'value2');
-         engine.flush();
-         expect(captures).toEqual(['trig1-start', 'trig2-done']);
-
-         captures = [];
-         engine.setProperty(elm, 'trig1', 'value3');
-         engine.setProperty(elm, 'trig2', 'value4');
-
-         fn1();
-         engine.flush();
-         expect(captures).toEqual(['trig1-start', 'trig2-done']);
-
-         captures = [];
-         engine.setProperty(elm, 'trig1', 'value5');
-         engine.setProperty(elm, 'trig2', 'value6');
-
-         fn2();
-         engine.flush();
-         expect(captures).toEqual(['trig2-done']);
-
-         captures = [];
-         engine.setProperty(elm, 'trig1', 'value7');
-         engine.setProperty(elm, 'trig2', 'value8');
-         engine.flush();
-         expect(captures).toEqual([]);
-       });
-
-    it('should fire a removal listener even if the listener is deregistered prior to flush', () => {
-      const engine = new NoopAnimationEngine();
-      const elm = {nodeType: 1};
-
-      const fn = engine.listen(elm, 'trig', 'start', capture('removal listener'));
-      fn();
-
-      engine.onRemove(elm, capture('dom removal'));
-      engine.flush();
-
-      expect(captures).toEqual(['dom removal', 'removal listener']);
-    });
-
-    describe('styling', () => {
-      // these tests are only mean't to be run within the DOM
-      if (typeof Element == 'undefined') return;
-
-      it('should persist the styles on the element when the animation is complete', () => {
-        const engine = new NoopAnimationEngine();
-        engine.registerTrigger(trigger('matias', [
-          state('a', style({width: '100px'})),
-        ]));
-
-        const element = el('<div></div>');
-        expect(element.style.width).not.toEqual('100px');
-
-        engine.setProperty(element, 'matias', 'a');
-        expect(element.style.width).not.toEqual('100px');
-
-        engine.flush();
-        expect(element.style.width).toEqual('100px');
-      });
-
-      it('should remove previously persist styles off of the element when a follow-up animation starts',
-         () => {
-           const engine = new NoopAnimationEngine();
-           engine.registerTrigger(trigger('matias', [
-             state('a', style({width: '100px'})),
-             state('b', style({height: '100px'})),
-           ]));
-
-           const element = el('<div></div>');
-
-           engine.setProperty(element, 'matias', 'a');
-           engine.flush();
-           expect(element.style.width).toEqual('100px');
-
-           engine.setProperty(element, 'matias', 'b');
-           expect(element.style.width).not.toEqual('100px');
-           expect(element.style.height).not.toEqual('100px');
-
-           engine.flush();
-           expect(element.style.height).toEqual('100px');
-         });
-
-      it('should fall back to `*` styles incase the target state styles are not found', () => {
-        const engine = new NoopAnimationEngine();
-        engine.registerTrigger(trigger('matias', [
-          state('*', style({opacity: '0.5'})),
-        ]));
-
-        const element = el('<div></div>');
-
-        engine.setProperty(element, 'matias', 'xyz');
-        engine.flush();
-        expect(element.style.opacity).toEqual('0.5');
-      });
-    });
-  });
-}
diff --git a/packages/platform-browser/animations/test/noop_animations_module_spec.ts b/packages/platform-browser/animations/test/noop_animations_module_spec.ts
index 0735104a85..5041fed64e 100644
--- a/packages/platform-browser/animations/test/noop_animations_module_spec.ts
+++ b/packages/platform-browser/animations/test/noop_animations_module_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {animate, style, transition, trigger} from '@angular/animations';
-import {ɵAnimationEngine, ɵNoopAnimationEngine} from '@angular/animations/browser';
+import {ɵAnimationEngine} from '@angular/animations/browser';
 import {Component} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
@@ -16,11 +16,6 @@ export function main() {
   describe('NoopAnimationsModule', () => {
     beforeEach(() => { TestBed.configureTestingModule({imports: [NoopAnimationsModule]}); });
 
-    it('the engine should be a Noop engine', () => {
-      const engine = TestBed.get(ɵAnimationEngine);
-      expect(engine instanceof ɵNoopAnimationEngine).toBeTruthy();
-    });
-
     it('should flush and fire callbacks when the zone becomes stable', (async) => {
       @Component({
         selector: 'my-cmp',
@@ -80,20 +75,21 @@ export function main() {
 
          cmp.exp = true;
          fixture.detectChanges();
-         cmp.startEvent = null;
-         cmp.doneEvent = null;
-
-         cmp.exp = false;
-         fixture.detectChanges();
-
          fixture.whenStable().then(() => {
-           expect(cmp.startEvent.triggerName).toEqual('myAnimation');
-           expect(cmp.startEvent.phaseName).toEqual('start');
-           expect(cmp.startEvent.toState).toEqual('void');
-           expect(cmp.doneEvent.triggerName).toEqual('myAnimation');
-           expect(cmp.doneEvent.phaseName).toEqual('done');
-           expect(cmp.doneEvent.toState).toEqual('void');
-           async();
+           cmp.startEvent = null;
+           cmp.doneEvent = null;
+
+           cmp.exp = false;
+           fixture.detectChanges();
+           fixture.whenStable().then(() => {
+             expect(cmp.startEvent.triggerName).toEqual('myAnimation');
+             expect(cmp.startEvent.phaseName).toEqual('start');
+             expect(cmp.startEvent.toState).toEqual('void');
+             expect(cmp.doneEvent.triggerName).toEqual('myAnimation');
+             expect(cmp.doneEvent.phaseName).toEqual('done');
+             expect(cmp.doneEvent.toState).toEqual('void');
+             async();
+           });
          });
        });
   });
diff --git a/packages/platform-browser/package.json b/packages/platform-browser/package.json
index 2317e379fc..4a1aab4ddd 100644
--- a/packages/platform-browser/package.json
+++ b/packages/platform-browser/package.json
@@ -8,6 +8,9 @@
   "typings": "./platform-browser.d.ts",
   "author": "angular",
   "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "@angular/core": "0.0.0-PLACEHOLDER",
     "@angular/common": "0.0.0-PLACEHOLDER"
diff --git a/packages/platform-browser/rollup.config.js b/packages/platform-browser/rollup.config.js
index d094beb25e..aaaed0d227 100644
--- a/packages/platform-browser/rollup.config.js
+++ b/packages/platform-browser/rollup.config.js
@@ -6,14 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+};
+
 export default {
   entry: '../../dist/packages-dist/platform-browser/@angular/platform-browser.es5.js',
   dest: '../../dist/packages-dist/platform-browser/bundles/platform-browser.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.platformBrowser',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/platform-browser/src/browser/browser_adapter.ts b/packages/platform-browser/src/browser/browser_adapter.ts
index 4cfc739934..89dafbd21d 100644
--- a/packages/platform-browser/src/browser/browser_adapter.ts
+++ b/packages/platform-browser/src/browser/browser_adapter.ts
@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {ɵparseCookieValue as parseCookieValue} from '@angular/common';
 import {ɵglobal as global} from '@angular/core';
+
 import {setRootDomAdapter} from '../dom/dom_adapter';
 
 import {GenericBrowserDomAdapter} from './generic_browser_adapter';
@@ -144,12 +146,12 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
     return evt.defaultPrevented || evt.returnValue != null && !evt.returnValue;
   }
   getInnerHTML(el: HTMLElement): string { return el.innerHTML; }
-  getTemplateContent(el: Node): Node {
+  getTemplateContent(el: Node): Node|null {
     return 'content' in el && el instanceof HTMLTemplateElement ? el.content : null;
   }
   getOuterHTML(el: HTMLElement): string { return el.outerHTML; }
   nodeName(node: Node): string { return node.nodeName; }
-  nodeValue(node: Node): string { return node.nodeValue; }
+  nodeValue(node: Node): string|null { return node.nodeValue; }
   type(node: HTMLInputElement): string { return node.type; }
   content(node: Node): Node {
     if (this.hasProperty(node, 'content')) {
@@ -158,9 +160,9 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
       return node;
     }
   }
-  firstChild(el: Node): Node { return el.firstChild; }
-  nextSibling(el: Node): Node { return el.nextSibling; }
-  parentElement(el: Node): Node { return el.parentNode; }
+  firstChild(el: Node): Node|null { return el.firstChild; }
+  nextSibling(el: Node): Node|null { return el.nextSibling; }
+  parentElement(el: Node): Node|null { return el.parentNode; }
   childNodes(el: any): Node[] { return el.childNodes; }
   childNodesAsList(el: Node): any[] {
     const childNodes = el.childNodes;
@@ -190,7 +192,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
   }
   insertAfter(parent: Node, ref: Node, node: any) { parent.insertBefore(node, ref.nextSibling); }
   setInnerHTML(el: Element, value: string) { el.innerHTML = value; }
-  getText(el: Node): string { return el.textContent; }
+  getText(el: Node): string|null { return el.textContent; }
   setText(el: Node, value: string) { el.textContent = value; }
   getValue(el: any): string { return el.value; }
   setValue(el: any, value: string) { el.value = value; }
@@ -242,7 +244,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
     element.style[stylename] = '';
   }
   getStyle(element: any, stylename: string): string { return element.style[stylename]; }
-  hasStyle(element: any, styleName: string, styleValue: string = null): boolean {
+  hasStyle(element: any, styleName: string, styleValue?: string|null): boolean {
     const value = this.getStyle(element, styleName) || '';
     return styleValue ? value == styleValue : value.length > 0;
   }
@@ -262,7 +264,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
   hasAttributeNS(element: Element, ns: string, attribute: string): boolean {
     return element.hasAttributeNS(ns, attribute);
   }
-  getAttribute(element: Element, attribute: string): string {
+  getAttribute(element: Element, attribute: string): string|null {
     return element.getAttribute(attribute);
   }
   getAttributeNS(element: Element, ns: string, name: string): string {
@@ -335,7 +337,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
 
     return _keyMap[key] || key;
   }
-  getGlobalEventTarget(doc: Document, target: string): EventTarget {
+  getGlobalEventTarget(doc: Document, target: string): EventTarget|null {
     if (target === 'window') {
       return window;
     }
@@ -345,10 +347,11 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
     if (target === 'body') {
       return document.body;
     }
+    return null;
   }
   getHistory(): History { return window.history; }
   getLocation(): Location { return window.location; }
-  getBaseHref(doc: Document): string {
+  getBaseHref(doc: Document): string|null {
     const href = getBaseElementHref();
     return href == null ? null : relativePath(href);
   }
@@ -357,12 +360,11 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
   setData(element: Element, name: string, value: string) {
     this.setAttribute(element, 'data-' + name, value);
   }
-  getData(element: Element, name: string): string {
+  getData(element: Element, name: string): string|null {
     return this.getAttribute(element, 'data-' + name);
   }
   getComputedStyle(element: any): any { return getComputedStyle(element); }
   // TODO(tbosch): move this into a separate environment class once we have it
-  setGlobalVar(path: string, value: any) { setValueOnPath(global, path, value); }
   supportsWebAnimation(): boolean {
     return typeof(<any>Element).prototype['animate'] === 'function';
   }
@@ -375,7 +377,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
 
   supportsCookies(): boolean { return true; }
 
-  getCookie(name: string): string { return parseCookieValue(document.cookie, name); }
+  getCookie(name: string): string|null { return parseCookieValue(document.cookie, name); }
 
   setCookie(name: string, value: string) {
     // document.cookie is magical, assigning into it assigns/overrides one cookie value, but does
@@ -384,10 +386,10 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
   }
 }
 
-let baseElement: HTMLElement = null;
-function getBaseElementHref(): string {
+let baseElement: HTMLElement|null = null;
+function getBaseElementHref(): string|null {
   if (!baseElement) {
-    baseElement = document.querySelector('base');
+    baseElement = document.querySelector('base') !;
     if (!baseElement) {
       return null;
     }
@@ -405,33 +407,3 @@ function relativePath(url: any): string {
   return (urlParsingNode.pathname.charAt(0) === '/') ? urlParsingNode.pathname :
                                                        '/' + urlParsingNode.pathname;
 }
-
-export function parseCookieValue(cookieStr: string, name: string): string {
-  name = encodeURIComponent(name);
-  for (const cookie of cookieStr.split(';')) {
-    const eqIndex = cookie.indexOf('=');
-    const [cookieName, cookieValue]: string[] =
-        eqIndex == -1 ? [cookie, ''] : [cookie.slice(0, eqIndex), cookie.slice(eqIndex + 1)];
-    if (cookieName.trim() === name) {
-      return decodeURIComponent(cookieValue);
-    }
-  }
-  return null;
-}
-
-export function setValueOnPath(global: any, path: string, value: any) {
-  const parts = path.split('.');
-  let obj: any = global;
-  while (parts.length > 1) {
-    const name = parts.shift();
-    if (obj.hasOwnProperty(name) && obj[name] != null) {
-      obj = obj[name];
-    } else {
-      obj = obj[name] = {};
-    }
-  }
-  if (obj === undefined || obj === null) {
-    obj = {};
-  }
-  obj[parts.shift()] = value;
-}
diff --git a/packages/platform-browser/src/browser/generic_browser_adapter.ts b/packages/platform-browser/src/browser/generic_browser_adapter.ts
index f3da271527..9e631917c9 100644
--- a/packages/platform-browser/src/browser/generic_browser_adapter.ts
+++ b/packages/platform-browser/src/browser/generic_browser_adapter.ts
@@ -17,8 +17,8 @@ import {DomAdapter} from '../dom/dom_adapter';
  * can introduce XSS risks.
  */
 export abstract class GenericBrowserDomAdapter extends DomAdapter {
-  private _animationPrefix: string = null;
-  private _transitionEnd: string = null;
+  private _animationPrefix: string|null = null;
+  private _transitionEnd: string|null = null;
   constructor() {
     super();
     try {
diff --git a/packages/platform-browser/src/browser/location/browser_platform_location.ts b/packages/platform-browser/src/browser/location/browser_platform_location.ts
index 9cf47389c2..45f6ef4a15 100644
--- a/packages/platform-browser/src/browser/location/browser_platform_location.ts
+++ b/packages/platform-browser/src/browser/location/browser_platform_location.ts
@@ -40,7 +40,7 @@ export class BrowserPlatformLocation extends PlatformLocation {
 
   get location(): Location { return this._location; }
 
-  getBaseHrefFromDOM(): string { return getDOM().getBaseHref(this._doc); }
+  getBaseHrefFromDOM(): string { return getDOM().getBaseHref(this._doc) !; }
 
   onPopState(fn: LocationChangeListener): void {
     getDOM().getGlobalEventTarget(this._doc, 'window').addEventListener('popstate', fn, false);
diff --git a/packages/platform-browser/src/browser/meta.ts b/packages/platform-browser/src/browser/meta.ts
index 35717ff9dd..acc4308cc0 100644
--- a/packages/platform-browser/src/browser/meta.ts
+++ b/packages/platform-browser/src/browser/meta.ts
@@ -39,7 +39,7 @@ export class Meta {
   private _dom: DomAdapter;
   constructor(@Inject(DOCUMENT) private _doc: any) { this._dom = getDOM(); }
 
-  addTag(tag: MetaDefinition, forceCreation: boolean = false): HTMLMetaElement {
+  addTag(tag: MetaDefinition, forceCreation: boolean = false): HTMLMetaElement|null {
     if (!tag) return null;
     return this._getOrCreateElement(tag, forceCreation);
   }
@@ -54,7 +54,7 @@ export class Meta {
     }, []);
   }
 
-  getTag(attrSelector: string): HTMLMetaElement {
+  getTag(attrSelector: string): HTMLMetaElement|null {
     if (!attrSelector) return null;
     return this._dom.querySelector(this._doc, `meta[${attrSelector}]`);
   }
@@ -65,17 +65,17 @@ export class Meta {
     return list ? [].slice.call(list) : [];
   }
 
-  updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement {
+  updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement|null {
     if (!tag) return null;
     selector = selector || this._parseSelector(tag);
-    const meta: HTMLMetaElement = this.getTag(selector);
+    const meta: HTMLMetaElement = this.getTag(selector) !;
     if (meta) {
       return this._setMetaElementAttributes(tag, meta);
     }
     return this._getOrCreateElement(tag, true);
   }
 
-  removeTag(attrSelector: string): void { this.removeTagElement(this.getTag(attrSelector)); }
+  removeTag(attrSelector: string): void { this.removeTagElement(this.getTag(attrSelector) !); }
 
   removeTagElement(meta: HTMLMetaElement): void {
     if (meta) {
@@ -87,7 +87,7 @@ export class Meta {
       HTMLMetaElement {
     if (!forceCreation) {
       const selector: string = this._parseSelector(meta);
-      const elem: HTMLMetaElement = this.getTag(selector);
+      const elem: HTMLMetaElement = this.getTag(selector) !;
       // It's allowed to have multiple elements with the same name so it's not enough to
       // just check that element with the same name already present on the page. We also need to
       // check if element has tag attributes
diff --git a/packages/platform-browser/src/browser/server-transition.ts b/packages/platform-browser/src/browser/server-transition.ts
index 83d3c12518..2bfb9de470 100644
--- a/packages/platform-browser/src/browser/server-transition.ts
+++ b/packages/platform-browser/src/browser/server-transition.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {APP_INITIALIZER, Inject, InjectionToken, Provider} from '@angular/core';
+import {APP_INITIALIZER, ApplicationInitStatus, Inject, InjectionToken, Injector, Provider} from '@angular/core';
 
 import {getDOM} from '../dom/dom_adapter';
 import {DOCUMENT} from '../dom/dom_tokens';
@@ -17,22 +17,25 @@ import {DOCUMENT} from '../dom/dom_tokens';
  */
 export const TRANSITION_ID = new InjectionToken('TRANSITION_ID');
 
-export function bootstrapListenerFactory(transitionId: string, document: any) {
-  const factory = () => {
-    const dom = getDOM();
-    const styles: any[] =
-        Array.prototype.slice.apply(dom.querySelectorAll(document, `style[ng-transition]`));
-    styles.filter(el => dom.getAttribute(el, 'ng-transition') === transitionId)
-        .forEach(el => dom.remove(el));
+export function appInitializerFactory(transitionId: string, document: any, injector: Injector) {
+  return () => {
+    // Wait for all application initializers to be completed before removing the styles set by
+    // the server.
+    injector.get(ApplicationInitStatus).donePromise.then(() => {
+      const dom = getDOM();
+      const styles: any[] =
+          Array.prototype.slice.apply(dom.querySelectorAll(document, `style[ng-transition]`));
+      styles.filter(el => dom.getAttribute(el, 'ng-transition') === transitionId)
+          .forEach(el => dom.remove(el));
+    });
   };
-  return factory;
 }
 
 export const SERVER_TRANSITION_PROVIDERS: Provider[] = [
   {
     provide: APP_INITIALIZER,
-    useFactory: bootstrapListenerFactory,
-    deps: [TRANSITION_ID, DOCUMENT],
+    useFactory: appInitializerFactory,
+    deps: [TRANSITION_ID, DOCUMENT, Injector],
     multi: true
   },
 ];
diff --git a/packages/platform-browser/src/browser/testability.ts b/packages/platform-browser/src/browser/testability.ts
index 369e4369ba..c057ed03bb 100644
--- a/packages/platform-browser/src/browser/testability.ts
+++ b/packages/platform-browser/src/browser/testability.ts
@@ -49,7 +49,7 @@ export class BrowserGetTestability implements GetTestability {
   }
 
   findTestabilityInTree(registry: TestabilityRegistry, elem: any, findInAncestors: boolean):
-      Testability {
+      Testability|null {
     if (elem == null) {
       return null;
     }
diff --git a/packages/platform-browser/src/browser/title.ts b/packages/platform-browser/src/browser/title.ts
index 588f323f45..2ca7ba5302 100644
--- a/packages/platform-browser/src/browser/title.ts
+++ b/packages/platform-browser/src/browser/title.ts
@@ -27,7 +27,6 @@ export class Title {
   constructor(@Inject(DOCUMENT) private _doc: any) {}
   /**
    * Get the title of the current HTML document.
-   * @returns {string}
    */
   getTitle(): string { return getDOM().getTitle(this._doc); }
 
diff --git a/packages/platform-browser/src/browser/tools/tools.ts b/packages/platform-browser/src/browser/tools/tools.ts
index dd771943a4..1ebbbb14d9 100644
--- a/packages/platform-browser/src/browser/tools/tools.ts
+++ b/packages/platform-browser/src/browser/tools/tools.ts
@@ -7,11 +7,10 @@
  */
 
 import {ComponentRef} from '@angular/core';
-import {getDOM} from '../../dom/dom_adapter';
-
+import {exportNgVar} from '../../dom/util';
 import {AngularProfiler} from './common_tools';
 
-const PROFILER_GLOBAL_NAME = 'ng.profiler';
+const PROFILER_GLOBAL_NAME = 'profiler';
 
 /**
  * Enabled Angular debug tools that are accessible via your browser's
@@ -27,7 +26,7 @@ const PROFILER_GLOBAL_NAME = 'ng.profiler';
  * @experimental All debugging apis are currently experimental.
  */
 export function enableDebugTools<T>(ref: ComponentRef<T>): ComponentRef<T> {
-  getDOM().setGlobalVar(PROFILER_GLOBAL_NAME, new AngularProfiler(ref));
+  exportNgVar(PROFILER_GLOBAL_NAME, new AngularProfiler(ref));
   return ref;
 }
 
@@ -37,5 +36,5 @@ export function enableDebugTools<T>(ref: ComponentRef<T>): ComponentRef<T> {
  * @experimental All debugging apis are currently experimental.
  */
 export function disableDebugTools(): void {
-  getDOM().setGlobalVar(PROFILER_GLOBAL_NAME, null);
+  exportNgVar(PROFILER_GLOBAL_NAME, null);
 }
diff --git a/packages/platform-browser/src/dom/debug/by.ts b/packages/platform-browser/src/dom/debug/by.ts
index 3d2096e88c..866885c44a 100644
--- a/packages/platform-browser/src/dom/debug/by.ts
+++ b/packages/platform-browser/src/dom/debug/by.ts
@@ -49,6 +49,6 @@ export class By {
    * {@example platform-browser/dom/debug/ts/by/by.ts region='by_directive'}
    */
   static directive(type: Type<any>): Predicate<DebugElement> {
-    return (debugElement) => debugElement.providerTokens.indexOf(type) !== -1;
+    return (debugElement) => debugElement.providerTokens !.indexOf(type) !== -1;
   }
 }
diff --git a/packages/platform-browser/src/dom/debug/ng_probe.ts b/packages/platform-browser/src/dom/debug/ng_probe.ts
index 43c1b4bb90..e74b9cb3d2 100644
--- a/packages/platform-browser/src/dom/debug/ng_probe.ts
+++ b/packages/platform-browser/src/dom/debug/ng_probe.ts
@@ -7,22 +7,22 @@
  */
 
 import * as core from '@angular/core';
-import {getDOM} from '../dom_adapter';
+import {exportNgVar} from '../util';
 
 const CORE_TOKENS = {
   'ApplicationRef': core.ApplicationRef,
   'NgZone': core.NgZone,
 };
 
-const INSPECT_GLOBAL_NAME = 'ng.probe';
-const CORE_TOKENS_GLOBAL_NAME = 'ng.coreTokens';
+const INSPECT_GLOBAL_NAME = 'probe';
+const CORE_TOKENS_GLOBAL_NAME = 'coreTokens';
 
 /**
  * Returns a {@link DebugElement} for the given native DOM element, or
  * null if the given native element does not have an Angular view associated
  * with it.
  */
-export function inspectNativeElement(element: any): core.DebugNode {
+export function inspectNativeElement(element: any): core.DebugNode|null {
   return core.getDebugNode(element);
 }
 
@@ -36,9 +36,8 @@ export class NgProbeToken {
 
 export function _createNgProbe(extraTokens: NgProbeToken[], coreTokens: core.NgProbeToken[]): any {
   const tokens = (extraTokens || []).concat(coreTokens || []);
-  getDOM().setGlobalVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
-  getDOM().setGlobalVar(
-      CORE_TOKENS_GLOBAL_NAME, {...CORE_TOKENS, ..._ngProbeTokensToMap(tokens || [])});
+  exportNgVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
+  exportNgVar(CORE_TOKENS_GLOBAL_NAME, {...CORE_TOKENS, ..._ngProbeTokensToMap(tokens || [])});
   return () => inspectNativeElement;
 }
 
diff --git a/packages/platform-browser/src/dom/dom_adapter.ts b/packages/platform-browser/src/dom/dom_adapter.ts
index 22e4334640..922aca5f8c 100644
--- a/packages/platform-browser/src/dom/dom_adapter.ts
+++ b/packages/platform-browser/src/dom/dom_adapter.ts
@@ -8,7 +8,7 @@
 
 import {Type} from '@angular/core';
 
-let _DOM: DomAdapter = null;
+let _DOM: DomAdapter = null !;
 
 export function getDOM() {
   return _DOM;
@@ -32,7 +32,7 @@ export function setRootDomAdapter(adapter: DomAdapter) {
  * can introduce XSS risks.
  */
 export abstract class DomAdapter {
-  public resourceLoaderType: Type<any> = null;
+  public resourceLoaderType: Type<any> = null !;
   abstract hasProperty(element: any, name: string): boolean;
   abstract setProperty(el: Element, name: string, value: any): any;
   abstract getProperty(el: Element, name: string): any;
@@ -68,12 +68,12 @@ export abstract class DomAdapter {
   abstract getTemplateContent(el: any): any;
   abstract getOuterHTML(el: any): string;
   abstract nodeName(node: any): string;
-  abstract nodeValue(node: any): string;
+  abstract nodeValue(node: any): string|null;
   abstract type(node: any): string;
   abstract content(node: any): any;
-  abstract firstChild(el: any): Node;
-  abstract nextSibling(el: any): Node;
-  abstract parentElement(el: any): Node;
+  abstract firstChild(el: any): Node|null;
+  abstract nextSibling(el: any): Node|null;
+  abstract parentElement(el: any): Node|null;
   abstract childNodes(el: any): Node[];
   abstract childNodesAsList(el: any): Node[];
   abstract clearNodes(el: any): any;
@@ -85,7 +85,7 @@ export abstract class DomAdapter {
   abstract insertAllBefore(parent: any, ref: any, nodes: any): any;
   abstract insertAfter(parent: any, el: any, node: any): any;
   abstract setInnerHTML(el: any, value: any): any;
-  abstract getText(el: any): string;
+  abstract getText(el: any): string|null;
   abstract setText(el: any, value: string): any;
   abstract getValue(el: any): string;
   abstract setValue(el: any, value: string): any;
@@ -117,7 +117,7 @@ export abstract class DomAdapter {
   abstract attributeMap(element: any): Map<string, string>;
   abstract hasAttribute(element: any, attribute: string): boolean;
   abstract hasAttributeNS(element: any, ns: string, attribute: string): boolean;
-  abstract getAttribute(element: any, attribute: string): string;
+  abstract getAttribute(element: any, attribute: string): string|null;
   abstract getAttributeNS(element: any, ns: string, attribute: string): string;
   abstract setAttribute(element: any, name: string, value: string): any;
   abstract setAttributeNS(element: any, ns: string, name: string, value: string): any;
@@ -145,13 +145,12 @@ export abstract class DomAdapter {
   abstract getGlobalEventTarget(doc: Document, target: string): any;
   abstract getHistory(): History;
   abstract getLocation(): Location;
-  abstract getBaseHref(doc: Document): string;
+  abstract getBaseHref(doc: Document): string|null;
   abstract resetBaseElement(): void;
   abstract getUserAgent(): string;
   abstract setData(element: any, name: string, value: string): any;
   abstract getComputedStyle(element: any): any;
-  abstract getData(element: any, name: string): string;
-  abstract setGlobalVar(name: string, value: any): any;
+  abstract getData(element: any, name: string): string|null;
   abstract supportsWebAnimation(): boolean;
   abstract performanceNow(): number;
   abstract getAnimationPrefix(): string;
@@ -159,6 +158,6 @@ export abstract class DomAdapter {
   abstract supportsAnimation(): boolean;
 
   abstract supportsCookies(): boolean;
-  abstract getCookie(name: string): string;
+  abstract getCookie(name: string): string|null;
   abstract setCookie(name: string, value: string): any;
 }
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts
index 91b295982a..221b994070 100644
--- a/packages/platform-browser/src/dom/dom_renderer.ts
+++ b/packages/platform-browser/src/dom/dom_renderer.ts
@@ -67,7 +67,7 @@ export class DomRendererFactory2 implements RendererFactory2 {
     this.defaultRenderer = new DefaultDomRenderer2(eventManager);
   };
 
-  createRenderer(element: any, type: RendererType2): Renderer2 {
+  createRenderer(element: any, type: RendererType2|null): Renderer2 {
     if (!element || !type) {
       return this.defaultRenderer;
     }
@@ -94,6 +94,9 @@ export class DomRendererFactory2 implements RendererFactory2 {
       }
     }
   }
+
+  begin() {}
+  end() {}
 }
 
 class DefaultDomRenderer2 implements Renderer2 {
diff --git a/packages/platform-browser/src/dom/dom_tokens.ts b/packages/platform-browser/src/dom/dom_tokens.ts
index c31db4436f..aa05acce33 100644
--- a/packages/platform-browser/src/dom/dom_tokens.ts
+++ b/packages/platform-browser/src/dom/dom_tokens.ts
@@ -6,14 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {DOCUMENT as commonDOCUMENT} from '@angular/common';
 import {InjectionToken} from '@angular/core';
 
+
 /**
  * A DI Token representing the main rendering context. In a browser this is the DOM Document.
  *
  * Note: Document might not be available in the Application Context when Application and Rendering
  * Contexts are not the same (e.g. when running the application into a Web Worker).
  *
- * @stable
+ * @deprecated import from `@angular/common` instead.
  */
-export const DOCUMENT = new InjectionToken<Document>('DocumentToken');
+export const DOCUMENT = commonDOCUMENT;
diff --git a/packages/platform-browser/src/dom/events/dom_events.ts b/packages/platform-browser/src/dom/events/dom_events.ts
index 324603e035..3174a91dc1 100644
--- a/packages/platform-browser/src/dom/events/dom_events.ts
+++ b/packages/platform-browser/src/dom/events/dom_events.ts
@@ -6,22 +6,54 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject, Injectable} from '@angular/core';
+import {Inject, Injectable, NgZone, ɵglobal as global} from '@angular/core';
 
 import {DOCUMENT} from '../dom_tokens';
 
 import {EventManagerPlugin} from './event_manager';
 
+/**
+ * Detect if Zone is present. If it is then bypass 'addEventListener' since Angular can do much more
+ * efficient bookkeeping than Zone can, because we have additional information. This speeds up
+ * addEventListener by 3x.
+ */
+const Zone = global['Zone'];
+const __symbol__ = Zone && Zone['__symbol__'] || function<T>(v: T): T {
+  return v;
+};
+const ADD_EVENT_LISTENER: 'addEventListener' = __symbol__('addEventListener');
+const REMOVE_EVENT_LISTENER: 'removeEventListener' = __symbol__('removeEventListener');
+
 @Injectable()
 export class DomEventsPlugin extends EventManagerPlugin {
-  constructor(@Inject(DOCUMENT) doc: any) { super(doc); }
+  constructor(@Inject(DOCUMENT) doc: any, private ngZone: NgZone) { super(doc); }
 
   // This plugin should come last in the list of plugins, because it accepts all
   // events.
   supports(eventName: string): boolean { return true; }
 
   addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
-    element.addEventListener(eventName, handler as any, false);
-    return () => element.removeEventListener(eventName, handler as any, false);
+    /**
+     * This code is about to add a listener to the DOM. If Zone.js is present, than
+     * `addEventListener` has been patched. The patched code adds overhead in both
+     * memory and speed (3x slower) than native. For this reason if we detect that
+     * Zone.js is present we bypass zone and use native addEventListener instead.
+     * The result is faster registration but the zone will not be restored. We do
+     * manual zone restoration in element.ts renderEventHandlerClosure method.
+     *
+     * NOTE: it is possible that the element is from different iframe, and so we
+     * have to check before we execute the method.
+     */
+    const self = this;
+    let byPassZoneJS = element[ADD_EVENT_LISTENER];
+    let callback: EventListener = handler as EventListener;
+    if (byPassZoneJS) {
+      callback = function() {
+        return self.ngZone.runTask(handler as any, null, arguments as any, eventName);
+      };
+    }
+    element[byPassZoneJS ? ADD_EVENT_LISTENER : 'addEventListener'](eventName, callback, false);
+    return () => element[byPassZoneJS ? REMOVE_EVENT_LISTENER : 'removeEventListener'](
+               eventName, callback as any, false);
   }
 }
diff --git a/packages/platform-browser/src/dom/events/hammer_gestures.ts b/packages/platform-browser/src/dom/events/hammer_gestures.ts
index fc695c3f57..9969757d2d 100644
--- a/packages/platform-browser/src/dom/events/hammer_gestures.ts
+++ b/packages/platform-browser/src/dom/events/hammer_gestures.ts
@@ -59,8 +59,8 @@ const EVENT_NAMES = {
 export const HAMMER_GESTURE_CONFIG = new InjectionToken<HammerGestureConfig>('HammerGestureConfig');
 
 export interface HammerInstance {
-  on(eventName: string, callback: Function): void;
-  off(eventName: string, callback: Function): void;
+  on(eventName: string, callback?: Function): void;
+  off(eventName: string, callback?: Function): void;
 }
 
 /**
diff --git a/packages/platform-browser/src/dom/events/key_events.ts b/packages/platform-browser/src/dom/events/key_events.ts
index 0be06d9f17..5d0d7f2faf 100644
--- a/packages/platform-browser/src/dom/events/key_events.ts
+++ b/packages/platform-browser/src/dom/events/key_events.ts
@@ -31,7 +31,7 @@ export class KeyEventsPlugin extends EventManagerPlugin {
   supports(eventName: string): boolean { return KeyEventsPlugin.parseEventName(eventName) != null; }
 
   addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
-    const parsedEvent = KeyEventsPlugin.parseEventName(eventName);
+    const parsedEvent = KeyEventsPlugin.parseEventName(eventName) !;
 
     const outsideHandler =
         KeyEventsPlugin.eventCallback(parsedEvent['fullKey'], handler, this.manager.getZone());
@@ -41,7 +41,7 @@ export class KeyEventsPlugin extends EventManagerPlugin {
     });
   }
 
-  static parseEventName(eventName: string): {[key: string]: string} {
+  static parseEventName(eventName: string): {[key: string]: string}|null {
     const parts: string[] = eventName.toLowerCase().split('.');
 
     const domEventName = parts.shift();
@@ -49,7 +49,7 @@ export class KeyEventsPlugin extends EventManagerPlugin {
       return null;
     }
 
-    const key = KeyEventsPlugin._normalizeKey(parts.pop());
+    const key = KeyEventsPlugin._normalizeKey(parts.pop() !);
 
     let fullKey = '';
     MODIFIER_KEYS.forEach(modifierName => {
diff --git a/packages/platform-browser/src/dom/util.ts b/packages/platform-browser/src/dom/util.ts
index 5638c3025b..efbbbdb71a 100644
--- a/packages/platform-browser/src/dom/util.ts
+++ b/packages/platform-browser/src/dom/util.ts
@@ -6,6 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {ɵglobal as global} from '@angular/core';
+
 const CAMEL_CASE_REGEXP = /([A-Z])/g;
 const DASH_CASE_REGEXP = /-([a-z])/g;
 
@@ -17,3 +19,19 @@ export function camelCaseToDashCase(input: string): string {
 export function dashCaseToCamelCase(input: string): string {
   return input.replace(DASH_CASE_REGEXP, (...m: string[]) => m[1].toUpperCase());
 }
+
+/**
+ * Exports the value under a given `name` in the global property `ng`. For example `ng.probe` if
+ * `name` is `'probe'`.
+ * @param name Name under which it will be exported. Keep in mind this will be a property of the
+ * global `ng` object.
+ * @param value The value to export.
+ */
+export function exportNgVar(name: string, value: any): void {
+  if (!ng) {
+    global['ng'] = ng = (global['ng'] as{[key: string]: any} | undefined) || {};
+  }
+  ng[name] = value;
+}
+
+let ng: {[key: string]: any}|undefined;
diff --git a/packages/platform-browser/src/platform-browser.ts b/packages/platform-browser/src/platform-browser.ts
index 4018812f9d..deb1df279f 100644
--- a/packages/platform-browser/src/platform-browser.ts
+++ b/packages/platform-browser/src/platform-browser.ts
@@ -15,6 +15,6 @@ export {NgProbeToken} from './dom/debug/ng_probe';
 export {DOCUMENT} from './dom/dom_tokens';
 export {EVENT_MANAGER_PLUGINS, EventManager} from './dom/events/event_manager';
 export {HAMMER_GESTURE_CONFIG, HammerGestureConfig} from './dom/events/hammer_gestures';
-export {DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl} from './security/dom_sanitization_service';
+export {DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl, SafeValue} from './security/dom_sanitization_service';
 export * from './private_export';
 export {VERSION} from './version';
diff --git a/packages/platform-browser/src/private_export.ts b/packages/platform-browser/src/private_export.ts
index cb65462ab5..0ae42de328 100644
--- a/packages/platform-browser/src/private_export.ts
+++ b/packages/platform-browser/src/private_export.ts
@@ -8,7 +8,6 @@
 
 export {BROWSER_SANITIZATION_PROVIDERS as ɵBROWSER_SANITIZATION_PROVIDERS, INTERNAL_BROWSER_PLATFORM_PROVIDERS as ɵINTERNAL_BROWSER_PLATFORM_PROVIDERS, initDomAdapter as ɵinitDomAdapter} from './browser';
 export {BrowserDomAdapter as ɵBrowserDomAdapter} from './browser/browser_adapter';
-export {setValueOnPath as ɵsetValueOnPath} from './browser/browser_adapter';
 export {BrowserPlatformLocation as ɵBrowserPlatformLocation} from './browser/location/browser_platform_location';
 export {TRANSITION_ID as ɵTRANSITION_ID} from './browser/server-transition';
 export {BrowserGetTestability as ɵBrowserGetTestability} from './browser/testability';
diff --git a/packages/platform-browser/src/security/dom_sanitization_service.ts b/packages/platform-browser/src/security/dom_sanitization_service.ts
index c7c5801b4f..2810968d57 100644
--- a/packages/platform-browser/src/security/dom_sanitization_service.ts
+++ b/packages/platform-browser/src/security/dom_sanitization_service.ts
@@ -100,7 +100,7 @@ export abstract class DomSanitizer implements Sanitizer {
    * by replacing URLs that have an unsafe protocol part (such as `javascript:`). The implementation
    * is responsible to make sure that the value can definitely be safely used in the given context.
    */
-  abstract sanitize(context: SecurityContext, value: any): string;
+  abstract sanitize(context: SecurityContext, value: SafeValue|string|null): string|null;
 
   /**
    * Bypass security and trust the given value to be safe HTML. Only use this when the bound HTML
@@ -152,11 +152,11 @@ export abstract class DomSanitizer implements Sanitizer {
 export class DomSanitizerImpl extends DomSanitizer {
   constructor(@Inject(DOCUMENT) private _doc: any) { super(); }
 
-  sanitize(ctx: SecurityContext, value: any): string {
+  sanitize(ctx: SecurityContext, value: SafeValue|string|null): string|null {
     if (value == null) return null;
     switch (ctx) {
       case SecurityContext.NONE:
-        return value;
+        return value as string;
       case SecurityContext.HTML:
         if (value instanceof SafeHtmlImpl) return value.changingThisBreaksApplicationSecurity;
         this.checkNotSafeValue(value, 'HTML');
@@ -164,7 +164,7 @@ export class DomSanitizerImpl extends DomSanitizer {
       case SecurityContext.STYLE:
         if (value instanceof SafeStyleImpl) return value.changingThisBreaksApplicationSecurity;
         this.checkNotSafeValue(value, 'Style');
-        return sanitizeStyle(value);
+        return sanitizeStyle(value as string);
       case SecurityContext.SCRIPT:
         if (value instanceof SafeScriptImpl) return value.changingThisBreaksApplicationSecurity;
         this.checkNotSafeValue(value, 'Script');
diff --git a/packages/platform-browser/src/security/html_sanitizer.ts b/packages/platform-browser/src/security/html_sanitizer.ts
index 338c801768..07fb7c8ade 100644
--- a/packages/platform-browser/src/security/html_sanitizer.ts
+++ b/packages/platform-browser/src/security/html_sanitizer.ts
@@ -13,9 +13,9 @@ import {DomAdapter, getDOM} from '../dom/dom_adapter';
 import {sanitizeSrcset, sanitizeUrl} from './url_sanitizer';
 
 /** A <body> element that can be safely used to parse untrusted HTML. Lazily initialized below. */
-let inertElement: HTMLElement = null;
+let inertElement: HTMLElement|null = null;
 /** Lazily initialized to make sure the DOM adapter gets set before use. */
-let DOM: DomAdapter = null;
+let DOM: DomAdapter = null !;
 
 /** Returns an HTML element that is guaranteed to not execute code when creating elements in it. */
 function getInertElement() {
@@ -102,7 +102,7 @@ const HTML_ATTRS = tagSet(
     'scope,scrolling,shape,size,sizes,span,srclang,start,summary,tabindex,target,title,translate,type,usemap,' +
     'valign,value,vspace,width');
 
-// NB: This currently conciously doesn't support SVG. SVG sanitization has had several security
+// NB: This currently consciously doesn't support SVG. SVG sanitization has had several security
 // issues in the past, so it seems safer to leave it out if possible. If support for binding SVG via
 // innerHTML is required, SVG attributes should be added here.
 
@@ -126,18 +126,18 @@ class SanitizingHtmlSerializer {
     // This cannot use a TreeWalker, as it has to run on Angular's various DOM adapters.
     // However this code never accesses properties off of `document` before deleting its contents
     // again, so it shouldn't be vulnerable to DOM clobbering.
-    let current: Node = el.firstChild;
+    let current: Node = el.firstChild !;
     while (current) {
       if (DOM.isElementNode(current)) {
         this.startElement(current as Element);
       } else if (DOM.isTextNode(current)) {
-        this.chars(DOM.nodeValue(current));
+        this.chars(DOM.nodeValue(current) !);
       } else {
         // Strip non-element, non-text nodes.
         this.sanitizedSomething = true;
       }
       if (DOM.firstChild(current)) {
-        current = DOM.firstChild(current);
+        current = DOM.firstChild(current) !;
         continue;
       }
       while (current) {
@@ -146,14 +146,14 @@ class SanitizingHtmlSerializer {
           this.endElement(current as Element);
         }
 
-        let next = checkClobberedElement(current, DOM.nextSibling(current));
+        let next = checkClobberedElement(current, DOM.nextSibling(current) !);
 
         if (next) {
           current = next;
           break;
         }
 
-        current = checkClobberedElement(current, DOM.parentElement(current));
+        current = checkClobberedElement(current, DOM.parentElement(current) !);
       }
     }
     return this.buf.join('');
@@ -215,7 +215,6 @@ const NON_ALPHANUMERIC_REGEXP = /([^\#-~ |!])/g;
  * resulting string can be safely inserted into attribute or
  * element text.
  * @param value
- * @returns {string} escaped text
  */
 function encodeEntities(value: string) {
   return value.replace(/&/g, '&amp;')
diff --git a/packages/platform-browser/test/animation/animation_renderer_spec.ts b/packages/platform-browser/test/animation/animation_renderer_spec.ts
index cc8cf3d199..ba44b66176 100644
--- a/packages/platform-browser/test/animation/animation_renderer_spec.ts
+++ b/packages/platform-browser/test/animation/animation_renderer_spec.ts
@@ -6,22 +6,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {AnimationPlayer, AnimationTriggerMetadata, animate, state, style, transition, trigger} from '@angular/animations';
-import {ɵAnimationEngine} from '@angular/animations/browser';
-import {Component, Injectable, RendererFactory2, RendererType2, ViewChild} from '@angular/core';
+import {ɵAnimationEngine as AnimationEngine} from '@angular/animations/browser';
+import {Component, Injectable, NgZone, RendererFactory2, RendererType2, ViewChild} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
-import {BrowserAnimationsModule, ɵAnimationRendererFactory} from '@angular/platform-browser/animations';
-
+import {BrowserAnimationsModule, ɵAnimationRendererFactory as AnimationRendererFactory} from '@angular/platform-browser/animations';
+import {DomRendererFactory2} from '@angular/platform-browser/src/dom/dom_renderer';
 import {InjectableAnimationEngine} from '../../animations/src/providers';
 import {el} from '../../testing/src/browser_util';
 
 export function main() {
-  describe('ɵAnimationRenderer', () => {
+  describe('AnimationRenderer', () => {
     let element: any;
     beforeEach(() => {
       element = el('<div></div>');
 
       TestBed.configureTestingModule({
-        providers: [{provide: ɵAnimationEngine, useClass: MockAnimationEngine}],
+        providers: [{provide: AnimationEngine, useClass: MockAnimationEngine}],
         imports: [BrowserAnimationsModule]
       });
     });
@@ -29,24 +29,17 @@ export function main() {
     function makeRenderer(animationTriggers: any[] = []) {
       const type = <RendererType2>{
         id: 'id',
-        encapsulation: null,
+        encapsulation: null !,
         styles: [],
         data: {'animation': animationTriggers}
       };
-      return (TestBed.get(RendererFactory2) as ɵAnimationRendererFactory)
+      return (TestBed.get(RendererFactory2) as AnimationRendererFactory)
           .createRenderer(element, type);
     }
 
-    it('should register the provided triggers with the view engine when created', () => {
-      const renderer = makeRenderer([trigger('trig1', []), trigger('trig2', [])]);
-
-      const engine = TestBed.get(ɵAnimationEngine) as MockAnimationEngine;
-      expect(engine.triggers.map(t => t.name)).toEqual(['trig1', 'trig2']);
-    });
-
     it('should hook into the engine\'s insert operations when appending children', () => {
       const renderer = makeRenderer();
-      const engine = TestBed.get(ɵAnimationEngine) as MockAnimationEngine;
+      const engine = TestBed.get(AnimationEngine) as MockAnimationEngine;
       const container = el('<div></div>');
 
       renderer.appendChild(container, element);
@@ -56,7 +49,7 @@ export function main() {
     it('should hook into the engine\'s insert operations when inserting a child before another',
        () => {
          const renderer = makeRenderer();
-         const engine = TestBed.get(ɵAnimationEngine) as MockAnimationEngine;
+         const engine = TestBed.get(AnimationEngine) as MockAnimationEngine;
          const container = el('<div></div>');
          const element2 = el('<div></div>');
          container.appendChild(element2);
@@ -67,7 +60,7 @@ export function main() {
 
     it('should hook into the engine\'s insert operations when removing children', () => {
       const renderer = makeRenderer();
-      const engine = TestBed.get(ɵAnimationEngine) as MockAnimationEngine;
+      const engine = TestBed.get(AnimationEngine) as MockAnimationEngine;
       const container = el('<div></div>');
 
       renderer.removeChild(container, element);
@@ -76,19 +69,19 @@ export function main() {
 
     it('should hook into the engine\'s setProperty call if the property begins with `@`', () => {
       const renderer = makeRenderer();
-      const engine = TestBed.get(ɵAnimationEngine) as MockAnimationEngine;
+      const engine = TestBed.get(AnimationEngine) as MockAnimationEngine;
 
       renderer.setProperty(element, 'prop', 'value');
       expect(engine.captures['setProperty']).toBeFalsy();
 
       renderer.setProperty(element, '@prop', 'value');
-      expect(engine.captures['setProperty'].pop()).toEqual([element, 'id#prop', 'value']);
+      expect(engine.captures['setProperty'].pop()).toEqual([element, 'prop', 'value']);
     });
 
     describe('listen', () => {
       it('should hook into the engine\'s listen call if the property begins with `@`', () => {
         const renderer = makeRenderer();
-        const engine = TestBed.get(ɵAnimationEngine) as MockAnimationEngine;
+        const engine = TestBed.get(AnimationEngine) as MockAnimationEngine;
 
         const cb = (event: any): boolean => { return true; };
 
@@ -96,13 +89,13 @@ export function main() {
         expect(engine.captures['listen']).toBeFalsy();
 
         renderer.listen(element, '@event.phase', cb);
-        expect(engine.captures['listen'].pop()).toEqual([element, 'id#event', 'phase']);
+        expect(engine.captures['listen'].pop()).toEqual([element, 'event', 'phase']);
       });
 
       it('should resolve the body|document|window nodes given their values as strings as input',
          () => {
            const renderer = makeRenderer();
-           const engine = TestBed.get(ɵAnimationEngine) as MockAnimationEngine;
+           const engine = TestBed.get(AnimationEngine) as MockAnimationEngine;
 
            const cb = (event: any): boolean => { return true; };
 
@@ -117,6 +110,10 @@ export function main() {
          });
     });
 
+    describe('registering animations', () => {
+      it('should only create a trigger definition once even if the registered multiple times');
+    });
+
     describe('flushing animations', () => {
       // these tests are only mean't to be run within the DOM
       if (typeof Element == 'undefined') return;
@@ -138,11 +135,11 @@ export function main() {
         }
 
         TestBed.configureTestingModule({
-          providers: [{provide: ɵAnimationEngine, useClass: InjectableAnimationEngine}],
+          providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}],
           declarations: [Cmp]
         });
 
-        const engine = TestBed.get(ɵAnimationEngine);
+        const engine = TestBed.get(AnimationEngine);
         const fixture = TestBed.createComponent(Cmp);
         const cmp = fixture.componentInstance;
         cmp.exp = 'state';
@@ -174,7 +171,7 @@ export function main() {
            }
 
            TestBed.configureTestingModule({
-             providers: [{provide: ɵAnimationEngine, useClass: InjectableAnimationEngine}],
+             providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}],
              declarations: [Cmp]
            });
 
@@ -223,11 +220,11 @@ export function main() {
            }
 
            TestBed.configureTestingModule({
-             providers: [{provide: ɵAnimationEngine, useClass: InjectableAnimationEngine}],
+             providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}],
              declarations: [Cmp]
            });
 
-           const engine = TestBed.get(ɵAnimationEngine);
+           const engine = TestBed.get(AnimationEngine);
            const fixture = TestBed.createComponent(Cmp);
            const cmp = fixture.componentInstance;
 
@@ -239,7 +236,7 @@ export function main() {
            assertHasParent(elm2);
            assertHasParent(elm3);
            engine.flush();
-           finishPlayers(engine.activePlayers);
+           finishPlayers(engine.players);
 
            cmp.exp1 = false;
            fixture.detectChanges();
@@ -247,7 +244,7 @@ export function main() {
            assertHasParent(elm2);
            assertHasParent(elm3);
            engine.flush();
-           expect(engine.activePlayers.length).toEqual(0);
+           expect(engine.players.length).toEqual(0);
 
            cmp.exp2 = false;
            fixture.detectChanges();
@@ -255,7 +252,7 @@ export function main() {
            assertHasParent(elm2, false);
            assertHasParent(elm3);
            engine.flush();
-           expect(engine.activePlayers.length).toEqual(0);
+           expect(engine.players.length).toEqual(0);
 
            cmp.exp3 = false;
            fixture.detectChanges();
@@ -263,14 +260,57 @@ export function main() {
            assertHasParent(elm2, false);
            assertHasParent(elm3);
            engine.flush();
-           expect(engine.activePlayers.length).toEqual(1);
+           expect(engine.players.length).toEqual(1);
          });
     });
   });
+
+  describe('AnimationRendererFactory', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [{
+          provide: RendererFactory2,
+          useClass: ExtendedAnimationRendererFactory,
+          deps: [DomRendererFactory2, AnimationEngine, NgZone]
+        }],
+        imports: [BrowserAnimationsModule]
+      });
+    });
+
+    it('should provide hooks at the start and end of change detection', () => {
+      @Component({
+        selector: 'my-cmp',
+        template: `
+          <div [@myAnimation]="exp"></div> 
+        `,
+        animations: [trigger('myAnimation', [])]
+      })
+      class Cmp {
+        public exp: any;
+      }
+
+      TestBed.configureTestingModule({
+        providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}],
+        declarations: [Cmp]
+      });
+
+      const renderer = TestBed.get(RendererFactory2) as ExtendedAnimationRendererFactory;
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      renderer.log = [];
+      fixture.detectChanges();
+      expect(renderer.log).toEqual(['begin', 'end']);
+
+      renderer.log = [];
+      fixture.detectChanges();
+      expect(renderer.log).toEqual(['begin', 'end']);
+    });
+  });
 }
 
 @Injectable()
-class MockAnimationEngine extends ɵAnimationEngine {
+class MockAnimationEngine extends InjectableAnimationEngine {
   captures: {[method: string]: any[]} = {};
   triggers: AnimationTriggerMetadata[] = [];
 
@@ -279,24 +319,47 @@ class MockAnimationEngine extends ɵAnimationEngine {
     data.push(args);
   }
 
-  registerTrigger(trigger: AnimationTriggerMetadata) { this.triggers.push(trigger); }
-
-  onInsert(element: any, domFn: () => any): void { this._capture('onInsert', [element]); }
-
-  onRemove(element: any, domFn: () => any): void { this._capture('onRemove', [element]); }
-
-  setProperty(element: any, property: string, value: any): void {
-    this._capture('setProperty', [element, property, value]);
+  registerTrigger(componentId: string, namespaceId: string, trigger: AnimationTriggerMetadata) {
+    this.triggers.push(trigger);
   }
 
-  listen(element: any, eventName: string, eventPhase: string, callback: (event: any) => any):
-      () => void {
+  onInsert(namespaceId: string, element: any): void { this._capture('onInsert', [element]); }
+
+  onRemove(namespaceId: string, element: any, domFn: () => any): void {
+    this._capture('onRemove', [element]);
+  }
+
+  process(namespaceId: string, element: any, property: string, value: any): boolean {
+    this._capture('setProperty', [element, property, value]);
+    return true;
+  }
+
+  listen(
+      namespaceId: string, element: any, eventName: string, eventPhase: string,
+      callback: (event: any) => any): () => void {
     // we don't capture the callback here since the renderer wraps it in a zone
     this._capture('listen', [element, eventName, eventPhase]);
     return () => {};
   }
 
   flush() {}
+
+  destroy(namespaceId: string) {}
+}
+
+@Injectable()
+class ExtendedAnimationRendererFactory extends AnimationRendererFactory {
+  public log: string[] = [];
+
+  begin() {
+    super.begin();
+    this.log.push('begin');
+  }
+
+  end() {
+    super.end();
+    this.log.push('end');
+  }
 }
 
 
diff --git a/packages/platform-browser/test/animation/browser_animation_builder_spec.ts b/packages/platform-browser/test/animation/browser_animation_builder_spec.ts
new file mode 100644
index 0000000000..d427a2d629
--- /dev/null
+++ b/packages/platform-browser/test/animation/browser_animation_builder_spec.ts
@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AnimationBuilder, animate, style} from '@angular/animations';
+import {AnimationDriver} from '@angular/animations/browser';
+import {MockAnimationDriver} from '@angular/animations/browser/testing';
+import {Component, ViewChild} from '@angular/core';
+import {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+import {BrowserAnimationBuilder} from '../../animations/src/animation_builder';
+import {el} from '../../testing/src/browser_util';
+
+export function main() {
+  describe('BrowserAnimationBuilder', () => {
+    let element: any;
+    beforeEach(() => {
+      element = el('<div></div>');
+
+      TestBed.configureTestingModule({
+        imports: [NoopAnimationsModule],
+        providers: [{provide: AnimationDriver, useClass: MockAnimationDriver}]
+      });
+    });
+
+    it('should inject AnimationBuilder into a component', () => {
+      @Component({
+        selector: 'ani-cmp',
+        template: '...',
+      })
+      class Cmp {
+        constructor(public builder: AnimationBuilder) {}
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      fixture.detectChanges();
+      expect(cmp.builder instanceof BrowserAnimationBuilder).toBeTruthy();
+    });
+
+    it('should listen on start and done on the animation builder\'s player', fakeAsync(() => {
+         @Component({
+           selector: 'ani-cmp',
+           template: '...',
+         })
+         class Cmp {
+           @ViewChild('target') public target: any;
+
+           constructor(public builder: AnimationBuilder) {}
+
+           build() {
+             const definition =
+                 this.builder.build([style({opacity: 0}), animate(1000, style({opacity: 1}))]);
+
+             return definition.create(this.target);
+           }
+         }
+
+         TestBed.configureTestingModule({declarations: [Cmp]});
+
+         const fixture = TestBed.createComponent(Cmp);
+         const cmp = fixture.componentInstance;
+         fixture.detectChanges();
+
+         const player = cmp.build();
+
+         let started = false;
+         player.onStart(() => started = true);
+
+         let finished = false;
+         player.onDone(() => finished = true);
+
+         let destroyed = false;
+         player.onDestroy(() => destroyed = true);
+
+         player.init();
+         flushMicrotasks();
+         expect(started).toBeFalsy();
+         expect(finished).toBeFalsy();
+         expect(destroyed).toBeFalsy();
+
+         player.play();
+         flushMicrotasks();
+         expect(started).toBeTruthy();
+         expect(finished).toBeFalsy();
+         expect(destroyed).toBeFalsy();
+
+         player.finish();
+         flushMicrotasks();
+         expect(started).toBeTruthy();
+         expect(finished).toBeTruthy();
+         expect(destroyed).toBeFalsy();
+
+         player.destroy();
+         flushMicrotasks();
+         expect(started).toBeTruthy();
+         expect(finished).toBeTruthy();
+         expect(destroyed).toBeTruthy();
+       }));
+  });
+}
diff --git a/packages/platform-browser/test/browser/browser_adapter_spec.ts b/packages/platform-browser/test/browser/browser_adapter_spec.ts
index 38a14ac73c..5230ed926e 100644
--- a/packages/platform-browser/test/browser/browser_adapter_spec.ts
+++ b/packages/platform-browser/test/browser/browser_adapter_spec.ts
@@ -9,22 +9,9 @@
 import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 
-import {parseCookieValue} from '../../src/browser/browser_adapter';
 
 export function main() {
   describe('cookies', () => {
-    it('parses cookies', () => {
-      const cookie = 'other-cookie=false; xsrf-token=token-value; is_awesome=true; ffo=true;';
-      expect(parseCookieValue(cookie, 'xsrf-token')).toBe('token-value');
-    });
-    it('handles encoded keys', () => {
-      expect(parseCookieValue('whitespace%20token=token-value', 'whitespace token'))
-          .toBe('token-value');
-    });
-    it('handles encoded values', () => {
-      expect(parseCookieValue('token=whitespace%20', 'token')).toBe('whitespace ');
-      expect(parseCookieValue('token=whitespace%0A', 'token')).toBe('whitespace\n');
-    });
     it('sets cookie values', () => {
       getDOM().setCookie('my test cookie', 'my test value');
       getDOM().setCookie('my other cookie', 'my test value 2');
diff --git a/packages/platform-browser/test/browser/meta_spec.ts b/packages/platform-browser/test/browser/meta_spec.ts
index a3a1d8a9e8..2ef69df558 100644
--- a/packages/platform-browser/test/browser/meta_spec.ts
+++ b/packages/platform-browser/test/browser/meta_spec.ts
@@ -28,14 +28,14 @@ export function main() {
     afterEach(() => getDOM().remove(defaultMeta));
 
     it('should return meta tag matching selector', () => {
-      const actual: HTMLMetaElement = metaService.getTag('property="fb:app_id"');
+      const actual: HTMLMetaElement = metaService.getTag('property="fb:app_id"') !;
       expect(actual).not.toBeNull();
       expect(getDOM().getAttribute(actual, 'content')).toEqual('123456789');
     });
 
     it('should return all meta tags matching selector', () => {
-      const tag1 = metaService.addTag({name: 'author', content: 'page author'});
-      const tag2 = metaService.addTag({name: 'author', content: 'another page author'});
+      const tag1 = metaService.addTag({name: 'author', content: 'page author'}) !;
+      const tag2 = metaService.addTag({name: 'author', content: 'another page author'}) !;
 
       const actual: HTMLMetaElement[] = metaService.getTags('name=author');
       expect(actual.length).toEqual(2);
@@ -48,7 +48,7 @@ export function main() {
     });
 
     it('should return null if meta tag does not exist', () => {
-      const actual: HTMLMetaElement = metaService.getTag('fake=fake');
+      const actual: HTMLMetaElement = metaService.getTag('fake=fake') !;
       expect(actual).toBeNull();
     });
 
@@ -71,7 +71,7 @@ export function main() {
 
       metaService.addTags([{name: 'keywords', content: 'meta test'}]);
 
-      const meta = metaService.getTag(selector);
+      const meta = metaService.getTag(selector) !;
       expect(meta).not.toBeNull();
 
       metaService.removeTagElement(meta);
@@ -102,7 +102,7 @@ export function main() {
 
       metaService.updateTag({name: 'twitter:title', content: 'Content Title'}, selector);
 
-      const actual = metaService.getTag(selector);
+      const actual = metaService.getTag(selector) !;
       expect(actual).not.toBeNull();
       expect(getDOM().getAttribute(actual, 'content')).toEqual('Content Title');
 
@@ -116,7 +116,7 @@ export function main() {
 
       metaService.addTag({name: 'og:title', content: 'Content Title'});
 
-      const actual = metaService.getTag(selector);
+      const actual = metaService.getTag(selector) !;
       expect(actual).not.toBeNull();
       expect(getDOM().getAttribute(actual, 'content')).toEqual('Content Title');
 
@@ -134,8 +134,8 @@ export function main() {
         {name: 'twitter:title', content: 'Content Title'},
         {property: 'og:title', content: 'Content Title'}
       ]);
-      const twitterMeta = metaService.getTag(nameSelector);
-      const fbMeta = metaService.getTag(propertySelector);
+      const twitterMeta = metaService.getTag(nameSelector) !;
+      const fbMeta = metaService.getTag(propertySelector) !;
       expect(twitterMeta).not.toBeNull();
       expect(fbMeta).not.toBeNull();
 
@@ -158,7 +158,7 @@ export function main() {
          const selector = 'property="fb:app_id"';
          expect(metaService.getTags(selector).length).toEqual(1);
 
-         const meta = metaService.addTag({property: 'fb:app_id', content: '666'});
+         const meta = metaService.addTag({property: 'fb:app_id', content: '666'}) !;
 
          expect(metaService.getTags(selector).length).toEqual(2);
 
@@ -170,7 +170,7 @@ export function main() {
       const selector = 'property="fb:app_id"';
       expect(metaService.getTags(selector).length).toEqual(1);
 
-      const meta = metaService.addTag({property: 'fb:app_id', content: '123456789'}, true);
+      const meta = metaService.addTag({property: 'fb:app_id', content: '123456789'}, true) !;
 
       expect(metaService.getTags(selector).length).toEqual(2);
 
diff --git a/packages/platform-browser/test/browser/title_spec.ts b/packages/platform-browser/test/browser/title_spec.ts
index ee59945026..9c1b27e7ca 100644
--- a/packages/platform-browser/test/browser/title_spec.ts
+++ b/packages/platform-browser/test/browser/title_spec.ts
@@ -30,7 +30,7 @@ export function main() {
     });
 
     it('should reset title to empty string if title not provided', () => {
-      titleService.setTitle(null);
+      titleService.setTitle(null !);
       expect(getDOM().getTitle(doc)).toEqual('');
     });
   });
diff --git a/packages/platform-browser/test/dom/events/event_manager_spec.ts b/packages/platform-browser/test/dom/events/event_manager_spec.ts
index 317efb6f04..8d924ba190 100644
--- a/packages/platform-browser/test/dom/events/event_manager_spec.ts
+++ b/packages/platform-browser/test/dom/events/event_manager_spec.ts
@@ -16,12 +16,14 @@ import {el} from '../../../testing/src/browser_util';
 export function main() {
   let domEventPlugin: DomEventsPlugin;
   let doc: any;
+  let zone: NgZone;
 
   describe('EventManager', () => {
 
     beforeEach(() => {
       doc = getDOM().supportsDOMEvents() ? document : getDOM().createHtmlDocument();
-      domEventPlugin = new DomEventsPlugin(doc);
+      zone = new NgZone({});
+      domEventPlugin = new DomEventsPlugin(doc, zone);
     });
 
     it('should delegate event bindings to plugins that are passed in from the most generic one to the most specific one',
@@ -51,7 +53,7 @@ export function main() {
       const element = el('<div></div>');
       const plugin = new FakeEventManagerPlugin(doc, ['dblclick']);
       const manager = new EventManager([plugin], new FakeNgZone());
-      expect(() => manager.addEventListener(element, 'click', null))
+      expect(() => manager.addEventListener(element, 'click', null !))
           .toThrowError('No event manager plugin found for event click');
     });
 
diff --git a/packages/platform-browser/test/security/html_sanitizer_spec.ts b/packages/platform-browser/test/security/html_sanitizer_spec.ts
index bf8a0b16f9..144a052168 100644
--- a/packages/platform-browser/test/security/html_sanitizer_spec.ts
+++ b/packages/platform-browser/test/security/html_sanitizer_spec.ts
@@ -14,7 +14,7 @@ import {sanitizeHtml} from '../../src/security/html_sanitizer';
 export function main() {
   describe('HTML sanitizer', () => {
     let defaultDoc: any;
-    let originalLog: (msg: any) => any = null;
+    let originalLog: (msg: any) => any = null !;
     let logMsgs: string[];
 
     beforeEach(() => {
diff --git a/packages/platform-browser/test/testing_public_spec.ts b/packages/platform-browser/test/testing_public_spec.ts
index dec52c0d66..cd97306f7e 100644
--- a/packages/platform-browser/test/testing_public_spec.ts
+++ b/packages/platform-browser/test/testing_public_spec.ts
@@ -7,7 +7,7 @@
  */
 
 import {CompilerConfig, ResourceLoader} from '@angular/compiler';
-import {CUSTOM_ELEMENTS_SCHEMA, Component, Directive, Injectable, Input, NgModule, Pipe, ɵstringify as stringify} from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, Compiler, Component, Directive, Inject, Injectable, Injector, Input, NgModule, Optional, Pipe, SkipSelf, ɵstringify as stringify} from '@angular/core';
 import {TestBed, async, fakeAsync, getTestBed, inject, tick, withModule} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
@@ -185,7 +185,7 @@ export function main() {
 
           it('should allow the use of fakeAsync',
              fakeAsync(inject([FancyService], (service: FancyService) => {
-               let value: string;
+               let value: string = undefined !;
                service.getAsyncValue().then((val) => value = val);
                tick();
                expect(value).toEqual('async value');
@@ -401,6 +401,277 @@ export function main() {
         });
       });
 
+      describe('overriding providers', () => {
+        describe('in NgModules', () => {
+          it('should support useValue', () => {
+            TestBed.configureTestingModule({
+              providers: [
+                {provide: 'a', useValue: 'aValue'},
+              ]
+            });
+            TestBed.overrideProvider('a', {useValue: 'mockValue'});
+            expect(TestBed.get('a')).toBe('mockValue');
+          });
+
+          it('should support useFactory', () => {
+            TestBed.configureTestingModule({
+              providers: [
+                {provide: 'dep', useValue: 'depValue'},
+                {provide: 'a', useValue: 'aValue'},
+              ]
+            });
+            TestBed.overrideProvider(
+                'a', {useFactory: (dep: any) => `mockA: ${dep}`, deps: ['dep']});
+            expect(TestBed.get('a')).toBe('mockA: depValue');
+          });
+
+          it('should support @Optional without matches', () => {
+            TestBed.configureTestingModule({
+              providers: [
+                {provide: 'a', useValue: 'aValue'},
+              ]
+            });
+            TestBed.overrideProvider(
+                'a', {useFactory: (dep: any) => `mockA: ${dep}`, deps: [[new Optional(), 'dep']]});
+            expect(TestBed.get('a')).toBe('mockA: null');
+          });
+
+          it('should support Optional with matches', () => {
+            TestBed.configureTestingModule({
+              providers: [
+                {provide: 'dep', useValue: 'depValue'},
+                {provide: 'a', useValue: 'aValue'},
+              ]
+            });
+            TestBed.overrideProvider(
+                'a', {useFactory: (dep: any) => `mockA: ${dep}`, deps: [[new Optional(), 'dep']]});
+            expect(TestBed.get('a')).toBe('mockA: depValue');
+          });
+
+          it('should support SkipSelf', () => {
+            @NgModule({
+              providers: [
+                {provide: 'a', useValue: 'aValue'},
+                {provide: 'dep', useValue: 'depValue'},
+              ]
+            })
+            class MyModule {
+            }
+
+            TestBed.overrideProvider(
+                'a', {useFactory: (dep: any) => `mockA: ${dep}`, deps: [[new SkipSelf(), 'dep']]});
+            TestBed.configureTestingModule(
+                {providers: [{provide: 'dep', useValue: 'parentDepValue'}]});
+
+            const compiler = TestBed.get(Compiler) as Compiler;
+            const modFactory = compiler.compileModuleSync(MyModule);
+            expect(modFactory.create(getTestBed()).injector.get('a')).toBe('mockA: parentDepValue');
+          });
+
+          describe('injecting eager providers into an eager overwritten provider', () => {
+            @NgModule({
+              providers: [
+                {provide: 'a', useFactory: () => 'aValue'},
+                {provide: 'b', useFactory: () => 'bValue'},
+              ]
+            })
+            class MyModule {
+              // NgModule is eager, which makes all of its deps eager
+              constructor(@Inject('a') a: any, @Inject('b') b: any) {}
+            }
+
+            it('should inject providers that were declared before', () => {
+              TestBed.configureTestingModule({imports: [MyModule]});
+              TestBed.overrideProvider(
+                  'b', {useFactory: (a: string) => `mockB: ${a}`, deps: ['a']});
+
+              expect(TestBed.get('b')).toBe('mockB: aValue');
+            });
+
+            it('should inject providers that were declared afterwards', () => {
+              TestBed.configureTestingModule({imports: [MyModule]});
+              TestBed.overrideProvider(
+                  'a', {useFactory: (b: string) => `mockA: ${b}`, deps: ['b']});
+
+              expect(TestBed.get('a')).toBe('mockA: bValue');
+            });
+          });
+        });
+
+        describe('in Components', () => {
+          it('should support useValue', () => {
+            @Component({
+              template: '',
+              providers: [
+                {provide: 'a', useValue: 'aValue'},
+              ]
+            })
+            class MComp {
+            }
+
+            TestBed.overrideProvider('a', {useValue: 'mockValue'});
+            const ctx =
+                TestBed.configureTestingModule({declarations: [MComp]}).createComponent(MComp);
+
+            expect(ctx.debugElement.injector.get('a')).toBe('mockValue');
+          });
+
+          it('should support useFactory', () => {
+            @Component({
+              template: '',
+              providers: [
+                {provide: 'dep', useValue: 'depValue'},
+                {provide: 'a', useValue: 'aValue'},
+              ]
+            })
+            class MyComp {
+            }
+
+            TestBed.overrideProvider(
+                'a', {useFactory: (dep: any) => `mockA: ${dep}`, deps: ['dep']});
+            const ctx =
+                TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+
+            expect(ctx.debugElement.injector.get('a')).toBe('mockA: depValue');
+          });
+
+          it('should support @Optional without matches', () => {
+            @Component({
+              template: '',
+              providers: [
+                {provide: 'a', useValue: 'aValue'},
+              ]
+            })
+            class MyComp {
+            }
+
+            TestBed.overrideProvider(
+                'a', {useFactory: (dep: any) => `mockA: ${dep}`, deps: [[new Optional(), 'dep']]});
+            const ctx =
+                TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+
+            expect(ctx.debugElement.injector.get('a')).toBe('mockA: null');
+          });
+
+          it('should support Optional with matches', () => {
+            @Component({
+              template: '',
+              providers: [
+                {provide: 'dep', useValue: 'depValue'},
+                {provide: 'a', useValue: 'aValue'},
+              ]
+            })
+            class MyComp {
+            }
+
+            TestBed.overrideProvider(
+                'a', {useFactory: (dep: any) => `mockA: ${dep}`, deps: [[new Optional(), 'dep']]});
+            const ctx =
+                TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+
+            expect(ctx.debugElement.injector.get('a')).toBe('mockA: depValue');
+          });
+
+          it('should support SkipSelf', () => {
+            @Directive({
+              selector: '[myDir]',
+              providers: [
+                {provide: 'a', useValue: 'aValue'},
+                {provide: 'dep', useValue: 'depValue'},
+              ]
+            })
+            class MyDir {
+            }
+
+            @Component({
+              template: '<div myDir></div>',
+              providers: [
+                {provide: 'dep', useValue: 'parentDepValue'},
+              ]
+            })
+            class MyComp {
+            }
+
+            TestBed.overrideProvider(
+                'a', {useFactory: (dep: any) => `mockA: ${dep}`, deps: [[new SkipSelf(), 'dep']]});
+            const ctx = TestBed.configureTestingModule({declarations: [MyComp, MyDir]})
+                            .createComponent(MyComp);
+            expect(ctx.debugElement.children[0].injector.get('a')).toBe('mockA: parentDepValue');
+          });
+
+          it('should support multiple providers in a template', () => {
+            @Directive({
+              selector: '[myDir1]',
+              providers: [
+                {provide: 'a', useValue: 'aValue1'},
+              ]
+            })
+            class MyDir1 {
+            }
+
+            @Directive({
+              selector: '[myDir2]',
+              providers: [
+                {provide: 'a', useValue: 'aValue2'},
+              ]
+            })
+            class MyDir2 {
+            }
+
+            @Component({
+              template: '<div myDir1></div><div myDir2></div>',
+            })
+            class MyComp {
+            }
+
+            TestBed.overrideProvider('a', {useValue: 'mockA'});
+            const ctx = TestBed.configureTestingModule({declarations: [MyComp, MyDir1, MyDir2]})
+                            .createComponent(MyComp);
+            expect(ctx.debugElement.children[0].injector.get('a')).toBe('mockA');
+            expect(ctx.debugElement.children[1].injector.get('a')).toBe('mockA');
+          });
+
+          describe('injecting eager providers into an eager overwritten provider', () => {
+            @Component({
+              template: '',
+              providers: [
+                {provide: 'a', useFactory: () => 'aValue'},
+                {provide: 'b', useFactory: () => 'bValue'},
+              ]
+            })
+            class MyComp {
+              // Component is eager, which makes all of its deps eager
+              constructor(@Inject('a') a: any, @Inject('b') b: any) {}
+            }
+
+            it('should inject providers that were declared before it', () => {
+              TestBed.overrideProvider(
+                  'b', {useFactory: (a: string) => `mockB: ${a}`, deps: ['a']});
+              const ctx =
+                  TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+
+              expect(ctx.debugElement.injector.get('b')).toBe('mockB: aValue');
+            });
+
+            it('should inject providers that were declared after it', () => {
+              TestBed.overrideProvider(
+                  'a', {useFactory: (b: string) => `mockA: ${b}`, deps: ['b']});
+              const ctx =
+                  TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp);
+
+              expect(ctx.debugElement.injector.get('a')).toBe('mockA: bValue');
+            });
+          });
+        });
+
+        it('should reset overrides when the testing modules is resetted', () => {
+          TestBed.overrideProvider('a', {useValue: 'mockValue'});
+          TestBed.resetTestingModule();
+          TestBed.configureTestingModule({providers: [{provide: 'a', useValue: 'aValue'}]});
+          expect(TestBed.get('a')).toBe('aValue');
+        });
+      });
+
       describe('setting up the compiler', () => {
 
         describe('providers', () => {
@@ -449,7 +720,7 @@ export function main() {
           reject = rej;
         });
         originalJasmineIt = jasmine.getEnv().it;
-        jasmine.getEnv().it = (description: string, fn: (done: DoneFn) => void) => {
+        jasmine.getEnv().it = (description: string, fn: (done: DoneFn) => void): any => {
           const done = <DoneFn>(() => resolve(null));
           done.fail = (err) => reject(err);
           fn(done);
@@ -497,7 +768,7 @@ export function main() {
         const itPromise = patchJasmineIt();
 
         it('should fail with an error from a promise', async(inject([], () => {
-             let reject: (error: any) => void;
+             let reject: (error: any) => void = undefined !;
              const promise = new Promise((_, rej) => reject = rej);
              const p = promise.then(() => expect(1).toEqual(2));
 
diff --git a/packages/platform-browser/testing/rollup.config.js b/packages/platform-browser/testing/rollup.config.js
index 1f966cce22..57702e8039 100644
--- a/packages/platform-browser/testing/rollup.config.js
+++ b/packages/platform-browser/testing/rollup.config.js
@@ -6,15 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/platform-browser': 'ng.platformBrowser'
+};
+
 export default {
   entry: '../../../dist/packages-dist/platform-browser/@angular/platform-browser/testing.es5.js',
   dest: '../../../dist/packages-dist/platform-browser/bundles/platform-browser-testing.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.platformBrowser.testing',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/platform-browser': 'ng.platformBrowser'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/platform-browser/testing/src/browser_util.ts b/packages/platform-browser/testing/src/browser_util.ts
index 07d49a9c2c..875e378d56 100644
--- a/packages/platform-browser/testing/src/browser_util.ts
+++ b/packages/platform-browser/testing/src/browser_util.ts
@@ -12,7 +12,7 @@ import {ɵgetDOM as getDOM} from '@angular/platform-browser';
 export let browserDetection: BrowserDetection;
 
 export class BrowserDetection {
-  private _overrideUa: string;
+  private _overrideUa: string|null;
   private get _ua(): string {
     if (typeof this._overrideUa === 'string') {
       return this._overrideUa;
@@ -23,7 +23,7 @@ export class BrowserDetection {
 
   static setup() { browserDetection = new BrowserDetection(null); }
 
-  constructor(ua: string) { this._overrideUa = ua; }
+  constructor(ua: string|null) { this._overrideUa = ua; }
 
   get isFirefox(): boolean { return this._ua.indexOf('Firefox') > -1; }
 
diff --git a/packages/platform-browser/testing/src/matchers.ts b/packages/platform-browser/testing/src/matchers.ts
index 8e7cf480ee..f43fe4e051 100644
--- a/packages/platform-browser/testing/src/matchers.ts
+++ b/packages/platform-browser/testing/src/matchers.ts
@@ -121,7 +121,7 @@ _global.beforeEach(function() {
         }
       };
 
-      function compareMap(actual: any, expected: any) {
+      function compareMap(actual: any, expected: any): boolean {
         if (actual instanceof Map) {
           let pass = actual.size === expected.size;
           if (pass) {
@@ -129,7 +129,8 @@ _global.beforeEach(function() {
           }
           return pass;
         } else {
-          return undefined;
+          // TODO(misko): we should change the return, but jasmine.d.ts is not null safe
+          return undefined !;
         }
       }
     },
@@ -270,5 +271,5 @@ function elementText(n: any): string {
     return elementText(getDOM().childNodesAsList(n));
   }
 
-  return getDOM().getText(n);
+  return getDOM().getText(n) !;
 }
diff --git a/packages/platform-browser/tsconfig-build.json b/packages/platform-browser/tsconfig-build.json
index fb9a8fda97..2cf1daac46 100644
--- a/packages/platform-browser/tsconfig-build.json
+++ b/packages/platform-browser/tsconfig-build.json
@@ -4,6 +4,7 @@
     "declaration": true,
     "stripInternal": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "module": "es2015",
     "moduleResolution": "node",
     "outDir": "../../dist/packages/platform-browser",
diff --git a/packages/platform-server/integrationtest/package.json b/packages/platform-server/integrationtest/package.json
index ae0ac71646..19c499fa9f 100644
--- a/packages/platform-server/integrationtest/package.json
+++ b/packages/platform-server/integrationtest/package.json
@@ -19,7 +19,7 @@
     "express": "^4.14.1",
     "rxjs": "file:../../../node_modules/rxjs",
     "typescript": "2.1.6",
-    "zone.js": "0.7.6"
+    "zone.js": "^0.8.10"
   },
   "devDependencies": {
     "@types/jasmine": "2.5.41",
diff --git a/packages/platform-server/integrationtest/tsconfig.json b/packages/platform-server/integrationtest/tsconfig.json
index 8273ac4dac..d54783edd4 100644
--- a/packages/platform-server/integrationtest/tsconfig.json
+++ b/packages/platform-server/integrationtest/tsconfig.json
@@ -13,7 +13,8 @@
     "noImplicitAny": false,
     "sourceMap": false,
     "experimentalDecorators": true,
-    "outDir": "built/src",
+    "outDir": "built",
+    "rootDir": ".",
     "declaration": true,
     "typeRoots": ["node_modules/@types"]
   },
diff --git a/packages/platform-server/package.json b/packages/platform-server/package.json
index 99d19860b4..d586c32b47 100644
--- a/packages/platform-server/package.json
+++ b/packages/platform-server/package.json
@@ -16,6 +16,7 @@
     "@angular/platform-browser": "0.0.0-PLACEHOLDER"
   },
   "dependencies": {
+    "tslib": "^1.7.1",
     "parse5": "^3.0.1",
     "xhr2": "^0.1.4"
   },
diff --git a/packages/platform-server/rollup.config.js b/packages/platform-server/rollup.config.js
index e7d4ff5440..49f285ed2c 100644
--- a/packages/platform-server/rollup.config.js
+++ b/packages/platform-server/rollup.config.js
@@ -6,16 +6,27 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx',
+  'rxjs/operator/toPromise': 'Rx.Observable.prototype',
+  'rxjs/operator/filter': 'Rx.Observable.prototype',
+  'rxjs/operator/first': 'Rx.Observable.prototype'
+};
+
 export default {
   entry: '../../dist/packages-dist/platform-server/@angular/platform-server.es5.js',
   dest: '../../dist/packages-dist/platform-server/bundles/platform-server.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.platformServer',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/compiler': 'ng.compiler',
-    '@angular/platform-browser': 'ng.platformBrowser'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/platform-server/src/http.ts b/packages/platform-server/src/http.ts
index 49b07490de..b2ad9bd7b8 100644
--- a/packages/platform-server/src/http.ts
+++ b/packages/platform-server/src/http.ts
@@ -8,9 +8,11 @@
 
 const xhr2: any = require('xhr2');
 
-import {Injectable, Provider} from '@angular/core';
+import {Injectable, Optional, Provider} from '@angular/core';
 import {BrowserXhr, Connection, ConnectionBackend, Http, ReadyState, Request, RequestOptions, Response, XHRBackend, XSRFStrategy} from '@angular/http';
 
+import {HttpClient, HttpEvent, HttpRequest, HttpHandler, HttpInterceptor, HttpResponse, HTTP_INTERCEPTORS, HttpBackend, XhrFactory, ɵinterceptingHandler as interceptingHandler} from '@angular/common/http';
+
 import {Observable} from 'rxjs/Observable';
 import {Observer} from 'rxjs/Observer';
 import {Subscription} from 'rxjs/Subscription';
@@ -33,16 +35,12 @@ export class ServerXsrfStrategy implements XSRFStrategy {
   configureRequest(req: Request): void {}
 }
 
-export class ZoneMacroTaskConnection implements Connection {
-  response: Observable<Response>;
-  lastConnection: Connection;
-
-  constructor(public request: Request, backend: XHRBackend) {
-    validateRequestUrl(request.url);
-    this.response = new Observable((observer: Observer<Response>) => {
-      let task: Task = null;
+export abstract class ZoneMacroTaskWrapper<S, R> {
+  wrap(request: S): Observable<R> {
+    return new Observable((observer: Observer<R>) => {
+      let task: Task = null !;
       let scheduled: boolean = false;
-      let sub: Subscription = null;
+      let sub: Subscription|null = null;
       let savedResult: any = null;
       let savedError: any = null;
 
@@ -50,25 +48,26 @@ export class ZoneMacroTaskConnection implements Connection {
         task = _task;
         scheduled = true;
 
-        this.lastConnection = backend.createConnection(request);
-        sub = (this.lastConnection.response as Observable<Response>)
-                  .subscribe(
-                      res => savedResult = res,
-                      err => {
-                        if (!scheduled) {
-                          throw new Error('invoke twice');
-                        }
-                        savedError = err;
-                        scheduled = false;
-                        task.invoke();
-                      },
-                      () => {
-                        if (!scheduled) {
-                          throw new Error('invoke twice');
-                        }
-                        scheduled = false;
-                        task.invoke();
-                      });
+        const delegate = this.delegate(request);
+        sub = delegate.subscribe(
+            res => savedResult = res,
+            err => {
+              if (!scheduled) {
+                throw new Error(
+                    'An http observable was completed twice. This shouldn\'t happen, please file a bug.');
+              }
+              savedError = err;
+              scheduled = false;
+              task.invoke();
+            },
+            () => {
+              if (!scheduled) {
+                throw new Error(
+                    'An http observable was completed twice. This shouldn\'t happen, please file a bug.');
+              }
+              scheduled = false;
+              task.invoke();
+            });
       };
 
       const cancelTask = (_task: Task) => {
@@ -91,11 +90,11 @@ export class ZoneMacroTaskConnection implements Connection {
         }
       };
 
-      // MockBackend is currently synchronous, which means that if scheduleTask is by
+      // MockBackend for Http is synchronous, which means that if scheduleTask is by
       // scheduleMacroTask, the request will hit MockBackend and the response will be
       // sent, causing task.invoke() to be called.
       const _task = Zone.current.scheduleMacroTask(
-          'ZoneMacroTaskConnection.subscribe', onComplete, {}, () => null, cancelTask);
+          'ZoneMacroTaskWrapper.subscribe', onComplete, {}, () => null, cancelTask);
       scheduleTask(_task);
 
       return () => {
@@ -111,6 +110,25 @@ export class ZoneMacroTaskConnection implements Connection {
     });
   }
 
+  protected abstract delegate(request: S): Observable<R>;
+}
+
+export class ZoneMacroTaskConnection extends ZoneMacroTaskWrapper<Request, Response> implements
+    Connection {
+  response: Observable<Response>;
+  lastConnection: Connection;
+
+  constructor(public request: Request, private backend: XHRBackend) {
+    super();
+    validateRequestUrl(request.url);
+    this.response = this.wrap(request);
+  }
+
+  delegate(request: Request): Observable<Response> {
+    this.lastConnection = this.backend.createConnection(request);
+    return this.lastConnection.response as Observable<Response>;
+  }
+
   get readyState(): ReadyState {
     return !!this.lastConnection ? this.lastConnection.readyState : ReadyState.Unsent;
   }
@@ -124,13 +142,34 @@ export class ZoneMacroTaskBackend implements ConnectionBackend {
   }
 }
 
+export class ZoneClientBackend extends
+    ZoneMacroTaskWrapper<HttpRequest<any>, HttpEvent<any>> implements HttpBackend {
+  constructor(private backend: HttpBackend) { super(); }
+
+  handle(request: HttpRequest<any>): Observable<HttpEvent<any>> { return this.wrap(request); }
+
+  protected delegate(request: HttpRequest<any>): Observable<HttpEvent<any>> {
+    return this.backend.handle(request);
+  }
+}
+
 export function httpFactory(xhrBackend: XHRBackend, options: RequestOptions) {
   const macroBackend = new ZoneMacroTaskBackend(xhrBackend);
   return new Http(macroBackend, options);
 }
 
+export function zoneWrappedInterceptingHandler(
+    backend: HttpBackend, interceptors: HttpInterceptor[] | null) {
+  const realBackend: HttpBackend = interceptingHandler(backend, interceptors);
+  return new ZoneClientBackend(realBackend);
+}
+
 export const SERVER_HTTP_PROVIDERS: Provider[] = [
   {provide: Http, useFactory: httpFactory, deps: [XHRBackend, RequestOptions]},
-  {provide: BrowserXhr, useClass: ServerXhr},
-  {provide: XSRFStrategy, useClass: ServerXsrfStrategy},
+  {provide: BrowserXhr, useClass: ServerXhr}, {provide: XSRFStrategy, useClass: ServerXsrfStrategy},
+  {provide: XhrFactory, useClass: ServerXhr}, {
+    provide: HttpHandler,
+    useFactory: zoneWrappedInterceptingHandler,
+    deps: [HttpBackend, [new Optional(), HTTP_INTERCEPTORS]]
+  }
 ];
diff --git a/packages/platform-server/src/location.ts b/packages/platform-server/src/location.ts
index 0fe880bac0..db6611a03e 100644
--- a/packages/platform-server/src/location.ts
+++ b/packages/platform-server/src/location.ts
@@ -45,7 +45,7 @@ export class ServerPlatformLocation implements PlatformLocation {
     }
   }
 
-  getBaseHrefFromDOM(): string { return getDOM().getBaseHref(this._doc); }
+  getBaseHrefFromDOM(): string { return getDOM().getBaseHref(this._doc) !; }
 
   onPopState(fn: LocationChangeListener): void {
     // No-op: a state stack is not implemented, so
diff --git a/packages/platform-server/src/parse5_adapter.ts b/packages/platform-server/src/parse5_adapter.ts
index 9e76abd5ae..590c9bbdd1 100644
--- a/packages/platform-server/src/parse5_adapter.ts
+++ b/packages/platform-server/src/parse5_adapter.ts
@@ -9,7 +9,7 @@
 const parse5 = require('parse5');
 
 import {ɵglobal as global} from '@angular/core';
-import {ɵDomAdapter as DomAdapter, ɵsetRootDomAdapter as setRootDomAdapter, ɵsetValueOnPath as setValueOnPath} from '@angular/platform-browser';
+import {ɵDomAdapter as DomAdapter, ɵsetRootDomAdapter as setRootDomAdapter} from '@angular/platform-browser';
 import {SelectorMatcher, CssSelector} from '@angular/compiler';
 
 let treeAdapter: any;
@@ -80,15 +80,22 @@ export class Parse5DomAdapter extends DomAdapter {
   setProperty(el: any, name: string, value: any) {
     if (name === 'innerHTML') {
       this.setInnerHTML(el, value);
+    } else if (name === 'innerText') {
+      this.setText(el, value);
     } else if (name === 'className') {
       el.attribs['class'] = el.className = value;
     } else {
-      el[name] = value;
+      // Store the property in a separate property bag so that it doesn't clobber
+      // actual parse5 properties on the Element.
+      el.properties = el.properties || {};
+      el.properties[name] = value;
     }
   }
   // TODO(tbosch): don't even call this method when we run the tests on server side
   // by not using the DomRenderer in tests. Keeping this for now to make tests happy...
-  getProperty(el: any, name: string): any { return el[name]; }
+  getProperty(el: any, name: string): any {
+    return el.properties ? el.properties[name] : undefined;
+  }
 
   logError(error: string) { console.error(error); }
 
@@ -199,7 +206,7 @@ export class Parse5DomAdapter extends DomAdapter {
   getInnerHTML(el: any): string {
     return parse5.serialize(this.templateAwareRoot(el), {treeAdapter});
   }
-  getTemplateContent(el: any): Node { return null; }
+  getTemplateContent(el: any): Node|null { return null; }
   getOuterHTML(el: any): string {
     const fragment = treeAdapter.createDocumentFragment();
     this.appendChild(fragment, el);
@@ -423,7 +430,7 @@ export class Parse5DomAdapter extends DomAdapter {
   hasClass(element: any, className: string): boolean {
     return this.classList(element).indexOf(className) > -1;
   }
-  hasStyle(element: any, styleName: string, styleValue: string = null): boolean {
+  hasStyle(element: any, styleName: string, styleValue?: string): boolean {
     const value = this.getStyle(element, styleName) || '';
     return styleValue ? value == styleValue : value.length > 0;
   }
@@ -458,7 +465,7 @@ export class Parse5DomAdapter extends DomAdapter {
     }
     element.attribs['style'] = styleAttrValue;
   }
-  setStyle(element: any, styleName: string, styleValue: string) {
+  setStyle(element: any, styleName: string, styleValue?: string|null) {
     const styleMap = this._readStyleAttribute(element);
     (styleMap as any)[styleName] = styleValue;
     this._writeStyleAttribute(element, styleMap);
@@ -592,7 +599,7 @@ export class Parse5DomAdapter extends DomAdapter {
       return doc.body;
     }
   }
-  getBaseHref(doc: Document): string {
+  getBaseHref(doc: Document): string|null {
     const base = this.querySelector(doc, 'base');
     let href = '';
     if (base) {
@@ -609,7 +616,6 @@ export class Parse5DomAdapter extends DomAdapter {
   getComputedStyle(el: any): any { throw 'not implemented'; }
   setData(el: any, name: string, value: string) { this.setAttribute(el, 'data-' + name, value); }
   // TODO(tbosch): move this into a separate environment class once we have it
-  setGlobalVar(path: string, value: any) { setValueOnPath(global, path, value); }
   supportsWebAnimation(): boolean { return false; }
   performanceNow(): number { return Date.now(); }
   getAnimationPrefix(): string { return ''; }
diff --git a/packages/platform-server/src/server.ts b/packages/platform-server/src/server.ts
index d86f3d7102..facb7b3a39 100644
--- a/packages/platform-server/src/server.ts
+++ b/packages/platform-server/src/server.ts
@@ -8,6 +8,7 @@
 
 import {ɵAnimationEngine} from '@angular/animations/browser';
 import {PlatformLocation, ɵPLATFORM_SERVER_ID as PLATFORM_SERVER_ID} from '@angular/common';
+import {HttpClientModule} from '@angular/common/http';
 import {platformCoreDynamic} from '@angular/compiler';
 import {Injectable, InjectionToken, Injector, NgModule, NgZone, PLATFORM_ID, PLATFORM_INITIALIZER, PlatformRef, Provider, RendererFactory2, RootRenderer, Testability, createPlatformFactory, isDevMode, platformCore, ɵALLOW_MULTIPLE_PLATFORMS as ALLOW_MULTIPLE_PLATFORMS} from '@angular/core';
 import {HttpModule} from '@angular/http';
@@ -62,7 +63,7 @@ export const SERVER_RENDER_PROVIDERS: Provider[] = [
  */
 @NgModule({
   exports: [BrowserModule],
-  imports: [HttpModule, NoopAnimationsModule],
+  imports: [HttpModule, HttpClientModule, NoopAnimationsModule],
   providers: [
     SERVER_RENDER_PROVIDERS,
     SERVER_HTTP_PROVIDERS,
diff --git a/packages/platform-server/src/server_renderer.ts b/packages/platform-server/src/server_renderer.ts
index b991ecbddf..086d983402 100644
--- a/packages/platform-server/src/server_renderer.ts
+++ b/packages/platform-server/src/server_renderer.ts
@@ -24,7 +24,7 @@ export class ServerRendererFactory2 implements RendererFactory2 {
     this.defaultRenderer = new DefaultServerRenderer2(document, ngZone, this.schema);
   };
 
-  createRenderer(element: any, type: RendererType2): Renderer2 {
+  createRenderer(element: any, type: RendererType2|null): Renderer2 {
     if (!element || !type) {
       return this.defaultRenderer;
     }
@@ -52,6 +52,9 @@ export class ServerRendererFactory2 implements RendererFactory2 {
       }
     }
   }
+
+  begin() {}
+  end() {}
 }
 
 class DefaultServerRenderer2 implements Renderer2 {
@@ -169,7 +172,8 @@ class DefaultServerRenderer2 implements Renderer2 {
     const el =
         typeof target === 'string' ? getDOM().getGlobalEventTarget(this.document, target) : target;
     const outsideHandler = (event: any) => this.ngZone.runGuarded(() => callback(event));
-    return this.ngZone.runOutsideAngular(() => getDOM().onAndCancel(el, eventName, outsideHandler));
+    return this.ngZone.runOutsideAngular(
+        () => getDOM().onAndCancel(el, eventName, outsideHandler) as any);
   }
 }
 
diff --git a/packages/platform-server/src/utils.ts b/packages/platform-server/src/utils.ts
index d404253596..f768a24709 100644
--- a/packages/platform-server/src/utils.ts
+++ b/packages/platform-server/src/utils.ts
@@ -18,7 +18,7 @@ import {INITIAL_CONFIG} from './tokens';
 
 const parse5 = require('parse5');
 
-export interface PlatformOptions {
+interface PlatformOptions {
   document?: string;
   url?: string;
   extraProviders?: Provider[];
@@ -57,12 +57,18 @@ the server-rendered app can be properly bootstrapped into a client app.`);
 /**
  * Renders a Module to string.
  *
+ * `document` is the full document HTML of the page to render, as a string.
+ * `url` is the URL for the current render request.
+ * `extraProviders` are the platform level providers for the current render request.
+ *
  * Do not use this in a production server environment. Use pre-compiled {@link NgModuleFactory} with
- * {link renderModuleFactory} instead.
+ * {@link renderModuleFactory} instead.
  *
  * @experimental
  */
-export function renderModule<T>(module: Type<T>, options: PlatformOptions): Promise<string> {
+export function renderModule<T>(
+    module: Type<T>,
+    options: {document?: string, url?: string, extraProviders?: Provider[]}): Promise<string> {
   const platform = _getPlatform(platformDynamicServer, options);
   return _render(platform, platform.bootstrapModule(module));
 }
@@ -70,10 +76,15 @@ export function renderModule<T>(module: Type<T>, options: PlatformOptions): Prom
 /**
  * Renders a {@link NgModuleFactory} to string.
  *
+ * `document` is the full document HTML of the page to render, as a string.
+ * `url` is the URL for the current render request.
+ * `extraProviders` are the platform level providers for the current render request.
+ *
  * @experimental
  */
 export function renderModuleFactory<T>(
-    moduleFactory: NgModuleFactory<T>, options: PlatformOptions): Promise<string> {
+    moduleFactory: NgModuleFactory<T>,
+    options: {document?: string, url?: string, extraProviders?: Provider[]}): Promise<string> {
   const platform = _getPlatform(platformServer, options);
   return _render(platform, platform.bootstrapModuleFactory(moduleFactory));
 }
diff --git a/packages/platform-server/test/integration_spec.ts b/packages/platform-server/test/integration_spec.ts
index deb3964aa1..5844a11c36 100644
--- a/packages/platform-server/test/integration_spec.ts
+++ b/packages/platform-server/test/integration_spec.ts
@@ -8,6 +8,8 @@
 
 import {animate, style, transition, trigger} from '@angular/animations';
 import {APP_BASE_HREF, PlatformLocation, isPlatformServer} from '@angular/common';
+import {HttpClient, HttpClientModule} from '@angular/common/http';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import {ApplicationRef, CompilerFactory, Component, HostListener, Input, NgModule, NgModuleRef, NgZone, PLATFORM_ID, PlatformRef, ViewEncapsulation, destroyPlatform, getPlatform} from '@angular/core';
 import {TestBed, async, inject} from '@angular/core/testing';
 import {Http, HttpModule, Response, ResponseOptions, XHRBackend} from '@angular/http';
@@ -54,15 +56,19 @@ class TitleApp {
 class TitleAppModule {
 }
 
-@Component({selector: 'app', template: '{{text}}'})
+@Component({selector: 'app', template: '{{text}}<h1 [innerText]="h1"></h1>'})
 class MyAsyncServerApp {
   text = '';
+  h1 = '';
 
   @HostListener('window:scroll')
   track() { console.error('scroll'); }
 
   ngOnInit() {
-    Promise.resolve(null).then(() => setTimeout(() => { this.text = 'Works!'; }, 10));
+    Promise.resolve(null).then(() => setTimeout(() => {
+                                 this.text = 'Works!';
+                                 this.h1 = 'fine';
+                               }, 10));
   }
 }
 
@@ -141,6 +147,14 @@ export class HttpBeforeExampleModule {
 export class HttpAfterExampleModule {
 }
 
+@NgModule({
+  bootstrap: [MyServerApp],
+  declarations: [MyServerApp],
+  imports: [ServerModule, HttpClientModule, HttpClientTestingModule],
+})
+export class HttpClientExmapleModule {
+}
+
 @Component({selector: 'app', template: `<img [src]="'link'">`})
 class ImageApp {
 }
@@ -183,6 +197,20 @@ class MyHostComponent {
 class FalseAttributesModule {
 }
 
+@Component({selector: 'app', template: '<input [name]="name">'})
+class MyInputComponent {
+  @Input()
+  name = '';
+}
+
+@NgModule({
+  declarations: [MyInputComponent],
+  bootstrap: [MyInputComponent],
+  imports: [ServerModule, BrowserModule.withServerTransition({appId: 'name-attributes'})]
+})
+class NameModule {
+}
+
 export function main() {
   if (getDOM().supportsDOMEvents()) return;  // NODE only
 
@@ -353,7 +381,7 @@ export function main() {
       let doc: string;
       let called: boolean;
       let expectedOutput =
-          '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER">Works!</app></body></html>';
+          '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER">Works!<h1 innerText="fine">fine</h1></app></body></html>';
 
       beforeEach(() => {
         // PlatformConfig takes in a parsed document so that it can be cached across requests.
@@ -425,13 +453,22 @@ export function main() {
          }));
 
       it('should handle false values on attributes', async(() => {
-           renderModule(FalseAttributesModule, {document: doc}).then((output) => {
+           renderModule(FalseAttributesModule, {document: doc}).then(output => {
              expect(output).toBe(
                  '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER">' +
                  '<my-child ng-reflect-attr="false">Works!</my-child></app></body></html>');
              called = true;
            });
          }));
+
+      it('should handle element property "name"', async(() => {
+           renderModule(NameModule, {document: doc}).then(output => {
+             expect(output).toBe(
+                 '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER">' +
+                 '<input name=""></app></body></html>');
+             called = true;
+           });
+         }));
     });
 
     describe('http', () => {
@@ -530,5 +567,45 @@ export function main() {
            });
          }));
     });
+    describe('HttpClient', () => {
+      it('can inject HttpClient', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(HttpClientExmapleModule).then(ref => {
+             expect(ref.injector.get(HttpClient) instanceof HttpClient).toBeTruthy();
+           });
+         }));
+      it('can make HttpClient requests', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(HttpClientExmapleModule).then(ref => {
+             const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
+             const http = ref.injector.get(HttpClient);
+             ref.injector.get(NgZone).run(() => {
+               http.get('http://localhost/testing').subscribe(body => {
+                 NgZone.assertInAngularZone();
+                 expect(body).toEqual('success!');
+               });
+               mock.expectOne('http://localhost/testing').flush('success!');
+             });
+           });
+         }));
+      it('requests are macrotasks', async(() => {
+           const platform = platformDynamicServer(
+               [{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
+           platform.bootstrapModule(HttpClientExmapleModule).then(ref => {
+             const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
+             const http = ref.injector.get(HttpClient);
+             ref.injector.get(NgZone).run(() => {
+               http.get('http://localhost/testing').subscribe(body => {
+                 expect(body).toEqual('success!');
+               });
+               expect(ref.injector.get(NgZone).hasPendingMacrotasks).toBeTruthy();
+               mock.expectOne('http://localhost/testing').flush('success!');
+               expect(ref.injector.get(NgZone).hasPendingMacrotasks).toBeFalsy();
+             });
+           });
+         }));
+    });
   });
 }
diff --git a/packages/platform-server/testing/rollup.config.js b/packages/platform-server/testing/rollup.config.js
index 748ca15acd..2e2287ce7c 100644
--- a/packages/platform-server/testing/rollup.config.js
+++ b/packages/platform-server/testing/rollup.config.js
@@ -6,19 +6,25 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/compiler/testing': 'ng.compiler.testing',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/platform-server': 'ng.platformServer',
+  '@angular/platform-browser-dynamic/testing': 'ng.platformBrowserDynamic.testing'
+};
+
 export default {
   entry: '../../../dist/packages-dist/platform-server/@angular/platform-server/testing.es5.js',
   dest: '../../../dist/packages-dist/platform-server/bundles/platform-server-testing.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.platformServer.testing',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/compiler': 'ng.compiler',
-    '@angular/compiler/testing': 'ng.compiler.testing',
-    '@angular/platform-browser': 'ng.platformBrowser',
-    '@angular/platform-server': 'ng.platformServer',
-    '@angular/platform-browser-dynamic/testing': 'ng.platformBrowserDynamic.testing'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/platform-server/tsconfig-build.json b/packages/platform-server/tsconfig-build.json
index a514759b6d..8269781de7 100644
--- a/packages/platform-server/tsconfig-build.json
+++ b/packages/platform-server/tsconfig-build.json
@@ -4,6 +4,7 @@
     "declaration": true,
     "stripInternal": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "module": "es2015",
     "moduleResolution": "node",
     "outDir": "../../dist/packages/platform-server",
@@ -11,6 +12,7 @@
       "@angular/animations/browser": ["../../dist/packages/animations/browser"],
       "@angular/core": ["../../dist/packages/core"],
       "@angular/common": ["../../dist/packages/common"],
+      "@angular/common/http": ["../../dist/packages/common/http"],
       "@angular/compiler": ["../../dist/packages/compiler"],
       "@angular/http": ["../../dist/packages/http"],
       "@angular/platform-browser": ["../../dist/packages/platform-browser"],
diff --git a/packages/platform-webworker-dynamic/package.json b/packages/platform-webworker-dynamic/package.json
index 1fb3788abd..e9c0194969 100644
--- a/packages/platform-webworker-dynamic/package.json
+++ b/packages/platform-webworker-dynamic/package.json
@@ -8,6 +8,9 @@
   "typings": "./platform-webworker-dynamic.d.ts",
   "author": "angular",
   "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "@angular/common": "0.0.0-PLACEHOLDER",
     "@angular/core": "0.0.0-PLACEHOLDER",
diff --git a/packages/platform-webworker-dynamic/rollup.config.js b/packages/platform-webworker-dynamic/rollup.config.js
index efd9dc4061..f2859feeb2 100644
--- a/packages/platform-webworker-dynamic/rollup.config.js
+++ b/packages/platform-webworker-dynamic/rollup.config.js
@@ -6,6 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
+  '@angular/platform-webworker': 'ng.platformWebworker',
+};
+
 export default {
   entry:
       '../../dist/packages-dist/platform-webworker-dynamic/@angular/platform-webworker-dynamic.es5.js',
@@ -14,12 +25,7 @@ export default {
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.platformWebworkerDynamic',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/compiler': 'ng.compiler',
-    '@angular/platform-browser': 'ng.platformBrowser',
-    '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
-    '@angular/platform-webworker': 'ng.platformWebworker',
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/platform-webworker-dynamic/tsconfig-build.json b/packages/platform-webworker-dynamic/tsconfig-build.json
index 4fc26d1998..590ef2b0d7 100644
--- a/packages/platform-webworker-dynamic/tsconfig-build.json
+++ b/packages/platform-webworker-dynamic/tsconfig-build.json
@@ -4,6 +4,7 @@
     "declaration": true,
     "stripInternal": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "module": "es2015",
     "moduleResolution": "node",
     "outDir": "../../dist/packages/platform-webworker-dynamic",
diff --git a/packages/platform-webworker/package.json b/packages/platform-webworker/package.json
index d253b3a71c..afdff73142 100644
--- a/packages/platform-webworker/package.json
+++ b/packages/platform-webworker/package.json
@@ -8,6 +8,9 @@
   "typings": "./platform-webworker.d.ts",
   "author": "angular",
   "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "@angular/common": "0.0.0-PLACEHOLDER",
     "@angular/core": "0.0.0-PLACEHOLDER",
diff --git a/packages/platform-webworker/rollup.config.js b/packages/platform-webworker/rollup.config.js
index 48217d2acb..997068acae 100644
--- a/packages/platform-webworker/rollup.config.js
+++ b/packages/platform-webworker/rollup.config.js
@@ -6,17 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx'
+};
+
 export default {
   entry: '../../dist/packages-dist/platform-webworker/@angular/platform-webworker.es5.js',
   dest: '../../dist/packages-dist/platform-webworker/bundles/platform-webworker.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.platformWebworker',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/platform-browser': 'ng.platformBrowser',
-    'rxjs/Observable': 'Rx',
-    'rxjs/Subject': 'Rx'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/platform-webworker/src/web_workers/shared/client_message_broker.ts b/packages/platform-webworker/src/web_workers/shared/client_message_broker.ts
index dde8d5e794..583a26dcce 100644
--- a/packages/platform-webworker/src/web_workers/shared/client_message_broker.ts
+++ b/packages/platform-webworker/src/web_workers/shared/client_message_broker.ts
@@ -44,7 +44,8 @@ export class ClientMessageBrokerFactory_ extends ClientMessageBrokerFactory {
  * @experimental WebWorker support in Angular is experimental.
  */
 export abstract class ClientMessageBroker {
-  abstract runOnService(args: UiArguments, returnType: Type<any>|SerializerTypes): Promise<any>;
+  abstract runOnService(args: UiArguments, returnType: Type<any>|SerializerTypes|null):
+      Promise<any>|null;
 }
 
 interface PromiseCompleter {
@@ -78,7 +79,7 @@ export class ClientMessageBroker_ extends ClientMessageBroker {
     return id;
   }
 
-  runOnService(args: UiArguments, returnType: Type<any>|SerializerTypes): Promise<any> {
+  runOnService(args: UiArguments, returnType: Type<any>|SerializerTypes): Promise<any>|null {
     const fnArgs: any[] = [];
     if (args.args) {
       args.args.forEach(argument => {
@@ -90,10 +91,10 @@ export class ClientMessageBroker_ extends ClientMessageBroker {
       });
     }
 
-    let promise: Promise<any>;
-    let id: string = null;
+    let promise: Promise<any>|null;
+    let id: string|null = null;
     if (returnType != null) {
-      let completer: PromiseCompleter;
+      let completer: PromiseCompleter = undefined !;
       promise = new Promise((resolve, reject) => { completer = {resolve, reject}; });
       id = this._generateMessageId(args.method);
       this._pending.set(id, completer);
@@ -127,12 +128,12 @@ export class ClientMessageBroker_ extends ClientMessageBroker {
 
   private _handleMessage(message: ResponseMessageData): void {
     if (message.type === 'result' || message.type === 'error') {
-      const id = message.id;
+      const id = message.id !;
       if (this._pending.has(id)) {
         if (message.type === 'result') {
-          this._pending.get(id).resolve(message.value);
+          this._pending.get(id) !.resolve(message.value);
         } else {
-          this._pending.get(id).reject(message.value);
+          this._pending.get(id) !.reject(message.value);
         }
         this._pending.delete(id);
       }
diff --git a/packages/platform-webworker/src/web_workers/shared/message_bus.ts b/packages/platform-webworker/src/web_workers/shared/message_bus.ts
index 16ccefae4c..bf158c927f 100644
--- a/packages/platform-webworker/src/web_workers/shared/message_bus.ts
+++ b/packages/platform-webworker/src/web_workers/shared/message_bus.ts
@@ -84,7 +84,7 @@ export interface MessageBusSink {
    * Sets up a new channel on the MessageBusSink.
    * MUST be called before calling to on the channel.
    * If runInZone is true the sink will buffer messages and send only once the zone exits.
-   * if runInZone is false the sink will send messages immediatly.
+   * if runInZone is false the sink will send messages immediately.
    */
   initChannel(channel: string, runInZone: boolean): void;
 
diff --git a/packages/platform-webworker/src/web_workers/shared/render_store.ts b/packages/platform-webworker/src/web_workers/shared/render_store.ts
index 5074911c6c..cce0610def 100644
--- a/packages/platform-webworker/src/web_workers/shared/render_store.ts
+++ b/packages/platform-webworker/src/web_workers/shared/render_store.ts
@@ -34,5 +34,7 @@ export class RenderStore {
     return this._lookupById.has(id) ? this._lookupById.get(id) : null;
   }
 
-  serialize(obj: any): number { return obj == null ? null : this._lookupByObject.get(obj); }
+  serialize(obj: any): number|null|undefined {
+    return obj == null ? null : this._lookupByObject.get(obj);
+  }
 }
diff --git a/packages/platform-webworker/src/web_workers/shared/serializer.ts b/packages/platform-webworker/src/web_workers/shared/serializer.ts
index 16a62d820b..02eede18da 100644
--- a/packages/platform-webworker/src/web_workers/shared/serializer.ts
+++ b/packages/platform-webworker/src/web_workers/shared/serializer.ts
@@ -10,6 +10,18 @@ import {Injectable, RenderComponentType, RendererType2, Type, ɵstringify as str
 import {RenderStore} from './render_store';
 
 
+/**
+ * @experimental WebWorker support in Angular is currently experimental.
+ */
+export const enum SerializerTypes {
+  // RendererType2
+  RENDERER_TYPE_2,
+  // Primitive types
+  PRIMITIVE,
+  // An object stored in a RenderStore
+  RENDER_STORE_OBJECT,
+}
+
 /**
  * Any type that does not need to be serialized (string, number, boolean)
  *
@@ -21,22 +33,10 @@ export const PRIMITIVE = SerializerTypes.PRIMITIVE;
 export class LocationType {
   constructor(
       public href: string, public protocol: string, public host: string, public hostname: string,
-      public port: string, public pathname: string, public search: string, public hash: string,
+      public port: string, public pathname: string|null, public search: string, public hash: string,
       public origin: string) {}
 }
 
-/**
- * @experimental WebWorker support in Angular is currently experimental.
- */
-export const enum SerializerTypes {
-  // RendererType2
-  RENDERER_TYPE_2,
-  // Primitive types
-  PRIMITIVE,
-  // An object stored in a RenderStore
-  RENDER_STORE_OBJECT,
-}
-
 @Injectable()
 export class Serializer {
   constructor(private _renderStore: RenderStore) {}
@@ -49,7 +49,7 @@ export class Serializer {
       return obj.map(v => this.serialize(v, type));
     }
     if (type === SerializerTypes.RENDER_STORE_OBJECT) {
-      return this._renderStore.serialize(obj);
+      return this._renderStore.serialize(obj) !;
     }
     if (type === RenderComponentType) {
       return this._serializeRenderComponentType(obj);
diff --git a/packages/platform-webworker/src/web_workers/shared/service_message_broker.ts b/packages/platform-webworker/src/web_workers/shared/service_message_broker.ts
index 665ecf1d12..ac544c981b 100644
--- a/packages/platform-webworker/src/web_workers/shared/service_message_broker.ts
+++ b/packages/platform-webworker/src/web_workers/shared/service_message_broker.ts
@@ -47,7 +47,7 @@ export class ServiceMessageBrokerFactory_ extends ServiceMessageBrokerFactory {
  */
 export abstract class ServiceMessageBroker {
   abstract registerMethod(
-      methodName: string, signature: Array<Type<any>|SerializerTypes>, method: Function,
+      methodName: string, signature: Array<Type<any>|SerializerTypes>|null, method: Function,
       returnType?: Type<any>|SerializerTypes): void;
 }
 
@@ -83,7 +83,7 @@ export class ServiceMessageBroker_ extends ServiceMessageBroker {
 
   private _handleMessage(message: ReceivedMessage): void {
     if (this._methods.has(message.method)) {
-      this._methods.get(message.method)(message);
+      this._methods.get(message.method) !(message);
     }
   }
 
diff --git a/packages/platform-webworker/src/web_workers/ui/renderer.ts b/packages/platform-webworker/src/web_workers/ui/renderer.ts
index eb318e3592..84332b5202 100644
--- a/packages/platform-webworker/src/web_workers/ui/renderer.ts
+++ b/packages/platform-webworker/src/web_workers/ui/renderer.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer} from '@angular/core';
+import {Injectable, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '@angular/core';
 
 import {MessageBus} from '../shared/message_bus';
 import {EVENT_2_CHANNEL, RENDERER_2_CHANNEL} from '../shared/messaging_api';
diff --git a/packages/platform-webworker/src/web_workers/worker/location_providers.ts b/packages/platform-webworker/src/web_workers/worker/location_providers.ts
index 6db571baa8..25d671dfd2 100644
--- a/packages/platform-webworker/src/web_workers/worker/location_providers.ts
+++ b/packages/platform-webworker/src/web_workers/worker/location_providers.ts
@@ -13,8 +13,9 @@ import {WebWorkerPlatformLocation} from './platform_location';
 
 
 /**
- * Those providers should be added when the router is used in a worker context in addition to the
- * {@link ROUTER_PROVIDERS} and after them.
+ * The {@link PlatformLocation} providers that should be added when the {@link Location} is used in
+ * a worker context.
+ *
  * @experimental
  */
 export const WORKER_APP_LOCATION_PROVIDERS = [
diff --git a/packages/platform-webworker/src/web_workers/worker/platform_location.ts b/packages/platform-webworker/src/web_workers/worker/platform_location.ts
index 05c93a47a3..4322cad88a 100644
--- a/packages/platform-webworker/src/web_workers/worker/platform_location.ts
+++ b/packages/platform-webworker/src/web_workers/worker/platform_location.ts
@@ -18,7 +18,7 @@ export class WebWorkerPlatformLocation extends PlatformLocation {
   private _broker: ClientMessageBroker;
   private _popStateListeners: Array<Function> = [];
   private _hashChangeListeners: Array<Function> = [];
-  private _location: LocationType = null;
+  private _location: LocationType = null !;
   private _channelSource: EventEmitter<Object>;
   public initialized: Promise<any>;
   private initializedResolve: () => void;
@@ -31,7 +31,7 @@ export class WebWorkerPlatformLocation extends PlatformLocation {
 
     this._channelSource.subscribe({
       next: (msg: {[key: string]: any}) => {
-        let listeners: Array<Function> = null;
+        let listeners: Array<Function>|null = null;
         if (msg.hasOwnProperty('event')) {
           const type: string = msg['event']['type'];
           if (type === 'popstate') {
@@ -55,14 +55,13 @@ export class WebWorkerPlatformLocation extends PlatformLocation {
   init(): Promise<boolean> {
     const args: UiArguments = new UiArguments('getLocation');
 
-    return this._broker.runOnService(args, LocationType)
-        .then(
-            (val: LocationType) => {
-              this._location = val;
-              this.initializedResolve();
-              return true;
-            },
-            err => { throw new Error(err); });
+    return this._broker.runOnService(args, LocationType) !.then(
+        (val: LocationType) => {
+          this._location = val;
+          this.initializedResolve();
+          return true;
+        },
+        err => { throw new Error(err); });
   }
 
   getBaseHrefFromDOM(): string {
@@ -74,11 +73,11 @@ export class WebWorkerPlatformLocation extends PlatformLocation {
 
   onHashChange(fn: LocationChangeListener): void { this._hashChangeListeners.push(fn); }
 
-  get pathname(): string { return this._location ? this._location.pathname : null; }
+  get pathname(): string { return this._location ? this._location.pathname ! : '<unknown>'; }
 
-  get search(): string { return this._location ? this._location.search : null; }
+  get search(): string { return this._location ? this._location.search : '<unknown>'; }
 
-  get hash(): string { return this._location ? this._location.hash : null; }
+  get hash(): string { return this._location ? this._location.hash : '<unknown>'; }
 
   set pathname(newPath: string) {
     if (this._location === null) {
diff --git a/packages/platform-webworker/src/web_workers/worker/renderer.ts b/packages/platform-webworker/src/web_workers/worker/renderer.ts
index 85e668758c..7c65abc9e7 100644
--- a/packages/platform-webworker/src/web_workers/worker/renderer.ts
+++ b/packages/platform-webworker/src/web_workers/worker/renderer.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer, ViewEncapsulation} from '@angular/core';
+import {Injectable, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '@angular/core';
 
 import {ClientMessageBroker, ClientMessageBrokerFactory, FnArg, UiArguments} from '../shared/client_message_broker';
 import {MessageBus} from '../shared/message_bus';
@@ -67,7 +67,7 @@ export class WebWorkerRendererFactory2 implements RendererFactory2 {
     source.subscribe({next: (message: any) => this._dispatchEvent(message)});
   }
 
-  createRenderer(element: any, type: RendererType2): Renderer2 {
+  createRenderer(element: any, type: RendererType2|null): Renderer2 {
     const renderer = new WebWorkerRenderer2(this);
 
     const id = this.renderStore.allocateId();
@@ -81,6 +81,9 @@ export class WebWorkerRendererFactory2 implements RendererFactory2 {
     return renderer;
   }
 
+  begin() {}
+  end() {}
+
   callUI(fnName: string, fnArgs: FnArg[]) {
     const args = new UiArguments(fnName, fnArgs);
     this._messageBroker.runOnService(args, null);
@@ -277,9 +280,9 @@ export class WebWorkerRenderer2 implements Renderer2 {
       listener: (event: any) => boolean): () => void {
     const unlistenId = this._rendererFactory.allocateId();
 
-    const [targetEl, targetName, fullName]: [any, string, string] = typeof target === 'string' ?
-        [null, target, `${target}:${eventName}`] :
-        [target, null, null];
+    const [targetEl, targetName, fullName]: [any, string | null, string | null] =
+        typeof target === 'string' ? [null, target, `${target}:${eventName}`] :
+                                     [target, null, null];
 
     if (fullName) {
       this._rendererFactory.globalEvents.listen(fullName, listener);
diff --git a/packages/platform-webworker/src/web_workers/worker/worker_adapter.ts b/packages/platform-webworker/src/web_workers/worker/worker_adapter.ts
index f2bb27b29a..7c44a6434a 100644
--- a/packages/platform-webworker/src/web_workers/worker/worker_adapter.ts
+++ b/packages/platform-webworker/src/web_workers/worker/worker_adapter.ts
@@ -154,7 +154,6 @@ export class WorkerDomAdapter extends DomAdapter {
   setData(element: any, name: string, value: string) { throw 'not implemented'; }
   getComputedStyle(element: any): any { throw 'not implemented'; }
   getData(element: any, name: string): string { throw 'not implemented'; }
-  setGlobalVar(name: string, value: any) { throw 'not implemented'; }
   performanceNow(): number { throw 'not implemented'; }
   getAnimationPrefix(): string { throw 'not implemented'; }
   getTransitionEnd(): string { throw 'not implemented'; }
diff --git a/packages/platform-webworker/test/web_workers/shared/message_bus_spec.ts b/packages/platform-webworker/test/web_workers/shared/message_bus_spec.ts
index 52705057d0..ffbdb3450c 100644
--- a/packages/platform-webworker/test/web_workers/shared/message_bus_spec.ts
+++ b/packages/platform-webworker/test/web_workers/shared/message_bus_spec.ts
@@ -142,7 +142,7 @@ export function main() {
                }),
        500);
 
-    it('should send messages immediatly when run outside the zone',
+    it('should send messages immediately when run outside the zone',
        inject([AsyncTestCompleter, NgZone], (async: AsyncTestCompleter, zone: MockNgZone) => {
          bus = createConnectedMessageBus();
          setup(false, zone);
diff --git a/packages/platform-webworker/test/web_workers/shared/web_worker_test_util.ts b/packages/platform-webworker/test/web_workers/shared/web_worker_test_util.ts
index 21c43c2aa6..4db92143a5 100644
--- a/packages/platform-webworker/test/web_workers/shared/web_worker_test_util.ts
+++ b/packages/platform-webworker/test/web_workers/shared/web_worker_test_util.ts
@@ -44,12 +44,12 @@ export function expectBrokerCall(
   broker.spy('runOnService').and.callFake((args: UiArguments, returnType: Type<any>) => {
     expect(args.method).toEqual(methodName);
     if (vals != null) {
-      expect(args.args.length).toEqual(vals.length);
-      vals.forEach((v, i) => { expect(v).toEqual(args.args[i].value); });
+      expect(args.args !.length).toEqual(vals.length);
+      vals.forEach((v, i) => { expect(v).toEqual(args.args ![i].value); });
     }
-    let promise: Promise<any>|void = null;
+    let promise: Promise<any>|void = null !;
     if (handler != null) {
-      const givenValues = args.args.map((arg) => arg.value);
+      const givenValues = args.args !.map((arg) => arg.value);
       if (givenValues.length > 0) {
         promise = handler(givenValues);
       } else {
@@ -131,6 +131,6 @@ export class MockMessageBus extends MessageBus {
 }
 
 export class MockMessageBrokerFactory extends ClientMessageBrokerFactory_ {
-  constructor(private _messageBroker: ClientMessageBroker) { super(null, null); }
+  constructor(private _messageBroker: ClientMessageBroker) { super(null !, null !); }
   createMessageBroker(channel: string, runInZone = true) { return this._messageBroker; }
 }
diff --git a/packages/platform-webworker/test/web_workers/worker/platform_location_spec.ts b/packages/platform-webworker/test/web_workers/worker/platform_location_spec.ts
index e5db04f43d..a9481c10f9 100644
--- a/packages/platform-webworker/test/web_workers/worker/platform_location_spec.ts
+++ b/packages/platform-webworker/test/web_workers/worker/platform_location_spec.ts
@@ -18,8 +18,8 @@ import {SpyMessageBroker} from './spies';
 
 export function main() {
   describe('WebWorkerPlatformLocation', () => {
-    let uiBus: MessageBus = null;
-    let workerBus: MessageBus = null;
+    let uiBus: MessageBus = null !;
+    let workerBus: MessageBus = null !;
     let broker: any = null;
 
     const TEST_LOCATION = new LocationType(
@@ -35,11 +35,11 @@ export function main() {
             }
           });
       const factory = new MockMessageBrokerFactory(broker);
-      return new WebWorkerPlatformLocation(factory, workerBus, null);
+      return new WebWorkerPlatformLocation(factory, workerBus, null !);
     }
 
     function testPushOrReplaceState(pushState: boolean) {
-      const platformLocation = createWebWorkerPlatformLocation(null);
+      const platformLocation = createWebWorkerPlatformLocation(null !);
       const TITLE = 'foo';
       const URL = 'http://www.example.com/foo';
       expectBrokerCall(broker, pushState ? 'pushState' : 'replaceState', [null, TITLE, URL]);
@@ -60,18 +60,18 @@ export function main() {
     });
 
     it('should throw if getBaseHrefFromDOM is called', () => {
-      const platformLocation = createWebWorkerPlatformLocation(null);
+      const platformLocation = createWebWorkerPlatformLocation(null !);
       expect(() => platformLocation.getBaseHrefFromDOM()).toThrowError();
     });
 
     it('should get location on init', () => {
-      const platformLocation = createWebWorkerPlatformLocation(null);
+      const platformLocation = createWebWorkerPlatformLocation(null !);
       expectBrokerCall(broker, 'getLocation');
       platformLocation.init();
     });
 
     it('should throw if set pathname is called before init finishes', () => {
-      const platformLocation = createWebWorkerPlatformLocation(null);
+      const platformLocation = createWebWorkerPlatformLocation(null !);
       platformLocation.init();
       expect(() => platformLocation.pathname = 'TEST').toThrowError();
     });
diff --git a/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts b/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts
index c6dd3a3ae6..e426cebb5b 100644
--- a/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts
+++ b/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts
@@ -51,7 +51,7 @@ export function main() {
       const domRendererFactory = uiInjector.get(RendererFactory2);
 
       // Worker side
-      lastCreatedRenderer = null;
+      lastCreatedRenderer = null !;
 
       wwRenderStore = new RenderStore();
 
@@ -72,7 +72,7 @@ export function main() {
     });
 
     function getRenderElement(workerEl: any): any {
-      const id = wwRenderStore.serialize(workerEl);
+      const id = wwRenderStore.serialize(workerEl) !;
       return uiRenderStore.deserialize(id);
     }
 
@@ -205,7 +205,7 @@ function createWebWorkerRendererFactory2(
 }
 
 class RenderFactory extends WebWorkerRendererFactory2 {
-  createRenderer(element: any, type: RendererType2): Renderer2 {
+  createRenderer(element: any, type: RendererType2|null): Renderer2 {
     lastCreatedRenderer = super.createRenderer(element, type);
     return lastCreatedRenderer;
   }
diff --git a/packages/platform-webworker/tsconfig-build.json b/packages/platform-webworker/tsconfig-build.json
index 8d14abec3e..93b01d11ce 100644
--- a/packages/platform-webworker/tsconfig-build.json
+++ b/packages/platform-webworker/tsconfig-build.json
@@ -4,6 +4,7 @@
     "declaration": true,
     "stripInternal": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "module": "es2015",
     "moduleResolution": "node",
     "outDir": "../../dist/packages/platform-webworker",
diff --git a/packages/router-license-banner.txt b/packages/router-license-banner.txt
deleted file mode 100644
index ff5d63dc36..0000000000
--- a/packages/router-license-banner.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * @license Angular v0.0.0-ROUTERPLACEHOLDER
- * (c) 2010-2017 Google, Inc. https://angular.io/
- * License: MIT
- */
\ No newline at end of file
diff --git a/packages/router/package.json b/packages/router/package.json
index 71c9caab37..e8fa5bfeae 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular/router",
-  "version": "0.0.0-ROUTERPLACEHOLDER",
+  "version": "0.0.0-PLACEHOLDER",
   "description": "Angular - the routing library",
   "main": "./bundles/router.umd.js",
   "module": "./@angular/router.es5.js",
@@ -19,7 +19,10 @@
   "bugs": {
     "url": "https://github.com/angular/angular/issues"
   },
-  "homepage": "https://github.com/angular/angular/blob/master/modules/%40angular/router/README.md",
+  "homepage": "https://github.com/angular/angular/tree/master/packages/router",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "@angular/core": "0.0.0-PLACEHOLDER",
     "@angular/common": "0.0.0-PLACEHOLDER",
diff --git a/packages/router/rollup.config.js b/packages/router/rollup.config.js
index ec245d1c95..f020839ecc 100644
--- a/packages/router/rollup.config.js
+++ b/packages/router/rollup.config.js
@@ -6,40 +6,45 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/platform-browser': 'ng.platformBrowser',
+
+  'rxjs/BehaviorSubject': 'Rx',
+  'rxjs/Observable': 'Rx',
+  'rxjs/Subject': 'Rx',
+  'rxjs/Subscription': 'Rx',
+  'rxjs/util/EmptyError': 'Rx',
+
+  'rxjs/observable/from': 'Rx.Observable',
+  'rxjs/observable/fromPromise': 'Rx.Observable',
+  'rxjs/observable/forkJoin': 'Rx.Observable',
+  'rxjs/observable/of': 'Rx.Observable',
+
+  'rxjs/operator/toPromise': 'Rx.Observable.prototype',
+  'rxjs/operator/map': 'Rx.Observable.prototype',
+  'rxjs/operator/mergeAll': 'Rx.Observable.prototype',
+  'rxjs/operator/concatAll': 'Rx.Observable.prototype',
+  'rxjs/operator/mergeMap': 'Rx.Observable.prototype',
+  'rxjs/operator/reduce': 'Rx.Observable.prototype',
+  'rxjs/operator/every': 'Rx.Observable.prototype',
+  'rxjs/operator/first': 'Rx.Observable.prototype',
+  'rxjs/operator/catch': 'Rx.Observable.prototype',
+  'rxjs/operator/last': 'Rx.Observable.prototype',
+  'rxjs/operator/filter': 'Rx.Observable.prototype',
+  'rxjs/operator/concatMap': 'Rx.Observable.prototype'
+};
+
 export default {
   entry: '../../dist/packages-dist/router/@angular/router.es5.js',
   dest: '../../dist/packages-dist/router/bundles/router.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.router',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/platform-browser': 'ng.platformBrowser',
-
-    'rxjs/BehaviorSubject': 'Rx',
-    'rxjs/Observable': 'Rx',
-    'rxjs/Subject': 'Rx',
-    'rxjs/Subscription': 'Rx',
-    'rxjs/util/EmptyError': 'Rx',
-
-    'rxjs/observable/from': 'Rx.Observable',
-    'rxjs/observable/fromPromise': 'Rx.Observable',
-    'rxjs/observable/forkJoin': 'Rx.Observable',
-    'rxjs/observable/of': 'Rx.Observable',
-
-    'rxjs/operator/toPromise': 'Rx.Observable.prototype',
-    'rxjs/operator/map': 'Rx.Observable.prototype',
-    'rxjs/operator/mergeAll': 'Rx.Observable.prototype',
-    'rxjs/operator/concatAll': 'Rx.Observable.prototype',
-    'rxjs/operator/mergeMap': 'Rx.Observable.prototype',
-    'rxjs/operator/reduce': 'Rx.Observable.prototype',
-    'rxjs/operator/every': 'Rx.Observable.prototype',
-    'rxjs/operator/first': 'Rx.Observable.prototype',
-    'rxjs/operator/catch': 'Rx.Observable.prototype',
-    'rxjs/operator/last': 'Rx.Observable.prototype',
-    'rxjs/operator/filter': 'Rx.Observable.prototype',
-    'rxjs/operator/concatMap': 'Rx.Observable.prototype'
-  },
-  plugins: []
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/router/src/apply_redirects.ts b/packages/router/src/apply_redirects.ts
index 3a801227ca..8000df3368 100644
--- a/packages/router/src/apply_redirects.ts
+++ b/packages/router/src/apply_redirects.ts
@@ -18,14 +18,16 @@ import {map} from 'rxjs/operator/map';
 import {mergeMap} from 'rxjs/operator/mergeMap';
 import {EmptyError} from 'rxjs/util/EmptyError';
 
-import {InternalRoute, Route, Routes} from './config';
-import {LoadedRouterConfig, RouterConfigLoader} from './router_config_loader';
+import {LoadedRouterConfig, Route, Routes} from './config';
+import {RouterConfigLoader} from './router_config_loader';
 import {PRIMARY_OUTLET, Params, defaultUrlMatcher, navigationCancelingError} from './shared';
 import {UrlSegment, UrlSegmentGroup, UrlSerializer, UrlTree} from './url_tree';
 import {andObservables, forEach, waitForMap, wrapIntoObservable} from './utils/collection';
 
 class NoMatch {
-  constructor(public segmentGroup: UrlSegmentGroup = null) {}
+  public segmentGroup: UrlSegmentGroup|null;
+
+  constructor(segmentGroup?: UrlSegmentGroup) { this.segmentGroup = segmentGroup || null; }
 }
 
 class AbsoluteRedirect {
@@ -80,7 +82,7 @@ class ApplyRedirects {
         this.expandSegmentGroup(this.ngModule, this.config, this.urlTree.root, PRIMARY_OUTLET);
     const urlTrees$ = map.call(
         expanded$, (rootSegmentGroup: UrlSegmentGroup) => this.createUrlTree(
-                       rootSegmentGroup, this.urlTree.queryParams, this.urlTree.fragment));
+                       rootSegmentGroup, this.urlTree.queryParams, this.urlTree.fragment !));
     return _catch.call(urlTrees$, (e: any) => {
       if (e instanceof AbsoluteRedirect) {
         // after an absolute redirect we do not apply any more redirects!
@@ -102,7 +104,7 @@ class ApplyRedirects {
         this.expandSegmentGroup(this.ngModule, this.config, tree.root, PRIMARY_OUTLET);
     const mapped$ = map.call(
         expanded$, (rootSegmentGroup: UrlSegmentGroup) =>
-                       this.createUrlTree(rootSegmentGroup, tree.queryParams, tree.fragment));
+                       this.createUrlTree(rootSegmentGroup, tree.queryParams, tree.fragment !));
     return _catch.call(mapped$, (e: any): Observable<UrlTree> => {
       if (e instanceof NoMatch) {
         throw this.noMatchError(e);
@@ -215,8 +217,8 @@ class ApplyRedirects {
   private expandWildCardWithParamsAgainstRouteUsingRedirect(
       ngModule: NgModuleRef<any>, routes: Route[], route: Route,
       outlet: string): Observable<UrlSegmentGroup> {
-    const newTree = this.applyRedirectCommands([], route.redirectTo, {});
-    if (route.redirectTo.startsWith('/')) {
+    const newTree = this.applyRedirectCommands([], route.redirectTo !, {});
+    if (route.redirectTo !.startsWith('/')) {
       return absoluteRedirect(newTree);
     }
 
@@ -234,8 +236,8 @@ class ApplyRedirects {
     if (!matched) return noMatch(segmentGroup);
 
     const newTree = this.applyRedirectCommands(
-        consumedSegments, route.redirectTo, <any>positionalParamSegments);
-    if (route.redirectTo.startsWith('/')) {
+        consumedSegments, route.redirectTo !, <any>positionalParamSegments);
+    if (route.redirectTo !.startsWith('/')) {
       return absoluteRedirect(newTree);
     }
 
@@ -247,7 +249,7 @@ class ApplyRedirects {
   }
 
   private matchSegmentAgainstRoute(
-      ngModule: NgModuleRef<any>, rawSegmentGroup: UrlSegmentGroup, route: InternalRoute,
+      ngModule: NgModuleRef<any>, rawSegmentGroup: UrlSegmentGroup, route: Route,
       segments: UrlSegment[]): Observable<UrlSegmentGroup> {
     if (route.path === '**') {
       if (route.loadChildren) {
@@ -292,8 +294,7 @@ class ApplyRedirects {
     });
   }
 
-  private getChildConfig(ngModule: NgModuleRef<any>, route: InternalRoute):
-      Observable<LoadedRouterConfig> {
+  private getChildConfig(ngModule: NgModuleRef<any>, route: Route): Observable<LoadedRouterConfig> {
     if (route.children) {
       // The children belong to the same module
       return of (new LoadedRouterConfig(route.children, ngModule));
@@ -332,7 +333,7 @@ class ApplyRedirects {
       }
 
       if (c.numberOfChildren > 1 || !c.children[PRIMARY_OUTLET]) {
-        return namedOutletsRedirect(route.redirectTo);
+        return namedOutletsRedirect(route.redirectTo !);
       }
 
       c = c.children[PRIMARY_OUTLET];
@@ -357,7 +358,13 @@ class ApplyRedirects {
   private createQueryParams(redirectToParams: Params, actualParams: Params): Params {
     const res: Params = {};
     forEach(redirectToParams, (v: any, k: string) => {
-      res[k] = v.startsWith(':') ? actualParams[v.substring(1)] : v;
+      const copySourceValue = typeof v === 'string' && v.startsWith(':');
+      if (copySourceValue) {
+        const sourceName = v.substring(1);
+        res[k] = actualParams[sourceName];
+      } else {
+        res[k] = v;
+      }
     });
     return res;
   }
@@ -443,9 +450,9 @@ function match(segmentGroup: UrlSegmentGroup, route: Route, segments: UrlSegment
 
   return {
     matched: true,
-    consumedSegments: res.consumed,
-    lastChild: res.consumed.length,
-    positionalParamSegments: res.posParams,
+    consumedSegments: res.consumed !,
+    lastChild: res.consumed.length !,
+    positionalParamSegments: res.posParams !,
   };
 }
 
diff --git a/packages/router/src/config.ts b/packages/router/src/config.ts
index 6e0207d952..a024965bd4 100644
--- a/packages/router/src/config.ts
+++ b/packages/router/src/config.ts
@@ -6,13 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgModuleFactory, Type} from '@angular/core';
+import {NgModuleFactory, NgModuleRef, Type} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
-
 import {PRIMARY_OUTLET} from './shared';
 import {UrlSegment, UrlSegmentGroup} from './url_tree';
 
-
 /**
  * @whatItDoes Represents router configuration.
  *
@@ -22,7 +20,6 @@ import {UrlSegment, UrlSegmentGroup} from './url_tree';
  * - `path` is a string that uses the route matcher DSL.
  * - `pathMatch` is a string that specifies the matching strategy.
  * - `matcher` defines a custom strategy for path matching and supersedes `path` and `pathMatch`.
- *   See {@link UrlMatcher} for more info.
  * - `component` is a component type.
  * - `redirectTo` is the url fragment which will replace the current matched segment.
  * - `outlet` is the name of the outlet the component should be placed into.
@@ -32,12 +29,12 @@ import {UrlSegment, UrlSegmentGroup} from './url_tree';
  *   {@link CanActivateChild} for more info.
  * - `canDeactivate` is an array of DI tokens used to look up CanDeactivate handlers. See
  *   {@link CanDeactivate} for more info.
- * - `canLoad` is an array of DI tokens used to look up CanDeactivate handlers. See
+ * - `canLoad` is an array of DI tokens used to look up CanLoad handlers. See
  *   {@link CanLoad} for more info.
  * - `data` is additional data provided to the component via `ActivatedRoute`.
  * - `resolve` is a map of DI tokens used to look up data resolvers. See {@link Resolve} for more
  *   info.
- * - `runGuardsAndResolvers` defines when guards and resovlers will be run. By default they run only
+ * - `runGuardsAndResolvers` defines when guards and resolvers will be run. By default they run only
  *    when the matrix parameters of the route change. When set to `paramsOrQueryParamsChange` they
  *    will also run when query params change. And when set to `always`, they will run every time.
  * - `children` is an array of child route definitions.
@@ -359,11 +356,15 @@ export interface Route {
   children?: Routes;
   loadChildren?: LoadChildren;
   runGuardsAndResolvers?: RunGuardsAndResolvers;
+  /**
+   * Filled for routes with `loadChildren` once the module has been loaded
+   * @internal
+   */
+  _loadedConfig?: LoadedRouterConfig;
 }
 
-export interface InternalRoute extends Route {
-  // `LoadedRouterConfig` loaded via a Route `loadChildren`
-  _loadedConfig?: any;
+export class LoadedRouterConfig {
+  constructor(public routes: Route[], public module: NgModuleRef<any>) {}
 }
 
 export function validateConfig(config: Routes, parentPath: string = ''): void {
diff --git a/packages/router/src/create_url_tree.ts b/packages/router/src/create_url_tree.ts
index ab0d3e6bb5..c454af5099 100644
--- a/packages/router/src/create_url_tree.ts
+++ b/packages/router/src/create_url_tree.ts
@@ -164,7 +164,7 @@ function createPositionApplyingDoubleDots(
   let dd = numberOfDoubleDots;
   while (dd > ci) {
     dd -= ci;
-    g = g.parent;
+    g = g.parent !;
     if (!g) {
       throw new Error('Invalid number of \'../\'');
     }
diff --git a/packages/router/src/directives/router_link.ts b/packages/router/src/directives/router_link.ts
index 9c162f3f7d..554fc2157c 100644
--- a/packages/router/src/directives/router_link.ts
+++ b/packages/router/src/directives/router_link.ts
@@ -7,7 +7,7 @@
  */
 
 import {LocationStrategy} from '@angular/common';
-import {Attribute, Directive, ElementRef, HostBinding, HostListener, Input, OnChanges, OnDestroy, Renderer, isDevMode} from '@angular/core';
+import {Attribute, Directive, ElementRef, HostBinding, HostListener, Input, OnChanges, OnDestroy, Renderer2, isDevMode} from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
 
 import {QueryParamsHandling} from '../config';
@@ -72,7 +72,7 @@ import {UrlTree} from '../url_tree';
  *  - 'merge' merge the queryParams into the current queryParams
  *  - 'preserve' prserve the current queryParams
  *  - default / '' use the queryParams only
- *  same options for {@link NavigationExtras.queryParamsHandling}
+ *  same options for {@link NavigationExtras#queryParamsHandling}
  *
  * ```
  * <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
@@ -89,7 +89,7 @@ import {UrlTree} from '../url_tree';
  *
  * @ngModule RouterModule
  *
- * See {@link Router.createUrlTree} for more information.
+ * See {@link Router#createUrlTree} for more information.
  *
  * @stable
  */
@@ -106,9 +106,9 @@ export class RouterLink {
 
   constructor(
       private router: Router, private route: ActivatedRoute,
-      @Attribute('tabindex') tabIndex: string, renderer: Renderer, el: ElementRef) {
+      @Attribute('tabindex') tabIndex: string, renderer: Renderer2, el: ElementRef) {
     if (tabIndex == null) {
-      renderer.setElementAttribute(el.nativeElement, 'tabindex', '0');
+      renderer.setAttribute(el.nativeElement, 'tabindex', '0');
     }
   }
 
@@ -209,9 +209,9 @@ export class RouterLinkWithHref implements OnChanges, OnDestroy {
   ngOnChanges(changes: {}): any { this.updateTargetUrlAndHref(); }
   ngOnDestroy(): any { this.subscription.unsubscribe(); }
 
-  @HostListener('click', ['$event.button', '$event.ctrlKey', '$event.metaKey'])
-  onClick(button: number, ctrlKey: boolean, metaKey: boolean): boolean {
-    if (button !== 0 || ctrlKey || metaKey) {
+  @HostListener('click', ['$event.button', '$event.ctrlKey', '$event.metaKey', '$event.shiftKey'])
+  onClick(button: number, ctrlKey: boolean, metaKey: boolean, shiftKey: boolean): boolean {
+    if (button !== 0 || ctrlKey || metaKey || shiftKey) {
       return true;
     }
 
diff --git a/packages/router/src/directives/router_link_active.ts b/packages/router/src/directives/router_link_active.ts
index be6288a296..97d9d8d53a 100644
--- a/packages/router/src/directives/router_link_active.ts
+++ b/packages/router/src/directives/router_link_active.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterContentInit, ChangeDetectorRef, ContentChildren, Directive, ElementRef, Input, OnChanges, OnDestroy, QueryList, Renderer, SimpleChanges} from '@angular/core';
+import {AfterContentInit, ChangeDetectorRef, ContentChildren, Directive, ElementRef, Input, OnChanges, OnDestroy, QueryList, Renderer2, SimpleChanges} from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
 import {NavigationEnd} from '../events';
 import {Router} from '../router';
@@ -91,7 +91,7 @@ export class RouterLinkActive implements OnChanges,
   @Input() routerLinkActiveOptions: {exact: boolean} = {exact: false};
 
   constructor(
-      private router: Router, private element: ElementRef, private renderer: Renderer,
+      private router: Router, private element: ElementRef, private renderer: Renderer2,
       private cdr: ChangeDetectorRef) {
     this.subscription = router.events.subscribe(s => {
       if (s instanceof NavigationEnd) {
@@ -123,10 +123,14 @@ export class RouterLinkActive implements OnChanges,
 
     // react only when status has changed to prevent unnecessary dom updates
     if (this.active !== hasActiveLinks) {
-      this.active = hasActiveLinks;
-      this.classes.forEach(
-          c => this.renderer.setElementClass(this.element.nativeElement, c, hasActiveLinks));
-      this.cdr.detectChanges();
+      this.classes.forEach((c) => {
+        if (hasActiveLinks) {
+          this.renderer.addClass(this.element.nativeElement, c);
+        } else {
+          this.renderer.removeClass(this.element.nativeElement, c);
+        }
+      });
+      Promise.resolve(hasActiveLinks).then(active => this.active = active);
     }
   }
 
diff --git a/packages/router/src/directives/router_outlet.ts b/packages/router/src/directives/router_outlet.ts
index 435590b2e9..1bf9a0ef2c 100644
--- a/packages/router/src/directives/router_outlet.ts
+++ b/packages/router/src/directives/router_outlet.ts
@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Attribute, ComponentFactoryResolver, ComponentRef, Directive, EventEmitter, Injector, OnDestroy, Output, ReflectiveInjector, ResolvedReflectiveProvider, ViewContainerRef} from '@angular/core';
-import {RouterOutletMap} from '../router_outlet_map';
+import {Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, EventEmitter, Injector, OnDestroy, OnInit, Output, ViewContainerRef} from '@angular/core';
+
+import {ChildrenOutletContexts} from '../router_outlet_context';
 import {ActivatedRoute} from '../router_state';
 import {PRIMARY_OUTLET} from '../shared';
 
@@ -35,22 +36,41 @@ import {PRIMARY_OUTLET} from '../shared';
  *
  * @stable
  */
-@Directive({selector: 'router-outlet'})
-export class RouterOutlet implements OnDestroy {
-  private activated: ComponentRef<any>;
-  private _activatedRoute: ActivatedRoute;
-  public outletMap: RouterOutletMap;
+@Directive({selector: 'router-outlet', exportAs: 'outlet'})
+export class RouterOutlet implements OnDestroy, OnInit {
+  private activated: ComponentRef<any>|null = null;
+  private _activatedRoute: ActivatedRoute|null = null;
+  private name: string;
 
   @Output('activate') activateEvents = new EventEmitter<any>();
   @Output('deactivate') deactivateEvents = new EventEmitter<any>();
 
   constructor(
-      private parentOutletMap: RouterOutletMap, private location: ViewContainerRef,
-      private resolver: ComponentFactoryResolver, @Attribute('name') private name: string) {
-    parentOutletMap.registerOutlet(name ? name : PRIMARY_OUTLET, this);
+      private parentContexts: ChildrenOutletContexts, private location: ViewContainerRef,
+      private resolver: ComponentFactoryResolver, @Attribute('name') name: string,
+      private changeDetector: ChangeDetectorRef) {
+    this.name = name || PRIMARY_OUTLET;
+    parentContexts.onChildOutletCreated(this.name, this);
   }
 
-  ngOnDestroy(): void { this.parentOutletMap.removeOutlet(this.name ? this.name : PRIMARY_OUTLET); }
+  ngOnDestroy(): void { this.parentContexts.onChildOutletDestroyed(this.name); }
+
+  ngOnInit(): void {
+    if (!this.activated) {
+      // If the outlet was not instantiated at the time the route got activated we need to populate
+      // the outlet when it is initialized (ie inside a NgIf)
+      const context = this.parentContexts.getContext(this.name);
+      if (context && context.route) {
+        if (context.attachRef) {
+          // `attachRef` is populated when there is an existing component to mount
+          this.attach(context.attachRef, context.route);
+        } else {
+          // otherwise the component defined in the configuration is created
+          this.activateWith(context.route, context.resolver || null);
+        }
+      }
+    }
+  }
 
   /** @deprecated since v4 **/
   get locationInjector(): Injector { return this.location.injector; }
@@ -58,24 +78,39 @@ export class RouterOutlet implements OnDestroy {
   get locationFactoryResolver(): ComponentFactoryResolver { return this.resolver; }
 
   get isActivated(): boolean { return !!this.activated; }
+
   get component(): Object {
     if (!this.activated) throw new Error('Outlet is not activated');
     return this.activated.instance;
   }
+
   get activatedRoute(): ActivatedRoute {
     if (!this.activated) throw new Error('Outlet is not activated');
-    return this._activatedRoute;
+    return this._activatedRoute as ActivatedRoute;
   }
 
+  get activatedRouteData() {
+    if (this._activatedRoute) {
+      return this._activatedRoute.snapshot.data;
+    }
+    return {};
+  }
+
+  /**
+   * Called when the `RouteReuseStrategy` instructs to detach the subtree
+   */
   detach(): ComponentRef<any> {
     if (!this.activated) throw new Error('Outlet is not activated');
     this.location.detach();
-    const r = this.activated;
+    const cmp = this.activated;
     this.activated = null;
     this._activatedRoute = null;
-    return r;
+    return cmp;
   }
 
+  /**
+   * Called when the `RouteReuseStrategy` instructs to re-attach a previously detached subtree
+   */
   attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute) {
     this.activated = ref;
     this._activatedRoute = activatedRoute;
@@ -92,67 +127,39 @@ export class RouterOutlet implements OnDestroy {
     }
   }
 
-  /** @deprecated since v4, use {@link activateWith} */
-  activate(
-      activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver, injector: Injector,
-      providers: ResolvedReflectiveProvider[], outletMap: RouterOutletMap): void {
+  activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver|null) {
     if (this.isActivated) {
       throw new Error('Cannot activate an already activated outlet');
     }
-
-    this.outletMap = outletMap;
     this._activatedRoute = activatedRoute;
-
     const snapshot = activatedRoute._futureSnapshot;
-    const component: any = <any>snapshot._routeConfig.component;
-    const factory = resolver.resolveComponentFactory(component);
-
-    const inj = ReflectiveInjector.fromResolvedProviders(providers, injector);
-
-    this.activated = this.location.createComponent(factory, this.location.length, inj, []);
-    this.activated.changeDetectorRef.detectChanges();
-
-    this.activateEvents.emit(this.activated.instance);
-  }
-
-  activateWith(
-      activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver|null,
-      outletMap: RouterOutletMap) {
-    if (this.isActivated) {
-      throw new Error('Cannot activate an already activated outlet');
-    }
-
-    this.outletMap = outletMap;
-    this._activatedRoute = activatedRoute;
-
-    const snapshot = activatedRoute._futureSnapshot;
-    const component = <any>snapshot._routeConfig.component;
-
+    const component = <any>snapshot._routeConfig !.component;
     resolver = resolver || this.resolver;
     const factory = resolver.resolveComponentFactory(component);
-
-    const injector = new OutletInjector(activatedRoute, outletMap, this.location.injector);
-
-    this.activated = this.location.createComponent(factory, this.location.length, injector, []);
-    this.activated.changeDetectorRef.detectChanges();
-
+    const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
+    const injector = new OutletInjector(activatedRoute, childContexts, this.location.injector);
+    this.activated = this.location.createComponent(factory, this.location.length, injector);
+    // Calling `markForCheck` to make sure we will run the change detection when the
+    // `RouterOutlet` is inside a `ChangeDetectionStrategy.OnPush` component.
+    this.changeDetector.markForCheck();
     this.activateEvents.emit(this.activated.instance);
   }
 }
 
 class OutletInjector implements Injector {
   constructor(
-      private route: ActivatedRoute, private map: RouterOutletMap, private parent: Injector) {}
+      private route: ActivatedRoute, private childContexts: ChildrenOutletContexts,
+      private parent: Injector) {}
 
   get(token: any, notFoundValue?: any): any {
     if (token === ActivatedRoute) {
       return this.route;
     }
 
-    if (token === RouterOutletMap) {
-      return this.map;
+    if (token === ChildrenOutletContexts) {
+      return this.childContexts;
     }
 
     return this.parent.get(token, notFoundValue);
   }
-}
\ No newline at end of file
+}
diff --git a/packages/router/src/events.ts b/packages/router/src/events.ts
index c4b223c17e..80564147d3 100644
--- a/packages/router/src/events.ts
+++ b/packages/router/src/events.ts
@@ -128,18 +128,114 @@ export class RouteConfigLoadEnd {
 }
 
 /**
- * @whatItDoes Represents a router event.
+ * @whatItDoes Represents the start of the Guard phase of routing.
+ *
+ * @experimental
+ */
+export class GuardsCheckStart {
+  constructor(
+      /** @docsNotRequired */
+      public id: number,
+      /** @docsNotRequired */
+      public url: string,
+      /** @docsNotRequired */
+      public urlAfterRedirects: string,
+      /** @docsNotRequired */
+      public state: RouterStateSnapshot) {}
+
+  toString(): string {
+    return `GuardsCheckStart(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state})`;
+  }
+}
+
+/**
+ * @whatItDoes Represents the end of the Guard phase of routing.
+ *
+ * @experimental
+ */
+export class GuardsCheckEnd {
+  constructor(
+      /** @docsNotRequired */
+      public id: number,
+      /** @docsNotRequired */
+      public url: string,
+      /** @docsNotRequired */
+      public urlAfterRedirects: string,
+      /** @docsNotRequired */
+      public state: RouterStateSnapshot,
+      /** @docsNotRequired */
+      public shouldActivate: boolean) {}
+
+  toString(): string {
+    return `GuardsCheckEnd(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state}, shouldActivate: ${this.shouldActivate})`;
+  }
+}
+
+/**
+ * @whatItDoes Represents the start of the Resolve phase of routing. The timing of this
+ * event may change, thus it's experimental. In the current iteration it will run
+ * in the "resolve" phase whether there's things to resolve or not. In the future this
+ * behavior may change to only run when there are things to be resolved.
+ *
+ * @experimental
+ */
+export class ResolveStart {
+  constructor(
+      /** @docsNotRequired */
+      public id: number,
+      /** @docsNotRequired */
+      public url: string,
+      /** @docsNotRequired */
+      public urlAfterRedirects: string,
+      /** @docsNotRequired */
+      public state: RouterStateSnapshot) {}
+
+  toString(): string {
+    return `ResolveStart(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state})`;
+  }
+}
+
+/**
+ * @whatItDoes Represents the end of the Resolve phase of routing. See note on
+ * {@link ResolveStart} for use of this experimental API.
+ *
+ * @experimental
+ */
+export class ResolveEnd {
+  constructor(
+      /** @docsNotRequired */
+      public id: number,
+      /** @docsNotRequired */
+      public url: string,
+      /** @docsNotRequired */
+      public urlAfterRedirects: string,
+      /** @docsNotRequired */
+      public state: RouterStateSnapshot) {}
+
+  toString(): string {
+    return `ResolveEnd(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state})`;
+  }
+}
+
+/**
+ * @whatItDoes Represents a router event, allowing you to track the lifecycle of the router.
+ *
+ * The sequence of router events is:
  *
- * One of:
  * - {@link NavigationStart},
+ * - {@link RouteConfigLoadStart},
+ * - {@link RouteConfigLoadEnd},
+ * - {@link RoutesRecognized},
+ * - {@link GuardsCheckStart},
+ * - {@link GuardsCheckEnd},
+ * - {@link ResolveStart},
+ * - {@link ResolveEnd},
  * - {@link NavigationEnd},
  * - {@link NavigationCancel},
- * - {@link NavigationError},
- * - {@link RoutesRecognized},
- * - {@link RouteConfigLoadStart},
- * - {@link RouteConfigLoadEnd}
+ * - {@link NavigationError}
  *
  * @stable
  */
 export type Event = NavigationStart | NavigationEnd | NavigationCancel | NavigationError |
-    RoutesRecognized | RouteConfigLoadStart | RouteConfigLoadEnd;
+    RoutesRecognized | RouteConfigLoadStart | RouteConfigLoadEnd | GuardsCheckStart |
+    GuardsCheckEnd | ResolveStart | ResolveEnd;
diff --git a/packages/router/src/index.ts b/packages/router/src/index.ts
index 6e329cf2be..6d202fbc3d 100644
--- a/packages/router/src/index.ts
+++ b/packages/router/src/index.ts
@@ -7,17 +7,17 @@
  */
 
 
-export {Data, LoadChildren, LoadChildrenCallback, ResolveData, Route, Routes, RunGuardsAndResolvers} from './config';
+export {Data, LoadChildren, LoadChildrenCallback, ResolveData, Route, Routes, RunGuardsAndResolvers, UrlMatchResult, UrlMatcher} from './config';
 export {RouterLink, RouterLinkWithHref} from './directives/router_link';
 export {RouterLinkActive} from './directives/router_link_active';
 export {RouterOutlet} from './directives/router_outlet';
-export {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, RouteConfigLoadEnd, RouteConfigLoadStart, RoutesRecognized} from './events';
+export {Event, GuardsCheckEnd, GuardsCheckStart, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, ResolveEnd, ResolveStart, RouteConfigLoadEnd, RouteConfigLoadStart, RoutesRecognized} from './events';
 export {CanActivate, CanActivateChild, CanDeactivate, CanLoad, Resolve} from './interfaces';
 export {DetachedRouteHandle, RouteReuseStrategy} from './route_reuse_strategy';
 export {NavigationExtras, Router} from './router';
 export {ROUTES} from './router_config_loader';
 export {ExtraOptions, ROUTER_CONFIGURATION, ROUTER_INITIALIZER, RouterModule, provideRoutes} from './router_module';
-export {RouterOutletMap} from './router_outlet_map';
+export {ChildrenOutletContexts, OutletContext} from './router_outlet_context';
 export {NoPreloading, PreloadAllModules, PreloadingStrategy, RouterPreloader} from './router_preloader';
 export {ActivatedRoute, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot} from './router_state';
 export {PRIMARY_OUTLET, ParamMap, Params, convertToParamMap} from './shared';
diff --git a/packages/router/src/recognize.ts b/packages/router/src/recognize.ts
index 169bd84484..90200debf7 100644
--- a/packages/router/src/recognize.ts
+++ b/packages/router/src/recognize.ts
@@ -11,7 +11,7 @@ import {Observable} from 'rxjs/Observable';
 import {Observer} from 'rxjs/Observer';
 import {of } from 'rxjs/observable/of';
 
-import {Data, InternalRoute, ResolveData, Route, Routes} from './config';
+import {Data, ResolveData, Route, Routes} from './config';
 import {ActivatedRouteSnapshot, RouterStateSnapshot, inheritedParamsDataResolve} from './router_state';
 import {PRIMARY_OUTLET, defaultUrlMatcher} from './shared';
 import {UrlSegment, UrlSegmentGroup, UrlTree, mapChildrenIntoArray} from './url_tree';
@@ -21,14 +21,14 @@ import {TreeNode} from './utils/tree';
 class NoMatch {}
 
 export function recognize(
-    rootComponentType: Type<any>, config: Routes, urlTree: UrlTree,
+    rootComponentType: Type<any>| null, config: Routes, urlTree: UrlTree,
     url: string): Observable<RouterStateSnapshot> {
   return new Recognizer(rootComponentType, config, urlTree, url).recognize();
 }
 
 class Recognizer {
   constructor(
-      private rootComponentType: Type<any>, private config: Routes, private urlTree: UrlTree,
+      private rootComponentType: Type<any>|null, private config: Routes, private urlTree: UrlTree,
       private url: string) {}
 
   recognize(): Observable<RouterStateSnapshot> {
@@ -38,12 +38,12 @@ class Recognizer {
       const children = this.processSegmentGroup(this.config, rootSegmentGroup, PRIMARY_OUTLET);
 
       const root = new ActivatedRouteSnapshot(
-          [], Object.freeze({}), Object.freeze(this.urlTree.queryParams), this.urlTree.fragment, {},
-          PRIMARY_OUTLET, this.rootComponentType, null, this.urlTree.root, -1, {});
+          [], Object.freeze({}), Object.freeze(this.urlTree.queryParams), this.urlTree.fragment !,
+          {}, PRIMARY_OUTLET, this.rootComponentType, null, this.urlTree.root, -1, {});
 
       const rootNode = new TreeNode<ActivatedRouteSnapshot>(root, children);
       const routeState = new RouterStateSnapshot(this.url, rootNode);
-      this.inheriteParamsAndData(routeState._root);
+      this.inheritParamsAndData(routeState._root);
       return of (routeState);
 
     } catch (e) {
@@ -52,14 +52,14 @@ class Recognizer {
     }
   }
 
-  inheriteParamsAndData(routeNode: TreeNode<ActivatedRouteSnapshot>): void {
+  inheritParamsAndData(routeNode: TreeNode<ActivatedRouteSnapshot>): void {
     const route = routeNode.value;
 
     const i = inheritedParamsDataResolve(route);
     route.params = Object.freeze(i.params);
     route.data = Object.freeze(i.data);
 
-    routeNode.children.forEach(n => this.inheriteParamsAndData(n));
+    routeNode.children.forEach(n => this.inheritParamsAndData(n));
   }
 
   processSegmentGroup(config: Route[], segmentGroup: UrlSegmentGroup, outlet: string):
@@ -110,10 +110,10 @@ class Recognizer {
     if ((route.outlet || PRIMARY_OUTLET) !== outlet) throw new NoMatch();
 
     if (route.path === '**') {
-      const params = segments.length > 0 ? last(segments).parameters : {};
+      const params = segments.length > 0 ? last(segments) !.parameters : {};
       const snapshot = new ActivatedRouteSnapshot(
-          segments, params, Object.freeze(this.urlTree.queryParams), this.urlTree.fragment,
-          getData(route), outlet, route.component, route, getSourceSegmentGroup(rawSegment),
+          segments, params, Object.freeze(this.urlTree.queryParams), this.urlTree.fragment !,
+          getData(route), outlet, route.component !, route, getSourceSegmentGroup(rawSegment),
           getPathIndexShift(rawSegment) + segments.length, getResolve(route));
       return [new TreeNode<ActivatedRouteSnapshot>(snapshot, [])];
     }
@@ -127,7 +127,7 @@ class Recognizer {
 
     const snapshot = new ActivatedRouteSnapshot(
         consumedSegments, parameters, Object.freeze(this.urlTree.queryParams),
-        this.urlTree.fragment, getData(route), outlet, route.component, route,
+        this.urlTree.fragment !, getData(route), outlet, route.component !, route,
         getSourceSegmentGroup(rawSegment), getPathIndexShift(rawSegment) + consumedSegments.length,
         getResolve(route));
 
@@ -154,13 +154,13 @@ function sortActivatedRouteSnapshots(nodes: TreeNode<ActivatedRouteSnapshot>[]):
   });
 }
 
-function getChildConfig(route: InternalRoute): Route[] {
+function getChildConfig(route: Route): Route[] {
   if (route.children) {
     return route.children;
   }
 
   if (route.loadChildren) {
-    return route._loadedConfig.routes;
+    return route._loadedConfig !.routes;
   }
 
   return [];
@@ -180,8 +180,10 @@ function match(segmentGroup: UrlSegmentGroup, route: Route, segments: UrlSegment
   if (!res) throw new NoMatch();
 
   const posParams: {[n: string]: string} = {};
-  forEach(res.posParams, (v: UrlSegment, k: string) => { posParams[k] = v.path; });
-  const parameters = {...posParams, ...res.consumed[res.consumed.length - 1].parameters};
+  forEach(res.posParams !, (v: UrlSegment, k: string) => { posParams[k] = v.path; });
+  const parameters = res.consumed.length > 0 ?
+      {...posParams, ...res.consumed[res.consumed.length - 1].parameters} :
+      posParams;
 
   return {consumedSegments: res.consumed, lastChild: res.consumed.length, parameters};
 }
diff --git a/packages/router/src/route_reuse_strategy.ts b/packages/router/src/route_reuse_strategy.ts
index f733b06dc6..6f142e045d 100644
--- a/packages/router/src/route_reuse_strategy.ts
+++ b/packages/router/src/route_reuse_strategy.ts
@@ -8,6 +8,7 @@
 
 import {ComponentRef} from '@angular/core';
 
+import {OutletContext} from './router_outlet_context';
 import {ActivatedRoute, ActivatedRouteSnapshot} from './router_state';
 import {TreeNode} from './utils/tree';
 
@@ -23,6 +24,7 @@ export type DetachedRouteHandle = {};
 
 /** @internal */
 export type DetachedRouteHandleInternal = {
+  contexts: Map<string, OutletContext>,
   componentRef: ComponentRef<any>,
   route: TreeNode<ActivatedRoute>,
 };
@@ -36,15 +38,32 @@ export abstract class RouteReuseStrategy {
   /** Determines if this route (and its subtree) should be detached to be reused later */
   abstract shouldDetach(route: ActivatedRouteSnapshot): boolean;
 
-  /** Stores the detached route */
-  abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void;
+  /**
+   * Stores the detached route.
+   *
+   * Storing a `null` value should erase the previously stored value.
+   */
+  abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle|null): void;
 
   /** Determines if this route (and its subtree) should be reattached */
   abstract shouldAttach(route: ActivatedRouteSnapshot): boolean;
 
   /** Retrieves the previously stored route */
-  abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle;
+  abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null;
 
   /** Determines if a route should be reused */
   abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;
-}
\ No newline at end of file
+}
+
+/**
+ * Does not detach any subtrees. Reuses routes as long as their route config is the same.
+ */
+export class DefaultRouteReuseStrategy implements RouteReuseStrategy {
+  shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
+  store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
+  shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
+  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null { return null; }
+  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+    return future.routeConfig === curr.routeConfig;
+  }
+}
diff --git a/packages/router/src/router.ts b/packages/router/src/router.ts
index d4ad6aa330..a5970a15a6 100644
--- a/packages/router/src/router.ts
+++ b/packages/router/src/router.ts
@@ -17,22 +17,22 @@ import {of } from 'rxjs/observable/of';
 import {concatMap} from 'rxjs/operator/concatMap';
 import {every} from 'rxjs/operator/every';
 import {first} from 'rxjs/operator/first';
+import {last} from 'rxjs/operator/last';
 import {map} from 'rxjs/operator/map';
 import {mergeMap} from 'rxjs/operator/mergeMap';
 import {reduce} from 'rxjs/operator/reduce';
 
 import {applyRedirects} from './apply_redirects';
-import {InternalRoute, QueryParamsHandling, ResolveData, Route, Routes, RunGuardsAndResolvers, validateConfig} from './config';
+import {LoadedRouterConfig, QueryParamsHandling, ResolveData, Route, Routes, RunGuardsAndResolvers, validateConfig} from './config';
 import {createRouterState} from './create_router_state';
 import {createUrlTree} from './create_url_tree';
-import {RouterOutlet} from './directives/router_outlet';
-import {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, RouteConfigLoadEnd, RouteConfigLoadStart, RoutesRecognized} from './events';
+import {Event, GuardsCheckEnd, GuardsCheckStart, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, ResolveEnd, ResolveStart, RouteConfigLoadEnd, RouteConfigLoadStart, RoutesRecognized} from './events';
 import {recognize} from './recognize';
-import {DetachedRouteHandle, DetachedRouteHandleInternal, RouteReuseStrategy} from './route_reuse_strategy';
-import {LoadedRouterConfig, RouterConfigLoader} from './router_config_loader';
-import {RouterOutletMap} from './router_outlet_map';
+import {DefaultRouteReuseStrategy, DetachedRouteHandleInternal, RouteReuseStrategy} from './route_reuse_strategy';
+import {RouterConfigLoader} from './router_config_loader';
+import {ChildrenOutletContexts, OutletContext} from './router_outlet_context';
 import {ActivatedRoute, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot, advanceActivatedRoute, createEmptyState, equalParamsAndUrlSegments, inheritedParamsDataResolve} from './router_state';
-import {PRIMARY_OUTLET, Params, isNavigationCancelingError} from './shared';
+import {Params, isNavigationCancelingError} from './shared';
 import {DefaultUrlHandlingStrategy, UrlHandlingStrategy} from './url_handling_strategy';
 import {UrlSerializer, UrlTree, containsTree, createEmptyUrlTree} from './url_tree';
 import {andObservables, forEach, shallowEqual, waitForMap, wrapIntoObservable} from './utils/collection';
@@ -78,7 +78,7 @@ export interface NavigationExtras {
   *  }
   * ```
   */
-  relativeTo?: ActivatedRoute;
+  relativeTo?: ActivatedRoute|null;
 
   /**
   * Sets query parameters to the URL.
@@ -88,7 +88,7 @@ export interface NavigationExtras {
   * this.router.navigate(['/results'], { queryParams: { page: 1 } });
   * ```
   */
-  queryParams?: Params;
+  queryParams?: Params|null;
 
   /**
   * Sets the hash fragment for the URL.
@@ -122,7 +122,7 @@ export interface NavigationExtras {
   * this.router.navigate(['/view'], { queryParams: { page: 2 },  queryParamsHandling: "merge" });
   * ```
   */
-  queryParamsHandling?: QueryParamsHandling;
+  queryParamsHandling?: QueryParamsHandling|null;
   /**
   * Preserves the fragment for the next navigation
   *
@@ -189,20 +189,7 @@ export type RouterHook = (snapshot: RouterStateSnapshot) => Observable<void>;
  * @internal
  */
 function defaultRouterHook(snapshot: RouterStateSnapshot): Observable<void> {
-  return of (null);
-}
-
-/**
- * Does not detach any subtrees. Reuses routes as long as their route config is the same.
- */
-export class DefaultRouteReuseStrategy implements RouteReuseStrategy {
-  shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
-  store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
-  shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
-  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return null; }
-  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
-    return future.routeConfig === curr.routeConfig;
-  }
+  return of (null) as any;
 }
 
 /**
@@ -218,7 +205,7 @@ export class Router {
   private currentUrlTree: UrlTree;
   private rawUrlTree: UrlTree;
 
-  private navigations = new BehaviorSubject<NavigationParams>(null);
+  private navigations = new BehaviorSubject<NavigationParams>(null !);
   private routerEvents = new Subject<Event>();
 
   private currentRouterState: RouterState;
@@ -263,8 +250,8 @@ export class Router {
    */
   // TODO: vsavkin make internal after the final is out.
   constructor(
-      private rootComponentType: Type<any>, private urlSerializer: UrlSerializer,
-      private outletMap: RouterOutletMap, private location: Location, injector: Injector,
+      private rootComponentType: Type<any>|null, private urlSerializer: UrlSerializer,
+      private rootContexts: ChildrenOutletContexts, private location: Location, injector: Injector,
       loader: NgModuleFactoryLoader, compiler: Compiler, public config: Routes) {
     const onLoadStart = (r: Route) => this.triggerEvent(new RouteConfigLoadStart(r));
     const onLoadEnd = (r: Route) => this.triggerEvent(new RouteConfigLoadEnd(r));
@@ -326,7 +313,7 @@ export class Router {
   get events(): Observable<Event> { return this.routerEvents; }
 
   /** @internal */
-  triggerEvent(e: Event) { this.routerEvents.next(e); }
+  triggerEvent(e: Event): void { this.routerEvents.next(e); }
 
   /**
    * Resets the configuration used for navigation and generating links.
@@ -345,16 +332,17 @@ export class Router {
   resetConfig(config: Routes): void {
     validateConfig(config);
     this.config = config;
+    this.navigated = false;
   }
 
   /** @docsNotRequired */
-  ngOnDestroy() { this.dispose(); }
+  ngOnDestroy(): void { this.dispose(); }
 
   /** Disposes of the router */
   dispose(): void {
     if (this.locationSubscription) {
       this.locationSubscription.unsubscribe();
-      this.locationSubscription = null;
+      this.locationSubscription = null !;
     }
   }
 
@@ -399,15 +387,15 @@ export class Router {
    * router.createUrlTree(['../../team/44/user/22'], {relativeTo: route});
    * ```
    */
-  createUrlTree(
-      commands: any[], {relativeTo, queryParams, fragment, preserveQueryParams, queryParamsHandling,
-                        preserveFragment}: NavigationExtras = {}): UrlTree {
+  createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree {
+    const {relativeTo,          queryParams,         fragment,
+           preserveQueryParams, queryParamsHandling, preserveFragment} = navigationExtras;
     if (isDevMode() && preserveQueryParams && <any>console && <any>console.warn) {
       console.warn('preserveQueryParams is deprecated, use queryParamsHandling instead.');
     }
     const a = relativeTo || this.routerState.root;
     const f = preserveFragment ? this.currentUrlTree.fragment : fragment;
-    let q: Params = null;
+    let q: Params|null = null;
     if (queryParamsHandling) {
       switch (queryParamsHandling) {
         case 'merge':
@@ -417,12 +405,12 @@ export class Router {
           q = this.currentUrlTree.queryParams;
           break;
         default:
-          q = queryParams;
+          q = queryParams || null;
       }
     } else {
-      q = preserveQueryParams ? this.currentUrlTree.queryParams : queryParams;
+      q = preserveQueryParams ? this.currentUrlTree.queryParams : queryParams || null;
     }
-    return createUrlTree(a, this.currentUrlTree, commands, q, f);
+    return createUrlTree(a, this.currentUrlTree, commands, q !, f !);
   }
 
   /**
@@ -493,10 +481,10 @@ export class Router {
   isActive(url: string|UrlTree, exact: boolean): boolean {
     if (url instanceof UrlTree) {
       return containsTree(this.currentUrlTree, url, exact);
-    } else {
-      const urlTree = this.urlSerializer.parse(url);
-      return containsTree(this.currentUrlTree, urlTree, exact);
     }
+
+    const urlTree = this.urlSerializer.parse(url);
+    return containsTree(this.currentUrlTree, urlTree, exact);
   }
 
   private removeEmptyProps(params: Params): Params {
@@ -535,7 +523,7 @@ export class Router {
     // we should skip those.
     if (lastNavigation && source !== 'imperative' && lastNavigation.source === 'imperative' &&
         lastNavigation.rawUrl.toString() === rawUrl.toString()) {
-      return null;  // return value is not used
+      return Promise.resolve(true);  // return value is not used
     }
 
     // Because of a bug in IE and Edge, the location class fires two events (popstate and
@@ -543,7 +531,7 @@ export class Router {
     // flicker.
     if (lastNavigation && source == 'hashchange' && lastNavigation.source === 'popstate' &&
         lastNavigation.rawUrl.toString() === rawUrl.toString()) {
-      return null;  // return value is not used
+      return Promise.resolve(true);  // return value is not used
     }
 
     let resolve: any = null;
@@ -572,7 +560,7 @@ export class Router {
       Promise.resolve()
           .then(
               (_) => this.runNavigate(
-                  url, rawUrl, extras.skipLocationChange, extras.replaceUrl, id, null))
+                  url, rawUrl, !!extras.skipLocationChange, !!extras.replaceUrl, id, null))
           .then(resolve, reject);
 
       // we cannot process the current URL, but we could process the previous one =>
@@ -596,7 +584,7 @@ export class Router {
 
   private runNavigate(
       url: UrlTree, rawUrl: UrlTree, shouldPreventPushState: boolean, shouldReplaceUrl: boolean,
-      id: number, precreatedState: RouterStateSnapshot): Promise<boolean> {
+      id: number, precreatedState: RouterStateSnapshot|null): Promise<boolean> {
     if (id !== this.navigationId) {
       this.location.go(this.urlSerializer.serialize(this.currentUrlTree));
       this.routerEvents.next(new NavigationCancel(
@@ -637,13 +625,14 @@ export class Router {
 
       // run preactivation: guards and data resolvers
       let preActivation: PreActivation;
+
       const preactivationTraverse$ = map.call(
           beforePreactivationDone$,
           ({appliedUrl, snapshot}: {appliedUrl: string, snapshot: RouterStateSnapshot}) => {
             const moduleInjector = this.ngModule.injector;
             preActivation =
                 new PreActivation(snapshot, this.currentRouterState.snapshot, moduleInjector);
-            preActivation.traverse(this.outletMap);
+            preActivation.traverse(this.rootContexts);
             return {appliedUrl, snapshot};
           });
 
@@ -652,20 +641,33 @@ export class Router {
           ({appliedUrl, snapshot}: {appliedUrl: string, snapshot: RouterStateSnapshot}) => {
             if (this.navigationId !== id) return of (false);
 
+            this.triggerEvent(
+                new GuardsCheckStart(id, this.serializeUrl(url), appliedUrl, snapshot));
+
             return map.call(preActivation.checkGuards(), (shouldActivate: boolean) => {
+              this.triggerEvent(new GuardsCheckEnd(
+                  id, this.serializeUrl(url), appliedUrl, snapshot, shouldActivate));
               return {appliedUrl: appliedUrl, snapshot: snapshot, shouldActivate: shouldActivate};
             });
           });
 
-      const preactivationResolveData$ = mergeMap.call(preactivationCheckGuards$, (p: any) => {
-        if (this.navigationId !== id) return of (false);
+      const preactivationResolveData$ = mergeMap.call(
+          preactivationCheckGuards$,
+          (p: {appliedUrl: string, snapshot: RouterStateSnapshot, shouldActivate: boolean}) => {
+            if (this.navigationId !== id) return of (false);
 
-        if (p.shouldActivate) {
-          return map.call(preActivation.resolveData(), () => p);
-        } else {
-          return of (p);
-        }
-      });
+            if (p.shouldActivate && preActivation.isActivating()) {
+              this.triggerEvent(
+                  new ResolveStart(id, this.serializeUrl(url), p.appliedUrl, p.snapshot));
+              return map.call(preActivation.resolveData(), () => {
+                this.triggerEvent(
+                    new ResolveEnd(id, this.serializeUrl(url), p.appliedUrl, p.snapshot));
+                return p;
+              });
+            } else {
+              return of (p);
+            }
+          });
 
       const preactivationDone$ = mergeMap.call(preactivationResolveData$, (p: any) => {
         return map.call(this.hooks.afterPreactivation(p.snapshot), () => p);
@@ -714,7 +716,7 @@ export class Router {
             }
 
             new ActivateRoutes(this.routeReuseStrategy, state, storedState)
-                .activate(this.outletMap);
+                .activate(this.rootContexts);
 
             navigationIsSuccessful = true;
           })
@@ -768,25 +770,29 @@ class CanActivate {
 }
 
 class CanDeactivate {
-  constructor(public component: Object, public route: ActivatedRouteSnapshot) {}
+  constructor(public component: Object|null, public route: ActivatedRouteSnapshot) {}
 }
 
-
 export class PreActivation {
   private canActivateChecks: CanActivate[] = [];
   private canDeactivateChecks: CanDeactivate[] = [];
+
   constructor(
       private future: RouterStateSnapshot, private curr: RouterStateSnapshot,
       private moduleInjector: Injector) {}
 
-  traverse(parentOutletMap: RouterOutletMap): void {
+  traverse(parentContexts: ChildrenOutletContexts): void {
     const futureRoot = this.future._root;
     const currRoot = this.curr ? this.curr._root : null;
-    this.traverseChildRoutes(futureRoot, currRoot, parentOutletMap, [futureRoot.value]);
+    this.traverseChildRoutes(futureRoot, currRoot, parentContexts, [futureRoot.value]);
   }
 
+  // TODO(jasonaden): Refactor checkGuards and resolveData so they can collect the checks
+  // and guards before mapping into the observable. Likely remove the observable completely
+  // and make these pure functions so they are more predictable and don't rely on so much
+  // external state.
   checkGuards(): Observable<boolean> {
-    if (this.canDeactivateChecks.length === 0 && this.canActivateChecks.length === 0) {
+    if (!this.isDeactivating() && !this.isActivating()) {
       return of (true);
     }
     const canDeactivate$ = this.runCanDeactivateChecks();
@@ -796,40 +802,47 @@ export class PreActivation {
   }
 
   resolveData(): Observable<any> {
-    if (this.canActivateChecks.length === 0) return of (null);
+    if (!this.isActivating()) return of (null);
     const checks$ = from(this.canActivateChecks);
     const runningChecks$ =
         concatMap.call(checks$, (check: CanActivate) => this.runResolve(check.route));
     return reduce.call(runningChecks$, (_: any, __: any) => _);
   }
 
+  isDeactivating(): boolean { return this.canDeactivateChecks.length !== 0; }
+
+  isActivating(): boolean { return this.canActivateChecks.length !== 0; }
+
   private traverseChildRoutes(
-      futureNode: TreeNode<ActivatedRouteSnapshot>, currNode: TreeNode<ActivatedRouteSnapshot>,
-      outletMap: RouterOutletMap, futurePath: ActivatedRouteSnapshot[]): void {
+      futureNode: TreeNode<ActivatedRouteSnapshot>, currNode: TreeNode<ActivatedRouteSnapshot>|null,
+      contexts: ChildrenOutletContexts|null, futurePath: ActivatedRouteSnapshot[]): void {
     const prevChildren = nodeChildrenAsMap(currNode);
 
+    // Process the children of the future route
     futureNode.children.forEach(c => {
-      this.traverseRoutes(c, prevChildren[c.value.outlet], outletMap, futurePath.concat([c.value]));
+      this.traverseRoutes(c, prevChildren[c.value.outlet], contexts, futurePath.concat([c.value]));
       delete prevChildren[c.value.outlet];
     });
+
+    // Process any children left from the current route (not active for the future route)
     forEach(
         prevChildren, (v: TreeNode<ActivatedRouteSnapshot>, k: string) =>
-                          this.deactiveRouteAndItsChildren(v, outletMap._outlets[k]));
+                          this.deactivateRouteAndItsChildren(v, contexts !.getContext(k)));
   }
 
   private traverseRoutes(
       futureNode: TreeNode<ActivatedRouteSnapshot>, currNode: TreeNode<ActivatedRouteSnapshot>,
-      parentOutletMap: RouterOutletMap, futurePath: ActivatedRouteSnapshot[]): void {
+      parentContexts: ChildrenOutletContexts|null, futurePath: ActivatedRouteSnapshot[]): void {
     const future = futureNode.value;
     const curr = currNode ? currNode.value : null;
-    const outlet = parentOutletMap ? parentOutletMap._outlets[futureNode.value.outlet] : null;
+    const context = parentContexts ? parentContexts.getContext(futureNode.value.outlet) : null;
 
     // reusing the node
     if (curr && future._routeConfig === curr._routeConfig) {
-      if (this.shouldRunGuardsAndResolvers(
-              curr, future, future._routeConfig.runGuardsAndResolvers)) {
+      const shouldRunGuardsAndResolvers = this.shouldRunGuardsAndResolvers(
+          curr, future, future._routeConfig !.runGuardsAndResolvers);
+      if (shouldRunGuardsAndResolvers) {
         this.canActivateChecks.push(new CanActivate(futurePath));
-        this.canDeactivateChecks.push(new CanDeactivate(outlet.component, curr));
       } else {
         // we need to set the data
         future.data = curr.data;
@@ -839,32 +852,37 @@ export class PreActivation {
       // If we have a component, we need to go through an outlet.
       if (future.component) {
         this.traverseChildRoutes(
-            futureNode, currNode, outlet ? outlet.outletMap : null, futurePath);
+            futureNode, currNode, context ? context.children : null, futurePath);
 
         // if we have a componentless route, we recurse but keep the same outlet map.
       } else {
-        this.traverseChildRoutes(futureNode, currNode, parentOutletMap, futurePath);
+        this.traverseChildRoutes(futureNode, currNode, parentContexts, futurePath);
+      }
+
+      if (shouldRunGuardsAndResolvers) {
+        const outlet = context !.outlet !;
+        this.canDeactivateChecks.push(new CanDeactivate(outlet.component, curr));
       }
     } else {
       if (curr) {
-        this.deactiveRouteAndItsChildren(currNode, outlet);
+        this.deactivateRouteAndItsChildren(currNode, context);
       }
 
       this.canActivateChecks.push(new CanActivate(futurePath));
       // If we have a component, we need to go through an outlet.
       if (future.component) {
-        this.traverseChildRoutes(futureNode, null, outlet ? outlet.outletMap : null, futurePath);
+        this.traverseChildRoutes(futureNode, null, context ? context.children : null, futurePath);
 
         // if we have a componentless route, we recurse but keep the same outlet map.
       } else {
-        this.traverseChildRoutes(futureNode, null, parentOutletMap, futurePath);
+        this.traverseChildRoutes(futureNode, null, parentContexts, futurePath);
       }
     }
   }
 
   private shouldRunGuardsAndResolvers(
       curr: ActivatedRouteSnapshot, future: ActivatedRouteSnapshot,
-      mode: RunGuardsAndResolvers): boolean {
+      mode: RunGuardsAndResolvers|undefined): boolean {
     switch (mode) {
       case 'always':
         return true;
@@ -879,25 +897,25 @@ export class PreActivation {
     }
   }
 
-  private deactiveRouteAndItsChildren(
-      route: TreeNode<ActivatedRouteSnapshot>, outlet: RouterOutlet): void {
-    const prevChildren = nodeChildrenAsMap(route);
+  private deactivateRouteAndItsChildren(
+      route: TreeNode<ActivatedRouteSnapshot>, context: OutletContext|null): void {
+    const children = nodeChildrenAsMap(route);
     const r = route.value;
 
-    forEach(prevChildren, (v: TreeNode<ActivatedRouteSnapshot>, k: string) => {
+    forEach(children, (node: TreeNode<ActivatedRouteSnapshot>, childName: string) => {
       if (!r.component) {
-        this.deactiveRouteAndItsChildren(v, outlet);
-      } else if (!!outlet) {
-        this.deactiveRouteAndItsChildren(v, outlet.outletMap._outlets[k]);
+        this.deactivateRouteAndItsChildren(node, context);
+      } else if (context) {
+        this.deactivateRouteAndItsChildren(node, context.children.getContext(childName));
       } else {
-        this.deactiveRouteAndItsChildren(v, null);
+        this.deactivateRouteAndItsChildren(node, null);
       }
     });
 
     if (!r.component) {
       this.canDeactivateChecks.push(new CanDeactivate(null, r));
-    } else if (outlet && outlet.isActivated) {
-      this.canDeactivateChecks.push(new CanDeactivate(outlet.component, r));
+    } else if (context && context.outlet && context.outlet.isActivated) {
+      this.canDeactivateChecks.push(new CanDeactivate(context.outlet.component, r));
     } else {
       this.canDeactivateChecks.push(new CanDeactivate(null, r));
     }
@@ -912,7 +930,7 @@ export class PreActivation {
 
   private runCanActivateChecks(): Observable<boolean> {
     const checks$ = from(this.canActivateChecks);
-    const runningChecks$ = mergeMap.call(
+    const runningChecks$ = concatMap.call(
         checks$, (check: CanActivate) => andObservables(from(
                      [this.runCanActivateChild(check.path), this.runCanActivate(check.route)])));
     return every.call(runningChecks$, (result: boolean) => result === true);
@@ -958,13 +976,14 @@ export class PreActivation {
   }
 
   private extractCanActivateChild(p: ActivatedRouteSnapshot):
-      {node: ActivatedRouteSnapshot, guards: any[]} {
+      {node: ActivatedRouteSnapshot, guards: any[]}|null {
     const canActivateChild = p._routeConfig ? p._routeConfig.canActivateChild : null;
     if (!canActivateChild || canActivateChild.length === 0) return null;
     return {node: p, guards: canActivateChild};
   }
 
-  private runCanDeactivate(component: Object, curr: ActivatedRouteSnapshot): Observable<boolean> {
+  private runCanDeactivate(component: Object|null, curr: ActivatedRouteSnapshot):
+      Observable<boolean> {
     const canDeactivate = curr && curr._routeConfig ? curr._routeConfig.canDeactivate : null;
     if (!canDeactivate || canDeactivate.length === 0) return of (true);
     const canDeactivate$ = mergeMap.call(from(canDeactivate), (c: any) => {
@@ -991,11 +1010,29 @@ export class PreActivation {
   }
 
   private resolveNode(resolve: ResolveData, future: ActivatedRouteSnapshot): Observable<any> {
-    return waitForMap(resolve, (k, v) => {
-      const resolver = this.getToken(v, future);
-      return resolver.resolve ? wrapIntoObservable(resolver.resolve(future, this.future)) :
-                                wrapIntoObservable(resolver(future, this.future));
+    const keys = Object.keys(resolve);
+    if (keys.length === 0) {
+      return of ({});
+    }
+    if (keys.length === 1) {
+      const key = keys[0];
+      return map.call(
+          this.getResolver(resolve[key], future), (value: any) => { return {[key]: value}; });
+    }
+    const data: {[k: string]: any} = {};
+    const runningResolvers$ = mergeMap.call(from(keys), (key: string) => {
+      return map.call(this.getResolver(resolve[key], future), (value: any) => {
+        data[key] = value;
+        return value;
+      });
     });
+    return map.call(last.call(runningResolvers$), () => data);
+  }
+
+  private getResolver(injectionToken: any, future: ActivatedRouteSnapshot): Observable<any> {
+    const resolver = this.getToken(injectionToken, future);
+    return resolver.resolve ? wrapIntoObservable(resolver.resolve(future, this.future)) :
+                              wrapIntoObservable(resolver(future, this.future));
   }
 
   private getToken(token: any, snapshot: ActivatedRouteSnapshot): any {
@@ -1010,155 +1047,162 @@ class ActivateRoutes {
       private routeReuseStrategy: RouteReuseStrategy, private futureState: RouterState,
       private currState: RouterState) {}
 
-  activate(parentOutletMap: RouterOutletMap): void {
+  activate(parentContexts: ChildrenOutletContexts): void {
     const futureRoot = this.futureState._root;
     const currRoot = this.currState ? this.currState._root : null;
 
-    this.deactivateChildRoutes(futureRoot, currRoot, parentOutletMap);
+    this.deactivateChildRoutes(futureRoot, currRoot, parentContexts);
     advanceActivatedRoute(this.futureState.root);
-    this.activateChildRoutes(futureRoot, currRoot, parentOutletMap);
+    this.activateChildRoutes(futureRoot, currRoot, parentContexts);
   }
 
+  // De-activate the child route that are not re-used for the future state
   private deactivateChildRoutes(
-      futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute>,
-      outletMap: RouterOutletMap): void {
-    const prevChildren: {[key: string]: any} = nodeChildrenAsMap(currNode);
-    futureNode.children.forEach(c => {
-      this.deactivateRoutes(c, prevChildren[c.value.outlet], outletMap);
-      delete prevChildren[c.value.outlet];
+      futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute>|null,
+      contexts: ChildrenOutletContexts): void {
+    const children: {[outletName: string]: TreeNode<ActivatedRoute>} = nodeChildrenAsMap(currNode);
+
+    // Recurse on the routes active in the future state to de-activate deeper children
+    futureNode.children.forEach(futureChild => {
+      const childOutletName = futureChild.value.outlet;
+      this.deactivateRoutes(futureChild, children[childOutletName], contexts);
+      delete children[childOutletName];
+    });
+
+    // De-activate the routes that will not be re-used
+    forEach(children, (v: TreeNode<ActivatedRoute>, childName: string) => {
+      this.deactivateRouteAndItsChildren(v, contexts);
     });
-    forEach(prevChildren, (v: any, k: string) => this.deactiveRouteAndItsChildren(v, outletMap));
   }
 
-  private activateChildRoutes(
+  private deactivateRoutes(
       futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute>,
-      outletMap: RouterOutletMap): void {
-    const prevChildren: {[key: string]: any} = nodeChildrenAsMap(currNode);
-    futureNode.children.forEach(
-        c => { this.activateRoutes(c, prevChildren[c.value.outlet], outletMap); });
-  }
-
-  deactivateRoutes(
-      futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute>,
-      parentOutletMap: RouterOutletMap): void {
+      parentContext: ChildrenOutletContexts): void {
     const future = futureNode.value;
     const curr = currNode ? currNode.value : null;
 
-    // reusing the node
     if (future === curr) {
-      // If we have a normal route, we need to go through an outlet.
+      // Reusing the node, check to see if the children need to be de-activated
       if (future.component) {
-        const outlet = getOutlet(parentOutletMap, future);
-        this.deactivateChildRoutes(futureNode, currNode, outlet.outletMap);
-
-        // if we have a componentless route, we recurse but keep the same outlet map.
+        // If we have a normal route, we need to go through an outlet.
+        const context = parentContext.getContext(future.outlet);
+        if (context) {
+          this.deactivateChildRoutes(futureNode, currNode, context.children);
+        }
       } else {
-        this.deactivateChildRoutes(futureNode, currNode, parentOutletMap);
+        // if we have a componentless route, we recurse but keep the same outlet map.
+        this.deactivateChildRoutes(futureNode, currNode, parentContext);
       }
     } else {
       if (curr) {
-        this.deactiveRouteAndItsChildren(currNode, parentOutletMap);
+        // Deactivate the current route which will not be re-used
+        this.deactivateRouteAndItsChildren(currNode, parentContext);
       }
     }
   }
 
-  activateRoutes(
+  private deactivateRouteAndItsChildren(
+      route: TreeNode<ActivatedRoute>, parentContexts: ChildrenOutletContexts): void {
+    if (this.routeReuseStrategy.shouldDetach(route.value.snapshot)) {
+      this.detachAndStoreRouteSubtree(route, parentContexts);
+    } else {
+      this.deactivateRouteAndOutlet(route, parentContexts);
+    }
+  }
+
+  private detachAndStoreRouteSubtree(
+      route: TreeNode<ActivatedRoute>, parentContexts: ChildrenOutletContexts): void {
+    const context = parentContexts.getContext(route.value.outlet);
+    if (context && context.outlet) {
+      const componentRef = context.outlet.detach();
+      const contexts = context.children.onOutletDeactivated();
+      this.routeReuseStrategy.store(route.value.snapshot, {componentRef, route, contexts});
+    }
+  }
+
+  private deactivateRouteAndOutlet(
+      route: TreeNode<ActivatedRoute>, parentContexts: ChildrenOutletContexts): void {
+    const context = parentContexts.getContext(route.value.outlet);
+
+    if (context) {
+      const children: {[outletName: string]: any} = nodeChildrenAsMap(route);
+      const contexts = route.value.component ? context.children : parentContexts;
+
+      forEach(children, (v: any, k: string) => {this.deactivateRouteAndItsChildren(v, contexts)});
+
+      if (context.outlet) {
+        // Destroy the component
+        context.outlet.deactivate();
+        // Destroy the contexts for all the outlets that were in the component
+        context.children.onOutletDeactivated();
+      }
+    }
+  }
+
+  private activateChildRoutes(
+      futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute>|null,
+      contexts: ChildrenOutletContexts): void {
+    const children: {[outlet: string]: any} = nodeChildrenAsMap(currNode);
+    futureNode.children.forEach(
+        c => { this.activateRoutes(c, children[c.value.outlet], contexts); });
+  }
+
+  private activateRoutes(
       futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute>,
-      parentOutletMap: RouterOutletMap): void {
+      parentContexts: ChildrenOutletContexts): void {
     const future = futureNode.value;
     const curr = currNode ? currNode.value : null;
 
+    advanceActivatedRoute(future);
+
     // reusing the node
     if (future === curr) {
-      // advance the route to push the parameters
-      advanceActivatedRoute(future);
-
-      // If we have a normal route, we need to go through an outlet.
       if (future.component) {
-        const outlet = getOutlet(parentOutletMap, future);
-        this.activateChildRoutes(futureNode, currNode, outlet.outletMap);
-
-        // if we have a componentless route, we recurse but keep the same outlet map.
+        // If we have a normal route, we need to go through an outlet.
+        const context = parentContexts.getOrCreateContext(future.outlet);
+        this.activateChildRoutes(futureNode, currNode, context.children);
       } else {
-        this.activateChildRoutes(futureNode, currNode, parentOutletMap);
+        // if we have a componentless route, we recurse but keep the same outlet map.
+        this.activateChildRoutes(futureNode, currNode, parentContexts);
       }
     } else {
-      // if we have a normal route, we need to advance the route
-      // and place the component into the outlet. After that recurse.
       if (future.component) {
-        advanceActivatedRoute(future);
-        const outlet = getOutlet(parentOutletMap, futureNode.value);
+        // if we have a normal route, we need to place the component into the outlet and recurse.
+        const context = parentContexts.getOrCreateContext(future.outlet);
 
         if (this.routeReuseStrategy.shouldAttach(future.snapshot)) {
           const stored =
               (<DetachedRouteHandleInternal>this.routeReuseStrategy.retrieve(future.snapshot));
           this.routeReuseStrategy.store(future.snapshot, null);
-          outlet.attach(stored.componentRef, stored.route.value);
+          context.children.onOutletReAttached(stored.contexts);
+          context.attachRef = stored.componentRef;
+          context.route = stored.route.value;
+          if (context.outlet) {
+            // Attach right away when the outlet has already been instantiated
+            // Otherwise attach from `RouterOutlet.ngOnInit` when it is instantiated
+            context.outlet.attach(stored.componentRef, stored.route.value);
+          }
           advanceActivatedRouteNodeAndItsChildren(stored.route);
         } else {
-          const outletMap = new RouterOutletMap();
-          this.placeComponentIntoOutlet(outletMap, future, outlet);
-          this.activateChildRoutes(futureNode, null, outletMap);
+          const config = parentLoadedConfig(future.snapshot);
+          const cmpFactoryResolver = config ? config.module.componentFactoryResolver : null;
+
+          context.route = future;
+          context.resolver = cmpFactoryResolver;
+          if (context.outlet) {
+            // Activate the outlet when it has already been instantiated
+            // Otherwise it will get activated from its `ngOnInit` when instantiated
+            context.outlet.activateWith(future, cmpFactoryResolver);
+          }
+
+          this.activateChildRoutes(futureNode, null, context.children);
         }
-
+      } else {
         // if we have a componentless route, we recurse but keep the same outlet map.
-      } else {
-        advanceActivatedRoute(future);
-        this.activateChildRoutes(futureNode, null, parentOutletMap);
+        this.activateChildRoutes(futureNode, null, parentContexts);
       }
     }
   }
-
-  private placeComponentIntoOutlet(
-      outletMap: RouterOutletMap, future: ActivatedRoute, outlet: RouterOutlet): void {
-    const config = parentLoadedConfig(future.snapshot);
-    const cmpFactoryResolver = config ? config.module.componentFactoryResolver : null;
-
-    outlet.activateWith(future, cmpFactoryResolver, outletMap);
-  }
-
-  private deactiveRouteAndItsChildren(
-      route: TreeNode<ActivatedRoute>, parentOutletMap: RouterOutletMap): void {
-    if (this.routeReuseStrategy.shouldDetach(route.value.snapshot)) {
-      this.detachAndStoreRouteSubtree(route, parentOutletMap);
-    } else {
-      this.deactiveRouteAndOutlet(route, parentOutletMap);
-    }
-  }
-
-  private detachAndStoreRouteSubtree(
-      route: TreeNode<ActivatedRoute>, parentOutletMap: RouterOutletMap): void {
-    const outlet = getOutlet(parentOutletMap, route.value);
-    const componentRef = outlet.detach();
-    this.routeReuseStrategy.store(route.value.snapshot, {componentRef, route});
-  }
-
-  private deactiveRouteAndOutlet(route: TreeNode<ActivatedRoute>, parentOutletMap: RouterOutletMap):
-      void {
-    const prevChildren: {[key: string]: any} = nodeChildrenAsMap(route);
-    let outlet: RouterOutlet = null;
-
-    // getOutlet throws when cannot find the right outlet,
-    // which can happen if an outlet was in an NgIf and was removed
-    try {
-      outlet = getOutlet(parentOutletMap, route.value);
-    } catch (e) {
-      return;
-    }
-    const childOutletMap = outlet.outletMap;
-
-    forEach(prevChildren, (v: any, k: string) => {
-      if (route.value.component) {
-        this.deactiveRouteAndItsChildren(v, childOutletMap);
-      } else {
-        this.deactiveRouteAndItsChildren(v, parentOutletMap);
-      }
-    });
-
-    if (outlet && outlet.isActivated) {
-      outlet.deactivate();
-    }
-  }
 }
 
 function advanceActivatedRouteNodeAndItsChildren(node: TreeNode<ActivatedRoute>): void {
@@ -1166,9 +1210,9 @@ function advanceActivatedRouteNodeAndItsChildren(node: TreeNode<ActivatedRoute>)
   node.children.forEach(advanceActivatedRouteNodeAndItsChildren);
 }
 
-function parentLoadedConfig(snapshot: ActivatedRouteSnapshot): LoadedRouterConfig {
+function parentLoadedConfig(snapshot: ActivatedRouteSnapshot): LoadedRouterConfig|null {
   for (let s = snapshot.parent; s; s = s.parent) {
-    const route: InternalRoute = s._routeConfig;
+    const route = s._routeConfig;
     if (route && route._loadedConfig) return route._loadedConfig;
     if (route && route.component) return null;
   }
@@ -1176,19 +1220,20 @@ function parentLoadedConfig(snapshot: ActivatedRouteSnapshot): LoadedRouterConfi
   return null;
 }
 
-function closestLoadedConfig(snapshot: ActivatedRouteSnapshot): LoadedRouterConfig {
+function closestLoadedConfig(snapshot: ActivatedRouteSnapshot): LoadedRouterConfig|null {
   if (!snapshot) return null;
 
   for (let s = snapshot.parent; s; s = s.parent) {
-    const route: InternalRoute = s._routeConfig;
+    const route = s._routeConfig;
     if (route && route._loadedConfig) return route._loadedConfig;
   }
 
   return null;
 }
 
-function nodeChildrenAsMap<T extends{outlet: string}>(node: TreeNode<T>) {
-  const map: {[key: string]: TreeNode<T>} = {};
+// Return the list of T indexed by outlet name
+function nodeChildrenAsMap<T extends{outlet: string}>(node: TreeNode<T>| null) {
+  const map: {[outlet: string]: TreeNode<T>} = {};
 
   if (node) {
     node.children.forEach(child => map[child.value.outlet] = child);
@@ -1197,19 +1242,6 @@ function nodeChildrenAsMap<T extends{outlet: string}>(node: TreeNode<T>) {
   return map;
 }
 
-function getOutlet(outletMap: RouterOutletMap, route: ActivatedRoute): RouterOutlet {
-  const outlet = outletMap._outlets[route.outlet];
-  if (!outlet) {
-    const componentName = (<any>route.component).name;
-    if (route.outlet === PRIMARY_OUTLET) {
-      throw new Error(`Cannot find primary outlet to load '${componentName}'`);
-    } else {
-      throw new Error(`Cannot find the outlet ${route.outlet} to load '${componentName}'`);
-    }
-  }
-  return outlet;
-}
-
 function validateCommands(commands: string[]): void {
   for (let i = 0; i < commands.length; i++) {
     const cmd = commands[i];
diff --git a/packages/router/src/router_config_loader.ts b/packages/router/src/router_config_loader.ts
index 943ea62111..08d28c777a 100644
--- a/packages/router/src/router_config_loader.ts
+++ b/packages/router/src/router_config_loader.ts
@@ -12,7 +12,7 @@ import {fromPromise} from 'rxjs/observable/fromPromise';
 import {of } from 'rxjs/observable/of';
 import {map} from 'rxjs/operator/map';
 import {mergeMap} from 'rxjs/operator/mergeMap';
-import {LoadChildren, Route} from './config';
+import {LoadChildren, LoadedRouterConfig, Route} from './config';
 import {flatten, wrapIntoObservable} from './utils/collection';
 
 /**
@@ -21,10 +21,6 @@ import {flatten, wrapIntoObservable} from './utils/collection';
  */
 export const ROUTES = new InjectionToken<Route[][]>('ROUTES');
 
-export class LoadedRouterConfig {
-  constructor(public routes: Route[], public module: NgModuleRef<any>) {}
-}
-
 export class RouterConfigLoader {
   constructor(
       private loader: NgModuleFactoryLoader, private compiler: Compiler,
@@ -36,7 +32,7 @@ export class RouterConfigLoader {
       this.onLoadStartListener(route);
     }
 
-    const moduleFactory$ = this.loadModuleFactory(route.loadChildren);
+    const moduleFactory$ = this.loadModuleFactory(route.loadChildren !);
 
     return map.call(moduleFactory$, (factory: NgModuleFactory<any>) => {
       if (this.onLoadEndListener) {
diff --git a/packages/router/src/router_module.ts b/packages/router/src/router_module.ts
index 4451ac013f..8ecec6aff7 100644
--- a/packages/router/src/router_module.ts
+++ b/packages/router/src/router_module.ts
@@ -19,7 +19,7 @@ import {RouterOutlet} from './directives/router_outlet';
 import {RouteReuseStrategy} from './route_reuse_strategy';
 import {ErrorHandler, Router} from './router';
 import {ROUTES} from './router_config_loader';
-import {RouterOutletMap} from './router_outlet_map';
+import {ChildrenOutletContexts} from './router_outlet_context';
 import {NoPreloading, PreloadAllModules, PreloadingStrategy, RouterPreloader} from './router_preloader';
 import {ActivatedRoute} from './router_state';
 import {UrlHandlingStrategy} from './url_handling_strategy';
@@ -51,12 +51,12 @@ export const ROUTER_PROVIDERS: Provider[] = [
     provide: Router,
     useFactory: setupRouter,
     deps: [
-      ApplicationRef, UrlSerializer, RouterOutletMap, Location, Injector, NgModuleFactoryLoader,
-      Compiler, ROUTES, ROUTER_CONFIGURATION, [UrlHandlingStrategy, new Optional()],
-      [RouteReuseStrategy, new Optional()]
+      ApplicationRef, UrlSerializer, ChildrenOutletContexts, Location, Injector,
+      NgModuleFactoryLoader, Compiler, ROUTES, ROUTER_CONFIGURATION,
+      [UrlHandlingStrategy, new Optional()], [RouteReuseStrategy, new Optional()]
     ]
   },
-  RouterOutletMap,
+  ChildrenOutletContexts,
   {provide: ActivatedRoute, useFactory: rootRoute, deps: [Router]},
   {provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader},
   RouterPreloader,
@@ -270,12 +270,12 @@ export interface ExtraOptions {
 }
 
 export function setupRouter(
-    ref: ApplicationRef, urlSerializer: UrlSerializer, outletMap: RouterOutletMap,
+    ref: ApplicationRef, urlSerializer: UrlSerializer, contexts: ChildrenOutletContexts,
     location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler,
     config: Route[][], opts: ExtraOptions = {}, urlHandlingStrategy?: UrlHandlingStrategy,
     routeReuseStrategy?: RouteReuseStrategy) {
   const router = new Router(
-      null, urlSerializer, outletMap, location, injector, loader, compiler, flatten(config));
+      null, urlSerializer, contexts, location, injector, loader, compiler, flatten(config));
 
   if (urlHandlingStrategy) {
     router.urlHandlingStrategy = urlHandlingStrategy;
@@ -327,7 +327,7 @@ export class RouterInitializer {
   appInitializer(): Promise<any> {
     const p: Promise<any> = this.injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
     return p.then(() => {
-      let resolve: Function = null;
+      let resolve: Function = null !;
       const res = new Promise(r => resolve = r);
       const router = this.injector.get(Router);
       const opts = this.injector.get(ROUTER_CONFIGURATION);
@@ -349,7 +349,7 @@ export class RouterInitializer {
 
             // subsequent navigations should not be delayed
           } else {
-            return of (null);
+            return of (null) as any;
           }
         };
         router.initialNavigation();
@@ -380,7 +380,7 @@ export class RouterInitializer {
 
     preloader.setUpPreloading();
     router.resetRootComponentType(ref.componentTypes[0]);
-    this.resultOfPreactivationDone.next(null);
+    this.resultOfPreactivationDone.next(null !);
     this.resultOfPreactivationDone.complete();
   }
 
diff --git a/packages/router/src/router_outlet_context.ts b/packages/router/src/router_outlet_context.ts
new file mode 100644
index 0000000000..7ceb1f7abb
--- /dev/null
+++ b/packages/router/src/router_outlet_context.ts
@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ComponentFactoryResolver, ComponentRef} from '@angular/core';
+
+import {RouterOutlet} from './directives/router_outlet';
+import {ActivatedRoute} from './router_state';
+
+
+/**
+ * Store contextual information about a {@link RouterOutlet}
+ *
+ * @stable
+ */
+export class OutletContext {
+  outlet: RouterOutlet|null = null;
+  route: ActivatedRoute|null = null;
+  resolver: ComponentFactoryResolver|null = null;
+  children = new ChildrenOutletContexts();
+  attachRef: ComponentRef<any>|null = null;
+}
+
+/**
+ * Store contextual information about the children (= nested) {@link RouterOutlet}
+ *
+ * @stable
+ */
+export class ChildrenOutletContexts {
+  // contexts for child outlets, by name.
+  private contexts = new Map<string, OutletContext>();
+
+  /** Called when a `RouterOutlet` directive is instantiated */
+  onChildOutletCreated(childName: string, outlet: RouterOutlet): void {
+    const context = this.getOrCreateContext(childName);
+    context.outlet = outlet;
+    this.contexts.set(childName, context);
+  }
+
+  /**
+   * Called when a `RouterOutlet` directive is destroyed.
+   * We need to keep the context as the outlet could be destroyed inside a NgIf and might be
+   * re-created later.
+   */
+  onChildOutletDestroyed(childName: string): void {
+    const context = this.getContext(childName);
+    if (context) {
+      context.outlet = null;
+    }
+  }
+
+  /**
+   * Called when the corresponding route is deactivated during navigation.
+   * Because the component get destroyed, all children outlet are destroyed.
+   */
+  onOutletDeactivated(): Map<string, OutletContext> {
+    const contexts = this.contexts;
+    this.contexts = new Map();
+    return contexts;
+  }
+
+  onOutletReAttached(contexts: Map<string, OutletContext>) { this.contexts = contexts; }
+
+  getOrCreateContext(childName: string): OutletContext {
+    let context = this.getContext(childName);
+
+    if (!context) {
+      context = new OutletContext();
+      this.contexts.set(childName, context);
+    }
+
+    return context;
+  }
+
+  getContext(childName: string): OutletContext|null { return this.contexts.get(childName) || null; }
+}
diff --git a/packages/router/src/router_outlet_map.ts b/packages/router/src/router_outlet_map.ts
deleted file mode 100644
index fb8e21c854..0000000000
--- a/packages/router/src/router_outlet_map.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {RouterOutlet} from './directives/router_outlet';
-
-/**
- * @whatItDoes Contains all the router outlets created in a component.
- *
- * @stable
- */
-export class RouterOutletMap {
-  /** @internal */
-  _outlets: {[name: string]: RouterOutlet} = {};
-
-  /**
-   * Adds an outlet to this map.
-   */
-  registerOutlet(name: string, outlet: RouterOutlet): void { this._outlets[name] = outlet; }
-
-  /**
-   * Removes an outlet from this map.
-   */
-  removeOutlet(name: string): void { this._outlets[name] = undefined; }
-}
diff --git a/packages/router/src/router_preloader.ts b/packages/router/src/router_preloader.ts
index c8ed0a2f0f..689861a5f3 100644
--- a/packages/router/src/router_preloader.ts
+++ b/packages/router/src/router_preloader.ts
@@ -6,7 +6,7 @@
 *found in the LICENSE file at https://angular.io/license
 */
 
-import {Compiler, Injectable, Injector, NgModuleFactoryLoader, NgModuleRef} from '@angular/core';
+import {Compiler, Injectable, Injector, NgModuleFactoryLoader, NgModuleRef, OnDestroy} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {Subscription} from 'rxjs/Subscription';
 import {from} from 'rxjs/observable/from';
@@ -16,8 +16,8 @@ import {concatMap} from 'rxjs/operator/concatMap';
 import {filter} from 'rxjs/operator/filter';
 import {mergeAll} from 'rxjs/operator/mergeAll';
 import {mergeMap} from 'rxjs/operator/mergeMap';
-import {InternalRoute, Route, Routes} from './config';
-import {NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart} from './events';
+import {LoadedRouterConfig, Route, Routes} from './config';
+import {Event, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart} from './events';
 import {Router} from './router';
 import {RouterConfigLoader} from './router_config_loader';
 
@@ -73,7 +73,7 @@ export class NoPreloading implements PreloadingStrategy {
  * @stable
  */
 @Injectable()
-export class RouterPreloader {
+export class RouterPreloader implements OnDestroy {
   private loader: RouterConfigLoader;
   private subscription: Subscription;
 
@@ -87,8 +87,8 @@ export class RouterPreloader {
   };
 
   setUpPreloading(): void {
-    const navigations = filter.call(this.router.events, (e: any) => e instanceof NavigationEnd);
-    this.subscription = concatMap.call(navigations, () => this.preload()).subscribe(() => {});
+    const navigations$ = filter.call(this.router.events, (e: Event) => e instanceof NavigationEnd);
+    this.subscription = concatMap.call(navigations$, () => this.preload()).subscribe(() => {});
   }
 
   preload(): Observable<any> {
@@ -96,12 +96,14 @@ export class RouterPreloader {
     return this.processRoutes(ngModule, this.router.config);
   }
 
+  // TODO(jasonaden): This class relies on code external to the class to call setUpPreloading. If
+  // this hasn't been done, ngOnDestroy will fail as this.subscription will be undefined. This
+  // should be refactored.
   ngOnDestroy(): void { this.subscription.unsubscribe(); }
 
   private processRoutes(ngModule: NgModuleRef<any>, routes: Routes): Observable<void> {
     const res: Observable<any>[] = [];
-    for (const r of routes) {
-      const route: InternalRoute = r;
+    for (const route of routes) {
       // we already have the config loaded, just recurse
       if (route.loadChildren && !route.canLoad && route._loadedConfig) {
         const childConfig = route._loadedConfig;
@@ -119,10 +121,10 @@ export class RouterPreloader {
     return mergeAll.call(from(res));
   }
 
-  private preloadConfig(ngModule: NgModuleRef<any>, route: InternalRoute): Observable<void> {
+  private preloadConfig(ngModule: NgModuleRef<any>, route: Route): Observable<void> {
     return this.preloadingStrategy.preload(route, () => {
-      const loaded = this.loader.load(ngModule.injector, route);
-      return mergeMap.call(loaded, (config: any): any => {
+      const loaded$ = this.loader.load(ngModule.injector, route);
+      return mergeMap.call(loaded$, (config: LoadedRouterConfig) => {
         route._loadedConfig = config;
         return this.processRoutes(config.module, config.routes);
       });
diff --git a/packages/router/src/router_state.ts b/packages/router/src/router_state.ts
index d37a321111..8008d68e1a 100644
--- a/packages/router/src/router_state.ts
+++ b/packages/router/src/router_state.ts
@@ -51,13 +51,13 @@ export class RouterState extends Tree<ActivatedRoute> {
       /** The current snapshot of the router state */
       public snapshot: RouterStateSnapshot) {
     super(root);
-    setRouterStateSnapshot<RouterState, ActivatedRoute>(this, root);
+    setRouterState(<RouterState>this, root);
   }
 
   toString(): string { return this.snapshot.toString(); }
 }
 
-export function createEmptyState(urlTree: UrlTree, rootComponent: Type<any>): RouterState {
+export function createEmptyState(urlTree: UrlTree, rootComponent: Type<any>| null): RouterState {
   const snapshot = createEmptyStateSnapshot(urlTree, rootComponent);
   const emptyUrl = new BehaviorSubject([new UrlSegment('', {})]);
   const emptyParams = new BehaviorSubject({});
@@ -72,7 +72,7 @@ export function createEmptyState(urlTree: UrlTree, rootComponent: Type<any>): Ro
 }
 
 export function createEmptyStateSnapshot(
-    urlTree: UrlTree, rootComponent: Type<any>): RouterStateSnapshot {
+    urlTree: UrlTree, rootComponent: Type<any>| null): RouterStateSnapshot {
   const emptyParams = {};
   const emptyData = {};
   const emptyQueryParams = {};
@@ -132,21 +132,21 @@ export class ActivatedRoute {
       public outlet: string,
       /** The component of the route. It's a constant */
       // TODO(vsavkin): remove |string
-      public component: Type<any>|string, futureSnapshot: ActivatedRouteSnapshot) {
+      public component: Type<any>|string|null, futureSnapshot: ActivatedRouteSnapshot) {
     this._futureSnapshot = futureSnapshot;
   }
 
   /** The configuration used to match this route */
-  get routeConfig(): Route { return this._futureSnapshot.routeConfig; }
+  get routeConfig(): Route|null { return this._futureSnapshot.routeConfig; }
 
   /** The root of the router state */
   get root(): ActivatedRoute { return this._routerState.root; }
 
   /** The parent of this route in the router state tree */
-  get parent(): ActivatedRoute { return this._routerState.parent(this); }
+  get parent(): ActivatedRoute|null { return this._routerState.parent(this); }
 
   /** The first child of this route in the router state tree */
-  get firstChild(): ActivatedRoute { return this._routerState.firstChild(this); }
+  get firstChild(): ActivatedRoute|null { return this._routerState.firstChild(this); }
 
   /** The children of this route in the router state tree */
   get children(): ActivatedRoute[] { return this._routerState.children(this); }
@@ -234,7 +234,7 @@ export function inheritedParamsDataResolve(route: ActivatedRouteSnapshot): Inher
  */
 export class ActivatedRouteSnapshot {
   /** @internal **/
-  _routeConfig: Route;
+  _routeConfig: Route|null;
   /** @internal **/
   _urlSegment: UrlSegmentGroup;
   /** @internal */
@@ -265,7 +265,7 @@ export class ActivatedRouteSnapshot {
       /** The outlet name of the route */
       public outlet: string,
       /** The component of the route */
-      public component: Type<any>|string, routeConfig: Route, urlSegment: UrlSegmentGroup,
+      public component: Type<any>|string|null, routeConfig: Route|null, urlSegment: UrlSegmentGroup,
       lastPathIndex: number, resolve: ResolveData) {
     this._routeConfig = routeConfig;
     this._urlSegment = urlSegment;
@@ -274,16 +274,16 @@ export class ActivatedRouteSnapshot {
   }
 
   /** The configuration used to match this route */
-  get routeConfig(): Route { return this._routeConfig; }
+  get routeConfig(): Route|null { return this._routeConfig; }
 
   /** The root of the router state */
   get root(): ActivatedRouteSnapshot { return this._routerState.root; }
 
   /** The parent of this route in the router state tree */
-  get parent(): ActivatedRouteSnapshot { return this._routerState.parent(this); }
+  get parent(): ActivatedRouteSnapshot|null { return this._routerState.parent(this); }
 
   /** The first child of this route in the router state tree */
-  get firstChild(): ActivatedRouteSnapshot { return this._routerState.firstChild(this); }
+  get firstChild(): ActivatedRouteSnapshot|null { return this._routerState.firstChild(this); }
 
   /** The children of this route in the router state tree */
   get children(): ActivatedRouteSnapshot[] { return this._routerState.children(this); }
@@ -343,15 +343,15 @@ export class RouterStateSnapshot extends Tree<ActivatedRouteSnapshot> {
       /** The url from which this snapshot was created */
       public url: string, root: TreeNode<ActivatedRouteSnapshot>) {
     super(root);
-    setRouterStateSnapshot<RouterStateSnapshot, ActivatedRouteSnapshot>(this, root);
+    setRouterState(<RouterStateSnapshot>this, root);
   }
 
   toString(): string { return serializeNode(this._root); }
 }
 
-function setRouterStateSnapshot<U, T extends{_routerState: U}>(state: U, node: TreeNode<T>): void {
+function setRouterState<U, T extends{_routerState: U}>(state: U, node: TreeNode<T>): void {
   node.value._routerState = state;
-  node.children.forEach(c => setRouterStateSnapshot(state, c));
+  node.children.forEach(c => setRouterState(state, c));
 }
 
 function serializeNode(node: TreeNode<ActivatedRouteSnapshot>): string {
@@ -367,21 +367,22 @@ function serializeNode(node: TreeNode<ActivatedRouteSnapshot>): string {
 export function advanceActivatedRoute(route: ActivatedRoute): void {
   if (route.snapshot) {
     const currentSnapshot = route.snapshot;
-    route.snapshot = route._futureSnapshot;
-    if (!shallowEqual(currentSnapshot.queryParams, route._futureSnapshot.queryParams)) {
-      (<any>route.queryParams).next(route._futureSnapshot.queryParams);
+    const nextSnapshot = route._futureSnapshot;
+    route.snapshot = nextSnapshot;
+    if (!shallowEqual(currentSnapshot.queryParams, nextSnapshot.queryParams)) {
+      (<any>route.queryParams).next(nextSnapshot.queryParams);
     }
-    if (currentSnapshot.fragment !== route._futureSnapshot.fragment) {
-      (<any>route.fragment).next(route._futureSnapshot.fragment);
+    if (currentSnapshot.fragment !== nextSnapshot.fragment) {
+      (<any>route.fragment).next(nextSnapshot.fragment);
     }
-    if (!shallowEqual(currentSnapshot.params, route._futureSnapshot.params)) {
-      (<any>route.params).next(route._futureSnapshot.params);
+    if (!shallowEqual(currentSnapshot.params, nextSnapshot.params)) {
+      (<any>route.params).next(nextSnapshot.params);
     }
-    if (!shallowEqualArrays(currentSnapshot.url, route._futureSnapshot.url)) {
-      (<any>route.url).next(route._futureSnapshot.url);
+    if (!shallowEqualArrays(currentSnapshot.url, nextSnapshot.url)) {
+      (<any>route.url).next(nextSnapshot.url);
     }
-    if (!shallowEqual(currentSnapshot.data, route._futureSnapshot.data)) {
-      (<any>route.data).next(route._futureSnapshot.data);
+    if (!shallowEqual(currentSnapshot.data, nextSnapshot.data)) {
+      (<any>route.data).next(nextSnapshot.data);
     }
   } else {
     route.snapshot = route._futureSnapshot;
@@ -398,5 +399,5 @@ export function equalParamsAndUrlSegments(
   const parentsMismatch = !a.parent !== !b.parent;
 
   return equalUrlParams && !parentsMismatch &&
-      (!a.parent || equalParamsAndUrlSegments(a.parent, b.parent));
-}
+      (!a.parent || equalParamsAndUrlSegments(a.parent, b.parent !));
+}
\ No newline at end of file
diff --git a/packages/router/src/shared.ts b/packages/router/src/shared.ts
index d9897c9f6f..56814d5edd 100644
--- a/packages/router/src/shared.ts
+++ b/packages/router/src/shared.ts
@@ -111,7 +111,7 @@ export function isNavigationCancelingError(error: Error) {
 // Matches the route configuration (`route`) against the actual URL (`segments`).
 export function defaultUrlMatcher(
     segments: UrlSegment[], segmentGroup: UrlSegmentGroup, route: Route): UrlMatchResult|null {
-  const parts = route.path.split('/');
+  const parts = route.path !.split('/');
 
   if (parts.length > segments.length) {
     // The actual URL is shorter than the config, no match
diff --git a/packages/router/src/url_tree.ts b/packages/router/src/url_tree.ts
index 600f6bbb30..63c3a7ea01 100644
--- a/packages/router/src/url_tree.ts
+++ b/packages/router/src/url_tree.ts
@@ -113,7 +113,7 @@ export class UrlTree {
       /** The query params of the URL */
       public queryParams: {[key: string]: string},
       /** The fragment of the URL */
-      public fragment: string) {}
+      public fragment: string|null) {}
 
   get queryParamMap(): ParamMap {
     if (!this._queryParamMap) {
@@ -139,7 +139,7 @@ export class UrlSegmentGroup {
   /** @internal */
   _segmentIndexShift: number;
   /** The parent node in the url tree */
-  parent: UrlSegmentGroup = null;
+  parent: UrlSegmentGroup|null = null;
 
   constructor(
       /** The URL segments of this group. See {@link UrlSegment} for more information */
@@ -149,7 +149,7 @@ export class UrlSegmentGroup {
     forEach(children, (v: any, k: any) => v.parent = this);
   }
 
-  /** Wether the segment has child segments */
+  /** Whether the segment has child segments */
   hasChildren(): boolean { return this.numberOfChildren > 0; }
 
   /** Number of child segments */
@@ -280,7 +280,7 @@ export class DefaultUrlSerializer implements UrlSerializer {
   serialize(tree: UrlTree): string {
     const segment = `/${serializeSegment(tree.root, true)}`;
     const query = serializeQueryParams(tree.queryParams);
-    const fragment = typeof tree.fragment === `string` ? `#${encodeURI(tree.fragment)}` : '';
+    const fragment = typeof tree.fragment === `string` ? `#${encodeURI(tree.fragment !)}` : '';
 
     return `${segment}${query}${fragment}`;
   }
@@ -325,8 +325,24 @@ function serializeSegment(segment: UrlSegmentGroup, root: boolean): string {
   }
 }
 
+/**
+ * This method is intended for encoding *key* or *value* parts of query component. We need a custom
+ * method because encodeURIComponent is too aggressive and encodes stuff that doesn't have to be
+ * encoded per http://tools.ietf.org/html/rfc3986:
+ *    query         = *( pchar / "/" / "?" )
+ *    pchar         = unreserved / pct-encoded / sub-delims / ":" / "@"
+ *    unreserved    = ALPHA / DIGIT / "-" / "." / "_" / "~"
+ *    pct-encoded   = "%" HEXDIG HEXDIG
+ *    sub-delims    = "!" / "$" / "&" / "'" / "(" / ")"
+ *                     / "*" / "+" / "," / ";" / "="
+ */
 export function encode(s: string): string {
-  return encodeURIComponent(s);
+  return encodeURIComponent(s)
+      .replace(/%40/g, '@')
+      .replace(/%3A/gi, ':')
+      .replace(/%24/g, '$')
+      .replace(/%2C/gi, ',')
+      .replace(/%3B/gi, ';');
 }
 
 export function decode(s: string): string {
@@ -397,7 +413,9 @@ class UrlParser {
     return params;
   }
 
-  parseFragment(): string { return this.consumeOptional('#') ? decodeURI(this.remaining) : null; }
+  parseFragment(): string|null {
+    return this.consumeOptional('#') ? decodeURI(this.remaining) : null;
+  }
 
   private parseChildren(): {[outlet: string]: UrlSegmentGroup} {
     if (this.remaining === '') {
@@ -521,7 +539,7 @@ class UrlParser {
         throw new Error(`Cannot parse url '${this.url}'`);
       }
 
-      let outletName: string;
+      let outletName: string = undefined !;
       if (path.indexOf(':') > -1) {
         outletName = path.substr(0, path.indexOf(':'));
         this.capture(outletName);
diff --git a/packages/router/src/utils/collection.ts b/packages/router/src/utils/collection.ts
index fcc3fb58d0..36ffcca7d8 100644
--- a/packages/router/src/utils/collection.ts
+++ b/packages/router/src/utils/collection.ts
@@ -45,7 +45,7 @@ export function flatten<T>(arr: T[][]): T[] {
   return Array.prototype.concat.apply([], arr);
 }
 
-export function last<T>(a: T[]): T {
+export function last<T>(a: T[]): T|null {
   return a.length > 0 ? a[a.length - 1] : null;
 }
 
@@ -97,7 +97,10 @@ export function wrapIntoObservable<T>(value: T | NgModuleFactory<T>| Promise<T>|
   }
 
   if (isPromise(value)) {
-    return fromPromise(value);
+    // Use `Promise.resolve()` to wrap promise-like instances.
+    // Required ie when a Resolver returns a AngularJS `$q` promise to correctly trigger the
+    // change detection.
+    return fromPromise(Promise.resolve(value));
   }
 
   return of (value);
diff --git a/packages/router/src/utils/tree.ts b/packages/router/src/utils/tree.ts
index 76a511a4ce..bcb6037e62 100644
--- a/packages/router/src/utils/tree.ts
+++ b/packages/router/src/utils/tree.ts
@@ -17,7 +17,7 @@ export class Tree<T> {
   /**
    * @internal
    */
-  parent(t: T): T {
+  parent(t: T): T|null {
     const p = this.pathFromRoot(t);
     return p.length > 1 ? p[p.length - 2] : null;
   }
@@ -33,7 +33,7 @@ export class Tree<T> {
   /**
    * @internal
    */
-  firstChild(t: T): T {
+  firstChild(t: T): T|null {
     const n = findNode(t, this._root);
     return n && n.children.length > 0 ? n.children[0].value : null;
   }
@@ -42,7 +42,7 @@ export class Tree<T> {
    * @internal
    */
   siblings(t: T): T[] {
-    const p = findPath(t, this._root, []);
+    const p = findPath(t, this._root);
     if (p.length < 2) return [];
 
     const c = p[p.length - 2].children.map(c => c.value);
@@ -52,26 +52,32 @@ export class Tree<T> {
   /**
    * @internal
    */
-  pathFromRoot(t: T): T[] { return findPath(t, this._root, []).map(s => s.value); }
+  pathFromRoot(t: T): T[] { return findPath(t, this._root).map(s => s.value); }
 }
 
-function findNode<T>(expected: T, c: TreeNode<T>): TreeNode<T> {
-  if (expected === c.value) return c;
-  for (const cc of c.children) {
-    const r = findNode(expected, cc);
-    if (r) return r;
+
+// DFS for the node matching the value
+function findNode<T>(value: T, node: TreeNode<T>): TreeNode<T>|null {
+  if (value === node.value) return node;
+
+  for (const child of node.children) {
+    const node = findNode(value, child);
+    if (node) return node;
   }
+
   return null;
 }
 
-function findPath<T>(expected: T, c: TreeNode<T>, collected: TreeNode<T>[]): TreeNode<T>[] {
-  collected.push(c);
-  if (expected === c.value) return collected;
+// Return the path to the node with the given value using DFS
+function findPath<T>(value: T, node: TreeNode<T>): TreeNode<T>[] {
+  if (value === node.value) return [node];
 
-  for (const cc of c.children) {
-    const cloned = collected.slice(0);
-    const r = findPath(expected, cc, cloned);
-    if (r.length > 0) return r;
+  for (const child of node.children) {
+    const path = findPath(value, child);
+    if (path.length) {
+      path.unshift(node);
+      return path;
+    }
   }
 
   return [];
diff --git a/packages/router/src/version.ts b/packages/router/src/version.ts
index 82903b6504..19db5be5a5 100644
--- a/packages/router/src/version.ts
+++ b/packages/router/src/version.ts
@@ -16,4 +16,4 @@ import {Version} from '@angular/core';
 /**
  * @stable
  */
-export const VERSION = new Version('0.0.0-ROUTERPLACEHOLDER');
+export const VERSION = new Version('0.0.0-PLACEHOLDER');
diff --git a/packages/router/test/apply_redirects.spec.ts b/packages/router/test/apply_redirects.spec.ts
index 4212f203f8..82ca451824 100644
--- a/packages/router/test/apply_redirects.spec.ts
+++ b/packages/router/test/apply_redirects.spec.ts
@@ -12,8 +12,7 @@ import {Observable} from 'rxjs/Observable';
 import {of } from 'rxjs/observable/of';
 
 import {applyRedirects} from '../src/apply_redirects';
-import {Routes} from '../src/config';
-import {LoadedRouterConfig} from '../src/router_config_loader';
+import {LoadedRouterConfig, Routes} from '../src/config';
 import {DefaultUrlSerializer, UrlSegmentGroup, UrlTree, equalSegments} from '../src/url_tree';
 
 describe('applyRedirects', () => {
@@ -33,13 +32,24 @@ describe('applyRedirects', () => {
             ],
           },
         ],
-        '/a/b', (t: UrlTree) => { compareTrees(t, tree('/a/b')); });
+        '/a/b', (t: UrlTree) => { expectTreeToBe(t, '/a/b'); });
   });
 
   it('should add new segments when needed', () => {
     checkRedirect(
         [{path: 'a/b', redirectTo: 'a/b/c'}, {path: '**', component: ComponentC}], '/a/b',
-        (t: UrlTree) => { compareTrees(t, tree('/a/b/c')); });
+        (t: UrlTree) => { expectTreeToBe(t, '/a/b/c'); });
+  });
+
+  it('should support redirecting with to an URL with query parameters', () => {
+    const config: Routes = [
+      {path: 'single_value', redirectTo: '/dst?k=v1'},
+      {path: 'multiple_values', redirectTo: '/dst?k=v1&k=v2'},
+      {path: '**', component: ComponentA},
+    ];
+
+    checkRedirect(config, 'single_value', (t: UrlTree) => expectTreeToBe(t, '/dst?k=v1'));
+    checkRedirect(config, 'multiple_values', (t: UrlTree) => expectTreeToBe(t, '/dst?k=v1&k=v2'));
   });
 
   it('should handle positional parameters', () => {
@@ -48,11 +58,11 @@ describe('applyRedirects', () => {
           {path: 'a/:aid/b/:bid', redirectTo: 'newa/:aid/newb/:bid'},
           {path: '**', component: ComponentC}
         ],
-        '/a/1/b/2', (t: UrlTree) => { compareTrees(t, tree('/newa/1/newb/2')); });
+        '/a/1/b/2', (t: UrlTree) => { expectTreeToBe(t, '/newa/1/newb/2'); });
   });
 
   it('should throw when cannot handle a positional parameter', () => {
-    applyRedirects(testModule.injector, null, serializer, tree('/a/1'), [
+    applyRedirects(testModule.injector, null !, serializer, tree('/a/1'), [
       {path: 'a/:id', redirectTo: 'a/:other'}
     ]).subscribe(() => {}, (e) => {
       expect(e.message).toEqual('Cannot redirect to \'a/:other\'. Cannot find \':other\'.');
@@ -62,7 +72,7 @@ describe('applyRedirects', () => {
   it('should pass matrix parameters', () => {
     checkRedirect(
         [{path: 'a/:id', redirectTo: 'd/a/:id/e'}, {path: '**', component: ComponentC}],
-        '/a;p1=1/1;p2=2', (t: UrlTree) => { compareTrees(t, tree('/d/a;p1=1/1;p2=2/e')); });
+        '/a;p1=1/1;p2=2', (t: UrlTree) => { expectTreeToBe(t, '/d/a;p1=1/1;p2=2/e'); });
   });
 
   it('should handle preserve secondary routes', () => {
@@ -71,7 +81,7 @@ describe('applyRedirects', () => {
           {path: 'a/:id', redirectTo: 'd/a/:id/e'},
           {path: 'c/d', component: ComponentA, outlet: 'aux'}, {path: '**', component: ComponentC}
         ],
-        '/a/1(aux:c/d)', (t: UrlTree) => { compareTrees(t, tree('/d/a/1/e(aux:c/d)')); });
+        '/a/1(aux:c/d)', (t: UrlTree) => { expectTreeToBe(t, '/d/a/1/e(aux:c/d)'); });
   });
 
   it('should redirect secondary routes', () => {
@@ -81,7 +91,7 @@ describe('applyRedirects', () => {
           {path: 'c/d', redirectTo: 'f/c/d/e', outlet: 'aux'},
           {path: '**', component: ComponentC, outlet: 'aux'}
         ],
-        '/a/1(aux:c/d)', (t: UrlTree) => { compareTrees(t, tree('/a/1(aux:f/c/d/e)')); });
+        '/a/1(aux:c/d)', (t: UrlTree) => { expectTreeToBe(t, '/a/1(aux:f/c/d/e)'); });
   });
 
   it('should use the configuration of the route redirected to', () => {
@@ -96,7 +106,7 @@ describe('applyRedirects', () => {
           },
           {path: 'c', redirectTo: 'a'}
         ],
-        'c/b', (t: UrlTree) => { compareTrees(t, tree('a/b')); });
+        'c/b', (t: UrlTree) => { expectTreeToBe(t, 'a/b'); });
   });
 
   it('should support redirects with both main and aux', () => {
@@ -110,7 +120,7 @@ describe('applyRedirects', () => {
             {path: 'b', redirectTo: 'cc', outlet: 'aux'}
           ]
         }],
-        'a/(b//aux:b)', (t: UrlTree) => { compareTrees(t, tree('a/(bb//aux:cc)')); });
+        'a/(b//aux:b)', (t: UrlTree) => { expectTreeToBe(t, 'a/(bb//aux:cc)'); });
   });
 
   it('should support redirects with both main and aux (with a nested redirect)', () => {
@@ -129,7 +139,7 @@ describe('applyRedirects', () => {
             {path: 'b', redirectTo: 'cc/d', outlet: 'aux'}
           ]
         }],
-        'a/(b//aux:b)', (t: UrlTree) => { compareTrees(t, tree('a/(bb//aux:cc/dd)')); });
+        'a/(b//aux:b)', (t: UrlTree) => { expectTreeToBe(t, 'a/(bb//aux:cc/dd)'); });
   });
 
   it('should redirect wild cards', () => {
@@ -138,7 +148,7 @@ describe('applyRedirects', () => {
           {path: '404', component: ComponentA},
           {path: '**', redirectTo: '/404'},
         ],
-        '/a/1(aux:c/d)', (t: UrlTree) => { compareTrees(t, tree('/404')); });
+        '/a/1(aux:c/d)', (t: UrlTree) => { expectTreeToBe(t, '/404'); });
   });
 
   it('should support absolute redirects', () => {
@@ -151,7 +161,7 @@ describe('applyRedirects', () => {
           },
           {path: '**', component: ComponentC}
         ],
-        '/a/b/1?b=2', (t: UrlTree) => { compareTrees(t, tree('/absolute/1?a=1&b=2#f1')); });
+        '/a/b/1?b=2', (t: UrlTree) => { expectTreeToBe(t, '/absolute/1?a=1&b=2#f1'); });
   });
 
   describe('lazy loading', () => {
@@ -163,12 +173,12 @@ describe('applyRedirects', () => {
           return of (loadedConfig);
         }
       };
-      const config = [{path: 'a', component: ComponentA, loadChildren: 'children'}];
+      const config: Routes = [{path: 'a', component: ComponentA, loadChildren: 'children'}];
 
       applyRedirects(testModule.injector, <any>loader, serializer, tree('a/b'), config)
           .forEach(r => {
-            compareTrees(r, tree('/a/b'));
-            expect((<any>config[0])._loadedConfig).toBe(loadedConfig);
+            expectTreeToBe(r, '/a/b');
+            expect(config[0]._loadedConfig).toBe(loadedConfig);
           });
     });
 
@@ -199,7 +209,7 @@ describe('applyRedirects', () => {
       }];
 
       applyRedirects(<any>injector, <any>loader, serializer, tree('a/b'), config).forEach(r => {
-        compareTrees(r, tree('/a/b'));
+        expectTreeToBe(r, '/a/b');
       });
     });
 
@@ -280,8 +290,7 @@ describe('applyRedirects', () => {
           [{path: 'a', component: ComponentA, canLoad: ['guard'], loadChildren: 'children'}];
 
       applyRedirects(<any>injector, <any>loader, serializer, tree('a/b'), config)
-          .subscribe(
-              (r) => { compareTrees(r, tree('/a/b')); }, (e) => { throw 'Should not reach'; });
+          .subscribe((r) => { expectTreeToBe(r, '/a/b'); }, (e) => { throw 'Should not reach'; });
 
     });
 
@@ -290,12 +299,12 @@ describe('applyRedirects', () => {
 
       const loader = {load: (injector: any, p: any) => of (loadedConfig)};
 
-      const config =
+      const config: Routes =
           [{path: '', pathMatch: 'full', redirectTo: '/a'}, {path: 'a', loadChildren: 'children'}];
 
       applyRedirects(testModule.injector, <any>loader, serializer, tree(''), config).forEach(r => {
-        compareTrees(r, tree('a'));
-        expect((<any>config[1])._loadedConfig).toBe(loadedConfig);
+        expectTreeToBe(r, 'a');
+        expect(config[1]._loadedConfig).toBe(loadedConfig);
       });
     });
 
@@ -311,7 +320,7 @@ describe('applyRedirects', () => {
         }
       };
 
-      const config = [{path: 'a', loadChildren: 'children'}];
+      const config: Routes = [{path: 'a', loadChildren: 'children'}];
 
       applyRedirects(testModule.injector, <any>loader, serializer, tree('a?k1'), config)
           .subscribe(r => {});
@@ -319,8 +328,8 @@ describe('applyRedirects', () => {
       applyRedirects(testModule.injector, <any>loader, serializer, tree('a?k2'), config)
           .subscribe(
               r => {
-                compareTrees(r, tree('a?k2'));
-                expect((<any>config[0])._loadedConfig).toBe(loadedConfig);
+                expectTreeToBe(r, 'a?k2');
+                expect(config[0]._loadedConfig).toBe(loadedConfig);
               },
               (e) => { throw 'Should not reach'; });
     });
@@ -330,10 +339,10 @@ describe('applyRedirects', () => {
 
       const loader = {load: (injector: any, p: any) => of (loadedConfig)};
 
-      const config = [{path: '**', loadChildren: 'children'}];
+      const config: Routes = [{path: '**', loadChildren: 'children'}];
 
       applyRedirects(testModule.injector, <any>loader, serializer, tree('xyz'), config)
-          .forEach(r => { expect((<any>config[0])._loadedConfig).toBe(loadedConfig); });
+          .forEach(r => { expect(config[0]._loadedConfig).toBe(loadedConfig); });
     });
 
     it('should load the configuration after a local redirect from a wildcard route', () => {
@@ -341,11 +350,11 @@ describe('applyRedirects', () => {
 
       const loader = {load: (injector: any, p: any) => of (loadedConfig)};
 
-      const config =
+      const config: Routes =
           [{path: 'not-found', loadChildren: 'children'}, {path: '**', redirectTo: 'not-found'}];
 
       applyRedirects(testModule.injector, <any>loader, serializer, tree('xyz'), config)
-          .forEach(r => { expect((<any>config[0])._loadedConfig).toBe(loadedConfig); });
+          .forEach(r => { expect(config[0]._loadedConfig).toBe(loadedConfig); });
     });
 
     it('should load the configuration after an absolute redirect from a wildcard route', () => {
@@ -353,11 +362,11 @@ describe('applyRedirects', () => {
 
       const loader = {load: (injector: any, p: any) => of (loadedConfig)};
 
-      const config =
+      const config: Routes =
           [{path: 'not-found', loadChildren: 'children'}, {path: '**', redirectTo: '/not-found'}];
 
       applyRedirects(testModule.injector, <any>loader, serializer, tree('xyz'), config)
-          .forEach(r => { expect((<any>config[0])._loadedConfig).toBe(loadedConfig); });
+          .forEach(r => { expect(config[0]._loadedConfig).toBe(loadedConfig); });
     });
   });
 
@@ -374,7 +383,7 @@ describe('applyRedirects', () => {
             },
             {path: '', redirectTo: 'a'}
           ],
-          'b', (t: UrlTree) => { compareTrees(t, tree('a/b')); });
+          'b', (t: UrlTree) => { expectTreeToBe(t, 'a/b'); });
     });
 
     it('redirect from an empty path should work (absolute redirect)', () => {
@@ -389,7 +398,7 @@ describe('applyRedirects', () => {
             },
             {path: '', redirectTo: '/a/b'}
           ],
-          '', (t: UrlTree) => { compareTrees(t, tree('a/b')); });
+          '', (t: UrlTree) => { expectTreeToBe(t, 'a/b'); });
     });
 
     it('should redirect empty path route only when terminal', () => {
@@ -404,7 +413,7 @@ describe('applyRedirects', () => {
         {path: '', redirectTo: 'a', pathMatch: 'full'}
       ];
 
-      applyRedirects(testModule.injector, null, serializer, tree('b'), config)
+      applyRedirects(testModule.injector, null !, serializer, tree('b'), config)
           .subscribe(
               (_) => { throw 'Should not be reached'; },
               e => { expect(e.message).toEqual('Cannot match any routes. URL Segment: \'b\''); });
@@ -420,7 +429,7 @@ describe('applyRedirects', () => {
             },
             {path: '', redirectTo: 'a'}
           ],
-          '', (t: UrlTree) => { compareTrees(t, tree('a/b')); });
+          '', (t: UrlTree) => { expectTreeToBe(t, 'a/b'); });
     });
 
     it('redirect to an empty path should work', () => {
@@ -429,7 +438,7 @@ describe('applyRedirects', () => {
             {path: '', component: ComponentA, children: [{path: 'b', component: ComponentB}]},
             {path: 'a', redirectTo: ''}
           ],
-          'a/b', (t: UrlTree) => { compareTrees(t, tree('b')); });
+          'a/b', (t: UrlTree) => { expectTreeToBe(t, 'b'); });
     });
 
     describe('aux split is in the middle', () => {
@@ -443,7 +452,7 @@ describe('applyRedirects', () => {
                 {path: '', redirectTo: 'c', outlet: 'aux'}
               ]
             }],
-            'a/b', (t: UrlTree) => { compareTrees(t, tree('a/(b//aux:c)')); });
+            'a/b', (t: UrlTree) => { expectTreeToBe(t, 'a/(b//aux:c)'); });
       });
 
       it('should create a new url segment (terminal)', () => {
@@ -456,7 +465,7 @@ describe('applyRedirects', () => {
                 {path: '', pathMatch: 'full', redirectTo: 'c', outlet: 'aux'}
               ]
             }],
-            'a/b', (t: UrlTree) => { compareTrees(t, tree('a/b')); });
+            'a/b', (t: UrlTree) => { expectTreeToBe(t, 'a/b'); });
       });
     });
 
@@ -471,7 +480,7 @@ describe('applyRedirects', () => {
                 {path: '', redirectTo: 'c', outlet: 'aux'}
               ]
             }],
-            'a', (t: UrlTree) => { compareTrees(t, tree('a/(b//aux:c)')); });
+            'a', (t: UrlTree) => { expectTreeToBe(t, 'a/(b//aux:c)'); });
       });
 
       it('should create a new child (terminal)', () => {
@@ -484,7 +493,7 @@ describe('applyRedirects', () => {
                 {path: '', pathMatch: 'full', redirectTo: 'c', outlet: 'aux'}
               ]
             }],
-            'a', (t: UrlTree) => { compareTrees(t, tree('a/(b//aux:c)')); });
+            'a', (t: UrlTree) => { expectTreeToBe(t, 'a/(b//aux:c)'); });
       });
 
       it('should work only only primary outlet', () => {
@@ -496,7 +505,7 @@ describe('applyRedirects', () => {
                 {path: 'c', component: ComponentC, outlet: 'aux'}
               ]
             }],
-            'a/(aux:c)', (t: UrlTree) => { compareTrees(t, tree('a/(b//aux:c)')); });
+            'a/(aux:c)', (t: UrlTree) => { expectTreeToBe(t, 'a/(b//aux:c)'); });
       });
     });
 
@@ -516,7 +525,7 @@ describe('applyRedirects', () => {
                 {path: '', redirectTo: 'c', outlet: 'aux'}
               ]
             }],
-            'a/(d//aux:e)', (t: UrlTree) => { compareTrees(t, tree('a/(b/d//aux:c/e)')); });
+            'a/(d//aux:e)', (t: UrlTree) => { expectTreeToBe(t, 'a/(b/d//aux:c/e)'); });
       });
 
       it('should not create a new child (terminal)', () => {
@@ -534,7 +543,7 @@ describe('applyRedirects', () => {
           ]
         }];
 
-        applyRedirects(testModule.injector, null, serializer, tree('a/(d//aux:e)'), config)
+        applyRedirects(testModule.injector, null !, serializer, tree('a/(d//aux:e)'), config)
             .subscribe(
                 (_) => { throw 'Should not be reached'; },
                 e => { expect(e.message).toEqual('Cannot match any routes. URL Segment: \'a\''); });
@@ -546,7 +555,7 @@ describe('applyRedirects', () => {
     it('should not error when no children matching and no url is left', () => {
       checkRedirect(
           [{path: 'a', component: ComponentA, children: [{path: 'b', component: ComponentB}]}],
-          '/a', (t: UrlTree) => { compareTrees(t, tree('a')); });
+          '/a', (t: UrlTree) => { expectTreeToBe(t, 'a'); });
     });
 
     it('should not error when no children matching and no url is left (aux routes)', () => {
@@ -560,12 +569,12 @@ describe('applyRedirects', () => {
               {path: 'c', component: ComponentC, outlet: 'aux'},
             ]
           }],
-          '/a', (t: UrlTree) => { compareTrees(t, tree('a/(aux:c)')); });
+          '/a', (t: UrlTree) => { expectTreeToBe(t, 'a/(aux:c)'); });
     });
 
     it('should error when no children matching and some url is left', () => {
       applyRedirects(
-          testModule.injector, null, serializer, tree('/a/c'),
+          testModule.injector, null !, serializer, tree('/a/c'),
           [{path: 'a', component: ComponentA, children: [{path: 'b', component: ComponentB}]}])
           .subscribe(
               (_) => { throw 'Should not be reached'; },
@@ -588,8 +597,8 @@ describe('applyRedirects', () => {
             matcher: matcher,
             component: ComponentA,
             children: [{path: 'b', component: ComponentB}]
-          }],
-          '/a/1/b', (t: UrlTree) => { compareTrees(t, tree('a/1/b')); });
+          }] as any,
+          '/a/1/b', (t: UrlTree) => { expectTreeToBe(t, 'a/1/b'); });
     });
   });
 
@@ -601,7 +610,7 @@ describe('applyRedirects', () => {
             {path: 'b/:id', component: ComponentB},
             {path: 'c/:id', component: ComponentC, outlet: 'aux'}
           ],
-          'a/1;p=99', (t: UrlTree) => { compareTrees(t, tree('/b/1;p=99(aux:c/1;p=99)')); });
+          'a/1;p=99', (t: UrlTree) => { expectTreeToBe(t, '/b/1;p=99(aux:c/1;p=99)'); });
     });
 
     it('should work when using absolute redirects (wildcard)', () => {
@@ -610,12 +619,12 @@ describe('applyRedirects', () => {
             {path: '**', redirectTo: '/b(aux:c)'}, {path: 'b', component: ComponentB},
             {path: 'c', component: ComponentC, outlet: 'aux'}
           ],
-          'a/1', (t: UrlTree) => { compareTrees(t, tree('/b(aux:c)')); });
+          'a/1', (t: UrlTree) => { expectTreeToBe(t, '/b(aux:c)'); });
     });
 
     it('should throw when using non-absolute redirects', () => {
       applyRedirects(
-          testModule.injector, null, serializer, tree('a'),
+          testModule.injector, null !, serializer, tree('a'),
           [
             {path: 'a', redirectTo: 'b(aux:c)'},
           ])
@@ -630,7 +639,7 @@ describe('applyRedirects', () => {
 });
 
 function checkRedirect(config: Routes, url: string, callback: any): void {
-  applyRedirects(TestBed, null, new DefaultUrlSerializer(), tree(url), config)
+  applyRedirects(TestBed, null !, new DefaultUrlSerializer(), tree(url), config)
       .subscribe(callback, e => { throw e; });
 }
 
@@ -638,7 +647,8 @@ function tree(url: string): UrlTree {
   return new DefaultUrlSerializer().parse(url);
 }
 
-function compareTrees(actual: UrlTree, expected: UrlTree): void {
+function expectTreeToBe(actual: UrlTree, expectedUrl: string): void {
+  const expected = tree(expectedUrl);
   const serializer = new DefaultUrlSerializer();
   const error =
       `"${serializer.serialize(actual)}" is not equal to "${serializer.serialize(expected)}"`;
diff --git a/packages/router/test/bootstrap.spec.ts b/packages/router/test/bootstrap.spec.ts
index 1c6dabfde9..1277345b87 100644
--- a/packages/router/test/bootstrap.spec.ts
+++ b/packages/router/test/bootstrap.spec.ts
@@ -16,7 +16,7 @@ import {NavigationEnd, Resolve, Router, RouterModule} from '@angular/router';
 
 describe('bootstrap', () => {
   let log: any[] = [];
-  let testProviders: any[] = null;
+  let testProviders: any[] = null !;
 
   @Component({selector: 'test-app', template: 'root <router-outlet></router-outlet>'})
   class RootCmp {
@@ -80,10 +80,12 @@ describe('bootstrap', () => {
 
     platformBrowserDynamic([]).bootstrapModule(TestModule).then(res => {
       const router = res.injector.get(Router);
-      const data = router.routerState.snapshot.root.firstChild.data;
+      const data = router.routerState.snapshot.root.firstChild !.data;
       expect(data['test']).toEqual('test-data');
-      expect(log).toEqual(
-          ['TestModule', 'NavigationStart', 'RoutesRecognized', 'RootCmp', 'NavigationEnd']);
+      expect(log).toEqual([
+        'TestModule', 'NavigationStart', 'RoutesRecognized', 'GuardsCheckStart', 'GuardsCheckEnd',
+        'ResolveStart', 'ResolveEnd', 'RootCmp', 'NavigationEnd'
+      ]);
       done();
     });
   });
@@ -116,8 +118,11 @@ describe('bootstrap', () => {
        platformBrowserDynamic([]).bootstrapModule(TestModule).then(res => {
          const router = res.injector.get(Router);
          expect(router.routerState.snapshot.root.firstChild).toBeNull();
-         // NavigationEnd has not been emitted yet because bootstrap returned too early
-         expect(log).toEqual(['TestModule', 'RootCmp', 'NavigationStart', 'RoutesRecognized']);
+         // ResolveEnd has not been emitted yet because bootstrap returned too early
+         expect(log).toEqual([
+           'TestModule', 'RootCmp', 'NavigationStart', 'RoutesRecognized', 'GuardsCheckStart',
+           'GuardsCheckEnd', 'ResolveStart'
+         ]);
 
          router.events.subscribe((e) => {
            if (e instanceof NavigationEnd) {
diff --git a/packages/router/test/config.spec.ts b/packages/router/test/config.spec.ts
index 5897da2539..ad643a8fae 100644
--- a/packages/router/test/config.spec.ts
+++ b/packages/router/test/config.spec.ts
@@ -24,7 +24,8 @@ describe('config', () => {
 
     it('should throw for undefined route', () => {
       expect(() => {
-        validateConfig([{path: 'a', component: ComponentA}, , {path: 'b', component: ComponentB}]);
+        validateConfig(
+            [{path: 'a', component: ComponentA}, , {path: 'b', component: ComponentB}] as any);
       }).toThrowError(/Invalid configuration of route ''/);
     });
 
@@ -36,7 +37,7 @@ describe('config', () => {
             {path: 'b', component: ComponentB},
             ,
           ]
-        }]);
+        }] as any);
       }).toThrowError(/Invalid configuration of route 'a'/);
     });
 
@@ -98,7 +99,7 @@ describe('config', () => {
     });
 
     it('should throw when path and matcher are missing', () => {
-      expect(() => { validateConfig([{component: null, redirectTo: 'b'}]); })
+      expect(() => { validateConfig([{component: null, redirectTo: 'b'}] as any); })
           .toThrowError(
               `Invalid configuration of route '': routes must have either a path or a matcher specified`);
     });
diff --git a/packages/router/test/create_router_state.spec.ts b/packages/router/test/create_router_state.spec.ts
index b31247b4fc..9c87327aff 100644
--- a/packages/router/test/create_router_state.spec.ts
+++ b/packages/router/test/create_router_state.spec.ts
@@ -9,7 +9,7 @@
 import {Routes} from '../src/config';
 import {createRouterState} from '../src/create_router_state';
 import {recognize} from '../src/recognize';
-import {DefaultRouteReuseStrategy} from '../src/router';
+import {DefaultRouteReuseStrategy} from '../src/route_reuse_strategy';
 import {ActivatedRoute, RouterState, RouterStateSnapshot, advanceActivatedRoute, createEmptyState} from '../src/router_state';
 import {PRIMARY_OUTLET} from '../src/shared';
 import {DefaultUrlSerializer, UrlSegmentGroup, UrlTree} from '../src/url_tree';
@@ -19,7 +19,7 @@ describe('create router state', () => {
   const reuseStrategy = new DefaultRouteReuseStrategy();
 
   const emptyState = () =>
-      createEmptyState(new UrlTree(new UrlSegmentGroup([], {}), {}, null), RootComponent);
+      createEmptyState(new UrlTree(new UrlSegmentGroup([], {}), {}, null !), RootComponent);
 
   it('should work create new state', () => {
     const state = createRouterState(
@@ -76,11 +76,10 @@ describe('create router state', () => {
         createRouterState(reuseStrategy, createState(config, 'a/2;p=22/(b//right:c)'), prevState);
 
     expect(prevState.root).toBe(state.root);
-    const prevP = prevState.firstChild(prevState.root);
-    const currP = state.firstChild(state.root);
+    const prevP = prevState.firstChild(prevState.root) !;
+    const currP = state.firstChild(state.root) !;
     expect(prevP).toBe(currP);
 
-    const prevC = prevState.children(prevP);
     const currC = state.children(currP);
 
     expect(currP._futureSnapshot.params).toEqual({id: '2', p: '22'});
@@ -101,7 +100,7 @@ function advanceNode(node: TreeNode<ActivatedRoute>): void {
 }
 
 function createState(config: Routes, url: string): RouterStateSnapshot {
-  let res: RouterStateSnapshot;
+  let res: RouterStateSnapshot = undefined !;
   recognize(RootComponent, config, tree(url), url).forEach(s => res = s);
   return res;
 }
diff --git a/packages/router/test/create_url_tree.spec.ts b/packages/router/test/create_url_tree.spec.ts
index bb7a2b3b00..726faff2bd 100644
--- a/packages/router/test/create_url_tree.spec.ts
+++ b/packages/router/test/create_url_tree.spec.ts
@@ -247,10 +247,10 @@ function createRoot(tree: UrlTree, commands: any[], queryParams?: Params, fragme
       [], <any>{}, <any>{}, '', <any>{}, PRIMARY_OUTLET, 'someComponent', null, tree.root, -1,
       <any>null);
   const a = new ActivatedRoute(
-      new BehaviorSubject(null), new BehaviorSubject(null), new BehaviorSubject(null),
-      new BehaviorSubject(null), new BehaviorSubject(null), PRIMARY_OUTLET, 'someComponent', s);
+      new BehaviorSubject(null !), new BehaviorSubject(null !), new BehaviorSubject(null !),
+      new BehaviorSubject(null !), new BehaviorSubject(null !), PRIMARY_OUTLET, 'someComponent', s);
   advanceActivatedRoute(a);
-  return createUrlTree(a, tree, commands, queryParams, fragment);
+  return createUrlTree(a, tree, commands, queryParams !, fragment !);
 }
 
 function create(
@@ -263,8 +263,8 @@ function create(
       [], <any>{}, <any>{}, '', <any>{}, PRIMARY_OUTLET, 'someComponent', null, <any>segment,
       startIndex, <any>null);
   const a = new ActivatedRoute(
-      new BehaviorSubject(null), new BehaviorSubject(null), new BehaviorSubject(null),
-      new BehaviorSubject(null), new BehaviorSubject(null), PRIMARY_OUTLET, 'someComponent', s);
+      new BehaviorSubject(null !), new BehaviorSubject(null !), new BehaviorSubject(null !),
+      new BehaviorSubject(null !), new BehaviorSubject(null !), PRIMARY_OUTLET, 'someComponent', s);
   advanceActivatedRoute(a);
-  return createUrlTree(a, tree, commands, queryParams, fragment);
+  return createUrlTree(a, tree, commands, queryParams !, fragment !);
 }
\ No newline at end of file
diff --git a/packages/router/test/integration.spec.ts b/packages/router/test/integration.spec.ts
index c62a56ef55..adeab68c68 100644
--- a/packages/router/test/integration.spec.ts
+++ b/packages/router/test/integration.spec.ts
@@ -7,15 +7,16 @@
  */
 
 import {CommonModule, Location} from '@angular/common';
-import {Component, Injectable, NgModule, NgModuleFactoryLoader, NgModuleRef} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Injectable, NgModule, NgModuleFactoryLoader, NgModuleRef} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, inject, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
+import {ActivatedRoute, ActivatedRouteSnapshot, CanActivate, CanDeactivate, DetachedRouteHandle, Event, GuardsCheckEnd, GuardsCheckStart, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, PRIMARY_OUTLET, ParamMap, Params, PreloadAllModules, PreloadingStrategy, Resolve, ResolveEnd, ResolveStart, RouteConfigLoadEnd, RouteConfigLoadStart, RouteReuseStrategy, Router, RouterModule, RouterPreloader, RouterStateSnapshot, RoutesRecognized, RunGuardsAndResolvers, UrlHandlingStrategy, UrlSegmentGroup, UrlTree} from '@angular/router';
 import {Observable} from 'rxjs/Observable';
+import {Observer} from 'rxjs/Observer';
+import {of } from 'rxjs/observable/of';
 import {map} from 'rxjs/operator/map';
 
-import {ActivatedRoute, ActivatedRouteSnapshot, CanActivate, CanDeactivate, DetachedRouteHandle, Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, PRIMARY_OUTLET, ParamMap, Params, PreloadAllModules, PreloadingStrategy, Resolve, RouteConfigLoadEnd, RouteConfigLoadStart, RouteReuseStrategy, Router, RouterModule, RouterStateSnapshot, RoutesRecognized, RunGuardsAndResolvers, UrlHandlingStrategy, UrlSegmentGroup, UrlTree} from '../index';
-import {RouterPreloader} from '../src/router_preloader';
 import {forEach} from '../src/utils/collection';
 import {RouterTestingModule, SpyNgModuleFactoryLoader} from '../testing';
 
@@ -121,8 +122,10 @@ describe('Integration', () => {
            router.resetConfig([{
              path: 'parent/:id',
              component: Parent,
-             children:
-                 [{path: 'child1', component: Child1}, {path: 'child2', component: Child2}]
+             children: [
+               {path: 'child1', component: Child1},
+               {path: 'child2', component: Child2},
+             ]
            }]);
 
            router.navigateByUrl('/parent/1/child1');
@@ -132,13 +135,18 @@ describe('Integration', () => {
            advance(fixture);
 
            expect(location.path()).toEqual('/parent/2/child2');
-           expect(log).toEqual([{id: '1'}, 'child1 destroy', {id: '2'}, 'child2 constructor']);
+           expect(log).toEqual([
+             {id: '1'},
+             'child1 destroy',
+             {id: '2'},
+             'child2 constructor',
+           ]);
          })));
 
     });
 
     it('should execute navigations serialy',
-       fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       fakeAsync(inject([Router, Location], (router: Router) => {
          const fixture = createRoot(router, RootCmp);
 
          router.resetConfig([
@@ -174,6 +182,50 @@ describe('Integration', () => {
        })));
   });
 
+  it('Should work inside ChangeDetectionStrategy.OnPush components', fakeAsync(() => {
+       @Component({
+         selector: 'root-cmp',
+         template: `<router-outlet></router-outlet>`,
+         changeDetection: ChangeDetectionStrategy.OnPush,
+       })
+       class OnPushOutlet {
+       }
+
+       @Component({selector: 'need-cd', template: `{{'it works!'}}`})
+       class NeedCdCmp {
+       }
+
+       @NgModule({
+         declarations: [OnPushOutlet, NeedCdCmp],
+         entryComponents: [OnPushOutlet, NeedCdCmp],
+         imports: [RouterModule],
+       })
+       class TestModule {
+       }
+
+       TestBed.configureTestingModule({imports: [TestModule]});
+
+       const router: Router = TestBed.get(Router);
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{
+         path: 'on',
+         component: OnPushOutlet,
+         children: [{
+           path: 'push',
+           component: NeedCdCmp,
+         }],
+       }]);
+
+       advance(fixture);
+       router.navigateByUrl('on');
+       advance(fixture);
+       router.navigateByUrl('on/push');
+       advance(fixture);
+
+       expect(fixture.nativeElement).toHaveText('it works!');
+     }));
+
   it('should not error when no url left and no children are matching',
      fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
        const fixture = createRoot(router, RootCmp);
@@ -203,7 +255,7 @@ describe('Integration', () => {
 
        router.resetConfig([{
          path: 'child',
-         component: LinkInNgIf,
+         component: OutletInNgIf,
          children: [{path: 'simple', component: SimpleCmp}]
        }]);
 
@@ -213,10 +265,10 @@ describe('Integration', () => {
        expect(location.path()).toEqual('/child/simple');
      })));
 
-  it('should work when an outlet is in an ngIf (and is removed)', fakeAsync(() => {
+  it('should work when an outlet is added/removed', fakeAsync(() => {
        @Component({
          selector: 'someRoot',
-         template: `<div *ngIf="cond"><router-outlet></router-outlet></div>`
+         template: `[<div *ngIf="cond"><router-outlet></router-outlet></div>]`
        })
        class RootCmpWithLink {
          cond: boolean = true;
@@ -224,26 +276,25 @@ describe('Integration', () => {
        TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
 
        const router: Router = TestBed.get(Router);
-       const location: Location = TestBed.get(Location);
 
        const fixture = createRoot(router, RootCmpWithLink);
 
-       router.resetConfig(
-           [{path: 'simple', component: SimpleCmp}, {path: 'blank', component: BlankCmp}]);
+       router.resetConfig([
+         {path: 'simple', component: SimpleCmp},
+         {path: 'blank', component: BlankCmp},
+       ]);
 
        router.navigateByUrl('/simple');
        advance(fixture);
-       expect(location.path()).toEqual('/simple');
+       expect(fixture.nativeElement).toHaveText('[simple]');
 
-       const instance = fixture.componentInstance;
-       instance.cond = false;
+       fixture.componentInstance.cond = false;
        advance(fixture);
+       expect(fixture.nativeElement).toHaveText('[]');
 
-       let recordedError: any = null;
-       router.navigateByUrl('/blank').catch(e => recordedError = e);
+       fixture.componentInstance.cond = true;
        advance(fixture);
-
-       expect(recordedError.message).toEqual('Cannot find primary outlet to load \'BlankCmp\'');
+       expect(fixture.nativeElement).toHaveText('[simple]');
      }));
 
   it('should update location when navigating', fakeAsync(() => {
@@ -347,6 +398,25 @@ describe('Integration', () => {
        expect(location.path()).toEqual('/team/22/user/victor');
      })));
 
+  it('should navigate to the same url when config changes',
+     fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{path: 'a', component: SimpleCmp}]);
+
+       router.navigate(['/a']);
+       advance(fixture);
+       expect(location.path()).toEqual('/a');
+       expect(fixture.nativeElement).toHaveText('simple');
+
+       router.resetConfig([{path: 'a', component: RouteCmp}]);
+
+       router.navigate(['/a']);
+       advance(fixture);
+       expect(location.path()).toEqual('/a');
+       expect(fixture.nativeElement).toHaveText('route');
+     })));
+
   it('should navigate when locations changes',
      fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
        const fixture = createRoot(router, RootCmp);
@@ -373,9 +443,13 @@ describe('Integration', () => {
 
        expectEvents(recordedEvents, [
          [NavigationStart, '/team/22/user/victor'], [RoutesRecognized, '/team/22/user/victor'],
+         [GuardsCheckStart, '/team/22/user/victor'], [GuardsCheckEnd, '/team/22/user/victor'],
+         [ResolveStart, '/team/22/user/victor'], [ResolveEnd, '/team/22/user/victor'],
          [NavigationEnd, '/team/22/user/victor'],
 
          [NavigationStart, '/team/22/user/fedor'], [RoutesRecognized, '/team/22/user/fedor'],
+         [GuardsCheckStart, '/team/22/user/fedor'], [GuardsCheckEnd, '/team/22/user/fedor'],
+         [ResolveStart, '/team/22/user/fedor'], [ResolveEnd, '/team/22/user/fedor'],
          [NavigationEnd, '/team/22/user/fedor']
        ]);
      })));
@@ -456,7 +530,7 @@ describe('Integration', () => {
        expect(fixture.nativeElement).toHaveText('team 22 [ user victor, right: simple ]');
      })));
 
-  it('should support secondary routes in seperate commands',
+  it('should support secondary routes in separate commands',
      fakeAsync(inject([Router], (router: Router) => {
        const fixture = createRoot(router, RootCmp);
 
@@ -620,8 +694,8 @@ describe('Integration', () => {
        const user = fixture.debugElement.children[1].componentInstance;
 
        let r1: any, r2: any;
-       router.navigateByUrl('/user/victor').then(_ => r1 = _);
-       router.navigateByUrl('/user/fedor').then(_ => r2 = _);
+       router.navigateByUrl('/user/victor') !.then(_ => r1 = _);
+       router.navigateByUrl('/user/fedor') !.then(_ => r2 = _);
        advance(fixture);
 
        expect(r1).toEqual(false);  // returns false because it was canceled
@@ -632,11 +706,14 @@ describe('Integration', () => {
 
        expectEvents(recordedEvents, [
          [NavigationStart, '/user/init'], [RoutesRecognized, '/user/init'],
-         [NavigationEnd, '/user/init'],
+         [GuardsCheckStart, '/user/init'], [GuardsCheckEnd, '/user/init'],
+         [ResolveStart, '/user/init'], [ResolveEnd, '/user/init'], [NavigationEnd, '/user/init'],
 
          [NavigationStart, '/user/victor'], [NavigationCancel, '/user/victor'],
 
          [NavigationStart, '/user/fedor'], [RoutesRecognized, '/user/fedor'],
+         [GuardsCheckStart, '/user/fedor'], [GuardsCheckEnd, '/user/fedor'],
+         [ResolveStart, '/user/fedor'], [ResolveEnd, '/user/fedor'],
          [NavigationEnd, '/user/fedor']
        ]);
      })));
@@ -650,7 +727,7 @@ describe('Integration', () => {
        router.events.forEach(e => recordedEvents.push(e));
 
        let e: any;
-       router.navigateByUrl('/invalid').catch(_ => e = _);
+       router.navigateByUrl('/invalid') !.catch(_ => e = _);
        advance(fixture);
        expect(e.message).toContain('Cannot match any routes');
 
@@ -663,6 +740,8 @@ describe('Integration', () => {
          [NavigationStart, '/invalid'], [NavigationError, '/invalid'],
 
          [NavigationStart, '/user/fedor'], [RoutesRecognized, '/user/fedor'],
+         [GuardsCheckStart, '/user/fedor'], [GuardsCheckEnd, '/user/fedor'],
+         [ResolveStart, '/user/fedor'], [ResolveEnd, '/user/fedor'],
          [NavigationEnd, '/user/fedor']
        ]);
      })));
@@ -677,7 +756,7 @@ describe('Integration', () => {
        router.events.forEach(e => recordedEvents.push(e));
 
        let e: any;
-       router.navigateByUrl('/invalid').then(_ => e = _);
+       router.navigateByUrl('/invalid') !.then(_ => e = _);
        advance(fixture);
        expect(e).toEqual('resolvedValue');
 
@@ -855,13 +934,12 @@ describe('Integration', () => {
           {provide: 'resolveFour', useValue: (a: any, b: any) => 4},
           {provide: 'resolveSix', useClass: ResolveSix},
           {provide: 'resolveError', useValue: (a: any, b: any) => Promise.reject('error')},
-          {provide: 'numberOfUrlSegments', useValue: (a: any, b: any) => a.url.length}
+          {provide: 'numberOfUrlSegments', useValue: (a: any, b: any) => a.url.length},
         ]
       });
     });
 
-    it('should provide resolved data',
-       fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+    it('should provide resolved data', fakeAsync(inject([Router], (router: Router) => {
          const fixture = createRoot(router, RootCmpWithTwoOutlets);
 
          router.resetConfig([{
@@ -911,11 +989,12 @@ describe('Integration', () => {
          router.events.subscribe(e => recordedEvents.push(e));
 
          let e: any = null;
-         router.navigateByUrl('/simple').catch(error => e = error);
+         router.navigateByUrl('/simple') !.catch(error => e = error);
          advance(fixture);
 
          expectEvents(recordedEvents, [
            [NavigationStart, '/simple'], [RoutesRecognized, '/simple'],
+           [GuardsCheckStart, '/simple'], [GuardsCheckEnd, '/simple'], [ResolveStart, '/simple'],
            [NavigationError, '/simple']
          ]);
 
@@ -966,6 +1045,57 @@ describe('Integration', () => {
 
          expect(cmp.route.snapshot.data).toEqual({numberOfUrlSegments: 3});
        })));
+
+    describe('should run resolvers for the same route concurrently', () => {
+      let log: string[];
+      let observer: Observer<any>;
+
+      beforeEach(() => {
+        log = [];
+        TestBed.configureTestingModule({
+          providers: [
+            {
+              provide: 'resolver1',
+              useValue: () => {
+                const obs$ = new Observable((obs: Observer<any>) => {
+                  observer = obs;
+                  return () => {};
+                });
+                return map.call(obs$, () => log.push('resolver1'));
+              }
+            },
+            {
+              provide: 'resolver2',
+              useValue: () => {
+                return map.call(of (null), () => {
+                  log.push('resolver2');
+                  observer.next(null);
+                  observer.complete()
+                });
+              }
+            },
+          ]
+        });
+      });
+
+      it('works', fakeAsync(inject([Router], (router: Router) => {
+           const fixture = createRoot(router, RootCmp);
+
+           router.resetConfig([{
+             path: 'a',
+             resolve: {
+               one: 'resolver1',
+               two: 'resolver2',
+             },
+             component: SimpleCmp
+           }]);
+
+           router.navigateByUrl('/a');
+           advance(fixture);
+
+           expect(log).toEqual(['resolver2', 'resolver1']);
+         })));
+    });
   });
 
   describe('router links', () => {
@@ -1333,8 +1463,10 @@ describe('Integration', () => {
              expect(location.path()).toEqual('/');
              expectEvents(recordedEvents, [
                [NavigationStart, '/team/22'], [RoutesRecognized, '/team/22'],
+               [GuardsCheckStart, '/team/22'], [GuardsCheckEnd, '/team/22'],
                [NavigationCancel, '/team/22']
              ]);
+             expect((recordedEvents[3] as GuardsCheckEnd).shouldActivate).toBe(false);
            })));
       });
 
@@ -1657,6 +1789,59 @@ describe('Integration', () => {
            })));
       });
 
+      describe('should wait for parent to complete', () => {
+        let log: string[];
+
+        beforeEach(() => {
+          log = [];
+          TestBed.configureTestingModule({
+            providers: [
+              {
+                provide: 'parentGuard',
+                useValue: () => {
+                  return delayPromise(10).then(() => {
+                    log.push('parent');
+                    return true;
+                  });
+                }
+              },
+              {
+                provide: 'childGuard',
+                useValue: () => {
+                  return delayPromise(5).then(() => {
+                    log.push('child');
+                    return true;
+                  });
+                }
+              }
+            ]
+          });
+        });
+
+        function delayPromise(delay: number): Promise<boolean> {
+          let resolve: (val: boolean) => void;
+          const promise = new Promise(res => resolve = res);
+          setTimeout(() => resolve(true), delay);
+          return promise;
+        }
+
+        it('works', fakeAsync(inject([Router], (router: Router) => {
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{
+               path: 'parent',
+               canActivate: ['parentGuard'],
+               children: [
+                 {path: 'child', component: SimpleCmp, canActivate: ['childGuard']},
+               ]
+             }]);
+
+             router.navigateByUrl('/parent/child');
+             advance(fixture);
+             tick(15);
+             expect(log).toEqual(['parent', 'child']);
+           })));
+      });
     });
 
     describe('CanDeactivate', () => {
@@ -1688,7 +1873,7 @@ describe('Integration', () => {
             {
               provide: 'RecordingDeactivate',
               useValue: (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
-                log.push({path: a.routeConfig.path, component: c});
+                log.push({path: a.routeConfig !.path, component: c});
                 return true;
               }
             },
@@ -1736,14 +1921,14 @@ describe('Integration', () => {
              advance(fixture);
              expect(location.path()).toEqual('/team/22');
 
-             let successStatus: boolean;
-             router.navigateByUrl('/team/33').then(res => successStatus = res);
+             let successStatus: boolean = false;
+             router.navigateByUrl('/team/33') !.then(res => successStatus = res);
              advance(fixture);
              expect(location.path()).toEqual('/team/33');
              expect(successStatus).toEqual(true);
 
-             let canceledStatus: boolean;
-             router.navigateByUrl('/team/44').then(res => canceledStatus = res);
+             let canceledStatus: boolean = false;
+             router.navigateByUrl('/team/44') !.then(res => canceledStatus = res);
              advance(fixture);
              expect(location.path()).toEqual('/team/33');
              expect(canceledStatus).toEqual(false);
@@ -2073,7 +2258,7 @@ describe('Integration', () => {
 
              expect(location.path()).toEqual('/team/22');
 
-             router.navigateByUrl('/team/33').catch(() => {});
+             router.navigateByUrl('/team/33') !.catch(() => {});
              advance(fixture);
 
              expect(location.path()).toEqual('/team/22');
@@ -2185,6 +2370,7 @@ describe('Integration', () => {
 
                expectEvents(recordedEvents, [
                  [NavigationStart, '/lazyFalse/loaded'],
+                 //  [GuardsCheckStart, '/lazyFalse/loaded'],
                  [NavigationCancel, '/lazyFalse/loaded'],
                ]);
 
@@ -2201,6 +2387,10 @@ describe('Integration', () => {
                  [RouteConfigLoadStart],
                  [RouteConfigLoadEnd],
                  [RoutesRecognized, '/lazyTrue/loaded'],
+                 [GuardsCheckStart, '/lazyTrue/loaded'],
+                 [GuardsCheckEnd, '/lazyTrue/loaded'],
+                 [ResolveStart, '/lazyTrue/loaded'],
+                 [ResolveEnd, '/lazyTrue/loaded'],
                  [NavigationEnd, '/lazyTrue/loaded'],
                ]);
              })));
@@ -2225,8 +2415,14 @@ describe('Integration', () => {
            expect(location.path()).toEqual('/blank');
 
            expectEvents(recordedEvents, [
-             [NavigationStart, '/lazyFalse/loaded'], [NavigationCancel, '/lazyFalse/loaded'],
-             [NavigationStart, '/blank'], [RoutesRecognized, '/blank'], [NavigationEnd, '/blank']
+             [NavigationStart, '/lazyFalse/loaded'],
+             // No GuardCheck events as `canLoad` is a special guard that's not actually part of the
+             // guard lifecycle.
+             [NavigationCancel, '/lazyFalse/loaded'],
+
+             [NavigationStart, '/blank'], [RoutesRecognized, '/blank'],
+             [GuardsCheckStart, '/blank'], [GuardsCheckEnd, '/blank'], [ResolveStart, '/blank'],
+             [ResolveEnd, '/blank'], [NavigationEnd, '/blank']
            ]);
          })));
 
@@ -2292,6 +2488,11 @@ describe('Integration', () => {
               provide: 'canDeactivate_team',
               useFactory: (logger: Logger) => () => (logger.add('canDeactivate_team'), true),
               deps: [Logger]
+            },
+            {
+              provide: 'canDeactivate_simple',
+              useFactory: (logger: Logger) => () => (logger.add('canDeactivate_simple'), true),
+              deps: [Logger]
             }
           ]
         });
@@ -2325,6 +2526,31 @@ describe('Integration', () => {
                  'canDeactivate_team', 'canActivateChild_parent', 'canActivate_team'
                ]);
              })));
+
+      it('should call deactivate guards from bottom to top',
+         fakeAsync(inject(
+             [Router, Location, Logger], (router: Router, location: Location, logger: Logger) => {
+               const fixture = createRoot(router, RootCmp);
+
+               router.resetConfig([{
+                 path: '',
+                 children: [{
+                   path: 'team/:id',
+                   canDeactivate: ['canDeactivate_team'],
+                   children:
+                       [{path: '', component: SimpleCmp, canDeactivate: ['canDeactivate_simple']}],
+                   component: TeamCmp
+                 }]
+               }]);
+
+               router.navigateByUrl('/team/22');
+               advance(fixture);
+
+               router.navigateByUrl('/team/33');
+               advance(fixture);
+
+               expect(logger.logs).toEqual(['canDeactivate_simple', 'canDeactivate_team']);
+             })));
     });
   });
 
@@ -2470,13 +2696,14 @@ describe('Integration', () => {
          const fixture = TestBed.createComponent(ComponentWithRouterLink);
          router.navigateByUrl('/team');
          expect(() => advance(fixture)).not.toThrow();
+         advance(fixture);
 
          const paragraph = fixture.nativeElement.querySelector('p');
          expect(paragraph.textContent).toEqual('true');
 
          router.navigateByUrl('/otherteam');
          advance(fixture);
-
+         advance(fixture);
          expect(paragraph.textContent).toEqual('false');
        }));
 
@@ -2582,8 +2809,8 @@ describe('Integration', () => {
              expect(location.path()).toEqual('/lazy/parent/child');
              expect(fixture.nativeElement).toHaveText('parent[child]');
 
-             const pInj = fixture.debugElement.query(By.directive(Parent)).injector;
-             const cInj = fixture.debugElement.query(By.directive(Child)).injector;
+             const pInj = fixture.debugElement.query(By.directive(Parent)).injector !;
+             const cInj = fixture.debugElement.query(By.directive(Child)).injector !;
 
              expect(pInj.get('moduleName')).toEqual('parent');
              expect(pInj.get('fromParent')).toEqual('from parent');
@@ -2769,7 +2996,7 @@ describe('Integration', () => {
              router.resetConfig([{path: 'lazy', loadChildren: 'expected'}]);
 
              let recordedError: any = null;
-             router.navigateByUrl('/lazy/loaded').catch(err => recordedError = err);
+             router.navigateByUrl('/lazy/loaded') !.catch(err => recordedError = err);
              advance(fixture);
              expect(recordedError.message)
                  .toEqual(
@@ -2942,7 +3169,7 @@ describe('Integration', () => {
              const recordedEvents: any[] = [];
              router.events.forEach(e => recordedEvents.push(e));
 
-             router.navigateByUrl('/lazy/loaded').catch(s => {});
+             router.navigateByUrl('/lazy/loaded') !.catch(s => {});
              advance(fixture);
 
              expect(location.path()).toEqual('/');
@@ -3049,13 +3276,13 @@ describe('Integration', () => {
                router.navigateByUrl('/blank');
                advance(fixture);
 
-               const config: any = router.config;
-               const firstConfig = config[1]._loadedConfig;
+               const config = router.config;
+               const firstConfig = config[1]._loadedConfig !;
 
                expect(firstConfig).toBeDefined();
                expect(firstConfig.routes[0].path).toEqual('LoadedModule1');
 
-               const secondConfig = firstConfig.routes[0]._loadedConfig;
+               const secondConfig = firstConfig.routes[0]._loadedConfig !;
                expect(secondConfig).toBeDefined();
                expect(secondConfig.routes[0].path).toEqual('LoadedModule2');
              })));
@@ -3124,6 +3351,8 @@ describe('Integration', () => {
            expect(location.path()).toEqual('/include/user/kate');
            expectEvents(events, [
              [NavigationStart, '/include/user/kate'], [RoutesRecognized, '/include/user/kate'],
+             [GuardsCheckStart, '/include/user/kate'], [GuardsCheckEnd, '/include/user/kate'],
+             [ResolveStart, '/include/user/kate'], [ResolveEnd, '/include/user/kate'],
              [NavigationEnd, '/include/user/kate']
            ]);
            expect(fixture.nativeElement).toHaveText('team  [ user kate, right:  ]');
@@ -3136,8 +3365,10 @@ describe('Integration', () => {
            expect(location.path()).toEqual('/exclude/one');
            expect(Object.keys(router.routerState.root.children).length).toEqual(0);
            expect(fixture.nativeElement).toHaveText('');
-           expectEvents(
-               events, [[NavigationStart, '/exclude/one'], [NavigationEnd, '/exclude/one']]);
+           expectEvents(events, [
+             [NavigationStart, '/exclude/one'], [GuardsCheckStart, '/exclude/one'],
+             [GuardsCheckEnd, '/exclude/one'], [NavigationEnd, '/exclude/one']
+           ]);
            events.splice(0);
 
            // another unsupported URL
@@ -3156,6 +3387,8 @@ describe('Integration', () => {
 
            expectEvents(events, [
              [NavigationStart, '/include/simple'], [RoutesRecognized, '/include/simple'],
+             [GuardsCheckStart, '/include/simple'], [GuardsCheckEnd, '/include/simple'],
+             [ResolveStart, '/include/simple'], [ResolveEnd, '/include/simple'],
              [NavigationEnd, '/include/simple']
            ]);
          })));
@@ -3181,6 +3414,8 @@ describe('Integration', () => {
            expect(location.path()).toEqual('/include/user/kate(aux:excluded)');
            expectEvents(events, [
              [NavigationStart, '/include/user/kate'], [RoutesRecognized, '/include/user/kate'],
+             [GuardsCheckStart, '/include/user/kate'], [GuardsCheckEnd, '/include/user/kate'],
+             [ResolveStart, '/include/user/kate'], [ResolveEnd, '/include/user/kate'],
              [NavigationEnd, '/include/user/kate']
            ]);
            events.splice(0);
@@ -3195,6 +3430,8 @@ describe('Integration', () => {
            expect(location.path()).toEqual('/include/simple(aux:excluded2)');
            expectEvents(events, [
              [NavigationStart, '/include/simple'], [RoutesRecognized, '/include/simple'],
+             [GuardsCheckStart, '/include/simple'], [GuardsCheckEnd, '/include/simple'],
+             [ResolveStart, '/include/simple'], [ResolveEnd, '/include/simple'],
              [NavigationEnd, '/include/simple']
            ]);
          })));
@@ -3206,19 +3443,19 @@ describe('Integration', () => {
       stored: {[k: string]: DetachedRouteHandle} = {};
 
       shouldDetach(route: ActivatedRouteSnapshot): boolean {
-        return route.routeConfig.path === 'a';
+        return route.routeConfig !.path === 'a';
       }
 
       store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {
-        this.stored[route.routeConfig.path] = detachedTree;
+        this.stored[route.routeConfig !.path !] = detachedTree;
       }
 
       shouldAttach(route: ActivatedRouteSnapshot): boolean {
-        return !!this.stored[route.routeConfig.path];
+        return !!this.stored[route.routeConfig !.path !];
       }
 
       retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
-        return this.stored[route.routeConfig.path];
+        return this.stored[route.routeConfig !.path !];
       }
 
       shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
@@ -3230,15 +3467,17 @@ describe('Integration', () => {
       shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
       store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
       shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
-      retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return null; }
+      retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null { return null; }
       shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
         if (future.routeConfig !== curr.routeConfig) {
           return false;
-        } else if (Object.keys(future.params).length !== Object.keys(curr.params).length) {
-          return false;
-        } else {
-          return Object.keys(future.params).every(k => future.params[k] === curr.params[k]);
         }
+
+        if (Object.keys(future.params).length !== Object.keys(curr.params).length) {
+          return false;
+        }
+
+        return Object.keys(future.params).every(k => future.params[k] === curr.params[k]);
       }
     }
 
@@ -3249,8 +3488,12 @@ describe('Integration', () => {
          router.routeReuseStrategy = new AttachDetachReuseStrategy();
 
          router.resetConfig([
-           {path: 'a', component: TeamCmp, children: [{path: 'b', component: SimpleCmp}]},
-           {path: 'c', component: UserCmp}
+           {
+             path: 'a',
+             component: TeamCmp,
+             children: [{path: 'b', component: SimpleCmp}],
+           },
+           {path: 'c', component: UserCmp},
          ]);
 
          router.navigateByUrl('/a/b');
@@ -3459,7 +3702,7 @@ class RelativeLinkInIfCmp {
 
 @Component(
     {selector: 'child', template: '<div *ngIf="alwaysTrue"><router-outlet></router-outlet></div>'})
-class LinkInNgIf {
+class OutletInNgIf {
   alwaysTrue = true;
 }
 
@@ -3538,7 +3781,7 @@ function createRoot(router: Router, type: any): ComponentFixture<any> {
     QueryParamsAndFragmentCmp,
     StringLinkButtonCmp,
     WrapperCmp,
-    LinkInNgIf,
+    OutletInNgIf,
     ComponentRecordingRoutePathAndUrl,
     RouteCmp,
     RootCmp,
@@ -3564,7 +3807,7 @@ function createRoot(router: Router, type: any): ComponentFixture<any> {
     QueryParamsAndFragmentCmp,
     StringLinkButtonCmp,
     WrapperCmp,
-    LinkInNgIf,
+    OutletInNgIf,
     ComponentRecordingRoutePathAndUrl,
     RouteCmp,
     RootCmp,
@@ -3592,7 +3835,7 @@ function createRoot(router: Router, type: any): ComponentFixture<any> {
     QueryParamsAndFragmentCmp,
     StringLinkButtonCmp,
     WrapperCmp,
-    LinkInNgIf,
+    OutletInNgIf,
     ComponentRecordingRoutePathAndUrl,
     RouteCmp,
     RootCmp,
diff --git a/packages/router/test/recognize.spec.ts b/packages/router/test/recognize.spec.ts
index cf63d18b53..8da65f3f3c 100644
--- a/packages/router/test/recognize.spec.ts
+++ b/packages/router/test/recognize.spec.ts
@@ -16,14 +16,14 @@ describe('recognize', () => {
   it('should work', () => {
     checkRecognize([{path: 'a', component: ComponentA}], 'a', (s: RouterStateSnapshot) => {
       checkActivatedRoute(s.root, '', {}, RootComponent);
-      checkActivatedRoute(s.firstChild(s.root), 'a', {}, ComponentA);
+      checkActivatedRoute(s.firstChild(s.root) !, 'a', {}, ComponentA);
     });
   });
 
   it('should freeze params object', () => {
     checkRecognize([{path: 'a/:id', component: ComponentA}], 'a/10', (s: RouterStateSnapshot) => {
       checkActivatedRoute(s.root, '', {}, RootComponent);
-      const child = s.firstChild(s.root);
+      const child = s.firstChild(s.root) !;
       expect(Object.isFrozen(child.params)).toBeTruthy();
     });
   });
@@ -79,11 +79,11 @@ describe('recognize', () => {
           expect(s.root._urlSegment).toBe(url.root);
           expect(s.root._lastPathIndex).toBe(-1);
 
-          const compA = s.firstChild(s.root);
+          const compA = s.firstChild(s.root) !;
           expect(compA._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
           expect(compA._lastPathIndex).toBe(1);
 
-          const compC = s.firstChild(<any>compA);
+          const compC = s.firstChild(<any>compA) !;
           expect(compC._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
           expect(compC._lastPathIndex).toBe(2);
         });
@@ -101,11 +101,11 @@ describe('recognize', () => {
           expect(s.root._urlSegment).toBe(url.root);
           expect(s.root._lastPathIndex).toBe(-1);
 
-          const compA = s.firstChild(s.root);
+          const compA = s.firstChild(s.root) !;
           expect(compA._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
           expect(compA._lastPathIndex).toBe(0);
 
-          const compC = s.firstChild(<any>compA);
+          const compC = s.firstChild(<any>compA) !;
           expect(compC._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
           expect(compC._lastPathIndex).toBe(2);
         });
@@ -119,16 +119,16 @@ describe('recognize', () => {
         ],
         'a/paramA', (s: RouterStateSnapshot) => {
           checkActivatedRoute(s.root, '', {}, RootComponent);
-          checkActivatedRoute(s.firstChild(s.root), 'a', {}, ComponentA);
+          checkActivatedRoute(s.firstChild(s.root) !, 'a', {}, ComponentA);
           checkActivatedRoute(
-              s.firstChild(<any>s.firstChild(s.root)), 'paramA', {id: 'paramA'}, ComponentB);
+              s.firstChild(<any>s.firstChild(s.root)) !, 'paramA', {id: 'paramA'}, ComponentB);
         });
 
     checkRecognize(
         [{path: 'a', component: ComponentA}, {path: 'a/:id', component: ComponentC}], 'a/paramA',
         (s: RouterStateSnapshot) => {
           checkActivatedRoute(s.root, '', {}, RootComponent);
-          checkActivatedRoute(s.firstChild(s.root), 'a/paramA', {id: 'paramA'}, ComponentC);
+          checkActivatedRoute(s.firstChild(s.root) !, 'a/paramA', {id: 'paramA'}, ComponentC);
         });
   });
 
@@ -187,7 +187,7 @@ describe('recognize', () => {
         'a;a1=11;a2=22/b;b1=111;b2=222(left:c;c1=1111;c2=2222)', (s: RouterStateSnapshot) => {
           const c = s.children(s.root);
           checkActivatedRoute(c[0], 'a', {a1: '11', a2: '22'}, ComponentA);
-          checkActivatedRoute(s.firstChild(<any>c[0]), 'b', {b1: '111', b2: '222'}, ComponentB);
+          checkActivatedRoute(s.firstChild(<any>c[0]) !, 'b', {b1: '111', b2: '222'}, ComponentB);
           checkActivatedRoute(c[1], 'c', {c1: '1111', c2: '2222'}, ComponentC, 'left');
         });
   });
@@ -196,7 +196,7 @@ describe('recognize', () => {
     it('should set static data', () => {
       checkRecognize(
           [{path: 'a', data: {one: 1}, component: ComponentA}], 'a', (s: RouterStateSnapshot) => {
-            const r: ActivatedRouteSnapshot = s.firstChild(s.root);
+            const r: ActivatedRouteSnapshot = s.firstChild(s.root) !;
             expect(r.data).toEqual({one: 1});
           });
     });
@@ -209,7 +209,7 @@ describe('recognize', () => {
             children: [{path: 'b', data: {two: 2}, component: ComponentB}]
           }],
           'a/b', (s: RouterStateSnapshot) => {
-            const r: ActivatedRouteSnapshot = s.firstChild(<any>s.firstChild(s.root));
+            const r: ActivatedRouteSnapshot = s.firstChild(<any>s.firstChild(s.root)) !;
             expect(r.data).toEqual({one: 1, two: 2});
           });
     });
@@ -218,7 +218,7 @@ describe('recognize', () => {
       checkRecognize(
           [{path: 'a', resolve: {one: 'some-token'}, component: ComponentA}], 'a',
           (s: RouterStateSnapshot) => {
-            const r: ActivatedRouteSnapshot = s.firstChild(s.root);
+            const r: ActivatedRouteSnapshot = s.firstChild(s.root) !;
             expect(r._resolve).toEqual({one: 'some-token'});
           });
     });
@@ -228,7 +228,7 @@ describe('recognize', () => {
     describe('root', () => {
       it('should work', () => {
         checkRecognize([{path: '', component: ComponentA}], '', (s: RouterStateSnapshot) => {
-          checkActivatedRoute(s.firstChild(s.root), '', {}, ComponentA);
+          checkActivatedRoute(s.firstChild(s.root) !, '', {}, ComponentA);
         });
       });
 
@@ -236,7 +236,7 @@ describe('recognize', () => {
         checkRecognize(
             [{path: '', pathMatch: 'full', component: ComponentA}], '',
             (s: RouterStateSnapshot) => {
-              checkActivatedRoute(s.firstChild(s.root), '', {}, ComponentA);
+              checkActivatedRoute(s.firstChild(s.root) !, '', {}, ComponentA);
             });
       });
 
@@ -244,8 +244,8 @@ describe('recognize', () => {
         checkRecognize(
             [{path: '', component: ComponentA, children: [{path: '', component: ComponentB}]}], '',
             (s: RouterStateSnapshot) => {
-              checkActivatedRoute(s.firstChild(s.root), '', {}, ComponentA);
-              checkActivatedRoute(s.firstChild(<any>s.firstChild(s.root)), '', {}, ComponentB);
+              checkActivatedRoute(s.firstChild(s.root) !, '', {}, ComponentA);
+              checkActivatedRoute(s.firstChild(<any>s.firstChild(s.root)) !, '', {}, ComponentB);
             });
       });
 
@@ -259,11 +259,11 @@ describe('recognize', () => {
               expect(s.root._urlSegment).toBe(url.root);
               expect(s.root._lastPathIndex).toBe(-1);
 
-              const c = s.firstChild(s.root);
+              const c = s.firstChild(s.root) !;
               expect(c._urlSegment).toBe(url.root);
               expect(c._lastPathIndex).toBe(-1);
 
-              const c2 = s.firstChild(<any>s.firstChild(s.root));
+              const c2 = s.firstChild(<any>s.firstChild(s.root)) !;
               expect(c2._urlSegment).toBe(url.root);
               expect(c2._lastPathIndex).toBe(-1);
             });
@@ -279,10 +279,10 @@ describe('recognize', () => {
               ]
             }],
             '/a;p=1', (s: RouterStateSnapshot) => {
-              checkActivatedRoute(s.firstChild(s.root), 'a', {p: '1'}, ComponentA);
-              checkActivatedRoute(s.firstChild(s.firstChild(s.root)), '', {p: '1'}, ComponentB);
+              checkActivatedRoute(s.firstChild(s.root) !, 'a', {p: '1'}, ComponentA);
+              checkActivatedRoute(s.firstChild(s.firstChild(s.root) !) !, '', {p: '1'}, ComponentB);
               checkActivatedRoute(
-                  s.firstChild(s.firstChild(s.firstChild(s.root))), '', {p: '1'}, ComponentC);
+                  s.firstChild(s.firstChild(s.firstChild(s.root) !) !) !, '', {p: '1'}, ComponentC);
             });
       });
     });
@@ -299,9 +299,9 @@ describe('recognize', () => {
               ]
             }],
             'a/b', (s: RouterStateSnapshot) => {
-              checkActivatedRoute(s.firstChild(s.root), 'a', {}, ComponentA);
+              checkActivatedRoute(s.firstChild(s.root) !, 'a', {}, ComponentA);
 
-              const c = s.children(s.firstChild(s.root));
+              const c = s.children(s.firstChild(s.root) !);
               checkActivatedRoute(c[0], 'b', {}, ComponentB);
               checkActivatedRoute(c[1], '', {}, ComponentC, 'aux');
             });
@@ -330,13 +330,13 @@ describe('recognize', () => {
 
            checkRecognize(config, 'parent/b', (s: RouterStateSnapshot) => {
              checkActivatedRoute(s.root, '', {}, RootComponent);
-             checkActivatedRoute(s.firstChild(s.root), 'parent', {}, undefined);
+             checkActivatedRoute(s.firstChild(s.root) !, 'parent', {}, undefined !);
 
-             const cc = s.children(s.firstChild(s.root));
+             const cc = s.children(s.firstChild(s.root) !);
              checkActivatedRoute(cc[0], '', {}, ComponentA);
              checkActivatedRoute(cc[1], '', {}, ComponentD, 'secondary');
 
-             checkActivatedRoute(s.firstChild(cc[0]), 'b', {}, ComponentB);
+             checkActivatedRoute(s.firstChild(cc[0]) !, 'b', {}, ComponentB);
            });
          });
 
@@ -351,9 +351,9 @@ describe('recognize', () => {
               ]
             }],
             'a/b', (s: RouterStateSnapshot) => {
-              checkActivatedRoute(s.firstChild(s.root), 'a', {}, ComponentA);
+              checkActivatedRoute(s.firstChild(s.root) !, 'a', {}, ComponentA);
 
-              const c = s.children(s.firstChild(s.root));
+              const c = s.children(s.firstChild(s.root) !);
               expect(c.length).toEqual(1);
               checkActivatedRoute(c[0], 'b', {}, ComponentB);
             });
@@ -375,11 +375,11 @@ describe('recognize', () => {
               expect(s.root._urlSegment).toBe(url.root);
               expect(s.root._lastPathIndex).toBe(-1);
 
-              const a = s.firstChild(s.root);
+              const a = s.firstChild(s.root) !;
               expect(a._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
               expect(a._lastPathIndex).toBe(0);
 
-              const b = s.firstChild(a);
+              const b = s.firstChild(a) !;
               expect(b._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
               expect(b._lastPathIndex).toBe(1);
 
@@ -403,15 +403,15 @@ describe('recognize', () => {
               expect(s.root._urlSegment).toBe(url.root);
               expect(s.root._lastPathIndex).toBe(-1);
 
-              const a = s.firstChild(s.root);
+              const a = s.firstChild(s.root) !;
               expect(a._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
               expect(a._lastPathIndex).toBe(0);
 
-              const b = s.firstChild(a);
+              const b = s.firstChild(a) !;
               expect(b._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
               expect(b._lastPathIndex).toBe(0);
 
-              const c = s.firstChild(b);
+              const c = s.firstChild(b) !;
               expect(c._urlSegment).toBe(url.root.children[PRIMARY_OUTLET]);
               expect(c._lastPathIndex).toBe(0);
             });
@@ -431,15 +431,15 @@ describe('recognize', () => {
               expect(s.root._urlSegment).toBe(url.root);
               expect(s.root._lastPathIndex).toBe(-1);
 
-              const a = s.firstChild(s.root);
+              const a = s.firstChild(s.root) !;
               expect(a._urlSegment).toBe(url.root);
               expect(a._lastPathIndex).toBe(-1);
 
-              const b = s.firstChild(a);
+              const b = s.firstChild(a) !;
               expect(b._urlSegment).toBe(url.root);
               expect(b._lastPathIndex).toBe(-1);
 
-              const c = s.firstChild(b);
+              const c = s.firstChild(b) !;
               expect(c._urlSegment).toBe(url.root);
               expect(c._lastPathIndex).toBe(-1);
             });
@@ -458,9 +458,9 @@ describe('recognize', () => {
               ]
             }],
             'a', (s: RouterStateSnapshot) => {
-              checkActivatedRoute(s.firstChild(s.root), 'a', {}, ComponentA);
+              checkActivatedRoute(s.firstChild(s.root) !, 'a', {}, ComponentA);
 
-              const c = s.children(s.firstChild(s.root));
+              const c = s.children(s.firstChild(s.root) !);
               checkActivatedRoute(c[0], '', {}, ComponentB);
               checkActivatedRoute(c[1], '', {}, ComponentC, 'aux');
             });
@@ -477,9 +477,9 @@ describe('recognize', () => {
               ]
             }],
             'a', (s: RouterStateSnapshot) => {
-              checkActivatedRoute(s.firstChild(s.root), 'a', {}, ComponentA);
+              checkActivatedRoute(s.firstChild(s.root) !, 'a', {}, ComponentA);
 
-              const c = s.children(s.firstChild(s.root));
+              const c = s.children(s.firstChild(s.root) !);
               checkActivatedRoute(c[0], '', {}, ComponentB);
               checkActivatedRoute(c[1], '', {}, ComponentC, 'aux');
             });
@@ -496,9 +496,9 @@ describe('recognize', () => {
               ]
             }],
             'a/(aux:c)', (s: RouterStateSnapshot) => {
-              checkActivatedRoute(s.firstChild(s.root), 'a', {}, ComponentA);
+              checkActivatedRoute(s.firstChild(s.root) !, 'a', {}, ComponentA);
 
-              const c = s.children(s.firstChild(s.root));
+              const c = s.children(s.firstChild(s.root) !);
               checkActivatedRoute(c[0], '', {}, ComponentB);
               checkActivatedRoute(c[1], 'c', {}, ComponentC, 'aux');
             });
@@ -538,13 +538,13 @@ describe('recognize', () => {
               ]
             }],
             'a/(d//aux:e)', (s: RouterStateSnapshot) => {
-              checkActivatedRoute(s.firstChild(s.root), 'a', {}, ComponentA);
+              checkActivatedRoute(s.firstChild(s.root) !, 'a', {}, ComponentA);
 
-              const c = s.children(s.firstChild(s.root));
+              const c = s.children(s.firstChild(s.root) !);
               checkActivatedRoute(c[0], '', {}, ComponentB);
-              checkActivatedRoute(s.firstChild(c[0]), 'd', {}, ComponentD);
+              checkActivatedRoute(s.firstChild(c[0]) !, 'd', {}, ComponentD);
               checkActivatedRoute(c[1], '', {}, ComponentC, 'aux');
-              checkActivatedRoute(s.firstChild(c[1]), 'e', {}, ComponentE);
+              checkActivatedRoute(s.firstChild(c[1]) !, 'e', {}, ComponentE);
             });
       });
     });
@@ -554,7 +554,7 @@ describe('recognize', () => {
     it('should support simple wildcards', () => {
       checkRecognize(
           [{path: '**', component: ComponentA}], 'a/b/c/d;a1=11', (s: RouterStateSnapshot) => {
-            checkActivatedRoute(s.firstChild(s.root), 'a/b/c/d', {a1: '11'}, ComponentA);
+            checkActivatedRoute(s.firstChild(s.root) !, 'a/b/c/d', {a1: '11'}, ComponentA);
           });
     });
   });
@@ -570,8 +570,8 @@ describe('recognize', () => {
             ]
           }],
           'p/11;pp=22/(a;pa=33//aux:b;pb=44)', (s: RouterStateSnapshot) => {
-            const p = s.firstChild(s.root);
-            checkActivatedRoute(p, 'p/11', {id: '11', pp: '22'}, undefined);
+            const p = s.firstChild(s.root) !;
+            checkActivatedRoute(p, 'p/11', {id: '11', pp: '22'}, undefined !);
 
             const c = s.children(p);
             checkActivatedRoute(c[0], 'a', {id: '11', pp: '22', pa: '33'}, ComponentA);
@@ -593,16 +593,16 @@ describe('recognize', () => {
             }]
           }],
           'p/11/a/victor/b/c', (s: RouterStateSnapshot) => {
-            const p = s.firstChild(s.root);
-            checkActivatedRoute(p, 'p/11', {id: '11'}, undefined);
+            const p = s.firstChild(s.root) !;
+            checkActivatedRoute(p, 'p/11', {id: '11'}, undefined !);
 
-            const a = s.firstChild(p);
-            checkActivatedRoute(a, 'a/victor', {id: '11', name: 'victor'}, undefined);
+            const a = s.firstChild(p) !;
+            checkActivatedRoute(a, 'a/victor', {id: '11', name: 'victor'}, undefined !);
 
-            const b = s.firstChild(a);
+            const b = s.firstChild(a) !;
             checkActivatedRoute(b, 'b', {id: '11', name: 'victor'}, ComponentB);
 
-            const c = s.firstChild(b);
+            const c = s.firstChild(b) !;
             checkActivatedRoute(c, 'c', {}, ComponentC);
           });
     });
@@ -614,7 +614,7 @@ describe('recognize', () => {
           [{path: 'a', component: ComponentA, children: [{path: 'b', component: ComponentB}]}],
           '/a', (s: RouterStateSnapshot) => {
             const a = s.firstChild(s.root);
-            checkActivatedRoute(a, 'a', {}, ComponentA);
+            checkActivatedRoute(a !, 'a', {}, ComponentA);
           });
     });
 
@@ -629,7 +629,7 @@ describe('recognize', () => {
             ]
           }],
           '/a', (s: RouterStateSnapshot) => {
-            const a = s.firstChild(s.root);
+            const a = s.firstChild(s.root) !;
             checkActivatedRoute(a, 'a', {}, ComponentA);
             checkActivatedRoute(a.children[0], '', {}, ComponentC, 'aux');
           });
@@ -651,11 +651,31 @@ describe('recognize', () => {
             matcher: matcher,
             component: ComponentA,
             children: [{path: 'b', component: ComponentB}]
-          }],
+          }] as any,
           '/a/1;p=99/b', (s: RouterStateSnapshot) => {
-            const a = s.root.firstChild;
+            const a = s.root.firstChild !;
             checkActivatedRoute(a, 'a/1', {id: '1', p: '99'}, ComponentA);
-            checkActivatedRoute(a.firstChild, 'b', {}, ComponentB);
+            checkActivatedRoute(a.firstChild !, 'b', {}, ComponentB);
+          });
+    });
+
+    it('should work with terminal route', () => {
+      const matcher = (s: any, g: any, r: any) => s.length === 0 ? ({consumed: s}) : null;
+
+      checkRecognize([{matcher, component: ComponentA}] as any, '', (s: RouterStateSnapshot) => {
+        const a = s.root.firstChild !;
+        checkActivatedRoute(a, '', {}, ComponentA);
+      });
+    });
+
+    it('should work with child terminal route', () => {
+      const matcher = (s: any, g: any, r: any) => s.length === 0 ? ({consumed: s}) : null;
+
+      checkRecognize(
+          [{path: 'a', component: ComponentA, children: [{matcher, component: ComponentB}]}] as any,
+          'a', (s: RouterStateSnapshot) => {
+            const a = s.root.firstChild !;
+            checkActivatedRoute(a, 'a', {}, ComponentA);
           });
     });
   });
diff --git a/packages/router/test/regression_integration.spec.ts b/packages/router/test/regression_integration.spec.ts
new file mode 100644
index 0000000000..ddfcd2af38
--- /dev/null
+++ b/packages/router/test/regression_integration.spec.ts
@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {Component, NgModule, Type} from '@angular/core';
+import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
+import {Router} from '@angular/router';
+import {RouterTestingModule} from '@angular/router/testing';
+
+describe('Integration', () => {
+
+  describe('routerLinkActive', () => {
+    it('should not cause infinite loops in the change detection - #15825', fakeAsync(() => {
+         @Component({selector: 'simple', template: 'simple'})
+         class SimpleCmp {
+         }
+
+         @Component({
+           selector: 'some-root',
+           template: `
+        <div *ngIf="show">
+          <ng-container *ngTemplateOutlet="tpl"></ng-container>
+        </div>
+        <router-outlet></router-outlet>
+        <ng-template #tpl>
+          <a routerLink="/simple" routerLinkActive="active"></a>
+        </ng-template>`
+         })
+         class MyCmp {
+           show: boolean = false;
+         }
+
+         @NgModule({
+           imports: [CommonModule, RouterTestingModule],
+           declarations: [MyCmp, SimpleCmp],
+           entryComponents: [SimpleCmp],
+         })
+         class MyModule {
+         }
+
+         TestBed.configureTestingModule({imports: [MyModule]});
+
+         const router: Router = TestBed.get(Router);
+         const fixture = createRoot(router, MyCmp);
+         router.resetConfig([{path: 'simple', component: SimpleCmp}]);
+
+         router.navigateByUrl('/simple');
+         advance(fixture);
+
+         const instance = fixture.componentInstance;
+         instance.show = true;
+         expect(() => advance(fixture)).not.toThrow();
+       }));
+  });
+
+});
+
+function advance<T>(fixture: ComponentFixture<T>): void {
+  tick();
+  fixture.detectChanges();
+}
+
+function createRoot<T>(router: Router, type: Type<T>): ComponentFixture<T> {
+  const f = TestBed.createComponent(type);
+  advance(f);
+  router.initialNavigation();
+  advance(f);
+  return f;
+}
diff --git a/packages/router/test/router.spec.ts b/packages/router/test/router.spec.ts
index 6f293266ad..7ea6d6bac9 100644
--- a/packages/router/test/router.spec.ts
+++ b/packages/router/test/router.spec.ts
@@ -11,7 +11,7 @@ import {TestBed, inject} from '@angular/core/testing';
 
 import {ResolveData} from '../src/config';
 import {PreActivation, Router} from '../src/router';
-import {RouterOutletMap} from '../src/router_outlet_map';
+import {ChildrenOutletContexts} from '../src/router_outlet_context';
 import {ActivatedRouteSnapshot, RouterStateSnapshot, createEmptyStateSnapshot} from '../src/router_state';
 import {DefaultUrlSerializer} from '../src/url_tree';
 import {TreeNode} from '../src/utils/tree';
@@ -36,7 +36,7 @@ describe('Router', () => {
   describe('setUpLocationChangeListener', () => {
     beforeEach(() => { TestBed.configureTestingModule({imports: [RouterTestingModule]}); });
 
-    it('should be indempotent', inject([Router, Location], (r: Router, location: Location) => {
+    it('should be idempotent', inject([Router, Location], (r: Router, location: Location) => {
          r.setUpLocationChangeListener();
          const a = (<any>r).locationSubscription;
          r.setUpLocationChangeListener();
@@ -57,7 +57,7 @@ describe('Router', () => {
     const inj = {get: (token: any) => () => `${token}_value`};
     let empty: RouterStateSnapshot;
 
-    beforeEach(() => { empty = createEmptyStateSnapshot(serializer.parse('/'), null); });
+    beforeEach(() => { empty = createEmptyStateSnapshot(serializer.parse('/'), null !); });
 
     it('should resolve data', () => {
       const r = {data: 'resolver'};
@@ -65,7 +65,7 @@ describe('Router', () => {
       const s = new RouterStateSnapshot('url', new TreeNode(empty.root, [new TreeNode(n, [])]));
 
       checkResolveData(s, empty, inj, () => {
-        expect(s.root.firstChild.data).toEqual({data: 'resolver_value'});
+        expect(s.root.firstChild !.data).toEqual({data: 'resolver_value'});
       });
     });
 
@@ -73,7 +73,7 @@ describe('Router', () => {
       const parentResolve = {data: 'resolver'};
       const childResolve = {};
 
-      const parent = createActivatedRouteSnapshot(null, {resolve: parentResolve});
+      const parent = createActivatedRouteSnapshot(null !, {resolve: parentResolve});
       const child = createActivatedRouteSnapshot('b', {resolve: childResolve});
 
       const s = new RouterStateSnapshot(
@@ -82,7 +82,7 @@ describe('Router', () => {
       const inj = {get: (token: any) => () => Promise.resolve(`${token}_value`)};
 
       checkResolveData(s, empty, inj, () => {
-        expect(s.root.firstChild.firstChild.data).toEqual({data: 'resolver_value'});
+        expect(s.root.firstChild !.firstChild !.data).toEqual({data: 'resolver_value'});
       });
     });
 
@@ -99,8 +99,8 @@ describe('Router', () => {
       const s2 = new RouterStateSnapshot(
           'url', new TreeNode(empty.root, [new TreeNode(n21, [new TreeNode(n22, [])])]));
       checkResolveData(s2, s1, inj, () => {
-        expect(s2.root.firstChild.data).toEqual({data: 'resolver1_value'});
-        expect(s2.root.firstChild.firstChild.data).toEqual({data: 'resolver2_value'});
+        expect(s2.root.firstChild !.data).toEqual({data: 'resolver1_value'});
+        expect(s2.root.firstChild !.firstChild !.data).toEqual({data: 'resolver2_value'});
       });
     });
   });
@@ -109,7 +109,7 @@ describe('Router', () => {
 function checkResolveData(
     future: RouterStateSnapshot, curr: RouterStateSnapshot, injector: any, check: any): void {
   const p = new PreActivation(future, curr, injector);
-  p.traverse(new RouterOutletMap());
+  p.traverse(new ChildrenOutletContexts());
   p.resolveData().subscribe(check, (e) => { throw e; });
 }
 
diff --git a/packages/router/test/router_preloader.spec.ts b/packages/router/test/router_preloader.spec.ts
index be48638ffe..3e12280f3a 100644
--- a/packages/router/test/router_preloader.spec.ts
+++ b/packages/router/test/router_preloader.spec.ts
@@ -10,7 +10,7 @@ import {Compiler, Component, NgModule, NgModuleFactoryLoader, NgModuleRef} from
 import {TestBed, fakeAsync, inject, tick} from '@angular/core/testing';
 
 import {Route, RouteConfigLoadEnd, RouteConfigLoadStart, Router, RouterModule} from '../index';
-import {LoadedRouterConfig} from '../src/router_config_loader';
+import {LoadedRouterConfig} from '../src/config';
 import {PreloadAllModules, PreloadingStrategy, RouterPreloader} from '../src/router_preloader';
 import {RouterTestingModule, SpyNgModuleFactoryLoader} from '../testing';
 
@@ -46,7 +46,7 @@ describe('RouterPreloader', () => {
              tick();
 
              const c = router.config;
-             expect(!!((<any>c[0])._loadedConfig)).toBe(false);
+             expect(c[0]._loadedConfig).not.toBeDefined();
            })));
   });
 
@@ -97,15 +97,15 @@ describe('RouterPreloader', () => {
              const c = router.config;
              expect(c[0].loadChildren).toEqual('expected');
 
-             const loadedConfig: LoadedRouterConfig = (<any>c[0])._loadedConfig;
+             const loadedConfig: LoadedRouterConfig = c[0]._loadedConfig !;
              const module: any = loadedConfig.module;
              expect(loadedConfig.routes[0].path).toEqual('LoadedModule1');
-             expect(module.parent).toBe(testModule);
+             expect(module._parent).toBe(testModule);
 
-             const loadedConfig2: LoadedRouterConfig = (<any>loadedConfig.routes[0])._loadedConfig;
+             const loadedConfig2: LoadedRouterConfig = loadedConfig.routes[0]._loadedConfig !;
              const module2: any = loadedConfig2.module;
              expect(loadedConfig2.routes[0].path).toEqual('LoadedModule2');
-             expect(module2.parent).toBe(module);
+             expect(module2._parent).toBe(module);
 
              expect(events.map(e => e.toString())).toEqual([
                'RouteConfigLoadStart(path: lazy)',
@@ -165,14 +165,14 @@ describe('RouterPreloader', () => {
 
              const c = router.config;
 
-             const loadedConfig: LoadedRouterConfig = (<any>c[0])._loadedConfig;
+             const loadedConfig: LoadedRouterConfig = c[0]._loadedConfig !;
              const module: any = loadedConfig.module;
-             expect(module.parent).toBe(testModule);
+             expect(module._parent).toBe(testModule);
 
-             const loadedConfig2: LoadedRouterConfig = (<any>loadedConfig.routes[0])._loadedConfig;
-             const loadedConfig3: LoadedRouterConfig = (<any>loadedConfig2.routes[0])._loadedConfig;
+             const loadedConfig2: LoadedRouterConfig = loadedConfig.routes[0]._loadedConfig !;
+             const loadedConfig3: LoadedRouterConfig = loadedConfig2.routes[0]._loadedConfig !;
              const module3: any = loadedConfig3.module;
-             expect(module3.parent).toBe(module2);
+             expect(module3._parent).toBe(module2);
            })));
   });
 
@@ -204,8 +204,8 @@ describe('RouterPreloader', () => {
              tick();
 
              const c = router.config;
-             expect(!!((<any>c[0])._loadedConfig)).toBe(false);
-             expect(!!((<any>c[1])._loadedConfig)).toBe(true);
+             expect(c[0]._loadedConfig).not.toBeDefined();
+             expect(c[1]._loadedConfig).toBeDefined();
            })));
   });
 });
diff --git a/packages/router/test/router_state.spec.ts b/packages/router/test/router_state.spec.ts
index 6417c7d9d7..f813d6c050 100644
--- a/packages/router/test/router_state.spec.ts
+++ b/packages/router/test/router_state.spec.ts
@@ -39,17 +39,17 @@ describe('RouterState & Snapshot', () => {
     });
 
     it('should return root', () => {
-      const b = state.root.firstChild;
+      const b = state.root.firstChild !;
       expect(b.root).toBe(state.root);
     });
 
     it('should return parent', () => {
-      const b = state.root.firstChild;
+      const b = state.root.firstChild !;
       expect(b.parent).toBe(state.root);
     });
 
     it('should return path from root', () => {
-      const b = state.root.firstChild;
+      const b = state.root.firstChild !;
       const p = b.pathFromRoot;
       expect(p[0]).toBe(state.root);
       expect(p[1]).toBe(b);
@@ -81,17 +81,17 @@ describe('RouterState & Snapshot', () => {
     });
 
     it('should return root', () => {
-      const b = state.root.firstChild;
+      const b = state.root.firstChild !;
       expect(b.root).toBe(state.root);
     });
 
     it('should return parent', () => {
-      const b = state.root.firstChild;
+      const b = state.root.firstChild !;
       expect(b.parent).toBe(state.root);
     });
 
     it('should return path from root', () => {
-      const b = state.root.firstChild;
+      const b = state.root.firstChild !;
       const p = b.pathFromRoot;
       expect(p[0]).toBe(state.root);
       expect(p[1]).toBe(b);
@@ -102,7 +102,7 @@ describe('RouterState & Snapshot', () => {
     function createSnapshot(params: Params, url: UrlSegment[]): ActivatedRouteSnapshot {
       const snapshot = new ActivatedRouteSnapshot(
           url, params, <any>null, <any>null, <any>null, <any>null, <any>null, <any>null, <any>null,
-          -1, null);
+          -1, null !);
       snapshot._routerState = new RouterStateSnapshot('', new TreeNode(snapshot, []));
       return snapshot;
     }
@@ -177,7 +177,7 @@ describe('RouterState & Snapshot', () => {
       const data = {};
       const snapshot = new ActivatedRouteSnapshot(
           url, params, queryParams, fragment, data, <any>null, <any>null, <any>null, <any>null, -1,
-          null);
+          null !);
       const state = new RouterStateSnapshot('', new TreeNode(snapshot, []));
       snapshot._routerState = state;
       return snapshot;
@@ -200,7 +200,7 @@ describe('RouterState & Snapshot', () => {
 function createActivatedRouteSnapshot(cmp: string) {
   return new ActivatedRouteSnapshot(
       <any>null, <any>null, <any>null, <any>null, <any>null, <any>null, <any>cmp, <any>null,
-      <any>null, -1, null);
+      <any>null, -1, null !);
 }
 
 function createActivatedRoute(cmp: string) {
diff --git a/packages/router/test/url_serializer.spec.ts b/packages/router/test/url_serializer.spec.ts
index 3314f9fc69..a318011b10 100644
--- a/packages/router/test/url_serializer.spec.ts
+++ b/packages/router/test/url_serializer.spec.ts
@@ -219,6 +219,22 @@ describe('url serializer', () => {
       expect(url.serialize(tree)).toEqual(u);
     });
 
+    it('should encode query params leaving sub-delimiters intact', () => {
+      const percentChars = '/?#[]&+= ';
+      const percentCharsEncoded = '%2F%3F%23%5B%5D%26%2B%3D%20';
+      const intactChars = '!$\'()*,;:';
+      const params = percentChars + intactChars;
+      const paramsEncoded = percentCharsEncoded + intactChars;
+      const mixedCaseString = 'sTrInG';
+
+      expect(percentCharsEncoded).toEqual(encode(percentChars));
+      expect(intactChars).toEqual(encode(intactChars));
+      // Verify it replaces repeated characters correctly
+      expect(paramsEncoded + paramsEncoded).toEqual(encode(params + params));
+      // Verify it doesn't change the case of alpha characters
+      expect(mixedCaseString + paramsEncoded).toEqual(encode(mixedCaseString + params));
+    });
+
     it('should encode/decode fragment', () => {
       const u = `/one#${encodeURI("one two=three four")}`;
       const tree = url.parse(u);
diff --git a/packages/router/testing/rollup.config.js b/packages/router/testing/rollup.config.js
index 326640c95e..37123bf13c 100644
--- a/packages/router/testing/rollup.config.js
+++ b/packages/router/testing/rollup.config.js
@@ -6,17 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/common/testing': 'ng.common.testing',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/router': 'ng.router'
+};
+
 export default {
   entry: '../../../dist/packages-dist/router/@angular/router/testing.es5.js',
   dest: '../../../dist/packages-dist/router/bundles/router-testing.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.router.testing',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/common/testing': 'ng.common.testing',
-    '@angular/platform-browser': 'ng.platformBrowser',
-    '@angular/router': 'ng.router'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/router/testing/src/router_testing_module.ts b/packages/router/testing/src/router_testing_module.ts
index 379abe7186..650502d11c 100644
--- a/packages/router/testing/src/router_testing_module.ts
+++ b/packages/router/testing/src/router_testing_module.ts
@@ -9,7 +9,7 @@
 import {Location, LocationStrategy} from '@angular/common';
 import {MockLocationStrategy, SpyLocation} from '@angular/common/testing';
 import {Compiler, Injectable, Injector, ModuleWithProviders, NgModule, NgModuleFactory, NgModuleFactoryLoader, Optional} from '@angular/core';
-import {NoPreloading, PreloadingStrategy, ROUTES, Route, Router, RouterModule, RouterOutletMap, Routes, UrlHandlingStrategy, UrlSerializer, provideRoutes, ɵROUTER_PROVIDERS as ROUTER_PROVIDERS, ɵflatten as flatten} from '@angular/router';
+import {ChildrenOutletContexts, NoPreloading, PreloadingStrategy, ROUTES, Route, Router, RouterModule, Routes, UrlHandlingStrategy, UrlSerializer, provideRoutes, ɵROUTER_PROVIDERS as ROUTER_PROVIDERS, ɵflatten as flatten} from '@angular/router';
 
 
 
@@ -82,11 +82,11 @@ export class SpyNgModuleFactoryLoader implements NgModuleFactoryLoader {
  * @stable
  */
 export function setupTestingRouter(
-    urlSerializer: UrlSerializer, outletMap: RouterOutletMap, location: Location,
+    urlSerializer: UrlSerializer, contexts: ChildrenOutletContexts, location: Location,
     loader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, routes: Route[][],
     urlHandlingStrategy?: UrlHandlingStrategy) {
   const router = new Router(
-      null, urlSerializer, outletMap, location, injector, loader, compiler, flatten(routes));
+      null !, urlSerializer, contexts, location, injector, loader, compiler, flatten(routes));
   if (urlHandlingStrategy) {
     router.urlHandlingStrategy = urlHandlingStrategy;
   }
@@ -127,8 +127,8 @@ export function setupTestingRouter(
       provide: Router,
       useFactory: setupTestingRouter,
       deps: [
-        UrlSerializer, RouterOutletMap, Location, NgModuleFactoryLoader, Compiler, Injector, ROUTES,
-        [UrlHandlingStrategy, new Optional()]
+        UrlSerializer, ChildrenOutletContexts, Location, NgModuleFactoryLoader, Compiler, Injector,
+        ROUTES, [UrlHandlingStrategy, new Optional()]
       ]
     },
     {provide: PreloadingStrategy, useExisting: NoPreloading}, provideRoutes([])
diff --git a/packages/router/tsconfig-build.json b/packages/router/tsconfig-build.json
index 5dd5e957d4..5cca1d6c13 100644
--- a/packages/router/tsconfig-build.json
+++ b/packages/router/tsconfig-build.json
@@ -10,6 +10,7 @@
     "noEmitOnError": false,
     "noImplicitAny": true,
     "noImplicitReturns": true,
+    "strictNullChecks": true,
     "outDir": "../../dist/packages/router",
     "paths": {
       "@angular/core": ["../../dist/packages/core"],
diff --git a/packages/router/upgrade/rollup.config.js b/packages/router/upgrade/rollup.config.js
index 135f57cefd..565e9cadde 100644
--- a/packages/router/upgrade/rollup.config.js
+++ b/packages/router/upgrade/rollup.config.js
@@ -6,16 +6,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/router': 'ng.router',
+  '@angular/upgrade/static': 'ng.upgrade.static'
+};
+
 export default {
   entry: '../../../dist/packages-dist/router/@angular/router/upgrade.es5.js',
   dest: '../../../dist/packages-dist/router/bundles/router-upgrade.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.router.upgrade',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/router': 'ng.router',
-    '@angular/upgrade/static': 'ng.upgrade.static'
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/router/upgrade/src/upgrade.ts b/packages/router/upgrade/src/upgrade.ts
index 123327ba9c..82336fd35d 100644
--- a/packages/router/upgrade/src/upgrade.ts
+++ b/packages/router/upgrade/src/upgrade.ts
@@ -71,6 +71,6 @@ export function setUpLocationSync(ngUpgrade: UpgradeModule) {
   ngUpgrade.$injector.get('$rootScope')
       .$on('$locationChangeStart', (_: any, next: string, __: string) => {
         url.href = next;
-        router.navigateByUrl(url.pathname);
+        router.navigateByUrl(url.pathname + url.search + url.hash);
       });
 }
diff --git a/packages/tsc-wrapped/BUILD.bazel b/packages/tsc-wrapped/BUILD.bazel
new file mode 100644
index 0000000000..f86cf576c8
--- /dev/null
+++ b/packages/tsc-wrapped/BUILD.bazel
@@ -0,0 +1,11 @@
+package(default_visibility=["//visibility:public"])
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+ts_library(
+    name = "tsc-wrapped",
+    srcs = glob(["**/*.ts"], exclude=[
+      "test/**",
+    ]),
+    module_name = "@angular/tsc-wrapped",
+    tsconfig = ":tsconfig-build.json",
+)
diff --git a/tools/@angular/tsc-wrapped/README.md b/packages/tsc-wrapped/README.md
similarity index 100%
rename from tools/@angular/tsc-wrapped/README.md
rename to packages/tsc-wrapped/README.md
diff --git a/tools/@angular/tsc-wrapped/index.ts b/packages/tsc-wrapped/index.ts
similarity index 85%
rename from tools/@angular/tsc-wrapped/index.ts
rename to packages/tsc-wrapped/index.ts
index 4be0a54545..f939fbfdcb 100644
--- a/tools/@angular/tsc-wrapped/index.ts
+++ b/packages/tsc-wrapped/index.ts
@@ -7,7 +7,7 @@
  */
 
 export {MetadataWriterHost} from './src/compiler_host';
-export {CodegenExtension, UserError, main} from './src/main';
+export {CodegenExtension, UserError, createBundleIndexHost, main} from './src/main';
 
 export {default as AngularCompilerOptions} from './src/options';
 export * from './src/bundler';
diff --git a/tools/@angular/tsc-wrapped/package.json b/packages/tsc-wrapped/package.json
similarity index 79%
rename from tools/@angular/tsc-wrapped/package.json
rename to packages/tsc-wrapped/package.json
index 4e7c6c7b7b..7000d99cd4 100644
--- a/tools/@angular/tsc-wrapped/package.json
+++ b/packages/tsc-wrapped/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@angular/tsc-wrapped",
-  "version": "4.1.0-beta.0",
+  "version": "0.0.0-PLACEHOLDER",
   "description": "Wraps the tsc CLI, allowing extensions.",
-  "homepage": "https://github.com/angular/angular/tree/master/tools/tsc-wrapped",
+  "homepage": "https://github.com/angular/angular/blob/master/packages/tsc-wrapped",
   "bugs": "https://github.com/angular/angular/issues",
   "contributors": [
     "Alex Eagle <alexeagle@google.com>",
diff --git a/tools/@angular/tsc-wrapped/src/bundler.ts b/packages/tsc-wrapped/src/bundler.ts
similarity index 78%
rename from tools/@angular/tsc-wrapped/src/bundler.ts
rename to packages/tsc-wrapped/src/bundler.ts
index 95f0bee0fa..92a48744e6 100644
--- a/tools/@angular/tsc-wrapped/src/bundler.ts
+++ b/packages/tsc-wrapped/src/bundler.ts
@@ -9,14 +9,12 @@ import * as path from 'path';
 import * as ts from 'typescript';
 
 import {MetadataCollector} from './collector';
-import {ClassMetadata, ConstructorMetadata, FunctionMetadata, MemberMetadata, MetadataArray, MetadataEntry, MetadataError, MetadataImportedSymbolReferenceExpression, MetadataMap, MetadataObject, MetadataSymbolicBinaryExpression, MetadataSymbolicCallExpression, MetadataSymbolicExpression, MetadataSymbolicIfExpression, MetadataSymbolicIndexExpression, MetadataSymbolicPrefixExpression, MetadataSymbolicReferenceExpression, MetadataSymbolicSelectExpression, MetadataSymbolicSpreadExpression, MetadataValue, MethodMetadata, ModuleMetadata, VERSION, isClassMetadata, isConstructorMetadata, isFunctionMetadata, isInterfaceMetadata, isMetadataError, isMetadataGlobalReferenceExpression, isMetadataImportedSymbolReferenceExpression, isMetadataModuleReferenceExpression, isMetadataSymbolicExpression, isMetadataSymbolicReferenceExpression, isMethodMetadata} from './schema';
+import {ClassMetadata, ConstructorMetadata, FunctionMetadata, MemberMetadata, MetadataEntry, MetadataError, MetadataImportedSymbolReferenceExpression, MetadataMap, MetadataObject, MetadataSymbolicExpression, MetadataSymbolicReferenceExpression, MetadataValue, MethodMetadata, ModuleExportMetadata, ModuleMetadata, VERSION, isClassMetadata, isConstructorMetadata, isFunctionMetadata, isInterfaceMetadata, isMetadataError, isMetadataGlobalReferenceExpression, isMetadataImportedSymbolReferenceExpression, isMetadataModuleReferenceExpression, isMetadataSymbolicExpression, isMethodMetadata} from './schema';
+
 
 
 // The character set used to produce private names.
-const PRIVATE_NAME_CHARS = [
-  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
-  'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
-];
+const PRIVATE_NAME_CHARS = 'abcdefghijklmnopqrstuvwxyz';
 
 interface Symbol {
   module: string;
@@ -47,6 +45,10 @@ interface Symbol {
   // a referenced symbol's value.
   referenced?: boolean;
 
+  // A symbol is marked as a re-export the symbol was rexported from a module that is
+  // not part of the flat module bundle.
+  reexport?: boolean;
+
   // Only valid for referenced canonical symbols. Produces by convertSymbols().
   value?: MetadataEntry;
 
@@ -68,7 +70,9 @@ export interface BundledModule {
   privates: BundlePrivateEntry[];
 }
 
-export interface MetadataBundlerHost { getMetadataFor(moduleName: string): ModuleMetadata; }
+export interface MetadataBundlerHost {
+  getMetadataFor(moduleName: string): ModuleMetadata|undefined;
+}
 
 type StaticsMetadata = {
   [name: string]: MetadataValue | FunctionMetadata;
@@ -76,7 +80,7 @@ type StaticsMetadata = {
 
 export class MetadataBundler {
   private symbolMap = new Map<string, Symbol>();
-  private metadataCache = new Map<string, ModuleMetadata>();
+  private metadataCache = new Map<string, ModuleMetadata|undefined>();
   private exports = new Map<string, Symbol[]>();
   private rootModule: string;
   private exported: Set<Symbol>;
@@ -96,19 +100,24 @@ export class MetadataBundler {
     const privates = Array.from(this.symbolMap.values())
                          .filter(s => s.referenced && s.isPrivate)
                          .map(s => ({
-                                privateName: s.privateName,
-                                name: s.declaration.name,
-                                module: s.declaration.module
+                                privateName: s.privateName !,
+                                name: s.declaration !.name,
+                                module: s.declaration !.module
                               }));
     const origins = Array.from(this.symbolMap.values())
-                        .filter(s => s.referenced)
+                        .filter(s => s.referenced && !s.reexport)
                         .reduce<{[name: string]: string}>((p, s) => {
-                          p[s.isPrivate ? s.privateName : s.name] = s.declaration.module;
+                          p[s.isPrivate ? s.privateName ! : s.name] = s.declaration !.module;
                           return p;
                         }, {});
+    const exports = this.getReExports(exportedSymbols);
     return {
-      metadata:
-          {__symbolic: 'module', version: VERSION, metadata, origins, importAs: this.importAs},
+      metadata: {
+        __symbolic: 'module',
+        version: VERSION,
+        exports: exports.length ? exports : undefined, metadata, origins,
+        importAs: this.importAs !
+      },
       privates
     };
   }
@@ -117,7 +126,7 @@ export class MetadataBundler {
     return resolveModule(importName, from);
   }
 
-  private getMetadata(moduleName: string): ModuleMetadata {
+  private getMetadata(moduleName: string): ModuleMetadata|undefined {
     let result = this.metadataCache.get(moduleName);
     if (!result) {
       if (moduleName.startsWith('.')) {
@@ -131,7 +140,7 @@ export class MetadataBundler {
 
   private exportAll(moduleName: string): Symbol[] {
     const module = this.getMetadata(moduleName);
-    let result: Symbol[] = this.exports.get(moduleName);
+    let result = this.exports.get(moduleName);
 
     if (result) {
       return result;
@@ -141,7 +150,7 @@ export class MetadataBundler {
 
     const exportSymbol = (exportedSymbol: Symbol, exportAs: string) => {
       const symbol = this.symbolOf(moduleName, exportAs);
-      result.push(symbol);
+      result !.push(symbol);
       exportedSymbol.reexportedAs = symbol;
       symbol.exports = exportedSymbol;
     };
@@ -168,12 +177,19 @@ export class MetadataBundler {
       for (const exportDeclaration of module.exports) {
         const exportFrom = resolveModule(exportDeclaration.from, moduleName);
         // Record all the exports from the module even if we don't use it directly.
-        this.exportAll(exportFrom);
+        const exportedSymbols = this.exportAll(exportFrom);
         if (exportDeclaration.export) {
           // Re-export all the named exports from a module.
           for (const exportItem of exportDeclaration.export) {
             const name = typeof exportItem == 'string' ? exportItem : exportItem.name;
             const exportAs = typeof exportItem == 'string' ? exportItem : exportItem.as;
+            const symbol = this.symbolOf(exportFrom, name);
+            if (exportedSymbols && exportedSymbols.length == 1 && exportedSymbols[0].reexport &&
+                exportedSymbols[0].name == '*') {
+              // This is a named export from a module we have no metadata about. Record the named
+              // export as a re-export.
+              symbol.reexport = true;
+            }
             exportSymbol(this.symbolOf(exportFrom, name), exportAs);
           }
         } else {
@@ -186,6 +202,15 @@ export class MetadataBundler {
         }
       }
     }
+
+    if (!module) {
+      // If no metadata is found for this import then it is considered external to the
+      // library and should be recorded as a re-export in the final metadata if it is
+      // eventually re-exported.
+      const symbol = this.symbolOf(moduleName, '*');
+      symbol.reexport = true;
+      result.push(symbol);
+    }
     this.exports.set(moduleName, result);
 
     return result;
@@ -199,7 +224,6 @@ export class MetadataBundler {
   private canonicalizeSymbols(exportedSymbols: Symbol[]) {
     const symbols = Array.from(this.symbolMap.values());
     this.exported = new Set(exportedSymbols);
-    ;
     symbols.forEach(this.canonicalizeSymbol, this);
   }
 
@@ -211,6 +235,7 @@ export class MetadataBundler {
     symbol.isPrivate = isPrivate;
     symbol.declaration = declaration;
     symbol.canonicalSymbol = canonicalSymbol;
+    symbol.reexport = declaration.reexport;
   }
 
   private getEntries(exportedSymbols: Symbol[]): BundleEntries {
@@ -237,25 +262,58 @@ export class MetadataBundler {
     exportedSymbols.forEach(symbol => this.convertSymbol(symbol));
 
     Array.from(this.symbolMap.values()).forEach(symbol => {
-      if (symbol.referenced) {
+      if (symbol.referenced && !symbol.reexport) {
         let name = symbol.name;
         if (symbol.isPrivate && !symbol.privateName) {
           name = newPrivateName();
           symbol.privateName = name;
         }
-        result[name] = symbol.value;
+        result[name] = symbol.value !;
       }
     });
 
     return result;
   }
 
+  private getReExports(exportedSymbols: Symbol[]): ModuleExportMetadata[] {
+    type ExportClause = {name: string, as: string}[];
+    const modules = new Map<string, ExportClause>();
+    const exportAlls = new Set<string>();
+    for (const symbol of exportedSymbols) {
+      if (symbol.reexport) {
+        // symbol.declaration is guarenteed to be defined during the phase this method is called.
+        const declaration = symbol.declaration !;
+        const module = declaration.module;
+        if (declaration !.name == '*') {
+          // Reexport all the symbols.
+          exportAlls.add(declaration.module);
+        } else {
+          // Re-export the symbol as the exported name.
+          let entry = modules.get(module);
+          if (!entry) {
+            entry = [];
+            modules.set(module, entry);
+          }
+          const as = symbol.name;
+          const name = declaration.name;
+          entry.push({name, as});
+        }
+      }
+    }
+    return [
+      ...Array.from(exportAlls.values()).map(from => ({from})),
+      ...Array.from(modules.entries()).map(([from, exports]) => ({export: exports, from}))
+    ];
+  }
+
   private convertSymbol(symbol: Symbol) {
-    const canonicalSymbol = symbol.canonicalSymbol;
+    // canonicalSymbol is ensured to be defined before this is called.
+    const canonicalSymbol = symbol.canonicalSymbol !;
 
     if (!canonicalSymbol.referenced) {
       canonicalSymbol.referenced = true;
-      const declaration = canonicalSymbol.declaration;
+      // declaration is ensured to be definded before this method is called.
+      const declaration = canonicalSymbol.declaration !;
       const module = this.getMetadata(declaration.module);
       if (module) {
         const value = module.metadata[declaration.name];
@@ -283,10 +341,10 @@ export class MetadataBundler {
     return {
       __symbolic: 'class',
       arity: value.arity,
-      extends: this.convertExpression(moduleName, value.extends),
+      extends: this.convertExpression(moduleName, value.extends) !,
       decorators:
-          value.decorators && value.decorators.map(d => this.convertExpression(moduleName, d)),
-      members: this.convertMembers(moduleName, value.members),
+          value.decorators && value.decorators.map(d => this.convertExpression(moduleName, d) !),
+      members: this.convertMembers(moduleName, value.members !),
       statics: value.statics && this.convertStatics(moduleName, value.statics)
     };
   }
@@ -303,11 +361,11 @@ export class MetadataBundler {
   private convertMember(moduleName: string, member: MemberMetadata) {
     const result: MemberMetadata = {__symbolic: member.__symbolic};
     result.decorators =
-        member.decorators && member.decorators.map(d => this.convertExpression(moduleName, d));
+        member.decorators && member.decorators.map(d => this.convertExpression(moduleName, d) !);
     if (isMethodMetadata(member)) {
       (result as MethodMetadata).parameterDecorators = member.parameterDecorators &&
           member.parameterDecorators.map(
-              d => d && d.map(p => this.convertExpression(moduleName, p)));
+              d => d && d.map(p => this.convertExpression(moduleName, p) !));
       if (isConstructorMetadata(member)) {
         if (member.parameters) {
           (result as ConstructorMetadata).parameters =
@@ -344,7 +402,7 @@ export class MetadataBundler {
       return this.convertError(moduleName, value);
     }
     if (isMetadataSymbolicExpression(value)) {
-      return this.convertExpression(moduleName, value);
+      return this.convertExpression(moduleName, value) !;
     }
     if (Array.isArray(value)) {
       return value.map(v => this.convertValue(moduleName, v));
@@ -360,8 +418,8 @@ export class MetadataBundler {
   }
 
   private convertExpression(
-      moduleName: string, value: MetadataSymbolicExpression|MetadataError|
-      undefined): MetadataSymbolicExpression|MetadataError|undefined {
+      moduleName: string, value: MetadataSymbolicExpression|MetadataError|null|
+      undefined): MetadataSymbolicExpression|MetadataError|undefined|null {
     if (value) {
       switch (value.__symbolic) {
         case 'error':
@@ -386,9 +444,9 @@ export class MetadataBundler {
   }
 
   private convertReference(moduleName: string, value: MetadataSymbolicReferenceExpression):
-      MetadataSymbolicReferenceExpression|MetadataError {
+      MetadataSymbolicReferenceExpression|MetadataError|undefined {
     const createReference = (symbol: Symbol): MetadataSymbolicReferenceExpression => {
-      const declaration = symbol.declaration;
+      const declaration = symbol.declaration !;
       if (declaration.module.startsWith('.')) {
         // Reference to a symbol defined in the module. Ensure it is converted then return a
         // references to the final symbol.
@@ -397,11 +455,11 @@ export class MetadataBundler {
           __symbolic: 'reference',
           get name() {
             // Resolved lazily because private names are assigned late.
-            const canonicalSymbol = symbol.canonicalSymbol;
+            const canonicalSymbol = symbol.canonicalSymbol !;
             if (canonicalSymbol.isPrivate == null) {
               throw Error('Invalid state: isPrivate was not initialized');
             }
-            return canonicalSymbol.isPrivate ? canonicalSymbol.privateName : canonicalSymbol.name;
+            return canonicalSymbol.isPrivate ? canonicalSymbol.privateName ! : canonicalSymbol.name;
           }
         };
       } else {
@@ -433,18 +491,15 @@ export class MetadataBundler {
 
     if (isMetadataImportedSymbolReferenceExpression(value)) {
       // References to imported symbols are separated into two, references to bundled modules and
-      // references to modules
-      // external to the bundle. If the module reference is relative it is assuemd to be in the
-      // bundle. If it is Global
-      // it is assumed to be outside the bundle. References to symbols outside the bundle are left
-      // unmodified. Refernces
-      // to symbol inside the bundle need to be converted to a bundle import reference reachable
-      // from the bundle index.
+      // references to modules external to the bundle. If the module reference is relative it is
+      // assumed to be in the bundle. If it is Global it is assumed to be outside the bundle.
+      // References to symbols outside the bundle are left unmodified. References to symbol inside
+      // the bundle need to be converted to a bundle import reference reachable from the bundle
+      // index.
 
       if (value.module.startsWith('.')) {
         // Reference is to a symbol defined inside the module. Convert the reference to a reference
-        // to the canonical
-        // symbol.
+        // to the canonical symbol.
         const referencedModule = resolveModule(value.module, moduleName);
         const referencedName = value.name;
         return createReference(this.canonicalSymbolOf(referencedModule, referencedName));
@@ -453,7 +508,7 @@ export class MetadataBundler {
       // Value is a reference to a symbol defined outside the module.
       if (value.arguments) {
         // If a reference has arguments the arguments need to be converted.
-        const result: MetadataImportedSymbolReferenceExpression = {
+        return {
           __symbolic: 'reference',
           name: value.name,
           module: value.module,
@@ -514,7 +569,7 @@ export class CompilerHostAdapter implements MetadataBundlerHost {
 
   constructor(private host: ts.CompilerHost) {}
 
-  getMetadataFor(fileName: string): ModuleMetadata {
+  getMetadataFor(fileName: string): ModuleMetadata|undefined {
     const sourceFile = this.host.getSourceFile(fileName + '.ts', ts.ScriptTarget.Latest);
     return this.collector.getMetadata(sourceFile);
   }
@@ -538,10 +593,6 @@ function isPrimitive(o: any): o is boolean|string|number {
   return o === null || (typeof o !== 'function' && typeof o !== 'object');
 }
 
-function isMetadataArray(o: MetadataValue): o is MetadataArray {
-  return Array.isArray(o);
-}
-
 function getRootExport(symbol: Symbol): Symbol {
   return symbol.reexportedAs ? getRootExport(symbol.reexportedAs) : symbol;
 }
diff --git a/tools/@angular/tsc-wrapped/src/cli_options.ts b/packages/tsc-wrapped/src/cli_options.ts
similarity index 61%
rename from tools/@angular/tsc-wrapped/src/cli_options.ts
rename to packages/tsc-wrapped/src/cli_options.ts
index c379ee5c94..5755f8665e 100644
--- a/tools/@angular/tsc-wrapped/src/cli_options.ts
+++ b/packages/tsc-wrapped/src/cli_options.ts
@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 export class CliOptions {
-  public basePath: string;
-  constructor({basePath = null}: {basePath?: string}) { this.basePath = basePath; }
+  public basePath: string|null;
+  constructor({basePath = null}: {basePath?: string | null}) { this.basePath = basePath; }
 }
 
 export class I18nExtractionCliOptions extends CliOptions {
@@ -28,15 +28,23 @@ export class I18nExtractionCliOptions extends CliOptions {
 }
 
 export class NgcCliOptions extends CliOptions {
-  public i18nFormat: string;
-  public i18nFile: string;
-  public locale: string;
+  public i18nFormat: string|null;
+  public i18nFile: string|null;
+  public locale: string|null;
+  public missingTranslation: string|null;
 
-  constructor({i18nFormat = null, i18nFile = null, locale = null, basePath = null}:
-                  {i18nFormat?: string, i18nFile?: string, locale?: string, basePath?: string}) {
+  constructor({i18nFormat = null, i18nFile = null, locale = null, missingTranslation = null,
+               basePath = null}: {
+    i18nFormat?: string | null,
+    i18nFile?: string|null,
+    locale?: string|null,
+    missingTranslation?: string|null,
+    basePath?: string|null
+  }) {
     super({basePath: basePath});
     this.i18nFormat = i18nFormat;
     this.i18nFile = i18nFile;
     this.locale = locale;
+    this.missingTranslation = missingTranslation;
   }
 }
diff --git a/tools/@angular/tsc-wrapped/src/collector.ts b/packages/tsc-wrapped/src/collector.ts
similarity index 92%
rename from tools/@angular/tsc-wrapped/src/collector.ts
rename to packages/tsc-wrapped/src/collector.ts
index 43c24a27f5..f6d117d200 100644
--- a/tools/@angular/tsc-wrapped/src/collector.ts
+++ b/packages/tsc-wrapped/src/collector.ts
@@ -54,13 +54,13 @@ export class MetadataCollector {
    * Returns a JSON.stringify friendly form describing the decorators of the exported classes from
    * the source file that is expected to correspond to a module.
    */
-  public getMetadata(sourceFile: ts.SourceFile, strict: boolean = false): ModuleMetadata {
+  public getMetadata(sourceFile: ts.SourceFile, strict: boolean = false): ModuleMetadata|undefined {
     const locals = new Symbols(sourceFile);
     const nodeMap =
         new Map<MetadataValue|ClassMetadata|InterfaceMetadata|FunctionMetadata, ts.Node>();
     const evaluator = new Evaluator(locals, nodeMap, this.options);
     let metadata: {[name: string]: MetadataValue | ClassMetadata | FunctionMetadata}|undefined;
-    let exports: ModuleExportMetadata[];
+    let exports: ModuleExportMetadata[]|undefined = undefined;
 
     function objFromDecorator(decoratorNode: ts.Decorator): MetadataSymbolicExpression {
       return <MetadataSymbolicExpression>evaluator.evaluateNode(decoratorNode.expression);
@@ -79,7 +79,7 @@ export class MetadataCollector {
     function maybeGetSimpleFunction(
         functionDeclaration: ts.FunctionDeclaration |
         ts.MethodDeclaration): {func: FunctionMetadata, name: string}|undefined {
-      if (functionDeclaration.name.kind == ts.SyntaxKind.Identifier) {
+      if (functionDeclaration.name && functionDeclaration.name.kind == ts.SyntaxKind.Identifier) {
         const nameNode = <ts.Identifier>functionDeclaration.name;
         const functionName = nameNode.text;
         const functionBody = functionDeclaration.body;
@@ -94,7 +94,6 @@ export class MetadataCollector {
                 value: evaluator.evaluateNode(returnStatement.expression)
               };
               if (functionDeclaration.parameters.some(p => p.initializer != null)) {
-                const defaults: MetadataValue[] = [];
                 func.defaults = functionDeclaration.parameters.map(
                     p => p.initializer && evaluator.evaluateNode(p.initializer));
               }
@@ -108,7 +107,8 @@ export class MetadataCollector {
     function classMetadataOf(classDeclaration: ts.ClassDeclaration): ClassMetadata {
       const result: ClassMetadata = {__symbolic: 'class'};
 
-      function getDecorators(decorators: ts.Decorator[]): MetadataSymbolicExpression[] {
+      function getDecorators(decorators: ts.Decorator[] | undefined): MetadataSymbolicExpression[]|
+          undefined {
         if (decorators && decorators.length)
           return decorators.map(decorator => objFromDecorator(decorator));
         return undefined;
@@ -146,7 +146,7 @@ export class MetadataCollector {
       }
 
       // member decorators
-      let members: MetadataMap = null;
+      let members: MetadataMap|null = null;
       function recordMember(name: string, metadata: MemberMetadata) {
         if (!members) members = {};
         const data = members.hasOwnProperty(name) ? members[name] : [];
@@ -155,7 +155,7 @@ export class MetadataCollector {
       }
 
       // static member
-      let statics: {[name: string]: MetadataValue | FunctionMetadata} = null;
+      let statics: {[name: string]: MetadataValue | FunctionMetadata}|null = null;
       function recordStaticMember(name: string, value: MetadataValue | FunctionMetadata) {
         if (!statics) statics = {};
         statics[name] = value;
@@ -177,7 +177,8 @@ export class MetadataCollector {
             }
             const methodDecorators = getDecorators(method.decorators);
             const parameters = method.parameters;
-            const parameterDecoratorData: (MetadataSymbolicExpression | MetadataError)[][] = [];
+            const parameterDecoratorData:
+                ((MetadataSymbolicExpression | MetadataError)[] | undefined)[] = [];
             const parametersData:
                 (MetadataSymbolicReferenceExpression | MetadataError |
                  MetadataSymbolicSelectExpression | null)[] = [];
@@ -255,7 +256,8 @@ export class MetadataCollector {
           const {moduleSpecifier, exportClause} = exportDeclaration;
 
           if (!moduleSpecifier) {
-            exportClause.elements.forEach(spec => {
+            // If there is a module specifier there is also an exportClause
+            exportClause !.elements.forEach(spec => {
               const exportedAs = spec.name.text;
               const name = (spec.propertyName || spec.name).text;
               exportMap.set(name, exportedAs);
@@ -264,12 +266,13 @@ export class MetadataCollector {
       }
     });
 
-    const isExportedIdentifier = (identifier: ts.Identifier) => exportMap.has(identifier.text);
+    const isExportedIdentifier = (identifier?: ts.Identifier) =>
+        identifier && exportMap.has(identifier.text);
     const isExported =
         (node: ts.FunctionDeclaration | ts.ClassDeclaration | ts.InterfaceDeclaration |
          ts.EnumDeclaration) => isExport(node) || isExportedIdentifier(node.name);
-    const exportedIdentifierName = (identifier: ts.Identifier) =>
-        exportMap.get(identifier.text) || identifier.text;
+    const exportedIdentifierName = (identifier?: ts.Identifier) =>
+        identifier && (exportMap.get(identifier.text) || identifier.text);
     const exportedName =
         (node: ts.FunctionDeclaration | ts.ClassDeclaration | ts.InterfaceDeclaration |
          ts.EnumDeclaration) => exportedIdentifierName(node.name);
@@ -358,10 +361,12 @@ export class MetadataCollector {
         case ts.SyntaxKind.ClassDeclaration:
           const classDeclaration = <ts.ClassDeclaration>node;
           if (classDeclaration.name) {
-            const className = classDeclaration.name.text;
             if (isExported(classDeclaration)) {
-              if (!metadata) metadata = {};
-              metadata[exportedName(classDeclaration)] = classMetadataOf(classDeclaration);
+              const name = exportedName(classDeclaration);
+              if (name) {
+                if (!metadata) metadata = {};
+                metadata[name] = classMetadataOf(classDeclaration);
+              }
             }
           }
           // Otherwise don't record metadata for the class.
@@ -370,8 +375,11 @@ export class MetadataCollector {
         case ts.SyntaxKind.InterfaceDeclaration:
           const interfaceDeclaration = <ts.InterfaceDeclaration>node;
           if (interfaceDeclaration.name && isExported(interfaceDeclaration)) {
-            if (!metadata) metadata = {};
-            metadata[exportedName(interfaceDeclaration)] = {__symbolic: 'interface'};
+            const name = exportedName(interfaceDeclaration);
+            if (name) {
+              if (!metadata) metadata = {};
+              metadata[name] = {__symbolic: 'interface'};
+            }
           }
           break;
 
@@ -379,12 +387,14 @@ export class MetadataCollector {
           // Record functions that return a single value. Record the parameter
           // names substitution will be performed by the StaticReflector.
           const functionDeclaration = <ts.FunctionDeclaration>node;
-          if (isExported(functionDeclaration)) {
-            if (!metadata) metadata = {};
+          if (isExported(functionDeclaration) && functionDeclaration.name) {
             const name = exportedName(functionDeclaration);
             const maybeFunc = maybeGetSimpleFunction(functionDeclaration);
-            metadata[name] =
-                maybeFunc ? recordEntry(maybeFunc.func, node) : {__symbolic: 'function'};
+            if (name) {
+              if (!metadata) metadata = {};
+              metadata[name] =
+                  maybeFunc ? recordEntry(maybeFunc.func, node) : {__symbolic: 'function'};
+            }
           }
           break;
 
@@ -402,7 +412,7 @@ export class MetadataCollector {
               } else {
                 enumValue = evaluator.evaluateNode(member.initializer);
               }
-              let name: string = undefined;
+              let name: string|undefined = undefined;
               if (member.name.kind == ts.SyntaxKind.Identifier) {
                 const identifier = <ts.Identifier>member.name;
                 name = identifier.text;
@@ -426,8 +436,10 @@ export class MetadataCollector {
               }
             }
             if (writtenMembers) {
-              if (!metadata) metadata = {};
-              metadata[enumName] = recordEntry(enumValueHolder, node);
+              if (enumName) {
+                if (!metadata) metadata = {};
+                metadata[enumName] = recordEntry(enumValueHolder, node);
+              }
             }
           }
           break;
@@ -446,13 +458,20 @@ export class MetadataCollector {
               let exported = false;
               if (isExport(variableStatement) || isExport(variableDeclaration) ||
                   isExportedIdentifier(nameNode)) {
-                if (!metadata) metadata = {};
-                metadata[exportedIdentifierName(nameNode)] = recordEntry(varValue, node);
+                const name = exportedIdentifierName(nameNode);
+                if (name) {
+                  if (!metadata) metadata = {};
+                  metadata[name] = recordEntry(varValue, node);
+                }
                 exported = true;
               }
               if (typeof varValue == 'string' || typeof varValue == 'number' ||
                   typeof varValue == 'boolean') {
                 locals.define(nameNode.text, varValue);
+                if (exported) {
+                  locals.defineReference(
+                      nameNode.text, {__symbolic: 'reference', name: nameNode.text});
+                }
               } else if (!exported) {
                 if (varValue && !isMetadataError(varValue)) {
                   locals.define(nameNode.text, recordEntry(varValue, node));
@@ -599,11 +618,11 @@ function validateMetadata(
     }
     if (classData.members) {
       Object.getOwnPropertyNames(classData.members)
-          .forEach(name => classData.members[name].forEach((m) => validateMember(classData, m)));
+          .forEach(name => classData.members ![name].forEach((m) => validateMember(classData, m)));
     }
     if (classData.statics) {
       Object.getOwnPropertyNames(classData.statics).forEach(name => {
-        const staticMember = classData.statics[name];
+        const staticMember = classData.statics ![name];
         if (isFunctionMetadata(staticMember)) {
           validateExpression(staticMember.value);
         } else {
@@ -626,7 +645,7 @@ function validateMetadata(
     }
   }
 
-  function shouldReportNode(node: ts.Node) {
+  function shouldReportNode(node: ts.Node | undefined) {
     if (node) {
       const nodeStart = node.getStart();
       return !(
diff --git a/tools/@angular/tsc-wrapped/src/compiler_host.ts b/packages/tsc-wrapped/src/compiler_host.ts
similarity index 95%
rename from tools/@angular/tsc-wrapped/src/compiler_host.ts
rename to packages/tsc-wrapped/src/compiler_host.ts
index f5ab08ef67..eaff682940 100644
--- a/tools/@angular/tsc-wrapped/src/compiler_host.ts
+++ b/packages/tsc-wrapped/src/compiler_host.ts
@@ -8,7 +8,6 @@
 
 import {writeFileSync} from 'fs';
 import {normalize} from 'path';
-import * as tsickle from 'tsickle';
 import * as ts from 'typescript';
 
 import NgOptions from './options';
@@ -34,10 +33,10 @@ export abstract class DelegatingHost implements ts.CompilerHost {
       (fileName: string, languageVersion: ts.ScriptTarget, onError?: (message: string) => void) =>
           this.delegate.getSourceFile(fileName, languageVersion, onError);
 
-  getCancellationToken = () => this.delegate.getCancellationToken();
+  getCancellationToken = () => this.delegate.getCancellationToken !();
   getDefaultLibFileName = (options: ts.CompilerOptions) =>
       this.delegate.getDefaultLibFileName(options);
-  getDefaultLibLocation = () => this.delegate.getDefaultLibLocation();
+  getDefaultLibLocation = () => this.delegate.getDefaultLibLocation !();
   writeFile: ts.WriteFileCallback = this.delegate.writeFile;
   getCurrentDirectory = () => this.delegate.getCurrentDirectory();
   getDirectories = (path: string): string[] =>
@@ -47,8 +46,8 @@ export abstract class DelegatingHost implements ts.CompilerHost {
   getNewLine = () => this.delegate.getNewLine();
   fileExists = (fileName: string) => this.delegate.fileExists(fileName);
   readFile = (fileName: string) => this.delegate.readFile(fileName);
-  trace = (s: string) => this.delegate.trace(s);
-  directoryExists = (directoryName: string) => this.delegate.directoryExists(directoryName);
+  trace = (s: string) => this.delegate.trace !(s);
+  directoryExists = (directoryName: string) => this.delegate.directoryExists !(directoryName);
 }
 
 const IGNORED_FILES = /\.ngfactory\.js$|\.ngstyle\.js$/;
@@ -80,7 +79,8 @@ export class MetadataWriterHost extends DelegatingHost {
       const metadata =
           this.metadataCollector.getMetadata(collectableFile, !!this.ngOptions.strictMetadataEmit);
       const metadata1 = this.metadataCollector1.getMetadata(collectableFile, false);
-      const metadatas: ModuleMetadata[] = [metadata, metadata1].filter(e => !!e);
+      const metadatas: ModuleMetadata[] =
+          [metadata, metadata1].filter(e => !!e) as ModuleMetadata[];
       if (metadatas.length) {
         const metadataText = JSON.stringify(metadatas);
         writeFileSync(path, metadataText, {encoding: 'utf-8'});
@@ -98,8 +98,7 @@ export class MetadataWriterHost extends DelegatingHost {
         }
         if (isDts) {
           // TODO: remove this early return after https://github.com/Microsoft/TypeScript/pull/8412
-          // is
-          // released
+          // is released
           return;
         }
 
@@ -165,7 +164,7 @@ export class SyntheticIndexHost extends DelegatingHost {
                 normalize(sourceFiles[0].fileName) == this.normalSyntheticIndexName) {
               // If we are writing the synthetic index, write the metadata along side.
               const metadataName = fileName.replace(DTS, '.metadata.json');
-              writeFileSync(metadataName, this.indexMetadata, 'utf8');
+              writeFileSync(metadataName, this.indexMetadata, {encoding: 'utf8'});
             }
           }
 }
\ No newline at end of file
diff --git a/tools/@angular/tsc-wrapped/src/evaluator.ts b/packages/tsc-wrapped/src/evaluator.ts
similarity index 78%
rename from tools/@angular/tsc-wrapped/src/evaluator.ts
rename to packages/tsc-wrapped/src/evaluator.ts
index f3445e2df7..b77f55c027 100644
--- a/tools/@angular/tsc-wrapped/src/evaluator.ts
+++ b/packages/tsc-wrapped/src/evaluator.ts
@@ -9,7 +9,7 @@
 import * as ts from 'typescript';
 
 import {CollectorOptions} from './collector';
-import {MetadataEntry, MetadataError, MetadataGlobalReferenceExpression, MetadataImportedSymbolReferenceExpression, MetadataSymbolicCallExpression, MetadataSymbolicReferenceExpression, MetadataValue, isMetadataError, isMetadataGlobalReferenceExpression, isMetadataImportedSymbolReferenceExpression, isMetadataModuleReferenceExpression, isMetadataSymbolicReferenceExpression, isMetadataSymbolicSpreadExpression} from './schema';
+import {MetadataEntry, MetadataError, MetadataImportedSymbolReferenceExpression, MetadataSymbolicCallExpression, MetadataValue, isMetadataError, isMetadataModuleReferenceExpression, isMetadataSymbolicReferenceExpression, isMetadataSymbolicSpreadExpression} from './schema';
 import {Symbols} from './symbols';
 
 // In TypeScript 2.1 the spread element kind was renamed.
@@ -68,7 +68,7 @@ export interface ImportMetadata {
 }
 
 
-function getSourceFileOfNode(node: ts.Node): ts.SourceFile {
+function getSourceFileOfNode(node: ts.Node | undefined): ts.SourceFile {
   while (node && node.kind != ts.SyntaxKind.SourceFile) {
     node = node.parent;
   }
@@ -79,14 +79,14 @@ function getSourceFileOfNode(node: ts.Node): ts.SourceFile {
 export function errorSymbol(
     message: string, node?: ts.Node, context?: {[name: string]: string},
     sourceFile?: ts.SourceFile): MetadataError {
-  let result: MetadataError;
+  let result: MetadataError|undefined = undefined;
   if (node) {
     sourceFile = sourceFile || getSourceFileOfNode(node);
     if (sourceFile) {
       const {line, character} =
           ts.getLineAndCharacterOfPosition(sourceFile, node.getStart(sourceFile));
       result = {__symbolic: 'error', message, line, character};
-    };
+    }
   }
   if (!result) {
     result = {__symbolic: 'error', message};
@@ -106,15 +106,16 @@ export class Evaluator {
       private symbols: Symbols, private nodeMap: Map<MetadataEntry, ts.Node>,
       private options: CollectorOptions = {}) {}
 
-  nameOf(node: ts.Node): string|MetadataError {
-    if (node.kind == ts.SyntaxKind.Identifier) {
+  nameOf(node: ts.Node|undefined): string|MetadataError {
+    if (node && node.kind == ts.SyntaxKind.Identifier) {
       return (<ts.Identifier>node).text;
     }
-    const result = this.evaluateNode(node);
+    const result = node && this.evaluateNode(node);
     if (isMetadataError(result) || typeof result === 'string') {
       return result;
     } else {
-      return errorSymbol('Name expected', node, {received: node.getText()});
+      return errorSymbol(
+          'Name expected', node, {received: (node && node.getText()) || '<missing>'});
     }
   }
 
@@ -138,7 +139,7 @@ export class Evaluator {
     return this.isFoldableWorker(node, new Map<ts.Node, boolean>());
   }
 
-  private isFoldableWorker(node: ts.Node, folding: Map<ts.Node, boolean>): boolean {
+  private isFoldableWorker(node: ts.Node|undefined, folding: Map<ts.Node, boolean>): boolean {
     if (node) {
       switch (node.kind) {
         case ts.SyntaxKind.ObjectLiteralExpression:
@@ -154,7 +155,8 @@ export class Evaluator {
         case ts.SyntaxKind.CallExpression:
           const callExpression = <ts.CallExpression>node;
           // We can fold a <array>.concat(<v>).
-          if (isMethodCallOf(callExpression, 'concat') && callExpression.arguments.length === 1) {
+          if (isMethodCallOf(callExpression, 'concat') &&
+              arrayOrEmpty(callExpression.arguments).length === 1) {
             const arrayNode = (<ts.PropertyAccessExpression>callExpression.expression).expression;
             if (this.isFoldableWorker(arrayNode, folding) &&
                 this.isFoldableWorker(callExpression.arguments[0], folding)) {
@@ -167,7 +169,8 @@ export class Evaluator {
           }
 
           // We can fold a call to CONST_EXPR
-          if (isCallOf(callExpression, 'CONST_EXPR') && callExpression.arguments.length === 1)
+          if (isCallOf(callExpression, 'CONST_EXPR') &&
+              arrayOrEmpty(callExpression.arguments).length === 1)
             return this.isFoldableWorker(callExpression.arguments[0], folding);
           return false;
         case ts.SyntaxKind.NoSubstitutionTemplateLiteral:
@@ -176,6 +179,9 @@ export class Evaluator {
         case ts.SyntaxKind.NullKeyword:
         case ts.SyntaxKind.TrueKeyword:
         case ts.SyntaxKind.FalseKeyword:
+        case ts.SyntaxKind.TemplateHead:
+        case ts.SyntaxKind.TemplateMiddle:
+        case ts.SyntaxKind.TemplateTail:
           return true;
         case ts.SyntaxKind.ParenthesizedExpression:
           const parenthesizedExpression = <ts.ParenthesizedExpression>node;
@@ -209,6 +215,10 @@ export class Evaluator {
             return true;
           }
           break;
+        case ts.SyntaxKind.TemplateExpression:
+          const templateExpression = <ts.TemplateExpression>node;
+          return templateExpression.templateSpans.every(
+              span => this.isFoldableWorker(span.expression, folding));
       }
     }
     return false;
@@ -218,7 +228,7 @@ export class Evaluator {
    * Produce a JSON serialiable object representing `node`. The foldable values in the expression
    * tree are folded. For example, a node representing `1 + 2` is folded into `3`.
    */
-  public evaluateNode(node: ts.Node): MetadataValue {
+  public evaluateNode(node: ts.Node, preferReference?: boolean): MetadataValue {
     const t = this;
     let error: MetadataError|undefined;
 
@@ -231,6 +241,15 @@ export class Evaluator {
       return !t.options.verboseInvalidExpression && isMetadataError(value);
     }
 
+    const resolveName = (name: string, preferReference?: boolean): MetadataValue => {
+      const reference = this.symbols.resolve(name, preferReference);
+      if (reference === undefined) {
+        // Encode as a global reference. StaticReflector will check the reference.
+        return recordEntry({__symbolic: 'reference', name}, node);
+      }
+      return reference;
+    };
+
     switch (node.kind) {
       case ts.SyntaxKind.ObjectLiteralExpression:
         let obj: {[name: string]: any} = {};
@@ -250,8 +269,8 @@ export class Evaluator {
                 return true;
               }
               const propertyValue = isPropertyAssignment(assignment) ?
-                  this.evaluateNode(assignment.initializer) :
-                  {__symbolic: 'reference', name: propertyName};
+                  this.evaluateNode(assignment.initializer, /* preferReference */ true) :
+                  resolveName(propertyName, /* preferReference */ true);
               if (isFoldableError(propertyValue)) {
                 error = propertyValue;
                 return true;  // Stop the forEachChild.
@@ -268,7 +287,7 @@ export class Evaluator {
       case ts.SyntaxKind.ArrayLiteralExpression:
         let arr: MetadataValue[] = [];
         ts.forEachChild(node, child => {
-          const value = this.evaluateNode(child);
+          const value = this.evaluateNode(child, /* preferReference */ true);
 
           // Check for error
           if (isFoldableError(value)) {
@@ -295,14 +314,15 @@ export class Evaluator {
         return recordEntry({__symbolic: 'spread', expression: spreadExpression}, node);
       case ts.SyntaxKind.CallExpression:
         const callExpression = <ts.CallExpression>node;
-        if (isCallOf(callExpression, 'forwardRef') && callExpression.arguments.length === 1) {
+        if (isCallOf(callExpression, 'forwardRef') &&
+            arrayOrEmpty(callExpression.arguments).length === 1) {
           const firstArgument = callExpression.arguments[0];
           if (firstArgument.kind == ts.SyntaxKind.ArrowFunction) {
             const arrowFunction = <ts.ArrowFunction>firstArgument;
             return recordEntry(this.evaluateNode(arrowFunction.body), node);
           }
         }
-        const args = callExpression.arguments.map(arg => this.evaluateNode(arg));
+        const args = arrayOrEmpty(callExpression.arguments).map(arg => this.evaluateNode(arg));
         if (!this.options.verboseInvalidExpression && args.some(isMetadataError)) {
           return args.find(isMetadataError);
         }
@@ -315,7 +335,8 @@ export class Evaluator {
           }
         }
         // Always fold a CONST_EXPR even if the argument is not foldable.
-        if (isCallOf(callExpression, 'CONST_EXPR') && callExpression.arguments.length === 1) {
+        if (isCallOf(callExpression, 'CONST_EXPR') &&
+            arrayOrEmpty(callExpression.arguments).length === 1) {
           return recordEntry(args[0], node);
         }
         const expression = this.evaluateNode(callExpression.expression);
@@ -329,7 +350,7 @@ export class Evaluator {
         return recordEntry(result, node);
       case ts.SyntaxKind.NewExpression:
         const newExpression = <ts.NewExpression>node;
-        const newArgs = newExpression.arguments.map(arg => this.evaluateNode(arg));
+        const newArgs = arrayOrEmpty(newExpression.arguments).map(arg => this.evaluateNode(arg));
         if (!this.options.verboseInvalidExpression && newArgs.some(isMetadataError)) {
           return recordEntry(newArgs.find(isMetadataError), node);
         }
@@ -355,7 +376,7 @@ export class Evaluator {
         if (expression && this.isFoldable(propertyAccessExpression.expression))
           return (<any>expression)[<string>member];
         if (isMetadataModuleReferenceExpression(expression)) {
-          // A select into a module refrence and be converted into a reference to the symbol
+          // A select into a module reference and be converted into a reference to the symbol
           // in the module
           return recordEntry(
               {__symbolic: 'reference', module: expression.module, name: member}, node);
@@ -368,6 +389,9 @@ export class Evaluator {
         if (isFoldableError(expression)) {
           return recordEntry(expression, node);
         }
+        if (!elementAccessExpression.argumentExpression) {
+          return recordEntry(errorSymbol('Expression form not supported', node), node);
+        }
         const index = this.evaluateNode(elementAccessExpression.argumentExpression);
         if (isFoldableError(expression)) {
           return recordEntry(expression, node);
@@ -380,12 +404,7 @@ export class Evaluator {
       case ts.SyntaxKind.Identifier:
         const identifier = <ts.Identifier>node;
         const name = identifier.text;
-        const reference = this.symbols.resolve(name);
-        if (reference === undefined) {
-          // Encode as a global reference. StaticReflector will check the reference.
-          return recordEntry({__symbolic: 'reference', name}, node);
-        }
-        return reference;
+        return resolveName(name, preferReference);
       case ts.SyntaxKind.TypeReference:
         const typeReferenceNode = <ts.TypeReferenceNode>node;
         const typeNameNode = typeReferenceNode.typeName;
@@ -427,10 +446,42 @@ export class Evaluator {
           (<MetadataImportedSymbolReferenceExpression>typeReference).arguments = args;
         }
         return recordEntry(typeReference, node);
+      case ts.SyntaxKind.UnionType:
+        const unionType = <ts.UnionTypeNode>node;
+
+        // Remove null and undefined from the list of unions.
+        const references = unionType.types
+                               .filter(
+                                   n => n.kind != ts.SyntaxKind.NullKeyword &&
+                                       n.kind != ts.SyntaxKind.UndefinedKeyword)
+                               .map(n => this.evaluateNode(n));
+
+        // The remmaining reference must be the same. If two have type arguments consider them
+        // different even if the type arguments are the same.
+        let candidate: any = null;
+        for (let i = 0; i < references.length; i++) {
+          const reference = references[i];
+          if (isMetadataSymbolicReferenceExpression(reference)) {
+            if (candidate) {
+              if ((reference as any).name == candidate.name &&
+                  (reference as any).module == candidate.module && !(reference as any).arguments) {
+                candidate = reference;
+              }
+            } else {
+              candidate = reference;
+            }
+          } else {
+            return reference;
+          }
+        }
+        if (candidate) return candidate;
+        break;
       case ts.SyntaxKind.NoSubstitutionTemplateLiteral:
-        return (<ts.LiteralExpression>node).text;
       case ts.SyntaxKind.StringLiteral:
-        return (<ts.StringLiteral>node).text;
+      case ts.SyntaxKind.TemplateHead:
+      case ts.SyntaxKind.TemplateTail:
+      case ts.SyntaxKind.TemplateMiddle:
+        return (<ts.LiteralLikeNode>node).text;
       case ts.SyntaxKind.NumericLiteral:
         return parseFloat((<ts.LiteralExpression>node).text);
       case ts.SyntaxKind.AnyKeyword:
@@ -468,11 +519,11 @@ export class Evaluator {
         if (isDefined(operand) && isPrimitive(operand)) {
           switch (prefixUnaryExpression.operator) {
             case ts.SyntaxKind.PlusToken:
-              return +operand;
+              return +(operand as any);
             case ts.SyntaxKind.MinusToken:
-              return -operand;
+              return -(operand as any);
             case ts.SyntaxKind.TildeToken:
-              return ~operand;
+              return ~(operand as any);
             case ts.SyntaxKind.ExclamationToken:
               return !operand;
           }
@@ -567,6 +618,41 @@ export class Evaluator {
       case ts.SyntaxKind.FunctionExpression:
       case ts.SyntaxKind.ArrowFunction:
         return recordEntry(errorSymbol('Function call not supported', node), node);
+      case ts.SyntaxKind.TaggedTemplateExpression:
+        return recordEntry(
+            errorSymbol('Tagged template expressions are not supported in metadata', node), node);
+      case ts.SyntaxKind.TemplateExpression:
+        const templateExpression = <ts.TemplateExpression>node;
+        if (this.isFoldable(node)) {
+          return templateExpression.templateSpans.reduce(
+              (previous, current) => previous + <string>this.evaluateNode(current.expression) +
+                  <string>this.evaluateNode(current.literal),
+              this.evaluateNode(templateExpression.head));
+        } else {
+          return templateExpression.templateSpans.reduce((previous, current) => {
+            const expr = this.evaluateNode(current.expression);
+            const literal = this.evaluateNode(current.literal);
+            if (isFoldableError(expr)) return expr;
+            if (isFoldableError(literal)) return literal;
+            if (typeof previous === 'string' && typeof expr === 'string' &&
+                typeof literal === 'string') {
+              return previous + expr + literal;
+            }
+            let result = expr;
+            if (previous !== '') {
+              result = {__symbolic: 'binop', operator: '+', left: previous, right: expr};
+            }
+            if (literal != '') {
+              result = {__symbolic: 'binop', operator: '+', left: result, right: literal};
+            }
+            return result;
+          }, this.evaluateNode(templateExpression.head));
+        }
+      case ts.SyntaxKind.AsExpression:
+        const asExpression = <ts.AsExpression>node;
+        return this.evaluateNode(asExpression.expression);
+      case ts.SyntaxKind.ClassExpression:
+        return {__symbolic: 'class'};
     }
     return recordEntry(errorSymbol('Expression form not supported', node), node);
   }
@@ -575,3 +661,9 @@ export class Evaluator {
 function isPropertyAssignment(node: ts.Node): node is ts.PropertyAssignment {
   return node.kind == ts.SyntaxKind.PropertyAssignment;
 }
+
+const empty = ts.createNodeArray<any>();
+
+function arrayOrEmpty<T extends ts.Node>(v: ts.NodeArray<T>| undefined): ts.NodeArray<T> {
+  return v || empty;
+}
\ No newline at end of file
diff --git a/tools/@angular/tsc-wrapped/src/index_writer.ts b/packages/tsc-wrapped/src/index_writer.ts
similarity index 100%
rename from tools/@angular/tsc-wrapped/src/index_writer.ts
rename to packages/tsc-wrapped/src/index_writer.ts
diff --git a/tools/@angular/tsc-wrapped/src/main.ts b/packages/tsc-wrapped/src/main.ts
similarity index 63%
rename from tools/@angular/tsc-wrapped/src/main.ts
rename to packages/tsc-wrapped/src/main.ts
index 741aa4cb0e..10a5cf0fbb 100644
--- a/tools/@angular/tsc-wrapped/src/main.ts
+++ b/packages/tsc-wrapped/src/main.ts
@@ -11,22 +11,59 @@ import * as path from 'path';
 import * as tsickle from 'tsickle';
 import * as ts from 'typescript';
 
-import {check, tsc} from './tsc';
-
-import NgOptions from './options';
-import {MetadataWriterHost, SyntheticIndexHost} from './compiler_host';
+import {CompilerHostAdapter, MetadataBundler} from './bundler';
 import {CliOptions} from './cli_options';
-import {VinylFile, isVinylFile} from './vinyl_file';
-import {MetadataBundler, CompilerHostAdapter} from './bundler';
+import {MetadataWriterHost, SyntheticIndexHost} from './compiler_host';
 import {privateEntriesToIndex} from './index_writer';
+import NgOptions from './options';
+import {check, tsc} from './tsc';
+import {isVinylFile, VinylFile} from './vinyl_file';
+
 export {UserError} from './tsc';
 
 const DTS = /\.d\.ts$/;
 const JS_EXT = /(\.js|)$/;
+const TS_EXT = /\.ts$/;
 
-export type CodegenExtension =
-    (ngOptions: NgOptions, cliOptions: CliOptions, program: ts.Program, host: ts.CompilerHost) =>
-        Promise<void>;
+export interface CodegenExtension {
+  /**
+   * Returns the generated file names.
+   */
+  (ngOptions: NgOptions, cliOptions: CliOptions, program: ts.Program,
+   host: ts.CompilerHost): Promise<string[]>;
+}
+
+export function createBundleIndexHost(
+    ngOptions: NgOptions, rootFiles: string[],
+    host: ts.CompilerHost): {host: ts.CompilerHost, indexName?: string, errors?: ts.Diagnostic[]} {
+  const files = rootFiles.filter(f => !DTS.test(f));
+  if (files.length != 1) {
+    return {
+      host,
+      errors: [{
+        file: null as any as ts.SourceFile,
+        start: null as any as number,
+        length: null as any as number,
+        messageText:
+            'Angular compiler option "flatModuleIndex" requires one and only one .ts file in the "files" field.',
+        category: ts.DiagnosticCategory.Error,
+        code: 0
+      }]
+    };
+  }
+  const file = files[0];
+  const indexModule = file.replace(/\.ts$/, '');
+  const bundler =
+      new MetadataBundler(indexModule, ngOptions.flatModuleId, new CompilerHostAdapter(host));
+  const metadataBundle = bundler.getMetadataBundle();
+  const metadata = JSON.stringify(metadataBundle.metadata);
+  const name =
+      path.join(path.dirname(indexModule), ngOptions.flatModuleOutFile !.replace(JS_EXT, '.ts'));
+  const libraryIndex = `./${path.basename(indexModule)}`;
+  const content = privateEntriesToIndex(libraryIndex, metadataBundle.privates);
+  host = new SyntheticIndexHost(host, {name, content, metadata});
+  return {host, indexName: name};
+}
 
 export function main(
     project: string | VinylFile, cliOptions: CliOptions, codegen?: CodegenExtension,
@@ -46,52 +83,35 @@ export function main(
     const basePath = path.resolve(process.cwd(), cliOptions.basePath || projectDir);
 
     // read the configuration options from wherever you store them
-    const {parsed, ngOptions} = tsc.readConfiguration(project, basePath, options);
+    let {parsed, ngOptions} = tsc.readConfiguration(project, basePath, options);
     ngOptions.basePath = basePath;
-    const createProgram = (host: ts.CompilerHost, oldProgram?: ts.Program) =>
-        ts.createProgram(parsed.fileNames, parsed.options, host, oldProgram);
+    let rootFileNames: string[] = parsed.fileNames.slice(0);
+    const createProgram = (host: ts.CompilerHost, oldProgram?: ts.Program) => {
+      return ts.createProgram(rootFileNames.slice(0), parsed.options, host, oldProgram);
+    };
+    const addGeneratedFileName = (genFileName: string) => {
+      if (genFileName.startsWith(basePath) && TS_EXT.exec(genFileName)) {
+        rootFileNames.push(genFileName);
+      }
+    };
+
     const diagnostics = (parsed.options as any).diagnostics;
     if (diagnostics) (ts as any).performance.enable();
 
     let host = ts.createCompilerHost(parsed.options, true);
 
-    // If the comilation is a flat module index then produce the flat module index
+    // If the compilation is a flat module index then produce the flat module index
     // metadata and the synthetic flat module index.
     if (ngOptions.flatModuleOutFile && !ngOptions.skipMetadataEmit) {
-      const files = parsed.fileNames.filter(f => !DTS.test(f));
-      if (files.length != 1) {
-        check([{
-          file: null,
-          start: null,
-          length: null,
-          messageText:
-              'Angular compiler option "flatModuleIndex" requires one and only one .ts file in the "files" field.',
-          category: ts.DiagnosticCategory.Error,
-          code: 0
-        }]);
-      }
-      const file = files[0];
-      const indexModule = file.replace(/\.ts$/, '');
-      const bundler =
-          new MetadataBundler(indexModule, ngOptions.flatModuleId, new CompilerHostAdapter(host));
-      if (diagnostics) console.time('NG flat module index');
-      const metadataBundle = bundler.getMetadataBundle();
-      if (diagnostics) console.timeEnd('NG flat module index');
-      const metadata = JSON.stringify(metadataBundle.metadata);
-      const name =
-          path.join(path.dirname(indexModule), ngOptions.flatModuleOutFile.replace(JS_EXT, '.ts'));
-      const libraryIndex = `./${path.basename(indexModule)}`;
-      const content = privateEntriesToIndex(libraryIndex, metadataBundle.privates);
-      host = new SyntheticIndexHost(host, {name, content, metadata});
-      parsed.fileNames.push(name);
+      const {host: bundleHost, indexName, errors} =
+          createBundleIndexHost(ngOptions, rootFileNames, host);
+      if (errors) check(errors);
+      if (indexName) addGeneratedFileName(indexName);
+      host = bundleHost;
     }
 
-    const tsickleCompilerHostOptions: tsickle.Options = {
-      googmodule: false,
-      untyped: true,
-      convertIndexImportShorthand:
-          ngOptions.target === ts.ScriptTarget.ES2015,  // This covers ES6 too
-    };
+    const tsickleCompilerHostOptions:
+        tsickle.Options = {googmodule: false, untyped: true, convertIndexImportShorthand: true};
 
     const tsickleHost: tsickle.TsickleHost = {
       shouldSkipTsickleProcessing: (fileName) => /\.d\.ts$/.test(fileName),
@@ -109,12 +129,17 @@ export function main(
     check(errors);
 
     if (ngOptions.skipTemplateCodegen || !codegen) {
-      codegen = () => Promise.resolve(null);
+      codegen = () => Promise.resolve([]);
     }
 
     if (diagnostics) console.time('NG codegen');
-    return codegen(ngOptions, cliOptions, program, host).then(() => {
+    return codegen(ngOptions, cliOptions, program, host).then((genFiles) => {
       if (diagnostics) console.timeEnd('NG codegen');
+
+      // Add the generated files to the configuration so they will become part of the program.
+      if (ngOptions.alwaysCompileGeneratedCode) {
+        genFiles.forEach(genFileName => addGeneratedFileName(genFileName));
+      }
       let definitionsHost: ts.CompilerHost = tsickleCompilerHost;
       if (!ngOptions.skipMetadataEmit) {
         // if tsickle is not not used for emitting, but we do use the MetadataWriterHost,
@@ -123,6 +148,7 @@ export function main(
             ngOptions.annotationsAs === 'decorators' && !ngOptions.annotateForClosureCompiler;
         definitionsHost = new MetadataWriterHost(tsickleCompilerHost, ngOptions, emitJsFiles);
       }
+
       // Create a new program since codegen files were created after making the old program
       let programWithCodegen = createProgram(definitionsHost, program);
       tsc.typeCheck(host, programWithCodegen);
@@ -170,12 +196,12 @@ export function main(
 // CLI entry point
 if (require.main === module) {
   const args = process.argv.slice(2);
-  let {options, fileNames, errors} = (ts as any).parseCommandLine(args);
+  let {options, errors} = (ts as any).parseCommandLine(args);
   check(errors);
   const project = options.project || '.';
   // TODO(alexeagle): command line should be TSC-compatible, remove "CliOptions" here
   const cliOptions = new CliOptions(require('minimist')(args));
-  main(project, cliOptions, null, options)
+  main(project, cliOptions, undefined, options)
       .then((exitCode: any) => process.exit(exitCode))
       .catch((e: any) => {
         console.error(e.stack);
diff --git a/tools/@angular/tsc-wrapped/src/options.ts b/packages/tsc-wrapped/src/options.ts
similarity index 91%
rename from tools/@angular/tsc-wrapped/src/options.ts
rename to packages/tsc-wrapped/src/options.ts
index 4e3c7e9df3..8b1020105d 100644
--- a/tools/@angular/tsc-wrapped/src/options.ts
+++ b/packages/tsc-wrapped/src/options.ts
@@ -28,7 +28,7 @@ interface Options extends ts.CompilerOptions {
   // Whether to generate a flat module index of the given name and the corresponding
   // flat module metadata. This option is intended to be used when creating flat
   // modules similar to how `@angular/core` and `@angular/common` are packaged.
-  // When this option is used the `package.json` for the library should refered to the
+  // When this option is used the `package.json` for the library should referred to the
   // generated flat module index instead of the library index file. When using this
   // option only one .metadata.json file is produced that contains all the metadata
   // necessary for symbols exported from the library index.
@@ -81,6 +81,15 @@ interface Options extends ts.CompilerOptions {
 
   // Whether to enable support for <template> and the template attribute (true by default)
   enableLegacyTemplate?: boolean;
+
+  // Whether to generate .ngsummary.ts files that allow to use AOTed artifacts
+  // in JIT mode. This is off by default.
+  enableSummariesForJit?: boolean;
+
+  // Whether to compile generated .ngfacgtory.ts files, even when they are no
+  // matched by the `files` / `includes` in the `tsconfig.json`.
+  // This is off by default.
+  alwaysCompileGeneratedCode?: boolean;
 }
 
 export default Options;
diff --git a/tools/@angular/tsc-wrapped/src/schema.ts b/packages/tsc-wrapped/src/schema.ts
similarity index 96%
rename from tools/@angular/tsc-wrapped/src/schema.ts
rename to packages/tsc-wrapped/src/schema.ts
index 1e390394ab..20fcb9932b 100644
--- a/tools/@angular/tsc-wrapped/src/schema.ts
+++ b/packages/tsc-wrapped/src/schema.ts
@@ -73,7 +73,7 @@ export function isMemberMetadata(value: any): value is MemberMetadata {
 
 export interface MethodMetadata extends MemberMetadata {
   __symbolic: 'constructor'|'method';
-  parameterDecorators?: (MetadataSymbolicExpression|MetadataError)[][];
+  parameterDecorators?: ((MetadataSymbolicExpression | MetadataError)[]|undefined)[];
 }
 export function isMethodMetadata(value: any): value is MethodMetadata {
   return value && (value.__symbolic === 'constructor' || value.__symbolic === 'method');
@@ -81,7 +81,7 @@ export function isMethodMetadata(value: any): value is MethodMetadata {
 
 export interface ConstructorMetadata extends MethodMetadata {
   __symbolic: 'constructor';
-  parameters?: (MetadataSymbolicExpression|MetadataError|null)[];
+  parameters?: (MetadataSymbolicExpression|MetadataError|null|undefined)[];
 }
 export function isConstructorMetadata(value: any): value is ConstructorMetadata {
   return value && value.__symbolic === 'constructor';
@@ -97,8 +97,8 @@ export function isFunctionMetadata(value: any): value is FunctionMetadata {
   return value && value.__symbolic === 'function';
 }
 
-export type MetadataValue = string | number | boolean | MetadataObject | MetadataArray |
-    MetadataSymbolicExpression | MetadataError;
+export type MetadataValue = string | number | boolean | undefined | null | MetadataObject |
+    MetadataArray | MetadataSymbolicExpression | MetadataError;
 
 export interface MetadataObject { [name: string]: MetadataValue; }
 
diff --git a/tools/@angular/tsc-wrapped/src/symbols.ts b/packages/tsc-wrapped/src/symbols.ts
similarity index 72%
rename from tools/@angular/tsc-wrapped/src/symbols.ts
rename to packages/tsc-wrapped/src/symbols.ts
index 91ccb5c972..6e29dd267f 100644
--- a/tools/@angular/tsc-wrapped/src/symbols.ts
+++ b/packages/tsc-wrapped/src/symbols.ts
@@ -8,16 +8,22 @@
 
 import * as ts from 'typescript';
 
-import {MetadataValue} from './schema';
+import {MetadataSymbolicReferenceExpression, MetadataValue} from './schema';
 
 export class Symbols {
   private _symbols: Map<string, MetadataValue>;
+  private references = new Map<string, MetadataSymbolicReferenceExpression>();
 
   constructor(private sourceFile: ts.SourceFile) {}
 
-  resolve(name: string): MetadataValue|undefined { return this.symbols.get(name); }
+  resolve(name: string, preferReference?: boolean): MetadataValue|undefined {
+    return (preferReference && this.references.get(name)) || this.symbols.get(name);
+  }
 
   define(name: string, value: MetadataValue) { this.symbols.set(name, value); }
+  defineReference(name: string, value: MetadataSymbolicReferenceExpression) {
+    this.references.set(name, value);
+  }
 
   has(name: string): boolean { return this.symbols.has(name); }
 
@@ -43,23 +49,26 @@ export class Symbols {
               ts.SyntaxKind.ExternalModuleReference) {
             const externalReference =
                 <ts.ExternalModuleReference>importEqualsDeclaration.moduleReference;
-            // An `import <identifier> = require(<module-specifier>);
-            if (!externalReference.expression.parent) {
-              // The `parent` field of a node is set by the TypeScript binder (run as
-              // part of the type checker). Setting it here allows us to call `getText()`
-              // even if the `SourceFile` was not type checked (which looks for `SourceFile`
-              // in the parent chain). This doesn't damage the node as the binder unconditionally
-              // sets the parent.
-              externalReference.expression.parent = externalReference;
-              externalReference.parent = this.sourceFile;
+            if (externalReference.expression) {
+              // An `import <identifier> = require(<module-specifier>);
+              if (!externalReference.expression.parent) {
+                // The `parent` field of a node is set by the TypeScript binder (run as
+                // part of the type checker). Setting it here allows us to call `getText()`
+                // even if the `SourceFile` was not type checked (which looks for `SourceFile`
+                // in the parent chain). This doesn't damage the node as the binder unconditionally
+                // sets the parent.
+                externalReference.expression.parent = externalReference;
+                externalReference.parent = this.sourceFile as any;
+              }
+              const from = stripQuotes(externalReference.expression.getText());
+              symbols.set(
+                  importEqualsDeclaration.name.text, {__symbolic: 'reference', module: from});
+              break;
             }
-            const from = stripQuotes(externalReference.expression.getText());
-            symbols.set(importEqualsDeclaration.name.text, {__symbolic: 'reference', module: from});
-          } else {
-            symbols.set(
-                importEqualsDeclaration.name.text,
-                {__symbolic: 'error', message: `Unsupported import syntax`});
           }
+          symbols.set(
+              importEqualsDeclaration.name.text,
+              {__symbolic: 'error', message: `Unsupported import syntax`});
           break;
         case ts.SyntaxKind.ImportDeclaration:
           const importDecl = <ts.ImportDeclaration>node;
diff --git a/tools/@angular/tsc-wrapped/src/tsc.ts b/packages/tsc-wrapped/src/tsc.ts
similarity index 79%
rename from tools/@angular/tsc-wrapped/src/tsc.ts
rename to packages/tsc-wrapped/src/tsc.ts
index 96889c9439..3fa20b1bc4 100644
--- a/tools/@angular/tsc-wrapped/src/tsc.ts
+++ b/packages/tsc-wrapped/src/tsc.ts
@@ -33,7 +33,7 @@ export class UserError extends Error {
     super(message);
     // Required for TS 2.1, see
     // https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes#extending-built-ins-like-error-array-and-map-may-no-longer-work
-    Object.setPrototypeOf(this, UserError.prototype);
+    (Object as any).setPrototypeOf(this, UserError.prototype);
 
     const nativeError = new Error(message) as any as Error;
     this._nativeError = nativeError;
@@ -76,13 +76,14 @@ export function formatDiagnostics(diags: ts.Diagnostic[]): string {
       .join('\n');
 }
 
-export function check(diags: ts.Diagnostic[]) {
+export function check(diags: ts.Diagnostic[] | undefined) {
   if (diags && diags.length && diags[0]) {
     throw new UserError(formatDiagnostics(diags));
   }
 }
 
-export function validateAngularCompilerOptions(options: AngularCompilerOptions): ts.Diagnostic[] {
+export function validateAngularCompilerOptions(options: AngularCompilerOptions): ts.Diagnostic[]|
+    undefined {
   if (options.annotationsAs) {
     switch (options.annotationsAs) {
       case 'decorators':
@@ -90,9 +91,9 @@ export function validateAngularCompilerOptions(options: AngularCompilerOptions):
         break;
       default:
         return [{
-          file: null,
-          start: null,
-          length: null,
+          file: null as any as ts.SourceFile,
+          start: null as any as number,
+          length: null as any as number,
           messageText:
               'Angular compiler options "annotationsAs" only supports "static fields" and "decorators"',
           category: ts.DiagnosticCategory.Error,
@@ -103,16 +104,19 @@ export function validateAngularCompilerOptions(options: AngularCompilerOptions):
 }
 
 export class Tsc implements CompilerInterface {
-  public ngOptions: AngularCompilerOptions;
-  public parsed: ts.ParsedCommandLine;
-  private basePath: string;
+  private parseConfigHost: ts.ParseConfigHost;
 
-  constructor(private readFile = ts.sys.readFile, private readDirectory = ts.sys.readDirectory) {}
+  constructor(private readFile = ts.sys.readFile, private readDirectory = ts.sys.readDirectory) {
+    this.parseConfigHost = {
+      useCaseSensitiveFileNames: true,
+      fileExists: existsSync,
+      readDirectory: this.readDirectory,
+      readFile: ts.sys.readFile
+    };
+  }
 
   readConfiguration(
       project: string|VinylFile, basePath: string, existingOptions?: ts.CompilerOptions) {
-    this.basePath = basePath;
-
     // Allow a directory containing tsconfig.json as the project value
     // Note, TS@next returns an empty array, while earlier versions throw
     try {
@@ -133,33 +137,23 @@ export class Tsc implements CompilerInterface {
         return ts.readConfigFile(project, this.readFile);
       }
     })();
-    check([error]);
+    check([error !]);
 
-    // Do not inline `host` into `parseJsonConfigFileContent` until after
-    // g3 is updated to the latest TypeScript.
-    // The issue is that old typescript only has `readDirectory` while
-    // the newer TypeScript has additional `useCaseSensitiveFileNames` and
-    // `fileExists`. Inlining will trigger an error of extra parameters.
-    const host = {
-      useCaseSensitiveFileNames: true,
-      fileExists: existsSync,
-      readDirectory: this.readDirectory,
-      readFile: ts.sys.readFile
-    };
-    this.parsed = ts.parseJsonConfigFileContent(config, host, basePath, existingOptions);
+    const parsed =
+        ts.parseJsonConfigFileContent(config, this.parseConfigHost, basePath, existingOptions);
 
-    check(this.parsed.errors);
+    check(parsed.errors);
 
     // Default codegen goes to the current directory
     // Parsed options are already converted to absolute paths
-    this.ngOptions = config.angularCompilerOptions || {};
-    this.ngOptions.genDir = path.join(basePath, this.ngOptions.genDir || '.');
-    for (const key of Object.keys(this.parsed.options)) {
-      this.ngOptions[key] = this.parsed.options[key];
+    const ngOptions = config.angularCompilerOptions || {};
+    ngOptions.genDir = path.join(basePath, ngOptions.genDir || '.');
+    for (const key of Object.keys(parsed.options)) {
+      ngOptions[key] = parsed.options[key];
     }
-    check(validateAngularCompilerOptions(this.ngOptions));
+    check(validateAngularCompilerOptions(ngOptions));
 
-    return {parsed: this.parsed, ngOptions: this.ngOptions};
+    return {parsed, ngOptions};
   }
 
   typeCheck(compilerHost: ts.CompilerHost, program: ts.Program): void {
diff --git a/tools/@angular/tsc-wrapped/src/vinyl_file.ts b/packages/tsc-wrapped/src/vinyl_file.ts
similarity index 99%
rename from tools/@angular/tsc-wrapped/src/vinyl_file.ts
rename to packages/tsc-wrapped/src/vinyl_file.ts
index 41b619d48c..87ffe1d797 100644
--- a/tools/@angular/tsc-wrapped/src/vinyl_file.ts
+++ b/packages/tsc-wrapped/src/vinyl_file.ts
@@ -12,8 +12,7 @@ export interface VinylFile extends Object {
   // Content of the virtual file
   contents: Buffer;
 }
-;
 
 export function isVinylFile(obj: any): obj is VinylFile {
   return (typeof obj === 'object') && ('path' in obj) && ('contents' in obj);
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/tools/@angular/tsc-wrapped/test/bundler_spec.ts b/packages/tsc-wrapped/test/bundler_spec.ts
similarity index 88%
rename from tools/@angular/tsc-wrapped/test/bundler_spec.ts
rename to packages/tsc-wrapped/test/bundler_spec.ts
index 90569628f4..347b3c58b2 100644
--- a/tools/@angular/tsc-wrapped/test/bundler_spec.ts
+++ b/packages/tsc-wrapped/test/bundler_spec.ts
@@ -29,7 +29,7 @@ describe('metadata bundler', () => {
     const originalTwo = './src/two/index';
     expect(Object.keys(result.metadata.origins)
                .sort()
-               .map(name => ({name, value: result.metadata.origins[name]})))
+               .map(name => ({name, value: result.metadata.origins ![name]})))
         .toEqual([
           {name: 'ONE_CLASSES', value: originalOne}, {name: 'One', value: originalOne},
           {name: 'OneMore', value: originalOne}, {name: 'TWO_CLASSES', value: originalTwo},
@@ -163,6 +163,35 @@ describe('metadata bundler', () => {
     expect(Object.keys(result.metadata.metadata).sort()).toEqual(['Foo', 'ɵa']);
     expect(result.privates).toEqual([{privateName: 'ɵa', name: 'Bar', module: './bar'}]);
   });
+
+  it('should be able to bundle a library with re-exported symbols', () => {
+    const host = new MockStringBundlerHost('/', {
+      'public-api.ts': `
+        export * from './src/core';
+        export * from './src/externals';
+      `,
+      'src': {
+        'core.ts': `
+          export class A {}
+          export class B extends A {}
+        `,
+        'externals.ts': `
+          export {E, F, G} from 'external_one';
+          export * from 'external_two';
+        `
+      }
+    });
+
+    const bundler = new MetadataBundler('/public-api', undefined, host);
+    const result = bundler.getMetadataBundle();
+    expect(result.metadata.exports).toEqual([
+      {from: 'external_two'}, {
+        export: [{name: 'E', as: 'E'}, {name: 'F', as: 'F'}, {name: 'G', as: 'G'}],
+        from: 'external_one'
+      }
+    ]);
+    expect(result.metadata.origins !['E']).toBeUndefined();
+  });
 });
 
 export class MockStringBundlerHost implements MetadataBundlerHost {
@@ -170,7 +199,7 @@ export class MockStringBundlerHost implements MetadataBundlerHost {
 
   constructor(private dirName: string, private directory: Directory) {}
 
-  getMetadataFor(moduleName: string): ModuleMetadata {
+  getMetadataFor(moduleName: string): ModuleMetadata|undefined {
     const fileName = path.join(this.dirName, moduleName) + '.ts';
     const text = open(this.directory, fileName);
     if (typeof text == 'string') {
diff --git a/tools/@angular/tsc-wrapped/test/collector.spec.ts b/packages/tsc-wrapped/test/collector.spec.ts
similarity index 81%
rename from tools/@angular/tsc-wrapped/test/collector.spec.ts
rename to packages/tsc-wrapped/test/collector.spec.ts
index f179d64fe7..b22f3d1f5b 100644
--- a/tools/@angular/tsc-wrapped/test/collector.spec.ts
+++ b/packages/tsc-wrapped/test/collector.spec.ts
@@ -196,13 +196,13 @@ describe('Collector', () => {
 
   beforeEach(() => {
     casesFile = program.getSourceFile('/app/cases-data.ts');
-    casesMetadata = collector.getMetadata(casesFile);
+    casesMetadata = collector.getMetadata(casesFile) !;
   });
 
   it('should provide any reference for an any ctor parameter type', () => {
     const casesAny = <ClassMetadata>casesMetadata.metadata['CaseAny'];
     expect(casesAny).toBeTruthy();
-    const ctorData = casesAny.members['__ctor__'];
+    const ctorData = casesAny.members !['__ctor__'];
     expect(ctorData).toEqual(
         [{__symbolic: 'constructor', parameters: [{__symbolic: 'reference', name: 'any'}]}]);
   });
@@ -265,10 +265,10 @@ describe('Collector', () => {
 
   it('should report an error for references to unexpected types', () => {
     const unsupported1 = program.getSourceFile('/unsupported-2.ts');
-    const metadata = collector.getMetadata(unsupported1);
+    const metadata = collector.getMetadata(unsupported1) !;
     const barClass = <ClassMetadata>metadata.metadata['Bar'];
-    const ctor = <ConstructorMetadata>barClass.members['__ctor__'][0];
-    const parameter = ctor.parameters[0];
+    const ctor = <ConstructorMetadata>barClass.members !['__ctor__'][0];
+    const parameter = ctor.parameters ![0];
     expect(parameter).toEqual({
       __symbolic: 'error',
       message: 'Reference to non-exported class',
@@ -280,9 +280,9 @@ describe('Collector', () => {
 
   it('should be able to handle import star type references', () => {
     const importStar = program.getSourceFile('/import-star.ts');
-    const metadata = collector.getMetadata(importStar);
+    const metadata = collector.getMetadata(importStar) !;
     const someClass = <ClassMetadata>metadata.metadata['SomeClass'];
-    const ctor = <ConstructorMetadata>someClass.members['__ctor__'][0];
+    const ctor = <ConstructorMetadata>someClass.members !['__ctor__'][0];
     const parameters = ctor.parameters;
     expect(parameters).toEqual([
       {__symbolic: 'reference', module: 'angular2/common', name: 'NgFor'}
@@ -365,9 +365,9 @@ describe('Collector', () => {
 
   it('should be able to handle import star type references', () => {
     const importStar = program.getSourceFile('/import-star.ts');
-    const metadata = collector.getMetadata(importStar);
+    const metadata = collector.getMetadata(importStar) !;
     const someClass = <ClassMetadata>metadata.metadata['SomeClass'];
-    const ctor = <ConstructorMetadata>someClass.members['__ctor__'][0];
+    const ctor = <ConstructorMetadata>someClass.members !['__ctor__'][0];
     const parameters = ctor.parameters;
     expect(parameters).toEqual([
       {__symbolic: 'reference', module: 'angular2/common', name: 'NgFor'}
@@ -376,14 +376,14 @@ describe('Collector', () => {
 
   it('should be able to collect the value of an enum', () => {
     const enumSource = program.getSourceFile('/exported-enum.ts');
-    const metadata = collector.getMetadata(enumSource);
+    const metadata = collector.getMetadata(enumSource) !;
     const someEnum: any = metadata.metadata['SomeEnum'];
     expect(someEnum).toEqual({A: 0, B: 1, C: 100, D: 101});
   });
 
   it('should ignore a non-export enum', () => {
     const enumSource = program.getSourceFile('/private-enum.ts');
-    const metadata = collector.getMetadata(enumSource);
+    const metadata = collector.getMetadata(enumSource) !;
     const publicEnum: any = metadata.metadata['PublicEnum'];
     const privateEnum: any = metadata.metadata['PrivateEnum'];
     expect(publicEnum).toEqual({a: 0, b: 1, c: 2});
@@ -392,7 +392,7 @@ describe('Collector', () => {
 
   it('should be able to collect enums initialized from consts', () => {
     const enumSource = program.getSourceFile('/exported-enum.ts');
-    const metadata = collector.getMetadata(enumSource);
+    const metadata = collector.getMetadata(enumSource) !;
     const complexEnum: any = metadata.metadata['ComplexEnum'];
     expect(complexEnum).toEqual({
       A: 0,
@@ -405,7 +405,7 @@ describe('Collector', () => {
 
   it('should be able to collect a simple static method', () => {
     const staticSource = program.getSourceFile('/static-method.ts');
-    const metadata = collector.getMetadata(staticSource);
+    const metadata = collector.getMetadata(staticSource) !;
     expect(metadata).toBeDefined();
     const classData = <ClassMetadata>metadata.metadata['MyModule'];
     expect(classData).toBeDefined();
@@ -423,7 +423,7 @@ describe('Collector', () => {
 
   it('should be able to collect a call to a static method', () => {
     const staticSource = program.getSourceFile('/static-method-call.ts');
-    const metadata = collector.getMetadata(staticSource);
+    const metadata = collector.getMetadata(staticSource) !;
     expect(metadata).toBeDefined();
     const classData = <ClassMetadata>metadata.metadata['Foo'];
     expect(classData).toBeDefined();
@@ -446,7 +446,7 @@ describe('Collector', () => {
 
   it('should be able to collect a static field', () => {
     const staticSource = program.getSourceFile('/static-field.ts');
-    const metadata = collector.getMetadata(staticSource);
+    const metadata = collector.getMetadata(staticSource) !;
     expect(metadata).toBeDefined();
     const classData = <ClassMetadata>metadata.metadata['MyModule'];
     expect(classData).toBeDefined();
@@ -455,7 +455,7 @@ describe('Collector', () => {
 
   it('should be able to collect a reference to a static field', () => {
     const staticSource = program.getSourceFile('/static-field-reference.ts');
-    const metadata = collector.getMetadata(staticSource);
+    const metadata = collector.getMetadata(staticSource) !;
     expect(metadata).toBeDefined();
     const classData = <ClassMetadata>metadata.metadata['Foo'];
     expect(classData).toBeDefined();
@@ -477,7 +477,7 @@ describe('Collector', () => {
 
   it('should be able to collect a method with a conditional expression', () => {
     const source = program.getSourceFile('/static-method-with-if.ts');
-    const metadata = collector.getMetadata(source);
+    const metadata = collector.getMetadata(source) !;
     expect(metadata).toBeDefined();
     const classData = <ClassMetadata>metadata.metadata['MyModule'];
     expect(classData).toBeDefined();
@@ -502,7 +502,7 @@ describe('Collector', () => {
 
   it('should be able to collect a method with a default parameter', () => {
     const source = program.getSourceFile('/static-method-with-default.ts');
-    const metadata = collector.getMetadata(source);
+    const metadata = collector.getMetadata(source) !;
     expect(metadata).toBeDefined();
     const classData = <ClassMetadata>metadata.metadata['MyModule'];
     expect(classData).toBeDefined();
@@ -531,7 +531,7 @@ describe('Collector', () => {
 
   it('should be able to collect re-exported symbols', () => {
     const source = program.getSourceFile('/re-exports.ts');
-    const metadata = collector.getMetadata(source);
+    const metadata = collector.getMetadata(source) !;
     expect(metadata.exports).toEqual([
       {from: './static-field', export: ['MyModule']},
       {from: './static-field-reference', export: [{name: 'Foo', as: 'OtherModule'}]},
@@ -541,13 +541,13 @@ describe('Collector', () => {
 
   it('should be able to collect a export as symbol', () => {
     const source = program.getSourceFile('export-as.d.ts');
-    const metadata = collector.getMetadata(source);
+    const metadata = collector.getMetadata(source) !;
     expect(metadata.metadata).toEqual({SomeFunction: {__symbolic: 'function'}});
   });
 
   it('should be able to collect exports with no module specifier', () => {
     const source = program.getSourceFile('/re-exports-2.ts');
-    const metadata = collector.getMetadata(source);
+    const metadata = collector.getMetadata(source) !;
     expect(metadata.metadata).toEqual({
       MyClass: Object({__symbolic: 'class'}),
       OtherModule: {__symbolic: 'reference', module: './static-field-reference', name: 'Foo'},
@@ -557,7 +557,7 @@ describe('Collector', () => {
 
   it('should collect an error symbol if collecting a reference to a non-exported symbol', () => {
     const source = program.getSourceFile('/local-symbol-ref.ts');
-    const metadata = collector.getMetadata(source);
+    const metadata = collector.getMetadata(source) !;
     expect(metadata.metadata).toEqual({
       REQUIRED_VALIDATOR: {
         __symbolic: 'error',
@@ -579,7 +579,7 @@ describe('Collector', () => {
 
   it('should collect an error symbol if collecting a reference to a non-exported function', () => {
     const source = program.getSourceFile('/local-function-ref.ts');
-    const metadata = collector.getMetadata(source);
+    const metadata = collector.getMetadata(source) !;
     expect(metadata.metadata).toEqual({
       REQUIRED_VALIDATOR: {
         __symbolic: 'error',
@@ -601,7 +601,7 @@ describe('Collector', () => {
 
   it('should collect an error for a simple function that references a local variable', () => {
     const source = program.getSourceFile('/local-symbol-ref-func.ts');
-    const metadata = collector.getMetadata(source);
+    const metadata = collector.getMetadata(source) !;
     expect(metadata.metadata).toEqual({
       foo: {
         __symbolic: 'function',
@@ -619,7 +619,7 @@ describe('Collector', () => {
 
   it('should collect any for interface parameter reference', () => {
     const source = program.getSourceFile('/interface-reference.ts');
-    const metadata = collector.getMetadata(source);
+    const metadata = collector.getMetadata(source) !;
     expect((metadata.metadata['SomeClass'] as ClassMetadata).members).toEqual({
       __ctor__: [{
         __symbolic: 'constructor',
@@ -633,6 +633,111 @@ describe('Collector', () => {
     });
   });
 
+  describe('with interpolations', () => {
+    function e(expr: string, prefix?: string) {
+      const metadata = collectSource(`${prefix || ''} export let value = ${expr};`);
+      return expect(metadata.metadata['value']);
+    }
+
+    it('should be able to collect a raw interpolated string',
+       () => { e('`simple value`').toBe('simple value'); });
+
+    it('should be able to interpolate a single value',
+       () => { e('`${foo}`', 'const foo = "foo value"').toBe('foo value'); });
+
+    it('should be able to interpolate multiple values', () => {
+      e('`foo:${foo}, bar:${bar}, end`', 'const foo = "foo"; const bar = "bar";')
+          .toBe('foo:foo, bar:bar, end');
+    });
+
+    it('should be able to interpolate with an imported reference', () => {
+      e('`external:${external}`', 'import {external} from "./external";').toEqual({
+        __symbolic: 'binop',
+        operator: '+',
+        left: 'external:',
+        right: {
+          __symbolic: 'reference',
+          module: './external',
+          name: 'external',
+        }
+      });
+    });
+
+    it('should simplify a redundant template', () => {
+      e('`${external}`', 'import {external} from "./external";')
+          .toEqual({__symbolic: 'reference', module: './external', name: 'external'});
+    });
+
+    it('should be able to collect complex template with imported references', () => {
+      e('`foo:${foo}, bar:${bar}, end`', 'import {foo, bar} from "./external";').toEqual({
+        __symbolic: 'binop',
+        operator: '+',
+        left: {
+          __symbolic: 'binop',
+          operator: '+',
+          left: {
+            __symbolic: 'binop',
+            operator: '+',
+            left: {
+              __symbolic: 'binop',
+              operator: '+',
+              left: 'foo:',
+              right: {__symbolic: 'reference', module: './external', name: 'foo'}
+            },
+            right: ', bar:'
+          },
+          right: {__symbolic: 'reference', module: './external', name: 'bar'}
+        },
+        right: ', end'
+      });
+    });
+
+    it('should reject a tagged literal', () => {
+      e('tag`some value`').toEqual({
+        __symbolic: 'error',
+        message: 'Tagged template expressions are not supported in metadata',
+        line: 0,
+        character: 20
+      });
+    });
+  });
+
+  it('should ignore |null or |undefined in type expressions', () => {
+    const metadata = collectSource(`
+      import {Foo} from './foo';
+      export class SomeClass {
+        constructor (a: Foo, b: Foo | null, c: Foo | undefined, d: Foo | undefined | null, e: Foo | undefined | null | Foo) {}
+      }
+    `);
+    expect((metadata.metadata['SomeClass'] as ClassMetadata).members).toEqual({
+      __ctor__: [{
+        __symbolic: 'constructor',
+        parameters: [
+          {__symbolic: 'reference', module: './foo', name: 'Foo'},
+          {__symbolic: 'reference', module: './foo', name: 'Foo'},
+          {__symbolic: 'reference', module: './foo', name: 'Foo'},
+          {__symbolic: 'reference', module: './foo', name: 'Foo'},
+          {__symbolic: 'reference', module: './foo', name: 'Foo'}
+        ]
+      }]
+    });
+  });
+
+  it('should treat exported class expressions as a class', () => {
+    const source = ts.createSourceFile(
+        '', `
+    export const InjectionToken: {new<T>(desc: string): InjectionToken<T>;} = class extends OpaqueToken {
+      constructor(desc: string) {
+        super(desc);
+      }
+
+      toString(): string { return \`InjectionToken ${this._desc}\`; }
+    } as any;`,
+        ts.ScriptTarget.Latest, true);
+    const metadata = collector.getMetadata(source) !;
+    expect(metadata.metadata).toEqual({InjectionToken: {__symbolic: 'class'}});
+  });
+
   describe('in strict mode', () => {
     it('should throw if an error symbol is collecting a reference to a non-exported symbol', () => {
       const source = program.getSourceFile('/local-symbol-ref.ts');
@@ -676,19 +781,19 @@ describe('Collector', () => {
 
   describe('inheritance', () => {
     it('should record `extends` clauses for declared classes', () => {
-      const metadata = collector.getMetadata(program.getSourceFile('/class-inheritance.ts'));
+      const metadata = collector.getMetadata(program.getSourceFile('/class-inheritance.ts')) !;
       expect(metadata.metadata['DeclaredChildClass'])
           .toEqual({__symbolic: 'class', extends: {__symbolic: 'reference', name: 'ParentClass'}});
     });
 
     it('should record `extends` clauses for classes in the same file', () => {
-      const metadata = collector.getMetadata(program.getSourceFile('/class-inheritance.ts'));
+      const metadata = collector.getMetadata(program.getSourceFile('/class-inheritance.ts')) !;
       expect(metadata.metadata['ChildClassSameFile'])
           .toEqual({__symbolic: 'class', extends: {__symbolic: 'reference', name: 'ParentClass'}});
     });
 
     it('should record `extends` clauses for classes in a different file', () => {
-      const metadata = collector.getMetadata(program.getSourceFile('/class-inheritance.ts'));
+      const metadata = collector.getMetadata(program.getSourceFile('/class-inheritance.ts')) !;
       expect(metadata.metadata['ChildClassOtherFile']).toEqual({
         __symbolic: 'class',
         extends: {
@@ -706,7 +811,7 @@ describe('Collector', () => {
     }
 
     it('should collect the correct arity for a class', () => {
-      const metadata = collector.getMetadata(program.getSourceFile('/class-arity.ts'));
+      const metadata = collector.getMetadata(program.getSourceFile('/class-arity.ts')) !;
 
       const zero = metadata.metadata['Zero'];
       if (expectClass(zero)) expect(zero.arity).toBeUndefined();
@@ -721,11 +826,129 @@ describe('Collector', () => {
     });
   });
 
+  describe('regerssion', () => {
+    it('should be able to collect a short-hand property value', () => {
+      const metadata = collectSource(`
+        const children = { f1: 1 };
+        export const r = [
+          {path: ':locale', children}
+        ];
+      `);
+      expect(metadata.metadata).toEqual({r: [{path: ':locale', children: {f1: 1}}]});
+    });
+
+    // #17518
+    it('should skip a default function', () => {
+      const metadata = collectSource(`
+        export default function () {
+
+          const mainRoutes = [
+            {name: 'a', abstract: true, component: 'main'},
+
+            {name: 'a.welcome', url: '/welcome', component: 'welcome'}
+          ];
+
+          return mainRoutes;
+
+        }`);
+      expect(metadata).toBeUndefined();
+    });
+
+    it('should skip a named default export', () => {
+      const metadata = collectSource(`
+        function mainRoutes() {
+
+          const mainRoutes = [
+            {name: 'a', abstract: true, component: 'main'},
+
+            {name: 'a.welcome', url: '/welcome', component: 'welcome'}
+          ];
+
+          return mainRoutes;
+
+        }
+
+        exports = foo;
+        `);
+      expect(metadata).toBeUndefined();
+    });
+
+    it('should be able to collect an invalid access expression', () => {
+      const source = createSource(`
+        import {Component} from '@angular/core';
+
+        const value = [];
+        @Component({
+          provider: [{provide: 'some token', useValue: value[]}]
+        })
+        export class MyComponent {}
+      `);
+      const metadata = collector.getMetadata(source) !;
+      expect(metadata.metadata.MyComponent).toEqual({
+        __symbolic: 'class',
+        decorators: [{
+          __symbolic: 'error',
+          message: 'Expression form not supported',
+          line: 5,
+          character: 55
+        }]
+      });
+    });
+  });
+
+  describe('references', () => {
+    beforeEach(() => { collector = new MetadataCollector({quotedNames: true}); });
+
+    it('should record a reference to an exported field of a useValue', () => {
+      const metadata = collectSource(`
+        export var someValue = 1;
+        export const v = {
+          useValue: someValue
+        };
+      `);
+      expect(metadata.metadata['someValue']).toEqual(1);
+      expect(metadata.metadata['v']).toEqual({
+        useValue: {__symbolic: 'reference', name: 'someValue'}
+      });
+    });
+
+    it('should leave external references in place in an object literal', () => {
+      const metadata = collectSource(`
+        export const myLambda = () => [1, 2, 3];
+        const indirect = [{a: 1, b: 3: c: myLambda}];
+        export const v = {
+          v: {i: indirect}
+        }
+      `);
+      expect(metadata.metadata['v']).toEqual({
+        v: {i: [{a: 1, b: 3, c: {__symbolic: 'reference', name: 'myLambda'}}]}
+      });
+    });
+
+    it('should leave an external reference in place in an array literal', () => {
+      const metadata = collectSource(`
+        export const myLambda = () => [1, 2, 3];
+        const indirect = [1, 3, myLambda}];
+        export const v = {
+          v: {i: indirect}
+        }
+      `);
+      expect(metadata.metadata['v']).toEqual({
+        v: {i: [1, 3, {__symbolic: 'reference', name: 'myLambda'}]}
+      });
+    });
+  });
+
   function override(fileName: string, content: string) {
     host.overrideFile(fileName, content);
     host.addFile(fileName);
     program = service.getProgram();
   }
+
+  function collectSource(content: string): ModuleMetadata {
+    const sourceFile = createSource(content);
+    return collector.getMetadata(sourceFile) !;
+  }
 });
 
 // TODO: Do not use \` in a template literal as it confuses clang-format
@@ -775,7 +998,7 @@ const FILES: Directory = {
         }
 
         getHeroes() {
-          this._heroService.getHeroesSlowly().then(heros => this.heroes = heros);
+          this._heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
         }
       }`,
     'hero.ts': `
@@ -1208,3 +1431,7 @@ const FILES: Directory = {
     }
   }
 };
+
+function createSource(text: string): ts.SourceFile {
+  return ts.createSourceFile('', text, ts.ScriptTarget.Latest, true);
+}
diff --git a/tools/@angular/tsc-wrapped/test/evaluator.spec.ts b/packages/tsc-wrapped/test/evaluator.spec.ts
similarity index 60%
rename from tools/@angular/tsc-wrapped/test/evaluator.spec.ts
rename to packages/tsc-wrapped/test/evaluator.spec.ts
index 30d28ac32c..2205a27120 100644
--- a/tools/@angular/tsc-wrapped/test/evaluator.spec.ts
+++ b/packages/tsc-wrapped/test/evaluator.spec.ts
@@ -12,7 +12,7 @@ import * as ts from 'typescript';
 import {Evaluator} from '../src/evaluator';
 import {Symbols} from '../src/symbols';
 
-import {Directory, Host, expectNoDiagnostics, findVar} from './typescript.mocks';
+import {Directory, Host, expectNoDiagnostics, findVar, findVarInitializer} from './typescript.mocks';
 
 describe('Evaluator', () => {
   const documentRegistry = ts.createDocumentRegistry();
@@ -31,7 +31,7 @@ describe('Evaluator', () => {
     service = ts.createLanguageService(host, documentRegistry);
     program = service.getProgram();
     typeChecker = program.getTypeChecker();
-    symbols = new Symbols(null);
+    symbols = new Symbols(null as any as ts.SourceFile);
     evaluator = new Evaluator(symbols, new Map());
   });
 
@@ -48,10 +48,10 @@ describe('Evaluator', () => {
 
   it('should be able to fold literal expressions', () => {
     const consts = program.getSourceFile('consts.ts');
-    expect(evaluator.isFoldable(findVar(consts, 'someName').initializer)).toBeTruthy();
-    expect(evaluator.isFoldable(findVar(consts, 'someBool').initializer)).toBeTruthy();
-    expect(evaluator.isFoldable(findVar(consts, 'one').initializer)).toBeTruthy();
-    expect(evaluator.isFoldable(findVar(consts, 'two').initializer)).toBeTruthy();
+    expect(evaluator.isFoldable(findVarInitializer(consts, 'someName'))).toBeTruthy();
+    expect(evaluator.isFoldable(findVarInitializer(consts, 'someBool'))).toBeTruthy();
+    expect(evaluator.isFoldable(findVarInitializer(consts, 'one'))).toBeTruthy();
+    expect(evaluator.isFoldable(findVarInitializer(consts, 'two'))).toBeTruthy();
   });
 
   it('should be able to fold expressions with foldable references', () => {
@@ -60,20 +60,20 @@ describe('Evaluator', () => {
     symbols.define('someBool', true);
     symbols.define('one', 1);
     symbols.define('two', 2);
-    expect(evaluator.isFoldable(findVar(expressions, 'three').initializer)).toBeTruthy();
-    expect(evaluator.isFoldable(findVar(expressions, 'four').initializer)).toBeTruthy();
+    expect(evaluator.isFoldable(findVarInitializer(expressions, 'three'))).toBeTruthy();
+    expect(evaluator.isFoldable(findVarInitializer(expressions, 'four'))).toBeTruthy();
     symbols.define('three', 3);
     symbols.define('four', 4);
-    expect(evaluator.isFoldable(findVar(expressions, 'obj').initializer)).toBeTruthy();
-    expect(evaluator.isFoldable(findVar(expressions, 'arr').initializer)).toBeTruthy();
+    expect(evaluator.isFoldable(findVarInitializer(expressions, 'obj'))).toBeTruthy();
+    expect(evaluator.isFoldable(findVarInitializer(expressions, 'arr'))).toBeTruthy();
   });
 
   it('should be able to evaluate literal expressions', () => {
     const consts = program.getSourceFile('consts.ts');
-    expect(evaluator.evaluateNode(findVar(consts, 'someName').initializer)).toBe('some-name');
-    expect(evaluator.evaluateNode(findVar(consts, 'someBool').initializer)).toBe(true);
-    expect(evaluator.evaluateNode(findVar(consts, 'one').initializer)).toBe(1);
-    expect(evaluator.evaluateNode(findVar(consts, 'two').initializer)).toBe(2);
+    expect(evaluator.evaluateNode(findVarInitializer(consts, 'someName'))).toBe('some-name');
+    expect(evaluator.evaluateNode(findVarInitializer(consts, 'someBool'))).toBe(true);
+    expect(evaluator.evaluateNode(findVarInitializer(consts, 'one'))).toBe(1);
+    expect(evaluator.evaluateNode(findVarInitializer(consts, 'two'))).toBe(2);
   });
 
   it('should be able to evaluate expressions', () => {
@@ -82,78 +82,77 @@ describe('Evaluator', () => {
     symbols.define('someBool', true);
     symbols.define('one', 1);
     symbols.define('two', 2);
-    expect(evaluator.evaluateNode(findVar(expressions, 'three').initializer)).toBe(3);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'three'))).toBe(3);
     symbols.define('three', 3);
-    expect(evaluator.evaluateNode(findVar(expressions, 'four').initializer)).toBe(4);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'four'))).toBe(4);
     symbols.define('four', 4);
-    expect(evaluator.evaluateNode(findVar(expressions, 'obj').initializer))
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'obj')))
         .toEqual({one: 1, two: 2, three: 3, four: 4});
-    expect(evaluator.evaluateNode(findVar(expressions, 'arr').initializer)).toEqual([1, 2, 3, 4]);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bTrue').initializer)).toEqual(true);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bFalse').initializer)).toEqual(false);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bAnd').initializer)).toEqual(true);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bOr').initializer)).toEqual(true);
-    expect(evaluator.evaluateNode(findVar(expressions, 'nDiv').initializer)).toEqual(2);
-    expect(evaluator.evaluateNode(findVar(expressions, 'nMod').initializer)).toEqual(1);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'arr'))).toEqual([1, 2, 3, 4]);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bTrue'))).toEqual(true);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bFalse'))).toEqual(false);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bAnd'))).toEqual(true);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bOr'))).toEqual(true);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'nDiv'))).toEqual(2);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'nMod'))).toEqual(1);
 
 
-    expect(evaluator.evaluateNode(findVar(expressions, 'bLOr').initializer)).toEqual(false || true);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bLAnd').initializer)).toEqual(true && true);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bBOr').initializer)).toEqual(0x11 | 0x22);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bBAnd').initializer)).toEqual(0x11 & 0x03);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bXor').initializer)).toEqual(0x11 ^ 0x21);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bEqual').initializer))
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bLOr'))).toEqual(false || true);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bLAnd'))).toEqual(true && true);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bBOr'))).toEqual(0x11 | 0x22);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bBAnd'))).toEqual(0x11 & 0x03);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bXor'))).toEqual(0x11 ^ 0x21);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bEqual')))
         .toEqual(1 == <any>'1');
-    expect(evaluator.evaluateNode(findVar(expressions, 'bNotEqual').initializer))
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bNotEqual')))
         .toEqual(1 != <any>'1');
-    expect(evaluator.evaluateNode(findVar(expressions, 'bIdentical').initializer))
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bIdentical')))
         .toEqual(1 === <any>'1');
-    expect(evaluator.evaluateNode(findVar(expressions, 'bNotIdentical').initializer))
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bNotIdentical')))
         .toEqual(1 !== <any>'1');
-    expect(evaluator.evaluateNode(findVar(expressions, 'bLessThan').initializer)).toEqual(1 < 2);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bGreaterThan').initializer)).toEqual(1 > 2);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bLessThanEqual').initializer))
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bLessThan'))).toEqual(1 < 2);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bGreaterThan'))).toEqual(1 > 2);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bLessThanEqual')))
         .toEqual(1 <= 2);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bGreaterThanEqual').initializer))
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bGreaterThanEqual')))
         .toEqual(1 >= 2);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bShiftLeft').initializer)).toEqual(1 << 2);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bShiftRight').initializer))
-        .toEqual(-1 >> 2);
-    expect(evaluator.evaluateNode(findVar(expressions, 'bShiftRightU').initializer))
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bShiftLeft'))).toEqual(1 << 2);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bShiftRight'))).toEqual(-1 >> 2);
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'bShiftRightU')))
         .toEqual(-1 >>> 2);
 
   });
 
   it('should report recursive references as symbolic', () => {
     const expressions = program.getSourceFile('expressions.ts');
-    expect(evaluator.evaluateNode(findVar(expressions, 'recursiveA').initializer))
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'recursiveA')))
         .toEqual({__symbolic: 'reference', name: 'recursiveB'});
-    expect(evaluator.evaluateNode(findVar(expressions, 'recursiveB').initializer))
+    expect(evaluator.evaluateNode(findVarInitializer(expressions, 'recursiveB')))
         .toEqual({__symbolic: 'reference', name: 'recursiveA'});
   });
 
   it('should correctly handle special cases for CONST_EXPR', () => {
     const const_expr = program.getSourceFile('const_expr.ts');
-    expect(evaluator.evaluateNode(findVar(const_expr, 'bTrue').initializer)).toEqual(true);
-    expect(evaluator.evaluateNode(findVar(const_expr, 'bFalse').initializer)).toEqual(false);
+    expect(evaluator.evaluateNode(findVarInitializer(const_expr, 'bTrue'))).toEqual(true);
+    expect(evaluator.evaluateNode(findVarInitializer(const_expr, 'bFalse'))).toEqual(false);
   });
 
   it('should resolve a forwardRef', () => {
     const forwardRef = program.getSourceFile('forwardRef.ts');
-    expect(evaluator.evaluateNode(findVar(forwardRef, 'bTrue').initializer)).toEqual(true);
-    expect(evaluator.evaluateNode(findVar(forwardRef, 'bFalse').initializer)).toEqual(false);
+    expect(evaluator.evaluateNode(findVarInitializer(forwardRef, 'bTrue'))).toEqual(true);
+    expect(evaluator.evaluateNode(findVarInitializer(forwardRef, 'bFalse'))).toEqual(false);
   });
 
   it('should return new expressions', () => {
     symbols.define('Value', {__symbolic: 'reference', module: './classes', name: 'Value'});
     evaluator = new Evaluator(symbols, new Map());
     const newExpression = program.getSourceFile('newExpression.ts');
-    expect(evaluator.evaluateNode(findVar(newExpression, 'someValue').initializer)).toEqual({
+    expect(evaluator.evaluateNode(findVarInitializer(newExpression, 'someValue'))).toEqual({
       __symbolic: 'new',
       expression: {__symbolic: 'reference', name: 'Value', module: './classes'},
       arguments: ['name', 12]
     });
-    expect(evaluator.evaluateNode(findVar(newExpression, 'complex').initializer)).toEqual({
+    expect(evaluator.evaluateNode(findVarInitializer(newExpression, 'complex'))).toEqual({
       __symbolic: 'new',
       expression: {__symbolic: 'reference', name: 'Value', module: './classes'},
       arguments: ['name', 12]
@@ -162,8 +161,8 @@ describe('Evaluator', () => {
 
   it('should support referene to a declared module type', () => {
     const declared = program.getSourceFile('declared.ts');
-    const aDecl = findVar(declared, 'a');
-    expect(evaluator.evaluateNode(aDecl.type)).toEqual({
+    const aDecl = findVar(declared, 'a') !;
+    expect(evaluator.evaluateNode(aDecl.type !)).toEqual({
       __symbolic: 'select',
       expression: {__symbolic: 'reference', name: 'Foo'},
       member: 'A'
@@ -172,28 +171,28 @@ describe('Evaluator', () => {
 
   it('should return errors for unsupported expressions', () => {
     const errors = program.getSourceFile('errors.ts');
-    const fDecl = findVar(errors, 'f');
-    expect(evaluator.evaluateNode(fDecl.initializer))
+    const fDecl = findVar(errors, 'f') !;
+    expect(evaluator.evaluateNode(fDecl.initializer !))
         .toEqual(
             {__symbolic: 'error', message: 'Function call not supported', line: 1, character: 12});
-    const eDecl = findVar(errors, 'e');
-    expect(evaluator.evaluateNode(eDecl.type)).toEqual({
+    const eDecl = findVar(errors, 'e') !;
+    expect(evaluator.evaluateNode(eDecl.type !)).toEqual({
       __symbolic: 'error',
       message: 'Could not resolve type',
       line: 2,
       character: 11,
       context: {typeName: 'NotFound'}
     });
-    const sDecl = findVar(errors, 's');
-    expect(evaluator.evaluateNode(sDecl.initializer)).toEqual({
+    const sDecl = findVar(errors, 's') !;
+    expect(evaluator.evaluateNode(sDecl.initializer !)).toEqual({
       __symbolic: 'error',
       message: 'Name expected',
       line: 3,
       character: 14,
       context: {received: '1'}
     });
-    const tDecl = findVar(errors, 't');
-    expect(evaluator.evaluateNode(tDecl.initializer)).toEqual({
+    const tDecl = findVar(errors, 't') !;
+    expect(evaluator.evaluateNode(tDecl.initializer !)).toEqual({
       __symbolic: 'error',
       message: 'Expression form not supported',
       line: 4,
@@ -204,19 +203,32 @@ describe('Evaluator', () => {
   it('should be able to fold an array spread', () => {
     const expressions = program.getSourceFile('expressions.ts');
     symbols.define('arr', [1, 2, 3, 4]);
-    const arrSpread = findVar(expressions, 'arrSpread');
-    expect(evaluator.evaluateNode(arrSpread.initializer)).toEqual([0, 1, 2, 3, 4, 5]);
+    const arrSpread = findVar(expressions, 'arrSpread') !;
+    expect(evaluator.evaluateNode(arrSpread.initializer !)).toEqual([0, 1, 2, 3, 4, 5]);
   });
 
   it('should be able to produce a spread expression', () => {
     const expressions = program.getSourceFile('expressions.ts');
-    const arrSpreadRef = findVar(expressions, 'arrSpreadRef');
-    expect(evaluator.evaluateNode(arrSpreadRef.initializer)).toEqual([
+    const arrSpreadRef = findVar(expressions, 'arrSpreadRef') !;
+    expect(evaluator.evaluateNode(arrSpreadRef.initializer !)).toEqual([
       0, {__symbolic: 'spread', expression: {__symbolic: 'reference', name: 'arrImport'}}, 5
     ]);
   });
+
+  it('should be able to handle a new expression with no arguments', () => {
+    const source = sourceFileOf(`
+      export var a = new f;
+    `);
+    const expr = findVar(source, 'a') !;
+    expect(evaluator.evaluateNode(expr.initializer !))
+        .toEqual({__symbolic: 'new', expression: {__symbolic: 'reference', name: 'f'}});
+  });
 });
 
+function sourceFileOf(text: string): ts.SourceFile {
+  return ts.createSourceFile('test.ts', text, ts.ScriptTarget.Latest, true);
+}
+
 const FILES: Directory = {
   'directives.ts': `
     export function Pipe(options: { name?: string, pure?: boolean}) {
diff --git a/tools/@angular/tsc-wrapped/test/index_writer_spec.ts b/packages/tsc-wrapped/test/index_writer_spec.ts
similarity index 100%
rename from tools/@angular/tsc-wrapped/test/index_writer_spec.ts
rename to packages/tsc-wrapped/test/index_writer_spec.ts
diff --git a/tools/@angular/tsc-wrapped/test/main.spec.ts b/packages/tsc-wrapped/test/main.spec.ts
similarity index 87%
rename from tools/@angular/tsc-wrapped/test/main.spec.ts
rename to packages/tsc-wrapped/test/main.spec.ts
index a5419de29f..8cfa7c2ab3 100644
--- a/tools/@angular/tsc-wrapped/test/main.spec.ts
+++ b/packages/tsc-wrapped/test/main.spec.ts
@@ -327,7 +327,7 @@ describe('tsc-wrapped', () => {
     main(basePath, {basePath})
         .then(() => {
           const out = readOut('js.map');
-          expect(out).toContain('"sources":["other_test.ts"]');
+          expect(out).toContain('"sources":["other_test.ts","../test.ts"]');
           done();
         })
         .catch(e => done.fail(e));
@@ -361,9 +361,62 @@ describe('tsc-wrapped', () => {
     main(basePath, {basePath})
         .then(() => {
           const out = readOut('js.map');
-          expect(out).toContain('"sources":["other_test.ts"]');
+          expect(out).toContain('"sources":["other_test.ts","../test.ts"]');
           done();
         })
         .catch(e => done.fail(e));
   });
+
+  it('should expand shorthand imports for ES2015 modules', (done) => {
+    write('tsconfig.json', `{
+      "compilerOptions": {
+        "experimentalDecorators": true,
+        "types": [],
+        "outDir": "built",
+        "declaration": true,
+        "moduleResolution": "node",
+        "target": "es2015",
+        "module": "es2015"
+      },
+      "angularCompilerOptions": {
+        "annotateForClosureCompiler": true
+      },
+      "files": ["test.ts"]
+    }`);
+
+    main(basePath, {basePath})
+        .then(() => {
+          const fileOutput = readOut('js');
+          expect(fileOutput).toContain(`export { A, B } from './dep/index'`);
+          done();
+        })
+        .catch(e => done.fail(e));
+  });
+
+  it('should expand shorthand imports for ES5 CommonJS modules', (done) => {
+    write('tsconfig.json', `{
+      "compilerOptions": {
+        "experimentalDecorators": true,
+        "types": [],
+        "outDir": "built",
+        "declaration": true,
+        "moduleResolution": "node",
+        "target": "es5",
+        "module": "commonjs"
+      },
+      "angularCompilerOptions": {
+        "annotateForClosureCompiler": true
+      },
+      "files": ["test.ts"]
+    }`);
+
+    main(basePath, {basePath})
+        .then(() => {
+          const fileOutput = readOut('js');
+          expect(fileOutput).toContain(`var index_1 = require("./dep/index");`);
+          done();
+        })
+        .catch(e => done.fail(e));
+  });
+
 });
diff --git a/tools/@angular/tsc-wrapped/test/symbols.spec.ts b/packages/tsc-wrapped/test/symbols.spec.ts
similarity index 97%
rename from tools/@angular/tsc-wrapped/test/symbols.spec.ts
rename to packages/tsc-wrapped/test/symbols.spec.ts
index 5f2dc5b9fc..9b911ab4f2 100644
--- a/tools/@angular/tsc-wrapped/test/symbols.spec.ts
+++ b/packages/tsc-wrapped/test/symbols.spec.ts
@@ -17,7 +17,7 @@ describe('Symbols', () => {
   let symbols: Symbols;
   const someValue = 'some-value';
 
-  beforeEach(() => symbols = new Symbols(null));
+  beforeEach(() => symbols = new Symbols(null as any as ts.SourceFile));
 
   it('should be able to add a symbol', () => symbols.define('someSymbol', someValue));
 
@@ -110,7 +110,7 @@ describe('Symbols', () => {
       }
       return false;
     };
-    ts.forEachChild(core, visit);
+    ts.forEachChild(core !, visit);
   });
 });
 
diff --git a/tools/@angular/tsc-wrapped/test/test_support.ts b/packages/tsc-wrapped/test/test_support.ts
similarity index 100%
rename from tools/@angular/tsc-wrapped/test/test_support.ts
rename to packages/tsc-wrapped/test/test_support.ts
diff --git a/tools/@angular/tsc-wrapped/test/tsc.spec.ts b/packages/tsc-wrapped/test/tsc.spec.ts
similarity index 100%
rename from tools/@angular/tsc-wrapped/test/tsc.spec.ts
rename to packages/tsc-wrapped/test/tsc.spec.ts
diff --git a/tools/@angular/tsc-wrapped/test/typescript.mocks.ts b/packages/tsc-wrapped/test/typescript.mocks.ts
similarity index 86%
rename from tools/@angular/tsc-wrapped/test/typescript.mocks.ts
rename to packages/tsc-wrapped/test/typescript.mocks.ts
index c270cc0f8c..fbd35bdd5f 100644
--- a/tools/@angular/tsc-wrapped/test/typescript.mocks.ts
+++ b/packages/tsc-wrapped/test/typescript.mocks.ts
@@ -1,5 +1,4 @@
 import * as fs from 'fs';
-import * as path from 'path';
 import * as ts from 'typescript';
 
 export interface Directory { [name: string]: (Directory|string); }
@@ -22,7 +21,7 @@ export class Host implements ts.LanguageServiceHost {
 
   getScriptVersion(fileName: string): string { return this.version.toString(); }
 
-  getScriptSnapshot(fileName: string): ts.IScriptSnapshot {
+  getScriptSnapshot(fileName: string): ts.IScriptSnapshot|undefined {
     const content = this.getFileContent(fileName);
     if (content) return ts.ScriptSnapshot.fromString(content);
   }
@@ -41,7 +40,7 @@ export class Host implements ts.LanguageServiceHost {
     this.version++;
   }
 
-  private getFileContent(fileName: string): string {
+  private getFileContent(fileName: string): string|undefined {
     if (this.overrides.has(fileName)) {
       return this.overrides.get(fileName);
     }
@@ -70,9 +69,9 @@ export class MockNode implements ts.Node {
   constructor(
       public kind: ts.SyntaxKind = ts.SyntaxKind.Identifier, public flags: ts.NodeFlags = 0,
       public pos: number = 0, public end: number = 0) {}
-  getSourceFile(): ts.SourceFile { return null; }
+  getSourceFile(): ts.SourceFile { return null as any as ts.SourceFile; }
   getChildCount(sourceFile?: ts.SourceFile): number { return 0 }
-  getChildAt(index: number, sourceFile?: ts.SourceFile): ts.Node { return null; }
+  getChildAt(index: number, sourceFile?: ts.SourceFile): ts.Node { return null as any as ts.Node; }
   getChildren(sourceFile?: ts.SourceFile): ts.Node[] { return []; }
   getStart(sourceFile?: ts.SourceFile): number { return 0; }
   getFullStart(): number { return 0; }
@@ -82,8 +81,11 @@ export class MockNode implements ts.Node {
   getLeadingTriviaWidth(sourceFile?: ts.SourceFile): number { return 0; }
   getFullText(sourceFile?: ts.SourceFile): string { return ''; }
   getText(sourceFile?: ts.SourceFile): string { return ''; }
-  getFirstToken(sourceFile?: ts.SourceFile): ts.Node { return null; }
-  getLastToken(sourceFile?: ts.SourceFile): ts.Node { return null; }
+  getFirstToken(sourceFile?: ts.SourceFile): ts.Node { return null as any as ts.Node; }
+  getLastToken(sourceFile?: ts.SourceFile): ts.Node { return null as any as ts.Node; }
+  forEachChild<T>(cbNode: (node: ts.Node) => T, cbNodeArray?: (nodes: ts.Node[]) => T): T {
+    return null as any as T;
+  }
 }
 
 export class MockIdentifier extends MockNode implements ts.Identifier {
@@ -127,7 +129,8 @@ export class MockSymbol implements ts.Symbol {
   getName(): string { return this.name; }
   getDeclarations(): ts.Declaration[] { return [this.node]; }
   getDocumentationComment(): ts.SymbolDisplayPart[] { return []; }
-  getJsDocTags(): ts.JSDocTagInfo[]{return []};
+  // TODO(vicb): removed in TS 2.2
+  getJsDocTags(): any[]{return []};
 
   static of (name: string): MockSymbol { return new MockSymbol(name); }
 }
@@ -159,22 +162,28 @@ export function allChildren<T>(node: ts.Node, cb: (node: ts.Node) => T): T {
   })
 }
 
-export function findClass(sourceFile: ts.SourceFile, name: string): ts.ClassDeclaration {
+export function findClass(sourceFile: ts.SourceFile, name: string): ts.ClassDeclaration|undefined {
   return ts.forEachChild(
       sourceFile, node => isClass(node) && isNamed(node.name, name) ? node : undefined);
 }
 
-export function findVar(sourceFile: ts.SourceFile, name: string): ts.VariableDeclaration {
+export function findVar(sourceFile: ts.SourceFile, name: string): ts.VariableDeclaration|undefined {
   return allChildren(
       sourceFile, node => isVar(node) && isNamed(node.name, name) ? node : undefined);
 }
 
+export function findVarInitializer(sourceFile: ts.SourceFile, name: string): ts.Expression {
+  const v = findVar(sourceFile, name);
+  expect(v && v.initializer).toBeDefined();
+  return v !.initializer !;
+}
+
 export function isClass(node: ts.Node): node is ts.ClassDeclaration {
   return node.kind === ts.SyntaxKind.ClassDeclaration;
 }
 
-export function isNamed(node: ts.Node, name: string): node is ts.Identifier {
-  return node.kind === ts.SyntaxKind.Identifier && (<ts.Identifier>node).text === name;
+export function isNamed(node: ts.Node | undefined, name: string): node is ts.Identifier {
+  return !!node && node.kind === ts.SyntaxKind.Identifier && (<ts.Identifier>node).text === name;
 }
 
 export function isVar(node: ts.Node): node is ts.VariableDeclaration {
diff --git a/packages/tsc-wrapped/tsconfig-build.json b/packages/tsc-wrapped/tsconfig-build.json
new file mode 100644
index 0000000000..6e660bde76
--- /dev/null
+++ b/packages/tsc-wrapped/tsconfig-build.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/packages-dist/tsc-wrapped",
+    "types": [
+      "node",
+      "jasmine"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/packages/tsc-wrapped/tsconfig.json b/packages/tsc-wrapped/tsconfig.json
new file mode 100644
index 0000000000..89b5d454cf
--- /dev/null
+++ b/packages/tsc-wrapped/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../../dist/all/@angular/tsc-wrapped",
+    "strictNullChecks": true,
+    "noImplicitAny": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+    },
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "lib": ["es6", "dom"],
+    "target": "es5",
+    "skipLibCheck": true
+  }
+}
diff --git a/packages/tsconfig.json b/packages/tsconfig.json
index 6020735526..10ec247ee0 100644
--- a/packages/tsconfig.json
+++ b/packages/tsconfig.json
@@ -6,7 +6,7 @@
     "emitDecoratorMetadata": true,
     "module": "commonjs",
     "moduleResolution": "node",
-    "strictNullChecks": false,
+    "strictNullChecks": true,
     "outDir": "../dist/all/@angular",
     "noImplicitAny": true,
     "noFallthroughCasesInSwitch": true,
@@ -14,8 +14,6 @@
       "selenium-webdriver": ["../node_modules/@types/selenium-webdriver/index.d.ts"],
       "rxjs/*": ["../node_modules/rxjs/*"],
       "@angular/*": ["./*"],
-      "@angular/tsc-wrapped": ["../dist/tools/@angular/tsc-wrapped"],
-      "@angular/tsc-wrapped/*": ["../dist/tools/@angular/tsc-wrapped/*"],
       "e2e_util/*": ["../modules/e2e_util/*"]
     },
     "rootDir": ".",
@@ -28,6 +26,7 @@
   },
   "exclude": [
     "compiler-cli/integrationtest",
-    "platform-server/integrationtest"
+    "platform-server/integrationtest",
+    "tsc-wrapped"
   ]
 }
diff --git a/packages/upgrade/package.json b/packages/upgrade/package.json
index e468c41e0d..25a6c63499 100644
--- a/packages/upgrade/package.json
+++ b/packages/upgrade/package.json
@@ -8,6 +8,9 @@
   "typings": "./upgrade.d.ts",
   "author": "angular",
   "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1"
+  },
   "peerDependencies": {
     "@angular/core": "0.0.0-PLACEHOLDER",
     "@angular/compiler": "0.0.0-PLACEHOLDER",
diff --git a/packages/upgrade/rollup.config.js b/packages/upgrade/rollup.config.js
index 5d6ac0f0dc..9c4d5773b9 100644
--- a/packages/upgrade/rollup.config.js
+++ b/packages/upgrade/rollup.config.js
@@ -6,22 +6,28 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/compiler': 'ng.compiler',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
+  'rxjs/Subject': 'Rx',
+  'rxjs/observable/PromiseObservable': 'Rx',  // this is wrong, but this stuff has changed in rxjs
+                                              // b.6 so we need to fix it when we update.
+  'rxjs/operator/toPromise': 'Rx.Observable.prototype',
+  'rxjs/Observable': 'Rx',
+};
+
 export default {
   entry: '../../dist/packages-dist/upgrade/@angular/upgrade.es5.js',
   dest: '../../dist/packages-dist/upgrade/bundles/upgrade.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.upgrade',
-  globals: {
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/compiler': 'ng.compiler',
-    '@angular/platform-browser': 'ng.platformBrowser',
-    '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
-    'rxjs/Subject': 'Rx',
-    'rxjs/observable/PromiseObservable': 'Rx',  // this is wrong, but this stuff has changed in rxjs
-                                                // b.6 so we need to fix it when we update.
-    'rxjs/operator/toPromise': 'Rx.Observable.prototype',
-    'rxjs/Observable': 'Rx',
-  }
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/upgrade/src/common/angular1.ts b/packages/upgrade/src/common/angular1.ts
index 267e8dbac8..76a7864209 100644
--- a/packages/upgrade/src/common/angular1.ts
+++ b/packages/upgrade/src/common/angular1.ts
@@ -33,6 +33,7 @@ export interface ICompileService {
 }
 export interface ILinkFn {
   (scope: IScope, cloneAttachFn?: ICloneAttachFunction, options?: ILinkFnOptions): IAugmentedJQuery;
+  $$slots?: {[slotName: string]: ILinkFn};
 }
 export interface ILinkFnOptions {
   parentBoundTranscludeFn?: Function;
@@ -49,7 +50,7 @@ export interface IRootScopeService {
   $destroy(): any;
   $apply(exp?: Ng1Expression): any;
   $digest(): any;
-  $evalAsync(): any;
+  $evalAsync(exp: Ng1Expression, locals?: any): void;
   $on(event: string, fn?: (event?: any, ...args: any[]) => void): Function;
   $$childTail: IScope;
   $$childHead: IScope;
@@ -75,9 +76,10 @@ export interface IDirective {
   templateUrl?: string|Function;
   templateNamespace?: string;
   terminal?: boolean;
-  transclude?: boolean|'element'|{[key: string]: string};
+  transclude?: DirectiveTranscludeProperty;
 }
 export type DirectiveRequireProperty = SingleOrListOrMap<string>;
+export type DirectiveTranscludeProperty = boolean | 'element' | {[key: string]: string};
 export interface IDirectiveCompileFn {
   (templateElement: IAugmentedJQuery, templateAttributes: IAttributes,
    transclude: ITranscludeFunction): IDirectivePrePost;
@@ -97,9 +99,12 @@ export interface IComponent {
   require?: DirectiveRequireProperty;
   template?: string|Function;
   templateUrl?: string|Function;
-  transclude?: boolean;
+  transclude?: DirectiveTranscludeProperty;
+}
+export interface IAttributes {
+  $observe(attr: string, fn: (v: string) => void): void;
+  [key: string]: any;
 }
-export interface IAttributes { $observe(attr: string, fn: (v: string) => void): void; }
 export interface ITranscludeFunction {
   // If the scope is provided, then the cloneAttachFn must be as well.
   (scope: IScope, cloneAttachFn: ICloneAttachFunction): IAugmentedJQuery;
@@ -111,7 +116,7 @@ export interface ICloneAttachFunction {
   (clonedElement?: IAugmentedJQuery, scope?: IScope): any;
 }
 export type IAugmentedJQuery = Node[] & {
-  bind?: (name: string, fn: () => void) => void;
+  on?: (name: string, fn: () => void) => void;
   data?: (name: string, value?: any) => any;
   text?: () => string;
   inheritedData?: (name: string, value?: any) => any;
@@ -133,7 +138,10 @@ export interface IProvideService {
   decorator(token: Ng1Token, factory: IInjectable): void;
 }
 export interface IParseService { (expression: string): ICompiledExpression; }
-export interface ICompiledExpression { assign(context: any, value: any): any; }
+export interface ICompiledExpression {
+  (context: any, locals: any): any;
+  assign?: (context: any, value: any) => any;
+}
 export interface IHttpBackendService {
   (method: string, url: string, post?: any, callback?: Function, headers?: any, timeout?: number,
    withCredentials?: boolean): void;
@@ -158,6 +166,12 @@ export interface IInjectorService {
   has(key: string): boolean;
 }
 
+export interface IIntervalService {
+  (func: Function, delay: number, count?: number, invokeApply?: boolean,
+   ...args: any[]): Promise<any>;
+  cancel(promise: Promise<any>): boolean;
+}
+
 export interface ITestabilityService {
   findBindings(element: Element, expression: string, opt_exactMatch?: boolean): Element[];
   findModels(element: Element, expression: string, opt_exactMatch?: boolean): Element[];
@@ -201,12 +215,14 @@ function noNg() {
   throw new Error('AngularJS v1.x is not loaded!');
 }
 
+
 let angular: {
-  bootstrap: (e: Element, modules: (string | IInjectable)[], config: IAngularBootstrapConfig) =>
-                 void,
+  bootstrap: (e: Element, modules: (string | IInjectable)[], config?: IAngularBootstrapConfig) =>
+                 IInjectorService,
   module: (prefix: string, dependencies?: string[]) => IModule,
   element: (e: Element | string) => IAugmentedJQuery,
-  version: {major: number}, resumeBootstrap?: () => void,
+  version: {major: number},
+  resumeBootstrap: () => void,
   getTestability: (e: Element) => ITestabilityService
 } = <any>{
   bootstrap: noNg,
@@ -217,7 +233,6 @@ let angular: {
   getTestability: noNg
 };
 
-
 try {
   if (window.hasOwnProperty('angular')) {
     angular = (<any>window).angular;
@@ -226,9 +241,37 @@ try {
   // ignore in CJS mode.
 }
 
-export const bootstrap = angular.bootstrap;
-export const module = angular.module;
-export const element = angular.element;
+/**
+ * Resets the AngularJS library.
+ *
+ * Used when angularjs is loaded lazily, and not available on `window`.
+ *
+ * @stable
+ */
+export function setAngularLib(ng: any): void {
+  angular = ng;
+}
+
+/**
+ * Returns the current version of the AngularJS library.
+ *
+ * @stable
+ */
+export function getAngularLib(): any {
+  return angular;
+}
+
+export const bootstrap =
+    (e: Element, modules: (string | IInjectable)[], config?: IAngularBootstrapConfig) =>
+        angular.bootstrap(e, modules, config);
+
+export const module = (prefix: string, dependencies?: string[]) =>
+    angular.module(prefix, dependencies);
+
+export const element = (e: Element | string) => angular.element(e);
+
+export const resumeBootstrap = () => angular.resumeBootstrap();
+
+export const getTestability = (e: Element) => angular.getTestability(e);
+
 export const version = angular.version;
-export const resumeBootstrap = angular.resumeBootstrap;
-export const getTestability = angular.getTestability;
diff --git a/packages/upgrade/src/common/constants.ts b/packages/upgrade/src/common/constants.ts
index 87e60f3a19..207d3867be 100644
--- a/packages/upgrade/src/common/constants.ts
+++ b/packages/upgrade/src/common/constants.ts
@@ -11,6 +11,7 @@ export const $CONTROLLER = '$controller';
 export const $DELEGATE = '$delegate';
 export const $HTTP_BACKEND = '$httpBackend';
 export const $INJECTOR = '$injector';
+export const $INTERVAL = '$interval';
 export const $PARSE = '$parse';
 export const $PROVIDE = '$provide';
 export const $ROOT_SCOPE = '$rootScope';
@@ -23,6 +24,7 @@ export const $$TESTABILITY = '$$testability';
 export const COMPILER_KEY = '$$angularCompiler';
 export const GROUP_PROJECTABLE_NODES_KEY = '$$angularGroupProjectableNodes';
 export const INJECTOR_KEY = '$$angularInjector';
+export const LAZY_MODULE_REF = '$$angularLazyModuleRef';
 export const NG_ZONE_KEY = '$$angularNgZone';
 
 export const REQUIRE_INJECTOR = '?^^' + INJECTOR_KEY;
diff --git a/packages/upgrade/src/common/downgrade_component.ts b/packages/upgrade/src/common/downgrade_component.ts
index 4becae7b03..65357f1fe6 100644
--- a/packages/upgrade/src/common/downgrade_component.ts
+++ b/packages/upgrade/src/common/downgrade_component.ts
@@ -6,19 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentFactory, ComponentFactoryResolver, Injector, Type} from '@angular/core';
+import {ComponentFactory, ComponentFactoryResolver, Injector, NgZone, Type} from '@angular/core';
 
 import * as angular from './angular1';
-import {$COMPILE, $INJECTOR, $PARSE, INJECTOR_KEY, REQUIRE_INJECTOR, REQUIRE_NG_MODEL} from './constants';
+import {$COMPILE, $INJECTOR, $PARSE, INJECTOR_KEY, LAZY_MODULE_REF, REQUIRE_INJECTOR, REQUIRE_NG_MODEL} from './constants';
 import {DowngradeComponentAdapter} from './downgrade_component_adapter';
-import {controllerKey, getComponentName} from './util';
+import {LazyModuleRef, controllerKey, getComponentName, isFunction} from './util';
+
+
+interface Thenable<T> {
+  then(callback: (value: T) => any): any;
+}
 
 let downgradeCount = 0;
 
 /**
  * @whatItDoes
  *
- * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic)
+ * *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
  * library for hybrid upgrade apps that support AoT compilation*
  *
  * Allows an Angular component to be used from AngularJS.
@@ -50,6 +55,8 @@ let downgradeCount = 0;
  */
 export function downgradeComponent(info: {
   component: Type<any>;
+  /** @experimental */
+  propagateDigest?: boolean;
   /** @deprecated since v4. This parameter is no longer used */
   inputs?: string[];
   /** @deprecated since v4. This parameter is no longer used */
@@ -65,6 +72,14 @@ export function downgradeComponent(info: {
                                        $compile: angular.ICompileService,
                                        $injector: angular.IInjectorService,
                                        $parse: angular.IParseService): angular.IDirective {
+    // When using `UpgradeModule`, we don't need to ensure callbacks to Angular APIs (e.g. change
+    // detection) are run inside the Angular zone, because `$digest()` will be run inside the zone
+    // (except if explicitly escaped, in which case we shouldn't force it back in).
+    // When using `downgradeModule()` though, we need to ensure such callbacks are run inside the
+    // Angular zone.
+    let needsNgZone = false;
+    let wrapCallback = <T>(cb: () => T) => cb;
+    let ngZone: NgZone;
 
     return {
       restrict: 'E',
@@ -76,15 +91,21 @@ export function downgradeComponent(info: {
         // triggered by `UpgradeNg1ComponentAdapterBuilder`, before the Angular templates have
         // been compiled.
 
-        const parentInjector: Injector|ParentInjectorPromise =
-            required[0] || $injector.get(INJECTOR_KEY);
         const ngModel: angular.INgModelController = required[1];
+        let parentInjector: Injector|Thenable<Injector>|undefined = required[0];
+        let ranAsync = false;
 
-        const downgradeFn = (injector: Injector) => {
+        if (!parentInjector) {
+          const lazyModuleRef = $injector.get(LAZY_MODULE_REF) as LazyModuleRef;
+          needsNgZone = lazyModuleRef.needsNgZone;
+          parentInjector = lazyModuleRef.injector || lazyModuleRef.promise as Promise<Injector>;
+        }
+
+        const doDowngrade = (injector: Injector) => {
           const componentFactoryResolver: ComponentFactoryResolver =
               injector.get(ComponentFactoryResolver);
           const componentFactory: ComponentFactory<any> =
-              componentFactoryResolver.resolveComponentFactory(info.component);
+              componentFactoryResolver.resolveComponentFactory(info.component) !;
 
           if (!componentFactory) {
             throw new Error('Expecting ComponentFactory for: ' + getComponentName(info.component));
@@ -94,22 +115,40 @@ export function downgradeComponent(info: {
           const injectorPromise = new ParentInjectorPromise(element);
           const facade = new DowngradeComponentAdapter(
               id, element, attrs, scope, ngModel, injector, $injector, $compile, $parse,
-              componentFactory);
+              componentFactory, wrapCallback);
 
           const projectableNodes = facade.compileContents();
           facade.createComponent(projectableNodes);
-          facade.setupInputs();
+          facade.setupInputs(needsNgZone, info.propagateDigest);
           facade.setupOutputs();
-          facade.registerCleanup();
+          facade.registerCleanup(needsNgZone);
 
           injectorPromise.resolve(facade.getInjector());
+
+          if (ranAsync) {
+            // If this is run async, it is possible that it is not run inside a
+            // digest and initial input values will not be detected.
+            scope.$evalAsync(() => {});
+          }
         };
 
-        if (parentInjector instanceof ParentInjectorPromise) {
+        const downgradeFn = !needsNgZone ? doDowngrade : (injector: Injector) => {
+          if (!ngZone) {
+            ngZone = injector.get(NgZone);
+            wrapCallback = <T>(cb: () => T) => () =>
+                NgZone.isInAngularZone() ? cb() : ngZone.run(cb);
+          }
+
+          wrapCallback(() => doDowngrade(injector))();
+        };
+
+        if (isThenable<Injector>(parentInjector)) {
           parentInjector.then(downgradeFn);
         } else {
           downgradeFn(parentInjector);
         }
+
+        ranAsync = true;
       }
     };
   };
@@ -130,7 +169,7 @@ class ParentInjectorPromise {
 
   constructor(private element: angular.IAugmentedJQuery) {
     // Store the promise on the element.
-    element.data(this.injectorKey, this);
+    element.data !(this.injectorKey, this);
   }
 
   then(callback: (injector: Injector) => any) {
@@ -145,13 +184,17 @@ class ParentInjectorPromise {
     this.injector = injector;
 
     // Store the real injector on the element.
-    this.element.data(this.injectorKey, injector);
+    this.element.data !(this.injectorKey, injector);
 
     // Release the element to prevent memory leaks.
-    this.element = null;
+    this.element = null !;
 
     // Run the queued callbacks.
     this.callbacks.forEach(callback => callback(injector));
     this.callbacks.length = 0;
   }
 }
+
+function isThenable<T>(obj: object): obj is Thenable<T> {
+  return isFunction((obj as any).then);
+}
diff --git a/packages/upgrade/src/common/downgrade_component_adapter.ts b/packages/upgrade/src/common/downgrade_component_adapter.ts
index 8af71d8a65..06ead26b3b 100644
--- a/packages/upgrade/src/common/downgrade_component_adapter.ts
+++ b/packages/upgrade/src/common/downgrade_component_adapter.ts
@@ -6,33 +6,37 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectorRef, ComponentFactory, ComponentRef, EventEmitter, Injector, OnChanges, ReflectiveInjector, SimpleChange, SimpleChanges, Type} from '@angular/core';
+import {ApplicationRef, ChangeDetectorRef, ComponentFactory, ComponentRef, EventEmitter, Injector, OnChanges, ReflectiveInjector, SimpleChange, SimpleChanges, Type} from '@angular/core';
 
 import * as angular from './angular1';
 import {PropertyBinding} from './component_info';
 import {$SCOPE} from './constants';
-import {getAttributesAsArray, getComponentName, hookupNgModel} from './util';
+import {getAttributesAsArray, getComponentName, hookupNgModel, strictEquals} from './util';
 
 const INITIAL_VALUE = {
   __UNINITIALIZED__: true
 };
 
 export class DowngradeComponentAdapter {
+  private implementsOnChanges = false;
   private inputChangeCount: number = 0;
-  private inputChanges: SimpleChanges = null;
+  private inputChanges: SimpleChanges = {};
   private componentScope: angular.IScope;
-  private componentRef: ComponentRef<any> = null;
-  private component: any = null;
-  private changeDetector: ChangeDetectorRef = null;
+  private componentRef: ComponentRef<any>;
+  private component: any;
+  private changeDetector: ChangeDetectorRef;
+  private appRef: ApplicationRef;
 
   constructor(
       private id: string, private element: angular.IAugmentedJQuery,
       private attrs: angular.IAttributes, private scope: angular.IScope,
       private ngModel: angular.INgModelController, private parentInjector: Injector,
       private $injector: angular.IInjectorService, private $compile: angular.ICompileService,
-      private $parse: angular.IParseService, private componentFactory: ComponentFactory<any>) {
+      private $parse: angular.IParseService, private componentFactory: ComponentFactory<any>,
+      private wrapCallback: <T>(cb: () => T) => () => T) {
     (this.element[0] as any).id = id;
     this.componentScope = scope.$new();
+    this.appRef = parentInjector.get(ApplicationRef);
   }
 
   compileContents(): Node[][] {
@@ -40,12 +44,12 @@ export class DowngradeComponentAdapter {
     const projectableNodes: Node[][] = this.groupProjectableNodes();
     const linkFns = projectableNodes.map(nodes => this.$compile(nodes));
 
-    this.element.empty();
+    this.element.empty !();
 
     linkFns.forEach(linkFn => {
       linkFn(this.scope, (clone: Node[]) => {
         compiledProjectableNodes.push(clone);
-        this.element.append(clone);
+        this.element.append !(clone);
       });
     });
 
@@ -64,35 +68,47 @@ export class DowngradeComponentAdapter {
     hookupNgModel(this.ngModel, this.component);
   }
 
-  setupInputs(): void {
+  setupInputs(needsNgZone: boolean, propagateDigest = true): void {
     const attrs = this.attrs;
     const inputs = this.componentFactory.inputs || [];
     for (let i = 0; i < inputs.length; i++) {
       const input = new PropertyBinding(inputs[i].propName, inputs[i].templateName);
-      let expr: any /** TODO #9100 */ = null;
+      let expr: string|null = null;
 
       if (attrs.hasOwnProperty(input.attr)) {
         const observeFn = (prop => {
           let prevValue = INITIAL_VALUE;
           return (currValue: any) => {
-            if (prevValue === INITIAL_VALUE) {
+            // Initially, both `$observe()` and `$watch()` will call this function.
+            if (!strictEquals(prevValue, currValue)) {
+              if (prevValue === INITIAL_VALUE) {
+                prevValue = currValue;
+              }
+
+              this.updateInput(prop, prevValue, currValue);
               prevValue = currValue;
             }
-
-            this.updateInput(prop, prevValue, currValue);
-            prevValue = currValue;
           };
         })(input.prop);
         attrs.$observe(input.attr, observeFn);
 
+        // Use `$watch()` (in addition to `$observe()`) in order to initialize the input  in time
+        // for `ngOnChanges()`. This is necessary if we are already in a `$digest`, which means that
+        // `ngOnChanges()` (which is called by a watcher) will run before the `$observe()` callback.
+        let unwatch: Function|null = this.componentScope.$watch(() => {
+          unwatch !();
+          unwatch = null;
+          observeFn(attrs[input.attr]);
+        });
+
       } else if (attrs.hasOwnProperty(input.bindAttr)) {
-        expr = (attrs as any /** TODO #9100 */)[input.bindAttr];
+        expr = attrs[input.bindAttr];
       } else if (attrs.hasOwnProperty(input.bracketAttr)) {
-        expr = (attrs as any /** TODO #9100 */)[input.bracketAttr];
+        expr = attrs[input.bracketAttr];
       } else if (attrs.hasOwnProperty(input.bindonAttr)) {
-        expr = (attrs as any /** TODO #9100 */)[input.bindonAttr];
+        expr = attrs[input.bindonAttr];
       } else if (attrs.hasOwnProperty(input.bracketParenAttr)) {
-        expr = (attrs as any /** TODO #9100 */)[input.bracketParenAttr];
+        expr = attrs[input.bracketParenAttr];
       }
       if (expr != null) {
         const watchFn =
@@ -102,17 +118,35 @@ export class DowngradeComponentAdapter {
       }
     }
 
+    // Invoke `ngOnChanges()` and Change Detection (when necessary)
+    const detectChanges = () => this.changeDetector.detectChanges();
     const prototype = this.componentFactory.componentType.prototype;
-    if (prototype && (<OnChanges>prototype).ngOnChanges) {
-      // Detect: OnChanges interface
-      this.inputChanges = {};
-      this.componentScope.$watch(() => this.inputChangeCount, () => {
+    this.implementsOnChanges = !!(prototype && (<OnChanges>prototype).ngOnChanges);
+
+    this.componentScope.$watch(() => this.inputChangeCount, this.wrapCallback(() => {
+      // Invoke `ngOnChanges()`
+      if (this.implementsOnChanges) {
         const inputChanges = this.inputChanges;
         this.inputChanges = {};
-        (<OnChanges>this.component).ngOnChanges(inputChanges);
-      });
+        (<OnChanges>this.component).ngOnChanges(inputChanges !);
+      }
+
+      // If opted out of propagating digests, invoke change detection
+      // when inputs change
+      if (!propagateDigest) {
+        detectChanges();
+      }
+    }));
+
+    // If not opted out of propagating digests, invoke change detection on every digest
+    if (propagateDigest) {
+      this.componentScope.$watch(this.wrapCallback(detectChanges));
+    }
+
+    // Attach the view so that it will be dirty-checked.
+    if (needsNgZone) {
+      this.appRef.attachView(this.componentRef.hostView);
     }
-    this.componentScope.$watch(() => this.changeDetector && this.changeDetector.detectChanges());
   }
 
   setupOutputs() {
@@ -120,24 +154,22 @@ export class DowngradeComponentAdapter {
     const outputs = this.componentFactory.outputs || [];
     for (let j = 0; j < outputs.length; j++) {
       const output = new PropertyBinding(outputs[j].propName, outputs[j].templateName);
-      let expr: any /** TODO #9100 */ = null;
+      let expr: string|null = null;
       let assignExpr = false;
 
-      const bindonAttr =
-          output.bindonAttr ? output.bindonAttr.substring(0, output.bindonAttr.length - 6) : null;
-      const bracketParenAttr = output.bracketParenAttr ?
-          `[(${output.bracketParenAttr.substring(2, output.bracketParenAttr.length - 8)})]` :
-          null;
+      const bindonAttr = output.bindonAttr.substring(0, output.bindonAttr.length - 6);
+      const bracketParenAttr =
+          `[(${output.bracketParenAttr.substring(2, output.bracketParenAttr.length - 8)})]`;
 
       if (attrs.hasOwnProperty(output.onAttr)) {
-        expr = (attrs as any /** TODO #9100 */)[output.onAttr];
+        expr = attrs[output.onAttr];
       } else if (attrs.hasOwnProperty(output.parenAttr)) {
-        expr = (attrs as any /** TODO #9100 */)[output.parenAttr];
+        expr = attrs[output.parenAttr];
       } else if (attrs.hasOwnProperty(bindonAttr)) {
-        expr = (attrs as any /** TODO #9100 */)[bindonAttr];
+        expr = attrs[bindonAttr];
         assignExpr = true;
       } else if (attrs.hasOwnProperty(bracketParenAttr)) {
-        expr = (attrs as any /** TODO #9100 */)[bracketParenAttr];
+        expr = attrs[bracketParenAttr];
         assignExpr = true;
       }
 
@@ -150,10 +182,8 @@ export class DowngradeComponentAdapter {
         const emitter = this.component[output.prop] as EventEmitter<any>;
         if (emitter) {
           emitter.subscribe({
-            next: assignExpr ?
-                ((setter: any) => (v: any /** TODO #9100 */) => setter(this.scope, v))(setter) :
-                ((getter: any) => (v: any /** TODO #9100 */) =>
-                     getter(this.scope, {$event: v}))(getter)
+            next: assignExpr ? (v: any) => setter !(this.scope, v) :
+                               (v: any) => getter(this.scope, {'$event': v})
           });
         } else {
           throw new Error(
@@ -163,27 +193,30 @@ export class DowngradeComponentAdapter {
     }
   }
 
-  registerCleanup() {
-    this.element.bind('$destroy', () => {
+  registerCleanup(needsNgZone: boolean) {
+    this.element.on !('$destroy', () => {
       this.componentScope.$destroy();
       this.componentRef.destroy();
+      if (needsNgZone) {
+        this.appRef.detachView(this.componentRef.hostView);
+      }
     });
   }
 
-  getInjector(): Injector { return this.componentRef && this.componentRef.injector; }
+  getInjector(): Injector { return this.componentRef.injector; }
 
   private updateInput(prop: string, prevValue: any, currValue: any) {
-    if (this.inputChanges) {
-      this.inputChangeCount++;
+    if (this.implementsOnChanges) {
       this.inputChanges[prop] = new SimpleChange(prevValue, currValue, prevValue === currValue);
     }
 
+    this.inputChangeCount++;
     this.component[prop] = currValue;
   }
 
   groupProjectableNodes() {
     let ngContentSelectors = this.componentFactory.ngContentSelectors;
-    return groupNodesBySelector(ngContentSelectors, this.element.contents());
+    return groupNodesBySelector(ngContentSelectors, this.element.contents !());
   }
 }
 
@@ -209,9 +242,9 @@ export function groupNodesBySelector(ngContentSelectors: string[], nodes: Node[]
   return projectableNodes;
 }
 
-function findMatchingNgContentIndex(element: any, ngContentSelectors: string[]): number {
+function findMatchingNgContentIndex(element: any, ngContentSelectors: string[]): number|null {
   const ngContentIndices: number[] = [];
-  let wildcardNgContentIndex: number;
+  let wildcardNgContentIndex: number = -1;
   for (let i = 0; i < ngContentSelectors.length; i++) {
     const selector = ngContentSelectors[i];
     if (selector === '*') {
@@ -224,7 +257,7 @@ function findMatchingNgContentIndex(element: any, ngContentSelectors: string[]):
   }
   ngContentIndices.sort();
 
-  if (wildcardNgContentIndex !== undefined) {
+  if (wildcardNgContentIndex !== -1) {
     ngContentIndices.push(wildcardNgContentIndex);
   }
   return ngContentIndices.length ? ngContentIndices[0] : null;
diff --git a/packages/upgrade/src/common/downgrade_injectable.ts b/packages/upgrade/src/common/downgrade_injectable.ts
index a177a3e327..e9894e36fb 100644
--- a/packages/upgrade/src/common/downgrade_injectable.ts
+++ b/packages/upgrade/src/common/downgrade_injectable.ts
@@ -12,7 +12,7 @@ import {INJECTOR_KEY} from './constants';
 /**
  * @whatItDoes
  *
- * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic)
+ * *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
  * library for hybrid upgrade apps that support AoT compilation*
  *
  * Allow an Angular service to be accessible from AngularJS.
@@ -53,7 +53,7 @@ import {INJECTOR_KEY} from './constants';
  */
 export function downgradeInjectable(token: any): Function {
   const factory = function(i: Injector) { return i.get(token); };
-  (factory as any).$inject = [INJECTOR_KEY];
+  (factory as any)['$inject'] = [INJECTOR_KEY];
 
   return factory;
 }
diff --git a/packages/upgrade/src/common/upgrade_helper.ts b/packages/upgrade/src/common/upgrade_helper.ts
new file mode 100644
index 0000000000..0b9c6a8022
--- /dev/null
+++ b/packages/upgrade/src/common/upgrade_helper.ts
@@ -0,0 +1,294 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ElementRef, Injector, SimpleChanges} from '@angular/core';
+
+import * as angular from './angular1';
+import {$COMPILE, $CONTROLLER, $HTTP_BACKEND, $INJECTOR, $TEMPLATE_CACHE} from './constants';
+import {controllerKey, directiveNormalize, isFunction} from './util';
+
+
+// Constants
+const REQUIRE_PREFIX_RE = /^(\^\^?)?(\?)?(\^\^?)?/;
+
+// Interfaces
+export interface IBindingDestination {
+  [key: string]: any;
+  $onChanges?: (changes: SimpleChanges) => void;
+}
+
+export interface IControllerInstance extends IBindingDestination {
+  $doCheck?: () => void;
+  $onDestroy?: () => void;
+  $onInit?: () => void;
+  $postLink?: () => void;
+}
+
+// Classes
+export class UpgradeHelper {
+  public readonly $injector: angular.IInjectorService;
+  public readonly element: Element;
+  public readonly $element: angular.IAugmentedJQuery;
+  public readonly directive: angular.IDirective;
+
+  private readonly $compile: angular.ICompileService;
+  private readonly $controller: angular.IControllerService;
+
+  constructor(
+      private injector: Injector, private name: string, elementRef: ElementRef,
+      directive?: angular.IDirective) {
+    this.$injector = injector.get($INJECTOR);
+    this.$compile = this.$injector.get($COMPILE);
+    this.$controller = this.$injector.get($CONTROLLER);
+
+    this.element = elementRef.nativeElement;
+    this.$element = angular.element(this.element);
+
+    this.directive = directive || UpgradeHelper.getDirective(this.$injector, name);
+  }
+
+  static getDirective($injector: angular.IInjectorService, name: string): angular.IDirective {
+    const directives: angular.IDirective[] = $injector.get(name + 'Directive');
+    if (directives.length > 1) {
+      throw new Error(`Only support single directive definition for: ${name}`);
+    }
+
+    const directive = directives[0];
+
+    // AngularJS will transform `link: xyz` to `compile: () => xyz`. So we can only tell there was a
+    // user-defined `compile` if there is no `link`. In other cases, we will just ignore `compile`.
+    if (directive.compile && !directive.link) notSupported(name, 'compile');
+    if (directive.replace) notSupported(name, 'replace');
+    if (directive.terminal) notSupported(name, 'terminal');
+
+    return directive;
+  }
+
+  static getTemplate(
+      $injector: angular.IInjectorService, directive: angular.IDirective,
+      fetchRemoteTemplate = false): string|Promise<string> {
+    if (directive.template !== undefined) {
+      return getOrCall<string>(directive.template);
+    } else if (directive.templateUrl) {
+      const $templateCache = $injector.get($TEMPLATE_CACHE) as angular.ITemplateCacheService;
+      const url = getOrCall<string>(directive.templateUrl);
+      const template = $templateCache.get(url);
+
+      if (template !== undefined) {
+        return template;
+      } else if (!fetchRemoteTemplate) {
+        throw new Error('loading directive templates asynchronously is not supported');
+      }
+
+      return new Promise((resolve, reject) => {
+        const $httpBackend = $injector.get($HTTP_BACKEND) as angular.IHttpBackendService;
+        $httpBackend('GET', url, null, (status: number, response: string) => {
+          if (status === 200) {
+            resolve($templateCache.put(url, response));
+          } else {
+            reject(`GET component template from '${url}' returned '${status}: ${response}'`);
+          }
+        });
+      });
+    } else {
+      throw new Error(`Directive '${directive.name}' is not a component, it is missing template.`);
+    }
+  }
+
+  buildController(controllerType: angular.IController, $scope: angular.IScope) {
+    // TODO: Document that we do not pre-assign bindings on the controller instance.
+    // Quoted properties below so that this code can be optimized with Closure Compiler.
+    const locals = {'$scope': $scope, '$element': this.$element};
+    const controller = this.$controller(controllerType, locals, null, this.directive.controllerAs);
+
+    this.$element.data !(controllerKey(this.directive.name !), controller);
+
+    return controller;
+  }
+
+  compileTemplate(template?: string): angular.ILinkFn {
+    if (template === undefined) {
+      template = UpgradeHelper.getTemplate(this.$injector, this.directive) as string;
+    }
+
+    return this.compileHtml(template);
+  }
+
+  prepareTransclusion(): angular.ILinkFn|undefined {
+    const transclude = this.directive.transclude;
+    const contentChildNodes = this.extractChildNodes();
+    let $template = contentChildNodes;
+    let attachChildrenFn: angular.ILinkFn|undefined = (scope, cloneAttach) =>
+        cloneAttach !($template, scope);
+
+    if (transclude) {
+      const slots = Object.create(null);
+
+      if (typeof transclude === 'object') {
+        $template = [];
+
+        const slotMap = Object.create(null);
+        const filledSlots = Object.create(null);
+
+        // Parse the element selectors.
+        Object.keys(transclude).forEach(slotName => {
+          let selector = transclude[slotName];
+          const optional = selector.charAt(0) === '?';
+          selector = optional ? selector.substring(1) : selector;
+
+          slotMap[selector] = slotName;
+          slots[slotName] = null;            // `null`: Defined but not yet filled.
+          filledSlots[slotName] = optional;  // Consider optional slots as filled.
+        });
+
+        // Add the matching elements into their slot.
+        contentChildNodes.forEach(node => {
+          const slotName = slotMap[directiveNormalize(node.nodeName.toLowerCase())];
+          if (slotName) {
+            filledSlots[slotName] = true;
+            slots[slotName] = slots[slotName] || [];
+            slots[slotName].push(node);
+          } else {
+            $template.push(node);
+          }
+        });
+
+        // Check for required slots that were not filled.
+        Object.keys(filledSlots).forEach(slotName => {
+          if (!filledSlots[slotName]) {
+            throw new Error(`Required transclusion slot '${slotName}' on directive: ${this.name}`);
+          }
+        });
+
+        Object.keys(slots).filter(slotName => slots[slotName]).forEach(slotName => {
+          const nodes = slots[slotName];
+          slots[slotName] = (scope: angular.IScope, cloneAttach: angular.ICloneAttachFunction) =>
+              cloneAttach !(nodes, scope);
+        });
+      }
+
+      // Attach `$$slots` to default slot transclude fn.
+      attachChildrenFn.$$slots = slots;
+
+      // AngularJS v1.6+ ignores empty or whitespace-only transcluded text nodes. But Angular
+      // removes all text content after the first interpolation and updates it later, after
+      // evaluating the expressions. This would result in AngularJS failing to recognize text
+      // nodes that start with an interpolation as transcluded content and use the fallback
+      // content instead.
+      // To avoid this issue, we add a
+      // [zero-width non-joiner character](https://en.wikipedia.org/wiki/Zero-width_non-joiner)
+      // to empty text nodes (which can only be a result of Angular removing their initial content).
+      // NOTE: Transcluded text content that starts with whitespace followed by an interpolation
+      //       will still fail to be detected by AngularJS v1.6+
+      $template.forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE && !node.nodeValue) {
+          node.nodeValue = '\u200C';
+        }
+      });
+    }
+
+    return attachChildrenFn;
+  }
+
+  resolveAndBindRequiredControllers(controllerInstance: IControllerInstance|null) {
+    const directiveRequire = this.getDirectiveRequire();
+    const requiredControllers = this.resolveRequire(directiveRequire);
+
+    if (controllerInstance && this.directive.bindToController && isMap(directiveRequire)) {
+      const requiredControllersMap = requiredControllers as{[key: string]: IControllerInstance};
+      Object.keys(requiredControllersMap).forEach(key => {
+        controllerInstance[key] = requiredControllersMap[key];
+      });
+    }
+
+    return requiredControllers;
+  }
+
+  private compileHtml(html: string): angular.ILinkFn {
+    this.element.innerHTML = html;
+    return this.$compile(this.element.childNodes);
+  }
+
+  private extractChildNodes(): Node[] {
+    const childNodes: Node[] = [];
+    let childNode: Node|null;
+
+    while (childNode = this.element.firstChild) {
+      this.element.removeChild(childNode);
+      childNodes.push(childNode);
+    }
+
+    return childNodes;
+  }
+
+  private getDirectiveRequire(): angular.DirectiveRequireProperty {
+    const require = this.directive.require || (this.directive.controller && this.directive.name) !;
+
+    if (isMap(require)) {
+      Object.keys(require).forEach(key => {
+        const value = require[key];
+        const match = value.match(REQUIRE_PREFIX_RE) !;
+        const name = value.substring(match[0].length);
+
+        if (!name) {
+          require[key] = match[0] + key;
+        }
+      });
+    }
+
+    return require;
+  }
+
+  private resolveRequire(require: angular.DirectiveRequireProperty, controllerInstance?: any):
+      angular.SingleOrListOrMap<IControllerInstance>|null {
+    if (!require) {
+      return null;
+    } else if (Array.isArray(require)) {
+      return require.map(req => this.resolveRequire(req));
+    } else if (typeof require === 'object') {
+      const value: {[key: string]: IControllerInstance} = {};
+      Object.keys(require).forEach(key => value[key] = this.resolveRequire(require[key]) !);
+      return value;
+    } else if (typeof require === 'string') {
+      const match = require.match(REQUIRE_PREFIX_RE) !;
+      const inheritType = match[1] || match[3];
+
+      const name = require.substring(match[0].length);
+      const isOptional = !!match[2];
+      const searchParents = !!inheritType;
+      const startOnParent = inheritType === '^^';
+
+      const ctrlKey = controllerKey(name);
+      const elem = startOnParent ? this.$element.parent !() : this.$element;
+      const value = searchParents ? elem.inheritedData !(ctrlKey) : elem.data !(ctrlKey);
+
+      if (!value && !isOptional) {
+        throw new Error(
+            `Unable to find required '${require}' in upgraded directive '${this.name}'.`);
+      }
+
+      return value;
+    } else {
+      throw new Error(
+          `Unrecognized 'require' syntax on upgraded directive '${this.name}': ${require}`);
+    }
+  }
+}
+
+function getOrCall<T>(property: T | Function): T {
+  return isFunction(property) ? property() : property;
+}
+
+// NOTE: Only works for `typeof T !== 'object'`.
+function isMap<T>(value: angular.SingleOrListOrMap<T>): value is {[key: string]: T} {
+  return value && !Array.isArray(value) && typeof value === 'object';
+}
+
+function notSupported(name: string, feature: string) {
+  throw new Error(`Upgraded directive '${name}' contains unsupported feature: '${feature}'.`);
+}
diff --git a/packages/upgrade/src/common/util.ts b/packages/upgrade/src/common/util.ts
index ae42dc14b8..15213dd986 100644
--- a/packages/upgrade/src/common/util.ts
+++ b/packages/upgrade/src/common/util.ts
@@ -6,9 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Type} from '@angular/core';
+import {Injector, Type} from '@angular/core';
 import * as angular from './angular1';
 
+const DIRECTIVE_PREFIX_REGEXP = /^(?:x|data)[:\-_]/i;
+const DIRECTIVE_SPECIAL_CHARS_REGEXP = /[:\-_]+(.)/g;
+
 export function onError(e: any) {
   // TODO: (misko): We seem to not have a stack trace here!
   if (console.error) {
@@ -24,14 +27,19 @@ export function controllerKey(name: string): string {
   return '$' + name + 'Controller';
 }
 
+export function directiveNormalize(name: string): string {
+  return name.replace(DIRECTIVE_PREFIX_REGEXP, '')
+      .replace(DIRECTIVE_SPECIAL_CHARS_REGEXP, (_, letter) => letter.toUpperCase());
+}
+
 export function getAttributesAsArray(node: Node): [string, string][] {
   const attributes = node.attributes;
-  let asArray: [string, string][];
+  let asArray: [string, string][] = undefined !;
   if (attributes) {
     let attrLen = attributes.length;
     asArray = new Array(attrLen);
     for (let i = 0; i < attrLen; i++) {
-      asArray[i] = [attributes[i].nodeName, attributes[i].nodeValue];
+      asArray[i] = [attributes[i].nodeName, attributes[i].nodeValue !];
     }
   }
   return asArray || [];
@@ -42,6 +50,10 @@ export function getComponentName(component: Type<any>): string {
   return (component as any).overriddenName || component.name || component.toString().split('\n')[0];
 }
 
+export function isFunction(value: any): value is Function {
+  return typeof value === 'function';
+}
+
 export class Deferred<R> {
   promise: Promise<R>;
   resolve: (value?: R|PromiseLike<R>) => void;
@@ -55,6 +67,14 @@ export class Deferred<R> {
   }
 }
 
+export interface LazyModuleRef {
+  // Whether the AngularJS app has been bootstrapped outside the Angular zone
+  // (in which case calls to Angular APIs need to be brought back in).
+  needsNgZone: boolean;
+  injector?: Injector;
+  promise?: Promise<Injector>;
+}
+
 /**
  * @return Whether the passed-in component implements the subset of the
  *     `ControlValueAccessor` interface needed for AngularJS `ng-model`
@@ -73,5 +93,15 @@ export function hookupNgModel(ngModel: angular.INgModelController, component: an
   if (ngModel && supportsNgModel(component)) {
     ngModel.$render = () => { component.writeValue(ngModel.$viewValue); };
     component.registerOnChange(ngModel.$setViewValue.bind(ngModel));
+    if (typeof component.registerOnTouched === 'function') {
+      component.registerOnTouched(ngModel.$setTouched.bind(ngModel));
+    }
   }
 }
+
+/**
+ * Test two values for strict equality, accounting for the fact that `NaN !== NaN`.
+ */
+export function strictEquals(val1: any, val2: any): boolean {
+  return val1 === val2 || (val1 !== val1 && val2 !== val2);
+}
diff --git a/packages/upgrade/src/dynamic/upgrade_adapter.ts b/packages/upgrade/src/dynamic/upgrade_adapter.ts
index e13f0daa96..fe437cd1b4 100644
--- a/packages/upgrade/src/dynamic/upgrade_adapter.ts
+++ b/packages/upgrade/src/dynamic/upgrade_adapter.ts
@@ -10,7 +10,7 @@ import {Compiler, CompilerOptions, Directive, Injector, NgModule, NgModuleRef, N
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 import * as angular from '../common/angular1';
-import {$$TESTABILITY, $COMPILE, $INJECTOR, $ROOT_SCOPE, COMPILER_KEY, INJECTOR_KEY, NG_ZONE_KEY} from '../common/constants';
+import {$$TESTABILITY, $COMPILE, $INJECTOR, $ROOT_SCOPE, COMPILER_KEY, INJECTOR_KEY, LAZY_MODULE_REF, NG_ZONE_KEY} from '../common/constants';
 import {downgradeComponent} from '../common/downgrade_component';
 import {downgradeInjectable} from '../common/downgrade_injectable';
 import {Deferred, controllerKey, onError} from '../common/util';
@@ -113,7 +113,7 @@ export class UpgradeAdapter {
   private upgradedProviders: Provider[] = [];
   private ngZone: NgZone;
   private ng1Module: angular.IModule;
-  private moduleRef: NgModuleRef<any> = null;
+  private moduleRef: NgModuleRef<any>|null = null;
   private ng2BootstrapDeferred: Deferred<angular.IInjectorService>;
 
   constructor(private ng2AppModule: Type<any>, private compilerOptions?: CompilerOptions) {
@@ -382,7 +382,7 @@ export class UpgradeAdapter {
     const windowAngular = (window as any /** TODO #???? */)['angular'];
     windowAngular.resumeBootstrap = undefined;
 
-    this.ngZone.run(() => { angular.bootstrap(element, [this.ng1Module.name], config); });
+    this.ngZone.run(() => { angular.bootstrap(element, [this.ng1Module.name], config !); });
     const ng1BootstrapPromise = new Promise((resolve) => {
       if (windowAngular.resumeBootstrap) {
         const originalResumeBootstrap: () => void = windowAngular.resumeBootstrap;
@@ -397,8 +397,8 @@ export class UpgradeAdapter {
     });
 
     Promise.all([this.ng2BootstrapDeferred.promise, ng1BootstrapPromise]).then(([ng1Injector]) => {
-      angular.element(element).data(controllerKey(INJECTOR_KEY), this.moduleRef.injector);
-      this.moduleRef.injector.get(NgZone).run(
+      angular.element(element).data !(controllerKey(INJECTOR_KEY), this.moduleRef !.injector);
+      this.moduleRef !.injector.get(NgZone).run(
           () => { (<any>upgrade)._bootstrapDone(this.moduleRef, ng1Injector); });
     }, onError);
     return upgrade;
@@ -494,9 +494,12 @@ export class UpgradeAdapter {
 
     this.ngZone = new NgZone({enableLongStackTrace: Zone.hasOwnProperty('longStackTraceZoneSpec')});
     this.ng2BootstrapDeferred = new Deferred();
-    ng1Module.factory(INJECTOR_KEY, () => this.moduleRef.injector.get(Injector))
+    ng1Module.factory(INJECTOR_KEY, () => this.moduleRef !.injector.get(Injector))
+        .factory(
+            LAZY_MODULE_REF,
+            [INJECTOR_KEY, (injector: Injector) => ({injector, needsInNgZone: false})])
         .constant(NG_ZONE_KEY, this.ngZone)
-        .factory(COMPILER_KEY, () => this.moduleRef.injector.get(Compiler))
+        .factory(COMPILER_KEY, () => this.moduleRef !.injector.get(Compiler))
         .config([
           '$provide', '$injector',
           (provide: angular.IProvideService, ng1Injector: angular.IInjectorService) => {
@@ -524,7 +527,7 @@ export class UpgradeAdapter {
                   const newWhenStable = function(callback: Function) {
                     originalWhenStable.call(this, function() {
                       const ng2Testability: Testability =
-                          upgradeAdapter.moduleRef.injector.get(Testability);
+                          upgradeAdapter.moduleRef !.injector.get(Testability);
                       if (ng2Testability.isStable()) {
                         callback.apply(this, arguments);
                       } else {
@@ -546,8 +549,8 @@ export class UpgradeAdapter {
       (ng1Injector: angular.IInjectorService, rootScope: angular.IRootScopeService) => {
         UpgradeNg1ComponentAdapterBuilder.resolve(this.ng1ComponentsToBeUpgraded, ng1Injector)
             .then(() => {
-              // At this point we have ng1 injector and we have lifted ng1 components into ng2, we
-              // now can bootstrap ng2.
+              // At this point we have ng1 injector and we have prepared
+              // ng1 components to be upgraded, we now can bootstrap ng2.
               const DynamicNgUpgradeModule =
                   NgModule({
                     providers: [
@@ -601,7 +604,7 @@ class ParentInjectorPromise {
 
   constructor(private element: angular.IAugmentedJQuery) {
     // store the promise on the element
-    element.data(controllerKey(INJECTOR_KEY), this);
+    element.data !(controllerKey(INJECTOR_KEY), this);
   }
 
   then(callback: (injector: Injector) => any) {
@@ -616,10 +619,10 @@ class ParentInjectorPromise {
     this.injector = injector;
 
     // reset the element data to point to the real injector
-    this.element.data(controllerKey(INJECTOR_KEY), injector);
+    this.element.data !(controllerKey(INJECTOR_KEY), injector);
 
     // clean out the element to prevent memory leaks
-    this.element = null;
+    this.element = null !;
 
     // run all the queued callbacks
     this.callbacks.forEach((callback) => callback(injector));
@@ -635,12 +638,12 @@ class ParentInjectorPromise {
  */
 export class UpgradeAdapterRef {
   /* @internal */
-  private _readyFn: (upgradeAdapterRef?: UpgradeAdapterRef) => void = null;
+  private _readyFn: ((upgradeAdapterRef?: UpgradeAdapterRef) => void)|null = null;
 
-  public ng1RootScope: angular.IRootScopeService = null;
-  public ng1Injector: angular.IInjectorService = null;
-  public ng2ModuleRef: NgModuleRef<any> = null;
-  public ng2Injector: Injector = null;
+  public ng1RootScope: angular.IRootScopeService = null !;
+  public ng1Injector: angular.IInjectorService = null !;
+  public ng2ModuleRef: NgModuleRef<any> = null !;
+  public ng2Injector: Injector = null !;
 
   /* @internal */
   private _bootstrapDone(ngModuleRef: NgModuleRef<any>, ng1Injector: angular.IInjectorService) {
@@ -658,13 +661,13 @@ export class UpgradeAdapterRef {
    * The `ready` callback function is invoked inside the Angular zone, therefore it does not
    * require a call to `$apply()`.
    */
-  public ready(fn: (upgradeAdapterRef?: UpgradeAdapterRef) => void) { this._readyFn = fn; }
+  public ready(fn: (upgradeAdapterRef: UpgradeAdapterRef) => void) { this._readyFn = fn; }
 
   /**
    * Dispose of running hybrid AngularJS / Angular application.
    */
   public dispose() {
-    this.ng1Injector.get($ROOT_SCOPE).$destroy();
-    this.ng2ModuleRef.destroy();
+    this.ng1Injector !.get($ROOT_SCOPE).$destroy();
+    this.ng2ModuleRef !.destroy();
   }
 }
diff --git a/packages/upgrade/src/dynamic/upgrade_ng1_adapter.ts b/packages/upgrade/src/dynamic/upgrade_ng1_adapter.ts
index 8a6ca0245f..366fd82f0b 100644
--- a/packages/upgrade/src/dynamic/upgrade_ng1_adapter.ts
+++ b/packages/upgrade/src/dynamic/upgrade_ng1_adapter.ts
@@ -6,26 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, DoCheck, ElementRef, EventEmitter, Inject, OnChanges, OnInit, SimpleChange, SimpleChanges, Type} from '@angular/core';
+import {Directive, DoCheck, ElementRef, EventEmitter, Inject, Injector, OnChanges, OnInit, SimpleChange, SimpleChanges, Type} from '@angular/core';
 
 import * as angular from '../common/angular1';
-import {$COMPILE, $CONTROLLER, $HTTP_BACKEND, $SCOPE, $TEMPLATE_CACHE} from '../common/constants';
-import {controllerKey} from '../common/util';
-
-
-interface IBindingDestination {
-  [key: string]: any;
-  $onChanges?: (changes: SimpleChanges) => void;
-}
-
-interface IControllerInstance extends IBindingDestination {
-  $doCheck?: () => void;
-  $onDestroy?: () => void;
-  $onInit?: () => void;
-  $postLink?: () => void;
-}
-
-type LifecycleHook = '$doCheck' | '$onChanges' | '$onDestroy' | '$onInit' | '$postLink';
+import {$SCOPE} from '../common/constants';
+import {IBindingDestination, IControllerInstance, UpgradeHelper} from '../common/upgrade_helper';
+import {isFunction, strictEquals} from '../common/util';
 
 
 const CAMEL_CASE = /([A-Z])/g;
@@ -44,23 +30,24 @@ export class UpgradeNg1ComponentAdapterBuilder {
   propertyOutputs: string[] = [];
   checkProperties: string[] = [];
   propertyMap: {[name: string]: string} = {};
-  linkFn: angular.ILinkFn = null;
-  directive: angular.IDirective = null;
-  $controller: angular.IControllerService = null;
+  directive: angular.IDirective|null = null;
+  template: string;
 
   constructor(public name: string) {
-    const selector = name.replace(
-        CAMEL_CASE, (all: any /** TODO #9100 */, next: string) => '-' + next.toLowerCase());
+    const selector =
+        name.replace(CAMEL_CASE, (all: string, next: string) => '-' + next.toLowerCase());
     const self = this;
+
     this.type =
         Directive({selector: selector, inputs: this.inputsRename, outputs: this.outputsRename})
             .Class({
               constructor: [
-                new Inject($SCOPE), ElementRef,
-                function(scope: angular.IScope, elementRef: ElementRef) {
+                new Inject($SCOPE), Injector, ElementRef,
+                function(scope: angular.IScope, injector: Injector, elementRef: ElementRef) {
+                  const helper = new UpgradeHelper(injector, name, elementRef, this.directive);
                   return new UpgradeNg1ComponentAdapter(
-                      self.linkFn, scope, self.directive, elementRef, self.$controller, self.inputs,
-                      self.outputs, self.propertyOutputs, self.checkProperties, self.propertyMap);
+                      helper, scope, self.template, self.inputs, self.outputs, self.propertyOutputs,
+                      self.checkProperties, self.propertyMap);
                 }
               ],
               ngOnInit: function() { /* needs to be here for ng2 to properly detect it */ },
@@ -70,115 +57,60 @@ export class UpgradeNg1ComponentAdapterBuilder {
             });
   }
 
-  extractDirective(injector: angular.IInjectorService): angular.IDirective {
-    const directives: angular.IDirective[] = injector.get(this.name + 'Directive');
-    if (directives.length > 1) {
-      throw new Error('Only support single directive definition for: ' + this.name);
-    }
-    const directive = directives[0];
-    if (directive.replace) this.notSupported('replace');
-    if (directive.terminal) this.notSupported('terminal');
-    const link = directive.link;
-    if (typeof link == 'object') {
-      if ((<angular.IDirectivePrePost>link).post) this.notSupported('link.post');
-    }
-    return directive;
-  }
-
-  private notSupported(feature: string) {
-    throw new Error(`Upgraded directive '${this.name}' does not support '${feature}'.`);
-  }
-
   extractBindings() {
-    const btcIsObject = typeof this.directive.bindToController === 'object';
-    if (btcIsObject && Object.keys(this.directive.scope).length) {
+    const btcIsObject = typeof this.directive !.bindToController === 'object';
+    if (btcIsObject && Object.keys(this.directive !.scope).length) {
       throw new Error(
           `Binding definitions on scope and controller at the same time are not supported.`);
     }
 
-    const context = (btcIsObject) ? this.directive.bindToController : this.directive.scope;
+    const context = (btcIsObject) ? this.directive !.bindToController : this.directive !.scope;
 
     if (typeof context == 'object') {
-      for (const name in context) {
-        if ((<any>context).hasOwnProperty(name)) {
-          let localName = context[name];
-          const type = localName.charAt(0);
-          const typeOptions = localName.charAt(1);
-          localName = typeOptions === '?' ? localName.substr(2) : localName.substr(1);
-          localName = localName || name;
+      Object.keys(context).forEach(propName => {
+        const definition = context[propName];
+        const bindingType = definition.charAt(0);
+        const bindingOptions = definition.charAt(1);
+        const attrName = definition.substring(bindingOptions === '?' ? 2 : 1) || propName;
 
-          const outputName = 'output_' + name;
-          const outputNameRename = outputName + ': ' + name;
-          const outputNameRenameChange = outputName + ': ' + name + 'Change';
-          const inputName = 'input_' + name;
-          const inputNameRename = inputName + ': ' + name;
-          switch (type) {
-            case '=':
-              this.propertyOutputs.push(outputName);
-              this.checkProperties.push(localName);
-              this.outputs.push(outputName);
-              this.outputsRename.push(outputNameRenameChange);
-              this.propertyMap[outputName] = localName;
-              this.inputs.push(inputName);
-              this.inputsRename.push(inputNameRename);
-              this.propertyMap[inputName] = localName;
-              break;
-            case '@':
-            // handle the '<' binding of angular 1.5 components
-            case '<':
-              this.inputs.push(inputName);
-              this.inputsRename.push(inputNameRename);
-              this.propertyMap[inputName] = localName;
-              break;
-            case '&':
-              this.outputs.push(outputName);
-              this.outputsRename.push(outputNameRename);
-              this.propertyMap[outputName] = localName;
-              break;
-            default:
-              let json = JSON.stringify(context);
-              throw new Error(
-                  `Unexpected mapping '${type}' in '${json}' in '${this.name}' directive.`);
-          }
+        // QUESTION: What about `=*`? Ignore? Throw? Support?
+
+        const inputName = `input_${attrName}`;
+        const inputNameRename = `${inputName}: ${attrName}`;
+        const outputName = `output_${attrName}`;
+        const outputNameRename = `${outputName}: ${attrName}`;
+        const outputNameRenameChange = `${outputNameRename}Change`;
+
+        switch (bindingType) {
+          case '@':
+          case '<':
+            this.inputs.push(inputName);
+            this.inputsRename.push(inputNameRename);
+            this.propertyMap[inputName] = propName;
+            break;
+          case '=':
+            this.inputs.push(inputName);
+            this.inputsRename.push(inputNameRename);
+            this.propertyMap[inputName] = propName;
+
+            this.outputs.push(outputName);
+            this.outputsRename.push(outputNameRenameChange);
+            this.propertyMap[outputName] = propName;
+
+            this.checkProperties.push(propName);
+            this.propertyOutputs.push(outputName);
+            break;
+          case '&':
+            this.outputs.push(outputName);
+            this.outputsRename.push(outputNameRename);
+            this.propertyMap[outputName] = propName;
+            break;
+          default:
+            let json = JSON.stringify(context);
+            throw new Error(
+                `Unexpected mapping '${bindingType}' in '${json}' in '${this.name}' directive.`);
         }
-      }
-    }
-  }
-
-  compileTemplate(
-      compile: angular.ICompileService, templateCache: angular.ITemplateCacheService,
-      httpBackend: angular.IHttpBackendService): Promise<angular.ILinkFn> {
-    if (this.directive.template !== undefined) {
-      this.linkFn = compileHtml(
-          isFunction(this.directive.template) ? this.directive.template() :
-                                                this.directive.template);
-    } else if (this.directive.templateUrl) {
-      const url = isFunction(this.directive.templateUrl) ? this.directive.templateUrl() :
-                                                           this.directive.templateUrl;
-      const html = templateCache.get(url);
-      if (html !== undefined) {
-        this.linkFn = compileHtml(html);
-      } else {
-        return new Promise((resolve, err) => {
-          httpBackend(
-              'GET', url, null,
-              (status: any /** TODO #9100 */, response: any /** TODO #9100 */) => {
-                if (status == 200) {
-                  resolve(this.linkFn = compileHtml(templateCache.put(url, response)));
-                } else {
-                  err(`GET ${url} returned ${status}: ${response}`);
-                }
-              });
-        });
-      }
-    } else {
-      throw new Error(`Directive '${this.name}' is not a component, it is missing template.`);
-    }
-    return null;
-    function compileHtml(html: any /** TODO #9100 */): angular.ILinkFn {
-      const div = document.createElement('div');
-      div.innerHTML = html;
-      return compile(div.childNodes);
+      });
     }
   }
 
@@ -187,100 +119,99 @@ export class UpgradeNg1ComponentAdapterBuilder {
    */
   static resolve(
       exportedComponents: {[name: string]: UpgradeNg1ComponentAdapterBuilder},
-      injector: angular.IInjectorService): Promise<angular.ILinkFn[]> {
-    const promises: Promise<angular.ILinkFn>[] = [];
-    const compile: angular.ICompileService = injector.get($COMPILE);
-    const templateCache: angular.ITemplateCacheService = injector.get($TEMPLATE_CACHE);
-    const httpBackend: angular.IHttpBackendService = injector.get($HTTP_BACKEND);
-    const $controller: angular.IControllerService = injector.get($CONTROLLER);
-    for (const name in exportedComponents) {
-      if ((<any>exportedComponents).hasOwnProperty(name)) {
-        const exportedComponent = exportedComponents[name];
-        exportedComponent.directive = exportedComponent.extractDirective(injector);
-        exportedComponent.$controller = $controller;
-        exportedComponent.extractBindings();
-        const promise: Promise<angular.ILinkFn> =
-            exportedComponent.compileTemplate(compile, templateCache, httpBackend);
-        if (promise) promises.push(promise);
-      }
-    }
+      $injector: angular.IInjectorService): Promise<string[]> {
+    const promises = Object.keys(exportedComponents).map(name => {
+      const exportedComponent = exportedComponents[name];
+      exportedComponent.directive = UpgradeHelper.getDirective($injector, name);
+      exportedComponent.extractBindings();
+
+      return Promise
+          .resolve(UpgradeHelper.getTemplate($injector, exportedComponent.directive, true))
+          .then(template => exportedComponent.template = template);
+    });
+
     return Promise.all(promises);
   }
 }
 
 class UpgradeNg1ComponentAdapter implements OnInit, OnChanges, DoCheck {
-  private controllerInstance: IControllerInstance = null;
-  destinationObj: IBindingDestination = null;
+  private controllerInstance: IControllerInstance|null = null;
+  destinationObj: IBindingDestination|null = null;
   checkLastValues: any[] = [];
-  componentScope: angular.IScope;
+  private directive: angular.IDirective;
   element: Element;
   $element: any = null;
+  componentScope: angular.IScope;
 
   constructor(
-      private linkFn: angular.ILinkFn, scope: angular.IScope, private directive: angular.IDirective,
-      elementRef: ElementRef, private $controller: angular.IControllerService,
+      private helper: UpgradeHelper, scope: angular.IScope, private template: string,
       private inputs: string[], private outputs: string[], private propOuts: string[],
       private checkProperties: string[], private propertyMap: {[key: string]: string}) {
-    this.element = elementRef.nativeElement;
-    this.componentScope = scope.$new(!!directive.scope);
-    this.$element = angular.element(this.element);
-    const controllerType = directive.controller;
-    if (directive.bindToController && controllerType) {
-      this.controllerInstance = this.buildController(controllerType);
+    this.directive = helper.directive;
+    this.element = helper.element;
+    this.$element = helper.$element;
+    this.componentScope = scope.$new(!!this.directive.scope);
+
+    const controllerType = this.directive.controller;
+
+    if (this.directive.bindToController && controllerType) {
+      this.controllerInstance = this.helper.buildController(controllerType, this.componentScope);
       this.destinationObj = this.controllerInstance;
     } else {
       this.destinationObj = this.componentScope;
     }
 
     for (let i = 0; i < inputs.length; i++) {
-      (this as any /** TODO #9100 */)[inputs[i]] = null;
+      (this as any)[inputs[i]] = null;
     }
     for (let j = 0; j < outputs.length; j++) {
-      const emitter = (this as any /** TODO #9100 */)[outputs[j]] = new EventEmitter();
+      const emitter = (this as any)[outputs[j]] = new EventEmitter<any>();
       this.setComponentProperty(
-          outputs[j], ((emitter: any /** TODO #9100 */) => (value: any /** TODO #9100 */) =>
-                           emitter.emit(value))(emitter));
+          outputs[j], (emitter => (value: any) => emitter.emit(value))(emitter));
     }
     for (let k = 0; k < propOuts.length; k++) {
-      (this as any /** TODO #9100 */)[propOuts[k]] = new EventEmitter();
       this.checkLastValues.push(INITIAL_VALUE);
     }
   }
 
   ngOnInit() {
-    if (!this.directive.bindToController && this.directive.controller) {
-      this.controllerInstance = this.buildController(this.directive.controller);
+    // Collect contents, insert and compile template
+    const attachChildNodes: angular.ILinkFn|undefined = this.helper.prepareTransclusion();
+    const linkFn = this.helper.compileTemplate(this.template);
+
+    // Instantiate controller (if not already done so)
+    const controllerType = this.directive.controller;
+    const bindToController = this.directive.bindToController;
+    if (controllerType && !bindToController) {
+      this.controllerInstance = this.helper.buildController(controllerType, this.componentScope);
     }
 
+    // Require other controllers
+    const requiredControllers =
+        this.helper.resolveAndBindRequiredControllers(this.controllerInstance);
+
+    // Hook: $onInit
     if (this.controllerInstance && isFunction(this.controllerInstance.$onInit)) {
       this.controllerInstance.$onInit();
     }
 
-    let link = this.directive.link;
-    if (typeof link == 'object') link = (<angular.IDirectivePrePost>link).pre;
-    if (link) {
-      const attrs: angular.IAttributes = NOT_SUPPORTED;
-      const transcludeFn: angular.ITranscludeFunction = NOT_SUPPORTED;
-      const linkController = this.resolveRequired(this.$element, this.directive.require);
-      (<angular.IDirectiveLinkFn>this.directive.link)(
-          this.componentScope, this.$element, attrs, linkController, transcludeFn);
+    // Linking
+    const link = this.directive.link;
+    const preLink = (typeof link == 'object') && (link as angular.IDirectivePrePost).pre;
+    const postLink = (typeof link == 'object') ? (link as angular.IDirectivePrePost).post : link;
+    const attrs: angular.IAttributes = NOT_SUPPORTED;
+    const transcludeFn: angular.ITranscludeFunction = NOT_SUPPORTED;
+    if (preLink) {
+      preLink(this.componentScope, this.$element, attrs, requiredControllers, transcludeFn);
     }
 
-    const childNodes: Node[] = [];
-    let childNode: any /** TODO #9100 */;
-    while (childNode = this.element.firstChild) {
-      this.element.removeChild(childNode);
-      childNodes.push(childNode);
-    }
-    this.linkFn(this.componentScope, (clonedElement, scope) => {
-      for (let i = 0, ii = clonedElement.length; i < ii; i++) {
-        this.element.appendChild(clonedElement[i]);
-      }
-    }, {
-      parentBoundTranscludeFn: (scope: any /** TODO #9100 */,
-                                cloneAttach: any /** TODO #9100 */) => { cloneAttach(childNodes); }
-    });
+    linkFn(this.componentScope, null !, {parentBoundTranscludeFn: attachChildNodes});
 
+    if (postLink) {
+      postLink(this.componentScope, this.$element, attrs, requiredControllers, transcludeFn);
+    }
+
+    // Hook: $postLink
     if (this.controllerInstance && isFunction(this.controllerInstance.$postLink)) {
       this.controllerInstance.$postLink();
     }
@@ -294,8 +225,8 @@ class UpgradeNg1ComponentAdapter implements OnInit, OnChanges, DoCheck {
       ng1Changes[this.propertyMap[name]] = change;
     });
 
-    if (isFunction(this.destinationObj.$onChanges)) {
-      this.destinationObj.$onChanges(ng1Changes);
+    if (isFunction(this.destinationObj !.$onChanges)) {
+      this.destinationObj !.$onChanges !(ng1Changes);
     }
   }
 
@@ -303,18 +234,15 @@ class UpgradeNg1ComponentAdapter implements OnInit, OnChanges, DoCheck {
     const destinationObj = this.destinationObj;
     const lastValues = this.checkLastValues;
     const checkProperties = this.checkProperties;
-    for (let i = 0; i < checkProperties.length; i++) {
-      const value = destinationObj[checkProperties[i]];
+    const propOuts = this.propOuts;
+    checkProperties.forEach((propName, i) => {
+      const value = destinationObj ![propName];
       const last = lastValues[i];
-      if (value !== last) {
-        if (typeof value == 'number' && isNaN(value) && typeof last == 'number' && isNaN(last)) {
-          // ignore because NaN != NaN
-        } else {
-          const eventEmitter: EventEmitter<any> = (this as any /** TODO #9100 */)[this.propOuts[i]];
-          eventEmitter.emit(lastValues[i] = value);
-        }
+      if (!strictEquals(last, value)) {
+        const eventEmitter: EventEmitter<any> = (this as any)[propOuts[i]];
+        eventEmitter.emit(lastValues[i] = value);
       }
-    }
+    });
 
     if (this.controllerInstance && isFunction(this.controllerInstance.$doCheck)) {
       this.controllerInstance.$doCheck();
@@ -328,58 +256,6 @@ class UpgradeNg1ComponentAdapter implements OnInit, OnChanges, DoCheck {
   }
 
   setComponentProperty(name: string, value: any) {
-    this.destinationObj[this.propertyMap[name]] = value;
-  }
-
-  private buildController(controllerType: any /** TODO #9100 */) {
-    const locals = {$scope: this.componentScope, $element: this.$element};
-    const controller: any =
-        this.$controller(controllerType, locals, null, this.directive.controllerAs);
-    this.$element.data(controllerKey(this.directive.name), controller);
-    return controller;
-  }
-
-  private resolveRequired(
-      $element: angular.IAugmentedJQuery, require: angular.DirectiveRequireProperty): any {
-    if (!require) {
-      return undefined;
-    } else if (typeof require == 'string') {
-      let name: string = <string>require;
-      let isOptional = false;
-      let startParent = false;
-      let searchParents = false;
-      if (name.charAt(0) == '?') {
-        isOptional = true;
-        name = name.substr(1);
-      }
-      if (name.charAt(0) == '^') {
-        searchParents = true;
-        name = name.substr(1);
-      }
-      if (name.charAt(0) == '^') {
-        startParent = true;
-        name = name.substr(1);
-      }
-
-      const key = controllerKey(name);
-      if (startParent) $element = $element.parent();
-      const dep = searchParents ? $element.inheritedData(key) : $element.data(key);
-      if (!dep && !isOptional) {
-        throw new Error(`Can not locate '${require}' in '${this.directive.name}'.`);
-      }
-      return dep;
-    } else if (require instanceof Array) {
-      const deps: any[] = [];
-      for (let i = 0; i < require.length; i++) {
-        deps.push(this.resolveRequired($element, require[i]));
-      }
-      return deps;
-    }
-    throw new Error(
-        `Directive '${this.directive.name}' require syntax unrecognized: ${this.directive.require}`);
+    this.destinationObj ![this.propertyMap[name]] = value;
   }
 }
-
-function isFunction(value: any): value is Function {
-  return typeof value === 'function';
-}
diff --git a/packages/upgrade/src/static/angular1_providers.ts b/packages/upgrade/src/static/angular1_providers.ts
index 6cf4b6cc58..36c8187cae 100644
--- a/packages/upgrade/src/static/angular1_providers.ts
+++ b/packages/upgrade/src/static/angular1_providers.ts
@@ -12,12 +12,16 @@ import * as angular from '../common/angular1';
 // We store the ng1 injector so that the provider in the module injector can access it
 // Then we "get" the ng1 injector from the module injector, which triggers the provider to read
 // the stored injector and release the reference to it.
-let tempInjectorRef: angular.IInjectorService;
+let tempInjectorRef: angular.IInjectorService|null;
 export function setTempInjectorRef(injector: angular.IInjectorService) {
   tempInjectorRef = injector;
 }
 export function injectorFactory() {
-  const injector: angular.IInjectorService = tempInjectorRef;
+  if (!tempInjectorRef) {
+    throw new Error('Trying to get the AngularJS injector before it being set.');
+  }
+
+  const injector: angular.IInjectorService|null = tempInjectorRef;
   tempInjectorRef = null;  // clear the value to prevent memory leaks
   return injector;
 }
diff --git a/packages/upgrade/src/static/downgrade_module.ts b/packages/upgrade/src/static/downgrade_module.ts
new file mode 100644
index 0000000000..8a82075384
--- /dev/null
+++ b/packages/upgrade/src/static/downgrade_module.ts
@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injector, NgModuleFactory, NgModuleRef, Provider} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+
+import * as angular from '../common/angular1';
+import {$INJECTOR, INJECTOR_KEY, LAZY_MODULE_REF, UPGRADE_MODULE_NAME} from '../common/constants';
+import {LazyModuleRef, isFunction} from '../common/util';
+
+import {angular1Providers, setTempInjectorRef} from './angular1_providers';
+import {NgAdapterInjector} from './util';
+
+
+/** @experimental */
+export function downgradeModule<T>(
+    moduleFactoryOrBootstrapFn: NgModuleFactory<T>|
+    ((extraProviders: Provider[]) => Promise<NgModuleRef<T>>)): string {
+  const LAZY_MODULE_NAME = UPGRADE_MODULE_NAME + '.lazy';
+  const bootstrapFn = isFunction(moduleFactoryOrBootstrapFn) ?
+      moduleFactoryOrBootstrapFn :
+      (extraProviders: Provider[]) =>
+          platformBrowser(extraProviders).bootstrapModuleFactory(moduleFactoryOrBootstrapFn);
+
+  let injector: Injector;
+
+  // Create an ng1 module to bootstrap.
+  angular.module(LAZY_MODULE_NAME, [])
+      .factory(
+          INJECTOR_KEY,
+          () => {
+            if (!injector) {
+              throw new Error(
+                  'Trying to get the Angular injector before bootstrapping an Angular module.');
+            }
+            return injector;
+          })
+      .factory(LAZY_MODULE_REF, [
+        $INJECTOR,
+        ($injector: angular.IInjectorService) => {
+          setTempInjectorRef($injector);
+          const result: LazyModuleRef = {
+            needsNgZone: true,
+            promise: bootstrapFn(angular1Providers).then(ref => {
+              injector = result.injector = new NgAdapterInjector(ref.injector);
+              injector.get($INJECTOR);
+
+              return injector;
+            })
+          };
+          return result;
+        }
+      ]);
+
+  return LAZY_MODULE_NAME;
+}
diff --git a/packages/upgrade/src/static/upgrade_component.ts b/packages/upgrade/src/static/upgrade_component.ts
index 5c2907ab83..06908f7595 100644
--- a/packages/upgrade/src/static/upgrade_component.ts
+++ b/packages/upgrade/src/static/upgrade_component.ts
@@ -8,10 +8,10 @@
 
 import {DoCheck, ElementRef, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, SimpleChanges, ɵlooseIdentical as looseIdentical} from '@angular/core';
 import * as angular from '../common/angular1';
-import {$COMPILE, $CONTROLLER, $HTTP_BACKEND, $INJECTOR, $SCOPE, $TEMPLATE_CACHE} from '../common/constants';
-import {controllerKey} from '../common/util';
+import {$SCOPE} from '../common/constants';
+import {IBindingDestination, IControllerInstance, UpgradeHelper} from '../common/upgrade_helper';
+import {isFunction} from '../common/util';
 
-const REQUIRE_PREFIX_RE = /^(\^\^?)?(\?)?(\^\^?)?/;
 const NOT_SUPPORTED: any = 'NOT_SUPPORTED';
 const INITIAL_VALUE = {
   __UNINITIALIZED__: true
@@ -26,24 +26,10 @@ class Bindings {
   propertyToOutputMap: {[propName: string]: string} = {};
 }
 
-interface IBindingDestination {
-  [key: string]: any;
-  $onChanges?: (changes: SimpleChanges) => void;
-}
-
-interface IControllerInstance extends IBindingDestination {
-  $doCheck?: () => void;
-  $onDestroy?: () => void;
-  $onInit?: () => void;
-  $postLink?: () => void;
-}
-
-type LifecycleHook = '$doCheck' | '$onChanges' | '$onDestroy' | '$onInit' | '$postLink';
-
 /**
  * @whatItDoes
  *
- * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic)
+ * *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
  * library for hybrid upgrade apps that support AoT compilation*
  *
  * Allows an AngularJS component to be used from Angular.
@@ -81,11 +67,9 @@ type LifecycleHook = '$doCheck' | '$onChanges' | '$onDestroy' | '$onInit' | '$po
  * @experimental
  */
 export class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
+  private helper: UpgradeHelper;
+
   private $injector: angular.IInjectorService;
-  private $compile: angular.ICompileService;
-  private $templateCache: angular.ITemplateCacheService;
-  private $httpBackend: angular.IHttpBackendService;
-  private $controller: angular.IControllerService;
 
   private element: Element;
   private $element: angular.IAugmentedJQuery;
@@ -99,7 +83,7 @@ export class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
 
   // We will be instantiating the controller in the `ngOnInit` hook, when the first `ngOnChanges`
   // will have been already triggered. We store the `SimpleChanges` and "play them back" later.
-  private pendingChanges: SimpleChanges;
+  private pendingChanges: SimpleChanges|null;
 
   private unregisterDoCheckWatcher: Function;
 
@@ -120,16 +104,14 @@ export class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
    * already implements them and so does not wire up calls to them at runtime.
    */
   constructor(private name: string, private elementRef: ElementRef, private injector: Injector) {
-    this.$injector = injector.get($INJECTOR);
-    this.$compile = this.$injector.get($COMPILE);
-    this.$templateCache = this.$injector.get($TEMPLATE_CACHE);
-    this.$httpBackend = this.$injector.get($HTTP_BACKEND);
-    this.$controller = this.$injector.get($CONTROLLER);
+    this.helper = new UpgradeHelper(injector, name, elementRef);
 
-    this.element = elementRef.nativeElement;
-    this.$element = angular.element(this.element);
+    this.$injector = this.helper.$injector;
 
-    this.directive = this.getDirective(name);
+    this.element = this.helper.element;
+    this.$element = this.helper.$element;
+
+    this.directive = this.helper.directive;
     this.bindings = this.initializeBindings(this.directive);
 
     // We ask for the AngularJS scope from the Angular injector, since
@@ -144,15 +126,14 @@ export class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
 
   ngOnInit() {
     // Collect contents, insert and compile template
-    const contentChildNodes = this.extractChildNodes(this.element);
-    const linkFn = this.compileTemplate(this.directive);
+    const attachChildNodes: angular.ILinkFn|undefined = this.helper.prepareTransclusion();
+    const linkFn = this.helper.compileTemplate();
 
     // Instantiate controller
     const controllerType = this.directive.controller;
     const bindToController = this.directive.bindToController;
     if (controllerType) {
-      this.controllerInstance = this.buildController(
-          controllerType, this.$componentScope, this.$element, this.directive.controllerAs);
+      this.controllerInstance = this.helper.buildController(controllerType, this.$componentScope);
     } else if (bindToController) {
       throw new Error(
           `Upgraded directive '${this.directive.name}' specifies 'bindToController' but no controller.`);
@@ -163,16 +144,8 @@ export class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
     this.bindOutputs();
 
     // Require other controllers
-    const directiveRequire = this.getDirectiveRequire(this.directive);
     const requiredControllers =
-        this.resolveRequire(this.directive.name, this.$element, directiveRequire);
-
-    if (this.directive.bindToController && isMap(directiveRequire)) {
-      const requiredControllersMap = requiredControllers as{[key: string]: IControllerInstance};
-      Object.keys(requiredControllersMap).forEach(key => {
-        this.controllerInstance[key] = requiredControllersMap[key];
-      });
-    }
+        this.helper.resolveAndBindRequiredControllers(this.controllerInstance);
 
     // Hook: $onChanges
     if (this.pendingChanges) {
@@ -187,7 +160,7 @@ export class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
 
     // Hook: $doCheck
     if (this.controllerInstance && isFunction(this.controllerInstance.$doCheck)) {
-      const callDoCheck = () => this.controllerInstance.$doCheck();
+      const callDoCheck = () => this.controllerInstance.$doCheck !();
 
       this.unregisterDoCheckWatcher = this.$componentScope.$parent.$watch(callDoCheck);
       callDoCheck();
@@ -203,9 +176,7 @@ export class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
       preLink(this.$componentScope, this.$element, attrs, requiredControllers, transcludeFn);
     }
 
-    const attachChildNodes: angular.ILinkFn = (scope, cloneAttach) =>
-        cloneAttach(contentChildNodes);
-    linkFn(this.$componentScope, null, {parentBoundTranscludeFn: attachChildNodes});
+    linkFn(this.$componentScope, null !, {parentBoundTranscludeFn: attachChildNodes});
 
     if (postLink) {
       postLink(this.$componentScope, this.$element, attrs, requiredControllers, transcludeFn);
@@ -254,41 +225,6 @@ export class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
     this.$componentScope.$destroy();
   }
 
-  private getDirective(name: string): angular.IDirective {
-    const directives: angular.IDirective[] = this.$injector.get(name + 'Directive');
-    if (directives.length > 1) {
-      throw new Error('Only support single directive definition for: ' + this.name);
-    }
-    const directive = directives[0];
-    if (directive.replace) this.notSupported('replace');
-    if (directive.terminal) this.notSupported('terminal');
-    if (directive.compile) this.notSupported('compile');
-    const link = directive.link;
-    // QUESTION: why not support link.post?
-    if (typeof link == 'object') {
-      if ((<angular.IDirectivePrePost>link).post) this.notSupported('link.post');
-    }
-    return directive;
-  }
-
-  private getDirectiveRequire(directive: angular.IDirective): angular.DirectiveRequireProperty {
-    const require = directive.require || (directive.controller && directive.name);
-
-    if (isMap(require)) {
-      Object.keys(require).forEach(key => {
-        const value = require[key];
-        const match = value.match(REQUIRE_PREFIX_RE);
-        const name = value.substring(match[0].length);
-
-        if (!name) {
-          require[key] = match[0] + key;
-        }
-      });
-    }
-
-    return require;
-  }
-
   private initializeBindings(directive: angular.IDirective) {
     const btcIsObject = typeof directive.bindToController === 'object';
     if (btcIsObject && Object.keys(directive.scope).length) {
@@ -333,97 +269,6 @@ export class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
     return bindings;
   }
 
-  private extractChildNodes(element: Element): Node[] {
-    const childNodes: Node[] = [];
-    let childNode: Node;
-
-    while (childNode = element.firstChild) {
-      element.removeChild(childNode);
-      childNodes.push(childNode);
-    }
-
-    return childNodes;
-  }
-
-  private compileTemplate(directive: angular.IDirective): angular.ILinkFn {
-    if (this.directive.template !== undefined) {
-      return this.compileHtml(getOrCall(this.directive.template));
-    } else if (this.directive.templateUrl) {
-      const url = getOrCall(this.directive.templateUrl);
-      const html = this.$templateCache.get(url) as string;
-      if (html !== undefined) {
-        return this.compileHtml(html);
-      } else {
-        throw new Error('loading directive templates asynchronously is not supported');
-        // return new Promise((resolve, reject) => {
-        //   this.$httpBackend('GET', url, null, (status: number, response: string) => {
-        //     if (status == 200) {
-        //       resolve(this.compileHtml(this.$templateCache.put(url, response)));
-        //     } else {
-        //       reject(`GET component template from '${url}' returned '${status}: ${response}'`);
-        //     }
-        //   });
-        // });
-      }
-    } else {
-      throw new Error(`Directive '${this.name}' is not a component, it is missing template.`);
-    }
-  }
-
-  private buildController(
-      controllerType: angular.IController, $scope: angular.IScope,
-      $element: angular.IAugmentedJQuery, controllerAs: string) {
-    // TODO: Document that we do not pre-assign bindings on the controller instance
-    // Quoted properties below so that this code can be optimized with Closure Compiler.
-    const locals = {'$scope': $scope, '$element': $element};
-    const controller = this.$controller(controllerType, locals, null, controllerAs);
-    $element.data(controllerKey(this.directive.name), controller);
-    return controller;
-  }
-
-  private resolveRequire(
-      directiveName: string, $element: angular.IAugmentedJQuery,
-      require: angular.DirectiveRequireProperty): angular.SingleOrListOrMap<IControllerInstance> {
-    if (!require) {
-      return null;
-    } else if (Array.isArray(require)) {
-      return require.map(req => this.resolveRequire(directiveName, $element, req));
-    } else if (typeof require === 'object') {
-      const value: {[key: string]: IControllerInstance} = {};
-
-      Object.keys(require).forEach(
-          key => value[key] = this.resolveRequire(directiveName, $element, require[key]));
-
-      return value;
-    } else if (typeof require === 'string') {
-      const match = require.match(REQUIRE_PREFIX_RE);
-      const inheritType = match[1] || match[3];
-
-      const name = require.substring(match[0].length);
-      const isOptional = !!match[2];
-      const searchParents = !!inheritType;
-      const startOnParent = inheritType === '^^';
-
-      const ctrlKey = controllerKey(name);
-
-      if (startOnParent) {
-        $element = $element.parent();
-      }
-
-      const value = searchParents ? $element.inheritedData(ctrlKey) : $element.data(ctrlKey);
-
-      if (!value && !isOptional) {
-        throw new Error(
-            `Unable to find required '${require}' in upgraded directive '${directiveName}'.`);
-      }
-
-      return value;
-    } else {
-      throw new Error(
-          `Unrecognized require syntax on upgraded directive '${directiveName}': ${require}`);
-    }
-  }
-
   private initializeOutputs() {
     // Initialize the outputs for `=` and `&` bindings
     this.bindings.twoWayBoundProperties.concat(this.bindings.expressionBoundProperties)
@@ -452,28 +297,4 @@ export class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
       this.bindingDestination.$onChanges(changes);
     }
   }
-
-  private notSupported(feature: string) {
-    throw new Error(
-        `Upgraded directive '${this.name}' contains unsupported feature: '${feature}'.`);
-  }
-
-  private compileHtml(html: string): angular.ILinkFn {
-    this.element.innerHTML = html;
-    return this.$compile(this.element.childNodes);
-  }
-}
-
-
-function getOrCall<T>(property: Function | T): T {
-  return isFunction(property) ? property() : property;
-}
-
-function isFunction(value: any): value is Function {
-  return typeof value === 'function';
-}
-
-// NOTE: Only works for `typeof T !== 'object'`.
-function isMap<T>(value: angular.SingleOrListOrMap<T>): value is {[key: string]: T} {
-  return value && !Array.isArray(value) && typeof value === 'object';
 }
diff --git a/packages/upgrade/src/static/upgrade_module.ts b/packages/upgrade/src/static/upgrade_module.ts
index 999526ae4c..1c57528350 100644
--- a/packages/upgrade/src/static/upgrade_module.ts
+++ b/packages/upgrade/src/static/upgrade_module.ts
@@ -6,19 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injector, NgModule, NgZone, Testability, ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR} from '@angular/core';
+import {Injector, NgModule, NgZone, Testability} from '@angular/core';
 
 import * as angular from '../common/angular1';
-import {$$TESTABILITY, $DELEGATE, $INJECTOR, $PROVIDE, INJECTOR_KEY, UPGRADE_MODULE_NAME} from '../common/constants';
+import {$$TESTABILITY, $DELEGATE, $INJECTOR, $INTERVAL, $PROVIDE, INJECTOR_KEY, LAZY_MODULE_REF, UPGRADE_MODULE_NAME} from '../common/constants';
 import {controllerKey} from '../common/util';
 
 import {angular1Providers, setTempInjectorRef} from './angular1_providers';
+import {NgAdapterInjector} from './util';
 
 
 /**
  * @whatItDoes
  *
- * *Part of the [upgrade/static](/docs/ts/latest/api/#!?query=upgrade%2Fstatic)
+ * *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
  * library for hybrid upgrade apps that support AoT compilation*
  *
  * Allows AngularJS and Angular components to be used together inside a hybrid upgrade
@@ -88,6 +89,7 @@ import {angular1Providers, setTempInjectorRef} from './angular1_providers';
  *
  * {@example upgrade/static/ts/module.ts region='bootstrap'}
  *
+ * {@a upgrading-an-angular-1-service}
  *
  * ## Upgrading an AngularJS service
  *
@@ -162,6 +164,10 @@ export class UpgradeModule {
 
             .value(INJECTOR_KEY, this.injector)
 
+            .factory(
+                LAZY_MODULE_REF,
+                [INJECTOR_KEY, (injector: Injector) => ({injector, needsNgZone: false})])
+
             .config([
               $PROVIDE, $INJECTOR,
               ($provide: angular.IProvideService, $injector: angular.IInjectorService) => {
@@ -189,6 +195,33 @@ export class UpgradeModule {
                     }
                   ]);
                 }
+
+                if ($injector.has($INTERVAL)) {
+                  $provide.decorator($INTERVAL, [
+                    $DELEGATE,
+                    (intervalDelegate: angular.IIntervalService) => {
+                      // Wrap the $interval service so that setInterval is called outside NgZone,
+                      // but the callback is still invoked within it. This is so that $interval
+                      // won't block stability, which preserves the behavior from AngularJS.
+                      let wrappedInterval =
+                          (fn: Function, delay: number, count?: number, invokeApply?: boolean,
+                           ...pass: any[]) => {
+                            return this.ngZone.runOutsideAngular(() => {
+                              return intervalDelegate((...args: any[]) => {
+                                // Run callback in the next VM turn - $interval calls
+                                // $rootScope.$apply, and running the callback in NgZone will
+                                // cause a '$digest already in progress' error if it's in the
+                                // same vm turn.
+                                setTimeout(() => { this.ngZone.run(() => fn(...args)); });
+                              }, delay, count, invokeApply, ...pass);
+                            });
+                          };
+
+                      (wrappedInterval as any)['cancel'] = intervalDelegate.cancel;
+                      return wrappedInterval;
+                    }
+                  ]);
+                }
               }
             ])
 
@@ -202,7 +235,7 @@ export class UpgradeModule {
                 this.injector.get($INJECTOR);
 
                 // Put the injector on the DOM, so that it can be "required"
-                angular.element(element).data(controllerKey(INJECTOR_KEY), this.injector);
+                angular.element(element).data !(controllerKey(INJECTOR_KEY), this.injector);
 
                 // Wire up the ng1 rootScope to run a digest cycle whenever the zone settles
                 // We need to do this in the next tick so that we don't prevent the bootup
@@ -219,7 +252,7 @@ export class UpgradeModule {
     const upgradeModule = angular.module(UPGRADE_MODULE_NAME, [INIT_MODULE_NAME].concat(modules));
 
     // Make sure resumeBootstrap() only exists if the current bootstrap is deferred
-    const windowAngular = (window as any /** TODO #???? */)['angular'];
+    const windowAngular = (window as any)['angular'];
     windowAngular.resumeBootstrap = undefined;
 
     // Bootstrap the AngularJS application inside our zone
@@ -237,19 +270,3 @@ export class UpgradeModule {
     }
   }
 }
-
-class NgAdapterInjector implements Injector {
-  constructor(private modInjector: Injector) {}
-
-  // When Angular locate a service in the component injector tree, the not found value is set to
-  // `NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR`. In such a case we should not walk up to the module
-  // injector.
-  // AngularJS only supports a single tree and should always check the module injector.
-  get(token: any, notFoundValue?: any): any {
-    if (notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) {
-      return notFoundValue;
-    }
-
-    return this.modInjector.get(token, notFoundValue);
-  }
-}
\ No newline at end of file
diff --git a/packages/upgrade/src/static/util.ts b/packages/upgrade/src/static/util.ts
new file mode 100644
index 0000000000..20f237fa5d
--- /dev/null
+++ b/packages/upgrade/src/static/util.ts
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injector, ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR} from '@angular/core';
+
+
+export class NgAdapterInjector implements Injector {
+  constructor(private modInjector: Injector) {}
+
+  // When Angular locate a service in the component injector tree, the not found value is set to
+  // `NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR`. In such a case we should not walk up to the module
+  // injector.
+  // AngularJS only supports a single tree and should always check the module injector.
+  get(token: any, notFoundValue?: any): any {
+    if (notFoundValue === NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR) {
+      return notFoundValue;
+    }
+
+    return this.modInjector.get(token, notFoundValue);
+  }
+}
diff --git a/packages/upgrade/static/public_api.ts b/packages/upgrade/static/public_api.ts
index 57b16cedc6..b8057bb535 100644
--- a/packages/upgrade/static/public_api.ts
+++ b/packages/upgrade/static/public_api.ts
@@ -12,9 +12,11 @@
  * Entry point for all public APIs of the upgrade/static package, allowing
  * Angular 1 and Angular 2+ to run side by side in the same application.
  */
+export {getAngularLib, setAngularLib} from './src/common/angular1';
 export {downgradeComponent} from './src/common/downgrade_component';
 export {downgradeInjectable} from './src/common/downgrade_injectable';
 export {VERSION} from './src/common/version';
+export {downgradeModule} from './src/static/downgrade_module';
 export {UpgradeComponent} from './src/static/upgrade_component';
 export {UpgradeModule} from './src/static/upgrade_module';
 
diff --git a/packages/upgrade/static/rollup.config.js b/packages/upgrade/static/rollup.config.js
index 826a9cfe4e..9ac5551d39 100644
--- a/packages/upgrade/static/rollup.config.js
+++ b/packages/upgrade/static/rollup.config.js
@@ -6,11 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import resolve from 'rollup-plugin-node-resolve';
+
+const globals = {
+  '@angular/core': 'ng.core'
+};
+
 export default {
   entry: '../../../dist/packages-dist/upgrade/@angular/upgrade/static.es5.js',
   dest: '../../../dist/packages-dist/upgrade/bundles/upgrade-static.umd.js',
   format: 'umd',
   exports: 'named',
   moduleName: 'ng.upgrade.static',
-  globals: {'@angular/core': 'ng.core'}
+  plugins: [resolve()],
+  external: Object.keys(globals),
+  globals: globals
 };
diff --git a/packages/upgrade/test/common/test_helpers.ts b/packages/upgrade/test/common/test_helpers.ts
index 037f59238c..827998ca76 100644
--- a/packages/upgrade/test/common/test_helpers.ts
+++ b/packages/upgrade/test/common/test_helpers.ts
@@ -20,9 +20,10 @@ export function html(html: string): Element {
   return div;
 }
 
-export function multiTrim(text: string | null | undefined): string {
+export function multiTrim(text: string | null | undefined, allSpace = false): string {
   if (typeof text == 'string') {
-    return text.replace(/\n/g, '').replace(/\s\s+/g, ' ').trim();
+    const repl = allSpace ? '' : ' ';
+    return text.replace(/\n/g, '').replace(/\s+/g, repl).trim();
   }
   throw new Error('Argument can not be undefined.');
 }
diff --git a/packages/upgrade/test/dynamic/test_helpers.ts b/packages/upgrade/test/dynamic/test_helpers.ts
index d1676d7569..284ef8bb6f 100644
--- a/packages/upgrade/test/dynamic/test_helpers.ts
+++ b/packages/upgrade/test/dynamic/test_helpers.ts
@@ -6,4 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {UpgradeAdapterRef} from '@angular/upgrade';
+import * as angular from '@angular/upgrade/src/common/angular1';
+import {$ROOT_SCOPE} from '@angular/upgrade/src/common/constants';
+
 export * from '../common/test_helpers';
+
+export function $digest(adapter: UpgradeAdapterRef) {
+  const $rootScope = adapter.ng1Injector.get($ROOT_SCOPE) as angular.IRootScopeService;
+  $rootScope.$digest();
+}
diff --git a/packages/upgrade/test/dynamic/upgrade_spec.ts b/packages/upgrade/test/dynamic/upgrade_spec.ts
index db05c40801..ff35abb500 100644
--- a/packages/upgrade/test/dynamic/upgrade_spec.ts
+++ b/packages/upgrade/test/dynamic/upgrade_spec.ts
@@ -6,13 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectorRef, Class, Component, EventEmitter, Input, NO_ERRORS_SCHEMA, NgModule, NgZone, SimpleChange, SimpleChanges, Testability, destroyPlatform, forwardRef} from '@angular/core';
+import {ChangeDetectorRef, Class, Component, EventEmitter, Input, NO_ERRORS_SCHEMA, NgModule, NgZone, OnChanges, SimpleChange, SimpleChanges, Testability, destroyPlatform, forwardRef} from '@angular/core';
 import {async, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import * as angular from '@angular/upgrade/src/common/angular1';
 import {UpgradeAdapter, UpgradeAdapterRef} from '@angular/upgrade/src/dynamic/upgrade_adapter';
-import {html, multiTrim} from './test_helpers';
+import {$digest, html, multiTrim} from './test_helpers';
 
 export function main() {
   describe('adapter: ng1 to ng2', () => {
@@ -284,7 +284,7 @@ export function main() {
 
            const element = html('<ng2></ng2>');
            adapter.bootstrap(element, ['ng1']).ready((ref) => {
-             expect(multiTrim(document.body.textContent)).toBe('It works');
+             expect(multiTrim(document.body.textContent !)).toBe('It works');
            });
          }));
 
@@ -390,7 +390,7 @@ export function main() {
               | modelA: {{modelA}}; modelB: {{modelB}}; eventA: {{eventA}}; eventB: {{eventB}};
               </div>`);
            adapter.bootstrap(element, ['ng1']).ready((ref) => {
-             expect(multiTrim(document.body.textContent))
+             expect(multiTrim(document.body.textContent !))
                  .toEqual(
                      'ignore: -; ' +
                      'literal: Text; interpolate: Hello world; ' +
@@ -398,7 +398,7 @@ export function main() {
                      'modelA: newA; modelB: newB; eventA: aFired; eventB: bFired;');
 
              ref.ng1RootScope.$apply('name = "everyone"');
-             expect(multiTrim(document.body.textContent))
+             expect(multiTrim(document.body.textContent !))
                  .toEqual(
                      'ignore: -; ' +
                      'literal: Text; interpolate: Hello everyone; ' +
@@ -410,6 +410,63 @@ export function main() {
 
          }));
 
+      it('should initialize inputs in time for `ngOnChanges`', async(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+
+           @Component({
+             selector: 'ng2',
+             template: `
+               ngOnChangesCount: {{ ngOnChangesCount }} |
+               firstChangesCount: {{ firstChangesCount }} |
+               initialValue: {{ initialValue }}`
+           })
+           class Ng2Component implements OnChanges {
+             ngOnChangesCount = 0;
+             firstChangesCount = 0;
+             initialValue: string;
+             @Input() foo: string;
+
+             ngOnChanges(changes: SimpleChanges) {
+               this.ngOnChangesCount++;
+
+               if (this.ngOnChangesCount === 1) {
+                 this.initialValue = this.foo;
+               }
+
+               if (changes['foo'] && changes['foo'].isFirstChange()) {
+                 this.firstChangesCount++;
+               }
+             }
+           }
+
+           @NgModule({imports: [BrowserModule], declarations: [Ng2Component]})
+           class Ng2Module {
+           }
+
+           const ng1Module = angular.module('ng1', []).directive(
+               'ng2', adapter.downgradeNg2Component(Ng2Component));
+
+           const element = html(`
+             <ng2 [foo]="'foo'"></ng2>
+             <ng2 foo="bar"></ng2>
+             <ng2 [foo]="'baz'" ng-if="true"></ng2>
+             <ng2 foo="qux" ng-if="true"></ng2>
+           `);
+
+           adapter.bootstrap(element, ['ng1']).ready(ref => {
+             const nodes = element.querySelectorAll('ng2');
+             const expectedTextWith = (value: string) =>
+                 `ngOnChangesCount: 1 | firstChangesCount: 1 | initialValue: ${value}`;
+
+             expect(multiTrim(nodes[0].textContent)).toBe(expectedTextWith('foo'));
+             expect(multiTrim(nodes[1].textContent)).toBe(expectedTextWith('bar'));
+             expect(multiTrim(nodes[2].textContent)).toBe(expectedTextWith('baz'));
+             expect(multiTrim(nodes[3].textContent)).toBe(expectedTextWith('qux'));
+
+             ref.dispose();
+           });
+         }));
+
       it('should bind to ng-model', async(() => {
            const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
            const ng1Module = angular.module('ng1', []);
@@ -421,9 +478,12 @@ export function main() {
            class Ng2 {
              private _value: any = '';
              private _onChangeCallback: (_: any) => void = () => {};
+             private _onTouchedCallback: () => void = () => {};
              constructor() { ng2Instance = this; }
              writeValue(value: any) { this._value = value; }
              registerOnChange(fn: any) { this._onChangeCallback = fn; }
+             registerOnTouched(fn: any) { this._onTouchedCallback = fn; }
+             doTouch() { this._onTouchedCallback(); }
              doChange(newValue: string) {
                this._value = newValue;
                this._onChangeCallback(newValue);
@@ -452,6 +512,13 @@ export function main() {
              expect($rootScope.modelA).toBe('C');
              expect(multiTrim(document.body.textContent)).toEqual('C | C');
 
+             const downgradedElement = <Element>document.body.querySelector('ng2');
+             expect(downgradedElement.classList.contains('ng-touched')).toBe(false);
+
+             ng2Instance.doTouch();
+             $rootScope.$apply();
+             expect(downgradedElement.classList.contains('ng-touched')).toBe(true);
+
              ref.dispose();
            });
          }));
@@ -599,7 +666,7 @@ export function main() {
            ng1Module.directive('rootComponent', adapter.downgradeNg2Component(RootComponent));
 
            document.body.innerHTML = '<root-component></root-component>';
-           adapter.bootstrap(document.body.firstElementChild, ['myExample']).ready((ref) => {
+           adapter.bootstrap(document.body.firstElementChild !, ['myExample']).ready((ref) => {
              expect(multiTrim(document.body.textContent)).toEqual('It works!');
              ref.dispose();
            });
@@ -607,22 +674,268 @@ export function main() {
     });
 
     describe('upgrade ng1 component', () => {
+      it('should support `@` bindings', fakeAsync(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'Inside: {{ $ctrl.inputA }}, {{ $ctrl.inputB }}',
+             bindings: {inputA: '@inputAttrA', inputB: '@'}
+           };
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+               <ng1 inputAttrA="{{ dataA }}" inputB="{{ dataB }}"></ng1>
+               | Outside: {{ dataA }}, {{ dataB }}
+             `
+           })
+           class Ng2Component {
+             dataA = 'foo';
+             dataB = 'bar';
+
+             constructor() { ng2ComponentInstance = this; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
+             imports: [BrowserModule]
+           })
+           class Ng2Module {
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           adapter.bootstrap(element, ['ng1Module']).ready(ref => {
+             const ng1 = element.querySelector('ng1') !;
+             const ng1Controller = angular.element(ng1).controller !('ng1');
+
+             expect(multiTrim(element.textContent)).toBe('Inside: foo, bar | Outside: foo, bar');
+
+             ng1Controller.inputA = 'baz';
+             ng1Controller.inputB = 'qux';
+             $digest(ref);
+
+             expect(multiTrim(element.textContent)).toBe('Inside: baz, qux | Outside: foo, bar');
+
+             ng2ComponentInstance.dataA = 'foo2';
+             ng2ComponentInstance.dataB = 'bar2';
+             $digest(ref);
+
+             expect(multiTrim(element.textContent))
+                 .toBe('Inside: foo2, bar2 | Outside: foo2, bar2');
+
+             ref.dispose();
+           });
+         }));
+
+      it('should support `<` bindings', fakeAsync(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'Inside: {{ $ctrl.inputA.value }}, {{ $ctrl.inputB.value }}',
+             bindings: {inputA: '<inputAttrA', inputB: '<'}
+           };
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+               <ng1 [inputAttrA]="dataA" [inputB]="dataB"></ng1>
+               | Outside: {{ dataA.value }}, {{ dataB.value }}
+             `
+           })
+           class Ng2Component {
+             dataA = {value: 'foo'};
+             dataB = {value: 'bar'};
+
+             constructor() { ng2ComponentInstance = this; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
+             imports: [BrowserModule]
+           })
+           class Ng2Module {
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           adapter.bootstrap(element, ['ng1Module']).ready(ref => {
+             const ng1 = element.querySelector('ng1') !;
+             const ng1Controller = angular.element(ng1).controller !('ng1');
+
+             expect(multiTrim(element.textContent)).toBe('Inside: foo, bar | Outside: foo, bar');
+
+             ng1Controller.inputA = {value: 'baz'};
+             ng1Controller.inputB = {value: 'qux'};
+             $digest(ref);
+
+             expect(multiTrim(element.textContent)).toBe('Inside: baz, qux | Outside: foo, bar');
+
+             ng2ComponentInstance.dataA = {value: 'foo2'};
+             ng2ComponentInstance.dataB = {value: 'bar2'};
+             $digest(ref);
+
+             expect(multiTrim(element.textContent))
+                 .toBe('Inside: foo2, bar2 | Outside: foo2, bar2');
+
+             ref.dispose();
+           });
+         }));
+
+      it('should support `=` bindings', fakeAsync(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'Inside: {{ $ctrl.inputA.value }}, {{ $ctrl.inputB.value }}',
+             bindings: {inputA: '=inputAttrA', inputB: '='}
+           };
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+               <ng1 [(inputAttrA)]="dataA" [(inputB)]="dataB"></ng1>
+               | Outside: {{ dataA.value }}, {{ dataB.value }}
+             `
+           })
+           class Ng2Component {
+             dataA = {value: 'foo'};
+             dataB = {value: 'bar'};
+
+             constructor() { ng2ComponentInstance = this; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
+             imports: [BrowserModule]
+           })
+           class Ng2Module {
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           adapter.bootstrap(element, ['ng1Module']).ready(ref => {
+             const ng1 = element.querySelector('ng1') !;
+             const ng1Controller = angular.element(ng1).controller !('ng1');
+
+             expect(multiTrim(element.textContent)).toBe('Inside: foo, bar | Outside: foo, bar');
+
+             ng1Controller.inputA = {value: 'baz'};
+             ng1Controller.inputB = {value: 'qux'};
+             $digest(ref);
+
+             expect(multiTrim(element.textContent)).toBe('Inside: baz, qux | Outside: baz, qux');
+
+             ng2ComponentInstance.dataA = {value: 'foo2'};
+             ng2ComponentInstance.dataB = {value: 'bar2'};
+             $digest(ref);
+
+             expect(multiTrim(element.textContent))
+                 .toBe('Inside: foo2, bar2 | Outside: foo2, bar2');
+
+             ref.dispose();
+           });
+         }));
+
+      it('should support `&` bindings', fakeAsync(() => {
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'Inside: -',
+             bindings: {outputA: '&outputAttrA', outputB: '&'}
+           };
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+               <ng1 (outputAttrA)="dataA = $event" (outputB)="dataB = $event"></ng1>
+               | Outside: {{ dataA }}, {{ dataB }}
+             `
+           })
+           class Ng2Component {
+             dataA = 'foo';
+             dataB = 'bar';
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+           // Define `Ng2Module`
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
+             imports: [BrowserModule]
+           })
+           class Ng2Module {
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           adapter.bootstrap(element, ['ng1Module']).ready(ref => {
+             const ng1 = element.querySelector('ng1') !;
+             const ng1Controller = angular.element(ng1).controller !('ng1');
+
+             expect(multiTrim(element.textContent)).toBe('Inside: - | Outside: foo, bar');
+
+             ng1Controller.outputA('baz');
+             ng1Controller.outputB('qux');
+             $digest(ref);
+
+             expect(multiTrim(element.textContent)).toBe('Inside: - | Outside: baz, qux');
+
+             ref.dispose();
+           });
+         }));
+
       it('should bind properties, events', async(() => {
            const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
            const ng1Module = angular.module('ng1', []);
 
            const ng1 = () => {
              return {
-               template: 'Hello {{fullName}}; A: {{dataA}}; B: {{dataB}}; C: {{modelC}}; | ',
+               template: 'Hello {{fullName}}; A: {{modelA}}; B: {{modelB}}; C: {{modelC}}; | ',
                scope: {fullName: '@', modelA: '=dataA', modelB: '=dataB', modelC: '=', event: '&'},
                link: function(scope: any) {
-                 scope.$watch('dataB', (v: string) => {
+                 scope.$watch('modelB', (v: string) => {
                    if (v == 'Savkin') {
-                     scope.dataB = 'SAVKIN';
+                     scope.modelB = 'SAVKIN';
                      scope.event('WORKS');
 
                      // Should not update because [model-a] is uni directional
-                     scope.dataA = 'VICTOR';
+                     scope.modelA = 'VICTOR';
                    }
                  });
                }
@@ -633,9 +946,9 @@ export function main() {
                Component({
                  selector: 'ng2',
                  template:
-                     '<ng1 fullName="{{last}}, {{first}}, {{city}}" [modelA]="first" [(modelB)]="last" [modelC]="city" ' +
+                     '<ng1 fullName="{{last}}, {{first}}, {{city}}" [dataA]="first" [(dataB)]="last" [modelC]="city" ' +
                      '(event)="event=$event"></ng1>' +
-                     '<ng1 fullName="{{\'TEST\'}}" modelA="First" modelB="Last" modelC="City"></ng1>' +
+                     '<ng1 fullName="{{\'TEST\'}}" dataA="First" dataB="Last" modelC="City"></ng1>' +
                      '{{event}}-{{last}}, {{first}}, {{city}}'
                }).Class({
                  constructor: function() {
@@ -671,15 +984,15 @@ export function main() {
 
            const ng1 = () => {
              return {
-               template: 'Hello; A: {{dataA}}; B: {{modelB}}; | ',
+               template: 'Hello; A: {{modelA}}; B: {{modelB}}; | ',
                scope: {modelA: '=?dataA', modelB: '=?'}
              };
            };
            ng1Module.directive('ng1', ng1);
            const Ng2 = Component({
                          selector: 'ng2',
-                         template: '<ng1 [modelA]="first" [modelB]="last"></ng1>' +
-                             '<ng1 modelA="First" modelB="Last"></ng1>' +
+                         template: '<ng1 [dataA]="first" [modelB]="last"></ng1>' +
+                             '<ng1 dataA="First" modelB="Last"></ng1>' +
                              '<ng1></ng1>' +
                              '<ng1></ng1>'
                        }).Class({
@@ -1671,6 +1984,633 @@ export function main() {
            }));
       });
 
+      describe('linking', () => {
+        it('should run the pre-linking after instantiating the controller', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const log: string[] = [];
+
+             // Define `ng1Directive`
+             const ng1Directive: angular.IDirective = {
+               template: '',
+               link: {pre: () => log.push('ng1-pre')},
+               controller: class {constructor() { log.push('ng1-ctrl'); }}
+             };
+
+             // Define `Ng2Component`
+             @Component({selector: 'ng2', template: '<ng1></ng1>'})
+             class Ng2Component {
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1', [])
+                                   .directive('ng1', () => ng1Directive)
+                                   .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             adapter.bootstrap(element, ['ng1']).ready(() => {
+               expect(log).toEqual(['ng1-ctrl', 'ng1-pre']);
+             });
+           }));
+
+        it('should run the pre-linking function before linking', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const log: string[] = [];
+
+             // Define `ng1Directive`
+             const ng1DirectiveA: angular.IDirective = {
+               template: '<ng1-b></ng1-b>',
+               link: {pre: () => log.push('ng1A-pre')}
+             };
+
+             const ng1DirectiveB: angular.IDirective = {link: () => log.push('ng1B-post')};
+
+             // Define `Ng2Component`
+             @Component({selector: 'ng2', template: '<ng1-a></ng1-a>'})
+             class Ng2Component {
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1', [])
+                                   .directive('ng1A', () => ng1DirectiveA)
+                                   .directive('ng1B', () => ng1DirectiveB)
+                                   .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1A'), Ng2Component],
+               schemas: [NO_ERRORS_SCHEMA]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             adapter.bootstrap(element, ['ng1']).ready(() => {
+               expect(log).toEqual(['ng1A-pre', 'ng1B-post']);
+             });
+           }));
+
+        it('should run the post-linking function after linking (link: object)', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const log: string[] = [];
+
+             // Define `ng1Directive`
+             const ng1DirectiveA: angular.IDirective = {
+               template: '<ng1-b></ng1-b>',
+               link: {post: () => log.push('ng1A-post')}
+             };
+
+             const ng1DirectiveB: angular.IDirective = {link: () => log.push('ng1B-post')};
+
+             // Define `Ng2Component`
+             @Component({selector: 'ng2', template: '<ng1-a></ng1-a>'})
+             class Ng2Component {
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1', [])
+                                   .directive('ng1A', () => ng1DirectiveA)
+                                   .directive('ng1B', () => ng1DirectiveB)
+                                   .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1A'), Ng2Component],
+               schemas: [NO_ERRORS_SCHEMA]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             adapter.bootstrap(element, ['ng1']).ready(() => {
+               expect(log).toEqual(['ng1B-post', 'ng1A-post']);
+             });
+           }));
+
+        it('should run the post-linking function after linking (link: function)', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const log: string[] = [];
+
+             // Define `ng1Directive`
+             const ng1DirectiveA: angular.IDirective = {
+               template: '<ng1-b></ng1-b>',
+               link: () => log.push('ng1A-post')
+             };
+
+             const ng1DirectiveB: angular.IDirective = {link: () => log.push('ng1B-post')};
+
+             // Define `Ng2Component`
+             @Component({selector: 'ng2', template: '<ng1-a></ng1-a>'})
+             class Ng2Component {
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1', [])
+                                   .directive('ng1A', () => ng1DirectiveA)
+                                   .directive('ng1B', () => ng1DirectiveB)
+                                   .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1A'), Ng2Component],
+               schemas: [NO_ERRORS_SCHEMA]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             adapter.bootstrap(element, ['ng1']).ready(() => {
+               expect(log).toEqual(['ng1B-post', 'ng1A-post']);
+             });
+           }));
+
+        it('should run the post-linking function before `$postLink`', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             const log: string[] = [];
+
+             // Define `ng1Directive`
+             const ng1Directive: angular.IDirective = {
+               template: '',
+               link: () => log.push('ng1-post'),
+               controller: class {$postLink() { log.push('ng1-$post'); }}
+             };
+
+             // Define `Ng2Component`
+             @Component({selector: 'ng2', template: '<ng1></ng1>'})
+             class Ng2Component {
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1', [])
+                                   .directive('ng1', () => ng1Directive)
+                                   .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             adapter.bootstrap(element, ['ng1']).ready(() => {
+               expect(log).toEqual(['ng1-post', 'ng1-$post']);
+             });
+           }));
+      });
+
+      describe('transclusion', () => {
+        it('should support single-slot transclusion', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             let ng2ComponentAInstance: Ng2ComponentA;
+             let ng2ComponentBInstance: Ng2ComponentB;
+
+             // Define `ng1Component`
+             const ng1Component: angular.IComponent = {
+               template: 'ng1(<div ng-transclude></div>)',
+               transclude: true
+             };
+
+             // Define `Ng2Component`
+             @Component({
+               selector: 'ng2A',
+               template: 'ng2A(<ng1>{{ value }} | <ng2B *ngIf="showB"></ng2B></ng1>)'
+             })
+             class Ng2ComponentA {
+               value = 'foo';
+               showB = false;
+               constructor() { ng2ComponentAInstance = this; }
+             }
+
+             @Component({selector: 'ng2B', template: 'ng2B({{ value }})'})
+             class Ng2ComponentB {
+               value = 'bar';
+               constructor() { ng2ComponentBInstance = this; }
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1Module', [])
+                                   .component('ng1', ng1Component)
+                                   .directive('ng2A', adapter.downgradeNg2Component(Ng2ComponentA));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1'), Ng2ComponentA, Ng2ComponentB]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2-a></ng2-a>`);
+
+             adapter.bootstrap(element, ['ng1Module']).ready((ref) => {
+               expect(multiTrim(element.textContent)).toBe('ng2A(ng1(foo | ))');
+
+               ng2ComponentAInstance.value = 'baz';
+               ng2ComponentAInstance.showB = true;
+               $digest(ref);
+
+               expect(multiTrim(element.textContent)).toBe('ng2A(ng1(baz | ng2B(bar)))');
+
+               ng2ComponentBInstance.value = 'qux';
+               $digest(ref);
+
+               expect(multiTrim(element.textContent)).toBe('ng2A(ng1(baz | ng2B(qux)))');
+             });
+           }));
+
+        it('should support single-slot transclusion with fallback content', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             let ng1ControllerInstances: any[] = [];
+             let ng2ComponentInstance: Ng2Component;
+
+             // Define `ng1Component`
+             const ng1Component: angular.IComponent = {
+               template: 'ng1(<div ng-transclude>{{ $ctrl.value }}</div>)',
+               transclude: true,
+               controller: class {
+                 value = 'from-ng1'; constructor() { ng1ControllerInstances.push(this); }
+               }
+             };
+
+             // Define `Ng2Component`
+             @Component({
+               selector: 'ng2',
+               template: `
+                ng2(
+                  <ng1><div>{{ value }}</div></ng1> |
+
+                  <!-- Interpolation-only content should still be detected as transcluded content. -->
+                  <ng1>{{ value }}</ng1> |
+
+                  <ng1></ng1>
+                )`
+             })
+             class Ng2Component {
+               value = 'from-ng2';
+               constructor() { ng2ComponentInstance = this; }
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1Module', [])
+                                   .component('ng1', ng1Component)
+                                   .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             adapter.bootstrap(element, ['ng1Module']).ready(ref => {
+               expect(multiTrim(element.textContent, true))
+                   .toBe('ng2(ng1(from-ng2)|ng1(from-ng2)|ng1(from-ng1))');
+
+               ng1ControllerInstances.forEach(ctrl => ctrl.value = 'ng1-foo');
+               ng2ComponentInstance.value = 'ng2-bar';
+               $digest(ref);
+
+               expect(multiTrim(element.textContent, true))
+                   .toBe('ng2(ng1(ng2-bar)|ng1(ng2-bar)|ng1(ng1-foo))');
+             });
+           }));
+
+        it('should support multi-slot transclusion', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             let ng2ComponentInstance: Ng2Component;
+
+             // Define `ng1Component`
+             const ng1Component: angular.IComponent = {
+               template:
+                   'ng1(x(<div ng-transclude="slotX"></div>) | y(<div ng-transclude="slotY"></div>))',
+               transclude: {slotX: 'contentX', slotY: 'contentY'}
+             };
+
+             // Define `Ng2Component`
+             @Component({
+               selector: 'ng2',
+               template: `
+                ng2(
+                  <ng1>
+                    <content-x>{{ x }}1</content-x>
+                    <content-y>{{ y }}1</content-y>
+                    <content-x>{{ x }}2</content-x>
+                    <content-y>{{ y }}2</content-y>
+                  </ng1>
+                )`
+             })
+             class Ng2Component {
+               x = 'foo';
+               y = 'bar';
+               constructor() { ng2ComponentInstance = this; }
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1Module', [])
+                                   .component('ng1', ng1Component)
+                                   .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
+               schemas: [NO_ERRORS_SCHEMA]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             adapter.bootstrap(element, ['ng1Module']).ready(ref => {
+               expect(multiTrim(element.textContent, true))
+                   .toBe('ng2(ng1(x(foo1foo2)|y(bar1bar2)))');
+
+               ng2ComponentInstance.x = 'baz';
+               ng2ComponentInstance.y = 'qux';
+               $digest(ref);
+
+               expect(multiTrim(element.textContent, true))
+                   .toBe('ng2(ng1(x(baz1baz2)|y(qux1qux2)))');
+             });
+           }));
+
+        it('should support default slot (with fallback content)', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             let ng1ControllerInstances: any[] = [];
+             let ng2ComponentInstance: Ng2Component;
+
+             // Define `ng1Component`
+             const ng1Component: angular.IComponent = {
+               template: 'ng1(default(<div ng-transclude="">fallback-{{ $ctrl.value }}</div>))',
+               transclude: {slotX: 'contentX', slotY: 'contentY'},
+               controller:
+                   class {value = 'ng1'; constructor() { ng1ControllerInstances.push(this); }}
+             };
+
+             // Define `Ng2Component`
+             @Component({
+               selector: 'ng2',
+               template: `
+                ng2(
+                  <ng1>
+                    ({{ x }})
+                    <content-x>ignored x</content-x>
+                    {{ x }}-<span>{{ y }}</span>
+                    <content-y>ignored y</content-y>
+                    <span>({{ y }})</span>
+                  </ng1> |
+
+                  <!--
+                    Remove any whitespace, because in AngularJS versions prior to 1.6
+                    even whitespace counts as transcluded content.
+                  -->
+                  <ng1><content-x>ignored x</content-x><content-y>ignored y</content-y></ng1> |
+
+                  <!--
+                    Interpolation-only content should still be detected as transcluded content.
+                  -->
+                  <ng1>{{ x }}<content-x>ignored x</content-x>{{ y + x }}<content-y>ignored y</content-y>{{ y }}</ng1>
+                )`
+             })
+             class Ng2Component {
+               x = 'foo';
+               y = 'bar';
+               constructor() { ng2ComponentInstance = this; }
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1Module', [])
+                                   .component('ng1', ng1Component)
+                                   .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
+               schemas: [NO_ERRORS_SCHEMA]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             adapter.bootstrap(element, ['ng1Module']).ready(ref => {
+               expect(multiTrim(element.textContent, true))
+                   .toBe(
+                       'ng2(ng1(default((foo)foo-bar(bar)))|ng1(default(fallback-ng1))|ng1(default(foobarfoobar)))');
+
+               ng1ControllerInstances.forEach(ctrl => ctrl.value = 'ng1-plus');
+               ng2ComponentInstance.x = 'baz';
+               ng2ComponentInstance.y = 'qux';
+               $digest(ref);
+
+               expect(multiTrim(element.textContent, true))
+                   .toBe(
+                       'ng2(ng1(default((baz)baz-qux(qux)))|ng1(default(fallback-ng1-plus))|ng1(default(bazquxbazqux)))');
+             });
+           }));
+
+        it('should support optional transclusion slots (with fallback content)', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             let ng1ControllerInstances: any[] = [];
+             let ng2ComponentInstance: Ng2Component;
+
+             // Define `ng1Component`
+             const ng1Component: angular.IComponent = {
+               template: `
+                ng1(
+                  x(<div ng-transclude="slotX">{{ $ctrl.x }}</div>) |
+                  y(<div ng-transclude="slotY">{{ $ctrl.y }}</div>)
+                )`,
+               transclude: {slotX: '?contentX', slotY: '?contentY'},
+               controller: class {
+                 x = 'ng1X'; y = 'ng1Y'; constructor() { ng1ControllerInstances.push(this); }
+               }
+             };
+
+             // Define `Ng2Component`
+             @Component({
+               selector: 'ng2',
+               template: `
+                ng2(
+                  <ng1><content-x>{{ x }}</content-x></ng1> |
+                  <ng1><content-y>{{ y }}</content-y></ng1>
+                )`
+             })
+             class Ng2Component {
+               x = 'ng2X';
+               y = 'ng2Y';
+               constructor() { ng2ComponentInstance = this; }
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1Module', [])
+                                   .component('ng1', ng1Component)
+                                   .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
+               schemas: [NO_ERRORS_SCHEMA]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             adapter.bootstrap(element, ['ng1Module']).ready(ref => {
+               expect(multiTrim(element.textContent, true))
+                   .toBe('ng2(ng1(x(ng2X)|y(ng1Y))|ng1(x(ng1X)|y(ng2Y)))');
+
+               ng1ControllerInstances.forEach(ctrl => {
+                 ctrl.x = 'ng1X-foo';
+                 ctrl.y = 'ng1Y-bar';
+               });
+               ng2ComponentInstance.x = 'ng2X-baz';
+               ng2ComponentInstance.y = 'ng2Y-qux';
+               $digest(ref);
+
+               expect(multiTrim(element.textContent, true))
+                   .toBe('ng2(ng1(x(ng2X-baz)|y(ng1Y-bar))|ng1(x(ng1X-foo)|y(ng2Y-qux)))');
+             });
+           }));
+
+        it('should throw if a non-optional slot is not filled', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             let errorMessage: string;
+
+             // Define `ng1Component`
+             const ng1Component: angular.IComponent = {
+               template: '',
+               transclude: {slotX: '?contentX', slotY: 'contentY'}
+             };
+
+             // Define `Ng2Component`
+             @Component({selector: 'ng2', template: '<ng1></ng1>'})
+             class Ng2Component {
+             }
+
+             // Define `ng1Module`
+             const ng1Module =
+                 angular.module('ng1Module', [])
+                     .value('$exceptionHandler', (error: Error) => errorMessage = error.message)
+                     .component('ng1', ng1Component)
+                     .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             adapter.bootstrap(element, ['ng1Module']).ready(ref => {
+               expect(errorMessage)
+                   .toContain('Required transclusion slot \'slotY\' on directive: ng1');
+             });
+           }));
+
+        it('should support structural directives in transcluded content', async(() => {
+             const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+             let ng2ComponentInstance: Ng2Component;
+
+             // Define `ng1Component`
+             const ng1Component: angular.IComponent = {
+               template:
+                   'ng1(x(<div ng-transclude="slotX"></div>) | default(<div ng-transclude=""></div>))',
+               transclude: {slotX: 'contentX'}
+             };
+
+             // Define `Ng2Component`
+             @Component({
+               selector: 'ng2',
+               template: `
+                ng2(
+                  <ng1>
+                    <content-x><div *ngIf="show">{{ x }}1</div></content-x>
+                    <div *ngIf="!show">{{ y }}1</div>
+                    <content-x><div *ngIf="!show">{{ x }}2</div></content-x>
+                    <div *ngIf="show">{{ y }}2</div>
+                  </ng1>
+                )`
+             })
+             class Ng2Component {
+               x = 'foo';
+               y = 'bar';
+               show = true;
+               constructor() { ng2ComponentInstance = this; }
+             }
+
+             // Define `ng1Module`
+             const ng1Module = angular.module('ng1Module', [])
+                                   .component('ng1', ng1Component)
+                                   .directive('ng2', adapter.downgradeNg2Component(Ng2Component));
+
+             // Define `Ng2Module`
+             @NgModule({
+               imports: [BrowserModule],
+               declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
+               schemas: [NO_ERRORS_SCHEMA]
+             })
+             class Ng2Module {
+             }
+
+             // Bootstrap
+             const element = html(`<ng2></ng2>`);
+
+             adapter.bootstrap(element, ['ng1Module']).ready(ref => {
+               expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(foo1)|default(bar2)))');
+
+               ng2ComponentInstance.x = 'baz';
+               ng2ComponentInstance.y = 'qux';
+               ng2ComponentInstance.show = false;
+               $digest(ref);
+
+               expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(baz2)|default(qux1)))');
+
+               ng2ComponentInstance.show = true;
+               $digest(ref);
+
+               expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(baz1)|default(qux2)))');
+             });
+           }));
+      });
+
       it('should bind input properties (<) of components', async(() => {
            const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
            const ng1Module = angular.module('ng1', []);
@@ -1873,7 +2813,7 @@ export function main() {
 
            document.body.innerHTML = '<ng2 name="World">project</ng2>';
 
-           adapter.bootstrap(document.body.firstElementChild, ['myExample']).ready((ref) => {
+           adapter.bootstrap(document.body.firstElementChild !, ['myExample']).ready((ref) => {
              expect(multiTrim(document.body.textContent))
                  .toEqual('ng2[ng1[Hello World!](transclude)](project)');
              ref.dispose();
diff --git a/packages/upgrade/test/static/angular1_providers_spec.ts b/packages/upgrade/test/static/angular1_providers_spec.ts
index 94ac3068eb..85c3d98d9e 100644
--- a/packages/upgrade/test/static/angular1_providers_spec.ts
+++ b/packages/upgrade/test/static/angular1_providers_spec.ts
@@ -28,12 +28,16 @@ export function main() {
         expect(injector).toBe(mockInjector);
       });
 
+      it('should throw if the injector value has not been set yet', () => {
+        const mockInjector = {get: () => {}, has: () => false};
+        expect(injectorFactory).toThrowError();
+      });
+
       it('should unset the injector after the first call (to prevent memory leaks)', () => {
         const mockInjector = {get: () => {}, has: () => false};
         setTempInjectorRef(mockInjector);
         injectorFactory();
-        const injector = injectorFactory();
-        expect(injector).toBe(null);
+        expect(injectorFactory).toThrowError();  // ...because it has been unset
       });
     });
 
diff --git a/packages/upgrade/test/static/integration/change_detection_spec.ts b/packages/upgrade/test/static/integration/change_detection_spec.ts
index 9f43a3b0bc..3ab70f5718 100644
--- a/packages/upgrade/test/static/integration/change_detection_spec.ts
+++ b/packages/upgrade/test/static/integration/change_detection_spec.ts
@@ -21,8 +21,8 @@ export function main() {
     afterEach(() => destroyPlatform());
 
     it('should interleave scope and component expressions', async(() => {
-         const log: any[] /** TODO #9100 */ = [];
-         const l = (value: any /** TODO #9100 */) => {
+         const log: string[] = [];
+         const l = (value: string) => {
            log.push(value);
            return value + ';';
          };
@@ -46,8 +46,7 @@ export function main() {
            template: `{{l('2A')}}<ng1a></ng1a>{{l('2B')}}<ng1b></ng1b>{{l('2C')}}`
          })
          class Ng2Component {
-           l: (value: any) => string;
-           constructor() { this.l = l; }
+           l = l;
          }
 
          @NgModule({
@@ -63,7 +62,7 @@ export function main() {
                                .directive('ng1a', () => ({template: '{{ l(\'ng1a\') }}'}))
                                .directive('ng1b', () => ({template: '{{ l(\'ng1b\') }}'}))
                                .directive('ng2', downgradeComponent({component: Ng2Component}))
-                               .run(($rootScope: any /** TODO #9100 */) => {
+                               .run(($rootScope: angular.IRootScopeService) => {
                                  $rootScope.l = l;
                                  $rootScope.reset = () => log.length = 0;
                                });
@@ -72,7 +71,6 @@ export function main() {
              html('<div>{{reset(); l(\'1A\');}}<ng2>{{l(\'1B\')}}</ng2>{{l(\'1C\')}}</div>');
          bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
            expect(document.body.textContent).toEqual('1A;2A;ng1a;2B;ng1b;2C;1C;');
-           // https://github.com/angular/angular.js/issues/12983
            expect(log).toEqual(['1A', '1C', '2A', '2B', '2C', 'ng1a', 'ng1b']);
          });
        }));
@@ -88,7 +86,7 @@ export function main() {
 
          @Component({
            selector: 'my-child',
-           template: '<div>{{valueFromPromise}}',
+           template: '<div>{{ valueFromPromise }}</div>',
          })
          class ChildComponent {
            valueFromPromise: number;
diff --git a/packages/upgrade/test/static/integration/downgrade_component_spec.ts b/packages/upgrade/test/static/integration/downgrade_component_spec.ts
index db801f458d..496e7faf43 100644
--- a/packages/upgrade/test/static/integration/downgrade_component_spec.ts
+++ b/packages/upgrade/test/static/integration/downgrade_component_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Compiler, Component, ComponentFactoryResolver, EventEmitter, Injector, NgModule, NgModuleRef, OnChanges, OnDestroy, SimpleChanges, destroyPlatform} from '@angular/core';
+import {ChangeDetectorRef, Compiler, Component, ComponentFactoryResolver, EventEmitter, Injector, Input, NgModule, NgModuleRef, OnChanges, OnDestroy, SimpleChanges, destroyPlatform} from '@angular/core';
 import {async} from '@angular/core/testing';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@@ -148,6 +148,190 @@ export function main() {
          });
        }));
 
+    it('should run change-detection on every digest (by default)', async(() => {
+         let ng2Component: Ng2Component;
+
+         @Component({selector: 'ng2', template: '{{ value1 }} | {{ value2 }}'})
+         class Ng2Component {
+           @Input() value1 = -1;
+           @Input() value2 = -1;
+
+           constructor() { ng2Component = this; }
+         }
+
+         @NgModule({
+           imports: [BrowserModule, UpgradeModule],
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module = angular.module('ng1', [])
+                               .directive('ng2', downgradeComponent({component: Ng2Component}))
+                               .run(($rootScope: angular.IRootScopeService) => {
+                                 $rootScope.value1 = 0;
+                                 $rootScope.value2 = 0;
+                               });
+
+         const element = html('<ng2 [value1]="value1" value2="{{ value2 }}"></ng2>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           const $rootScope = upgrade.$injector.get('$rootScope') as angular.IRootScopeService;
+
+           expect(element.textContent).toBe('0 | 0');
+
+           // Digest should invoke CD
+           $rootScope.$digest();
+           $rootScope.$digest();
+           expect(element.textContent).toBe('0 | 0');
+
+           // Internal changes should be detected on digest
+           ng2Component.value1 = 1;
+           ng2Component.value2 = 2;
+           $rootScope.$digest();
+           expect(element.textContent).toBe('1 | 2');
+
+           // Digest should propagate change in prop-bound input
+           $rootScope.$apply('value1 = 3');
+           expect(element.textContent).toBe('3 | 2');
+
+           // Digest should propagate change in attr-bound input
+           ng2Component.value1 = 4;
+           $rootScope.$apply('value2 = 5');
+           expect(element.textContent).toBe('4 | 5');
+
+           // Digest should propagate changes that happened before the digest
+           $rootScope.value1 = 6;
+           expect(element.textContent).toBe('4 | 5');
+
+           $rootScope.$digest();
+           expect(element.textContent).toBe('6 | 5');
+         });
+       }));
+
+    it('should not run change-detection on every digest when opted out', async(() => {
+         let ng2Component: Ng2Component;
+
+         @Component({selector: 'ng2', template: '{{ value1 }} | {{ value2 }}'})
+         class Ng2Component {
+           @Input() value1 = -1;
+           @Input() value2 = -1;
+
+           constructor() { ng2Component = this; }
+         }
+
+         @NgModule({
+           imports: [BrowserModule, UpgradeModule],
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module =
+             angular.module('ng1', [])
+                 .directive(
+                     'ng2', downgradeComponent({component: Ng2Component, propagateDigest: false}))
+                 .run(($rootScope: angular.IRootScopeService) => {
+                   $rootScope.value1 = 0;
+                   $rootScope.value2 = 0;
+                 });
+
+         const element = html('<ng2 [value1]="value1" value2="{{ value2 }}"></ng2>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           const $rootScope = upgrade.$injector.get('$rootScope') as angular.IRootScopeService;
+
+           expect(element.textContent).toBe('0 | 0');
+
+           // Digest should not invoke CD
+           $rootScope.$digest();
+           $rootScope.$digest();
+           expect(element.textContent).toBe('0 | 0');
+
+           // Digest should not invoke CD, even if component values have changed (internally)
+           ng2Component.value1 = 1;
+           ng2Component.value2 = 2;
+           $rootScope.$digest();
+           expect(element.textContent).toBe('0 | 0');
+
+           // Digest should invoke CD, if prop-bound input has changed
+           $rootScope.$apply('value1 = 3');
+           expect(element.textContent).toBe('3 | 2');
+
+           // Digest should invoke CD, if attr-bound input has changed
+           ng2Component.value1 = 4;
+           $rootScope.$apply('value2 = 5');
+           expect(element.textContent).toBe('4 | 5');
+
+           // Digest should invoke CD, if input has changed before the digest
+           $rootScope.value1 = 6;
+           $rootScope.$digest();
+           expect(element.textContent).toBe('6 | 5');
+         });
+       }));
+
+    it('should initialize inputs in time for `ngOnChanges`', async(() => {
+         @Component({
+           selector: 'ng2',
+           template: `
+             ngOnChangesCount: {{ ngOnChangesCount }} |
+             firstChangesCount: {{ firstChangesCount }} |
+             initialValue: {{ initialValue }}`
+         })
+         class Ng2Component implements OnChanges {
+           ngOnChangesCount = 0;
+           firstChangesCount = 0;
+           initialValue: string;
+           @Input() foo: string;
+
+           ngOnChanges(changes: SimpleChanges) {
+             this.ngOnChangesCount++;
+
+             if (this.ngOnChangesCount === 1) {
+               this.initialValue = this.foo;
+             }
+
+             if (changes['foo'] && changes['foo'].isFirstChange()) {
+               this.firstChangesCount++;
+             }
+           }
+         }
+
+         @NgModule({
+           imports: [BrowserModule, UpgradeModule],
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module = angular.module('ng1', []).directive(
+             'ng2', downgradeComponent({component: Ng2Component}));
+
+         const element = html(`
+           <ng2 [foo]="'foo'"></ng2>
+           <ng2 foo="bar"></ng2>
+           <ng2 [foo]="'baz'" ng-if="true"></ng2>
+           <ng2 foo="qux" ng-if="true"></ng2>
+         `);
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           const nodes = element.querySelectorAll('ng2');
+           const expectedTextWith = (value: string) =>
+               `ngOnChangesCount: 1 | firstChangesCount: 1 | initialValue: ${value}`;
+
+           expect(multiTrim(nodes[0].textContent)).toBe(expectedTextWith('foo'));
+           expect(multiTrim(nodes[1].textContent)).toBe(expectedTextWith('bar'));
+           expect(multiTrim(nodes[2].textContent)).toBe(expectedTextWith('baz'));
+           expect(multiTrim(nodes[3].textContent)).toBe(expectedTextWith('qux'));
+         });
+       }));
+
     it('should bind to ng-model', async(() => {
          const ng1Module = angular.module('ng1', []).run(
              ($rootScope: angular.IScope) => { $rootScope['modelA'] = 'A'; });
@@ -157,9 +341,12 @@ export function main() {
          class Ng2 {
            private _value: any = '';
            private _onChangeCallback: (_: any) => void = () => {};
+           private _onTouchedCallback: () => void = () => {};
            constructor() { ng2Instance = this; }
            writeValue(value: any) { this._value = value; }
            registerOnChange(fn: any) { this._onChangeCallback = fn; }
+           registerOnTouched(fn: any) { this._onTouchedCallback = fn; }
+           doTouch() { this._onTouchedCallback(); }
            doChange(newValue: string) {
              this._value = newValue;
              this._onChangeCallback(newValue);
@@ -190,6 +377,13 @@ export function main() {
            ng2Instance.doChange('C');
            expect($rootScope.modelA).toBe('C');
            expect(multiTrim(document.body.textContent)).toEqual('C | C');
+
+           const downgradedElement = <Element>document.body.querySelector('ng2');
+           expect(downgradedElement.classList.contains('ng-touched')).toBe(false);
+
+           ng2Instance.doTouch();
+           $rootScope.$apply();
+           expect(downgradedElement.classList.contains('ng-touched')).toBe(true);
          });
        }));
 
@@ -263,7 +457,7 @@ export function main() {
                              // an ng2 injector so it should use the `moduleInjector` instead.
                              const compiled = $compile('<ng2></ng2>');
                              const template = compiled($scope);
-                             $element.append(template);
+                             $element.append !(template);
                            }
                          };
                        }
@@ -404,7 +598,7 @@ export function main() {
            const modFactory = compiler.compileModuleSync(LazyLoadedModule);
            const childMod = modFactory.create(modInjector);
            const cmpFactory =
-               childMod.componentFactoryResolver.resolveComponentFactory(LazyLoadedComponent);
+               childMod.componentFactoryResolver.resolveComponentFactory(LazyLoadedComponent) !;
            const lazyCmp = cmpFactory.create(componentInjector);
 
            expect(lazyCmp.instance.module).toBe(childMod.injector);
diff --git a/packages/upgrade/test/static/integration/downgrade_module_spec.ts b/packages/upgrade/test/static/integration/downgrade_module_spec.ts
new file mode 100644
index 0000000000..589d3b759e
--- /dev/null
+++ b/packages/upgrade/test/static/integration/downgrade_module_spec.ts
@@ -0,0 +1,372 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, Inject, Injector, Input, NgModule, NgZone, OnChanges, Provider, destroyPlatform} from '@angular/core';
+import {async, fakeAsync, tick} from '@angular/core/testing';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import * as angular from '@angular/upgrade/src/common/angular1';
+import {$ROOT_SCOPE, INJECTOR_KEY, LAZY_MODULE_REF} from '@angular/upgrade/src/common/constants';
+import {LazyModuleRef} from '@angular/upgrade/src/common/util';
+import {downgradeComponent, downgradeModule} from '@angular/upgrade/static';
+
+import {html} from '../test_helpers';
+
+
+export function main() {
+  [true, false].forEach(propagateDigest => {
+    describe(`lazy-load ng2 module (propagateDigest: ${propagateDigest})`, () => {
+
+      beforeEach(() => destroyPlatform());
+
+      it('should support downgrading a component and propagate inputs', async(() => {
+           @Component(
+               {selector: 'ng2A', template: 'a({{ value }}) | <ng2B [value]="value"></ng2B>'})
+           class Ng2AComponent {
+             @Input() value = -1;
+           }
+
+           @Component({selector: 'ng2B', template: 'b({{ value }})'})
+           class Ng2BComponent {
+             @Input() value = -2;
+           }
+
+           @NgModule({
+             declarations: [Ng2AComponent, Ng2BComponent],
+             entryComponents: [Ng2AComponent],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           const bootstrapFn = (extraProviders: Provider[]) =>
+               platformBrowserDynamic(extraProviders).bootstrapModule(Ng2Module);
+           const lazyModuleName = downgradeModule<Ng2Module>(bootstrapFn);
+           const ng1Module =
+               angular.module('ng1', [lazyModuleName])
+                   .directive(
+                       'ng2', downgradeComponent({component: Ng2AComponent, propagateDigest}))
+                   .run(($rootScope: angular.IRootScopeService) => $rootScope.value = 0);
+
+           const element = html('<div><ng2 [value]="value" ng-if="loadNg2"></ng2></div>');
+           const $injector = angular.bootstrap(element, [ng1Module.name]);
+           const $rootScope = $injector.get($ROOT_SCOPE) as angular.IRootScopeService;
+
+           expect(element.textContent).toBe('');
+           expect(() => $injector.get(INJECTOR_KEY)).toThrowError();
+
+           $rootScope.$apply('value = 1');
+           expect(element.textContent).toBe('');
+           expect(() => $injector.get(INJECTOR_KEY)).toThrowError();
+
+           $rootScope.$apply('loadNg2 = true');
+           expect(element.textContent).toBe('');
+           expect(() => $injector.get(INJECTOR_KEY)).toThrowError();
+
+           // Wait for the module to be bootstrapped.
+           setTimeout(() => {
+             expect(() => $injector.get(INJECTOR_KEY)).not.toThrow();
+
+             // Wait for `$evalAsync()` to propagate inputs.
+             setTimeout(() => expect(element.textContent).toBe('a(1) | b(1)'));
+           });
+         }));
+
+      it('should support using an upgraded service', async(() => {
+           class Ng2Service {
+             constructor(@Inject('ng1Value') private ng1Value: string) {}
+             getValue = () => `${this.ng1Value}-bar`;
+           }
+
+           @Component({selector: 'ng2', template: '{{ value }}'})
+           class Ng2Component {
+             value: string;
+             constructor(ng2Service: Ng2Service) { this.value = ng2Service.getValue(); }
+           }
+
+           @NgModule({
+             declarations: [Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule],
+             providers: [
+               Ng2Service,
+               {
+                 provide: 'ng1Value',
+                 useFactory: (i: angular.IInjectorService) => i.get('ng1Value'),
+                 deps: ['$injector'],
+               },
+             ],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           const bootstrapFn = (extraProviders: Provider[]) =>
+               platformBrowserDynamic(extraProviders).bootstrapModule(Ng2Module);
+           const lazyModuleName = downgradeModule<Ng2Module>(bootstrapFn);
+           const ng1Module =
+               angular.module('ng1', [lazyModuleName])
+                   .directive('ng2', downgradeComponent({component: Ng2Component, propagateDigest}))
+                   .value('ng1Value', 'foo');
+
+           const element = html('<div><ng2 ng-if="loadNg2"></ng2></div>');
+           const $injector = angular.bootstrap(element, [ng1Module.name]);
+           const $rootScope = $injector.get($ROOT_SCOPE) as angular.IRootScopeService;
+
+           expect(element.textContent).toBe('');
+           expect(() => $injector.get(INJECTOR_KEY)).toThrowError();
+
+           $rootScope.$apply('loadNg2 = true');
+           expect(element.textContent).toBe('');
+           expect(() => $injector.get(INJECTOR_KEY)).toThrowError();
+
+           // Wait for the module to be bootstrapped.
+           setTimeout(() => {
+             expect(() => $injector.get(INJECTOR_KEY)).not.toThrow();
+
+             // Wait for `$evalAsync()` to propagate inputs.
+             setTimeout(() => expect(element.textContent).toBe('foo-bar'));
+           });
+         }));
+
+      it('should create components inside the Angular zone', async(() => {
+           @Component({selector: 'ng2', template: 'In the zone: {{ inTheZone }}'})
+           class Ng2Component {
+             private inTheZone = false;
+             constructor() { this.inTheZone = NgZone.isInAngularZone(); }
+           }
+
+           @NgModule({
+             declarations: [Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           const bootstrapFn = (extraProviders: Provider[]) =>
+               platformBrowserDynamic(extraProviders).bootstrapModule(Ng2Module);
+           const lazyModuleName = downgradeModule<Ng2Module>(bootstrapFn);
+           const ng1Module =
+               angular.module('ng1', [lazyModuleName])
+                   .directive(
+                       'ng2', downgradeComponent({component: Ng2Component, propagateDigest}));
+
+           const element = html('<ng2></ng2>');
+           angular.bootstrap(element, [ng1Module.name]);
+
+           // Wait for the module to be bootstrapped.
+           setTimeout(() => {
+             // Wait for `$evalAsync()` to propagate inputs.
+             setTimeout(() => expect(element.textContent).toBe('In the zone: true'));
+           });
+         }));
+
+      it('should propagate input changes inside the Angular zone', async(() => {
+           let ng2Component: Ng2Component;
+
+           @Component({selector: 'ng2', template: ''})
+           class Ng2Component implements OnChanges {
+             @Input() attrInput = 'foo';
+             @Input() propInput = 'foo';
+
+             constructor() { ng2Component = this; }
+             ngOnChanges() {}
+           }
+
+           @NgModule({
+             declarations: [Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           const bootstrapFn = (extraProviders: Provider[]) =>
+               platformBrowserDynamic(extraProviders).bootstrapModule(Ng2Module);
+           const lazyModuleName = downgradeModule<Ng2Module>(bootstrapFn);
+           const ng1Module =
+               angular.module('ng1', [lazyModuleName])
+                   .directive('ng2', downgradeComponent({component: Ng2Component, propagateDigest}))
+                   .run(($rootScope: angular.IRootScopeService) => {
+                     $rootScope.attrVal = 'bar';
+                     $rootScope.propVal = 'bar';
+                   });
+
+           const element = html('<ng2 attr-input="{{ attrVal }}" [prop-input]="propVal"></ng2>');
+           const $injector = angular.bootstrap(element, [ng1Module.name]);
+           const $rootScope = $injector.get($ROOT_SCOPE) as angular.IRootScopeService;
+
+           setTimeout(() => {    // Wait for the module to be bootstrapped.
+             setTimeout(() => {  // Wait for `$evalAsync()` to propagate inputs.
+               const expectToBeInNgZone = () => expect(NgZone.isInAngularZone()).toBe(true);
+               const changesSpy =
+                   spyOn(ng2Component, 'ngOnChanges').and.callFake(expectToBeInNgZone);
+
+               expect(ng2Component.attrInput).toBe('bar');
+               expect(ng2Component.propInput).toBe('bar');
+
+               $rootScope.$apply('attrVal = "baz"');
+               expect(ng2Component.attrInput).toBe('baz');
+               expect(ng2Component.propInput).toBe('bar');
+               expect(changesSpy).toHaveBeenCalledTimes(1);
+
+               $rootScope.$apply('propVal = "qux"');
+               expect(ng2Component.attrInput).toBe('baz');
+               expect(ng2Component.propInput).toBe('qux');
+               expect(changesSpy).toHaveBeenCalledTimes(2);
+             });
+           });
+         }));
+
+      it('should wire up the component for change detection', async(() => {
+           @Component(
+               {selector: 'ng2', template: '{{ count }}<button (click)="increment()"></button>'})
+           class Ng2Component {
+             private count = 0;
+             increment() { ++this.count; }
+           }
+
+           @NgModule({
+             declarations: [Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           const bootstrapFn = (extraProviders: Provider[]) =>
+               platformBrowserDynamic(extraProviders).bootstrapModule(Ng2Module);
+           const lazyModuleName = downgradeModule<Ng2Module>(bootstrapFn);
+           const ng1Module =
+               angular.module('ng1', [lazyModuleName])
+                   .directive(
+                       'ng2', downgradeComponent({component: Ng2Component, propagateDigest}));
+
+           const element = html('<ng2></ng2>');
+           angular.bootstrap(element, [ng1Module.name]);
+
+           setTimeout(() => {    // Wait for the module to be bootstrapped.
+             setTimeout(() => {  // Wait for `$evalAsync()` to propagate inputs.
+               const button = element.querySelector('button') !;
+               expect(element.textContent).toBe('0');
+
+               button.click();
+               expect(element.textContent).toBe('1');
+
+               button.click();
+               expect(element.textContent).toBe('2');
+             });
+           });
+         }));
+
+      it('should only retrieve the Angular zone once (and cache it for later use)',
+         fakeAsync(() => {
+           let count = 0;
+           let getNgZoneCount = 0;
+
+           @Component(
+               {selector: 'ng2', template: 'Count: {{ count }} | In the zone: {{ inTheZone }}'})
+           class Ng2Component {
+             private count = ++count;
+             private inTheZone = false;
+             constructor() { this.inTheZone = NgZone.isInAngularZone(); }
+           }
+
+           @NgModule({
+             declarations: [Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+             constructor(injector: Injector) {
+               const originalGet = injector.get;
+               injector.get = function(token: any) {
+                 if (token === NgZone) ++getNgZoneCount;
+                 return originalGet.apply(injector, arguments);
+               };
+             }
+             ngDoBootstrap() {}
+           }
+
+           const bootstrapFn = (extraProviders: Provider[]) =>
+               platformBrowserDynamic(extraProviders).bootstrapModule(Ng2Module);
+           const lazyModuleName = downgradeModule<Ng2Module>(bootstrapFn);
+           const ng1Module =
+               angular.module('ng1', [lazyModuleName])
+                   .directive(
+                       'ng2', downgradeComponent({component: Ng2Component, propagateDigest}));
+
+           const element = html('<div><ng2 ng-if="showNg2"></ng2></div>');
+           const $injector = angular.bootstrap(element, [ng1Module.name]);
+           const $rootScope = $injector.get($ROOT_SCOPE) as angular.IRootScopeService;
+
+           $rootScope.$apply('showNg2 = true');
+           tick();  // Wait for the module to be bootstrapped and `$evalAsync()` to propagate
+                    // inputs.
+
+           const injector = ($injector.get(LAZY_MODULE_REF) as LazyModuleRef).injector !;
+           const injectorGet = injector.get;
+           spyOn(injector, 'get').and.callFake((...args: any[]) => {
+             expect(args[0]).not.toBe(NgZone);
+             return injectorGet.apply(injector, args);
+           });
+
+           expect(element.textContent).toBe('Count: 1 | In the zone: true');
+
+           $rootScope.$apply('showNg2 = false');
+           expect(element.textContent).toBe('');
+
+           $rootScope.$apply('showNg2 = true');
+           tick();  // Wait for `$evalAsync()` to propagate inputs.
+           expect(element.textContent).toBe('Count: 2 | In the zone: true');
+
+           $rootScope.$destroy();
+         }));
+
+      it('should give access to both injectors in the Angular module\'s constructor', async(() => {
+           let $injectorFromNg2: angular.IInjectorService|null = null;
+
+           @Component({selector: 'ng2', template: ''})
+           class Ng2Component {
+           }
+
+           @NgModule({
+             declarations: [Ng2Component],
+             entryComponents: [Ng2Component],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+             constructor(injector: Injector) {
+               $injectorFromNg2 = injector.get<angular.IInjectorService>('$injector' as any);
+             }
+
+             ngDoBootstrap() {}
+           }
+
+           const bootstrapFn = (extraProviders: Provider[]) =>
+               platformBrowserDynamic(extraProviders).bootstrapModule(Ng2Module);
+           const lazyModuleName = downgradeModule<Ng2Module>(bootstrapFn);
+           const ng1Module =
+               angular.module('ng1', [lazyModuleName])
+                   .directive(
+                       'ng2', downgradeComponent({component: Ng2Component, propagateDigest}));
+
+           const element = html('<ng2></ng2>');
+           const $injectorFromNg1 = angular.bootstrap(element, [ng1Module.name]);
+
+           // Wait for the module to be bootstrapped.
+           setTimeout(() => expect($injectorFromNg2).toBe($injectorFromNg1));
+         }));
+    });
+  });
+}
diff --git a/packages/upgrade/test/static/integration/injection_spec.ts b/packages/upgrade/test/static/integration/injection_spec.ts
index 93b3e3c3a2..8ee142c2f4 100644
--- a/packages/upgrade/test/static/integration/injection_spec.ts
+++ b/packages/upgrade/test/static/integration/injection_spec.ts
@@ -12,7 +12,7 @@ import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import * as angular from '@angular/upgrade/src/common/angular1';
 import {$INJECTOR, INJECTOR_KEY} from '@angular/upgrade/src/common/constants';
-import {UpgradeModule, downgradeInjectable} from '@angular/upgrade/static';
+import {UpgradeModule, downgradeInjectable, getAngularLib, setAngularLib} from '@angular/upgrade/static';
 
 import {bootstrap, html} from '../test_helpers';
 
@@ -99,5 +99,33 @@ export function main() {
            expect(runBlockTriggered).toBeTruthy();
          });
        }));
+
+    it('should allow resetting angular at runtime', async(() => {
+         let wrappedBootstrapepedCalled = false;
+
+         const n: any = getAngularLib();
+
+         setAngularLib({
+           bootstrap: (...args: any[]) => {
+             wrappedBootstrapepedCalled = true;
+             n.bootstrap(...args);
+           },
+           module: n.module,
+           element: n.element,
+           version: n.version,
+           resumeBootstrap: n.resumeBootstrap,
+           getTestability: n.getTestability
+         });
+
+         @NgModule({imports: [BrowserModule, UpgradeModule]})
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module = angular.module('ng1Module', []);
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, html('<div>'), ng1Module)
+             .then((upgrade) => { expect(wrappedBootstrapepedCalled).toEqual(true); });
+       }));
   });
 }
diff --git a/packages/upgrade/test/static/integration/testability_spec.ts b/packages/upgrade/test/static/integration/testability_spec.ts
index 14f415080b..7fc46c8f2d 100644
--- a/packages/upgrade/test/static/integration/testability_spec.ts
+++ b/packages/upgrade/test/static/integration/testability_spec.ts
@@ -29,7 +29,7 @@ export function main() {
 
     it('should handle deferred bootstrap', fakeAsync(() => {
          let applicationRunning = false;
-         let stayedInTheZone: boolean;
+         let stayedInTheZone: boolean = undefined !;
          const ng1Module = angular.module('ng1', []).run(() => {
            applicationRunning = true;
            stayedInTheZone = NgZone.isInAngularZone();
@@ -73,5 +73,42 @@ export function main() {
            expect(ng2Stable).toEqual(true);
          });
        }));
+
+    it('should not wait for $interval', fakeAsync(() => {
+         const ng1Module = angular.module('ng1', []);
+         const element = html('<div></div>');
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+
+           const ng2Testability: Testability = upgrade.injector.get(Testability);
+           const $interval: angular.IIntervalService = upgrade.$injector.get('$interval');
+
+           let ng2Stable = false;
+           let intervalDone = false;
+
+           const id = $interval((arg: string) => {
+             // should only be called once
+             expect(intervalDone).toEqual(false);
+
+             intervalDone = true;
+             expect(NgZone.isInAngularZone()).toEqual(true);
+             expect(arg).toEqual('passed argument');
+           }, 200, 0, true, 'passed argument');
+
+           ng2Testability.whenStable(() => { ng2Stable = true; });
+
+           tick(100);
+
+           expect(intervalDone).toEqual(false);
+           expect(ng2Stable).toEqual(true);
+
+           tick(200);
+           expect(intervalDone).toEqual(true);
+           expect($interval.cancel(id)).toEqual(true);
+
+           // Interval should not fire after cancel
+           tick(200);
+         });
+       }));
   });
 }
diff --git a/packages/upgrade/test/static/integration/upgrade_component_spec.ts b/packages/upgrade/test/static/integration/upgrade_component_spec.ts
index a8a3546c9f..a2d31286a3 100644
--- a/packages/upgrade/test/static/integration/upgrade_component_spec.ts
+++ b/packages/upgrade/test/static/integration/upgrade_component_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, ElementRef, EventEmitter, Inject, Injector, Input, NO_ERRORS_SCHEMA, NgModule, Output, SimpleChanges, destroyPlatform} from '@angular/core';
+import {Component, Directive, ElementRef, ErrorHandler, EventEmitter, Inject, Injector, Input, NO_ERRORS_SCHEMA, NgModule, Output, SimpleChanges, destroyPlatform} from '@angular/core';
 import {async, fakeAsync, tick} from '@angular/core/testing';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@@ -316,7 +316,7 @@ export function main() {
                         '$httpBackend',
                         (method: string, url: string, post?: any, callback?: Function) =>
                             setTimeout(
-                                () => callback(200, `${method}:${url}`.toLowerCase()), 1000));
+                                () => callback !(200, `${method}:${url}`.toLowerCase()), 1000));
 
             // Define `Ng2Module`
             @NgModule({
@@ -367,7 +367,7 @@ export function main() {
                         '$httpBackend',
                         (method: string, url: string, post?: any, callback?: Function) =>
                             setTimeout(
-                                () => callback(200, `${method}:${url}`.toLowerCase()), 1000));
+                                () => callback !(200, `${method}:${url}`.toLowerCase()), 1000));
 
             // Define `Ng2Module`
             @NgModule({
@@ -518,8 +518,8 @@ export function main() {
            const element = html(`<ng2></ng2>`);
 
            bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
-             const ng1 = element.querySelector('ng1');
-             const ng1Controller = angular.element(ng1).controller('ng1');
+             const ng1 = element.querySelector('ng1') !;
+             const ng1Controller = angular.element(ng1).controller !('ng1');
 
              expect(multiTrim(element.textContent)).toBe('Inside: foo, bar | Outside: foo, bar');
 
@@ -593,8 +593,8 @@ export function main() {
            const element = html(`<ng2></ng2>`);
 
            bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
-             const ng1 = element.querySelector('ng1');
-             const ng1Controller = angular.element(ng1).controller('ng1');
+             const ng1 = element.querySelector('ng1') !;
+             const ng1Controller = angular.element(ng1).controller !('ng1');
 
              expect(multiTrim(element.textContent)).toBe('Inside: foo, bar | Outside: foo, bar');
 
@@ -670,8 +670,8 @@ export function main() {
            const element = html(`<ng2></ng2>`);
 
            bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
-             const ng1 = element.querySelector('ng1');
-             const ng1Controller = angular.element(ng1).controller('ng1');
+             const ng1 = element.querySelector('ng1') !;
+             const ng1Controller = angular.element(ng1).controller !('ng1');
 
              expect(multiTrim(element.textContent)).toBe('Inside: foo, bar | Outside: foo, bar');
 
@@ -741,8 +741,8 @@ export function main() {
            const element = html(`<ng2></ng2>`);
 
            bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
-             const ng1 = element.querySelector('ng1');
-             const ng1Controller = angular.element(ng1).controller('ng1');
+             const ng1 = element.querySelector('ng1') !;
+             const ng1Controller = angular.element(ng1).controller !('ng1');
 
              expect(multiTrim(element.textContent)).toBe('Inside: - | Outside: foo, bar');
 
@@ -911,10 +911,10 @@ export function main() {
            const element = html(`<ng2></ng2>`);
 
            bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
-             const ng1s = element.querySelectorAll('ng1');
-             const ng1Controller0 = angular.element(ng1s[0]).controller('ng1');
-             const ng1Controller1 = angular.element(ng1s[1]).controller('ng1');
-             const ng1Controller2 = angular.element(ng1s[2]).controller('ng1');
+             const ng1s = element.querySelectorAll('ng1') !;
+             const ng1Controller0 = angular.element(ng1s[0]).controller !('ng1');
+             const ng1Controller1 = angular.element(ng1s[1]).controller !('ng1');
+             const ng1Controller2 = angular.element(ng1s[2]).controller !('ng1');
 
              expect(multiTrim(element.textContent))
                  .toBe(
@@ -998,8 +998,8 @@ export function main() {
            const element = html(`<ng2></ng2>`);
 
            bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
-             const ng1 = element.querySelector('[ng1]');
-             const ng1Controller = angular.element(ng1).controller('ng1');
+             const ng1 = element.querySelector('[ng1]') !;
+             const ng1Controller = angular.element(ng1).controller !('ng1');
 
              expect(multiTrim(element.textContent))
                  .toBe('ng1 - Data: [1,2,3] - Length: 3 | ng2 - Data: 1,2,3 - Length: 3');
@@ -1028,7 +1028,7 @@ export function main() {
            // Define `ng1Component`
            const ng1ComponentA: angular.IComponent = {template: 'ng1A(<ng1-b></ng1-b>)'};
            const ng1DirectiveB: angular.IDirective = {
-             compile: tElem => grandParentNodeName = tElem.parent().parent()[0].nodeName
+             compile: tElem => grandParentNodeName = tElem.parent !().parent !()[0].nodeName
            };
 
            // Define `Ng1ComponentAFacade`
@@ -1069,6 +1069,244 @@ export function main() {
          }));
     });
 
+    describe('linking', () => {
+      it('should run the pre-linking after instantiating the controller', async(() => {
+           const log: string[] = [];
+
+           // Define `ng1Directive`
+           const ng1Directive: angular.IDirective = {
+             template: '',
+             link: {pre: () => log.push('ng1-pre')},
+             controller: class {constructor() { log.push('ng1-ctrl'); }}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1', [])
+                                 .directive('ng1', () => ng1Directive)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(log).toEqual(['ng1-ctrl', 'ng1-pre']);
+           });
+         }));
+
+      it('should run the pre-linking function before linking', async(() => {
+           const log: string[] = [];
+
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: '<ng1-b></ng1-b>',
+             link: {pre: () => log.push('ng1A-pre')}
+           };
+
+           const ng1DirectiveB: angular.IDirective = {link: () => log.push('ng1B-post')};
+
+           // Define `Ng1ComponentAFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1A></ng1A>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentAFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(log).toEqual(['ng1A-pre', 'ng1B-post']);
+           });
+         }));
+
+      it('should run the post-linking function after linking (link: object)', async(() => {
+           const log: string[] = [];
+
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: '<ng1-b></ng1-b>',
+             link: {post: () => log.push('ng1A-post')}
+           };
+
+           const ng1DirectiveB: angular.IDirective = {link: () => log.push('ng1B-post')};
+
+           // Define `Ng1ComponentAFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1A></ng1A>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentAFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(log).toEqual(['ng1B-post', 'ng1A-post']);
+           });
+         }));
+
+      it('should run the post-linking function after linking (link: function)', async(() => {
+           const log: string[] = [];
+
+           // Define `ng1Directive`
+           const ng1DirectiveA: angular.IDirective = {
+             template: '<ng1-b></ng1-b>',
+             link: () => log.push('ng1A-post')
+           };
+
+           const ng1DirectiveB: angular.IDirective = {link: () => log.push('ng1B-post')};
+
+           // Define `Ng1ComponentAFacade`
+           @Directive({selector: 'ng1A'})
+           class Ng1ComponentAFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1A', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1A></ng1A>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1', [])
+                                 .directive('ng1A', () => ng1DirectiveA)
+                                 .directive('ng1B', () => ng1DirectiveB)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentAFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(log).toEqual(['ng1B-post', 'ng1A-post']);
+           });
+         }));
+
+      it('should run the post-linking function before `$postLink`', async(() => {
+           const log: string[] = [];
+
+           // Define `ng1Directive`
+           const ng1Directive: angular.IDirective = {
+             template: '',
+             link: () => log.push('ng1-post'),
+             controller: class {$postLink() { log.push('ng1-$post'); }}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1', [])
+                                 .directive('ng1', () => ng1Directive)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(() => {
+             expect(log).toEqual(['ng1-post', 'ng1-$post']);
+           });
+         }));
+    });
+
     describe('controller', () => {
       it('should support `controllerAs`', async(() => {
            // Define `ng1Directive`
@@ -1088,7 +1326,7 @@ export function main() {
                }
 
                isPublished() {
-                 return this.$element.controller('ng1') === this ? 'published' : 'not-published';
+                 return this.$element.controller !('ng1') === this ? 'published' : 'not-published';
                }
 
                verifyIAmAClass() { this.isClass = 'isClass'; }
@@ -1314,7 +1552,7 @@ export function main() {
                name = 'world';
 
                constructor($element: angular.IAugmentedJQuery) {
-                 getCurrentContent = () => $element.text();
+                 getCurrentContent = () => $element.text !();
                  compiledContent = getCurrentContent();
                }
              }
@@ -1862,6 +2100,474 @@ export function main() {
       });
     });
 
+    describe('transclusion', () => {
+      it('should support single-slot transclusion', async(() => {
+           let ng2ComponentAInstance: Ng2ComponentA;
+           let ng2ComponentBInstance: Ng2ComponentB;
+
+           // Define `ng1Component`
+           const ng1Component:
+               angular.IComponent = {template: 'ng1(<div ng-transclude></div>)', transclude: true};
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2A',
+             template: 'ng2A(<ng1>{{ value }} | <ng2B *ngIf="showB"></ng2B></ng1>)'
+           })
+           class Ng2ComponentA {
+             value = 'foo';
+             showB = false;
+             constructor() { ng2ComponentAInstance = this; }
+           }
+
+           @Component({selector: 'ng2B', template: 'ng2B({{ value }})'})
+           class Ng2ComponentB {
+             value = 'bar';
+             constructor() { ng2ComponentBInstance = this; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2A', downgradeComponent({component: Ng2ComponentA}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentFacade, Ng2ComponentA, Ng2ComponentB],
+             entryComponents: [Ng2ComponentA]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2-a></ng2-a>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             expect(multiTrim(element.textContent)).toBe('ng2A(ng1(foo | ))');
+
+             ng2ComponentAInstance.value = 'baz';
+             ng2ComponentAInstance.showB = true;
+             $digest(adapter);
+
+             expect(multiTrim(element.textContent)).toBe('ng2A(ng1(baz | ng2B(bar)))');
+
+             ng2ComponentBInstance.value = 'qux';
+             $digest(adapter);
+
+             expect(multiTrim(element.textContent)).toBe('ng2A(ng1(baz | ng2B(qux)))');
+           });
+         }));
+
+      it('should support single-slot transclusion with fallback content', async(() => {
+           let ng1ControllerInstances: any[] = [];
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'ng1(<div ng-transclude>{{ $ctrl.value }}</div>)',
+             transclude: true,
+             controller:
+                 class {value = 'from-ng1'; constructor() { ng1ControllerInstances.push(this); }}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: 'ng2(<ng1>{{ value }}</ng1> | <ng1></ng1>)'})
+           class Ng2Component {
+             value = 'from-ng2';
+             constructor() { ng2ComponentInstance = this; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             expect(multiTrim(element.textContent)).toBe('ng2(ng1(from-ng2) | ng1(from-ng1))');
+
+             ng1ControllerInstances.forEach(ctrl => ctrl.value = 'ng1-foo');
+             ng2ComponentInstance.value = 'ng2-bar';
+             $digest(adapter);
+
+             expect(multiTrim(element.textContent)).toBe('ng2(ng1(ng2-bar) | ng1(ng1-foo))');
+           });
+         }));
+
+      it('should support multi-slot transclusion', async(() => {
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template:
+                 'ng1(x(<div ng-transclude="slotX"></div>) | y(<div ng-transclude="slotY"></div>))',
+             transclude: {slotX: 'contentX', slotY: 'contentY'}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+               ng2(
+                 <ng1>
+                   <content-x>{{ x }}1</content-x>
+                   <content-y>{{ y }}1</content-y>
+                   <content-x>{{ x }}2</content-x>
+                   <content-y>{{ y }}2</content-y>
+                 </ng1>
+               )`
+           })
+           class Ng2Component {
+             x = 'foo';
+             y = 'bar';
+             constructor() { ng2ComponentInstance = this; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             schemas: [NO_ERRORS_SCHEMA]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(foo1foo2)|y(bar1bar2)))');
+
+             ng2ComponentInstance.x = 'baz';
+             ng2ComponentInstance.y = 'qux';
+             $digest(adapter);
+
+             expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(baz1baz2)|y(qux1qux2)))');
+           });
+         }));
+
+      it('should support default slot (with fallback content)', async(() => {
+           let ng1ControllerInstances: any[] = [];
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: 'ng1(default(<div ng-transclude="">fallback-{{ $ctrl.value }}</div>))',
+             transclude: {slotX: 'contentX', slotY: 'contentY'},
+             controller:
+                 class {value = 'ng1'; constructor() { ng1ControllerInstances.push(this); }}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+               ng2(
+                 <ng1>
+                   ({{ x }})
+                   <content-x>ignored x</content-x>
+                   {{ x }}-<span>{{ y }}</span>
+                   <content-y>ignored y</content-y>
+                   <span>({{ y }})</span>
+                 </ng1> |
+                 <!--
+                   Remove any whitespace, because in AngularJS versions prior to 1.6
+                   even whitespace counts as transcluded content.
+                 -->
+                 <ng1><content-x>ignored x</content-x><content-y>ignored y</content-y></ng1>
+               )`
+           })
+           class Ng2Component {
+             x = 'foo';
+             y = 'bar';
+             constructor() { ng2ComponentInstance = this; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             schemas: [NO_ERRORS_SCHEMA]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             expect(multiTrim(element.textContent, true))
+                 .toBe('ng2(ng1(default((foo)foo-bar(bar)))|ng1(default(fallback-ng1)))');
+
+             ng1ControllerInstances.forEach(ctrl => ctrl.value = 'ng1-plus');
+             ng2ComponentInstance.x = 'baz';
+             ng2ComponentInstance.y = 'qux';
+             $digest(adapter);
+
+             expect(multiTrim(element.textContent, true))
+                 .toBe('ng2(ng1(default((baz)baz-qux(qux)))|ng1(default(fallback-ng1-plus)))');
+           });
+         }));
+
+      it('should support optional transclusion slots (with fallback content)', async(() => {
+           let ng1ControllerInstances: any[] = [];
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: `
+               ng1(
+                x(<div ng-transclude="slotX">{{ $ctrl.x }}</div>) |
+                y(<div ng-transclude="slotY">{{ $ctrl.y }}</div>)
+               )`,
+             transclude: {slotX: '?contentX', slotY: '?contentY'},
+             controller: class {
+               x = 'ng1X'; y = 'ng1Y'; constructor() { ng1ControllerInstances.push(this); }
+             }
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+               ng2(
+                 <ng1><content-x>{{ x }}</content-x></ng1> |
+                 <ng1><content-y>{{ y }}</content-y></ng1>
+               )`
+           })
+           class Ng2Component {
+             x = 'ng2X';
+             y = 'ng2Y';
+             constructor() { ng2ComponentInstance = this; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             schemas: [NO_ERRORS_SCHEMA]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             expect(multiTrim(element.textContent, true))
+                 .toBe('ng2(ng1(x(ng2X)|y(ng1Y))|ng1(x(ng1X)|y(ng2Y)))');
+
+             ng1ControllerInstances.forEach(ctrl => {
+               ctrl.x = 'ng1X-foo';
+               ctrl.y = 'ng1Y-bar';
+             });
+             ng2ComponentInstance.x = 'ng2X-baz';
+             ng2ComponentInstance.y = 'ng2Y-qux';
+             $digest(adapter);
+
+             expect(multiTrim(element.textContent, true))
+                 .toBe('ng2(ng1(x(ng2X-baz)|y(ng1Y-bar))|ng1(x(ng1X-foo)|y(ng2Y-qux)))');
+           });
+         }));
+
+      it('should throw if a non-optional slot is not filled', async(() => {
+           let errorMessage: string;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template: '',
+             transclude: {slotX: '?contentX', slotY: 'contentY'}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2Component {
+           }
+
+           // Define `ng1Module`
+           const ng1Module =
+               angular.module('ng1Module', [])
+                   .value('$exceptionHandler', (error: Error) => errorMessage = error.message)
+                   .component('ng1', ng1Component)
+                   .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             expect(errorMessage)
+                 .toContain('Required transclusion slot \'slotY\' on directive: ng1');
+           });
+         }));
+
+      it('should support structural directives in transcluded content', async(() => {
+           let ng2ComponentInstance: Ng2Component;
+
+           // Define `ng1Component`
+           const ng1Component: angular.IComponent = {
+             template:
+                 'ng1(x(<div ng-transclude="slotX"></div>) | default(<div ng-transclude=""></div>))',
+             transclude: {slotX: 'contentX'}
+           };
+
+           // Define `Ng1ComponentFacade`
+           @Directive({selector: 'ng1'})
+           class Ng1ComponentFacade extends UpgradeComponent {
+             constructor(elementRef: ElementRef, injector: Injector) {
+               super('ng1', elementRef, injector);
+             }
+           }
+
+           // Define `Ng2Component`
+           @Component({
+             selector: 'ng2',
+             template: `
+               ng2(
+                 <ng1>
+                   <content-x><div *ngIf="show">{{ x }}1</div></content-x>
+                   <div *ngIf="!show">{{ y }}1</div>
+                   <content-x><div *ngIf="!show">{{ x }}2</div></content-x>
+                   <div *ngIf="show">{{ y }}2</div>
+                 </ng1>
+               )`
+           })
+           class Ng2Component {
+             x = 'foo';
+             y = 'bar';
+             show = true;
+             constructor() { ng2ComponentInstance = this; }
+           }
+
+           // Define `ng1Module`
+           const ng1Module = angular.module('ng1Module', [])
+                                 .component('ng1', ng1Component)
+                                 .directive('ng2', downgradeComponent({component: Ng2Component}));
+
+           // Define `Ng2Module`
+           @NgModule({
+             imports: [BrowserModule, UpgradeModule],
+             declarations: [Ng1ComponentFacade, Ng2Component],
+             entryComponents: [Ng2Component],
+             schemas: [NO_ERRORS_SCHEMA]
+           })
+           class Ng2Module {
+             ngDoBootstrap() {}
+           }
+
+           // Bootstrap
+           const element = html(`<ng2></ng2>`);
+
+           bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(adapter => {
+             expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(foo1)|default(bar2)))');
+
+             ng2ComponentInstance.x = 'baz';
+             ng2ComponentInstance.y = 'qux';
+             ng2ComponentInstance.show = false;
+             $digest(adapter);
+
+             expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(baz2)|default(qux1)))');
+
+             ng2ComponentInstance.show = true;
+             $digest(adapter);
+
+             expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(baz1)|default(qux2)))');
+           });
+         }));
+    });
+
     describe('lifecycle hooks', () => {
       it('should call `$onChanges()` on binding destination (prototype)', fakeAsync(() => {
            const scopeOnChanges = jasmine.createSpy('scopeOnChanges');
diff --git a/packages/upgrade/test/static/test_helpers.ts b/packages/upgrade/test/static/test_helpers.ts
index 903d3732fb..a384f7e9cd 100644
--- a/packages/upgrade/test/static/test_helpers.ts
+++ b/packages/upgrade/test/static/test_helpers.ts
@@ -15,11 +15,14 @@ export * from '../common/test_helpers';
 
 export function bootstrap(
     platform: PlatformRef, Ng2Module: Type<{}>, element: Element, ng1Module: angular.IModule) {
-  // We bootstrap the Angular module first; then when it is ready (async)
-  // We bootstrap the AngularJS module on the bootstrap element
+  // We bootstrap the Angular module first; then when it is ready (async) we bootstrap the AngularJS
+  // module on the bootstrap element (also ensuring that AngularJS errors will fail the test).
   return platform.bootstrapModule(Ng2Module).then(ref => {
-    const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
-    upgrade.bootstrap(element, [ng1Module.name]);
+    const upgrade = ref.injector.get(UpgradeModule);
+    const failHardModule: any = ($provide: angular.IProvideService) => {
+      $provide.value('$exceptionHandler', (err: any) => { throw err; });
+    };
+    upgrade.bootstrap(element, [failHardModule, ng1Module.name]);
     return upgrade;
   });
 }
diff --git a/packages/upgrade/tsconfig-build.json b/packages/upgrade/tsconfig-build.json
index 3800b23f13..a2a64dd6c7 100644
--- a/packages/upgrade/tsconfig-build.json
+++ b/packages/upgrade/tsconfig-build.json
@@ -4,6 +4,7 @@
     "declaration": true,
     "stripInternal": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "module": "es2015",
     "moduleResolution": "node",
     "outDir": "../../dist/packages/upgrade",
diff --git a/scripts/ci/build.sh b/scripts/ci/build.sh
index bf6279296b..891d36cdef 100755
--- a/scripts/ci/build.sh
+++ b/scripts/ci/build.sh
@@ -14,44 +14,52 @@ if [[ ${TRAVIS_TEST_RESULT=0} == 1 ]]; then
   exit 1;
 fi
 
+# No build needed for bazel or aio docs tests
+if [[ ${CI_MODE:-} == "bazel" || ${CI_MODE:-} == "docs_test" ]]; then
+  exit 0;
+fi
+
+# Build angular.io, then exit (no Angular build required)
+if [[ ${CI_MODE:-} == "aio" ]]; then
+  travisFoldStart "build.aio"
+  (
+    cd "`dirname $0`/../../aio"
+    yarn build
+
+    # If this is a PR for angular/angular@master or angular/angular@<stable-branch>, deploy a
+    # snapshot for previewing early (if preconditions are met) regardless of the test outcome.
+    if [[ ${TRAVIS_REPO_SLUG} == "angular/angular" ]] &&
+       ([[ $TRAVIS_BRANCH == "master" ]] || [[ $TRAVIS_BRANCH == $STABLE_BRANCH ]]) &&
+       [[ $TRAVIS_PULL_REQUEST != "false" ]]; then
+      travisFoldStart "deploy.aio.pr-preview"
+        yarn deploy-preview -- --skip-build
+      travisFoldEnd "deploy.aio.pr-preview"
+    fi
+  )
+  travisFoldEnd "build.aio"
+  exit 0;
+fi
 
 travisFoldStart "tsc tools"
   $(npm bin)/tsc -p tools
-  cp tools/@angular/tsc-wrapped/package.json dist/tools/@angular/tsc-wrapped
+  $(npm bin)/tsc -p packages/tsc-wrapped/tsconfig-build.json
+  cp packages/tsc-wrapped/package.json dist/packages-dist/tsc-wrapped
+  $(npm bin)/tsc -p packages/tsc-wrapped/tsconfig.json
+  cp packages/tsc-wrapped/package.json dist/all/@angular/tsc-wrapped
 travisFoldEnd "tsc tools"
 
 
 travisFoldStart "tsc all"
-  node --max-old-space-size=3000 dist/tools/@angular/tsc-wrapped/src/main -p packages
-  node --max-old-space-size=3000 dist/tools/@angular/tsc-wrapped/src/main -p modules
+  node --max-old-space-size=3000 dist/packages-dist/tsc-wrapped/src/main -p packages
+  node --max-old-space-size=3000 dist/packages-dist/tsc-wrapped/src/main -p modules
 travisFoldEnd "tsc all"
 
 
 # TODO(i): what are these compilations here for?
 travisFoldStart "tsc a bunch of useless stuff"
-  node dist/tools/@angular/tsc-wrapped/src/main -p packages/core/tsconfig-build.json
-  node dist/tools/@angular/tsc-wrapped/src/main -p packages/common/tsconfig-build.json
-  node dist/tools/@angular/tsc-wrapped/src/main -p packages/platform-browser/tsconfig-build.json
-  node dist/tools/@angular/tsc-wrapped/src/main -p packages/router/tsconfig-build.json
-  node dist/tools/@angular/tsc-wrapped/src/main -p packages/forms/tsconfig-build.json
+  node dist/packages-dist/tsc-wrapped/src/main -p packages/core/tsconfig-build.json
+  node dist/packages-dist/tsc-wrapped/src/main -p packages/common/tsconfig-build.json
+  node dist/packages-dist/tsc-wrapped/src/main -p packages/platform-browser/tsconfig-build.json
+  node dist/packages-dist/tsc-wrapped/src/main -p packages/router/tsconfig-build.json
+  node dist/packages-dist/tsc-wrapped/src/main -p packages/forms/tsconfig-build.json
 travisFoldEnd "tsc a bunch of useless stuff"
-
-
-# Build integration tests
-if [[ ${CI_MODE:-} == "e2e_2" ]]; then
-  travisFoldStart "build.integration"
-    cd "`dirname $0`/../../integration"
-    ./build_rxjs_es6.sh
-    cd -
-  travisFoldEnd "build.integration"
-fi
-
-
-# Build angular.io
-if [[ ${CI_MODE:-} == "aio" ]]; then
-  travisFoldStart "build.aio"
-    cd "`dirname $0`/../../aio"
-    yarn run build
-    cd -
-  travisFoldEnd "build.aio"
-fi
diff --git a/scripts/ci/deploy.sh b/scripts/ci/deploy.sh
index f9aaaa149d..c5a85f576b 100755
--- a/scripts/ci/deploy.sh
+++ b/scripts/ci/deploy.sh
@@ -40,52 +40,33 @@ case ${CI_MODE} in
     travisFoldEnd "deploy.packages"
     ;;
   aio)
-    # Don't deploy if this build is not for master or aio-master
-    if [[ ${TRAVIS_BRANCH} != "master" && ${TRAVIS_BRANCH} != "aio-master" ]]; then
-      echo "Skipping deploy because this build is not for master or aio-master."
-      exit 0
-    fi
+    # Only deploy if this not a PR. PRs are deployed early in `build.sh`.
+    if [[ $TRAVIS_PULL_REQUEST == "false" ]]; then
 
-    travisFoldStart "deploy.aio"
-    (
-      cd ${TRAVIS_BUILD_DIR}/aio
-
-      if [[ $TRAVIS_PULL_REQUEST != "false" ]]; then
-        # This is a PR: deploy a snapshot for previewing
-        travisFoldStart "deploy.aio.pr-preview"
-          # Only deploy if this PR has touched relevant files.
-          readonly AIO_CHANGED_FILES_COUNT=$(git diff --name-only $TRAVIS_COMMIT_RANGE | grep ^aio/ | wc -l)
-          if [[ AIO_CHANGED_FILES_COUNT -eq 0 ]]; then
-            echo "Skipping deploy because this PR did not touch any files inside 'aio/'."
-          else
-            # Only deploy if this PR meets certain preconditions.
-            readonly AIO_PREVERIFY_EXIT_CODE=$(./aio-builds-setup/scripts/travis-preverify-pr.sh && echo 0 || echo $?)
-            case $AIO_PREVERIFY_EXIT_CODE in
-              2)
-                # An error occurred: Fail the build
-                exit 1;
-                ;;
-              1)
-                # Preconditions not met: Skip deploy
-                echo "Skipping deploy because this PR did not meet the preconditions."
-                ;;
-              0)
-                # Preconditions met: Deploy
-                yarn run deploy-preview
-                ;;
-            esac
-          fi
-        travisFoldEnd "deploy.aio.pr-preview"
-      elif [[ ${TRAVIS_BRANCH} == "aio-master" ]]; then
-        # This is upstream aio-master: Don't deploy to staging
-        echo "Skipping deploy to staging because this build is for upstream aio-master."
-      else
-        # This is upstream master: Deploy to staging
-        travisFoldStart "deploy.aio.staging"
-          yarn run deploy-staging
-        travisFoldEnd "deploy.aio.staging"
+      # Don't deploy if this build is not for master or the stable branch.
+      if [[ $TRAVIS_BRANCH != "master" ]] && [[ $TRAVIS_BRANCH != $STABLE_BRANCH ]]; then
+        echo "Skipping deploy because this build is not for master or the stable branch ($STABLE_BRANCH)."
+        exit 0
       fi
-    )
-    travisFoldEnd "deploy.aio"
+
+      travisFoldStart "deploy.aio"
+      (
+        cd ${TRAVIS_BUILD_DIR}/aio
+
+        if [[ $TRAVIS_BRANCH == $STABLE_BRANCH ]]; then
+          # This is upstream <stable-branch>: Deploy to production.
+          travisFoldStart "deploy.aio.production"
+            yarn deploy-production
+          travisFoldEnd "deploy.aio.production"
+        else
+          # This is upstream master: Deploy to staging.
+          travisFoldStart "deploy.aio.staging"
+            yarn deploy-staging
+          travisFoldEnd "deploy.aio.staging"
+        fi
+      )
+      travisFoldEnd "deploy.aio"
+
+    fi
     ;;
 esac
diff --git a/scripts/ci/env.sh b/scripts/ci/env.sh
index 574c711fe2..42b4c876f9 100755
--- a/scripts/ci/env.sh
+++ b/scripts/ci/env.sh
@@ -36,8 +36,7 @@ fi
 
 setEnvVar NODE_VERSION 6.9.5
 setEnvVar NPM_VERSION 3.10.7 # do not upgrade to >3.10.8 unless https://github.com/npm/npm/issues/14042 is resolved
-setEnvVar YARN_VERSION 0.21.3
-setEnvVar CHROMIUM_VERSION 433059 # Chrome 53 linux stable, see https://www.chromium.org/developers/calendar
+setEnvVar YARN_VERSION 0.24.6
 setEnvVar SAUCE_CONNECT_VERSION 4.3.11
 setEnvVar PROJECT_ROOT $(cd ${thisDir}/../..; pwd)
 
@@ -58,6 +57,13 @@ if [[ ${TRAVIS:-} ]]; then
     browserstack_optional)
       setEnvVar KARMA_JS_BROWSERS `node -e "console.log(require('/home/travis/build/angular/angular/browser-providers.conf').browserstackAliases.CI_OPTIONAL.join(','))"`
       ;;
+    aio)
+      # Determine the current stable branch.
+      readonly versionRe="^\s*([0-9]+\.[0-9]+)\.[0-9]+.*$"
+      setEnvVar STABLE_BRANCH `npm info @angular/core dist-tags.latest | sed -r "s/$versionRe/\1.x/"`
+
+      setEnvVar MIN_PWA_SCORE 95
+      ;;
   esac
 else
   setEnvVar KARMA_JS_BROWSERS Chrome
@@ -77,9 +83,6 @@ if [[ ${TRAVIS:-} ]]; then
   # WARNING: NGBUILDS_IO_KEY should NOT be printed
   export NGBUILDS_IO_KEY=${NGBUILDS_IO_KEY:-$SAUCE_ACCESS_KEY}
 
-  # Personal token generated by mary-poppins, with only `read_org` permission
-  export GITHUB_TEAM_MEMBERSHIP_CHECK_KEY=35fc4093c1f29a2ddaf60cce5d57065454180bf6
-
   # Used by karma and karma-chrome-launcher
   # In order to have a meaningful SauceLabs badge on the repo page,
   # the angular2-ci account is used only when pushing commits to master;
@@ -99,7 +102,6 @@ if [[ ${TRAVIS:-} ]]; then
   setEnvVar BROWSER_STACK_USERNAME angularteam1
   # not using use setEnvVar so that we don't print the key
   export BROWSER_STACK_ACCESS_KEY=BWCd4SynLzdDcv8xtzsB
-  setEnvVar CHROME_BIN ${HOME}/.chrome/chromium/chrome-linux/chrome
   setEnvVar BROWSER_PROVIDER_READY_FILE /tmp/angular-build/browser-provider-tunnel-init.lock
 fi
 
diff --git a/scripts/ci/install-chromium.sh b/scripts/ci/install-chromium.sh
deleted file mode 100755
index 858b1ef847..0000000000
--- a/scripts/ci/install-chromium.sh
+++ /dev/null
@@ -1,85 +0,0 @@
-#!/usr/bin/env bash
-
-set -u -e -o pipefail
-
-# Setup environment
-readonly thisDir=$(cd $(dirname $0); pwd)
-source ${thisDir}/_travis-fold.sh
-
-
-# This script basically follows the instructions to download an old version of Chromium: https://www.chromium.org/getting-involved/download-chromium
-# 1) It retrieves the current stable version number from https://www.chromium.org/developers/calendar (via the https://omahaproxy.appspot.com/all file), e.g. 359700 for Chromium 48.
-# 2) It checks the Travis cache for this specific version
-# 3) If not available, it downloads and caches it, using the "decrement commit number" trick.
-
-#Build version read from the OmahaProxy CSV Viewer at https://www.chromium.org/developers/calendar
-#Let's use the following version of Chromium, and inform about availability of newer build from https://omahaproxy.appspot.com/all
-#
-# CHROMIUM_VERSION <<< this variable is now set via env.sh
-
-PLATFORM="$(uname -s)"
-case "$PLATFORM" in
-  (Darwin)
-    ARCHITECTURE=Mac
-    DIST_FILE=chrome-mac.zip
-    ;;
-  (Linux)
-    ARCHITECTURE=Linux_x64
-    DIST_FILE=chrome-linux.zip
-    ;;
-  (*)
-    echo Unsupported platform $PLATFORM.  Exiting ... >&2
-    exit 3
-    ;;
-esac
-
-TMP=$(curl -s "https://omahaproxy.appspot.com/all") || true
-oldIFS="$IFS"
-IFS='
-'
-IFS=${IFS:0:1}
-lines=( $TMP )
-IFS=','
-for line in "${lines[@]}"
-  do
-    lineArray=($line);
-    if [ "${lineArray[0]}" = "linux" ] && [ "${lineArray[1]}" = "stable" ] ; then
-      LATEST_CHROMIUM_VERSION="${lineArray[7]}"
-    fi
-done
-IFS="$oldIFS"
-
-CHROMIUM_DIR=$HOME/.chrome/chromium
-CHROMIUM_BIN=$CHROMIUM_DIR/chrome-linux/chrome
-CHROMIUM_VERSION_FILE=$CHROMIUM_DIR/VERSION
-
-EXISTING_VERSION=""
-if [[ -f $CHROMIUM_VERSION_FILE && -x $CHROMIUM_BIN ]]; then
-  EXISTING_VERSION=`cat $CHROMIUM_VERSION_FILE`
-  echo Found cached Chromium version: ${EXISTING_VERSION}
-fi
-
-if [[ "$EXISTING_VERSION" != "$CHROMIUM_VERSION" ]]; then
-  echo Downloading Chromium version: ${CHROMIUM_VERSION}
-  rm -fR $CHROMIUM_DIR
-  mkdir -p $CHROMIUM_DIR
-
-  NEXT=$CHROMIUM_VERSION
-  FILE="chrome-linux.zip"
-  STATUS=404
-  while [[ $STATUS == 404 && $NEXT -ge 0 ]]
-  do
-    echo Fetch Chromium version: ${NEXT}
-    STATUS=$(curl "https://storage.googleapis.com/chromium-browser-snapshots/${ARCHITECTURE}/${NEXT}/${DIST_FILE}" -s -w %{http_code} --create-dirs -o $FILE) || true
-    NEXT=$[$NEXT-1]
-  done
-
-  unzip $FILE -d $CHROMIUM_DIR
-  rm $FILE
-  echo $CHROMIUM_VERSION > $CHROMIUM_VERSION_FILE
-fi
-
-if [[ "$CHROMIUM_VERSION" != "$LATEST_CHROMIUM_VERSION" ]]; then
-  echo "New version of Chromium available. Update install-chromium.sh with build number: ${LATEST_CHROMIUM_VERSION}"
-fi
-
diff --git a/scripts/ci/install.sh b/scripts/ci/install.sh
index a817064ecc..f335e28be9 100755
--- a/scripts/ci/install.sh
+++ b/scripts/ci/install.sh
@@ -28,20 +28,21 @@ mkdir -p ${LOGS_DIR}
 # Install node
 #nvm install ${NODE_VERSION}
 
-
-# Install version of npm that we are locked against
-travisFoldStart "install-npm"
-  npm install -g npm@${NPM_VERSION}
-travisFoldEnd "install-npm"
+if [[ ${CI_MODE} != "aio" && ${CI_MODE} != 'docs_test' ]]; then
+  # Install version of npm that we are locked against
+  travisFoldStart "install-npm"
+    npm install -g npm@${NPM_VERSION}
+  travisFoldEnd "install-npm"
 
 
-# Install all npm dependencies according to shrinkwrap.json
-travisFoldStart "npm-install"
-  node tools/npm/check-node-modules --purge || npm install
-travisFoldEnd "npm-install"
+  # Install all npm dependencies according to shrinkwrap.json
+  travisFoldStart "npm-install"
+    node tools/npm/check-node-modules --purge || npm install
+  travisFoldEnd "npm-install"
+fi
 
 
-if [[ ${TRAVIS} && (${CI_MODE} == "e2e" || ${CI_MODE} == "e2e_2" || ${CI_MODE} == "aio" || ${CI_MODE} == "docs_test") ]]; then
+if [[ ${TRAVIS} && (${CI_MODE} == "e2e" || ${CI_MODE} == "e2e_2" || ${CI_MODE} == "aio" || ${CI_MODE} == "aio_e2e" || ${CI_MODE} == "docs_test") ]]; then
   # Install version of yarn that we are locked against
   travisFoldStart "install-yarn"
     curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version "${YARN_VERSION}"
@@ -49,7 +50,7 @@ if [[ ${TRAVIS} && (${CI_MODE} == "e2e" || ${CI_MODE} == "e2e_2" || ${CI_MODE} =
 fi
 
 
-if [[ ${TRAVIS} && (${CI_MODE} == "aio" || ${CI_MODE} == "docs_test") ]]; then
+if [[ ${TRAVIS} && (${CI_MODE} == "aio" || ${CI_MODE} == "aio_e2e" || ${CI_MODE} == "docs_test") ]]; then
   # angular.io: Install all yarn dependencies according to angular.io/yarn.lock
   travisFoldStart "yarn-install.aio"
     (
@@ -59,12 +60,31 @@ if [[ ${TRAVIS} && (${CI_MODE} == "aio" || ${CI_MODE} == "docs_test") ]]; then
   travisFoldEnd "yarn-install.aio"
 fi
 
+# Install bazel
+if [[ ${TRAVIS} && ${CI_MODE} == "bazel" ]]; then
+  travisFoldStart "bazel-install"
+  (
+    mkdir tmp
+    cd tmp
+    curl --location --compressed https://github.com/bazelbuild/bazel/releases/download/0.5.2/bazel-0.5.2-installer-linux-x86_64.sh > bazel-0.5.2-installer-linux-x86_64.sh
+    chmod +x bazel-0.5.2-installer-linux-x86_64.sh
+    ./bazel-0.5.2-installer-linux-x86_64.sh --user
+    cd ..
+    rm -rf tmp
+  )
+  travisFoldEnd "bazel-install"
+fi
 
 # Install Chromium
-if [[ ${CI_MODE} == "js" || ${CI_MODE} == "e2e" || ${CI_MODE} == "e2e_2" || ${CI_MODE} == "aio" ]]; then
+if [[ ${CI_MODE} == "js" || ${CI_MODE} == "e2e" || ${CI_MODE} == "e2e_2" || ${CI_MODE} == "aio" || ${CI_MODE} == "aio_e2e" ]]; then
   travisFoldStart "install-chromium"
     (
-      ${thisDir}/install-chromium.sh
+      # Start xvfb for local Chrome used for testing
+      if [[ ${TRAVIS} ]]; then
+        travisFoldStart "install-chromium.xvfb-start"
+          sh -e /etc/init.d/xvfb start
+        travisFoldEnd "install-chromium.xvfb-start"
+      fi
     )
   travisFoldEnd "install-chromium"
 fi
diff --git a/scripts/ci/offline_compiler_test.sh b/scripts/ci/offline_compiler_test.sh
index 810c3bbdc7..f419884f85 100755
--- a/scripts/ci/offline_compiler_test.sh
+++ b/scripts/ci/offline_compiler_test.sh
@@ -5,8 +5,7 @@ set -u -e -o pipefail
 
 # These ones can be `npm link`ed for fast development
 LINKABLE_PKGS=(
-  $(pwd)/dist/packages-dist/{common,forms,core,compiler,compiler-cli,platform-{browser,server},platform-browser-dynamic,router,http,animations}
-  $(pwd)/dist/tools/@angular/tsc-wrapped
+  $(pwd)/dist/packages-dist/{common,forms,core,compiler,compiler-cli,platform-{browser,server},platform-browser-dynamic,router,http,animations,tsc-wrapped}
 )
 
 TYPESCRIPT_2_1=typescript@2.1.5
@@ -55,9 +54,11 @@ cp -v package.json $TMP
   # Copy the html files from source to the emitted output
   cp flat_module/src/*.html node_modules/flat_module/src
 
+  ./node_modules/.bin/ngc -p tsconfig-build-alt.json --missingTranslation=error --i18nFormat=xlf
   ./node_modules/.bin/ngc -p tsconfig-build.json --i18nFile=src/messages.fi.xlf --locale=fi --i18nFormat=xlf
 
   ./node_modules/.bin/ng-xi18n -p tsconfig-xi18n.json --i18nFormat=xlf --locale=fr
+  ./node_modules/.bin/ng-xi18n -p tsconfig-xi18n.json --i18nFormat=xlf2 --outFile=messages.xliff2.xlf
   ./node_modules/.bin/ng-xi18n -p tsconfig-xi18n.json --i18nFormat=xmb --outFile=custom_file.xmb
 
   # Removed until #15219 is fixed
diff --git a/scripts/ci/publish-build-artifacts.sh b/scripts/ci/publish-build-artifacts.sh
index 8e9fa949f8..1cdf28ea51 100755
--- a/scripts/ci/publish-build-artifacts.sh
+++ b/scripts/ci/publish-build-artifacts.sh
@@ -101,7 +101,7 @@ function publishPackages {
   PKGS_DIST=$2
   BRANCH=$3
 
-  for dir in $PKGS_DIST/*/ dist/tools/@angular/tsc-wrapped
+  for dir in $PKGS_DIST/*/ 
   do
     COMPONENT="$(basename ${dir})"
 
diff --git a/scripts/ci/test-aio-e2e.sh b/scripts/ci/test-aio-e2e.sh
new file mode 100755
index 0000000000..23fb8eaefb
--- /dev/null
+++ b/scripts/ci/test-aio-e2e.sh
@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+# Setup environment
+readonly thisDir=$(cd $(dirname $0); pwd)
+source ${thisDir}/_travis-fold.sh
+
+
+# run in subshell to avoid polluting cwd
+(
+  cd ${PROJECT_ROOT}/aio
+
+  # Run example e2e tests
+  travisFoldStart "test.aio.example-e2e"
+    yarn example-e2e -- --setup --local --shard=${AIO_SHARD}/2
+  travisFoldEnd "test.aio.example-e2e"
+)
diff --git a/scripts/ci/test-aio.sh b/scripts/ci/test-aio.sh
index febeefb1e3..cd2bcfaf85 100755
--- a/scripts/ci/test-aio.sh
+++ b/scripts/ci/test-aio.sh
@@ -14,18 +14,10 @@ source ${thisDir}/_travis-fold.sh
 
   # Lint the code
   travisFoldStart "test.aio.lint"
-    yarn run lint
+    yarn lint
   travisFoldEnd "test.aio.lint"
 
 
-  # Start xvfb for local Chrome used for testing
-  if [[ ${TRAVIS} ]]; then
-    travisFoldStart "test.aio.xvfb-start"
-      sh -e /etc/init.d/xvfb start
-    travisFoldEnd "test.aio.xvfb-start"
-  fi
-
-
   # Run unit tests
   travisFoldStart "test.aio.unit"
     yarn test -- --single-run
@@ -34,9 +26,13 @@ source ${thisDir}/_travis-fold.sh
 
   # Run e2e tests
   travisFoldStart "test.aio.e2e"
-    yarn run e2e
+    yarn e2e
   travisFoldEnd "test.aio.e2e"
 
+  # Run PWA-score tests
+  travisFoldStart "test.aio.pwaScore"
+    yarn test-pwa-score-local
+  travisFoldEnd "test.aio.pwaScore"
 
   # Run unit tests for aio/aio-builds-setup
   travisFoldStart "test.aio.aio-builds-setup"
diff --git a/scripts/ci/test-bazel.sh b/scripts/ci/test-bazel.sh
new file mode 100755
index 0000000000..9f22e933fe
--- /dev/null
+++ b/scripts/ci/test-bazel.sh
@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+set -u -e -o pipefail
+
+bazel build packages/...
diff --git a/scripts/ci/test-e2e-2.sh b/scripts/ci/test-e2e-2.sh
index 13735842a1..65fb7f6e1b 100755
--- a/scripts/ci/test-e2e-2.sh
+++ b/scripts/ci/test-e2e-2.sh
@@ -14,13 +14,6 @@ travisFoldStart "test.e2e.buildPackages"
 travisFoldEnd "test.e2e.buildPackages"
 
 
-if [[ ${TRAVIS:-} ]]; then
-  travisFoldStart "test.e2e.xvfb-start"
-    sh -e /etc/init.d/xvfb start
-  travisFoldEnd "test.e2e.xvfb-start"
-fi
-
-
 travisFoldStart "test.e2e.integration"
   ./integration/run_tests.sh
 travisFoldEnd "test.e2e.integration"
diff --git a/scripts/ci/test-e2e.sh b/scripts/ci/test-e2e.sh
index 00cb0256b1..95b6ce1faf 100755
--- a/scripts/ci/test-e2e.sh
+++ b/scripts/ci/test-e2e.sh
@@ -14,12 +14,6 @@ travisFoldStart "test.e2e.buildPackages"
 travisFoldEnd "test.e2e.buildPackages"
 
 
-if [[ ${TRAVIS:-} ]]; then
-  travisFoldStart "test.e2e.xvfb-start"
-    sh -e /etc/init.d/xvfb start
-  travisFoldEnd "test.e2e.xvfb-start"
-fi
-
 travisFoldStart "test.e2e.publicApi"
   $(npm bin)/gulp public-api:enforce
 travisFoldEnd "test.e2e.publicApi"
diff --git a/scripts/ci/test-js.sh b/scripts/ci/test-js.sh
index b9c6d8020d..b3877a07df 100755
--- a/scripts/ci/test-js.sh
+++ b/scripts/ci/test-js.sh
@@ -30,18 +30,11 @@ travisFoldEnd "test.unit.node"
 # rebuild to revert files in @angular/compiler/test
 # TODO(tbosch): remove this and teach karma to serve the right files
 travisFoldStart "test.unit.rebuildHack"
-  node dist/tools/@angular/tsc-wrapped/src/main -p packages/tsconfig.json
-  node dist/tools/@angular/tsc-wrapped/src/main -p modules/tsconfig.json
+  node dist/packages-dist/tsc-wrapped/src/main -p packages/tsconfig.json
+  node dist/packages-dist/tsc-wrapped/src/main -p modules/tsconfig.json
 travisFoldStart "test.unit.rebuildHack"
 
 
-if [[ ${TRAVIS} ]]; then
-  travisFoldStart "test.unit.xvfb-start"
-    sh -e /etc/init.d/xvfb start
-  travisFoldEnd "test.unit.xvfb-start"
-fi
-
-
 travisFoldStart "test.unit.localChrome"
   $(npm bin)/karma start ./karma-js.conf.js --single-run --browsers=${KARMA_JS_BROWSERS}
 travisFoldEnd "test.unit.localChrome"
diff --git a/scripts/ci/test.sh b/scripts/ci/test.sh
index 20aee520d4..d8f08932b3 100755
--- a/scripts/ci/test.sh
+++ b/scripts/ci/test.sh
@@ -43,4 +43,10 @@ case ${CI_MODE} in
   aio)
     ${thisDir}/test-aio.sh
     ;;
+  aio_e2e)
+    ${thisDir}/test-aio-e2e.sh
+    ;;
+  bazel)
+    ${thisDir}/test-bazel.sh
+    ;;
 esac
diff --git a/scripts/cldr/gen_plural_rules.js b/scripts/cldr/gen_plural_rules.js
index 183d74b1dc..0000a82949 100644
--- a/scripts/cldr/gen_plural_rules.js
+++ b/scripts/cldr/gen_plural_rules.js
@@ -14,6 +14,7 @@ const ruleToLang = {};
 const variants = [];
 const localeToVariant = {};
 const DEFAULT_RULE = `function anonymous(n\n/**/) {\nreturn"other"\n}`;
+const EMPTY_RULE = `function anonymous(n\n/**/) {\n\n}`;
 
 locales.forEach(locale => {
   const rule = normalizeRule(cldr.extractPluralRuleFunction(locale).toString());
@@ -32,16 +33,15 @@ locales.forEach(locale => {
   ruleToLang[rule].push(lang);
 });
 
-var nextVariantCode = 'a'.charCodeAt(0);
+let nextVariantCode = 'a'.charCodeAt(0);
 
 variants.forEach(locale => {
   const rule = normalizeRule(cldr.extractPluralRuleFunction(locale).toString());
-
   if (!rule) {
     return;
   }
 
-  var mapTo = null;
+  let mapTo = null;
 
   if (ruleToLang[rule]) {
     mapTo = ruleToLang[rule][0];
@@ -65,27 +65,25 @@ function generateCode() {
 
   return `
 // This is generated code DO NOT MODIFY
-// see angular2/script/cldr/gen_plural_rules.js
+// see angular/script/cldr/gen_plural_rules.js
 
-enum Plural {
+/** @experimental */
+export enum Plural {
   Zero,
   One,
   Two,
   Few,
   Many,
-  Other
+  Other,
 }
-
-function getPluralCase(locale: string, n: number|string): Plural {
 ` + generateVars() +
     generateRules() + `
 }`;
 }
 
-
 function generateRules() {
   const codeParts = [`
-const lang = locale.split('_')[0].toLowerCase();
+const lang = locale.split('-')[0].toLowerCase();
 
 switch (lang) {`];
 
@@ -95,8 +93,11 @@ switch (lang) {`];
     codeParts.push(`    ${rule}`);
   });
 
-  codeParts.push(`  default:
-   return Plural.Other;
+  codeParts.push(`  // When there is no specification, the default is always other
+  // see http://cldr.unicode.org/index/cldr-spec/plural-rules
+  // "other (required—general plural form — also used if the language only has a single form)"
+  default:
+    return Plural.Other;
 }`);
 
   return codeParts.join('\n');
@@ -104,17 +105,22 @@ switch (lang) {`];
 
 function generateVars(){
   return `
-function getPluralCase(locale: string, nLike: number | string): Plural {
+/**
+ * Returns the plural case based on the locale
+ *
+ * @experimental
+ */
+export function getPluralCase(locale: string, nLike: number | string): Plural {
 // TODO(vicb): lazy compute
 if (typeof nLike === 'string') {
   nLike = parseInt(<string>nLike, 10);
 }
 const n: number = nLike as number;
-const nDecimal = n.toString().replace(/^[^.]*\\.?/, ""); 
+const nDecimal = n.toString().replace(/^[^.]*\\.?/, ''); 
 const i = Math.floor(Math.abs(n));
 const v = nDecimal.length;
 const f = parseInt(nDecimal, 10); 
-const t = parseInt(n.toString().replace(/^[^.]*\\.?|0+$/g,""), 10) || 0;
+const t = parseInt(n.toString().replace(/^[^.]*\\.?|0+$/g,''), 10) || 0;
 `;
 }
 
@@ -126,12 +132,11 @@ function checkMapping() {
   }
 }
 
-
 /**
  * If the language rule do not match an existing language rule, flag it as variant and handle it at the end
  */
 function getVariantLang(locale, rule) {
-  var lang = locale.split('_')[0];
+  let lang = locale.split('_')[0];
 
   if (!langToRule[lang]) {
     langToRule[lang] = rule;
@@ -147,7 +152,7 @@ function getVariantLang(locale, rule) {
 }
 
 function normalizeRule(fn) {
-  if (fn === DEFAULT_RULE) return;
+  if (fn === DEFAULT_RULE || fn === EMPTY_RULE) return;
 
   return fn
     .replace(toRegExp('function anonymous(n\n/**/) {\n'), '')
@@ -171,4 +176,4 @@ function normalizeRule(fn) {
 
 function toRegExp(s) {
   return new RegExp(s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1'), 'g');
-}
\ No newline at end of file
+}
diff --git a/scripts/sauce/sauce_connect_setup.sh b/scripts/sauce/sauce_connect_setup.sh
index 1538c69947..71e0cd312b 100755
--- a/scripts/sauce/sauce_connect_setup.sh
+++ b/scripts/sauce/sauce_connect_setup.sh
@@ -22,9 +22,14 @@ CONNECT_URL="https://saucelabs.com/downloads/sc-${SAUCE_CONNECT_VERSION}-linux.t
 CONNECT_DIR="/tmp/sauce-connect-$RANDOM"
 CONNECT_DOWNLOAD="sc-latest-linux.tar.gz"
 
-CONNECT_LOG="$LOGS_DIR/sauce-connect"
-CONNECT_STDOUT="$LOGS_DIR/sauce-connect.stdout"
-CONNECT_STDERR="$LOGS_DIR/sauce-connect.stderr"
+# logging disabled because it's seems to be overwhelming travis and causing flakes
+# when we are cat-ing the log in print-logs.sh
+# CONNECT_LOG="$LOGS_DIR/sauce-connect"
+# CONNECT_STDOUT="$LOGS_DIR/sauce-connect.stdout"
+# CONNECT_STDERR="$LOGS_DIR/sauce-connect.stderr"
+CONNECT_LOG="/dev/null"
+CONNECT_STDOUT="/dev/null"
+CONNECT_STDERR="/dev/null"
 
 # Get Connect and start it
 mkdir -p $CONNECT_DIR
diff --git a/test-main.js b/test-main.js
index a99be131d4..d496715f52 100644
--- a/test-main.js
+++ b/test-main.js
@@ -40,6 +40,8 @@ System.config({
     '@angular/compiler/testing': {main: 'index.js', defaultExtension: 'js'},
     '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
     '@angular/common/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/common/http/testing': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/common/http': {main: 'index.js', defaultExtension: 'js'},
     '@angular/common': {main: 'index.js', defaultExtension: 'js'},
     '@angular/forms': {main: 'index.js', defaultExtension: 'js'},
     // remove after all tests imports are fixed
diff --git a/test.sh b/test.sh
index dc51694db7..b04cb50b76 100755
--- a/test.sh
+++ b/test.sh
@@ -18,11 +18,12 @@ else
   fi
   echo "Compiling tools..."
   $(npm bin)/tsc -p tools
+  $(npm bin)/tsc -p packages/tsc-wrapped
   if [[ $1 == 'node' ]]; then
     # Note: .metadata.json files are needed for the language service tests!
     echo "Creating .metadata.json files..."
-    node dist/tools/@angular/tsc-wrapped/src/main -p packages
-    node dist/tools/@angular/tsc-wrapped/src/main -p modules
+    node dist/all/@angular/tsc-wrapped/src/main -p packages
+    node dist/all/@angular/tsc-wrapped/src/main -p modules
   fi
   node dist/tools/tsc-watch/ $1 watch
 fi
diff --git a/tools/check-environment.js b/tools/check-environment.js
index 3f388e5554..f84fa0dd38 100644
--- a/tools/check-environment.js
+++ b/tools/check-environment.js
@@ -38,7 +38,7 @@ if (issues.length) {
   console.error(
       'Your environment doesn\'t provide the prerequisite dependencies.\n' +
       'Please fix the issues listed above and then rerun the gulp command.\n' +
-      'Check out https://github.com/angular/angular/blob/master/DEVELOPER.md for more info.');
+      'Check out https://github.com/angular/angular/blob/master/docs/DEVELOPER.md for more info.');
   process.exit(1);
 }
 
diff --git a/tools/cjs-jasmine/index-tools.ts b/tools/cjs-jasmine/index-tools.ts
index b15f58fdbd..b584b66c37 100644
--- a/tools/cjs-jasmine/index-tools.ts
+++ b/tools/cjs-jasmine/index-tools.ts
@@ -31,8 +31,6 @@ function toolsDirRequire(moduleId: string) {
 // Tun on full stack traces in errors to help debugging
 (<any>Error)['stackTraceLimit'] = Infinity;
 
-jrunner.jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
-
 // Support passing multiple globs
 var globsIndex = process.argv.indexOf('--');
 var args: string[];
diff --git a/tools/code.angularjs.org/publish.sh b/tools/code.angularjs.org/publish.sh
index 580dfbb585..3638616c2e 100755
--- a/tools/code.angularjs.org/publish.sh
+++ b/tools/code.angularjs.org/publish.sh
@@ -30,11 +30,12 @@ function prepare {
 
 
   if [ -d "$REPO_DIR" ]; then
-    cd $REPO_DIR
-    git fetch --update-shallow origin
-    git checkout master
-    git merge --ff-only origin/master
-    cd -
+    (
+      cd $REPO_DIR
+      git fetch --update-shallow origin
+      git checkout master
+      git merge --ff-only origin/master
+    )
   else
     echo "-- Cloning code.angularjs.org into $REPO_DIR"
     git clone git@github.com:angular/code.angularjs.org.git $REPO_DIR --depth=1
diff --git a/tools/gulp-tasks/build.js b/tools/gulp-tasks/build.js
index e8d94013da..2fa243b8d7 100644
--- a/tools/gulp-tasks/build.js
+++ b/tools/gulp-tasks/build.js
@@ -1,6 +1,14 @@
 
-module.exports = (gulp) => (done) => {
+module.exports = {
+  // build everything and generate bundles
+  'all': (gulp) => (done) => execBuild(done),
+  // same as all without the bundling part - faster / lower memory usage
+  'no-bundle': (gulp) => (done) => execBuild(done, '--bundle=false'),
+};
+
+function execBuild(done, args = '') {
   const path = require('path');
   const childProcess = require('child_process');
-  childProcess.exec(path.join(__dirname, '../../build.sh'), done);
-};
+  // increase maxbuffer to address out of memory exception when running certain tasks
+  childProcess.exec(path.join(__dirname, `../../build.sh ${args}`), {maxBuffer: 300 * 1024}, done);
+}
\ No newline at end of file
diff --git a/tools/gulp-tasks/public-api.js b/tools/gulp-tasks/public-api.js
index ade38d2f85..6d14f929f2 100644
--- a/tools/gulp-tasks/public-api.js
+++ b/tools/gulp-tasks/public-api.js
@@ -1,6 +1,7 @@
 const entrypoints = [
   'dist/packages-dist/core/core.d.ts', 'dist/packages-dist/core/testing.d.ts',
   'dist/packages-dist/common/common.d.ts', 'dist/packages-dist/common/testing.d.ts',
+  'dist/packages-dist/common/http.d.ts', 'dist/packages-dist/common/http/testing.d.ts',
   // The API surface of the compiler is currently unstable - all of the important APIs are exposed
   // via @angular/core, @angular/platform-browser or @angular/platform-browser-dynamic instead.
   //'dist/packages-dist/compiler/index.d.ts',
diff --git a/tools/ngc-wrapped/BUILD.bazel b/tools/ngc-wrapped/BUILD.bazel
new file mode 100644
index 0000000000..fb5d5cf7ac
--- /dev/null
+++ b/tools/ngc-wrapped/BUILD.bazel
@@ -0,0 +1,19 @@
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "nodejs_binary")
+
+licenses(["notice"])  # Apache 2.0
+
+ts_library(
+    name = "ngc_lib",
+    srcs = ["index.ts"],
+    deps = [
+        "//packages/compiler-cli",
+        "@build_bazel_rules_typescript//internal/tsc_wrapped"
+    ],
+)
+
+nodejs_binary(
+    name = "ngc-wrapped",
+    entry_point = "__main__/tools/ngc-wrapped/index.js",
+    data = [":ngc_lib"],
+    visibility = ["//visibility:public"],
+)
\ No newline at end of file
diff --git a/tools/ngc-wrapped/README.md b/tools/ngc-wrapped/README.md
new file mode 100644
index 0000000000..4f4487e48b
--- /dev/null
+++ b/tools/ngc-wrapped/README.md
@@ -0,0 +1,6 @@
+# ngc-wrapped
+
+This is a wrapper around @angular/compiler-cli that makes ngc run under Bazel.
+It should be identical to https://github.com/bazelbuild/rules_angular/tree/master/internal/ngc
+however that is built against Angular packages from npm, while ngc-wrapped is
+built using Bazel against Angular at HEAD.
diff --git a/tools/ngc-wrapped/index.ts b/tools/ngc-wrapped/index.ts
new file mode 100644
index 0000000000..37d88317dd
--- /dev/null
+++ b/tools/ngc-wrapped/index.ts
@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// TODO(chuckj): Remove the requirment for a fake 'reflect` implementation from
+// the compiler
+import 'reflect-metadata';
+import {performCompilation} from '@angular/compiler-cli';
+import * as fs from 'fs';
+import * as path from 'path';
+// Note, the tsc_wrapped module comes from rules_typescript, not from @angular/tsc-wrapped
+import {parseTsconfig} from 'tsc_wrapped';
+
+function main(args: string[]) {
+  const [{options, bazelOpts, files, config}] = parseTsconfig(args[1]);
+  const ngOptions: {expectedOut: string[]} = (config as any).angularCompilerOptions;
+
+  const parsedArgs = require('minimist')(args);
+  const project = parsedArgs.p || parsedArgs.project || '.';
+
+  const projectDir = fs.lstatSync(project).isFile() ? path.dirname(project) : project;
+
+  // file names in tsconfig are resolved relative to this absolute path
+  const basePath = path.resolve(process.cwd(), projectDir);
+  const result = performCompilation(basePath, files, options, ngOptions, undefined);
+
+  if (result === 0) {
+    // Ensure that expected output files exist.
+    if (ngOptions && ngOptions.expectedOut) {
+      for (const out of ngOptions.expectedOut) {
+        fs.appendFileSync(out, '', 'utf-8');
+      }
+    }
+  }
+
+  return result;
+}
+
+if (require.main === module) {
+  process.exitCode = main(process.argv.slice(2));
+}
diff --git a/tools/public_api_guard/animations/animations.d.ts b/tools/public_api_guard/animations/animations.d.ts
index cb91d7c925..d395e86ebf 100644
--- a/tools/public_api_guard/animations/animations.d.ts
+++ b/tools/public_api_guard/animations/animations.d.ts
@@ -1,6 +1,14 @@
 /** @experimental */
 export declare function animate(timings: string | number, styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null): AnimationAnimateMetadata;
 
+/** @experimental */
+export declare function animateChild(options?: AnimateChildOptions | null): AnimationAnimateChildMetadata;
+
+/** @experimental */
+export interface AnimateChildOptions extends AnimationOptions {
+    duration?: number | string;
+}
+
 /** @experimental */
 export declare type AnimateTimings = {
     duration: number;
@@ -8,12 +16,31 @@ export declare type AnimateTimings = {
     easing: string | null;
 };
 
+/** @experimental */
+export declare function animation(steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationReferenceMetadata;
+
+/** @experimental */
+export interface AnimationAnimateChildMetadata extends AnimationMetadata {
+    options: AnimationOptions | null;
+}
+
 /** @experimental */
 export interface AnimationAnimateMetadata extends AnimationMetadata {
     styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null;
     timings: string | number | AnimateTimings;
 }
 
+/** @experimental */
+export interface AnimationAnimateRefMetadata extends AnimationMetadata {
+    animation: AnimationReferenceMetadata;
+    options: AnimationOptions | null;
+}
+
+/** @experimental */
+export declare abstract class AnimationBuilder {
+    abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory;
+}
+
 /** @experimental */
 export interface AnimationEvent {
     element: any;
@@ -24,8 +51,14 @@ export interface AnimationEvent {
     triggerName: string;
 }
 
+/** @experimental */
+export declare abstract class AnimationFactory {
+    abstract create(element: any, options?: AnimationOptions): AnimationPlayer;
+}
+
 /** @experimental */
 export interface AnimationGroupMetadata extends AnimationMetadata {
+    options: AnimationOptions | null;
     steps: AnimationMetadata[];
 }
 
@@ -46,33 +79,75 @@ export declare const enum AnimationMetadataType {
     Sequence = 2,
     Group = 3,
     Animate = 4,
-    KeyframeSequence = 5,
+    Keyframes = 5,
     Style = 6,
+    Trigger = 7,
+    Reference = 8,
+    AnimateChild = 9,
+    AnimateRef = 10,
+    Query = 11,
+    Stagger = 12,
 }
 
 /** @experimental */
-export declare abstract class AnimationPlayer {
+export interface AnimationOptions {
+    delay?: number | string;
+    params?: {
+        [name: string]: any;
+    };
+}
+
+/** @experimental */
+export interface AnimationPlayer {
+    beforeDestroy?: () => any;
     parentPlayer: AnimationPlayer | null;
-    abstract destroy(): void;
-    abstract finish(): void;
-    abstract getPosition(): number;
-    abstract hasStarted(): boolean;
-    abstract init(): void;
-    abstract onDestroy(fn: () => void): void;
-    abstract onDone(fn: () => void): void;
-    abstract onStart(fn: () => void): void;
-    abstract pause(): void;
-    abstract play(): void;
-    abstract reset(): void;
-    abstract restart(): void;
-    abstract setPosition(p: any): void;
+    readonly totalTime: number;
+    destroy(): void;
+    finish(): void;
+    getPosition(): number;
+    hasStarted(): boolean;
+    init(): void;
+    onDestroy(fn: () => void): void;
+    onDone(fn: () => void): void;
+    onStart(fn: () => void): void;
+    pause(): void;
+    play(): void;
+    reset(): void;
+    restart(): void;
+    setPosition(p: any): void;
+}
+
+/** @experimental */
+export interface AnimationQueryMetadata extends AnimationMetadata {
+    animation: AnimationMetadata | AnimationMetadata[];
+    options: AnimationQueryOptions | null;
+    selector: string;
+}
+
+/** @experimental */
+export interface AnimationQueryOptions extends AnimationOptions {
+    limit?: number;
+    optional?: boolean;
+}
+
+/** @experimental */
+export interface AnimationReferenceMetadata extends AnimationMetadata {
+    animation: AnimationMetadata | AnimationMetadata[];
+    options: AnimationOptions | null;
 }
 
 /** @experimental */
 export interface AnimationSequenceMetadata extends AnimationMetadata {
+    options: AnimationOptions | null;
     steps: AnimationMetadata[];
 }
 
+/** @experimental */
+export interface AnimationStaggerMetadata extends AnimationMetadata {
+    animation: AnimationMetadata | AnimationMetadata[];
+    timings: string | number;
+}
+
 /** @experimental */
 export interface AnimationStateMetadata extends AnimationMetadata {
     name: string;
@@ -81,31 +156,37 @@ export interface AnimationStateMetadata extends AnimationMetadata {
 
 /** @experimental */
 export interface AnimationStyleMetadata extends AnimationMetadata {
-    offset?: number;
-    styles: {
+    offset: number | null;
+    styles: '*' | {
         [key: string]: string | number;
-    } | {
+    } | Array<{
         [key: string]: string | number;
-    }[];
+    } | '*'>;
 }
 
 /** @experimental */
 export interface AnimationTransitionMetadata extends AnimationMetadata {
     animation: AnimationMetadata | AnimationMetadata[];
-    expr: string | ((fromState: string, toState: string) => boolean);
+    expr: string;
+    options: AnimationOptions | null;
 }
 
 /** @experimental */
-export interface AnimationTriggerMetadata {
+export interface AnimationTriggerMetadata extends AnimationMetadata {
     definitions: AnimationMetadata[];
     name: string;
+    options: {
+        params?: {
+            [name: string]: any;
+        };
+    } | null;
 }
 
 /** @experimental */
 export declare const AUTO_STYLE = "*";
 
 /** @experimental */
-export declare function group(steps: AnimationMetadata[]): AnimationGroupMetadata;
+export declare function group(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationGroupMetadata;
 
 /** @experimental */
 export declare function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata;
@@ -113,6 +194,7 @@ export declare function keyframes(steps: AnimationStyleMetadata[]): AnimationKey
 /** @experimental */
 export declare class NoopAnimationPlayer implements AnimationPlayer {
     parentPlayer: AnimationPlayer | null;
+    totalTime: number;
     constructor();
     destroy(): void;
     finish(): void;
@@ -130,20 +212,29 @@ export declare class NoopAnimationPlayer implements AnimationPlayer {
 }
 
 /** @experimental */
-export declare function sequence(steps: AnimationMetadata[]): AnimationSequenceMetadata;
+export declare function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions | null): AnimationQueryMetadata;
+
+/** @experimental */
+export declare function sequence(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationSequenceMetadata;
+
+/** @experimental */
+export declare function stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata;
 
 /** @experimental */
 export declare function state(name: string, styles: AnimationStyleMetadata): AnimationStateMetadata;
 
 /** @experimental */
-export declare function style(tokens: {
+export declare function style(tokens: '*' | {
     [key: string]: string | number;
-} | Array<{
+} | Array<'*' | {
     [key: string]: string | number;
 }>): AnimationStyleMetadata;
 
 /** @experimental */
-export declare function transition(stateChangeExpr: string | ((fromState: string, toState: string) => boolean), steps: AnimationMetadata | AnimationMetadata[]): AnimationTransitionMetadata;
+export declare function transition(stateChangeExpr: string, steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata;
 
 /** @experimental */
 export declare function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata;
+
+/** @experimental */
+export declare function useAnimation(animation: AnimationReferenceMetadata, options?: AnimationOptions | null): AnimationAnimateRefMetadata;
diff --git a/tools/public_api_guard/animations/browser.d.ts b/tools/public_api_guard/animations/browser.d.ts
index d589c56638..bc5b326649 100644
--- a/tools/public_api_guard/animations/browser.d.ts
+++ b/tools/public_api_guard/animations/browser.d.ts
@@ -3,5 +3,9 @@ export declare abstract class AnimationDriver {
     abstract animate(element: any, keyframes: {
         [key: string]: string | number;
     }[], duration: number, delay: number, easing?: string | null, previousPlayers?: any[]): any;
+    abstract computeStyle(element: any, prop: string, defaultValue?: string): string;
+    abstract containsElement(elm1: any, elm2: any): boolean;
+    abstract matchesElement(element: any, selector: string): boolean;
+    abstract query(element: any, selector: string, multi: boolean): any[];
     static NOOP: AnimationDriver;
 }
diff --git a/tools/public_api_guard/animations/browser/testing.d.ts b/tools/public_api_guard/animations/browser/testing.d.ts
index 8452f075a0..d551ebef61 100644
--- a/tools/public_api_guard/animations/browser/testing.d.ts
+++ b/tools/public_api_guard/animations/browser/testing.d.ts
@@ -3,11 +3,16 @@ export declare class MockAnimationDriver implements AnimationDriver {
     animate(element: any, keyframes: {
         [key: string]: string | number;
     }[], duration: number, delay: number, easing: string, previousPlayers?: any[]): MockAnimationPlayer;
+    computeStyle(element: any, prop: string, defaultValue?: string): string;
+    containsElement(elm1: any, elm2: any): boolean;
+    matchesElement(element: any, selector: string): boolean;
+    query(element: any, selector: string, multi: boolean): any[];
     static log: AnimationPlayer[];
 }
 
 /** @experimental */
 export declare class MockAnimationPlayer extends NoopAnimationPlayer {
+    currentSnapshot: ɵStyleData;
     delay: number;
     duration: number;
     easing: string;
@@ -22,6 +27,9 @@ export declare class MockAnimationPlayer extends NoopAnimationPlayer {
     constructor(element: any, keyframes: {
         [key: string]: string | number;
     }[], duration: number, delay: number, easing: string, previousPlayers: any[]);
+    beforeDestroy(): void;
     destroy(): void;
     finish(): void;
+    hasStarted(): boolean;
+    play(): void;
 }
diff --git a/tools/public_api_guard/common/common.d.ts b/tools/public_api_guard/common/common.d.ts
index 9f90b3a0de..3160d61883 100644
--- a/tools/public_api_guard/common/common.d.ts
+++ b/tools/public_api_guard/common/common.d.ts
@@ -33,6 +33,9 @@ export declare class DecimalPipe implements PipeTransform {
     transform(value: any, digits?: string): string | null;
 }
 
+/** @stable */
+export declare const DOCUMENT: InjectionToken<Document>;
+
 /** @stable */
 export declare class HashLocationStrategy extends LocationStrategy {
     constructor(_platformLocation: PlatformLocation, _baseHref?: string);
diff --git a/tools/public_api_guard/common/http.d.ts b/tools/public_api_guard/common/http.d.ts
new file mode 100644
index 0000000000..789e548bbf
--- /dev/null
+++ b/tools/public_api_guard/common/http.d.ts
@@ -0,0 +1,1278 @@
+/** @experimental */
+export declare const HTTP_INTERCEPTORS: InjectionToken<HttpInterceptor[]>;
+
+/** @experimental */
+export declare abstract class HttpBackend implements HttpHandler {
+    abstract handle(req: HttpRequest<any>): Observable<HttpEvent<any>>;
+}
+
+/** @experimental */
+export declare class HttpClient {
+    constructor(handler: HttpHandler);
+    delete<T>(url: string, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    delete(url: string, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    delete(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    delete(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    delete(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    delete(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    delete<T>(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    delete(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    delete<T>(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    get(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    get(url: string, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    get(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    get(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    get(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    get(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    get(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    get<T>(url: string, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    get(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    get<T>(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    get(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    get(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    get(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    get(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    get<T>(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    head<T>(url: string, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    head(url: string, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    head<T>(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    head(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    head(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    head(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    head(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    head<T>(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    head(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    head(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    head(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    head(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    head(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    head(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    head(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    jsonp<T>(url: string, callbackParam: string): Observable<T>;
+    jsonp(url: string, callbackParam: string): Observable<Object>;
+    options(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    options(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    options(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    options(url: string, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    options(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    options(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    options(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    options<T>(url: string, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    options<T>(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    options(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    options(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    options(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    options(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    options<T>(url: string, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    options(url: string, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    patch<T>(url: string, body: any | null, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    patch(url: string, body: any | null, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    patch<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    patch(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    patch<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    post(url: string, body: any | null, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    post<T>(url: string, body: any | null, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    post<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    post(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    post<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    put(url: string, body: any | null, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    put<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<T>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    put<T>(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<T>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Object>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    put(url: string, body: any | null, options: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    put<T>(url: string, body: any | null, options?: {
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<T>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        reportProgress?: boolean;
+        observe: 'events';
+        params?: HttpParams;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<any>>;
+    request<R>(method: string, url: string, options?: {
+        body?: any;
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        responseType?: 'json';
+        reportProgress?: boolean;
+        withCredentials?: boolean;
+    }): Observable<R>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<ArrayBuffer>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<Blob>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<string>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        params?: HttpParams;
+        observe: 'events';
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<ArrayBuffer>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<Blob>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        observe: 'events';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<string>>;
+    request<R>(req: HttpRequest<any>): Observable<HttpEvent<R>>;
+    request<R>(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        reportProgress?: boolean;
+        observe: 'events';
+        params?: HttpParams;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpEvent<R>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'arraybuffer';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<ArrayBuffer>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'blob';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Blob>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        observe: 'response';
+        params?: HttpParams;
+        reportProgress?: boolean;
+        responseType: 'text';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<string>>;
+    request(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        reportProgress?: boolean;
+        observe: 'response';
+        params?: HttpParams;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<Object>>;
+    request<R>(method: string, url: string, options: {
+        body?: any;
+        headers?: HttpHeaders;
+        reportProgress?: boolean;
+        observe: 'response';
+        params?: HttpParams;
+        responseType?: 'json';
+        withCredentials?: boolean;
+    }): Observable<HttpResponse<R>>;
+    request(method: string, url: string, options?: {
+        body?: any;
+        headers?: HttpHeaders;
+        observe?: 'body';
+        params?: HttpParams;
+        responseType?: 'json';
+        reportProgress?: boolean;
+        withCredentials?: boolean;
+    }): Observable<Object>;
+    request(method: string, url: string, options?: {
+        body?: any;
+        headers?: HttpHeaders;
+        params?: HttpParams;
+        observe?: HttpObserve;
+        reportProgress?: boolean;
+        responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
+        withCredentials?: boolean;
+    }): Observable<any>;
+}
+
+/** @experimental */
+export declare class HttpClientJsonpModule {
+}
+
+/** @experimental */
+export declare class HttpClientModule {
+}
+
+/** @experimental */
+export declare class HttpClientXsrfModule {
+    static disable(): ModuleWithProviders;
+    static withOptions(options?: {
+        cookieName?: string;
+        headerName?: string;
+    }): ModuleWithProviders;
+}
+
+/** @experimental */
+export interface HttpDownloadProgressEvent extends HttpProgressEvent {
+    partialText?: string;
+    type: HttpEventType.DownloadProgress;
+}
+
+/** @experimental */
+export declare class HttpErrorResponse extends HttpResponseBase implements Error {
+    readonly error: any | null;
+    readonly message: string;
+    readonly name: string;
+    readonly ok: boolean;
+    constructor(init: {
+        error?: any;
+        headers?: HttpHeaders;
+        status?: number;
+        statusText?: string;
+        url?: string;
+    });
+}
+
+/** @experimental */
+export declare type HttpEvent<T> = HttpSentEvent | HttpHeaderResponse | HttpResponse<T> | HttpProgressEvent | HttpUserEvent<T>;
+
+/** @experimental */
+export declare enum HttpEventType {
+    Sent = 0,
+    UploadProgress = 1,
+    ResponseHeader = 2,
+    DownloadProgress = 3,
+    Response = 4,
+    User = 5,
+}
+
+/** @experimental */
+export declare abstract class HttpHandler {
+    abstract handle(req: HttpRequest<any>): Observable<HttpEvent<any>>;
+}
+
+/** @experimental */
+export declare class HttpHeaderResponse extends HttpResponseBase {
+    readonly type: HttpEventType.ResponseHeader;
+    constructor(init?: {
+        headers?: HttpHeaders;
+        status?: number;
+        statusText?: string;
+        url?: string;
+    });
+    clone(update?: {
+        headers?: HttpHeaders;
+        status?: number;
+        statusText?: string;
+        url?: string;
+    }): HttpHeaderResponse;
+}
+
+/** @experimental */
+export declare class HttpHeaders {
+    constructor(headers?: string | {
+        [name: string]: string | string[];
+    });
+    append(name: string, value: string | string[]): HttpHeaders;
+    delete(name: string, value?: string | string[]): HttpHeaders;
+    get(name: string): string | null;
+    getAll(name: string): string[] | null;
+    has(name: string): boolean;
+    keys(): string[];
+    set(name: string, value: string | string[]): HttpHeaders;
+}
+
+/** @experimental */
+export interface HttpInterceptor {
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
+}
+
+/** @experimental */
+export interface HttpParameterCodec {
+    decodeKey(key: string): string;
+    decodeValue(value: string): string;
+    encodeKey(key: string): string;
+    encodeValue(value: string): string;
+}
+
+/** @experimental */
+export declare class HttpParams {
+    constructor(options?: {
+        fromString?: string;
+        encoder?: HttpParameterCodec;
+    });
+    append(param: string, value: string): HttpParams;
+    delete(param: string, value?: string): HttpParams;
+    get(param: string): string | null;
+    getAll(param: string): string[] | null;
+    has(param: string): boolean;
+    keys(): string[];
+    set(param: string, value: string): HttpParams;
+    toString(): string;
+}
+
+/** @experimental */
+export interface HttpProgressEvent {
+    loaded: number;
+    total?: number;
+    type: HttpEventType.DownloadProgress | HttpEventType.UploadProgress;
+}
+
+/** @experimental */
+export declare class HttpRequest<T> {
+    readonly body: T | null;
+    readonly headers: HttpHeaders;
+    readonly method: string;
+    readonly params: HttpParams;
+    readonly reportProgress: boolean;
+    readonly responseType: 'arraybuffer' | 'blob' | 'json' | 'text';
+    readonly url: string;
+    readonly urlWithParams: string;
+    readonly withCredentials: boolean;
+    constructor(method: 'DELETE' | 'GET' | 'HEAD' | 'JSONP' | 'OPTIONS', url: string, init?: {
+        headers?: HttpHeaders;
+        reportProgress?: boolean;
+        params?: HttpParams;
+        responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
+        withCredentials?: boolean;
+    });
+    constructor(method: 'POST' | 'PUT' | 'PATCH', url: string, body: T | null, init?: {
+        headers?: HttpHeaders;
+        reportProgress?: boolean;
+        params?: HttpParams;
+        responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
+        withCredentials?: boolean;
+    });
+    constructor(method: string, url: string, body: T | null, init?: {
+        headers?: HttpHeaders;
+        reportProgress?: boolean;
+        params?: HttpParams;
+        responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
+        withCredentials?: boolean;
+    });
+    clone(): HttpRequest<T>;
+    clone(update: {
+        headers?: HttpHeaders;
+        reportProgress?: boolean;
+        params?: HttpParams;
+        responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
+        withCredentials?: boolean;
+        body?: T | null;
+        method?: string;
+        url?: string;
+        setHeaders?: {
+            [name: string]: string | string[];
+        };
+        setParams?: {
+            [param: string]: string;
+        };
+    }): HttpRequest<T>;
+    clone<V>(update: {
+        headers?: HttpHeaders;
+        reportProgress?: boolean;
+        params?: HttpParams;
+        responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
+        withCredentials?: boolean;
+        body?: V | null;
+        method?: string;
+        url?: string;
+        setHeaders?: {
+            [name: string]: string | string[];
+        };
+        setParams?: {
+            [param: string]: string;
+        };
+    }): HttpRequest<V>;
+    detectContentTypeHeader(): string | null;
+    serializeBody(): ArrayBuffer | Blob | FormData | string | null;
+}
+
+/** @experimental */
+export declare class HttpResponse<T> extends HttpResponseBase {
+    readonly body: T | null;
+    readonly type: HttpEventType.Response;
+    constructor(init?: {
+        body?: T | null;
+        headers?: HttpHeaders;
+        status?: number;
+        statusText?: string;
+        url?: string;
+    });
+    clone(): HttpResponse<T>;
+    clone(update: {
+        headers?: HttpHeaders;
+        status?: number;
+        statusText?: string;
+        url?: string;
+    }): HttpResponse<T>;
+    clone<V>(update: {
+        body?: V | null;
+        headers?: HttpHeaders;
+        status?: number;
+        statusText?: string;
+        url?: string;
+    }): HttpResponse<V>;
+}
+
+/** @experimental */
+export declare abstract class HttpResponseBase {
+    readonly headers: HttpHeaders;
+    readonly ok: boolean;
+    readonly status: number;
+    readonly statusText: string;
+    readonly type: HttpEventType.Response | HttpEventType.ResponseHeader;
+    readonly url: string | null;
+    constructor(init: {
+        headers?: HttpHeaders;
+        status?: number;
+        statusText?: string;
+        url?: string;
+    }, defaultStatus?: number, defaultStatusText?: string);
+}
+
+/** @experimental */
+export interface HttpSentEvent {
+    type: HttpEventType.Sent;
+}
+
+/** @experimental */
+export declare class HttpUrlEncodingCodec implements HttpParameterCodec {
+    decodeKey(k: string): string;
+    decodeValue(v: string): string;
+    encodeKey(k: string): string;
+    encodeValue(v: string): string;
+}
+
+/** @experimental */
+export interface HttpUserEvent<T> {
+    type: HttpEventType.User;
+}
+
+/** @experimental */
+export declare class HttpXhrBackend implements HttpBackend {
+    constructor(xhrFactory: XhrFactory);
+    handle(req: HttpRequest<any>): Observable<HttpEvent<any>>;
+}
+
+/** @experimental */
+export declare abstract class HttpXsrfTokenExtractor {
+    abstract getToken(): string | null;
+}
+
+/** @experimental */
+export declare class JsonpClientBackend implements HttpBackend {
+    constructor(callbackMap: JsonpCallbackContext, document: any);
+    handle(req: HttpRequest<never>): Observable<HttpEvent<any>>;
+}
+
+/** @experimental */
+export declare class JsonpInterceptor {
+    constructor(jsonp: JsonpClientBackend);
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
+}
+
+/** @experimental */
+export declare abstract class XhrFactory {
+    abstract build(): XMLHttpRequest;
+}
diff --git a/tools/public_api_guard/common/http/testing.d.ts b/tools/public_api_guard/common/http/testing.d.ts
new file mode 100644
index 0000000000..b01b2eb03c
--- /dev/null
+++ b/tools/public_api_guard/common/http/testing.d.ts
@@ -0,0 +1,47 @@
+/** @experimental */
+export declare class HttpClientTestingModule {
+}
+
+/** @experimental */
+export declare abstract class HttpTestingController {
+    abstract expectNone(url: string, description?: string): void;
+    abstract expectNone(params: RequestMatch, description?: string): void;
+    abstract expectNone(matchFn: ((req: HttpRequest<any>) => boolean), description?: string): void;
+    abstract expectNone(match: string | RequestMatch | ((req: HttpRequest<any>) => boolean), description?: string): void;
+    abstract expectOne(url: string, description?: string): TestRequest;
+    abstract expectOne(params: RequestMatch, description?: string): TestRequest;
+    abstract expectOne(matchFn: ((req: HttpRequest<any>) => boolean), description?: string): TestRequest;
+    abstract expectOne(match: string | RequestMatch | ((req: HttpRequest<any>) => boolean), description?: string): TestRequest;
+    abstract match(match: string | RequestMatch | ((req: HttpRequest<any>) => boolean)): TestRequest[];
+    abstract verify(opts?: {
+        ignoreCancelled?: boolean;
+    }): void;
+}
+
+/** @experimental */
+export interface RequestMatch {
+    method?: string;
+    url?: string;
+}
+
+/** @experimental */
+export declare class TestRequest {
+    readonly cancelled: boolean;
+    request: HttpRequest<any>;
+    constructor(request: HttpRequest<any>, observer: Observer<HttpEvent<any>>);
+    error(error: ErrorEvent, opts?: {
+        headers?: HttpHeaders | {
+            [name: string]: string | string[];
+        };
+        status?: number;
+        statusText?: string;
+    }): void;
+    event(event: HttpEvent<any>): void;
+    flush(body: ArrayBuffer | Blob | string | number | Object | (string | number | Object | null)[] | null, opts?: {
+        headers?: HttpHeaders | {
+            [name: string]: string | string[];
+        };
+        status?: number;
+        statusText?: string;
+    }): void;
+}
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
index c22966aa4a..609b804790 100644
--- a/tools/public_api_guard/core/core.d.ts
+++ b/tools/public_api_guard/core/core.d.ts
@@ -70,12 +70,12 @@ export declare type AnimationStateTransitionMetadata = any;
 
 /** @deprecated */
 export interface AnimationStyleMetadata extends AnimationMetadata {
-    offset?: number;
-    styles: {
+    offset: number | null;
+    styles: '*' | {
         [key: string]: string | number;
-    } | {
+    } | Array<{
         [key: string]: string | number;
-    }[];
+    } | '*'>;
 }
 
 /** @deprecated */
@@ -131,7 +131,7 @@ export declare abstract class ApplicationRef {
     readonly abstract isStable: Observable<boolean>;
     readonly abstract viewCount: number;
     abstract attachView(view: ViewRef): void;
-    abstract bootstrap<C>(componentFactory: ComponentFactory<C> | Type<C>): ComponentRef<C>;
+    abstract bootstrap<C>(componentFactory: ComponentFactory<C> | Type<C>, rootSelectorOrNode?: string | any): ComponentRef<C>;
     abstract detachView(view: ViewRef): void;
     abstract tick(): void;
 }
@@ -262,10 +262,10 @@ export declare const ContentChild: ContentChildDecorator;
 
 /** @stable */
 export interface ContentChildDecorator {
-    /** @stable */ (selector: Type<any> | Function | string, {read}?: {
+    /** @stable */ (selector: Type<any> | Function | string, opts?: {
         read?: any;
     }): any;
-    new (selector: Type<any> | Function | string, {read}?: {
+    new (selector: Type<any> | Function | string, opts?: {
         read?: any;
     }): ContentChild;
 }
@@ -275,11 +275,11 @@ export declare const ContentChildren: ContentChildrenDecorator;
 
 /** @stable */
 export interface ContentChildrenDecorator {
-    /** @stable */ (selector: Type<any> | Function | string, {descendants, read}?: {
+    /** @stable */ (selector: Type<any> | Function | string, opts?: {
         descendants?: boolean;
         read?: any;
     }): any;
-    new (selector: Type<any> | Function | string, {descendants, read}?: {
+    new (selector: Type<any> | Function | string, opts?: {
         descendants?: boolean;
         read?: any;
     }): Query;
@@ -341,7 +341,7 @@ export declare class DebugNode {
 
 /** @deprecated */
 export declare class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChanges<V> {
-    readonly collection: NgIterable<V>;
+    readonly collection: V[] | Iterable<V> | null;
     readonly isDirty: boolean;
     readonly length: number;
     constructor(trackByFn?: TrackByFunction<V>);
@@ -612,12 +612,9 @@ export declare type NgIterable<T> = Array<T> | Iterable<T>;
 export declare const NgModule: NgModuleDecorator;
 
 /** @experimental */
-export declare class NgModuleFactory<T> {
-    readonly moduleType: Type<T>;
-    constructor(_injectorClass: {
-        new (parentInjector: Injector): NgModuleInjector<T>;
-    }, _moduleType: Type<T>);
-    create(parentInjector: Injector | null): NgModuleRef<T>;
+export declare abstract class NgModuleFactory<T> {
+    readonly abstract moduleType: Type<T>;
+    abstract create(parentInjector: Injector | null): NgModuleRef<T>;
 }
 
 /** @stable */
@@ -653,9 +650,10 @@ export declare class NgZone {
     constructor({enableLongStackTrace}: {
         enableLongStackTrace?: boolean;
     });
-    run(fn: () => any): any;
-    runGuarded(fn: () => any): any;
-    runOutsideAngular(fn: () => any): any;
+    run<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T;
+    runGuarded<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[]): T;
+    runOutsideAngular<T>(fn: (...args: any[]) => T): T;
+    runTask<T>(fn: (...args: any[]) => T, applyThis?: any, applyArgs?: any[], name?: string): T;
     static assertInAngularZone(): void;
     static assertNotInAngularZone(): void;
     static isInAngularZone(): boolean;
@@ -716,7 +714,7 @@ export declare const PLATFORM_ID: InjectionToken<Object>;
 export declare const PLATFORM_INITIALIZER: InjectionToken<(() => void)[]>;
 
 /** @experimental */
-export declare const platformCore: (extraProviders?: Provider[]) => PlatformRef;
+export declare const platformCore: (extraProviders?: Provider[] | undefined) => PlatformRef;
 
 /** @stable */
 export declare abstract class PlatformRef {
@@ -846,7 +844,10 @@ export declare abstract class Renderer2 {
 
 /** @experimental */
 export declare abstract class RendererFactory2 {
+    abstract begin?(): void;
     abstract createRenderer(hostElement: any, type: RendererType2 | null): Renderer2;
+    abstract end?(): void;
+    abstract whenRenderingDone?(): Promise<any>;
 }
 
 /** @experimental */
@@ -891,7 +892,7 @@ export declare abstract class RootRenderer {
 
 /** @stable */
 export declare abstract class Sanitizer {
-    abstract sanitize(context: SecurityContext, value: string): string;
+    abstract sanitize(context: SecurityContext, value: {} | string | null): string | null;
 }
 
 /** @experimental */
@@ -1008,7 +1009,7 @@ export interface TrackByFunction<T> {
 }
 
 /** @deprecated */
-export declare function transition(stateChangeExpr: string | ((fromState: string, toState: string) => boolean), steps: AnimationMetadata | AnimationMetadata[]): AnimationTransitionMetadata;
+export declare function transition(stateChangeExpr: string, steps: AnimationMetadata | AnimationMetadata[]): AnimationTransitionMetadata;
 
 /** @experimental */
 export declare const TRANSLATIONS: InjectionToken<string>;
@@ -1058,10 +1059,10 @@ export declare const ViewChild: ViewChildDecorator;
 
 /** @stable */
 export interface ViewChildDecorator {
-    /** @stable */ (selector: Type<any> | Function | string, {read}?: {
+    /** @stable */ (selector: Type<any> | Function | string, opts?: {
         read?: any;
     }): any;
-    new (selector: Type<any> | Function | string, {read}?: {
+    new (selector: Type<any> | Function | string, opts?: {
         read?: any;
     }): ViewChild;
 }
@@ -1071,10 +1072,10 @@ export declare const ViewChildren: ViewChildrenDecorator;
 
 /** @stable */
 export interface ViewChildrenDecorator {
-    /** @stable */ (selector: Type<any> | Function | string, {read}?: {
+    /** @stable */ (selector: Type<any> | Function | string, opts?: {
         read?: any;
     }): any;
-    new (selector: Type<any> | Function | string, {read}?: {
+    new (selector: Type<any> | Function | string, opts?: {
         read?: any;
     }): ViewChildren;
 }
diff --git a/tools/public_api_guard/core/testing.d.ts b/tools/public_api_guard/core/testing.d.ts
index bf95c891ce..5f9acd7c7c 100644
--- a/tools/public_api_guard/core/testing.d.ts
+++ b/tools/public_api_guard/core/testing.d.ts
@@ -16,6 +16,7 @@ export declare class ComponentFixture<T> {
     destroy(): void;
     detectChanges(checkNoChanges?: boolean): void;
     isStable(): boolean;
+    whenRenderingDone(): Promise<any>;
     whenStable(): Promise<any>;
 }
 
@@ -31,6 +32,9 @@ export declare function discardPeriodicTasks(): void;
 /** @experimental */
 export declare function fakeAsync(fn: Function): (...args: any[]) => any;
 
+/** @experimental */
+export declare function flush(maxTurns?: number): number;
+
 /** @experimental */
 export declare function flushMicrotasks(): void;
 
@@ -69,11 +73,18 @@ export declare class TestBed implements Injector {
     createComponent<T>(component: Type<T>): ComponentFixture<T>;
     execute(tokens: any[], fn: Function, context?: any): any;
     get(token: any, notFoundValue?: any): any;
-    /** @experimental */ initTestEnvironment(ngModule: Type<any> | Type<any>[], platform: PlatformRef): void;
+    /** @experimental */ initTestEnvironment(ngModule: Type<any> | Type<any>[], platform: PlatformRef, aotSummaries?: () => any[]): void;
     overrideComponent(component: Type<any>, override: MetadataOverride<Component>): void;
     overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>): void;
     overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): void;
     overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): void;
+    overrideProvider(token: any, provider: {
+        useFactory: Function;
+        deps: any[];
+    }): void;
+    overrideProvider(token: any, provider: {
+        useValue: any;
+    }): void;
     /** @experimental */ resetTestEnvironment(): void;
     resetTestingModule(): void;
     static compileComponents(): Promise<any>;
@@ -84,11 +95,18 @@ export declare class TestBed implements Injector {
     static configureTestingModule(moduleDef: TestModuleMetadata): typeof TestBed;
     static createComponent<T>(component: Type<T>): ComponentFixture<T>;
     static get(token: any, notFoundValue?: any): any;
-    /** @experimental */ static initTestEnvironment(ngModule: Type<any> | Type<any>[], platform: PlatformRef): TestBed;
+    /** @experimental */ static initTestEnvironment(ngModule: Type<any> | Type<any>[], platform: PlatformRef, aotSummaries?: () => any[]): TestBed;
     static overrideComponent(component: Type<any>, override: MetadataOverride<Component>): typeof TestBed;
     static overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>): typeof TestBed;
     static overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): typeof TestBed;
     static overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): typeof TestBed;
+    static overrideProvider(token: any, provider: {
+        useFactory: Function;
+        deps: any[];
+    }): void;
+    static overrideProvider(token: any, provider: {
+        useValue: any;
+    }): void;
     static overrideTemplate(component: Type<any>, template: string): typeof TestBed;
     /** @experimental */ static resetTestEnvironment(): void;
     static resetTestingModule(): typeof TestBed;
diff --git a/tools/public_api_guard/forms/forms.d.ts b/tools/public_api_guard/forms/forms.d.ts
index 889a1fc264..fcd570bc0a 100644
--- a/tools/public_api_guard/forms/forms.d.ts
+++ b/tools/public_api_guard/forms/forms.d.ts
@@ -1,6 +1,6 @@
 /** @stable */
 export declare abstract class AbstractControl {
-    asyncValidator: AsyncValidatorFn;
+    asyncValidator: AsyncValidatorFn | null;
     readonly dirty: boolean;
     readonly disabled: boolean;
     readonly enabled: boolean;
@@ -15,48 +15,48 @@ export declare abstract class AbstractControl {
     readonly touched: boolean;
     readonly untouched: boolean;
     readonly valid: boolean;
-    validator: ValidatorFn;
+    validator: ValidatorFn | null;
     readonly value: any;
     readonly valueChanges: Observable<any>;
-    constructor(validator: ValidatorFn, asyncValidator: AsyncValidatorFn);
+    constructor(validator: ValidatorFn | null, asyncValidator: AsyncValidatorFn | null);
     clearAsyncValidators(): void;
     clearValidators(): void;
-    disable({onlySelf, emitEvent}?: {
+    disable(opts?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
-    enable({onlySelf, emitEvent}?: {
+    enable(opts?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
-    get(path: Array<string | number> | string): AbstractControl;
+    get(path: Array<string | number> | string): AbstractControl | null;
     getError(errorCode: string, path?: string[]): any;
     hasError(errorCode: string, path?: string[]): boolean;
-    markAsDirty({onlySelf}?: {
+    markAsDirty(opts?: {
         onlySelf?: boolean;
     }): void;
-    markAsPending({onlySelf}?: {
+    markAsPending(opts?: {
         onlySelf?: boolean;
     }): void;
-    markAsPristine({onlySelf}?: {
+    markAsPristine(opts?: {
         onlySelf?: boolean;
     }): void;
-    markAsTouched({onlySelf}?: {
+    markAsTouched(opts?: {
         onlySelf?: boolean;
     }): void;
-    markAsUntouched({onlySelf}?: {
+    markAsUntouched(opts?: {
         onlySelf?: boolean;
     }): void;
     abstract patchValue(value: any, options?: Object): void;
     abstract reset(value?: any, options?: Object): void;
     setAsyncValidators(newValidator: AsyncValidatorFn | AsyncValidatorFn[]): void;
-    setErrors(errors: ValidationErrors | null, {emitEvent}?: {
+    setErrors(errors: ValidationErrors | null, opts?: {
         emitEvent?: boolean;
     }): void;
     setParent(parent: FormGroup | FormArray): void;
-    setValidators(newValidator: ValidatorFn | ValidatorFn[]): void;
+    setValidators(newValidator: ValidatorFn | ValidatorFn[] | null): void;
     abstract setValue(value: any, options?: Object): void;
-    updateValueAndValidity({onlySelf, emitEvent}?: {
+    updateValueAndValidity(opts?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
@@ -64,21 +64,21 @@ export declare abstract class AbstractControl {
 
 /** @stable */
 export declare abstract class AbstractControlDirective {
-    readonly control: AbstractControl;
-    readonly dirty: boolean;
-    readonly disabled: boolean;
-    readonly enabled: boolean;
+    readonly abstract control: AbstractControl | null;
+    readonly dirty: boolean | null;
+    readonly disabled: boolean | null;
+    readonly enabled: boolean | null;
     readonly errors: ValidationErrors | null;
-    readonly invalid: boolean;
-    readonly path: string[];
-    readonly pending: boolean;
-    readonly pristine: boolean;
-    readonly statusChanges: Observable<any>;
-    readonly touched: boolean;
-    readonly untouched: boolean;
-    readonly valid: boolean;
+    readonly invalid: boolean | null;
+    readonly path: string[] | null;
+    readonly pending: boolean | null;
+    readonly pristine: boolean | null;
+    readonly statusChanges: Observable<any> | null;
+    readonly touched: boolean | null;
+    readonly untouched: boolean | null;
+    readonly valid: boolean | null;
     readonly value: any;
-    readonly valueChanges: Observable<any>;
+    readonly valueChanges: Observable<any> | null;
     getError(errorCode: string, path?: string[]): any;
     hasError(errorCode: string, path?: string[]): boolean;
     reset(value?: any): void;
@@ -86,11 +86,11 @@ export declare abstract class AbstractControlDirective {
 
 /** @stable */
 export declare class AbstractFormGroupDirective extends ControlContainer implements OnInit, OnDestroy {
-    readonly asyncValidator: AsyncValidatorFn;
+    readonly asyncValidator: AsyncValidatorFn | null;
     readonly control: FormGroup;
-    readonly formDirective: Form;
+    readonly formDirective: Form | null;
     readonly path: string[];
-    readonly validator: ValidatorFn;
+    readonly validator: ValidatorFn | null;
     ngOnDestroy(): void;
     ngOnInit(): void;
 }
@@ -109,7 +109,7 @@ export interface AsyncValidatorFn {
 export declare class CheckboxControlValueAccessor implements ControlValueAccessor {
     onChange: (_: any) => void;
     onTouched: () => void;
-    constructor(_renderer: Renderer, _elementRef: ElementRef);
+    constructor(_renderer: Renderer2, _elementRef: ElementRef);
     registerOnChange(fn: (_: any) => {}): void;
     registerOnTouched(fn: () => {}): void;
     setDisabledState(isDisabled: boolean): void;
@@ -125,10 +125,10 @@ export declare class CheckboxRequiredValidator extends RequiredValidator {
 export declare const COMPOSITION_BUFFER_MODE: InjectionToken<boolean>;
 
 /** @stable */
-export declare class ControlContainer extends AbstractControlDirective {
-    readonly formDirective: Form;
+export declare abstract class ControlContainer extends AbstractControlDirective {
+    readonly formDirective: Form | null;
     name: string;
-    readonly path: string[];
+    readonly path: string[] | null;
 }
 
 /** @stable */
@@ -143,7 +143,7 @@ export interface ControlValueAccessor {
 export declare class DefaultValueAccessor implements ControlValueAccessor {
     onChange: (_: any) => void;
     onTouched: () => void;
-    constructor(_renderer: Renderer, _elementRef: ElementRef, _compositionMode: boolean);
+    constructor(_renderer: Renderer2, _elementRef: ElementRef, _compositionMode: boolean);
     _compositionEnd(value: any): void;
     _compositionStart(): void;
     _handleInput(value: any): void;
@@ -175,22 +175,22 @@ export interface Form {
 export declare class FormArray extends AbstractControl {
     controls: AbstractControl[];
     readonly length: number;
-    constructor(controls: AbstractControl[], validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn);
+    constructor(controls: AbstractControl[], validator?: ValidatorFn | null, asyncValidator?: AsyncValidatorFn | null);
     at(index: number): AbstractControl;
     getRawValue(): any[];
     insert(index: number, control: AbstractControl): void;
-    patchValue(value: any[], {onlySelf, emitEvent}?: {
+    patchValue(value: any[], options?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
     push(control: AbstractControl): void;
     removeAt(index: number): void;
-    reset(value?: any, {onlySelf, emitEvent}?: {
+    reset(value?: any, options?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
     setControl(index: number, control: AbstractControl): void;
-    setValue(value: any[], {onlySelf, emitEvent}?: {
+    setValue(value: any[], options?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
@@ -198,12 +198,12 @@ export declare class FormArray extends AbstractControl {
 
 /** @stable */
 export declare class FormArrayName extends ControlContainer implements OnInit, OnDestroy {
-    readonly asyncValidator: AsyncValidatorFn;
+    readonly asyncValidator: AsyncValidatorFn | null;
     readonly control: FormArray;
-    readonly formDirective: FormGroupDirective;
+    readonly formDirective: FormGroupDirective | null;
     name: string;
     readonly path: string[];
-    readonly validator: ValidatorFn;
+    readonly validator: ValidatorFn | null;
     constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
     ngOnDestroy(): void;
     ngOnInit(): void;
@@ -211,18 +211,18 @@ export declare class FormArrayName extends ControlContainer implements OnInit, O
 
 /** @stable */
 export declare class FormBuilder {
-    array(controlsConfig: any[], validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn): FormArray;
-    control(formState: Object, validator?: ValidatorFn | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl;
+    array(controlsConfig: any[], validator?: ValidatorFn | null, asyncValidator?: AsyncValidatorFn | null): FormArray;
+    control(formState: Object, validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormControl;
     group(controlsConfig: {
         [key: string]: any;
     }, extra?: {
         [key: string]: any;
-    }): FormGroup;
+    } | null): FormGroup;
 }
 
 /** @stable */
 export declare class FormControl extends AbstractControl {
-    constructor(formState?: any, validator?: ValidatorFn | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]);
+    constructor(formState?: any, validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
     patchValue(value: any, options?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
@@ -231,11 +231,11 @@ export declare class FormControl extends AbstractControl {
     }): void;
     registerOnChange(fn: Function): void;
     registerOnDisabledChange(fn: (isDisabled: boolean) => void): void;
-    reset(formState?: any, {onlySelf, emitEvent}?: {
+    reset(formState?: any, options?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
-    setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}?: {
+    setValue(value: any, options?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
         emitModelToViewChange?: boolean;
@@ -245,14 +245,14 @@ export declare class FormControl extends AbstractControl {
 
 /** @stable */
 export declare class FormControlDirective extends NgControl implements OnChanges {
-    readonly asyncValidator: AsyncValidatorFn;
+    readonly asyncValidator: AsyncValidatorFn | null;
     readonly control: FormControl;
     form: FormControl;
     isDisabled: boolean;
     model: any;
     readonly path: string[];
     update: EventEmitter<{}>;
-    readonly validator: ValidatorFn;
+    readonly validator: ValidatorFn | null;
     viewModel: any;
     constructor(validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[]);
     ngOnChanges(changes: SimpleChanges): void;
@@ -269,7 +269,7 @@ export declare class FormControlName extends NgControl implements OnChanges, OnD
     name: string;
     readonly path: string[];
     update: EventEmitter<{}>;
-    readonly validator: ValidatorFn;
+    readonly validator: ValidatorFn | null;
     constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[]);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
@@ -283,26 +283,26 @@ export declare class FormGroup extends AbstractControl {
     };
     constructor(controls: {
         [key: string]: AbstractControl;
-    }, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn);
+    }, validator?: ValidatorFn | null, asyncValidator?: AsyncValidatorFn | null);
     addControl(name: string, control: AbstractControl): void;
     contains(controlName: string): boolean;
     getRawValue(): any;
     patchValue(value: {
         [key: string]: any;
-    }, {onlySelf, emitEvent}?: {
+    }, options?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
     registerControl(name: string, control: AbstractControl): AbstractControl;
     removeControl(name: string): void;
-    reset(value?: any, {onlySelf, emitEvent}?: {
+    reset(value?: any, options?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
     setControl(name: string, control: AbstractControl): void;
     setValue(value: {
         [key: string]: any;
-    }, {onlySelf, emitEvent}?: {
+    }, options?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
@@ -371,10 +371,10 @@ export declare const NG_VALUE_ACCESSOR: InjectionToken<ControlValueAccessor>;
 
 /** @stable */
 export declare abstract class NgControl extends AbstractControlDirective {
-    readonly asyncValidator: AsyncValidatorFn;
-    name: string;
-    readonly validator: ValidatorFn;
-    valueAccessor: ControlValueAccessor;
+    readonly asyncValidator: AsyncValidatorFn | null;
+    name: string | null;
+    readonly validator: ValidatorFn | null;
+    valueAccessor: ControlValueAccessor | null;
     abstract viewToModelUpdate(newValue: any): void;
 }
 
@@ -417,7 +417,7 @@ export declare class NgForm extends ControlContainer implements Form {
 
 /** @stable */
 export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
-    readonly asyncValidator: AsyncValidatorFn;
+    readonly asyncValidator: AsyncValidatorFn | null;
     readonly control: FormControl;
     readonly formDirective: any;
     isDisabled: boolean;
@@ -429,7 +429,7 @@ export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
     };
     readonly path: string[];
     update: EventEmitter<{}>;
-    readonly validator: ValidatorFn;
+    readonly validator: ValidatorFn | null;
     viewModel: any;
     constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[]);
     ngOnChanges(changes: SimpleChanges): void;
@@ -448,7 +448,7 @@ export declare class NgSelectOption implements OnDestroy {
     id: string;
     ngValue: any;
     value: any;
-    constructor(_element: ElementRef, _renderer: Renderer, _select: SelectControlValueAccessor);
+    constructor(_element: ElementRef, _renderer: Renderer2, _select: SelectControlValueAccessor);
     ngOnDestroy(): void;
 }
 
@@ -467,7 +467,7 @@ export declare class RadioControlValueAccessor implements ControlValueAccessor,
     onChange: () => void;
     onTouched: () => void;
     value: any;
-    constructor(_renderer: Renderer, _elementRef: ElementRef, _registry: RadioControlRegistry, _injector: Injector);
+    constructor(_renderer: Renderer2, _elementRef: ElementRef, _registry: RadioControlRegistry, _injector: Injector);
     fireUncheck(value: any): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
@@ -494,7 +494,7 @@ export declare class SelectControlValueAccessor implements ControlValueAccessor
     onChange: (_: any) => void;
     onTouched: () => void;
     value: any;
-    constructor(_renderer: Renderer, _elementRef: ElementRef);
+    constructor(_renderer: Renderer2, _elementRef: ElementRef);
     registerOnChange(fn: (value: any) => any): void;
     registerOnTouched(fn: () => any): void;
     setDisabledState(isDisabled: boolean): void;
@@ -507,7 +507,7 @@ export declare class SelectMultipleControlValueAccessor implements ControlValueA
     onChange: (_: any) => void;
     onTouched: () => void;
     value: any;
-    constructor(_renderer: Renderer, _elementRef: ElementRef);
+    constructor(_renderer: Renderer2, _elementRef: ElementRef);
     registerOnChange(fn: (value: any) => any): void;
     registerOnTouched(fn: () => any): void;
     setDisabledState(isDisabled: boolean): void;
@@ -532,10 +532,13 @@ export interface ValidatorFn {
 
 /** @stable */
 export declare class Validators {
-    static compose(validators: ValidatorFn[]): ValidatorFn;
-    static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn;
+    static compose(validators: (ValidatorFn | null | undefined)[]): ValidatorFn | null;
+    static compose(validators: null): null;
+    static composeAsync(validators: (AsyncValidatorFn | null)[]): AsyncValidatorFn | null;
     static email(control: AbstractControl): ValidationErrors | null;
+    static max(max: number): ValidatorFn;
     static maxLength(maxLength: number): ValidatorFn;
+    static min(min: number): ValidatorFn;
     static minLength(minLength: number): ValidatorFn;
     static nullValidator(c: AbstractControl): ValidationErrors | null;
     static pattern(pattern: string | RegExp): ValidatorFn;
diff --git a/tools/public_api_guard/http/http.d.ts b/tools/public_api_guard/http/http.d.ts
index 2b0196aa37..d1c17073b1 100644
--- a/tools/public_api_guard/http/http.d.ts
+++ b/tools/public_api_guard/http/http.d.ts
@@ -36,13 +36,13 @@ export declare class CookieXSRFStrategy implements XSRFStrategy {
 export declare class Headers {
     constructor(headers?: Headers | {
         [name: string]: any;
-    });
+    } | null);
     append(name: string, value: string): void;
     delete(name: string): void;
     entries(): void;
-    forEach(fn: (values: string[], name: string, headers: Map<string, string[]>) => void): void;
-    get(name: string): string;
-    getAll(name: string): string[];
+    forEach(fn: (values: string[], name: string | undefined, headers: Map<string, string[]>) => void): void;
+    get(name: string): string | null;
+    getAll(name: string): string[] | null;
     has(name: string): boolean;
     keys(): string[];
     set(name: string, value: string | string[]): void;
@@ -137,40 +137,40 @@ export declare enum RequestMethod {
 /** @experimental */
 export declare class RequestOptions {
     body: any;
-    headers: Headers;
-    method: RequestMethod | string;
+    headers: Headers | null;
+    method: RequestMethod | string | null;
     params: URLSearchParams;
-    responseType: ResponseContentType;
+    responseType: ResponseContentType | null;
     /** @deprecated */ search: URLSearchParams;
-    url: string;
-    withCredentials: boolean;
-    constructor({method, headers, body, url, search, params, withCredentials, responseType}?: RequestOptionsArgs);
+    url: string | null;
+    withCredentials: boolean | null;
+    constructor(opts?: RequestOptionsArgs);
     merge(options?: RequestOptionsArgs): RequestOptions;
 }
 
 /** @experimental */
 export interface RequestOptionsArgs {
     body?: any;
-    headers?: Headers;
-    method?: string | RequestMethod;
+    headers?: Headers | null;
+    method?: string | RequestMethod | null;
     params?: string | URLSearchParams | {
         [key: string]: any | any[];
-    };
-    responseType?: ResponseContentType;
+    } | null;
+    responseType?: ResponseContentType | null;
     /** @deprecated */ search?: string | URLSearchParams | {
         [key: string]: any | any[];
-    };
-    url?: string;
-    withCredentials?: boolean;
+    } | null;
+    url?: string | null;
+    withCredentials?: boolean | null;
 }
 
 /** @experimental */
 export declare class Response extends Body {
     bytesLoaded: number;
-    headers: Headers;
+    headers: Headers | null;
     ok: boolean;
     status: number;
-    statusText: string;
+    statusText: string | null;
     totalBytes: number;
     type: ResponseType;
     url: string;
@@ -188,22 +188,22 @@ export declare enum ResponseContentType {
 
 /** @experimental */
 export declare class ResponseOptions {
-    body: string | Object | ArrayBuffer | Blob;
-    headers: Headers;
-    status: number;
-    url: string;
-    constructor({body, status, headers, statusText, type, url}?: ResponseOptionsArgs);
+    body: string | Object | ArrayBuffer | Blob | null;
+    headers: Headers | null;
+    status: number | null;
+    url: string | null;
+    constructor(opts?: ResponseOptionsArgs);
     merge(options?: ResponseOptionsArgs): ResponseOptions;
 }
 
 /** @experimental */
 export interface ResponseOptionsArgs {
-    body?: string | Object | FormData | ArrayBuffer | Blob;
-    headers?: Headers;
-    status?: number;
-    statusText?: string;
-    type?: ResponseType;
-    url?: string;
+    body?: string | Object | FormData | ArrayBuffer | Blob | null;
+    headers?: Headers | null;
+    status?: number | null;
+    statusText?: string | null;
+    type?: ResponseType | null;
+    url?: string | null;
 }
 
 /** @experimental */
@@ -224,7 +224,7 @@ export declare class URLSearchParams {
     appendAll(searchParams: URLSearchParams): void;
     clone(): URLSearchParams;
     delete(param: string): void;
-    get(param: string): string;
+    get(param: string): string | null;
     getAll(param: string): string[];
     has(param: string): boolean;
     replaceAll(searchParams: URLSearchParams): void;
diff --git a/tools/public_api_guard/platform-browser-dynamic/platform-browser-dynamic.d.ts b/tools/public_api_guard/platform-browser-dynamic/platform-browser-dynamic.d.ts
index e3764d15eb..9dda5c4bc9 100644
--- a/tools/public_api_guard/platform-browser-dynamic/platform-browser-dynamic.d.ts
+++ b/tools/public_api_guard/platform-browser-dynamic/platform-browser-dynamic.d.ts
@@ -1,5 +1,5 @@
 /** @stable */
-export declare const platformBrowserDynamic: (extraProviders?: Provider[]) => PlatformRef;
+export declare const platformBrowserDynamic: (extraProviders?: Provider[] | undefined) => PlatformRef;
 
 /** @experimental */
 export declare const RESOURCE_CACHE_PROVIDER: Provider[];
diff --git a/tools/public_api_guard/platform-browser-dynamic/testing.d.ts b/tools/public_api_guard/platform-browser-dynamic/testing.d.ts
index 8c197754e2..ba6af4425c 100644
--- a/tools/public_api_guard/platform-browser-dynamic/testing.d.ts
+++ b/tools/public_api_guard/platform-browser-dynamic/testing.d.ts
@@ -3,4 +3,4 @@ export declare class BrowserDynamicTestingModule {
 }
 
 /** @stable */
-export declare const platformBrowserDynamicTesting: (extraProviders?: Provider[]) => PlatformRef;
+export declare const platformBrowserDynamicTesting: (extraProviders?: Provider[] | undefined) => PlatformRef;
diff --git a/tools/public_api_guard/platform-browser/animations/testing.d.ts b/tools/public_api_guard/platform-browser/animations/testing.d.ts
index 8452f075a0..ac0800ff6e 100644
--- a/tools/public_api_guard/platform-browser/animations/testing.d.ts
+++ b/tools/public_api_guard/platform-browser/animations/testing.d.ts
@@ -1,27 +1,7 @@
 /** @experimental */
-export declare class MockAnimationDriver implements AnimationDriver {
-    animate(element: any, keyframes: {
-        [key: string]: string | number;
-    }[], duration: number, delay: number, easing: string, previousPlayers?: any[]): MockAnimationPlayer;
-    static log: AnimationPlayer[];
+export declare class BrowserAnimationsTestingModule {
 }
 
 /** @experimental */
-export declare class MockAnimationPlayer extends NoopAnimationPlayer {
-    delay: number;
-    duration: number;
-    easing: string;
-    element: any;
-    keyframes: {
-        [key: string]: string | number;
-    }[];
-    previousPlayers: any[];
-    previousStyles: {
-        [key: string]: string | number;
-    };
-    constructor(element: any, keyframes: {
-        [key: string]: string | number;
-    }[], duration: number, delay: number, easing: string, previousPlayers: any[]);
-    destroy(): void;
-    finish(): void;
+export declare class NoopAnimationsTestingModule {
 }
diff --git a/tools/public_api_guard/platform-browser/platform-browser.d.ts b/tools/public_api_guard/platform-browser/platform-browser.d.ts
index a6cb4eb7e8..c109d8feaf 100644
--- a/tools/public_api_guard/platform-browser/platform-browser.d.ts
+++ b/tools/public_api_guard/platform-browser/platform-browser.d.ts
@@ -16,7 +16,7 @@ export declare class By {
 /** @experimental */
 export declare function disableDebugTools(): void;
 
-/** @stable */
+/** @deprecated */
 export declare const DOCUMENT: InjectionToken<Document>;
 
 /** @stable */
@@ -26,7 +26,7 @@ export declare abstract class DomSanitizer implements Sanitizer {
     abstract bypassSecurityTrustScript(value: string): SafeScript;
     abstract bypassSecurityTrustStyle(value: string): SafeStyle;
     abstract bypassSecurityTrustUrl(value: string): SafeUrl;
-    abstract sanitize(context: SecurityContext, value: any): string;
+    abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null;
 }
 
 /** @experimental */
@@ -58,13 +58,13 @@ export declare class HammerGestureConfig {
 /** @experimental */
 export declare class Meta {
     constructor(_doc: any);
-    addTag(tag: MetaDefinition, forceCreation?: boolean): HTMLMetaElement;
+    addTag(tag: MetaDefinition, forceCreation?: boolean): HTMLMetaElement | null;
     addTags(tags: MetaDefinition[], forceCreation?: boolean): HTMLMetaElement[];
-    getTag(attrSelector: string): HTMLMetaElement;
+    getTag(attrSelector: string): HTMLMetaElement | null;
     getTags(attrSelector: string): HTMLMetaElement[];
     removeTag(attrSelector: string): void;
     removeTagElement(meta: HTMLMetaElement): void;
-    updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement;
+    updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement | null;
 }
 
 /** @experimental */
@@ -112,6 +112,10 @@ export interface SafeStyle extends SafeValue {
 export interface SafeUrl extends SafeValue {
 }
 
+/** @stable */
+export interface SafeValue {
+}
+
 /** @experimental */
 export declare class Title {
     constructor(_doc: any);
diff --git a/tools/public_api_guard/platform-browser/testing.d.ts b/tools/public_api_guard/platform-browser/testing.d.ts
index fef729a433..c37f0f4adf 100644
--- a/tools/public_api_guard/platform-browser/testing.d.ts
+++ b/tools/public_api_guard/platform-browser/testing.d.ts
@@ -3,4 +3,4 @@ export declare class BrowserTestingModule {
 }
 
 /** @stable */
-export declare const platformBrowserTesting: (extraProviders?: Provider[]) => PlatformRef;
+export declare const platformBrowserTesting: (extraProviders?: Provider[] | undefined) => PlatformRef;
diff --git a/tools/public_api_guard/platform-server/platform-server.d.ts b/tools/public_api_guard/platform-server/platform-server.d.ts
index 9623845b08..5a7c35f860 100644
--- a/tools/public_api_guard/platform-server/platform-server.d.ts
+++ b/tools/public_api_guard/platform-server/platform-server.d.ts
@@ -8,10 +8,10 @@ export interface PlatformConfig {
 }
 
 /** @experimental */
-export declare const platformDynamicServer: (extraProviders?: Provider[]) => PlatformRef;
+export declare const platformDynamicServer: (extraProviders?: Provider[] | undefined) => PlatformRef;
 
 /** @experimental */
-export declare const platformServer: (extraProviders?: Provider[]) => PlatformRef;
+export declare const platformServer: (extraProviders?: Provider[] | undefined) => PlatformRef;
 
 /** @experimental */
 export declare class PlatformState {
@@ -21,10 +21,18 @@ export declare class PlatformState {
 }
 
 /** @experimental */
-export declare function renderModule<T>(module: Type<T>, options: PlatformOptions): Promise<string>;
+export declare function renderModule<T>(module: Type<T>, options: {
+    document?: string;
+    url?: string;
+    extraProviders?: Provider[];
+}): Promise<string>;
 
 /** @experimental */
-export declare function renderModuleFactory<T>(moduleFactory: NgModuleFactory<T>, options: PlatformOptions): Promise<string>;
+export declare function renderModuleFactory<T>(moduleFactory: NgModuleFactory<T>, options: {
+    document?: string;
+    url?: string;
+    extraProviders?: Provider[];
+}): Promise<string>;
 
 /** @experimental */
 export declare class ServerModule {
diff --git a/tools/public_api_guard/platform-server/testing.d.ts b/tools/public_api_guard/platform-server/testing.d.ts
index ff45ba7395..56b00cdb39 100644
--- a/tools/public_api_guard/platform-server/testing.d.ts
+++ b/tools/public_api_guard/platform-server/testing.d.ts
@@ -1,5 +1,5 @@
 /** @experimental */
-export declare const platformServerTesting: (extraProviders?: Provider[]) => PlatformRef;
+export declare const platformServerTesting: (extraProviders?: Provider[] | undefined) => PlatformRef;
 
 /** @experimental */
 export declare class ServerTestingModule {
diff --git a/tools/public_api_guard/platform-webworker-dynamic/platform-webworker-dynamic.d.ts b/tools/public_api_guard/platform-webworker-dynamic/platform-webworker-dynamic.d.ts
index 1d56465f7c..763602dc79 100644
--- a/tools/public_api_guard/platform-webworker-dynamic/platform-webworker-dynamic.d.ts
+++ b/tools/public_api_guard/platform-webworker-dynamic/platform-webworker-dynamic.d.ts
@@ -1,5 +1,5 @@
 /** @experimental */
-export declare const platformWorkerAppDynamic: (extraProviders?: Provider[]) => PlatformRef;
+export declare const platformWorkerAppDynamic: (extraProviders?: Provider[] | undefined) => PlatformRef;
 
 /** @stable */
 export declare const VERSION: Version;
diff --git a/tools/public_api_guard/platform-webworker/platform-webworker.d.ts b/tools/public_api_guard/platform-webworker/platform-webworker.d.ts
index bbe4d03bd1..9516b81312 100644
--- a/tools/public_api_guard/platform-webworker/platform-webworker.d.ts
+++ b/tools/public_api_guard/platform-webworker/platform-webworker.d.ts
@@ -3,7 +3,7 @@ export declare function bootstrapWorkerUi(workerScriptUri: string, customProvide
 
 /** @experimental */
 export declare abstract class ClientMessageBroker {
-    abstract runOnService(args: UiArguments, returnType: Type<any> | SerializerTypes): Promise<any>;
+    abstract runOnService(args: UiArguments, returnType: Type<any> | SerializerTypes | null): Promise<any> | null;
 }
 
 /** @experimental */
@@ -41,10 +41,10 @@ export interface MessageBusSource {
 }
 
 /** @experimental */
-export declare const platformWorkerApp: (extraProviders?: Provider[]) => PlatformRef;
+export declare const platformWorkerApp: (extraProviders?: Provider[] | undefined) => PlatformRef;
 
 /** @experimental */
-export declare const platformWorkerUi: (extraProviders?: Provider[]) => PlatformRef;
+export declare const platformWorkerUi: (extraProviders?: Provider[] | undefined) => PlatformRef;
 
 /** @experimental */
 export declare const PRIMITIVE: SerializerTypes;
@@ -66,7 +66,7 @@ export declare const enum SerializerTypes {
 
 /** @experimental */
 export declare abstract class ServiceMessageBroker {
-    abstract registerMethod(methodName: string, signature: Array<Type<any> | SerializerTypes>, method: Function, returnType?: Type<any> | SerializerTypes): void;
+    abstract registerMethod(methodName: string, signature: Array<Type<any> | SerializerTypes> | null, method: Function, returnType?: Type<any> | SerializerTypes): void;
 }
 
 /** @experimental */
diff --git a/tools/public_api_guard/router/router.d.ts b/tools/public_api_guard/router/router.d.ts
index 80b574e659..d234e646c9 100644
--- a/tools/public_api_guard/router/router.d.ts
+++ b/tools/public_api_guard/router/router.d.ts
@@ -1,19 +1,19 @@
 /** @stable */
 export declare class ActivatedRoute {
     readonly children: ActivatedRoute[];
-    component: Type<any> | string;
+    component: Type<any> | string | null;
     data: Observable<Data>;
-    readonly firstChild: ActivatedRoute;
+    readonly firstChild: ActivatedRoute | null;
     fragment: Observable<string>;
     outlet: string;
     readonly paramMap: Observable<ParamMap>;
     params: Observable<Params>;
-    readonly parent: ActivatedRoute;
+    readonly parent: ActivatedRoute | null;
     readonly pathFromRoot: ActivatedRoute[];
     readonly queryParamMap: Observable<ParamMap>;
     queryParams: Observable<Params>;
     readonly root: ActivatedRoute;
-    readonly routeConfig: Route;
+    readonly routeConfig: Route | null;
     snapshot: ActivatedRouteSnapshot;
     url: Observable<UrlSegment[]>;
     toString(): string;
@@ -22,19 +22,19 @@ export declare class ActivatedRoute {
 /** @stable */
 export declare class ActivatedRouteSnapshot {
     readonly children: ActivatedRouteSnapshot[];
-    component: Type<any> | string;
+    component: Type<any> | string | null;
     data: Data;
-    readonly firstChild: ActivatedRouteSnapshot;
+    readonly firstChild: ActivatedRouteSnapshot | null;
     fragment: string;
     outlet: string;
     readonly paramMap: ParamMap;
     params: Params;
-    readonly parent: ActivatedRouteSnapshot;
+    readonly parent: ActivatedRouteSnapshot | null;
     readonly pathFromRoot: ActivatedRouteSnapshot[];
     readonly queryParamMap: ParamMap;
     queryParams: Params;
     readonly root: ActivatedRouteSnapshot;
-    readonly routeConfig: Route;
+    readonly routeConfig: Route | null;
     url: UrlSegment[];
     toString(): string;
 }
@@ -59,6 +59,16 @@ export interface CanLoad {
     canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean;
 }
 
+/** @stable */
+export declare class ChildrenOutletContexts {
+    getContext(childName: string): OutletContext | null;
+    getOrCreateContext(childName: string): OutletContext;
+    onChildOutletCreated(childName: string, outlet: RouterOutlet): void;
+    onChildOutletDestroyed(childName: string): void;
+    onOutletDeactivated(): Map<string, OutletContext>;
+    onOutletReAttached(contexts: Map<string, OutletContext>): void;
+}
+
 /** @stable */
 export declare function convertToParamMap(params: Params): ParamMap;
 
@@ -77,7 +87,7 @@ export declare class DefaultUrlSerializer implements UrlSerializer {
 export declare type DetachedRouteHandle = {};
 
 /** @stable */
-export declare type Event = NavigationStart | NavigationEnd | NavigationCancel | NavigationError | RoutesRecognized | RouteConfigLoadStart | RouteConfigLoadEnd;
+export declare type Event = NavigationStart | NavigationEnd | NavigationCancel | NavigationError | RoutesRecognized | RouteConfigLoadStart | RouteConfigLoadEnd | GuardsCheckStart | GuardsCheckEnd | ResolveStart | ResolveEnd;
 
 /** @stable */
 export interface ExtraOptions {
@@ -88,6 +98,36 @@ export interface ExtraOptions {
     useHash?: boolean;
 }
 
+/** @experimental */
+export declare class GuardsCheckEnd {
+    id: number;
+    shouldActivate: boolean;
+    state: RouterStateSnapshot;
+    url: string;
+    urlAfterRedirects: string;
+    constructor(
+        id: number,
+        url: string,
+        urlAfterRedirects: string,
+        state: RouterStateSnapshot,
+        shouldActivate: boolean);
+    toString(): string;
+}
+
+/** @experimental */
+export declare class GuardsCheckStart {
+    id: number;
+    state: RouterStateSnapshot;
+    url: string;
+    urlAfterRedirects: string;
+    constructor(
+        id: number,
+        url: string,
+        urlAfterRedirects: string,
+        state: RouterStateSnapshot);
+    toString(): string;
+}
+
 /** @stable */
 export declare type LoadChildren = string | LoadChildrenCallback;
 
@@ -135,9 +175,9 @@ export interface NavigationExtras {
     fragment?: string;
     preserveFragment?: boolean;
     /** @deprecated */ preserveQueryParams?: boolean;
-    queryParams?: Params;
-    queryParamsHandling?: QueryParamsHandling;
-    relativeTo?: ActivatedRoute;
+    queryParams?: Params | null;
+    queryParamsHandling?: QueryParamsHandling | null;
+    relativeTo?: ActivatedRoute | null;
     replaceUrl?: boolean;
     skipLocationChange?: boolean;
 }
@@ -157,6 +197,15 @@ export declare class NoPreloading implements PreloadingStrategy {
     preload(route: Route, fn: () => Observable<any>): Observable<any>;
 }
 
+/** @stable */
+export declare class OutletContext {
+    attachRef: ComponentRef<any> | null;
+    children: ChildrenOutletContexts;
+    outlet: RouterOutlet | null;
+    resolver: ComponentFactoryResolver | null;
+    route: ActivatedRoute | null;
+}
+
 /** @stable */
 export interface ParamMap {
     readonly keys: string[];
@@ -196,6 +245,34 @@ export declare type ResolveData = {
     [name: string]: any;
 };
 
+/** @experimental */
+export declare class ResolveEnd {
+    id: number;
+    state: RouterStateSnapshot;
+    url: string;
+    urlAfterRedirects: string;
+    constructor(
+        id: number,
+        url: string,
+        urlAfterRedirects: string,
+        state: RouterStateSnapshot);
+    toString(): string;
+}
+
+/** @experimental */
+export declare class ResolveStart {
+    id: number;
+    state: RouterStateSnapshot;
+    url: string;
+    urlAfterRedirects: string;
+    constructor(
+        id: number,
+        url: string,
+        urlAfterRedirects: string,
+        state: RouterStateSnapshot);
+    toString(): string;
+}
+
 /** @stable */
 export interface Route {
     canActivate?: any[];
@@ -239,8 +316,8 @@ export declare class Router {
     readonly routerState: RouterState;
     readonly url: string;
     urlHandlingStrategy: UrlHandlingStrategy;
-    constructor(rootComponentType: Type<any>, urlSerializer: UrlSerializer, outletMap: RouterOutletMap, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes);
-    createUrlTree(commands: any[], {relativeTo, queryParams, fragment, preserveQueryParams, queryParamsHandling, preserveFragment}?: NavigationExtras): UrlTree;
+    constructor(rootComponentType: Type<any> | null, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes);
+    createUrlTree(commands: any[], navigationExtras?: NavigationExtras): UrlTree;
     dispose(): void;
     initialNavigation(): void;
     isActive(url: string | UrlTree, exact: boolean): boolean;
@@ -261,11 +338,11 @@ export declare const ROUTER_INITIALIZER: InjectionToken<(compRef: ComponentRef<a
 
 /** @experimental */
 export declare abstract class RouteReuseStrategy {
-    abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle;
+    abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null;
     abstract shouldAttach(route: ActivatedRouteSnapshot): boolean;
     abstract shouldDetach(route: ActivatedRouteSnapshot): boolean;
     abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;
-    abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void;
+    abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void;
 }
 
 /** @stable */
@@ -281,7 +358,7 @@ export declare class RouterLink {
     routerLink: any[] | string;
     skipLocationChange: boolean;
     readonly urlTree: UrlTree;
-    constructor(router: Router, route: ActivatedRoute, tabIndex: string, renderer: Renderer, el: ElementRef);
+    constructor(router: Router, route: ActivatedRoute, tabIndex: string, renderer: Renderer2, el: ElementRef);
     onClick(): boolean;
 }
 
@@ -294,7 +371,7 @@ export declare class RouterLinkActive implements OnChanges, OnDestroy, AfterCont
     routerLinkActiveOptions: {
         exact: boolean;
     };
-    constructor(router: Router, element: ElementRef, renderer: Renderer, cdr: ChangeDetectorRef);
+    constructor(router: Router, element: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
     ngAfterContentInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
@@ -318,7 +395,7 @@ export declare class RouterLinkWithHref implements OnChanges, OnDestroy {
     constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy);
     ngOnChanges(changes: {}): any;
     ngOnDestroy(): any;
-    onClick(button: number, ctrlKey: boolean, metaKey: boolean): boolean;
+    onClick(button: number, ctrlKey: boolean, metaKey: boolean, shiftKey: boolean): boolean;
 }
 
 /** @stable */
@@ -329,32 +406,28 @@ export declare class RouterModule {
 }
 
 /** @stable */
-export declare class RouterOutlet implements OnDestroy {
+export declare class RouterOutlet implements OnDestroy, OnInit {
     activateEvents: EventEmitter<any>;
     readonly activatedRoute: ActivatedRoute;
+    readonly activatedRouteData: {
+        [name: string]: any;
+    };
     readonly component: Object;
     deactivateEvents: EventEmitter<any>;
     readonly isActivated: boolean;
     /** @deprecated */ readonly locationFactoryResolver: ComponentFactoryResolver;
     /** @deprecated */ readonly locationInjector: Injector;
-    outletMap: RouterOutletMap;
-    constructor(parentOutletMap: RouterOutletMap, location: ViewContainerRef, resolver: ComponentFactoryResolver, name: string);
-    /** @deprecated */ activate(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver, injector: Injector, providers: ResolvedReflectiveProvider[], outletMap: RouterOutletMap): void;
-    activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null, outletMap: RouterOutletMap): void;
+    constructor(parentContexts: ChildrenOutletContexts, location: ViewContainerRef, resolver: ComponentFactoryResolver, name: string, changeDetector: ChangeDetectorRef);
+    activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null): void;
     attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute): void;
     deactivate(): void;
     detach(): ComponentRef<any>;
     ngOnDestroy(): void;
+    ngOnInit(): void;
 }
 
 /** @stable */
-export declare class RouterOutletMap {
-    registerOutlet(name: string, outlet: RouterOutlet): void;
-    removeOutlet(name: string): void;
-}
-
-/** @stable */
-export declare class RouterPreloader {
+export declare class RouterPreloader implements OnDestroy {
     constructor(router: Router, moduleLoader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, preloadingStrategy: PreloadingStrategy);
     ngOnDestroy(): void;
     preload(): Observable<any>;
@@ -403,6 +476,17 @@ export declare abstract class UrlHandlingStrategy {
     abstract shouldProcessUrl(url: UrlTree): boolean;
 }
 
+/** @experimental */
+export declare type UrlMatcher = (segments: UrlSegment[], group: UrlSegmentGroup, route: Route) => UrlMatchResult;
+
+/** @experimental */
+export declare type UrlMatchResult = {
+    consumed: UrlSegment[];
+    posParams?: {
+        [name: string]: UrlSegment;
+    };
+};
+
 /** @stable */
 export declare class UrlSegment {
     readonly parameterMap: ParamMap;
@@ -424,7 +508,7 @@ export declare class UrlSegmentGroup {
         [key: string]: UrlSegmentGroup;
     };
     readonly numberOfChildren: number;
-    parent: UrlSegmentGroup;
+    parent: UrlSegmentGroup | null;
     segments: UrlSegment[];
     constructor(
         segments: UrlSegment[],
@@ -443,7 +527,7 @@ export declare abstract class UrlSerializer {
 
 /** @stable */
 export declare class UrlTree {
-    fragment: string;
+    fragment: string | null;
     readonly queryParamMap: ParamMap;
     queryParams: {
         [key: string]: string;
diff --git a/tools/public_api_guard/upgrade/static.d.ts b/tools/public_api_guard/upgrade/static.d.ts
index 40cee4c38d..75b541cad7 100644
--- a/tools/public_api_guard/upgrade/static.d.ts
+++ b/tools/public_api_guard/upgrade/static.d.ts
@@ -1,6 +1,7 @@
 /** @experimental */
 export declare function downgradeComponent(info: {
     component: Type<any>;
+    /** @experimental */ propagateDigest?: boolean;
     /** @deprecated */ inputs?: string[];
     /** @deprecated */ outputs?: string[];
     /** @deprecated */ selectors?: string[];
@@ -9,6 +10,15 @@ export declare function downgradeComponent(info: {
 /** @experimental */
 export declare function downgradeInjectable(token: any): Function;
 
+/** @experimental */
+export declare function downgradeModule<T>(moduleFactoryOrBootstrapFn: NgModuleFactory<T> | ((extraProviders: Provider[]) => Promise<NgModuleRef<T>>)): string;
+
+/** @stable */
+export declare function getAngularLib(): any;
+
+/** @stable */
+export declare function setAngularLib(ng: any): void;
+
 /** @experimental */
 export declare class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
     constructor(name: string, elementRef: ElementRef, injector: Injector);
diff --git a/tools/public_api_guard/upgrade/upgrade.d.ts b/tools/public_api_guard/upgrade/upgrade.d.ts
index e8469a35ef..ce14d8a70a 100644
--- a/tools/public_api_guard/upgrade/upgrade.d.ts
+++ b/tools/public_api_guard/upgrade/upgrade.d.ts
@@ -18,7 +18,7 @@ export declare class UpgradeAdapterRef {
     ng2Injector: Injector;
     ng2ModuleRef: NgModuleRef<any>;
     dispose(): void;
-    ready(fn: (upgradeAdapterRef?: UpgradeAdapterRef) => void): void;
+    ready(fn: (upgradeAdapterRef: UpgradeAdapterRef) => void): void;
 }
 
 /** @stable */
diff --git a/tools/tsconfig.json b/tools/tsconfig.json
index f16b62ee1d..58702a2c06 100644
--- a/tools/tsconfig.json
+++ b/tools/tsconfig.json
@@ -9,19 +9,22 @@
     "outDir": "../dist/tools/",
     "noImplicitAny": true,
     "noFallthroughCasesInSwitch": true,
-    "paths": {
-    },
+    "paths": {},
     "rootDir": ".",
     "sourceMap": true,
     "inlineSources": true,
-    "lib": ["es6", "dom"],
+    "lib": [
+      "es6",
+      "dom"
+    ],
     "target": "es5",
     "skipLibCheck": true
   },
   "exclude": [
     "node_modules",
+    "ngc-wrapped",
     "typings-test",
     "public_api_guard",
     "docs"
   ]
-}
+}
\ No newline at end of file